Мудборд в веб-дизайне: что это такое, зачем он нужен, как собирать

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

В этом уроке разбираем, что такое мудборд и зачем он нужен при разработке дизайна. Рассмотрим его цели и задачи, разберём, для кого он создаётся и как превратить набор референсов в цельное и аргументированное визуальное направление.

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

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

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

По сути, это визуальный образ проекта, сформированный ещё до появления первых полноценных дизайн-макетов.

Главная задача мудборда — сформировать и зафиксировать визуальное направление проекта.

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

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

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

Мудборд помогает:

• определить настроение и характер будущего дизайна;
• зафиксировать основные визуальные ориентиры;
• синхронизировать представление дизайнера, команды и заказчика;
• проверить выбранную стилистику до начала полноценной разработки;
• сократить количество правок на следующих этапах.

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

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

Для команды мудборд фиксирует общую визуальную логику проекта и помогает всем участникам одинаково понимать его стилистику.

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

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

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

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

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

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

Начинать работу стоит не с поиска красивых референсов, а с понимания самого проекта.

Сначала необходимо ответить на несколько вопросов:

• Что это за проект?
• Что в нём важно?
• Что мы хотим донести до пользователя через дизайн?
• Каким должно быть впечатление от продукта?

Полезно кратко зафиксировать особенности компании или продукта, его преимущества, характер и ключевые смыслы.

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

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

Следующий этап — определение эмоций, которые должен вызывать проект.

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

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

Так появляется фильтр для поиска и отбора референсов. Тогда вместо вопроса «Мне нравится эта картинка?» мы начинаем задавать другой: «Помогает ли этот образ передать нужное ощущение от проекта?»

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

При поиске важно не ограничиваться только сайтами конкурентов и в принципе сайтами.

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

Чем шире поле поиска, тем больше возможностей создать самостоятельную визуальную концепцию.

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

Отдельно стоит определить общее цветовое направление. Палитра должна вытекать из идеи проекта и выбранных визуальных образов. Будет странно если мы хотим задать теплое настроение на сайте и референсы подарали такие же, а в цветах начинаем выбирать холодные оттенки.

При подборе обращайте внимание:

• какие оттенки чаще всего встречаются в референсах;
• насколько они насыщенные;
• тёплая или холодная получается палитра;
• насколько она контрастная;
• какие цвета могут стать основными, а какие акцентными.

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

После формирования общего настроения можно переходить к более конкретным визуальным решениям. На этом этапе особенно полезны референсы сайтов и интерфейсов. И тут при подборе важно обращать внимание на детали и понимать, что мы ищем в рефернсах.

Обращайте внимание на то:

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

Типографика напрямую влияет на характер будущего проекта.

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

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

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

При этом не нужно искать один идеальный сайт, подходящий по всем параметрам. Это просто тратата времени в пустоту.

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

Из отдельных решений постепенно складывается собственная визуальная система проекта.

Хороший мудборд должен восприниматься как единое визуальное направление.

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

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

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

Это промежуточный этап между задачами проекта и будущей дизайн-концепцией.

Он помогает сформировать визуальное направление, проверить его, согласовать с командой и заказчиком и только после этого переходить к разработке полноценного дизайна.

Перейти к следующему уроку