Прототип сайта: что это, чем отличается от дизайн-макета и ТЗ и как его проверить заказчику

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

Что такое прототип сайта простыми словами?

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

Прототип отвечает на три вопроса:

• Что есть на странице. Блоки и их содержание: оффер, услуги, цены, кейсы, отзывы, вопросы, контакты.
• В каком порядке. Что человек видит на первом экране, что ниже, где стоит первая кнопка.
• Что происходит при действии. Куда ведёт кнопка, какие поля у формы, что видит человек после отправки, что видит менеджер.

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

Документ	На какой вопрос отвечает	Как выглядит	Что в нём проверяет заказчик
ТЗ	Что сайт должен делать и по каким правилам	Текст: разделы, функции, роли, интеграции	Всё ли нужное перечислено и нет ли лишнего
Схема (карта сайта)	Какие страницы есть и как они связаны	Дерево разделов или список адресов	Найдёт ли клиент нужный раздел за 1–2 перехода
Прототип	Что лежит на каждой странице и в каком порядке	Серые блоки, реальные заголовки, кнопки и формы	Порядок блоков, тексты кнопок, поля форм, путь до заявки
Дизайн-макет	Как это выглядит в вашем стиле	Цвета, шрифты, фото, иконки, отступы	Узнаётся ли бренд, читается ли текст, нет ли чужих картинок
Вёрстка (сборка)	Работает ли это в браузере и на телефоне	Живой сайт на тестовом адресе	Формы отправляются, ссылки ведут куда нужно, всё открывается с телефона

Чем прототип отличается от дизайн-макета и ТЗ?

ТЗ описывает словами, что сайт должен делать. Схема показывает, какие есть страницы. Прототип раскладывает содержимое каждой страницы. Макет добавляет внешний вид, вёрстка превращает его в рабочий сайт. Каждый следующий шаг опирается на согласованный предыдущий.

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

ТЗ и прототип не заменяют друг друга. В ТЗ записано «форма заявки отправляется в CRM и менеджеру в Telegram» — на прототипе видно, где стоит форма, какие в ней поля и что написано на кнопке. Если пункт есть в ТЗ, но не нашёл места на прототипе, это сигнал: либо он не нужен, либо его потеряли. Как написать ТЗ без опыта, мы разобрали в статье «Как составить ТЗ на сайт или веб-сервис».

Что должно быть на прототипе, а что пока не нужно?

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

Что должно быть:

• Все страницы из схемы или хотя бы по одной странице каждого типа: главная, услуга, карточка товара, статья, контакты.
• Реальные или близкие к реальным заголовки. «Lorem ipsum» в заголовке не даёт понять, работает ли оффер.
• Тексты на кнопках: «Рассчитать стоимость» и «Купить» ведут человека в разные сценарии.
• Поля форм с пометкой, какие обязательные, и место для согласия на обработку персональных данных.
• Что видит человек после действия: «Спасибо, перезвоним за 15 минут», пустая корзина, ошибка оплаты, пустой результат поиска.
• Для магазина и сервиса — роли: что видит гость, покупатель, менеджер, администратор.
• Мобильная версия главного экрана и формы: многие клиенты открывают сайт с телефона, и порядок блоков там может отличаться.

Что пока не нужно:

• Цвета, шрифты, фотографии, иллюстрации и иконки.
• Финальные тексты целиком: достаточно заголовков и смысла абзацев.
• Анимации и эффекты при наведении.
• Пиксельная точность: размеры блоков на прототипе условные.

Как проверить прототип: чек-лист заказчика

Выделите 30 минут, откройте прототип на компьютере и на телефоне и пройдите его глазами клиента, а не своими. Ниже — порядок проверки, который укладывается в это время и ловит большую часть проблем.

1. Первый экран (5 минут). Закройте всё, кроме первого экрана главной. Понятно ли за 5 секунд, что вы продаёте, кому и что сделать дальше? Если нет — правьте заголовок и кнопку, а не цвет.
2. Путь до заявки (5 минут). Представьте клиента с рекламы и пройдите от главной до отправленной формы. Посчитайте шаги. Каждый лишний переход — место, где человек может уйти.
3. Ваши реальные товары или услуги (5 минут). Подставьте самую длинную позицию из прайса и самую короткую. Влезает ли название в карточку? Что будет, если у услуги нет фото или нет цены?
4. Формы (5 минут). Каждое поле нужно менеджеру? Есть ли телефон, если вы перезваниваете? Что человек видит после отправки и куда уходит заявка — в почту, CRM или Telegram?
5. Возражения (5 минут). Выпишите три вопроса, которые клиенты задают по телефону чаще всего: цена, сроки, гарантия, доставка. Найдите на прототипе место, где на них отвечают.
6. Телефон и пустые состояния (5 минут). Откройте мобильную версию. Видна ли кнопка без прокрутки? Что показывается, если поиск ничего не нашёл или корзина пуста?

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

Пример из практики сайта услуг. На прототипе главной стояли блоки «О компании», «Преимущества», «Услуги», «Кейсы», «Контакты». Заказчик прошёл чек-лист и заметил: клиенты звонят прежде всего с вопросом «сколько стоит», а цены на странице нет вообще. Блок с ценами «от» и кнопкой «Рассчитать» поставили вторым после первого экрана. На прототипе это заняло минуты; на готовом сайте пришлось бы менять вёрстку и тексты нескольких блоков.

Какие ошибки в прототипе потом дороже всего исправлять?

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

• Забыли сценарий. Например, повторный заказ в магазине, возврат, оплату по счёту для юрлиц. На прототипе это один-два новых экрана, после сборки — новая логика, поля в базе и проверки.
• Не продумали роли. В личном кабинете оказалось, что менеджер должен видеть только своих клиентов, а не всех. Это меняет права доступа во всём приложении.
• Структура поменялась после макета. Если на макете решили объединить два раздела в один, дизайнер перерисует страницы, а верстальщик переделает навигацию и ссылки.
• Лишние поля в формах. Каждое обязательное поле снижает число отправленных заявок; убрать его проще до того, как форму связали с CRM.
• Нет мобильной версии. Если прототип согласовали только для компьютера, на телефоне порядок блоков придумают уже на вёрстке — и, возможно, не так, как вы ожидали.
• Утверждение «по картинке». Прототип согласован, но с серыми блоками вместо заголовков. На макете появляются реальные тексты — и оказывается, что смысл другой.

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

Сколько раундов правок прототипа предусмотрено и что считается сменой концепции?

По прайсу у лендинга — до 2 раундов правок: на этапе прототипа/дизайна и после сборки; у корпоративного сайта — 1 на макете и 1 на готовой сборке. У интернет-магазина, веб- и мобильного приложения — до 2 раундов на прототипе и до 2 на готовой сборке. Смена концепции после согласования — отдельно.

Где именно в тарифе стоит прототип:

• Лендинг — от 24 000 ₽, 2 дня: прототип и дизайн одной страницы под ваш контент.
• Корпоративный сайт — от 56 000 ₽, 3–4 дня: отдельного прототипа в этапах нет — бриф и карта сайта, затем дизайн-макет ключевых страниц; порядок блоков согласуют на макете.
• Интернет-магазин — от 104 000 ₽, от 5 дней: дизайн-прототип каталога, карточки товара, корзины и оформления заказа.
• Веб-приложение — от 160 000 ₽, от 10 дней: прототип экранов и схема базы данных.
• Мобильное приложение — от 200 000 ₽, от 2 недель: прототип и дизайн ключевых экранов.

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

Когда отдельный прототип не нужен?

Отдельный прототип можно не делать, если страница одна или их немного, структура типовая, тексты уже готовы и у вас есть понятный образец. Тогда сразу рисуют макет, а логику согласуют на нём. Чем больше сценариев и ролей, тем больше смысла в отдельном прототипе.

• Можно пропустить или совместить с макетом: лендинг под одну услугу, сайт-визитка, редизайн без смены структуры (у нас — от 29 000 ₽, 2–3 дня), новая страница по образцу существующих.
• Не стоит пропускать: интернет-магазин, личный кабинет, CRM, сервис с оплатой и ролями, мобильное приложение, сайт с калькулятором или сложной формой.
• Можно сократить: если у вас уже есть подробное ТЗ с эскизами экранов или старый сайт, который устраивает по логике, прототип делают только для новых или изменённых страниц.

Обратная ситуация тоже бывает: заказчик хочет прорисовать в прототипе каждую страницу корпоративного сайта на 8 разделов. Обычно хватает прототипа по одному экземпляру каждого типа страницы — остальные собираются по тому же шаблону.

Нужно ли заказчику уметь работать в Фигме?

Нет. Прототип в Figma открывается по ссылке, а комментарии к файлам и прототипам, как сказано в справке Figma о комментариях, можно оставлять из браузера — устанавливать приложение не обязательно. Кто может открыть файл, задаёт исполнитель в настройках доступа.

Что полезно знать, чтобы смотреть прототип без лишних вопросов:

• Если исполнитель сделал кликабельный прототип, открывайте его в режиме просмотра прототипа (значок треугольника): так экраны переключаются по нажатию, как на сайте.
• Комментарий ставится на конкретное место экрана — пишите его там, где проблема, а не общим сообщением в мессенджер.
• Мобильные экраны удобнее смотреть с телефона по той же ссылке.
• Если Figma попросит войти, а заводить аккаунт не хотите, попросите PDF или картинки экранов и разберите прототип на созвоне: замечания тогда фиксирует исполнитель и присылает вам на подтверждение.

Что происходит после согласования прототипа?

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

Дальше по договору всё идёт обычным порядком: сборка, проверка на тестовом адресе, приёмка. На приёмку у заказчика 5 рабочих дней — за это время он подписывает акт или присылает мотивированный отказ с перечнем замечаний. После акта действует гарантия 30 календарных дней: ошибки, возникшие по вине исполнителя, устраняются бесплатно. Как устроены все этапы целиком, — в статье «Как мы делаем сайты», а состав работ по разным типам проектов — на странице заказной разработки.

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

Короткие ответы на частые вопросы

Чем прототип сайта отличается от макета?

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

Сколько правок прототипа входит в цену?

По прайсу у лендинга — до 2 раундов правок: на этапе прототипа/дизайна и после сборки; у корпоративного сайта — 1 на макете и 1 на готовой сборке. У интернет-магазина, веб- и мобильного приложения — до 2 раундов на прототипе и ещё до 2 на сборке. Правки идут в рамках согласованной структуры, смена концепции — отдельно.

Нужно ли платить за прототип отдельно?

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

Можно ли пропустить прототип, чтобы сэкономить время?

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

Нужно ли устанавливать Фигму, чтобы посмотреть прототип?

Нет: по справке Figma файлы и прототипы открываются и комментируются прямо в браузере, приложение ставить не обязательно. Если Figma попросит войти, а заводить аккаунт не хочется, присылаем PDF или картинки и разбираем прототип на созвоне.

Услуги и кейсы по теме: заказная разработка · цены и сроки