Ви повинні думати, що він символізує різні стани ваших інтерфейсів і, зокрема, дій (наприклад, заклики до дії та посилання).

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

Як знайти цей колір ?

Як правило, вибирається колір, протилежний і доповнювальний до основного кольору. Для цього можна використовувати колірний круг. Але це не абсолютне правило! Дайте волю своїй творчості!

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

Додатковий колір є гарною практикою в UX-дизайні, але багато дизайнерів не використовують його і використовують основний колір як колір дії.
Наприклад, у рекомендаціях Apple ми знаходимо колір відтінку, цей унікальний колір, який символізує колір бренду/продукту та елементи, які можна натискати.

#3 Кольори фону

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

●  Білий це безпечний варіант, це чистий колір, який виділить ваш вміст.

●  Світло-сірий дозволяє виділяти вміст білим фоном і, таким чином, виділяти його (наприклад, карти або таблицю).

●  Темні кольори Ви також можете зробити свій інтерфейс темнішим і використовувати темні відтінки, як-от вугільно-сірий або північно-синій. Знову ж таки, залежно від вашої палітри.

●  Градієнти є також варіантом, і для цього вам потрібно кілька кольорів, які поєднуються і не створюють дисбалансу або занадто вираженого розколу.

Мій прийом для визначення кольору фону полягає в тому, щоб почати з основного кольору і освітлити його, щоб створити зв’язок з ним.

Як знайти цей колір ?

• Я вибираю основний колір у Figma, Sketch або іншому інструменті дизайну.
• Я перемикаюся в режим HSL (замість, наприклад, у Hex.
• Я зміню значення «L» на 95.

#4 Кольори тексту

Хороша практика, яку слід пам’ятати для своїх дизайнів, — не використовувати чорний (#000000) для елементів, особливо для текстів.

Ми віддаємо перевагу чорним варіантам, які починаються з синього, зеленого, сірого… Знову ж таки, залежно від вашої палітри.

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

Як знайти цей колір ?

• Я вибираю основний колір у Figma, Sketch або іншому інструменті дизайну
  Я перемикаюся в режим HSL (замість, наприклад, у Hex)
• Я змінюю значення «L» на 10

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

#5 Кольори сповіщень

Для певних типів сайтів цікаво надати кольори для сповіщень: червоний, оранжевий і зелений.

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

Це кольори, які використовуються для :

● повідомлення про помилки, 404 сторінки, сповіщення (закусочні, тости, модали тощо).

● стани та/або статуси елемента

● кнопки або посилання (наприклад, червоні, щоб знищити або видалити)

# На закінчення

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

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

Він також може мати форму бібліотеки у вашому улюбленому інструменті дизайну.
І в цьому випадку раджу використовувати терміни («основний колір», «вторинний колір», …) . А не назва кольору (“Синій”, “червоний”, “#FEFEFE, …).

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

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