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

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

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

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

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

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

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

Этапы работы с мудбордом

Этап 1. Брифинг

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

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

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

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

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

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

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

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

  • какие сайты категорически не нравятся и чем именно.

Этап 2. Подготовка мудборда

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

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

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

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

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

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

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

Этап 3. Презентация

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

Полезные инструменты для работы с мудбордом

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

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

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

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

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

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

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

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

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

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

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

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

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

Что получаем в итоге?

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

  • заказчик получает удобную визуализацию;

  • дизайн отвечает ожиданиям;

  • дизайнер получает расположение заказчика;

  • обе стороны экономят время.


1818
4 комментария

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

3

Громкий заголовок или просто заезженная тема?!) О технике мудбордов рассказывают на многих отечественных дизайн-курсах минимум последние лет 6. Думаю на западе вообще просто улыбнутся от заявленного.

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

Помимо указанных в статье сервисов есть еще Weje. Помимо построения мудборда для вдохновения, в сервисе можно визуализировать структуру сайта и проектировать страницы.
Пример создания мудборда: https://app.weje.io/b/-Mn0o9RghXCb5e0XmHYr/4XlrmMwJHGbzNXjQfGDUYWt6ZJI2