Цветовые схемы. Как подобрать палитру для сайта?

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

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

Когда мы примерно понимаем, какую информацию и с каким оттенком должен транслировать проект нашего заказчика, мы начинаем искать референсы (примеры работ в смежных областях). Важно!: не повторить за конкурентами, а найти что-то своё, при этом не выходя за рамки общепринятых тенденций.

Цветовые схемы. Как подобрать палитру для сайта?

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

Skyeng
Skyeng
Puzzle English
Puzzle English
Skillbox
Skillbox
<p>Инглекс (сделали кричащий красный - и отличились))</p>

Инглекс (сделали кричащий красный - и отличились))

Почему именно эти цвета?

Как я уже писала ранее в предыдущей статье, синий - это про доверие и профессионализм, а желтый - удовлетворение, творчество. То есть нам буквально транслируют: “С нами не скучно! Вы точно всё выучите. Мы гарантируем.” Стоит ли искать другие решения?

Возможно. Но нужно учитывать, что гигантов рынка переплюнуть сложно, и, если проект изначально не уникален, стоит взять за основу те же цвета, но добавить в палитру “уникальный оттенок”. Если же проект абсолютно уникален - то имеет смысл пробовать что-то радикально новое.

Цветовые схемы. Немного теории.

Основные цвета выступают основой для получения всех остальных цветов. К ним относятся красный, синий и желтый (эти цвета характерны для художественной системы цветовоспроизведения. В RGB Максвелла - это красный, зеленый и синий).

Вторичные цвета получаются совмещением двух основных. К ним относятся оранжевый, фиолетовый и зеленый.

Третичные цвета создаются смешиванием основных со вторичными. Всего их насчитывается шесть: красно-оранжевый, красно-фиолетовый, сине-фиолетовый, сине-зеленый, желто-зеленый и желто-оранжевый.

Виды цветовых схем

Монохроматическая

Подразумевает использование одного цвета, его тональностей и теней.

Цветовые схемы. Как подобрать палитру для сайта?

Аналоговая

Аналоговые палитры основываются на цветах, расположенных рядом на цветовом круге.

Цветовые схемы. Как подобрать палитру для сайта?

Комплементарная

Комплементарная палитра строится на основе двух противоположных цветов круга и используется для создания эффекта контраста.

Цветовые схемы. Как подобрать палитру для сайта?

Сплит-комплементарная

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

Цветовые схемы. Как подобрать палитру для сайта?

Триадическая

Триадическая цветовая схема строится из трех равноудаленных друг от друга цветов круга.

Цветовые схемы. Как подобрать палитру для сайта?

Прямоугольная

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

Цветовые схемы. Как подобрать палитру для сайта?

Какие приложения помогают нам подобрать палитры?

Цветовые схемы. Как подобрать палитру для сайта?

Готовые палитры по запросу.

Цветовые схемы. Как подобрать палитру для сайта?

Генерирует палитру, а также составляет подборку цветов на основе уже загруженного изображения.

Цветовые схемы. Как подобрать палитру для сайта?

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

Цветовые схемы. Как подобрать палитру для сайта?

Важно! Подбирайте цвет после подбора иллюстраций и фото. Иначе есть риск не вписать палитру в общую концепцию.

До следующего воскресенья!

Принимаю заказы на дизайн в Телеграм

11
5 комментариев

Без поллитры нет палитры...Спасибо!

1
Ответить

Ответ на вопрос: "КАК подобрать палитру для сайта?" так и не последовал.

Ответить

В статье даны инструменты как подбирать палитры и на примере показано, что, в первую очередь, мы отталкиваемся от результатов исследований (анализ конкурентов, анализ рынка, ЦА и т.д.). Единого рецепта тут нет, всегда нужно включать голову) Ну и изучать базу дизайна - цвет и композицию, это естественно.

Ответить

В любом случае, спасибо за комментарий, в будущем буду давать инфу еще более подробно*)

Ответить