Когда клиент впервые приходит в студию с запросом «сделайте нам сайт», он редко понимает, что между «хочу сайт» и «сайт готов» есть несколько промежуточных этапов. Три из них — wireframe, прототип и макет — вызывают больше всего путаницы. Дизайнеры используют эти слова как само собой разумеющееся, а заказчик кивает, не совсем понимая, о чём речь.
Разберём каждый этап конкретно: что это, как выглядит, зачем нужен и что будет, если его пропустить.
Wireframe — скелет будущего сайта
Wireframe — это схема страницы. Без цветов, без шрифтов, без картинок. Только блоки, прямоугольники и текст-заглушки вроде «Заголовок», «Кнопка CTA», «Список преимуществ».
Выглядит это примерно как чертёж квартиры до ремонта: стены есть, комнаты обозначены, но где будет диван и какого цвета стены — не понятно. Это нормально, потому что задача wireframe — договориться о структуре, а не о красоте.
На этом этапе решают:
- Какие блоки будут на странице и в каком порядке
- Где расположено меню, форма, кнопки
- Как пользователь попадёт с одной страницы на другую
- Какой контент нужен и сколько его
Wireframe делают в Figma, Miro, Whimsical или просто на листе бумаги. Точность инструмента здесь не так важна, как скорость и возможность быстро что-то переставить.
Зачем это нужно заказчику. На wireframe вы согласовываете логику сайта, пока это ничего не стоит. Передвинуть блок на схеме — две минуты. Передвинуть тот же блок в готовом макете — час работы дизайнера. В готовой вёрстке — ещё больше. Чем позже правка, тем дороже.
Типичная ошибка: клиент смотрит на wireframe и говорит «ну это какие-то каракули, давайте сразу красиво». Через две недели получает красивый макет, смотрит и говорит: «А почему форма обратной связи внизу? Я хотел её в шапке». Возврат на этап согласования структуры, только уже с потерей времени и нервов.
Макет — как сайт будет выглядеть
Макет (его ещё называют мокап или дизайн-макет) — это то, как страница будет выглядеть визуально. Цвета, шрифты, иконки, фотографии, отступы, тени. Статичная картинка в полном разрешении.
Макет делается поверх wireframe — когда структура согласована, дизайнер «одевает» скелет. Если wireframe это чертёж, то макет — фотореалистичная визуализация квартиры с мебелью, отделкой и светом.
На этом этапе заказчик видит:
- Как выглядят кнопки, заголовки, блоки
- Какие цвета и шрифты используются
- Как расположены фотографии и иллюстрации
- Как выглядит главная страница, карточка товара, форма
Макет всё ещё статичный — он не кликается, не скроллится, не анимируется. Это просто картинка в Figma.
Сколько экранов входит в макет. Для лендинга обычно делают один-два экрана: десктоп и мобильную версию. Для корпоративного сайта — главную, страницу услуг, контакты, иногда типовой внутренний раздел. Для интернет-магазина — главную, каталог, карточку товара, корзину, оформление заказа.
При разработке корпоративного сайта от 15 000 ₽ или интернет-магазина от 10 000 ₽ макеты всех ключевых страниц — это стандартная часть работы. Другой вопрос, насколько детально их прорабатывают перед вёрсткой.
Частая проблема с макетами. Заказчик утверждает макет, вёрстка начинается, и на этапе сборки выясняется: «А как выглядит открытое мобильное меню?», «А что происходит с карточкой при наведении?», «А как выглядит пустая корзина?». Это так называемые edge cases — крайние состояния, которые не попали в основные экраны.
Профессиональный дизайнер прорабатывает их заранее. Если этого не сделать, решения принимает верстальщик — не всегда так, как задумывал дизайнер.
Прототип — сайт, который можно потрогать
Прототип — это интерактивная версия макета. Он кликается: нажимаешь кнопку — открывается следующий экран, заполняешь форму — появляется сообщение об успехе, свайпаешь слайдер — он движется.
Прототип не работает по-настоящему. За ним нет базы данных, нет бэкенда, нет реальных запросов. Это симуляция пользовательского сценария. Но именно это и нужно: понять, как человек будет пользоваться сайтом, до того как написана первая строчка кода.
Прототипы бывают двух видов:
Низкодетализированный прототип — по сути, кликабельный wireframe. Серые прямоугольники, которые можно потыкать. Делается быстро, стоит дёшево, позволяет проверить логику навигации.
Высокодетализированный прототип — кликабельный макет. Выглядит как готовый сайт, работает как симулятор. На таком прототипе можно провести юзабилити-тестирование: показать реальным пользователям и посмотреть, где они теряются.
Когда прототип обязателен. Если сайт сложный — много шагов в воронке, нестандартные интерфейсные решения, мобильное приложение — прототип сэкономит деньги на переделках. Обнаружить, что пользователь не понимает, как оформить заказ, лучше на прототипе, чем после запуска.
Для простого лендинга от 3 500 ₽ прототип часто не нужен — там нечего тестировать. Для интернет-магазина с нестандартным сценарием покупки — уже имеет смысл.
Как эти этапы связаны между собой
Вот стандартная последовательность в дизайне:
- Бриф и аналитика — понимаем задачу, аудиторию, конкурентов
- Wireframe — фиксируем структуру и логику
- Согласование wireframe — клиент утверждает скелет
- Макет — дизайнер «одевает» скелет
- Прототип (опционально) — делаем кликабельную версию
- Согласование макета — клиент утверждает визуал
- Передача в разработку
На практике этапы могут пересекаться или объединяться. Опытный дизайнер иногда сразу делает детальный макет без отдельного wireframe — если задача простая и структура очевидна. Или создаёт прототип вместе с макетом, потому что это быстрее, чем делать их по отдельности.
Но пропускать согласование wireframe перед работой над макетом — рискованно. Именно это приводит к ситуациям, когда клиент говорит «переделайте всё» после двух недель работы дизайнера.
Что путают заказчики
«Пришлите прототип для согласования» — часто имеют в виду просто макет или даже wireframe. Слово «прототип» используется как синоним слова «предварительный вариант».
«Нам нужен макет в трёх вариантах» — иногда это реальная потребность (выбрать направление), иногда — попытка получить три разных дизайна за цену одного. Три полноценных макета главной страницы — это три дизайна, не один.
«Wireframe — это и есть дизайн?» — нет. Wireframe это инструмент согласования структуры, а не финальный продукт. Показывать клиентам wireframe как финальный результат — ошибка.
«Зачем платить за wireframe отдельно, если потом всё равно будет макет?» — потому что wireframe экономит деньги на правках в макете. Это страховка, а не лишний этап.
Как это влияет на стоимость и сроки
Wireframe добавляет к срокам два-пять дней, но снижает количество итераций по макету. В итоге проект часто заканчивается быстрее, чем если бы wireframe пропустили.
Прототип — отдельная работа. Для сложного проекта это может занять столько же времени, сколько сам дизайн. Зато тестирование прототипа с реальными пользователями даёт данные, которые невозможно получить иначе.
Что влияет на стоимость дизайна:
- Количество уникальных страниц (каждый новый тип страницы — отдельная работа)
- Сложность интерфейсных элементов (простая форма vs многошаговый калькулятор)
- Нужен ли прототип и какой детализации
- Количество правок и итераций
- Адаптивность: сколько брейкпоинтов нужно проработать
В студии REEXY дизайн входит в стоимость разработки: wireframe и макет — стандартная часть работы над любым проектом, будь то лендинг от 3 500 ₽ или корпоративный сайт от 15 000 ₽.
Как работать с дизайнером эффективно
Утверждайте структуру до визуала. Когда дизайнер присылает wireframe, смотрите на логику: всё ли на месте, правильный ли порядок блоков, есть ли всё, что нужно. Не думайте о цветах — их ещё нет.
Собирайте правки по этапам. Не копите правки «на потом». Если видите проблему в wireframe — говорите сразу. Если в макете что-то не так по структуре — это значит, wireframe согласовали невнимательно, и теперь правка дороже.
Называйте конкретные проблемы, а не решения. «Кнопка должна быть зелёной» — решение. «Кнопка не выделяется на фоне, теряется» — проблема. Дизайнер лучше знает, как решить проблему визуальными средствами. Описывайте, что не работает, а не как это исправить.
Готовьте контент заранее. Дизайнер работает с реальными текстами и фотографиями эффективнее, чем с заглушками. Если на этапе макета нет нормальных фото, результат будет хуже — потом придётся дорабатывать под реальный контент.
Проверяйте макет на телефоне. Figma позволяет открыть макет на мобильном устройстве. Большинство ваших пользователей будут именно с телефонов. Смотрите на мобильную версию не меньше, чем на десктоп.
Частый сценарий, который ломает проект
Клиент торопится. Пропускает wireframe («давайте сразу красиво»), утверждает макет быстро («ну в целом похоже на то, что хотел»), а потом во время вёрстки начинает добавлять новые требования: «а вот тут хочу анимацию», «а можно сделать вот эту кнопку вот так», «я забыл сказать, что нам нужен блок с отзывами».
Каждое такое изменение на поздних этапах стоит дороже, чем на ранних. Анимация, которую не заложили в макет, потребует переделки верстки. Новый блок сломает сетку. Кнопка «вот так» может не вписываться в уже готовую дизайн-систему.
Решение простое: тратьте время на ранних этапах. Чем больше вы думаете над wireframe, тем меньше правок будет в макете. Чем тщательнее согласован макет, тем меньше неожиданностей в готовом сайте.
Инструменты, которые используют дизайнеры
Figma — стандарт индустрии. Работает в браузере, поддерживает совместную работу, умеет делать и wireframe, и макеты, и интерактивные прототипы. Большинство студий работают именно в Figma.
Miro и FigJam — для быстрых схем и обсуждения структуры. Хорошо подходят для первичных брейнштормов.
Adobe XD — постепенно уходит с рынка после того, как Adobe переключилась на Figma.
Sketch — популярен среди macOS-дизайнеров, но проигрывает Figma в части совместной работы.
Для заказчика важно одно: попросите дать доступ к файлу в Figma. Это позволит смотреть на макет в правильном масштабе, оставлять комментарии прямо на экранах и не ждать, пока дизайнер пришлёт новую картинку.
Когда можно пропустить этапы
Wireframe можно не делать как отдельный документ, если:
- Сайт простой и структура очевидна (лендинг с пятью стандартными блоками)
- Дизайнер и клиент хорошо знают друг друга и понимают с полуслова
- Клиент принёс детальное ТЗ со схемами
Прототип можно пропустить, если:
- Сайт статичный и простой
- Нет нестандартных сценариев взаимодействия
- Бюджет ограничен, а риски понятны
Что нельзя пропускать никогда — это согласование структуры до начала визуальной работы. Пусть это будет устное обсуждение или простая схема в Google Docs, но договорённость должна быть зафиксирована.