TactilApp Logo

Optimización de resources para aplicaciones digitales

Aug 27, 2013 assets, mapas mentales, optimización, resources No hay comentarios

Una de las partes fundamentales a la hora de realizar un diseño, son los elementos gráficos o resources que a posteriori se van a maquetar sobre la aplicación, ya sea web o sobre dispositivos móviles. En este artículo vamos a hablar sobre las partes fundamentales de este tipo de elementos y las herramientas que solemos utilizar en Tactilapp.

Preparación

La base de toda buena ejecución es una preparación cuidada y minuciosa. De nada sirve optimizar al máximo los resources si en la estructura no se reutilizan elementos del UI o no se estructura correctamente.

Como muestra de ello, os dejo un mindmap o mapa mental de lo que sería una estructura de una aplicación. De esta manera podemos tener una vista general de todo el contenido que va a llevar la aplicación y cómo podemos organizar los contenidos y resources que conllevará el conjunto. Os adjunto una imagen general sin detalle, ya que lo importante es hacer una vista previa de todo el bloque.

Mapa mental

Este tipo de herramientas son muy útiles y existen multitud de ellas en internet. Las que más utilizamos nosotros suelen ser Mindmeister y Mindnode Lite, las 2 modelos freemium y que para proyectos pequeños son muy funcionales.

Ejecución

Una vez tenemos todos los diseños elaborados, toca hacer una pantalla general de todo el UI de la aplicación para obtener el número mínimo de resources posibles, como en el caso del anterior artículo sobre Novecientos. Tras esto, estamos listos para poder exportar todos los elementos necesarios.

Es conveniente utilizar nomenclaturas a la hora de exportar los resources. De esta manera localizamos rápidamente un botón, un icono, un fondo, una imagen… y sus respectivos estados en los botones, por ejemplo (enabled, pressed, focus…).

Los .9 patch se pueden crearse con programas y aplicaciones que te ofrecen el resource completo, o bien hacerlos tú mismo a con tu editor de imágenes.

Captura de pantalla 2013-08-20 a la(s) 14.08.18

 

Respecto a las herramientas utilizadas, para mí el gran descubrimiento desde que empecé a realizar UI ha sido Fireworks: La optimización de los .png que exporta, con y sin transparencia, es asombrosa, sobre todo con colores planos. Una lástima que Adobe vaya a dejarlo morir con el tiempo en favor de Photoshop.

Aun así, existen multitud de herramientas como Sketch que están creciendo muy bien y prometen un buen futuro para el desarrollo de las UI.

Lo esencial siempre es utilizar la herramienta con la que estemos más cómodos y tenga las mejores opciones de exportado, ya que a la larga hará que nuestro trabajo sea de calidad.

 

Optimización

Una de las partes más divertidas en el proceso, es la optimización de las imágenes.

En la parte de Android, hay que exportar los resources a Xhdpi, Hdpi, Mdpi y Ldpi. Para ello puedes hacerlo mediante automatizaciones en Photoshop, o bien puedes utilizar programas que te realizan este proceso de forma automática. Aun así, conviene revisar una a una estas imágenes porque en algunos casos, nos podemos llevar sorpresas con los cambios en el color o el mal funcionamiento en el caso de los 9 patch si no nos fijamos detenidamente en la redimensión.

Finalmente, existe un programa el cual es muy práctico y reduce en ciertos casos enormemente el peso de algunas imágenes. Su nombre es ImageOptim, y es una maravilla para estas necesidades.

 

Contacto constante con el equipo

Finalmente, y fuera de lo que es el entorno de los resources, recomendamos encarecidamente la relación constante con el desarrollador, dejando definidas las tareas que va a realizar cada uno de los miembros del equipo y gestionándolas en algún tipo de programa tipo Basecamp, y manteniendo un control de las versiones en Github o Bitbucket. En nuestro caso empleamos los 2 (Github de manera pública y Bitbucket de manera privada).

 

Sobre Rodrigo Maroto

Rodrigo Maroto ha escrito 6 artículos en este blog.

Diseñador de interfaces para móviles y entornos web. Apasionado de la usabilidad y la arquitectura de la información, dedico todos los días a aprender algo nuevo. Dedicado en cuerpo y alma a Tactilapp, donde desarrollamos aplicaciones móviles y web adaptable a todos los dispositivos. El resto del tiempo lo dedico a ser extrovertido, curioso, y viajero.