By Art Director John “The Wingless” Burnett. Industry leader in Game UI Education.
User Interface Game Design Course & Resource for public education.
Tags: Student Showcase, Fighting Games, Game UI Artist
Introduction.
Iredeemables is one of my favorite student projects, from the subject material, to the genre, to the infectious energy this student brought to the table (And to that student, I haven’t forgotten that middle names are a very, very big deal!) Iredeemables is an excellent showcase of how seemingly simple ideas can spiral into incredible complexities – made all the more manageable with a 1-on-1 Mentor.
Setting the Stage
Students get to make whatever they want in my Game UI Mentorship. This ensures they’re not just focused or familiar, but fanatical about the task at hand. This particular student wanted a console fighting game – something dark and gritty set in the 90’s; Dej Jam adjacent, let’s call it.
Ringside Market Research
I can’t imagine what a dry, dull affair it must be to be a Product Designer doing market research. Wave after wave of the same app screen with the only creative differences being a button color or dark mode. In our world, market research is half the fun and fascination.
Me and my Student scoured the internet for game references – sure – but that’s where amateurs stop. We moved beyond and looked at movie posters, album covers, fine art – anything that truly spoke to the mood and tone of the project. Then we pulled shape and form from that established tone. Never the other way around. Starting with the art is an absolutely apocalyptic move on the job, and sets you up for a grisly 11th hour somewhere down the line.
Measuring Twice, Punching Once
But researching is useless if it isn’t immediately practical. We divided the pile of jpgs into a few distinct categories:
-Art that largely informed the atmosphere we were going for. The Wire, Fight Club, and Def Jam were extremely close to the vibe we wanted.
-The UX. We didn’t just glance at fighting game UI’s, we tried to deconstruct their failings. Was a health bar too designy for its own good? Was the character select screen a boring web 2.0 affair? Were they doing any cool ideas that tied in with the theme? Did they understand the assignment?
-The established tropes. Was there a standard color for a health bar? (nope!). Does everybody put in an infinity symbol for the timer if it’s set to endless? (yes!). Can you set up options in the character select? (depends!). This was a deep exploration into genre-specifics a core audience expects as soon as the Title Screen fades in.
Fighting Game UI Architecture & Genre Tropes
Translating a dark, gritty 90s mood board into a high-performance fighting game interface requires a razor-sharp balance between extreme visual style and instant tactical readability. Use these structured technical checkpoints to bridge the gap between atmospheric market research and functional screen layouts.
Mood-to-Shape Workflows
Aesthetic Sourcing: Look past basic game screenshots. Pull structural shape language, grit, and high-contrast composition from raw cultural anchors like 90s album art and film cinematography.
Tone-First Architecture: Establish the core psychological mood of the game world before building individual UI assets. Starting with raw components rather than a defined style guide leads to fractured visual design.
Fighting Game UX & Telemetry
Combat Telemetry Balance: Map out health bars, combo counters, and round timers so vital frame-data remains perfectly legible at 60 FPS without blocking peripheral combat vision.
Character Select (CSS) Flow: Deconstruct roster spacing, fighter profile previews, and variant menus to optimize the high-intent pre-match interface.
Genre Trope Calibration: Benchmark fighting game community (FGC) expectations—like endless-timer infinity loops—while cutting out outdated Web 2.0 menu layout patterns.
READY TO LAUNCH YOUR GAME UI DESIGN CAREER?
TRUSTED LEADERSHIP . REAL EDUCATION . PERSONALIZED CLASSES . STRUCTURED SAFE SPACE
This isn’t a dream, this is Destiny. Join my exclusive one-on-one Mentorship Program in Game UI Design and truly aim for the stars. Seating is extremely limited to only 5 at a time.
Wireframing the Fight
The Mentorship moved swiftly from early concepts to wireframes – simply because the complexity of the fighting game screens are relatively straight-forward. At the wireframe phase, we explored a few ideas that went way beyond simple positioning and hierarchy.
For example, the student thought of stats appearing at the character select screen, a compact super meter should reach 3 levels, and critical states should be legible on the health bar treatment – some really slick stuff. A user interface is deeply interwoven with mental templates everybody genre-wide can ease into. But they’re also about hyper-nuances that clearly separate a Street Fighter from a Mortal Kombat from a Dissidia from a Teras Kasi.
The Art Pass
We moved swiftly from early concepts of where everything felt right being to wireframes – simply because the complexity of the screens were at a minimal. Conservation of time is an important and often overlooked aspect of our work – so if you can skip certain phases confidently, you probably should.
But don’t let that relative simplicity fool you; fighting games can get hard even at the wireframe phase. We toyed with positioning, scaling, and occluding elements – all things you should definitely tackle together than as separate assets. And dear God, don’t just make art first – the wireframe isn’t just to plan, it’s to give everyone on the team clarity and confirmation. 11th hour problems – begone!
Complimentary Screens
I’m all about practical use of our time in my Mentorship, so we focused on the career-building screens: the hud, the character select, that kind of thing. Once those core screens were in a good place, it was time to compliment them with more screens to show consistency and innovation.
My student took the initiative and made a title screen and tons of state changes for the existing screens since nothing around here exists in a static vacuum (even if the .jpg does). This is exactly what Studios want to see: thoroughness and thoughtfulness of ideas that would sneak up on the rest of the team. Localization… I’m looking at you!
Wireframe Optimization & Dynamic UI States
Transitioning from asset wireframes to a cohesive screen matrix requires meticulous layout budgeting and an eye for how static elements react during live gameplay. Use this tactical blueprint to structure your core screens and map out the dynamic states that studio lead designers look for.
Layout Budgeting & Mechanical Logic
Mechanical Wireframing: Map out game-specific mechanics—like multi-tiered super meters, roster stat overlays, and critical health-state warnings—directly into the layout before touching any polished art.
Viewport Scaling & Occlusion: Plan for component positioning, layer hierarchy, and visual occlusion (overlapping interface elements) globally so the HUD remains perfectly balanced during chaotic local play.
Dynamic States & Production Thoroughness
Dynamic State Changes: Never design in a static vacuum. Document how layout assets shift across multiple active states, such as player select animations, hover states, and combat damage feedback.
Edge Case & Localization Planning: Expand the portfolio suite with vital secondary screens (like main titles and option flows) to demonstrate thoroughness, proving you can handle localization limits and 11th-hour design updates.
Let’s Sum Up
Look Beyond the Screen: Don’t stop at game references. True market research means extracting shape language, grit, and mood from film cinematography, album art, and posters before mapping out a single visual asset.
Form Follows Tone: Never start with the art first. Lock down your conceptual psychological mood before engineering components, or you risk an absolute, catastrophic redesign crisis at the eleventh hour.
Calibrate the Tropes: Fighting game UI demands deep respect for community expectations—like combo counters and health bar behavior—while ensuring critical combat telemetry remains perfectly readable at 60 FPS.
Plan the Occlusion Early: Tackle positioning, scaling, and overlapping elements simultaneously during the wireframe stage. Use this phase to give your entire team layout clarity and spatial confirmation before building high-fidelity art.
Prove Portfolio Thoroughness: Studios don’t hire static image creators. Build out dynamic state changes, secondary title screens, and option flows to prove your layout architecture can handle edge cases like localization.
Authority Resources & Industry Insights
To anchor your genre research, interface benchmarking, and competitive frame-data layouts against current industry standards, explore these high-traffic sector authorities:
- TheWingless.com – My alternative personal site with a treasure trove of UI Game Design Blogs.
The Game UI Database – Inspect comprehensive, high-resolution interface captures across thousands of shipped titles to reverse-engineer layout consistency.
Infil’s Fighting Game Glossary – Master the complex terminology, frame-data mechanics, and competitive system architectures driving the fighting game community (FGC).
Game Developer Design Postmortems – Access deep technical breakdowns and production retrospectives directly from lead interface engineers and studio directors.
UX Collective Case Study Vault – Study professional frameworks for asset wireframing, player telemetry mapping, and optimizing cross-platform screen real estate.
