Собака Павлова
Сто шпаргалок Аналитика Как использовать mood board в дизайне интерфейсов

Как использовать mood board в дизайне интерфейсов

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

#мудборд #дизайн интерфейсов #референсы

Три главных предмета в фокусе внимания

  1. Паттерны интерфейса

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

  2. Конкретные решения

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

  3. Поиск визуального языка

    В интерфейсном дизайне — не главное, но все равно какой-то стиль должен быть.

5 советов,
как делать хорошо

  1. Собирайте библиотеку скриншотов

    Пополняйте, развивайте и используйте в разных проектах. Структурируйте по разным параметрам: стилевые решения, паттерны, примеры из конкретной отрасли и т.д.

  2. Комментируйте

    Явно пропишите, о чем этот конкретный скриншот, что тут стоит обсудить и на что обратить внимание. Часто это зависит от конкретной задачи, а не от самого скриншота.

  3. Соотносите мудборд со своими возможностями

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

  4. Давайте людям время

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

  5. Обсуждайте детали

    Если заказчик ткнул пальцем в скриншот и сказал «мне тут нравится таблица», то значит именно таблицу нужно брать, как референс. Часто бывает наоборот, копируют общий стиль, забивая на детали. И наоборот, если комментарий слишком общий, то нужно уточнить, что конкретно понравилось.

Например

M-Line

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

ELMA-бот

Использовали мудборд для обсуждения интерфейсных паттернов создания чат-ботов.

Хороший образец

Расположите референсы по разным шкалам: от плотного к воздушному, от темного к светлому и т.д.

Универсальный мудборд

Так делать не надо

Сделать мудборд для галочки без обсуждения с командой.

Инструменты

Miro

для обсуждения и комментирования деталей

Библиотека скриншотов

чтобы не искать референсы каждый раз заново

Программа для скриншотов

пополнять библиотеку в любой подходящий момент

Поиск в Гугле по скриншоту

как ни странно, это тоже работает

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

Ольга Павлова, директор по развитию «Собаки Павловой»

Другие шпаргалки

Ищете подрядчика или команду?

Давайте обсудим вашу задачу.

Хотите у нас научиться?

1000+ упражнений по дизайну интерфейсов.