ILLUSTRATIONEN

Overview

Illustrationen sind visuelle Elemente, die dazu dienen, Konzepte zu klären, Nutzer zu führen und die Benutzerfreundlichkeit sowie Vertrauenswürdigkeit von Interfaces zu erhöhen. Ihre Funktion ist es, Informationen zu vereinfachen, Orientierung und Feedback zu geben (Onboarding, Fehler, Empty States) und niemals zu dekorieren oder abzulenken.

Ziele:

• Komplexe Ideen schnell und effektiv kommunizieren.
• Die User Experience durch visuellen Kontext verbessern.
• Markenkonsistenz über alle Touchpoints hinweg wahren.
• Barrierefreiheit unterstützen, indem Textinformationen ergänzt werden.
• Die Aufmerksamkeit der Nutzer auf wichtige Bereiche oder Aktionen lenken.

Guidelines

Einsatzgrundsätze

Bevor du eine Illustration einsetzt, stell dir drei Fragen:​

• Erhöht sie die Verständlichkeit der Botschaft für die Nutzer:innen?
• Ist sie für alle Zielgruppen geeignet?
• Unterstützen Illustration und Text sich gegenseitig?

Setze eine Illustration nur ein, wenn im Layout (z. B. in einem Empty State oder einer Card) genug Platz vorhanden ist, um sie gut lesbar darzustellen. Andernfalls verlässt du dich ausschließlich auf den Text.​

👍 Do

👎 Don't

broken_image • Orientierung & Navigation: Um Nutzer:innen zu helfen, ihren Status im Prozess zu verstehen oder die nächsten Schritte zu erkennen. Beispiel: Als Unterstützung in Cards, um Verfahren wie „Steuern“, „Haustiere“, „Umzug“ klar zu unterscheiden. • Guidance & Feedback: Um Hinweise zu verstärken, Erfolg zu bestätigen oder wichtige Informationen hervorzuheben. • Fehler- & Leerzustände: Um Situationen zu erklären, Frustration zu reduzieren und klare nächste Schritte zu unterstützen.

broken_image • Wenn sie zentrale Anleitungen, rechtliche Informationen oder verbindliche Hinweise ersetzen würden. Illustrationen dürfen Inhalte nur unterstützen, niemals ersetzen. • Wenn sie nur dekorativ sind und keinen funktionalen oder informativen Mehrwert bieten. • Wenn sie das Interface überladen oder von primären Aktionen/Entscheidungen ablenken. • Wenn du sie als Logo oder UI Icon benutzen würdest. Illustrationen sind keine Logos und keine Icons.

Visuelle Foundations

Allgemeiner Illustrationsstil

Diese Prinzipien definieren den generellen Illustrationsstil im Mate Design System. Sie stellen Konsistenz, Klarheit und Markenkohärenz sicher.​

1. Konzeptionelle Klarheit
   
   • Sei direkt: Jede Illustration soll eine einzige klare Idee transportieren und Nutzer:innen helfen, Inhalte schnell zu erfassen und kognitive Last zu reduzieren.​
   • Priorisiere Einfachheit: Halte Kompositionen schlicht, fokussiert und auf einen Blick erfassbar.​
2. Inklusivität und globale Verständlichkeit
   
   • Illustrationen sollen einladend, universell und möglichst neutral wirken.​
   • Nutze allgemein verständliche Metaphern und vermeide kulturell oder regional spezifische Icons, Gesten oder Referenzen.​
3. Minimalistischer Look
   
   Der Stil ist klar, modern und stellt Klarheit vor Dekoration.​
   
   • Line-basierter Stil: Die Grundlage sind präzise, konsistente Linienzeichnungen.​
   • Zweckgerichtete Details: Nutze Details nur, wenn sie das Objekt oder Konzept verständlicher machen. Alles was keine Bedeutung trägt, lässt du weg.​
   • Keine Fotografie: Kombiniere Illustrationen nicht mit Fotos, Texturen oder fotorealistischen Elementen.​
4. Ton und Stimme
   
   • Illustrationen sollen optimistisch, zugänglich und menschlich wirken.​
   • Vermeide Stile, die zu technisch, steril oder kindlich wirken.​
5. Form & Perspektive
   
   • Halte eine konsistente, flache (2D), frontale Perspektive ein.​
   • Nutze durchgängig einen konsistenten Linienstil; Variationen im Linienstärke setzt du nur gezielt zur Betonung ein.​
   • Meide 3D, isometrische oder komplexe Perspektiven, außer sie werden explizit vom System vorgegeben.​
6. Brand-Konsistenz
   
   • Illustrationen sind eine Erweiterung der Mate‑Marke. Verwende ausschließlich die definierten Farbpaletten und stelle sicher, dass Motive zu den Kernwerten und Themen von Mate passen ( siehe Colors Guidelines ).​

Aufbau und Formensprache

1. Linienführung

Saubere, konsistente Linienführung ist die Basis des Stils.​

• Nutze eine primäre Strichstärke von 1,5 px für Hauptelemente bei Illustrationsgröße M (180x180 px) . Für Size S (80x80 px) bleibt die Strichstärke bei 1 px , für Size L (380 px) bei 3 px . Illustrationen außerhalb dieser Größen skalieren die Strichstärke proportional auf Basis der Referenzgröße M.
• Caps & Joins: Verwende immer runde Linienenden (Round Caps) und runde Ecken (Round Joins), um harte, „scharfe“ Kanten zu vermeiden.​
• Strichstil: Linien sind immer durchgezogen (solid). Strukturierte, gestrichelte oder texturierte Linien verwendest du nicht.​

2. Formen

Illustrationen bauen auf einfachen geometrischen Formen auf, die zu organischen, menschlichen Formen weiterentwickelt werden.​

• Geometrische Basis: Starte jedes Objekt mit Grundformen wie Kreis, Quadrat oder Dreieck, um eine konsistente Struktur sicherzustellen.​
• Abgerundete Ecken: Kanten von Formen haben immer abgerundete Ecken, mit einem Mindest‑Radius von 2 px.​
• Organische Formen: Runde harte Kanten ab und kombiniere Formen, um weichere, natürliche Silhouetten zu erzeugen. Strikt „perfekt“ geometrische Objekte nutzt du nur, wenn es das Konzept verlangt (z. B. Kristall).​

3. Hintergründe

Hintergründe rahmen die Illustration und konkurrieren nie mit dem Motiv.​

Allgemeine Prinzipien:​

• Hintergrundformen sind rein funktional und sollen das Motiv visuell einbetten, nicht dominieren.
• Der Hintergrund besteht aus genau einem, klaren Kreis (oder einem abgetrennten Kreisausschnitt), der das Motiv trägt.​
• Hintergrundfarben verwenden ausschließlich definierte Farb‑Tokens für Light und Dark Mode. Abweichungen sind Ausnahmen und müssen vom Design‑System‑Team freigegeben werden.​

Hintergründe Formen:​

Mate-Illustrationen verwenden ausschließlich zwei Hintergrundformen: den vollständigen Kreis und den angeschnittenen Kreis. Die gewählte Form soll die Metapher der Illustration unterstützen: schwebend oder verankert.

Vollständiger Kreis — schwebend

Für abstrakte, konzeptionelle oder nicht verankerte Inhalte verwenden (z. B. Cloud-Elemente, Dokumente, System- oder Error-States).

Die geschlossene Form löst das Motiv visuell vom UI und verstärkt so den Eindruck des Schwebens.

Angeschnittener Kreis — verankert

Für Motive verwenden, die physisch verankert wirken sollen (z. B. Gebäude, Fahrzeuge oder Objekte, die auf einer Fläche stehen).

Die flache Unterkante erzeugt eine visuelle Basislinie und verankert die Illustration im Layout.

Padding & Safe Zone: ​

• Halte den Abstand zwischen Motiv und Hintergrundform konsistent.
• Respektiere immer die definierte Safe Zone aus dem Grid‑ und Layout ‑Kapitel.

Menschliche Figuren

Um inklusiv zu bleiben, sind Personen stark stilisiert.​

• Wenn möglich vermeiden: Nutze lieber Objekte und Metaphern als Menschen. Greife auf Figuren nur zurück, wenn das Konzept ohne Person nicht verständlich wäre.​
• Proportionen: Verwende bewusst stilisierte Proportionen (z. B. leicht größere Köpfe oder Oberkörper) und halte diese konsistent innerhalb der Bibliothek.​
• Vereinfachte Gesichtszüge: Zeichne keine detaillierten Gesichter. Stimmung und Aktion vermittelst du über Körperhaltung und Kontext.​

Farben

Dieses Kapitel beschreibt, wie du Mate‑Farb‑Tokens in Illustrationen einsetzt. Alle Farben sind so definiert, dass sie in Light und Dark Mode korrekt funktionieren.​

Farb‑Tokens (verpflichtend)

• Verwende ausschließlich Mate‑DS‑Farb‑Tokens .
• Jeder Token hat einen definierten Zweck (z. B. Stroke, Fill, semantischer Akzent) und muss entsprechend eingesetzt werden.​
• Primärpalette zuerst: Blautöne der Primärpalette dominieren den Illustrationsstil.​
• Neue Farben sind Ausnahmen und müssen aus bestehenden Basis‑Tokens abgeleitet und durch das Design‑System‑Team freigegeben werden.​

Farbeinsatz

• Strichfarbe: Nutze ausschließlich den vorgesehenen Stroke‑Token.​
• Flächen: Verwende flache Volltonflächen. Keine Verläufe, Schatten, Texturen oder Mischfarben.​
• Komplexität begrenzen: Nutze pro Hauptelement max. fünf unterschiedliche Fill‑Tokens (Stroke nicht mitgerechnet).​
• Barrierefreiheit: Achte auf freigegebene Token‑Kombinationen, damit Kontraste in allen Themes ausreichend bleiben.​

Akzent‑ und Semantikfarben

Nutze Accent‑Farben (Warnung, Fehler, Erfolg etc.) sehr sparsam.​

• Semantischer Einsatz: Verwende Semantik‑Tokens nur, wenn sie tatsächlich Bedeutung transportieren (z. B. Error‑State, Warnung oder essentielle natürliche Elemente wie Grün für Natur, wenn freigegeben).​
• 10 %-Regel: Semantische Farbbereiche sollen in Summe höchstens ca. 10 % der farbigen Fläche einnehmen. Die primäre Blau/Neutral‑Palette bleibt dominant.​
• Single Focus: Setze die Akzentfarbe auf ein klar erkennbares Fokuselement.​
• Keine dekorative Nutzung: Verwende semantische Farben nie nur zur Dekoration, um falsche System‑Signale zu vermeiden.​
• Ein Token pro Bedeutung: Nutze immer den definierten Semantik‑Token (z. B. color-semantic-warning) und erzeuge keine eigenen Tints oder Shades.​

Größen

Die Illustrations‑Bibliothek ist in drei Größen (S, M, L) organisiert. Alle Größen haben ein 1:1‑Seitenverhältnis.​

Skala	Größe (px)	Use Case Empfehlung
S (Small)	40 × 40 – 80 × 80	Kleine unterstützende Illustrationen in kompakten UIs, z. B. mobile Cards. Geeignet für kleine Komponenten, bei denen der Platz begrenzt ist, zum Beispiel für mobile Cards.
M (Medium)	96 × 96 – 256 × 256	Standardgröße für die meisten Produktillustrationen. Ideal bei mittlerem Platzangebot, zum Beispiel für Modal-Dialoge, Widgets oder Mobile Error Seite.
L (Large)	300 × 300 – 512 × 512	Wird verwendet, wenn Illustrationen eine stärkere visuelle Präsenz benötigen. Empfohlen für Desktop-Layouts, z. B. für Full-Width-Sektionen, Empty States oder Feature-Einführungen.

Hinweise zur Verwendung:​

• Die Größe bestimmst du immer anhand des Einsatzkontexts und der Komponentengröße.
• M ist der Standard und sollte bevorzugt werden, solange Platz und Kontext es erlauben.
• Illustrationen passen sich responsiv an Layout und Gerät an; vermeide starre Skalierung über Breakpoints hinweg.
• In Mobile‑First‑Szenarien nutzt du primär M und S.​

Komposition & Detailgrad

Passe den Detailgrad an die Größe an, um Lesbarkeit zu sichern.​

• Kleine Skala (S):
  
  • Verwende nur die primäre Strichstärke (empfohlen 1 px) und einfache Formen.
  • Keine sekundären Strichstärken.
  • Entferne alle nicht essenziellen Details.​
• Skalierung zwischen Größen:
  
  • Skaliere nicht nur proportional.
  • Wenn du von M → S oder umgekehrt wechselst, reduzierst du Details und passt Abstände an, damit die Illustration auf der Zielgröße klar bleibt.​
• Exportgrößen:
  
  • Endgrößen sollen Vielfache von 4 oder 8 Pixeln sein, um ein sauberes Raster zu gewährleisten.​
    broken_image
    Figma

Skala

Grid und Layout

Konstruktionsraster

• Base Grid: Baue Illustrationen auf einem 2‑px‑Raster. Alle wesentlichen Abstände, Größen und Positionen liegen auf Vielfachen von 2 px.​
• Bounding Box & Canvas: Die Illustration liegt in einer klar definierten Bounding Box, die den Größen aus dem Kapitel „Size“ entspricht. Der Canvas folgt der „Vielfaches von 4 oder 8“‑Regel.​
• Zentrische Ausrichtung: Richte die Illustration auf den Mittelpunkt der Bounding Box/Canvas aus – sowohl optisch als auch geometrisch.​

Seitenverhältnis & Skalierung

• Halte das ursprüngliche Seitenverhältnis immer bei. Verzerrungen durch Strecken oder Stauchen sind nicht erlaubt.​
• Bevorzugt: 1:1 (Quadrat) für maximale Flexibilität in runden und quadratischen Containern.​
• Erlaubte andere Formate (z. B. 4:3, 3:2, 16:9), wenn der Kontext das verlangt.​
• Prüfe Lesbarkeit bei der minimalen Zielgröße (z. B. 80 × 80 px oder kleiner).​

Container & Safe Zone

• Illustrationen können innerhalb eines Containers (z. B. Kreis, gerundetes Rechteck) angezeigt werden, der sich von der Bounding Box unterscheidet.​
• Passe bei Bedarf das Padding oder einen definierten Crop‑Bereich an, statt das Artwork zu verzerren.​
• Halte mindestens 8 px Abstand (Safe Zone) zwischen Illustration und innerer Kante der Bounding Box, damit Linien nicht „anschlagen“, insbesondere in S‑Größe.​

Keyline

• Eine Keyline (Outline) ist für alle grundlegenden und wesentlichen Elemente verpflichtend. Vermeide Formen, die sich nur über Farbe definieren (reine Füllungen ohne Linie).​
• Linienunterbrechungen folgen der Hierarchie: Vordergrundobjekte überlagern den Hintergrund. Der Stroke des Hintergrundes‑Kreises wird an Überlappungen entfernt, damit Tiefe ohne Schatten entsteht.​
  broken_image
  Figma

Grid und Layout vollständiger Kreis

broken_image

Figma

Grid und Layout abgeschnittener Kreis

Library & technische Spezifikationen

Illustration Library Figma

• Single Source of Truth: Alle offiziellen Illustrationen werden in der Mate Illustrations Library gepflegt.
• Nutzung: Füge Illustrationen immer als Figma‑Komponenten ein. Kopiere oder detachst du sie, verlierst du die Versionskontrolle.​
• Anpassungen: Kleinere Anpassungen (z. B. Farbe, kleine Objekte) sind möglich, solange sie die Regeln zu Formen, Linien und Farben nicht verletzen. Verstöße müssen vor einer Wiederaufnahme in die Library vom DS‑Team geprüft werden.​

Technische Anforderungen

• Format: Standard ist SVG.​
• Performance: SVGs müssen schlank sein – entferne ungenutzte Layer, vereinfache Pfade und lösche Editor‑Metadaten.​
• Raster‑Fallback: PNG ist nur erlaubt, wenn SVG technisch nicht unterstützt wird. Exportiere Raster‑Assets immer in 2× oder 3× Auflösung.​

DEV HINWEIS

In der Entwicklung können die vom mateDS bereitgestellten Illustrationen über dedizierte zur Verfügung gestellte Komponenten eingefügt werden, die zentral vom mateDS Entwicklungsteam gepflegt werden.

Illustrationen-Anfrage

In diesem Abschnitt erfährst du, wie du eine neue Illustration anforderst, wenn dein Bedarf nicht durch bestehende Bibliotheks‑Komponenten oder deine eigene Kapazität abgedeckt werden kann.

Anfrage-Prozess

Alle Anfragen für neue Illustrationen laufen über den offiziellen Prozess zum Anforderungen einreichen .

• Zweck-Prüfung: Bevor du ein neues Ticket anlegst, prüfst du die bestehende Illustrations‑Bibliothek. Stelle sicher, dass sich dein Bedarf nicht durch Kombination, Umfärbung oder Anpassung bestehender Komponenten lösen lässt. Neue Illustrationen sind nur für wirklich neue Metaphern oder unverzichtbare semantische Use Cases gedacht.
• Geltungsbereich: Dieser Prozess gilt für systemweite Illustrationen, die in die offizielle Komponenten‑Bibliothek aufgenommen und in mehreren Produkten wiederverwendet werden.

Inhaltliche Anforderungen an deine Anfrage

Dein Jira‑Ticket muss genügend Kontext und Details enthalten, damit das DS‑Team Umfang und Lösung klar einschätzen und die Illustration gezielt gestalten kann.

• Use Case: Beschreibe klar, wo und in welchem Kontext die Illustration eingesetzt wird (z. B. „Empty State im Haupt‑Dashboard“, „Onboarding‑Screen für ein neues Feature“, „Error‑Modal bei einem API‑Fehler“).
• Konzept/Metapher: Formuliere die Kernidee, die vermittelt werden soll (z. B. „Datensicherheit – eine geschützte Cloud“, „Zusammenarbeit – zwei Hände, die ein Dokument übergeben“). Wenn du bereits eine visuelle Vorstellung hast, füge ein Low‑Fidelity‑Scribble oder ein Moodboard als Referenz hinzu.
• Erforderliche Größe: Gib die primäre benötigte Scale (S, M, L oder XL) an – basierend auf den Definitionen im Abschnitt „General Style: Size“. Wenn du ein spezielles Seitenverhältnis brauchst (z. B. 16:9 für ein Banner), begründe kurz, warum es notwendig ist.
• Farb-Anforderungen: Notiere alle notwendigen Akzentfarben und beziehe dich dabei auf die „ Colors “‑Dokumentation (z. B. „Benötigt den grünen Success‑Token als primären Akzent“).

Contribution

Neben dem regulären Anfrage‑Prozess kannst du auch über Contribution neue Illustrationen in Mate DS einbringen.

Unser Design System verfügt dafür bereits über einen klar definierten Prozess .

Die endgültige Entscheidung, ob eine neue Illustration aufgenommen wird oder ob Anpassungen nötig sind, liegt immer beim Design‑System‑Team, das die Konsistenz mit unserem visuellen Stil und unseren Richtlinien sicherstellt.

Barrierefreiheit

Allgemeine Prinzipien

• Illustrationen sind immer ergänzend und nie alleiniger Informationsträger.​
• Keine reine Bildkommunikation: Jeder Prozess‑ oder Statuswechsel braucht eine klare Textbeschreibung oder Statusmeldung, zusätzlich zur Illustration.​
• Unterstützende Rolle: Illustrationen bestätigen, verdeutlichen oder ergänzen, ersetzen aber nie die Text‑Bestätigung von Erfolg, Fehler oder Status.​
• Kognitive Klarheit: Verzichte besonders in Fehlersituationen auf Humor, übermäßig abstrakte oder mehrdeutige Metaphern, um Frustration und Verwirrung zu vermeiden.​
• Fokus: Stelle sicher, dass Illustrationen nicht von primären Interaktionen (Buttons, Links, Formularfeldern) ablenken – weder visuell noch technisch (z. B. durch Fokus‑Reihenfolge).​

Alt‑Text‑Richtlinien

Alternativtexte sind Pflicht, sobald eine Illustration für Screenreader relevant ist.​

Form & Länge:​

• Halte Alt‑Texte kurz und präzise, idealerweise unter ca. 125 Zeichen, da einige Screenreader längere Texte abschneiden.

Wann du welchen Alt‑Text verwendest:​

• Informativ: Wenn die Illustration zusätzliche Informationen liefert, die nicht im Text stehen, nutzt du einen beschreibenden Alt‑Text.
  
  Beispiel: „Lege dein Smartphone auf den Reisepass, um den Chip auszulesen.“
• Komplementär: Wenn die Illustration eine im Text beschriebene Situation nur visuell unterstützt (z. B. Empty State), nutzt du einen kurzen, ergänzenden Alt‑Text.
  
  Beispiel: „Illustration eines leeren Kalenders ohne kommende Termine.“
• Funktional: Wenn die Illustration eine Aktion oder Interaktion zeigt, beschreibst du die Aktion.
  
  Beispiel: „Illustration, die eine Drag‑and‑Drop‑Geste zum Hochladen von Dateien zeigt.“
• Dekorativ (Alt‑Text leer): Wenn die Illustration nur wiederholt, was direkt daneben steht, oder rein dekorativ ist, setzt du alt="", damit Screenreader sie überspringen.​
  
  Beispiel: Eine Illustration eines Steuerdokuments in einer Karte, deren Label bereits „Steuern“ lautet.