Clase 9 Prototipado (Wireframes a Digital) _ Interfaz_

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.