{"id":580,"date":"2026-05-13T17:09:39","date_gmt":"2026-05-13T17:09:39","guid":{"rendered":"https:\/\/sites.wsagames.com\/xz16u24\/?p=580"},"modified":"2026-05-13T17:09:39","modified_gmt":"2026-05-13T17:09:39","slug":"ui-development","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/xz16u24\/2026\/05\/13\/ui-development\/","title":{"rendered":"UI Development"},"content":{"rendered":"\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>1.Understanding the GDD<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"383\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ecaa6ff4621203f1688573646891b29f-1024x383.png\" alt=\"\" class=\"wp-image-581\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ecaa6ff4621203f1688573646891b29f-1024x383.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ecaa6ff4621203f1688573646891b29f-300x112.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ecaa6ff4621203f1688573646891b29f-768x287.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ecaa6ff4621203f1688573646891b29f-1536x574.png 1536w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ecaa6ff4621203f1688573646891b29f.png 2004w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is the UI icon style and usage demonstrated in the GDD. It\u2019s presented very clearly, so I just need to polish it up.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"675\" height=\"1024\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/78440853ac3519e8d9c0e399b0722879-675x1024.png\" alt=\"\" class=\"wp-image-582\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/78440853ac3519e8d9c0e399b0722879-675x1024.png 675w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/78440853ac3519e8d9c0e399b0722879-198x300.png 198w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/78440853ac3519e8d9c0e399b0722879.png 733w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"727\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/7db2f30dc00e133cb65d2dab571270cb-1024x727.png\" alt=\"\" class=\"wp-image-583\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/7db2f30dc00e133cb65d2dab571270cb-1024x727.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/7db2f30dc00e133cb65d2dab571270cb-300x213.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/7db2f30dc00e133cb65d2dab571270cb-768x545.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/7db2f30dc00e133cb65d2dab571270cb.png 1513w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"729\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/image-3-1024x729.png\" alt=\"\" class=\"wp-image-584\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/image-3-1024x729.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/image-3-300x213.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/image-3-768x546.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/image-3-1536x1093.png 1536w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/image-3-2048x1457.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"593\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687690809-1024x593.png\" alt=\"\" class=\"wp-image-585\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687690809-1024x593.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687690809-300x174.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687690809-768x445.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687690809-1536x889.png 1536w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687690809.png 1746w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">These are the first icons I drew. They were used for testing by the programming team and to experiment with different styles for the first version in conjunction with the map.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These icons were drawn exactly as shown in the sketches, and because we initially experimented with a digital style without outline strokes, they have a bright, vibrant look.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">During internal testing, due to changes in the map style and mechanics, I modified and removed some buttons to better align with the project&#8217;s style.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"893\" height=\"1024\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/0232e0f3e6c202a68b14829e318fb9cb-893x1024.png\" alt=\"\" class=\"wp-image-588\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/0232e0f3e6c202a68b14829e318fb9cb-893x1024.png 893w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/0232e0f3e6c202a68b14829e318fb9cb-261x300.png 261w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/0232e0f3e6c202a68b14829e318fb9cb-768x881.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/0232e0f3e6c202a68b14829e318fb9cb.png 1012w\" sizes=\"(max-width: 893px) 100vw, 893px\" \/><\/figure>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>2.First Playtest<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After the first playtest, I made some improvements to certain icons based on the feedback.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"596\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687723860-1024x596.png\" alt=\"\" class=\"wp-image-586\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687723860-1024x596.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687723860-300x175.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687723860-768x447.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687723860-1536x895.png 1536w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778687723860.png 1746w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To make it easier to understand, I\u2019ve drawn some simple sketches in the prompt bar to help illustrate the text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"702\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/1c032fbd854328055144843eee2ab066-1024x702.png\" alt=\"\" class=\"wp-image-587\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/1c032fbd854328055144843eee2ab066-1024x702.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/1c032fbd854328055144843eee2ab066-300x206.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/1c032fbd854328055144843eee2ab066-768x527.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/1c032fbd854328055144843eee2ab066-1536x1053.png 1536w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/1c032fbd854328055144843eee2ab066.png 1773w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Players reported that they couldn&#8217;t read the handwritten text, so I replaced it with a typed font.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"325\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778688381593-1024x325.png\" alt=\"\" class=\"wp-image-589\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778688381593-1024x325.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778688381593-300x95.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778688381593-768x244.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778688381593.png 1293w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We received feedback that the item bar&#8217;s functions were unclear, so we removed the growth rings to make it easier to understand.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some players have mentioned that they don\u2019t know what to do when they first enter the game, so after discussing it with my team, we decided to add text prompts to guide players through the gameplay.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"767\" height=\"1024\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ae06fd281eaf49dca1ed29d4495212a1-767x1024.png\" alt=\"\" class=\"wp-image-590\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ae06fd281eaf49dca1ed29d4495212a1-767x1024.png 767w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ae06fd281eaf49dca1ed29d4495212a1-225x300.png 225w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ae06fd281eaf49dca1ed29d4495212a1-768x1025.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/ae06fd281eaf49dca1ed29d4495212a1.png 980w\" sizes=\"(max-width: 767px) 100vw, 767px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I proposed two options, and ultimately chose the one below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"414\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689228785-1024x414.png\" alt=\"\" class=\"wp-image-591\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689228785-1024x414.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689228785-300x121.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689228785-768x311.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689228785-1536x621.png 1536w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689228785.png 1694w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This was my first attempt, and it was rejected because it was a bit rough. In the second version, I added hand-drawn textures and adjusted the font and border colors to make it blend in better with the composition.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"420\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689246001-1024x420.png\" alt=\"\" class=\"wp-image-592\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689246001-1024x420.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689246001-300x123.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689246001-768x315.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689246001-1536x631.png 1536w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778689246001.png 1761w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Since the game has two scenes, we added a button for the soul fragment to switch between them. This button appears after the player completes a mini-game in one scene and views the notebook.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"882\" style=\"aspect-ratio: 908 \/ 882;\" width=\"908\" controls src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ20260514-003503.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I added a small animation to the soul fragment to make it stand out more on the screen and encourage players to click on it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since players reported that the first mini-game had no instructions on how to play, I created a brush icon to indicate that dust needs to be wiped away.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"588\" height=\"804\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778690937480.png\" alt=\"\" class=\"wp-image-596\" style=\"width:376px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778690937480.png 588w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778690937480-219x300.png 219w\" sizes=\"(max-width: 588px) 100vw, 588px\" \/><\/figure>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>3.Second Playtest<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are no obvious UI issues, and we\u2019ve received virtually no feedback regarding the UI.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">My team and I discussed and standardized the fonts used in some game instructions to make them look more polished.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"872\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778692135892-1024x872.png\" alt=\"\" class=\"wp-image-597\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778692135892-1024x872.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778692135892-300x255.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778692135892-768x654.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/05\/QQ_1778692135892.png 1491w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>4.Public Playtest<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The improvements proposed in this section will be considered as areas for enhancement in future projects\uff0c no changes will be made to this game.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The fonts across all sections need to be standardized.<\/li>\n\n\n\n<li>The notebook logo looks too modern and doesn\u2019t fit the overall atmosphere of the game.<\/li>\n\n\n\n<li>The icons are too large and detract from the game\u2019s atmosphere.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1.Understanding the GDD This is the UI icon style and usage demonstrated in the GDD. It\u2019s presented very clearly, so I just need to polish it up. These are the first icons I drew. They were used for testing by the programming team and to experiment with different styles for the first version in conjunction [&hellip;]<\/p>\n","protected":false},"author":58,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-580","post","type-post","status-publish","format-standard","hentry","category-semester1-2"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/posts\/580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/comments?post=580"}],"version-history":[{"count":1,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/posts\/580\/revisions"}],"predecessor-version":[{"id":598,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/posts\/580\/revisions\/598"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/media?parent=580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/categories?post=580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/tags?post=580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}