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

1. Создание фокусной точки при помощи пропорций

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

2. Привлечение внимания при помощи контраста

Еще один способ работать цветом — использование контраста. Когда цвета дизайна в целом спокойные или мягкие, добавление контрастного цвета привлекает внимание в большой степени.

Это то, что происходит на сайте Thinx. Общая цветовая схема страницы — черно-белая. Но на сайте использовано множество фотографий. Особенно в верхней части страницы. Это фотографии нижнего белья на темно-красном фоне. На фоне всего остального фотографии очень заметны. Больше всего выделяется темно-красный цвет. Именно он сильнее всего контрастирует с черно-белой гаммой. Thinx — хороший пример того, что не только яркие неоновые цвета работают на привлечение внимание контрастом. В целом на сайте заметен двух цветов, один из которых помогает выделиться второму.

3. Использования цвета для создания UX-паттернов

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

Давайте рассмотрим пример логических связей с синим цветом на сайте Underbelly’s portfolio website. Это простой пример, который отлично демонстрирует правило. Все по чему можно кликнуть на этом сайте синего цвета. Это становится очевидно уже после нескольких секунд использования сайта. Паттерны работают хорошо, потому что помогают посетителям легко распознать что-либо. Чем меньше пользователь будет тратить усилий на распознавание, тем меньше он будет думать, а все мы знаем как это радует Стивена Круга (автор популярной книги по Юзабилити).

4. Создание иерархии при помощи цвета

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

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

5. Использования схожих цветов

Что бы мы ни делали с цветами, чаще всего мы их используем повторно, чтобы сохранить единство стиля и последовательность в дизайне. Посмотрим на страницу InVision’s End of the Year. В верхней части лэндинга использовать розово-фиолетовый градиент в качестве фона. Ниже на сайте розовый и фиолетовый используются для оформления других элементов, в частности кнопок. Также на странице повторно используется белый цвет текста на розовом и фиолетовом фонах. В остальных случаях это серый цвет на белом фоне. Если бы использовались разные цвета, дизайн смотрелся бы намного хуже.

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

Выводы

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

Автор статьи Paula Borowska

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

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

• Графический дизайн: тренды на 2017 год
• Эмоциональное восприятие и неудобная сторона дизайна
• Проблемы модного серого текста в веб-дизайне