Il disegno della presentazione Lo stile e il layout degli elementi sullo schermo Semplicità,...

Il disegno della presentazione

• Lo stile e il layout degli elementi sullo schermo

Semplicità, consistenza.

... sapere quando rompere le regole.

Il processo di produzione

AA 2004/05 Sistemi multimedialiDisegno della presentazione

2

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


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


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


11


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


21


22

Griglia della pagina


23


24


25


26


27


28


29

Indirizzi degli esempi

Siti 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

http://info.med.yale.edu/ysm/











http://its.med.yale.edu/computing_services.html












http://its.med.yale.edu/wdd/











http://www.ynhh.org/

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.


37


38


39


40


41


42

I frames

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

• Meglio simularli con grafica


43


44


45


46


47


48


49


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.


51


52


53


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


57


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


61


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


65


66


67


68

Date post:	01-May-2015
Category:	Documents
Upload:	domenica-carnevale
View:	213 times
Download:	0 times

Il disegno della presentazione Lo stile e il layout degli elementi sullo schermo Semplicità,...

Documents