Mysticum Mundus
This interface was created in Figma for a top-down ARPG in the early stages of development. The project is inspired by retro mechanics and aesthetics, but takes it in a new, more modern direction. I focused on creating a clean, sleek concept layout that retains echoes of its predecessors, and on getting the layout to an implementable state as quickly as possible.
Click on an image to enlarge it.
The Baseline
The project's original UI was created with marketplace assets that the developer had on hand. It was functional, but lacked unity and clarity in many respects. I was brought on to refine it and establish a baseline to be refined with new assets in the future.
Given the lightweight nature of the project's state at the time, I opted for a minimalistic moodboard primarily composed of visuals from Diablo and other classic ARPGs. The original design (pictured) was also key in informing my direction for the project.
My Process
My first draft of the HUD featured each prominent sector of the UI in its own corner. I centered and united the two halves of the bottom bar to keep players' focus in one location. Overall, the final layout was more similar to the baseline than it was different, though a variety of smaller QOL changes were made.
Once a core mockup was done, I established a warm, mystical palette that used rich browns as a baseline and eye-catching, contrasting shades of red, cyan, gold, and purple for specific elements. By assigning a given category of attribute and element to a specific color, I streamlined the busy look of classic ARPG interfaces and gave players strong visual anchors.
For iconography, I went with a language of simple silhouettes that reminisce of the game's low-poly art style, plus a few prominent circles.
The end result demonstrates the benefits of iterative agility, expert use of repeating motifs, and an overall focus on clarity and cleanliness in designs. I'm proud of my contribution to Mysticum Mundus, and I hope to see the demo launching soon.