Maria Grilo

22. Juli 2021

Min Read

Gute Illustration ist wichtig

Die Illustration ist wahrscheinlich eine der ältesten Kommunikationsformen. Konzeptionell gesehen ist sie den Alphabeten und dem Text voraus und wurde nie ersetzt. Stattdessen ergänzte es die Komplexität und Länge geschriebener Texte und half den Menschen sogar beim Lesenlernen, während es gleichzeitig visuelle Hinweise und Kontext bot. In verschiedenen Kognitionszuständen dient die Illustration unterschiedlichen Zwecken, weil sie ein so reichhaltiges Kommunikationsmittel ist.

Laut dem Merriam-Webster-Wörterbuch ist es“um deutlich zu machen, indem man ein Beispiel oder Beispiel gibt oder als Beispiel dient„,“um mit visuellen Elementen zu versehen, die erklären oder dekorieren sollen„und“deutlich zu zeigen„. Die Kirche zum Beispiel tat dies viele Jahrhunderte lang, durch Zeichnungen in Büchern, Gemälden, Skulpturen und sogar in der Architektur.

Veranschaulichen heißt klarstellen.

Eine illuminierte Manuskriptseite mit einem großen, verzierten Anfangsbuchstaben „B“, der eine sitzende, gekrönte Figur rahmt, die Harfe spielt und ein offenes Buch hält. Der Hintergrund und die Ränder sind mit komplizierten mittelalterlichen Flechtwerkmustern und lateinischer Schrift in schwarzer Tinte mit roten Akzenten gefüllt.

Die Leute illustrierten weiterhin in verschiedenen Medien, aber meistens in Printmedien. Dann tauchten neue Medien wie das Kino auf und Animationen kamen hinzu. Schließlich erreichten wir den Punkt, an dem wir uns jetzt befinden, und die Illustration erlebt zunehmend ein Comeback als zentrale Kommunikationsform. Es geht nicht mehr nur um Printmedien, nicht nur um Zeitschriften oder ausgewählte Arten von Büchern. Es sind Websites, es ist Branding, es ist UI-Design.

Könnten Sie Ihr Produkt dennoch entwerfen, indem Sie nur Typografie, Navigationselemente, Farben und Stockfotos verwenden? Das könnten Sie auf jeden Fall, aber Deshalb denke ich, dass Sie die Extrameile gehen sollten.

blue arrow to the left
Imaginary Cloud logo

Mit Illustrationen alle Blicke auf sich ziehen

In erster Linie Abbildung ist ein Blickfang. Und es gibt mehrere Gründe, warum Sie diesen Blickfang wollen. Es könnte sein, dass Sie Ihr Produkt Ihrer Zielgruppe zum ersten Mal zum ersten Mal vorstellen, beispielsweise über eine Landingpage. Oder es könnte sein, dass Sie in einem informativen Seitenlayout das Sehvermögen des Benutzers auf eine bestimmte Stelle lenken müssen.

Eine farbenfrohe, strukturierte Vektorillustration auf einer Webseiten-Benutzeroberfläche. Auf einem rosa Hintergrund liegt eine Person mit einer VR-Brille in einem gelben Sessel und interagiert mit einer futuristischen Schnittstelle. Eine weitere Person steht daneben und blickt auf ein schwebendes digitales Diagramm. Über ihnen transportiert eine Drohne einen Kaffeebecher. Der große weiße Text lautet „Drone Delivery“ und „Prioritise“, ergänzt durch einen französischen Platzhaltertext und einen „Read More“-Link.
Zwei Beispiele für moderne Hero-Sektionen von Webseiten, die nebeneinander dargestellt sind. Das linke Design zeichnet sich durch ein klares, minimalistisches Layout mit einer fettgedruckten Überschrift „Divide payments to anyone“, einem E-Mail-Anmeldefeld und einer lebendigen, geometrischen Illustration einer Hand aus, die ein Smartphone hält. Das rechte Design zeigt ein organisches, geschwungenes Layout in Dunkelblau, Creme und Weiß mit der Überschrift „Fruit juice is good for your health.“, abstrakten Mustern und einem gelben „Get in touch“-Button.

Bilder werden oft so ausgewählt, dass die Aufmerksamkeit dem Text vorgezogen wird. Es gibt also mehrere Möglichkeiten, dies zu Ihrem Vorteil zu nutzen, was uns zum nächsten Punkt führt: Die Abbildung ist informativ.

blue arrow to the left
Imaginary Cloud logo

Machen Sie einen Punkt

Eine gute Illustration wird Ihr Exemplar ergänzen. Es unterstützt die Punkte, die Sie vermitteln möchten, und verbessert gleichzeitig die Informationen, die am relevantesten sind. Es wird auch den Benutzer dazu bringen anfälliger dafür, Ihren Text zu lesen weil sie eine Erklärung für das wollen, was die Abbildung vorgeschlagen, aber nicht explizit erzählt hat.

Eine Illustration einer Website-Benutzeroberfläche für eine Online-Lernplattform namens 'universitet'. Die Seite verfügt über ein Raster-Layout, das verschiedene Kurs-Karten anzeigt, darunter 'Content Marketing' auf blaugrünem Hintergrund mit einer Computer-Illustration, 'Marketing Software' auf rosa Hintergrund mit einem Einkaufskorb, 'Sales Software' mit Kreditkarten-Grafiken und 'HubSpot Design' mit einer Schild-Grafik. Jede Karte enthält eine kurze Beschreibung und eine Schaltfläche 'Buy for $15'.

Außerdem wird es der Illustration gelingen, Dinge, die kaum umfassend sind, wie Emotionen und Stimmungen, durch Texte zu vermitteln. Jeder hat genug von Texten, die versuchen, Ihre Emotionen anzusprechen und Sie gleichzeitig darüber zu informieren, was sie bewirken, und zwar durch eine Liste vager Adjektive, gefolgt von Schlagwörtern und Handlungsaufforderungen.

Sag es nicht (nur), zeig es. Zeigen Sie diese Emotionen und Stimmungen durch Bilder, Formen und Farben.

Drei Onboarding-Bildschirmkarten für eine Fitness-App vor einem abstrakten rosa-violetten Hintergrund. Jede gelb-weiße Karte zeigt eine flache Vektorillustration einer Frau in einem rosa Oberteil und lila Leggings bei einer Outdoor-Aktivität. Die erste Karte zeigt sie beim Gassigehen mit einem Golden Retriever, mit der Überschrift „A new start. Everyday.“. Die zweite Karte zeigt sie beim Laufen, mit der Überschrift „Activity tracker.“. Die dritte Karte zeigt sie auf einem roten Fahrrad, mit der Überschrift „Keep moving.“. Jede Karte enthält einen kurzen Beschreibungstext und eine „NEXT“-Schaltfläche unten rechts.
blue arrow to the left
Imaginary Cloud logo

Spiele alles zusammen

Lassen Sie Ihre Typografie und Farben in Bildern richtig zur Geltung kommen, die den Betrachter an einen anderen Ort, eine andere Denkweise, einen glücklichen Ort entführen, an dem seine Probleme durch Ihr Produkt gelöst werden.

Eine Illustration auf einer Landingpage für „FRIEND.finder“. Auf der linken Seite steht ein dunkelblauer Text mit der Aufschrift „Share your smile with the world and find friends“, darunter ein kleinerer Text und eine Schaltfläche „Get started“. Auf der rechten Seite fährt ein blonder Mann auf einem hellblauen Fahrrad und blickt zurück zu einer schwarzhaarigen Frau, die einen kleinen schwarzen Hund an der Leine führt. Der Hintergrund ist weiß mit minimalistischen, farbenfrohen abstrakten Formen und grünen Pflanzen.

Ihre Times New Roman wird nicht mehr nur eine einfache Serifenschrift sein, sie wird Teil von etwas Größerem sein, das die Ernsthaftigkeit und Zuverlässigkeit einer Zeitungsserife verkörpert und gleichzeitig alle Ideen und die Identität Ihres Produkts vermittelt.

Ein Nebeneinander-Vergleich von zwei Webseitendesigns mit markanter Typografie und Illustrationen. Auf der linken Seite zeigt ein Adobe-Blogbeitrag mit dem Titel „Introducing Spectrum: How Adobe Is Building a Design System at Scale“ einen klaren Serifentext über einer minimalistischen Vektorillustration von blauen und grauen Figuren, die digitale Schnittstellen aufbauen. Auf der rechten Seite zeigt die Everwill-Homepage den Text „Attorney-Crafted Wills & Trusts from the Comfort of Your Home“ in einer dunklen Serifenschrift, untermalt von einer warmen, texturierten Illustration einer versammelten Familie über mehrere Generationen hinweg.

Farben werden an Gewicht und Bedeutung gewinnen und nicht mehr nur abstrakt und vage sein. Sie werden in einem Szenario, in dem der Benutzer zufrieden ist, einen Zweck erfüllen.

blue arrow to the left
Imaginary Cloud logo

Erzähle eine Geschichte

Gute Illustrationen führen Ihren Betrachter beispielsweise durch eine Erzählung, einen Denkprozess oder sogar ein Tutorial und lassen die Seite gleichzeitig atmen, um Ihren Nutzer nicht mit Informationen zu überfluten.

Diese Abbildungen können auch das Produkt selbst darstellen. Wenn Sie beispielsweise das Gefühl haben, dass ein Printscreen Ihres Produkts zu viele Informationen für eine Landingpage enthält, scheuen Sie sich nicht, eine minimalistische Darstellung zu zeigen, die vermittelt, was das Produkt bewirkt. So vermeiden Sie mit Sicherheit, dass Sie Ihre Nutzer nicht überfordern.

Eine flache Vektorillustration von drei Personen, die gemeinsam an der Erstellung oder Anpassung einer Website-Benutzeroberfläche arbeiten. Eine Person steht auf einer Leiter und streicht mit einer Farbwalze ein großes Browserfenster mit Codezeilen, eine andere steht auf einem riesigen Dokument ebenfalls mit einer Walze, und eine dritte fügt einem Seitenmenü ein Häkchen hinzu. Die Szene verwendet eine lebendige Farbpalette aus Blau, Lila, Rosa und Orange mit stilisierten Bäumen und Bergen im Hintergrund.

Dies ist eine Technik, die beispielsweise für schrittweise Tutorials und Onboardings effizient eingesetzt werden kann. Konzentrieren Sie sich auf die Funktion, die Sie Ihrem Benutzer vorstellen möchten. Oder auf die Art und Weise, wie die Funktion in einem realen Kontext verwendet wird — mit anderen Worten, es zeigt, wie der Benutzer mit dem Produkt interagiert. Sie könnten sogar so weit gehen, Animationen zu verwenden.

HTTPS://DRIBBBLE.COM/SHOTS/2851448-NOOKLYN-ONBOARDING

Sicher, Sie können einfach einen normalen Lader mit einer sich drehenden Animation haben, aber wie wäre es, diese Zeit zu nutzen, um eine Botschaft zu vermitteln? Es könnte ein Tipp sein, wie man bestimmte Funktionen nutzt, wie“wusstest du, dass...?„, oder einfach nur eine unterhaltsame Animation, die Ihrem Benutzer nicht das Leben langweilen wird. Es könnte das Entscheidende oder Unterfangen bestimmter Interaktionen innerhalb Ihres Produkts sein, da die Leute nicht gerne warten.

Ein iPhone, das die Benutzeroberfläche einer mobilen App mit einer leeren Statusseite anzeigt. Der Bildschirm zeigt eine Illustration einer Frau, die einen blauen Schuh hochhält, unter einer Schaltfläche "Quick sale". Unter der Illustration lautet der Text "Add your first product" und "Tap the + icon to add a product to your inventory."
blue arrow to the left
Imaginary Cloud logo

Hören Sie einfach auf, Stockfotos zu verwenden

Natürlich wird nichts davon billig sein, da eine gute Veranschaulichung einige Zeit in Anspruch nimmt. Eine Alternative innerhalb einer illustrativen Lösung wäre die Verwendung von Standardmaterial, aber hier entgehen Ihnen Spezifität und Identität. Ihre Illustrationen sollten Ihre Prinzipien und ästhetischen Werte widerspiegeln.

Eine andere Alternative wäre, Gemälde wie Stockfotografie zu verwenden, mit dem zusätzlichen Vorteil, dass Sie grafisch mit ihnen herumspielen und interessante Bilder erstellen können, die unterstreichen, worum es bei Ihrer Marke geht. Es gibt viele Bibliotheken mit kostenlos nutzbaren Gemälden, von der Renaissance bis zur modernen Kunst.

Drei Paneele zeitgenössischer digitaler Kunstwerke, die klassische Skulpturen mit modernen Grafiken verschmelzen. Links zeigt ein Steingesicht mit lila Glitch-Linien; in der Mitte ein dunkles Porträt mit einem farbenfrohen, flüssigen Marmor-Overlay; rechts ist eine weibliche Statue zu sehen, die durch horizontale Balken mit Blumenmuster segmentiert ist.

Man könnte sagen, dass dies keine Illustrationsarbeit ist, aber ich würde diese Lösung als eine Mischung aus Fotografie und der Verwendung von Kunst zur Vermittlung von Ideen und Stimmungen betrachten. Es ist möglich, dass die Beschreibung Ihrer Dienste oder Funktionen nicht so spezifisch ist, aber es könnte eine neue Alternative sein.

Ein Screenshot eines Desktop-Webbrowsers, der die Landingpage der Website „The Fine Wine Embassy“ zeigt. Der Hintergrund zeigt ein klassisches, detailreiches Stillleben im Barockstil, das ein üppiges Festmahl mit einem Hirsch, einem Hummer auf einem Teller, einem Pfau, verschiedenen Früchten wie Weintrauben und Äpfeln sowie anderem Wild darstellt. Eine große, stilisierte weiße Serifenschrift in der Mitte lautet „the fine wine embassy“, darunter sind die Sprachoptionen für Deutsch, Englisch und Serbisch aufgeführt.

Eine Alternative zu den gleichen alten Stockfotos von Laptops und Smartphones auf Designey-Holztischen, die sich so gut wie kein gewöhnlicher Mensch leisten kann. Es ist nicht mehr glaubwürdig, es ist übertrieben.

Das soll nicht heißen, dass Illustration etwas Neues ist, aber es gibt definitiv viel mehr Raum, um verschiedene Ausdrucks- und Informationsmöglichkeiten zu erkunden und gleichzeitig die Identität Ihrer Marke zu stärken.

Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Maria Grilo
Maria Grilo

Ich bin UI- und Produktdesigner, Illustrationskünstler und Maler. Bekannt für meine Liebe zu trashigen Strandtüchern, Musikproduktion, Typografie und allen Arten von Pizza.

Read more posts by this author

People who read this post, also found these interesting:

Dropdown caret icon