Прототип сайта — черновая схема страниц: где заголовок, форма, прайс, кейсы, как пользователь переходит между экранами. Без цветов, фото и «вау-анимаций». Зато с текстами по смыслу и понятными кнопками. В NUGU прототип — обязательный этап между брифом и дизайном: вы согласуете логику продаж, а не спорите о оттенке синего.
Зачем тратить время на прототип
Экономия бюджета. Перенести блок на wireframe — 10 минут. Перерисовать финальный макет и переверстать — часы и доплата.
Фокус на задаче. На этапе прототипа видно, если «О компании» занимает пол-экрана, а CTA нет на mobile. Дизайн это только замаскирует.
Общий язык с заказчиком. Не все клиенты читают ТЗ на сайт одинаково. Схема экранов понятна маркетологу, директору и менеджеру по продажам.
Основа для контента. В прототипе фиксируются заголовки и объём текста в каждом блоке — копирайтер или заказчик знает, что писать.
Виды прототипов
Low-fidelity (низкая детализация). Прямоугольники, линии, подписи «фото», «форма». Быстро, для первого согласования структуры сайта для продаж.
Mid-fidelity. Реальные или черновые тексты, иерархия заголовков, список полей формы, пункты меню.
Интерактивный. Клик по кнопке ведёт на следующий экран — удобно проверить сценарий «главная → услуга → заявка».
High-fidelity прототип уже близок к макету — имеет смысл только для сложных продуктов с уникальным UI.
Для большинства SMB в Сочи достаточно mid-fidelity на 5–15 экранов.
Этапы работы с прототипом в NUGU
- Бриф и цели — одно главное действие, аудитория, конкуренты.
- Карта страниц — список URL и назначение каждой.
- Wireframe ключевых экранов — главная, услуги, типовая услуга, контакты; для лендинга — все блоки по порядку.
- Согласование 1–2 раунда — правки структуры, не декора.
- Передача в дизайн — прототип = ТЗ для UI-дизайнера и разработчика.
Срок прототипа: 2–5 рабочих дней для лендинга, до двух недель для корпоративного сайта с десятком шаблонов.
Что должно быть на прототипе каждой страницы
- Иерархия заголовков H1–H3 (черновик).
- Расположение CTA: кнопка, телефон, мессенджер.
- Блоки доверия: отзывы, цифры, логотипы клиентов.
- Форма: поля, текст кнопки, что после отправки.
- Footer: контакты, юридические ссылки, карта при необходимости.
- Поведение mobile: порядок блоков часто другой, чем на desktop.
Прототип vs сразу дизайн
| Подход | Плюсы | Минусы |
|---|---|---|
| Сначала прототип | Дешевле правки, ясная структура | +3–7 дней на старте |
| Сразу дизайн | Быстрее «увидеть красоту» | Дорогие переделки, споры о декоре вместо логики |
Если подрядчик пропускает прототип и сразу рисует «как на Pinterest» — рискуете получить сайт, который нравится вам, но не конвертирует клиентов.
Типичные ошибки при прототипировании
- Согласовывают прототип без участия того, кто отвечает на заявки — потом форма «неудобная».
- Копируют структуру конкурента один в один без своей воронки.
- Оставляют «Lorem ipsum» до дизайна — не видно, где текст не влезет.
- Забывают состояния: успех формы, пустой каталог, длинное меню.
- Не проверяют прототип на телефоне — половина аудитории в Сочи с mobile.
Прототип и разработка
Разработчик получает прототип + UI-kit. Меньше вопросов «а что здесь должно быть». Для создания сайта под ключ это снижает срок приёмки.
Интерактивный прототип можно отдать на юзабилити-тест: 3–5 человек из целевой аудитории проходят сценарий — дешевле, чем тест после запуска.
Стоимость
Отдельно прототип в NUGU редко продаётся — он входит в пакет разработки. Ориентиры полного проекта:
- лендинг — от 90 000 ₽;
- сайт услуг — от 160 000 ₽;
- корпоративный — от 280 000 ₽;
- интернет-магазин — от 450 000 ₽;
- «Быстрый старт» — 220 000 ₽ за 14 дней (упрощённый прототип + запуск).
Чек-лист согласования прототипа
- Путь клиента от входа до заявки понятен без пояснений.
- На каждом ключевом экране есть следующий шаг.
- Тексты заголовков отражают оффер, а не «добро пожаловать».
- Форма не перегружена полями.
- Mobile-версия просмотрена отдельно.
- Юридические страницы и 404 не забыты.
- Команда продаж подтвердила, что блоки закрывают их типовые вопросы.
Прототип для разных форматов сайта
Лендинг. Прототип — одна длинная схема с якорями. Согласование занимает 1–2 дня при готовом оффере.
Сайт услуг. Отдельные wireframe для главной, каталога услуг и типовой услуги. Шаблон типовой страницы экономит время: новая услуга = новый текст в той же сетке.
Корпоративный. Прототипируем разделы «О компании», «Карьера», «Партнёрам» только если они влияют на продажи. Остальное — второй этап.
Интернет-магазин. Карточка товара, каталог с фильтрами, корзина, checkout — отдельные экраны с состояниями «товар в наличии / под заказ».
Как участвовать заказчику
Подготовьте до созвона: список услуг, цены или диапазоны, 3–5 вопросов клиентов, примеры сайтов «нравится логика». На согласовании прототипа решайте «что где лежит», не «какой шрифт». Один ответственный от вашей стороны — иначе правки затягиваются на недели.
Когда обращаться в NUGU
Нужен новый сайт, редизайн или посадочная под рекламу — начните с прототипа в составе проекта. Мы в Сочи делаем wireframe в Figma, проводим созвон-согласование и только после вашего «ок» переходим к визуалу.
Оставьте заявку в контактах: опишите задачу, пришлите ссылку на текущий сайт — покажем, как будет выглядеть этап прототипа в вашей смете.
Прототип и сроки проекта
Чёткий прототип сокращает общий срок разработки: дизайнер не ждёт ответов «куда поставить блок», разработчик видит все состояния экранов. Для лендинга от 90 000 ₽ типичный цикл — 2–3 недели от брифа до публикации; для сайта услуг от 160 000 ₽ — 3–5 недель. Задержки чаще из-за несогласованного прототипа, чем из-за вёрстки.
Прототип можно показать инвестору или франчайзи до траты бюджета на дизайн — это аргументированная презентация продукта, а не «мы хотим сайт как у них».
В Сочи мы проводим согласование прототипа очно или по видеосвязи — за один-два созвона вы видите всю логику будущего сайта до оплаты дизайна.