{"id":454,"date":"2020-12-31T17:04:17","date_gmt":"2020-12-31T22:04:17","guid":{"rendered":"http:\/\/www.matthewmosher.com\/studentwork\/?p=454"},"modified":"2020-12-09T17:22:49","modified_gmt":"2020-12-09T22:22:49","slug":"xd-lofi-prototypes","status":"publish","type":"post","link":"https:\/\/mosher.art\/studentwork\/university-of-central-florida\/xd-lofi-prototypes\/","title":{"rendered":"XD LoFi Prototypes"},"content":{"rendered":"<p>Objective \/ Goal: make a paper prototype of two different apps to help test which is better and explore the potential of each.<\/p>\n<p>Its time to get into the real meat of the design process &#8211; paper prototyping!\u00a0\u00a0 A paper prototype serves many purposes.\u00a0 It makes sure we have thought out all the necessary pages \/ views of an app, forces us to consider the spatial layout of elements within the page, gets us thinking about how the different pages are linked together, and lets us do &#8216;wizard of oz&#8217; testing.\u00a0 You&#8217;ll take one of your storyboards to move forward with and make two different prototypes of the app it depicts.\u00a0 Depending on your app design path and approach there may be some great variety among the prototypes, but they will all also have several things in common.<\/p>\n<ul>\n<li>Make a wireframe template first.\u00a0 Several of your pages may share a similar layout &#8211; you can draw this once and make copies of it for additional views.<\/li>\n<li>Do hand draw these prototypes.\u00a0 They are meant to be fast.\u00a0 They should be clear enough to communicate your ideas, but we are not looking for photorealism or super straight lines.<\/li>\n<li>Its up to you if you want each page to be on a separate sheet of paper, if you want a phone \/ tablet overlay that you move around between frames, or if you&#8217;ll have cut out elements that you push around on a backing template.\u00a0 What am I talking about?\u00a0 Here&#8217;s <a class=\"inline_disabled external\" href=\"https:\/\/www.youtube.com\/watch?v=Z0WAMIBOu24&amp;feature=youtu.be\" target=\"_blank\" rel=\"noreferrer noopener\">one example<span class=\"screenreader-only\">\u00a0(Links to an external site.)<\/span><\/a> of a paper prototype made for this class in the past, and <a class=\"inline_disabled external\" href=\"https:\/\/www.youtube.com\/watch?time_continue=331&amp;v=bb0stxU-njE&amp;feature=emb_logo\" target=\"_blank\" rel=\"noreferrer noopener\">here&#8217;s another<span class=\"screenreader-only\">\u00a0(Links to an external site.)<\/span><\/a>.\u00a0 Note that both prototypes are for the decision makers path (though their assignment was different), and each video shows 3 different prototypes.<\/li>\n<\/ul>\n<p>Here are some other development requirements to keep in mind:<\/p>\n<ul>\n<li>You need to make 2 different paper prototypes<\/li>\n<li>Each prototype should have at least 7 unique pages \/ views<\/li>\n<li>You&#8217;ll need some kind of global navigation &#8211; typically found a the top or bottom of the page.\u00a0 While this navigation may be visible on all pages, there are circumstances where it may not be practical on some views.<\/li>\n<li>You&#8217;ll need to make a single video walk through of both your prototype\n<ul>\n<li>This video must not exceed 3 minutes in total duration (roughly 1.5 min per prototype)<\/li>\n<li>The video should include audio narrations explaining the functionality of the app and who it is for (see second example)<\/li>\n<li>At the end of your video include a question about your work that you would like specific feedback on.\u00a0 This is your opportunity to steer your critique!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>When thinking about how to make your prototypes different, consider different aesthetics, different layouts, different navigation structures, even differences in functionality, all while remaining in the space of your one storyboard.\u00a0 At this stage, you can use thumbnail sketches to indicate images and place holder text, however the more you think about these elements now the less you&#8217;ll have to think about them later.\u00a0 As we have discussed, interaction design is an iterative process. \u00a0At this time you may feel the need to revise parts of your concept or change parts of your structural mapping. \u00a0That is fine, please do so. \u00a0However, now is not a good time to start with a completely different idea &#8211; stick to one of your three storyboards.<\/p>\n<p><iframe loading=\"lazy\" title=\"Make-App Paper Prototype (DIG2500)\" width=\"620\" height=\"349\" src=\"https:\/\/www.youtube.com\/embed\/GVWMIMf5Nbc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=jLfGCEKNi0w&#038;feature=youtu.be\">https:\/\/www.youtube.com\/watch?v=jLfGCEKNi0w&amp;feature=youtu.be<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Objective \/ Goal: make a paper prototype of two different apps to help test which is better and explore the potential of each. Its time to get into&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,6],"tags":[40,67,65,58,33],"class_list":["post-454","post","type-post","status-publish","format-standard","hentry","category-dig2500","category-university-of-central-florida","tag-4d","tag-design-process","tag-lower-level","tag-prototype","tag-undergraduate"],"_links":{"self":[{"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/posts\/454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/comments?post=454"}],"version-history":[{"count":1,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/posts\/454\/revisions"}],"predecessor-version":[{"id":455,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/posts\/454\/revisions\/455"}],"wp:attachment":[{"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/media?parent=454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/categories?post=454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mosher.art\/studentwork\/wp-json\/wp\/v2\/tags?post=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}