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 que recomienda diseñar en resolución para pantallas de retina, o sea, en la mayor densidad posible.
A partir de todo esto, comenzaremos a trabajar sobre la interfaz de la app sobre la base de los wireframes (como vimos en notas anteriores, donde explicamos cómo diseñar un wireframe). Para iniciar la preparación de cada una de las pantallas, debemos tener en cuenta en qué software es más conveniente diseñar. Si bien existen varias alternativas, las 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 – realizar testeos en torno a la visualización de 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 persona que continúe 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 una app desde 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, debemos crear dos carpetas, una será 1x y la otra 2x. Dentro de éstas exportamos las imágenes según su densidad o resolución.
- Fondos, íconos y botones: Debemos prestar especial atención a nuestro diseño. Por ejemplo: si un fondo es un color pleno o un degradé. Debemos 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 desarrollo. 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.
¡Podés contar con nosotros para diseñar y desarrollar tu Aplicación Mobile! Nuestras propuestas te ayudarán a crecer con tu negocio y a destacar tu marca.