Wireframe, прототип и макет — в чём разница и зачем нужен каждый этап

Клиент приходит в студию и говорит: «Нам нужен прототип сайта». Дизайнер понимает под этим кликабельную модель в Figma, разработчик — HTML-заготовку, а клиент имел в виду просто «набросок, как это будет выглядеть». Три человека говорят одно слово — и видят три разные вещи.

Эта путаница стоит денег и нервов. Студия делает не то, что ждал клиент. Клиент злится. Переделки, конфликты, срывы сроков.

Разберём каждый термин по-честному: что это, зачем нужно, когда без него не обойтись, а когда можно пропустить.

Wireframe — скелет без мяса

Wireframe — это схема расположения элементов на странице. Никаких цветов, шрифтов, красивых кнопок. Только прямоугольники, линии и подписи: «здесь заголовок», «здесь три карточки», «здесь форма».

Выглядит как чертёж квартиры на листе в клетку. Вы видите, где будут стены, где дверь, где окно — но не видите ни обоев, ни мебели.

Делают вайрфреймы в разных инструментах: Figma, Miro, Whimsical, Balsamiq. Можно вообще нарисовать от руки на бумаге — это тоже считается.

Зачем нужен wireframe:

Он отвечает на один вопрос: что вообще будет на странице и в каком порядке. До того как тратить время на визуал, нужно договориться о структуре. Где расположен главный призыв к действию — вверху или в середине? Сколько пунктов в меню? Есть ли сайдбар?

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

Сколько времени занимает:

Простой лендинг — 2-4 часа. Корпоративный сайт на 10-15 страниц — 1-2 рабочих дня. Интернет-магазин с каталогом, корзиной и личным кабинетом — 3-5 дней.

Когда wireframe можно пропустить:

Если сайт совсем простой — например, сайт-визитка с одной страницей и стандартной структурой: шапка, о компании, услуги, контакты. Тут и так понятно, что где стоит. Тратить день на схему нет смысла.

Ещё один случай — когда используется готовый шаблон и структура зафиксирована заранее. Тогда вайрфрейм уже встроен в шаблон.

Макет — как выглядит готовый сайт

Макет (его ещё называют мокапом или hi-fi дизайном) — это финальный визуальный вид страницы. Цвета, шрифты, фотографии, иконки, отступы. Всё как в жизни, только статично — ничего не кликается и не двигается.

Макет делают в Figma, Sketch или Adobe XD. Это PNG или векторный файл, который потом передают разработчику. Разработчик смотрит на макет и верстает сайт.

Зачем нужен макет:

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

Первая — согласование. Клиент видит цвета, типографику, расположение элементов. Если что-то не нравится, правки вносятся в Figma за минуты. Переделать вёрстку — это часы работы.

Вторая — техническое задание для разработчика. Хороший макет убирает все вопросы: какой отступ между блоками, какого размера кнопка, что происходит при наведении. Разработчику не нужно угадывать.

Что входит в нормальный макет:

• Десктопная версия (обычно 1440px)
• Мобильная версия (375px или 390px)
• Состояния интерактивных элементов: кнопка в обычном состоянии, при наведении, при клике
• Все страницы сайта, а не только главная
• Компонентная библиотека, если проект большой

Часто клиенты просят сделать только главную страницу, а остальные «по аналогии». Это экономит деньги в моменте, но создаёт проблемы на этапе вёрстки: разработчик тратит время на додумывание.

Сколько стоит:

Цена макета зависит от сложности проекта. Для лендинга это один экран в двух разрешениях. Для корпоративного сайта — десятки экранов. Когда студия вроде REEXY называет цену на корпоративный сайт от 15 000 ₽, в эту сумму как раз входит и дизайн, и вёрстка — то есть макет не стоит отдельно, он часть полного цикла.

Прототип — макет, который работает

Прототип — это кликабельная модель сайта. Внешне он похож на готовый макет, но по нему можно «ходить»: нажимать на кнопки, переходить между страницами, открывать модальные окна.

Прототип не верстают — это не код. Это всё ещё Figma (или другой дизайн-инструмент), просто с настроенными связями между экранами. Кнопка «Перейти в каталог» ведёт на экран каталога. Форма при отправке показывает экран «Спасибо».

Ещё бывают прототипы на HTML/CSS — это уже ближе к вёрстке, но без бэкенда. Такой формат используют реже, в основном для сложных интерфейсов.

Зачем нужен прототип:

Он отвечает на вопрос, который макет не может закрыть: удобно ли пользоваться. Можно нарисовать красивый интерфейс и упустить, что пользователь делает три лишних клика, чтобы добраться до корзины.

Прототип дают тестировщикам или реальным пользователям. Они проходят типичные сценарии: зашли на сайт, нашли товар, добавили в корзину, оформили заказ. Смотрят, где спотыкаются, что непонятно, где уходят.

Это называется юзабилити-тестирование. Даже пять человек, которые прошли по прототипу и рассказали о трудностях, дают больше пользы, чем месяц обсуждений в переписке.

Когда прототип обязателен:

• Интернет-магазин с нестандартным сценарием покупки
• Сложные формы: калькуляторы, конфигураторы, многошаговые анкеты
• Мобильное приложение — там ошибки UX стоят дороже всего
• Продукт для широкой аудитории, где нельзя позволить себе переделки после запуска

Когда прототип избыточен:

Сайт-визитка, лендинг с простой структурой, корпоративный сайт с понятной навигацией. Здесь прототип — лишние затраты. Достаточно хорошего макета.

Как три этапа связаны между собой

В теории правильный порядок такой:

1. Wireframe — договорились о структуре
2. Макет — нарисовали финальный визуал
3. Прототип — собрали кликабельную модель и протестировали

На практике всё гибче. Маленькие проекты пропускают первый и третий шаг — сразу делают макет и отдают в разработку. Крупные продукты могут делать несколько итераций: вайрфрейм → обратная связь → скорректированный вайрфрейм → макет → прототип → тестирование → финальный макет.

Важный момент: прототип не всегда делают после макета. Иногда сначала собирают кликабельный вайрфрейм (без красивого визуала, но с рабочими переходами) — это называется lo-fi прототип. Он дешевле и быстрее, зато позволяет проверить навигацию ещё до дизайна.

Типичные ошибки и как их избежать

Ошибка 1: пропустить wireframe и сразу рисовать макет

Часто клиенты торопятся и хотят сразу видеть красоту. Студия идёт навстречу. В результате на этапе согласования макета клиент говорит: «А давайте блок с преимуществами перенесём выше, а отзывы вообще уберём». Дизайнер переделывает несколько экранов.

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

Ошибка 2: согласовать только главную страницу

Главная — это витрина, но пользователь живёт на внутренних страницах. Страница продукта, корзина, личный кабинет, страница ошибки 404 — всё это нужно продумать и согласовать. Иначе разработчик делает их «на глаз», и в финале сайт выглядит разрозненно.

Ошибка 3: показывать прототип не тем людям

Часто прототип тестируют коллеги или сам клиент. Они знают сайт наизусть и не замечают очевидных проблем. Настоящий тест — это человек, который никогда не видел продукт. Он честно покажет, где теряется.

Ошибка 4: путать прототип с готовым продуктом

Прототип — инструмент проверки, а не финальный результат. Если клиент говорит «нам нужен прототип для инвесторов» и имеет в виду что-то красивое и рабочее — это, скорее всего, MVP (минимально жизнеспособный продукт), а не прототип в дизайнерском смысле.

Что спрашивать у студии

Когда вы заказываете сайт и обсуждаете стоимость, уточняйте конкретно:

• Вайрфреймы входят в стоимость или это отдельная услуга?
• Сколько страниц будет в макете?
• Делается ли мобильная версия?
• Сколько итераций правок включено?
• Нужен ли прототип — и если нет, почему?

Чёткие ответы на эти вопросы защищают от ситуации, когда за 5 000 ₽ вам делают только главную страницу в одном разрешении, а остальное «по договорённости».

В REEXY, например, на этапе брифинга фиксируется объём: какие страницы входят в проект, какие состояния элементов нужно отрисовать, нужна ли адаптивная версия. Это снимает разногласия до начала работы, а не после.

Инструменты для каждого этапа

Wireframe:

• Figma (бесплатно для одного пользователя)
• Whimsical (удобен для быстрых схем)
• Balsamiq (специально для вайрфреймов, нарочито «набросочный» стиль)
• Бумага и карандаш (работает, не смейтесь)

Макет:

• Figma — стандарт индустрии
• Adobe XD — встречается реже
• Sketch — только на Mac, популярен среди iOS-дизайнеров

Прототип:

• Figma (встроенный режим прототипирования)
• ProtoPie — для сложных микроанимаций и взаимодействий
• Framer — между дизайном и кодом, можно добавлять логику

Для большинства проектов Figma закрывает все три задачи. Это главная причина, почему она стала стандартом: один инструмент вместо трёх.

Краткая шпаргалка

Три этапа — это не обязательная программа, а инструменты для разных задач. Чем сложнее проект, тем больше смысла проходить все три. Чем проще — тем больше можно сократить без потери качества.