Learn UX Design
28 patterns across 7 categories. Each one shows the convention, a side-by-side example, and why it matters.
Start here
New to UX design? Follow these five categories in order.
Typography
Font sizing, line height, line length, and type scales that make text comfortable to read. You'll hit this when body text feels hard to scan or headings blend into the surrounding content.
Spacing
Consistent spacing systems, proximity grouping, and whitespace as a design tool. You'll hit this when a layout feels cluttered even though every individual element looks fine on its own.
Color
Contrast ratios, limited palettes, and accessible color choices that work for all users. You'll hit this when text becomes hard to read on colored backgrounds or when a UI feels visually noisy.
Hierarchy
Visual weight, button priority, and emphasis patterns that guide the user's eye. You'll hit this when a page feels flat and users cannot tell what to do first or which action matters most.
Layout
Content width constraints, form layouts, card grids, and text alignment for readability. You'll hit this when a page stretches edge to edge on a wide monitor and becomes difficult to scan.
Forms
Input labels, error messages, touch targets, and field organization that reduce user friction. You'll hit this when users abandon a form because they cannot tell what went wrong or where to tap.
Feedback
Loading states, empty states, error screens, and confirmation dialogs that keep users informed. You'll hit this when users stare at a blank screen during data loading or accidentally delete something with no warning.