DEV Community


Tips for designing user interface for games

・2 min read

When we talk about user interface, we mean a lot more than just pretty screens with cute buttons. The process of creating an interface for the game can be divided into two parts:

UX Design - how the user interacts with the interface;
UI Design or GUI Design - the visual component, those very beautiful pictures and buttons.

UX Design
To understand in which direction to move, you first need to structure all thoughts regarding the project. At this stage, paper and pencil are enough.

It is necessary to write down all the key elements of the interface that must be in the game and that will affect the gameplay. Then you should break them down into intended screens: menu, setting, pause, store, screen during the game.

These will be very generalized groups to create visible logic with them. As a result, you should get some kind of a map or a tree. Over time, it can be refined, changed and improved.

Then we can move on to the first sketches of the interface (also on paper) to position all the elements inside the screens we want. Sketches on paper allow us to quickly work through different options and combinations in an attempt to find the most suitable one.

UI Design
I also work on the visual part of the interface in Adobe Xd, drawing directly on top of the prototype blocks. It is necessary to carefully work out the entire visual style, all states of various windows, buttons and icons.

In order not to collect a separate UI kit, where it is necessary to reflect all the components, font styles and colors, I prefer to bring the final version of the elements to the library in Adobe Xd. This greatly facilitates and speeds up the process.

Then, from this library, I build a separate artboard for export to Unity as a sprite atlas.


A few tips for creating interfaces
When designing an interface, it is very important to keep in mind the general style of both the interface and the game, and not go beyond it. This can be much more difficult than it sounds.
The interface should be clean and straightforward. You cannot overload it with unnecessary buttons and elements. If possible, it is better to group the excess in separate components.
Try to place accents correctly. If you want the player to click on a certain button instead of the others suggested, it should be made brighter and lighter, and the rest darker and dirtier. Guide the player, control his emotions.
Don't make the text too small. Even with excellent eyesight, when you have to peer at what is written, it becomes not very pleasant to play. Moreover, small text is poorly perceived on a subconscious level, and we often just skip it.

Discussion (0)