A UI/UX design checklist covers five areas: visual fundamentals (hierarchy, typography, color, spacing), interaction and usability (navigation, consistency, feedback, error prevention), mobile and perceived performance, content and trust (microcopy, empty states, trust signals), and conversion clarity. Most online checklists only cover the first two; the gaps in the rest — especially empty states and perceived performance — are where real sites most often fall short.
Key takeaways
- This isn't the pre-launch checklist. That one asks whether the site works and is legally covered. This one assumes it works and asks whether it's actually well designed.
- "It looks fine to me" is an unreliable test. You've seen the design hundreds of times; a first-time visitor hasn't — most of these items exist because builders stop noticing their own interface.
- Several items draw on decades-old usability research (consistency, feedback, error prevention), not invented opinion — but the list extends well beyond that into areas just as real and far less commonly checked.
- Empty states and perceived performance are the two most skipped items on this list in practice — most sites never design what a visitor sees with zero data, or what a wait actually looks like.
- The tool below saves your progress in this browser, same as the other tools on this site.
How to use this page
Go through all 14 items below — they're not sequenced the way the pre-launch checklist is, since design quality doesn't have the same hard dependency order that "does the form submit" does. Mark each item Good, Needs work, or Unsure. Every item links to its full explanation further down the page.
The UI/UX design checklist tool
14 items across 5 categories. Progress saves automatically in this browser.
Visual design fundamentals
These are the things a visitor registers before they've consciously read a single word — whether the page feels organized or chaotic is decided in the first second or two.
1. Visual hierarchy
If everything on a page is emphasized — bold, large, bright — nothing actually is. A page with ten competing focal points gives a visitor no signal about where to look first.
What good looks like: one clear focal point per screen, with size, weight and color used to rank the rest of the content by actual importance, not decorated evenly.
How to fix it: pick the single most important element per section and make everything else visually quieter in comparison — often just reducing emphasis elsewhere works better than increasing it on the one thing that matters.
2. Typography
Typography is read, not looked at, so its failures are felt as fatigue rather than noticed directly — a visitor rarely thinks "the line height is wrong," they just stop reading sooner.
What good looks like: no more than two typefaces, a line length that doesn't run edge-to-edge on wide screens, line height loose enough to not feel cramped, and a heading scale where each level is clearly distinguishable from the one above and below it.
How to fix it: cap body text width (roughly 60-75 characters per line reads most comfortably), increase line height if paragraphs feel dense, and define a fixed set of heading sizes instead of picking one per page.
3. Color and contrast
Color should be doing a job — indicating state, guiding emphasis, reinforcing brand — not just decorating the page. And separately from that, text needs to actually be readable.
What good looks like: color choices you could justify a reason for (this is the primary action, this is an error, this is disabled), and body text that meets at least WCAG AA contrastiA contrast ratio of at least 4.5:1 between text and its background for normal-size text — one of the two most commonly checked accessibility contrast levels. (4.5:1 for normal text) against its background.
How to fix it: a free contrast checker (WebAIM's is a common one) catches the readability half in seconds. For the "is color doing a job" half, look at your palette and ask what each color means — if the answer is "it looked nice," that's the gap.
4. Spacing and whitespace
Eyeballed spacing — a bit more padding here because it "felt tight" — is one of the fastest ways a page starts to look subtly amateurish, even when nobody can say exactly why.
What good looks like: spacing values pulled from a small fixed scale (e.g. 4/8/16/24/32/48px) reused consistently, not a new arbitrary number picked each time something looks slightly off.
How to fix it: define a spacing scale once — even an informal one — and audit a few pages for values that don't belong to it. This is a five-minute fix with a browser inspector and a surprisingly large visual improvement.
Interaction and usability
This category draws most directly on established usability research — several of these ideas trace back to Jakob Nielsen's widely cited usability heuristics from the 1990s, still a standard reference today. The explanations below are written independently, not copied from that framework.
5. Navigation clarity
A visitor who can't tell where they are on a site, or how to get back to where they started, disengages fast — navigation confusion is one of the most reliable ways to lose someone.
What good looks like: a persistent way to identify the current location (active nav state, breadcrumb, page title) and an always-available way back to a known-safe point, usually the homepage.
How to fix it: add a visible "current page" indicator in the nav, and make sure the logo or brand mark reliably links home from every page.
6. Consistency
The same kind of button, the same kind of link, the same kind of card should look and behave the same way everywhere it appears. Inconsistency forces a visitor to re-learn the interface on every new screen instead of transferring what they already figured out.
What good looks like: one visual treatment per component type, reused everywhere, rather than a slightly different button style per page because each was built separately.
How to fix it: this is what a design systemiA defined, reusable set of components and rules (colors, spacing, button styles) that every page pulls from, instead of each page inventing its own version. (even an informal one — a short list of "this is what our primary button looks like") solves. Audit for the most-reused components first: buttons, links, form fields, cards.
7. Feedback and system status
When someone clicks or submits something, they need some signal that it actually registered — otherwise the natural response to silence is to click again, or assume it's broken.
What good looks like: a visible response to every meaningful action — a button changing state, a loading indicator, a confirmation message — within a moment of the interaction, not after an unexplained pause.
How to fix it: audit your own forms and buttons by clicking them and timing how long you wait for any visible change. If it's longer than roughly a second with nothing happening, add an immediate state change even before the real response arrives.
8. Error prevention and recovery
The best error handling is the error that never happens — catching a likely mistake before submission is a better experience than a clear message after it.
What good looks like: inline validationiChecking a field's input and showing feedback as someone types or moves to the next field, instead of only after they hit submit. on forms before submission (a malformed email flagged while typing, not after a failed submit), and error messages that say what to do, not just that something went wrong.
How to fix it: add real-time field validation to the highest-traffic forms first, and rewrite any generic "an error occurred" message into something specific enough to act on.
Mobile and perceived performance
Both of these are about design decisions, not raw technical speed — that side is covered separately in the INP and rendering guide and the layout-shift guide.
9. Mobile, from a design lens
A layout that technically reflows to fit a phone screen isn't the same as a layout actually designed for one — cramped tap targets and desktop-sized decisions squeezed into a narrow column are a common, specific kind of mobile failure.
What good looks like: tap targetsiThe clickable/tappable area of a button or link — Apple and Google's own guidelines both recommend roughly 44x44px minimum so a finger doesn't miss or hit the wrong one. at least roughly 44×44px with real spacing between them, text that doesn't require pinch-zooming, and a layout that reads as deliberately single-column rather than visibly compressed.
How to fix it: test on an actual phone (not just a resized browser — see the pre-launch checklist's take on why that matters) and specifically check tap target size and spacing around anything clickable.
10. Perceived performance
A page that takes two seconds to load but shows something meaningful immediately often feels faster than one that loads in one second but shows a blank white screen the whole time. Perception isn't the same measurement as a raw speed number.
What good looks like: a skeleton screeniA grey placeholder outline of the layout (boxes where text and images will go) shown while real content loads, instead of a blank page., a progress indicator, or at minimum a layout shell that appears instantly, rather than a blank page until everything is fully ready.
How to fix it: render the page's structural shell first and stream content into it, instead of blocking the whole render until every piece of data has arrived.
Content and trust
These are easy to treat as copywriting rather than design, but the placement and timing of this content is a design decision as much as a writing one.
11. Microcopy
The small bits of text around an interface — field labels, placeholder text, button labels, error messages — are often the last thing written and the first thing a confused visitor actually reads carefully.
What good looks like: a button that says what it does ("Send message," not "Submit"), a placeholder that's an example not a label duplicate, and an error message that explains the actual problem.
How to fix it: read every label, placeholder and error message on the site in one pass, out loud, and rewrite anything that's generic enough to belong on any other site unchanged.
12. Empty states
What does a visitor see with zero search results, an empty dashboard, or a first-time visit with no data yet? Most sites never design this screen at all — it just inherits whatever the populated version looks like, minus the content, which usually looks broken.
What good looks like: a deliberately designed state for zero-results, first-use, and empty-data scenarios — explaining what's happening and what to do next, not a blank area that looks like an error.
How to fix it: deliberately trigger every empty state your site can produce (search with no matches, a new account with no history) and design each one on purpose instead of letting it default.
13. Trust signals
Credibility cues work when they show up at the exact point someone is hesitating, not just somewhere on the page for completeness — a testimonial buried in a footer does far less work than one placed right next to the decision it's meant to support.
What good looks like: real photos over stock imagery where feasible, visible and accurate contact information, and credibility cues (reviews, credentials, guarantees) placed near the specific moment of hesitation — a checkout button, a pricing table, a contact form.
How to fix it: identify the one or two points in your site where a visitor is most likely to hesitate, and place your strongest trust signal right there instead of only on an "About" page nobody reaches before deciding.
Conversion
14. Call-to-action clarity
Multiple competing buttons of equal visual weight put the decision of what matters back on the visitor — which is exactly the decision the design should have already made for them.
What good looks like: one clearly dominant action per screen, with any secondary actions visually quieter, not fighting for the same attention.
How to fix it: on any page meant to lead somewhere, pick the single most important action and make it the only visually loud element — downgrade everything else to a lower-emphasis style.