La griglia: spazio, canone, gerarchia · Comunicazione Visiva e Multimodale 14 . ... le scelte di...

La griglia:spazio, canone, gerarchiaComunicazione Visiva e Multimodale 14 . Comunicazione digitaleLetizia Bollini, Università di Milano-Bicocca

#CVeMM

Ux & (G)UI

La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca 3 30

#CVeMM

Dall’UX all’UIElements of User Experience

[1]

Jesse James Garrett

La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca

#CVeMM4 30

Cos’è una interfaccia (UI)?L’interfaccia è la zona di mediazione[2] tra:

ovvero la sfera in sui avviene l’accoppiamento strutturaletra il corpo dell’utente e l’utensile.

Le migliori interfacce sono trasparenti

utente utensilecompito


#CVeMM5 30

Che cos’è una GUI?Graphical User Interfaces: (Xerox) Apple,1984


#CVeMM6 30

Il Visual DesignLe manipolazioni ostensive del Visual Design servono per:

> creare IDENTITà

> strutturare GErArChIE

> creare DIffErENzIAzIoNE

> aiutare la MEMorAbIlITà


#CVeMM7 30

Il Visual Design nelle GUI> ArChITETTUrA DEll’INTErfACCIA il lay-out (o story-board), la struttura editoriale, la griglia

> SISTEMI DI IDENTITà branding, tono di voce, mood espressivo dell’emittente

> look&fEEl concept dell’interfaccia (es. metafora) ed insieme degli elemen-

ti grafico visivi, le scelte di design come colore, tipogrfia, imma-gini, sistemi iconografici, sistemi visivi

> MENU, boTToNI, ACTIoN TrIGGEr elementi visivi operativi e interattivi che “scatenano” azioni

Ecosistemi comunicativi


#CVeMM9 30

La grigliaè il sistema che posiziona e dispone gli elementi – immagini, testi, titoli, paratesti, marginature – nella pagina cioè definisce l’organizzazione logico-spaziale delle informazioni garantendo il senso semiotico e narrativo:

> ordine, coerenza e differenza

> ritmo, armonia equilibrio

> Modularità e flessibilità

> riconoscibile e memorizzabile

Ecosistemi comunicativi


#CVeMM10 30

no ok


#CVeMM11 30

Massimo VignelliThe Vignelli Canon, 2009


#CVeMM12 30


#CVeMM13 30


#CVeMM14 30

La griglia permette di suddividere lo spazio fisico e cognitivo in aree – righe e colonne – in cui vengono organizzati i contenuti

Lo spazio della griglia web


#CVeMM15 30

Dalla carta al webGrIGlIA TrADIzIoNAlE> formato della carta standard (UNI)> formato verticale (portrait)> impostazione fissa

GrIGlIA DIGITAlE> design liquido (risoluzione+dimensione display)> formato orizzontale (landscape+piega)> impostazione variabile (scroll)

GrIGlIA rESpoNSIVE> formato orizzontale e/o verticale (landscape/portrait +piega)> misure relative e variabili a seconda del device (.(r)em)


#CVeMM16 30

Dalla carta al web


#CVeMM17 30

Dal web agli ecosistemi


#CVeMM18 30

layout Shifter[3]

Luke Wroblewski

Responsive lay out


#CVeMM19 30


#CVeMM20 30

.blog .main {float: left; width: 566px;}

.blog .main {float: left; width: 62,88%;}

96069 12 gutter

900566 311

Responsive: fixed vs. relativetarget / context = result (% o .em)[4]

566 px /900 px = 0.628888889 62,88%

Spazi comunicanti.blog .main {float: left; width: 566px;}

.blog .main {float: left; width: 62,88%;}


#CVeMM22 30

> tradizionalmente la griglia editoriale è basata su un rapporto armonico che ordina i vari elementi mutua-to dalle teorie estetiche basate sulle forme naturali

> Sezione aurea (Luca Pacioli: De divi-na proportione, 1497)

Phi: 1.618

> Serie di fibonacci (1202) Fib(n) = (0, 1, 1, 2, 3, 5, 8, 13, 21 …)

Canoni: la sezione aurea

Spirale logaritmica basata su rettangoli aurei

1/2 1/2

1

Costruzione del ettangolo aureo

1 0,618

1,618


#CVeMM24 30

Canone: regola dei terziSuddividere lo spazio orizzontale e verticale in 3 ed alli-neare gli elementi fondamentali della composizone ai punti di intersezione.

Area aurea

linee forti

puntodi forza

puntodi forza

puntodi forza

puntodi forza

linee forti

linee fortilinee forti


#CVeMM25 30

1/3 320 px960 px

33%


#CVeMM26 30

Canone: lo spazio negativoTipico dell’inquadratura fotografica gioca sul rapporto tra soggetto e sfondo

> looking o lead room rapporto tra posizione del soggeto e lo spazio/direzione dello sguardo/movimento

Anatomia e ritmo


#CVeMM28 30

Anatomia della grigliaLa griglia è composta da colonne – allineamento orizzontale – e righe – allineamento verticale – scandite nel loro ritmo da:

> allineamento: box (DIV)

> giustezza: padding (gutter)

> margini: margin


#CVeMM29 30

Analisi> Incontri di brief tecnico, strategico, di business/marketing, di

branding con il cliente e raccolta materiali

> Analisi delle strategie di web marketing e obiettivi di progetto

> Analisi della concorrenza o benchmarking

> Analisi del target e dell’utenza

> Analisi delle piattafome tecnologiche


#CVeMM30 30

Analisi> Incontri di brief tecnico, strategico, di business/marketing, di

branding con il cliente e raccolta materiali

> Analisi delle strategie di web marketing e obiettivi di progetto

> Analisi della concorrenza o benchmarking

> Analisi del target e dell’utenza

> Analisi delle piattafome tecnologiche


#CVeMM31 30

Per approfondire[1] Garrett, J.J. (2000). The elements of user experience. New Riders

[2] Bonsiepe, G. (1993). In G. Anceschi (a cura di) Il progetto delle interfac-ce. Milano: Domus Academy

[3] Wroblewski, L. (2012). Multi-Device Layout Patterns. http://www. lukew.com/ff/entry.asp?1514

[4] Marcotte, E. (2011). Responsive web design. A List Apart

La griglia: spazio, canone, gerarchia · Comunicazione Visiva e Multimodale 14 . ... le scelte di...

Documents

Transcript of La griglia: spazio, canone, gerarchia · Comunicazione Visiva e Multimodale 14 . ... le scelte di...