Illustration

Overview

The ONS illustration style utilises simplified graphics in compositions of everyday objects, buildings, and people to tell stories. Illustrations should support and complement the text with appropriate imagery. Avoid using illustrations in isolation or purely for decoration. 

We use illustrations in both our digital and printed products. They are included in our interactive tools, digital content articles, website, and social media channels. We also incorporate illustrative elements in our printed and corporate products, both externally and internally, such as leaflets, booklets, exhibition stands, and pull-up banners.

Our illustration principles

1. Visualise the data clearly and effectively

Illustrations should serve as a tool for making complex data more engaging. Accompanying statistics, they should help transform data into visual narratives that are easy to interpret. Use alongside visual elements like charts and graphs to simplify abstract concepts and highlight key trends, ensuring the key information is immediately clear to the audience. Visualisation should help guide the viewer’s understanding, offering insights at a glance.

2. Represent every community inclusively

Our character illustrations are inspired by real people, reflecting the diversity of the UK population, representing all communities fairly and accurately. Whether depicting people, places, or activities, aim for inclusivity in age, gender, ethnicity, disability, and socio-economic background. Illustrations should be mindful of cultural sensitivity and avoid stereotypes, ensuring that all groups are portrayed authentically. Ensure that our visuals resonate with a wide range of individuals, fostering a sense of belonging and representation in our work. Create an environment where everyone feels seen and valued.
 

3. Maintain consistency across all platforms

To build a recognisable and cohesive visual identity, it’s essential to maintain consistency in style, colour, and tone across all materials. This includes digital content, printed products, social media, and corporate communications. Consistency in illustration style reinforces our brand identity and ensures that our messaging remains clear and professional, regardless of the medium. The use of consistent visual language helps to create a unified experience for our audience and strengthens the overall impact of our communications.

Our style

Our style portrays that people are at the heart of what we do while being communicative and personable. Representative of wider communities it is important that we are inclusive and diverse in the range of illustrations we produce.

We create our simple scenes, objects and character figures using photography as our reference, focusing on the basic shapes and eliminating intricate details that may be distracting.

When constructing illustrations, we like to simplify objects and buildings by keeping them two-dimensional. Detail and depth can be created by overlaying simplistic, tonal shapes. As our character illustrations are inspired by real people, we draw them with three-dimensional elements in order to portray more natural, interactive poses.

Our visual assets

Icons

Our extensive library of icons features a range of simplified symbolic representations of various topics and themes. Each icon is custom-made by our Graphic Design team.

Where more sensitive topics are being presented, icons would be best to use as supporting imagery over illustrations.

Head to our Iconography page in the Service Manual to find out more. (opens in a new tab) 

Spot illustrations

Our Spot illustrations are small visuals that are often a small collection of singular illustrated elements that stand on their own without too much of a background scene. These are used as supporting visuals to enhance social media graphics, presentations, and printed materials by providing visual interest and help draw attention.

Scenic illustrations

These illustrations represent towns, cities, and villages with skylines, buildings, trees, and people in the foreground. They are an effective way to set the scene and introduce visual storytelling when discussing various topics and themes. We often create scenes to use in our digital products and articles as banners.

Using our visual assets

• Only use our downloaded illustrations and icons
• Don’t combine or overlay illustrations and icons
• Don’t alter, stretch or scale images down to fit onto busy pages
• Don’t use illustrations as logos, headers or other avatars
• Don’t rely solely on imagery; use it to support text
• Use the correctly coloured illustration for the category or theme of your content

We have created a variety of assets that you can download to enhance ease of use, including PowerPoint templates with a range of pre-added illustrations to meet your needs.

Using colour

We use our core ONS colour palette for our illustrations, along with a supporting colour palette. We have developed specific colour schemes for different themes to distinguish and identify the various topics that ONS covers. These colour schemes are used in both our digital and print products. You can find more information on our colour guidance page (opens in a new tab) .

In line with W3 guidance on colour contrast (opens in a new tab) , ONS illustrations should use accessible colour combinations where possible. Exceptions are where illustrations are purely decorative or are added as a supportive element to help inform and clarify information already explained within the content.

Creating illustrations

• Use flat shapes and rounded corners
• Icons should be used on their own or as a highlight within illustrations
• When searching for reference photos, look for buildings and objects which are shot head on, giving the image one dimension so it’s easy to translate into our illustrations
• Use limited colour palettes to streamline illustrations and avoid them looking overly busy
• When illustrating for specific themes or topics, make sure to use the correct colour palette
• Create dimension in scenic imagery by using lighter tones and sheer overlays
• Combine our cartoon-like character head style with simplified, natural figures to create people illustrations
• Avoid using lines, gradients and overcomplicated patterns/textures
• Don’t over-exaggerate scales or proportions

Housing and buildings

When illustrating new elements, such as buildings and vehicles, it’s important to stay consistent with certain details to ensure they are cohesive in look and scale with one another. Buildings have been constructed using a mixture of rounded pixels shapes and line weights. To make sure we are representing real communities and scenes, we should use photos of real buildings and homes as reference points.

All buildings should be constructed within the master buildings Illustrator file (located in our shared Google Drive), following these guidelines:

1. Duplicate existing windows and doors ensuring the scaling remains the same as the original. If there is a need for custom windows or doors, use existing elements and the guides to make sure they are scaled correctly and match in line weight (2.5px stroke weight). Use the guides to align height and placements. Single doors should be a height of 30px and a width of 16px. Double doors should be a height of 30px and width of 32px.
2. Use simple rectangles to make up the rest of the building but try to keep the sizes at round px so elements can easily be placed seamlessly together. You can create depth by layering shapes. When creating buildings with multiple floors, make sure the spacing between each floor matches the grid height which is within the master file (this should be 19px).
3. Copy and re-use existing roof shapes, chimneys and any other details where relevant to help with style consistency - flat roofs are set at a height of 2px with a 2px over hang on each end of the building. When creating building elements, the simpler the better!
4. Once buildings are made and are ready to be saved into the CC library and Google Drive, duplicate the original and make all outlines shapes to ensure they stay in proportion when scaling.

Objects

Illustrated objects can be used as stand alone items to represent topics or grouped together to make up a larger composition. We use photos of real objects as reference points, removing unnecessary detail and focusing on the larger shapes.

1. Start with building objects with large, simple shapes. Avoid using lines and strokes.
2. Where possible, round corners to suit the soft, friendly style of our library.
3. Use colour tones and layering shapes to create the illusion of depth within illustrations and avoid creating 3D objects with perspective and detailed shading.
4. When creating objects for characters to interact with, we may need to add some 3D elements but avoid doing this where it’s not needed or when creating standalone objects.

Characters

The inclusive ONS characters were created to represent the diverse population, made up of different cultures, ages, occupations, sizes, disabilities and lifestyles. We want viewers and ONS employees to feel represented. Even though each character has the same simplified, friendly facial features, their personality is portrayed through their hairstyle, clothing and interactions.

We have a library of characters available to designers to include in spot and scenic illustrations, which is always being maintained and added to. We also have a master Illustrator file which includes all signed off characters within their age groups and a specific space for new characters ready for the Illustration Working Group to review.

Creating characters

The characters are based on true-to-life references, with simplified, smooth shapes making up the bodies and clothing. The figures are realistically proportionate and natural, combined with our cartoon-style character face. We have a library of character heads at different positions and ages which are made to be combined easily with different figures. Babies and toddlers have different head styles compared to teenagers and adults.

1. Find a reference photo which includes the whole figure in a relevant pose. Keep our aim to be diverse and inclusive in mind when selecting imagery.

2. Create your new character within the “Character-library_MASTER.ai” file saved within the Illustrations folder on the shared Google Drive. Use our existing library to ensure they are scaled correctly and are consistent in style.

3. Start by drawing the limbs of your character, separating them at the joints so they are modular. If struggling with hands and feet, you can copy elements from existing characters and add to your new character. When doing this, refer back to original photos to ensure the positioning and scale makes sense.

4. Focus on drawing basic, smooth shapes with minimal anchor points. Imitate the flow of clothing but avoid including extreme creases and folds. If layering clothing, try to include the full element underneath to allow maximum flexibility when re-using character assets. Avoid using line strokes. 

5. To create dimension where necessary, use varied tints of colour. Where arms and legs sit over the body or each other, adjust the colour tint to be 10% lighter.

6. Add our ready-made character heads to the drawn body, again, using existing characters as reference points for scaling and positioning. You can re-use hairstyles or use reference photos to create your own. 

Baby, toddler and children heads have their own variations and are scaled differently. Baby heads are the same style as toddler heads but scaled down at 85%. Child heads are the same style as adult heads, scaled down at 85% and teenager heads are adult heads scaled down at 95%.

Scaling characters

When including characters in scenes or spot illustrations, make sure to scale them as you would see people in real-life settings. They should be integrated into the environment and seen interacting with their surroundings. Imagine taking a photo of the scene you're trying to create and think about what the focal points would be. Use scale to present those focal points to the viewer.

1. When placing multiple people, ensure they all scale the same initially and are in proportion with each other first.
2. Use foreground objects and shapes as anchor points. These anchor points should help scale characters, ensuring they are in proportion to the scene and not floating.
3. If you want the characters to be a main focal point, scale them larger to represent them being ‘closer’ to your imaginary camera lens. The scene in the background will be smaller and knocked back in colour.
4. If your scene includes a larger foreground with multiple characters at different depths, ensure the difference in scaling is subtle to represent this and keep them anchored (i.e. interacting with shop on a footpath or playing on a patch of grass).

 For more guidance on creating scenes, read the ‘Building compositions’ section below.

Skin tones and face colouring

To represent the diversity of the population, we use a broad range of skin tones from our people tone colour palette.

People are made using a singular base colour from the people tone colour palette. All of our character heads are made ready to drop onto your character. You can find them in the “Master library” folder within the RGB character Google drive folder. 

To create the skin shadow and ear definition, we use black at 10% opacity, multiplied on top of the skin's base colour. Eyes and closed mouths are black and the nose is black, set at 40% opacity, multiplied. When using People tone 5 and People tone 6, the nose should be set at 20% opacity. For open mouths, we use white at 100% opacity.

Head to our colour page to view our full colour palette, including the skin tones. (opens in a new tab) 

Hair colouring

When adding hairstyles to our characters, our people tone, primary palette and secondary colour palettes can be interchanged to create greater variations. People tone 7 should be used as a dark brown option for hair rather than a skin tone due the lack of contrast when overlaying the facial features.

Building compositions

Compositions such our spot and scenic illustrations can be created by arranging buildings, objects, characters and iconography. These visual elements can be used to tell stories in a editorial setting where more detail is needed and space permits.

Creating layered scenes

1. Background colour representing the sky with a skyline overlay (simple silhouettes of buildings or trees).
2. Rectangle representing the start of the horizon line, grounded relevant buildings, trees or other scenery. This layer should be kept monochromatic and knocked back using lighter tones and/or a white sheer overlay set to 40% opacity.
3. The foreground tends to include characters and relevant objects depending on subject matter. If there is no need for characters, add buildings or trees. Use more saturated colours on this layer so the subjects stand out.

When creating scenes to fill taller dimensions (see below example), use hills to create depth - allowing the different levels to fill out the space. 

Tips for creating scenes and spot illustrations

• Don’t combine icons to make illustrative elements. Let the content guide you when deciding whether to use illustrations or icons. More sensitive or complicated topics would be best supported using icons or no imagery at all. 

• When using icons alongside illustrations, sit them within a circle to help stand out and you can use dashed lines to connect them to the relevant detail within the illustration - the lines should be sat behind the subjects and match the line weight of 6px, dash size of 8px and gap of 14px (these are based on a 1080px x 1080px artboard).

• When using our colour palettes within illustrations, use different tones to portray dimension and create depth (stick to round numbers when adjusting the tone of each colour, i.e. 10%, 20%, 30%, etc.)

Saving assets to libraries

Once you’ve made a new illustration asset, they need to be saved into the shared Google Drive library and the Adobe Creative Cloud library. There should be an RGB and CMYK version of each asset. If you have made a scene or spot illustration with any new individual assets such as characters, objects or buildings, be sure to add those individual assets to the library also. 

Shared Google Drive

1. Before saving your illustration, select it and use the ‘Outline Stroke’ tool to ensure any lines or outlines are made into shapes to remove any risk of errors when scaling.

2. Check the colour palettes are up to date and correct, removing any unnecessary swatches using the “Select all unused swatches” option. Avoid saving with duplications of swatches and ensure you match the original codes from our swatch palettes. To prevent altering the documents swatches, select “Add swatches” when the swatch conflict alert message appears.

3. When making different CMYK and RGB versions, check the profiles are correct and update the swatches using the up to date CMYK and RGB colour swatch files. You can locate the colour profiles and swatches in the “Colour” folder within the “Design assets” folder on our Google shared drive.

4. Check the existing illustration folders in Google Drive to locate a suitable file where your new illustration could be saved. Open the file and paste the illustration in with the artboard, ensuring you don’t disrupt the other assets. Double check the strokes and palettes as above and save. If there is no relevant file for your illustration, save as a new Illustrator document in the suitable topic folder. 

Adobe Creative Cloud libraries

1. Once the RGB and CMYK versions of your illustration are saved on the Google Drive, add them to the Adobe Creative Cloud library. Open the “Libraries” tab within Illustrator and select either “ONS RGB” or “ONS CMYK” depending on which version you are saving out. 

2. With the illustrator file open, select the single asset, drag and drop into the relevant folder within the library sidebar. The sub-folders in each topic should mimic the Illustrator files saved within the topic folders in our shared Google Drive.

3. If you edit an asset that’s been saved into the CC library, locate the asset within the Illustrations folder in the Google Drive and replace the asset for the edited version. Ensure the edits are made across both RGB and CMYK CC and Google libraries. 

Naming and tagging illustrations

Asset names should be clear and simple, depicting what it represents without going into unnecessary descriptive detail. 

When saving illustration files within the Google Drive folders, follow the name of the asset with either “_RGB” or “_”CMYK” depending on which profile you’re working on. This is to help differentiate between them when open and in use, ensuring you’re using the correct profile set up and swatches. You don’t need to add this when naming assets within the CC libraries.