Shadow Line
I designed a full main menu hierarchy, in-game pause menu, HUD, and skill tree layout to reflect the game’s fusion of punk and Edo styling. The interface balances clarity and atmosphere, using thematic structure and terminology to reinforce the player experience. Menus were optimized for user input, with attention to flow, accessibility, and visual cohesion.
Screens
Pause Menu
A stylized in-game pause menu designed to maintain immersion while providing quick access to core systems. Built to reflect the game’s fusion of skate culture and samurai aesthetics, this UI features a custom layout that preserves visual context. supporting fast navigation without interrupting gameplay flow.
Main Menu
The design of a modular main menu provides players with intuitive access to game modes and customization. Structured for clarity and immersion, the menu enhances usability while reinforcing the game’s thematic identity, connecting players with the identity of the game.
Skill Tree
A dual-path skill tree interface supporting player expression through combat and skate abilities, designed to visually reinforce progression and theme. Players can toggle between Skate and Combat trees with shoulder buttons, while the right panel provides a contextual preview of each ability—including a short description and looping video for clarity.
HUD
A stylized HUD that balances game-critical information with visual immersion. The top-left features a dual-layered health and zen meter, indicating both survivability and flow state. A ring of petals above dynamically tracks zen progress. On the lower right, a combo-based trick score counter reinforces the game’s skate-influenced mechanics. The mini-map in the bottom left supports stealth and exploration, showing enemy locations and player orientation.
Adobe Suite
Used Illustrator and Photoshop to create or alter graphics and illustrations
Tools
Unreal Engine
Used to transfer Figma designs to UMG and implement them into test gameplay using widgets, blueprints, and animation.
Figma
Used Figma to create wireframes and Hi-Fi mockups, as well as prototyping menus with animation.
My Process
Wire Framing
By wireframing early, I was able to:
Map Out Complex Systems Logically: This project includes a wide range of interactive elements, HUD, pause menu, skill tree, scoring system, and trick chaining mechanics. Wireframes allowed me to visualize how all these systems would connect and flow, preventing interaction conflicts.
Design for Cognitive Load: With elements like combo tracking, style points, health/zen meters, and upgrade paths, I used wireframing to ensure players wouldn’t be overwhelmed. Sketching out clean layouts first helped balance information density and user attention.
Prototype Efficient Navigation: Menus like the skill tree include branching paths and multiple categories. Wireframing helped me organize them in a way that felt intuitive and responsive to player input, especially important for controller-based navigation.
The visual design of this project was a layered process that blended original UI creation with curated resources. I used Adobe Photoshop and Illustrator to build most of the UI components from meters, menus, and layout elements.
To streamline the process, I also sourced design elements such as icons, flourishes, and textures from platforms like Freepik. These assets were either used directly or modified to fit the style of the game. This not only saved time but also helped me explore new visual directions during ideation.
Hi-Fi Mockups
After wire-framing and designing visual assets, I brought everything together in Figma to create high-fidelity mockups that captured the full look and functionality of the game's interface. These mockups served as interactive blueprints for how players would navigate menus, upgrade skills, and interpret information during gameplay.
Using Figma allowed for precise control over spacing, alignment, typography, and component behavior, ensuring each screen felt intentional and intuitive. I was able to import UI elements from Photoshop and Illustrator, then organize them into responsive layouts that reflected real in-game scenarios. Features like the skill tree, pause menu, and HUD were mocked up with full context, including active states, hover effects, and selection feedback.
Component Design
Once the high-fidelity mockups were finalized in Figma, I rebuilt them in Unreal Engine’s UMG system to bring the interface to life in an interactive environment. This process involved recreating layouts natively in Unreal, translating design elements into functional widgets, and integrating them with Blueprint logic to simulate real gameplay behavior.
Using UMG, I reconstructed the pause menu, HUD, and skill tree screens with full visual fidelity, ensuring each component was responsive and aligned with the original design vision. Using both Blueprints and animations
Rebuilding in UMG
Key Learnings
Balancing Art with Usability
One of the biggest challenges was designing a UI that felt visually expressive without sacrificing clarity. I had to strike a careful balance between bold, stylistic elements (like brush textures, glowing icons, and layered visuals) and clean, readable layouts that players could quickly understand. This reinforced my ability to design interfaces that both enhance aesthetic identity and remain highly functional.
Understanding End-to-End Game UI Production
From wireframes and mockups to animated, interactive screens in Unreal Engine, this project helped me experience the full UI/UX pipeline. I gained hands-on knowledge of how UI evolves through each phase (planning, visual design, implementation, and iteration), strengthening my ability to collaborate across design and development in a game production context.
Presenting Information Without Breaking Immersion
Whether it was the Zen meter, trick score system, or pause screen, I learned how to deliver essential gameplay information in ways that support player immersion rather than interrupting it. Every UI element was placed and styled with context in mind, reinforcing worldbuilding while staying accessible in the heat of action.