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

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

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

Есть два уровня детализации, и их стоит различать при заказе:

• Low-fidelity (низкая детализация) — набросок от руки или в простом инструменте, черновой порядок блоков, делается за 1-2 дня, используется для быстрого обсуждения концепции;
• Hi-fi / кликабельный прототип — точная схема с реальными размерами блоков и переходами между экранами, по клику на кнопку открывается следующий экран — им можно «пройти» сайт до того, как он свёрстан. Делается 3-7 дней, это тот прототип, который обычно согласовывается официально перед стартом визуального дизайна.

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

• Экономия денег на переделках. Если структуру страницы нужно поменять (например, добавить блок с отзывами до, а не после кейсов) — в прототипе это правка на 10-15 минут. Та же правка после того, как страница уже свёрстана в коде, — это работа верстальщика и, возможно, программиста, если блок завязан на CMS;
• Согласование без спора о вкусах. Обсуждать порядок блоков проще, когда нет цвета и картинок, которые отвлекают внимание на субъективные «нравится/не нравится». Прототип держит разговор в рамках логики: удобно ли пользователю, а не красиво ли заказчику лично;
• Проверка полноты контента заранее. На прототипе сразу видно, если для какого-то блока нет готового текста или фото — до того, как дизайнер начал рисовать макет вокруг несуществующего контента и потом переделывать его под реальные материалы.

Что оценивать в прототипе, а что — нет

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

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

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

Сколько раундов правок нормально

Реалистичный процесс — 1-2 раунда по 2-3 рабочих дня каждый. Если раундов становится 4-5, почти всегда причина не в качестве прототипа, а в организации согласования на стороне заказчика: решение принимают несколько человек с разными мнениями, и правки одного отменяют правки другого. Практическое решение — назначить одного человека, который утверждает финальную версию, до начала работы над прототипом, а не по ходу.

Что будет, если пропустить этап прототипа

Прототип иногда пропускают ради скорости — особенно на простых лендингах с типовой структурой (оффер — преимущества — форма), и для них это действительно можно себе позволить. Риск растёт с числом страниц и уникальностью сценариев: чем сложнее сайт (каталог, личный кабинет, несколько типов пользователей), тем выше шанс, что готовый цветной макет придётся переделывать по структуре — а это уже дороже и дольше, чем прошёл бы этап прототипа с самого начала. На практике переделка макета из-за структурной ошибки, не пойманной на прототипе, обычно съедает 20-30 % бюджета всего дизайн-этапа.

Частые вопросы