Прототип сайта: зачем он до дизайна и как мы собираем текстовый прототип

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

Что ищут: 2 051 запрос «прототип сайта» в месяц

Спрос по Вордстату ¹ на начало ноября 2026 года, Россия, показов в месяц.

Ищут двое: тот, кто заказывает сайт и хочет понять, за что платит на первом этапе, и тот, кто рисует прототип сам. Эта статья для первого. Если вам нужна инструкция, как нарисовать прототип в Figma своими руками (запрос «прототип в фигме» набирает 165 показов), здесь её не будет: мы разбираем прототип как этап заказа сайта.

Текстовый прототип и схема в Figma: в чём разница

Прототипом называют две разные вещи. Схема, или вайрфрейм, это экран в программе вроде Figma: серые прямоугольники на месте картинок, линии вместо текста, кнопки без надписей. Текстовый прототип это документ, где по порядку идут настоящие заголовки, тексты, цены, надписи на кнопках и поля форм.

Для сайтов услуг и лендингов мы начинаем с текста. Владельцу проще поправить фразу «замер в течение недели» на «замер на следующий день», чем объяснить, что не так с серым прямоугольником. Схему рисуем, когда это нужно проекту или клиенту: детскому клубу цифровых навыков КИБЕРиУМ по договорённости сделали этапами бриф и концепцию, чёрно-белый прототип, цветной макет в Figma и вёрстку, и каждый этап согласовывали отдельно.

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

На каком этапе ошибка дешевле всего

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

На прототипе ловятся и наши собственные ошибки. ЗенРемСтрою, который ремонтирует квартиры в Петербурге, мы предложили показать на сайте оплату долями, 33, 33 и 34%. Клиент ответил, что ремонт и так оплачивают после каждого этапа, и на сайт пошла поэтапная оплата. Спор занял одну переписку, а не перерисованный блок цен. Страницу сдали 4 июля 2026 года, через 12 дней после прототипа.

Как мы собираем текстовый прототип: 5 шагов

1. Бриф. Созвон на 40–60 минут или анкета, если владельцу удобнее письменно: что продаёте, кому, по какой цене, чем отличаетесь, какие материалы уже есть.
2. Факты. Цены «от», гарантии, сроки, работы с цифрами, ответы на частые вопросы клиентов. Без них прототип выходит общими словами.
3. Документ. Каждый экран каждой страницы: заголовок, текст, надпись на кнопке, поля формы, что будет на фото. Для лендинга это около девяти блоков на одной странице, для сайта компании примерно столько же на каждую страницу.
4. Вопросы о фактах в тексте. Чего нет в брифе, спрашиваем прямо в прототипе. У ЗенРемСтроя в конце документа стояли шесть таких вопросов. Компания по защите информации получила 26 июля прототип с вопросами и списком недостающих материалов, через шесть дней после брифа, а 12 августа сайт открылся на своём адресе.
5. Правки и вторая версия. Правки удобнее присылать одним списком или комментариями в документе. После согласования начинаем дизайн.

Сколько времени уходит на первые шаги, видно по датам наших проектов.

Все даты 2026 года, из переписки с клиентами и этапов проектов в нашем кабинете.

Сколько версий нормально: от одной до трёх

В наших проектах прототип проходил одну, две или три версии. У TeenZone в Троицке три версии сменились с 1 по 11 сентября, и блок «Как дом культуры из детства» собран из слов владелицы на созвоне 10 сентября. У сайта с витриной лотов с торгов три версии ушли клиенту за неделю, 9, 15 и 16 июля. Продакшн White Vision перешёл к дизайну после второй версии, ТИМ ФЕСТ согласовал вторую версию через неделю после старта.

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

Элитар показал другой способ сэкономить время. Дизайн-концепцию там начали рисовать, пока прототип ещё правили, и 30 июля показали клиентке, а правки текстов с 7 августа собирали в общем документе. Так можно, когда порядок блоков уже ясен и спор идёт о формулировках.

Что согласовать в прототипе: чек-лист

1. Порядок блоков идёт по вопросам вашего клиента, а не по истории компании.
2. Первый экран говорит, что вы делаете, для кого и где, и называет цену «от» или срок.
3. Цены, гарантии, сроки и цифры верные и вы готовы их выполнять.
4. Ответы на вопросы о фактах внесены, пустых мест в тексте не осталось.
5. Надписи на кнопках называют действие: «Рассчитать стоимость», а не «Отправить».
6. Поля формы: какие обязательны, нужно ли поле под файл, город или комментарий.
7. Куда приходят заявки: почта, Telegram, MAX, CRM.
8. Что стоит первым на телефоне, если порядок там другой.
9. Каких фото, документов и отзывов не хватает и кто их пришлёт.
10. Кто утверждает прототип и за сколько дней отвечает.

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

Что прислать к прототипу

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

• TeenZone: ответы на бриф, анкеты тренеров, фото и видео тренировок, логотип и доступ к карточке в Яндекс Картах, откуда взяли и отзывы родителей.
• Элитар: логотип и фирменный шрифт, фото основательницы и её рассказ о себе, рендеры и описания жилых комплексов.
• ТИМ ФЕСТ: презентацию фестиваля, по ней собрана структура и тексты.
• Некст Высота: бриф, фото команды и реквизиты для документов.

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

Чего прототип не поймает

Как сайт выглядит, видно только в дизайне. Nomad Capital на показе дизайна 1 июля попросил равняться на сайты консалтинговых компаний: логотип слева, шапка уже, картинки по смыслу услуг. В тексте прототипа этого не было и быть не могло. Тон слогана у клиники доктора Баяндиной тоже стал заметен, только когда слова встали на экран рядом с фото.

Не поймает прототип и того, что меняется в бизнесе после запуска. В заметках к 71 нашему кейсу мы насчитали 112 записей о правках после запуска. Чаще всего меняли тексты и фото (24 записи), добавляли или скрывали услуги и страницы (22), настраивали формы и адрес для заявок (15). Новую услугу или новую цену прототип не предскажет. Что меняют на сайте после сдачи, разобрано в статье о правках после запуска.

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

Сколько стоит прототип у нас

Бриф и текстовый прототип входят в цену разработки: сайт у нас стоит от 30 000 ₽, лендинг от 30 000 ₽. Дизайн начинаем после того, как прототип согласован. Как проходит работа целиком, от брифа до передачи сайта на ваш аккаунт, описано на странице разработки сайтов. Если прототип у вас уже есть и нужен только макет, это отдельная работа: разработка дизайна сайта.