Только сейчас мы с вами начинаем заниматься дизайном. Уверен многие к этому не привыкли. Ведь «попсовая» модель в веб-дизайне подразумевает сразу переходить к созданию дизайн-макета. Но мы с вами отталкиваемся сначала от интересов бизнеса и его требований. И чем раньше вы поймете, что дизайн работает в тесной связке с бизнесом, то тем более быстрым будет ваш рост.
🖼️Что такое Mood Board и зачем он нужен?
Mood Board — это визуальная концепция в виде примеров сайтов, а также элементов дизайна (цвета, шрифты, иконки и др.).
Цель — дать понимание клиенту в каком стиле будет исполнен сайт, а также дать понимание по расположению элементов на сайте (это мы рассмотрим в композициях). Некоторые вещи у вас уже будут, если вы взяли их из текущего сайта или ТЗ, или брендбука компании.
📑Структура Mood Board следующая:
- Шрифты
- Цвета
- Иконки
- Анализ соц. сетей
- Классные сайты конкурентов или смежных ниш
- Композиции
И сейчас мы рассмотрим каждый элемент.
✒️Шрифты
Я не сторонник глубокого изучения типографики на начальном уровне. Все задачи за нас могут решить сервисы и наработки других дизайнеров. Нам достаточно знать основные типы шрифтов. Эту информацию я взял с сайта fonts.google.com:
- C засечками
- Без засечек
- Декоративные
- Моноширинные
- Рукописные
Так как же нам подбирать шрифт? Идем в яндекс или гугл и пишем «Красивые шрифтовые пары» или «Font pairs examples» и получаем сотни комбинаций. Вот и все. 🙂
Основные правила при работе со шрифтом
- Для многострочного текста межстрочный интервал — примерно 140% (чтобы в свободное пространство между строками влезла еще одна строка).
- Для заголовков можно использовать любые интервалы в зависимости от найденного референса или визуальной красоты.
- Для заглавных букв можно использовать межбуквенный интервал.
- Не используем чисто черный цвет для текста в макете.
- Соблюдаем принцип контраста — удобство чтения всегда в приоритете.
🖌️Цвета
Если нужно подобрать цветовую схему для проекта, то сделать мы это можем несколькими способами:
- Взять информацию из технического задания или пожеланий клиента
- Взять среднее решение по рынку, которое используется у конкурентов
- Если у вас есть хотя бы один цвет, то можно при помощи «цветового круга» создать полную цветовую схему.
В итоге нам нужно получить 1-2-3 цвета (чаще один будет акцентным (главным), а один или два других вспомогательными или субакцентными).
Всегда помните! Чтобы мы должны выводить цвета, а не придумывать их при помощи пипетки и цветовой палитры!!! Это очень важно.
Как использовать цветовую схему?
Акцентный цвет используем для ключевых кнопок, ссылок, иконок. Все то, на что бы мы хотели обратить внимание в интерфейсе. Также акцентным цветом можно подсвечивать эффекты, когда мышь наведена на элемент. Таким образом вы создадите у посетителя привычку, что главным цветом вы окрашиваете самые важные элементы в интерфейсе. А это является одним из способов управления вниманием пользователя.
Еще расскажу вам об источнике цветовых схем. Достаточно написать запрос “color scheme” + ниша на английском языке и в итоге вы получите сотни готовых цветовых схем.
Colors Eva Design
Если разрабатываете крупный интерфейс или хотите очень качественно проработать дизайн-макет, то вам точно будут необходимы служебные цвета: цвета успеха заполнения полей; цвета ошибки и предупреждений. Тут нам поможет сайт https://colors.eva.design/
📐Иконки
На начальном этапе вашего развития я крайне рекомендую подбирать отдельно стилистику иконок, а не искать и не подбирать их в процессе итогового дизайна.
Иконки делятся на:
- Простые и сложные
- Заливочные и обводочные
- Монохромные и многоцветные
Для типовых действий лучше брать простые иконки, так как они максимально быстро создают нужную ассоциацию (Например: трубка телефона — позвонить в компанию; конверт — адрес электронной почты; геопозиция — место нахождения компании и т.д.) Для визуализации преимуществ и визуализации контента лучше использовать сложные иконки. Они как раз смогут передать не только простое действие, но и сложную визуализацию.
💻Примеры сайтов
Далее идет — подборка классных сайтов конкурентов или сайтов из близких сфер. Нужно посмотреть в интернете сайты, которые классные по дизайну, без необходимости брать у них что-то. “Есть понимание, что сайт классный и подходит под настроение проекта? — Забираем!” Это даст настроение вашему mood board, а также клиент, посмотрев на данный раздел, сможет сказать — “А можно мне как на этом сайте?” в случае, если какие-то ваши предложения клиента не устроят.
🖥️Композиции экранов
Следующий этап один из самых важных — это подбор композиций экранов. Композиция — это размещение элементов в рамках: экрана, блока, страницы. Тут вы уже даете клиенту понимание, как ваш дизайн будет выглядеть с точки зрения подачи информации и размещения контента. Данные композиции будут иллюстрацией «Заголовков» из раздела “Текстового прототипа”.
Видите как все связано. Вся информация, собранная нами, никуда не теряется, а используется как основа для последующих этапов. Поэтому я так горжусь своим дизайн-процессом и его результативностью. 🙂
Перед поиском референса, мы прямо в Figma пишем:
- Что нужно найти (шапка, карточка товара, первый экран)
- Далее мы ищем похожий пример
- После того как мы нашли нужную композицию, нам нужно дописать: почему вы выбрали этот вариант + что изменить под свои задачи. Если мы просто будем копировать бездумно референсы, то наш сайт будет похож на Франкенштейна, которые соткан из разных композиций. Поэтому всегда анализируйте: как вы под себя поменяете референс.
📍Выводы
- На этапе визуальной концепции (Mood Board) предлагаются дизайн решения по будущему дизайну
- Mood Board состоит из следующих разделов:
- Шрифты
- Цвета
- Иконки
- Анализ соц. сетей
- Классные сайты конкурентов или смежных ниш
- Композиции
- Особое внимание уделяйте подбору композиций. От качества подобранных композиций будет зависеть качество будущего дизайн-макета.
