{"id":68,"date":"2023-10-22T12:29:55","date_gmt":"2023-10-22T12:29:55","guid":{"rendered":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/?p=68"},"modified":"2024-03-13T13:53:19","modified_gmt":"2024-03-13T13:53:19","slug":"week-3-getting-fluent-in-figma","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/bsc2a\/project-2-evaluate-iterate\/week-3-getting-fluent-in-figma\/","title":{"rendered":"Getting Fluent in Figma"},"content":{"rendered":"\n<p class=\"has-medium-font-size\"><strong>Constant Iteration<\/strong><\/p>\n\n\n\n<p>My focus for this week&#8217;s work was developing my Figma skills as I develop improvements for the TK Maxx retail site. I based my work of the research I had found <a rel=\"noreferrer noopener\" href=\"http:\/\/miro.com\/app\/board\/uXjVNfTFH-Y=\/?share_link_id=14929287879\" target=\"_blank\">on my Miro board \u2192<\/a> and iterated my designs after considering feedback from lecturers and fellow students.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/file\/2opgDqM4UYVx7F3zGM8EOa\/TK-Maxx?type=design&amp;node-id=0%3A1&amp;mode=design&amp;t=nvXrE03bgtfogQU4-1\" data-type=\"link\" data-id=\"https:\/\/www.figma.com\/file\/2opgDqM4UYVx7F3zGM8EOa\/TK-Maxx?type=design&amp;node-id=0%3A1&amp;mode=design&amp;t=nvXrE03bgtfogQU4-1\">Open the Figma board \u2192 <\/a><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Getting the Navigation Right<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border wp-duotone-unset-1\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"106\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-7-1024x106.png\" alt=\"\" class=\"wp-image-69\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-7-1024x106.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-7-300x31.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-7-768x79.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-7-1536x159.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-7-2048x212.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border wp-duotone-unset-2\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"171\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-1024x171.png\" alt=\"\" class=\"wp-image-70\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-1024x171.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-300x50.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-768x128.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-1536x256.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8.png 1786w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>After my user testing left me with some concerns about discoverability of the original navigation bar (users unable to find features due to then being hidden under icons), I choose to bring out features using labels as well as icons to increase the discoverability.<\/p>\n\n\n\n<p>I faced problems within the development of this NavBar, such as button shape, clunkiness and contrast, which could lead to unnecessary accessibility problems.<\/p>\n\n\n\n<p><strong>Contrast<\/strong><\/p>\n\n\n\n<p>Buttons did not contrast with the background, so I first added a stroke. However, this was clunky and did not fit with my design vision.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border wp-duotone-unset-3\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"165\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-11-1024x165.png\" alt=\"\" class=\"wp-image-73\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-11-1024x165.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-11-300x48.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-11-768x124.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-11-1536x247.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-11.png 1564w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I changed the foreground colour to white, but again this did not fit my design vision.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border wp-duotone-unset-4\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"173\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-12-1024x173.png\" alt=\"\" class=\"wp-image-74\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-12-1024x173.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-12-300x51.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-12-768x130.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-12.png 1500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I resulted with a slight shadow to differentiate the foreground and the background.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border wp-duotone-unset-5\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"171\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-1024x171.png\" alt=\"\" class=\"wp-image-70\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-1024x171.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-300x50.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-768x128.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8-1536x256.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-8.png 1786w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Button Shape<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border wp-duotone-unset-6\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"124\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-10-1024x124.png\" alt=\"\" class=\"wp-image-72\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-10-1024x124.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-10-300x36.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-10-768x93.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-10-1536x186.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-10.png 1698w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Originally, buttons were all pill shaped navigation. I changed them to rectangular buttons  as I wanted them to denote navigation and not action.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Product Page<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border wp-duotone-unset-7\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"781\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-13-1024x781.png\" alt=\"\" class=\"wp-image-75\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-13-1024x781.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-13-300x229.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-13-768x586.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-13-1536x1171.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/10\/image-13.png 1608w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I designed the product page and navigation system to link between the home page and product page. I was inspired by traditional product labels in using a darker background colour than the foreground colour. I feel the design system I have generated is fluent across the website features and the navigation bar and I am pleased with the outcome.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Constant Iteration My focus for this week&#8217;s work was developing my Figma skills as I develop improvements for the TK Maxx retail site. I based my work of the research I had found on my Miro board \u2192 and iterated my designs after considering feedback from lecturers and fellow students. Open the Figma board \u2192 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":75,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,8],"tags":[10],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/68"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":2,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/68\/revisions\/167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media\/75"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}