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

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

• сочетающиеся между собой
• вызывающие необходимый психологический эффект
• учитывающие особенности посетителя сайта

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

• Контраст (цвет, противоположный данному, контрастен ему).
• Дополнение (цвет, идущий следом за ним или перед ним, дополняет его).
• Резонанс (явление наиболее интересное, так как взаимодействует с человеческой психикой. Так, энергичным человек становится, когда встречает красный, оранжевый, желтый. Успокаивается – при встрече с фиолетовым, зеленым и голубым).

Как мы видим, возможность влиять на настроение человека цветом заложена в нем изначально.

Как использовать температуру цвета?

Тона отличаются по температуре и бывают:

• Теплые (желтые, оранжевые, коричневые, желто-зеленые и красно-оранжевые);
• Переходные (фиолетовые, пурпурные);
• Холодные (синие, зеленые, розовые, фиолетовые, сине-зеленые, пурпурные и сине-красные);
• Нейтральные.

Принцип работы с тонами прост:

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

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

Как же разные цвета лендингов влияют на эмоции клиентов?

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

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

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

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

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

Зеленый напрямую ассоциируется с отдыхом и настраивает на нужный лад.

Здесь зеленый наводит на мысль о безопасности.

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

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

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

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

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

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

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

Этот стиль достаточно лаконичен. Классика – белое на черном.

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

Белый в этом случае передает простоту в обращении.

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

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

Каждому пользователю - свой цвет

1. Импульсивные покупатели предпочитают такие же неспокойные цвета: красный в сочетании с оранжевым, черный и королевский синий. Это цветовая гамма ресторанов быстрого питания, больших скидок и торговых центров.
2. Экономные люди выбирают темно-синий и бирюзовый. О чем прекрасно осведомлены директора банков и магазинов.
3. Консервативные клиенты выбирают те цвета, что можно встретить среди одежды (девушки - розовое, парни - синее, офисные работники - серое, белое, черное и т.д.).

Как выстроить "цветовой диалог" с клиентом:

1. Используйте первые секунды с целью расслабить человека и заставить его чувствовать себя как дома с помощью теплых “некричащих” оттенков.
2. Знайте меру в количестве цветов на страницу. 2-3 – в самый раз.
3. Придерживайтесь выбранного цветового решения и не сменяйте цвета хаотично. Это особенно важно при работе с фоном.
4. В цветовой схеме сайта компании используйте цветовую палитру логотипа.
5. Помните и про содержимое тоже. Не гонитесь за гениальными цветовыми решениями в ущерб содержимому сайта;
6. При расставлении акцентов пользуйтесь одним оттенком, иначе все будет выглядеть слишком пестро и клиент не сможет сосредоточиться на главном.
7. Если не знаете, от чего отталкиваться, начните либо с серого, либо с синего. Серый нейтрален. Синий сглаживает острые углы, успокаивает.

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