This week turns the Week 10 principles into working motion studies. We will build small After Effects demos that show how each UX motion principle can be communicated through actual keyframes.
Use After Effects to demonstrate the 12 Principles of UX in Motion. Each demo should be simple, readable, and tied to a usability purpose: expectation, continuity, narrative, or relationship.
A single AE project with labeled mini-comps for each principle. Each comp should be small enough to understand quickly.
Each motion study should demonstrate one UX motion principle in a few seconds. No full app prototype is required.
Each demo needs a one-sentence rationale explaining what the motion clarifies for the user.
Use the Graph Editor to make a panel, button, or card feel responsive instead of robotic.
Stagger layers so the order of motion communicates hierarchy and sequence.
Use nulls and parented layers so related objects move together or respond to each other.
Animate one object changing function, such as a button becoming a progress bar or check mark.
Animate numbers, labels, or progress values so the viewer understands what changed.
Use masks or track mattes to reveal content from a logical source or container.
Use stacked layers, opacity, blur, and shadow to show foreground/background relationships.
Duplicate or emit a new element from an existing object so its origin is clear.
Dim, blur, or partially cover the background to show a secondary layer of interface space.
Move foreground, midground, and background layers at different speeds to establish hierarchy.
Use 3D layers, rotations, folds, or cards to show origin, departure, and spatial logic.
Use scale, camera moves, or null-driven zooms to move between interface spaces while preserving context.
Deliverables: Upload the AE project folder and either 12 short demo exports or one combined principle board video. Include one-sentence usability notes for each principle.