Выбор цвета для сайта, правильные сочетания цветов в веб-дизайне | Сайтодром

Как выбрать цвета для сайта и как цветовая схема влияет на эмоции пользователя

Создание сайтов

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

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

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

Сайт кафе — булочной

Для чего нужна цветовая схема?

Цветовая схема сайта изначально продумывается, чтобы:

  • Сделать дизайн более целостным и продуманным;
  • Отразить в дизайне фирменные цвета компании;
  • Упростить и ускорить работу дизайнера;
  • Вызвать определенные эмоции и ассоциации у пользователей;
  • С большей вероятностью попасть в ожидания клиента.

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

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

Интернет-магазин по продаже органической косметики и полезных продуктов питания

Выбор цветовой схемы в зависимости от целевой аудитории сайта

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

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

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

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

При выборе цветовых решений по отношению к ЦА чаще всего отталкиваются от следующих принципов:

  • Сайтам с детской тематикой хорошо подходят яркие, контрастные, «сочные» цвета;Сайт ясли-садаСайт ясли-сада
  • Для ресурсов, где основная аудитория девушки и женщины — светлые, нежные, пастельные оттенки;Сайт салона красотыСайт салона красоты
  • Для «мужских сайтов» — темные или нейтральные цвета.Интернет-магазин по продаже шин и дисковИнтернет-магазин по продаже шин и дисков

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

Как подобрать оптимальные цвета

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

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

Сайт предприятия, специализирующегося на производстве молочных продуктовСайт предприятия, специализирующегося на производстве молочных продуктов

Если же вы всё-таки хотите самостоятельно подобрать цвета для сайта или просто наметить подходящие оттенки для более предметного обсуждения с дизайнером можно воспользоваться специальными сервисами для подбора цветов.

Сервисы подбора сочетаний цветов для сайта

Остановимся на пятёрке наиболее популярных сервисом для подбора цветов:

Adobe Color CC —  этим сервисом пользуются как рядовые пользователи, так и профессиональные дизайнеры. Интерфейс инструмента достаточно прост, отличается гибкостью настроек. Можно выбирать сочетания на основе имеющихся у вас цветов, подбирать для них контрастные или комплиментарные оттенки. Получившиеся цветовые гаммы можно сохранить в библиотеке.

Colorschemedesigner.com  — здесь можно не просто подобрать цвета, но и посмотреть макет сайта с подобранной гаммой цветов.

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

Colourlovers.com — на этом сайте пользователи выкладывают уже готовые цветовые схемы. Их можно отсортировать по категориям (мероприятия, место применения, тематика)

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

Будет отлично, если перед использованием любого из этих сервисов вы определите:

  1. Основной цвет, им будет выделяться основная информация.
  2. Вторичный цвет. Он будет подчеркивать второстепенную по важности информацию.
  3. Фоновый цвет. Этот цвет будет преобладать на сайте, заполнять большие пространства. Его задача сочетаться с с остальными цветами и не слишком выделяться.
  4. Также можно определить акцентирующий цвет. Им будут выделяться блоки к которым надо сразу привлечь внимание пользователя.

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

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

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

Больше наших работ здесь.