{"id":2210,"date":"2025-05-10T21:53:22","date_gmt":"2025-05-10T21:53:22","guid":{"rendered":"https:\/\/sites.wsagames.com\/ab15g23\/?p=2210"},"modified":"2025-05-15T14:32:21","modified_gmt":"2025-05-15T14:32:21","slug":"new-ui-2nd-iteration","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/ab15g23\/new-ui-2nd-iteration\/","title":{"rendered":"New UI &#8211; 2nd Iteration"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">After the very important ocnversation about the shortcomings of our game in <a href=\"https:\/\/sites.wsagames.com\/ab15g23\/week-9-big-changes\/\" data-type=\"link\" data-id=\"https:\/\/sites.wsagames.com\/ab15g23\/week-9-big-changes\/\">week 9<\/a>, we decided to look into some big changes (more info in linked post). This also meant rehauling the UI to better suit those modfifications. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note: the designs for the UI were started during the Easter Break the week before week 10.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Changes:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No more retro machine UI<\/li>\n\n\n\n<li>More reminiscient of management sims<\/li>\n\n\n\n<li>simple and minimalist<\/li>\n\n\n\n<li>less buttons<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">I started by tearing away all of that surrounding machinery and starting on a blank slate, which would be an &#8220;empty&#8221; game world (the survival camp with no buildings).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/empty-survivor-camp-small-1024x576.jpg\" alt=\"\" class=\"wp-image-2213\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/empty-survivor-camp-small-1024x576.jpg 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/empty-survivor-camp-small-300x169.jpg 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/empty-survivor-camp-small-768x432.jpg 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/empty-survivor-camp-small-1536x864.jpg 1536w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/empty-survivor-camp-small.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">My inspiration for the UI came from two primary sources &#8211; <em>Surviving Mars<\/em> and <em>Surviving the Aftermath<\/em> (STA), both games published by Paradox Interactive. I&#8217;d dedicated many hours to STA and a couple on Surviving Mars, to get a feel for how they worked within their games. <\/p>\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 aligncenter size-large\"><img decoding=\"async\" width=\"1003\" height=\"564\" data-id=\"2214\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image.png\" alt=\"\" class=\"wp-image-2214\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image.png 1003w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-300x169.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-768x432.png 768w\" sizes=\"(max-width: 1003px) 100vw, 1003px\" \/><figcaption class=\"wp-element-caption\">Surviving Mars<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1009\" height=\"562\" data-id=\"2215\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-1.png\" alt=\"\" class=\"wp-image-2215\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-1.png 1009w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-1-300x167.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-1-768x428.png 768w\" sizes=\"(max-width: 1009px) 100vw, 1009px\" \/><figcaption class=\"wp-element-caption\">Surviving Mars<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" data-id=\"2216\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-2-1024x575.png\" alt=\"\" class=\"wp-image-2216\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-2-1024x575.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-2-300x169.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-2-768x432.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-2.png 1041w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Surviving the Aftermath<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Resource Bar<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">I started with the resource bar at the top, a typical location of most resource management games. Reusing the previous asset from my first UI. This time I wanted the resources to &#8220;pop&#8221; and contrast a bit more from the bar itself so I added a subtle light blue glow effect around them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"163\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-3-1024x163.png\" alt=\"\" class=\"wp-image-2218\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-3-1024x163.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-3-300x48.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-3-768x123.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-3-1536x245.png 1536w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-3.png 1660w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Time Panel<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Much like the games I used as references, one of the more intuitive locations for displaying time is in the bottom left corner of the screen, with pause, play and speed buttons. This panel would also update with the days\/weeks that pass in-game time, with a bar that would fill to signify the hours passing. I kept with the same colours and sharp straight lines.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"496\" height=\"169\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-4.png\" alt=\"\" class=\"wp-image-2219\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-4.png 496w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-4-300x102.png 300w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Character Panel<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The characters should still be interactable and have been moved to the bottom right corner, this helped balance out the UI throughout the screen and meant they would always be accessible throughout the gameplay. I reused the same character cards from the previous UI.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"514\" height=\"274\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-5.png\" alt=\"\" class=\"wp-image-2221\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-5.png 514w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-5-300x160.png 300w\" sizes=\"(max-width: 514px) 100vw, 514px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Build Button\/Menu<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">As mentioned in the week 9 post, we had agreed to implement a build mechanic where the player would build the survival camp from the ground up using the resources they gathered. I used the remaining space at the bottom of the screen to do this with a construction button. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The idea being that this button would be pressed and a small menu would appear above it showing the player the camps available to them, as they hover above the building icons a panel would appear to show that building&#8217;s information: name, cost, purpose. I used the same affect as the icons on the resource bar on the building icons to make them stand out against the dark blue hexagon shaped butons. I tried different shapes like circles and squares but I felt that the futuristic and organic nature of polygons felt more appropriate (and just cooler).<\/p>\n\n\n\n<figure class=\"wp-block-gallery alignwide has-nested-images columns-default is-cropped 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=\"879\" height=\"319\" data-id=\"2258\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-17.png\" alt=\"\" class=\"wp-image-2258\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-17.png 879w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-17-300x109.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-17-768x279.png 768w\" sizes=\"(max-width: 879px) 100vw, 879px\" \/><figcaption class=\"wp-element-caption\">No glow effect<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"835\" height=\"292\" data-id=\"2260\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-18.png\" alt=\"\" class=\"wp-image-2260\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-18.png 835w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-18-300x105.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-18-768x269.png 768w\" sizes=\"(max-width: 835px) 100vw, 835px\" \/><figcaption class=\"wp-element-caption\">With glow effect<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">With this done that was the UI essentially finished, the same panels would be reused for other information such as for showing upgrades and character tasks\/bios.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-UI-small.png\" alt=\"\" class=\"wp-image-2217\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-UI-small.png 1200w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-UI-small-300x169.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-UI-small-1024x576.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-UI-small-768x432.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">*<strong>Week 11 Update:<\/strong> Due to miscommunication, the build mechanic I had in mind was not the same as the one that was implemented in-game. In the end there was no dedicated build menu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Narrative Scene UI<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This would be much easier to design as it would only really be comprised of the text box and dialogue option buttons. With finished artwork from the character and environment artists I was able to design this fairly quickly. Despite the differences in genre and themes, the first games that came to mind as references were <em>Dream Daddy<\/em> and <em>Hades<\/em> (quite the combination, I know).<\/p>\n\n\n\n<figure class=\"wp-block-gallery alignwide has-nested-images columns-default is-cropped 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=\"1024\" height=\"576\" data-id=\"2225\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-7-1024x576.png\" alt=\"\" class=\"wp-image-2225\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-7-1024x576.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-7-300x169.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-7-768x432.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-7-1536x864.png 1536w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-7.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Dream Daddy<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"410\" data-id=\"2224\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-6.png\" alt=\"\" class=\"wp-image-2224\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-6.png 728w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-6-300x169.png 300w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><figcaption class=\"wp-element-caption\">Hades<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I wanted to continue the sharp straight lines but this time I added some roundness to break it up a little bit at opposite corners, I wanted to make interactions in this scene feel a bit softer and more human. I also added a thicker black stroke around the character art so that they would stand out more against the background and further emphasise that comic art style.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1120\" height=\"667\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-dia-small.png\" alt=\"\" class=\"wp-image-2222\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-dia-small.png 1120w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-dia-small-300x179.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-dia-small-1024x610.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-dia-small-768x457.png 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<p class=\"wp-block-paragraph\">Living with one of the artists I was able to get early feedback about the style before sending it off the team, safe to say we both felt a lot happier with this new UI than the previous one. I sent the mockup images to the technical designer for feedback and approval and all was well.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"661\" height=\"790\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-8.png\" alt=\"\" class=\"wp-image-2227\" style=\"width:352px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-8.png 661w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/image-8-251x300.png 251w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" \/>\n\n\n\n<p class=\"wp-block-paragraph\">Here is the complete asset pack that was sent to the team and posted on the <a href=\"https:\/\/sites.wsagames.com\/thoseleftbehind\/2025\/03\/19\/ui-assets\/\">shared dev blog<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2100\" height=\"1217\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-assets-small.png\" alt=\"\" class=\"wp-image-2228\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-assets-small.png 2100w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-assets-small-300x174.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-assets-small-1024x593.png 1024w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-assets-small-768x445.png 768w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-assets-small-1536x890.png 1536w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/05\/new-ui-assets-small-2048x1187.png 2048w\" sizes=\"(max-width: 2100px) 100vw, 2100px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>After the very important ocnversation about the shortcomings of our game in week 9, we decided to look into some big changes (more info in linked post). This also meant rehauling the UI to better suit those modfifications. Note: the designs for the UI were started during the Easter Break the week before week 10. [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[],"class_list":["post-2210","post","type-post","status-publish","format-standard","hentry","category-ui-ux"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/2210","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=2210"}],"version-history":[{"count":8,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/2210\/revisions"}],"predecessor-version":[{"id":2466,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/2210\/revisions\/2466"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=2210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=2210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=2210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}