bv

Что такое мудборд. И как его используют при разработке сайта

Что такое мудборд. И как его используют при разработке сайта

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

 

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

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

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

Рис.1. Пример мудобрда. Здесь указаны основные цвета, шрифты, стиль изображений.

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

 

Для чего делать мудборд

Мудборд применяется как альтернатива традиционному ТЗ или его дополнение. Для составления хватает базового знания графических редакторов. Инструмент доступен любому пользователю компьютера или смартфона. Заказчик определяется со своими предпочтениями и демонстрирует их дизайнеру. Стороны общаются на одном языке. Объяснить то же самое словами намного сложнее.

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

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

 

Почему стоит начать с мудборда

  • Сохраняются идеи. Во время наброски коллажа появляются интересные концепты, не относящиеся к текущему проекту. Они остаются на компьютере, и их можно использовать в будущем. Ничего не потеряется;
  • Упрощается диалог с заказчиком. Правильно подобранные изображения красноречивее и понятнее слов. В такой форме проще передать свои мысли и найти общий язык со специалистом;
  • Правки вносятся на старте. Мудборд выступает визуальным ориентиром. Он сводит недопонимания к минимуму. Замечания и предложения поступают еще до начала разработки;
  • Придерживается одна концепция. Когда над проектом трудится команда, некоторые задумки противоречат друг другу. Приходится на ходу вносить изменения. Мудборд не позволяет отойти от намеченного курса;
  • Ускоряется работа над проектом. Коллаж отображает настроения заказчика и будущего сайта. Дизайнер избегает творческого кризиса и сразу попадает в цель. Отбрасываются лишние макеты и итерации.

 

Из чего состоит мудборд

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

1.Цветовые палитры

Цвета, оттенки и градации определяют настроение сайта. Составление коллажа начинается с них. Для этого используют генераторы палитр, в которых уже подобраны удачные сочетания. Сервисов много, и большинство из них бесплатны. Если понравился цвет с картинки, то его копируют с помощью пипетки в Фотошопе. Готовые блоки размещают на холсте и выбирают лучший вариант.

2.Иллюстрации и фотографии

Сильные ассоциации вызывают иллюстрации и снимки. В коллаж включают материалы, четко передающие идею проекта: изображения людей и их взаимодействия, пейзажи, растения, интерьеры. Их берут с бесплатных фотостоков (Stock up, Freepik, Gratisography, Pixabay, Burst, Life Of Pix, Superfamous, Unsplash, Pexels, Reshot, Stocksnap) или из поисковой выдачи по картинке. Наличие вотермарка не критично, потому что мудборд – это черновик.

3.Текстуры и паттерны

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

4.Цитаты и шрифты

Основой мудборда может стать логотип или слоган. Выбирается фраза, и вокруг нее строится коллаж. Например, если есть слово «спокойствие», то вставляются соответствующие цвета и изображения. Аналогично с логотипом. Также важно подобрать правильные шрифты. Одни подойдут для рекламы премиальных автомобилей, а другие – для юмористического ресурса.

 

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

Мудборд – это аналог технического задания. У него схожий принцип разработки и внедрения. Работа проводится три этапа:

1. Брифинг

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

2. Подготовка

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

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

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

 

Полезные инструменты и сервисы

Сделать мудборд можно в любом графическом редакторе. Подойдет даже Paint. Но его функционал ограничен. Все задумки реализовать не получится. Оптимальным вариантом является, например, Photoshop. Но его лицензия не из дешевых. И не все пользователи умеют в нем работать. Тогда на помощь приходят специальные сервисы:

  • Moodboard. Бесплатный ресурс. Коллажи собираются с нуля или из готовых шаблонов. Результатом можно поделиться без сохранения;
  • Sampleboard. Подписка обойдется в 12 долларов в месяц. Функция импорта в документы и презентации. Большой выбор элементов и источников. Есть пробный период;
  • Miro. Основные инструменты доступные бесплатно, за дополнительные придется заплатить 8 или 16 долларов в месяц. Совместная работа над проектом. До трех досок одновременно. Много инструментов для редактирования;
  • Figma. Бесплатный сервис для дизайнеров. По возможностям не уступает Фотошопу. Работает из браузера. Командная работа над проектом в режиме реального времени. Удобно делать мудборд, удаленно показывать его заказчику и сразу вносить правки;
  • Dribbble. Платформа, где дизайнеры со всего мира делятся своими работами. Получают отзывы, лайки, комментарии, подписчиков. Сюда заходят в поисках вдохновения и опыта:
  • Awwwards. Сайт-конкурс для профессиональных дизайнеров и разработчиков. Собраны тысячи проектов из разных стран. Здесь находят примеры оформлений;
  • Siteinspire. Сервис с огромной коллекцией дизайна интерфейсов. Есть разделения по стилю, теме, типу и платформе;
  • Land-Book. Галерея главных страниц лучших сайтов. Нужная тема находится по тегам. Это еще одно место, куда приходят за примерами.

 

Заключение

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

Нужны клиенты из интернета? Команда Белой Вороны найдет решение. Поможем выйти в топ и опередить конкурентов. Подберем вариант под Ваш бюджет. Позвоните нам или оставьте заявку на сайте. Будем рады сотрудничать!

Если Вам понравилась статья - ставим лайк и делимся ей в социальных сетях. Хотите получать больше полезных статей? Подпишитесь на рассылку. Раз в неделю пишем коротко про интернет-маркетинг.

Подпишитесь на наш блог

Вам также может понравиться