01 Curriculum
Three courses, week by week
Three courses on one week ruler. Each track is a course, each clip a module with its exercise. Below is the edit list: what you study, what you make and what you hand in every week.
V1 Flagship course · Edit list: 20 weeks
Interface Motion Design
Module 1 · Timing and spacing · After Effects
Week01
Keyframes and timing
- Compositions, layers and keyframes in After Effects
- Timing versus spacing: what each controls
- Which animation principles apply to interfaces
PracticeMove a square across the frame in 12, 24 and 36 frames, then compare.
Hand in: Three MP4s at 60 fps
Week02
The bouncing ball
- Squash and stretch that keeps the volume
- Anticipation and follow-through
- Arcs and decaying bounce heights
Module exerciseAnimate a bouncing ball with squash and stretch and decaying bounces.
Hand in: MP4, 4 seconds, 60 fps
Module 2 · Curves and easing · After Effects
Week03
Curves in the Graph Editor
- Value graph versus speed graph
- Keyframe handles and influence in Keyframe Velocity
- Linear, ease-in, ease-out and ease-in-out
PracticeRepeat one move with four easing types and compare their speed graphs.
Hand in: MP4 with four versions side by side
Week04
Entrances and exits
- Why entrances ease out and exits ease in
- How duration depends on distance and size
- Turning an After Effects curve into cubic-bezier
Module exerciseAnimate a card entrance with three curves, then pick one and justify it.
Hand in: MP4 and a 3–5 sentence rationale
Module 3 · Micro-interactions · Figma
Week05
Component states
- States of buttons, toggles and inputs
- Variants and interactive components in Figma
- How Smart Animate matches layers by name
PracticeBuild a toggle that animates between its states with Smart Animate.
Hand in: Link to a Figma prototype
Week06
Responding to input
- Triggers: on click, while hovering, after delay
- Easing and spring curves in Figma prototypes
- Variables and conditionals for prototype state
PracticeBuild an input field with focus, error and success states.
Hand in: Figma prototype with three states
Week07
The loading state
- Loading choreography: press, wait, result
- Spinner, progress bar or skeleton: which to use
- Showing a long wait without irritating people
Module exerciseBuild a loading state from the button press to the result.
Hand in: Figma prototype and a screen recording
Module 4 · Screen transitions · Figma, After Effects
Week08
Navigation transitions
- The spatial model: forward, back, on top
- Direction of motion shows screen hierarchy
- Navigate to, Open overlay and transition types in Figma
PracticeBuild a two-screen prototype with a push and a modal transition.
Hand in: Link to a Figma prototype
Week09
Screen choreography
- What moves first: order and delays
- Staggering the items of a list
- A screen in After Effects: precomps and motion blur
PracticeAnimate a list appearing in After Effects, with items entering in turn.
Hand in: MP4, 2 seconds, 60 fps
Week10
The shared element
- One object across two screens
- Scale, position and masking instead of a fade
- Smart Animate or After Effects: where each fits
Module exerciseBuild a transition from a list to a product card with a shared element.
Hand in: Figma prototype and an MP4
Module 5 · Brand motion · After Effects
Week11
Brand character in motion
- Turning brand traits into speed and curves
- One-page motion principles for a brand system
- Shape layers, Trim Paths and masks for logos
PracticeAnimate one button in two characters, strict and playful, and describe the difference.
Hand in: Two MP4s and a principles page
Week12
The logo reveal
- Building a logo from Trim Paths and masks
- Overshoot and settle: an inertia expression
- Exporting with alpha: ProRes 4444 or Lottie
Module exerciseMake a 2-second logo reveal in two versions: strict and playful.
Hand in: Two MP4s, 2 seconds each
Module 6 · Type in motion · After Effects
Week13
Text animators
- Animators and the Range Selector: letters, words, lines
- A variable font's wght axis in After Effects
- Counting numbers: Slider Control and an expression
PracticeAnimate a headline and an amount counter for a product screen.
Hand in: MP4, 3 seconds, 60 fps
Week14
The kinetic word
- How motion carries the meaning of a word
- How long a word must hold to be read
- From literal to metaphorical: reviewing options
Module exerciseAnimate a word so that the motion carries its meaning.
Hand in: MP4, 3–5 seconds, 60 fps
Module 7 · Rive and Lottie · Rive, Lottie
Week15
Lottie via Bodymovin
- What Bodymovin exports and what it drops
- File weight: shape layers, bitmaps, expressions
- Checking a Lottie in browsers and on phones
PracticeExport an icon animation to Lottie and cut its file weight.
Hand in: JSON file, weight before and after
Week16
First steps in Rive
- Artboards, shapes and timelines in Rive
- Bringing an icon over from Figma as SVG
- Idle and active animations
PracticeDraw the “Favourite” icon in Rive and animate its two states.
Hand in: A .riv file with two animations
Week17
Rive state machines
- States, transitions and conditions in a state machine
- Inputs: boolean, trigger and number
- Listeners for hover and click
Module exerciseBuild the “Favourite” icon with a state machine: hover, press, undo.
Hand in: A .riv file and a screen recording
Module 8 · Developer handoff and final project · Figma, CSS
Week18
CSS and Web Animations
- CSS transitions: property, duration, timing function
- Web Animations API: keyframes and animate()
- prefers-reduced-motion: a version for motion-sensitive users
PracticeChoose a scenario for the final project and storyboard 3–5 screens.
Hand in: A storyboard of 3–5 screens
Week19
Building the final project
- From storyboard to prototype: the working order
- One scale of durations and curves throughout
- Testing the prototype on a real phone
PracticeBuild the transitions and micro-interactions for every screen in Figma.
Hand in: Figma prototype, 3–5 screens
Week20
Spec and defence
- A spec as a table or annotated frames
- Presenting a project: problem, decisions, trade-offs
- How the project defence at the live session works
Module exerciseSpecify the duration, delay and cubic-bezier for every transition.
Hand in: Prototype and animation spec
V2 Intensive · Edit list: 4 weeks
Kinetic Typography
Module 1 · Type as material · After Effects
Week01
Type as material
- Variable font axes: wght and wdth
- Animating font axes in After Effects
- Tempo in BPM: how many frames per beat
Module exerciseAnimate a word whose weight changes in time with a metronome.
Hand in: MP4, 5 seconds, with sound
Module 2 · Text animators · After Effects
Week02
Animators and selectors
- Animator properties: position, scale, opacity, tracking
- Range Selector: start, end, offset, units
- Wiggly and Expression Selectors: when they fit
Module exerciseBuild a three-word headline where each word enters its own way.
Hand in: MP4, 4 seconds, 1080p
Module 3 · Type and sound · After Effects
Week03
Type and sound
- Layer and composition markers on the beat
- Accents: not every beat needs a move
- Convert Audio to Keyframes and volume-driven expressions
Module exerciseBuild 10 seconds of typography to a given track.
Hand in: MP4, 10 seconds, with sound
Module 4 · Final video · After Effects, Media Encoder
Week04
The final video
- Script and a 6–8 frame storyboard
- 16:9 and 9:16 cuts: what to recompose
- Exporting from Media Encoder: H.264 and bitrate
Module exerciseMake a 15–20 second announcement video with a storyboard and two cuts.
Hand in: Storyboard and MP4s in 16:9 and 9:16
V3 Course · Edit list: 8 weeks
3D Motion in Blender
Module 1 · Interface and modelling · Blender
Week01
Getting started in Blender
- Viewport navigation and numpad views
- Edit Mode: vertices, edges, faces
- Move, rotate, scale and Apply Scale
PracticeBuild a simple object from primitives: a mug, a lamp or a speaker.
Hand in: A .blend file and a viewport screenshot
Week02
Modifiers and 3D icons
- Bevel, Subdivision Surface, Array, Mirror and Solidify
- Why modifier order in the stack matters
- 3D icon shapes: soft bevels, few details
Module exerciseModel a set of three 3D icons for an interface in one style.
Hand in: A .blend file and three icon previews
Module 2 · Materials, light, rendering · Blender
Week03
Node-based materials
- Principled BSDF: base colour, roughness, metallic
- Shader Editor: Noise Texture and ColorRamp
- Plastic, glass and matte surfaces
PracticeSet up materials for the three icons in one colour palette.
Hand in: Three PNG renders, 1080×1080
Week04
Lighting and rendering
- Three-point lighting: key, fill and rim
- Eevee or Cycles: speed versus accuracy
- Samples, denoising and a transparent background
Module exerciseRender one icon in a studio setup under two lighting schemes.
Hand in: Two PNG renders, 1080×1080
Module 3 · Animation and camera · Blender
Week05
Keyframes and curves
- Keyframes, the Timeline and the Dope Sheet
- Graph Editor: F-curves, interpolation, handles
- Overshoot and settle without extra keys
PracticeAnimate an icon appearing with a scale overshoot in 1 second.
Hand in: MP4, 2 seconds, 30 fps
Week06
Camera and turntable
- Camera: focal length and depth of field
- Rotating with a parent Empty and Track To
- Seamless loops: linear interpolation and the last frame
Module exerciseMake a 360° turntable of an object in 4 seconds with a seamless loop.
Hand in: MP4, 4 seconds, seamless loop
Module 4 · Final scene · Blender
Week07
Assembling the product scene
- Storyboarding a scene in 3–4 shots
- Camera moves and shot composition
- A rough Eevee render for the animatic
PracticeAssemble the product scene and an 8–10 second animatic.
Hand in: Animatic MP4, 8–10 seconds
Week08
Final render and export
- Rendering a PNG sequence rather than straight to video
- Compressing for the web: FFmpeg or Media Encoder
- The final icon set: PNGs with transparency
Module exerciseRender the 8–10 second product scene with cuts for the web and social media.
Hand in: MP4 for the web and social media, icon set