Содержание

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

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

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

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

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

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

Цвет и конверсия

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

На самом деле от 62 до 90% решений о покупке обусловлены именно цветом! Таким образом, более тщательное изучение психологии цвета поможет значительно повысить конверсию вашего сайта.

В каких случаях цвет особенно важен?

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

  • изображения
  • всплывающие окна
  • рамки
  • заголовки
  • оттенки фона
  • важные баннеры и первый экран на главной странице
  • кнопки, особенно призывы к действию

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

Контраст и яркость

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

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

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

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

Исследования в области психологии цвета

В блоге Moz был опубликован следующий кейс: компания-разработчик цифровых игровых автоматов просто изменила цвет кнопки призыва к действию с зеленого на желтый. Это привело к умопомрачительному росту конверсии — на 187,4%!

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

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

10 цветов с точки зрения маркетинга

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

1. Розовый

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

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

2. Синий

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

Вы найдете больше вдохновляющих примеров в нашей подборке синих веб-сайтов.

3. Красный

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

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

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

Вы найдете больше вдохновляющих примеров в нашей подборке красных веб-сайтов.

4. Зеленый

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

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

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

5. Желтый

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

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

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

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

6. Фиолетовый

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

Вы найдете больше вдохновляющих примеров в нашей подборке фиолетовых веб-сайтов.

7. Оранжевый

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

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

8. Золотой

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

9. Черный

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

Вы найдете больше вдохновляющих примеров в нашей подборке черных веб-сайтов.

10. Коричневый

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

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

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

Вы найдете больше вдохновляющих примеров в нашей подборке коричневых веб-сайтов.

Заключение

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

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

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

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

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

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

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

13 апреля 2015Советы

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

Ия Зорина

Автор Лайфхакера, атлет, КМС

Поделиться

0

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

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

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

Теория цвета

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

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

Контраст

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

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

Дополнение

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

Резонанс

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

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

BBC News

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

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

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

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

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

Красный

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

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

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

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

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

Оранжевый

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

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

Сайт Fanta

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

Жёлтый

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

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

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

Flash Media

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

Зелёный цвет

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

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

Ameritrade

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

Синий цвет

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

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

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

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

Van Vliet & Trap

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

Фиолетовый

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

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

Cadbury

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

Чёрный

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

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

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

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

Dream + Reach

Белый

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

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

Сайт с работами Клоина Тошева

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

Серый цвет

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

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

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

Awwwards

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

Бежевый

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

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

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

Dishoom

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

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

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

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

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

Art in My Coffee

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

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

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

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

Триада

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

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

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

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

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

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

Flourish

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

Аналоги

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

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

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

Blinksale

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

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

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

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

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

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

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

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

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

*Деятельность Meta Platforms Inc. и принадлежащих ей социальных сетей Facebook и Instagram запрещена на территории РФ.

Цвет в дизайне / Хабр

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

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

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

Правила соответствия цветов

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

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

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

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

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

Две пары используют четыре цвета вместе в форме двух наборов дополнительных цветов.

Полезные веб-сайты

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

СOLOURlovers

www.colourlovers.com/palettes/most-views/all-time/meta

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

Color Safe

colorsafe.co

Веб-сайт с красивыми и доступными цветовыми палитрами, основанными на рекомендациях WCAG Guidelines.

COLORS

clrs.cc

Простая палитра цветов для веб-разработки.

UiGradients

uigradients.com/#PinotNoir

Большая коллекция уже готовых цветных градиентов.

Couleurs

couleursapp.com

Удобное приложение для того, чтобы «выхватывать» и сохранять цвета, которые отображаются на экране.

Web Colour Data

webcolourdata.com

Делает разбивку любого сайта по цветовой гамме (по номерам и образцам).

Material Palette

www.materialpalette.com

Генерирует цветовую палитру дизайна.

Material Colors

materialcolors.com

Подборка цветовых образцов из Google’s Material Design Guidelines.

Material Design Colors

www.designskilz.com/colors

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

Material Design Palette

codepen.io/addyosmani/full/jlvoC

Цветовая палитра на 500 диапазонов оттенков для Android, веб и iOS.

Colours

colours.neilorangepeel.com

Цвет по номерам и расположению на палитре.

Rrggbb

rrgg.bb

Образцы цвета с номерами для программ.

Fifty Shades Of Grey For Web Designers

www.mynameisq. com/web-lab/fifty_shades_of_grey

Оттенки и образцы серого для веб-дизайна.

Fifty Shades Of Grey For Web Designers

hex.colorrrs.com

Сайт, подбирающий цвет.

Material UI Colors

www.materialui.co/colors

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

Adobe Color CC

color.adobe.com/ru/create/color-wheel

Выхватывает цвета и оттенки из внешней среды — достаточно навести камеру телефона на что-то красочное.

Coolors

coolors.co/app/f2ee7a-7c6582-6252aa-f1ffc9-cdc5bb

Быстрый генератор цветовой схемы для дизайнеров.

BADA55.Io

bada55.io

Сайт предлагает наиболее агрессивные названия для цветов CSS.

Paletton

paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Цветовая схема для дизайнеров.

Colourcode

colourco. de

Выбор цвета, основанные на hsl. Схема включает разные комбинации цвета.

Color Palette Generator

www.degraeve.com/color-palette

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

Color Palettes Color Schemes

www.color-hex.com/color-palettes

ColorSchemer

www.colorschemer.com/online.html

Он-лайн схема, генерирующая цвет.

Colllor

colllor.com

Генератор цветовой палитры.

Contrast-A

www.dasplankton.de/ContrastA

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

Color Hex

www.colorhexa.com

Сайт предоставления информации о любом цвете. Достаточно ввести любые цветовые значения в поле поиска и Color Hex выдаст подробное описание, автоматически преобразовывая в RGB, CMYK, HSL, HSV, CIE-Lab, Хантер-Lab, CIE-Luv, CIE-LCH, XYZ и XYY.

СolorExplorer

www.colorexplorer.com

Полезный сайт, предоставляющий целый набор она-лайн инструментов для работы с цветовой палитры.

ColorLuck

7act.ru/colorluck.php

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

Теория цвета для дизайнеров: руководство для начинающих

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

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

Чтобы помочь вам изучить теорию цвета, мы разбили ее на следующие темы: 

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

Зачем вам интересоваться теорией цвета

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

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

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

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

Словарь цветов

Прежде чем мы углубимся в теорию, вам нужно знать следующие термины:

Основные цвета

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

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

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

RGB и шестнадцатеричный

Красный, зеленый и синий используются для создания других цветов.

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

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

  • rgb(59, 89, 145) равно синему Facebook
  • rgb(0, 0, 0) равно черному
  • rgb(255, 255, 255) равно белому

Шестнадцатеричная система цветов преобразует каждое значение в шестнадцатеричное представление (с основанием 16), например: #ffffff равно белому

Каждые два символа представляют значение цвета, поэтому для синего Facebook красный оттенок равен 3b, зеленый — 59, а 9b — синий.

Горячие и холодные

Холодные и теплые цвета

Цвета также обладают «теплотой», и каждый из них может быть классифицирован как теплый или холодный цвет.

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

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

Цветовая температура

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

Оттенки и оттенки

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

Например, если ваш базовый цвет #8dbdd8 (светло-синий), как показано на изображении ниже, вы можете создать монохромную схему, выбрав два оттенка (два более ярких синих) и два оттенка (два более темных синих).

Монохромная цветовая схема на основе #8dbdd8, созданная с использованием COLOURCODE .

Насыщенность, оттенок и яркость

Насыщенность описывает интенсивность цвета. Увеличение насыщенности делает цвет богаче и темнее, а уменьшение насыщенности делает его блеклым и светлым. Когда мы говорим «светло-синий» или «темно-зеленый», мы описываем изменения насыщенности.

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

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

Цветовая схема HSL. Адаптировано из « Munsell-system ». Под лицензией CC BY-SA 3.0 через Commons.

Цветовой круг

Цветовой круг.

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

Красный, желтый и синий являются основными цветами. Фиолетовый, оранжевый и зеленый являются вторичными цветами. Все остальное — третичный цвет — смесь первичных и вторичных цветов.

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

5 типов цветовых схем

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

1.

Монохромный

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

Монохромная цветовая схема на основе фиолетового.

2. Дополнительные

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

Дополнительная цветовая схема на основе оттенков зеленого и красного.

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

Дополнительные цвета мятно-зеленый и красно-фиолетовый.

3. Аналоговые 

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

Аналогичная цветовая схема на основе красного, оранжевого и желтого цветов.

4. Триадный

Чтобы создать триадную цветовую схему, нарисуйте равносторонний треугольник (треугольник, все три стороны которого имеют одинаковую длину) на цветовом круге и выберите три цвета в точках треугольника. Эта триада создает разнообразную, но сбалансированную схему.

Триадная цветовая схема, основанная на фиолетовом, бежевом и зеленом.

5. Тетрадик

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

Тетрадическая цветовая схема, включающая средне-синий, красно-фиолетовый, весенне-зеленый и желто-зеленый.

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

Используйте теорию цвета в своих проектах

Цвет — это мощный инструмент для пробуждения эмоций и создания индивидуальности бренда. Подумайте о брендах, которые вы могли бы узнать только по цвету — красная Coca-Cola или зеленая Starbucks. Цвет может быть настолько тесно связан с идентичностью бренда, что становится законным товарным знаком — как в случае с пурпурным цветом T-Mobile.

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

Как стратегически использовать цвет в дизайне веб-сайта

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

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

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

1. Учитывайте культурный контекст

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

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

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

‍

🤑 БЕСПЛАТНАЯ электронная книга по психологии цвета 👉 Загрузите сейчас! 🤑

2. Понимание теории цвета

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

Цветовой круг

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

Первичный, вторичный и третичный цвета на цветовом круге
Первичные цвета

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

Дополнительные цвета

Дополнительные цвета: фиолетовый (красный + синий), зеленый (синий + желтый) и оранжевый (красный + желтый). Сочетание вторичных цветов с первичными дает третичные цвета.

Третичные цвета

Третичные цвета представляют собой комбинации первичных и вторичных цветов (например, красно-фиолетовый, желто-оранжевый, сине-зеленый и т. д.)

Оттенки, оттенки и тона

Первичные, вторичные и третичные цвета считаются чистыми цветами . Они насыщенные, яркие и веселые. Оттенки — это добавление белого к чистым цветам. Это создает более светлые, менее интенсивные цвета. Оттенки созданы с добавлением черного к чистым цветам. Наконец, добавление черного и белого к чистым цветам дает тонов . Тона более приглушенные, чем чистые цвета.

Сравнение оттенка, оттенка и тона

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

Использование контраста

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

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

Обязательно используйте средство проверки контрастности! Контрастность — важная составляющая доступности

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

Источник: Raw Studio

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

3. Используйте психологию цвета для передачи информации и ценностей бренда

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

Цвета вызывают эмоции

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

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

Общие цветовые ассоциации

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

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

Посмотреть этот пост

8 узнать больше о психологии цвета.

Бесплатная электронная книга

Полное руководство по психологии цвета

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

Скачать бесплатно

4. Создайте цветовую палитру

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

Coca-Cola с гордостью демонстрирует свой ярко-красный цвет

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

Зеленый цвет Whole Foods идеально сочетается с миссией компании.

Whole Foods использует земляной зеленый цвет в качестве основного цвета. Как и Coca-Cola, Whole Foods отображает свой фирменный цвет на своем веб-сайте. Зеленый прекрасно сочетается с ценностями и клиентурой Whole Foods: здоровьем, природой и изобилием.

Темно-синий цвет Lowe’s означает доверие и надежность.

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

Типы цветовых палитр

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

Аналоговые

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

Аналогичные цвета расположены очень близко друг к другу на цветовом круге

‍

Источник: Emme
Монохроматический

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

Монохроматические цвета в основном связаны с изменением яркости

‍

Источник: Розалуна
Триада

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

Триадные цвета равномерно распределены по цветовому кругу

‍

Источник: Parse
Дополнительные

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

Дополнительные цвета противоположны друг другу на цветовом кругеИсточник: Антенна
Split Complementary

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

тонн премиальных брендов, использующих эту цветовую комбинацию!

‍

Источник: Шелби Кей

Как использовать цветовые палитры в дизайне веб-сайта

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

Для начала я рекомендую выбрать три цвета для вашей палитры: a основной (или первичный) цвет , вторичный цвет и акцентный цвет . Затем используйте правило 60/30/10 , чтобы применить эти цвета в дизайне вашего сайта. Согласно этому правилу, 60 % используемого цвета должно быть основным цветом, 30 % — второстепенным и 10 % — акцентным. Имейте в виду, что черный и белый цвета тоже считаются цветами. Ниже приведены несколько примеров потрясающих веб-сайтов, использующих правило 60/30/10 цветов.

Доминантный фиолетовый с бирюзовым в качестве акцента

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

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

Зеленый список использует зеленый в качестве основного цвета, белый в качестве вторичного и розовый в качестве акцентного цвета.

Demuxed ведет с желтым и парами с черным и белым.

Demuxed использует желтый в качестве основного цвета, черный в качестве вторичного цвета и белый в качестве акцентного цвета.

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

Освойте использование цвета в дизайне веб-сайтов с помощью нашего курса

В этом посте мы рассмотрели основы теории и психологии цвета и то, как они используются для создания эффектных цветовых палитр в веб-дизайне. Но, как вы знаете, цвет сам по себе не является основой функционального веб-дизайна; чтобы создавать ценные веб-сайты для клиентов, нам нужно сочетать принципы цвета со стратегией, типографикой, макетом, UX и многим другим. Наш курс «Процесс веб-сайта за 10 000 долларов» учит именно этому.

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

‍

Теория цвета в веб-дизайне: полное руководство (2022)

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

Об авторе: Алина Хазанова, дизайнер продукта @ Elementor

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

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

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

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

Давайте прыгать!

Содержание

  • Почему цвет имеет значение в веб-дизайне
  • Краткий обзор истории цвета
  • 7 ключевых терминов теории цвета, которые вы должны знать
  • Как применить эффективную цветовую схему
  • Как использовать цветовую психологию и значение для воздействия на эмоции
  • Что следует учитывать при использовании психологии цвета
  • Представляем Elementor Global Color
  • Как использовать теорию цвета на вашем сайте

Почему цвет имеет значение в веб-дизайне

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

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

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

Правильная цветовая схема также может решить успех маркетинговой кампании.

Согласно исследованию, проведенному Университетом Лойолы, штат Мэриленд, цвета могут повысить общую узнаваемость бренда на целых 80 процентов.

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

Краткий обзор истории цвета

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

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

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

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

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

7 ключевых терминов теории цвета, которые вы должны знать

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

Понимание основных цветовых характеристик и терминов поможет вам принимать эффективные дизайнерские решения.

1. Цветовой круг

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

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

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

2. Соотношение цветов

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

  • Монохромный: Состоящий из различных оттенков, оттенков и насыщенности одного и того же цвета.
  • Дополнительный : На основе двух цветов с противоположных сторон цветового круга.
  • Аналог: Три цвета, расположенные рядом на цветовом круге.
  • Триадный: Использование трех цветов, находящихся в точках треугольника, нарисованного внутри цветового круга.

Комплементарные и аналогичные цветовые схемы являются самыми простыми для многих дизайнеров.

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

3. Теплота цвета

В двух словах, цвета могут быть «холодными» или «теплыми».

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

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

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

4. Цветовые системы: RGB, CMYK и HEX

Три стандартные цветовые системы: RGB (красный, зеленый, синий), CMYK (голубой, пурпурный, желтый, черный) и HEX .

Цветовая система RGB основана на свете. Все цвета в этой системе представляют собой комбинацию красного, зеленого и синего. Каждое значение представлено числом от 0 (черный) до 255 (белый). Это легко понять, если вспомнить эксперименты Ньютона: максимальное значение всех основных цветных источников света дает белый свет, а нулевой цвет (или нулевой свет) — это черный или темнота.

CMYK используется в печатном дизайне. Это также стандартные картриджи для большинства цветных принтеров. В отличие от RGB, нулевое значение всех цветов в системе CMYK (0,0,0,0) дает белый цвет, а максимальное значение (100,100,100,100) — черный. Однако стандартный черный цвет, используемый в печати, определяется как (0, 0, 0, 100).

Наконец, цветовая система HEX использует шестизначное трехбайтовое шестнадцатеричное описание каждого цвета, например #000000 (черный) или #ffffff (белый). Каждые два символа представляют значение цвета. Например, знаменитый синий цвет Facebook ( #3b5998 ) включает в себя красный оттенок, описанный как 3b .

5. Тона и оттенки

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

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

6. Оттенок, насыщенность и яркость

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

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

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

7. Контраст

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

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

Эти две комбинации стали тенденцией в веб-дизайне, и многие шаблоны и приложения предлагают «Темную тему» ​​или «Светлую тему».

Контрастность важна не только для удобочитаемости, но и для иерархии контента. Ярким примером является Aviaja Dance, которая использует высококонтрастные элементы на своем веб-сайте, чтобы продемонстрировать важные детали.

Как применить эффективную цветовую схему

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

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

Ниже приведены несколько примеров различных цветовых схем, которые визуально приятны. We Are OSMs превосходная монохроматическая цветовая схема использует различные оттенки и оттенки зеленого для раздела «О нас»:

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

Instinct Studio может похвастаться яркими элементами оранжевого и бирюзового цветов, которые являются дополнительными цветами:

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

Как использовать психологию и значение цвета для воздействия на эмоции

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

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

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

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

Набор Elementor’s Portfolio использует привлекательный оттенок красного, который резонирует с энергией и уверенностью:

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

Оранжевый

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

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

Желтый

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

Lùleka Experience использовала этот цвет особенно хорошо, стратегически добавляя кусочки желтого, чтобы создать ощущение счастья на своей домашней странице:

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

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

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

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

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

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

Фиолетовый

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

Например, Proxy использует потрясающую фиолетовую палитру для создания утонченного и мистического ночного образа:

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

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

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

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

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

Набор для фотосъемки Elementor использует насыщенный черный фон, чтобы подчеркнуть потрясающие изображения и создать элегантный вид:

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

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

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

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

Что следует учитывать при использовании психологии цвета

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

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

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

Представляем Elementor Global Color

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

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

Глобальный цвет появляется с запуском Elementor Core 3. 0 и является дополнительным уровнем стиля темы. Это поможет вам построить свой дизайн с помощью полезных блоков, которые вы можете разместить там, где это необходимо. Эта функция идеально подходит для внесения изменений в цветовую схему веб-сайта без необходимости касаться какого-либо кода или файлов CSS, и все это из одного места в редакторе.

Как использовать теорию цвета на своем веб-сайте

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

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

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

Улучшите свои навыки веб-дизайна с помощью теории цвета

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

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

У вас есть вопросы о теории цвета и о том, как ее применять в веб-дизайне? Дайте нам знать в комментариях ниже!