Как применять контрасты в графическом дизайне

Ваши пользователи:

• Мало кликают по кнопке?
• Не видят важную информацию?
• Не понимают, куда нажимать?
• Уходят, не совершив целевые действия?

А может быть дело в контрасте? Просто они не обращают внимания на важные элементы?

Изучите простые принципы и правила контрастов и посмотрите на свой сайт. Уверен, вы сможете найти варианты улучшения своих интерфейсов.

Итак, контрастные элементы на сайте способны привлечь внимание пользователей. Рассмотрим основные виды контрастов.

Виды цветовых контрастов и акцентов

Контраст размера и точек в композиции

Более крупные объекты на сайте воспринимаются пользователями лучше. Они контрастируют и привлекают больше внимания, чем маленькие.

Примером использования контраста размера являются разные шрифты. Более важная информация выделяется большим шрифтом.

На примере – заголовок большего шрифта. Он более заметен и читаем, чем остальной текст. Здесь можно увидеть еще один пример контраста размера. Целевое действие реализовано кнопкой «да» более крупного размера. Это усиливает желание нажать на неё. Варианты отказа правильнее делать менее контрастными, в том числе и за счет меньшего размера.

Контраст цвета и фона

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

Контрастирующий цвет на сайтах используют для выделения основного действия в композиции.

На картинке – первый экран главной страницы сайта AskUsers. Кнопка «зарегистрироваться» выделена красным цветом. Она контрастирует с основными цветами первого экрана – зеленым, черным, белым.

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

Контраст формы геометрических фигур

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

Если нужно сконцентрировать внимание на объекте, можно сделать его сложнее других. Его обязательно заметят!

Пример использования контрастов цвета и формы:

Принцип контраста движения

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

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

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

Проще поделиться, чем спорить в комментариях.

С помощью этих 4-х простых приемов вы сможете управлять вниманием посетителя сайта и добиваться выполнения нужных вам действий.

А теперь можно и к себе на сайт заглянуть!

… и свежим взглядом оценить контрастность важных элементов на страницах.

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

Сделаем вместе наш интернет лучше !