Motion Design
Using movement to communicate change, continuity, and hierarchy rather than to decorate.
Motion design in interfaces is the use of animation to make change legible: where a thing came from, what belongs to what, whether an action registered. Motion that does not answer one of those questions is decoration, and decoration has a cost in attention, in code, and in bytes.
Treating motion as a system rather than per-component styling is what keeps it coherent. A small vocabulary — a handful of named entrance styles, an on/off choice for stagger, bounded distance and duration — behaves like a Design Token set: authors pick from it, and the result is consistent because the options are.
Several constraints shape any real implementation.
Reduced motion is not optional. See Reduced Motion.
Entrances break no-script rendering. An animation starting at zero opacity means the content is invisible until scripts run, so any surface required to work without JavaScript can only animate on interaction. See Progressive Enhancement.
Animation libraries cost bytes, and the cost is per route. Splitting the feature set so only the used capabilities load is the difference between a few kilobytes and tens of them; see Performance Budget.
Some effects cannot take a transform. A toolbar positioned from a measured rectangle is corrupted by a transform, so it has to fade rather than lift — a physical constraint, not a preference.
See also5
Uncanny Valley
The proposed dip in affinity as a likeness approaches, without reaching, the human.
Design & Interface9 connections
Easing
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
Design & Interface9 connections
Staggered Animation
Offsetting the start of sibling animations so a group reveals in sequence.
Design & Interface8 connections
Color Contrast
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
Design & Interface14 connections
Stacking Context
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
Design & Interface13 connections
Related2
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from13
- Color ContrastDesign & Interface
The measured luminance difference between foreground and background, and the accessibility floor it must clear.
- Dark ModeDesign & Interface
Serving an alternate palette for low-light preference, and the three states that implies.
- Diegetic InterfacePlay & Games
An interface that exists inside the fiction, readable by the character as well as the player.
- EasingDesign & Interface
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
- Game FeelPlay & Games
The perceptual layer between input and simulation, and the tuning that makes a control scheme read as responsive.
- OKLCHDesign & Interface
A perceptually uniform color space that makes lightness and chroma behave predictably.
- Progressive EnhancementWeb Platform
Building so the core experience works without scripts, with richer behavior layered on top.
- Reduced MotionDesign & Interface
An operating-system preference signaling that animation should be minimized, for real medical reasons.
- SkeuomorphismDesign & Interface
Designing a digital object to visually mimic its physical predecessor, borrowing familiarity at the cost of extra visual weight.
- Stacking ContextDesign & Interface
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
- Staggered AnimationDesign & Interface
Offsetting the start of sibling animations so a group reveals in sequence.
- Uncanny ValleyDesign & Interface
The proposed dip in affinity as a likeness approaches, without reaching, the human.
- Variable FontsDesign & Interface
A single font file that encodes a continuous design space, letting weight, width, and other axes be set to any value at runtime.