We’re in the phase where we’re ready to start wireframing and thinking about how to create a UX/UI design that fits our target audience. Although we did some research on this topic during the first week of the project, we felt the need for additional examples of how similar games are designed to align with what we want to create.
We looked for examples in popular games and explored projects on Behance that resembled the kind of design we’re aiming for. This helps us understand what kids are familiar with and how most game designers approach creating games.
<aside> ☝️
We don’t need to invent something entirely new here, instead, we should build on what already exists and what kids are familiar with, adapting it to suit our project.
</aside>
(Interface In Game, 2020b)
(Interface In Game, 2020b)
(Behance, z.d.-c)
(Behance, z.d.-c)
(Behance, z.d.-d)
(Behance, z.d.-d)
(Behance, z.d.-d)
We noticed that many games use a progress bar positioned above or next to the character to indicate some kind of strength or how much the character is defeated (or not). In the first and last game, progress bars are also placed in the corners of the screen. There is not much additional explanation is provided, as it assumes users are already familiar with this system.
(Behance, z.d.-d)
(Behance, z.d.-d)
If it needs to stand out, the progress bar can be positioned at the top of the screen, larger than other elements. This emphasizes its importance, ensuring users will notice it.
(Interface In Game, 2021)
(Interface In Game, 2021)
The last thing we looked into was the way of communicating things, as it’s important to ensure that kids can understand them.
We can see different ways of letting users know they’ve won and how announcements are made (like the last picture, This could be applied to notify users when the game starts after choosing a monster, to give them some ‘get ready’ time.
(Interface In Game, 2020b)
(Interface In Game, 2021)
(Interface In Game, 2021)
Behance. (z.d.). https://www.behance.net/gallery/201866343/Bombastic-Brothers-UxUi?tracking_source=search_projects|game+ui+design+&l=60
Behance. (z.d.-b). https://www.behance.net/gallery/209264539/NFT-Game-Design-Mini-game?tracking_source=search_projects|game+ui+design+&l=0
Interface In Game. (2020, 20 november). Fortnite | Interface In Game | Video game UI. Interface in Game. https://interfaceingame.com/games/fortnite/?elements=progress
Interface In Game. (2021, 1 januari). Brawl Stars | Interface In Game | Video game UI. Interface in Game. https://interfaceingame.com/games/brawl-stars/