Highguard HUD Breakdown

This is the progression of the HUD in Highguard from Figma spec (done by Luke Aiello https://lukeaiello.com/) to final implementation in Unreal Engine. A big part of my job as a Technical UI Designer is to take the UI/UX Designer and UI Artist's vision and implement it as 1:1 as possible. Our team leveraged Figma, Unreal Engine, and Photoshop to make this happen. After the initial UX design and wireframing (done by Jamile Marcellino https://www.linkedin.com/in/jamile-marcellino/), the UI Artist (Luke Aiello) would iterate on the final art spec in Figma and provide detailed breakdowns of the content. When the art spec was completed and passed off, I would iterate on it in Unreal Engine frequently taking screenshots and leveraging Photoshop guides to ensure my implementation was 1:1.

With the exception of iconography (abilities, weapons, care package, etc.) all of the work shown was built either using the Material Editor or UMG. No rasterized bitmaps were used for HUD elements.

At the time of this post, some elements have pivoted from the original spec and may not be accounted for in the Figma examples.