Сочетание цветов в веб-дизайне: создаем персональный блог

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

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

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

Краткий экскурс в психологию и теорию цвета

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

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

1. Основные цвета — это набор цветов, при смешивании которых можно получить любой другой цвет. В основном используют три общепринятых цветовых модели: RGB (red, green, blue — красный, зеленый, синий), CMYK (cyan, magenta, yellow, black — голубой, пурпурный, желтый, черный) и RYB (red, yellow, blue — красный, желтый, синий). Эти модели применяют при печати, на электронных экранах и при рисовании.
2. Вторичный цвет — это цвет, полученный в результате смешивания двух основных цветов в рамках определенной цветовой модели.
3. Третичный цвет — это цвет, полученный в результате смешивания максимальной насыщенности одного основного цвета, половинной насыщенности второго и нулевой насыщенности третьего основного цвета в рамках конкретной цветовой модели. Выделяют 6 третичных цветов: красно-оранжевый, желто-оранжевый, желто-зеленый, сине-зеленый, сине-голубой и красно-фиолетовый.

 

Если вы хотите подробнее изучить теорию цвета, советуем ознакомиться с этим руководством по сочетанию цветов от MotoCMS.

Почему психология цвета важна для блоггеров?

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

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

Источник: Voolf

Нелюбимое сочетание цветов в веб-дизайне для мужчин и женщин такое:

Источник: Voolf

Какие выводы можно сделать, изучив эти диаграммы?

1. Как мужчинам, так и женщинам не нравятся желтый и оранжевый цвета.
2. Женщины предпочитают желтый цвет оранжевому.
3. Мужчины предпочитают оранжевый цвет желтому.

Заметно также, что респонденты-мужчины предпочитают оттенки серого или чистые ахроматические цвета; женщины же предпочитают ненасыщенные оттенки.

Какое сочетание цветов в веб-дизайне будет наиболее успешным для вашего блога? Если вы публикуете в основном контент для мужчин, стоит сделать выбор в пользу зеленого цвета и оттенков серого. Давайте рассмотрим пример типичного сайта об автомобилях — ведь это преимущественно “мужская тематика”. Дизайн этого сайта выполнен в серых и темно-зеленых оттенках. К тому же, дизайн содержит классические читабельные шрифты и запоминающиеся графические элементы. Этого достаточно, чтобы заинтересовать мужскую аудиторию.

бесплатный тест

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

бесплатный тест

Где использовать цвета в блоге?

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

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

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

К слову, готовые шаблоны для конструкторов сайтов — быстрый и удобный вариант как для опытных веб-дизайнеров, так и для новичков. К примеру, благодаря drag-and-drop функционалу платформы MotoCMS вы можете создать уникальный дизайн, просто размещая нужные элементы на соответствующих участках страницы. Если вы хотите увидеть больше примеров применения психологии цвета на конкретных сайтах, предлагаем ознакомиться с обзором цветов, подходящих для дизайна медицинского сайта.

Как видите, успешное сочетание цветов в веб-дизайне — отличный инструмент для привлечения целевой аудитории. Даже если вы не веб-дизайнер, знания теории цвета вам точно не помешают. А какое сочетание вы считаете лучшим для вашего сайта или блога? Расскажите в комментариях!