Прототипирование сайта

Что такое прототип

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

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

Зачем тратить на это время

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

Кроме того, прототип выравнивает ожидания. Вы, менеджер проекта, дизайнер и разработчик видят одну и ту же картину, и к моменту дизайна уже согласовано, что именно делаем.

Какими бывают прототипы

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

Для простых сайтов хватает прототипов ключевых страниц. Для сложных интерфейсов — личных кабинетов, веб-приложений, систем учёта — делаем кликабельный прототип и проверяем на нём основные сценарии вместе с будущими пользователями.

Что вы получаете

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

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

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

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