It takes rules to create illustrations that we can identify with on the one hand, and that on the other hand convey the context and message of a page. We developed a modular set of illustrative elements to distinctively communicate the Swiss Post brand.
Developing Illustrations by Playing by the Rules?
Usually, when we think of illustrations, we don’t think of rules, guidelines and boxes to be ticked. Illustrations are about creativity and individuality, about the emotions and identification they can certainly convey. It is often a challenge to create new illustrations and to make sure that they convey a consistent message and are in line with the corporate design.
In many cases, illustrations don’t get used in web projects because it is difficult to find the right illustrations for specific content or because of the costs involved with having specific illustrations created. Neither illustrators nor communications managers are fans of protracted meetings about the development of illustrations.
So, can the creation of an illustration be standardised? Are illustrations any good when you play by the rules? Or does that strip them of their power to communicate?
Words can set the tone for a company, but it’s the pictures that give it a face.
Jennifer Hom
Experience Design Manager, Airbnb
The Right Illustration for Every Purpose
Whether it is about communicating complex matters in a simple fashion or about making a bland login screen a little more charming, illustrations are becoming a crucial part of modern websites. Depending on function and context, interface illustrations come with different requirements. A navigation icon has a different purpose from an image that forms part of an explanatory article.
Let us start by looking at the different types of illustration frequently found on user interfaces. They can be clustered as follows:
Icons
Icons help users find their way around the website. Wherever possible, icons use images that are easily recognised. Icons always serve a functional purpose and should not be used for decorative purposes.
Illustrative Pictograms
Illustrative pictograms or small illustrations usually represent a specific product or a product category (for instance, screws). They facilitate quick product selection and are usually used in navigation elements. They also have more detail than icons.
Mood Illustrations
These illustrations are used to visually support the content and to help guide users. Many of the images used in corporate designs fall into this category. Mood illustrations provide the context and bring the message of the page across visually.
Explanatory Illustrations
Explanatory illustrations illustrate facts or subjects. They simplify complex issues to make them easier to understand. They are part of the communication, the story, and are placed in a prominent location. Explanatory videos often use this kind of illustration.
„Beep, Beep“
Who doesn’t remember Road Runner? In this cartoon from the 1960s, Wile E. Coyote tirelessly chases Road Runner in every episode, without ever being able to catch him. Chuck Jones, the creator of Road Runner, had put together a set of ten simple rules for the creation of this cartoon, which served him as a guiding principle for the development of every new episode.
These rules are a good example of how a solid basis for decision-making helps direct the creative process. Just like in other creative realms, the creation of illustrations benefits from a framework within which we get to tell new and exciting stories. These rules help us link these individual stories to form a recognisable series depicting an entire world – with its very own laws of physics.
Modular Design
To facilitate the reproduction of images or illustrations when working with a corporate design, and to create a consistent visual vocabulary, it makes sense to take a modular approach and define specific rules.
A modular design is also more cost-effective. Illustrations can be created more easily and quickly, because there are clearly defined rules for style and the development of motifs. However, there are also limits to a modular design. It is difficult to cover specific ideas of individual stakeholders. In those cases, it is still necessary to create very specific, individual illustrations.
Is it even possible to modularise illustrations? In part: Yes. More so than photographs, illustrations consist of various design elements for which rules can be defined.
The Illustrative Elements of post.ch
We developed a modular set of illustrative elements to distinctively communicate the Swiss Post brand. The rules for the Swiss Post UI illustrations are defined as follows:
Choose a Typical Swiss Post Item as the Main Motif
In the illustrations, Swiss Post is represented through items that viewers associate with the postal service. These could be letters, parcels or postal vehicles.
Add a Signifier
Signifiers can illustrate an action (stamp + magnifying glass = philately) or help form a symbol (parcel + balloon = sending parcels). People and animals are only used as protagonists. They are only included if the motif requires an actor to carry out an action.
As a Backdrop, Choose a Swiss Landscape, a Typical Room or Everyday Things
Backdrops make up the stage for the main motif. They link the illustrations to the customer’s environment and inspire identification of the users with their own world. This is why architecture and inventory are based on authentic originals: Swiss road signs, a typical Swiss kiosk, Ballwil village, etc.
Draw in Perspective
Illustrations are three-dimensional. They have defined vanishing points and are therefore drawn in perspective. Two-dimensional or isometric depictions are not used.
Use Colour for Highlights
The main motif is in colour, which creates a contrast with the monochrome backdrop in shades of grey. This automatically draws attention to the main motif in the illustration. At the same time, the illustration as a whole remains subdued and unobtrusive and does not distract from the actual content on the page.
Create a Focus
The backdrop is a circular cut-out. The main motif in the foreground is cropped and placed on top of the backdrop.
Illustrations Only Consist of Planes
There are no lines in the illustrations. The planes are in a solid colour. We do not use gradients. The edges of the planes are always clearly defined and do not have a contour.
Based on these rules, we have created a variety of different illustrations for various topics that all follow the same underlying idea. The standardised image composition also allows us to animate these illustrations in an interface without requiring any individual programming.
Ensure Diversity
When choosing motifs, we must always remember to represent the diversity in our society and our environment in our images. The illustrations must never marginalise anyone and must never depict offensive or judgemental content.
Contact for your Digital Solution with Unic
Book an appointmentAre you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you: Jörg Nölke and Gerrit Taaks (from left to right).
Contact for your Digital Solution
Book an appointmentAre you keen to talk about your next project? We will be happy exchange ideas with you: Melanie Klühe, Stefanie Berger, Stephan Handschin and Philippe Surber (clockwise).
