Source: https://cd.union-investment.de/grundlagen/Grafikelemente/illustrationsstil
Der Illustrationsstil von Union Investment ist reduziert, flächig und besteht aus einfachen Grundformen. Der prägnante Einsatz der Primärfarben macht den Illustrationsstil besonders markant. Mithilfe von Linien lassen sich Details darzustellen und Flächen gleicher Farbe voneinander unterscheiden.
Anwendungsbeispiele
Illustrations-Prinzipien
Einsatz
Konstruktion
Szenarien
Animationen
Bitte vermeiden
Downloads
Diese vier Prinzipien stellen die Grundlage für die Gestaltung von Illustrationen bei Union Investment dar. Durch den konsequenten Einsatz dieser Prinzipien wird eine einheitliche Gesamtwirkung erzeugt.
Die beiden Primärfarben UI-Blau und UI-Grün und deren helle und dunkle Abstufungen dominieren den Gesamteindruck der Illustrationen. Die Sekundärfarben werden dort eingesetzt, wo sie inhaltlich benötigt werden (z. B. bei Objekten) sowie zur Auflockerung des Gesamteindrucks.
Dem Illustrationsstil liegen klare, geometrische Formen zugrunde. Sie bilden die Basis, sind einfach in der Anwendung und wirken modern und zeitgemäß.
Der Einsatz einer Linie hilft dabei, Flächen gleicher Farbe voneinander zu trennen und bietet die Möglichkeit, Details innerhalb der Illustration zu zeigen.
Wir kommunizieren auf Augenhöhe – daher ist eine Perspektive wichtig, die den Betrachter direkt anspricht und in die Szene einbezieht. Personen werden immer auf Augenhöhe dargestellt und Szenen aus der Perspektive des Betrachters.
Illustrationen werden vor allem dort eingesetzt, wo die Abbildung komplexer Inhalte durch Fotografie an seine Grenzen stößt. Sie bilden diese Inhalte, reduziert auf das Wesentliche, aber auf emotionale Weise ab.
Diese Illustrationen stellen eine konkrete Szene dar und finden u. a. Einsatz in Erklärfilmen.
Diese Illustrationen werden mit Diagrammen oder Schaubildern kombiniert und dienen einer emotionaleren Visualisierung von Informationen.
Beim Aufbau von Figuren und Objekten sind stets folgende Vorgaben zu beachten.
Das illustrative Farbspektrum wird durch die beiden Primärfarben UI-Blau und UI-Grün und deren Abstufungen dominiert. Das Sekundärfarbspektrum und die Zusatzfarben fließen ergänzend in die Gestaltung ein, um eine möglichst realistische Darstellung zu gewährleisten.
Für Hautfarben wurde ein neues Farbspektrum definiert, welches exklusiv für den Einsatz von Illustrationen bestimmt ist.
Der Farbgesamteindruck jeder Illustration ist geprägt durch den Einsatz von UI-Blau und UI-Grün sowie deren Abstufungen. Wichtig ist, dass die Farben in jeder Illustration vorhanden sind – egal, ob es sich um ein Einzelmotiv oder eine komplexe Szene handelt. Der Farbeinsatz kann durch kleine Farbakzente oder durch das plakative Einfärben gesamter Flächen erfolgen. Die Sekundärfarben helfen dabei, eine möglichst realistische Illustrationswelt zu gestalten. Dennoch sollte die Farbigkeit der Sekundärfarben niemals den Farbgesamteindruck aus UI-Blau, UI-Grün und deren Abstufungen überlagern.
Der geometrische Grundaufbau der Figuren lässt sich in drei Segmente unterteilen. Kopf, Oberkörper und Beine sind nach realistischen Proportionen gestaltet. Die Aufteilung der Figuren in drei Segmente ermöglicht den einfachen Einsatz der Illustrationen innerhalb eines Baukastensystems.
Die Vielzahl an unterschiedlichen Gesichtausdrücken schafft eine emotionale Nähe und ermöglicht eine klare Kommunikation.
Durch eine diverse Darstellung hinsichtlich Geschlecht, Alter, Ethnie und Körperform wirkt der Illustrationsstil von Union Investment besonders realistisch.
Die Darstellung von Objekten folgt den gleichen Prinzipien wie der Aufbau von Figuren. Eine reduzierte und dennoch realistische und leicht erkennbare Formensprache mit geometrischem Grundaufbau findet Anwendung.
Eine Besonderheit ist die Darstellung aus der FPVPerspektive (First Person View Perspektive). Dabei werden Objekte aus Sicht des Betrachters dargestellt und weichen von der ansonsten verwendeten Frontal und Seitenperspektive ab.
In Szenen werden Figuren und Objekte in einen sinnvollen Zusammenhang zueinander gesetzt.
Der Aufbau einer illustrativen Szene folgt immer dem gleichen Prinzip. Dient die Illustration eher einem erzählerischen Nutzen, so wird mit einem Vorder-, Mittel- und Hintergrund gearbeitet. Alle relevanten Handlungsbereiche befinden sich im Vorder- und Mittelgrund, während der Hintergrund eher dekorativen Zwecken dient.
Bei Illustrativen Infografiken wird auf einen Mittel- und Hintergrund verzichtet. Hier sollte der Fokus auf der Infografik liegen, die zu dekorativen Zwecken von einer Illustration begleitet wird.
Um auf Augenhöhe zu kommunizieren, ist eine Perspektive wichtig, die den Betrachter direkt anspricht und in die Szene einbezieht.
Dazu wird eine klare Frontal- und/oder Seitenansicht von Figuren und Objekten verwendet. Der Betrachter blickt als Zuschauer auf die Szene.
Die dynamische Linie ist eine abgerundete Konturlinie, die verwendet wird, um Details im Vorder- und Mittelgrund darzustellen. Die Konturlinienstärke der Mimik beträgt 0,8 pt. Die Strichstärke von Kleidung und Objekten beträgt 1,2 pt. Die Strichstärke skaliert proportional d. h. bei größeren Figuren oder Objekten wird die dynamische Linie dicker – zur Orientierung dienen die definierten Größen innerhalb des Illustrationsbaukastens .
Die Farbe der Konturlinie richtet sich immer nach der Flächenfarbe, auf der sie platziert wird und kann dann je nach Bedarf eine Abstufung heller oder dunkler eingefärbt werden.
In den schematischen Formen des Hintergrunds wird die dynamische Linie nicht eingesetzt.
Durch eine dynamische Linie lassen sich Schatten von Figuren und Objekten auf einem flächigen Untergrund darstellen. Beim Verwenden von Schatten ist darauf zu achten, dass alle Linien in die gleiche Richtung laufen. Die Farbe von Schatten orientiert sich an der Farbe der Hintergrundfläche und wird jeweils eine Abstufung dunkler eingefärbt.
Zur Ausgestaltung des Hintergrundes einer Szene wird ein zweifarbiger Hintergrund genutzt. Dieser sorgt für einen realistischen Kontext, indem er schematische Darstellungen von Objekten, Gebäuden oder Naturelementen zeigt.
Für Szenen im Außenbereich wird UI-Blau100 und UI-Blau200 genutzt und für Darstellungen im Innenbereich Weiß, Grau100 und Grau200. Dabei werden die helleren Farben immer großflächig eingesetzt und die dunkleren zur Darstellung der schematischen Elemente.
Immer wenn ein besonderer Fokus auf die Mimik der Figuren gelegt werden soll, eignet sich die Darstellung der Figuren durch eine Nahaufnahme. Eine Nahaufnahme ist eine vergrößerte Darstellung eines Bildbereichs. Einer Nahaufnahme werden keine weiteren Details, z. B. weitere Linienelemente hinzugefügt.
Für animierte Illustrationen gelten beim Aufbau die gleichen Regeln wie für die statischen Illustrationen. Die Bewegungen sollen natürlich wirken und nicht vom Inhalt ablenken. Auch die Mimik soll realistisch wirken und die Kommunikation unterstützen.
Die diverse Darstellung hinsichtlich Geschlecht, Alter, Ethnie und Körperform sollten auch in animierten Illustrationen genutzt werden.
Auch bei bewegten Illustrationen ist es wichtig, auf Augenhöhe zu kommunizieren und den Betrachter direkt anzusprechen. Deshalb gilt auch hier eine klare Frontal- und/oder Seitenansicht von Figuren und Objekten. Der Betrachter blickt als Zuschauer auf die Szene.
Wird mit Vorder-, Mittel- und Hintergrund gearbeitet befinden sich alle relevanten Handlungsbereiche im Vorder- und Mittelgrund, während der Hintergrund eher dekorativen Zwecken dient. Der Kamerablick bewegt sich dabei vorwärts, rückwärts oder seitwärts, nicht nach oben oder unten.
Der folgende Einsatz von Illustrationen sollte vermieden werden.
Kein geometrischer Aufbau (organische Formensprache)
Fehlender Einsatz der Primärfarben
Falscher Einsatz der Linie (zu häufig oder rein dekorativ)
Verzicht auf „alberne“ oder marionettenhafte Posen
Perspektive nicht auf Augenhöhe
Extreme Perspektiven (stürzende Linien)
Kombination innerhalb einer Figur aus Frontal- und Seitenansicht
Hinweis : Die Verwendung der Illustrationen ist nur für die Zwecke der Union Investment Gruppe zulässig. Eine anderweitige Verwendung oder eine Weiterleitung an Dritte ist nur mit unserer schriftlichen Einwilligung zulässig.
Vorheriges Kapitel Diagramme Nächstes Kapitel Störer
