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

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


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


Layout


Layout

• Aspetti funzionali

• Aspetti visuali

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



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


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


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



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


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


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


Layout di pagina web

Layout inconsistente, meglio a blocchi


Layout di pagina web

Layout disordinato che distrae, meglio a destra


Griglia della pagina








Pagina a video


Dimensioni pagina


Emulazione della carta stampata

• Sindrome della piega • Contenuto è invisibile


Scroll bars


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.


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.







I frames

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

• Meglio simularli con grafica





Complessità nel sito• Le pagine alte nella gerarchia devono

contenere le maggiori funzionalità e la maggiore complessità.






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.





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


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

http://info.med.yale.edu/ysm/

http://its.med.yale.edu/computing_services.html

http://its.med.yale.edu/wdd/

http://www.ynhh.org/

http://info.med.yale.edu/intmed/cardio/acs/contents.html










Colori e palette


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:


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

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




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






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


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)


Anti-aliasing

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

senza

con


Unità stilistica




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




Header della home page di MetaDesign

Header delle pagine interne


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)




Documents

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