Diseñando iconos · 18 enero 2007, 10:29
Una de las cosas que más me gustan de la guía de estilo del Proyecto Tango (y por ende, de mi proyecto Pasodoble ) es que están pensadas para ser simples, pero a la vez potentes y efectivas.
Como resultado de algunas de las pautas que hay que seguir para diseñar iconos, obtenemos iconos que están siempre bien contrastados cualquiera que sea el color de fondo donde se coloquen.
Esto permite a los usuarios poder tener esquemas de colores preferidos en sus aplicaciones y fondo de escritorio sin que esto reste usabilidad a los iconos.
En el siguiente ejemplo podemos ver un icono en el que aparecen dos disquetes negros:
Si se usara sobre fondo blanco o incluso neutro, el contraste es suficiente como para permitir su correcta visualización.
Sin embargo, si el fondo es demasiado oscuro, el icono puede resultar difícil de identificar, sobre todo del contorno, que es una de las partes más importantes de un icono, pues es imprescindible que todos los iconos queden bien silueteados para que su reconocimiento por parte del usuario sea lo más rápido y sencillo posible.
En el siguiente ejemplo vemos justo el caso contrario. Un icono de un sobre que es correctamente visualizado sobre fondos neutros y oscuros, pero que sobre fondos claros es más difícil de identificar. Su contorno resulta complejo de discernir:
Los iconos de los dos ejemplos tienen un tamaño considerable (128×128 píxeles), tal vez por eso os parezca que aún sobre fondo oscuro o claro respectivamente son aún fáciles de reconocer…
... pero pensad que la mayoría de los iconos en las barras de menú, herramientas y exploradores de archivos suelen tener un tamaño menor, que suele variar entre los 64 y 16 píxeles.
Con tamaños tan pequeños resultaría casi imposible distinguir estos iconos en según que fondos.
Ahora observad este icono, hecho por mí, y que pertenece al tema de iconos Pasodoble y está hecho siguiendo la guía de estilo de Pasodoble.
La silueta es siempre reconocible en todos los fondos, tanto en los claros como en los oscuros y neutros.
Y aunque se pierden algunos detalles como la sombra, cuando el fondo es muy oscuro, los detalles del objeto principal siguen siendo perfectamente visibles y reconocibles aún en tamaños pequeños.
Sin duda alguna, hacer iconos es todo un arte, no sólo se trata de asociar un gráfico a una idea, sino hacerlo correctamente.
El gráfico se debe ver bien en resoluciones grandes y pequeñas (de hecho, para las resoluciones pequeñas suelo hacer versiones específicas de cada icono para aprovechar al máximo cada píxel), y el gráfico debe ejemplificar y representar correctamente la idea a la que hace referencia.
En el ejemplo, el cohete se asocia a la ACCIÓN LANZAR (lauch), que suele aparecer en algunos menús y aplicaciones para permitir ejecutar algún programa externo.
Por cierto, todos los iconos de Tango y Pasodoble están hechos con Inkscape . Os animo a adentraros en el mundo del diseño vectorial con él y a participar en el proyecto Tango enviando vuestros propios iconos o mejorando los existentes. ;)
— jEsuSdA 8)
Comentarios
Nuevos iconos para Pasodoble | El friki-test geek para nerds y personas corrientes
Muy interesante!
PD: Y que pasa si pones el cohete sobre un fondo rojo? he? he? que pasa? he? ;) :)
— josepzin · 18 enero 2007, 12:13 · #
jejejeje!
Si es rojo oscuro, como el rojo del borde del icono, entonces, se verá claramente el rojo claro sobre el fondo rojo oscuro.
si es rojo claro como el del interior del cohete, entonces el borde rojo oscuro hará que se pueda distinguir la silueta. ;)
Sabía que alguien iba a preguntarlo! jejejeje
— jEsuSdA 8) · 18 enero 2007, 12:17 · #
El día que tenga nociones básicas de Inkscape, te comento :P xD
Adeus!
— gadi · 18 enero 2007, 21:59 · #
La verdad es que a mi esto de los íconos me gusta mucho. En mi anterior trabajo tuve que diseñar muchos muchos y disfruté haciendolos. El estilo que usamos era el del “msn”.
Ayer estuve revisando la web y veo que no han cambiado nada desde que dejé la empresa.
Son estos: inmolan.com
— josepzin · 20 enero 2007, 10:22 · #