Luckyday.it Mario "zHeNNiNo" Ciaffone web designer portfolio

Navigation Menu

Il “Z-Layout” nel web design

Il “Z-Layout” nel web design

Posted by on ott 17, 2012 in blog |

Il Z-Layout  è un ottimo modo per iniziare quasi ogni progetto di web design perché affronta i requisiti fondamentali per qualsiasi sito efficace:  il branding, la gerarchia, la struttura, e l’invito all’azione. Ovviamente il classico “Z-Layout” non sarà la soluzione perfetta per ogni sito web, ma è sicuramente un layout che è efficace abbastanza da giustificare l’inclusione nell’arsenale di ogni web designer.

Introduzione al Z-Layout

La premessa del Z-Layout è in realtà piuttosto semplice:  “super-imporre” la lettera Z sulla pagina. Posizionare gli elementi che si desidera il lettore veda prima lungo la parte superiore della Z. L’occhio, naturalmente, seguirà il percorso della Z, quindi l’obiettivo è quello di inserire il vostro “call to action” alla fine. Lungo tutto il percorso è possibile includere bit di informazioni che si accumulano al call-to-action. Diamo uno sguardo al diagramma:

z-layout diagramma

Notate che ho numerato i punti chiave lungo il percorso, questi rappresentano l’ordine in cui il lettore può visualizzare il contenuto della pagina. Vediamo come questo si traduce in un layout attuale:

z-layout su layout

Semplice, no? Non c’è nulla di complicato in questo layout , ma in modo rapido ed efficace l’occhio si muove dal punto 1 al punto 4 in un ordine logico , si conclude con un forte richiamo all’azione. Ci sono ancora alcune cose che possiamo fare per affinare questo layout… quindi cerchiamo di aggiungere un paio di cose per la progettazione:

  • Sfondo di separazione per focalizzare il movimento degli occhi all’interno del quadro del nostro design.
  • Un logo in stile per attirare l’attenzione dell’utente al punto # 1.
  • Un colorato pulsante “sign up” al punto # 2: questo rafforzerà il movimento degli occhi desiderato.
  • Uno slider di immagini nel centro della pagina: questo separerà la parte superiore del disegno dal basso, e faciliterà il movimento dell’occhio verso il basso.
  • Icone al punto # 3 e lungo l’asse orizzontale: questo incoraggerà “la scansione del titolo”, appena l’occhio si sposta alla chiamata all’azione.
  • Un grande “call to action” al punto # 4 – grazie alla separazione del nuovo sfondo, questa caratteristica dovrebbe risaltare di più.

z-layout affinato

Perchè funziona?

Il Z-Layout di certo non ha bisogno di essere la soluzione finale concreta per tutti i siti, ma come ho detto prima, è spesso un grande punto di partenza per qualsiasi progetto di design, perché affronta il 4 punti dei grandi principi di un design efficace:

  1. Branding
  2. Gerarchia
  3. Struttura
  4. Call to action

Funziona perché la maggior parte dei lettori occidentali la scansione di un sito nello stesso modo che avrebbero la scansione di un libro – dall’alto verso il basso, da sinistra a destra.

Esempi del Z-Layout su alcuni siti

Evernote

Codemonkey

Blueacorn

mission

Avvertenze degne di nota

E ‘importante notare che il Z-Layout  non è il solo paradigma di layout che c’è là fuori.
La Z-Layout è uno dei layout principali perché è così semplice da usare come base, ma bisogna sempre  sempre fidarts del proprio istinto quando è il momento di prendere una decisione definitiva di layout.

Articolo liberamente tradotto da…

Comments

comments

Il mio sito utilizza, come tutti, dei cookie che ci aiutano ad erogare dei servizi e a migliorare l’esperienza di navigazione. Continuando la navigazione l’utente accetta le nostre modalità d’uso dei cookie stessi. More Info | Close