TechDeck UI & 2D Art

For this brand's project, I was tasked with making a UI that fit the brand's skater, early 2000s feel. It had to be colourful, with grunge elements but at the same time I had to be mindful to not overload the project with too many textures, as it was still a mobile experience. The solution I came up with involved making extensive use of the image splitting UI options in Roblox Studio and the re-use of many texture elements to limit loading times.

Another interesting solution was introduced through the skill tree UI; we needed a very flexible, multi-layered system that could be changed and iterated in the future as needed. I worked very closely with code and out UX designer to achieve the hexagon menu.

Along with the showcased elements I also helped make decals and set-dressed many levels. For this project, I worked closely with Marcus Anglestad (https://www.artstation.com/marcusanglestad) as my art lead.

I really enjoyed this project and had a ton of fun.

HUD layout over skybox experience view, including real time progression bar at the top, currency, bonuses, speed, real time lap time, menu, speed boosts and toolkit placeholder.

HUD layout over skybox experience view, including real time progression bar at the top, currency, bonuses, speed, real time lap time, menu, speed boosts and toolkit placeholder.

Backpack, shop, daily rewards and Roblox currency store UI.

Backpack, shop, daily rewards and Roblox currency store UI.

Free reward pop-up, settings menu and message pop-up.

Free reward pop-up, settings menu and message pop-up.

Skill tree progression UI - unlockable with many stackable sub-menus.

Skill tree progression UI - unlockable with many stackable sub-menus.

Some HUD icons, colourable skill tree icons and menu bases. Due to this being a mobile game, all menus were built with the four shapes on the right, with built-in Roblox Studio UI image splicing for optimisation.

Some HUD icons, colourable skill tree icons and menu bases. Due to this being a mobile game, all menus were built with the four shapes on the right, with built-in Roblox Studio UI image splicing for optimisation.

A couple UI effect textures and illustrated icons.

A couple UI effect textures and illustrated icons.

Two versions of the skybox for the experience. The texture was imported into Blender and exported with the appropriate projection to appear as a sphere instead of a cube.

Two versions of the skybox for the experience. The texture was imported into Blender and exported with the appropriate projection to appear as a sphere instead of a cube.

Live experience preview.