Дизайн сайтов

16 марта 2010

Теория цвета в веб-дизайне

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

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

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

К первичным цветам относятся красный синий и желтый. Из этих цветов получают все остальные цвета хроматического спектра.

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

Третичные цвета получаются смешиванием первичных и вторичных. Третичные цвета — это, по сути, оттенки: желто-зеленый, сине-зеленый и т.д.

Взаимодействие цветов

Для описания цветов существует множество терминов. Рассмотрим основные.

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

Аналогичные цвета располагаются в спектре рядом, поэтому они обычно хорошо сочетаются, но дают слабый контраст.

Эмоциональное восприятие цвета

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

Знание особенностей восприятия цвета позволяет достичь цели даже без помощи слов.

Цветовые системы

В зависимости от выполняемой работы применяется одна из двух существующих цветовых систем, RGB или CMYK.

RGB (сокр. от Red+Green+Blue) составлена красным, синим и зеленым цветам, которые в смешении дают белый цвет. Эти цвета также называют первичными цветами света. Система используется при создании изображений для телевидения, мониторов и экранов разного рода. Соответственно, и в веб-дизайне. CMYK (сокр. от Cyan+Magenta+Yellow +Key (Black)) —это система первичных цветов пигмента. В смешивании циан, магента и желтый образуют черный цвет (Key, ключевой цвет).

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

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

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

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

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

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

Что они все-таки означают?

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

Вот лишь наиболее общие варианты значений.

Красный

Красный символизирует огонь, силу, ассоциируется с важностью, страстью, энергией, восхищением.

Среди негативных коннотаций красного можно назвать ярость, гнев, экстренность ситуации, агрессию.

Оранжевый

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

Оранжевый не так агрессивен, как красный, однако мозговую активность он тоже стимулирует довольно заметно. Иногда его ассоциируют с невежественностью и обманом.

Желтый

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

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

Зеленый

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

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

Синий

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

Холодные оттенки могут выглядеть тревожно, пассивно, угнетающе.

Фиолетовый

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

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

Темно-фиолетовый часто выглядит мрачно и печально.

Черный

Черный цвет относится к ахроматическим цветам, однако это не мешает ему быть одним из самых выразительных и осмысленных цветов. Его часто ассоциируют с силой, элегантностью, изысканностью и глубиной. Говорят, что на собеседовании одетый в черное соискатель выглядит сильной, уверенной в себе личностью.

Отрицательные коннотации черного цвета на редкость сильны и мрачны — его ассоциируют со смертью, тайной, неизвестностью. Это цвет печали, трагедии, траура, поэтому использовать его следует с умом.

Белый

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

Вместе с тем, это цвет зимы, цвет холода, отчужденности, пустоты.

Примеры использования цвета на сайтах известных компаний

Nike

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

White House

В дизайне сайта Белого Дома преобладают белый и светло-серый цвета, дополненные синим и темно-красным. Белый символизирует надежду и свободу, говорит о ценности чистоты и безопасности. Государственные цвета США, которыми, помимо белого, являются синий и красный, имеют каждый свое значение: красный — энергия, жизнь; синий — мир и стабильность.

Amazon

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

Verizon

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

Холодные спокойные синий, черный и белый цвета уравновешивают яркость красного. Белый фон, как и в случае с Amazon.com, упрощает восприятие информации пользователем и образует оптимальный контраст.

Best Buy

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

Charles Schwab

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

Сдержанный темные оттенки синего, присутствующие на сайте компании Charles Schwab создают атмосферу спокойствия и уверенности.

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

Dodge

Изображения на сайте Dodge.com хорошо выделяются на черном фоне. Для расстановки акцентов используется насыщенный красный цвет.

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

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

Whole Foods

Основной корпоративный цвет компании Whole Foods и ее сайта — зеленый. Компания продает продукты для здорового питания по приемлемым ценам.

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

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

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

О некоторых инструментах работы с цветом написано там. 

Источник: SixRevisions
Перевод, адаптация: CG-Mania

Еще есть кое-что подобное:

3D-моделирование: бесплатные приложения

Как правильно создать сайт

Лучшие галереи веб-дизайна

Как сделать сайт лучше

Наиболее интересные дизайнерские тренды в блогосфере. 2010

Шапки сайтов

Назад / Следующее событие