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.
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
—
- Den richtigen Illustrationsstil für deine Website finden
- Flat Illustration und Semi Flat Illustration
- Texturen und Farbverläufe
- Umrissillustrationen
- 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.
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.
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.
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.
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.
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.
