Overview
We use a mixture of photography, pictograms, icons and branded illustrations across our platforms. These are nested in a number of components, from graphics to cards.
Media libraries
Our latest media libraries are located in the following locations:
- Brand illustrations (Figma file)
- Iconography (Figma file)
- Pictograms (Figma file)
- Photography/Stock Images (Please contact a member of the UX team)
If you don't have access to these libraries, please contact a member of the design team.
Please note that not all images are included in the Figma files, so check with the team if you're looking for something different.
Responsive compositions
The requirements of creating media for different viewports can vary depending on your platform.
Some platforms may require one file, while others would prefer one for each breakpoint. Discuss with your development team what their requirements are.
Example
An example of breakpoint-specific artwork can be seen on blog article headers. This platform uses device-specific illustrations or images to avoid cropping on different breakpoints.
Images are supplied at the following dimensions:
- Large: 1440x420px
- Medium landscape: 1024x420px
- Medium portrait: 768x420px
- Small: 375x300px
When supplying images for each breakpoint the images should use the following guidelines:
- Make sure the focus of the composition will always be in view for each cropped size (and remember viewports can vary within a breakpoint range)
- Name files consistently but add the breakpoint size as a prefix (for example, 'filename-example-large.jpg')
Composition and aspect ratio
When supplying images for your platform, check the breakpoint width and height required to display the content.
With this information, the overall dimensions for each device can be calculated by maintaining the aspect ratio.
Media in handovers
When you're supplying images to developers, it's best practice to:
- Replace spaces with “-”
- Make sure file names are concise and named consistently
- Name the content if possible (this acts as a fallback for accessibility tools if an alt tag doesn't exist)
- Keep the file size as small as possible (you can use the TinyImage Compressor plugin for extra control)
- Resize components to specific sizes or ratios if requested
- Ensure images don’t have any words for accessibility reasons
Accessibility
Media should be 'perceivable' to all our users – so we make sure all of our content is appropriately tagged and assets are sized to improve performance.
Find out more about accessibility and how we comply with AA standards.