Колірна палітра є одним з найбільш важливих аспектів дизайн-системи.
Що таке палітра кольорів?
Палітра кольорів - це набір кольорів, що використовуються разом в дизайні. Палітра кольорів - це група кольорів, які добре поєднуються один з одним, щоб забезпечити однаковість використання кольору у ваших проектах і створити узгодженість у тому, як ви використовуєте колір у продуктах.
Створення палітри кольорів допомагає пов'язати все воєдино і створює гармонію в кольорах, які ви використовуєте. Дизайнери використовують палітри кольорів для створення візуальної ієрархії, визначення емоцій і створення єдиного зовнішнього вигляду. Колірна палітра зазвичай складається з трьох-п'яти кольорів, хоча може бути більше.
Навіщо потрібні кольори дизайн-системи?
Звукова палітра кольору повинна:
- Поліпшіть досвід користувача ваших клієнтів
- Виділити вас серед конкурентів
- Створіть узгодженість, ієрархію та контраст у своєму дизайні
- Підвищуйте ефективність дизайну, надаючи організовані стандартизовані кольори на вибір.
- Вкрай важливо мати палітру кольорів для вашої системи дизайну, тому що це допоможе створити послідовний брендинг і візуальний інтерес. Палітра кольорів також може допомогти створити візуальну ієрархію, визначити емоції і забезпечити єдиний зовнішній вигляд.
Коли всі елементи вашого дизайну використовують правильні кольори, вони виглядатимуть більш професійно та вишукано. Ця згуртованість є кінцевою метою системи дизайну, а палітра певних кольорів бренду забезпечує узгодженість.
Палітри можуть зробити вашу роботу більш привабливою з естетичної точки зору, але вони також допоможуть вам працювати більш продуктивно.
Це допомагає мати певну палітру кольорів при роботі з іншими дизайнерами або розробниками. Вони можуть легко побачити, які кольори використовувати для створення нових дизайнів або додавання до існуючих. Подумайте про те, наскільки масштабованішим стане ваш дизайн з єдиним джерелом достовірної інформації про вибір кольору.
11 кроків до створення палітри кольорів для вашої дизайн-системи
Давайте подивимося, як створити палітру кольорів для вашої дизайн-системи. Створення палітри кольорів не повинно бути лякаючим процесом. Виберіть тон та атмосферу, які ви хочете для свого дизайну, і звідти все стає простіше.
Тим не менш, ви часто можете виявити, що не знаєте, з чого почати. Ми всі там були. На щастя, ми створили цей посібник з 11 кроків, щоб допомогти вам зорієнтуватися в дизайні палітри кольорів.
1. Визначте будь-який основний колір у вашому каталозі кольорів.
Створення ефективної палітри кольорів спирається на одну з найпоширеніших ментальних моделей: використання того, що у вас вже є (або що ви можете легко отримати), для отримання невідомого (або того, чого у вас немає).
В даному випадку це ваші базові кольори. Базові кольори відносяться до найбільш часто використовуваних кольорів у вашому інтерфейсі користувача і тим, які відрізняють ваш продукт.
Такі кольори задають тон дизайну, передають повідомлення чи викликають емоційний чи психологічний відгук у вашої аудиторії.
Деякі з правил основних кольорів включають:
- Ніколи не використовуйте абсолютно чорний чи білий
- У вас може бути від одного до трьох основних кольорів
- Ви ніколи не помилитеся з синім
Ви часто знайдете більшість цих кольорів у дизайн логотипів вашого продукту, маркетингу та загальної мови дизайну.
2. Розробте систему для побудови розширених палітр
Розробити акцентні кольори набагато простіше, якщо ви визначили основні кольори. Ви можете визначити колір акценту як варіацію основного кольору.
Звичайною практикою є визначення кожного акцентного кольору у трьох відтінках для використання у різних ситуаціях:
- Світло
- Темний
- Яскравий
Ви використовуєте кольори у своєму інтерфейсі, щоб донести до аудиторії дискретні речі. Саме це мають на увазі дизайнери, коли говорять про семантичні кольори, що виділяють важливу інформацію. Наприклад, ви можете вибрати:
- Синій (або інший яскравий колір), щоб виділити нову функцію, наприклад, повідомлення.
- Червоний для підтвердження серйозної дії (наприклад, деактивація облікового запису)
- Або зелений для позитивного сполучення, такого як успішна транзакція.
Ось кілька варіантів колірної схеми для вас наступного разу, коли ви створюватимете розширені палітри:
- Суміжний або аналогічний (виберіть основний колір та виберіть кольори поруч із ним)
- Тріада (намалюйте рівносторонній трикутник над кольором)
- Відтінки (можна вибрати основний колір та його варіації з різною насиченістю)
3. Вигадайте угоду про імена
Угода про імена допоможе вам зібрати всіх ваших дизайнерів та розробників на одній сторінці та переконатися, що вони говорять однією мовою дизайну.
Вибираючи угоду про імена для своєї палітри кольорів, ви розпещені вибором.
Можна використовувати абстрактні імена, такі як bx7300, але деякі поширені підходи включають вибір фактичних імен кольорів (наприклад, синій) або пронумерованих імен, таких як 07000.
Те, що ви можете називати свої кольори як завгодно, не означає, що ви повинні це робити. Вам найкраще використовувати стандартизовану систему іменування, яку легко зрозуміти.
Ось деякі з правил угоди про імена:
- Не використовуйте номенклатуру колірних градацій, як темно-синій.
- Запропонуйте точну назву для кожного кольору
- Зберігайте простоту угоди про імена
Ви ніколи не помилитеся, вибравши функціональну назву для своєї палітри кольорів. Це назви, які дають призначення кольору, наприклад, основний зелений.
4. Тестуйте палітри кольорів на відповідність кольорам запасів
Озброївшись уявленням про ваші основні та акцентні кольори, ви можете продовжити та перевірити доступність цих кольорів.
Поки ви це робите, переконайтеся, що ваші нові кольори збігаються, і замініть або об'єднайте кольори, які ви використовуєте у своєму поточному інтерфейсі користувача.
5. Визначте палітру та рекомендації щодо використання
Те, що у вас є зараз, - це просто набір основних і акцентних кольорів у вашій палітрі.
Ваш наступний логічний крок — призначити кожен з цих аспектів вашої палітри кольорів глобальним елементам інтерфейсу користувача. Сюди можуть входити:
- Фон
- Текст
- Контейнер
- Кнопки
6. Введіть палітри кольорів у колірну систему CSS.
У вас є палітра кольорів. Тепер вам потрібно реалізувати його у вашій колірній системі CSS. Це допоможе забезпечити узгоджене застосування кольорів у всьому інтерфейсі вашого продукту.
Більшість дизайнерів сьогодні використовують суміш шістнадцяткових значень, також відомих як шістнадцяткові коди для визначення колірних палітр.
Ви можете зробити це без зусиль, використовуючи свій список змін кольорів з препроцесором CSS.
Після того, як всі ваші кольори налаштовані як змінні, ви можете використовувати їх у файлах CSS, викликаючи ім'я змінної. Це дає додаткову перевагу, що дозволяє легко змінювати кольори глобально, якщо виникне така необхідність.
7. Перевірте вплив нових кольорів на інтерфейс.
Як нові кольори, які ви вибрали, впливають на існуючий інтерфейс?
Ви, безперечно, приміряли палітру на розмір у макетах дизайну, але ніщо не зрівняється з реальним використанням для пошуку точок покращення.
Ви, швидше за все, зрозумієте, де кольори надто нечитані або надто яскраві, або коли контрастність ваших кнопок неправильна, коли ви поглинаєте реальну інформацію, а не замовчуєте Lorem Ipsum.
Є лише один спосіб з'ясувати це — перевірити вплив змін, які ви внесли в існуючий інтерфейс.
Запустіть середовище розробки та дайте вашій палітрі надійне застосування у реальному світі. Відповіді на такі запитання допоможуть:
- Ця нова палітра покращує інтерфейс?
- Ця нова палітра погіршує інтерфейс?
- Наскільки добре ці зміни поєднуються з існуючими кольорами?
8. Підтвердьте контраст між квітами у новому інтерфейсі.
Після введення нової палітри кольорів в інтерфейс переконайтеся, що ця нова палітра кольорів забезпечує достатню контрастність для доступності.
Ми можемо зробити це, перевіривши, що елементи нашого інтерфейсу користувача мають достатні показники контрастності, як це регулюється Посібником з доступності веб-контенту.
Найпростіший спосіб - використовувати плагін у вибраному вами інструменті дизайну інтерфейсу користувача. Контраст для Figma – один із прикладів. Stark – це повнофункціональніша платформа для створення спеціальних можливостей, яка пропонує плагіни для Figma, Adobe XD та Sketch. Він пропонує перевірку контрастності на безкоштовному плані.
9. Представте свою нову палітру та інтерфейс користувача всім продуктовим дизайнерам.
Якщо ви працювали над цим проектом самостійно, вам доведеться уявити його іншим дизайнерам продукту десь у майбутньому.
Це можна зробити кількома способами, але найголовніше — своєчасно та часто повідомляти про свої дизайнерські рішення.
Відмінний спосіб зробити це - написати короткий запис у блозі або створити скринкаст, в якому розповідається про нові кольори, про те, як вони були обрані та як їх слід використовувати.
На цьому етапі ваша палітра кольорів дозріла для представлення іншим учасникам процесу проектування, таким як ваші колеги, члени команди, партнери або клієнти.
10. Запрошуйте до творчої критики, відгуків та пропозицій щодо зміни
Дві голови краще, ніж одна, і дизайн не є винятком. Не бійтеся отримувати ідеї та пропозиції від зацікавлених сторін при виборі палітри кольорів.
Якщо ви розробили палітру кольорів самостійно, переконайтеся, що ви представили її своїй команді і отримали будь-які пропозиції від своїх колег.
11. Завершіть роботу над палітрою
Поздоровляємо, ви майже закінчили. Однак, перш ніж ви підете, вам потрібно зробити кілька останніх штрихів, перш ніж ваша палітра буде готова.
Вам слід:
- Додайте цю палітру в документацію по дизайн-системі та посібники зі стилю.
- Задокументуйте змінні процесора CSS (власного або іншого) в системі дизайну.
Слід пам'ятати, що вибір палітри кольорів - це не наука, і будь-хто, хто намагається продати вам одну єдину формулу, бреше.
Більшість часу буде судити ваше око, а коли ви не можете йому довіряти, у вас є члени вашої команди для консультації.
Під час доопрацювання шукайте будь-які невідповідності, налаштування чи покращення, які ви можете внести.