Цвета на сайте: Как выбрать цвета для сайта : советы и примеры цветовых гамм

Цвет на сайте: создаем настроение, управляем эмоциями

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

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

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

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

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

О цветовых моделях

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

1. Цветовая модель RGB.

Данная модель чаще всего используется в веб-дизайне. Аббревиатура RGB — это сокращение от названий трех цветов: Red (красный), Green (зеленый), Blue (синий). Исходный цвет данной модели — черный (экран монитора). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать белый цвет. В HTML документах цвета задаются символами от 00 до FF в шестнадцатеричном коде перед которыми ставится символ #.

2. Цветовая модель CMYK.

Она присуща полиграфии и печати. Аббревиатура CMYK — это сокращение от названий четырех цветов: Cyan (голубой), Magenta (пурпурный), Yellow (желтый), Key (черный). Исходным цветом данной модели является белый (лист бумаги). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать черный цвет.

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

Выбираем основной цвет

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

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

Существует три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Их невозможно получить путем смешивания других цветов. А как раз составные и дополнительные цвета мы можем получить, смешав основные.

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

Также используются три составных цвета: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Не забываем, что получить их можно, смешав красный и желтый, желтый и синий, красный и синий цвета.

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

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

Значение цветов

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

Красный цвет

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

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

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

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

Также часто цвет используется при оформлении ресторанов быстрого питания — McDonalds, Ростикс, KFC.

Код красного цвета — #FF0000

• Восприятие красного цвета в разных странах:
• В Китае красный цвет воспринимается хорошо, он означает цвет удачи, торжества, свадьбы. 
• В Индии считается цветом чистоты
• Южная Африка относит красный цвет к траурным цветам
• На Востоке означает радость, особенно в сочетании с белым
• На Западе воспринимается по стандарту, как цвет, символизирующий возбуждение, любовь, страсть
• В США, конечно же, ассоциируется с Рождеством, если используется с зеленым, а также с Днем Святого Валентина (с белым)
• Иврит: красный цвет означает жертву, грех, поэтому использовать нужно с осторожностью
• В Япония красный — это жизнь
• Христианство: восприятие чуть отличается от Иврита — жертва, страсть, любовь
• Фэн-шуй: красный цвет — это Янь, огонь, удача, уважение, защита, живучесть, деньги, признание.

Синий цвет

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

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

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

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

Код синего цвета — #0000FF

Голубой цвет

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

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

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

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

Как воспринимается голубой цвет в различных странах мира:

• В Европе считается цветом успокоения, умиротворения
• В Иране используется с осторожностью, ведь голубой — это цвет траура, а с другой стороны — цвет неба и духовности
• В Китае означает бессмертие
• В Индуизме это цвет Кришны
• В Иудаизме — цвет святости
• В Христианство – это цвет Христа
• В Католицизме — цвета одежды Марии
• На Ближнем Востоке голубой цвет считается цветом защиты
• Вообще в мире голубой цвет означает безопасность
• Фэн-шуй: голубой — это Инь, вода, спокойствие, исцеление, релаксация, доверие, приключения
• На Западе, увы, этот цвет ассоциируется с печалью, депрессией

Желтый цвет

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

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

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

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

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

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

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

Желтый обозначается так — #FFFF00

Восприятие желтого цвета в разных странах:

• В Европе желтый цвет считается цветом счастья, надежды, радости, но при этом слабости
• В Азии считается имперским цветом
• В Египте это цвет траура
• В Японии — цвет мужества
• В Буддизме желтый цвет символизирует мудрость
• По фэн-шуй: желтый цвет — это Янь, Земля, солнечные лучи, тепло, движение

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

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

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

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

• Как воспринимается оранжевый цвет в странах мира:
• В Европе оранжевый цвет символизирует осень, урожай, творчество
• В Ирландии ассоциируется с религиозными протестантами
• В США первые ассоциации, конечно же, с Хэллоуином (в сочетании с черным)
• В Индуизме оранжевый вообще считается священным цветом
• Фэн-шуй: символ Янь, Земли, также оранжевый цвет усиливает концентрацию

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

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

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

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

О фиолетовом цвете говорил Гёте: «Движение этого цвета непрерывно. Так человек хочет идти вперед вместе с ним, но не просто шагать вверх по карьерной лестнице, но и достичь также внутренней гармонии».

Код фиолетового цвета — #8000FF

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

Зеленый цвет

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

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

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

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

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

Зеленый цвет обозначается так — #008000

Восприятие зеленого цвета в разных странах:

• В Японии он означает жизнь
• Ислам: зеленый цвет — это символ надежды, добродетели, жизни
• Ирландия: конечно же, это символ всей страны
• Европа / США: здесь зеленый цвет ассоциируется с весной, новым рождением, с Днем Святого Патрика, с Рождеством (в сочетании с красным)
• Фэн-шуй: это символ Инь, дерево, исцеление, здоровье

Коричневый цвет

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

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

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

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

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

Серый цвет

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

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

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

Розовый цвет

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

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

Черный цвет

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

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

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

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

Код черного цвета — #000000

Восприятие черного цвета в разных странах мира:

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

Белый цвет

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

Код белого цвета — #FFFFFF

Как воспринимается белый цвет в мире:

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

Серебряный цвет

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

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

Автомобильные концерны предпочитают использовать в дизайне своих сайтов серебряный в сочетании серо-синей и белой красками.
Так обозначается серебристый цвет — #С0С0С0

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

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

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

Синий цвет

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

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

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

Черный цвет

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

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

Белый цвет

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

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

Серый цвет

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

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

Бежевый цвет

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

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

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

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

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

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

Триада

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

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

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

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

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

Как подобрать цвета для сайта?

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

 

Знание ключевых правил колористики поможет выбрать грамотное цветовое решение.

 

 

 

Как цвета влияют на бренд и сайт?

 

 

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

 

 

 

 

 

Использование красного цвета в бренде Кока-Колы имеет два основания:

 

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

 

 

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

 

 

 

Разрабатывая дизайн, нужно обратить внимание на три нюанса:

 

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

 

 

 

Как выбрать ключевой цвет?

 

 

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

 

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

 

 

 

 

 

 

Стоит также учитывать значения цветов

 

1. Зеленый символизирует здоровье, покой, достаток и природу. Этот цвет приятен для восприятия, помогает расслабиться. Кстати, по статистике зеленый – один из самых приятных оттенков как для мужчин, так и для женщин.
2. Красный – символ любви, страсти или опасности и тревоги. В маркетинге часто используется, чтобы подтолкнуть человека к покупке, сообщить о выгодных условиях, о необходимости сделки. В общепите помогает вызвать аппетит.
3. Желтый олицетворяет молодость, свежесть, оптимизм. Популярен для привлечения внимания. Но нужно знать еще, что желтый может стать причиной эмоционального напряжения, так что применять его нужно с осторожностью.
4. Розовый всегда связан с романтикой, женственностью, нежностью и легкостью, поэтому его берут в основном для дизайна сайтов с товарами и услугами для девушек.
5. Оранжевый – это символ творчества, дружелюбия. Он побуждает людей к действию, мотивирует. Такой цвет способен подталкивать к импульсивным покупкам и шагам, поэтому его часто используют для оформления Call-to-action кнопок.
6. Синий вселяет некую уверенность, чувство безопасности, спокойствия и умиротворения. Из-за этого цвет широко используется различными коммерческими организациями и банками.
7. Черный – элегантный и роскошный цвет. Популярен для рекламы и продвижения люксовых дорогих продуктов.
8. Фиолетовый ассоциируется с достатком, успешностью и мудростью. Успокаивает людей, вселяет доверие. Очень популярен для оформления сайтов, связанных с косметикой.
9. Серый – это универсальность, лаконичность и минимализм. Он символизирует осторожность и надежность.

 

 

 

Как воспринимают цвета мужчины и женщины?

 

 

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

 

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

 

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

 

 

 

 

 

 

Где на сайте использовать основной цвет?

 

 

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

 

 

Где лучше всего применить основной цвет?

 

• Логотип;
• Раздел меню;
• Главная кнопка, призывающая к действию;
• Название
• Важные факты.

 

 

 

Как применять акцентные оттенки?

 

 

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

 

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

 

 

 

Где можно употребить акцентные цвета?

 

• Кнопки
• Подзаголовки;
• Дополнительная информация важного характера;
• Кнопка перехода в раздел меню.

 

 

 

 

 

 

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

 

 

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

 

 

 

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

 

 

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

 

 

1. Adobe Color

 

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

 

 

 

 

 

2. Colorscheme

 

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

 

 

 

 

 

3. Hailpixel

 

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

 

 

 

 

 

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

 

 

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

 

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

 

 

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

 

 

> Создать сайт

 

Цвета в веб-дизайне: как цветовое оформление сайта влияет на конверсии

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

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

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

Буквально все оказывает влияние на решение о покупке (конверсии) — от расположения и кнопок до цветовой гаммы.

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

Ассоциируется ли красный цвет с кока-колой и Санта-Клаусом?

А как насчет сочетания красного и желтого — не всплывает ли в памяти Макдональдс?

Влияние цветового оформления сайта на конверсии

1. Красный

Что возникает в воображении при слове «красный»?

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

Противоречивые ассоциации, правда? Цвета любви, романтики и опасности.

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

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

Красный — это подсознательная сила веб-дизайна, заставляющая действовать быстро.

2. Розовый

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

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

Кстати, концепцию «розовых младенцев» раскрутила компания Johnson & Johnson с ее шампунями, маслами, пенкой и др.

Розовый цвет в веб-дизайне ассоциируется с чистотой и женственностью.

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

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

Фиолетовый оказывает умиротворяющее действие на женскую аудиторию.

Что символизирует этот цвет в оформлении веб-страниц? Всевозможные женские фетиши.

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

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

4. Синий

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

Случайность? Вовсе нет: синий символизирует безопасность и надежность.

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

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

Как в банке: припаркуйте здесь свои деньги и спите спокойно!

5. Черный

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

Черный — в некотором роде ироничный цвет.

Его можно увидеть в оформлении веб-сайтов автомобильной тематики.

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

6. Желтый и оранжевый

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

Для человеческого мозга желтый и оранжевый — это самые заметные цвета.

Да откройте любой успешный лендинг-пейдж: какую цветовую гамму там используют?

Психологи заметили, что чтение оранжевых лендингов лучше «переносится» пользователями, не вызывая скуки.

Желтый цвет в веб-дизайне символизирует бодрость, свежесть, энергию.

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

Что учитывать при выборе цвета в веб-дизайне?

1. Первое впечатление

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

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

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

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

2. Прицел на аудиторию сайта

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

Согласитесь, не всех людей радует одинаковая цветовая гамма!

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

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

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

3. Креативность решает

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

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

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

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

4. Отражение бренда

Владелец сайта не может каждый день менять цветовую гамму.

Однажды утвержденная, эта схема останется с вами на долгое время — до следующего редизайна.

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

Постепенно пользователи начнут узнавать их, соотносить с брендом и его преимуществами.

Убедитесь, что утвержденная схема выгодно отражает ваш бизнес.

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

Восприятие основных цветов пользователем: 12 сайтов для примера

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

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

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

Оттенки одного и того цвета воспринимаются нами по-разному

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

1. Красный

Оттенок красного воспринимается как непринужденный, веселый и стимулирующий 

Увлеченность, решительность и значимость

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

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

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

2. Оранжевый

Epic применяет оранжевый в качестве подсветки

Энергичность, веселье и непринужденность, дешевизна  

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

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

3. Желтый

Желтым можно повысить активность или раздражение

Радость, доброжелательность, предупреждение

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

Доминирующий в палитре сайта Post-it ярко желтый цвет подчеркивает сам продукт. Побуждает пользователей к активным действиям и делает бренд узнаваемым.

4. Зеленый

Зеленая гамма подчеркивает жажду к приключениям   

Натуральность, стабильность, благополучие

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

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

5. Синий

Синие оттенки в палитре сайта финансиста повышают доверие

Спокойствие, достоверность, приглашение

Наиболее популярный цвет в веб-дизайне и тому есть причина. Синий – это цвет доверия. Внушая спокойствие и безмятежность, он эффективен там, где важна надежность с безопасностью (применяют банковские сайты citibank.ru, chase.com и barclays.co.uk). Успокаивающий эффект делает цвет дружелюбным и гостеприимным, поэтому оттенки синего присутствуют в дизайне Фейсбука и Твиттера.

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

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

Синий – отличный выбор, но не подходит кулинарному сайту и всей фуд-тематике. Синий не нашел применения в дикой природе и считается подавителем аппетита.

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

Фиолетовый эмоционально связывает с благосостоянием и роскошью

Роскошь, таинственность, романтика

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

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

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

7. Розовый

Розовый поднимает настроение посетителям сайта аренды и проката

Женственность, юность, невинность

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

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

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

Очень необычное применение коричневого на сайте B&O Play  

Прочность, практичность, деревенская простоватость

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

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

9. Черный

Воздействие черного цвета в дизайн Cartelle довольно ощутимо

Могущество, изысканность, продвинутость

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

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

10. Белый

Кремово-белые фоны акцентируют внимание на товаре

Опрятность, благородность, благополучие

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

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

Кремово-белый на сайте обувной компании ETQ подобран удачно, он направляет внимание целевой аудитории на продукцию.

11. Серый

Деликатно выглядят серые тона на мебельном сайте итальянского бренда

Нейтральность, официальность, мрачность

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

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

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

12. Бежевый

Дизайн Beige воздействует на аудиторию успокаивающе     

Обостряет эффектность других цветов

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

Миссия бежевого цвета на японском сайте ресторана Beige Alain Ducasse – поддерживать спокойную и комфортную атмосферу, обеспечивая работу продающих элементов сайта.

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

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

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

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

Теория цвета

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

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

Контраст

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

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

Дополнение

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

Резонанс

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

Например, 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 сайтов с палитрами и разными инструментами для выбора цвета.

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

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

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

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

10 ошибок в работе с цветом на сайте и как их избежать :: Shopolog.ru

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

Нежелание внедрять психологические приемы

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

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

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

1. Слепое подражательство

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

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

2. Тусклый call-to-action

Если у вас на сайте есть мощный призыв к действию, он должен быть заметен пользователю — за него должен зацепиться глаз пользователя. Бледный и не выделяющийся call-to-action, даже если он отлично сформулирован, просто не будет работать. Не так уж хороша и противоположная ситуация, когда СТА буквально кричит «НАЖМИ МЕНЯ». Призыв к действию должен быть гармоничным и выделяться за счет выбора контрастных цветов и дизайна.

3. Избыточная цветовая палитра сайта

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

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

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

На первом примере для оформления текста используется 3 цвета, на втором всего два. Именно второй вариант смотрится лучше и текст на нем проще читается.

4. Разный цвет у однотипных элементов

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

На примере две кнопки с одним и тем же назначением на одном сайте. Неудачное решение.

5. Одинаковые цвета у разнотипных элементов

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

6. Недостаток контраста

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

7. Нестандартный цвет ссылок

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

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

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

8. Блеклый минимализм не для импульсивных продаж

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

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

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

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

9. Неуместный черный

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

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

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

10. Цветовые ограничения дизайнеру

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

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

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

Выводы

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

Для примера мы размыли первый экран Aviasales.ru — внимание привлекают блоки элементов 1, 2 и 3. После прочтения заголовка, т.е. формирования у пользователя правильных ожиданий, он (вспоминаем про правила контраста) будет смотреть на нужные элементы выбора параметров и call-to-action.

А посмотрите, как четко выделяется на размытом фоне основное действие на сайте ostrovok.ru.

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

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

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

Цвет имеет огромное влияние на наши отношения и эмоции.

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

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

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

Что такое психология цвета?

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

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

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

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

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

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

Где следует использовать психологию цвета?

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

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

В приведенном ниже примере NinjaJump использует зелено-желто-красную цветовую схему в своем логотипе, номере телефона, видео C2A, строке меню, графике, меню категорий, подзаголовках и боковой панели.

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

• Веб-сайты
• Логотипы
• Брендинг
• Целевые страницы
• Строки меню
• Электронный маркетинг
• Сообщения в социальных сетях и обложки
• Дизайн продукта
• Видео

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

Правильное использование психологии цвета

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

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

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

Если, с другой стороны, вы продаете товар женщинам, вы не хотите использовать коричневый или оранжевый. Может быть, поэтому L’Oreal использует черно-белое изображение с фиолетовым оверлеем на своей домашней странице электронной коммерции.

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

• Правильный путь
• В нужное время
• Правильная аудитория
• Правильная цель

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

Проверено

Советы по психологии цвета для увеличения конверсии

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

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

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

1. Женщины предпочитают синий, фиолетовый и зеленый

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

В ходе опроса по цвету и полу 35% женщин назвали синий цвет своим любимым цветом, за которым следуют фиолетовый (23%) и зеленый (14%). 33% женщин признались, что оранжевый был их наименее любимым цветом, за ним следуют коричневый (33%) и серый (17%).

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

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

Клиентская база

Milani Cosmetics состоит в основном из женщин. Таким образом, на главной странице нет ни капли оранжевого, серого или коричневого:

.

Woman’s Day использует все три любимых женщинами цвета (синий, фиолетовый и зеленый) на своей домашней странице, что привлекает их целевую аудиторию:

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

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

2. Мужчины предпочитают синий, зеленый и черный

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

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

3. Используйте синий для повышения доверия

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

Прочтите литературу на синем, и вы увидите сообщения вроде

.

• Синий цвет — это цвет доверия, мира, порядка и верности.
• Синий — это цвет корпоративной Америки, и он говорит: «Остынь. . . верь и поверь мне. . . будь уверен в том, что я говорю! »
• Синий вызывает чувство спокойствия и безмятежности. Его часто называют мирным, спокойным, безопасным и упорядоченным.

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

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

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

Синий — это цвет, который широко используется многими банками.Вот CapitalOne.com, крупный интернет-банк:

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

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

4.Желтый — для предупреждений

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

В таком случае кажется странным, что некоторые психологи-цветоводы объявляют желтый цвет цветом счастья. Business Insider сообщает, что «бренды используют желтый цвет, чтобы показать, что они веселые и дружелюбные». Есть вероятность, что желтый может указывать на игривость. Однако, поскольку желтый стимулирует центр возбуждения мозга, ощущение игривости может быть просто состоянием повышенной эмоции и реакции, а не просто радостью.

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

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

Я даже читал, что «желтый цвет может вызвать тошноту», хотя я в этом сомневаюсь.

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

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

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

Используйте желтый в малых дозах, если вы не хотите вызывать ненужное беспокойство.

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

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

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

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

Однако

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

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

Вот как это использует Конрад Фейгин:

Все элементы преобразования Dell зеленые.

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

5. Апельсин может вызывать чувство спешки или импульса

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

Прекрасным примером является логотип Denver Broncos.

На самом деле, есть масса спортивных команд, которые используют апельсин: Florida Gators, Clemson Tigers, Boise State Broncos, Syracuse, New York Knicks, New York Mets, Cleveland Browns и т. Д.

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

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

Однако оранжевый может немного подавлять. В исследовательской статье содержится рекомендация:

.

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

Иногда апельсин трактуется как «дешевый». Если ваш товар дешевый или вы хотите, чтобы его воспринимали как таковой, оранжевый может быть хорошим выбором. Да здравствует большая партия.

6. Черный цвет добавляет ощущение роскоши и ценности

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

В статье Business Insider, посвященной цвету и брендингу, автор рассказывает о значении черного:

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

Сумки Louis Vuitton недешевы. На сайте отсутствуют причудливые и забавные цвета и рисунки.Это серьезное значение:

Citizen Watch, лучше, чем в среднем Timex, также использует дизайн веб-сайта в темных тонах:

Lamborghini делает то же самое. Черные — это название игры:

Если вы продаете на своем веб-сайте дорогие предметы роскоши, черный, вероятно, будет хорошим выбором.

7. Используйте яркие основные цвета для вашего CTA

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

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

Women’s Health использует яркий сиреневый оттенок для всплывающих окон с призывом к действию. У них есть связанный с женщинами пурпурный / розовый оттенок, а также яркий тон.

GreenGeeks использует желтую кнопку:

Крупнейший розничный торговец в мире использует знаменитую кнопку «добавить в корзину». Желтый:

Одни из лучших конверсионных цветов — «уродливые» — оранжевый и желтый.В статье на ColorMatters.com говорится, что

Психологически «антиэстетические» цвета могут привлечь больше внимания, чем те, что находятся в эстетически правильном списке.

Поскольку цель конверсионного элемента — привлечь внимание, вы вполне можете справиться с этой большой оранжевой кнопкой (BOB). Или желтого.

8. Не пренебрегайте белым

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

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

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

Рекомендации по психологии цвета для увеличения конверсии

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

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

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

• Протестируйте несколько цветов: Несмотря на то, что некоторые могут сказать, не существует правильного цвета для текста или кнопки преобразования.Попробуйте зеленую, фиолетовую или желтую кнопку. Изучите преимущества схемы черного фона по сравнению с белым фоном. Узнайте, что лучше всего подходит вашей аудитории и вашему продукту.
• Не оставляйте выбор цвета на усмотрение дизайнера: Я очень уважаю большинство веб-дизайнеров. Я работал со многими из них. Однако не позволяйте дизайнеру диктовать, какие цвета вам следует использовать на своем веб-сайте. Цвет — это проблема конверсии, а не просто вопрос «О, это хорошо». Цветовая эстетика — это еще не все.Эффекты преобразования цвета важны! Вы должны активно участвовать в выборе цвета своих целевых страниц, чтобы повысить конверсию.
• Избегайте перегрузки цветом: Я только что потратил более 3000 слов на то, чтобы рассказать вам, насколько важен отличный цвет. Теперь вы собираетесь пойти и что-нибудь раскрасить. Но не переусердствуйте. Помните мой последний пункт. Я поставил это последним не зря. Белый — это цвет, и он тоже должен быть вашим лучшим цветом. Преодолейте свой энтузиазм с цветом, используя как можно больше белого.Слишком много цветов может создать путаницу.

Заключение

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

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

Как изменение цвета повлияло на конверсию?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

• SEO — разблокируйте огромное количество SEO-трафика.Смотрите реальные результаты.
• Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
• Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

Как выбрать хорошие цветовые схемы для веб-сайтов (2021)

Как выбрать хорошие цветовые схемы для веб-сайтов (2021)

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

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

Почему важны цвета веб-сайта

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

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

Когда некоторые компании экспериментировали с цветами кнопок, они заметили резкий всплеск или снижение конверсии. Например, компания Beamax, производящая проекционные экраны, заметила колоссальный рост числа кликов по красным ссылкам на 53,1% по сравнению с синими ссылками.

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

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

Как выбрать цветовую схему для вашего сайта

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

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

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

Выберите основной цвет

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

• Красный: Coca-Cola или Nintendo — Подразумевает волнение или счастье
• Оранжевый : Nickelodeon или Fanta — Подразумевает, что впереди дружелюбное, веселое время
• Желтый: Nikon или McDonalds — Подразумевает оптимизм и счастье
• Зеленый: Whole Foods or Animal Planet — Подразумевает свежесть и природу
• Синий: Walmart или American Express — Подразумевает надежность и уверенность
• Фиолетовый: Hallmark или Cadbury — Подразумевает выдающийся бренд, который имеет историю качества
• Коричневый: Nespresso или UPS — подразумевает надежный продукт, которым может пользоваться кто угодно
• Черный: Chanel или Adidas — Подразумевает роскошь или элегантность
• Белый: Apple или Nike — Подразумевает гладкие, удобные для пользователя продукты

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

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

Выберите дополнительные цвета

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

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

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

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

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

Выберите цвет фона

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

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

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

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

Выберите цвет шрифта

4. Выберите цвет шрифта

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

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

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

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

Советы по выбору цвета веб-сайта

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

Используйте постоянную насыщенность

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

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

Используйте один и тот же цвет, но изменяйте насыщенность

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

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

Дополнительные советы

Дополнительные советы см. В нашей инфографике ниже.

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

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

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

Существует также Color Safe, еще один веб-сайт, который позволяет создавать и просматривать цвета по типу, позволяя найти идеальный красный или зеленый.

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

Как выбрать цвет для вашего веб-сайта: Резюме

Вот шаги, которые вы захотите предпринять при выборе цветов для своего веб-сайта:

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

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

Часто задаваемые вопросы

Сколько цветов должно быть на сайте?

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

Где использовать привлекательные цвета?

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

Какие цвета самые распространенные?

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

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

Получите в свои руки полный контрольный список для создания веб-сайтов — бесплатно!

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

Введите свой адрес электронной почты

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

О Конни

Проектирование и создание вашего веб-сайта (особенно вашего первого) — непростая задача. Если вы такой же дизайнер, как я, то вы уже далеко впереди всех. Но что, если вы один из 99% владельцев бизнеса, которые не обладают техническими или творческими способностями? Я хочу поделиться с вами своим опытом в дизайне веб-сайтов, чтобы помочь вам создать профессионально выглядящий веб-сайт для развития вашего бизнеса.

Посмотреть все сообщения Конни →

Мы используем куки. Просматривая наш сайт, вы соглашаетесь на использование файлов cookie.

Насколько важен цвет в дизайне веб-сайтов? | Студия 1 Дизайн

Условия использования Designer on Tap

Между Studio 1 Pty Ltd ABN 46 082 517 539 (, или , ) и вами.

Эти положения и условия ( Условия ) регулируют вашу подписку на наши дизайнерские услуги, предоставляемые продуктом подписки «Designer on Tap» ( Service ), который более подробно изложен на сайте www.studio1design.com/unlimited/ ( Веб-сайт ) и формирует юридически обязывающее договорное соглашение между вами, пользователем Сервиса, и нами.

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

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

1. Комиссии и расходы
   1. Услугу можно приобрести по ежемесячной подписке на нашем веб-сайте. Мы выставим вам счет по согласованной ежемесячной ставке ( Комиссия ) заранее, и Комиссия будет автоматически списываться с вашей кредитной карты каждый месяц.
   2. Если срок действия вашей кредитной карты истекает или данные вашей кредитной карты изменились, вы должны сообщить нам об этом как можно скорее. Задержка в оплате может привести к приостановке или прекращению нами вашей подписки.
   3. Если иное не указано на Веб-сайте или в любом счете, который мы вам предоставляем, Комиссия указана в долларах США и выражена с учетом всех налогов.
   4. Если вам требуются услуги пользовательского кодирования или любые другие услуги, которые не указаны в описании услуги на веб-сайте (Дополнительные услуги), мы сообщим вам об этом и о примерной стоимости предоставления этих дополнительных услуг . Вы соглашаетесь с тем, что любые Дополнительные услуги будут регулироваться нашими стандартными условиями.
   5. Вы не должны предоставлять или разрешать любому лицу за пределами вашей организации использовать ваш доступ к Сервису без нашего предварительного согласия. Мы оставляем за собой право немедленно прекратить вашу подписку в любое время без каких-либо обязательств, если вы разрешите или у нас есть разумные основания подозревать, что вы разрешили доступ к Сервису неуполномоченному лицу.
2. Сроки
   1. Мы будем прилагать разумные коммерческие усилия для предоставления Услуг в соответствии с любыми согласованными сроками, но мы не гарантируем каких-либо расчетных сроков, и мы не будем нарушать свои обязательства, если мы не соблюдаем такие сроки.
3. Права интеллектуальной собственности
   1. Вы признаете и соглашаетесь с тем, что все Права на интеллектуальную собственность во всех файлах создания, рабочих файлах, изображениях и других документах, предоставленных нами в связи с Услугами, переходят к нам с момента их создания. Во избежание сомнений, сюда не входит ваш фоновый IP-адрес или какие-либо лицензии (например, лицензии на изображения).
   2. После полной оплаты наших гонораров, но в соответствии с пунктом 5.3, мы передадим вам все права интеллектуальной собственности в проекте, за исключением любого из наших фоновых IP.В таком случае у нас есть бессрочная безотзывная лицензия на использование соответствующих прав интеллектуальной собственности проекта, если иное не согласовано в письменной форме. Во избежание сомнений, Права интеллектуальной собственности, которые мы согласились передать вам, не включают никаких лицензий (например, лицензий на изображения) или других прав интеллектуальной собственности, которые мы не можем передать.
   3. Каждая сторона сохраняет право собственности на свой Фоновый IP и предоставляет другой стороне неисключительную бесплатную лицензию следующим образом:
      1. для нас в той мере, в какой это необходимо для того, чтобы мы могли предоставлять Услуги, осуществлять наши права в соответствии с положениями настоящих условий и иным образом выполнять свои обязательства в соответствии с настоящими условиями, и
      2. для вас только для целей и объема проекта, если иное не согласовано в письменной форме.
   4. Если в процессе предоставления Услуг мы разрабатываем, обнаруживаем или сначала внедряем на практике концепцию, продукт или процесс, которые могут быть запатентованы, то такая концепция, продукт или процесс останутся нашей собственностью, и вы не должны использовать или иным образом использовать такое имущество без предварительного получения нашего письменного согласия.
   5. В той степени, в которой это разрешено действующим законодательством и в ваших интересах, мы по вашему письменному запросу получим согласие от обладателя каких-либо моральных прав на проект.
   6. Мы можем приобретать права на изображения, которые мы используем при предоставлении вам Услуг. На такие изображения может распространяться лицензионное соглашение между нами и третьей стороной, которое может ограничивать использование вами этих изображений. Пожалуйста, спросите нас, хотите ли вы получить копию условий любой такой лицензии. Если иное не согласовано в письменной форме, мы можем по своему усмотрению использовать изображения, которые использовались при предоставлении вам Услуг, с другими клиентами или для других работ. Если вам требуются определенные изображения, вам может потребоваться внести дополнительную плату (-ы) за такое использование.Даже если мы соглашаемся предоставить изображение исключительно вам, мы не можем гарантировать, что изображение не будет использоваться другими третьими сторонами, которые могли получить эти изображения от другой стороны.
4. Гарантии и ответственность
   1. Вы гарантируете, что вся работа и материалы, предоставленные вами (включая ваш Фоновый IP), будут свободны и свободны от любых прав удержания и обременения и могут быть использованы нами на законных основаниях без нарушения прав других, включая и без ограничения общности вышеизложенное, любые патенты на авторские права на коммерческую тайну или права на товарный знак любой третьей стороны.
   2. Вы признаете, что не полагались на какие-либо советы, заявления или гарантии, предоставленные нами в связи с Услугами, которые прямо не указаны в этом документе.
   3. В той степени, в которой это разрешено законом, все гарантии, условия и заявления с нашей стороны исключаются. Если термин подразумевается законом в этом документе, и закон запрещает положения в контракте, исключающие или изменяющие ответственность в соответствии с этим термином, то он будет включен в этот документ. Однако наша ответственность за нарушение такого условия будет ограничена, по нашему выбору, одним или несколькими из следующих действий:
      1. снова поставка услуг; или
      2. оплата стоимости повторного предоставления услуг.
   4. Если вы недовольны нашими Услугами, в той степени, в которой это разрешено законом, мы не будем предоставлять вам возмещение, а снова предоставим вам Услуги в разумных пределах, пока вы не будете удовлетворены результатом.
   5. В той степени, в которой это разрешено законом, ни мы, ни какие-либо наши должностные лица, сотрудники, агенты или связанные с ними юридические лица не будем нести никакой ответственности (в том числе за халатность) за любые убытки, ущерб, обязательства или расходы, понесенные или понесенные вами. или претензии, предъявленные к вам, и вы соглашаетесь не предъявлять никаких претензий к нам в связи с предоставлением нами Услуг или вытекающими из них.
   6. Без ограничений мы ни при каких обстоятельствах не несем ответственности за любые косвенные или косвенные убытки, включая упущенную выгоду, упущенную выгоду и упущенную возможность для бизнеса.
   7. Вы освобождаете нас от ответственности и ограждаете нас от любых претензий, убытков или ущерба любого рода (включая судебные издержки и выплаты на основе полного возмещения), прямо или косвенно возникающих в результате:
      1. любое действие, совершенное нами добросовестно и предположительно в соответствии с правом, предоставленным нам в соответствии с положениями этого документа
      2. о любом нарушении вами прав на интеллектуальную собственность третьих лиц и / или
      3. за любое нарушение вами любого из условий этого документа.
   8. Мы не гарантируем, что наши Услуги дадут какие-либо конкретные результаты. В частности, и не ограничивая вышеизложенное, мы не даем никаких гарантий или заверений в отношении продаж или доходов, которые могут быть достигнуты, или что вы получите какие-либо новые или увеличенные числа или клиентов в результате наших Услуг.
5. Прекращение
   1. Вы можете прекратить подписку на Службу в любое время, уведомив нас через свою учетную запись на Веб-сайте о том, что вы хотите прекратить подписку, и в этом случае прекращение вступает в силу в конце оплаченного вами расчетного периода.
   2. Мы оставляем за собой право немедленно приостановить предоставление Услуг в любое время и без каких-либо обязательств, если вы каким-либо образом нарушите настоящие Условия.
   3. Если вы нарушите какое-либо условие или условие этого документа и не сможете устранить такое нарушение в течение 14 дней с момента получения вами письменного уведомления от нас, указывающего на нарушение и требующего его устранения, мы можем по своему усмотрению рассматривать этот документ как прекращенный, и в этом случае мы сохранит за собой Права интеллектуальной собственности в Сервисах, даже если мы ранее согласились передать их.
   4. Прекращение действия из-за нарушения вами данного документа никоим образом не ущемляет наши права, включая наше право на получение оплаты за оказанные услуги.
6. Без запроса
   1. Вы не должны в течение срока действия этого документа или в течение 6 месяцев после завершения любого проекта, который мы берем на себя:
      1. нанимать, заключать договор или нанимать услуги любого из наших сотрудников, или
      2. побуждать или пытаться склонить кого-либо из наших сотрудников к расторжению их соглашений или контрактов с нами.
7. Общие
   1. Все уведомления и согласия, требуемые или разрешенные для предоставления в соответствии с этим документом, должны быть в письменной форме и предоставлены путем личного обслуживания, предоплаты почтовых услуг, факсимильной передачи или передачи по электронной почте по адресам сторон, указанным в этом документе, или по адресу другой адрес, который одна из сторон может указать другой путем письменного уведомления.
   2. Ни этот документ, ни какие-либо права или обязанности по этому документу не могут быть переуступлены или переданы иным образом одной из сторон без предварительного письменного разрешения другой стороны.
   3. Если мы не будем действовать в отношении нарушения вами данного документа, это не лишает нас права действовать в отношении этого или последующих или подобных нарушений.
   4. Ничто из изложенного в этом документе не представляет вас и нас как партнеров и не создает отношения между работодателем и сотрудником, хозяином и служащим или принципалом и агентом между сторонами. Ни одна из сторон не имеет права делать какие-либо заявления, заверения или обязательства любого рода или предпринимать какие-либо действия, которые будут иметь обязательную силу для другой стороны, за исключением случаев, прямо предусмотренных в этом документе или разрешенных в письменной форме.
   5. Если какое-либо положение этого документа будет признано недействительным или не имеющим исковой силы, остальные положения никоим образом не должны быть затронуты или нарушены. Этот документ должен быть составлен таким образом, чтобы максимально приблизить реализацию намерений сторон в том виде, в котором они были первоначально выполнены.
   6. Настоящие положения и условия регулируются и должны толковаться в соответствии с законодательством штата Виктория, Австралия. Стороны подчиняются неисключительной юрисдикции судов этого государства.
8. Определения

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

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

Моральные права означает право указания авторства, право против ложного приписывания и право на неприкосновенность авторства, как это определено в Законе об авторском праве 1968 г. (Cth).

Психология цвета 101 — Как цвет влияет на восприятие вашего веб-сайта

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

1. Белый

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

2. Красный

Красный цвет увеличивает сердцебиение и вызывает учащенное дыхание. Это интенсивный и мощный цвет, который ассоциируется со спросом и агрессией. Красный цвет также стимулирует аппетит. В бизнесе красный цвет известен как цвет «призыва к действию».Веб-сайт First Aid Dorset, организации, предлагающей курсы сердечно-легочной реанимации в Великобритании, является прекрасным примером использования красного цвета для побуждения посетителей к действию.

3. Розовый

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

4. Синий

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

5. Зеленый

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

6. Желтый

Желтый цвет требует внимания. Он известен как привлекающий внимание! Однако желтый цвет наиболее резок для глаз и поэтому стимулирует нашу эмоциональную сторону. В результате, если вы собираетесь использовать желтый в качестве основного цвета для своего веб-сайта, убедитесь, что вы выбрали правильный оттенок желтого, чтобы он поднимал настроение зрителя, а не раздражал эмоции! Веб-сайт книги Фаррелла Уильяма «24 часа счастья» — отличный пример использования желтого цвета для повышения удовлетворенности и воодушевления пользователей.

7. Оранжевый

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

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

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

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

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

10. Серый

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

11. Черный

Черный цвет ассоциируется с властью и властью. Черный вызывает чувство запугивания и контроля. В определенных контекстах он также может показаться зрителям утонченным и изящным. Сайт фотографа Марцина Каневски — прекрасный пример использования черного (и белого) для создания ощущения изысканности. Фактически, мы рассматриваем использование черно-белого изображения на веб-сайтах как главную тенденцию 2014 года.

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

Гендерные различия

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

Травяной бизес

Культурная ассоциация

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

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

21 лучшая цветовая комбинация, которую можно попробовать на своем веб-сайте [Руководство в закладках]

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

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

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

Лучшие цветовые схемы и комбинации для веб-сайтов

1. Кораллово-красный и Викинг
2. Ист-Бэй, Лунный Рейкер и Призрак
3. Викинг и Карри
4. Желто-коричневая кожа, киноварь и Акапулько
5. Боттичелли, Непал и Корабль Серый
6. Персидский зеленый, Vista Blue, сиреневый и подсолнечный
7. Желтые календулы, ледяной холод и синий Vista
8. Специи, Тоскана, Яффо, Калико и желтый металл
9. Alto, Mandys Pink, каштановая роза, шпильки
10. Swiss Coffee, Schooner, Pharlap и шахтный вал
11. Тюльпанное дерево и пунга
12. Лебединый пух, Монте-Карло и обсерватория
13. Ваш розовый, сладко-горький и ализариновый малиновый
14. Пампасы, твой розовый и Мелани
15. Горный луг и магнолия
16. Терракота, порох, Moon Raker, Акапулько и Манхэттен
17. Сладко-горький, Космос, Нильский синий и Чайка
18. Malibu, Aero Blue, Picton Blue и Boston Blue
19. Навахо, белый и яркий мандарин
20. Голубь серый и Aero Blue
21. Милано красный и черный жемчуг

Конечно, группа загадочных названий цветов бесполезна, если не увидеть их в действии.(Что такое «Фарлап»?)

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

1. Кораллово-красный и викинг

Шестнадцатеричные коды: # F93943, # 7EB2DD

Источник изображения

2. Ист-Бэй, Мун Рейкер и Призрак

Шестнадцатеричные коды: # 424874, # DCD6F7, # CACFD6

Источник изображения

3.Викинг и Карри

Шестнадцатеричные коды: # 7EB2DD, # FFE8D4

Источник изображения

4. Желто-коричневая кожа, киноварь и Акапулько

Шестнадцатеричные коды: # F98866, # FF420E, # 80BD9E

Источник изображения

5. Непал, Корабль Грей и Боттичелли

Шестнадцатеричные коды: # 90AFC5, # 3E363F, # C4DFE6,

Источник изображения

6. Персидский зеленый, Vista Blue, сиреневый и подсолнечный

Шестнадцатеричные коды: # 00A6A6, # 98DBC6, # F18D9E, # E6D72A

Источник изображения

7.Бархатцы желтый, ледяной и синий Vista

Шестнадцатеричные коды: # F6E278, # BCF4F5, # 98DBC6

Источник изображения

8. Специи, Тоскана, Яффо, Калико и желтый металл

Шестнадцатеричные коды: # 6E352C, # CF5230, # F59A44, # E3C598, # 6E612F

Источник изображения

9. Alto, Mandys Pink, Chestnut Rose и Stiletto

Шестнадцатеричные коды: # D9D9D9, # F5B3B4, # D15656, # 94353

Источник изображения

10. Swiss Coffee, Schooner, Pharlap и шахта

Шестнадцатеричные коды: # E1DCD9, # 8F8681, # A67F78, # 3E3C3C

Источник изображения

11.Тюльпанное дерево и пунга

Шестнадцатеричные коды: # F2AB39, # 563C16

Источник изображения

12. Лебединый пух, Монте-Карло и обсерватория

Шестнадцатеричные коды: # D1EDE1, # 7BC5AE, # 028C6A

Источник изображения

13. Ваш розовый, сладко-горький и малиновый ализарин

Шестнадцатеричные коды: # FFC2C3, # FE7773, # EA3238

Источник изображения

14. Пампасы, твой розовый и Мелани

Шестнадцатеричные коды: #, F1EBE9, ​​# FFC2C3, # E6CBDD

Источник изображения

15.Горный луг и магнолия

Шестнадцатеричные коды: # 1B998B, # F8F1FF

Источник изображения

16. Терракота, порох, Moon Raker, Акапулько и Манхэттен

Шестнадцатеричные коды: # E07A5F, # 3D405B, # DECDF5, # 81B29A, # F2CC8F

Источник изображения

17. Сладко-горький, Космос, Нильский синий и Чайка

Шестнадцатеричные коды: # FE7773, # FFD8D8, # 194049, # 87CEEB

Источник изображения

18. Malibu, Aero Blue, Picton Blue и Boston Blue

Шестнадцатеричные коды: # 4DD7FF, # AEFFF1, # 32C3EE, # 3B8FA1

Источник изображения

19.Навахо Белый и Яркий Мандарин

Шестнадцатеричные коды: # FFE0AC, # FF8C8C

20. Голубино-серый и аэро-синий

Шестнадцатеричные коды: # 666666, # B5FFE9

Источник изображения

21. Милано красный и черный жемчуг

Шестнадцатеричные коды: # BA1200, # 031927

Источник изображения

Добавление цветного всплеска

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

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

Изменение цвета

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

Чтобы начать, выполните следующие действия:

Шаг 1 — Нажмите кнопку «Изменить цвета»

Шаг 2 — Выберите предварительно разработанную цветовую палитру

Или нажмите кнопку «Выбрать собственные цвета»

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

• Цвет 1 на цветовом круге обычно коррелирует с основным цветом фона вашего сайта и цветом текста навигации
• Цвета 2–4 на цветовом круге влияют на цвета раздела
• Цвет 5 обычно соответствует цвету текста
• Цвет 6 обычно соответствует цвету ссылки

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

Шаг 3 — Когда вы закончите, нажмите Сохранить

Помните:

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

Цвета разделов

Варианты цвета фона сайтов Clover от Clover на Vimeo.

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

Шаг 1 — В расширенном режиме щелкните раздел, который нужно изменить, а затем щелкните значок шестеренки

Шаг 2 — Щелкните среднюю вкладку, чтобы просмотреть настройки цвета

Шаг 3 — Выберите цвет раздела и нажмите Сохранить

Шаг 4 — Просмотрите изменения и нажмите «Закрыть»

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

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

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

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

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

Почему цвет так важен?

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

Согласно инфографике Kissmetric, 85% покупателей основывают свое решение только на цвете. И согласно той же инфографике, правильное использование цвета приводит к увеличению узнаваемости бренда на 80%.

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

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

Теория цвета

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

1. Контрастность. С точки зрения непрофессионала, контраст — это разница между двумя цветами. Контрастность выполняет две функции в веб-дизайне: обеспечивает удобочитаемость, а также привлекает внимание зрителя к определенному элементу на странице.Если вы сомневаетесь, лучше всего выбрать очень светлый цвет для фона и очень темный цвет для самого текста.
2. Дополнение. Дополнительные цвета находятся напротив друг друга на цветовом круге. Например, дополнительный цвет красного — зеленый, а дополнительный цвет синего — оранжевый. При правильном использовании эти цвета могут акцентировать друг друга и составить очень эффектную цветовую схему.
3. Vibrancy. Это относится к общему настроению, определенному набором цветов: более яркие, теплые цвета (красный, оранжевый, желтый), как правило, заряжают нас энергией, в то время как более темные и холодные оттенки (зеленый, синий, фиолетовый) имеют тенденцию быть более расслабляющими и спокойными.

Значения цвета и культура

Цвета имеют разное значение в разных культурах. То, как мы воспринимаем определенный цвет, может быть не таким, как у людей из Японии или Ближнего Востока. При планировании веб-сайта важно понимать, кто ваша целевая аудитория и как эта культура относится к цветовым ассоциациям. В Web Designer Depot есть отличное кросс-культурное распределение цветов и их значений. Я суммировал их здесь:

Красный

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

Оранжевый

• Для Запада оранжевый цвет — это цвет урожая и осени.Традиционно в Соединенных Штатах оранжевый означает осенний сезон, начинающийся с сентября до Хэллоуина, а затем День Благодарения в конце ноября.
• В индийских культурах оранжевый считается священным цветом, а в Японии оранжевый символизирует отвагу и любовь.
• Наконец, на Ближнем Востоке оранжевый ассоциируется с трауром и утратой.

Желтый

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

Синий

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

Зеленый

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

фиолетовый

• В западных культурах, а также в большинстве восточных и азиатских культур фиолетовый является цветом королевской власти и ассоциируется с богатством и славой.
• С другой стороны, в Латинской Америке и Таиланде фиолетовый считается цветом траура и смерти.
• На Ближнем Востоке фиолетовый считается символом богатства.

розовый

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

Коричневый

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

Черный

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

Белый

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

Цвет и воронка преобразования

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

осведомленность

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

Проценты

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

Desire

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

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

Преобразование

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

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

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

Как оптимизировать цвет вашего сайта на WordPress

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

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

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

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

Estēe Lauder широко использует синий цвет на своем веб-сайте:

На веб-сайте Esteé Lauder в качестве основного цвета используется синий

В то время как Color Pop нацелен на ту же женскую аудиторию, но с фиолетовой цветовой схемой:

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

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

Сайт Jimmy Choo определенно ориентирован на женщин, но использует черно-белое изображение.

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

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

Dewalt нацелен на мужчин и использует черно-желтую цветовую схему.

Как определить лучший цвет для призыва к действию

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

Исследование HubSpot показывает, что их красная кнопка превзошла зеленую с увеличением коэффициента конверсии n на 21%.

Аналогичным образом, исследование Dmix показывает резкое увеличение конверсии, когда красная кнопка заменяет зеленую, что улучшает конверсию на 34%.

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

Лучшие плагины WordPress для увеличения вашего CRO

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

• Если вы работаете с формами и хотите убедиться, что они конвертируются, то контактные формы Forminator, опросы и построитель викторин должны стать вашей первой остановкой. Он легко настраивается и позволяет быстро и легко интегрироваться с различными сторонними сервисами, такими как Campaign Monitor, ActiveCampaign, Google Sheets, Zapier, Trello, MailChimp, Aweber и многими другими.

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

  Plus, Forminator абсолютно бесплатен на WordPress.org! Или получите полный набор плагинов WPMU DEV, услуг и поддержки для неограниченного количества сайтов, перейдя на профессиональную подписку.

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

  OptimizePress предлагает три различных тарифных пакета: пакет Core по цене 97 долларов для использования на 3 сайтах, пакет Publisher по цене 197 долларов США для использования на 10 сайтах и ​​пакет Pro по цене 297 долларов США для использования на 30 сайтах.

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

  Их премиальный план стоит единовременный платеж в размере 19 долларов.

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

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

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

• Q2W3 Fixed Widget — это плагин, который дает вам возможность пометить любой виджет как «фиксированный» на боковой панели. Это означает, что независимо от того, как далеко пользователь прокручивает страницу, виджет всегда будет оставаться видимым, что может значительно повысить коэффициент конверсии вашего самого важного призыва к действию.

  Этот плагин бесплатный.

Завершение

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

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

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

Бесплатное видео Почему 100 НЕ является идеальным показателем скорости загрузки страницы в Google (* 5 минут просмотра) Узнайте, как использовать Google PageSpeed ​​Insights, чтобы ставить реалистичные цели, повышать скорость сайта и почему стремиться к 100 баллам — НЕПРАВИЛЬНАЯ цель.

Теги: .

No related posts.