Layout di un sito web: significato, regole e come si progetta

Quando una pagina web “si legge da sola” — l’occhio scorre, capisce, arriva in fondo — non è un caso: è un layout progettato bene. Quando invece ti perdi, non sai dove guardare e chiudi la scheda, il colpevole è quasi sempre lo stesso: un’impaginazione lasciata al caso. Vediamo cosa significa layout, quali regole lo governano e come riconoscere (ed evitare) gli errori più comuni.

Cosa significa layout

Il layout è la disposizione degli elementi in una pagina: dove stanno titoli, testi, immagini, bottoni, menu; quanto spazio occupano; in che ordine si presentano all’occhio. È l’impaginazione, per usare la parola dei giornali — e non a caso: le regole del buon layout web discendono in gran parte da un secolo di grafica editoriale, adattate a schermi di ogni misura.

Il layout non è la grafica: è ciò che viene prima. Due siti con colori e font diversi possono avere lo stesso layout; lo stesso sito può cambiare pelle grafica mantenendo l’impaginazione. Nel processo di progettazione dell’esperienza utente, il layout è il ponte tra l’architettura delle informazioni e l’aspetto finale.

Le regole che governano un buon layout

La gerarchia visiva

Non tutto ha la stessa importanza, e il layout deve dirlo a colpo d’occhio: il titolo domina, i contenuti principali occupano la scena, i dettagli si fanno da parte. L’occhio che atterra su una pagina decide in pochi istanti dove andare — dimensioni, contrasto e posizione sono le leve con cui lo guidi. Quando tutto grida (“tutto in grassetto, tutto grande, tutto colorato”), nulla si sente.

La griglia

Sotto ogni layout professionale c’è una griglia: colonne invisibili che allineano gli elementi e danno ordine. È il motivo per cui certe pagine sembrano “solide” e altre sparpagliate, anche senza saper dire perché. La griglia è anche ciò che permette al layout di adattarsi: su desktop tre colonne, su tablet due, su smartphone una — stessi contenuti, disposizione ripensata.

Lo spazio bianco

Lo spazio vuoto attorno agli elementi non è spreco: è ciò che li rende leggibili. Il terrore del vuoto — riempire ogni centimetro perché “sennò sembra che manchi qualcosa” — produce pagine soffocanti che nessuno legge. I siti che percepisci come eleganti sono quasi sempre quelli che respirano.

I percorsi di lettura

L’occhio occidentale esplora le pagine con schemi noti: a F sulle pagine dense di testo (prima riga per intero, poi giù lungo il margine sinistro), a Z su quelle più visuali. Il layout che funziona mette le cose importanti dove l’occhio passa: il messaggio chiave in alto, l’invito all’azione lungo il percorso, mai le informazioni cruciali dove lo sguardo non arriva.

Il ritmo verticale

Il layout moderno è una sequenza di sezioni impilate che si scorrono: ogni sezione un messaggio, un’alternanza di testo e immagini che crea ritmo, inviti all’azione ai punti giusti della discesa. Funziona perché asseconda il gesto più naturale del web da smartphone: lo scroll.

Mobile: il layout si progetta due volte

Con la maggioranza del traffico da smartphone, il layout mobile non è l’adattamento di quello desktop: è il layout principale. Progettare “mobile-first” significa decidere prima come i contenuti vivono in una colonna stretta — cosa si impila, cosa si nasconde, quanto grandi devono essere i bersagli per le dita — e poi arricchire per gli schermi grandi. Il contrario (disegnare in grande e comprimere) produce i siti che da telefono “funzionano” ma non convincono.

C’è anche un risvolto tecnico: un layout che salta durante il caricamento — testi che si spostano quando arriva un’immagine, bottoni che scappano da sotto il dito — viene misurato e penalizzato dai Core Web Vitals di Google, come ho raccontato nella guida a PageSpeed. La stabilità visiva si progetta: ogni elemento con il suo spazio riservato.

Gli errori che vedo più spesso

• Tutto sopra la piega: stipare ogni cosa nella prima schermata per paura che nessuno scorra. Le persone scorrono, se dai loro un motivo.
• Dieci messaggi, nessun messaggio: sezioni che vogliono dire tutto e non gerarchizzano niente.
• Allineamenti casuali: elementi fuori griglia che trasmettono trascuratezza — e la trascuratezza, su un sito aziendale, si trasferisce alla percezione dell’azienda.
• Inviti all’azione timidi: il bottone di contatto — la ragione economica del sito — trattato come un dettaglio. Ne ho parlato tra gli errori fatali di un sito web.
• Coerenza assente: ogni pagina con una logica diversa, costringendo il visitatore a re-imparare il sito a ogni click.

In pratica

Il layout è una di quelle discipline dove il dilettante e il professionista usano gli stessi mattoni — griglie, spazi, gerarchie — con risultati opposti. Se stai valutando il tuo sito, il test è semplice: aprilo da smartphone, come farebbe un cliente, e chiediti a ogni schermata “cosa dovrei guardare qui? cosa dovrei fare?”. Se la risposta non è ovvia, c’è del lavoro da fare.

È il tipo di lavoro che nella creazione di un sito web faccio prima di aprire qualsiasi programma di grafica: struttura, gerarchie, percorsi. Se vuoi un parere sull’impaginazione del tuo sito — dove guida bene e dove disperde — scrivimi: te lo do volentieri, gratis.