Что такое мудборд, зачем он нужен дизайнеру и как создать мудборд самостоятельно

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

Что такое мудборд

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

Пример мудборда

Где и как используются мудборды

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

• Фотографы. Во время подготовки к фотосессии собирают референсы локаций, образов для моделей, поз и реквизита.
• Кинематографисты. Составляют мудборды, чтобы определиться с цветокоррекцией, ракурсом и композицией кадра.
• Дизайнеры интерьеров. Собирают коллекции изображений, которые отражают эстетику будущего помещения.
• Маркетологи. Делают подборки идей для оформления постов в социальных сетях, email-рассылок и других рекламных материалов.
• Графические дизайнеры. Используют мудборды, чтобы презентовать разные варианты оформления сайтов и мобильных приложений.

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

Мудборд лендинга

Удобство мудбордов для исполнителей и заказчиков

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

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

Экономия времени. С помощью мудборда можно заранее продемонстрировать клиенту превью проекта и получить «добро» на его реализацию. Лучше потратить несколько часов на составление коллажа, чем провести несколько дней за переделкой дизайна, потому что его не одобрил заказчик.

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

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

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

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

Какие компоненты включены в мудборд

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

Цветовые сочетания

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

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

Цветовая схема, вдохновленная растительными мотивами

Шрифты

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

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

Типографика в мудборде

Текстуры

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

В этом коллаже есть текстура целлофанового пакета и глянцевая фактура

Паттерны

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

Фотографии, картинки, инфографика

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

Логотип и компоненты айдентики

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

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

Цитаты и слоганы

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

Мудборд с опорой на цитату

Кнопки, иконки и другие элементы дизайна

Составляя мудборд для сайта или мобильного приложения, дизайнер включает в него элементы интерфейса: кнопки, иконки, тумблеры, чекбоксы, текстовые блоки. Референсы можно найти в UI-наборах или заскринить понравившиеся варианты у конкурентов. Изображения служат образцом для визуального оформления объектов: настройки размеров, цветов, теней и других параметров. Они помогают определиться и с композицией блоков веб-страницы: шапки, футера, форм обратной связи, карточек товаров и других разделов.

UI-элементы в мудборде

Референсы

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

Как выглядит мудборд: ТОП-5 примеров для вдохновения

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

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

Мудборд для коллекции одежды

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

Мудборд интерьера

3. Фотография. Чтобы подготовиться к съемке с лошадью, ее организатор подыскал примеры макияжей, причесок и нарядов, которые подойдут модели, а также референсы красивых поз. Такая доска поможет клиенту собрать образ на фотосессию, а фотографу — не тратить время на поиск интересных ракурсов и композиций во время работы и сделать больше красивых кадров.

Мудборд для фотосессии

4. Брендинг. Этот мудборд составлялся для разработки фирменного стиля компании. Он включает в себя цветовую гамму, референсы для оформления сайта, мобильного приложения и корпоративного мерча, стикеров и pop-up магазина. Все элементы объединяют яркие и сочные оттенки, динамичные формы и шрифты. Можно предположить, что бренд ориентирован на молодую и амбициозную аудиторию.

Мудбород в брендинге

5. Разработка сайтов. Чтобы оформить лендинг цветочного магазина, дизайнер собрал мудборд из UI-элементов. На доске есть пример дизайна кнопки, формы подписки, превью карточек товаров, навигации, шапки сайта и футера. Винтажная цветовая палитра и фотографии с теплой цветокоррекцией, тонкие декоративные линии отражают вайб и ценности бренда: уют, эстетика, внимание к мелочам.

Мудборд для создания сайта

Как создать мудборд самостоятельно

Создание мудборда состоит из трех основных этапов. Рассмотрим процесс шаг за шагом.

Брифинг и формирование технического задания

Работа над любым проектом всегда начинается с брифинга. Он необходим, чтобы погрузиться в задачу и выяснить у заказчика требования. Можно попросить клиента заполнить документ или подробно ответить на вопросы о продукте в формате интервью. Важно уточнить следующие детали:

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

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

Сбор материалов для мудборда

Следующий шаг — поиск картинок для мудборда. Чтобы подобрать релевантные изображения, важно ответить на три вопроса: из каких элементов состоит дизайн, какие ассоциации возникают с брендом, какое он настроение должен вызывать. Например, когда мы слышим слово «отпуск», представляем паспорт, чемодан, самолет, солнце, море и пальмы. Эти образы можно использовать в дизайне туристического агентства или сервиса для поиска авиабилетов. В качестве цветовой гаммы подойдут оттенки синего, желтого и белого — они ассоциируются с пляжем и отдыхом.

В поиске материалов для мудборда помогут разные источники:

• Бесплатные фотостоки. Скачать подходящие картинки можно с таких ресурсов, как Unsplash, Shutterstock, Stock.adobe. На них представлены миллионы изображений, в том числе фотографии, инфографика и 3D-картинки.
• Сервисы для поиска вдохновения. Самый популярный вариант — Pinterest. Здесь можно найти эстетичные картинки, фотографии, примеры использования шрифтов, иллюстрации и даже готовые мудборды. При клике по картинке приложение показывает десятки похожих изображений. Со временем он подстраивается под ваши запросы и вкусы и автоматически показывает в ленте картинки, которые будут вам полезны.
• Тематические сообщества дизайнеров. За референсами для оформления сайтов, мобильных приложений и разработки концепции брендинга отправляются на Behance, Dribbble и Awwwards. На этих порталах свои работы размещают профессиональные дизайнеры. Достаточно вбить в поиске запрос, указав тематику и формат проекта, и скачать понравившиеся изображения.
• Сайты и социальные сети конкурентов. Нет ничего плохого в том, чтобы вдохновляться их работами. Специалисты из разных областей изучают проекты компаний из смежных ниш, чтобы почерпнуть у них интересные идеи и адаптировать их под свои задачи. Главное не копировать материалы точь-в-точь.
• Офлайн. Окружающий мир полон вдохновляющих идей. Можно отправиться на прогулку и фотографировать красивые пейзажи, билборды, входные группы, интерьеры кофеен и людей. Другой вариант — вооружиться глянцевыми журналами, газетами и открытками. Понравившиеся картинки можно отсканировать или вырезать.

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

Оформление мудборда

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

• Определите доминанту. Выберите центральный элемент и выстраивайте композицию вокруг него. Тогда мудборд получится целостным и не будет восприниматься, как набор разрозненных картинок.
• Не переборщите. Выберите 8-10 лучших изображений, которые определяют стилистику проекта. Большое количество фотографий перегружает доску и рассеивает внимание, а некоторые картинки начинают противоречить друг другу.
• Делайте пометки. Чтобы уточнить значение выбранных образов и их роль в разработанной концепции, добавьте к картинкам короткие текстовые пояснения. Тогда другим членам команды, которые работают над проектом, будет легче понять задумку.

Где можно сделать мудборд: ТОП-5 программ и сервисов для создания мудборда

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

1. Canva. В графическом редакторе доступны шаблоны для создания коллажей. Во встроенных библиотеках сервиса есть готовые цветовые палитры, шрифтовые пары, фотографии и иллюстрации для мудборда. Если среди них не окажется подходящих вариантов, можно загрузить в профиль свои картинки. 
2. Pinterest. В приложении можно создавать тематические доски, сохраняя понравившиеся материалы в свой профиль. Объединить их в один коллаж не получится, зато рассортировать идеи по папкам — легко. 
3. Miro. Большинство знает сервис как канбан-доску для постановки тасков и отслеживания статусов проектов. Однако она подходит и для верстки мудбордов. Сервис не предлагает готовые шаблоны под эту задачу, но на доску можно легко загружать изображения, чтобы комбинировать их между собой и добавлять к ним подписи.
4. Eagle. Программа создана специально для организации дизайн-ресурсов. С ее помощью можно сохранять изображения прямо из браузера, сортировать картинки по цветам, тегам и ключевым словам. Поддерживает 81 формат графических материалов, в том числе файлы со шрифтами. 
5. Niice. Комплексный инструмент, который берет на себя роль хранилища всех дизайн-материалов и конструктора мудбордов. Один из плюсов сервиса — широкие возможности для совместной работы. Собирать и компоновать картинки можно вместе с командой.

Для создания бесплатных мудбордов подходят и простые графические редакторы: Adobe Photoshop, Illustrator, Figma, Sketch и Paint. С их помощью можно загружать изображения, добавлять их на холст, передвигать и масштабировать. Такого набора функций достаточно для того, чтобы сделать коллаж.

Шаблон мудборда в редакторе Canva

Вместо заключения

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

• Подбирайте ассоциации, которые легко считываются. Заказчик, члены команды и целевая аудитория продукта должны одинаково понимать образы, использованные в дизайне.
• Следите, чтобы элементы гармонировали между собой. Если они не сочетаются визуально или противоречат друг другу по смыслу, коллаж из мудборда превращается в подборку случайных картинок.
• Ищите оригинальные изображения. Не добавляйте на доску картинки из поисковых систем и с верхних строчек фотостоков. Велика вероятность, что их уже использовали в своих мудбордах сотни дизайнеров. Если хотите создать уникальный дизайн, наберитесь терпения и постарайтесь найти редкие и не банальные фотографии и иллюстрации.
• Соблюдайте баланс. Цветов, текстур, шрифтов и других элементов должно быть в меру. Из-за большого количества разных объектов теряется идея и целостность концепции.