Creating illustrations for an online campaign or service

If you're designing illustrations for an online campaign or service, you should create flat, two dimensional vector images.

This will ensure they are clear and readable, while also making content and messaging easier for users to understand.

Vector images are scalable, easy to adapt for different contexts, and easier to optimise than raster images for faster page loading times.

Use of vector illustrations

You can use vector illustrations in the header of an online service as a hero image, or in the main body of the page.

To help convey complex messages, you can use illustrations of generic objects such as computer equipment or stationery.

There is more guidance on the use of images on the Scottish Government Design System.

Types of illustration

There are 2 main types of illustration used on campaign and service sites: 

• full illustration - used as hero images in the header or to aid the understanding of important content in the page body
• spot illustration - used where space is limited such as card images

Icons are different from illustrations. They are used for representing specific actions, functions or concepts in a compact and easily recognisable way. You can read more guidance about icons on the Scottish Government Design System.

Principles 

You should align to 3 core principles when creating vector illustrations for campaigns or services: 

• simple - use as few elements as possible to communicate your message; use minimal details and simple shapes to enhance clarity
• accessible - make sure elements have strong contrast in relation to each other and their background; do not rely solely on colour to convey meaning
• universal - choose symbols and imagery that are recognisable and relatable to a wide audience; avoid depicting people, and if you do, think carefully about how you represent diversity

Colours

You can use the blues from the Scottish Government Design System in combination with neutral greys when creating vector illustrations. You can also use any tints or shades of these colours.

This limited palette will allow you direct attention to key elements and messages while creating a sense of stability, reliability and professionalism which can help to evoke trust and confidence in users.

The Design System contains additional colours in its extended palette which can be used to create new colour themes for graphics. 

You can use two or three complementary colours in combination with the neutral greys to create new colour options. You can also use any tints or shades of these colours. It's best to stick to one consistent colour theme for your graphics.

Examples of the primary palette and extended palette

Accessible illustrations

Images for campaigns or services are likely to fall into 2 broad categories: 

• informative images convey information which is important for users to understand e.g. charts, graphs, diagrams, and illustrations explaining a process; if removing the image makes the content harder to grasp, it's informative
• decorative images are purely for visual appeal or aesthetic reasons; they do not add essential information

Make sure that illustrations have good colour contrast between the different elements which make them up. This will help people with visual impairments to see and understand them.

When you switch to a layer mode such as luminance, is the meaning of the illustration still clear in greyscale? Do not rely on colour alone to convey meaning. 

For informative images, add alt text in the HTML which accurately conveys the content. Try to avoid phrases like "image of" as screen readers already announce this. Keep it concise and focus on the essential information the image provides.

For purely decorative images, you can use an empty alt text (alt="") to signal to screen readers to skip it without affecting the flow of your content.