9 ICONOS

APUNTE NRO. 9
ICONOS EN INTERFACES
UNIVERSIDAD DE LA PUNTA
REALIZADOR MULTIMEDIAL – DISEÑO MULTIMEDIAL 2

1
APUNTE NRO. 9 – ICONOS
Universidad de La Punta – Realizador Multimedial – Diseño Multimedial 2

ICONOS
En ésta clase vamos a explorar las diferentes
opciones que tenemos en cuánto a la utilización de
íconos.
Los íconos, son GUIAS VISUALES, que el cerebro
identifica más rápido que a laspalabras. ¿Porqué?
Porque las palabras son también gráficos, cada
carácter es un gráfico, entonces interpretar una
palabra implica decodificar un “conjunto de
símbolos gráficos”, en cambio un ícono ahorra el
paso de la decodificación, vinculando directamente
una imagen a un significado.
¿CUÁNDO USAR ÍCONOS?



Cuando lo que queremos representar tiene
ya un grafismo que lo identifica, combiene
usarun ÍCONO a una palabra.



Cuando son accesos frecuentes.

DISEÑANDO UN ÍCONO

La creación de iconos es un proceso complicado, no
porque precisen un gran trabajo de desarrollo, sino
porque es muy difícil diseñar una figura sencilla que
exprese un mensaje dado de forma clara.
Inicialmente, si existe algún icono ya estandarizado
que represente la información que queremos
transmitir, ese es el quedebemos usar, aunque es
del todo factible realizar pequeños cambios en su
estilo que lo adapten de forma adecuada a nuestro
proyecto, pero manteniendo siempre su diseño
básico original. Este es el caso de iconos ya
"normalizados", como la flecha para indicar un
camino o dirección, la lupa o los prismáticos para
"Buscar", la casita para acceder a la home de un
sitio web, el sobrecito para indicar elenvío de un
correo electrónico, etc.
En caso de que no exista previamente un modelo
aceptado universalmente para el icono que
necesitamos, las posibilidades de diseño propio
aumentan, aunque el trabajo se hace más difícil. Los
caminos más efectivos entonces tal vez sean la
representación directa, analogía y la metáfora.
NUNCA HAY QUE USAR UN ÍCONO CON UN
SIGNIFICADO FUERA DE LO HABITUAL

DIFERENTETIPO DE ÍCONOS:

ÍCONOS ANIMADOS
Una alternativa a los iconos clásicos son los iconos
animados, que se pueden conseguir usando GIF's
animados o pequeños ficheros SWF, creados
normalmente con Macromedia Flash. Estos iconos
resultan muy vistosos, pero hay que tener mucho
cuidado con ellos, ya que, por definición, un icono
no debe distraer al usuario de sus tareas, por lo
que solamente sonrecomendables en casos
puntuales en los que nos interesa atraer la
atención del visitante a un punto concreto (caso
de una oferta especialmente interesante, por
ejemplo). En estos casos, el número de iconos
animados debe ser mínimo (uno o dos como
máximo), y estar limitados a una página concreta.

FAVICON
Un favicon es una pequeña imagen tipo icono que
puedes asociar a una página web para mostrarlo
junto ala barra de direcciones de cualquier
navegador. Los tamaños más comunes para
faviconos, según la calidad del icono, son 16×16,
32×32, 48×48, 64×64 y 128×128.
La imagen en mención, normalmente es el logo o
icono distintivo de la empresa, institución o
persona para quien el sitio ha sido desarrollado.
Sirve para promocionar su imagen, su marca y
crear sitios más personalizados.
Código para agregarun favicon a tu página web:
rel=”icon” />

href=”favicon.ico”

rel=”shortcut icon” />

href=”favicon.ico”

Solo falta crear el icono favicon.ico. Para eso
existen varios sitios web que permiten hacerlo
rápidamente y en línea:

http://www.genfavicon.com/es/
http://faviconsfor.us/
http://flavicon.com
2

APUNTE NRO. 9 – ICONOS
Universidad de LaPunta – Realizador Multimedial – Diseño Multimedial 2

SPRITES
¿Que son los CSS Sprites?
Simplemente se trata de una antigua técnica que al comienzo fue utilizada por los desarrolladores de
videojuegos, y que principalmente consiste en utilizar una sola imagen compuesta por varias y que
haciendo uso de las propiedades background-position de CSS se visualice cada imagen de forma
individual.

¿Y las...