Назад
Auto Layout · Variables · Variants · Components · Design Tokens · Handoff
Стартап Pocket Dental | Мобильное приложение для стоматологов и их пациентов
Проблема
Our journey with Dazzle Company was more than a rebrand; it was a strategic orchestration of innovation and elegance in the tech digital realm. Dazzle Company, a pioneer in cutting-edge tech solutions, needed a visual identity that echoed its forward-thinking ethos. Through meticulous collaboration and design ingenuity, we unveiled a brand identity that not only mirrored their technological prowess but also conveyed a sense of elegance and reliability.
Our journey with Dazzle Company was more than a rebrand; it was a strategic orchestration of innovation and elegance in the tech digital realm. Dazzle Company, a pioneer in cutting-edge tech solutions, needed a visual identity that echoed its forward-thinking ethos. Through meticulous collaboration and design ingenuity, we unveiled a brand identity that not only mirrored their technological prowess but also conveyed a sense of elegance and reliability.
Our journey with Dazzle Company was more than a rebrand; it was a strategic orchestration of innovation and elegance in the tech digital realm. Dazzle Company, a pioneer in cutting-edge tech solutions, needed a visual identity that echoed its forward-thinking ethos. Through meticulous collaboration and design ingenuity, we unveiled a brand identity that not only mirrored their technological prowess but also conveyed a sense of elegance and reliability.
Задача №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 (по необходимости)
режимы иконок — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.
Паттерны снизили когнитивную нагрузку на пользователей
Паттерны снизили когнитивную нагрузку на пользователей
Паттерны снизили когнитивную нагрузку на пользователей
Пример формирования компонентов
Пример формирования компонентов
Пример формирования компонентов
Unveiling Dazzle: A Radiant Rebranding Journey for the Future of Digital Marketing
Unveiling Dazzle: A Radiant Rebranding Journey for the Future of Digital Marketing
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
Разработала панель истории генераций, категорию режимов и параметров. Адаптировала экраны под desktop, tablet и mobile и Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
UX-анализ и последующая доработка рабочего пространства организовала пользователю больший контроль над настройками и хранением генераций
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Разложила сценарии по экранам. Сформировала гайдлайн, провела итоговую проверку макетов, приложила комментарии для разработчика
И ключевое, передала в разработку! Продукт скоро выйдет в прод)
Я на связи
