Download - Wireframes Rulez - Santangelo
@mirkosantangeloHello World
visual designer
photocredit by
brief
Design
DEVELOP
DEPLOY
…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
prototype
wireframemockup
COST FIDELITY
L
H
L
H
sketch
Tell a Story
modulo
modulo
componenti
modulo
componenti
contenuti
Costruire un sistema, non screenshot.
4EADE1
Blu Ceruleo
79BA63
Cinabro Chiaro
F7B134
Giallo Indiano
EA5C47
Vermiglione Chiaro
0-1-2 1 2 3 4 5
Stupore, Sorpresa
Ammirazione, Fiducia
Gioia, Serenità
Fierezza, Orgoglio
4EADE1
Blu Ceruleo
-2
-1
0
1
2
3
4
5
234E66
347699
4EADE1
63C9FF
74CEFF
84D4FF
A5E0FF
CCEDFF
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 5
-2 -1 0 1 2 3 4 5
79BA63
Cinabro Chiaro
-2 -1 0 1 2 3 4 5
F7B134
Giallo Indiano
-2 -1 0 1 2 3 4 5
EA5C47
Vermiglione Chiaro
I wireframes sono degli strumenti di comunicazione.
DESIGNER DEVELOPERVS
CLICK
definire il flusso
best practices
non devono essere esteticamente perfetti
for wireframes
best practices
comunicare le scelte sull’organizzazione, priorità e navigazione dei contenuti
for wireframes
best practices
impiegati nei team come documentazione per feedback e analisi
for wireframes
how to
Balsamiq Mockups Omnigraffle Sketch
KeynoteIllustrator Axure
how to
Pop AppInVision App
Wireframes e UX?
Interazioni Complesse
Emotional Design
Responsive Web
Grazie!
@mirkosantangelo