Color Palette
Задача
Розробити дизайн-систему для світлої та темної тем, для застосунку в якому на той час налічувалося 300+ екранів.
Інструменти
Figma, Adobe After Effects
Рік
2020
Моя роль
До цього моменту не існувало жодної готової палітри кольорів. Створення системи кольорів як для світлої, так і для темної теми було надважливим, адже її наявність робить інтерфейс консистентним, сприяє ефективності в розробці та підтримці застосунку. Також, довелося створити шрифтову систему, щоб забезпечити єдність і легкість сприйняття для користувачів. Мій робочий процес включав визначення структури UI компонентів, аналіз існуючих екранів, вдосконалення їх з урахуванням змін у палітрі.
Головний екран
Розділ бонусів
Розділ кредиту
Екран ощадного рахунку
Кольори
Так, багато!
Але і функціонал застосунку не малий. Для кожного продукту є свій унікальний колір, і це збільшило палітру вдвічі.
Покращення
Крім створення нових кольорів для темної теми, довелося покращити палітру для світлої теми. Виявилося, що в додатку використовується 50 відтінків сірого, що не дуже добре, та і брендовий колір не відповідав бренду. Все було приведено до ладу 🙂
Тестування
Оскільки тема створювалася, коли застосунок вже був великим, довелося випробовувати працездатність кольорів для темної теми на всіх існуючих екранах, коригувати наявні компоненти та створювати задачі на їх оновлення. Адже раніше кольори не мали відповідних назв у палітрі та позначалися лише хардкодом.
Іконки і .json
Змінилися близько 100 іконок
Довелося перефарбувати. Новий брендовий колір перетворився з червоного на помаранчевий. Колір основного контуру був адаптований до кольору фону темної теми (щоб на темному фоні він зливався з фоном, а на світлому був контрастним). Колір другорядного контуру був перефарбований на контрастний сірий для обох кольорових схем.
Додаткова анімація
Багато іконок чекали свого часу для анімації, аби уникнути подальших втручань. Отже, настав їх час, і недостаючі іконки було заанімовано. Приклади наведені нижче. Якщо ви дочитали до цього місця, наведіть мишкою на іконки, щоб побачити, як вони виглядають у світлій темі 🙂
Результат роботи
Найприємніше
Результатом роботи є вдосконалений і консистентний дизайн для застосунку, який покращує користувацький досвід і сприяє ефективності в розробці та підтримці. Розробка нової дизайн-системи була важкою, але вона дала значний приріст у функціональності та візуальному вигляді застосунку.
Застарілі компоненти
Так як застосунок вже мав значну кількість екранів, тестування нової теми було важливою частиною робочого процесу. Були виявлені та виправлені проблеми з компонентами, які вже існували.
