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

6.
= My Problems.

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.
sound familiaR? 😏

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?

24.
ALso, Did you know
What happened last year?!

25.
Now we have so many
tools for
prototyping!

26.
…But if you need to
choose one…

27.
I recommend Framer
(previously Framer Studio)

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.
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.
YouR (=A Framer User) code
doesn’t have to be perfect.

31.
They are for communication!

32.
Demos! (x4)
Part 3

33.
#1. rhythm game

34.
Proof of concept

35.
….what iF…?!
Darth JInju
Client

36.
Star wars version
SW Emoji ©Disney

37.
It’s easy to change assets As you
work on the project

38.
Make something fun
& Add an interesting theme

39.
#2. Login simulation

40.
You can incorporate many
interactive elements

41.
…and recycle 1 prototype for
100+ projects…

42.
#3. Multiple States

43.
Initial -> Call to action
-> Loading -> Confirmation

44.
handover document?
= Sorted

45.
#4. Fake app

46.
Good for user testing!

47.
+you can constantly update
the layout of screen
based on feedback!

48.
What's changed?
Summary

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.
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.
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.
Should we use Prototype for
every projects?

53.
hell yes!

54.
Thank You
& Let’s keep in touch!
@arle13