Інструкція, як створити систему кольорів у Figma за 4 кроки та полегшити всім життя

Мирного неба усім читачам. Мене звати Олена Мягка, працюю я в компанії EVNE Developers на посаді менеджера з маркетингу. У своїй щоденній діяльності мені часто доводиться використовувати безліч інструментів створення дизайну, одним із яких є Figma.

Щоб допомогти новачкам в UI та UX дизайні опанувати його основні функції та оптимізувати роботу, і була створена ця стаття.

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

Створення стилів кольорів сприяє успішному та швидшому виконанню задач. Застосування єдино визначеної системи кольорів допомагає уніфікувати всі компоненти і зробити їх частиною одного цілого. Саме тому спільно із UI\UX дизайнером компанії, Владиславом Федоренком, ми створили покроковий гайд для дизайнерів-початківців зі створення системи кольорів у Figma. Додатково ми описуємо способи побудови основної та додаткових колірних моделей та її поділу на функціональні групи.

Цілі створення системи кольорів у Figma

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

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

Така схема дозволяє спростити життя дизайнера таким чином:

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

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

Час переходити до практичних кроків, виконуючи які дизайнер отримає компліментарну систему, яку можна скейлити у випадку об’ємних проєктів. Далі розглянемо чотири основні кроки.

Крок 1. Вибір моделі кольорів

Перша річ, яку варто обрати — це модель кольору. Можна обрати кольори для продукту просто серед подібних відтінків, хоча це зручніше зробити, маючи чітку систему.

Модель кольору — це спосіб передачі даних про колір за допомогою чисел та літер по системі колірних координат.

В цьому гайді ми використовуємо модель HSL разом з Hex, RGB, CSS, HSB.

Модель HSL (hue, saturation, lightness) використовується як альтернатива моделі RGB. Вона була розроблена з огляду на особливості візуального сприйняття для того, щоб читання і розпізнавання кольорів було простішим.

Такі градації ви знайдете саме в цій моделі.

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

Saturation — це визначення глибини кольору.

Lightness — це рівень темного і світлого в кольорі.

Застосування моделі HSL має кілька переваг:

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

Примітка: попри це Hex-code більш зручний для передачі інформації про колір в текстовому форматі, адже простіше скопіювати та вставити одне число замість трьох, як в інших моделях.

  1. Порівнюючи з моделлю RGB, HSL більш інтуїтивна і подібна до сприйняття нами кольорів.
  2. HSL дозволяє легко будувати схеми монохромних кольорів.

Вибір конкретної моделі залежить від цілей та вподобань дизайнера. В прикладах ми будемо демонструвати кольори за допомогою Hex та HSL моделей.

Крок 2. Побудова базових груп кольорів

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

Чорний і білий

Обираючи чорно-білі кольори для системи кольорів, ми вважаємо за краще дотримуватися таких критеріїв:

  • Не обирати такий простий чорний як #000000. Застосовуйте дуже темний знебарвлений відтінок синього або червоного. Це надасть особливого відтінку фінальному продукту. Зважаючи на специфіку чорного кольору (його особливість поглинати світло), користувач не побачить відмінностей з класичним чорним.

Однак, це не варто сприймати як вимогу. Все ж це рекомендація, яку можна використовувати, залежно від обставин та доцільності.

  • З білим кольором все абсолютно інакше. Класичний білий, який варто застосовувати, без виключень #FFFFFF. Як видно на прикладі, найменші відхилення у насиченості і яскравості можуть зробити білий не таким, як очікувалося. Колір стає брудним і може вплинути на візуальне сприйняття інших кольорів і перспективи.

Основний колір

Оберіть основний колір з палітри брендованих. Він використовується для акцентів та активних елементів в інтерфейсі.

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

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

Кольори стану

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

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

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

Крок 3. Створення додаткових відтінків кольорів

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

Зміни відповідно до параметрів світлих і темних відтінків

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

Подібне відбувається з чорним кольором — в результаті ми отримуємо всі варіації відтінків сірого.

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

Зміни відповідно до параметрів відтінку

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

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

Якщо розбити наш основний колір за цим методом, ми отримаємо наступну схему:

Крок 4. Присвоєння назв стилям кольорів

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

Перша частина назви міститиме назву групи цих кольорів. Для відтінків всередині групи можна використовувати числове значення яскравості. Якщо ми розділимо частини назви слешем (напр. Primary/50), Figma об’єднає ці кольори в групи. Водночас можна створити підгрупи всередині груп, що вже є в наявності, використовуючи додатковий слеш.

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

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

Через зручність для дизайнерів до зручності для користувачів

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

Сподобалась стаття? Натискай «Подобається» внизу. Це допоможе автору виграти подарунок у програмі #ПишуНаDOU

👍ПодобаєтьсяСподобалось14
До обраногоВ обраному6
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Дякую за крутий матеріал, але раджу бути обережними з відтінками і завжди тримати в голові accessibility нюанси. Я зтикнувся з цим на ранньому етапі, тому витратив не так багато ресурсів та часу, щоб довести до AA рівня доступності, але чув про випадки, коли це додавало значних проблем проекту.

Звичайно можна просто взяти базовий колір та зробити світліші варіаціі (90%, 80% і т.д.) але, як і в моєму випадку, і в підсумку доведеться їх просто викинути з дизайн системи :-)

Господи, я нічого не зрозумів, але доктора кольорових наук дайте автору.

Підписатись на коментарі