Figma
Racing
Action
Nocturne Drive is a futuristic racing game UI concept focused on creating a clean, immersive, and high-performance interface. The objective was to design an experience that allows players to access information instantly while maintaining the excitement and speed of competitive racing.
The project covers the complete player journey, from loading the game and navigating the main menu to configuring races, customizing vehicles, managing career progression, and viewing the in-race HUD.
Racing games present a unique UI challenge: players need access to large amounts of information without overwhelming the experience. The interface must remain readable at high speeds while also delivering a premium automotive aesthetic.
The Career Hub serves as the player's central command center, bringing together progression, game modes, notifications, and account information within a single interface. The layout was designed to guide players toward their next objective while providing quick access to supporting features such as messages, calendar events, and settings. A neon-inspired visual language reinforces the game's high-performance racing atmosphere while maintaining a clear information hierarchy.
The vehicle selection screen streamlines the process of choosing and configuring a car before each race. A searchable catalogue allows players to browse their collection efficiently, while performance statistics remain visible throughout the selection process. Keeping the selected vehicle centered creates a strong visual focus and reinforces the connection between customization and gameplay.
The race setup interface allows players to configure every event before entering the track. Track information, race type, weather conditions, lap count, and difficulty are grouped into logical sections to minimize cognitive load. The layout encourages a simple left-to-right workflow, making race preparation quick and intuitive.
The gameplay HUD was designed to communicate essential race information without distracting from the driving experience. Position, lap count, race type, speed, gear, and lap timing are placed near the edges of the screen to preserve visibility of the track while remaining easy to monitor during high-speed gameplay. Color highlights draw attention to critical performance metrics without overwhelming the player.
The inbox system provides a centralized location for race updates, progression rewards, and team communications. A master-detail layout allows players to browse messages while reading their contents simultaneously, reducing unnecessary navigation. Reward actions are clearly separated from secondary actions, ensuring an efficient and intuitive experience.
The controls screen was designed to support multiple input methods, including keyboard, controller, and steering wheel. An illustrated controller diagram provides an immediate visual reference, helping players understand button mappings at a glance. Category navigation keeps settings organized while allowing quick switching between different control schemes.
The loading screen maintains the game's visual identity while providing clear progress feedback during transitions. A minimal interface, subtle blur effects, and a branded progress indicator create a smooth and polished experience that keeps players engaged without unnecessary distractions.
This was a really fun project to put together. It was a great challenge to think through every single screen a player might interact with and make sure they all felt connected. More than anything, it taught me how important it is to build a consistent design system that not only looks good but also serves the player every step of the way.
Mobirise