Контраст — фундаментальная основа веб дизайна. Контраст выполняет функцию дифференциации элементов – выделения наиболее значимых элементов и приглушение менее важных.
Контраст влияет на восприимчивость
Контраст напрямую влияет на восприимчивость человеком чего-либо. Он позволяет разделить веб страницу на элементы, который в зависимости от контраста будут более или менее заметны. Элементы с высоким контрастом являются наиболее значимыми и восприимчивыми.
Контраст – одна из проблем современного веб дизайна. Многие начинающие веб дизайнеры не придают ему особого значения и создают сайты, элементы которых не имеют разделенный контраст, что в конечном итоге приводит к плохой восприимчивости дизайна в целом.
Как правильно использовать контраст
Главное правило – контрастными должны быть именно важные элементы веб страницы. Откройте свою веб страницу и посмотрите на нее глазами посторонних посетителей, которые зашли на ваш сайт с определенной целью. Вы продаете какие-либо товары? Сделайте данный блок выделенным, добавьте цвет или наоборот, понизьте контраст остальных элементов, что бы при входе на ваш сайт, посетитель первым делом заметил именно этот блок.
Запомните, контраст веб страницы составляется из взаимодействия важных и менее важных элементов. Например, если ваша веб страница имеет темный фон и чуть затемненные ссылки белого цвета, выделите наиболее важные ссылки просто белым цветом, что бы они сразу бросались в глаза.
Пример недостаточного контраста
На примере рассмотрим дизайн сайта http://www.getinspired.at. Дизайн сайта имеет несколько больших проблем.
Контраст в веб дизайне
Во-первых, веб странице явно не достает контраста. Она выглядит однотипной, монотонной, что в конечном итоге сказывается не только на восприимчивость, но и затрудняет чтение содержимого страницы.
Использование текста серого цвета на сером фоне содержимого, да еще и в совокупности с серым фоном странице не очень хорошая идея. В итоге получается, что самым значимым элементом страницы является фирменный баннер Get FireFox. В данном случае вероятность того, что посетители зайдут на сайт FireFox и скачают одноименный браузер намного выше, чем вероятность того, что они воспользуются услугами веб дизайнера Juergen Lang 🙂
Однако при внесении небольших изменений в контраст, страница действительно может выглядеть намного привлекательней.
Контраст в веб дизайне
Повысив контраст меню справа мы увеличили вероятность того, что посетители все же заметят, что это меню, а не набор однотипных затемненных рекламных ссылок. А изменив фон содержимого с серый на белый – позволили посетителю без нагрузки на зрение прочитать содержимое главной страницы.
Правила контраста
1. Области высокого контраста более привлекательны, чем элементы низкого контраста.
На самом деле важные элементы можно выделить и при помощи низкого контраста. Например, если все элементы страницы будут высокого контраста, а какой-то блок – низкого, безусловно, внимание будет обращено именно на него.
2. Резкая смена контрастов привлекает
Резкий смен контраста с низкого на высокий смотрится достаточно оригинально. Это же касается и использования тонких границ и линий вместо толстых. Чем толще границы, тем больше интервал между элементами, а значит, разделитель утрачивает свою ясность.
3. Контраста можно добиться, используя тона и цвета.
Разумеется, если поместить на оранжевый фон элемент голубого тона, то он будет заметнее, чем, если на фон поместить элемент, близкий по цветовой гамме к фону.
4. Динамика привлекает
Так уже устроено человеческое зрение, что наибольшего внимания можно добиться, используя динамику, движения на веб странице. Это не обязательно может быть анимация. Используйте диагональные линии, вместо прямых, трехмерные изображения, вместо плоских.
Измерение контраста
Что бы измерить уровень контраста необходимо сравнить блеск/яркость переднего плана и фона. Чем больше разница, тем выше контраст.
Использование черного цвета на белом является наиболее оптимальным для удобного чтения текста.
Контраст в веб дизайне
Во втором примере желтый цвет используется на сером фоне, что является плохой идеей, так как достаточно тяжело различить, что же все-таки написано в меню. Желтый цвет не добавляет контраста, а наоборот, поглощает его.
Контраст в веб дизайне
При использовании легкого фона, также можно добиться максимального контраста.
Контраст в веб дизайне
Использование инвертированного выделения также является хорошей идеей, но только в том случае, если цвета подобраны соответствующим образом. Например, тот же желтый цвет в совокупности с серым смотрится достаточно плохо.
Контраст в веб дизайне
А вот например инвертировать черный и белый цвет – замечательная идея.