1. Разработка концепции дизайна

В первую очередь необходимо:

 Выявить недостатки существующего сайта (если он есть);

 Проанализировать основные цели дизайна (какое впечатление сайт должен производить на аудиторию);

 Посмотреть конкурирующие сайты.

Разработка внешнего оформления включает в себя две основные задачи: подбор цветов и примерное размещение объектов. Предварительные эскизы могут выполняться как на бумаге, так и на экране.

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

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

Результаты необходимо представить на одобрение клиенту. Нужно помнить: 1 слишком большой выбор на ранней стадии процесса замедлит работу, так как вызовет колебания клиента. 2 не показывайте варианты, которые вам не нравятся только потому, что вам нечего больше показать.

2. Выверка

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

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

Должны быть проверены любые из следующих компонентов:

 Всплывающие окна, особенно с фиксированным размером или расположением;

 Таблицы стилей или любые компоненты, требующие проверки в браузерах;

 Выпадающие меню (особенно те, что работают как ссылки);

 Стандартные функции для покупательской корзины;

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

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

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

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

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

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

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

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

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

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

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

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

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

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