Что такое мудборд и как его создать

Планируя дизайн проекта, сложно обойтись одними словами. Как бы понятно не объясняли заказчики желаемый образ, картинка в голове складывается у каждого своя. Чтобы избежать разногласий и более точно определить задачу, используют мудборды. Этот инструмент работает как визуальный бриф.

Пример мудборда. Источник

Расскажу, что такое мудборд, зачем он нужен и как его создавать. 

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

Что включить в мудборд

Как создать мудборд: 4 этапа

1. Брифинг и постановка технического задания
2. Сбор материала и подготовка мудборда
3. Подготовка мудборда
4. Согласование и утверждение

Где сделать мудборд

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

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

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

Образец мудборда для разработки визитной карточки. Источник

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

Что включить в мудборд

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

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

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

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

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

Мудборд может быть минималистичным. Источник

Как создать мудборд: 4 этапа

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

1. Брифинг и постановка технического задания

На начальном этапе нужно понять, что именно требуется и каким должен быть результат. Для этого обсуждают: 

• каковы цели и задачи проекта; 
• кто является целевой аудиторией; 
• важно ли соблюсти фирменный стиль; 
• какое настроение должен вызывать проект; 
• какие проекты нравятся и не нравятся. 

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

2. Сбор материала и подготовка мудборда

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

При подборе элементов доски можно использовать метод ассоциаций. Для этого составьте список слов, которыми можно описать проект или его желаемый образ. Важно найти ассоциации, которые первыми приходят на ум. К примеру, к слову «море» мы обычно представляем песок, солнце, отдых, волны, ракушки. Для подбора ассоциаций можно воспользоваться специальными сервисами вроде Sociation.org или «Сеть словесных ассоциаций». 

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

• творческие платформы вроде Behance или Dribble; 
• профессиональные площадки, например, Awwwards; 
• фотостоки — Unsplash, Freepik; 
• фотохостинги — Pinterest, Designspiration. 

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

3. Подготовка мудборда

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

Вот несколько рекомендаций по составлению мудбордов: 

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

Ограничьте количество картинок/фрагментов. При большом количестве элементов на доске сложно представить единый образ, поскольку внимание рассеивается. Для передачи сути достаточно 5-7 элементов. 

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

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

4. Согласование и утверждение

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

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

Где сделать мудборд

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

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

Пример мудборда в офлайне — стильно, красиво, передаёт настроение. Источник

В стандартном приложении. В обычном PowerPoint или Microsoft Word можно собрать композицию из изображений и сохранить её в удобном формате. 

В графическом редакторе. Можно создать мудборд в Illustrator, Figma, Sketch, Adobe Photoshop или любом другом приложении для работы с графикой. 

На специализированных сайтах. Создавать свои композиции можно на Behance, Dribbble или Pinterest. 

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

• Miro. Удобно создавать интерактивные доски с нуля, загружать изображения и добавлять пометки. Результатом можно делиться с командой. 
• Eagle. В этом сервисе можно объединять картинки с учётом разных характеристик — по цвету, по ключевым словам и т.д. Можно сохранять в сервисе материалы прямо из браузера и искать подходящие элементы внутри сервиса. Eagle поддерживает работу с 80+ графическими форматами. Есть версия для Windows. 
• Creatopy. Есть готовые шаблоны для баннеров, которые можно использовать как основу создания доски настроения. Плюс сервиса — библиотеки для поиска изображения, иконок и элементов дизайна. 
• SampleBoard. Специализированный сервис, в котором можно быстро собрать профессиональную доску и поделиться ей. Дополнительные инструменты помогают подбирать цвета, просматривать дизайн-тренды, импортировать изображения с веб-сайтов, искать картинки на фотостоках, добавлять разные эффекты. 
• Niice. Доступна демонстрация визуальных элементов на цифровых холстах. В сервисе можно создать собственную библиотеку элементов, просматривать коллекции и использовать шаблоны.

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