Descarga la aplicación para disfrutar aún más
Vista previa del material en texto
PROTOTIPO (WIREFRAMES DIGITAL) & INTERFAZ Clase 09. 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 8 Wireframes: Un wireframe es un boceto donde se representa visualmente, de una forma muy sencilla y esquemática, la estructura de una Interfaz. Wireframes a mano: primera aproximación a la idea del producto, permite comenzar a materializar la idea que tenemos en nuestras cabezas. Suelen utilizarse figuras geomé- tricas para representar cada paso. GLOSARIO: Clase 8 Wireframe digital: es una manera de representar gráficamente un proceso a través de una serie de pasos bien estructurados y relacionados que permiten comprender un todo. Suelen utilizarse una serie de figuras geométricas que representan cada paso del proceso. Fidelidad: la fidelidad alta o baja de un prototipo depende de tres dimensiones: Contenido, Visual, Funcionalidad. Fidelidad de Funcionalidad: La fidelidad de funcionalidad refiere al nivel de interacción que puede o no tener el prototipo es decir, si es un prototipo estático creado con pantallas que no se vinculan entre sí, o bien si es un prototipo interactivo donde las pantallas que lo componen están vinculados entre sí. GLOSARIO: Clase 8 Fidelidad de Contenido: La fidelidad de contenido refiere a la palabra escrita. La fidelidad del contenido será alta cuando el texto que contenga el prototipo sea el real. Fidelidad Visual: La fidelidad visual refiere al estilo gráfico del prototipo. Cuanto más parecido al producto final sea nuestro mockup es más alta es su fidelidad visual. Crazy 8: método básico de Design Sprint. Es un ejercicio de dibujo rápido que desafía a las personas a esbozar ocho ideas distintas en ocho minutos. El objetivo es ir más allá de su primera idea. GLOSARIO: Clase 8 Brainstorming: El concepto brainstorming, también conocido como lluvia de ideas, es una herramienta de trabajo en grupo que favorece la aparición de nuevas ideas sobre un problema concreto o un tema. Lo que se pretende con esta técnica es generar nuevas ideas originales en un ambiente relajado. Mobile First: Implica plantear el proceso de diseño teniendo en cuenta el teléfono en primer lugar. La ventaja de esta forma de trabajo es que obliga a pensar en el teléfono como punto de partida, concentrándose en lo esencial de un producto y a hacer foco sólo en lo que tiene sentido para este dispositivo. GLOSARIO: Clase 8 Responsive Design: Son todas esas técnicas o patrones que usamos para adaptar nuestras aplicaciones web a la mayor cantidad de dispositivos posibles. Affordance: Un objeto proporciona a un organismo la oportunidad de realizar una acción. Prototipar: cuarta etapa de la metodología Design Thinking o Pensamiento de Diseño. ¿Qué tan rápido puedes llevar una idea concreta al mundo real y empezar a obtener feedback? Hacer un prototipo se trata de crear una versión simplificada y rápida. GLOSARIO: Clase 8 Clase 9 Prototipado (Wireframes Digital) & Interfaz GENERANDO WIREFRAMES DIGITAL EN ADOBE XD O FIGMA ELEGIR EL TIPO DE APP Clase 8 Prototipado (Wiframe a Mano) & Creatividad ENTREGA PROYECTO 2 LAS 8 IDEAS WIREFRAMES DIGITALES Clase 10 Patrones de Diseño & Contenidos PATRONES DE DISEÑO INCORPORANDO PATRONES CRONOGRAMA DEL CURSO Introducción a los programas de prototipado para la generación de los wireframes digitales. Comprender las diferencias entre las plataformas de un producto digital. Definir la plataforma ideal para nuestro producto. OBJETIVOS DE LA CLASE No va, es para guiar el uso del template. Empatizar Definir Idear Prototipar Evaluar Userflow basado en Flowchart Analizar Diseñar Validar DT DCU Arq de Información MVP WIREFRAME A MANO CRAZY 8 INTERFAZ CREATIVIDAD FIDELIDAD VISUAL CONTENIDO FUNCIONALIDAD WIREFRAME WIREFRAME DIGITAL FIGMA / ADOBE XD TIPO DE APP MAPA DE CONCEPTOS CLASE 9 ¿ARRANCAMOS? INTERFAZ 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. ¿QUÉ ES UNA INTERFAZ? 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. “Es un espacio en donde se articula la interacción entre cuerpo humano, la herramienta y el objeto de acción.” Bonsiepe, Gui (1999). Del objeto a la interface. Mutaciones del Diseño. Usar para slides de sólo texto con citas. Bonsiepe, Gui (1999). Del objeto a la interface. Mutaciones del Diseño. Usar para slides de sólo texto con citas. UN POCO DE HISTORIA 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. SUS ORÍGENES: GRAPHICAL USER INTERFACE Es un conjunto de objetos gráficos mediante los cuales se representa información abstracta y acciones disponibles en un sistema. 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. “Las GUI crean prestaciones visuales: “pistas” a través del diseño gráfico, que mediante el uso de metáforas visuales comunican la navegación, la interacción y el contenido en una interfaz.” Dave Wood (2014). Bases del Diseño de Interacción: Diseño de interfaces Usar para slides de sólo texto con citas. Antes de las GUI los usuarios se comunicaban con las computadoras con comandos de texto. Era necesario saber interpretar y escribir código. Usar para slides de texto con imagen. SISTEMA DE SALIDA COMPUTARIZADO Proceso de cómputos Primera GUI desarrollada en la historia, en los años 70. La primera PC en utilizar esta interfaz fue la famosa Xerox Alto, desarrollada en 1973. Usar para slides de texto con imagen. Tras una visita al Xerox PARC en 1979, el equipo de Apple encabezado por Jef Raskin y Steve Jobs se concentra en diseñar un entorno gráfico para su nueva generación de 16 bits, que se verá plasmado en el Apple Lisa en 1983. Usar para slides de texto con imagen. “Las nuevas tecnologías hacen posible que un usuario trabaje simultáneamente con una cantidad prácticamente ilimitada de información a pesar de la limitada superficie de la pantalla del ordenador.” Lev Manovich (2002). La vanguardia como software. Universidad de California Usar para slides de sólo texto con citas. INTERACCIÓN HUMANO - COMPUTADORA ¿HACIA DÓNDE VAMOS? 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. Black Mirror: Calificación social Usar para slides de imagen completa. Black Mirror: Entrega de Pizzas Usar para slides de imagen completa. China crea un sistema de calificación al ciudadano Usar para slides de imagen completa. DIFERENCIAS ENTRE WEB & APP 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. HTML + JS + CSS Utiliza una grilla que se adapta a cualquier resolución No tiene en cuenta el SO, siempre es la misma web Puede aplicarse mejora progresiva para dar soporte a teléfonos de baja gama 1 WEB RESPONSIVE 2 APLICACIONES NATIVAS Se descargan e instalan desde el Store. Deben actualizarse Pueden hacer uso de las notificaciones del sistema operativo Se desarrolla con el Software Development Kit (SDK) Se diseñan y programan para cada plataforma (iOS, Android) No requieren internet para funcionar Permiten utilizar el hardware (Cámara, GPS, etc) Tienen una interfaz basada en las guías de cada SO, lo cual favorece la usabilidad 3 APLICACIONES WEB HTML + JS + CSS Se programan de forma independiente al SO Pueden ser utilizadas en diferentes plataformas sin inconveniente No necesitan instalarse, se visualizan desde el navegador Norequieren actualizarse, el usuario siempre está viendo lo último Requieren una conexión a internet para funcionar No permiten aprovechar al máximo los componentes de hardware del teléfono 4 APLICACIONES HÍBRIDAS Combinación entre ambas anteriores Una vez desarrollada la web se compila en una App Nativa Permite tener un mismo código Con librerías es posible acceder a las funciones del teléfono Frameworks: React, Angular, Ionic, Phonegap, Apache Cordova. La tecnología híbrida nació para reducir los costes, los tiempos y facilitar el aprendizaje y desarrollo de aplicaciones móviles, aportando también la posibilidad de crear webs con estos desarrollos. Por ello podríamos decir que este tipo de aplicaciones son totalmente multiplataforma (Móvil, Tablet, Ordenador, TV…). Con el desarrollo de un código único podemos generar aplicaciones para las plataformas deseadas. En el caso de móvil, para Android e iOS. ¿SABES SI ES HIBRIDA, NATIVA O WEB APP? HIBRIDA El desarrollo de aplicaciones híbridas tiene una curva de aprendizaje mucho más suave que el desarrollo nativo. Para desarrollos nativos se requiere tener conocimientos en lenguajes de programación como son Java / Kotlin / XML para Android, y Swift / Objective-C para iOS, además de las herramientas y particularidades específicas de cada plataforma. DEFINIENDO EL TIPO DE APP Paso a paso Definir el tipo de APP Duración estimada: 10 minutos Consigna: El docente definira el tipo de APP elegido para el caso testigo fundamentando la decisión en base a lo que aparezca en el slide. NOTAS: 1. Se incluye acá el segundo usuario ya qué la app tiene también la opción de quien quiere alquilar y qué forma parte del userflow. 2. Diferenciar con colores cada una de las cajas y mostrar lo fácil qué es hacerlo con whimsical. 3. Mostrar como de debe habilitar la opción de compartir para qué los tutores puedan comentar el userflow directamente en el programa. ¿Cómo llevar adelante la actividad? Paso 1: Hablar de pros del tipo de app. Se puede comparar con otro tipo de app. Paso 2: Hablar de los contras dle tipo de app. Se puede comparar con otro tipo de app. Paso 3: Hablar de la fundamentación de la elección NOTA: esto debe ser una actividad rapida. SE REALIZARÁ COMO APP HÍBRIDA Comparación entre aplicaciones Híbridas y Nativas App Hibrida App Nativa Pros - Con un solo y único desarrollo, pueden ser utilizadas en las diferentes plataformas. - Esto reduce el coste de desarrollo. - Su mantenimiento es también más sencillo. - La mejor velocidad de ejecución . - Tiene la posibilidad de tener acceso a todas las funciones del terminal y dotar de esta forma de mayor funcionalidad a la app. - Mayor experiencia del usuario. - Tiene mayor visibilidad en la App Stores de Android y Apple. - Se actualizan de forma automática. Contras - El rendimiento de este tipo de aplicaciones es menor que el de una aplicación nativa. - Tienen un acceso limitado a las funciones del dispositivo móvil. - Requiere una conexión a Internet para poder ejecutarse. - A nivel estético, tampoco son tan atractivas como las nativas debido a las limitaciones de la tecnología de desarrollo utilizada. - El desarrollo es más costoso. - Los desarrollos no podrán ser idénticos. Motivos de la elección: - Se desea alcanzar al mayor público posible. - El mantenimiento de dos aplicaciones nativas (una para Android y un para iOS) es demasiado costoso. - No son necesarias las funciones del celular. Definir el tipo de APP Duración estimada: 10 minutos Consigna: El docente definirá el tipo de APP elegido para el caso testigo fundamentando la decisión en base a lo que aparezca en el slide. NOTAS: 1. Se incluye acá el segundo usuario ya que la app tiene también la opción de quien quiere alquilar, y forma parte del userflow. 2. Diferenciar con colores cada una de las cajas y mostrar lo fácil que es hacerlo con whimsical. 3. Mostrar cómo de debe habilitar la opción de compartir para que los tutores puedan comentar el userflow directamente en el programa. ¿Cómo llevar adelante la actividad? Paso 1: Hablar de pros del tipo de app. Se puede comparar con otro tipo de app. Paso 2: Hablar de los contras del tipo de app. Se puede comparar con otro tipo de app. Paso 3: Hablar de la fundamentación de la elección NOTA: esto debe ser una actividad rápida. Buscar Alquiler Usuario que desea alquilar Buscar alquiler por ubicación y fechas o ofertas Reservar alquiler por un mediano plazo Versión Lanzamiento Publicar alojamiento Usuario que desea poner una propiedad para alquilar Publicar alojamiento Aceptar reserva de alquiler Conectar Usuarios Chat Chat entre inquilino y anfitrión TIPO DE APP Elegir qué clase de producto queremos tener (híbrido, nativo, etc) Usar para challenges genéricos. TIPO DE APP Elegir qué clase de producto queremos tener (híbrido, nativo, etc) y definir pros y contras de las elecciones tomadas. Fundamentar brevemente. Elegir solo un estereotipo de producto. Tiempo : 10 min Usar para las subsiguientes slides de challenges genéricos. WIREFRAME DIGITAL 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. El wireframe digital posee mayor nivel de detalle, pero siguen siendo representaciones esquemáticas de los elementos que formarán parte de la interfaz del usuario. WIREFRAMES DIGITALES WIREFRAMES DIGITALES WIREFRAMES A MANO ¿POR QUÉ PROTOTIPAR? 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. Para responder preguntas... y generar nuevas. Para validar hipótesis y eliminar prejuicios Para comparar caminos alternativos de diseño Para fallar lo antes posible Para fallar lo mas barato posible LLEGÓ EL MOMENTO DE EMPEZAR A GENERAR NUESTROS WIREFRAMES DE MANERA DIGITAL. PARA ELLO USAREMOS DOS PROGRAMAS DE PROTOTIPADO 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. Adobe XD es tu solución de diseño para la creación y prototipado de sitios web y aplicaciones móviles. ADOBE XD DESCARGAR PROTOTIPADO FUENTE: ADOBE XD Usar para slides de texto con imagen. Figma es una aplicación para diseñar interfaces (app y website) de manera colaborativa. FIGMA DESCARGAR PROTOTIPADO FUENTE: PINTEREST Usar para slides de texto con imagen. ¿CUAL USAR? 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. Fuente: EDteam AMBAS DOS SON GENIALES Y TE SERVIRÁN PARA TODO EL PROCESO QUE DEBEREMOS REALIZAR DE AHORA EN MÁS 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. GENERANDO WIREFRAMES DIGITALES EN ADOBE XD Y FIGMA Paso a paso Generando wireframes digitales en Adobe XD y Figma: Paso a Paso Duración estimada: Hora y media Herramientas: Adobe XD y Figma Documento: Wireframes para app y web disponible en ambos programas. Consigna: El docente deberá realizar los primeros wireframes del caso testigo. Lo primero que deberá hacer es presentar los bocetos realizados del proyecto. Tendrá disponible un archivo XD o Figma con los elementos (botones, tipografía, iconos, etc) para poder usar en la carpeta de la clase. NOTAS: En esta instancia solo se deberá hacer foco en: - Elementos básicos de ambos programas - Hablar acerca de los atajos para el uso del programa - Hablar del concepto de frame y su importancia - Hablar del orden de los layers y como buena práctica ir nombrando cada elemento - Herramientas básicas: tipografía y formas geométricas. ¿Cómo llevar adelante la actividad? Los pasos a seguir en el armado son:Paso 1: Mostrar el wireframe en papel Paso 2: Definir el tamaño del frame (en este caso hablar acerca de los sistemas operativo s IOS y Android - las guías de estilos se verán más adelante pero se debe adelantar qué conozcan los SO para definir el tipo de FRAME). Paso 3: Empezar con los elementos de estructura (tab bar, pestañas, entre otros). NOTA: si bien se verán la próxima clase se pueden ir nombrando los tipos de elementos dentro de la estructura. Paso 4: Continuar con los elementos de interacción (listas, cards, entre otros). NOTA: si bien se verán la próxima clase se pueden ir nombrando los tipos de elementos dentro de la estructura. Paso 5: Ordenar los layers y nombrar cada uno de los elementos. ¿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 (HOY ESTAMOS ACA) 2. Concepto Prototipo Funcional básico (Interacción y Acción) 3. Concepto de Componentes y Estilos 4. Concepto de Grilla 5. Concepto Prototipo Funcional Avanzado (Smart Animation, After Delay, entre otros) A TENER EN CUENTA SHIFT: Arrastra en línea recta ALT: Duplicar ALT+SHIFT: duplica y arrastra en línea recta Control+G: agrupar Para las formas SHIFT: agranda proporcionalmente ALT+SHIFT: al vector lo agranda desde el centro proporcionalmente. Frames Panel de propiedades del frame Formas Basicas Texto Introducir texto en un área Introducir texto en un punto Nombrar y Ordenar los Layers Frames Panel de propiedades del frame Formas Basicas Texto Introducir texto en un área Introducir texto en un punto Nombrar y Ordenar los Layers ¡PARA PENSAR! ¿De que team vas a ser Adobe XD o Figma? PREGUNTA #TEAMFIGMA O #TEAMXD CONTESTA LA ENCUESTA DE ZOOM PREGUNTA #TEAMFIGMA O #TEAMXD Duración estimada: 3 minutos Espacio: Encuesta Zoom El docente dejará habilitada esta encuesta para que los alumnos respondan. Esto es una actividad de comprobación. Pregunta: ¿De que team vas a ser Adobe XD o Figma? Opciones: FIGMA ADOBE XD ☕ BREAK ¡5/10 MINUTOS Y VOLVEMOS! Obligatoria siempre. MANOS A LA OBRA! LLEGÓ EL MOMENTO DE PASAR NUESTROS WIREFRAMES A MANO A DIGITAL 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. PERO LES TENEMOS UNA SORPRESA! 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. LES DEJAMOS UNA SERIE DE KIT 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. Wireframes APP Tendrás disponible en la carpeta de la clase un archivo de figma o adobe xd con todos estos elementos para hacer tus wireframes digital. Wireframes WEB Tendrás disponible en la carpeta de la clase un archivo de figma o adobe xd con todos estos elementos para hacer tus wireframes digital. Plugins DESCARGAR Plugins DESCARGAR VAMOS HACER LAS PRIMERAS PANTALLAS DE LA APP 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. Empezamos tomando nuestro boceto para convertirlo en digital Definimos el tamaño del Frame que vamos a usar Les recomiendo trabajar con tamaños standares (ni muy grandes, ni muy chicos). Figma: IOS: Iphone 8 / Android: Google Pixel 2 Adobe XD: IOS: Iphone 6-7-8 / Android: Movil Android Importar archivos externos con los objetos (botones, texto, iconos) Usar el archivo correspondiente tanto de XD como de Figma para empezar a generar los wireframes digital de tu app. Figma: los archivos deben ser colocados primero en el carrete de archivos para luego abrirlo. Adobe XD: los archivos se abren directamente en una nueva pestaña del programa. Ir colocando los objetos (botones, texto, iconos) en el Frame En esta etapa, todavía no trabajaremos la grilla y el concepto de componentes de figma o xd. Lo más importantes es poder tener un archivo digital con los wireframe de tu app o web. Recordar el concepto de Fidelidad tanto de contenido como el visual (el de funcionalidad aún no lo veremos). Puedes reutilizar elementos existentes pero recuerda trabajar en escala de grises o usando un único color como el azul. Ordenar el espacio de trabajo y los layers Es importante en esta etapa que tu archivo de figma o adobe xd quede ordenado. Te recomiendo usar los comandos “control+g” para agrupar los elementos y luego colocarlos todos dentro del frame, ya que aquellos que no esten ahi no se copiaran si tienes que duplicar el frame. Proceso completo Wireframe a Mano Objetos a utilizar y Definición del tamaño del Frame. Wireframe digital con layers ordenados. Wireframe digital con layers ordenados. Proceso completo NOTA: El frame también puede tener un nombre, en este caso “Mis Reservas”. Wireframe a Mano Objetos a utilizar y Definición del tamaño del Frame. Wireframe digital con layers ordenados. 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. LLEGÓ EL MOMENTO.. VAMOS A CREAR NUESTRO PROPIO WIREFRAME DIGITAL 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. WIREFRAMES DIGITALES Desarrollar los wireframes digitales de tu proyecto en formato digital. Pasar a digital los sketch/bocetos que realizaron en papel (Todo el recorrido que realiza el usuario hasta cumplir el objetivo que plantearon en su app, de inicio a fin, incluye el login. Ej: pantallas que va pasando hasta reservar una habitación) WIREFRAME DIGITAL Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre “Wireframe Digital+Apellido”. Se puede copiar el link en un archivo .doc o .ppt para subir a la plataforma o adjuntar el link directo en la entrega. Sugerencia: activar comentarios en el archivo. >> Consigna: Desarrollar los wireframes digitales de tu proyecto en formato digital. Aspectos a incluir en el entregable: - Comunicar la estructura de la solución de diseño qué estamos pensando: ¿Dónde estarán los menús? ¿El logo? ¿Los Call To Action principales? ¿Qué jerarquía tendrán los distintos grupos de contenido? WIREFRAME DIGITAL Fidelidad del Prototipo: Baja/Media de Contenido: Escribir los títulos principales y el nombre en los botones. Baje/Media Visual: Evitar el uso de imágenes reales, pueden usar bloques que las simulan con el icono correspondiente. Se recomienda que sean en blanco y negro para qué el análisis se centre en lo estructural y no en el contenido. Usar una sola tipografía, no importa cual. Tener en cuenta las Interacciones: desplegables, hovers, etc. Baja de Funcionalidad: Comenzaremos a ser funcional el prototipo en el próximo desafío. VER EJEMPLO ¡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 9 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. Qué es y cómo usar Figma | Luana Marques | ENLACE ACA | VIDEOS Y PODCAST Usar para que los estudiantes puedan explorar en sus casas los recursosvistos 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. Diseño de Usabilidad en la interfaz gráfica de usuario. Javier Royo. Introducción a la interacción persona-ordenador. Varios Autores / Openlibra. Guía completa Figma Guía completa Adobe XD “Los piratas de Sillicon Valley” (Película completa) 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: Introducción a los programas de prototipado para la generación de los wireframes digitales. Comprender las diferencias entre las plataformas de un producto digital. Definir la plataforma ideal para nuestro producto. Obligatoria siempre. Completar el resumen con palabras claves de lo visto. OPINÁ Y VALORÁ ESTA CLASE Obligatoria siempre.
Compartir