Корисні сервіси підбору кольорів для сайтів та UX-дизайну
Колір – один із найважливіших елементів у роботі дизайнера. Але його, як концепцію, досить складно освоїти: через безліч комбінацій палітр часто важко вирішити, як краще оформити інтерфейс веб-сторінок і додатків. Раніше ми публікували огляди інструментів на вибір поєднання кольорів і генераторів палітр. Сьогодні хочемо розширити тему, розмістивши в блозі переклад статті Essential Color Tools for UX Designers від Nick Babich.
Замітка містить список кращих сервісів підбору кольору для сайтів та UX-дизайну, які допоможуть значно заощадити вам час. Завдяки цим проектам ви дізнаєтесь:
- звідки черпати натхнення;
- як створити власну палітру;
- як зробити дизайн доступним людям із порушеннями колірного зору.
1. Шукаємо натхнення
Фарби природи
Черпайте натхнення з навколишнього світу. Все, що вам потрібно – просто озирнутися. Модний одяг, обкладинки книг, дизайн інтер'єру ... вас оточує так багато чудових речей. Але найкращі поєднання кольорів - це фарби природи. Зафіксуйте гарний момент та спробуйте створити власну добірку на основі конкретного зображення.
Найкращі поєднання фарб – у природі. Можете отримати колірну схему з будь-якого фото
Dribbble Colors
Спробуйте вказати мінімальний відсоток певного кольору у Dribbble
Designspiration
Designspiration – корисний інструмент насамперед тим, хто вже має ідеї колірних комбінацій і хто хоче побачити приклади таких поєднань. Виберіть від 1 до 5 варіантів, і знайдете зображення, що відповідають зазначеним параметрам.
У Designspiration знайдете різні приклади комбінацій кольорів
TineyeMulticolr
За допомогою сервісу підбору кольору Tiney Multicolr зможете визначити бажану гаму зображення і навіть задати відсоток кожного з них (співвідношення). Сайт інтегрований з базою даних, що складається з 20 млн. фоток Creative Commons від Flickr. Це безперечно один з найшвидших способів знайти безкоштовні картинки в ідеальній палітрі.
Colorzilla
Розширення ColorZilla доступне в Chrome та Firefox
Shutterstock Spectrum
Нещодавно у блозі розглядали добірку інструментів з веб-квітів у дизайні від W3Schools. Там зібрано дуже багато інформації по темі, починаючи від їх назв/кодів відтінків, теорії поєднання палітр і закінчуючи описом різних форматів: HEX, RGB, CMYK, HWB та ін. Також знайдете прості генератори, конвертори тощо «міні-сервіси». Загалом, цікаво подивитися.
2. Створюємо палітру кольорів
Material Design Color Tool
Coolors – сайт для створення кольорової палітри. Просто закріпіть певний колір та натисніть на «пробіл». Інструмент хороший також тим, що ви отримаєте не один результат, а можете згенерувати кілька варіантів, змінивши лише початкові дані.
Є завантаження зображень та зчитування палітри з нього.
Колірна схема в Coolors на основі фото
Adobe Color CC
Сервіс підбору кольору Adobe Color CC (раніше Kuler) зараз досить популярний. Він знаходиться у вільному доступі в інтернеті, але є також і десктор-версія. За допомогою цієї веб-програми ви зробите свою палітру, використовуючи колірне коло:
Проект дозволяє створити/зберегти палітру з 5 значень
А можете отримати певний результат із готового зображення:
Тут є сотні готових комбінацій, шукайте їх у розділі «Дивитись»:
Його частопорівнюють із попереднім Adobe Color CC, оскільки ці проекти дуже схожі. Різниця лише в тому, що Paletton ви не обмежені п'ятьма параметрами, а можете експериментувати з додатковими тонами інтерфейсу.
Color Reference
3. Робимо палітру доступною
Нині порушення колірного сприйняття значно поширеніші, ніж ми припускаємо. Близько 285 млн людей у світі мають проблеми із зором. Завжди потрібно перевіряти, чи доступна обрана вами кольорова гама таким користувачам.
WebAIM Color Contrast Checker
Одні тони чудово поєднуються один з одним, інші ж зовсім навпаки. Безліч проектів не проходять тест А/А, і це факт. Дуже важливо перевіряти візуальне оформлення інтерфейсу та контрастність тонів, особливо якщо на сторінці багато тексту. Для цих цілей використовуйте WebAIM Color Contrast Checker під час вибору кольорів сайту.
WebAIM Color Contrast Checker – веб-інструмент, за допомогою якого перевіряються колірні коди у шістнадцяткових значеннях.
Про цей сервіс ми вже згадували вище. Крім усього іншого, Coolors також допоможе вам перевірити придуману палітру на колірну сліпоту.
Тип колірної сліпоти у схемі
Замість режиму «Звичайний» виберіть той тип проблеми зі зором, який ви бажаєте зімітувати. В результаті зрозумієте, як саме людина, яка не здатна розрізняти певні кольори, побачить ваш дизайн.
Так людина з протаномалією бачить палітру
NoCoffee Vision Simulator для Chrome
Так виглядає проект CNN для людини з дейтеранопією
Висновок
Всі сервіси підбору кольору для сайтів та UX-дизайну, згадані в статті, напевно допоможуть вам у пошуках цікавої та ефективної гами. Але пам'ятайте: найкращий спосіб навчитисястворювати дивовижні палітри - багато практикуватися та експериментувати.
Багато зустрічав схожих веб-проектів, зараз, мабуть, все взагалі можна через сервіси робити – кольори підбирати, палітри формувати, надихатись тощо. Декілька років тому дизайнерам було складніше)