Layout del sito Web

Migliori esempi e idee di layout del sito Web


Il layout del tuo sito Web può definirne il successo. Ottieni il design sbagliato e le persone saranno confuse e disorientate, distruggendo l’esperienza dell’utente. È probabile che manchino i contenuti critici o non riescano a vedere un invito all’azione.

Ma l’importanza del layout va oltre. Il design deve adattarsi al contenuto del tuo sito. Con il layout giusto, i tuoi contenuti possono brillare, ma con quello sbagliato puoi diventare affollato, difficile da leggere e poco interessante.

Il layout del tuo sito Web può definirne il successo. Ottieni il design sbagliato e le persone saranno confuse e disorientate, distruggendo l’esperienza dell’utente. È probabile che manchino i contenuti critici o non riescano a vedere un invito all’azione.

Ma l’importanza del layout va oltre. Il design deve adattarsi al contenuto del tuo sito. Con il layout giusto, i tuoi contenuti possono brillare, ma con quello sbagliato puoi diventare affollato, difficile da leggere e poco interessante.

Alla fine tutti i siti hanno un sistema a griglia che si trova sotto il design del sito web. Queste colonne e righe forniscono ordine ai tuoi contenuti e guidano l’occhio dell’utente intorno alla pagina. All’interno di queste griglie, è possibile creare una pletora di approcci diversi. Ogni sito Web ha una griglia sottostante su cui il progettista ha costruito il layout.

Tuttavia, quando si tratta di scegliere il giusto layout per il proprio sito, ci sono diversi punti di partenza comuni che è possibile utilizzare per iniziare.

Vale la pena dire che non è necessario attenersi a un approccio. Puoi facilmente combinare più layout sul tuo sito o anche su una singola pagina come una landing page.

Detto questo, diamo un’occhiata alle opzioni di layout più comuni disponibili.

Iniziamo con il modello di layout più semplice di tutti, la singola colonna.

1. Layout a colonna singola

Sebbene il layout più semplice che troverai, è cresciuto in modo significativo in popolarità dalla crescita del web mobile. Questo perché il sito Web può utilizzare lo stesso design su dispositivi mobili, tablet e desktop, riducendo i tempi di sviluppo.

Inoltre, i layout a colonna singola funzionano bene per creare un’ottima esperienza di lettura perché focalizzano l’utente sul contenuto senza distrazioni su entrambi i lati. Ecco perché il sito di blog medio lo adotta per tutti i loro articoli.

Medium utilizza un layout a colonna singola per migliorare l'esperienza di lettura.

Infine, quando combinato con le immagini, un layout a colonna singola può avere un forte impatto perché ti consente di mostrare quelle immagini più grandi possibile. The Ocean Resort è un ottimo esempio di questo in azione.

L'Ocean Resort utilizza l'intera larghezza del suo design a colonna singola per massimizzare l'impatto delle immagini.

Tenendo presenti questi fattori, considera l’utilizzo di un layout a colonna singola se desideri che le persone trascorrano molto tempo a leggere sul tuo sito o se hai immagini che richiedono che la stanza brilli.

A causa della sua semplicità, ci sono poche sfide in un layout a colonna singola. Tuttavia, è necessario considerare attentamente il flusso di informazioni. Di quale ordine ha bisogno l’utente per vedere i tuoi contenuti?

Ad esempio, è utile fornire agli utenti un riepilogo di ciò che la pagina copre in alto per attirarli e offrire un chiaro invito all’azione verso la fine.

Inoltre, pensa a come puoi mantenere l’utente scorrere la pagina verso il basso. I layout a colonna singola tendono ad essere più lunghi e non è sempre evidente all’utente che ci sia più contenuto sotto la piega. Un indicatore visivo, come una freccia, può aiutare.

Se un layout a colonna singola sembra un po ‘restrittivo, ma hai ancora molto contenuto da comunicare, prendi in considerazione l’adozione di un design incentrato sul contenuto.

2. Layout focalizzato sul contenuto

I web designer usano spesso il layout incentrato sul contenuto su siti di notizie o blog e di solito ha una colonna principale per i contenuti e una o più colonne laterali per ulteriori informazioni.

Il vantaggio di questo layout è che può aiutarti a gestire la lunghezza della linea del contenuto centrale variando la larghezza delle colonne laterali. Questo è importante perché se la lunghezza della riga del testo è troppo lunga o corta, diventa più difficile da leggere, riducendo così la comprensione e la conservazione delle informazioni.

Tuttavia, fatto bene, il layout focalizzato sul contenuto è l’ideale per qualsiasi sito web incentrato sulla copia. Il segreto è dividere il contenuto all’interno di questo layout in blocchi piccoli e facili da digerire.

I post su Boagworld suddividono il contenuto con intestazioni, elenchi, immagini e citazioni di ritiro.

Per esempio, sul mio blog, scoprirai che il mio post medio è punteggiato da titoli, elenchi, immagini e tirate fuori le virgolette. Queste sono tutte tecniche per aiutare l’utente a scansionare l’articolo, trovando parti che sono di interesse.

È inoltre necessario prestare particolare attenzione alle colonne laterali. È essenziale che il web designer inserisca il contenuto giusto in queste colonne e che visivamente abbiano la ponderazione corretta.

Il problema è che gli utenti si aspettano di trovare contenuti secondari nelle colonne laterali e quindi di prestare loro meno attenzione. Pertanto, se prevedi di includere qualcosa come un invito all’azione in una colonna laterale, deve essere abbastanza forte da attirare l’attenzione.

Ad esempio, nota come Smashing Magazine usa un’illustrazione colorata di un gatto per attirare l’attenzione sul loro modulo di iscrizione alla newsletter nella colonna di destra.

Smashing Magazine utilizza le sue colonne laterali per fornire informazioni secondarie sul post.

Non che il layout focalizzato sul contenuto sia appropriato per ogni pagina del tuo sito. I siti Web spesso associano questo layout a un design in stile rivista.

3. Layout della rivista

Come suggerisce il nome, questo approccio di layout è ampiamente utilizzato su riviste o siti di notizie per mostrare un gran numero di storie diverse.

Ispirati al layout di stampa, consentono la combinazione di titoli e immagini per introdurre storie. Questo può essere un modo coinvolgente per trasmettere ciò che è essenzialmente un elenco di collegamenti.

È anche un layout eccellente per evidenziare il contenuto che cambia regolarmente. Ecco perché piacciono i siti di notizie Il Washington Post quindi favoriscilo.

I siti di notizie tendono a favorire il layout in stile rivista.

Tuttavia, il layout non è privo di inconvenienti. Il layout di una rivista può essere impegnativo per rendere reattivo, spesso richiede un cambiamento completo nel design per dispositivi con schermi più piccoli.

Questo stile di layout del sito Web può anche essere in qualche modo schiacciante, con un gran numero di immagini e titoli che invocano attenzione.

Il modo più efficace per affrontare questo problema è creare una chiara gerarchia visiva. In altre parole, alcune delle “storie” sono più grandi di altre.

Variando le dimensioni della trama, guidano l'occhio degli utenti.

Ad esempio, nota come Voga il sito Web focalizza l’attenzione sull’immagine a sinistra rendendola notevolmente più grande. Stanno effettivamente dicendo all’utente dove cercare prima.

Inoltre, aiuta il resto dell’interfaccia utente a essere semplice, con una tipografia pulita e semplici barre di navigazione. Se stai per utilizzare il layout della rivista, dovrai lavorare sodo per semplificare le cose.

Un altro potenziale svantaggio del layout della rivista è che può sembrare “squadrato” perché la griglia che lo sottende è così visibile. Tuttavia, puoi mitigarlo prendendo ispirazione dal nostro prossimo tipo di layout.

4. Grid Breaking Layout

I layout che sembrano rompere la griglia sottostante possono essere visivamente molto più interessanti degli approcci più tradizionali. Sono anche eccellenti per attirare l’attenzione su particolari elementi dello schermo che escono dalle solite colonne.

Prendi, ad esempio, il Sito Web del VR Arles Festival. Nota come attirano la tua attenzione sulla barra di navigazione facendola sovrapporre due colonne.

Il VR Arles Festival attira la tua attenzione sulla barra di navigazione facendola sovrapporre due colonne.

Un altro uso pratico del layout di interruzione della griglia è quello di usarlo per sovrapporre il testo su un’immagine in modo tale da attirare l’attenzione sulla copia. Quando una pagina Web si sovrappone completamente al testo su un’immagine, spesso può essere persa. Tuttavia, come puoi vedi dall’esempio sotto, se il testo si sovrappone parzialmente all’immagine, si distingue molto di più.

Questo disegno attira l'attenzione sul testo e invita all'azione sovrapponendolo parzialmente all'immagine.

Il rovescio della medaglia dei layout di rottura della griglia è che sono difficili da ottenere bene, specialmente quando i siti Web devono essere reattivi. In verità, la maggior parte dei progetti di rottura della griglia non sono niente del genere. C’è ancora una griglia sottostante e tutti gli elementi dello schermo si adattano ad essa. È solo che la griglia è molto più complessa e quindi non è così ovvia. Questo li rende difficili da progettare.

La loro intrinseca complessità è il motivo per cui si tende a vederli utilizzati da aziende guidate dal design come agenzie di design o marchi di moda. Dimostrano un certo grado di raffinatezza progettuale che fa appello a un pubblico particolare.

Se un layout di rottura della griglia sembra troppo complicato per la tua situazione, ma vuoi comunque fare qualcosa di più innovativo e insolito, prendi in considerazione un design a schermo intero.

5. Layout a schermo intero

I layout a schermo intero, come suggerisce il nome, si adattano a un singolo schermo senza che l’utente debba scorrere. Ciò li rende ideali per la narrazione o le presentazioni.

Prendi, per esempio, Specie in pezzi. Questa ricca e interattiva esperienza di presentazione racconta le storie di 30 specie impegnate.

Specie e pezzi è un'esperienza ricca e interattiva che si svolge senza la necessità di scorrere.

Come puoi vedere, i layout a schermo intero sono al meglio se accompagnati da immagini potenti. Ciò li rende un’ottima scelta per i siti Web ricchi di fotografia, illustrazioni o video.

Non che devi attenersi rigorosamente all’approccio a schermo singolo. A prima vista, il Roux sul sito di Parliament Square sembra essere un sito Web a schermo intero nello stesso senso di Species in Pieces. Le loro splendide immagini riempiono l’intero viewport.

Questo sito Web utilizza l'intero viewport per mostrare la sua superba fotografia.

Tuttavia, è possibile spostarsi più in basso nella pagina per visualizzare contenuti aggiuntivi. Sfortunatamente, ciò evidenzia un potenziale svantaggio con questo approccio di layout. Gli utenti non si rendono sempre conto di poter scorrere e quindi possono perdere contenuti preziosi.

È inoltre necessario considerare attentamente come il layout si adatterà a varie dimensioni. Ad esempio, l’approccio a schermo intero funzionerà su un dispositivo mobile? Inoltre, le immagini verranno ritagliate al variare delle dimensioni dello schermo o semplicemente ridotte? È possibile trovare rapidamente i punti focali delle immagini ritagliate dall’area visualizzabile a dimensioni inferiori.

Detto questo, se hai immagini straordinarie da sfoggiare, avrai difficoltà a trovare un miglior layout. Ma, se si desidera l’opzione per aggiungere una descrizione e inviti all’azione insieme a quelle immagini, è possibile prendere in considerazione un layout alternativo.

6. Layout alternato

Il modello di layout alternato è uno dei più comunemente presenti sul web. Scoprirai che è costituito da una serie di blocchi di contenuti, ognuno dei quali ha un layout a due colonne. I blocchi sono in genere costituiti da un’immagine su un lato e testo sull’altro.

Ciò che le dà il nome è che l’immagine si alterna a lato. Quindi il primo blocco avrà contenuto a sinistra e immagine a destra, mentre il blocco successivo inverte quel layout.

È un approccio di layout particolarmente favorito quando si spiegano le caratteristiche o i vantaggi di un prodotto. Ad esempio, i prodotti software come Webydo utilizzerà l’immagine per mostrare una funzione e quindi la copia per spiegare come funziona o il vantaggio che offre.

Webydo alterna testo e immagini in diversi blocchi di contenuti nella sua homepage.

Non che questi blocchi di contenuti siano limitati a immagini e testo. A volte i siti sostituiscono l’immagine con un video. Allo stesso modo, il lato contenuto dell’elemento potrebbe includere qualsiasi cosa, dalle icone alle testimonianze o agli inviti all’azione.

Per esempio, Convertkit include una testimonianza e un invito all’azione accanto al loro testo in ogni blocco di contenuti.

Convertkit include testimonianze e inviti all'azione insieme alle loro immagini.

Parte del motivo per cui i blocchi alternati sono così comuni è che si tratta di un approccio di layout semplice con alcuni inconvenienti. Se devi comunicare più punti di vendita, è quasi sempre un’opzione di layout affidabile.

Naturalmente, le tue esigenze potrebbero essere diverse, quindi un’altra opzione da considerare è il layout basato su scheda.

7. Layout basati su scheda

I layout di pagina basati su schede sono un altro approccio di layout comune che vedrai in tutto il Web.

I layout basati su schede sono un ottimo modo per offrire alle persone una serie di opzioni tra cui l’utente può scegliere, fornendo loro informazioni sufficienti su ciascuna scelta per prendere una decisione.

Ciò li rende una scelta popolare per le pagine di elenchi di prodotti dei siti di e-commerce. Consente al sito Web di visualizzare un’immagine del prodotto, una descrizione e il prezzo. Puoi anche aggiungere funzionalità come “salva per dopo” come puoi vedere dal Sito web Asos.

I siti di e-commerce come Asos preferiscono i layout basati su schede per visualizzare elenchi di prodotti.

Tuttavia, troverete siti Web che utilizzano layout basati su schede in qualsiasi situazione in cui gli utenti devono selezionare da un elenco. Ad esempio, un altro uso tipico sarebbe la visualizzazione di un elenco di articoli su un blog o un sito di notizie.

Un layout basato su carta ti consente di visualizzare un’immagine della storia, del titolo e della descrizione, nonché eventuali dettagli aggiuntivi sul post che desideri includere. Awwwards il blog è un eccellente esempio di questo tipo di utilizzo in azione.

Awwwards utilizza un layout basato su schede per elencare i post sul proprio blog.

Soprattutto, i layout basati su schede funzionano bene in modo reattivo, con il numero di carte in fila che si riduce lentamente man mano che la larghezza disponibile diminuisce.

Ci sono un paio di piccoli inconvenienti all’approccio, tuttavia. Innanzitutto, le carte funzionano meglio quando includi l’immagine. Ciò significa che se stai lottando per trovare foto adatte a ciascuna delle tue voci dell’elenco, potresti essere migliore con un design diverso.

L’altro lieve problema riguarda le diverse quantità di contenuto. Se una carta ha più contenuti di un’altra, può lasciare uno spazio bianco all’interno della carta o tra ogni riga.

Se le carte hanno quantità variabili di contenuto, possono lasciare spazi tra le carte.

Un modo per mitigare questo problema è non cercare di mantenere le carte sulla stessa riga, come mostrato nell’esempio seguente.

Consentendo alle carte di riempire lo spazio vuoto, si finisce con un design più esteticamente piacevole.

Tuttavia, questo è un problema minore, che spiega l’adozione diffusa di questo approccio di layout.

Un altro design altrettanto popolare è il layout dell’immagine dell’eroe.

8. Layout dell’eroe

Il layout dell’eroe prende il nome dalle immagini dell’eroe, quelle immagini di grandi dimensioni con sovrapposizioni di testo che dominano le home page su così tanti siti Web. Apple fa buon uso dell’immagine classica dell’eroe.

Apple fa buon uso dell'immagine classica dell'eroe.
Pixave per MacOS migliora ulteriormente il layout dell’eroe facendone dominare il design della sua homepage.
Pixave per MacOS migliora ulteriormente il layout dell'eroe facendone dominare il design della sua homepage.

Ciò che rende le immagini degli eroi così diffuse è che ti consentono di disporre le tue proposta di valore in modo efficace proprio nel punto di ingresso del tuo sito web.

Come puoi vedere dal Pixave e Mela i siti Web sopra di solito consistono in una grande immagine di sfondo, un titolo o una linea sottile e una descrizione. Anche i layout degli eroi hanno spesso un importante invito all’azione.

Se devi spiegare chiaramente cosa offri sulla tua home page o sulla tua landing page in modo da attirare l’attenzione, un’immagine di eroe potrebbe essere la strada da percorrere. Tuttavia, questa è probabilmente l’estensione del loro uso.

Occasionalmente vedrai il layout dell’eroe usato nelle pagine successive. Ma, nella maggior parte dei casi, l’immagine dell’eroe distoglie semplicemente l’attenzione da contenuti più preziosi. Quindi usa con cura.

A parte questo, c’è un piccolo inconveniente nell’uso di un layout di eroe. Sì, sono comuni, ma gli utenti ne hanno familiarità e sono efficaci.

Un’opzione di layout notevolmente meno comune è il layout a schermo diviso.

9. Layout schermo diviso

Come il layout a schermo intero, uno schermo diviso è un ottimo modo per attirare l’attenzione quando gli utenti arrivano per la prima volta sul tuo sito Web, come puoi vedere dal home page della società di web design sotto.

Questo sito utilizza il layout a schermo diviso per spiegare le due parti alla loro offerta.

Ciò che rende l’esempio sopra così efficace è che c’è un chiaro motivo per il layout dello schermo diviso. Il sito web sta chiarendo che ci sono due lati nel loro business: progettazione e sviluppo.

Un esempio simile è quando si desidera offrire agli utenti una chiara scelta binaria. Uno schermo diviso ha molto senso in quella situazione in quanto divide lo schermo equamente tra le due opzioni.

Ad esempio, l’agenzia di modelle 62 Gestione utilizza uno schermo diviso per incoraggiare gli utenti a identificare se stanno cercando un modello maschile o femminile.

62 La direzione utilizza un design a schermo diviso per incoraggiare gli utenti a scegliere tra due opzioni.

Sfortunatamente al di là di questo numero limitato di applicazioni, ci sono poche ragioni per adottare un design a schermo diviso. È un’opzione di layout relativamente limitante e semplicemente non ci sono molti scenari in cui è appropriato. Tuttavia, nei casi in cui si trova, è di gran lunga la scelta migliore.

Un’opzione simile che fornirebbe un po ‘più di flessibilità è il layout asimmetrico.

10. Disposizione asimmetrica

Mentre il layout dello schermo diviso impone una divisione uguale al centro della finestra, un design asimmetrico consente di dividere lo schermo come meglio credi.

Il vantaggio di questo layout rispetto allo schermo diviso è che consente di aggiungere enfasi a un lato particolare della pagina. Più proprietà immobiliari hanno una parte, maggiore è la concentrazione su di essa. Ciò, a sua volta, consente di identificare i contenuti primari e secondari.

Con la premessa di colonne primarie e secondarie in atto, è possibile utilizzare l’approccio in più modi. Per esempio, Félix Lesouef utilizza il metodo sul suo sito per dividere tra contenuto e navigazione.

Félix Lesouef utilizza un layout asimmetrico per evidenziare la navigazione dei suoi siti.

Al contrario, il Nutre Eats sito Web utilizza la seconda colonna per consentire all’utente di visualizzare la sezione successiva del proprio sito Web.

Nourish Eats utilizza questo approccio di layout per esporre il contenuto secondario in modo più evidente.

In molti modi, il layout asimmetrico è una scelta eccellente. È flessibile, relativamente facile da implementare e meno utilizzato. È un modo conveniente per rendere diverso il tuo sito Web senza il mal di testa di alcune delle altre scelte.

Come scegliere un layout

Leggendo questo articolo, hai fatto il primo passo nella scelta del layout giusto per il tuo sito. Hai imparato che tipo di opzioni sono disponibili per te.

Successivamente, devi avere un’idea di quali opzioni potrebbero essere appropriate per il tuo sito. Un modo per farlo è guardare i tuoi concorrenti. Tuttavia, consiglierei di non fermarsi qui. Il pericolo è che li copi, e questo ti farà sempre fare un passo indietro.

Invece, dai un’occhiata ai siti di altri settori con tipi di contenuto correlati al tuo. Se hai un sito web di brochureware rivolto a un pubblico B2B, Dai un’occhiata ad altri siti simili. Allo stesso modo, se hai un sito di e-commerce, guarda l’e-commerce in altri settori.

Da lì, collabora con il tuo designer per sperimentare alcuni approcci diversi. Fai in modo che wireframe alcune idee basate su diversi layout e vedi cosa si adatta meglio ai tuoi contenuti.

Se non riesci a prendere una decisione o non hai fiducia nella giusta direzione, prova a mettere le opzioni di fronte ad alcuni utenti e ottieni le loro reazioni. Non limitarti a chiedere loro quali preferiscono, chiedi anche loro se hanno individuato contenuti critici o capito di cosa si trattava.

In verità, probabilmente ti ritroverai a scegliere e scegliere tra diversi approcci di layout per diverse parti del tuo sito Web, e va bene. Perché quando si tratta di layout del sito Web, è fondamentale utilizzare quello giusto al momento giusto.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map