Il disegno della presentazione Passi critici del disegno ...homes.di.unimi.it/~alberti/Mm05/lucidi/6_presentazione.pdf · Sistemi multimediali AA 2004/05 Disegno della presentazione

Sistemi multimediali AA 2004/05

Disegno della presentazione 1

Il disegno della presentazione

• Lo stile e il layout degli elementi sullo schermo

Semplicità, consistenza.

... sapere quando rompere le regole.

Il processo di produzioneAA 2004/05 Sistemi multimediali

Disegno della presentazione2

Passi critici del disegno della presentazione

• Definire il tema visuale portante e lo stile• Creare gli elementi per ogni schermata

(background, finestre etc.)• Creare gli elementi per il controllo (bottoni,

icone, slide bar etc.)

Layout

AA 2004/05 Sistemi multimedialiDisegno della presentazione

4

Layout

• Aspetti visuali• Determina quanto le pagine siano

esteticamente piacevoli• Aspetti funzionali

• Determina anche quanto facili siano da capire e da usare


5

Definire lo stile


6

Oggetti del layout

• Gli oggetti del layout hanno scopi diversi oltre che far parte di un arrangiamento visivo:• Oggetti strutturali

• Finestre, bordi e delimitatori• Oggetti informativi

• Parole, immagini che trasmettono contenuto• Oggetti funzionali

• Bottoni, controlli per l’interazione




7

Bottoni e controlli

• La parte tangibile dell’interfaccia• Gli oggetti con cui interagiamo• Chiari e non ambigui• Una opportunità per coinvolgere• Se non si trova una immagine si usino le parole

• Ogni parte del video o regione di una immagine può essere un controllo, che non deve necessariamente essere un bottone.• Ma deve rivelarsi immediatamente.


8

Controlli parte del design

• Devono raccordarsi con lo stile e la composizione della pagina• Non necessariamente a se stanti o

bottoniere estranee• Proporzionati all’importanza della

funzione


9 AA 2004/05 Sistemi multimedialiDisegno della presentazione

10

Icone

• Immediatamente riconoscibile• Il significato ovvio ad uno sguardo.

• Internazionale• Mantenere il significato anche tra culture diverse.

• Scalabile• Funzionare anche in scala diversa

• Semplice• Figura piena e solida meglio di una immagine



12

Il colore

• Non usare troppi colori• Essere consistenti con i

colori scelti• Fig.1 ha colori coerenti e

fonti senza grazie• Fig.2 rosso su fondo blu

difficile lettura, blu incoerente con altri colori, times è troppo accurato




13

Troppo colore


14

Griglie

• La griglia è il sistema di riferimento che serve da guida per le posizioni degli elementi.

• Assicura che gli allineamenti siano accurati

• E consistenti nelle pagine multiple• Fondamentali nelle pagine tipo testo


15

Posizionamento• Il posizionamento consistente è importante se

deve apparire su pagine diverse• Anche i piccoli spostamenti sono percepiti a video

più che non sulla carta stampata• Ma una consistenza completa può produrre

eccesso di uniformità e essere monotono.• Se una pagina contiene molti controlli devono

essere sempre nella stessa posizione• Se il controllo deve essere usato di frequente

deve essere nella stessa posizione• Se ci sono controlli simili allora devono essere

nella stessa posizione perché si possano distinguere dalla posizione relativa


16

Layout di pagina web

Layout inconsistente, meglio a blocchi


17

Layout di pagina web

Layout disordinato che distrae, meglio la pagina a destra


18

Lo spazio della pagina




19

Il vuoto della pagina


20

Org

aniz

zare

lo

spaz

io



22

Griglia della pagina



24





26



28


29

Indirizzi degli esempiSiti costruiti con la griglia:• Yale School of Medicine

• http://info.med.yale.edu/ysm/• Information Technology Service, Medicine

• http://its.med.yale.edu/computing_services.html• ITS-Med, Web design and development

• http://its.med.yale.edu/wdd/• Yale-New Haven Hospital

• http://www.ynhh.org/• Acute Coronary Syndromes

• http://info.med.yale.edu/intmed/cardio/acs/contents.html


30




31

Pagina a video


32

Dimensioni pagina


33

Emulazione della carta stampata

• Sindrome della piega

• Contenuto è invisibile


34

Scroll bars


35

Pagine vs schermi

• Si parla di pagine web, ma sono schermate.

• Non si ha una visione globale del documento come nella carta stampata.

• Uno schermo non contiene quasi mai una pagina stampata.

• Il design grafico deve essere diverso.• Meno libertà di layout.


36

Pila di schermate

• Ribaltare la disposizione delle informazioni sulla pagina.

• Le informazioni più importanti e i bottoni di navigazione in alto.

• Discendendo la pagina le notizie sono più leggere e la pagina più rarefatta.





38



40



42

I frames

• Non eccedere perché spesso creano problemi.• Difficile salvare le pagine e stamparle

• Meglio simularli con grafica





44



46



48





50

Principio

• Non disturbare il lettore che ha raggiunto il materiale cercato.

• Animazioni e banners disturbano la lettura.

• I banners sono spesso una necessità, ma vanno inseriti con grazia.



52



54

Sintesi

• Usare un criterio di complessità decrescente:• sulla pagina singola• sull’intero sito

• Suddividere l’informazione per schermate• Evidenziare la struttura del messaggio• Seguire il senso normale di lettura

• L’inizio delle pagine principali deve:• essere denso di links di navigazione e di contenuti• contenere una grafica che attiri l’attenzione




55

Sintesi - 2

• Le pagine interne devono essere più semplici:• lasciate che l’utente si concentri sul contenuto

• Ridurre in ogni modo il carico cognitivo dell’utente

• Evitare informazioni inutili o ridondanti

Unità stilistica



58


59

Obiettivo unità stilistica

• Unità stilistica e non uniformità• Lo stile dipende da

• Materiale pre-esistente e dalle decisioni del disegner

• Il primo guida il secondo• La diversità può essere una sfida ma

essere interessante


60





62

Header della home page di MetaDesign

Header delle pagine interne


63

Un sistema visivo

• Una singola schermata che accomoda diversi elementi strutturali in un sistema visivo• Le immagini usate individualmente

montate nella pagina principale• Il colore della pagina principale usata come

colore chiave nelle pagine successive• Una famiglia di immagini gerarchiche (il

tutto/la parte)


64



66





68

Documents

Il disegno della presentazione Passi critici del disegno ...homes.di.unimi.it/~alberti/Mm05/lucidi/6_presentazione.pdf · Sistemi multimediali AA 2004/05 Disegno della presentazione