Come impostare il layout della home page

Sai come impaginare correttamente una home page? Qui di seguito alcuni consigli, spero utili.

La home page di un sito è la pagina più importante. E’ il punto dal quale inizia il percorso che porterà l’utente a visitare tutte le altre pagine. E’ la vetrina del tuo brand online e quindi deve essere di forte impatto: deve ancorare il visitatore, non farlo scappare e invogliarlo a navigare nei meandri del tuo sito web.

Per creare home page degne di questo nome, è opportuno quindi posizionare i vari elementi che la compongono nel posto giusto.
Dalla mia [tono ironico] lunga carriera di web designer stagionato, ho identificato i seguenti.

• Header
• Contenuto d’impatto
• Box principali
• Box secondari
• Footer

Header

L’header è la parte che sta più in alto e fondamentalmente la più importante affinché l’utente identifichi il sito di quale brand stanno visitando, come possa muoversi all’interno di esso e soprattutto fare tutto ciò nell’immediato, alla prima occhiata.
Ecco che dunque i principali elementi dell’header devono essere:

• Top. Non ho minimamente idea di come si chiami in gergo tecnico. Con Top identifico quella striscia in assoluto la più in alto di tutto il sito web. Non è ovviamente obbligatoria, ma consigliata. Qui andranno inseriti i principali contatti social, generalmente con impaginazione a destra. Nel caso fosse un sito multilingue, in questa striscia inserirei anche la possibilita di cambiare lingua.
  Se il tuo sito è un e-commerce, i pulsanti per il searchbox, login e carrello è consigliabile che siano contenuti qui, sempre in alto a destra.
• Logo. Il logo del tuo brand. Null’altro da aggiungere se non che è consigliabile che venga posizionato totalmente a sinistra. Perché? Da occidentali abituati a leggere da destra a sinistra e dall’alto verso il basso, tendiamo a scannerizzare le pagine web esattamente come la pagina di un testo scritto. La parte di destra risulta quindi essere quella a cui per prima prestiamo attenzione
• Nome del brand. Anch’esso posizionato a sinistra per i motivi di cui sopra, puoi scriverlo sotto o destra del logo, oppure ometterlo se già presente nel logotipo.
• Menu di navigazione. Il menu permetterà ai tuoi visitatori di sfogliare le varie pagine che costituiranno il tuo sitoweb. E’ l’indice e come tale sarà da suddividere in sezioni principali o secondarie, in base a come vorremo strutturare i nostri contenuti, creando i famosi menu a tendina. Affinché sia chiaro ed efficace, tutte le informazioni devono essere strutturate in maniera logica. Consiglio quindi di creare una mappa concettuale dell’intero sitoweb prima di strutturare il menu, in modo tale da scegliere con esattezza quali pagine considerare principali e quali secondare, ad esse subordinate.

Contenuto d’impatto

Sta subito sotto l’header. Di dimensione ideale di 960px di larghezza e 300 di altezza, è l’area che deve inchiodare l’utente al tuo sitoweb e non farlo scappare per nulla al mondo. Deve quindi essere ad alto impatto, deve essere in grado di far capire a colpo d’occhio che siete un’azienda, un brand o un professionista a cui si può fare totale affidamento. L’utente, vedendolo, deve pensare “Questo è proprio il sito che sto cercando!”.
Sempre compreso nel contenuto d’impatto, ci stanno…
H1 e H2
Sono titolo e sottotitolo. Anche se graficamente possono dare fastidio, dal punto di vista SEO sono importantissimi. Dovranno contenere le keywords principali per cui indicizzare il tuo sitoweb ed avere un copy efficace. Ricordati che li devi scrivere con un occhio di riguardo ai motori di ricerca e due per l’utente che li leggerà [ndr. il 90% dei web designer sono quattrocchi].
Non limitarti quindi al solo elenco di kw, ma scrivi frasi d’impatto, leggibili e che scorrano lisce lisce come l’olio.

Attenzione al contenuto above-the-fold

Con above-the-fold si intende ciò che si vede nel monitor del vostro pc senza toccare la barra di scorrimento a lato. Quest’area è compresa, più o meno, tra i 550px e i 600px di altezza, per monitor standard (per i dispositivi mobili è tutt’altra cosa).
E’ quindi opportuno che Header, Menu principale e Contenuto d’impatto rientrino in questo piccolo spazio.

Box principali

Sono tre o quattro box incolonnati destinati alle aree di maggiore importanza del tuo sitoweb. Generalmente piazzo in questo spazio ciò a cui voglio dare più risalto, come ad esempio le categorie principali di prodotti nel caso il sito si tratti di un e-commerce, eventi particolari, l’anteprima di un articolo particolarmente importante e così via.
Come strutturarli?
Un titolo, consiglio in H3, accompagnato da un’immagine rilevante o meglio ancora da un’icona identificativa (ricordati che troppe immagini, sebbene di impatto, appesantiscono la home) seguito da un testo descrittivo.
E’ molto importante che il testo sia ben scritto (sembra scontato dirlo, ma credimi, non lo è), informativo e che non sia troppo lungo. 300 caratteri dovrebbero bastare.
A seguire una call-to-action che invogli l’utente a cliccare e a procedere nella consultazione del contenuto.

Box secondari

Stanno sotto i box principali. Sono facoltativi, da utilizzare solo se hai qualcosa di rilevante che non sei riuscito ad inserire nei box principali.

Footer

Spesso trascurato, in realtà il piedino della tua homepage è importantissimo. Oltre a servire ad informare l’utente circa il copyright, indirizzo e dati societari, è molto utile per fare una sorta di ricapitolazione del contenuto del sito web, di invogliare gli utenti a seguirti nei vari social network e di rimanere in contatto con te iscrivendosi alla tua newsletter.
Per questo motivo generalmente suddivido i footer in tre o quattro colonne: nella prima inserisco un piccolo menu, accanto un box con i link alle varie pagine social e a destra il form per l’iscrizione alla newsletter, oppure un form di contatto.
Per una perfetta struttura del footer di un blog, vi rimando all’articolo di +Laura Lonighi Guida al footer perfetto, che prima o poi seguirò anche io.

Questa struttura della homepage, almeno per il momento, mi sta dando ottime soddisfazioni. Sono comunque apertissimo a critiche e suggerimenti, quindi fatevi sotto e ditemi voi come la strutturereste!