Progettare il layout del sito web significa creare un modello che ne definisca la forma e l’aspetto. In altre parole, si tratta di definire il modo in cui organizzare i contenuti e i diversi elementi grafici che andranno a comporre il sito stesso.
Delineare con una certa precisione il layout del sito web è uno step che dovrebbe precedere la fase di sviluppo.
Il layout del sito, infatti, deve presentare visivamente i contenuti e la grafica agli utenti. Deve essere essenziale, immediato e allo stesso tempo esteticamente ordinato e gradevole. L’utente non deve avere difficoltà a trovare le informazioni che ricerca e deve trovare piacevole e stimolante la navigazione all’interno del sito internet.
Quando l’utente non riesce a trovare subito o facilmente le informazioni che cerca, tende ad abbandonare velocemente il sito in questione. Per questo motivo, il layout del sito web deve essere progettato con molta cura.
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.
Progettare la testata del sito
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.
WordPress è un CMS perfetto per riuscire a progettare, senza troppe difficoltà, tutti gli elementi grafici del sito web, tra cui anche la testata (o header). In questo articolo della guida WordPress+Elementor, puoi trovare un tutorial su come realizzare l’header del sito.
Quali elementi inserire nell’header?
Logo sito web: posizione, dimensione e colore
Prevedere il logo nella testata del sito è d’obbligo, c’è poco da dire.
Nella fase di progettazione, dovresti iniziare a definirne la posizione, la dimensione, il colore ed eventuali altre caratteristiche grafiche.
Le possibilità non sono poi così poche. Prendiamo in considerazione alcune, per quanto riguarda la posizione del logo:
- 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
- (…)
La posizione del menu
Il menu è un altro elemento da inserire rigorosamente nella testata del sito web. In questo caso, però, le possibilità grafiche sono ancora di più.
Infatti, oltre a posizionamento, dimensione e colore, avremo da gestire anche la font, eventuali sottomenu, indicatori, 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 e molte altre ragioni, è indispensabile avere un’idea piuttosto chiara riguardo alla struttura del sito, prima d’iniziare a definirne il layout.
Altri elementi grafici per l’header
Come abbiamo detto, logo e menu sono quegli elementi praticamente obbligatori, che proprio non possono mancare nell’header.
Ci sono, però, anche tanti altri elementi che, a necessità, possono essere inclusi in quest’area del sito. Vediamone qualcuno:
- barra di ricerca
- 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
Il contenuto del sito web
È 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 molto altro, come:
- 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.
Progettare 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
Altri elementi da prevedere nel footer
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.
Anche per il footer, è disponibile un tutorial su come realizzarlo.
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.
