Дизайн
#статьи

Что такое мудборды и зачем они дизайнеру

Оказывается, любая (почти) подборка картинок и красивых фоток с сайтов — это крутой инструмент в руках дизайнера.

Иллюстрация: Merry Mary для Skillbox Media

Что за мудборды такие?

Мудборд — это «доска настроения» (от англ. mood board). Так называют набор фотографий, иллюстраций, паттернов, слоганов, шрифтов и цветовых схем. Его делают для будущего дизайн-проекта, чтобы понять, каким будет визуальное решение: серьёзным или весёлым, элитарным или демократичным, какие образы возьмут за основу, как будут сочетаться цвета и какой будет типографика.


И как выглядит этот набор? Где его можно собрать?

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

Коллаж из фотографий растений, городских пейзажей и людей
Изображение: Morgan Messersmith / Behance

А если вы хотите использовать его только внутри команды, подойдёт и такой набор картинок:

Коллаж из обложек и разворотов журналов о скейтбординге
Изображение: Слава Лазарев / Skillbox Media

Но это же лишняя работа! Обязательно делать эти коллажи?

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

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

Круто! Собираем красивые картинки отовсюду и идём дизайнить?

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

Например, если ваш клиент продаёт дрова и заказал у вас сайт, то странно держать в мудборде скриншоты с промостраницей Apple, фотографии машин Tesla и клубничного мороженого. Логичнее, если вы посмотрите на сайты конкурентов и какие-нибудь гравюры.

Мудборд с предметными фотографиями и образами из рекламы технологичных продуктов
Скриншот: hyohyun noh / Behance

А целостность — это как? Картинки должны красиво смотреться вместе?

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

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

А если сделать подписи, чтобы образы стали понятнее?

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

Такой мудборд можно использовать как референс для дизайна лендинга: на нём есть цветовые палитры, формы для паттернов и пример шрифта
Скриншот: Canva

Что именно можно показывать на мудбордах? Только дизайн сайтов и логотипов?

Нет, в мудборде может быть что угодно — от разноцветных носков до наборов кнопок из Material Design. Тематические коллажи делают веб-дизайнеры, дизайнеры рекламы и фирменного стиля, дизайнеры интерьера, одежды, а иногда даже художники и фотографы. Картинки зачастую красноречивее, чем долгие объяснения. Грамотно составленные мудборды позволяют специалистам из разных областей понять друг друга: это касается и коммуникации с клиентами, и общения внутри команды.

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

Да, но чаще в разных областях наборы изображений всё-таки различаются. Например, если речь о дизайне сайта или мобильного приложения, очень важно добавить на мудборд шрифты. В дизайне интерьера типографика не важна, но текстуры могут помочь определиться с используемыми материалами.

Основу мудбордов обычно составляют фотографии и рисунки — это универсальные элементы для любого проекта.

Такой мудборд с фотографиями может быть отправной точкой для дизайна детских игрушек из дерева. А если добавить шрифты и графические элементы — для веб-интерфейса
Скриншот: slebor / Canva

Я тоже хочу сделать мудборд. А с чего начать?

Искать картинки для вдохновения и сохранять их в разные папки можно на Pinterest, Dribbble или Behance. Это удобные сайты, чтобы начать работу над проектом: там есть куча картинок на любую тему. Собрать все нужные изображения в один коллаж можно в Photoshop, Figma или другом редакторе.

А есть какие-то правила, по которым надо размещать картинки в мудборде?

Нет, расположение картинок может быть произвольным. Например, вот так:

Коллаж из фотографий и иллюстраций
Изображение: Delightfull

Ой, Photoshop — это сложно! А нет ли каких-то шаблонов, чтобы просто вставить картинки?

Да, во многих онлайн-редакторах есть такая опция — например, удобно работать с мудбордами в Figma или на Adobe Spark.

Ура, кажется, получилось! Что с ним делать дальше?

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

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

Курс

Профессия Веб-дизайнер

Вы освоите веб- и UX-дизайн. Научитесь создавать удобные сайты, работать с анимацией и презентовать проекты клиентам. Сможете начать карьеру в дизайне и брать первые заказы уже после завершения первых двух курсов.

Узнать про курс

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать
Обучение: Профессия Веб-дизайнер Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована