Мудборд — это набор ссылок и других данных, которые задают определенный стиль вашего проекта. Дизайнеры, иллюстраторы, фотографы создают мудборды, чтобы собрать концепцию идеи в одном месте.
Например, веб-дизайнеру необходимо создать сайт интернет-магазина цветов. Он начинает собирать примеры сайтов-конкурентов, выбирать дизайн похожих проектов. Выбрав лучшие варианты, дизайнер углубляет идею и выбирает: цветовые схемы сайта, типографику и элементы сайта. Только после этого он приступает к работе над созданием прототипа.
Как мудборды помогают при разработке сайта:
- Установите стиль сайта
- Ускорить создание сайта за счет ссылок
- Если вы создаете сайты на заказ, это убережет вас от недоразумений с заказчиком
Где создавать мудборд
Создать мудборд можно и в Ворде, но лучше воспользоваться специальными сервисами, решающими эту задачу. Сервисы удобнее: у них есть встроенные библиотеки изображений и шрифтов.
- Миланская нота
- Миро
- Файлы дизайна
- Хороший
- Образец платы
- Мудборд
Выберите сервис, с которым хотите работать, и переходите к первому шагу.
1. Определите направление вашего проекта
Мудборды могут быть буквальными и практичными (со шрифтами, цветовыми схемами и изображениями) или могут быть посвящены изучению тона и настроения.
Эти два типа могут выполняться параллельно. На доске вы указываете, какие цвета, узоры и изображения вы будете использовать. А с другой – в каком стиле будет создан сайт.
2. Соберите существующий материал
Теперь, когда вы определили направление своего мудборда, добавьте к нему: ценности бренда, позиционирование, любые логотипы, элементы дизайна и изображения. Возможно, они не будут включены в финальную доску настроения, но, тем не менее, эти данные помогут вам начать работу.
3. Добавьте образы
Изображения, которые вы решите включить в свой мудборд, могут оказать большое влияние на внешний вид вашего сайта. Они помогут определить такие вещи, как тон, обрамление, стиль и цветовую схему.
Если вы не нашли сайты, которые вам нравятся, вы можете найти примеры на Dribbble, Behance и Designspiration. Здесь разные дизайнеры делятся своими работами, которые можно сортировать по типу проекта, цветовой гамме и другим важным параметрам.
Популярный сайт Behance, на котором мы нашли примеры веб-дизайна. Преимущество использования таких сайтов для ссылок в том, что дизайнеры публикуют на них работы, в которых используются последние тенденции. Это значит, что ваша страница будет обновляться долгое время.
Не волнуйтесь, если ваша доска хаотична, мы исправим это позже, а пока не стесняйтесь добавлять как можно больше идей.
4. Добавьте примеры анимаций
Анимация на сайтах может быть совершенно разной: от самой простой, практически незаметной для пользователя, до сложной с вау-эффектом, например, параллаксом.
Сделав это, вы расширите свое понимание того, какие анимации нужны сайту, и уже под них подкорректируете дизайн.
5. Добавьте цвета и шрифты
Цвета могут быть отличным способом выразить определенные эмоции и индивидуальность. Например, сайт аптеки лучше всего создавать в светлых тонах, а сайт ночного клуба – в темных и светлых тонах. Но для каждого из этих сайтов будет один или два цвета, которые отражают индивидуальность конкретного сайта.
Сервис Kuler помогает найти цвета, дополняющие бренд. Еще один лайфхак: этот цвет уже есть в вашем мудборде, проанализируйте добавленные вами референсы и найдите подходящий цвет.
А для выбора шрифта используйте страницу дизайна Typewolf. Это отличный способ изучить различные комбинации шрифтов и то, как они взаимодействуют друг с другом.
6. Время навести порядок
После того, как вы собрали все свои идеи в одном месте, следующим шагом будет их организация для создания идеальной композиции.
Этот процесс может занять некоторое время, и часто создается впечатление, что вы понятия не имеете, как будет выглядеть доска настроений. Скорее всего, у вас будет больше материала, чем вам нужно, и он может выглядеть бессвязным. Это отлично!
Начните с изучения композиции и введения иерархии. Разместите ключевой элемент, например логотип, чтобы закрепить доску, а также измените размер и положение других элементов, чтобы показать их важность и взаимосвязь друг с другом.
7. Опишите свои мысли
Если вы мыслите визуально, то мудборд — это бесценный инструмент для передачи образа и настроения вашего проекта так, как иногда невозможно передать словами. А вот для заказчика или его дизайнеров нужно добавить описание своих мыслей. Это поможет объяснить ваши идеи и сохранить связь между ними. Не нужно вдаваться в подробности – просто напишите в нескольких словах, что вы хотели передать тем или иным изображением.
И готово!
Мудборд выше создан Milanote. Примерно такая информация должна быть на доске.
Теперь, когда у вас есть готовая справочная доска и визуальное представление того, как будет выглядеть дизайн, приступайте к созданию своего веб-сайта.
