Прототип сайта это серая схема страниц без дизайна: какие блоки стоят на экране, в каком порядке, какие в них заголовки и куда ведут кнопки. Он нужен, чтобы найти ошибки в структуре, пока правка стоит минуты, а не переделку дизайна и кода. Рисуют не каждую страницу, а каждый уникальный шаблон плюс мобильные версии ключевых экранов. Порядок такой: цель страницы, вопросы клиентов, структура, блоки, настоящие тексты, связанные экраны. Готовую схему проверяют на 3–5 людях, похожих на клиентов, и только потом отдают дизайнеру.
Прототип сайта это схема будущих страниц без дизайна: какие блоки стоят на экране, в каком порядке, что написано в заголовках и куда ведут кнопки. По нему заказчик и исполнитель договариваются о смысле и логике до того, как дизайнер начнёт рисовать, а программист верстать. Прототип можно нарисовать на бумаге, собрать в документе или в Figma. Главное в нём не красота, а ответ на вопрос «найдёт ли клиент то, что ищет, и оставит ли заявку».
Что такое прототип сайта простыми словами
Прототип сайта похож на план квартиры перед ремонтом. На плане нет обоев и цвета плитки, но уже видно, где стены, двери и розетки. Двигать стену на плане легко, а после ремонта дорого. С сайтом так же: передвинуть блок на схеме занимает минуту, а в готовой вёрстке может потребовать переделки дизайна, кода и текстов.
На прототипе обычно есть:
- шапка и меню, по которым видно структуру сайта;
- блоки страницы по порядку: первый экран, услуги, цены или условия, отзывы, вопросы, форма;
- настоящие или почти настоящие заголовки и тексты кнопок;
- серые прямоугольники вместо фото и иконок;
- пометки: «здесь калькулятор», «эта кнопка открывает форму», «эти данные берём из CRM».
Рядом с прототипом часто упоминают другие документы. Их легко перепутать, поэтому коротко о разнице.
| Документ | На какой вопрос отвечает | Как выглядит |
|---|---|---|
| Карта сайта (структура) | Какие страницы есть и как они связаны | Дерево или список разделов |
| Прототип | Что и в каком порядке стоит на каждой странице | Серые схемы блоков с текстами |
| Макет дизайна | Как это выглядит: цвета, шрифты, фото | Готовая картинка страницы |
| Техническое задание | Что сайт должен делать и как это проверить | Текст с требованиями и сценариями |
Прототип и техническое задание дополняют друг друга: схема показывает, а ТЗ описывает словами то, что на схеме не видно, например куда уходят заявки. Как собрать ТЗ, разобрано в статье о техническом задании на разработку сайта.
Зачем нужен прототип: что он экономит
Прототип нужен, чтобы найти ошибки в структуре и смысле страниц тогда, когда их исправление почти ничего не стоит. Чем дальше продвинулся проект, тем больше людей и файлов затрагивает одна правка.
Якоб Нильсен из Nielsen Norman Group ещё в 2003 году писал, что изменить решение до начала программирования намного дешевле, чем после, и приводил распространённую оценку «примерно в 100 раз». Точный множитель у каждого проекта свой, но направление понятно любому, кто переделывал готовую страницу.
Что прототип даёт владельцу бизнеса на практике:
- Общая картинка. Вы, дизайнер и программист одинаково понимаете, что будет на странице. Меньше споров «я думал, тут будет по-другому».
- Тексты раньше дизайна. Становится видно, каких текстов, фото и цен не хватает, и их можно готовить параллельно.
- Проверка на людях. Схему можно показать клиентам или сотрудникам отдела продаж и посмотреть, где они путаются.
- Честная оценка. По прототипу исполнитель видит все блоки и функции и может точнее назвать срок и объём работ.
- Основа для приёмки. Готовый сайт сверяют со схемой: всё ли на месте и работает ли так, как договорились.
Виды прототипов: от наброска до кликабельной схемы
Прототипы различаются детализацией: от наброска на бумаге за полчаса до кликабельной схемы, которую можно пролистать на телефоне. Начинать стоит с простого и детализировать только то, что вызывает вопросы.
- Когда брать: в самом начале, когда вы ещё решаете, какие страницы и разделы нужны.
- Совет: нарисуйте три разных варианта главной и выберите лучший, а не шлифуйте первый.
- Когда брать: для согласования с дизайнером и оценки работ. Серые блоки, настоящие заголовки, пометки о функциях.
- Совет: рисуйте сразу две версии ключевых страниц, для компьютера и для телефона.
- Когда брать: для магазина, записи онлайн, калькулятора и кабинета, где важны шаги и переходы.
- Совет: добавьте экраны ошибок и сообщение «заявка отправлена», их часто забывают.
- Когда брать: для сложных сервисов, инвесторов и тестов на клиентах, когда важно впечатление.
- Осторожно: для обычного сайта компании это почти готовый дизайн. Делайте его после проверки структуры, а не вместо неё.
Вывод: детализация прототипа должна соответствовать вопросу. Структуру проверяют наброском и вайрфреймом, путь клиента кликабельной схемой, впечатление детальным макетом.
Деление на «статичные» и «анимированные» прототипы, которое встречается в старых статьях, сейчас почти не используется. В Figma и похожих программах любую схему можно сделать кликабельной за несколько минут: связать кнопку с другим экраном и показать переход. Поэтому полезнее думать не о виде, а о вопросе, на который должен ответить прототип.
Когда прототип нужен, а когда можно без него
Прототип нужен всегда, когда на сайте есть путь клиента длиннее одного экрана или нестандартная функция. Для сайта из двух-трёх страниц по готовому шаблону хватит структуры и текстов на бумаге.
| Ситуация | Нужен ли прототип | Какой |
|---|---|---|
| Сайт-визитка на шаблоне конструктора | Можно без отдельного | Список блоков главной и тексты в документе |
| Лендинг под рекламу | Да | Вайрфрейм одной страницы для компьютера и телефона |
| Корпоративный сайт с услугами | Да | Вайрфреймы главной, страницы услуги, контактов и одного типового раздела |
| Интернет-магазин | Обязательно | Кликабельная схема: каталог, карточка, корзина, оформление заказа |
| Личный кабинет, калькулятор, запись онлайн | Обязательно | Кликабельная схема всех шагов и состояний, включая ошибки |
| Редизайн работающего сайта | Да | Схемы страниц, которые приносят больше всего заявок, с сохранением важных блоков |
Обратите внимание на последнюю строку. При обновлении старого сайта прототип помогает не потерять то, что уже работает: тексты, которые нравятся поиску, и формы, через которые приходят заявки.
Сколько экранов рисовать
Рисовать нужно не каждую страницу, а каждый уникальный шаблон. Двадцать страниц услуг, сделанных по одному образцу, это один прототип, а не двадцать.
Как посчитано: лендинг это одна страница и её мобильная версия. Визитка: главная, услуги, контакты и мобильная главная. Сайт услуг: главная, каталог услуг, страница услуги, примеры работ, статья, контакты и две мобильные версии. Магазин: главная, каталог, карточка, корзина, оформление, оплата, личные данные, поиск, пустая корзина, ошибка и две мобильные версии. Сайт с кабинетом: магазин плюс вход, кабинет и история заказов. Чем больше экранов, тем важнее кликабельная схема.
Отдельно рисуйте мобильную версию хотя бы для главной и для страницы, на которую ведёт реклама. На телефоне блоки встают в одну колонку, и то, что на компьютере было рядом с кнопкой, может уехать на три экрана вниз.
Как сделать прототип сайта: 8 шагов
Прототип делают от цели к деталям: сначала решают, что посетитель должен сделать на сайте, потом раскладывают путь к этому действию по страницам и блокам.
- Запишите цель страницы одной фразой. Например: «посетитель оставляет заявку на замер» или «выбирает тариф и оплачивает». Если целей три, выберите главную, остальные будут второстепенными кнопками.
- Опишите, кто приходит и с каким вопросом. Человек из рекламы «ремонт ванной под ключ» ищет цену, сроки и примеры работ. Человек, который уже знает компанию, ищет телефон и адрес.
- Соберите вопросы клиентов. Спросите менеджеров, что им чаще всего задают по телефону. Каждый частый вопрос это кандидат в блок страницы.
- Посмотрите 5–7 сайтов конкурентов. Не чтобы скопировать, а чтобы заметить, какие блоки есть у всех, и чего не хватает каждому.
- Составьте структуру сайта. Список страниц и меню. Для небольшого сайта это половина листа.
- Разложите блоки на главной и ключевых страницах. Сверху ответ на главный вопрос и кнопка действия, ниже доказательства: примеры, условия, отзывы, вопросы, ещё одна форма.
- Впишите настоящие заголовки и тексты кнопок. «Рассчитать стоимость ремонта» вместо «Кнопка». Пустые надписи «Lorem ipsum» прячут главную проблему: нечего сказать.
- Свяжите экраны и проверьте путь. Пройдите сами от первого экрана до отправки формы, потом дайте пройти другим людям.
Делайте прототип в оттенках серого. Как только появляются цвета и фото, обсуждение уходит в «нравится или не нравится», а вопросы структуры остаются без ответа.
Чем делать прототип: инструменты
Инструмент выбирают по тому, кто будет делать прототип и кому его показывать. Для первого наброска хватает бумаги, для согласования с командой удобнее общий онлайн-редактор.
| Инструмент | Кому подходит | Плюсы | Ограничения |
|---|---|---|---|
| Бумага и маркер | Владельцу бизнеса на старте | Быстро, не нужно ничего осваивать | Неудобно пересылать и править |
| Документ или презентация | Тем, кто не работает в графических программах | Можно сразу писать тексты блоков, есть комментарии | Не видно, как блоки встанут на телефоне |
| Figma, Pixso и похожие редакторы интерфейсов | Дизайнеру и команде | Сетка, компоненты, кликабельные переходы, совместная работа | Нужно время на освоение |
| Конструктор сайтов с серыми блоками | Тем, кто потом будет собирать сайт на том же конструкторе | Прототип сразу работает в браузере и на телефоне | Мысль ограничена готовыми блоками конструктора |
В Figma кликабельный прототип собирается из связей: у кнопки есть «горячая зона», по нажатию на которую открывается другой экран. Набор связанных экранов называется потоком, и ссылкой на него можно поделиться, чтобы человек пролистал схему у себя на телефоне. Условия тарифов и доступность сервисов меняются, поэтому перед выбором проверьте их на официальном сайте.
Как проверить прототип до дизайна
Прототип проверяют на людях, которые похожи на ваших клиентов: дают задачу и молча смотрят, как человек её решает. Сотрудник, который сам придумывал схему, для этого не подходит: он знает, где что лежит.
Как провести такую проверку за один вечер:
- Сколько людей. В статье Nielsen Norman Group 2000 года показано, что пять участников находят около 85% проблем удобства, а дальше новые находки встречаются всё реже. Для небольшого сайта 3–5 человек достаточно.
- Какие задачи. Две-три реальные задачи: «узнайте, сколько стоит ремонт ванной 4 квадратных метра», «запишитесь на замер на субботу».
- Что смотреть. Где человек задержался, куда нажал не туда, что спросил вслух, нашёл ли ответ без подсказки.
- Что делать дальше. Исправить схему и, если правки большие, показать её ещё двум-трём людям.
Перед тем как отдать прототип дизайнеру, пройдитесь по короткому списку.
Кто делает прототип и что понадобится от вас
Прототип обычно рисует исполнитель: дизайнер, проектировщик интерфейсов или разработчик, который ведёт проект. Но лучший прототип получается, когда владелец бизнеса приходит не с пустыми руками, а с ответами на вопросы, которые знает только он.
| Что | Кто знает лучше | Зачем это прототипу |
|---|---|---|
| Кто ваши клиенты и с какими вопросами звонят | Вы и менеджеры | Из вопросов получаются блоки страниц |
| Чем вы отличаетесь от конкурентов | Вы | Это первый экран и заголовки |
| Какие есть фото, примеры работ, отзывы, документы | Вы | Блоки без материалов лучше не рисовать |
| Куда должна попадать заявка и кто её обрабатывает | Вы и отдел продаж | Это пометки к формам и задание для разработчика |
| Как расположить блоки, чтобы путь был коротким | Исполнитель | Это его работа, ваша задача проверить результат |
Хороший исполнитель задаёт эти вопросы сам на первой встрече. Если вас сразу спрашивают про любимый цвет, а не про клиентов, это повод насторожиться.
Типичные ошибки
- Начать с дизайна. Красивый макет без проверенной структуры потом переделывают целиком.
- Рисовать без текстов. Блоки красиво стоят, но выясняется, что для них нет ни примеров работ, ни отзывов.
- Забыть о телефоне. Долю посетителей с телефонов легко посмотреть в Метрике, и у многих сайтов она большая, а прототип нарисован только для широкого экрана.
- Рисовать только «счастливый путь». Нет экранов ошибки, пустой корзины, неверно введённого телефона и сообщения «заявка отправлена».
- Показывать прототип только руководителю. Мнение собственника важно, но заявки оставляют клиенты.
- Не сохранить договорённости. Согласованная схема должна лежать в общей папке и стать частью задания, иначе через месяц каждый помнит её по-своему.
Что делать после прототипа
Согласованный прототип становится опорой для трёх следующих шагов: дизайна, разработки и приёмки. Дизайнер делает макеты по схеме и не придумывает структуру заново. Разработчик видит все блоки и состояния и точнее оценивает объём. При приёмке вы проверяете, что каждый блок со схемы есть на сайте и работает.
Прототип помогает и в разговоре о бюджете: по нему видно, какие страницы и функции действительно нужны в первой версии. Из чего складывается цена сайта и что можно отложить, рассказано в статье о стоимости разработки сайта. Если вы хотите, чтобы схему, тексты и сам сайт собрали под ваши заявки, посмотрите, как устроена разработка сайта для бизнеса.
Частые вопросы
Чем прототип сайта отличается от макета?
Прототип показывает, что и в каком порядке стоит на странице, серыми блоками и настоящими текстами. Макет показывает, как это выглядит: цвета, шрифты, фото. Сначала согласуют прототип, потом по нему рисуют макет.
Может ли владелец бизнеса сам сделать прототип?
Да. Набросок на бумаге или схема блоков в документе с настоящими заголовками уже очень помогают дизайнеру. Главное записать цель страницы, вопросы клиентов и порядок блоков. Аккуратную схему потом можно доверить исполнителю.
Сколько страниц нужно рисовать в прототипе?
Не все страницы, а каждый уникальный шаблон: главную, страницу услуги, каталог, карточку, контакты. Двадцать одинаковых страниц услуг это один экран. Плюс мобильные версии главной и страниц, на которые ведёт реклама.
Нужен ли прототип для сайта на конструкторе?
Для визитки из пары страниц хватит списка блоков и текстов в документе. Для лендинга под рекламу и магазина схема нужна: на ней проще увидеть путь до заявки и мобильную версию.
В какой программе делают прототипы?
На старте подойдут бумага, документ или презентация. Для согласования с командой и кликабельных схем используют редакторы интерфейсов вроде Figma или Pixso. Условия и доступность сервисов проверяйте на их официальных сайтах.
Как проверить прототип до разработки?
Дайте 3–5 людям, похожим на ваших клиентов, две-три реальные задачи, например узнать цену и записаться на замер, и молча смотрите, где они путаются. По данным Nielsen Norman Group, пять участников находят большую часть проблем удобства.
Входит ли прототип в разработку сайта?
Чаще всего да, как отдельный этап между заданием и дизайном. Уточните это у исполнителя до договора: сколько экранов он рисует, будет ли мобильная версия и сколько кругов правок включено.
