Skip to content
All work
Aetherlords

About project

Aetherlords2025Concept

A steampunk HUD, laid out where MOBA players already look.

Aetherlords is a MOBA for PC set in a steampunk world. Working solo, 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.

  • Game UI
  • PC
  • HUD
Role
UI/UX designer, solo
Client
Aetherlords · PC MOBA
Platform
Game · PC
Tools
Figma
The in-match HUD: every combat readout lives in one console, so a glance mid-fight travels one strip.

Challenges

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, down to the frame around every number. Ornament is the natural enemy of a HUD, so the real question was where the brass is allowed to go.

  • Read mid-fight, in fractions of a second, over a busy battlefield
  • Positions players already know from Dota 2 and League of Legends
  • A steampunk skin of brass, pipes and gears that must never cover a number
  • Two teams told apart at a glance, on the scoreboard and on the map
The player
reads the HUD mid-fight. Health, cooldowns, mana, gold and the map have to be found without looking for them.
The style
brings brass frames, pipes, gears and smoke, and every one of them competes with the numbers for attention.
The roster
runs to dozens of heroes across three roles, each with a loadout, so picking and dressing a hero cannot become a trip between screens.
The HUD in greyscale, before any brass: no texture rescues a layout that does not read.
Where the console started: a notebook sketch of the round portrait window, the skill row and one bar.

Solutions

  1. 01

    Familiar positions, held by one console

    I kept the positions players know from Dota 2 and League of Legends and changed what holds them. 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 joined by pipes along the bottom edge, instead of separate panels.

    Trade-offOne large console is heavier than the floating panels of League. In return the eye travels a single strip for everything it checks in a fight, and the steampunk becomes the structure itself rather than decoration laid on top.

  2. 02

    Hero select and loadout on one screen

    I merged inventory and character selection into one collection screen, built on two adjacent Dota 2 layouts: the hero loadout and the hero grid. 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, with PLAY in the corner.

    Trade-offOne screen carries more at once and gives each part less room than two dedicated screens would. In exchange the chosen hero stays in sight while the loadout changes.

  3. 03

    Brass on the frames, clean type inside them

    The steampunk lives in the materials: brass frames, pipes, gears, smoke and label plates. What sits inside the frames stays flat and readable. The palette is a dark neutral base, one hot accent (#FF7439) and a red and a blue for the two teams. Caliya sets headings, labels and numbers, Gilroy everything you read.

    Trade-offKeeping ornament off the content makes the screens plainer than steampunk key art usually is. A number read in fractions of a second has no room for brass texture.

  4. 04

    Components where they pay, real text everywhere

    I built components only where they kept me fast and consistent: the square and round item slots and the inventory slot. The rest stays as placed art. Text is written for the world, from Selwyn Steamrattle to a match at 35:56, because real lengths test a layout. The label plates were generated in Midjourney; the interface was built in Figma.

    Trade-offHanding over to development will need more of the system formalised; until the screens settled, that time was better spent on the screens. Writing content took time that could have gone into more screens, yet it is the fastest way to learn whether a name, a stat line or a description actually fits.

Locked heroes stay in the grid under a lock, so players see what is still there to unlock.
Hero select and loadout on one screen: the chosen hero stays in view while their gear changes.
Each item slot shows its hotkey on the slot itself, so keys are learnt from the screen.

Results

The HUD keeps every position a MOBA player expects, and the brass stays on the frames, never over a number.

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
The tooltip reads in the order a player decides: rarity and source, lore, stat, the unequip key.
The inventory slot in two versions: the second adds room for an icon and softens the text shadow.
A palette small on purpose: one hot accent for what matters now, red and blue for the teams.

Reflection

  • 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.

Next

Smuggling Zones