15 мая 2023 года "Исходники.РУ" отмечают своё 23-летие!
Поздравляем всех причастных и неравнодушных с этим событием!
И огромное спасибо всем, кто был и остаётся с нами все эти годы!

Главная Форум Журнал Wiki DRKB Discuz!ML Помощь проекту


   
WEB -ДИЗАЙН
prozr.gif (809 bytes)

Цветные сайты

Дмитрий Румянцев

Канули в Лету времена, когда серфинг по WWW осуществлялся с помощью текстовых броузеров вроде lynx. Цвет, звук, анимация – все это стало непременным атрибутом большинства сайтов. Изредка встречающиеся “островки” чистого текста вызывают улыбку жалости у серфера, и как результат – нажатие кнопки “Назад”. Грамотно оформленный с точки зрения колористики сайт значительно выигрывает в глазах пользователя. А правильно подобранная палитра, выдержанные переходы цвета, отсутствие аляповатой графики давно уже стали одними из главных слагаемых успеха в деле построения WWW-сервера.

Разработка цветовой палитры сайта – дело довольно сложное. С одной стороны, страница должна быть красочной и яркой, с другой – на общем фоне не должны теряться детали “интерьера”. Глаз пользователя должен сразу определять, например, необходимые ссылки на интересующие разделы. И помочь в этом может достижение отимального контраста текста и графики по отношению к фону страницы. Использование в качестве фона прозрачного GIF-изображения затрудняет ориентацию, внимание рассеивается. Более приемлемым является однотонный фон, выполненный в светлых тонах. Чаще всего для этого используется белый цвет – на белом не только хорошо смотрятся практически все цвета, но и облегчается создание прозрачной графики, поскольку дизайнеру нет необходимости заботиться об особенностях воспроизведения цвета в том или ином броузере.

Однако применение темного фона нисколько не снижает возможность выбора того или иного композитного (дополнительного) цвета. На черном фоне одинаково неплохо смотрятся надписи, выполненные светло-голубым, белым или желтым цветом. Но темные тона не прибавляют настроения, глаз рискует устать от непомерного контраста, и если разрабатываемый сайт не относится к underground, то лучше подарить миру более светлое творение. Что же касается темных тональностей, то наиболее приемлемым представляется вариант использования серых оттенков. Выбор белого основного фона, черных наименований разделов, полутоновая светло-серая окантовка меню, широкое использование теней в графике, а в случае применения frames – деление страницы на белую и серую часть средней насыщенности, могут в совокупности заставить серфера затаить дыхание.

Количество цветов, используемых при дизайне, строго говоря, ограничено. Как и при разработке пользовательских интерфейсов программ, лучше всего следовать руководству “Task-centered User Interface Design” (C. Lewis, J. Rieman), в котором отражены основные принципы восприятия пользователем цветовой гаммы. Наиболее приемлемыми являются наборы из 4-5 цветов. Это не значит, что вам придется обязательно использовать спартанский стиль “ничего лишнего”. Умелым сочетанием можно добиться исключительных результатов. Пожалуйста, вот вам несколько “классических” цветовых моделей: белый – черный – оттенки серого (не более 5 – 6 цветов); белый – голубой – темно-синий – черный; белый – зеленый (teal) – голубой; черный – светло-голубой – белый – желтый. Наряду с этим следует учитывать видимость одних цветов на фоне других.

“Читаемость” сайта – одно из требований, которое должно стоять на первом месте. Рекомендуемые подборки цветов следующие: белый фон – черный, темно-синий, темно-серый текст; желтый фон – черный текст; черный фон – белый или светло-голубой текст и т.д. Ряд можно продолжить, однако следует учесть следующее: излишний контраст “режет глаз”, снижая восприятие текста. Поэтому при разработке следует избегать таких цветов, как красный – на любом фоне он смотрится как яркое пятно.

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

Ссылки, которые могут понадобиться:

  1. Руководство “Task-Center User Interface Design” (http://www.empowermentzone.com/uidesign.txt).
  2. Российский клуб Web-мастеров (http://www.webclub.ru).
  3. Таблица цветов на CitForum (http://www.citforum.ru/internet/html/colors.shtml).
  4. Эффективная таблица цветов для Web-сайта (http://www.arbn.com/webdesign/chap7/chap7.htm).
  5. Колористика (сайт Даниила Боженова) (http://www.popstyle.hotmail.ru).