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

Содержание

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

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

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

Веб-дизайн

19 марта 2021

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

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

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

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

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



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

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



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

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



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

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



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

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



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

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



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

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

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

Заключение


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

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

4 факта о дизайне и психологии, которые нужно знать

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

Веб-дизайн

28 мая 2021

Глассморфизм в пользовательских интерфейсах

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

Веб-дизайн

1 дек. 2020

Как улучшить юзабилити сайта с помощью анимации?

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

Веб-дизайн

26 июня 2020

что такое и для чего нужен в дизайнере — Как правильно собрать

ВРЕМЯ ПРОЧТЕНИЯ: 10 МИНУТ

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

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

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

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

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

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

Зачем он нужен

Собрать мудборд — это значит решить сразу пять ключевых задач при разработке фирменного стиля:

— Заложить основу будущего проекта. Чтобы создать новый фирменный стиль, недостаточно просто обладать навыками дизайнера и начать рисовать элементы. Важно понять, с какой стороны к нему подступиться, с чего начать. Собирая мудборд, визуализируя идеи для проекта, вы создадите фундамент, на который в дальнейшем сможете опираться;

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

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

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

— Сохранить идеи на будущее. Во время поиска визуальных идей вы просматриваете сотни референсов. Какие-то из них подойдут для текущего проекта, другие могут зацепить, но не вписываться в концепцию. Их вы можете оставить на будущее, сохранить у себя в Pinterest или на жёстком диске. Так вы не только можете придумать идею, которую воплотите на другом проекте, но и будете активно развивать свою насмотренность.

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

Подробнее

Как сделать мудборд

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

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

  1. Поиск подходящих фото и взаимосвязей между ними
  2. Ограничение палитры 3−4 цветами
  3. Отбор 8−10 лучших фото, передающих суть концепции
  4. Подбор шрифтов
  5. Работа с композицией

Поиск фото

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

Подсказка: используйте сервис sociation.org для поиска ассоциаций с темой проекта

Поиск взаимосвязей

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

Подсказка: сочетайте разные детали — вывески, людей, абстракцию.

Цветовая палитра

Ограничьте палитру 3–4 цветами. Один используйте для фона, остальные — для расстановки акцентов. Здорово, когда фоновый цвет — приглушённый, тогда другие смотрятся ярче.

Работая с цветом, ищите вдохновение в окружающих вас вещах: природе, архитектуре, иллюстрациях, фильмах.

Подсказка: для подборки оттенков используйте сервис colourpod. com

Отбор лучших изображений

Отберите картинки с ключевыми компонентами айдентики — цветом, шрифтом, фотостилем, графическими элементами. Достаточно 8-10 фото с самыми точными и яркими образами.

Подбор шрифтов

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

Композиция

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

Аналог или цифра

Не откроем Америку, сказав, что вся работа сейчас ведётся в digital. Но иногда бывает полезно вспомнить олдскульный вариант и собрать мудборд физически. Лучше всего для этого подходит техника коллажа (наложение изображений друг на друга в хаотичном порядке).

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

Так делают ребята из Materia 2.0

Цифровой мудборд тоже может не ограничиваться одними лишь изображениями. Сюда можно добавлять аудиофайлы, GIF-анимацию, видео. При этом цифровой формат гораздо эффективнее аналогового за счёт возможностей мгновенно поделиться им и коллективно редактировать «доску».

Как мы уже отметили, удобнее всего для сборки Pinterest. Но помимо этой площадки есть ещё несколько вариантов:

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

Miro — сервис, который используют многие удалённые команды, причём не только для сборки мудбордов, но и для mind mapping.

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

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

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

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

ТЕКСТ: РОМАН КОВАЛЕВ

Понравился материал? Поделись с друзьями или коллегами:

РЕКОМЕНДУЕМЫЕ СТАТЬИ

РЕКОМЕНДУЕМЫЕ СТАТЬИ

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

Проекты

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. Поделитесь своим мудбордом

Сейчас самое время поделиться мудбордом с вашей командой или клиентом.