Most websites uses a scheme of bronze, silver, gold, platinum, and maybe even diamond to rank service plans they may provide. In my website design, I want to the users to have a dot next to the username (like badges on stackoverflow) that specify what plan the user is on (so gold for gold members). How can I represent silver, platinum and diamond, all which look 'grayish', in a small area that measures 6px by 6px (as it is on SO, but maybe a little bigger is OK too)?

Bonus: Is there a better alternative to the metal + diamond scheme of ranking?

  • A lot of good advice here. One thing the OP needs to be careful about is tone. The icons choices should not fight the overall brand. I am struggling to think of a metaphor, but maybe "hello kitty on a Lamborghini"--both are great brands, and maybe they could even work together for some people, but it may not be a perfect fit. – horatio Jan 24 '14 at 15:49

The issue with silver, platinum and diamond is that they are all usually represented with similar colors. Color alone would not be enough, but shape can go a long(er) way. You mention you want your icons to be really small, if that's the case, only way to go is very simple shapes, like Stein mentions. I don't think it would be a good idea to have two elements of practically the same color, so I'd definitely try with a yellow:

enter image description here

There is a website I used to participate in, and it was the first thing I thought of when I read your question. They use a badge system for users reputation, and their badges actually look like medals:

enter image description here

So they play not only with the color and shape, but also the size. I think one of the most important issues here is that any group you chose to use, you need to make visible as a whole. For example, the small medal in the example only makes sense if you have seen the bigger ones at least once (until I saw them, I thought my small bronze medal was amazing!).

I think this applies to all elements, even bronze-silver-gold, they only work as part of an ensemble (a gray circle if you haven't seen what other users have is just a gray circle ad nothing more). In this case, size made sense when users were listed and you could compare the medals.

Now, I started thinking about this problem and if there was any workaround. If color, shape and size are not enough by themselves, and you can consider going a bit bigger with the icons, how about a realistic interpretation? A diamond is easy, everyone knows what they look like (at least in 2d!). The problem comes with platinum and silver, one of them will look a lot like the other. But using realistic illustrations could allow for some freedom, so why not "diamond, ruby, emerald"?

Image source: Iconfinder

Hope it helps!

  • Having the diamond as a diamond shape is so simple but effective! – dayuloli Jan 24 '14 at 8:20

How one can represent several grayish materials in 6 by 6 px using realistic colors? Well... you can't, at least if they're supposted to look different.

Personally I'd stick to using just the three colors bronze, silver, gold which have a fairly well recognized order, known from sports-medals.

As soon as you add more metals or elements you start to assume the order is based on market value which most people have no idea about, and the value may change the relative worth (I do believe bronze have been more expensive than silver some times). Or some people may assume it's ordered by which is more pretty (which is very subjective) etc. and you have no agreement about the order.

As for a better color scheme: how about the colors of black-body radiation (red, orange, yellow, white, blue). You'll have to arbitarily decide whether cool or hot is "best", but you can use quite a few distinct neuances. Even if it's a bit geeky, the sequence of colors feels natural (because it is) and it's used for lots of illustrations (where simple grayscale would not be visible enough).

Edit: Diamonds are even more problematic than metals, since diamonds have no fixed price! Its value depends on size, appearance and if it's "natural" or man-made, (also the the artificial scarcity created by the diamond cartels). Ranging from priceless large named diamonds in crown jewels worth billions, to 150 USD per kilogram diamond abrasive powder (maybe even cheaper, it was one random price i found), diamonds are both a lot cheaper and a lot more expensive than gold that costs about 40 000 USD pr kilogram.

  • 3
    I agree. The only solution I can see is to make bronze, silver and gold, and then you could do diamond as an actual diamond-shape. More than that I think would be problematic. You could use a similar colour scheme to this, but you will have to rely on "teaching" your users to understand it: viewingfacility.net/images/layout/bronze-silver-gold.png – benteh Jan 22 '14 at 10:46

A few things to note:

  • gold, silver, bronze are known ranks for most people.
  • platinum and diamonds are known to be valuable, but I don't think most people would know where to rank them in regards to the initial 3
  • color, alone, is not enough to make an icon fully accessible visually--lots of people are colorblind or may be using a crappy screen, or their iPhone in the sun, etc. (this may or may not be a concern in your case)
  • color, alone, as you've found out, isn't likely enough to indicate a 5-scale ranking system.

As such, based on all of the above, I'd consider the following:

  • 3 colors, bronze, silver, gold
  • the 2 ranks above gold would be indicated with gold + a secondary identifier. Perhaps a '+' and '++'?
  • alternatively, keep 5 colors, but make them secondary to a more readable ranking. Perhaps simply numerical: 1 - 5.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.