Мудборды в UX: как и зачем их использовать

Далее от лица автора

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

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

Зачем использовать мудборды в UX или UI-дизайне

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

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

• Мотивационный
• Энергичный
• Яркий

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

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

• Слова, характеризующие голос бренда
• Маркетинговые идеи или концепции убеждения
• Примеры интерактивного дизайна
• Вдохновляющие скриншоты дизайна других продуктов

В дальнейшем эту коллекцию можно использовать для создания руководства по визуальному стилю.

Более того, мудборды помогают команде:

• Генерировать идеи, когда они будут собирать источники дизайнерского вдохновения в одном месте
• Мгновенно отражать характер продукта
• Согласовывать интерпретации и будущие направления в дизайне

К тому же несколько человек могут совместно работать над ними как синхронно, так и асинхронно.

Когда создавать мудборды

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

*Define — объединение всех исследований, акцент на выявлении проблем пользователей и поиск возможностей для внедрения инноваций

**Ideate — мозговой штурм для создания множества безумных, креативных идей, направленных на решение неудовлетворённых потребностей пользователей, выявленных на этапе Define

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

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

Как создавать и использовать мудборды

Чтобы создать собственный мудборд, необходимо:

• Изучить все существующие материалы, которые имеют отношение к бренду или айдентике продукта
• Выбрать инструмент
• Выбрать настроение, которое необходимо передать
• Собрать визуальные материалы
• Упорядочить визуальные образы
• Поделиться ими с командой

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

1. Изучите существующие материалы

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

2. Выберите инструмент

Выберите инструмент для создания мудборда. Сделайте физическую или цифровую доску.

Физические доски

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

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

Цифровые инструменты

По сути, всё, что вам нужно, это инструмент, с помощью которого вы будете собирать и перемещать визуальные образы. Делайте это в любом инструменте для создания визуального дизайна, UI-дизайна и прототипов. Если вы планируете создавать мудборды вместе с командой, выберите инструмент, который поддерживает совместную работу. Сервисы для создания мудбордов, такие как Miro, Mural или FigJam, хорошо подходят для того, чтобы удалённо работать над мудбордами совместно с командой.

3. Выберите настроение

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

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

4. Соберите визуальные материалы

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

• Поиск в Google
• Социальные сети
• Pinterest, Behance или другие сервисы для поиска изображений
• Физические объекты, например, журналы, книги или личные артефакты

Собирая материалы, стремитесь к целостности. Хотя мудборд объединяет разнообразные форматы, подчините их одной теме, чтобы они передавали выбранное вами настроение. Не создавайте беспорядочный мудборд с противоречивыми материалами.

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

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

5. Упорядочите визуальные образы

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

6. Поделитесь мудбордом с командой

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

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

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

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

Заключение

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