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