Frontend - Integrando diseño y desarrollo

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

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

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

X O S 3 4 HABLEMOS EL MISMO IDIOMA

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

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

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

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

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)

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

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

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

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

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

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

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

X O S 3 17 PROCESOS

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

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

X O S 3 20 UN SISTEMA DE DISEÑO

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

X O S 3 22

X O S 3 23

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. Reﬁnación de UI iterativa 7. Propagación de cambios

X O S 3 25 PIPELINE DISEÑO

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

USUARIO

X O 30 PANTALLAS VS COMPONENTES

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

X O 32 HDUS LEAN HDU PANTALLAS COMPONENTES

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

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

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

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

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

X O S 3 38 GRACIAS :D @_juanmnl

Frontend - Integrando diseño y desarrollo

Frontend - Integrando diseño y desarrollo

More Decks by juanmnl

Other Decks in Design

Featured

Transcript