User Interface: Where Game Data Meets Elegance

Hi guys! I’m Jean Charles (JC for short), the User Interface Designer for Project Resurgence. Have you ever held a job both obscure yet primordial? Something that, when your relatives ask, “ So, what do you do for a living?” your stumbling generalizations leave them completely confused? This always happens when I show Project Resurgence’s art and screenshots, and I’m asked what my participation in all this is. At this point, I usually scratch my head and fumble out, “UI…User Interface.”

So what does this nebulous term mean? If you’re reading this, chances are you have played lots of video games and seen various health bars, ammo gauges, damage counters, minimaps, etc. Every game needs a guy to think about these elements and I am that guy. I have to consider every element’s size, color, location, states, and functionality to make sure the system works; and I must also account for special circumstances like color-blindness and different monitor resolutions. All of these components of the UI protects a cornerstone of great games: immersion.

When I started on the project, it wasn’t easy to pin down what the team wanted for our interface. We had many references (Baldur’s Gate, Arcanum, Diablo,  Fallout, Guild Wars, Bioshock, and Divinity: Original Sin); all having very different ways to represent the game state. So the first thing I did was to create a vocabulary to describe what we were looking for, and define the axis on which to pinpoint where we wanted to stand:

  • Axis 1: Baroque to Streamlined.- This was an important distinction to make, in terms of how much ornamentation was necessary to enhance the tone of the setting. For instance, Diablo is very Baroque with its intricate angel and demon carvings; as is Assassin’s Creed with its many animated details. On the other side of the axis was the clean and simple interface of Guild Wars, with its utilitarian health gauge, ability bar, and lineal font.
  • Axis 2: Abstract to Concrete. – This was another important choice, regarding how rooted in the game world the graphic elements should appear to be. Abstract is the kind of interface that states plainly, “I am an interface, deal with it.” Such is Middle Earth: Shadow of Mordor’s simple, plain color silhouettes and numbers floating over the screen. On the other end, you have Fallout’s interface appearing like painted steel and physical buttons, which feels like manipulating a device that could be found in the game world.

Once we had this first frame of reference, it was simple to establish our design goals: mostly streamlined, but also mostly concrete. As a result, we wanted an interface that was simple and well organized, but also had the look of a machine found in the game world. Usability was always our top concern, so we decided the most important information should always be very clear, with large gauges, vibrant colors, and simple font. Similarly, the interface should also adjust well to a variety of screen resolutions, with collapsible secondary elements. For that mechanized look, we wanted something gritty and worn, but not necessarily dark or grim. This caused us to look to old prototype typewriters, steam gauges, test tubes filled with liquid, and other dieselpunk inspired aesthetics. Additionally, since our game explores the coexistence between the natural, magical, and technological world, it was equally important to balance the fantasy and sci-fi elements of our interface.

UI design is very much an iterative process, and to wrap things up I’d like to walk through our basic procedure. We’ve gone through many revisions to get our designs to their current states, but we are still by no means finished. Playtesting and user feedback are the ultimate evaluation of successful UI, and we will continue to adapt until Resurgence finally ships. So, the basic process looks like this:

  1. The Game Designers give me a list of information and problems to address in a given menu/window/interface element. Generally, this consists of whatever the player most needs to see and understand at a given point during the game.
  2. I draft a number of sketches to block out the interface answering that need, to try and find the ideal size, location, and arrangement for each necessary element.
  3. I design a slightly more polished wireframe, which the Code team can start using as placeholder graphics to test the desired functionality in engine.
  4. Then a feedback loop begins with the team, which slowly brings polish to the interface being designed. At every iteration, new elements are checked to ensure clarity, readability, high usability, and integration with all other interfaces.
  5. Finally, once the design and functionality are agreed upon, I continue polishing the visual aesthetics to make it all look as snazzy and consistent with the art style as possible. And of course, we strive to keep the entire UI as discreet as possible.

So that’s a super high level look at UI Design, and some of the important decisions we had to make towards it’s application in our game. Since this is the first time we’ve discussed UI, definitely let us know if you’d like us to dig deeper in this area. Thanks, and see you all next time!

Discuss in our community

Published by

Jean Charles Doublet

Jean-Charles Doublet Graphic artist UI designer for Nectar Games Studio Currently VFX artist for Spiders Games Masters degree in interactive media (graphic design and game design) Hobbies : Writing, P&P RPG

0 thoughts on “User Interface: Where Game Data Meets Elegance”

Leave a Reply