Frontend - Integrando diseño y desarrollo

2224b0579d95aafae306566b134fbebc?s=47 juanmnl
February 20, 2017
Design
0
39

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.

2224b0579d95aafae306566b134fbebc?s=128

juanmnl

February 20, 2017
Tweet

Want more?

2224b0579d95aafae306566b134fbebc?s=48 juanmnl
0
26
2224b0579d95aafae306566b134fbebc?s=48 juanmnl
0
36
2224b0579d95aafae306566b134fbebc?s=48 juanmnl
0
33
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
1
100
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
54
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
59
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
4
120
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
140
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
210
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
390
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
110
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200

Transcript

  1. 1.

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

  2. 2.

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

  3. 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
  4. 4.

    X O S 3 4 HABLEMOS EL MISMO IDIOMA

  5. 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
  6. 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
  7. 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
  8. 8.

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

  9. 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)
  10. 10.

    X O S 3 10 LA MEJOR FORMA DE HACER

    “PAIRING” ES HABLAR, CONVERSAR, COMPARTIR.
  11. 11.

    X O 11 PO/BA/UX/QA 1. Usuario Vs. Negocio 2. Design

    Factory Vs. Product Design 3. HDUs ≠ Pantallas
  12. 12.

    X O 12 BA/UX 1. Necesidad del Usuario 2. Valor

    de negocio 3. Especificación 4. HDUs Base
  13. 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
  14. 14.

    X O 14 UI/DEV 1. Consistencia 2. Composable elements 3.

    Composable components (Scrolls, flows) 4. Feedback constante
  15. 15.

    X O 15 UX/DEV 1. Consistencia 2. Comportamiento 3. Movimiento

    4. Patrones 5. Composición
  16. 16.

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

  17. 17.

    X O S 3 17 PROCESOS

  18. 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
  19. 19.

    X O S 3 19 “FEATURES” componentes HDUs navegación “Feature”

    Validación UX UI Desarrollo IxD componentes layout
  20. 20.

    X O S 3 20 UN SISTEMA DE DISEÑO

  21. 21.

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

  22. 22.

    X O S 3 22

  23. 23.

    X O S 3 23

  24. 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
  25. 25.

    X O S 3 25 PIPELINE DISEÑO

  26. 26.

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

    USUARIO
  27. 27.

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

    USUARIO
  28. 28.

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

    USUARIO
  29. 29.

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

    USUARIO
  30. 30.

    X O 30 PANTALLAS VS COMPONENTES

  31. 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
  32. 32.

    X O 32 HDUS LEAN HDU PANTALLAS COMPONENTES

  33. 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
  34. 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
  35. 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
  36. 36.

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

  37. 37.

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

    NEGOCIO USUARIO USUARIO
  38. 38.

    X O S 3 38 GRACIAS :D @_juanmnl