MPG Brief: Racing Game UI

 Moodboard-

For this brief I have been tasked to create a UI screen for a racing game fit to a specific theme. I will need to make a total of 4 assets to fit on top of a pre made wireframe. Below is the mood board I received for this brief, I can see it uses a very graphic style with bold colours and an almost retro feel to some of the inspo pics.

And this is the wireframe that I will need to create my assets around:

Research & Additional references -

For the car image, I was able to find a free to use 3D model on sketchfab of a similar make car as the one detailed in the wireframe. [This is the 2013 model of the Nissan GTR, not the 2010 version but from what i saw online they’re not too different].

This is the link to the model i used - 

https://sketchfab.com/3d-models/2013-nissan-gt-r-black-edition-coupe-60666625029a461b93d202fe9512a389

Thumbnails-

Using the wireframe I made a set of 3 thumbnails exploring potential designs for the UI. I preferred the more detailed layouts of designs 1 and 2 [top left and right] as i thought these better aligned with the images in the mood board provided.

Of these two, design number 1 felt more lively and although not as neatly arranged as design 2 I thought it conveyed a more energetic feel that would fit well with a racing game.

I made an additional design exploring a different layout entirely, however it didn’t resonate with me as much as the designs on the previous page. Practically thinking in terms of the pipeline this is very different from the wireframe provided, and such would need entirely new button programming to be applied, so this doesn’t fit well with the briefs specifications.

Final UI design -

With the 3D model I added a posterization filter over it to give it a more comic book feel, I leant more into the graphic elements shown in the mood board so bold icons and bright colour gradients.

Below I made 3 iterations on this final design, I wasn’t sure if having the background made the layout too busy however without it i definitely feel the design was lacking something. To combat the busyness of the UI, i chose the least saturated design that still allowed the white UI boxes to be seen.

A small detail I liked was all text relating to the race has a chequerboard decal in the text whereas all other text has simple polkadots. It's a small detail but i i think it adds a lot to the design.

I also imagine the icons on the bottom to change orientation depending on which is selected, in the image I made, the start race icon is selected and thus is not only highlighted with the bracket but also tilted at an angle.

Additional notes -