Motion Design · Visual Design
Motion as Explanation, Not Decoration
Motion is a working part of how I design, not a finishing touch handed off at the end. This covers storyboards and campaign film, and the same thinking behind the interface transitions and micro-interactions I build into web and app products: hover states, loading, transitions between screens, the small feedback moments that make an interface feel considered.
Scroll to explore ↓
01 — Overview
Timing is a design decision
The work covered storyboards, style frames, typographic animation, interface transitions and final compositions for campaign and product use — the same skill set I bring to the micro-interactions inside a product: button states, form feedback, loading and empty states, screen-to-screen transitions.
Doing motion changed how I design static screens. Transitions expose whether a hierarchy is real, because you have to decide what moves first, and that question is exactly what a good micro-interaction answers.
02 — Storyboard
Six beats, agreed before a single keyframe
03 — Style frames
Type doing the work
04 — Transitions
Interface motion, specified in milliseconds
These are the same timing decisions I apply to micro-interactions in a live product — the values below are the ones I default to when specifying button, card and modal behaviour for engineering handoff.
Enter
Opacity and 8–16px rise.
240ms · ease-outExit
Faster than entry, no movement.
150ms · ease-inHover
Image scale 1.02, arrow 6px.
250–400msReduced motion
All transforms removed, content immediate.
0ms05 — Principles
Three rules I keep
- 01
Motion explains a relationship
If it does not show where something came from or what changed, it is decoration.
- 02
Nothing outlasts reading speed
If an animation delays the content, the animation is wrong, not the content.
- 03
Every motion has a still fallback
Reduced-motion users get the same information in the same order.