Цветовая гамма сайта воздействует на сознание пользователей так же сильно, как и другие его элементы (структура страниц, юзабилити, контент и т.д.). Если цвета подобраны гармонично, то человеку захочется задержаться на веб-сайте и продолжить ознакомление с ним, а если наоборот — ему захочется поскорее закрыть вкладку.
Конечно, тот или иной цвет по-разному отзывается в каждом человеке — здесь дело не только в личных предпочтениях, но и в накопленном опыте, череде жизненных обстоятельств, сформировавших триггеры на определенные цвета и оттенки. И все же теория цвета предлагает довольно универсальные формулы применения и сочетания оттенков, которые положительно откликнутся у большинства пользователей.
Теория цвета: основные понятия
Теория цвета объясняет принципы сочетания различных цветов, помогает предопределить реакцию человека на них. Теория цвета наиболее часто применяется среди дизайнеров, веб-дизайнеров, маркетологов и иных различных профессий, в работе которых необходимо сочетать цвета.
Рассмотрим основные понятия этой области знаний.
Цветовой круг
Иоганнес Иттен, швейцарский художник, в 20 веке создал инструмент для сочетания цветов — цветовой круг.
Основание инструмента — желтый, красный и синий. Треугольник, составленный из этих цветов, накрывают еще три треугольника — оранжевого, фиолетового и зеленого цветов, полученных смешением ключевых. В колесе мы видим более богатую палитру: помимо шести уже обозначенных цветов тут представлены оттенки, находящиеся между ними.
Иттен предложил несколько способов сочетания цветов в этом круге: аналогичные, комплементарные и триадные.
Сочетание аналогичных цветов — это комбинация соседствующих друг другу оттенков в круге. Дизайны с участием аналогичных цветов считаются приятными, спокойными.
Комплементарные цвета — это те, которые находятся друг напротив друга внутри круга. Созвучия противоположных цветов цепляют взгляд, считаются привлекающими внимание.
Если внутрь круга поместить равнобедренный или равносторонний треугольник, то на его вершинах будут располагаться триадные цвета. Треугольник можно поворачивать внутри, чтобы найти наиболее интересные сочетания из ключевых и промежуточных цветов.
Хотя Иттен придумывал цветовой круг как способ обучения будущих художников, инструмент быстро стал популярен и во многих других сферах: кинематограф, мода, графический дизайн, веб-дизайн и так далее. Также теория цвета применяется в маркетинге при формировании бренда.
Цветовой спектр
Если цветовой круг — это инструмент по сочетанию цветов, то цветовой спектр — основа, из которой были взяты все эти цвета. Создателем цветового спектра является Исаак Ньютон, через трехгранную стеклянную призму разложивший белый солнечный свет на разные цвета.
Принято считать, что основные цвета (красный, синий, желтый) — это первичные цвета. Дополнительные, или вторичные — те, которые образованы от них, т.е. оранжевый, фиолетовый и зеленый. Третичные цвета — промежуточные между первичными и вторичными.
Параметры цвета
Рассмотрим также основные параметры, которыми регулируются цвета:
- Оттенок (тон) определяет, какой цвет из спектра был выбран, помогает осознать близость к тем, из которых он получен (красно-фиолетовый, сине-зеленый и т.д.)
- Насыщенность выражает степень интенсивности цвета. С понижением насыщенности цвет становится более тусклым, а с повышением — наоборот, приобретает плотность.
- Яркость позволяет придавать цветам новые свойства и характеры, например, светло-красный и темно-красный воспринимаются совершенно по-разному.
Психология цвета
Некоторые оттенки имеют устоявшиеся ассоциации среди людей, хотя и следует сделать исключения на культурные различия и личный бэкграунд каждого человека. Синий цвет символизирует небо, и поэтому может восприниматься как спокойствие, безмятежность, величественность. Увидев в дизайне синие элементы, человек подсознательно почувствует надежность и гармонию. Однако, оттенки синего также могут вызвать ассоциации с грустью, отстраненностью, недоступностью.
Желтый в большинстве случаев символизирует радость, творчество, молодость. Ассоциациями желтый цвет тянется к солнечным дням, пропитанным счастьем и беззаботностью. Хотя в некоторых случаях оттенки желтого могут вызывать страх, ассоциации с болезнью и нищетой.
Зеленый — цвет роста и свежести. Зеленый часто напоминает растительность, дарующую кислород, и поэтому интерпретируется многими как цвет здоровья и чистоты. Реже оттенки зеленого могут наводить на мысль о слабости и скуке.
Фиолетовый — элегантность и изящество, часто его ассоциируют с богатством и роскошью. Но, как одни оттенки фиолетового могут пробуждать мысль о превосходстве и изысканности, так и другие — об угрюмости и закрытости.
Черный — очень сильный цвет, вызывающий противоречивые впечатления у людей. Он может напоминать о негативных и грустных вещах, навевать удручающие мысли, и при этом он может быть символом власти, силы и элегантности. Выразительность черного в сочетании со светлыми цветами может ассоциироваться с богатством, но избыток черного и его оттенков некоторым покажется депрессивным.
Белый — чистота, незапятнанность, недоступность. Так же, как и черный цвет, в удачных сочетаниях может завораживать, а в неудачных — напоминать больничные потолки, болезненную бледность, монотонность и безразличие.
К примеру, красный цвет в обществе воспринимается как символ энергии, страсти и силы, но в силу некоторых обстоятельств (например, тревожные кнопки, красный сигнал светофора, останавливающие красные дорожные знаки) он также может ощущаться как символ опасности и страха. Поэтому важно продумывать идею, при которой красный будет уместен и сработает на пользователе именно так, как вы это задумали.
Синий символизирует небо, и поэтому может восприниматься как спокойствие, безмятежность, величественность. Увидев в дизайне синие элементы, человек подсознательно почувствует надежность и гармонию. Однако, оттенки синего также могут вызвать ассоциации с грустью, отстраненностью, недоступностью.
Желтый в большинстве случаев символизирует радость, творчество, молодость. Ассоциациями желтый цвет тянется к солнечным дням, пропитанным счастьем и беззаботностью. Хотя в некоторых случаях оттенки желтого могут вызывать страх, ассоциации с болезнью и нищетой.
Зеленый — цвет роста и свежести. Зеленый часто напоминает растительность, дарующую кислород, и поэтому интерпретируется многими как цвет здоровья и чистоты. Реже оттенки зеленого могут наводить на мысль о слабости и скуке.
Фиолетовый — элегантность и изящество, часто его ассоциируют с богатством и роскошью. Но, как одни оттенки фиолетового могут пробуждать мысль о превосходстве и изысканности, так и другие — об угрюмости и закрытости.
Черный — очень сильный цвет, вызывающий противоречивые впечатления у людей. Он может напоминать о негативных и грустных вещах, навевать удручающие мысли, и при этом он может быть символом власти, силы и элегантности. Выразительность черного в сочетании со светлыми цветами может ассоциироваться с богатством, но избыток черного и его оттенков некоторым покажется депрессивным.
Белый — чистота, незапятнанность, недоступность. Так же, как и черный цвет, в удачных сочетаниях может завораживать, а в неудачных — напоминать больничные потолки, болезненную бледность, монотонность и безразличие.
Как подобрать цвета для дизайна сайта
Выбор цветовой гаммы для сайта может стать непростой задачей, но долговременное применение инструментов теории цвета в веб-дизайне позволяет оперировать универсальными советами.
1. Цветовая гамма должна отражать эмоции вашего потребителя
И вам вовсе не нужно угадывать, что будет испытывать ваш будущий клиент, ведь именно вы можете задать правильный вектор его эмоций. Подумайте о настроении вашего бренда, какое впечатление от него должно быть, какие эмоции вы хотели бы получить от вашего пользователя и к каким действиям они должны привести.
Например, кафе осознанного питания «Мы есть» в качестве основных в дизайне своего сайта выбрало зеленый и оранжевый цвета не случайно. Компания делает акцент на здоровом образе жизни, качестве ежедневного питания, естественности.
Цветовые созвучия, выбранные для дизайна веб-сайта кафе, отражают идеи компании.
2. При подборе цветовой гаммы для веб-сайта наиболее благоприятным будет применение трех цветов
Соотношение: доминантный (60% картинки), вторичный (30% картинки) и акцентный (10% картинки). Как правило, доминантный оттенок является фоновым, и поэтому не бросается в глаза. На фоне будут уместно смотреться приглушенные оттенки цветов. Вторичный используется для крупных графических элементов — инфографики, логотипа. Акцентный, как ясно из его названия, смотрится хорошо для выделения деталей сайта.
Например, один из наших проектов — landing-page картонно-тарного комбината «Я-картон». За основу взяты три цвета — светло-бежевый (фон), темно-коричневый (боковая панель) и оранжевый (акценты).
3. Выбранная цветовая гамма должна быть у всех элементов бренда
Сайт, мерч, рекламные баннеры, упаковки товара, интерьер оффлайн-магазинов, офиса и т.д. должны быть в единой цветовой гамме. Одинаковое сочетание цветов у всего, что связано с вашей компанией, будет формировать доверие потребителя к бренду, увеличивать узнаваемость.
Например, все элементы бренда компании «Сбербанк» известны и легко узнаваемы. Дизайн сайта (оттенки, шрифты), офисы, мерч — все в одном стиле и цветах из основной цветовой гаммы.
Теория цвета в дизайне описывает, какие созвучия цветов наиболее приятны глазу, какие смотрятся гармоничнее всего, дает советы о том, как правильно выбрать и чего следует избегать. Принципы, которые определялись годами, сейчас находят применение повсеместно и помогают оказывать необходимое влияние на потребителей во многих областях деятельности.
Разрабатывая дизайн веб-сайта, обращайтесь к этим принципам, пользуйтесь заготовленными формулами для сочетания разных цветов и оттенков, но не забывайте держать в голове идею вашего бизнеса, которую пользователь должен подсознательно понять через выбранную вами гамму. Цвет — ценный инструмент, при помощи которого вы можете задавать настроение ваших клиентов, пользуйтесь им.
Успехов!