Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Illustration (Webdesign)

Definition: Illustration im Webdesign bezeichnet den gezielten Einsatz künstlerisch gestalteter Grafiken, Zeichnungen und visueller Erzählungen in digitalen Interfaces und Websites – als Alternative oder Ergänzung zur Fotografie mit dem Ziel abstrakte Konzepte zu visualisieren, Markenpersönlichkeit auszudrücken und emotionale Verbindungen zu Nutzern herzustellen. Illustrations-Einsatzbereiche: Hero-Bereiche (Startseite; Landingpages; Brand-Statement); Empty States (leere Listen, Nullergebnisse, Erste-Nutzung-Screens; freundliche Erklärung eines Zustands); Onboarding-Flows (Feature-Einführung; App-Erstnutzung); Erklärgrafiken (komplexe Services oder Prozesse visuell kommunizieren); Error-Pages (404, 500; Fehler humorvoll abfedern); Illustrationsstile im Webdesign: Flat Design (flache Formen; keine Schatten; minimalistisch; durch Google Material Design 2014 und Apple iOS 7/2013 popularisiert); Isometrisch (3D-Wirkung ohne Perspektive; technische und SaaS-Kontexte); Hand-drawn (Skizzen-Optik; organisch; warm; persönlich; Handwerk und Kreativ-Brands); 3D-Illustration (Cinema4D, Blender; hohe Produktionskosten; stark differenzierend; seit 2019 wieder populär); Character-Illustration (Brand-Charaktere; Maskottchen; stärkste Markenidentität). Technische Implementierung: SVG für lineare Illustrationen (skalierbar; CSS-anpassbar; klein); PNG/WebP für komplexe Raster-Illustrationen; Lottie-JSON für animierte Illustrationen (Bodymovin-Export aus Adobe After Effects); Accessibility: informationale Illustrationen benötigen alt-Text; dekorative Illustrationen alt="" oder aria-hidden="true"; animierte Illustrationen müssen prefers-reduced-motion respektieren.

Erläuterung

Die Geschichte der Web-Illustration ist eng mit dem Paradigmenwechsel von Skeuomorphismus zu Flat Design verknüpft. Skeuomorphismus (griech. skeuos = Behälter/Werkzeug; morphe = Form) als Design-Prinzip – digitale Interfaces imitieren physische Texturen und Objekte – dominierte Apple-Interfaces unter Steve Jobs und Scott Forstall (iOS 1–6; 2007–2012): Leder-Nähte in der Kalender-App, Holzregale in iBooks, grüner Filz im Game Center. Jony Ive und Craig Federighi revolutionierten Apple-Design radikal mit iOS 7 (2013) und OS X Yosemite (2014): konsequentes Flat Design, Transparenz, Tiefe durch Bewegung statt Textur – dieser Wandel prägte in wenigen Jahren die gesamte Webdesign-Industrie. Google Material Design (2014; Matias Duarte als Design-Lead; «Design Language for a Post-Skeuomorphic World») kodifizierte Flat Design mit physischen Metaphern (Papier-Layering, Schatten, Elevation) und beeinflusste Milliarden von Android-Interfaces. Die Renaissance der expressiven Illustration als Brand-Differenzierungsmittel begann circa 2015–2017 als Unternehmen erkannten dass generische Flat-Design-Illustrationen aus Bibliotheken wie IconFinder oder iStock austauschbar geworden waren. Mailchimp (Ben Chestnut und Dan Kurzius; Atlanta; GA; gegründet 2001; IPO-Verzicht; 2021 Intuit-Akquisition für 12 Milliarden USD) war einer der ersten SaaS-Pioniere die einen eigenen unverwechselbaren Illustrationsstil entwickelten: illustrierte Charaktere mit Tintenlinien, lebhaften Farben und organischen Formen wurden zum Kern der Mailchimp-Marke und sind in branchenweit zitierten Studien über Brand-Recall belegt. Slack (Stewart Butterfield; Vancouver; BC; gegründet 2013; börsennotiert 2019; Salesforce-Akquisition 2021 für 27,7 Milliarden USD) nutzte unter Creative Director Stewart Scott-Curran ein ähnliches illustratives Marken-System das abstrakte Team-Kommunikation durch warme, Menschen-zentrierte Illustrationen emotional zugänglich machte. Katerina Limpitsouni (Athen; Griechenland) schuf 2018 Undraw (undraw.co) als erste große Open-Source-Illustration-Bibliothek mit anpassbarer Primärfarbe via URL-Parameter – über 1.000 SVG-Illustrationen, kostenlos nutzbar, täglich neue Illustrationen; Undraw wurde zu einer der meistgenutzten Ressourcen für Startups und Bootstrapper. Lottie (Airbnb Design Team; San Francisco; entwickelt ab 2017 von Brandon Withrow, Gabor Варга und Nick Bunyun; benannt nach Charlotte «Lottie» Reiniger der deutschen Animationsfilm-Pionierin 1899–1981) schuf das JSON-basierte Animationsformat das Adobe-After-Effects-Animationen als kleine JSON-Dateien ins Web bringt: wo ein GIF 2 MB für eine 3-Sekunden-Animation benötigt, leistet Lottie-JSON dasselbe mit 50 KB – ein 40×-Größenunterschied der mobile Performance revolutionierte. LottieFiles (Kuala Lumpur; Malaysia; gegründet 2017) wurde zur zentralen Plattform mit über 300.000 free Lottie-Animationen.

Illustrationsstile, Brand-Illustration-Systeme und Stilkonsistenz

SVG-Optimierung, Lottie-Animation und Accessibility

Praxistipp: Bevor Sie eine teure Custom-Illustration in Auftrag geben, klären Sie ob Ihr Einsatzzweck ein einmaliges Bild oder ein konsistentes System erfordert. Ein einzelnes Hero-Bild kann mit Undraw oder Storyset schnell und kostengünstig gelöst werden – aber wenn Sie Illustrations-Elemente in mehreren Kontexten (Onboarding, Empty States, Fehlermeldungen, Marketing-Materialien) brauchen, lohnt sich die Investition in ein eigenes Illustrations-System mit definierten Farben, Strichstärken und Kompositions-Regeln. Dann ist das 3–5-fache Budget für Custom-Illustration gerechtfertigt weil es langfristig Markenkonsistenz und Wiedererkennbarkeit aufbaut die mit Bibliotheks-Illustrationen nicht erreichbar ist.