Гармония цвета

 Сегодня общался с начинающий разработчиком-самоучкой, пару дней назад помогал ему в написании плагина для WP, на вопрос "Как у Вас с дизайном?" получил не однозначный ответ, но после того как он скинул мне ссылку все стало на свои места. Слабонервных прошу не открывать http://miha-coder.u-gu.ru/.

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

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

Монохромная гармония.

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

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

Монохромная гармония

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


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

Аналоговая гармония 

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

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

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

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

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

Триадная гармония 

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

Тетрадная гармония 

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

приглушить.

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

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

Как использовать цвета

Считается, что низ сайта не должен быть визуально тяжелее, чем верх. Это значит, что насыщенные или темные цвета располагаются вверху, а книзу слегка приглушаются.
Чем крупнее объект, тем меньше ему требуется дополнительное акцентирование цветом. И наоборот, мелкий элемент легче увидеть, если он насыщен. Это касается мелких пиктограмм, стрелочек и тому подобное.
Среднестатистический дизайн не должен быть пестрым. Некоторые дизайнеры любят создавать презентационный дизайн: много ярких насыщенных цветов, большие фото коллажи, крупные логические блоки. Но это не всегда уместно, потому что обилие красок и картинок чаще всего утомляет, как шумные народные гулянья.

И в завершении статьи пару правил: 

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

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