Design principles for diagrams

Only PNGs created by the Design team in Digital Publishing will be used on the ONS website. This ensures that all diagrams:

  • are clear and easy to understand
  • follow normal reading direction, from left to right and top to bottom
  • use simple shapes and as few different shapes as possible
  • have a clear starting point
  • do not have overlapping lines
  • do not rely on colour alone to convey meaning

Any diagrams that are landscape in prototype form may need to be redesigned as portrait to fit within the website’s 600-pixel width. Any text displayed on the website will be in a 16-point font size, so use as few words as possible in your diagram.

Our goal is to move towards the more accessible SVG format in the future.

All diagrams should also have accompanying alt text for accessibility.

Before
The following diagram is an example of a draft submitted for publication on the ONS website by an output author.

An example of a draft submitted for publication on the ONS website by an output author.

After
The following diagram is a new version created by our designers and in line with our design principles. This version includes a clearer font and a simpler design that is easy to understand.

A new version of a diagram created by our designers and in line with our design principles