{"id":1934,"date":"2025-03-09T18:35:30","date_gmt":"2025-03-09T18:35:30","guid":{"rendered":"https:\/\/sites.wsagames.com\/ab15g23\/?p=1934"},"modified":"2025-03-19T13:30:52","modified_gmt":"2025-03-19T13:30:52","slug":"ui-design-research","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/ab15g23\/ui-design-research\/","title":{"rendered":"UI Design Research"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I started the research by looking at UI-heavy games based on computer interfaces. I found three that I was most drawn to.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Greyhat<\/li>\n\n\n\n<li>Duskers<\/li>\n\n\n\n<li>Last Call BBS<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery alignwide has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"579\" data-id=\"1937\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-10-1024x579.png\" alt=\"\" class=\"wp-image-1937\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-10-1024x579.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-10-300x170.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-10-768x434.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-10.png 1381w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Greyhat<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"598\" data-id=\"1938\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-11.png\" alt=\"\" class=\"wp-image-1938\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-11.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-11-300x175.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-11-768x449.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Duskers<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"994\" height=\"556\" data-id=\"1939\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-12.png\" alt=\"\" class=\"wp-image-1939\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-12.png 994w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-12-300x168.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-12-768x430.png 768w\" sizes=\"(max-width: 994px) 100vw, 994px\" \/><figcaption class=\"wp-element-caption\">Last Call BBS<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Other games mentioned by Joe to look into were <em>Uplink<\/em> and <em>Pony Island.<\/em> Joe already had a sketch prepared of the new UI layout and shared his inspirations below. I&#8217;ll be using it to further my research.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"240\" data-id=\"1942\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-9.png\" alt=\"\" class=\"wp-image-1942\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-9.png 320w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-9-300x225.png 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><figcaption class=\"wp-element-caption\">Uplink<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"337\" data-id=\"1943\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-15.png\" alt=\"\" class=\"wp-image-1943\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-15.png 600w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-15-300x169.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption class=\"wp-element-caption\">Pony Island<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"244\" data-id=\"1941\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-14.png\" alt=\"\" class=\"wp-image-1941\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-14.png 786w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-14-300x93.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-14-768x238.png 768w\" sizes=\"(max-width: 786px) 100vw, 786px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I wanted to look at screen that used a computer or some sort of frame but found it difficult to find any good references. I used the game UI database Sophie recommended to see if I could find anything similar and found these.<\/p>\n\n\n\n<figure class=\"wp-block-gallery alignwide has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"989\" height=\"749\" data-id=\"1947\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-17.png\" alt=\"\" class=\"wp-image-1947\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-17.png 989w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-17-300x227.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-17-768x582.png 768w\" sizes=\"(max-width: 989px) 100vw, 989px\" \/><figcaption class=\"wp-element-caption\">Half Life<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" data-id=\"1948\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-18-1024x580.png\" alt=\"\" class=\"wp-image-1948\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-18-1024x580.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-18-300x170.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-18-768x435.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-18.png 1328w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Alien: Isolation<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"556\" data-id=\"1949\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-19-1024x556.png\" alt=\"\" class=\"wp-image-1949\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-19-1024x556.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-19-300x163.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-19-768x417.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-19.png 1326w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Bayonetta<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">They were great examples of what I was searching for but none of them really stick out in the style or theme of Those Left Behind. What I&#8217;m really looking for is a mashup of retro and post-apocolayptic, the closest thing to it that I could think of was the Fallout franchise. What I found most interesting was the first Fallout game from 1997.<\/p>\n\n\n\n<figure class=\"wp-block-gallery alignwide has-nested-images columns-default wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1415\" height=\"730\" data-id=\"1970\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-27.png\" alt=\"\" class=\"wp-image-1970\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-27.png 1415w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-27-300x155.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-27-1024x528.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-27-768x396.png 768w\" sizes=\"(max-width: 1415px) 100vw, 1415px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"480\" data-id=\"1978\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-28.png\" alt=\"\" class=\"wp-image-1978\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-28.png 640w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-28-300x225.png 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The UI in <em>Fallout<\/em> (1997) was dense, mouse-driven, and designed for turn-based gameplay, featuring a static isometric layout, grid-based inventory, and text-based dialogue. In contrast, modern <em>Fallout<\/em> games have streamlined, real-time interfaces with immersive 3D Pip-Boy menus, quick-access hotkeys, weight-based inventory, and fully interactive world maps with quest markers. Overall, the UI has transitioned from a methodical, strategy-focused design to a more accessible and action-oriented experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mood\/inspoboard<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Looking at old nuclear control room machines and panels, various computer consoles and existing UI as inspiration.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"738\" height=\"407\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-16.png\" alt=\"\" class=\"wp-image-1945\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-16.png 738w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-16-300x165.png 300w\" sizes=\"(max-width: 738px) 100vw, 738px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Additional section was amde in the team&#8217;s shared <a href=\"https:\/\/uk.pinterest.com\/rosie7179\/those-left-behind\/ui\/\">Pinterest board<\/a> for UI. This board focuses on retro-futurism machine UI and feautures some of the GDDs original old internet aesthetic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When looking at the material and textures I googled industrial consoles finding that they are generally mild steel boxes, although other materials such as&nbsp;plastic, GRP and stainless steel are commonly used too.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Button shapes on these types of machine panels are always perfectly square or circular, common colours of these buttons are red, orange, grey\/white or green. Alongside buttons, typically there are switches, knobs, ports, sldiers and various lights.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I started the research by looking at UI-heavy games based on computer interfaces. I found three that I was most drawn to. Other games mentioned by Joe to look into were Uplink and Pony Island. Joe already had a sketch prepared of the new UI layout and shared his inspirations below. I&#8217;ll be using it [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45],"tags":[],"class_list":["post-1934","post","type-post","status-publish","format-standard","hentry","category-research-all-things-related-to-semester-2s-game-development-module"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/1934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/comments?post=1934"}],"version-history":[{"count":10,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/1934\/revisions"}],"predecessor-version":[{"id":2134,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/1934\/revisions\/2134"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=1934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=1934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=1934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}