Flujos de usuarios para diseño de UI / UX

1. Introducción a la clase: flujos de los usuarios de los diagramas de flujo son parte realmente importante del proceso de diseño porque dentro de los flujos de usuario, vas a definir cómo se van a mover tus usuarios a través de tu aplicación o sitio web y cuáles son algunos pasos que se van a dar con el fin de lograr los objetivos que usted o sus clientes establecen, puede definir una parte dentro de su aplicación o sitio web que sus usuarios van a tomar. O bien puedes definir múltiples rutas que varios usuarios van a tomar al mismo tiempo. Y al hacer eso, vas a determinar el número de pantallas o páginas que vas a necesitar en tu proyecto y cuánto tiempo realmente vas a usar y necesitar para completar este proyecto. Hey diseñador, mi nombre es Alex y en esta clase de Skillshare, vamos a hablar de flujos de usuarios, por qué son importantes, cómo crearlos usando Adobe XD. Cuáles son algunas diferencias entre los diferentes flujos de usuario y cómo usarlos en tus proyectos. Soy creador de productos digitales y hasta ahora he creado o un 500 productos de diseño. También soy creador de cursos y hasta el momento he creado o 30 cursos diferentes con más de 50 mil alumnos inscritos en el interior. En esta clase, vamos a discutir lo que fluye nuestro usuario, diferentes tipos de flujos de usuario. ¿ Cuándo se usan? Crear flujos de tareas utilizando Adobe XD, trabajar con flujos de cables en Adobe XD y cómo utilizar diferentes plantillas más complejas. Y finalmente, cómo compartir tus flujos con tus clientes y desarrolladores. Tu proyecto de clase para esta clase es crear un flujo de tareas usando la plantilla que proporcioné. Simplemente abre la plantilla en Adobe XD ajustado quieras n simplemente sube esa imagen a nuestros proyectos de clase. No puedo esperar a ver lo que ustedes pueden crear. Al usar flujos de usuario, vas a determinar la cantidad total de pantallas o páginas que se necesitan para este proyecto en particular. Y además vas a crear rutas óptimas para tus usuarios que puedan tomar. Además, lo que puedes hacer es mejorar la facilidad de conversión porque vas a optimizar tu experiencia de los usuarios antes llegar realmente a las etapas de diseño de tu proyecto. Puedes utilizarlos con nuevos productos para definir tus caminos que van a tomar tus usuarios. O puedes usarlos con productos existentes para refinar esos malos y para crear grasas ideales. Así que realmente espero verte en clase y vamos a crear algunos flujos de usuario. 2. Qué son los flujos de usuario: Flujos de usuario, todos los diagramas de flujo como a veces se les llama nuestras partes. Tus usuarios juegan al usar un producto, muestran una parte completa que tu usuario toma desde el punto de entrada, derecha, hasta el punto final cuando terminan su viaje. Existen muchas partes diferentes que tus usuarios pueden tomar dependiendo de cómo llegaron a tu producto. Por ejemplo, si ese sitio web o una página de destino o algo así, tal vez llegaron a esa página de aterrizaje cuando hicieron clic dentro del enlace en tu correo electrónico o si es la página de Shoppe puede ser una página de producto o algo así, tal vez consiguieron a ella visitando nuestra campaña que tenías en Facebook o Instagram o algo así. A lo mejor hicieron clic en un enlace dentro de un video de YouTube y tripas a esa página de la tienda. O si se trata de una app, tal vez instalaron esa app usando un enlace o descarga directa desde una tienda. Y luego cuando se instalaron en esa app, y tal vez la abrieron y llegaron a la pantalla de presentación. Por lo que los flujos de usuarios tienen nuestro sencillo trabajo de dirigir todos esos caminos de tal manera que sea lógico para tus usuarios y súper fácil de entender y optimizarlos de tal manera que tengan el menor número de clics posible para lograr esos metas, dependiendo de quién sea su cliente y lo que su producto esté tratando de hacer. Esos objetivos pueden ser ya sea comprar un producto, reservar un servicio, descargar, un regalo, inscribirse en un boletín por correo electrónico y mucho más. Por lo que tu objetivo como diseñador mediante el uso de estos flujos de usuario es crear estos flujos óptimos y caminos óptimos que tus usuarios puedan tomar para hacer esas tareas de tal manera que sea lo más sencillo posible para ellos entender y tan rápido como posible que ellos resuelvan las tripas N2 a su meta final, objetivo de tus clientes es aumentar la conversión, por ejemplo. Por lo que al usar estos flujos de usuario, vas a acercarte un paso más a esa conversión mejorada al reducir el número de clics, por ejemplo, que tus usuarios tienen que tomar para lograr esos objetivos. Al usar flujos de usuario, vas a determinar la cantidad total de pantallas o páginas que vas a necesitar en esta etapa del proyecto. Y eso a su vez te va a ahorrar mucho tiempo después cuando realmente llegues a las etapas de diseño de tu proyecto porque va a mejorar tu comprensión de este proyecto o rol. Y por lo tanto, te va a acelerar aún más en esta etapa del proyecto, incluso puedes dejar que los desarrolladores sepan lo que está pasando. E incluso puedes mostrarlos y estos diagramas de flujo, y vamos a hablar de eso en las etapas posteriores de esta clase. Pero ese es el punto completo de este proceso, es entender que este proyecto son mucho mejores que simplemente empezar con el diseño porque ese es un enfoque realmente equivocado. Porque realmente necesitas comenzar con estos flujos de usuario para entender cuántas pantallas, cuántas páginas vas a necesitar más adelante cuando llegues a esa parte de diseño de tu proyecto. En el siguiente video, vamos a discutir cuáles son algunos tipos diferentes de estos flujos de usuario y cómo se utilizan. Entonces te veré ahí. 3. Diferentes tipos de flujo de usuario: Existen muchos tipos diferentes de flujos de usuarios dependiendo de lo que intentes resolver en tu proyecto y lo que intentes lograr. Pero básicamente hay tres tipos principales que se utilizan en general. Y luego de esos tres tipos principales, hay muchos tipos diferentes que te vas a encontrar durante tu carrera de diseño. Y esos son flujos de tareas vía flujos y flujos de usuarios. Los flujos de escritorio son lo que el nombre sugiere y están mostrando cómo el usuario interactúa con una determinada tarea haciendo clic en el mismo punto de entrada para llegar al mismo punto de entrada y al mismo punto final, todos tus usuarios van a hacer lo mismo viaje. Y por lo tanto, este viaje va a mostrar una tarea sencilla. Por ejemplo, suscribirse a nuestro boletín de correo electrónico o comprar el producto, o reservar un servicio con usted o algo así. Todos esos usuarios tienen que completar esa misma tarea. Esa tarea tiene muchos pasos diferentes en el medio dependiendo de lo compleja que sea la tarea. Y por lo tanto estos flujos de tareas se utilizan para eso. No se utilizan para otras cosas complejas. Por ejemplo, diferentes puntos de entrada, diferentes puntos de salida. Pero todo el punto de los flujos de tareas es enfocarse en una sola tarea y optimizar esa parte del usuario de tal manera que tengan los menos pasos posibles para completar esa tarea, entonces tenemos flujos de alambre. Y estos flujos de trabajo son en realidad la combinación de estos flujos de tareas y los marcos alámbricos básicos, y por eso se llaman flujos de alambre. Y todo el punto de ellas es mostrar diferentes trayectorias de usuario a lo largo tu producto y diferentes puntos de entrada en diferentes puntos de salida. No obstante, no son demasiados detalles en su interior. Solo están ahí para mostrar todas estas partes diferentes que tus usuarios pueden tomar. Entonces el punto aquí no es ponerte demasiado detallado, sino mostrarle a tus clientes, a tus compañeros de equipo y también a los desarrolladores. Muchas partes diferentes que tus usuarios pueden tomar. Pero usar al menos algunos detalles para mostrar cómo pueden verse esas pantallas o páginas. Y luego usar flechas, por ejemplo, solo para mostrar cuáles son algunas partes diferentes que pueden tomar tus usuarios. Y luego finalmente, tenemos flujos de usuario ellos mismos. En realidad son combinación de flujos de tareas y flujos de alambre. Y los flujos de usuario en realidad muestran todos los diferentes flujos que pueden tomar tus usuarios, todas las diferentes partes que pueden tomar. Y en realidad son combinación de flujos de tareas y vía flujos. A lo que me refiero con eso es que son combinación de estos dos elementos. Y te voy a mostrar eso en etapas posteriores de esta clase. Y básicamente lo están mostrando todo. Están mostrando cada punto de entrada, están mostrando cada punto de salida. Están mostrando todas las múltiples partes de las que sus usuarios pueden tomar partes correctas e incorrectas. Están mostrando caminos alternativos y todas esas cosas, así que están lo más detalladas posible. Entonces dependiendo de lo que realmente necesites este proyecto y dependiendo de dónde estés en las etapas de diseño de este proyecto, vas a usar uno u otro. ocasiones los flujos de usuarios son en realidad tu mejor apuesta porque dependiendo de cómo vaya tu proyecto, dependiendo de cómo vaya la retroalimentación , cómo va la investigación, es mucho más simple de cambiar, son mucho más simples de editar. Entonces si solo estás empezando con flujos de tareas y ahí están agregando flujos de alambre más tarde y luego usando flujos de usuario al final. Por lo que quizás User Flows es la mejor manera de hacerlo. ¿ Y cuándo usamos realmente estos flujos de usuario? Eso vamos a discutir en el siguiente video. Entonces te veré ahí. 4. Cuando se usen: Los flujos de usuario se utilizan desde el principio en un proyecto justo después de que se hayan completado todas las personas de investigación y usuario. Como dijo anteriormente, se utilizan para determinar la cantidad de pantallas que vas a necesitar y el orden lógico de esas pantallas o páginas de dosis ordenadas y cómo tus usuarios realmente van a interactuar y moverse a través de todas estas diferentes páginas. Y luego podrás discutir ese orden y todos esos flujos con tus clientes y con tus desarrolladores o con tus compañeros de equipo para lograr el mejor resultado posible y la mejor optimización posible antes de pasar realmente a las etapas de diseño de este proyecto, se utilizan para crear interfaz intuitiva y agradable para que nuestros usuarios encuentren nuestro producto, nuestra alegría de usar, y también se utilizan con el fin de aumentar la tasa de conversión, como mencioné antes, porque al usar estos flujos de usuario, vas a determinar desde un principio en este proceso de diseño, cuándo tus usuarios van a hacer clic o comprar o comprar ciertas cosas dentro de este proceso en lugar de posteriormente en el proceso de diseño, lo que a su vez va a hacer que el proceso de diseño sea mucho más fácil de hacer, mucho más fácil de crear. Porque has determinado todas estas cosas en tus flujos de usuario. Puedes usarlos para crear nuevos productos, o puedes utilizarlos con productos existentes para refinar las piezas que tus usuarios pueden tomar dentro de ese producto y para aumentar la optimización o conversión o donde sea que el objetivo de este proyecto es. Entonces como dije, se pueden crear para productos nuevos o existentes. Y son realmente útiles cuando estás creando componentes que posteriormente vas a utilizar en tus etapas de diseño de este proyecto de diseño porque algunos componentes se utilizan mayormente, como la navegación, como pies de página y dentro de esta etapa de tu proyecto, puedes determinar con bastante facilidad qué se va a ubicar en la navegación de deudas o pie de página. También puedes usarlos para crear algo llamado imágenes de héroes por ejemplo, o deslizadores o diferentes componentes como DOS. Y luego más adelante puedes escalar o reescalar fácilmente esos componentes, ya sea si los necesitas o no más adelante por la línea en tu proyecto. Por último, realmente hay una gran manera de mostrar a tus compañeros de equipo, clientes y desarrolladores tus ideas sobre este proyecto. Todos estos diferentes caminos que tus usuarios pueden tomar. Porque la validación en esta parte del proyecto es realmente importante porque como ya mencioné varias veces, va a acelerar tu diseño parte de este proyecto son mucho más porque en esta parte con estos flujos de usuario, vas a determinar todos estos detalles importantes. Y luego más adelante, el diseño sólo va a ser mucho más fácil y mucho más agradable proceso de hacer porque es solo una exploración de la creatividad en lugar de lidiar con todas estas complejas tareas que los usuarios tienen que resolver . Ahora hablando de flujos de usuarios en el siguiente video, realidad vamos a crear flujos de usuario usando Adobe XD. Entonces te veré ahí. 5. Crea flujos de usuario en Adobe Xd: Existen muchas rutas diferentes que tus flujos de usuario pueden tomar. Hay muchas formas diferentes que puedes usar, pero hay algunas formas básicas que todo diseñador Hay que entender. Básicamente son el estándar en la industria desde hace décadas. Y son realmente bastante importantes de saberlo, sobre todo si estás trabajando con equipos remotos. Si te unes a una agencia más tarde por la línea o si ya estás trabajando en una agencia y trataste de establecer son ciertos idiomas que todos pueden entender. Entonces en este video, te voy a mostrar una plantilla. Vas a poder descargar esta plantilla y explorarla más y luego construir sobre esta plantilla. Y más adelante en la clase, te voy a mostrar algunas plantillas más complejas que en realidad puedes obtener si quieres, para luego expandirte sobre estas plantillas básicas y simplemente construirlas sobre ellas. Entonces aquí está esa plantilla. Se llama elementos de flujo de tareas. Y si quieres obtener esta plantilla simplemente descargada de los archivos de clase, y entonces puedes abrirla en Adobe XD. Entonces lo que tenemos justo aquí son todos los elementos, todos los componentes. Por lo que tenemos entrada, acción, proceso, flecha de decisión y flecha negativa, y estos son tus colores. Entonces color de punto de entrada, color blanco, que es básicamente el color del texto en todas partes, y color de pasos. Si desea cambiar estos colores a la marca de su cliente, por ejemplo, simplemente puede hacer clic derecho. Puedes copiar esto o puedes editar y luego simplemente cambiar este color como quieras. Como puedes ver, se van a actualizar en tiempo real. Puedes basar tu código hexadecimal aquí mismo. Si queremos terminar, entonces se va a actualizar a ese color hexadecimal que has elegido. Entonces déjame volver un poco atrás. Entonces como dije, esta es la plantilla realmente básica de huesos desnudos y luego puedes construir sobre esta plantilla. Entonces si ampliamos un poco también, todos estos elementos diferentes, te voy a mostrar qué son todos y qué hacen todos. Entonces, en primer lugar, tenemos entrada, y este es el círculo de entrada, o el punto de entrada suele mostrarse como un círculo, pero puedes mostrarlo de muchas maneras diferentes que quieras. Nada de esto es realmente estandarizar. Esto es solo diseñadores de la industria que utilizan todos estos elementos y plantillas durante décadas. Y luego simplemente llegar a todas estas diferentes soluciones. Por lo que tenemos punto de entrada y ese también puede ser el punto de salida. Entonces punto de entrada, si recuerdas de los pocos videos anteriores que mencioné, puede ser, por ejemplo, una página de aterrizaje de tu sitio web o pantalla de inicio de sesión de tu app o cualquier otra cosa. El punto de entrada donde los usuarios realmente ingresan tu diseño, tu producto, tu aplicación móvil, tu sitio web, lo que sea. Y después de eso, tenemos acción. Para que los usuarios puedan hacer clic, los usuarios pueden navegar, los usuarios pueden afirmar, los usuarios pueden escribir todas esas cosas diferentes son acciones. Las acciones también pueden ser, si haces clic en el siguiente botón dentro de tu app, por ejemplo, para ir entre diferentes pantallas. O si has hecho clic en un icono determinado, por ejemplo, Flecha para ir a la izquierda y a la derecha, o si desliza para usar el círculo de acción de paginación está justo ahí. Y voy a mostrar eso en tan solo un segundo con esta plantilla realmente básica la cual encontré en línea y simplemente la recreé usando estos elementos. Por lo que todos estos elementos son, han creado para ustedes chicos y simplemente pueden descargar y usar esta plantilla. Como mencioné. A continuación, tenemos proceso. Entonces, ¿qué pasó después de completar la cierta acción? Entonces, ¿fuimos a una página específica? ¿ Pasamos de, por ejemplo, imagen pequeña a imagen de ancho completo difícil a la siguiente diapositiva, ¿compramos el producto? ¿ Fuiste a la página de pago? Todas esas cosas realmente importan dentro del proceso. Por lo que hay que anotar eso para que puedas entender como diseñador, o si estás trabajando con compañeros de equipo o con desarrolladores o con cliente, tienes que mostrarles este proceso. A continuación tenemos en esta forma de diamante, que es la decisión. Entonces básicamente eso significa si el usuario se ha comprometido a decir sí o no a un determinado proceso o a una determinada acción. A lo que quiero decir con eso es cuando llegas a nuestra página de pago, por ejemplo, y quieres comprar un producto, esto puede ser una decisión sí o no. Entonces sí, quiero comprar el producto y luego vas a la página de pago, vas a las páginas de pago, así sucesivamente o si no, si hago clic en No, ¿A dónde me lleva? Es por eso que este diamante es realmente importante y generalmente se lo conoce como diamante de decisión. Y te voy a mostrar cómo nuevos editar todos estos elementos a en tan solo un segundo. Pero a continuación tenemos flechas. Ahora, estas flechas rellenadas, como pueden ver, tenemos dos tipos. Por lo que estas flechas rellenadas son básicamente flechas de paso. Por lo que trasladan a los usuarios de un paso a otro. Y entonces estas flechas son básicamente lo que las etiqueté aquí. Flechas negativas en es cuando el usuario dice, dice que no, o cuando el usuario no puede completar una determinada tarea. Por ejemplo, si la búsqueda pero no puede encontrar nada, entonces esta ninguna flecha aparece y los lleva a un paso siguiente o al paso anterior o algo así. Entonces básicamente por eso se usan estas flechas. Ahora si me desacerco un poco, se puede ver este flujo. Y básicamente me inspiré en línea e injusta recrear usando estos elementos. Debido a que el usuario entra aquí, son recibidos con una página de bienvenida o una pantalla de bienvenida, por ejemplo. Entonces a partir de eso, pueden seleccionar una tarea. Se selecciona la tarea, y luego pueden avanzar. Si es correcto, entonces pueden avanzar a la página de detalles. Si no es correcto, entonces esto, si hacen clic en no, por ejemplo, los va a llevar de vuelta a las tareas de selección. Por lo que este nodo puede ser botón concreto cuando hacen clic en no, o pueden ser, que puede ser una X. Por ejemplo. Quieren cerrar el pop-up o como sea que estructures tu diseño. Básicamente, el punto es el mismo. Ellos o bien pueden ir hacia adelante, Así que sí, o pueden ir hacia atrás. Entonces no, por eso se usan estos. Entonces vamos a esta página de detalles, por ejemplo. Y desde la página de detalles puedo dar clic en la búsqueda klutzy para ir a buscar algo. Y luego cuando un commit para buscar, puedo buscar artículos. Si no encontré ningún artículo, se va a, va a mostrar no se han encontrado artículos. Por lo que en este caso, me imaginaba que era un siguiente ícono. Entonces, por ejemplo, no se encuentra ningún elemento, y luego se puede cerrar para completar una búsqueda una vez más o A ítem se encuentra, meta se completa en este caso particular porque ese es el objetivo de este ítem. Y luego puedes hacer clic en Pedir. Y este es tu punto de salida, así ordenado. O si no quiero pedir, tal vez pueda hacer clic en no o cancelar o algo así. Y me va a llevar de vuelta a esta página de detalles. Por lo que solo puedes ver a partir de este ejemplo realmente rápido y fácil lo útiles que son estos diagramas de flujo. Este es básicamente un flujo de tareas que mencioné anteriormente porque solo está mostrando una sola tarea. En el siguiente video, vamos a discutir algunas plantillas más avanzadas y algunos pasos más avanzados que puedes dar cuando estás creando estos flujos. Pero básicamente, esto es solo una plantilla realmente básica de huesos desnudos. Una vez más, puedes descargarlo, usarlo en Adobe XD y explotado. Y realmente te animo a construir sobre esta plantilla, a añadir más páginas, a añadir más pantallas y así sucesivamente. Y una cosa que no te mostré es, por ejemplo, en esta tarea aquí mismo, quiero acercar y digamos en lugar de seleccionar tarea, quiero hacer otra cosa. puede ver que es Open Sans, por lo que es fuente gratuita de Google. Ahora puedes cargarlo en fuentes de Google y fuentes de Adobe, lo que sea que estés usando, completamente gratis. Entonces lo que hice aquí mismo es que incluí el relleno. A lo que me refiero con eso es que si hago clic justo ahí, se puede ver que el relleno está habilitado en este componente. Entonces si hago doble clic aquí mismo, puedo escribir algo, por ejemplo, hacer esto más visible y se puede ver cómo gasta la caja. Entonces básicamente en este caso, yo, si vuelvo, usé 20, como se puede ver aquí mismo, espaciando entre todos mis elementos. Pero puedes usar bronceado, puedes usar cinco. Incluso puedes solapar estas flechas. Entonces si una posición está justo aquí, se puede ver lo bien que se superpone con este paso. realmente puedas hacer lo que quieras. Además, cuando estés arrastrando estos componentes, simplemente arrástrelo aquí mismo. Quiero cambiar tu doble clic dentro, por ejemplo, punto de entrada o lo que sea así, o punto de salida, lo que sea. Puedes posicionarlo aquí, puedes hacer que esté en un centro seleccionando estos dos elementos, posicionarlo así. O simplemente puedes eliminarlo. Eso se puede hacer por todos estos otros elementos que se te muestran. Y por último, para estas flechas, porque estas son bastante simples, puedes hacer doble clic en el interior. Puedes mantener tu posición de tecla Mayús esta flecha aquí mismo. Y luego puedes hacer clic y posicionar esta forma justo aquí si quieres acortar esta flecha, por ejemplo, si no quieres que sea así de larga por la razón que sea. Y también para estas flechas, si voy a mi panel Capas y las abro, puedes ver flecha tan negativa, tenemos la etiqueta, que es esta ninguna etiqueta dentro de la cual también puedes cambiar si quieres. Por ejemplo, negativo O ninguna opción, o esto no es una opción o lo que quieras escribir. Y luego tenemos flechas izquierda, derecha y tenemos esta línea de flecha en el medio. Entonces, ¿qué se puede hacer realmente con estos? Puede hacer clic en la flecha izquierda, por ejemplo, mantenga presionada la tecla Mayús y acercarla. Puedes hacer lo mismo con este, o si quieres, incluso puedes alejarlos más lejos. Entonces digamos así. Y luego puedes dar click en este centro y simplemente extenderse así. Si no quieres que sea así, entonces simplemente puedes hacer click en la flecha y puedes ajustarla para que veas que tenemos el color del borde, que es este color. Y luego tenemos el ancho del trazo, tenemos el ancho del guión. Entonces básicamente el ancho entre todos estos diferentes guiones, puedes ajustar lo que quieras para lograr un cierto estilo que buscas. Y básicamente esto, todo el punto de esta plantilla para ayudarte en este proceso de exploración. Entonces como mencioné en el siguiente video, vamos a discutir plantillas un poco más complejas. Te voy a mostrar dónde puedes conseguir esas plantillas, que en realidad son mías, y luego qué puedes hacer realmente con ellas. Entonces te veré ahí. 6. Trabajar con gráficos de flujo en Adobe Xd: En este video, te voy a mostrar algunas plantillas más complejas. Estas plantillas tardaron meses en crearse. Y estas plantillas son en realidad algunas que mi equipo y yo creamos en el pasado. Y puedes conseguir estas plantillas, enlaces que van a estar en el PDF con descuentos porque se trata de plantillas premium. Y les voy a mostrar cómo se crean todos ellos. Sosténgalos parecen en Adobe XD. Puedes conseguirlos si quieres. De no ser así, puedes crear las tuyas propias como quieras. Entonces aquí está mi sitio web call web donante, dotnet. Una vez más, link va a estar en un PDF y esta es la primera plantilla que van a ver llamada flowy. Y puedes ver que tienes 108 pantallas, 128 elementos en diferentes papeles. Por lo que puedes usar estos papeles si quieres alinear tu diagrama de flujo y luego imprimirlo más adelante para mostrarlo a tus compañeros de equipo, clientes o desarrolladores. Entonces si un escleral sólo un poquito, se puede ver cómo se ven algunos de estos elementos. Y los vamos a explorar en tan solo un segundo dentro de Adobe XD. Pero básicamente, eso es lo fundamental de ello. Hay muchos diferentes de estos elementos y estos papeles y tenemos diagramas de flujo de alambre y estos son mucho más grandes. Por lo que tenemos HOT 100 componentes en total. Por lo que 200 pantallas a un 100 elementos y dos papeles una vez más, y esta vez tenemos versión clara y oscura, por lo que incluso puedes explorar eso. Y se puede ver que son adaptativos lo que se incluye. Por lo que tienes tres tipos de archivos diferentes, Photoshop, Sketch y XD. En tanto que en este Contamos con Photoshop y archivos de boceto. Pero debido a que XD es creado por Adobe, simplemente puedes abrir un archivo de Photoshop. Va a funcionar perfectamente bien dentro de XD porque está integrado para hacerlo, componentes pixel-perfectos, fuentes gratuitas de Google se utilizan dondequiera que encuentres fuentes. Y si compras estos tutoriales de video direccionalmente para ambos incluidos dentro y estructura de capas organizada. lo vas a ver en tan solo un segundo. Estos son los papeles para imprimir tanto en tamaño US como A4 si lo desea. Variaciones ilimitadas y puedes ver cómo se ven algunos de estos elementos. Ahora bien, si minimizo esto y vuelvo a XD, esta es la tarea para ROD. Muéstrate, puedes ver lo básico que es. Pero si te muestro, por ejemplo, florido, puedes ver cómo se ve. Por lo que en realidad combino estos tres. Entonces déjenme acercar esto un poco más. Por lo que estos son elementos web, estos son elementos móviles, y estos son todos los elementos adicionales. Entonces si compras estos, van a venir en tres archivos, pero puedes combinarlos en un solo archivo en XD, como puedes ver aquí mismo, simplemente puedes hacer doble clic para cambiar esto. Por lo que se trata de elementos móviles, por ejemplo. ¿ Y qué se puede hacer realmente con estos elementos? Por lo que puedes venir bastante fácilmente aquí a tu mesa de trabajo y crear una mesa de trabajo que es 1920 por 1080 por ejemplo. Y digamos que quiero empezar con una pantalla de inicio de sesión. Puedo copiarlo, puedo pegarlo aquí mismo. Y en realidad cambiemos esto a este color. Entonces déjame en realidad, déjame realmente agarrar nuestro bonito color gris claro solo para que puedas ver un poco mejor lo que estoy haciendo. Y entonces puedo empezar con esta flecha, por ejemplo, aquí mismo. Así que cópialo, pegarlo aquí mismo. Y quizá pueda posicionarlo aquí mismo. Entonces, cuando mis usuarios hacen clic en este botón, ¿a dónde los va a llevar? Porque esta es una pantalla de inicio de sesión. Quizás, como pueden ver, aquí tenemos diferentes categorías. A lo mejor vamos a saltar al comercio electrónico y lo mejor voy a ir a esto y luego a esto. Y luego veamos tal vez también esta pantalla, así. Control C saltando justo aquí, control V para pegarlos todos. Y voy a hacer en esto. Entonces, por ejemplo, van a venir a esta pantalla aquí mismo. Y luego voy a duplicar mi flecha Control C Control, o Control D, lo que quieras. Y luego por ejemplo, si hacen clic en a, posiciónelo en la parte superior. Si hace clic en este producto, por ejemplo, o justo aquí, y tenemos diferentes flechas aquí mismo. Entonces si realmente eliminé esta, puedo usar esta flecha por ejemplo. Para que puedas ver por qué estas plantillas son importantes. Porque en realidad se puede trabajar mucho más rápido cuando se está haciendo esto. Entonces si una posición de Control X, Control V y justo aquí, y cuando el clic justo aquí, digamos que eso es un botón. Y puedes hacer lo mismo que mostré anteriormente. Por lo que puedes extender estos si quieres. Y déjame extenderme en realidad a aquí mismo. En realidad puedo saltar a esta pantalla. Por lo que se puede ver que esto no está en línea con todos estos flujos de tareas anteriores porque se trata de un usuario mucho más complejo porque como se puede ver, tenemos dos botones, por lo que pueden hacer clic en Cancelar, por ejemplo, y en realidad podemos duplicar esta flecha. En realidad puedo darle la vuelta, por ejemplo, sólo para mostrarte cómo podría ser eso. Por lo que quizá pueda posicionarlo aquí mismo. A lo mejor puedo mover un poco a estos dos hacia arriba. Puedo posicionar esto hasta aquí. A lo mejor pueden hacer click ahí mismo. Y entonces esta flecha en realidad los va a llevar a esta primera pantalla, por ejemplo. Incluso puedes darle la vuelta. Y luego puedes posicionar estos elementos. Te voy a mostrar eso en tan solo un segundo. Por lo que Control D en este. Y puedes posicionarlo o justo por aquí, entonces puedes extender esto. Y tal vez esto podría parecer un poco aburrido, pero es realmente importante entender este flujo de usuario. Y de aquí en adelante, por ejemplo, si realmente hacen click en este botón azul, ¿a dónde los lleva? Y en realidad tomemos esto solo para que sea un poco más sencillo navegar por ahí. Entonces voy a mover esto a aquí, tal vez así, y luego posicionar esto un poco hacia adentro. Voy a borrar este. Por lo que se puede ver lo rápido que es esto para realmente crear. Entonces cuando hagan clic en ese botón azul, tal vez puedan venir a esta pantalla. Y de Dan en adelante, déjame posicionar esta flecha hasta la cima, aquí mismo. Colóquelo aquí. Y entonces realmente puedo hacer clic aquí y mover esto así y reorganizar esto en tan solo un poquito. mejor esta es nuestra pantalla de confirmación o lo que sea, podemos llamarla así. Y luego cuando hacen clic en este botón azul, en realidad pueden ir a la página de compras y en realidad pueden completar este paso. Ahora, lo que podemos hacer con este es que realmente podemos combinarlos con los flujos de tareas originales que les mostré. Entonces, por ejemplo, puedo usar este círculo de entrada. Y entonces sólo discúlpame porque tengo muchas de estas abiertas. Puedo posicionarlo aquí mismo y puedo moverlo. Se puede ver que está vinculado porque en realidad es una instancia de un componente diferente. Por lo que puedo hacer clic derecho aquí mismo y puedo hacerlo local. Y entonces lo que puedo hacer es en realidad saltar seleccionar ambos como así, y golpear el control Shift y reducirlo un poco. También puedo reducir mis textos. Entonces tal vez 10, algo así. Entonces podemos usarlo como un punto de entrada aquí mismo. Pero también puedes hacer es usar estos. Entonces por ejemplo, este es nuestro hogar, tal vez ese es nuestro control de punto de entrada C. Y entonces puedo, en lugar de este círculo de entrada, puedo hacer que se vea un poco interesante posicionando estos. Por lo que puedo posicionar este para ser mi círculo de entrada. Y por ejemplo, puedo usar este color si quiero. Puedo cambiar este icono. Si quiero. Incluso puedo cambiar el color del icono. Simplemente haz click justo ahí, puedes hacer lo que quieras con estos. Además, lo que puedes ver aquí mismo son todas estas maquetas diferentes, que básicamente son atrevidos igual de formas. Y luego puedes usar estas maquetas para mostrar, por ejemplo, esta es una vista de una aplicación móvil y puedo usar esta simple maqueta, puede estar posicionándola justo aquí en la parte superior, tal vez escribir algunos textos aquí mismo. Mueve un poco todos estos elementos hacia abajo, como tal tal vez y luego escribe aquí mismo. Esta es una mirada de cómo va a quedar la versión móvil en, por ejemplo, Android o iOS o lo que quieras. O puedo usar todas estas otras. Entonces navegador, versión de laptop, versión de escritorio, lo que sea. Entonces si se completa el paso, podemos usar éste por ejemplo. Entonces vamos a posicionarlo aquí mismo. Y en realidad puedo posicionarlo en el centro de mi flecha así. Y entonces realmente puedo usar mi color principal, por ejemplo, para ver que se complete el paso. O puedo posicionar eso justo aquí, justo por ahí, agrandarlo si quiero. Incluso puedo incluirle un borde, lo que sea que pueda usar una sombra de gota sobre él en este fondo. Al igual que así puedo posicionarme ahí dentro. Entonces, cualquiera que sea tu estilo para este flujo de usuario en particular, entonces puedes implementar ese estilo usando estas plantillas. Y puedes ver en cuestión de minutos, si no estás hablando como yo, obviamente puedes crear esto en un periodo de tiempo mucho más corto. Entonces esto fluía si estamos saltando justo aquí, solo para mostrarte rápidamente un Web Elements de flujo de alambre, diagrama de flujo. Y se puede ver cuántos elementos diferentes tenemos aquí mismo. Y obviamente puedes crear componentes a partir de estos elementos. Se pueden cambiar sus colores. Entonces, por ejemplo, quiero cambiar el color de este encabezado. Puedo posicionarlo aquí mismo. O si quiero cambiar completamente el color de mi fondo, puedes cambiarlo así. Y obviamente si tienes colores como nuestro 3D te muestran en esta plantilla por defecto como esta. Entonces si has creado tus colores, simplemente puedes aplicar ese color a ese elemento. Vas a trabajar mucho más rápido de esa manera. Pero si no lo haces, está bien. Puedes saltar aquí mismo y cambiar los colores incluso de esto. Entonces, por ejemplo, esto puede ser, no sé, un rojo brillante o lo que sea. Y entonces este puede ser del mismo color, así que puedo seleccionarlo así y se puede ver cómo se ve eso. Por lo que obviamente hay muchas opciones incluidas aquí y todos estos elementos son iguales. Se puede ver que tenemos muchas flechas diferentes incluidas dentro. De un punto de entrada a muchos puntos de salida. Puedes hacer lo que quieras. Puedes usar peligro, puedes usar una actualización. Y realmente te animo a usar tus propios iconos. Puedes utilizar estos iconos izquierdo y derecho para los pasos si quieres. Pero básicamente se puede ver cómo se ven estos. Tienen mucho más detalles incluidos dentro. En lugar de estos que se muestran previamente para los flujos de tareas. Entonces básicamente, tienes dos opciones. Puedes usar esta versión que es extremadamente ligera, o puedes usar esta versión, que es mucho más compleja, pero estos no son de diseño final. Estos son solo para transmitir tus ideas mucho mejor a tus compañeros de equipo, tus clientes, a tus desarrolladores. Y el beneficio de esto es porque tienes múltiples puntos de entrada y salida, múltiples flujos. Entonces por ejemplo, si voy a la que creamos usando flow v, Así que así, puedo crear, como mencioné aquí mismo. Entonces tenemos estas dos flechas. Por ejemplo, tenemos un botón de cierre justo aquí, por ejemplo, dónde nos lleva ese botón de cierre, nos lleva de vuelta a la pantalla de inicio de sesión o a esta pantalla. Por lo que solo te puedes imaginar que puedes crear estos flujos múltiples, flujos complejos y lo mismo como una plantilla que te estoy dando de forma gratuita. Puedes saltar aquí mismo. Y simplemente puedes ajustar todos estos elementos y hacerlos más pequeños. Si quieres aplicar un color diferente, puedes hacerlo también. Para que puedas usar el color que quieras en estos. Y por supuesto, porque hay muchos, muchos, muchos de estos diferentes elementos divididos en categorías de testimonios promocionales, equipo, blog, comercio electrónico, etcétera. Tanto para la versión móvil como para escritorio, tu flujo de trabajo va a ser mucho más rápido y tu tiempo de entrega va a ser mucho más rápido. Y una vez más, el beneficio de usar estos es que tus clientes van a entender eres mucho mejor que si simplemente estás usando algo como esto. Este es un fantástico punto de partida. Pero si las cosas necesitan ser un poco más complejas, por ejemplo, como te muestro aquí mismo. Por lo que tienes que crear múltiples flujos, obviamente como en cada aplicación de aquí mismo, entonces realmente recomiendo usar nuestra plantilla premium así porque realmente va a mejorar tu flujo de trabajo dramáticamente. Y realmente te va a permitir trabajar mucho más rápido y mostrar tus ideas a tus compañeros de equipo, clientes o desarrolladores, que van a entender. Porque sobre todo con los clientes mostrándoles algo así no los va a hacer realmente fáciles de entender. Pero mostrarles algo como esto, por ejemplo, les va a hacer entender mucho mejor porque van a reconocer al menos algunos de estos elementos lugar de mostrarlos y estas formas en blanco como círculos y cuadrados y diamantes y cosas por el estilo. Entonces esa fue una mirada muy rápida en estas plantillas premium. Una vez más, si quieres conseguirlos con un descuento muy grande, los enlaces van a estar en el PDF. Simplemente puedes hacer clic en esos enlaces y simplemente ingresaste ese código de descuento que te voy a proporcionar y luego conseguirlos y usarlos en XD, puedes ver cómo algo así puede mejorar tu flujo de trabajo de manera espectacular. Todavía vas a conseguir ese flujo de tareas básico de forma gratuita, por supuesto. Y puedes descargarlo y usarlo. Pero si quieres subir tu juego, si queremos mostrar tus ideas mejor manera posible a tus clientes, compañeros de equipo y desarrolladores. Entonces usar estas plantillas premium van a mejorar masivamente el flujo de trabajo. Como viste, puedes cambiar cualquier cosa, puedes ajustarlos como quieras. Puedes trabajar tan rápido o lento como quieras. Puedes usar todo tipo de colores diferentes, todo tipo de diferentes formas e iconos y cosas así. Entonces si quieres usar algo como esto, una vez más, te voy a dar los enlaces y descuentos en un PDF y puedes comprobarlos. En el siguiente video, vamos a hablar de cómo puedes compartir algo como esto con tus compañeros de equipo, clientes y desarrolladores. Entonces te veré ahí. 7. Comparte tus flujos: Compartir tus flujos de usuario es parte realmente importante de todo el proceso porque realmente va a permitir que tus clientes, compañeros de equipo y desarrolladores entiendan tu proceso de pensamiento detrás de todo esto. Y realmente va a hacer que la discusión sea mucho más simple que simplemente hacer esto y luego simplemente decirles con palabras o algo así. Entonces en este video, te voy a mostrar algunas formas prácticas que puedes usar para mostrarlas a tus clientes y desarrolladores. Entonces primero lo es, y creé esto para mis plantillas premium las cuales se te muestran. Entonces barco para un fluvial que estás viendo justo aquí, y para diagramas de flujo de alambre. Y puedes abrirlos si compras estos, que mencioné en un video anterior. Estos son estos papeles. Por lo que este es tamaño A4, este es el tamaño de letra de Estados Unidos. Y simplemente puedes abrirlos a medida que trabajas y alinear todos tus elementos aquí mismo, y luego simplemente imprimir todos estos. Se puede seleccionar esto. Puedes golpear Control o Comando E dentro de XD, y luego puedes seleccionar PDF aquí mismo. Entonces puedes golpear Export y se va a exportar este PDF listo para imprimir. Puedes imprimirlo y luego puedes mostrárselo a tus clientes. O si tus clientes están trabajando de forma remota y no estás a su alcance o algo así, entonces simplemente puedes compartir estos PDF con tus clientes y luego pueden imprimir este video al sur y luego dejar notas en esos PDF. O aún mejor, simplemente puedes alinearlos aquí mismo, y luego puedes hacer clic aquí para compartir esto con tus desarrolladores o clientes. Cómo funciona eso es que simplemente puedes hacer clic aquí. Y va a generar este enlace público. Y entonces puedes darle un nombre aquí mismo. Por ejemplo, digamos elemento Webflow o flujo de alambre para un sitio web o algo así. Y entonces puedes mostrarlo aquí mismo. Este es el nombre del enlace, y luego simplemente puedes copiar este enlace y luego puedes compartirlo con tus clientes. Pueden entonces en el navegador, dejar tus comentarios aquí mismo, y luego simplemente puedes cambiar cómo se ve este Flujo de Usuario dentro de tu XD y luego volver aquí mismo dentro de la pestaña Compartir. Y luego simplemente actualiza ese enlace y luego vuelve y comparte ese enlace una vez más con tu cliente. Nombre del cliente, nombre del proyecto, fecha límite, número de páginas del sitio web y número de pantallas de aplicaciones es lo que realmente importa y lo que realmente va a determinar cuánto vas a cobrar en realidad al final de este proyecto, o cuánto tiempo va a tardar el proyecto. Porque por lo general, sobre todo los diseñadores freelance están cobrando por todo el proyecto. Entonces saben, por ejemplo, por conversación con el cliente, si el cliente tiene proyecto existente o algo así, realmente sabrán cuánto van a cobrar al reunir toda esa información. Pero si no, simplemente puedes trabajar por etapas. Por lo que puedes cobrar por esta exploración y pruebas de usuarios, fase de investigación de usuarios. Y luego después de completar esto, vas a saber simplemente usando estos flujos de usuario, cuántas pantallas vas a diseñar más adelante, cuántas páginas de sitios web vas a diseñar. Y desde el número de muerte, puedes entonces hacer una conjetura educada y cobrar cantidad de dinero de deuda a tu cliente. Por eso compartir es realmente importante en esta fase del proyecto. Porque vas a saber fácilmente mediante el uso de estos flujos de usuario cuánto dinero realmente vas a cobrar a tus clientes. Ahora, este es uno de los métodos y luego puedes seguir esta plantilla, sobre todo si compras estos o si no, simplemente puedes usar algo como esto. Entonces digamos que creaste esto. Puedes darle un nombre aquí mismo, así que haz doble clic y llámalo como quieras. Entonces, por ejemplo, flujo novedoso. Por supuesto, esto va a ser mucho más limpio cuando realmente lo estás creando. Puedes presionar Control o Comando E. Y luego en lugar de PDF, puedes seleccionar un JPEG o un PNG. Puedes golpear Export y luego puedes enviarlo a un cliente de esa manera. Además, lo que puedes hacer es conectar estas páginas. Entonces digamos que este es el puerto número 1, este es nuestro puerto número 2. Puedes ir al modo prototipo, conectarlos, y luego simplemente puedes compartir ese prototipo, como mencioné aquí mismo, luego copiar ese enlace y compartirlo con tu cliente. Ahora, la ventaja de usar algo como esto dentro de Adobe XD directamente es porque no estás desperdiciando papel. No estás perdiendo el tiempo. No estás perdiendo su tiempo. Simplemente puedes compartir un enlace. Pueden acceder a ese enlace, comentar ese enlace, volver a ti con sus cambios. Puedes cambiarlo dentro de XD, actualizar el enlace, enviarlo de nuevo, y luego pueden dejar la nueva retroalimentación hasta que todo el mundo esté satisfecho. Y después de eso, vas a iniciar el proceso de diseño con unas instrucciones claras de tus clientes, con un claro entendimiento por parte de ellos y de los desarrolladores en cuanto a lo que se tiene que hacer dentro de este proyecto. 8. Proyecto de clase: Tu proyecto de clase para esta clase es crear un flujo de tareas usando esta plantilla que proporcioné. Ahora puedes posicionar estos elementos como quieras, pero lo que te recomendaría es eliminarlos todos y luego simplemente usar estos elementos principales, lo que quieras, puedes hacer clic, arrastrar y soltar en tu página y luego simplemente posicionarlos de tal manera que tenga sentido para ti. Se puede cambiar todo el texto que hay dentro. Y lo que realmente te animaría a hacer es cambiar estos colores por dentro y luego adaptarlos a tu cliente ideal o a dos clientes imaginarios o lo que quieras, y luego simplemente subirlo a tu proyecto de clase. Lo que puedes hacer es después de alinear todos estos a la página, puedes seleccionarlo, pulsar Control o Comando E exportado es PNG o JPEG, lo que quieras, pulsa Exportar. Y esto simplemente sube esa imagen a nuestro proyecto de clase. Realmente espero con ansias lo que ustedes puedan crear. Y por eso te estoy dando esta plantilla para poder practicar, simplemente abre en Adobe XD y sigue estas instrucciones de esta clase. Y realmente no puedo esperar a ver lo que ustedes pueden crear. 9. Outro: Por lo que ahí tienes, Has llegado al final de la clase. Realmente espero que esta clase te haya ayudado a entender qué son los flujos de usuarios. ¿ Por qué son útiles y por qué son la parte realmente importante del proceso de diseño y cómo usar este flujo de usuario puede ayudarte a terminar tus trabajos de diseño mucho más rápido y con mejor integridad, con mejores habilidades de planeación, con mejores habilidades para optimizar el flujo de tus usuarios de la mejor manera posible. Gracias una vez más por ver. De verdad espero que encuentres algún valor en ella. En una esperanza de verdad vas a aplicar algunos de estos consejos y técnicas se utilizan, algunas de estas plantillas que te mostraré en tu trabajo futuro. Gracias de nuevo por ver y de verdad espero verte en algunas de mis otras clases. Cuídate.