Video Game Interface Task 3

For task 3 I had to mock up different designs for my user interfaces, this included features such as track maps, speedometers and placement. I feel like these are the three main components when it comes to user interfaces because, from personal experience, I believe these are the interfaces that players constantly look at for guidance  and total racing experience.

The first thing I looked into was the different areas in London that could possibly be race tracks, four locations that I looked into was; ‘Windsor Castle’, ‘Hyde Park’, ‘Kingston’ and ‘Central London’. In order to create a basic map track I took screenshots of these various locations, opened the images into CC Photoshop and draw a thick circuit so it would be easy to create in Cinema 4D in the future.

The second interface the I created rough designs was for the Speedometers, I designed these features on CC Illustrator instead of CC Photoshop because CC Illustrator is a better programme to create 2D designs and patterns. The key tool I would use to create the Speedometers was ‘Polar Grid’. I made a grid with 5 concentric divider and 25 Radial Dividers so then I use each line as a guide point as to the speed of the players vehicle. After that I deleted some of the radial dividers to show the speedomemter would stop, as well as that the pictures that I referenced for speedometers also had a shut off points when I came to the speed of the car. Number were the next stage of my creation, I wanted it to look minimalistic because this is how people would define ‘modernism’, furthermore my racing game is based in the future. I originally had a square to tell the player how fast they were going (as well as a digital line going up the speedometer), but I decided against that idea due to it looking too basic and very lazy. The colour scheme I went for was blue and red to represent a clear difference between each racing team.

Screen Shot 2015-11-20 at 09.17.46Screen Shot 2015-11-20 at 09.35.48Screen Shot 2015-11-20 at 10.08.12Screen Shot 2015-11-20 at 10.15.50Screen Shot 2015-11-20 at 10.23.36Screen Shot 2015-11-20 at 10.25.33

The second speedometer design I went for was in the shape of a semi circle instead of a circle because I wanted a selection of many designs for when it came to the group discussion for Task 4. One of the things that makes this design different from the first one was that I made the lines on the polar grid much thick, so then it seems as if there are gaps between the segments instead of a thick line. Additionally I added a gradient to the speedometer because then it could visually show when the player was getting into an ‘exciting and thrilling’ speed, however I did decide to go for the colour blue because I want there to be an obvious team difference and blue is a very neutral colour so it doesn’t portray any negative impressions. To tell the player if they were in a dangerous speed I also added a red arc right of the speedometer. The analogue meter in the middle was simple to create, all I used was the ‘Line Segment Tool’ and a small circle.

My last speedometer that I designed was more dash-board friendly so instead of having a transparent background, it has a solid fill, much like an ordinary dashboard and similar to the designs I was looking at for my research. This design was in the shape of a circle much like my first design, however instead of having an obvious colour change, I wanted the colour of the numbers of the gears, the speed and the speed bar to alter depending on the team. This speedometer took me much longer to do because I added a quarter circle which i hadn’t done before  so the shape looks a bit messy. On the other hand I went for a futuristic font for the numbers considering the video game will be based in the future. Out of all the designs this one seems to be the best due to it meeting the criteria of a futuristic cap speedometer.

 

Advertisements

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 )

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