Цифровые продукты не рождаются из воздуха по щелчку — их планируют, визуализируют в макете и только потом собирают в рабочую версию. В этом процессе постоянно всплывают понятия «вайрфрейм», «мокап», «прототип» — у них похожий смысл, поэтому их легко спутать.
Чтобы разобраться, мы поговорили с UX/UI-дизайнером Олей Черненькой. И по ее видению составили Q&A-гайд, который объяснит разницу между этими понятиями.
Зачем нужны макеты?
Дизайн-процесс — штука гибкая и зависит от сложности продукта, размера команды, которая над ним работает, и сроков. Я могу рассказать только то, что вижу со своей позиции — дизайнера-фрилансера, который сам отвечает за этапы подготовки финальной версии продукта.
С макета начинается разработка любого веб-продукта. Он демонстрирует, что, где и как будет расположено, какого цвета будут кнопки и главное — как все это будет работать.
В UX-дизайне есть несколько видов макетов: вайрфрейм, мокап и прототип. Они показывают, как будет выглядеть будущий продукт с трех точек зрения — структуры, визуальной концепции и функциональности соответственно. Их разрабатывают последовательно.
Если создаешь очень простой продукт с единственным возможным пользовательским сценарием (например, лендинг), можно ограничиться только мокапом или вайрфреймом + мокапом. Но в остальных случаях проектирование проходит все три стадии.
Что такое вайрфрейм?
Вайрфрейм — это грубый набросок структуры продукта. Он позволяет быстро зафиксировать идею того, как все будет устроено, и не требует большого количества времени на отрисовку. По сути, это ориентир для команды, схема продукта — структура, на которую потом будут наращивать «мясо».
Чтобы сделать вайрфрейм, нужно знать цель и целевую аудиторию продукта, его конкурентов. Для простых проектов этого будет достаточно, а для сложных — понадобится техническое задание со списком необходимых функций.
Вайрфрейм — это просто формат отображения информации. Можно сделать вайрфрейм для пути пользователя, для одной или всех существующих страниц. Причем степень детализации может быть разной:
— низкодетализированный вайрфрейм можно сделать даже на первом брейншторме с командой, набросав быстый скетч от руки. Но в этом случае без дополнительной презентации разобраться, что к чему, не сможет никто, кроме автора вайрфрейма.
Источник: проект Эдиты Яблонска, dribbble.com
— высокодетализированный вайрфрейм — это уже более подробный план, с подписями-пояснениями, что значит каждый элемент. Такой вайрфрейм уже можно показывать клиенту, и дополнительная презентация не нужна.
Источник: проект Адама Калина, dribbble.com
Время создания: низкодетализированный можно нарисовать за несколько минут, высокодетализированный — за 1-2 дня.
Где создается: для низкой детализации достаточно бумаги и карандаша, для высокой — любого графического или векторного редактора (Sketch, Figma).
Что такое мокап?
Мокап — это дизайн-концепция продукта. Здесь упор идет на визуальную часть: мы нанизываем дизайн на утвержденную структуру (вайрфрейм). Мокап нужен для того, чтобы утвердить дизайн продукта с клиентом или провести фокус-группу для выбора лучшего варианта дизайна.
Мокап можно презентовать как статичный макет в формате JPG или как макет, сделанный с помощью InVision, Sketch Cloud, Figma Preview Mode.
Эти инструменты позволяют фиксировать элементы (например, хедер) при скролле и смотреть макет через браузер, что придает ему больше реалистичности. Еще с помощью программ можно показать, как дизайн будет выглядеть на носителе, и добавить анимацию — так картинка получается более сочной. Обычно именно такие мокапы презентуют клиенту и выкладывают на дрибббле или бихансе.
Дизайнер может использовать для мокапа иллюстрации, близкие по стилю, а после утверждения с клиентом — обратиться к иллюстратору или подключить его в процессе работы и утверждать мокап с готовым вижуалом. Простую анимацию можно сделать своими силами, я использую для этого программу Principle. Для более сложной — придется привлечь моушн-дизайнера.
Источник: проект Tran Mau Tri Tam, dribbble.com
Время создания: первая страница занимает 2-4 дня. Дальше — когда уже знаешь, в какой стилистике работать — процесс идет быстрее.
Где создается: Sketch, Figma, Adobe XD.
Что такое прототип?
Прототип — это интерактивная модель продукта. В отличие от вайрфрейма и мокапа, он кликабельный. Прототип показывает не только как будет выглядеть конечный продукт, но и как он будет работать.
Источник: проект Арио Памунгкаса, dribbble.com
Прототип нужен, чтобы протестировать функциональность продукта и исправить ошибки, прежде чем отдавать проект в разработку.
Время создания: если дизайн-концепция готова, остается только пролинковать страницы — на это уходит 1-2 дня. Иногда этап мокапа пропускают и делают прототип на основе детализированных вайрфреймов.
Где создается: Sketch, Figma, Adobe XD, Invision.
Лайф/тайм-сейверы в разработке макетов
#1. Задавай вопросы на старте. Если на этапе постановки задачи понимаешь, что чего-то не понимаешь, — не стесняйся, спрашивай. Лучше уточнить в самом начале, чем потратить время, сделать неправильно — и вернуться в исходную точку.
#2. Общайся с командой в процессе работы. Не закрывайся — держи коллег по проекту в курсе, показывай сырые макеты, обсуждай спорные моменты. Так будет меньше шансов отклониться от общего видения продукта.
#3. Думай о цели макета. На каждом этапе она своя. Цель вайрфрейма, например, — быстро (и это ключевое слово) зафиксировать идею. Не трать время на отрисовку кнопочек, красота здесь не так важна. Плюс, чем дольше работаешь над каким-то решением (даже если оно не самое удачное), тем сильнее к нему привязываешься — и тем сложнее будет от него отказаться.