Как создать эмоцию с помощью цвета

Цвет — это очень важно. Как говорят по одежке встречают — и для веб-дизайна эта одежка и есть цвет.

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

Красный

Опасность, внимание, страсть

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

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

Netflix и YouTube используют красный в качестве основного цвета.

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

Привлекающая внимание кнопка “удалить” имеет более высокий контраст, чем “отмена”

Кроме того, красный — как самый теплый цвет — ассоциируется с жарой.

Красный используется для отображения режима отопления.

Оранжевый

Уверенность, энергия, оптимизм

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

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

Search CTA button on Hipmunk site

Желтый

Внимание, счастье

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

Желтые оттенки энергичны и жизнерадостны, но более яркие тона часто используются для предупреждающих знаков.

Breitling использует желтый, чтобы привлечь внимание к кнопке CTA

:tknsq с черным — самое яркое и контрастное сочетание, привлекает к себе много внимания. Очень часто такое сочетание используется в такси.

Источник: hlvticons

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

Зеленый

Рост, успех, природа

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

Organic Food используют большое количество зеленого в своем дизайне.

Обратите внимание на насыщенность цвета.

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

Зеленая кнопка на голубом фоне сразу бросается в глаза

Синий

Доверия, комфорт, отдых

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

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

Calm app use light blue as a primary color.

Очень многие социальные сети используют синий как основной цвет.

Фиолетовый

Роскошь, романтика, креатив

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

Люксовые бренды используют фиолетовый цвет

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

Розовый

Женственность, невинность, молодость

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

Источник: Dribbble

Розовый не всегда означает женственный. В действительности, розовый очень заезженный цвет и может легко раздражать пользователей.

Коричневый

Консерватизм, земля, стабильность

Джентельмены из Лондона не носят одежду коричневого цвета в городе. Коричневый сложный цвет и на большинстве сайтов выглядит убого, но если дизайнер сумеет применить цвет — будет выглядеть — прекрасно. Он генерирует простоватый, старомодный вид, идеально подходит для органических продуктов, шоколада. Из-за ассоциации с деревом передает ощущение стабильности и долговечности.

В общем, ненасыщенный коричневый цвет хорош для меню, панелей и фонов

Black

Формальность, Власть, Изощренность

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

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

SCOTCH & SODA

Белый

Свежесть, Чистота, Здоровье

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

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

Серый

Нейтральность

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

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

Dropbox is a good example of grey color usage.

Серый+яркий акцентный цвет всегда создает сильный контраст и позволяет выделить нужные элементы.

Светло-серый цвет лучше всего работает для кнопок в неактивном состоянии.

Задизебленые кнопки

Выводы

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

A / B тестирование конверсии в зависимости от цвета
Show your support

Clapping shows how much you appreciated Anastasia Purdes’s story.