Alea: Building a Cohesive Visual UI System
From visual foundations to competitive gameplay.
Alea is a fast-paced multiplayer arena brawler built around expressive characters, high-skill combat, and the ability to switch between two distinct combat styles.
I was responsible for the visual design of the game's UI, developing its typography, color palettes, component styling, and an extensive library of custom icons.
My goal was to establish a recognizable visual language that complemented the game's stylized world while keeping important gameplay information clear and consistent across different interfaces.
Project: Alea | Afterlife Games
Platform: PC
Design Systems
Establishing the Visual Language
Alea's interface needed to balance an expressive, mythology-inspired aesthetic with the readability required for fast-paced competitive gameplay.
I developed a visual foundation using bold typography, geometric detailing, and a defined color system. Decorative elements helped give the interface its character, while consistent visual rules maintained cohesion across different screen types.
The color palette included dedicated treatments for allied and enemy teams, health and stamina indicators, interaction states, and general UI elements.
Typography was organized into distinct levels of hierarchy, combining expressive display lettering with simpler supporting text for gameplay information and navigation.
Together, these foundations established a recognizable identity that could extend across menus, character interfaces, and in-game HUD elements.
Designing Reusable Components and States
An important part of the system was defining how interface elements communicated their current state.
I created reusable visual treatments for buttons, character selection tiles, ability indicators, and other interactive elements.
These included default, hover, pressed, selected, unavailable, and disabled states, as well as gameplay-specific feedback such as ability cooldowns and locked content.
Establishing these variations helped create consistent interaction feedback across features while maintaining the game's visual language.
Building a Unified Icon Language
Alea required a large collection of icons representing abilities, gameplay actions, controls, and interface functions.
I designed custom iconography that could communicate different mechanics while maintaining a cohesive visual style.
Ability icons use expressive shapes and silhouettes to distinguish actions and effects, with color helping reinforce categories and gameplay meaning.
Alongside these, I developed controller and keyboard input symbols, utility icons, and supporting interface graphics.
The result was a visual vocabulary designed to remain recognizable across character selection, ability descriptions, and active gameplay.
Extending the System Across Game Features
A cohesive visual system must work beyond a single screen.
I applied the same foundations to character information, upgrades, social features, and communication interfaces.
The hero overview brought together character identity, abilities, gameplay attributes, and control information.
The upgrade interface used consistent frames, icon placement, and visual hierarchy to organize progression tiers and passive abilities.
For social features, I developed menu treatments for party management, friend lists, player interactions, and contextual actions. I also explored a radial emote interface designed for quick communication.
Each feature had different functional requirements, but shared styling, visual feedback, and interaction treatments helped connect them into a unified experience.
From Visual Foundations to a Playable Game
Creating Alea's UI system involved more than establishing an attractive visual style. The designs needed to accommodate different gameplay contexts, component states, information densities, and player interactions.
By defining shared visual foundations and reusable UI treatments, I created assets and design references that could be applied across the game's growing collection of features.
This project demonstrates my approach to visual systems design: balancing artistic identity with the practical requirements of interactive game interfaces.
Explore Alea: https://alea.gg/