Sai Legacy - User Interface Designs

Main Menu

Tools - Adobe XD, Adobe Illustrator

 

Ability Select - Concept

Tools - Photoshop

Character illustration used for concept purposes from Destiny

 

Ability Select - Early In-game

Tools - Unreal Engine 4, Adobe XD, Adobe Illustrator, Adobe Photoshop

These videos show the progression from concept (Adobe XD) to finished and fully implemented ability UI system.

 

The system:

A UI display that would appear every time the player would unlock an ability. The screen would display an image of the player character, and give them a choice between the two upgrade options.

Hovering over an option reveals more information to the player about the ability (its use, power, key bind etc.) making it clear as to what the player will get if they select it.

Once selected, they player is granted that ability, and the character portrait displayed on the UI screen evolves to match the new addition to the players roster of abilities.  This creates an obvious image of what the ability does and how it will look.

As the game goes on and more abilities are added, the render of the character continues to change and evolve, painting a personal and unique character for each play by the end of the game.

Stretch goal:

The player character in game also changing to fit the new abilities gained.

The Book of the Forest

Tools -  Adobe Photoshop

The Book of the Forest is Sai's book in which she keeps all her information about the forest, enemies and other characters she might come across throughout the game. 

 

The idea was to create an immersive piece of User Interface, that would not only add depth to the story, characters and lore of the game, but also provide the player with vital information without imposing pop-ups and distracting UI.

 

A 2d artist created the background of the book itself, while I created the sketch drawings and filled it with information myself.