{"id":333,"date":"2026-01-12T15:18:05","date_gmt":"2026-01-12T15:18:05","guid":{"rendered":"https:\/\/sites.wsagames.com\/xz16u24\/?p=333"},"modified":"2026-01-12T15:18:05","modified_gmt":"2026-01-12T15:18:05","slug":"ui-design-2","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/xz16u24\/2026\/01\/12\/ui-design-2\/","title":{"rendered":"UI Design"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Research<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">I took some screenshots from the 2D escape room game Cube Eascape PARADOX and Lost Island 4 and analyzed the UI.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"539\" height=\"367\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-60.png\" alt=\"\" class=\"wp-image-141\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-60.png 539w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-60-300x204.png 300w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"472\" height=\"330\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-61.png\" alt=\"\" class=\"wp-image-142\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-61.png 472w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-61-300x210.png 300w\" sizes=\"(max-width: 472px) 100vw, 472px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"561\" height=\"377\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-62.png\" alt=\"\" class=\"wp-image-143\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-62.png 561w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-62-300x202.png 300w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"380\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-63.png\" alt=\"\" class=\"wp-image-144\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-63.png 546w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-63-300x209.png 300w\" sizes=\"(max-width: 546px) 100vw, 546px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The cover and setup pages of Lost Island leave ample blank space for narrative imagery, whilst Cube Escape employs extensive negative space and minimises textual descriptions, using symbols to denote most buttons. Both approaches shape atmosphere in distinct ways.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"623\" height=\"429\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-64.png\" alt=\"\" class=\"wp-image-145\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-64.png 623w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-64-300x207.png 300w\" sizes=\"(max-width: 623px) 100vw, 623px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"425\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-65.png\" alt=\"\" class=\"wp-image-146\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-65.png 618w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2025\/12\/image-65-300x206.png 300w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Regarding the in-game UI, I\u2019m particularly mindful of the toolbar\u2019s positioning, as a game heavily reliant on items necessitates frequent toolbar usage. In my game, I\u2019ve combined two aspects I admire from other titles\u2014positioning the toolbar in the bottom-right corner whilst enabling the simultaneous display of multiple tools. Furthermore, given Lost Island\u2019s expansive in-game spaces, it incorporates a quick-access map eliminating reliance on directional buttons for room navigation. This also affords a broader field of view, allowing players to see an entire room at once. I shall draw upon this design when addressing the overworld map later. I also noted that Cube Escape offers minimal auditory feedback, making it difficult during gameplay to discern whether an item was used incorrectly or the screen failed to register a touch. I shall be mindful of this aspect in my own game development.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-2.png\" alt=\"\" class=\"wp-image-334\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-2.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-2-300x144.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-2-768x368.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u2191 Iteration 1<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"454\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/b794d368bd0b2d47799a0b58b6202526-1024x454.png\" alt=\"\" class=\"wp-image-340\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/b794d368bd0b2d47799a0b58b6202526-1024x454.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/b794d368bd0b2d47799a0b58b6202526-300x133.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/b794d368bd0b2d47799a0b58b6202526-768x340.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/b794d368bd0b2d47799a0b58b6202526-1536x680.png 1536w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/b794d368bd0b2d47799a0b58b6202526.png 1989w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u2191 Iteration 2<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Other UI Drafts<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"709\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-4-1024x709.png\" alt=\"\" class=\"wp-image-341\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-4-1024x709.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-4-300x208.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-4-768x532.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-4.png 1536w\" 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=\"710\" src=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-5-1024x710.png\" alt=\"\" class=\"wp-image-342\" srcset=\"https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-5-1024x710.png 1024w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-5-300x208.png 300w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-5-768x532.png 768w, https:\/\/sites.wsagames.com\/xz16u24\/wp-content\/uploads\/sites\/67\/2026\/01\/image-5.png 1395w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Research I took some screenshots from the 2D escape room game Cube Eascape PARADOX and Lost Island 4 and analyzed the UI. The cover and setup pages of Lost Island leave ample blank space for narrative imagery, whilst Cube Escape employs extensive negative space and minimises textual descriptions, using symbols to denote most buttons. Both [&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-333","post","type-post","status-publish","format-standard","hentry","category-semester1-2"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/posts\/333","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=333"}],"version-history":[{"count":1,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/posts\/333\/revisions"}],"predecessor-version":[{"id":343,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/posts\/333\/revisions\/343"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/media?parent=333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/categories?post=333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/xz16u24\/wp-json\/wp\/v2\/tags?post=333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}