Case Study - Idle Champions of the Forgotten Realms
I wanted to go through an analysis the UI of 'Idle Champions of the Forgotten Realms' which can provide valuable insights in design and user experience. Recreating the wireframe allows for a hands-on exercise in understanding the structural hierarchy and layout of the elements. For the purpose of this exercise I did not make any major revisions to the HUD but only refreshed the UI assets using Photoshop to practice technical UI art skills.
Wireframes
Breaking down the HUD into a wireframe, I was able to quickly discern elements of the UI. This is an example of Gestalt's principles of grouping, demonstrating both grouping and similarities.
The principles of similarity start to shine here, bounding boxes, the shapes of icons indicating which buttons belong to a group. In addition adding elements in the widget and the colour used to denote the weight of each element show where the focus of the player is intended to be.
HUD Art
Next, I revamped the HUD with a more stylized bubbly direction inspired from mobile games. Rounding certain elements and adding a shine to the buttons. The largest difference was the edit to the 'Lvl Up' banner only because it could stand out a little more. With idle games, the progress is heavily dependent on the level of the characters, by creating a more contrasting banner it can grab the player's attention more in hopes they will advance the character's level.
Here is the final result!
