Mobile Game UI Design & Art

Creating UI design for mobile game like Treasureland was a great challenge that we really wanted to complete perfect. Achieving the result above including the 2D game art package and the final looks of the UI were possible only due to the established game art workflow, meticulous art direction and a full cooperation of our partners from Mangocoinz. Everything – to make the user experience in this game atmospheric and memorable.

‍

What is the essence of mobile game UI design?

UI or User Interface is the visual interface that the player uses to interact with the game. It helps them get information, navigate the game world, and accomplish goals. It can be a hud overlay on top of the gameplay, level maps, character select screens, skill trees, lore text windows. Any kind of element that provides information that the player needs to know. UI is often confused with UX (User Experience), which is a broad term that refers to the entire gameplay experience. But they're two different concepts, with UI often considered a part of UX. While UX focuses on the psychological side of the player's interaction with the game, UI design focuses on the visual elements that make that interaction possible. Let’s take a closer look at what makes a good UI and the challenges behind it. 

‍

The challenges of designing UI for mobile games

The biggest challenge when designing the UI of a mobile game is the limited screen space. Because of this, the UI has to be designed so that it only shows the player information that's relevant at the moment. This means we need to discern between what's nice to have and what's essential and focus on the latter. UI design for mobile games is trickier than UI design for non-game apps. In games, the player needs to use it easily without being too distracted from the action, and unlike most non-game apps, speed of use matters a lot. Finetuning a mobile game UI can be a delicate balancing act, one that can influence a lot of the player's experience - it doesn't matter how great are the mechanics of a game if the control buttons are too small, the player can't reach them, or the text font is hard to read. 

Games with a portrait orientation are the trickiest since the player can only use one thumb and the top-left corner of the screen is hard to access. Good UI design takes this into account and is built around this limitation. For example, a game in portrait orientation with a good UI wouldn't have buttons that need to be quickly accessed on the top-left corner. However, a settings button that rarely needs to be used would be fine there. 

‍

What makes a good UI design?

Good UI design efficiently communicates information in a way that the player can understand. To do so, it's important to know for what kind of players we're designing it and understand their expectations. Different genres are played by different types of people, and while hardcore players could like to have plenty of information at their fingertips, casual players might easily get overwhelmed by a complex UI. At the same time, games in which the player has to keep track of a lot of information need a more complex IU (like in Strategy games) while games focused on the action benefit from a simpler one (like platformers). 

 An excellent UI is also consistent in its colors and shapes in addition to that. Once the player associates a certain button shape and color with some type of action - like a blue diamond meaning leveling up a skill - they will easily understand it every time the same shape and color appears. If we use a different kind of button every time, it makes it harder to navigate the game. A good UI design also matches the look and feel of the game. If it's a sci-fi game, the user interface might look futuristic; if it's a candy-themed game the UI might look like made of candy, and so on. The best UI designs merge seamlessly with the game and keep the player immersed while providing all the information they need. 

‍

Taking mobile game UI to the next level 

To make UI more user friendly, we can use motion graphics and/or VFX to make it come to life. These can be anything from sparks when pressing a button to windows that move when opening them. Besides adding interest, they can also subtly indicate to the player what actions should they take next, like a glare on a button indicating to the player that this is the one they should use. But these animations have to be handled with care: They need to be immediately triggered and they should also be congruent with the look and feel of the game. If they miss any of these, the motion graphics will feel out of place and break the immersion. 

They also shouldn't interfere with communicating information to the player. It's nice to have a confetti effect when a window with the level score appears after finishing a level, but if the confetti is so thick it doesn't let the player see their score number then we're doing something wrong. Lastly, adding sound effects to the UI is a trick that can make it feel more real and responsive. It adds a new sense to the interaction (sound) and makes it more satisfying to use.  In addition, sound effects can help inform the player of what's going on: by associating certain sounds with certain situations, it can help the player understand what's going on beyond what the visuals are telling them. 

These can also enhance the look and feel of the game - again, if we had a sci-fi game with a sci-fi UI, we could use futuristic sound effects with every UI interaction. However, some mobile players play without sound, so it's better not to rely exclusively on sound effects to convey important information. That said, we should always keep in mind that while motion graphics and sound effects make the UI more fun, they can't save a poorly designed UI. If the UI isn't well designed, no amount of sparks and noises will fix it!

See also:

- Complete guide to game art outsourcing in 2022

- What makes Match 3 games so addictive?

- How much does it cost to develop a game

- 3d character modeling complete guide

- How to choose the best art style for your game

‍