Il Layout sito web è un modello che definisce la struttura di un sito. In altre parole si tratta della struttura di un sito, della sua grafica, dei suoi elementi e del suo design in generale.
Definire con una certa precisione il layout sito web o, perlomeno, conoscere molto bene le parti che lo compongono, è un passo cruciale prima di passare alla fase di sviluppo.
La struttura sito web svolge un ruolo essenziale nella vita di un sito. Deve, infatti, presentare visivamente contenuti e grafica agli utenti. Deve essere essenziale, di facile comprensione e utilizzo, ma, allo stesso tempo, impattante dal punto di vista estetico. L’utente non deve avere difficoltà a trovare le informazioni che ricerca e deve trovare piacevole e semplice la navigazione all’interno del sito internet.
WordPress è un CMS perfetto per riuscire a progettare, senza alcuna difficoltà, tutti gli elementi grafici sito web. Quando un utente non riesce a trovare subito o facilmente le informazioni che cerca, tende ad abbandonare velocemente un sito. Per questo motivo definire con una certa precisione il layout del sito web è un passo cruciale prima di passare alla fase di sviluppo.
Layout sito web: le 4 sezioni principali
Iniziamo quindi a conoscere le principali sezioni che, insieme, formano il layout del sito.
- testata (o header)
- contenuto
- piè di pagina (o footer)
- colonna laterale (o sidebar)
Nell’immagine qui sopra, puoi vedere un classico esempio di layout del sito web.
Potrebbe essere una buona idea munirsi di matita e disegnare a mano una prima bozza.
Però ovviamente non basta dividere un rettangolo in quattro parti per ritenere la fase di progettazione conclusa. È importante definire anche i diversi componenti da inserire in ciascuna di esse.
Quindi, iniziamo a dare uno sguardo più da vicino a queste quattro aree.
Layout sito: la testata
La testata del sito riveste particolare importanza perché rientra in quell’area dello schermo denominata “above the fold”, ossia subito visibile all’apertura della pagina web.
La testata è un’area statica del sito, in quanto è presente in tutte le pagine senza variazioni. Inoltre, dovrebbe sempre contenere il brand e il menu di navigazione.
Cosa inserire nella testata?
Logo sito web: posizione, dimensione e colore
Prevedere il logo nella testata del sito è più un obbligo che un consiglio, c’è poco da dire.
Cosa meno scontata è stabilirne la posizione, la dimensione, il colore ed eventuali altre caratteristiche grafiche.
Le possibilità non sono così poche. Prendiamo in considerazione alcuni esempi solo per quanto riguarda la posizione del logo, che potrebbe essere:
- sopra il menu, allineato a sinistra
- sopra il menu, allineato a destra
- sopra il menu, centrato
- sulla sinistra del menu
- sulla destra del menu
- al centro con un menu sulla sinistra e uno sulla destra
- (…)
Struttura sito web: la posizione del menu
Il menu è un altro elemento che difficilmente potrai fare a meno d’inserire nella testata del sito web. In questo caso poi, le possibilità grafiche sono ancora più di quelle viste per il logo.
Infatti, oltre ad aspetti come posizionamento, dimensione e colore, avremo da gestire anche font, eventuali sottomenu, effetti del passaggio col mouse, ecc.
Alcune di queste “scelte” grafiche dipendono anche dalla complessità del menu di navigazione. Per un menu con tante voci si tenderà, ad esempio, a ridurre il font piuttosto che ad aumentarlo.
Per questa ragione e non solo, è senz’altro utile avere un’idea piuttosto chiara sulla struttura del sito, prima d’iniziare a definirne il layout.
Elementi grafici sito web: ecco cos’altro aggiungere
Come abbiamo detto, logo e menu sono quegli elementi che sicuramente non possono mancare nell’header.
Ma è anche vero che non sono gli unici che possono essere inclusi in quest’area. Vediamone alcuni:
- ricerca nel sito
- icone social
- pulsante per il login o la registrazione
- info di contatto o assistenza (telefono, email, chat)
- menu per la selezione della lingua
- icona del carrello (se e-commerce)
- banner pubblicitari
Struttura di un sito web: cosa inserire come contenuto e come farlo
È collocato sotto la testata ed è parzialmente visibile al caricamento della pagina.
È l’area in cui si visualizzano i contenuti delle pagine, proprio come quelli che stai leggendo adesso.
Si tratta di un’area dinamica del sito, ovvero il contenuto cambia a seconda della pagina in cui ci si trova.
Cosa inserire nel contenuto?
In quest’area, potenzialmente si potrebbe inserire qualsiasi elemento: le possibilità sono pressoché infinite.
C’è però qualcosa che, nella maggior parte dei casi, dovrebbe esserci SEMPRE.
Nelle pagine che devono essere indicizzate (ovvero trovate dai motori di ricerca come Google), è molto importante per ragioni di ottimizzazione (SEO) che nel contenuto sia impostato il titolo principale (tag H1) e un testo non troppo stringato (300 o più parole).
A parte questo, è poi possibile includere qualsiasi altra cosa:
- immagini
- video
- slides, caroselli, gallerie
- tabelle e grafici
- pulsanti
- mappe
- moduli di contatto
- contatori
- box, divisori
- icone di condivisione
- contenuti dinamici
… e la lista potrebbe continuare!
Attenzione solo a non esagerare, sopratutto con immagini e video, perché si finirebbe con appesantire la pagina, allungando i tempi di caricamento.
Sempre per un discorso di ottimizzazione per motori di ricerca, cerca sempre di mantenere un equilibrio tra la quantità di testo e il numero di immagini o altri media inseriti.
Layout Web: il piè di pagina
Il piè di pagina è posizionato sul fondo, dopo il contenuto principale, ed è utile per l’inserimento d’informazioni sul proprietario del sito, il diritto d’autore, i link alla privacy e altro ancora.
Il footer, come l’header, è un’area statica ed è presente in tutte le pagine. Esso, però, fa quasi sempre parte dell’area denominata “below the fold”, quindi non visibile all’apertura della pagina web.
Cosa inserire nel footer?
Copyright sito web e altre info importanti
Proprio perché il footer è un elemento che resta invariato in tutto il sito, torna utile sfruttarlo per inserire quelle informazioni che dovrebbero essere presenti sempre, in qualsiasi pagina ma che non sono tanto rilevanti da metterle nell’header.
Vediamo quindi quali sono queste informazioni:
- copyright
- nome del sito / brand
- indirizzo
- info di contatto
- partita IVA (se esiste)
- link a privacy e cookie policy
Design sito web e gli altri elementi a cui pensare
Anche il footer, come l’header, può essere sfruttato per inserire molti altri elementi. Ad esempio, si potrebbero riproporre logo e menu (o magari un menu pensato appositamente per il footer).
Altre possibili opzioni sono d’inserire un campo d’iscrizione alla newsletter, le icone social, un modulo di contatto, la selezione lingua, altri link utili, ecc.
Insomma, anche qui la scelta è davvero ampia; l’importante è però inserire ciò che si ritenga di qualche utilità per l’utente. Meglio evitare informazioni ridondanti o elementi di scarsa utilità, giusto per riempire lo spazio.
Sidebar: la colonna laterale
È posizionata a lato del contenuto ed è generalmente usata per inserire widget, banner o altri componenti di varia utilità.
La colonna laterale (o sidebar) può non esserci, com’è anche possibile prevedere un layout del sito con più di una sidebar. O ancora, la si può prevedere solo per specifiche pagine, come ad esempio quelle delle news.
Cosa inserire nella sidebar?
La colonna laterale è uno spazio utile per affiancare al contenuto principale altre informazioni o funzionalità.
Vediamone alcune:
- ricerca nel sito
- categorie del blog
- articoli recenti
- prodotti o servizi simili
- banner pubblicitari
- feed di canali social
- icone per la condivisione
- altre info
Mettendo insieme quanto elaborato per ciascuna area, possiamo notare che il layout del sito inizia a prendere forma.
A questo punto, la questione successiva è…
Come trasformare una semplice bozza grafica in un sito funzionante e online?
Scoprilo con il corso gratuito su come creare un sito in WordPress.
Inoltre, bisogna tener presente che il layout potrebbe essere diverso per alcune pagine del sito. Ad esempio, potrebbe essere inserita una colonna laterale nella sezione news ma non nella home page.
Struttura WordPress
Le pagine
Gli articoli
I componenti del sito
Definire il layout del sito
Ora che conosciamo meglio le quattro aree che compongono il layout del sito web, possiamo passare alla fase di progettazione.
Chiaramente, questa fase è necessaria solo se intendi creare un layout del sito personalizzato, attraverso un page builder come Elementor o da codice HTML. In alternativa, potresti optare per una soluzione meno personalizzata, come un tema per WordPress gratuito o a pagamento. In questo caso, il layout del sito dipenderà essenzialmente dal tema o modello che deciderai di utilizzare.
Detto questo, vediamo come procedere.
Un buon metodo è quello di munirsi di matita e disegnare una prima bozza del sito su un foglio di carta.
