In einer Welt, in der der digitale Fußabdruck einer Marke genauso wichtig ist wie der persönliche Eindruck, den sie hinterlässt, ist gutes Webdesign ein Muss. Webdesign ist extrem komplex und wahrlich eine Kunst für sich. Beim Designen einer Website gibt es viele wichtige Aspekte zu beachten, beispielsweise die Funktionalität, die Nutzerfreundlichkeit und die Ästhetik. Wenn du einem dieser Aspekte eine höhere Priorität einräumst als den anderen, kann dies manchmal bedeuten, dich auf bestimmte Designarten zu beschränken.

Doch was, wenn eine Designform alle oben genannten abdecken würde? Stell dir eine einzige Designlösung vor, die ein Website funktionaler macht, den Nutzer anspricht und einfach gut aussieht. Na? Richtig: Website-Illustrationen.

Website illustration
Illustration von OrangeCrush

Die Leute haben genug von Webdesigns, die sie mit zu viel Text bombardieren. Sie haben auch keine Lust mehr auf Stockfotos und Bilder, die übermäßig mit Photoshop bearbeitet wurden. Im Kontrast zu diesen bringen Illustrationen frischen Wind ins Webdesign.

In diesem Artikel besprechen wir alles rund um Website-Illustrationen. Wir schauen uns an, wie du den richtigen Stil für deine Website findest, werfen einen Blick auf verschiedene Erfolgsgeschichten und zeigen dir, wie Illustration als Gestaltungsmittel für Storytelling genutzt werden kann. Vergiss nicht: Gutes Branding beginnt mit Bildern, nicht mit Worten – und Illustrationen machen genau das.

Inhaltsangabe

  1. Den richtigen Illustrationsstil für deine Website finden
  2. Flat Illustration und Semi Flat Illustration
  3. Texturen und Farbverläufe
  4. Umrissillustrationen
  5. Navigation durch Illustration

Den richtigen Illustrationsstil für deine Website finden

So wie es viele verschiedene Zeichenstile gibt, gibt es auch verschiedene Kunststile, die für Webseiten funktionieren. Website-Illustrationen können auffällig und couragiert, verspielt und ausdrucksstark oder simpel und schnörkellos sein. Es geht einzig darum, was das Wesen deiner Marke am besten zum Ausdruck bringt.

Informiere dich zunächst, was Branding ist und wie du deine Markenidentität entwickelst. Sobald du mit Sicherheit weißt, wer du als Marke bist, wird es dir leichter fallen, den idealen Designstil deiner Website-Illustration zu finden.

Cartoonartige Illustrationen sind eine super Wahl, wenn deine Marke eine lustige, lockere Einstellung hat. Scharfkantige, eckige Illustrationen geben deiner Marke einen coolen, modernen Look. Egal wie du dich entscheidest, Illustrationen helfen deiner Website dabei, aus der Masse der Konkurrenten herauszustechen, die alle die gleichen Fotos und Grafiken verwenden.

Und genau wie Schriftarten und Farben ermöglichen Illustrationen es dir, deine Markenpersönlichkeit zu entwickeln. Wenn du überall dort, wo deine Marke im Web erscheint, denselben Illustrationsstil nutzt, hilft dir das, eine unverwechselbare Stimme zu wahren. Es ist ein effektiver Weg, um deinen Besuchern schon vom ersten Klick an zu zeigen, wer du bist.

Frank Body website
Website-Illustration via Frank Body
Breathing Room website
Breathing Room Website von spoon lancer
Spiraladder website
Spiraladder Website von Mithum
Umama website
Umama Website von DSKY
We Build Spaceships website
We Build Spaceship Website von sundayrain
Snow Day Survival Kit website
Snow Day Survival Kit Website von gs05
Naturbit website
Naturbit Website von lucadia
Surfside Kids Pediatric Dentistry website
Surfside Kids Pediatric Dentistry Website von aneley

Beispiele für Flat Illustration und Semi Flat Illustration

Einige der besten Website-Illustrationen sind die, die am simpelsten gehalten sind, und oftmals sind diese im Flat Design erstellt. Dieser Stil funktioniert gut, um Menschen, Tiere, Figuren und Objekte darzustellen.

Flat Design bietet einen klassischen, ansprechenden Weg, um Illustrationen im Webdesign einzuarbeiten, da alles auf einer visuellen Ebene stattfindet. Flat Design bezieht sich auf ein zweidimensionales Bild ohne Farbverläufe und Schattierungen. Selbst die Ränder und Ecken haben in der Regel dieselbe Schattierung wie der Rest der Illustration, wodurch der zweidimensionale Effekt hervorgehoben wird. Semi Flat Design enthält mehr Farbverläufe, Schlaglichter und Schattierungen, ohne die Illustration auf ein komplett dreidimensionales Level zu heben.

Flat Illustrationen können verspielt oder elegant sein, abhängig vom Ton der Marke. Dieser Stil lässt sich gut mit einer einheitlichen Farbpalette im Seitendesign umsetzen (die Semi Flat Illustrationen auf Guarantee Quote zum Beispiel). Zusätzlich können Flat Illustrationen problemlos die Form verspielter, cartoonartiger und wiedererkennbarer Symbole annehmen. Sie passen gut zu Website-Maskottchen wie dem sympathischen Vöglein auf der Seite von Duolingo.

Ein weiterer Vorteil von Flat Website-Illustrationen ist ihre Anpassungsfähigkeit. Im Fall der Website von Live & Dare werden kuriose Illustrationen mit Bildern kombiniert, um ein facettenreiches, visuelles Design zu kreieren. Durch eine behutsam gewählte Farbpalette und die richtigen Proportionen im Design der Landingpage fühlt sich die Mischung aus Fotografie und Illustration ausgeglichen an.

Retail One website illustration
Retail One Website von Hitron
Co Op Vision website
Co Op Vision Website von Googa
Guarantee Quote website
Guarantee Quote Website von MercClass
Duolingo website
Duolingo Website via Niche Academy
Lander website
Lander Website via Software Findr
Site Leaf website character
Website Figuren-Illustration via Site Leaf
Live and Dare website
Live and Dare Website von Daria V.

Texturen und Farbverläufe in Website-Illustrationen

Sofern eine Marke nicht alles mit Flash-Animationen macht, ist die durchschnittliche Landingpage ziemlich flach und statisch. Mit Website-Illustrationen erhält ein ehemals flaches Design Tiefe. Texturen und Farbverläufe verleihen Webseiten eine gewisse Schönheit und Szenerie, die die Ästhetik einer Marke auf ein ganz neues Level heben.

Schau dir die Verpackung und Website von Magic Spoons Cereal an (ja, wir reden hier über die glutenfreien, kohlenhydratarmen Hipster-Cornflakes). Die Farbverläufe auf ihrer Produktinformationsseite spiegeln die lebendigen Farbpaletten und abgefahrenen Illustrationen ihrer Cornflakes-Packung wider. Hier handelt es sich um einen seltenen Fall gelungener Website-Illustration im Bereich des E-Commerce, da wir in dieser Branche daran gewöhnt sind, Produktfotos statt Illustrationen zu sehen. Doch wenn sie richtig gemacht werden – das Produkt also realistisch dargestellt wird – funktionieren sie. Es ist wichtig, Produkte realistisch darzustellen, damit Kunden wissen, was sie kaufen, und es gibt keinen Grund, weshalb du dies nicht mit Illustrationen tun solltest.

Um eine tolle Textur zu sehen, schau dir die Website von Wisecube an. Eine galaxieartige Überlagerung macht aus dem langweiligen blauen Hintergrund eine belebende Darstellung. Es gibt viele Wege, um Texturen zu kreieren. Du kannst beispielsweise verschachtelte Muster oder Farbüberlagerungen nutzen oder einfach mit der Deckkraft herumspielen. Für den Betrachter hilft Textur dabei, die flache Darstellung zum Leben zu erwecken.

Superhero Studios website illustration
Superhero Studios Website via Web Design Inspiration
Sparq Storytelling website
Sparq Storytelling Website von Iconic Graphics
Magic Spoon Cereal website
Magic Spoon Cereal Website via Philly Voice
IT Heroes website
IT Heroes Website von set4net
Heyware website
Heyware Website von ABRIR
Wisecube website
Wisecube Website von FaTiH
INDOSE website
INDOSE Website von DSKY

Website-Illustrationen mit Umrissen

In den vergangenen Jahren kamen Umrissillustrationen immer mehr in Mode (wie die Verpackung von White Claw beispielsweise). Die Beliebtheit von Malbüchern für Erwachsene könnte der Grund für diesen Trend sein und ehrlich gesagt ist er großartig. Umrisse fühlen sich nostalgisch und charmant an und diese Beispiele für Website-Illustrationen sind einige der überzeugendsten.

Bei diesem Illustrationsstil wird der Weißraums genutzt. Abhängig von der Herangehensweise können Umrissillustrationen abgespeckt und minimalistisch oder äußerst detailliert sein. Eine Umrissillustration fühlt sich immer ein bisschen selbstgemacht und personalisiert und doch professionell an. Umrisse sind augenschonend und doch äußerst ansprechend. Schau dir die Website von Rocket an, um eine schnörkellose Herangehensweise an Umrisse zu sehen, oder Brand It Guru für eine kompliziertere Interpretation.

Good Things Brewing Co. website illustration
Webdesign via Good Things Brewing Co
Rocket website
Rocket Website von spoon lancer
Railsware illustration
Railsware Illustration via Link text
Smart Data website illustration
Smart Data Website-Illustration von Googa
Backlink website
Backlink Website von Gil Fadilana
Bank of England website
Bank of England Website via Graphic Mama
Brand It Guru website
Brand It Guru Website via Graphic Mama

Navigation mittels Illustration

Der Begriff „Navigation“ bezieht sich im Webdesign auf zwei unterschiedliche Dinge.

Zunächst einmal kann er sich auf das Navigationsmenü selbst beziehen. Die Navigation ist der Kern jeder gut designten Website und Illustrationen können eine Navigation ansprechend und deutlich machen. Schau auf GiftRocket, um ein fantastisches Beispiel für ein überraschendes, illustrationsbasiertes Navigationsmenü zu sehen, bei dem jede Produktkategorie durch eine Illustration dargestellt wird.

Außerdem beschreibt Navigation auch die Art und Weise, wie der Nutzer den Inhalt der Website erkundet und sieht. Illustrationen können bei diesem Ziel durch klassische Navigation (das Menü) behilflich sein, aber auch durch neue, kreative Formen (die Infografik). Und in Fällen wie Trailhead hilft eine Illustration nicht nur dem Nutzer dabei, auf der Website zu navigieren; durch sie entsteht buchstäblich eine fesselnde Suche.

Für eine gelungene Verwendung von Visualisierungen in Website-Illustrationen schau dir Chrysalis an. Das Erste, was der Nutzer auf der Website von Chrysalis sieht, ist eine Illustration im Stile eines Schaubilds, die dem Nutzer verrät, was die Marke macht.

Denke an klassische Visualisierungstools wie Flussdiagramme. Website-Illustrationen sind ein hervorragendes Visualierungstool und darüber hinaus ein effektiver Weg, um eine Verbindung zu deiner Zielgruppe aufzubauen. Außerdem eignen sie sich oftmals besser für Mobilgeräte als Fotos. Behalte dies im Hinterkopf, wenn du die Mobilversion deiner Seite designst.

Basecamp website illustration
Website-Illustration via Basecamp
Trailhead website
Trailhead Website via classy.org
GiftRocket navigation menu
GiftRocket Navigationsmenü via Awwards
Gas Analytical website
Gas Analytical Website von FaTiH
Chrysalis website illustration
Chrysalis Website von Mithum

Zeige und erzähle deine Story mithilfe von Website-Illustrationen

Von der Markenstimme über Illustration bis hin zu verschiedenen Illustrationsstilen – es gibt viele Wege, wie Website-Illustrationen das Engagement fördern, Nutzer durch Webseiten führen und Funktionalität, Nutzerfreundlichkeit und Ästhetik kombinieren können. Wenn du bereits eine Website hast, denke darüber nach, wie du Website-Illustrationen nutzen kannst, um das Beste aus deiner Website herauszuholen. Und wenn du von Grund auf anfängst, denke über eine dynamische, illustrationsbasierte Website nach.

Du bist unsicher, wo du anfangen sollst? Schau dir unsere weltweite Designer-Community an, um einen Webdesigner zu finden, der sich auf Website-Illustrationen spezialisiert hat und perfekt zu deiner Marke passt.

Bereit für zauberhafte Website-Illustrationen für deine Seite?
Unsere Designer können den perfekten Look für deine Marke kreieren.