Im looking to discuss ideas on how to represent the "evaluation of a user".

  • You the evaluator
  • Users to be evaluated
  • Based on score border around user profile is different color

How could this be represented in 1 single image? Attached a Concept wich is not clear enough I need something thats more catchy. enter image description here

  • What kind of evaluation are we talking about?
    – paddotk
    Jun 22, 2012 at 8:46
  • @poepje, something like here on stack network, users answer a question and if its good they receive a score if its bad they receive a negative score ( like the yellow and blue green colors )
    – Rubytastic
    Jun 22, 2012 at 9:22
  • Hmm that is a bit of a vague thing.. I would use red for negative and green for good, which is pretty standard (well in most western cultures anyway, there's a question about this, where is said that in China it's the exact opposite :p). If you need more stages in between (for example a rating of 1-10), you could simply use the colours in between. Think of something like red > red-orange > dark orange > light orange > orange-yellow > yellow > yellow-green > lime> green
    – paddotk
    Jun 22, 2012 at 9:29
  • Your little scrawled human bean is adorable. BTW. :) Jun 22, 2012 at 17:31

2 Answers 2


What about a transparent png icon with a background color applied via CSS?

Images would all be the same size but you could alter colors based on transparent areas of the PNG.

This is a jpg representing the idea....

smilies © 2012

But the actual png would have the actual icon transparent:

Transparent smile © 2012

<img src="smile.png" width="100" height="100" border="0" class="evaluser0" />
<img src="smile.png" width="100" height="100" border="0" class="evaluser1" />
<img src="smile.png" width="100" height="100" border="0" class="evaluser2" />
<img src="smile.png" width="100" height="100" border="0" class="evaluser3" />

img.evaluser0 { background: #fef200; }
img.evaluser1 { background: #f26422; }
img.evaluser2 { background: #ec145b; }
img.evaluser3 { background: #00a650; }

A slide graph with a color scheme progressing from red - green is a good visual progress/success indicator. Numbers are not quite as emotionally powerful but may cross cultural boundaries more easily. Shapes such as checks and pluses are also visual indicators of positive feedback (think facebook like button, or instagram's heart).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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