Разрабатываем цветовую палитру

Разрабатываем цветовую палитру

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

Ваша цветовая палитра должна включать в себя все образцы базовых цветов с указанием на то, является ли он основным, вторичным, акцентирующим или цветом заднего фона. Так же очень полезно добавлять hex коды цветов и значения RGB. Если вы планируете использовать те же цвета для печати, то при необходимости добавьте CMYK и коды Pantone.

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

Шаг 1

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

Открываете палитру цветов:

Тут вы можете увидеть все доступные тона в тонкой линии с правой стороны, так же как и насыщенность со светосилой в большом квадрате с левой стороны.

Зеленый цвет занимает значительную часть полоски тонов. Чем ближе приближаемся к голубому, тем зеленый цвет становится более холодным и чем ближе передвигаемся к желтому, тем он становится более теплым. Так что, это первое решение, которое необходимо сделать. Нужно ли чтобы зеленый был теплее или холоднее?

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

Далее изменяем светосилу и насыщенность. Выбираем цвета из области:

Выбрав свою превосходную комбинацию насыщенности и светосилы, сохранем.

Проверяем, как цвет будут выглядеть с текстом на белом заднем фоне.

Шаг 2

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

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

Выбираем насыщенность и светосилу:

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

Шаг 3

Следующий шаг заключается в выборе активного (или подчеркивающего) цвета. Этот цвет будет использоваться для различных призывов к действию, выделения ссылок и прочих областей на которые надо обратить внимание.

В этом может помочь Adobe Color (раньше это был Adobe Kuler) или ColorScheme (https: //colorscheme. ru). Устанавливаете основной цвет в качестве базового и затем выбираете показ Триада.

Тут видно, что и оранжевый и фиолетовый отлично сочетаются с зеленым. Выбираем оранжевый, потому что он отлично сочетается с темно-коричневым. Копируем hex-код, который был выдан Adobe Color или ColorScheme и вставляем его в палитру Photoshop.

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

Теперь я можно сравнить все 3 цвета, которые выбрали.

Шаг 4

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

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

Сохраняем цвет заднего фона и просматриваем свою цветовую схему целиком (смотрите следующую страницу).

Можно сделать некоторые улучшения и протестировать их с типографией.

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

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

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