Прототип сайта: зачем он нужен и как сделать его до дизайна

Что такое прототип сайта простыми словами

Представьте, что строите дом. Сначала архитектор рисует план: где кухня, где спальня, сколько окон. Только потом выбирают обои. Прототип — тот самый план для сайта.

На прототипе видно:

• какие страницы будут на сайте и как они связаны;
• какие блоки на каждой странице и в каком порядке;
• что написано в заголовках, кнопках и ключевых текстах;
• что происходит при клике: куда ведёт кнопка, что открывается;
• где формы, какие в них поля.

На прототипе не видно цветов, шрифтов, фотографий, иконок и анимаций. Это специально: пока на экране нет красоты, все обсуждают смысл. Когда появляется дизайн, разговор сразу уходит в «а давайте синий потемнее».

Вайрфрейм, прототип и макет: в чём разница

Эти слова часто путают, и подрядчики используют их по-разному. Вот как их обычно различают:

На практике границы размыты. На небольших проектах вайрфрейм и прототип часто делают одним шагом: схема с реальными текстами без кликабельности. На сложных — интернет-магазин, личный кабинет, сервис — сначала вайрфреймы, потом кликабельный прототип, потом дизайн.

Где прототип стоит в общем процессе создания сайта, мы показывали в статье этапы разработки сайта: после брифа и структуры, до текстов и дизайна.

Зачем нужен прототип и сколько денег он экономит

Главная причина — переделки. Каждая ошибка в логике сайта стоит дороже, чем позже её нашли.

Что прототип ловит:

• Забытые блоки. «А где у нас цены?» «А куда мы ставим отзывы?» Лучше вспомнить на схеме.
• Неправильный порядок. Клиент должен увидеть цену до формы. Три экрана про историю компании перед ценой — частая ошибка.
• Тупики. Страница услуги, с которой некуда перейти дальше. Форма без страницы «спасибо».
• Разночтения. Заказчик представлял каталог с фильтрами, подрядчик — список из десяти карточек. На прототипе это видно сразу.
• Перегруз. Когда все пожелания собраны на одной схеме, становится видно, что на первом экране восемь кнопок.

Мы на своих проектах регулярно видим одну картину: если заказчик пропускает прототип и сразу хочет «увидеть дизайн», на втором круге правок начинается перестановка блоков. А это значит перерисовка половины макета. Прототип переносит эти споры туда, где они дешёвые.

Условный пример: сколько стоит пропущенный прототип

Пример условный, не кейс студии. Сайт строительной компании на 8 страниц. Работа дизайнера — 2 000 ₽ в час.

Плюс время. Каждый круг правок дизайна — это несколько дней согласований. Цифры условные, но соотношение типичное: прототип стоит меньше, чем один круг крупных переделок.

Если хочется увидеть, как может выглядеть главный экран вашего сайта, ещё до заказа прототипа целиком, — с этого можно начать.

Как создать прототип сайта: по шагам

Создание прототипа начинается с вопросов. Программа понадобится позже.

1. Сформулируйте цель сайта. Что должен сделать посетитель: оставить заявку, позвонить, купить, записаться? Одна главная цель на сайт или на страницу.
2. Опишите посетителя. Кто он, что ищет, что сравнивает, чего боится. Если есть бриф — берите оттуда. Как его составить, разбирали в статье бриф на лендинг.
3. Составьте карту страниц. Главная, услуги, цены, портфолио, контакты — и как они связаны. Для лендинга это список блоков.
4. Разложите блоки на каждой странице. Порядок такой, в каком посетитель задаёт вопросы: что это → почему вы → сколько стоит → как начать. Типовую последовательность для лендинга мы описывали в статье структура лендинга.
5. Напишите черновые тексты. Не «Lorem ipsum», а настоящие заголовки и кнопки. Прототип с рыбой-текстом проверяет только вёрстку, а не смысл.
6. Свяжите переходы. Куда ведёт каждая кнопка, что открывается по клику, куда попадает человек после формы.
7. Сделайте мобильную версию. Хотя бы для главной и ключевой страницы. На телефоне порядок блоков часто приходится менять.
8. Покажите и проверьте. Об этом ниже.

Прототип страниц сайта: что прорисовать обязательно

Не все страницы требуют одинакового внимания. Обязательно прорисуйте:

• Главную — она задаёт логику всего сайта.
• Типовую страницу услуги или товара — по ней потом соберут все остальные.
• Страницу с главной конверсией — форма, корзина, запись.
• Мобильный первый экран — его видят чаще всего.

Типовые страницы — «О компании», «Контакты», политика конфиденциальности — можно описать списком блоков без прорисовки. Что ставить на первый экран главной, мы разбирали отдельно в статье первый экран сайта.

В чём делать прототип: бесплатные и платные инструменты

Прототип сайта в Фигме

Это самый частый запрос, поэтому коротко о процессе. В Figma прототип делают из фреймов — каждый фрейм соответствует экрану. На вкладке прототипирования элементы связывают стрелками: кнопка → экран, на который она ведёт. Потом прототип открывают в режиме презентации и прокликивают, как живой сайт. Ссылку можно отправить заказчику: смотреть прототип можно без прав на редактирование.

Для вайрфреймов в Figma есть бесплатные наборы серых блоков в сообществе: кнопки, формы, карточки. Они ускоряют работу в разы.

Если с доступом к Figma сложности, Penpot и Pixso решают ту же задачу похожим способом.

Как проверить прототип с клиентом и пользователями

Прототип мало нарисовать, его надо проверить. Два уровня проверки:

С заказчиком. Пройдите по прототипу вместе, экран за экраном. Задавайте вопросы не «нравится?», а:

• «Что посетитель должен понять на этом экране?»
• «Чего здесь не хватает, о чём спрашивают клиенты по телефону?»
• «Что здесь лишнее?»

Фиксируйте решения письменно. Согласованный прототип — основа для дизайна и для технического задания.

С пользователями. Покажите прототип 3–5 людям из целевой аудитории — знакомым, клиентам, сотрудникам, которые не участвовали в проекте. Дайте задание: «Узнайте, сколько стоит услуга» или «Запишитесь на консультацию». Не подсказывайте, просто смотрите, где человек застревает. Даже пять таких тестов находят основные проблемы.

Типичные ошибки в прототипах

• Рыба вместо текста. «Заголовок, подзаголовок, текст» не проверяет смысл. Пишите черновые настоящие тексты.
• Прототип как дизайн. Цвета, тени, фото на этапе прототипа отвлекают от логики и сжигают время.
• Только десктоп. Большая часть трафика с телефона, а мобильный вид делают «потом».
• Согласование «в целом нравится». Без явного «да, логику утверждаем» дизайнер рискует нарисовать то, что потом переставят.
• Прототип ради прототипа. Для сайта-визитки на три экрана хватит списка блоков на листе бумаги. Двухнедельное прототипирование там лишнее.

Сколько стоит разработка прототипа сайта

Ориентир по рынку: прототип лендинга — от 10 000 до 40 000 ₽ как отдельная услуга, прототип многостраничного сайта на 10–20 страниц — от 30 000 до 150 000 ₽. Прототип интернет-магазина или сервиса с личным кабинетом может стоить больше дизайна. Это ориентир: цена зависит от количества уникальных страниц и того, пишет ли подрядчик черновые тексты.

Часто прототип не выделяют в смете отдельной строкой, а включают в дизайн. Это нормально, если он действительно делается и согласуется. Уточните у подрядчика: увидите ли вы схему страниц до дизайна? Если нет — заложите время на переделки. Как складывается цена дизайна целиком, разбирали в статье сколько стоит дизайн сайта.

Если хотите, чтобы мы посмотрели вашу задачу и предложили структуру будущего сайта, оставьте контакты.