As an artist and a person who had many encounters with graphic design in general, I’m still rather new to creating User Interface (UI). Thus I had to go out of my comfort zone to gradually develop a sense of what makes a great UI. Every game is different, so the UI can’t be just a copy-paste schematic you found cool or useful in another game – an interesting challenge I was willing to take and made me feel more creative. It’s an area where a person can hardly fall into artist’s block and ideas tend to keep coming at a faster rate than when working on concept art.

So what is the UI? The User Interface for a game is a set of elements which communicate with the player so that he can understand and/or interact with what’s happening in the game. It can consist of health and shield bars, the player’s avatar, pop-up messages, animations that indicate a change in any player state in the game and more, depending on the type of the game you’re making. The UI usually consists of common graphics – panel, button, outline, icon, slider, customs decorations and of text. The UI gives feedback to the player either constantly (example: health bar) or event-based where the player has to hover over an object for a certain message to appear (example: interaction pop-up box).

 

User Interface vs User Experience – The never-ending battle

Prepare yourself for many iterations with the UI since the initial design will most likely never work out of the box. Why is that? Well, eventually UI will cross paths with User Experience (UX), aka the “destroyer of design”. But you shouldn’t take that as a bad thing. We need UX in order to communicate clearer with the player. UX takes it a step further and will most likely always be right. The design that seemed good to you at first is, when you boil it down, just a picture. A picture that needs to be tested, thoroughly scrutinized and optimized. Eventually, it becomes clearer once you try building the UI in the engine yourself or with somebody’s help.

 

So what makes up a great User Interface?

The simplest recipe for a great UI would be appropriate art style, logical and simple structure (layout), a font type everybody can read well and a color scheme that is easy on the eyes. In most cases that mean that you’ll see content covered with icons and their descriptions. In my personal opinion, flat design “speaks” more effectively with the player. It avoids clutter, enables readability and is easier to work on. Extra shading or effects usually stand out a bit more. But even though it can be visually appealing, we must be careful not to compromise readability.

What you need to consider:

  • Look at other UI designs for reference
  • Following a pattern is a good thing (example: UI layout, color scheme…), just don’t copy the entire thing
  • Make several quick suggestions before giving it in for a review
  • Pick your color scheme wisely – make a connection between the UI and the actual feel of the game
  • If you’re going for the Diablo 3 type design, then I strongly recommend working in grayscale first, then coloring later
  • Learn more about 9-slices and their advantages, especially in smaller games
  • Try making the UI yourself (Unity or any other engine you are working with) – it will give you more insight on how far you can go with your design, and also teach you the technical aspect of building it

What you need to look out for:

  • Don’t go too abstract on your design – simple is sometimes better than making the UI look like spaghetti you decided to throw on the floor, because you’re… umm, crazy
  • If your font is too stylish, chances are it will take up a lot more space than it should and people won’t be able to read your text

 

Zero Reflex vs Agenda – Two different worlds

user interface - ZR

Zero Reflex is a psychedelic evader with the simplest UI ever (in our studio). It’s simplicity at it’s finest. Almost every UI element is round like the evil eye the player has to go up against. Adding in any other shape would ruin the design’s flow. Even adding text seemed like overdoing it, so things are mostly communicated through icons. After much consideration though, and because it seemed cooler at the time, the UI elements are black with a touch of white or vice versa. This was done in order to avoid any conflict with the levels that come in multiple color variations.

 

user interface - agenda

Agenda, our strategy simulation game, is one of those projects that relies heavily on its UI. And is probably the only project we worked on that underwent a lot of makeovers. Designing the UI for Agenda was a bit more complex. The graphics were terribly hard to work with due to them being semi-transparent and sometimes even overlapping one another. But the UI really works well in Agenda because we managed to communicate the essence of the game, the UX is for another blog post though. Communicating the essence should be the number one thing to look out for when designing something in general.

user interface - agenda 2

 

My current struggle – Last Encounter

I’m currently working on our project called Last Encounter. Thanks to it I’ve gone through an even bigger challenge – learning the Unity engine so I can build my own prototypes and finalized versions of the UI. The challenge is far greater than in Zero Reflex and Agenda combined which has resulted in several major changes to the User Interface. It’s also the first time ever that I’m making a more detailed settings screen. Wish me luck!

user interface - last encounter

 

If I had to sum it up into one piece of advice? There are certainly some standards that need to be followed but that shouldn’t harm your creativity. If a design for a UI doesn’t work just try over and over until you and the others feel comfortable with it.

 

By Zlatka