Icons und Vektorgrafik
Illustrationen auf Websites prägen den ersten Eindruck, erklären Zusammenhänge und geben digitalen Angeboten einen wiedererkennbaren Charakter. Sie können abstrakte Funktionen verständlich machen, komplizierte Abläufe visualisieren oder leere Zustände in einer Anwendung nachvollziehbar gestalten. Ihre Wirkung hängt jedoch nicht allein von der zeichnerischen Qualität ab. Entscheidend ist, ob Bildsprache, Inhalt und Markenidentität miteinander übereinstimmen.
Eine Illustration wirkt dann glaubwürdig, wenn ihre Gestaltung die Eigenschaften unterstützt, die eine Marke vermitteln möchte. Eine technische Plattform kann mit präzisen Formen, klaren Perspektiven und einer reduzierten Farbpalette Kompetenz ausstrahlen. Ein Bildungsangebot kann dagegen mit offenen Kompositionen, freundlichen Figuren und anschaulichen Details arbeiten. Beide Ansätze sind möglich, solange sie konsequent eingesetzt werden.
Fehlt diese Abstimmung, entsteht ein uneinheitlicher Auftritt. Unterschiedliche Strichstärken, wechselnde Perspektiven oder beliebig kombinierte Farben lassen eine Website schnell wie eine Sammlung einzelner Bildkäufe wirken. Besucherinnen und Besucher müssen dann bei jeder neuen Grafik die visuelle Logik neu entschlüsseln. Eine definierte Bildsprache reduziert diese Reibung und stärkt die Orientierung.
Für die Planung lohnt eine klare Trennung zwischen drei Aufgaben:
Diese Aufgaben können in einer Grafik zusammenfallen. Dennoch sollte vor der Gestaltung feststehen, welche davon im Vordergrund steht. Eine dekorative Illustration benötigt andere Details als eine Grafik, die einen Prozess Schritt für Schritt erklären soll.
Markenidentität besteht nicht nur aus Logo, Farben und Schrift. Sie umfasst auch Werte, Tonalität, Zielgruppenansprache und die Art, wie Informationen vermittelt werden. Für Illustrationen müssen diese eher abstrakten Merkmale in beobachtbare Gestaltungselemente übersetzt werden. Hilfreich ist ein kurzes Bildsprachenprofil, das für alle Beteiligten verständlich formuliert ist.
Am Anfang stehen drei bis fünf Eigenschaften, die der visuelle Auftritt vermitteln soll. Geeignete Begriffe können beispielsweise präzise, zugänglich, ruhig, progressiv oder menschlich sein. Anschließend wird für jeden Begriff beschrieben, wie er in einer Grafik sichtbar werden kann. Präzision kann sich in geometrischen Formen und sauber ausgerichteten Elementen zeigen. Zugänglichkeit lässt sich durch klare Kontraste, nachvollziehbare Gesten und eine begrenzte Detailtiefe unterstützen.
Auch Negativregeln sind wertvoll. Sie verhindern, dass die Bildsprache bei wechselnden Projekten auseinanderfällt. Solche Regeln können festlegen, dass keine realistischen Schatten verwendet werden, Perspektiven nicht wechseln oder Figuren nicht mit übertriebenen Gesichtsausdrücken dargestellt werden. Eine gute Dokumentation erklärt nicht nur, was erlaubt ist, sondern auch, warum bestimmte Entscheidungen getroffen wurden.
Für die Entwicklung einer Bildsprache bietet sich diese Reihenfolge an:
Die Beispiele sollten unterschiedliche Anwendungsfälle abdecken. Dazu gehören eine Inhaltsillustration, ein Symbol für einen leeren Zustand, eine kleine Hinweisgrafik und eine größere Einstiegsszene. Erst im Zusammenspiel zeigt sich, ob ein Stil tragfähig ist.
Die Formensprache beeinflusst, wie eine Illustration wahrgenommen wird. Runde Formen wirken häufig weich und einladend, während kantige Geometrien eher Präzision und Struktur vermitteln können. Diese Wirkung ist nicht absolut, weil Farben, Abstände und Kontext ebenfalls eine Rolle spielen. Trotzdem schaffen wiederkehrende Formprinzipien eine visuelle Verbindung zwischen einzelnen Grafiken.
Bei Linien sollten Strichstärke, Endungen und Ecken definiert werden. Eine Mischung aus sehr dünnen Konturen und kräftigen Umrissen kann gezielt eingesetzt werden, benötigt aber eine klare Hierarchie. Werden Linien ohne erkennbares System kombiniert, verlieren kleine Elemente an Lesbarkeit. Besonders bei Icons und Illustrationen, die auf mobilen Geräten dargestellt werden, müssen feine Details auf ihre Skalierbarkeit geprüft werden.
Figuren erfordern zusätzliche Entscheidungen. Dazu gehören Körperproportionen, Haut- und Haarfarben, Kleidung, Gestik und die Darstellung von Hilfsmitteln oder unterschiedlichen körperlichen Voraussetzungen. Eine vielfältige Darstellung sollte nicht als dekoratives Zusatzmotiv behandelt werden. Sie wirkt glaubwürdiger, wenn sie im gesamten Bildsystem selbstverständlich und konsistent vorkommt.
Gesichtsausdrücke und Körperhaltungen sollten zur Tonalität passen. Übertriebene Freude kann bei einem sensiblen Thema unangebracht wirken. Eine rein neutrale Darstellung kann dagegen bei einer motivierenden Anleitung leblos erscheinen. Der Kontext bestimmt, wie stark Emotionen visuell betont werden.
Für eine robuste Gestaltung helfen wiederverwendbare Bausteine:
Diese Bausteine beschleunigen spätere Anpassungen und verhindern, dass jede neue Illustration eine stilistische Einzelentscheidung wird.
Farben verbinden Illustrationen mit dem übrigen Erscheinungsbild einer Website. Die primären Markenfarben sollten jedoch nicht automatisch jedes Bildelement dominieren. Eine Illustration braucht eine eigene Hierarchie, damit wichtige Informationen erkennbar bleiben. Dafür kann eine Hauptfarbe als Akzent dienen, während neutrale oder abgeleitete Farbtöne den Hintergrund und weniger wichtige Objekte zurücknehmen.
Eine begrenzte Palette erleichtert die Wiedererkennbarkeit. Sie sollte neben Grund- und Akzentfarben auch helle und dunkle Varianten enthalten. Zu jedem Farbton gehört eine Beschreibung seiner Funktion. Beispielsweise kann ein kräftiger Ton für Handlungen und Schlüsselobjekte reserviert werden, während gedämpfte Flächen den Hintergrund bilden. Wird dieselbe Farbe zugleich für Warnhinweise, dekorative Elemente und positive Zustände verwendet, entsteht eine unklare Bedeutung.
Kontrast muss auf zwei Ebenen geprüft werden. Erstens müssen wichtige Formen innerhalb der Illustration voneinander unterscheidbar sein. Zweitens muss die gesamte Grafik ausreichend vom umgebenden Hintergrund abheben. Eine farblich attraktive Darstellung kann bei geringer Helligkeitsdifferenz unverständlich werden, insbesondere auf kleinen Bildschirmen oder bei ungünstigen Lichtverhältnissen.
Für die praktische Prüfung sind mehrere Ansichten sinnvoll:
Informationen sollten nicht ausschließlich über Farbe vermittelt werden. Ein Status kann zusätzlich durch Form, Position, Beschriftung oder ein Symbol erkennbar sein. Diese Redundanz verbessert die Verständlichkeit und unterstützt Menschen mit unterschiedlichen visuellen Voraussetzungen.
Die gleiche Illustration erfüllt nicht auf jeder Seite dieselbe Aufgabe. Auf einer Startseite kann ein großes Motiv die zentrale Aussage unterstützen. In einer Produktbeschreibung sollte es dagegen eine Funktion oder einen Nutzen erklären. In einer Fehlermeldung muss die Grafik die Ursache oder den nächsten Schritt ergänzen, statt die Aufmerksamkeit vom Hinweistext abzulenken.
Vor der Gestaltung sollte deshalb eine Inhaltsfrage beantwortet werden: Was soll nach dem Betrachten klarer sein als zuvor? Bleibt keine konkrete Antwort, spricht das für eine dekorative Funktion. Dekorative Bilder sind zulässig, benötigen aber eine zurückhaltende Platzierung und dürfen wichtige Inhalte nicht verdrängen.
Eine mögliche Zuordnung sieht so aus:
| Seitensituation | Geeignete Aufgabe der Illustration | Worauf zu achten ist |
|---|---|---|
| Einstiegsbereich | Kernthema und Tonalität vermitteln | Komposition auf die Hauptbotschaft ausrichten |
| Anleitung | Handlung oder Ablauf erklären | Reihenfolge und Blickführung eindeutig machen |
| Leerer Zustand | Situation einordnen und nächste Aktion unterstützen | Keine übertriebene Dramatik erzeugen |
| Fehlerhinweis | Problem verständlich begleiten | Text und Handlungshinweis priorisieren |
| Übersichtsseite | Bereiche oder Kategorien unterscheidbar machen | Wiederkehrende Motive konsistent nutzen |
Die Platzierung beeinflusst die Aussage. Eine Figur, die aus dem Bild in Richtung einer Schaltfläche blickt, kann die Aufmerksamkeit führen. Ein Motiv mit zentralem Detail benötigt dagegen ausreichend freien Raum und darf nicht von Überschrift oder Bedienelementen überlagert werden. Solche Entscheidungen sollten im Layout und nicht erst nach der fertigen Illustration getroffen werden.
Eine markengerechte Bildsprache verliert an Wirkung, wenn die technische Umsetzung langsam lädt oder auf kleinen Bildschirmen unbrauchbar wird. Vor dem Export muss daher feststehen, ob die Grafik als Rasterbild oder als Vektorgrafik benötigt wird. Vektoren eignen sich besonders für reduzierte Formen, Icons und Illustrationen, die in mehreren Größen ohne Qualitätsverlust erscheinen sollen. Rasterbilder können bei texturierten, malerischen oder sehr detailreichen Motiven sinnvoller sein.
Bei Vektordateien sollten nicht benötigte Pfade, versteckte Objekte und überflüssige Metadaten entfernt werden. Eine zu komplexe Datei kann die Darstellung und Wartung erschweren. Bei Rasterbildern sind geeignete Abmessungen und eine angemessene Kompression entscheidend. Große Originaldateien sollten nicht unverändert für mobile Ansichten verwendet werden.
Responsive Gestaltung bedeutet mehr als das proportionale Verkleinern. Eine breite Illustration kann auf einem schmalen Bildschirm wichtige Details verlieren. Deshalb können alternative Bildausschnitte oder vereinfachte Varianten erforderlich sein. Denkbar sind:
Auch Ladeverhalten und Rendering sollten geprüft werden. Bilder gehören nicht automatisch in den sichtbaren Bereich, und dekorative Motive müssen nicht dieselbe Priorität wie zentrale Inhalte erhalten. Für jede Datei sollten Dateiname, Alternativtext, Darstellungsgröße und Einsatzort dokumentiert werden. Eine geordnete Ablage verhindert, dass ältere oder unpassende Versionen in neue Seiten gelangen.
Bei animierten Illustrationen kommen zusätzliche Fragen hinzu. Bewegungen sollten einen nachvollziehbaren Zweck haben, nicht vom Inhalt ablenken und bei Bedarf pausierbar sein. Eine statische Fallback-Variante ist sinnvoll, wenn Animationen nicht geladen oder von Nutzenden reduziert werden.
Illustrationen müssen mit der Informationsstruktur der Seite zusammenarbeiten. Ist ein Bild rein dekorativ, sollte es nicht als inhaltlich relevante Information behandelt werden. Vermittelt es dagegen eine Aussage, muss diese auch in Textform oder über den umgebenden Inhalt zugänglich sein. Der Alternativtext beschreibt dabei nicht zwangsläufig jedes sichtbare Detail, sondern die Bedeutung, die für das Verständnis der Seite erforderlich ist.
Ein guter Alternativtext beantwortet je nach Kontext unterschiedliche Fragen. Bei einer erklärenden Grafik kann er den dargestellten Ablauf knapp zusammenfassen. Bei einem symbolischen Motiv reicht eine Beschreibung der Funktion. Enthält die Illustration bereits Text, darf dieser nicht durch eine vage Formulierung verloren gehen. Wiederholungen des direkt daneben stehenden Fließtexts sollten vermieden werden.
Farbkontraste wurden bereits als Gestaltungsthema genannt. Zusätzlich sollten Textflächen, kleine Symbole und interaktive Zustände separat geprüft werden. Eine Illustration darf die Bedienbarkeit nicht beeinträchtigen, etwa indem sie Schaltflächen überdeckt oder durch Bewegung den Fokus stört.
Für die Prüfung eignet sich folgende Abfolge:
Barrierefreiheit ist dabei kein nachträglicher Korrekturschritt. Wenn wichtige Informationen ausschließlich in einer Illustration untergebracht werden, lässt sich das Problem später oft nur mit zusätzlichem Aufwand beheben. Inhalt, Text und Grafik sollten daher bereits im Konzept gemeinsam geplant werden.
Ein klarer Freigabeprozess schützt vor inkonsistenten Einzelentscheidungen. Er sollte nicht nur die finale Datei bewerten, sondern auch die Passung zu Inhalt, Marke und Technik. Dafür kann jede Illustration anhand derselben Fragen geprüft werden:
Feedback sollte möglichst konkret formuliert werden. Die Aussage, ein Motiv wirke nicht passend, hilft weniger als die Beobachtung, dass die Perspektive von den bisherigen Grafiken abweicht oder der Akzentfarbton eine Bedeutung erhält, die im System für Warnungen reserviert ist. Solche Kriterien machen Überarbeitungen nachvollziehbar und reduzieren Geschmacksdiskussionen.
Ein kleines Referenzset erleichtert die Qualitätssicherung. Es kann aus wenigen freigegebenen Beispielen bestehen, die typische Figuren, Objekte, Kompositionen und Farbverwendungen zeigen. Neue Grafiken werden dagegen gehalten. Ergänzend sollte eine Änderungsdokumentation festhalten, wann eine Regel angepasst wurde und welche bestehenden Motive davon betroffen sind.
Bei mehreren Beteiligten ist eine zentrale Zuständigkeit für die Bildsprache sinnvoll. Das bedeutet nicht, dass eine Person jede Datei allein erstellt. Gemeint ist eine Stelle, die Regeln pflegt, Zweifelsfälle entscheidet und auf eine konsistente Anwendung achtet. Ohne diese Verantwortung wächst ein Gestaltungssystem häufig unbemerkt in verschiedene Richtungen.
Eine feste Anzahl lässt sich nicht allgemein bestimmen. Entscheidend ist, ob die Stile durch gemeinsame Regeln verbunden sind. Unterschiedliche Varianten können für verschiedene Themenbereiche funktionieren, wenn Farben, Linien, Perspektiven oder Kompositionsprinzipien eine erkennbare Klammer bilden. Für kleine Websites ist ein klar definierter Grundstil meist wartbarer als mehrere unabhängige Richtungen.
Nein. Eine Illustration kann die Markenfarben gezielt als Akzent einsetzen und zusätzliche neutrale oder abgeleitete Töne nutzen. Wichtiger als die vollständige Farbübernahme ist eine nachvollziehbare Rollenverteilung. Farben sollten nicht gleichzeitig mehrere widersprüchliche Bedeutungen tragen und müssen gemeinsam mit Kontrast und Lesbarkeit bewertet werden.
Illustrationen eignen sich besonders, wenn ein abstrakter Vorgang, eine zukünftige Funktion oder ein einheitliches Szenario dargestellt werden soll. Sie erlauben eine kontrollierte Auswahl von Perspektive, Details und Diversität. Fotos können dagegen glaubwürdiger sein, wenn eine reale Umgebung, ein tatsächliches Produkt oder eine konkrete Person im Mittelpunkt steht. Die Entscheidung sollte vom Kommunikationsziel und nicht vom Stiltrend abhängen.
Mehrere Motive werden in vergleichbaren Größen und Seitensituationen nebeneinander betrachtet. Dabei sollten Linien, Perspektiven, Abstände, Farben und Figurenregeln zusammenpassen. Zusätzlich wird geprüft, ob die Motive dieselbe Tonalität vermitteln und auf kleinen Bildschirmen verständlich bleiben. Ein schriftliches Regelwerk und ein Referenzset machen diese Prüfung nachvollziehbar.
Vor der Nutzung müssen Lizenzbedingungen, Bearbeitungsrechte und Einsatzbereiche geprüft werden. Ebenso wichtig ist die stilistische Passung. Wenn die Bibliothek nicht zu Farben, Figuren und Perspektiven des übrigen Auftritts passt, kann eine Anpassung mehr Aufwand verursachen als eine eigene Gestaltung. Eine dokumentierte Auswahl und einheitliche Nachbearbeitungsregeln helfen bei der langfristigen Pflege.
