Мудборд для велосипедного приложения: 10 шагов в Pixso

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

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

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

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

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

Зачем нужен мудборд?

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

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

Как сделать мудборд за 10 шагов

1. Определите направление

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

2. Соберите имеющиеся материалы

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

3. Соберите изображения для вдохновения

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

4. Добавьте движение и звук, если они нужны

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

5. Выберите шрифты и цвета

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

6. Упорядочьте идеи

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

7. Оставьте место для новых идей

Вне утверждённого направления выделите область «Изучить позже». Добавляйте референсы, когда исследование или тестирование ставит конкретный вопрос, но не меняйте согласованную доску молча при появлении каждой модной картинки. Фиксируйте, что изменилось и почему.

8. Объясните замысел

Рядом с каждой выбранной группой напишите короткую причину выбора. «Простая линия маршрута, чтобы карту можно было быстро прочитать» полезнее, чем «современно». Уточняйте, какие элементы служат вдохновением, а какие предлагаются как правила: референс чужого продукта не даёт разрешения копировать его интерфейс.

9. Обсудите доску с командой

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

10. Получите обратную связь

Задавайте конкретные вопросы: «Какие два референса лучше всего передают спокойный маршрут?», «С каким сочетанием цветов маршрут хорошо виден?», «Что не соответствует характеру продукта?» Сохраните ответы рядом с доской. Неопределённое одобрение не объясняет дизайнеру, что нужно перенести на следующий экран.

Итоги

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