La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Maggio 2000Presentazione1 Il disegno della presentazione Lo stile e il layout degli elementi sullo schermo Semplicità, consistenza.... sapere quando rompere.

Presentazioni simili


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

1

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 Information Technology Service, Medicine ITS-Med, Web design and development Yale-New Haven Hospital Acute Coronary Syndromes

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.

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

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


Scaricare ppt "Maggio 2000Presentazione1 Il disegno della presentazione Lo stile e il layout degli elementi sullo schermo Semplicità, consistenza.... sapere quando rompere."

Presentazioni simili


Annunci Google