Прототип сайта — это схема страниц без цветов, фотографий и декоративных элементов, на которой видно главное: какие блоки есть на странице, в каком порядке они идут и что делает посетитель. На этапе прототипа ошибку можно исправить за минуты, на этапе готового дизайна — за дни, после вёрстки — за недели. Поэтому в клубе ВИПМИ прототипирование входит в каждый проект, который описан на странице дизайн сайта с прототипом и UI-китом.
Расскажем, зачем нужен прототип, чем он отличается от макета, как проходит работа, сколько итераций закладывать и как заказчику проверить прототип, даже если он никогда этого не делал.
Что такое прототип сайта и чем он отличается от дизайна
Прототип отвечает на вопрос «что и где», дизайн отвечает на вопрос «как это выглядит». В прототипе вместо фотографий серые прямоугольники, вместо фирменного шрифта системный, вместо продуманных иконок условные значки. Зато в нём уже есть реальные заголовки, порядок блоков, кнопки, формы и логика переходов между страницами.
| Этап | Что показывает | Что обсуждаем |
|---|---|---|
| Структура сайта | Список страниц и разделов | Какие страницы нужны и как они связаны |
| Прототип | Блоки на каждой странице и их порядок | Что увидит посетитель и что он должен сделать |
| Дизайн-макет | Визуальное оформление прототипа | Цвета, шрифты, изображения, настроение |
| Вёрстка | Работающая страница в браузере | Поведение на разных устройствах, анимации |
Важно знать. Прототип не обязан быть красивым. Если вы ловите себя на обсуждении цвета кнопки на этапе прототипа, верните разговор к смыслу: нужна ли эта кнопка здесь и что произойдёт после нажатия.
Зачем нужно прототипирование сайта
Можно сразу рисовать дизайн, и некоторые подрядчики так и делают. Но пропуск прототипа обычно оборачивается проблемами позже. Вот что даёт этот этап:
- Фокус на смысле. Без визуального оформления легче оценить, понятно ли предложение и логичен ли путь посетителя к заявке.
- Быстрые правки. Переставить блоки или убрать лишний раздел в прототипе — дело нескольких минут.
- Понимание объёма контента. Видно, сколько текста и изображений нужно для каждой страницы, и копирайтер может начать работу параллельно с дизайнером.
- Точная оценка разработки. Программист видит все формы, фильтры и интерактивные элементы ещё до дизайна.
- Меньше споров. Заказчик согласует логику до того, как появится эмоциональная привязка к картинке.
Как проходит работа над прототипом
- Сбор исходных данных. Цели сайта, аудитория, конкуренты, поисковый спрос, материалы компании.
- Структура. Список страниц и их иерархия, выделение типовых шаблонов.
- Прототип ключевых страниц. Обычно главная, страница услуги или категории, карточка товара, контакты.
- Презентация и обсуждение. Дизайнер проводит заказчика по прототипу и объясняет, почему блоки стоят именно так.
- Правки и согласование. Как правило, одна-две итерации, после чего прототип фиксируется.
- Передача в дизайн. Согласованный прототип становится основой для макетов.
Прототипы делаются как для компьютера, так и для телефона. Мобильная версия часто требует другого порядка блоков, и это важно обсудить заранее, а не переделывать после вёрстки.
Как заказчику проверить прототип
Многие заказчики теряются, когда видят серые схемы. Чтобы обсуждение было продуктивным, задайте себе вопросы:
- Понятно ли с первого экрана, чем занимается компания и что она предлагает?
- Есть ли на странице ответы на вопросы, которые чаще всего задают клиенты?
- Видно ли, что нужно сделать дальше: позвонить, оставить заявку, выбрать товар?
- Нет ли блоков, которые повторяют друг друга?
- Есть ли место для доказательств: примеров работ, отзывов, сертификатов?
- Удобно ли будет пользоваться страницей с телефона?
Осторожно. Не пытайтесь согласовать прототип, «пролистав» его за пять минут. Пройдите путь клиента от входа на сайт до отправки заявки. Ошибки логики, пропущенные на этом этапе, потом будут стоить заметно дороже.
Плюсы и минусы прототипирования
| Плюсы | Минусы |
|---|---|
| Логика страниц согласована до начала дизайна | Добавляет отдельный этап к сроку проекта |
| Правки дешевле и быстрее, чем на макетах или в коде | Заказчику бывает сложно воспринимать схемы без оформления |
| Копирайтер и дизайнер могут работать параллельно | Требует вовлечённости заказчика в обсуждение |
| Разработчик заранее видит все функции | Для очень простых страниц может быть избыточным |
Кликабельный прототип: когда он нужен
Обычный прототип — это набор статичных схем. Кликабельный прототип позволяет переходить между страницами, открывать меню и формы, как на настоящем сайте. Он полезен, если:
- на сайте сложная навигация или многошаговые сценарии, например калькулятор или оформление заявки;
- нужно показать концепцию руководству или инвесторам;
- вы хотите провести быстрый тест с реальными пользователями до разработки.
Для сайтов-визиток и небольших лендингов обычно достаточно статичных схем.
Мнение эксперта
«Прототип — самый недооценённый этап. Заказчики хотят скорее увидеть красивую картинку, и это понятно. Но именно на прототипе мы находим главные проблемы: оффер не читается, форма спрятана, раздел услуг непонятен. Если всё это всплывает после дизайна, приходится переделывать уже согласованные макеты, и проект теряет время.»
Эксперт клуба ВИПМИ, арт-директор клуба
Что происходит после прототипа
Согласованный прототип становится основой визуального дизайна. Дизайнер прорабатывает стиль, создаёт макеты ключевых страниц и собирает библиотеку элементов. О том, как превратить отдельные макеты в систему, которую удобно развивать, мы рассказываем в статье UI-кит и единые компоненты для сайта.
Если у вас уже есть сайт и вы хотите его обновить, прототипирование тоже начинается с анализа: что на текущем сайте работает, а что мешает. Подробно этот сценарий разобран в материале о том, как провести редизайн без потери трафика.
Полный цикл работы над дизайном страниц, от брифа до передачи в вёрстку, описан в нашей статье про этапы разработки дизайна страниц.
Совет. Перед обсуждением прототипа соберите в одном списке вопросы, которые клиенты задают менеджерам чаще всего. Сверьте его с прототипом: на каждый вопрос должен быть ответ на странице.
Прототип и поисковое продвижение
Прототип — удобный момент, чтобы заложить SEO в структуру страницы. На этом этапе видно, где будет главный заголовок, какие подзаголовки раскроют тему, где разместить текст под запрос и блок частых вопросов. Если сайт планируется продвигать в поиске, сверьте прототип с собранной семантикой: для каждого важного запроса должна быть страница, а на странице должны быть блоки, которые отвечают на этот запрос полностью.
Также на прототипе стоит предусмотреть перелинковку: блоки похожих услуг, связанных статей, сопутствующих товаров. Добавить их в готовый дизайн сложнее, потому что они ломают уже согласованную композицию.
Сколько времени занимает прототипирование
Срок зависит от количества уникальных шаблонов страниц и скорости обратной связи. Для небольшого сайта прототип ключевых страниц готовится быстро, для крупного каталога или сервиса работа идёт дольше, потому что нужно продумать больше сценариев. Главный фактор, который влияет на срок, — не скорость дизайнера, а скорость согласований. Договоритесь заранее, кто со стороны компании принимает решения, и выделите время на обсуждение.
Что передать дизайнеру перед прототипированием
Чем больше конкретики на старте, тем точнее первый вариант. Подготовьте описание ключевых услуг или товаров, список преимуществ, которые вы считаете главными, примеры работ, отзывы клиентов, если они есть, и ссылки на сайты, которые нравятся или не нравятся. Даже короткие пометки вроде «здесь мне нравится, как подана цена» экономят итерации и помогают дизайнеру быстрее понять ваш вкус и задачу.
Частые вопросы
Можно ли пропустить прототип и сразу делать дизайн?
Можно для очень простых страниц, если структура понятна заранее. Для сайтов с несколькими разделами и формами пропуск прототипа обычно увеличивает число правок на этапе дизайна.
В каких программах делают прототипы?
Чаще всего в тех же графических редакторах, что и дизайн, например в Figma. Заказчику достаточно ссылки для просмотра и комментариев.
Нужно ли прототипировать каждую страницу?
Нет. Прототипируют уникальные шаблоны: главную, страницу услуги, категорию, карточку, контакты. Остальные страницы собираются по этим шаблонам.
Кто пишет тексты для прототипа?
В идеале копирайтер вместе с дизайнером. Реальные заголовки и формулировки помогают оценить прототип точнее, чем условный текст-заглушка.
Сколько правок допустимо на этапе прототипа?
Обычно закладывают одну-две итерации. Количество правок лучше заранее прописать в договоре.
Начнём с прототипа
Расскажите о задаче сайта, и мы предложим структуру и прототип ключевых страниц. Вы увидите логику сайта ещё до того, как начнётся дизайн.
