banner.png

Animation Test

Stylization

While concepting out this redesign I didn't want to do an entirely diegetic UI, but I still wanted to bring elements in to the design that complimented the Final Fantasy aesthetic. The original UI stylization feels sterile and devoid of all the personality that FFIX holds. My target for this UI Redesign was "clean" and "charming." The use of blurred overlays for the menu backgrounds helps to not break the immersion between the game and the player.

Character Select 

For the character select screen, I wanted to create a better sense of hierarchy so I placed the characters vertically underneath a header where all the other information would be available. The functionality stayed fairly similar, but rather than having to select the screen that you’d want to look at for each character, you could just click on the portrait and it would bring you to their universal status screen.

CharacterSelectExample.png

Character select menu final

character select.png

Character select menu original

FA20_ART450_LRuelos_HannahMarquardt_Char

Character select menu wireframe

Status Menu

In FFIX’s original design, the character’s information is spread apart multiple screens, making it annoying to get what you need right away. With RPGs it’s important for the player to get the information they need as quickly as possible. While creating the status menu redesign, I made it a point to condense redundant information and display the crucial information in one spot. A thing I see with RPGs (even modern RPGs) is have menus with too much information that can be overwhelming to the player, I didn’t want this to turn into that so I tried to keep it as clean as possible. I also took another look at the equipment icons and designed them in a way that they would easily read as which piece of armor they stood for, the original UI is a bit confusing on first glance and only really makes sense based off of the item's name. 

StatusExample.png

Status menu final

StatusExplainedWireframe.png

Status menu wireframe and original screens

Battle UI

The first thing I decided to do with the battle UI was to scale it down. Having UI that covers 50% of a screen ruins the immersion that a game can have. Compositionally speaking, I wanted to keep attention on the center of the screen so I pushed the UI to frame the center of the battle, rather than cover it.

A thing that I wished for while playing was a visual way to tell how low a character's health was so I added the health (HP) and magic (MP) bars to tell, rather than having to read numbers. Bars are a quicker way to tell what is happening. I was going to add a commands menu with a scroll bar similar to how the Final Fantasy VII remake has, but this game is very dependent on making quick decisions in the heat of the battle due to the ATB (Active Time Battle) meters, so I opted to have all the commands visible without making the player scroll down to the option they need. At times while playing I felt myself forgetting who's turn it was in the middle of a fight and it was hard to quickly distinguish that though the UI so I added clear names for each player's health section. 

BattleExample.png

Battle menu final

1in battle2.PNG

Battle menu original

BattleMenuWireframe.png

Battle menu wireframe