Squint pass
Step back. Can you still tell what matters most?
Visual testing
Visual QA Checklist
This is the checklist for the things automation can miss. The weird gap, the off-center control, the text that wraps badly, the mobile keyboard covering the button, the layout that looked fine until real data arrived.
How I use it: open the screen you are reviewing, mark each item pass or flag as you go, then copy the report and hand it to your lead.
Polish pass
Check what a user will actually see.
Mark each item pass or flag as you review. Progress saves in your browser, then copy a report that leads with what needs fixing.
Long-text pass
Add the longest title, name, email, price, tag, and error you can imagine.
Slow-load pass
Throttle the network. Watch what appears first and what jumps.
Real-hand pass
Use one hand on a phone. If it feels annoying, it probably is.
Spot what is off
Train your eyes before you tick the checklist.
Each mini screen has a few intentional visual problems. Guess first, then reveal what I would flag.
The Empty-Right-Side Trap
What feels unfinished about this hero?
Hero wraps too earlyRight side has no jobLead copy looks squeezed
The copy is trapped in a narrow left column while the right side is unused. It should either use the space or have an intentional supporting panel.
The Mobile Tap Test
Which controls would annoy you on a phone?
Tiny tap targetsActions too closeWeak primary action
The tiny icon actions are too close together, and the primary action is not clearly separated from secondary controls.
The Slow Load Lie
What will jump or feel broken while loading?
No reserved image spaceSkeleton mismatchLate status feedback
The image area has no stable aspect ratio, the skeleton is not the same shape as the final card, and the status feedback lands late, so the layout shifts as it loads.
The Quiet Error
What would be hard to notice in a real session?
Low contrastError too far awayLooks like helper text
The error is low contrast, far from the field, and styled too much like helper text. A user can miss it and keep trying the same action.
Layout
Layout checks
Main content uses available width without leaving a strange empty column.
Headings align with the content below them.
Cards in a row have consistent height, spacing and image crop.
Primary actions are visually grouped with the thing they act on.
No element feels accidentally shifted, floating or lonely.
The layout still makes sense when one card has a longer title.
Sticky headers, sidebars and toolbars do not cover content.
Modals and drawers have enough breathing room on small screens.
Typography
Typography checks
Button text fits without wrapping awkwardly.
Long words, URLs, emails and file names do not break the container.
Hero-scale type is only used where the page can support it.
Dense tool panels use tighter, smaller headings than landing pages.
Line length feels readable, not squeezed or stretched.
The font weight hierarchy makes scanning easy.
Labels, helper text and errors are readable at mobile size.
Responsive
Responsive checks
Desktop, tablet and phone all use space intentionally.
The design does not center everything just because the screen got smaller.
Controls wrap into clean rows, not random steps.
Images keep useful subject matter visible after cropping.
Tables either scroll cleanly or transform into readable blocks.
Important content appears before decorative content on mobile.
No horizontal scrolling appears unless it is an intentional table or code block.
Mobile touch
Mobile touch checks
Tap targets are comfortably sized and spaced.
Every tap target sits on the control the user can see, not beside it.
Closing a popup or overlay does not also trigger the control behind it.
Inputs remain visible when the keyboard opens.
Date pickers, dropdowns and steppers are usable on the actual device.
Gestures do not conflict with browser or OS gestures.
Landscape mode is not broken if the app supports it.
Checked on a real device, not only the simulator or the editor.
States
States checks
Loading states show what is waiting, not just a spinner forever.
Loading only shows while it is loading, and reads as done the instant it is done.
Empty states tell the user what happened and what to do next.
Error states preserve the user input where possible.
Success states confirm the actual outcome.
Skeletons, placeholders and final content do not jump the layout badly.
Slow-network behavior is tested, not guessed.
Offline or reconnect behavior is visible where relevant.
Forms
Forms checks
Required fields are clear before submit.
Errors appear next to the field they belong to.
The first invalid field is easy to find.
The form works with autofill and pasted values.
Numeric, currency, phone, date and code fields accept realistic formats.
The submit button cannot be tapped twice into duplicate records.
Form progress is preserved when a recoverable error occurs.
Images
Images checks
Images are not blurry, stretched or cropped past the point of usefulness.
Important people, products, UI states or diagrams are visible without guessing.
Missing images have a graceful fallback.
Lazy-loaded images do not leave awkward blank gaps while scrolling.
Image aspect ratios stay stable during loading.
Captions describe what is actually visible.
Dark images do not swallow dark text or controls.
Accessibility
Accessibility checks
Text contrast is readable in normal and hover states.
Focus states are visible and not clipped.
Keyboard order follows the visual order.
Icon-only buttons have accessible names.
Color is not the only way to understand status.
Motion can be tolerated and does not block use.
Zooming text does not cause overlap.
Screen reader labels match visible intent.
Polish
Polish checks
Hover, active and selected states feel intentional.
Borders, shadows and radii are consistent.
Spacing follows a rhythm instead of tiny random offsets.
Microcopy sounds human and specific.
The most important thing on the screen is obvious in three seconds.
The page still looks cared for with real data, not only perfect demo data.
The design does not hide a broken workflow behind pretty styling.