Scaling Prototypes with Framer

Prototyping is one of the most crucial stages in the design process. How can we fix some of the inefficiencies in this siloed process and make it more scalable and more collaborative?

This talk was given at a Designers Who Code meet-up on June 7th, 2016.

Transcript

1. I’m Atif. !
2. I’m Atif. I’m a product designer. !
5. www.framerjs.com/learn
6. Wait, why do we prototype?
7. Wait, why do we prototype?
8. Test. Wait, why do we prototype?
9. Test. Learn. Wait, why do we prototype?
10. Test. Learn. Communicate. Wait, why do we prototype?
12. Design doesn’t just stop at the visuals.
13. Framer helps close the gap between designers and developer
14. +
15. + =
16. + = 1.  Design mockups in Sketch.
17. + = 1.  Design mockups in Sketch. 2.  Export artboards into Invision.
18. + = 1.  Design mockups in Sketch. 2.  Export artboards into Invision. 3.  Build out prototype in Invision.
19. + = 1.  Design mockups in Sketch. 2.  Export artboards into Invision. 3.  Build out prototype in Invision.
20. Number of designers: 2 Feature Roadmap Prototypes
21. Number of designers: 6 Feature Roadmap Prototypes
22. Number of designers: 10 Feature Roadmap Prototypes
23. Number of designers: 20 Feature Roadmap Prototypes
24. How do we fix?
25. Copyright © 2015 Home Box Office
28. Master Prototype
29. Single prototype that contains all the functionality of your final product.
30. Doesn’t only focus on microinteractions but fully fleshed out features and interactions. Single prototype that contains all the functionality of your final product.
31. Feature 1 Branch Master Branch Feature 2 Branch
32. Master Branch Prototyped Feature 1 Master Prototype Prototyped Feature 2 Feature 1 Branch Feature 2 Branch
33. Prototype State (Design) Application State (Development) 1 2 3 4 1 2 3 4 Iteration Cycles
34. – Koen Bok, maker of Framer “What we consider design today is prototyping tomorrow.”
35. Stripe Speaker Series, Designing with Framer by Koen Bok Paper Sketch/Photoshop Framer Code Execu6on Concept Fidelity
36. Thanks! % @atifazm Thoughts? Feedback? Feel free to reach out: