Когда заказчик впервые общается с дизайнером, он слышит три слова: wireframe, прототип, макет. И кивает, делая вид, что всё понял. Потом путается, переспрашивает, а в итоге не понимает, почему дизайн стоит столько и занимает столько времени.

Эта статья — для тех, кто хочет разобраться без лишних слов.

Зачем вообще делить дизайн на этапы

Дизайн сайта — это не «нарисовать красиво». Это последовательное решение задач: сначала понять структуру, потом поведение, потом внешний вид. Если пропустить первые два этапа и сразу рисовать красивую картинку — получится красивая, но неудобная вещь. Или придётся всё переделывать, когда окажется, что кнопка стоит не там.

Каждый этап дешевле следующего в плане правок. Поменять блок в wireframe — 5 минут. Поменять тот же блок в готовом макете — полчаса плюс правки в вёрстке. Поэтому студии, которые работают по уму, не пропускают этапы.

Wireframe — скелет страницы

Wireframe — это схема. Серые прямоугольники, линии, надписи. Никаких цветов, никаких шрифтов, никаких картинок. Только структура: где будет шапка, где меню, где блок с преимуществами, куда ведёт кнопка.

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

Что wireframe решает:

  • Какие блоки нужны на странице и в каком порядке
  • Сколько места занимает каждый элемент относительно других
  • Как пользователь перемещается между страницами
  • Что важнее — что расположено выше

Что wireframe не решает:

  • Как это будет выглядеть
  • Какие будут цвета и шрифты
  • Как именно анимируются переходы

Wireframe делается быстро — иногда прямо на встрече в Miro или Figma. Для лендинга это 2–4 часа работы. Для корпоративного сайта — день-два.

Правки на этом этапе стоят дёшево. Передвинуть блок, убрать секцию, добавить новый экран — это минуты. Именно поэтому лучше потратить время на wireframe, чем потом объяснять, почему переделка макета стоит дополнительных денег.

Кто рисует wireframe

В идеале — UX-дизайнер или проектировщик интерфейсов. На практике — часто тот же человек, что делает визуал. В небольших студиях один дизайнер проходит весь путь от wireframe до финального макета.

Иногда wireframe делает сам заказчик — в виде нарисованных от руки схем или скриншотов понравившихся сайтов с пометками. Это нормально и помогает быстрее прийти к результату.

Прототип — живая схема

Прототип — это wireframe, который можно «потрогать». Он не красивый, но интерактивный: кнопки кликаются, меню открываются, страницы переключаются. Пользователь может пройти по сценарию использования сайта и почувствовать, удобно это или нет.

Прототип делается в Figma, Adobe XD или специализированных инструментах вроде Axure. Он имитирует поведение интерфейса без единой строчки кода.

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

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

  2. Провести пользовательское тестирование. Дать прототип 5–10 реальным людям и посмотреть, где они спотыкаются. Это дёшево и очень информативно.

  3. Показать заказчику. Клиенту проще оценить удобство на живом прототипе, чем на статичных схемах.

  4. Передать разработчику точное ТЗ. Когда есть прототип, у разработчика меньше вопросов и меньше пространства для домыслов.

Чем прототип отличается от wireframe:

Wireframe статичен. Прототип интерактивен. Wireframe показывает «что где стоит». Прототип показывает «что происходит, когда я нажимаю».

Когда прототип не нужен

Для простого сайта-визитки прототип — лишний этап. Там нечего тестировать: страница с информацией о компании и кнопкой «Позвоните нам» не требует UX-исследований.

Прототип оправдан, если:

  • Сайт сложный — много страниц, нетривиальная навигация
  • Есть личный кабинет, корзина, многошаговые формы
  • Продукт новый и непонятно, поймут ли пользователи логику
  • Бюджет позволяет не торопиться

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

Макет — финальная картинка

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

Макет делается в Figma и передаётся верстальщику. Хороший макет содержит все состояния элементов: кнопка обычная, кнопка при наведении, кнопка нажатая. Инпут пустой, инпут заполненный, инпут с ошибкой. Это называется дизайн-системой или хотя бы минимальным набором компонентов.

Что входит в макет:

  • Все страницы сайта в десктопной версии
  • Мобильная версия (адаптив)
  • Состояния элементов
  • Иногда — анимации и переходы (в виде описания или Figma-прототипа)

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

Лендинг — 1–3 дня. Корпоративный сайт — неделя и больше, зависит от количества страниц и сложности. Интернет-магазин — от двух недель: там много шаблонов (карточка товара, корзина, оформление заказа, личный кабинет).

Макет vs мокап — одно и то же?

В русскоязычной среде эти слова часто используют как синонимы. Строго говоря, мокап — это ещё и «заглушка» с Lorem Ipsum и серыми картинками-заменителями. Финальный макет содержит реальный контент. Но на практике разница несущественна — оба слова означают «финальная визуальная версия».

Типичные ошибки заказчиков

«Давайте пропустим wireframe, сразу к дизайну»

Понятное желание — хочется быстрее. Но без wireframe дизайнер либо сам придумывает структуру (и может угадать неправильно), либо переделывает макет несколько раз, пока заказчик не скажет «вот теперь похоже». Оба варианта дороже wireframe.

«Я хочу как у них, только лучше»

Прислать 10 референсов — нормально. Но это не заменяет wireframe. У понравившегося сайта может быть структура, совершенно не подходящая для вашего бизнеса.

Правки после утверждения макета

Если заказчик утвердил wireframe, а потом на этапе макета говорит «а давайте уберём этот раздел и добавим другой» — это правки, которые стоят денег и времени. Wireframe для того и существует, чтобы такие решения принимались заранее.

«Нам не нужна мобильная версия»

В 2026 году более 60% трафика приходит с телефонов. Отсутствие адаптива — это потеря клиентов. Адаптивный дизайн закладывается в макет и передаётся разработчику вместе с десктопной версией.

Как это выглядит на практике

Вот типичный процесс для корпоративного сайта:

  1. Бриф — заказчик отвечает на вопросы: кто клиенты, какая цель сайта, что должен сделать пользователь.
  2. Wireframe — дизайнер рисует структуру, согласовывает с заказчиком.
  3. Прототип (если нужен) — wireframe оживает, можно кликать.
  4. Мудборд — подборка визуальных направлений: цвета, шрифты, стиль.
  5. Макет — финальный дизайн по утверждённой структуре и стилю.
  6. Передача в разработку — макет с комментариями уходит верстальщику.

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

В REEXY, например, корпоративный сайт начинается от 15 000 ₽ — и в эту стоимость входит полный цикл: от структуры до финального макета и вёрстки. Прозрачно и без сюрпризов.

Что спросить у студии перед началом работы

Если вы заказываете сайт и хотите понять, насколько серьёзно студия подходит к работе — спросите:

  • Вы делаете wireframe до макета?
  • Как выглядит процесс согласования?
  • Сколько правок включено в стоимость?
  • Как передаётся макет разработчику?

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

Итого: три этапа, три вопроса

Если запутались — запомните просто:

  • Wireframe отвечает на вопрос «что и где»
  • Прототип отвечает на вопрос «как это работает»
  • Макет отвечает на вопрос «как это выглядит»

Каждый следующий этап строится на предыдущем. Пропустить этапы можно — но только если понимаешь, какой риск берёшь на себя. Для сайта-визитки wireframe не нужен. Для интернет-магазина с личным кабинетом — нужен и wireframe, и скорее всего прототип.

Чем сложнее проект, тем важнее не торопиться с картинкой и сначала решить, что именно вы строите.