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

Frontend - Integrando diseño y desarrollo

Avatar for juanmnl 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.

Avatar for juanmnl

juanmnl

February 20, 2017
Tweet

More Decks by juanmnl

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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)
  6. X O S 3 10 LA MEJOR FORMA DE HACER

    “PAIRING” ES HABLAR, CONVERSAR, COMPARTIR.
  7. X O 11 PO/BA/UX/QA 1. Usuario Vs. Negocio 2. Design

    Factory Vs. Product Design 3. HDUs ≠ Pantallas
  8. X O 12 BA/UX 1. Necesidad del Usuario 2. Valor

    de negocio 3. Especificación 4. HDUs Base
  9. 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
  10. X O 14 UI/DEV 1. Consistencia 2. Composable elements 3.

    Composable components (Scrolls, flows) 4. Feedback constante
  11. 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
  12. X O S 3 19 “FEATURES” componentes HDUs navegación “Feature”

    Validación UX UI Desarrollo IxD componentes layout
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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