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

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

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

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

Главная польза мудборда — перевод вкуса с языка слов на язык картинок. Заказчик говорит «хочу стильно и не скучно», дизайнер понимает это по-своему, и через неделю на встрече выясняется, что «стильно» оба представляли по-разному. Доска с двадцатью картинками снимает эту проблему за одну встречу: видно, что откликается, а что вызывает «нет, только не это».

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

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

Чем мудборд отличается от референсов, макета и гайдлайна?

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

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

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

Что положить в мудборд для сайта?

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

• Цвета — три-пять образцов с кодами, которые задают основное настроение, а не всю будущую палитру.
• Шрифты — пример заголовка и абзаца текста, набранных кандидатами на шрифтовую пару.
• Стиль фотографий — светлые или контрастные, постановочные или репортажные, люди или предметы.
• Иллюстрации и графика — есть ли они вообще и в какой манере: плоская, объёмная, линейная.
• Формы и детали — скругления, тени, линии, фактуры, которые повторятся в кнопках и карточках.
• Фрагменты интерфейсов — шапки, карточки, кнопки чужих сайтов, которые передают нужное ощущение.
• Слова-ориентиры — два-три прилагательных, которыми описывается направление: «спокойный, технологичный, честный».

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

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

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

Где создать мудборд: Pinterest, Figma, Miro или презентация

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

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

Pinterest удобен, чтобы собрать материал, а Figma или Miro — чтобы свести его в одну композицию и обсудить с заказчиком.

Сколько вариантов мудборда показывать заказчику?

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

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

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

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

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

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

Вопросы, которые стоит задать заказчику по каждой доске:

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

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

Картинки из интернета в мудборде: что с авторскими правами

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

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

Практические правила:

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

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

Что делать после того, как мудборд утверждён

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

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

Источники

• Гражданский кодекс РФ, статья 1259. Объекты авторских прав — КонсультантПлюс
• Гражданский кодекс РФ, статья 1270. Исключительное право на произведение — КонсультантПлюс
• Создание доски — Справка Pinterest — Pinterest
• Онлайн-доска для совместной работы — Miro