Главное Свежее Вакансии   Проекты
3 041 4 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

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

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

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

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

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

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

b_594bb0a551e95.jpg

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

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

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

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

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

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

При нажатии на каждый нижний скриншот для подробного ознакомления откроется ссылка на шаблон в соседнем окне.

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

b_594b836b22b59.jpg

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

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

b_594b846699205.jpg

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

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

b_594b84bed4c43.jpg

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

b_594b84f6e2a97.jpg

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

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

b_594b8544c3a3d.jpg

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

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

b_594b85a637f22.jpg

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

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

b_594b85f2276c7.jpg

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

b_594b8632e8f51.jpg

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

b_594b866f6f365.jpg

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

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

b_594b939a42f99.jpg

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

b_594b93d11f821.jpg

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

b_594b9400eba5b.jpg

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

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

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

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

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

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

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
MTT Forum
Главное бизнес-событие осени
Павел Коркодинов
Постарались найти самые цитируемые материалы по этой теме. Ссылки
https://uxplanet.org/psychology-in-design-principles-helping-to-understand-users-10bcf122f4b0 и https://www.nickkolenda.com/color-psychology/
На вторую статью есть перевод
http://smorovoz.ru/articles/znacheniya-cveta-psikhologiya-tsveta-v-marketinge.html
Ответить
Михаил Лялин
1. сначала сделайте черно-белый прототип
2. из-за дефектов людей никогда не используйте цвет как единственный критерий выбора
3. есть сервисы по подбору цветовых схем
Ответить
Sergey Khrushch
Каких дефектов?
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.