Webinar Diseñoapps

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
Responsive design - Web Apps - Apps nativas
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

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

10 PRINCIPIOS
PARA EL BUEN DISEO
Dieter Rams
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
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
UNA APP, MULTIPLES AUDIENCIAS
Donweb DNS Dinmico: donweb.com/ddns
Integracin con el sistema operativo
(app personal o de consumidor)
(app corporativa/herramienta)
(app corporativa/herramienta)
PROCESO DE DISEO DE
UNA APLICACIN MVIL
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
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/
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/
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
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/
4. DISEO
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
4. DISEO
https://developer.android.com/design/index.html
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
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
4. DISEO
MDPI
(1x)
HDPI
(1.5x)
XHDPI
(2x)
XXHDPI
(3x)
XXXHDPI
(4x)
iPhone iPad
Android
4. DISEO
Navegacin
http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/
4. DISEO
4. DISEO
4. DISEO
4. DISEO
4. DISEO
4. DISEO
4. DISEO
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:
5. IMGENES PARA IOS Y ANDROID
Imgenes para Android (XXHDPI)
Imgenes para iPad
MDPI
(1x)
HDPI
(1.5x)
XHDPI
(2x)
XXHDPI
(3x)
XXXHDPI
(4x)
iPhone iPad
Android
Primeros pasos en el diseo de aplicaciones mviles
6. DOCUMENTO DE ESPECIFICACIONES
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
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
http://appicontemplate.com/
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
Bruce Lee
Trata de absorber aquello que es til, rechazar lo que
es intil y aadir lo que es esencialmente tuyo.
MUCHAS GRACIAS!
lisandro.vico@donweb.com
Lisandro Vico
PDF Disponible en: webinars.donweb.com

Webinar Diseñoapps

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Webinar Diseñoapps

Transféré par

Droits d'auteur :

Formats disponibles

MOBILE APPS

Primeros pasos en el diseo de aplicaciones mviles

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

Enfocarse en las tareas principales y reducir

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

Reducir los niveles de navegacin

Disear para interacciones cortas

Tener en cuenta analytics

Simplicar las bsquedas

Considerar la colaboracin, redes sociales y

Revelar informacin progresivamente

Utilizar las metforas visuales con cuidado

Comunicacin constante con el usuario

Ayuda a mantener una estructura

Las pantallas claves deben estar

El concepto se vuelve tangible

Bajo costo de produccin y rpida iteracin

Se enfoca en el QU, no en el CMO

Mostrar los distintos tipos de informacin

Visualizar la informacin y funciones

Demostrar el efecto de los distintos

Vous aimerez peut-être aussi