Назад
Auto Layout · Variables · Variants · Components · Design Tokens · Handoff
Isometric Infographics: A Pivotal Element in Your Rebranding Journey!
Проблема
This section unfolds the strategic significance and creative impact of isometric design, inviting you to reimagine and rediscover the essence of your brand's aesthetic identity. Currently living & working in Poland. Senior Product Designer at Giant Eagle. Framer Developer, Expert & Partner. My work is focused on creating bespoke, effective & engaging digital experiences with meticulous attention to detail.
This section unfolds the strategic significance and creative impact of isometric design, inviting you to reimagine and rediscover the essence of your brand's aesthetic identity. Currently living & working in Poland. Senior Product Designer at Giant Eagle. Framer Developer, Expert & Partner. My work is focused on creating bespoke, effective & engaging digital experiences with meticulous attention to detail.
This section unfolds the strategic significance and creative impact of isometric design, inviting you to reimagine and rediscover the essence of your brand's aesthetic identity. Currently living & working in Poland. Senior Product Designer at Giant Eagle. Framer Developer, Expert & Partner. My work is focused on creating bespoke, effective & engaging digital experiences with meticulous attention to detail.
Задача №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 (по необходимости)
режимы иконок — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
Паттерны снизили когнитивную нагрузку на пользователей
Паттерны снизили когнитивную нагрузку на пользователей
Паттерны снизили когнитивную нагрузку на пользователей
Пример формирования компонентов
Пример формирования компонентов
Пример формирования компонентов
Embark on a visual transformation journey as we integrate captivating isometric infographics into the fabric of your rebranding initiative.
Embark on a visual transformation journey as we integrate captivating isometric infographics into the fabric of your rebranding initiative.
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Я на связи
