Дизайн и графика

Что такое мудборд и как его создать

Разбираемся, что такое мудборд и как его создать.

В переводе с английского  «mood» — это настроение, а «board» — это доска. Есть скейтборд, сноуборд, а есть мудборд — некая доска, передающая настроение. Уже интересно.

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

 

Все элементы мудборда должны гармонировать, поддерживать и дополнять друг друга. Как правило, они объединяются цветовой палитрой. 

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

В последнем случае это немного напоминает натюрморт:

и может стать частью проекта интерьера:

Для чего и кому нужен мудборд?

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

Элементы на мудборде подбираются так, чтобы сформировался стиль проекта.

Первый шаг в оформлении индивидуальности. Немного о стиле.

Стиль проекта — это его отличительная особенность, индивидуальность.
Чтобы понять, о чем речь, и сделать это менее абстрактным, можно представить какого-то человека, описать его  характерные черты. Например, жесты, стиль одежды, манеры.  Как он говорит,  хорошим литературным языком? Шутит? Как он одевается? Что для него важно, а что второстепенно? Есть ли у него тайны? Мечты? Как о них рассказать?
Попробуйте для начала описать стиль, используя существительные, например, «прямота и уверенность» или «искренность и энергия». 
Добавьте прилагательные, например, решительный, легкий, глубокий, ироничный, прямой, надежный, мужественный и т. п.
Добавьте в это, пока еще словесное описание детали, попробуйте сделать образ более сложным и индивидуальным, менее шаблонным и однозначным.
Посмотрите работы разных художников, у каждого есть свой стиль. 
 

Второй шаг. Подбираем элементы мудборда

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

 

Используйте все доступные ресурсы. Определите конкурентов продукта и посмотрите, как они решают аналогичные задачи в дизайне. Обратитесь к успешному опыту коллег: просмотр портфолио других дизайнеров (например, на Behance) может подсказать вам идеи, которые вы сможете переработать, улучшить и адаптировать к текущей задаче. Удачные примеры дизайна и фотоконтент можно найти на Pinterest и Dribbble. Платформа siteInspire может быть полезна не только web-разработчикам — там можно найти примеры дизайна, вдохновляющие эстетикой и точностью в решении задач. Чем больше площадок вы охватите при подготовке к проекту, тем лучшим может стать результат.

 

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

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

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

Изучаем правила цветовых сочетаний, используя цветовой круг

 

Фото, иллюстрации

Фото и иллюстрации помогают передать настроение и нужную эстетику. Если проект предполагает проведение фотосъемки, обязательно включите в мудборд подходящие референсы. Если требуется быстро создать образ, можно искать референсы на специальных сервисах, например,  http://labs.tineye.com/multicolr/ подбирает фотографии на основе заданной цветовой схемы.

Можно использовать  Designspiration — это ресурс, который собирает идеи дизайна, логотипы, красивые фотографии и поддерживает поиск по цвету.

Можно обратиться к другим коллекциям векторных и растровых изображений

Шрифты

О типографике, которая станет частью дизайн-проекта, следует задуматься заранее. Шрифты, как и изображения, помогают создать определенное настроение, задают тон и стиль дизайна. Прежде всего, подумайте, какие ассоциации должно передавать начертание текста. Для подбора шрифтов можно обратиться к специальным ресурсам, например,Google Fonts и Fontstorage.

Как выбрать шрифт. Учитываем стиль и психологию восприятия

 

Текстуры

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

Слоганы, цитаты

Слоганы и цитаты помогают передать смысл предлагаемых образов. 

Логотипы

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

 

Изучаем правила цветовых сочетаний, используя цветовой круг

Паттерны

Па́ттерн —  набор повторяющихся в определенном порядке элементов, которые вместе составляют уникальный узор и единую структуру. Это повторение следует определенным правилам. Паттерн «работает» на узнаваемость бренда это важный элемент фирменного стиля, который используется при оформлении упаковки, пакетов, бланков писем и так далее.

Шаг третий. Как создать мудборд 

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

Есть оналайн-редакторы, например CanvaСrello которые предложат примеры, шаблоны и изображения для такой работы. 

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

Шаг четвертый. Добавляем пояснения

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

И, наконец, экспериментируйте!

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