StylesImages

Use of images

Avoid unecessary decoration. Only use images when research indicates that it would be helpful to users.

Illustrations can help users to understand:

  • a new or unfamiliar concept
  • complex guidance when completing a task
  • how to find a reference number on a document

Photography can add visual interest to a page. We use it mostly in internal pages and services.

Images must be relevant to the content, help users understand what they need to do and follow our guidance on the use of alternative text.

Sourcing images

Please contact design@digital.homeoffice.gov.uk for advice on image use and for original source files.

Illustrations or representative imagery

Illustrations must have a consistent style to create trust. This includes print products as well.

If your image represents something physical, such as a document, you should use the aspect ratio of that object.

An example of an illustrated image of a biometric residence permit card in a service

Photography

Photography should be:

  • relevant to the content
  • people-focused, inclusive and reflecting the diversity of the people we serve
  • accessible (don't place text on top of an image, use text as an image, or add unnecessary filters or effects)
  • free from usage restrictions and permissible for use

They should not be:

  • used to fill space or as decoration
  • clip art or clichéd stock photography

Photography dos and don'ts

DoPeople sitting around a table talking. Focus is on the one person who is talking.Do use images of people that look natural and reflect real life situations.
Don'tStaged photo of a large group of people in a line.Don't use clichéd images, for example posed or forced, or in fake situations.
DoA person leading a group discussion infront of a whiteboard.Do focus on one key element
Don'tTwo people talking at work. Image has a purple filter.Don't use filters or effects

Alternative text

Alternative text, or alt text, is read out by screen readers for those with visual impairments. It will also be displayed if an image does not load or if images have been switched off. We recommend following the guidance in the GOV.UK Design System on the use of alt text.

Get in touch

If you’ve got a question or suggestion share it on the Slack channel #ho-design-system, on GitHub or email design@digital.homeoffice.gov.uk.