7.2. Этап разработки компонентовWeb-узла и связывание их между собой.

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

Необходимо на этом этапе разработать

• карта сервера;

• подготовка контекста, создание и редактирование;

• обозрение материалов;

• технические спецификации (тактическая сторона);

• навигация и разметка страниц.

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

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

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

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

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

• Будут ли страницы генерироваться «на лету» из датобазы?

• Будут ли использованы Cascading Style Sheets (CSS)?

• Потребуется ли наличие модуля (plug-in) или специального контроля на машине пользователя?

• Под какой минимум необходимо оптимизировать цветовую палитру?

• Вы будете писать код сами или использовать WYSIWYG

• Будут ли использованы DHTML, Channels, Push технологии?

Затем вы должны определиться с навигацией. Как будет посетитель продвигаться по сайту? Какая связь существует между страницами, куда можно попасть и откуда и т.д. Учитесь на сайтах, которые вам нравятся больше всего: проще - лучше.

7.2.1. Разработка дизайна интерфейса

• творческие поиски и разработка стиля;

• создание прототипов;

• утверждение заказчиком;

• графическое производство: дизайн датабаз и форм, анимации, графика в GIF/Jpeg, обработка в html.

Интерфейс. Начните с самой важной страницы, работайте над ней до тех пор, пока у вас не будет как минимум 15 набросков различных вариантов, из которых 5 можно развить дальше. Продолжайте искать идеи, рисовать и думать. Попробуйте поэкспериментировать с различными эффектами: real audio/vidio, динамическое html, необычное использование тегов и т.д.

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

Выберите 3 законченных варианта: ваш любимый, несколько экстравагантный и консервативный, который вы уверены, понравится заказчику. Создайте для них прототипы, которые он сможет посмотреть и одобрить. Прототип - черновой вариант слинкованных между собой основных страниц сайта. Не обязательно писать код для этих страниц, вы прекрасно можете обойтись image-maps. Порежьте страницы на части и пролинкуйте графику между собой. Не тратьте время на ее оптимизацию, и объясните заказчику, что она немного потеряет в качестве при дальнейшей обработке. Задача прототипов - хорошо смотреться в окне браузера и понравится заказчику.