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 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.

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 to share without installing software.

4. Fast to build & run.

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.

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 valuable feedback.

2. Instead of expensive A/B testing, you can plan casual user testing – as many as you want.

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.

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.

Should we use Prototype for every projects?

hell yes!

Thank You & Let’s keep in touch!

@arle13