ДизайнЦвет. Гармония цвета.

Наконец-то! Мы финишируем товарищи! Был пройден долгий долгий путь (целых 3 статьи), но мы добрались до самого вкусного! Зачем же нам понадобилось узнавать столько всего? Ну, во-первых для общего развития, а во вторых чтобы со всем знанием дела познакомиться с понятием цветовой гармонии и колорита. Большинство людей воспринимает все цветовые сочетания исключительно субъективно, но мы же с вами не такие простые? Человек, работа которого так или иначе связана с цветом, должен брать за основу не только своё личное видение, но и ещё свод закономерностей и признаков, которые и выделяют хорошее сочетание от всех прочих.

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

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

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

Но чем отличается гармония от дисгармонии? Вот некоторые признаки которые присущи всем таким сочетаниям:

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

    sv9z-bad.jpg
    Как видим цвета принадлежат разным, но близким цветовым тонам. Бяка

    sv9z-good.jpg
    Ну вот, получше будет.

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

    contrast-bad.jpg
    Цвета ничем особо не отличаются. Мерзость.

    contrast-good.jpg
    Живенько! Можно и заюзать.

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

    mera-good.jpg
    Ах, как всё круто!

    mera-bad.jpg
    Неее, ну нахрен он тут?

  • Пропорциональность - это подобие соотношений всех характеристик цвета (яркости, насыщенности, цветовых тонов, вот зачем я упоминал о них) на всей плоскости работы. Например, если у нас в центре нашей композиции яркости цветов определяются как 2:3, то такое же соотношение должно соблюдаться в любой точке.

    propor-bad.jpg
    Что-то тут не так, оранжевый везде одинаковый.

    propor-good.jpg
    Вот теперь они сочетаются лучше!

  • Равновесие - очень важная черта. Проще объяснить данный признак на примере. Мысленно разделите вашу композицию так, чтобы слева и справа части были равны. Каждая часть будет иметь свою активность, выразительность или даже если хотите вес. Так вот, при гармонии этот вес у обоих частей будет равным. С вертикалью дело обстоит чуть иначе: все более лёгкое и возвышенное располагается выше, а снизу обоснуется всё тяжёлое и земное. Только не переборщите.

    balans-bad.jpg
    Аааа! Сейчас упадёт!

    balans-good.jpg
    О, теперь на всём холсте всё чётко!

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

    org-bad.jpg
    Ну вот не хватает тёмного в нижнем правом углу.

    org-good.jpg
    А вот теперь глаз радуется!

  • Ясность и лёгкость восприятия - тут в принципе всё понятно. У людей не должно возникать вопросов, почему именно такое сочетание цветов и в таких пропорциях вы избрали. Не заставляйте людей думать, если на то нет причины. В этом мне например помогают ассоциации. Например для сайта студии, в названии которой используется слово пчела, я использовал жёлтый и чёрный цвет... потому что пчела она такая и есть. Тем самым глядя на сайт у пользователя сразу возникает ассоциация с пчелой. Такого бы эффекта не было, если бы я использовал к примеру розовый и зелёный. Они уж точно к теме отношения никак не имеют, что заставило бы пользователя думать: "Что за херня?".

    9snost-good.jpg
    По примеру, хотим передать пчёлку. А вот она!

    9snost-bad.jpg
    Эммм... Пчёлка? Зебра-алкаш!

  • Прекрасное. Этот признак означает, что ничто не должно напрягать наблюдателя. То есть должны отсутствовать явные цветовые диссонансы, явно непрятные цвета (если конечно того не требует замысел).

    prekrasnoe-bad.jpg
    Это дурно пахнет

    prekrasnoe-good.jpg
    Всё же лучше, чем то, что было

  • Возвышенное. Какое пафосное название для признака, а означает он, что свои работы нужно освобождать от всего лишнего и несущественного.

    vozvish-bad.jpg
    Ну не в дугу тут желтяшки по бокам

    vozvish-good.jpg
    Другое дело!

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

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

    monohromi9.jpg
    Красивый пример монохромии

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

    dvucvetie.jpg
    Почти двуцветие ;)

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

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

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

    multi.jpg
    Интересный пример многоцветия

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

    ahrom.jpg
    Видим форму одуванчика, а не его цвет

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

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

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

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

ЗЫ

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

Ах да. Всем спасибо за внимание, все свободны.

Комментарии

Аватар пользователя Inglar
Inglar написал:

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

12.11.2011 21:37
Аватар пользователя Smouk
Smouk написал:

Кстати о птичках. С юзабилити так и будет ) будут рассматриваться примеры из жизни ) А в завершении будет отчёт о детальном тестировании юзабилити одного из сайтов. Но об этом в следующей статье )

13.11.2011 02:01
Аватар пользователя Александр
Александр написал:

Чушь.

25.05.2012 00:37
Аватар пользователя xxxLOGIATxxx
xxxLOGIATxxx написал:

Весьма красноречиво. Интересно было бы понять, на чём основан оный вывод и адекватный контр-агрумент.

02.11.2013 05:21

Комментировать