Function over form: Best practices for illustration in product design

Illustration is on the rise in digital design. As digital services and products have become more abstract and hard to visualise, brands are using it as a core part of their visual identity to support key messaging, make their products easier to understand and improve consumer sentiment.

When distinctive, illustration can set a brand or product apart from competitors and can even be more recognisable than a logo. However, it’s easy to fall into the trap of using illustration purely for aesthetics. Generic stock illustrations are often used in design purely because they ‘brighten up the page’.

In this article I’ll be delving deeper into why illustrations are so important to our team, our approach and style at what3words, as well as processes that work well for us. These insights are transferable across industries and may help you make better-informed decisions when it comes to illustration for your business.

How it all began

Introducing a carousel when users first open the app has increased app engagement by 20%

Why use illustration?

Illustration can also add value when it comes to communicating a message to a broad audience. Photography is reliant on real people, which means age, ethnicity, social status, and culture are communicated whether you want them to be or not. Illustrations allow you to keep things vague and generic, which ensures different audiences are not put off by irrelevant-looking content.

Also, consider the difficulty of photography when trying to communicate abstract messaging. Within our developer website, for example, we’ve had to communicate concepts such as ‘API key security’ and ‘Creating an Autosuggest input box’. As you will discover on a Google image search for something like ‘tech security’, the web is full of some pretty abstract, Tron-style graphics that don’t really communicate anything. This is where illustration can add real value.

Style of illustration

Building a library of assets as you go along saves time when building new illustrations

Accessibility
Accessibility is a top priority for all UX and UI designers. We’re constantly checking contrasts, colour combinations, font sizes and more, to make sure our audience can use our products comfortably. This is often overlooked when it comes to illustration; subtle colours with low contrast are really common. This may be enough if the illustrations are just for decorative purposes, but when relying on them to communicate specific messages, this needs more consideration. This is why we’ve opted for a style of illustration with a blue stroke line around key shapes — the illustrations retain clarity even with complete colour blindness, or poor screen resolutions.

The consistent blue stroke line used throughout the illustrations ensures clarity even with extreme colour blindness

Brand communication
Another defining attribute of our illustration style is the strong colour palette. This is based on the what3words brand colours, which tie the illustrations to the rest of our marketing material. The bright and vivid colours give what3words an approachable tone.

Process

Scamps are used to test layout and concepts before moving to high fidelity

Our illustrations begin as scamps, rough, grey-scale sketches that are drawn on the iPad Pro. We use scamps to test the layout and concept of the illustrations, and quickly iterate them after sharing them with the team. This reduces wasted time — only the illustrations we are sure we want to use will get developed into high fidelity.

Once the scamps have been approved by the wider team, they can be developed into full colour illustrations. This is done in Adobe Illustrator, which allows us to export the illustrations as SVGs (scalable vectors). This allows the images to retain quality when resized, so the same asset can be used on small and large screen sizes. Creating illustrations as vectors means they can be altered quickly and easily, and can be turned into animations — something we’re currently experimenting with.

The illustrations are created as vectors, which allows them to be altered easily

In summary, illustration can be a brilliant tool to enhance your brand and improve communication to your audience. Having the resources in-house can help keep turn-around time to a minimum, although there is an enormous pool of highly talented, affordable freelancers across the UK and the rest of the world that you may like to consider, as it can be done remotely.

The most difficult part of the information design approach to illustration is the translation — taking a complex or abstract concept and visualising it into something users can instantly understand. This can only be achieved with a deep understanding of your product, and this is worth considering when working with illustrators both inside or outside of your company.

Looking for a job with a purpose? At what3words we’re creating a global standard for addressing that makes a difference. We’re hiring for a range of positions, from tech to marketing and sales. Check out our open positions here.

what3words is the simplest way to talk about location. It has divided the world into 3m x 3m squares, each with a unique 3 word address.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store