L'uso dell'illustrazione nel web design
L'illustrazione è uno strumento incredibilmente versatile che può trovare molti usi diversi nel design. E quando si tratta di web design possiamo trovare una varietà estremamente ampia di implementazioni.
Oggi voglio approfondire alcuni dei modi principali in cui questo strumento è stato messo a punto in modo da poter attingere nuove idee per ispirare e sfidare i progetti che produciamo.
Cominciamo da qualche parte raramente, con una definizione di base: Illustrata: 1) Per chiarire ; 2) Per chiarire dando o servendo come esempio o istanza; 3) Fornire funzionalità visive destinate a spiegare o decorare .
Sembra che nel mondo reale del web design, l'illustrazione tenda ad eseguire entrambe le funzioni contemporaneamente. Abbellisce mentre chiarisce. E se è solo facendo uno di questi potrebbe essere necessario chiedersi perché. Forse mettendo l'illustrazione al lavoro adempiere a entrambi i ruoli è il modo di sfruttare appieno l'elemento del design per tutto ciò che vale.
Questo, naturalmente, non significa che un progetto non può avere successo se gestisce solo l'uno o l'altro; certo che può Ma per ottenere il massimo dal nostro lavoro, trovo che sfidare il nostro pensiero sia sempre utile. Come al solito, analizziamo alcuni raggruppamenti di campioni per vedere cosa si può fare con questo dispositivo visivo. Lungo la strada, considera se ogni approccio offre chiarezza o decorazione, o entrambi.
Illustrazione tematica
Il primo approccio all'illustrazione che voglio trattare qui è l'uso di questo stile per produrre un approccio tematico globale. In questa situazione le illustrazioni sono messe al lavoro per stabilire un tema generale. Stiamo scalando montagne, visitando una stazione spaziale o esplorando l'ufficio di un'azienda?
Mentre questo approccio non deve portarci in un luogo, lo fa abbastanza spesso. In altre situazioni lo stile stabilisce semplicemente un motivo generale che il sito segue.
Il motivo per cui siamo interessati qui è che viene utilizzato per guidare il design generale in modo radicale. L'illustrazione non è un piccolo elemento di supporto. Invece, è l'elemento di design più importante e controlla l'intero layout.
Porta il mio capo a Capo Nord
In questo esempio l'approccio non potrebbe essere più chiaro. Il design del sito riecheggia chiaramente il suo scopo più basilare. L'illustrazione fornisce un riferimento visivo a ciò che l'individuo farà. E in termini di definizione dell'illustrazione, l'opera d'arte fornisce decorazione e bellezza alla pagina.
In questo caso il tema stabilisce fermamente lo scopo del sito e aiuta l'utente ad acquistare il concetto.
Kit di lancio
Un approccio tematico non deve essere così diretto in un modo. A volte può essere una parte più naturale di un sito più tipicamente strutturato. In questo caso, il sito è leggermente unico nel suo layout e il tema non impone alcune interfacce over-the-top basate su navi missilistiche.
Invece, il tema è intessuto nel design in modo tale da comunicare i suoi tocchi decorativi senza interferire con il contenuto. Qui l'illustrazione serve per decorare, ma non chiarire così tanto. Ciò non sorprende affatto e ovviamente dimostra che non esiste una formula da seguire.
Atelier Anonyme Design
In altre situazioni come questa, l'illustrazione tematica è letteralmente il sito. Non è un elemento di supporto, ma diventa piuttosto completamente il design stesso.
Qui l'uso dell'illustrazione gioca chiaramente un ruolo di decoro. Ma direi che fornisce anche un grande livello di chiarezza al visitatore. Questo è un sito web per un'agenzia di design. Il design e la natura di questo sito comunicano molto ai suoi visitatori. In quanto tale, sono certo che funge da filtro massivo per la loro base di clienti. Sarai attratto e amerai il loro approccio giocoso e creativo, oppure sarai completamente escluso da esso. Quindi, a questo punto, penso che fornisca una grande dose di chiarezza sull'agenzia e sulla loro mentalità.
Allure Graphic Design
In questo sito l'uso dell'illustrazione gioca anche un chiaro approccio tematico. Sebbene il sito segua alcune formule di layout standard, l'intero design è racchiuso in un layout tematico. Questi elementi guidano non solo il design del sito, ma si fondono con il logo principale e la copia utilizzati sul sito. Il tema è coinvolgente e guida l'intero messaggio che il sito presenta.
Ulteriori campioni tematici
Ecco alcuni siti aggiuntivi che fanno uso di illustrazioni tematiche per stabilire un ambiente o un tema per un sito.
Chipmunk
Drift Boys
Iutopi
Chandu4u
Mascotte
Come potrei coprire l'idea di usare le illustrazioni senza rivedere una delle più ovvie: le mascotte? Con questo elemento visivo i designer tendono a personificare il sito, il suo prodotto o lo scopo con un personaggio. Non solo l'implementazione di un tale elemento varia, ma anche il potere e il ragionamento che sta dietro lo fanno.
inkFinder
In questo disegno la mascotte illustrata gioca un ruolo piuttosto chiaro. Chiaro in quanto eco il nome del prodotto. Non fornisce solo un po 'di vita per il design, ma ci dà un volto. In questo modo il pubblico ha qualcosa di un po 'più unico da archiviare nel loro cervello. Speriamo che la mascotte contribuisca a rendere l'esperienza più memorabile e unica che possa aiutare il prodotto a distinguersi dall'udito.
Forse questo è lo scopo più potente dietro una mascotte, per aiutare qualcosa di risaltare. Il bello di una mascotte illustrata come questa è che può essere totalmente unico e specifico per questo prodotto. Supponendo che sia stato creato su misura per questo progetto, dovrebbe essere l'unico posto in cui esista questa illustrazione esatta.
The Evnt
Ironia della sorte troviamo qui un'altra mascotte illustrata simile a un polpo (che cosa è una creatura marina a tre zampe?). In questo caso la mascotte è ovviamente un passo molto più lontano dalla realtà: una creatura robot a tre gambe con un cervello in una bolla.
Anche se potrebbe essere una scelta strana, fornisce un bellissimo elemento distintivo per l'evento. Questa mascotte unica dà un elemento visivo interessante per connettersi con l'evento. Assume una vita tutta sua e collega davvero le persone con qualcosa di concreto. Suppongo che questo sia esattamente lo scopo di una mascotte.
Il design di questo sito è bello, ma considera quanto sarebbe noioso senza questa mascotte pazza in atto. Produrre un tale elemento non è facile, ma è estremamente efficace in questa situazione.
Big Eye Creative
Per un esempio di una mascotte basata su non-polpo, dai un'occhiata al Big Eye Creative luogo. Qui la mascotte non gioca un ruolo predominante nel design. Tuttavia, aggiunge molta personalità ad esso. Ovviamente le altre illustrazioni e lo stile generale del sito offrono una presentazione meno formale. Ma la mascotte nel logo è presente in tutto il sito. Ciò garantisce il loro stile spensierato permea il design.
Altre illustrazioni di mascotte
Ecco alcuni esempi extra di mascotte al lavoro nel design. Compreso ancora un altro polpo uno; sembrerebbe che sia popolare da usare.
Gestione dei record pionieristici
Argyle Octopus
Coucou
Konsebt
Decorazione illustrata
Il prossimo tipo di utilizzo che vorrei considerare è quello a cui mi riferisco come decorazione tematica. Questo è quando l'illustrazione viene messa all'opera in un modo decorativo che in realtà non fornisce un riferimento fisico specifico. Ad esempio, la maggior parte delle illustrazioni include immagini di persone, animali, oggetti o luoghi. Ma in questo caso l'illustrazione non rappresenta tanto qualcosa di reale, ma piuttosto fornisce semplicemente una decorazione per abbellire il design in un modo che solo l'illustrazione può. Come sempre, chiariamolo attraverso alcuni esempi.
Temi di 1000 WP
Per il nostro primo esempio, considera il Temi di 1000 WP sito web. In questo sito l'uso dell'illustrazione fornisce una struttura e uno stile di base per il sito. Ma lo fa in ciò che è più puramente decorativo. Lo stile generale sembra un'illustrazione, eppure non ha i tipici elementi umanistici.
Ora, voglio assolutamente contraddire me stesso. Penso che lo stile sia prevalentemente decorativo. Ma posso effettivamente vedere come potremmo sostenere che fornisce un livello di chiarimento per il sito. Lo stile utilizzato dal design si connette a un determinato pubblico. Dice qualcosa sullo stile del sito e sui temi che potrebbero produrre. In molti modi, la qualità del layout illustrato dimostra la qualità del lavoro che potreste aspettarvi di vedere attraverso questo sito. In questo modo, il chiarimento è forse più sottile e meno nella tua faccia, ma presente comunque.
Storia della Coca-Cola
Su questo sito web troviamo un altro design guidato dall'illustrazione. Ci sono alcuni elementi illustrati qui che dimostrano cose vere, ma la maggior parte dell'approccio tematico è stabilito con pura decorazione. Questo esempio non solo dimostra l'approccio, ma mostra anche che quasi nessuna tecnica viene utilizzata in modo purista. La realtà è che probabilmente unirai questi elementi in vari modi.
Metaphiziks
In questo ultimo esempio di illustrazione decorativa trovi alcuni elementi di sfondo eccellenti. Alcuni di questi sono più tangibili di altri, ma nel complesso riguardano più elementi di supporto stilistico che altro. È straordinario quanto possano essere belli questi semplici disegni a tratteggio se abbinati a testo bellissimo, colori ben scelti e icone semplici. Il risultato finale qui è fantastico e straordinariamente bello.
Più disegni con decorazioni illustrate
Ecco alcuni esempi aggiuntivi per completare questo tipo di illustrazione nel design.
Moo's Cupcakes
Lavori tecnologici
Pixel Stadium
Borse personalizzate HQ
Testo illustrato
Il testo reso a mano non è certamente un nuovo concetto ed è qualcosa che ho trattato molte volte prima . Tuttavia, non ho mai considerato un simile approccio con una prospettiva illustrativa.
Il testo di rendering a mano è una variante popolare del testo illustrato e un'ottima soluzione per molti creativi. Per uno, è un ottimo modo per mettere a frutto tutto l'addestramento scolastico d'arte pratica. In secondo luogo, è un ottimo modo per produrre qualcosa di unico. Dopotutto, se passi a renderizzare del testo sarà unico al 100%. Anche se si disegna su un carattere tipografico esistente, esso diventerà comunque una creazione distinta.
Rangus
Questo è un perfetto esempio di tipo illustrato. Lo stile è estremamente sfarzoso, totalmente unico e molto invitante. Ma non finisce qui. Il tipo di rendering a mano mostra in realtà i talenti individuali. Mostra che crea opere d'arte con le sue mani e si collega perfettamente alle sue capacità di animazione. Mi piace particolarmente il fatto che sia tutto basato su un tema lavagna in quanto lega perfettamente il tema e gli elementi perfettamente. A mio avviso questo sito dimostra come l'illustrazione unificante possa essere con lo scopo e il messaggio del sito.
Joey Lomanto
In questo caso, il testo illustrato è molto più sottile. Invece di guidare l'intera direzione del design, funziona semplicemente bene. In effetti, alla prima ripresa non si potrebbe nemmeno notare lo stile di rendering a mano del testo della grande pagina iniziale. Certo, il testo potrebbe essere effettivamente un font, ma è stato usato in modo tale da fondersi perfettamente con lo stile del sito. Indipendentemente da ciò, lo stile è splendidamente unificato e l'illustrazione gioca molti ruoli nel design generale.
Andare in diretta
Tuttavia, il testo illustrato non deve essere reso a mano. Come troverete in questo esempio, il testo è stilizzato in vari modi che trasformano il testo stesso in parti dell'illustrazione generale. La bellezza di questo approccio è che unifica il testo con le altre illustrazioni. Ciò evita una sensazione meno unitaria in cui si hanno semplicemente illustrazioni sul testo standard basato sul web. Quest'ultimo può funzionare, ma in questo caso l'impatto del testo illustrato è chiaro.
Ulteriori esempi di testo illustrato
I seguenti esempi si adattano liberamente a questa categoria. Dico liberamente, perché a volte è difficile dirlo perché a volte è una cosa sottile. In alcuni di questi casi il testo sembra semplicemente un'opera d'arte, quindi l'ho inserito in questa raccolta.
Ribellione contraria
Fakta
La Web Shop
Illustrazioni informative
Con la stessa definizione di illustrazione, uno dei suoi scopi è quello di chiarire e spiegare. Quindi è giusto che troviamo alcuni esempi in cui le illustrazioni lo fanno con straordinaria chiarezza.
libresco
Iniziamo con il libresco luogo. In questo layout insolito troviamo che le illustrazioni simboleggiano molto chiaramente i vari punti del layout della home page. Ogni blocco ha un elemento visivo che non solo lo abbellisce, ma, soprattutto, lo spiega. Tanto che da lettore quasi non ho nemmeno bisogno di leggere la copia. L'illustrazione dei dispositivi in basso a sinistra lo dimostra in modo particolare.
Conferize
In un modo molto meno prominente l'illustrazione di questo disegno si dimostra altrettanto istruttiva. La semplice illustrazione dimostra da sola l'argomento del sito. Potrebbe non batterti in testa con il suo messaggio, ma riecheggia splendidamente lo scopo del sito.
Attivare
L'illustrazione in questo disegno non solo comunica informazioni sull'evento che rappresenta, ma riecheggia anche lo scopo stesso dell'evento. Questo particolare evento ruota attorno alla disconnessione dalla tecnologia. È un'opportunità per le persone inondate dalla tecnologia di sfuggire alle sue grinfie.
L'illustrazione qui mostra ciò che i partecipanti faranno, quindi è informativo. E per sua stessa natura, l'illustrazione rompe con la tecnologia e si radica in una sensazione puramente organica, un modo fondamentale per comunicare lo scopo dei siti.
Altre illustrazioni informative
Questi siti extra dimostrano anche l'idea di illustrazioni che ci informano. Alcune sono icone minuscole e di base, mentre altre sono elementi immersivi che definiscono e rappresentano completamente il contenuto.
Vitality City
Uklizenodoma.cz
Qubiq
Un antidoto tecnologico
Con l'ultimo esempio (The Attivare sito) siamo entrati in ciò che voglio considerare in seguito, l'uso dell'illustrazione per rompere con il senso orientato alla tecnologia delle cose. A volte è necessario disconnettersi dalle basi tecnologiche del web e dimostrare una sensazione molto organica. L'illustrazione è uno degli strumenti più potenti per realizzare una simile idea.
Applicazione di spedizione
Questa semplice pagina in arrivo è a dir poco straordinaria. E chiaramente come realizza la sua bellezza è radicalmente semplice. Un'unica enorme illustrazione, da sola, ci distrae dal fatto che si tratta di una pagina web. Sembra più un'opera d'arte che abbia un piccolo elemento interattivo, certamente un ottimo modo per avere un impatto enorme sugli utenti e creare un'immagine memorabile.
Muziekpark
Sebbene questo sito non utilizzi un approccio abbastanza radicale, l'illustrazione è ancora ampia e prominente nel layout. Qui l'immaginario animato respira la vita nella pagina. Combina questo con un layout creativo e insolito e si sente completamente distaccato dalla tecnologia che lo guida. Forse anche il fatto che non assomigli a un sito normale gioca un ruolo importante in questo. Considera anche che l'illustrazione in questo caso aiuta davvero a informarci sul tema del sito.
Egopop
In un altro layout atipico troviamo che l'illustrazione è stata messa al lavoro. Qui l'opera d'arte non solo ci dice dell'individuo che il sito rappresenta, ma ci distoglie anche dalla normale mentalità web che un visitatore potrebbe avere. Di nuovo, sembra più un'opera d'arte interattiva che un sito web. Se questo è il tuo obiettivo e bisogno, allora questo è un ottimo approccio da considerare.
Zaarly
Rispetto agli esempi precedenti, il Zaarly il sito è in netto contrasto. Sebbene il design sia governato da un'unica grande illustrazione, e questa illustrazione serve a impostare un tono per il sito, la funzione sottostante è molto più complessa di questi altri campioni.
Questo sito è un'applicazione destinata a essere utilizzata. E l'illustrazione aiuta a stabilire un certo insieme di aspettative. Dà un tocco leggero e umanistico che è chiaramente una sensazione molto naturale e naturale. Immagina questo in contrasto con le app semi-minimaliste senza personalità. Il design conferisce al sito un senso di accessibilità e sposta le nostre aspettative.
Conclusione
L'uso dell'illustrazione nel design è una pratica antica e la sua applicazione sul web è chiara. Come per qualsiasi elemento di design, mi diverto a riconsiderare il suo scopo e uso. Attraverso un tale sforzo, inevitabilmente trovo che ottengo una migliore comprensione di come funziona, dei modi per sfruttarlo per uno scopo previsto e, in ultima analisi, alcune idee fresche e stimolanti.
Come usi l'illustrazione nel web design? Per favore condividi le tue esperienze qui sotto ...