Come si traduce in italiano il verbo
«to Design»?
Dreamweaver è solo uno
strumento! Ciò che conta è la
progettazione.
Una buona progettazione
Cosa significa davvero “Web
Designer” ?
In italiano la parola migliore per
tradurre la professione del
designer è “progettista”
to Design = Progettare
Da dove partire?
• Obbiettivi del sito
• User centered design
• Griglie di impaginazione
• Draw sketches del sito
• Interaction design
• Layout
• Grafica
• Xhtml + css
Obbiettivi del sito
• Cosa ci si prefigge di fare con questo sito?
• Quale è il nostro target di navigatori?
• Come devono interagire con il nostro sito?
• Chi sono gli utenti del nostro sito?
• Quali sono I task e i goals che I nostri utenti
User centered design
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?
• 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
On-line reading behaviour
post, o di una sezione testuale sono molto
importanti, devono cogliere l’attenzione
• Iniziate con titolo visibili e sottotitoli riassuntivi
• Contenuti a Piramide invertita
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
Griglie di impaginazione
Possiamo utilizzare propozioni
classiche, che danno armonia e
piacevolezza nelle forme
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