Мудборд или Как сдать макет клиенту с первого раза

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

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

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

Мудборд помогает убедиться, что заказчик и исполнитель поняли друг друга и задача принята правильно. Пример: заказчик Y приходит в Out of Cloud за фирменным стилем. Мы проводим брифинг клиента, уточняем характеристики продукта и ожидания клиента. Затем начинаем работать над «доской настроения».

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

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

При подготовке мудборда мы идем от общего к частному. Сначала подбираем цветовую палитру: дизайнеры и контент-маркетологи Out of Cloud пользуются функцией фильтра по цвету. Она есть у Dribbble, Behance и Adobe Color.

Еще один способ — вбить в поиске Google или Pinterest запрос «palette + название цвета».

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

Последний шаг — подобрать графическое решение. Уделяем внимание деталям и подбираем визуал, который решит задачу и отразит дух бренда: фотографии или векторные иллюстрации, абстрактный фон или градиентный, гротескные шрифты или антикву. Чаще всего ищем такие референсы на Pinterest, Shutterstock, Behance или Dribbble.

Переходим к созданию мудборда: собираем на одном пространстве все элементы, которые приглянулись. Для этого выбираем удобный инструмент: подойдут Figma, Canva, Adobe Photoshop или Adobe Spark, «Google Презентации» или PowerPoint.

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

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