Core Principles

Illustration is content. By that it serves a very important role for the entire brand.

Illustration simplifies complex ideas.
Illustration represents our digital products.
Illustration talks directly to the user.
Illustration tells stories.
Illustration supports the copy.

 

Clarity

We want to enable people to clearly understand the message of every illustration.

Efficiency

This illustration guide displays the general workflow of developing an illustration in a optimised, streamlined way.

Beauty

All illustrations should be designed with love and true dedication to creating a well crafted piece of work.

Consistency

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.

Best practices

Here are some of the things we learned while working with illustrations at our company.

Color distribution

  1. Use of brand colors for highlighting important elements
  2. Light single colored backgrounds
  3. Bright, strong colors are used less than light, muted colors
  4. Solid fills, no outliness
  5. Use of shading to add depth
  6. Round corners

Colors

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.

Detailes

Never overload the scene with unnecessary details.

Corners

Try to keep a balance between objects with round corners and without.

Shadows

Tinted shadows.

No plain grey shadows.

No fading shadows.

Perspective Objects

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

Resizing

Don't

Do

Use the illustrations in their intended size.
Don’t scale them.

Don't

Interface

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.

Composition

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.

Character Assembling-Kit

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.

Illustration types

We differentiate between three illustration types: templates, irganisms and molecules.

Illustration Templates

Templates are used to tell complex stories and adapt in their complexity by their illustrations size. They usually contain more than three characters.

Illustration Organisms

Organisms can be seen as elements of illustration templates and by that transfer simpler concepts.

1. Reuse elements to keep consistency.
Illustration Molecules

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.

Iconography

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

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.