Оптимальное использование цветовых схем в веб-дизайне

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

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

Такие приемы существуют во многих известных сайтах – YouTube.com, ya.ru. Дизайн этих сайтов-гигантов давно зарекомендовал себя с положительной стороны и благодаря им также может быть ассоциирован с целеустремленностью  и строгостью работы – серый цвет, и скоростью работы, быстротой – красный цвет. Цветовая схема определена. Далее дело за архитектурой.

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

Было решено создать  сайт состоящий из четырех веб-страниц. Схема сайта на рисунке 2.1.

 

 

Рис.2.1 Архитектура веб-сайта

На главной странице будет  находиться общая информация о цвете  и истории его изучения, взятые из главы 2.1 данной курсовой работы. На странице «Введение» будет находиться информация из главы 1 – введения в  курсовую работу. Веб-страница «Изучений  значений цветов» будет содержать  основную часть одноименной главы  курсовой работы, только в укороченном, упрощенном варианте. «Сравнение рейтингов  интернет-сайтов» (глава 3.1.) – также  будет содержать основные выдержки своего аналога в курсовой работе. Раздел «Список сайтов лидеров», отраженный в самой курсовой как список созданный  по данным международного сервиса статистики Alexa.com, будет находиться в правой части всех веб-страниц как список-меню.

Сайт будет создан с  помощью языка гипертекстовой разметки HTML. На рисунке 2.2 показан фрагмент html-кода главной страницы

 

 

Рис.2.2 Фрагмент html-кода

На сайте antula.ru была найдена подходящая палитра безопасных цветов. Безопасная палитра состоит из 216 цветов. Безопасные цвета всегда неизменные при переходе от одного браузера к другому или от одной платформы к другой, от одного монитора к другому с их различными возможностями цветоотображения и разрешениями.

Если любое из трех шестнадцатеричных  значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.

Пример: HEX = (99, FF, 10)

Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения  на различных мониторах того, что  изначально было задумано веб-дизайнером. Вся таблица показана на рисунке 2.3 в шестнадцатеричной системе исчисления.

Формат GIF ограничен 256-цветной палитрой. Это означает, что, независимо от того, сколько цветов содержит файл, после  преобразования в формат GIF в нем останется 256 цветов или меньше. Причина этого ограничения состоит в том, что стандарт GIF разрабатывался для низких скоростей сетевых соединений. Так как каждый цвет, включенный в графический файл, представляет собой дополнительные данные, меньшее количество цветов означает меньшие размеры файла и более короткое время загрузки. Например, если 10 красных пикселей стоят в графическом файле рядом, то в формате файла без сжатия 10 красных пикселей будут представлены как 10 символов. GIF же в этом случае использует только два символа: число повторений цвета и сам цвет. Вместо 10 элементов данных получается только два.

Рис.2.3 Таблица безопасных цветов

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

Рис.2.4 Главная страница

На основе всех полученных данных создается веб-са йт. Происходит его верстка, валидация и отладка. 

ЗАКЛЮЧЕНИЕ

В данной работе мы попытались решить следующие задачи:

1. Выбрать оптимальное цветовое оформление;
2. Сравнить рейтинги ведущих Интернет-ресурсов Рунета и их цветовое оформление;
3. Создать свой собственный сайт с использованием оптимальных цветовых схем.

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

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

 

СПИСОК ЛИТЕРАТУРЫ

 

1. Некрасова И.И., «Программные средства разработки и организации web-сайтов», Новосибирск, 2012;
2. Серов Н.В., «Светоцветовая терапия», СПб: Речь, 2002;
3. Базыма Б.А., «Цвет и психика. Монография»,  Х.:ХГАК, 2001;
4. Цвета в web-дизайне: выбор правильного сочетания для вашего сайта [Электронный ресурс]: http://habrahabr.ru/post/105250/;
5. Купер М., «Как понимать язык цвета», Москва: ЭКСМО-Пресс, 2001;
6. Справочник веб-дизайнера. Плитра цветов для веб-дизайна [Электронный ресурс]: http://www.antula.ru/palitra.htm;
7. Цвет. Материал из Википедии – свободной энциклопедии [Электронный ресурс]: http://ru.wikipedia.org/wiki/%D0%A6%D0%B2%D0%B5%D1%82;