Психология цвета в дизайне. Как передать настроение через цвет
Каждый цвет несет за собой определенное настроение. Одна и та же страница, оформленная в разных оттенках, произведет совершенно разное впечатление.
Разбираемся в психологии цвета и рассказываем, как передавать смыслы через цвет.
Исследования влияния цвета на аудиторию
Цвет способен влиять появление определенных чувств у аудитории. Недавнее исследование университета Лойолы показало, что цвет повышает узнаваемость бренда более чем на 80%.
🔎 В течение минуты после первого просмотра люди выносят подсознательное суждение о продукте, окружающей среде или человеке. От 62 до 90% этой оценки основано только на цвете.
Цветные объявления читаются на 42% чаще, чем черно-белые. Цвет помогает запоминать определенную информацию, повышая уровень внимания. Это показывает важность цвета в донесении информации до аудитории.
В том же исследовании ученые Кайя и Эппс попросили своих 98 студентов-добровольцев ассоциировать цвета с эмоциями. Выяснилось, что у большинства участников зеленый цвет ассоциировался с ощущением спокойствия, комфорта, мира, надежды. Черный ассоциировался с чувством печали, депрессии, страха и гнева. Это означает, что цвета оказывают эмоционально возбуждающее действие. Красный цвет вызывает более сильную эмоцию или чувство по сравнению с другими цветами.
Хороший пример того, как цвет влияет на восприятие, есть у компании Heinz. Они выпустили EZ Squirt Blastin' Green, однако его продажи были посредственными. Создатели не стали менять рецептуру, а поменяли цвет бутылки соуса.
✅ За первые 7 месяцев ребрендинга было продано более 10 миллионов бутылок кетчупа. А компания заработала 23 миллиона долларов — это самый продаваемый продукт Heinz. Все из-за простой смены цвета.
❕В большинстве рекламных объявлений цвет используется как один из важных элементов, влияющих на внимание людей, их отношение к продукту и принятие решений.
Как подбирать цвета в дизайне
Все цвета в мире разделяются на две большие категории: хроматические и ахроматические.
🔲 К ахроматическим относятся все оттенки от белого до чёрного. Такие цвета не имеют оттенка и характеризуются только яркостью или светлотой.
🌈 Хроматические — все остальные яркие, насыщенные цвета, которые мы видим вокруг себя. Они формируют цветовой круг, условно разделяя его на две температурные группы: холодные и теплые. Если провести линию по центру круга, то слева будут холодные цвета, справа — теплые.
Существует три основных цвета: красный, жёлтый и синий. При смешивании каждых двух из них получаются дополнительные цвета — оранжевый, зеленый, фиолетовый.
Различные комбинации основных и дополнительных цветов образуют бесконечное множество оттенков. Одно из самых удачных цветовых сочетаний — комплементарное. Оно строится на основе двух цветов, расположенных на цветовом круге друг напротив друга. Есть и другие варианты сочетания цветов, с которыми можно поэкспериментировать.
Теплые цвета в дизайне
Теплые цвета привлекают больше внимания, чем холодные. К ним относятся все оттенки от красного до желтого. Они ассоциируются с пламенем, осенней листвой, восходами и закатами — вызывают чувства энергии, страсти, радости.
Красный и желтый — основные цвета, оранжевый находится между ними:
🟠 Красный + желтый = оранжевый
Теплые цвета создаются без примесей холодных оттенков. Используйте их, если хотите, чтобы дизайн отражал счастье, энтузиазм.
Красный
По данным Marketo, красный — второй по популярности цвет, который встречается в брендинге. Он оптимален для привлечения внимания, побуждает к действию. Ассоциируется с огнем, страстью, означает власть, силу. Ярко-красные, алые оттенки выглядят энергично, темные — сдержанно. Теплые оттенки, например, гранатовый, оказывают успокаивающее воздействие.
В дизайне красный может служить мощным акцентом. Он обладает сильным эмоциональным воздействием: наряду с положительными эмоциями, может вызывать агрессию и даже раздражение. Его нужно разбавлять более спокойными тонами.
Hubspot провели эксперимент, чтобы выяснить, какой цвет кнопки CTA — красный или зелёный — приведёт к повышению конверсии. Результаты показали, что конверсия увеличилась на 21% при использовании красного цвета.
Этот цвет также имеет самую высокую кликабельность, его считают одним из самых эффективных для обозначения призыва к действию.
Желтый
Желтый — самый позитивный цвет спектра, как утверждают психологи. Это цвет солнца и зрелых колосьев, олицетворяет энергию, счастье, креатив. Он настраивает на коммуникабельность, помогает сконцентрироваться, улучшает память. «Кислотные» оттенки желтого приводят к беспокойству, раздражению.
Это счастливый цвет вызывает положительные эмоции, поэтому он идеально подходит для проектов с детской целевой аудиторией.Разные оттенки желтого подходят для разных целей. Например, золотистый ассоциируется с богатством, властью.
В печатном деле наиболее различимой комбинацией является черный шрифт на жёлтом фоне и именно такое сочетание наилучшим образом удерживается в памяти. Среди российских компаний желтый цвет прочно закрепился за Тинькофф, его так и называют «желтый банк».
С желтым лучше всего синтезируются: черный, белый, зеленый, синий, фиолетовый.
Оранжевый
Оранжевый усиливает творческую способность, излучает тепло, броский. Получается смешением красного с желтым, поэтому в нем отражаются качества сразу двух цветов. Он в меру импульсивен, помогает ощущать счастье, поднимает настроение. Главным цветом 2024 года по версии Pantone стал оттенок оранжевого Peach Fuzz, «персиковый пушок».
Оранжевый является фирменным цветом онлайн-редактора Flyvi. Логотип выполнен в минималистичном стиле, легко запоминается, создает позитивное впечатление о продукте. Оранжевый цвет отражает основные принципы бренда — творчество, позитив, вдохновение.
Популярная комбинация — оранжевый + синий. Цвета находятся на противоположных сторонах палитры, поэтому их контрасты отлично дополняют друг друга.
Подписывайтесь на телеграм-канал Flyvi, если хотите глубже разбираться в дизайне и психологии цвета. Ежедневные посты с советами по дизайну, идеями для контента, подборками шрифтов и шаблонов. А еще, проводим конкурсы, где можно выиграть подписку на PRO-тариф Flyvi.
|
|
Розовый
Розовый не является спектральным цветом. Получается смешением красного и белого, можно добавить желтые, голубые, фиолетовые оттенки. Некоторые считают его просто «светлым вариантом красного».
Мягкий, спокойный розовый часто называют «девчачьим» цветом. Оттенки этого цвета ассоциируются с женственностью, чуткостью, игривостью, — чаще всего используются в брендинге для товаров, предназначенных для женщин и детей. Нежно-розовые оттенки могут успокоить, смягчить эмоции.
Все хорошо в меру. Слишком яркие оттенки розового могут наоборот испортить впечатление. Злоупотребление розовым цветом означает в психологии крайнюю степень легкомыслия.
В фирменном стиле Wildberries неспроста используются розовые оттенки. Логотип украшают розовые и фиолетовые пузырьки. Эти цвета интуитивно привлекают женскую половину, ведь именно они и составляют основную аудиторию онлайн-магазина. Розовый часто используется в дизайне магазинов косметики, спа-салонов, бьюти-индустрий.
Холодные цвета
В отличие от теплых, холодные цвета — зеленый, синий и фиолетовый — более приглушенные. Это цвета снега, льда, воды, ночи. Они выглядят успокаивающе, сдержанно.
Синий — основной цвет спектра, остальные холодные цвета получаются при смешивании синего с теплыми цветами:
🟢 Синий + желтый = зеленый
🟣 Синий + красный = фиолетовый
Использование холодных цветов в дизайне помогает создать ощущение спокойствия, профессионализма.
Зеленый
Цвет жизни и роста. Зеленый успокаивает, улучшает циркуляцию, приводит организм человека в тонус. Ассоциируется с безопасностью, например, зеленый цвет обозначается в качестве начала движения на светофоре.
Зеленый используется для передачи абсолютно разных смысловых оттенков. Например, зеленый у «Вкусно — и точка» символизирует качество продукции, у «Доброго» — свежесть, здоровье, лето, а у «Сбербанка» — финансы, заботу о клиентах.
Зеленый подходит для дизайна, связанного с процветанием, развитием. Светло-зеленый, или салатовый, выглядят энергично, ассоциируются с миром природы, подходят для эко-продукции. Их смягчают комбинацией с белым, бирюзовым, голубым. Темные оттенки выгодно смотрятся на сайтах, связанных с экономикой. Используются для демонстрации амбициозности, финансовой стабильности.
💡 Интересный факт: оттенки зеленого облегчают мигрени, избавляют от отрицательных эмоций и повышают работоспособность на 10-20%. В психотерапии зеленый цвет применяется для лечения клаустрофобии.
Синий
Глубокий, умиротворяющий — цвет неба, спокойствия, истины. Это самый популярный цвет в брендинге. Синий цвет в веб-дизайне по данным исследования Джо Халлока предпочитает 42% пользователей. Для мужчин синие оттенки имеют гораздо большее значение, чем для женщин.
Светлые оттенки синего, например, васильковый или небесный, расслабляют, вызывают чувство доверия. Насыщенные, темные оттенки наоборот, заряжают энергией, ассоциируются с технологиями.
Синий цвет используется компаниями, для которых важны прозрачность, доверие. Также он ассоциируется с интернет м, поэтому ВКонтакте использует его в фирменном стиле. Голубой цвет у «Газпрома» подчеркивает пользу газовой промышленности. Ведь именно голубое пламя видят люди в конфорке собственной газовой плиты.
💡 Интересный факт: большинство дальтоников видят синий цвет без каких-либо искажений. Поэтому многие мессенджеры и соцсети используют его в качестве основного цвета.
Синий хорошо сочетается с красным, розовым, желтым, белым, черным.
Фиолетовый
Фиолетовый получается смешением красного и синего. По легенде, первую фиолетовую краску — пурпур — открыли финикийцы. Этот краситель, добываемый из трёх видов морских улиток, чрезвычайно высоко ценился в античности. Тирский пурпур был буквально на вес золота, считался роскошью.
Фиолетовый имеет разные значения в психологии: от творчества и вдохновения, до меланхолии и одиночества. В дизайне темно-фиолетовые цвета, например, сливовый, создают ощущение богатства и роскоши. Светлые оттенки выглядит более мягко, ассоциируются с легкостью, весной.
Viber выделяется среди других мессенджеров и социальных сетей благодаря уникальному окрасу.
Ахроматические цвета
Ахроматические цвета — это оттенки, которые не имеют цветового тона и отличаются друг от друга только по степени яркости. К ахроматическим цветам относятся черный, белый и все градации серого, от самого темного до самого светлого. Это так называемые нейтральные цвета.
Нейтральные цвета в дизайне чаще всего выступают в качестве фона, на котором выделяются яркие цветовые акценты.
Черный
Черный — самый сильный нейтральный цвет. Он может вызывать разные ассоциации в зависимости от сопровождающих его цветов, доминировать над ними или быть ненавязчивым акцентом.
Преобладание черного может создать ощущение нервозности или ассоциироваться со злом, трауром, печалью. Например, для рекламы детских товаров лучше использовать более яркие, жизнерадостные цвета. В дизайне черный обычно используется для типографики, поскольку он нейтрален.
Классическое сочетание черного с красным или золотым. Такое цветовое решение выглядит элегантно, добавляет дизайну роскоши. Однако они должны быть аккуратно сбалансированы, иначе дизайн может оттолкнуть своей вульгарностью.
Белый
Цвет ассоциируется с дневным светом, чистотой, духовностью. Белый и черный находятся на противоположных концах спектра. Так же как и черный, белый можно комбинировать с любым цветом, но особенно стильно он будет смотреться в сочетании с черным.
Белый фон в веб-дизайне упрощает восприятие информации, используется для создания пространства. Работает как равновесие между цветами, на его фоне другие оттенки кажутся ярче.
Белый может олицетворять зиму или лето, в зависимости от дополнительных мотивов и окружающих цветов.
Заключение
Психология цвета играет важную роль в дизайне, позволяя передавать настроение и эмоции через визуальные образы. Выбор правильного цвета без слов формирует соответствующие эмоции — может создать атмосферу доверия, комфорта или, наоборот, напряжения и тревоги.
Графический онлайн-редактор Flyvi предоставляет широкий спектр инструментов для работы с цветом, все они доступны бесплатно:
✔️ Возможность изменять насыщенность, яркость, контрастность цвета;
✔️ Инструменты для создания градиентов и плавных переходов между цветами;
✔️ Фильтры и эффекты;
✔️ Быстрая работа с цветом с помощью встроенной «пипетки»;
✔️ Точный подбор цвета по HEX-коду;
✔️ Можно загружать собственные/фирменные цвета в «Брендбук».
|
Дарим новым пользователям бесплатный доступ к тарифу PRO от Flyvi в течение 5 дней! Отличная возможность познакомиться с полным функционалом редактора и оценить его преимущества. Экспериментируйте с различными оттенками, творите и вытворяйте!
|
