Вайрфрейм, макет и прототип: в чём отличия
Основы3 минРедакция Innovialabs
Коротко
Вайрфрейм — серая схема структуры экрана, макет (мокап) — тот же экран в финальном визуале, а прототип — кликабельная версия, которая имитирует работу продукта. Они отвечают на разные вопросы: что где стоит, как выглядит и как себя ведёт.
Коротко о главном
- Вайрфрейм — схема низкой детализации: блоки, заглушки и черновой текст. Отвечает на вопрос «что на экране и в каком порядке?»
- Макет (мокап) — статичный детальный экран с реальными цветами, шрифтами, изображениями и текстами. Отвечает на вопрос «как это будет выглядеть?»
- Прототип — интерактивная модель, в которой можно нажимать, переходить между экранами и видеть анимации. Отвечает на вопрос «как это будет работать?»
Это не конкурирующие варианты, а обычно шаги одного процесса: сначала структура, затем визуал, затем поведение.
Как выглядит каждый
Вайрфрейм карточки товара может быть таким:
+--------------------------------------+
| [лого] [меню] [корзина] |
+--------------------------------------+
| [ фото ] Название товара |
| [ ] Цена |
| [ ] [ В корзину ] |
+--------------------------------------+
| Описание текст текст текст текст |
| Отзывы ----------------------------- |
+--------------------------------------+
Ни цвета, ни настоящего фото, ни бренда. Суть — расположение и приоритеты.
Макет той же страницы использует финальную палитру и типографику, реальное фото товара, настоящие цены и подписи кнопок, иконки и отступы по сетке. Он выглядит как скриншот готового продукта, но ничего не работает.
Прототип связывает этот макет с другими экранами: нажатие «В корзину» открывает корзину, меню выезжает, галерея листается. Прототип можно собрать и из вайрфреймов, если нужно проверить только сценарий.
Сравнительная таблица
| Вайрфрейм | Макет | Прототип | |
|---|---|---|---|
| Детализация | Низкая | Высокая (визуальная) | От низкой до высокой (интерактивная) |
| Главная цель | Структура, приоритет контента, сценарий | Визуальный стиль, бренд, детали | Поведение, переходы, тестирование с пользователями |
| Интерактивность | Нет или минимальная | Нет | Кликабельный |
| Время на создание | Быстро | Дольше | Зависит от глубины |
| Типичные инструменты | Бумага, доска, Figma, Balsamiq | Figma, Sketch, Adobe XD | Прототипирование в Figma, ProtoPie, Framer, код |
| Этап проекта | Исследование, ранний UX | После согласования структуры | Перед разработкой, для тестов и демонстраций |
| Кто смотрит | Команда, заказчик | Заказчик, владельцы бренда, разработчики | Пользователи, заказчик, разработчики |
Что делать и когда
Делайте вайрфреймы, когда:
- решаете, какие блоки нужны странице и в каком порядке;
- команда спорит о содержании, а не о цветах;
- нужна быстрая обратная связь без обсуждения вкуса.
Делайте макеты, когда:
- структура согласована и стиль бренда определён;
- разработчикам нужны точные размеры, цвета и состояния;
- заказчику нужно утвердить визуальное направление.
Делайте прототип, когда:
- нужно провести юзабилити-тест до написания кода;
- сценарий состоит из нескольких шагов (оформление заказа, онбординг, бронирование) и его надо проверить целиком;
- взаимодействия нестандартные и их трудно описать словами;
- нужно убедительно показать идею инвесторам или руководству.
Практические советы
- Держите вайрфреймы серыми. Ранний цвет переводит обсуждение во вкусовщину.
- Используйте реальный контент как можно раньше. «Рыба» скрывает проблемы с длинными названиями, ценами и переводами.
- Не прототипируйте всё. Связывайте только экраны тестируемого сценария.
- Рисуйте в макетах все состояния: пустое, загрузка, ошибка, длинный текст, нет прав доступа.
- Понятно называйте версии, чтобы команда знала, какой файл утверждён.
Частые ошибки
- Показывать заказчику вайрфрейм, не объяснив, что он намеренно без стиля.
- Пропускать вайрфреймы на сложных экранах и несколько раз перерисовывать готовые макеты.
- Воспринимать прототип как готовый продукт и обещать, что «уже почти всё сделано».
- Делать детальный прототип, чтобы проверить только навигацию, когда хватило бы серого.