Разработка информационного web-сайта типографии ООО "Абсолют Принт"

Заключение договора. Если клиент объявляет тендер на разработку сайта, то до заключения договора представляются несколько дизайн эскизов.

Разработка.

Получение всех информационных материалов (тексты и фотографии) в электронном виде или на твердых копиях от Заказчика.

Уточнение требований к дизайну и информационному наполнению (фирменная цветовая гамма, образы, слоган и т. д.). Требования к верстке.

Согласование дизайн проекта. Визуальное представление первой страницы и 2-3 уровней сайта без верстки. HTML-верстка и программирование (CGI, CSS, JavaScript и т. д.).

Тестирование.

Открытие тестового домена на сервере hostinger.ru или другом сервере по указанию Заказчика.

Размещение beta-версии корпоративного сайта на сервере. Представление Заказчику.

Тестирование, исправление замечаний.

Размещение.

Регистрация домена и открытие официального сайта. Сдача работ.

Сопровождение.

Клиентам предлагается передать функции управления и продвижения сайта, заключив договор с агентством на постоянное сервисное обслуживание, в которое может входить:

- анонсирование ресурса на поисковых системах в Internet;

- периодическое обновление информации на сайте (в течение 24-48 часов после получения информации);

- актуализация информации и расширение информационного наполнения, добавление новых разделов и информации. Сканирование и замена фотоизображений;

- разработка баннеров и рекламных кнопок;

- организация баннерной рекламы в различных системах.

Общий срок от начала переговоров до сдачи работ зависит от сложности проекта и составляет от 3 недель до 3-4 месяцев. Сроки значительно сокращаются, если Заказчик уже имеет подготовленные информационные материалы для размещения.

 

2.1 Разработка меню навигации информационного web сайта

 

Меню навигации.

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

Понятие системы навигации.

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

Типы навигации.

Существует несколько типов организации навигации по Web-сайту. Рассмотрим основные.

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

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

 

 

Графика.

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

 

Рис. - Графическая система навигации:

 

Требования к системе навигации.

При разработке системы навигации необходимо следовать некоторым обязательным требованиям, соблюдение которых поможет создать простую и удобную в обращении, интуитивно понятную любому пользователю навигационную структуру. Эти требования могут несущественно варьироваться в зависимости от особенностей Web-сайта, представленной на нем информации, а также некоторых субъективных факторов разработчика. Однако разрабатываемая система навигации должна в конечном итоге соответствовать ряду критериев удобства пользования навигацией, называемому usability.Таких как: расположение, иерархия и наименования, доступность.

Из системы навигации строится структура сайта. Так будет выглядеть наша структура информационного Web-сайта типографии ООО «Абсолют Принт».

 

Рис. - Структура информационного Web-сайта типографии ООО «Абсолют Принт»:

 

2.2 Разработка графического макета будущего web-сайта

 

Компоновка макета.

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

1. "шапка" - занимает верхнюю часть сайта в окне браузера (как правило, не больше 1/4 видимой части экрана без прокрутки) и может содержать:

- логотип;

- слоганы, лозунги, девизы;

- рекламную информацию (баннеры  и текстовые блоки) и др.;

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

3. содержательная часть - здесь отображается основная и самая главная составляющая любого Web-сайта - информация: новости и каталог продукции, контактные данные и гостевая книга и т. д.;

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

- информацию об авторском праве  разработчиков Web-сайта (полный текст  или ссылка на него);

- координаты для связи;

- дублирующую навигацию (текстовую);

- рекламную информацию (баннеры  и текстовые блоки) и др.

Тип верстки.

Еще одним важным моментом, предшествующим началу работы над графическим макетом, является выбор типа верстки:

- "фикс" - в этом случае сайт "затачивается" под конкретное  минимальное разрешение экрана  и при изменении размеров окна  браузера его компоновка остается  фиксированной;

- "резина" - структура сайта  изменяется пропорционально изменениям  размеров окна браузера (т. е. сайт "растягивается").

Логично предположить, что при выборе типа верстки следует исходить из минимального разрешения экрана.

 

Таблица 2.1. Правильная ширина макета

Работа над макетом.

Наконец мы подошли к моменту, когда нужно открывать Adobe Photoshop (или любой другой удобный вам графический пакет) и творить.

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

1. Компоновка блоков: вверху - "шапка", слева и вверху посередине- меню навигации, справа посередине - содержательная часть, внизу - "подвал".

2. Тип верстки: "резина", минимальное  разрешение - 1920x1200.

3. Цветовая гамма: белый, черный, серый, зеленый, фиолетовый.

4. Шрифты: Arial, Circe, Century Gothic.

Итак, задание понятно, приступаем к работе.

Первым делом создаем заготовку размером 1900X1180 (при разработке макета из ширины в 1920 вычитается размер полосы прокрутки в Microsoft Internet Explorer, как правило, 20 пикселов).

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

В программе Corel Draw делаем логотип предприятия, если такового нет. Выбираем инструмент кривую Безье, рисуем логотип, добавляем текст, применяем к логотипу цветовую гамму, и наш логотип готов.

Рис. Создание логотипа.

Логотип сохраняем в формате Jpeg и добавляем в шапку макета Photoshop. Рисуем баннер на котором будет располагаться название страницы.

Баннер сохраняем в формате Jpeg и добавляем в шапку макета Photoshop.

Также рисуем 3 кнопки к меню навигации (нажатая кнопка, наведенный курсор на кнопку, обычная кнопка) и сохраняем в формат Jpeg. 
Рис. Создание кнопок меню навигации

Создание кнопки меню навигации.

Добавляем в меню навигации макета Photoshop. Добавляем линию подвала, в котором будет располагаться информация об авторском праве и дублирующая навигация.

Готовый макет Web-сайта в Photoshop.

Таким образом, на нашем макете остается незаполненной лишь содержательная часть. Содержательную часть заполняем необходимой для компании информацией, будь-то текст или картинки.

 

Рис. - Содержательная часть: