Назад
Auto Layout · Variables · Variants · Components · Design Tokens · Handoff
Дизайн-система для AI агрегатора
Проблема
AI-продукт с 6 крупными разделами и сложным рабочим пространством для генерации — без какой-либо дизайн-системы. Цвета и отступы, размеры элементов расходились от экрана к экрану, компонентов не существовало вообще. Передавать макеты в разработку в таком состоянии было невозможно
AI-продукт с 6 крупными разделами и сложным рабочим пространством для генерации — без какой-либо дизайн-системы. Цвета и отступы, размеры элементов расходились от экрана к экрану, компонентов не существовало вообще. Передавать макеты в разработку в таком состоянии было невозможно
AI-продукт с 6 крупными разделами и сложным рабочим пространством для генерации — без какой-либо дизайн-системы. Цвета и отступы, размеры элементов расходились от экрана к экрану, компонентов не существовало вообще. Передавать макеты в разработку в таком состоянии было невозможно
Задача №1
Построить систему: провести аудит интерфейса, выявить все несистемные значения, дробные числа и дублирующиеся элементы,которые должны стать компонентами
Создать стили,токены и переменные
Разработать систему нейминга
Спроектировать компонентную библиотеку
Внедрить новую систему в существующие макеты и прописать гайдлайн
Построить систему: провести аудит интерфейса, выявить все несистемные значения, дробные числа и дублирующиеся элементы,которые должны стать компонентами
Создать стили,токены и переменные
Разработать систему нейминга
Спроектировать компонентную библиотеку
Внедрить новую систему в существующие макеты и прописать гайдлайн
Построить систему: провести аудит интерфейса, выявить все несистемные значения, дробные числа и дублирующиеся элементы,которые должны стать компонентами
Создать стили,токены и переменные
Разработать систему нейминга
Спроектировать компонентную библиотеку
Внедрить новую систему в существующие макеты и прописать гайдлайн
Задача №2
Адаптировать интерфейс под все разрешения (desktop, tablet, mobile)
Доработать UX рабочего пространства
Разработать страницу нового режима генерации,
Создать информирующие pop-up для коммуникации с пользователем
Адаптировать интерфейс под все разрешения (desktop, tablet, mobile)
Доработать UX рабочего пространства
Разработать страницу нового режима генерации,
Создать информирующие pop-up для коммуникации с пользователем
Адаптировать интерфейс под все разрешения (desktop, tablet, mobile)
Доработать UX рабочего пространства
Разработать страницу нового режима генерации,
Создать информирующие pop-up для коммуникации с пользователем
Результаты для бизнеса
Снизила time to market
Снизила time to market
Ускорила разработку с помощью подготовки макетов и handoff
Ускорила разработку с помощью подготовки макетов и handoff
Сократила затраты
Сократила затраты
Токены и библиотека компонентов позволяют эффективнее добавлять новые разделы
Токены и библиотека компонентов позволяют эффективнее добавлять новые разделы
Устранила дизайн-долг
Устранила дизайн-долг
Благодаря рефакторингу UX продукта улучшился. Новая система причёсала ошибки макетов
Благодаря рефакторингу UX продукта улучшился. Новая система причёсала ошибки макетов
Как я достигла результатов
Аудит и токены
Зафиксировала все расхождения — хаотичные значения отступов включая дробные числа, несогласованные радиусы, случайные цвета. На основе аудита выстроила токены: единая типографическая шкала, цветовая система, система отступов и радиусов.
Зафиксировала все расхождения — хаотичные значения отступов включая дробные числа, несогласованные радиусы, случайные цвета. На основе аудита выстроила токены: единая типографическая шкала, цветовая система, система отступов и радиусов.
Зафиксировала все расхождения — хаотичные значения отступов включая дробные числа, несогласованные радиусы, случайные цвета. На основе аудита выстроила токены: единая типографическая шкала, цветовая система, система отступов и радиусов.
Разработчик получил переменные — изменение токена обновляет весь продукт сразу, а не вручную в каждом месте. Для бизнеса любые правки теперь занимают минуты, а не дни.
Разработчик получил переменные — изменение токена обновляет весь продукт сразу, а не вручную в каждом месте. Для бизнеса любые правки теперь занимают минуты, а не дни.
Разработчик получил переменные — изменение токена обновляет весь продукт сразу, а не вручную в каждом месте. Для бизнеса любые правки теперь занимают минуты, а не дни.
Разработала систему неймнга на основе IBM Carbon
Разработала систему неймнга на основе IBM Carbon
Разработала систему неймнга на основе IBM Carbon
Библиотека компонентов
Спроектировала полноценную библиотеку (30+ компонентов) по атомарному подходу. Каждый компонент построен с Variants:
состояние (default, hover, focus, disabled, error, loading),
тип (primary, secondary),
размер L, M, S, XS, XSS (по необходимости)
режимы иконок — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.
Спроектировала полноценную библиотеку (30+ компонентов) по атомарному подходу. Каждый компонент построен с Variants:
состояние (default, hover, focus, disabled, error, loading),
тип (primary, secondary),
размер L, M, S, XS, XSS (по необходимости)
режимы иконок — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.
Спроектировала полноценную библиотеку (30+ компонентов) по атомарному подходу. Каждый компонент построен с Variants:
состояние (default, hover, focus, disabled, error, loading),
тип (primary, secondary),
размер L, M, S, XS, XSS (по необходимости)
режимы иконок — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
Паттерны снизили когнитивную нагрузку на пользователей
Паттерны снизили когнитивную нагрузку на пользователей
Паттерны снизили когнитивную нагрузку на пользователей
Пример формирования компонентов
Пример формирования компонентов
Пример формирования компонентов
Доработка макетов и Handoff
Доработка макетов и Handoff
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Я на связи
