Guidelines for taking good screenshots for technical documentation

Resolution and file size

• Take screenshots on a machine with at least a 4k or Retina monitor
• Screenshots should not be larger than 200 KB, and preferably under 100 KB each

Zooming and cropping

• Show a full window whenever possible - this keeps sizing consistent and helps the reader locate the correct portion of the UI to interact with

Annotations and callouts

• Use red callouts unless the content of the screenshot contains too much red for the callout to be noticed
• Generally use rectangles to call the readers attention to specific inputs or buttons
• If showing three or more separate steps in a single screenshot, add numbered callouts (1), (2), (3), etc to indicate the order steps should be taken in
• If interacting with a smaller part of the screen, add a red arrow to direct the reader's attention to the correct place in the screen

Examples

• Do not leave space between a rectangle and what it is outlining

Gifs and videos

• Gifs have problems regarding file size, but are the most portable and easiest to work with, as generally anywhere you can add an image you can also add a gif
• For long gifs, use mp4 or webm instead
• Generally avoid including sound in technical screenshots

Combining screenshots with text

• Put the text first, followed by the screenshot
• Do not put two screenshots in a row without text between them

Finishing touches

• Add a browser frame and background colour with a tool like BrowserFrame
• Optimize the filesize with a tool like TinyPNG