Статті
Градієнти в UI дизайні
Навіщо потрібен кольоровий перехід, як його створити та що він дає
19 квітня, 2019
Нік Бабич
Головний редактор UX Planet
Ми любимо тексти без помилок. Якщо ви їх знайшли, виділіть фрагмент і натисніть Ctrl + Enter.

Довгий час використання градієнту у дизайні було найбільш забороненим прийомом. Дизайнери намагалися уникати градієнтів – асоціації з 90-ми були занадто сильними. Але все змінюється. Якщо зараз відкрити Dribbble або Behance, велика ймовірність, що ви побачите десятки робіт з використанням градієнту.

У цій статті Нік Бабич, головний редактор UX Planet, ділиться порадами щодо використання градієнтів в сучасному дизайні.

Оригінал тексту та зображення: uxplanet.org

Чому дизайнери постійно повертаються до використання градієнтів?

Щоб знайти відповідь на це питання, потрібно повернутись у 2014 – рік, коли плоский дизайн став популярним. Google випустила Material Design, а Apple оновила свої macOS з плоским дизайном користувальницького інтерфейсу. Тоді плоский дизайн був свіжим і захоплюючим, особливо в порівнянні зі скевоморфним дизайном.

Але у плоского дизайну є свої обмеження. Одне з важливих пов’язане з кольорами і стилями. Складно назвати більше 10-15 кольорів, які можна використовувати для плоского дизайну.

За допомогою градієнтів можливо:

  • Отримати більше творчої свободи. У той час як плоскі кольори обмежують потенціал дизайну, градієнти відкривають двері для нескінченних можливостей. Змішуючи кольори, дизайнери можуть створювати привабливі і візуальні дизайни, які запам’ятовуються.
  • Додати глибину і об’ємність. Градієнти вирішують проблему ультраплоского дизайну (дизайн, який виглядає «занадто плоским»).

Градієнт – неймовірно універсальний інструмент. Використовуючи градієнти, дизайнери мають змогу:

  • привертати увагу до елементів

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

Логотип Instagram: градієнт надає іконці глибину та об’ємність

  • викликати емпатію до певних елементів

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

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

Градієнти ідеально підходять для привертання уваги людей до певної області. Mixpanel використовує градієнти, щоб виділити ілюстрацію

6 порад по створенню вражаючого градієнта

1. Вивчіть основні типи градієнтів

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

Лінійний градієнт

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

Лінійний градієнт. Щоб створити лінійний градієнт, потрібно зазначити два кольори або два відтінки одного кольору

Радіальний градієнт

Радіальні градієнти аналогічні лінійним градієнтам, за винятком того, що вони випромінюють з центральної точки. Можна вказати, де повинна знаходитися ця центральна точка і зазначити розмір градієнта.

Радіальний градієнт

Логотип Instagram був створений з використанням радіального градієнта.

Конічний градієнт

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

Створення конічного градієнта в Adobe Illustrator. Зображення: stackexchange

2. Не обирайте колір випадково

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

Градієнт від червоного до зеленого в прикладі нижче виглядає брудним:

Намагайтеся уникати використання додаткових кольорів при створенні градієнта

Краще використовувати аналогічні кольори, які знаходяться поруч на колірному колі:

або відтінки одного кольору, як нижче – відтінки синього:

Використання відтінків синього для градієнта

3. Створюйте плавні переходи

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

Не рекомендується: робити різкий перехід

Очі користувача повинні відпочивати під час перегляду сторінки.

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

Потрібно: робити плавний перехід

4. Намагайтесь передати емоції або настрій

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

Наприклад, якщо ви хочете створити дуже енергійну атмосферу, ви можете використовувати градієнт від червоного до помаранчевого.

Яскраві, сміливі кольори викликають позитивні емоції

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

Глибокі відтінки приносять спокій

5. Не забувайте про кольорові контрасти

Ви не повинні забувати про доступність. Завжди перевіряйте контраст кольору.

Відсутність кольорового контрасту призводить до поганої читабельності

Рівень WCAG 2 AA вимагає контрастності не менше 4,5:1 для звичайного тексту і 3:1 для великого тексту, а контрастність не менше 3:1 для графіки і компонентів інтерфейсу.

6. Використовуйте спеціальні інструменти

За допомогою Adobe Illustrator легко створювати градієнти. Але також є багато спеціальних інструментів для створення градієнтів.


Раніше Telegraf.Design писав про двовимірний слайдер як новий елемент інтерфейсу.

avatar
Нік Бабич
Головний редактор UX Planet
Колонка

У нас є ще дещо для вас

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: