Aprende UX: cómo hacer wireframing y un prototipo para tu aplicación móvil

1. Introducción: Hola. Mi nombre es Gene Guy. Soy diseñadora y desarrolladora de productos. Llevo haciendo diseño y desarrollo de productos desde hace más de 15 años. En esta clase, te enseñaré a wireframe y prototipo con Balsamiq y Adobe XD. Haremos wireframe y prototipearemos una aplicación móvil de ejemplo basada en algunos documentos UX como personas, flujos de usuario que he preparado para la clase. Te mostraré algunos consejos sobre el uso de Balsamiq y Adobe XD y mi proceso de wireframing y creación de prototipos de una aplicación móvil. Esta clase es para diseñadores de UX principiantes e intermedios que quisieran aprender o querer subir de nivel sus habilidades de wireframing y prototipado. Al final de la clase, cada alumno tendrá un proyecto terminado que podrá exhibir en su cartera. No puedo esperar a verte en clase, así que podemos empezar a hacer wireframing y prototipar juntos. 2. Qué es un marco de Wireframe: ¿ Qué es una alambrada? Wireframe es la parte esencial del flujo de trabajo de un diseñador. Es uno de los aspectos importantes del flujo de trabajo de un diseñador porque ayuda a asegurar que un sitio web o aplicación móvil tendrá consistencia y claridad para hacer una experiencia de usuario positiva. Un wireframe es una representación simple, de baja fidelidad de su aplicación o sitio web. Piensa en ello como un plano para tu sitio web o aplicación. Es donde comienzan las etapas iniciales del proceso de pensamiento acerca de entender qué elementos se colocarán en la pantalla. Piensa en una estructura metálica como similar a un plano o planos de piso de una casa. Antes de empezar a diseñar una casa, hay que tener un plano o un plano de planta para identificar a dónde irá la cocina, a dónde irán las recámaras, etc. wireframes para una aplicación móvil o un sitio web sirven para el mismo propósito. Tienes que mapear lo que irá en cada pantalla, y colocarás cajas en la pantalla para actuar como soportes de lugar para que los elementos del diseño real irán. ¿ A dónde irá la navegación? ¿ Habrá una imagen de héroe en la pantalla, etc. wireframes nos permiten iterar rápidamente a través nuestras ideas para que podamos mostrar y obtener retroalimentación de las partes interesadas. wireframes dan la estructura general de la página y cómo fluirá la navegación. Al crear wireframes, cada aspecto del sitio web o aplicación está representado por una forma o un gráfico simple. Las cajas con esas líneas diagonales en ellas representan imágenes, las líneas horizontales se utilizan para representar texto, y un círculo con una L en su interior se utiliza con mayor frecuencia como su logotipo. Un buen wireframe puede ayudar a crear la visión para todo tu sitio web o aplicación móvil. Wireframe sirven como primera etapa del diseño. Después de que finalicen los wireframes, crearás maquetas y luego prototipos, pero los wireframes ayudan a asegurarte de que estás en el camino correcto con tu producto antes de empezar a perder tiempo con un diseño que al final, no parece funcionar como lo esperabas. 3. Por qué debes hacer la Wireframe y el Prototipe: ¿ Por qué deberías hacer wireframe? La rápida wireframing y la creación de prototipos son pasos importantes en su proceso de diseño. Permite a los diseñadores, desarrolladores y emprendedores sacar ideas rápidamente. Al hacer wireframes rápido, podrías tirar las malas ideas y descubrir las mejores soluciones para tu aplicación web o aplicación móvil. Al usar Balsámico o Adobe XD, por ejemplo, se pueden crear wireframes y prototipos que permitan al usuario enfocar el contenido conversacional en las interacciones y no detalles como esquema de color, un cierto uso de imagen en lugar de otro imagen, o tamaño de botones y cosas así. Todas esas cosas vienen más tarde en el proceso. El motivo principal de los wireframes y eventualmente el prototipo de baja fidelidad de esos wireframes es asegurarse de que todos los elementos necesarios para cada pantalla o página todos ahí dentro y cómo esos elementos interactúan entre sí. baja fidelidad mantiene la conversación centrada en averiguar el problema y comunicar la solución funcional. Wireframing te ayuda a visualizar el diseño de tu contenido, ahorra tiempo en el proceso de diseño general al poder eliminar rápidamente diseños de estructura alicatada de pantallas, probar fácilmente los problemas de usabilidad, probar y refinar su navegación, realice prototipos rápidos con usuarios y partes interesadas, y evalúe si sus wireframes se adhieren a las mejores prácticas de UX. wireframes ayudan a aportar claridad a cómo se organizarán los elementos en la pantalla. 4. Acerca de Balsamiq: Llevo unos años usando Balsamiq. Es una de las mejores herramientas que hay para wireframing rápido y prototipado. Es muy fácil de aprender, por lo que podrás saltar de inmediato y empezar a crear. Lo que hace que Balsamiq sea tan bueno de usar para wireframes de baja fidelidad es el hecho que reproduce la experiencia de hacer bocetos en un bloc de notas o pizarra, pero estás usando una computadora en su lugar, por lo que arrastrarás y soltarás componentes de Balsamiq en tu lienzo y prueba rápidamente ideas rápido para que así puedas deshacerte de las malas ideas y no perder el tiempo. Como puedes ver, hay muchas empresas de gran nombre que usan Balsamiq, por lo que estarás en buena compañía. Cuando veas descripciones de puestos de trabajo para muchos trabajos de diseñador UX, encontrarás que Balsamiq suele ser una de las herramientas a las empresas les gustará que sepas usar. Ya ves aquí Balsamiq viene en tres versiones: Balsamiq Cloud que es la aplicación web, Balsamiq para Desktop que se ejecuta en Mac y Windows, y luego está Balsamiq Google Drive que se integra con Google Drive. Cada versión viene con una prueba de 30 días, por lo que puedes descargar una de estas versiones y utilizarla para este curso. 5. Panel de navegador y lienzo en Balsamiq: Ya deberías haber descargado e instalado una de las versiones de prueba gratuitas de Balsamiq, si aún no la tienes. Ahora podemos abrir Balsamiq y veremos el tablero, que consta de múltiples áreas diferentes. A nuestra izquierda, tenemos el panel de navegación. En el área superior, tenemos la barra de herramientas. Justo debajo de eso, tenemos la biblioteca de UI, que tiene todos los controles de interfaz de usuario que podemos usar para nuestros proyectos. Esta gran área principal en el medio es el lienzo, aquí es donde colocamos todos nuestros controles. A la derecha está el Panel de Propiedades. En esta lección, pasaremos por encima del Panel Navigator en el lienzo. El Panel Navigator es donde vivirán todos nuestros wireframes, ácidos o símbolos. Cuando hagas una nueva maqueta de estructura alámbrica, aparecerá en esta área, y los elementos se arrastran al área del lienzo aquí. Hagamos una maqueta rápida de estructura alámbrica y veamos cómo funciona esta área. Vamos a repasar los controles de la biblioteca de la UI en el siguiente video, pero vamos a agarrar unos controles ahora para que podamos conseguir una maqueta para que aparezca en el Área Navigate. Tenemos nuestra primera maqueta básica de estructura alámbrica y como puedes ver, aparece en el Panel Navigator. Si seleccionas una maqueta de estructura alámbrica haciendo clic en ella, verás que aparece una flecha en la parte inferior derecha. Si hace clic en esa flecha, se mostrarán algunas opciones que son Cambiar nombre, Duplicar, Mover a la papelera y Crear versión alternativa. Para cambiar el nombre de su maqueta de estructura alámbrica, seleccione Cambiar nombre y, a continuación, aparecerá una ventana modal, que tiene un campo de entrada junto a la nueva etiqueta de nombre. Aquí es donde escribirías el nuevo nombre de la maqueta y luego haces clic en “Cambiar nombre”. La siguiente opción es Duplicar, si haces clic en eso, creará una versión duplicada de esa maqueta y al final del nombre agregará la copia de texto, para que sepas que se trataba de una versión duplicada. También puede utilizar el atajo de teclado Command D para crear una versión duplicada. A continuación tienes el Mover a la Papelera. Selecciona qué maqueta de estructura alámbrica deseas eliminar y selecciona Mover a la Papelera, y esa maqueta se eliminará. El último elemento del menú es el Crear una Versión Alterna. Si selecciona esta opción, se creará una versión alternativa que se mostraría en la parte inferior derecha del tablero en la sección Versión alternativa del Panel de propiedades. Estas versiones se denominarán Versión Oficial, que es la Versión Original, y la Versión Alterna a la que puedes renombrar por algo un poco más memorable, en lugar del nombre de positor que ofrecen. Si haces clic con el botón derecho en la Versión Oficial, verás una opción para Descartar Todos los Suplentes. Si haces clic con el botón derecho o haces clic en la “Versión Alterna” y haces clic en la flecha que aparece, verás opciones para Renombrar, Duplicar, Duplicar como Nueva Mockup, Promocionar a Oficial, Fusionar con Oficial y Descartar. Seleccionar y Renombrar es lo mismo que hemos visto antes, Seleccionar y Duplicar, duplica esa versión alternativa. Creará una Versión Duplicada con un nuevo nombre, pero no creará una nueva estructura alámbrica. Si deseas crear una nueva maqueta de estructura alámbrica, necesitarías seleccionar la siguiente opción que es Duplicar como Nueva estructura alámbrica. Esto muestra una nueva estructura alámbrica. Si haces clic en “Promocionar a Oficial”, esto hará que ese wireframe se convierta en la Versión Oficial y haga la Versión Oficial anterior, ahora la Versión Oficial Antigua. Si selecciona Fusionar con Oficial. Agregará ese alterno junto a tu Versión Oficial en la pantalla, y luego podrás añadir o arrastrar o lo que esté en la Versión Alterna sobre la Versión Oficial para actualizar la Versión Oficial. Por último, puedes seleccionar este descarte para cada Versión Alterna para eliminarlos o puedes hacer clic en la flecha de la Versión Oficial y eliminar todas las Versiones Alternas a la vez. 6. Panel de propiedades de la biblioteca de UI en Balsamiq: Ahora hablemos de la Biblioteca de UI en el panel Propiedades. El IU Library es una lista de todos los tipos de control de interfaz que se incluyen así como activos, iconos y símbolos. En la biblioteca se categorizan los controles, por lo que se puede hacer clic en uno de los botones de categoría como “Todos” y ver todos los controles de interfaz de usuario en la biblioteca. O puedes hacer clic en “Contenedores” y ver todos los controles de interfaz de usuario del contenedor como un iPhone, una ventana del navegador, un iPad, etc. Para agregar un control de interfaz de usuario al lienzo, puedes arrastrarlo al lienzo o hacer doble clic en él. La Biblioteca de UI también incluye sus activos que importó a su proyecto, así como los símbolos que creó para su proyecto. Al seleccionar cualquiera de los controles de la interfaz de usuario, me permite mostrarles cómo funciona el panel Propiedad también. Agarremos un control de botón. Si lo agrego al lienzo, permanece seleccionado, y a la derecha en el tablero verás las propiedades para ese control de botón en el panel Propiedades. Se pueden ver los campos de entrada de posición y tamaño que me permite introducir un nuevo conjunto de números, y cuando haga clic en “Enter” el botón se actualizará. Ahí hay una sección de estratificación donde puedo llevar el botón al frente, traerlo hacia adelante, enviar hacia atrás o enviarlo de vuelta. Hay una sección Autosize y una sección Color que me permite cambiar el color de fondo del botón haciendo clic en este icono de “Color de fondo” y seleccionando un nuevo color. También puedo agregar un icono al botón. Puedo buscar un ícono escribiendo lo que estoy buscando en el cuadro de búsqueda de iconos, o puedo hacer clic en el icono “Abrir biblioteca de iconos” para ver todos los iconos disponibles. Estos son el conjunto de iconos Font Awesome que viene preinstalado. Si busco el logotipo de Apple, lo veré aparecer y luego puedo hacer doble clic en él para que se pueda agregar a mi botón. Entonces puedo hacer clic en el icono “Girar 90 grados” para rotar el icono dentro del botón, o puedo hacer clic en el botón “Eliminar icono” para eliminarlo completamente del botón. Debajo del cuadro de búsqueda de iconos hay un deslizador que me permite escalar el icono de extra pequeño a doble extra grande. También hay una sección de enlaces donde puedo hacer que el botón pueda hacer clic para que me lleve a otro marcador, esta característica es lo que permite configurar tus wireframes para que se conviertan en un prototipo clicable. Después hay una sección Menú, que al hacer clic en la flecha hacia abajo se agrega al botón. También hay una sección Estatal para que pueda seleccionar el estado del botón. Puedo hacerlo normal, puedo hacerlo seleccionado lo que lo pondrá azul puedo hacerlo en foco lo cual pone una delgada línea azul alrededor del botón, o puedo hacerlo deshabilitar, esto da el efecto que el botón está siendo gris. Entonces la parte inferior hay una sección Texto donde puedo negrita, cursiva, subrayado, o cambiar el tamaño de fuente o la alineación del texto. Si tiene varios controles seleccionados, se muestran las opciones para alinear y distribuir esos controles. Yo sugeriría pasar por algunos de estos controles y jugar con sus propiedades para ver qué hacen cada uno de ellos. Estaré pasando por muchos de estos controles en la siguiente sección, y te mostraré cómo creo wireframe. Cuando no se seleccionan controles, el Inspector de propiedades muestra notas para el modelo alámbrico seleccionado. Al hacer clic en el botón “Información del proyecto” de la barra de herramientas, muestra el panel Información del proyecto y le permite definir la configuración de todo el proyecto para el skin, la fuente, el enlace y el color de selección del proyecto. Estos ajustes se aplicarán a todos tus wireframes en el proyecto. El apartado Piel te da dos skins, lo que te permite trabajar en tus primeras ideas usando un aspecto áspero y escrupuloso. Después haciendo clic en “Wireframe”, actualízalos a un look más crujiente y pulido cuando estén listos para su presentación. 7. Barra de herramientas de Balsamiq: Ahora hablemos de la barra de herramientas en la parte superior del tablero. En la parte superior izquierda, hay un icono resaltado en azul que permite ocultar y mostrar el panel del navegador. Junto a eso, tienes un icono que te permite ver tus alámbricas en formato de cuadrícula en miniatura, y el signo más que te permite añadir una nueva estructura alámbrica. En la sección media superior, tienes botones para deshacer y rehacer tus acciones, lupa, iconos para acercar, alejar y acercar para encajar, etc. Si seleccionas un elemento en el lienzo, tienes iconos que se activen donde se pueden agrupar los ítems seleccionados. Tienes un icono que cambia la posición de un elemento, llevándolo al frente, enviándolo a la parte trasera, etc. Entonces también, un icono para bloquear un elemento para que no se pueda mover ya que estás trabajando. A la derecha de ese grupo de iconos, tienes un cuadro de búsqueda donde puedes buscar rápidamente el control de la interfaz de usuario. Junto a eso hay un botón para ocultar y mostrar la biblioteca de UI y después de eso, hay un icono para agregar un comentario. Si haces clic en el cuadro de agregar comentarios, te pedirá inicialmente tu correo electrónico y un nombre, y luego podrás agregar comentarios, eliminar comentarios y editar comentarios. La siguiente herramienta permite ocultar y mostrar al inspector. Después de eso, un ícono que oculta y muestra la información del proyecto, y el último ícono es el icono de reproducción, que pintarías para previsualizar un prototipo de tu conjunto de wireframes. 8. Let's a hacer la línea de alambre en Balsamiq: En base a todo lo que hemos hecho hasta ahora en lecciones anteriores, empecemos a hacer algunos wireframes. Esencialmente lo que hago cuando empiezo por primera vez, me gusta tener algún proceso antes de empezar a bosquejar un modelo alambrico. Lo que hice aquí fueron unas plantillas, solo para darte una idea de mi proceso de pensamiento mientras empiezo a crear wireframes. El app que estaré haciendo en esta serie de wireframes rápidos, probablemente haré unos cinco de ellos, es una app de entrenamiento. Lo que hice fue hacer rápidamente un par de personas, siendo personas personas que usarían la app. ¿ Por qué usarían la app, cuál es su objetivo para usar la app? Podría tener en mente al usuario mientras estoy dibujando ideas. nombre de esta primera persona es Jennifer. Su objetivo es, necesita un plan de entrenamiento en casa porque no tiene tiempo para ir al gimnasio. A ella le gusta hacer ejercicios de peso corporal y cardio, y prefiere no usar pesas cuando se ejercita. Esta es la primera persona. La segunda persona creada fue David. Aquí están sus detalles. Es gerente de ventas, de 44 años, tiene un MBA, viaja mucho por trabajo. Necesita un plan de entrenamiento en casa porque no tiene tiempo para ir al gimnasio. Le gusta hacer ejercicios de peso corporal, pesas, y cardio. Necesita que sus entrenamientos sean cortos, pero de alto impacto porque no tiene mucho tiempo para ejercitarse. Estas son mis dos primeras personas que usaré para este ejercicio de wireframing esta app de entrenamiento. También puedes tener acceso a esta plantilla. Lo pondré en las notas como enlace descargable y puedes usar este archivo como punto de partida para tu app de proyecto. Después de eso, rápidamente acabo de crear lo que creo que debería estar en la pantalla o de qué se trata la pantalla, las cinco pantallas que voy a wireframe. Esto debería ser crear la pantalla de la cuenta, luego después de crear tu cuenta, tomas tu pantalla donde añades tu información y objetivos para tu perfil, y selecciona tus preferencias de entrenamiento. Después de eso, la siguiente pantalla será que elijas un entrenamiento de una lista de entrenamientos. Una vez que tengas esas listas de entrenamientos, te llevarán a una pantalla. Una vez que selecciones un entrenamiento, serás llevado a una pantalla de detalles de entrenamiento explicando el entrenamiento. Entonces, cuando hagas clic en el video, empezará a reproducir el video del entrenamiento, y luego empezarás a hacer ejercicio junto con el video. Tan solo quiero conseguir un poco de anotación rápida algunas notas lo que debe tener cada pantalla, solo permítanme mientras la bosquejo. También hice un flujo rápido. Cuando llegues por primera vez a la app, ¿tienes una cuenta? En caso afirmativo, inicias sesión, no crearé ninguna pantalla de inicio de sesión. Esto va a ser estrictamente para las personas que no tienen una cuenta de que voy a hacer el flujo de los wireframes para ese flujo. ¿Tienes cuenta? No. Se crea una cuenta. Después de crear una cuenta, configura un perfil. Elige de una lista de entrenamientos. Tienes esa pantalla de detalle de entrenamiento. Una vez que seleccionaste un entrenamiento, luego ves el entrenamiento, y ese es el final del flujo. 9. Encuadre de Wireframing una pantalla de cuenta: Empecemos a crear nuestro Wireframe. Una de las primeras cosas que hago al crear Wireframes móviles en Balsamiq, es asegurarme de que la pantalla para la que estoy creando el Wireframe sea del mismo tamaño de pantalla que el móvil para el que estaré diseñando. Vamos a crear un nuevo Wireframe, vamos a hacer clic en el signo más, añade nuestro nuevo Wireframe, y vamos a iOS ya que estaremos creando una aplicación para iOS móvil. Ve a iOS, haz doble clic en iPhone para añadirlo al lienzo. Ahora, si seleccionas ese control de la interfaz de usuario, puedes ver a la derecha en el panel de propiedades, es el iPhone 10. Lo que quiero hacer es crear estos conjunto de Wireframes para el iPhone 8. Hagamos clic en iPhone 8. Ahora, vamos a asegurarnos de que nuestro tamaño de pantalla sea del mismo tamaño que un iPhone 8 real. El tamaño real del iPhone 8 es 375 por 667. Agarremos un rectángulo, lo agreguemos al lienzo, y le demos un tamaño de 375 por 667. Ahora, el marco del iPhone detrás debería ser de 429 por 848. Como pueden ver, solo estoy escribiendo estas dimensiones en la sección de tamaño aquí en el panel de propiedades. Alinémoslo para asegurarnos de que nuestro rectángulo esté ahí, en el centro ahí. Ahora que creamos el tamaño de pantalla del iPhone para ser exactamente los mismos tamaños de pantalla que un iPhone 8, vamos a crear un símbolo para que podamos usar el mismo control de interfaz de usuario de Wireframe en todos nuestros mark-ups. Agarremos el marco del iPhone en la parte posterior, agarremos el rectángulo que acabamos de crear también y agruparlos. Antes de crear un símbolo, necesitamos agruparlos. Puedes hacer Comando G para agruparlos o con los dos seleccionados, puedes hacer clic en este botón aquí, el botón Grupo. Una vez que lo agrupas, ves que se vuelve de color púrpura. Ahora a la derecha, verás que tienes la capacidad de convertirlo en un símbolo. Nombremos primero nuestro nuevo símbolo, llamémoslo iPhone 8, y vamos a convertirlo en símbolo. Ahora lo tenemos como símbolo que podemos utilizar a lo largo de todos nuestros mark-ups para este proyecto. ¿Cómo sabemos eso? Si vamos a Símbolos veremos ahora nuestro iPhone 8 como uno de los controles de interfaz de usuario. Empecemos a crear una pantalla de cuenta. Lo que queremos en la pantalla es una imagen para un logotipo, quieres un título, y quieres algunos campos de entrada, términos de servicio casilla de verificación que las personas pueden seleccionar para aceptar las condiciones de servicio. Vamos a querer un botón crear una cuenta y ese tipo de cosas. Empecemos con el logo, solo agarraremos una imagen para eso. Vamos a Quick Add aquí en la parte superior derecha, vamos a dar click en ese campo de entrada y vamos a escribir imagen, y ves que la imagen viene aquí arriba. Vamos a hacer doble clic en eso y eso lo agrega, y vamos a añadirlo a nuestra pantalla. Ya ves que hay una línea azul, te deja saber que está siendo centrada. Ahora vamos a crear un título para nuestra pantalla. Podemos o ir a la parte superior derecha aquí y escribir texto o etiqueta para encontrar lo que queremos, o podemos ir al texto, dar clic en el botón Texto aquí y vemos nuestros controles de interfaz de usuario con respecto al texto. Lo que queremos es una etiqueta, así que arrastremos eso a la pantalla sobre el lienzo. Vamos a nombrar el título, Crea una cuenta, y hagámosla un poco más grande. Aquí a la derecha en el panel de propiedades, hagámoslo 28. Centremos eso también. Ahora, vamos a crear algunos campos de entrada para que los usuarios escriban su nombre, correo electrónico y contraseña para crear su cuenta. Volver arriba aquí a Quick Add es lo que me gusta hacer. Vamos a buscar una entrada, Entrada de texto aquí mismo. Simplemente agarra eso y jalémoslo a lo largo para que quede alrededor del mismo ancho que el título. Vamos a conseguir otra etiqueta encima de esos campos de entrada. Haga doble clic en este texto aquí, hay una etiqueta y llamémosle nombre de pila. Ahora esta etiqueta va con este campo de entrada aquí. Lo que queremos hacer es agruparlos para poder duplicarlos fácilmente, y luego crear más campos de entrada. Esto lo hace mucho más fácil. Seleccionemos el primer nombre, seleccionemos el campo de entrada, y agrupémoslos, y ahora tenemos nuestro control de interfaz de usuario de grupo aquí. Ahora duplicemos eso. Podemos o hacer Comando D o podemos subir aquí a este botón aquí y hacer clic en “Duplicar” y eso duplicará el campo de entrada. Llamemos a este correo electrónico. Corresponde al usuario ingresar su correo electrónico aquí. Hagamos una más, llamemos a esta contraseña para configurar su contraseña. Haga doble clic ahí y luego escriba contraseña, y para salir, hacemos clic en este pequeño ícono de Inicio aquí que lo saca de nuevo del lienzo. Contamos con nuestros campos de entrada para que el usuario cree su cuenta. Ahora, agreguemos términos de servicio. Lo que queremos es una casilla de verificación, así que vamos a subir a esta casilla de verificación Quick Add, vamos a escribir. Aquí, lo tenemos aquí, hagamos doble clic en él, lo agregará, y cambiemos este texto aquí para decir términos de servicio. Ahí vas. Ahora, necesitamos un botón para que una vez que el usuario llene toda esta información haga clic en un botón el cual los llevará a la siguiente pantalla. Vamos a Buttons, y aquí tenemos este primer botón y solo podemos hacer doble clic en eso para añadirlo, y hagámoslo un poco más grande. Cambiemos este texto para crear una cuenta. Hagamos que nuestro botón sea un poco más grande y lo centremos. Esto se ve como una bastante buena baja fidelidad crear una pantalla de cuenta. Sólo una cosa más, digamos que tenemos a alguien que ya tiene una cuenta, no necesitan una cuenta así que solo quieren iniciar sesión. Entonces vamos a crear una opción para eso. Vamos arriba y alrededor, busquemos algo de texto, haga doble clic en eso, baje esto. A ver, ¿qué queremos que diga? Bueno, digámoslo decir, ya tengo una cuenta, y queremos que la acción para que tomen es hacer clic en un botón de inicio de sesión. Vamos a duplicar este texto, y luego vamos a cambiarlo, ponerlo junto a él, y vamos a llamar a este inicio de sesión. Agrupemos estos para que podamos moverlos fácilmente. Hagamos doble clic en este inicio de sesión y cambiemos su color para que sepamos que es un enlace que está subrayado. Crea un enlace de usuario subrayado y cambia el color para decir azul. Haga clic en el “Inicio” para volver a salir, y así ahí lo tienes. Esa es nuestra creación de una pantalla de cuenta, donde tenemos nuestro logotipo en la parte superior, el título de la pantalla creando la cuenta. Contamos con nuestros tres campos de entrada para que el usuario escriba su nombre, su correo electrónico, y contraseña. Contamos con unas condiciones de servicio. Hacían clic en esa casilla de verificación y luego crearían una cuenta. Si ya tienen una cuenta, harían clic en un login, e irán a la pantalla de inicio en lugar de estar aquí en la pantalla de crear una cuenta. Vamos a nombrar esto en realidad. Nombremos aquí nuestro Wireframe que acabamos de crear. Haz clic en “Cambiar nombre” y llama a esto crear una cuenta, y ahí tienes. Empecemos a crear nuestra siguiente pantalla que es la pantalla de configuración del perfil, y lo haremos en el siguiente video. 10. Encuadre de Wireframing la pantalla de configuración de perfil: Ahora vamos a crear nuestra pantalla de configuración de perfiles. En el video anterior, creamos nuestra pantalla Crear una cuenta, por lo que ahora pasaremos a lo que le pase al usuario una vez que haga clic en el botón Crear una cuenta. Haremos una nueva alambrada. Vamos a duplicar este modelo de cable, y vamos a renombrarlo y llamarlo Configuración de perfil. Eliminemos todo lo que tenemos en esta pantalla para que podamos empezar de nuevo. Para nuestra configuración de perfil, el usuario escribe en su nombre aquí en la pantalla Crear cuenta. Eso aparecerá en la pantalla Configuración del perfil. Busquemos una etiqueta, haga doble clic. Llevémoslo al Lienzo. Digamos que, en la pantalla Crear Cuenta, se llamaba Joe. Hagamos esto un poco más grande. Hagamos eso 28. ¿ Eso está centrado? Sí. Lo que queremos que haga el usuario es llenar información en diferentes secciones, por lo que tendremos una sección de género, qué altura son, su nivel de fitness, y qué tipo de entrenamientos les gusta. De esa forma podrás obtener toda esa información de ellos, y eso lo poblará en su perfil y permitirá la app muestre una lista de entrenamientos en función de sus preferencias de entrenamiento. Vamos a crear la pantalla de género. Queremos conseguir otra etiqueta. De hecho, sólo podemos duplicar este. Hagámoslo un poco más pequeño. Vamos a tirar hacia atrás. Vamos a llamarlo Género. Hagamos esto un poco más pequeño. Sigue siendo demasiado grande. Género. Busquemos algunos botones de radio. Escribamos en la radio. Aquí vamos, haga doble clic. Añadamos esto y cambiemos esto para decir Male, esta opción, luego duplicemos eso y llamemos al siguiente Femenino. Esa es nuestra sección de género. Agrupemos esto para que podamos mover estos fácilmente y luego centrarlo. Bueno, no, alineemos a la izquierda estos. El siguiente apartado que queremos es la altura. Vayamos aquí. Copiemos esto. Bueno, no, vamos a verlo. Fue a los 20. Volvamos a salir. Tomemos una etiqueta, haga doble clic, y llamemos a esta sección Altura. Hagámoslo 20 similar al mismo tamaño que Gender, y tomemos algunos campos de entrada de texto para que puedan ingresar su altura en pies y en pulgadas. Escribamos entrada, entrada de texto, haga doble clic en ella. Llevémoslo a la pantalla. Vamos a reducirlo, y luego vamos a agarrar algunos textos. Supongo que podemos hacer una etiqueta también para esto. Haga doble clic en eso. Digamos que este primero es pies. Añadamos aquí algunos puntos. Agrupemos estos. El campo de entrada y el texto de los pies, Comando G. Vamos a duplicar eso, Comando D, o también podrías subir a la parte superior como hemos hecho anteriormente. Vamos a nombrar esta pulgada. Volvamos a salir. Esa es nuestra sección de altura. Agarramos todos estos. Agrupémoslos para que podamos moverlos fácilmente. Esa es la altura. Ahora vamos a crear la sección de nivel de fitness. Vamos a agarrar otra vez una etiqueta. Creo que llegamos a incluir la etiqueta del botón de texto. Haga doble clic en eso y escribamos. Haz este texto a Nivel de Fitness. De nuevo, hagamos de este 20. Encontremos algunos botones de radio. Además, agrega de nuevo ese colon. Botón de radio. Lo que queremos saber es si tienen los niveles principiante, experimentado, o avanzado. Este primero será Principiante. Vamos a duplicar eso. Siguiente diremos Avanzado. Duplicar eso otra vez. Esto dirá Experimentado. Nuevamente, agruparemos estos. Ahora vamos a crear una sección para que seleccionen el tipo de entrenamientos que les gustan. De nuevo, tomemos una etiqueta. Vamos a escribir etiqueta, haga doble clic. Yo diría Entrenamiento Te Gusta. De nuevo, hagamos de este 20. Tengamos lo que serían imágenes de estos entrenamientos. Tendrá una imagen de cardio que pueden seleccionar, pesos que pueden seleccionar, entrenamiento de golpe que pueden seleccionar, o entrenamiento con peso corporal. Busquemos una imagen. Haga doble clic en eso. Veamos real-rapido. Eso es demasiado grande. Sí, un poco demasiado grande. Vamos a mover esto. Añadamos una etiqueta a esto, y llamémosla Cardio. Agrupemos estos para que podamos duplicarlos fácilmente. Vamos a subir esto. Haga clic atrás hacia fuera. Ahora duplicemos esto. Llamemos a este Pesos. Centremos esto. Vamos a duplicar esta otra vez para crear otra fila. Parece que nos vamos a quedar sin espacio. Tratemos de mover todo hacia arriba porque necesitamos un espacio para nuestro botón en la parte inferior. Vamos a subir esto. Mueve este ligeramente hacia abajo. Llamemos a este texto aquí Hit. Puedes hacer clic en el botón de inicio o puedes hacer doble clic en Canvas para volver a salir. Vamos a duplicar esto. Llamemos a esto Bodyweight, que les gusta hacer entrenamiento con peso corporal. Eso se ve bien. Busquemos nuestro botón. Haga doble clic en él. Digamos, el botón debería decir Continuar. Hagamos el botón un poco más grande y vamos a centrarlo. Esa es nuestra pantalla de Configuración de Perfil. En la película anterior, creamos la pantalla Crear una cuenta. El usuario rellena esto, escribe su nombre, su nombre aparecerá en la configuración del perfil, y luego seleccionan sus opciones para seguir configurando su perfil, cual será seleccionar su género, agregar su altura, qué nivel de fitness son, y el tipo de entrenamientos que les gusta, y luego hacen clic en “Continuar”. A partir de ahí, una vez que hagan clic en “Continuar”, serán llevados a la siguiente pantalla que haremos en el siguiente video, que será una pantalla Lista de entrenamientos. Empecemos a crear esa pantalla en el siguiente video. 11. Encuadre de alambre de la lista de pantalla de ejercicios: Empecemos a crear una lista de pantalla de entrenamiento. Esta pantalla será donde los usuarios podrán ver una lista de entrenamientos por categoría. Pueden buscar entrenamientos o ejercicios específicos que deseen completar, como burpees o tal vez algunos ejercicios de piernas. Habrá una barra de pestañas de navegación de Bodman que permitirá a los usuarios navegar hasta la pantalla de inicio, la pantalla de entrenamiento, que es lo que estamos creando en este momento, y una pantalla de perfil. Empecemos a crear una adición de elementos para esta nueva pantalla. Lo primero que vamos a hacer es agregar un nuevo modelo alambrico. Vamos a llamarlo lista de entrenamientos. Agarremos nuestro símbolo de iPhone 8, así que haz clic en el botón “Símbolos” y podemos hacer doble clic en el símbolo “iPhone 8" para añadirlo a nuestro lienzo. Ahora empecemos a añadir algunos elementos. En un principio lo primero que queremos es la barra de búsqueda. Digamos que buscamos un cuadro de búsqueda, aquí está, haga doble clic. Añadamos eso en la parte superior de la pantalla y movámoslo a través de todo el ancho. El siguiente ítem que queremos es una barra de botones, donde los usuarios pueden usar esto para navegar a diferentes categorías. Barra de botones, llevemos eso a este lienzo, y también extendamos eso por la pantalla. Vamos a darle algunas categorías, así que digamos peso corporal, HIIT, cardio, y pesas. Si separas aquí cada una de estas palabras con una coma, al hacer clic fuera, agregará una barra de botones, así que ahí tenemos nuestra barra de botones. Ahora vamos a crear una lista de imágenes que mostrará una lista de entrenamientos en base a la categoría en la que el usuario hizo clic en la parte superior. Si hacen clic en peso corporal mostrará una lista de ejercicios de peso corporal, HIIT, mostrará una lista de ejercicios HIIT, y así sucesivamente. Vamos a crear una imagen. Digamos que estamos en la categoría de peso corporal ya que eso está seleccionado. Vamos a crearlo, encontremos una imagen. Bajemos eso, y hagamos de eso un 130 por 80. En lugar de tratar de averiguar qué debe decir cada entrenamiento, solo agreguemos una línea de texto. Busquemos texto. Hagamos un bloque de texto. Entonces podemos cambiar eso fácilmente aquí, así, vamos a centrarlo, y agruparlo. Ahora tienes la imagen y el nombre de ese entrenamiento o ejercicio. Agrupemos eso. Ahora duplicamos eso. Aquí hay otro ejercicio. Dejaré decir que esto es quizá burpees y esto son pull ups por ejemplo. Agarremos esos y duplicemos, comando D, sostenga el botón arriba que hemos estado usando, y espaciemos esos hacia fuera. Hagámoslo una vez más, mando D. Subiremos un poco estos. Esa es nuestra lista de imágenes centradas. Cuando el usuario hace clic en HIIT, la idea es que estas imágenes se llenen con todos los ejercicios o entrenamientos que están etiquetados con HIIT, lo mismo con cardio, y pesos. Estos se poblarán en base a aquellas categorías a las que se haga clic. Por último, vamos a crear una navegación por pestañas. Navegación de tabuladores, tomemos un rectángulo como fondo para nuestra navegación de pestañas. Agarramos algunos iconos. Queremos icono con etiqueta, escribimos icono, vamos a obtener icono con etiqueta. Añadamos eso y busquemos, así que en el panel de propiedades aquí y en la sección de iconos, si buscas un ícono y dices casa, agregará el ícono de inicio. Queremos que eso sea pequeño. Digamos a casa para este ícono, duplicemos eso. Cambiemos esto para decir, entrenamientos. Para eso, cambiemos el ícono, tal vez un icono de estrella. Vamos a duplicar eso otra vez. Llamemos a este perfil, o en realidad llamémoslo mi perfil. Ese tal vez sea una persona por esto. Ahí vas. Contamos con nuestra barra de pestañas con nuestras diferentes secciones. Contamos con nuestras imágenes, las cuales se poblarán en función de la categoría seleccionada, y tenemos nuestra barra de botones, que los usuarios pueden hacer clic en diferentes categorías, y tenemos nuestra barra de búsqueda en la parte superior. En la siguiente pantalla, lo que haremos es, crearemos la pantalla de detalles del entrenamiento. Digamos que un usuario está en el peso corporal, hacen clic en esta imagen, dicen que es un entrenamiento de burpee, hacen clic en eso y les llevará al detalle de burpees, esa pantalla específica de detalle de ejercicio o entrenamiento. Crearemos esa pantalla en el siguiente video. 12. Encuadre de Wireframing la pantalla de detalles de ejercicios: Empecemos a crear nuestra pantalla de detalles de entrenamiento. En esta página se mostrarán los detalles del ejercicio o entrenamiento seleccionado que hayas elegido. Por ejemplo, si seleccionaste burpees en la lista anterior de pantalla de entrenamiento, mostrará ese entrenamiento y detalles sobre ese entrenamiento, como la descripción del entrenamiento, etc. Empecemos a crear y agregar elementos para esta pantalla. Primero duplicemos nuestra lista de pantalla de entrenamiento para que ya tengamos nuestra barra de pestañas en la parte inferior, la cual necesitaremos para esta pantalla de detalles del entrenamiento. Seleccionemos esto y hagamos clic en el botón “Duplicar” en la parte superior, lo que creará nuestra nueva pantalla. Vamos a renombrarlo y llamarlo detalles de entrenamiento. Contamos con nuestra barra de pestañas. Eliminemos todos los demás elementos. Lo que necesitaremos para esta pantalla inicialmente será el botón de flecha atrás. Busquemos iconos. Vamos a agregar rápido y vamos a dar clic en “Icon”. No necesitamos un ícono con etiqueta, solo queremos el ícono así que hagamos doble clic en eso. Añádalo al Lienzo. Busquemos flecha. Queremos una flecha hacia atrás, solo usemos esta flecha. Tenemos una flecha aquí. Ahora busquemos un título para nuestra pantalla. Llamemos a esta clase detalles. Es muy grande así que hagámoslo mucho más pequeño. Hagámoslo como 16 píxeles, y vamos a centrarlo. Vamos a duplicar esto y vamos a tener un título para nuestro entrenamiento o ejercicio. Llamemos a este título de entrenamiento. Hagamos esto un poco más grande. Vamos a duplicarlo en tamaño, que sea 32 píxeles y centrar eso. Entonces vamos a tener una imagen, la imagen principal para el entrenamiento. Volvamos aquí otra vez. Aquí, cuadro de imagen, estira eso a través. Ahora vamos a querer una descripción para que la gente sepa de qué se trata este entrenamiento. Vamos a duplicar este. Vamos a dimensionar esto hasta 18. Solo llamemos a esta descripción y centrémonos en eso. Vamos a conseguir algo de texto. No sabemos qué queremos que diga. Solo vamos a conseguir un bloque de texto solo para que los usuarios y las partes interesadas sepan que aquí es donde irá nuestra descripción del entrenamiento. No sabemos qué dirá el texto final solo haga orden por ahora. Vamos a centrar eso. Debajo de eso queremos un botón. Acabamos de hacer clic en “Botones” aquí y vamos a arrastrar esto. Queremos que este botón diga inicio. Al hacer clic en este botón, esto iniciará el video. Te llevará a la pantalla de video de entrenamiento que es donde puedes empezar a reproducir el video, empezar a jugar el entrenamiento real. Ahí lo tienes. Una vez que vayas a la lista de entrenamientos, haces clic en un entrenamiento, te llevas a los detalles del entrenamiento. Tienes una flecha para volver atrás, tienes unos detalles de clase para hacerte saber dónde estás en la app, el título de entrenamiento, una imagen, tienes una descripción, título de descripción. En realidad, solo para asegurarnos de que salimos alineamos esto, vamos a la izquierda alinear eso. Tenemos un título de descripción y tendremos bajo eso la descripción real del entrenamiento o ejercicio, y luego tenemos nuestro botón de inicio. En el siguiente video, trabajaremos en la pantalla de video de entrenamiento, que es donde realmente reproducirás el video, puedes terminar el video. Mostrará la duración del video, cuánto tiempo queda en ese entrenamiento. Empecemos a trabajar en esa pantalla. 13. Encuadre de Wireframing la pantalla de video de video de entrenamiento: Empecemos a crear una pantalla de video de entrenamiento. Esta pantalla mostrará un video del entrenamiento o ejercicio que has elegido. Se mostrará el tiempo de duración del video, y tenemos un botón para que termines el entrenamiento. Empecemos a crear y añadir elementos para esta pantalla. Vamos a crear un nuevo wireframe, y llamémoslo pantalla de video de entrenamiento, y busquemos un símbolo de iOS, iPhone 8 que creamos antes. Empecemos a añadir nuestros elementos a esta pantalla. Esta es una pantalla de video de entrenamiento en la pantalla anterior. En la pantalla de detalles del entrenamiento se puede iniciar el video. Entonces, al hacer clic en el botón “Inicio”, te llevará a esta pantalla aquí la cual reproducirá el video real. Busquemos reproductor de video, agreguemos eso. Hagámoslo un poco más grande. Céntrela y agreguemos un título, y esto mostrará la duración, me refiero a cuánto tiempo queda en el video mientras estás trabajando. Digamos ocho minutos y 34 segundos. Hagamos eso un poco más grande. Hagamos eso 72, y movamos un poco el video hacia arriba. Hagamos este 14. Vamos a crear un botón que nos dará la capacidad de terminar el entrenamiento. Busquemos un botón. Hagamos doble clic en eso, y llamemos a esto End Workout. Hagámoslo un poco más grande, y vamos a centrarlo, y ahí lo tienes. Tenemos que añadir una imagen. Añadamos una imagen en este video. Esto mostrará nuestra imagen. Digamos que querías agregar una imagen real a este cuadro de imagen. Podrías hacer eso haciendo clic en el signo más, y en tu computadora, encuentra un video. Tengo esto. Tengo algunos videos aquí. Añadamos éste. Debo haber subido esto antes, así que digamos existente, o usemos un nombre. Aquí vamos con nuestra imagen, y queremos mantener esta baja fidelidad. Entonces lo que podemos hacer es hacer clic en el “Sketch it” y va a dar el campo bosquejo, y ahora tenemos nuestro video ahí. Si quieres recortar esta imagen, di solo tienes que hacer clic en este botón “Recortar”, y puedes recortarla así. Quieres hacerlo más pequeño, quieres más grande, ese tipo de cosas. Es así como puedes agregar algunas imágenes y aún así mantener una baja fidelidad. Hacemos clic en el video del botón “Play” para poder jugar, el tiempo de duración aquí en la parte inferior, y si tenemos que terminar nuestro entrenamiento temprano, terminamos el entrenamiento. Termina el entrenamiento, te llevará de vuelta a la pantalla de detalles del entrenamiento. Esa es nuestra pantalla de video de entrenamiento. Lo que haremos a continuación es crear un prototipo de baja fidelidad utilizando todas estas pantallas para que podamos entregarlo a interesados o usuarios para que prueben y vean si les gusta el flujo de la misma. Trabajaremos en eso en el próximo video. 14. Enlace y presentación en Balsamiq: Aquí estamos. Después de crear nuestra serie de wireframes o maquetas, ahora estamos listos para vincularlos para crear un prototipo. En este video, estaremos hablando de vincular nuestros wireframes y después de vincularlos, crear un prototipo y presentarlos a los miembros de su equipo de diseño, sus usuarios de pruebas, o a sus stakeholders en el proyecto. Empecemos. En los videos anteriores, creamos un Wireframe de Crear una Cuenta, Perfil de Configuración de perfiles, Lista de wireframe de Entrenamiento, un wireframe Detalles de Entrenamiento y un Wireframe de Video de Entrenamiento. Empecemos a vincularlos juntos para que podamos crear nuestro prototipo de baja fidelidad. En nuestra pantalla Crear una Cuenta, tenemos el título, el nombre, el correo electrónico, las entradas de texto de contraseña, términos de servicio en los que el usuario hará clic y luego harán clic en el botón “Crear una Cuenta”, que los llevará a la pantalla de Configuración de Perfil. Para enlazar esto a la pantalla Configuración del perfil, vamos a la sección Enlace en el panel Propiedades. Después de seleccionar el botón y verás tenemos una lista de maquetas de estructura alambres que creamos, con sus nombres que también ven aquí a la izquierda, también en esta zona. Hacemos clic en Configuración de Perfil. Ahora se vinculará a la pantalla de Configuración de Perfil. También tienes estas otras opciones a continuación, Enlace a una dirección web, Enlace a una nueva estructura alambres, Enlace a un duplicado de este modelo alambres. Volver atrás (en pantalla completa), Sin enlace. No nos vamos a preocupar por estas opciones de fondo aquí. Solo vamos a usar las mejores opciones aquí. Ahora vamos a la pantalla de Configuración de Perfil. Aquí tenemos nuestro nombre que ponemos en la pantalla Crear una Cuenta, la sección de género, la altura, que tú usuario llenarás, su nivel de fitness y los entrenamientos que te puedan gustar. Seleccionarían qué tipo de entrenamientos les gusta típicamente y luego harán clic en el botón Continuar. Seleccionaremos el botón Continuar, volveremos a la sección Enlace en el panel Propiedades y lo vincularemos a Lista de entrenamientos. Encontremos eso, Lista de pantalla de Entrenamiento. De acuerdo, ahora, iremos a la pantalla Lista de Entrenamiento. Tienes que buscar opción. Tienes tus categorías de entrenamientos en los que el usuario puede hacer clic para ver una lista de entrenamientos basados en esa categoría y tenemos la Barra de Tab en la parte inferior. Cuando el usuario seleccione un entrenamiento, que le guste, serán llevados a la pantalla Detalle de Entrenamiento de ese entrenamiento. Seleccionamos un entrenamiento, volvemos al panel Propiedades y lo vinculamos a la pantalla Detalle del Entrenamiento y ves que aparece ese pequeño ícono, para hacernos saber que está vinculado a otra pantalla. Ahora vamos a nuestra pantalla Detalle de Entrenamiento. Una vez que el usuario haga clic en ese entrenamiento que seleccionó, irás a una pantalla Detalle de Entrenamiento, la cual tiene el título del entrenamiento, una imagen del entrenamiento, una descripción del entrenamiento y ellos harán clic en “Inicio”, para comenzar a ver el video e iniciar el entrenamiento. Nuevamente, vayamos al panel Propiedades y encontremos ese wireframe para enlazarlo, que se llamará la pantalla Video de Entrenamiento y ahora por último, usemos también el botón “Atrás” y vamos a enlazar eso de nuevo a la pantalla Lista de Entrenamiento. Si bien estamos en ello, hagamos también nuestras Tabs. Nuestra ficha puede ir a Lista de entrenamientos. Hagamos lo mismo en la pantalla Detalle de Entrenamiento, con la Tab, que volverá a Lista de Entrenamientos y nuestra última pantalla es el Video de Entrenamiento. Una vez que el usuario haga clic en Inicio, irán a la pantalla Video de Entrenamiento, mostrará el video, la duración del video y su capacidad para finalizar el entrenamiento. Aquí, nos limitaremos a enlazar con Terminar el Entrenamiento, que te llevará de vuelta a los Detalles del Entrenamiento. De acuerdo, vamos a vincular esto, te llevará de vuelta a Detalles de Entrenamiento, y ahí lo tienes. Hemos enlazado todas nuestras pantallas. Ahora que tenemos por todos nuestros alambres enlazados entre sí, ahora se convertirán en un prototipo clicable, una vez que los exportemos. Ahora, queremos exportarlos como PDF y para ello, quieres ir a la parte superior y hacer clic en “Archivo” y seleccionar “Exportar a PDF”. Haga clic en eso y verá las opciones de cómo desea exportar sus alambres. ¿ Desea seleccionar Todos los alambres? ¿ Tan solo quieres exportar el Alambre Actual? ¿ O simplemente deseas seleccionar un Conjunto específico de Alambradoras? Ahora no queremos exportar todos los wireframes, porque eso exportaría la Persona, el Storyboard y el User Flow. Simplemente queremos seleccionar la opción, “Un conjunto de alambres”. Hacemos clic en eso y ahora seleccionaremos los alambres que queremos exportar. Queremos Crear una Cuenta, Configuración de Perfil, Lista de Entrenamientos, Detalles del Entrenamiento y Video de Entrenamiento. Después de eso, normalmente selecciono Optimizar para su visualización en pantalla. Después de eso, selecciono Mostrar pistas de vinculación y Agregar nombres de estructura alambres. De acuerdo, ahora estamos listos para exportar a PDF. Simplemente hacemos clic en ese botón. Otra opción que tenemos, es no sólo exportar estos wireframes a un PDF, sino presentar estos maquetas, resolución insoluble a pantalla completa. Si no querías que los stakeholders, los miembros del equipo de diseño, o los usuarios de prueba, lo probaran realmente por su cuenta, pero en cambio, quieres probar el prototipo para ellos, harás clic en la “Presentación a pantalla completa” aquí en la parte superior derecha y que mostrará tu maqueta en el modo de pantalla completa. Como ves, a medida que vuelvas sobre áreas clicables, nos mostrará una pista girando este tono de rojo y que se puede hacer clic en el botón. Haga clic en el activo de botones para hacer clic a través del modo demo y presentación. Para salir del modo de pantalla completa, harás clic en el botón “Escape” y eso te llevará de vuelta a tu conjunto de wireframes. Esas son las dos formas de presentar tus wireframes, como una presentación a pantalla completa o exportarlos como un PDF clicable. En la siguiente lección, repasaremos el prototipo PDF que creamos. 15. Presentación de Prototipos de en Balsamiq: Creamos nuestro archivo PDF prototipo en la lección anterior. Echemos un vistazo a ese expediente. Este es el prototipo de baja fidelidad en formato PDF que enviarás una prueba usuarios, miembros de tu equipo de diseño, o partes interesadas de tu proyecto. Al mirar este archivo, estamos en la pantalla de crear una cuenta. Herr los usuarios ingresarían su nombre, correo electrónico y contraseña. Después pincharían en el botón “Crear una cuenta”. Ahora estamos en la pantalla de configuración del perfil. Los usuarios ingresarán si son masculinos o femeninos, su estatura, su nivel de fitness, y el tipo de entrenamientos que les gustan y luego harán clic en “Continuar”. Aquí estamos en la lista de pantalla de entrenamiento. Esta pantalla descompone los entrenamientos en la app en categorías con esas categorías siendo peso corporal, HIIT, cardio, y pesas. Cualquiera que sea la categoría que seleccionaron, área de contenido principal se muestra una lista de entrenamientos pertenecientes a esa categoría. Digamos que seleccionas un entrenamiento y luego te llevarán a la pantalla inicial para ese entrenamiento donde verás el título de ese entrenamiento, una imagen de ese entrenamiento, una descripción del entrenamiento, y un botón de “Inicio” donde si haces clic en él, empezará a reproducir el video del entrenamiento. En la parte inferior de la pantalla, tenemos la barra de pestañas donde los usuarios pueden navegar a la pantalla de inicio, pantalla de entrenamiento, y ver su perfil. En la parte superior hay un botón de flecha donde los usuarios pueden volver a la pantalla anterior. Vamos a hacer clic en “Inicio”, y ahora te llevarán a la pantalla de video de entrenamiento. Ahora estás en la pantalla de video de entrenamiento, que muestra un reproductor de video, el tiempo transcurrido del video el cual contará atrás a medida que se reproduzca el video para mostrar al usuario cuánto tiempo queda en el entrenamiento, y un final el botón de entrenamiento para que los usuarios hagan clic por si no pueden terminar el entrenamiento por alguna razón. Este es el prototipo PDF. Así sería el prototipo en formato PDF si lo enviaras a probar a los usuarios, a miembros de tu equipo de diseño o a las partes interesadas del proyecto para obtener comentarios de ellos. 16. Acerca de el proyecto del Adobe XD: Para este proyecto, vamos a crear un conjunto de alambradas alrededor de cinco. Después toma esos wireframes y haz un prototipo de baja fidelidad con ellos. El proyecto puede ser una aplicación móvil de su elección. Tengo un proyecto de ejemplo que creé para el curso. Durante el curso, repasaré los pasos que tomé para crear esos wireframes y prototipos para que veas cómo lo hago. Puedes usar esto como plantilla para tu proyecto. No necesitas ninguna experiencia previa con el software Adobe XD, ya que rápidamente daré una visión general de cómo usarlo a lo largo del curso. El proyecto final es algo que puedes usar en tu cartera para mostrar a los clientes, a miembros de tu equipo de diseño, o incluso a los empleadores potenciales. Cuando miras las descripciones de puestos del diseñador UX, ser capaz de wireframe y prototipo es muy a menudo en esas descripciones. Esta es una habilidad que realmente te ayudará en tu trabajo actual o si estás buscando ese próximo UX Job. Adobe XD es una herramienta muy popular que mucho del departamento de UX para usar hoy en día. 17. Personas y flujo de usuarios en Adobe XD: Antes de empezar a crear nuestros wireframes, creé unas personas de usuario conocedores y un flujo de usuario para mostrarte un poco sobre los documentos que suelen formar parte del proceso de diseño. Hice dos personas, una masculina y una femenina. Ambas personas fueron desarrolladas para que cuando estás pasando por el proceso de wireframe, lo estés haciendo pensando en usuarios específicos. Estas personas se llaman Jennifer y Chris. Estas personas estarán disponibles para su descarga para que las utilices como plantilla cuando empieces a trabajar en tu proyecto de wireframing. Debajo de las personas, tenemos un ejemplo de flujo de usuario. Esto nos ayuda a entender el viaje que tomará el usuario cuando estemos creando nuestro conjunto de wireframes. En este viaje, el usuario creará una cuenta, configurará un perfil de usuario, elegirá una lista de entrenamientos; habrá una pantalla de detalles de entrenamiento, y luego el usuario verá un video del entrenamiento. Este es nuestro flujo de usuario y estaremos creando cinco pantallas basadas en este flujo. Entonces los vincularemos para crear un prototipo de baja fidelidad que pueda ser probado por los usuarios. 18. Descripción de Adobe XD: En este video, repasemos rápidamente las herramientas en Adobe XD. El montaje es similar a otras herramientas de diseño como Sketch y Figma. A la izquierda, tienes las herramientas de diseño. Contamos con la herramienta de selección, la herramienta de rectángulo, la herramienta de elipse, y la herramienta de polígono donde se pueden crear formas en el lienzo. Tenemos la herramienta de línea por debajo de eso junto con la herramienta de lápiz. Debajo de eso tenemos la herramienta de texto, que nos permite agregar texto a nuestros diseños. Bajo eso tenemos la herramienta de mesa de trabajo. Cuando se selecciona, entonces vemos a la derecha todas las diferentes mesas de trabajo que podemos utilizar para nuestros diseños. Hay mesas de trabajo para diseños móviles, tabletas, escritorio web, y mesas de trabajo de redes sociales para crear diseños para Instagram y Facebook, y luego mesas de trabajo también para crear diseños para el Apple Watch. Debajo de eso tenemos la herramienta de zoom. En la parte inferior izquierda tenemos iconos que representan bibliotecas, capas, y plug-ins. Las bibliotecas son donde viven los colores, los estilos de carácter y los componentes para tu proyecto. Capas muestran las diferentes capas de nuestros diseños y plugins es donde agregamos nuevos plugins a nuestro proyecto o visualizamos plugins que actualmente tenemos en nuestro proyecto. En el centro superior tienes un desplegable donde puedes cambiar el nombre de tu proyecto. En la parte superior izquierda hay secciones para diseño, prototipo, y compartir. la sección de diseño se muestran nuestras herramientas con el fin de crear nuestros diseños. El apartado prototipo nos permite crear un prototipo de nuestros diseños. Por lo que si seleccionas una mesa de trabajo, verás resaltada en azul y aparecerá una flecha. Esta flecha nos da la capacidad de hacer clic y arrastrarla a otra mesa de trabajo. Después de hacer clic y arrastrar la flecha para vincularla a otra mesa de trabajo, el panel de propiedades de la derecha se activará. Bueno, ahora tenemos opciones sobre cómo se activará el enlace a esa otra pantalla. ¿ Será un toque, un drag, el tiempo, las teclas y el gamepad, o la voz? Debajo de eso puedes seleccionar el tipo de transición que quieras. Tienes auto-animación, superposición, mesa de trabajo anterior, reproducción de audio, y reproducción de voz. Debajo de eso tenías la sección de destino, que es donde decides qué mesa de trabajo es la mesa de trabajo de destino. Se puede cambiar qué mesa de trabajo se vinculará desde aquí. Bajo eso tenemos los diversos tipos de animaciones que podemos seleccionar, como disolver, deslizarse o empujar. El apartado de compartir nos permite crear un enlace para que tu prototipo sea compartido con otros. Puede seleccionar la configuración de la vista como revisión de diseño, desarrollo, presentación, pruebas de usuario, o personalizado. Debajo de eso puedes otorgar acceso a cualquier persona con el enlace solo invitó a personas o a cualquier persona con una contraseña, y después de realizar esas selecciones, harás clic en el botón crear enlace, que luego creará un enlace que pueda ser compartido. En la parte superior derecha tienes iconos para invitar a colaboradores a acceder y editar tu documento. Vista previa del dispositivo, donde puedes previsualizar diseños en un dispositivo conectado a USB. Después tienes el botón de presentación de escritorio donde puedes previsualizar e interactuar con tu diseño. A la derecha tenemos el panel de propiedades. Entonces, cuando seleccionas un elemento o agregas un elemento al lienzo, el panel de propiedades a la derecha se activa. Como puedes ver, puedes alinear tus artículos en la sección superior aquí. Debajo de eso tienes la opción de repetir cuadrícula y crear formas usando herramientas booleanas a la derecha de eso. Debajo de eso tienes una sección donde puedes crear componentes para tu proyecto. Después tienes una sección donde puedes transformar tus elementos de diseño. Tienes una sección de diseño donde puedes hacer que los elementos de tu diseño respondan. Tienes una sección para tu texto donde puedes cambiar la fuente, el color de la fuente, el tamaño de la fuente, etc. Esa es mi visión general rápida para Adobe XD. Es realmente una gran herramienta para usar para el diseño de UX y UI. 19. Crear una pantalla de cuentas en Adobe XD: Empecemos a crear nuestros alambres. Antes de empezar, XD junto con otras herramientas de diseño te dan la opción de crear un alámbrico activos o elementos tú mismo, o puedes descargar un kit de interfaz de usuario de estructura alámbrica con elementos prefabricados y simplemente personalizarlos a partir de ahí. Vamos a ir a la descarga de una ruta de kit de interfaz de usuario de wireframe en este curso. Hace que la tarea de hacer wireframes sea mucho más rápida y mucho más fácil. Para descargar un kit de estructura alámbrica en XD, iría al menú Archivo, y luego iría a Obtener kits de interfaz de usuario, y seleccionaría “Wireframes”. A partir de ahí te llevarán a una página web donde podrás descargar el kit wireframe. Haga clic en el enlace de descarga de kits, que descargará tanto las versiones web como móviles del kit wireframe. Una vez que las tengas descargadas, encuentra esas descargas en tu computadora y luego haz doble clic en el archivo XD de la versión móvil. Una vez que esté abierto, verá una amplia variedad de elementos de estructura alámbrica que se pueden utilizar desde formularios de registro de muestra, pantallas de perfil, filtros y búsqueda, y mucho más. Antes de empezar a usar esto, me gustaría mantener mis elementos de estructura alambres lo más baja posible. Significado, en lugar de tener esta gama de colores azul me gusta mantenerlo todo escala de grises para que color no sea una distracción a la hora de diseñar los wireframes, o no es una distracción así para los usuarios cuando están probando nuestro eventual prototipo. Cambiemos el esquema de color de este kit de estructura alambres a escala de grises. En la parte inferior izquierda verás un conjunto de iconos para bibliotecas, capas y plugins. Haz clic en el icono de la biblioteca, y verás que aparece un nuevo panel. Este panel mostrará los estilos de carácter del kit de UI, estilos de color, etc. Subiremos a los colores y si está cerrado puedes abrirlo con solo hacer clic en la flecha y verás los estilos de color para el kit. Cuando cambiemos los colores aquí, hará todos los cambios de color necesarios a lo largo del documento. Cambiemos el primer color. Si haces clic derecho en el color, aparecerá un menú con la opción editar color. Seleccionemos eso. Ahora, solo jalamos nuestro color que ves actualmente es en azul. Nosotros tiramos eso al equivalente en escala de grises, que estará justo aquí. Ahora tenemos aquí nuestro color gris más oscuro, y empezará a hacer los cambios de color a lo largo de nuestro documento. Alejemos un poco para que a medida que esos colores se actualicen los podamos ver. Ahora, vamos a agarrar nuestro segundo color azul, vamos a hacer clic con el botón derecho, haga clic en “Editar”, vamos a tirar este hacia abajo a la derecha por aquí. Como ves, nuestros colores están cambiando y cambiando. Agarremos nuestro color azul claro aquí y bajemos eso hasta aquí. Nuevamente, ves que nuestros alambres están cambiando la escala de grises con cada cambio en este último color azul claro, podemos cambiar y simplemente agregarlo aquí. Tenemos nuestro paladar en escala de grises. Algunos de estos colores tendrán que actualizarse manualmente y podemos hacerlo más adelante si realmente usamos algo en esta sección de menú o en esta sección de mensajes o incluso estos popopovers. Empecemos a crear nuestra pantalla de crear una cuenta. Esa será la primera pantalla que crearemos en nuestro conjunto de wireframes. Vamos a dar click, volvamos a nuestro documento de wireframing, y vamos a añadir una mesa de trabajo. Si presionas “A” en tu teclado verás el panel de la derecha, te mostrarás una variedad de mesas de trabajo que puedes crear desde móvil, tablet, escritorio web, redes sociales, etc. Hagamos iPhone X para nuestros wireframes y vamos a arrastrar esto hacia abajo aquí debajo de nuestro flujo de usuarios. Vamos a acercar un poco. Esta será nuestra crear una pantalla de cuenta con la que empezaremos, llamemos realmente a esta mesa de trabajo, creemos una cuenta. Empecemos a agarrar algunos elementos de nuestro kit wireframe móvil que descargamos. Volvamos a cambiar a cables móviles y agarremos una sección donde se alojaría nuestro logotipo. Tenemos una sección de registro que es lo que queremos, nuestra pantalla de crear una cuenta será sobre que el usuario se inscriba. Podemos agarrar esta sección aquí sólo vamos a copiarla. Vuelve a nuestros alambres y podemos simplemente pegarlo. Digamos que aquí es donde irá nuestro logo. Volvamos a los cables, y busquemos crear una sección de cuenta. Vamos a acercar. Esto se ve bastante bien. Vamos a agarrar esto crear una cuenta y vamos a seleccionar estos cuadros de entrada también. Volvamos a nuestros cables, kit de estructura alámbrica y busquemos una sección de registro donde podamos crear una cuenta, campos de entrada y el crear un encabezado de cuenta. Agarremos este encabezado aquí, bueno, sólo podemos agarrar este encabezado aquí. Volvamos a nuestros alambres y solo agreguemos ese centro. Volvamos a los cables y encontremos algunos campos de entrada. Creo que esto es bueno aquí. En realidad, podríamos simplemente agarrar eso crear una cuenta. Volvamos a wireframes y peguemos estos campos de entrada aquí, y queremos nombre completo, correo electrónico y contraseña, y confirmemos contraseña. Eso es perfecto. Volvamos atrás y busquemos unas condiciones de servicio y tenemos una aquí. Volvamos atrás y peguemos eso. Añadamos eso a continuación y asegurémonos de que eso esté bien centrado, y busquemos un botón donde podamos tener un botón Crear una Cuenta en el que el usuario haga clic una vez que haya rellenado el formulario. Déjame sólo agarrar este botón Continuar aquí y vamos a añadir eso. Cambiemos esto para crear una cuenta, y digamos que queremos un botón para un usuario si ya tienen una cuenta pueden simplemente iniciar sesión. Vamos con esto, ya tenemos un inicio de sesión de cuenta, y vamos a agarrar esos elementos y vamos a pegarlos en nuestro documento. Vamos a mover algunas cosas aquí arriba. Vamos a mover estos hacia arriba. Términos de servicio, crear una cuenta. Aquí vamos. A ver lo rápido que fue eso. Con elementos prefabricados en kit de interfaz de usuario de wireframe ya hecho, hizo muy fácil crear nuestra primera pantalla wireframe. Tan solo cuestión de cambiar los colores a baja fidelidad si quieres eso, volviendo al kit de interfaz de usuario de estructura alámbrica y copia y pega en los elementos que necesitas pegarlos en tu Wireframe Canvas. Esta es nuestra pantalla de crear una cuenta. Contamos con el logo, crear un encabezado de cuenta. El usuario introducirá su nombre completo, su correo electrónico, una contraseña, y confirmará su contraseña y luego creará una cuenta. Si ya tienen una cuenta, vamos a bajar eso. Si ya tienen una cuenta entonces harán clic en login y serán llevados a una pantalla de inicio de sesión. No vamos a estar usando ese flujo. El flujo que estaremos haciendo ahora mismo es solo crear una cuenta que es aquí donde decimos que empezamos, ¿tienes cuenta? No. Crea una cuenta, configura tu perfil, escoge de una lista de entrenamientos, detalla detalles, etc. Este es el flujo que vamos con aquí y la primera pantalla de ese flujo es crear una cuenta, la cual tenemos aquí. Nuestra siguiente pantalla que crearemos es configurar tu pantalla de perfil. Eso haremos en el siguiente video. 20. Configuración de perfiles en Adobe XD: Vamos a crear nuestra siguiente pantalla, que será la pantalla de configuración de perfiles. Vamos a crear una nueva pantalla, vamos a duplicar nuestra pantalla Crear una cuenta pulsando Comando D, y vamos a renombrar esto a Configuración de perfil, y vamos a deshacernos de algunos de los elementos que están aquí para que podamos empezar de nuevo. Guardémoslos por ahora porque puede que terminemos necesitándolos. Por lo que el usuario creará una cuenta rellenando su nombre, correo electrónico y contraseña para luego crear una cuenta. Digamos que crearon una cuenta, su propia configuración de perfil y su nombre aparecerá en la parte superior. Entonces digamos que el nombre es John Doe. Vamos a centrar esto. En las propiedades aquí, verás que puedes alinear a la izquierda, centrar o alinear a la derecha, y centrémonos alinear a John Doe, y luego pongámoslo aquí. Como puedes ver, al hacer clic en un elemento, aquí tienes el panel de propiedades para ese elemento a la derecha. Eso lo tenemos aquí. Veamos cuál es el tamaño de la fuente. Mantengámoslo a los 20, eso debería estar bien. Aquí en la pantalla de configuración de perfiles, queremos una sección para que los usuarios puedan seleccionar su género, su altura, su nivel de aptitud, y puedan seleccionar el tipo de entrenamientos que les gusta, y luego harán clic”, Continuar”. Tenemos el nombre de la persona aquí. Añadamos una sección donde puedan seleccionar su género. Volvamos a los cables, los wireframes móviles y vayamos hacia fuera. Veamos si podemos encontrar algo con [inaudible] solo agarra este botón de radio aquí y peguemos eso. Digamos que esto dice, macho y luego duplicemos eso, Comando D y digamos esto dice, hembra. De acuerdo, vamos a agarrarlos a los dos. Vamos a moverlas un poco y vamos a duplicar este John Doe para que podamos darle un título a esta sección. Llamemos a este género y hagámoslo un poco más pequeño. Hagámoslo 18 punto. Volvamos a mover estos hacia atrás. Demos a esto un colon aquí al final, y cambiemos el color de esto porque no quiero que estos dos colores sean iguales. Hagamos esto un poco más ligero. Volvamos a los cables y veremos que aquí tenemos todos nuestros colores. Vamos a agarrar un color. Podemos copiar este color hexadecimal aquí. Volvamos atrás y agreguemos ese color en la sección de relleno. Ahí vamos. Ahora si vamos a los colores de la biblioteca, no tenemos nada en nuestra sección de colores. Empecemos a añadir esos a nuestros colores de documentos. Vamos a hacer doble clic en esto y vamos a agregar ese color, así que ahora tenemos este color agregado. Vayamos aquí, y vamos a añadir este color. Ahora solo podemos hacer click en estos colores a medida que pasamos para agregarlos cuando los necesitemos. De acuerdo, entonces tenemos nuestra sección de género. Agrupemos estos, Comando G. Agruparemos. Eso no es centro, queremos que estos queden alineados, pero esa es nuestra sección de género. Vamos a duplicar eso. Mueve esto hacia abajo, y esta siguiente sección será la sección de altura. Escriba en altura, y queremos que eso quede alineado a la izquierda, y lo que queremos aquí son campos de entrada de texto, no botones de radio. Entonces, vamos a deshacernos de los botones de radio. Queremos que esto en realidad sean pies, y queremos que esto sea pulgadas y luego tomemos un campo de texto. Podemos simplemente agarrar este aquí en la pantalla, “Crear cuenta” y peguemos eso aquí y luego vamos a reducirlo y hacerla más pequeña. A lo mejor algo como esto aquí. Podemos agregar eso al lado de los pies. Entonces ahora usuario escribirá ahí la cantidad de pies que están, cinco pies, seis pies ahí y vamos a duplicar esto y darle uno por pulgadas también. Echemos un vistazo y veamos dónde están todas nuestras capas. Añadamos estos campos de entrada a este grupo. Entonces ahora que podemos mover esto por ahí, así tenemos nuestra sección de altura. Vamos a espaciar un poco esto. Está bien, así que ahora agreguemos un nivel de fitness. Vamos a duplicar de nuevo el género, y llamemos a este nivel de fitness. Tienes que recordar hacer estas cosas a la izquierda alineadas. Lo que queremos es, queremos que el usuario pueda seleccionar si un principiante, experimentado. Vamos a duplicar eso otra vez, Comando D y digamos : “Esta opción está avanzada”. Entonces esos están todos alineados. Vamos a mover esto un poco hacia abajo. Está bien, entonces tenemos el nombre, tenemos el género que seleccionarían, agregarían su altura, seis pies, dos pulgadas, por ejemplo. Nivel de fitness, selecciona si eres principiante, experimentado o avanzado. Ahora queremos tener una sección donde averigüemos el tipo de entrenamientos que les gustan. Vamos a copiar esto y vamos a pegarlo y digamos que este encabezado serán entrenamientos que te gusten. Necesitamos algunas imágenes. Vamos a bajar esto. Necesitaremos algunas imágenes que actuarán como tenedores de lugar para los entrenamientos de tipo. Por ejemplo, tal vez tengamos una sección de cardio, una sección de peso, una sección de HIIT y una sección de peso corporal, y seleccionarían cuál de esos entrenamientos les gusta. Volvamos a los cables, kit wireframe y busquemos algunas tarjetas tal vez. A ver si hay alguna tarjeta aquí que podamos agarrar. Vamos a alejarnos. Consigamos una mejor vista. Vayamos aquí a esta sección y vamos a agarrar algunas cartas de nuestra sección de elementos de la interfaz de usuario aquí y vamos a copiar eso. Volvamos a nuestra alambrada y sólo peguemos eso. Vamos a deshacernos de este fondo aquí mismo, texto inferior y llamemos a esto cardio. Cambiemos el color de esto. Vamos a centrar el nombre, cardio y vamos a duplicar esto. Muévete esto, y esta será una selección para pesos. Agarremos ambos y centrémonos. Vamos a subirlo un poco. Vamos a mover nuestro botón de crear una cuenta hacia abajo, y vamos a duplicar esta fila. Tráelo aquí abajo, parece que tenemos que mover un montón de cosas arriba. Vamos a subir algunas cosas para que podamos tener algo de espacio. De acuerdo, llamemos a esto HIIT, y esto serán ejercicios de peso corporal. Si les gustan esos, pueden seleccionar eso. En realidad podemos simplemente hacer que esta pantalla sea un poco más larga para que tengamos más espacio. Si seleccionas un marco y luego agarras la parte inferior, puedes cambiar la altura del tablero de arte. Lo mismo con el ancho. Se puede cambiar el ancho, pero no queremos hacer eso. Entonces hagámoslo un poco más largo. De esta manera podemos mover nuestro botón hacia abajo y las cosas no están tan aplastadas juntas, darle algo de espacio. Selecciona esta sección y muévala hacia abajo, selecciona esta y muévala hacia abajo. Consigue un poco de espacio aquí. Aquí sólo quisiéramos que nuestro botón dijera: “Continuar”. Entonces esa es nuestra pantalla de configuración de perfiles. Ahora mismo tenemos dos pantallas. Tenemos la pantalla de crear una cuentas. Crean una cuenta, los llevará a su configuración de perfil donde se rellenará su nombre desde el campo de entrada de nombre completo aquí. Después seleccionarían su género, agregarían su información de altura, qué nivel de aptitud son y el tipo de entrenamientos que les gustan. Después darán clic, “Continuar” y irán a la siguiente pantalla, que será nuestra lista de pantallas de entrenamientos. Por lo que crearemos la lista de pantalla de entrenamiento en nuestro próximo video. Pero estas son las dos primeras pantallas que tenemos actualmente en nuestro conjunto de maquetas de trama. Por lo que tenemos Crea una cuenta, y configura tu perfil. Nuevamente, crearemos la lista de pantallas de entrenamiento en el siguiente video. 21. Lista de la pantalla de ejercicios en Adobe XD: Ahora, vamos a crear nuestra pantalla Lista de Entrenamiento. Contamos con nuestras dos pantallas que creamos en videos anteriores, Crear una Cuenta y Configuración de Perfil. Ahora crearemos nuestra tercera pantalla, la pantalla Lista de Entrenamiento. Vamos a duplicar Crear una Cuenta. Vamos a renombrarlo a Lista de entrenamientos. Deshaznos de algunos de los elementos para que podamos iniciarlo desde cero. En esta pantalla, tenemos la pantalla Lista de Entrenamiento. Queremos una barra de búsqueda, lista de tipos de entrenamiento donde los usuarios harán clic en uno de los botones de categoría, y ahora mostrará una lista de entrenamientos en base a esa categoría. Por ejemplo, si hace clic en “HIIT”, la categoría HIIT mostrará una lista de ejercicios HIIT. Si seleccionas “Pesos”, seleccionará mostrar un conjunto de ejercicios mostrando tus entrenamientos con pesas. Si seleccionas “Cardio”, por ejemplo, esa categoría mostrará una lista de trabajos cardiovasculares. Debajo de eso, volverás a hacer clic en “Continuar” también, y tendremos una barra de pestañas en la parte inferior, que todos los usuarios pueden volver a la pantalla Inicio, pueden ir a su pantalla Perfil, y pueden ir a la Lista de Entrenamiento pantalla. Solo vamos a crear esta pantalla Lista de Entrenamiento ahora. El primer elemento que necesitaremos es un campo de búsqueda en la parte superior, por lo que el usuario puede buscar, si quiere unos entrenamientos específicos, digamos burpees, pueden buscar burpee. Pon burpee en el cuadro de búsqueda, y eso poblará una lista de entrenamientos que incluye ejercicios de burpee. Volvamos a nuestra pantalla wireframe. Bajemos a filtros y busquemos. Busquemos un campo de búsqueda. Podemos agarrar este. Esto se ve bien. Vuelve a subir a nuestros alambres, y sumémoslo a la parte superior. Entonces nuestra siguiente sección, busquemos un título para nuestra barra de categorías. Vayamos a los elementos de la interfaz de usuario y veamos si hay algo ahí. Probablemente podamos usar esto. Añadamos esto. Busquemos cabecera de algún tipo que pudiéramos usar. Podría simplemente copiar esto, duplicarlo, y simplemente bajarlo. Que sea 14. Hagámoslo 16. Llamémoslo tipo de entrenamiento. Hagámoslo tipo de entrenamiento, y luego tendremos una lista de botones. Volvamos a nuestro kit de estructura alambres. Vamos a los elementos de la interfaz de usuario. Agarremos unos botones. Agarremos este botón normal aquí. Eso lo copiaremos. Pega eso en nuestro alambres. Deja que se baje el tamaño. Entonces queremos tres de ellos, así que hagan el ancho, decimos, 100. Digamos que este primer botón dirá HIIT. Vamos a duplicar eso, y este segundo entrenamiento dirá Pesos. Vamos a duplicar eso otra vez, y éste dirá Cardio. Debajo de eso mostraremos una lista de entrenamientos en base a la categoría. Seleccionas HIIT, mostrará una lista de entrenamientos HIIT. Agarremos aquí una tarjeta y agreguemos eso como portador de lugar. Mostrar entrenamientos, vamos a mostrar esto como Burpees. Vamos a centrar eso. Vamos a duplicar esto. Digamos Cardio. Duplicemos esa fila hacia abajo. Digamos que esto es Core Cardio. Este dirá Entrenamiento de Fuerza. Cambiemos los colores. Digamos que el tipo de entrenamiento HIIT es el predeterminado. Seleccionado por defecto, así que vamos a [inaudible] color de este. Este es el color activo. Debajo de todas estas, queremos tener un botón que diga Continuar. Buscas entrenamiento, si tienes un entrenamiento específico en mente, di flexiones. Muestra aquí las flexiones o puedes ir por tipo de categoría. HIIT mostrará, ustedes los entrenamientos HIIT. Eso mostrará lo mismo aquí. Si Pesos, cambiará a ese color, y te mostrará una lista de entrenamientos con pesas, y así sucesivamente con Cardio. ¿ Ver? Ahora queremos una barra de pestañas en la parte inferior. Volvamos a nuestra pantalla de cables y veamos si tenemos un bar. Aquí un bar. ¿Qué más? Solo usa esa barra aquí. Esa será nuestra barra de pestañas, y nos preocuparemos de qué secciones estarían ahí más adelante. Esta será nuestra barra de pestañas en la que podremos hacer clic de ida y vuelta en función del enlace en las pestañas. Podemos navegar hacia diferentes pantallas en nuestro flujo. No necesariamente haremos todas esas pantallas, así que realmente no necesitamos todos estos botones en este momento, pero podemos arreglarlo después. Pero esta es nuestra lista de ejercicios. Por lo que conseguimos Crear y Entrenamiento, Configuración de Perfil, y Lista de Entrenamientos, barra de búsqueda, botones de categoría tipo de entrenamiento. Entonces a partir de ahí, tenemos nuestra pantalla de entrenamientos en base a esa categoría, continue bar, y nuestra barra de pestañas. En la siguiente pantalla, crearemos nuestra pantalla Detalle de Entrenamiento. Digamos que este entrenamiento HIIT, seleccionas burpees, y te llevarán a una pantalla de Detalle de Entrenamiento, que muestra ese entrenamiento de burpee. 22. Pantalla de detalles de Adobe XD: En este video, crearemos la Pantalla Detalles del Entrenamiento. Esta pantalla tendrá los detalles sobre el entrenamiento que el usuario seleccionó en la pantalla anterior. Por lo que tendremos un título de entrenamiento, tendremos una imagen de portador de lugar para el video, tendremos una descripción del video, y un botón de inicio. Vamos a seguir y crear esta pantalla. Vamos a duplicar la pantalla de crear una cuenta, así que vamos a deshacernos de los artículos que no necesitemos. Empecemos a crear esta pantalla. En primer lugar necesitaremos un botón Atrás para volver a la lista de pantalla de entrenamiento. Antes de hacer eso, llamemos aquí esta mesa de trabajo, detalles del entrenamiento. De acuerdo, entonces necesitaremos un botón Atrás. Por si acaso tu usuario quiere recuperar la lista de la pantalla de entrenamientos. Vamos a buscar una flecha. Vamos a los cables móviles y veamos debajo de los elementos de la interfaz de usuario, busquemos una flecha, flecha hacia atrás. Podemos usar cualquier flecha, pero usemos esto. Acerquemos y agarraremos esta flecha. Volvamos a nuestra pantalla. Añadamos eso y vamos a tener un título para esta pantalla. Vamos a duplicar esto, vamos a moverlo hacia arriba y vamos a llamar a esta pantalla de detalles de clase y vamos a dimensionar esto hacia abajo. Hagámoslo decir 14 y vamos a centrarlo y vamos a tener un título. Entonces texto marcador de posición para ahora mismo, sólo lo llamaremos título de entrenamiento. Centro ese texto. Ahora centrar alineado y centrarlo en la pantalla y ahora necesitamos una imagen de marcador de posición justo por aquí. Entonces volvamos a los cables y veamos si podemos encontrar una imagen de portador de lugar. Vamos a desplazarnos hacia fuera e ir a los elementos de la interfaz de usuario y aquí tienes, aquí hay una imagen que podemos usar como marcador de posición. Pongamos eso en nuestra pantalla y centrémonos en eso. Deshaznos de estos elementos de inicio de sesión, no los necesitamos. Vamos a bajar esto. Cambiemos el color de esto y agreguemos este color. Si haces doble clic y ves el color de relleno aquí, solo puedes agregar eso, modo que eso agregará un nuevo color en tu paleta de colores. Ahora podemos simplemente dar click fácilmente en él, click en el color del cambio, los colores como los necesitamos. Muy bien, así que ahora vamos a buscar una descripción. Agregaremos una descripción aquí abajo. Volvamos a los cables y encontremos una descripción. Parece que tenemos algo aquí. Vamos a seleccionar eso, vamos a copiarlo, volvamos a nuestros marcos de alambre y vamos a pegar eso. Deshacernos de este pequeño cuerpo y agarrar estas asas. Se puede cambiar el ancho del texto. Vamos a centrar esto. Ahora usemos este botón, cambiémoslo para decir inicio. Por lo que el usuario haría clic en esto para llevarlos a la pantalla de video real donde puedan comenzar a reproducir el video y comenzar a hacer su entrenamiento. Añadamos bien estas barras de pestañas a esta pantalla. Por lo que tenemos nuestra pantalla de detalles de entrenamiento. Por lo que aquí en la lista de entrenamientos, un usuario hará clic en una categoría, digamos HIIT, tendrán una pantalla de los entrenamientos hit en esa categoría. Por ejemplo dicen que estos son burpees, entrenamiento HIIT. Al hacer click en eso, irás a la pantalla de detalles del entrenamiento, que acabamos de crear. El cual tendrá un portador de lugar de esa imagen de video, que tendrá una imagen de marcador de posición del video que se mostrará, que tendrá una descripción y cambiemos esto para decir título de descripción y atreveramos eso. Entonces tenemos un título de descripción, algún texto de marcador de posición que describiremos de qué se tratará ese entrenamiento, y un botón de inicio. Haz clic en el botón de inicio, te llevará a la siguiente pantalla, que será la pantalla de video de entrenamiento y lo crearemos en el siguiente video. 23. Pantalla de video de Adobe XD: Vamos a crear nuestra última pantalla, la pantalla de video de entrenamiento. En esta pantalla tendremos el video en el que puedes hacer clic en el botón “Jugar”, empezará a reproducir el video y tendremos un botón de Fin de Entrenamiento, cual permite a un usuario terminar el entrenamiento si tiene que terminarlo rápidamente por cualquier razón. Empecemos a crear la pantalla. Duplicemos Mesa de trabajo o simplemente podemos crear otra Mesa de trabajo haciendo clic en este icono aquí. Hagamos otro iPhone 10. Llamemos a este video Artboard Workout y busquemos un marcador de posición de video. Volvamos a los Wires-Mobile. Alejemos el zoom y vayamos hacia abajo a fotos y video. Encontremos video, copiemos esto. Esta es una buena. Vuelve a nuestros Wireframes. Vamos a pegar eso y eso está bien. Vamos a agarrar un botón, copiar esto de nuestra pantalla de detalles de entrenamiento, pegarlo aquí y cambiemos el nombre a End Workout. Si el usuario tiene que terminar el entrenamiento temprano, solo puede hacer clic en un botón para hacerlo. Vamos a encontrar como alguna duración de tiempo de video. Podemos encontrar eso. Permite al usuario saber cuánto tiempo queda en el video, cuánto tiempo ha transcurrido, etc. Bajemos aquí y copiemos eso y agreguemos eso a nuestra pantalla. Vamos a subir eso. Vamos a agruparlo. Si queremos agrupar, comandamos G. Ahora, solo llamémoslo tiempo duración o algo así y ahora podemos mover estos elementos fácilmente. Creo que en su mayor parte por eso fuimos por la pantalla. Se llega a esta pantalla por el usuario al estar en los detalles del entrenamiento. Tienen la descripción del título del entrenamiento y dan clic en “Inicio”. Entonces eso los llevará a la pantalla Video de Entrenamiento aquí donde podrán reproducir el video. reproducirá el video y luego, verán cuánto tiempo ha pasado, cuánto tiempo queda. Entonces pueden terminar el entrenamiento si necesitan terminarlo temprano primero por cualquier razón. Si terminan el entrenamiento temprano, hacen clic en el botón, y eso los llevará de vuelta a la pantalla Detalle del Entrenamiento. Estas son nuestras cinco pantallas, hemos creado las cinco; Crear una Cuenta, Configuración de Perfil, Lista de Entrenamientos, Detalles del Entrenamiento, y Video de Entrenamiento. En nuestro próximo video, comenzaremos a prototipo, donde crearemos un prototipo de baja fidelidad vinculando todas estas pantallas juntas para que al hacer clic en un botón o cualquier acción en cada pantalla, te lleve a la siguiente pantalla. Esto permitirá que los miembros de nuestro equipo de diseño o nuestros usuarios de prueba o los interesados del proyecto puedan probar rápidamente nuestro prototipo para ver si va en la dirección correcta. Lo que no quieres que suceda es, diseñas todas estas pantallas, empiezas a construir la app y te das cuenta, “Oh, nos olvidamos de esta pantalla. Ah, nos olvidamos de este elemento en esa pantalla”. Tienes que volver atrás y hacer todos estos cambios en la fase de desarrollo. En tanto que si acabas de crear un prototipo al principio, puedes obtener un buen mango si el flujo es bueno para el usuario, si hay algún punto de dolor que necesitas arreglar antes de llegar a la etapa de Desarrollo, el etapa de codificación de la app. En el siguiente video, crearemos nuestro prototipo de baja fidelidad. 24. Enlace y presentación en Adobe XD: Ahora empecemos a vincular nuestras pantallas wireframe para que podamos producir un prototipo para que los usuarios lo prueben. En la esquina superior izquierda de XD, haz clic en la pestaña “Prototipo”. Ahora vamos a seleccionar nuestro primer tablero de arte para que podamos empezar a hacerlo interactivo. Vamos a acercar un poco. De lo que queremos hacer, no queremos enlazar toda la pantalla, queremos vincular solo el botón “Crear una cuenta”. Entonces lo que haremos es seleccionar ese botón. Al seleccionar un elemento, notarás que se volverá azul, y en el lado derecho aparecerá una flecha. Haga clic en esa flecha y arrástrela hasta el tablero de arte o pantalla a la que desea vincularla. lo que en esta instancia queremos hacer clic y arrastrar a la pantalla de configuración del perfil. Sueltas el ratón una vez ves un borde azul alrededor del tablero de arte al que quieres vincularlo. Una vez que esté vinculado, verás aquí en la columna de la derecha, opciones para personalizar la interacción. Tienes lo que activará la interacción, un toque, un arrastre, el teclado, o gatillo de voz, qué tipo de transición, animación automática, superposición, desplazamiento a, tablero de arte anterior, reproducción de audio o voz reproducción. En este caso, sólo queremos una transición. En la pantalla de destino a la que quieres acudir, seleccionamos un perfil configurado. Entonces mantendremos eso como la misma configuración de perfil. Qué tipo de animación, disolver o tienes opciones de deslizamiento, u opciones de empuje. Vamos con diapositiva a la izquierda. Después tenemos flexibilización y duración, y los mantendremos como predeterminados. Por lo que queríamos continuar ese mismo proceso para el resto de nuestras pantallas. Queremos dar click en el elemento que se podrá hacer clic en ese tablero de arte, y queremos vincularlo a la pantalla a la que queremos llevar al usuario. Por lo que seguiré vinculando todos estos botones. Haga clic en “Continuar” en la pantalla de ajustes del perfil vincularlo a la lista de entrenamientos. Haga clic en “Continuar” en la lista de pantallas de entrenamiento. Vinculemos eso a los detalles del entrenamiento. Haga clic en el botón “Inicio” y vinculemos eso a la pantalla de video de entrenamiento. Para esta transición, intentemos algo un poco diferente, vamos a deslizarnos hacia arriba. Por lo que ahora estamos listos para previsualizar nuestro prototipo. Lo que tenemos que hacer es hacer clic en nuestro tablero de arte inicial, que será como la pantalla de inicio, que será donde comenzará la presentación del prototipo. Entonces donde queremos que empiece la presentación, vamos a empezar con este primer tablero de arte aquí. Entonces hacemos clic en eso y luego hacemos clic en “Vista previa”. Ahora podemos empezar a dar click a través de nuestro prototipo. Los usuarios acudirán a la pantalla “Crear una cuenta”, rellenarán su nombre, correo electrónico, contraseña y confirmarán contraseña, clic en “Crear una cuenta” y luego tendrán su pantalla de configuración de perfil con su nombre John Doe, decir que se ingresó en la pantalla anterior. Selecciona su género o estatura, nivel de aptitud y entrenamientos que les gusten. Haga clic en “Continuar”. Ahora estás en la lista de pantalla de entrenamiento. Tienes los tipos de entrenamiento, el usuario selecciona “Hit”, ves un montón de entrenamientos hit, y hacen clic en “Continuar”. Ahora tienes el título de entrenamiento. Digamos que seleccionaste “Barbies” en la pantalla anterior. Entonces ahora este será el título del entrenamiento dicen Barbies, una imagen de ese entrenamiento y la descripción. Puedes hacer clic en “Inicio”, y como ves empuja hacia arriba, y puedes empezar a reproducir tu video para comenzar tu entrenamiento. Por lo que aquí tenemos nuestro prototipo terminado en XD. Ahora, digamos que quieres compartir ese prototipo. Para poder compartir, vas a la pestaña Compartir arriba a la izquierda de XD, y verás opciones en el lado derecho otra vez dándote opciones para personalizar cómo quieres compartir este enlace. ¿ Qué quieres enlazar? Bueno, queremos vincular la intro de UX a wireframe que es el nombre de nuestro proyecto, el ajuste de vista, revisión de diseño. Se quiere compartir con los desarrolladores. Modo de presentación, prueba de usuario o personalizado, sólo lo dejaremos como revisión de diseño, y quién tenga acceso al enlace: cualquier persona con el enlace, solo personas invitadas, o cualquier persona con la contraseña. Iremos con cualquiera que tenga el enlace, y luego le daríamos clic en “Crear Enlace” y XD procesará y en breve nos dará un enlace en el que luego podremos clic y podemos compartir este enlace con nuestros usuarios, stakeholders, otros diseñadores, equipo de desarrollo para que puedan previsualizar el prototipo y darnos retroalimentación. Hagamos clic en el enlace. Desplazémonos por estas pantallas iniciales de persona, flujo de usuario y lleguemos a nuestro primer tablero de arte. Por lo que los usuarios, quien quiera probar la pantalla, ahora harán clic en ese enlace y verán esto en el navegador y luego podrán hacer clic a través del prototipo. Entonces pueden agregar comentarios, pueden hacer un comentario, escribir algún texto, enviar, ese tipo de cosas. Entonces ahí tenemos nuestro prototipo en XD, y tuvimos la capacidad de mostrarlo a nuestros stakeholders, compañeros diseñadores, desarrolladores, otros miembros del equipo. Por lo que realmente no es tan difícil crear un prototipo en XD o compartirlo con los miembros de tu equipo. Entonces espero que construyas unas cuantas pantallas en XD, practiques vincular esas pantallas y empieces a hacer prototipos por tu cuenta también. 25. Reflexiones finales: Ese es el fin de la clase. En este curso, hablamos de Balsamiq y Adobe XD y su importancia en wireframing y prototipado. Revisamos las herramientas en Balsamiq y Adobe XD, y hicimos wiredifamación y prototipamos una aplicación móvil de ejemplo para que puedas ver mi proceso. Eso es todo para la clase. Espero que ustedes aprendan algo sobre wireframing y prototipado de baja fidelidad y espero ver qué se les ocurre en el proyecto de clase. Recuerda, este es un paso muy importante en el proceso de diseño, tan feliz prototipado.