Skip to content

Определяем и учитываем цвета

При дизайне для любой среды — не только digital — на то, как он будет воспринят и понят сильно влияет то, как вы будете использовать цвет в своем дизайне влияет. Важно помнить, что цвет выявляет эмоции (хорошие и плохие) и в людях и в культуре.

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

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

Цветовое колесо

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

colour-wheel

Основные цвета: красный, оранжевый, желтый, зеленый, синий и фиолетовый присутствуют на всех цветовых колесах. Но можно 6-цветовое колесо разбавить шестью дополнительными цветами: красно-оранжевый, желто-оранжевый, желто-зеленый, сине-зеленый, сине-фиолетовый и красно-фиолетовый.

Как вы можете видеть, все дополнительные цвета на больших цветовых колесах являются «промежуточными» между основными цветами, являясь их смешением.

Главные цвета

Есть три главных цвета. Вы, вероятно, признали их, ведь для этого хватит лишь базовых знаний CSS. Это красный, синий и желтый (RGB).

colour-wheel-primary

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

Вторичные цвета

Это фиолетовый, оранжевый и зеленый

colour-wheel-secondary

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

Примечание: Мы называем эти противоположные, контрастные цвета, как дополнительные — при смешивании этих дополнительных комбинаций (например, красный + зеленый) получается нейтральный цвет.

Третичные цвета

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

colour-wheel-tertiary

На цветовом колесе данные цвета лежат между каждым из первичных и вторичных цветов.


Цветовые семьи

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

Теплые цвета

Теплые цвета, это красный, оранжевый и желтый и их оттенки. Все они вызывают ощущение тепла: красный — огненный, оранжевый и желтый как летнее солнце.

colour-wheel-warm-family

Холодные цвета

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

colour-wheel-cool-family

Значение цвета

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

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

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

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Прототипирование в веб-дизайне

Качества и характеристики цветов