Creating user interfaces is one of the most important tasks in game development. Let's talk about this process based on his experience and gave some practical advice.

Contents

UI and Spine 2D animation Magical Marketing
Creating user interfaces is one of the most important tasks in game development

Creating user interfaces is one of the most important tasks in game development. Let's talk about this process based on his experience and gave some practical advice.

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 within the screens we need. Sketches on paper allow us to quickly work through different options and combinations in an attempt to find the most suitable one.

Prototype

Next, we can move on to the application, which will allow us to arrange all our developments into an understandable prototype from simple gray blocks. I prefer to use Adobe XD, but any of its counterparts like Figma, Sketch, InVision and others will do.

The beauty of these editors is that, in addition to simple sketches, they can be used to assemble interactive prototypes, create connections between objects and windows, and then test there. This will allow you to see a lot of problems early on and quickly fix them.

Unity interface prototype

After we are done with the design, I move on to building a prototype interface in a game engine on a real project. This stage allows me to check my developments directly in the game itself and, probably, identify problems that I missed earlier.

In my projects, I use the Unity engine and its standard UI components. I save buttons and other parts of the interface as prefabs. This will allow in the future, when I add graphics, not to rebuild the interface again, but just rather quickly modify the already existing working version for the further spine 2D animation.

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.

For better optimization, the artboard size should be set to 512 × 512, 1024 × 1204, or 2048 × 2048. If there are too many elements, it is better to use several small artboards than one large one. This will make the final size much smaller in Unity.