Un paio di cose su come ci si approccia a fare web design. Qualche concetto su come capire, riconoscere e scrivere codice senza perdere d'occhio l'usabilità.

2. Fonti
60 questioni da considerare per progettare un sito web
sixrevisions.com/web_design/60-questions-to-consider-when-designing-awebsite/
L’importanza dello spazio bianco
designer-daily.com/how-to-convince-your-clients-of-the-importance-of-whitespace-22971
Simmetria e Asimmetria nel Web
dzineblog.com/2010/12/the-secrets-of-symmetry-and-asymmetry-design.html
10 regole d’oro per avere un design pulito
speckyboy.com/2012/07/10/the-10-golden-rules-of-simple-clean-design/
User Experience
fedeweb.net/user-experience-usabilita/
I 10 principi di Dieter Ram
webdesignerdepot.com/2012/06/applying-dieter-rams-ten-principles-to-webdesign/
Miscelare varie fonts
webdesignledger.com/resources/mastering-font-combinations
Teoria dei Colori per il Web
hongkiat.com/blog/basics-behind-color-theory-for-web-designer/
Uso del colore nel Web Design
inspiredology.com/us-of-color-in-web-design/
Web Design 101
webdesign.tutsplus.com/articles/web-design-101-the-college-students-guide/
Rompere le regole
speckyboy.com/2011/09/29/breaking-the-norm-unusual-and-creative-weblayouts/
La metafora nel Web Design
webdesign.tutsplus.com/articles/design-theory/using-metaphors-in-web-design/
Lo Skeumorfismo
webdesign.tutsplus.com/articles/design-theory/skeuomorphism-in-interfacedesign/
Wireframe per UI
webdesignledger.com/inspiration/inspiring-ui-wireframe-sketches
Le regole per un gran design
tympanus.net/codrops/2012/10/15/the-unwritten-rules-of-a-great-design-critique/
La guida per il Design Web del sito della BBC
tomstardust.com/archives/bbc-css-design/
Guidare l’occhio dell’utente
inspiredology.com/guiding-user-eye-in-your-designs/
Leggi di Usabilità
Don’t make me think - Steve Krug

3. Una parte importante, enorme,
gigante, fondamentale, del web
design è basata sull’usabilità.

4. I siti web non sono piu’ delle
paginette carine da consultare,
ma delle complete esperienze
visive.

5. USABILITA’ E’ NECESSITA’

6. 1. UNIFORMITA’
2. INFLUENZA
3. ESPERIENZA
4. PERCEZIONE
Usare elementi comuni
Decidere per l’utente
Aiutare la navigazione
Restituire i feedback giusti

8. 1. Uniformità

9. Non reinventate la ruota

11. 1. Non far pensare l’utente.
2. Non giocare con la sua pazienza.
3. Testare, provare e ritestare.
4. Eliminare l’aria fritta.
5. Dare un motivo per ritornare.
6. Avere i contatti a portata di mano.
7. Caricare in meno tempo possibile.
8. Il contenuto è il Re.

12. 2. Influenza

13. Creare Ritmo
Dobbiamo focalizzare l’attenzione dell’utente su
particolari funzioni o Call-to-Action creando
delle gerarchie sfruttando la prospettiva o il
colore.

14. Geometria!
Le proporzioni, le distanze e gli spazi giocano
un ruolo fondamentale. Non bisogna avere
paura di essere troppo “schematici”

15. Tipografia
La tipografia sul web ci aiuta a
definire l’importanza di alcuni
contenuti rispetto ad altri,
stuzzicando la nostra
attenzione

19. Piccola Parentesi!
ola.
n tanto picc
o
Beh, forse n

23. *
RGH!
, aiutoo AAR
a
*Qua si pag

24. 3. Esperienza

25. Spazio Negativo
In cucina, cosi’ come sul web, la
presentazione migliore e quando la
portata ha tanto spazio nel piatto!

29. Rompere qualche regola
Non necessariamente dovete seguire tutto quello che
vi diciamo. A volte, per esigenze di una comunicazione
adeguata, non dovete ripetere per forza la solita storia
di header, footer e sidebar.

32. PROGETTI
Web
Stampa
CONTATTI
Flowcharts
Video
Form interattiva
HOME
Create la mappa mentale per
Pagina Facebook
organizzare le informazioni del
Twitter
cliente e non disperdere gli utenti.
SOCIAL NETWORK
CHI SIAMO
SERVIZI
SEO
Consulenza
GALLERY

33. 4. Percezione

34. Usa le metafore.
La simulazione di elementi reali è fondamentale
per fornire un’esperienza friendly e gradevole.

35. Tracce e sfumature
Ombra senza sfocatura

37. Coerenza.
Gli inglesi la chiamano Consistency, e infatti è
quella che darà “consistenza” al vostro design.
Un grigio diverso in ogni pagina farà crollare
l’impalcatura che andate a progettare.

44. Quindi?

46. Let’s see!
lezione.
o fine della
Ovver

47. Tutto parte da una ricerca
approfondita, un’analisi precisa di
tutte le future fasi della progettazione.

48. Magazine
Attività
Creativo
Istituzionale
Portfolio
ECommerce
Prodotto singolo

50. In pratica!
lezione.
o fine della
Ovver

51. Purtroppo (o per fortuna) il designer
che si avvicina al web deve imparare
un bel pò di codice.

52. Codice?
e?!?!
Quale codic

54. LINGUAGGIO COMPRENSIBILE

55. Possiamo creare siti web con
qualsiasi software che lo permetta.

56. HTML
CONTENUTO
CSS
STILE
JS
INTERAZIONE

57. COM’E’

58. COME LO VEDIAMO

59. HTML
i collegare
enticar ti d
Non dim
HTML!!!!
CSS al file
CSS

61. Cascade Style Sheet
I CSS sono la ragione per la quale oggi il web è cosi bello.
La sua funzione è quella di “agganciarsi” al file HTML per
definire forme, colori e posizioni dei vari elementi.

62. L’HTML ha stile
La maggior parte degli elementi HTML ha una propria pre-formattazione
(grazie al quale si progettavano i siti tanti anni fa) che dobbiamo azzerare
se vogliamo applicare un “nostro” stile attraverso i CSS.

63. L’importanza del percorso
Ogni singolo elemento, deve avere il suo giusto riferimento:
immagini, file e URL in una pagina web devono richiamare la
nomenclatura e il percorso esatto di dove risiedono fisicamente.

67. index.html
contatti.html
servizi.html
stile.css *
immagine_titolo.jpg
img
barra-laterale.gif
partner001.png
*Domanda! Quale sarà il percorso delle immagini?

68. Demo
lezione.
o fine della
Ovver

69. Una pagina web e il suo stile si
compone come una serie di
scatole cinesi.

70. LA STRUTTURA DI UNA PAGINA

73. Vi presento Tag, Classi e ID
All’interno del foglio HTML, le varie scatole andranno nominate
attraverso il sistema delle tag, delle classi e degli ID. Questi elementi
andranno stilati all’interno del foglio CSS collegato.

74. A cascata!
Ogni proprietà CSS di un elemento ricadrà sulle “scatole” che contiene
se non specifichiamo diversamente.
Ad esempio: mi basta specificare la font adatta ad una “scatola” per far si
che quella font sarà usata da tutti gli elementi inclusi.

75. Demo
lezione.
o fine della
Ovver