Mockup for the in-game interface of a third-person, over-the-shoulder, action RPG.

Fantasy RPG UI Design

My favorite genre is the single-player RPG. If I were to guess, I've played maybe 4000 hours, which equivalent to 2 years of full-time work. Some of my favorite fantasy RPGs are Final Fantasy XII, Dragon Age: Origins, Diablo 3, Dark Souls, Pillar of Eternity, and The Witcher.

Visual Style

We plan to release the game on computers with a mouse and keyboard. On console, joysticks are less flexible than a mouse. Keyboard and gamepad buttons are comparable. With mobile, we would need to employ screen efficient UI designs and consider the limited controls: click, swipe, and pinch.

Skeuomorphism is a UI design style that reflects the real world. To get that fantasy feel, we texture our UI elements with natural resources like wood, stone, fire, water, glass, sand, gold, iron, paper, leather, gems, and so on.

Colors palette for a fantasy RPG

Colors were limited back in the day, science was still developing, so I think I will stick to red and orange. At minimum, buttons need 3 colors for when it is inactive, hovered over or selected, and activated. Text should either be black or white.

Flow

After researching, I like to map out all UI pages and show what buttons are needed to transition to other UI pages. This step cannot be started unless we know what features are in the game. Seeing how UI pages transition to other pages can help us identify inefficient movement and plan work.

An overview structure of how the UI pages are related in a fantasy RPG

There is no step between the in-game to main menu page. Some games like to include a yes or no menu to confirm a quit, because unsaved progress will be lost. Many games and programs autosave nowadays, so I do not think this prompt is useful anymore.

In-game

Practically every RPG has a health and ability bar. Some single-player RPGs have party members who join the main hero's quest. A mini-map is also sometimes included in-game. Most of the time, the ability bar is near the bottom of the screen. We stick to conventions, because it will make the learning curve instant for experienced RPG players. They can then spend their brainpower min-maxing builds.

In-game UI design for a fantasy RPG.

What is the purpose of the health bar? The health bar tells the player whether the character is dying. A player looks at the health bar and asks, am I dead or not? The answer is yes or no. Other times the player may want to know how low their health is so they know when to heal up. Given those requirements, how small can I make the health bar?

Health icons for an fantasy RPG.

A circle can represent health. The circle changes colors as the player gets lower on health. Numbers are included above the health sphere for colorblind people.

Health colors

Map

Some games separate the quest and map information into different pages, but I like to include both into one page.

THe map and journal page an fantasy RPG.

References