The state of play: five awesome examples of mobile game design to inspire UI/UX designers
When you’re so addicted to a mobile game that you can’t put your phone down, that’s when you know it’s a good one. Great mobile games come in all shapes and sizes – from simple, catchy games like Candy Crush Saga and Hearthstone to more advanced ones like Dark Souls and Battletoads.
But what’s one thing all these games have in common? Awesome mobile game design. Stunning visuals, intuitive controls and rich story arcs are all down to the mobile game designer. *Teach me your ways master!*
If you want to learn how to design mobile games that hook users and transform the subway commute into playtime, read on! Here Justinmind explores 5 awesome mobile games and just how their designers got them to look and feel so special.
5 examples of perfect mobile game design
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.
The color contrast between the background layer and the UI elements in the foreground helps with scannability and readability. Read more about using the right UI colors in your designs here.
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 lightbulb 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 lightbulb icon offers the user helpful hints on how to fill in the blanks correctly.
iOS rating: 4.5/5
Android rating: 4/5
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.
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. Learn how to design with swipe mobile gestures here.
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, journey creates a long-term narrative through the game’s winding levels.
Finally, the game’s elegant controls and frequent checkpoints offer users some really helpful feedback as they play. Learn more about providing your game users with feedback and visual cues here.
iOS rating: 4.5/5
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.
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.
But these charming visual details, which look like a mash up 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 Dvorský 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 J
iOS rating: 4.3/5
Android rating: 4.5/5
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 lowpoly landscapes.
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.
iOS rating: 4.7/5
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?
Once again, Amanita Design has created a deeply immersive experience that does a great job of non-verbal storytelling. 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.
iOS rating: 4.4/5
Android rating: 4.7/5
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. Download your free version here now!