prototypes.html (3867B)
1 <html> 2 <head> 3 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> 4 <script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/mathjax/MathJax@2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css"> 6 <link rel="Stylesheet" type="text/css" href="style.css" /> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <script> 9 document.addEventListener('DOMContentLoaded', function() { 10 document.querySelectorAll('pre.code').forEach(function(item) { 11 hljs.highlightBlock(item) 12 }) 13 }); 14 </script> 15 <title>prototypes</title> 16 </head> 17 <body> 18 <style type="text/css"> 19 nav a { 20 text-align: left; 21 } 22 nav #name { 23 text-align: right; 24 float: right; 25 font-style: italic; 26 } 27 </style> 28 <nav> 29 <a href="index.html">Index</a> 30 <span id="name">Alex Balgavy</span> 31 </nav> 32 <hr> 33 <div class="content"> 34 35 <div id="Prototypes"><h2 id="Prototypes" class="header"><a href="#Prototypes">Prototypes</a></h2></div> 36 <p> 37 Prototype: representation of design before final version exists. 38 Can be low fidelity to high fidelity media. 39 </p> 40 41 <p> 42 options for prototypes: sketches, diagrams, frameworks, hand made models, graphics, virtual models, role play, video, etc. 43 </p> 44 45 <p> 46 why? 47 to evoke reactions from stakeholders (find out what to add/change), to test feasibility, choose between alternatives, etc. 48 it's faster than changing the real thing. 49 </p> 50 51 <p> 52 Waterfall model 53 </p> 54 <ul> 55 <li> 56 long lifecycle, step by step 57 58 <li> 59 does not work 60 61 </ul> 62 63 <p> 64 Iterative prototyping 65 </p> 66 <ul> 67 <li> 68 more like an agile method 69 70 <li> 71 each iteration is short (2-6 weeks) 72 73 <li> 74 do minimum necessary 75 76 <li> 77 after every iteration you get feedback 78 79 <li> 80 system grows incrementally 81 82 </ul> 83 84 <p> 85 quality is a function of num of iterations & refinements before production. 86 fail early and often. 87 </p> 88 89 <p> 90 3 stages of prototyping: 91 </p> 92 93 <p> 94 <img src="img/3-stages-prototyping.png" alt="3 stages of prototyping graph" /> 95 </p> 96 97 <div id="Prototypes-Designing the prototype"><h3 id="Designing the prototype" class="header"><a href="#Prototypes-Designing the prototype">Designing the prototype</a></h3></div> 98 <p> 99 choose what to prototype for, identify measurable design goals 100 </p> 101 102 <p> 103 Describe the user's journey: 104 </p> 105 <ul> 106 <li> 107 Who is the user? 108 109 <li> 110 How do they discover the app/site? 111 112 <ul> 113 <li> 114 let's assume for our project that they were recommended our app 115 116 </ul> 117 <li> 118 How do they use it? 119 120 <li> 121 How do they benefit from it? 122 123 </ul> 124 125 <p> 126 Aim to show why the app/site will work. 127 </p> 128 129 <p> 130 Prototyping: 131 </p> 132 <ul> 133 <li> 134 Low fi (early stage) 135 136 <ul> 137 <li> 138 Use whatever works (paper and pen, photo, video, whatever) 139 140 <li> 141 Paper prototypes: when you have many ideas, parts are unclear, basically if you're gonna throw away stuff 142 143 </ul> 144 <li> 145 Medium fi 146 147 <ul> 148 <li> 149 Don't add filler text 150 151 <li> 152 Wireframing: idea needs more detail than on paper, colors, clients need to see major design options 153 154 <li> 155 Mockups with wood, play doh, whatever. Just fake the design 156 157 <li> 158 Wizard of Oz: some aspects of interface are implemented, operation needs processing that's actually done by a human for now 159 160 </ul> 161 <li> 162 High fi 163 164 <ul> 165 <li> 166 Screen mockups (illustrator, photoshop, whatever) 167 168 <li> 169 Clickthroughs (slideshow type stuff) 170 171 <li> 172 Web tools (like Bootstrap) 173 174 <li> 175 Web prototypes 176 177 <ul> 178 <li> 179 plain HTML/CSS 180 181 <li> 182 use when systems is intended to run on the web 183 184 </ul> 185 <li> 186 Small screen prototypes 187 188 <ul> 189 <li> 190 JS (all phones have a browser, JS has a lot of functionality) 191 192 <li> 193 can add events, interactions, etc. 194 195 <li> 196 you can use mobile emulators on desktop 197 198 <li> 199 but it's hard to prototype touch gestures (JS works decently) 200 201 </ul> 202 </ul> 203 </ul> 204 205 </div> 206 </body> 207 </html>