Теория цвета: 7 уроков на примере популярных брендов

Posted on by riasevastopol

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

Исходя из этого никто ни при каких обстоятельствах не сможет научить рисовать».

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

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

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

И опять с этим возможно поспорить.

В случае если наблюдать на проблему с научной точки зрения, определенно возможно допустить существование генетической предрасположенности к дизайну и искусству, но в контексте «правила 10 000 часов» такая предрасположенность перестает играться громадную роль. В случае если кто-то не в курсе, «правило 10 000 часов» ? это концепция, в соответствии с которой главная составляющая в освоении любого, кроме того самого сложного навыка — вовсе не талант, а около 10 000 часов, совершённых за совершенствованием и практикой этого навыка.Теория цвета: 7 уроков на примере популярных брендов

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

  • Мастерство сочетания цветов — броский путь к высокой конверсии

Практика превыше всего

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

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

Урок 1. Разновидности цветовых моделей

Итак, начнем: как вы думаете, сайт какой известной компании может похвалиться следующим цветовым ответом?

А сейчас опуститесь ниже, дабы проверить собственный ответ!

Конечно же, за данной зелено-желто-красно-светло синий палитрой прячется не кто другой, как великий и могучий Гугл!

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

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

Но такое представление о создании цветов методом смешения трудится только в рамках цветовой модели CMYK, главенствующей в печати и мире живописи. Любая буква акронима CMYK показывает на один из главных цветов модели: Cyan (синеватый), Magenta (красноватый), Yellow (желтый), и Key («главный» — тёмный). Другими словами эта модель складывается из трех главных цветов и тёмного, что разрешает создавать более чёрные оттенки.

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

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

Как пример для сравнения выше представлено изображение, где цвета были созданы не при помощи CMYK, а при модели и-помощи (red, green, blue — красный, зеленый, светло синий), которая употребляется в компьютерах, телевизорах и других электронных устройствах. В отличие от CMYK, RGB — аддитивная модель, другими словами красные, зеленые и светло синий световые волны комбинируются для всех остальных цветов.

Тогда как в CMYK-модели зеленый цвет — вторичный, в рамках RGB-модели это один из первичных цветов. Да и в целом цветовая палитра Гугл приводит к ощущению чего-то базисного. Как кубики на картине выше.

Итак, мы разобрали отличие между двумя главными цветовыми моделями ? CMKY и RGB. Двигаемся дальше.

  • Какие конкретно 3 самых популярных цвета для оформления сайтов?

Урок 2. Тон, насыщенность и светлота

Сайту какой компании в собственности эта цветовая палитра?

А сейчас опуститесь ниже, дабы проверить собственный ответ.

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

Итак, разберем главную терминологию параметров цвета:

Тон. Это то, что мы имеем в виду, говоря «цвет»; говорит о длине световой волны. Тон — главная черта цвета, то, что, к примеру, отличает светло синий от красного либо зеленого.

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

Насыщенность. Термин говорит о интенсивности определенного тона. При нулевой насыщенности любой цвет является серый.

Ненасыщенные цвета, в большинстве случаев, мягче и тусклее собственных насыщенных собратьев.

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

И это в полной мере логично: кнопка Tweet ? основная CTA-кнопка на странице.

Серый цвет иконки — также оттенок голубого, пускай и заметно менее насыщенный (около 20%).

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

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

  • 85% клиентов делают собственный выбор на базе цвета!

Урок 3. Типы цветовых комбинаций

Итак, следующий ресурс вы вряд ли определите, но однако он нам нужен.

Это страница компании UPS.

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

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

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

Но, взглянуть на цветовой круг в отыскивании наглядного подтверждения сказанного выше, вы точно спросите: «А где тут коричневый?»

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

Само собой разумеется, пары взаимодополняющих цветов — не единственные приятные глазу комбинации. Существуют и другие. Коротко перечислим главные:

  • Подобные цвета (Analogous Colors) — это цвета, находящиеся рядом на цветовом круге.
  • Триада цветов (Triadic colors) — три цвета, лежащие на окружности цветового круга на однообразном друг от друга расстоянии.
  • Расщепленные дополняющие цвета (Split Complementary Colors) — главный цвет и два вторых, находящихся на равном расстоянии от комплементарного ему цвета.

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

  • Устали от неинтересного брендинга? Добавьте цвет!

Урок 4. Восприятие цвета — восприятие бренда

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

Речь заходит о FedEx.

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

Дело в том, что в природе он видится редко, исходя из этого его присутствие придает композиции налет искусственности.

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

  • Психология цвета, либо Из-за чего не бывает электродрелей с фиолетовыми рукоятками?

Урок 5. Неприятности взаимодополнения

Разглядим еще один пример, в этом случае — узнаваемый в Соединенных Штатах новостной ресурс.

Итак, это сайт газеты Huffington Post. И что прежде всего кидается в глаза?

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

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

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

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

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

Дизайнеры сайта Huffington Post учли эту особенность и, во-первых, применяли весьма умеренное количество красного, а во-вторых, забрали более чёрный и ненасыщенный зеленый, на фоне которого красный начал смотреться лучше.

  • Как цвет воздействует на покупательскую активность?

Урок 6. первичные цвета и Насыщенность

Итак, переходим к следующей палитре.

Она в собственности новостному ресурсу BuzzFeed.

фразы и Первые слова, каковые приходят в голову при виде палитры сайта, — «броский», «насыщенный», «кричащий»; она как бы говорит: «Остановись и взглянуть на меня!». Разумеется, задача таковой палитры — привлечь интерес. А что же с позиций теории цвета?

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

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

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

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

  • Теория цвета — как руководить вниманием пользователя?

Урок 7. Ненасыщенные цвета

Итак, последний пример.

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

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

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

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

Но главным параметром тут есть насыщенность: все главные цвета страницы — желтый, красный и светло синий — характеризуются равномерно низким уровнем насыщенности. В следствии целый интерфейс формирует расслабленности и ощущение спокойствия. Другими словами, тогда как интерфейс BuzzFeed возбуждает психику, страница Facebook формирует воздух комфорта и уюта.

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

В конечном счете дизайн Facebook, где преобладает мягкая, ненасыщенная светло синий палитра, приводит к желанию сесть и расслабиться. Возможно, как раз исходя из этого среднестатистический американец каждый день проводит на данной странице около 40 мин. — похоже, палитра делает собственный дело.

  • Влияние цвета на конверсию целевых страниц

Заключение

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

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

Высоких вам конверсий!

По данным: blog.hubspot.com, Image source: Jane Hannah

Случайные статьи:

[ Видео Урок] Сементий Лобач: «Основы Цвета» Цветовые сочетания


Подборка похожих статей:

riasevastopol

More Posts