Прототипирование сайта: зачем рисовать «скелет» до дизайна

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

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

Прототип решает эту проблему. Это план помещений до начала отделки. В этой статье расскажем, что такое прототип, зачем он нужен, как мы его создаём в MediaFrukt и как правильно его оценивать, чтобы не пропустить важное.

Что такое прототип и чем он не является

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

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

Прототип — это и не техническое задание, хотя они тесно связаны. ТЗ описывает требования словами, прототип показывает их визуально. Часто при создании прототипа всплывают вещи, которые при написании ТЗ казались очевидными, а на практике требуют решения. Где показать остатки товара? Что видит пользователь, если по фильтру ничего не нашлось? Куда деть блок сертификатов, если он не помещается на первый экран?

Серый цвет прототипа — это не лень дизайнера, а инструмент. Как только появляется цвет, обсуждение неизбежно скатывается к «мне не нравится этот оттенок», и вопросы логики отходят на второй план.

Зачем нужен прототип

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

Другие причины не менее важны:

Единое понимание. Заказчик, дизайнер, программист и копирайтер видят одну и ту же картинку и говорят на одном языке.
Проверка сценариев. На прототипе можно пройти путь посетителя от входа до заявки и найти места, где он застрянет.
Основа для текстов. Копирайтер видит, сколько места отведено под каждый блок, и пишет тексты нужного объёма.
Точная оценка. Когда все страницы и функции нарисованы, программист оценивает работу гораздо точнее.
Спокойный дизайн. Дизайнер работает с согласованной структурой и не переделывает макеты из-за логических изменений.

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

Виды прототипов

Прототипы бывают разной детализации, и выбор зависит от сложности проекта.

Скетч на бумаге или доске. Самый быстрый вариант для первой проработки идей. Мы используем его на рабочих встречах с клиентом, чтобы быстро накидать варианты структуры главной страницы.
Низкодетализированный прототип. Блоки, заголовки, кнопки без подробностей. Подходит для согласования общей структуры и небольших сайтов.
Детализированный прототип. Реальные тексты или их близкие черновики, все элементы интерфейса, состояния форм, варианты мобильного отображения. Основной формат для корпоративных сайтов и магазинов.
Кликабельный прототип. Детализированные экраны связаны между собой: можно нажать на кнопку, перейти в каталог, открыть карточку, пройти оформление заказа. Необходим для сложных сценариев и личных кабинетов.

Для большинства проектов мы делаем детализированные прототипы ключевых страниц, а для магазинов и порталов — кликабельные прототипы основных сценариев.

Как мы создаём прототип

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

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

Параллельно прорабатывается мобильная версия. На маленьком экране порядок блоков приходится расставлять особенно жёстко, и это хорошая проверка того, насколько правильно выбраны приоритеты.

Для прототипа мы используем тексты, максимально близкие к реальным. Надписи вроде «здесь будет заголовок» мешают оценить страницу: непонятно, поместится ли настоящее название услуги в одну строку и хватит ли места под описание. Если готовых текстов нет, проектировщик пишет черновые формулировки на основе брифа, а копирайтер потом их дорабатывает.

В прототип обязательно попадают нестандартные состояния: пустая корзина, ошибка в форме, отсутствие результатов поиска, товар не в наличии, успешная отправка заявки. Их легко забыть, но пользователь сталкивается с ними постоянно.

Как правильно согласовывать прототип

Этап согласования — место, где заказчик может принести проекту максимум пользы. Вот что мы советуем нашим клиентам:

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

Типичная ошибка — согласовать прототип за пять минут, а потом на этапе дизайна вспомнить, что «вообще-то нужен ещё раздел для партнёров». Такое изменение уже затронет структуру, навигацию и несколько макетов.

Хороший способ проверки: дайте кликабельный прототип человеку, который ничего не знает о проекте, и попросите выполнить конкретную задачу. Там, где он растеряется, растеряются и ваши клиенты.

Когда без прототипа можно обойтись

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

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

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

Почему прототип окупается

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

В MediaFrukt прототипирование входит в тарифы «Стандарт» и «Эксклюзив», а на «Старте» мы делаем упрощённую схему страниц. Если у вас уже есть идея сайта и вы хотите посмотреть, как она будет выглядеть на уровне структуры, напишите на [email protected] — начнём с прототипа ключевых страниц.