Мудборд: что это и зачем его применять

Знакомо вам это чувство, когда две недели дизайнишь макет для клиента, а в ответ получаешь: «Это вообще не то. Не тот стиль, не тот вайб»? Чтобы такого не было, нужен мудборд. С ним дизайнеру не надо переделывать макет по 10 раз из-за недопонимания с клиентом. Да и сам проект движется быстрее.

В статье расскажем, что такое мудборд и зачем он нужен. Пройдемся по всем этапам его создания — от брифинга до презентации. А еще подскажем, чем мудборд отличается от референса и как избежать ошибок в работе с мудбордом.

Представьте, к вам пришел клиент и говорит, что хочет сайт в стиле «современный минимализм». Дизайнер работает, презентует результат, а клиент недоволен: не попали в его видение сайта. Чтобы таких ситуаций не было, используют мудборд.

Так что такое мудборд простыми словами? Мудборд (англ. moodboard — доска настроения) — это коллаж или набор референсов, собранных в одном стиле, который помогает визуально представить направление дизайна проекта.

Чаще всего это набор разных референсов, которые вместе создают определенный стиль и атмосферу. Обычно moodboard делают в начале проекта, чтобы зафиксировать идеи, на которых потом будет строиться визуал.

Вот примеры мудбордов для проектов в области брендинга.

Какие элементы входят в мудборд? На самом деле, любые, которые отражают идею и настроение проекта. Итак, что входит в мудборд:

• примеры интерфейсов и элементов UI;
• шрифты;
• фотографии, иллюстрации;
• постеры, плакаты;
• атмосферные кадры из видео или анимации;
• паттерны, текстуры;
• логотипы, иконки, элементы брендинга;
• ссылки на сайты.

Важно: доска настроения — это не набор картинок для вдохновения, а осмысленный коллаж, где каждая деталь работает на общую идею и передает нужный вайб.

Формат мудборда выбирают под задачу и условия работы.

• Цифровой — собран в сервисах вроде Figma, Miro, Milanote или Pinterest.
• Олдскульный физический — настоящая доска или стенд с распечатанными картинками, образцами тканей, палитрами. Хорош для офлайн-воркшопов, когда команда и клиент в одном помещении.
• Гибридный — сочетает физические и цифровые элементы. Например, команда собирается вживую, создает физическую доску, фотографирует ее и переносит в онлайн, чтобы продолжить работу удаленно. Удобно, если проект стартует офлайн, а дальше идет дистанционно.

Мудборды нужны там, где важен визуал и нужно быстро договориться о стиле: маркетинг, веб-дизайн, дизайн интерьеров, мода или кино.

Их используют на старте работы над дизайном после интервью с клиентом — до того, как дизайнер садится за макеты или прототипы. Именно на этом этапе проще убрать лишнее, добавить нужное и утвердить общее настроение. Гораздо проще, чем потом переделывать готовый дизайн.

В веб-дизайне и UI/UX мудборд помогает согласовать с клиентом стиль сайта, чтобы потом не гонять макеты туда-сюда по десять раз. Это экономит время, снижает количество правок и делает работу предсказуемой для всех.

Когда у дизайнера и заказчика нет общей визуальной опоры, проект превращается в бесконечное обсуждение в духе: «это все не то» и «мы хотели по-другому».

Moodboard закрывает несколько важных задач прямо на старте проекта. Разберем, зачем нужен мудборд в дизайне и как мудборд помогает в креативном процессе.

Помогает клиенту выбрать. С помощью мудбордов заказчик может оценить предложенные идеи и выбрать, какое направление/настроение/стилистика ему больше нравится.

Визуализирует идею. Не каждый заказчик может «увидеть» сайт по описанию. Мудборд превращает слова в конкретные изображения, а идеи — в понятную визуальную историю. А еще позволяет собрать обратную связь и убедиться, что все на одной волне до этапа дизайн-концепции.

Организует работу. Мудборд раскладывает разрозненные мысли и идеи дизайнера по полочкам, собирает их в нечто цельное и помогает не сбиться с курса. Плюс на мудборде вы фиксируете ресеч и референсы для конкретного проекта.

Вовлекает клиента на раннем этапе. Даже без глубоких знаний в дизайне именно он решает, дать ли проекту старт. Мудборд с визуальными ориентирами поможет избежать недопонимания.

Согласовывает стилистику на берегу. Вернемся к тому, что такое мудборд и зачем он нужен. Мудборд — это визуальный контракт. На нем фиксируются стилистика (например, минимализм, ретро, футуризм), цветовая палитра, форма элементов (скругленные или острые углы, симметрия или динамика), настроение (от делового до дерзкого). Это задает рамки, внутри которых дизайнер уже свободно работает.

Экономит ресурсы. Четкий мудборд — страховка от хаотичных правок, переделок и затянутых согласований. Он сокращает риск того, что итоговый дизайн будет «не таким, как представляли». И вообще, визуальное согласование на старте обойдется дешевле, чем бесконечные доработки на финише.

Мудборд — вещь полезная, но не волшебная. Он не сделает проект красивым сам по себе, зато сильно упростит жизнь и дизайнеру, и клиенту.

Какие у мудборда есть плюсы?

• Экономит время: уже на старте видно, в каком направлении двигаться. Меньше правок, меньше «давайте попробуем ещё вот так».
• Снижает риск недопонимания: все видят одно и то же, а не представляют в голове свои версии.
• Дает визуальную опору: дизайнер держит перед глазами набор одобренных референсов, клиент уверен, что движемся в верную сторону.
• Подходит для командной работы: удобно согласовывать идеи между несколькими специалистами: дизайнер, копирайтер, маркетолог.

А теперь перейдем к минусам.

• Риск слишком зациклиться на чужих идеях: копирование вместо поиска уникального решения.
• Не заменяет полноценный макет: клиент может одобрить мудборд, а потом удивиться, что готовый дизайн выглядит иначе.

Мудборд в UI/UX, например, отлично работает для согласования стиля мобильного приложения, но он не покажет, как кнопка будет вести себя при клике. Поэтому важно воспринимать его как ориентир, а не финальную версию.

Иногда мудборд только усложняет процесс. Особенно, если задача простая и рамки работы четко заданы.

• Есть четкое ТЗ и брендбук — если у клиента уже есть подробные гайды по цветам, типографике и стилю, визуальная карта идей может стать повторением очевидного.
• Проект микроформата — мини-лендинг, серия иконок или пост в соцсети, выполненный строго по сетке бренда. В таких случаях мудборд займёт больше времени, чем сама работа.
• Сверхсжатые сроки — когда продукт надо запустить за два дня, а согласование деталей можно перенести на будущее. Но это исключение, а не правило, все-таки спешка часто обходится дорого.

В UI/UX, например, при редизайне уже существующего интерфейса, если остается прежний фирменный стиль, есть ТЗ и брендбук, можно обойтись без мудборда, ограничившись прямыми референсами внутри макета в Figma.

Референс — это конкретный пример (скриншот чужого сайта, иллюстрация, обложка приложения или отдельный UI-элемент), который хочется адаптировать под себя.

Мудборд — это коллаж из референсов, который помогает поймать настроение проекта: фото, шрифты, цвета, текстуры.

Концепция (или концепт) — это дизайн части проекта, в котором отображаются стилистика, сетка, кнопки и все, что будет дальше разработано в дизайне. Она нужна, чтобы клиент увидел проект в выбранной стилистике. Это как бы демо-версия сайта или приложения с основными элементами, воплощенная в макете.

Макет — готовое визуальное решение, максимально приближенное к финальному виду проекта. Если мудборд передаёт настроение, а референс — отдельный приём или деталь, то макет показывает, как всё это будет работать в реальном продукте.

Например, вот макет промо-страницы для виртуального учителя на базе ИИ. В дизайне мы использовали фирменные цвета бренда, которые попали прямо в сердце ЦА, и учли пожелания клиента о космическом вайбе и системах управления. Еще мы добавили сложную анимацию, которая делает акцент на преимуществах платформы. А Bento grid помогает легко считать всю нужную информацию, даже при обилии анимации.

Как мудборд, референс, концепция и макет связаны между собой? Работа с мудбордом обычно включена в такую цепочку.

1. Мудборд задает атмосферу. Он помогает клиенту и команде понять, в каком визуальном направлении двигаться.
2. Референсы уточняют детали — цветовые решения, расположение элементов, стилистика.
3. Концепт собирает все воедино, превращая набор идей в рабочий макет.
4. Макет. По сути, это квинтэссенция всего пути — полностью отрисованная страница/цы. Здесь уже согласованная структура соединяется с цветами, шрифтами, визуальными решениями и превращается в готовый дизайн.

Мудборд — не просто подборка изображений, а цельная визуальная история. С его помощью можно передать ключевые элементы проекта:

• Цветовая гамма. Заранее определите сочетание оттенков, которое задаст тон всей работе.
• Атмосфера и стиль. Через фотографии и иллюстрации раскройте настроение проекта, будь то минимализм, ретро или что-то другое.
• Текстуры и узоры. Добавьте детали, которые сделают дизайн выразительным и запоминающимся.
• Типографика. Подберите шрифты, гармонирующие с общей концепцией.
• Интерактивные элементы. Продемонстрируйте, как продуманный дизайн кнопок и призывов к действию может повысить вовлеченность пользователей.

Любой проект начинается с цели. Перед тем как приступить, нырните в продукт: кто его покупает, какие ассоциации он вызывает. Так будет легче понять, в каком стиле работать. Расскажем, как наши дизайнеры работают над проектом, как сделать мудборд для дизайна и чем полезен мудборд для дизайнеров. А еще перечислим шаги создания мудборда.

1. Брифинг. Выясняем, каким клиент видит итоговый продукт, какая стоит задача. Если речь о сайте — уточняем целевую аудиторию и необходимый функционал.

2. Ресерч. Начинаем с изучения ТЗ, комментариев клиента и анализа конкурентов и целевой аудитории. Смотрим, какие визуальные приемы работают в нужной нише, изучаем решения смежных компаний.

3. Формирование мудбордов (вы находитесь здесь). Помним, что один мудборд — это один визуальный стиль и настроение. Иногда тестируем идеи, которые выходят за рамки ТЗ, чтобы найти неожиданные, но удачные решения. Например, можем сделать два контрастных мудборда: сдержанный и функциональный против смелого и инновационного. Решаем, сколько мудбордов нужно и какое настроение будет у каждого. Каждый вариант должен передавать определенное настроение — например, технологичность, строгость или надежность. Клиент может вместе с дизайнером формировать мудборд, обсуждая и дополняя его до полного согласования с обеих сторон.

4. Сбор референсов. Подбираем картинки и примеры отдельных решений, которые помогают в решении аналогичных задач, либо хороши визуально. На этом этапе важно не собирать все подряд, а держать в фокусе цель бренда.

5. Презентация вариантов. На презентации показываем мудборды клиенту и объясняем, как каждый элемент работает на бренд: от цветовой палитры и композиции до типографики. Обсуждаем плюсы и минусы каждого подхода, чтобы заказчик мог сравнить и выбрать близкое направление.

6. Обратная связь и выбор. Клиент выделяет удачные находки, указывает, что не подходит. Из сотни картинок дальше может пройти всего несколько, но и этого хватает, чтобы нащупать стиль. После выбора направления фиксируем ключевые визуальные принципы — это база для дальнейшей разработки дизайна.

7. Прорисовка концепта. Делаем дизайн-концепт главной страницы, который задает тон всему проекту.

8. Итерации и доработки. Показываем первый полноценный вариант, собираем комментарии, вносим правки и утверждаем дизайн. После этого переносим стиль на остальные страницы.

9. Отрисовка UI Kit. На основе согласованного с клиентом концепта формируем UI Kit — набор готовых элементов и стилей, чтобы оформление всех страниц было единым.

10. Финал. Согласовываем макет со всеми правками и передаем материалы разработчику, чтобы сайт ожил.

Чтобы не превращать moodboard в хаотичную подборку картинок, полезно соблюдать несколько принципов. Заодно разберемся, как правильно работать с мудбордом.

1. Один мудборд — один стиль, одна история. Каждый элемент должен поддерживать общее настроение. Если проект про минимализм — выбираем чистые фоны, лаконичные шрифты и спокойные цвета. Никаких готических шрифтов или кислотных градиентов «на всякий случай».

2. Чистота и фокус. Четкая иерархия помогает воспринимать информацию. Оптимально 8−10 ключевых элементов, главный элемент помещаем в центр. Палитра ограничена 3−4 цветами. Главные картинки — крупнее, второстепенные — меньше.

3. Подписи и пояснения. Визуал не всегда говорит сам за себя. Добавляйте короткие комментарии, который ответят на вопросы «Что это?» и «Зачем?». Например:

• что это? — «Основной шрифт для заголовков»;
• зачем это? — «Передает строгость и минимализм»

4. Группировка. Делим материалы на блоки:

• цвет — палитры, градиенты, фото с нужным тоном;
• типографика — шрифты и их сочетания;
• UI-элементы — кнопки, формы, меню;
• образы — фото, иллюстрации, паттерны.

Размещайте блоки так, чтобы их было легко «сканировать» сверху вниз или слева направо.

5. Презентация клиенту. Показывайте мудборд в PDF, на интерактивной доске или прямо в Figma/Milanote и обязательно опишите свое видение. Обсудите с клиентом, что нравится, что нет и почему — так экономятся часы работы на этапе дизайна.

Мудборд не должен превращаться в «свалку» из понравившихся картинок. Его задача — фильтровать, а не собирать всё подряд. Когда на доске десятки несогласованных по стилю и смыслу изображений, заказчик теряется, а дизайнер рискует уйти не в то направление.

• Свалки картинок. Мудборд — не подборка «всё, что понравилось». На нём только то, что отражает цель и настроение/стиль проекта.
• Смешения несовместимых стилей. Минимализм и барокко в одном проекте редко дружат. Если это не задумка, лучше убрать лишнее или разделить на разные мудборды.
• Слишком много элементов. 40−50 картинок перегружают восприятие. Оптимально — 8−10 карточек на один мудборд.
• Бессмысленных элементов без контекста. Мудборд для корпоративного портала не должен внезапно уходить в эстетику уличной моды — если это не запланированный ход. Фото «просто понравилось» не работает. Нужно объяснение, зачем оно здесь.

Ниже мы собрали самые распространённые ошибки при работе с мудбордом и советы, как их избежать. Таблица поможет быстро понять, что мешает создать понятный и эффективный moodboard, а что делает его полезным инструментом для команды и клиента.

Создать мудборд можно по-разному: от цифровых платформ до привычных заметок на столе. Ниже — самые удобные варианты для работы.

Перед тем как показывать мудборд клиенту, пройдитесь по чек-листу.

1. Если убрать комментарии автора, будет ли понятен посыл?
2. Есть ли логика в расположении элементов или все выглядит хаотично?
3. Подписаны ли ключевые элементы так, чтобы любой человек понял, что это и зачем?
4. Согласуются ли цвета между собой и с задачей проекта?
5. Передает ли мудборд нужное настроение/атмосферу?
6. Есть ли баланс между картинками, текстом и пустым пространством?
7. Отсутствуют ли в подборке случайные или неуместные элементы?
8. Не перегружен ли мудборд количеством деталей?
9. Ясно ли, какие элементы являются основными, а какие — фоновыми?
10. Подготовлены ли материалы в хорошем качестве, без размытых изображений?
11. Есть ли в мудборде визуальные подсказки, помогающие клиенту «увидеть» будущий проект?

Хороший мудборд может спасти проект на старте и избежать разочарований на финише. Используйте его как основу для визуальной стратегии и работать на проектом будет проще.