{"id":3303,"date":"2022-05-05T10:30:33","date_gmt":"2022-05-05T17:30:33","guid":{"rendered":"http:\/\/kaceymorrow.com\/361\/?p=3303"},"modified":"2022-05-05T10:44:22","modified_gmt":"2022-05-05T17:44:22","slug":"may-5-2","status":"publish","type":"post","link":"https:\/\/kaceymorrow.com\/361\/may-5-2\/","title":{"rendered":"May 5"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/giphy.com\/embed\/aIemRSCsUEgUqccSrN\" width=\"280\" height=\"280\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen><\/iframe><\/p>\n<p><a href=\"https:\/\/giphy.com\/gifs\/working-work-hard-aIemRSCsUEgUqccSrN\">via GIPHY<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ANNOUNCEMENTS<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" aria-label=\"Professional Practices Panel + Design Days (opens in a new tab)\" href=\"https:\/\/www.wwu.edu\/design\/designdays\/\" target=\"_blank\">Professional Practices Panel + Design Days<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"Design Wars (opens in a new tab)\" href=\"https:\/\/www.instagram.com\/p\/Cc6Kb6qvbTD\/\" target=\"_blank\">Design Wars<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">IN CLASS<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">PROJECT 2: <a rel=\"noreferrer noopener\" href=\"http:\/\/kaceymorrow.com\/361\/project-2-problem-seeking\/\" target=\"_blank\">Problem-Seeking<\/a><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Look at user task flows.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a rel=\"noreferrer noopener\" href=\"http:\/\/kaceymorrow.com\/480\/wp-content\/uploads\/2013\/09\/naming.pdf\" target=\"_blank\">Name Your Product<\/a><\/strong><em><strong>:<\/strong><\/em>&nbsp;Establish a name&nbsp;for your product.&nbsp;Brainstorm a list of at least&nbsp;<strong>20 possible names<\/strong>. Narrow your list to&nbsp;<strong>three final choices<\/strong>.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong>7 criteria for a good name:<\/strong><\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>meaningful<\/li><li>distinctive<\/li><li>future-oriented<\/li><li>modular<\/li><li>protectable<\/li><li>positive<\/li><li>visual<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Mobile 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>Screenlane: <a href=\"https:\/\/screenlane.com\/\">Search for your screen types and sketch out existing patterns<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a rel=\"noreferrer noopener\" aria-label=\"Crazy 8s Exercise (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Crazy-8-Sprint-Examples.pdf\" target=\"_blank\">Crazy 8s Exercise<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crazy 8s is an activity where you get 8 minutes to come up with 8 different layout ideas for the same screen. The goal is to be fast in getting several variations out without worrying much about the details. At the end of 8 minutes, decide on the layouts worth exploring and moving forward with into the wireframing and prototyping tasks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>UI Resources<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><a rel=\"noreferrer noopener\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/GUI-Design-.pdf\" target=\"_blank\">GUI Design Basics<\/a><\/strong><\/li><li><strong><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><\/strong><\/li><li><strong><a rel=\"noreferrer noopener\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Icon-Design.pdf\" target=\"_blank\">Icon Design<\/a><\/strong><\/li><\/ul>\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:#ff191d\">DUE TUESDAY<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>TASKS 12-14 Deliverables<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Turn deliverables into Team folders on Google Drive found on <a href=\"http:\/\/kaceymorrow.com\/361\/slack\/\">Slack #0_classinfo<\/a>. Label each file accordingly by task number and name. <strong>Lo-Fi prototype link<\/strong> will also be turned in on <a href=\"http:\/\/kaceymorrow.com\/361\/slack\/http:\/\/kaceymorrow.com\/361\/slack\/\">#project2 Slack Channel.<\/a><\/p>\n\n\n\n<p class=\"has-text-color has-blue-color wp-block-paragraph\"><strong>[expand title=&#8221;TASK 12 \u2013 WIREFRAMES&#8221;]<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>More Info: <a href=\"http:\/\/kaceymorrow.com\/361\/wireframes-help\/\">How to Create Wireframes + Examples<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Create numerous wireframes<\/strong>\u00a0for various screen types in your user flow. For example, this could be the main screens from your primary navigation, such as the home screen, a profile screen, browse screen, and so on&#8230; whatever is unique to your product redesign. Do at least a few variations for each of the relevant screens. Depending on your solution, your device choice may vary. You might be doing wireframes for either mobile, desktop, or a kiosk. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Feel free to do the<strong> Crazy 8&#8217;s exercise<\/strong> for this task. See the Help link above for more information.<\/p>\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>Wireframe sketches for various screen types in your user flow.<\/strong>&nbsp;Sketch several variations for each screen type to explore different layout ideas. You are welcome to use the Crazy 8s method. &nbsp;<\/li><li>You can use a sketchbook or whiteboard and take a high quality photo or scan of them. OR&nbsp;you can create them in a tool like Figma, Figjam, Invision Freehand, OR&nbsp;whatever software you feel most comfortable in.<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">[\/expand]<\/p>\n\n\n\n<p class=\"has-text-color has-blue-color wp-block-paragraph\"><strong>[expand title=&#8221;TASK 13 \u2013 LO-FI PROTOTYPE&#8221;]<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>More Info: <a href=\"http:\/\/kaceymorrow.com\/361\/lo-fi-prototype-help\/\">How to Create a Lo-Fi Clickable Prototype + Examples<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this task you will be a&nbsp;<strong>creating a clickable interactive lo-fi prototype<\/strong>&nbsp;that will be tested by your peers during Tuesday&#8217;s class.<\/p>\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>&nbsp;posted 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\n\n\n<p class=\"wp-block-paragraph\">[\/expand]<\/p>\n\n\n\n<p class=\"has-text-color has-blue-color wp-block-paragraph\"><strong>[expand title=&#8221;TASK 14 \u2013 STYLE BOARDS&#8221;]<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PDF: <a rel=\"noreferrer noopener\" aria-label=\"Style Board Examples (opens in a new tab)\" href=\"http:\/\/kaceymorrow.com\/361\/wp-content\/uploads\/2022\/04\/Style-Board-Examples-.pdf\" target=\"_blank\">Style Board Examples<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this task <strong>each teammate with create a style board&nbsp;<\/strong>to demonstrate the look and feel of the brand of your product. A style board is similar to a mood board, where it gives the client or stakeholders an idea of the overall look-and-feel of your product design.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Process of creating a style board<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Start with a few keywords. Include adjectives and emotions that describe the mood\/style you are aiming for and what your brand stands for.<\/li><li>The style board is a collage that usually shows some or all of the following aspects:<ul><li>logo<\/li><li>colors<\/li><li>typefaces<\/li><li>image style &#8211; such as photography or illustration style.<\/li><li>texture\/pattern<\/li><li>icons<\/li><li>any other ui elements<\/li><li>animation<\/li><li>tone of voice &#8211; a.k.a writing sample text<\/li><\/ul><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Design Inspiration\/Resources<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/unsplash.com\/\" target=\"_blank\">Unsplash&nbsp;<\/a><em>(copyright-free photography)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/thenounproject.com\/\" target=\"_blank\">The Noun Project&nbsp;<\/a>&nbsp;<em>(icons)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/coolors.co\/\" target=\"_blank\">Coolors&nbsp;<\/a><em>(color schemes)<\/em><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.typewolf.com\/\" target=\"_blank\">Typewolf&nbsp;<\/a>&nbsp;<em>(popular typefaces)<\/em><\/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>Each Teammate create a Style Board<\/strong><\/li><li>PDF<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">[\/expand]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>ANNOUNCEMENTS Professional Practices Panel + Design Days Design Wars IN CLASS PROJECT 2: Problem-Seeking Look at user task flows. Name Your Product:&nbsp;Establish a name&nbsp;for your product.&nbsp;Brainstorm a list of at least&nbsp;20 possible names. Narrow your list to&nbsp;three final choices.&nbsp; 7 criteria for a good name: meaningful distinctive future-oriented modular protectable positive visual Mobile UI Patterns [&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-3303","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts\/3303","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=3303"}],"version-history":[{"count":12,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts\/3303\/revisions"}],"predecessor-version":[{"id":3332,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/posts\/3303\/revisions\/3332"}],"wp:attachment":[{"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/media?parent=3303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/categories?post=3303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kaceymorrow.com\/361\/wp-json\/wp\/v2\/tags?post=3303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}