веб-дизайн, юзабилити, цвет
Юзабилити

Как использовать психологию цвета в веб-дизайне?

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

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

В исследовании Kissmetrics отмечается, что уже по истечении 90 секунд у посетителя сайта формируется о нем определенное мнение. Цвет играет определяющую роль в подобного рода взаимодействиях, так как восприятие продукта на 62 – 90% обусловлено его цветом.

Каково значение цвета?

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

психология, веб-дизайн, юзабилити, цвет

 Источник: UXPin

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

психология, веб-дизайн, юзабилити, цвет

Источник: Kissmetrics

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

психология цвета в вебе

Дизайн сайта L’Oreal Paris

Шапка и подвал сайта выполнены в темных тонах — это классика и элегантность. Но, ко всему прочему, еще и намек: продукция не из дешевых.

Для текста используется белый — чтобы подчеркнуть современность и передать ощущение спокойствия и невозмутимости; розовый — признак роскоши.

психология, веб-дизайн, юзабилити, цвет

Шапка сайта Women’s Health Magazine розовая, но во всем остальном преобладает относительная бесцветность — на первый план выходят изображения и навигация. Интересный выбор. Но все же розовый цвет весьма стереотипный, и любительницам сладкого он может напоминать о каком-нибудь лакомстве. Как результат, основное предназначение сайта — все, что касается здоровья женщины, — упускается из виду.

Раздел Weight Loss выглядит следующим образом:

психология, веб-дизайн, юзабилити, цвет

Выбор цветовой схемы

Одноцветные сайты не столь распространены, и обычно (если сайт не черно-белый) принимается в расчет общая цветовая схема и то, каким образом один цвет дополняет другой, сочетание главного цвета со второстепенными, и прочие нюансы.

Три базовых метода смешивания цветов:

#1: Триада

Наиболее сбалансированный метод, в его основе такие аспекты, как контрастность и дополняемость. 12-цветное колесо позволяет выбрать для фона, контента и навигации три любых цвета.

психология, веб-дизайн, юзабилити, цвет

Источник: Ray Trygstad. Wikimedia Commons. Creative Commons.

#2: Структура

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

психология, веб-дизайн, юзабилити, цвет

Источник: Ray Trygstad. Wikimedia Commons. Creative Commons.

#3:

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

психология, веб-дизайн, юзабилити, цвет

Источник: Ray Trygstad. Wikimedia Commons. Creative Commons.  

Вместо того, чтобы выбрав один какой-то цвет, надеяться, что он подойдет для всего — для фона, текста, кнопок — вся цветовая палитра рассматривается как единое целое. В этом основное условие описанных техник.

психология, веб-дизайн, юзабилити, цвет

Источник: Codementor

О таком примере  можно сказать следующее:

  1. Цвет фона. Темный фон подчеркивает профессионализм (собственно говоря, дизайн веб-сайта, предназначенного для обучения, и должен предавать ощущение профессионализма), качество работы, внимание к деталям. Последнее тесно связано с обучением и предполагает, что навыки создания программных кодов могут понадобиться пользователям не просто в качестве хобби, но и для карьеры.
  2. Цвет Кнопок. Для CTA-кнопок используется красный цвет, заметный на темном фоне. Такой нюанс должен поспособствовать увеличению числа подписчиков. Черный с белым обрамлением — для менее важных кнопок и в целях большей сочетаемости с общей цветовой схемой.
  3. Цвет текста. Белый цвет текста обеспечивает столь необходимый контраст, к тому же белый в тон общей цветовой схеме. Иконки очерчены белым (и белые же кнопки-призраки) размещены непосредственно на сгибе, словно предлагая пользователям прокрутить вниз и узнать дополнительную информацию.

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

Цвета, которых лучше избегать

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

Что же касается женщин, то, по статистике, их самый нелюбимый цвет — оранжевый.

психология, веб-дизайн, юзабилити, цвет

Инструменты, которые помогут подобрать нужные цвета

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

  • Adobe Color CC – надежный инструмент пользователей компании Adobe.
  • Paletton – простой инструмент выбора цвета для неофитов.
  • Flat UI Color Picker – инструмент для создания плоского дизайна.
  • Mudcube Color Sphere – функциональное приложение для цветовых схем.
  • Check My Colours – инструмент, позволяющий сравнить комбинации цветов фронтального плана и фона. Корректный контраст для людей с ограниченными возможностями цветовосприятия.
  • Color – возможность выбрать цвет, проведя курсором по экрану; настройка степени насыщенности.

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

психология, веб-дизайн, юзабилити, цвет

Источник: AWWWards   

Фон — светло-серый, как служебная униформа, в тон более темному корпусу мотороллера. Минималистский дизайн. Надпись-призыв (Go) и крупный шрифт моментально трансформируются в физическое ощущение дороги и маневров в городских пробках на быстроходном скутере. Серый цвет нейтральный, не оттеняет другие. К тому же передает ощущение стабильности и спокойствия (что очень даже уместно на странице с рекламой скутера). Яркая расцветка двух букв делает дизайн ультрасовременным. Синий преобладает, что позволяет расширить целевую аудиторию — привлечь на страницу с транспортным средством как женщин, так и мужчин. Поскольку ни у тех, ни у других, как правило, нет предубеждений насчет этого цвета.

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

Выводы

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

Реакция на статью
поделюсь
17%
интересно
83%
полезно
200%
не уверен
0%
скучно
0%
где автор?
17%
Комментарии
Оставить отзыв

You must log in to post a comment