¿Cómo iniciar en UX/UI?

Transcript

1. ¿Cómo iniciar en UX/UI?

2. Agradecimientos 2 Esta presentación será compartida :-)

3. Agenda ◍ Conocimientos básicos ◍ Proceso de diseño ◍ Escenario

   actual en la industria 3

4. 1. Conocimientos básicos ¿Por dónde comenzamos? 4

5. Fundamentos • ¿Qué es diseño? • ¿Qué es diseño centrado

   en el usuario? • ¿Qué es usabilidad? • ¿Qué es UX? + artefactos de UX • ¿Qué es UI? + herramientas de UI 5

6. ¿Qué es diseño? Diseño es un proceso, se trata de

   planear cómo va a ser o cómo va a funcionar algo. Siempre orientado a una necesidad. 6

7. Diseño centrado en usuario Es un enfoque de diseño cuyo

   proceso está dirigido por información sobre las personas que van a hacer uso del producto. 7

8. Usabilidad 8

9. Usabilidad Es la facilidad con la que las personas utilizan

   una herramienta u otro objeto para conseguir un objetivo específico. 9

10. Usabilidad 10

11. Heurísticas Nielsen 11 ◍ Visibilidad del estado del sistema ◍

    Mismo lenguaje del usuario ◍ Consistencia en estándares ◍ Flexibilidad y eficiencia de uso ◍ Ayudar a los usuarios a identificar, diagnosticar y solucionar errores. ◍ Ayuda y documentación

12. ¿UX no es UI? 12

13. ¿Qué es UX? 13

14. ¿Qué es UX? Es descubrir, investigar y mejorar la experiencia

    de una persona con un producto o servicio. 14

15. Necesidades De usuarios Negocio ¿Qué es UX? Tecnología 15 UX

16. UX ◍ Investigación ◌ Cuantitativa ◌ Cualitativa ◍ Pruebas de

    usabilidad ◍ Comunicación con marketing, comercial, desarrollo, negocio. 16

17. ¿Qué es UI? 17

18. Interfaz de usuario Es aplicar lo que se descubrió de

    a una interfaz de usuario, casi siempre es una interfaz gráfica. 18

19. Interfaz de usuario 19

20. UI Kits ◍ Material Design 20

21. UI Kits ◍ Human Interface 21

22. Herramientas ◍ XD Adobe ◍ Sketch ◍ Figma 22

23. Herramientas Prototipado ◍ Marvel ◍ Zeplin 23

24. 2. Proceso de Diseño ¿Cómo resuelves problemas? 24

25. Proceso de Diseño 25

26. Design Thinking

27. Lean Startup

28. Design Sprint

29. ¿Entregables? ¿Qué son y por qué importan? 29

30. 30

31. User personas Una persona es una descripción ficticia, pero realista,

    de un usuario típico o potencial de un producto. -Nielsen/Norman Group 31

32. User personas 32

33. Site map Es la lista de páginas que tendrá un

    sitio web o una aplicación móvil 33

34. Historias de usuario Descripción de tareas a realizar, desde el

    punto de vista del usuario ◍ Responden a las preguntas “Quién”, “Qué” y “Por qué” 34

35. User Flow Es la ruta que sigue un usuario en

    un sitio web o aplicación para completar una tarea. 35

36. User Flow 36

37. Wireframes Es un boceto que tiene como objetivo definir el

    contenido y la posición de bloques de un producto digital. Incluye menús de navegación, bloques de contenido. 37

38. Wireframes 38

39. Wireflows Combinan las metas del usuario, tareas e interacciones entre

    pantallas. Aprende más: https:/ /uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a 39

40. Wireflows 40

41. Mockups 41

42. Prototipos interactivos 42

43. 3. Escenario actual ¿UI Designer, UI/UX Designer, UX Designer? 43

44. Tipo de empresas • Agencia • Consultora • Producto -

    Servicio 44

45. Roles • UI/UX Designer • UX Designer • UI Designer

    • UI/UX Designer Developer 45

46. Tipo de vacantes 46 UX Designer UI /UX Designer

47. Tipo de vacantes 47 UI /UX Designer Developer UX Designer

48. ¿Qué necesito para aplicar? • CV • Portafolio • Linkedin

    actualizado Muchaaaaa confianza 48

49. 4. Recomendaciones ¡Aprende más! 49

50. Recomendaciones 50 Don’t make me think - Steve Krug About

    Face Jacob Nielsen Nielsen Norman Group UX Collective

51. RETO! ◍ Financiera ◍ Aerolínea ◍ Salud 51

52. ◍ Identifica la funcionalidad que te enoja! ◍ ¿Cómo la

    mejorarías? ◍ Describe tu solución ◍ Dibuja ◍ Comparte en Twitter :-) 52

53. Gracias 53 Más de mi: Medium - @gabrielaa.ayon SpeakerDeck- @supergabs

54. ¿Preguntas? 54

55. Credits Special thanks to all the people who made and

    released these awesome resources for free: ◍ Presentation template by SlidesCarnival ◍ Photographs by Unsplash 55