La navigazione delle pagine è probabilmente l'aspetto più importante di qualsiasi sito web costruito correttamente. La facilità con cui i tuoi visitatori possono viaggiare da una pagina all'altra influirà sull'emozione e l'interfaccia utente del tuo sito web.
I grandi web designer tengono sempre una sorpresa dietro ogni angolo, ei menu di navigazione possono essere visualizzati in questo momento. Dai link a pagina intera ai link d'angolo ho condiviso alcuni esempi di navigazione insolita nel sito web. Speriamo che queste idee possano incitare una raffica di creatività dentro di te e in qualsiasi progetto futuro.
Alcune animazioni fantasiose
Indietro quando Adobe (Macromedia) Flash governava il web non era raro vedere strane animazioni di navigazione. Ma questi fallirono quando gli standard HTML / XHTML iniziarono a svilupparsi negli ultimi anni 2000. Da allora abbiamo assistito a un aumento significativo del supporto per gli effetti HTML5 e CSS3, oltre al supporto completo del browser per JavaScript e, soprattutto, jQuery.
I ragazzi di jQuery hanno realizzato un'animazione web personalizzata per bambini. Chiunque comprenda le basi dello scripting può modellare un grande sito web intorno al libreria jQuery e vieni fuori con un feedback clamorosamente positivo. Di seguito ho incluso una schermata di Cooper Design, che offre una brillante sorpresa per la loro navigazione.
Mentre fai clic sui collegamenti in alto, verrai inviato orizzontalmente sulla pagina attraverso l'effetto jQuery. In alternativa questo aprirà un sottomenu con categorie basate sulla tua pagina di intestazione. Scegliendo tra questi, noterai che anche gli effetti della pagina scorreranno verticalmente!
Il loro sito è un puzzle board di animazioni che offre una straordinaria dimostrazione della potenza nel web design di oggi. In alternativa è possibile scorrere verticalmente normalmente e passare da una pagina all'altra sinistra / destra facendo clic sulle colonne affiancate.
Un altro sito Janette D. Council vanta una navigazione unica che riorganizza gli elementi del suo portafoglio in base ai dati delle query. Di default visualizzerai tutti i progetti, ma potresti scegliere come target la stampa, il logo e l'illustrazione.
Inoltre, le sue immagini e le informazioni sul sito si aprono tutte nella stessa pagina. Questo significa che se stai utilizzando il supporto JavaScript completo non hai mai bisogno di ricaricare il tuo browser! Concessa un'ulteriore ispezione del suo codice mostra che non ci sono pagine alternative per la scansione di Google. Questa non è una cosa totalmente negativa, dal momento che tutte le informazioni sulla pagina sono rigorosamente contenute in un unico file!
Acquisizione di pagine complete
Quando pensi a una navigazione di pagina insolita, questi prossimi esempi devono portare a casa il trofeo. heartshapedwork è apparentemente un portafoglio completo in esecuzione tramite WordPress. Entrando nella loro home page noterete grandi barre orizzontali che scendono a cascata lungo la pagina. Tutti mostrano grandi effetti al passaggio del mouse e portano a articoli esterni e tiri in portfolio.
Noterai che ogni barra ha il titolo del progetto in grassetto con sottotesto che contiene il tipo di lavoro sviluppato. Ciò include siti Web, illustrazioni, dispositivi mobili e altro. Il loro portfolio è esauriente ed è davvero divertente da sfogliare.
Un altro grande esempio è il sito Work Life Balance Center. Il centro è stato fondato nel 1991 e in quel periodo ha visto alcuni aggiornamenti sul proprio sito web. Attualmente in esecuzione su Flash, l'intera funzione di navigazione ingrandisce l'oggetto di navigazione attualmente attivo.
Quindi mentre navighi, noterai barre di grandi dimensioni incentrate su singole pagine e pagine secondarie con collegamenti inclusi. Questi collegamenti non vanno da nessuna parte in particolare, ti trascinano semplicemente attraverso il layout di Flash. È interessante notare che questo effetto è stato visto prima sul sito web di Cooper, il tutto costruito con jQuery.
Grip Limited è probabilmente un'altra epitome di navigazione a schermo intero. Durante il caricamento del sito noterai lo srotolamento delle barre per visualizzare nuove informazioni e collegamenti alle pagine. È possibile fare clic sulle intestazioni in cima a ciascuna barra per comprimere il contenuto e visualizzare più spazio sullo schermo.
Forse non è il miglior uso della navigazione, anche se è assolutamente unico. In cima c'è un bar intitolato Apri Menu che fa cadere ancora più collegamenti davanti alla tua faccia. Questi includono pagine aziendali principali e link di case study.
Disegni oscuri
Quando inizi veramente a esaminare il web, molti portafogli si distinguono come semplici arcani. Yuna Kim ha un portfolio personale che ha davvero una vita propria. Ha costruito l'intera navigazione attraverso il posizionamento di jQuery e CSS.
Per ciascun elemento del portfolio ha indicato un simbolo per rappresentare il lavoro del progetto. Quadrato per il lavoro digitale, Triangolo per il branding e Cerchio per la stampa. Mentre scorri verso il basso noterai che ogni collegamento di progetto è una forma colorata che segna il suo lavoro.
Inoltre, la sua rotta di navigazione si abbassa man mano che ti sposti nei collegamenti superiori. Le tre opzioni Ciao, tweets, e contatti visualizzerà contenuti diversi in base a dove ti trovi. Per essere più specifici, tweet e contatti lasceranno cadere le stesse informazioni: il suo ultimo aggiornamento su Twitter insieme a e-mail e contatto telefonico. ciao offrirà una breve introduzione a Yuna Kim e al suo sito web. Cose davvero fantastiche!
Big Kid è un blog che esegue WordPress che visualizza singoli blocchi di contenuti. Puoi controllare il loro sito per te stesso per vedere cosa intendo. La navigazione non è affatto rara, anche se piuttosto insolita per un layout del blog. Gran parte di tutti i post sono aggiornamenti del portfolio che è possibile ordinare.
Quello che mi piace davvero è l'individualità implicita nel loro layout. È quasi l'uso più esclusivo dei pattern a blocchi che abbia mai visto sul web. Dal punto di vista dell'esperienza utente è molto facile scorrere tutto e ordinare il lavoro del progetto in base agli interessi personali. È anche un sito molto leggero, veloce da caricare in molti dei browser che ho provato (inclusi Internet Explorer e Safari per Windows).
Galleria del sito
Poiché ci sono così tanti stili di navigazione strani e insoliti da coprire, ho messo insieme una piccola galleria dei miei preferiti personali.Questi siti web presentano strani stili che non ho mai incontrato da nessun'altra parte sul web.
La popolarità del design del sito Web scomodo è aumentata notevolmente negli ultimi anni. Strani e insoliti layout di pagina, uniti alla considerazione di una corretta interfaccia utente, hanno stimolato alcuni grandi progetti. Se conosci progetti simili, ti preghiamo di offrire le tue idee nella sezione di discussione sottostante.
Amore
Amore vanta uno sfondo colorato. Veloce da caricare, la navigazione della pagina è effettivamente presente direttamente nell'allineamento in basso al centro. Mentre ci si sposta da ciascun blocco, l'area si espande per includere il testo informativo sulla pagina. Tutte le loro informazioni si aprono in una finestra lightbox, risparmiando il fastidio di ricaricare ogni visualizzazione di pagina.
Griglia organica
Michael McDonald è il creatore di Organic Grid, interamente costruito su Flash. L'applicazione richiede un po 'di tempo per caricare connessioni più lente, ma penso che apprezzerai davvero il suo stile di design. Ogni area di navigazione appare come una barra orizzontale che ti porta a una visualizzazione del portfolio a pagina intera. C'è molto lavoro da mostrare qui e le immagini migliorate attraggono brillantemente al design UX.
TinyTeam
Quello che mi piace di più di TinyTeam è la loro creatività nella costruzione del sito. Non ci sono grafiche extra o illustrazioni appariscenti, e il loro solido sfondo blu è meraviglioso per limitare le distrazioni. Un altro sito creato su Flash che dimostra quanto possa essere unico un menu di pagina. Cliccando sul riquadro centrale si aprirà una nuova serie di opzioni per sfogliare il proprio portfolio aziendale.
LoveBento
A prima vista, LoveBento non è facile per gli occhi. C'è molto contenuto da consumare e nessuna navigazione diretta. In alto a destra troverai i pannelli a discesa, ma gli oggetti reali si trovano lungo il lato sinistro. Sotto il logo aziendale troverai una visualizzazione univoca di immagini utilizzate per rappresentare il link aleggia. Inoltre ci sono collegamenti numerati in basso a destra per le manovre tra le pagine.
Lucuma
Qui abbiamo trovato un altro uso prospero di scorrimento orizzontale. I loro effetti sono costruiti sotto la libreria jQuery. Lucuma ha anche collegamenti al di sotto dell'area di contenuto principale che offre convalida XHTML e CSS. Quando progettano portafogli per il web, qui significano davvero affari!
Andreas Smetana
La vetrina di Andreas Photography porta davvero in primo piano la parola inusuale. Una volta che la pagina è stata caricata completamente ti verrà data una notifica che spiega come attraversare la loro galleria di miniature. Usando la rotellina del mouse o i tasti freccia è possibile spostarsi tra le varie categorie di fotografie. Nell'angolo in basso a sinistra c'è un altro piccolo insieme di link di menu che si aprono sul lato della pagina in cui ti trovi. Piuttosto pulito!
cypher13 Design Studio
Qui arriviamo in un altro studio di design con un portafoglio corrispondente impostato su un tema in bianco e nero. Il layout è realizzato con HTML / CSS e utilizza effetti di animazione jQuery per la transizione tra gli elementi del portfolio. La grande cosa qui è quanto elegante ogni movimento diventa. Ti senti gentilmente offerto una guida mentre navighi attraverso il loro portfolio. È possibile ordinare gli elementi in base al cliente e alla categoria oppure sfruttare la barra di ricerca che visualizza i risultati in tempo reale.
Uscita Studio
Studio Output introduce una nuova funzionalità nella visualizzazione del portfolio. La home page vanta un bellissimo collage di immagini del progetto che può essere cliccato per far apparire più informazioni in un effetto lightbox. Offrono molte e numerose immagini di esempio e, quando possibile, visualizzano anche progetti correlati. Qui ho ritagliato un pezzo dal loro portfolio di grafica e grafica Spongebob.
Duane King
Il portafoglio di Duane King è un altro eccellente esempio di supporto per tastiera. Una volta caricato sulla home page è possibile scorrere tra i segmenti sinistra e destra con i tasti freccia. È possibile fare clic su un progetto per espandere l'immagine e visualizzare un po 'più di informazioni. Questo è anche un altro esempio in cui gli elementi del portfolio non vengono caricati su una nuova pagina, sfruttando appieno la libreria jQuery ei plugin in primo piano.
Sideshow Press
Quello che mi piace davvero di Sideshow Press è il loro uso di un cancelletto (#) tra le pagine. Ciò indica ai motori di ricerca che tutti i nuovi contenuti non sono caricati su una nuova pagina, ma controllati dinamicamente tramite JavaScript. In questo caso stiamo guardando un'applicazione Flash, ma questo è il motivo per cui la tecnica funziona così bene. La navigazione della pagina offre alcuni effetti di animazione colorati sullo stato al passaggio del mouse. Ogni transizione di pagina mostra anche un effetto scorrevole, altamente unico e composto perfettamente.
Conclusione
Spero che tu abbia apprezzato questi esempi di tecniche di navigazione insolite e che ti abbiano ispirato a creare i tuoi esperimenti unici.
Se conosci qualche menu di navigazione pazzo che abbiamo perso, lascia un commento con un link qui sotto in modo che possiamo verificarlo!