24

It's seems to be something new and here is the screenshot to illustrate the new one versus the old one:

Enter image description here

Why was the color changed? It seems less prominent now. The previous one was better and more visible.

Also the code seems strange. The old link of the old sprite is kept and the new one is added after (that's why I was able to make the before/after):

Enter image description here

5
  • 8
    I do not know the actual reasoning but here is the "obvious" UX reason: the color choice is a balancing act on the recognizability of the background vs. non-voted vs. voted. The new color makes the non-voted and voted states more easily separable while the difference between the background and the arrows in any state remains good enough. On the other hand, it may be that someone just wanted the favorite star color to match the arrows :)
    – Roope
    Aug 10, 2018 at 23:40
  • 80
    The darker color was too unfriendly and therefore in breach of the new code of conduct.
    – JK.
    Aug 11, 2018 at 4:36
  • 60
    @JK. Hey! Making fun of the CoC is a breach of the CoC. Aug 11, 2018 at 5:31
  • 5
    According to extensive A/B tests experienced users stopped twitching a few days ago, signalling that it's time for the next set of minor design changes to be rolled out to the site. Aug 13, 2018 at 13:45
  • 2
    @NisargShah Hey! Assuming their motive was to make fun of the CoC is a breach of the CoC! Aug 13, 2018 at 13:49

1 Answer 1

42

There are a few reasons for this change. @Roope is correct in assuming the biggest reason is our desire for more contrast between the off and on state of the voting buttons. Additionally, we did indeed want some consistency in the UI, first between the favoriting button and the voting buttons, but also between themes and their meta counterpart. You’ll notice Meta already had this color as its off state.

These icons are built as SVG sprites with a unique background image per community. We include pngs as a fallback for those rare browsers that can’t display SVG. All sprites will be phased out in favor of directly-injected SVGs that easily take the color of its parent HTML element. All new themes rely on the same SVG sprite, instead of each community having its own unique sprite file (regardless of if it was actually unique visually), allowing us to deliver a more consistent experience across all themes, and more easily phase that single reference out as we switch to SVG.

Our SVG icon set can be found at https://stackoverflow.design/product/resources/icons#icon-set and is its own repo with versioning and a single source of truth. It ought to be open sourced with the rest of Stacks. ✌️

5
  • 9
    That's a victory hand emoji at the very end, for other people who cannot see that. I need some fallback font with emoji support, apparently. Aug 13, 2018 at 9:35
  • 5
    It's rendered so small on my screen I can't see the other fingers, which amusingly makes it look like a similar but far more rude gesture. hehe.
    – user310988
    Aug 13, 2018 at 14:57
  • 1
    Y'all gotta get on board with emoji. Aug 13, 2018 at 14:58
  • 4
    s/Y'all/browsers/
    – TylerH
    Aug 13, 2018 at 15:15
  • 1
    Making any usable element less visible is never a good design decision. You should visit this site for help with such choices.
    – Rob
    Aug 15, 2018 at 21:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .