Your SlideShare is downloading. ×
0
@mirkosantangelo
Hello 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 ind...
prototype
wireframe
mockup
COST FIDELITY
L
H
L
H
sketch
Tell a Story
modulo
modulo
componenti
modulo
componenti
contenuti
Costruire un sistema,
non screenshot.
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
79BA6...
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
Wireframes Rulez - Santangelo
Wireframes Rulez - Santangelo
Wireframes Rulez - Santangelo
Wireframes Rulez - Santangelo
Wireframes Rulez - Santangelo
Wireframes Rulez - Santangelo
Wireframes Rulez - Santangelo
Wireframes Rulez - Santangelo
Wireframes Rulez - Santangelo
Wireframes Rulez - Santangelo
Upcoming SlideShare
Loading in...5
×

Wireframes Rulez - Santangelo

294

Published on

Slides from Mirko Santangelo talk @ codemotion roma 2014

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
294
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Wireframes Rulez - Santangelo"

  1. 1. @mirkosantangelo Hello World visual designer
  2. 2. photocredit by brief Design DEVELOP DEPLOY
  3. 3. …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
  4. 4. prototype wireframe mockup COST FIDELITY L H L H sketch
  5. 5. Tell a Story
  6. 6. modulo
  7. 7. modulo componenti
  8. 8. modulo componenti contenuti
  9. 9. Costruire un sistema, non screenshot.
  10. 10. 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
  11. 11. I wireframes sono degli strumenti di comunicazione.
  12. 12. DESIGNER DEVELOPERVS
  13. 13. CLICK
  14. 14. definire il flusso
  15. 15. best practices non devono essere esteticamente perfetti for wireframes
  16. 16. best practices comunicare le scelte sull’organizzazione, priorità e navigazione dei contenuti for wireframes
  17. 17. best practices impiegati nei team come documentazione per feedback e analisi for wireframes
  18. 18. how to Balsamiq Mockups Omnigraffle Sketch KeynoteIllustrator Axure
  19. 19. how to Pop AppInVision App
  20. 20. Wireframes e UX?
  21. 21. Interazioni Complesse Emotional Design Responsive Web
  22. 22. Grazie! @mirkosantangelo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×