Создание графических шаблонов и руководства по стилю оформления

На этом этапе созданный дизайнерами облик должен быть перенесен на множество страниц. Графический шаблон берет за основу одобренный набросок дизайна и готовит его для оптимизации и производства HTML. Он называется шаблоном потому, что будет использоваться как для HTML-страниц, непосредственно для которых он разработан, так и для всех аналогичных страниц.

Создавать графический шаблон можно в Photoshop в виде многослойного файла (.psd).

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

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

 Размеры страниц.

 Заголовки. Включите навигационные и поднавигационные выноски, такие как стили для активного и неактивного состояний, размеры, механизм присоединения логотипа и/или слогана, размеры текстов и стили для графических и HTML-заголовков и т.д.

 Цвета. Определите шестнадцатеричный код для фона, основной палитры и цветовых акцентов. Четко укажите, какие цвета применяются к навигационным заголовкам; для текста, когда изменяется цвет фона; какой цвет используется для кнопок, маркеров, стрелок, звезд и других графических знаков.

 HTML-текст. Опишите всю обработку текста, в том числе цвет и/или особый шрифт HTML или размер.

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

 Обработка изображений. Определите любые действия в Photoshop или Fireworks, например, обработку границ, применение специальных фильтров.

 Декорирование. Опишите стандарты для кнопок, линий, стрелок и других фишек.

 Форматирование кодов. Когда использовать табуляцию? Когда разрывать строки? Когда и как использовать теги комментариев?

14. Процесс разработки web-узла. Производство и контроль качества.