This user interface is for a spy FPS, so I wanted it to look dark, sleek and futuristic. I didn’t want it to have a lot of needless decorative elements that are so common in FUIs, but to resemble more of a realistic and possible software.
I sketched out the screens I was making and made the logo. The goal of the logo was to represent an organization without giving any information about it away. Some organization shrouded in secrecy. Nobody really knows what they do.
I wanted the typography to almost blend with the icon itself, like they’re made of the same material.
For the interface, I knew it was to be dark and futuristic. So I made a simple background and frame to wrap all the content in.
Since the first sketches, I knew I wanted the UI to be curved, as if projected on holographic glasses, an heads-up display or just a curved display.
After this, I had a much clearer idea of the style I was going for, so it was faster to develop the next screen.
This is the actual game menu. Like a real application, you can see a navigation bar, which gives you quick high-level navigation (not always present in games, which makes the user have to go up and down the rabbit-hole repeatedly to navigate screens). The organization logo is at the start of the navigation bar, and the username is at the end, together with the player’s rank, which limits their access to specific missions, information and weapons.
The missions listing shows each mission on a floating card, with other cards stacked behind it.
The card shows the necessary rank for that mission prominently, as well as the world map with the mission’s location. I wanted it to look like the cards were involved in virtual fog, and the ones in the back were deep inside the fog and less visible. I also wanted the interaction with the user to reflect that idea. So I took to After Effects to make the animation:
As the user scrolls to the right, the top-most card of the stack fades out as it floats away from the pile. The second card rushes out of the fog to take its place, and the following card gets closer to the user too. As this happens, a fourth card comes into view as it leaves the shadow and fog under it. When the user scrolls left, the opposite happens. A scroll bar at the bottom of the screen shows the relative position in the long list.
When the user clicks on a mission’s equipment button, they’re shown a dialog with the items to use in that mission.
You can see the two weapons that will be available, as well as a protection vest. On the weapon panels we can see the upgrades equipped on the respective weapons. The first has some precision or sight upgrade, along with a temperature reduction enhancement, while the second weapon is likely equipped with poisonous ammo.
Here you can see the mission equipment screen without the warping.
For the in-game screen, I wanted the interface to still look high-tech, but non-intrusive. So I designed the necessary elements, taking into account the layouts users already expect.
The user can see their own status, as well as their team-member’s. They can see the current weapon and the other one too, and both their ammo levels. The radar map on the bottom shows location of potential enemies (orange dots) and friends (blue dot), along with the texture of the terrain, the direction of the current objective and the North. In the center, we have high-tech cross-hairs (anything looks high-tech with enough hexagons).
Here’s the animation of the in-game user interface
Here are the sketches for this UI
I hope you enjoyed this. Tell me what you thought, in the comments. Thanks!
The weapon and vest images belong to the respective brands.
The Beretta 3D model was downloaded here.