Теория Цвета гласит, что каждый цвет оказывает свое воздействие на психику человека. О том, как подобрать нужные для сайта цвета и что такое «цветовое колесо» — в переводе статьи от выпускника Калифорнийского университета Ника Роджаса (Nick Rojas).

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



Оказывается, красный цвет действует как стимулятор (вызывая аппетит, пробуждая голод) и привлекает к себе внимание, тогда как желтый создает ощущение скорости и срочности. Классические примеры – Макдональдс, KFC, Стардог!s. Теперь подумайте о Вашем собственном сайте и его дизайне. С большой долей вероятности в процессе его создания цвета выбирались без учета Теории Цвета, обходясь привычными цветами Вашего бренда.

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

Что такое Теория Цвета


Интересный факт, о котором мало кто знает — художники используют Теорию Цвета уже сотни лет. Но история ее применения в бизнесе и маркетинге намного короче.

Одна из первых современных трактовок Теории Цвета была написана около ста лет назад Альбертом Манселлом (Albert Munsell). Манселл придумал для описания цветовых свойств трехкомпонентную модель, в которой цвет выявляется с помощью трех понятий – значения/ценности (англ. value), оттенка (англ. hue) и насыщенности/яркости (англ. croma).

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

Зачем применять Теорию Цвета на ваших сайтах


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

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

Как подбирать цвета для сайта


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

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

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

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


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

Настроение и эмоции


Отвлекитесь на минутку от дел и задумайтесь о цветах, которые Вы используете, осмотрите Ваш сайт и представьте — какие чувства Вы хотите вызвать у пользователя?

Красный
Красный — интуитивный, цвет физической силы. Цвет крови. Когда Вы смотрите на красный, у Вас учащается пульс, возникает чувство срочности; цвет придает мужества, силы и пробуждает бунтарский дух – это один из самых мощных цветов. Сайт онлайн-консультанта RedHelper прекрасный пример использования красного в оформлении и расстановке акцентов.



Оранжевый

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



Желтый

Желтый — цвет молодости. Он символизирует оптимизм и игривость, творческие порывы и спонтанность. Желтый — смелый цвет. Он не агрессивный, но очень заметный. Отличный пример — сайт представительства Nikon в России.



Зеленый

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

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



Синий

Синий — это цвет искренности. Цвет воды и неба, а так же — главный цвет интернета (вспомните, какого цвета ссылки по умолчанию). По этой причине, его уникальность в онлайн-бизнесе не так велика, как у других цветов. В этом цвете по минимуму импульсивности и спонтанности, он связан с логикой и прохладой. Хороший пример — сайт гипермаркета оптовых закупок METRO Cash&Carry.



Фиолетовый

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

Сайт мессенджера Viber отлично демонстрирует, как фиолетовый вызывает ощущение простоты и честности.



Розовый

Романтичный, женственный цвет. Розовый даёт сильный эффект при правильном использовании, хоть и может оттолкнуть определенные группы людей. Из-за своих гендерных ассоциаций, розовым нужно пользоваться осторожно, так как в неправильном контексте он вызовет чувство незрелости, либо намекает на интимные или неформальные отношения. Вряд ли Вы найдете хоть один спортивный сайт, в оформлении которого используется розовый. А вот для кафе мороженого Baskin Robbins — в самый раз.



Черный

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



Теория Цвета в дизайне сайта


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

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

Комментарии (32)


  1. rameer666
    08.02.2016 09:51

    Чёт как-то неглубоко.


    1. Barokko_von_Dau
      08.02.2016 09:53

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


      1. Anton1496
        08.02.2016 11:38

        Я бы с удовольствием почитал более подробно. Жду продолжения.


  1. Oiler
    08.02.2016 11:49

    Давным-давно на глаза попадалась брошюрка ДСП по использованию различных цветов при подготовке печатных агитационных материалов во время ведения боевых действий. Для того чтобы посеять панику в рядах врага — одно сочетание цветов текста и фона, для того чтобы поддержать боевой дух своих войск — другое, чтобы успокоить население на окупированных тер-ях — третье. Ну и т.д. Причём уже тогда (лет 20 назад) эта книжица удивила меня своим возрастом.
    Очередное открытие английских учёных…


    1. Barokko_von_Dau
      08.02.2016 11:51

      Да, в общем-то, это действительно не открытие вовсе, об этом речи нет. А только о том, что цвет — мощнейший инструмент для формирования мнения.


      1. Oiler
        08.02.2016 11:53

        цвет — мощнейший инструмент для формирования мнения

        Как и звук, и форма…


        1. Barokko_von_Dau
          08.02.2016 13:26

          О нет. Вот тут не согласен. 70% информации человек получает через зрение. В интернете — так все 90%. Так что для интернет-маркетолога цвет может оказаться гораздо важнее звука и формы )


  1. Legotckoi
    08.02.2016 12:27

    У меня дежавю от этой статьи. Подобное уже было
    Цвета в web-дизайне: Выбор правильного сочетания для вашего сайта


    1. vgsnv
      08.02.2016 13:23

      Ничего страшного, прочитаем еще раз. Тем более, что та статья 2010 года.


    1. Barokko_von_Dau
      08.02.2016 13:25

      Ну то, что тема не новА — это факт, да =) На оригинальность не претендуем, тем более что ссылка на иностранный оригинал в посте есть.
      К тому же — повторение мать учения! =)


  1. bigfatbrowncat
    08.02.2016 16:30
    +2

    Есть такой дизайнер — Роман Воронежский. Долго работал на студии Лебедева. Вот его цитата про цвета:

    Цвет — явление идеологическое. Идеология такая: сам по себе цвет не значит ничего. Вообще ничего. Беседы о том, что какие-то цвета с какими-то не сочетаются или что-то означают в отрыве от контекста — шаманство хуже гороскопов. «Красный означает опасность», — говорит человек, который сегодня утром мужественно съел помидор и не дрогнул. «Черный — слишком мрачный», — утверждает второй, который сегодня утром читал черные буквы на белом листе и смеялся. «Серый скучный», — жалуется третий. Сами вы скучный. Посмотрите на Бастера Китона — весь из оттенков серого, а повеселей вас будет. «Синий символизирует надежду, зеленый — обновление», — вешает лапшу дизайнер. Дизайнер, не вешай. Клиенту лучше честно сознаться: вот 16 млн цветов (если rgb) или веер (пантон), тыкайте пальцем. Покрасим в любой. Но кнопка «Удалить» останется красной (а с этим клиент никогда и не спорит).

    Когда мне говорят, что красный с зеленым не сочетаются, я сатанею. Посмотри на грядку клубники, дундук!

    Оригинал, к сожалению, найти не могу, но ссылка на цитату есть в «Ководстве».


    1. goran
      08.02.2016 16:49
      +1

      www.narisoval.ru/old.html
      На старой версии сайта все еще хранится.


    1. Barokko_von_Dau
      08.02.2016 17:11

      Классная цитата, спасибо =)


  1. ingeniare
    08.02.2016 17:11

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


    1. Barokko_von_Dau
      08.02.2016 17:20

      С чем я могу на 100% согласиться — Ваша точка зрения тоже имеет право на существование =)

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

      PS: Почему только RedHelper? Там есть еще как минимум 7 скриншотов и ссылок ;) Не ищите второй смысл там, где его нет. Иногда, два колобка несущие огурец — это всего лишь два колобка, несущие огурец.


  1. misato
    08.02.2016 17:46
    +1

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


    1. Barokko_von_Dau
      08.02.2016 17:59

      В советских школах (да и в российских тоже) актовые залы в основном имеют коричневые оттенки. Т.к. успокаивает. Физкультурные залы — зеленые (т.к. снимает агрессию). Столовые — желто/оранжевые, т.к. вызывают аппетит.

      И это не мы придумали ;)


      1. misato
        08.02.2016 19:56

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

        Вот вам агрессивный зелёный: http://www.artlebedev.ru/everything/soyuznick/identity/, вот коричневый, который не успокаивает: http://www.mrhare.com/blog/wp-content/uploads/2015/02/james_brown-Clay_Keith.jpg


        1. Barokko_von_Dau
          08.02.2016 21:11

          Ну, во всех трех школах, где я учился — были именно такие цветовые решения =) И во всех трех школах выбор цвета мотивировали именно этими соображениями =)

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

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


          1. misato
            08.02.2016 21:44

            Моему мозгу это нормально. Меня будет очень раздражать зелёный богомол, например, даже если он не агрессивный, а просто ползает по занавеске.

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

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


  1. gene4000
    08.02.2016 20:31
    +1

    А может не настолько это всё давно известное и старое? А что если красный с желтым стал ассоциироваться с едой после того, как общепит начал массово это применять? Может ощущение безопасности зеленого появилось после внедрения светофоров?

    Меня смущают рассказы о том, что это давно известно и «художники применяли», тем, что не так давно количество доступных цветов было значительно меньше, чем сейчас. Например в деревнях в советское время ставни синие или зеленые, почему-то. Стены белые из-за известки, это понятно, но почему ставни за редким исключением синие или зеленые? Может так же как с известкой — выбор цвета был скуден? А если отмотать еще лет на 50-60, то может оказаться, что основной цвет — серое побитое непогодой дерево? Помню, как открытие новых красок меняло цветовые гаммы картин на сотни лет, а ведь этими красками только хосты и мазали, народ всё больше в разной степени серости ходил.


    1. Barokko_von_Dau
      08.02.2016 21:13

      Да нет, я думаю тут как раз все действительно идет из древности. Многие поколения наших предков знали, что зеленый луг не несет опасности. А раскаленные до красна угли могут сделать больно, но могут и помочь приготовить мясо.


      1. gene4000
        09.02.2016 06:26

        Мне всегда казалось странным, что зеленый каждый раз называют добрым, умиротворяющим. Независимо от источников. По другим цветам различия есть, а зеленый всегда очень спокойный. Объяснялось как раз большим количеством зеленых растений, что люди видео вокруг себя. Но вот когда вы написали про луг, мне как-то сразу подумалось: а в чем безопасность открытого места? ведь там тебя легко может загрызть какая-нибудь пума, лев, или слон растопчет. С лесом то же самое: видно плохо, неожиданно может выскочить медведь или волк. Леса были (да и есть) достаточно опасным местом.


        1. Barokko_von_Dau
          09.02.2016 11:14

          Леса гораздо опаснее полей, как раз в силу того, что ничего не видно. А на открытом пространстве зверь не сможет подобраться незамеченным.


          1. gene4000
            09.02.2016 11:28

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


  1. trkvy
    08.02.2016 21:14

    Спасибо, хоть нам и читали теорию цвета, и цвета трактовали иначе, с интересом ознакомился.
    Вообще ее полезно перечитывать маркетологам (кому читали, а кому нет-познакомится с ней). Моя последняя находка в коллекции — сайт магазина ynitaz.ru — и цвета сочетаются, и логическая простота есть, но что-то «послевкусие» не то)


    1. Barokko_von_Dau
      08.02.2016 21:31

      Да, трактовок много, сам встречал как минимум три. Но, так сказать, общая канва везде одинакова, и трактовки в принципе не противоречат друг-другу =)


  1. achekalin
    08.02.2016 21:45

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

    А вот что если сайт красный, то юзер думает о крови… Ой, современный юзер и золота-то в виде слитков не видел, но как бы понимает якобы, какой цвет — «золотой», так и с кровью. Кровь, пока не проконтактировала с воздухом, вообще имеет цвет синеватый, если что…

    Так что это как гороскопы: и созвездий уже не 12, и вид у них за тысячелетия изменился, но мы слепо верим в астрологов. Остается брать и делать, не зацикливаясь на роли цвета в чем-то там. Бери цвет, который тебе самому ближе: тебе самому хотя бы на сайт будет приятно заходить, а остальным все равно к сайту привыкать :)

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


  1. ftdgoodluck
    09.02.2016 00:19

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

    Не-на-уч-но.