Прототип и макет — разные этапы работы, и разница между ними простая: прототип показывает, как интерфейс работает, а макет — как он выглядит. Вайрфрейм — это статичная схема одного экрана, прототип — те же схемы, связанные переходами, макет — готовый цветной дизайн, а мокап — картинка, на которой этот дизайн показан, например, на экране телефона. Путаница в терминах стоит денег: если заказать макет до проверки логики, переделывать его придётся вместе с цветом, адаптивами и состояниями. Разбираемся, что есть что и в каком порядке это заказывать.
- Вайрфрейм — серая схема экрана: что где находится.
- Прототип — связанные вайрфреймы, по которым можно пройти сценарий.
- Макет — цветной дизайн экрана в айдентике бренда.
- Мокап — презентационная картинка макета на устройстве или в окружении.
- Порядок: вайрфреймы, прототип, тест на людях, макеты, дизайн-система.
Wireframe: что это и зачем он нужен
Wireframe, или вайрфрейм, — схема экрана из серых прямоугольников, линий и подписей. В нём нет цветов, фотографий и шрифтов бренда: только расположение блоков, заголовков, кнопок и полей. По сути это чертёж: где будет меню, где карточка товара, где цена и кнопка «купить».
Вайрфрейм нужен, чтобы договориться о содержании и иерархии экрана, пока это дёшево. На сером экране обсуждают структуру, а не оттенок кнопки, и именно это и требуется на старте. Если показать руководителю цветной макет, разговор неизбежно уйдёт во «вот этот синий не нравится», а вопрос «а нужен ли здесь вообще этот блок» так и не прозвучит.
Вайрфрейм и прототип: отличия
Отдельные вайрфреймы — это набор статичных картинок. Прототип — те же схемы, связанные переходами: нажимаете кнопку и попадаете на следующий экран, открываете меню, листаете список. По кликабельному прототипу можно пройти сценарий на телефоне, как по настоящему продукту, только серому.
Это принципиальная разница. Статичные экраны по отдельности могут выглядеть логично, а при попытке пройти путь от входа до заказа выясняется, что с экрана корзины нельзя вернуться к каталогу, а подтверждение заказа приходит в никуда. Прототип вскрывает такие разрывы до того, как кто-то начал рисовать и программировать. Поэтому в прототипировании интерфейсов вайрфреймы всех экранов — лишь промежуточный результат, а итог — кликабельная модель с UX-тестом.
Низкая и высокая детализация
Прототипы бывают разной детализации. Низкая — грубые схемы, где важна только последовательность экранов. Высокая — почти готовый интерфейс с реальными текстами, ценами и даже фото, чтобы тест на людях был честнее. Полноценной работы с базой данных в прототипе нет: это уже разработка. Для большинства сайтов и приложений хватает средней детализации — серые схемы с реальными заголовками и подписями.
Макет и мокап: в чём разница
Макет — это UI-дизайн экрана: цвета, типографика, фотографии, иконки, отступы в айдентике компании. Макет рисуется для каждого типа страницы в нескольких разрешениях — десктоп, планшет, мобильный — и со всеми состояниями: пустой список, загрузка, ошибка, успешная отправка. Именно по макетам разработчики делают вёрстку.
Мокап — презентационное изображение: тот же макет, вставленный в рамку телефона, ноутбука или в фотографию с рабочим столом. Мокапы нужны для портфолио, презентаций инвестору и скриншотов в сторах. Для разработки они ничего не добавляют, и если подрядчик показывает только красивые мокапы без макетов всех состояний, стоит уточнить, что вы получите на самом деле.
Называть «макетом» всё подряд и заказывать «макет главной страницы», ожидая получить проработанный сайт. В итоге приходит одна красивая картинка без логики остальных страниц, без мобильной версии и без состояний. Формулируйте задачу через результат: «кликабельный прототип всех типов страниц» или «макеты 8 типов страниц в трёх разрешениях со всеми состояниями».
Все артефакты в одной таблице
| Артефакт | Что показывает | Кому нужен | Цена правки |
|---|---|---|---|
| Вайрфрейм | Структуру одного экрана | Команде проекта для согласования содержания | Минуты |
| Прототип | Логику и переходы между экранами | Заказчику, инвестору, участникам UX-теста, разработчикам для оценки | Час |
| Макет | Визуальный дизайн, адаптивы, состояния | Разработчикам для вёрстки | Дни: правку нужно повторить во всех разрешениях |
| Мокап | Как дизайн выглядит на устройстве | Маркетингу, презентациям, сторам | Не влияет на продукт |
| Дизайн-система | Компоненты и правила их применения | Разработчикам и маркетологам после запуска | Меняется один раз — обновляется везде |
Что заказывать первым и почему
Правильный порядок экономит больше всего денег, потому что каждая следующая стадия дороже предыдущей. Ошибка в логике, найденная на вайрфрейме, исправляется за минуты. Та же ошибка на макете требует перерисовки в трёх разрешениях и нескольких состояниях. В коде — переделки вёрстки, логики и повторного тестирования.
- Сессия и карта экрановЦели, аудитория, сценарии, роли. Из этого рождается список всех экранов и переходов.
- ВайрфреймыСхемы всех экранов: что на каждом, в каком порядке.
- Кликабельный прототипСхемы связываются переходами в Figma.
- UX-тест5–8 человек из аудитории проходят задачи, мы правим схемы по итогам.
- МакетыUI-дизайн поверх проверенной логики, адаптивы и состояния.
- Дизайн-системаКомпоненты и правила, по которым разработчики собирают интерфейс, а маркетологи — новые страницы.
ПРАВИЛОНе платите за цвет, пока не проверили логику. Сначала серое, потом красивое.
Первые четыре шага — это работа над прототипом, она занимает 1–2 недели для сайта или приложения. Последние два — UX/UI-дизайн в вашей айдентике: для сайта это 3–5 недель, но с готовым прототипом этап UI идёт быстрее, потому что споры о структуре уже закончены.
UI-кит и дизайн-система: что идёт после макетов
Макеты — не последний артефакт. Чтобы интерфейс не расползался после запуска, из макетов собирают библиотеку повторяющихся элементов. Здесь тоже есть два термина, которые часто путают.
UI-кит — набор элементов интерфейса: кнопки во всех состояниях, поля ввода, карточки, иконки, цвета и стили текста. Его хватает для лендинга или небольшого сайта, где новых страниц почти не появляется.
Дизайн-система — те же элементы плюс правила их применения и документация: какие отступы между блоками, когда использовать какую кнопку, как ведёт себя карточка на узком экране, как называются цвета в коде. С ней разработчик собирает экран из готовых компонентов, а маркетолог — новую страницу за час, не заказывая дизайнера.
Для сайта на 8–12 типов страниц, магазина или приложения мы делаем именно систему: это около трёх дней работы, которые окупаются при первой же доработке. Новые экраны добавляются без риска, что через год каждый раздел будет выглядеть по-своему.
Когда можно сразу начинать с макетов
Не каждому проекту нужен отдельный прототип. Для лендинга или небольшого сайта-визитки структура прорабатывается внутри дизайна: схемы рисуются в первые дни и сразу превращаются в макеты. Если продукт простой и понятный, сразу заказывать дизайн — нормально.
Прототип почти обязателен, когда:
- в сайте больше 10 типов страниц или есть каталог с фильтрами и корзиной;
- есть личный кабинет, роли и права доступа;
- продукт — мобильное приложение или веб-сервис;
- нужно показать идею инвестору или согласовать её внутри компании;
- вы хотите получить сопоставимые оценки от нескольких подрядчиков или провести тендер.
Сколько стоит такая работа в каждом формате, мы разобрали в статье «Сколько стоит прототип сайта или приложения», а разницу между логикой и визуалом — в материале «UX и UI-дизайн: в чём разница».
Как проверить, что вы получили то, что заказывали
- Прототип открывается по ссылке на телефоне и компьютере без установки программ.
- По нему можно пройти главный сценарий от входа до целевого действия.
- Есть карта всех экранов и переходов, а не только ключевые экраны.
- Для каждой роли видно, какие экраны и действия ей доступны.
- Есть отчёт по UX-тесту с найденными проблемами и решениями.
- Есть описание логики и состояний, понятное разработчику.
- Исходник Figma и права переданы вам.
Если всё на месте, у вас на руках основа, по которой любой подрядчик нарисует макеты и честно оценит разработку. Если хотите начать с правильного шага, посмотрите, как устроен кликабельный прототип за неделю у нас.
Wireframe — что это простыми словами?
Серая схема экрана без цветов и картинок: где находятся меню, заголовки, кнопки и поля. Чертёж, по которому потом рисуют дизайн.
Чем вайрфрейм отличается от прототипа?
Вайрфрейм — статичная схема одного экрана. Прототип — набор таких схем, связанных переходами: по нему можно пройти сценарий, как по настоящему продукту.
Мокап и прототип — это одно и то же?
Нет. Прототип показывает логику и переходы, мокап — презентационную картинку готового дизайна на устройстве. Для разработки мокап ничего не добавляет.
Почему прототип серый, как понять, будет ли красиво?
Серый цвет — осознанное решение: на схеме обсуждают структуру и логику, а не оттенки. Красоту утверждают на этапе макетов, когда каркас уже проверен на людях.
В чём делают прототипы и макеты?
Чаще всего в Figma: в одном файле живут вайрфреймы, кликабельные переходы, макеты и компоненты дизайн-системы. Прототип открывается по ссылке в браузере и на телефоне, ставить ничего не нужно, а комментарии можно оставлять прямо на экранах.
Можно ли отдать прототип другому подрядчику?
Да. Если права переданы вам, прототип, описание логики и смета — ваша собственность, и по ним любой дизайнер нарисует макеты, а разработчик оценит проект.
