Мудборд что это такое простыми словами
Мудборд или Как сдать макет клиенту с первого раза
Стандартный процесс создания лендинга в агентстве Х: маркетолог встречается с клиентом на брифинге, задает вопросы, записывает пожелания. Как только в его голове появляется понимание, как выглядит лендинг, он рисует прототип и относит его дизайнеру.
Маркетолог не учел, что его представления о лендинге отличаются от представлений клиента. По готовому макету приходит фидбек от клиента: «Это не то». Сыпятся правки, дизайнер снова и снова рисует иконки и каждый раз не попадает в ожидания.
Не хватает одного этапа между прототипом и готовым дизайном — мудборда или доски настроений. Это набор референсов: примеров изображений, шрифтов, цветовых решений. Рассказываем, в чем польза от мудборда и как его составить за три шага.
Мудборд помогает убедиться, что заказчик и исполнитель поняли друг друга и задача принята правильно. Пример: заказчик Y приходит в Out of Cloud за фирменным стилем. Мы проводим брифинг клиента, уточняем характеристики продукта и ожидания клиента. Затем начинаем работать над «доской настроения».
Ниже — мудборд, который помог определиться с общим настроением фирменного стиля: использовали крупную типографику и яркие цветовые акценты на светлом фоне.
Еще одно полезное свойство мудбордов — они помогают четко донести мысли до клиента. Задача дизайна не только быть эстетически приятным и отражать дух бренда, но и увеличивать показатели метрик. С мудбордом легче объяснить заказчику, почему невысокий баннер в теле письма сработает лучше и что такое заметные кнопки CTA.
При подготовке мудборда мы идем от общего к частному. Сначала подбираем цветовую палитру: дизайнеры и контент-маркетологи Out of Cloud пользуются функцией фильтра по цвету. Она есть у Dribbble, Behance и Adobe Color.
Еще один способ — вбить в поиске Google или Pinterest запрос «palette + название цвета».
Далее переходим к поиску референсов по структуре. У всего есть структура, будь то главный баннер письма, лендинг или рекламные креативы. Базовая структура — это набор обязательных элементов: хедер, футер, тело. Структура блоков внутри тела зависит от задачи. Например, если цель — увеличить клики в email-рассылке, лучше выбрать структуру с яркими и заметными CTA.
Референсы для лендингов на Behance. Совет: лучше формулировать поисковый запрос на английском, тогда выбор больше
Последний шаг — подобрать графическое решение. Уделяем внимание деталям и подбираем визуал, который решит задачу и отразит дух бренда: фотографии или векторные иллюстрации, абстрактный фон или градиентный, гротескные шрифты или антикву. Чаще всего ищем такие референсы на Pinterest, Shutterstock, Behance или Dribbble.
Что такое мудборд и зачем дизайнеры используют его
Инструментом в руках грамотного дизайнера может быть практически что угодно. Насмотренность важна при работе с любым визуальным контентом настолько же сильно, насколько важно грамотно составить ТЗ. А если объединить их – получится мудборд.
Именно он помогает избежать разногласий между дизайнером и заказчиком и формирует визуальный облик будущего продукта. А еще позволяет не отклониться от первоначальной идеи.
Что представляет собой мудборд?
Что такое «мудборд»? Грубо говоря, это «доска настроения» (так звучит прямой перевод «moodboard» с английского) – подборка изображений, характеризующая будущий дизайн-проект.
Она олицетворяет результат, который хочет получить заказчик, и может состоять из нескольких различных элементов:
Все перечисленные графические материалы указывают на настроение и дух проекта и размещаются в форме коллажа. Сделать его можно в фоторедакторе или одной из предназначенных для этого программ.
Для каких целей он используется?
Мудборд применяется в дизайне как альтернатива текстовому ТЗ либо служит его дополнением. Заказчик получает возможность наглядно продемонстрировать свои предпочтения и пожелания, внося в него коррективы. Если заказчик хотя бы немного умеет работать с графическими редакторами, то он может самостоятельно подготовить изображение и прийти с ним к дизайнеру.
Последний, в свою очередь, избавляется от «творческого ступора» и сразу приступает к созданию проекта. А еще снижается шанс того, что клиент отклонит задумки специалиста в последний момент, и всю работу придется переделывать с нуля.
Взглянув на мудборд, сразу становится ясно, какая будет использоваться типографика и цветовая палитра.
Составлять такие коллажи можно не только при создании дизайн-проектов – их могут запрашивать фотографы и организаторы мероприятий. В случае со съемками специалист может сразу определить, какое освещение и локация ему понадобятся. Процесс организации торжества также ускорится, когда организатор будет понимать, в какой цветовой гамме покупать декор и какую развлекательную программу придумать.
Почему вам стоит начать свой проект с составления мудборда?
Конечно, использование мудбордов – личное дело каждого, и от них всегда можно отказаться.
Если вы считаете работу над ним лишней, то просто подумайте: на то, чтобы испробовать несколько вариаций фирменного стиля, корпоративного дизайна или оформления помещения, порой тратится гораздо больше времени, чем на компиляцию нескольких изображений в одно.
Создавая коллаж с вариантами дизайна, цветовой гаммы и текстур:
Опять же, само наличие мудборда – это хорошо, но не каждый мудборд – хорош. Бесцельный сбор картинок в интернете, не связанных общей стилистикой, направленностью или настроением, не принесет никакой пользы.
Основные правила создания мудборда
Перейдем к работе с «красивыми картинками» из интернета, которые так и хочется запихать в будущий проект. Главных правил всего два.
Во-первых, получившаяся подборка референсов должна быть целостной. Некоторые образы могут остаться непонятными для клиента, поэтому стараемся использовать более простые символы, которые вызывают устойчивые ассоциации и перекликаются между собой.
Во-вторых, поиск должен начинаться «от идеи». Нет никакого смысла подготавливать розовый коллаж с принцессами для сайта секции единоборств. К конкретному проекту всегда походят конкретные визуальные элементы: именно их нам и нужно найти.
Торопиться не будем: начнем с разбора «деталей», из которых наш мудборд будет состоять.
Цветовые палитры
Оттенки, цвета и градации обладают яркой эмоциональной окраской. Поэтому выбираем те, которые передают желаемые ощущения и ассоциируются с проектом.
Для этого можно воспользоваться генераторами палитр (свободно доступны в интернете) или самостоятельно взять цвета с какого-либо изображения (для этого подойдет инструмент «пипетка» в Photoshop). Чтобы составить уникальную палитру, просто откроем картинку с подходящей для нас цветовой гаммой, приятной глазу, и возьмем с нее 3-6 оттенков.
Понравившиеся цвета разместим в виде небольших блоков. Теперь стало гораздо понятнее, перекликаются ли они между собой. Прислушайтесь к ощущениям: если несколько оттенков «выбиваются», попробуйте заменить их на более теплые или холодные.
Иллюстрации и фотографии
Как передать эстетику и настроение проекта? Правильно – отобразить его в подборке иллюстраций и снимков, которые наиболее точно ему соответствуют. Референсы должны быть релевантными и актуальными. Часто для составления «досок настроения» применяют фотографии природы, людей и их взаимодействия между собой, растений, предметов интерьера. Можно поискать иллюстрации, нарисованные от руки, если подходящий снимок выбрать не получается или «чего-то не хватает».
Даже если на выбранной картинке будет лого фотостока – это не страшно, ведь мудборд является «черновиком», и небольшая полупрозрачная надпись никак не повлияет на восприятие изображения.
Текстуры и паттерны
Образы в мудборде для дизайнеров могут быть переданы не только с помощью иллюстраций, но и через фоновые текстуры. Растительные ландшафты, рельефные поверхности, ткани, мрамор или дерево послужат вдохновением для создания фотоконтента, выбора стиля или палитры.
Без использования текстур не обойтись тогда, когда вы создаете оформление продукта.
Что касается паттернов, их тоже можно удачно использовать при разработке фирменного стиля, будущего ремонта в квартире или подготовке к фотосессии. Узоры особенно важны в корпоративном дизайне, так как они повышают узнаваемость фирмы и используются на бланках, пакетах, упаковке и прочей продукции.
Сам паттерн или отдельные его элементы могут дополнять или частично повторять логотип, вызывать прямые ассоциации с продуктом или просто передавать его «характер».
Шрифты: логотипы и цитаты
От лого можно отталкиваться при дальнейшей работе: подбирая визуальные образы под его цвет и форму, постепенно «наращивать» количество изображений на мудборде. Также коллаж может пригодиться в том случае, если в компании планируется редизайн и нужны свежие идеи для логотипа.
Слоган звучит как «Наша бдительность – ваше спокойствие»? Тогда разместите на шаблоне образы, вызывающие ощущение умиротворения и безопасности.
Мудборды для мероприятий: особенности
Поговорим про отдельную категорию «досок»: это коллажи, которые отражают атмосферу мероприятия, например свадебной церемонии. Вам предстоит поработать над ними, если вы планируете доверить торжество какой-либо компании (или сами занимаетесь организацией мероприятий).
Эти советы можно использовать и при планировании корпоратива, презентации или мастер-класса. Если вы – владелец или сотрудник крупной компании, строго следящий за соблюдением корпоративного стиля, придется придерживаться его и во время неформальных мероприятий с клиентами или партнерами.
Где искать исходники?
Удачных референсов достаточно – они окружают вас в повседневной жизни, а также хранятся на фотостоках и в социальных сетях.
Для поиска изображений и текстур по узконаправленным запросам лучше воспользоваться полноценными фотостоками. Они:
Если проект достаточно простой, можно обратиться к более простым инструментам – например, сервису Pinterest. На сайте представлены тематические подборки, подходящие для визуального брифа. Тематические коллекции могут группироваться по цветовой гамме, настроению, стилю или тематике.
Чего в мудборде быть не должно
Все неудачные примеры коллажей похожи на друг друга. Чтобы ваша работа не вошла в их категорию, в мудборде не должно быть:
Перечисленные факторы мешают полноценному восприятию всего изображения, поэтому получившаяся группа картинок будет смотреться несуразно. Любая композиция должна иметь логический центр и быть сбалансированной: тогда ее посыл станет понятным.
Где можно создать мудборд? Топ-5 программ
Перед тем как делать мудборд, нужно выбрать программу для его создания. Можно, конечно, ограничиться стандартным Paint, но возможности в нем урезаны (банально – нельзя редактировать слои, они там отсутствуют как явление).
Если на покупку Photoshop вы еще не решились, то воспользуйтесь одним из предложенных сервисов:
Перечисленные сервисы создавались специально для сборки мудбордов, поэтому работать в них будет проще, чем в других фоторедакторах (особенно людям без опыта с последними). Авторы ПО уже собрали все необходимые инструменты, остается лишь правильно их использовать.
Тут же можно обратиться к галереям работ других пользователей, чтобы почерпнуть немного вдохновения или интересных «фишек». Единственный нюанс – часть из них практически бесполезна при отсутствии подписки, а ежемесячный платеж неоправданно высокий.
Как работать с редакторами изображений
Итак, конкретную задачу вы поставили: «доска настроения» создается для определенного бренда (продукта, сайта, мероприятия, проекта…).Теперь:
Постарайтесь превратить творческий процесс в небольшое развлечение и подходите к нему с хорошим настроением. Так вы начнете получать удовольствие от самого процесса. Расслабьтесь, и вы сможете поймать нужную «волну».
Примеры удачных мудбордов
Если вы до сих пор не до конца понимаете, по какому принципу отбирать изображения и как их располагать, просто взгляните на несколько удачных примеров мудбордов.
Начнем с «доски настроения» для профессиональной фотосьемки. Что мы видим? Заказчик подобрал несколько поз, вариантов одежды и заднего плана, а затем объединил их в один коллаж и добавил примечания. Конечно, длинный текст не всегда подходит для мудбордов, но здесь его использование оправдано. Посмотрев на предложенные картинки, фотограф моментально поймет, как лучше выполнить заказ.
Проектирование интерьера квартиры или дома – дело тонкое. Чтобы избежать большого разбега в цветах и стилистиках комнат, можно определить общее «настроение» и отобразить его в коллаже. Ниже – пример создания мудборда для спальни. На нем наглядно показаны цвета, которые будут использоваться в текстиле и интерьере, текстуры (в этом случае – дерево темных пород) и общая стилистика.
При формировании айдентики компании создается брендбук – он имеет много схожих черт с мудбордом и напоминает усложненную версию последнего. В брендбуках отображается корпоративный стиль: какие цвета, начертания, фигуры и паттерны будут использоваться для продуктов или дизайна торговых точек.
Ниже – наглядный пример, на котором четко прослеживаются схожие с мудбордами черты. Не забывайте о главном отличии: брендбуки содержат больше информации и создаются с нуля, мудборды – имеют «урезанный» формат и представляют собой сборку из общедоступных картинок. Впрочем, мудборд какого-нибудь интернет-магазина может быть и в такой форме.
Обратите внимание: все три изображения смотрятся как единая композиция, в них ничего не «выбивается», не лезет на передний план и не перебивает другие элементы.
Резюме
Подводя итоги, еще раз определим качества, присущие продуманному мудборду:
Если даже для коллажа идей не набирается, значит, пора отправляться на их поиски. Вы можете пролистать журнал или посмотреть фильм, подцепив несколько задумок из них. Прогуляйтесь с камерой и сделайте несколько снимков. Или обратитесь к сайтам для художников, фотографов и дизайнеров – посмотрите чужие работы, изучите доступные палитры и паттерны, посоветуйтесь с коллегами.
Найти идеи помогут фотостоки: это самый подходящий вариант. Выбирайте интересующую категорию, цветовую гамму и рассматривайте тысячи предложенных изображений: пара-тройка из них точно натолкнут вас на верные мысли. Вдохновить могут даже аккаунты в Instagram или лента Pinterest – так вы проведете время в социальных сетях с пользой.
Конечный вариант дизайна не обязан становиться точной копией мудборда, но должен перенять от него характерные линии, движения и оттенки. Если на вашем коллаже нарисован огонь – не пытайтесь впихнуть его изображение во все уголки сайта, для которого создается дизайн-проект. Вы можете оставить оранжево-красные цвета, типичные для пламени изгибы и блики.
Мудборд. Пустой тренд или эффективный инструмент для создания сайта?
Вы — компания, которая хочет обновить свой сайт и ищет для этого подрядчиков. Но как подрядная команда разработчиков поймет, каким вы видите результат? Как наемные дизайнеры смогут отразить ценность фирмы, ее айдентику и бренд, не работая там и дня? Для решения такой задачи подойдет мудборд.
В дословном переводе с английского мудборд звучит как «доска настроения». Если подбирать термин на русский манер, больше всего подойдет слово «коллаж». На первый взгляд, ничего серьезного. Как «доска настроения» может помочь специалисту в выполнении задачи? На самом деле, помочь может, и даже очень эффективно.
Мудборд содержит в себе образцы тех элементов, которые заказчик хочет видеть на сайте: цвет, шрифт, стиль, референсы. Он отображает основную идею и концепцию, подходящую к проекту, и может выглядеть по-разному: в виде реальной доски, коллажа, стикеров с референсами или в виде презентации.
Промежуточно резюмируем: мудборд — это инструмент, который отражает основные идеи и элементы по проекту. Он помогает дизайнеру и клиенту сразу попасть на одну волну и определиться с желаемым результатом наиболее детально, тем самым оптимизируя процесс взаимодействия. Подготовительные обсуждения ускоряются и позволяют дизайнерам раньше приступить к работе и, как следствие, быстрее передать проект разработчикам для запуска сайта.
На первом этапе происходит знакомство с клиентом и его проектом. Здесь дизайнер собирает основные вводные у заказчика, определяет вектор работы и концепцию будущего сайта. Это важный процесс, от итогов которого зачастую зависит все дальнейшее общение. Если брифинг пройдет плохо, дизайнер не поймет задачу, а у клиента сложится не лучшее представление о команде. Если же он проведен хорошо, это поможет избежать множества проблем на следующих этапах и ускорить рабочий процесс.
На брифингах обычно обсуждаются следующие моменты:
цели и задачи проекта;
кто целевая аудитория сайта;
можно ли отходить от фирменного стиля;
какое настроение лучше задать дизайн-концепции;
как вписать настроение в сложившуюся айдентику клиента;
какие сайты нравятся клиенту и почему;
На втором этапе происходит самое интересное: подготовка мудборда. Здесь дизайнеры определяются с концептуальной идеей, а после подбирают цвета, шрифты, прорабатывают стилистику иконок, думают о вариантах применения анимации на будущем сайте клиента и десятках других фишек.
Кстати, при выборе цвета будущего сайта есть два варианта развития событий:
если у клиента есть сложившийся фирменный стиль, то дизайнеры берут его в работу, адаптируя цвета айдентики заказчика под веб (производится мелкая настройка контраста и яркости);
если же у клиента нет фирменного стиля, отдел дизайна предлагает цвета, которые на их взгляд подходят клиенту и его проекту.
Детали определяются не только для главной, но и для одной из внутренних страниц сайта, чтобы как можно точнее попасть в пожелания клиента.
Если проект обширный и у клиента нет четкого видения своего будущего сайта, наши специалисты готовят бенчмаркинг. Это сравнительный анализ, в котором собраны исследования по наиболее частым трендам в дизайне сайтов со ссылками на информацию. Так клиент будет иметь представление о вариациях и сможет на основе сравнения выделить, что ему нравится, а что не нравится.
На заключительном третьем этапе команда презентует клиенту готовый мудборд. Заказчик, в свою очередь, дает детальную обратную связь о предложенных решениях. Дальше дизайнеры используют мудборд как основу для составления дизайн-концепции, которую также согласовывают с клиентом и передают разработчикам, чтобы те воплотили все смелые идеи дизайнера и заказчика в цифровую реальность.
Первое, о чем обязательно стоит упомянуть, это базовый инструмент для построения доски. В команде Uplab дизайнеры составляют мудборды в программе Figma. Удобный онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени.
В дизайне особенно важно много практиковаться и развивать насмотренность. Опыт и наблюдение за тем, какие появляются технологии, какие существуют тренды, прокачивают дизайнера и расширяют идейный кругозор. Следующие инструменты помогут в этом.
Платформа для тренировки насмотренности и поиска вдохновения. Это одно из крупнейших онлайн-сообществ, где собираются дизайнеры и делятся своими проектами, получают лайки, подписчиков и отзывы. На сервисе можно найти работы графических дизайнеров, иллюстраторов, веб-дизайнеров и 3D-визуализаторов.
Это интернет-сайт конкурса профессиональных веб-дизайнеров и разработчиков, на котором собраны тысячи лучших работ профессионалов со всего мира. Он может стать еще одним местом для поиска вдохновения по графике.
Хороший ресурс для поиска референсов по UI-дизайну. Это удобная коллекция сайтов, которая постоянно пополняется. Если дизайнер ищет что-то конкретное, здесь есть функция разделения коллекций по стилю, типу, теме и платформе.
Это галерея лучших главных страниц сайтов, собранная со всего интернета. Для удобства навигации на сайте есть поиск и специальные теги, которые проставлены у каждого сайта. Так, если вам интересны сайты с каким-то определенным типом главных страниц, вы можете либо вбить это в поиске, либо кликнуть по подходящему тегу.
Каталог веб-дизайна, проект дизайнерского бюро Division Binaural. Этот сайт служит источником вдохновения для дизайнеров-разработчиков и энтузиастов HTML. В нем собраны концепции сайтов с уклоном в модернизм и простоту.
Вам наверняка известен принцип Парето, согласно которому 20% усилий дают 80% результата. Этап визуальной коммуникации через мудборд — это и есть 20% оптимальных усилий. Именно поэтому работа с мудбордом позволяет при наименьших временных затратах получить максимально эффективный результат:
Что такое мудборды и зачем они дизайнеру
Оказывается, любая (почти) подборка картинок и красивых фоток с сайтов — это крутой инструмент в руках дизайнера.
Странное словечко. А это точно не ругательство?
Нет. Мудборд — это «доска настроения» (от англ. mood board). Так называют презентацию, собранную из фотографий, иллюстраций, паттернов, слоганов, шрифтов и цветовых схем. Она создаётся для будущего дизайн-проекта и показывает, каким будет дизайн: серьёзным или весёлым, элитарным или демократичным, какие образы возьмут за основу, как будут сочетаться цвета и какой будет типографика.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
И как выглядит эта презентация? Для неё тоже нужен PowerPoint?
Мудборд — это презентация в виде коллажа. Раньше для составления пришлось бы вырезать фото из журналов и приклеивать на доску. Сейчас всё проще: берут картинки из интернета и совмещают в любом графическом редакторе. Получается такая штука:
Но это же лишняя работа! Обязательно делать эти коллажи?
Нет, использовать мудборды не обязательно. Но они здорово облегчают работу с проектом. Чтобы сделать несколько разных макетов интерфейса или вариантов фирменного стиля, нужна уйма времени. Поэтому с концепцией лучше определиться заранее. Плюс мудбордов в том, что их можно собрать относительно быстро.
Объяснить что-то на словах и решить, что взять за основу будущего проекта, подчас намного сложнее, чем сделать это с помощью нескольких картинок и паттернов в мудборде. Эта быстрая презентация особенно важна при общении дизайнера с заказчиком и позволяет им проще понять друг друга.
Круто! Собираем в кучу красивые картинки отовсюду и идём к заказчику?
Мудборд — это не просто коллаж, в котором собраны красивые картинки. В первую очередь это визуальные элементы, подходящие к конкретному проекту. Поэтому собрать заранее сотню и раздавать их заказчикам — плохая идея. В мудборде должны быть акцентированы основные идеи, которые будут отражены в дизайне.
Ещё одна важная характеристика мудборда — это его целостность. Всё должно быть подчинено одному настроению: чтобы при взгляде на картинки было сразу понятно, какой это дизайн, для какой аудитории и какой месседж в себе несёт.
А целостность — это как? Картинки должны красиво смотреться вместе?
Не совсем. Даже если фотография грозовых туч симпатично смотрится рядом с изображением солнечного неба, нельзя сочетать элементы, кардинально разные по смыслу и настроению, они не должны противоречить друг другу. Это дезориентирует: ни клиенту, ни самому автору мудборда в итоге непонятно, будет ли дизайн солнечным или мрачным.
По той же причине в мудбордах стараются избегать слишком сложных образов, которые могут быть непонятны клиенту. Скажем, портрет Наполеона Бонапарта в мудборд вставлять бессмысленно — исторические личности вызывают сложные ассоциации, у разных людей они будут разными. Для понимания проекта эти образы не несут никакой пользы.
А если сделать подписи, чтобы образы стали понятнее?
Длинные пояснения точно не нужны. Задача мудборда — не рассказать о дизайне, а показать его в картинках. Но какой-то короткий слоган может быть полезен: для лучшего понимания идеи или просто для демонстрации типографики. Например, вот так: