Our image guidance is constantly evolving. We'll update it when we receive new research and feedback on how users interact with images on the National Careers Service website.

Having image guidance specific for the National Careers Service helps us:

  • create a consistent look and feel
  • articulate an image style that accurately reflects our values
  • focus on the accessibility of website images
  • represent as many of our user groups and personas as possible

GOV.UK Design System guidance

You should always follow the GOV.UK Design System guidance on images.

Diversity and representation

Images on the National Careers Service website should follow these general best practice guidelines.

Representation: images should represent a wide range of people of different ethnicities, genders, ages, abilities, body sizes and other characteristics.

Context: images should be appropriate and not inadvertently offend or misrepresent any group. This includes being conscious of the potential for images to enforce stereotypes of the types of people in roles, occupations and other activities displayed in the images.

Consultation: you should share images with stakeholders and colleagues to get their expert input and ensure accurate and respectful representation. Feedback from users should also always be considered.

Review: images should be regularly reviewed and updated so they continue to reflect diverse audiences and keep up with any changing societal norms and standards while also allowing more chances to show diversity in images.

Background of images

You should check images to ensure they do not show anything inappropriate or controversial, such as health or safety breaches or prominent logos of other organisations in the background.

Image sources

Ideally, you should aim to use photography commissioned by the National Careers Service so that images will be instantly recognised and create brand awareness.

However, it will not always be possible to commission our own images due to constraints with budgets, locations and hiring models. Therefore, you can use stock images when needed, as long they meet our criteria.

You should try to use stock images from libraries which require a subscription so that the images on the website are less likely to be seen on non-National Careers Service products. This will help us retain a certain level of brand awareness while using stock image websites.

Strategic communications and policy involvement

If you add images to represent or relate to policy offers, you should ensure images are checked by the relevant policy team.

This is to confirm that images accurately illustrate what is on offer and do not mislead users on what they can achieve. For example, if you add an image to introduce Skills Bootcamps, it is important that this shows a role that is available through the scheme.

Strategic communications can also help you assess the appropriateness of any images used that correlate with adult skills offerings.

Mobile optimisation

You should use 100% width for full size images so they are optimised for mobile devices. You can do this by adding width="100%" in the img tag.

For example: img src="/media/warehouse.png" alt="person in high visibility jacket. " width="100%"

Header images

There are some additional requirements you must follow if you use the National Careers Service header image component.

Contribute to this page on GitHub