В прошлых статьях мы уже разобрали все основные составляющие хорошего сайта. Пришло время поговорить о, так сказать, тонкостях и важных нюансах веб-разработки.
📛Но для начала небольшой тест. Скажите, какой сайт бы вы выбрали: https://doc-plus.ru/ или https://www.endokrinklinika.ru/biopsy?
👥 Большинство, я думаю, выбрали бы зелёный цвет, потому что он ассоциируется со здоровьем, природой, пользой. На самом деле, разработчики сайтов, рекламы, одежды очень часто пользуются приемом по подбору правильных цветов. Это помогает увеличить и интерес к продукту, и вызвать нужные ассоциации у пользователя. Но обо всем по порядку.
🎨 Цвет вызывает эмоции и ощущения. Согласно исследованиям ученых Университета Британской Колумбии — 80% цветовой передачи воспринимается нервной системой, а лишь 20% органами зрения.
👩💻 Знание психологии цвета — мощный инструмент в руках дизайнера или маркетолога. Цвет в дизайне — понятие субъективное. То, что у одного человека вызовет восторг, у другого — агрессию. Поэтому важно знать факторы, которые влияют на восприятие:
* Пол и возраст;
* Качество зрения;
* Гормональные особенности;
* Гендерные и культурные различия.
📍 ТЕОРИЯ ЦВЕТА
Теме цвета можно посвятить целую книгу, так что мы не будем брать её целиком, а ограничимся только полезной информацией, которой можно воспользоваться при разработке дизайна интерфейса. Если вы хотите именно глубже узнать о соотношении всей цветовой гаммы, то советую книгу «О цвете» Теренса Конрана.
🖍 Контраст
У каждого оттенка есть противоположность, так сказать, его «заклятый враг», который составляет самый большой контраст с этим цветом. Чтобы найти такой цвет, вы можете использовать цветовой круг. Просто выберите цвет на противоположной стороне круга.
✅ Этот приём можно использовать, когда на сайте вы хотите показать разницу обычной цены от акционной.
❌ Но не советую вам злоупотреблять игрой с контрастом. Это достаточно «тяжело» воспринимается пользователем.
🖍 Дополнение
Эти цвета не всегда конфликтуют между собой. Дополняющие цвета подчёркивают друг друга, в отличие от контрастных. В цветовом круге такие цвета идут друг за другом, например, дополняющие цвета лилового — голубой и розовый.
✅ Очень хорошо подойдёт этот приём, если вы хотите разбавить основную цветовую гамму. Например, его можно использовать для элементов декора.
❌ Следите за тем, чтобы у основных и дополняющих их цветов была четкая иерархия. Не стоит делать равновесные по значимости элементы разных цветов, иначе пользователь может запутаться.
📍 ЭМОЦИОНАЛЬНОЕ ВОСПРИЯТИЕ ЦВЕТА
Переходим к самому главному в этой статье. Как же определить, где какой цвет поставить? Подойдёт ли он задумке вашего сайта? Будет ли отражать ценность продукта? Давайте разберёмся на реальных примерах цветов.
🔴 Красный
Эмоции: власть, важность, молодость, энергия, сенсация.
✅ Наиболее стимулирующий цвет, настолько энергетически заряженный, что может даже увеличить кровяное давление. Красный цвет представляет страсть и силу, он больше остальных цветов привлекает внимание, поэтому часто используется для важных предупреждений и объявлений.
Например, сайт, разработанный нами https://www.medsluzhba-spb.ru/, для медицинской службы. Как вы видите, красный цвет здесь играет привлечение внимания, а также ассоциируется с самой символикой машин медицинской помощи.
❓Но этот цвет может работать и против вас, поскольку он может вызывать агрессию или сверхстимуляцию. Если вы хотите создать более расслабляющую атмосферу, старайтесь использовать красный умеренно и выбирайте более светлые оттенки красного.
🟠Оранжевый
Эмоции и ассоциации: дружелюбие, энергия, уникальность, детство.
✅ Как самый спокойный из тёплых тонов, оранжевый способен вызывать целый спектр разносторонних эмоций. В качестве основного цвета он может вызывать интерес и бодрить, а в качестве вторичного — сохранять эти свойства, но в более ненавязчивой манере. Цвет ассоциируется с творчеством, при этом сохраняется ощущение знакомого бренда.
Например, наш сайт для детского лагеря https://www.talantograd.ru/. Как вы можете заметить, мы сыграли здесь именно на «дружелюбии» оранжевого цвета. Кроме того, он даёт ощущение теплоты, что дополнительно располагает потенциальных клиентов выбрать именно этот лагерь.
🟡 Желтый
Эмоции и ассоциации: счастье, энтузиазм, архаичность (более тёмные тона).
✅ Это один из самых универсальных цветов, а эмоции, которые он вызывает, в большей степени зависят от оттенка.
Яркий жёлтый цвет добавляет энергии, но без остроты и резкости, которая присутствует в красном. Средние оттенки жёлтого цвета вызывают ощущение комфорта, хотя всё ещё бодрят. Тёмные оттенки (включая золотой) обеспечивают ощущение старины, наполняют пространство безвременьем, мудростью и любопытством.
❌ Но не стоит делать желтый основных цветом для сайта, а также цветом текста. Поскольку желтый достаточно сложно воспринимается глазом, лучше использовать его для каких-то элементов дизайна.
🟢 Зелёный
Эмоции и ассоциации: рост, стабильность, темы финансов, темы окружающей среды и экологии, темы здоровья.
✅ Зелёный цвет — это мост между тёплыми и холодными оттенками, хотя больше склоняется к холодным. Это значит, что зелёный обладает расслабляющим действием синего цвета, но также имеет и толику энергичности от жёлтого. В результате этого он создаёт очень сбалансированную и стабильную атмосферу.
Например, наш сайт для клиники https://www.endokrinklinika.ru/biopsy. Здесь как раз использованы оттенки зелёного, отражающие тему здоровья.
А на сайте для переработки мусора https://www.мусор-офф.рф этот же зелёный цвет отражает тему чистоты и экологии. Поскольку зелёный - один из легкосчитываемых цветов, он будет не только отражать суть продукта, но также будет привлекать клиента на подсознательном уровне.
🔵 Синий
Эмоции и ассоциации: спокойствие, безопасность, открытость (более светлые оттенки), надёжность (более тёмные оттенки), вода и чистота.
✅ Как и в случае с жёлтым цветом, влияние синего сильно зависит от оттенка. Все оттенки синего универсальны в плане расслабления и безопасности, но светлые тона ассоциируются с дружелюбием, а тёмные — с печалью. Оттенки, приближённые к голубому, подсознательно расцениваются человеческим мозгом как что-то связанное с водой, чистотой и глубиной.
Например, наш сайт для клининговой компании https://www.мойдодыр-тн.рф выполнен в голубых оттенках. Как я уже и говорила выше, голубой ассоциируется с чистотой, а темные оттенки этого цвета добавляют доверия к компании.
🔚 Небольшое резюме этой статьи.
С помощью цвета можно понять настроение, характер людей, улучшить психологическое состояние, оказать влияние на работоспособность, убедить принять то или иное решение. Поэтому при подборе цветовой гаммы для сайта важно продумать до мелочей, почему же тут нужен такой цвет. Хорошо изучите свою аудиторию, проверьте распространённые ассоциации, подберите оттенки к цвету - тогда вы получите выигрышный результат.