index.md (2292B)
1 +++ 2 title = 'Prototypes' 3 +++ 4 5 ## Prototypes 6 Prototype: representation of design before final version exists. 7 Can be low fidelity to high fidelity media. 8 9 options for prototypes: sketches, diagrams, frameworks, hand made models, graphics, virtual models, role play, video, etc. 10 11 why? 12 to evoke reactions from stakeholders (find out what to add/change), to test feasibility, choose between alternatives, etc. 13 it's faster than changing the real thing. 14 15 Waterfall model 16 * long lifecycle, step by step 17 * does not work 18 19 Iterative prototyping 20 * more like an agile method 21 * each iteration is short (2-6 weeks) 22 * do minimum necessary 23 * after every iteration you get feedback 24 * system grows incrementally 25 26 quality is a function of num of iterations & refinements before production. 27 fail early and often. 28 29 3 stages of prototyping: 30 31  32 33 ### Designing the prototype 34 choose what to prototype for, identify measurable design goals 35 36 Describe the user's journey: 37 * Who is the user? 38 * How do they discover the app/site? 39 * let's assume for our project that they were recommended our app 40 * How do they use it? 41 * How do they benefit from it? 42 43 Aim to show why the app/site will work. 44 45 Prototyping: 46 * Low fi (early stage) 47 * Use whatever works (paper and pen, photo, video, whatever) 48 * Paper prototypes: when you have many ideas, parts are unclear, basically if you're gonna throw away stuff 49 * Medium fi 50 * Don't add filler text 51 * Wireframing: idea needs more detail than on paper, colors, clients need to see major design options 52 * Mockups with wood, play doh, whatever. Just fake the design 53 * Wizard of Oz: some aspects of interface are implemented, operation needs processing that's actually done by a human for now 54 * High fi 55 * Screen mockups (illustrator, photoshop, whatever) 56 * Clickthroughs (slideshow type stuff) 57 * Web tools (like Bootstrap) 58 * Web prototypes 59 * plain HTML/CSS 60 * use when systems is intended to run on the web 61 * Small screen prototypes 62 * JS (all phones have a browser, JS has a lot of functionality) 63 * can add events, interactions, etc. 64 * you can use mobile emulators on desktop 65 * but it's hard to prototype touch gestures (JS works decently) 66