How to find a UI theme for your game
The first thing I hear when I talk about my job as a UI artist is usually: “oh, you are the person that creates buttons and pop-ups…” and I bet this has happened to most UI people out there.
We create buttons and pop-ups (icons too!) but our job is much more than that and being labeled as just the button-making person is sort of funny.
Working as a UI designer made me realise that everything in the game is UI and UX. If you design a bad menu, the entire experience can be ruined and players might stop playing your game entirely as they wait for a patch to fix the UI/UX issues (The Witcher 3, anyone?)
Having a UI that looks generic or doesn’t visually fit the theme of the game could also make your game look not as good as others, thus losing player mindshare. Imagine having a Super Mario game — a series known to be fresh, colourful, and fun — with the UI visuals of any Bloodborne or Soulslike game. It will instantly look off to anyone, and the same would apply to a Soulslike game with the UI visuals of a Super Mario game.
Ultimately, a cohesive visual language helps the players to be more engaged because it keeps them immersed in the game world. It may seem like just a small thing, but a lot of thinking actually goes into why a certain UI style works for a casual game but wouldn’t work for a game like World of Warcraft.
So, here are three steps on how to find a UI style that matches your game aesthetics.
Step 1: Research
At Mighty Bear Games, we really care about having cohesive visual languages in our games, and our merge game, Best Friends Café, was no exception. While we only ever released the intro of Best Friends Cafe, we still built a fun, colourful, cute, and cozy little merge game. But so much work went into just that first portion! When I first joined the team, the UI looked like that:
The game was in pre-production and although there were a few concepts and mood pieces, its style just wasn’t there yet. The project needed some UI and push on the art direction!
So first thing first: talk to your Product Owners (POs). They know best what they want and what the vision of the game is. If possible, drag the art director into the meeting with you too! It’s important that the team is on the same page about the game’s vision.
Once you understand the vision and theme of the game — in our case it was building a casual, heartwarming cooking game with merge mechanics and light narrative — you can start the fun part: research with the art team!
Don’t work alone! Even if you are the only UI person in the project, remember that you are in a team. So talk to your peers and share your findings. We used Miro to create mood and documentation boards to share within the team, and if you haven’t heard of Miro yet this is a great tool. It is easy to learn, and great for sharing documentation and boards across a team.
I always propose three very different directions/mood boards to kick things off. In our case: A board with flat UI, graphical and minimalistic. A second board with skeuomorphic design elements, and the third board with very casual-looking visuals, with thick outlines and chunky fonts.
Step 2: Concepting
Now that we have our three different mood boards, we can create three different concepts of the UI based on these mood boards.
During this phase, what we want is to set the mood and style of the UI.
It’s about finding the right mood/visuals/theme rather than functionality or render quality.
This is the phase where you can use all your creativity, so go crazy!
If you are wondering why these UI concepts can be quick and dirty, the answer is easy: these first concepts will likely be all thrown away but they will build the foundations that will allow you to find your game’s final UI style. This phase can involve a lot of exploration, but you will start to build a visual direction based on the previous concepts. Your final candidate will likely be a combination of colors, textures, and shapes of the previous pitches.
If you’re new to the business, you might struggle with deciding which screen final concepts should be based on, especially if the game is ata very early stage and there aren’t any mockups from the game designers.
But I assure you, all the answers are actually out there!
First of all, check with your team if any design or UX mockups are ready (usually the answer is yes) and if not… play any game that has similar mechanics (or watch a YouTube video). Most casual games have a very similar layout when it comes to pop-ups and HUD structure. Also, keep in mind that this is just a concept piece to sell the theme of the UI and it doesn’t have to represent the final layout. Choose a screen that you think is important for the game and create a few concepts based on the three different mood boards.
Rendering and final touches:
Congrats! After several iterations and feedback rounds, you’re now ready for the final push. This is my favorite thing to do as a UI artist: polish the UI concept and transfer the style to different screens!
This is a personal preference, but I always skin the main HUD of the game, one large pop-up with menus and buttons in it, and one smaller pop-up, like an alert. I think these are the best screens to see if the style works well with the rest of the game's aesthetics.
During this phase, I typically polish the concept piece, and experiment with texturing, rendering and button style, iconography, and visual effects.
Always keep your art director and the rest of the art team looped in, and don’t forget to check in with dev/tech art to clarify any requirements for the UI (blurry background anyone?) and to figure out what’s possible.
Beyond that… Et voilà! With the end of this phase, you’ll have found the UI theme for the game! This might not be the final look, but you’ll have something that is good enough to be tested in Unity and submitted to the team to play with.
Here’s a quick summary of what I laid out above:
Initial development phase:
- Understand the vision of the game
- Talk to POs and the Art director (keep them always in the loop)
- Collect inspirational refs and share it with the team (we used Miro)
- Create three different mood boards with three different styles
Concept phase:
- Concept fast (quick and dirty) in order to find a direction
- No need to go into details during this phase
- High-level concepts of the same screen (a generic pop-up?) in a different style
- Check on competitors for layouts and recurring patterns in the design
- Focus on finding the right UI theme/tone rather than functionality
Rendering and final touches:
- Create different screens based on the found direction
- Start talking with the developers and tech artists about the UI requirements
- Test in-game
- Iterate! The UI will keep changing here and there during the pre-production phase of the project
- Take some deep breaths and have fun!
I hope it is now apparent that UI is more than just creating buttons with rounder corners and menus. UI is about creating a seamless experience for player by delivering a product that is visually cohesive in every aspect.
Remember, keep the UI as part of the world-building of the game. This will make your game look better, feel polished, and thus appear more valuable to the eye of the players.
Thank you for sticking with me to the end!
Ciao!
