lean prototyping - a practical guide
DESCRIPTION
given on 10 Nov, 2013 @ New Delhi, India.TRANSCRIPT
![Page 1: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/1.jpg)
Lean Prototyping
- A practical guide
![Page 4: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/4.jpg)
Wireframe
![Page 5: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/5.jpg)
PrototypeWireframe
![Page 6: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/6.jpg)
PrototypeWireframe
Mockup
![Page 7: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/7.jpg)
Prototype
App
Wireframe
Mockup
![Page 8: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/8.jpg)
Prototype
App
Wireframe
MockupYay!!
![Page 9: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/9.jpg)
WIREFRAME WIREFRAME WIREFRAME
![Page 10: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/10.jpg)
FOCUS ON SPACING
UI ELEMENTS DRAWN
PLACEHOLDERS
WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIREFRAME WIR
![Page 11: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/11.jpg)
Wireframe for a Conference website
![Page 12: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/12.jpg)
Wireframe for an iPhone app
![Page 13: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/13.jpg)
Wireframe : Framebench Website
![Page 14: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/14.jpg)
PROTOTYPE PROTOTYPE PROTOTYPE
![Page 15: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/15.jpg)
A plan for how it WORKS, NOT how it looks
PROTOTYPE PROTOTYPE PROTOTYPE
![Page 16: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/16.jpg)
PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
Think about MENUS and ANIMATION
![Page 17: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/17.jpg)
PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
Think about use CASES and user FLOW
![Page 18: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/18.jpg)
PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYP
Think about MOST FREQUENT actions : reduce clicks
![Page 19: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/20.jpg)
MOCKUP MOCKUP MOCKUP
![Page 21: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/21.jpg)
MOCKUP MOCKUP MOCKUP2 types
![Page 22: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/22.jpg)
2 types
Low fidelity High fidelity
MOCKUP MOCKUP MOCKUP
![Page 23: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/23.jpg)
HIGH FIDELITY
MOCK>
MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
LOWFIDELITYMOCK
<
![Page 24: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/24.jpg)
MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
![Page 25: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/25.jpg)
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](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/26.jpg)
MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
POP QUIZ
LOW FIDELITY!!
This mockup is…
![Page 27: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/27.jpg)
MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
![Page 28: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/28.jpg)
MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP MOCKUP
And yes…
HIGH FIDELITY!
This mockup is…
![Page 29: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/29.jpg)
YOU TOO CAN
PROTOTYPELEAN
![Page 30: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/30.jpg)
1. Conceptualize it
![Page 31: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/31.jpg)
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](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/32.jpg)
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](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/33.jpg)
2. Wireframe it
![Page 34: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/34.jpg)
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](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/35.jpg)
I personally love Balsamiq..
![Page 36: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/36.jpg)
And Moqups.
![Page 37: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/37.jpg)
Wireframe.cc is super lightweight!
![Page 38: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/38.jpg)
3. Prototype it
![Page 39: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/39.jpg)
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](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/40.jpg)
1Interactive Wireframe
sThis is all about determining
flow
![Page 41: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/41.jpg)
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](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/42.jpg)
4. Mock it
![Page 43: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/43.jpg)
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](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/44.jpg)
Collaborate?
![Page 45: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/45.jpg)
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](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/46.jpg)
Meet
with anyone, anywhere
GIFs
Images
Prototypes
Wireframes
Mockups
Videos
PDFs
Have live discussions on your [ ]
![Page 47: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/47.jpg)
Scribble over mockups. Track versions. Get them approved faster.
Use TableTop Sync
![Page 48: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/48.jpg)
Your cases?
![Page 49: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/49.jpg)
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
![Page 50: Lean Prototyping - A Practical Guide](https://reader035.vdocuments.us/reader035/viewer/2022081412/53e9a4bc8d7f7289708b4e99/html5/thumbnails/50.jpg)
Found useful?
Share on Facebook
Share on Twitter