Este documento presenta los principios básicos del diseño de interfaces de usuario (UI) y experiencia de usuario (UX) para aplicaciones móviles. Explica que el diseñador es responsable de decidir qué y cómo mostrar la información al usuario de una manera usable, atractiva y que cumpla con los objetivos de la aplicación. También proporciona consejos prácticos sobre el uso del color, la tipografía, las animaciones y otros elementos para crear una interfaz clara, sencilla y que concentre la atención del usuario en el contenido.

1. diseño ui/ux
más que estética
@isaezdesign
izaskunsaez.es
Diseño Gráfico

2. izaskun sáez velasco
diseñadora ui/ux.
diseño on line-off line
desde 2006
diseñadora gráfica autónoma (o freelance, que suena mejor)
izaskun sáez @isaezdesign

3. ¿por qué es tan
importante el
diseño en una app?
www.izaskunsaez.es @isaezdesign

4. apps disponibles en el apple store

5. 1.252.777
apps en el apple store
www.izaskunsaez.es @isaezdesign

6. 79,6%
apps zombies
www.izaskunsaez.es @isaezdesign

7. No hay una
segunda oportunidad
para causar una
buena primera impresión{ {
www.izaskunsaez.es @isaezdesign

8. enorme
competencia
HAY QUE
DESTACAR

9. www.izaskunsaez.es @isaezdesign
¿cual es el papel
del diseñador?

10. diseño de apps
UX
Experiencia de usuario
UI
Diseño de interfaces
www.izaskunsaez.es @isaezdesign

11. www.izaskunsaez.es @isaezdesign
Es el que se encarga
de decidir/investigar
QUÉ debe mostrar un
interface al usuario.
UX
diseñador
Es el que se encarga de
decidir CÓMO se debe
mostrar un interface al
usuario.
UI
diseñador

12. Qué aspecto tiene,
qué transmite, a
quien va dirigida,
identidad de marca…
Cómo es la
interacción..., la
fluidez y facilidad de
uso, si cumple con
lo que promete…
Look & Feel
UI
¿Qué esel diseño?

13. Usabilidad
“Un atributo de calidad que mide lo
fáciles de usar que son las interfaces web”
Jakob Nielsen 2013
“Encontrar lo que necesitan, entender lo
que encuentran y actuar apropiadamente…
dentro del tiempo y esfuerzo que ellos
consideran adecuado para esa tarea”
Janice C. Redish.

14. facilidad de uso
www.izaskunsaez.es @isaezdesign

15. Beneficios de la usabilidad
Una mayor probabilidad de...
Ventas o visitas o comentarios
Posicionamiento
Conversión/monetización
ÉXITO
www.izaskunsaez.es @isaezdesign

16. UX

17. UX

18. UX
UI

19. preguntas básicas que
deberías hacerte antes
de diseñar una app
www.izaskunsaez.es @isaezdesign

20. www.izaskunsaez.es @isaezdesign
QUÉhace mi app
¿entrenimiento? ¿utilidad?

21. A QUIÉN
se dirige la app
niños adultos
www.izaskunsaez.es @isaezdesign

22. www.izaskunsaez.es @isaezdesign
CÓMOse usará mi app
¿en
movimiento?
¿de forma más
estática o
relajada?
¿para un uso muy
ocasional o más
intenso?
¿en compañía?
¿es para disfrutar
individualmente?

23. www.izaskunsaez.es @isaezdesign
DÓNDEse usaría principalmente
la app
¿de noche?
¿de día?
¿en lugares con
mucha gente?
¿en privado?
¿en ambientes
relajados? ¿al aire libre?
¿en una discoteca?
¿en público?
¿en sitios con
conexión wifi o
3g?

24. empecemos
por el principio
www.izaskunsaez.es @isaezdesign

25. los mockups

26. Plasmar las interacciones y
funcionalidades de la app.
los mockups

30. PANTALLA INICIAL:
nombre + profesión
conocimientos destacados
breve presentación escrita
botón de contacto destacado
MENÚ LATERAL:
acceso al menú lateral donde
encontraremos las secciones.
botín de contacto destacado
PANTALLA EXPERIENCIA
LABORAL:
imagen + texto, son secciones
desplegables
botín de contacto destacado
PANTALLA EXPERIENCIA
LABORAL:
visión desplegada

32. www.izaskunsaez.es @isaezdesign
el diseño visual

33. FLAT DESIGN
un diseño básico
enfocado a las
animaciones y funciones
www.izaskunsaez.es @isaezdesign
FLAT DESIGN

34. el contenido
la claridad
centrar la atención
www.izaskunsaez.es @isaezdesign
3 PILARES

35. www.izaskunsaez.es @isaezdesign
EL CONTENIDO
es el rey

36. el contenido es el protagonista
enfoque en la
tipografía e
imágenes
colores
básicos

37. EL COLOR

38. Paleta de colores reducida

44. usa el color para destacar elementos
el color no debe distraer del contenido

45. COLORES
NEUTROS
COLORES
DESTACADOS

46. www.izaskunsaez.es @isaezdesign
TIPOGRAFÍA

47. el texto puede llegar a ocupar
del 50% al 90% de la pantalla

49. elegir una
fuente legible
con buen
contraste fondo-texto
dejar que
todo respire

50. el tamaño del texto
titulares 50-100 px
subtítulo 30-50 px
cpárrafo 26-40 px

51. www.izaskunsaez.es @isaezdesign
LA CLARIDAD
sé obvio

52. haz las cosas obvias
dónde pulsar
el contenido
las posibilidades de interacción

54. los estados de los iconos ayudan a
saber qué está activado y qué no

55. usa iconos obvios

56. utiliza el color, el tamaño del texto y la disposición de los
elementos para destacar las diferentes acciones o secciones

57. www.izaskunsaez.es @isaezdesign
SIMPLIFICA
¿es necesario?
esa pantalla, ese botón...etc

58. www.izaskunsaez.es @isaezdesign
centra la atención
en el contexto

59. captando la atención
la profundidad
las transiciones y animaciones

60. www.izaskunsaez.es @isaezdesign
la profundidad

61. los diferentes planos de interacción

62. ENFOCAR LA ATENCIÓN

63. www.izaskunsaez.es @isaezdesign
las animaciones
deben proporcionar una
experiencia inmersiva

64. las buenas animaciones mejoran la experiencia,
las malas distraen.

65. https://designcode.io/iosdesign-animations

66. no solamente el paso de
una pantalla a otra

67. https://designcode.io/iosdesign-animations

69. duración óptima entre
0.3 y 0.5 segundos

70. www.izaskunsaez.es @isaezdesign
lOs gestos
sencillos
no abusar

71. www.izaskunsaez.es @isaezdesign
el tamaño
sí importa

73. iOS Human Interface
Guidelines

74. www.izaskunsaez.es @isaezdesign
EN RESUMEN

75. www.izaskunsaez.es @isaezdesign
¿Qué quiere un usuario?
Menos pasos para
realizar una acción
Mayor y mejor
visibilidad
de los elementos
Elementos táctiles
fácilmente
seleccionables
Que me muestren la
información
necesaria únicamente

76. www.izaskunsaez.es @isaezdesign
hazte estas preguntas:
1. ¿Se reconocen las principales acciones de la app?
2. ¿Hay algo que pueda distraer de ese contenido
importante y que no sea relevante?
3. ¿Está el contenido (imágenes/iconos - textos) bien
relacionados?
4. ¿hay que dar muchos pasos para realizar una acción?
5. ¿Ves claramente donde están los elementos de
navegación e info.?
6. ¿Sigue una lógica con lo que se espera de la app?

77. www.izaskunsaez.es @isaezdesign
las resoluciones
preparar el diseño para varias pantallas

78. 640 x 960 640 x 1136 750 x 1334 1242 x 2208
iPhone 4 iPhone 5 iPhone 6 iPhone 6 plus

79. www.izaskunsaez.es @isaezdesign
el icono

80. PORQUE ES NUESTRA
TARJETA DE
PRESENTACIÓN
PORQUE ACTÚA
COMO PEQUEÑO
RECORDATORIO
PARA QUE UTILICE LA
APP
¡Soy una
App
que molo mucho!
¡eh!
¡estoy aquí!

81. POCOS ELEMENTOS

82. ROTUNDO

89. El icono de una app aporta una
información inicial al usuario
un diseño correcto
visualmente y atractivo
un mejor funcionamiento
de la app y más fiabilidad
se percibe
como

90. www.izaskunsaez.es @isaezdesign
el trabajo del diseñador
no acaba aquí

91. testeo
y ajustes
actualizaciones
de la app
diseño landing
o web de la app
diseño
comunicación +
marketing
propio de la app

92. todo para conseguir...
una experiencia
inolvidable
www.izaskunsaez.es @isaezdesign

93. evitar esto
www.izaskunsaez.es @isaezdesign

94. Ilustración: Igor fernández

95. Ilustración: Igor fernández

96. Ilustración: Igor fernández

97. conseguir esto
www.izaskunsaez.es @isaezdesign

98. Ilustración: Igor fernández

99. Ilustración: Igor fernández

100. www.izaskunsaez.es @isaezdesign
FIN

101. izaskunsaez.es
Diseño Gráfico
hola@izaskunsaez.es
@isaezdesign
Agradecimiento especial a Igor Fernández
por las ilustraciones.
@igor_f_f