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

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

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

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

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

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

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

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

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

Обычно сайты дополняется функционалом, подключаемым извне. Это могут быть сервисы типа «Онлайн-консультант», калькуляторы, сервисы оплаты и доставки, рассылки, складского и бухгалтерского учета, 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. Комбинированный (сочетает в себе рисунок и текст).

Проще всего сделать для сайта шрифтовой логотип, просто написав название компании и подобрав интересный шрифт. Время для создания такого логотипа 5-20 минут. Если клиенту понравится такой логотип на сайте, и он попросит сделать из него векторный логотип, – веб-дизайнер может отрисовать его в векторной программе, или создать заново, применив те же шрифты и цвет.

Логотипы в векторе создаются для использования в полиграфии и печати, а значит должны быть сохранены в векторном файле, например, cdr, eps, pdf и цветовой модели CMYK. Это обязательное требование типографии. Передавать клиенту логотип в формате jpg нельзя.

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

Рис.91. Учебные комбинированные логотипы, созданные автором учебника

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

Правила создания логотипа:

– Обязательно составьте техническое задание на логотип (примеры техзаданий есть в сети Интернет).

– Предоставьте клиенту выбор: создать авторский или неавторский логотип (от этого зависит цена разработки).

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

– Используйте два цвета в логотипе, не больше, кроме логотипов детской тематики (здесь допускается больше двух цветов).

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

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

– Распечатайте логотип на обычном принтере в уменьшенном виде. Хорошо сделанный логотип при уменьшении не теряет деталей.

– Презентуйте логотип в среде: на сувенирной       продукции, на визитке, на сайте, на рекламном щите. Так заказчик быстрее утвердит логотип.

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

– Не используйте больше двух шрифтов в логотипе.