Guida completa allo z pattern layout

Guida completa allo z pattern layout

Z pattern layout Infografica è una guida completa veloce al corretto utilizzo di questo tipo di design della comunicazione online

Inserisci questa infografica nel tuo sito

Licenza Creative Commons
Quest’opera è distribuita con Licenza Creative Commons Attribuzione 4.0 Internazionale.

Quest’opera è stata rilasciata con licenza Creative Commons Attribuzione 4.0 Internazionale. Per leggere una copia della licenza visita il sito web http://creativecommons.org/licenses/by/4.0/ o spedisci una lettera a Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.

 

 

Trascrizione della Guida completa allo z pattern layout

Gruppo Ubiqui presenta

Guida completa layout z-pattern per pagine web

Il layout z pattern di una pagina web asseconda il percorso a forma di z della lettura di una schermata unica idealmente divisa in 4 quadranti secondo il Diagramma di Gutenberg.

1. Zona di inizio scansione – quadrante in alto a sinistra

La zona 1 è la zona ottica primaria cioè quella dalla quale l’occhio naturalmente comincia la scansione di contenuti omogenei in una schermata e la lettura del testo nel mondo occidentale.

2. Zona consistente di passaggio – quadrante in alto a destra

La zona 2 è la zona forte di accompagnamento alla scansione oculare sullo schermo perché l’occhio vi rimane per qualche istante prima di tornare a scansionare la parte sinistra dello schermo

3. Zona irrilevante di passaggio – quadrante in basso a sinistra

La zona 3 è la zona debole di accompagnamento della scansione oculare verso l’ultimo quadrante che esercita una forza magnetica a causa della lettura da sinistra verso destra del mondo occidentale

4. Zona di fine scansione – quadrante in basso a destra

La zona 4 è la stazione di arrivo della scansione oculare a causa della forza gravitazionale di lettura che conduce gli occhi dall’alto verso il basso e da sinistra verso destra secondo il Diagramma di Gutenberg per schermate a contenuto omogeneo

Applicazioni del layout z pattern

Il layout z pattern, noto come Diagramma o Regola di Gutenberg, è usato per landing page, pop up e pagine web a schermata unica senza scroll dove gli elementi chiave sono posizionati nel primo (logo e titolo) e nel quarto quadrante (call to action) e le immagini sono solitamente poste al centro

Z pattern e Responsive design

Se la costruzione a blocchi di una pagina web rispetta il responsive design per dispositivi mobili, allora la sequenzialità dei 4 quadranti rimane anche nella visualizzazione da smartphone e da tablet limitatamente all’asse di orientamento della lettura dall’alto verso il basso

Risorse

Universal Principles of Design

Images in CC

Flickr, Flickr, FlickrWikipediaGeograph

Il Diagramma di Gutenberg nel Web design