Il disegno della presentazione Lo stile e il layout degli elementi sullo schermo Semplicità, consistenza.... sapere quando rompere le regole. Il processo.

Presentazione sul tema: "Il disegno della presentazione Lo stile e il layout degli elementi sullo schermo Semplicità, consistenza.... sapere quando rompere le regole. Il processo."— Transcript della presentazione:

1

2 Il disegno della presentazione Lo stile e il layout degli elementi sullo schermo Semplicità, consistenza.... sapere quando rompere le regole. Il processo di produzione

3 AA 2004/05Sistemi multimediali Disegno 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.)

4 Layout

5 AA 2004/05Sistemi multimediali Disegno 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

6 AA 2004/05Sistemi multimediali Disegno della presentazione 5 Definire lo stile

7 AA 2004/05Sistemi multimediali Disegno della presentazione 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 linterazione

8 AA 2004/05Sistemi multimediali Disegno della presentazione 7 Bottoni e controlli La parte tangibile dellinterfaccia 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.

9 AA 2004/05Sistemi multimediali Disegno della presentazione 8 Controlli parte del design Devono raccordarsi con lo stile e la composizione della pagina Non necessariamente a se stanti o bottoniere estranee Proporzionati allimportanza della funzione

10 AA 2004/05Sistemi multimediali Disegno della presentazione 9

11 AA 2004/05Sistemi multimediali Disegno 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 AA 2004/05Sistemi multimediali Disegno della presentazione 11

13 AA 2004/05Sistemi multimediali Disegno della presentazione 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

14 AA 2004/05Sistemi multimediali Disegno della presentazione 13 Troppo colore

15 AA 2004/05Sistemi multimediali Disegno della presentazione 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

16 AA 2004/05Sistemi multimediali Disegno della presentazione 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

17 AA 2004/05Sistemi multimediali Disegno della presentazione 16 Layout di pagina web Layout inconsistente, meglio a blocchi

18 AA 2004/05Sistemi multimediali Disegno della presentazione 17 Layout di pagina web Layout disordinato che distrae, meglio la pagina a destra

19 AA 2004/05Sistemi multimediali Disegno della presentazione 18 Lo spazio della pagina

20 AA 2004/05Sistemi multimediali Disegno della presentazione 19 Il vuoto della pagina

21 AA 2004/05Sistemi multimediali Disegno della presentazione 20 Organizzare lo spazio

22 AA 2004/05Sistemi multimediali Disegno della presentazione 21

23 AA 2004/05Sistemi multimediali Disegno della presentazione 22 Griglia della pagina

24 AA 2004/05Sistemi multimediali Disegno della presentazione 23

25 AA 2004/05Sistemi multimediali Disegno della presentazione 24

26 AA 2004/05Sistemi multimediali Disegno della presentazione 25

27 AA 2004/05Sistemi multimediali Disegno della presentazione 26

28 AA 2004/05Sistemi multimediali Disegno della presentazione 27

29 AA 2004/05Sistemi multimediali Disegno della presentazione 28

30 AA 2004/05Sistemi multimediali Disegno della presentazione 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

31 AA 2004/05Sistemi multimediali Disegno della presentazione 30

32 AA 2004/05Sistemi multimediali Disegno della presentazione 31 Pagina a video

33 AA 2004/05Sistemi multimediali Disegno della presentazione 32 Dimensioni pagina

34 AA 2004/05Sistemi multimediali Disegno della presentazione 33 Emulazione della carta stampata Sindrome della piega Contenuto è invisibile

35 AA 2004/05Sistemi multimediali Disegno della presentazione 34 Scroll bars

36 AA 2004/05Sistemi multimediali Disegno della presentazione 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.

37 AA 2004/05Sistemi multimediali Disegno della presentazione 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 AA 2004/05Sistemi multimediali Disegno della presentazione 37

39 AA 2004/05Sistemi multimediali Disegno della presentazione 38

40 AA 2004/05Sistemi multimediali Disegno della presentazione 39

41 AA 2004/05Sistemi multimediali Disegno della presentazione 40

42 AA 2004/05Sistemi multimediali Disegno della presentazione 41

43 AA 2004/05Sistemi multimediali Disegno della presentazione 42 I frames Non eccedere perché spesso creano problemi. Difficile salvare le pagine e stamparle Meglio simularli con grafica

44 AA 2004/05Sistemi multimediali Disegno della presentazione 43

45 AA 2004/05Sistemi multimediali Disegno della presentazione 44

46 AA 2004/05Sistemi multimediali Disegno della presentazione 45

47 AA 2004/05Sistemi multimediali Disegno della presentazione 46

48 AA 2004/05Sistemi multimediali Disegno della presentazione 47

49 AA 2004/05Sistemi multimediali Disegno della presentazione 48

50 AA 2004/05Sistemi multimediali Disegno della presentazione 49

51 AA 2004/05Sistemi multimediali Disegno della presentazione 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 AA 2004/05Sistemi multimediali Disegno della presentazione 51

53 AA 2004/05Sistemi multimediali Disegno della presentazione 52

54 AA 2004/05Sistemi multimediali Disegno della presentazione 53

55 AA 2004/05Sistemi multimediali Disegno della presentazione 54 Sintesi Usare un criterio di complessità decrescente: sulla pagina singola sullintero sito Suddividere linformazione per schermate Evidenziare la struttura del messaggio Seguire il senso normale di lettura Linizio delle pagine principali deve: essere denso di links di navigazione e di contenuti contenere una grafica che attiri lattenzione

56 AA 2004/05Sistemi multimediali Disegno della presentazione 55 Sintesi - 2 Le pagine interne devono essere più semplici: lasciate che lutente si concentri sul contenuto Ridurre in ogni modo il carico cognitivo dellutente Evitare informazioni inutili o ridondanti

57 Unità stilistica

58 AA 2004/05Sistemi multimediali Disegno della presentazione 57

59 AA 2004/05Sistemi multimediali Disegno della presentazione 58

60 AA 2004/05Sistemi multimediali Disegno della presentazione 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

61 AA 2004/05Sistemi multimediali Disegno della presentazione 60

62 AA 2004/05Sistemi multimediali Disegno della presentazione 61

63 AA 2004/05Sistemi multimediali Disegno della presentazione 62 Header della home page di MetaDesign Header delle pagine interne

64 AA 2004/05Sistemi multimediali Disegno della presentazione 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)

65 AA 2004/05Sistemi multimediali Disegno della presentazione 64

66 AA 2004/05Sistemi multimediali Disegno della presentazione 65

67 AA 2004/05Sistemi multimediali Disegno della presentazione 66

68 AA 2004/05Sistemi multimediali Disegno della presentazione 67

69 AA 2004/05Sistemi multimediali Disegno della presentazione 68