Wireframes Rulez - Santangelo

  • 232 views
Uploaded on

Slides from Mirko Santangelo talk @ codemotion roma 2014

Slides from Mirko Santangelo talk @ codemotion roma 2014

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
232
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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