Вайрфрейм → Мокап → Прототип

Вайрфрейм

Это низко детализированное представление дизайна. Более подробно, вайрфрейм - это организация полного функционала конечного продукта, в виде структуры с представлением элементов интерфейса и навигации, их взаимодействия друг с другом.

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

Правила построения вайрфрейма

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

Мокап

Это средне детализированное представление дизайна. Мокап показывает путь погружения пользователя в продукт и цепочку шагов для совершения целевого действия. В основном используется копирайтерами и основывается с точки зрения маркетинга и продаж.

Правила построения мокапа

Визуализация контента
Базовая функциональность
Полная информационная структура
Создается быстрее прототипа

Прототип

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

Правила построения прототипа

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

Итог

Если рассмотреть все этапы, то это будет выглядеть следующим образом:

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