Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
6 likes1,903 views
Jinju, a designer at Itty Bitty Apps, discusses the challenges of prototyping and presents Framer as a solution for better communication and workflow. Framer allows for interactive design and faster feedback through prototypes, making it a more effective tool compared to traditional methods. The document highlights various demo projects that showcase the versatility and utility of Framer in creating engaging prototypes.
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
- 1. Hi, I'm Jinju. (My Name sounds like Gin and Juice.)
- 2. I’m A Designer @ Itty Bitty Apps.
- 3. Framer for the win
- 4. What we will cover 1. Prototyping: How did it start? 2. The tool: Why Framer? 3. Demos: What can we make?
- 5. How DID it start? Part 1
- 7. My problems are: 1. Getting weird feedback from client. 2. I'm constantly making mistakes as well. 3. Missing lots of things that a dev need to build the screens. 4. It takes lots of time to create a “Spec guide”. 5. Too hard to keep the "Spec guide” up to date.
- 9. 1. Failed to explain what’s important. 2. Failed to explain what’s NOT important. Fundamental reasons
- 10. = all about communication.
- 11. …How can We solve this?!
- 12. People have different Opinions on how a thing should look.
- 13. And there is no answer.
- 14. People have Similar ideas on how a thing should Work. However!!
- 15. So, there is an answer!
- 16. DeFINE how it looks -> then Make it work 😥 Crappy workflow
- 17. Designer will get lots of 💩feedback. …Because Everyone has their own ideas about how a thing should look.
- 18. DeFINE how it Works -> make it look better 😎 Better workflow
- 19. You’ll notice less people worry about the ‘visual’ anymore. …because they see how it works.
- 20. So you can spend the rest of your time to make it ⭐⭐⭐AWESOME⭐⭐⭐
- 21. = prototyping!
- 22. Choose a prototyping tool Part 2
- 23. What is a good prototyping Tool?
- 27. ALso, Did you know What happened last year?!
- 29. Now we have so many tools for prototyping!
- 30. …But if you need to choose one…
- 31. I recommend Framer (previously Framer Studio)
- 32. Why is Framer awesome? 1. Using Gesture: Tap, Scroll, Pull, Drag. 2. Animation options, easy to reverse & reuse. 3. Easy to share without installing software. 4. Fast to build & run.
- 33. Some constraints though! 1. You need to know how to code (A little bit, CoffeeScript). 2. The code you write has no impact on actual code that a developer will be writing. 3. Doesn’t come with iOS or Android native transition effects, sometimes it can be labor intensive.
- 34. YouR (=A Framer User) code doesn’t have to be perfect.
- 35. They are for communication!
- 37. #1. rhythm game
- 38. Proof of concept
- 40. Star wars version SW Emoji ©Disney
- 41. It’s easy to change assets As you work on the project
- 42. Make something fun & Add an interesting theme
- 46. You can incorporate many interactive elements
- 47. …and recycle 1 prototype for 100+ projects…
- 50. Initial -> Call to action -> Loading -> Confirmation
- 52. #4. Fake app
- 56. Good for user testing!
- 57. +you can constantly update the layout of screen based on feedback!
- 59. Getting feedback became fun 1. Instead of showcasing in front of people, you can let them play with the demo and get valuable feedback. 2. Instead of expensive A/B testing, you can plan casual user testing – as many as you want.
- 60. Seamless implementation 1. Most of the time, Framer prototype is based on the similar logic that developers also use. 2. Compare to GUI based prototyping tools, Framer tends to be more reliable as a design reference for developers.
- 61. You will save a lot of time 1. Interactive prototype is really intuitive, there is no room for wasting time on explaining same thing over and over! 2. Sometimes a good idea turns out as a failure. Better chance to test the design earlier.
- 62. Should we use Prototype for every projects?
- 63. hell yes!
- 64. Thank You & Let’s keep in touch! @arle13