Design Components, High Fidelity Designs and where to go next

So, with that done. It was time to then design the components themselves. I already had the style in mind, and with the layout of it all. The shape was already set up for the menu components, however for the display of the vehicles and courses, for visual clarity, I had to change to more rounded rectangles. It also felt a bit too basic to use the same shape over and over (to the point of being lazy than anything).

General Rules and Menu Buttons

The initial designs of these was done with a few rules in mind. All were to start in black and white. This was to make sure that they were suitable for those who were colour blind. As a result, the main way these were to be “animated” was they were either to make a sound, or they would be modified visually on the screen, subtle changes such as say, a buttons border becoming wider.

As these buttons all follow the same sort of convention, they’re effectively covered together (they’re the same functionality wise). If the only change visually, that the “colour” changes, this means that a sound will play when it is clicked. The reason for this choice was, at the time I had realized that the buttons were put somewhat close together, so having to add an animation, and then give screen space for it to play would result in me having to change the layout of the screens entirely. I considered this somewhat of a flaw at the time (this will be explained later on)

HandBrake

I started on the handbrake because the handbrake actually had two variations. The first one that you see here, is actually the lever of a handbrake. This is because in my mind, most people would recognize that it is a hand brake level, and push it to slide. The animation mirrors how a handbrake is pushed as well.

Hilariously enough, When I tested this with someone whom is an actual driver, they not only did not recognise the handbrake lever, they thought it was the track map. Said person then advised me to actually look at the UX for vehicles, and advised me to use the universal sign for handbrakes in the UI. This led me to heavily regret not doing something so obvious early on. Whilst I did take his advice and adopt this, I also feared that many would take this to mean its the brake sign (because not everyone drives), so I put handbrake to accentuate this. I also changed it so that instead of simply lighting up, it will now glow, like in a real car, but also shake slightly, because again, someone might be colour blind.

Nitrous

Nitrous is a fairly easy concept. The icon is a basic lightning symbol, which is a fairly common logo used for speed. Due to the instant drastic changes that occur when you hit the nitrous button, you do not necessarily need to “indicate” via the UI when the button is pressed. All that needs to be required of it, is that it is easy to get to and press. The reason for this is that it is not really the job of the UI to communicate when you have pressed it, that’s what the gameplay is for, as you’re speeding up drastically. This should be more evident in what’s happening on the screen than anything else. As a result, I put a very simple, understated animation of a ring appearing around it when pressed.

Speedometer

As mentioned before, the speedometer is placed at the top, with everything being labelled (again, not everyone will be able to tell what the gears are if they’re not labelled). Even though these were explained above, I still felt it important to actually talk about this a bit, as the speedometer to me is the most iconic part of a racing game UI, and the way its styled and executed, can be the difference between an average arcade racer and an iconic one.

Brake/Accelerate Pedals

These are fairly simple in my opinion. Once again, your interaction with these, affects what is going on in the world. As a result, I put the simple animation of the pedal going downwards when pressed, to indicate that the button itself is working, I have also put these as see through to make sure parts of the screen are not covered.

Pictured: Controls Screen

Tilt/Button Controls

Every racing game offers these options. So it is imperative that I offer them as well. A simple vector drawing depicting the control scheme works here. What needs to be noted however, is that these aren’t actually animations. These are just what is to happen when selected. As a result, I have made the border visibly bigger when it is selected, in order to let the user know they have selected it successfully, and of course a sound will play.

High fidelity wire-frames — Menu

For me, this is where the magic can start. The function is already in place and the menu conceptually, looks very simple. So the main problem that many game interfaces stumble upon in their UX is already solved (form over function) This gives me free reign to effectively be a graphic designer without having to worry about hindering usability. The joys of proper planning!

I decided upon a colour scheme of four colours. Two colours for the main interface, and two for the buttons. In the end I decided upon the following colours as seen below:

The reason chose these were fairly simple. The orange, was originally yellow, due to games like ridge racer type 4, but I eventually decided to change this to orange to avoid feeling like I had copied their entire style. Another change that I actually added AFTER the wireframe planning, was that I decided to actually add a shadow underneath the UI elements to make them look “elevated” and make them stand out more. One flaw that didn’t crop up in the planning, was that everything looked a bit too…level. This led to the buttons looking like they were part of the screens, and not actually sticking out to the user. I chalk that one up

to inexperience personally. I put the shadows and called it a day.

The two fonts that I used are fairly important, as of this time of writing, the project doesn’t have a full name a logo, so it uses a working title. Once again, the theme is fast and stylish. With the font choices I decided to go full on “stylish”, favouring calligraphy and brush styled fonts. For this I chose the following two fonts: “Infinite stroke” (the top one) and “Taken by vultures” (the bottom one)

Infinite stroke was brilliant, because it is stylish and bold. Taken by vultures is very thin in its styling, and this could easily lead to readability problems. Especially as mobile phone screens are very small in comparison to a pc screen. Infinite stroke is bold and large enough to not be too big for the UI components, but just small enough to not look unwieldy. As a result, Taken by vultures was relegated to use of the title screen, and screen labellings at the top right, where it’s not restricted in size by the component scale, meaning I can put it as big as I need to, without it looking blocky or poorly placed.

Pictured: In game GUI (Buttons)

This is where my theory gets put to the test. As you can see, there is actually a lot of grey in the UI. The directional buttons and the accelerate/brake are the main parts i wanted in grey, as whilst they’re important buttons, they’re also the largest on the screen. Having them coloured with full opacity would easily obscure the screen too much. Another thing you will notice in the mockup, is the modified speedometer. In practice, when used with triple numbers, it was far too cluttered for triple digits. This was rectified during the high fidelity process. Thankfully it was rectified fairly easily with a few rearrangements.

Pictured: In game Options

Of course, every game needs a pause button. The first thing to take note of, is the pause button itself in the top right corner. The border is larger which indicates it has been selected, as well as the game stopping. This screen is fairly simple, you can either pause, change your control scheme or resume. I wanted to make sure the exit button was bright red (the only instance of bright red other than the handbrake) so that the user sees it immediately, and will not press it by accident.

Pictured: The control screen.

This is the control screen. What you are seeing here, is one of the control schemes being selected, which is why the buttons is the opposite colour.This is one of the few times where I almost always opt for a basic colour scheme or screen. Simply because the user doesn’t want to spend much time here. They want to select their option and then leave immediately and get back to playing the game.

Once looking at everything as a finished product, I noticed one major change I could have easily made. I could have easily chopped part of the rectangle off, and replaced with a small circular animation that plays when highlighted, and then the sound can play. This looks more asthmatically pleasing and it is still fits purpose. I also need to add a “are you sure you want to quit?” screen. It’s a small fix, but it’s one that shows polish and consideration for a potential mistake from the user regardless.

Originally published at https://www.tumblr.com on February 20, 2019.