How do I keep documentation screenshots consistent?

Fix the browser width, capture the page area rather than the screen, use demo data, and annotate with one colour and one tool. Write the rules down; consistency comes from the rules, not from the person.

What size should documentation screenshots be?

Capture at one fixed viewport width, commonly 1280 or 1440 pixels, and let the help centre scale them. Mixed capture widths look wrong even when each image is fine on its own.

When should I use a demo instead of screenshots in docs?

When the article is a procedure longer than three or four steps. An interactive walkthrough is easier to follow than a column of numbered images and easier to update when the interface changes.

← Back to blog

Annotated Screenshots for Documentation: A Style Guide

September 15, 2026

The screenshots in most help centres were taken by different people, at different window sizes, with different annotation tools, over several years. The reader notices even when they could not say what is wrong. A short style guide, applied from now on, fixes it faster than reshooting everything.

Capture rules

Same viewport width for everything -- pick one (1280 or 1440 is typical) and set the browser to it before capturing. Mixed widths are the single most visible inconsistency.
Capture the area, not the screen -- no tabs, no address bar, no desktop. The page is the subject.
Demo data, not real data -- so nothing ever needs blurring, and the screenshot can be reused.
Light theme unless the product is dark by default -- and never both.

Annotation rules

One accent colour across the whole documentation set, ideally the brand colour or a red that contrasts with it.
Boxes for regions, numbered circles for sequences -- and the numbers are explained in the text below the image, not on the image.
No arrows unless direction is the point. An arrow that just means "here" is a box with extra ink.
Text on the image only for labels that will never change. Anything else belongs in the copy, where it can be edited without reshooting.

A capture workflow that stays consistent

Set the window width, open the Demorta bar, press Screenshot and drag the region. Annotate in the editor with the one colour, download the PNG, and name the file by article and step. Because the capture and the annotation happen in one place, two writers produce images that look the same. Try the free screenshot tool.

When to stop screenshotting

An article with eight numbered screenshots is a walkthrough pretending to be a document. Readers skim it, miss step five, and write in. For any procedure of more than three or four steps, an embedded interactive demo -- recorded once from the real product -- is easier to follow and, when the UI changes, easier to re-record than eight images are to reshoot.

Frequently asked questions

How do I keep documentation screenshots consistent?: Fix the browser width, capture the page area rather than the screen, use demo data, and annotate with one colour and one tool. Write the rules down; consistency comes from the rules, not from the person.
What size should documentation screenshots be?: Capture at one fixed viewport width, commonly 1280 or 1440 pixels, and let the help centre scale them. Mixed capture widths look wrong even when each image is fine on its own.
When should I use a demo instead of screenshots in docs?: When the article is a procedure longer than three or four steps. An interactive walkthrough is easier to follow than a column of numbered images and easier to update when the interface changes.

Keep reading

This is what Demorta does

Click through it — the same kind of demo you can record of your own product.

Try it on your own product

Record your first interactive demo free.

Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.

Start free →