Review a built page against the design
Check an implemented page against the design, mark every difference and send one ordered list of fixes.
You’ll need
- The staging or live page
- The design file open for reference
Steps
- Capture at the design widthResize the browser to the width used in the design, then capture the full page.
- Isolate componentsUse Select element for headers, cards or forms that need a closer look.
- Mark the differencesNumber each difference and add a short note: spacing, font size, colour, alignment, copy.
- Highlight copy changesHighlight text that doesn’t match the design copy.
- Send the listExport a PDF for the whole page or copy individual components into your project tool.
Result: An ordered, visual list of fixes developers can work through one by one.
Tips
- Repeat at mobile width by resizing the window before capturing.
- Keep notes factual (“16 px, should be 24 px”) rather than descriptive.
Who uses this workflow
Screenshot tools for web designers
Review built pages against your designs, mark spacing and copy issues, and share watermarked drafts.
Full-page screenshots for web developers
Document layouts, share reproducible bug evidence and keep before-and-after records of changes.
Screenshots for product managers
Capture product flows, annotate feedback and turn screens into specs, reviews and release notes.
Related guides
How to annotate screenshots for clear design feedback
Make design and content feedback unambiguous with arrows, callouts, highlights and numbered points on the live page.
How to screenshot a single element of a web page
Capture just one table, card, chart or section of a page, even when it is taller than your screen.
Full-page screenshots for website QA and bug reports
A practical workflow for capturing, numbering and reporting website issues so developers can fix them quickly.
Do this with Capurize
Full-page capture, annotation, redaction and PDF export, free during launch.