mood board это что такое
Мудборд. Пустой тренд или эффективный инструмент для создания сайта?
Вы — компания, которая хочет обновить свой сайт и ищет для этого подрядчиков. Но как подрядная команда разработчиков поймет, каким вы видите результат? Как наемные дизайнеры смогут отразить ценность фирмы, ее айдентику и бренд, не работая там и дня? Для решения такой задачи подойдет мудборд.
В дословном переводе с английского мудборд звучит как «доска настроения». Если подбирать термин на русский манер, больше всего подойдет слово «коллаж». На первый взгляд, ничего серьезного. Как «доска настроения» может помочь специалисту в выполнении задачи? На самом деле, помочь может, и даже очень эффективно.
Мудборд содержит в себе образцы тех элементов, которые заказчик хочет видеть на сайте: цвет, шрифт, стиль, референсы. Он отображает основную идею и концепцию, подходящую к проекту, и может выглядеть по-разному: в виде реальной доски, коллажа, стикеров с референсами или в виде презентации.
Промежуточно резюмируем: мудборд — это инструмент, который отражает основные идеи и элементы по проекту. Он помогает дизайнеру и клиенту сразу попасть на одну волну и определиться с желаемым результатом наиболее детально, тем самым оптимизируя процесс взаимодействия. Подготовительные обсуждения ускоряются и позволяют дизайнерам раньше приступить к работе и, как следствие, быстрее передать проект разработчикам для запуска сайта.
На первом этапе происходит знакомство с клиентом и его проектом. Здесь дизайнер собирает основные вводные у заказчика, определяет вектор работы и концепцию будущего сайта. Это важный процесс, от итогов которого зачастую зависит все дальнейшее общение. Если брифинг пройдет плохо, дизайнер не поймет задачу, а у клиента сложится не лучшее представление о команде. Если же он проведен хорошо, это поможет избежать множества проблем на следующих этапах и ускорить рабочий процесс.
На брифингах обычно обсуждаются следующие моменты:
цели и задачи проекта;
кто целевая аудитория сайта;
можно ли отходить от фирменного стиля;
какое настроение лучше задать дизайн-концепции;
как вписать настроение в сложившуюся айдентику клиента;
какие сайты нравятся клиенту и почему;
На втором этапе происходит самое интересное: подготовка мудборда. Здесь дизайнеры определяются с концептуальной идеей, а после подбирают цвета, шрифты, прорабатывают стилистику иконок, думают о вариантах применения анимации на будущем сайте клиента и десятках других фишек.
Кстати, при выборе цвета будущего сайта есть два варианта развития событий:
если у клиента есть сложившийся фирменный стиль, то дизайнеры берут его в работу, адаптируя цвета айдентики заказчика под веб (производится мелкая настройка контраста и яркости);
если же у клиента нет фирменного стиля, отдел дизайна предлагает цвета, которые на их взгляд подходят клиенту и его проекту.
Детали определяются не только для главной, но и для одной из внутренних страниц сайта, чтобы как можно точнее попасть в пожелания клиента.
Если проект обширный и у клиента нет четкого видения своего будущего сайта, наши специалисты готовят бенчмаркинг. Это сравнительный анализ, в котором собраны исследования по наиболее частым трендам в дизайне сайтов со ссылками на информацию. Так клиент будет иметь представление о вариациях и сможет на основе сравнения выделить, что ему нравится, а что не нравится.
На заключительном третьем этапе команда презентует клиенту готовый мудборд. Заказчик, в свою очередь, дает детальную обратную связь о предложенных решениях. Дальше дизайнеры используют мудборд как основу для составления дизайн-концепции, которую также согласовывают с клиентом и передают разработчикам, чтобы те воплотили все смелые идеи дизайнера и заказчика в цифровую реальность.
Первое, о чем обязательно стоит упомянуть, это базовый инструмент для построения доски. В команде Uplab дизайнеры составляют мудборды в программе Figma. Удобный онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени.
В дизайне особенно важно много практиковаться и развивать насмотренность. Опыт и наблюдение за тем, какие появляются технологии, какие существуют тренды, прокачивают дизайнера и расширяют идейный кругозор. Следующие инструменты помогут в этом.
Платформа для тренировки насмотренности и поиска вдохновения. Это одно из крупнейших онлайн-сообществ, где собираются дизайнеры и делятся своими проектами, получают лайки, подписчиков и отзывы. На сервисе можно найти работы графических дизайнеров, иллюстраторов, веб-дизайнеров и 3D-визуализаторов.
Это интернет-сайт конкурса профессиональных веб-дизайнеров и разработчиков, на котором собраны тысячи лучших работ профессионалов со всего мира. Он может стать еще одним местом для поиска вдохновения по графике.
Хороший ресурс для поиска референсов по UI-дизайну. Это удобная коллекция сайтов, которая постоянно пополняется. Если дизайнер ищет что-то конкретное, здесь есть функция разделения коллекций по стилю, типу, теме и платформе.
Это галерея лучших главных страниц сайтов, собранная со всего интернета. Для удобства навигации на сайте есть поиск и специальные теги, которые проставлены у каждого сайта. Так, если вам интересны сайты с каким-то определенным типом главных страниц, вы можете либо вбить это в поиске, либо кликнуть по подходящему тегу.
Каталог веб-дизайна, проект дизайнерского бюро Division Binaural. Этот сайт служит источником вдохновения для дизайнеров-разработчиков и энтузиастов HTML. В нем собраны концепции сайтов с уклоном в модернизм и простоту.
Вам наверняка известен принцип Парето, согласно которому 20% усилий дают 80% результата. Этап визуальной коммуникации через мудборд — это и есть 20% оптимальных усилий. Именно поэтому работа с мудбордом позволяет при наименьших временных затратах получить максимально эффективный результат:
Референсы и Мудборды. Зачем они, собственно, нужны?
В прошлом выпуске мы показывали, как работает наша методология на примере кейса с Универсиады-2019 в Красноярске
Продолжаем рассказывать об элементах нашей системы.
Итак, Референсы и Мудборды
Референс — картинка из Интернета, которая отражает желаемую визуальную стилистику. Проще говоря, попытка объяснить как это должно выглядеть не в тексте, а на визуальном уровне
Мудборды — пачки референсов на одну тематику, собранные на одной доске (Board), они задают «настроение” (mood) проекта. Отсюда и название “MoodBoard»
Зачем они, собственно, нужны? Неужели нельзя сразу начать рисовать, а потом поправить? Не надо так. Долго будем править. Очень.
Ключевая идея в том, что в голове у каждого человека свое «красиво”, свое “нравится”. Свое “красиво” у режиссера, у художника-постановщика, у продюсера, у генерального заказчика. А теперь представьте, что это самое “красиво» мы пытаемся описать текстом в большой e-mail переписке. А потом наш Клиент несет это своему Клиенту и тоже пытается объяснить все в тексте. И так несколько раз. Точно не попадем в ожидания. А ожидания (особенно те, которые неоправдались) — как раз и есть тот ключевой элемент, из-за которого Клиент может быть недоволен, хотя вроде бы все по договору, вроде бы то, о чем договаривались. Вроде бы. Но не то.
Здесь, как раз, на сцену и выходят референсы и мудборды. Такой подход еще называют «визуальным брифом». За счет только одного этого шага в начале проекта мы снимаем очень много потенциальных правок ближе к дедлайну. Согласование визуального решения проекта становится сильно проще — все смотрят на один набор картинок и понимают, что это — то, на чем мы все сошлись
Мы раньше думали, что эта тема для всех очевидна и вся страна давно пользуется референсами, пока нашего директора, Артем Адырхаева не начали приглашать в качестве спикера на профильные мероприятия для event и технических продюсеров. Оказалось, что в среднем 50-70% аудитории знают о референсах и мудбордах, но в своей работе не используют. Хотя инструмент рабочий. И бесплатный.
Что хотелось бы сказать в конце)
Лекция Артёма, в которой подробно говорится о референсах и мудбордах, есть на нашем YouTube-канале
P.S. Всем удачных мероприятий, довольных Клиентов, масштабных и успешных шоу! Используйте референсы и мудборды и будет Вам меньше правок перед сдачей
Следите за нами в Инстаграм, там каждый день мы в течение уже 29 недель выкладываем по одной творческой работе в день в рамках Daily Render Challenge.
Как создать мудборд: полезные советы для дизайнеров
Возможно, вы уже сталкивались с мудбордами, когда делали ремонт в доме, готовились к свадьбе или работали над планировкой…
Возможно, вы уже сталкивались с мудбордами, когда делали ремонт в доме, готовились к свадьбе или работали над планировкой сада. Но если вы хотите стать дизайнером, вам обязательно нужно переосмыслить этот полезный инструмент.
Мудборд помогает дизайнерам структурировать их видение проекта, находить общий язык с клиентом и получать отзывы пользователей задолго до появления продукта.
В этой статье мы расскажем, как дизайнер может использовать мудборд, а также как создать первоклассную доску настроения и получить от нее максимум пользы.
Что такое мудборд
Мудборд (также используют названия “доска настроения” и “доска вдохновения”) – это набор специально подобранных изображений, которые передают эмоциональный контекст бренда или продукта.
Мудборд может буквально быть доской, к которой дизайнер прикрепляет распечатанные изображения, рисунки и другие элементы (например, лоскутки ткани или сухие листья), чтобы передать настроение своих проектов. Но большинство дизайнеров используют цифровые мудборды, что дает возможность работать над ними целой командой.
Pinterest – отличный инструмент создания досок настроения для личного использования.
Дизайнеры предпочитают более многофункциональные облачные платформы, как GoMoodboard, Polyvore и StudioBinder. В этих инструментах используются шаблоны, что существенно экономит время дизайнера. Многие из них позволяют работать над проектом командой и редактировать мудборд с различных устройств. Crello, графический редактор на основе шаблонов от Depositphotos, также можно использовать для создания доски настроения и ее презентации (выберите шаблон “Презентация”).
Рекламные агентства и дизайн-студии обычно создают персонализированные мудборды с помощью Photoshop и других профессиональных графических редакторов. Они передают свою работу клиенту в виде руководства для отделов дизайна и маркетинга.
Что можно разместить на мудборде? Как правило, доска настроения – эмоциональный и визуальный референс, который нужен для дальнейшей работы. Мудборд служит отправной точкой для мозгового штурма. А в своем окончательном виде он становится источником идей для других креаторов из команды.
В классическом мудборде используют: фотографии, иллюстрации и их части, текст, который передает эмоции, подписи и заметки, цветовые палитры, элементы дизайна, примеры похожих продуктов, а также шрифты для вдохновения.
Где применяют мудборды: архитектура, промышленный дизайн, веб-дизайн, брендинг и ребрендинг, фотосессии и раскадровка видеороликов, рекламные кампании, театр, мода.
Зачем вам нужен мудборд
Если у вас есть сомнения по поводу того, нужен ли вам мудборд, посмотрите следующий список. Мы собрали главные причины, почему с доской настроения выполнять дизайнерские задачи проще и приятнее.
Вы создаете новую концепцию продукта
Обычно работа над новым продуктом выглядит так: клиент говорит вам, какие функции будет выполнять продукт, а вам нужно продумать его дизайн или визуальную коммуникацию. В этом случае мудборд помогает структурировать творческий процесс и развить идею, а затем сохранить ее.
Вы работаете в команде
Самое важное в командной работе – оставаться на одной волне на протяжении реализации проекта. Мудборд – это набор визуальных и эмоциональных референсов, на которые вы с коллегами можете ориентироваться во время работы над разными аспектами продукта (например, над дизайном интерфейса и визуальной коммуникацией в соцсетях).
Вам необходимо обсудить промежуточный результат с клиентом
Мудборд можно назвать первым инструментом для совместной работы в истории дизайна. Даже в виде картона с булавками, журнальными вырезками и абстрактными набросками он выполняет главную функцию – дает дизайнеру возможность объяснить свое видение и позволяет другим членам команды вносить изменения.
Вы хотите избежать дорогостоящих ошибок
Если вы разработали продукт, а затем узнали, что он не понравился пользователям, придется начинать все сначала. Мудборд поможет избежать этого. Вы можете представить свою доску настроения фокус-группе и сразу же получить обратную связь.
6 шагов к созданию первоклассного мудборда
У дизайнеров из разных направлений и команд могут быть разные стратегии создания мудбордов. Бренд-дизайнеры начинают с изучения продуктов-конкурентов и получают в итоге хорошо продуманный референс. Модельеры предпочитают физические доски настроения и собирают на них не только изображения, но и материалы. Наше пошаговое руководство будет особенно полезным для графических дизайнеров.
Шаг 1. Определите цель создания мудборда
Вам нужен мудборд для личного использования или для презентации? Для практических целей или для поиска и хранения творческих идей?
Ответьте на вопрос, какой цели поможет достичь создание мудборда. Вам может быть необходимо определить стиль будущего продукта или разработать его полную концепцию, в том числе функционал и позиционирование.
Другими словами, важно понять, зачем вам мудборд.
Шаг 2. Ищите “ориентиры” дизайна
У любого продукта есть свойства, которые дизайнер не может или почти не может изменить.
Возьмем, к примеру, брендинг кофейни. В данном случае ключевые характеристики продукта можно определить как “кофе” и “кофейня”. Добавьте к этому требования к дизайну от вашего клиента и другие особенности продукта, о которых вы узнали на этапе исследования (например, “семейный бизнес”, “приглушенная цветовая палитра”, “минимализм”, “миллениалы”). Также обратите внимание на конкурентную нишу и целевую аудиторию продукта.
Добавьте на мудборд изображения, символизирующие все ключевые атрибуты продукта, визуальный контекст целевой аудитории, конкурентную среду и требования клиентов.
Шаг 3. Изучайте и исследуйте
Новое – хорошо забытое старое. Кто-то в прошлом уже работал над подобным проектом и, вполне вероятно, добился в этом большого успеха. Изучите дизайн похожих продуктов и добавьте самые интересные варианты на мудборд.
Попробуйте копать глубже! Возможно, вам понадобится обратиться к истории, чтобы нащупать отличную дизайнерскую идею. Узнайте, как похожие товары выглядели раньше. Если вы нашли необычное решение, добавьте и его на доску.
Шаг 4. Используйте иллюстрации, неоновые вывески, фотографии и все, что вас вдохновляет
Пришло время проявить немного креативности. Добавляйте изображения, которые не имеют прямого отношения к вашей задаче, но заряжают вас вдохновением. Это может быть что угодно – от любимой японской гравюры XVI века до флаера, который вам дали на улице.
Также вы можете использовать анимацию, аудиозаписи и даже стихи. На этом этапе также можно обратиться к стоковым платформам, например Depositphotos. Выберите понравившиеся изображения и видео, сохраните их в “Избранное” или скачайте и добавьте на мудборд.
Шаг 5. Выберите шрифты и цвета
Графический дизайнер рано или поздно придет к выбору шрифта и цветовой палитры. Лучше принять это решение заранее с помощью мудборда. Ищите шрифты и цвета, которые визуально сочетаются с тем, что вы уже добавили на доску. Даже если в будущем вам придется разработать собственный шрифт, с референсами это будет гораздо проще.
Шаг 6. Доработайте мудборд
На этом этапе вам нужно распределить по категориям все, что вы добавили на доску. Уберите повторы и выделите референсы, которые наиболее точно передают “настроение” проекта.
Даже если вы не собираетесь представлять мудборд команде или клиенту, постарайтесь сделать так, чтобы даже сторонний наблюдатель мог понять ход ваших мыслей. Для этого используйте стрелки, подписи, масштабирование изображения и различные композиционные приемы.
Мысли напоследок
Зачем использовать мудборд? Часто креативный проект начинается с активного мозгового штурма, а доска настроения – лучший способ не потерять и не забыть творческие идеи. Кроме того, это связующее звено между дизайнерами и их клиентами, а также другими членами команды.
Мудборд – адаптивный, многофункциональный инструмент. Его применяют модельеры, режиссеры, архитекторы, промышленные и digital-дизайнеры, любители дизайна интерьера и тематических мероприятий.
Если вы раньше не использовали мудборд в работе, рекомендуем попробовать этот инструмент. Вы удивитесь, насколько легким и приятным может быть мозговой штурм!
Что такое мудборды и зачем они дизайнеру
Оказывается, любая (почти) подборка картинок и красивых фоток с сайтов — это крутой инструмент в руках дизайнера.
Странное словечко. А это точно не ругательство?
Нет. Мудборд — это «доска настроения» (от англ. mood board). Так называют презентацию, собранную из фотографий, иллюстраций, паттернов, слоганов, шрифтов и цветовых схем. Она создаётся для будущего дизайн-проекта и показывает, каким будет дизайн: серьёзным или весёлым, элитарным или демократичным, какие образы возьмут за основу, как будут сочетаться цвета и какой будет типографика.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
И как выглядит эта презентация? Для неё тоже нужен PowerPoint?
Мудборд — это презентация в виде коллажа. Раньше для составления пришлось бы вырезать фото из журналов и приклеивать на доску. Сейчас всё проще: берут картинки из интернета и совмещают в любом графическом редакторе. Получается такая штука:
Но это же лишняя работа! Обязательно делать эти коллажи?
Нет, использовать мудборды не обязательно. Но они здорово облегчают работу с проектом. Чтобы сделать несколько разных макетов интерфейса или вариантов фирменного стиля, нужна уйма времени. Поэтому с концепцией лучше определиться заранее. Плюс мудбордов в том, что их можно собрать относительно быстро.
Объяснить что-то на словах и решить, что взять за основу будущего проекта, подчас намного сложнее, чем сделать это с помощью нескольких картинок и паттернов в мудборде. Эта быстрая презентация особенно важна при общении дизайнера с заказчиком и позволяет им проще понять друг друга.
Круто! Собираем в кучу красивые картинки отовсюду и идём к заказчику?
Мудборд — это не просто коллаж, в котором собраны красивые картинки. В первую очередь это визуальные элементы, подходящие к конкретному проекту. Поэтому собрать заранее сотню и раздавать их заказчикам — плохая идея. В мудборде должны быть акцентированы основные идеи, которые будут отражены в дизайне.
Ещё одна важная характеристика мудборда — это его целостность. Всё должно быть подчинено одному настроению: чтобы при взгляде на картинки было сразу понятно, какой это дизайн, для какой аудитории и какой месседж в себе несёт.
А целостность — это как? Картинки должны красиво смотреться вместе?
Не совсем. Даже если фотография грозовых туч симпатично смотрится рядом с изображением солнечного неба, нельзя сочетать элементы, кардинально разные по смыслу и настроению, они не должны противоречить друг другу. Это дезориентирует: ни клиенту, ни самому автору мудборда в итоге непонятно, будет ли дизайн солнечным или мрачным.
По той же причине в мудбордах стараются избегать слишком сложных образов, которые могут быть непонятны клиенту. Скажем, портрет Наполеона Бонапарта в мудборд вставлять бессмысленно — исторические личности вызывают сложные ассоциации, у разных людей они будут разными. Для понимания проекта эти образы не несут никакой пользы.
А если сделать подписи, чтобы образы стали понятнее?
Длинные пояснения точно не нужны. Задача мудборда — не рассказать о дизайне, а показать его в картинках. Но какой-то короткий слоган может быть полезен: для лучшего понимания идеи или просто для демонстрации типографики. Например, вот так:
Moodboard — еще одно ругательство в наших дизайн-процессах
Нерешенные задачи
Нововведение касается первых этапов работы над проектом: выяснения требований и дизайна. Собственно, неважных этапов в разработке не бывает, но эти — основополагающие, так как с них всё начинается.
Причины, почему так происходит: низкая вовлеченность ЛПР на ранних этапах и высокая вовлеченность на этапе, когда «появляется картинка».
Обычное брифование худо-бедно помогает вовлечь ЛПРа, зафиксировать формальные требования к проекту, но сохраняет проблему «передачи настроения». И решение последней проблемы — самое сложное.
Визуальный бриф
Это первая методика, которую мы попробовали применять (спасибо Коле Запорожскому из МартДизайна).
Механика работы визуального брифа: заказчик предлагает пять-семь прилагательных, описывающих дух проекта. Мы находим по три-четыре визуальных образа на каждое слово и предлагаем клиенту выбрать среди них тот, который наиболее точно соответствует его ощущениям проекта. И прокомментировать, почему конкретный образ подходит либо нет. На выходе получаем набор изображений-образов, который по задумке должен отражать настроение проекта.
Поэтому мы решили испытать новую методику.
Доски настроения, «Мудборды»
Мудборд (англ. Mood board — дословно, «доска настроения») — условное полотно, на котором собраны вырезки из фотографий, примеры шрифтовых начертаний, иконки, кнопки, паттерны и другие графические элементы, которые в сумме образуют искомую карту настроения.
Мудборд делается не руководителем проекта, а непосредственно дизайнером, и из тех элементов, стилистику которых действительно можно использовать в конечном продукте. То есть на выходе у нас получается не нарезка из разрозненных, оторванных от практического применения, картинок, а набор образов, подобранных специально для этого проекта.
Мудборд, сделанный для интернет-магазина вязаных шапочек. 
Мудборд демонстрируется заказчику и обсуждается каждый его элемент. В результате мы получаем очень полезную обратную связь: по шрифтам, стилистике иконок, фактурам, общему настроению проекта. Кстати, конкретно по этому проекту: после того, как заказчик увидел сноуброд среди картинок, решил делать шапочки для сноубродистов. Вот такой вот источник инсайтов 😉
Попробовали метод на пяти проектах, пока впечатления самые хорошие. Будем оттачивать и развивать, всё для больших, дерзких и волосатых проектов! 🙂
Екатерина, руководитель проектов: Да это офигенно! Мудборды рулят! У меня наконец-то нет страха перед проведением визуального брифа, что заказчик сейчас опять начнет ничего не понимать, задавать дурацкие вопросы. И потом ни мне, ни дизайнеру, ни заказчику не понятно — чего, собственно, собирались-то? А с мудбордами всё ясно и понятно. Жду отрисовки дизайна по сайту вязаных шапочек. С точки зрения настроения — уже представляю себе, каким должен был результат.
В общем, понятно и полезно. И заказчик доволен )