Дизайн

Как усилить внимание с помощью цветового контраста

22 июля 2019

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

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

1_k1Zif2xfK4lLeeVV086Sfg

Основная задача цветового контраста — управление вниманием пользователя. Цвет поможет усилить важные элементы, и в тот же момент приглушить второстепенные.

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

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

В качестве важного элемента, можно выделить кнопку призыва к действию:1_Fp7IWE5kGlxO0Ui4DBazpQ

1_fm3pl2iCb9CEtos1xVTvxQ

Цветовой контраст позволяет строить иерархию на сайте и помогает переключать внимание между блоками:

1_pcYMHKMN7tPHUR7gpa7z-g

К чему приводит плохой цветовой контраст?

  1. Ухудшение восприятия сайта
  2. Потеря визуальной иерархии
  3. Затруднение чтения содержимого страницы
  4. Потеря внимания на ключевых элементах

Рассмотрим на реальном примере проблемы недостаточного контраста:

1_nYaBjasC7qWVM8UaDvYIuQ

Актуальное