At its core, UX refers to the experience a player has while interacting with a game. It covers everything from how intuitive the game controls are to the emotional journey the game guides the player through. UI, on the other hand, refers to the specific elements within the game that players interact with, like buttons, menus, health bars, and inventory screens. Both UX and UI design work hand in hand to create an engaging and smooth gaming experience. When done right, they are virtually invisible\u2014players are immersed in the game world without even noticing the interface or controls.<\/p>\n\n\n\n
However, when either is poorly designed, it can become a source of frustration, pulling players out of the experience. The lecture underscored how a seamless balance between the two is essential for player satisfaction.<\/p>\n\n\n\n
UX Design<\/strong><\/h3>\n\n\n\nOne of the first things discussed in the lecture was the role of UX design in shaping the player\u2019s journey. Good UX ensures that players can easily navigate through the game without confusion or frustration. This means designing levels, missions, and in-game actions in a way that feels natural. The lecturer pointed out the importance of user-centered design<\/strong><\/em> in game development. This approach prioritises the needs, expectations, and challenges of the players, and the game design is tailored accordingly.<\/p>\n\n\n\nUI Design<\/strong><\/h3>\n\n\n\n![\"\"](\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2024\/12\/image-9.png\")
<\/figure>\n\n\n\nWhile UX focuses on the player\u2019s overall experience, UI design is about the aesthetics and functionality of the interface. In games, UI elements like menus, buttons, health bars, and even the way information is presented on screen play an important role in guiding players and keeping them informed. UI design must strike a balance between functionality and style. It should not only serve the purpose of delivering critical information but also complement the game\u2019s visual identity.<\/p>\n\n\n\n
For instance, in a fantasy RPG, the design of the inventory screen might use elements like scrolls, potions, or ancient books to keep the aesthetic in line with the game\u2019s theme. However, the primary objective of the UI remains to ensure that players can quickly access their items or skills without confusion.<\/p>\n\n\n\n
To best sum everything up, we looked at Jakobs Ten Usability Heuristics, this will be a great tool to keep looking back at when thinking about user-centred design.<\/p>\n\n\n\n
Looking at existing HUDS<\/h2>\n\n\n\n
I know I wanta a really simplisitic and minimalist look when it comes to the UI so I decided to download and take screenshots of the game\u2019s UI for inspiration.<\/p>\n\n\n\n
Looking at Hollow Knight<\/em><\/h3>\n\n\n\n![\"\"](\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2024\/12\/image-17-1024x569.png\")
<\/figure>\n\n\n\nLooking at Cult of The Lamb<\/em><\/h3>\n\n\n\n![\"\"](\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2024\/12\/image-16.png\")
<\/figure>\n\n\n\nLooking at these case studies my takeaways are that HUDs should be concise and communicate the most important information on the screen without creating excessive noise and cluttering the scene. The HUD should also help the and guide the player through key-binds and directions for example, whether thats a button prompt or mission objectives.<\/p>\n\n\n\n
Creating UI Designs<\/h2>\n\n\n\n![\"\"](\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2024\/12\/image-11.png\")
<\/figure>\n\n\n\nUsing what I learned in the week I went on to create very basic wireframes of my game’s UI, keeping in mind the most important screens of my game.<\/p>\n\n\n\n
To do this, I used figma as it allowed me to freely create shapes and icons as well as comment and label. Iteration is an important part of the process. I considered different skill tree shapes and sizes, inventory layout and whether an inventory was even neccessary for the type of game I was designing.<\/p>\n\n\n\n![\"\"](\"https:\/\/sites.wsagames.com\/ab15g23\/wp-content\/uploads\/sites\/5\/2024\/12\/image-10-1024x599.png\")
<\/figure>\n\n\n\nI hope to go into this further and design true mock-ups with colour and style that would best suite the game.<\/p>\n","protected":false},"excerpt":{"rendered":"
UI\/UX The user experience (UX) and user interface (UI) design are crucial components that can make or break the player\u2019s immersion. This week dove deeper into the complexities of UX\/UI in game design, unpacking the significance of both disciplines and how they contribute to the overall success of a game. The Importance of UX\/UI in […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-780","post","type-post","status-publish","format-standard","hentry","category-weekly-updates"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780","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=780"}],"version-history":[{"count":5,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions"}],"predecessor-version":[{"id":2462,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions\/2462"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
UI Design<\/strong><\/h3>\n\n\n\n<\/figure>\n\n\n\nWhile UX focuses on the player\u2019s overall experience, UI design is about the aesthetics and functionality of the interface. In games, UI elements like menus, buttons, health bars, and even the way information is presented on screen play an important role in guiding players and keeping them informed. UI design must strike a balance between functionality and style. It should not only serve the purpose of delivering critical information but also complement the game\u2019s visual identity.<\/p>\n\n\n\n
For instance, in a fantasy RPG, the design of the inventory screen might use elements like scrolls, potions, or ancient books to keep the aesthetic in line with the game\u2019s theme. However, the primary objective of the UI remains to ensure that players can quickly access their items or skills without confusion.<\/p>\n\n\n\n
To best sum everything up, we looked at Jakobs Ten Usability Heuristics, this will be a great tool to keep looking back at when thinking about user-centred design.<\/p>\n\n\n\n
Looking at existing HUDS<\/h2>\n\n\n\n
I know I wanta a really simplisitic and minimalist look when it comes to the UI so I decided to download and take screenshots of the game\u2019s UI for inspiration.<\/p>\n\n\n\n
Looking at Hollow Knight<\/em><\/h3>\n\n\n\n<\/figure>\n\n\n\nLooking at Cult of The Lamb<\/em><\/h3>\n\n\n\n<\/figure>\n\n\n\nLooking at these case studies my takeaways are that HUDs should be concise and communicate the most important information on the screen without creating excessive noise and cluttering the scene. The HUD should also help the and guide the player through key-binds and directions for example, whether thats a button prompt or mission objectives.<\/p>\n\n\n\n
Creating UI Designs<\/h2>\n\n\n\n<\/figure>\n\n\n\nUsing what I learned in the week I went on to create very basic wireframes of my game’s UI, keeping in mind the most important screens of my game.<\/p>\n\n\n\n
To do this, I used figma as it allowed me to freely create shapes and icons as well as comment and label. Iteration is an important part of the process. I considered different skill tree shapes and sizes, inventory layout and whether an inventory was even neccessary for the type of game I was designing.<\/p>\n\n\n\n<\/figure>\n\n\n\nI hope to go into this further and design true mock-ups with colour and style that would best suite the game.<\/p>\n","protected":false},"excerpt":{"rendered":"
UI\/UX The user experience (UX) and user interface (UI) design are crucial components that can make or break the player\u2019s immersion. This week dove deeper into the complexities of UX\/UI in game design, unpacking the significance of both disciplines and how they contribute to the overall success of a game. The Importance of UX\/UI in […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-780","post","type-post","status-publish","format-standard","hentry","category-weekly-updates"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780","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=780"}],"version-history":[{"count":5,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions"}],"predecessor-version":[{"id":2462,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions\/2462"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n\n\n\nWhile UX focuses on the player\u2019s overall experience, UI design is about the aesthetics and functionality of the interface. In games, UI elements like menus, buttons, health bars, and even the way information is presented on screen play an important role in guiding players and keeping them informed. UI design must strike a balance between functionality and style. It should not only serve the purpose of delivering critical information but also complement the game\u2019s visual identity.<\/p>\n\n\n\n
For instance, in a fantasy RPG, the design of the inventory screen might use elements like scrolls, potions, or ancient books to keep the aesthetic in line with the game\u2019s theme. However, the primary objective of the UI remains to ensure that players can quickly access their items or skills without confusion.<\/p>\n\n\n\n
To best sum everything up, we looked at Jakobs Ten Usability Heuristics, this will be a great tool to keep looking back at when thinking about user-centred design.<\/p>\n\n\n\n
Looking at existing HUDS<\/h2>\n\n\n\n
I know I wanta a really simplisitic and minimalist look when it comes to the UI so I decided to download and take screenshots of the game\u2019s UI for inspiration.<\/p>\n\n\n\n
Looking at Hollow Knight<\/em><\/h3>\n\n\n\n<\/figure>\n\n\n\nLooking at Cult of The Lamb<\/em><\/h3>\n\n\n\n<\/figure>\n\n\n\nLooking at these case studies my takeaways are that HUDs should be concise and communicate the most important information on the screen without creating excessive noise and cluttering the scene. The HUD should also help the and guide the player through key-binds and directions for example, whether thats a button prompt or mission objectives.<\/p>\n\n\n\n
Creating UI Designs<\/h2>\n\n\n\n<\/figure>\n\n\n\nUsing what I learned in the week I went on to create very basic wireframes of my game’s UI, keeping in mind the most important screens of my game.<\/p>\n\n\n\n
To do this, I used figma as it allowed me to freely create shapes and icons as well as comment and label. Iteration is an important part of the process. I considered different skill tree shapes and sizes, inventory layout and whether an inventory was even neccessary for the type of game I was designing.<\/p>\n\n\n\n<\/figure>\n\n\n\nI hope to go into this further and design true mock-ups with colour and style that would best suite the game.<\/p>\n","protected":false},"excerpt":{"rendered":"
UI\/UX The user experience (UX) and user interface (UI) design are crucial components that can make or break the player\u2019s immersion. This week dove deeper into the complexities of UX\/UI in game design, unpacking the significance of both disciplines and how they contribute to the overall success of a game. The Importance of UX\/UI in […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-780","post","type-post","status-publish","format-standard","hentry","category-weekly-updates"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780","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=780"}],"version-history":[{"count":5,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions"}],"predecessor-version":[{"id":2462,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions\/2462"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n\n\n\nLooking at Cult of The Lamb<\/em><\/h3>\n\n\n\n<\/figure>\n\n\n\nLooking at these case studies my takeaways are that HUDs should be concise and communicate the most important information on the screen without creating excessive noise and cluttering the scene. The HUD should also help the and guide the player through key-binds and directions for example, whether thats a button prompt or mission objectives.<\/p>\n\n\n\n
Creating UI Designs<\/h2>\n\n\n\n<\/figure>\n\n\n\nUsing what I learned in the week I went on to create very basic wireframes of my game’s UI, keeping in mind the most important screens of my game.<\/p>\n\n\n\n
To do this, I used figma as it allowed me to freely create shapes and icons as well as comment and label. Iteration is an important part of the process. I considered different skill tree shapes and sizes, inventory layout and whether an inventory was even neccessary for the type of game I was designing.<\/p>\n\n\n\n<\/figure>\n\n\n\nI hope to go into this further and design true mock-ups with colour and style that would best suite the game.<\/p>\n","protected":false},"excerpt":{"rendered":"
UI\/UX The user experience (UX) and user interface (UI) design are crucial components that can make or break the player\u2019s immersion. This week dove deeper into the complexities of UX\/UI in game design, unpacking the significance of both disciplines and how they contribute to the overall success of a game. The Importance of UX\/UI in […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-780","post","type-post","status-publish","format-standard","hentry","category-weekly-updates"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780","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=780"}],"version-history":[{"count":5,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions"}],"predecessor-version":[{"id":2462,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions\/2462"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n\n\n\nLooking at these case studies my takeaways are that HUDs should be concise and communicate the most important information on the screen without creating excessive noise and cluttering the scene. The HUD should also help the and guide the player through key-binds and directions for example, whether thats a button prompt or mission objectives.<\/p>\n\n\n\n
Creating UI Designs<\/h2>\n\n\n\n<\/figure>\n\n\n\nUsing what I learned in the week I went on to create very basic wireframes of my game’s UI, keeping in mind the most important screens of my game.<\/p>\n\n\n\n
To do this, I used figma as it allowed me to freely create shapes and icons as well as comment and label. Iteration is an important part of the process. I considered different skill tree shapes and sizes, inventory layout and whether an inventory was even neccessary for the type of game I was designing.<\/p>\n\n\n\n<\/figure>\n\n\n\nI hope to go into this further and design true mock-ups with colour and style that would best suite the game.<\/p>\n","protected":false},"excerpt":{"rendered":"
UI\/UX The user experience (UX) and user interface (UI) design are crucial components that can make or break the player\u2019s immersion. This week dove deeper into the complexities of UX\/UI in game design, unpacking the significance of both disciplines and how they contribute to the overall success of a game. The Importance of UX\/UI in […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-780","post","type-post","status-publish","format-standard","hentry","category-weekly-updates"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780","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=780"}],"version-history":[{"count":5,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions"}],"predecessor-version":[{"id":2462,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions\/2462"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n\n\n\nUsing what I learned in the week I went on to create very basic wireframes of my game’s UI, keeping in mind the most important screens of my game.<\/p>\n\n\n\n
To do this, I used figma as it allowed me to freely create shapes and icons as well as comment and label. Iteration is an important part of the process. I considered different skill tree shapes and sizes, inventory layout and whether an inventory was even neccessary for the type of game I was designing.<\/p>\n\n\n\n I hope to go into this further and design true mock-ups with colour and style that would best suite the game.<\/p>\n","protected":false},"excerpt":{"rendered":" UI\/UX The user experience (UX) and user interface (UI) design are crucial components that can make or break the player\u2019s immersion. This week dove deeper into the complexities of UX\/UI in game design, unpacking the significance of both disciplines and how they contribute to the overall success of a game. The Importance of UX\/UI in […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-780","post","type-post","status-publish","format-standard","hentry","category-weekly-updates"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780","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=780"}],"version-history":[{"count":5,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions"}],"predecessor-version":[{"id":2462,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/posts\/780\/revisions\/2462"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/media?parent=780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/categories?post=780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ab15g23\/wp-json\/wp\/v2\/tags?post=780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/figure>\n\n\n\n