Hero image for RealmBrewer, featuring the RealmBrewer logo on top of an illustration with various fantasy creatures and humanoids in a tavern and garden setting.

Realmbrewer

A pink and purple floral divider

Role

UI Artist

Timeline

October 2021 - December 2021

Tools

Figma, Illustrator, Discord

Website

https://www.mythiarystudios.com/

About

RealmBrewer is an upcoming tabletop RPG which gives players the tools to make any D&D campaign their heart desires. With a focus on accessibility and player freedom, RealmBrewer’s flexible mechanics put the full power of imagination into the hands of the player.

A pink and purple floral divider

Skills

Client Communication
Freelancing
Information Architecture
Wireframing
Low-Fidelity Prototyping
High-Fidelity Prototyping
UI Art
Game Design

Process

1. Client Acquisition
2. Receive design request
3. Wireframes
4. Information Architecture
5. UI style moodboard
6. Present first pass to client
7. Iterate on first pass based off client feedback
8. Present final pass to client
9. Create UI blanks and provide client with all relevant files

Trailer

Client Brief

After coming across a job post seeking a UI artist for a tabletop RPG, I got in contact with two of Mythiary Studios’ founders. They explained that the only things holding their pitch deck back were 1) a couple of UI mockups for a HUD system and 2) a visual scripting editor known as their ‘Homebrew System’.

Wireframes

At our next meeting about a week later, I presented my clients with wireframes for both the HUD (heads-up display) and Homebrewing screen. 

I wanted the HUD UI to take up as little space as possible, so that the player’s focus could remain on the gameplay in the center of the screen. However, my clients pointed out that certain icons and buttons could still be enlarged to provide greater accessibility for players.

Meanwhile, the Homebrew screen would appear similar to the visual programming language, Scratch. Players could drag and drop blocks of code—shaped like runes—into the editor to create complex cause-and-effect scenarios for their characters.

A wireframe for the HUD, with simple UI panels representing the initiative tracker, chat, menu, hotbar, and systems information.
A wireframe for the visual scripting editor, featuring hexagonal-shaped "nodes" that can be dragged and dropped onto a panel with repeating hexagon patterns, which takes up 4/5 of the screen from the right.
Wireframes for the HUD (left) and Homebrew screen (right).

Information Architecture

Since my tasks were only to create singular mockups for each screen—and did not include showcasing interactions—I found it helpful to create some rudimentary information architecture charts. This allowed me to keep track of necessary features and where they would be placed beneath expanding UI elements.

An image of an information architecture map, showcasing the necessary features for the HUD, including: hotbar, menu, turn order tracker, systems information, compendium, and settings.
Information Architecture Tree for the HUD.
An image of an information architecture map for a visual scripting editor, or Homebrew screen. It showcases features like: autosave, major nodes, and implementation.
Information Architecture tree for the Homebrew screen.

Moodboard

To ensure I properly understood my clients’ vision for the UI art direction, I also created a moodboard consisting of UI screenshots from several different games. Through this moodboard, my clients and I were able to narrow down the art direction for the screens.

A moodboard of games with similar aesthetic and visual styles to RealmBrewer's aspirational style.
Moodboard of UI styles to take inspiration from.

First Pass

I presented my first high-fidelity UI pass to my clients at my subsequent meeting. While they felt it was good overall, I still received some great feedback on my screens.

For the HUD:

• The hotbar (bottom-left of screen) was not optimally placed, and could instead be placed at the bottom-center of the screen
• There needed to be a hotbar key for each numerical button input on the keyboard, as well as the ability to toggle through multiple sets of hotbars
• The chat UI could benefit from clear visual separators between chatting players
• The Initiative Tracker (top-left of screen) had too much unnecessary space left over in its current iteration, and could be redesigned to showcase more of the game behind it

As for the Homebrew screen:

• It was visually inconsistent with the UI from the HUD—as if the two screens didn’t belong to the same game
• The highly rendered runes were too visually distracting
The first pass of the visual scripting editor. The background is dark purple and gray. The runes are rendered in the shape of jewels, with heavy use of gradients and lighting effects. The first pass of the HUD UI, with the hotbar on the bottom left, systems information above it, and a large initiative tracker contained in a transparent rectangle on the upper left of the screen. On the right side of the screen is a large chat window.
First pass at HUD (left) and Homebrew (right) screens.

Final Pass

With this feedback, I iterated on my designs and presented a final pass to my clients. 

In the HUD, I moved the hotbar, added opaque boxes behind each individual chat bubble in the Chat UI, and redesigned the Initiative Tracker to take up less unnecessary space. Additionally, I designed UI elements—such as frames, arrows, and scrollbars—to have an Art Deco style, in accordance with my clients’ design specifications.

As for the Homebrew screen, I changed the overall color scheme to match the aged-paper aesthetic of the HUD panels. I also simplified the runes to be closer to a flat design style.

The final pass of the HUD UI, overlaid on a pirate background. The hotbar has been moved to the bottom center of the screen. The initiative tracker's initial transparent rectangle has been removed so that more of the background can be seen. The chat window now has clearer chat boxes between users.
Final HUD screen with art deco styling.
The final pass of the HUD UI, overlaid on a plain white background to showcase just the UI panels. The final pass of the HUD UI, overlaid on a volcanic background with large D20 dices strewn across. The final pass of the HUD UI, overlaid on a pirate background. The hotbar has been moved to the bottom center of the screen. The initiative tracker's initial transparent rectangle has been removed so that more of the background can be seen. The chat window now has clearer chat boxes between users.
To test UI visibility, I overlaid the HUD design on 3 different backgrounds.
The final pass of the visual scripting editor. The background is dark gray, with UI panels that resemble aged brown paper. The runes are rendered in the shape of jewels, with flat colors.
Final Homebrew screen.
All UI elements present from both the HUD and visual scripting editor are placed on a brown background, to showcase the UI art made.
UI blanks used across both screens.
A pink and purple floral divider

Takeaways

Overall, this was an incredibly positive freelancing experience, and I continue to have a good relationship with these clients. This project challenged me to design a little outside my comfort zone, as I had never experimented with the Art Deco style prior to this experience. In the future, I would like to play around with UI styling more to create even more unique visuals.