Layout z-pattern o Diagramma di Gutenberg

Layout z-pattern è un modo di distribuire contenuti omogenei in una pagina web a schermata unica, senza scroll e divisa idealmente in quattro quadranti secondo il Diagramma o Regola di Gutenberg, che in Occidente asseconda il movimento naturale dello sguardo durante la scansione dei contenuti testuali e multimediali.

Elenco caratteristiche del layout z-pattern:

  1. i contenuti della schermata sono omogenei;
  2. i contenuti sono scritti per gli occidentali;
  3. in caso di contenuti eterogenei il Diagramma di Gutenberg non si applica;
  4. in caso di scrittura e lettura da destra verso sinistra il Diagramma di Gutenberg non si applica;
  5. la forza gravitazionale della lettura conduce lo sguardo dall’alto verso il basso e da sinistra verso destra;
  6. la schermata è divisa in 4 quadranti in successione, da sinistra verso destra e dall’alto verso il basso;
  7. il primo quadrante è in alto a sinistra ed è la zona di inizio scansione o area ottica primaria, secondo il Diagramma di Gutenberg;
  8. il secondo e il terzo quadrante rispettivamente in alto a destra e in basso a sinistra sono zone di passaggio e ricevono poca attenzione a meno che non siano messe in risalto visivamente;
  9. il secondo quadrante è detto forte per la posizione e per l’asse di orientamento della lettura;
  10. il quarto quadrante è la zona di fine scansione e la stazione di arrivo della scansione dei contenuti;
  11. gli elementi chiave sono posizionati nel primo (logo, titolo) e nel quarto quadrante (informazioni di contatto, call to action);
  12. eventuali immagini sono poste al centro;
  13. la scansione fatta dagli occhi sui contenuti della pagina web disegna una z, che fornisce il nome alla distribuzione dei contenuti nella schermata.

Il Diagramma di Gutenberg è generalmente attribuito a Edmund Arnold

Esempio di layout z-pattern

Esempio di layout z-pattern

Layout Z pattern applicato a un pop-up con un form di iscrizione

Guarda l’Infografica Guida completa allo z pattern layout

Condividi ora Layout z-pattern o Diagramma di Gutenberg

Web project manager, fondatore di Gruppo Ubiqui - Web & Project -, studia economia, matematica e statistica. Si occupa di visibilità e di reputazione online, fa il Web Contractor e il Content Manager per liberi professionisti e imprenditori. Si fa chiamare Gianle, è Social media trainer, blogger, filantropo, eco-consumatore, Phi fan. Si definisce un #TipoDigitale.