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

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

Цветовые схемы предопределяют то, какой фон, графика, цвет текста, заголовков, кнопок будет использоваться на веб-ресурсе. Также крайне важно внешнее оформление кнопок, побуждающих к действию. Они мотивируют посетителя что-то сделать, купить, позвонить, оставить заявку и т.д. Их цвет и то, как он выделяется на общем фоне дизайна, прямо влияет на мотивацию. Интересно, что в веб-дизайне и оформлении сайтов сегодня растет популярность использования цветных «линз» - фильтровНабор формул, в соответствии с которыми осуществляется формирование выдачи и ранжирование веб-страниц. Основная задача алгоритма ПС - продемонстрироватьПерейти к словарю терминов , предполагающих наложение цвета на фото и картинкиAlt (в русской транслитерации "альт") - это атрибут тега < img >, используемый для описания изображений. В содержании этого атрибута прописывается описание,Перейти к словарю терминов . Выбранная цветовая гамма при этом способна эмоционально обогатить изображения.

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

Ярче и насыщеннее

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

рост разрешающей способности современных дисплеев и качества их цветопередачи; повышение спроса на так называемый «плоский» дизайн (FlatCost per click или CPC (в переводе с английского - цена за клик) - стоимость, которую рекламодатель отдает за нажатие интернет-пользователем на ссылку объявления или…Перейти к словарю терминов Design), с акцентом на минимализм, простоту и утонченность.

Даже дисплеи мобильных устройств и различные используемые их производителями технологии обеспечивают прекрасную цветопередачу, а это возможность и для веб-дизайна делать сайты более насыщенными, яркими с большей палитрой тонов и полутонов. Плоский дизайн также ориентирован на яркость и широкую цветовую палитру (примеры можно посмотреть тут - http://www.materialui.co/).

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

Как действуют различные цвета сайта

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

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

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

Цвета сайта vs его целевая аудитория

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

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

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

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

Универсально работающих правил нет

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

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