View
108
Download
0
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
Prototyping ’s
Why Prototype?
“We need to pivot our DESIGN.”
Mike Gardiner on the #NOPSD Movement @gardym
http://thoughtworks.github.io/p2/issue02/continuous-design/
Final Documentation
=
Final Product
5x5 Our New Favorite UX Things June 16, 2014
https://www.youtube.com/watch?v=PKUDTPbDhnA
“Throwing it over the fence”
Why Prototype?• Interacting not reading
• Responsive Design is hard to document
• Redlines (nuff said)
5x5 Our New Favorite UX Things June 16, 2014
“We should be designing our products in their
intended environments.”
An Example
In the past, a 100+ page deliverable was a badge of honor.
Credit: Justin Connaher
5x5 Our New Favorite UX Things June 16, 2014
TechcrunchRedesign articleby Brad Frost@brad_frost
http://bradfrostweb.com/blog/post/techcrunch/
5x5 Our New Favorite UX Things June 16, 2014
Our Process
Sketch
InVision
High Fidelity Prototype
UX Design Visual Design
5x5 Our New Favorite UX Things June 16, 2014
Our Process
Sketch
InVision
High Fidelity Prototype
UX Design Visual Design
5x5 Our New Favorite UX Things June 16, 2014
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
http://recordit.co/XwKZT1v0es.gif
Sketch InVision
Our Process
Sketch
InVision
High Fidelity Prototype
UX Design Visual Design
5x5 Our New Favorite UX Things June 16, 2014
Wireframes in InVision
5x5 Our New Favorite UX Things June 16, 2014
Our Process
Sketch
InVision
High Fidelity Prototype
UX Design Visual Design
5x5 Our New Favorite UX Things June 16, 2014
High Fidelity PrototypeUX + Visual Design
http://designmap.com/prototype/careteam/#/overview
5x5 Our New Favorite UX Things June 16, 2014
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
Enter AngularJSand Chad Schroeder
AngularJS came about to standardize web application structure and provide a future template for how client-side
apps should be developed.
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
Prototype Annotations
5x5 Our New Favorite UX Things June 16, 2014
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
Vive la Révolution
But, don’t hold your breathe...it may take awhile.
Recommended