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 Your character is taking Physical Damage Over Time.
Chill Your character has less Attack, Cast and Movement Speed.
Freeze Your character is prevented from moving.
Frenzy Your character has 20% increased Attack and Cast Speed.
Haste Your character has 30% increased Movement Speed.
Ignite Your character is taking Fire Damage Over Time.
Plague Your character takes Damage Over Time which spreads to nearby allies.
Shock Your character has reduced Elemental Protection and Stun Avoidance.
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
Increased Elemental Damage
Increased Fire Damage
Increased Lightning Damage
Increased Melee Damage
Increased Physical Damage

 

Generic Debuffs

Art Debuff
Reduced Armor
Reduced Elemental Damage
Reduced Melee Damage
Reduced Physical Damage
Reduced Spell Damage
7 Likes

Nice icons!

Also, take care @Sarno!

1 Like

I look forward to completion! Take care of yourself :smiley_cat:

1 Like

they look awesome!

Nice guys , vert nice but this spell debuff icon better if show a staff/scepter or wand .

2 Likes

These are so very good looking and satisfying :smiley: Nicely done!

1 Like

Though I think the reduced armor one could be more clear. The arrow is a bit hard to see when it’s that small, and I think a cracked or destroyed armor, would show “reduced armor”/armor pierce better.

I agree the reduced spell damage icon is a bit unclear. I don’t think I would see it as that at first glance. But Idk how else to show reduced spell damage… Maybe a wand as @Dyne said, or maybe a spell projectile…

1 Like

Nice ! I Can’t wait to see how these buff & debuff indicators are implemented in game. I’m also hoping that the new RESPEC system is included in this next patch so we can start playing with all kinds of build options.

1 Like

@Jerle & @Catmeow

Thank you! :slight_smile:

 

@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!

1 Like

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
Reduced Armor Debuff Same ‘cracked armor’ art, no arrow.
Reduced Armor Debuff Arrow replaced with a cross. Perhaps this is easier to see?
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.
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?

2 Likes

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.

1 Like

I totally agree. I would rather not have arrows/other icons such as a cross, but I think the cross is better than the arrow in this case. I like colors to visualize and symbolize effects, but it shouldn’t be the only indicator. Different cultures also see certain colors different ways, as well as problems with colorblind people. So to cater to most people as possible, shapes and other graphics are better than only colors. But both together is of course best. What about bigger cracks in the armor? So they are easier to see when small.
In regards to the armor buff. Hmm… I think the aura armor part (glow) could be bulkier, to more easily show that you are getting more armor.

How do you plan to make people see if an icon is a buff or a debuff?
Different shapes? Different locations?

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

1 Like

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! :slight_smile:

2 Likes

I think these are a lot better at least! Maybe the red inside the buff could be a blue color. Idk why, it just doesn’t say ‘spell buff’ to me at least. I get the red and the green colors with the physical/melee damage buffs, but the colors looks off to me with spells.

It’s far better , perfect base to me , nice job !

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.