Что в видео-уроке:
В уроке разбираем, как подобрать цветовую палитру для проекта и где искать подходящие сочетания. Рассмотрим работу с пожеланиями заказчика, цветами логотипа и референсами, а также сервисы In Color Balance, Coolors и Colormind для поиска и генерации палитр.
Откуда брать цвета для сайта
При работе над визуальной концепцией проекта важно заранее определить цветовую палитру. Цвет влияет на настроение интерфейса, помогает расставлять акценты, поддерживает характер бренда и объединяет все элементы дизайна в единую систему.
Выбирать цвет только потому, что он нравится дизайнеру, не стоит. Палитра должна быть связана с задачей проекта, его тематикой, аудиторией и тем впечатлением, которое должен создавать дизайн.
Есть несколько основных источников, откуда можно брать цвет для проекта.
1. Пожелания заказчика
Первый источник — пожелания заказчика. Иногда клиент заранее определяет, какие цвета хочет видеть на сайте, или, наоборот, сообщает, каких оттенков стоит избегать.
Эти пожелания обязательно нужно учитывать, но воспринимать их следует в контексте всей задачи. Важно понять, подходит ли выбранный цвет тематике проекта, целевой аудитории и общей стилистике.
Например, если проект должен выглядеть серьёзно, технологично и масштабно, слишком яркая или легкомысленная палитра может противоречить нужному впечатлению. И наоборот, для эмоционального и дружелюбного проекта строгая сдержанная гамма может оказаться слишком холодной.
Поэтому работа над палитрой начинается с определения характера и настроения проекта. Нужно понять, каким он должен восприниматься: надёжным, энергичным, спокойным, технологичным, премиальным, дружелюбным и так далее.
2. Цвета из логотипа и фирменного стиля
Если у компании уже есть логотип или разработанный фирменный стиль, логично отталкиваться от существующих цветов бренда.
При этом необязательно ограничивать весь дизайн одним цветом из логотипа. На его основе можно создать более широкую систему оттенков: сделать основной цвет светлее или темнее, подобрать близкие оттенки, добавить нейтральные цвета.
Например, один красный цвет можно разложить на несколько оттенков — от насыщенного и тёмного до более светлого и спокойного. В результате получается полноценная палитра, которая остаётся связанной с фирменным цветом, но позволяет оформлять разные элементы интерфейса.
Главное — не использовать все оттенки одновременно только потому, что они есть в палитре фирменного стиля. Нужно заранее понимать, какие цвета будут основными, какие станут фоновыми, а какие будут использоваться для акцентов, а какие совершенно не подходя для сайта.
3. Цвет из референсов
Следующий способ — искать цвета в референсах.
Референсы помогают увидеть, какие цветовые решения уже используются в проектах с похожим настроением, тематикой или визуальным характером.
Для этого можно изучать подборки сайтов, например на Made on Tilda. Здесь собраны разные проекты, поэтому удобно сравнивать стилистику, композицию и работу с цветом.
Необязательно искать сайт именно по вашей тематике. Иногда полезнее найти проект с нужным визуальным настроением.
Например, если нужен строгий тёмный сайт с ярким акцентом, можно анализировать проекты совершенно другой тематики, но с подходящей цветовой системой.
Нужно смотреть не на содержание сайта, а на принцип:
- какой цвет используется как фон;
- какой становится основным;
- где появляется акцент;
- насколько насыщенные оттенки используются;
- как цвет сочетается с фотографиями и графикой.
Хорошую находку можно перенести в свой мудборд или рабочий файл и на её основе попробовать собрать собственную палитру.
Важно именно анализировать референсы, а не копировать готовый дизайн.
4. Специальные сервисы для подбора палитр
Цвет можно искать не только в дизайне сайтов, но на специализированных сервисах.
In Color Balance
Этот сервис предлагает готовые цветовые сочетания, составленные на основе изображений.
Это полезный способ, потому что в фотографии цвета уже существуют вместе в естественной композиции. Можно увидеть, как сочетаются насыщенные и приглушённые оттенки, тёплые и холодные цвета, светлые и тёмные тона.
Такие подборки хорошо подходят как отправная точка.
Также можно ориентироваться на фотографии, которые уже были собраны для мудборда проекта. Если изображения хорошо передают нужное настроение, логично извлечь из них основные оттенки и попробовать использовать их в интерфейсе.
Таким образом визуальная концепция становится более цельной: фотографии, фон, кнопки, текстовые акценты и графика начинают работать в одной цветовой системе.
Coolors
Для подбора и генерации палитр можно использовать сервис Coolors.
Он позволяет быстро создавать сочетания из нескольких цветов. Если какой-то оттенок подходит, его можно сохранить, а остальные продолжить менять.
Это удобно, когда один основной цвет уже определён, но нужно подобрать к нему дополнительные оттенки.
Не стоит воспринимать автоматически сгенерированную палитру как готовое решение. Сервис предлагает варианты, а дизайнер уже оценивает их с точки зрения задачи проекта.
После генерации нужно проверить, насколько цвета подходят друг другу, есть ли между ними достаточный контраст и действительно ли все оттенки нужны в интерфейсе.
Ещё один сервис для работы с палитрами. Он позволяет генерировать сочетания цветов и смотреть различные варианты палитр. Можно зафиксировать понравившиеся оттенки и продолжать подбирать остальные.
Дополнительное преимущество подобных инструментов — возможность оценивать палитру не только как набор цветных прямоугольников, но и приблизительно представлять её использование в интерфейсе.
Это важно, потому что цвета могут хорошо выглядеть рядом в палитре, но совершенно иначе восприниматься на реальном сайте.
Проверяйте цвет на сайте
Какой бы способ подбора цвета вы ни использовали, окончательное решение нужно принимать непосредственно в макете.
Палитра — это только отправная точка.
Создайте первый экран или несколько ключевых элементов интерфейса и посмотрите:
- не слишком ли много яркого цвета;
- достаточно ли контраста;
- удобно ли читать текст;
- соответствует ли дизайн нужному настроению;
- не спорят ли между собой разные оттенки;
- хорошо ли цвет работает вместе с фотографиями и графикой.
В процессе работы оттенки можно корректировать. Это нормальная часть дизайна. Необязательно на этапе мудборда сразу определить точные значения каждого цвета и затем никогда их не менять. Важно сначала определить общее направление и характер палитры, а окончательные оттенки уточнять уже в интерфейсе.
Главное при выборе цвета помните: не существует одного универсального способа подобрать правильную палитру.
Для поиска цвета можно использовать пожелания заказчика, фирменную айдентику, референсы, фотографии и специальные сервисы.
Но хороший выбор цвета начинается не с генератора палитр, а с понимания задачи.
Сначала определите характер проекта, затем найдите визуальное направление и только после этого переходите к конкретным оттенкам. Так цвет станет частью общей системы дизайна, а не случайным декоративным решением.
