Sable’s Adventures
GAme UI Design
THE PROBLEM: A UI design is required for a Heads-Up Display (HUD) and a storefront.
THE SOLUTION: Create a heads-up display and a storefront using AI tools.
ROLE: UI Design
TOOLS: Figma, Photoshop, Midjourney
I wanted to design a UI within a mobile game environment so I created Sable’s Adventures, based on a similar design to the cartoon Robin Hood movie. The goal for the main character is to gather gold and jewels while trying to find pieces of map she needs to find her friends.
Pop-up screens
Sketching ideas for reward and informational screens, keeping the art simple and consistent throughout all the different types of pop-ups. Typography with a fairytale feel was used to maintain consistency with the overall game’s theme.
Storefront Items
I researched similar games to find the best-suited shop experience and to understand the pros and cons of each of the game’s UI treatments. From there, I created a couple of sketches to test out some possible ideas for Sable’s store.
First was creating coins and jewels for Sable to use within the game to buy items that will help her quest. I used Midjourney to develop some ideas for these 2 items.
I considered two options for players to buy – bags of gold and chests of gold, depending on the amount required.
Storefront
Once I had established the designs for the coins and jewels, I worked on a simple storefront. I pulled in different background elements to help accent the menu items and differentiate the store screens from the pop-ups.
Next Steps
Continue building upon the new store screens and relevant pop-up screens for better gameplay.
Character art was created in Midjourney.