About

In Spring 2023, while working at UX is Fine as a UI Art Director, I was brought on to lead a bluesky exploration phase for Theorycraft’s then upcoming hero-shooter SUPERVIVE, and manage a small team of designers while we worked in coordination with Theorycraft’s Wade Winebrenner (Senior UI Designer) and Josh Smith (Art Director). This was originally an 8 week endeavor, that I believe was later expanded towards 16 weeks.

The high level brief was to explore the theme - MAGE PUNK - define it, and come up with a visual direction for the game’s UI presentation that embraced that style and could be used as a solid foundation for the rest of the game’s graphic design. We were given access to years of concept art, and all of Wade’s own UI exploration up until that point to draw from. Over the first couple weeks we worked really diligently to first define the mercurial target of what magic is and how it’s represented in the universe, and start pulling on shapes and colors that spoke to us. The client was coming to us from a much cleaner and simpler visual design they developed for the UI, and wanted to try and embrace the chaos from the magic to see if that could be an aspect the branding direction could to lean into.

As we moved into style mocks, beyond task/team management and client relations, since we needed to move fast and hit the ground running my main focus as an independent contributor was on building a foundation and establishing the shape/color language for a core set of assets that could get reused or used to inform more bespoke work that was coming down the pipe. So things like buttons, interactive and read-only panels via features such as the Front End, Character Select, and the HUD - to build up a library of assets that could be ready for our limited resources for animation and in-engine work later on.

Most of this work showed up in-game at one point but has since been replaced by work that happened after our brief time on the project wrapped and the client had identified a branding direction that they wanted to shift the product towards.

For context there were two seats on this contract, I occupied one for the duration of the contract, and rolled people with different specialties on and off the second seat as needed, and I think the logistics and unique time constraints warrant sharing more WIP type progress images alongside the final mockups/deliverables.

Team Members:

Jerome Tieh (UI Artist) - Animation mock-ups, Front End comps

Ryan Wolper (Senior UI Artist) - Shape language exploration, Front End comps

Grant Thurston (Senior UI Artist) - Unreal tech exploration

Christian Herman (UI Artist) - Unreal tech exploration

Tania Gonzalez (UI Art Intern) - Iconography exploration

Role

UI Art Director

Tools

Unreal Engine 4

Adobe Photoshop

Adobe Illustrator

Adobe After Effects

Miro

Dates

2023

Mage Punk Exploration

We were asked early on to help define the visuals of magic in the game. The high level goal here was to come up with some unique shapes that could inform the rest of the UI, while getting a chance to dive into the world and lore of the game and become more acquainted with it. We also used this as a test bed to explore different font usages. My own exploration here revolved around this idea inspired by music notes and runic symbols that could sort of flow into each other, extreme thick to thin lines like in Arabic calligraphy.

From this point on, we leaned more into the magic shape language developed by Ryan Wolper that had a blockier black letter design and animations developed by Jerome Tieh.

The HUD

HUD v4 - (Disclaimer: Iconography such as resources, abilities, and items were temporary assets that the client had us use for placeholders that I believe were from various asset packs to get a general vibe for what they’d later need to make.)

HUD v4 - blocking out recharge animations, and idle animations for player ults

HUD Exploration

Early exploration, building up scaffolding, trying to get the most bang for the buck with our short time on the project so I started using the buddy widgets to get a sense for things like progress bars, character portraits, states, and shape language for containers. In the end, my goal through the process was to lean into the gritty texture and grungy edges of things while looking for a way to still feel a little airy and ethereal.

One thing that became a cornerstone in my designs early in the process was the Player widget in the bottom left. The circular shape and its use of magical shapes in the container became something that was latched onto by the team that we then used as inspiration going forward.

The Lobby and Defining the Button Palette

Lobby and Button Exploration

I worked on the Lobby in tandem with the HUD, so there were things we were identifying through the iterations on both screens and that I was adopting from designs being worked on by Ryan Wolper and Jerome Tieh that helped inform the process as a whole.

Hero Select and Hero Info Menus

Hero Select Exploration

Progression stages as I explored layout and shape language before settling on a pass that I think really resonated with the whole team. Ability icons in the Hero Info page were designed by Tania Gonzalez.