{"id":2979,"date":"2022-04-02T19:46:19","date_gmt":"2022-04-02T19:46:19","guid":{"rendered":"http:\/\/kaceymorrow.com\/361\/?page_id=2979"},"modified":"2022-05-05T10:10:10","modified_gmt":"2022-05-05T17:10:10","slug":"lo-fi-prototype-help","status":"publish","type":"page","link":"http:\/\/kaceymorrow.com\/361\/lo-fi-prototype-help\/","title":{"rendered":"Lo-Fi Prototype"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>PDF: <a rel=\"noreferrer noopener\" aria-label=\"About Prototyping + Examples (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Prototyping.pdf\" target=\"_blank\">About Prototyping + Examples<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Student Examples<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/kyriebella.invisionapp.com\/console\/share\/ZN2GTHFS45\" target=\"_blank\">Tinder<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/ad2aa277-d169-4d94-8b7d-bc3892387f3e-f879\/\" target=\"_blank\">Bark Bunch<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/39a6d208-6acc-405c-86c4-f6cdf7c9acc5-6cf5\/?fullscreen&amp;hints=off\" target=\"_blank\">Peregrine<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/816c1054-0ce7-43a9-af1a-fbc5333562ee-d43f\/\" target=\"_blank\">Medium<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/proto\/OxQ8D1vcz0timeZnaEsFEt\/Spotify?node-id=11%3A1&amp;scaling=scale-down&amp;page-id=0%3A1&amp;starting-point-node-id=11%3A1\" target=\"_blank\">Spotify<\/a>&nbsp;(uses Figma)<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/proto\/CZYnAVMH7b4ejotYrhSjWm\/eBay-Final-Prototype?node-id=136%3A144&amp;scaling=scale-down&amp;page-id=1%3A6&amp;starting-point-node-id=136%3A144\" target=\"_blank\">eBay&nbsp;<\/a>(this one is more a hi-fi example, but uses Figma)<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/proto\/zfdJFQbc0g1nDBE8pddM9r\/Turboro-prototype?node-id=1%3A2&amp;scaling=scale-down&amp;page-id=0%3A1\" target=\"_blank\">Turboro<\/a> (this one is Figma, but a bit hi-fi with fancy animation, you are not required to do animations.)<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to create a clickable prototype<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Keep it simple:<\/strong>&nbsp;Remember these are LO-FI to MID-FI \u2013 which means monochromatic and very basic \u2013 NO additional design elements. Include enough information for someone to complete tasks and explore its functionality, usability, and user flow.<\/li><li><strong>What screens?<\/strong>&nbsp;Refer to your user flows that you created and identify what screens you need to create and link together in order to later test people on your redesign. If you are making a lot of changes to the app, this could end up being several screens that you will need to create in order to effectively test it out on people in the coming weeks. Try and make a&nbsp;minimum&nbsp;number of screens to test people on completing&nbsp;at least three different task variations.<ol><li>For example, if this were an e-commerce app, make one prototype that includes possible user flows that lead to buying something, creating a profile, and subscribing to a newsletter?&nbsp;<\/li><li>This is again just the minimum requirement, I encourage you to create enough screens that test out all of your new updated changes to your product.<\/li><\/ol><\/li><li><strong>What layouts?&nbsp;<\/strong>Refer to your narrowed down wireframes and use those layouts in your prototype.&nbsp;<\/li><li><strong>FYI:<\/strong>&nbsp;You will be testing people on this prototype during class on Tuesday and taking notes on what improvements to make.<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Figma Comprehensive Demo<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below is a thorough Figma Demo I created for another course that you can use as a reference. The example in this video is more hi-fidelity than what I want you to create at this stage. Make sure you keep it monochromatic and don&#8217;t add any photos or too many details yet. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the video I go over the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>How to sign up and create a new project and file.&nbsp;<\/li><li>Go over the interface and the organizational structure.&nbsp;<\/li><li>How to create &#8220;frames,&#8221; assets, styles, and components.<\/li><li>How to link screens together&nbsp;<em>(at the 29:40 mark in the timecode).<\/em><\/li><li>How to preview and share your prototype.&nbsp;<\/li><li>How to copy over UI elements from another Figma Toolkit file to save time. (see some toolkits below)<\/li><li>Also show how to make overlay and hover states, and have screens be scrollable, while keeping some elements fixed in position.&nbsp;<\/li><\/ul>\n\n\n\n<figure><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/N7QpSTyBG_Y\" width=\"560\" height=\"315\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Figma Shorter Demo<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I also created this one for another course. It is much shorter and way less detailed. Disregard my references to the Sketch prototyping software within the video &#8211; this isn&#8217;t relevant for our course.&nbsp;&nbsp;<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/jCP0bgdub68\" width=\"560\" height=\"315\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/figure>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Figma Tutorials and Resources:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/\" target=\"_blank\">Sign up for Figma Here<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/channel\/UCQsVmhSa4X-G3lHlUtejzLA\" target=\"_blank\">Figma Beginner Tutorials<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/best-practices\/\" target=\"_blank\">Figma Best Practices<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Figma Lo-Fi Wireframe Toolkits<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can download any of these lo-fi wireframe toolkits (or another one that you find) and use the UI elements if you would like to speed up the process.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>You should still make your own Figma file and then copy over the elements you want from the toolkit you choose.&nbsp;<\/li><li>Remember you are still creating your own layouts and basing decisions on your current brand, but many UI elements have been standardized and conventions are in place &#8211; so it sometimes makes sense to copy over navbars, keyboards, buttons, icons, and so forth &#8211; this can also help with appropriate sizing.&nbsp;<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to download one:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>For all of these toolkits, you need to first be logged into Figma, and then click on &#8220;Duplicate&#8221; in the top right of the toolkit webpage and it will open up a new tab in Figma.&nbsp;<\/li><li>Once inside a Figma toolkit, look at the &#8220;Pages&#8221; menu on the left side and you will find &#8220;Components&#8221; you can copy over to your Figma project if you want.&nbsp;<ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/community\/file\/887892609124245416\" target=\"_blank\">Lo-Fi Wireframe Kit&nbsp;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/community\/file\/836596421863073964\" target=\"_blank\">Mobile UI Kit<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/community\/file\/829375674987486138\" target=\"_blank\">Low-Fi Wireframe Template<\/a><\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to Turn In:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Lo-Fi (or Mid-Fi) Prototype link<\/strong>\u00a0posted to <strong>#project2 Slack Channel <\/strong>and in a Google Doc in your Google Drive. <\/li><li>This interactive prototype is clickable and navigates through all your different screens to achieve various tasks in your product redesign. <\/li><li>Use Figma or Adobe XD.<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>PDF: About Prototyping + Examples Student Examples Tinder Bark Bunch Peregrine Medium Spotify&nbsp;(uses Figma) eBay&nbsp;(this one is more a hi-fi example, but uses Figma) Turboro (this one is Figma, but a bit hi-fi with fancy animation, you are not required to do animations.) How to create a clickable prototype Keep it simple:&nbsp;Remember these are LO-FI [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2979","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/pages\/2979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/comments?post=2979"}],"version-history":[{"count":22,"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/pages\/2979\/revisions"}],"predecessor-version":[{"id":3512,"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/pages\/2979\/revisions\/3512"}],"wp:attachment":[{"href":"http:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/media?parent=2979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}