Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hi, I'm Jinju.
(My Name sounds like Gin and Juice.)
I’m A Designer @ Itty Bitty Apps.
Framer for the win
What we will cover
1. Prototyping: How did it start?
2. The tool: Why Framer?
3. Demos: What can we make?
How DID it start?
Part 1
= My Problems.
My problems are:
1. Getting weird feedback from client.
2. I'm constantly making mistakes as well.
3. Missing lots of thin...
sound familiaR? 😏
1. Failed to explain what’s important.
2. Failed to explain what’s NOT important.
Fundamental reasons
= all about communication.
…How can We solve this?!
People have different Opinions
on how a thing should
look.
And there is no answer.
People have Similar ideas
on how a thing should
Work.
However!!
So, there is an answer!
DeFINE how it looks
-> then Make it work
😥
Crappy workflow
Designer will get lots of 💩feedback.
…Because Everyone has their own ideas about 

how a thing should look.
DeFINE how it Works
-> make it look better
😎
Better workflow
You’ll notice less people worry about 

the ‘visual’ anymore.
…because they see how it works.
So you can spend the rest of your time 

to make it
⭐⭐⭐AWESOME⭐⭐⭐
= prototyping!
Choose a prototyping tool
Part 2
What is a good
prototyping Tool?
ALso, Did you know
What happened last year?!
Now we have so many
tools for
prototyping!
…But if you need to
choose one…
I recommend Framer
(previously Framer Studio)
Why is Framer awesome?
1. Using Gesture: Tap, Scroll, Pull, Drag.
2. Animation options, easy to reverse & reuse.
3. Easy t...
Some constraints though!
1. You need to know how to code (A little bit, CoffeeScript).
2. The code you write has no impact...
YouR (=A Framer User) code
doesn’t have to be perfect.
They are for communication!
Demos! (x4)
Part 3
#1. rhythm game
Proof of concept
….what iF…?!
Darth JInju
Client
Star wars version
SW Emoji ©Disney
It’s easy to change assets As you
work on the project
Make something fun
& Add an interesting theme
#2. Login simulation
You can incorporate many
interactive elements
…and recycle 1 prototype for
100+ projects…
#3. Multiple States
Initial -> Call to action 

-> Loading -> Confirmation
handover document?
= Sorted
#4. Fake app
Good for user testing!
+you can constantly update
the layout of screen
based on feedback!
What's changed?
Summary
Getting feedback became fun
1. Instead of showcasing in front of people, you
can let them play with the demo and get
valua...
Seamless implementation
1. Most of the time, Framer prototype is based
on the similar logic that developers also use.
2. C...
You will save a lot of time
1. Interactive prototype is really intuitive, there is
no room for wasting time on explaining ...
Should we use Prototype for
every projects?
hell yes!
Thank You
& Let’s keep in touch!
@arle13
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)
Upcoming SlideShare
Loading in …5
×

Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)

1,399 views

Published on

This presentation is made for Melbourne Cocoaheads, where all iOS developers in town meets up once a month.

Since there are lots of prototyping tools released recently, I thought it would be helpful to share some benefits about using Framer for helping communications around design mock-ups better.

Special thanks for my client who gave me permission to showcase the work.

Published in: Design

Framer for the win - Using Framer prototypes for your app project. (For Melbourne Cocoaheads 2016)

  1. 1. Hi, I'm Jinju. (My Name sounds like Gin and Juice.)
  2. 2. I’m A Designer @ Itty Bitty Apps.
  3. 3. Framer for the win
  4. 4. What we will cover 1. Prototyping: How did it start? 2. The tool: Why Framer? 3. Demos: What can we make?
  5. 5. How DID it start? Part 1
  6. 6. = My Problems.
  7. 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.
  8. 8. sound familiaR? 😏
  9. 9. 1. Failed to explain what’s important. 2. Failed to explain what’s NOT important. Fundamental reasons
  10. 10. = all about communication.
  11. 11. …How can We solve this?!
  12. 12. People have different Opinions on how a thing should look.
  13. 13. And there is no answer.
  14. 14. People have Similar ideas on how a thing should Work. However!!
  15. 15. So, there is an answer!
  16. 16. DeFINE how it looks -> then Make it work 😥 Crappy workflow
  17. 17. Designer will get lots of 💩feedback. …Because Everyone has their own ideas about 
 how a thing should look.
  18. 18. DeFINE how it Works -> make it look better 😎 Better workflow
  19. 19. You’ll notice less people worry about 
 the ‘visual’ anymore. …because they see how it works.
  20. 20. So you can spend the rest of your time 
 to make it ⭐⭐⭐AWESOME⭐⭐⭐
  21. 21. = prototyping!
  22. 22. Choose a prototyping tool Part 2
  23. 23. What is a good prototyping Tool?
  24. 24. ALso, Did you know What happened last year?!
  25. 25. Now we have so many tools for prototyping!
  26. 26. …But if you need to choose one…
  27. 27. I recommend Framer (previously Framer Studio)
  28. 28. 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.
  29. 29. 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.
  30. 30. YouR (=A Framer User) code doesn’t have to be perfect.
  31. 31. They are for communication!
  32. 32. Demos! (x4) Part 3
  33. 33. #1. rhythm game
  34. 34. Proof of concept
  35. 35. ….what iF…?! Darth JInju Client
  36. 36. Star wars version SW Emoji ©Disney
  37. 37. It’s easy to change assets As you work on the project
  38. 38. Make something fun & Add an interesting theme
  39. 39. #2. Login simulation
  40. 40. You can incorporate many interactive elements
  41. 41. …and recycle 1 prototype for 100+ projects…
  42. 42. #3. Multiple States
  43. 43. Initial -> Call to action 
 -> Loading -> Confirmation
  44. 44. handover document? = Sorted
  45. 45. #4. Fake app
  46. 46. Good for user testing!
  47. 47. +you can constantly update the layout of screen based on feedback!
  48. 48. What's changed? Summary
  49. 49. 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.
  50. 50. 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.
  51. 51. 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.
  52. 52. Should we use Prototype for every projects?
  53. 53. hell yes!
  54. 54. Thank You & Let’s keep in touch! @arle13

×