Wireframes for Mech Builders

Mech Builders is puzzle game where you unlock mech parts to build a fighting robot with which to crush your enemies! At the start of the game, you are shown the power level and stats of the mech you will be battling against, before being taken to a puzzle select screen. If you are successful in beating the puzzle you gain a new part to use for your mech. However, you can choose to try a harder version of the same puzzle to have a chance of receiving an upgraded part. If you opt to do so, and fail to complete the puzzle, then you will lose the part you chose to risk.

Once you have completed all the possible levels for the mech match, the two mechs will fight each other until one of them falls apart and loses. To progress in the game you have to build bigger and better mechs, defeating powerful foes along your way to dominance.

My initial sketches

I initially designed my wireframes on paper, so I could get my first ideas down to be iterated upon. Then, I moved into Axure to create digital wireframes of each of the five screens.

Title Screen

The first screen I created was the title screen. I kept all the key buttons the player would need in the centre of the screen. By surrounding those buttons with cogs on either side and an image of a selection of mechs in the game at the bottom, I can draw the eye into the middle of the screen, making the menu options easy to find.

Enemy Mech Stats

Once the player has opted to start a new level, they are shown the stats of the enemy that they are going to be attempting to defeat. They can view this screen any time from the pause menu, so that players do not need to memorise a lot of information as they play. On the left, there will be an image of the mech in its signature pose, ready for battle. The same image will be used later in the mech comparison screen, to give the game consistency. On the right, there will be a slowly rotating model of the mech, giving the player a 360 view of what the mech looks like. I put the challenge them button at the bottom of the screen to encourage the player to at least skim-read the enemy stats before starting the level.

Puzzle Selection

After the player has hit challenge them on the enemy mech stats screen, they will be taken to the pick a puzzle screen. The exact number of puzzles that the players will be able to choose from is currently unknown, however it could change based on how far through the game the player is. When they are facing more challenging mechs, they will have less puzzles to choose from so they have to be more careful when it comes to risking components.

Each image for a puzzle will give a vague hint as to the type of puzzle it is, as well as what component you are likely to get from completing the puzzle. I gave the player the option of viewing their mech and the enemy mech at the bottom of the screen so that they have a better understanding of which parts they still need to collect or if they have one of each part, which ones they should try another puzzle for to get a better version.

Use It or Risk It

This screen is shown to the player each time they successfully complete a puzzle. On the left, the enemy mech is shown to keep the layout consistent, as in other comparison screens the enemy is also shown to the left. Players have the option to either read a detailed description of each components with their strengths and weaknesses, or they can quickly glance at the overall component ratings given underneath the picture of each part. I made the use it and risk it buttons bold and large on the screen, to draw the player’s attention to the decision that they have to make before they can continue.

Mech Comparison

The mech comparison screen is shown to the player right before the mechs go head to head in battle. It gives a detailed description of each mech, as well as a bar chart which gives a direct comparison of specific key stats that will show which way the battle may swing. The placeholder on the left is the same posed image of the enemy mech that the player is shown on the enemy mech stats screen. The placeholder on the right serves a similar function for the player created mech, except the pose is generated based on the overall rating of the mech so that weak mechs will pose in ways that makes them look delicate whereas high-tier mechs will pose like a stereo-typical wrestler.


I found working out a basic layout idea on paper was beneficial to my overall designs as it allowed me to get my initial ideas out to be refined further. This is useful particularly if you want to iterate upon your sketches before moving onto the wireframing stage. Wireframes are useful as they allow you to see how the game will flow between screens and identify how large different elements have to be on the screen to make them usable.

From this wireframing project, I have learnt how to use Axure to create pixel accurate wireframes. I have also spent time considering how layouts can change based on platforms, as well as how much information you can fit on a single screen based on the size of that screen.