Project Coldlight Interface Design

Summary

COLDLIGHT is a short, linear single-player stealth game (Splinter Cell-style) currently in development in Unreal Engine 5. This project is an interactive HUD concept exploring a fully diegetic, Blacklist-inspired interface built from monochrome line-work and projected typography.

What Is It?

The concept is built around a handful of interlocking systems:
- World-projected objective display: decode/scramble text animations with a layered information hierarchy - primary objective, secondary objective, and mission telemetry.
- Character-anchored readouts: tethered directly to the operative, surfacing ammo and equipment state.
- World-space markers: for the objective, exfil route, and contextual interaction prompts.
- Edge-of-frame hostile bearing indicators: for tracking threats outside the player's view.
- Radial equipment wheel: procedural segment layout with a rim that re-traces on every open.

The whole HUD re-themes through three awareness states - concealed, caution, and compromised - via a single palette swap, and every element can be toggled independently with its own reveal/hide animation. This doubles as a tool for testing how minimal the final HUD can go, and the whole thing is composited over in-engine-style gameplay framing to validate legibility against a real scene.

Try It

The prototypes below are fully interactive. The menu flow covers the full six-screen sequence - title, options, mission select, intel briefing, loadout/ready-up, and mission debrief. The HUD panel on the right (or keyboard shortcuts 1-5 for individual elements, O for the objective display, and Q for the equipment wheel) switches between awareness states and toggles HUD elements on and off.

Interactive menu flow concept

Interactive HUD concept (Splinter Cell: Blacklist gameplay used as background)

Wireframes

A set of annotated UI wireframes documenting the complete interface architecture: the in-game HUD across its two core states (default play and equipment wheel open) and the full six-screen menu flow (title, options, mission select, intel briefing, loadout/ready-up, and mission debrief). Each frame maps element placement, anchoring logic, and interaction behaviour - which elements are persistent versus toggleable, how world-space markers tether to their targets, the slot-then-item assignment model in the loadout, the hold-to-commence pattern shared between menus and HUD, and the sequencing of animated reveals (decode text, count-up telemetry, badge stamping). Produced alongside the interactive prototype above as system documentation, the wireframes separate structural decisions from visual treatment so each can be critiqued and iterated independently, and served as the implementation reference for the UMG build. Delivered as an eight-page annotated PDF using standard wireframe conventions (solid for persistent containers, dashed for contextual elements, numbered behavioural callouts).

Engine, Date & Role

Built as an interactive HTML/CSS/JS motion prototype in 2026, as pre-production UI design for an Unreal Engine 5 project (UMG/CommonUI target, C++ and Blueprint on a GASP ALS base). Solo project under PhantomWire Games.

Skills Used

UI/UX design and engineering, motion design (draw-on line animations, text decode/scramble effects, orchestrated reveal/hide sequences), design systems thinking (state-driven theming through design tokens, mapping one-to-one to CommonUI style assets), procedural UI construction (radial menu geometry generated from data), interaction design for gamepad-first radial selection, and rapid interactive prototyping ahead of UMG implementation.

Skills

• UI/UX Design & Interaction Design
• Motion Design (draw-on line-work, decode/scramble text FX)
• Design Systems (state-driven theming via design tokens)
• Procedural UI Construction (data-driven radial geometry)
• Gamepad-First Radial Interaction Design
• Rapid Interactive Prototyping ahead of UMG implementation