Design principles for diagrams

Diagrams must be clear and easy to understand. Try to make your diagram:

  • follow normal reading direction, from left to right and top to bottom
  • use simple shapes and as few different shapes as possible
  • make the starting point in process and flow charts clear
  • avoid having lines in process and flow charts overlap
  • not rely on colour alone to convey meaning; use only one colour unless there is a specific need

Be aware that 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 will be displayed on the website will be in a 16-point font size, so use as few words as possible in your diagram.

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

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

Format

Only PNGs created by the Design team in Digital Publishing will be used on the ONS website.

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