Lean Prototyping - A practical
guide

Rohit Agarwal
I prototyped

You can check it @
www.framebench.com

Wireframe

Wireframe
Prototype

Wireframe
Mockup
Prototype

Wireframe
Mockup
Prototype
App

Wireframe
Mockup
Prototype
App

WIREFRAME WIREFRA

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 PROTOT

PROTOTYPE PROTOT A plan for
how it WORKS, NOT how it looks

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 PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP

MOCKUP MOCKUP M

MOCKUP MOCKUP M
2 types

MOCKUP MOCKUP M 2 types
Low fidelity High fidelity

HIGH FIDELITY MOCK > LOW
FIDELITY MOCK < MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

POP QUIZ This mockup is…
LOW FIDELITY? HIGH FIDELITY? MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

POP QUIZ This mockup is…
LOW FIDELITY!! MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

And yes… This mockup is…
HIGH FIDELITY! MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

LEAN

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

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!

Prototype it

You have various wireframes ready,
its time to quickly create proof of concepts. Lean Prototyping = Test Quickly = Fail Faster

Interactive Wireframes This is all
about determining flow

Twitter Bootstrap Prototype in the
browser UI Packs Today’s UI packs allow for you to get started right in the browser! Chrome Developer tools!

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 GIFs Images Prototypes Have
live discussions on your [ Wireframes Mockups Videos PDFs ] with anyone, anywhere

Scribble over mockups. Track versions.
Get them approved faster. Use TableTop Sync

Your cases?

I’m fairly active on twitter:
@jumbld & extra good karma for you if you try out www.FrameBench.com and give us feedback

Share on Facebook Share on
Twitter