Цвет как средство обеспечения удобства веб-сайта

Цвета в интернете — еще один важный инструмент обеспечения удобства. Собственно, именно они берут на себя ключевую роль в передаче ощущения пространства интерфейса, контекста использования того или иного элемента и, конечно, в создании положительного эстетического восприятия дизайна.

Немало важных принципов работы с цветом в графическом дизайне мы описали в материале «Работа с цветом в дизайне».

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

Начнем с того, с чего приходится начинать и веб-дизайнеру при создании палитры — с работы с фоном.

Выбор цвета для фона сайта

Цвета фона сайта — это всегда важная составляющая палитры.

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

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

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

При этом цвета вполне могут подходить друг другу в соответствии с цветовым кругом Иттена, но для комфортности этого недостаточно.

Чтобы контраст содержания и фона стал комфортным для восприятия, следует выбирать пары цветов, имеющих высокий контраст по освещенности (это параметр Brightness в модели цветов HSB).

Чем этот контраст сильнее, тем комфортнее будут восприниматься пары цветов.

Как выбирать изображения для фона

Иногда дизайнеры хотят для лучшей иллюстративности добавить на фон изображение.

Конечно, это можно делать. Но сюжет на фон следует выбирать сознательно.

Часто дизайнеры не воспринимают объекты на изображении, которое они выбирают для фона, как принадлежащие к общей композиции.

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

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

Маски и затемнение

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

Маска — это специальный технический слой в дизайне. С помощью масок можно создавать области видимости (например, когда вы размещаете квадратный аватар в круге) или же можно использовать их для освещения или затемнения.

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

Если вы действительно считаете изображение полезным и уместным — не стоит прятать его за затемнением. Возможно, следует добавить его отдельной иллюстрацией?

Это не значит, что затемняющие маски вообще не следует применять в веб-дизайне.

Маски более чем оправданы в случаях, когда нужно временно привлечь внимание пользователя. Например, при появлении модального окна. В таком случае маски помогают передать ощущение, что мы остаемся на странице и что нам надо обратить внимание на то, что написано в модальном окне.

Воздушная перспектива в веб-дизайне

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

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

Следовательно, в веб-сайте существуют планы. Каким образом следует выбирать цвета для каждого из этих планов?

В этом вам может помочь воздушная перспектива. Всем нам она хорошо знакома. Вы имеете с ней дело каждый раз, когда смотрите в окно. Она называется воздушной, потому что в действительности воздух не совсем прозрачен, и чем больше его между вами и объектом, тем это заметнее. Соответственно, чем больше расстояние от вас до объекта, тем светлее он выглядит.

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

Зонирование цветом

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

Какой принцип выбора цветов следует применять в таком случае? Мы рекомендуем применять принцип контраста в соответствии с родственностью. То есть, чем больше различаются элементы по содержанию или функциям — тем более сильный контраст следует применять.

Например, для отдельных смысловых блоков большой статьи можно использовать слабый контраст.

А вот для фона меню, формы и описательной части страницы можно использовать более сильный контраст.

Если композиция позволяет, можно зонировать содержание простыми отступами между элементами.

А вот функциональные элементы (формы и меню) часто полезно зонировать, просто с акцентной точки зрения.

Цвета функциональных элементов

Еще одна группа элементов, для которых вам приходится выбирать цвета — это функциональные элементы (поля форм, кнопки, ссылки и так далее).

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

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

Например, красный цвет по умолчанию мы часто воспринимаем как цвет запрета или опасности. Желтый — как предупреждение. Зеленый — как цвет поощрения, разрешения. А синий — как нейтральный.


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

Дневная и ночная тема оформления

Повсеместное использование одновременно двух тем — светлой и темной — это относительно новый тренд в дизайне. Но, судя по всему, в интерфейсном дизайне он будет только укреплять свои позиции.

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

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

Собственно, темную тему еще часто называют ночной (ибо для большинства пользователей она уместна в вечернее время), а светлую — дневной (так как ее комфортнее воспринимать днем).

Принципы инклюзивности в работе с цветом

Выбирая цвета для веб-сайтов, важно помнить и о веб-доступности.

Это совокупность принципов проектирования, которая делает восприятие сайта более комфортным для людей, имеющих определенные физические ограничения. В контексте цветов — это частичная или полная цветовая слепота (то есть неспособность человека различать отдельные или все цвета).

Подробно принципы веб-доступности описаны в руководствах Web Content Accessibility Guidelines (WCAG) 2.0.

В этом материале мы обращаем внимание на несколько общих рекомендаций:

  • Для веб-сайтов не стоит использовать слишком разноцветные палитры в оформлении функциональных элементов.
  • Помните, что часть ваших пользователей частично или полностью не различает цвета, поэтому на функциональных элементах следует разместить подсказки или иконки, которые помогут воспринимать контекст использования кнопки или поля формы.
  • Чтобы понять, как будут воспринимать ваш сайт люди с цветовой слепотой, можно использовать специальный симулятор Coblis (от англ. Color blindness simulator). https://www.color-blindness.com/coblis-color-blindness-simulator/
  • Старайтесь выбирать для фона, содержания и функциональных элементов комбинации цветов, имеющих высокий контраст. С этим вам может помочь инструмент Color Safe — http://colorsafe.co/ 
·
957
·
goodsuper 5
Наступна стаття
Отклик и эмоциональность сайта
0
Головна