Quick answer: An annotated screenshot shows the product interface with labels, arrows, numbers, or highlights guiding the viewer. It's the clearest way to explain how a feature works, and it's the format that most product posts get wrong.

Start with the crop

The original full-screen screenshot is almost always the wrong starting point.

  1. Open the screenshot at 2x or retina resolution.
  2. Crop to the relevant panel or workflow.
  3. Remove the irrelevant browser chrome, empty whitespace, and other tabs.
  4. Make sure the crop contains only the UI the annotation refers to.

A tight crop communicates more than any arrow.

The annotation tools

  • Arrows. Point at the thing the sentence describes. Use one arrow per idea.
  • Numbered steps. For a workflow: 1, 2, 3 matching the caption.
  • Highlights. A subtle border or a translucent box around the area.
  • Labels. Short text, 1–3 words, naming the element.
  • Redaction. Blur out personal data, real names, API keys, or private information.

The visual treatment

  • One annotation color, used consistently across all screenshots.
  • Arrows with a clear tip and a consistent line weight.
  • A soft shadow or a panel behind the labels so they're readable.
  • Numbers in small circles; they read as a sequence at a glance.

The treatment must never draw more attention than the product. The arrows point at the UI, not at themselves.

How many annotations per screenshot

  • One for a single-feature callout.
  • Three to five for a numbered workflow.
  • More than five becomes a diagram; split it into two screenshots.

The caption

The caption explains the sequence; the annotations point at the UI. Each numbered step in the screenshot has one line of matching text below.

Match the platform sizes

  • X / LinkedIn: 1200 × 675 or 1200 × 627; wide crops work for a single panel.
  • Instagram: 1080 × 1350, with a vertical crop and larger text.
  • Story: 1080 × 1920, one step per screen.
  • Carousel: one step per page, 1080 × 1080 or 1080 × 1350.

The sizes are in the 2026 image size table.

Accuracy is the hard part

The screenshot must be of the current product. Annotating an outdated version or a mockup as if it shipped is the quickest way to lose trust in launch comments.

  • Regenerate the screenshot after the UI changes.
  • Use the correct labels, the actual menu names, and the real button copy.
  • Don't fake a feature that isn't in the product.

Device framing

A bare screenshot is fine on a website; in a feed it can look like a random attachment. A subtle device frame or a product background makes it read as a product image, and the device frames guide covers the approach.

What to avoid

  • Arrows over arrows. One point per arrow.
  • Labels with marketing language. "Our powerful engine" is a label; users need "Export button."
  • A screenshot with real customer data. Redact it.
  • Stretching the screenshot. Keep the aspect ratio; distorted UI signals a bad product.
  • Giant red circles. The standard green or red highlighter look is dated; use one consistent accent.

Frequently asked questions

Should I use a retina screenshot? Yes, capture at 2x where possible and export at the target size so the text stays crisp.

How do I annotate a mobile screen? A vertical 9:16 or 4:5 crop, with one step per screen; a phone frame helps the reader orient.

Can the annotations be generated? The placement of arrows is a judgment call and should be done on the real screenshot; Neatico composes the annotated screenshots into the launch layouts.

What if the UI has no good labels? The labels in the image can name the UI elements; that's a normal approach.

Crop first, annotate second, and label what the UI actually says. If the screenshot can't be read without the arrows, it's cropped too wide.

Related guide: the product demo video guide.