Интерфейс / цифровой продукт / 2026

BRAND BUILDER.

От рекламного примера к собственной идее.

Мой вклад

Дизайн продукта и реализация с помощью Codex. От структуры библиотеки до сравнения, Студии и адаптивных экранов.

Формат

Интерактивный прототип

Библиотека / Учебные примеры — экран опубликованной версии

Контекст

Brand Builder соединяет изучение рекламных примеров и создание собственного макета. Библиотека даёт материал для разбора, сравнение помогает увидеть различия, а Студия превращает выбранную идею в редактируемую композицию.

Задача

Объединить изучение рекламных примеров и создание макета в одном последовательном пользовательском сценарии.

Границы проекта

Это браузерная демонстрация мобильного приложения. NEO, AURA и KERN — учебные продукты. Сохранения остаются в браузере; реальные AI-вызовы, платежи и серверная отправка фотографий в публичном демо отсутствуют.

Решения в деталях

Реальные экраны публичной версии. Каждый можно открыть крупнее.

Пример сразу объясняет, что изучать

Посетителю нужно понять предмет рекламы и возможный приём до открытия подробного разбора.

В библиотеке показаны сам макет, название учебного продукта и короткое объяснение. Поиск и категории помогают выбрать тему; разбор, сравнение и сохранение доступны прямо у примера.

Библиотека. Макет и его предмет видны до открытия разбора.

Мобильный обзор с поиском и навигацией между разделами.

Сравнение раскрывает решения

Два примера легче разбирать, когда вопросы к ним одинаковы и их можно сопоставить рядом.

В сравнении NEO и AURA используются общие разделы: первое впечатление, предложение, визуальная подача и вопросы для проверки. Редакторский разбор явно отделён от A/B-теста и данных об эффективности.

Сравнение. Два подхода рассматриваются по общим вопросам.

Та же пара примеров доступна в мобильной композиции.

Студия ведёт от продукта к макету

Создание рекламы удобнее разделить на понятные части, сохраняя связь текста с продуктом.

Четыре шага — продукт, бренд, текст и макет. В редакторе доступны форматы 1:1, 4:5 и 9:16, масштаб и положение товара. Изменённый заголовок появляется в макете; экспорт PNG подготавливает изображение выбранного размера.

Студия. Предпросмотр сохраняет связь текста и изображения товара.

Макет и управление им доступны в браузере телефона.

Путь по интерфейсу

Сценарий, проверенный в опубликованном демо.

Выбрать два примера
NEO и AURA добавляются в сравнение из библиотеки.
Изменить свой макет
В Студии заголовок заменён на «Новый взгляд.» — изменение появилось в композиции.
Подготовить изображение
PNG-экспорт создал превью 1080 × 1350 px. Сохранение файла зависит от браузера; встроенный просмотрщик предлагает повторить его в обычном браузере.

Результат PNG-экспорта из Студии: 1080 × 1350 px. Заголовок изменён во время проверки демо.

Что получилось

Интерактивный прототип, в котором можно сравнить рекламные идеи, отредактировать свой макет и подготовить изображение к сохранению без регистрации.

Библиотека и разбор учебных примеров
Сравнение и локальные сохранения
Студия с текстом, форматами и масштабом
Подготовка PNG/JPEG и адаптивные экраны

Интерактивный прототип. NEO, AURA и KERN — учебные продукты. В публичном демо нет реальных AI-вызовов, платежей и серверной отправки фотографий.

Следующий проектГРАНЬ