UX patterns, broken down.
The pattern library behind @designmotionhq: every video breakdown, plus the key insights in plain text.
motionAnimation Timing
Same modal, two timings: one feels premium, one feels broken. It's all milliseconds.
visualCharts That Lie
Same data, opposite stories: how you draw a chart decides which truth people see.
formsDate Pickers
Same date. Six clicks. Or one. The picker that respects your users' time.
visualDesign System Kit
Random hex and eyeballed pixels don't scale. A token system does.
feedbackDoherty Threshold
Cross 400ms and your user checks out. Perceived speed is a design choice.
interactionDrag and Drop
The board does the thinking: moving a card is moving state.
interactionDropdown Design
Your dropdown is broken. Five rules separate cheap from premium.
motionEasing Curves
Same distance, different feel: the easing curve is what decides how motion reads.
contentEmpty States
Your empty state is your first impression. Most apps waste it.
feedbackError States
Same error. Better recovery.
formsForm Field States
Six field states, one system. Miss one and you ship a bug.
visualGolden Ratio
One layout looks cheap, the other expensive. The difference is 1.618.
visualGrid System
Align everything to a 12-column grid, then break it on purpose.
formsInput Masking
Type 16 digits. Watch them become a card.
feedbackLoading States System
Stop using skeletons for everything. Loading is a system, not a default.
navigationNavigation Patterns
Five nav patterns, one system: mobile = tabs, desktop = sidebar.
feedbackNotification System
Notifications are a system. Pick the wrong surface and users tune out.
interactionPeak-End Rule
Users don't average an experience. They remember its peak and its end.
visualProximity Rule
Close = related, far = separate: spacing alone groups your UI, no borders needed.
formsRange Sliders
Drag to 47. Or 48? Your finger can't tell.
interactionSearch Experience System
Search is a system. Five parts. Most apps skip them.
contentSerial Position
Strongest first, strongest last: people forget the middle
visualShadow Elevation
Shadows aren't decoration. They encode hierarchy and depth.
interactionStar Rating
Five stars looks trivial. Hover, half-fills, and honest averages are where it breaks.
formsStepper Wizard
Twelve fields, one wall. Four steps, one path.
navigationTabs System
Tabs aren't a widget. They're a system. Stop letting them jump.
feedbackToast Notifications
Toasts done right: five rules for notifications that inform without blocking.
formsToggle Anatomy
Two toggles. One snaps. One morphs, and the difference is everything.
interactionTooltip Design
Your tooltip is annoying. Five rules that make it feel premium.
visualVisual Hierarchy
Five rules that decide what your users see first, and what they skip.
visualZ-Index Mastery
z-index lies: a bigger number won't win if the element isn't positioned.
feedbackZeigarnik Effect
Your brain forgets what's finished, and won't stop nagging about what's not.
navigationFocus States
Press Tab. Where did the focus go?
interactionSwipe Actions
Your swipe actions are killing your UX
feedbackUndo UX
Deleted. You have five seconds.
interactionBottom Sheets
Your thumb can't reach that menu.
formsForm Validation Timing
The error fires while you're still typing.
contentMicrocopy
Same form. Different words. One converts.
feedbackOptimistic UI
Click like. One waits. One feels instant.
visualGradient Design
Why your gradients look cheap
feedbackSkeleton Loading
Your loading spinner is making the wait feel longer
interactionColor Picker UX
Pick a color. Your whole UI answers.
formsFile Upload UX
Same file. One upload feels broken. One feels safe.
formsPassword Field UX
Eight characters, one symbol: still weak. Strength lives in real-time feedback.
interactionCommand Palette
⌘K is a system, not a search box.
interactionFilter Chips
200 results. Three taps. 12 left.
formsOTP Input
Your OTP input is a system, not six boxes.
navigationPagination
Add one row and your pagination breaks.
interactionAccordion Disclosure
One accordion glides open, the other jumps. Four small rules separate them.
interactionData Table
Your data table feels cheap because it's a grid of divs, not a system.
motionCard Hover Anatomy
Same card. One feels alive, three stay dead. Four rules separate them.
interactionModal Hierarchy
5 overlays. Most apps pick the wrong one.
visualIcon Design Rules
Your icons look cheap. 5 rules turn them premium.
contentLanding Page Skeleton
Every landing page that converts follows the same 5-section skeleton.
motionScroll-Driven Animations
Same scroll: one feels dead, the other comes alive. Pure CSS, zero JavaScript.
visualDesign Tokens
47 changes, or just one. Design tokens change everything.
visualColor Accessibility
Same text, same color: one is invisible. The contrast ratio nobody checks.
visualGestalt Laws
Same elements. One is chaos. The other clicks instantly.
visualBorder Radius
Same card. One looks off, one looks expensive. The gap is one CSS rule.
visualDark Mode
Same app, one inverts colors. The other feels premium.
visualVon Restorff Effect
Three identical pricing cards, nobody clicks. Isolate one: 3× more conversions.
visualPerfect Card
One card looks free. The other costs $1000. Four CSS changes.
visualDepth Layers
Same layout, same colors: three properties turn flat cards into real depth.