Спор о вкусах дешевле вести на чужих примерах, чем на своём готовом макете. Мудборд - подборка референсов, по которой заказчик и дизайнер сверяют вкус до того, как дизайнер сядет рисовать первый экран. Обычно это экономит один-два круга правок, которые иначе всплывают уже на этапе готового дизайна.
Без мудборда всё идёт так: бриф собран, дизайнер садится за макет, через неделю показывает результат, а заказчик говорит "не то, слишком строго" или "хотелось ярче". Дизайнер переделывает вслепую, потому что "не то" ничего не объясняет. Мудборд убирает эту слепую переделку: спор о вкусе проходит на пяти-семи картинках за час, а не на готовом макете за неделю работы.
Мудборд, прототип и концепция - в чём разница
Мудборд - это подборка чужих визуальных примеров: скриншотов сайтов, фотографий, палитр, шрифтовых пар. Задача не показать, как будет выглядеть будущий сайт, а договориться об общем языке: строгий он или живой, светлый или контрастный, с фотографиями людей или с иллюстрациями.
Прототип решает другую задачу - раскладывает блоки страницы без цвета и шрифта, отвечает на вопрос "что где стоит". Про прототип и его нужность мы отдельно писали в статье про макет до вёрстки.
Дизайн-концепция идёт третьим шагом: готовый вариант первого экрана в цвете и шрифте, построенный на том, что решили на мудборде. Без мудборда концепция превращается в гадание, и первый вариант почти всегда уходит на переделку.
Порядок обычно такой: бриф, затем прототип и мудборд параллельно - они про разные вещи и не мешают друг другу, потом концепция первого экрана, и только после её утверждения дизайнер переходит к остальным страницам.
Из чего собирают мудборд
Хороший мудборд закрывает четыре пункта, а не сваливается в одну кучу картинок.
Сайты конкурентов. Не чтобы копировать, а чтобы понять, что уже примелькалось в нише и от чего стоит отстроиться. Если все стоматологии в городе делают сайт в бело-голубом, третий такой же теряется в поиске визуально, даже если текст лучше.
Сайты из других отраслей. Часто настроение переносят из совсем другой ниши: строгую типографику берут у юридических фирм, живую фотографию - у ресторанов, крупные формы - у финтеха. Это даёт свежий вид без изобретения велосипеда.
Палитра. Три-пять цветов с примерными HEX-значениями или хотя бы названиями оттенков. На этом этапе точный код не нужен - важно определиться, тёплая гамма или холодная, один акцентный цвет или два.
Стиль фотографий и иллюстраций. Постановочные студийные снимки или живые кадры с производства, плоские иллюстрации или объёмные, стоковые библиотеки или собственная съёмка. Этот пункт сильнее всего влияет на бюджет разработки: живая съёмка стоит отдельных денег, а стоковые фото - нет.
Отдельно стоит типографика: гарнитура заголовков, крупные буквы или мелкие, много воздуха вокруг текста или плотная вёрстка. Про то, что решает дизайн, а что вёрстка, мы писали в статье про UX и UI.
Где брать референсы
Дизайнеру не стоит ждать, что заказчик сам принесёт все примеры. У заказчика редко есть словарь для описания стиля - он скажет "стильно" и "современно", и дизайнеру это ничего не сообщит. Поэтому первую версию мудборда собирает дизайнер, а заказчик правит.
Источники стандартные: сайты прямых конкурентов и лидеров ниши, галереи вроде Behance и Dribbble с работами других дизайнеров, тематические подборки в Pinterest, реальные живые сайты, а не одни лишь конкурсные работы - живой сайт показывает, как решение работает под реальный контент и реальные ограничения бюджета. Хорошая практика - принести не пять примеров, а пятнадцать-двадцать, из которых на встрече отсеется большая часть.
Разговор про мудборд, а не пролистывание картинок
Самая частая ошибка встречи - вопрос "как вам?" и ответ "нравится" или "не нравится" без причины. Дизайнеру это ничего не даёт: он не понимает, что именно понравилось - цвет, шрифт, композиция или настроение фотографии.
Рабочий вопрос звучит иначе: "что конкретно здесь цепляет - палитра, шрифт, расположение элементов?" Дальше стоит разделять содержание и оформление: заказчику может нравиться макет конкурента, потому что там понятная навигация, а не потому что там красивый шрифт. Если не развести эти два слоя, дизайнер рискует утащить в референс структуру страницы, хотя просили только настроение.
Практический приём - завести две колонки при обсуждении: "что нравится" и "почему", даже если это просто заметки на экране во время созвона. Через пять примеров становится видно закономерность: заказчику раз за разом откликаются контрастные заголовки или, наоборот, спокойная светлая палитра.
Приём "антимудборд"
Примеры того, что точно не подходит, сужают поиск быстрее, чем примеры того, что нравится. Заказчик редко формулирует желаемый стиль абстрактно, зато почти всегда уверенно скажет "вот так точно не хочу".
Антимудборд собирают из тех же источников: сайты, которые кажутся слишком строгими, слишком яркими, устаревшими по ощущению. Обычно хватает трёх-пяти примеров с пометкой, что именно отталкивает - цвет, шрифт, плотность текста, обилие анимации. Комбинация "вот это нравится" плюс "вот это не нравится" закрывает пространство вариантов гораздо точнее одной положительной подборки.
От мудборда к концепции первого экрана
После обсуждения дизайнер сводит утверждённые примеры в короткое резюме: палитра из трёх-четырёх цветов с ролями (фон, акцент, текст), гарнитура заголовков и текста, тип фотографий или иллюстраций, общее настроение в одной фразе вроде "спокойно, просторно, минимум декора".
Это резюме и есть переход к концепции - первому варианту главного экрана сайта в цвете, с реальными или близкими к реальным текстами. Концепция уже не референс, а собственное решение дизайнера, но собранное на согласованном языке, а не наугад. Если заказчик просит поправить, правки на этом этапе обычно точечные - сдвинуть акцент, поменять фото, а не переделать всё заново.
Чек-лист перед встречей по мудборду
- Дизайнер принёс 15-20 примеров, а не собирает их на ходу во время звонка.
- Примеры разделены по категориям: конкуренты, другие отрасли, палитра, фотостиль.
- Есть хотя бы три примера антимудборда с пояснением, что именно не подходит.
- На каждый комментарий заказчика задан уточняющий вопрос "что конкретно".
- Итог встречи зафиксирован письменно: три-пять цветов, гарнитура, тип фото, одна фраза про настроение.
- Итог отправлен заказчику для явного согласования, а не остался в переписке чата.
Кому мудборд точно нужен
Мудборд оправдан почти всегда, кроме двух случаев: сайт делается по готовому фирменному стилю, где палитра и шрифты уже заданы, или заказчик прямо говорит "полностью доверяю дизайнеру, покажите готовый вариант". Стоит ли гнаться за модным приёмом сезона или лучше взять то, что не устареет через год, отдельный вопрос - разбирали его в статье про тренды дизайна сайтов. В остальных случаях час на обсуждение референсов почти всегда дешевле недели переделки макета. Главная ошибка, которую совершают чаще прочих, - собрать сорок картинок и не свести их к выводу: подборка без резюме дизайнеру не помогает, а только добавляет ему работы разобраться, что из этого важно.
Если планируете дизайн сайта и хотите начать не с чистого листа, а с ориентиров, удобно сразу заполнить бриф на разработку: там есть вопросы про желаемое настроение и примеры, которые нравятся. Список таких вопросов и логику брифа целиком разбирали в статье про 18 правильных вопросов, и с этого можно стартовать сбор референсов ещё до первого созвона.
