Цветовая палитра для сайта – тренды веб-дизайна

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

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

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

В брендбуке обязательно прописывают основные и дополнительные фирменные цвета проекта. Источник

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

Существует общепринятая интерпретация психологии цвета:

● Красный — сила и страсть, вызывает сильные эмоции, может ассоциироваться с революцией и властью. Среди известных брендов и сайтов — Coca-Cola, Canon, Netflix.
● Синий — уверенность, доверие, надёжность, стабильность. Часто используется в сфере материнства и детства, а также финансов и страхования: банк ВТБ и платёжная система Visa, бренд косметики Nivea, магазин «Детский мир».
● Зелёный — экологичность, доверие, спокойствие, также используется финансовыми организациями и банками — фирменный цвет Сбербанка.
● Жёлтый — позитив, оптимизм, солнечный свет: McDonald's, бренд DHL.
● Оранжевый — дружелюбие, уверенность, радость, развлечения, позитив: например, «Додо Пицца». Также часто используют онлайн-магазины.
● Фиолетовый — креативность, фантазия, романтика. В тёмном варианте ассоциируется с превосходством: например, бренд Milka.
● Белый — нейтральный, спокойный, символ чистоты.
● Чёрный — строгий, официальный, может ассоциироваться как со скорбью и трауром, так и с премиальностью.

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

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

1. Определить главную цель сайта, целевую аудиторию и основное маркетинговое предложение — что и кому нужно презентовать. Пользователи разных возрастных групп могут по-разному воспринимать цвета: например, чёрный цвет у пользователей старше 60 лет может ассоциироваться с трауром, а у ЦА 25–35 лет — с премиальным сегментом.

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

3. Подумать над психологией цвета с точки зрения специфики бизнеса — какие эмоции и ощущения нужно вызвать у пользователей. Будет ли сайт внушать уверенность благодаря зелёному цвету или намекать на смелость с помощью акцентного красного. Например, пастельные оттенки хороши для салонов цветов, но будут неуместны на сайте Harley-Davidson: ему больше подойдёт брутальный чёрный с ярким акцентом.

4. Подобрать вручную или сгенерировать цветовую схему с помощью онлайн-сервисов. Выделить основной, дополнительный и акцентные цвета. В процессе работы над дизайном сайта важно соблюдать правило 60-30-10 по распределению цветов в интерфейсе: 60% — основной цвет, 30% — дополнительный, 10% — акцентный.

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

Дизайнеру не обязательно подбирать цветовые схемы самостоятельно — есть множество сервисов для создания цветовых схем. Вот несколько популярных:

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

В палитре Adobe Color под каждым цветом есть меню для настройки оттенков. Здесь же можно прописать метку цвета. Источник

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

В разделе Website Colors сервиса Colormind можно выбрать одну из готовых цветовых схем для сайта и посмотреть, как она будет выглядеть в интерфейсе. Источник

● Coolors — бесплатный онлайн-инструмент для создания цветовой палитры. Если предложенный набор не подходит, можно сгенерировать новый: выбрать конкретные цвета и изменить их оттенки. Также доступна база цветовых схем с самыми популярными вариантами, выбранными на сайте. Создатели сервиса дополнительно разработали плагин для Figma.

Подборка трендовых палитр для сайтов в сервисе Coolors. Источник

● Color Safe — генератор учитывает параметры доступности для каждого цвета по WCAG — руководству по обеспечению доступности веб-контента. Минимально допустимое значение контрастности — 4,5. Палитру нужно создавать самостоятельно. Сервис удобно использовать в комплекте с другими генераторами.

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

● Material Design Color System — часть Material Design от Google. Особенность инструмента — в возможности сразу применить выбранную палитру к макету веб-страницы и увидеть, как она будет выглядеть. Есть плагин Figma для генерации цветовой схемы.

Один из возможных вариантов цветовой схемы. Источник

Универсальных рекомендаций по подбору цветовых палитр нет: нельзя утверждать, что какая-то конкретная комбинация выведет сайт в лидеры. Тем не менее можно выделить популярные цветовые схемы для сайтов разных тематик:

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

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

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

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

В таком дизайне подсознательно чувствуется стремительное движение в будущее. Источник

● Монохромная схема. Ощущение спокойствия и согласованности, облегчённое восприятие, внимание концентрируется на главном.

Сайт дизайн-студии в монохроме выглядит интригующе и привлекательно. Источник*

* сервис предоставляется организацией, признанной экстремистской на территории РФ