Что такое мудборд и как собрать его для дизайн-проекта
Основы3 минРедакция Innovialabs
Коротко
Мудборд — это подборка цветов, шрифтов, изображений и референсов, которая задаёт визуальное направление проекта и помогает согласовать «настроение» с клиентом ещё до того, как нарисован первый макет.
Что такое мудборд
Мудборд (moodboard) — это коллаж из визуальных материалов: цветов, шрифтов, фотографий, текстур, фрагментов чужих интерфейсов. Его задача — показать, каким по ощущению будет продукт: строгим или игривым, премиальным или доступным, плотным или воздушным.
Мудборд не является дизайном. Это инструмент разговора: он переводит размытые слова клиента («современно», «стильно», «не скучно») в конкретные картинки, с которыми можно согласиться или поспорить.
Мудборд и style tiles: в чём разница
| Мудборд | Style tiles | |
|---|---|---|
| Что показывает | Настроение и направление | Конкретные элементы стиля |
| Материал | Чужие изображения и референсы | Собственные цвета, шрифты, кнопки |
| Этап | Самое начало | После утверждения направления |
| Точность | Приблизительная | Близко к финальному UI |
Обычно сначала делают мудборд, чтобы выбрать направление, а затем style tiles — один или несколько листов с реальной палитрой, типографикой, кнопками и формами. Это мост между настроением и макетами.
Что собирать в мудборд
- Цвет. Основные и акцентные оттенки, примеры сочетаний, светлая и тёмная гамма.
- Типографика. Образцы шрифтов для заголовков и текста, примеры крупных и мелких надписей.
- Изображения. Стиль фотографий (постановочные или живые, яркие или приглушённые), иллюстрации, иконки.
- Фактуры и формы. Скругления, тени, градиенты, сетки, графические приёмы.
- Референсы. Скриншоты интерфейсов и сайтов, у которых нравится конкретная деталь, а не всё целиком.
- Слова. Три–пять прилагательных, которые описывают продукт, например «спокойный, точный, дружелюбный».
Важно: у каждого элемента должна быть причина. Если не можете объяснить, зачем картинка на доске, уберите её.
Как собрать мудборд пошагово
- Начните с брифа. Выясните аудиторию, цели продукта, конкурентов и ограничения бренда.
- Сформулируйте ключевые слова. Они станут фильтром для отбора материалов.
- Соберите широко. Наберите больше материалов, чем нужно, из разных источников.
- Отсейте лишнее. Оставьте то, что поддерживает ключевые слова и не противоречит друг другу.
- Скомпонуйте. Крупно — главное настроение, мелко — детали. Добавьте подписи, что именно нравится в каждом референсе.
- Подготовьте 2–3 направления, если клиент сам не уверен в стиле. Направления должны заметно отличаться.
Инструменты
- Figma или FigJam — удобно, если дальше работа пойдёт там же: доска, комментарии клиента и макеты в одном месте.
- Milanote — заточен под доски и заметки, легко раскладывать материалы свободно.
- Pinterest — хорош для поиска и сбора идей, но для презентации клиенту лучше перенести выбранное на отдельную доску.
Инструмент вторичен. Главное — чтобы клиент мог открыть доску и оставить комментарий.
Как использовать мудборд в работе с клиентом
- Показывайте до макетов. Исправить направление на мудборде быстрее и дешевле, чем переделывать экраны.
- Ведите обсуждение по вопросам. «Что здесь ближе к вашему продукту?», «Что точно не подходит?»
- Фиксируйте решение. Утверждённый мудборд становится опорой: если позже возникнет спор о стиле, к нему можно вернуться.
- Не выдавайте чужое за своё. Референсы служат для направления, их не копируют в финальный дизайн.
Частые ошибки
- Доска без идеи — просто красивые картинки, не связанные с задачей.
- Слишком много всего — клиент теряется и не может выбрать.
- Одинаковые варианты — если направления похожи, выбор теряет смысл.
- Пропуск согласования — мудборд сделан, но клиент его не утвердил явно.