Цвета в веб дизайне: Цвет // Дизайн в цифровой среде

Цвет в веб-дизайне и его влияние на целевую аудиторию — Алиса Веб-дизайнер на vc.ru

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

736 просмотров

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

Красный цвет

Эмоции: возбуждение, опасность, аппетит, стресс.

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

Минусы: при использовании в больших количествах вызывает переутомление и негативные эмоции.

Применение: только в качестве акцента и в небольшом количестве.

Примеры:

Best Horror Scenes

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

Сайт Университета Чикаго

А вот применение красного в качестве акцентного цвета. Он совсем не давит и воспринимается позитивно. 

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

Эмоции: уверенность, успех, общительность.

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

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

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

Примеры:

Магазины Home Depot

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

Сайт Фанты

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

Желтый цвет

Эмоции: счастье, удовлетворение, гармония, творчество.

Плюсы: цвет в основе своей “положительный”. Ассоциируется с интеллектом и какой-то творческой деятельностью.

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

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

Примеры:

Приложение SnapChat

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

Банк Тинькофф

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

Зеленый цвет

Эмоции: спокойствие, умиротворение, гармония с природой.

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

Минусы: если цвет “грязный” — ассоциируется с плесенью, затхлостью, грязью.

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

Примеры:

Пиво Carlsberg

Довольно интересный ход с наполнением бокала отменным пенным напитком. И зеленый цвет здесь нисколько не вредит)

Консалтинговая компания Altermind

Темно-изумрудный оттенок намекает нам, что компания ориентирована на VIP-клиентов.

Компания по переработке отходов Recycl8

Название+зеленый цвет — 100% попадание в цель.

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

Синий цвет

Эмоции: доверие, мир, богатство, профессионализм, свежесть.

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

Минусы: при уходе в холодные оттенки — вызывает чувство отчуждения, ощущения хладнокровности.

Применение: чаще можно встретить в медицинской сфере или в люксовых брендах. Важно сохранять цвет “теплым”.

Примеры:

Зубная щетка Орал-Би

Яркий цвет, но при этом не раздражающий глаз. Удивительное свойство синего.

Школа английского языка Skyeng

Цвет супер живой, немного даже детский — как бы говорит нам: «Эй, не бойся, с нами всё легко и просто. Никаких занудных уроков.»

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

Эмоции: царственность, амбиции, мистика, богатство.

Плюсы: яркий цвет, привлекает внимание.

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

Применение: только в качестве акцентного цвета.

Примеры:

Студия диджитал дизайна

Неожиданно хорошо и свежо. По сути, это не просто акцентный цвет —  он здесь занимает почти 90% процентов экрана. И не раздражает, смотри-ка.)

Служба доставки Fedex

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

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

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

Плюсы: цвет шоколада и кофе. Ассоциируется со стариной, книгами и музеями.

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

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

Примеры:

Сайт Мерседес-Бенц Россия

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

Интернет магазин Golden Triangle

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

Розовый цвет

Эмоции: инфантильность, сладость, наивность, глупость.

Плюсы: снижает уровень агрессии. Привлекает женскую аудиторию.

Минусы: может выглядеть нелепо, если используется вне контекста.

Применение: сайты парфюмерных компаний, женские клубы, детские товары.

Примеры:

Магазин нижнего белья Victoria’s Secret

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

Это значит что? Значит, фирменный стиль хорошо продуман.

Люксовый бренд одежды из Лондона Pink

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

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

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

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

See you next week!)

*Все права принадлежат правообладателям.

Мой Телеграм

особенности использования и основные тренды 2020 ᐉ Веб-студия Brainlab

Содержание:

• Почему важна цветовая схема сайта
• Какие цвета привлекают наибольшее внимание
• 7 шагов для создания собственной цветовой схемы сайта
• Ищем свой основной цвет
• Определяемся с количеством цветов
• Используем вторичные цвета
• Не забываем о нейтральных цветах
• Нюансы сочетания цветов для сайта
• Цветовое кольцо Ньютона: 7 схем для вашего сайта
• Пару слов о цветовых моделях
• А если непонятно?
• Эмоции цвета в web-дизайне: 11 распространенных цветов
• Красный
• Желтый
• Оранжевый
• Зеленый
• Синий
• Фиолетовый
• Коричневый
• Черный
• Белый
• Серый
• Розовый
• Заключительное примечание

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

Почему важна цветовая схема сайта

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

Для справки:

• Люди принимают решение о покупке или дальнейшем изучении ресурса в течение 90 секунд первого взаимодействия.
• Именно web-цвета оказывают от 60 до 90% влияния на принятие решения о сотрудничестве.
• Яркие картинки запоминаются лучше черно-белых.
• Мужчины и женщины видят картинки по-разному – ваша задача заинтересовать и тех, и других.
• Синий – наиболее популярный, нейтральный и универсальный оттенок.

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

Какие цвета привлекают наибольшее внимание

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

1. Цвета, которые привлекают внимание.
2. Нейтральные тона.

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

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

7 шагов для создания собственной цветовой схемы сайта

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

Ищем свой основной цвет

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

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

Критерий оценки	Рекомендации
Фирменный стиль	Если фирменный стиль уже есть, оформляйте ресурс в соответствующей цветовой гамме. Не забывайте о взаимосочетаемости разных оттенков. Регулируйте интенсивность, жесткость, прочие параметры.
Аудитория (ЦА)	Мужчинам больше нравятся темные или нейтральные тона, женщины лучше реагируют на сочные, нежные оттенки. Для детей оптимально выбирать яркую цветовую гамму.
Тематика	Соответствие тематике обязательно. Примеры: для еды выбирают зеленый, для парфюмерии сиреневый.

Определяемся с количеством цветов

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

• 60% площади страниц должно приходиться на основной оттенок;
• 30% отводят для вторичных.

Под вторичными подразумевают акцентные и другие оттенки.

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

Используем вторичные цвета

Подбор цвета для сайта делайте с применением различных цветовых теорий и инструментов. Основные:

• Color wheel;
• Color Space.

Работать «на глаз» тоже можно, но результаты хорошими обычно получаются только у гениев. Хотя почему бы не попробовать?

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

Не забываем о нейтральных цветах

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

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

Нюансы сочетания цветов для сайта

Для получения эффектного дизайна сайта нужно учесть 3 момента:

• Основной оттенок.
• Второстепенные тона.
• Правильное сочетание основного и второстепенного цветов, а также грамотный расчет их пропорций.

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

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

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

Цветовое кольцо Ньютона: 7 схем для вашего сайта

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

1. Монохроматическая – главный цвет один, дополнительные получают из его оттенков (регулируют светосилу, насыщенность).
2. Триада – дизайнер подбирает тройку равноудаленных друг от друга цветов.
3. Прямоугольник – в игру вступает набор из 4 цветов, принцип подбора – контрастный.
4. Комплементарная – останавливаются на паре контрастных тонов, дополняют их производными оттенками.
5. Сплит – аналог комплементарной схемы, но один контрастный оттенок будет заменен на пару схожих из соседних секторов.
6. Аналоговая – нужно выбрать 3 оттенка из соседних сегментов, один будет основным, остальные дополнительными.
7. Квадрат – схема аналогична предыдущей, но все оттенки будут равноудаленными друг от друга.

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

Пару слов о цветовых моделях

Помимо схем сочетания цветов в дизайне сайта, нужно учитывать известные модели. Это:

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

А если непонятно?

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

Важно! Эмоциональное (подсознательное) и визуальное воздействие одинаково важны. Проработаете оба момента – получите максимум посетителей.

Эмоции цвета в web-дизайне: 11 распространенных цветов

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

Красный

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

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

Желтый

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

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

Оранжевый

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

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

Зеленый

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

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

Синий

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

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

Фиолетовый

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

Фиолет нравится не всем – у него своя аудитория. Любят оттенок женщины.

Коричневый

Цвет стабильности, земных ценностей, финансовых благ, энергии земли. Может иметь разную интенсивность.

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

Черный

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

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

Белый

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

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

Серый

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

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

Розовый

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

Обилие розового нежелательно. Для «разбавления» можно использовать белый.

Заключительное примечание

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

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

  by Kyle Prinsloo       Последнее обновление 1 октября 2018 г.

«Цвет — это сила, которая напрямую влияет на душу».

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

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

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

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

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

Эта статья состоит из трех основных разделов:

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

 

 

Цвета Повышают узнаваемость бренда

Не знаете, что такое «бренд»? Вот хорошее резюме:

“ Бренд – это общая сумма того, как кто-то воспринимает конкретную организацию. Брендинг – это формирование этого восприятия. ”

Эшли Фридлайн

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

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

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

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

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

Цвет может повысить узнаваемость бренда на 80 %
(исследование Университета Лойолы)

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

Давайте попробуем простой тест ☺

Я ТОЛЬКО показываю вам цвета. Я хочу, чтобы вы подумали о бренде, использующем эти цвета.

Вот он:

Что это за бренд/бизнес?

Есть ответ?

…

..

.

Если бы вы догадались о Google, вы бы присоединились к 91% людей, которые сказали то же самое.

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

На протяжении всей карьеры веб-разработчика у вас будет два типа клиентов:

Тип 1:  Те, кто уже определился с цветовой схемой

Тип 2:  Те, кому все еще нужна помощь с их цветами

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

Веб-сайт Coca-Cola является примером правильной согласованности цветов.

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

Просматривая сайт, зрители не забудут, что Вы на сайте Coca-Cola из-за красных цветов.

BlueHost — еще один пример:

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

И последнее, но не менее важное: вот пример зеленого цвета от Backlinko:

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

Идем дальше:

Что делать, если вы чувствуете, что ваш клиент использует неправильный цвет?

Что, если вы считаете, что выбор похоронной компанией красного цвета передает неверный посыл?

Здесь вы можете и должны повысить ценность вашего клиента.

Такие вопросы, как:

• Почему вы выбрали текущий фирменный цвет?
• Как вы к этому относитесь?
• Получали ли вы от клиентов отзывы об их отношении к этому цвету?
• Какой образ вы бы хотели создать для своей компании?

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

 

Цвета выделяют определенные элементы

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

Вы делаете это с помощью цветов.

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

 

Кнопки с призывом к действию

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

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

Зачем столько хлопот?

Потому что лучшая кнопка CTA означает больше бизнеса.

Вот пример CTA-кнопки Divi:

Беглый взгляд, и вы увидите, что основной CTA здесь — зеленая кнопка.

Основная кнопка зеленая не случайно.

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

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

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

Это приводит меня к большому вопросу:

Какой цвет CTA лучше всего использовать?

Суть в том, что его нет.

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

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

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

Тест длился несколько дней и насчитывал более 2000 посещений субъекта.

Результаты : Красная кнопка получила на 21% больше кликов, чем зеленая.

Значит ли это, что красный цвет конвертируется лучше, чем зеленый?

Не обязательно.

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

Возможно, посетителям Performable понравился красный цвет.

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

A/B-тестирование — лучший способ найти «лучший» цвет кнопки CTA для конкретного веб-сайта или веб-страницы.

 

Подразделы

Подразделы — это важные части веб-страницы, на которые вы хотите обратить внимание.

Возвращаясь к Backlinko, взгляните на эту боковую панель:

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

 

Цвета влияют на то, как люди относятся к вашему сайту

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

Это основная заповедь психологии цвета .

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

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

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

Когда люди заходят на ваш сайт, вы хотите, чтобы они:

• Доверяли сайту/бизнесу
• Будьте достаточно убеждены, чтобы остаться на сайте
• Убежден выполнить желаемое действие (CTA)

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

Цвета влияют на то, как люди относятся к веб-сайту. Вы создаете эффективные веб-сайты?

 Напишите в Твиттере

 

Основные цвета и их влияние на восприятие

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

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

Я просто сообщаю вам об основах.

 

Красный: цвет силы и безотлагательности

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

Оттенки красного

Ярко-красный: энергичный, волнующий; отлично подходит для продуктов питания, напитков, развлечений, приключенческих компаний.

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

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

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

 

Синий: оттенок доверия

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

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

Оттенки синего

Голубой: творчество; отлично подходит для технологических и творческих компаний.

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

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

 

Зеленый: деньги, равновесие и природа

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

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

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

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

Желтый: творческий, игривый, уникальный

Не случайно веселых людей часто называют «солнечными».

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

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

Желтый также отлично подходит для дифференциации брендов как креативных, нестандартных типов.

Оранжевый: срочность, надежность, уверенность

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

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

Фиолетовый: изысканность, успех, воображение

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

Оттенки фиолетового

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

Темно-фиолетовый: серьезный, мрачный, таинственный, роскошный.

Черный: яркий, стильный, необычный

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

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

 

Белый: дружелюбный, утонченный, стильный

Если сомневаетесь, используйте белый цвет.

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

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

 

Вечные советы по использованию цветов в веб-дизайне

Пустое пространство НЕ Wasted Space

Пустое пространство — это все, что остается пустым на веб-сайте.

Он не обязательно должен быть белого цвета 🙂

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

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

Или, может быть, вы просто так запутались в том, чем занимается бизнес?

Это именно то, с чем помогает пустое пространство.

Мне нравится, как SquareSpace использует пустое пространство:

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

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

Заметили огромное количество пробелов?

Так задумано.

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

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

Преимущества использования пробелов:

• Правильное использование пробелов на полях и между строками абзацев повышает понимание почти на 20% (Human Factors International).
• Он позволяет вам разделять тексты, изображения и разделы, чтобы вы могли более организованно представлять отдельные идеи/концепции.
• Пустое пространство создает баланс. Слишком много пустого пространства создает впечатление, что вашему сайту не хватает контента, но его отсутствие приводит к дезорганизации и путанице.
• Позволяет выделить CTA, создавая высокий уровень контраста.

 

Обеспечьте контрастность, чтобы сделать ваш сайт привлекательным

Взгляните на этот веб-сайт на мгновение:

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

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

Вот еще один:

Строка вверху — «Запросить личную консультацию» — плохо видна, абзац внизу тоже плохо читается.

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

 

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

Цветовой круг — это визуальное представление соотношения цветов.

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

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

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

—

Вот краткое изложение того, что мы обсуждали:

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

 

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

Если вам интересно узнать об этом подробнее, ознакомьтесь с моей новой электронной книгой здесь.

Дайте мне знать, если у вас возникнут вопросы ☺

 

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

Бесплатный 3-дневный курс по электронной почте с практическими шагами, чтобы получать больше

Теория цвета в веб-дизайне: Гармоничные цвета » raidboxes®

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

Теория цвета: порядок цветов

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

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

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

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

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

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

«*» указывает на обязательные поля

Первичные, вторичные и третичные цвета

Наши экраны обычно основаны на RGB (красный, зеленый, синий) — также известной как Аддитивная цветовая система . Как правило, все, что отражает свет, основано на аддитивной цветовой системе. В этой структуре мы используем основные цвета в качестве отправной точки. Белый создается путем объединения всех цветов, а черный представляет собой отсутствие цветов.

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

Цветовой круг описывает и разделяет цвета.

Оттенки, тона, оттенки и цветность

Оттенки описывает несмешанные шесть первичных и вторичных цветов:

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

Температура и контраст

Температура и контраст цветов

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

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

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

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

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

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

Основные цвета контрастируют друг с другом.

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

8 принципов гармоничных цветовых палитр

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

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

Дополнительные цвета в цветовом круге

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

Триадная комбинация

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

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

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

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

Раздельно-дополнительные цвета

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

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

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

Сплит-дополнительные цвета в цветовом кругеСплит-дополнительные цвета на веб-сайте

Квадратная цветовая комбинация

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

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

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

Квадратное цветовое сочетание в цветовом кругеКвадратное цветовое сочетание на сайте

Квадратное разделение дополнительных цветов

Состоит из двух соседних цветов и их дополнительных цветов.

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

Аналог

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

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

Аналоговые цветовые схемы в цветовом кругеАналоговые цветовые схемы на сайте

Монохромный

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

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

Монохромные цвета на сайте

Цветность и оттенок

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

Цветность и оттенок важны в веб-дизайне.

Теория цвета Вдохновение и инструменты

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

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

• Eggradients предоставляет ряд идей для градиентов и стилей CSS, которые к ним подходят.