Clase 20 Motion UI

Vista previa del material en texto

MOTION UI
 Clase 20. DISEÑO UX/UI
Obligatoria siempre. Lleva el ícono y el color del curso (provisto por CH).
RECORDÁ PONER A GRABAR LA CLASE
LO MÁS RELEVANTE DE LA CLASE 19
Accesibilidad: La accesibilidad digital consiste en desarrollar un producto que pueda ser utilizado por el mayor número de usuarios con necesidades específicas. Estas necesidades pueden ser debidas a limitaciones derivadas del entorno o derivadas de dificultades visuales, auditivos, motrices y neurológicos.
GLOSARIO:
Clase 19
Niveles de conformidad: A (mas bajo) - AA (rango medio) - AAA (más alto). Las herramientas de accesibilidad puntúan utilizando esta nomenclatura.
Prioridades: Existen tres niveles de prioridades (1 - 2 - 3) que harán que algunos o muchos usuarios no puedan acceder al contenido propuesto. 
CRONOGRAMA DEL CURSO
Clase 21
Sell your Story
ELEVATOR PITCH
STORYTELLING
Clase 19
Accesibilidad
REVISANDO Y APLICANDO ACCESIBILIDAD AL PROTOTIPO
ENTREGA PROYECTO 5
Clase 20
Motion UI
MICROINTERACCIONES Y ANIMACIÓN DEL PROTOTIPO
INCORPORANDO MICROINTERACCIONES AL PROTOTIPO
Dar movimiento y personalidad al proyecto bajo el concepto de Motion UI.
Incorporar microinteracciones al prototipo.
OBJETIVOS DE LA CLASE
No va, es para guiar el uso del plantilla.
MAPA DE CONCEPTOS CLASE 20
ITERAR
Analizar
Diseñar
Validar
Prototipar
Evaluar
EVALUACIÓN HEURÍSTICA
MOTION UI
¿ARRANCAMOS?
MOTION UI
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Motion ya no es solo una forma de deleitar a las personas que utilizan nuestros productos, sino una herramienta funcional que hace que las experiencias sean fáciles y divertidas.
Podemos decir que se trata de mostrar y contar una historia, a través de una animación. Mostrar cómo se usa, cómo debería usarse o cómo se interactúa con un producto.
MOTION UI O ANIMACIÓN UI
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
¿PARA QUÉ NOS SIRVE MOTION UI?
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
ORIENTAR A LOS USUARIOS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
DAR FEEDBACK SOBRE LAS INTERACCIONES
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
EDUCAR Y HACER FOCO EN ALGO ESPECÍFICO
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
OCULTAR EL TIEMPO DE CARGA O ESPERA
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
ANATOMÍA DE LAS TRANSICIONES
Los elementos de la UI que se transforman se clasifican como salientes, entrantes, persistentes o estáticos.
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
12 PRINCIPIOS DE MOTION
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
VEAMOS CADA UNO
DE LOS PRINCIPIOS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Crea y refuerza el 'naturalismo' inherente a la fluidez de las experiencias del usuario, y crea una sensación de continuidad cuando los objetos se comportan como los usuarios esperan que lo hagan.
Facilidad / Fluidez
Usar para slides de texto con imagen.
Define las relaciones y jerarquías de objetos al introducir nuevos elementos y escenas.
Offset and Delay
(Compensación y retraso)
Usar para slides de texto con imagen.
A la hora de la interacción, podemos jugar con los distintos valores del objeto (color, posición, forma, etc.). 
El parentesco es un poderoso principio que 'relaciona' objetos en la interfaz de usuario. En el ejemplo, la propiedad 'escala' y 'posición' del objeto superior o 'hijo' está vinculada a la propiedad 'posición' del objeto inferior o 'padre'. 
Crianza o Parentesco
Usar para slides de texto con imagen.
Crea un estado continuo de flujo narrativo cuando cambia la utilidad del objeto. Un botón 'enviar' que cambia de forma para convertirse en una barra de progreso radial y finalmente se convierte en una marca de verificación de confirmación. Llama nuestra atención, cuenta una historia y se completa.
Transformación
Usar para slides de texto con imagen.
Lo ideal en un cambio de valor, es contarle al usuario “la realidad” que ocurre detrás de los datos, para conectar con él. Evitar mostrar datos como campos estáticos.
Cambio de Valor
Usar para slides de texto con imagen.
Permite generar continuidad en un elemento al que podemos aplicar dos utilidades dependiendo del área que se muestra. Establecemos así una relación entre la forma del objeto y su utilidad. 
Gráficamente consiste en cambiar el efecto mientras el contenido se mantiene dentro de la máscara.
Máscara
Usar para slides de texto con imagen.
Cuando superponemos un objeto dependiente de otro situado en un plano inferior a través del movimiento de interacción, permitimos al usuario acceder a información que no está en un primer plano. NOTA: cuidado con el uso de este principio ya que no todos los usuarios conocen su utilidad.
Superposición
Usar para slides de texto con imagen.
Crea continuidad, relación y narrativa, cuando se originan y parten nuevos objetos.
Clonación
Usar para slides de texto con imagen.
Oscurecemos o desenfocamos el fondo para darle mayor protagonismo a una nueva capa accionada por el usuario, sin que este pierda la referencia.
Oscurecer
Usar para slides de texto con imagen.
A través del Parallax hacemos que el usuario se centre en las acciones y el contenido primario sin perder la integridad del diseño en un proceso gradual. Acercamos al usuario determinados objetos, arrastrando al resto que tiene en la pantalla hacia atrás.
Parallax
Usar para slides de texto con imagen.
Con la dimensionalidad, proporcionamos referencias de origen y partida dentro de la interfaz, ayudando a reforzar los modelos mentales dentro de la experiencia de usuario.
Dimensionalidad
Usar para slides de texto con imagen.
Ambos recursos son movimientos de cámara que acercan o alejan objetos al usuario. Esto le da profundidad al diseño, permitiendo al usuario indagar en áreas o contenidos adicionales profundizando en su experiencia.
Dolly & Zoom
Usar para slides de texto con imagen.
TIEMPO = NIVEL DE COMPLEJIDAD
Las animaciones simples requieren menos tiempo para completarse que las animaciones complejas.
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
100 ms = 0.1 Segundos
300 ms = 0.2 Segundos
500 ms = 0.5 Segundos
SECUENCIAS DE ANIMACIÓN
Coregrafía
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Secuencias simples
Secuencias complejas
La aceleración permite que los elementos de aceleran y desaceleran, en lugar de moverse a una velocidad constante.
SUAVIZADO
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
En el mundo real, las cosas no empiezan o dejan de moverse instantáneamente.ORDEN Y SECUENCIAS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
BÚSQUEDA
onboarding 1
onboarding 2
onboarding 3
PERFIL
Pensar el orden y secuencia de cada uno de los frames.
MICROINTERACCIONES
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
Las micro interacciones son eventos que tienen un único propósito, y se encuentran en todo el dispositivo y dentro de las aplicaciones.
MICROINTERACIONES
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
VEAMOS EJEMPLOS DE LO MÁS SIMPLE A LO MÁS COMPLEJO
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
TOOLS MOTION UI
https://uxinmotion.net/tutorials/ui-animation-fundamentals/
After effects
https://www.protopie.io/
https://medium.com/@learnux.io/interactive-prototypes-with-adobe-xd-and-protopie-things-you-cant-miss-ea8ee999ed1
Protopie
http://principleformac.com/
Mac: principle for mac
https://www.framer.com/
Framer.com
LINKS MOTION UI
https://www.invisionapp.com/blog/animation-principles-in-ui/
https://uxplanet.org/mobile-motion-20-creative-concepts-of-ui-animation-b7c0f550a754
https://uxplanet.org/case-study-toonie-coding-ui-animation-68a10323ec0a
https://uxplanet.org/animation-in-ui-design-from-concept-to-reality-85c49907b19d
https://uxplanet.org/ui-animation-eye-pleasing-problem-solving-a8b27013f55c
https://medium.muz.li/20-really-useful-ui-animation-tutorials-every-designer-should-know-c302085245d6
https://uimovement.com/
https://uxinmotion.net/
https://blog.prototypr.io/ui-motion-design-the-compendium-d8b478357fa3
https://www.designyourway.net/blog/inspiration/getting-started-ui-motion-design/
Usar para que los estudiantes puedan explorar en sus casas los recursos vistos en clase: artículos, herramientas, websites, videos.
¡PARA PENSAR!
¿Cuáles de los principios de motion se ven aplicados en la siguiente imagen?
MULTIPLE CHOICE
CONTESTA LA ENCUESTA DE ZOOM
MULTIPLE CHOICE
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break.
Pregunta: ¿Cuál de los principios de motion se ven aplicados en la siguiente imagen?
Opciones:
Offset and Delay
Crianza
Facilidad
Mascara
Transformación
Cambio de Valor
Clonación
Oscurecer
Parallax
MULTIPLE CHOICE
Duración estimada: 3 minutos
Espacio: Encuesta Zoom
El docente deberá habilitar esta encuesta desde poll zoom para que los alumnos respondan. Esto es una actividad de comprobación.
NOTA: retomar y mostrar los resultados de la encuesta a los estudiantes al volver el break.
Pregunta: ¿Cuál de los principios de motion se ven aplicados en la siguiente imagen?
Opciones:
Offset and Delay
Crianza
Facilidad
Mascara
Transformación
Cambio de Valor
Clonación
Oscurecer
Parallax
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
Obligatoria siempre.
INCORPORANDO MICROINTERACCIONES
AL PROTOTIPO
Paso a paso
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Overlay (Superposición)
Los prototipos a menudo requieren transiciones entre pantallas. Para algunas interacciones, es posible que desee mantener al usuario en la misma pantalla, pero mostrar más información. Las superposiciones le permiten mostrar nuevo contenido o información sobre la pantalla actual en un prototipo.
Utilice superposiciones para crear prototipos:
Alertas o confirmaciones
Menús interactivos de hamburguesas
Información sobre herramientas e información adicional
Teclados en pantalla
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporaranimación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
After Delay
Permite activar una acción después de que el usuario haya pasado una cierta cantidad de tiempo en un fotograma determinado. Deberá establecer la duración del retraso en milisegundos (ms).
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Scroll
Controla cómo los usuarios puedeninteractuar con el contenido que se extiende más allá de las dimensiones de un dispositivo:
Desplácese hacia arriba o hacia abajo en una página larga de contenido
Desplácese de izquierda a derecha para ver diferentes elementos en un control deslizante.
Navegue entre imágenes, artículos o publicaciones en bibliotecas y galerías.
Desplácese o desplácese en cualquier dirección, como en un mapa interactivo.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Smart Animation o Animación Automatica
Busca capas coincidentes, reconoce diferencias y anima capas entre cuadros en un prototipo. Smart Anímate le permite crear rápidamente animaciones avanzadas. Use Smart Animate para replicar:
Cargando secuencias
Desplazamiento de paralaje
Gestos táctiles, por ejemplo, arrastrar, deslizar, presionar prolongadamente
Deslizadores, palancas e interruptores
Contenido desplegable (Mostrar más / Mostrar menos)
Tire para actualizar
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Smart Animation o Animación Automatica
Escala
Si un objeto cambia de tamaño entre cuadros, lo animará encogiéndose o creciendo.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Smart Animation o Animación Automatica
Posición
Reconoce si la ubicación de un objeto, las coordenadas x e y, han cambiado. Luego animará el objeto que se mueve desde su posición actual a su posición en el cuadro de destino.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Smart Animation o Animación Automatica
Rotación
Smart Anímate también tiene en cuenta la rotación y orientación de la capa.
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Micro Interacciones
Drawer a “X”
Selección de Radio Button
Activado-Desactivado
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera dehacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Micro Interacciones
Clonación
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
Micro Interacciones
Pestañas
Revisando y Aplicando Accesibilidad al prototipo: Paso a paso
Duración estimada: 30 minutos 
Herramientas: Adobe XD y Figma
Consigna: El docente deberá mostrar cómo incorporar animación al prototipo. En principio deberá introducir los conceptos de Overlay y After Delay. Seguido a ello comenzar con el concepto de Animación. Introducir "Smart Animation" ya que será la herramienta que más usarán en el prototipo. Cada una de los conceptos le permitirá al estudiante realizar microinteracciones.
El docente deberá mostrar tres microinteracciones (como un drawer se puede convertir en una "X", como un botón desactivado se activa y como un radiobutton se selecciona (el docente puede elegir otros ejemplos pero siempre mantener la lógica de ir de lo simple a lo complejo). Es posible también tomar de ejemplo alguno de los gif de la presentación. El docente deberá dejar en claro que los frame se deben ordenar en orden de cómo se moverán para entender mejor la lógica de motion. El docente tendrá disponible un archivo con los ejemplos de microinteracciones y overlay.
¿Cómo llevar adelante la actividad?
Paso 1: Introducir la funcionalidad “Overlay”.
Paso 2: Introducir la funcionalidad “After DelaY” y ejemplificar de qué manera la pueden usar.
Paso 3: Introducir la funcionalidad “Scroll” (Dependiendo el programa tiene su manera de hacerlo).
Paso 4: Introducir la funcionalidad “Smart Animation” o “Animación Automática”. Definir cuál es el concepto básico de la funcionalidad. Dar a conocer que esta funcionalidad permite generar animación automáticas de Escala, Posición, Rotación.
Paso 5: Mostrar como generar microinteracciones (drawer, selector y botón activado-desactivado).
Paso 6: Mostrar como generar 4 frames que se conecten por animación.
Paso 7: Mostrar como generar pestañas usando smart animation.
¿Cómo se irán mostrando las herramientas de Adobe XD y Figma?
Tanto Adobe XD como FIgma tienen varias capas para ir mostrando por parte del docente. Esto lo haremos de la siguiente manera:
1. Conceptos básicos
2. Concepto Prototipo Funcional básico (Interacción y Acción)
3. Concepto de Componentes y Estilos
4. Concepto de Grilla
5. Plugins Accesibilidad
5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros)
NOTAS:
- Es importante que el concepto de Smart Animation quede entendido.
- Se trabaja con Overlay para mostrar instancias de un elemento como un botón o icono (de esta manera el estudiante no deberá duplicar las pantallas).
- Si es necesario se armara el mapa de como se van conectando los frame.
- El docente se puede ayudar de las Guías de Estilo para entender cómo se moverán los frame.
VAYAMOS AL PROGRAMA DE PROTOTIPADO Y VEAMOS COMO FUNCIONA TODO LO QUE VIMOS
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
MICROINTERACCIONES Y ANIMACIÓN
Incorporar animaciones siguiendo los 10 principios de motion. Generar microinteracciones en el prototipo.
	MICROINTERACCIONES Y ANIMACIÓN		
	Formato: Utilizar herramientas que permitan mostrar de forma apropiada en link a las animaciones (pueden ser videos tambien). Herramientas que se sugieren: Figma, Adobe XD. Subir el archivo como “Animación+Apellido” a la plataforma.
Sugerencia: activar comentarios en el archivo.		
	>> Consigna: Incorporar animaciones siguiendo los 10 principios de motion. Generar microinteracciones en el prototipo. Las animaciones deben cumplir con alguno de los siguientes puntos: orientar a los usuarios, dar feedback sobre las interacciones, hacer foco en algo específico, ocultar el tiempo de carga o espera.
Aspectos a incluir en el entregable:
La animación debe estar presente en algunos de los elementos que generan interacción con el usuario. Para ser considerado animación, debe producirse una transición o cambio en dicho elemento. Se sugiere comenzar con elementos pequeños como íconos, e ir generando animaciones luego en elementosmás grandes o en toda una pantalla.
Podés grabar las animaciones del proyecto y mostrarlas brevemente en un video.
Presentar por lo menos tres desgloses con detalle las microinteracciones incorporadas y con qué puntos cumple: orientar a los usuarios, dar feedback sobre las interacciones, hacer foco en algo específico, ocultar el tiempo de carga o espera.		
	MICROINTERACCIONES Y ANIMACIÓN		
	 
Fidelidad del Prototipo:
1. Media/Alta de Contenido:
- Seguir incorporando contenidos reales.
2. Media/Alta Visual:
- Seguir ajustando el prototipo desde lo visual.
3. Media/Alta de Funcionalidad:
- Con la incorporación de microinteracciones el prototipo aumenta tu fidelidad de funcionalidad.
		
			
 ENCONTRAS UN EJEMPLO EN LA 
 CARPETA DE LA CLASE DE HOY 
¡IMPORTANTE!
Los desafíos tienen fecha de entrega 7 días después de finalizada la clase. Te sugerimos llevar las entregas al día. 
Usar para slides de sólo texto con el contenido más importante de la clase. En una presentación de 50 slides usar máximo 5 de estas.
TE INVITAMOS A QUE MIRES LOS SIGUIENTES CODERTIPS DE LA CLASE 20
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
STORYTELLING: Cómo Contar la HISTORIA de tu Negocio | Coderhouse | ENLACE ACA¡
VIDEOS Y PODCAST
Usar para que los estudiantes puedan explorar en sus casas los recursos vistos en clase: artículos, herramientas, websites, videos.
¿QUERÉS SABER MAS? TE DEJAMOS BIBLIOGRAFÍA AMPLIADA DE LA CLASE 2
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios módulos. No hay que usarla para todos los módulos.
UX Storytellers – Connecting the Dots | Jan Jursa, Stephen Köver and Jutta Grünewald.
LIBROS
Disponible en nuestro repositorio.
Usar para que los estudiantes puedan explorar en sus casas los recursos vistos en clase: artículos, herramientas, websites, videos.
¿PREGUNTAS?
Obligatoria siempre.
¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:
Dar movimiento y personalidad al proyecto bajo el concepto de Motion UI.
Microinteracciones en el prototipo.
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.
OPINÁ Y VALORÁ ESTA CLASE
Obligatoria siempre.