ui/ux design
February 17, 2020

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

17.02.20. Час прочитання - 2.5хв

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

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

  • Для того, щоб прийняти рішення “взаємодіяти з продуктом чи ні” людині потрібно приблизно 90 секунд. Дослідження довели, що орієнтовно 60-90% оцінки належить тільки кольорам; 
  • Правило 15 секунд: про те, скільки у Вас є часу, щоб отримати увагу юзера; 
  • Кольорове зображення запам’ятовується краще, ніж чорно-біле; 
  • Чоловіки і жінки бачать кольори не однаково: в більшості ​​спектрів чоловікам потрібна трохи більша довжина хвилі, ніж жінкам, щоб отримати однаковий відтінок; 
  • Синій — колір, що найбільше використовується у всьому світі.

Головний колір 

Це колір, що повинен переважати у Вашому дизайні. Логотип і товар буде виконаний у даному кольорі і він буде формувати бренд. Якщо поки складно визначити яким має бути Ваш основний колір, можете пройти тест на сайті Grasshopper

Не забувайте про дослідження конкурентного ринку, в цьому Вам допоможуть Behance або Dribbble. Також варто переглядати й завжди мати під рукою список колірних палітр всесвітньо відомих брендів.

Кількість кольорів 

Більшість топових дизайнерів рекомендують використовувати 3 кольори. Вони рівномірно розподіляються навколо колірного кола. Існує правило 60-30-10. Воно полягає на тому, що Ви повинні використовувати основний колір на 60%, другорядний на 30%, (він може включати два вторинні кольори по 15%)  і 10% для акцентного кольору.

Нейтральні кольори

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

Де і який колір варто використовувати?

🔴Основний: застосовується у найбільш важливому просторі сайту. Конкретніше — для кнопок CTA, заголовків, розділу переваг бренду, форм завантаження і для виділення важливої інформації; 

🟡Другорядний: використовується для виділення менш важливої ​​інформації, такої як підзаголовки, відгуки, додаткові кнопки і питання, що часто задають користувачі;

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