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

¿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

Topics: Inbound Marketing

Written by Janhil Mejia

Marketing Lover and Movie Freak.

Compartimos nuestra experiencia

Este blog está creado con el objetivo de ayudar e informar, después de tanto tiempo haciendo marketing, creando metodologías y herramientas para desarrollar nuestro trabajo, hemos decidido compartirlo contigo.

Recibe nuestros mejores post, guías, eBooks, vídeos y consejos que te ayudaran a crear tu estrategia.

Lo más reciente

¡Síguenos!