Come si traduce in italiano il verbo «to Design»?

Dreamweaver è solo uno

strumento! Ciò che conta è la

progettazione.

Cosa significa davvero “Web

Designer” ?

In italiano la parola migliore per

tradurre la professione del

designer è “progettista”

to Design = Progettare

Una buona progettazione

• Obbiettivi del sito

• User centered design

• Griglie di impaginazione

• Draw sketches del sito

• Interaction design

• Layout

• Grafica

• Xhtml + css

Da dove partire?

• Cosa ci si prefigge di fare con questo sito?

• Quale è il nostro target di navigatori?

• Come devono interagire con il nostro sito?Obbiettivi del sito

• Chi sono gli utenti del nostro sito?

• Quali sono I task e i goals che I nostri utenti dovrebbero raggiungere navigando?

• Quale è l’esperienza che i nostri utenti target hanno con questo tipo di sito?

• Di quali funzionalità gli utenti avranno bisogno ?

• Quali informazioni vorranno gli utenti navigando nel nostro sito?

• Come gli utenti penseranno che il sito funzioni?

User centered design

• Gli utenti non leggono le pagine web parola per parola, come se fosse un romanzo

• Scanning• La lettura esaustiva è molto rara

• Per questo motivo I primi due paragrafi di un post, o di una sezione testuale sono molto importanti, devono cogliere l’attenzione

• Iniziate con titolo visibili e sottotitoli riassuntivi

• Contenuti a Piramide invertita

On-line reading behaviour

Pattern di lettura online

E’ necessario stabilire a priori quali griglie di impaginazione utilizzeremo, cosi come avviene nei processi di progettazione nella grafica per la stampa

Possiamo utilizzare propozioni classiche, che danno armonia e piacevolezza nelle forme

Griglie di impaginazione

13

Griglie 960

• Perché scegliere una dimensione di 960px?

• Tutti i monitor moderni supportano ormai una risoluzione minima di 1024×768 pixel. Il numero 960 è divisibile per 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 e 480. Questo rende molto più flessibili le combinazioni relative alle dimensioni delle colonne che si possono realizzare.

Wireframe: progettare (quasi) a mano libera

Prototipazione: Balsamiq

Storyboard