Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend - Integrando diseño y desarrollo

juanmnl
February 20, 2017

Frontend - Integrando diseño y desarrollo

A talk i gave, in Santiago de Chile, to show how to integrate design in an agile development team.

juanmnl

February 20, 2017
Tweet

More Decks by juanmnl

Other Decks in Design

Transcript

  1. X
    O
    S
    3
    1
    FRONTEND
    INTEGRANDO DISEÑO Y DESARROLLO

    View Slide

  2. X
    O
    S
    3
    2
    ¿POR QUÉ ESTAMOS AQUÍ?

    View Slide

  3. X
    O
    3
    PARA
    1. Aclarar procesos
    2. UX vs UI
    3. Diseño Modular vs BUD (big upfront design)
    4. Alineamientos de diseño
    5. Cerrar el circulo “frontend”
    6. Empatía Diseñador/Dev

    View Slide

  4. X
    O
    S
    3
    4
    HABLEMOS EL MISMO IDIOMA

    View Slide

  5. X
    O
    S
    3
    5
    UX
    Intuitivo
    Facil de usar
    Satisfactorio
    Navegación simple
    Accesibilidad
    UI
    “Look and feel” (estilos)
    Marca
    Tipografía
    Distribución/Alineación
    Composición visual
    IxD
    Comportamiento
    Interacción

    View Slide

  6. X
    O
    S
    3
    6
    UX
    UI
    IxD
    iUX
    UR
    ST
    CX
    Service
    Design
    Product
    Design
    UR: User Research

    CX: Customer Experience

    ST: Strategy

    iUX: Interface User Experience

    UI: User Interface Design

    IxD: Interaction Design

    UX: User Experience

    View Slide

  7. X
    O
    S
    3
    7
    UX
    UI
    IxD
    iUX
    UR
    ST
    CX
    Service
    Design
    Product
    Design
    UR: User Research

    CX: Customer Experience

    ST: Strategy

    iUX: Interface User Experience

    UI: User Interface Design

    IxD: Interaction Design

    UX: User Experience

    View Slide

  8. X
    O
    S
    3
    8
    CAPAS IUX
    COMPOSICIÓN NAVEGACIÓN INTERACCIÓN

    View Slide

  9. X
    O
    9
    EL “CORE” DE UX/UI/DEV
    1. Guidelines de OS/WEB
    2. Componentes nativos
    3. Patrones de Navegación
    4. Componentes propios (custom)
    5. Interacciones y Micro-interacciones (motion como UX)

    View Slide

  10. X
    O
    S
    3
    10
    LA MEJOR FORMA DE HACER “PAIRING” ES
    HABLAR, CONVERSAR, COMPARTIR.

    View Slide

  11. X
    O
    11
    PO/BA/UX/QA
    1. Usuario Vs. Negocio
    2. Design Factory Vs. Product Design
    3. HDUs ≠ Pantallas

    View Slide

  12. X
    O
    12
    BA/UX
    1. Necesidad del Usuario
    2. Valor de negocio
    3. Especificación
    4. HDUs Base

    View Slide

  13. X
    O
    13
    UX/UI
    1. Consistencia
    2. Regiones Base (layout, espacios, distribución)
    3. Navegación Base
    4. Interacción Base
    5. Empty States
    6. Overlays

    View Slide

  14. X
    O
    14
    UI/DEV
    1. Consistencia
    2. Composable elements
    3. Composable components (Scrolls, flows)
    4. Feedback constante

    View Slide

  15. X
    O
    15
    UX/DEV
    1. Consistencia
    2. Comportamiento
    3. Movimiento
    4. Patrones
    5. Composición

    View Slide

  16. X
    O
    S
    3
    16
    Investigación Diseño Desarrollo 16

    View Slide

  17. X
    O
    S
    3
    17
    PROCESOS

    View Slide

  18. X
    O
    S
    3
    18
    MVP
    layout navegación
    componentes interacción
    HDUs
    narrativa
    empty states
    overlays
    navegación
    Idea Validación UX IxD UI Desarrollo

    View Slide

  19. X
    O
    S
    3
    19
    “FEATURES”
    componentes
    HDUs
    navegación
    “Feature” Validación UX UI
    Desarrollo
    IxD
    componentes
    layout

    View Slide

  20. X
    O
    S
    3
    20
    UN SISTEMA DE DISEÑO

    View Slide

  21. X
    O
    S
    3
    21
    DISEÑO ATÓMICO
    @BRADFROST

    View Slide

  22. X
    O
    S
    3
    22

    View Slide

  23. X
    O
    S
    3
    23

    View Slide

  24. X
    O
    24
    DEFINIR
    1. Elementos
    2. Regiones de la interfaz (“blockframing”)
    3. Patrones de Navegación
    4. Estrategia de tests con usuarios
    5. Guideline UX/UI Dinámico por plataforma
    6. Refinación de UI iterativa
    7. Propagación de cambios

    View Slide

  25. X
    O
    S
    3
    25
    PIPELINE DISEÑO

    View Slide

  26. X
    O
    S
    3
    26
    Investigación Diseño Desarrollo 26
    NEGOCIO USUARIO

    View Slide

  27. X
    O
    S
    3
    27
    Investigación Diseño Desarrollo 27
    NEGOCIO USUARIO

    View Slide

  28. X
    O
    S
    3
    28
    Investigación Diseño Desarrollo 28
    NEGOCIO
    USUARIO

    View Slide

  29. X
    O
    S
    3
    29
    Investigación Diseño Desarrollo 29
    NEGOCIO
    USUARIO

    View Slide

  30. X
    O
    30
    PANTALLAS VS COMPONENTES

    View Slide

  31. X
    O
    31
    PENSEMOS EN COMPONENTES
    1. La UI modular
    2. Agilidad en el proceso
    3. HDUs más “lean”
    4. Desarrollo modular
    5. Cambios modulares

    View Slide

  32. X
    O
    32
    HDUS LEAN
    HDU PANTALLAS COMPONENTES

    View Slide

  33. X
    O
    S
    3
    33
    Investigación UX Diseño UX
    Análisis y Refinamiento HDU
    Diseño UI
    Sprint de Desarrollo
    2 semanas
    2 semanas
    FRONTEND SPRINTS
    UX/UI
    BA
    DEV
    HDU
    33

    View Slide

  34. X
    O
    S
    3
    34
    UX/UI
    BA
    DEV
    2 semanas
    2 semanas 2 semanas
    2 semanas
    INVESTIGACIÓN UX DISEÑO UX
    ANÁLISIS Y REFINAMIENTO HDU
    DISEÑO Y REFINAMIENTO UI
    SPRINT DE DESARROLLO
    HDU
    INVESTIGACIÓN UX DISEÑO UX
    ANÁLISIS Y REFINAMIENTO HDU
    DISEÑO Y REFINAMIENTO UI
    SPRINT DE DESARROLLO
    HDU
    INVESTIGACIÓN UX DISEÑO UX
    ANÁLISIS Y REFINAMIENTO HDU
    DISEÑO Y REFINAMIENTO UI
    SPRINT DE DESARROLLO
    HDU
    FLUJO

    View Slide

  35. X
    O
    S
    3
    35
    UX/UI
    BA
    DEV
    2 semanas
    2 semanas 2 semanas
    2 semanas
    INVESTIGACIÓN UX DISEÑO UX
    ANÁLISIS Y REFINAMIENTO HDU
    DISEÑO Y REFINAMIENTO UI
    SPRINT DE DESARROLLO
    HDU
    UX/UI UX/UI
    HDU
    U
    SPRINT DE DESARROLLO
    HDU
    UX/UI UX/UI
    HDU
    UX/UI
    SPRINT DE DESARROLLO
    HDU
    FLUJO

    View Slide

  36. X
    O
    S
    3
    36
    Investigación Diseño Desarrollo 36

    View Slide

  37. X
    O
    S
    3
    NEGOCIO
    37
    Investigación Diseño Desarrollo 37
    NEGOCIO
    USUARIO
    USUARIO

    View Slide

  38. X
    O
    S
    3
    38
    GRACIAS :D
    @_juanmnl

    View Slide