Creating documentation articles

Images and screenshots

Screenshot annotations

✅  Use correct color for annotations

✅ Correct color for screenshot annotations is #EB52F7 or rgb(235, 82, 247).
Example of screenshot with the correct color for annotations.
  • Use the correct color for screenshot annotations. Annotations in a consistent color across the entire documentation are easier to identify.

❌  Don’t do this

❌ Different colors for image annotations make it difficult to spot them or identify what is an annotation or part of the page.
  • Don’t use different colors (hue), shades or tints of the annotation color:
    • Is the blue rectangle an annotation, or part of the element?
    • What is the difference between an arrow in magenta and another in green?

✅  Use correct shapes to highlight areas of the image

Example using a rectangle to highlight the quantity field.
  • Highlight specific areas of the image using a rectangle or square with borders in the correct color (see above) and with square borders — no rounding borders.
  • Highlight specific elements

❌  Don’t do this

  • Don’t use other shapes such as rounded rectangles, circles, ellipsis, stars or hollow arrows.
  • Don’t use shadows on screenshot annotations.

Image context

✅  Show enough context for the element

Example of screenshot showing the element in its context.
  • When taking screenshots, show the specific elements and some surrounding elements to give more context.

❌  Don’t do this

In this case, the order summary is irrelevant to the quantity fields which the documentation is about.
In this case, the image does not show enough of the context in which the quantity field is insert.
  • Don’t use images that do not have enough context, leaving too many questions unanswered:
    • What page is this element being displayed on?
    • Which product is it about?
  • Don’t show parts that are irrelevant to the context of the element, or if it is not related to the documentation.