diseño de aplicaciones móviles: creando experiencias
DESCRIPTION
El diseño de una aplicación movil implica conocer y saber manejar de forma óptima una serie de conceptos y elementos. En esta presentación que contiene numerosos ejemplos visuales podrás conocer qué cosas tener en cuenta y cómo hacerlo para crear una experiencia inmersiva con tu aplicación.TRANSCRIPT
![Page 1: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/1.jpg)
Diseñoen aplicaciones móviles
Claves a tener en cuenta
![Page 2: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/2.jpg)
Crea idea de marca
![Page 3: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/3.jpg)
Una parte CRUCIAL del diseño de tu app es el tratamiento correcto del COLOR
![Page 4: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/4.jpg)
Descuidar la “personalidad” de tu app
Lo que
NOdebes hacer
![Page 5: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/5.jpg)
Utiliza un color para enfatizar tu idea de marcay los elementos importantes de la app
![Page 6: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/6.jpg)
![Page 7: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/7.jpg)
![Page 8: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/8.jpg)
![Page 9: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/9.jpg)
![Page 10: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/10.jpg)
![Page 11: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/11.jpg)
Utiliza la action bar para acentuar tu marca
![Page 12: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/12.jpg)
El usuario de una Appno mira,
OJEA
![Page 13: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/13.jpg)
Enlaces linkables, palabras destacadas, botones de acción... aplicar TU COLOR a estos elementos te ayudará a dotar de
fuerza visual y jerarquía el diseño de tu app.
![Page 14: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/14.jpg)
Utiliza un color para señalar cuales son los elementos STANDARD de interacción.
Es un elemento de usabilidad muy potente
Ayudamos al usuario a identificar mejor los elementos de interacción
El ojo humano no ve la info. superflua y elige directamente aquello con lo que puede interactuar
Facilitamos el uso de nuestra app
por lo que...
por lo que...
![Page 15: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/15.jpg)
@isaezdesign
455
Mi Biografía
Mi Trabajo
Mis Seguidores
Mis Libros favoritos
Mi música preferida
@isaezdesign
455
Mi Biografía
Mi Trabajo
Mis Seguidores
Mis Libros favoritos
Mi música preferida
Si abusamos del color TODO GRITA,
los elementos no se jerarquizan y no ayudamos al
usaurio a guiarse a través de la
aplicación.
Una paleta de colores reducida afianzará nuestra identidad de marca, nos hará más reconocibles y perdurables en la memoria.
Lo que
NOdebes hacer
![Page 16: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/16.jpg)
Crea experiencias inmersivas
![Page 17: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/17.jpg)
Focaliza lo que está haciendo o viendo el usuario: sin distracciones visuales.
![Page 18: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/18.jpg)
Delante y detrás: Lo que estoy viendo ahora resalta sobre el 2º plano
![Page 19: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/19.jpg)
Uso de desenfoque u oscurecimiento del 2º plano como recurso para focalizar en la información actual.
![Page 20: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/20.jpg)
En la visualización de videos o aplicaciones de lectura es muy útil esconder las barras superior e inferior.
Despejar la pantalla, la zona de lectura, de elementos molestos.
![Page 21: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/21.jpg)
Modo inmersivo
Las action bar tienen demasiado protagonismo
Con algo de transparencia y usan-do la ocultación creamos una
experiencia más inmersiva. Sin distacciones.
M M
Lo que
NOdebes hacer
Lo que
Sídebes hacer
Lo que
Sídebes hacer
![Page 22: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/22.jpg)
Barras traslúcidas, con gradiente de sólido a transparente... hay varios recursos para que éstas no sean molestas en la app.
![Page 23: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/23.jpg)
Desaparecen todos los iconos y barras para que el video sea el protagonista.Si tocamos la pantalla aparecen de nuevo para interactuar con la aplicación.
Lo que
Sídebes hacer
![Page 24: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/24.jpg)
![Page 25: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/25.jpg)
Las imágenes son más rápidas que las palabras
![Page 26: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/26.jpg)
Algunos tips sobreel uso de imágenes
![Page 27: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/27.jpg)
El ojo humano se dirige primero a las imágenes, porque son más fáciles de interpretar para el cerebro y nos suelen aportar mayor información que las palabras.
Algunos tips sobre el uso de imágenes
1
![Page 28: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/28.jpg)
Deben ser flexibles para los distintos tamaños de dispositivos, sin deformarse.
Algunos tips sobre el uso de imágenes
2
![Page 29: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/29.jpg)
Puedes presentar las imágenes con diferentes decoraciones para evitar
la monotonía visual.
Algunos tips sobre el uso de imágenes
3
![Page 30: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/30.jpg)
Circa News Imágenes grandes, protagonistas.
![Page 31: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/31.jpg)
Android design in action Uso de formatos de imágenes rectangulares , circulares...etc.
![Page 32: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/32.jpg)
![Page 33: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/33.jpg)
Cuidado cuando texto e imagen van solapados. El texto SIEMPRE debe ser legible
Algunos tips sobre el uso de imágenes
4
![Page 34: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/34.jpg)
Circa News
![Page 35: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/35.jpg)
Etsy
![Page 36: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/36.jpg)
Airbnb
![Page 37: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/37.jpg)
Utiliza los siguientes recursos para asegurarte la legibilidad del texto
- Leve oscurecimiento con degradado de la imagen donde vaya el texto.
- Ligero desenfoque.
![Page 38: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/38.jpg)
Marcadores de posición (placeholders)
![Page 39: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/39.jpg)
Si tu app tiene una gran cantidad de imágenes y hay un tiempo de carga inevitable debes colocar algo que
indique al usuario que se están cargando las imágenes
Esto evita la sensación de que se ha quedado colgada
Dar un apoyo visual de carga y ubicación mediante el uso de elementos semitransparentes.
![Page 40: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/40.jpg)
No ocultes con colores sólidos los elementos con los que se esté interactuando, utiliza cierto grado de transparencia para que el usuario sepa en todo momento dónde está. Tener presente el feedback visual.
M M M
TOUCH FEEDBACKLo que
NOdebes hacer
Lo que
Sídebes hacer
![Page 41: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/41.jpg)
Lo que
Sídebes hacer
![Page 42: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/42.jpg)
De esta forma el usuario se ubica en lo que tiene y en las posibilidades que puede obtener.
Lo que
Sídebes hacer
![Page 43: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/43.jpg)
Splash screenUna cosa del pasado
![Page 44: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/44.jpg)
Lleva/muestra al usuario directamente el contenido no le hagas esperar
![Page 45: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/45.jpg)
En el uso de una app CADA SEGUNDO CUENTA, es mejor ofrecer una pantalla donde ya se pueda interactuar, aunque sea muy básicamente a que
el usuario no pueda hacer nada
![Page 46: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/46.jpg)
Una imagen de presentación no tiene por qué estar reñida con ser algo USABLE:
Imagen + acceso + splash
![Page 47: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/47.jpg)
Los tutoriales
![Page 48: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/48.jpg)
Algunos tips sobreel uso de tutoriales dentro de la app
![Page 49: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/49.jpg)
Evita el uso de un tutorial, eso te obligará a simplificar tu aplicación
Algunos tips sobre el uso de tutoriales
1
![Page 50: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/50.jpg)
Si lo primero que muestras es un tutorial dará sensación de uso complicado de la app
Algunos tips sobre el uso de tutoriales
2
![Page 51: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/51.jpg)
Implementar un tutorial cuando se necesite y en uso de la acción a través de una pequeña animación sutíl, por ejemplo...
Algunos tips sobre el uso de tutoriales
3
![Page 52: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/52.jpg)
Lo que
SIdebes hacer
![Page 53: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/53.jpg)
La opción de OMITIR siempre debe aparecer, no obligues al usuario a ver un tutorial si no quiere...
Algunos tips sobre el uso de tutoriales
4
![Page 54: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/54.jpg)
Este tipo de tutoriales aumentan el tiempo de espera para usar la app.En este caso no tiene opción de omitir tutorial lo cual es un error.
Lo que
NOdebes hacer
![Page 55: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/55.jpg)
Algunos buenos ejemplos sobre el tema de los tutoriales...
![Page 56: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/56.jpg)
![Page 57: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/57.jpg)
De esta forma el usuario sabe qué posibilidades tiene sin esperas.
Lo que
Sídebes hacer
![Page 58: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/58.jpg)
Airbnb
El usuario puede OMITIR el tutorial e ir directamente a la app ¡perfecto!
Lo que
Sídebes hacer
![Page 59: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/59.jpg)
El login
![Page 60: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/60.jpg)
1 No obligues al resgistro hasta que no sea totalmente necesario
El login
1
![Page 61: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/61.jpg)
1 Debes dejar MUY CLAROS LOS BENEFICIOS DE REGISTRARSE en tu app
El login
2
![Page 62: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/62.jpg)
1 El registro debe serRÁPIDO Y FÁCIL:
- A través de redes sociales- Email + password
El login
3
![Page 63: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/63.jpg)
Mezcla de tutorial y login¡2x1!
Lo que
Sídebes hacer
![Page 64: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/64.jpg)
Lo que
Sídebes hacer
![Page 65: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/65.jpg)
Lo que
Sídebes hacer
![Page 66: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/66.jpg)
Lo que
Sídebes hacer
![Page 67: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/67.jpg)
Lo que
NOdebes hacer
![Page 68: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/68.jpg)
En resumen:Evita estos errores de diseño
![Page 69: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/69.jpg)
Enfatiza gracias al color
Las imágenes son más fuertes que las palabras
No uses Splash Screens
No obligues a registrarse al usuario antes de usar tu app
Integra redes sociales como medio de login
Genera valor de uso desde el primer segundo ¿Por qué necesitabn tu app un usuario?
![Page 70: Diseño de aplicaciones móviles: creando experiencias](https://reader034.vdocuments.pub/reader034/viewer/2022052315/55631819d8b42a811a8b49e9/html5/thumbnails/70.jpg)
¡Gracias!
@isaezdesign