Intro
Imagine a game with beautiful graphics and tight controls, but the text is barely readable, the icons don’t make sense, and many useful features are buried in clunky menus. Doesn’t sound so fun, does it? Obviously, the quality of the user interface can make or break a game. Therefore, If you want to make games, you will need to have UX/UI design skills. So what’s this jargon all about? In the first part of the lesson I explain the terms and what they focus on. After the basics we get into designing UI assets that commonly appear in games.
UX vs UI Design
UX refers to user experience and UI is the user interface. I’m sure most of you are familiar with these terms, but there seems to be a lot of confusion about the difference between the two. Well, here’s the way I see it.
UX - User experience involves the feel of the design determined by how the user interacts with the visuals. Furthermore, UX design focuses on the feel of the design and the user’s overall experience with it. For example, how easy is it to save your game, change your gear, disable audio, and accomplish various desired tasks? These are some of the concerns of UX design.
Design goals of UX design
• Intuitive and easy to use - The user can smoothly navigate the interface without thinking.
• Interaction feels satisfying - The experience gives you the right thing at the right time.
• Fast and responsive - Smooth, prompt functionality keeps the user from disengaging the habit.
UI - User interface is all the actual visual assets the user interacts with, for example, gauges, fonts, icons, and menus. UI design is the practice of creating these assets and incorporating them into the interface in a manner that is intuitive and smoothly guides the user through the experience.
Design goals of UI design
• Consistent visual language - Color, shape, size, fonts, and positioning of all UI elements should follow consistent rules to bring order and distinct character to your game.
• Aesthetics fit the game concept - Visual style matches the mood of game and the means of implementation intuitively informs gameplay.
•Highly readable, not distracting - Graphically reads well in all situations but does not hinder gameplay and engagement.
As you can see, these disciplines overlap and are both necessary for a successful design. Unreadable text and awkward button placement are examples of bad UI that consequently makes for a bad UX. Conversely, no matter how beautiful the UI looks, it won’t make up for bad UX, such as long loading times and overly complicated menu trees.
PLayer Health
Representation of the player’s health status is one of the most common ui assets. Here’s a look at some general styles and how to make them unique to your game.
Every style has pros and cons. Use a style that is most intuitive for the gameplay. Large unique shapes like hearts are graphically charming, but lack technical accuracy, and take up quite a bit of space on screen. On the other hand, numbers are very accurate, but hard to read in the heat of the moment.
Iterate the design to create something unique that visually and conceptually fits your game. This can be done by manipulating basic design elements such as color, shape, and orientation. Some games go beyond basic shapes and use more conceptual representations of player health. For example, in Doom you see the character’s face turn more bruised and bloody as the health percentage drops. In Aladdin for the Sega Mega Drive the player health is represented by the amount of smoke coming from a genie lamp. I always appreciate creative ideas like this, but you must be careful the gauge is still readable.
Player heath is usually the most important status to keep your eye on. Therefore, It should always be readable but never distracting to gameplay and the user’s engagement in the experience.
Common Resources
Beyond player health there are several resources you often see used in games. Let’s explore some common resources to help inspire your game UI!
However you choose to represent your mechanics in the UI, make sure to follow the aforementioned design goals and make sure everything is consistent. For example, it would be odd to mix different styles of gauges in the same UI, like vertical and horizontal styles. However, in the case of unique mechanics it can be intuitive to represent them in all in a unique manner.
As for animating your UI, remember function comes first. Although these animations look neat, they could be distracting. If you are directly controlling a character you can see on screen, strong feedback is usually displayed over the actual sprite, and a funky UI could actually distract from where you’re supposed to be focusing. But, you’d have to really push it, and any life you can give the UI with animation is generally welcome.
FINAL THOUGHTS
UX/UI design may not seem like the most exciting aspect of making a game but it’s surprisingly fun! While it can be tedious to create an effective and consistent UI, it’s extremely satisfying to see it functioning properly. Much of a game’s character and professional polish shines through in the UI. Therefore, it’s important to treat the UI with just as much passion as the gameplay, character animations, or any other aspect of the game.
There’s much more to be covered on UX and UI. I hope to continue this topic in an upcoming Pixelblog!
RESOURCES
Was this article helpful? If you find value in my content please consider becoming a Patreon member. Among many other rewards, Pixel Insider members get extra resources to compliment my tutorials. But most importantly, you allow me to continue making new content.
This month I’m sharing UX/UI Assets Pack, which includes all the UI assets presented in this article. Have fun using these in your pixel art studies or personal game dev projects.
My top patrons can also download the Tutorial 68 Source File, which reveals exactly how I set up my project and synced the animation in Photoshop.
Get caught up on all my downloads
If you're not ready to commit to the subscription model of Patreon, make a one-time donation and receive exclusive art and resources. Help continue the content by providing me a living. Thank you!
-By Raymond Schlitter