Цвета в Интернете – как использовать психологию цветов на вашем веб-сайте

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

 

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

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

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

Красный, который в Африке является цветом траура, в Китае ассоциируется со счастьем. Фотография жениха и невесты, сделанная Дэниелом Кейсом [ GFDL или CC BY-SA 3.0 ], через Wikimedia Commons

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

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

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

Значение розового

Розовый ассоциируется с романтикой и любовью. Считается, что роза вызывает чувство спокойствия. В нашей культуре он также ассоциируется с женским цветом, поэтому отражает доброту, мягкость и сострадание. Интересно, что даже после Второй мировой войны розовый цвет ассоциировался скорее с мальчиками, а голубой играл роль «девичьего» цвета. Смена этого состояния относится примерно к 1970-м годам.

Значение оранжевого цвета

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

И Allegro, и amazon используют оранжевые кнопки CTA на своих сайтах.
Значение желтого

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

Значение зеленого

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

Значение синего

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

Синий цвет, постоянно используемый Volkswagen, ассоциируется с безопасностью.
Значение фиолетового цвета

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

Значение белого

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

Значение черного

Черный часто ассоциируется со смертью, трауром или злом. С другой стороны, это еще и символ элегантности, изысканности и роскоши, он вызывает уважение.
Правила подбора цветов – как пользоваться цветовым кругом

Концепция современного цветового круга была разработана примерно в 18 веке. Его идея основана на том, что каждому шагу был назначен определенный цвет, так что в сумме 360 ° включает весь диапазон видимых цветов. Кроме того, чем ближе к центру круга, тем светлее оттенок цвета. Использование простых шаблонов позволяет нам видеть, какие цвета являются дополнительными, какие аналогичными и которые образуют так называемые триады. Благодаря использованию цветового круга мы можем создавать как гармоничные, так и контрастные сочетания.

Это всего лишь примеры того, как создавать отношения между цветами на основе их положения в круге. Чтобы упростить нашу работу, мы можем использовать программу Adobe Color CC, которая запускается в браузере. Он позволяет создавать разные цветовые палитры, используя правила, описанные ниже.

  • Принцип комплементарности:мы выбираем два цвета, которые лежат точно напротив друг друга (доминирующий и дополнительный). У нас получится очень контрастное сочетание, подходящее для смелых, современных проектов. Дополнительные соединения следует использовать с осторожностью, так как они могут утомлять глаза.
  • Правило триады:выбираем три цвета, которые отделены друг от друга на цветовом круге на 120 градусов. Таким образом, мы получаем довольно гармоничные композиции, которые представляют собой нечто среднее между эффектами применения принципа дополнительных (очень контрастных) цветов и принципа аналогичных цветов (очень похожих друг на друга).

 

  • Принцип аналогии:выбираем цвета, лежащие рядом друг с другом с интервалом, заданным пользователем. Аналогичные цвета обычно создают ощущение гармонии, поскольку обычно это цвета, которые встречаются в природе рядом друг с другом. Палитра аналогичных цветов может быть создана любым количеством образцов, но для нужд одного проекта стоит ограничиться 3-5.
  • Правило раздельной комплементарности:состоит в выборе одного доминирующего цвета, который затем дополняется двумя цветами, смежными с дополнительным цветом. Таким образом мы получим цветовую палитру, которая не будет такой интенсивной, как в случае применения правила дополнительности, но все же достигнет четкого эффекта.
  • Принцип монохромного выбора:выбираем оттенки одного цвета  лежащие на одной линии, идущей от центра круга к его краю.

Adobe Color CC  – это бесплатный инструмент, который поможет вам создать собственную цветовую палитру.
Как подобрать цвета под целевую группу

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

Согласно исследованию восприятия цвета, в зависимости от пола, синий – любимый цвет для 35% женщин, за ним следуют фиолетовый (23%) и зеленый (14%). В том же исследовании 33% женщин признали, что им меньше всего нравился оранжевый цвет, наряду с коричневым (33%) и серым (17%). Интересно, что лишь небольшой процент женщин указали розовый цвет, который обычно ассоциируется с женственностью, как свой любимый (после: kissmetrics.com ). Лучшая цветовая схема для интернет-магазинов, блогов или веб-сайтов, ориентированных на женщин, – это та, в которой используются следующие цвета: синий, фиолетовый и зеленый; с другой стороны, избегает: оранжевого, коричневого и серого.

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

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

  • Укрепляйте уверенность с помощью оттенков синего– синий не зря является одним из наиболее часто используемых цветов. Это цвет доверия, мира, порядка и верности. Хорошо работает в сфере финансовых услуг и индустрии B2B. От него следует полностью отказаться в случае проектов, связанных с продуктами питания. Если прозрачность и доверие являются основными ценностями, которые вы хотите донести, синий цвет будет очень хорошим вариантом.
  • Желтый – это не только предупреждающий цвет– для некоторых это цвет счастья, и бренды с радостью используют его, чтобы показать, что они веселые и дружелюбные. Однако желтый – это тоже цвет, который может наводить на мысль о шутке.

Чтобы узнать об интересных цветовых палитрах, посетите блог Design Seeds.

  • Зеленый отлично подходит для экологичных и уличных продуктов . Это самый экологически чистый цвет и, по сути, символ природы. Зеленый – это также цвет, повышающий творческие способности. Хорошо работает с кнопками призыва к действию (CTA), особенно если они являются единственным цветом на странице.
  • Призыв к действию, активируйте– оранжевый цвет импульсивный, энергичный и игривый. Оранжевый цвет на веб-сайте может стимулировать активность, конкуренцию и доверие. Этот цвет часто используют спортивные команды и детские товары. Обычно используется в кнопках призыва к действию (CTA). Товары, отмеченные оранжевым цветом, часто воспринимаются как более дешевые, чем другие.
  • Добавьте ценности и ощущение роскоши– плюс черный цвет, который ассоциируется с элегантностью, изысканностью и мощью, а это именно то, чего ожидают дизайнеры интернет-магазинов, продающих товары высокого класса.
  • Призыв к действию любит выразительные цвета– слоганы призыва к действию работают лучше всего, если они выполнены в ярких, характерных цветах, таких как красный, оранжевый и желтый. Более темные цвета снижают коэффициент конверсии.

Color palette genereator – удобный инструмент, который поможет вам загрузить цветовую палитру с любой фотографии или иллюстрации.
Модели цветового пространства: RGB и CMYK – основные различия

Говоря о цветах, стоит упомянуть о проблемном вопросе выбора цветового пространства. Цветовые пространства – это способ записи цветов в цифровом мире. Цветовое пространство – это набор всех цветов, которые можно сохранить, например, на фотографии. Например, в стандартном 8-битном файле JPG может храниться 16 миллионов различных цветов.

В зависимости от цели (должны ли цвета отображаться на экране или распечатываться) используются цветовые модели RGB или CMYK.

RGB

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

Сравнение гаммы профиля sRGB и видимого спектра человека в пространстве CIELUV D65. Авторы: Майкл Хорват, Кристоф Липка [ CC BY-SA 4.0 ], Wikimedia Commons  1 и  2 .

Если вы хотите присвоить определенный цвет определенному элементу на веб-сайте (например, заголовкам), вы можете выбрать один из двух способов записи цвета: обозначение RGB (например,  color: rgb (56,204,221); ) или шестнадцатеричное, то есть шестнадцатеричное (например,  # 38CCDD ). В шестнадцатеричной системе счисления два символа отвечают за определение значения каждого канала, поэтому в этом примере состав красного – «38», зеленого = «CC» и синего = «DD». Поскольку значения записываются в шестнадцатеричном формате (а не в десятичном, как обычно), пара «00» отвечает за ноль, а пара «FF» – за число 255.

CMYK

Это стандарт для описания цвета с помощью печатающих устройств. CMYK обозначает составляющие каналы – голубой (голубой), пурпурно-красный (пурпурный), желтый (желтый) и черный (здесь обозначается как «K»). CMYK имеет немного более узкое цветовое пространство, чем RGB – из-за свойств чернил при печати мы не можем получить такой широкий диапазон цветов, который можно компенсировать использованием дополнительных чернил (например, из палитры PANTONE).

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

Визуализируйте, как будут выглядеть отдельные цвета на вашем экране при печати.
Не забудьте откалибровать монитор

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

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

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

 

Add a Comment

Your email address will not be published. Required fields are marked*