Психология цвета в дизайне

Теория цвета для дизайнеров, часть 1: Значение цвета

Психология цвета в дизайне

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

В дизайне темно-фиолетовые цвета создают ощущение богатства и роскоши. Светло-фиолетовый выглядит более мягко и ассоциируется с весной и романтикой.

Примеры:

Темный оттенок, который здесь используется, делает упор на историческое “королевское” значение фиолетового. Такой эффект очень подходит Asprey — производителю люксовых вещей.Светлые и темные оттенки фиолетового в паре создают ощущение творчества.Яркий, с красноватым оттенком фиолетовый делает сайт богатым и энергичным.Темно-фиолетовый фон придает сайту настроение творчества.

Темно-фиолетовые акценты создают ощущение эксклюзивности и утонченности.

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

Черный

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

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

Примеры:

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

Белый

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

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

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

Примеры:

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

Серый

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

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

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

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

Примеры:

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

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

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

Коричневый

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

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

Примеры:

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

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

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

Бежевый и желто-коричневый

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

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

Бежевый также может символизировать религиозность.

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

Примеры:

Светло-бежевый фон создает ощущение молодости и свежести, благодаря окружающим его ярким цветам.Дизайн выглядит консервативно и элегантно благодаря светло-бежевому фону.

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

Бежевый фон хедера в сочетании с другими акцентами делают этот дизайн традиционным и изысканным.

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

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

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

Примеры:

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

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

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

Вот быстрое руководство по основным значениям вышеперечисленных цветов:

  • Красный: страсть, любовь, гнев
  • Оранжевый: энергия, счастье, жизненная сила
  • Желтый: счастье, надежда, обман
  • Зеленый: новые начинания, изобилие, природа
  • Синий: спокойствие, ответственность, печаль
  • Фиолетовый: творчество, царственность, богатство
  • Черный: загадочность, элегантность, зло
  • Серый: угрюмость, консерватизм, формальность
  • Белый: невинность, чистота, добродетель
  • Коричневый: природа, целостность, надежность
  • Бежевый: консерватизм, набожность, скука
  • Кремовый: спокойствие, элегантность, чистота

“,”author”:”Nancy Pong”,”date_published”:”2018-10-05T12:03:04.186Z”,”lead_image_url”:”https://miro.medium.com/max/500/1*t4tu4sBoGwAaIpezkgGQPw.jpeg”,”dek”:null,”next_page_url”:null,”url”:”https://medium.com/%D1%86%D0%B2%D0%B5%D1%82/%D1%82%D0%B5%D0%BE%D1%80%D0%B8%D1%8F-%D1%86%D0%B2%D0%B5%D1%82%D0%B0-%D0%B4%D0%BB%D1%8F-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5%D1%80%D0%BE%D0%B2-%D1%87%D0%B0%D1%81%D1%82%D1%8C-1-%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%86%D0%B2%D0%B5%D1%82%D0%B0-75831397922″,”domain”:”medium.com”,”excerpt”:”Вы читаете перевод статьи Камерона Чапмана “Color Theory for Designers, Part 1: The Meaning of Color”. Над переводом работали Ольга…”,”word_count”:1051,”direction”:”ltr”,”total_pages”:1,”rendered_pages”:1}

Психология цвета и web-дизайн

Психология цвета в дизайне

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

Теория цвета. Основные моменты

Использование цветов и их сочетаний в коммерческих и бизнес-целях основывается на теории цвета или психологическом и эмоциональном восприятии цвета человеком.

Грамотное цветовое оформление гораздо больше, чем просто украшение.

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

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

  • Контраст
  • Дополнение
  • Резонанс

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

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

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

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

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

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

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

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

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

Цвет и эмоции

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

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

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

Красный цвет

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

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

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

Оранжевый цвет

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

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

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

Желтый цвет

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

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

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

Зеленый цвет

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

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

Синий цвет

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

Фиолетовый цвет

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

Черный цвет

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

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

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

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

Белый цвет

Белый – традиционно считается цветом добродетели, чистоты, простоты. Отличный вариант для фона сайтов, выполненных в минималистическом дизайне.

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

Серый цвет

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

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

Бежевый цвет

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

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

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

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

Выбор цветовой гаммы

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

Триада

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

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

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

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

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

Цвета-аналоги

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

Психология цвета: значение цветов в дизайне, рекламе и маркетинге

Психология цвета в дизайне

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

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

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

Скорее всего, вслепую это окажется не так просто, так что не стоит преуменьшать важность значения цветов. 

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

Как работает психология цветов

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

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

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

Если желтые напитки кажутся нам кислыми, то в зеленых некоторые участники эксперимента почувствовали аромат мяты или привкус тархуна, даже если добавок там не было. Красные и оранжевые напитки часто кажутся более сладкими.

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

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

Значение цветов в маркетинге

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

Десять лет назад сеть закусочных “McDonald’s” начала проводить ребрендинг — вывески стали менять с красных на зеленые, а материалы для оформления интерьера с яркого пластика на те, что имитируют дерево и металл.

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

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

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

Красный

Ассоциации

  • + Огонь, любовь, вражда, агрессия, секс, власть, жара, сила.
  • – Кровь, страх, боль, угроза, опасность, война.

Культура

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

Как использовать

Подойдет для сферы питания — Coca-Cola, Red Bull и сферы развлечений — Netflix. Аккуратнее следует использовать в сфере безопасности и недвижимости — здесь он может отпугнуть своей агрессивностью.

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

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

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

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

И наоборот, например, красный цвет в оформлении ресторана Meat Dealers яркий и агрессивный, чтобы привлечь внимание и разжечь аппетит.

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

Использовать этот шаблон

Оранжевый

Ассоциации

  • + Наслаждение, праздник, благородство, удовольствие, радость, пламя.
  • – Дешевизна, измена.

Культура

В Индии оранжевый символизирует страсть и мужество. В буддизме — отречение и смирение.

Как использовать

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

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

Конкурентное преимущество авиаперевозчика easyJet — дешевые билеты. Яркий оранжевый на сайте — то, что нужно, чтобы бренд привлек к себе внимание целевой аудитории

Использовать этот шаблон

Желтый

Ассоциации

  • + Движение, радость, солнце, веселье, тепло.
  • – Болезнь, измена, ревность.

Культура

–В Китае желтый считался привилегией императорской семьи, сейчас желтой книгой там называют порнографию, а желтым видео — фильм для взрослых. В Японии желтый — символ смелости, в Бразилии — символ отчаяния, в Сирии и Мексике — смерти. У суеверного русского человека желтый цвет может вызвать ассоциации с разлукой и изменой.

Как использовать

Некоторые оттенки желтого выглядят дешево, его, как и оранжевый хорошо использовать для недорогих продуктов. Например, он гармонично смотрится в логотипе лоукостера Ryanair, уместен в сфере развлечений — Nikon, IMDb, подойдет для детских брендов.

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

Благодаря желтому оформлению входа, магазин детских товаров «Дочки-Сыночки» выглядит жизнерадостным и доступным

Зеленый

Ассоциации

  • + Мир, покой, жизнь, рост, гармония, природа, молодость, свежесть, здоровье, чистота.
  • – Измена, зависть, скука, слабость.

Культура

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

Как использовать

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

При помощи смены привычного цвета на неожиданный можно привлечь внимание к продукту, как это сделала компания Heinz, когда выпустила зеленый кетчуп. Чтобы удовлетворить спрос, фабрика работала 24/7, а продажи зеленого кетчупа принесли компании 23 000 долларов.

Хорошо подходит зеленый веганским кафе. Вот такую заставку использует компания «Вкус & Цвет» для своего Veg & Raw Cafe, где можно попробовать веганские блюда, фреши, смузи и травяные чаи

Использовать этот шаблон

Синий

Ассоциации

  • + Доверие, лояльность, логичность, безмятежность, безопасность, вселенная, космос.
  • – Холодность, черствость, замкнутость.

Культура

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

Как использовать

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

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

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

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

Синий цвет делает образ платежной системы PayPal надежным

Использовать этот шаблон

Фиолетовый

Ассоциации

  • + Мудрость, зрелость, свобода, утонченность, фантазия, богатство.
  • – Удрученность, подавленность.

Культура

В Японии фиолетовый означает праздник, а в Южной Америке — траур.

Как использовать

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

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

Использовать этот шаблон

Черный

Ассоциации

  • + Ночь, тайна, утонченность, элегантность, безопасность, сила, авторитет, роскошь.
  • – Холодность, злость, опасность, угнетенность, депрессивность, траур, тьма, агрессия.

Культура

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

Как использовать

Этот цвет подходит для тех брендов, которые хотят подчеркнуть изысканность и показать, что товар дорогой. Так делают бренды Hugo Boss, Chanel, Camus. Даже чай и сладости высшего качества часто упакованы в черные коробки. Если используете черный для упаковки или печатных материалов, попробуйте разные фактуры. Возможно, матовая версия будет выглядеть еще изысканнее.

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

Сайт студии шоколада Verhoff выполнен в черных тонах с белой надписью — это делает образ бренда элегантным

Использовать этот шаблон

Белый

Ассоциации

  • + Чистота, невинность, торжественность, мир, спокойствие, свежесть.
  • – Излишняя стерильность, холодность.

Культура

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

Как использовать

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

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

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

Использовать этот шаблон

Коричневый

Ассоциации

  • + Простота, дружелюбие, прочность, безопасность, консерватизм.

Культура

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

Как использовать

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

В интерьере и на сайте сети кофеен «Кофемания» коричневые оттенки создают атмосферу уюта и тепла

Использовать этот шаблон

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

Подписывайтесь на обновления в Телеграме, Фейсбуке, ВКонтакте и Яндекс Дзене, чтобы всегда быть в курсе трендов графического дизайна и возможностей Canva, которые помогут воплотить их в жизнь!

Цвет в веб-дизайне: как вызвать у пользователя нужные эмоции

Психология цвета в дизайне

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

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

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

Теория цвета

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

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

Контраст

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

Цветовое колесо

Дополнение

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

Резонанс

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

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

BBC News

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

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

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

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

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

Красный

Эмоции и ассоциации: власть, важность, молодость.

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

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

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

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

Оранжевый

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

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

Сайт Fanta

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

Жёлтый

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

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

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

Flash Media

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

Зелёный цвет

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

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

Ameritrade

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

Фиолетовый

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

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

Cadbury

Более светлые оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, тогда как тёмные оттенки кажутся более шикарными и таинственными.

Чёрный

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

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

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

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

Dream + Reach

Бежевый

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

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

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

Dishoom

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

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

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

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

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

Триада

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

На цветовом круге из 12 цветов выберите любые три, расположенные в 120 градусах друг от друга: один цвет для основного фона и два для контента и панели навигации.

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

Аналоги

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

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

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

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

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

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

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

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

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

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

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

Поделиться:
Нет комментариев

    Добавить комментарий

    Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.