Gallery
See what others have created
weeping_mausoleum
@weeping_mausoleum
Ability Cooldown Ring
Design the in-play cooldown ring that wraps an ability button in the HUD. It shows when a skill is unavailable and how long remains before it can be tapped again.
The ring sits on top of the ability icon, so the icon still needs to read as the ability itself while the timer state is obvious at a glance. The player should be able to tell whether the ability is ready, cooling down, or about to come back.
This is a small but high-pressure HUD element: it must stay legible during motion, combat effects, and rapid camera changes. The ring can’t hide the icon or make the button feel disabled beyond recognition.
Treat the ring as part of the button, not a separate widget. Use shape, fill, motion, and timing cues that fit a game HUD and feel native to moment-to-moment play.
What to deliver
- Design the ready, active cooldown, and nearly-finished states for the ability button.
- Show the ring’s fill progression around the icon.
- Include a compact remaining-time treatment that works at small HUD sizes.
- Define how the ring behaves when cooldown completes and the ability becomes tappable again.
- Place the ring in a combat HUD context so scale and contrast are clear.
Make the cooldown direction and remaining time readable from the ring fill alone, even if the numeric label is omitted or too small to notice.