Diseño de una App: preparando los archivos

El primer punto a resolver al momento de comenzar a diseñar la interfaz de una app es la definición del tamaño del espacio de trabajo. Por ejemplo, Android recomienda diseñar con un documento preparado para una base estándar, de manera tal que al momento de preparar los archivos para el desarrollador escalemos para densidades (resoluciones) mayores o menores. En el lado opuesto tenemos a iOS, el cual recomiendan diseñar en resolución para pantallas de retina, o sea, en la mayor densidad posible.

Teniendo en cuenta estas resoluciones, comenzaremos a trabajar sobre la interfaz de la app sobre la base de los wireframes (como vimos en notas anteriores, donde explicamos como diseñar un wireframe). Para comenzar a preparar cada una de las pantallas, debemos tener en cuenta en qué software es más conveniente diseñar. Si bien existen varias alternativas, los más aconsejables son Adobe XD, Sketch o Photoshop. Estas herramientas cuentan con varias funciones importantes que nos ahorran trabajo al momento de preparar los archivos como ser librería o kits de UI para Android o iOS, exportación de contenidos, generación de preview, entre otras.

A medida que avancemos con nuestro diseño, debemos, y esto, más que una recomendación, es una obligación ( :D ), ir testeando cómo se visualiza nuestra app en un smartphone real. Incorporar esta práctica de forma habitual en el proceso de diseño nos permitirá asegurarnos de que el tamaño de los elementos y la tipografía son correctos y que los contrastes son suficientes.

La Preparación de Archivos

Al finalizar el diseño y al momento de preparar los archivos para el desarrollador tendremos que tener en cuenta varios puntos. Esto no solo ahorrará tiempo de desarrollo, sino también confusiones. Algunos puntos importantes son:

• Nombre de archivos (Lo más importante de todo): Cuando trabajamos con muchas imágenes diferentes u otros elementos, es importante nombrarlos de forma clara, para que la personsa que continue el trabajo pueda rastrearla de forma fácil. También recomendamos ordenarlas en carpetas según las densidades. De esta manera el desarrollador tendrá un mayor control sobre estos archivos.
• Imágenes: Cuando trabajamos para app bajo Android o iOS, o bien ambos, las imágenes deben exportarse de manera correcta. Por ejemplo, iOS recomienda trabajar con imágenes a @1x y a @2x (@2x es pantallas de retina). Entonces, teniendo en cuenta esto, deberemos crear dos carpetas, una será 1x y la otra 2x. Dentro de éstas exportaremos las imágenes según su densidad o resolución.
• Fondos, Iconos y botones: Debemos prestar especial atención a nuestro diseño. Por ejemplo: si un fondo es un color pleno o un degradé. Deberemos evaluar si es conveniente exportarlo como imagen o no. En el caso de los íconos sucede lo mismo que explicamos en imágenes. Muchas veces es conveniente hacer una exportación como imagen, excepto que hayamos utilizado fuentes de íconos del tipo Apple Symbols u otras.

Por último, es importante mencionar la relación con el equipo de desarrollado. Es fundamental mantener una excelente comunicación, que sea constante y fluida. Seguramente surgirán dudas acerca del tamaño de los gráficos o fuentes, márgenes o algún otro elemento, ya sea porque en el proceso de diseño se nos pasó por alto o no sea comprendida claramente por el desarrollador.

Para despejar esas dudas, lo mejor es preparar una serie de documentos visuales que permitan o ayuden al desarrollador a comprender el alcance real del desarrollo. Y además generar reuniones, a distancia o presenciales, para avanzar en forma correcta sin sobresaltos.

¡Contá con nosotros para diseñar y desarrollar tu Aplicación Mobile! Sin dudas vamos a hacer crecer a tu negocio, ponete en contacto con nosotros que tenemos una propuesta para vos.