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.
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. “We should be designing
our products in their
intended environments.”
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
18. High Fidelity Prototype
UX + Visual Design
http://designmap.com/prototype/careteam/#/overview
5x5 Our New Favorite UX Things June 16, 2014
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
21. AngularJS came about to standardize
web application structure and provide
a future template for how client-side
apps should be developed.
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
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