{"id":2321,"date":"2026-01-08T11:55:42","date_gmt":"2026-01-08T11:55:42","guid":{"rendered":"https:\/\/sites.wsagames.com\/is3g23\/?page_id=2321"},"modified":"2026-01-08T13:03:50","modified_gmt":"2026-01-08T13:03:50","slug":"ui-direction","status":"publish","type":"page","link":"https:\/\/sites.wsagames.com\/is3g23\/ui-direction\/","title":{"rendered":"UI Direction"},"content":{"rendered":"\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">\u25ab\ufe0fThe UI for Archive 13 is designed around a retro 1990s newsroom desktop, combinging functional clarity with atmospheric immersion. The interface will prioritise readability, narrative pacing, and player decision-making while maintaining the aesthetic of old CRT monitors and office systems.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">The design will support all four gameplay loops: evidence analysis, narrative progression, editiorial decisions, and fieldwork.<\/p>\n\n\n\n<h1 class=\"wp-block-heading has-large-font-size\">Visual Style<\/h1>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">\ud83d\udd8c\ufe0fKey elements include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Soft CRT glow and light screen curvature<\/li>\n\n\n\n<li>Pixel icons<\/li>\n\n\n\n<li>Minimal clutter<\/li>\n\n\n\n<li>grey\/blue monitor<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">This style reinforces the setting and helps immerse players in the world of a tabloid newsroom.<\/p>\n\n\n\n<h1 class=\"wp-block-heading has-large-font-size\">Screen Layout<\/h1>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">\ud83d\udcbbTo maintain gameplay flow, the overall screen layout will be divided into four functional regions:<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">1. Central Workspace<\/h3>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">This screen is all on the monitor in a 2D format. It\u2019s for interactive UI such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Inbox<\/li>\n\n\n\n<li>Evidence viewer<\/li>\n\n\n\n<li>Archive Files<\/li>\n\n\n\n<li>Photo tools &lt;\/aside&gt;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.wsagames.com\/is3g23\/wp-content\/uploads\/sites\/24\/2026\/01\/image-15-1024x576.png\" alt=\"\" class=\"wp-image-2322\" srcset=\"https:\/\/sites.wsagames.com\/is3g23\/wp-content\/uploads\/sites\/24\/2026\/01\/image-15-1024x576.png 1024w, https:\/\/sites.wsagames.com\/is3g23\/wp-content\/uploads\/sites\/24\/2026\/01\/image-15-300x169.png 300w, https:\/\/sites.wsagames.com\/is3g23\/wp-content\/uploads\/sites\/24\/2026\/01\/image-15-768x432.png 768w, https:\/\/sites.wsagames.com\/is3g23\/wp-content\/uploads\/sites\/24\/2026\/01\/image-15-1536x864.png 1536w, https:\/\/sites.wsagames.com\/is3g23\/wp-content\/uploads\/sites\/24\/2026\/01\/image-15.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">2. Narrative Text Box<\/h3>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">\ud83d\udcbbThis will be a fixed, semi-transparent box acoss the bottom 20% of the screen that displays:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Player\u2019s inner monologue<\/li>\n\n\n\n<li>Dialogue from other characters<\/li>\n\n\n\n<li>Narrative<\/li>\n\n\n\n<li>System messages<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">This placement ensures the narrative never covers evidence or UI elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">3. Choice Bar<\/h3>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">\ud83d\udcbbThe Choice Bar appears as a horizontal strip directly above the Narrative Text Box at the bottom of the screen. It spans approximately 80% of the screen width, leaving a small margin on either side to maintain clarity. Each choice will displayed in a clearly separated box with retro-inspired pixel borders, matching the CRT monitor aesthetic. When the player hovers over a choice, it subtly highlights or changes colour to indicate selection. The bar allows the player to make decisions efficiently while keeping the central workspace and evidence viewer fully visible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">4. Risk and Readership meters<\/h3>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">\ud83d\udcbbThe Risk and Readership meters will be positioned in the top-left and top-right corners of the screen. They will occupy a small but noticeable portion of the interface so they are always visible but will never obstruct key elements like the evidence viewer or central workspace.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Risk Meter (top-left):<\/strong> A horizontal bar that fills with a warning-coloured gradient as risk increases. It reflects attention, suspicion, and danger levels, rising when risky choices are made.<\/li>\n\n\n\n<li><strong>Readership Meter (top-right):<\/strong> A horizontal bar that fills with a bright, positive colour as readership increases. It reflects story popularity and editor satisfaction.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f0ccfb\">Both meters will feature subtle retro-style CRT glow effects and simple pixel indicators, keeping the visual theme consistent while providing instant feedback to the player about the consequences of their decisions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u25ab\ufe0fThe UI for Archive 13 is designed around a retro 1990s newsroom desktop, combinging functional clarity with atmospheric immersion. The interface will prioritise readability, narrative pacing, and player decision-making while maintaining the aesthetic of old CRT monitors and office systems. The design will support all four gameplay loops: evidence analysis, narrative progression, editiorial decisions, and [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"saved_in_kubio":false,"footnotes":""},"class_list":["post-2321","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/is3g23\/wp-json\/wp\/v2\/pages\/2321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/is3g23\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.wsagames.com\/is3g23\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/is3g23\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/is3g23\/wp-json\/wp\/v2\/comments?post=2321"}],"version-history":[{"count":3,"href":"https:\/\/sites.wsagames.com\/is3g23\/wp-json\/wp\/v2\/pages\/2321\/revisions"}],"predecessor-version":[{"id":2395,"href":"https:\/\/sites.wsagames.com\/is3g23\/wp-json\/wp\/v2\/pages\/2321\/revisions\/2395"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/is3g23\/wp-json\/wp\/v2\/media?parent=2321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}