Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Diseño de aplicaciones móviles: creando experiencias

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.

Diseño de aplicaciones móviles: creando experiencias

  1. 1. Diseño en aplicaciones móviles Claves a tener en cuenta
  2. 2. Crea idea de marca
  3. 3. Una parte CRUCIAL del diseño de tu app es el tratamiento correcto del COLOR
  4. 4. Descuidar la “personalidad” de tu app Lo que NOdebes hacer
  5. 5. Utiliza un color para enfatizar tu idea de marca y los elementos importantes de la app
  6. 6. Utiliza la action bar para acentuar tu marca
  7. 7. El usuario de una App no mira, OJEA
  8. 8. 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.
  9. 9. 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...
  10. 10. @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
  11. 11. Crea experiencias inmersivas
  12. 12. Focaliza lo que está haciendo o viendo el usuario: sin distracciones visuales.
  13. 13. Delante y detrás: Lo que estoy viendo ahora resalta sobre el 2º plano
  14. 14. Uso de desenfoque u oscurecimiento del 2º plano como recurso para focalizar en la información actual.
  15. 15. 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.
  16. 16. 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
  17. 17. Barras traslúcidas, con gradiente de sólido a transparente... hay varios recursos para que éstas no sean molestas en la app.
  18. 18. 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
  19. 19. Las imágenes son más rápidas que las palabras
  20. 20. Algunos tips sobre el uso de imágenes
  21. 21. 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
  22. 22. Deben ser flexibles para los distintos tamaños de dispositivos, sin deformarse. Algunos tips sobre el uso de imágenes 2
  23. 23. Puedes presentar las imágenes con diferentes decoraciones para evitar la monotonía visual. Algunos tips sobre el uso de imágenes 3
  24. 24. Circa News Imágenes grandes, protagonistas.
  25. 25. Android design in action Uso de formatos de imágenes rectangulares , circulares...etc.
  26. 26. Cuidado cuando texto e imagen van solapados. El texto SIEMPRE debe ser legible Algunos tips sobre el uso de imágenes 4
  27. 27. Circa News
  28. 28. Etsy
  29. 29. Airbnb
  30. 30. Utiliza los siguientes recursos para asegurarte la legibilidad del texto - Leve oscurecimiento con degradado de la imagen donde vaya el texto. - Ligero desenfoque.
  31. 31. Marcadores de posición (placeholders)
  32. 32. 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.
  33. 33. 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 FEEDBACK Lo que NOdebes hacer Lo que Sídebes hacer
  34. 34. Lo que Sídebes hacer
  35. 35. De esta forma el usuario se ubica en lo que tiene y en las posibilidades que puede obtener. Lo que Sídebes hacer
  36. 36. Splash screen Una cosa del pasado
  37. 37. Lleva/muestra al usuario directamente el contenido no le hagas esperar
  38. 38. 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
  39. 39. Una imagen de presentación no tiene por qué estar reñida con ser algo USABLE: Imagen + acceso + splash
  40. 40. Los tutoriales
  41. 41. Algunos tips sobre el uso de tutoriales dentro de la app
  42. 42. Evita el uso de un tutorial, eso te obligará a simplificar tu aplicación Algunos tips sobre el uso de tutoriales 1
  43. 43. 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
  44. 44. 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
  45. 45. Lo que SIdebes hacer
  46. 46. 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
  47. 47. 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
  48. 48. Algunos buenos ejemplos sobre el tema de los tutoriales...
  49. 49. De esta forma el usuario sabe qué posibilidades tiene sin esperas. Lo que Sídebes hacer
  50. 50. Airbnb El usuario puede OMITIR el tutorial e ir directamente a la app ¡perfecto! Lo que Sídebes hacer
  51. 51. El login
  52. 52. 1 No obligues al resgistro hasta que no sea totalmente necesario El login 1
  53. 53. 1 Debes dejar MUY CLAROS LOS BENEFICIOS DE REGISTRARSE en tu app El login 2
  54. 54. 1 El registro debe ser RÁPIDO Y FÁCIL: - A través de redes sociales - Email + password El login 3
  55. 55. Mezcla de tutorial y login ¡2x1! Lo que Sídebes hacer
  56. 56. Lo que Sídebes hacer
  57. 57. Lo que Sídebes hacer
  58. 58. Lo que Sídebes hacer
  59. 59. Lo que NOdebes hacer
  60. 60. En resumen: Evita estos errores de diseño
  61. 61. 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?
  62. 62. ¡Gracias! @isaezdesign
  63. 63. izaskunsaez.es Diseño Gráfico Diseño print Diseño web Creatividad hola@izaskunsaez.es Twitter: isaezdesign

×