FORGOT YOUR DETAILS?

Цветовая теория для дизайнеров, часть 2: понимание концепций и терминологии

by / Friday, 23 May 2014 / Published in Web-решения

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

Если вы собираетесь эффективно использовать цвета в дизайне, вам необходимо знать некоторые цветовые концепции и теоретическую терминологию. Тщательное прорабатывание таких понятий, как цветность, значение и насыщенность является ключом к созданию ваших собственных удивительных цветовых наборов. В Части 1 – “Значения цветов” – нашей серии по цветовой теории мы раскрыли значения различных цветов.

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

Оттенок

Оттенок является одним из наиболее базовых цветовых понятий и в основном обозначает цвет объекта. Когда мы говорим «синий», «зеленый» или «красный», мы говорим об оттенке. Оттенки, которые вы используете в дизайне, содержат важные сообщения посетителям вашего сайта. Прочитайте часть 1, чтобы выяснить, какие значения содержатся в различных оттенках.

Примеры

Чистый оттенок фона и часть шрифта на сайте Happy Twitmas являются красными.

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

Чистый красный является весьма популярным оттенком в веб-дизайне.

Mix использует ряд чистых оттенков в своем заголовке и логотипе.

Зеленый в своей более чистой форме встречается не столь часто и потому выделяется на фоне остальных цветов.

Цветность

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

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

Примеры

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

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

Комбинирование высокой и низкой насыщенности одинаковых оттенков может использоваться для изысканного и элегантного дизайна.

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

Различия цветности могут использоваться для визуально приятного градиента.

Насыщенность

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

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

Примеры

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

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

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

Замечательный пример, как использование оттенка с высокой насыщенностью на фоне с низкой насыщенностью может сделать шаблон действительно выдающимся.

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

Яркость

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

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

Примеры

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

Этот вебсайт комбинирует синие оттенки с двумя различными яркостями. Поскольку имеющиеся яркости имеют достаточный контраст, общий вид довольно привлекателен.

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

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

Человеческий глаз может найти различия в яркостях даже среди столь похожих оттенков.

Тона

Тона появляются, когда к оттенку добавляется серый. Тона обычно более тусклые или мягко-выглядящие, чем чистые оттенки.

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

Примеры

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

Этот вебсайт комбинирует синий в различных вариациях тонов, теней и оттенков.

Тона могут быть усилены добавлением серого вокруг них, как это делается здесь.

Тона, используемые в навигации и фоновом дизайне здесь придают этому сайту винтажный, сделанный от руки вид.

Прекрасный пример, как чистый оттенок может выделяться на фоне тонов.

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

Тени

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

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

Примеры

Jonathan Moore’s вебсайт имеет различные вариации фиолетового в фоне (и пар оттенков в других частях).

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

Эффективная комбинация теней и оттенков, особенно в заголовке.

Еще один фоновый дизайн, который имеет тени (и немного оттенков) в текстурном градиенте.

Сочетание теней с текстурами добавляет интереса сайту.

Окраска

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

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

Примеры

Caio Cardoso’s вебсайт имеет вариативную зеленую окраску в фоне и других элементах.

Голубая окраска Fernando Silanes’s сайта создает мягкий и изысканный вид.

Голубая окраска популярна для небесных и натуральных мотивов.

Окраска также популярна на базирующихся на акварели дизайнах.

Окраска, собранная вместе, создает изысканный градиент.

Заключение

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

Оттенок представляет собой сам цвет (синий, зеленый, красный и т.д.)

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

Насыщенность отражает, насколько сильным или слабым является цвет (высокая насыщенность соответствует силе).

Яркость отражает, насколько светлым или темным является цвет.

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

Тени образуются путем добавления черного цвету, делая его более темным, чем оригинал.

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

Перевод Ольги Терновой, корреспондента портала Как сделать презентацию


TOP