Es braucht Spielregeln, damit Illustrationen entstehen, mit denen wir uns einserseits identifizieren können und die andererseits den Kontext sowie die Botschaft einer Seite vermitteln. In Zusammenarbeit mit der Post haben wir einen eigenen Illustrationsbaukasten entwickelt, der die Marke «Post» unverkennbar transportiert.
Illustrationen nach Schema F?
Bei Illustrationen denken die wenigsten an das routinemässige Abwickeln von vorgegebenen Regeln. Vielmehr geht es um Kreativität und Individualität, um Emotionen und Identifikation, die Illustrationen zweifellos vermitteln können. Illustrationen zu erstellen und dabei zu gewährleisten, dass Illustrationen eine einheitliche Sprache sprechen sowie zugleich mit den Corporate Design vereinbar sind, führt immer wieder zu Problemen.
Oftmals scheitert der Einsatz von Illustrationen in Webprojekten an der Schwierigkeit, die richtigen Illustrationen für spezifische Inhalte zu finden, oder an den Kosten, die eine individuelle Entwicklung von Illustrationen mit sich bringt. Der Wunsch, dass die Erstellung von Illustrationen nicht in stundenlange Diskussionen ausartet, kennen sowohl Illustratoren als auch Kommunikationsverantwortliche.
Lässt sich also das Erstellen einer Illustration standardisieren? Was bringen Illustrationen nach Schema F? Oder verliert eine Illustration gerade dadurch ihre kommunikative Kraft?
Words can set the tone for a company, but it’s the pictures that give it a face.
Jennifer Hom
Experience Design Manager, Airbnb
Für jede Aufgabe die passende Illustration
Sei es um komplexe Sachverhalte einfach zu kommunizieren oder um einer Login-Maske ein bisschen Charme zu verleihen, Illustrationen sind zunehmend ein wichtiger Teil von modernen Webseiten. Ein Interface stellt je nach Funktion und Kontext unterschiedliche Anforderungen an eine Illustration. Ein Icon in der Navigation erfüllt eine andere Aufgabe als eine bildhafte Illustration als Teil eines erklärenden Artikels.
Schauen wir uns darum zuerst die verschiedenen Illustrationstypen an, die in einem User Interface häufig verwendet werden. Die Illustrationstypen lassen sich wie folgt unterteilen:
Icons
Icons helfen den Nutzerinnen und Nutzern, sich schneller zu orientieren. Wo immer möglich, kommen Motive zum Einsatz, die in ihrer Anwendung allgemein etabliert sind. Icons dienen immer einem funktionalen Zweck und sollten nicht dekorativ verwendet werden.
Illustrative Piktogramme
Illustrative Piktogramme oder Kleinillustrationen repräsentieren meist ein spezifisches Produkt oder eine Produktkategorie (zum Beispiel Schrauben). Sie dienen der schnellen Produktauswahl und werden zumeist im Kontext von Navigationselementen eingesetzt. Im Gegensatz zu Icons weisen sie jedoch eine höhere Detailierung auf.
Mood-Illustrationen
Diese Illustrationen kommen zur visuellen Unterstützung des Inhalts und als Orientierungshilfe für die Nutzerinnen und Nutzer zum Einsatz. Sie sind vergleichbar mit den oft in Corporate Designs verwendeten «Image»-Bildern. Mood-Illustrationen liefern den Kontext und vermitteln bildlich die Botschaft der Seite.
Erklärende Illustrationen
Erklärende Illustrationen verdeutlichen einen Sachverhalt. Sie vereinfachen komplexe Themen und machen diese verständlich. Sie sind ein Teil der Kommunikation, der Geschichte und werden prominent dargestellt. Typischerweise verwenden oft Erklärungsvideos diese Art von Illustrationen.
«Beep Beep»
Wer kennt ihn nicht, den «Road Runner». In diesem Cartoon aus den 60er-Jahren jagt der unermüdliche Coyote in jeder Folge dem Road Runner hinterher, ohne ihn auch nur einmal zu erwischen. Chuck Jones, der Erfinder des Road Runners, hatte für die Entwicklung dieses Cartoons zehn einfache Regeln aufgestellt, die ihm als Grundprinzipien für die Entwicklung jeder neuen Folge gedient hatten.
Diese Regeln sind ein gutes Beispiel, wie eine solide Entscheidungsgrundlage den kreativen Prozess zu lenken hilft. Nicht anders als in anderen kreativen Gebieten auch, braucht die Entwicklung von Illustrationen Leitplanken, innerhalb derer wir neue und spannende Geschichten erzählen können. Die Regeln helfen dabei, diese Einzelerzählungen zu einer wiedererkennbaren Serie zu verknüpfen, hinter der sich eine ganz eigene Welt verbirgt – mit eigenen physikalischen Gesetzen.
Das Baukasten-Prinzip
Um Bilder oder Illustrationen im Corporate-Design-Umfeld einfacher reproduzierbar zu machen und damit eine einheitliche Bildsprache zu entwickeln, ist es sinnvoll, diese zu modularisieren sowie klare Regeln zu definieren.
Ein Baukasten-Prinzip bringt zudem eine höhere Wirtschaftlichkeit mit sich. Wir können Illustrationen einfacher und schneller erstellen, da die Machart und die Motiv-Entwicklung klaren Regeln folgen. Ein solches Baukastensystem hat jedoch auch seine Grenzen. So lassen sich damit kaum sehr spezifische Vorstellungen von einzelnen Stakeholdern abdecken. In solchen Fällen müssen wir eine Illustration weiterhin sehr individuell gestalten.
Können wir Illustrationen überhaupt modularisieren? Zu einem gewissen Teil: Ja. Illustrationen bestehen mehr noch als Fotografien aus verschiedenen Gestaltungselementen, für die man Regeln definieren kann.
Der Illustrations-Baukasten von post.ch
In Zusammenarbeit mit der Post haben wir einen eigenen Illustrationsbaukasten entwickelt, der die Marke «Post» unverkennbar transportiert. Die Spielregeln für die UI-Illustrationen der Post haben wir wie folgt definiert:
Wähle einen typischen Gegenstand der Post als Hauptmotiv
In den Illustrationen repräsentieren wir die Post durch Gegenstände, die ein Betrachter der Post zuweist. Solche Motive sind zum Beispiel Briefe, Pakete oder Postfahrzeuge.
Füge einen Bedeutungsträger hinzu
Bedeutungsträger können eine Handlung verdeutlichen (Briefmarke + Lupe = Philatelie) oder gemeinsam ein Symbol bilden (Paket + Ballon = Paketversand). Menschen und Tiere setzen wir ausschliesslich als Protagonisten ein. Sie kommen nur dann zum Einsatz, wenn das Motiv einen Akteur benötigt, der eine Handlung vornimmt.
Wähle als Hintergrund eine Schweizer Landschaft, einen typischen Innenraum oder Dinge des Alltags
Hintergründe sind die Bühne für das eigentliche Hauptmotiv. Sie verorten die Illustration in das Umfeld des Kunden und schaffen die Identifikation der Nutzerinnen und Nutzer mit ihrer eigenen Lebenswelt. Die Architektur und das Inventar entsprechen daher authentischen Vorlagen: zum Beispiel Schweizer Strassenschilder, ein typischer Schweizer Kiosk, das Dorf Ballwil usw.
Zeichne mit Perspektive
Die Illustrationen sind dreidimensional. Sie verfügen über definierte Fluchten und sind somit perspektivisch gezeichnet. Zweidimensionale oder isometrische Darstellungen sind nicht erlaubt.
Setze den Farbakzent
Das Hauptmotiv gestalten wir farbig und bilden damit einen Kontrast zum monochromen Hintergrund in Grautönen. Dadurch lenken wir den Fokus der Illustration automatisch auf das Hauptmotiv. Gleichzeitig bleibt die Illustration in ihrer Gesamtheit dezent und unaufdringlich und lenkt nicht vom eigentlichen Inhalt der Seite ab.
Setze den Fokus
Der Hintergrund ist kreisrund ausgeschnitten. Das Hauptmotiv im Vordergrund ist freigestellt und über dem Hintergrund platziert.
Illustrationen bestehen nur aus Flächen
In den Illustrationen kommen keine Linien vor. Die Flächen sind in einer soliden Farbe gehalten. Wir verwenden keine Verläufe. Die Ränder der Flächen sind immer klar definiert und haben keine Kontur.
Anhand dieser Regeln haben wir für die Post eine Vielzahl an unterschiedlichen Illustrationen zu diversen Themen entwickelt, die alle jedoch dem gleichen Schema folgen. Durch den standardisierten Bildaufbau lassen sich diese Illustrationen zudem animiert in ein Interface integrieren, ohne dass eine individuelle Programmierung nötig wird.
Auf Diversität achten
Bei der Motivwahl ist immer darauf zu achten, dass wir ein möglichst diverses Abbild der Gesellschaft und unserer Umwelt abbilden. Die Illustrationen dürfen niemanden ausgrenzen und weder verletzende noch wertende Inhalte zeigen.
Kontakt für Ihre digitale Lösung mit Unic
Termin buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.
