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

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

Обратите внимание, как выглядят прототип и итоговый дизайн в проекте разработки интернет-магазина.

 

Для чего клиенту прототип

— Есть проекты, которым прототип в принципе не нужен, это сайты без функционала, промосайты, лендинги, — отмечает UX/UI дизайнер «Неткам» Анатолий Поморов. — Структура понятная, потому и не требуется дополнительно отрабатывать сложные сценарии, можно сразу приступать к дизайну.

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

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

На слайде главная страница будущего сайта. Слева прототип, справа — итоговый дизайн. Все элементы структурно остаются на тех же местах, добавляется именно оформление.

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

Почему прототипирование экономит и время, и деньги заказчика?

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

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

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

Как идет работа

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

Следующий этап — сбор информации о клиентах заказчика. Благодаря аналитике собираются данные о покупателях, “рисуется” их портрет. К этому добавляется поиск референсов, то есть имеющихся в сети сайтов представителей отрасли, чтобы отобрать полезные механизмы и исключить ошибки конкурентов, а также определиться со стилистикой проекта.

В формате Mind Map начинается аналитическая часть работы и идет разработка оптимальной структуры проекта. Здесь набрасываются мысли по будущим страницам, куда они будут вести, их функционал. Уже понятна логика, по которой будет работать проект.

Меню будущего сайта в Mind Map крупным планом:

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

— Самое сложное для специалиста по прототипам — именно аналитическая часть: UX-дизайнер должен быть отчасти и аналитиком, и маркетологом, — считает Анатолий. — Не каждый дизайнер сможет быть хорошим специалистом по прототипам, так как важно понимание работы всех элементов на сайте: сценариев, переходов, логики и верстки.

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

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

Есть мнение, что работа UХ-дизайнера сводит работу UI-дизайнера к нулю, якобы последнему остается лишь раскрасить картинки. На самом деле это не так.

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

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