Мокап интерфейса
Мокап — это «фотография» будущего экрана. Он не заменяет прототип и не показывает, как продукт работает в движении, но прекрасно объясняет, как он будет выглядеть.
Когда мокап незаменим
- В презентациях стейкхолдерам и инвесторам.
- В маркетинговых материалах и магазинах приложений.
- В передаче конкретных экранов в разработку.
Что обычно включает
- Финальную типографику и цвета.
- Реальный или близкий к нему контент.
- Иконки, изображения, разные состояния.
- Размеры и отступы под сетку.
Когда применять и когда нет
Применять
- Когда нужно показать конкретный визуал, а не сценарий взаимодействия
- Для дизайн-ревью и согласования с заказчиками
- Для маркетинговых артефактов
Не применять
- На очень ранних этапах — мокап слишком «дорогой» и его жалко переделывать
- Для проверки сценариев и логики — здесь нужен прототип
Примеры применения
В маркетинг попросили скриншоты будущей фичи для презентации инвесторам. Команда дизайна готовит набор мокапов с детальным UI, реальными цифрами и сценариями. Это не интерактивный прототип, но именно для презентации он работает лучше: показывает, как продукт будет выглядеть, без отвлечения на интерактив.
Часто задаваемые вопросы
Это разные инструменты для разных задач. Мокап показывает, как выглядит. Прототип показывает, как работает. В большинстве серьёзных проектов используются оба: сначала прототип для согласования логики, потом мокап для финального вида.
Да, но в более компактной форме. Когда дизайн-система зрелая, разработчик уже знает, как выглядят базовые компоненты. Мокапы тогда показывают только нестандартные экраны и нюансы: новые состояния, отступы, конкретные комбинации компонентов.