What is it?
This work include two screen restructurations and a new Artistic Direction for Endless Space 2 ship customization menu. Everything was made in 12 working days.
The goal was to propose new ways of displaying infos and so, new ways of using the screen.
This page sums up the work in its essence. If you want a more detailed explanation download the design document by clicking the button below.
Credits to: Amplitude Studio, owner of Endless Space 2
UI design intentions
Starting from the original screen, I focused on two elements on the screen to restructurate the layout.
First, I decided to bring the ship stats to the front and push the ship 3D model to the back. For the second idea, I decided to do the opposite.
Original Screen
Behind the first idea lie the intention to give players the tools they need to make the best decision.
Ship customization have a lot of options, so I decided that giving players a clear vision of what they are doing is the right thing to do. By seeing clearly the stats evolving before and after selecting a custom, players can efficiently prepare for every situation without getting distracted.
The menu is meant to be used and read for left to right, as a way to make it more intuitive to use.
As a trade-off, the ship 3D model is smaller so the immersion is lacking a bit and the menu can look a bit stern.
The second idea focuses more on the immersion by giving the ship a centered position and a bigger size. I wanted the menu to remind of some car custom menus in games (GTA V, Gran Turismo, Motor Storm...).
The ship model is epurated for the player to admire its creation and the infos and stats are pushed to the edge to free as much space as possible. The different modules are diplayed as a list to simulate and feel like a marketplace.
As a trade-off, the menu is less easy to read and players will have to move their eyes from one corner of the screen to another if they want to see all the infos ans stats in detail.
Artistic Direction intentions
To create something different from the original screen, I wanted to do something less epurated, more bulky, more structurated that will remind the steel ships are made of.
I use SF UI code such as squares, hexagons, 45° angle and the dominance of white, blue and glow.
I also remade some icons to make them fit more with the new direction and the SF setup the game sets on.
(ex: the sword icon become an explosion icon to remind of the ship canons)
Because this Artistic Direction is taking a lot of space on screen, I added a space backgound as a way to make players feel the depth of space, making the screen breath a bit.
I use the first Wireframe to apply the new Artisic Direction and here is the final result.
From left to right: Normal, Hovered, Disabled, Clicked