The interface layout was guided by a multi-column grid to maintain alignment, spacing rhythm, and compositional balance across screens. Even under tight timelines, structural alignment remained a constant reference point.
A modular HUD-inspired panel system governed hierarchy and spatial organization. Panels, overlays, mission stacks, and control elements followed repeatable compositional logic rather than isolated visual decisions.
Navigation used semi-transparent white to remain omnipresent without competing against deep spatial backgrounds. Core colors — white (#ffffff), signal red (#d64a4a), and deep teal (#296377) — established hierarchy without assigning moral value to color.
Because red functioned as an activation accent across the system, validation and error were not encoded chromatically. Instead, feedback relied on symbolic reinforcement and narrative cues.
Validation appeared through check iconography and stable astronaut posture. Failure incorporated X iconography and fractured visor imagery. Meaning was conveyed through composition, icon, and motion — not color inversion.
Typography relied on Montserrat for its weight range and geometric neutrality. Expanded uppercase headings reinforced the interplanetary tone, while body text preserved clarity through scale contrast and restrained glow effects.
Motion operated hierarchically. Micro-interactions confirmed input. Overlay transitions marked structural shifts. Cinematic sequences were reserved for narrative thresholds — planet arrivals, milestone confirmations, guided communications — while operational interactions remained predominantly 2D to preserve clarity and performance stability.
To extend the interface into a cohesive universe, Capcom, Dr. Sheldon, and the spacecraft were modeled in Maya. These 3D elements were not decorative inserts but formal extensions of the system. Capcom’s hexagonal suit echoed navigation geometry; red accents aligned with activation states; deep black reinforced spatial continuity. The character functioned as a tactical guide rather than a mascot.
Planetary environments and shockwave sequences were constructed in After Effects through layered compositing and rotating texture simulations. Depth was achieved through controlled parallax and blending modes, balancing immersion with production feasibility.
The experience opened with a cinematic sequence in which Earth collapses into a burning sphere, establishing urgency before any interface interaction occurred. Immersion preceded instruction.
Each planetary transition was introduced through short video sequences that reset attention and reinforced narrative continuity. The journey concluded with an integrated video-based resolution, providing emotional closure and reinforcing collective achievement.
Cinematic framing structured engagement across the full lifecycle of the experience.
All UI assets were designed in Adobe Illustrator to align with the development team’s workflow, ensuring predictable export and implementation.
The result was a visually immersive yet structurally disciplined system — sustaining engagement while preserving operational clarity.
