Основы web-дизайна. Урок 3. С чего начать?

Как часто трудно просто взять и начать. что бы то ни было. Начать делать сайт. Начать писать статью. Именно по этой причини многие еще со школы не любят писать сочинения, даже по прочитанной любимой книге. А все потому, что не знаешь,  с чего начать. Дизайн по сути дела тоже сочинение, только графическое. Главная задача вроде написания сочинения или создание дизайна слишком абстрактна и кажется огромной для нетренированного мозга, и он просто не в состоянии ее всю охватить. Решить эту проблему и преодолеть страх перед начинанием, поможет элементарное планирование. 

Предположим, вы пишите сочинение (или статью). Составьте его план, начиная с таких банальных пунктов, как введение, основная часть и заключение. Это настолько просто, что тут даже думать не надо. Далее, разбейте каждый пункт на подпункты. Затем подпункты еще на подпункты. И так далее. В итоге у вас уже появиться готовый скелет, на который вы без труда сможете нарастить "мясо" - готовый текст. Имя такой план, вы уже будете знать, что писать, и не будете задавать вопрос: "А с чего начать?". 

Аналогично можно придумать план действия для создания дизайна сайта:

1. Постановка задачи и описание проекта.

2. Сбор и анализ информации о проекте.

3. Сбор материалов, необходимых в работе.

4. Разработка структуры и прототипов дизайна.

5. Составление технического задания.

6. Создание дизайна.

7. Утверждение дизайна и переделки.

8. Сдача проекта заказчику.

А теперь разберем все эти пункты более подробно.

Постановка задачи и описание проекта

В первую очередь, нужно четко определить цель. Например: "Разработать дизайн сайта бильярдного клуба". Стоит заметить, что такая цель звучит слишком расплывчатой. Что бы более конкретизировать задачу, нужно побеседовать непосредственно с заказчиком, задать ему следующие вопросы:

• Что должен делать этот сайт в целом? Работать на узнаваемость брэнда? Продавать товары и услуги (например, посетитель сайта может на сайт же зарезервировать бильярдный стол на заданное время)? Информировать о деятельности компании? Привлечь новых клиентов?

• Кто является целевой аудиторией. Опишите их портрет: возвратная и социальная группа, уровень дохода, образование и так далее. 

• Какие сервисы и информацию будет предлагать сайт.

Сбор и анализ информации о проекте

Просмотрите сайты конкурентов. Ответьте на следующие вопросы:

• Какие достоинства и недостатки в дизайне вы увидели.

• Чего у них не хватает, какие идеи можно позаимствовать (но с заимствованием идей будьте осторожны, не нарушайте авторских прав).

• Что общего в дизайне сайтов других аналогичных компаний, может существуют какие то общепринятые стандарты по оформлению дизайна сайтов компаний данной отрасли.

Сбор материалов, необходимых в работе

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

Разработка структуры и прототипа дизайна

На этот этапе мы обдумываем, что и в каком месте сайта будет располагаться, составляем так называемый каркас сайта. Его еще называют "лайоут" (от англ. layout - планировка, расположение). В нем нет никакой графики, этот всего лишь план расположения элементов на сайте, он помогает помнить, что же в итоге вы планировали нарисовать.

Составление технического задания

В общей сложности, техническое задание должно включать в себя следующие пункты:

1. Шапка. Наименование заказчика и исполнителя, название проекта, так же можно сюда включить вводную часть (краткое описание проекта и круг задач, выполняемых дизайнеров) 

2. Назначение сайта. Что это за сайт: информационный, сайт-визитка, интернет магазин, порно-сайт, онлайн-сервис и так далее.

3. Материалы. В этом разделе перечисляются материалы, переданные заказчиком: логотип, описание фирменного стиля, информация о фирменных цветах, примеры печатной рекламы, фотографии и так далее.

4. Структура сайта. Здесь располагается полная структура сайта, утвержденная заказчиком. 

5. Прототип. Если вы создали прототип сайта до написания технического задания, включите его сюда.

6. Дизайн.  В этом пункте отражаться пожелания клиента по графическому оформлению сайта. 

7. Цветовая гамма. Обязательно опишите в ТЗ, какая у сайта должна быть цветовая гамма, что бы не получилось так, что вы создали сайт с черным фоном, а заказчик хотел  белый в зеленую полоску.  Самые распространенные варианты цветовой гаммы:

• Только цвета фирменного стиля.

• Цвета фирменного стиля плюс дополнительны цвета.

• Цвета, подходящие к стилю дизайна (по усмотрению дизайнера).

• Динамичные, контрастные цвета.

• Мягкие постельные цвета.

• Монохром (оттенки серого или какого либо цветного цвета).

• Два, три или более отпряденных цветов или оттенков.

8. Эмоциональная составляющая.

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

• Спокойных.

• Строгий, официальный.

• Яркий, вызывающий, шокирующий, агрессивный.

• Легкомысленный.

• Отражающий имидж фирмы и торговую марку.

9. Графика на сайте.

В этом разделе ТЗ опишите, какие фотографии необходимо будет выложить на сайт. Примеры:

• На усмотрение дизайнера.

• Не нужно.

• Абстракции.

• Люди.

• Животные.

• Растения.

• Техника.

• Быт и интерьер.

• Что либо другое.

 10. Способ верстки сайта.

От того, какой тип HTML-верстки сайта используется, зависит и дизайн. Так что способ верстки нужно оговаривать обязательно. возможны варианты:

• Жестокая левостороння или правостороння.

• Жесткая по центру.

• Резиновая (растягивается по размеру всего монитора).

11. Ширина страницы.

Для жесткой верстки это особо важный параметр. Если вы создадите сайт для разрешения 1024X768 то он может не войти в экран размером 800X600 или 640X480. С другой стороны, если вы сделаете сайт для разрешения  640X480, то на дисплее 1024X768 он будет смотреться очень мелко. В случае с "резиновым" типов верстки сайт будет так же по разному смотреться при разных разрешениях экрана. Может случаться и так, что  на одном разрешение выглядит нормально, а на более мелком дизайн уродуется. Так что обязательно уточните с заказчиком, какие видеорежимы должен поддерживать ваш дизайн..

12. Количество страницы.

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

13. Форма приемки передачи проекта. 

В этом разделе оговорите, в какой формате заказчику будет передан готовый результат: в виде HTML, графических файлов, или, может, быть, все надо сразу выложить на хостинг.  Сроки а так же  порядок приемки передачи и оплаты лучше всего оговорить в договоре, к которому будет прилагаться данное ТЗ.

Создание сайта

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

Утверждения дизайна и переделка

Если клиент адекватный, то он с пониманием отнесется к тому, что переделка с учетом требований, которые не были включены в ТЗ, будут за дополнительную плату. Но может случиться так, что один и тот же пункт можно толковать двояко. Особенно если речь идет о дизайне. в этом случае, как ни крути, действие презумпция правоты клиента, и переделывать такие спорные моменты придется бесплатно. Но что бы затраты времени на переделки свести к минимуму, во первых избегайте расплывчатых формулировок и фраз типа "На усмотрение исполнителя", а если уж все таки оговорили в ТЗ, что какой то элемент дизайна проектируется на ваше усмотрение, примите меры к тому, что бы в случае необходимости можно было все переиграть: цветовую гамму, размер, шрифт, форму и так далее. При верстке страницы используйте CSS и ему подобные средства. Думайте заранее, как сделать так, что бы переделки заняли как можно меньше времени.

Сдача проекта.

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