{"id":84,"date":"2023-11-06T15:19:49","date_gmt":"2023-11-06T15:19:49","guid":{"rendered":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/?p=84"},"modified":"2024-03-13T13:53:28","modified_gmt":"2024-03-13T13:53:28","slug":"week-5-increase-the-fidelity","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/bsc2a\/project-3-experience-website\/week-5-increase-the-fidelity\/","title":{"rendered":"Increase the Fidelity"},"content":{"rendered":"\n<p>This week, despite illness limiting my productivity, I focused on increasing the fidelity of my project, developing research and fine-tuning the event I was creating the website for.<\/p>\n\n\n\n<p>In terms of moving towards a higher fidelity website, I wanted to draw inspiration from 80s punk media, in an attempt to mirror this style. I looked at 3 80s posters\/zines.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Punk&#8217;s Not Dead<\/strong><\/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 size-large is-resized has-custom-border wp-duotone-unset-1\"><img loading=\"lazy\" decoding=\"async\" width=\"790\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/2978006421-790x1024.jpg\" alt=\"\" class=\"wp-image-85\" style=\"border-style:none;border-width:0px;border-radius:0px;aspect-ratio:0.771484375;width:315px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/2978006421-790x1024.jpg 790w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/2978006421-231x300.jpg 231w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/2978006421-768x996.jpg 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/2978006421.jpg 800w\" sizes=\"(max-width: 790px) 100vw, 790px\" \/><\/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-2\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/secure-692x1024.png\" alt=\"\" class=\"wp-image-86\" style=\"border-style:none;border-width:0px;border-radius:0px;aspect-ratio:0.67578125;width:276px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/secure-692x1024.png 692w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/secure-203x300.png 203w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/secure-768x1136.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/secure-1038x1536.png 1038w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/secure.png 1280w\" sizes=\"(max-width: 692px) 100vw, 692px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>I firstly chose this &#8220;Punk&#8217;s Not Dead&#8221; zine. This was a British Punk magazine from 1980.<\/p>\n\n\n\n<p>Firstly, this looks ugly. The successful use of colour on the zine does not transition at all to a website. However it did get me thinking of more successful products I could experiment with using this style.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Damage<\/strong><\/p>\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 is-resized has-custom-border wp-duotone-unset-3\"><img loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-669x1024.png\" alt=\"\" class=\"wp-image-88\" style=\"border-style:none;border-width:0px;border-radius:0px;aspect-ratio:0.6533203125;width:286px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-669x1024.png 669w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-196x300.png 196w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-768x1176.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-1003x1536.png 1003w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image-1337x2048.png 1337w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/image.png 1862w\" sizes=\"(max-width: 669px) 100vw, 669px\" \/><\/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 size-large is-resized has-custom-border wp-duotone-unset-4\"><img loading=\"lazy\" decoding=\"async\" width=\"727\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/brown-727x1024.png\" alt=\"\" class=\"wp-image-89\" style=\"border-style:none;border-width:0px;border-radius:0px;aspect-ratio:0.7099609375;width:308px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/brown-727x1024.png 727w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/brown-213x300.png 213w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/brown-768x1082.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/brown-1090x1536.png 1090w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/brown.png 1280w\" sizes=\"(max-width: 727px) 100vw, 727px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>I liked the brown, rugged feel of this poster, although I&#8217;m not sure of its origins. I didn&#8217;t like how the brown translated to the website. While the poster felt somewhat edgy, the design on the wireframe looked tired, somewhat elderly.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 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-full is-resized has-custom-border wp-duotone-unset-5\"><img loading=\"lazy\" decoding=\"async\" width=\"343\" height=\"641\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/paper.png\" alt=\"\" class=\"wp-image-90\" style=\"border-style:none;border-width:0px;border-radius:0px;aspect-ratio:0.5351014040561622;width:192px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/paper.png 343w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/paper-161x300.png 161w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>I experimented with texture on the site, however I felt this looked cheap and unprofessional.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Anarchy in the UK<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 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-6\"><img loading=\"lazy\" decoding=\"async\" width=\"731\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/l22727-c82pz-1-731x1024.jpg\" alt=\"\" class=\"wp-image-91\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/l22727-c82pz-1-731x1024.jpg 731w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/l22727-c82pz-1-214x300.jpg 214w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/l22727-c82pz-1-768x1076.jpg 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/l22727-c82pz-1.jpg 900w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/><\/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 size-large is-resized has-custom-border wp-duotone-unset-7\"><img loading=\"lazy\" decoding=\"async\" width=\"692\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/redsecure-692x1024.png\" alt=\"\" class=\"wp-image-92\" style=\"border-style:none;border-width:0px;border-radius:0px;aspect-ratio:0.67578125;width:294px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/redsecure-692x1024.png 692w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/redsecure-203x300.png 203w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/redsecure-768x1136.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/redsecure-1038x1536.png 1038w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/redsecure.png 1280w\" sizes=\"(max-width: 692px) 100vw, 692px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>I liked this colouring, however with no element of theming it just looks like a generic red colour. I found a typeface I liked and added it to the site.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 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-8\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed1-589x1024.png\" alt=\"\" class=\"wp-image-93\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed1-589x1024.png 589w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed1-173x300.png 173w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed1-768x1334.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed1-884x1536.png 884w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed1-1179x2048.png 1179w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed1.png 1280w\" sizes=\"(max-width: 589px) 100vw, 589px\" \/><\/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 size-large has-custom-border wp-duotone-unset-9\"><img loading=\"lazy\" decoding=\"async\" width=\"601\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed2-601x1024.png\" alt=\"\" class=\"wp-image-94\" style=\"border-style:none;border-width:0px;border-radius:0px\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed2-601x1024.png 601w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed2-176x300.png 176w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed2-768x1309.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed2-901x1536.png 901w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed2-1202x2048.png 1202w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2023\/11\/midfed2.png 1280w\" sizes=\"(max-width: 601px) 100vw, 601px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>I felt now I was more on the way to developing a website with appropriate theming, rather than a simple wireframe.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week, despite illness limiting my productivity, I focused on increasing the fidelity of my project, developing research and fine-tuning the event I was creating the website for. In terms of moving towards a higher fidelity website, I wanted to draw inspiration from 80s punk media, in an attempt to mirror this style. I looked [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":89,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,11],"tags":[13],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/84"}],"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=84"}],"version-history":[{"count":2,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":171,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/84\/revisions\/171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media\/89"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}