Как цветовое решение сайтов и приложений влияет на конверсию
✅Принцип первый. Использование цветового круга
При разработке визуального дизайна цветовое колесо используется для выбора наиболее подходящих друг другу цветов — они или отстоят друг от друга на противоположных сторонах круга, или располагаются рядом. В первом случае получается контрастное сочетание, подходящее для выделения элементов. Во втором — гармоничный плавный переход от одного оттенка к другому, который используется, когда не нужны визуальные акценты.
✅Принцип второй. Использование цветовых схем
Чтобы управлять вниманием, нужно уметь расставлять графические и композиционные акценты. Наиболее удачная схема для конверсий — та, в которой есть один явный цветовой акцент. Им обычно и выделяются элементы, с которыми пользователю нужно взаимодействовать.
✅Принцип третий. Баланс цветов
Чтобы добиться сбалансированного решения, которое будет лучшим образом управлять пользовательским вниманием, рекомендуется комбинировать цвета в соотношении 60/30/10:
60% — доминирующий цвет.
30% — дополнительный цвет (можно использовать два оттенка одного).
10% — цветовые акценты.
Согласно этому правилу, в визуальном дизайне 60% занимает фон, 30% — заголовки и меню, 10% — элементы, к которым нужно привлечь наибольшее внимание: призывы к действию, кнопки и ссылки.
До идеального соответствия доводить не стоит. Главная мысль — должны быть основные цвета и цвета для акцентов.
✅Принцип четвертый. Связь размера текста и его контраста
Контраст — это не только сочетание комплементарных цветов (те цвета, которые располагаются друг напротив друга на круге). В первую очередь контраст — это акцентирование. Он помогает выделить наиболее важные элементы и обратить на них внимание пользователя.
Текст с разным кеглем (размером шрифта) имеет разные требования к контрасту с фоном. Более крупный текст может быть менее контрастным без ущерба для восприятия. И наоборот, мелкий текст должен быть более контрастным — для того, чтобы читаемость была хорошей. W3C советует придерживаться минимальных контрастных соотношений:
4,5:1 — для текста, набранного кеглем до 14 pt в жирном начертании и до 18 pt — в обычном.
3:1 — для крупного текста.
✅Принцип пятый. Психология цветов
Есть еще один принцип, к которому чаще всего и апеллируют заказчики сайтов — эмоциональная составляющая цветов. Именно поэтому мы так редко встречаем сайты, цветовые акценты на которых расставлены коричневым — он просто никому не нравится.
У людей сформировались стереотипы, относящиеся к цветам. И с этим тоже нужно считаться. Кстати, мода наряжать новорожденных мальчиков в синее, а девочек — в розовое пришла только после Первой мировой войны. До этого цветового стереотипа «синее для него, розовое для нее» просто не существовало.
Опрос американского дизайнера Джо Халлока показал, с какими качествами люди наиболее часто связывают разные цвета:
✔Доверие: синий (34%), белый (21%), зеленый (11%).
✔Безопасность: синий (28%), чёрный (16%), зеленый (12%).
✔Скорость: красный (76%).
✔Доступность: оранжевый (26%), жёлтый (22%), коричневый (13%).
✔Высокое качество: чёрный (43%), синий (20%).
✔Технологичность: черный (26%), серый (23%), синий (23%).
✔Надёжность: синий (43%), черный (24%).
✔Мужество: фиолетовый (29%), красный (28%), синий (22%).
✔Юмор: оранжевый (28%), желтый (26%), фиолетовый (17%).
Мужчины и женщины воспринимают цвета по-разному. Универсальный цвет — голубой, его предпочитают 57% мужчин и 35% женщин. Коричневый цвет вызывает отторжение у мужчин, а оранжевый — у женщин. В обоих случаях наименее привлекательные цвета называли «дешёвыми». С возрастом и у мужчин, и у женщин усиливается неприязнь к жёлтому и оранжевому. Представители обоих полов предпочитают холодные оттенки на сайтах — 56% мужчин и 76% женщин.
#цвета #цветовыесочетания #психология #маркетинг #цветовоерешение #сайт
