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.
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.
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.
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.
