Game Interface Development and Experiments

Sketchbook designs


These are a few designs I created in my sketchbooks before I created the designs on Photoshop. They were just a few ideas I was considering adding to my HUD. I created most of my designs on illustrator as I was able to adapt and change certain elements a lot easier than when I did sketches.

Dash Boards

Screen Shot 2016-01-22 at 16.51.49
These were the different designs I came up with. The top right designs are the boost elements which show how much boost (nitros) the car has. The bottom designs show the speedometer of the car with a stick pointing to the speed of the car and digital numbers. The top right designs are a mixture of both with the vertical design being a boost and the design above it showing the boost with a digital number showing the speed of the car. However, the design on the right shows the digital speed of the car with the gear that it is currently in while also showing how much fuel the car has.

Map Interface

Screenshot 2015-12-10 15.52.35
This is the route I chose for the map which is in Central London.








Screenshot 2015-12-10 15.53.50
I added different effects to the map to see which looked best. For example, I added a glow aroudn the map with a 3D look to it. I created the effects using Adobe Illustrator












Screenshot 2015-12-10 15.53.33
For this effect I made a simple black and white map with a 3D look. I thought this was the best effect as it was simple but also looked the most professional.












Direction Arrow Coloured

Map Arrows

These designs were created using Photoshop. I created a shape then added another shape inside which was smaller and thinner to make it look more aesthetically pleasing. After, I added the map inside while cropping the other parts of the map off so it only appeared inside the shape. I then added a blue arrow, which represents the player, onto the map with other orange arrows behind the player, which represent the other cars.


Time and Position Interface

Time + pos final

I created these designs using Adobe Illustrator. I did this by creating multiple rectangles with different colours and laying them ontop of each other with the correct size then applying more rectangles to create the shape of the interface. After doing this, I highlighted certain parts of the shapes and using the “minus front” tool to make sections of the shape disappear to create this design.


Group Feedback




Layout Designs

Mac Screen Game 03

On this design layout, theres a map with the shape of a hexagon on the bottom left with the speedometer on the bottom right with each hexagon representing how much energy (fuel) is left in the car. Theres also an interface element at the bottom of the screen which shows how much nitros is in the car, which would give the car an extra boost in speed. In the top centre of the screen is a slightly faded arrow to allow the player to see parts of what is behind the arrow, which shows which direction the player is suppose to go, with the position of the player and the players current time either side of the arrow.


Mac Screen Game 02

In this design layout, there is a circular shaped map on the bottom left with a circular shaped speedometer on the bottom right instead of the hexagon shaped interface. Further more, the booster is now at the top of the screen with a circular edge instead of a sharp edge. In contrast, the position and time interfaces are sharp with a smooth gradient and a slight transparent look to it with the direction arrow being inbetween, in the same place.


Mac Screen Game 01

For this design layout, I added the circular shaped map at the bottom left of the screen  but with the hexagon shaped speedometer at the bottom right as I thought it looked the most professional and clean. I also added the sharp edged boost interface as it suited more with the position and time interface, either side of it, as the edges on those interfaces are also sharp. In addition, I kept the arrow in the same place and size as I thought it suited well with the other interfaces.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s