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.

1. Diseño
en aplicaciones móviles
Claves a tener en cuenta

2. Crea idea de marca

3. Una parte CRUCIAL del diseño de tu app es el
tratamiento correcto del COLOR

4. Descuidar la “personalidad” de tu app
Lo que
NOdebes hacer

5. Utiliza un color para enfatizar tu idea de marca
y los elementos importantes de la app

11. Utiliza la action bar para acentuar tu marca

12. El usuario de
una App
no mira,
OJEA

13. 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.

14. 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...

15. @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

16. Crea experiencias inmersivas

17. Focaliza lo que está haciendo o viendo el usuario:
sin distracciones visuales.

18. Delante y detrás:
Lo que estoy viendo
ahora resalta sobre el
2º plano

19. Uso de desenfoque u
oscurecimiento del 2º plano
como recurso para focalizar
en la información actual.

20. 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.

21. 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

22. Barras traslúcidas, con
gradiente de sólido a
transparente... hay varios
recursos para que éstas
no sean molestas en la
app.

23. 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

25. Las imágenes son más rápidas
que las palabras

26. Algunos tips sobre
el uso de imágenes

27. 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

28. Deben ser flexibles para los
distintos tamaños de dispositivos,
sin deformarse.
Algunos tips sobre el
uso de imágenes
2

29. Puedes presentar las imágenes con
diferentes decoraciones para evitar
la monotonía visual.
Algunos tips sobre el
uso de imágenes
3

30. Circa News Imágenes grandes, protagonistas.

31. Android design in action Uso de formatos de imágenes rectangulares , circulares...etc.

33. Cuidado cuando texto e imagen van
solapados. El texto SIEMPRE debe ser
legible
Algunos tips sobre el
uso de imágenes
4

34. Circa News

35. Etsy

36. Airbnb

37. Utiliza los siguientes recursos para asegurarte la
legibilidad del texto
- Leve oscurecimiento con degradado de la
imagen donde vaya el texto.
- Ligero desenfoque.

38. Marcadores de posición
(placeholders)

39. 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.

40. 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

41. Lo que
Sídebes hacer

42. De esta forma el usuario se
ubica en lo que tiene y en las
posibilidades que puede
obtener.
Lo que
Sídebes hacer

43. Splash screen
Una cosa del pasado

44. Lleva/muestra al usuario directamente
el contenido no le hagas esperar

45. 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

46. Una imagen de presentación
no tiene por qué estar reñida
con ser algo USABLE:
Imagen + acceso + splash

47. Los tutoriales

48. Algunos tips sobre
el uso de tutoriales
dentro de la app

49. Evita el uso de un tutorial, eso te
obligará a simplificar tu aplicación
Algunos tips sobre el
uso de tutoriales
1

50. 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

51. 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

52. Lo que
SIdebes hacer

53. 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

54. 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

55. Algunos buenos ejemplos sobre
el tema de los tutoriales...

57. De esta forma el usuario sabe
qué posibilidades tiene sin
esperas.
Lo que
Sídebes hacer

58. Airbnb
El usuario puede OMITIR el
tutorial e ir directamente a la
app ¡perfecto!
Lo que
Sídebes hacer

59. El login

60. 1 No obligues al resgistro hasta que
no sea totalmente necesario
El login
1

61. 1 Debes dejar MUY CLAROS LOS
BENEFICIOS DE REGISTRARSE en
tu app
El login
2

62. 1
El registro debe ser
RÁPIDO Y FÁCIL:
- A través de redes sociales
- Email + password
El login
3

63. Mezcla de tutorial y login
¡2x1!
Lo que
Sídebes hacer

64. Lo que
Sídebes hacer

65. Lo que
Sídebes hacer

66. Lo que
Sídebes hacer

67. Lo que
NOdebes hacer

68. En resumen:
Evita estos errores de diseño

69. 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?

70. ¡Gracias!
@isaezdesign

71. izaskunsaez.es
Diseño Gráfico
Diseño print Diseño web Creatividad
hola@izaskunsaez.es
Twitter: isaezdesign