Мудборд для дизайнера: что это и зачем нужен

Мудборд для дизайнера: что это и зачем нужен

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

Веб-дизайн

19 марта 2021

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

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

Что вы можете добавлять на свой мудборд?

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

Почему доска настроения важная для веб-дизайнера?

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

Мудборд передает смысл лучше, чем язык

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

Вовлекает клиента в процесс разработки на раннем этапе

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

Помогает сузить количество вариантов и сэкономить время

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

Вдохновляться и создавать

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

Как создать свой мудборд?

Раньше для создания доски настроения дизайнеру понадобилось бы несколько часов или дней, чтобы найти подходящие картинки и вырезать их из журналов. Сегодня, пожалуй, самый популярный способ не только найти тысячи примеров различных элементов дизайна, но и вдохновиться досками настроения других авторов помогает Pinterest, Behance, Dribbble и многие другие платформы.

Для качественного мудборда важно несколько правил:

1. На доске все должно быть подчинено одному настроению: при взгляде на все элементы мудборда должно быть сразу понятно, каким будет дизайн, для какой он аудитории и какой месседж в себе несёт.
2. Мудборд должен быть целостностным. Элементы мудборда не должны противоречить друг другу, иначе это будет дезориентировать и вас, и клиента.
3. Старайтесь избегать слишком сложных образов, которые могут быть непонятны клиенту. Например, не стоит включать изображения исторических личностей или перегружать доску креативом.

Заключение

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

Читайте другие статьи

Тренды веб-дизайна 2021

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

Веб-дизайн

15 дек. 2020

Одна из самых сложных профессий: продуктовый дизайнер

Кто такой продуктовый дизайнер, что входит в его должностные обязанности и почему это одна из самых сложных профессий в диджитал сфере?

Веб-дизайн

28 авг. 2020

Где веб-дизайнеру искать вдохновение?

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

Веб-дизайн

18 нояб. 2019

что это и как его сделать, примеры

Что такое мудборд

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

Мудборд помогает:

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

Что можно показать на мудборде

Цвета. Если палитра не задана изначально, демонстрация оттенков на мудборде поможет донести до заказчика, как будут передаваться ощущения и эмоции. 

Мудборд в песочных оттенках. Источник

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

Мудборд для фотосъемки свадьбы в винтажном стиле. Источник

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

Коллаж иллюстраций. Источник

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

Фрагмент мудборда со шрифтами. Источник

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

Принципы создания мудборда

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

Мудборд, вызывающий ассоциации с летом и морем. Источник

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

Мудборд для магазина косметики. Источник

Кто использует мудборды

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

Иллюстраторы. Они собирают «доски настроения», чтобы подготовить цветовую палитру будущего рисунка или всегда иметь перед глазами примеры вдохновляющего стиля. 

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

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

Дизайн-борд IKEA. Источник

На дизайн-бордах размещают не только базовые элементы интерьера (напольное покрытие, шторы, мебель, осветительные приборы), но и декор (текстиль, картины, вазы, статуэтки и т. д.).

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

Где можно сделать мудборд

На специальных сайтах. На Pinterest, Dribbble или Behance удобно искать фото, палитры и дизайн-работы и распределять по папкам, каждая из которых по сути является отдельным мудбордом. В Canva есть отдельный раздел с шаблонами для мудбордов, многие из которых бесплатные.

В графических редакторах. Мудборд можно собрать в Adobe Photoshop, Illustrator, InDesign, в Figma, Sketch, в программах для рисования Krita, SAI Paint Tool, MediBang Paint и любом другом приложении, работающем с графикой. «Доску настроения» можно составить из картинок вручную или скачать для мудборда специальный шаблон (мокап).

В офисных приложениях. Быстро соединить изображения и сделать к ним поясняющие надписи позволяют офисные программы Microsoft Word и PowerPoint.  

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

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

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

Make A Moodboard — бесплатное приложение, используемое ведущими креативщиками

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

Зарегистрируйтесь бесплатно

Определите концепцию вашего следующего проекта

Milanote — это идеальный инструмент для сбора вдохновения и организации вашего видения. Создавайте и делитесь красивыми мудбордами за считанные минуты.

Выберите из 3 миллионов встроенных изображений

Правильные изображения могут сломать или создать мудборд, и найти их — половина дела. Вот почему Milanote интегрируется с Pexels, чтобы дать вам мгновенный доступ к огромной библиотеке бесплатных профессиональных фотографий, которые вы можете перетаскивать на свои доски.

• Поиск по ключевому слову или выбор изображений, которые автоматически рекомендуются на основе содержания ваших досок.
• Загружайте собственные изображения с помощью простого интерфейса перетаскивания (Milanote поддерживает все распространенные форматы изображений, включая JPG, PNG, GIF, SVG и многие другие).

Мгновенно сохраняйте идеи из Интернета

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

• Интерфейс в один клик позволяет сохранять вдохновение за считанные секунды.
• Поддерживает сохранение изображений, ссылок, видео и текста.
• Оценка 4,8 из 5 звезд в магазине Google Chrome!

Установите приложение Milanote Web Clipper

Добавьте контент любого типа — наброски, файлы, видео, образцы цветов и т. д. . С Milanote вы можете легко добавлять видео, анимированные GIF-файлы, образцы цветов, PDF-файлы, файлы дизайна, шрифты и многое другое при создании мудборда.

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

Начните с шаблона или создайте собственный макет мудборда

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

• Выбирайте из более чем 100 бесплатных и простых в использовании шаблонов.
• Создавайте собственные шаблоны для сохранения любимых макетов.

Просмотрите шаблоны досок настроения

Поделитесь своими досками, чтобы получить отзывы и одобрение

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

• Вы полностью контролируете, кто может редактировать, комментировать или оставлять отзывы на ваших досках (по умолчанию все доски закрыты).
• Поделитесь ссылкой только для чтения на любую доску (для просмотра не требуется регистрация).
• Загрузите любую плату в формате PDF высокого качества для печати.

Добавляйте идеи и вдохновение на ходу

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

Заметки, фото и видео, снятые с помощью приложения Milanote для iPhone или Android, мгновенно добавляются на ваши доски. Приложение Milanote для iPad позволяет использовать все возможности Milanote в любом месте.

Загрузите приложение для iPhone или Android

Установите визуальное направление для вашего следующего дизайнерского проекта.

Шаблон доски настроения для графического дизайна

Создайте концепцию своей следующей фотосессии.

Шаблон доски настроения для фотографий

Передайте ощущение внутреннего пространства.

Шаблон доски настроения по дизайну интерьера

Получите вдохновение для своего следующего иллюстративного проекта.

Иллюстративный шаблон мудборда

Соберите вдохновение для своей предстоящей коллекции.

Fashion Moodboard Template

Creative professionals from these companies create mood boards in Milanote

Website Moodboard — Free Template & Example

Home

Шаблоны

Доски настроения

Используйте этот шаблон

Как использовать этот шаблон

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

1. Начните с пустого шаблона

Шаблон Website Moodboard содержит прекрасно составленные заполнители для изображений, видео, образцов цвета и заметок. Просто перетащите свой контент на доску, чтобы создать доску настроения за считанные минуты.

Как это сделать в Milanote

1. Создайте новую доску настроения.

   Создать новую доску

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

2. Выберите шаблон  Доска настроения веб-сайта  .

   Выберите шаблон

   Каждая новая доска дает вам возможность начать с красивого шаблона.

2. Соберите существующие материалы

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

Как это сделать в Milanote

1. Перетащите файлы с вашего компьютера.

   Загрузить файл или документ

   Нажмите кнопку «Загрузить» или просто перетащите файл на доску. Вы можете добавлять изображения, логотипы, документы, видео, аудио и многое другое.

3. Добавьте вдохновляющие ссылки

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

Как это сделать в Milanote

1. Используйте встроенную библиотеку изображений.

   Используйте встроенную библиотеку изображений

   Найдите более 3 миллионов красивых бесплатных фотографий, а затем перетащите изображения прямо на доску. Разработано Pexels.

2. Установите Milanote Web Clipper

3. Сохраняйте изображения с других веб-сайтов прямо на доску.

   Сохранение контента из Интернета

   При установленном Web Clipper наведите курсор на изображение (или выделите текст), нажмите «Сохранить», затем выберите место назначения в Milanote. Вернитесь на свою доску и найдите содержимое в столбце «Несортированное» справа.

4. Добавьте примеры движения

С помощью интерактивной доски настроения можно встроить примеры, показывающие, как движение и анимацию можно использовать на вашем веб-сайте. Загрузите несколько анимированных GIF-файлов с Giphy, видео с YouTube или даже аудио с Soundcloud, чтобы добавить динамики и глубины во внешний вид вашей доски.

Как это сделать в Milanote

1. Встроить видео или аудио Youtube в доску.

   Встраивание видео или звуковых дорожек Youtube в доску

   Скопируйте ссылку с Youtube, Vimeo, Soundcloud или многих других сервисов. Перетащите карточку ссылки на свою доску, вставьте ссылку и нажмите Enter.

5. Добавьте цвет и шрифты

То, как вы используете цвета и шрифты, может оказать огромное влияние на дизайн вашего сайта. Оба элемента способствуют тому, чтобы знак вашего веб-сайта был простым в использовании и запоминающимся. Цвет особенно может быть отличным способом выразить особое чувство, стиль или энергию. Как сказал художник Йоханнес Иттен: «Цвет — это жизнь». Это также идеальное время, чтобы начать собирать вдохновляющие шрифты, которые передают индивидуальность, которую вы хотите создать.

Как это сделать в Milanote

1. Добавьте образцы цвета на доску.

   Добавление образца цвета

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

6. Поделитесь своим мудбордом

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

Как это сделать в Milanote

1. Пригласите других для редактирования вашей доски.