Способы настройки UX с помощью цвета
Веб-дизайн 0 Комментариев

Способы настройки UX с помощью цвета

Цвет – один из ключевых элементов в любом веб-дизайне. В дизайне веб-сайтов или приложений цвет может быть использован различными способами.

В этой статье рассмотрим, как можно использовать цвет стратегически.

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

Отличным примером такого способа является сайт Viporte (viporte.com). Каждый экран сайта украшен большой буквой в центре. В течении скроллинга эта буква «наполняется» цветом, создавая фокусирующий эффект.

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

Способы настройки UX с помощью цвета

Захват внимания контрастом.

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

Такой эффект использует в дизайне Thinx (shethinx.com). Большая часть элементов сайта черно-белые. Кроме, фотографий. Главным цветом изображений является темно-красный, бордовый. Благодаря выбору такого цветового сочетания, фото являются элементами, привлекающими больше всего внимания.

Способы настройки UX с помощью цвета

Создание UX шаблонов.

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

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

Рассмотрим сайт Underbelly’s portfolio website (underbelly.is). Все кликабельные элементы сайта синего цвета. Поэтому немного поработав с сайтом, пользователь будет быстро находить нужные ему ссылки. Это и есть цветовой паттерн, шаблон.

Способы настройки UX с помощью цвета

Создание иерархии через цвет.

Цвет также может создать иерархию элементов. На сайте Skore’s product page (skore.io/product/) практически каждая секция имеет элементы зеленого цвета.

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

Способы настройки UX с помощью цвета

invisionapp.com/end-of-year

Способы настройки UX с помощью цвета

comotion.studio

Способы настройки UX с помощью цвета

Заключение.

Цвет может быть великолепным инструментом для достижения целей веб-дизайна. Он может помочь в определение иерархии и создании точки фокусировки всего макета.



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий