Мудборд в дизайне. Как визуализировать абстрактную идею

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

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

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

Оглавление

1. Как работает мудборд 
2. Зачем нужен 
   — Дизайнеру
   — Заказчику
   — Примеры
3. Что должно быть в мудборде
4. Чего не должно быть в мудборде
5. Где брать материалы для мудборда — 7 ресурсов
6. 15 инструментов для создания мудборда
7. Инструкция по разработке мудборда

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

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

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

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

В отличие от референсов, мудборд — это не конкретный пример “вот есть такой вариант”, а приглашение к диалогу, к творческому поиску “что вам больше нравится”.

Кто использует мудборд в своей работе:

• Иллюстраторы, графические и веб-дизайнеры 
• Архитекторы, проектировщики, дизайнеры интерьера
• Художники по 2D и 3D графике
• Креативные и арт-директора
• Моушн-дизайнеры (хотя чаще просто референсы по анимации)
• Режиссеры, художники-постановщики, художники по костюмам
• Фотографы
• ..и другие работники творческих профессий. 

Зачем нужен мудборд

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

Дизайнеру

• Как стартовая точка для творческого поиска. От чего будем отталкиваться и в каком векторе двигаться дальше. 
• Чтобы убедиться, что он и Заказчик мыслят в одном направлении, перед тем как приступить к работе. 
• Чтобы устранить противоречия в пожеланиях Клиента. Бывает, что Заказчик присылает несколько референсов в абсолютно разных стилистиках и говорит “сделайте наподобие”. 

Заказчику

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

Для наглядности прикладываем реально полезное видео о том, что такое мудборды и зачем они нужны в моушн-дизайне:

Наглядный пример

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

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

В нашей практике был похожий кейс, и нащупать нужное направление помог мудборд. 

Встречайте, презентационный ролик для холдинга “Сибур”:

Как придумывали и согласовывали графические элементы ролика?

Начало ролика: заставка на основе темных треугольных полигонов

3D-карта, чтобы передать масштаб компании

Схема промышленных установок

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

Что должно быть в мудборде

Любая визуальная и иногда текстовая информация, которая вдохновляет и способствует творческому поиску: 

• Название — всему голова. Каждый мудборд лучше обозначить какой-то краткой ассоциацией и так подавать Клиенту. 
• Фото, концепты, стайлфреймы, иллюстрации — подобрать визуальные образы, их подачу и эстетику. 
• Шрифты — начертания, наклоны, читаемость, понятность. 
• Слоганы, цитаты — уже готовые или их наброски, созвучные другим элементам мудборда. 
• Айдентика, иконки и пиктограммы — любые паттерны, создающие уникальный узор бренда. 
• Текстуры — иногда отлично дополняют фото или иллюстрации для улучшения атмосферы либо демонстрации материала поверхности, который будет использоваться в дизайне объектов. 
• Логотипы — примеры похожих по направлению и пожеланиям лого. 
• Цветовые схемы — обозначить удачные цветовые сочетания и палитру, договориться о том, какие оттенки используем, поскольку у двух людей понятие “оранжевый” или “зеленый” могут отличаться. 

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

Чего не должно быть в мудборде

Длинных фраз и растянутых описаний. Ваша задача — ПОКАЗАТЬ, вдохновить партнера, а не заморочить его лишними подробностями или навязать свою точку зрения. Все, что надо сказать — скажите во время презентации. 

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

Заезженных изображений. Мудборд не должен быть подборкой “баянистых” картинок из интернета или сплошных стоковых фото. Это не вдохновляет и не “создает настроение”, а навевает скуку. От фото с вотермарками тоже рекомендуем отказаться — портит впечатление. 

Сложных образов. Если вам придется пускаться в длительные пространные объяснения, что вы имели в виду — все вдохновение коту под хвост. Посыл настроения должен быть прост и понятен.

Где брать материалы для мудбордов

Окей, самые популярные картинки из выдачи Яндекса и Гугла — не очень хорошая идея. Тогда где же искать изображения?

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

• Pinterest — соцсеть задумывалась как компиляция тематических изображений, что близко к концепции мудборда. Здесь создаются тематические доски со ссылками на контент, есть каталоги по подтемам, можно удобно сохранять примеры с других сайтов.
  
  Многие дизайнеры используют этот сервис в качестве хранилища понравившихся иллюстраций. Навигация не очень удобная, зато регистрация бесплатна.
  
• Dribbble — соцсеть для графических дизайнеров, веб-дизайнеров, художников по 2D и 3D графике и других. На сайте публикуют свое портфолио, нарабатывают репутацию в дизайн-тусовке, чтобы впоследствии, возможно, стать участником совместного проекта. Найдете здесь лучшие работы специалистов по дизайну и вдохновитесь.
  
  Доступ к самостоятельной деятельности в рамках соцсети можно получить только по приглашению от действующих участников.
  
• Behance — место силы и профессионального общения для моушн-дизайнеров, аниматоров, фотографов, дизайнеров интерьера и других специалистов творческого профиля.
  
  В первую очередь медиа-площадка интересна возможностями для презентации собственного портфолио. Во время работы над проектом, дизайнер заранее создает ее будущую презентацию для Behance и публикует, чтобы узнать мнение коллег по цеху и получить профессиональное признание.
  
• Designspiration — название площадки говорит само за себя. Помогает находить идеи и вдохновение для развития креативного мышления. Открывайте арт, архитектуру, дизайн, фотографию и многое другое.
  
  Площадка устроена по принципу мудборда, а ее визуалы разбиты по четким категориям: UI дизайн, веб-дизайн, принты, каллиграфия, принты для фильмов, графический дизайн, концепт-арт, инфографика, полиграфия и др. Это позволяет быстро ориентироваться и находить именно нужные вам визуальные форматы. 

• The Masterpicks — сайт очень похож на предыдущую площадку, но здесь есть еще и что почитать о модных дизайн-трендах и течениях в новом году или о пространственном брендинге, а изображения и референсы подбираются авторами площадки вручную.
  
  Также сайт изобилует крутыми готовыми паками иконок, 3d моделек, изображениями и другими элементами, купив которые, сможете использовать на своем проекте.
  
• ArtStation — относительно новая, но уже популярная платформа для специалистов в мире кино, медиа, гейм-дизайнеров, 3D графики. Можно разместить портфолио, информацию о себе, связаться со специалистами прямо через сайт или найти работу на Западе.
  
  Сайт устроен по принципу онлайн-галереи. Поддерживает фичи, позволяющие покрутить 3Д модели или панорамы и даже продать их в магазине. Много продвинутых специалистов пользуются ресурсом.
  
• Siteinspire — кладезь сайтов для вдохновения с очень качественным отбором контента, разделенным по категориям: стиль, индустрия, тема, платформа. Выставляйте нужные настройки и находите лучшие референсы по дизайну сайтов.
  
  Веб-дизайн и интерактивный дизайн — главные направления, которые успешно закрывает данная площадка.

Инструменты для составления мудбордов

Скомпилировать набор картинок в доску настроения можно и при помощи старых добрых Photoshop, Adobe Illustrator или даже PowerPoint, но если хочется сделать быстро и красиво, можно воспользоваться одним из онлайн-редакторов:

1. GoMoodBoard
   
   Простой, интуитивно понятный онлайн инструмент. Вы перетаскивание сохраненные картинки на виртуальную доску, программа делает все остальное. Не требует создания аккаунта. Единственный минус — нельзя пересылать файлом, только в виде ссылки. Из-за это инструмент может не подойти, если нужно оперативно вносить коррективы прямо в макете. 
   
2. StudioBinder
   
   Многофункциональный инструмент для работы с фото и видео. Содержит целый набор шаблонов для создания мудбордов. Возможно, не самый подходящий инструмент для графического дизайнера, но фотографу или моушн-дизайнеру хватит за глаза. 
   
3. Canva
   
   Любимец SMM-щиков и для создания красочных мудбордов. Всё тот же прямой, как свая, принцип “выбрал шаблон, перетащил в него картинки, сохранил, отправил”. Отдельные картинки можно докупать за недорогую стоимость, а бесплатная библиотека уже полна большим количеством хороших изображений и элементов. 
   
4. Mural
   
   Создаете мудборд целой командой? Mural — ваш выбор. Позволяет собирать, дополнять и редактировать один коллаж сразу целой группой пользователей в режиме реального времени. 
   
5. Boords
   
   Профессиональный инструмент для создания раскадровок и, аниматиков и, конечно, мудбордов. Позволяет быстро компилировать подборки изображений в единую последовательность. Все изменения и дополнения отображаются в режиме реального времени. 
   
6. Evernote
   
   Популярное облачное мобильное приложение, которое привыкли использовать как записную книжку и хранилище идей. Но Evernote отлично подходит и для сбора визуальной информации. Просто создаете новую заметку, и перетаскиваете в нее картинки. Десктопная версия тоже имеется. 
   
7. Adobe Spark
   
   Мобильное онлайн-приложение компании Adobe, позволяющее создавать инфографику, короткие видеоролики, изображения и веб-страницы, а также коллажи. В браузере приложение тоже доступно.
   
8. SampleBoard
   
   Любимый сервис для создания мудбордов среди дизайнеров интерьеров и организаторов мероприятий. Есть синхронизация с Пинтерест и встроенный редактор иллюстраций, конструктор шаблонов, возможность импортировать готовый коллаж.
   
   Бесплатный тестовый период на 14 дней, дальше по месячной или годовой подписке — есть планы от 12 до 70 баксов или от 115 до 758 баксов соответственно.
   
9. Niice
   
   Сохраняете любые референсы и проекты на сайте, а затем вместе с другими исполнителями создаете мудборд. Главная фишка сервиса — совместная работа над проектом. Платная версия дорогая — 99 баксов в месяц, но можете начать с пробной — создадите 5 мудбордов и загрузите до 100 своих файлов на ресурс.
   
10. Eagle
    
    Фактически, тот же Пинтерест, только с функциями сортировки изображений по ключам, тегам, форматам, цветам и даже есть поиск комментариев. Поддерживает множество форматов файлов. Очень прилично экономит время на создание мудборда благодаря встроенным возможностям. Один минус — сервис платный, вечная лицензия стоит 30 баксов.
    
11. Miro
    
    Российский IT-стартап из Перми, успешно работающий уже на международном рынке. Сервисом пользуются самые крупные компании вроде Нетфликс, Аутодеск, Твиттер и другие. Это интерактивная доска для создания mindmap, инфографики, kanban-досок, в том числе мудбордов. Есть платный и бесплатный доступ.
    
12. Plot Parade
    
    Если вам нужно подготовить годовой отчет с кучей графиков, диаграмм и таблиц — этот сервис для создания инфографики отлично подойдет. В использовании крайне прост — выберете шаблон, введите данные, определитесь с цветовой гаммой и скачивайте в высоком разрешении. Полученное изображение используйте в мудборде.
    
13. Bannersnack
    
    Один из немногих сервисов, где есть готовые шаблоны для мудбордов, а еще рекламных баннеров. Загрузите иллюстрации в шаблон и соберете готовый мудборд. В бесплатной версии — до 10 дизайнов, затем платная от 7 до 36 долларов в месяц.
    
14. Offeo
    
    Инструмент скорее для студий моушн-дизайна, видеопродакшенов, продюсеров и режиссеров. Можно делать подборки аудио и видео-примеров. Создаете плейлисты из музыки и видео, анимации, стоковых материалов сервиса, добавляйте фрагменты в мудборд. Много встроенных шаблонов. Платная подписка — от 20 баксов в месяц.
    
15. Runway Palette
    
    Отличный “залипательный” сервис с нейросетью для дизайнеров-модельеров, художников по костюмам или если вы хотите вдохновиться миром моды. Здесь собраны 140 тысяч фото с модных показов с 2014 до 2019 года, объединенных по цветовым палитрам. Изучив цветовые тенденции, можете собрать наиболее актуальный fashion-мудборд. Или загрузите произвольное фото, нейросеть выделит его главный цвет и подберет луки из всей библиотеки в похожих тонах. 

Инструкция по разработке

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

Весь смысл мудборда — вы ищете вектор и ассоциации, по которым в дальнейшем построите всю работу. Но этот вектор рождается не из воздуха, а из задачи и особенностей бизнеса Заказчика. В каждом бизнесе есть что-то уникальное, ваша задача как дизайнера — выделить это и предложить 3-5 вариантов “доски настроения”. 

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

Заключение

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

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