Не стыдно спросить: что такое вайрфрейм, мокап и прототип

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

Чтобы разобраться, мы поговорили с 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. Думай о цели макета. На каждом этапе она своя. Цель вайрфрейма, например, — быстро (и это ключевое слово) зафиксировать идею. Не трать время на отрисовку кнопочек, красота здесь не так важна. Плюс, чем дольше работаешь над каким-то решением (даже если оно не самое удачное), тем сильнее к нему привязываешься — и тем сложнее будет от него отказаться.