Race Force – Game UI

This user interface is for a racing game. I wanted to use lots of angled elements to give the UI a feel of power and speed. I also wanted to use very strong contrasting colors. After a few tests, I went with dark grey, light grey and bright yellow. I didn’t want it to have a flat style, so every element has a slight gradient, and they all cast very faint soft shadows on each other.

Race Force Logo

ui2-logo

This is the logo, using the dark and light elements. I also chose to use the Eurostile font because of the strong squarish glyphs that perfectly accent the overall style I was going for.

Screens

DSC_3282

 

Here are some sketches I did to establish the main shapes and layouts.

ui2-start

The background of most screens features a smooth dark gradient that allows dark and light elements to be placed on it.

ui2-events

When the game loads, you’re put in the Events screen, where you can choose a race or group of races to participate in. Each event displays a photo and a title. Events that have been won by the player show a medal in either bronze, silver or gold colors, depending on the player finishing the event in third, second or first, respectively. The screen is scrollable horizontally, and it shows a paging indicator at the bottom.

ui2-dealership

When you want to buy a new car, you go to the dealership screen (I’ll explain how in a bit). The dealership screen shows all the available car brands, organized by origin. The screen above shows some European brands. The yellow parallelogram under the Audi logo shows the currently selected brand. It only shows if the player is using a game controller. You can use the game controller to move the selector around and then open the desired brand.

ui2-brand

When you choose a car brand, you’re shown the brand’s available cars. In this case, we’re looking at Aston Martin’s lineup. Each car shows a photo, its name and year, along with power and price. The third car on the top row shows a key, meaning that the player already owns that model. This screen can have pagination as well, with horizontal scroll to show more cars.

ui2-car

When you select a model from the brand screen, you’re taken to the car’s screen. This screen prominently shows an image of the car (could be a 3D model that the player can rotate and zoom). This screen lists some of the car’s specifications, it allows the user to see more information about it, choose a color, test drive the car and buy it, of course.

ui2-s-loading

When you enter a race event, while the game loads assets into memory, this loading screen shows up with some information about the event.

In racing games, you usually see the cars from the same points of view: front or side in the menus, behind or dashboard when driving. So in this loading screen, I decided to show a different view of the car you are driving. In this particular case, I’ve used a photo of the Ariel Atom’s interior.

I believe that seeing more of the car will create in the player a better connection to the car, and in turn, to the game.

ui2-ingame

Here’s the race screen itself. Here we can see our place in the race, the current lap, lap time, speed, gear and RPM level.

Navigation

Navigation was tricky. I wanted something that would work with a game controller and also touchscreens, yet take as little room in the screen as possible. So I decided to have an offscreen navigation bar that shows up when a specific button is pressed on the controller, or when a finger swipes down from the top edge of the screen. The menu also opens when the player navigates up from the top-most screen. This means that if the player is on the car screen, going back will take them to the brand screen, and then to the dealership screen and then back to the events screen. If they go back again, the navigation menu shows on the top.

ui2-s-events

So here is the Events screen. When the navigation menu is opened, the shadow slides from the top and the elements show up.

ui2-s-events-navigation

The animation sliding the menu from the top is important for touchscreen players to associate the movement and the gesture of swiping from the top edge.

ui2-s-car

Here’s the Car screen again.

ui2-s-car-navigation

And here’s how the car screen looks with the navigation bar open.

ui2-s-ingame

The driving screen is a special case, since it won’t show the normal navigation flow. Here’s the normal screen.

ui2-s-ingame-paused3

And here’s the screen with the navigation open. This screen’s navigation pauses the race and shows the user a different set of actions. All the navigation buttons have room for console-specific controller icons.

End

That is all. Tell me what you thought in the comments.

Disclaimer

Brand logos, car photos and the PSVita image belong to the respective brands. The image used in the racing screen was taken in Need For Speed Most Wanted 2012 (a game I enjoy very much).

2 comments on “Race Force – Game UI

Leave a Reply

.