Lean Prototyping - A Practical Guide

  • Published on
    11-Aug-2014

  • View
    161.698

  • Download
    10

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