Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
НАПИШИТЕ НАМ
Спасибо за обратную связь!

Цвет

Форма дает нам возможность отличать вещи друг от друга, в этом помогает и цвет.

Например: представьте большую машину.

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

А если представить большую красную машину? (пожарная машина)

А большую зеленую машину? (военная машина)

А большую желтую машину? (школьный автобус, белаз в карьере)
Введение
Форма более эффективное средство коммуникации, чем цвет.

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

Люди по-разному реагируют на форму и цвет: эмоциональные люди больше тяготеют к цвету, а неэмоциональные интровертные - к форме.

Форма требует активной мыслительной реакции от человека - мы рассматриваем объект, его структуру, соотносим части с целым. А восприятие цвета связано с эмоциональным миром человека.
Форма
Цвет
Интеллект
Эмоции
Выразительность цвета основана на ассоциациях.

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

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

Композиция в цвете - расположить (скомпоновать) рядом два (или более) цвета таким образом, чтобы их сочетание было предельно выразительным.

Цвета обращаются к чувствам, а не к логике человека, а именно:

– вызывают психологическую реакцию;
– подчеркивают качество, настроение, чувство; создают теплую или холодную среду; отражают времена года и т.д.
– имеют физиологические последствия как положительные, так и отрицательные - оптические раздражители;
– прикасаются к ощущениям: удовлетворение, эстетическое удовольствие и т.п.
– «взывают» к чувствам: придают объёмность среде и предметам.

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

Качества цвета:
Цвет и его качества
Цветовой тон - особенность цвета, отличающая его от других цветов спектра (красный, синий, зеленый и т.д.)
Оттенок – градация цветового тона в пределах одного цвета или малозаметное изменение основного цвета под влиянием другого. Например, оттенки синего – это сине-голубой, сине-фиолетовый и т.п.
Локальный цвет предмета – собственно цвет предмета без учета светотени, его светлоты и насыщенности.
Цвет меняется, если на него падает свет
Цвет меняется, если на него падает тень
Локальный - цвет самого предмета
Насыщенность – восприятие чистоты цвета, т.е. близости к спектрально-чистым цветам.

Светлота – относительная яркость цвета.
Контраст – противопоставление двух цветов, в цветовом спектре – это всегда цвета находящиеся напротив друг друга. Так же эти цвета будут взаимодополнительными.
Нюанс – явление, когда при сопоставлении каких-либо качеств или свойств объекта различия наблюдаются в незначительной степени.
Теплый / холодный цвет – теплые / холодные цвета определяются по присутствию в них охристых / голубых оттенков. Располагаются они на противоположных концах цветового круга. Эти качества цвета относительны и зависят от расположения рядом других цветов.
АХРОМАТИЧЕСКИЕ ЦВЕТА
Что такое хроматические и ахроматические цвета
ХРОМАТИЧЕСКИЕ ЦВЕТА
Ахроматические цвета (т.е.бесцветные) – белый, серый, чёрный, они отражают разное количество падающего на них света.

Например белые поверхности и предметы отражают 70- 90% падающего на них света, а чёрные 34%.

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

Т.е. все цвета, кроме белого, серого, чёрного, отличаются по тоновому признаку.
Каждому цвету из спектра соответствует свой оттенок ахроматического цвета. Желтому, как самому светлому цвету в спектре соответствует белый цвет, а контрастному ему фиолетовому – черный, следовательно, красному и синему цвету одинаковой светлоты соответствует один и тот же оттенок серого. При смешении контрастных (дополнительных) цветов получаются различные по светлоте оттенки серого цвета.
Цветовой круг
Условно цвета спектра располагаются по цветовому кругу:
Цветовой круг Иттена (слева) разделяет цвета на группы:
Первичные цвета
Вторичные
Третичные
(Образуют равносторонний треугольник внутри круга)

• красный
• желтый
• синий
(Расположены между первичными цветами)

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

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

Область холодных цветов распространяется на промежуток от зеленого до самых холодных оттенков фиолетового цвета и считается пассивной и успокаивающей.
Цветовые наборы (палитры)
КЛАССИЧЕСКАЯ ТРИАДА
Классическая триада это сочетание трех цветов, которые в равной степени отстоят друг от друга на цветовом круге. Например, красный, желтый и синий. Триадная схема также обладает высокой контрастностью, но более сбалансированной, чем дополнительные цвета. Принцип здесь состоит в том, что один цвет доминирует и акцентирует с двумя другими. Такая композиция выглядит живой даже при использовании бледных и ненасыщенных цветов.
АНАЛОГОВАЯ ТРИАДА
Аналоговая триада: сочетание от 2 до 5 (в идеале от 2 до 3) цветов, находящихся рядом друг с другом на цветовом круге. Примером могут служить сочетания приглушенных цветов: желто-оранжевый, желтый, желто-зеленый, зеленый, сине-зеленый.
КОНТРАСТНАЯ ТРИАДА
Контрастная триада — вариант комплиментарного сочетания цветов, только вместо противоположного цвета используются соседние для него цвета.
ТЕТРАДА - СОЧЕТАНИЕ ЧЕТЫРЕХ ЦВЕТОВ
Эта схема включает в себя один основной и два дополнительных цвета, плюс дополнительный цвет, который подчеркивает акценты. Пример: сине-зеленый, сине-фиолетовый, оранжево-красный, оранжево-желтый.
Это самая сложная схема. Она предлагает большее разнообразие цвета, чем какая-либо другая схема, но если все четыре цвета используются в равных количествах, то схема может выглядеть несбалансированной, поэтому нужно выбрать один цвет доминирующим.
КВАДРАТ
Сочетание 4 цветов, равноудаленных друг от друга на цветовом круге. Эти цвета отличаются друг от друга по тону, но также дополняют друг друга. Пример: фиолетовый, оранжево-красный, желтый, сине-зеленый.
КОМПЛЕМЕНТАРНАЯ ПАЛИТРА
Комплементарная палитра строится на основе двух противоположных цветов круга и используется для создания эффекта контраста.
Пастельные цвета
Пастельная гамма получается добавлением белого пигмента к любому из двенадцати цветов цветового круга.
Примеры пастельных гамм:
Примеры сочетаний пастельных цветов друг с другом:
МОНОХРОМАТИЧЕСКАЯ ПАЛИТРА
В такой палитре используется один цвет и его вариации.
Монохромность и полихромность
Монохроматическая цветовая схема
ПОЛИХРОМИЧЕСКАЯ ЦВЕТОВАЯ СХЕМА
Монохроматическая цветовая схема – одна из простейших, которая получается в результате использования одного цвета и его оттенков.
Полихроматическая цветовая схема - сочетание разных цветов.
Когда люди говорят о цветовой гармонии, они оценива­ют впечатления от взаимодействия двух или более цве­тов. Для большинства цветовые сочетания, называемые в просторечии «гармоничными», обычно состоят из близких друг к другу тонов или же из различных цве­тов, имеющих одинаковую светосилу. В основном эти сочетания не обладают сильной контрастностью. Как правило, оценка гармонии или диссонанса вызвана ощущением приятного-неприятного или привлекатель­ного-непривлекательного. Подобные суждения постро­ены на личном мнении и не носят объективного харак­тера.

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

нюанс — минимальное,

то тождество — повторение этих качеств.

Для того чтобы контраст или нюанс «заработал» как средство гармонизации, нужно составить ему пару — тогда появится возможность для сравнения. Например, контраст большого и малого элемента, круглого и квадратного,
черного и белого, зеленого и красного, гладкого и шероховатого и т. д.
Контраст, нюанс, тождество
1. Контраст цветовых сопоставлений

• самый простой из семи типов контрастов;

• можно продемонст­рировать с помощью всех чистых цветов в их предель­ной насыщенности;

• данный кон­траст создает впечатление пестроты, силы, решительно­сти;

• также как чёрный и белый цвета образуют самый силь­ный контраст светлого и тёмного, так и жёлтый, крас­ный и синий цвет обладают наиболее сильно выражен­ным цветовым контрастом.
Типы цветовых контрастов
2. Контраст светлого и тёмного

День и ночь, свет и тень. Эти противоположности имеют основополагающее значение в человеческой жизни и в природе вообще. Для художника белый и чёрный цвет является наиболее сильным выразительным средством для обозначения света и тени. Белое и чёрное во всех отношениях противоположны, но между ними располо­жены области серых тонов и весь ряд хроматического цвета.
3. Контраст холодного и тёплого
4. Контраст дополнительных цветов
(напротив друг друга в цв.круге)

Они противоположны друг другу, но нуждаются один в другом. Расположенные рядом, они возбуждают друг друга до максимальной яркости и взаимоуничтожаются при смешивании, образуя се­ро-чёрный тон, как огонь и вода. Каждый цвет имеет лишь один единственный цвет, который является по от­ношению к нему дополнительным.

жёлтый - фиолетовый
жёлто-оранжевый - сине-фиолетовый
оранжевый — синий
красно-оранжевый — сине-зелёный
красный - зелёный
красно-фиолетовый - жёлто-зелёный.
5. Симультанный контраст

Понятие «симультанный контраст» обозначает явление, при котором наш глаз при восприятии какого-либо цвета тотчас же требует появления его дополнительного цвета, и если такового нет, то симультанно, т.е. одновре­менно, порождает его сам. Этот факт означает, что ос­новной закон цветовой гармонии базируется на законе о дополнительных цветах. Симультанно порождённые цвета возникают лишь как ощущение и объективно не существуют. Они не могут быть сфотографированы.
Если внимательно вглядеться, серый фон начинает "зеленеть" (из-за красного круга, т.к. доп цвет красного - зеленый)
6. Контраст цветового насыщения

Говоря о «качестве цвета», мы имеем в виду его чистоту и насыщенность. Слова «контраст насыщения» фикси­руют противоположность между цветами насыщенны­ми, яркими и блёклыми, затемнёнными.
7. Контраст цветового распространения.

Цвета могут компоноваться друг с другом пятнами любого размера. Цвета могут быть в равном количестве по отношению друг к другу или одного цвета может быть больше, чем другого (других).
Цвета и их значения. Использование на сайтах
1. КРАСНЫЙ

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

Основной цвет, который используется на сайте, в большинстве случаев соответствует заявленной тематике. Нужно быть очень внимательным, проектируя:
  • Всплывающие окна
  • Границы
  • Новости
  • Фоновые цвета
  • Баннеры и графику
  • Кнопки, особенно с призывом к действию
Контраст является важным фактором, повышающим конверсию сайта. Если пользователю приходится прилагать усилия для того, чтобы прочитать, что написано на кнопке с призывом к действию, ни о каких продажах не может быть и речи. Все важные элементы дизайна должны быть контрастны по отношению к фону, а их оттенок должен вызывать нужные эмоции. Иными словами, кнопка «Купить сейчас» должна быть максимально заметна, но при этом она не должна вызывать негативных эмоций.

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

Считается, что женщины предпочитают мягкие цвета, а мужчинам нравятся оттенки поярче.
любовь, страсть
сила
молодость
• призыв к активным действиям
гнев и агрессия
сигнал об ошибке
боль (кровь)
Красный цвет на сайте лучше использовать для выделения отдельных элементов, учитывая тот факт, что этот цвет не должен выбиваться из общей палитры.
питание
одежда
авто
• сайты знакомств (м/ж)
• коммуникация и логистика
• развлечения
• сетевые магазины (для мотивации к действию)
наука
соц. сети
медицина
• авиакомпании
подходит для сфер
НЕ подходит для сфер
2. РОЗОВЫЙ

Если целевая аудитория сайта в основном женская, то оттенки розового будут хорошим выбором.
романтика
радость
свежесть
• юность
• женственность
наивность
отрешение от реальности
излишняя демонстративность (для ярко-розового)
одежда
• женские сферы (косметика и т.п.)
• детские товары
энергетика
медицина
• авиакомпании
подходит для сфер
НЕ подходит для сфер
3. ОРАНЖЕВЫЙ

Промежуточный цвет между красным и желтым.
энергичность
радость
ощущение праздника
В разбавленном виде быстро теряет свой характер, а за­темнённый чёрным цветом тускнеет и переходит в ту­пой, ничего не говорящий и сухой коричневый.
техника и IT
• питание
• детские товары
• развлечения
• недвижимость (тепло и уют)
ландшафтный дизайн
финансы
• авиакомпании
• питьевая вода (ассоц. ржавчина)
подходит для сфер
НЕ подходит для сфер
4. ЖЕЛТЫЙ

Жёлтый цвет — самый яркий и светлый из всех цветов. Он теря­ет это качество, как только его затемняют серым, чёр­ным или фиолетовым цветом. Жёлтый представляет со­бой как бы уплотнённый и более материальный белый цвет.
энергичность
позитив, отсутствие забот
тепло, солнышко
• активизирует память
При добавлении белого он начинает терять свои основные свойства и становиться бледным, а при сильном сочетании с черным — получается грязным. Таким образом, многие оттенки желтого, как правило, визуально непривлекательны.
• питание
• детские товары
• развлечения
все сферы, где нужно обозначить серьезность (не творческие и не развлекательные)
подходит для сфер
НЕ подходит для сфер
Подходит для выделения отдельных элементов или для создания контраста. Самый удачный цвет для кнопки: жёлтый
5. ЗЕЛЕНЫЙ

Оттенок несет в себе сразу два цвета — синий — успокаивающий, желтый — энергичный.
обновление
спокойствие
экологичность
• стабильность
По легендам женщины с зелеными глазами считались ведьмами. Ещё зеленый связывали с различной нечистой силой: демонами, водяными.

• Если долго смотреть на успокаивающий зеленый, можно попасть под влияние апатии.
• энергетика
• финансы
• питание
• техника и цифровые технологии
• клининг
• сетевые магазины
• медицина
• туризм
сайты знакомств
• нижнее белье
• фастфуд (если требуется вызвать аппетит, а не подчеркнуть экологичность продуктов).
подходит для сфер
НЕ подходит для сфер
6. ФИОЛЕТОВЫЙ

Исторически считается королевским цветом, потому что фиолетовый краситель был очень дорог, и позволить себе его могли лишь избранные. В качестве антипода жёлтого цвета - цвета познания - фиолетовый является цветом бессознательного и таинственного, то угрожаю­щего, то ободряющего, но всегда впечатляющего.
изысканность и элегантность
загадочность
мистика, магия
• креатив
может быть угрожающим, в за­висимости от соседних контрастирующих тонов он не­редко может вызвать у зрителя даже гнетущее настрое­ние.
• продукты питания, особенно сладости
• Одежда и обувь
• Творчество
• Салон красоты (ощущение роскошности)
• Энергетика
• Свадебная индустрия (лавандовый будет выглядеть холодным, а другие оттенки фиолетового слишком тяжелые, не передающее нежность и легкость)
• Недвижимость
• Автомобили
подходит для сфер
НЕ подходит для сфер
7. СИНИЙ

Если красный всегда активен, то синий всегда пассивен, если отно­ситься к нему сточки зрения материального пространства. Сточки зрения духовной нематериальности синий, наоборот, производит активное впечатление, а красный цвет - пассивное. Синий цвет словно сжат и сосредоточен в себе, он интровертен.
надежность и доверие
спокойствие
отталкивает аппетит
• отстраненность и грусть
• социальные сети
• Наука и техника
• финансы
• автомобили и авиакомпании
• медицина
• средства гигиены, клининг
• сетевые магазины
• питание
• праздники (темные оттенки)
подходит для сфер
НЕ подходит для сфер
8. БЕЛЫЙ

Этот цвет может означать как чистоту и невинность, так и завершённость и ясность.

Белый используется в любом бизнесе и дизайне, дает отдохнуть глазам, олицетворяет белое пространство или воздух. Делает дизайн чистым, позволяет сосредоточиться на важных частях контента.
чистота
спокойствие
В неудачном исполнении белый может отражать безразличие и лень
• здравоохранение
• одежда
• благотворительность
• техника
• питание
• банки
подходит для сфер
НЕ подходит для сфер
9. ЧЕРНЫЙ

Универсальный цвет, который прекрасно сочетается с другими оттенками. Его лучше использовать тогда, когда нужно добиться контраста на веб-странице. Этот цвет имеет двоякий смысл.
загадочность
строгость
• элегантность
• сила

трагедия, смерть, скорбь
• одиночество
• IT
• Одежда и обувь (эксклюзив)
• Алкоголь (качество, дороговизна, элитность)
• косметика
• авто
• развлечения
• авиакомпании
• детские товары
• медицина
подходит для сфер
НЕ подходит для сфер
10. КОРИЧНЕВЫЙ

Данный цвет, не отличается ярко выраженной эмоциональной окраской.

Ассоциации: дерево, кофе, надежность, стабильность, уверенность. Может быть сухим, даже мрачным.
• кофейни, рестораны
• строительство
• юриспруденция
• агрономия
• красота и здоровье
подходит для сфер
НЕ подходит для сфер
11. СЕРЫЙ

В зависимости от оттенка, вызывает ассоциации с угрюмостью, депрессией или формальностью и профессионализмом. В дизайне часто используется как фон или цвет текста.
-
+
-
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
-
+
ДОМАШНЕЕ ЗАДАНИЕ:
Подумайте и выберите несколько возможных тем для вашего будущего проекта (2-3 темы).
Составьте мудборд (доску настроения) по каждой.

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

ПРИМЕРЫ: