Что это? Мудборд – это удобный инструмент не только для дизайнера интерьеров. Он весьма полезен при подготовке сайта, позволяя визуализировать все задумки, чтобы потом скомпилировать их в итоговую форму.
На что обратить внимание? И хотя у многих мудборд до сих пор ассоциируется с подростковыми «досками желаний», не стоит игнорировать этот инструмент, особенно если вы работаете в команде. Как же применить этот визуальный «мозговой штурм» с большей пользой?
В статье рассказывается:
- Что такое мудборд
- Отличия мудборда и референса
- Где мудборд применим наилучшим образом
- 4 основные задачи мудборда проекта
- Из чего состоит мудборд
- Топ-5 программ для создания мудборда
- Принципы работы с редакторами изображений
- Инструменты для создания мудборда
- Как сделать мудборд
-
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.Бесплатно от Geekbrains
Что такое мудборд
Мудборд (доска настроения) – это коллаж из фотографий, иллюстраций, паттернов, слоганов, шрифтов и цветовых схем. К примеру, дизайнеру необходимо создать макет сайта для кофейни. Перед тем, как приступить к работе, важно понять, с чем это заведение должно ассоциироваться. После обсуждения концепции с заказчиком были выбраны следующие основные образы: «черно-белое», «минималистичное», «фактурное», «coffee», возможно, «город» и «рисунки».
Изначально образы подбираются в общих чертах, без уточнения стиля, типографики, эпохи, географии и т.д. Чтобы дополнить ассоциативный ряд подходящими элементами, необходимо просмотреть доступные источники и выбрать то, что подходит к выбранным «тегам». Презентацию, собранную из изображений, которые передают общее настроение и стилистику проекта, и называют мудбордом (от англ. moodboard).
Задача графического мудборда – облегчить коммуникацию, улучшив взаимопонимание между дизайнером и заказчиком. Доска настроения показывает то, что невозможно описать словами. Кроме того, коллаж позволяет добиться единой трактовки того или иного образа. Например, клиент считает, что Швейцария – это страна коров, молока и альпийских лугов, а у дизайнера она ассоциируется с шоколадом и самыми надежными банками.
В подобных случаях, чтобы избавиться от разночтений, необходимо создать мудборд, это займет не так много времени. Верно подобранные образы существенно облегчают разработку дизайн-проекта будущего сайта, а также снижают вероятность того, что придется вносить правки в готовый макет.
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Скачивайте и используйте уже сегодня:
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
В сфере дизайна доска настроения еще выполняет роль своеобразной презентации, когда необходимо поделиться с коллегами своими идеями. Для каждого дизайнера мудборд – это удобный инструмент поиска. Подбирая «резонирующие» иллюстрации, можно до мельчайший деталей уточнить свои ассоциации и, в случае необходимости, что-то изменить.
Однако несмотря на свою эффективность, порой мудборд все же не позволяет решить поставленную заказчиком задачу. В этом случае шаблон доски настроения можно отложить на некоторое время, а потом использовать для другого подходящего проекта.
Чтобы правильно подобрать изображения, можно воспользоваться двумя способами:
- Составить бриф для клиента, чтобы выяснить, какие у него возникают ассоциации.
- Сделать несколько вариантов доски настроения и предоставить право выбора заказчику и коллегам.
Преимущество доски настроения в том, что она позволяет донести основную идею без лишних слов. Иногда шаблон мудборда дополняют краткими комментариями (скрайбинг). Можно использовать схематичные заметки с минимумом текста.
Главное правило при составлении коллажа – избегать похожих референсов и не использовать большое количество изображений. Мудборд должен презентовать идеи посредством нескольких простых примеров.
Отличия мудборда и референса
Распространено мнение, что эти понятия тождественные. Однако это не так, каждый из этих терминов обладает своими нюансами.
Референсами (от англ. reference – отсылка, ссылка, источник) называются иллюстрации, которые составляют основу композиции, а также определяют выбор цветовой гаммы и шрифтов. В отличие от доски настроения, референс – это одно изображение, которого чаще всего достаточно, чтобы создать макет.
Иными словами, такая иллюстрация – это шаблон, на который опирается дизайнер, работая над проектом. Это, определенно, не самый творческий подход, но иногда вполне допустимый. В частности, при разработке типовых элементов интерфейса, форм и т.д. (то есть в тех случаях, когда не нужно «изобретать велосипед»). Кроме того, иногда найденный шаблон полностью удовлетворяет требованиям заказчика.
Можно заметить, что у крупных компаний сайты чем-то похожи: они используют одинаковые стилистические решения, позаимствованные у лидеров рынка.
Однако иногда выбранный референс решает только часть задач, поставленных клиентом. Тогда шаблон приходится дорабатывать в соответствии с пожеланиями заказчика.
Анализируя работы других дизайнеров, важно обращать внимание на следующие аспекты:
- композицию;
- цветовую палитру;
- шрифты;
- стилистику графических элементов;
- дизайн элементов интерфейса;
- стиль изображений;
- анимацию элементов.
Если брать за основу не один, а сразу несколько шаблонов, сочетая их между собой, уникальность готового макета будет гораздо выше. Например, с одного референса можно позаимствовать композицию и стиль иллюстраций, со второго – цвет, с третьего – стиль кнопок и т.д. А чтобы подобрать удачные референсные изображения, необходимо понять общее настроение макета. Для этих целей идеально подходит мудборд сайта.
Где мудборд применим наилучшим образом
Первый этап в создании любого макета – поиск идеи (ассоциации). Доска настроения для дизайнера – это ориентир, который в широком смысле определяет вектор проекта и позволяет наметить визуальные акценты.
Составление такого инструмента – отправная точка при создании сайта, мобильного приложения, брендбука и рекламной компании. Мудборд помогает сформировать у всех членов команды проекта единое видение будущего макета.
Данное средство активно применяются во многих сферах:
- Брендинг
В процессе разработки логотипа и фирменного стиля компании доска настроения позволяет понять, в каком направлении необходимо двигаться, проанализировать, какое впечатление должен производить конечный продукт, а также визуализировать концепцию.
Скачать файл- Разработка дизайн-проектов
Как уже упоминалось выше, составление мудборда – важный шаг, которым нельзя пренебрегать перед тем, как приступить к работе над сайтом, приложением или другим крупным проектом.
- Фото- и видеосъемка для рекламы
Создание доски настроения – неотъемлемая часть подготовки к съемкам. Изображения, которые ассоциируются с рекламируемым продуктом, помогают разработать общую концепцию, выбрать костюмы, а также определиться со стилем монтажа.
Читайте также!
- Дизайн одежды
Мудборд позволяет всем членам команды придерживаться стиля при работе над новыми коллекциями.
- Дизайн интерьера
При разработке дизайна интерьера мудборд не только определяет стиль и концепцию проекта, но и является своеобразным подтверждением того, что дизайнер и заказчик говорят на одном языке.
4 основные задачи мудборда проекта
Доска настроения позволяет дизайнерам и маркетологам определить мейнстрим проекта.
Это эффективный инструмент, который позволяет решить несколько важных задач.
- Определиться с концепцией и главной идеей. Работа над любым проектом начинается с поиска источников вдохновения. Мудборд помогает выработать единую тему для возникающих ассоциаций и образов, а также сравнить подходящие стилистические приемы. Конечно, не все варианты будут задействованы в макете. Однако они крайне важны для того, чтобы сформулировать желаемый результат.
- Донести идею до заказчика. Доска настроения служит своеобразной презентацией на этапе переговоров с клиентом. Например, каждый человек по-своему представляет себе уютную кофейню. Один считает, что в интерьере должны преобладать элементы из дерева и темные благородные цвета. Другой, напротив, отдает предпочтение помещению, оформленному в пастельных тонах, с большим количеством света. Кроме того, достичь взаимопонимания проблематично из-за того, что заказчики не владеют профессиональными терминами. К примеру, мало кто из клиентов знает, что такое гранж или эклектика. Визуальные образы помогают дизайнеру и заказчику правильно понимать друг друга.
- Распределить задачи между членами команды. Обычно над макетом параллельно работают несколько сотрудников компании или фрилансеров. Мудборд помогает добиться согласованности в действиях участников дизайн-проекта.
- Придерживаться единой стилистики во всех проектах, связанных с конкретным брендом. Работая над концепцией новой рекламной кампании, маркетолог с помощью доски настроения может определить, насколько его идеи соответствуют фирменному стилю. Особенно это удобно, если у компании нет брендбука. В частности, мудборд помогает выбрать оптимальный слог текстов, которые используются для рекламы или размещаются на сайте.
Из чего состоит мудборд
В зависимости от задач, которые должен решить дизайн-проект, на доске настроения могут быть собраны иллюстрации, цветовые палитры, фоны, текстуры, фотографии, типографика и т.д.
Цветовые палитры
Цвета и их оттенки позволяют передать настроение проекта, а также донести нужные эмоции. Поэтому важно подбирать сочетания таким образом, чтобы они вызывали конкретные ассоциации и соответствовали имиджу бренда.
Иллюстрации и фотографии
Изображения, собранные на доске настроения, гораздо эффективнее доносят идею проекта, нежели слова. Чаще всего применяются иллюстрации предметов, которые ассоциируются с проектом, элементы архитектуры и искусства и т.д. Кроме того, допускается использование абстракции (различных образов, цветов и форм). Как показывает практика, необходимо найти около 30 подходящих изображений, а затем выбрать из них те, которые максимально отражают суть проекта.
Крайне важно, чтобы все иллюстрации и фотографии соответствовали основной идее дизайн-проекта. В частности, мудборд для подготовки к пляжной вечеринке можно составить из фотосессии парней и девушек в купальниках, экзотических коктейлей, надувных кругов, песка, океана, лежаков и т.д.
Текстуры, фактуры и паттерны
Составляя доску настроения, можно смело использовать различные материалы (стекло, мрамор, древесину и пр.) и фактуры (глянец, рельеф и др.). Простор для фантазии не ограничен – возможно также включить в мудборд графические паттерны как естественного (к примеру, природный материал), так и искусственного происхождения (готовые изображения).
на обучение «Дизайнер» до 24 ноября
Идеальным дополнением станут текстуры, которые вызывают тактильные ассоциации. В частности, для того, чтобы создать ощущение тепла и уюта, подойдут мягкие ткани, а если нужно показать роскошь – можно использовать мех и позолоту.
Шрифты, логотипы и цитаты
Типографика напрямую зависит от тематики проекта и является важным элементом фирменного стиля компании. Например, для одних макетов подходит только строгий стиль оформления текста, для других, напротив, можно использовать более творческую подачу. Из всего многообразия шрифтов необходимо выбрать те, которые оптимально подходят для конкретного проекта (сайта, мобильного приложения, рекламной кампании и т.д.).
Распространенные ошибки, которые встречаются при создании коллажа, перечислены ниже.
- Обилие текста. Длинные предложения перегружают доску, не позволяя визуализировать настроение макета. Можно использовать только краткие комментарии, при этом подробно расписав техническое задание.
- Несочетаемые элементы. Все материалы, которые используются при составлении мудбордав дизайне, должны дополнять друг друга, чтобы доска настроения не превратилась в коллекцию беспорядочных иллюстраций.
- «Размытые» ассоциации. Все члены команды должны одинаково толковать изображения, собранные в коллаж. Поэтому необходимо выбирать очевидные образы без сложных визуальных метафор, избегая вычурных элементов.
- Иллюстрации из первых строк поискового запроса. Нужно запастись терпением и найти оригинальные изображения, которые максимально раскрывают суть и атмосферу проекта.
Создавая мудборд, важно своевременно его редактировать и удалять неактуальные элементы. Каждое изображение должно облегчать понимание концепции дизайн-проекта.
Топ-5 программ для создания мудборда
Мудборд можно сделать своими руками или же использовать специальные приложения. Подойдет даже стандартный Paint, однако стоит быть готовым к тому, что возможности в нем ограничены (например, нельзя редактировать слои). Многие привыкли создавать мудборды в фотошопе.
Доски настроения удобно составлять в специальных сервисах, которые, в отличие от фоторедакторов, предназначены именно для этих целей. Преимущество данных программ в том, что разработчики создали интуитивно понятный интерфейс со всеми необходимыми инструментами. Кроме того, можно взять на заметку необычные «фишки», придуманные другими пользователями.
Самые известные приложения, в которых мудборд создается в режиме онлайн, рассмотрены ниже.
- Здесь есть галерея готовых шаблонов, а чтобы поделиться результатами своей работы с другими пользователями даже не обязательно сохранять макет. Можно выбрать пустой лист и создать доску настроения «с нуля» или же подобрать подходящий шаблон.Главное преимущество этой программы в том, что пользоваться ей можно бесплатно, не оформляя подписку.
- Подписка платная – 12 $ ежемесячно. Готовым мудбордом можно поделиться в соцсетях, а также импортировать его в презентацию или текстовый файл. Возможности для редактирования не ограничены: есть огромный выбор элементов и палитр, при этом иллюстрации и фотографии можно добавлять из любого источника.
- За подписку придется заплатить 8 $ в месяц. Преимущество данного сервиса в том, что можно проводить онлайн-презентации и совершать видеозвонки. Еще одна удобная «фишка» – над проектом параллельно могут работать три специалиста, при этом доступно одновременное редактирование трех досок. За отдельную плату можно получить доступ к дополнительным возможностям. Судя по отзывам, программа очень удобна. У нее понятный интерфейс и много полезных инструментов.
- Пожалуй, самый дорогой сервис. Стоимость подписки – 83 $ ежемесячно. Можно пользоваться бесплатной версией, но в ней все макеты публичны (их видят остальные пользователи), а также при создании мудборда онлайн не получится использовать свои изображения. При этом в этой программе есть огромная коллекция иллюстраций, которыми можно пользоваться в неограниченном количестве.
- За оформление подписки необходимо заплатить 35 $. Сервис больше подходит для дизайнеров интерьера – можно создать макет в 2D или 3D, а затем поделиться результатом на странице в социальных сетях или сохранить его в формате PDF.
Как уже упоминалось выше, все эти программы значительно облегчают процесс создания доски настроения и идеально подходят для новичков, которые задаются вопросом, как делать мудборд. Однако есть у этих сервисов существенный недостаток: возможности в бесплатных версиях ограничены, а подписку необходимо продлевать каждый месяц (при этом ее стоимость неоправданно высокая).
Принципы работы с редакторами изображений
Как уже упоминалось выше, мудборд в дизайне составляется для конкретного бренда (продукта, сайта, мероприятия и т.д.). Чтобы создать макет, который решит все задачи, поставленные перед проектом, необходимо выполнить несколько шагов.
- Проанализировать дизайн аналогичных работ у конкурентов, выявить сильные и слабые стороны. Также полезно будет ознакомиться с проектами других дизайнеров, которые поэтапно разбирают процесс создания макета. Иными словами, чем больше на этапе подготовки изучено информации, тем выше качество готового дизайна.
- Выяснить, на чем именно необходимо сделать акцент – от этого зависит выбор цветовой гаммы, форм и пр. Возможно, потребуется подчеркнуть уникальные свойства продукта. Или же визуализировать его эстетику и настроение и т.д.
- Выбрав несколько иллюстраций, ассоциирующихся с проектом, нужно определить основной вектор. Вся композиция строится вокруг доминанты, которая является смысловым акцентом. Далее, ориентируясь на лейтмотив, необходимо закончить подбор изображений.
- Спорные моменты нужно подкрепить краткими комментариями. Важно помнить о том, что пометки должны быть понятными и емкими.
- Экспериментировать и не бояться пробовать что-то новое. Нельзя ограничиваться одним макетом, для сравнения необходимо разработать еще 2-3 варианта. Даже если они не понадобятся для данного дизайн-проекта, их можно будет использовать для работы с другими заказчиками.
- Работать в хорошем настроении, получая удовольствие от процесса. Только поймав «волну» можно рассчитывать на достойный результат.
Инструменты для создания мудборда
Инструменты, которые применяются при составлении доски настроения, делятся на две категории: одни помогают подобрать изображения, а другие – сделать коллаж.
Занимаясь поиском подходящих иллюстраций и фото, можно взять на вооружение инструменты, перечисленные ниже.
Прогулка
Перед тем как приступить к созданию мудборда, нужно запастись вдохновением. Если доска настроения составляется для сайта кофейни, даже ароматный свежесваренный кофе может подарить интересную задумку. Кроме того, зарядиться энтузиазмом помогает прогулка – это неиссякаемый источник идей и визуального материала. Прогуливаясь по любимым местам, можно погрузиться в сенсорику, наблюдая за окружающим миром: светом, звуками, тактильными ощущениями, движениями, музыкой и т.д.
В случае если необходимо создать макет сайта для кофейни, можно выпить чашку кофе в каком-нибудь уютном заведении или же заказать кофе с собой, чтобы насладиться бодрящим напитком во время прогулки. Интересные фактуры, композиции, цвета, лица и все остальное, за что цепляется взгляд, важно зафиксировать в памяти или же с помощью съемки фото. Продумывая шаблон мудборда, можно использовать любые детали, которые ассоциируются с проектом.
Удобный сайт, который позволяет искать изображения по заданной тематике, собирать подходящие иллюстрации в галерею, загружать картинки (пины), а также переходить на сайты, где размещены оригиналы.
Чтобы облегчить процесс подбора изображений, можно экспериментировать с различными тегами: например, «типографика», «фотография», «интерфейсы» и др., сочетая их с другими ключевыми словами («черно-белое», «минимализм», «кофе» и т.д.).
Готовый мудборд может состоять из фрагментов интерфейсов, цветовых палитр, фотографий и других элементов, ассоциирующихся с проектом.
Designspiration
Аналог сайта Pinterest, который востребован у дизайнеров. С его помощью можно подбирать изображения, сохраняя результаты поиска в галерее. Благодаря динамическому поиску есть возможность найти оригинальные решения.
Портфолио и дизайн-проекты студий
На специальных сайтах (в частности, Behance, Dribbble, Awwwards и др.) можно ознакомиться с готовыми кейсами по выбранной тематике. Однако лучше избегать прямых запросов (например, «сайт кофейни»), а отдавать предпочтение обобщенным ключевым словам («черно-белое», «минимализм», «фактура» и т.д.). Также можно просматривать работы, подмечая оформление определенных элементов (кнопок, форм и пр.), удачные композиционные решения и т.д.
Фотобанки
Банки лицензионных изображений позволяют найти иллюстрации и фотографии, которые смело можно использовать в макете, не опасаясь нарушить авторские права. Самые известные фотостоки – Unspash и Adobe Stock.
Сайт The Metropolitan Museum of Art (г. Нью-Йорк)
Часть каталогов бесплатны. Из огромной коллекции иллюстраций и фотографий мировых шедевров можно выбрать те, которые идеально подойдут для того или иного дизайн-проекта.
Каталоги иконок
Как показывает практика, пиктограммы – это основа разработки элементов интерфейса.
Видео, анимация, 3D
Для создания макета мобильного приложения или сайта кроме статичных изображений применяются также интерактивные элементы и видео. Собирая основные идеи проекта на мудборде, можно использовать скриншоты из фильмов и футажей, примеры 3D-моделей и т.д. Поискать вдохновение можно на популярных видеостоках (например, Sketchfab, Storyblocks и др.).
Giphy
В этой громадной базе собраны гиф-анимации. Однако использовать их нужно в меру, чтобы не перегрузить внимание.
Соцсети
Тикток, ВКонтакте и другие соцсети – кладезь оригинальных иллюстраций и фото. Для того чтобы было удобнее работать, их можно систематизировать в виде каталога.
Примеры работ других дизайнеров
Сначала желательно проанализировать сайты, не связанные с тематикой проекта. Это позволит подметить интересные «фишки», которые можно успешно реализовать в своем макете. Аналогичные примеры конкурентов и ресурсы, популярные у представителей целевой аудитории, просматриваются в последнюю очередь (когда уже есть идеи для создания мудборда). Иначе существует вероятность загнать себя в рамки, не давая простора фантазии.
Составление доски настроения – процесс творческий, который не предполагает соблюдение строгих правил. В процессе создания мудборда можно пользоваться специальными приложениями или программами. Также подойдет любой графический редактор, который позволяет собрать коллаж из нескольких иллюстраций или фотографий (например, Figma или Adobe Photoshop).
Некоторые специалисты, чтобы сэкономить время, просто распечатывают изображения и раскладывают на столе перед заказчиком, или же демонстрируют их на экране.
Перед тем как приступить к подбору изображений, важно четко определить задачи, для решения которых предназначен дизайн-проект, а также проанализировать, какие категории пользователей относятся к целевой аудитории. От этого зависит стиль мудборда: например, доски настроения для автомобильного бренда и компании, занимающейся реализацией товаров для животных, будут существенно отличаться и по оформлению, и по содержанию.
Читайте также!
Чтобы научиться работать с фоторедакторами и специальными программами, предназначенными для составления мудбордов, можно пройти курс по направлению «Графический дизайн».
Как сделать мудборд
Чтобы составить инструмент, который позволит донести главную идею проекта, необходимо выполнить несколько важных шагов.
Определить концепцию
Как уже упоминалось выше, доска настроения отражает лейтмотив дизайн-проекта. Поэтому важно понять, какие ассоциации бренд должен вызывать у потребителей. Например, легкий и воздушный, серьезный и устойчивый, семейный и традиционный, современный и элегантный и т.д. Кроме того, впечатление, которое производит бренд, может быть связано с каким-либо музыкальным направлением, фильмом, художественным стилем и пр.
Перед тем как приступить к созданию доски настроения, необходимо сформулировать текстовое описание продукта или же составить список ключевых слов, которые связаны с проектом. Помимо этого, используя специальные сервисы, можно сделать облако ассоциаций.
Найти источники вдохновения
Для этих целей подойдут любые сервисы, интернет-платформы и сообщества профессионалов (в частности, Behance, Dribbble, Awwwards и т.д.).
Поскольку все тренды в дизайне цикличны, стоит взять на заметку классические примеры. Порой в графических проектах (плакаты, иллюстрации) актуальны работы двадцатилетней (и более) давности.
Подобрать подходящие изображения
На этапе подготовки к составлению мудборда необходимо найти как можно больше изображений, которые ассоциируются с проектом. Можно использовать иллюстрации, фотографии, скриншоты кадров из фильмов и клипов, изображения персонажей из компьютерных игр и т.д.
Иллюстрации могут содержать не только предметы, характеризующие нишу, к которой относится бренд, но и совершенно неожиданные образы. Например, создавая мудборд для прачечной, на доску можно добавить фото тропического пляжа, чтобы показать, что услуги компании облегчают быт и позволяют наслаждаться жизнью без рутины.
Проанализировав собранные изображения, нужно определить, чем они похожи. В конечном итоге необходимо выбрать только те иллюстрации и фотографии, которые помогают предельно точно донести главную мысль дизайн-проекта.
Выбрать цветовую палитру
В случае, если мудборд предназначен для сайта или рекламной кампании, палитру необходимо выбирать в соответствии с брендбуком и фирменным стилем. Корпоративные цвета должны составлять основу доски настроения. Однако их можно дополнить оттенками, которые не противоречат стилю фирмы.
Когда бренд разрабатывается «с нуля», цветовую гамму нужно подобрать самостоятельно (это один из важнейших этапов брендинга). На ее выбор влияют смыслы и ценности, которые заложены в бренд, анализ предпочтений целевой аудитории и т.д.
Для создания цветовой палитры можно использовать фотографии и иллюстрации, из которых состоит доска настроения. Для этих целей подходит «Пипетка», которая есть практически во всех графических редакторах. Данный инструмент помогает подбирать цветовые гаммы, связанные с природой, спортом, путешествиями и т.д.
Подводя итог, стоит напомнить, что мудборд позволяет создать такой дизайн-проект, который будет полностью отвечать требованиям заказчика. Доска настроения существенно облегчает коммуникацию между дизайнером и клиентом. Кроме того, коллаж, отражающий лейтмотив проекта, помогает сформировать единое видение у всех членов команды. Иными словами, мудборд в дизайне – это незаменимый инструмент, который визуализирует атмосферу проекта и улучшает взаимопонимание с заказчиком и коллегами.