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

to Design = Progettare 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

Griglie di impaginazione Draw sketches del sito Interaction design 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

La lettura esaustiva è molto rara 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

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