Infographics and charts

Static assets

Static infographics & charts should be provided as high resolution JPG or PNG files that are optimised for mobile devices.
Tables must be coded in order to preserve responsivity.

  • Dynamic infographics* and charts should be provided as interactive media as GIF, iFrame* or lottie files**.

Design considerations

 

Take a mobile first approach.
Favour single column designs.
Use variable fonts & responsive font sizes

Make sure that the infographic doesn’t disrupt the user journey by making sure the user can keep scrolling/close the infographic.

Ask yourself, “Is the infographic easy to navigate? Are all
functionalities accessible? Can you read the text?”

If the answer is no, the design must be reviewed

  • Mobile | 320px width, Portrait orientation
    Tablet | 768px width
    Desktop | Text column width: 572px
    FT header width | 1180px