{"id":1341,"date":"2025-05-11T17:23:55","date_gmt":"2025-05-11T17:23:55","guid":{"rendered":"https:\/\/sites.wsagames.com\/ms22g23\/?page_id=1341"},"modified":"2025-05-13T18:21:42","modified_gmt":"2025-05-13T18:21:42","slug":"experimenting-with-ui","status":"publish","type":"page","link":"https:\/\/sites.wsagames.com\/ms22g23\/experimenting-with-ui\/","title":{"rendered":"Experimenting with the UI"},"content":{"rendered":"\n<p><a href=\"https:\/\/sites.wsagames.com\/ms22g23\/after-the-first-playtest\/\" data-type=\"link\" data-id=\"https:\/\/sites.wsagames.com\/ms22g23\/after-the-first-playtest\/\">\u2190 After the First Playtest<\/a><\/p>\n\n\n\n<div style=\"height:14px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"712\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/Untitled_Artwork-84-1024x712.png\" alt=\"\" class=\"wp-image-1513\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/Untitled_Artwork-84-1024x712.png 1024w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/Untitled_Artwork-84-300x208.png 300w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/Untitled_Artwork-84-768x534.png 768w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/Untitled_Artwork-84-1536x1067.png 1536w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/Untitled_Artwork-84-2048x1423.png 2048w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/Untitled_Artwork-84-192x133.png 192w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Looking at feedback from the first playtest I decided to design a separate UI for when Yami is speaking. As throughout the designing process my main debate was whether to choose pink or beige coloured UI I decided on using a shade of brown for Yami. It was slightly lighter than the iterations presented in <a href=\"https:\/\/sites.wsagames.com\/ms22g23\/after-the-first-playtest\/\" data-type=\"link\" data-id=\"https:\/\/sites.wsagames.com\/ms22g23\/after-the-first-playtest\/\">After the First Playtest<\/a> page, but still dark enough to stand out from the background. It also matched all of them.<\/p>\n\n\n\n<p>Another small detail I added, and later on used in final version for the Violet UI as well, was the white blurred out hue around the character icon. It made the design more interesting and pleasant to look at.<\/p>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-1-3-1024x576.png\" alt=\"\" class=\"wp-image-1346\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-1-3-1024x576.png 1024w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-1-3-300x169.png 300w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-1-3-768x432.png 768w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-1-3-1536x864.png 1536w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-1-3-192x108.png 192w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-1-3.png 1920w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-7-1024x576.png\" alt=\"\" class=\"wp-image-1347\" srcset=\"https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-7-1024x576.png 1024w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-7-300x169.png 300w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-7-768x432.png 768w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-7-1536x864.png 1536w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-7-192x108.png 192w, https:\/\/sites.wsagames.com\/ms22g23\/wp-content\/uploads\/sites\/26\/2025\/05\/ui_ver_2-7.png 1920w\" sizes=\"(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/figure>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>I also experimented with blur a bit &#8211; I wanted to see how it would look like on the character icon but I didn&#8217;t quite like the effect so I went back to the previous concept.<\/p>\n\n\n\n<div style=\"height:45px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-right\"><a href=\"https:\/\/sites.wsagames.com\/ms22g23\/horror-ui\/\" data-type=\"link\" data-id=\"https:\/\/sites.wsagames.com\/ms22g23\/horror-ui\/\">Horror UI \u2192<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2190 After the First Playtest Looking at feedback from the first playtest I decided to design a separate UI for when Yami is speaking. As throughout the designing process my main debate was whether to choose pink or beige coloured UI I decided on using a shade of brown for Yami. It was slightly lighter &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sites.wsagames.com\/ms22g23\/experimenting-with-ui\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Experimenting with the UI&#8221;<\/span><\/a><\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1341","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/pages\/1341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/comments?post=1341"}],"version-history":[{"count":20,"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/pages\/1341\/revisions"}],"predecessor-version":[{"id":1529,"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/pages\/1341\/revisions\/1529"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ms22g23\/wp-json\/wp\/v2\/media?parent=1341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}