Se hai deciso di creare un sito, una delle prime cose che dovrai scegliere sarà il layout, uno dei fattori da cui dipendono il comportamento degli utenti e le conversioni. L’organizzazione grafica della pagina infatti non è solo una questione estetica, ma uno strumento di comunicazione che può produrre risultati molto differenti.
In questa guida capiremo prima di tutto quali elementi formano una pagina e poi vedremo come variandone la posizione, le dimensioni e altre caratteristiche si possano ottenere diverse tipologie di struttura.
Conoscere i principali tipi di layout dei siti web ti aiuterà a trovare la configurazione che funziona meglio per il tuo progetto. Potrai costruire il tuo sito da zero oppure usare un template, ma non dimenticare di partire con il piede giusto affidandoti a un ottimo servizio di hosting.
Indice
Cos’è il layout di un sito web?
Il layout di un sito web è lo schema secondo cui si dispongono sulla pagina gli elementi principali che la compongono, cioè una serie di blocchi di testo ed eventuali immagini o video.
La maggior parte dei layout dei siti viene costruita assemblando:
- testata
- hero
- contenuto principale
- footer
- sidebar
- call to action.
Inoltre c’è chi considera anche lo spazio bianco un componente fondamentale della struttura della pagina, poiché contribuisce a gestire e indirizzare l’attenzione dell’utente.
La scelta del layout non riguarda solo l’aspetto del sito. Infatti la posizione e le dimensioni degli elementi determinano l’ordine in cui le persone ricevono le informazioni e creano una gerarchia all’interno del contenuto.
Vediamo più nel dettaglio a cosa servono i diversi componenti che abbiamo a disposizione per creare la struttura di una pagina web.
Componenti principali del layout di un sito web
La testata (o header) è la striscia superiore del sito, che nella stragrande maggioranza dei siti contiene il menù di navigazione principale e di solito anche il nome dell’azienda e il logo. Spesso ospita anche il menù di selezione della lingua del tuo sito o il pulsante per l’accesso. Questa è l’area in cui potresti inserire un mega menù su WordPress.
L’hero è una sezione iniziale molto vistosa che sfrutta un’immagine o un video per catturare l’attenzione e trasmettere un messaggio chiave con un testo breve. Contiene banner, slider o caroselli. E quando c’è, si trova subito sotto la testata.
Per contenuto principale si intende la parte centrale della pagina, quella che ospita la maggior parte del testo. Nel caso di un articolo su WordPress per esempio, è la sezione che mostra l’articolo vero e proprio, comprese eventuali immagini, video, grafiche o tabelle che lo completano.
Il footer è l’area che si posiziona in fondo alla pagina per raccogliere informazioni di servizio riguardanti privacy e copyright, link a pagine Contatti o Dove siamo.
La barra laterale (o sidebar) è una sezione opzionale che si posiziona di solito sulla destra per aggiungere ulteriori menù e link utili, moduli, ecc. Non è vietato mettere la sidebar a sinistra. Il sito di Clay per esempio ne ha due, una per lato:
La call to action (CTA) è il blocco con cui – con testi brevi e pulsanti – si invita l’utente a eseguire un’azione, come iscriversi, compilare un modulo o acquistare.
All’interno di un sito, il layout cambia in parte in base al tipo di contenuto. Infatti, mentre l’header e il footer sono visibili su tutte le pagine nella maggior parte dei siti, altri elementi tendono a variare. Ad esempio su WordPress la barra laterale si vede di frequente negli articoli ma non altrettanto spesso sulle pagine o in homepage.
Per questo, quando si costruisce un sito, di solito si configurano più modelli di pagina (template), ognuno col proprio layout, per l’homepage, gli articoli del blog, le pagine istituzionali o le landing page.
I temi WordPress consentono di configurare diversi template e anche altri CMS – Joomla, Drupal, Magento, Prestashop – fanno lo stesso.
Quanti tipi di layout di siti web esistono?
Il layout di una pagina web può essere declinato in tantissimi modi, ma possiamo fare riferimento a un certo numero di schemi ricorrenti.
Qui vedremo i 16 tipi di layout di siti web principali:
- layout a rivista
- layout a portfolio
- layout immagine in evidenza
- layout a schermo intero
- layout a schermo diviso
- layout a griglia o matrice
- layout a card
- layout asimmetrico
- layout alternato
- layout a Z
- layout a F
- layout a colonna singola
- layout con barra laterale
- layout a simmetria radiale
- layout a pagina singola
- layout minimalista.
Nei layout più densi di contenuti visivi, come possono essere quello a rivista o a card, è fondamentale ottimizzare le immagini e attivare il caricamento differito. Se usi WordPress, puoi seguire la nostra guida al lazy loading.
Layout a rivista
Il layout a rivista, chiamato anche magazine, si ispira proprio all’organizzazione grafica dei giornali. Questo modello può essere declinato con stili diversi ma conserva sempre la sua caratteristica fondamentale di condensare tanti contenuti in poco spazio.
È tipico dei grandi siti informativi, per esempio testate giornalistiche online o portali che aggregano contenuti creati dagli utenti (come Medium).
Qui lo vediamo applicato sulla pagina principale di Wired:
Mentre questa è la homepage di HuffPost:
Come puoi intuire, il layout a rivista non è adatto a essere visualizzato da smartphone e tablet, per questo nella versione mobile vengono implementati altri tipi di struttura. Ecco per esempio il layout di Wired visto dal telefono:
Il rischio di rendere la pagina troppo caotica esiste anche quando si configura il layout a rivista per la visualizzazione dal pc, ma con un po’ di attenzione lo si può evitare.
Layout a portfolio
L’intento del layout a portfolio, o a galleria, è dare risalto a progetti che abbiano un alto impatto visivo: può trattarsi di lavori di grafica o di architettura, dipinti, ma anche copertine di album musicali, locandine, ecc.
Questo modello mette in primo piano le immagini oppure i video, spesso con gallerie interattive (slider). Per non distogliere l’attenzione degli utenti dagli elementi visivi, di solito lo si realizza con un design ordinato e minimalista.
Anche il layout a portfolio richiede di curare in modo particolare l’ottimizzazione delle immagini.
Vista l’importanza che dà ai contenuti visivi, non è la scelta giusta per chi vuole inserire nella pagina anche testi lunghi, che rischierebbero di essere ignorati dagli utenti.
Layout immagine in evidenza
Il layout immagine in evidenza punta molto sull’impatto dell’immagine contenuta nell’hero, che può essere a larghezza piena oppure no e con un eventuale testo in sovrapposizione (overlay).
Questa struttura viene usata abitualmente sia in homepage che in pagine di categoria o articoli. Non a caso è supportata nativamente dalla maggior parte dei temi WordPress.
Anche il layout immagine in evidenza attira l’attenzione sulle immagini ritardando un po’ la lettura del contenuto. Ma se le dimensioni sono equilibrate e la foto o la grafica sono azzeccate, questo schema rappresenta un ottimo compromesso per bilanciare elementi visivi e testuali.
Layout a schermo intero
Nel layout a schermo intero la sezione hero occupa tutta l’area immediatamente visibile della homepage (above the fold), creando un’esperienza immersiva. Spesso l’effetto è amplificato da contenuti dinamici come caroselli a scorrimento automatico o video al posto della classica immagine statica.
Questo modello è contestato da alcuni esperti di SEO e di marketing, che sostengono riduca le conversioni perché:
- allontana i contenuti che l’utente sta cercando, che vengono spinti più in basso nella pagina;
- gli elementi in movimento possono essere inconsciamente assimilati ai banner pubblicitari e ignorati in automatico;
- le immagini che scorrono da sole possono generare frustrazione e riducono l’accessibilità.
La situazione migliora quando si dà alle persone la possibilità di fermare le immagini di loro interesse per guardarle con calma.
Il layout a tutto schermo è accusato anche di allungare i tempi di caricamento della pagina e quindi di danneggiare l’esperienza utente.
Con alcuni accorgimenti possiamo comunque garantire una buona UX su WordPress senza rinunciare alle immagini, e lo stesso vale sugli altri CMS.
Inoltre puoi misurare il reale impatto che le immagini e i video stanno avendo sul tuo sito con strumenti come Google PageSpeed Insights, WebPageTest o GTmetrix.
Il layout a schermo intero resta una scelta valida per aziende e professionisti che lavorano con immagini o effetti speciali – come Foundry – oppure per siti che vendono esperienze legate alla vista. Non a caso questa struttura è stata usata spesso anche da Airbnb.
È un modello adatto alla homepage ma non a contenuti più testuali.
Layout a schermo diviso
Nel layout a schermo diviso, o semplicemente layout diviso, l’hero ospita due sezioni, di uguale peso oppure asimmetriche, che possono essere più o meno grandi rispetto alla pagina. In modo simile al layout a schermo intero, anche questo modello mantiene a lungo l’attenzione del visitatore nella parte alta della pagina.
Nella maggior parte dei casi la divisione del layout riguarda solo l’hero. Non è vietato però estenderla al contenuto.
Il layout a schermo diviso ha molte potenzialità: permette di mettere in luce due aspetti chiave per il brand, oppure di affiancare un’immagine e un testo, mostrare due varianti di un prodotto o lo stesso prodotto da due punti di vista diversi, ecc.
Sul sito di Codrops puoi trovare un tutorial con demo e codice per la costruzione di questa struttura.
Sono possibili anche varianti con schermo diviso in più di due parti, per esempio con un hero formato da tre blocchi:
Layout a griglia o matrice
Il layout a griglia, o a matrice, mostra tanti contenuti senza creare una gerarchia. In questo caso il corpo centrale della pagina ospita vari blocchi disposti secondo un reticolo ortogonale, a distanza regolare o meno.
È uno schema efficace per presentare prodotti o categorie, che troviamo spesso negli ecommerce e in alcuni siti di news. Può essere usato per dare enfasi alle immagini, come avviene sul sito di Sharon Radish.
Questo invece è il layout a matrice di Airbnb:
Mentre su Pinterest abbiamo una griglia con blocchi di dimensioni variabili, ma comunque rettangolari e allineati.
Se scegli un layout di questo tipo, potresti trovarti con tante immagini sulla pagina, e sarà importante che siano in un formato ottimale come AVIF o WebP.
Layout a card
Il layout a card – o a schede o a carte – è una variante del layout a griglia che serve a organizzare sulla stessa pagina informazioni sintetiche su tanti prodotti, argomenti o articoli.
Il suo tratto distintivo sono i contenitori rettangolari (card), ognuno dei quali racchiude immagini e testi su un solo prodotto o un argomento. Di solito sono presenti un’immagine di anteprima (thumbnail), un titolo e altre informazioni, e un pulsante per accedere a una pagina o una finestra di approfondimento.
È usatissimo nelle pagine di categoria degli ecommerce per presentare i prodotti, così come nelle pagine archivio di WordPress per visualizzare gli articoli, ma è adattabile ad altre esigenze. Qui per esempio, lo vediamo applicato nella pagina del sito di Spotify dedicata ai piani tariffari:
Anche con il layout a card ti serviranno immagini belle ma leggere per mantenere alta la velocità del sito. Tra i migliori formati per WordPress c’è il WebP, ottimo anche sugli altri CMS.
Layout asimmetrico
Per layout asimmetrico si intendono diverse strutture in cui gli elementi sono distribuiti in modo non speculare, nella parte superiore della pagina, in quella centrale o entrambe.
Questo schema si può combinare con quelli già visti, per esempio per ottenere layout divisi asimmetrici oppure layout a griglia o card asimmetrici.
Il layout asimmetrico lascia spazio alla creatività e può offrire al sito un aspetto meno scontato. D’altra parte però va studiato con attenzione per evitare un effetto caotico e garantire una buona esperienza utente.
Layout alternato
Il layout alternato è una variante del layout asimmetrico che prevede blocchi di testo e immagini disposti a zig zag. La struttura è a due colonne e a fasce orizzontali. Il testo viene posizionato alternativamente a destra o a sinistra e di conseguenza anche l’immagine si sposta da un lato all’altro.
Questo schema è utile quando si vuole trattare un argomento per punti in modo visivamente non monotono. Infatti ogni blocco di testo può essere dedicato a un concetto chiave e affiancato da un’immagine che lo completa.
Il layout alternato è usato spesso su pagine di vendita e nei contenuti aziendali dedicati allo storytelling o alla promozione di prodotti e servizi.
Layout a Z
Il layout a Z ricalca uno degli schemi che seguono gli occhi dell’osservatore quando si muovono sulla pagina: il pattern Z.
Questo schema si verifica su pagine semplici con pochi elementi visivi bilanciati. Qui lo sguardo tende a muoversi dall’angolo superiore sinistro fino a quello opposto, poi in diagonale verso l’angolo inferiore sinistro e da lì di nuovo verso destra.
Per sfruttare al massimo questa tendenza dell’occhio umano, nel layout a Z vengono distribuiti lungo questa traiettoria gli elementi chiave della pagina, che di solito sono titoli, introduzioni alle call to action, CTA e pulsanti.
È uno schema adatto nelle pagine che richiedono poco testo, come quelle di login, o in alcune homepage semplici.
Potresti aver visto il layout a Z nella vecchia pagina di login di Facebook.
Il layout a zig zag, invece, è un’espansione del layout a Z che ripete questo tipo di percorso più volte nella pagina.
Layout a F
Il layout a F sfrutta un altro pattern di lettura: quello che gli occhi seguono sulle pagine con molto testo. In questo caso gli occhi dell’utente tendono a muoversi in orizzontale dall’angolo sinistro a quello destro, per poi tornare sul lato sinistro e scendere lungo una linea verticale.
Come nel layout a Z, anche qui gli elementi più importanti vengono posizionati lungo la traiettoria percorsa naturalmente durante la scansione della pagina.
È quello che viene fatto in questa pagina di Linkedin.
Layout a colonna singola
Mentre i layout a rivista o a card sono tipici di homepage o pagine di categoria, il layout a colonna singola è usato soprattutto per gli articoli dei giornali online e per i post sui diversi CMS.
Il suo tratto distintivo è mostrare il contenuto principale della pagina su una sola colonna, come in questo esempio da Substack:
È uno schema che riduce le distrazioni e così facilita la lettura. Lo si può trovare facilmente in tanti blog creati con WordPress.
Layout con barra laterale
Il layout con barra laterale (sidebar) è un parente stretto di quello a colonna singola. Anche questo è un classico dei blog post di WordPress, ma lo troviamo anche su altre piattaforme.
In questo caso accanto al corpo del testo c’è la sidebar, a destra o a sinistra, che può contenere elementi utili come la ricerca WordPress.
Il contenuto principale spesso è su una sola colonna, come in questo esempio.
Ma non è l’unico modo per implementare il layout con la barra laterale. Per esempio nella pagina Blog del nostro sito, la sidebar si trova accanto a una struttura a griglia su due colonne.
In particolare, su WordPress si possono inserire nella barra laterale molti tipi di blocchi grazie ai widget nativi o dei plugin. Per esempio è possibile inserire moduli creati con plugin per i form o plugin per la newsletter, mappe di Google Maps, ecc.
Layout a fasce orizzontali
Il layout a fasce orizzontali è una variante del modello a colonna singola in cui le linee orizzontali sono accentuate attraverso l’uso di immagini a larghezza piena e campiture di colore.
Ogni fascia ospita un contenuto con una funzione diversa.
Lo possiamo trovare, per esempio, nei template di sito del tema Neve.
Layout a simmetria radiale
Il layout a simmetria radiale è un modello di pagina web molto insolito in cui i contenuti si dispongono in modo concentrico.
Un esempio è il sito di Vlog, in cui viene usato per mostrare le anteprime di una serie di video senza nessuna CTA.
Come puoi vedere, il layout a simmetria radiale si presta a progetti artistici ma ha senso solo su pagine molto semplici. Questo perché è poco flessibile, rende difficile inserire i testi e non si visualizza bene sui dispositivi mobili.
Layout a pagina singola
Il layout a pagina singola riunisce tutto il contenuto del sito in un’unica pagina. Di solito si usa una sola colonna, divisa in sezioni orizzontali ognuna con una propria funzione.
Ci possono essere parti dedicate a mettere in evidenza i punti di forza del brand, presentare delle testimonianze, informare sui prezzi ecc., come puoi vedere nel template One page di Neve.
Nel layout a pagina singola non ci sono link ad altri contenuti del sito. Di solito però sono presenti ancore che permettono all’utente di saltare alla sezione che gli interessa di più; necessarie anche perché spesso la pagina è molto lunga.
Il layout a pagina singola può essere utile a chiunque voglia creare un sito essenziale, ma è particolarmente adatto a spiegare in dettaglio un solo argomento e perseguire un unico obiettivo di conversione. Ecco perché è il modello di riferimento per le landing page, dove viene usato per promuovere un prodotto o servizio.
Layout minimalista
Il layout minimalista ha la caratteristica principale di ridurre il design ai componenti essenziali ed è riconoscibile per l’ampio uso di spazio bianco.
In questa struttura si usano caratteri molto leggibili e pochi colori, senza nessun elemento decorativo. Non è raro trovare ampie sezioni monocromatiche che servono a mettere in risalto il contenuto.
Il layout minimalista può avere diverse strutture ma quella più usata è la più semplice, cioè la colonna singola.
La forza di questo modello consiste nella sua capacità di creare un percorso di lettura chiaro e comunicare pochi messaggi selezionati senza rischio di distrazione.
Può trasmettere un senso di eleganza, lusso o modernità. Per questo viene usato spesso in siti di design, architettura, soprattutto in varianti monocromatiche sul grigio o sul nero, mentre le versioni con colori più vivaci sono tipiche dei siti di tecnologia.
Adattabilità del layout ai dispositivi mobile
La maggior parte di questi layout è nata per essere visualizzata su desktop. Questo significa che su mobile deve essere adattata a uno spazio orizzontale molto più ristretto applicando il responsive design.
Alcune strutture, come griglia, card, portfolio o rivista, sono compatibili con il mobile perché possono riconfigurarsi facilmente riducendo il numero di colonne, rimpicciolendo gli elementi e impilandoli.
Per gli altri layout invece l’adattamento consiste nella maggior parte dei casi in una semplificazione della struttura.
Per esempio i layout a Z o a F devono essere ripensati per uno scorrimento prevalentemente verticale con una scansione orizzontale limitata.
Layout come schermo diviso, asimmetrico o a simmetria radiale non sono visualizzabili su mobile e devono essere trasformati in un layout a colonna unica.
Conclusioni
In questa guida al layout dei siti abbiamo visto prima di tutto quali sono gli elementi essenziali che formano la struttura di una pagina web. Poi abbiamo parlato dei tipi più comuni di layout e dei loro punti di forza e criticità.
Come avrai notato, non sempre c’è un confine netto tra un tipo di struttura e un altro. Per esempio i layout a griglia possono essere usati anche per presentare un portfolio mentre i layout a rivista con blocchi di dimensioni simili a distanza regolare diventano identici ai layout a matrice.
Inoltre diversi layout si possono combinare nella stessa pagina. Questo succede spesso con le strutture che riguardano solo la parte superiore della pagina e devono essere integrati con altre strutture per organizzare la parte sottostante.
E tu hai già scelto il layout per il tuo sito? Hai ottenuto il risultato che cercavi? Se vuoi, raccontacelo nei commenti.
Pronto a costruire il tuo sito WordPress?
Prova il nostro servizio gratuitamente per 14 giorni. Nessun impegno, nessuna carta di credito richiesta.
