Main menu for Our Oath, and FPS game.

FPS UI Design

Our Oath is a sci-fi, FPS game concept. Our hero dreams of mundane, everyday events from the future. One day, they dream of of an up coming accident that will kill 100s of people.

Visual Style

Color palette for a FPS game.

A lot of sci-fi games like to use blue. I want try to use green to see what happens. Why do I keep using cccccc? It lets me add highlights to text if I need to. Console games like to break their menus into multiple steps, so I never had the need to use purple for a background color of a menu.

Pages

User flow of an FPS game.

Page maps help us see the entire UI flow. Like a regular travel map they show us possible routes the player can take and help identify paths that are too long. I also include which button triggers the page transition, so I can reference it later when programming the UI.

Main Menu

Main menu of a FPS game.

The menu is on the right because that is where the trees are. We maintain the composition of background. The title is in the center of the page. Many websites often open with a similar style: big text that is centered on an interesting background. In web design, this layout is called a hero image.

Level Select

Single-player settings for a FPS game.

Selecting CONTINUE in the main menu will take the player here, where they can select the level and difficulty. The aesthetic was looking a bit horror themed, I tried to add a dot texture to the background to restore the sci-fi feel, but it doesn't work well. Squiggly lines were added, but it reminded me of a rorschach test, bringing me back to psychological horror. I guess this is a horror, sci-fi, FPS game now.

In-game

In-game UI for a FPS game.

I took a screenshot of Halo 5's in-game UI and painted my own UI. In this sci-fi world, people have wrist bands to monitor their health. The color changes as the player's health declines.

Many film and TV shows have subtitles much bigger than the ones shown here. There should be an option to increase the subtitle's size. In FPS games, enemies tend to be on the upper half of the screen. The lower half of the screen is mostly ground and players have no reason to look there. By placing the subtitles on top, we put them closer to the enemies. This makes it easier to read information in the heat of combat.

Pause

Pause page for a FPS game.

When the player pauses the screen from in-game, they are also shown the score board. The pink border around the numbers makes them jump out more, so players can quickly glance them and resume the game. This use is similar to how players in competitive games will often bring up the kill board.

References