Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Дизайн

12 основных цветов и примеры их восприятия пользователями

13 октября 2018 2 комментария

Статья об эмоциональном восприятии цвета web пользователями, публикация представлена в виде краткого руководства с наглядными примерами сайтов. Материал рассматривает:

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

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

Оттенки одного и того цвета воспринимаются нами по-разному

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

Читайте также:  30+ примеров и идей оформления кнопок целевого действия

1. Красный

Влияние цвета на пользователя сайта - Playtika

Оттенок красного воспринимается как непринужденный, веселый и стимулирующий 

Увлеченность, решительность и значимость

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

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

У игровой компании Playtika мощная лендинговая страница. Лого с гепардом создает ощущение флагмана индустрии, смягченное мультяшностью стиля с человечной улыбкой.

2. Оранжевый

Примеры восприятия цветов пользователями сайтов

Epic применяет оранжевый в качестве подсветки

Энергичность, веселье и непринужденность, дешевизна  

Подпитываемый воздействием красного спектра, оранжевый оживляет дизайн сайта, но в более мягкой степени – без тяжестей красного. Цвет игровой, импульсивный. Кто-то считает, что оранжевый порождает поспешность, соблазняет посетителя поддаться порыву и, к примеру, совершить неожиданные покупки.

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

3. Желтый

Символика желтого цвета на сайте Post-it

Желтым можно повысить активность или раздражение

Радость, доброжелательность, предупреждение

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

Доминирующий в палитре сайта Post-it ярко желтый цвет подчеркивает сам продукт. Побуждает пользователей к активным действиям и делает бренд узнаваемым.

4. Зеленый

 Психология восприятие зеленого цвета пользователями сайта Sanhok

Зеленая гамма подчеркивает жажду к приключениям   

Натуральность, стабильность, благополучие

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

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

Читайте также:  Сочетание цветов в веб-дизайне — зеленые сайты

5. Синий

 Особенности восприятия пользователями синего цвета на сайте Evolve Wealth

Синие оттенки в палитре сайта финансиста повышают доверие

Спокойствие, достоверность, приглашение

Наиболее популярный цвет в веб-дизайне и тому есть причина. Синий – это цвет доверия. Внушая спокойствие и безмятежность, он эффективен там, где важна надежность с безопасностью (применяют банковские сайты citibank.ru, chase.com и barclays.co.uk). Успокаивающий эффект делает цвет дружелюбным и гостеприимным, поэтому оттенки синего присутствуют в дизайне Фейсбука и Твиттера.

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

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

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

6. Фиолетовый

Фиолетовый эмоционально связывает с благосостоянием и роскошью

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

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

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

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

7. Розовый

Розовый поднимает настроение посетителям сайта аренды и проката

Женственность, юность, невинность

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

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

Читайте также:  Лучшие персональные сайты фрилансеров: 33 женских дизайна

8. Коричневый

Очень необычное применение коричневого на сайте B&O Play  

Прочность, практичность, деревенская простоватость

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

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

9. Черный

Воздействие черного цвета в дизайн Cartelle довольно ощутимо

Могущество, изысканность, продвинутость

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

Черный в дизайне Cartelle, бесспорно выделяет главную страницу креативного агенстского сайта.

Читайте также:  Подборка черно-белых сайтов и интернет магазинов

10. Белый

Кремово-белые фоны акцентируют внимание на товаре

Опрятность, благородность, благополучие

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

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

Кремово-белый на сайте обувной компании ETQ подобран удачно, он направляет внимание целевой аудитории на продукцию.

11. Серый

Деликатно выглядят серые тона на мебельном сайте итальянского бренда

Нейтральность, официальность, мрачность

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

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

Хорошо применяют серый цвет на итальянском мебельном сайте Galvan Mobili, потому как его даже не заметно. Серый бэкграунд добавляет сайту профессиональный вид, заставляет обратить внимание на изображения и красный логотип.

12. Бежевый

Восприятие бежевого цвета пользователями сайта Beige Alain Ducasse

Дизайн Beige воздействует на аудиторию успокаивающе     

Обостряет эффектность других цветов

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

Миссия бежевого цвета на японском сайте ресторана Beige Alain Ducasse – поддерживать спокойную и комфортную атмосферу, обеспечивая работу продающих элементов сайта.

Читайте также:  Как правильно оформить главную страницу: 42 сайта в пример