Un sito web di una sola pagina non offre vie di fuga. Non c'è un menu sotto cui nascondere una sezione debole, né una seconda pagina in cui collocare i contenuti che non si è riusciti a far entrare.
Tutto ciò di cui il visitatore ha bisogno si trova su un unico rotolo, in un unico ordine. L'ordine è l'essenza stessa del design.
Se fatto bene, il sito si legge come una buona presentazione. Se fatto male, sembra uno scorrimento infinito.
Gli otto esempi di siti web a pagina singola che seguono sono tutti validi, seppur in modi diversi. Alcuni sono pagine di personal branding create per trovare lavoro. Uno, invece, gestisce un'intera attività di interior design con un semplice scorrimento.
Ciò che hanno in comune è un compito ben definito per ogni schermo. Prendete le parti che si adattano al vostro lavoro.
Un sito web a pagina singola presenta tutti i suoi contenuti su un'unica pagina continua. Invece di cliccare tra Home, Chi siamo, Lavori e Contatti, il visitatore scorre queste sezioni in sequenza.
Un menu di navigazione fisso solitamente permette di passare da una pagina all'altra. Chiamato anche sito a pagina singola o a scorrimento singolo, è la struttura più semplice del web: un URL, un caricamento, un percorso.
I siti web a pagina singola sono ideali per un messaggio mirato. Pensate a un libero professionista che offre un solo servizio, a un designer che presenta un portfolio di lavori o a uno studio che desidera che siano le immagini a parlare.
Se offri cinque servizi distinti e un blog con 40 post, hai superato questo formato. Se invece hai una cosa da dire e vuoi dirla bene, è difficile trovare di meglio.
La versione più focalizzata del formato è una pagina di destinazione , costruito attorno a una singola azione piuttosto che a una storia personale o di studio completa.
In ogni esempio significativo, emergono sempre le stesse poche decisioni:
Mentre leggete, confrontate gli esempi con l'elenco.
Quando il prodotto è una persona, è il testo a svolgere il ruolo più importante. Entrambi questi siti mettono in risalto il ruolo, non il nome.
Jon Kirschner è uno stratega di branding e crescita, e il suo sito lo specifica chiaramente con caratteri quattro volte più grandi del suo nome.
Il nome compare in piccolo in un menu di navigazione a forma di pillola, mentre le parole "Brand & Growth Strategist" occupano l'intero schermo.
Nella parte inferiore della pagina, una semplice introduzione in inglese ("Creo marchi che convertono") definisce il tono.
Sezioni come "In cosa sono veramente bravo" e "Cosa sto leggendo" conferiscono al profilo un tocco umano che la maggior parte dei siti di strategia tralascia. Sembra scritto da una persona, non da un modello predefinito.
Prendi in prestito questo: Fai in modo che il visitatore si ricordi di te più del tuo nome. Sono venuti per scoprire cosa fai, quindi mettilo in evidenza, con un carattere che non possa non notare.
Jordon Melo , uno stratega di pianificazione e acquisto media a Toronto, risolve il classico problema della pagina singola: come si naviga in una lunga pagina a scorrimento? Numera la navigazione.
"01. Chi sono, 02. Breve profilo, 03. Lavori, 04. Testimonianze, 05. Contatti" corrisponde esattamente all'ordine di scorrimento, quindi il menu funge anche da indice.
Un titolo con grazie e un ritratto arcuato conferiscono un tocco di calore a una pagina degna di un curriculum. Si tratta di un design di sito web a pagina singola che si comporta come un sito multipagina, senza i tempi di caricamento.
Prendi in prestito questo: Numerare la barra di navigazione in modo che corrisponda all'ordine di scorrimento. Una pagina lunga smette di sembrare tale quando il visitatore può vedere chiaramente a che punto si trova al suo interno.
Due siti, un'unica idea: mettere la persona e l'azione nella prima schermata, in modo che un visitatore di fretta non debba mai scorrere per interagire.
Simrran Benvait è una specialista di marketing nella Columbia Britannica e il suo eroe fa tutto il lavoro in un'unica schermata.
Un ritratto occupa la metà sinistra, tagliato con una leggera ondulazione in un pannello color crema sulla destra. Questo pannello riporta il saluto, il ruolo e tre contatti: email, LinkedIn e telefono.
Un selezionatore può leggere chi è e inviarle un messaggio senza dover scorrere la pagina. Il divisore a onda impedisce che la separazione sembri quella tra due riquadri uniti con del nastro adesivo.
Prendi in prestito questo: Nella prima schermata, inserisci il tuo ruolo, la tua posizione e i tuoi contatti. In un documento di una sola pagina, l'elemento principale è il tuo biglietto da visita, quindi trattalo come tale.
Noor Harajli , una coordinatrice di social media e marketing con sede a Londra, crea la sua singola pergamena utilizzando cartoncini rossi di grandi dimensioni su uno sfondo nero.
Ogni sezione, profilo, competenza, esperienza lavorativa è racchiusa in un proprio riquadro arrotondato, in modo che la pagina si presenti come una serie di stanze piuttosto che come un'unica lunga striscia.
Il carattere monospazio segnala un'identità tecnico-creativa, e le schede "Produzione di contenuti" e "Grafica e design" rimandano direttamente a progetti reali. Dimostra che un sito a scorrimento singolo può contenere un curriculum vitae completo e un portfolio senza risultare sovraccarico.
Prendi in prestito questo: Suddividete un lungo rotolo in blocchi di colore arrotondati. Una chiara separazione visiva permette a una pagina di contenere molte informazioni senza che il lettore perda il segno.
Quando il lavoro è l'elemento centrale della presentazione, le immagini occupano l'intera pagina e il testo passa in secondo piano. Entrambe le soluzioni prevedono un'immagine a tutta pagina in apertura.
Dillan Vanner è un fotografo, e il sito si apre come una buona stampa: un'immagine a tutta pagina, da bordo a bordo, prima di una sola parola di testo.
La prima schermata è occupata da un'immagine in stile documentario, il logo è centrato e di piccole dimensioni, e lo slogan "Catturare il mondo e tutto ciò che contiene" ne sottolinea il concetto.
La navigazione minimale (Home, Portfolio, Chi siamo) e una fila di icone di contatto sono gli unici elementi grafici presenti. È la fotografia a parlare da sola.
Prendi in prestito questo: Per un opuscolo fotografico di una sola pagina, lascia che un'immagine di grande impatto occupi la prima schermata. La tua inquadratura migliore catturerà l'attenzione più di qualsiasi titolo.
cmc designworks , uno studio di architettura e interior design, elimina i testi e lascia che sia il lavoro a essere il protagonista.
La homepage si apre su una griglia fotografica asimmetrica che occupa l'intera superficie: rendering degli edifici, immagini degli interni, segnaletica, con una barra di navigazione quasi invisibile che fluttua al di sopra.
Per una disciplina visiva, questa è la scelta giusta. Le immagini vendono, quindi nulla può competere con esse. È uno degli esempi di sito web con scorrimento più puliti che si possano trovare, proprio perché si affida alla fotografia.
Prendi in prestito questo: Se il tuo lavoro è visivo, riduci le parole. Una griglia di immagini a tutta pagina come elemento principale comunica più di quanto potrebbe mai fare un paragrafo.
Un sito web di una sola pagina non è solo per i privati che vogliono mostrare un portfolio. Questi due elementi scorrono come una presentazione, in modo che l'intero caso venga illustrato in una sola lettura.
Arrowood Design , un'azienda di interior design della Bay Area, gestisce l'intera attività di servizi su un'unica pagina. Lo scorrimento è strutturato come una presentazione aziendale.
Sopra un murale raffigurante un gufo reale campeggia la promessa di "lusso senza tempo", seguita da servizi, posizionamento "Non solo arredamento", la storia della fondatrice ("Chi è Lisa?"), progetti e contatti.
Le didascalie editoriali in maiuscolo mantengono la coerenza. Arrivati in fondo, avrete letto un'intera conversazione di vendita, in ordine, senza dover cliccare nemmeno una volta.
Prendi in prestito questo: Un documento di una sola pagina può contenere un'intera attività di servizi. Strutturate il documento come una presentazione aziendale: promessa, servizi, prove, la persona, e infine la richiesta.
Kaitlyn Barry è un attore, regista e performer di Perth. Il sito si apre con il nome a tutta larghezza sopra un singolo ritratto scattato all'ora d'oro, proprio come una foto per il curriculum introduce un profilo di casting.
Da lì si passa subito al sodo: un breve profilo, poi un elenco di crediti recenti di lavori per lo schermo come The Twelve and Cephalopod , quindi contattare.
La lista è organizzata come una descrizione di casting: chi sono, cosa hanno fatto, come contattarli. Nulla ostacola questo processo.
Prendi in prestito questo: Se le persone ti assumono basandosi sul tuo curriculum, inseriscilo nella pagina. Inizia con il tuo ruolo, elenca i tuoi crediti e rendi impossibile non notare la dicitura "disponibile da subito".
Osservando gli otto esempi nel loro insieme, emerge uno schema ricorrente. I migliori siti web a pagina singola non sono i più belli esteticamente. Sono quelli in cui ogni schermata svolge una funzione specifica e le funzioni vengono eseguite nell'ordine corretto.
Si attengono a un unico messaggio e ripetono una sola azione. Utilizzano un vero e proprio sistema visivo per dare struttura allo scorrimento: navigazione numerata, schede a blocchi di colore, una griglia di immagini, un riquadro diviso.
Hanno dato la priorità alle cose importanti: opportunità di lavoro e contatti per chi cerca impiego, e lavoro per gli studi cinematografici.
E mantengono un design leggero, perché un sito di una sola pagina significa un solo download e una sola prima impressione. Gli esempi di siti web semplici spesso vincono rispetto a quelli elaborati. La moderazione è la chiave.
Il formato ha un limite. Un sito di una sola pagina è ideale quando il messaggio è mirato e il contenuto è limitato.
Nel momento in cui hai diversi pubblici distinti, un blog in crescita o un catalogo di servizi che meritano ciascuno una presentazione a sé stante, un singolo scorrimento inizia a ritorcersi contro di te.
Se sei un artista tradizionale piuttosto che un designer, un layout multipagina di solito si adatta meglio al lavoro. Il nostro siti web di portfolio di artisti Roundup copre quel percorso. Ecco la verità:
Se ti trovi nella colonna di destra, aggiungi pagine extra. Costringere tutto a scorrere su un'unica pagina per un aspetto minimalista è una scelta che i tuoi visitatori pagano.
Non è necessario programmarne uno. Inizia scrivendo la pergamena prima di utilizzare un modello.
Elenca le sezioni nell'ordine in cui un estraneo dovrebbe trovarle, poi eliminane una. La maggior parte dei siti web a pagina singola ha una sezione di troppo.
Per la creazione, un costruttore di siti web pensato per il portfolio offre maggiori vantaggi rispetto a uno generico, perché i layout sono già progettati per un singolo scorrimento mirato.
Pixpa 's modelli di siti web a pagina singola ti offrono una navigazione fissa ancorata, sezioni di immagini a tutta pagina e un blocco contatti integrato pronto all'uso. Puoi vederli in uso nel portfolio di una pagina galleria.
Il CSS personalizzato è disponibile se si desidera modificare il tipo o la spaziatura Jon Kirschner and Noor Harajli fatto.
Se preferisci confrontare prima gli strumenti dedicati a pagina singola, ecco la nostra rassegna di costruttori di siti web a pagina singola è un utile punto di partenza.
Ogni sito sopra è stato costruito su Pixpa , il che è un buon indicatore di come può apparire il formato senza uno sviluppatore.
Qualunque sia la base su cui costruire, mantieni le immagini compresse e le sezioni poche. La sobrietà è la chiave del design.
Un sito web a pagina singola è un meccanismo di coercizione. Ti obbliga a decidere cosa conta davvero e a metterlo in ordine, perché non c'è una seconda pagina a nascondere il resto.
Gli esempi qui presentati spaziano da uno stratega in cerca di lavoro, a un creativo londinese, a un fotografo documentarista, a uno studio di architettura, a un'azienda di arredamento di lusso e a un attore professionista.
Ognuna di esse funziona per lo stesso motivo: un messaggio chiaro, uno scorrimento mirato, un'unica azione da compiere successivamente.
Scrivi il tuo testo come un'argomentazione, inizia con il punto chiave e riduci fino a lasciare solo l'essenziale.
Un sito web a pagina singola presenta tutti i suoi contenuti, come "Chi siamo", "Lavori", "Servizi" e "Contatti", su un'unica pagina scorrevole, anziché suddividerli su pagine separate.
Chiamato anche sito a pagina singola o a scorrimento singolo, è adatto a un messaggio mirato: un servizio, un portfolio o una presentazione personale. Un menu di navigazione fisso solitamente guida il visitatore da una sezione all'altra.
Possono posizionarsi bene nei risultati di ricerca per il tuo nome e una o due frasi chiave, che spesso è tutto ciò di cui un marchio personale o un'attività che offre un singolo servizio ha bisogno.
Il loro punto debole è l'ampiezza. Poiché Google classifica principalmente le pagine, non i siti, una singola pagina può includere solo un numero limitato di parole chiave prima che il contenuto diventi in competizione con se stesso. Se si desidera posizionarsi per molti argomenti, sono necessarie più pagine.
Quanto basta per presentare il caso, niente di più. La maggior parte dei siti web a pagina singola più efficaci sono composti da cinque a sette sezioni: un protagonista, una breve presentazione, i lavori o i servizi offerti, alcune prove e i contatti.
Se ti accorgi di aggiungere un ottavo elemento, verifica se il sito è effettivamente progettato per essere multipagina.
In linea di principio, nessuna delle due è migliore dell'altra. Risolvono problemi diversi.
Un sito web a pagina singola è la soluzione ideale per messaggi mirati, decisioni rapide e portfolio visivi.
Le pagine multiple sono la soluzione migliore quando si hanno pubblici diversi, un blog in crescita o molti servizi che meritano ciascuno una pagina dedicata. La scelta dipende dalla profondità dei contenuti, non dall'aspetto più moderno.
Oltre alle otto qui presenti, gallerie come One Page Love and Awwwards Le raccolte a pagina singola meritano di essere sfogliate per trovare ispirazione nel design.
Quando navighi, non fermarti all'aspetto visivo: studia l'ordine di scorrimento e la call to action, perché è proprio quella la parte che devi copiare.
Se lo crei tu stesso su un costruttore di siti web, un sito di una pagina costa quanto qualsiasi piccolo sito: all'incirca il prezzo di un piano più un dominio. Controlla il Prezzi del piano più recente per i dati attuali.
Assumere un designer per la creazione di un documento di una pagina personalizzato può costare da poche centinaia a qualche migliaio di euro, a seconda del lavoro richiesto. Per la maggior parte delle persone in questa lista, un modello predefinito è stato sufficiente.