Die Verwendung von Illustration im Webdesign
Illustration ist ein unglaublich vielseitiges Werkzeug, das viele verschiedene Anwendungen im Design finden kann. Und wenn es um Webdesign geht, können wir eine extrem breite Palette von Implementierungen finden.
Heute möchte ich ein paar wichtige Wege aufzeigen, wie dieses Tool funktioniert, damit wir neue Ideen entwickeln können, um die Designs, die wir produzieren, zu inspirieren und herauszufordern.
Fangen wir an einem Ort an, den ich selten tue, mit einer grundlegenden Definition: Illustriert: 1) Um klarzustellen; 2) Um klar zu machen , indem man gibt oder indem man als Beispiel oder Instanz dient; 3) Mit visuellen Funktionen zu erklären oder zu dekorieren .
Es scheint, dass in der realen Welt des Webdesigns die Illustration dazu neigt, beide Funktionen gleichzeitig auszuführen. Es verschönert, während es klärt. Und wenn es nur eine davon tut, müssen Sie sich vielleicht fragen warum. Vielleicht ist es die Art und Weise, das Design-Element für alles, was es wert ist, wahrzunehmen, indem man die Illustration in die Arbeit einführt, die beide Rollen erfüllt.
Dies ist natürlich nicht zu sagen, dass ein Design nicht erfolgreich sein kann, wenn es nur das eine oder andere behandelt; sicherlich kann es. Aber um das meiste aus unserer Arbeit herauszuholen, finde ich herausfordernd, dass unser Denken immer hilfreich ist. Wie üblich, lassen Sie uns einige Gruppierungen von Proben untersuchen, um zu sehen, was mit diesem visuellen Gerät gemacht werden kann. Beobachten Sie auf dem Weg, ob jeder Ansatz für Klarheit oder Dekoration sorgt oder beides.
Thematische Darstellung
Der erste Ansatz zur Veranschaulichung, den ich hier behandeln möchte, ist die Verwendung dieses Stils, um einen thematischen Gesamtansatz zu erzeugen. In dieser Situation werden Illustrationen erstellt, um ein Gesamtthema zu erstellen. Klettern wir Berge, besuchen eine Raumstation oder erkunden das Büro einer Firma?
Während dieser Ansatz uns nicht an einen Ort bringen muss, tut es dies oft. In anderen Situationen legt der Stil einfach ein Gesamtmotiv fest, dem die Website folgt.
Der Grund, warum wir hier daran interessiert sind, ist, dass es verwendet wird, um das Gesamtdesign auf eine radikale Art und Weise voranzutreiben. Die Abbildung ist kein kleines unterstützendes Element. Stattdessen ist es das prominenteste Designelement und steuert das gesamte Layout.
Bring meinen Chef zum Nordkap
In diesem Beispiel könnte der Ansatz nicht klarer sein. Die Gestaltung der Website spiegelt eindeutig ihren grundlegenden Zweck wider. Die Illustration bietet einen visuellen Hinweis darauf, was der Einzelne tun wird. Und in Bezug auf die Definition der Illustration, das Kunstwerk bietet Dekoration und Schönheit auf der Seite.
In diesem Fall legt das Thema fest den Zweck der Website fest und hilft dem Benutzer beim Kauf des Konzepts.
Launch-Kit
Ein thematischer Ansatz muss nicht so unverblümt sein. Manchmal kann es ein natürlicherer Teil einer eher strukturierten Website sein. In diesem Fall ist die Site in ihrem Layout ein wenig einzigartig und das Design erzwingt keine übertriebene Oberfläche, die auf Raketenschiffen basiert.
Stattdessen wird das Thema so in das Design eingewoben, dass es seine dekorativen Akzente kommuniziert, ohne den Inhalt zu beeinträchtigen. Hier dient die Illustration zum Dekorieren, aber nicht so deutlich. Das ist überhaupt nicht überraschend und zeigt natürlich, dass es keine Formel zu folgen gibt.
Atelier Anonyme Design
In anderen Situationen wie diesem ist die thematische Illustration buchstäblich die Website. Es ist kein tragendes Element, sondern wird zum Design selbst.
Hier spielt die Verwendung von Illustrationen eindeutig eine schmückende Rolle. Aber ich würde behaupten, dass es dem Besucher auch ein hohes Maß an Klarheit bietet. Dies ist eine Website für eine Designagentur. Das Design und die Art dieser Seite kommunizieren sehr viel mit den Besuchern. Als solcher bin ich sicher, dass es als ein massiver Filter für ihre Kundenbasis dient. Sie werden entweder angezogen sein und ihre spielerische und kreative Herangehensweise lieben, oder Sie werden völlig davon ablenken. Insofern denke ich, dass es sehr viel Klarheit über die Agentur und ihre Mentalität gibt.
Allure Grafikdesign
Auf dieser Seite spielt die Verwendung von Illustrationen einen klaren thematischen Ansatz. Obwohl die Website einigen Standard-Layout-Formeln folgt, ist das gesamte Design in einem thematischen Layout verpackt. Diese Elemente steuern nicht nur das Design der Site, sondern sie verschmelzen mit dem Hauptlogo und der Kopie, die auf der Site verwendet werden. Das Thema ist immersiv und treibt die gesamte Botschaft der Website an.
Zusätzliche thematische Beispiele
Hier sind einige zusätzliche Websites, die thematische Illustrationen verwenden, um eine Umgebung oder ein Thema für eine Website festzulegen.
Streifenhörnchen
Treibjungen
Iutopi
Chandu4u
Maskottchen
Wie könnte ich die Idee, Illustrationen zu verwenden, abdecken, ohne eines der offensichtlichsten zu betrachten: Maskottchen? Mit diesem visuellen Element neigen die Designer dazu, die Website, ihr Produkt oder ihren Zweck mit einem Charakter zu personifizieren. Die Implementierung eines solchen Elements variiert nicht nur, sondern auch die Macht und die Gründe dafür.
Tintenfinder
In diesem Design spielt das illustrierte Maskottchen eine ziemlich klare Rolle. Klar, dass es den Namen des Produkts widerspiegelt. Es gibt dem Design nicht nur etwas Leben, sondern auch ein Gesicht. Auf diese Weise hat das Publikum etwas, das etwas einzigartiger ist, um es in seinem Gehirn zu archivieren. Hoffentlich hilft das Maskottchen, eine unvergessliche und einzigartige Erfahrung zu machen, die dem Produkt hilft, sich vom Gehörten abzuheben.
Vielleicht ist das der mächtigste Zweck hinter einem Maskottchen, etwas hervorstechen zu helfen. Das Großartige an einem illustrierten Maskottchen ist, dass es absolut einzigartig und spezifisch für dieses Produkt sein kann. Angenommen, es wurde für dieses Design maßgeschneidert, sollte es der einzige Ort sein, an dem diese exakte Illustration existiert.
Die Evnt
Ironischerweise finden wir hier ein weiteres illustriertes Oktopus-ähnliches Maskottchen (was ist eine dreibeinige Meereskreatur?). In diesem Fall ist das Maskottchen offensichtlich ein viel größerer Schritt weg von der Realität: ein Roboter, ein dreibeiniges Wesen mit einem Gehirn in einer Blase.
Obwohl es eine seltsame Wahl ist, bietet es ein schönes Unterscheidungsmerkmal für das Ereignis. Dieses einzigartige Maskottchen gibt ein cooles visuelles Element, um mit dem Ereignis in Verbindung zu treten. Es nimmt ein Eigenleben an und verbindet die Menschen wirklich mit etwas Konkretem. Ich nehme an, das ist genau der Zweck eines Maskottchens.
Das Design dieser Seite ist wunderschön, aber bedenke, wie langweilig es wäre, ohne dieses verrückte Maskottchen an seinem Platz zu sein. Die Herstellung eines solchen Elements ist nicht einfach, aber in dieser Situation äußerst effektiv.
Großes Auge kreativ
Für ein Beispiel eines Nicht-Octopus-basierten Maskottchens werfen Sie einen Blick auf die Großes Auge kreativ Seite? ˅. Hier spielt das Maskottchen nicht so eine dominierende Rolle im Design. Es fügt jedoch eine Menge Persönlichkeit hinzu. Offensichtlich sind die anderen Illustrationen und der gesamte Stil der Website für eine weniger formelle Darstellung. Aber das Maskottchen im Logo ist auf der gesamten Website vorhanden. Dies gewährleistet, dass ihr unbeschwerter Stil das Design durchdringt.
Zusätzliche Maskottchenabbildungen
Hier sind ein paar zusätzliche Beispiele von Maskottchen bei der Arbeit im Design. Darunter noch ein Oktopus; es scheint, dass ein populärer zu verwenden ist.
Pioneer Records Management
Argyle Krake
Coucou
Konsekt
Illustrierte Dekoration
Die nächste Art der Nutzung, die ich in Betracht ziehen möchte, ist, was ich als thematische Dekoration bezeichne. Dies ist der Fall, wenn Illustration auf eine dekorative Art und Weise umgesetzt wird, die nicht wirklich eine spezifische physikalische Referenz liefert. Zum Beispiel enthält die Illustration häufig Bilder von Menschen, Tieren, Objekten oder Orten. Aber in diesem Fall repräsentiert die Illustration nicht so sehr etwas Echtes, sondern bietet einfach eine Dekoration, um das Design auf eine Art und Weise zu verschönern, wie es nur Illustration möglich ist. Wie immer, lasst uns das durch einige Beispiele klären.
1000 WP Themen
Betrachten Sie für unser erstes Beispiel die 1000 WP Themen Webseite. Auf dieser Website bietet die Verwendung von Illustration einen zugrunde liegenden Rahmen und Stil für die Website. Aber das tut es am reinsten Dekorativen. Der gesamte Stil fühlt sich an wie eine Illustration, und doch hat er nicht die typischen humanistischen Elemente.
Jetzt möchte ich mir völlig widersprechen. Ich denke, der Stil ist überwiegend dekorativ. Aber ich kann tatsächlich sehen, wie wir argumentieren könnten, dass es für die Website eine gewisse Klarheit schafft. Der Stil, den das Design verwendet, verbindet sich mit einem bestimmten Publikum. Es sagt etwas über den Stil der Website und die Themen aus, die sie produzieren könnten. In vielerlei Hinsicht zeigt die Qualität des abgebildeten Layouts die Qualität der Arbeit, die Sie möglicherweise von dieser Website erwarten. Auf diese Weise ist die Klärung vielleicht subtiler und weniger in Ihrem Gesicht, aber dennoch präsent.
Coca-Cola Geschichte
Auf dieser Website finden wir ein weiteres Design, das von Illustrationen angetrieben wird. Es gibt hier einige illustrierte Elemente, die reale Dinge zeigen, aber der größte Teil des thematischen Ansatzes ist mit reiner Dekoration festgelegt. Dieses Beispiel zeigt nicht nur den Ansatz, sondern zeigt auch, dass fast keine Technik auf puristische Art und Weise verwendet wird. Die Realität ist, dass Sie wahrscheinlich diese Elemente auf verschiedene Arten zusammenführen werden.
Metaphysik
In diesem letzten Beispiel für dekorative Illustration finden Sie einige ausgezeichnete Hintergrundelemente. Einige davon sind greifbarer als andere, aber insgesamt geht es mehr um stilistische Unterstützungselemente als alles andere. Es ist bemerkenswert, wie schön solche einfachen Linienzeichnungen sein können, wenn sie mit schönem Text, gut gewählten Farben und einfachen Symbolen kombiniert werden. Das Endergebnis ist fantastisch und bemerkenswert schön.
Weitere Designs mit illustrierter Dekoration
Hier sind einige zusätzliche Beispiele, um diese Art von Illustration im Design abzurunden.
Moo's Cupcakes
Tech-Jobs
Pixel-Stadion
Benutzerdefinierte Taschen HQ
Illustrierter Text
Hand gerenderter Text ist sicherlich kein neues Konzept und etwas, das ich behandelt habe viele Male vorher . Einen solchen Ansatz habe ich jedoch nie mit einer Illustrationsperspektive betrachtet.
Hand-Rendering-Text ist eine beliebte Variante des illustrierten Textes und eine großartige Lösung für viele Kreative. Zum einen ist es eine großartige Möglichkeit, all das praktische Kunstschultraining zum Laufen zu bringen. Zweitens ist es eine großartige Möglichkeit, etwas Einzigartiges zu produzieren. Immerhin, wenn Sie etwas Text rendern, wird es 100% einzigartig sein. Selbst wenn Sie über eine vorhandene Schrift skizzieren, wird sie dennoch zu einer eigenständigen Kreation.
Rangus
Dies ist ein perfektes Beispiel für den illustrierten Typ. Der Stil ist sehr schön, total einzigartig und sehr einladend. Aber damit hört es nicht auf. Die Hand gerendert Art zeigt tatsächlich die Talente der Individuen. Es zeigt, dass er Kunstwerke mit seinen Händen schafft und es perfekt mit seinen Animationsfähigkeiten verbindet. Ich liebe besonders die Tatsache, dass alles auf einem Tafel-Thema basiert, da es das Thema und die Elemente perfekt miteinander verbindet. Meiner Meinung nach zeigt diese Seite, wie eine vereinheitlichende Illustration mit dem Zweck und der Botschaft der Site verbunden werden kann.
Joey Lomanto
In diesem Fall ist der illustrierte Text viel subtiler. Anstatt die gesamte Richtung des Designs zu steuern, spielt es einfach gut mit. In der Tat, auf der ersten Take Sie vielleicht nicht einmal bemerken, die Hand gerendert Stil der großen Startseite Text. Zugegeben, der Text könnte tatsächlich eine Schriftart sein, aber er wurde so verwendet, dass er perfekt mit dem Stil der Website zusammenpasst. Unabhängig davon, der Stil ist schön vereinheitlicht und Illustration spielt viele Rollen im Gesamtdesign.
Geh Leben
Illustrierter Text muss nicht von Hand gerendert werden. Wie Sie in diesem Beispiel sehen werden, wird der Text auf verschiedene Arten gestaltet, die den Text selbst in Teile der gesamten Illustration verwandeln. Das Schöne an diesem Ansatz ist, dass er den Text mit den anderen Illustrationen vereint. Dies vermeidet ein weniger einheitliches Gefühl, wo Sie einfach Illustrationen über Standard-Web-basierten Text haben. Letzteres kann funktionieren, aber in diesem Fall ist der Einfluss des illustrierten Textes klar.
Zusätzliche Beispiele für illustrierten Text
Die folgenden Beispiele passen locker in diese Kategorie. Ich sage locker, weil es manchmal schwer zu sagen ist, da es manchmal eine subtile Sache ist. In einigen dieser Fälle fühlt sich der Text einfach wie ein Kunstwerk an, also habe ich ihn in diese Sammlung gelegt.
Kontrast Rebellion
Fakta
Der Webshop
Informative Illustrationen
Nach der Definition der Illustration ist einer ihrer Zwecke zu klären und zu erklären. Es ist also nur passend, dass wir einige Beispiele finden, in denen die Illustrationen dies mit außerordentlicher Klarheit tun.
Bücherwurm
Beginnen wir mit dem Bücherwurm Seite? ˅. In diesem ungewöhnlichen Layout finden wir, dass die Illustrationen sehr deutlich die verschiedenen Punkte des Layouts der Homepage symbolisieren. Jeder Block hat ein visuelles Element, das ihn nicht nur verschönert, sondern vor allem auch erklärt. So sehr, dass ich als Leser die Kopie fast gar nicht lesen muss. Die Gerätegrafik unten links zeigt dies besonders.
Übernehmen
Deutlich weniger auffällig ist die Darstellung in diesem Entwurf als ebenso informativ. Die einfache Illustration demonstriert im Alleingang das Thema der Site. Es mag Sie nicht mit seiner Botschaft über den Kopf schlagen, aber es spiegelt den Zweck der Website wunderbar wider.
aktivieren Sie
Die Illustration in diesem Design kommuniziert nicht nur Informationen über das Ereignis, das sie darstellt, sondern spiegelt auch den Zweck des Ereignisses wider. Dieses besondere Ereignis dreht sich um die Trennung von der Technologie. Es ist eine Chance für Menschen, die mit Technologie überflutet sind, ihren Klauen zu entkommen.
Die Abbildung zeigt uns, was die Teilnehmer tun werden, also ist es informativ. Und es liegt in der Natur der Sache, dass die Illustration mit der Technologie bricht und sich in einem rein organischen Gefühl verwurzelt, eine grundsätzlich gute Art, den Zweck der Websites zu kommunizieren.
Mehr informative Illustrationen
Diese zusätzlichen Websites zeigen auch die Idee von Illustrationen, die uns informieren. Einige sind kleine und grundlegende Symbole, während andere immersive Elemente sind, die den Inhalt vollständig definieren und darstellen.
Vitalität Stadt
Uklizenodoma.cz
Qubiq
Ein technologisches Gegenmittel
Mit dem letzten Beispiel (The aktivieren Sie Site), betrachteten wir das, was ich als nächstes betrachten möchte, die Verwendung von Illustration, um mit dem technologieorientierten Gefühl der Dinge zu brechen. Manchmal ist es notwendig, sich von den technologischen Grundlagen des Webs zu lösen und ein sehr organisches Gefühl zu zeigen. Illustration ist eines der mächtigsten Werkzeuge, um eine solche Idee zu verwirklichen.
Versand App
Diese einfache, bald erscheinende Seite ist nichts weniger als außergewöhnlich. Und klar, wie es seine Schönheit erreicht, ist radikal einfach. Eine einzelne riesige Illustration lenkt uns im Alleingang davon ab, dass es sich um eine Webseite handelt. Es fühlt sich eher wie ein Kunstwerk an, das zufällig ein kleines interaktives Element hat, sicherlich eine großartige Möglichkeit, einen großen Einfluss auf die Nutzer zu nehmen und ein unvergessliches Bild zu schaffen.
Muziekpark
Während diese Seite nicht ganz so radikal einen Ansatz verwendet, ist die Illustration immer noch groß und prominent im Layout. Hier haucht das animierte Bild Leben in die Seite ein. Kombinieren Sie dies mit einem kreativen und ungewöhnlichen Layout und es fühlt sich völlig unabhängig von der Technologie, die es antreibt. Vielleicht spielt auch die Tatsache eine Rolle, dass es nicht wie eine normale Website aussieht. Bedenken Sie auch, dass die Illustration in diesem Fall wirklich hilft, uns über das Thema der Website zu informieren.
Egopop
In einem weiteren atypischen Layout finden wir, dass die Illustration umgesetzt wurde. Hier erzählt uns das Kunstwerk nicht nur von dem Individuum, das die Site darstellt, sondern es bricht uns auch aus der normalen Web-Mentalität heraus, die ein Besucher haben könnte. Wieder fühlt es sich mehr wie ein interaktives Kunstwerk als eine Website an. Wenn dies Ihr Ziel und Ihre Bedürfnisse sind, dann ist dies ein großartiger Ansatz.
Zaarly
Im Vergleich zu den vorherigen Beispielen, die Zaarly Seite steht in starkem Kontrast. Obwohl das Design von einer einzigen großen Illustration bestimmt wird und diese Illustration dazu dient, einen Ton für die Site zu setzen, ist die zugrundeliegende Funktion weitaus komplexer als diese anderen Samples.
Diese Site ist eine Anwendung, die verwendet werden soll. Und die Illustration hilft dabei, bestimmte Erwartungen zu erfüllen. Es vermittelt ein unbeschwertes, humanistisches Gefühl, das eindeutig organisch und natürlich ist. Stellen Sie sich dies im Gegensatz zu semi-minimalistischen Apps ohne Persönlichkeit vor. Das Design verleiht der Site ein Gefühl der Zugänglichkeit und verschiebt unsere Erwartungen.
Fazit
Die Verwendung von Illustration im Design ist eine uralte Praxis und ihre Anwendung im Web ist klar. Wie bei jedem Gestaltungselement genieße ich den Prozess, seinen Zweck und seine Verwendung zu überdenken. Durch solch eine Anstrengung stelle ich unweigerlich fest, dass ich ein besseres Verständnis davon bekomme, wie es funktioniert, Wege, es für einen beabsichtigten Zweck zu nutzen, und letztendlich einige frische und inspirierende Ideen.
Wie benutzt man Illustration im Webdesign? Bitte teilen Sie Ihre eigenen Erfahrungen unten ....