01
Color
Directs attention and carries meaning.
In interaction design: Color helps people spot actions, understand selection, and recognize success, warning, or error states. It should support meaning rather than carry it alone.
A tiny interaction design school
Move a slider.
Change the feeling.
Learn the language of interfaces by changing one decision at a time. Color, spacing, type, shape, motion, and state all influence what people notice and how confidently they act.
Start playing ↓Six useful words
Visual choices become interaction.
02
Spacing
Shows what belongs together.
In interaction design: Distance creates groups, separates competing choices, and gives fingers enough room to act. Consistent spacing also makes an interface easier to scan.
03
Typography
Turns information into hierarchy.
In interaction design: Scale, weight, line height, and width tell people what the task is, what supports it, and what can be skipped until later.
04
Shape
Suggests containment and action.
In interaction design: Borders, corners, and silhouettes help distinguish buttons, fields, cards, and passive information. Shape contributes to affordance and tone.
05
Motion
Connects one state to the next.
In interaction design: Purposeful motion confirms cause and effect, preserves orientation, and makes change easier to follow. Faster is not always clearer.
06
State
Makes system behavior visible.
In interaction design: Hover, focus, pressed, loading, success, error, and disabled states reduce uncertainty by showing what is happening and what is possible.
Live experiment
Tune the same interface.
Change one control, then notice hierarchy, grouping, tone, and feedback in the preview.
Control desk
Design decisions
Live previewReady
Step 2 of 3
Workspace setup
Choose a review rhythm.
A predictable rhythm keeps decisions visible without adding unnecessary meetings.