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
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.
Condividi ora Guida completa allo z pattern layout
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
Condividi ora Guida completa allo z pattern layout
Risorse
Universal Principles of Design
Images in CC
Flickr, Flickr, Flickr, Wikipedia, Geograph
Il Diagramma di Gutenberg nel Web design