Правильні поєднання та підбір кольору для сайту: рекомендації для новачків

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

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

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

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

Залежність кольору сайту та його стилю від ЦА

Вибір стилю сайту з погляду його колірного виконання повинен залежати від цільової аудиторії, її вікової категорії, роду занять, переваг і інтересів. Уявіть ситуацію. Сайт продає нові марки автомобілів. Відповідно, цільова аудиторія в нього – заможні чоловіки віком від 35 років. А тепер подумайте, чи захоче відвідувач вашого сайту переглянути пропозиції, якщо сайт буде виконаний у рожевому кольорі? Дуже сумнівно. В цьому випадку ресурс і сама компанія-продавець сприйматиметься несерйозно, звідси і буде сформовано репутацію компанії. Ось вам яскравий приклад сайту з продажу в'язаних виробів, де ЦА переважно жінки. Чи не вражає, правда?

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

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

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

Принцип вибору палітри кольорів відповідно до ЦА

Якщо говорить узагальнено про колірні рішення, рекомендуємо спиратися на такі рекомендації:

• Для сайтів на дитячу тематику найкращі кольори для сайту – яскраві, контрастні та позитивні;
• Для ресурсів, де ЦА – дівчата та жінки – ніжні, світлі;
• Для сайтів, де цільова аудиторія – чоловіки – темні або нейтральні.

Звісно, кожен нюанс треба продумувати. Якщо у сайту цільова аудиторія і чоловіки, і жінки (наприклад, компанія продає товари загального споживання), то у таких випадках слід спиратися на нейтральність. Чимале значення має і фірмовий стиль компанії. Якщо він вже існує і укріплений на ринку (наприклад, логотип або бренд всім знайомий), то переважаючими кольорами на сайті мають бути «фірмові». Але все ж таки, про правила контрастності та мотивації до дії за допомогою кольору забувати не варто.

Поєднання кольорів для сайту

Насправді процес вибору кольорів, що поєднуються між собою, не такий вже й складний. Головне, дотримуватися принципу простоти - не використовуватися понад 3-4 різних кольорів, підбирати відтінки, що поєднуються між собою. У цьому випадку допоможе колірне кільце, створене Ньютоном ще на початку 18 століття. Звичайно, цей приклад вже застарілий, оскільки дизайнерам та архітекторам представлена можливість вибирати серед тисячі відтінків за допомогою спеціальних сервісів у режимі онлайн, про які ми розповімо далі.

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

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

Колірні контрасти

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

Створювати контрасти кольорів можна кількома способами.

Колірні тони

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

Світлотона тону

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

Температура тону

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

Інтенсивність кольору

Чим менше у кольорі сірого, тим він більш насичений. Застосування менш інтенсивних кольорів як фонових з акцентами з більш насичених створюють ідеальний тандем. При цьому більш насичені кольори привертають увагу насамперед - чудовий спосіб створити акцент на тригері.

Колірне поширення

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

Як сприймається колірна палітра сайту користувачем?

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

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

Червоний

Емоції: пристрасть, кохання чи побоювання, важливість.

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

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

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

Емоції: позитив, дружелюбність, рух, енергія, молодість.

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

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

Жовтий

Емоції: радість, щастя, ентузіазм.

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

Зелений

Емоції: спокій, добробут, зростання, стабільність.

Зелений колір знаходиться між синім (розслаблюючим кольором) та жовтим (кольором енергії), а значить створює ідеальний баланс. Залежно від насиченості відтінку колір може сприйматися по-різному. Наприклад, найсвітліші відтінки скажуть про легкість, а насичені, навпаки, створять важку атмосферу. Разом з тим, на прикладі ми бачимо, як насичений зелений створює відчуття престижності.

Синій

Емоції: спокій, відкритість, безпека.

Залежно від насиченості кольору його можна сприймати по-різному. Наприклад, як знак довіри, використовуються світлі тони (зверніть увагу, соціальні мережі Твіттер, ВКонтакте та Facebook використовують саме світло-синій колір). Темно-сині відтінки створюють відчуття надійності. У цьому прикладі сайт компанії ідеально відображає професіоналізм і надійність. Синій колір виглядає багато і розкішно.

Фіолетовий

Емоції: багатство, помпезність, розкіш чи таємниця, містика.

Споконвіку фіолетовий вважався кольором багатства, асоціювався з королівством і розкішшю. Світлі тони (пурпуровий, фіолетовий) створюють почуття помпезності, стилю.

Темні кольори на сайті навіюють романтику та таємничість.

Білий

Емоції: добро, чистота, доступність.

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

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

Чорний

Емоції: вишуканість, влада.

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

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

Як вибрати колір для сайту: визначаємося між основним, вторинним та фоновим

Вибираючи палітру кольорів для свого сайту, підбирайте кожен колір поетапно:

Спочатку слід визначити основний колір. Цей колір, як правило, використовується більшою мірою, їм можуть виділятися основні заголовки або важлива інформація;
Вибираємо вторинний колір - колір, яким виділятиметься другорядна за важливістю інформація;
Акцентуючий колір – найважливіший інструмент для привернення уваги відвідувача. Він має бути контрастним, що виділяється і на основному, і на фоновому кольорі;
Фоновий колір, який переважає на сайті, заповнюючи вільний простір. Повинен взаємодіяти з усіма вибраними відтінками, не привертати увагу.

Розглянемо на прикладі використання всіх кольорів

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

Найкращі колірні схеми для сайту: кілька прикладів для вашого натхнення

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

Приклад 1

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

Приклад 2

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

Приклад 3

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

Приклад 4

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

Приклад 5

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

Популярні сервіси для підбору палітри кольорів сайту

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

Colorscheme

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

In Color Balance

Сервіс увібрав у себе всі можливі поєднання кольорів та демонструє їхні приклади. Можна сортувати приклад за холодними і теплими тонами, вибирати їх за певними кольорами, а також за контрастністю.

Design Palette

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

Paletton

Просте керування дозволяє швидко знайти найкраще для себе колірне рішення. Просто вибирайте основний колір і рухайтеся по колу у виборі додаткових.

Якою має бути палітра кольорів для сайту?

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

Сподобалася стаття? Ставте лайки та підписуйтесь на наш блог!