How to Design User Interfaces for Mobile Games in Figma

 

As with any other project, setting a tone through identity is important for you as a designer. You will have to define brand styles and identity that will appeal to the audience you are targeting. You must define both the design and expected functionality of your game for it to work successfully. The goal is for the whole game experience to feel consistent, creating a unified ecosystem of UI elements and gameplay assets that naturally flow together. 

Understand your Audience:

Once you know your audience, research their likes and dislikes, and try to determine what motivates them and what frustrates them. Create a mood board based on these findings to inspire the visual identity of your game.

Let’s review how adapting identity elements based on your market expectation and art direction can be able to make a big difference when enhancing your mobile game’s gameplay.

Let’s imagine we’re building a game for casual gamers, most of them being 15 years old and up- no gender in mind, and that might see mobile games as a way to pass time without any particular expectation. During user research audits, we noticed that as high school and college students are usually dealing with burnout due to exams and heavy assignment dates, they would be expecting to do activities that can be able to relax them or help them wind down from constant stress.

A possible outcome that could potentially help tackle this issue whilst accomplishing a game’s intention of entertainment would be a simulation, as these come out as both relaxing and fun enough to pass time. We can take a look at Stardew Valley Mobile for instance! To use as reference on how this game has managed to portray a successful and immersive (and relaxing) experience.

Color Theory:

Now that you have a concept for a farming mobile game simulation, what would be the best way to portray a UI that manages to integrate the artistic concepts? Let’s break each style element down and find out.

Due to this game’s case particularly, we’d like to go with organic and earthy tones since its core concept art relies mostly with a natural vibe. Psychologically, having nature inspired tone palettes can also be able to provide a sense of calmness and relaxation.

 

As you might’ve noticed, both audience’s needs and concept direction can be essential aspects that are able to determine the color scheme of your mobile game. Say – if we’re creating a gamified app for children, our audience would be primarily focused on vivid, colorful, and even gentle color palettes in order to maintain their attention throughout the gameplay, think about your favorite book or movie from your childhood!

Same goes for more niche target audiences, such as teenage boys that might have more interest in first person shooter games, this group might be expecting darker and more muted colors that may reflect or compliment the scenery found in the gameplay.

A big challenge with designing a game interface is that the interface controls will need to stand out visibly against the gameplay imagery. Keep in mind that scenery and environment may vary greatly over the course of a game, so you’ll have to factor that in as you create the structure for your interface. Consider applying dropshadows, overlays, or outlines to ensure your elements stand out even against dynamic backgrounds. 

Remember to mix and match your UI palettes with complementary colors that might enrich your gameplay visually as well by using direct reference from the actual game concept. There are now online tools available to play with color wheels in order to decide your supplementary colors. Have fun! 

Typographies:

Layouts play a big aspect of UI, it affects how users perceive the information they’re receiving. Remember that in games, you need to provide the right information by balancing familiarity and intuitiveness with creative arrangements. Having your color schemes in mind, you’d want to complement your visual information with matching typography.

Going back to our farming simulation game, it’s important to mention that Stardew Valley’s creator Eric Barome wanted to portray a similar aesthetic and experience as previous games he had played in earlier years, when arcade-pixel games were still a big part of the gaming design demographic. Having this key referential concept, it’d be logical to find fonts for the project’s gameplay to evoke a nostalgic pixel feeling. This contributes to the game’s organic look.

Just like color, typography also plays a very important role when defining your game’s personality and enhancing your UI. While you may be tempted to use fun or unconventional typefaces in your gameplay, keep in mind they will also need to be easily legible and able to be ready by a screen reader for those with visual impairments.

Typographies are the channel in which your player would be able to see, read, and understand text easily. Unreadable text makes interfaces difficult to use and understand, and if a game or interface has poor usability, the player will leave.

Make sure to make your texts large enough to read, be as concise as possible when delivering information, and remember to use color contrast wisely in order to comply correctly with mobile accessibility for players that might suffer from visual impairments.

Visuals are the most important aspect when it comes to getting your product out there, so by creating compelling visuals, you’re not only going to be able to deliver a well-done product, you’d be also working for a way to start getting your game out there, as most downloads are usually influenced by how well the screenshots on the app stores look!