Building Prototypes in Code to Iterate Faster

Open Source Bridge 2016

Transcript

1. Building Prototypes in Code to Iterate Faster Caterina Paun @caterinasworld
2. Caterina Paun Developer + Designer @caterinasworld www.caterinasworld.com
3. A Brief History of Time
4. Wireframes vs. Mockups vs. Prototypes
5. A wireframe is a visual representation of the content of a page or app. It is a visualization tool and process for presenting proposed functionality, structure, and content of a web page, website, or application.
8. A mockup consists of one or several static pictures that resemble the future UI of the application in as many aspects as possible.
9. Photoshop
10. Photoshop
11. Sketch
12. A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.
14. Keynote
15. Xcode
16. Paper + Pop
17. Case Study: Twitter
18. Wireframe = Representation Mockup = Shape/Size/Colors Prototype = Function
19. Prototype Fidelity
20. Paper Prototypes
21. Low Fidelity Medium Fidelity High Fidelity
22. The Tools
23. Lo to Medium Fidelity Balsamiq http:// balsamiq.com/ Flinto https:// www.flinto.com/ Proto IO http://proto.io/ Moqups https:// moqups.com/ Pop. (iPhone/Android App) Mockups.me http:// www.mockups.me/ App Cooker http:// www.appcooker.com/ Fluid UI https:// www.fluidui.com/ UX Pin http://uxpin.com/
24. Medium to High Fidelity Axure http://axure.com OmniGraffle http://www.omnigroup.com/omnigraffle/ InVision http://www.invisionapp.com/ Justinmind http://www.justinmind.com/ ProtoShare http://www.protoshare.com/ Pixate http://www.pixate.com/
25. High to Very High Fidelity Sketch http://www.sketchapp.com Photoshop, Illustrator + Invision Keynote, PowerPoint FramerJS http://framerjs.com Bootstrap, Foundation
26. Why Prototype?
27. “Want to increase innovation? Lower the cost of failure.” -Joi Ito
28. Ideas are cheap.
29. Development is expensive.
30. The Customer
31. –Jony Ive “There are 9 rejected ideas for every idea that works.”
33. –Frank Lloyd Wright “You can use an eraser on the drafting table or a sledge hammer on the construction site.”
34. Process
35. Research Design Test
36. MVP
37. $$$$ $ $ $ $$ $$$
38. $ $$ $$ $$$ $$$$ $$$$ $ $ $ $$ $$$ $$$
39. Why Prototype in Code?
41. My Process Pen + Paper Lo-Fi Wireframe - Balsamiq Hi-Fi Mockup - Photoshop, Sketch Hi-Fi Prototype - Bootstrap, FramerJS
42. Wireframes Mockups Prototypes +
43. Bootstrap and Foundation
44. Robust Front-end Frameworks - UI components - Styled typography - JavaScript plugins
48. Responsive
50. Tech Company vs. Agency or Development Shop
51. Style Guides are a must.
54. Git/GitHub
55. No more FINAL_FINAL_10_ACTUALFINAL.psd Multiple people can contribute to a single prototype
56. –L. Peter Deutsch “To iterate is human, to recurse divine.”
57. Design vs. Development
58. Designer Developer 100% 100% Past
59. Designer Developer 15% 85% 85% 15% Present
60. Designer Developer 15% 85% 85% 15% Prototyper 50% 50% Future
61. Designer Developer 15% 85% 85% 15% Prototyper 50% 50% 100% 100% A More Realistic Future
62. No, designers don’t need to learn to code.
63. But your team can probably build better products.
64. And prototyping in code will help your team build better products.
65. More Reading How to Decide What Ideas to Prototype: http://www.fastcodesign.com/1672929/ how-to-decide-what-ideas-to-prototype Helpful Rapid Prototyping Methods and Tools: http://chiefdisruptionofficer.com/helpful-rapid-prototyping- methods-and-tools-to-bring-digital-ideas-to-life-fast/ A Lean UX Design Process: http://www.anniestudio.org/a-lean-ux-design-process/
66. More Reading… Books
67. Questions?
68. Thank you! Caterina Paun @caterinasworld