Ирина Никулина – Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов (страница 57)
Каждый новый элемент, например шапка сайта, создаётся в отдельном слое, обозначается либо прозрачным прямоугольником, либо прямоугольником с серым цветом. Текст создается также в отдельном слое.
Из нескольких слоёв могут создаваться группы. При утверждении прототипа заказчик может попросить переместить модуль вверх или вниз, убрать его совсем или добавить новый модуль. Добавление нового модуля означает сдвиг всех остальных модулей. И на прототипе это происходит значительно быстрее, чем на дизайне, где этот модуль может состоять не из двух элементов, а например, из тридцати.
Некоторые элементы не прорисовываются, а лишь обозначаются, например, логотип или кнопка. Телефон и электронная почта пишутся в случае, если они уже предоставлены заказчиком. Если же нет, можно просто написать «Телефон» или поставить условный номер, типа: 8 800 999 99 99.
Картинки можно обозначить иконками, или разместить условные фото серого цвета. На прототипе в основном используются серые оттенки, чтобы клиент понимал, что перед ним прототип, а не готовый дизайн сайта. Но иногда возможно применение цветов, например, для обозначения активной кнопки или для подсказки клиенту, что это за модуль.
Прорисовываются все модули, которые будут на сайте, начиная с «шапки» и заканчивая подвалом сайта. Файл обязательно сохраняется в слоях (формат PSD), чтобы можно было вносить изменения, редактировать его. Из формата PSD создаётся JPG-файл для отправки клиенту.
Кроме растрового редактора Adobe Photoshop, прототип сайта можно создавать в онлайн сервисах. Например, Wireframe.cc.
Этот сайт прост в использовании и позволяет создавать прототип онлайн. Он не требует погружения в сложные мануалы. Для начала работы кликните в любом месте «холста» и вытяните мышкой прямоугольник нужного размера. У вас появился будущий элемент макета. Всплывающее меню подскажет, как преобразовать тип объекта, например, создать прямоугольник или текст. Холст можно увеличивать по высоте, используя справа кнопку «Настройки».
Есть удобная сетка, которая позволяет выровнять объекты. Есть вставка картинок, можно задать цвет блока, также есть возможность сразу посмотреть прототип в мобильной версии. См. рис.89.
В этом сервисе есть платные услуги. Разница между бесплатной и платной версиями в том, что во free-режиме (бесплатном режиме) нет поддержки учетных записей пользователей и работать можно только с одной страницей. Платный тариф позволяет работать в личном аккаунте с многостраничными проектами, поддержкой ревизий действий, кликабельными элементами и возможностью экспорта в PDF и PNG. Стоимость тарифа от $15 в месяц.
Кроме этого сервиса, есть и другие сайты, помогающие создать прототип онлайн: InVision App, NinjaMock, Moqups.com и другие.
4. Утверждение прототипа сайта у заказчика
После создания прототипа у веб-дизайнера возникает задача
В презентации следует акцентировать внимание заказчика на функциональности и структуре сайта. Ведь некоторых функций на прототипе просто не видно, их нужно озвучить.
Веб-дизайнеру нужно сфокусироваться на логике, поведении и последовательности действий пользователя на сайте и объяснить их заказчику. Заказчику следует представить себя на месте посетителя сайта и пройти весь его путь (называется «Конверсионный путь»), например, от перехода на главную страницу и до оформления заказа в «корзине товаров». Если в процессе прохождения возникают трудности, чего-то не хватает или какой-то элемент функционала непонятен, – нужно проработать данный момент и добавить недостающие элементы.