Está en la página 1de 52

MOBILE APPS

Primeros pasos en el diseo de aplicaciones mviles


lisandro.vico@donweb.com
Lisandro Vico
PDF Disponible en: webinars.donweb.com
AGENDA

Pensando para mobile

10 principios para el buen diseo

Una app, multiples audiencias

Proceso de diseo de una aplicacin mvil

Consejos y buenas prcticas

Seccin de preguntas y respuestas


PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PENSANDO PARA MOBILE
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
Responsive design - Web Apps - Apps nativas
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles

Conocer la audiencia

Enfocarse en las tareas principales y reducir


requerimientos

Pensar en el contexto, dnde y cmo se va a utilizar

Reducir los niveles de navegacin

Disear para interacciones cortas

Tener en cuenta analytics


PENSANDO PARA MOBILE
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles

Simplicar las bsquedas

Considerar la colaboracin, redes sociales y


comunicacin desde la propia app

Revelar informacin progresivamente

Accesibilidad y usabilidad

Utilizar las metforas visuales con cuidado

Comunicacin constante con el usuario


PENSANDO PARA MOBILE
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
10 PRINCIPIOS
PARA EL BUEN DISEO
Dieter Rams
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
1. Es innovador
2. Provee de utilidad a cada producto
3. Es esttico
4. Hace un producto comprensible
5. Es discreto
6. Es honesto
7. Es duradero
8. Concibe exhaustivamente hasta el ltimo detalle
9. Respeta el medio ambiente
10. Es tan poco diseo como sea posible
10 PRINCIPIOS PARA EL BUEN DISEO
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
Dieter Rams
El diseo no debe dominar las cosas, no debe dominar
a la gente. Debe ayudar a la gente. Ese es su rol
10 PRINCIPIOS PARA EL BUEN DISEO
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
UNA APP, MULTIPLES AUDIENCIAS
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
Donweb DNS Dinmico: donweb.com/ddns
UNA APP, MULTIPLES AUDIENCIAS
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
UNA APP, MULTIPLES AUDIENCIAS
Integracin con el sistema operativo
(app personal o de consumidor)
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
UNA APP, MULTIPLES AUDIENCIAS
Integracin con el sistema operativo
(app corporativa/herramienta)
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
UNA APP, MULTIPLES AUDIENCIAS
Integracin con el sistema operativo
(app corporativa/herramienta)
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE
UNA APLICACIN MVIL
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
1. Investigacin e inspiracin
2. Diagrama de ujo
3. Prototipos: wireframes y mockups
4. Diseo
5. Exportar imgenes para iOS y Android
6. Documento de especicaciones
7. Preparar para la publicacin
PROCESO DE DISEO DE UNA APLICACIN MVIL
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
1. INVESTIGACIN E INSPIRACIN
Conocer el usuario nal, sus
necesidades y roles
Apps similares en el mercado
Buscar inspiracin
http://www.pttrns.com/
http://androidniceties.tumblr.com/
http://inspired-ui.com/
http://www.mobilemozaic.com/
http://www.signa.li/
http://www.iospirations.com/
http://useyourinterface.com/
http://capptivate.co/
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
2. DIAGRAMA DE FLUJO

Ayuda a mantener una estructura


de navegacin lgica, ordenada y
razonable

Las pantallas claves deben estar


en los primeros niveles del ujo

Herramientas propuestas:
Microsoft Word
http://www.gliffy.com/
https://www.draw.io/
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
3. PROTOTIPOS: WIREFRAMES Y MOCKUPS

El concepto se vuelve tangible

Bajo costo de produccin y rpida iteracin


(el objetivo es recibir feedback)

Se enfoca en el QU, no en el CMO

Mostrar los distintos tipos de informacin

Visualizar la informacin y funciones


disponibles y sus prioridades relativas

Demostrar el efecto de los distintos


escenarios en la pantalla
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
3. PROTOTIPOS: WIREFRAMES Y MOCKUPS
Es un prototipo si proporciona al menos
una parte de la funcionalidad de un
sistema y permite pruebas del diseo
Se puede arreglar ahora en el dibujo
con una goma de borrar o ms tarde en
la obra con un martillo
Herramientas propuestas:
http://balsamiq.com/
https://popapp.in/
http://getlaunch.com/
http://www.invisionapp.com/
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
https://developer.android.com/design/index.html
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
iOS (iPhone - iPad)
dispositivo retina?
(pt) point
resolution
(px) pixel
resolution
iPhone < 3GS 320 x 480 320 x 480
iPhone 4, 4S Si 320 x 480 640 x 960
iPhone 5 Si 320 x 568 640 x 1136
iPad 1, 2 & Mini 768 x 1024 768 x 1024
iPad 3, 4 Si 768 x 1024 1536 x 2048
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
Android
dispositivo (px) pixel resolution (pd) pixel density
Nexus 4 768 x 1280 xhdpi
Nexus 5 1080 x 1920 xxhdpi
Samsung Galaxy S3 720 x 1280 xhdpi
Samsung Galaxy S4 1080 x 1920 xxhdpi
HTC One 1080 x 1920 xxhdpi
LG G2 1080 x 1920 xxhdpi
Motorola Moto X 768 x 1280 xhdpi
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
MDPI
(1x)
HDPI
(1.5x)
XHDPI
(2x)
XXHDPI
(3x)
XXXHDPI
(4x)
iPhone iPad
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
Android
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
Navegacin
http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
4. DISEO
Guide Guide (http://guideguide.me/)
Flat Icon (http://www.aticon.com/)
Random User (http://randomuser.me/photoshop.html)
Cut and Slice Me (http://www.cutandslice.me/)
http://madebyvadim.tumblr.com/
http://www.cssauthor.com/photoshop-plugins-for-web-designers/
Kit de Acciones iOS 7: http://grinderlabs.com/project/ios7-actions-uikit.html
Recursos para Photoshop:
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
5. IMGENES PARA IOS Y ANDROID
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
5. IMGENES PARA IOS Y ANDROID
Imgenes para Android (XXHDPI)
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
5. IMGENES PARA IOS Y ANDROID
Imgenes para iPad
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
5. IMGENES PARA IOS Y ANDROID
MDPI
(1x)
HDPI
(1.5x)
XHDPI
(2x)
XXHDPI
(3x)
XXXHDPI
(4x)
iPhone iPad
Android
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
Primeros pasos en el diseo de aplicaciones mviles
5. IMGENES PARA IOS Y ANDROID
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
5. IMGENES PARA IOS Y ANDROID
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
6. DOCUMENTO DE ESPECIFICACIONES
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
6. DOCUMENTO DE ESPECIFICACIONES
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
6. DOCUMENTO DE ESPECIFICACIONES
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
7. PREPARAR PARA LA PUBLICACIN
Apple App Store:
Icono de aplicacin: 72 DPI, 1024x1024 (no escalado), plano (sin bordes redondeados)
Capturas de pantalla 3.5 (iPhone Retina): 960x640, 960x600, 640x960, 640x920.
Capturas de pantalla 4 (iPhone 5): 1136x640, 1136x600, 640x1136, 640x1096
Capturas de pantalla (iPad): 768x1024, 768x1004, 1024x768, 1024x748
Capturas de pantalla (iPad Retina): 1536 x2048, 1536x2008, 2048x1536 , 2048x1496
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
7. PREPARAR PARA LA PUBLICACIN
Android App Store:
Icono de aplicacin: 512x512, mximo 1024KB
Hasta 8 capturas por cada dispositivo soportado (smartphone, tablet 7, tablet 10)
Mnimo: 320px
Mximo: 3840px
Imagen destacada: 1024x500 (924x400 zona segura)
Imagen promocional: 180x120 (utilizada para versiones antiguas de Android)
Video promocional: URL de Youtube. Se mostrar como primer item
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
7. PREPARAR PARA LA PUBLICACIN
http://appicontemplate.com/
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
7. PREPARAR PARA LA PUBLICACIN
http://appicontemplate.com/
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
7. PREPARAR PARA LA PUBLICACIN
http://appicontemplate.com/
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
PROCESO DE DISEO DE UNA APLICACIN MVIL
7. PREPARAR PARA LA PUBLICACIN
http://appicontemplate.com/
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
CONSEJOS Y BUENAS
PRCTICAS
SIEMPRE comenzar con un diagrama de ujo y wireframes
Tener en cuenta tiempos y costos de desarrollo
Disear en retina, utilizar imgenes vectoriales y evitar bitmaps
No minimizar los tamaos de las reas de interaccin
Respuesta inmediata al usuario
Tener en cuenta los standards de las distintas plataformas
Usar las ventajas de retina displays responsablemente
Acordarse de los gestos y multitouch, pero no abusar
No asumir que todos los usuarios van a usar la app de la misma manera
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
Bruce Lee
Trata de absorber aquello que es til, rechazar lo que
es intil y aadir lo que es esencialmente tuyo.
PDF Disponible en: webinars.donweb.com Primeros pasos en el diseo de aplicaciones mviles
MUCHAS GRACIAS!
lisandro.vico@donweb.com
Lisandro Vico
PDF Disponible en: webinars.donweb.com