Posted by

Alan Bradley is a freelance games journalist, vagabond, and collector of oddities. Find him @chapelzero on Twitter.

Visual design has always been one of the most interesting elements of game development for me, and it goes way beyond selecting an art style or creating character models and environments. It's a challenge to create art that’s both beautiful and functional — that’s unique to our medium, and that tests skill sets beyond those normally associated with other art forms.

UI design is one of the areas where this is most starkly illustrated, as it’s a UI designer’s task to create an interface that not only provides crucial information to a player in a way that’s both accessible and comprehensive, but also to constantly ensure that what is a very mechanical design element blends well into the game world and isn’t constantly interfering with immersion.

The most elegant UI solutions are all but invisible except when they’re required, but can then provide as much information as a player requires in a compact and elegant way.

Have a vision, but be flexible

One of the most user-friendly approaches to this kind of design decision is to leave many of the final choices about how much of the UI is surfaced at any time in the hands of the players.

It’s the design concept a number of MMOs rely on — letting players resize or completely hide elements whenever they wish, or scale down the entire UI to suit their tastes.

While this addresses the issue of uncertainty about the dimensions and resolution of the display players will be playing your game on, it’s a bit clumsy and puts the onus on the players to fiddle around with your UI and spend a chunk of time they should be spending playing your game dealing with raw mechanical problems; in other words, it’s the opposite of the solutions I mentioned above that don’t jar players out of your game.

While leaving a bit of customization in the hands of your players is a fine idea, you need to solve as many issues as you can before the player even gets their hands on your game.

Approach UI with a vision and stick to it, and only after you’ve executed on that vision should you consider which final elements you’d like players to be able to tweak. This doesn’t mean that you need to slavishly adhere to your first design concept; experiment with ideas, be flexible, but when you do find something that works for your game don’t shy away from it, execute it with confidence.

Diegetic solutions like the HUD that make UI elements a part of the in-game world are perfect examples of elegant UI solutions constructed around a central vision. And they adhere to that critical philosophy I mentioned — giving players the information they need while keeping them immersed in your world.

Consider ideas like showing damage as actual wounds or, in the case of vehicles, displaying it on the hull/cockpit/bodywork in the form of holes or blasted components. The ways you find to build information traditionally available as a meter or number into your world, the more real your game is going to feel.

Be dynamic, not distracting

Dynamic UI is an old idea now, but it’s still one that a lot of designers have trouble executing properly. The key is to ensure that information is available to players whenever they need it but isn’t constantly cluttering the screen when they don’t.

’s dynamic HUD is an excellent example of this concept done right, fading out things like your health and currently selected item when it’s not immediately important but ensuring that information is always a simple button press away, or surfaces when it’s needed. In almost every situation, the more minimalist you can be with your HUD while still delivering key information, the better.

Another important consideration in UI design is eye travel. For instance, if your player wants to know how much ammo they have left in their gun’s magazine, making them search the screen for a tiny display tucked away in a corner isn’t ideal.

Instead, an indicator around the ring of the reticle — subtle but easy to read mid-battle — or a counter on the back of the actual weapon which is already centered on-screen, is a much more functional solution without taking up much precious screen real estate.

Always try to be aware of where your players eyes are likely to be, and when you need to impart vital information, make sure it’s surfaced in a way that immediately grabs their attention. Things like flashing elements and ones centered in the screen are most likely to draw the eye, so use them sparingly but don’t be afraid to take advantage of them when you have really important information that they player needs.

Latest from our Creators