The Role of Illustrations in UI Design

Websites and apps are moving ever more closely to a “Show, Don’t Tell” model. The era of getting large User manuals or long instructions with technology is coming to an end. Instead, Users expect to be introduced and taught about what they are using inline and in context. Furthermore, visualisations are being used to provide context and meaning to the User. One method of doing this is to use illustrations.  To use illustrations correctly within User Interface (UI) Design, certain rules must be followed.

Illustration showing three Mobile Interface prototypes.

What are Illustrations?

It is worth considering what an illustration is before showing how it should be used. Some valuable context and insight can be found by doing this. As a noun, illustration has been defined the following ways:

  • “A picture in a magazine book”
  • “An example that explains or prove something”
  • “An example that shows something”.

Some of the synonyms that go with the verb “to illustrate” are just as informative:

  • Enlighten
  • Clarify
  • Depict
  • Illuminate
  • Symbolise

Combined these make it clear that illustration is about depicting information in a visually nice and clear way. Furthermore, people find it easier to process visual information with some research showing that up to 90% of information people process is visual. This shows the important role illustration plays in UI and User Experience (UX) Design and it is something that should be considered by designers.

An illustration showing a high fidelity Mobile interface prototype.

Rules for using Illustrations in UI Design

When creating an illustration, the designer needs to be aware of certain rules. Following these will result in a clear visual aid.

1. Meaningful

An illustration is a very good tool to explain and clarify information or actions. In the context of UX Design, illustration can help explain a complex onboarding process while reducing the amount of written content within it. Therefore it is important the illustration is meaningful and the essence of the onboarding is still clear to the User.

2. Actionable

The context of the illustration and it’s overall story should motivate the user to make or complete an action.

3.  Compliment Interaction Design

Animated illustrations can help to enrich the transitions between screens and pages. This makes the User Experience more dynamic and human-centred.

4. Live Within The Brand

Illustration can be used to visually support existing brand and brand elements such as logo, colours, typography etc. Recognisable illustrations can also become a key element in increasing brand awareness. Any illustrations created should come under brand guidelines to ensure they remain consistent with the brand and do not compete with it.

A video showing a High fidelity mobile prototype for an app called "Coupons".

Using Illustrations

While working on an illustration a designer should think of the potential use for it. Using illustration can help to fulfil multiple User needs. It can provide a visual aid, it adds value beyond functionality and can be used for storytelling. Good use of illustration can help elevate a website, software or app.

The use of illustrations is something we are fond of in Graphic Mint. View our Portfolio to see some examples, or Contact Us today to begin a project together.

Stay in Touch

Keep up-to-date on our world of UX with Graphic Mint’s newsletter and social media.
+353 1 4788444

Graphic Mint
Unit 1C Corn Exchange,
Poolbeg Street,
Dublin 2, Ireland,
D02 C578

Copyright © 2010  –  2019 | Graphic Mint Ltd | Privacy Policy | All Rights Reserved

Graphic Mint Logo