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

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

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

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

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

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

Прототип – это план, схема, набросок, она создаётся именно для того, чтобы клиент мог внести все правки и корректировки до создания веб-дизайна и до разработки сайта. Поэтому две стороны (заказчик и разработчик) собираются вместе для точной проработки всех деталей, как структуры сайта, так и его функционала и внешнего вида. Поэтому бурное обсуждение и внесение большого количества правок на данном этапе разработки сайта считается вполне нормальным. Лучше исправить всё на прототипе, чем переделывать дизайн или готовый сайт.

Польза прототипа для клиента

Кроме того, утвержденный прототип поможет клиенту сформировать список по подготовке материалов. Изучив прототип, клиент будет наглядно понимать, что нужно подготовить, какой текст и фото для страниц его сайта (например, для страниц «О компании», «Новости», «Вакансии», «Контакты» и т.д.). И создать папку с товарами для каталога, разделить их по категориям, подготовить фото и технические характеристики товаров и т.д.

Интеграция сторонних сервисов

Обычно сайты дополняется функционалом, подключаемым извне. Это могут быть сервисы типа «Онлайн-консультант», калькуляторы, сервисы оплаты и доставки, рассылки, складского и бухгалтерского учета, CRM и т.д. Все это надо отразить на прототипе и проговорить с клиентом, потому как эти сервисы могут быть платными и увеличить предполагаемый бюджет на разработку сайта.

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

Сбор обратной связи о прототипе

Иногда имеет смысл перед презентацией прототипа сайта «посоветоваться с народом». Показать прототип коллегам, например, менеджерам клиента, программисту, который будет работать над сайтом, клиентам заказчика. Это поможет выявить слабые места заранее и доработать веб-ресурс, сделав его более эффективным для взаимодействия с посетителями.

Итогом работы с прототипом станет:

– четкое понимание структуры сайта,

– утверждение модулей на первой страницы,

– ясное представление внешнего вида и функциональности сайта,

– устранение лишних элементов, добавление недостающих элементов сайта,

– наполнение сайта полезными инструментами, сервисами и опциями, которые обеспечат ему стабильную работу,

– подготовка сайта к продвижению за счёт добавления нужных элементов,

– готовый план будущего сайта для разработчика,

– инструкция для клиента, какие материалы надо подготовить к сайту.

Никогда не пренебрегайте созданием и утверждением прототипа сайта, – это сэкономит массу времени, средств и нервов при разработке сайта!

Глава 12. Фирменные цвета и логотип для сайта

В этой главе:

1. Использование фирменных цветов заказчика

2. Создание логотипа для заказчика

1. Использование фирменных цветов заказчика

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

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

Как применить фирменные цвета

Клиент предоставляет фирменный стиль в исходном, векторном варианте. Например, логотип в формате pdf или cdr (векторный формат). Задача веб-дизайнера – преобразовать логотип в формат png и расположить в веб-дизайне. Фирменные цвета могут быть представлены в виде компонентов цвета, например в цветовой модели CMYK. В веб-дизайне используется только модель цвета RGB, потому что с ней работает экран монитора.

Чтобы применить в веб-дизайне цвет по модели CMYK, нужно открыть окно докеров цвета в растровом редакторе Adobe Photoshop, набрать компоненты цвета и запомнить имя вебцвета. Далее в дизайне необходимо использовать этот цвет, подставляя имя веб-цвета, или копируя цвет инструментом «Пипетка». См. рис. 90.

Рис.90. Использование фирменного цвета на сайте

На рисунке 90 показано использование цвета в веб-дизайне. В окне «Палитра цветов» в растровом редакторе Adobe Photoshop задаются компоненты цвета в той модели, которую предоставил заказчик, например, в CMYK. Чуть ниже моделей цвета появляется имя веб-цвета. Например: 3f5d93. Этим цветом заливается нужный элемент и дальше он используется путем заведения имени цвета в палитре цветов. Если этот фирменный цвет нужно передать программисту или верстальщику сайта, то он пишется так: сначала решетка, потом имя цвета: #3f5d93.

Старайтесь использовать в веб-дизайне не больше двух основных оттенков, например, синий и серый (его оттенки: темно-серый, светло-серый), оранжевый и черный, зеленый и темно-серый и т.д.

2. Создание логотипа для заказчика

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

Логотип может быть сделан только под сайт, тогда допускается его создание в растровом редакторе, или делается полноценный логотип, тогда он должен быть в векторе (создан в векторной программе, например, CorelDRAW).

Логотипы бывают трех типов:

1. Шрифтовой (состоит только из букв).

2. Фигурный (рисунок), состоит только из рисунков и геометрических фигур без надписи.

3. Комбинированный (сочетает в себе