Прототип сайта зачем нужен, если можно сразу нарисовать дизайн и сверстать. Короткий ответ: правка структуры в Figma стоит 15 минут, а в свёрстанном HTML - 2 дня программиста. Прототип ловит дорогие ошибки на дешёвом этапе и защищает обе стороны от спора "я хотел не так".
Статья - разбор для владельца бизнеса в СПб, который выбирает подрядчика и не понимает, за что в смете пункт "прототипирование" на 60-80 тысяч. Внутри - 3 уровня прототипа, цены, форматы сдачи, юзабилити-тесты и 6 типичных ошибок. Время чтения - 11 минут.
Материал основан на опыте Сайты2.рф. С 2008 года студия из Кронштадта сделала 550+ проектов, NPS 9,2, средний рост заявок ×2,4 после редизайна, CR 4,8%. В работе - Figma, Axure, ProtoPie, Marvel. На вёрстке и бэке - Tilda, 1С-Битрикс, WordPress, Laravel, React.
Что такое прототип сайта в 2026
Прототип - схема страниц до отрисовки финального дизайна. Показывает, какие блоки идут в каком порядке, как они связаны между собой и что происходит по клику. Цвет, шрифты, картинки тут вторичны.
Раньше прототипом называли распечатку из Visio с прямоугольниками. Сейчас стандарт - кликабельная Figma, где переходы работают как на живом сайте. Заказчик нажимает на кнопку и видит следующий экран. Открывает мобильную версию и листает её на телефоне через QR-код.
Прототип - договор о структуре. Когда стороны утвердили прототип, зафиксировали: на главной 7 блоков в таком порядке, в карточке товара 4 таба, в корзине 3 шага оформления. Дальше дизайнер и программист работают по карте, а не по абстрактному тексту брифа.
Прототип, wireframe и дизайн-макет: в чём разница
Слова часто путают. Разберём по трём уровням.
Wireframe - проволочный каркас. Чёрно-белые блоки с подписями. Не интерактивный, не кликабельный. Задача - показать состав страницы. Используется на ранних этапах, когда обсуждают саму идею структуры.
Прототип - wireframe плюс интерактив. Можно нажимать на кнопки, переключаться между экранами, открывать модалки. Уже видно, как пользователь движется по сайту.
Дизайн-макет - финальная отрисовка. Цвета, шрифты, фотографии, иконки, тени, состояния hover. Это то, что уйдёт в вёрстку.
В реальной работе прототип часто пропускают и сразу делают hi-fi макет. Ошибка выливается в переделки. Подробнее о порядке работ - в статье об этапах разработки сайта.
3 уровня прототипа: lo-fi, mid-fi, hi-fi
Под "прототипом" разные студии понимают разное. Чтобы вы понимали, за что платите, разберём три уровня.
Lo-fi прототип
Низкая детализация. Чёрно-белые блоки, заглушки текста "Lorem ipsum", серые квадраты вместо картинок. Цель - проверить логику и состав страниц.
- Срок: 3-7 дней.
- Цена в Петербурге: 25-45 тыс. ₽ за лендинг, 60-90 тыс. ₽ за корпоративный сайт.
- Подходит для: B2B-проектов, сложных каталогов, портальных решений.
Lo-fi удобен, пока заказчик не определился с количеством разделов и форматом подачи. Правки бесплатные и быстрые.
Mid-fi прототип
Средняя детализация. Появляются базовая типографика, отступы, цветовая логика без брендинга. Текст уже реальный, картинки - стоковые заглушки.
- Срок: 7-14 дней.
- Цена: 45-80 тыс. ₽ за лендинг, 90-150 тыс. ₽ за каталог.
- Подходит для: 80% коммерческих проектов.
Рабочий стандарт студий в СПб. Прототип уже можно показать инвесторам и провести юзабилити-тесты.
Hi-fi прототип
Высокая детализация. По сути готовый дизайн в кликабельном виде. Реальные шрифты, фирменные цвета, фото, анимации переходов.
- Срок: 14-30 дней.
- Цена: 80-120 тыс. ₽ за лендинг, 150-250 тыс. ₽ за корпоративный сайт.
- Подходит для: премиум-проектов, питчей инвесторам, дизайн-систем под крупные интернет-магазины.
Hi-fi прототип = готовый дизайн + интерактив. Граница между ним и финальным макетом размыта.
Прототип сайта зачем платить: 5 причин
Главный ключ статьи раскрываем по пунктам. У прототипа 5 функций, каждая окупается с лихвой.
1. Найти ошибки структуры до вёрстки
По статистике, 60% проектов в первые недели разработки сталкиваются с переделкой структуры. На этапе прототипа правка - 15 минут в Figma. На этапе свёрстанного HTML - 1-2 дня программиста, плюс пересчёт смены в макете. Разница в стоимости - до 50 раз.
2. Согласовать UX до старта разработки
Прототип переводит обсуждение из плоскости "мне не нравится" в плоскость "тут перенесём блок цен выше отзывов". Конкретика снимает 70% споров с заказчиком. Подробнее о приёмке сайта без сюрпризов - в статье о приёмке сайта у студии.
3. Кликабельный тест на живых пользователях
5-7 респондентов на прототипе выявляют 80% проблем интерфейса. Правило Якоба Нильсена 1993 года, работает в 2026. Тестирование на этапе прототипа стоит 15-30 тыс. ₽. На этапе готового сайта переделка обходится в 200-500 тыс. ₽.
4. Точная смета на вёрстку и разработку
По прототипу программист считает реальные часы. Без прототипа смета формируется по словесному ТЗ, и итоговый чек гуляет на 30-50%. С утверждённым прототипом отклонение - 5-10%. Калькуляцию по проекту можно прикинуть в калькуляторе стоимости.
5. Защита от спора "я хотел не так"
Подписанный прототип - юридический документ. К нему прилагают ТЗ и идут в разработку. Если в финале заказчик говорит "я думал, тут будет калькулятор", аргумент разбивается о прототип, где калькулятора не было.
Что входит в прототип
Нормальный прототип - не только главные экраны. В пакет входят:
- Все типы страниц: главная, листинг, карточка, корзина, контакты, статья блога.
- Пользовательские сценарии: регистрация, оформление заказа, обратная связь.
- Состояния элементов: пустой список, загрузка, ошибка, успех.
- Мобильная версия каждого экрана.
- Логика переходов и модальных окон.
- Микро-копирайт: тексты кнопок, подсказки, валидация форм.
Если в прототипе нет мобильной версии, перед вами половина работы. 70% трафика в Петербурге идёт со смартфонов. Полное руководство по подготовке исходных данных - в шаблоне ТЗ и брифе на разработку.
В каких программах делают прототипы
Рынок устаканился вокруг 4 инструментов.
Figma - стандарт индустрии. 90% студий в СПб работают здесь. Бесплатна для малых команд, кросс-платформенная, удобная для совместной работы. Сайты2.рф работает в Figma.
Axure RP - тяжёлая программа. Силён в сложной логике (расчёты, условия, переменные). Применяют для B2B-порталов и SaaS.
ProtoPie - для интерактивной анимации и сложных микровзаимодействий. Используют, когда нужно показать движение элементов и физику.
Marvel - инструмент для быстрых кликабельных скетчей. Подходит, если прототип нужен на 2-3 дня для проверки гипотезы.
В 2026 хватает Figma в 95% случаев. Остальные программы - нишевые.
Стоимость прототипирования сайта в СПб
Цены студий Петербурга в 2026 году.
| Тип проекта | Lo-fi | Mid-fi | Hi-fi |
|---|---|---|---|
| Лендинг | 25-45 тыс. | 45-80 тыс. | 80-120 тыс. |
| Корпоративный сайт | 60-90 тыс. | 90-150 тыс. | 150-250 тыс. |
| Интернет-магазин | 80-150 тыс. | 150-280 тыс. | 280-450 тыс. |
| Редизайн | 40-70 тыс. | 70-130 тыс. | 130-200 тыс. |
Цены для Кронштадта, СПб, Гатчины и Выборга - одинаковые, работа удалённая. Полный прайс по разработке - на странице цены. Подробный разбор калькуляции - в статье о стоимости разработки.
Когда прототип не нужен
Не каждому проекту нужен прототип. Бывают случаи, когда платить за него - выкидывать деньги.
Прототип не нужен, если:
- Микро-лендинг на 1 экран с одним призывом к действию.
- Шаблонная сборка на Tilda без кастомной логики.
- Копия проверенной страницы конкурента (с правками текста и фирмы).
- Срочная посадочная под рекламную кампанию на 2-3 недели.
В таких случаях прототип съест 30% бюджета и не даст пользы. Сразу делают дизайн-макет и сверстают. Также прототип избыточен, если сайт - точная копия предыдущей версии вашего же ресурса с косметическим обновлением.
Юзабилити-тесты на прототипе
Скрытая ценность прототипа - возможность тестов. Респондент получает кликабельную ссылку, ему ставят задачу ("найди условия доставки", "оформи заказ на 2 единицы товара"), и наблюдают, где он спотыкается.
Сколько респондентов нужно
5-7 человек. После 5-го новые проблемы появляются редко. Закон Нильсена, проверенный 30 лет. Подробности об экспериментах с конверсией - в материале о росте конверсии сайта.
Что замеряют
- Время выполнения задачи.
- Количество кликов до цели.
- Места заминок и возвратов.
- Прямые комментарии респондента.
Сколько стоит тест в Петербурге
15-30 тыс. ₽ за серию из 5-7 интервью по 30 минут. Респондентов набирают через UserTesting, Yandex Tolokа или собственную базу клиентов. Для B2B-проектов лучше брать представителей целевой ниши, для массовых - обычных пользователей из целевой возрастной группы.
Тест на прототипе экономит 200-500 тыс. ₽ на переделках после запуска. Вложение окупается на первой же серьёзной правке.
6 ошибок при прототипировании
Из 550+ проектов студии собрался типичный список граблей.
1. Прототип без мобильной версии. На десктопе всё красиво, на телефоне - сломанная сетка. 70% трафика теряется.
2. Только главная страница. Без листинга, карточки и корзины не видна логика сайта. Программист доделывает разделы "по наитию", и всплывает 3 переделки.
3. Заглушки вместо реальных текстов. "Lorem ipsum" обманывает: реальные тексты длиннее, шапки разделов не помещаются, кнопки расползаются.
4. Нет состояний. Прототип показывает только "счастливый сценарий". А что видит пользователь, когда форма не отправилась или товаров не нашлось? Если прототип не отвечает, доделывают на ходу.
5. Согласование "на словах". Заказчик кивнул на встрече, потом передумал. Без письменного утверждения прототипа правки летят бесконечно. Подписывайте акт.
6. Прототип сразу в hi-fi. Дорого и медленно. Сначала проверяют структуру на lo-fi, потом доводят до mid-fi или hi-fi.
FAQ
Можно ли сделать сайт без прототипа?
Можно, если это микро-лендинг или шаблон. Для корпоративного сайта или магазина - нет, без прототипа гарантированы переделки на 30-50% бюджета разработки.
Сколько по времени делается прототип?
Lo-fi - 3-7 дней. Mid-fi - 7-14 дней. Hi-fi - 14-30 дней. Сроки для лендинга. Для большого каталога умножайте на 1,5-2.
Кто должен утверждать прототип со стороны заказчика?
Тот, кто принимает решения и отвечает за сайт перед бизнесом: владелец, директор, руководитель маркетинга. Утверждение через "посредника без полномочий" приводит к переделкам после показа боссу.
Что если в процессе разработки нужны правки в прототипе?
Мелкие правки (текст кнопки, перестановка пунктов меню) - в рамках поддержки. Структурные (новый блок, перестройка раздела) - оформляются доп.соглашением и тарифицируются отдельно.
Прототип входит в стоимость дизайна?
В Сайты2.рф - да, mid-fi прототип входит в стандартный пакет дизайна. У некоторых студий идёт отдельной строкой. Уточняйте до подписания договора.
Можно ли использовать чужой прототип у моего подрядчика?
Можно, если права на прототип переданы вам по договору. Студии передают исходники в Figma по акту приёма-передачи.
Что в итоге
Прототип сайта зачем нужен - чтобы поймать дорогие ошибки на дешёвом этапе. Правка структуры в Figma в 50 раз дешевле, чем в свёрстанном коде. Утверждённый прототип защищает заказчика от переделок и студию от споров "я хотел не так".
Если планируете разработку или редизайн в Петербурге, начните с прототипа. Сайты2.рф из Кронштадта делает прототипы в Figma на проектах любого масштаба - от лендинга для бизнеса в Гатчине до интернет-магазина с филиалами в Выборге. Рассчитать стоимость прототипа и разработки можно в калькуляторе, обсудить детали - через контакты.
