Progettare layout sito web

Sommario

Definire con una certa precisione il layout del sito web o, perlomeno, conoscere molto bene le parti che lo compongono, è un passo cruciale prima di passare alla fase di sviluppo.

Layout sito web

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.

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?

Il logo

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
  • (…)

Il menu

Il menu è un altro elemento che difficilmente potrai fare a meno di 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 di iniziare a definirne il layout.

Altro

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

Contenuto

È 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.

Piè di pagina

Il piè di pagina è posizionato sul fondo, dopo il contenuto principale, ed è utile per l’inserimento di 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?

Il copyright e altre info sul sito

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

Altro

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 di inserire un campo di 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.

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

Diventa quindi importante capire come vengono organizzate e strutturate le diverse pagine web in un sito web sviluppato in 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.

Facebook
Twitter
LinkedIn
Telegram
WhatsApp

Corso WordPress con Elementor

Ti piacerebbe collaborare con me alla crescita di questo progetto?

Compila il modulo, ti risponderò il prima possibile!!