Core PrinciplesIllustration is content. By that it serves a very important role for the entire brand.
Illustration represents our digital products.
Illustration talks directly to the user.
Illustration tells stories.
Illustration supports the copy.
We want to enable people to clearly understand the message of every illustration.
This illustration guide displays the general workflow of developing an illustration in a optimised, streamlined way.
All illustrations should be designed with love and true dedication to creating a well crafted piece of work.
Every illustration should show an inherent connection to all other illustrations and the digital design guidelines in general.
Tone and Voice
The loudness of illustration and content need to be balanced. This can be achivied by taking the general message of every illustration into account. Bolder illustrations should be combined with less complex information, e.g. short texts or claims.
Using the appropriate tonality allows to better connect and resonate with the users. Each illustration should reflect that. In general, the illustrations can sometimes be playful but never cartoony.
Be witfully serious in every illustration. The miniature style of the illustrations embraces this but at the same time represents real life concepts within scenes and is clear with its meaning.
Here are some of the things we learned while working with illustrations at our company.
- Use of brand colors for highlighting important elements
- Light single colored backgrounds
- Bright, strong colors are used less than light, muted colors
- Solid fills, no outliness
- Use of shading to add depth
- Round corners
Colors bring the illustration to life! You should always use percentages of the brand colors in order to have more freedom while illustrating and still being brand consistent. The colors should always be used in thoughtful ways to create visual cues
You can find out more about the use of colors within illustrations in the color section of the guidelines.
Things to consider
Don’t use outlines. They are not allowed under the brand guidelines.
Never overload the scene with unnecessary details.
Try to keep a balance between objects with round corners and without.
No plain grey shadows.
No fading shadows.
Only major objects within the illustration are placed in perspective.
Do not overload the scene with too many elements and keep space within the illustrations (max. 10 characters per scene).
Use the illustrations in their intended size.
Don’t scale them.
You always have to think of the interface and the illustrations in relation to one another. Try to balance the colors in your illustrations. Bold, shinny and bright colors should only be used for small objects and highlights.
If the interface is already colorful try to make a calmed down illustration with few and light colors.
Try to guide the user through lines, perspectives, forms and colors to the important parts of the illustration.
Use the golden ratio to place objects in the scene.
Characters appear as small people in a normal sized world.
All characters have a plain white skin color.
You can build your own characters with the Character Assembling Kit which is based on the atomic design principles.
We differentiate between three illustration types: templates, irganisms and molecules.
Templates are used to tell complex stories and adapt in their complexity by their illustrations size. They usually contain more than three characters.
Organisms can be seen as elements of illustration templates and by that transfer simpler concepts.
Our infographics differ from the illustrations as they only express a single concept.
Molecules are small and simple and help the user to understand the content of a content like short paragraphs.
Icons differ from illustrations in style and function.
Illustrations convey a story and explain several ideas at a time. Icons instead serve a more functional purpose: they represent content rather than complementing it.
Think of illustrations as paragraphs and of icons as bullet points.
Icons are very simple and single colored in almost all cases.
You can find more informations about how to use and design icons for digital products at our company in the iconography section.
Motion brings personality to the illustrations. Try to always have a way in mind onhow you could animate the illustration you’re working on.
Motion should be meaningful and intentional.
It should mirror movements we encounter in the physical world around us.
Motion should be used with discretion and be always unobtrusive.
Find out more information about motion in the motion section.