Зачем дизайнеру нужен мудборд и как его составить

Никита Канюков, автор-эксперт Яндекс Практикума, рассказал, что такое мудборд, как его составить и чем он полезен дизайнеру. В статье собрали подборку инструментов, которые помогут создать мудборд.

Представим, что перед дизайнером стоит задача сделать сайт для кофейни. В первую очередь нужно понять, с какими образами должна ассоциироваться эта кофейня. Например, в качестве отправных образов (или тегов) дизайнер вместе с заказчиком выделили ассоциации: чёрно-белое, минималистичное, фактурное и иногда просто coffee, может быть, ещё город и рисунки. В самом начале поиска они смотрят максимально широко, не уточняя эпоху, географию, стиль моделей, типографику. Ведь, например, город в Китае в начале 21 века — это одна стилистика, а улицы Бронкса середины 20 века — совсем другая. Нужно отсматривать источники, чтобы собрать то, что по ощущениям ложится в одну категорию по выбранным «тегам». Коллекцию таких изображений, передающих общее настроение и стилистику элементов, называют «мудборд» (moodboard).

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

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

● Изучить данные, известные об аудитории: исследования, запросы, предпочтения.

● Создать текстовое описание нескольких гипотез по визуальной стилистике. В нашем примере мы рассматриваем одну, но обычно делается 2—3.

● Создать мудборд для визуализации выбранных образов, стиля.

● Создать отдельные виды мудборда для элементов. Это могут быть кнопки, иконки, иллюстрации, цветовые схемы, текстуры или другие части композиции.

● Отрисовать концепт основных экранов интерфейса (UI).

● Выбрать референсы по основным отобранным из мудбордов направлениям.

● Отрисовать отдельные элементы UI, детализировать графические элементы, создать графику, фотографии.

● Провести прототипирование.

● Передать материалы на вёрстку команде фронтенд-программистов.

В работе обычно бывает несколько концепций — соответственно, и несколько мудбородов.

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

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

Бывает, подборка изображений не может решить задачу и нужно развивать другую идею. Уместно вспомнить цитату Брюса Мау: «The wrong answer is the right answer in search of a different question». В этом случае можно отложить вариант мудборда и использовать его потом для другого проекта. В конце концов, это поле для экспериментов, здесь нет правильных ответов.

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

Часто встречается мнение, что создание moodboard и подбор референсов — это одно и то же. Рассмотрим нюансы этих терминов.

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

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

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

Пример детального копирования на основе референса

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

В результате мы получили концепт — это эскиз дизайна интерфейса в выбранном стиле.

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

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

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

● композицию,

● цветовую схему,

● шрифты,

● стилистику графических элементов,

● дизайн элементов интерфейса,

● стиль фотографий или иллюстраций,

● анимацию элементов.

Например, композиция страницы Meta Quest 2 отличается от промосайта iPhone, но отдельные элементы схожи. Кнопки, цветовая схема, цвет фона. Подобные элементы можно брать в качестве референса и использовать в своей работе в сочетании с другими частями композиции

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

Мы не стали дублировать центральную композицию и добавили иллюстрации и дополнительные блоки текста

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

Третья версия концепта, которая ещё дальше уходит от референса

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

Moodboard — более широкое понятие, чем референс. Чтобы создать его, нужно руководствоваться другими принципами. Это не только подборка аналогов, элементы которых можно заимствовать, творчески объединяя в макет. В мудборде часть изображений передаёт настроение, отсылает к стилистике. Так, если мы хотим использовать в проекте чёрно-белую фотографию, но пока не решили, в каком стиле, можно собрать несколько и потом обсудить с командой, как интегрировать этот мотив в проект. Например, для нашего «кофейного» сайта группа изображений мудборда могла бы выглядеть следующим образом.

Пример мудборда, собранного из разных изображений в графическом редакторе

Мудборд, собранный в качестве «коллекции» в Pinterest

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

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

Moodboard по иконкам и иллюстрациям в графическом редакторе

Moodboard по иконкам и иллюстрациям в Pinterest

По цветам мудборд может быть примерно такой. Цветовую раскладку можно делать в графическом редакторе или специальных сервисах типа Adobe Color

Вариант вёрстки и изображений. На этапе концепта ещё не выверяются детали, какие-то иллюстрации могут быть не финальными. Мы, например, взяли для эскиза иконки Christopher Delorenzo

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

1. Прогулка

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

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

2. Сайты с визуальным контентом

Pinterest

Сайт помогает искать аналоги к выбранным изображениям, собирать свои доски с подборками, загружать пины (картинки), переходить из поиска на сайты, с которых взяты изображения.

В процессе поиска можно пробовать разные теги: «типографика», «фотография», «интерфейсы» — в сочетании с другими тегами («чёрно-белое», «минимализм», «кофе»)

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

Designspiration

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

3. Каталоги с портфолио и проектами студий

На сайтах с готовыми кейсами (Behance, Dribbble, Awwwards) будет плодотворнее вводить не прямые запросы вроде «сайт кофейни», а выбранные общие термины: «чёрно-белое», «минимализм», «фактура». Или просматривать работы в поисках интересующих элементов: кнопок, форм, решений по композиции.

Behance

4. Фотобанки

Фотобанки помогут найти изображения, которые впоследствии можно использовать не нарушая авторских прав. Самые популярные: Unspash и Adobe Stock.

5. Сайт The Metropolitan Museum of Art в Нью-Йорке

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

Когда сложно решить, в каком стиле сделать оформление поста, где найти и как купить права на иллюстрации, можно полистать этот каталог.

6. Каталоги иконок

Пиктограммы дают толчок фантазии, становятся отправной точкой для разработки элементов интерфейса.

Пример на сайте Noun Project

7. Видео, анимация, 3D

Мобильные приложения и сайты — это не только статичные изображения, но и видео, интерактивные элементы. В поисках интересных решений можно просматривать фильмы (и делать скриншоты), сервисы футажей и даже каталоги 3D-моделей. Это доступно на сайтах Sketchfab, Storyblocks и других видеостоках.

8. Giphy

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

9. Соцсети

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

10. Источники с чужими работами

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

Итак, дизайнер собрал все изображения, которые передают его видение проекта, и теперь ему нужно придумать, как составить мудборд. На самом деле тут нет строгих правил, какую программу или приложение для мудборда использовать. Некоторые просто распечатывают картинки и раскладывают их на столе или поочерёдно показывают заказчику на экране. Чтобы передать цельное впечатление и собрать нужные изображения, дизайнер выбирает любой редактор для работы с графикой, который ему больше нравится. Это может быть Figma или Adobe Photoshop.

Получить навыки работы с этими инструментами и программами, а также разобраться, как делать мудборд, чтобы он решал свою задачу, можно на курсе «Графический дизайнер» Практикума.