Blog

How to Review a Website or Design With Annotated Screenshots

Published · design review, feedback, annotations, workflow

How to Review a Website or Design With Annotated Screenshots

A lightweight design review loop: capture the state, annotate precisely, compare versions, and hand over one focused set of notes instead of a vague thread.

Design feedback goes wrong in predictable ways: the note refers to something that has already changed, three people describe the same issue in three threads, and nobody can tell which version the screenshot came from. A screenshot-based review loop fixes most of that with a small amount of discipline.

Capture the state, not the story

Start from a screenshot of the exact state you are commenting on, not a description of it. In InSnap:

  1. Press Command-1 on Mac or Ctrl+1 on Windows.
  2. Hover over the browser window and let the automatic detection box it, or drag a region around the component.
  3. Include the surrounding context that matters — the viewport width, the surrounding layout, the state of a form — and nothing else.

A capture taken on the page you are reviewing is evidence. A screenshot of a similar page from last week is a source of confusion.

ANNOTATING A SCREENSHOT WITH SHAPES · 1280 × 800

Annotate with a shared vocabulary

The fastest way to make review notes comparable is to agree on what each tool means:

ToolUse it for
ShapeGrouping a region or outlining a component
ArrowPointing from a note to the exact element
NumberListing several issues in one screenshot
MarkerHighlighting text that needs to change
Spotlight (Pro)Focusing on one area of a busy layout
Magnifier (Pro)Showing a pixel-level detail, such as alignment

Keep to one meaning per tool across the team. If arrows mean "change this", do not use them for "I like this".

Keep one screenshot per issue

A single screenshot with twelve annotations is hard to discuss. A screenshot per issue is easy to resolve, reference and close.

  • Crop tightly around the component, but keep enough context to locate it.
  • Number the issues if they are related.
  • Put the reasoning in the message, not in a wall of text over the image.
  • Include the viewport size and zoom level when layout is the topic; a screenshot at 50% zoom can hide the very overflow you are reporting.

Compare versions with pinned screenshots

The fastest way to answer "did it change?" is to put both versions on screen at once. Pin the previous screenshot and the current one; pinned windows float above other apps, so you can drag them side by side over the browser and compare without switching tabs.

This is also where the screenshot history helps: past captures are searchable, so the "before" state is usually already there.

Pinning a screenshot for comparison
  • One issue: attach the annotated image, or share a link if the recipient should not download anything.
  • Several issues: a numbered list in the message, each number matching an annotation.
  • A recurring review: keep the screenshots in the history, tagged by project or ticket, so the next round starts from the previous state.

If you use InSnap Cloud, the share link can have an expiry date and a password, which is useful for client reviews that should not stay online forever. Cloud is an optional subscription and is not needed for the local workflow.

A review checklist

CheckWhy
Is the screenshot from the current version?Notes on stale images waste a round
Is the issue visible without explanation?Otherwise the annotation is doing too much
Is there one issue per screenshot?Easier to resolve and close
Is the viewport or zoom level noted?Layout bugs depend on it
Is anything private visible?Blur names, emails and internal URLs
Is the action clear?"Move the button left" beats "spacing feels off"

FAQ

Should I annotate the screenshot or write the feedback in the message?

Both, for different jobs: the annotation shows where, the message explains what and why. Do not put a paragraph inside the image; it will be missed and cannot be searched.

How do I compare two versions side by side?

Pin both screenshots. Pinned windows stay above other applications, so you can place them next to each other and compare while the browser is open.

Can I share the review without the recipient installing InSnap?

Yes. Send the image file, or use a Cloud share link, which opens in a normal browser. Cloud is an optional subscription; the free workflow is to save and attach the image.

Your next screenshot is one hotkey away.

macOS 14.4+ (Apple Silicon & Intel) · Windows 10+ (64-bit)