2.3Разработка дизайна

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

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

Следующим этапом в разработке комплексного дизайна Интернет-сайта является оформление внутренних, или второстепенных, страниц. Они также должны быть интересны для посетителя, иметь оригинальный внешний вид и в то же время сохранять визуальную целостность всего ресурса. Внутренние страницы сайта несут основную информационную нагрузку. В исключительных случаях пользователь получает всю необходимую ему информацию на главной странице. Грамотный дизайн внутренних страниц портала помогает посетителю находить и усваивать нужную информацию. [6]

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

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

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

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

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

5. Фиолетовый - традиционно ассоциируется с властью, благородством и богатством. Мудрость, независимость, благородство, роскошь, честолюбие, достоинство, магия и тайны.

6. Зеленый - цвет гармонии, природы, исцеления, жизни, питания и здоровья. Кроме того, часто связан с деньгами.

7. Коричневый - цвет релаксации и уверенности. Коричневый означает приземленность, природу, долговечность, комфорт, надежность.

8. Серый - вызывает чувство серьезности, консерватизма и традиционализма. Возбуждает ощущение чистоты и невинности.

9. Розовый - выражает нежность, романтичность, женственность, пассивность, привязанность, воспитание, слабость.

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

11. Белый - связан с чистотой, простотой, свежестью, добротой, невинностью.

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

• если необходимо, чтобы текстовое содержимое было легко читаемым, следует выбирать контрастные цвета;

• нужно выбрать оптимальное количество цветов, не следует делать из сайта «цирк»;

• также важно использовать достаточное количество цветов, минимальное количество цветов может способствовать «серости» сайта;

• если нужно привлечь посетителя следует применять интенсивные цвета;

• можно найти дополнительные цветовые схемы из наблюдений за природой – естественные цвета смотрятся привлекательно и органично. [7]

На основе всего вышесказанного было решено использовать сочетание четырех цветов: оранжевого, желтого, белого и коричневого. Для этого в проекте будет использоваться так называемый шаблон Joomla! – «YT STEAM» от YOOtheme, представленный на рисунке 7.

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

Схема переработанного шаблона представлена на рисунке 8.

Рисунок 7 – Шаблон «YT STEAM» от YOOtheme

Рисунок 8 – Схема страницы

Логотип сайта был разработан в соответствии со стилистикой сайта, основным выбранным цветовым оформлением. При размещении на странице сделано дополнительное выделение в виде контура. Логотип представлен на рисунке 9.

Рисунок 9 – Логотип сайта

Для написания заголовков будут использоваться стандартные шрифты H1, H2 и H3. Для шрифтов меню и текста сайта используются: Tahoma, Geneva (рисунок 10).

Рисунок 10 – Пример шрифтов

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

На рисунке 11 представлен инструмент системы управления контенте «Панель управления». Используя данное средство, администратор может производить мониторинг основных событий происходящих в системе, а также производить некоторые действия, минуя другие инструменты системы. При помощи «Панели управления» администратор может выполнять следующие действия:

1. производить мониторинг количества записей, страниц, комментариев, сообщений;

2. менять тему оформления системы;

3. производить обновление системы управления контента Joomla;

4. отслеживать наличие новых комментариев, внешних ссылок, черновиков статей;

5. отслеживать наличие новой технической документации о системе управления контентом Joomla;

6. производить быструю публикацию новостей проекта.

Рисунок 11 – Панель администратора

На рисунке 12 представлен инструмент «Все меню», который обеспечивает возможность администратору работать со страницами, составляющими систему. Используя данное средство, администратор может создавать новые страницы, удалять и редактировать существующие. Редактирование страниц системы может проводиться, как в визуальном виде, так и в режиме редактирования HTML/PHP кода.

Рисунок 12 – Все меню

На рисунке 13 представлен «Менеджер материалов» - это универсальный раздел, который позволяет сразу увидеть все материалы, которые были загружены на сайт, есть возможность отключать/включать нужные, выбирать порядок публикации, а так же можно легко узнать в каком разделе и в какой категории находится нужный материал.

Рисунок 13 – Менеджер материалов

На рисунке 14 представлен инструмент «Менеджер модулей», который позволяет администратору редактировать различную информацию, касающуюся внешнего вида системы. Использование данного средства предоставляет следующие функции:

• манипулирование административной панелью;

• манипулирование виджетами системы;

• манипулирование меню системы.

Рисунок 14 –Внешний вид системы

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

Данное средство предполагает следующий функционал:

• поиск, добавление, удаление плагинов;

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

• настройка некоторых плагинов.

Рисунок 15 – Менеджер плагинов

На рисунке 16 представлен инструмент «Пользователи системы», который позволяет манипулировать пользователями системы. Данное средство позволяет администратору выполнять следующие действия:

• просматривать библиотеку существующих пользователей и при необходимости редактировать их профили;

• изменять права доступа пользователям;

• добавлять новых пользователей;

• изменять собственный профиль.

Рисунок 16 – Пользователи системы

На рисунке 17 представлено средство системы управления контентом «Инструменты», которое позволяет администратору выполнять следующие операции:

• прочитать сообщения;

• написать сообщения;

• воспользоваться массовой рассылкой;

• сброс блокировок;

• очистить/удалить кэш.

Рисунок 17 – Инструменты системы

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

• производить общие настройки системы;

• производить настройку написания, чтения и обсуждений;

• производить настройку библиотеки медиафайлов;

• настраивать приватность в системе;

• изменять системные настройки;

• изменять настройки сервера;

• настраивать некоторые плагины системы.

Рисунок 18 – Общие настройки