50
Lean Prototyping - A practical guide

Lean Prototyping - A Practical Guide

Embed Size (px)

Citation preview

Page 1: Lean Prototyping - A Practical Guide

Lean Prototyping

- A practical guide

Page 2: Lean Prototyping - A Practical Guide

Rohit AgarwalI prototyped

Page 3: Lean Prototyping - A Practical Guide

You can check it @ www.framebench.com

Page 4: Lean Prototyping - A Practical Guide

Wireframe

Page 5: Lean Prototyping - A Practical Guide

PrototypeWireframe

Page 6: Lean Prototyping - A Practical Guide

PrototypeWireframe

Mockup

Page 7: Lean Prototyping - A Practical Guide

Prototype

App

Wireframe

Mockup

Page 8: Lean Prototyping - A Practical Guide

Prototype

App

Wireframe

MockupYay!!

Page 9: Lean Prototyping - A Practical Guide

WIREFRAME WIREFRAME WIREFRAME

Page 10: Lean Prototyping - A Practical Guide

FOCUS ON SPACING

UI ELEMENTS DRAWN

PLACEHOLDERS

WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIR

Page 11: Lean Prototyping - A Practical Guide

Wireframe for a Conference website

Page 12: Lean Prototyping - A Practical Guide

Wireframe for an iPhone app

Page 13: Lean Prototyping - A Practical Guide

Wireframe : Framebench Website

Page 14: Lean Prototyping - A Practical Guide

PROTOTYPE PROTOTYPE PROTOTYPE

Page 15: Lean Prototyping - A Practical Guide

A plan for how it WORKS, NOT how it looks

PROTOTYPE PROTOTYPE PROTOTYPE

Page 16: Lean Prototyping - A Practical Guide

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP

Think about MENUS and ANIMATION

Page 17: Lean Prototyping - A Practical Guide

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP

Think about use CASES and user FLOW

Page 18: Lean Prototyping - A Practical Guide

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP

Think about MOST FREQUENT actions : reduce clicks

Page 19: Lean Prototyping - A Practical Guide

PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP

Visualize all possibilities – save redesigns and headaches later

Framebench App Prototypes

Page 20: Lean Prototyping - A Practical Guide

MOCKUP MOCKUP MOCKUP

Page 21: Lean Prototyping - A Practical Guide

MOCKUP MOCKUP MOCKUP2 types

Page 22: Lean Prototyping - A Practical Guide

2 types

Low fidelity High fidelity

MOCKUP MOCKUP MOCKUP

Page 23: Lean Prototyping - A Practical Guide

HIGH FIDELITY

MOCK>

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

LOWFIDELITYMOCK

<

Page 24: Lean Prototyping - A Practical Guide

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

Page 25: Lean Prototyping - A Practical Guide

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

POP QUIZ

LOW FIDELITY?

HIGH FIDELITY?

This mockup is…

Page 26: Lean Prototyping - A Practical Guide

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

POP QUIZ

LOW FIDELITY!!

This mockup is…

Page 27: Lean Prototyping - A Practical Guide

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

Page 28: Lean Prototyping - A Practical Guide

MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP

And yes…

HIGH FIDELITY!

This mockup is…

Page 29: Lean Prototyping - A Practical Guide

YOU TOO CAN

PROTOTYPELEAN

Page 30: Lean Prototyping - A Practical Guide

1. Conceptualize it

Page 31: Lean Prototyping - A Practical Guide

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

Create multiple drawings and placements for various elements.

Page 32: Lean Prototyping - A Practical Guide

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

Page 33: Lean Prototyping - A Practical Guide

2. Wireframe it

Page 34: Lean Prototyping - A Practical Guide

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!

Page 35: Lean Prototyping - A Practical Guide

I personally love Balsamiq..

Page 36: Lean Prototyping - A Practical Guide

And Moqups.

Page 37: Lean Prototyping - A Practical Guide

Wireframe.cc is super lightweight!

Page 38: Lean Prototyping - A Practical Guide

3. Prototype it

Page 39: Lean Prototyping - A Practical Guide

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

concepts.

Lean Prototyping = Test Quickly = Fail Faster

Page 40: Lean Prototyping - A Practical Guide

1Interactive Wireframe

sThis is all about determining

flow

Page 41: Lean Prototyping - A Practical Guide

2Prototype

in the

browserToday’s UI

packs allow for you to get

started right in the browser!

Twitter Bootstrap

UI Packs

Chrome Developer tools!

Page 42: Lean Prototyping - A Practical Guide

4. Mock it

Page 43: Lean Prototyping - A Practical Guide

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.

Page 44: Lean Prototyping - A Practical Guide

Collaborate?

Page 45: Lean Prototyping - A Practical Guide

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

Page 46: Lean Prototyping - A Practical Guide

Meet

with anyone, anywhere

GIFs

Images

Prototypes

Wireframes

Mockups

Videos

PDFs

Have live discussions on your [ ]

Page 47: Lean Prototyping - A Practical Guide

Scribble over mockups. Track versions. Get them approved faster.

Use TableTop Sync

Page 48: Lean Prototyping - A Practical Guide

Your cases?

Page 49: Lean Prototyping - A Practical Guide

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