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
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.
Here are some sketches I did to establish the main shapes and layouts.
The background of most screens features a smooth dark gradient that allows dark and light elements to be placed on it.
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.
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.
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.
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.
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.
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 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.
So here is the Events screen. When the navigation menu is opened, the shadow slides from the top and the elements show up.
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.
Here’s the Car screen again.
And here’s how the car screen looks with the navigation bar open.
The driving screen is a special case, since it won’t show the normal navigation flow. Here’s the normal screen.
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.
That is all. Tell me what you thought in the comments.
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).