Una vetrina di siti Web a pagina singola
Quando si progetta un sito Web con un numero minimo di pagine e non una tonnellata di contenuti, un design a pagina singola può essere un modo innovativo per impostare il sito a parte.
I siti web a pagina singola utilizzano spesso JavaScript e Flash, insieme a HTML e CSS per adattarsi a più contenuti su una pagina senza aumentare sostanzialmente i tempi di caricamento.
La navigazione deve essere presa in considerazione quando si tratta di siti a pagina singola, per assicurarsi che i visitatori possano tornare alla sezione home della pagina senza problemi e passare da una sezione a un'altra sezione. Questo è spesso ottenuto attraverso intestazioni appiccicose o ripetendo la navigazione in ogni sezione.
I siti sottostanti sono tutti esempi eccellenti di siti web a pagina singola. Sono entrambi utilizzabili ed esteticamente gradevoli e sfruttano appieno il formato a pagina singola.
Roaaar
Il sito web di Roaaar include un link "ritorna in cima" nella parte inferiore di ogni sezione, che rende facile per i visitatori tornare alla navigazione nell'intestazione.
Duplos di Ricardo Mestre
Il sito Duplos ha un approccio diverso, mettendo il contenuto principale nella parte inferiore della pagina. La navigazione ti porta più in alto sulla pagina, piuttosto che in basso.
Grzegorz Kozak
Il motivo del faro qui scorre per tutta la lunghezza della pagina, passando dallo spazio fino al livello del suolo. I banner appesi alle finestre sul faro ti riportano all'inizio della pagina in cui si trova la navigazione.
Caleidoscopio
Il sito Web Kaleidoscope utilizza diverse immagini di sfondo e texture dietro ogni sezione del sito. Questo differenzia ogni area del contenuto dall'altra area del contenuto.
Dan Scotton
Brevi pagine come questa con contenuti minimi funzionano particolarmente bene. La navigazione rimane nella barra laterale quando scorri la pagina verso il basso.
Viktor Shvaiko
Questo sito utilizza un dispositivo di scorrimento orizzontale per caricare nuovi contenuti, scorrendo attraverso altri contenuti per raggiungere la pagina a cui sei navigato. La barra di navigazione rimane in primo piano indipendentemente dalla pagina in cui ti trovi.
Jon Rundle
Siti di profilo semplici e personali come questo si adattano perfettamente a un design a pagina singola. Le icone e i colori accentano un po 'più l'interesse visivo per il design, che è altrimenti molto neutrale.
Jason Reed
L'uso di un effetto a fisarmonica per visualizzare nuovi contenuti funziona bene quando il contenuto non è troppo lungo. L'immagine di intestazione illustrata e la combinazione di colori grigio e arancione rendono entrambi il sito spiccano.
Tweet CC
L'uso di trame e illustrazioni semplici rende il sito di Tweet CC visivamente accattivante, mentre è anche semplice con uno schema cromatico monocromatico.
Layout PSD
I siti che offrono servizi straight-forward possono funzionare particolarmente bene in un formato a pagina singola. Non ci sono troppe informazioni da offrire e tenere tutto in una pagina rende facile per i potenziali clienti trovare rapidamente ciò di cui hanno bisogno.
Feelwire
Il sito di Feelwire mantiene le cose semplici e offre informazioni aggiuntive con i tooltip. Lo sfondo bianco lo mantiene minimalista e le icone in grassetto aggiungono interesse visivo.
Meteora Calda
Il sito di Hot Meteor utilizza un design grigio, rosso e tipografato. L'intestazione è appiccicosa, mantenendo la navigazione nella parte superiore della pagina.
Mia Makila
Il sito di Mia Makila è un po 'diverso rispetto alla maggior parte degli altri siti inclusi qui, utilizzando un design a 3 colonne più tradizionale. JavaScript viene utilizzato per visualizzare i disegni di ogni categoria.
Costas Theoharis
Questo sito utilizza un interessante effetto di scorrimento, con ciascuna sezione (intestazione, contenuto principale e piè di pagina) che scorre separatamente l'una dall'altra.
Javan Makhmali
Il design della griglia usato qui non è visto molto spesso nei disegni a pagina singola. Ma con un sacco di spazio bianco, funziona bene per includere un sacco di contenuti diversi in un design molto aerodinamico.
Team Nomad
Il design qui è semplice e diretto, e il design a 2 colonne funziona bene per adattarsi più contenuti sulla pagina senza sembrare pesante.
Jorge Fino
Il sito di Jorge Fino si concentra perfettamente sui disegni. La navigazione non esiste (tranne lo scorrimento) e le informazioni di contatto sono incluse sia nell'intestazione che nel piè di pagina.
Moly Yim
Ecco un altro sito senza navigazione. Tuttavia, ha una lunghezza ragionevole, quindi non è un problema.
Justin Tsang
La navigazione qui è un po 'diversa. Piuttosto che includere i pulsanti che portano in cima o la navigazione su ogni schermo, i pulsanti sono inclusi accanto a ciascun progetto e area del contenuto per andare su o giù per uno schermo. C'è anche una barra di navigazione in alto per saltare ad ogni sezione principale.
Mogulista
I siti Web temporanei sono un ottimo momento per utilizzare un sito a pagina singola. Questo sito utilizza JavaScript per caricare nuovi contenuti per ogni "pagina" sul sito.
Chirag Solanki
La navigazione su questo sito combina sia la navigazione principale che i collegamenti alla fine di ogni sezione per riportare i visitatori all'inizio della pagina. Doodles illustrati collegano ciascuna sezione, dando un senso di continuità all'intera pagina.
Deluge Studios
Il layout del sito di Deluge Studios è uno dei più singolari presenti qui. Due colonne forniscono cinque aree di contenuto, tutte collegate dalla navigazione in alto. L'inclusione delle sezioni del contenuto principale nella colonna "barra laterale" più piccola rende la pagina notevolmente più corta.
Stage 5 Studio
Il sito Stage 5 Studio è breve, senza navigazione. I collegamenti "Ulteriori informazioni" mostrano più informazioni su ciascun progetto, mentre altri contenuti sono contenuti nella "barra laterale".
SmartCube
Il sito SmartCube utilizza un'intestazione fissa per mantenere sempre la navigazione sullo schermo. Inoltre, utilizza una combinazione di layout a 1 e 2 colonne, a seconda del contenuto.
Disegni eclettici
Le sezioni di contenuto qui sono differenziate da trame di sfondo uniche. La tipografia unisce tutto nella pagina e JavaScript viene utilizzato per visualizzare altri prodotti senza occupare più spazio.
Segreti all'interno di un'app per iPhone
Questo è uno dei siti web a pagina singola più lunghi presenti qui. Utilizza un'intestazione appiccicosa con navigazione per facilitare l'accesso da una sezione a un'altra.
Kill The Spill
Mantenere un sito di beneficenza come questo breve e al punto è quasi sicuro di aumentare il numero di donazioni in arrivo. La tipografia audace, le immagini grafiche e l'inclusione di un modulo di donazione in basso funzionano perfettamente insieme.
Emily Whitesmith
Ecco un altro sito che inizia nella parte inferiore della pagina. Cliccando sul link "scopri di più" scorri la pagina fino ad un'area del portfolio. Le finestre modali offrono i primi piani di ogni tessuto.
aviatore
I siti web di app sono adatti per i design di una singola pagina, poiché spesso hanno contenuti limitati e solo uno screenshot o due per le immagini.
Hayley Smith
Ecco un'altra pagina molto lunga. La navigazione si ripete nella parte superiore di ogni sezione e il logo scorre lungo la pagina mentre scorre.
Conway Anderson
Il sito di Conway Anderson utilizza un insieme di cursori (per informazioni su e contatti) e finestre modali (per il lavoro) per visualizzare i contenuti. Il semplice design basato sulla griglia e la combinazione di colori monocromatici mantengono le cose semplici e moderne.
Daniel Moir
Il sito di Daniel Moir è semplice con contenuti minimi e nessuna navigazione. Il design a 2 colonne organizza i diversi tipi di contenuti sul sito e lo mantiene più breve.
Latte al giorno
I siti Web pre-lancio sono molto adatti ai design di pagine singole, come mostrato qui. Non c'è ancora abbastanza contenuto per giustificare un sito multipagina.
Il mercato degli alveari
Ecco un altro sito più lungo a pagina singola. Lo sfondo giallo brillante e le illustrazioni delle api legano insieme l'intero sito e le ripetizioni di navigazione nella parte superiore di ogni sezione.
Rubidine
Il sito Rubidine utilizza un'intestazione appiccicosa con uno sfondo trasparente che si integra con ogni singola sezione di contenuto.
Jakub Szymanski
Questo sito utilizza JavaScript per caricare nuovi contenuti e scorrere verso il basso la pagina. Un appiccicoso piè di pagina appare dopo la "pagina" di casa con un link "ritorna in cima".
Tyler Termini
Il sito web di Tyler Termini è breve, con la navigazione solo nell'intestazione. Poiché non è una pagina molto lunga, non è davvero un problema dover tornare all'inizio (o semplicemente scorrere tra le sezioni senza utilizzare affatto la navigazione).
Josh Sender
Lo schema di colori in scala di grigi qui sembra fantastico. Il lavoro visualizzato diventa a colori quando si passa con il mouse sopra, e quando si fa clic su una finestra modale a colori si apre con una versione più grande.
Scritto e compilato in esclusiva per WDD da Cameron Chapman .
Cosa ti piace di più dei siti web a pagina singola? Hai dei favoriti che non erano presenti qui? Si prega di condividere i commenti qui sotto ...