TABLE OF CONTENTS
• STYLE PITCH • MAIN MENU • KUSTOMIZE • FIGHT HUD • TOWERS OF TIME •
STYLE PITCH
Mortal Kombat 11 is the latest in the long running franchise known for its over-the-top violence and colorful roster of characters. The fact that it’s had a nearly 30 year history highlights the importance of art direction, because it’s longevity relies on new ideas and fresh perspectives. But when it comes to designing a new entry, it also raises the stakes for finding a compelling new visual direction while still honoring what came before. Early in development, various style were explored - each with it’s own strengths and weaknesses. Concepts presented in this style pitch can be seen in detail in the sections below.
MAIN MENU
USER EXPERIENCE
While various artistic designs were being developed, the UX design was also being re-structured from the groundup , marking a huge departure from Netherrealm’s previous games. Below is a breakdown put together with the help of UX designer, Jordan Hedges.
ART DIRECTION
The artistic design of the Mortal Kombat 11 Main Menu was a highly iterative process, starting with a wide-ranging series of concepts, and ultimately arriving at the design below. Also included are some unused alternate concepts.
MAIN MENU - Alternate Concepts
INSPIRATION / REFERENCES
KUSTOMIZE
Mortal Kombat 11 greatly expands the customization options first introduced in Injustice 2’s Gear System. Now players can not only change the characters three gear slots, but also choose alternate costumes, intro and victory animations, special moves, and AI behavior. The presentation has also been upgraded. Each gear piece has it’s own custom cinematic sequence complete with camera moves, character animation, FX, audio, and even motion graphics.
MOTION CAPTURE CASE STUDY: THE JOKER
CHARACTER SELECTION
The centerpiece of a fighting game’s UI, the character selection screen is the highest traffic portion of the game and offers a unique opportunity to quickly see each character up close.
The first iteration featured characters squaring off in a wide shot, then zooming in closer upon selection. Then as we see each character close up, we see a possible scenario of the fight play out between them, as if they were battling in their minds. This concept was inspired by the 2004 film Hero which features a similar scene between Jet Li and Donnie Yen.
Some assets were used from Injustice 2 in order to block out the sequence.
The final version reversed the choreography, starting with a close up and zooming out.
Character Select Gallery
FIGHT HUD
The game requires an array of HUD elements that could be on or off at any given time depending on the state of the game or the mode of gameplay. Screen real estate was very carefully planned to accommodate all possible elements combinations.
TOWERS OF TIME
The player is faced with a series of fights presented as a “Tower”. Sets of Towers are grouped together thematically, and the player can navigate between multiple sets as well as the towers within. This offered some challenges in navigation while still maintaining dynamic and evocative visuals. Below are the designs of Towers of Time, as well as some unused concepts.
Tower of Time UI Comps - Full Sequence