Telegram
09 / КейсDigital · UI · AIКонцепция

ALTER

AI Avatar App

UI-концепция и анимация сервиса для создания цифровых AI-аватаров.

Стеклянная трансформация портрета в цифровой аватар
ALTER · AI Avatar App
Моя роль
Концепция · UI-дизайн · Visual Research · Motion Design · 3D
Инструменты
Figma · After Effects · Blender · AI tools
01 / Задача

Четыре состояния одной трансформации

Задача — разработать визуальную концепцию сервиса, в котором пользователь загружает портрет, выбирает стиль и получает новую цифровую версию себя. Нужно было собрать четыре состояния основного сценария для desktop и mobile, а затем показать процесс генерации в анимации.

02 / Исследование

Визуальное направление

Перед разработкой интерфейса я изучила существующие AI-сервисы: способы загрузки исходного изображения, выбор визуального стиля, отображение процесса генерации и подачу результата. Отдельно исследовала эффект стеклянного преломления и постепенной трансформации портрета.

ALTER — Research & Visual Direction: исследование интерфейсов Krea, Krea Enhancer, Luma AI, Runway и glass reveal
ALTER — Research & Visual Direction · Figma workspace
03 / UI-сценарий

Upload →Choose Style →Generating →Result

01 Upload — desktop-интерфейс ALTER
01Upload
02 Choose Style — desktop-интерфейс ALTER
02Choose Style
03 Generating — desktop-интерфейс ALTER
03Generating
04 Result — desktop-интерфейс ALTER
04Result
04 / Motion

Момент генерации

После разработки интерфейсов сценарий был собран и анимирован в Adobe After Effects. В центре анимации — момент генерации: портрет постепенно меняется через эффект стеклянного преломления и собирается в новый образ.

05 / Mobile

Тот же сценарий в компактном формате

01 Upload — мобильный интерфейс ALTER
01Upload
02 Choose Style — мобильный интерфейс ALTER
02Choose Style
03 Generating — мобильный интерфейс ALTER
03Generating
04 Result — мобильный интерфейс ALTER
04Result
06 / Blender · 3D

Стеклянная трансформация

Отдельная 3D-секвенция была собрана в Blender. Она стала основой для эффекта стеклянной трансформации и была интегрирована в итоговую анимацию.

Кадр 1 из Blender-секвенции стеклянной трансформации
Кадр 2 из Blender-секвенции стеклянной трансформации
Кадр 3 из Blender-секвенции стеклянной трансформации
07 / Процесс

Figma →After Effects →Blender

Все экраны и пользовательский сценарий были разработаны в Figma.

Анимация интерфейса и итоговый ролик собраны в After Effects.

Эффект стеклянного преломления подготовлен отдельной 3D‑секвенцией в Blender.

Результат

ALTER — кейс об AI-сервисе для создания аватаров.Исследование, пользовательский сценарий, UI-дизайн, анимация и 3D-секвенция стеклянного преломления.

Контакт

Обсудить похожую задачу?

Пришлите задачу, сроки и имеющиеся материалы в Telegram. Я отвечу, какой формат работы подойдёт и смогу ли подключиться.

Написать в Telegram
Сайт спроектирован и создан Ксенией Зверевой