Mobile Game Mock-up
At a Glance...
A UI concept design for a post-apocalyptic mobile game, developed from a provided wireframe. The main criteria of this project was to showcase my visual design and UI design capabilities in a limited time-frame.
Timeline
Software
4 Days
Adobe XD
Photoshop
Provided Wireframe
01 The Brief
To apply a premium UI style to the provided wireframe. This game is a post-apocalyptic city builder and card battler for mobile. The UI needs to be colourful and casual (think Supercell games) but it should also show signs of wear and tear. The project should reflect the competing styles without losing sight of the glossy and shiny heritage.
02 Art Style & Inspiration
As inspiration for the project, I sourced various images of mobile-games that reflected the two main themes of the brief. For the shiny, glossy and premium style, I found that Supercell games such as Clash Royale and Clash of Clans were suitable inspiration for font style and icon design. Whereas, games like Wasteland Lords and Fallout Shelter, served as useful explorations for colour way and texture which reflected the post-apocalyptic genre.
Supercell Games
Wasteland Lords
Fallout Shelter
03 Final Product
Through using Photoshop, I was able to create the brightly coloured and glossy buttons which highlighted the primary and secondary buttons of the game. For the tertiary buttons, I edited the provided SVGs with Adobe XD to add shading, texture and depth. This creates a hierarchy within the UI which puts an emphasis on the more dimensional primary and secondary buttons, in contrast to the tertiary elements.
​
The rusty and mossy colour scheme paired with the worn-out textures, reflects the post-apocalyptic theme without impacting the overall playful and brightly-coloured style of the game.
04 Reflection
This project was particularly enjoyable to work on as I am interested in video-games as a personal hobby, therefore being able to visualise a concept as a designer as well as from a user's point of view was a fun and valuable experience. I challenged myself creatively through experimenting with different textures such as glossy and shiny elements, in which I have not used before in my previous projects.
​
If given a longer time limit to complete this project, I would improve on having more consistency with glossy and 3 dimensional elements throughout the whole design. Moreover, I would expand the colour palette with darker elements to further emphasise the post-apocalyptic genre.
Skills Gained:
Photoshop (shiny & dimensional elements)
Adobe XD
UI Game Design