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?
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 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 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.
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 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.
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.
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.
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.
We have been supporting the Swiss Post on its path to digitalisation for around 20 years. For this website relaunch, we were in charge of user experience, design, and frontend to backend implementation on Sitecore 9 and more.
Give your customers pleasure with a good User Experience.
We create a design for you that works on all devices.
We are the number one in the category Usability!