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

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

цветовая схема

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


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

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

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

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

 

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


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

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

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

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

auto

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


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

Beclinic

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


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

семпья

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


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

еда

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


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

финансы

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


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

дизайн

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


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

декор

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


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

магазин

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


style_design_728x90_ru


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

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

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

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

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

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

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

templates_728x90_ru


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

Прокомментируйте первым.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>