От визуальной системы к интерактивному инструменту: создание конструктора для генерации вариативной анимированной айдентики с помощью вайбкодинга в Claude.
О чем этот курс?
Курс посвящен созданию интерактивных конструкторов для тиражирования анимированной айдентики. Слушатели учатся превращать единичное визуальное решение в систему, состоящую из правил, ограничений и изменяемых параметров, которая позволяет создавать множество вариантов графики без ручной пересборки каждого материала.
Авторка Арина Стрыгина «Связанная физика»
В первой части курса формируется визуальная и анимационная система: создается айдентика, определяются постоянные и изменяемые элементы, разрабатываются правила вариативности и адаптации под разные форматы.Во второй части слушатели проектируют логику интерактивного конструктора и переносят визуальную систему в цифровой инструмент с помощью вайбкодинга в Claude. Они учатся формулировать требования к системе, работать с генерируемым кодом, проверять результат, находить ошибки и итеративно дорабатывать инструмент.В итоге слушатели создают конструктор, который позволяет управлять текстом, изображениями, композицией и анимацией через заданные пользователем параметры и получать серию готовых вариантов для разных рекламных носителей.
Кому подойдет этот курс?
❯ графическим и моушен-дизайнерам, которые хотят автоматизировать создание серий визуальных материалов❯ дизайнерам, работающим с рекламной и digital-графикой❯ моушен-дизайнерам, которые хотят научиться проектировать визуальные системы с параметрами❯ дизайнерам, заинтересованным в использовании генеративного кода для создания собственных инструментов❯ специалистам, которые хотят создавать вариативные анимированные плакаты, посты, Reels и экранную графику
Длительность курса 8 недель
Количество контактных часов:
Длительность курса 72 академических часа.
Очные и онлайн занятия и предзаписанные видео лекции по технической составляющей программы, закрепляемые воркшопами.
Пререквизиты курсаСредний и выше среднего уровень владения Adobe After Effects. Уверенные навыки работы с композициями, слоями, ключевыми кадрами, основными параметрами анимации и графическими элементами. Базовые навыки работы в Figma и Adobe Illustrator. Понимание основ композиции, типографики, визуальной иерархии и принципов моушен-дизайна. Умение создавать визуальную айдентику. Опыт программирования не требуется.
Чему научатся слушатели курса?
В процессе обучения на курсе слушатели научатся:❯ Разрабатывать визуальную систему и создавать на её основе серию вариативных KV.❯ Определять правила, ограничения и параметры вариативности графики и анимации.❯ Переводить визуальную систему в единый анимационный язык.❯ Адаптировать композицию и визуальную иерархию под разные экранные форматы и рекламные носители.❯ Проектировать структуру интерфейса и пользовательский сценарий конструктора.❯ Определять управляемые параметры и связывать их с визуальными и анимационными элементами.❯ Использовать Claude для генерации, адаптации и отладки кода.❯ Формулировать запросы к Claude с учётом логики визуальной системы.
Авторка Злата Тевс «TRUESHKOWSKI»
❯ Создавать интерфейс управления параметрами и реализовывать вариативные состояния и анимационные сценарии.❯ Тестировать конструктор на разных комбинациях параметров и итеративно дорабатывать его.❯ Подготавливать сгенерированные варианты к экспорту и публикации.
Какие практические задания будут выполнять слушатели курса?
В процессе обучения на курсе слушатели будут выполнять следующие задания:❯ Разработка визуальной системы, правил вариативности и серии статичных носителей на основе KV❯ Перевод визуальной системы в анимацию с проработкой тайминга, ритма и характера движения❯ Создание цикличной и вариативной анимации❯ Адаптация визуальной системы под разные форматы❯ Проектирование параметров, ограничений, интерфейса и пользовательского сценария конструктора❯ Генерация, адаптация и отладка кода с помощью Claude❯ Связывание пользовательских параметров с визуальными и анимационными элементами❯ Сборка, тестирование и адаптация конструктора под разные рекламные носители❯ Презентация и обсуждение промежуточных результатов❯ Презентация итогового конструктора, визуальной системы и созданных вариантов графики
Тематический план занятий
ВИЗУАЛЬНАЯ СИСТЕМА ДЛЯ ТИРАЖИРОВАНИЯ
❯ Визуальная система как набор взаимосвязанных графических и композиционных правил
❯ Создание айдентики и серии вариативных статичных носителей
❯ Формулирование правил и ограничений визуальной системыАНИМИРОВАННАЯ ВИЗУАЛЬНАЯ СИСТЕМА
❯ Взаимосвязь графического стиля, композиции и движения
❯ Перевод визуальных элементов системы в движение
❯ Вариативность анимации и повторяемость визуальных приёмов
❯ Создание единого анимационного языка системы
❯ Взаимосвязь постоянных и изменяемых параметров в анимированной графикеКОМПОЗИЦИЯ И АДАПТАЦИЯ ДЛЯ РАЗНЫХ ФОРМАТОВ
❯ Иерархия, масштаб и контраст в экранной графике
❯ Баланс, ритм и работа с пространством
❯ Композиционные особенности вертикальных, горизонтальных и квадратных форматов
❯ Сохранение визуальной иерархии при изменении формата
❯ Адаптация графической системы для различных рекламных носителей
Авторка Ната Решетникова «Портфолио / Ната Решетникова»
ФУНДАМЕНТАЛЬНЫЕ ПРИНЦИПЫ АНИМАЦИИ
❯ Ключевые кадры и принципы движения
❯ Тайминг, ритм и скорость
❯ Ускорение и замедление
❯ Инерция, повторение, цикличность и создание лупов
❯ Взаимодействие анимации и композицииТИРАЖИРОВАНИЕ АНИМИРОВАННОЙ ГРАФИКИ
❯ Принципы масштабирования визуальной системы
❯ Определение изменяемых параметров графики и анимации
❯ Вариативность композиции, текста, изображений и движения
❯ Сохранение единого визуального языка при создании серии материалов
❯ Проектирование правил, ограничений и диапазонов вариативности
❯ Подготовка системы к работе с несколькими рекламными носителямиПРОЕКТИРОВАНИЕ ИНТЕРАКТИВНОГО КОНСТРУКТОРА
❯ Принцип работы конструктора и взаимодействия пользователя с системой
❯ Определение входных данных и изменяемых параметров
❯ Структура интерфейса и логика пользовательского сценария
❯ Связь пользовательских параметров с визуальными и анимационными элементами
❯ Проектирование ограничений и правил генерации вариантов
❯ Подготовка визуальной системы к программной реализации
Авторка Ната Решетникова «Ребрендинг ЦСИ М’АРС»
ВАЙБКОДИНГ В CLAUDE
❯ Принципы создания интерактивных инструментов с помощью генеративного кода
❯ Постановка задачи и формулирование требований к конструктору
❯ Использование Claude для генерации и изменения кода
❯ Работа с готовыми фрагментами кода и их адаптация под визуальную систему
❯ Проверка результата и поиск ошибок
❯ Итеративная разработка конструктора через диалог с ClaudeСБОРКА ИНТЕРАКТИВНОГО КОНСТРУКТОРА
❯ Создание интерфейса управления параметрами
❯ Подключение графических и текстовых элементов
❯ Управление композицией и анимацией через параметры конструктора
❯ Создание системы вариативных состояний и анимационных сценариев
❯ Реализация предварительного просмотра результата
❯ Тестирование конструктора на различных комбинациях параметров
Авторка Ната Решетникова «Ребрендинг ЦСИ М’АРС»
АДАПТАЦИЯ КОНСТРУКТОРА ПОД РЕКЛАМНЫЕ НОСИТЕЛИ
❯ Разработка набора форматов и сценариев использования
❯ Адаптация визуальной системы для анимированных плакатов, постов и Reels
❯ Создание лупов для экранов и презентационных носителей
❯ Сохранение визуальной и анимационной системы при смене формата
❯ Организация экспорта и подготовки полученных вариантов к публикацииИТОГОВЫЙ ПРОЕКТ
❯ Разработка визуальной и анимационной системы для выбранной коммуникационной задачи
❯ Проектирование логики интерактивного конструктора
❯ Создание конструктора с использованием вайбкодинга в Claude
❯ Тестирование системы на различных вариантах контента и форматов
❯ Создание набора рекламных носителей на основе единого конструктора
❯ Презентация визуальной системы, логики конструктора и полученных вариантов
