Este documento presenta una guía sobre el proceso de diseño de aplicaciones móviles. Explica las etapas clave como definir la idea, el usuario objetivo, las funciones principales, diseñar el prototipo mínimo viable, realizar pruebas de usabilidad e iterar el diseño basado en los resultados. También incluye consejos prácticos sobre patrones de interacción, diseño visual y el uso de herramientas como InVision para crear prototipos interactivos.

1. Curso de Design de Apps

2. JAVIER ‘SIMÓN’ CUELLO
@millonestarde

4. DISEÑANDO APPS PARA MÓVILES
appdesignbook.com

5. DESIGNING MOBILE APPS
appdesignbook.com

6. DISEÑO EN VIAJE
facebook.com/disenoenviaje

7. ¿Qué quieren aprender?

8. El proceso de diseño

9. Diseñador Programador

13. UI_final_final_this_time_is_true_final2.psd

14. Idea
Prototipo
Test

15. La idea

16. “Debería haber una app para esto”
—Todo el mundo, alguna vez.

22. “Hacer algo con una app debería ser
más simple que sin ella”
—Sentido común

23. Preguntas (no muy) frecuentes
• ¿Qué problema queremos resolver?
• ¿Cuál es la diferencia de nuestra app?
• ¿Quién será el usuario?
• ¿Realmente necesitamos una app?

24. EJERCICIO
Idea

25. Escoger una idea
A. Encontrar restaurantes o bares
B. Preparar recetas de cocina
C. Encontrar amigos para aprender algo / o salir a
hacer deporte
Intenta escoger en 15 minutos.

26. El usuario

30. Nombre
Objetivos
Posibles
soluciones
Comporta
miento

31. La solución

33. “Decidimos que si queríamos construir
una empresa, debíamos enfocarnos en
ser realmente buenos en una sola
cosa.”
—Kevin Systrom, cofundador de Instagram

35. Features

37. “Cada vez que dices ‘Sí’ a una función,
estás adoptando a un niño. Tienes que
llevarlo a través de toda una cadena de
eventos (diseñar, implementar, testar,
etc.)”
—Jason Fried, cofundador de Basecamp

38. EJERCICIO
Features

39. Feature Objetivo

40. Haz una lista de las features de tu app
• Piensa de las primarias y secundarias
• Habla con tu equipo y haz una lista definitiva
Intenta hacerlo en 15 minutos.

41. MVP
(Producto Mínimo Viable)

42. MVP
(Producto Mínimo Viable)

43. Fluxos do usuario

45. ¿Qué pasos sigues cuando
haces las compras en el
supermercado?

51. Diseño de Interacción

52. “Pasar directamente al diseño (visual)
es muy peligroso, porque puede llevarte
a enfocarte solamente en los detalles
de diseño.”
—Irene Pereyra, Anton & Irene

57. ¿Diseñas en papel?

58. Patrones de interacción

62. iOS Android

63. iOS Android

69. Preguntas clave sobre navegación
• ¿Dónde estoy ahora?
• ¿Dónde más puedo ir?
• ¿Cómo vuelvo atrás?

73. Menú tipo cajón
• Los ítems están inicialmente ocultos
• El botón para abrir es difícil de alcanzar
• Permite una pobre arquitectura de información
• Presenta algunos problemas cuando se combina
con otras formas de navegación

77. EJERCICIO
Diseño de wireframes

78. Diseño en papel
• Diseñar todas las partes necesarias
• No incluir anotaciones o flechas
Intenta hacerlo en 90 minutos

79. Test de usabilidad

80. “Si cuesta $1 hacer un cambio en papel,
entonces cuesta $10 en código, y $100
cuando el producto ha sido lanzado.”
—Theresa Cunnington, Thoughtworks

84. Pasos

85. Preparación
• Decide qué testar
• Selecciona participantes
• Escribe un guión

86. Ejecución
• Pregunta sin guiar o influir
• Toma notas
• Observa comportamientos

87. Análisis
• Reunirse con el equipo tan pronto sea posible
• Proponer soluciones
• Implementarlas, y volver a probar

89. Consejos

90. Frases útiles
“No es un test tuyo, es un test de la app”
“No hay respuestas buenas o malas”
“Se aprecia tanto el feedback positivo como
negativo”
“Nada de lo que digas herirá mis sentimientos”

91. Qué hacer y qué no
• Dile al usuario qué hacer, pero no cómo
• No toques la pantalla
• No hables si eres observador
• Mira comportamientos y no tanto lo que dicen

94. EJERCICIO
Prototipo

95. Construir un prototipo
1. Descarga la app de POP — Prototyping
2. Tomar fotos
3. Añadir interacción (gestos, transiciones)
Intenta hacerlo en 15 minutos.

96. A testar!
A las 5:00 compartimos los resultados.

97. Y mañana…

101. Design para telas tácteis

118. Objetivos tácteis

122. 10mm
10mm

123. 2mm

126. Áreas de interação

130. iPhone 6

131. iPhone 6 Plus

136. iOS

137. Evolução

143. Princípios de design

147. Button

148. Button

149. Cor

152. home page
Directions to Here

153. Guardar
Editar
Entrar
Continuar
Seleccionar

154. Tipografia

155. Neue Helvetica

156. San Francisco Display
San Francisco Text

157. Roboto San Francisco Both

159. Iconografia

164. Android

165. Evolução

169. Princípios de design

174. Cor

178. Tipografia

179. Roboto Bold
Roboto Thin

182. Iconografia

190. EXERCÍCIO
Design de Interface

191. Projetar seu aplicativo
• Use os wireframes de referência
• Segue o estilo de design do sistema operacional
• Use outros aplicativos de referência
Tentar fazê-lo em 90 minutos

192. Temos tempo até 14:30h.
EXERCICIO DE DESIGN

195. EXERCÍCIO
Prototipo con InVision

196. Construir o seu protótipo
• Fazer upload de designs para InVision
• Adicionar gestos e transições
InVision ➡ Share ➡ Email ➡ demo@travelingdesign.co
Temos tempo até 16:00h.

197. Animações

204. Micro-interações

212. Ferramentas

222. Keynote

226. Além do celular

231. Glances Notificaciones App

241. EXERCÍCIO
Compartilhe seu projeto

242. Compartilhe seu projeto
InVision ➡ Share ➡ Email
demo@travelingdesign.co

243. Conclusões

244. Designs primeiro no papel

245. Teste muitas vezes

246. Aprende, compreende e explora as diferenças

247. “Tienes que prototipar. Tienes que
testar. Tienes que ver a alguien
usándolo. Sólo entonces tienes un
diseño más preciso. Nadie hace las
cosas bien la primera vez.”
—Dan Saffer, Jawbone

248. OBRIGADO!