Головна » Блог » CRO | Юзабіліті і підвищення конверсії сайту » Як вибрати гамму кольорів для дизайну сайту?

Як вибрати гамму кольорів для дизайну сайту?

23.02.2021

Ольга Коцофане, головний редактор блогу Webpromo


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

Колірна гамма логотипу мережі швидкого харчування

Як виглядає логотип Subway

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



 

Чому колірна гамма сайту така важлива?

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

Коли деякі компанії експериментували з кольорами кнопок, вони помічали різкі сплески або зниження конверсії. Наприклад, компанія Beamax, яка виробляє проекційні екрани, помітила колосальне зростання числа кліків за червоними посиланням на 53,1% в порівнянні з тими ж посиланнями, написаними традиційним синім текстом.

І це не просто кліки — дослідження психологічного впливу квітів показало, що кольори підвищують впізнаваність бренду в середньому на 80%. Наприклад, варто подумати про Coca-Cola — і ви, швидше за все, відразу представите їх яскраві червоні банки.

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

 

Як вибрати колірну схему для вашого сайту

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

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

Однак, якщо ви хочете охопити ширшу аудиторію, має сенс вибрати синій — обнадійливий, спокійний колір, який добре підходить для більш делікатних тематик, таких як охорона здоров’я або фінанси.

Основний колір

Кращий спосіб вибрати основний колір — це подумати про атмосферу вашого продукту або послуги і переглянути кольору, які відповідають цим напрямком. Ось деякі приклади:

  • Червоний (Coca-Cola, Nintendo). Асоціюється з хвилюванням або щастям.

    Дизайн сайту Coca Cola

    Дизайн сайту Coca Cola

  • Помаранчевий (Nickelodeon, Fanta). Каже, що попереду активну і веселе проведення часу.

    Дизайн сайту з основним кольором помаранчевим

    Дизайн сайту, де основний колір – помаранчевий

  • Жовтий (Nikon, McDonalds). Символізує оптимізм і щастя.

    Дизайн сайту з основним кольором жовтим

    Дизайн сайту з жовтим кольором в основі гами

  • Зелений (Subway, Greenpeace). Асоціюється зі свіжістю і природою. Часто використовується в рекламі органічних продуктів харчування та природоохоронних організацій.

    Дизайн сайту з зеленим кольором в основі гами

    Дизайн сайту з зеленим кольором в основі гами

  • Синій (Walmart, American Express). Має на увазі надійність і впевненість.

    Як вибрати колірну гамму сайту

    Приклад дизайну сайту з синім основним кольором

  • Фіолетовий (Hallmark, Cadbury). Підкреслює надійність бренду, багату історію, ексклюзивність, якість.

    Яким кольором зробити сайт

    Використання фіолетового як основного кольору в дизайні сайту

  • Коричневий (Nespresso, UPS). Асоціюється з якістю і доступністю; підкреслює, що даним продуктом може користуватися будь-хто.

    Як вибрати колір для дизайну сайту

    Використання коричневого в дизайні сайту

  • Чорний (Chanel, Adidas). Викликає асоціації з розкішшю, елегантністю.

    Як скласти колірну схему для дизайну сайту

    Як вібрато колір для дизайну сайту

  • Білий (Apple, Nike). Має на увазі технологічні, зручні для користувача продукти.

    Білий колір в основі кольорової палітри сайту

    Білий колір в Основі кольорової палітрі сайту

Якщо у вас вже є кольоровий логотип, має сенс вибрати основний колір, відповідний вашої фірмової символіки. Наприклад, на сайті Nintendo домінує червоний колір.

Порада! При виборі кольору(ів) для сайту не забудьте зберегти шістнадцятковий код для кожного.

Додаткові відтінки

Після того як ви визначилися з основним кольором, саме час обрати інші кольори, які ви будете використовувати. Гарною відправною точкою тут є розгляд колірних поєднань. У кожного відтінку є свій «партнер», який ідеально поєднується з ним.

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

Порада! Постарайтеся вибрати тільки один або два кольори крім основного. Якщо відтінків буде більше, вам доведеться боротися з безладом. Ніщо не буде виділятися, якщо ви будете завалювати відвідувачів безліччю різних стимулів.

Хорошим прикладом використання додаткових квітів є сайт продажу слухових апаратів Eargo. Його основний колір – помаранчевий, тому розробники використовували більш тьмяний синій колір, щоб виділити найбільш важливий розділ свого веб-сайту. Цей синій контрастує з яскраво-оранжевим, який також виділяє важливі елементи, такі як кнопка «Додати в корзину» і логотип.

Корисно! Для роботи з квітами рекомендуємо використовувати спеціальні сервіси. наприклад:

  • Cohesive Colors — дозволяє швидко створювати колірні схеми;
  • Colorblender — на основі вибраних вами основних кольорів можна отримати готову палітру;
  • Coolors — генератор готових колірних схем;
  • Colorsafe — ще один генератор кольорової палітри, але вже з можливістю попередньо вказати стиль і розмір шрифту, а також основний колір.

    Колірна палітра для дизайну сайту

    Приклад результату, який ви можете отримати при автоматичній генерації палітри сайту

Колір фону

Це важливий вибір, оскільки фон вашого сайту теоретично буде перетягувати на себе найбільше уваги. Проте визначитися досить просто, оскільки насправді вибір зводиться до двох варіантів.

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

В якості альтернативи ви можете просто зробити фон сайту білим (або наближеним до нього), що є більш поширеним вибором. Це нешкідливо і не завадить тексту, зображень або посилань привабливо виглядати на будь-якій сторінці. Ось приклад такого рішення:

Яскраві зелені елементи дизайну на білому тлі

Яскраві зелені елементи дизайну на білому тлі



Текст

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

Чорний шрифт на білому тлі може викликати втому очей, так як тут мова йде про стовідсоткове контрасті — і люди з більшою ймовірністю покинуть сторінку, якщо ваш сайт буде важко читати.

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

 

Корисні поради

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

Щоб зміцнити свій бренд, ви можете використовувати різні кольори з однаковою насиченістю. Насиченість – це ще один спосіб позначити яскравість кольору. Подивіться, як виробник напоїв Innocent використовує кольори на своєму сайті. Це відмінний приклад: в дизайні використовується шість різних кольорів, але жоден з них не здається недоречним або неприємним. Це тому що їх насиченість приглушена до одного і того ж рівня.

Щоб відтінки гармонійно виглядали в дизайні, їм потрібно надати однакову насиченість

Щоб відтінки гармонійно виглядали в дизайні, їм потрібно надати однакову насиченість

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

Різні рівні яскравості одного кольору теж виглядають оригінально і цікаво

Різні рівні яскравості одного кольору теж виглядають оригінально і цікаво

 

Також читайте інші статті в блозі Webpromo:

І підписуйтесь на наш Telegram-канал про маркетинг.

Последние материалы рубрики

Як розробити лендінг в сервісі SendPulse

Як розробити лендінг в сервісі SendPulse

Раніше ми розглянули анатомію лендінгу, етапи його підготовки. Для вибору посадкової сторінки вам не знадобляться знання коду або...

Spark Ads — новий нативний формат реклами для брендів в TikTok

Spark Ads забезпечує більш високі результати від проведення рекламних кампаній при мінімальному бюджеті. Новий нативний формат об'єднує...

Як створити і використовувати воронки продажів в маркетингу? Відстежуємо воронку за допомогою Google Analytics

Як створити і використовувати воронки продажів в...

Що таке воронка продажів, як створити і використовувати, для чого відстежувати ваші воронки в Google Analytics? Все, що ви хотіли дізнатися про...

Landing Page від А до Я Підготовка ефективного лендінгу: 8 кроків до високих продаж

Підготовка ефективного лендінгу: 8 кроків до високих...

Перед розробкою лендінгу потрібно продумати весь шлях потенційного клієнта. Як? Конвертувати ліди в клієнтів із залученням трафіку?...

Залишились питання?
Наші експерти готові відповісти на них

 

Зв’яжіться за вказаним нижче телефоном з нашим менеджером або скористайтеся послугою «Зателефонуйте мені». Ми зв’яжемося з вами найближчим часом.

Кожен в команді— майстер своєї справи
Ціную Webpromo за гнучкість
Команда Webpromo, як продовження нашого відділу маркетингу
Спокійний за просування своїх проєктів в інтернеті