H. Idris / Game UI/UX Designer

Tactical shooter, identity & interface

WAR

A gritty modern shooter concept, built from the logo outward: custom wordmark, main menu, tabbed options, a statistics dashboard and a save system that makes picking the right slot foolproof.

Role
Game UI/UX Designer
Year
2025
Tools
Figma, Unity
Genre
Shooter, Military
Platform
PC & console

Overview

Here's my take on a UI/UX design for a gritty, modern tactical shooter I'm calling "WAR." I wanted an interface that felt as intense and immersive as the game itself: something that looked and felt like military tech, but stayed clean and easy to use with a controller, so nothing pulls you out of the action.

The challenge

The big question was: how do I make a UI that looks tough and realistic without it being a cluttered mess? It needed to work for everyone, from new players who need a bit of guidance to hardcore veterans who want to dive deep into stats and settings.

I also wanted a strong, recognisable logo and visual style that stayed consistent across every single screen.

Screens

01

Logo & key art

It all started with the logo. I needed something bold and aggressive, so I built a custom wordmark with a sharp cut through the "A" to give it that feeling of action and conflict. Set against a dark, cinematic scene, it establishes the tone from the moment you launch the game.

02

Style guide

Two typefaces and three values, and no accent hue anywhere in the system. Nerve Agent Normal is the display face, rough-edged and stencilled so headings read as stencilled field equipment rather than software, and Cocomat Light carries everything else — a clean geometric light that keeps long runs of settings and statistics legible underneath it. The palette is entirely achromatic: white, B3B3B3 and 656565, three steps of a single ramp. Nothing in the interface claims a colour of its own, which leaves the game the only saturated thing on screen and forces hierarchy to be carried by weight, size and inversion instead.

03

Main menu

The menu is clean and focused, with "Resume" as the default since most players just want to jump back in. Each option shows a short description on hover to keep things clear without cluttering the screen: quick, intuitive navigation that matches the game's no-nonsense vibe.

04

Options: gameplay

I can't stand digging through endless lists for a simple setting, so options are broken into four clean tabs: Gameplay, Controls, Audio and Video. A persistent footer explains the highlighted setting and shows the controller prompts for toggle and back.

05

Options: controls

The controls tab keeps the same row structure as the rest of the options system, so remapping a binding or adjusting controller sensitivity never feels like a different screen.

06

Statistics & leaderboards

As a gamer, I know how much players love to track their stats. This screen shows the big picture at a glance (total completion and rank) while giving a detailed breakdown of the entire performance on the right. It's all there, but it doesn't feel overwhelming.

07

Save game

There's nothing worse than loading the wrong save file. This screen gives you everything you need to avoid that: a screenshot, the chapter name, completion percentage and playtime, making the right choice quick and foolproof.

Process

Wireframes

Structure first: logo lockup, menu hierarchy, options tabs, stats layout and the save-slot pattern.

Final thoughts

I'm really proud of how this turned out. Building an entire visual identity from scratch and seeing it through to the smallest interface details was a great challenge, and a fantastic exercise in taking a ton of complex information (stats, settings, save files) and presenting it in a way that feels clean, intuitive and completely at home in the game's world.

Contact

Have a game that needs an interface?

Menus, HUDs, full UI systems or a single screen that isn't working. Tell me what you're building and I'll tell you honestly whether I'm the right fit.

Email
Discord
Résumé Download PDF
Based Remote, worldwide