Maggio 2000 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 produzione

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

Maggio 2000 Presentazione 3

Layout

Maggio 2000 Presentazione 4

Layout

• Aspetti funzionali

• Aspetti visuali

• Determina quanto le pagine siano buone esteticamente ma anche quanto facili siano da capirsi ed usarsi.

Maggio 2000 Presentazione 5

Maggio 2000 Presentazione 6

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 l’interazione

Maggio 2000 Presentazione 7

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

Maggio 2000 Presentazione 8

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 all’importanza della funzione

Maggio 2000 Presentazione 9

Maggio 2000 Presentazione 10

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 2000 Presentazione 11

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 2000 Presentazione 12

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 2000 Presentazione 13

Layout di pagina web

Layout inconsistente, meglio a blocchi

Maggio 2000 Presentazione 14

Layout di pagina web

Layout disordinato che distrae, meglio a destra

Maggio 2000 Presentazione 15

Griglia della pagina

Maggio 2000 Presentazione 16

Maggio 2000 Presentazione 17

Maggio 2000 Presentazione 18

Maggio 2000 Presentazione 19

Maggio 2000 Presentazione 20

Maggio 2000 Presentazione 21

Maggio 2000 Presentazione 22

Pagina a video

Maggio 2000 Presentazione 23

Dimensioni pagina

Maggio 2000 Presentazione 24

Emulazione della carta stampata

• Sindrome della piega • Contenuto è invisibile

Maggio 2000 Presentazione 25

Scroll bars

Maggio 2000 Presentazione 26

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 2000 Presentazione 27

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 2000 Presentazione 28

Maggio 2000 Presentazione 29

Maggio 2000 Presentazione 30

Maggio 2000 Presentazione 31

Maggio 2000 Presentazione 32

Maggio 2000 Presentazione 33

I frames

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

• Meglio simularli con grafica

Maggio 2000 Presentazione 34

Maggio 2000 Presentazione 35

Maggio 2000 Presentazione 36

Maggio 2000 Presentazione 37

Complessità nel sito• Le pagine alte nella gerarchia devono

contenere le maggiori funzionalità e la maggiore complessità.

Maggio 2000 Presentazione 38

Maggio 2000 Presentazione 39

Maggio 2000 Presentazione 40

Maggio 2000 Presentazione 41

Maggio 2000 Presentazione 42

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 2000 Presentazione 43

Maggio 2000 Presentazione 44

Maggio 2000 Presentazione 45

Maggio 2000 Presentazione 46

Sintesi

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

• Suddividere l’informazione per schermate.• L’inizio delle pagine principali deve:

• essere denso di links di navigazione e di contenuti• contenere una grafica che attiri l’attenzione

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

Maggio 2000 Presentazione 47

EsempioGriglia 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

Maggio 2000 Presentazione 48

Colori e palette

Maggio 2000 Presentazione 49

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 2000 Presentazione 50

Palette di colori per i browser

• I browser hanno diverse palette di colori e diverse per Mac o PC.

• L’intersezione riduce i colori a 216 per essere sicuri di poter trasportare tra piattaforme.

• http://www.lynda.com/hex.html

Maggio 2000 Presentazione 51

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

Maggio 2000 Presentazione 52

Maggio 2000 Presentazione 53

Maggio 2000 Presentazione 54

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 2000 Presentazione 55

DitheringOriginale A B C

Originale in milioni di colori (30K)

A: rimappata con la palette Web a 216 colori (10K)

B: come A con l’algoritmo di dithering (10K)

C: rimappata con la palette adattiva (10K)

Maggio 2000 Presentazione 56

Anti-aliasing

• Notare che le linee orizzontali e verticali non hanno bisogno di anti-alias, solo quelle oblique.

senza

con

Maggio 2000 Presentazione 57

Unità stilistica

Maggio 2000 Presentazione 58

Maggio 2000 Presentazione 59

Maggio 2000 Presentazione 60

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 2000 Presentazione 61

Maggio 2000 Presentazione 62

Maggio 2000 Presentazione 63

Header della home page di MetaDesign

Header delle pagine interne

Maggio 2000 Presentazione 64

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 2000 Presentazione 65

Maggio 2000 Presentazione 66

Maggio 2000 Presentazione 67