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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM5 30
Che cos’è una GUI?Graphical User Interfaces: (Xerox) Apple,1984
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM6 30
Il Visual DesignLe manipolazioni ostensive del Visual Design servono per:
> creare IDENTITà
> strutturare GErArChIE
> creare DIffErENzIAzIoNE
> aiutare la MEMorAbIlITà
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM10 30
no ok
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM11 30
Massimo VignelliThe Vignelli Canon, 2009
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM12 30
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM13 30
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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)
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM16 30
Dalla carta al web
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM17 30
Dal web agli ecosistemi
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM18 30
layout Shifter[3]
Luke Wroblewski
Responsive lay out
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM19 30
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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%;}
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#CVeMM25 30
1/3 320 px960 px
33%
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
La griglia: canone, spazio, gerarchia Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale . Letizia Bollini, Milano-Bicocca
#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
?