Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов

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

Алгоритм создания прототипа

Сначала в программе создаётся пустой файл шириной 1920 пикселей и высотой примерно 5000 пикселей. Для контента задается ширина с полями (1920 – 300Х2 = 1320 пикселей). Высота потом меняется в зависимости от количества модулей.

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

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

Рис.87. Создание прототипа в растровом редакторе

Некоторые элементы не прорисовываются, а лишь обозначаются, например, логотип или кнопка. Телефон и электронная почта пишутся в случае, если они уже предоставлены заказчиком. Если же нет, можно просто написать «Телефон» или поставить условный номер, типа: 8 800 999 99 99.

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

Рис.88. Обозначение фото на прототипе

Прорисовываются все модули, которые будут на сайте, начиная с «шапки» и заканчивая подвалом сайта. Файл обязательно сохраняется в слоях (формат PSD), чтобы можно было вносить изменения, редактировать его. Из формата PSD создаётся JPG-файл для отправки клиенту.

Кроме растрового редактора Adobe Photoshop, прототип сайта можно создавать в онлайн сервисах. Например, Wireframe.cc.

Сервис Wireframe.cc

Этот сайт прост в использовании и позволяет создавать прототип онлайн. Он не требует погружения в сложные мануалы. Для начала работы кликните в любом месте «холста» и вытяните мышкой прямоугольник нужного размера. У вас появился будущий элемент макета. Всплывающее меню подскажет, как преобразовать тип объекта, например, создать прямоугольник или текст. Холст можно увеличивать по высоте, используя справа кнопку «Настройки».

Есть удобная сетка, которая позволяет выровнять объекты. Есть вставка картинок, можно задать цвет блока, также есть возможность сразу посмотреть прототип в мобильной версии. См. рис.89.

Рис. 89. Онлайн сервис для создания прототипа

В этом сервисе есть платные услуги. Разница между бесплатной и платной версиями в том, что во free-режиме (бесплатном режиме) нет поддержки учетных записей пользователей и работать можно только с одной страницей. Платный тариф позволяет работать в личном аккаунте с многостраничными проектами, поддержкой ревизий действий, кликабельными элементами и возможностью экспорта в PDF и PNG. Стоимость тарифа от $15 в месяц.

Кроме этого сервиса, есть и другие сайты, помогающие создать прототип онлайн: InVision App, NinjaMock, Moqups.com и другие.

4. Утверждение прототипа сайта у заказчика

После создания прототипа у веб-дизайнера возникает задача утвердить прототип. Кто-то отправляет прототип по электронной почте, кто-то лично приезжает на встречу или обсуждает план будущего сайта в режиме онлайн по Скайпу. Но, в любом случае, нужна презентация прототипа с подробным описанием модулей сайта.

Презентация прототипа

В презентации следует акцентировать внимание заказчика на функциональности и структуре сайта. Ведь некоторых функций на прототипе просто не видно, их нужно озвучить.

Веб-дизайнеру нужно сфокусироваться на логике, поведении и последовательности действий пользователя на сайте и объяснить их заказчику. Заказчику следует представить себя на месте посетителя сайта и пройти весь его путь (называется «Конверсионный путь»), например, от перехода на главную страницу и до оформления заказа в «корзине товаров». Если в процессе прохождения возникают трудности, чего-то не хватает или какой-то элемент функционала непонятен, – нужно проработать данный момент и добавить недостающие элементы.

Обсуждение прототипа, внесение правок