Коротко
Мудборд (moodboard) — это подборка референсов, цветов, шрифтов и слов, которая показывает, каким по настроению должен быть будущий дизайн. В Morfa его собирают на доске: картинки перетаскивают, вставляют через ⌘V или командой «Поместить изображение…» (⇧⌘K), раскладывают по секциям и подписывают стикерами.
Мудборд делают до макетов, чтобы договориться о направлении, а не о кнопках. Готовую доску выгружают в PNG или PDF через «Экспорт доски» (⇧⌘E).
Что такое мудборд и зачем он нужен
Мудборд (от английского mood board — «доска настроения») — это коллаж из фотографий, скриншотов, цветов, шрифтов и слов, по которому видно, каким должен получиться дизайн. Он отвечает не на вопрос «где кнопка», а на вопрос «какое ощущение у продукта».
Мудборд делают до макетов. Поменять картинку на доске дешевле, чем перерисовать десяток экранов, поэтому направление согласуют с командой или заказчиком именно на этом этапе. Его используют, когда начинают сайт, приложение, бренд или редизайн.
Что положить в мудборд
Жёсткого состава нет, но хороший мудборд отвечает на четыре вопроса: какое настроение, какие цвета, какие шрифты и на что похоже. Ещё один раздел помогает не меньше — то, чего вы не хотите.
Референсы
Фотографии, скриншоты интерфейсов, иллюстрации. У каждого — подпись в одну фразу: что именно в нём нравится.
Палитра
Три–пять цветов с HEX-кодами: основной, акцентный, фон и текст.
Шрифты
Пара шрифтов — для заголовков и для текста — и образец на кириллице. Подобрать пару можно из каталога шрифтов с кириллицей.
Слова-ориентиры
Три–пять слов о характере продукта: «спокойный», «плотный», «дружелюбный».
Не наш стиль
Пара примеров того, от чего уходите. Так спор о вкусах заканчивается быстрее.
Мудборд, стайлгайд и дизайн-система
Все три описывают внешний вид, поэтому их путают. Разница — в этапе и в том, насколько решение обязательное.
| Документ | Что решает | Когда делают |
|---|---|---|
| Мудборд | Настроение и направление: ориентир, а не правило | В начале, до первых макетов |
| Стайлгайд | Правила цвета, шрифтов, отступов и тона текстов | Когда направление выбрано |
| Дизайн-система | Компоненты и токены, из которых собраны экраны | Когда экранов и людей становится много |
Сам мудборд в продукт не попадает. Выбранные цвета и шрифты потом становятся переменными, стилями и компонентами — так начинается дизайн-система.
Как сделать мудборд на доске: по шагам
Доска в Morfa принимает картинки так же, как файл дизайна, поэтому весь мудборд собирается в одном месте. Об остальных объектах доски — на странице онлайн-доска.
Создайте доску
В файловом менеджере нажмите «Новая доска». Соавторы видят правки сразу, а комментарии и версии работают так же, как в файлах дизайна.
Разметьте секции
Инструментом «Секция» (⇧S) сделайте разделы: «Настроение», «Цвет», «Шрифты», «Не наш стиль». Когда раздел заполнится, выделите его и нажмите «Подогнать по содержимому».
Добавьте картинки
Перетащите файлы с компьютера прямо в секцию — несколько файлов встанут в ряд. Скопированную картинку вставьте через ⌘V. Чтобы выбрать файлы на диске, откройте «Файл» → «Поместить изображение…» (⇧⌘K) и щёлкайте по доске: каждый щелчок ставит следующую картинку.
Подпишите референсы
Рядом с картинкой поставьте стикер (S) с одной фразой: что в ней берём. Цвет пишите HEX-кодом на стикере — у фигур на доске 20 готовых заливок, точный цвет ими не задать.
Покажите шрифты картинкой
Шрифт из каталога на доске не выбрать: у текста там меняются только размер, цвет, выравнивание, «Жирный» и «Рукописный шрифт». Образцы вставьте картинкой или соберите пару шрифтов в файле дизайна.
Выберите направление вместе
В меню «Реакции и встреча» запустите «Голосование…»: от 1 до 20 голосов на человека, по умолчанию 3. Голосуют за стикеры, фигуры и тексты, а не за сами картинки, поэтому подпишите каждый вариант стикером. Итоги видны, когда голосование закончится. Для быстрой оценки без голосования поставьте рядом с картинкой «Штамп» (E).
Выгрузите доску
«Экспорт доски» (⇧⌘E) сохраняет всю доску или выделение в PNG на белом или прозрачном фоне либо в PDF с одной страницей-картинкой, в масштабе 1× или 2×.
- ⇧⌘K
- Поместить изображение…
- S
- Стикер
- ⇧S
- Секция
- T
- Текст
- E
- Штамп
- C
- Комментарии
- ⇧⌘E
- Экспорт доски
На Windows и Linux вместо ⌘ нажимается Ctrl: ⇧⌘K — это Ctrl+Shift+K.
Частые ошибки
Мудборд работает, когда по нему можно быстро договориться. Для этого каждая картинка должна объяснять себя, а доска — вести к одному решению.
- Картинки без подписей. Через неделю никто не вспомнит, что нравилось в этом фото: свет, цвет или шрифт.
- Цвета на глаз. «Примерно синий» в макет не перенесёшь — нужен HEX-код.
- Мудборд вместо макета. Он задаёт настроение, а не размеры кнопок и отступы.