VROOM – Video game interfaces! – Task 3: Preproduction (Sketches & Digital work)

We had to design and create a heads up display for a racing game. We could create anything we felt that needed to be part of the UI. However, we had to include some teams and create a logo for each one. I decided to base my game on an underground street racing theme. There would be many different customisation options for your car to personalise, as well as game modes (such as Circuits, Sprints, Time Trials and Police Chases) to play. I decided to create a map for the UI, as well as a speedometer and obviously, the three logos for the teams.


To get ideas flowing, I decided to draw out what I thought would be the fundamentals that need to be included in a speedometer.

Basis of Speedometers

  • I would like the colour of the speedometer to change depending on what speed you are going. For example, the lights will be all dimmed to start with. It will then light up depending on what speed you are going at.
  • The team logos that needed to be included in the game will be sewn onto the characters clothing. This will be seen in cut scenes throughout the game. One cut scene could be the character you play as developing the logo to enter the street racing league. The logo will always be under the speedometer like a watermark, always telling you what team you chose at the start.
  • I had to include a boost bar in a game that represents street racing. It will be a fundamental feature in the game, to boost. It will be a fun mechanic as well, boosting ahead to 1st place at the last second.

These may change, as development continues, but these act as steeping stones to get ideas flowing for designs.

I quickly thought about what kind of speedometer designs that could be the final design. I went onto the computer and created some very simple concepts for speedometer designs. At similar times, I also drew similar shapes in my sketchbook that I made into speedometer designs.

  • Bars could be used to represent what speed you are going. The bar could fill up with a colour (starting with a calm colour and then changing to more aggressive associated colours. E.G: Blue, Green, Yellow, Orange and ending with Red. Similarly, numbers can be used to state what speed you are going with the number representing the MPH you are travelling at or the Rev counter displayed and the speed included in a box with numbers. Generally, numbers are much more accurate than colours, be easier for newer players to read what speed you are going and will be easier to read resulting in faster reaction times for players to brake/accelerate accordingly.

Concepts of Speedometers     Speedometer 01

  • Numerous display styles were considered for the speedometer. A circle display can feature lots of information in them, as well as the speed/gear on the sides. A triangular display can be used with the bars/colour system to represent the speed, as well as taking little space on the HUD. Separate displays for every piece of information. In the right triangle, the gear can be displayed while the main circle can show the speed clearly without a clutter of information. The left circle can contain the boost level as well. Even a spiral shape was considered, but quickly shot down as it was difficult to put all the information in a quirky shape.

Speedometer 04     Speedometer 02Speedometer 03

  • Inspirations from other developed games showed what a successful way of displaying information was. An excellent way was shown in the Need for Speed series. This consists of a circle shape displaying 5 different pieces of information while not looking cluttered. However, the Gran Turismo series always puts information in a separate box. One for the Rev counter, another for the speed and one for the current gear.

Inspiration from Games

I really liked the way a circular display can look so I developed the work even more. I moved the numbers into the circle and changed the font of the text. I also added a black to white gradient in the circle; re centred the assets in the middle and put a circle in the middle to act as the needle rest. Overall, it gets the job done, but later realised that when scaled down to size for a speedometer, the number size was unreadable, especially for a TV screen.

Speedometer 05

Logo Designs

As we need to create teams, I decided to incorporate the teams into a difficulty mode. Three teams for three different difficulty modes. Easy, Normal and Hard.

Logos correspond with Difficulty

Easy mode: Two professional drivers that have retired to the streets due to alleged cheating. You need to pay off debts somehow. You get a 25% cash boost and is easier in general due to car driving assist (that can be turned off) that tries to stick you to the road, callouts for turns up ahead, an automatic mechanic that makes catching to the AI possible (Slows down the AI purposely so you can overtake) and lots of boost in your boost meter.

Normal mode: The way the game is supposed to be played. The head of the underground street racing in the town. You play too aggressively to stay at the top and gamble on a very hard race in a F1 car. You crash on the hairpin ending turn and find it was a set-up. Police arrest you for years and you want revenge for it. You find out who is responsible and work your way up to the top. You get no bonus cash at this level, mediocre driving assist, a weaker slowdown of the AI mechanic and only more boost in your boost meter.

Hard mode: Your brother has gone into a downhill spiral after you both leave your home town. Now he has gone into street racing, bought drugs & has used your credit card to pay off some money to the hardest gang in town. You meet him up in a back alley and get ambushed by the gang that your brother owes. You narrowly survive death, but your brother doesn’t live. They frame you so now are a fugitive on the run. You decide to avenge your brother by killing the boss. It is harder to control the car (due to no driving assist) and get a 25% cash penalty.

Each of the logos represents the three teams, in subtle ways.

  • The easy mode/professional drivers: are drivers from the ‘G2’ (the in-game equivalent to ‘F1’) and wear a helmet for racing. Their logo is a combination of what they are as well as how they drive. The racing helm is a way to show how professional they are and the ‘G’ being incorporated with it shows where they come from.

Basic Logo Designs 03     Easy Mode Logo

  • The medium mode/underground boss: has a very aggressive stance towards many things. To show his aggressiveness, he has a tiger design as his logo. The tiger’s arms are out ready to pounce, simulating how the underground boss is a mean and notorious figure to mess with.

Basic Logo Designs 02     Meduim Mode Logo

  • The hard mode/brother of a driver: still in shock and grief about his brother. To show this, his logo is a skull with a bullet hole in the centre of the skull. This simulates how his brother died. It also represents how difficult this mode is, with a skull to show how difficult it will be for new players.

Basic Logo Designs 01     Hard Mode Logo



Leave a Reply

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

WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s