Разработка Web-сайта компании по производству обуви Cicross Footwear®

1. Логотип компании, постоянный для всех страниц Web-сайта.
2. Меню, на котором представлены все страницы сайта.
3. Баннер главной страницы размером 900х350 пикселей, на котором также расположен информационный блок с заголовком, в который встроена ссылка на соответствующую ей страницу, и рекламный текст.

Рисунок 5 – Шапка главной страницы

      Вторая зона главной страницы – основная часть, она представлена на рисунке 6. В этой зоне находятся:

1. Основной заголовок главной страницы.
2. Информационные блоки с изображениями, заголовками, и вводной частью рекламного текста со страницы «О продукции». Данные блоки представляют собой ссылки на страницу «О продукции», где и размещён основной материал.
3. Текстовое поле, представляющее собой краткую характеристику торговой марки Cicross^™.

Рисунок 6 – Основная часть главной страницы

      «Подвал» – это третья зона главной страницы, на ней расположены дополнительные элементы (виджеты) Web-сайта:

1. Галерея с изображениями некоторых моделей обуви компании Cicross Footwear^®. Данные изображения генерируются в случайном порядке и меняются в каждый раз при обновлении страницы и представляют собой превью-картинки, которые, в свою очередь являются активными ссылками на изображения в их полном качестве и размере.
2. Переводчик, который может качественно перевести контент Web-сайта на 54 различные языки мира.
3. Облако тегов, в котором расположены ключевые фразы для перехода к различным статьям Web-сайта.
4. Форма регистрации на сайте.
5. Кнопки перехода на социальные сети «Twitter» и «Facebook».

      Скриншот «Подвала» Web-сайта показан на рисунке 7.

Рисунок 7 – «Подвал» Web-сайта

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

Рисунок 8 – Страница «Новости»

      Страница «Акции» полностью идентична странице «Новости», различие заключается в том, что тут отображается информация только по акциям компании, не затрагивая другие тематические ряды. Скриншот страницы показан на рисунке 9.

Рисунок 9 – Страница «Акции»

      Страница «Статьи» представляет собой сборник всех опубликованных статей на Web-сайте, включая статьи со страниц «Новости» и «Акции». На данной странице можно осуществлять поиск статей по названиям, рубрикам, а также просматривать архив статей за определенные месяцы. Также есть функция комментирования статей. Скриншот страницы показан на рисунке 10.

Рисунок 10 – Страница «Статьи»

      На странице «Контакты» размещена информация о контактной информации магазина Cicross в городе Шахты. Здесь указаны: номер телефона магазина Cicross; адрес, который также отмечен на карте города. Важным элементом данной страницы является наличие на ней формы обратной связи, по которой пользователи могут связаться с представителями компании, задав им интересующие вопросы.

      На страницах «О компании», «О продукции» размещена детальная информация с иллюстрациями и видеофайлами о компании и продукции соответственно.

3. Разработка дизайна сайта

      Web-дизайн – отрасль Web-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских. Web-интерфейсов для сайтов. Web-дизайнеры проектируют логическую структуру Web-страниц, продумывают наиболее удобные решения подачи информации, а также занимаются художественным оформлением Web-проекта. Web-дизайн призван обеспечить высокие потребительские свойства и эстетические качества Web-сайтов [10].

      Разработка эффективного Web-дизайна предполагает соблюдение 4 обязательных требований:

1. Максимально удобный интерфейс: логика, структура и система навигации сайта.
2. Уникальное, яркое графическое решение. При этом Web-дизайн сайта должен быть разработан с ориентацией не на эстетические взгляды создателей, а на вкусовые предпочтения целевой аудитории.
3. Web-дизайн не должен мешать восприятию и читабельности текста.

Без соблюдения этих пунктов невозможна разработка эффективного Web-дизайна.

      Рассмотрим Web-сайт компании Cicross Footwear^® с точки зрения 3-х основных требований Web-дизайна.

1. Удобство интерфейса

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

      Не смотря на то, что на Web-сайте компании Cicross Footwear^® располагается множество различных элементов (графика, информационные блоки, баннеры и виджеты), тем не менее, процесс просмотра и работы с данным ресурсом не приносит никаких неудобств с точки зрения юзабилити. Это значит, что у пользователя не возникает чувства дискомфорта из-за излишней нагроможденности сайта и расположения функциональных блоков. Следовательно, можно сделать вывод, что все элементы Web-сайта, по сути, являясь отдельными частями, размещены таким образом, что в совокупности представляют собой единое целое и имеют логически понятную структуру. Это и является грамотным дизайнерским решением, называемым композицией. Подробнее рассмотрим композицию Web-сайта компании Cicross Footwear^®.

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

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

      Основная часть состоит из следующих элементов:

1. Баннер главной страницы размером 900х350 пикселей, на котором расположен информационный блок, состоящий из заголовка, в который встроена ссылка на соответствующую ей страницу, и рекламный текст. На данном баннере размещена иллюстрация одной из моделей обуви компании Cicross Footwear^® со шрифтовой надписью на данной обуви, а также изображения типичных представителей целевой аудитории компании.
2. Заголовок основой части и главной страницы Web-сайта в целом, который гласит о товарной категории компании Cicross Footwear^® и её ценовой категории. Данный заголовок призван заинтересовывать продукцией компании потенциальных клиентов, впервые посетивших Web-сайт.
3. Информационные блоки, повествующие о 4-х основных преимуществах выбора обуви компании Cicross Footwear^®. Тут можно увидеть 4 изображения, соответствующие определенным достоинствам торговой марки Cicross^™, заголовки к данным изображениям, а также интригующую часть рекламного текста о преимуществах данной обуви.
4. Текстовый блок, зрительно отделенный от других элементов сайта, в котором находится краткая и в то же время интересная информация о компании Cicross Footwear^®. Данный блок оформлен в виде цитаты.

      Фон подвала – зелёного цвета, он отличается от фона «шапки» и основной части. Это также помогает зрительно отгородить дополнительные элементы, размещенные в «подвале» от основной части страницы, что делаем весьма приятным использованием данной зоны.

2. Художественное оформление

      В основном, художественное оформление Web-сайта складывается из выбора и использования 3 основных элементов:

1. Цветов.

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

      Надо заметить, что характеристики цветов будут даваться с точки зрения русского менталитета, так как сайт будет функционировать в России.

      Основные цвета, используемые в ходе разработки сайта компании Cicross Footwear^® – это зелёный и белый, дадим их характеристику.

      Зелёный – очень приближенный к земле цвет. Он может представлять начало и рост, хотя часто включает в себя энергичность от жёлтого цвета. 
В дизайне зелёный даёт балансирующий и гармоничный эффекты, стабильность. Он соответствует богатству, возобновлению, постоянству и натуральности.

      Тёмно-зелёный цвет текстуры на фоне сайта – представительный и спокойный, цвет богатства, который весьма актуален в сфере деятельности компании Cicross Footwear^®. На тёмно-зелёном гармонично смотрится оливково-зелёный цвет «подвала» Web-сайта, который в свою очередь даёт уместное ощущение энергичности и свежести.

      Белый – это цвет чистоты, чести и достоинства. В дизайне Web-сайта компании Cicross Footwear^® белый используется как нейтральный фон, который позволяет другим цветам усилить своё значение. Он позволяет передать чистоту и простоту, которая так популярна в минималистических дизайнах.

2. Шрифтов.

        В ходе разработки Web-сайта для компании Cicross Footwear^® были использованы следующие шрифты:

1. Segoe UI с опцией сглаживания – шрифт заголовков первого уровня (весьма удобный для чтения шрифт с засечками, выполненный в стиле заголовков газет)
2. Selina, Selinalight – шрифт заголовков 2-6 уровней (немного вытянутый ввысь шрифт, что добавляет ему особую элегантность и в то же время не лишает читабельности, также с засечками)
3. Times New Roman – шрифт основного текста.

3. Декоративных элементов.

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

3. Читабельность текста

      Удобочитаемость («читабельность») – свойство текстового материала, характеризующее лёгкость восприятия его человеком. На Web-сайтах, как и в любых других источниках, работают те же правила правильного форматирования текста, среди которых:

1. Удобочитаемые шрифты.

В статьях Web-сайта компании Cicross Footwear^® было использовано не более 4 размеров шрифтов (для заголовков, подзаголовков и основных блоков), что гораздо облегчает читабельность шрифта. Отметим, что наиболее подходящими с точки зрения читабельности являются шрифты с засечками, которые и были использованы в ходе разработки данного Web-сайта.

2. Использование выделений текста.

Важные словосочетания и предложения отмечены курсивом, подчеркиванием либо жирным кеглем.

3. Контраст с фоном

Самым читабельным является текст, набранный черным цветом по белому фону. Это – весьма важное правильно, важность которого трудно переоценить. Именно таким образом и выполнен цвет фона и текста для данного Web-сайта.

4. Выравнивание

Абзацы выровнены по левому краю и тем самым воспринимаются лучше, чем выровненные по правому (согласно статистике).

5. Длина блоков текста

На одной странице Web-сайта содержится в среднем 1,5-4 тысячи знаков (в зависимости от содержания), вполне достаточно, т.к. длинные тексты на Web-сайтах читать не любят. Сами статьи разделены на смысловые блоки (абзацы), используются отступы и подзаголовки [7].