Что такое прототип сайта?
Прототип сайта отвечает на 3 вопроса до начала дизайна: какие страницы будут на сайте, что стоит на каждой из них и в каком порядке, куда посетитель нажмёт дальше. Схему рисуют серыми блоками без цвета, фото и шрифтов, поэтому обсуждают логику, а не вкусы. Правка на этапе схемы занимает минуты: передвинуть блок с ценами выше или добавить поле в форму. Та же правка в готовом дизайне или в коде будущего сайта стоит часов работы дизайнера и разработчиков.
Чем прототип отличается от дизайн-макета сайта?
Схема, дизайн-макет и вёрстка идут друг за другом, и у каждого шага своя задача. Разница по 5 признакам:
| Признак | Прототип | Дизайн-макет | Вёрстка |
|---|---|---|---|
| Что показывает | Состав и порядок блоков, путь пользователя | Как сайт будет выглядеть | Как сайт работает в браузере |
| Цвет, шрифты, фото | Нет, серые блоки | Да, финальные | Да, в коде |
| Содержание | Черновые формулировки и реальные заголовки | Финальные формулировки | Наполнение в системе управления |
| Цена правки | Минуты | Часы | Часы и дни |
| Кто делает | UX-дизайнер или проектировщик | UI-дизайнер | Верстальщик, разработчик |
Какие бывают прототипы сайта?
Схемы различают по детализации, и выбор зависит от сложности проекта. Чаще всего встречаются 4 вида:
- Набросок на бумаге. 10 минут и маркер: подходит, чтобы быстро понять порядок блоков на одном экране.
- Вайрфрейм (низкая детализация). Серые прямоугольники на месте картинок и абзацев, видна только структура.
- Детализированная схема. Реальные заголовки, поля, подписи кнопок, примерные формулировки. Большинству сайтов услуг хватает именно этой детализации.
- Кликабельный прототип. Экраны связаны переходами, по ним можно пройти путь от входа до заявки. Нужен для магазинов, сервисов и личных кабинетов, где у пользователей много шагов.
Что должно быть в прототипе
Схема отвечает за смысл и порядок, поэтому в ней должны быть 6 вещей:
- Навигация
Меню, хлебные крошки, футер. Видно, как попасть в любой раздел и вернуться назад.
- Заголовки и тексты
Реальные заголовки и хотя бы черновые абзацы: от их длины зависит, поместится ли блок на экран.
- Кнопки и поля
Подписи кнопок, поля заявки, отметки обязательных полей, согласие на обработку данных.
- Блоки доверия
Цены, примеры работ, гарантии, ответы на вопросы клиентов: то, что помогает принять решение.
- Состояния интерфейса
Ошибка в форме, пустая корзина, ничего не найдено, успешная отправка.
- Мобильная версия
Порядок блоков на телефоне, меню, кнопка связи. Мобильную схему рисуют сразу, а не после дизайна.
Создание прототипа сайта: 6 этапов
Создать прототип можно за 6 этапов, и пропускать первые 2 нельзя: без них схема рисуется наугад.
- 01Цели и аудитория
Кто придёт на сайт, с какой задачей и какое действие мы от него ждём: звонок, заявка, покупка.
- 02Структура
Список разделов под поисковые запросы и сценарии клиентов. Как её составить, рассказываем в статье про структуру сайта.
- 03Контент
Что сказать в каждом разделе: тексты, цены, фото, документы. Без этого схема показывает пустые коробки.
- 04Схемы ключевых экранов
Главная, услуга или карточка товара, каталог, контакты. Остальные шаблоны собираются из тех же блоков.
- 05Мобильная версия
Те же схемы для экрана телефона: что остаётся на первом экране, что уходит ниже.
- 06Проверка и согласование
Проходим путь пользователя по экранам, собираем замечания, фиксируем итоговую схему как основу для дизайна.
Как сделать прототип сайта в Фигме?
Создать схему в Figma можно за 7 шагов, и для этого хватает бесплатного тарифа:
- Создайте фреймы под компьютер (ширина 1440 пикселей) и телефон (390 пикселей).
- Включите сетку: 12 колонок на десктопе, 4 на телефоне.
- Разложите блоки серыми прямоугольниками и подпишите их: «Шапка», «Цены», «Заявка».
- Кнопки, карточки и поля формы сделайте компонентами, чтобы правка в одном месте менялась везде.
- Используйте Auto Layout: блоки сами раздвигаются, когда текст становится длиннее.
- В режиме Prototype свяжите экраны переходами по клику, чтобы получился кликабельный сценарий.
- Откройте доступ по ссылке с правом комментирования: команды заказчика и дизайнера обсуждают схему прямо на экранах.
Программы и сервисы для прототипирования
Создавать схемы удобно в 6 инструментах, и большая часть из них открывается прямо в браузере:
| Инструмент | Для чего удобен | Доступ |
|---|---|---|
| Figma | Схемы, дизайн и кликабельные сценарии в одном файле | Онлайн, есть бесплатный тариф |
| Penpot | Похожая на Figma логика, можно развернуть на своём сервере | Бесплатно, открытый код |
| Miro, FigJam | Схемы структуры и пути посетителя, мозговой штурм | Доски в браузере, есть бесплатный тариф |
| Axure RP | Сложные интерфейсы сервисов с условиями и логикой | Платная программа, есть пробный период |
| Balsamiq | Быстрые эскизы в стиле наброска | Платный сервис, есть пробный период |
| Бумага и маркер | Первый набросок за 10 минут | Бесплатно |
Условия тарифов меняются, перед выбором сервиса проверьте их на сайте разработчика.
Как сделать прототип сайта самому и бесплатно?
Сделать схему бесплатно можно за 1 вечер, если идти от контента. Выпишите, что клиент должен узнать на странице, по порядку: что вы предлагаете, сколько стоит, почему вам можно верить, как оставить заявку. Нарисуйте эти блоки на бумаге, потом перенесите в бесплатный сервис: Figma, Penpot или доску в браузере. Покажите результат 2-3 знакомым из вашей аудитории и попросите найти цену и оставить заявку. Где они спотыкаются, там и правьте.
Создание макета сайта после прототипа
Создание макета сайта начинается, когда схема согласована: дизайнер берёт утверждённый каркас и одевает его в визуальный стиль. Первым рисуют 1 экран, обычно первый экран главной: на нём выбирают шрифты, цвета, стиль фото и кнопок. После согласования стиль переносят на остальные шаблоны, рисуют мобильные версии и состояния элементов, а из повторяющихся деталей собирают UI-кит.
Структура на этом этапе почти не меняется: если в макете вдруг понадобился новый блок, его сначала добавляют в схему. Так дизайн не расходится с каркасом, а разработчики получают готовый макет сайта, по которому понятно, что и как верстать. Про визуальную часть подробнее в статье о веб-дизайне сайта.
Разработка макетов сайтов: сколько макетов нужно
Макет рисуют не на каждую страницу, а на каждый уникальный шаблон, в 2 версиях: для компьютера и для телефона. У корпоративного сайта обычно 5 шаблонов: главная, список услуг, услуга, статья, контакты. Значит, нужно 10 макетов плюс UI-кит с кнопками, полями и карточками. У интернет-магазина к ним добавляются каталог с фильтрами, карточка товара, корзина, оформление заказа с выбором доставки и оплаты, личный кабинет.
Создавать отдельный макет для каждой из ста одинаковых страниц услуг не нужно: их собирают из одного шаблона. Поэтому стоимость дизайна зависит от числа шаблонов и состояний интерфейса, а не от общего объёма сайта.
Прототип в разработке сайта: зачем он заказчику
В нашей разработке сайта прототип стоит вторым этапом из 7, сразу после брифа и анализа ниши, и до дизайна, вёрстки, текстов, тестирования и запуска. Для заказчика схема страниц означает 3 вещи: вы видите будущий сайт до того, как платите за дизайн, проверяете, что в нём есть всё нужное для ваших клиентов, и фиксируете договорённости. Структуру и схемы мы собираем с учётом SEO: разделы под запросы и место под текст закладываются раньше дизайна. Порядок всех этапов описан в статье об этапах создания сайта.
Стандарты и требования, которые закладывают в прототип
Часть требований к готовому сайту дешевле заложить в схему, чем исправлять в коде. Проверяем 5 стандартов:
- 152-ФЗ от 27.07.2006: в каждой форме предусмотрены согласие на обработку персональных данных и ссылка на политику.
- Доступность: подписи над полями, понятные сообщения об ошибках, логичный порядок перехода с клавиатуры.
- Core Web Vitals: у картинок и баннеров заранее заданы размеры, чтобы вёрстка не прыгала при загрузке (CLS до 0,1).
- Иерархия заголовков: один H1 на страницу, под ним H2 и H3 по смыслу, а не по размеру шрифта.
- Микроразметка Schema.org: блоки вопросов, хлебные крошки, цены и контакты оформлены так, чтобы их можно было разметить.
Как проверить прототип: отзывы пользователей и команды
Схему проверяют 2 группами людей: будущими посетителями и командой проекта. Пользователям дают задачу без подсказок, например «найдите цену и запишитесь», и собирают отзывы пользователей: где было непонятно, чего не хватило. Команда смотрит со своей стороны: SEO-специалист сверяет разделы с запросами, разработчик ищет то, что будет сложно или медленно работать, заказчик проверяет факты и цены.
Отзыв ценен, когда он про задачу, а не про вкус. Замечание «некрасиво» на этапе схемы откладывают до дизайна, а «не нашёл, сколько стоит» исправляют сразу.
Сколько стоит прототип и как его оплачивают
В наших проектах схема страниц отдельно не оплачивается: она входит в стоимость разработки вместе с дизайном и вёрсткой, а минимальный проект с дизайном, лендинг, стоит от 95 000 ₽. Если нужен только дизайн-макет без вёрстки, считаем отдельную смету после брифа. Оплата идёт по договору: состав работ и сроки фиксируем при подписании, этапы оплаты согласуем там же. Подробнее о составе работ на странице разработки дизайна сайта.
Совет: согласуйте схему письменно, хотя бы ответом в мессенджере. Через месяц, когда начнутся правки дизайна, утверждённый каркас снимет большинство споров о том, что договаривались делать.
Итог: когда без прототипа не обойтись
Детальная схема обязательно нужна там, где у посетителя больше 1 шага до цели: интернет-магазины, сервисы, личные кабинеты, корпоративные сайты с десятками услуг. Для небольшой посадочной страницы хватит детализированной схемы одного экрана, но пропускать этот шаг совсем не стоит: исправить порядок блоков в схеме всегда быстрее, чем в готовом продукте.
Частые вопросы
Нужен ли прототип для лендинга?
Нужен, хотя и в упрощённом виде. Лендинг держится на порядке блоков: оффер, доказательства, цены, ответы на возражения, форма. Схема одной страницы на компьютере и телефоне показывает, хватает ли аргументов и не потерялась ли кнопка заявки. На схему лендинга уходит меньше времени, чем на многостраничный сайт, а переделок после дизайна становится заметно меньше. Подробнее о формате на странице разработки лендинга.
Кто должен делать прототип: заказчик или студия?
Схему делает исполнитель: UX-дизайнер, проектировщик или студия, а заказчик участвует как эксперт по своему продукту и клиентам. Набросок от заказчика полезен как бриф: по нему видно, что для вас важно. Но превращать набросок в рабочую схему с учётом поисковых запросов, сценариев пользователей и требований к формам лучше тому, кто потом будет отвечать за дизайн и вёрстку.
Чем прототип отличается от технического задания?
Техническое задание описывает сайт словами: какие разделы, функции, интеграции, требования к скорости и безопасности. Схема показывает то же визуально: где стоит каждый блок и как посетитель проходит путь. Оба документа дополняют друг друга, и в договоре удобно ссылаться на оба. Как создать первое, рассказываем в статье про техническое задание на сайт.
Можно ли сделать прототип сайта онлайн без программ?
Да, все популярные инструменты для схем открываются в браузере: Figma, Penpot, Miro и FigJam, устанавливать программы не нужно. Для старта хватает бесплатного тарифа, а результат можно показать заказчику или команде по ссылке. Если интернет-сервисы недоступны, набросок на бумаге со снимком на телефон тоже подойдёт: для первой схемы этого достаточно.
