38
#FormaciónEBusiness Webinar Diseño interfaces web Abordando proyectos desde la estrategia hasta la forma. Estefanía Trisotti @TRI_

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

Embed Size (px)

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.

Citation preview

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

#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

#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

#FormaciónEBusiness

Debemos estar siempre actualizadosCuando trabajamos en medios digitales

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

#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

#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

#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

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

#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

#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

#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

#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

#FormaciónEBusiness

Definir

Personas

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

#FormaciónEBusiness

Definir

Escenarios

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

#FormaciónEBusiness

Definir

Cardsorting

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

#FormaciónEBusiness

Definir

Benchmark

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

#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

#FormaciónEBusiness

Arquitectura de la Información

Idear

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

#FormaciónEBusiness

Diagramas de Flujos y Clases

Idear

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

#FormaciónEBusiness

Wireframes Baja Intensidad

Idear

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

#FormaciónEBusiness

Grilla y Estructura

Idear

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

#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

#FormaciónEBusiness

Wireframes Alta Intensidad

Prototipos

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

#FormaciónEBusiness

Prototipos

Contenidos

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

#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

#FormaciónEBusiness

Construir

Diseño Look&Feel

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

#FormaciónEBusiness

Construir

Color

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

#FormaciónEBusiness

Iconografía

Construir

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

#FormaciónEBusiness

Familias Tipográficas

Construir

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

#FormaciónEBusiness

Dirección Fotográfica

Construir

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

#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

#FormaciónEBusiness

Métricas

Analizar

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

#FormaciónEBusiness

Analizar

Test Heurísticos

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

#FormaciónEBusiness

A/B Test

Analizar

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

#FormaciónEBusiness

Eyetracking

Analizar

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

¿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

#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

#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

#FormaciónEBusiness

@interlat@UPBBogota@cmlatam

Usa este hashtag:#FormaciónEBusiness