top of page

Gym Page Iterations

Final Iteration

Changed the colours of the bars, the icons and various texts in the gym page to be much ligher. This is to include a contrast between the background and the texts so that it will be easier to see for the players.

Iteration 1

This is the iteration where i had re-looked at the wire frame and thought of how it would actually fit all the information that are needed such as the price, the amount of increase left , a continue button and 2 train buttons, and decided to use the 5th wireframe.

Created Back Page

I had decided the gym page to have a wooden theme, this is to suit the fantasy land that the players are in. It uses various tints, shades and tones of brown and i tried to texture it with nails and wooden textures to make it look like wood.

Placeholder Art

This was the place holder that actually takes the 2nd image from the wireframe. Due to the fact that I am still doing the art, a place holder was placed so that the programmer can program, this shows the initial layout of the gym page.

Gym Icons Iterations

Wireframe

Final Iteration

Changed the colours of these icons to a pale beige instead due to the fact that i wanted to make it contrast the wooden background and there were comments stating that the icons were rather difficult to see.

Iteration 2

Changed the buttons to a square shape again due to the fact that there were various comments stating that it made them think of a settings page where you change the sound. The reason why i choose black is due to the fact that i wanted to make it looked carved into the wood.

Iteration 1

After seeking opinions from Shaun, i had decided to use a simpler icon. Thus i decided to use a button that shows an equilateral triangle due to the fact that i want to show that when u press the button, it increases the bar

Original

This was the first gym icon in the upgrades page. The reason why i used blue was due to the fact that during that time i wanted to increase use 5 icons and each one is analougous to each other becoming warmer over time due to the fact that I was still using the 2nd wireframe.

Sketches

Gym Upgrade bar Iterations

Original

The original bar was created after consulting Shaun. I wanted the bar to have an analougous colour scheme so that it can actually show the player that the bar increases over time.

Iteration 1

Wanted to increase the image graphically as well thus i decided to put a triangular shape that is made up of several circular rectangles. I had also changed the colours to yellow to red rather than blue to red due to the fact that i wanted to have a warmer colour scheme to show that training an active process

Iteration 2

The previous image looked like the circular rectangles do not look connected to each other. Thus i decided to change it to a triangle with darker shades of their colours so that it shows that the bar "lights" up

 

Final Iteration

Changed the colours of these icons to a pale beige instead due to the fact that i wanted to make it contrast the wooden background and there were comments stating that the icons were rather difficult to see. I had also made it slightly smaller as it took up too much space in the gym page.

bottom of page