Injustice: Gods Among Us (2013) - User Interface Breakdown
The primary design goal throughout the Injustice front end was to provide the player with a sleek, cinematic experience - something less like a traditional videogame, and more of a multi-faceted interactive experience.
To this end, the layout of the main menu was designed to evoke the look and feel of a Blu-Ray menu: a lower-third horizontal menu placed over a stylish teaser (produced by Blur Studio).
As a player selects a menu item, it animates up to become a menu title, as the sub-menu builds on from below creating a smooth flowing menu, helping the player know his current position in menu tree.
The lower-third Menu Bar is a consistent element throughout the game, appearing in the Main Menu, Online, Pause Screens, and Moves List to name a few.
Chapter Select screen of the Story Mode also reflects that of a Blur-Ray menu, featuring thumbnails of scenes, and opponents.
The Moves List is a crucial screen for a fighting game - it lists all the controller inputs required to perform various moves. Again, following the template of the Menu Bar, we list the categories of moves: Basic Attacks, Combo Attacks, Special Moves, and Character Power. Each page lists the commands, as well as Frame Data for each move. Frame Data is a technical statistic used for high-level play and is typically only found in player guides outside the game. We felt it would be a real asset to the player to include this information in the game as it alleviates the need for outside resources. We worked closely with Gameplay Designers to implement this data into the Moves List screen, resulting in one of the most acclaimed UI features of the game.
One of the major hurdles to learning a fighting game is the need to familiarize yourself with the moves and memorize all the required commands. Move Tagging was designed in order to let novice players reference the moves at any time. Pressing Y over a move in the Moves List will tag it, and will remain on the screen during gameplay. This was highly successful with players and critics, many citing it as a feature they wish to see in all fighting games going forward.
The Player Select screen in Injustice was one of the most meticulously crafted screens in the game with a wide variety of elements at play. I created a full video breakdown and detailed walk-through of the design process here:
S.T.A.R. Labs is a game mode where players can play through over 300 missions with specific rules and modifiers.The screen was designed to convey all the pertinent information while keeping it as clean and easy to understand as possible. The bottom half of the screen contains a grid of select-able missions, each with a logo corresponding to the Character the player will be playing. Each cell also displays up to three stars achieved for that mission. The pagination marks at the bottom fill up as the player completes all possible stars on the entire page.
The top portion displays a preview of the mission on the left, and a text description on the right, with the mission name, story text, requirements for achieving all three stars, as well as a total star counter.
The Battles Mode of the game pits the player against a succession of opponents, each group featuring a gameplay modifier. The player is first presented with a list of modifiers, with a preview of the group of opponents he will be facing. After the player chooses his modifier and character, we start at the Final Boss and pull back trough all the opponents building tension, finally resting at the main character in a ready stance facing the battle. The stage info builds on and the player is ready to begin the fight.
We used Superhero iconography throughout Injustice. However, not all DC Superheroes actually have their own logo. And those that did often needed custom logos for alternate costumes and variations. Here is sample of some of the icons designed for Injustice.
Note: Some icons were modifications of pre-existing logos
Additional Art By: Matthew Secrist.
In keeping with the cinematic focus of the game, an End Title sequence was created that one might find in a superhero film.