¡Hola Fernando! 🤓
Si te refieres al software para crear los Wireframes para el diseño de tu app te recomiendo Whimsical Wireframes es gratuita y facil utilizar.
Si tu duda es acerca de los tamaños estándar de pantallas de app, lo primero que debes saber es que hay diseñar la app de IOS y Android por separado, ya que las pantallas y resoluciones de los dispositivos son distintas.
En mi opinión, lo mejor es empezar a diseñar para IOS, ya que tiene menos tipos de resoluciones de pantallas (3) que Android (5).
PARA IOS, EL TAMAÑO DE PANTALLA ES:
iPhone 4: 320 x 480 – 1x
iPhone 5: 640 x 1136 – 2x
iPhone 6: 1334 x 750 – 3x
PARA ANDROID, EL TAMAÑO DE PANTALLA ES:
mdpi – 1x – small
hdpi – 1.5x – normal
xhdpi – 2x – large
xxhdpi – 3x – extra large
xxxhdpi – 4x – extra extra large
RESOLUCIONES Y DENSIDADES DE PANTALLA.
Lo primero que debemos hacer es elegir la resolución con la que empezar a diseñar, y para IOS elegiremos la resolución 2X, de iPhone 5 (640 x 1136). Para Android, partiremos del diseño en iPhone con la resolución 2X / xhdpi.
Una vez tengas el diseño terminado, con todas sus pantallas a resolución 2X, adaptas los elementos necesarios al resto de resto de resoluciones. Para ello divides los tamaños a la mitad para conseguir la resolución 1X y con esas medidas las multiplicamos por tres y tendremos la resolución 3X. Y lo mismo para las resoluciones de Android.
Tenemos que tener en cuenta que si diseñas en 2x, todo lo que hagamos con 1px de tamaño, no podrá ser reducido al 50% por que no existe el 0.5px y por tanto hay que intentar jugar siempre con pixeles pares.
Esto puede ser una tarea bastante aburrida, pero por suerte tenemos ayudas en internet como:
Calculadora de tamaños
Adaptador de tamaños automático
Escalador
ELEMENTOS COMUNES, UI ELEMENTS.
Debes tener en cuenta que para el diseño de app para móvil cuentas con elementos comunes o UI Elements y los propios de la app que estemos diseñando.
Los elementos comunes son por ejemplo:
Status Bar – Sección donde encontramos la cobertura, operadora, batería…
Navigation Bar – Sección en la que se sitúa el botón de menú o atrás, los cuales también son iconos comunes par IOS o Android.
Para tener todos los elementos comunes de cada sistema operativo podemos descargarlos de forma vectorial en internet, de forma gratuita y con los tamaños predeterminados.
ELEMENTOS PROPIOS DE LA APP.
Estos elementos serían por ejemplo iconos del menú o cualquier elemento como imágenes, que no se pueda importar desde la web a la app.
Deberás tener todos esos elementos guardados con los diferentes tipos de densidades (1X, 2X, 3X – IOS)
Otro elemento que debes diseñar con medidas específicas es el icono de la app, el cual aparecerá en el Store de descarga, en el escritorio de pantalla, etc…
Para complementarlo, te dejo un par de enlaces donde podréis ver todo de forma muy detallada.
IOS – https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Alerts.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
Android – https://developer.android.com/index.html
**¡Nunca Pares de aprender!**💚
