Цвет – один из ключевых элементов в любом веб-дизайне. В дизайне веб-сайтов или приложений цвет может быть использован различными способами.
В этой статье рассмотрим, как можно использовать цвет стратегически.
Содержание
Создание точки фокуса через пропорции
Отличным примером такого способа является сайт Viporte (viporte.com). Каждый экран сайта украшен большой буквой в центре. В течении скроллинга эта буква «наполняется» цветом, создавая фокусирующий эффект.
Пропорции использования цвета тоже разные. Иногда на экране присутствует небольшое число цветовых элементов, иногда их много.
Захват внимания контрастом
Еще один аспект, на который цвет может оказывать влияние – это контраст. Когда большая часть используемых цветов спокойных тонов, добавление контрастного цвета привлечет внимание пользователя к нужным элементам (форме заполнения, кнопке).
Такой эффект использует в дизайне Thinx (shethinx.com). Большая часть элементов сайта черно-белые. Кроме, фотографий. Главным цветом изображений является темно-красный, бордовый. Благодаря выбору такого цветового сочетания, фото являются элементами, привлекающими больше всего внимания.
Создание UX шаблонов
Визуальные образы создаются лучше всего с помощью последовательности элементов. Они создают отношение пользователя к сайту.
В то же время, понимание значение цвета – субъективное действие, потому что каждый сайт или приложение может добавить цвету свой собственный смысл.
Рассмотрим сайт Underbelly’s portfolio website (underbelly.is). Все кликабельные элементы сайта синего цвета. Поэтому немного поработав с сайтом, пользователь будет быстро находить нужные ему ссылки. Это и есть цветовой паттерн, шаблон.
Создание иерархии через цвет
Цвет также может создать иерархию элементов. На сайте Skore’s product page (skore.io/product/) практически каждая секция имеет элементы зеленого цвета.
На примере сайта, зеленый цвет хорошо контрастирует с серым текстом, обращая внимания пользователя на самые важные элементы.
Заключение
Цвет может быть великолепным инструментом для достижения целей веб-дизайна. Он может помочь в определение иерархии и создании точки фокусировки всего макета.