AI-сервис, который превращает фото пользователя в стилизованный аватар. Флоу из 4 экранов, desktop 1920 и mobile 375, дизайн-система в Figma, прототип и моушн.
Пользователь приходит с обычным селфи, а уходит с новой версией себя. Поэтому экран тоже меняется: от спокойной «бумажной» основы к громкой заливке цветом выбранного стиля и обратно к результату. Каждый стиль — это свой цвет, и цвет несёт смысл.
Выбрал «3D Toy» — интерфейс синеет, «Поп-арт» — желтеет. Никаких легенд и подписей.
Реальные этапы, процент, оставшееся время и превращение прямо на фото.
Проверка фото до генерации, возврат кредита при отмене, удаление фото через 24 часа.
Ни один референс не копируется: из каждого взят один механизм или приём, который решает конкретную задачу флоу.
Подсказки до ошибки. Четыре карточки объясняют, какое фото сработает, ещё до загрузки — меньше неудачных генераций и потраченных кредитов.
Мгновенный фидбек. Рамка лица, чек-лист качества и шкала — человек видит, что сервис «понял» фото, и спокойно идёт дальше.
Приватность на виду. «Видишь только ты» и удаление через 24 часа — ответ на главный страх: куда уходит моё лицо.
Сила стиля. Слайдер «Больше тебя — Больше стиля» решает главный страх: «а я буду похож?»
Превращение на фото. Сканирующая линия «переливает» стиль сверху вниз — ожидание становится шоу, а не спиннером.
Можно уйти. Уведомление о готовности и отмена с возвратом кредита — пользователь не заложник вкладки.
Результат — главный герой. Большая карточка 2:3, варианты рядом, переключатель «До / После» прямо на картинке.
Примерка на аватарку. Автоматическая круглая обрезка в контексте мессенджера, профиля и созвона: сразу видно, как ава будет смотреться там, куда её поставят.
Следующий шаг в один клик. Этот же человек в остальных стилях — повод вернуться и потратить ещё кредит. Стикерпак — апсейл.
Обратная связь. «Похоже на тебя?» — сигнал для качества модели без отдельной анкеты.
Экраны собраны нативными слоями с автолейаутом. Цвета, шрифты и радиусы привязаны к переменным и стилям, повторяющиеся элементы — экземпляры компонентов.
Открыть файл в Figma ↗Переходы не переключают экраны, а перетекают: выбранная карточка разливается в экран генерации, цветное поле схлопывается в карточку результата. Всё собрано на одном таймлайне GSAP — те же функции работают в прототипе и в видео.
39 секунд, 1080×1920, 60 fps. Монтаж привязан к битам трека: стили меняются на каждую вторую долю, 100% генерации приходится на возвращение бита после брейкдауна.
В комплекте: 10 экранов в Figma и PNG, дизайн-система с переменными и компонентами, кликабельный прототип, видео сценария 1920×1080 с проектом After Effects и промо-ролик 9:16.