05 · Service

Prototyping & Motion

Prototyping isn't decoration - it's compression. A clickable prototype with the right motion communicates what would otherwise need pages of spec, and saves engineering from interpreting ambiguous descriptions. The job of a prototype is to make the right behaviour obvious.

05 · Prototyping & Motion

How I approach this

The work, one phase at a time.

Match the prototype's fidelity to the question being asked. Validating a flow only needs lo-fi clickable; testing a motion sequence needs the real interaction. Higher fidelity is more expensive - only spend it where it pays.

Motion is information, not flair. Timing, easing, and choreography signal hierarchy, status, and causality. A 200ms ease-out tells users 'this happened'; a 600ms spring tells them 'this is significant'. Restraint is the discipline that separates mature motion from gimmicky motion.

Edge cases get prototyped too - what happens when the network fails, when a state is missing, when input is wrong. These are the moments where the product earns or loses trust, and they deserve the same prototyping rigor as the happy path.

Where it accelerates the conversation, motion specs get built in code (Framer Motion, GSAP) so designers and engineers share a vocabulary. A coded prototype removes ambiguity in a way no Figma file can.

Process · in practice

What I deliver

Tangible outputs from this engagement.

01
Clickable Figma prototypes for happy path + key error states
02
Motion specs (Lottie, video, or coded micro-interactions)
03
Interaction documentation: timing, easing, choreography
04
After Effects motion explorations for hero moments
05
Coded motion components for design-to-code engagements
06
Prototype testing reports where validation is needed

Methods & frameworks

The shoulders I stand on.

Disney's 12 Principles of Animation
Applied selectively to UI: anticipation, follow-through, easing, staging - earn the principles, don't quote them.
Material Motion (Google)
Choreography, easing curves, and shared-element transitions for cross-surface consistency.
IBM Motion Principles
Focus, expression, and attention as the three jobs motion does in enterprise UI.
Restraint as a design principle
Most products need less motion, not more. Every animation has to justify its frame budget.
Prototype testing with Maze / in-person
Validating prototypes with real users before committing engineering time.