Lean Prototyping - A Practical Guide slide 0

Lean Prototyping - A Practical Guide

  • Published on
    11-Aug-2014

  • View
    161.692

  • Download
    7

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

Recommended

View more >