Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
2
Maggio 2000Presentazione1 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
Maggio 2000Presentazione2 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
Maggio 2000Presentazione3 Layout
5
Maggio 2000Presentazione4 Layout Aspetti funzionali Aspetti visuali Determina quanto le pagine siano buone esteticamente ma anche quanto facili siano da capirsi ed usarsi.
6
Maggio 2000Presentazione5
7
Maggio 2000Presentazione6 Oggetti del layout Gli oggetti del layout hanno scopi diversi oltre che far parte di un arrangiamneto visivo: Oggetti strutturali Finestre, bordi e delimitatori Oggetti informativi Parole, immagini che trasmettono contentuo Oggetti funzionali Bottoni, controlli per linterazione
8
Maggio 2000Presentazione7 Bottoni e controlli Ogni parte del video o regione di una immagine può essere un controllo, che non deve necessariamente essere un bottone. Ma deve rivelarsi immediatamente. 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
9
Maggio 2000Presentazione8 Controlli integrati nel design Devono raccordarsi con lo stile e la composiziopne della pagina Non devono essere necessariamente a se stanti o bottoniere estranee Proporzionato allimportanza della funzione
10
Maggio 2000Presentazione9
11
Maggio 2000Presentazione10 Icone Immediatamente riconoscibile Il significato ovvio ad unos guardo. Internazionale Mantenere il significato anche tra culture diverse. Scalabile Funzionare anche in scala diversa Semplice Figura piena e solida meglio di una immagine
12
Maggio 2000Presentazione11 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
13
Maggio 2000Presentazione12 Saper rompere le regole Il posizionamento consistente è importante se deve apparire su pagine diverse. 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 disntiguere dalla posizione relativa
14
Maggio 2000Presentazione13 Layout di pagina web Layout inconsistente, meglio a blocchi
15
Maggio 2000Presentazione14 Layout di pagina web Layout disordinato che distrae, meglio a destra
16
Maggio 2000Presentazione15 Griglia della pagina
17
Maggio 2000Presentazione16
18
Maggio 2000Presentazione17
19
Maggio 2000Presentazione18
20
Maggio 2000Presentazione19
21
Maggio 2000Presentazione20
22
Maggio 2000Presentazione21
23
Maggio 2000Presentazione22 Pagina a video
24
Maggio 2000Presentazione23 Dimensioni pagina
25
Maggio 2000Presentazione24 Emulazione della carta stampata Sindrome della piega Contenuto è invisibile
26
Maggio 2000Presentazione25 Scroll bars
27
Maggio 2000Presentazione26 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.
28
Maggio 2000Presentazione27 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.
29
Maggio 2000Presentazione28
30
Maggio 2000Presentazione29
31
Maggio 2000Presentazione30
32
Maggio 2000Presentazione31
33
Maggio 2000Presentazione32
34
Maggio 2000Presentazione33 I frames Non eccedere perchè spesso creano problemi. Difficile salvare le pagine e stamparle Meglio simularli con grafica
35
Maggio 2000Presentazione34
36
Maggio 2000Presentazione35
37
Maggio 2000Presentazione36
38
Maggio 2000Presentazione37 Complessità nel sito Le pagine alte nella gerarchia devono contenere le maggiori funzionalità e la maggiore complessità.
39
Maggio 2000Presentazione38
40
Maggio 2000Presentazione39
41
Maggio 2000Presentazione40
42
Maggio 2000Presentazione41
43
Maggio 2000Presentazione42 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.
44
Maggio 2000Presentazione43
45
Maggio 2000Presentazione44
46
Maggio 2000Presentazione45
47
Maggio 2000Presentazione46 Sintesi Usare un criterio di complessità decrescente: sulla pagina singola sullintero sito Suddividere linformazione per schermate. Linizio delle pagine principali deve: essere denso di links di navigazione e di contenuti contenere una grafica che attiri lattenzione Le pagine interne devono essere più semplici: lasciate che lutente si concentri sul contenuto
48
Maggio 2000Presentazione47 Esempio Griglia della pagina con cui sono stati costruiti le pagine: 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
49
Maggio 2000Presentazione48 Colori e palette
50
Maggio 2000Presentazione49 I colori sul web Monitor possono rappresentare un numero variabile di colori Browser hanno risorse interne per rendere i colori che dipendono dal sistema operativo HTML i colori che non fanno parte della grafica stretta (colori di sfondo, del testo) devono essere identificati nei tag di HTML Dipendono da diversi fattori:
51
Maggio 2000Presentazione50 Palette di colori per i browser I browser hanno diverse palette di colori e diverse per Mac o PC. Lintersezione riduce i colori a 216 per essere sicuri di poter trasportare tra piattaforme. http://www.lynda.com/hex.html
52
Maggio 2000Presentazione51 Web palette o color cube Potete inserila in Photoshop (per sfondi e icone non per le immagini) Spiegato sul sito http://www.killersites.com/1-design/index.html http://www.killersites.com/1-design/index.html
53
Maggio 2000Presentazione52
54
Maggio 2000Presentazione53
55
Maggio 2000Presentazione54 Profondità del colore Color photo Risoluzione: 75 ppi 17 K Millions of colors 75 ppi 52 K Sharp millions of colors 75 ppi 52 K
56
Maggio 2000Presentazione55 Dithering Originale A B C Originale in milioni di colori (30K) A: rimappata con la palette Web a 216 colori (10K) B: come A con lalgoritmo di dithering (10K) C: rimappata con la palette adattiva (10K)
57
Maggio 2000Presentazione56 Anti-aliasing Notare che le linee orizzontali e verticali non hanno bisogno di anti-alias, solo quelle oblique. senza con
58
Maggio 2000Presentazione57 Unità stilistica
59
Maggio 2000Presentazione58
60
Maggio 2000Presentazione59
61
Maggio 2000Presentazione60 Obiettivo unità stilistica Unità stilistica e non uniformità Lo stile dipende da Materiale pre-esistente e dalle decisoine del disegner Il primo guida il secondo La diversità può essere una sfida ma essere interessante
62
Maggio 2000Presentazione61
63
Maggio 2000Presentazione62
64
Maggio 2000Presentazione63 Header della home page di MetaDesign Header delle pagine interne
65
Maggio 2000Presentazione64 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)
66
Maggio 2000Presentazione65
67
Maggio 2000Presentazione66
68
Maggio 2000Presentazione67
Presentazioni simili
