Diseño de Apps para móvil. Guía para principiantes.

DISEÑO-DE-APPS-PARA-MOVIL
Share on facebook
Share on twitter
Share on pinterest

¿Tienes que hacer un diseño de apps para móvil y no sabes cómo empezar? Pues ahora te cuento los pasos básicos que debes seguir para comenzar un diseño de apps de móvil en IOS y Android, que son los mismos que yo seguí para diseñar mi primera app móvil.

Lo primero que debéis saber es que debemos 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 tengamos el diseño terminado, con todas sus pantallas a resolción 2X, adapataremos los elementos necesarios al resto de resto de resoluciones. Para ello dividimos 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 si diseñamos en 2x que 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:

-Calculador de tamaños – http://density.brdrck.me/

-Adaptador de tamaños automático – http://macrabbit.com/slicy/

-Escalador – http://bjango.com/mac/skalapreview/

 

Elementos comunes, UI Elements.

 

Tenemos que tener en cuenta que para el diseño de app para móvil contamos 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 situa 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.

Deberemos tener todos esos elementos guardados con los diferentes tipos de densidades (1X, 2X, 3X – IOS)

Otro elemento que debemos 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…

 

Y desde el punto de vista del diseño ya no hay más que explicar y, ¡espero que si vais a empezar a diseñar Apps os sirva de ayuda! Y para completarlo, os 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 – http://developer.android.com/index.html

Subscribe to our Newsletter

Haz clic en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Share this post with your friends

Share on facebook
Share on google
Share on twitter
Share on linkedin

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *