top of page
Luminous
Game Overview
Luminous is a first-person exploration game where the player has to complete simple objectives such as fixing lights and eliminating cuboids that act as hindrances on the island.
UI Planning
The UI research was mostly inspired by Firewatch for it's clean interface and typography styles, Overwatch for it's FPS elements of HUD, radial bar and simple pause menu and Legend of Zelda: Breath of the wild.on how they used different UI elements on screen to tell the player states, as well as it's main menu.
The main UI required on the HUD would be:
• Progress of lights fixed
- Radial progress bar style
• Number of cubes left
- Grid layout group to show the number of enemies left
• Ammo count
- Translucent gun image with ammo count and reload icon
I also plan to add in a form of diegetic UI of a letter stating the objectives, where players can trigger with a button. This will be taught with a small pop up at the bottom left corner of the screen which minimises into a smaller tip after being pressed once.
Firewatch HUD
Overwatch HUD
Zelda HUD
Firewatch HUD
Overwatch Pause menu
Zelda Main menu
Colour Palette
Typography
UI Elements
UI Screen Space
Draft on photoshop
All measurements in pixels on a 1920x1080 screen
Ingame HUD
Adjusted lower UI offsets to better suit the game.
Menu Flow
Main Menu
The main menu background uses a snippet of the starting area in the game, framed with the rule of thirds and perspective lines leading towards the flickering light to foreshadow the goal of the game.
-
The left side of the screen is darker to contrast the buttons and title.
-
Buttons light up when hovered over.
-
When "Start Game" is clicked, the camera transitions towards the light and fades to black.
Pause Menu
-
Pause menu opens up from mid of screen to 1920x700px at 60% opacity.
-
Thereafter, UI elements fade in the center of the screen.
-
When buttons are hovered over, a yellow box highlights where the player is pointing.
bottom of page