Le aggiunte illustrate ai siti Web possono conferire anche al tema più semplice un ulteriore livello di interesse visivo e complessità.

Le illustrazioni variano ampiamente da un sito all'altro. Alcuni sembrano disegnati a mano (che siano o meno) mentre altri sono ovviamente resi digitalmente.

Di seguito sono elencati più di trenta design di siti Web di grandi dimensioni con illustrazioni.

Più comuni sono le illustrazioni in intestazioni e sfondi, spesso di mascotte o personaggi del sito.

Ma le illustrazioni sono usate anche in altri modi. Se avete un sito illustrato preferito che non è menzionato qui, fatecelo sapere nei commenti.

Siti con illustrazioni digitali

Questi siti hanno illustrazioni che sono ovviamente digitali. Linee morbide e colori brillanti sono i tratti distintivi di questo stile, anche se non tutte le caratteristiche riportate di seguito sono conformi a questi standard.

F5

Il sito Web F5 utilizza un'illustrazione digitale estrosa per il loro background. I colori vivaci e i personaggi da cartone animato sono tipici delle illustrazioni digitali. Ciò che non è visibile qui è che l'illustrazione continua lungo la pagina, rivelando diversi livelli.


Wireframe Plus

Wireframe Plus utilizza un'illustrazione di sfondo monocromatica per il loro sito. È sottile, ma aggiunge davvero un tocco visivo in più e fa risaltare il sito anche se lo schema dei colori e la tipografia sono abbastanza standard.


Tom Bradshaw Design

Tom Bradshaw Design utilizza la tipografia in stile illustrato in tutto il sito, così come una mascotte dei personaggi dei cartoni animati, che appare in ogni sezione della pagina (è un sito di una pagina).


mediocre

Le illustrazioni digitali lucide come questa non sono viste molto spesso e si distinguono da altri siti. Questo si distingue ancora di più poiché è posizionato su uno sfondo nero e utilizza gli unici colori brillanti sulla pagina.


htmlMafia

Le illustrazioni qui sono una sorta di mix tra stili digitali e disegnati a mano, sebbene i gradienti usati li mettano più saldamente nella categoria digitale. Questo è un grande esempio di come le illustrazioni animano un sito e danno un'impressione più drammatica.


CreativeSwitch

Il robot illustrato qui è in realtà animato sul sito stesso, anche se in modo sottile. Altre illustrazioni sono usate in tutto il sito.


690 Design

Legare le illustrazioni nella copia di un sito Web è una strategia fantastica. Qui, il testo della tagline discute l'armonia e per l'illustrazione viene utilizzato un direttore d'orchestra.


Kipu

Le semplici illustrazioni in stile vettoriale hanno un impatto molto audace. Usando una tavolozza di colori più tenui per loro, come sopra, li fa mescolare più facilmente nel resto del sito.


Siringa 1

Questi personaggi sono un altro esempio di illustrazioni digitali che hanno un sentimento disegnato a mano per loro. In combinazione con la combinazione di colori, queste illustrazioni danno al sito web una sensazione amichevole e rilassata.


PixelBaecker

C'è molto da fare in questa illustrazione in stile vettoriale, dai ragazzi che lavorano nel buco nel sottosuolo fino al volatile nell'albero. Stilisticamente, è un'illustrazione vettoriale piuttosto tipica, sebbene l'esecuzione sia meravigliosa.


Pieoneers

Usare le illustrazioni per parlare di benefici o offrire altre informazioni, senza trasformarle in informazioni grafiche, è una grande strategia. È un modo divertente e interessante per trasmettere informazioni che hanno maggiori probabilità di coinvolgere i tuoi visitatori. Inoltre, la combinazione di una torta e un disco volante qui è semplicemente eccezionale!


Jacob Lee

Il pinguino qui illustrato sembra quasi disegnato a mano, ma è solo un po 'troppo lucido e levigato. La colorazione bianca spoglia (o la sua mancanza) spicca davvero sullo sfondo colorato.


Editing in una casa sull'albero

Lo sfondo illustrato qui cambia da una pagina all'altra e ha animazioni sottili. Ma è un bel pezzo d'arte, degno di un secondo sguardo.


Code Crunchers

Le illustrazioni digitali più comuni sono semplici personaggi o mostri come questo. E come mascotte, funziona perfettamente con il nome del sito.


Forrst

Sfondi illustrati come questo stanno diventando più comuni. La completa integrazione tra il contenuto e lo sfondo è ciò che lo distingue davvero.


Coo / Coo Core

Altre illustrazioni astratte come questa danno a un sito un sentimento più moderno. Questo è solo abbastanza astratto per farlo, pur essendo riconoscibile come un albero.


Generatore di joystick

La ripetizione del carattere di base sullo sfondo dell'intestazione aggiunge un ulteriore livello di interesse visivo a ciò che è un'illustrazione relativamente semplice. Lo schema dei colori qui utilizzato è semplice, ma quando combinato con lo sfondo sgangherato, sembra fantastico.


Fare film lavoro

Le illustrazioni sono viste meno spesso su siti in stile grunge, probabilmente perché corrono il rischio di creare confusione visiva. Ma la semplice illustrazione qui, con il suo schema di colori tenui e la sua trama sottile, funziona perfettamente in un design grunge più minimalista.


The Solid Studios

Un altro grande esempio di semplici mostri digitali utilizzati in un design. Questi ragazzi sono casuali e divertenti e rendono il sito web lo stesso.


Olive Crush

Le intestazioni sono una delle aree più insensate per l'uso delle illustrazioni. Attraverso l'uso creativo delle ombre esterne, questa illustrazione di intestazione sembra quasi 3D.


Sara Tusar

Un altro grande esempio di mostri, questa volta in un design di intestazione. Sono colori tenui, echeggiati dal resto del sito web, ma danno un tocco più personale.


Arbel-Designs

Il sito Web di Arbel-Designs utilizza uno sfondo illustrato a più livelli, che inizia nello spazio nella parte superiore della pagina e progredisce in profondità sott'acqua. Questo stile di sfondo illustrato funziona alla grande su siti a pagina singola.


Minding Monsters

Questi sono alcuni dei più semplici caratteri vettoriali in questo post. Sono molto carini, però, e sono completamente integrati nel design del sito. In realtà, sono l'intero punto del sito.


Siti con illustrazioni disegnate a mano

Le illustrazioni disegnate a mano sono meno comuni nel web design, ma ci sono ancora degli esempi fantastici. Si va dai disegni artistici ai doodle e tutto il resto.

Steve Schoger

Semplici schizzi come questo funzionano perfettamente per qualsiasi sito, ma soprattutto quando sostituiscono una tipica foto di designer (o di qualsiasi professionista). Sono anche un'ottima alternativa per chi è timido per le telecamere! Lasciare trasparire la trama dello sfondo per dare un tono della pelle è un bel tocco.


Kenny Meyers

Un'illustrazione di un supereroe su ciò che altrimenti è un sito abbastanza minimale può aiutare a infondere fiducia nei tuoi visitatori senza ricorrere a un design del sito "corporate". Riprendere i colori da altrove sul sito assicurano che l'illustrazione si integri perfettamente.


Andy Ward

Ha senso solo per un illustratore includere illustrazioni sul proprio sito. Andy Ward utilizza una presentazione delle sue illustrazioni nella sua intestazione, ma sono incorporate in modo tale che diventano parte del design stesso.



Kilian Muster

Un disegno di linea più formale e fine art come questo offre un richiamo alla tradizione; in questo caso: metodi di composizione tradizionali. È semplice ma abbastanza audace per avere davvero un impatto.


DNA a Darwin

Un altro grande esempio di un sito che utilizza disegni lineari per creare un senso della storia. Le illustrazioni a strati rendono tutto più interessante.


Cravatta a farfalla

Un sito più casual disegnato a mano, completo di mostri disegnati a mano (o è un alieno?). Il sito utilizza un'illustrazione di sfondo a più strati, che inizia nello spazio e finisce nel mare.



xhtmlCafe

Un'illustrazione disegnata a mano in combinazione con acquerelli crea un'intestazione fantastica e informativa sul sito xhtmlCafe. Gli elementi disegnati all'interno del dipinto gli conferiscono una sensazione più stilizzata di quella che avrebbe un acquerello dritto.



Attacco del web

Cosa sarebbe un post sui siti web illustrati senza un esempio di illustrazione in stile fumetto? Tutto, dagli spessori della linea alla colorazione ruvida, ricorda il tuo fumetto o graphic novel preferito.



Janko a Warp Speed

Una semplice illustrazione nell'intestazione qui è sottile e sobria ma aggiunge un'enorme quantità di fascino estetico al design del sito.



Scritto esclusivamente per WDD da Cameron Chapman .

Se hai altri siti web illustrati preferiti, condividili nei commenti!