{"id":3139,"date":"2022-04-14T10:30:29","date_gmt":"2022-04-14T10:30:29","guid":{"rendered":"http:\/\/kaceymorrow.com\/361\/?p=3139"},"modified":"2022-04-14T17:05:31","modified_gmt":"2022-04-14T17:05:31","slug":"apr-14-2","status":"publish","type":"post","link":"https:\/\/kaceymorrow.com\/361\/apr-14-2\/","title":{"rendered":"Apr 14"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/giphy.com\/embed\/rYB0JR1vHPmzS\" width=\"480\" height=\"360\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen><\/iframe><\/p>\n<p><a href=\"https:\/\/giphy.com\/gifs\/terminator-2-the-90s-toys-rYB0JR1vHPmzS\">via GIPHY<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">PROJECT 1:&nbsp;<a href=\"http:\/\/kaceymorrow.com\/361\/project-1\/\">Humanizing Product Design<\/a>&nbsp;(<a href=\"http:\/\/kaceymorrow.com\/361\/etsy-keep-commerce-human\/\">Etsy<\/a>) (<a href=\"http:\/\/kaceymorrow.com\/361\/alaska-airlines-creating-an-airline-people-love\/\">Alaska<\/a>)<\/h2>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Lecture:<\/strong> <strong><a href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Design-with-Emotion.pdf\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Designing for Emotion<\/a>.<\/strong> This will assist in infusing emotion and personality into your products and forming stronger connections with your users. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Exercise: <a rel=\"noreferrer noopener\" href=\"http:\/\/tarotcardsoftech.artefactgroup.com\/\" target=\"_blank\">Tarot Cards of Tech<\/a><\/strong>. This will help consider unintended consequences of your solution. <\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">UI RESOURCES<\/h3>\n\n\n\n<p class=\"has-text-color has-blue-color wp-block-paragraph\">[expand title=&#8221;Click to see UI Resources&#8221;]<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Lectures<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/GUI-Design-.pdf\" target=\"_blank\">GUI Design Basics<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/iOS-Human-Interface-Guidelines.pdf\" target=\"_blank\">iOS Human Interface Guidelines<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Icon-Design.pdf\" target=\"_blank\">Icon Design<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>UI Design<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.apple.com\/design\/tips\/\" target=\"_blank\">Summary of UI Design Do&#8217;s and Don&#8217;ts<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"A Comprehensive Guide to Mobile App Design (opens in a new tab)\" href=\"https:\/\/www.smashingmagazine.com\/2018\/02\/comprehensive-guide-to-mobile-app-design\/\" target=\"_blank\">A Comprehensive Guide to Mobile App Design<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"iOS vs Android App UI Design: The Complete Guide (opens in a new tab)\" href=\"https:\/\/learnui.design\/blog\/ios-vs-android-app-ui-design-complete-guide.html\" target=\"_blank\">iOS vs Android App UI Design: The Complete Guide<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Button UX Design: Best Practices, Types, and States (opens in a new tab)\" href=\"https:\/\/uxplanet.org\/button-ux-design-best-practices-types-and-states-647cf4ae0fc6\" target=\"_blank\">Button UX Design: Best Practices, Types, and States<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Icon Design<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/medium.com\/bpxl-craft\/10-essential-tips-for-user-interface-icons-e7d04b5988a5\" target=\"_blank\" rel=\"noreferrer noopener\">10 Essential Tips for UI Icons<\/a><\/li><li><a href=\"https:\/\/uxplanet.org\/small-elements-big-impact-types-and-functions-of-ui-icons-87c6a74d366e\" target=\"_blank\" rel=\"noreferrer noopener\">Small Elements, Big Impact<\/a><\/li><li><a href=\"https:\/\/www.smashingmagazine.com\/2018\/02\/user-interfaces-icons-visual-elements-screen-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Designing for UI<\/a><\/li><li><a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI Design Glossary<\/a><\/li><li><a href=\"https:\/\/thenounproject.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Noun Project<\/a><\/li><li><a href=\"https:\/\/speckyboy.com\/top-50-free-icon-sets\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free Icons Sets<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>UI Patterns<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/uxdesign.cc\/mobile-ui-13-basic-patterns-of-app-ui-design-to-know-about-d3f7c6176f13\" target=\"_blank\">13 basic mobile UI patterns<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/iospirations.com\/ios-app-ui\" target=\"_blank\">iospirations<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/screenlane.com\/?ref=uimovement\" target=\"_blank\">screenlane<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/mobile-patterns.com\/search\/patterns?q=home:tag\" target=\"_blank\">mobile-patterns<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/mobbin.design\/browse\/ios\/apps\" target=\"_blank\">mobbin<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"http:\/\/ui-patterns.com\/patterns\" target=\"_blank\">ui-patterns<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/designvault.io\/patterns\/\" target=\"_blank\">design vault<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/uimovement.com\/\" target=\"_blank\">UI movement<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">[\/expand]<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"has-text-color wp-block-heading\" style=\"color:#ff0004\">DUE TUESDAY<\/h2>\n\n\n\n<p class=\"has-text-color has-blue-color wp-block-paragraph\"><strong>[expand title=&#8221;Task 16 cont: Hi-Fi Prototype&#8221;]<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Choose a design direction as a team and apply to all the screens in your user flow.<\/li><li>Someone in the team may want to finalize design guidelines for the team to follow and\/or you may want to co-edit the same file. <\/li><li>Link between the screens for people to be able to navigate around easily in class.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to Turn In:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Share prototype link in the <strong><em>Slack channel #project1<\/em><\/strong><\/li><li>We will test the prototypes and critique the designs in class on Tuesday. <\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>How to create a clickable Hi-Fi Prototype<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>How to create it?&nbsp;<a rel=\"noreferrer noopener\" aria-label=\"Watch the same provided demo video (opens in a new tab)\" href=\"https:\/\/youtu.be\/N7QpSTyBG_Y\" target=\"_blank\">Watch the same provided demo video<\/a>&nbsp;<\/strong>to learn how to create a simple interactive prototype and how to export the link to share with your classmates on Slack.<ul><li>Double-check that the link you share says&nbsp;<strong>&#8220;Anyone with the link&#8221; can view it.&nbsp;<\/strong><\/li><\/ul><\/li><li><strong>Required Design Aspects:<\/strong><ul><li>Have actual text, icons, photos\/illustrations, and so on. It should look more refined and more understandable for the user to test.&nbsp;<\/li><li>Have a consistent color scheme, typography, icon set, and use of hierarchy throughout.<\/li><\/ul><\/li><li><strong>Choice of Style:<\/strong>&nbsp;The design could be based upon the style guidelines of your existing brand or it can be your own updated design style.&nbsp;<\/li><li><strong>Optional Free UI Kits:&nbsp;<\/strong>You are allowed to use built-in interface elements from existing Free Figma UI Toolkits, such as the keyboard, tab bar, nav bar, icons. Just make sure it is free and give the the creator credit in your Case Study at the end of the project.&nbsp;Once downloaded and opened, you just copy and paste over the elements you want into your own file. <ul><li>You can visit one of the Free Figma UI Kit websites listed below. <ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.apple.com\/design\/resources\/\" target=\"_blank\">iOS Toolkits<\/a>. <em>(Sketch files listed can open in Figma)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/material.io\/resources\/\" target=\"_blank\">Google Material Toolkit<\/a>. <em>(kits are under &#8220;Design Resources&#8221;)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.microsoft.com\/design\/fluent\/#\/\" target=\"_blank\">Microsoft Toolkits<\/a><\/li><\/ul><\/li><\/ul><ul><li>You could also try searching for a UI Kit for your specific brand to see if they have one.<\/li><\/ul><\/li><li><strong>Human Interface Guidelines:&nbsp;<\/strong>If you don&#8217;t use a UI Kit, you will want to reference the lecture on&nbsp;<a rel=\"noreferrer noopener\" aria-label=\"Human Interface Guidelines (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/ios_human_interface_guidelines.pdf\" target=\"_blank\">Human Interface Guidelines<\/a> or visit the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/overview\/themes\/\" target=\"_blank\">Human Interface Guidelines website<\/a> to look at standards of sizing and placement.<\/li><li><strong>Tuesday:<\/strong>&nbsp;You will be testing people on this hi-fi prototype next week, this will provide you the feedback to make final decisions on your redesign.<\/li><\/ol>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Student Hi-Fi Prototype Examples<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/47bf04b0-2741-4b13-9432-4718460cac9e-12ec\/\" target=\"_blank\">Tinder&nbsp;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/180568a3-32c8-40db-bd7c-ec8eda7146ee-4d56\/?fullscreen&amp;hints=off\" target=\"_blank\">NPR&nbsp;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/72c82fc4-22b5-4e53-9fce-ce2773ec83c5-279b\/\" target=\"_blank\">Zoom&nbsp;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/b51c7115-037e-4d59-9c6f-8a0f72bbde59-e04f\/\" target=\"_blank\">Amazon Prime&nbsp;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/xd.adobe.com\/view\/1faa2f91-2ad6-46d1-953b-9648b1d99961-4af9\/\" target=\"_blank\">Pinterest<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.figma.com\/proto\/Ppi2l9cWIyZsmf9mFuY5Z0\/Redbox-HiFi?node-id=1%3A2&amp;scaling=min-zoom\" target=\"_blank\">Redbox&nbsp;<\/a><em>(this one uses animation which isn&#8217;t required)<\/em><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">[\/expand]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PROJECT 1:&nbsp;Humanizing Product Design&nbsp;(Etsy) (Alaska) Lecture: Designing for Emotion. This will assist in infusing emotion and personality into your products and forming stronger connections with your users. Exercise: Tarot Cards of Tech. This will help consider unintended consequences of your solution. UI RESOURCES [expand title=&#8221;Click to see UI Resources&#8221;] Lectures GUI Design Basics iOS Human [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3139","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts\/3139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/comments?post=3139"}],"version-history":[{"count":11,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts\/3139\/revisions"}],"predecessor-version":[{"id":3165,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts\/3139\/revisions\/3165"}],"wp:attachment":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/media?parent=3139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/categories?post=3139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/tags?post=3139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}