ЧУДО "САИКТ"

Что такое цветовой круг Иттена и как им пользоваться

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

 

Цвет - это световая волна определенной длины
Цвет — это световая волна определенной длины

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

 

Но даже при таком «ограниченном» восприятии цвета, человеческий глаз различает от 8 до 16 миллионов оттенков! Цвет очень важен для нас – мы руководствуемся цветовыми предпочтениями при покупке одежды, при создании интерьера в своей комнате, при оформлении презентаций в PowerPoint. И, конечно, огромное значение цвет имеет в web-дизайне – создатели сайтов понимают, что на время нахождения пользователя на веб-странице влияет в том числе и ее внешний вид. Более того, существует даже целая теория, какие цвета HTML не стоит использовать в качестве основных (например, агрессивный красный), а какие, напротив, отлично для этого подходят (например, спокойный синий).

 

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

 

Иоганнес Иттен и его магический круг

 

Иоганнес Иттен
Иоганнес Иттен

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

 

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

 

Все теории Иттена нашли отражение в его лекциях, книгах и графических работах. Одним из самых востребованных «инструментов» для работы с цветом из всего наследия ученого стал цветовой круг, который представляет собой фигуру из трех частей:

 

1. Треугольника в центре. Здесь расположены три цвета, которые Иттен считал основными: желтый, красный и синий. Все остальные оттенки – это лишь сочетание и смешение этих трех компонентов.

 

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

 

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

 

Цветовой круг Иттена
Цветовой круг Иттена

 

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

 

5 способов подбора цветовой гаммы для сайта

 

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

 


 

Комплементарные цвета
Комплементарные цвета

Комплементарные (дополнительные) цвета. Пожалуй, самый удобный и легкий способ для цветового оформления дизайна web-страниц. Просто выберите любой сектор на круге и проведите линию в противоположном направлении. Получившаяся пара и станет основой для дальнейшей стилизации веб-ресурса. Например, отлично сочетаются такие цвета HTML, как оранжевый и синий, желтый и фиолетовый. Только помните: один из двух цветов всегда является основным, а второй – «разбавочным». Это значит, что первым оформляются все значимые части сайта – блоки, таблицы, кнопки, рамки, а дополнительный оттенок используется для оформления ссылок, заголовков и других элементов.

 


 

Классическая триада
Классическая триада

Классическая триада. Не менее удачное сочетание цветов с помощью цветового круга Иттена: выберите основной сектор и постройте равносторонний треугольник. Этот «тройственный союз» рекомендуется использовать в соотношении 60%*10%*30% – например, желтый украсит фон блоков, красный эффектно оформит все гиперссылки, а синий позволит визуально выделить отдельные абзацы или списки в тексте.

 

 

 


 

Аналоговая триада
Аналоговая триада

Аналоговая триада. Этот способ представляет собой выбор трех цветовых тонов, расположенных по соседству. Иттен определял цвет как душу формы, и аналоговые оттенки вполне способны придать вашему сайту (то есть форме) индивидуальность (то есть душу). Web-страница, оформленная по такому принципу, отличается сдержанностью и спокойствием. Есть хорошая фраза: «Лучший дизайн – тот, который незаметен». Нам кажется, что умелое использование аналоговых цветов – этот как раз тот случай.

 

 


 

Тетрада
Тетрада

Тетрада. Группа из четырех цветов, равноудаленных друг от друга. Такой способ использования цветового круга Иттена требует от дизайнера определенного опыта, так как совмещать 4 цвета – задача не из простых. Однако если вам удастся освоить сочетание нескольких оттенков, то вы сможете создавать по-настоящему стильные и красочные web-ресурсы. Чаще всего способ «тетрада» применяется на крупных порталах, отличающихся многообразием контента и сложной структурой.

 

 


 

Буква «X»
Буква «X»

Буква «X». В этом случае берутся два цвета с одной стороны цветового круга и два – с другой. В результате образуется подобие английской буквы «X». Этот способ относится к самому редкому, так как, во-первых, нецелесообразен при работе с небольшими проектами, а во-вторых, требует от разработчика высокого профессионализма и хорошего чувства стиля.

 

 

 


 

Итак, цветовой круг Иоганнеса Иттена – это отличный инструмент, который должен быть в арсенале каждого web-дизайнера. Он помогает быстро и выгодно определить цветовую гамму для отдельных страниц web-ресурса в соответствии с его назначением, структурой и особенностями целевой аудитории. К примеру, как подобрать цвета для сайта по доставке воды? Возьмем в качестве основного синий (простая ассоциация с водой) и «разбавим» его оранжевым. Получилось удачное сочетание цветов комплементарного типа.

 

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

 

Альтернативное сочетание комплементарных цветов
Альтернативное сочетание комплементарных цветов (вместо оранжевого — желтый)

 

Подводим итоги

 

Первое, что оценивает пользователь при посещении web-сайта – это дизайн. Это происходит на подсознательном уровне, и мозг фиксирует впечатление о сайте менее чем за 1 секунду! Швейцарский ученый Иоганнес Иттен понял сущность цвета задолго до появления всемирной паутины, однако его исследования приняли на вооружение не только все, кто связан с искусством, но и дизайнеры, создающие проекты для web.

 

Цветовой круг стал одним из самых известных «творений» Иттена, и сегодня, в эпоху расцвета интернета, этот инструмент приобретает особое значение. Используйте его, если хотите найти ключ к созданию стильных и качественных web-ресурсов.

 

Хочешь научиться делать стильные сайты? Записывайся на наши курсы «Web-дизайна» – мы научим, как грамотно пользоваться цветовым кругом Иттена.
Яндекс.Метрика