Прототип — чёрно-белая схема страниц, на которой проверяют логику сайта до того, как вложены деньги в дизайн и код. Рассказываем, что в него входит, как его читать и почему он окупается даже на небольших проектах.
Что такое прототип и чем он не является
Прототип сайта — это схематичное изображение страниц: серые прямоугольники вместо фотографий, простые шрифты, никаких фирменных цветов. Зато на нём уже есть всё, что определяет работу сайта: какие блоки стоят на странице и в каком порядке, какие заголовки и тексты в них, где кнопки и что происходит при нажатии, как устроено меню, как выглядит карточка товара и форма заявки.
Прототип — не «черновик дизайна», который потом раскрасят. И не набросок на салфетке. Это инженерный документ, который отвечает на вопрос «как работает страница», оставляя дизайну вопрос «как она выглядит». Разделение этих вопросов — главная причина, по которой прототипирование экономит деньги.
Почему не начать сразу с дизайна
Представьте обсуждение готового макета главной страницы. Директору не нравится оттенок синего, маркетолог просит поменять фотографию, отдел продаж хочет крупнее телефон. Полтора часа уходит на визуальные детали, и никто не замечает, что на странице нет ответа на главный вопрос клиента — сколько времени занимает поставка. Когда это обнаружится, придётся перерисовывать уже не один блок, а композицию целиком.
Чёрно-белая схема убирает этот шум. Обсуждать нечего, кроме сути: что сообщает блок, нужен ли он, на своём ли месте. На практике это означает, что правки на этапе прототипа обходятся в часы, а те же правки на этапе дизайна — в дни, на этапе вёрстки — в недели. Грубый ориентир из нашего опыта: изменение, которое на прототипе стоит 1 условную единицу, на макете стоит около 5, а на свёрстанном сайте — 10–20.
Из чего состоит хороший прототип
Мы разделяем прототипы по степени детализации, и выбор зависит от проекта.
| Уровень | Что показывает | Когда применяем |
|---|---|---|
| Схема структуры | Разделы, вложенность, связи между страницами | Любой проект, самое начало работы |
| Низкая детализация | Блоки страницы и их порядок, без текстов | Быстрая проверка идеи, лендинги |
| Средняя детализация | Блоки с реальными заголовками, примерами текстов, элементами управления | Корпоративные сайты, каталоги |
| Интерактивный прототип | Кликабельные переходы, состояния форм и фильтров | Сложные сценарии, порталы, личные кабинеты |
Для большинства проектов оптимальна средняя детализация. Ключевое слово — «реальные тексты». Прототип с надписями «Заголовок блока» и «Здесь будет текст» почти бесполезен: он не показывает, помещается ли смысл в отведённое место и хватает ли его вообще. Поэтому мы стараемся писать в прототипе настоящие или близкие к финальным заголовки и ключевые фразы, опираясь на материалы заказчика.
Помимо страниц, хороший прототип показывает состояния: что видит пользователь, если поиск ничего не нашёл, если в форме ошибка, если товара нет в наличии, если в корзине пусто. Эти «пограничные» экраны часто забывают, а потом дорисовывают на ходу.
Инструмент значения почти не имеет: прототип можно собрать в любом графическом редакторе для интерфейсов. Важнее, чтобы у заказчика был доступ по ссылке, возможность оставлять комментарии и видеть актуальную версию, а не пересылать друг другу файлы с названиями «финал_2_исправленный».
Какие страницы прототипировать
Прототипировать каждую страницу сайта не нужно. Мы выделяем ключевые шаблоны — уникальные типы страниц, из которых собирается всё остальное. Для типичного сайта-каталога это:
- главная;
- раздел каталога с фильтрами и списком товаров;
- карточка товара;
- страница услуги или направления;
- кейс или проект;
- страница «О компании»;
- контакты;
- страница результатов поиска и форма запроса.
Получается 8–12 шаблонов, и для каждого — мобильная версия хотя бы в упрощённом виде. Мобильный прототип особенно полезен для каталога: он сразу показывает, как будут вести себя фильтры и таблицы характеристик на узком экране, а это одно из самых проблемных мест в B2B-проектах.
Как читать и согласовывать прототип
Заказчику, который впервые видит прототип, бывает сложно понять, на что смотреть. Предлагаем простой порядок работы.
- Сначала — сценарий. Возьмите типичного клиента и пройдите его путь: откуда он пришёл, что ищет, где находит ответ, как оставляет заявку. Если путь обрывается — это главная правка.
- Потом — приоритеты. Посмотрите, что стоит на первом экране каждой страницы. Это самое важное для вашего клиента или просто то, что хотелось показать?
- Затем — полнота. Всё ли, о чём спрашивают менеджеров по телефону, есть на страницах? Сроки, условия доставки, гарантии, документы?
- И только в конце — формулировки. Точные тексты ещё будут уточняться, на этом этапе важен смысл.
Правки удобнее всего собирать комментариями прямо в прототипе: так видно, к какому блоку относится замечание, и ничего не теряется в переписке. Обычно на согласование уходит один-два круга правок, и этот этап занимает 2–3 недели.
Совет студии: пригласите на обсуждение прототипа одного-двух сотрудников, которые каждый день общаются с клиентами. Руководитель видит компанию изнутри, а менеджер по продажам знает, какие вопросы задают люди до покупки. Именно его замечания чаще всего меняют структуру страницы к лучшему.
Пример из практики
Производитель складского оборудования хотел обновить сайт, и в первом варианте главной, который предложил сам заказчик, основное место занимали слайдер с фотографиями цеха, история компании и новости. Пройдя на прототипе сценарий «инженер ищет стеллаж под конкретную нагрузку», мы увидели, что до каталога пользователь добирается только через меню, а подбор по параметрам не предусмотрен вовсе.
Переработанный прототип вывел на первый экран подбор по типу груза и нагрузке, а на второй — типовые решения для разных складов с фотографиями реализованных проектов. История и новости переехали ниже. Правки заняли три рабочих дня. Если бы то же самое обнаружилось после дизайна и вёрстки, переделка заняла бы несколько недель. После запуска доля посетителей, переходящих с главной в каталог, выросла примерно в полтора раза по сравнению со старой версией сайта.
Прототип как основа для всего проекта
Согласованный прототип нужен не только дизайнеру. По нему разработчики оценивают объём работ точнее, чем по тексту ТЗ, копирайтер видит, какие тексты и какого объёма нужны на каждой странице, а SEO-специалист проверяет, есть ли место для заголовков и текстов под нужные запросы. Прототип становится общим языком всей команды и заказчика.
Кроме того, прототип — хороший инструмент для внутренних согласований у заказчика. Показать схему совету директоров или владельцу бизнеса проще, чем текстовое ТЗ на 40 страниц: картинка понятна без подготовки. Подробнее о том, как прототип встраивается в процесс, можно прочитать на странице «Как мы работаем».
Чек-лист: прототип готов к передаче в дизайн
- Прототипированы все ключевые шаблоны страниц, включая мобильные версии.
- Для каждого шаблона пройден хотя бы один сценарий реального клиента.
- На первом экране каждой страницы — главное для посетителя, а не для компании.
- Вместо «рыбы» — реальные заголовки и ключевые формулировки.
- Показаны состояния: пустой поиск, ошибки в форме, отсутствие товара.
- Каждая форма описана: поля, обязательность, что происходит после отправки.
- Понятно, какой контент нужен для каждого блока и кто его готовит.
- Прототип согласован одним ответственным со стороны заказчика, правки внесены.
Если все пункты отмечены, дизайнер получает прочную основу, а проект — страховку от самых дорогих переделок. Две-три недели на прототип почти всегда возвращаются сэкономленным временем на следующих этапах.
