Quick, Easy, Readable UI

Iterations in AT SUNDOWN

Trying to Save Screen Estate

Here is a video of one of the first implementations of the HUD in AT SUNDOWN. The HUD elements for each player were placed in one of four corners. This was done to save more screen space. However, it didn’t work very well, since it wasn’t easy to remember which corner your player was in and quickly glance to know the information you need.

UI that Builds Muscle Memory

The next implementation of the HUD was along the bottom. While using more screen estate, the tradeoff was worth it in that you could instinctively glance downward regardless of which player you were. It makes it easier to read quickly, somewhat allowing the player to develop muscle memory for the eyes.

Radial Meters

Later, I made a mockup for a new HUD design that used radial meters to display information. After mocking up a design that I liked, I implemented it. We found the radial meters to be much easier to read quickly. However, we still desired the HUD to be more quickly readable.

Pings/Pops

We decided to put in HUD “ping” animations - little UI explosions that pop up when your abilities come off of cooldown, or your weapon reloads. These colored explosions let you see these crucial moments in your peripheral vision. While somewhat bleeding into the actual gameplay area, being an animation made this HUD element not intrusive, but still useful. A diamond shape was used for the weapon meter so that we could have a different diamond shape, which would be more quickly discernable.

A New Style

After being asked to redesign the characters by our publisher, we decided we also could redesign the HUD as well to make it look better, and perhaps make it suit the characters' tone as well. Our publisher wanted something “edgier”. I made several HUD mockups - playing around diamond shapes a lot. However, I decided to keep one of the meters as a circular shape, as I thought the shape difference would be helpful in making the HUD readable at a glance. We liked this final HUD design, and made similar tweaks throughout the other game menus to match the theme (shown are the character select, weapon select, and post-game screen mockups).