lean prototyping - a practical guide
Post on 11-Aug-2014
162.012 views
Embed Size (px)
DESCRIPTION
given on 10 Nov, 2013 @ New Delhi, India.TRANSCRIPT
- 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.
- Theres nothing better than the pen, paper and post its for this. Try out Behances Action sheets http://www.creativesoutfitter.com/products/100/action-method
- Wireframe it
- Now that you have a basic idea in your mind, youre 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 Todays 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 Theres nothing lean about a mock and in fact should be done once youve 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?
- Im 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
