Заказчик говорит «сделайте макет», дизайнер присылает wireframe, разработчик просит прототип. Все говорят о разном, все недовольны. Такая история случается почти на каждом проекте, где не договорились о терминах в начале.

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

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

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

Цель вайрфрейма — ответить на вопрос «что будет на странице и в каком порядке», а не «как это будет выглядеть».

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

Типичное содержание вайрфрейма:

  • блоки с подписями («здесь слайдер», «здесь список товаров»)
  • заглушки вместо изображений — крестик в прямоугольнике
  • текст-рыба (Lorem ipsum) или короткие заглушки («Заголовок раздела»)
  • стрелки или нумерация, если важна последовательность действий

Вайрфрейм не красивый — это его суть. Если начать рисовать красиво на этом этапе, заказчик будет обсуждать цвета вместо структуры. А структура — это главное.

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

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

Прототип — это уже можно потыкать

Прототип — интерактивная версия сайта или приложения. Кнопки нажимаются, менюшки открываются, форма отправляется (условно). Но это всё ещё не настоящий сайт — просто имитация поведения.

Прототип отвечает на вопрос «как пользователь будет взаимодействовать с интерфейсом».

Делается обычно в Figma (режим прототипирования), InVision, Axure или Marvel. Дизайнер связывает экраны переходами: нажал кнопку — открылась следующая страница.

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

  1. Проверить сценарии использования до того, как всё сделано. Пользователь идёт оформлять заказ — что происходит, если он забыл ввести email? Как работает возврат на предыдущий шаг?

  2. Показать заказчику «живое» ощущение от продукта. Статичный макет не передаёт того, как человек будет двигаться по сайту.

  3. Протестировать на реальных пользователях. Дать людям задание («найдите нужный товар и добавьте в корзину») и посмотреть, где они спотыкаются.

Два уровня детализации:

Lo-fi прототип (низкая детализация) — по сути, интерактивный вайрфрейм. Серые экраны, которые переключаются при нажатии. Делается за день-два.

Hi-fi прототип (высокая детализация) — визуально близок к финальному дизайну, но ещё не реализован в коде. Сюда уже добавляют цвета, шрифты, реальные изображения. Занимает больше времени, но даёт точное представление о продукте.

Для большинства коммерческих сайтов достаточно lo-fi прототипа. Hi-fi оправдан для мобильных приложений, сложных сервисов или когда нужно провести серьёзное пользовательское тестирование.

Макет — финальный визуал

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

Макет — статичный. Он не кликается, не открывает меню. Это просто картинка в высоком разрешении. Зато по нему разработчик делает верстку.

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

  • точные цвета (обычно в hex или RGB)
  • конкретные шрифты с нужными размерами и межстрочными интервалами
  • реальный контент — заголовки, тексты, фото (или качественные заглушки)
  • все состояния элементов: кнопка обычная, кнопка при наведении, кнопка нажатая
  • мобильная версия отдельно

Макет обычно делается в Figma, Sketch или Adobe XD. Хороший дизайнер сдаёт не просто картинку, а организованный файл с компонентами, стилями и структурой — чтобы разработчик не гадал, что имелось в виду.

Важный момент про мобильную версию. Макет нужен минимум в двух вариантах: десктоп и мобильный. На практике часто делают три: десктоп (1440px), планшет (768px) и мобильный (375px). Это добавляет время к работе дизайнера, но экономит нервы разработчику и деньги заказчику на правках.

Как всё это связано между собой

Порядок такой:

Вайрфрейм → Прототип → Макет → Верстка

Но жизнь сложнее схемы. Вот несколько реальных сценариев:

Лендинг для небольшого бизнеса. Вайрфрейм пропускают — структура понятна из брифа и примеров конкурентов. Прототип не нужен — страница одна, сценарий простой. Дизайнер сразу делает макет, его согласовывают, отдают в разработку. Быстро и без лишних итераций.

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

Мобильное приложение. Без прототипа почти невозможно. Слишком много экранов, слишком много переходов. Заказчик по статичным картинкам не поймёт, как это работает, а разработчик наделает ошибок в логике.

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

Почему заказчики путаются и что с этим делать

Чаще всего заказчик говорит «макет», имея в виду любую визуальную презентацию будущего сайта. Это не ошибка — просто нетехнический человек не обязан знать разницу между lo-fi прототипом и hi-fi макетом.

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

Практическое правило: в начале проекта фиксируйте письменно, что именно сдаётся на каждом этапе. «Вайрфрейм — схема расположения блоков без цветов и шрифтов, согласование 3 правки включено». Это снимает 80% конфликтов.

Ещё одна частая ситуация: заказчик просит сразу финальный макет, без вайрфреймов. Иногда это нормально. Но если проект сложный, а требования размытые — дизайнер рискует нарисовать красивую вещь не про то. Переделать структуру после финального макета больно и дорого.

Сколько времени занимает каждый этап

Цифры примерные — зависят от сложности проекта и количества правок:

  • Вайрфрейм лендинга: 1-3 часа
  • Вайрфрейм интернет-магазина (10-15 экранов): 1-3 дня
  • Lo-fi прототип лендинга: 2-4 часа
  • Hi-fi прототип мобильного приложения (20+ экранов): 1-2 недели
  • Макет лендинга (десктоп + мобильный): 1-3 дня
  • Макет корпоративного сайта (5-7 страниц): 3-7 дней
  • Макет интернет-магазина: 1-3 недели

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

На что смотреть, принимая дизайн

Чтобы не прийти к разработчику с неполным макетом, проверьте перед согласованием:

По структуре (вайрфрейм):

  • Есть ли все нужные разделы и блоки?
  • Понятен ли пользователю следующий шаг на каждой странице?
  • Не перегружена ли страница — нет ли лишних блоков?

По взаимодействию (прототип):

  • Работают ли все ключевые сценарии?
  • Понятно ли, что происходит после действия пользователя?
  • Нет ли тупиков — страниц, с которых некуда идти?

По визуалу (макет):

  • Соответствует ли дизайн брендбуку или заявленному стилю?
  • Все ли состояния прорисованы (ховер, активное состояние, ошибка в форме)?
  • Есть ли мобильная версия?
  • Читается ли текст — достаточный ли контраст, комфортный ли размер шрифта?

В REEXY перед передачей макета разработчику мы всегда проверяем файл Figma на полноту: компоненты, стили, состояния, адаптив. Это занимает пару часов, но экономит время на этапе верстки.

Когда этапы можно пропустить

Можно пропустить вайрфрейм, если:

  • проект простой и понятный (лендинг с очевидной структурой)
  • дизайнер и заказчик уже работали вместе и хорошо понимают друг друга
  • есть референсы, которые точно показывают нужный результат

Можно пропустить прототип, если:

  • сайт небольшой и одностраничный
  • интерактивные сценарии простые и не требуют проверки
  • заказчик хорошо представляет себе финальный продукт

Пропустить макет нельзя почти никогда. Разработчик не должен принимать дизайнерские решения — это не его работа и не его зона ответственности. Без макета верстальщик сделает «как понял», а правки потом выйдут дороже, чем сам дизайн.

Инструменты

Сейчас индустрия почти полностью перешла на Figma — она закрывает все три этапа: рисуй вайрфреймы, собирай прототипы, делай финальные макеты. Плюс совместная работа в реальном времени и удобная передача разработчику.

Alternative: Penpot — опенсорс-аналог, бесплатный и self-hosted. Для небольших студий и фрилансеров, которым не нравится подписочная модель Figma.

Для быстрых вайрфреймов от руки: Excalidraw или просто бумага. Серьёзно, бумага работает.

Для пользовательского тестирования: Maze или Useberry — интегрируются с Figma и позволяют собирать аналитику по тому, как люди ведут себя в прототипе.

Главное, что нужно запомнить: вайрфрейм — это структура, прототип — это поведение, макет — это внешний вид. Три разных вопроса, три разных инструмента. Не каждый проект требует всех трёх этапов, но понимать разницу нужно всем — и тем, кто делает сайты, и тем, кто их заказывает.