Прототип интерфейса
Прототипы экономят деньги тем, что сдвигают эксперименты до этапа разработки. Это работает почти всегда, и в этом смысле прототип — не «приятный артефакт дизайна», а инструмент управления риском.
По уровню детализации
- Low-fidelity — наброски на бумаге, серые блоки, без цветов. Цель — обсудить структуру и сценарии.
- Mid-fidelity — wireframes в Figma, без финального UI. Удобно тестировать поток.
- High-fidelity — почти настоящий макет с цветами, шрифтами и анимациями. Используется для тестов с пользователями и презентаций.
По интерактивности
- Статичные — просто экраны без переходов.
- Интерактивные — клики, состояния, иногда даже маленькие сценарии с условной логикой.
Когда применять и когда нет
Применять
- Перед любой крупной фичей или новым продуктом
- Для тестов юзабилити до разработки
- Для согласования с заказчиками и стейкхолдерами
Не применять
- Мелкие очевидные изменения, где прототип займёт больше времени, чем сама разработка
Примеры применения
Команда обсуждает «новый чек-аут». До прототипа спор длился неделями: каждый представлял что-то своё. Через два дня в Figma появляется интерактивный прототип с тремя альтернативами, на нём проводят короткие тесты юзабилити, и одна из версий явно выигрывает. Разработка получает понятный артефакт и точно знает, что именно строить — экономия времени на согласованиях в разы.
Часто задаваемые вопросы
Мокап — статичная высокодетализированная картинка экрана. Прототип — интерактивная модель, которую можно «тыкать». Часто высокодетализированный прототип внешне очень похож на мокап, но в нём работают переходы, состояния и базовая логика.
Самый распространённый сейчас — Figma. Также используют Sketch, Adobe XD, Penpot. Для черновиков нередко берут просто бумагу и карандаш — это быстро, и не возникает иллюзии «уже почти готово».