{"id":97,"date":"2023-11-20T13:22:12","date_gmt":"2023-11-20T13:22:12","guid":{"rendered":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/?p=97"},"modified":"2024-03-13T13:53:33","modified_gmt":"2024-03-13T13:53:33","slug":"week-7-full-high-fidelity","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/bsc2a\/project-3-experience-website\/week-7-full-high-fidelity\/","title":{"rendered":"Full High Fidelity"},"content":{"rendered":"\n<p>In spent this week combining my low\/mid fidelity designs, and my experimental Figma prototypes to create a new, high fidelity design.<\/p>\n\n\n\n<p>Firstly, after &#8220;turning the lights off&#8221; from my experimental design and determining I need to move towards a dark theme, I needed a title and body font that show off my desired aesthetics with connotations of punk rock, as well as being based on my research.<\/p>\n\n\n\n<p>Initially, I came across variable typefaces. I thought this could be interesting as it could add an interesting level of interactivity.<\/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=\"511\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-1-1024x511.png\" alt=\"\" class=\"wp-image-98\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-1-1024x511.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-1-300x150.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-1-768x383.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-1-1536x767.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-1-2048x1022.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I thought this was interesting, as the scalable &#8216;seismic&#8217; variable adds an interesting dimension, for example the possibility of increasing in &#8216;seismicity&#8217; as the website loads or scrolls, or an increase of &#8216;seismicity&#8217; as the user hovers over aspects of the UI or the type itself. However, I ultimately moved away from this due to not liking the design of the typeface itself, and complications in prototyping this in a way I deemed good enough in Figma.<\/p>\n\n\n\n<p>Another variable typeface I was interested in is &#8220;Fit&#8221;. However for the above reasons I did not choose this.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image alignright size-full is-resized has-custom-border wp-duotone-unset-2\"><img loading=\"lazy\" decoding=\"async\" width=\"486\" height=\"438\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-5.png\" alt=\"\" class=\"wp-image-102\" style=\"border-style:none;border-width:0px;border-radius:0px;width:120px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-5.png 486w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-5-300x270.png 300w\" sizes=\"(max-width: 486px) 100vw, 486px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image alignleft size-large is-resized has-custom-border wp-duotone-unset-3\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"243\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-4-1024x243.png\" alt=\"\" class=\"wp-image-101\" style=\"border-style:none;border-width:0px;border-radius:0px;width:421px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-4-1024x243.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-4-300x71.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-4-768x182.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-4-1536x365.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-4.png 1904w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large has-custom-border wp-duotone-unset-4\"><img loading=\"lazy\" decoding=\"async\" width=\"530\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-7-530x1024.png\" alt=\"\" class=\"wp-image-104\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-7-530x1024.png 530w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-7-155x300.png 155w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-7.png 678w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Ultimately, I chose the &#8220;Sedgwick Ave&#8221; typeface as I appreciate the punk rock connotations it gives to users.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>For my body typeface, I chose &#8220;Articulat CF&#8221;. In my research, this body font represented 80s nostalgia, while still remaining modern and fresh. This matches my event of 80s nostalgia in modern day.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default wp-duotone-unset-5\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-8-1024x637.png\" alt=\"\" class=\"wp-image-105\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-8-1024x637.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-8-300x187.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-8-768x478.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-8-1536x955.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-8-2048x1274.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-6\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"893\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-10-1024x893.png\" alt=\"\" class=\"wp-image-107\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-10-1024x893.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-10-300x262.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-10-768x670.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-10.png 1518w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In spent this week combining my low\/mid fidelity designs, and my experimental Figma prototypes to create a new, high fidelity design. Firstly, after &#8220;turning the lights off&#8221; from my experimental design and determining I need to move towards a dark theme, I needed a title and body font that show off my desired aesthetics with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":105,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,11],"tags":[14],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/97"}],"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=97"}],"version-history":[{"count":3,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":173,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions\/173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media\/105"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}