UI Design Project - Temenos
When designing the in-game HUD UI elements for Temenos, a 3D arena survival game akin to Devil Daggers meets Avatar the Last Airbender, I wanted to focus on the rounder and less rigid aspects of the game’s visual style. I used Adobe Illustrator and Unity to create the iterations over a semester at DigiPen from scratch and I will continue to iterate on these designs for the Spring 2019 semester.
Over time, the team that I’m working with decided to cut features that were ultimately too much for our development budget or that didn’t sit well during testing.
We found that the compass feature (the large oval feature in the bottom center found in the first two iterations) didn’t work as intended and was unanimously deemed to be awkward by testers, so we made the decision to cut it.
We removed the ability cooldown icons after 3 iterations after we built the mechanics into the base abilities of the player without cooldowns. When designing this feature, I pulled from Overwatch’s design for Cooldown icons so I used a radial fill on the top icon, numerical countdowns overlaid during the cooldown process, and a quick sound effect and burst of color upon completion. Testing showed this feature was received positively but we found no need for it and cut it reluctantly.
The series of five dots that appear in the bottom center represent the health of a building the player is tasked at defending. Upon taking damage, the center of the dot would pop, play a quick sound effect, and gray out. Upon regaining health, the center of the dot reforms, a different quick sound effect plays, and the dot regains color. The decision to cut the building entirely to focus on the player and their individual ability to survive mean’t that the feature was pointless after the third iteration, so we removed it entirely.
The outer slightly curved border around the player’s screen signifies the player’s 1 hit shield that they receive each round of play. In Devil Daggers, the player is 1 hit away from death at any moment and in our game, the player has 2 health. We used this to represent the player’s health and with a quick animation that passively pulses the border outwards, players understood the intention behind the feature immediately. We reduced the thickness of the lines we used in order to reduce the clutter on the screen, but the design has stayed consistent for most of the design process.