Illustrationen im Webdesign: Wann stärken sie Ihre Website, wann schwächen sie?

Illustrationen im Webdesign können einer Marke eine eigene Stimme geben. Sie können allerdings auch Vertrauen kosten und ein seriöses Unternehmen verspielt wirken lassen. In diesem Leitfaden zeigen Talha Aslan und Team, welche Muster wir in Projekten immer wieder sehen: welche Seiten von Zeichnungen profitieren, wo Fotos Pflicht sind, wie ein Stil konsistent bleibt und wie Sie Dateiformat und Barrierefreiheit sauber lösen.

Diese Regel klingt selbstverständlich, trotzdem verschwimmt sie in vielen Projekten. Zum Beispiel wirft eine Kanzlei, die Teamfotos durch Comicfiguren ersetzt, sofort eine Frage auf: Wer arbeitet hier eigentlich? Andererseits erklärt ein Softwareanbieter einen komplexen Datenfluss mit einer klaren Zeichnung in Sekunden, während ein Screenshot einen ganzen Absatz Erklärung bräuchte. Die sinnvolle Frage lautet deshalb nicht, ob eine Illustration schön ist. Fragen Sie stattdessen, welche Aufgabe dieses Bild auf dieser Seite erfüllt.

Wenn wir die Bildplanung für eine neue Website erstellen, schreiben wir pro Abschnitt einen Satz: Was soll dieses Bild dem Besucher zeigen? Enthält der Satz Begriffe wie Vertrauen oder Beleg, gewinnt meist das Foto. Enthält er dagegen Formulierungen wie so funktioniert es oder das bedeutet es, gewinnt meist die Illustration. Diese kleine Gewohnheit holt Designdiskussionen aus der Geschmacksfrage heraus und bindet sie an einen Zweck.

Was unterscheidet Illustrationen grundsätzlich von Fotos?

Ein Foto dokumentiert, eine Illustration interpretiert. Ein Foto zeigt, dass ein Moment oder ein Gegenstand existiert hat, und trägt deshalb Beweiskraft. Eine Illustration behält nur die Details, die die Gestalterin oder der Gestalter auswählt, und lässt alles andere weg. Somit vereinfacht sie die Botschaft. Nielsen Norman Group beschreibt in einem Artikel über Bildsprache im visuellen Design Fotos als naheliegende Wahl für Produkte, Umgebungen und Menschen und Illustrationen als passend für Abläufe, Prozesse und Konzepte.

Dieser Unterschied hat eine praktische Folge. Besucher lesen ein Foto immer mit einer stillen Frage: Ist das echt? Ein erkennbares Stockfoto kostet daher Glaubwürdigkeit. Bei einer Illustration wissen Besucher dagegen von Anfang an, dass sie eine Interpretation sehen. Folglich sinkt ihre Erwartung an wörtliche Wahrheit. Allerdings wird genau dieser Vorteil zur Schwäche, sobald eine Seite einen Beleg braucht.

Außerdem gibt Ihnen die Illustration Kontrolle. Sie bestimmen Farbpalette, Strichstärke und Proportionen jeder Figur. Bei Fotos ändern sich dagegen ständig Licht, Ort und Personen von Shooting zu Shooting. Mit Zeichnungen halten Sie dagegen dieselbe Bildwelt über die gesamte Website. Deshalb sind Illustrationen attraktiv für Unternehmen, die eine eigenständige Identität wollen, aber kein Budget für regelmäßige und einheitliche Fotoproduktionen haben.

Auf welchen Seiten wirken Illustrationen im Webdesign am besten?

Nach unserer Erfahrung schaffen Illustrationen im Webdesign den größten Nutzen auf Seiten, auf denen Besucher etwas verstehen müssen. Die folgende Liste zeigt Stellen, an denen Zeichnungen Fotos meist überlegen sind:

• Abläufe und Funktionsweise. Pfeile und einfache Symbole zeigen einen Prozess Schritt für Schritt klarer als jedes Foto.
• Immaterielle Leistungen. Beratung, Software und Planung bieten der Kamera kein natürliches Motiv.
• Leere Zustände. Eine kleine Zeichnung macht einen leeren Warenkorb oder eine Suche ohne Treffer freundlicher.
• Fehlerseiten. Eine passende Illustration führt verirrte Besucher zurück und hält dabei den Ton der Marke.
• Lerninhalte. Konzeptgrafiken und Gegenüberstellungen beschleunigen das Verstehen.
• Produkte vor dem Start. Vor dem Launch erklärt eine Zeichnung die Idee einer App, auch ohne echte Bildschirme.

Gemeinsam ist diesen Seiten, dass Besucher eine Erklärung suchen und keinen Beweis. Konkret: In einem Abschnitt einer Buchhaltungssoftware zum Thema automatischer Rechnungsabgleich sagt ein Bürofoto nichts aus. Eine Zeichnung in drei Schritten beantwortet die Frage dagegen direkt.

Wann schwächen Illustrationen eine Website?

Die Schwachstellen sind allerdings ebenso klar wie die Stärken. Wenn Sie sie früh erkennen, sparen Sie sich später eine teure Überarbeitung der gesamten Bildsprache:

• Team und Über uns. Besucher möchten hier echte Gesichter sehen, und Comicfiguren schaffen Distanz.
• Physische Produkte. Nur Fotos zeigen Stoffstruktur, Möbelfarbe oder Portionsgröße.
• Standortgebundene Unternehmen. Wer ein Restaurant, Hotel oder Studio besucht, will den Ort vorher sehen.
• Weitreichende Entscheidungen. Vor einem großen Auftrag erwarten Menschen Seriosität, und verspielte Zeichnungen untergraben diesen Eindruck.
• Trendkopien. Wer denselben Figurenstil wie alle anderen übernimmt, sieht aus wie hunderte andere Websites.

Dazu kommt eine weniger sichtbare Schwäche: Überladung. Wenn jeder Abschnitt eine große Zeichnung trägt, findet das Auge keinen klaren Ankerpunkt, und die Kernbotschaft geht verloren. Dieses Thema behandeln wir ausführlich im Beitrag über visuelles Gewicht im Webdesign. Illustrationen tragen genauso Gewicht wie jedes andere Element, daher gelten dieselben Regeln.

Wie prägen Illustrationen im Webdesign Ihre Markensprache?

Illustrationen im Webdesign tragen die visuelle Hälfte Ihrer Markensprache. Weiche Linien, kräftige Farben und der Gesichtsausdruck der Figuren senden eine stille Botschaft über die Persönlichkeit der Marke. Zum Beispiel wirken dicke, runde Formen mit hellen Farben freundlich und jung. Feine Linien, eine reduzierte Palette und geometrische Formen wirken dagegen ruhiger und eher seriös.

Deshalb sollten Sie einen Illustrationsstil nie getrennt von Ihren Texten wählen. Sind Ihre Texte sachlich und technisch, erzeugen Figuren im Stil eines Bilderbuchs einen Widerspruch. Umgekehrt verliert ein humorvoller Text an Wärme, wenn ihn kühle, schematische Zeichnungen begleiten. Unser Leitfaden zur Markensprache für Websites zeigt, wie Sie Text und Bildton gemeinsam festlegen.

Bei den Farben funktioniert es zudem genauso. Ihre Illustrationspalette sollte aus den Markenfarben entstehen, und Sie sollten wissen, welche Wirkung diese Farben haben. Unser Beitrag über Farbpsychologie im Webdesign erklärt die Hintergründe dieser Wahl. Zusammengefasst gehört die Illustration ebenso zur Identität wie Logo und Typografie. Sobald Sie den Stil festlegen, sollte jede neue Zeichnung dieselbe Sprache sprechen.

Wie kombinieren Sie Fotos und Illustrationen auf einer Seite?

Fotos und Zeichnungen lassen sich durchaus auf einer Seite verbinden. Eine zufällige Mischung wirkt allerdings unruhig. Unser Grundsatz ist einfach: Geben Sie jedem Bildtyp eine Rolle und behalten Sie diese Rolle auf der ganzen Seite bei. Fotos übernehmen den Beleg, also Team, Kundenumgebung und Produkt. Illustrationen übernehmen die Erklärung, also Ablauf, Konzept und Symbole.

Einige praktische Techniken lassen die Mischung bewusst wirken:

1. Legen Sie über Ihre Fotos eine dezente Farbtönung oder einen Rahmen aus der Illustrationspalette.
2. Ergänzen Sie Fotos um kleine grafische Elemente im Linienstil der Marke, etwa Pfeile oder Unterstreichungen.
3. Wechseln Sie die Bildtypen zwischen Abschnitten ab, statt sie direkt nebeneinander zu setzen.
4. Nutzen Sie für beide Bildtypen gemeinsame Regeln für Eckenradius, Schatten und Abstände.

Manche Mischungen scheitern dennoch fast immer. Realistische dreidimensionale Renderings neben flachen Vektorsymbolen zwingen das Auge, zwei Welten gleichzeitig zu verarbeiten. Ebenso passen zwei Illustrationspakete aus verschiedenen Quellen selten bei Strichstärke und Proportionen zusammen. Entscheiden Sie sich dann für einen Stil und entfernen Sie den anderen. Das geht schneller als der Versuch, zwei Systeme ohne gemeinsames Briefing anzugleichen.

Wie entwickeln Sie einen konsistenten Illustrationsstil?

Konsistenz lässt Illustrationen professionell wirken. Auch Nielsen Norman Group empfiehlt, dass Illustrationen auf einer Seite Palette und Linienführung teilen. Wir sichern diese Einheit mit einem schriftlichen Styleguide, der folgende Entscheidungen festhält:

1. Palette. Hauptfarben, eine Akzentfarbe und Schattentöne. Eine knappe Palette hält künftige Zeichnungen in derselben Familie.
2. Linie. Mit oder ohne Kontur, dazu Strichstärke und Form der Linienenden.
3. Perspektive. Flach, isometrisch oder leicht räumlich, aber nur eine Variante.
4. Menschliche Figuren. Detailgrad im Gesicht, Körperproportionen, Vielfalt und Hauttöne.
5. Textur und Schatten. Flächige Farbe, Körnung oder weiche Verläufe.
6. Größe und Abstand. Eigene Vorgaben für Symbole, Abschnittsbilder und den Kopfbereich.

Ein solcher Leitfaden verhindert, dass der Stil abdriftet, auch wenn später eine andere Person zeichnet. Zudem beschleunigt er neue Seiten, denn die Antwort auf die Frage, was wir zeichnen, steht bereits in den Regeln. Am Ende des Leitfadens ergänzen wir eine Seite mit richtigen und falschen Beispielen nebeneinander. Somit hat die schriftliche Regel eine sichtbare Referenz.

Ein weiterer Vorteil ist außerdem ein kürzerer Freigabeprozess. Kommt eine neue Zeichnung, prüft das Team sie anhand des Leitfadens, statt über Geschmack zu streiten. Stimmt die Palette? Passt die Strichstärke? Halten die Proportionen? Diese Fragen messen eine schriftliche Regel und keine persönliche Vorliebe. Folglich fallen Entscheidungen schneller, und Zeichnungen, die verschiedene Personen freigeben, wirken trotzdem wie eine Familie. Wir empfehlen außerdem, den Leitfaden als einfaches gemeinsames Dokument zu führen, damit auch Texterinnen und Texter das passende Bild anfragen können.

Welcher Bildtyp passt zu welchem Zweck?

Die folgende Vergleichstabelle fasst die Bildtypen zusammen, die uns am häufigsten begegnen, jeweils mit bestem Einsatz, Hauptstärke und Hauptrisiko. Betrachten Sie sie als Ausgangspunkt aus der Praxis und passen Sie sie danach an Ihre eigene Marke an.

Die wichtigste Spalte ist meist die, die viele überspringen: das Hauptrisiko. Isometrische Zeichnungen etwa beeindrucken am Desktop, auf dem Smartphone bleiben sie aber oft unlesbar. Planen Sie daher von Anfang an eine vereinfachte mobile Variante derselben Zeichnung ein.

Warum ist SVG für die meisten Illustrationen das richtige Format?

SVG steht für Scalable Vector Graphics und speichert ein Bild als Beschreibung von Formen statt als Pixel. Deshalb bleibt es in jeder Bildschirmgröße und jeder Zoomstufe scharf. web.dev empfiehlt im Leitfaden zur Wahl des richtigen Bildformats Vektorgrafiken für einfache Formen wie Logos, Symbole und Text und rät, Vektorbilder zu bevorzugen, wann immer es möglich ist.

Flache Illustrationen mit wenigen Details passen daher gut zu dieser Beschreibung. Da SVG zudem textbasiert ist, bringt das Format weitere Vorteile mit:

• Sie können Farben per CSS ändern und die Palette etwa für den Dark Mode anpassen.
• Sie können einzelne Teile animieren, ohne eine eigene Videodatei zu brauchen.
• Komprimiert bleiben SVG Dateien oft sehr klein, allerdings hängt die Größe von der Komplexität der Zeichnung ab.
• Für hochauflösende Bildschirme brauchen Sie keine zusätzlichen Exporte.

Auch Google nennt SVG unter den unterstützten Bildformaten. Die Seite mit Best Practices für Google Bilder erwähnt, dass Sie bei eingebettetem SVG statt eines alt Attributs das title Element nutzen können. Kurz gesagt bietet eine saubere SVG Datei eine solide Basis für Ladezeit, Schärfe und Sichtbarkeit in der Suche zugleich.

Wann ist SVG die falsche Wahl?

SVG passt nicht zu jeder Zeichnung. Derselbe Leitfaden von web.dev warnt, dass der Code für eine komplexe Szene unverhältnismäßig groß ausfallen kann. Pinselstrukturen, tausende kleine Formen und realistische Licht- und Schattenverläufe können eine SVG Datei größer machen als ein Foto. Hinzu kommt, dass der Browser Rechenzeit braucht, um jede dieser Formen zu zeichnen.

In diesem Fall ist ein Rasterformat wie WebP oder AVIF sinnvoller. Bei Rastergrafiken brauchen Sie allerdings mehrere Größen für verschiedene Bildschirmbreiten. Wie das geht, zeigen wir Schritt für Schritt im Beitrag Bilder für die Website optimieren.

Wie treffen Sie also die Entscheidung? Wir machen einen schnellen Test. Zunächst exportieren wir die Zeichnung als SVG und als WebP und vergleichen die komprimierten Größen. Danach laden wir die Seite auf einem einfachen Smartphone und achten darauf, wie flüssig sie scrollt. Die leichtere und flüssigere Variante gewinnt. Außerdem enthalten SVG Dateien aus Designprogrammen oft ungenutzte Ebenennamen, versteckte Objekte und Metadaten. Wenn Sie diese entfernen, schrumpft die Datei spürbar.

Wie machen Sie Illustrationen barrierefrei?

Eine barrierefreie Illustration gibt blinden und sehbehinderten Menschen dieselbe Information wie allen anderen. Der erste Schritt ist die Entscheidung, ob die Zeichnung überhaupt Information trägt. Trifft das zu, braucht sie eine kurze, aussagekräftige Beschreibung, die ein Screenreader vorlesen kann. Bei eingebettetem SVG steht diese Beschreibung meist im title Element, wie auch die Hinweise von Google erwähnen.

Der zweite Schritt betrifft den Kontrast. Das WCAG Erfolgskriterium 1.4.11 zum Kontrast bei Inhalten ohne Text verlangt für grafische Teile, die zum Verständnis nötig sind, ein Kontrastverhältnis von mindestens 3:1 zu angrenzenden Farben. Trennen etwa blassgraue Pfeile die Schritte einer Ablaufgrafik auf hellgrauem Grund, kann eine sehbehinderte Person dem Ablauf nicht folgen. Ihre Farbpaare prüfen Sie schnell mit unserem Kontrastrechner.

Der dritte Schritt betrifft Text innerhalb der Zeichnung. Text, der im Bild steckt, erreicht keinen Screenreader, lässt sich nicht übersetzen und verschwimmt beim Vergrößern. Schreiben Sie wichtige Inhalte deshalb als HTML auf die Seite und lassen Sie in der Illustration nur kurze ergänzende Beschriftungen. Den größeren Rahmen erklärt unser Beitrag zur barrierefreien Website nach WCAG.

Wie unterscheiden Sie dekorative von informativen Illustrationen?

Diese Unterscheidung ist zunächst für Barrierefreiheit und Inhalt gleichermaßen wichtig. Das W3C beschreibt im Tutorial zu dekorativen Bildern solche Bilder als Elemente, die keine Information hinzufügen, nahen Text wiederholen oder nur optisch auflockern. Für sie empfiehlt es ein leeres alt Attribut und rät davon ab, das Attribut ganz wegzulassen. Sonst lesen manche Screenreader stattdessen den Dateinamen vor.

In der Praxis hilft eine einzige Frage: Würde der Besucher eine Information verlieren, wenn ich diese Zeichnung entferne? Lautet die Antwort ja, ist die Zeichnung informativ und braucht eine Beschreibung. Lautet sie nein, ist sie dekorativ, und Sie sollten sie vor Screenreadern verbergen. Zum Beispiel tragen die Schrittgrafiken in einem Abschnitt zur Einrichtung in drei Schritten Information. Die Wellenlinie neben einer Überschrift ist dagegen reine Dekoration.

Dieselbe Frage dient zugleich als Filter für das Design. Laut Eyetracking Studien von Nielsen Norman Group beachten Nutzer Bilder, die für ihre Aufgabe relevante Information tragen, und übergehen rein dekorative Bilder meist. Fällt also der Großteil Ihrer Illustrationen in die dekorative Gruppe, könnte dieser Platz mit nützlicherem Inhalt mehr leisten.

Worauf sollten Sie bei animierten Illustrationen achten?

Bewegte Zeichnungen lenken Aufmerksamkeit wirksam, bei zu häufigem Einsatz stören sie allerdings schnell. Manche Menschen reagieren körperlich empfindlich auf Bewegung am Bildschirm und aktivieren deshalb im Betriebssystem die Einstellung für reduzierte Bewegung. Das WCAG Erfolgskriterium 2.3.3 zu Animationen durch Interaktionen nennt die Berücksichtigung dieser Einstellung als ausreichende Technik.

Für animierte Illustrationen gelten bei uns diese Regeln:

• Setzen Sie Bewegung nur ein, wenn sie etwas bedeutet, etwa einen Zustandswechsel, einen Schrittübergang oder eine Bestätigung.
• Vermeiden Sie Animationen im Kopfbereich, die endlos laufen, denn das Auge springt beim Lesen immer wieder dorthin.
• Zeigen Sie Menschen mit Einstellung für reduzierte Bewegung eine ruhende Fassung.
• Sorgen Sie dafür, dass schon das erste Bild der Animation für sich allein verständlich ist.

Die Ladezeit ist zudem ein eigenes Thema. Eine schwere Animationsbibliothek für eine einzige Zeichnung kann den ersten Seitenaufbau verlangsamen. Für kleine Bewegungen genügt meist CSS. Diese Balance vertiefen wir im Beitrag über Mikroanimationen im Webdesign.

Wie wirken sich Illustrationen im Webdesign auf SEO aus?

Illustrationen im Webdesign verbessern Rankings nicht direkt, sie machen aber an drei Stellen einen indirekten Unterschied. Erstens bei der Ladezeit: Ein leichtes SVG kann den Hauptinhalt schneller anzeigen als ein schweres Titelfoto. Ein überkomplexes SVG bewirkt allerdings das Gegenteil, deshalb sollten Sie jede Datei messen.

Zweitens beim Verständnis. Google nennt den Alternativtext in seinen Hinweisen zu Google Bilder das wichtigste Attribut für Bildmetadaten und erklärt, dass es maschinelles Sehen mit dem Seiteninhalt kombiniert, um das Motiv eines Bildes zu verstehen. Schreiben Sie daher für informative Zeichnungen einen natürlichen, beschreibenden Alternativtext und verzichten Sie auf gehäufte Suchbegriffe.

Drittens beim Nutzerverhalten. Eine Zeichnung, die einen komplexen Ablauf auf einen Blick erklärt, erleichtert es Besuchern, auf der Seite zu bleiben und weiterzulesen. Sinnlose Dekoration schiebt dagegen den Inhalt nach unten und verzögert die Antwort, für die jemand gekommen ist. Zusammengefasst ist eine gute Illustration aus SEO Sicht eine, die dem Zweck der Seite dient und sie nicht bremst.

Fertige Illustrationspakete oder individuelle Zeichnungen?

Fertige Pakete ermöglichen einen schnellen Start und sind bei kleinem Budget durchaus vertretbar. Bedenken Sie aber, dass hunderte andere Websites dasselbe Paket nutzen können und Ihre Besucher die Figuren womöglich schon kennen. Das schwächt Ihr Bemühen, sich abzuheben. Zudem enthalten Pakete nur eine begrenzte Zahl an Szenen. Wächst Ihre Website, finden Sie die nächste benötigte Zeichnung im selben Stil oft nicht.

Individuelle Zeichnungen kosten anfangs mehr Zeit, schaffen dafür aber eine Bildsprache, die Ihnen gehört. Ein Mittelweg ist ebenfalls möglich: Sie starten mit einem Paket und passen Palette, Linie und Proportionen an Ihre Marke an. Lesen Sie dann allerdings die Lizenzbedingungen des Pakets genau.

Welchen Weg Sie auch wählen, die Grundlage bleibt gleich: ein Styleguide. Die Entscheidung ist dabei Teil einer größeren Frage, die wir für die ganze Website im Beitrag Website Template oder individuelles Webdesign besprechen. Möchten Sie ein Illustrationssystem gemeinsam mit Ihrer Website von Grund auf aufbauen, übernehmen wir im Rahmen unserer Webdesign Leistungen den Styleguide und das erste Zeichnungsset.

Sollten Sie KI für Illustrationen nutzen?

KI Bildwerkzeuge helfen bei schnellen Entwürfen. Bei Illustrationen für die Live Website treten allerdings drei Probleme häufig auf. Erstens die Konsistenz: Linie, Proportion und Palette verschieben sich bei jeder Erzeugung leicht, deshalb lässt sich ein Styleguide schwer einhalten. Zweitens Detailfehler: Hände, Schrift und kleine Objekte geraten oft verzerrt. Drittens die Rechte: Die Bedingungen für kommerzielle Nutzung unterscheiden sich je nach Anbieter, also prüfen Sie die aktuellen Bedingungen auf der offiziellen Seite des Anbieters.

Wir nutzen KI deshalb vor allem in der Ideenphase. Konkret sichten wir schnell mehrere Kompositionsideen für einen Kopfbereich. Dann zeichnen wir die gewählte Richtung sauber als Vektorgrafik nach. So behalten wir den Zeitvorteil, ohne die Konsistenz aufzugeben.

Außerdem noch ein praktischer Hinweis: KI liefert meist Rastergrafiken. Statt diese unverändert einzubinden, lohnt sich die Umwandlung in Vektoren mit anschließender Vereinfachung. Das senkt die Dateigröße und erlaubt Farbanpassungen wie den Dark Mode. Kurz gesagt liefert KI einen Ausgangspunkt, die endgültige Entscheidung treffen dann der Styleguide und ein menschliches Auge.

Beispielszenario: die Startseite eines Softwareanbieters

Die Situation in diesem Abschnitt ist ein Beispielszenario und beschreibt keinen echten Kunden. Stellen Sie sich einen kleinen Softwareanbieter vor, dessen Startseite voller Stockfotos ist: lächelnde Geschäftsleute, Handschläge und Models am Laptop. Besucher verstehen erst in der Mitte der Seite, was das Produkt eigentlich tut.

In so einem Projekt halten wir zuerst die Aufgabe jedes Abschnitts fest. Der Kopfbereich soll auf einen Blick zeigen, was das Produkt leistet, also platzieren wir dort eine vereinfachte Zeichnung der Oberfläche. Danach erhält der Abschnitt zur Funktionsweise eine Ablaufillustration in drei Schritten. Schließlich ersetzen wir im Teamabschnitt die Stockfotos durch echte Teamfotos, denn hier geht es um Belege.

Anschließend gestalten wir alle Zeichnungen mit einer Palette und einer Strichstärke und binden sie als SVG ein. Dekorative Zeichnungen verbergen wir vor Screenreadern, informative erhalten eine Beschreibung. Dann prüfen wir den Kontrast und bereiten ruhende Fassungen für die Einstellung zur reduzierten Bewegung vor. Der eigentliche Gewinn dieses Szenarios ist nicht Schönheit, sondern Klarheit: Besucher verstehen schon oben auf der Seite, was sie bekommen.

Checkliste vor der Veröffentlichung von Illustrationen

Die folgende Liste gehen wir vor jedem neuen Zeichnungsset durch. Sie können dieselben Punkte auf Ihrer eigenen Website prüfen:

• Steht für jede Illustration in einem Satz fest, welche Aufgabe sie auf dieser Seite hat?
• Zeigen Abschnitte, die Belege brauchen, also Team, Produkt oder Standort, echte Fotos?
• Folgen Palette, Linie und Perspektive dem Styleguide?
• Sind einfache Zeichnungen im SVG Format und komplexe als passend skalierte Rastergrafik angelegt?
• Haben Sie ungenutzte Ebenen und Metadaten aus den SVG Dateien entfernt?
• Haben informative Zeichnungen eine kurze, aussagekräftige Beschreibung?
• Bleiben dekorative Zeichnungen mit leerem alt Attribut oder Gleichwertigem für Screenreader unsichtbar?
• Haben wichtige grafische Teile genug Kontrast zu angrenzenden Farben?
• Steht wichtiger Text im HTML und nicht in der Zeichnung?
• Bieten Animationen eine ruhende Fassung für Menschen mit Einstellung für reduzierte Bewegung?
• Erkennen Sie kleine Details auch auf dem Smartphone noch?
• Haben Sie bei fertigen Paketen die Lizenzbedingungen gelesen?

Die Punkte wirken unabhängig voneinander, dienen aber demselben Ziel: einer Illustration, die funktioniert, und nicht nur einer, die gut aussieht. Überspringen Sie vor allem nicht die Prüfung auf dem Smartphone. Feine Linien, die am Desktop elegant wirken, verschwinden auf kleinen Bildschirmen schnell.

Wer sollte das Illustrationssystem für Ihre Website aufbauen?

Illustration ist also keine reine Zeichenaufgabe. Sie ist ein System, in dem Entscheidungen zu Marke, Inhalt, Barrierefreiheit und Ladezeit zusammenkommen. Deshalb müssen die Person, die zeichnet, und das Team, das die Seite strukturiert, eng zusammenarbeiten. Sonst bleiben schöne Zeichnungen isolierte Stücke, die nie in den Fluss der Seite passen.

In einem Webprojekt entwickeln wir die Bildsprache gleichzeitig mit der Seitenstruktur. Zunächst legen wir fest, wo Fotos und wo Zeichnungen stehen. Danach schreiben wir den Styleguide und erstellen das erste Zeichnungsset. Streben Sie eine ruhige Bildsprache an, zeigen unsere Beiträge über minimalistisches Webdesign und Weißraum im Webdesign, wie Illustrationen in diese Balance passen.

Wenn Sie die Bildsprache Ihrer Website mit der richtigen Mischung aus Illustrationen und Fotos neu aufbauen möchten, können Sie über unsere Seite zu den Webdesign Leistungen ein Angebot anfragen. Wir sehen uns Ihre aktuelle Website, Ihre Zielgruppe und Ihre Seitenstruktur an und erstellen dann einen passenden Umfang und ein Angebot für Ihr Projekt.