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

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.)

Maggio 2000Presentazione3 Layout

Maggio 2000Presentazione4 Layout Aspetti funzionali Aspetti visuali Determina quanto le pagine siano buone esteticamente ma anche quanto facili siano da capirsi ed usarsi.

Maggio 2000Presentazione5

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

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

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

Maggio 2000Presentazione9

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

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

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

Maggio 2000Presentazione13 Layout di pagina web Layout inconsistente, meglio a blocchi

Maggio 2000Presentazione14 Layout di pagina web Layout disordinato che distrae, meglio a destra

Maggio 2000Presentazione15 Griglia della pagina

Maggio 2000Presentazione16

Maggio 2000Presentazione17

Maggio 2000Presentazione18

Maggio 2000Presentazione19

Maggio 2000Presentazione20

Maggio 2000Presentazione21

Maggio 2000Presentazione22 Pagina a video

Maggio 2000Presentazione23 Dimensioni pagina

Maggio 2000Presentazione24 Emulazione della carta stampata Sindrome della piega Contenuto è invisibile

Maggio 2000Presentazione25 Scroll bars

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.

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.

Maggio 2000Presentazione28

Maggio 2000Presentazione29

Maggio 2000Presentazione30

Maggio 2000Presentazione31

Maggio 2000Presentazione32

Maggio 2000Presentazione33 I frames Non eccedere perchè spesso creano problemi. Difficile salvare le pagine e stamparle Meglio simularli con grafica

Maggio 2000Presentazione34

Maggio 2000Presentazione35

Maggio 2000Presentazione36

Maggio 2000Presentazione37 Complessità nel sito Le pagine alte nella gerarchia devono contenere le maggiori funzionalità e la maggiore complessità.

Maggio 2000Presentazione38

Maggio 2000Presentazione39

Maggio 2000Presentazione40

Maggio 2000Presentazione41

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.

Maggio 2000Presentazione43

Maggio 2000Presentazione44

Maggio 2000Presentazione45

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

Maggio 2000Presentazione47 Esempio Griglia della pagina con cui sono stati costruiti le pagine: Yale School of Medicine Information Technology Service, Medicine ITS-Med, Web design and development Yale-New Haven Hospital Acute Coronary Syndromes

Maggio 2000Presentazione48 Colori e palette

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:

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.

Maggio 2000Presentazione51 Web palette o color cube Potete inserila in Photoshop (per sfondi e icone non per le immagini) Spiegato sul sito

Maggio 2000Presentazione52

Maggio 2000Presentazione53

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

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)

Maggio 2000Presentazione56 Anti-aliasing Notare che le linee orizzontali e verticali non hanno bisogno di anti-alias, solo quelle oblique. senza con

Maggio 2000Presentazione57 Unità stilistica

Maggio 2000Presentazione58

Maggio 2000Presentazione59

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

Maggio 2000Presentazione61

Maggio 2000Presentazione62

Maggio 2000Presentazione63 Header della home page di MetaDesign Header delle pagine interne

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)

Maggio 2000Presentazione65

Maggio 2000Presentazione66

Maggio 2000Presentazione67