Twilight Bastion
Dark fantasy Action-RPG interface blending seamless functionality with a grim, realistic atmosphere
Role: Game UI/UX Designer · Timeline: 2 months · Team: Solo Project · Platform: PC / Console
Game UI, Action-RPG, Dark Fantasy, UX Design
Overview
Twilight Bastion is a concept for a dark fantasy Action-RPG, built as a complete first hour of UI: title screen, class selection, narrative interludes and combat HUD. The design question behind it: how quiet can an ARPG interface be — worn gold, dark iron, parchment on near-black — while staying instantly readable in real-time combat. Color is rationed: hue is reserved for the things that change mid-fight, and everything else speaks through luminance and material.
The Challenge
Action-RPG interfaces die at the extremes: fully diegetic looks gorgeous and fails in combat, fully utilitarian survives combat and murders the mood. The brief was dual duty — every element works as atmospheric storytelling and as split-second information under pressure. Class selection carried extra weight: it is the first interactive screen of the game, so it has to sell four different fantasies in one glance and set honest expectations about how each class actually plays.
The Solution
A material-driven language — tarnished gold on dark iron and parchment — with hierarchy carried by luminance instead of hue. The HUD works from two corners: identity and vitals top-left, orientation top-right, consumables in a quiet left rail, control hints tucked into the bottom edge — the centre of the screen belongs to the world, and region titles arrive as a transient banner that announces and dissolves. Class selection is built like a dossier: a rail of four roles, each with a crest, a role line, a short class fantasy and four stat bars — including an honest Difficulty rating instead of a vague “recommended for beginners”. The main menu opens with Continue pre-selected: the thing a returning player wants nine times out of ten.
Results
A coherent UI kit covering the whole first hour of play — title, class selection, interludes, HUD — in one material system that scales without losing atmosphere. Concept feedback kept circling one phrase, “it feels like it belongs in the world”; the more useful signal was what nobody mentioned — reading problems. For an interface this dark, silence about readability is the actual result.
Key Takeaways
- Material authenticity in UI requires studying real-world aging patterns—tarnish, patina, wear marks—to avoid generic ‘fantasy gold’ clichés
- Dark interfaces for real-time combat must prioritize luminance contrast over color coding for split-second readability
- The first interactive screen is positioning, not decoration — an honest Difficulty bar on class selection buys more player trust than any cinematic
Deliverables: UI Kit, HUD Design, Menu System, Inventory UI, Style Guide
Gallery
- Main Menu & Narrative Framing (2 images)
- Character Selection (4 images)
- HUD & Gameplay (1 image)