Як вибрати гамму кольорів для дизайну сайту?
Колір — важливий аспект брендингу. Наприклад, ви могли помітити, що майже кожен ресторан швидкого харчування використовує червоний і жовтий у своїх логотипах, оскільки ці кольори заохочують апетит і налаштовують на позитив. А, наприклад, Subway віддає перевагу зеленому кольору, щоб зробити акцент на свіжості продуктів.
Як виглядає логотип Subway
Якщо вже палітра настільки важлива для бренду, є сенс використовувати фірмові кольори й для сайту. До підбору колірної гами для вашого сайту необхідно поставитися максимально відповідально.
Чому колірна гамма сайту така важлива?
Як уже було зазначено вище, відтінки та їхні поєднання викликають певні емоції та асоціації. Ви здивуєтеся, побачивши, наскільки палітра кольорів для сайту може вплинути на прибуток компанії. Згідно з маркетинговими дослідженнями, близько 85% людей вважають, що колір має великий вплив на їхні покупки.
Коли деякі бренди експериментували з кольорами кнопок, вони помічали різкі сплески або зниження конверсії. Наприклад, компанія Beamax, що виробляє проєкційні екрани, помітила колосальне зростання кількості кліків за червоними посиланнями — аж на 53,1% порівняно з тими самими посиланнями, написаними традиційним синім текстом.
І це не просто кліки — дослідження психологічного впливу відтінків показало, що кольори підвищують впізнаваність бренду в середньому на 80%. Наприклад, варто подумати про Coca-Cola — і ви, найімовірніше, одразу уявите їхні яскраві червоні банки.
Однак не слід думати, що вибір червоного гарантовано зробить вас впізнаваними й успішними. Має сенс поекспериментувати з кольорами та їх поєднаннями, поки ви не знайдете свою ідеальну комбінацію.
Як вибрати колірну схему для вашого сайту
Тепер ви знаєте, наскільки важливі кольори для брендингу та досвіду використання вашого веб-ресурсу. Залишається зрозуміти, яка колірна гама для сайту підійде саме вашому бренду.
Спочатку потрібно чітко зрозуміти, що саме ви продаєте, які послуги надаєте. Наприклад, якщо ви хочете зробити акцент на якості та ексклюзивності, ідеально підійде фіолетовий, оскільки люди асоціюють його з королівською владою, високою якістю, привабливою інтригою.
Якщо ви хочете охопити ширшу аудиторію, має сенс вибрати синю колірну гаму для сайту — цей обнадійливий спокійний тон добре підходить для делікатних тематик, таких як охорона здоров’я або фінанси.
Основний колір
Найкращий спосіб вибрати основні тони для сайту — подумати про атмосферу вашого продукту або послуги і подивитися палітри, які відповідають цьому напрямку. Ось деякі приклади:
- Червоний (Coca-Cola, Nintendo). Асоціюється з хвилюванням, щастям, захопленістю.
Дизайн сайту Coca Cola
- Помаранчевий (Nickelodeon, Fanta). Каже, що попереду активне і веселе проведення часу.
Дизайн сайту, де основний колір – помаранчевий
- Жовтий (Nikon, McDonalds). Символізує оптимізм і щастя.
Дизайн сайту з жовтим кольором в основі гами
- Зелений (Subway, Greenpeace). Асоціюється зі свіжістю і природою. Часто використовується в рекламі органічних продуктів харчування та природоохоронних організацій.
Дизайн сайту з зеленим кольором в основі гами
- Синій (Walmart, American Express). Передбачає надійність і впевненість.
Приклад дизайну сайту з синім основним кольором
- Фіолетовий (Hallmark, Cadbury). Підкреслює впевненість бренду, багату історію, ексклюзивність, якість.
Використання фіолетового як основного кольору в дизайні сайту
- Коричневий (Nespresso, UPS). Асоціюється з якістю і доступністю; підкреслює, що цим продуктом може користуватися кожен.
Використання коричневого в дизайні сайту
- Чорний (Chanel, Adidas). Викликає асоціації з розкішшю, елегантністю.
Як вібрато колір для дизайну сайту
- Білий (Apple, Nike). Має на увазі технологічні, зручні для користувача продукти.
Білий колір в Основі кольорової палітрі сайту
Якщо у вас уже є кольоровий логотип, є сенс вибрати основний колір, що відповідає вашій фірмовій символіці. Наприклад, на сайті Nintendo домінує червоний.
Порада! Під час вибору кольору(ів) для сайту не забудьте зберегти шістнадцятковий код для кожного.
Додаткові відтінки
Продовжують підбір кольорів для сайту аналізом інших відтінків, які ви будете використовувати. Хороша відправна точка — вивчення колірних поєднань. У кожного тону є свій “партнер”, який ідеально гармонує з ним.
Як правило, це контрастні тони. Наприклад, червоне коло на зеленому тлі матиме набагато кращий вигляд, ніж синє. Воно, зі свого боку, має яскравіший і помітніший вигляд на помаранчевій підкладці. Якщо в дизайні веб-сайту переважає зелений, рекомендується використовувати червоний колір для оформлення CTA-кнопок або виділення важливих елементів, до яких ви хочете привернути увагу користувачів.
Порада! Намагайтесь вибирати не більше 1–2 кольорів крім основного. Якщо відтінків буде більше, вам доведеться боротися з візуальним безладом, який заплутує і відштовхує користувачів.
Гармонійно використано поєднання кольорів для сайту продажу слухових апаратів Eargo. Його основний тон — помаранчевий, тому розробники використали більш тьмяний синій, щоб виділити найважливіший розділ свого веб-сайту. Цей синій контрастує з яскраво-помаранчевим, який також виділяє важливі елементи, як-от кнопка «Додати в кошик» і логотип.
Корисно! Для роботи з кольорами рекомендуємо використовувати спеціальні сервіси:
- Cohesive Colors — дає змогу швидко створювати колірні схеми.
- Colorblender — на основі обраних вами основних кольорів можна отримати готову палітру.
- Coolors — генератор готових колірних схем.
- Colorsafe — ще один генератор колірних палітр, але вже з можливістю попередньо вказати стиль і розмір шрифту, а також основний колір.
Приклад результату, який ви можете отримати при автоматичній генерації палітри сайту
Колір фону
Це важливий вибір, оскільки колірна гама фону вашого сайту теоретично привертатиме найбільше уваги. Проте визначитися доволі просто, оскільки насправді вибір зводиться до двох варіантів.
Ви можете вибрати більш приглушену версію основного кольору, щоб зміцнити прив’язку до бренду. Для цього знадобиться накладення білого або світло-сірого тексту на фон, щоб текст нормально відображався і був читабельним.
Як альтернативу ви можете просто зробити фон сайту білим (або наближеним до нього), що є більш поширеним вибором. Це нешкідливо і не завадить тексту, зображенням або посиланням привабливо виглядати на будь-якій сторінці. Ось приклад такого рішення:
Яскраві зелені елементи дизайну на білому тлі
Текст
Остання зупинка у вашій барвистій подорожі — вибір кольору шрифту. Можна піти простим шляхом, зупинившись на класичному чорному варіанті. Але погортайте сайти в інтернеті — і ви виявите, що суто чорні гарнітури не такі поширені, як здається.
Чорний шрифт на білому тлі може втомити очі через стовідсотковий контраст. Користувачі з більшою ймовірністю покинуть сторінку, якщо ваш сайт буде важко читати.
Хоча яскраві кольори слід зарезервувати для посилань і важливої інформації, ви можете використовувати відтінки сірого для основного тексту. Так сайт буде легко читатися і матиме привабливий вигляд.
Корисні поради
До теперішнього часу ви вже знаєте багато корисного про те, як вибрати колірну гаму для сайту. Ось кілька додаткових порад, які допоможуть остаточно визначитися з цим аспектом дизайну.
Щоб створити цілісний стиль бренду, ви можете використовувати різні кольори з однаковою насиченістю. Насиченість — це ще один спосіб позначити яскравість. Подивіться, як виробник напоїв Innocent використовує кольори на своєму сайті. Це чудовий приклад: у дизайні використовується шість різних відтінків, але жоден із них не здається недоречним або неприємним. Це тому що їхня насиченість приглушена до одного і того ж рівня.
Щоб відтінки гармонійно виглядали в дизайні, їм потрібно надати однакову насиченість
Якщо у бренда є сильний зв’язок із певним тоном, ви можете не захотіти відходити від нього занадто далеко. Однак ніхто не заважає взяти основний тон палітри кольорів для сайту і трохи пограти з насиченістю. Приклад реалізації цього підходу можна побачити на сайті TechCrunch. Усі п’ять кольорів, що використовуються на його сторінках, — відтінки зеленого. Завдяки різним рівням яскравості вони змінюють зовнішній вигляд сторінки, не вступаючи в протиріччя з фірмовим стилем.
Різні рівні яскравості одного кольору теж виглядають оригінально і цікаво
Також читайте інші статті в блозі Webpromo:
- Ключові фрази long tail – значна частина SEO-оптимізації сайту;
- Як змінилась роль директора з маркетингу після пандемії? Дослідження LinkedIN та досвід Webpromo;
- Які соцмережі та месенджери найпопулярніші серед українців?
І підписуйтесь на наш Telegram-канал про маркетинг.
