01 Программа
Три курса по неделям
Три курса на одной шкале недель. Каждая дорожка — курс, каждый клип — модуль с упражнением. Ниже — монтажный лист: что изучаете, что делаете и что сдаёте каждую неделю.
V1 Флагманский курс · Монтажный лист: 20 недель
Моушн-дизайн интерфейсов
Модуль 1 · Тайминг и спейсинг · After Effects
Неделя01
Ключевые кадры и тайминг
- Композиции, слои и ключевые кадры в After Effects
- Тайминг и спейсинг: чем они отличаются
- Какие принципы анимации работают в интерфейсе
ПрактикаАнимировать проход квадрата через экран за 12, 24 и 36 кадров и сравнить.
Сдаёте: Три MP4, 60 fps
Неделя02
Прыгающий мяч
- Сжатие и растяжение без потери объёма
- Упреждение и инерция после остановки
- Дуги и затухание отскоков
Упражнение модуляАнимировать прыгающий мяч: сжатие и растяжение, затухающие отскоки.
Сдаёте: MP4, 4 секунды, 60 fps
Модуль 2 · Кривые и easing · After Effects
Неделя03
Кривые в Graph Editor
- График значений и график скорости
- Ручки ключей и влияние в Keyframe Velocity
- Linear, ease-in, ease-out и ease-in-out
ПрактикаПовторить одно движение с четырьмя типами кривых и сравнить графики скорости.
Сдаёте: MP4: четыре варианта рядом
Неделя04
Появление и исчезновение
- Почему появлению подходит ease-out, а исчезновению — ease-in
- Как длительность зависит от расстояния и размера
- Как перевести кривую из After Effects в cubic-bezier
Упражнение модуляАнимировать появление карточки с тремя кривыми, выбрать одну и объяснить выбор.
Сдаёте: MP4 и обоснование в 3–5 предложениях
Модуль 3 · Микровзаимодействия · Figma
Неделя05
Состояния компонентов
- Состояния кнопки, переключателя и поля ввода
- Варианты и интерактивные компоненты в Figma
- Как Smart Animate сопоставляет слои по именам
ПрактикаСобрать переключатель с анимацией между состояниями через Smart Animate.
Сдаёте: Ссылка на прототип в Figma
Неделя06
Отклик на действие
- Триггеры: нажатие, наведение, задержка
- Кривые и пружины в прототипах Figma
- Переменные и условия для состояний прототипа
ПрактикаСобрать поле ввода с состояниями фокуса, ошибки и успешной проверки.
Сдаёте: Прототип в Figma, три состояния
Неделя07
Состояние загрузки
- Сценарий загрузки: нажатие, ожидание, результат
- Спиннер, прогресс или скелетон: что выбрать
- Как показать долгое ожидание и не раздражать
Упражнение модуляСобрать состояние загрузки: от нажатия кнопки до результата.
Сдаёте: Прототип в Figma и запись экрана
Модуль 4 · Переходы между экранами · Figma, After Effects
Неделя08
Навигационные переходы
- Пространственная модель навигации: вперёд, назад, поверх
- Направление движения показывает иерархию экранов
- Navigate to, Open overlay и типы переходов в Figma
ПрактикаСобрать прототип из двух экранов: переход вперёд и модальное окно.
Сдаёте: Ссылка на прототип в Figma
Неделя09
Хореография экрана
- Что двигается первым: порядок и задержки
- Каскадное появление элементов списка
- Экран в After Effects: прекомпозиции и motion blur
ПрактикаАнимировать в After Effects появление списка: элементы входят по очереди.
Сдаёте: MP4, 2 секунды, 60 fps
Неделя10
Общий элемент
- Общий элемент: один объект на двух экранах
- Масштаб, позиция и маска вместо простого растворения
- Smart Animate или After Effects: где что уместно
Упражнение модуляСобрать переход из списка в карточку товара с общим элементом.
Сдаёте: Прототип в Figma и MP4
Модуль 5 · Моушн бренда · After Effects
Неделя11
Характер бренда в движении
- Как свойства бренда становятся скоростью и кривыми
- Принципы движения для фирменного стиля на одной странице
- Shape-слои, Trim Paths и маски для логотипа
ПрактикаАнимировать одну кнопку в строгом и игривом характере и описать разницу.
Сдаёте: Два MP4 и страница принципов
Неделя12
Появление логотипа
- Собираем логотип из Trim Paths и масок
- Перелёт и затухание: выражение для инерции
- Экспорт с прозрачностью: ProRes 4444 или Lottie
Упражнение модуляСделать появление логотипа за 2 секунды в двух вариантах: строгом и игривом.
Сдаёте: Два MP4 по 2 секунды
Модуль 6 · Типографика в движении · After Effects
Неделя13
Текстовые аниматоры
- Аниматоры и Range Selector: по буквам, словам, строкам
- Ось wght переменного шрифта в After Effects
- Анимация чисел: Slider Control и выражение
ПрактикаАнимировать заголовок и счётчик суммы для экрана продукта.
Сдаёте: MP4, 3 секунды, 60 fps
Неделя14
Кинетическое слово
- Как движение передаёт смысл слова
- Сколько времени слову нужно для прочтения
- Разбор вариантов: от буквального к метафоре
Упражнение модуляАнимировать слово так, чтобы движение передавало его смысл.
Сдаёте: MP4, 3–5 секунд, 60 fps
Модуль 7 · Rive и Lottie · Rive, Lottie
Неделя15
Lottie через Bodymovin
- Что Bodymovin экспортирует, а что нет
- Вес файла: shape-слои, растровые картинки, выражения
- Проверка Lottie в браузере и на телефоне
ПрактикаЭкспортировать анимацию иконки в Lottie и уменьшить вес файла.
Сдаёте: JSON-файл, вес до и после
Неделя16
Первые шаги в Rive
- Артборды, фигуры и таймлайны в Rive
- Импорт иконки из Figma через SVG
- Анимации покоя и активного состояния
ПрактикаНарисовать иконку «В избранное» в Rive и анимировать два состояния.
Сдаёте: Файл .riv с двумя анимациями
Неделя17
State machine в Rive
- Состояния, переходы и условия в state machine
- Входы: boolean, trigger и number
- Listeners: реакция на наведение и нажатие
Упражнение модуляСобрать иконку «В избранное» со state machine: наведение, нажатие, отмена.
Сдаёте: Файл .riv и запись экрана
Модуль 8 · Передача в разработку и итоговый проект · Figma, CSS
Неделя18
CSS и Web Animations API
- CSS transitions: свойство, длительность, timing-function
- Web Animations API: ключевые кадры и animate()
- prefers-reduced-motion: версия для тех, кому движение мешает
ПрактикаВыбрать сценарий итогового проекта и нарисовать раскадровку на 3–5 экранов.
Сдаёте: Раскадровка на 3–5 экранов
Неделя19
Сборка итогового проекта
- От раскадровки к прототипу: порядок работы
- Одна шкала длительностей и кривых на весь сценарий
- Проверка прототипа на реальном телефоне
ПрактикаСобрать в Figma переходы и микровзаимодействия для всех экранов сценария.
Сдаёте: Прототип в Figma, 3–5 экранов
Неделя20
Спецификация и защита
- Спецификация: таблица или подписи на макетах
- Как рассказать о проекте: задача, решения, компромиссы
- Как проходит защита проекта на живом занятии
Упражнение модуляРасписать для каждого перехода длительность, задержку и cubic-bezier.
Сдаёте: Прототип и спецификация анимации
V2 Интенсив · Монтажный лист: 4 недели
Кинетическая типографика
Модуль 1 · Шрифт как материал · After Effects
Неделя01
Шрифт как материал
- Оси переменного шрифта: wght и wdth
- Анимация осей шрифта в After Effects
- Темп в BPM: сколько кадров на долю
Упражнение модуляАнимировать слово, насыщенность которого меняется в такт метроному.
Сдаёте: MP4, 5 секунд, со звуком
Модуль 2 · Текстовые аниматоры · After Effects
Неделя02
Аниматоры и селекторы
- Свойства аниматора: позиция, масштаб, прозрачность, трекинг
- Range Selector: начало, конец, смещение, единицы
- Wiggly Selector и Expression Selector: когда уместны
Упражнение модуляСобрать заголовок из трёх слов, в котором каждое слово появляется по-своему.
Сдаёте: MP4, 4 секунды, 1080p
Модуль 3 · Текст и звук · After Effects
Неделя03
Текст и звук
- Маркеры слоя и композиции: разметка по битам
- Акценты: не каждый удар требует движения
- Convert Audio to Keyframes и выражения по громкости
Упражнение модуляСобрать 10 секунд типографики под заданный трек.
Сдаёте: MP4, 10 секунд, со звуком
Модуль 4 · Итоговый ролик · After Effects, Media Encoder
Неделя04
Итоговый ролик
- Сценарий и раскадровка на 6–8 кадров
- Версии 16:9 и 9:16: что перекомпоновать
- Экспорт в Media Encoder: H.264 и битрейт
Упражнение модуляСобрать ролик-анонс на 15–20 секунд с раскадровкой и двумя версиями.
Сдаёте: Раскадровка и MP4 в 16:9 и 9:16
V3 Курс · Монтажный лист: 8 недель
3D-моушн в Blender
Модуль 1 · Интерфейс и моделирование · Blender
Неделя01
Знакомство с Blender
- Навигация во вьюпорте и виды с цифровой клавиатуры
- Режим редактирования: вершины, рёбра, грани
- Перемещение, поворот, масштаб и Apply Scale
ПрактикаСобрать из примитивов простой предмет: кружку, лампу или колонку.
Сдаёте: Файл .blend и скриншот вьюпорта
Неделя02
Модификаторы и 3D-иконки
- Bevel, Subdivision Surface, Array, Mirror и Solidify
- Почему порядок модификаторов в стеке важен
- Форма 3D-иконки: мягкие скругления, мало деталей
Упражнение модуляСмоделировать набор из трёх 3D-иконок для интерфейса в одном стиле.
Сдаёте: Файл .blend и превью трёх иконок
Модуль 2 · Материалы, свет, рендер · Blender
Неделя03
Материалы на нодах
- Principled BSDF: цвет, шероховатость, металл
- Shader Editor: Noise Texture и ColorRamp
- Пластик, стекло и матовая поверхность
ПрактикаНастроить материалы трёх иконок в одной цветовой палитре.
Сдаёте: Три рендера PNG, 1080×1080
Неделя04
Свет и рендер
- Трёхточечная схема: ключевой, заполняющий, контровой свет
- Eevee или Cycles: скорость против точности
- Сэмплы, шумоподавление и прозрачный фон
Упражнение модуляСделать студийный рендер одной иконки в двух схемах света.
Сдаёте: Два рендера PNG, 1080×1080
Модуль 3 · Анимация и камера · Blender
Неделя05
Ключевые кадры и кривые
- Ключевые кадры, Timeline и Dope Sheet
- Graph Editor: F-кривые, интерполяция, ручки
- Перелёт и затухание без лишних ключей
ПрактикаАнимировать появление иконки с перелётом по масштабу за 1 секунду.
Сдаёте: MP4, 2 секунды, 30 fps
Неделя06
Камера и вращение на 360°
- Камера: фокусное расстояние и глубина резкости
- Вращение через родительский Empty и Track To
- Бесшовный цикл: линейная интерполяция и последний кадр
Упражнение модуляСделать вращение предмета на 360° за 4 секунды с бесшовным циклом.
Сдаёте: MP4, 4 секунды, бесшовный цикл
Модуль 4 · Итоговая сцена · Blender
Неделя07
Сборка продуктовой сцены
- Раскадровка сцены на 3–4 плана
- Движение камеры и композиция кадра
- Черновой рендер в Eevee для аниматика
ПрактикаСобрать продуктовую сцену и аниматик на 8–10 секунд.
Сдаёте: Аниматик MP4, 8–10 секунд
Неделя08
Финальный рендер и экспорт
- Рендер секвенции PNG: почему не сразу видео
- Сжатие для сайта: FFmpeg или Media Encoder
- Итоговый набор иконок: PNG с прозрачным фоном
Упражнение модуляОтрендерить продуктовую сцену на 8–10 секунд и подготовить версии для сайта и соцсетей.
Сдаёте: MP4 для сайта и соцсетей, набор иконок