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

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

Яркость и насыщенность

Яркость и насыщенность — разные параметры. Яркость определяется количеством белого или черного цвета в оттенке. Насыщенность зависит от того, как много серого в цвете.

Увеличить яркость — не то же самое, что увеличить насыщенность. Когда вы уменьшаете насыщенность, в ваш цвет добавляются серые тона. Когда вы добавляете яркости, вы делаете оттенок светлее.

Влияние цвета на внимание

Исследование о влиянии цветовых тонов, яркости и насыщенности показало, что насыщенные и яркие оттенки привлекают больше внимания. Эти два параметра цвета влияют на внимание сильнее чем цветовой тон.

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

Яркие, насыщенные цвета — для кнопок

Яркие и насыщенный цвет фона привлечет внимание пользователя, однако не удержит его. Использовать такой фон — все равно что кричать кому-то, кто стоит прямо перед вами. Его внимание вам обеспечено, однако скорее всего ваш собеседник довольно скоро развернется и уйдет, потому что вы его раздражаете.

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

Темные, бледные цвета для фона

Лучше использовать для фона цвета более темные и менее насыщенные. Затемнение цвета означает снижение белого в нем, а снижение насыщенности — добавление серого. Это снижает интенсивность нагрузки, которая ложится на глаза.

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

Поиск оптимального цвета

Диапазон яркости и насыщенности для фоновых цветов велик. Чтобы найти лучший вариант, рисуйте сетку свойств цвета.

Начните с создания квадрата любого цвета. Для начала укажите этому цвету максимальное значение яркости и насыщенности. Это будет наша отправная точка.

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

Эти цвета еще не оптимальны, потому что один из параметров (яркость или насыщенность) по прежнему находится на 100%. Но теперь у нас есть линия-ориентир, от которой мы будем строить дальше нашу сетку.

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

Если вы не нашли свой оттенок, продолжайте создавать новые линии квадратов, чтобы выстроить максимально полную сетку.

Плохие и хорошие примеры

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

Плохие зеленые оттенки: Panic / Prismic. Хорошие зеленые оттенки: FreshDesk / Sigstr.

Плохие красные оттенки: Telepath / Meat, хорошие красные оттенки: AppFigures / Jackie

Плохие синие оттенки: Compose / DareIt, хорошие синие оттенки: Republic / MailTag

Эстетика и юзабилити

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

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

Автор статьи anthony

Перевод — Дежурка

Смотрите также:

• Проблемы чистого черного цвета в веб-дизайне
• Понимаете ли вы силу цвета в дизайне?
• 5 трендовых палитр для 2018 года