Психологія кольорів у веб-дизайні: як вибрати колірну палітру, щоб підвищити конверсію сайтів

Print Friendly, PDF & Email

Згідно з дослідженням Kissmetrics, відвідувач у перші 90 секунд ухвалює рішення, чи залишатися на сайті. При цьому, за різними підрахунками, 65-90% користувачів формують враження на основі кольору сайту. Тому психологія кольору у дизайні дуже важлива.

Як кольори впливають на людину, як вибрати колір для вашої ніші, як зробити бренд впізнаваним і яких кольорів у дизайні краще уникати для стимулювання продажів – обговоримо сьогодні в нашій статті.

У кольору сайту багато функцій. Він можете робити веб-сайт незабутнім, а роботу користувачів — приємною. Він може викликати емоційну реакцію та підвищити конверсію.

Колір також допомагає побудувати ієрархію контенту, щоб зосередити увагу на ключовій інформації та закликах до дії. Давайте розглянемо, які кольори в дизайні краще використовувати і які емоції вони передають.

Розбір найпопулярніших кольорів у дизайні

1. Червоний

Червоний — колір, що продає, символ сили, енергії, пристрасті, терміновості. Легко привертає увагу і може викликати сильні та миттєві реакції. Так як колір дуже популярний, радимо експериментувати з відтінками червоного. Через здатність переконувати діяти “тут і зараз”, активно використовується для оформлення розпродажів та мереж швидкого харчування. Якщо потрібна швидка конверсія, використовуйте червоний.

2. Зелений

Колір здоров’я, безпеки, гармонії, вірності, безпеки (зокрема фінансової). Підходить брендам, які прагнуть викликати у клієнтів почуття захищеності. У магазинах часто використовують зелений, щоб розслабити покупців і зробити їх більш рішучими в покупках (до речі, це одна з причин, чому на вході до супермаркетів розташовані полиці із зеленими овочами та фруктами).

У психології кольору в дизайні цей колір асоціюється з природою і зазвичай використовується, щоб наголосити на екологічності брендів. Фінансові компанії можуть його використати, щоб асоціювати бренд із почуттям багатства та підвищити конверсію.

3. Синій

Найкращий колір, щоб викликати у клієнтів довіру, тому активно використовується компаніями у сфері медицини та фінансів. Синій викликає відчуття захищеності, впевненості та надійності і легко сприяє довірі. Синій стимулює продуктивність мозку, його пов’язують із спілкуванням та інтелектом і часто використовують у соцмережах. Додаткові властивості синього – здатність знижувати тривогу перед покупкою, підвищуючи конверсію.

4. Рожевий

Рожевий – це яскравий колір, який складно не помітити. Він налаштовує клієнтів на хвилю натхнення, романтики, надії та хвилювання. Відмінно підійде, якщо ваша мета – викликати в людини спогади з дитинства, спрямувати у світ фантазій. Тобто для продавців десертів, косметики, іграшок та товарів для дітей. Рожевий стане чудовим рішенням і для досвідчених брендів, які хочуть розширити цільову аудиторію та покращити показники конверсії серед молодих людей.

5. Фіолетовий

Значення кольору досить широке. Фіолетовий нагадує людям про повагу, престиж, вишуканість, шляхетну королівську велич, елегантність. Вибирайте його, якщо у вас товар високого класу і він має викликати розкіш. Відмінно підходить для зображення “шляхетної красивої старості” – тобто для підвищення конверсії антивікових продуктів. За потреби він може викликати почуття загадковості, незамінне для химерних брендів.

6. Жовтий

Перший колір, який спадає на думку при словах “щастя”, “тепло”, “позитив”, “світло” — жовтий. Жовтий сайт – чудовий спосіб зарядити людей почуттям оптимізму, надії, мотивації та підбадьорення. Іноді жовтий мимоволі наголошує на доступності продукту і підвищує конверсію продуктів з доступною ціною. Тим не менш, з жовтим треба бути акуратним: у великих кількостях він, замість покращення настрою, може викликати збудження та занепокоєння.

7. Золото

Золотий — це основний колір розкішних брендів, який завжди асоціювався з багатством, гламуром та перемогою. Зазвичай золотий викликає підсвідоме переконання, що перед вами якісний продукт. Однак у використанні золотого є свої особливості. Як ви пам’ятаєте, жовтий асоціюється з доступністю (тобто дешевизною). Тому якщо товар дорогий, для підвищення конверсій у маркетингу краще використовувати золотий з коричневими чи червоними тонами.

8. Помаранчевий

Золотий баланс між оптимістичним жовтим та енергетичним червоним. Як результат – люди відчувають спрагу спілкування, бадьорість, збудженість. Прекрасний варіант підвищення конверсії для брендів, які хочуть викликати потяг до пригод, для інноваційних та крутих продуктів. Правильний відтінок підвищує відчуття дружелюбності та життєвої сили, налаштовує на позитивну хвилю. Але придивіться до помаранчевого, який використовується на попереджувальних знаках. Краще не використовувати його, щоб не викликати зайвого почуття занепокоєння.

9. Чорний

Якщо ви шукаєте колір сили, авторитету, стабільності та влади, вибирайте чорний.

Він ідеальний, якщо треба передати таємницю, вишуканість, позачасовість та розкіш. Це універсальний колір, який створює гармонію між контрастними кольорами і чудово виглядає сам собою. Залежно від контексту чорний може передавати і традиційний, і сучасний характер бренду. Тому може підвищити конверсію практично будь-якого бренду.

10. Білий

Білий – незамінний колір для сайту послуг клінінгу та галузі охорони здоров’я. Передає чистоту та простоту, може використовуватись як чисте полотно з безмежними можливостями для творчості. Радимо використовувати для підвищення конверсії брендам, які мотивують клієнтів створювати щось своє. Білий часто зустрічається у дизайні мінімалістського бренду, у поєднанні з контрастними кольорами. Однак тут варто уважно поставитися до аудиторії вашого бренду. У Китаї, Японії та інших країнах Далекого Сходу білий асоціюється не з довірою, м’якістю та шляхетністю, а з жалобою.

11. Сірий

Сірий – колір скромності. А ще переваги, стабільності та практичності. Викликає почуття довіри та професіоналізму та активно використовується компаніями з виробництва обладнання, а також технологічними, транспортними та фінансовими компаніями. Але потрібно використовувати колір акуратно, тому що сірий сайт може підкреслити несерйозність та традиціоналізм бренду, а нудність та прісність. У результаті конверсія, навпаки, знизиться.

12. Коричневий

Заспокійливий землистий коричневий колір дарує людям відчуття простоти. Допомагає брендам відбудувати образ безпеки, стабільності, надійності та довговічності. Також підходить для підвищення конверсій для компаній, пов’язаних із природою. Як і у випадку із сірим, потрібно використовувати акуратно, щоб не зробити сайт нудним та прісним.

13. Срібло

Срібло – це гладкий колір елегантності та витонченості. Використовується для підвищення конверсії сайтів товарів високого класу для створення відчуття багатства. Тож срібло можна часто зустріти на сайтах ювелірних брендів. Крім цього, срібний використовується для промислових чи технологічних товарів, які пов’язані з машинами.

14. Веселка

У багатьох успішних брендів на сайті можна зустріти різні кольори веселки. Таке рішення дає змогу передати універсальність. Тому можна дивитися у бік веселки, якщо ваша мета показати орієнтованість на широку базу клієнтів. Але варто добре подумати, перш ніж звертатися до такого прийому, щоб не спровокувати думку, що бренд нерішучий чи не може визначитись із категорією клієнтів. У цьому випадку конверсія може зменшитися.

Більш детально попрактикуватися у підборі кольорів та вивчити значення кольору у підвищенні конверсії ви можете на курсі “Web-дизайнер з 0”. Ви отримаєте структуроване знання, тотальну практику та досвід найкращих спікерів у своєму напрямку.

Швидкий чек-лист кольорів для сайту по галузях

  • Синій: медицина, наука, комунальні послуги, уряд, охорона здоров’я, персонал, юриспруденція, інформаційні технології, стоматологія, корпорація.
  • Сірий: автомобілі, журналістика, спортивний одяг, технології.
  • Червоний: мода, макіяж, їжа, знайомства, відеоігри, роздрібна торгівля, автомобілі, обладнання, потокове відео.
  • Помаранчевий: напої, роздрібна торгівля, фітнес
  • Жовтий: автомобілі, роздрібна торгівля, продукти харчування, технології, будівництво.
  • Рожевий: медицина (педіатрія, акушерство та гінекологія), продукти харчування, косметика, роздрібна торгівля.
  • Зелена: медицина, наука, уряд, набір персоналу, екологічний бізнес, туризм, людські ресурси, фінанси.
  • Чорний: будівництво, корпорація, нафта, фінанси, мода, виробництво, косметика, видобуток корисних копалин, маркетинг, торговці.

Цікаві соціально-демографічні особливості сприйняття кольорів

  1. Маленькі діти зазвичай віддають перевагу яскравим кольорам для сайту: синій, жовтий, помаранчевий, зелений і фіолетовий, червоний, а також, як не дивно, вони віддають перевагу блокам кольорів замість яскравих візерунків.
  2. Улюблені кольори чоловіків – синій (57%), зелений (14%), чорний (9%) та червоний (7%). Менше 5% чоловіків заявили, що їх улюбленим кольором був помаранчевий, жовтий, коричневий, сірий або білий, і 0% чоловіків назвали фіолетовим своїм улюбленим кольором. Улюблені кольори жінок – синій (35%), фіолетовий (23%), зелений (14%), червоний (9%) та чорний (6%). Менш ніж 5% жінок заявили, що їх улюбленим кольором є помаранчевий, жовтий, коричневий, сірий чи білий. Використовуйте ці знання для підвищення конверсії.
  3. Підлітки віддають перевагу чорному кольору і складнішим кольоровим комбінаціям.
  4. Дорослі зазвичай віддають перевагу приглушеним кольорам.
  5. Люди старше 65 років, як правило, не люблять жовтий колір і віддають перевагу синім, рожевим і зеленим. Психологія кольору в дизайні свідчить, що більш високу конверсію отримають спокійні відтінки, а не яскраві та стимулюючі. Що цікаво: любов до фіолетового прямо пропорційна віку жінок.
  6. Люди з робітничого класу, як правило, віддають перевагу яскравішим відтінкам основних і другорядних кольорів. А ось більш заможні люди схильні до складніших кольорових комбінацій. Вони часто віддають перевагу третинним кольорам з різними відтінками.
  7. Чим вище освіта у людини, тим більше шансів, що вона вибиратиме складніші колірні поєднання. Добре освічені люди, як правило, воліють третинні кольори, у той час як менш освічені люди воліють первинні та вторинні кольори.
  8. Люди, як правило, віддають перевагу кольорам, які відображають колірну палітру їх клімату. Люди, що живуть у тропічному кліматі, краще реагують на яскраві, теплі кольори, тоді як люди, які живуть у холодніших кліматах, віддають перевагу більш приглушеним кольорам.

Найуніверсальніші кольори у веб-дизайні

Приблизно 8% чоловіків і 0,5% жінок страждають на різні форми дальтонізму. Щоб вони могли читати текст на кольоровому фоні, важливим є використання кольорів з високим значенням контрасту. Чим універсальніший бренд, тим важливіше враховувати специфіку зору споживачів підвищення конверсії.

Facebook використовує синій як основний колір не тому, що це улюблений колір засновника компанії Марка Цукерберга. Насправді Марк дальтонік і погано розливає червоно-зелену гаму. Синій колір він бачить найкраще. Червоно-зелена сліпота є найпоширенішою формою дальтонізму — і на аудиторії кілька мільярдів це суттєво.

Просто майте цей факт на увазі, коли провокуватимете конверсію.

Як поєднувати кольори в дизайні?

За визначенням Вікіпедії, Колірний круг– спосіб представлення кольорів видимого спектра в умовній формі, що позначає різні моделі кольорів. Сектори кола представляють обумовлені кольори, які розміщені в порядку умовно близькому до розташування в спектрі видимого світла, причому в коло доданий умовний пурпуровий колір, який пов’язує крайні спектральні кольори.

В ідеалі, для максимальної конверсії палітра повинна бути обмежена двома або трьома кольорами, щоб не ускладнюють дизайн сайту і перевантажують користувачів. Найбільш поширені палітри кольорів зазвичай діляться на наступні категорії:

Монохроматичний – використовуються відтінки або відтінки одного кольору.

Аналоговий – використовуються кольори, розташовані поруч один з одним на колі.

Додатковий — створюється з двох кольорів, що розташовані навпроти один одного на кольоровому колі. Відповідно до психології кольору в дизайні, вони дуже добре працюють там, де потрібний високий рівень контрасту.

Спліт-комплементарність — як і комплементарність, у якій використовується протилежний колір, у цій палітрі використовуються два протилежні кольори.

Тріадний — створюється з трьох кольорів, рівномірно розподілених по колірному колу.

Тетрадика — також відома як прямокутник, використовує чотири кольори. Це дозволяє вносити безліч варіацій у дизайн.

4 помилки у виборі кольорів, які слід уникати

1. Не використовуйте чистий чорний (#000000)

Чистий чорний візуально часто виглядає надто пригнічуючим. Насправді нічого ніколи не буває на 100% чорним: ні волосся, ні вугілля, ні смарт-телевізор. Bootstrap і Foundation, інтерфейс користувача Photoshop, клавіші на вашому MacBook не повністю чорні. Психологія кольору в дизайні радить додати трохи м’якого кольору в наш чорний колір: навіть щось на зразок #111111 буде набагато більше підходити для очей.

2. Червоний і зелений ніколи не повинні бути видно

Ви не повинні поєднувати ці два кольори через дейтеранопію — форму дальтонізму, через яку важко розрізняти два кольори. Крім цього, така комбінація плутає емоції. Червоний означає «ні», а зелений означає «так», як пояснюють вчені-біхевіористи та різні експерти з досвіду користувача. Тому червоно-зелені сайти мають чисто низькі конверсії.

3. Неонові кольори

Неонові кольори можуть бути неймовірно красивими, яскравими та привабливими кольорами у мистецтві та ілюстрації. Тим не менш, у дизайні веб-сайтів вони викликають огиду та загальне роздратування. Відповідно до психології кольору в дизайні, доречно їх використовувати лише в ретро-темі, або фоновому зображенні, що сприяє емоціям та настрою дизайну. Однак як елементи інтерфейсу користувача і тексту неонові кольори краще не використовувати.

4. Яскраві кольори з яскравими кольорами

Використовуючи яскраві кольори поверх яскравіших кольорів, ви ризикуєте викликати миттєву мігрень. Використовуючи занадто багато різких, висококонтрастних відтінків поруч один з одним, ви плутаєте очі та мозок. Але і білі кольори на світлому фоні мають той самий ефект: будьте обережнішими.

Інструменти, які допоможуть вам вибрати правильні кольори

Коли справа доходить до дизайну веб-інтерфейсу, вам не потрібно знову винаходити колірне коло. Достатньо підібрати колір за допомогою одного з найпопулярніших інструментів — і він сам врахує психологію кольору в дизайні.

  • Adobe Color CC — надійний помічник користувачів Adobe.
  • Paletton — проста палітра кольорів для початківців.
  • Flat UI Color Picker — ідеальний для створення барвистих плоских дизайнів.
  • Mudcube Color Sphere — пропонує вибір тем і надає HEX-числа.
  • Check My Colors — використовується для перевірки комбінацій кольорів переднього плану та фону, а також для того, щоб він мав правильний контраст для використання людьми з дальтонізмом.

Пам’ятайте: висока конверсія — це не тільки вміння переконати клієнтів на рівні логіки, а й здатність керувати їх емоціями. Використовуйте наші поради для підбору квітів і створюйте сайти для стимулювання продажів, які потрапляють у серце цільової аудиторії!

А може, ви веб-дизайнер, який хоче прокачати свої скіли? Чи маєте 0 досвіду у веб-дизайні, але вам дуже подобається ця професія і ви хотіли б розвиватися в ній?

Тоді реєструйтесь на курс “Web-дизайнер з 0” та переймайте досвід найкращих практиків ринку, які допоможуть вам вивчити психологію кольору в дизайні, освоїти професію та вийти на дохід від 2000 доларів на місяць.