Descarga la aplicación para disfrutar aún más
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.
Compartir