«искусство цвета»: оптические эффекты, которые работают в дизайне

Зеленый (второстепенный цвет)

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

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

Примеры:

Ярко-зеленый хедер сайта в сочетании с листочком создают очень естественное и живое впечатление.

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

Яркие “ретро” оттенки зеленого создают очень свежий и энергичный облик.

Еще один оливковый сайт с духом природы.

Цветовое воздействие

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

Иллюстрация: Skillbox Media

Цвета не будут искажаться, если они обладают сильной контрастностью. Во всех остальных случаях они будут казаться ярче или тусклее.

Жёлтый цвет на белом фоне кажется темнее, производит впечатление нежного тепла. На чёрном фоне он кажется светлым и приобретает агрессивный характер. Иллюстрация: Skillbox Media

Оранжевый (второстепенный цвет)

Оранжевый — очень яркий и энергичный цвет. Некоторые его вариации ассоциируются с землей и осенью. Оранжевый ассоциируется со сменой времен года — а значит может олицетворять движение. В английском языке “orange” также означает “апельсин”, а значит оранжевый связан со здоровьем и жизненной силой

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

Примеры:

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

Оранжевый изображает самую очевидную ассоциацию — огонь.

Темно-оранжевый на фоне цвета лайма выглядит практически нейтральным.

Оранжевый здесь производит впечатление гостеприимства и дружественности.

Оранжевые акценты добавляют визуального интереса и привлекают внимание к основному действию (call to action)

Кремовый и цвет слоновой кости

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

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

Примеры:

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

Натуральные коричневые цвета элементов страницы делают серо-кремовый фон теплее.

Если бы не кремовый фон, этому сайту не доставало бы элегантности.

Кремовый фон усиливает тему старины, которая создается за счет элементов графики.

Благодаря фону цвета слоновой кости и другим светлым цветам, сайт выглядит очень элегантно.

Вкратце

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

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

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

Цвет меняет наше восприятие веса

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

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

Иллюзия «чем темнее – тем тяжелее» называется кажущимся весом. Американские психологи Карл Дж. Уорден и Эллен Л. Флинн в своей статье «Влияние цвета на видимый размер и вес» описали результаты проведенных ими тестов. Они положили 8 коробок одинакового размера в прозрачную стеклянную емкость. Затем попросили участников эксперимента расположить эти коробки согласно предполагаемому весу. Самой легкой, по мнению испытуемых, оказалась белая коробка, затем шли коробки светлых цветов, а завершала список коробка черного цвета. Она почти на 2 кг, как казалось участникам эксперимента, была тяжелее белой.

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

Цвет может влиять на вкус

Покупатели говорят о том, что апельсиновые напитки более темного цвета на вкус кажутся слаще.

Безалкогольный напиток без сахара Dr Pepper от Snapple Group рекламировали как лекарственный напиток. Фоновый цвет на банках с этим напитком изменили с бежевого на синий, и люди стали говорить, что теперь он стал похож на старое доброе «свекольное пиво». Хотя рецептура осталась прежней.

Цвет способен не только привлекать внимание, но и изменять вкусовое восприятие продукта

Цветовые предпочтения потребителей

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

Цветовые предпочтения людей отражены в следующей таблице.

Цвет	Степень предпочтения (ниже = менее популярный)
Синий	1
Красный	2
Зеленый	3
Фиолетовый	4
Оранжевый	5
Желтый	6

Знаменитый принцип Дэвида Огилви по размещению картинки и текста

Дэвид Огилви разработал простую схему размещения картинки и текста, которая делает объявление более заметным, тем самым увеличивая отклик потребителя.

Принцип 2/3 –1/3 Дэвида Огилви по схеме размещения текста

Две верхние трети объявления – это одна большая фотография.

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

Логотип вашей компании аккуратно вставляется в правый нижний угол.

2/3	Две верхние трети объявления занимает одна большая фотография
1/3	Заголовок прямо под фото Продающий текст с большой буквы
	Логотип компании в правом нижнем углу

Обратный принцип 1/3 –2/3 Дэвида Огилви по схеме размещения текста

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

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

1/3	Одну верхнюю треть объявления занимает фотография
2/3	Заголовок прямо под фото Продающий текст с большой буквы
	Логотип компании в правом нижнем углу

Серый

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

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

Примеры:

Светло-серый цвет делает этот дизайн очень приглушенным и спокойным.

Типографика делает этот сайт современным, а светло-серый фон усиливает этот эффект.

Холодный серый цвет делает этот сайт утонченным и современным.

Этот дизайн выглядит очень современно благодаря темно-серому фону и светло-серой типографике.

Благодаря нескольким оттенкам серого, этот сайт выглядит одновременно профессионально и утонченно.

Форма и цвет

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

Квадрат — неподвижная материя, красный цвет.

Треугольник — символ мысли, жёлтый цвет.

Круг — вечное движение духа, синий цвет.

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

Иллюстрация: Skillbox Media

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

Иоханнес Иттен

В качестве примера работы с формой Иттен советует посмотреть на разных художников. Например — европейские:

Маттиас Грюневальд стремился к объективности в цвете и форме.

Маттиас Грюневальд. «Ашаффенбургский алтарь», 1519 г. Изображение: Приходская церковь Вознесения Богоматери, Штуппах / Wikimedia Commons

Конрад Витц объективен в цветах, но субъективен в форме.

Конрад Витц. «Святой Христофор», около 1435 г. Изображение: Художественный музей, Базель / Wikimedia Commons

Винсент ван Гог субъективно работал и с цветами, и с формой.

Синий (основной цвет)

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

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

Примеры:

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

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

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

Светлый, приглушенный голубой придает сайту ощущение расслабленности и спокойствия.

Черный

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

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

Примеры:

Черные акценты, в сочетании с яркими цветами и темно-кориченевым фоном, делают дизайн очень оригинальным.

В сочетании с ледяным голубым цветом, черный выглядит холоднее.

Дизайн смотрится оригинально благодаря черному цвету в сочетании с темно-серым и лаймовым зеленым.

Черные акценты здесь привносят утонченность и современность.

Сильные черные акценты делают дизайн сайта утонченным.

Выразительность цвета

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

В качестве примера Иттен приводит времена года. У художников каждое из них соотносится с определённым цветом:

Весна — жёлтый, светло-розовый, светло-голубой.

Лето — зелёный, синий, красный.

Осень — коричневый и фиолетовый.

Зима — холодные, глубокие и прозрачные цвета.

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

Иоханнес Иттен

Также Иттен даёт эмоциональные определения основным цветам своего спектра:

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

В зависимости от окружения жёлтый цвет меняет свой характер. Например, на фоне розового цвета он теряет выразительность. Иллюстрация: Skillbox Media
Сальвадор Дали. «Портрет Галы с двумя рёбрышками ягнёнка, балансирующими на её плече», 1933 г. Изображение: Фонд «Гала — Сальвадор Дали»

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

Красный легко адаптируется под любое окружение и приобретает новые смыслы. На зелёном фоне он кажется банальным и шумным, а на сине-зелёном — разгоревшимся огнём. Иллюстрация: Skillbox Media
Анри Матисс. «Танец», 1910 г. Государственный Эрмитаж. Изображение: Государственный Эрмитаж

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

На жёлтом фоне синий приобретает зеленоватый оттенок, а на чёрном — сияет в своей чистоте и силе. Иллюстрация: Skillbox Media
Натан Исаевич Альтман. Портрет Ахматовой, 1915 г. Изображение: Государственный Русский музей

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

Иоханнес Иттен

Больше о цвете

• Продающий красный: как цвет влияет на восприятие бренда
• Цветовые пространства: большой разбор
• Что такое цветовой круг Иттена и как дизайнеры подбирают цвета с его помощью

Картинки в рекламе

В 1991 году агентство Roper Starch Worldwide провело исследование с участием 2 000 потребителей из 10 американских городов, откликнувшихся на 650 рекламных объявлений разных товаров широкого потребления. Результаты научно подтвердили, как присутствие изображений влияет на уровень откликов на рекламу вне зависимости от продукта. Перед вами результаты этого исследования:

• Объявления, на 50% состоящие из визуальных элементов, замечают на 50% чаще, чем те, в которых в меньшей степени присутствуют или совсем отсутствуют какие-либо картинки.
• В категории самых читаемых эти же объявления показали результат на 60% выше.
• Объявления с 4-9 визуальными элементами замечают на 30% чаще, чем те, в которых нет или меньше визуальных элементов.
• Объявления с 10+ визуальными элементами заметят на 55% больше людей, чем те, в которых нет или меньше визуальных элементов.
• Самыми читаемыми с рейтингом до 70% можно считать объявления с 10+ визуальными элементами.
• Визуальная демонстрация продукта привлекает читателей на 13% чаще.
• Фотографии – самый удачный вид графических элементов.

7 лучших тем для изображений

1. Дети и младенцы
2. Матери и дети
3. Группы взрослых людей
4. Животные
5. Спортивная тематика
6. Знаменитости
7. Еда

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

Изображение продукта в рекламе

Присутствие в вашей рекламе фотографии продукта привлекает на 13% больше читателей.

Фотографии продукта в процессе использования еще на 13% укрепляют интерес к нему.

Рекламу с фотографией людей вместе с продуктом замечают на 25% больше потребителей.

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

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

В рекламе есть изображение человека, смотрящего на вас?

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

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

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

Субъективное отношение к цвету

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

Субъективные цвета показывают, как художник чувствует, какой у него характер и образ мысли. Например, с помощью них Винсент ван Гог и Жорж де ла Тур выражали свои эмоции и то, как они смотрят на окружающий мир. Но найти эти цвета не так просто:

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

Иоханнес Иттен

Субъективные цвета не отменяют объективные законы цвета. Если дизайнер решит сделать для лапши пакет с синими горошинами, с большой вероятностью продукт никто покупать не станет — хотя дизайнеру и нравятся синие горошины, они не подходят для оформления упаковки лапши.

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

Психология шрифта

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

Например, вряд ли вы будете рекламировать силовые тренажеры для спортивного зала, используя воздушный и утонченный шрифт Palace. А женское ажурное белье – с помощью такого мужского шрифта, как Cooper Black.

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

Вы знаете разницу между шрифтами с засечками и без них?

Шрифт с засечками имеет небольшое основание вверху и внизу букв и украшения наверху. Примерами шрифтов с засечками являются Times New Roman, Palatino, Schoolbook, Georgia.

Шрифты Sans Serif (без засечек) не имеют засечек вверху и внизу букв, а также каких-либо украшений. Примерами шрифтов без засечек являются Arial, Verdana, Helvetica.

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

Какие шрифты использовать в интернете?

Что выглядит хорошо на бумаге, не всегда хорошо читается с экрана компьютера.

В 2002 году Исследовательская лаборатория юзабилити ПО обнародовала результаты исследования под названием «Сравнение популярных онлайн-шрифтов: какой размер и тип лучше?». Выводы: самыми удобочитаемыми стали Arial, Courier и Verdana. 

При размере шрифта в 10 кеглей участники эксперимента отдали предпочтение шрифту Verdana, а Times New Roman оказался на последнем месте. При размере шрифта в 12 кеглей большинство предпочло Arial, a Times New Roman опять получил самую низкую оценку.

Маркетолог Дрю Эрик Уитмен для наиболее понятного и быстрого онлайн-чтения рекомендует:

• Arial высотой 12 пунктов и более.
• Если надо меньше, тогда Verdana, но мелких шрифтов лучше избегать. 
• Если у вас немолодая целевая аудитория, лучше использовать 14 кеглей.
• Для официального и делового теста используйте Georgia.

Белый

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

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

Примеры:

Белые фоны очень популярны в минималистичных дизайнах: белый фон отлично контрастирует с черной типографикой.

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

Белый в сочетании с серым придает дизайну мягкости и чистоты.

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