$30 off During Our Annual Pro Sale. View Details »

¿Cómo iniciar en UX/UI?

¿Cómo iniciar en UX/UI?

Gabriela Muñoz

August 10, 2020
Tweet

More Decks by Gabriela Muñoz

Other Decks in Design

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