Отвечает ли ваша выбранная цветовая схема сайта желаемому ответу пользователей? Считаете ли вы, что подобранная цветовая схема лучше всего подходит для вашего сайта?
У каждого человека есть любимые цвета. И профессиональные дизайнеры знают, что цветовая схема бренда и сайта в целом определяет уровень взаимодействия с пользователем. В данной статье мы дадим 4 рекомендации по цветовым решениям сайта, которые улучшат ваше взаимодействие с потенциальными клиентами, а также приведем 8 примеров лучших цветовых решений.
1. Повышайте узнаваемость бренда
Ваш сайт - это место, где ваша компания “живет” в Интернете. Это обуславливает необходимость точного представления бренда и повышение его узнаваемости для повторного возврата юзеров на ваш сайт.
В данном случае нельзя пренебрегать цветовыми решениями. Так, согласно исследованиям, правильно подобранная цветовая схема увеличивает узнаваемость бренда на 80%.
Кроме того, цветовая схема бренда должна соответствовать цветовой схеме самого сайта - это значительно увеличивает взаимодействие пользователей с вашим брендом везде, где они его увидят в будущем.
В свою очередь, правильно выбранная цветовая схема сайта определяет его привлекательность для посетителей - одно из исследований показало, что 94% респондентов рассматривают веб-дизайн как решающий фактор при определении привлекательности сайта.
2. Определите, как посетители ассоциируют ваш сайт
Цвет - это один из ключевых аспектов веб-страницы, который определяет её понимание пользователями. Поэтому одним из обязательных условий при формировании цветовой схемы сайта является правильно выбранный цвет с точки зрения психологии восприятия юзерами. Обратите внимание на следующую схему:
![Website Color Palettes 24](/static/4560c473a877776d707ab6cd0ae6dfd0/55c9f/website-color-palettes-24.jpg)
Например, сайты, которые хотят сообщить о своей креативности, чаще выбирают фиолетовые цвета, в то время как бренды, позиционирующие себя как нейтральные и сбалансированные, выбирают черно-белую палитру.
Универсальным решением для большинства является голубой цвет. Это обусловлено в том числе и тем, что большинство людей отмечают его как наиболее привлекательный для себя. Так, 57% мужчин и 35% женщин отметили, что именно голубой цвет - их любимый:
![Website Color Palettes 35](/static/b4bf7a209ce354852b8304eb6d79ca6a/eedcb/website-color-palettes-35.png)
3. Выберите подходящую палитру
Очередной необходимость является правильный подбор цветов, которые сочетаются друг с другом лучше всего. Лучший способ выбрать подходящую палитру - ознакомиться с базовыми принципами колористики.
Для выбора подходящей палитры мы также рекомендуем оценить сервис Coolors.co. Данный сервис является одним из лучших инструментов веб-дизайнеров, позволяя наиболее подходящие цветовые палитры на основании рекомендаций сервиса и ваших собственных предпочтений.
![Website Color Palettes 3](/static/b6400c682e281710a8b272b10426bdec/fcf31/website-color-palettes-3.jpg)
Если вы хотите создать визуально привлекательный и яркий дизайн сайта, вы можете выбрать следующие цветовые решения:
![Website Color Palettes 29](/static/95e6b8b55bc04c78c013b9c6be0f7582/515a6/website-color-palettes-29.jpg)
Если вы хотите создать дизайн, находящийся в пределах одной цветовой гаммы (монохроматическая палитра), вы можете ориентироваться по следующим рекомендациям.
![Website Color Palettes 41](/static/46e79c8ddd9fa0b4f72581637a9f451b/515a6/website-color-palettes-41.jpg)
Наконец, вы можете использовать комплементарную палитру цветов для своего сайта, которая находится на пересечении монохроматических и аналоговых палитр, обозначенных выше:
![Website Color Palettes 27](/static/4359e5103cc4adca2368561a33e49adc/515a6/website-color-palettes-27.jpg)
4. Выберите цвета, не входящие в основную палитру
Использование дополнительных цветов, не входящих в стандартную цветовую гамму, позволяет выделять нужные элементы страницы и указывать на их важность.
В частности, речь ведется о выделении цветами наиболее важных элементов, таких как СТА-кнопки, навигационные кнопки, панели юзера и т.д.
Согласно исследованию Consumer Preferences for Color Combinations было определено, что несмотря на то, что потребители в большей мере предпочитают цветовые решения, находящиеся в пределах одной цветовой гаммы, они также предпочитают цветовые решения, в которые включены контрастирующие цвета, акцентирующие внимание.
Это означает, что одно из условий создания визуально привлекательного дизайна - использование одного яркого, привлекающего внимание цвета, который используется для выделения отдельных элементов страницы и привлечения большего внимания пользователей.
Помните о том, что максимально рекомендуемое количество цветов сайта - четыре:
- Основной фон.
- Основной текст.
- Ключевой цвет проекта.
- Ключевой цвет ховера.
Также возможно использовать три дополнительных цвета - дополнительные цвета проекта, ховера и дополнительный цвет для оповещений и сообщений.
16 примеров дизайна сайтов для улучшения взаимодействия с пользователями (2018)
1. Mea Chuppa
![Website Color Palettes 30](/static/5933910b63a4b19d0751fff1b3399220/0eda2/website-color-palettes-30.png)
Вебсайт компании использует нейтральную, монохроматическую палитру, состоящую из коричневого и серого цветов.
![Website Color Palettes 31](/static/55110043d40c6a2374586e3c0c4f74fd/a299c/website-color-palettes-31.png)
2. The Big Top
![Website Color Palettes 16](/static/5a3befb6a5356b90b91f035725548999/ccce1/website-color-palettes-16.png)
Этот сайт - сообщество, специализирующееся в популяризации новых стартапов. Они используют непривычную, но очень привлекательную для пользователей цветовую схему, включающую в себя холодные тона с акцентом на теплые тона.
![Website Color Palettes 21](/static/d5d41019122d733b8756f52318a81d75/b3aab/website-color-palettes-21.png)
3. Lake Nona
![Website Color Palettes 6](/static/5946c7d4308aee77119fd02e64dcfa56/c35b3/website-color-palettes-6.png)
Сайт, предоставляющий услуги по работе с недвижимостью. В частности, данный сайт посвящен району, который располагается возле озера - соответственно, голубой цвет был выбран как один из главных. Другие цвета нейтральные:
![Website Color Palettes 28](/static/fd75213e2a9d3fb95bd2ae1b37cb679f/58ae3/website-color-palettes-28.png)
4. LemonStand
![Website Color Palettes 10](/static/db6494b8725794be1f13d936c96a873b/5f3f6/website-color-palettes-10.png)
E-commerce платформа выполнена в классической для индустрии цветовой гамме. Сочетание серого, голубого и белого - универсальное, а желтый цвет отлично акцентирует внимание пользователей на СТА-кнопке.
![Website Color Palettes 8](/static/8c76c8e9f2c43bb41ea3fad1cd700374/469a2/website-color-palettes-8.png)
5. Mint
![Website Color Palettes 36](/static/56b971ca0207f967df3c7e22026d37e2/2d3d5/website-color-palettes-36.png)
Это сайт финансового онлайн-сервиса - не удивительно, что использование зеленых и голубых оттенков в данном случае целиком оправдано. Другие цвета также удачно дополняют эту цветовую гамму, создавая в целом восприятие о бренде как о надежном и проверенном.
![Website Color Palettes 11](/static/d0abac56783cac6e3c0b5c6b72ebfb9a/3ead6/website-color-palettes-11.png)
6. Odopod
![Website Color Palettes 14](/static/48d5f461220bcbf508135c68d6fac15a/a044e/website-color-palettes-14.png)
Компания выбрала монотонные оттенки в палитре и улучшили визуальную привлекательность благодаря использованию градиента на главной странице. Крупная типографика выглядит контрастно на таком фоне.
![Website Color Palettes 17](/static/a821c56d77024fdb7024cfc9744f0309/ce667/website-color-palettes-17.png)
7. Ahrefs
![Website Color Palettes 26](/static/3682e6c651e4aa42c2dfcb7d8ce4f5e8/1da99/website-color-palettes-26.png)
Ahrefs - один из сайтов, который демонстрирует минималистичность в выборе цветов. Темно-голубой цвет - основной, но его вариации используются повсеместно на сайте. То же самое относится к оранжевому, розовому и другим цветам:
![Website Color Palettes 32](/static/80994fa751e31bd2147a7c45f38c8be0/87861/website-color-palettes-32.png)
8. Fiverr
![Website Color Palettes 19](/static/522e548e336d4d17a91f6510dbfa52dd/a385f/website-color-palettes-19.png)
Как вы уже заметили, многие компании оставляют только один цвет (в данном случае Fiverr) исключительно для СТА-кнопок. Он не появляется больше нигде. Вместе с этим, компания использует нейтральные цвета в дизайне:
![Website Color Palettes 33](/static/76c1eef0553bcd465d7e1d27eb44004e/d1162/website-color-palettes-33.png)
Заключение
Цветовая схема вашего сайта не только является отображением вашего бренда, но также “обращается” к целевой аудитории. В обратном случае, пользователи могут покидать сайт, если их ожидания не совпадают с фактическим представлением.
Напоследок - небольшая рекомендация нашим читателям: для тех, кто организовывает одноразовые мероприятия и/или ивенты можно использовать трендовые цвета года. В данном случае можно воспользоваться сервисом Pantone, который ежегодно определяет, какой будет цвет следующего года.