Палитра цветов для сайта: психология цвета

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

Исследования QuickSprout показывают, что 90% первичного впечатления от какого-либо продукта связаны с цветом. «Цвет», - пишет Нил Патель, - «на 85% определяет ваше решение приобрести что-либо». Очевиден тот факт, что цвет влияет на конверсию любого сайта. PROFIT.

Что такое психология цвета?

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

Есть ключевые факты теории цвета. Satyendra Singh выяснил (см. источник), что потребителю требуется всего около 90 секунд, чтобы составить основное мнение о продукте. И 62-90% этого мнения определяется именно цветом. Психология цвета – обязательная область для изучения предпринимателями, дизайнерами, архитекторами, владельцами магазинов и даже будущими родителями, которые разрисовывают детскую комнату! Цвет имеет важнейшее значение, и от него во многом зависит успех вашего дела.

Где применять психологию цвета

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

Правильно применяйте цвета

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


Палитра цветов для сайта и психология цвета


Цвета для увеличения конверсии

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


Палитра цветов для сайта и психология цвета Цветовая палитра для сайта Л'Ореаль


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

  • Правильное применение цвета
  • В правильный момент
  • Для подходящей аудитории
  • С правильной целью.

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

1. Женщины

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


Палитра цветов для сайта и психология цвета Женские предпочтения в цвете


В опросе 35% женщин сказали, что их любимый цвет – синий, за ним следуют пурпурный (23%) и зеленый (14%). 33% женщин признались, что для них оранжевый – наименее любимый цвет, за ним следуют коричневый (33%) и серый (17%).

Другие исследования подтвердили эти выводы, выявив у женщин «отвращение» к землистым тонам и, наоборот, предпочтение к чистым оттенкам основных цветов . Посмотрите, как это работает. Зайдите на любой интернет-магазин, целевой аудиторией которого являются преимущественно женщины, и вы увидите, что эти женские предпочтения подтверждаются. У компании Milani Cosmetics преимущественно женская клиентская база. И, конечно, на главной странице нет ни следа апельсиновых, серых или коричневых цветов:


Палитра цветов для сайта и психология цвета Пример выбора цветовой палитры для женского сайта


Журнал Woman's Day использует все три любимых женских цвета (синий, фиолетовый и зеленый) на главной странице сайта, тем самым привлекая свою целевую аудиторию:


Палитра цветов для сайта и психология цвета


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

2. Мужчины

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

3. Доверие

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

Изучая литературу по психологии цвета, вы будете часто встречать подобные утверждения:

  • Синий цвет – это цвет доверия, мира, порядка и преданности
  • Синий – это цвет корпораций, и он говорит: «расслабься… доверяй мне, будь уверен в том, что я говорю!»
  • Синий вызывает чувство спокойствия и безмятежности. Его считают мирным, спокойным, безопасным и упорядочивающим

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


Палитра цветов для сайта и психология цвета Facebook – синий


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


Палитра цветов для сайта и психология цвета Синий цвет в дизайне сайта PayPal


На самом деле синий - это цвет, который активно используется многими банками. Вот, например, CapitalOne.com, крупный западный интернет-банк:


Палитра цветов для сайта и психология цвета Пример выбора цветовой палитры для сайта банка


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

4. Предупреждение

Желтый – это цвет предупреждения. Поэтому желтый цвет используется для предупредительных дорожных знаков и знака «мокрый пол».


Палитра цветов для сайта и психология цвета



Палитра цветов для сайта и психология цвета


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

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

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


Палитра цветов для сайта и психология цвета Вас тоже злит желтый цвет?


Говорят даже, что «желтый цвет может вызвать тошноту», хотя это мягко говоря сомнительно.


Палитра цветов для сайта и психология цвета Желтый вызывает тошноту? Да ладно :)


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

Повышенный уровень тревоги во время посещения вашего сайта вряд ли будет полезен, если только это не происходит в небольших дозах. Таким образом, желтый call-to-action (призыв к действию, CTA) может создать лишь легкую возбужденность, которое необходима, чтобы заставить человека кликнуть по нужной кнопке. Резюме: используйте желтый в небольших дозах, если вы не хотите вызвать ненужное беспокойство.

5. Зеленый

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

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

В общем, если тема вашего сайта имеет какое-либо отношение к природе, окружающей среде, органике или открытому воздуху, зеленый цвет станет разумным выбором. Однако зеленый – это не только природа. Он также является хорошим призывом к действию, особенно если его использовать в сочетании с «эффектом изоляции», также известным как эффект фон Ресторфа. Его суть в том, что вы лучше запоминаете что-то, что выделяется. Вы помните Собор Василия Блаженного, потому что он большой, высокий, цветастый, и подобных вокруг их не так много. В цветовой психологии эффект изоляции возникает, когда объект (например, конверсионная кнопка) является единственным элементом того или иного цвета. Это волшебная техника для оформления призывов к действию, а зеленый - идеальный выбор цвета для нее.

Вот как использует это Конрад Феагин:


Палитра цветов для сайта и психология цвета Все конверстлнные кнопки на сайте Dell имеют зеленый цвет.



Палитра цветов для сайта и психология цвета



Палитра цветов для сайта и психология цвета И кнопки покупки, в частности


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

5. Оранжевый

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

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


Палитра цветов для сайта и психология цвета Оранжевый цвет в палитре сайта


Это имеет смысл. Оранжевый – значит активный. Веселый. Оранжевый означает единение, потому что это яркий и теплый цвет. Тем не менее, оранжевый может быть и отчасти подавляющим. В статье на Psych.Answers.com говорится: «Оранжевый цвет нужно использовать с осторожностью, чтобы привлечь внимание к чему-либо, но не настолько агрессивно, чтобы подавить само рекламное сообщение».

Иногда оранжевый интерпретируется как «дешевый». (Сравните это с черным, который считается цветом роскоши. Об этом ниже). В журнале Forbes в статье «Влияние цвета на продажи» обсуждался вопрос: «Оранжевый – значит дешевый?». Ответом был однозначен: да! Если ваше предложение отличается дешевизной или вы хотите, чтобы его воспринимали таким, оранжевый может быть хорошим выбором.

6. Роскошь и ценность

Чем темнее тон, тем больше «люксовости», говорит наша собственная «психология цвета». В статье Lifescript черный цвет описаывается как «элегантность, утонченность, мощь», и это именно то, что встречается на сайтах в сегменте люксовых, элитных товаров или услуг. Далее в статье черный назван «классическим, неподвластным времени»; это тоже помогает объяснить использование черного в дорогостоящих продуктах.

В статье Business Insider о цвете и брендинге автор говорит о значении черного цвета так: «Черный также можно рассматривать как роскошный цвет. «Черный, при правильном использовании, может передать гламур, изысканность, эксклюзивность».

Сумки Louis Vuitton далеко не дешевые. На сайте отсутствуют цвета и узоры, признаки какой-либо дизайнерской прихоти и веселья. Это внушает ощущение ценности:


Палитра цветов для сайта и психология цвета Использование черного цвета в палитре сайта


Citizen Watch также использует темный дизайн сайта:


Палитра цветов для сайта и психология цвета Еще пример темной цветовой палитры сайта


В Ламборджини делают то же самое:


Палитра цветов для сайта и психология цвета Черный цвет в дизайне сайта Lamborghini


Если вы продаете дорогие товары, услуги или предметы роскоши, черный цвет скорее всего подойдет вам.

7. Яркие цвета

Используйте яркие цвета основной палитры для призывов к действию.

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

Те же Women's Health используют яркий лиловый цвет для своего всплывающего окна с призывом к действию. У них есть фиолетовый / розовый оттенок, ассоциирующийся с женщиной:


Палитра цветов для сайта и психология цвета Удачный выбор цвета для высокой конверсии на женском сайте


GreenGeeks используют желтую кнопку:


Палитра цветов для сайта и психология цвета


Крупнейший в мире ритейлер использует эту знаменитую кнопку «добавить в корзину». Это желтый:


Палитра цветов для сайта и психология цвета


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

8. Белый цвет

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


Палитра цветов для сайта и психология цвета Белый цвет в палитре сайта Google


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

Если уже есть фирменный стиль

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

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

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

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

Три правила внедрения

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

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

Избегайте перегрузки цветами. Прочитав эту статью вы, возможно, броситесь перекрашивать все эелементы сайта. Но не переусердствуйте! Помните этот последний пункт. Слишком много цветов создадут чувство замешательства и будут выглядеть аляписто. Используйте белый цвет как основной, а к нему добавьте 2-3 дополнительных. А потом померяйте, как ваша работа с палитрой цветов для сайта повлияла на конверсию :)

Посмотрите также:


Оставьте заявку

мы свяжемся с вами
и проконсультируем

Приложите файл

Приложите файл с ТЗ или брифом, если есть

×