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

Дизайн цвета для веб-страниц

Цвет

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

Психология цвета

Группы цветов:

Стимулирующие (красный, оранжевый, желтый и т.п.) – символизируют открытость к общению.

Тормозящие (фиолетовый, синий, бирюзовый и т.п.) – ассоциируются с рассудком и замкнутостью.

Статические (зеленый, желто-зеленый и т.п.) – стабильность, погруженность в себя, эгоизм.

Пастельные (светло-красный, светло-оранжевый, светло-желтый, светло-зеленый и т.п.) – деликатность, нежность, способность к компромиссу.

Угнетающие (черно-зеленый, черно-синий и т.п.) – закрытые, тяжелые.

Отдельные цвета:

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

Разновидности:

Светло-красный ассоциируется с радостью, чувством, желанием и любовью.

Розовый – с романтикой, сексуальностью, любовью и дружбой, женскими влечениями и качествами.

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

Коричневый – стабильность, мужские качества.

Красно-коричневый – падение или собирание.

Оранжевый – объединяет энергию красного и счастье желтого. Ассоциируется с солнцем, радостью и тропиками. Определяет энтузиазм, счастье, создание, привлечение, успех, воодушевление и стимуляцию. Человеческим глазом воспринимается как очень горячий цвет, поэтому дает чувство тепла. Менее агрессивный, чем красный. Считается одним из молодежных цветов. Как цитрусовый, ассоциируется со здоровой пищей и стимулирует аппетит. Оранжевый, как и красный – броский цвет, поэтому его можно использовать для привлечения внимания. Очень эффективен при рекламе пищевых продуктов и игрушек.

Разновидности:

Темно-оранжевый – недоверие.

Красно-оранжевый – желание, сексуальное влечение, удовольствие, превосходство, агрессия, побуждение к действию.

Золотой – престиж, свет, мудрость и здоровье. Часто символизирует качество.

Желтый – цвет солнца. Ассоциируется с радостью, счастьем, интеллектом и энергией. Часто ассоциируется с едой. Чистый желтый цвет хорошо привлекает внимание, но, когда желтого слишком много, он утомляет глаза. Наиболее выгодный цвет для использования на слишком темных и черных фонах. Часто используется при рекламе детских товаров и товаров для отдыха. Обычно желтый является слишком «детским» для пользователей, поэтому избегайте большого количества желтого цвета при рекламе дорогих престижных товаров. Желтый считается нестабильным цветом, поэтому избегайте его, если хотите подчеркнуть стабильность.

Разновидности:

Тускло-желтый – внимание, приманка, болезнь, зависть, ревность.

Светло-желтый – интеллект, свежесть, радость.

Зеленый – цвет природы. Символизирует рост, гармонию, свежесть. Очень сильно ассоциируется со стабильностью. Темно-зеленый прочно ассоциируется с деньгами. Зеленый наиболее приятен человеческому глазу. Довольно часто, впрочем, зеленый ассоциируется с нехваткой опыта. Зеленый – противоположность красному, обычно разрешающий цвет. Активно используйте зеленый при обозначении безопасности продуктов.

Разновидности:

Темно-зеленый – деньги, финансовый мир, банки, биржи. Амбиции, жадность, зависть.

Желто-зеленый – болезнь, трусость, зависть.

Аква – эмоциональное спокойствие, защита.

Оливковый зеленый – мир.

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

Разновидности:

Светло-синий – здоровье, лечение, спокойствие, понимание, мягкость.

Темно-синий – знание, сила, сложность, серьезность.

Фиолетовый – сочетает стабильность синего и энергию красного. Обычно ассоциируется с царственностью, символизирует власть, благородство, роскошь и амбиции. Обычно сопровождает достаток и экстравагантность. Так же ассоциируется с созиданием, тайной и магией. Согласно опросам, 75% подростков предпочитают фиолетовый. Фиолетовый настолько редок в природе, что некоторые люди считают его искусственным. Светло-фиолетовый (сиреневый) – отличный выбор для рекламы женской продукции. Ярко-фиолетовый так же хорош в рекламе детской продукции.

Разновидности:

Светло-фиолетовый – романтика, ностальгия.

Темно-фиолетовый – грусть, расстройство.

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

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

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

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

Всего существует шесть классических цветовых схем:

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

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

Недостатки схемы – недостаточно контрастная и бедная цветом схема.

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

Комплементарная – использует два противоположно лежащих цвета на цветовом круге.

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

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

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

Особенности схемы – обеспечение высокого контраста без резких цветовых переходов.

Недостатки схемы – сложный баланс.

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

Особенности схемы – контраст и цветовая гармония.

Недостатки схемы – невозможность обеспечения высокого контраста.

Двойная комплементарная – сочетание двух комплементарных схем на одном цветовом круге.

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

Недостатки схемы – самая сложная по балансировке.

Рис. 8.4

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

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

Цветовое оформление веб-страниц (дополнительный материал)

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

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

Подробнее об этом - на www.webmascon.com - статья "Теория цвета", "Как подобрать цвета для web-сайта"

http://www.webmascon.com/topics/colors/

www.artlebedev.ru,

в журнале "Компьютерра" и других источниках.

Человеческий глаз не способен отличить цвет определенного цвета от цвета, полученного путем смешивания других цветов. Вместо того чтобы создавать миллионы красок различных оттенков, традиционно используется лишь небольшое ограниченное их число (от сотни до трех), а все остальные краски получаются путем смешивания исходных. Эти исходные цвета называются "первичными" - primary colors.

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

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

• Первичными (primary) цветами являются красный, желтый и синий.
• Для того, чтобы получить вторичные (secondary) цвета, мы смешиваем один цвет с другим. Желтый и красный дают нам оранжевый, красный и синий - пурпурный/лиловый, а синий и желтый - зеленый.
• А что такое третичные (tetriary) цвета? Просто берется первичный цвет и к нему добавляется соседний вторичный. Это означает, что существует шесть третичных цветов (по два цвета от каждого первичного цвета).

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

А далее, как пишет А. Лебедев: " С каждым из этих прекрасных цветосочетаний можно сделать отличный дизайн. Точно с таким же успехом можно сделать и отвратительный. Оказывается, все зависит не от цветов ".

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

• Всегда хорошо воспринимается черный текст на белом фоне.
• Имеет значение не столько цвет, сколько интенсивность. Цвета одинаковой интенсивности действительно плохо смотрятся. Чтобы сравнить интенсивность цветов, просмотрите изображение в монохромном режиме: (пример из ру/ководства,§ 38)
  в цвете
  монохромный режим
• Cочетание "белый на черном фоне" не применимо для текстов большого объема
• Для представления текста, заголовков и ссылок достаточно использовать 3 цвета
• Цветовая схема сайта не должна меняться от страницы к странице

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

Фон веб-страниц

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

Наиболее часто при выборе фона веб-страниц встречаются следующие ошибки.

· Слишком яркий фон, который перекрывает сообщение.

· Слишком темный фон, на котором не видно текста сообщения.

· Слишком монотонный фон, придающий вашему сообщению унылый вид.

· Слишком насыщенный фон, отвлекающий внимание от основной информации.

· Фон с текстурой – обычно текстуры соперничают с текстом за внимание читателя, усложняя распознавание букв и слов.

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

Еще несколько слов о фоне веб-страниц.

Фон

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

Простейший способ разбиения на области – выбрать один цвет, используя насыщенный цвет (100% насыщенности) с одной стороны страницы и ненасыщенный (10‑20% насыщенности) цвет на остальной части страницы. Это выглядит очень эффектно. Но не забудьте проверить, как эти цвета будут выглядеть на различных мониторах.

Не нашли, что искали? Воспользуйтесь поиском: