Laboratorio temático I

Imágenes

Imágenes

Cuando se habla de imágenes en diseño de interfaces, normalmente se habla de cuatro formatos distintos:

• JPG/JPEG
• GIF
  • Que se pronuncia jif
• PNG
• SVG

JPG/JPEG

El formato JPEG (Joint Photographic Experts Group) fue diseñado para ser el estándar de la fotografía digital, pero eso no llegó a pasar nunca

A grandes rasgos, el formato comprime las imágenes buscando bloques de colores similares y los convierte todos a un mismo color, generando diversos artefactos visuales y perdiendo detalles de la imagen original

Por lo anterior, es que se le considera como un formato de compresión con pérdida de información

GIF

El formato GIF (Graphics Interchange Format) es un formato de compresión sin pérdida de información por lo que no genera artefactos visuales pero, a cambio de eso, tiene una paleta de 256 colores en su forma más simple

Si se quiere usar para comprimir imágenes con más colores, se necesitan codificar por bloques de 256 colores y eso aumenta el tamaño del archivo final, por lo que no se usan para imágenes fotográficas

Las imágenes en este formato se componen de capas entrelazadas, por lo que se puede hacer animaciones con él, y también acepta capas con transparencias

PNG

El formato PNG (Portable Network Graphics) fue diseñado como una alternativa al GIF por asunto de derechos y propiedad intelectual

Es un formato sin pérdida de información de datos por lo que no genera artefactos visualesy también acepta transparencias

Sin embargo, la forma en la que codifica los colores de una imagen hace que mientras más colores tenga la imagen, menor es la compresión del archivo por lo que las imágenes fotográficas tienden a ser de mayor tamaño que las de formato JPG

SVG

El formato SVG (Scalable Vector Graphics) es distinto a los anteriores; se describe a partir de etiquetas porque es, básicamente, un primo del lenguaje HTML

Las etiquetas describen vectores de manera matemática en vez de pixeles, por lo que pueden agrandarse o achicarse sin sufrir ninguna pérdida o deformación

A diferencia de los otros formatos, al usarse en páginas web se comportan como parte del mismo sitio y pueden ser manipuladas como cualquier otro elemento (como en este ejemplo si pasan el puntero del ratón por los estados del mapa) o pueden ser afectadas por las reglas de estilo sin tener que modificar sus descripciones

SVG

Habiendo dicho lo anterior, los archivos SVG son muy convenientes para la generación de iconos, pero hay que tener cuidado con algo:

• Para aplicaciones web el soporte es nativo desde el navegador
• Para aplicaciones en iOS el soporte también es nativo
• Android no soporta SVG de forma nativa
  • Soporta un formato llamado VectorDrawable que puede generarse a partir de un archivo SVG

Logos e iconos

En general, las imágenes nos interesan para dos cosas específicas en el diseño de interfaces:

• Logos
• Iconos

Logos

Un logo es una forma de representación gráfica de una marca

En el habla coloquial se usa la palabra logo para referirse a una de las siguientes cuatro cosas:

• Logotipo
• Isotipo
• Imagotipo
• Isologo

Logotipo

Un logotipo es una representación gráfica basada única y exclusivamente por letras y palabras

Isotipo

Un isotipo es una representación exclusivamente gráfica de una marca y que no necesita ningún texto para ser entendida

Imagotipo

El imagotipo es una representación en la que el texto y el icono funcionan de manera independiente (o sea, podrían separarse)

Isologo

El isologo es una representación en la que el texto y el icono están completamente integrados en un mismo elemento indivisible

Iconos

Un icono es un símbolo pequeño y funcional que se usa en las interfaces (no necesariamente digitales) para representar acciones, objetos o comandos

Se usan para mejorar la navegación y la carga cognitiva del usuario al acelerar la comprensión para acciones comunes (búsquedas, borrado de objetos, por ejemplo) o ahorrando espacio en diseños muy desordenados

Grados de iconicidad

Se reconocen, formalmente, 11 grados de iconicidad, que van desde la imagen al natural de algo hasta una representación no figurativa de el objeto

Iconos

La labor principal de los iconos es comunicar significado en una interfaz

Si la acción/objeto/idea que representan no es inmediatamente clara para los usuarios, el icono se convierte en un adorno o ruido visual que más bien termina estorbando

Iconos

Entre las ventajas de usar iconos en nuestras interfaces debemos notar:

• Tienen el tamaño suficiente para ser blancos de acciones con las manos o con punteros
• Pueden ser lo suficientemente compactos como para poder ser desplegados en un espacio relativamente pequeño
• Si están bien diseñados, es fácil y rápido distinguirlos con una mirada
  • Especialmente si son iconos más o menos estandarizados o con los que el usuario tiene familiaridad
• No es necesario traducirlos para versiones internacionales (siempre que se tengan en cuenta las diferencias culturales)
• Pueden mejorar la recepción estética de un diseño

Iconos

Por otro lado, su uso también tiene que tener en cuenta:

• Los iconos verdaderamente universales son raros
  • La adopción de un icono se ve afectada por la falta de un estándar
  • Aunque el elemento mostrado en el icono sea claro, no siempre su significado dentro de la interfaz es claro
• Tienen que estar etiquetados en todo momento
• Se debe considerar la diferencia relativa de tamaño entre una interfaz móvil y una de escritorio