UI Study Part 1

UI Study Part 1

UI study is a series where I would like to work on some exercises to keep on engaging myself with different aspects of the user interface for various platforms. Part 1 here is focused on two modules for a fantasy mobile game, Characters upgrade and Shop.

Following is the UI mockup for the characters screen in a multiplayer strategy mobile game. The world is fantasy based and the user can view the characters inside the squad here in this screen. Each character has its own level bar that progresses along the game and also based upon the particular character’s involvement. Completing a certain and moving on to next level unlocks certain rewards and abilities.

– Game characters display –

– Game characters display –

Tapping on a particular character thumb above opens up the detailed overview of that character in the mockup below. This mockup is just displaying the special ability that the character holds plus various attributes like health, damage etc. This mockup is currently missing the feature to make it such so that all the upgrades to that character can be done simply through this single screen. Abilities unlocked and the ones locked should also be available here for the user to see what they want to unlock next. Attributes should be upgradable via spending coins from the inventory maybe. So I will be adding those missing parts and then will be doing a comparison of both the current and the latest one soon.

– Particular character abilities and upgrades –

– Particular character abilities and upgrades –

The shop screen mockup that follows up involved the design of coins categories available in 3D. I wanted to create the available coins choices with clear distinguish visuals rather then working around with different numbers and the same design. So I did quick 3D models and then rendered them out to be used inside the UI to maintain the coherence throughout. The whole art style is focused on basically a stylized form of graphics, consider Clash of Clans type but with a bit serious tone to it.

– Ingame shop screen –

– Ingame shop screen –

Pile of gold

Pile of gold

Chalice of gold

Chalice of gold

Chest of gold

Chest of gold

Crate of gold

Crate of gold

– 3D modeling and rendering of the gold coins bundles –

– 3D modeling and rendering of the gold coins bundles –

Let's Talk

awais.maqsood.v@gmail.com

+46 76 0965211

Stockholm, Sweden