justinmind

Mobile game UI design: inspiring examples for UI designers

Mobile game UI design - examples and tips

Mobile game UI design is exciting, but what hooks users from the start? Let’s see what the best in the market do and how we can apply it

When you’re so engrossed in a mobile game that you can’t put your phone down, that’s when you know it’s a good one. The question is, what do these games have that attract so many players? The resounding answer is awesome mobile game UI design.

Create mobile game UI designs in Justinmind
Download Free

Stunning visuals, intuitive controls and rich story arcs are all down to the mobile game designer. If you want to learn more about great mobile game UI design and how you can do it with a prototyping tool like Justinmind, read on for these great examples!

10 examples of perfect mobile game design

1. Candy Crush Saga

Everyone’s heard about Candy Crush Saga. Whether you’ve witnessed other commuters playing it on the subway or you’re addicted yourself, there’s no doubt that this mobile game UI design did something right to take the world by storm.

Candy Crush Saga, which is best played with your mobile device in portrait mode (it might be a bit difficult for the thumbs otherwise) boasted more than 2.7 billion downloads just five years after being released!

Mobile game UI design - Candy Crush splash page

There has to be a reason why a simple tetris-like game played with candy can captivate such a grand and loyal following. The answer, of course, lies in the UI design. Its UI consists of an instantly recognizable bold, colorful design, with captivating cartoon iconography. The user experience is also second-to-none.

It’s one of many great user onboarding examples, guiding the user from the start and congratulating them for achieving simple actions regularly. Users also get a visual demonstration of how to line candy up in a row to crush it so the user just has to swipe with a finger or thumb, giving it a high degree of learnability.

However, perhaps the best thing is the message the UI sends out: the emphasis isn’t so much on competitiveness, but rather focused on helping the user relax. it’s opening phrase is “swipe, match, relax”.

2. Sky: Children of the Light

Sky: Children of the Light is a little different. The mobile game UI design is so awe-inspiring it’s hard to imagine that it’s for free. While its dazzling 3D graphics means it’s a little chunky to download, it’s still managed to gain worldwide popularity. In fact, it was Apple’s game of the year in 2019!

So what did this indie game developer, Thatgamecompany.com get right? Let’s take a look at the idea behind the game itself. Like most RPGs, there’s a story to it, but it’s not long and drawn out, it’s actually very easy to follow. The stars didn’t listen to their maker and fell out of the sky. The user, as a child of the light, has to help put them back again.

Mobile game UI design - Sky: Children of the Light, example of open world

As for this mobile game’s UI design, the emphasis is on offering the user a window into a fantasy world, creating a relaxing, immersive experience with the user’s mobile device in landscape mode.

The onboarding is perfect, setting the character off on the adventure immediately, demonstrating simple gestures to the user in seconds, such as swiping to look around the 360 degree world on the right or moving forwards and backwards with the left thumb. Meanwhile, the HUD controls are kept to an absolute minimum.

Who’d have thought that RPGs can be relaxing?

3. Angry Birds

Angry Birds, inspired by the 2009 flash game Crush the Castle, needs zero introduction. In fact, this mobile game UI design has become so popular, there’s even an Angry Birds movie!

This basis of this mobile game UI design is that the user slingshots wingless, stylized birds into enemy pigs and their built-up structures. Funny animal noises and expressions throughout this puzzle-based game provide the user with entertainment.

Mobile game UI design - Angry Birds 2, download poster

The rules are simple – just sling the birds! However the controls are advanced, with the UI being very responsive to user gestures. It’s all down to the user’s fine motor movement, along with their ability to calculate the angle of the sling with respect to the pigs’ structures. Meanwhile, the level backgrounds are kept as simple vector illustrations.

4. Kick the Buddy

There’s no shortage of individuals who can come up with strange ideas for games on the app markets. Nevertheless, none of these niche games has had quite the ripple effect throughout the market as Kick the Buddy.

It doesn’t fit most classic genres: it’s not a puzzle, it’s not a side-scroller, nor is it an RPG. Yet its UI still has the amazing ability to get the user hooked, with over one hundred million downloads as of May 2020 on Google Play.

The idea behind the game is quite simple: the user vents their frustrations by assaulting a doll called Buddy as quickly and creatively as possible.

Mobile game UI design - Kick the Buddy, gameplay with dinosaur and carnivorous plant

The background is static – just a box with a doll inside it (Buddy). The only moving elements is Buddy himself and whatever you’re trying to injure him with, be it a rocket-launching robot, dinosaurs or evil gods. Sounds quite simple to design, but the success is in the detail.

Buddy is responsive to the user’s gestures and mimics real-world physics very well. The user can stretch Buddy’s limbs and head, pound him and throw him against the floor and ceiling. As Buddy gets damaged, his appearance changes, becoming covered in bandaids and getting black eyes, all the while using a frustratingly cringy voice to egg the user on. Top points for user feedback!

This simple, yet effective mobile game UI design works. With responsive controls and by playing on the user’s emotions – it gives them a channel to unleash their frustrations.

5. Temple Run

Temple Run is a 2.5D game that has you jogging for your life through ancient temples, Indiana Jones-style, with amazing background detail.

The camera angle is set behind the player’s avatar, making it an excellent mobile game for portrait mode. The focus of the interaction is on the player helping the avatar make the appropriate twists and turns to exit the temple unscathed, as they run.

Mobile game UI design - Temple Run, Earth Day splash page

All this is done via simple swiping and tilt gestures that the user learns immediately as the first level starts. The onboarding instructions include simple pointers on the actions they should take to avoid each obstacle.

The fact that the scenes are very different each time and that the levels quickly start to become more challenging means the user is always engaged in a fast moving game, without having to focus on much more than making simple twists and turns. The HUD is also kept to a minimum. Top points for creating an immersive mobile game UI design!

6. Letter Bounce crossword game

Letter Bounce is a fun and simple Turbo Chilli crossword game available for iOS and Android. Users solve crossword-style puzzles using pairs of letters to fill in the blanks.

Let’s start by taking a look at the mobile game’s UI design. The first thing you’ll notice is the amazing use of color and gradient. As you level up through the game, the background layer transitions between beautifully blended gradients.

mobile-game-design-example-letter-bounce

The color contrast between the background layer and the UI elements in the foreground helps with scannability and readability.

Find out more about boosting your conversion rates by using the right UI colors in your designs.

Now on to interaction. Letter bounce uses a series of charming micro-interactions that provide feedback on the state of play. Each time you fill in one of the blanks by tapping on the correct letter, the letter slides into place, and performs a slight rotation movement and changes color to highlight the change on the screen.

Above, your level and points increase as you complete new words, with delightful exploding star micro-interactions that feel like a mini reward for leveling up. This combination of user action and system feedback is what brings the game to life and helps keep the user engaged.

Finally, check out the bottom of the UI. You’ll find two icons: a hamburger menu on the left, and a light bulb on the right. When tapped, the hamburger expands, offering a set of navigation options (a neat way of helping the user navigate the app). The light bulb icon offers the user helpful hints on how to fill in the blanks correctly.

7. Badland action adventure game

Badland guides a nondescript creature through creepy and perilous environments, filled with traps, puzzles and obstacles. Badland was the winner of Apple’s design prize for mobile games 2013. 5 years later, this action adventure game by Frogmind is still going strong.

mobile-game-design-example-badland

Badland is a side scrolling mobile game. This means that the gameplay action is viewed from a side-view camera angle (landscape mode on a smartphone), allowing for deeper environments with parallax detail and more-defined visuals than top-down alternatives. Additionally, swiping back and forth across the screen in landscape mode allows you to reach far more depth and detail within the game’s levels.

There’s a right way and a wrong way to do tap and swipe on mobile - check out our post on tap or swipe gestures to learn more!

Badland’s seamless side scrolling experience is combined with stunning atmospheric graphics and animations. These hand-painted worlds, with UI elements that move at different speeds across the screen, creates a long-term narrative journey through the game’s winding levels.

Finally, the game’s elegant controls and frequent checkpoints offer users some really helpful interaction feedback as they play.

8. Machinarium adventure game

Machinarium is an independent full-length adventure mobile game that follows Josef the robot who is trying to save his girlfriend, Berta, from the Black Cap Brotherhood gang, in a post-apocalyptic world.

mobile-game-design-example-machinarium-1

It’s the hand-drawn graphics that we love most about this mobile puzzle game. No wonder its creators, Amanita Design took the Independent Games Festival Excellence in Visual Art award 2012.

mobile-game-design-example-machinarium-2

But these charming visual details, which look like a mashup of the Grim Fandango game and the film Wall-E, serve a more important purpose than simply making the Justinmind team go “ooh, aww”. The game’s designer and founder, Jakub Dvorsky explains that the graphics contribute to the game’s narrative and gives each character and item its own history and meaning.

Jakub and team have used a digital alternative to the classic cut-out animation technique. The traditional technique consists in painting all parts of a character’s body separately, cutting them out with scissors, and then animating them frame-by-frame under the camera. No cameras were used in the making of Machinarium though – just good, old fashioned computers.

9. Alto’s Odyssey endless runner game

Alto’s Odyssey is the sequel to Alto’s Adventure (the endless runner genre). The game sees its sandboarding protagonist “glide, grind across vines, bounce atop hot air balloons, ride towering rock walls, and escape mischievous lemurs” through a vast and unexplored desert.

Right off the bat, there’s something calming and serene about the game’s aesthetics. Fine geometric shapes and beautiful illustrations are combined with dynamic color palettes, tonal scenery and low poly landscapes.

mobile-game-design-example-altos-odyssey

Delightful animation, such as birds and plants swaying as you go past them, also adds a certain charm to the mobile game’s UI. Note that this is another side scrolling game, which allows you to soak up everything going on in the game in more detail.

Also, check out the game’s Zen Mode. Complete with its own soundtrack, Zen Mode takes away all the obstacles and lets you glide indefinitely, soaking up the stunning visuals. Just watch – no scores, no coins, no power-ups – and enjoy. Relax mode on.

10. UI design for Samorost 3 exploration game

Samorost 3 is another mobile game with Amanita Design. Samorost 3 is an exploration adventure and puzzle game, following a curious space-faring gnome who uses the powers of a magic flute to travel across the cosmos to worlds of overgrown wood and rusted metal in search of its mysterious origins. Adorable or what?

mobile-game-design-example-samorost-3

Once again, Amanita Design has created a deeply immersive experience that does a great job of non-verbal storytelling in UI design. Designer Jakub Dvorsky’s blends manipulated photography and hand-drawn environments to conjure up his charming characters and their world of foreign flora and fauna. Learn more about the importance of storytelling in UI design here.

Similarly to Machinarium, the characters in Samorost 3 move like cut-out puppets across the screen, gliding across the detailed landscapes. A mobile game version of “Where the wild things are” (the book, not the film) springs to mind.

Considerations for mobile game UI design

Before you start your mobile game UI design, it’s important to establish what the premise of your game will be, as it makes all the difference to the UI design. Take the following into consideration:

  • How will your user interact with the game and vice versa? What gestures will the game require from the user? Will there be enough screen real estate for these gestures on the screen?
  • What screen orientation will users primarily be using on their mobile devices to play your game? This will affect the layout, control options and gestures of your mobile game UI.
  • Make sure that these controls are consistent throughout the game.
  • What dimensions will your game take? Will it be a side-scroller, 2.5D or 3D? This will affect the complexity of your mobile game UI’s graphic design.

Lastly, take into account Fitts’s law when designing in-game and menu controls. Fitts’s law states that bigger items, closer up are easier to hit, while smaller ones further away are more difficult to hit. For example, make the movement panel large enough for regular comfortable use, but make the menu or exit button small and further away from the user’s thumbs.

Mobile game UI design tips

When prototyping your game’s screens with a tool like Justinmind, keep adding information to your game’s screen until you have occupied enough space. Next, try to arrange that information in the most intuitive way possible.

See what does and doesn’t need to be displayed. Then see what you can take out and how to save as much screen real estate as possible, while leaving only the most crucial information and controls.

Mobile game design inspiring examples – conclusion

When it comes to mobile game design you need to bring your A game. Like anything mobile app, if users don’t click with your game, they’ll simply uninstall.

Getting mobile game design right the first time is easy: keep it simple, document your ideas, get user feedback and always create a prototype! If you’re a first-time mobile game designer, or are looking for the best tool to help you create awesome games, we recommend trying out Justinmind prototyping tool.

With drag and drop widgets, rich, interactive gestures and transitions, and built-in user testing capability, Justinmind is the game designer’s best friend.

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast