Цвета которые передают эмоции

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

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

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

Умение использовать цвета можно прокачивать до бесконечности. Это настоящая бездна возможностей для воздействия на человека.

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

Теория цвета

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

Можно разбить теорию цвета на три части:

Контраст

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

Дополнение

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

Резонанс

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

Например, BBC News используют красную панель навигации, чтобы пробудить читателя, усилить его возбуждённое состояние. Учитывая специфику сайта – сенсационные новости, – красный цвет выглядит логичным решением.

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

Эмоциональное восприятие цвета

Никто не будет отрицать тесное взаимодействие цвета и эмоций. И, разумеется, любой веб-дизайнер хочет использовать это влияние, чтобы создавать верную атмосферу для каждого сайта. На основе нескольких исследований – анализа, опубликованного на сайте Vandelay Design, и поста о цветах в Smash Magazine – мы объясним, как цвета влияют на эмоции и помогают создавать UX-дизайн.

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

Красный

Эмоции и ассоциации: власть, важность, молодость, страсть, любовь, действие, агрессия.

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

Например, красный цвет очень подходит сайту No Way NSA, цель которого – предупреждать о предполагаемых угрозах.

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

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

Оранжевый

Эмоции и ассоциации: дружелюбие, энергия, уникальность, солнечность, оптимизм.

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

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

Жёлтый

Эмоции и ассоциации: счастье, креатив, оптимизм, энтузиазм, архаичность (более тёмные тона).

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

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

Зелёный цвет

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

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

Синий цвет

Эмоции и ассоциации: спокойствие, безопасность, прохлада, открытость (более светлые оттенки), надёжность (более тёмные оттенки).

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

Социальные сети вроде Twitter и Facebook используют более лёгкие и средние оттенки синего, а корпоративные сайты предпочитают более тёмные оттенки силы и надёжности. Отличный пример – агентство событийного дизайна Van Vliet & Trap. Используя синие цветы в качестве фона, они визуально намекнули на свои знания и умения во флористике, а также создали ощущение надёжности и доверия. Это имеет большое значение, поскольку они работают с событиями, для которых очень важна визуальная часть, например со свадьбами.

Фиолетовый

Эмоции и ассоциации: роскошь, креатив, романтика (светлые оттенки), мистика и тайна (тёмные оттенки).

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

Чёрный

Эмоции и ассоциации: власть, изысканность, нервозность.

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

Сила и нейтральность чёрного делают его отличным выбором для больших блоков текста, но как основной цвет он может создать ощущение нервозности или даже ассоциироваться со злом. Для большинства сайтов чёрный используется, чтобы создать ощущение изысканности. От сочетания чёрного и белого в минималистичном дизайне создаётся впечатление элегантности и стиля, как на сайте Dream and Reach компании BOSE.

Белый

Эмоции и ассоциации: чистота, простота, добродетель.

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

Серый цвет

Эмоции и ассоциации: нейтральность, формальность, меланхолия.

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

Бежевый

Эмоции и ассоциации: передаёт характер остальных цветов.

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

Более тёмные оттенки бежевого создают ощущение традиционности и приземлённости, дают ощущение бумажной текстуры, а более светлые оттенки кажутся свежее и современнее. Например, на сайте ресторана Dishoom светло-бежевый цвет вокруг названия и более тёмные края создают впечатление, что этот ресторан – свежий взгляд на традиционную кухню.

Цвет слоновой кости

Эмоции и ассоциации: комфорт, элегантность, простота.

Цвет слоновой кости, а также кремовый вызывают практически те же эмоции, что и белый. Однако цвет слоновой кости более тёплый (или менее стерильный), чем белый, что создаёт большее ощущение комфорта, сохраняя при этом минимализм. Можно использовать цвет слоновой кости вместо белого, чтобы смягчить контраст между ним и более тёмными цветами. Например, на сайте Art in My Coffee коричнево-оранжевые элементы размещены на фоне цвета слоновой кости (который выглядит сероватым), что сохраняет ощущение теплоты.

Цветовая гамма

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

Триада (тройная гармония, треугольник)

Триада – основная и самая сбалансированная система из трёх цветов. В ней используется резонанс и дополнение цветов, но нет сложного контраста, из-за чего триада является самой надёжной гаммой. На цветовом круге из 12 цветов выберите любые три, расположенные в 120 градусах друг от друга: один цвет для основного фона и два для контента и панели навигации.

Двойная комплиментарная система

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

Аналоги (последовательная система)

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

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

Инструменты-помощники для выбора цвета

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

1. Adobe Color CC, ранее известный как Adobe Kuler. Это один из самых надёжных инструментов в выборе цвета.
2. Paletton. Если вам нужен простой инструмент для максимально быстрого выбора цвета, Paletton отлично подойдёт.
3. Flat UI Color Picker. Прекрасный инструмент для выбора цвета пользовательского интерфейса.

А если эти инструменты вам не подходят, вот ещё 28 сайтов с палитрами и разными инструментами для выбора цвета.

Прямая зависимость между цветом и эмоциями

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

Источник

Арт-директор Playrix о Цвете. Часть 1. Как цвет влияет на наши эмоции?

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

Эмоции. Очевидность с неочевидной точки зрения

Что такое эмоции?

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

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

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

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

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

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

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

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

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

Многие великие люди связывали цвет, свет, эмоции и ощущения. Немецкий писатель Иоганн Гете писал, что цвета — это деяния и страдания света. По Карлу Юнгу, цвет — это родной язык бессознательного. Психическое воздействие цвета, по Кандинскому, рождает “вибрацию души”. Поль Сезанн был уверен, что для импрессиониста писать с природы значит не нарисовать какой-либо предмет, а осознать свои ощущения.

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

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

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

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

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

В чем связь эмоций и цвета?

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

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

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

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

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

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

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

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

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

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

Источник