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