Astromage — a roguelite action-RPG concept where you play Earth’s champion battling King Xalraxis through a tournament called The Trial of the Cosmos. Mix magical powers with cybernetic augmentations to craft wicked synergies, collect relics that expand your toolkit, and fight through 10 floors — each capped by a hand-picked guardian from Xalraxis’ empire.
Platform: PC
Core pillars: Fast roguelite combat, buildable synergies, relic-driven progression, and boss gauntlet structure (10 floors)
Key features: Customizable magic + cybernetic builds; discoverable relics that unlock new tools/abilities; unique guardian boss per floor; emphasis on replayability through varied synergies
Visual direction: Hybrid fantasy × cyberpunk aesthetic with a distinctive, bold art style
Notes / assets: AI-generated artwork used in the loadout screen and gameplay UI background (ChatGPT)
Tools used: Photoshop, Illustrator, After Effects, Figma
Status: Conceptual design and prototype work (not a released/fully playable game) — developed for the UIPEEPS Masterclass
Gameplay concept featuring high-fid visuals.
Pause menu.
Pause menu overlay.
Fonts used.
Colors utilized across the UI screens.
UI elements showing off wireframe vs high-fidelity, using different styling techniques.
General overview of the different HUD elements for the active gameplay screen.
Wireframe - controls settings.
Wireframe - graphics settings.
The above is the user flow for the spellbook. One instance of the spellbook system (primary ability) showing how interactability works. If an icon is clicked, then it is selected. However if the icon is being hovered on, then a description appears on the right hand side. Furthermore, if the player has enough gems to upgrade the ability, then the ability will be ranked up. Taken into great consideration was the time taken from when the player starts the game, to when they actually start playing.
HIgh-fidelity version of the spellbook. On the left hand side is where you pick your spells, passives etc. If you click on an ability, it highlights it as selected. Furthermore, you also get a description view of the ability and the possibility to upgrade it on the right hand side of the screen. Upgrading the ability uses gems that the player is able to get after they defeat the boss of every floor. The middle section of the screen is reserved for showcasing artwork of what the ability does.
The spellbook contains everything you need to customise your character before begining a new run. Some options depend on what you have completed playing Astromage, be it through exploration or unlockables. Your options are:
Primary ability (activate on use)
Secondary ability (activate on use)
Ultimate ability (activate on use)
Passive utility (activates periodically)
Skins (cosmetic)
Once the player has selected their loadout, you are then transitioned to the actual game. There will be opportunities when you’re playing to modify the loadout once more however these will be scarce.
Low-fidelity version of the spellbook (1st version). Here I played around with a circuit type view inspired by the game FTL: Faster Than Light. Ultimately I decided to go for a simpler view inspired by side navigation bars.
Low-fidelity version of the spellbook (2nd version). This is the view I ultimately went with to showcase abilities and their respective descriptions.
High-fidelity (all elements) gameplay UI.
High-fidelity (low visual effects, no quest log). Aimed to address accessibility concerns.
The loading screen shows a series of elements overlayed on top of each other. Some of these elements are being scaled up/down and rotating clockwise/anticlockwise. The loading % is at the bottom right of the screen.
Check out my other projects below!
