moodboard что это такое

Что такое мудборды и зачем они дизайнеру

Оказывается, любая (почти) подборка картинок и красивых фоток с сайтов — это крутой инструмент в руках дизайнера.

Странное словечко. А это точно не ругательство?

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

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

И как выглядит эта презентация? Для неё тоже нужен PowerPoint?

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

Но это же лишняя работа! Обязательно делать эти коллажи?

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

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

Круто! Собираем в кучу красивые картинки отовсюду и идём к заказчику?

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

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

А целостность — это как? Картинки должны красиво смотреться вместе?

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

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

А если сделать подписи, чтобы образы стали понятнее?

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

Источник

Moodboard — еще одно ругательство в наших дизайн-процессах

Нерешенные задачи

Нововведение касается первых этапов работы над проектом: выяснения требований и дизайна. Собственно, неважных этапов в разработке не бывает, но эти — основополагающие, так как с них всё начинается.

Причины, почему так происходит: низкая вовлеченность ЛПР на ранних этапах и высокая вовлеченность на этапе, когда «появляется картинка».

Обычное брифование худо-бедно помогает вовлечь ЛПРа, зафиксировать формальные требования к проекту, но сохраняет проблему «передачи настроения». И решение последней проблемы — самое сложное.

Визуальный бриф

Это первая методика, которую мы попробовали применять (спасибо Коле Запорожскому из МартДизайна).

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

Поэтому мы решили испытать новую методику.

Доски настроения, «Мудборды»

Мудборд (англ. Mood board — дословно, «доска настроения») — условное полотно, на котором собраны вырезки из фотографий, примеры шрифтовых начертаний, иконки, кнопки, паттерны и другие графические элементы, которые в сумме образуют искомую карту настроения.

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

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

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

Попробовали метод на пяти проектах, пока впечатления самые хорошие. Будем оттачивать и развивать, всё для больших, дерзких и волосатых проектов! 🙂

Екатерина, руководитель проектов: Да это офигенно! Мудборды рулят! У меня наконец-то нет страха перед проведением визуального брифа, что заказчик сейчас опять начнет ничего не понимать, задавать дурацкие вопросы. И потом ни мне, ни дизайнеру, ни заказчику не понятно — чего, собственно, собирались-то? А с мудбордами всё ясно и понятно. Жду отрисовки дизайна по сайту вязаных шапочек. С точки зрения настроения — уже представляю себе, каким должен был результат.

В общем, понятно и полезно. И заказчик доволен )

Источник

Референсы и Мудборды. Зачем они, собственно, нужны?

В прошлом выпуске мы показывали, как работает наша методология на примере кейса с Универсиады-2019 в Красноярске

Продолжаем рассказывать об элементах нашей системы.

Итак, Референсы и Мудборды

Референс — картинка из Интернета, которая отражает желаемую визуальную стилистику. Проще говоря, попытка объяснить как это должно выглядеть не в тексте, а на визуальном уровне

Мудборды — пачки референсов на одну тематику, собранные на одной доске (Board), они задают «настроение” (mood) проекта. Отсюда и название “MoodBoard»

Зачем они, собственно, нужны? Неужели нельзя сразу начать рисовать, а потом поправить? Не надо так. Долго будем править. Очень.

Ключевая идея в том, что в голове у каждого человека свое «красиво”, свое “нравится”. Свое “красиво” у режиссера, у художника-постановщика, у продюсера, у генерального заказчика. А теперь представьте, что это самое “красиво» мы пытаемся описать текстом в большой e-mail переписке. А потом наш Клиент несет это своему Клиенту и тоже пытается объяснить все в тексте. И так несколько раз. Точно не попадем в ожидания. А ожидания (особенно те, которые неоправдались) — как раз и есть тот ключевой элемент, из-за которого Клиент может быть недоволен, хотя вроде бы все по договору, вроде бы то, о чем договаривались. Вроде бы. Но не то.

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

Мы раньше думали, что эта тема для всех очевидна и вся страна давно пользуется референсами, пока нашего директора, Артем Адырхаева не начали приглашать в качестве спикера на профильные мероприятия для event и технических продюсеров. Оказалось, что в среднем 50-70% аудитории знают о референсах и мудбордах, но в своей работе не используют. Хотя инструмент рабочий. И бесплатный.

Что хотелось бы сказать в конце)

Лекция Артёма, в которой подробно говорится о референсах и мудбордах, есть на нашем YouTube-канале

P.S. Всем удачных мероприятий, довольных Клиентов, масштабных и успешных шоу! Используйте референсы и мудборды и будет Вам меньше правок перед сдачей

Следите за нами в Инстаграм, там каждый день мы в течение уже 29 недель выкладываем по одной творческой работе в день в рамках Daily Render Challenge.

Источник

Мудборд. Пустой тренд или эффективный инструмент для создания сайта?

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

В дословном переводе с английского мудборд звучит как «доска настроения». Если подбирать термин на русский манер, больше всего подойдет слово «коллаж». На первый взгляд, ничего серьезного. Как «доска настроения» может помочь специалисту в выполнении задачи? На самом деле, помочь может, и даже очень эффективно.

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

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

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

На брифингах обычно обсуждаются следующие моменты:

цели и задачи проекта;

кто целевая аудитория сайта;

можно ли отходить от фирменного стиля;

какое настроение лучше задать дизайн-концепции;

как вписать настроение в сложившуюся айдентику клиента;

какие сайты нравятся клиенту и почему;

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

Кстати, при выборе цвета будущего сайта есть два варианта развития событий:

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

если же у клиента нет фирменного стиля, отдел дизайна предлагает цвета, которые на их взгляд подходят клиенту и его проекту.

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

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

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

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

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

Платформа для тренировки насмотренности и поиска вдохновения. Это одно из крупнейших онлайн-сообществ, где собираются дизайнеры и делятся своими проектами, получают лайки, подписчиков и отзывы. На сервисе можно найти работы графических дизайнеров, иллюстраторов, веб-дизайнеров и 3D-визуализаторов.

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

Хороший ресурс для поиска референсов по UI-дизайну. Это удобная коллекция сайтов, которая постоянно пополняется. Если дизайнер ищет что-то конкретное, здесь есть функция разделения коллекций по стилю, типу, теме и платформе.

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

Каталог веб-дизайна, проект дизайнерского бюро Division Binaural. Этот сайт служит источником вдохновения для дизайнеров-разработчиков и энтузиастов HTML. В нем собраны концепции сайтов с уклоном в модернизм и простоту.

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

Источник

Moodboard: 5 советов, как правильно составить

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

Дословно Moodboard переводится как «доска настроения». Он может включать в себя все, что угодно:

Обложки и упаковки

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

Зачем дизайнеру нужен moodboard?

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

Есть 2 способа, как сделать moodboard:

Можно просто распечатывать и вырезать картинки из журналов и крепить их на пробковую доску.

Мудборд удобно делать в графических программах: Photoshop, PowerPoint, Illustrator.

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

А теперь 5 важных пунктов по созданию правильного мудборда:

Проанализируйте тренды

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

2. Определите концепцию

Вы просмотрели кучу трендов, в вашей голове масса задумок. Теперь остановитесь и придумайте общую концепцию. Задумайте идею, основное направление и вектор развития мысли. Высшим пилотажем считается, когда в основе мудборда присутствуют не базовые установки или популярные темы, а затронуты остросоциальные проблемы. К примеру, для Джейсона Холла — экс-креативного директора мужской линии одежды WGSN, таковым стало британское социальное явление «Edgelands»: переселение горожан в тихие поселки. Он отобразил все идеи в виде коллажа и начал анализировать вклад явления в моду вместе с трендами.

3. Проведите отбор и сортировку

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

4. Используйте компьютер

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

5.Находитесь в постоянный поиске

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

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

Источник