Цветовая гармония.

Вэб-Дизайн.

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

Для того, чтобы сайт не выглядел как на этой картинке, мы обратимся к систематизации цветов Йоханнеса Иттена. Он предложил схему цветового круга в виде такой картинки (подчеркну — когда мы выбираем цвета для сайта — они должны взаимодействовать друг с другом и сочетаться) :

Иттен говорил : Если Вы можете создавать гармонию без знания системы, то и создавайте таким образом. В этом кроется Ваш талант. Если же Вы не чувствуете цвет, то Вам нужна система. Это относится соответственно ко многим наукам. Некоторые не чувствуют цвет так, как Моцарт например, слышал музыку и ему не нужно было знание. Им поэтому и нужна система, и для этого они, образно говоря, изучают музыку, разложенную по системным единицам.

Иттен поэтому и создал систему, чтоб теоретически и практически систематизировать взаимодействие цветов.

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

Синий + Жёлтый = Зелёный.

Жёлтый + Красный = Оранжевый.

Синий + Красный = Фиолетовый.

Далее — вокруг шестиугольника описан круг, разделённый на 16 равных долей, заполненный недостающими оттенками. Получился некий градиент радуги.

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

Итак:

Первая цветовая гармония — это комплиментарная палитра, которая состоит из двух цветов. Это — цвета, которые находятся друг против друга.

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


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


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


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

Образ динамичный, игривый, яркий.


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

Выберите один тон, который будет доминировать, а второй — для дополнительного оформления. Третий ( наряду с чёрным, белым или серым) в качестве акцента.


Шестая — Монохромные цвета. Гармоничное сочетание оттенков одного цвета. Это очень спокойная схема, не контрастная, однако с помощью неё можно делать весьма впечатляющие работы.

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

ПРАВИЛО БАЛАНСА

60% — основной цвет, задаёт тему дизайна.
30% — дополнительный цвет, задаёт контраст и визуальный интерес.
10% — акцент.

Как же подобрать цвет…

Сервисы подбора цвета

ColorScheme.ru — цветовой круг

color.adobe.com — цветовой круг от Adobe

coolors.co — генератор палитры

Brandcolors.net — цветовые палитры брендов

Примеры

Сочетание цветов в примерах

design-seeds.com

discovercolor.ru

color.romanuke.com

Примеры работ

dribbble.com — работы дизайнеров

behance.net — галерея работ

designspiration.com — поиск примеров по цветам

stock.adobe.com/ru/ — подбор изображений по цветам

Предыдущая запись Регистрация домена Вашего сайта
Следующая запись Регистрация и покупка места на хостинге.

Ваш комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Чтобы отправить комментарий, разрешите сбор ваших персональных данных .
Политика конфиденциальности