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

Практичні поради й інструменти

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

Колір не додає приємної якості дизайну — він її підсилює. 
 — П’єр Боннар

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

Правило 60–30–10

Це правило дизайну інтер’єра нестаріюча техніка декорування, яка може допомогти вам легше зібрати колірну схему. Пропорція 60% + 30% + 10% призначення для встановлення балансу між кольорами. Ця формула працює, тому що вона створює сенс балансу і дозволяє оку комфортно перефокусуватися з однієї точки на іншу. Також нею неймовірно легко користуватись.

60% це ваш домінуючий колір, 30% — вторинний колір і 10% — акцентний.

Настінні малюнки, меблі, аксесуари.

Значення кольору

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

Asos чистий чорно-білий сайт із зеленою CTA кнопкою. Це зроблено не просто так.

  • Червоний: пристрасть, кохання, небезпека
  • Блакитний: спокій, відповідальність, безпека
  • Чорний: містичність, елегантність, злість
  • Білий: чистота, тиша, охайність
  • Зелений: новизна, свіжість, природа

Якщо хочете більше, подивіться цей список:

Спочатку відтінки сірого

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

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

Одна з моїх робіт, яку ви можете знайти на dribbble. Прості монохромні кольори і зосередження на елементах.

Тримайтеся подалі від чистих відтінків сірого та чорного

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

Найтемніший колір на цьому зображенні не #000, а #0A0A10

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

• • •

Повірте в природу

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

Щоб отримати натхнення нам лише потрібно озирнутися навколо

Витримуйте контраст

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

Якщо ви хочете більше дізнатися про теорію кольору почитайте цю статтю (англ.) — Color Theory For Designers: Creating Your Own Color Palettes

Надихніться

Коли ми говоримо про UI референси, то Dribbble найкраще місце для цього. На цьому сервісі також є інструмент для пошуку по кольорам, тому, якщо ви хочете зробити візуальне дослідження того, як певний колір був використаний іншими дизайнерами, то вам сюди dribbble.com/colors/

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

Частенько я люблю красти кольори з кліпів KPOP. Вони прекрасні.

Інструменти

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

Coolors.co

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

Kuler

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

Paletton

Він такий же як і Kuler з єдиною різницею в тому що ви не обмежуєтесь 5 кольорами. Прекрасний інструмент коли у вас вже є основні кольори і хочете погратись із доаоміжними тонами.

Designspiration.net

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

Shutterstock Lab Spectrum

Ви спитаєте — а що, якщо мені знадобиться шукати фотографії з моїм вибраним кольором? Ну, Shutterstock має інструмент під назвою Spectrum, яким можна шукати фотографії за певним тоном. Вам навіть не потрібно мати підписку, тому що маленького зображення з водяним знаком буде досить, щоб згенерувати палітру.

Tineye Multicolr

Але якщо ви хочете знайти поєднання кольорів на фотографії і навіть вказати кількість кожного з них, то TinEye допоможе вам. Цей веб-сайт використовує базу даних 10 мільйонів Creative Commons картинок із Flickr.

• • •

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

Автор: Wojciech Zieliński

Переклад: UIUXUA