Overview
Dragon of Legends was an independent RPG project that combined retro pixel-art aesthetics with modern gameplay systems. As part of the core development team, I played a key role in designing and directing the game’s user interface and visual language, ensuring the experience remained cohesive across desktop, tablet, and mobile devices.
The project required building a complete UI system from scratch, including character screens, inventory management, skill trees, quest journals, HUD elements, and menus. Because the game was intended to run on multiple devices, the interface also had to scale elegantly between large monitors and small touch screens without sacrificing clarity or usability.
To execute this vision, I led a small team of five interns from Sheridan College, providing creative direction and establishing the visual standards for the UI and supporting pixel assets.
Visual Direction
The UI drew inspiration from classic RPGs of the SNES and early PC era, while introducing a cleaner, more modern layout structure.
Key visual principles included:
Diegetic design
Many interface screens appear inside an illustrated book, reinforcing the medieval fantasy setting.
Pixel-perfect iconography
All icons were designed to remain legible at small sizes while preserving the charm of retro pixel art.
Warm parchment palette
Menus and character sheets use warm parchment tones and dark framing to separate gameplay from system interfaces.
Strong silhouette hierarchy
Icons and ability markers were designed with bold silhouettes so players could quickly identify abilities and equipment.
Scalable Interface System
One of the major design challenges was ensuring the UI worked across three different device categories:
- Desktop monitors
- Tablets
- Mobile phones
To support this, we designed a modular UI layout system.
Desktop
Large screens allowed the interface to display:
- Expanded HUD elements
- Configurable action bars
- Detailed minimaps
- Larger quest and notification panels
The action panel allowed users quick access to:
- a) Player Stats
- b) Player Journal
- c) Quest Log
- d) Abilities
- e) Map
- f) Inventory
- g) Party Menu
- h) Cash Shop
- i) System Settings
Tablet & MOBILE
Tablet layouts used:
- Slightly larger UI elements
- Touch-friendly spacing
- Reduced HUD density
Tablet & Mobile screens required:
- Simplified HUD layouts
- Larger tap targets
- Collapsible panels
The system allowed the same UI components to reflow depending on screen size, preserving the game’s visual identity across platforms.
Interface Systems
The UI system included several major interface modules.
Character & Equipment Screen
Players equipPED weapons and gear from their inventory system and into appropriate gear slots on their
character sheet.
Players could view character stats, equipment, and attributes through a stylized character book interface.
Features included:
- Visual equipment slots
- Attribute breakdowns
- Character portrait integration
- RPG stat systems (strength, dexterity, intelligence, constitution)
Skill Trees & Abilities
Skill progression was represented through a node-based expertise system.
Players could unlock:
- Combat skills
- Passive abilities
- Specializations
Each skill node used iconography designed to remain clear even at small pixel sizes.
Quest Journal
The quest journal presented narrative content and objectives inside a scrollable parchment interface, reinforcing the game’s fantasy theme.
The system included:
- Quest categories
- Story progression entries
- Illustrated quest panels
CONCLUSION
In the end, while the UI system and overall visual direction for Dragon of Legends proved to be one of the project’s strongest achievements, the game itself was never fully realized. Despite the momentum we built and the solid foundation we established, we ultimately only brought a minimum viable product to market on Steam. As priorities shifted and resources became limited, development came to a halt, leaving the project unfinished. Today, Dragon of Legends exists as a snapshot of what could have been, an ambitious and creatively fulfilling effort that, while incomplete, still reflects a high standard of design thinking and execution.
