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