Reference guide

Signs of taste
in web UI.

18 details that separate polished interfaces from everything else. None require a design degree. All require giving a damn.

01 / Speed

Feels instant

The fastest UI is one that never makes users wait. Perceived speed matters more than actual speed.

100ms interactions

Every click, tap, and keystroke responds in under 100ms. Anything slower feels broken.

Optimistic UI, debounced writes, local-first state

Skeleton loading states

Show the shape of content before the content arrives. Never a blank screen or a spinner.

Placeholder blocks that match the real layout

Persistent resumable state

Close the tab. Reopen it tomorrow. Everything is exactly where you left it.

URL state, localStorage, session restore

02 / Navigation

Never lost

Good navigation is invisible. Users reach any screen in seconds without thinking about where things are.

No product tours

If your UI needs a walkthrough, the UI is the problem. Good design teaches by being obvious.

Progressive disclosure over front-loaded tutorials

3 clicks to anything

Every screen reachable in three steps or fewer. Deep nesting is a sign of unclear hierarchy.

Flat IA, shortcut menus, breadcrumbs

Clean URL slugs

/settings not /app/v2/settings?uid=8f3a. Short, readable, shareable.

Human-readable paths, no UUIDs in URLs

Cmd+K

A universal command palette. Type what you want. Skip the menus entirely.

Fuzzy search, recent actions, keyboard-first

03 / Visual

Quiet confidence

Taste in visual design means restraint. Every pixel earns its place or gets cut.

Three colors max

One background, one text, one accent. More colors mean more decisions your users have to parse.

Constraint breeds clarity

No visible scrollbars

Hide the chrome. Let the content breathe. Scrollbars are metadata, not decoration.

Auto-hiding scrollbars, overflow: overlay

Optical alignment

Align to what looks right, not what the grid says. Play icons need 2px right nudge. Circles need to be slightly larger.

Human eyes beat pixel rulers

L-to-R reading flow

Important content sits top-left. Actions land bottom-right. Follow the eye, don't fight it.

F-pattern layout, Z-pattern for landing pages

Copyable SVG logo + brand kit

Ship a /brand page. SVG logo, color codes, usage rules. One click to copy.

Respect the people who promote your product

04 / Interaction

Respect the user

Every interaction is a conversation. Polished UIs speak clearly, act honestly, and never waste a click.

Larger hit targets

Minimum 44px touch targets. Generous padding on inputs. Make it easy to tap, not a test of precision.

WCAG 2.5.8, Fitts's Law in practice

Clipboard in, clipboard out

Paste images from clipboard. Copy results with one click. Reduce friction between your app and everything else.

navigator.clipboard API, paste event handlers

Honest one-click cancel

Cancel means cancel. Not "tell us why" then "are you sure" then "here's a discount." One click. Done.

Dark patterns destroy trust permanently

Reassurance about loss

Before any destructive action, tell users what they keep and what they lose. Show the diff, not just a warning.

"Your data will be available for 30 days"

05 / Copy

Say less

Interface writing is not marketing writing. Cut the filler. Use active voice. Trust the user to figure it out.

Active voice, 7 words max

"Save changes" not "Your changes have been saved successfully." Every extra word dilutes meaning.

Avoid
"Your file has been uploaded successfully to the server"
Better
"File uploaded"

Minimal tooltips

Tooltips are a last resort, not a crutch. If every icon needs a tooltip, the icon is wrong.

Avoid
Tooltip on every button explaining what it does
Better
Labels by default, tooltips only for power shortcuts

The throughline

Every principle here points at the same thing: respect. Respect for the user's time, attention, and intelligence. Taste isn't a design skill. It's the decision to care about details no one asked for.

The checklist