Lean Prototyping

- A practical guide

Rohit Agarwal

I prototyped

You can check it @ www.framebench.com

Wireframe

PrototypeWireframe

PrototypeWireframe

Mockup

Prototype

App

Wireframe

Mockup

Prototype

App

Wireframe

MockupYay!!

WIREFRAME WIREFRAME WIREFRAME

FOCUS ON SPACING

UI ELEMENTS DRAWN

PLACEHOLDERS

WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIR

Wireframe for a Conference website

Wireframe for an iPhone app

Wireframe : Framebench Website

PROTOTYPE PROTOTYPE PROTOTYPE

A plan for how it WORKS,

NOT how it looks

PROTOTYPE PROTOTYPE PROTOTYPE

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP

Think about MENUS and ANIMATION

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP

Think about use CASES and user FLOW

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP

Think about MOST FREQUENT actions : reduce clicks

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP

Visualize all possibilities – save redesigns and

headaches later

Framebench App Prototypes

MOCKUP MOCKUP MOCKUP

MOCKUP MOCKUP MOCKUP2 types

2 types

Low fidelity High fidelity

MOCKUP MOCKUP MOCKUP

HIGH FIDELITY

MOCK

>

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

LOWFIDELITYMOCK

<

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

POP QUIZ

LOW FIDELITY?

HIGH FIDELITY?

This mockup is…

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

POP QUIZ

LOW FIDELITY!!

This mockup is…

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

And yes…

HIGH FIDELITY!

This mockup is…

YOU TOO CAN

PROTOTYPELEAN

1. Conceptualize it

Categorize everything you need on your application. Post-its are great for this!

Create multiple drawings and placements for various elements.

There’s nothing better than the pen, paper and post its for this.Try out Behance’s Action sheets

http://www.creativesoutfitter.com/products/100/action-method

2. Wireframe it

Now that you have a basic idea in your mind, you’re ready to put it on a digital pad.

AND..

There are a variety of tools available today!

I personally love Balsamiq..

And Moqups.

Wireframe.cc is super lightweight!

3. Prototype it

You have various wireframes ready, its time to quickly create proof of

concepts.

Lean Prototyping = Test Quickly = Fail Faster

1

Interactive Wireframe

sThis is all about determining

flow

2

Prototype in the

browserToday’s UI

packs allow for you to get

started right in the browser!

Twitter Bootstrap

UI Packs

Chrome Developer tools!

4. Mock it

Mockups generally are medium to high fidelity prototypes made in software like

There’s nothing lean about a mock and in fact should be done once you’ve tested

everything else.

Collaborate?

Will your team and designer always be together?How can you collect feedback and test these wireframes & mockups?

Meet

with anyone, anywhere

GIFs

Images

Prototypes

Wireframes

Mockups

Videos

PDFs

Have live discussions on your[ ]

Scribble over mockups.

Track versions. Get them approved faster.

Use TableTop Sync

Your cases?

You’re awesome!Thanks

I’m fairly active on twitter: @jumbld& extra good karma for you if you try out

www.FrameBench.com and give us feedback

Found useful?

Share on Facebook

Share on Twitter