9 migliori esempi di layout di siti Web e quando utilizzarli
Pubblicato: 2020-12-04Il ruolo svolto dai layout dei siti Web nell'impatto sulla qualità del design è chiaro per ogni designer professionista. Il modello e la struttura di un sito web sono le prime cose a cui pensiamo nelle prime fasi del nostro processo di progettazione. Dopo aver identificato gli obiettivi del nostro sito e gli elementi che dovrebbe includere, la progettazione del layout di pagina inizia efficacemente la prima fase di mettere le idee su carta.
È solo dopo aver deciso l'anatomia del tuo sito Web e come mappare i tuoi contenuti di conseguenza, che puoi quindi costruire wireframe lo-fi ed esplorare ciò che funziona meglio per ciò che stai cercando di ottenere.
È una homepage fortemente visiva che funzionerà meglio per la tua strategia di contenuto, sotto forma di un layout multimediale a schermo intero? Oppure ha più senso distribuire la gerarchia delle informazioni in un formato più uniforme, utilizzando un layout a schermo diviso per visualizzare diverse sezioni di contenuto con significato reciproco?
Questo è esattamente ciò che stiamo per esplorare, esaminando i nostri nove esempi selezionati di layout di siti Web più frequentemente utilizzati dai designer professionisti.
La valutazione di questi esempi ci aiuterà a comprendere il ruolo svolto da ciascun tipo di layout nella creazione di contenuti del sito Web che attualizzino i nostri obiettivi di progettazione. In definitiva, sapere quando e come sfruttare il layout giusto per i nostri siti ci consentirà di creare strategie di progettazione più solide e creare siti Web ancora più belli.
Sommario
- Che cos'è un layout di un sito web?
- Cosa deve includere ogni layout del sito web
- I 9 layout di siti Web più efficaci
- 1. Layout a colonna singola: l'iPad famoso in tutto il mondo
- 2. Layout a due colonne: destinare
- 3. Layout a tre scatole: KatchMe
- 4. Layout a schermo diviso: Bose
- 5. Layout asimmetrico: ventre
- 6. Barra laterale fissa: ristorante Arbor
- 7. Layout multimediale a schermo intero: Opera e balletto nazionale olandese
- 8. Layout della griglia: Malika Favre
- 9. Layout delle scatole: TSX Broadway
- Prepara, imposta, costruisci
Che cos'è un layout di un sito web?
Il layout di un sito Web è un framework che definisce la struttura di un sito Web. Il layout pone gli elementi chiave del sito Web in primo piano e al centro e fornisce agli utenti un percorso chiaro per la navigazione. Il layout del sito Web è un elemento critico che determina se il sito avrà successo o meno.
Gli obiettivi del layout di un sito Web sono migliorare il coinvolgimento degli utenti, rendere le pagine Web visivamente accattivanti e organizzare il contenuto del sito in modo che si adatti in una sequenza chiara
Cosa deve includere ogni layout del sito web
Mentre certamente vediamo la bellezza in quanti layout ci sono tra cui scegliere nel web design professionale, ci sono anche componenti essenziali che ogni tipo di layout deve includere, anche se incluso in modo non convenzionale. Come sappiamo dalla legge di Jakob, uno dei principi fondamentali nel web design, è che i layout dell'interfaccia ei flussi di navigazione dovrebbero avere un'unicità accattivante, ma bilanciata con una familiarità logica e intuitiva per gli utenti.
In sostanza, ciò che non dobbiamo mai dimenticare quando pianifichiamo il nostro layout di pagina è includere:
- L' intestazione del sito web , che dovrebbe sempre catturare gli elementi di navigazione più semplicistici che trasmettono la struttura di base del tuo sito web e come trovare ciò che stai cercando
- Il corpo della pagina, ovvero la sezione principale della tua pagina web, come il contenuto visivo, i messaggi principali e così via.
- Il menu di navigazione, che sia sotto forma di barra laterale, menu hamburger, sotto-intestazione, mega menu, con attivazione a scorrimento, menu fisso o fisso e forse altri.
- Il piè di pagina del sito Web, indipendentemente da quanto sia corto o alto, generalmente contiene collegamenti a canali social, avvisi di copyright e collegamenti all'informativa sulla privacy e altri elementi facoltativi, come un duplicato del contenuto del menu dell'intestazione, inviti all'azione, come "iscriviti", "contattaci", o anche un modulo di invio.
E ora, per l'ispirazione per il web design che stavamo aspettando, alcuni dei nostri esempi preferiti dei layout di siti Web più comunemente usati.