Transcript Non più cella ma "residenze": addio agli ultimi dei
#CVeMM
La griglia: spazio, canone, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione digitale
Letizia Bollini, Università di Milano-Bicocca
Ux & (G)UI
Dall’UX all’UI
Elements of User Experience
[1] Jesse James Garrett #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 3 30
Cos’è una interfaccia (UI)?
L’interfaccia è la
zona di mediazione
[2] tra:
utente
compito
utensile
ovvero la sfera in sui avviene l’
accoppiamento strutturale
tra il corpo dell’utente e l’utensile. Le migliori interfacce sono
trasparenti
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 4 30
Che cos’è una GUI?
Graphical User Interfaces
: (Xerox)
Apple
,1984 #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 5 30
Il Visual Design
Le
manipolazioni ostensive
del Visual Design servono per: > creare
IDENTITà
> strutturare
GErArChIE
> creare
DIffErENzIAzIoNE
> aiutare la
MEMorAbIlITà
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 6 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 #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 7 30
Ecosistemi comunicativi
Ecosistemi comunicativi
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
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 9 30
no ok
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 10 30
Massimo Vignelli
The Vignelli Canon, 2009 #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 11 30
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 12 30
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 13 30
Lo spazio della griglia web
La griglia permette di suddividere lo
spazio fisico e cognitivo
in
aree – righe e colonne
– in cui vengono
organizzati i contenuti
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 14 30
Dalla carta al web
GrIGlIA TrADIzIoNAlE
> > formato della formato
verticale
impostazione
carta fissa
standard (UNI) (portrait)
GrIGlIA DIGITAlE
> > design
liquido
formato
orizzontale
impostazione (risoluzione+dimensione display) (landscape+piega)
variabile
(scroll)
GrIGlIA rESpoNSIVE
> formato misure
orizzontale e/o verticale relative e variabili
(landscape/portrait +piega) a seconda del device (.(r)em) #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 15 30
Dalla carta al web
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 16 30
Dal web agli ecosistemi
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 17 30
Responsive lay out
layout Shifter
Luke Wroblewski [3] #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 18 30
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 19 30
Responsive: fixed vs. relative
target / context = result (%
o
.em)
[4] 566 px /900 px = 0.628888889 62,88% 69 12 gutter 566 960 900 311 } .blog .main { float: left; width: 566px; #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca } .blog .main { float: left; width: 62,88%; 20 30
} .blog .main { float: left; width: 566px; } .blog .main { float: left; width: 62,88%;
Spazi comunicanti
Canoni: la sezione aurea
Costruzione del ettangolo aureo
> tradizionalmente la griglia editoriale è basata su un forme naturali
rapporto armonico che ordina i vari elementi
mutua to dalle teorie estetiche basate sulle
1/2 1/2 1
>
Sezione aurea
Phi: 1.618
(Luca Pacioli: De divi na proportione, 1497)
1,618 0,618 Spirale logaritmica basata su rettangoli aurei
>
Serie di fibonacci
(1202) Fib(n) = (0, 1, 1, 2, 3, 5, 8, 13, 21 …)
1
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 22 30
Canone: regola dei terzi
Suddividere lo spazio orizzontale e verticale in 3
ed
alli neare
gli elementi fondamentali della composizone
ai punti di intersezione.
punto di forza punto di forza linee forti Area aurea linee forti punto di forza punto di forza linee forti linee forti
#CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 24 30
1/3 960 px 320 px 33% #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 25 30
Canone: lo spazio negativo
Tipico 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 #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 26 30
Anatomia e ritmo
Anatomia della griglia
La griglia è composta da
colonne
– allineamento orizzontale – e
righe
– allineamento verticale – scandite nel loro ritmo da: >
allineamento :
box (DIV) >
giustezza:
padding (gutter) >
margini:
margin #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 28 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 #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 29 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 #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 30 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 #CVeMM
La griglia: canone, spazio, gerarchia
Comunicazione Visiva e Multimodale 14 . Comunicazione Digitale .
Letizia Bollini, Milano-Bicocca 31 30
?