Заказчик хочет увидеть дизайн будущего сайта: главную страницу, красивые фотографии, фирменные цвета. Дизайнер готовит макет, но при согласовании выясняется, что забыли важную услугу, форму заявки нужно перенести выше, а часть разделов вообще не нужна.
Теперь придётся менять уже готовую работу. Хотя всё это можно было решить раньше — на этапе структуры.
Для этого и нужен прототип. Он показывает, из каких страниц и блоков будет состоять сайт, где находится нужная информация и как посетитель сможет выполнить свою задачу.
Но делать отдельный прототип для каждого проекта необязательно. Небольшую визитку по готовым материалам часто можно сразу собирать в браузере.
Подробнее о выборе формата — в статье «Создание сайта для бизнеса».
1Что на прототипе есть, а чего нет
Прототип — это схема будущего сайта, на которой можно увидеть:
- какие страницы и разделы нужны;
- в каком порядке расположены блоки;
- где будут заголовки, тексты, фотографии и формы;
- какие кнопки нужны и куда они ведут;
- что должен сделать посетитель: позвонить, оставить заявку или выбрать товар.
На этом этапе важнее содержание и логика, чем внешний вид.
Например, для страницы услуги нужно определить, что человек увидит сначала: описание предложения, условия, примеры работ или форму обращения.
При этом прототип не обязан показывать окончательные цвета, шрифты и изображения. Эти вопросы относятся к дизайну.
Что проверять в первую очередь
Посмотрите на страницу глазами будущего клиента.
Понятно ли, куда он попал?
Из первого экрана должно быть ясно, что предлагает компания.
Легко ли найти нужную информацию?
Посетитель не должен искать контакты, условия или описание услуги среди случайных блоков.
Понятно ли следующее действие?
Позвонить, написать, оставить заявку, открыть каталог — основной путь должен быть очевиден.
Нет ли лишних разделов?
Каждая страница должна решать конкретную задачу, а не просто увеличивать размер сайта.
Если пока непонятно, какой формат нужен бизнесу, начните со статьи «Что такое сайт и нужен ли он бизнесу».
2Почему это делают до дизайна и вёрстки
Исправить структуру на этапе прототипа обычно проще, чем переделывать готовый сайт.
Например, заказчик решил перенести форму заявки ближе к началу страницы.
На прототипе достаточно изменить порядок блоков.
Если дизайн уже утверждён, придётся корректировать макет. А на готовом сайте — менять вёрстку и заново проверять отображение на разных устройствах.
| Изменение | На прототипе | На готовом сайте |
|---|---|---|
| Убрать лишний блок | Изменить структуру | Исправить вёрстку |
| Перенести форму выше | Поменять порядок секций | Изменить страницу и проверить мобильную версию |
| Добавить новую страницу | Подготовить её схему | Разработать и подключить страницу |
| Изменить расположение кнопок | Поправить схему | Изменить интерфейс и проверить работу |
Поэтому в проектах, где требуется отдельное проектирование, этапы обычно идут последовательно:
Структура → прототип → дизайн → вёрстка → программирование.
Прототип отвечает на вопрос, что должно быть на странице.
Дизайн показывает, как это будет выглядеть.
Вёрстка превращает согласованный макет в работающую страницу.
Прототип не гарантирует, что после запуска не понадобится ни одной правки. Но помогает разобраться со структурой до того, как изменения начнут затрагивать дизайн и код.
Для лендинга это может быть одна страница с основным предложением и формой заявки. Для сайта-визитки — несколько страниц с услугами и контактами.
Для каталога или магазина дополнительно нужно продумать категории, карточки товаров и переходы между ними.
3HTML-прототип и макет в Figma
Здесь важно не путать два формата работы.
HTML-прототип
Это страница, которую уже можно открыть в браузере.
На ней видны структура, тексты, блоки и основные элементы интерфейса. Можно проверить, как всё расположено на компьютере и телефоне, перейти между страницами и внести изменения.
При этом уникального дизайн-макета в Figma может не быть.
В ВебШаг такой подход используем для визиток и лендингов от 150 000 ₽.
В этот формат входят:
- проработка структуры;
- подготовка текстов;
- HTML-прототип;
- оформление и разработка сайта без отдельного уникального макета в Figma.
Важно: 150 000 ₽ — стоимость разработки сайта в таком формате, а не цена одного прототипа.
Дизайн в Figma
Это отдельная проработка внешнего вида сайта: цветов, типографики, изображений, расположения элементов и общего визуального стиля.
Такой формат подходит, когда важен индивидуальный дизайн по брендбуку компании.
У ВебШаг разработка визитки или лендинга с дизайном в Figma по брендбуку и базовым AI-ассистентом начинается от 250 000 ₽.
Токены языковой модели оплачиваются отдельно.
Когда можно обойтись без обоих этапов
Если заказчик уже подготовил тексты, фотографии, структуру и примеры оформления, отдельный прототип и дизайн-макет могут не понадобиться.
Для таких визиток и лендингов ориентир составляет 50–80 000 ₽.
У студии нет обязательного требования делать Figma-макет для каждого небольшого сайта.
Подробнее о разнице в стоимости — в статье «Сколько стоит разработать сайт».
4Что смотреть заказчику
Прототип полезен, когда заказчик действительно проверяет его содержание, а не просто подтверждает, что всё выглядит нормально.
Для согласования достаточно пройти несколько шагов.
1. Проверьте первый экран
Понятно ли, чем занимается компания и что предлагает?
Если заголовок слишком общий, его лучше исправить сейчас.
2. Найдите главное действие
Легко ли оставить заявку, позвонить или перейти к выбору товара?
Не приходится ли искать кнопку среди второстепенных блоков?
3. Проверьте порядок информации
Например, для страницы услуги важно понять, где показываются условия, цены, примеры работ и ответы на вопросы.
Не стоит заставлять клиента читать историю компании, если он пришёл узнать стоимость конкретной услуги.
4. Посмотрите мобильную версию
Удобно ли расположены блоки? Не перегружен ли первый экран? Можно ли без труда найти форму и контакты?
Если структура неудобна на телефоне, это лучше исправить до окончательного оформления.
5. Отметьте недостающие материалы
Например:
- нет фотографии услуги;
- не подготовлены цены;
- нужны реквизиты;
- отсутствуют описания отдельных направлений.
Такой список поможет собрать материалы до дальнейшей разработки.
И главное: не нужно оценивать прототип как окончательный дизайн.
На этом этапе важно согласовать содержание, порядок блоков и путь пользователя. Цвета, шрифты и оформление можно обсуждать отдельно, если проект предусматривает разработку дизайна.
5Когда прототип можно не делать отдельно
Не каждому сайту требуется отдельный этап проектирования.
Например, компания заказывает небольшую визитку. Уже есть тексты, фотографии, список услуг и примеры сайтов, которые нравятся.
В таком случае можно сразу переходить к разработке страниц.
Обычно отдельный прототип не требуется, если:
- страниц немного и их состав уже согласован;
- все основные материалы подготовлены;
- не нужны сложный каталог, личный кабинет и нестандартные функции;
- заказчик понимает, какой результат хочет получить;
- структуру можно согласовать непосредственно на рабочей странице.
Именно так часто разрабатываются компактные визитки и лендинги по готовым материалам.
Когда лучше не пропускать проектирование
Прототип полезен, если:
- у сайта много разделов;
- несколько сотрудников заказчика участвуют в согласовании;
- ещё не определена структура;
- требуется продумать сложный путь пользователя;
- нужно переработать существующий сайт, а не просто обновить его оформление.
Особенно это касается редизайна.
Если старый сайт неудобен из-за запутанной структуры, простая замена цветов и фотографий проблему не решит.
Сначала нужно понять, как должны быть устроены страницы. Подробнее — в статье «Редизайн сайта: когда пора».
Отдельный прототип нужен не ради дополнительного этапа разработки. Он полезен тогда, когда структуру сайта ещё предстоит определить и согласовать.
6Сколько это стоит и с чего начать
У ВебШаг нет отдельного прайса на услугу «только прототип сайта».
Прототипирование рассматриваем как часть разработки, если оно действительно требуется проекту.
Основные ориентиры:
| Формат разработки | Стоимость |
|---|---|
| Визитка или лендинг по готовым материалам, часто без отдельного прототипа | 50–80 000 ₽ |
| Визитка или лендинг с HTML-прототипом, структурой, текстами и оформлением без уникального макета в Figma | От 150 000 ₽ |
| Визитка или лендинг с дизайном в Figma по брендбуку и базовым AI-ассистентом | От 250 000 ₽ |
| Каталог, интернет-магазин или крупный корпоративный сайт | Чаще от 350 000 ₽ |
Для варианта с AI-ассистентом токены языковой модели оплачиваются отдельно.
Минимальный заказ студии — 50 000 ₽.
Разработка небольшого сайта — 50–80 000 ₽ по готовым материалам, от 150 000 ₽ с HTML-прототипом и проработкой содержания, от 250 000 ₽ с дизайном в Figma по брендбуку и базовым AI-ассистентом. Это стоимость сайтов, не отдельных прототипов. Точная смета — после брифа.
Перед оценкой достаточно ответить на четыре вопроса.
1. Что посетитель должен сделать на сайте?
Позвонить, оставить заявку, выбрать товар или выполнить другое действие?
2. Какие страницы нужны?
Главная, услуги, каталог, контакты? Или структуру ещё предстоит определить?
3. Какие материалы уже готовы?
Тексты, фотографии, брендбук, примеры оформления?
4. Нужен индивидуальный дизайн?
Или достаточно аккуратно собрать страницы в браузере по согласованной структуре?
После этого можно определить подходящий формат разработки.
Если всё подготовлено, нет смысла добавлять отдельный прототип только ради соблюдения формального порядка этапов.
Если структура ещё не определена, лучше разобраться с ней до дизайна и программирования.
Прототип не делает сайт автоматически удобным или эффективным. Он помогает заранее согласовать решения, от которых зависят дальнейшие работы.