Pixel Perfect Implementation
As a UI Tech Designer, I create pixel perfect implementations of the assets designed by the art team. Successfully realizing these designs requires a deep understanding of asset pipelines, an eye for detail, and a lot of counting individual pixels. When technical limitations or time constraints make the original concept untenable, I cooperate closely with the artists and designers to iterate to a viable solution that maintains the original concept’s integrity.
Pixel perfect isn’t just a buzzword, it’s a metric of success. As an example, here are some side-by-side comparisons taken from my code reviews for the work I did on Madden 2020-2022. You can see the photoshop mockup juxtaposed with the final in-game implementation of the design.
Madden (2020, 2021, 2022)
A lot of the work I did on Madden was building features and tools for Rime, the UI tool in their new Frostbite engine. I built linear-srgb color utilities to help maintain our style guide, expanded our component library with things like scrolling lists and modular frames, and made use of cutting edge engine features like render texture based canvas rotation.
New Features, New Tech
I developed infrastructure for new features like the player text messaging feature introduced in Madden 2020, and the numerous on-field meters, bars and graphics that were introduced and renovated every year.
I joined the small team at Oath Games to help renovate Ethyrial: Echoes of Yore after they acquired it from the original dev team. The extant UI was entirely built from asset packs, and was both buggy and non-performant. I built a common component library to maximize asset reuse, refactored the front end architecture to use more efficient patterns, and leveraged my experience working with larger teams to create workflows that enabled the designer and I to rapidly implement assets without sacrificing design fidelity.
Ethyrial: Echoes of Yore
Figma to Implementation Workflow
The size of the team, and the speed at which we were working meant that I had to be far more involved in finding solutions when the original designs failed to meet our standards once they were in game. I collaborated closely with the designer to make sure that the solutions we found maintained his vision for the UI without sacrificing performance or function.
The Player Info Panel is a perfect example of this process. The initial design was both lacking important elements, and was too information dense to be legible. I built it using dynamic layouts and common components, so I was able to adjust the elements in real time as we iterated a solution we were satisfied with.
Iteration and Collaboration
Final Dynamic Visibility
Over the course of a few months, I replaced almost all of the elements of the player HUD, diegetic UI, and many of the game’s menus. The individual elements are too many to list here, but you can see an overview of the work we did in the patch announcement we released to the players.