Hi, my name is Long Nguyen (Logan), a Mobile Game designer
Today, I'm excited to share my first article with you. I hope it will be helpful to those interested in mobile game design.
What This Article Provides
How I create wireframes when I don’t know where to start
Some experiences when making wireframes alongside UI designers
Let’s begin
Defining UI Objectives
I believe that anyone involved in the development process should understand these features — like their purpose, display mechanisms, and so on. As game designers, it’s our job to explain this to everyone.
Next, we need to define objectives, or a goal, a target for the UI
This UI needs a specific goal such as:
“Display the user’s current gold amount.”
“Make the user understand that to purchase this item, they need to spend gold.”
…
When you’ve identified the objective, it’s like having a compass. The improvements you make will serve the goal you’ve set.
Finding References
You don’t have to mimic anyone else; creativity is limitless. If you have an idea in mind, just go for it. But if you’re feeling a bit lost, this is for you.
Trust me, referring to other games— or even better, playing through many games — is something you should do to improve your sense of gaming. You know that if you do something repeatedly, you’ll master it.
Play games from big developers, publisher, depending on the game genre or style you’re aiming for.
Some names I recommend: Supercell, Habby, Appquantum, King, Rustylake,…
Image sources for your reference:
Pinterest (recommended)
Behance
Once you’ve defined your objective, you can search for references using keywords related to the goal you’ve just set.
Let’s take a small and simple example for this article; my objective is:
Design a shop UI with increasing value packs
IAP packages with different prices for different types of users
Then you can go to Pinterest with the keyword “Mobile Game UI Shop”.
Create your own filters with criteria suitable for your game, and from there, select the appropriate references.
After researching, you’ll identify some common points and patterns that games often use repeatedly or similarly (whether trending or effective).
As in the example above, we can derive some common characteristics:
The shop UI is often designed in a 3x2 layout.
Packages usually have increasing value levels.
Images are displayed to reflect the quantity of the package.
Prices should be prominent, with the currency symbol depending on the region.
The number of gems included in the package is displayed.
…
Then, your job is to filter and choose the criteria that fit the objectives you’re aiming for in your UI.
This is the art of being a Game Designer; you have to make decisions, and those decisions should have specific reasons so that you can provide answers — even if it’s as simple as “I like it that way.”
Wireframe + Documents
Usually, the UI will come with some features or mechanisms in the game. If so, you will need some accompanying documents to describe those features to the developers, and then provide the desired wireframe to the UI artist.
This wireframe represents the “desire” or “intention” of the Game Designer to the UI Designer. Continuously communicate and give feedback to them to achieve the best design for the game.
But for now, let’s keep it simple.
I often use Figma to create wireframes. As a game designer, you shouldn’t spend too much time deciding on colors, shapes, or delving too deeply into UI details (unless you’re working solo); let the UI Designer handle that.
Your job is to ensure the design:
Contains all the information you want.
Meets the objectives set.
Wireframes should be made in simple grayscale because it’s quick and easy to edit. You can flexibly adjust, add, or remove without spending too much time, repeating that many times until you feel satisfied (or get approval from your boss).
Let’s take an example: I want to create a wireframe for the game’s IAP shop.
I plan to make it into a 3x2 grid with cards that are progressively tiered.
I arrange the layout first, then design the cards, displaying all the information I need to have, and for the information I want to highlight, I bold it.
“**Note: The above is just a simple example because I don’t want the article to be too long. In reality, you will have to make it much more detailed. For instance, if the user doesn’t have enough money, the button might display in a different color or show a different warning. Consider this as a starting point.”
When you have a complete document and wireframe, share them with the developers and UI artists. They will provide feedback for improvements, and you — as a game designer — should work closely with them to ensure the design becomes better while still achieving the set objectives.
Do you know why? Because developers are the ones who code the features, so they are well aware of any cases where the design might be lacking or unstable. They will have their own perspectives. As someone who understands the game best, you should communicate with them continuously to refine the design and ensure everything runs smoothly.
Regarding UI designers, they have a very keen eye for UI/UX. They might not understand the game we’re working on as deeply as we do, so explain it to them and collaborate to further improve the design.
Flow, States, and VFX
Flow: You need to clearly design the navigation of the UI — how the screens will connect with each other, which buttons trigger which pop-ups, and under what circumstances? You’ll have to ask yourself many questions at this stage.
States: Are there any conditions that can affect the state of this UI element? For example, “the shop isn’t displayed until reaching Arena 1,” or “if the user doesn’t have enough currency, the button will be greyed out and non-interactive.” You need to be very careful at this step, as you might overlook some cases.
VFX: Of course, to make the game more colorful and dynamic, VFX (Visual Effects) are indispensable, even in the UI. A colorful, animated button will attract users more than a boring, static one, right? But don’t overdo it; everything should come together just enough, like a recipe for making a delicious cake.
Summary 📃
Creating a wireframe before handing it over to the UI designer will save a lot of time in the development process.
Game designers should prepare the wireframe thoroughly, carefully considering all scenarios.
Frequent communication is much more effective than only interacting through documents (but documents are still necessary).
“Oh, this has really become a long article. It’s my first time writing, and I didn’t think I could write this much. I hope my article will help those who are interested. If you have any comments or suggestions for the article, please leave them below. If you found it helpful, please leave me a like and a comment so I know 💌”