Ведомости
Адаптация мобильного приложения под тёмную тему с сохранением читаемости, визуальной иерархии и состояний компонентов.
Роль
UX/UI Designer
Период
Июль 2025 — сентябрь 2025
Сфера
Media · Mobile App · Dark Theme
Команда
Продакт-менеджер, системный аналитик, разработчики
О проекте
«Ведомости» — российское деловое издание о бизнесе, экономике, финансах и политике, основанное в 1999 году. Для такого продукта особенно важны читаемость, визуальная иерархия и комфорт регулярного чтения.
Команда Friflex работала над развитием мобильного приложения для чтения новостей, аналитики и материалов редакции.
Команда Friflex работала над развитием мобильного приложения для чтения новостей, аналитики и материалов редакции.
Бизнес-задача
Адаптировать мобильное приложение под тёмную тему: обновить цветовую систему, сохранить читаемость контента, проработать состояния компонентов и подготовить макеты к разработке.
Моя зона ответственности
Я был единственным дизайнером в рамках задачи по адаптации мобильного приложения под тёмную тему. Отвечал за цветовую систему, читаемость контента, визуальную иерархию и состояния UI-компонентов.
Также перерабатывал устаревшие компоненты под новую логику, описывал состояния компонентов и готовил макеты к разработке.
Также перерабатывал устаревшие компоненты под новую логику, описывал состояния компонентов и готовил макеты к разработке.
Процесс работы
Работу выстроил по этапам: от разбора требований и аудита текущего UI до адаптации экранов, компонентов и подготовки макетов к разработке.
1
Разбор требований
Получал задачи от продакт-менеджера и системного аналитика, уточнял состав экранов, компонентов и состояний для адаптации.
2
Аудит текущего UI
Проверял существующие экраны, текстовые уровни, компоненты и состояния, которые нужно было перенести в тёмную тему.
3
Адаптация экранов и компонентов
Обновлял цветовую систему, адаптировал экраны и перерабатывал устаревшие компоненты под новую логику.
4
Подготовка к разработке
Систематизировал токены, описывал состояния компонентов и готовил макеты с пояснениями для разработки.
Цветовая система тёмной темы
Для тёмной темы я обновил токены фонов, текста, разделителей, акцентов и состояний. Цвета были настроены так, чтобы приложение оставалось читаемым и сохраняло визуальную иерархию.
Общие токены
Кнопки и состояния
Компоненты и состояния
Устаревшие компоненты были переработаны под новую логику: для них были описаны состояния и правила использования в светлой и тёмной темах.
Анатомия компонента
Светлая и тёмная темы
После настройки цветов и компонентов я адаптировал экраны приложения под тёмную тему, сохранив структуру, читаемость и визуальную иерархию контента.
Статья
Светлая
Темная
Настройки
Светлая
Темная
Итог проекта
В результате мобильное приложение получило подготовленную тёмную тему для экранов и UI-компонентов. Цветовая система, состояния и описания компонентов были приведены к единой логике, чтобы интерфейс оставался читаемым и последовательным в обеих темах.
