¿Cómo iniciar en UX/UI?

Transcript

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

   View Slide

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

   View Slide

3. Agenda
   ◍ Conocimientos básicos
   ◍ Proceso de diseño
   ◍ Escenario actual en la industria
   3
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. Usabilidad
   8
   

   View Slide

9. Usabilidad
   Es la facilidad con la que las
   personas utilizan una
   herramienta u otro objeto
   para conseguir un objetivo
   específico.
   9
   

   View Slide

10. Usabilidad
    10
    

    View Slide

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
    

    View Slide

12. ¿UX no es UI?
    12
    

    View Slide

13. ¿Qué es UX?
    13
    

    View Slide

14. ¿Qué es UX?
    Es descubrir, investigar y
    mejorar la experiencia de una
    persona con un producto o
    servicio.
    14
    

    View Slide

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

    View Slide

16. UX
    ◍ Investigación
    ◌ Cuantitativa
    ◌ Cualitativa
    ◍ Pruebas de usabilidad
    ◍ Comunicación con marketing, comercial, desarrollo, negocio.
    16
    

    View Slide

17. ¿Qué es UI?
    17
    

    View Slide

18. Interfaz de usuario
    Es aplicar lo que se descubrió de a
    una interfaz de usuario, casi
    siempre es una interfaz gráfica.
    18
    

    View Slide

19. Interfaz de usuario
    19
    

    View Slide

20. UI Kits
    ◍ Material Design
    20
    

    View Slide

21. UI Kits
    ◍ Human Interface
    21
    

    View Slide

22. Herramientas
    ◍ XD Adobe
    ◍ Sketch
    ◍ Figma
    22
    

    View Slide

23. Herramientas Prototipado
    ◍ Marvel
    ◍ Zeplin
    23
    

    View Slide

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

    View Slide

25. Proceso de Diseño
    25
    

    View Slide

26. Design Thinking
    

    View Slide

27. Lean Startup
    

    View Slide

28. Design Sprint
    

    View Slide

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

    View Slide

30. 30
    

    View Slide

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
    

    View Slide

32. User personas
    32
    

    View Slide

33. Site map
    Es la lista de páginas
    que tendrá un sitio
    web o una aplicación
    móvil
    33
    

    View Slide

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
    

    View Slide

35. User Flow
    Es la ruta que sigue un
    usuario en un sitio web o
    aplicación para completar una
    tarea.
    35
    

    View Slide

36. User Flow
    36
    

    View Slide

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
    

    View Slide

38. Wireframes
    38
    

    View Slide

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
    

    View Slide

40. Wireflows
    40
    

    View Slide

41. Mockups
    41
    

    View Slide

42. Prototipos interactivos
    42
    

    View Slide

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

    View Slide

44. Tipo de empresas
    ● Agencia
    ● Consultora
    ● Producto - Servicio
    44
    

    View Slide

45. Roles
    ● UI/UX Designer
    ● UX Designer
    ● UI Designer
    ● UI/UX Designer Developer
    45
    

    View Slide

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

    View Slide

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

    View Slide

48. ¿Qué necesito para aplicar?
    ● CV
    ● Portafolio
    ● Linkedin actualizado
    Muchaaaaa confianza
    48
    

    View Slide

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

    View Slide

50. Recomendaciones
    50
    Don’t make me think
    - Steve Krug
    About Face
    Jacob Nielsen
    Nielsen Norman
    Group
    UX Collective
    

    View Slide

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

    View Slide

52. ◍ Identifica la
    funcionalidad que te
    enoja!
    ◍ ¿Cómo la mejorarías?
    ◍ Describe tu solución
    ◍ Dibuja
    ◍ Comparte en Twitter :-)
    52
    

    View Slide

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

    View Slide

54. ¿Preguntas?
    54
    

    View Slide

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
    

    View Slide