Steampunk MOBA HUD and hero collection
A steampunk HUD, laid out where MOBA players already look.
- Role
- UX/UI designer, solo
- Product
- Aetherlords · PC MOBA
- Scope
- In-match HUD, Collection screen
Results
- 4 in 1portrait, skills, items and minimap joined into one brass console along the bottom edge
- 1 screenfor choosing a hero and changing their loadout, so the chosen hero stays in view while their gear changes
Aetherlords is a MOBA for PC set in a steampunk world. I designed the in-match HUD and a collection screen where choosing a hero and changing their loadout happen in one place. Every position a MOBA player expects is still there, held by one brass console, and the brass never covers a number.
Introduction
A HUD that has to feel familiar and still bring something new.
MOBA players arrive trained by Dota 2 and League of Legends: they know where the minimap, the abilities and the items live. Aetherlords needed that familiarity plus a steampunk identity of its own. Ornament is the natural enemy of a HUD, so the real question was where the brass is allowed to go.
Console
Familiar positions, held by one console.
The round portrait with health as a ring, the skill row with its mana bar, the item slots and the minimap sit in one brass console along the bottom edge, joined by pipes. It started as a notebook sketch and was checked in greyscale first: no texture rescues a layout that does not read.
Collection
Hero select and loadout on one screen.
The hero stands on the left, the loadout and the item tooltip fill the middle, and the hero list with role tabs sits on the right. One screen gives each part less room than two would, and in exchange the chosen hero stays in view while their gear changes. Locked heroes stay in the grid under a lock.
Style
Brass on the frames, clean type inside them.
The steampunk lives in brass frames, pipes, gears and label plates; what sits inside stays flat and readable. A dark base, one hot accent for what matters now, red and blue for the teams. The tooltip reads in the order a player decides: rarity and source, lore, stat, the unequip key.
Components
Components where they pay, real text everywhere.
Each item slot shows its hotkey on the slot itself, so keys are learned from the screen. Slots are components; the rest stays placed art. Text is written for the world, from Selwyn Steamrattle to a match at 35:56, because real lengths test a layout.
Outcome
Outcome
The HUD keeps every position a MOBA player expects, and the brass stays on the frames, never over a number.
What I learned
- MOBA players want a new world, not a new layout. Keeping every position where Dota and League put it bought the freedom to change everything else.
- Ornament belongs on the frame, never on the value. Brass around a number is character; brass behind it is a number nobody reads in a fight.
- Joining the portrait, skills, items and minimap into one console made the steampunk structural instead of decorative, which is the only way a skin survives gameplay.
