#FormaciónEBusiness
Webinar
Diseño interfaces web
Abordando proyectos desde la estrategia hasta la forma.
Estefanía Trisot...
#FormaciónEBusiness
“People ignore design
that ignores people.”
— F R A N K C H I M E R O
#FormaciónEBusiness
Debemos estar siempre actualizados
Cuando trabajamos en medios digitales
#FormaciónEBusiness
“People ignore design
that ignores people.”
Trabajo Multidisciplinariowww.businessmodelgeneration.com
#FormaciónEBusiness
Front-End
Designer
UX
Designer
Interaction
Designer
Mobile
Designer
Game
Designer
Interface
Designer
D...
#FormaciónEBusiness
Front-End
Designer
UX
Designer
Interaction
Designer
Mobile
Designer
Game
Designer
Interface
Designer
D...
CONTENIDOS GENERALES DEL CURSO
Estrategia
de Diseño
Diseño de
Interacción
Diseño de
interfaces
#FormaciónEBusiness
Metodología Proceso de Diseño
Estrategia
de Diseño
Diseño
de interacción
Diseño
de Interfaz
Estrategia...
#FormaciónEBusiness
Onda del proceso de diseño
Incertidumbre Claridad/Enfoque
Estrategia Diseño de Interacción
Implementac...
#FormaciónEBusiness
Pensamiento
Analítico
Pensamiento
Intuitivo
Design
Thinking
Analítico
Lógico
Preciso
Repetitivo
Organi...
#FormaciónEBusiness
Definir
Definir el problema / estátus del proyecto
Metodología Proceso de Diseño
Evaluar oportunidades
D...
#FormaciónEBusiness
Definir
Personas
#FormaciónEBusiness
Definir
Escenarios
#FormaciónEBusiness
Definir
Cardsorting
#FormaciónEBusiness
Definir
Benchmark
#FormaciónEBusiness
Desarrollo de ideas y conceptos
Bocetos y dibujos de baja intensidadIdear
Se abren preguntas e hipótes...
#FormaciónEBusiness
Arquitectura de la Información
Idear
#FormaciónEBusiness
Diagramas de Flujos y Clases
Idear
#FormaciónEBusiness
Wireframes Baja Intensidad
Idear
#FormaciónEBusiness
Grilla y Estructura
Idear
#FormaciónEBusiness
Concordancia con todas las personas involucradas
Prototipos
Iterar
Obtenemos respuestas al eliminar al...
#FormaciónEBusiness
Wireframes Alta Intensidad
Prototipos
#FormaciónEBusiness
Prototipos
Contenidos
#FormaciónEBusiness
Reunión de todas las conclusiones de etapas previas
Propuestas visuales y de estilos
Iteracción de últ...
#FormaciónEBusiness
Construir
Diseño Look&Feel
#FormaciónEBusiness
Construir
Color
#FormaciónEBusiness
Iconografía
Construir
#FormaciónEBusiness
Familias Tipográficas
Construir
#FormaciónEBusiness
Dirección Fotográfica
Construir
#FormaciónEBusiness
Análisis del desempeño del proyecto
Conversión
Interpretación de data
Ajustes
Analizar
Metodología Pro...
#FormaciónEBusiness
Métricas
Analizar
#FormaciónEBusiness
Analizar
Test Heurísticos
#FormaciónEBusiness
A/B Test
Analizar
#FormaciónEBusiness
Eyetracking
Analizar
¿POR QUÉ USAR
UN MÉTODO DE DISEÑO?
Podemos crear productos exitosos y sustentables
Nos mantentemos enfocados en un objetiv...
#FormaciónEBusiness
Metodología Proceso de Diseño
Estrategia
de Diseño
Diseño
de interacción
Diseño
de Interfaz
Estrategia...
#FormaciónEBusiness
www.interlat.co www.upb.edu.co www.cmlatam.co
¡Gracias!
Estefanía Trisotti
@TRI_
#FormaciónEBusiness
@interlat
@UPBBogota
@cmlatam
Usa este hashtag:
#FormaciónEBusiness
Upcoming SlideShare
Loading in …5
×

Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma.

3,415 views

Published on

Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma.
Siendo la Web en principio una experiencia de comunicación visual, el Diseño Web se posiciona como un factor fundamental al momento de abordar un proyecto digital.
Desde la conceptualización hasta el desarrollo, este curso tiene por objetivo hacer un recorrido por la diferentes etapas y aspectos necesarios para realizar proyectos digitales funcionales con resultados exitosos.

Published in: Business

Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma.

  1. 1. #FormaciónEBusiness Webinar Diseño interfaces web Abordando proyectos desde la estrategia hasta la forma. Estefanía Trisotti @TRI_
  2. 2. #FormaciónEBusiness “People ignore design that ignores people.” — F R A N K C H I M E R O
  3. 3. #FormaciónEBusiness Debemos estar siempre actualizados Cuando trabajamos en medios digitales
  4. 4. #FormaciónEBusiness “People ignore design that ignores people.” Trabajo Multidisciplinariowww.businessmodelgeneration.com
  5. 5. #FormaciónEBusiness Front-End Designer UX Designer Interaction Designer Mobile Designer Game Designer Interface Designer Diversificación de Especialidades
  6. 6. #FormaciónEBusiness Front-End Designer UX Designer Interaction Designer Mobile Designer Game Designer Interface Designer Diversificación de Especialidades Copywriter Arquitectos de la Inf. Editores Back-End SEO Community Managers Ventas Marketing
  7. 7. CONTENIDOS GENERALES DEL CURSO Estrategia de Diseño Diseño de Interacción Diseño de interfaces
  8. 8. #FormaciónEBusiness Metodología Proceso de Diseño Estrategia de Diseño Diseño de interacción Diseño de Interfaz Estrategia de Diseño Definir Idear Realizar Prototipos Construir Analizar Iteraciones Zurb.com
  9. 9. #FormaciónEBusiness Onda del proceso de diseño Incertidumbre Claridad/Enfoque Estrategia Diseño de Interacción Implementación Damien Newman
  10. 10. #FormaciónEBusiness Pensamiento Analítico Pensamiento Intuitivo Design Thinking Analítico Lógico Preciso Repetitivo Organizado Detallado Científico Literal Secuencial Creativo Imaginario General Intuitivo Conceptual Empático Figurativo Irregular Solucionar problemas con necesidades humanas en el centro
  11. 11. #FormaciónEBusiness Definir Definir el problema / estátus del proyecto Metodología Proceso de Diseño Evaluar oportunidades Definir necesidades del usuario Definir objetivos / metas Plan de posicionamiento frente a la competencia
  12. 12. #FormaciónEBusiness Definir Personas
  13. 13. #FormaciónEBusiness Definir Escenarios
  14. 14. #FormaciónEBusiness Definir Cardsorting
  15. 15. #FormaciónEBusiness Definir Benchmark
  16. 16. #FormaciónEBusiness Desarrollo de ideas y conceptos Bocetos y dibujos de baja intensidadIdear Se abren preguntas e hipótesis Metodología Proceso de Diseño
  17. 17. #FormaciónEBusiness Arquitectura de la Información Idear
  18. 18. #FormaciónEBusiness Diagramas de Flujos y Clases Idear
  19. 19. #FormaciónEBusiness Wireframes Baja Intensidad Idear
  20. 20. #FormaciónEBusiness Grilla y Estructura Idear
  21. 21. #FormaciónEBusiness Concordancia con todas las personas involucradas Prototipos Iterar Obtenemos respuestas al eliminar alternativas Se cierran posibilidades y toman decisiones Metodología Proceso de Diseño
  22. 22. #FormaciónEBusiness Wireframes Alta Intensidad Prototipos
  23. 23. #FormaciónEBusiness Prototipos Contenidos
  24. 24. #FormaciónEBusiness Reunión de todas las conclusiones de etapas previas Propuestas visuales y de estilos Iteracción de últimas variaciones Construir Paso de diseño de interfaz a Front-end El producto se vuelve tangible Temas funcionales son afinados Diseño de interfaz y Desarrollo Metodología Proceso de Diseño
  25. 25. #FormaciónEBusiness Construir Diseño Look&Feel
  26. 26. #FormaciónEBusiness Construir Color
  27. 27. #FormaciónEBusiness Iconografía Construir
  28. 28. #FormaciónEBusiness Familias Tipográficas Construir
  29. 29. #FormaciónEBusiness Dirección Fotográfica Construir
  30. 30. #FormaciónEBusiness Análisis del desempeño del proyecto Conversión Interpretación de data Ajustes Analizar Metodología Proceso de Diseño
  31. 31. #FormaciónEBusiness Métricas Analizar
  32. 32. #FormaciónEBusiness Analizar Test Heurísticos
  33. 33. #FormaciónEBusiness A/B Test Analizar
  34. 34. #FormaciónEBusiness Eyetracking Analizar
  35. 35. ¿POR QUÉ USAR UN MÉTODO DE DISEÑO? Podemos crear productos exitosos y sustentables Nos mantentemos enfocados en un objetivo específico Optimizamos tiempos Los métodos son flexibles a las necesidades de cada proyecto
  36. 36. #FormaciónEBusiness Metodología Proceso de Diseño Estrategia de Diseño Diseño de interacción Diseño de Interfaz Estrategia de Diseño Definir Idear Realizar Prototipos Construir Analizar Zurb.com Orientación del Curso
  37. 37. #FormaciónEBusiness www.interlat.co www.upb.edu.co www.cmlatam.co ¡Gracias! Estefanía Trisotti @TRI_
  38. 38. #FormaciónEBusiness @interlat @UPBBogota @cmlatam Usa este hashtag: #FormaciónEBusiness

×