El documento aborda el proceso de diseño UI/UX, definiendo términos clave como interfaz de usuario (UI) y experiencia de usuario (UX). Se describe la importancia del wireframing y prototipado, así como herramientas específicas como Adobe y Sketch. Además, se enfatiza la necesidad de comunicación y feedback continuo durante el proceso de diseño.

1. @ A B N

3. P R O C E S O D E D I S E Ñ O U I / U X
@ABN

4. T E O R Í A

5. P L A T A F O R M A S
Ordenadores Móviles Tablets Wearables

6. S I S T E M A S O P E R A T I V O S
iOS Android Windows Phone ¿BlackBerry?

7. E L M E R C A D O A C T U A L
Mac y PC Smartphones iPad

8. ¿ Q U É E S “ U I ” ?
La interfaz de usuario es lo que define la parte visible de
una aplicación o un software en general. Es decir, la interfaz
de usuario consta de colores, imágenes, iconos, botones… todo
lo que sirve para “adornar” una app y hacerla bonita.

9. ¿ Q U É E S “ U X ” ?
Entendemos por experiencia de usuario lo que define las sensaciones
que recibe aquel que usa una app, un programa o cualquier tipo de
software. Es decir; usabilidad y funcionabilidad, interacción, comportamiento
de la app, estructuras intuitivas, etc.

10. M A N O S A L A O B R A

11. C O N F O R M A C I Ó N D E L A I D E A
¿Qué queremos hacer?
!
¿Qué vamos a solucionar?
!
¿A quién va dirigido?
!
¿En qué plataforma (o plataformas)?
!
¿En qué entorno se va a usar?
!
¿Nos gusta Daft Punk?

12. S K E T C H I N G

13. S K E T C H I N G

14. S K E T C H I N G
Lo importante es descargar la idea
!
No tienes por qué cuidar los detalles, con que se entienda sobra
!
Lo que tú hagas va a cambiar en más del 50% finalmente

15. ¡ M O L E S K I N E M A N D A !

16. W I R E F R A M I N G

17. W I R E F R A M I N G

18. F U E R A L A
C A P A D E
D I S E Ñ O

19. W I R E F R A M I N G
Lo importante es la estructura
!
Prestar atención a la distribución de los elementos
!
Identificar muy bien qué es cada cosa (formularios, botones, imágenes…)
!
En blanco y negro para evitar distracciones del objetivo principal
!
El objetivo principal es definir usabilidad y funcionalidad

20. M E D I O S D E W I R E F R A M I N G
Papel Adobe Omnigraffle Axure

21. ¿ L O H E M O S H E C H O B I E N ?

22. P R O T O T I P A D O

23. M E D I O S D E P R O T O T I P A D O
InVision Marvel
Marvel

24. S I L A R E S P U E S T A E S “ S I ”

25. E J E C U C I Ó N

26. I N S P I R É M O N O S

27. M E D I O S D E I N S P I R A C I Ó N
Dribbble Otras apps Abduzeedo

28. “ L O S B U E N O S A R T I S T A S
C O P I A N … L O S M E J O R E S ,
R O B A N ”
P A B L O P I C A S S O

29. U S E M O S R E C U R S O S

30. R E C U R S O S
Iconos
!
Archivos de GUIs
!
Fotografías y stocks
!
Paletas de colores
!
Tipografías

31. A B R E Y A E L P H O T O S H O P

32. E J E C U C I Ó N
Debemos tener en cuenta los colores
!
Debemos tener en cuenta la tipografía
!
Respetamos los wireframes, pero debemos ser conscientes de que
la idea original va a sufrir alteraciones
!
Debemos trabajar al estilo “píxel-perfect”
!
Debemos estar en continua comunicación con el resto del equipo,
así como con los clientes (o jefes) en caso de que estos existan

33. M E D I O S D E E J E C U C I Ó N
Adobe (principalmente,
Photoshop)
Sketch

34. E L F E E D B A C K E S B I E N

35. M E D I O S D E F E E D B A C K
InVision Dribbble Behance

36. I N V I S I O N

37. I N V I S I O N
Feedback privado, no público
!
Posibilidad de prototipado
!
Comentarios interactivos y con un muy buen sistema
!
Historial de actividad
!
Adaptación de la herramienta para pruebas

38. D R I B B B L E

39. D R I B B B L E
Plataforma súper exclusiva, lo cual es bueno
!
Sólo encontrarás contenido de calidad, palabra de niño diseñador
!
Supone una gran publicidad
!
Es una fuente de inspiración asombrosa
!
Es muy cool

40. B E H A N C E

41. B E H A N C E
Es como Dribbble pero menos cool

42. F U E R A D E C O Ñ A S

43. B E H A N C E
Permite agregar mucha más información a nuestros trabajos
!
Permite subir trabajos en proceso
!
Es mucho más abierto que Dribbble
!
Por norma general, no sólo encontramos diseño UI/UX sino que
el estándar es diseño gráfico y branding

44. G E N T E Q U E L O H A H E C H O B I E N

45. I N S T A G R A M

46. M A I L B O X

47. S P O T I F Y

48. T W E E T B O T

49. T U M B L R

50. G E N T E Q U E N O L O H A H E C H O
B I E N

51. W H A T S A P P

52. T E L E G R A M

53. G E N T E Q U E L O V A A H A C E R B I E N

54. A N F I X

55. O I G U A L N O

56. @ A B N