DesignMap (hearts) Prototyping

260 views

Published on

A talk about a recent project where we pivoted our design process. Using Sketch, InVision and a High Fidelity Prototype as a deliverable instead traditional PDFs.

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

  • Be the first to like this

No Downloads
Views
Total views
260
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DesignMap (hearts) Prototyping

  1. 1. Prototyping’s
  2. 2. Why Prototype?
  3. 3. “We need to pivot our DESIGN.” Mike Gardiner on the #NOPSD Movement @gardym http://thoughtworks.github.io/p2/issue02/continuous-design/
  4. 4. Final Documentation = Final Product 5x5 Our New Favorite UX Things June 16, 2014
  5. 5. https://www.youtube.com/watch?v=PKUDTPbDhnA “Throwing it over the fence”
  6. 6. Why Prototype? • Interacting not reading • Responsive Design is hard to document • Redlines (nuff said) 5x5 Our New Favorite UX Things June 16, 2014
  7. 7. “We should be designing our products in their intended environments.”
  8. 8. An Example
  9. 9. In the past, a 100+ page deliverable was a badge of honor. Credit: Justin Connaher 5x5 Our New Favorite UX Things June 16, 2014
  10. 10. Techcrunch Redesign article by Brad Frost @brad_frost http://bradfrostweb.com/blog/post/techcrunch/ 5x5 Our New Favorite UX Things June 16, 2014
  11. 11. Our Process Sketch InVision High Fidelity Prototype UX Design Visual Design 5x5 Our New Favorite UX Things June 16, 2014
  12. 12. Our Process Sketch InVision High Fidelity Prototype UX Design Visual Design 5x5 Our New Favorite UX Things June 16, 2014
  13. 13. Why Sketch? • Purposely built for creating screens • Hybrid of vector and bitmap editing tools • Exporting features are a primary function • CSS output, Double Rainbow dropshadows 5x5 Our New Favorite UX Things June 16, 2014
  14. 14. http://recordit.co/XwKZT1v0es.gif Sketch InVision
  15. 15. Our Process Sketch InVision High Fidelity Prototype UX Design Visual Design 5x5 Our New Favorite UX Things June 16, 2014
  16. 16. Wireframes in InVision 5x5 Our New Favorite UX Things June 16, 2014
  17. 17. Our Process Sketch InVision High Fidelity Prototype UX Design Visual Design 5x5 Our New Favorite UX Things June 16, 2014
  18. 18. High Fidelity Prototype UX + Visual Design http://designmap.com/prototype/careteam/#/overview 5x5 Our New Favorite UX Things June 16, 2014
  19. 19. Why High Fidelity Prototypes? • Clearly shows Design Intent • Doubles as Usability Testing platform • CSS can be used on production • Can be highly dynamic 5x5 Our New Favorite UX Things June 16, 2014
  20. 20. Enter AngularJS and Chad Schroeder
  21. 21. AngularJS came about to standardize web application structure and provide a future template for how client-side apps should be developed.
  22. 22. Why Angular JS? • Made and maintained by Google • Performs as a single-page application • No “happy path” required for the prototype • Uses HTML to define the app’s user interface 5x5 Our New Favorite UX Things June 16, 2014
  23. 23. Prototype Annotations 5x5 Our New Favorite UX Things June 16, 2014
  24. 24. What are Prototype Annotations? Prototype Annotations provide context when voice over is not available. They can be used to call out broad concpets or specific features. Could be used to show a user flow or a describe features on a page per persona. 5x5 Our New Favorite UX Things June 16, 2014
  25. 25. Vive la Révolution
  26. 26. But, don’t hold your breathe... it may take awhile.

×