Imágenes

Lo primero que tenemos que tener claro es que en muchos proyectos el mayor tamaño viene dado por las imágenes incluidas en el mismo. Las imágenes son un gran recurso, pero mal utilizado puede ser un gran enemigo a la hora de tener proyectos con un tamaño reducido.

Reduce el número

Como programadores nos gusta disponer de recursos gráficos para aplicar como iconos para botones, toolbars, etc. Por ese motivo tendemos a añadir a nuestros proyectos todos los iconos que consideramos de uso habitual en las aplicaciones. El objetivo es noble, pero la realidad es bien distinta, todo lo que no se usa sobra, por lo tanto deja solo en tus proyectos las imágenes que realmente usas y elimina las que no utilices. La excusa del “por si acaso” no es válida, no hay ningún problema en añadir una imagen o icono en el momento que la necesites.

No incluyas las imágenes a través del portapapeles

Cuando incluimos imágenes en nuestros proyectos debemos tratar de importarlas siempre directamente de un fichero en disco, es la mejor forma de garantizar que la estamos importando con las optimizaciones adecuadas. Si por ejemplo copiamos una imagen al portapapeles lo más probable es que su formato sufra una conversión que nos haga perder toda optimización que hayamos realizado.

Optimiza las imágenes antes de importarlas

Cuando vayamos a importar una imagen o icono en nuestro proyecto antes de importarla es recomendable pasarla previamente por un sistema de optimización que reduzca su paleta de colores o tamaño. De esta forma podemos ganar cientos de bytes que siempre son de agradecer para conseguir proyectos del menor tamaño posible lo que agiliza su almacenamiento y el envío del mismo por Internet. Existe multitud de aplicaciones y servicios online para hacerlo.

¿Dónde ubicar los objetos dibujo?

Si son imágenes o iconos que vamos a usar en esquemas o acciones definidas en el proyecto de datos no nos queda más remedio que ubicarlas en el proyecto de datos.

Si son imágenes o iconos que vamos a usar la interfaz parece más lógico ubicarlas en el proyecto de aplicación ya que de forma natural trataremos de localizarlas en el mismo proyecto donde estamos creando la interfaz. Si el número de imágenes es reducido no merece la pena pensar en ubicarlo en el proyecto de datos.

Si nuestro proyecto requiere el uso de cientos de imágenes o iconos y queremos "adelgazar" nuestro proyecto de aplicación, podemos almacenarlas en el proyecto de datos que habitualmente ocupa una décima parte del tamaño del proyecto de aplicación, consiguiendo así reducir el tamaño del proyecto de aplicación sin que la penalización del proyecto de datos que suele cambiar mucho menos sea un problema.

Evita la información redundante, icono y texto juntos no siempre tienen sentido

Cuando aplicamos un sistema de diseño conseguimos unicidad en nuestra aplicación, es decir, que el usuario vea que toda la aplicación se comporta igual y tiene una interfaz homogénea. Uno de los aspectos a considerar por el diseñador es en que casos se aplicarán iconos, cuándo llevarán solo texto y cuándo deben llevar ambos datos.

Si un icono es muy representativo no necesita de texto, por ese motivo en la toolbars se pueden llegar a utilizar solo iconos sin que el usuario tenga necesidad de más explicaciones para reconocerlos. Debemos tener en cuenta que un texto se lee y se entiende mientras que una imagen requiere interpretación.

En el caso de los botones es habitual tener que usar texto ya que no siempre es fácil representar su significado mediante iconos, por ese motivo puede ser más coherente no usar iconos en ningún botón aunque muchos podrían tener un icono fácilmente reconocible.

En los menús el texto se hace necesario por lo que el uso del icono debería estar bastante justificado ya que de lo contrario estaría metiendo ruido al ser información redundante respecto al texto.

En los combobox se pueden usar iconos cuando representan información rápida de leer para el usuario, ya que de lo contrario también caemos en la redundancia, por ese motivo entre poner solo icono o solo texto, tiene más sentido usar solo texto.

Es cierto que para representar información de estados en una rejilla si puede ser más útil el icono debido a que ocupa menos espacio que el texto, pero siempre y cuando el icono no requiera ninguna explicación. Por ejemplo, un círculo verde = servido y un círculo, rojo = pendiente es algo que como programadores nos parece lógico, pero que el usuario debe interpretar, es evidente que con el tiempo se acostumbrará a los colores y su significado pero no es algo estándar que ya esté preestablecido.

Utiliza una librería de iconos homogénea

La iconografía de la aplicación debemos cuidarla tanto como cualquier otro aspecto de la interfaz. Debe ser homogénea, es decir, no debemos buscar iconos por internet y mezclar iconos de diferentes librerías porque se nota y queda muy mal, da una sensación de aplicación descuidada.

No utilices iconos de diferentes tamaños para los mismos contextos, si pones iconos en las toolbars todos deben tener el mismo tamaño, y lo mismo debes hacerlo en los botones, menús, pestañas, etc.

No te compliques la vida buscando librerías con miles de iconos espectaculares porque los iconos no deben ser “bonitos” sino que deben ser fáciles de interpretar y en este apartado los iconos más elaborados y con más colores cumplen peor esta función. Fíjate en las señales de tráfico como utilizan muy pocos colores y usan imágenes sencillas, fáciles de interpretar en muy poco tiempo.

Si tenemos claro el objetivo que deben cumplir los iconos encontraremos que las librerías con iconos más sencillos y de un solo color están triunfando en la web, las aplicaciones para móviles y en las de escritorio más modernas.

Material Design Icons de Google es una gran librería que cuenta con miles de iconos y que además podremos extender con otras muchas librerías gratuitas y de pago que han sido desarrolladas con el mismo sistema y que por lo tanto podremos combinar sin que se aprecien diferencias de estilo.

En esta página web contamos con un buscador que nos facilita localizar iconos. Una de las grandes ventajas de esta librería es que cualquier usuario que tenga un móvil Android o que use aplicaciones de Google en iOS se sentirá cómodo porque en muchos casos lo reconocerá de forma directa.

Una de las ventajas de esta página web es que cuando seleccionamos un icono accedemos a una página que nos permite exportarlo a diferentes formatos.

Utiliza iconos para dar soporte a High DPI

Un aspecto que debemos tener en cuenta en el desarrollo de nuestras aplicaciones es que los dispositivos actuales y más aún en el futuro tienen resoluciones mucho más altas que el FullHD (1920x1080), los dispositivos móviles, tabletas de alta resolución e incluso las pantalla con resolución 4K empiezan a ser más habituales, por este motivo no podemos incluir en nuestra aplicación iconos de 16x16 o 32x32 ya que en estas pantallas se verán pixelados. Para resolver este problema debemos incluir en nuestra aplicación iconos con una resolución de 64x64 o 96x96 para tener cubiertas futuras resoluciones.