: How to represent silver, platinum and diamond? 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,

@Shelley591

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.

Vote Up Vote Down

@Voss6371140

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:



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:



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!

Vote Up Vote Down

@Angie364

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.

Vote Up Vote Down