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

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

Дизайнер Пол Хеберт проанализировал 10 популярных сайтов. Он собрал статистику распределения цветов, используемых на главной странице сайта и в таблице стилей.

«Я часто испытываю проблемы при создании цветовых схем, и мне стало любопытно как поступают в этом случае другие компании», рассуждал он.

Для начала Пол изучил рейтинг Alexa и произвольно выбрал 10 из числа самых посещаемых сайтов – Google.com, Youtube.com, Facebook.com, Baidu.com, Yahoo.com, Wikipedia.org, Amazon.com, Google.co.in, Qq.com и Twitter.com.

Дизайнер разработал скрипт, который возвращает значения всех цветов, используемых на каждом сайте в формате CSV. Получился набор из 10 записей такого формата:

http://www.Google.com|#fff|#000|#767676|#2d2d2d|#bebebe|rgba(0,0,0,.2)|#ccc|#c0c0c0|#36c|#4c4c4c|#dd4b39|#dd8e27|#900|#eee|black|#f5f5f5|rgba(0,0,0,.12)|#666|#fef9db|#4d90fe|rgba(255,255,255,0.5)|rgba(0,0,0,.1)|#3079ed|#dcdcdc|#444|#4787ed|#2f5bb7|#357ae8|rgba(0,0,0,0.3)|#f1f1f1|#f8f8f8|#fbfbfb|#ffffff|#c6c6c6|#222|rgba(0,0,0,.8)|rgba(0,0,0,0)|#ebebeb|rgba(0,0,0,.3)|#00c|#11c|#551a8b|#999


Исходный код данного скрипта он разместил на Github. Проект с этим и другими скриптами доступен здесь.

После этого Хеберт проанализировал полученную выборку и наглядно отобразил разброс значений на графиках.

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


Изображение сайта Пола Хеберта

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


Изображение сайта Пола Хеберта

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

«Магия» цвета


Цвет, по данным исследований нейробиологов и психологов, обладает способностью влиять на определенные сегменты аудитории.

Голубой цвет символизирует безопасность


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

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

Многие сайты используют цвет «безопасности». За примерами далеко ходить не нужно.





И, конечно же, социальная сеть «ВКонтакте»:



Зеленый цвет символизирует рост


Основной посыл зеленого — рост. Для большинства исследователей причины такой ассоциации очевидны: большинство растений — зеленые.







Прочие выводы





Каждому пользователю известно, что в дизайне сайта популярной социальной платформы Facebook много синего цвета. Однако, наряду с ним на сайте достаточно широко используется диапазон других цветов, которых, к примеру, на сайтах Baidu, Google и Wikipedia в три раза меньше.

Тем не менее, разработчики Amazon стараются как можно меньше использовать в оформлении сайта синий цвет, предпочитая ему более теплые оттенки, а на сайте Yahoo Хеберту, вообще, не удалось определить доминирующий цвет.



Дизайнер намерен провести повторный анализ палитры ведущих веб-ресурсов, включив в выборку 100 или даже 1 000 сайтов. Хеберт выразил убеждение в том, что результаты более масштабного эксперимента помогут ему найти ответы сразу на несколько фундаментальных вопросов, которые его давно волнуют.

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

Ознакомиться с анализом цвета каждого из сайтов можно на этой странице.
Поделиться с друзьями
-->

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


  1. napa3um
    21.09.2016 14:48

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


  1. kvaps
    21.09.2016 15:11

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


    Кстати, недавно я выбирал себе Todo-чекалку и одиним из вариантов был Any.do, по возможностям мне он понравился больше других, но отказался я от него как раз из-за цветов интерфейса: голубым по белому! — блин, как по мне это тихий ужас...


    1. DenimTornado
      21.09.2016 19:20
      +3

      image


      1. kvaps
        22.09.2016 16:57

        Хабр не настолько радикален :)


    1. michaelkl
      21.09.2016 20:07
      +1

      Поддержу довод про обилие синего.
      У меня на рабочем компьютере бывают открыты:
      MS Outlook, MS Word, MS Lync, VirtualBox, SourceTree, KeePass.
      И у них у всех синие ярлычки на панели задач! Быстро найти нужное приложение порой затруднительно.


  1. savostin
    21.09.2016 17:06
    +1

    Оказалось, что при оформлении сайтов было использовано вдвое больше оттенков синего, чем желтого или красного, и втрое больше, чем зеленого.
    Логотип, который должен быть по возможности замкнутым и самодостаточным объектом, отторгает многие тона цветового спектра из-за их открытости, обращенности к зрителю, явственно ощущаемого потенциала развития и, следовательно, неустойчивости. Это относится в первую очередь к теплым тонам, которые у большинства зрителей ассоциируются с объектами живыми, органическими и потому противостоящими тому абстрактному началу, которое лежит в основе любого логотипа. Собственно говоря, при строго традиционном подходе к выбору цвета допустимым оказывается лишь один-единственный цвет — синий и его ближайшие соседи по цветовому кругу.
    © 2006 Дмитрий Кирсанов «Веб-дизайн»


  1. aspanin
    21.09.2016 17:10
    +1

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


  1. aspanin
    21.09.2016 17:15

    Просто выводить все цвета в кучку и рассуждать о трендах — это всё равно, что вывести всех пациентов поликлиники на плац и делать выводы о состоянии медицины. Мне не понять цель этого труда.


  1. odin_v_pole
    22.09.2016 22:01

    Тенденция с синим/голубым цветом распространяется не только на сайты. Взять для примера тот же Microsoft: Не помню как там с Вистой, а вот в что XP, в что 7, что в 8, что 10 стандартный дизайн весь сине-голубой. Часть текста, если возможно, будет и них синяя, задний фон голубой или синий, окна синие, выделение синие, почти во всех системных значках программ или папок будут синие элементы. Даже лого у них, сколько помню, обязательно на синем фоне. Такая вот синяя диктатура.


  1. vanyatwo
    22.09.2016 22:02
    -1

    а на сайте Yahoo Хеберту, вообще, не удалось определить доминирующий цвет.

    ну да, и фирменный цвет Yahoo — совсем не фиолетовый.
    image


  1. Igoorr
    22.09.2016 22:02

    Всё просто и понятно, все цвета подбираются опираясь на психологию и восприятие цвета человеческим глазом. Синий цвет способен действовать на человека как успокоительное, поэтому, большинство людей, могут задерживаться на сайте с голубым и синим цветами, сами того не замечая. При правильном сочетании синий цвет способен на слабый гипноз, он заставляет вас забыть о боли, голоде и тревожных мыслях. Но еще раз повторюсь, это далеко не на всех действует.
    Раньше я тоже думал что цветоведение чушь полная, но изучив и проведя анализ понял что в этом таки есть не малая доля правды. Если сомневаетесь то задумайтесь о том, как часто вы встречаете сайты красного цвета, фиолетового? Много помните таких? А их мало, потому что эти цвета вызывают не малое возбуждение, и не только то о котором вы подумали, в организме человека, и эти эмоции могут быть как приятные так и агрессивные. Вот поэтому мало кто решается на такие эксперименты с палитрой.