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

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

Рассмотрим несколько базовых цветов в контексте веб-дизайна.

Зеленый цвет в веб дизайне

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

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

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

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

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

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

Синий цвет в веб дизайне

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

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

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

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

Черный цвет в веб дизайне

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

• Возвращается темная тема в дизайне сайтов (то есть темный фон — светлый шрифт), так как мир уже немного пресытился светлыми «воздушными» сайтами, которые были на пике популярности все прошлое десятилетие. Яркий пример — сайт Apple, который изначально был одним из начинателей «светлой» темы, сейчас поделил пространство своего сайта между черным и белым почти поровну: темные экраны и блоки чередуются с белыми.
• Возвращаются графичные черно-белые сайты, где акценты расставлены не с помощью ярких цветов, а с помощью контуров, игры света и тени, контраста между белым и черным. Как и черно-белые фотографии они зачастую воспринимаются как нечто более дизайнерское, продуманное и стильное или же делают отсылку к ретро, что также позитивно сказывается на образе компании, в случае если она подчеркивает преемственность традиций, давнюю историю и неизменный уровень качества.
• Черный начинает играть разными оттенками: антрацитовый, гранитово-серый, маренго, угольный, красно-черный, сине-черный, лакричный… черный далеко не так прост и безальтернативен и слегка изменив баланс цветов в ту или иною сторону можно получить множество новых его вариаций, который позволяют сделать сайт глубже и интереснее.

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

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

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

Подробнее про черный цвет в веб дизайне.

Подробнее про выбор между темной и светлой темой на сайте.

Красный цвет в веб дизайне

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

Видимо, из всей цветовой палитры красный был выделен именно вследствие своей яркости — он мгновенно выделяется из общего окружения, привлекает внимание. На цветовом круге он как раз противоположен спокойному зеленому, который наиболее комфортен для глаз. Это как визуальная команда «Стоп!» или «Внимание!» или «Смотри!». Далее — если продолжать смысловой ряд, то красное часто будет или чем-то опасным, ядовитым, или, напротив — вкусным и желанным. То есть увидев нечто красное нужно будет затем сразу действовать: беги! Прыгай! Хватай!

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

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

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

Голубой цвет в веб дизайне

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

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

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

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

Фиолетовый цвет в веб дизайне

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

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

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

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

Оранжевый цвет в веб дизайне

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

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

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

______

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

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

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

Читайте также:

Самые популярные цвета в этом году в России и мире

Что такое институт цвета Pantone и зачем нужно знать главный цвет года?

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