Три слова, которые все путают
Клиент приходит в студию и говорит: «Хочу посмотреть прототип». Дизайнер кивает и думает: «Окей, начнём с вайрфрейма». Разработчик в углу уже открыл Figma. И каждый из троих имеет в виду что-то своё.
Wireframe, макет, прототип — эти слова звучат похоже и часто используются как синонимы. Но это разные вещи с разными задачами. Понимание разницы помогает не только говорить на одном языке с командой, но и экономить деньги: не делать красивый макет там, где достаточно схемы на бумаге.
Wireframe — скелет без кожи
Вайрфрейм — это схема расположения элементов на странице. Никаких цветов, никаких красивых шрифтов, никаких картинок. Только прямоугольники, линии и текст-заглушки.
Представьте план квартиры: на нём нарисовано, где будут стены, окна, двери и розетки. Но не то, какого цвета будут стены и какой паркет выбрать. Вайрфрейм — это именно такой план для сайта.
Что обычно есть в вайрфрейме:
- расположение блоков на странице — шапка, контент, боковая колонка, подвал
- место для навигации
- где будут кнопки и формы
- иерархия контента — что важнее, что второстепенно
- примерные размеры блоков
Что там точно нет: реальные фотографии, логотип, фирменные цвета, конкретные шрифты.
Зачем это нужно? Вайрфрейм — дешёвый способ проверить структуру. Переместить блок в схеме — 5 секунд. Переделать готовый макет — пара часов. Переделать уже вёрстанный сайт — день работы и нервы.
Хороший вайрфрейм рисуется быстро: от 30 минут до нескольких часов для одной страницы. Его можно сделать даже на листке бумаги — главное понять логику, а не красоту.
Инструменты для вайрфреймов: Balsamiq (специально заточен под схемы, даже выглядит «набросочно»), Figma (большинство команд используют его для всего), Miro (если нужна совместная работа в реальном времени), обычный карандаш и бумага.
Макет — как сайт будет выглядеть
Макет (mockup) — это финальная визуальная картинка. Всё нарисовано: цвета, шрифты, отступы, иконки, реальные фотографии или фотозаменители нужного размера.
Если вайрфрейм — план квартиры, то макет — 3D-визуализация интерьера. Вы видите, как всё будет выглядеть, но пока это просто картинка: нельзя открыть кран или включить свет.
Макет отвечает на вопрос «Как это будет выглядеть?» — но не «Как это будет работать?»
Что есть в макете:
- финальная цветовая схема
- реальная типографика — шрифты, размеры, начертания
- иконки и иллюстрации
- сетка и отступы
- финальное расположение всех элементов
Макет — это то, что показывают клиенту для утверждения дизайна. Именно здесь говорят «нам нравится» или «сделайте кнопку другого цвета».
Сколько времени занимает? Зависит от сложности. Лендинг на 5–7 блоков — 1–2 дня. Корпоративный сайт с 10+ страницами — неделя и больше.
Один нюанс: в русскоязычной среде слово «макет» иногда используют и для вайрфрейма, и для финального дизайна одновременно. Это путает. Лучше уточнять: «Вы имеете в виду схему или готовый визуальный дизайн?»
Прототип — сайт, который уже работает (но не совсем)
Прототип — интерактивная версия дизайна. Вы кликаете по кнопкам, и происходит что-то: открывается меню, появляется модальное окно, перелистывается страница. Данные не сохраняются по-настоящему, логика не работает — но поведение имитируется.
Продолжая метафору с квартирой: прототип — это шоурум-квартира, где можно пройтись, открыть дверь, потрогать выдвижные ящики. Жить там нельзя, но понять, как будет — можно.
Прототипы бывают разной степени детализации.
Низкодетализированный (lo-fi) — кликабельный вайрфрейм. Никакой красоты, только навигация и переходы. Хорошо для ранних тестов с пользователями.
Высокодетализированный (hi-fi) — полностью нарисованный дизайн с анимациями, переходами и взаимодействиями. Максимально похож на реальный сайт, но без программирования.
Зачем нужен прототип:
- тестировать с реальными пользователями ещё до разработки
- показать заказчику, как работает навигация и переходы между страницами
- передать разработчикам точное понимание поведения интерфейса
- согласовать анимации и микровзаимодействия
Инструменты: Figma (встроенный Prototype mode — стандарт индустрии), ProtoPie (для сложных интерактивных сценариев), Principle (для анимаций).
Как этапы связаны между собой
Схема работает последовательно:
- Вайрфрейм → обсуждение структуры → правки → утверждение
- Макет → визуальный дизайн → правки → утверждение
- Прототип → интерактивность → тестирование → утверждение
- Разработка → вёрстка и программирование → тестирование → запуск
Каждый следующий этап строится на предыдущем. Нельзя делать красивый макет, если непонятна структура. Нельзя делать прототип, если нет макета.
Частая ошибка: клиент хочет сразу увидеть готовый дизайн. Команда пропускает вайрфрейм и сразу рисует красивую картинку. Потом выясняется, что кнопку «Заказать» поставили не туда, нет блока с отзывами, и вообще форма заказа должна быть в начале, а не в конце. Всё переделывается. Время и деньги потрачены впустую.
Вайрфрейм — это страховка. Дешёвая и эффективная.
Когда можно пропустить этапы
Не всегда нужны все три этапа. Вот реальные сценарии.
Простой лендинг для малого бизнеса. Одна страница, стандартная структура: шапка, услуги, преимущества, форма, контакты. Структура понятна сразу — вайрфрейм занимает 30 минут и рисуется «на бумаге». Прототип не нужен: одна страница без сложной навигации. Достаточно макета.
Корпоративный сайт с несколькими разделами. Вайрфрейм обязателен — нужно продумать навигацию, иерархию страниц, пути пользователя. Прототип полезен для согласования переходов.
Интернет-магазин. Здесь пропускать этапы опасно. Путь пользователя от каталога до оформления заказа — это десятки экранов и взаимодействий. Без прототипа разработчики будут угадывать поведение интерфейса.
Мобильное приложение. Прототип обязателен. Тач-жесты, свайпы, всплывающие панели — это нельзя описать в макете, нужно показать в движении.
В REEXY процесс адаптируют под задачи проекта: для сайта-визитки или лендинга можно обойтись минимальными этапами, для сложного корпоративного проекта — не стоит экономить на проектировании.
Кто делает каждый этап
Вайрфрейм — обычно UX-дизайнер или продуктовый дизайнер. В маленьких командах — тот же человек, что делает макеты. Иногда вайрфрейм рисует аналитик или даже разработчик.
Макет — UI-дизайнер. Именно здесь нужен вкус, знание типографики, цвета, сетки.
Прототип — UX/UI-дизайнер или отдельный специалист по взаимодействиям. В Figma прототипирование встроено, так что обычно этим занимается тот же дизайнер.
В небольших студиях один человек часто закрывает все три этапа. В крупных командах — могут быть отдельные специалисты под каждую задачу.
Инструменты: что использует индустрия сейчас
Раньше дизайнеры рисовали в Photoshop и Illustrator, потом экспортировали картинки и отдавали разработчикам. Сейчас стандарт — Figma.
Почему Figma победила:
- облачная, работает в браузере без установки
- командная работа в реальном времени — несколько человек видят правки мгновенно
- встроенное прототипирование без дополнительных инструментов
- удобная передача макетов разработчикам: они видят отступы, шрифты, цвета прямо в браузере
- огромная библиотека готовых компонентов и шаблонов
Альтернативы: Adobe XD (практически умер, Adobe фокусируется на других продуктах), Sketch (только macOS, теряет долю рынка), ProtoPie (для сложных интерактивных сценариев, которые Figma не тянет).
Для быстрых вайрфреймов без лишних деталей — Balsamiq. Интерфейс намеренно сделан «нарисованным от руки», чтобы никто не воспринимал схему как финальный дизайн.
Что и когда показывать клиенту
Тут часто возникает проблема. Клиент видит красивый макет и начинает просить переделать цвет кнопки. Дизайнер тратит время на мелочь, а потом выясняется, что структура страницы неудобная — и надо переделывать всё.
Показывать вайрфрейм клиенту — нормально. Да, он выглядит некрасиво. Но именно поэтому клиент фокусируется на структуре, а не на цвете шрифта.
Рабочий подход:
- показать вайрфрейм → согласовать структуру → идти в макет
- показать макет → согласовать визуал → идти в прототип (если нужен)
- показать прототип → согласовать поведение → отдавать в разработку
Каждый этап — это чекпоинт. После него менять фундаментальные вещи без дополнительных затрат уже сложно.
Что стоит запомнить
Вайрфрейм, макет и прототип — не просто три способа нарисовать сайт. Это три разных вопроса:
- Вайрфрейм: где что находится?
- Макет: как это выглядит?
- Прототип: как это работает?
Пропуск любого из этапов без осознанной причины — риск. Либо команда угадывает структуру и потом переделывает. Либо разработчики интерпретируют поведение по-своему. Либо клиент видит готовый сайт и говорит «это не то, что я имел в виду».
Три этапа — это не бюрократия и не способ растянуть проект. Это способ сделать сайт правильно с первого раза.
Если планируете создать сайт и хотите понять, какие этапы нужны именно в вашем случае — напишите через форму на r3xy.ru. Разберём задачу и скажем, что реально нужно, а что можно пропустить без потери качества.