DesignMap (hearts) Prototyping
description
Transcript of DesignMap (hearts) Prototyping
![Page 1: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/1.jpg)
Prototyping ’s
![Page 2: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/2.jpg)
Why Prototype?
![Page 3: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/3.jpg)
“We need to pivot our DESIGN.”
Mike Gardiner on the #NOPSD Movement @gardym
http://thoughtworks.github.io/p2/issue02/continuous-design/
![Page 4: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/4.jpg)
Final Documentation
=
Final Product
5x5 Our New Favorite UX Things June 16, 2014
![Page 5: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/5.jpg)
https://www.youtube.com/watch?v=PKUDTPbDhnA
“Throwing it over the fence”
![Page 6: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/6.jpg)
Why Prototype?• Interacting not reading
• Responsive Design is hard to document
• Redlines (nuff said)
5x5 Our New Favorite UX Things June 16, 2014
![Page 7: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/7.jpg)
“We should be designing our products in their
intended environments.”
![Page 8: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/8.jpg)
An Example
![Page 9: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/9.jpg)
In the past, a 100+ page deliverable was a badge of honor.
Credit: Justin Connaher
5x5 Our New Favorite UX Things June 16, 2014
![Page 10: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/10.jpg)
TechcrunchRedesign articleby Brad Frost@brad_frost
http://bradfrostweb.com/blog/post/techcrunch/
5x5 Our New Favorite UX Things June 16, 2014
![Page 11: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/11.jpg)
Our Process
Sketch
InVision
High Fidelity Prototype
UX Design Visual Design
5x5 Our New Favorite UX Things June 16, 2014
![Page 12: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/12.jpg)
Our Process
Sketch
InVision
High Fidelity Prototype
UX Design Visual Design
5x5 Our New Favorite UX Things June 16, 2014
![Page 13: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/13.jpg)
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
![Page 14: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/14.jpg)
http://recordit.co/XwKZT1v0es.gif
Sketch InVision
![Page 15: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/15.jpg)
Our Process
Sketch
InVision
High Fidelity Prototype
UX Design Visual Design
5x5 Our New Favorite UX Things June 16, 2014
![Page 16: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/16.jpg)
Wireframes in InVision
5x5 Our New Favorite UX Things June 16, 2014
![Page 17: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/17.jpg)
Our Process
Sketch
InVision
High Fidelity Prototype
UX Design Visual Design
5x5 Our New Favorite UX Things June 16, 2014
![Page 18: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/18.jpg)
High Fidelity PrototypeUX + Visual Design
http://designmap.com/prototype/careteam/#/overview
5x5 Our New Favorite UX Things June 16, 2014
![Page 19: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/19.jpg)
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
![Page 20: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/20.jpg)
Enter AngularJSand Chad Schroeder
![Page 21: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/21.jpg)
AngularJS came about to standardize web application structure and provide a future template for how client-side
apps should be developed.
![Page 22: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/22.jpg)
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
![Page 23: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/23.jpg)
Prototype Annotations
5x5 Our New Favorite UX Things June 16, 2014
![Page 24: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/24.jpg)
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
![Page 25: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/25.jpg)
Vive la Révolution
![Page 26: DesignMap (hearts) Prototyping](https://reader034.fdocuments.in/reader034/viewer/2022051314/54c734a84a7959126e8b46a2/html5/thumbnails/26.jpg)
But, don’t hold your breathe...it may take awhile.