diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma
DESCRIPTION
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.TRANSCRIPT
![Page 1: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/1.jpg)
#FormaciónEBusiness
Webinar
Diseño interfaces web Abordando proyectos desde la estrategia hasta la forma.
Estefanía Trisotti@TRI_
![Page 2: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/2.jpg)
#FormaciónEBusiness
“People ignore designthat ignores people.”
— F R A N K C H I M E R O
![Page 3: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/3.jpg)
#FormaciónEBusiness
Debemos estar siempre actualizadosCuando trabajamos en medios digitales
![Page 4: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/4.jpg)
#FormaciónEBusiness
“People ignore designthat ignores people.”
Trabajo Multidisciplinariowww.businessmodelgeneration.com
![Page 5: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/5.jpg)
#FormaciónEBusiness
Front-EndDesigner
UXDesigner
InteractionDesigner
MobileDesigner
GameDesigner
InterfaceDesigner
Diversificación de Especialidades
![Page 6: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/6.jpg)
#FormaciónEBusiness
Front-EndDesigner
UXDesigner
InteractionDesigner
MobileDesigner
GameDesigner
InterfaceDesigner
Diversificación de Especialidades
Copywriter
Arquitectos de la Inf.
Editores
Back-End
SEO
Community Managers
Ventas
Marketing
![Page 7: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/7.jpg)
CONTENIDOS GENERALES DEL CURSO
Estrategiade Diseño
Diseño de Interacción
Diseño de interfaces
![Page 8: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/8.jpg)
#FormaciónEBusiness
Metodología Proceso de Diseño
Estrategia de Diseño
Diseñode interacción
Diseñode Interfaz
Estrategia de Diseño
Definir IdearRealizar
Prototipos Construir Analizar
Iteraciones
Zurb.com
![Page 9: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/9.jpg)
#FormaciónEBusiness
Onda del proceso de diseño
Incertidumbre Claridad/Enfoque
Estrategia Diseño de Interacción Implementación
Damien Newman
![Page 10: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/10.jpg)
#FormaciónEBusiness
Pensamiento Analítico
Pensamiento Intuitivo
DesignThinking
Analít ico
Lógico
Preciso
Repetitivo
Organizado
Detallado
Científ ico
Literal
Secuencial
Creativo
Imaginario
General
Intuitivo
Conceptual
Empático
Figurativo
Irregular
Solucionar problemascon necesidades humanas en el centro
![Page 11: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/11.jpg)
#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
![Page 12: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/12.jpg)
#FormaciónEBusiness
Definir
Personas
![Page 13: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/13.jpg)
#FormaciónEBusiness
Definir
Escenarios
![Page 14: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/14.jpg)
#FormaciónEBusiness
Definir
Cardsorting
![Page 15: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/15.jpg)
#FormaciónEBusiness
Definir
Benchmark
![Page 16: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/16.jpg)
#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
![Page 17: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/17.jpg)
#FormaciónEBusiness
Arquitectura de la Información
Idear
![Page 18: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/18.jpg)
#FormaciónEBusiness
Diagramas de Flujos y Clases
Idear
![Page 19: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/19.jpg)
#FormaciónEBusiness
Wireframes Baja Intensidad
Idear
![Page 20: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/20.jpg)
#FormaciónEBusiness
Grilla y Estructura
Idear
![Page 21: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/21.jpg)
#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
![Page 22: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/22.jpg)
#FormaciónEBusiness
Wireframes Alta Intensidad
Prototipos
![Page 23: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/23.jpg)
#FormaciónEBusiness
Prototipos
Contenidos
![Page 24: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/24.jpg)
#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
![Page 25: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/25.jpg)
#FormaciónEBusiness
Construir
Diseño Look&Feel
![Page 26: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/26.jpg)
#FormaciónEBusiness
Construir
Color
![Page 27: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/27.jpg)
#FormaciónEBusiness
Iconografía
Construir
![Page 28: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/28.jpg)
#FormaciónEBusiness
Familias Tipográficas
Construir
![Page 29: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/29.jpg)
#FormaciónEBusiness
Dirección Fotográfica
Construir
![Page 30: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/30.jpg)
#FormaciónEBusiness
Análisis del desempeño del proyecto
Conversión
Interpretación de data
Ajustes
Analizar
Metodología Proceso de Diseño
![Page 31: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/31.jpg)
#FormaciónEBusiness
Métricas
Analizar
![Page 32: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/32.jpg)
#FormaciónEBusiness
Analizar
Test Heurísticos
![Page 33: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/33.jpg)
#FormaciónEBusiness
A/B Test
Analizar
![Page 34: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/34.jpg)
#FormaciónEBusiness
Eyetracking
Analizar
![Page 35: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/35.jpg)
¿POR QUÉ USARUN 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
![Page 36: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/36.jpg)
#FormaciónEBusiness
Metodología Proceso de Diseño
Estrategia de Diseño
Diseñode interacción
Diseñode Interfaz
Estrategia de Diseño
Definir IdearRealizar
Prototipos Construir Analizar
Zurb.com
Orientación del Curso
![Page 37: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/37.jpg)
#FormaciónEBusiness
www.interlat.co www.upb.edu.co www.cmlatam.co
¡Gracias!Estefanía Trisotti@TRI_
![Page 38: Diseñando interfaces web: abordando proyectos desde la estrategia hasta la forma](https://reader035.vdocuments.us/reader035/viewer/2022062616/5497d604b47959a7498b48d5/html5/thumbnails/38.jpg)
#FormaciónEBusiness
@interlat@UPBBogota@cmlatam
Usa este hashtag:#FormaciónEBusiness