{"id":13505,"url":"\/distributions\/13505\/click?bit=1&hash=ca3734639136826288c9056e5c8fa03a05e87c4060ae84df200f2c90f5262470","title":"\u0412\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a? \u0410 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432 \u0438\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u0435 \u043a\u043e\u0434\u0430?","buttonText":"\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c","imageUuid":"f5f0e11f-fefd-52f5-8712-82164a59b7ce","isPaidAndBannersEnabled":false}
Дизайн
Uplab

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


0
4 комментария
Александр Хитро

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

Ответить
Развернуть ветку
Sergio Carlione

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

Ответить
Развернуть ветку
Дима Зеленый

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

Ответить
Развернуть ветку
Alex WeJe

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

Ответить
Развернуть ветку
Читать все 4 комментария
null