Estoy buscando discutir ideas sobre cómo representar la "evaluación de un usuario".
¿Cómo se podría representar esto en 1 sola imagen? Adjunto un concepto que no es lo suficientemente claro. Necesito algo que sea más pegadizo.
¿Qué pasa con un icono png transparente con un color de fondo aplicado a través de CSS?
Todas las imágenes tendrían el mismo tamaño, pero podría modificar los colores en función de las áreas transparentes del PNG.
Este es un jpg que representa la idea....
Pero el png real tendría el icono real transparente:
<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; }
Un gráfico de diapositivas con un esquema de color que va de rojo a verde es un buen indicador visual de progreso/éxito. Los números no son tan poderosos emocionalmente, pero pueden cruzar las fronteras culturales más fácilmente. Las formas como los cheques y los más también son indicadores visuales de comentarios positivos (piense en el botón Me gusta de Facebook o el corazón de Instagram).
paddotk
Rubytastic
paddotk
red > red-orange > dark orange > light orange > orange-yellow > yellow > yellow-green > lime> green
Lauren-Clear-Monica-Ipsum