Выбираем цветовую схему: что важно знать

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

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

Цветовой круг – помощник при выборе решения

Разрабатывая цветовые сочетания для ресурса, дизайнеры опираются – нет, не на свой художественный вкус – а на цветовой круг. Это простое изобретение станет универсальным (но не единственным) помощником для новичков и опытных специалистов. Круг придумал 350 лет назад Исаак Ньютон. Состоит он из 6 основных цветов и нескольких дополнительных.

Как работать с кругом? Есть несколько вариантов, по ним написана наглядная шпаргалка. Выбираем:

• Любую цветовую пару, находящуюся друг напротив друга.
• Любую тройку цветов, расположенных на равном расстоянии друг от друга (по методу треугольника).
• Любые 4 оттенка, формирующие прямоугольник.

Есть специальные сервисы, помогающие выбрать цветовое решение. Среди них: ColorZilla, Colorotate, Colorccheme и другие.

Какие ассоциации вызывают цвета и когда их использовать?

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

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

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

WordPress шаблон автосайта

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

WordPress шаблон сайта медицинского центра

Желтый стимулирует и тонизирует. Подойдет для площадок, предлагающих детские товары, питание и предметы обихода.

Адаптивный WordPress шаблон семейного портала

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

PrestaShop шаблон сайта ресторана

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

Monstroid2 - многоцелевой WordPress шаблон

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

WordPress Elementor шаблон для коворкинга

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

OpenCart шаблон для магазина декора

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

Magetique - полнофункциональная многоцелевая Magento 2 тема

Используем хорошие сочетания и не используем плохие

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

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

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

• Текст не виден четко на подложке. Особенно от этого страдают люди с плохим зрением и те, кто заходит со смартфона.
• Искажаются пропорции объектов.
• Решения, от многоцветия которых начинают болеть глаза («вырвиглаз»). Большой цветовой разброс мешает сосредоточиться и человек может забыть, зачем он пришел.
• Цвета не подходят для целевой аудитории. Сизо-серая гамма может вызвать уныние у людей постарше. Зато на ней отдохнет глаз пользователей, сутки проводящих за монитором. А фуксия и ярко-розовый неуместны в интернет-магазинах по продаже камнедробилок.

Чтобы подобрать хорошую цветовую схему, можно руководствоваться такими рекомендациями:

1. Стоит определиться с гаммой эмоций, которые призван вызывать сайт и продукт.
2. Для лучшей читаемости текста подойдут контрастные цвета.
3. Темно-серый во многих случаях лучше кардинально черного.
4. Количество цветов должно быть оптимальным. Если их мало, решение может казаться плоским и унылым. Если много – есть риск превратить проект в цирк.
5. Чтобы привлечь посетителей, подойдут интенсивные оттенки.
6. Начинающим дизайнерам для подбора колористической схемы рекомендуют почаще обращаться к природе.
7. Графика на сайте, должна соответствовать его общей тематике.

Советуют также использовать правило 60-30-10. То есть 60% площади выделять на доминирующий цвет (фон), 30% – на второй по значимости (часто это цвет бренда), 10% – на контрастный для важных акцентов (кнопок «купить» и т.д.). Цветовое постоянство и последовательность – лучший помощник дизайнера!