RSS Reset

Цвет в визуальном пространстве сайта

Влияние цвета на мозг

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

Красиво – это как?

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

С точки зрения среднестатистического пользователя, «красиво» предполагает приятное сочетание цветов, которые, с одной стороны, радуют глаз. С другой – привлекают внимание посетителей сайта к странице, особенно, к определенным разделам, ориентирующим посетителя на покупку, заказу услуги и т.д. Но сразу возникает вопрос: приятное сочетание цветов для кого? Для заказчика? Для дизайнера? Или все же для посетителей? Как подобрать наиболее подходящую гамму для сайта?

Самый очевидный ответ на этот вопрос надо искать в теории цветоведения.

Построение цветовой композиции

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

  • монохромная, состоящая из оттенков одного цвета;
  • полярная, в которой используются контрастные цвета:
  • трехцветная;
  • многоцветная.
Цветовой круг

Рисунок 1. Трёхцветная композиция.

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

Функции цвета в пространстве сайта

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

  • привлечение внимания;
  • формирование настроения;
  • рождение ассоциаций;
  • создание предпосылок для определенных действий.

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

Феномен цветопредпочтения

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

Реакция на красный цвет

Рисунок 2. Реакция на красный цвет.

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

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

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

  • «Красный» ориентирован на успех, на продвижение вперед и освоение нового.
  • «Синий» стремится к спокойствию и гармонии с собой и миром.
  • «Зеленый» — приоритетом для людей этого типа является самоутверждение и собственное дело.
  • «Желтый» мечтает о свободе от всяких ограничений.

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

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

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

Тайны цветовой гаммы сайта

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

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

Оттенки нашего настроения: выбор основного цвета

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

  • Белый вызывает ощущение чистоты, благородства и истины. Этот цвет производит впечатление высокого качества.
  • Красный – цвет силы, власти, агрессии и страстной любви. Он сильнее других привлекает внимание, но может создавать ощущение угрозы, опасности.
  • Оранжевый (золотой) – согревает, тонизирует, пробуждает ощущение приподнятого настроения, уверенности в себе, и часто является символом богатства и тщеславия.
  • Желтый – радостный, веселый, теплый и беззаботный и вызывает такие же чувства.
  • Зеленый – цвет открытых возможностей, деловой активности, стабильности, благополучия, денег и торжества жизни. Но темно-зеленый создает мрачное настроение.
  • Голубой вызывает ощущение прохлады, расслабленности, когда сознание «плывет», а мыслей в голове мало. Это цвет отстраненного покоя.
  • Синий тоже покой, но покой полной удовлетворенности жизнью и надежности.
  • Фиолетовый порождает тревожное ощущение тайны, это мистический и романтический цвет.
  • Коричневый – вызывает ощущение уюта и удовольствия от простых радостей: домашнего тепла, вкусной еды и отдыха в теплом пледе на мягком диване.
  • Черный, с точки зрения психологии, цвет отрицания, негатива, но в европейской культуре он прочно ассоциируется с идеями элегантности, солидности и роскоши.
  • Розовый не относится к чистым цветам, которые изучал М. Люшер. Но он настолько часто используется, что его психологическое содержание очевидно. Это самый женский цвет и порождает ощущение беззаботного удовольствия и наслаждения. Это гламурный и сладкий цвет.

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

  • логотипа сайта;
  • оформления значимой информации;
  • важных кнопок;
  • заголовков.

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

Цвет и психологические особенности целевой аудитории

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

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

Рисунок 3. Логика компаний при выборе цвета.

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

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

Выбор сочетаний цветов

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

Красный цвет: сочетания и взаимовлияния

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

Красный в веб-дизайне

Рисунок 4. Пример красного цвета в веб-дизайне.

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

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

Сочетания с желтым цветом

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

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

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

Пример жёлтого веб-сайта

Рисунок 5. Пример жёлтого цвета в веб-дизайне.

Вот значения некоторых пар цветовых сочетаний с желтым.

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

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

Синий и другие цвета

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

Рисунок 6. Пример синего цвета в веб-дизайне.

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

  • в оформлении кнопок и разделов меню;
  • для выделения не слишком значимой информации;
  • для подзаголовков;
  • для поясняющей инфографики.

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

Цвет фона и его особенности

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

  • Фон не должен быть насыщеннее основного и дополнительного цветов.
  • Колорит фона должен быть спокойный, мягкий, разбеленный.
  • Фон должен не мешать восприятию текста.

Учитывая все эти требования, дизайнеры часто выбирают белый фон. Особенно хорошо он подходит для новостных сайтов и различных СМИ.

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

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

Эффект синестезии в веб-дизайне

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

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

Известный художник абстракционист начала XX века В. Кандинский в книге «О духовном в искусстве» проделал целое исследование особенностей восприятия разных цветов, и много писал именно об их звучании. «Светло-тепло-красное… напоминает звук фанфар, причем труба как бы призвучит — упрямый, навязчивый, сильный тон… Киноварь звучит подобно трубе и может быть поставлена в параллель с сильными барабанными ударами… Фиолетовое… звучит несколько болезненно, как нечто погашенное и печальное… Оно подобно звуку английского рожка, свирели и в глубине вообще глубоким тонам деревянных инструментов, как фагот».

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

При восприятии цвета могут возникать не только звуковые ощущения, но и вкусовые. Некоторые цвета кажутся нам приторными или кислыми, например, густо-розовый и ядовито-желтый. А самыми «вкусными», согласно многочисленным исследованиям, являются оранжевый и коричневый. Оранжевый цвет даже повышает аппетит.

Цветомузыка

Рисунок 7. Эффект синестезии.

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

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

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

Синестезия тесно связана с явлением ассоциаций. Те ощущения и впечатления, которые на нас производят цвета, во многом зависят от нашей привычки связывать их с определенными объектами. Например, ощущения чистоты и прохлады белого и светло-голубого связаны не только с психофизиологическим влиянием этих цветов, но и с ассоциациями. Белый ассоциируется с чистым снегом, и белоснежной простыней, но и с больничной палатой, а в ряде стран с саваном. А голубой вызывает воспоминания и о льде, и о чистом летнем небе, и о прохладной воде.

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

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

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

Пока комментариев нет.

Оставить комментарий