Layout Siti Web – le fondamenta della struttura di un sito web

Condividi

SOMMARIO ARTICOLOUn ottimo layout è spesso un concetto un po’ particolare, tant’è che a volte è meglio quando non viene proprio notato dall’utente. Mi spiego meglio: se il web designer ha svolto un ottimo lavoro, il visitatore sarà perfettamente in grado di trovare tutte le varie specifiche del prodotto, come il carrello degli acquisti, le offerte promozionali o, cosa più importante, il pulsante di procedura di acquisto senza dover stare lì a pensare. Infatti, più si impiega il tempo a capire come utilizzare un determinato sito web, minore sarà l’attenzione rivolta al suo effettivo contenuto. Oggi parliamo, dunque, di layout siti web, di cosa sono, della loro importanza e di come utilizzarli. Rimani sintonizzato 😉

I layout dei siti web

Un buon design del layout di un sito web vuol dire bilanciare praticità ed estetica; il sito dovrebbe sì avere un aspetto bello o meraviglioso che sia, ma l’utente dovrebbe trovare ciò che cerca nel modo più pratico possibile, e questa è la cosa più importante.

Un utente – e noi non facciamo eccezione, quindi mettiamoci dall’altra parte per capire appieno questo concetto – non riserva molta pazienza alle pagine web difficili, e per questo motivo le frequenze di rimbalzo più elevate si presentano entro i primi dieci secondo dalla visita di un sito.

Chiaramente, un buon layout non è il motivo principale per cui un utente sceglie di rimanere sul nostro sito web, specialmente se il contenuto è scarso o ha poca importanza, ma non vorremmo di certo che fosse il motivo per cui vanno via senza farvi più ritorno, no?

Per questo motivo, abbiamo deciso di stilare una guida con i fondamenti del design dei layout siti web. Snoccioleremo le basi di ciò che un buon design dovrebbe tirare fuori, le tecniche cardine per un layout efficace insieme a quelli più comuni, ai tipi di layout più comuni per un sito web.


layout siti web
Layout responsive

Layout – Gli obiettivi

Supportare gli obiettivi, che vanno dall’intrattenimento alla consapevolezza del marchio passando per le conversioni. Se pur semplice, è questo l’obiettivo dei layout di siti web, obiettivi che si esprimono attraverso il contenuto motivo per cui, il design del layout, descrive in modo efficace come fornire quel contenuto. Ecco alcune funzioni più comuni di un layout:

  • Visualizzare le informazioni: Un buon layout organizza tutte le informazioni in ordine, in modo che crei una sequenza concreta e non confusionaria, che sia facile da esplorare, che dia importanza agli elementi più importanti e renda gli strumenti disponibili all’utenza intuitivi e facili da trovare e utilizzare.
  • Coinvolgere l’utente: un buon layout rende visivamente accattivante una pagina, guida lo sguardo del visitatore verso i punti di nostro e loro interesse e li invoglia a continuare la navigazione.
  • Branding: Anche il ruolo svolto nel branding non è da sottovalutare visto che, un buon layout, dovrebbe utilizzare spaziatura, scala e allineamento in modo coerente con il marchio aziendale.

Prima di andare a scoprire i layout specifici, andiamo a vedere come realizzare questi obiettivi di cui sopra, obiettivi di alto livello che guidano la progettazione del layout.

Layout – Processo di design

La mappatura del layout del nostro sito web dovrebbe è un processo che dovremmo affrontare nelle prime fasi della creazione del sito; dopo il processo di organizzazione della strategia ma prima di prendere un software per la grafica e iniziare a creare l’interfaccia.

Il layout viene visualizzato attraverso un wireframe (è importante distinguere il wireframe dal web design: questo, infatti, è l’intero processo di creazione di grafica front-end e altri elementi visivi per la pagina web, mentre il wireframe è una mappa scheletrica di base che ci mostra come il contenuto si adatterà insieme).

Il design del layout è una parte importante del web design e inizia con il wireframing. Possibilmente, il design visivo dovrebbe seguire il wireframe del layout in modo che gli elementi grafici siano posizionati in modo strategico, piuttosto che su fugaci preferenze estetiche.

I passaggi per creare layout per siti web:

1. Identifichiamo le aree di contenuto

Solitamente, i wireframe rappresentano il contenuto con quadrati e rettangoli, sia un’immagine che un blocco di testo. Importantissimo è il conoscere in anticipo quanti contenuti abbiamo e la dimensione approssimativa – o il numero di parole – al fine di adattare i vari elementi con precisione.

2. Creiamo wireframe e prototipi

Un layout può essere semplice come un disegno su carta, ma vi sono una serie di programmi, come Whimsical, che vanno a snellire la procedura.

I wireframe non sono opere d’arte, quindi possiamo anche crearne a dozzine, e anche se la nostra prima composizione ci piacesse da matti dovremmo comunque creare più wireframe al fine di avere molte più opzioni.

Senza grafici a distrazione saremo liberi di concentrarci sull’esperienza utente e assicurarci della disposizione per loro più intuitiva. Teniamo conto di tutte le dimensioni dello schermo e iniziamo, preferibilmente, con il layout per i dispositivi mobili.

3. Test, raccolta e ancora test

Dopo aver creato le varie opzioni cerchiamo di ricevere più feedback possibili, magari dai nostri colleghi (Invision o Figma ci offrono la possibilità di creare prototipi interattivi, per poter testare navigazione e pulsanti, senza creare una reale pagina web).

Dopo aver ricevuto qualche risposta in merito al nostro lavoro, tornamo al passaggio precedente e ripetiamo fin quando non è perfetto.

Anche se questi sono i passaggi letterali per creare un layout, può essere difficile sapere cosa lo rende più o meno efficace, specialmente se siamo agli inizi. Nello step successivo andremo ad esaminare le tecniche da utilizzare che possono guidarci nelle nostre scelte di web design.

layout siti web

Layout – Le tecniche chiave

Il design del layout è una pratica oramai vecchia di decenni; questo vuol dire che, nel corso di questi anni, sono state stilate una serie di convenzioni e principi che guidano i designer nel loro lavoro. Andiamo quindi a sfogliare quelle più utili:

Gerarchia visiva

Un modo per definire i sei elementi di design, per aumentare il contrasto ed enfatizzare, sopra gli altri, i contenuti selezionati. Le parti più importanti del layout sono quelle che l’utente deve identificare subito, in base all’obiettivo della pagina. Solitamente includono inviti all’azione, titoli, proposte importanti e strumenti per l’utente, come la navigazione.

La gerarchia si può manifestare in svariati modi: scelta del carattere, la dimensione, il peso o l’abbinamento di diversi caratteri; l’utilizzo di colori complementari al fine di dar risalto ai vari elementi e l’allineamento degli elementi più importanti in alto sulla pagina.

Modelli di lettura

Descrivono i modi più comuni con cui gli utenti scansionano una pagina, e sono rappresentati con vettori. Il 79% circa degli utenti foglia una pagina quindi va da sé che la scansione di quest’ultima deve essere più semplice possibile. Quindi, progettiamo il layout con uno specifico modello di lettura in mente partendo da queste informazioni. L’incorporare schemi di lettura nei layout implica il posizionare in modo strategico gli elementi lungo le linee di vista dell’utente; quelli più utilizzati sono il modello a “Z”, un vettore utile per i layout con parecchie immagini, e quello a “F”, utile invece per i layout che incorporano molto testo.

Above o below the fold

Nel web design, il fold è la linea in corrispondenza della quale una pagina viene tagliata, a causa delle limitazioni imposte dalla dimensione dello schermo. Con Above the fold, si intende il contenuto visibile quando la pagina viene caricata, mentre con il termine “Below the fold” quello che richiede uno scroll degli utenti verso il basso per poter essere visualizzato. Quando parliamo di design del layout, il contenuto più significativo, o più persuasivo se vogliamo (come gli inviti all’azione ad esempio), deve essere piazzato “Above the fold”, in modo che l’utente non debba cercarlo (uno spazio stimato in 1600 x 600 px, per la maggior parte delle dimensioni schermo).

Sistemi a griglia

Per sistema a griglia si intende un layout basato su rigide misurazioni e linee guida; la griglia è composta da colonne e gutters, quindi spazi destinati a posizionamento del contenuto e spazi vuoti tra le colonne (poi vi sono i margini, le linee di flusso, i moduli, eccetera).

L’origine dei sistemi a griglia è da ricercare nei cari e vecchi giornali e riviste cartacee ma, seppur considerando questo, visto l’ordine matematico e la coerenza che creano a fronte di un alto volume di contenuti, sono onnipresenti nel web design. I designer, al contempo, devono anche diffidare della monotonia del design della griglia ed utilizzare tali vincoli al fine di creare disposizioni inaspettate all’interno di essa.

White space (Spazio bianco)

Il “White space” – spazio bianco, anche noto come “Spazio negativo” – non è altro che l’area di disegno senza contenuto, quindi uno spazio vuoto. Anche se a volte è facile trascurarlo, oppure tentare di immettervi dei contenuti, il white space può essere una delle risorse più importanti nel processo di design di un layout.

Cerchiamo di vederla in questo modo: una riga di testo, in una pagina vuota, attirerà la nostra attenzione in modo molto più efficace rispetto alla stessa ma piena zeppa di contenuti, no? Questo ampio spazio bianco renderà meno scoraggiante la lettura dell’intera composizione. Differentemente dalla stampa su pagine cartacee, non vi è limite di lunghezza per una pagina web e questo offre ai designer più liberta di manovra con lo spazio negativo.

Layout – i tipi più comuni

Un layout raramente viene creato a partire da zero, tant’è che spesso è altamente consigliato che non lo siano; i siti web moderni – o comunque la maggior parte di essi – si basa su schemi di layout comuni, utilizzati più e più volte e con una serie di piccole variazioni subite nel corso del tempo.

Chiaramente, specie per i designer o per coloro che hanno l’arte nel sangue e la voglia di vedere tutto sotto nuove luci e prospettive, l’originalità è il cardine di qualsiasi progetto, ma bisogna comprendere che i siti web devono essere comprensibili e utilizzabili, sin dall’immediato.

Quindi va da se che il designer debba attenersi a questo, visto che gli utenti si sono abituati a determinati tipi di layout nel corso degli anni.

Importante è ricordare due cose: primo, che un layout deve essere pratico, e secondo che minore sarà il tempo di apprendimento, da parte dell’utente, di utilizzo del nostro sito maggiore sarà il tempo che dedicherà alla navigazione effettiva su di esso. Detto questo, andiamo ad esplorare i più comuni tipi di layout:

A colonna singola

Si intende per layout a colonna singola quando il contenuto è disposto sequenzialmente in una colonna, con un allineamento spesso centrato.

layout siti web - singola colonna
Esempio di layout a colonna singola

Molti layout partono da qui per le basi, considerando che il design mobile-first è un approccio a lungo consigliato e i siti web ottimizzati per il mobile, a causa dei vincoli di dimensione, spesso sono disposti in una singola colonna. Questo layout risulta particolarmente utile per contenuti basati su feed o landing page, come blog o social media, in quanto incoraggia il visitatore allo scorrimento e riduce la quantità di elementi nella pagina.

A due colonne

Per layout a due colonne si intende quel contenuto visualizzato uno a fianco all’altro, a volte disposto a schermo diviso.

layout siti web - due colonne
Esempio di layout a due colonne

Questo è utile per evidenziare la rigida divisione tra due elementi (un tipo di servizio offerto prima e dopo, un prezzo di un prodotto o servizio prima e dopo, tanto per fare qualche esempio).

A più colonne (o multicolonna)

Chiamato anche newspaper o magazine layout (layout di giornale o rivista), questo layout ospita contenuti pesanti all’interno della stessa pagina.

layout siti web - multi colonna
Un esempio di layout a più colonne o multicolonna

Comunemente si utilizza una griglia al fine di mantenere una gerarchia e ordine offrendo un più ampio spazio a elementi più importanti, come il contenuto del corpo, mentre altri meno importanti, come il menu di navigazione, un banner o la barra laterale, ad esempio, sono destinati ad uno spazio meno proporzionato.

Pubblicazioni in linea, siti zeppi di contenuti multimediali, home page aziendali, siti di shopping e dashboard degli utenti: è utile per tutti questi siti, pieni di contenuti e categorie a cui indirizzare l’utenza.

Asimmetrico

Un layout asimmetrico è quello in cui gli elementi sono disposti, appunto, in modo asimmetrico e quindi disuguale. Per dirla spiccia, la disposizione del layout non è standardizzata come quelli di cui abbiamo precedentemente parlato. Ma, anche se è l’antitesi di un sistema basato su griglia, questo non vuol dire a ndo’ cojo cojo; cioè, non significa confusione!

Lequilibrio è il fulcro di qualsiasi tipo di progetto e un layout asimmetrico arriva a questo semplicemente in modo inaspettato: abbinando un’immagine su larga scala, su di un lato, con molti elementi più piccoli sull’altro. Utile per enfatizzare alcuni elementi rispetto ad altri (per mezzo della colorazione, il posizionamento o la dimensione letterale).

Quei marchi che possono passare la linea del convenzionale nell’approccio al design, troveranno ideale questo stile; quindi per quei siti web artistici, o che di arte si occupano, o che vogliono mostrare un loro prodotto innovativo o elettrizzante.

Layout siti web – scegliamo bene

Un design ottimale per il layout del nostro sito web, non solo lo rende visivamente accattivante ma soprattutto lo rende intuitivo. Questo è il primo passo per riuscire nell’impresa di fare una buona impressione verso i clienti/utenti, invogliandoli a restare sul sito e visualizzare tutti i contenuti che questo ha da offrire.

Questi suggerimenti possono darci sì preziosi consigli ma si limitano a gettare le basi, ad offrirci un punto di partenza; detto questo, se vogliamo offrire esperienze eccezionali o particolari alla nostra utenza allora sarebbe consigliabile pensare di ingaggiare un web designer professionista e lavorare fianco a fianco con un freelance.

Buona fortuna!

Informazioni Autore

Maniscalco Filippo

Blogger, copywriter, project manager. Propositivo e dedito al lavoro, gestisce ogni progetto con passione e dedizione. Appassionato di lettura, scrittura e musica. contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo