Slides from Mirko Santangelo talk @ codemotion roma 2014

2. @mirkosantangelo
Hello World
visual designer

3. photocredit by
brief
Design
DEVELOP
DEPLOY

4. …bozza strutturale di un sito, applicativo web o
software. I wireframe sono estremamente utili
in quanto permettono di individuare subito le
dinamiche del progetto in termini di usabilità
ed utilizzo pratico, i punti critici e quelli che
richiedono uno sviluppo più accurato
o miglioramenti….
Wikipedia

5. prototype
wireframe
mockup
COST FIDELITY
L
H
L
H
sketch

6. Tell a Story

8. modulo

10. modulo
componenti

12. modulo
componenti
contenuti

14. Costruire un sistema,
non screenshot.

16. E1
eo
63
ro
4
o
47
o
0-1-2 1 2 3 4 5
Stupore, Sorpresa
Ammirazione, Fiducia
Gioia, Serenità
Fierezza, Orgoglio
E1
eo
79BA63
Cinabro Chiaro
-2
-1
0
1
2
3
4
5
426636
649951
79BA63
70DB42
83EB46
8EF760
A5FF82
DBFFD1
F7B134
Giallo Indiano
-2
-1
0
1
2
3
4
5
664814
996E20
F7B134
FFC142
FFCA5F
FFD37B
FFE5B0
FFEDCA
EA5C47
Vermiglione Chiaro
-2
-1
0
1
2
3
4
5
66281F
993B2E
EA5C47
FF765E
FF8A76
FF9D8D
FFC3B9
FFD6CF
4EADE1
Blu Ceruleo
-2 -1 0 1 2 3 4
-2 -1 0 1 2 3 4
79BA63
Cinabro Chiaro
-2 -1 0 1 2 3 4
F7B134
Giallo Indiano
-2 -1 0 1 2 3 4
EA5C47
Vermiglione Chiaro

17. I wireframes sono degli
strumenti di comunicazione.

18. DESIGNER DEVELOPERVS

19. CLICK

21. definire il flusso

22. best practices
non devono essere
esteticamente perfetti
for wireframes

23. best practices
comunicare le scelte
sull’organizzazione,
priorità e navigazione
dei contenuti
for wireframes

24. best practices
impiegati nei team
come documentazione
per feedback e analisi
for wireframes

25. how to
Balsamiq Mockups Omnigraffle Sketch
KeynoteIllustrator Axure

26. how to
Pop AppInVision App

28. Wireframes e UX?

29. Interazioni Complesse
Emotional Design
Responsive Web

32. Grazie!
@mirkosantangelo