24 disegni di siti Web intelligenti che combinano JQuery e illustrazione
Grazie alla potenza di JavaScript, le parole "dinamico" e "illustrazione" non si applicano più esclusivamente ai siti Web basati su Flash.
Ora che l'HTML dinamico è una realtà nei browser più comunemente utilizzati e che esistono molte librerie JavaScript fantasiose per semplificare l'utilizzo, i siti Web CSS possono riprendere parte della credibilità della strada così stretta da Flash.
Di queste nuove librerie JavaScript, jQuery è diventato uno dei più ampiamente adottati per la sua facilità d'uso, l'ampiezza delle funzionalità e l'attenzione iniziale sull'unicità visiva.
Ecco 24 esempi intelligenti di design di siti Web che utilizzano jQuery e illustrazione .
1.Form Fifty Five
Caratteristiche: Modifica dell'intestazione dell'intestazione; più finestre di presentazione piccole.
Descrizione: non solo questo sito offre molti contenuti di design veramente validi, ma jQuery viene utilizzato in vari modi per migliorare l'aspetto e l'usabilità del sito web. Aggiungi uno sfondo illustrato che cambia periodicamente e alcuni controlli di interfaccia circolare e hai un bel matrimonio tra jQuery e illustrazione.
Home page con illustrazione dell'intestazione: 
Attiva la colonna sinistra con i tag: 
Intestazione ombreggiatura finestra per l'accesso: 
2. Frozn
Caratteristiche: scorrevole verticale e orizzontale.
Descrizione: Oltre ai grandi cerchi dai colori vivaci con numeri, la caratteristica che ho notato di più sono le immagini del profilo illustrato. Quindi, li ho cliccati. Ecco quando è avvenuta la magia: ombreggiatura delle finestre verticale e orizzontale che ha aperto una serie completa di post di blog con video Vimeo incorporati. Il gradiente del footer persistente è un effetto interessante quando scorri verso il basso.
Grandi cerchi e illustrazioni dell'autore sulla home page: 
Contenuto in espansione verticale: 
Le illustrazioni dell'autore si espandono per rivelare blog e video: 
3. Mockup per iPhone
Caratteristiche: trascinamento della selezione, targeting
Descrizione: Se hai mai pensato di creare un'app per iPhone (e quale sviluppatore Web non ha?), Questo potrebbe essere un sito web da verificare. Permette di trascinare e rilasciare elementi di interfaccia disegnati o disegnati al computer su un contorno di iPhone disegnato o disegnato da computer. Sebbene sia un design abbastanza semplice, è un uso innovativo dell'illustrazione che poteva essere stato rimosso solo in precedenza con Flash.
Editor per iPhone disegnato da computer: 
Editor di sketch per iPhone: 
4. Florida fiorisce
Caratteristiche: Mouseover con trasparenza, presentazione
Descrizione: i colori brillanti e i dettagli dell'albero illustrato in questa pagina iniziale sono immediatamente disponibili. Fai clic su una delle categorie derivate dall'albero e otterrai non solo contenuti descrittivi basati su jQuery ma anche un albero completamente diverso. Scorri verso il basso e vedrai una bella presentazione centrata e un piè di pagina che riprende il motivo naturale sottoterra.
Vista completa della home page, con grande albero, slideshow e piè di pagina: 
Albero "usabilità": 
Albero "Flessibilità": 
5. App Round Tea
Caratteristiche: Slideshow, animazione secondaria, oggetti scorrevoli
Descrizione: Forse sono io o un segno che Apple ha designer brillanti, ma mi piacciono i siti web che hanno ritagliato foto di iPhone. Questo sito Web ha uno sfondo animato, con una presentazione in-screen attivata dal mouse su alcuni pulsanti ben fatti. Il tipo arrotondato Helvetica si fonde perfettamente con il design del telefono e dei pulsanti. Le illustrazioni a tema del tè sulla pagina e negli screenshot dell'app collegano tutto insieme.
Animazioni all'interno della grafica dell'iPhone nella pagina: 
La finestra pop-up mostra lo schermo dell'app: 
Un'altra schermata dell'app Tea Round mostrata nella grafica dell'iPhone: 
6. Migliore prima
Caratteristiche: Posizionamento dello schermo, animazione di navigazione
Descrizione: Se i siti Web potrebbero prendere steroidi jQuery, questo sarebbe il Barry Bonds del web. Con tutte le immagini dinamiche, questo sito web potrebbe essere facilmente scambiato per un sito Web Flash. Dopo un'attenta ispezione, tuttavia, scoprirai che la pagina non è né Flash né complessa dal punto di vista della programmazione. Ma la consapevolezza che non esiste una traccia di Flash rimarrà impressa nella tua psiche.
Il menu principale: 
Più cose in parentesi graffe: 
Sottomenu e portfolio: 
Animazione
Trovare una progettazione del sito Web per la quale DHTML è stato scelto per creare l'animazione è sempre una sorpresa. La parte migliore per me è che posso vederlo sul mio iPhone. Sono sicuro che non è questo il motivo principale per cui i designer hanno scelto di ignorare Flash e i suoi strumenti di animazione. Non so quanto si affidassero a jQuery per codificare le loro animazioni, ma dovevano avere tendenze sadiche di qualche tipo per farcela.
7. L'occhio di Tori
Caratteristiche: uccelli Origami che volano in orizzontale.
Descrizione: chi pensa di usare origami su una pagina Web? E chi pensa di usare gli uccelli origami blu per rappresentare i tweet, piuttosto che l'illustrazione blu standard? E chi pensa di animare i tweet? La risposta a queste domande è, i creatori di Tori's Eye. Costruisci un sito Web con una di queste funzionalità e avrai qualcosa di completamente originale. Per questi creatori, avere tutte queste funzionalità non era sufficiente. Hanno preso la decisione controintuitiva di fare tutte le animazioni senza Flash!
Origami Twitter uccelli che volano attraverso un paesaggio: 
8. Borse
Caratteristiche: Animazione di presentazioni e piè di pagina con icone a un colore.
Descrizione: L'uso di jQuery qui è più ovvio quando la presentazione viene attivata da un clic nell'area di navigazione. Lo spazio bianco espansivo, il tipo nero e le illustrazioni delle icone corrispondenti creano un sito Web di bell'aspetto. Ma ecco, un'animazione nel footer non ha smesso di funzionare dal tuo arrivo. Fai clic con il pulsante destro del mouse sulle animazioni in tinta unita e scoprirai il segreto del film di lunga durata del sito Web: Sprites e DHTML.
Home page con molto spazio bianco: 
Grandi icone sparse in tutto il contenuto della presentazione: 
L'animazione del piè di pagina viene eseguita continuamente, indipendentemente da dove ti trovi sul sito web: 
9. Kidd 81
Caratteristiche: animazione dell'intestazione che viaggia orizzontalmente.
Descrizione: I disegni a tema invernale dai colori vivaci catturano immediatamente la tua attenzione e il design ha continuità fino al piè di pagina. Come alcuni di questi altri siti Web che utilizzano jQuery per animare oggetti, le immagini fluide sembrano indistinguibili da Flash a prima vista. La ciliegina sulla torta, però, è la trascinabile "Wow! Non posso credere che tu possa trascinare queste "icone".
Animazioni dell'intestazione della Home page: 
Un footer con lo stesso tema illustrato: 
La sezione del negozio ha lo stesso carattere e i seguenti colori: 
Scorrimento verticale
Alcuni strumenti JavaScript sono in grado di attivare lo scorrimento uniforme tra le sezioni di una pagina. jQuery, ovviamente, è più che capace di eseguire questo effetto, e almeno alcuni dei siti web in questa sezione prendono questa strada. Lo scorrimento dinamico è un bell'effetto, ma combinato con illustrazioni creative e dettagliate, la caratteristica è solo una parte dell'immagine più grande.
10. Tomas Pojeta
Caratteristiche: cielo, oceano, sott'acqua.
Descrizione: Come altri siti Web in questa sezione, Pojeta adotta un motivo che va dall'altitudine al di sotto della superficie. La parte superiore del sito web è nello spazio esterno, con il suo razzo e scimmia molto dettagliato. Scorri verso il basso e vedrai alieni e palloncini nella bassa atmosfera. Più in basso c'è un pezzo di terra dall'aspetto dell'Isola di Pasqua in mezzo all'acqua, che porta ad una vista sott'acqua con un sottomarino. Ogni illustrazione si adatta e le transizioni sono praticamente senza soluzione di continuità.
Razzo e scimmia nello spazio: 
Isola di Pasqua e Tucano: 
Sottomarino sott'acqua: 
11. Morphix
Caratteristiche: Spazio, cielo, terra, sottoterra.
Descrizione: Morphix inizia anche con qualche azione atmosferica superiore, ma poi passa alla terra invece che al mare e termina con una spalla sotterranea. Lo stile è ovviamente diverso, ma l'illustrazione per ogni livello si estende sulla larghezza della pagina, come l'ultima, creando un senso di orizzonte. E ancora, il passaggio dal cielo al sottosuolo scorre senza intoppi, soprattutto con lo scrolling dinamico.
Atmosfera superiore, con portafoglio: 
Piano terra, con mucche e grattacieli: 
Underground, con radici degli alberi e marmotta: 
12. GANDRWeb
Caratteristiche: varie infografiche.
Descrizione: a differenza dei precedenti due siti Web, questo utilizza infografiche al posto di personaggi, paesaggi e sfondi. Ogni sezione della pagina spiega la grafica che accompagna. La parte inferiore della pagina presenta, senza sorprese, un grande modulo web. Un sito web puramente commerciale che utilizza tanta buona illustrazione è raro. Le transizioni attivate da jQuery aggiungono brillantezza al messaggio.
Infografica che spiega benefici e prezzi: 
Infografica che spiega il processo di progettazione: 
Modulo Web: 
13. Orman Clark
Caratteristiche: nuvole, terra e oggetti volanti
Descrizione: Come i primi due siti Web in questa sezione, il sito Web di Orman Clark inizia con il cielo, ma la pagina alta continua con il cielo nuvoloso fino al piè di pagina, dove colpiamo il terreno. Una differenza evidente tra questa pagina e la maggior parte degli altri in questo articolo è la posizione fissa della navigazione principale e dell'illustrazione. Questo è accentuato dallo starburst nella parte superiore dello sfondo che evidenzia l'uovo fluttuante. Il sito Web presenta anche una presentazione jQuery ben integrata per il portfolio.
Palloncino, mucca e uovo: 
Presentazione di portfolio Biplane e jQuery: 
Modulo Web, piè di pagina e navigazione fissa: 
14. Sognatori
Caratteristiche: vari collage.
Descrizione: il sito Dreamerlines ha un approccio discreto. Come GANDRweb, ogni sezione ha una grafica distinta che è legata alle sezioni adiacenti solo dallo spazio bianco. Ogni sezione, però, è unica, dettagliata, colorata e accattivante. Le illustrazioni pesanti, il testo in grassetto e la colorazione di sfondo danno il tono.
Grande testo per iniziare: 
Collage in-your-face: 
Modulo Web circondato da molte immagini: 
15. Snack sociale
Caratteristiche: filo, uccelli e terreno.
Descrizione: Il motivo del cielo non invecchia mai ei designer possono scegliere tra un numero qualsiasi di tavolozze per colorare il loro orizzonte. L'orizzonte di Social Snack è un po 'confuso, con un pronunciato verde e marrone. Gli uccelli si siedono su fili che sono sparsi verticalmente in tutta la pagina per separare le sezioni. Il sito Web termina con un tetto. Sebbene il blog non abbia uno scorrevole scorrimento jQuery, l'intestazione divertente illustrata con caratteri carini merita di essere menzionata.
La tavolozza dei colori e il motivo degli uccelli nella parte superiore: 
I telai per le foto della squadra pendono da un filo di uccello: 
Simpatici personaggi nella sezione del blog: 
Presentazione
Uno degli usi più frequenti e riconoscibili di jQuery è per la presentazione venerabile. Ogni volta che vedi il contenuto scivolare sullo schermo dopo un clic del mouse e non è possibile trovare Flash, probabilmente è jQuery. Troverai presentazioni su siti web aziendali, pagine di destinazione, portafogli di agenzie, siti di e-commerce, ovunque. Sono così onnipresenti. Di seguito sono riportati alcuni esempi di presentazioni che prendono vita grazie a illustrazioni nitide.
16. GoSiteWave
Caratteristiche: presentazione verticale con navigazione orizzontale e icone attraenti.
Descrizione: la presentazione a scorrimento verticale, combinata con icone e immagini, è la vera storia qui. Si prevede che le diapositive scorrano orizzontalmente, quindi il contrario qui è accattivante. Il blu brillante e le arance, i pulsanti arrotondati slick e lo sfondo scuro con strisce di luce abilmente posizionate aggiungono all'effetto. Ovviamente, se le icone non fossero così ben fatte, il sito potrebbe non essere stato tagliato.
Grafica diapositiva della home page: 
Un'altra presentazione: 
17. Sketch
Caratteristiche: presentazione orizzontale di filmati Flash, con contenuti precaricati, testo e illustrazioni.
Descrizione: Se ti piace il giallo, amerai questo sito. Questa presentazione presenta grandi illustrazioni ritagliate che mantengono intatto lo sfondo giallo. Un'ulteriore presentazione nel pop-up "lightbox" contiene il portfolio. Ho detto che le illustrazioni erano grandi? Occupano molto spazio, ma sono molto ben fatti. Il colore di sfondo e le immagini sono accentate dagli elementi di navigazione verde e bianco e il forte contrasto garantisce che l'usabilità non sia un problema.
Megafono: 
Piè di pagina bianco: 
Mela: 
Portafoglio in "lightbox": 
18. Forma cinquantacinque
Caratteristiche: Scorrimento verticale fluido, contenuto del blog generato dinamicamente, presentazione, evidenziazione principale della navigazione,
Descrizione: non lasciarti ingannare dalla tavolozza dei colori monocromatica e dai semplici disegni al tratto. Questo sito di agenzia ha tutto. Scorrimento verticale fluido, piè di pagina fisso che sovrappone il contenuto, una presentazione portfolio, contenuto blog incorporato dinamicamente, ecc. Con tutte queste funzioni, ciò che distingue davvero il sito è il numero totale di illustrazioni casuali, e il fatto che esse siano " tutto molto divertente. Lungo queste linee, una visita al sito non è completa senza campionare l'esilarante video "Informazioni".
Un sacco di illustrazioni nella schermata iniziale
I caratteri tipografici corrispondono allo stile dell'illustrazione
Diapositiva di portfolio
I titoli di navigazione del piè di pagina si evidenziano mentre scorri
Scorrimento orizzontale
A differenza della presentazione, che di solito è limitata a una sezione di un sito Web, lo scorrimento orizzontale (come definito qui) avviene a livello di browser, o almeno lo ritiene in questo modo. Lo scorrimento orizzontale dinamico non ha tanti grandi esempi come lo scorrimento verticale; ma come vedrai, i designer che pensano in orizzontale hanno una grande immaginazione.
19. Taglio seriale
Caratteristiche: grandi illustrazioni per portfolio; scorrimento orizzontale e verticale.
Descrizione: questa presentazione è progettata per occupare l'area di visualizzazione del browser. Non è possibile scorrere verso sinistra o destra, ma è importante? Le illustrazioni e il design sono così eccezionali che lo sviluppatore potrebbe aver avuto un incrocio, un capovolgimento o qualsiasi altro metodo non intuitivo di navigazione e la gente avrebbe comunque speso lo sforzo per capire cosa succederà dopo. Ciò che aiuta veramente è la dimensione dell'icona di navigazione e che il portfolio di foto e immagini occupa l'intero schermo.
treni: 
Copertina del CD: 
Ragazzo 3-D con scarpe: 
20. Tyler Finck
Caratteristiche: transizioni orizzontali, con animazioni create sullo sfondo.
Descrizione: Ecco un ottimo esempio di utilizzo dell'immagine di sfondo per creare un effetto di animazione per lo scorrimento orizzontale dinamico. La tavolozza dei colori è principalmente in bianco e nero. I caratteri tipografici sono in grassetto e presentano spessi sfondi con blocchi in determinati punti e il tipo di immagine ha un aspetto approssimativo. Il pacchetto completo funziona bene.
Una pagina iniziale minimalista: 
Bio: 
I soldi sparati: 
Altre funzionalità
Alcuni siti web che utilizzano jQuery non sono facilmente catalogabili. Potrebbero avere caratteristiche insolite o fare un uso sottile di jQuery o adattare una tecnica comune in un modo insolito. Pre-caricamento, completamento automatico del testo, dissolvenza in entrata e in uscita e sovrapposizione di testo su immagini sono alcuni dei trucchi trovati nel set finale di siti Web in questa raccolta.
21. Etichetta arancione
Caratteristiche: pre-caricamento dell'immagine.
Descrizione: Il pre-caricamento dell'immagine è l'estensione dell'uso di jQuery da parte di Orange Label. Mentre scorri verso il basso, gli elementi del portfolio vengono aggiunti alla pagina (con una grafica rotante che ti dice che stanno pre-caricando). Dal punto di vista dell'usabilità, questa comoda funzione consente alla pagina di caricare automaticamente il contenuto di larghezza di banda. L'illustrazione in alto è un grande, colorato, molto dettagliato e delizioso eye candy.
L'illustrazione: 
Illustrazione ingrandita: 
Elemento del portfolio e piè di pagina: 
22. Silk Icon Finder
Caratteristiche: completamento del testo.
Descrizione: digita il nome di un'icona e questo sito Web ordina le sue icone in base ai possibili risultati di ciò che hai digitato finora. La qualità delle icone è piuttosto buona e il servizio è piuttosto conveniente nel complesso. Poiché il design riguarda davvero i risultati di ricerca, ha poco in termini di distrazione visiva, il che è un grande vantaggio.
Visualizzazione predefinita: 
Risultati della ricerca per "luce": 
23. Vyniknite
Caratteristiche: dissolvenze.
Descrizione: Questo sito inizia con una grande illustrazione di dente di leone, un buon layout e una buona selezione di caratteri tipografici. L'unica azione evidente di jQuery che si verifica è la dissolvenza e l'eliminazione che si verificano durante la navigazione delle schede. Un'altra piccola fetta di paradiso è il modo in cui gli steli del dente di leone si sovrappongono sia alle schede attive che a quelle inattive. E se guardi da vicino lo sfondo, vedrai alcuni elaborati turbini di vento che accompagnano la fauna galleggiante.
Denti di leone a bizzeffe: 
24. Halo Agency
Caratteristiche: presentazione automatica con illustrazione di sfondo; testo sopra le immagini.
Descrizione: sfondi, sfondi, sfondi. Naviga attraverso questo sito Web e troverai una varietà di elementi decorativi pieni di illustrazioni tridimensionali colorate. È possibile accedere a un portfolio straordinario attraverso una slideshow jQuery sulla home page. In alternativa, puoi trovare informazioni su ciascun elemento nella sezione del portfolio (o "lavoro") dall'overlay di testo sulla miniatura.
Home page con slideshow: 
Il portfolio sovrappone il testo alle immagini: 
Un altro sfondo colorato: 
Scritto esclusivamente per WDD da Maurice Wright. È un web developer, designer e creatore di Moluv.com . Dal 2000, Moluv è stata una fonte di ispirazione del design per le menti creative alla ricerca dei siti Web più belli su Internet.
In che modo jQuery ha cambiato il tuo modo di progettare i tuoi siti web? Si prega di commentare qui sotto ...