Я Максим, веб-разработчик, и одна из самых болезненных ситуаций на проекте — когда дизайнер показывает готовый макет, а клиент говорит: «Красиво, но я представлял совсем другое». Переделка макета — это время, деньги и нервы для всех участников. Чтобы этого избежать, я использую мудборд — визуальную доску настроения, которая синхронизирует ожидания ещё до того, как будет нарисована первая линия в Figma. В этой статье расскажу, зачем мудборд нужен, что в него включать, как собирать и как правильно презентовать клиенту.
Зачем нужен мудборд и какую проблему он решает
Мудборд решает ключевую проблему коммуникации между клиентом и разработчиком — разрыв между словами и визуальным восприятием. Когда клиент говорит «хочу современный сайт», он может иметь в виду совершенно разные вещи. Для одного «современный» — это минимализм Apple с большим количеством воздуха и монохромной палитрой. Для другого — яркий геометрический дизайн с анимациями и градиентами. Для третьего — тёмная тема с неоновыми акцентами в стиле киберпанк. Все три варианта — «современные», но визуально они настолько разные, что без предварительного согласования первый макет гарантированно промахнётся.
Мудборд переводит субъективные описания («стильный», «серьёзный», «лёгкий», «дорогой») в конкретные визуальные образы. Вместо слов — изображения, цвета, шрифты, фактуры. Клиент видит направление и может сказать «да, это точно то, что я имел в виду» или «нет, слишком холодно, хочу теплее» — ещё до начала дизайна.
Это не формальность и не прихоть дизайнера. Это инструмент, который реально экономит деньги. По моему опыту, проекты с утверждённым мудбордом проходят этап дизайна в полтора-два раза быстрее, чем проекты, где дизайнер сразу бросается рисовать макет. Количество итераций по макету снижается с трёх-пяти до одной-двух. На проекте стоимостью 200–300 тысяч рублей это экономит 30–60 тысяч рублей и неделю-две времени.
Что включать в мудборд
Мудборд — это не просто подборка красивых картинок. Это структурированная визуальная концепция, которая покрывает все основные аспекты будущего дизайна.
Сайты-референсы
Два-три сайта с близким настроением и стилем. Не обязательно из той же отрасли — важен визуальный язык, а не тематика. Для производственной компании, которая хочет выглядеть инновационно, референсом может быть сайт Tesla, а не сайт другого завода.
Я делаю скриншоты ключевых страниц (главная, страница услуги, раздел «О компании») и добавляю аннотации: что именно мне нравится в этом примере — цветовая схема, типографика, компоновка блоков, стиль фотографий. Это важно, чтобы клиент понял, почему именно этот референс выбран, а не просто увидел набор скриншотов.
Цветовая палитра
Три-пять основных цветов: основной (primary), акцентный (accent), фоновый, текстовый и один-два дополнительных. Каждый цвет — с конкретным HEX-кодом, не на глаз. Я показываю палитру в контексте — как эти цвета будут выглядеть на кнопках, заголовках, фоновых блоках. Отдельная палитра без контекста ничего не говорит клиенту, потому что синий цвет на белом фоне и тот же синий на тёмном фоне вызывают совершенно разные ощущения.
При подборе палитры я учитываю фирменный стиль компании (если он есть), психологию цвета для целевой аудитории и практические ограничения — достаточный контраст для читаемости текста, соответствие стандартам доступности (WCAG 2.1, уровень AA минимум).
Типографика
Примеры шрифтовых пар — шрифт для заголовков и шрифт для основного текста. Обычно я показываю два-три варианта пар на конкретном контенте клиента — его заголовках, его текстах. Это позволяет оценить, как шрифт выглядит с реальным содержимым, а не на абстрактном Lorem ipsum.
Для русскоязычных проектов выбор шрифтов уже, чем для англоязычных — не все популярные гарнитуры хорошо поддерживают кириллицу. Я заранее проверяю полноту кириллического комплекта и качество отрисовки русских букв.
Стиль фотографий
Фотографии задают настроение сайта не меньше, чем цвета и шрифты. Тёплые, с естественным светом и живыми людьми — дают ощущение уюта и доверия. Холодные, с жёстким контрастом и геометрическими композициями — создают технологичный и строгий образ.
В мудборд я добавляю четыре-шесть фотографий, которые демонстрируют целевой стиль. Не обязательно тематические (не обязательно фотографии продукции клиента) — главное, чтобы они передавали правильное настроение. На этапе мудборда важнее ответить на вопрос «как выглядит наш визуальный мир», чем «как выглядит наш конкретный товар».
Иконки и иллюстрации
Стиль иконок (линейные, заливные, с тенью, плоские), толщина линий, скругления — всё это влияет на общее впечатление. Я показываю набор иконок в целевом стиле: например, иконки Phosphor Icons для минималистичного подхода или иконки с заливкой и градиентами для более «сочного» стиля.
Если на сайте планируются иллюстрации (а для многих SaaS и сервисных компаний это важный элемент), в мудборд включаю примеры стиля иллюстраций: плоские, изометрические, рисованные, 3D.
Текстуры и декоративные элементы
Для некоторых проектов актуальны текстуры (бумага, дерево, бетон), паттерны (геометрические, органические), декоративные линии и формы. В мудборд включаю примеры, если планирую их использовать. Для минималистичного дизайна текстуры обычно не нужны — и это тоже стоит зафиксировать: «мы сознательно отказываемся от текстур в пользу чистых цветов».
Как я организую процесс с мудбордом
Мой стандартный подход — подготовить два-три мудборда с разным настроением и показать клиенту на выбор. Не один «правильный» вариант, а несколько контрастных направлений. Например, для строительной компании я могу предложить: строгий/корпоративный (тёмные тона, контрастная типографика, минимализм), тёплый/человечный (светлые тона, реальные фотографии людей на объектах, мягкие шрифты) и технологичный/инновационный (градиенты, нестандартная сетка, анимации).
Клиент выбирает направление — или говорит «хочу элементы из первого и третьего». Это нормально — гибридные решения часто самые удачные. Главное, что мы говорим на одном языке и визуально синхронизированы.
После выбора направления я финализирую мудборд — уточняю палитру, шрифтовые пары, стиль фотографий — и фиксирую его как утверждённый документ. Это становится «конституцией» дизайна: все последующие решения сверяются с мудбордом. Если дизайнер рисует макет и вдруг появляется элемент, который выбивается из мудборда — это сигнал к обсуждению.
Где собирать мудборд: инструменты
Figma
Мой основной инструмент для мудбордов. Создаю отдельный фрейм (или несколько фреймов для разных вариантов), размещаю все элементы — скриншоты, цвета, шрифты, иконки. Добавляю аннотации и комментарии. Делюсь ссылкой с клиентом — он смотрит в браузере и может оставлять комментарии прямо в файле.
Преимущество Figma — мудборд живёт в том же пространстве, где потом будут создаваться макеты. Дизайнер открывает файл — и всё перед глазами: референсы, палитра, шрифты. Не нужно переключаться между инструментами.
Отличный источник визуальных референсов на этапе сбора материала. Я создаю закрытую доску под проект и сохраняю всё, что зацепило: стили, приёмы, цветовые решения. Потом отбираю лучшее и переношу в Figma для финальной презентации. Pinterest хорош для поиска вдохновения, но для презентации клиенту его формат неудобен — слишком хаотичный, нет структуры.
Dribbble и Behance
Профессиональные портфолио дизайнеров — источник качественных примеров. Здесь можно найти не абстрактные «красивые картинки», а конкретные дизайнерские решения: как оформить hero-секцию, как сверстать карточку товара, какой стиль иллюстраций использовать. Я часто использую примеры с Dribbble как референсы для отдельных элементов, а не для общего настроения.
Miro
Для совместной работы с распределённой командой — когда в обсуждении участвуют дизайнер, маркетолог, продукт-менеджер и клиент. Miro позволяет собирать мудборд в реальном времени, голосовать за варианты, оставлять стикеры с комментариями. Хорош для воркшопов и мозговых штурмов.
Физический мудборд
Не забывайте про аналоговый вариант. Для некоторых клиентов — особенно из креативных индустрий — физический мудборд на пробковой доске или на большом листе бумаги работает лучше цифрового. Распечатанные фотографии, образцы материалов, цветные карточки Pantone — это тактильный опыт, который цифровой формат не заменяет. Я использую физические мудборды редко, но когда использую — результат обсуждения обычно более глубокий и продуктивный.
Типичные ошибки при работе с мудбордом
Мудборд слишком абстрактный. Красивые фотографии природы и архитектуры — это хорошо для вдохновения, но клиент не понимает, как это связано с его сайтом. Мудборд должен быть конкретным: вот такие цвета, вот такие шрифты, вот так будут выглядеть кнопки и блоки.
Слишком много всего. Мудборд из 50 изображений без структуры — это не мудборд, а мусорная корзина вдохновения. Я ограничиваю мудборд 10–15 элементами, каждый из которых выполняет конкретную функцию (референс палитры, референс типографики, пример стиля фото).
Мудборд показывают после макета. Бессмысленно — мудборд нужен до начала дизайна, не после. Если дизайнер уже нарисовал макет — мудборд становится оправданием уже принятых решений, а не инструментом планирования.
Мудборд не обсуждается с клиентом. Просто отправить ссылку и ждать «ок» — плохая практика. Мудборд нужно презентовать: объяснить, почему выбраны именно эти референсы, какое настроение они передают, как это соотносится с позиционированием бренда и ожиданиями целевой аудитории.
Мудборд не фиксируется как документ. После согласования мудборд должен быть зафиксирован — в Figma, в техническом задании, в переписке. Если через месяц клиент скажет «я имел в виду другое» — вы можете сослаться на утверждённый мудборд.
Как мудборд экономит деньги на проекте
Без мудборда процесс дизайна выглядит так: дизайнер рисует макет на основе брифа и своего понимания → клиент смотрит и говорит «не то» → переделка → «лучше, но ещё не то» → ещё переделка → за три-пять итераций бюджет на дизайн исчерпан, а результат — компромисс, который никого полностью не устраивает.
С мудбордом: два-три часа на подготовку → один час на презентацию и обсуждение → согласованное визуальное направление → дизайнер рисует макет в утверждённом стиле → первый макет попадает в цель с вероятностью 70–80% → одна-две небольшие итерации — и макет утверждён.
Разница в стоимости дизайна — от 20 до 40 процентов. Для проекта с бюджетом 300 тысяч рублей на дизайн — это экономия 60–120 тысяч. А главное — экономия времени: вместо месяца мучительных правок дизайн утверждается за одну-две недели.
Мудборд и разработка: как визуальная концепция переходит в код
Мудборд полезен не только дизайнеру. Как разработчик, я тоже использую мудборд при вёрстке. Палитра из мудборда переводится в CSS-переменные. Шрифтовые пары подключаются через Google Fonts или локально. Стиль иконок определяет, какую библиотеку использовать. Наличие или отсутствие текстур влияет на архитектуру CSS.
Когда мудборд утверждён до начала разработки — я начинаю работу с уверенностью, что визуальная система не изменится на полпути. Это позволяет сразу выстроить правильную систему дизайн-токенов, а не переделывать стили после каждой итерации дизайна.
Итого
Мудборд — это не этап, который можно пропустить ради экономии. Это инвестиция в предсказуемость проекта. Он стоит два-четыре часа работы, а экономит десятки часов на итерациях дизайна. Он исключает главный источник конфликтов — расхождение между ожиданиями клиента и видением дизайнера.
Если ваш подрядчик начинает рисовать макет без мудборда и без обсуждения визуального направления — приготовьтесь к длинному и дорогому процессу утверждения. Профессиональный подход всегда начинается с согласования визуального вектора, и мудборд — лучший инструмент для этого.