[2019] Designing Icons for Buff and Debuff Indicators

With PAX West behind us - and me not being sick anymore - we’re now getting back into our usual rhythm. Patch 0.7.3 is still scheduled for release later this month, and soon we’ll be ready to start talking about what you can expect from this upcoming content patch!

We have previously discussed Buff and Debuff Visual Indicators, as well as some of the design language we will use to help you differentiate between the two as easily as possible. Today we’d like to show you some of the art we have created for these indicators.

Art created for generic buffs and debuffs usually communicate whether the effect is positive or negative through the use of arrows, however we also associate buffs with circles and debuffs with hexagons. Additionally, buffs are more likely to include the colour green, while debuffs are more likely to feature the colour red.

While the below images are quite small so that we can provide context for each image in an organized and readable manner, you can click on art to view a larger version of the image.
 

Specific Effects

Art	Name	Description
bleed.png512×512 167 KB	Bleed	Your character is taking Physical Damage Over Time.
chill.png512×512 299 KB	Chill	Your character has less Attack, Cast and Movement Speed.
freeze.png512×512 226 KB	Freeze	Your character is prevented from moving.
Frenzy.png512×512 177 KB	Frenzy	Your character has 20% increased Attack and Cast Speed.
haste.png512×512 184 KB	Haste	Your character has 30% increased Movement Speed.
ignite.png512×512 177 KB	Ignite	Your character is taking Fire Damage Over Time.
Plague.png512×512 193 KB	Plague	Your character takes Damage Over Time which spreads to nearby allies.
shock.png512×512 252 KB	Shock	Your character has reduced Elemental Protection and Stun Avoidance.
time rot.png512×512 205 KB	Time Rot	Your character takes Void Damage Over Time, has reduced Melee Attack Speed, Throwing Attack Speed, and Cast Speed, and is Stunned for longer.

Generic Buffs

Art	Buff
Elemental Damage Buff (generic).png512×512 301 KB	Increased Elemental Damage
fire damage buff.png512×512 178 KB	Increased Fire Damage
lightning damage buff.png512×512 247 KB	Increased Lightning Damage
melee damage buff.png512×512 185 KB	Increased Melee Damage
physical damage buff.png512×512 166 KB	Increased Physical Damage

Generic Debuffs

Art	Debuff
armor debuff.png512×512 234 KB	Reduced Armor
Elemental Damage Debuff (generic).png512×512 298 KB	Reduced Elemental Damage
melee damage debuff.png512×512 170 KB	Reduced Melee Damage
physical damage debuff.png512×512 163 KB	Reduced Physical Damage
Spellpower debuff (generic).png512×512 197 KB	Reduced Spell Damage

@Jerle & @Catmeow

Thank you!

@Dyne & @ReimerhArts

I’ll discuss the Spell Damage-related buff & debuff icons with the team. I happen to agree with this feedback, but I wanted to see if others felt the same way before raising it.

@x_Spacedrifter_x

Have you seen our previous thread on the subject? While this thread focuses on art, that one takes a high level view of the system as a whole. It might be what you’re looking for!

Thank you for the feedback!

If I can be honest, I think the priority for the art should be what it refers to. Whether it pertains to armor, or fire damage, or that your character is affected by Time Rot. The art is the only clue to help you identify the subject of a buff or debuff, while the system has other ways of representing whether it is good or bad (shape, positioning, green or red outline, etc.).

That said, we’re always interested in feedback so here’s some more icons;

Art	Purpose	Notes
armor debuff_3.png512×512 237 KB	Reduced Armor Debuff	Same ‘cracked armor’ art, no arrow.
armor debuff.png512×512 235 KB	Reduced Armor Debuff	Arrow replaced with a cross. Perhaps this is easier to see?
armor buff.png512×512 222 KB	Increased Armor Buff	The art for a buff that increases your armor, which wasn’t included in the post up above. It includes an arrow, which admittedly isn’t particularly easy to see at this size.
armor buff_2.png512×512 222 KB	Increased Armor Buff	The same art without the arrow.

I think my personal preference would be for the armor buff & debuff art without any arrows or other icons, and relying on the colour to represent whether they are good or bad. While using these colors to convey information isn’t usually great for people with Deuteranomaly and Protanomaly, buffs and debuffs being different shapes should help with that.

What do you think?

When I first submitted the previous post the icons couldn’t be clicked on to see the full-sized art. I’ve just noticed that now and corrected it. You may need to reload the page for this to work.

Hey @Peredur, I’d suggest taking a look at this thread whenever you get the chance.

Thanks for the feedback!

We’ve created another iteration of icons for spell-related buffs & debuffs;

Art	Description
	Buff
	Debuff

Let us know what you think!