11 layout di siti Web che hanno reso i contenuti brillanti nel 2017

Perché le persone visitano davvero i siti Web? Nella maggior parte dei casi, il motivo principale alla base di ogni visita è il contenuto. Il contenuto è di fondamentale importanza e ogni designer vuole presentarlo nel modo più utile e intuitivo. Non sorprende, quindi, che selezionare un layout per i tuoi contenuti sia una delle prime cose che i designer fanno quando iniziano un nuovo progetto.

Molti designer ritengono che il layout di ogni sito Web su cui lavorano dovrebbe essere completamente unico per soddisfare gli obiettivi del progetto - questo è lontano dalla verità. Se visiti siti Web famosi, noterai che molti di essi utilizzano layout simili. Questa non è una coincidenza o per pigrizia, è perché questi layout hanno tre vantaggi significativi:

  • Sono utilizzabili. I layout comuni sono diventati così comuni perché hanno dimostrato che gli utenti possono lavorare con loro.
  • Sono familiari. Una buona esperienza utente viene creata creando un senso di familiarità con gli utenti. I visitatori provano un piacevole senso di deja-vu quando vedono le caratteristiche familiari presentate come si aspettano. Di conseguenza, le persone passeranno il tempo a digerire il contenuto anziché concentrarsi sul design unico della pagina.
  • Risparmiano denaro. Riutilizzare i layout esistenti è un risparmio di tempo. I designer trascorreranno meno tempo a sperimentare il layout e si concentreranno maggiormente sulla gerarchia visiva e su altri aspetti del design che hanno un impatto diretto sull'esperienza dell'utente.

Sebbene ogni progetto sia unico e richieda un approccio individuale, è utile conoscere i layout comuni. In questo articolo, daremo un'occhiata a 11 layout molto comuni che puoi trovare su innumerevoli siti oggi.

1. Colonna singola.

I layout a colonna singola presentano il contenuto principale in un'unica colonna verticale. Questo tipo di layout è forse il più semplice da questo elenco ed è il più facile da navigare per gli utenti. I visitatori possono semplicemente scorrere verso il basso per vedere più contenuti.

Nonostante la sua semplicità, i layout a colonna singola sono abbastanza popolari tra molti siti Web. La rivoluzione mobile ha anche avuto il suo impatto sulla popolarità di questo tipo di layout: i layout a colonna singola si adattano perfettamente agli schermi mobili.

Quando usarlo

Questo layout trova applicazione in molti blog personali basati su principi di design minimalista. Questo è un layout comune per microblog come Tumblr.

Medium, una popolare piattaforma di blog, utilizza questo tipo di layout per presentare le sue storie. Tutti gli articoli su Medium sono presentati in un layout a colonna singola.

Suggerimenti per la progettazione

  • Considera i menu "adesivi" per le pagine lunghe. Poiché il layout a colonna singola viene spesso utilizzato per le pagine a scorrimento lungo, è essenziale mantenere sempre visibile la navigazione. "Navigazione adesiva" ti aiuta a evitare che i visitatori debbano scorrere fino in cima alla pagina per navigare.
Fonte immagine: codemyui

2. Schermo diviso

Un layout a schermo diviso (o uno schermo diviso in due) è perfetto per una pagina che ha due contenuti principali di uguale importanza. Consente ai progettisti di visualizzare entrambi gli articoli contemporaneamente, dando loro la stessa considerazione.

Due elementi centrali vengono visualizzati contemporaneamente. Fonte immagine: 62 modelli

Quando usarlo

I layout dello schermo diviso sono perfetti quando il tuo sito offre due variazioni drasticamente diverse del percorso dell'utente, come due diversi tipi di istruzioni come vediamo nell'esempio di Dropbox di seguito.

I layout con schermo diviso sono anche ideali per il contrasto, ed è per questo che i designer spesso usano questo layout per mettere due elementi uno contro l'altro.

Le caratteristiche opposte della dualità (colori opposti). Fonte immagine: personalizzazioni di Google Star Wars

Suggerimenti per la progettazione.

  • Evita di usare troppo contenuto in sezioni divise. I design dello schermo diviso non si espandono bene all'aumentare del contenuto, quindi è meglio evitare di scegliere questo tipo di layout se è necessario fornire molte informazioni testuali o visive in sezioni divise.
  • Valuta di aggiungere l'animazione. Puoi creare un'esperienza più dinamica incorporando dettagli animati.
Fonte immagine: Cechov è vivo

L'asimmetria è la mancanza di uguaglianza tra i due lati del layout. L'asimmetria è una tecnica preferita da molto tempo nel mondo dell'arte ed è recentemente diventata popolare tra i web designer.

Molte persone confondono l'asimmetria con lo squilibrio ma, in effetti, l'obiettivo dell'asimmetria è quello di creare un equilibrio quando è impossibile o non desiderabile utilizzare lo stesso peso per due sezioni. L'uso dell'asimmetria consente di creare tensione e dinamismo e l'asimmetria facilita un migliore comportamento di scansione focalizzando l'attenzione dell'utente sui singoli oggetti (punti focali). Modificando la larghezza, la scala e il colore di ciascun contenuto asimmetrico, il designer esorta il visitatore a rimanere visivamente impegnato.

Quando usarlo

Questo tipo di layout può essere utilizzato quando i progettisti vogliono creare layout interessanti e inaspettati, pur continuando a dare enfasi direzionale. Applicata in modo appropriato, l'asimmetria può creare uno spazio attivo che guida l'occhio da un elemento all'altro, anche attraverso il vuoto. Considera come Dropbox mostra chiaramente i punti di messa a fuoco nell'esempio seguente.

L'asimmetria rende la homepage di Dropbox più energica.

Suggerimenti per la progettazione.

  • Assicurati che i tuoi contenuti possano essere presentati in un layout asimmetrico. Un layout asimmetrico non è pratico per ogni sito. Probabilmente funziona meglio per i layout minimalisti.
  • Aggiungi lo stato attivo con il colore. L'asimmetria è radicata nell'idea che un oggetto con più peso visivo attirerà prima l'attenzione su di esso. È possibile utilizzare elementi con elevato contrasto cromatico per aggiungere peso visivo a parti specifiche del disegno.
L'elevato contrasto cromatico aggiunge peso visivo a parti specifiche del design. Fonte immagine: Cultura PL

4. Una griglia di carte.

Le carte sono ottimi contenitori per informazioni cliccabili - consentono ai progettisti di presentare una pesante dose di informazioni in modo digeribile. Anteprime di dimensioni ridotte (in genere un'immagine e una breve descrizione) aiutano i visitatori a trovare il contenuto che preferiscono e ad approfondire i dettagli facendo clic o toccando la scheda.

La cosa più importante di una griglia di carte è che questo tipo di layout è quasi infinitamente manipolabile. Le griglie possono variare in dimensioni, spaziatura e numero di colonne e lo stile delle carte può variare in base alle dimensioni dello schermo (le carte possono essere riorganizzate per adattarsi a qualsiasi schermo). Ecco perché le griglie di carte funzionano così bene con i design reattivi.

Quando usarlo

Una griglia di layout di schede è adatta a siti ricchi di contenuti che mostrano molti elementi con uguale gerarchia.

YouTube ha un layout di griglia rigoroso; le file diritte di carte sono raggruppate in categorie.Ogni pin sulla scheda Pinterest è rappresentato come una carta.

Suggerimenti per la progettazione.

  • Rendi cliccabile l'intera carta, non solo parti specifiche. L'interazione dell'utente con una carta è molto più comoda quando gli utenti non devono fare clic con precisione sul titolo o sull'immagine di una carta per accedere ai dettagli del contenuto.
  • Se la tua scheda contiene un'immagine, considera come apparirà su uno schermo più piccolo. Un'immagine che non si ridimensiona bene e diventa illeggibile su schermi di piccole dimensioni crea un'esperienza utente negativa.
  • Presta attenzione allo spazio bianco tra le carte perché influenza il modo in cui i visitatori navigano. Più spazio tra le carte rende la navigazione più lenta, ma i visitatori presteranno maggiore attenzione a ciascuna carta. Lo spazio minimo consente una scansione veloce ma aumenta anche i rischi che i visitatori possano trascurare alcuni contenuti.
  • È possibile incorporare feedback animati. La carta apparirà come un elemento cliccabile.
Smashing Magazine ha un ottimo feedback animato per le sue carte.

Questo è forse il layout più complesso menzionato in questo post. Come suggerisce il nome, questo layout è stato inizialmente reso popolare da giornali e riviste, il che ha avuto un problema a presentare enormi quantità di informazioni al lettore in modo facile da seguire. I progettisti della stampa hanno utilizzato il sistema a griglia per questo scopo. Il layout è realizzato utilizzando una griglia modulare che consente flessibilità: un layout a più colonne utilizza un peso visivo diverso per dare priorità alle informazioni.

Il layout della rivista consente ai lettori di scansionare, leggere. e capire rapidamente una pagina. Fonte immagine: New York Times

Analogamente alle riviste cartacee, le riviste digitali utilizzano una griglia a più colonne che consente di creare una gerarchia complessa e integrare testo e illustrazioni. L'obiettivo principale è lo stesso: i visitatori devono essere in grado di scansionare, leggere e comprendere rapidamente una pagina. I designer si sforzano di creare un ritmo visivo. Tentano di facilitare la scansione dell'occhio delle sezioni della pagina e consentono all'occhio di spostarsi naturalmente da un blocco all'altro. Allo stesso tempo, il designer cerca di impedire ai diversi blocchi di competere per l'attenzione.

Quando usarlo

Il layout della rivista è una buona scelta per le pubblicazioni che hanno una gerarchia complessa con grandi quantità di contenuto in una pagina. Senza l'uso efficace di una griglia, è probabile che tutto il contenuto della home page appaia più disordinato e meno organizzato.

Un layout in stile rivista è il migliore per i siti di notizie che hanno molti contenuti regolarmente aggiornati in più categorie.

Suggerimenti per la progettazione.

  • Questo layout enfatizza titoli e immagini. La dimensione del titolo / immagine è direttamente correlata all'attenzione che comanda. Elementi più importanti attirano l'attenzione di un utente più velocemente di quella meno prominente. Prendiamo ad esempio il New York Times: il contenuto più importante della pagina ha miniature più grandi, titoli più grandi e testo più dettagliato.
Il New York Times utilizza una dimensione diversa per il testo per creare un senso di importanza - le dimensioni del testo variano per creare una gerarchia visiva.
  • La disposizione di una griglia richiede attenzione sia ai ritmi orizzontali che verticali, e sono ugualmente importanti se si desidera creare un buon layout. Considera la differenza tra i seguenti esempi. Nel primo esempio, la griglia è coerente con la larghezza della colonna e la spaziatura orizzontale, ma la spaziatura verticale variata crea rumore visivo. Nel secondo caso, la spaziatura della colonna orizzontale e la spaziatura dell'elemento verticale sono coerenti e ciò rende la struttura generale più pulita e più comoda per l'utente che consuma visivamente il contenuto.

6. Scatole.

Questo layout ha un riquadro di larghezza dell'intestazione di grandi dimensioni e alcuni riquadri più piccoli che occupano ciascuno una parte del patrimonio immobiliare dello schermo del riquadro più grande. Il numero di scatole più piccole può variare da due a cinque. Ciascuna delle caselle può essere un collegamento che porta a una pagina più ampia e complessa.

Quando usarlo

Questo è un layout piuttosto versatile che può essere utilizzato sia per singoli siti simili a portfolio che per siti Web aziendali / e-commerce.

Fonte immagine: mrporter

Suggerimenti per la progettazione.

  • Collega le scatole per raccontare una storia. La scatola grande può essere utilizzata per mostrare i prodotti mentre le scatole più piccole possono offrire ulteriori informazioni sul prodotto.
Fonte immagine: Microsoft Surface

La navigazione è una parte fondamentale di qualsiasi sito Web: il menu principale è la prima cosa che la maggior parte degli utenti cerca quando desidera navigare. Oltre alla navigazione orizzontale nella parte superiore, è possibile mantenere visibili le opzioni di menu posizionandole in una barra laterale fissa. La barra laterale è una colonna verticale nella parte sinistra o destra della pagina. Per questo layout, la barra laterale rimane fissa e rimane sempre visibile mentre il resto della pagina cambia mentre gli utenti scorrono la pagina verso il basso. In questo modo la navigazione rimane accessibile.

Quando usarlo

Questo layout funziona bene per i siti Web con un numero relativamente limitato di opzioni di navigazione. È preferibile che tutte le opzioni siano visibili quando un utente accede alla pagina.

Fonte immagine: measponte

Suggerimenti per la progettazione.

  • Le barre laterali possono anche contenere contenuti diversi o in aggiunta a un menu, come collegamenti ai social media, informazioni di contatto o qualsiasi altra cosa che i visitatori possano trovare facilmente.
Trefecta offre opzioni di modifica della lingua e della condivisione delle pagine nella barra laterale.

Questo layout si basa sull'idea che l'uso delle immagini nel design è il modo più veloce per vendere un prodotto. Le immagini hanno l'opportunità di creare una connessione emotiva con i visitatori: una grande fotografia in grassetto o un'illustrazione di un oggetto fa una forte affermazione e crea una prima impressione straordinaria.

Quando usarlo

Questo layout è eccezionale quando è necessario dimostrare solo un prodotto / servizio e focalizzare l'attenzione dell'intero utente su di esso.

La mancanza di altri elementi in questo layout guida l'attenzione dell'utente verso il prodotto.

Utilizzando questo tipo di layout, è possibile creare un'esperienza emotiva davvero coinvolgente. Un grande esempio è Species in Pieces, che offre una ricca esperienza e aumenta la consapevolezza delle specie in via di estinzione.

Fonte immagine: specie in pezzi

Suggerimenti per la progettazione.

  • Assicurati che la grafica sia abbastanza buona da essere messa in risalto. L'immagine, la foto o l'illustrazione dovrebbero essere pertinenti al messaggio che si desidera recapitare e di alta qualità.
  • Prendi in considerazione la tipografia. La tipografia accompagna l'immagine. Dimensioni, peso del carattere tipografico e colore sono tutte proprietà di un carattere tipografico che devono essere utilizzate per rafforzare il design.

9. Layout a forma di F.

Questo tipo di layout è stato creato in base al modo in cui gli utenti leggono il contenuto sul Web. Il modello di scansione a forma di F, originariamente definito da NNGroup, afferma che gli utenti in genere scansionano blocchi di contenuto pesanti in un modello che assomiglia alla lettera F o E. I nostri occhi iniziano nell'angolo in alto a destra della pagina, scansionano in orizzontale, quindi passa alla riga successiva e fai lo stesso ancora e ancora finché non troviamo qualcosa che attiri la nostra attenzione (contenuto interessante). Questo modello di scansione è rilevante non solo per gli utenti desktop ma anche per gli utenti mobili.

Quando usarlo

Questo layout è utile per le pagine che devono presentare molte opzioni diverse e consentire agli utenti di scansionarle rapidamente. I visitatori risponderanno meglio al layout del modello F, che imita il modello di scansione naturale. Ciò è utile per una home page o una pagina del sito di notizie che contiene risultati di ricerca.

Il New Yorker usa un layout a forma di F sulla sua homepage.

Suggerimenti per la progettazione.

  • Regola il contenuto in base al comportamento di scansione. Vale la pena posizionare i contenuti più importanti sui lati sinistro e destro della pagina, in cui l'utente inizia e termina la scansione orizzontale. Quando i visitatori raggiungono la fine della riga, si fermano per una frazione di secondo prima di passare alla riga successiva e questa pausa ti dà l'opportunità di presentare i contenuti.
  • Usa segnali visivi per guidare il visitatore. È possibile focalizzare l'attenzione dell'utente su un elemento specifico attribuendo maggiore peso visivo ad esso. Ad esempio, puoi evidenziare le parole chiave all'interno di un testo per focalizzare l'attenzione dell'utente.

10. Disposizione a forma di Z.

Il layout a Z imita anche le abitudini di scansione naturali. I visitatori del sito (provenienti da culture occidentali) iniziano nell'angolo in alto a sinistra. Scansionano da sinistra in alto a destra, formando una linea orizzontale. Il passaggio successivo, tuttavia, è un po 'diverso - invece di scendere direttamente, come nel modello a forma di F, i loro occhi vagano verso il basso e verso il lato sinistro della pagina, creando una linea diagonale. Infine, lo sguardo torna di nuovo a destra, formando una seconda linea orizzontale.

Quando usarlo

Mentre il modello F è migliore per la scansione di molti contenuti, il modello Z è più adatto per i siti con un obiettivo singolare e meno contenuto. Questo modello è efficace per indirizzare l'attenzione dell'utente su punti specifici utilizzando elementi visivi, testo e CTA ben posizionati.

Questo layout è eccezionale quando un sito ha un'agenda specifica o un invito all'azione con cui gli utenti dovrebbero interagire. Fonte immagine: Basecamp

Suggerimenti per la progettazione.

  • Coinvolgi gli utenti con uno zigzag (o continua con Z-pattern). È possibile coinvolgere gli utenti nella scansione alternando testo e immagini alcune volte per creare uno zigzag.
Un motivo a zig-zag è un motivo a Z ripetuto più volte sulla stessa pagina. Gli zig-zag creano un ritmo che mantiene i visitatori interessati. Fonte immagine: Evernote

L'elemento principale di questo layout è una grande foto che viene utilizzata come sfondo per la pagina. Viene utilizzato per presentare ai visitatori i contenuti del sito. Questo layout ha l'opportunità di creare una prima impressione forte e incoraggia l'interazione dell'utente.

Quando usarlo

Questo layout è eccezionale quando vuoi dire di meno e mostrare di più.

Fonte immagine: Alla ricerca della Siria

Suggerimenti per la progettazione.

  • Scegli un'immagine di sfondo con attenzione. Poiché il layout si basa su una singola immagine, è essenziale selezionare quella giusta. Un'immagine irrilevante può facilmente confondere i visitatori.
  • Usa video anziché immagini per coinvolgere i visitatori. Potrebbe valere la pena utilizzare un video anziché una foto, soprattutto quando è necessario dimostrare qualcosa in azione.
Il video ti offre una migliore opportunità di coinvolgere i tuoi visitatori su un'immagine statica. Fonte immagine: Tesla
  • Non lasciare che il design riduca la leggibilità. Il testo che usi come overlay sull'immagine dovrebbe essere abbastanza contrastato da essere leggibile. Se il testo non è abbastanza contrastato, considera l'aggiunta di un overlay all'immagine.
Fonte immagine: Google Wallet

Quando si progetta un sito, è importante ricordare che il contenuto è sempre re. Lo scopo principale del sito Web rimane la pubblicazione di contenuti facilmente digeribili. Tra le tante varianti di contenuto, è essenziale selezionare quella che fa brillare i tuoi contenuti.

Originariamente pubblicato su theblog.adobe.com il 13 dicembre 2017.