Дизайн цвета для WEB

23 Января 2013

Нет ничего важнее правильного подбора цветов для оживления веб-страницы.

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

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

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

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

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

Цвета выражают настроение и индивидуальность вашего сайта

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

Gap Online - пример тщательного подбора цветовой гаммы. Сайт использует монохроматичную сине-серую палитру, которая является очень эффективной для выделения представляемой одежды и моделей. Цвета мягкие, ненасыщенные - и весь проект Gap смотрится и воспринимается легко и ненавязчиво. Оценка: 5

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

Цвета устанавливают идентичность

Цвета сайта и логотип компании должны дополнять друг друга и существовать в одной палитре... Дизайн сайта должен быть спроектирован относительно лого так, чтобы логотип не торчал как воспаленный большой палец. Хорошим примером вышесказанного послужит цветовая гармония между сайтом Beck Interactive и их логотипом . Это тем более важно, что в 99% случаев логотип уже содержит специфические фирменные цвета той или иной организации.

Цветная палитра должна соответствовать содержанию сайта

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

Цвета в контексте нашей эмоциональной и культурной действительности

Web-cайты, которые разрабатываются для глобальной аудитории, должны выбирать цвета для дизайна, основываясь на понимании их культурного и эмоционального значения. Web-дизайнер должен серьезно отнестись к анализу символики цвета. Например, красный - цвет огня, пожара и крови и не ассоциируется со спокойствием или миром. Зеленая шляпа в Китае сигнализирует, что жена человека обманывает его, но во многих других регионах (например, в Индии), зеленый цвет ассоциируется с деньгами, процветанием и благополучием. Так что является целесообразным осведомляться о цветовом и культурном назначении дизайна.

Цвет для групп населения

Цвета должны подбираться в зависимости от аудитории или целевой группы сайта... "The Meaning of Color" от Natalia Khouw обращает внимание на некоторые интересные факты, полученные из академических исследований о восприятии цвета различными группами населения, такие как:

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

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

Сочетания различных цветов

Отдельный цвет сам по себе может быть слишком кричащим или слишком бледным - однако он может быть хорошо обыгран в сочетании с другими цветами. Сочетание черного и серого достаточно тоскливо, но попробуйте добавить к ним оранжевый и БА-БАХ! - получилась славная комбинация. (Совет: На самом деле черный и серый с ЛЮБЫМ другим единым цветом - динамит.).

Цвета и их естественные ассоциации

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

Некоторые общеизвестные цветовые значения/ассоциации:

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

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

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

Белый цвет

Используйте белый цвет. Используйте пространство. Пожалуйста!

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

Чем меньше - тем больше

Ограничивайте вашу цветовую палитру двумя или тремя главными цветами (полутоновыми вариациями) и небольшими акцентами в некоторых местах. Ограниченные цвета в вебе вообще и и цветовой палитры вашей графики в частности означают меньшие размеры файла, более быструю загрузку и, что наиболее важно, более читаемый и привлекательный сайт... который в конечном итоге приводит к большему успеху в бизнесе. Такие сайты, как www.apple.com, www.eddiebauer.com использовали ограниченное цветовое пространство и все же выглядят отчетливыми; даже CoolHomepages главным образом использует 2 цвета, оранжевый и синий.

И последнее, но не наименее ценное... Сплетайте вашу сеть из красного, черного и белого. В отношении WEB белый - самый яркий цвет, черный по отношению к нему - наиболее контрастный, и красный обеспечивает акцент и отлично сочетается с обоими. Если вы посещали такие проекты, как www.oli.org, www.sprint.com, www.oracle.com, www.coke.com, www.honda.com, www.the-rev.com, вы конечно согласитесь со мной :)