Магия цвета во многом определяет поведение человека в интернете. Правильно подобранная палитра сайта вызовет нужные эмоции. Именно их задача – подтолкнуть посетителя к прогнозируемым действиям. Например, заказать товар.
Оттенки интерфейса прямо влияют на конверсию. Используя разные сочетания цветов, можно повысить активность аудитории, вогнать ее в депрессию, спровоцировать головную боль или изгнать все мысли из головы, кроме одной: «купить».
Цветовой круг – помощник при выборе решения
Разрабатывая цветовые сочетания для ресурса, дизайнеры опираются – нет, не на свой художественный вкус – а на цветовой круг. Это простое изобретение станет универсальным (но не единственным) помощником для новичков и опытных специалистов. Круг придумал 350 лет назад Исаак Ньютон. Состоит он из 6 основных цветов и нескольких дополнительных.
Как работать с кругом? Есть несколько вариантов, по ним написана наглядная шпаргалка. Выбираем:
- Любую цветовую пару, находящуюся друг напротив друга.
- Любую тройку цветов, расположенных на равном расстоянии друг от друга (по методу треугольника).
- Любые 4 оттенка, формирующие прямоугольник.
Есть специальные сервисы, помогающие выбрать цветовое решение. Среди них: ColorZilla, Colorotate, Colorccheme и другие.
Какие ассоциации вызывают цвета и когда их использовать?
При выборе гаммы стоит ориентироваться на то, что предлагает ресурс. В любом случае, белый – универсальный цвет и подойдет практически всегда. Он, а также серый, будет идеальным фоном. А на темном фоне яркие продукты и предложения будут выглядеть более сочными и объемными. Можно посмотреть, как реализуют эти идеи известные украинские онлайн-магазины, об этом есть статья.
Связь между цветами и продажами исследуют здесь и хорошо – здесь. Дельные советы от специалистов приведены в статье. Основываясь на психологическом воздействии цветов, можно рекомендовать использовать их так:
Красный возбуждает нервную систему и улучшает настроение. Он подойдет производителям питания, авто, техники, сельхозоборудования. И, как ни странно, медучреждениям.
Голубой расслабляет нервы. Будет хорош на сайтах энергетических и финансовых компаний, авиационных перевозчиков, клиник, сельхозпроизводителей.
WordPress шаблон сайта медицинского центра
Желтый стимулирует и тонизирует. Подойдет для площадок, предлагающих детские товары, питание и предметы обихода.
Адаптивный WordPress шаблон семейного портала
Оранжевый также тонизирует, возбуждает и даже улучшает пищеварение. Он понравится родителям, которые приходят на сайты детских игровых центров. Удачно впишется в дизайн страниц по продаже товаров для детей, компаний в сфере высоких технологий и здравоохранения.
PrestaShop шаблон сайта ресторана
Фиолетовый активизирует мозговую деятельность. Подойдет для финансовых и технологических компаний, аптек, медцентров.
Monstroid2 - многоцелевой WordPress шаблон
Зеленый помогает сконцентрироваться и успокоиться. Хорошо себя проявит в сферах энергетики и финансов, технологий, для продажи продуктов питания.
WordPress Elementor шаблон для коворкинга
Серый и коричневый консервативны, располагают к отдыху и отсылают к природе. Впишутся в дизайн площадок по продаже авто, стройматериалов, продуктов, одежды и аксессуаров.
OpenCart шаблон для магазина декора
Розовый подпитывает чувственность. Используется на женских и детских сайтах, при продаже косметики.
Magetique - полнофункциональная многоцелевая Magento 2 тема
Используем хорошие сочетания и не используем плохие
С колористикой площадки главное не перестараться. Недаром на странице студии Артемия Лебедева написано, что у сотрудников аллергия на креативные решения. Сайт и интернет-магазин не всегда подходят для креатива. Лучше применять проверенные методы и схемы, которые действительно работают. Специально
В этой статье приведены правила выбора цветов и примеры хороших сочетаний с картинками. Там же внизу есть шаблоны для вдохновения. Забавно, но плохая колористика часто свидетельствует о плохом юзабилити. Вот примеры, как делать не надо.
Неудачными можно назвать колористические комбинации, когда:
- Текст не виден четко на подложке. Особенно от этого страдают люди с плохим зрением и те, кто заходит со смартфона.
- Искажаются пропорции объектов.
- Решения, от многоцветия которых начинают болеть глаза («вырвиглаз»). Большой цветовой разброс мешает сосредоточиться и человек может забыть, зачем он пришел.
- Цвета не подходят для целевой аудитории. Сизо-серая гамма может вызвать уныние у людей постарше. Зато на ней отдохнет глаз пользователей, сутки проводящих за монитором. А фуксия и ярко-розовый неуместны в интернет-магазинах по продаже камнедробилок.
Чтобы подобрать хорошую цветовую схему, можно руководствоваться такими рекомендациями:
- Стоит определиться с гаммой эмоций, которые призван вызывать сайт и продукт.
- Для лучшей читаемости текста подойдут контрастные цвета.
- Темно-серый во многих случаях лучше кардинально черного.
- Количество цветов должно быть оптимальным. Если их мало, решение может казаться плоским и унылым. Если много – есть риск превратить проект в цирк.
- Чтобы привлечь посетителей, подойдут интенсивные оттенки.
- Начинающим дизайнерам для подбора колористической схемы рекомендуют почаще обращаться к природе.
- Графика на сайте, должна соответствовать его общей тематике.
Советуют также использовать правило 60-30-10. То есть 60% площади выделять на доминирующий цвет (фон), 30% – на второй по значимости (часто это цвет бренда), 10% – на контрастный для важных акцентов (кнопок «купить» и т.д.). Цветовое постоянство и последовательность – лучший помощник дизайнера!