Copia de Clase 10 Patrones de Diseño _ Contenidos

Vista previa del material en texto

PATRONES DE DISEÑO
& CONTENIDOS
 Clase 10. DISEÑO UX/UI
Obligatoria siempre. Lleva el ícono y el color del curso (provisto por CH).
RECORDÁ PONER A GRABAR LA CLASE
LO MAS RELEVANTE DE LA CLASE 9
Aplicaciones Híbridas: Las aplicaciones híbridas son aplicaciones móviles diseñadas en un lenguaje de programación web ya sea HTML5, CSS o JavaScript, junto con un framework que permite adaptar la vista web a cualquier vista de un dispositivo móvil. El desarrollo de aplicaciones híbridas tiene una curva de aprendizaje mucho más suave que el desarrollo nativo. 
GLOSARIO:
Clase 9
Aplicaciones Web: Pueden ser utilizadas en diferentes plataformas sin inconveniente. No necesita instalarse, se visualizan desde el navegador. No requieren 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
Web Responsive: es una web que se adapta a cualquier tamaño de pantalla. Básicamente es una web diseñada para adaptarse a "cualquier" tipo y tamaño de pantalla.
GLOSARIO:
Clase 9
Aplicaciones Nativas: Las aplicaciones móviles nativas son las que se desarrollan específicamente para cada sistema operativo, iOS, Android o Windows Phone, adaptando a cada uno el lenguaje con el que se desarrolla.
Clase 10
Patrones de Diseño
y Contenidos
PATRONES DE DISEÑO
Clase 9
Prototipado (Wireframes a Digital) e Interfaz
GENERANDO WIREFRAMES DIGITAL EN ADOBE XD 
O FIGMA
ELEGIR EL TIPO DE APP
WIREFRAMES DIGITALES
INCORPORANDO PATRONES
Clase 11
Prototipo Funcional
y Métricas UX
PROTOTIPO FUNCIONAL
INCORPORANDO FUNCIONALIDAD
CRONOGRAMA DEL CURSO
Integrar el diseño de redacción como parte del proceso de diseño.
Conocer en profundidad qué son y cómo usar los diferentes patrones de diseño.
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
PATRONES DE DISEÑO
WIREFRAME DIGITAL
CONTENIDOS
FIGMA / ADOBE XD
WIREFRAME
MAPA DE CONCEPTOS CLASE 10
¿ARRANCAMOS?
REDACCIÓN DE CONTENIDOS DIGITALES (UX WRITING)
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.
Los proyectos digitales tienen reglas de 
redacción muy diferentes a las que utilizan otros medios gráficos. 
Cuando se diseña un sitio se suele pensar en un usuario atento que está dispuesto a dedicar su tiempo a leer cada uno de lo textos elaborados.
EL USUARIO
SPOILER:
los usuarios NO leen
“Los usuarios no leen sino que ojean, miran superficialmente, repasan las páginas con la mirada”
Jakob Nielsen
Usar para slides de sólo texto con citas.
“Los usuarios navegan a los tumbos, dándose golpes contra una y otra cosa hasta que encuentran lo que quieren”
Steve Krug
“No Me hagas pensar”
Usar para slides de sólo texto con citas.
Analogía de lectura: leemos en apps como lo hacemos en la calle
Usar para slides de imagen completa.
PATRONES DE LECTURA
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.
La realidad es muy diferente. El usuario ingresa a un sitio, hace un vistazo rápido en búsqueda de algún link que se asemeje a lo que busca y deja gran parte de la página sin leer.
PATRONES DE LECTURA
Los usuarios no leen palabra por palabra sino que utilizan el comportamiento de “Escaneo” en búsqueda de palabras clave que encajen con sus intereses del momento.
La lectura detallada ocurre luego de haber escaneado y encontrado información importante.
PATRONES DE LECTURA
Los usuarios están apurados y quieren obtener rápidamente lo que buscan.
Saben que no es necesario leerlo todo para encontrar lo que buscan.
Las consecuencias del error no son importantes, siempre se puede volver atrás.
¿POR QUÉ SUCEDE ESTO?
Usar para slides de sólo texto con bullets.
Patrón de lectura F
Usar para slides de imagen completa.
Jakob Nielsen dio a conocer un estudio realizado a 232 personas con la técnica “eye-tracking”.
Así, reveló que al visitar sitios web el patrón de lectura era muy similar, formando una figura parecida a la letra F.
Patrón de lectura F
Usar para slides de texto con imagen.
1. Escanean información presentando más atención a la parte izquierda y a los primeros párrafos de la página
2. Luego la vista se desplaza a la parte inmediatamente inferior haciendo un movimiento horizontal más corto
3. Finalmente escanean el contenido de la izquierda en un movimiento vertical
Usar para slides de texto con imagen.
ENTONCES ¿CÓMO LOGRAMOS CAPTAR LA ATENCIÓN DE LAS PERSONAS?
ESTRATEGIA DE CONTENIDO
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É TENEMOS PARA DECIR?
¿CON QUÉ PALABRAS SE CUENTA?
Elige tu propia aventura
Usar para slides de imagen completa.
Destacarse
Tono
Sobrevivir
Qué se dice
Conciso
Objetivo
Escaneable
DISCURSO
Usar para slides de texto con gráfico de etapas/pasos.
Usar para slides de texto con gráfico de etapas/pasos.
CONCISO
Los usuarios quieren obtener la información que buscan con facilidad.
El texto debe ir directo al grano.
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.
OBJETIVO
Evitar el uso de lenguaje promocional porque quita credibilidad al texto e impone una carga mental que los distrae del objetivo.
Utilizar el lenguaje de los usuarios y evitar lenguajes de la “jerga” del negocio porque puede ser incomprensible.
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.
ESCANEABLE
Romper la uniformidad del texto a partir de elementos que facilitan la lectura y el desplazamiento de la vista:
Mantener jerarquías visuales claras. Representar las relaciones entre los elementos permitiendo entender a que se le debe prestar atención
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.
La información más importante
 primero
¿Qué? ¿Quién? ¿Cómo? ¿Cuándo? 
¿Dónde? ¿Por qué?
Cuerpo
Información de apoyo
Detalles
1. Empezar por la conclusión
2. Seguir con la información
importante
3. Finalizar con el contexto
Usar para slides de texto con imagen.
Redactar oraciones cortas
Dividir en párrafos cada cuatro oraciones
Limitar la extensión de los párrafos (Max: 75 palabras)
Evitar párrafos en mayúsculas, ya que dificultan la lectura
Usar números para cifras. Ya que rompen la uniformidad de lectura.
Destacar usando negrita en las palabras clave para llamar la atención.
Incluir subtítulos cada 3 párrafos para separar bloques temáticos
Utilizar elementos de lectura rápida como viñetas y listas numeradas
PRÁCTICAS DE REDACCIÓN
5 second test
Usar para slides de imagen completa.
5 second test, de nuevo
Usar para slides de imagen completa.
TONO DISCURSIVO
MANUAL DE ESTILO
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.
Tono discursivo
Usar para slides de imagen completa.
LAS PALABRAS TIENEN COLOR Y PESO
Usar para las subsiguientes slides de challenges genéricos.
LAS PALABRAS 
TIENEN CARGA SEMÁNTICA
Expresividad / Valor
Usar para las subsiguientes slides de challenges genéricos.
EL TONO PUEDE Y DEBE VARIAR
Usar para las subsiguientes slides de challenges genéricos.
INVOLUCRAR AL USUARIO EN LAS ACCIONES
Usar para las subsiguientes slides de challenges genéricos.
DESTACARLOS ASPECTOS POSITIVOS
Usar para las subsiguientes slides de challenges genéricos.
CASO DE ESTUDIO
Manual de estilo en Mercado Libre
Usar para las subsiguientes slides de challenges genéricos.
“Dimos de baja tu publicación”
“La publicación fue dada de baja”
Frases cortas y personalizadas
“Cerraste tu publicación”
“Se cerró tu publicación”
“Te avisaremos cuando el pago se acredite”
“Mercado Libre te avisará cuando el pago se acredite”
Humanizar los mensajes
Nosotros como sujeto en lugar de la compañía
“Mira estos tips para reconocer un e-mail falso.”
“Para ver los tips para reconocer un e-mail falso, haz clic aquí.”
Acciones cortas y anticipando la acción
Usar para las subsiguientes slides de challenges genéricos.
Usar para las subsiguientes slides de challenges genéricos.
Usar para las subsiguientes slides de challenges genéricos.
Usar para las subsiguientes slides de challenges genéricos.
Lenguaje simple
Detalles técnicos
Usar para las subsiguientes slides de challenges genéricos.
¡PARA PENSAR!
El discurso de los contenidos tiene que ser
conciso, objetivo y…..
COMPLETA LO QUE FALTA
CONTESTA LA ENCUESTA DE ZOOM
COMPLETA LO QUE FALTA
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: El discurso de los contenidos tienen que ser concisos, objetivos y…..
Opciones:
Escaneable
Claro
Complejo
Extensivo
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
Obligatoria siempre.
PATRONES DE DISEÑO
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.
“Cada patrón describe un problema que ocurre una y otra vez en nuestro ambiente, y luego describe el núcleo de la solución a ese problema, de forma tal que esa solución pueda ser usada un millón de veces, sin hacerlo de la misma manera dos veces”
Christoper Alexander, (Arquitecto), 1979
Usar para slides de sólo texto con citas.
Los patrones son soluciones ya probadas a problemas comunes.
Nos ayudan a crear sin tener que pensar cada solución desde cero.
PATRONES DE DISEÑO
Utilizando patrones ahorramos tiempo y podemos dedicar nuestros esfuerzos a otros aspectos del diseño.
Además, tendremos la seguridad de que la eficacia de las soluciones está comprobada.
PATRONES DE DISEÑO
Patrones de Diseño en iOS: cambia la UI, el concepto es el mismo
ANDROID
Es un manual/normativa de diseño enfocado en la visualización del sistema operativo Android, en la web y en cualquier plataforma. 
Material Design recibe su nombre por estar basado en objetos materiales. Piezas colocadas en un espacio (lugar) y con un tiempo (movimiento) determinado. 
ANDROID
https://material.io/
MATERIAL
LUZ
SOMBRAS
PLENOS DE COLOR
IOS
iOS también sigue los lineamientos del Flat design: despojándose de elementos innecesarios, privilegiando el contenido por sobre el contenedor.
Reduce controles y gráficos a su mínima expresión, siempre con la idea de aligerar visualmente los elementos en pantalla. Este concepto se respalda con la tipografia SF, muchas veces en sus variables más light y la elección de colores blancos para fondos y fuertes para iconos y textos.
iOS
developer.apple.com/library/ios/
CLARIDAD
PROFUNDIDAD
CONTENT FIRST
FUNCIONAL
EN UN PAR DE CLASES VEREMOS EN PROFUNDIDAD AMBAS GUÍAS DE ESTILO (SPOILER)
PATRONES DE NAVEGACIÓN
Un aspecto que merece mucha atención en una aplicación es la forma de navegar entre contenidos, de manera que resulte fácil de comprender para el usuario, evitando la sensación de desorientación que puede ocasionar una navegación confusa.
Cada sistema operativo propone diferentes elementos para navegar por la app como botones, pestañas y paneles. Hacer uso de ellos hará que el usuario los reconozca a primera vista y, solo con estos componentes, ya sepa cómo ir de una sección a otra.
DRAWER
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.
Popularizado por Facebook, permite cambiar rápidamente entre pantallas de la aplicación. 
Pulsando un botón se despliega de forma lateral una lista con los contenidos oculta hasta ese momento. Otra forma de llegar a esta lista es deslizando el dedo desde el lado izquierdo de la pantalla.
Drawer
1
iOS: aunque no es reconocido por las guías de diseño, se pueden encontrar muchas aplicaciones que lo utilizan.
1
Android: es el único que ha estandarizado su uso en las guías oficiales, recomendándolo para los niveles de navegación más altos de la App o cuando las opciones de menú no tengan relación directa entre sí.
TAB BAR
Se pueden utilizar para filtrar contenidos o cambiar entre pantallas que, de acuerdo a la arquitectura de información, tienen el mismo nivel de jerarquía, 
Android: NO son nivel 1 en jerarquía de información, pueden ser nivel 2.
Google sugiere aplicar una regla de oro: no emplear más de cinco o siete pestañas.
Tab bar
2
Sirven para mostrar la navegación principal de la App.
iOS: Son de nivel 1 de jerarquía.
Puede usarse hasta un máximo de 5 tabs.
Tab bar
2
2
¿PERO HAY ALGUNAS APP QUE NO CUMPLEN CON ESTA REGLA? 
INSTAGRAM ES UN EJEMPLO
EN CAMBIO FACEBOOK SI LO CUMPLE
BOTTOM NAVIGATION
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.
Si no te alcanzan las secciones en el Bottom Navigation, Android te permite tener un Drawer donde poner el resto de los Niveles 1... 
Si bien es un estándar de Android. No quiere decir que sea un estándar para los usuarios, ya que muchas aplicaciones no usan este patrón.
En Android se oculta, en iOS no.
Bottom Navigation
3
3
PESTAÑAS
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 pestañas se pueden utilizar para filtrar contenidos o cambiar entre pantallas que, de acuerdo a la arquitectura de información, tienen el mismo nivel de jerarquía, indicando siempre dónde se está y hacia dónde más se puede ir.
Es necesario destacar la pestaña seleccionada, mantener el orden y la ubicación inicial
Pestañas
4
iOS: se las llama “Segmented Control”. En iPhone se puede mostrar un máximo de cinco pestañas y, en caso de necesitar más, la última de ellas se convertirá en una pestaña «más».
4
Android: son las que vimos recientemente bajo el nombre
“Tab Bar”
NAVEGACIÓN HISTORICA
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.
Android: navega hacia atrás de forma cronologica. Incluso entre otras apps.
Navegación histórica
“Back”
5
Android: navega en la jerarquía sólo dentro de la app en la que estas.
No debería funcionar igual al “back” pero muchas veces está mal implementado y lo hace.
Navegación histórica
“Up”
5
5
iOS: es un “atrás” histórico dentro de la app en donde se encuentra el usuario.
Navegación histórica
“Back in App”
5
iOS: sirve para volver a la app donde estabas. Es similar al “Back” de Android (el del teléfono)
Navegación histórica
“Back in App”
5
5
PATRONES DE INTERACCIÓN
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.
El diseño de aplicaciones para móviles tiene que tener en cuenta la forma en que los usuarios sujetan los teléfonos. Asimismo, con cuáles dedos interactúan y cómo los usan, tiene incidencia en el diseño de la interfaz y condiciona la ubicación de los elementos interactivos en la pantalla.LISTAS
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.
Todo contenido estructurado dispuesto verticalmente puede conformar una lista. Esta forma de mostrar tantos ítems como sea necesario permite al usuario tocar alguno de ellos para obtener información complementaria.
iOS: cuando hay algo seleccionado muestra un switch. Los listados muestran previas de lo que selecciono el usuario.
Listas
1
Todo contenido estructurado dispuesto verticalmente puede conformar una lista. Esta forma de mostrar tantos ítems como sea necesario permite al usuario tocar alguno de ellos para obtener información complementaria.
Android: los listados NO muestran previas de lo que selecciono el usuario.
Listas
1
2
Edición de listas
2
Edición de listas
iOS: la edición de listas suele activarse por medio de un botón «editar» colocado en la barra superior. De esta forma, la selección se hace visible junto con las acciones relacionadas.
1
Android: manteniendo pulsado un elemento, la barra de acción cambia indicando cuántos elementos están seleccionados y qué acciones se pueden realizar.
BARRA DE ACCIONES
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.
Android: los botones de acción se encuentran en la zona superior derecha de la interfaz; aunque puede haber excepciones donde se ubiquen en la parte inferior de la pantalla.
iOS: lo más común es que las acciones se ubiquen en la zona inferior, aunque en iPad se colocan en la parte superior derecha.
Barra de acciones
3
2
DESBORDE
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.
Android: las opciones que no caben en la barra de acción pasan automáticamente a mostrarse como acciones desbordadas.
iOS: consiste en agrupar acciones relacionadas, ocultas inicialmente, para luego mostrarlas en formato de lista de botones.
Desborde
4
4
Desborde
Android: el acceso rápido es posible mediante un icono triangular ubicado al pie de los elementos que tienen este tipo de acciones asociadas.
iOS: se realiza un deslizamiento horizontal sobre la fila deseada.
Accesos rápidos
5
Android: hace que la opción para buscar sea accesible desde la barra de acciones.
iOS: es habitual encontrar un campo de búsqueda por encima de las listas, tal como aparece en Contactos y otras apps.
Buscar
6
6
Buscar
Hay casos puntuales en los que hay que interrumpir al usuario de forma temporal para que tome una decisión o para explicarle mejor algo que ha sucedido antes de continuar una tarea. 
Mientras los diálogos están visibles en pantalla no es posible hacer otra cosa en el resto de la aplicación.
Es recomendable limitar su uso para mensajes que no puedan esperar.
Cuadro de diálogo
7
7
Cuadro de diálogo
Android: incorpora las llamadas «tostadas» (toast). Consiste en una pequeña «pastilla» que se ubica en la zona inferior de la pantalla y por encima de cualquier otro elemento de la interfaz.
iOS: no posee una solución concreta similar a la propuesta de Android, por lo que las notificaciones dentro de la app quedan a cargo del diseñador, por ejemplo, usando librerías externas..
Notificaciones
8
Se aconseja mostrar cómo han ido las cosas o que sucederá en breve con simples mensajes de confirmación. Este tipo de mensajes se presentan en pequeños avisos que desaparecen luego de unos segundos.
A diferencia de los cuadros de diálogo, las notificaciones no requieren la intervención del usuario ni tampoco interrumpen su flujo de trabajo.
Notificaciones
8
8
Notificaciones
En lugar de teclados, es recomendable usar otras alternativas como menús deslizantes, desplegables, checks o cualquier opción similar a una lista donde el usuario pueda elegir entre varias opciones. Alternativamente, existen también componentes de hardware en el teléfono —como sensores de ubicación, cámaras y micrófonos— que pueden emplearse también para ingresar datos.
Introducción de datos
9
GESTOS
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.
No se puede afirmar que los gestos más complejos hayan calado fuerte en los usuarios. Esto se debe a que mientras más complicados son los gestos menos personas pueden realizarlos.
Por el contrario, gestos simples como tocar, arrastrar o deslizar han sido bien asimilados por los usuarios. 
El uso de los gestos se puede aprovechar en el diseño de aplicaciones, que debe considerarlos como medios para realizar acciones o navegar por los contenidos.
GESTOS
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.
Tocar
Selecciona la acción primaria
Selecciona la acción primaria
Arrastrar
Archivar o borrar al arrastrar horizontalmente en listas
Borrar al arrastrar horizontalmente en listas
Deslizar
Desplazarse a través del contenido
Desplazarse a través del contenido
Mantener pulsado
Entra al modo de edición en listas
Mostrar un tooltip. Aumentar el contenido bajo el dedo
Doble toque
Alternar entre acercar y alejar. Seleccionar texto
Alternar entre acercar y alejar
Juntar / Separar
Aumentar o reducir el zoom
Aumentar o reducir el zoom
Girar
Girar una imagen o un mapa
Girar una imagen o un mapa
INCORPORANDO PATRONES
AL WIREFRAME DIGITAL
Paso a paso
Incorporando Patrones al Wireframe Digital.
Duración estimada: 30 minutos
Herramientas: Adobe XD y Figma
Consigna: El docente deberá incorporar al wireframe digital los patrones de diseño (interacción y navegación).
¿Cómo llevar adelante la actividad?
Paso 1: Definir el sistema operativo ya que esto hará que algunos patrones se vean de una manera diferente.
Paso 2: Ajustar el diseño a los patrones de Android (top bar, pestañas, entre otros).
Paso 3: Identificar los patrones incorporados marcando cada uno de ellos con su nombre.
Paso 4: Identificar cuales son patrones de interacción y cuales son patrones de navegación. Hacer hincapié en la diferencia entre cada uno de ellos.
NOTAS:
1. Como buena práctica los alumnos deben ser capaces de identificar los patrones de interacción y navegación y el nombre de cada uno de ellos. 
2. Hacer hincapié en los patrones más comunes (navegación histórica, listas, tab bar, pestañas, entre otros).
Incorporando Patrones al Wireframe Digital.
Duración estimada: 30 minutos
Herramientas: Adobe XD y Figma
Consigna: El docente deberá incorporar al wireframe digital los patrones de diseño (interacción y navegación).
¿Cómo llevar adelante la actividad?
Paso 1: Definir el sistema operativo ya que esto hará que algunos patrones se vean de una manera diferente.
Paso 2: Ajustar el diseño a los patrones de Android (top bar, pestañas, entre otros).
Paso 3: Identificar los patrones incorporados marcando cada uno de ellos con su nombre.
Paso 4: Identificar cuales son patrones de interacción y cuales son patrones de navegación. Hacer hincapié en la diferencia entre cada uno de ellos.
NOTAS:
1. Como buena práctica los alumnos deben ser capaces de identificar los patrones de interacción y navegación y el nombre de cada uno de ellos. 
2. Hacer hincapié en los patrones más comunes (navegación histórica, listas, tab bar, pestañas, entre otros).
VAMOS A INCORPORAR PATRONES A NUESTRO DISEÑO
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.
Definir que sistema operativo vas a elegir:
Esto hará que algunos patrones se vean diferentes en el frame.
Esto lo harás en el caso de que hasta esta clase no lo hayas definido el sistemaoperativo con el cual trabajaras.
IOS
Android
Incorporando Patrones al Wireframe Digital.
Duración estimada: 30 minutos
Herramientas: Adobe XD y Figma
Consigna: El docente deberá incorporar al wireframe digital los patrones de diseño (interacción y navegación).
¿Cómo llevar adelante la actividad?
Paso 1: Definir el sistema operativo ya que esto hará que algunos patrones se vean de una manera diferente.
Paso 2: Ajustar el diseño a los patrones de Android (top bar, pestañas, entre otros).
Paso 3: Identificar los patrones incorporados marcando cada uno de ellos con su nombre.
Paso 4: Identificar cuales son patrones de interacción y cuales son patrones de navegación. Hacer hincapié en la diferencia entre cada uno de ellos.
NOTAS:
1. Como buena práctica los alumnos deben ser capaces de identificar los patrones de interacción y navegación y el nombre de cada uno de ellos. 
2. Hacer hincapié en los patrones más comunes (navegación histórica, listas, tab bar, pestañas, entre otros).
Ajustar el diseño a los patrones de android
Te recomiendo empezar por los patrones de navegación visualizando el userflow completo (para identificar los “navegación histórica, tab bar, etc) y luego los patrones de interacción que ya tienen que ver con cada frame en particular. Pregúntate ¿cuál es la manera más clara de mostrarlo?
Incorporando Patrones al Wireframe Digital.
Duración estimada: 30 minutos
Herramientas: Adobe XD y Figma
Consigna: El docente deberá incorporar al wireframe digital los patrones de diseño (interacción y navegación).
¿Cómo llevar adelante la actividad?
Paso 1: Definir el sistema operativo ya que esto hará que algunos patrones se vean de una manera diferente.
Paso 2: Ajustar el diseño a los patrones de Android (top bar, pestañas, entre otros).
Paso 3: Identificar los patrones incorporados marcando cada uno de ellos con su nombre.
Paso 4: Identificar cuales son patrones de interacción y cuales son patrones de navegación. Hacer hincapié en la diferencia entre cada uno de ellos.
NOTAS:
1. Como buena práctica los alumnos deben ser capaces de identificar los patrones de interacción y navegación y el nombre de cada uno de ellos. 
2. Hacer hincapié en los patrones más comunes (navegación histórica, listas, tab bar, pestañas, entre otros).
Ajustar el diseño a los patrones de android
Veamos los mas destacados:
Tab-Bar: en android es “pestañas”. Va ir para arriba. Se incorpora el nombre de cada elemento.
Cards: cambia su morfología para acercarse al sistema operativo.
Top-Bar: se suma un título general donde hoy está el logo.
Top-Bar
Cards
Tab-Bar /
Pestañas
Incorporando Patrones al Wireframe Digital.
Duración estimada: 30 minutos
Herramientas: Adobe XD y Figma
Consigna: El docente deberá incorporar al wireframe digital los patrones de diseño (interacción y navegación).
¿Cómo llevar adelante la actividad?
Paso 1: Definir el sistema operativo ya qué esto hará qué algunos patrones se vean de una manera diferente.
Paso 2: Ajustar el diseño a los patrones de Android (top bar, pestañas, entre otros).
Paso 3: Identificar los patrones incorporados marcando cada uno de ellos con su nombre.
Paso 4: Identificar cuales son patrones de interacción y cuales son patrones de navegación. Hacer hincapié en la diferencia entre cada uno de ellos.
NOTAS:
1. Como buena práctica los alumnos deben ser capaces de identificar los patrones de interacción y navegación y el nombre de cada uno de ellos. 
2. Hacer hincapié en los patrones más comunes (navegación histórica, listas, tab bar, pestañas, entre otros).
Diferenciar los tipos
de patrones que podemos incorporar
Interacción
Navegación
Top-Bar
Cards
Tab-Bar /
Pestañas
Incorporando Patrones al Wireframe Digital.
Duración estimada: 30 minutos
Herramientas: Adobe XD y Figma
Consigna: El docente deberá incorporar al wireframe digital los patrones de diseño (interacción y navegación).
¿Cómo llevar adelante la actividad?
Paso 1: Definir el sistema operativo ya que esto hará que algunos patrones se vean de una manera diferente.
Paso 2: Ajustar el diseño a los patrones de Android (top bar, pestañas, entre otros).
Paso 3: Identificar los patrones incorporados marcando cada uno de ellos con su nombre.
Paso 4: Identificar cuales son patrones de interacción y cuales son patrones de navegación. Hacer hincapié en la diferencia entre cada uno de ellos.
NOTAS:
1. Como buena práctica los alumnos deben ser capaces de identificar los patrones de interacción y navegación y el nombre de cada uno de ellos. 
2. Hacer hincapié en los patrones más comunes (navegación histórica, listas, tab bar, pestañas, entre otros).
A.P - D.P
VEAMOS EL ANTES Y
DESPUÉS DE LOS PATRONES
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.
A.P
D.P
Incorporando Patrones al Wireframe Digital.
Duración estimada: 30 minutos
Herramientas: Adobe XD y Figma
Consigna: El docente deberá incorporar al wireframe digital los patrones de diseño (interacción y navegación).
¿Cómo llevar adelante la actividad?
Paso 1: Definir el sistema operativo ya qué esto hará qué algunos patrones se vean de una manera diferente.
Paso 2: Ajustar el diseño a los patrones de Android (top bar, pestañas, entre otros).
Paso 3: Identificar los patrones incorporados marcando cada uno de ellos con su nombre.
Paso 4: Identificar cuales son patrones de interacción y cuales son patrones de navegación. Hacer hincapié en la diferencia entre cada uno de ellos.
NOTAS:
1. Como buena práctica los alumnos deben ser capaces de identificar los patrones de interacción y navegación y el nombre de cada uno de ellos. 
2. Hacer hincapié en los patrones más comunes (navegación histórica, listas, tab bar, pestañas, entre otros).
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 INCORPORAR PATRONES A NUESTRO 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.
PATRONES DE DISEÑO
A partir del diseño previo de Wireframes digital, incorporar
los patrones de interacción y navegación.
(Van todas las pantallas)
	PATRONES DE DISEÑO		
	Formato: Herramienta Adobe XD o Figma. Generar un nuevo archivo con el nombre “Patrones+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: A partir del diseño previo de Wireframes digital, incorporar los patrones de interacción y navegación. Empezar incorporando patrones de navegación y luego los patrones de interacción. Deberán estar, en el desafío, todos los wireframes correspondiente a tu app. Te recomendamos que incluyas el Antes y Después para ver la evolución del mismo.
Aspectos a incluir en el entregable:
- Identificar aquellos patrones de navegación y nombrar cada uno de ellos.
- Identificar aquellos patrones de interacción y nombrar cada uno de ellos. 
- Tener presente el sistema operativo con el cual vas a trabajar por qué algunos patrones son diferentes.
		
			
 VER EJEMPLO
IMPORTANTE
Identificar, dentro del wireframe, cuáles son patrones de navegación y cuáles de interacción. Colocar el nombre correspondiente a cada uno.
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.
Top-Bar
Cards
Tab-Bar /
Pestañas
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.
¡IMPORTANTE!
Los desafíos tienen fecha de entrega 7 días después de finalizada la clase. Te sugerimos llevar las entregas aldí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.
Conseguir trabajo cómo UX Writer en MercadoLibre | Tomás Altina | 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.
¿PREGUNTAS?
Obligatoria siempre.
¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:
Integrar el diseño de redacción como parte del proceso de diseño.
Conocer en profundidad qué son y cómo usar los diferentes patrones de diseño.
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.
OPINÁ Y VALORÁ ESTA CLASE
Obligatoria siempre.