Pixel-art RPG, menu & inventory system

Elysoria: Echoes of Ascension

Front-end and inventory design for a pixel-art RPG: an ornate framed panel system that sits over the live world without ever hiding the part of it the player came to look at.

Role: Game UI/UX Designer
Year: 2024
Tools: Adobe Photoshop
Genre: RPG, Fantasy
Platform: PC

Elysoria: Echoes of Ascension is a pixel-art RPG. I designed the front end and the character screen: main menu, load flow, the inventory and equipment layout, and the button states underneath all of it.

The art direction is ornate, hand-painted filigree over a pixel world, and the trap with that style is that the ornament starts eating the screen. So I gave every panel the same construction and then stopped adding: a bronze frame, a scrolled flourish centred on the top edge, filigree corners inside each button, and nothing else. The decoration lives on the edges, and the middle of every panel is left plain for the words.

Nothing here is a full-screen takeover. The menu panel occupies the left third and the world keeps playing behind it, the load list opens in the right two thirds without disturbing the panel that launched it, and the inventory is a single framed window with the world still visible around its border. The player never loses their place.

The type is a pixel face at a size that stays legible without hinting, set in warm cream on green so the contrast holds against a busy tileset. Every label is a plain verb: Play Game, Continue, Load Game, Save Game, Game Options, Exit. No icons standing in for words.

Scope

The interface is mine: the panel and frame system, the menu and load flows, the inventory and equipment layout, the type treatment and the button states on this page. The pixel-art world behind it, the tilesets, the buildings and the character sprites are the team's art, not mine. I designed on top of them.

Ornament that knows when to stop

A filigree style gives you an obvious way to make a screen look finished and a very easy way to make it unreadable. Every flourish you add is contrast you take away from the text sitting next to it.

The rule I settled on was that ornament marks edges and never crosses into content. Corners, frames and the flourish at the top of a panel are decorated. The interior of a button, the rows of a save list, the cells of an item table are flat. That is why the inventory screen can hold five tabs, ten category icons, a five-column table, two text panels and a twelve-slot equipment ring without collapsing: only its outer frame is ornate.

The second rule was that the world stays visible. On a menu that means the panel takes a third of the screen, not all of it. On the load screen it means the two panels sit side by side rather than stacking a modal on top of a modal. It keeps the player oriented, and it lets the art the team built carry on doing its job while a menu is open.

Main menu

Six options, one per row, all of them plain verbs. The panel sits in the left third so the farmstead and the title lockup keep the rest of the frame. Selection is the only thing that changes: the active row lifts to a brighter green and its filigree corners brighten with it, which reads instantly without moving anything or adding a cursor, an arrow or a highlight bar. The title sits on flat dark plates rather than being carved into the art, so it stays readable over whatever part of the world is behind it.

Load game

The menu panel narrows and the save list opens beside it instead of on top of it, so you can still see where you came from and Load Game stays one click from Continue. Each save is two lines, name on top, date and play time below, which lets the play time sit right-aligned as the thing players actually scan for. The selected row is outlined rather than filled, because a filled row on a textured panel would bury its own text. The confirm button is pinned bottom-right of the list, away from the menu, so there's no chance of hitting Exit when you meant to load.

Inventory & equipment

The densest screen in the game and the one that decided the whole system. Five tabs across the top, a category filter rail under them, the item table on the left, and the right side split into flavour text, weapon stats and a paper-doll equipment ring. Everything inside the frame is flat: plain rules between table rows, plain text panels, no inner borders competing with the outer one. Drop, Equip and Delete sit along the bottom of the panel that owns them, so the destructive one is the furthest from the item list. The running totals, gold, weight and burden, are parked bottom-right where they update without pulling the eye.

Button states

Hover and clicked, worked out at full size before anything got built. Hover warms the fill to a yellow-green and lights the filigree; the click state shifts it cool to a teal and brightens the label. Two different hue directions rather than two brightness steps, so the states stay distinguishable for a player who can't separate them by saturation alone, and so the click reads as a genuine change of state rather than just more of the hover.

Final thoughts

The thing that made this project work was deciding early that decoration belongs on the perimeter. Once that was fixed, the inventory screen stopped being a problem, because however much information went inside the frame, the frame was the only thing carrying the style.

If I picked it up again I'd give the save list a state for an empty slot. Right now the design assumes saves exist, and a first-time player opening Load Game before they have any is the one path through the front end that I never drew.

The thinking behind this

Longer write-ups on the craft this project drew on.

The same counter set twice: proportional figures jittering as the number changes, and tabular figures holding their position

Visual craft 9 Sep 2026 10 min read

Typography for game UI: the part players read under pressure

Interface type is read in half a second, at speed, over moving artwork, by somebody who did not come to your game to read. Almost every rule that applies to a book works against you here, and the fixes are specific.

Read the article

Visual craft 9 Sep 2026 9 min read

Icon design for games: sets that still work at 32 pixels

An icon has about a fifth of a second and a few hundred pixels to say what a thing is. Most game icon sets fail not because the drawings are bad, but because they were drawn large, one at a time, by different rules.