Videogame UI
Mistborn HUD
HUD Design project for a fictional video game based on the book Mistborn by Brandon Sanderson.
Role
UI Designer
Tools
- Figma
- Illustrator
Timeline
April 2025 - June 2025
Description
I made this video game interface thinking I would practice my abilities in design in a different medium that I didn't know before, in addition to practicing the autolayout and component tools in Figma.
I considered the gameplay as an action game with powers, which would be reflected within the interface itself, and was easy to understand.
Navigation Map
To begin designing, I made a navigation map based on the flow between every screen of a video game of this same style, considering the home, configuration, load game, and inventory screens.
References
With the navigation map in hand, I conducted research on references that allow me to have a visual guide of what the standard is for each of the screens.
Style guide
To create the style guide, I chose serif fonts and brown tones based on the atmosphere of the book it is based on.
For the icons, I took the power symbols of the books, and for the buttons, I used the most common location of the elements based on the references.
Wireframes
See Wireframes in FigmaBefore I started with the mockup, I designed a wireframe of the 6 most important screens based on the navigation map, which are home, configuration, HUD, power selector wheel, and inventory.
Mockups
See Mockups in FigmaI apply the graphic elements and design every screen, and add the content corresponding to every page.
The most significant change I made was the background, which consists of flames, referring to the extremely hot world in which the book unfolds.
The base 3D render for the HUD screens I made, taking free assets, but only as a placeholder.
