Elementos gráficos para el diseño. Iconos

Uno de los elementos gráficos más usados junto con las fotografías para el diseño web.
Los iconos (del griego eikon-onos, imagen) son uno de los elementos gráficos más usados, no sólo en esta nuestra época digital, sino que desde la más remota antigüedad han servido como puntos clave de información variada, existiendo extensos estudios sobre la importancia de la iconografía en las diferentes civilizaciones humanas.


Los misión fundamental de un icono es ofrecer, sin distraer, una información visual concreta.


Para poder desempeñar acertadamente esta misión, un icono debe reunir una serie de características, entre las que destacan las siguientes:

  • Debe ser los más sencillo posible, con los suficientes detalles como para expresar lo que debe, pero no más. Los iconos enrevesados, complejos y con muchos trazos tan solo crean confusión.
  • Debe seguir los modelos ya aceptados por el público tipo que los va a visualizar. Existen iconos característicos dentro de una comunidad o país, así como otros asumidos a nivel mundial. Salirse de este modelo ya aceptado hace perder la claridad al icono, condenándolo al fracaso.
  • Debe estar perfectamente concebido para la información concreta que va a representar. Pequeñas diferencias en el diseño de un icono pueden crear grandes diferencias de cara al espectador.
En el mundo real los iconos son ampliamente utilizados, dando las personas información variada de forma rápida mediante un lenguaje visual entendido por todos.


En el diseño de interfaces informáticas, los iconos se emplean para dos cometidos principales:

  • En la interfaz de los programas, identifican las carpetas, aplicaciones, archivos, menús o herramientas. Son los habituales iconos del escritorio o de los programas en Windows o en Mac.


  • Como elementos gráficos en los documentos y en las páginas web. Los iconos aquí sirven para identificar secciones, situar puntos visuales interactivos, ampliar la información de enlaces textuales a los que acompañan, etc.

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 que debemos 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 el enví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.

La representación directa se basa en concebir el icono como una plasmación gráfica directa del mensaje. Un ejemplo claro será el dibujo de un teléfono para representar dónde hay una cabina telefónica o dónde puede encontrar el usuario información sobre los números de teléfono de una empresa.


Mediante la analogía buscamos una imagen sencilla que se asemeje de forma directa al núcleo del mensaje que queremos transmitir. Como ejemplo tenemos el típico sobrecito usado en las páginas web para indicar un acceso a información sobre direcciones de correo electrónico o un enlace directo a la escritura de un mensaje de este tipo.


Por último, la metáfora se basa en el diseño del icono que aunque no expresa literalmente el mensaje a transmitir, si que sugiere una comparación con el concepto básico del mismo, facilitando su comprensión. Un ejemplo de este tipo de iconos sería el icono que presenta una puerta abierta para indicar la salida de una aplicación informática, o un clip para indicar un fichero adjunto a un formulario o mensaje de correo.


La forma más fácil de crear un icono es usando un programa cualquiera de pintura o de ilustración, siendo preferibles estos últimos, al permitir al diseñador trabajar a la escala que desee, cambiar el tamaño de las imágenes sin pérdida alguna de calidad y manipular libremente las formas. Al tener todo listo, se guarda el icono en el formato adecuado.


Si la imagen va a ser un icono de sistema, en los sistemas operativos Windows habrá que guardarlo en formato ICO (con extensión .ico), debiendo tener unas dimensiones de 16 x 16 píxels (iconos pequeños) o de 32 x 32 (iconos grandes) y 256 colores como máximo. Un factor a considerar es que son pocos los programas gráficos que permiten trabajar con el formato ICO, pudiendo citar entre los que si lo hacen a MicroAngelo, aplicación especialmente concebida para crear y guardar iconos.


La forma de trabajo será entonces crear los iconos en un programa de ilustración, salvarlos en formato GIF y cargarlos en MicroAngelo, desde donde podremos realizar en ellos las correcciones oportunas y guardarlos en formato ICO.

Por su parte, los ordenadores MAC trabajan con iconos de sistema en formato ICNS (ficheros de extensión .icns), que podemos obtener mediante diferentes programas, destacando entre ellos Export Icon Plug-In, que funciona como un plugin de Photoshop que permite exportar directamente los gráficos creados a ese formato.


Si los iconos están destinados a su inclusión en páginas web, el formato de almacenamiento puede ser cualquiera de los de mapa de bits aceptados por los navegadores, aunque lo más normal es que se guarden en formato GIF, dada la simpleza gráfica de los iconos y su limitado número de colores.

Los iconos pueden tener ahora cualquier tamaño, aunque es recomendable que éste sea pequeño, ya que el usuario asocia por costumbre los iconos con elementos gráficos de dimensiones limitadas, siendo normal que oscilen entre 10 x 10 píxeles y 20 x 20 píxeles. Imágenes mayores deberán ser consideradas más como botones que como iconos.

Si los iconos están destinados a otro medio cualquiera, su diseño estará condicionado por las limitaciones que imponga el mismo. Por ejemplo, si tenemos que diseñar iconos para aplicaciones de PDA, el número de colores a usar será, en general, muy reducido.


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 son recomendables 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.


Aunque los iconos se entienden como elementos gráficos, es posible reforzar si es necesario el mensaje visual propio de estos elementos con algún contenido textual que lo respalde, sobre todo en aquellos casos en los que el diseño del icono no exprese de forma totalmente clara su función, o en aquellos otros en los que un mismo icono vaya a usarse para transmitir varios mensajes diferentes (esto no es aconsejable nunca, pero muchas así se hace). Este uso de los iconos no es muy adecuado, siendo preferible en la mayoría de los casos sustituirlos entonces por botones.


Si el icono se acompaña de un texto, éste debe quedar limitado a una sola palabra, dos a lo sumo, que indiquen literalmente y sin confusiones la finalidad del icono.

Una última consideración importante: el estilo de los iconos usados en un trabajo debe ser el mismo, ya que es importante mantener la consistencia en los elementos gráficos. Si empezamos diseñando nuestros iconos en color azul oscuro sobre fondo naranja claro, todos los iconos deberán seguir este estilo. A lo sumo podremos crear un nuevo estilo para iconos específicos que se ubiquen en otra zona de la composición o página web, pero tendrán que ajustarse todos ellos a ese estilo concreto.

Autor

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.

Compartir

Comentarios

rebeca

22/1/2008
muy bueeno!! me ayudo muchisimo
con algunas dudas que tenia
gracias! =)

olivia barrueta

27/1/2008
donde carajo estan los iconos

Ledezma

15/11/2009
te necesito
Olivia Barrueta Gonzales
por favor comunicate con migo erick

ingeniero rojo

14/11/2011
BUSCO A MI AMOR OLIVIA BARRUETA GONZALES
HOLA BUSCO A OLIVIA BARRUETA GONZALES ELLA VIVE EN LA COLONIA CONCORDIA DE CIUDAD CHIHUAHUA, SI ALGUIEN LA CONOCE POR FAVOR QUE SE COMUNIQUE AL SIG: CORREO
marlennecontretas@yahoo.com
URGENTISIMO URGENTE URGENTE URGENTE