Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
What kind of evaluation are we talking about? – poepje Jun 22 '12 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 '12 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 – poepje Jun 22 '12 at 9:29
Your little scrawled human bean is adorable. BTW. :) – Lauren Ipsum Jun 22 '12 at 17:31
up vote 1 down vote accepted

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; }
share|improve this answer

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).

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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