Прототип сайта: как спроектировать структуру до дизайна и разработки

Коротко. Хороший прототип показывает страницы, порядок блоков, реальные заголовки, места для доказательств, формы и мобильный сценарий. Он создаётся после интервью и анализа аудитории, но до визуальной концепции. На этом этапе дешевле убрать лишний раздел, добавить важный аргумент и проверить маршрут пользователя. В KORS прототип входит в разработку сайта полного цикла.

Когда дизайн начинают без прототипа, первый макет быстро превращается в поле переговоров. Заказчик обсуждает цвет кнопки, хотя ещё неясно, куда она ведёт; дизайнер оставляет место для короткого текста, а продукт требует таблицы и кейса; на мобильном экране важный аргумент оказывается после длинной галереи. Прототип выносит эти вопросы раньше и помогает согласовать смысл без визуального шума.

Что такое прототип сайта

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

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

Чем прототип отличается от структуры и дизайна

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

• Структура отвечает: какие страницы нужны и как они связаны.
• Прототип отвечает: что именно увидит пользователь и в каком порядке.
• Дизайн отвечает: как эта логика будет выглядеть и восприниматься.
• Разработка отвечает: как решение будет работать на реальном устройстве.

Подход к карте разделов мы раскрыли в статье о структуре сайта, а этапы визуальной работы — в материале о разработке дизайна сайта.

Какие данные нужны для создания прототипа сайта

Нельзя спроектировать страницу только по списку услуг. Команде нужны цели бизнеса, аудитории, реальные вопросы клиентов и материалы, которыми можно подтвердить предложение. В KORS начинаем с интервью и собираем исходники:

1. приоритетные продукты или услуги;
2. сегменты аудитории и критерии выбора;
3. частые вопросы и возражения отдела продаж;
4. кейсы, цифры, документы, фотографии и видео;
5. источники трафика и целевые действия;
6. технические ограничения, интеграции и ответственных за согласование.

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

Как сделать прототип сайта по шагам

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

После этого создают карту страниц и раскладывают содержание по блокам. Для каждого блока задают функцию: объяснить предложение, показать продукт, подтвердить опыт, снять возражение или привести к действию. В прототип ставят реальные заголовки и примерный объём текста. Последними проверяют формы, меню, переходы и мобильную последовательность.

Что должно быть в прототипе лендинга

Универсального набора блоков нет, но коммерческий лендинг обычно должен последовательно ответить на вопросы клиента:

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

Не обязательно помещать всё на один экран. Важно, чтобы пользователь получал ответы в логичной последовательности. Для сложного продукта часть информации можно вынести в отдельные страницы, каталог или PDF, сохранив на лендинге ясный маршрут.

Нужны ли реальные тексты на этапе прототипа

Да. Текст определяет размеры и иерархию интерфейса. Заголовок из двух строк и техническое название из семи слов требуют разной композиции. Таблица характеристик, список документов и подробный кейс нельзя заменить одинаковыми серыми прямоугольниками.

Это не значит, что каждый абзац должен быть финальным. Но ключевые формулировки, цифры, названия разделов, кнопки и поля формы должны быть близки к реальности. Тогда заказчик согласует не абстрактную схему, а рабочий сценарий.

Как проверить прототип сайта на телефоне

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

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

Прототип в Figma удобен тем, что в одном файле можно показать версии для компьютера и телефона, связать переходы и оставить комментарии. Но инструмент вторичен: полезность определяет продуманная логика.

Пример прототипа и реального сайта KORS

Для производителя «Одоевские консервы» KORS сделал структуру, тексты, два сайта, фото, видео и презентацию. На сайте povidlo.su разные сценарии сведены в понятную систему: посетитель может перейти в каталог, увидеть виды начинок, условия разработки рецептур и запросить консультацию.

Такой проект показывает ценность предварительного проектирования: один набор смыслов и материалов работает в каталоге, на посадочных страницах и в презентации. Команда не придумывает структуру заново на каждом носителе.

Кейс«Одоевские консервы»: два сайта, фото, видео и презентация в одной системеСмотреть кейс →

Сколько стоит создание сайта с прототипом

В KORS прототип входит в проект разработки сайта. На странице указаны ориентиры: лендинг на шаблоне — от 39 000 ₽ и от 7 дней; экспресс-лендинг — от 74 000 ₽ и от 14 дней; продающий лендинг — от 104 000 ₽ и от 21 дня; многостраничный сайт — от 139 000 ₽ и от 30 дней.

Стоимость зависит от количества уникальных страниц, сложности каталога, объёма текстов, интеграций, съёмки и анимации. Участие клиента обычно занимает 2–4 часа: интервью и приёмка этапов. Ориентиры не являются офертой; точный состав, сроки и стоимость фиксируются в договоре.

Частые ошибки

• Прототип без реальных текстов. Финальный контент ломает сетку и порядок блоков.
• Главная страница без карты сайта. Позже обнаруживаются дубли и потерянные разделы.
• Один сценарий для всех. Закупщик, руководитель и специалист не находят нужные доказательства.
• Нет мобильной версии. На телефоне меняется порядок, но это выясняется только после сборки.
• Нет состояний формы. Ошибки и успешная отправка остаются на усмотрение разработчика.
• Согласование цвета вместо логики. Команда спорит о стиле, не решив путь пользователя.

Вопросы, которые нам задают чаще всего