UI Artist
October 2021 - December 2021
Figma, Illustrator, Discord
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 puts the full power of imagination in the hands of the player.
Client Communication, Freelancing, Information Architecture, Wireframing, Low-Fidelity Prototyping, High-Fidelity Prototyping
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.
While browsing through Reddit one day, I chanced upon a job posting seeking a UI Artist for a tabletop RPG. I sent an email to the poster, and the next day I found myself on a Discord call with two founders of Mythiary Studios. They gave me a more in-depth brief of the project and explained that the only things holding their pitch deck back were a couple of UI mockups — a HUD system and a visual scripting editor known as their Homebrewing system.
At our next meeting, I presented my clients with wireframes for both the HUD and Homebrewing screens. These wireframes merely indicated the placement of UI elements, whose functions I verbally explicated to my clients.
In the HUD, I explained how I wanted the UI to take up as little space as possible, so that the player’s focus could still remain in the center of the screen, where the game was. However, my clients also pointed out that certain icons and buttons could still be enlarged, to provide greater accessibility for players.
Meanwhile, the Homebrew screen would visually be somewhat similar to the visual programming language, Scratch, where players can drag and drop blocks of code — or runes — into the editor to create complex cause-and-effect scenarios for their characters.
Since I would only have the time to create one singular mockup — without interactions — for each screen, I found it helpful to create some rudimentary information architecture charts. This allowed me to keep track of which features would be needed, and where they would be placed beneath expanding UI elements.
To ensure that I understood their vision for the UI art, I also created a moodboard of several game screenshots. During the wireframe call with my clients, I went through the screenshots and pointed out which UI art styles I felt could best be applied to my final drafts. Through this moodboard, my clients and I were able to narrow down the art direction for the screens.
I presented my first 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:
1. The hotbar was not optimally placed, and could instead be placed at the bottom-center of the screen. Additionally, there needed to be a hotbar key for each numerical button input on the keyboard, and the ability to toggle through multiple sets of hotbars.
2. The chat could benefit from clear separators between players.
3. The Initiative Tracker had too much unnecessary space left over in its current iteration. It could be redesigned to leave more empty space to show the game playing behind it.
As for the Homebrew screen:
1. We felt that it was visually inconsistent with the UI from the HUD — as if the two screens didn’t belong to the same screen.
2. The highly rendered runes were rather distracting, and would benefit from simpler designs.
With my feedback in hand, I got to redesigning the screens.
In the HUD, I moved the hotbar, added opaque boxes behind each individual chat bubble in the chatbar, and redesigned the Initiative Tracker to take up less unnecessary space. Additionally, I designed UI elements — such as frames, arrows, and scrollbars — to be in the Art Deco style, in accordance to my clients’ design specifications.
As for the Homebrewing screen, I redid 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.
Overall, this was an incredibly positive freelancing experience, and I hope to work with these clients again in the future!
This project also challenged me to design a little outside of 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 frames some more to create even more unique UI styles.