¡Les damos la

bienvenida!
¿Comenzamos?
Esta clase va a ser
grabada
DISEÑO UX-UI Semana #1

Clase en vivo
¿Comenzamos?
 Semana 1. Diseño UX-UI

Introducción al diseño
Roadmap
Inicio: semana
de bienvenida
2 3 4

Meta: entrega de
Proyecto Final
✓ Lorem ipsum dolor sit amet

✓ 1 Lorem ipsum dolor sit amet

10 5
✓ Lorem ipsum dolor sit amet

✓ Lorem ipsum dolor sit amet

9 8 7 6
Objetivos de la clase

Introducir cronograma de curso.

Presentar herramientas a ser utilizadas.

Comprender qué es UX y qué disciplinas lo

componen.

Introducirse en la metodología de diseño centrado

en el usuario. Abordar los conceptos principales.

Reflexionar sobre experiencias diseñadas

COMISIÓN N° XXXXXX

Presentación
del equipo
✔ Profesor/a responsable:
✔ Tutores y tutoras:

○ Lorem ipsum ○ Lorem ipsum

○ … ○ …
○ … ○ …
○ … ○ …
○ … ○ …
○ … ○ …
○ … ○ …
Presentación
de estudiantes
Por encuesta de Zoom

1. País
2. Conocimientos previos
3. ¿Por qué elegiste este curso?
ACUERDOS Y COMPROMISOS

Equipo
✓ Intercambia ideas por el chat de la plataforma.
✓ Siempre interactúa respetuosamente.
✓ No te olvides de valorar tu experiencia educativa y
de contarnos cómo te va.
 Interacciones
en clases en vivo
INTERACCIONES EN CLASES EN VIVO

Espacios para
consultas
. Durante la dinámica de cada clase se abrirán breves
espacios de consulta. Allí puedes escribir en el chat
tu pregunta.

¡Tu duda puede ayudar a otras personas!

No olvides seleccionar “todos” para que todos
puedan leerte.
 INTERACCIONES EN CLASES EN VIVO

Funcionalidades
Para evitar saturar el chat de mensajes, Por ejemplo: si se pregunta si se
utiliza los signos que figuran en el apartado escucha correctamente, debes
Participantes, dentro de Zoom.** seleccionar la opción “Sí” o “No”.

**Para quitar el signo, presiona el mismo botón nuevamente o la opción “clear all”.
Metodología
 Contenido Pregrabado Micro Desafíos

Cada semana encontrarás disponible en la Encontrarás disponible en la plataforma un

plataforma contenido asincrónico, en formato
audiovisual (videos, tutoriales, podcast, etc) y de
una duración aproximada de 30 minutos.Es
requisito que veas este material en forma
previa a cada clase en vivo 🙌
microdesafío correspondiente a cada semana. Son
instancias prácticas breves relacionadas con el
Contenido Pregrabado. Si bien no requieren
entrega, te recomendamos llevarlos al día. En cada
clase en vivo se realizará una puesta en común en
torno a ellos.

Clases en vivo

Cada semana deberás asistir a una clase en vivo

de dos horas. El objetivo es poner en práctica y
profundizar sobre el Contenido Pregrabado. Está
orientada a ejemplos en vivo, actividades
colaborativas y prácticas.
Preentregas y Proyecto Final
 PREENTREGAS

¿Qué son?
Preentregas (serán 3 en total
antes de la entrega final)
Actividades que les permitirán avanzar en el desarrollo del proyecto final. Deberán ser subidas a la
plataforma hasta 7 días luego de la clase para ser corregidas por tu profesor/a.
 PROYECTO FINAL

Proyecto final
El Proyecto final se construye a partir de las
pre-entregas, y la guía de actividades
hacia el trabajo final.
El objetivo es que cada estudiante pueda
utilizar su Proyecto final como parte de su
portfolio personal.
El Proyecto Final se debe subir a la plataforma la
última clase del curso. En caso de no hacerlo
tendrás 10 días a partir de la finalización del
curso para cargarlo en la plataforma. Pasados
esos días, el botón de entrega se inhabilitará.
 ENTREGA DEL PROYECTO FINAL

Entrega Requisito Prácticas Semana

entrega
1. Pre-entrega 1 - Empatizar, Semana 1 y 2 - Research. Definiendo el
definir e idear problema, objetivo y solución.
2. Pre-entrega 2 - Progreso Semana 4 - POV + MVP
3. Pre-entrega 3 - Prototipo Semana 4 - Arquitectura de información
funcional Semana 5 - Userflow
Entrega 4. Entrega final: Reporte UX Semana 6- Wireframes digitales
Semana 13
final Semana 6 - Wireframes y guidelines
Semana 7- Prototipo funcional - parte 1
Semana 9 - Prototipo funcional - Parte 2
Semana 10- UI Kits & Moodboards
Semana 13 - Reporte UX

Para profundizar en los aspectos a evaluar te invitamos a chequear las rúbricas de evaluación de las pre
entregas y las rúbricas de evaluación del trabajo final, que se encuentran en la carpeta de la comisión.🤓
¿Cuál es nuestro
Proyecto final?
 PROYECTO FINAL

Prototipo
interactivo de un
producto final
Consigna:

Crearás el prototipo de tu propia app o sitio web mobile

first (en base a esta tendencia, crearás primero una
versión optimizada para dispositivos móviles, y luego se
ampliará a web o desktop), partiendo de la metodología
de diseño centrada en el usuario.
 PROYECTO FINAL

Se debe entregar:
✓ Research de escritorio, resultados de entrevistas, user
personas. MVP/POV
✓ Userflow y arquitectura de información.
✓ Evolución de los wireframes con patrones de diseño +
guidelines
✓ Prototipo funcional.
✓ Atomic Design + UI kit.
✓ Elevator pitch.
✓ Incluir el documento de reporte UX (validaciones a lo
largo del proyecto: entrevistas cualitativas, pruebas de
usabilidad, Evaluación heurística y cardsorting)

Nota: Para ver la consigna ampliada con el formato indicado y las sugerencias
mira la Hoja de Ruta
 PROYECTO FINAL

✓ Valida el prototipo a partir del testeo con

usuarios.
✓ Incorpora UI con los elementos de diseño.
✓ Aplica funcionalidad al prototipo a partir de los
principios de motion.
✓ Diseña una presentación del proyecto para ser
utilizado en tú portfolio de proyectos.
Fidelidad del prototipo:
● Alta de contenido: contenidos reales.
● Alta visual: guidelines, UI kit, leyes UX,
accesibilidad, entre otros.
● Alta de funcionalidad: animación,
microinteracciones, recorrido de la funcionalidad
principal (notificaciones, entre otros).
 PROYECTO FINAL

Entrega Fecha

1° preentrega Semana 5

2° preentrega Semana 9

3° preentrega Semana 11

Proyecto Final Semana 13

 PROYECTO FINAL

Proyectos de nuestros
estudiantes
En el siguiente link podrán ver Proyectos
Finales de estudiantes de este curso de
comisiones anteriores y es a lo que llegarán
ustedes al finalizar la cursada.

¡Esperamos que les resulten inspiradores!

 Herramientas
que vamos a usar…
Programas y
plataformas
¿Por qué estos programas?
Con estos programas y plataformas podrás iniciarte o
poner en práctica tus habilidades como diseñador/a de
experiencias de usuario e interfaces.
 PROTOTIPADO

Figma
Figma es una aplicación para diseñar interfaces (app y
website) de manera colaborativa.

ACCEDER

FUENTE: PINTEREST
FUENTE: FIGMA
 PROTOTIPADO

Adobe XD
Adobe XD es la solución de diseño para la creación y el
prototipado, tanto de sitios web como de aplicaciones
móviles.

ACCEDER

FUENTE: ADOBE XD
 ¡Recuerda esto!
Es bueno que te familiarices con las
herramientas de diseño para ir
eligiendo una.
¿Dudas sobre el
onboarding?
Ver en plataforma
Queremos
saber +
Contesta mediante el chat de Zoom

✓ ¿Alguien de la clase conoce estas herramientas?

✓ ¿Alguien trabaja con alguna de ellas?
✓ ¿Qué ventajas pueden identificar a la hora de
utilizarla?
✓ ¿Por qué es importante esta herramienta para el
diseño?
Presentación del
tema
SEMANA N° 1

Glosario
Experiencia de usuario: se refiere a lo que Usabilidad: es el atributo de calidad de un
experimenta el usuario antes, durante y producto, que se refiere sencillamente a su
después de usar el producto. facilidad de uso.

Interfaz de usuario: alude a todo aquello con Prototipado: es el modo de representación

lo cual los usuarios interactúan de forma de un producto digital. Existen herramientas
directa (la capa externa de un producto para generarlos, como Figma y Adobe XD.
digital).
 REPASO

Introducción a UX
Trabajaremos hoy:
✓ ¿Qué es el UX? ✓ UX-UI

✓ ¿Qué disciplinas lo integran? ✓ Roles en el desarrollo

Conceptos de UX-UI
�� �� MATERIAL PRE-GRABADO

Recuperamos los
temas vistos
● ¿Qué es UX? / ¿Qué es UI?
● ¿Cual es la diferencia entre UX=UI?
● ¿Qué factores influencian UX?
● ¿Qué es el Diseño Centrado en el Usuario
(DCU)?
 Puesta en común
microdesafío
¡Vamos a recuperar lo trabajado durante la semana!
¿Cómo era la vida durante la pandemia? ¿Qué desafíos enfrentamos después?
Duración: 10 minutos.
 MICRODESAFÍO N1

¿Cómo era la
vida durante la
pandemia?
Descripción de la actividad.

Te proponemos pensar y evaluar cómo habrá sido la

experiencia de hacer las compras durante la pandemia y/o
realizar trámites administrativos en personas que hasta el
momento no habían tenido contacto con esto.
¿Cómo impactó esto a la población de la tercera edad?
Tiempo 10 min.
 RESULTADOS - MICRODESAFÍO

Practicando con
¿Qué aprendimos?

● Introducirse en la metodología del diseño centrado en el

usuario, y abordar los conceptos principales.
● Generar conocimiento validado mediante nuestra primera
aproximación a la investigación a través de las necesidades
de los usuarios.
 Te presentamos
3 conceptos clave

UX UI USABILIDAD
UX UI USABILIDAD

La experiencia de usuario (UX) refiere a lo que experimenta el usuario

antes, durante, y después de usar el producto.

El proceso de diseño UX abarca aspectos como la usabilidad,

entrevistas, recopilación de información sobre el producto. y el estudio
de la interacción con el usuario.
UX UI USABILIDAD

Es un conjunto de metodologías, mindsets y procesos, orientados a

diseñar un servicio o producto, teniendo en consideración las
necesidades de los/as usuarios/as finales (y no de quién lo está
desarrollando/diseñando).

Estas metodologías abarcan un amplio espectro de especialidades,

cada una con sus respectivos roles, responsabilidades y entregables.
UX UI USABILIDAD

La interfaz de usuario (UI) refiere a todo aquello con lo que los

usuarios interactúan de forma directa.

Se trata de lo que vemos y tocamos en una página web, una

aplicación o un dispositivo. Es aquello que permite interactuar con
el producto/servicio.
 UX UI USABILIDAD

Jakob Nielsen, considerado el padre de la usabilidad, la definió como el atributo de calidad

de un producto, que se refiere sencillamente a su facilidad de uso.

Implica el grado en que el usuario puede explotar o aprovechar la utilidad de un producto.

 Pero...
¿Saben que implica que un
producto sea fácil de usar?
 DISEÑO UX
Está presente en todo el desarrollo
del diseño del producto, desde el
inicio, desde que se piensa, se
analiza e investiga, hasta el final del
proyecto, con las pruebas de
usabilidad y sus mejoras.
DISEÑO UI
Comienza en una segunda etapa y
va a incorporar al UX, todos los
elementos visuales y gráficos. Va a
aportar la estética y el diseño a la
interfaz
DISEÑO UX DISEÑO UI

Agregar al carrito Agregar al carrito

Ejemplo: UX decidir cuál va Ejemplo: UI decide como se

ser el call to action verá este botón para que
sea accesible, ¿qué color,
que iconografía, que
tipografía?
 UX UI
Colores,
Entrevistas
Investigación Pruebas de Diseño de Tipografía,
y Definición Diseño Visual
/ Estadísticas Usuarios Interfaz Ilustraciones,
de Personas
Iconos.

Redacción Redacción Diseño de Definición de

Estilo Visual
de Textos de textos interacción Estructuras

Arquitectura
de Usabilidad Prototipado
Información
 UX UI USABILIDAD

¿Por qué el Ipod ganó la batalla de la música?

Roles dentro del UX-UI
 UX
UX Researcher
Se encarga de llevar adelante
las investigaciones para
entender el problema y
evaluar la solución que se
está creando.
UX Writer
Redacta los contenidos de una
experiencia, para guiar a quien usa
el producto mediante palabras.
UI
UI Designer (Visual Designer)
Relaciona coherentemente todos los
elementos de diseño (tipografía, color,
iconos, ilustraciones, etc.)
UI Frontend Developer
Crea interfaces de usuario diseñadas
por los diseñadores UX.
UI Motion Designer
Construye la acción que la interfaz
va a realizar para dar feedback a los
usuarios.
 Para pensar
La usabilidad se define como el atributo de
calidad de un producto que se refiere a su
facilidad de uso.

¿Verdadero o falso?
Contesta mediante el chat de Zoom
Diseño de interacción
 Diseño de interacción
1
✓ Alude al diseño y estética orientados a las
personas.
¿De qué se trata? ✓ Define los comportamientos de los sistemas
interactivos.
Encontrabilidad: si el usuario Feedback: dar información
Modelos
conceptuales y no puede encontrarlo, no explícita sobre el impacto
mentales existe. de la acción.

Mapeo
 Diseño de interacción
2
✓ El diseño de interacción debe presentar toda la
información que un usuario necesita para crear un
¿De qué se trata? buen modelo conceptual del sistema, lo cual permite
su comprensión, y brinda una sensación de control.
✓ Los modelos mentales son las imágenes en la mente
Modelos de un usuario. Informan su expectativa en relación a
conceptuales y
mentales una determinada interacción, y cómo funciona algo en
el mundo real.

Mapeo ¿Qué les parece si hacemos una breve actividad para

entender mejor este concepto? Cierren los ojos y piensen
en un gato...
 Diseño de interacción
2

¿De qué se trata?

Modelos
conceptuales y
mentales

Mapeo
 DISEÑO DE INTERACCIÓN
Este modelo nos permite identificar en qué momentos pueden
presentarse problemas de uso, en forma de desconexión entre los
estados mentales del usuario (qué pretende conseguir y cómo), y
los estados físicos del sistema (qué funciones permite, y cómo
induce a realizarlas).
 Diseño de interacción
3

¿De qué se trata?

✓ El mapeo es la relación entre los controles y su efecto en
la vida real.
Modelos ✓ Casi todos los artefactos necesitan algún tipo de mapeo
conceptuales y entre controles y efectos. En el caso del diseño de la
mentales
interfaz, es la relación entre un control y su función
resultante.
Mapeo
Rediseño de interacciones en Apple Maps
¡Buen trabajo! 😎
 ☕
Break
¡10 minutos y volvemos!
Diseño centrado
en el usuario
 Diseño centrado en el usuario (DCU)

Sigue una serie de métodos y Es un enfoque de diseño cuyo

técnicas para analizar, diseñar proceso está orientado por la
y evaluar hardware, software y, información acerca de quienes
en este caso, interfaces. van a hacer uso del producto.

Debe responder a las preguntas:

Se trata de un proceso iterativo,
¿Quién usará el sistema?
en el cual diseño y evaluación se
¿Qué tareas llevará a cabo con el
incorporan desde la fase inicial del
mismo?
proyecto.
 Diseño centrado en el usuario (DCU)
Fases del DCU

1 2 3
Análisis Diseño Validación

Entendiendo a los Proyecto una solución Compruebo el valor

usuarios y sus que satisfaga las que estoy agregando
necesidades. necesidades. a los usuarios.
 Veamos
un ejemplo
Heinz
En este ejemplo, el segundo objeto
incorpora decisiones de diseño que
mejoran la utilización del mismo,
previniendo la forma de utilización
del producto, y permitiendo, a su
vez, que por la gravedad el ketchup
siempre esté disponible.
No confundir usabilidad con
diseño centrado en el
usuario
 USABILIDAD DCU
Es un atributo de calidad Es una vía para alcanzar la Usabilidad

Plan

Análisis
Satisfacción
DISEÑO
CENTRADO
Validación EN EL USUARIO
USABILIDAD
Eficiencia Efectividad Diseño

Prototipo
 El DCU es un proceso cíclico o
iterativo, en el que las decisiones de
diseño están dirigidas por el usuario.
Experiencias diseñadas
y accidentales
 Para pensar

¿Puedo estacionar los martes

a las 10 AM??
 Para pensar

¿Fue difícil? Veamos ahora…

¿Puedo estacionar gratis a las 8
PM del Martes?
Es una experiencia
accidentada ya que los
usuarios:
1. Pierden tiempo en la
búsqueda.
2. El ojo debe encontrar
entre tantos letreros el
indicado.
3. El humor del usuario se
va haciendo negativo.
Un diseño ordenado y que
muestra de la mejor
manera posible la
información que el usuario
necesita para hacerlo en el
menor tiempo generando
una experiencia positiva.
Qué información presentamos y cómo
impacta en la capacidad de toma de
decisiones.
Experiencias diseñadas y
experiencias accidentales
de UX
¿Cuáles son experiencias diseñadas y cuáles accidentales?

Tiempo: 20 Minutos.
 ACTIVIDAD COLABORATIVA
Experiencias de UX
¿Cuáles son diseñadas y cuáles son
accidentales?
Vamos a ver una serie de imágenes y
reflexionar acerca de cada experiencia que
nos muestran. La idea es que puedan llegar a
una definición de manera colaborativa.
Para que la actividad sea ordenada,
recomendamos levantar la mano y esperar a
que se le nombre para hablar. Dar lugar a la
participación de todas las personas hará que
escuchemos puntos de vista diversos y eso
enriquece el aprendizaje.
Clipo, asistente de Microsoft Office.
 Clipo aparece tantas veces en
el momento de generar un
documento de texto, que al
momento de necesitarlo “por
ayuda” ya no queremos hablar
con él.

Clipo, asistente de Microsoft Office.

Error crítico en Windows 98.
 Error: OE : 016F : BFF9B2D4

¿Qué significa este error?

Nunca teníamos información
precisa de que había pasado.

Error crítico en Windows 98.

Compra de pasajes en Hipmunk VS American Airlines.
 Solicitar por pasos la Formularios interminables, con
información necesaria para la tantos datos que el usuario se
búsqueda de un pasaje de pierde a la hora de hacer una
avión. búsqueda.

Compra de pasajes en Hipmunk VS American Airlines.

Airbnb: foco en la búsqueda.
 Una plataforma que hace foco
en la búsqueda, solicitando al
usuario lo justo y necesario
para iniciar el proceso de
reserva de un alojamiento.

Airbnb: foco en la búsqueda.

Prevención de errores.
 Sólo algunos de los errores más
extraños que pueden aparecer
en nuestro ordenador.

Prevención de errores.
SIN
PALABRAS
Uber.
 Onboarding sencillo.
Sólo un paso.

Uber.
Uber.
 Pago y recibo automático.

Uber.
 Kick off:
Hipótesis inicial de problema
¿Qué problemáticas de nuestro contexto pueden ser
resueltas con un producto digital?
 KICK OFF: HIPÓTESIS INICIAL DE PROBLEMA

Formato:
Escribir la respuesta en un Google doc.

Consigna:
Deberás responder la siguiente pregunta:
¿Qué problemáticas de nuestro contexto pueden ser resueltas con un producto digital?

Tiempo para realizarlo:

Sería ideal que con el contenido de esta clase comiences a armarlo, tienes la guía de actividades que
es un camino sugerido, hacia el proyecto final.

Modalidad:
Individual.
Te compartimos los
siguientes
recomendaciones
 RECOMENDACIONES
Te recomendamos
✓ 4 Consejos para el PROCESO de DISEÑO
UX (Diseño de Experiencia de Usuario) |
Diseño UX Pasos | Coderhouse
✓ ¿Qué es Diseño UX? (Diseño de
experiencia de usuario) | Fundamentos
básicos | Coderhouse
✓ Qué es diseño UX y cómo aplicarlo en
un producto | Coderhouse
✓ ¿Cómo se compone un Equipo de
Diseño UX? | UX/UI Designer, UX Writer,
UX Researcher, Product Owner |
Coderhouse
✓ Diseño UX: lo que me Hubiera Gustado
Saber cuando Empecé | Evolución del
Diseño UX | Coderhouse
✓ De Diseño Digital/Gráfico a Diseño UX
en Accenture| Coderhouse
✓ ¿Qué es Design Thinking?Sus 5 etapas y
cómo llevarlas a la práctica | Diseño UX
| Coderhouse
 RECOMENDACIONES
Videos y Podcasts
✓ Desarrollo freelance | Coderhouse
✓ Desarrollo profesional | Coderhouse
✓ Cómo empecé en UX Design |
Coderhouse
✓ CoderNews | Coderhouse
✓ Serie de Branding | Coderhouse
✓ Serie para Emprendedores |
Coderhouse
✓ Serie Aprende a Usar TikTok |
Coderhouse
✓ Serie Finanzas Personales | Coderhouse
✓ CoderConf | Coderhouse
 RECOMENDACIONES

Videos y Podcasts
✓ Cómo pasar del diseño gráfico al diseño ✓ Desarrollo freelance | Coderhouse
UX UI | Coderhouse ✓ Desarrollo profesional | Coderhouse
✓ De Diseño Industrial a Diseño UX/UI en ✓ Serie de Branding | Coderhouse
Almundo | Coderhouse ✓ Serie para Emprendedores |
✓ Cómo creé y diseñé mi propia app | Coderhouse
Coderhouse
✓ Nueva Serie Diseño UX/UI | Coderhouse
✓ Serie Finanzas Personales | Coderhouse
 Resumen
de la clase hoy
✓ Entender: ¿Qué es UX? / ¿Qué es UI?
✓ Comprender la diferencia entre UX=UI
✓ Conocer los factores que influencian UX
✓ Conocer los conceptos de Usabilidad e Interacción
✓ Comprender qué es el Diseño Centrado en el Usuario
(DCU)
 ¡A tener en cuenta!

Recuerda que, a partir de ahora, tienes

disponible el contenido pregrabado en la
plataforma y que es requisito que lo veas en
forma previa a la próxima clase.
 La próxima semana
Los próximos temas que vamos a ver

Contenido Pregrabado Clase en vivo (2h)

✓ Video 2.1 - Metodología de trabajo Cascada ✓ Metodologías de trabajo

VS Ágil ✓ Profundización en temas
✓ Video 2.2 - Design Thinking ✓ Prácticas sobre los temas vistos
✓ Video 2.3 - Brainstorming
✓ Infografía 2.4 - Design Thinking
✓ Video 2.5 - Design Sprint
✓ Video 2.6 - Research
Opina y valora
esta clase
#DemocratizandoLaEducación
¡Gracias por estudiar
con nosotros! ✨