A Game UI Practice and Case Study: Ghostwire: Tokyo

Ghostwire: Tokyo is one of the latest games I've played, and honestly, I found the UI and Design application fantastic!

I was fascinated by how the actions and interactions behaved when the character used his powers, how the element's micro-animations, and visual identity matched the game storyline (a haunted Tokyo overrun by supernatural forces).

Why not try to reproduce a few of the UI elements in Figma?

.....................................

Before getting started...

Before starting the Design project right away, I like analyzing how elements were built, the proportions used, why the alignment used was "x" and not "y", why the spacing used was not consistent throughout the screen:

After a few questions and analysis...

I improved the spacing and element positioning by using a consistent spacing between elements (increase legibility and recognition), aligning elements correctly and using consistent font sizes.

Before and After 👇

Improvements 👇

Improved Design 👇

> All elements created are ready to be applied and are responsive. Icons can be converted as .SVG and Vectors, ready to use.

> All "atomic" elements were used to create more complex components (as the main selection bar), and I was able to design an UI Screen application of easy maintenance, in which the elements arrangement can be easy modified for a better visualization and for designing multiple screens with ease.

> My goal was to replicate the UI Screen in a way that is easy to represent and update.

Changing the elements easily 👇

Next steps:

As I continue to replicate the Screens, I wanna be able to reproduce the majority of elements used in the Game UI, and create a live components library of the whole game. Another goal is to create a few micro-animations in Figma, as a way to test out the software capabilities of representing quick ideas that are really close to the final result.