{"id":1930,"date":"2025-03-10T21:48:51","date_gmt":"2025-03-10T21:48:51","guid":{"rendered":"https:\/\/sites.wsagames.com\/ab15g23\/?p=1930"},"modified":"2025-03-23T20:12:00","modified_gmt":"2025-03-23T20:12:00","slug":"ui-art","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/ab15g23\/ui-art\/","title":{"rendered":"UI &amp; Art"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">After Week 6&#8217;s Thursday session I was assigned to work on the UI. Using Joe&#8217;s greyboxes I&#8217;m going to create the art for the buttons and UI background to make a cohesive design that fits the theme of the game and feels immersive to the player. My work and design process is supported by my <a href=\"https:\/\/sites.wsagames.com\/ab15g23\/ui-design-research\/\" data-type=\"link\" data-id=\"https:\/\/sites.wsagames.com\/ab15g23\/ui-design-research\/\">research<\/a> on UI. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below is Joe&#8217;s sketch layout of the game world\/interface that I&#8217;ll be using as reference.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"885\" height=\"591\" src=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-8.png\" alt=\"\" class=\"wp-image-1932\" srcset=\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-8.png 885w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-8-300x200.png 300w, https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2025\/03\/image-8-768x513.png 768w\" sizes=\"(max-width: 885px) 100vw, 885px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Essentially, I am attempting to build a big panel with a screen that will show the game world. I wanted to start off with the &#8220;background&#8221; or the machine itself so that I can build up to creating the screen frames and buttons. That way I could refamilarise myself with the Adobe Suite, particularly my best friend Illustrator (sarcasm).<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">Challenges<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The biggest challenges I am anticipating are matching the existing art styles of my teams art department (Gabi and Rosie) and being conscious of my use of colour to ensure I am following the <a href=\"https:\/\/sites.wsagames.com\/thoseleftbehind\/2025\/02\/03\/art-bible\/\">art direction<\/a> (no green, retro-futurism etc.). This one is surprisingly difficult as much of my research and references tend to use colours that I can&#8217;t, so I will need to be smart and work around that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading alignwide has-text-align-center\">UI design process split up into posts:<\/h2>\n\n\n\n<div class=\"wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"columns-3 wp-block-post-template is-layout-grid wp-container-core-post-template-is-layout-17d66303 wp-block-post-template-is-layout-grid\"><li class=\"wp-block-post post-2210 post type-post status-publish format-standard hentry category-ui-ux\">\n\n<div class=\"wp-block-group has-border-color has-contrast-border-color is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/sites.wsagames.com\/ab15g23\/new-ui-2nd-iteration\/\" target=\"_self\" >New UI &#8211; 2nd Iteration<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">After the very important ocnversation about the shortcomings of our game in week 9, we decided to look into some&hellip;<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/sites.wsagames.com\/ab15g23\/new-ui-2nd-iteration\/\">read more&#8230;<\/a><\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-05-10T21:53:22+00:00\">May 10, 2025<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-2011 post type-post status-publish format-standard hentry category-ui-ux\">\n\n<div class=\"wp-block-group has-border-color has-contrast-border-color is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/sites.wsagames.com\/ab15g23\/ui-mockups\/\" target=\"_self\" >UI Mockups<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Mockup 1<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/sites.wsagames.com\/ab15g23\/ui-mockups\/\">read more&#8230;<\/a><\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-03-21T13:25:58+00:00\">March 21, 2025<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-2085 post type-post status-publish format-standard hentry category-ui-ux\">\n\n<div class=\"wp-block-group has-border-color has-contrast-border-color is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/sites.wsagames.com\/ab15g23\/ui-implementation\/\" target=\"_self\" >UI Implementation<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Joe had already set up a Testing scene in the project with greyboxes (below). The idea of the process I&hellip;<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/sites.wsagames.com\/ab15g23\/ui-implementation\/\">read more&#8230;<\/a><\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-03-21T13:14:36+00:00\">March 21, 2025<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-2124 post type-post status-publish format-standard hentry category-ui-ux\">\n\n<div class=\"wp-block-group has-border-color has-contrast-border-color is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/sites.wsagames.com\/ab15g23\/font\/\" target=\"_self\" >Font<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">After watching Juniper Dev&#8217;s short video &#8220;The Power of Font In Video Games&#8221; I began to really consider how typography&hellip;<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/sites.wsagames.com\/ab15g23\/font\/\">read more&#8230;<\/a><\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-03-19T13:08:08+00:00\">March 19, 2025<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-2013 post type-post status-publish format-standard hentry category-ui-ux\">\n\n<div class=\"wp-block-group has-border-color has-contrast-border-color is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/sites.wsagames.com\/ab15g23\/resource-hotbar-panels\/\" target=\"_self\" >Resource hotbar &amp; Panels<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">The hotbar used in the sketch Joe made was a suggestion he took from me, who took a lot of&hellip;<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/sites.wsagames.com\/ab15g23\/resource-hotbar-panels\/\">read more&#8230;<\/a><\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-03-13T16:37:56+00:00\">March 13, 2025<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-2001 post type-post status-publish format-standard hentry category-ui-ux\">\n\n<div class=\"wp-block-group has-border-color has-contrast-border-color is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/sites.wsagames.com\/ab15g23\/buttons\/\" target=\"_self\" >Buttons<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">When looking for references for buttons I found a community of people who create their own custom button panels for&hellip;<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/sites.wsagames.com\/ab15g23\/buttons\/\">read more&#8230;<\/a><\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-03-12T14:47:50+00:00\">March 12, 2025<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-1964 post type-post status-publish format-standard hentry category-ui-ux\">\n\n<div class=\"wp-block-group has-border-color has-contrast-border-color is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/sites.wsagames.com\/ab15g23\/background\/\" target=\"_self\" >Background<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Designing the background means designing the machine itself, this includes the screen borders, my biggest inspiration for this is looking&hellip;<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/sites.wsagames.com\/ab15g23\/background\/\">read more&#8230;<\/a><\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-03-10T21:47:54+00:00\">March 10, 2025<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-1519 post type-post status-publish format-standard hentry category-ui-ux\">\n\n<div class=\"wp-block-group has-border-color has-contrast-border-color is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/sites.wsagames.com\/ab15g23\/wireframing\/\" target=\"_self\" >Wireframing<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">The management simulator aspect of the game makes the UI far more important and far more frequent for the player&hellip;<\/p><p class=\"wp-block-post-excerpt__more-text\"><a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/sites.wsagames.com\/ab15g23\/wireframing\/\">read more&#8230;<\/a><\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-02-09T20:17:05+00:00\">February 9, 2025<\/time><\/div><\/div>\n\n<\/li><\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>After Week 6&#8217;s Thursday session I was assigned to work on the UI. Using Joe&#8217;s greyboxes I&#8217;m going to create the art for the buttons and UI background to make a cohesive design that fits the theme of the game and feels immersive to the player. My work and design process is supported by my [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[],"class_list":["post-1930","post","type-post","status-publish","format-standard","hentry","category-development"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/1930","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=1930"}],"version-history":[{"count":14,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/1930\/revisions"}],"predecessor-version":[{"id":2203,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/1930\/revisions\/2203"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=1930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=1930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=1930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}