Fundamentos de Adobe Xd 2021: clase de diseño UI / UX

1. Introducción a la clase: Hey diseñador y mi nombre es Alex y bienvenidos a la clase de habilidadcompartir en Adobe XD 2021. En esta clase, vamos a cubrir herramientas básicas de Adobe XD. Y te voy a guiar a través mi proceso de diseño y mostrarte todas las principales herramientas y características que Adobe XD tiene para ofrecer para que puedas ser un mejor diseñador UX de UI. Soy creador de productos de diseño y hasta ahora tengo más de 500 productos que he creado. También soy creador de cursos y hasta el momento tengo más de 20 cursos y tengo más de 30 mil alumnos inscritos en mis cursos. Y en este curso gratuito de Adobe XD, vas a aprender qué es Adobe XD, cómo puedes descargarlo y cómo funcionan las actualizaciones, Mac versus Windows. ¿ Y cuál es la diferencia? Cómo funciona la interfaz y todas las características clave de la interfaz como formas, mental, dex, herramienta, barra Edwards, Bibliotecas, capas y plug-ins. Vamos a explorar una cuadrícula de repetición y qué puede hacer por tu diseño. Cómo se pueden utilizar las máscaras, que son funciones 3D en Adobe XD. ¿ Cómo puedes usar maquetas, cuáles son los atajos para mejorar tu velocidad trabajando con diferentes archivos y cómo puedes abrir diferentes archivos y trabajar con ellos en Adobe XD? ¿ Cómo se puede trabajar con recursos libres y cuál es la diferencia entre recursos gratuitos y premium y por qué uno es mejor que el otro. Usar kits de interfaz de usuario para mejorar tu flujo de trabajo, crear proyectos de diseño e ir de crear diseño, crear prototipos de tu diseño, compartir tu diseño con clientes y desarrolladores, exportar tu diseño, crear un sistema de diseño, crear fichas de diseño, crear guía de estilo, cómo crear grandes presentaciones. Y finalmente, Futuro de las herramientas de diseño. Vamos a cubrir mucho en esta clase gratuita. Por lo que si en algún momento desea acceder a los enlaces, se proporcionará PDF. Por lo que puedes descargar ese PDF y simplemente puedes hacer clic en los enlaces y visitar lo que sea que estoy hablando en este curso gratuito para que puedas seguir a lo largo de tu proyecto de clase para esta clase es utilizar los consejos y técnicas que aprendas de este curso para aplicarlos a su proceso de diseño. Y realmente me gustaría que crearas ya sea un sitio web de una sola página o una sola pantalla para la app usando los consejos y técnicas que aprenderás de este curso y que los subas a los proyectos de la clase. Adobe XD es una de las mejores herramientas que hay para los diseñadores UX de UI se creen realmente que porque lo estoy usando todos los días. En mi canal de YouTube, he creado un montón de estos diferentes videos explicando todo sobre Adobe XD, diferentes herramientas y técnicas. Entonces si quieres, también puedes comprobarlo por ahora sin más preámbulos. Empecemos con el curso. 2. ¿Qué es Adobe Xd: Adobe XD es una herramienta de diseño UX UI creada por Adobe. Puedes diseñar, crear prototipos, compartir y colaborar todo dentro de una sola aplicación. No es necesario cambiar las apps. No es necesario instalar cosas separadas en su máquina. Puedes hacerlo todo dentro de una aplicación. Es genial porque es gratis para empezar. Y puedes empezar simplemente descargando e instalando Adobe XD en tu máquina. Eso lo voy a mostrar en el siguiente apartado. Pero básicamente lo que puedes hacer en esta herramienta, si revisas aquí mismo y comienzas a desplazarte hacia abajo, puedes ver que es cuatro diseño. Para que puedas crear diseño de aplicaciones móviles. Puedes crear un diseño de tablero diseñado por un sitio web sea cual sea el tipo de diseño UX de UI que quieras, incluso puedes crear chicos de estilo. Puedes ver que puedes crear prototipos, incluir diferentes interacciones, incluir diferentes animaciones que puedes compartir con clientes, con desarrolladores, con tus compañeros de equipo, todo con Adobe XD. Y puedes hacer clic en Iniciar aquí de forma gratuita para descargar e instalar Adobe XD. Y de eso vamos a hablar a continuación. 3. Mac Vs Pc: Entonces como dije, Adobe XD funciona bien tanto en Mac como en PC. Y la diferencia crucial entre esos dos OSs es cómo se ven. Entonces básicamente en ventanas tienes este menú de hamburguesas en la parte superior izquierda. Y debido a que estoy trabajando en Windows, te voy a mostrar eso en tan solo un segundo. Pero en un Mac, tienes múltiples de estas opciones simplemente salpicadas en la parte superior de tu pantalla. Y esa es realmente la diferencia crucial entre Mac y PC. Y una diferencia más es Grabación de prototipos, porque Adobe XD tiene esta función donde puedes grabar tus prototipos y puedes compartirlos como un video, ya sea a tus clientes o puedes compartirlos en redes sociales solo para crear una influencia más grande a tu alrededor. Básicamente, la diferencia crucial entre Mac y PC es que tú, en el Mac, tienes esta opción nativa donde solo puedes hacer clic en Grabar y lo va a requerir y puedes hacer click stop y ese es básicamente el final de la misma. Mientras estás en las ventanas, tienes que usar su función de grabación de juegos y puedes acceder a ella pulsando la tecla Windows y la tecla G, y luego puedes iniciar tu grabación de esa manera. También voy a demostrar eso un poco más tarde en este curso. Y por último, lo que quería mencionar rápidamente es que si tienes Windows siete Windows, ocho Windows waster, Adobe XD no funcionará en tu máquina. Es necesario tener instalado Adobe XD en tu ventana máquina Stan. De preferencia, si puedes instalarlo en la actualización Creator de tu máquina Windows, entonces funcionará sin problemas, pero no es compatible con versiones anteriores de ventanas como 78 o incluso sabiduría. Entonces eso es lo que necesitas saber. 4. Pantalla de bienvenida: Cuando abras tu Adobe XD, te llevan a la pantalla de bienvenida y te voy a mostrar qué es la crema de bienvenida y cómo cambia con el tiempo. Entonces aquí está la pantalla de bienvenida y puedes ver que estás en la pantalla de inicio aquí. Puedes hacer clic en aprender y puedes acceder a algunos tutoriales del equipo de Adobe XD. También puedes hacer clic aquí para conocer sus nuevas características y conocer algunas técnicas de su equipo. Harbin skill lanza, generalmente cada semana, nuevos tutoriales sobre Adobe XD y es genial si quieres, puedes seguirlo en Behance también para estas transmisiones en vivo sobre Adobe XD. Básicamente, eso es lo que es Learn tab, los documentos en la nube porque XD se basa generalmente en la nube, pero también puedes guardar documentos locales en tu máquina si quieres llamar a los documentos, son todos tus documentos que están dentro de la nube. Por lo que simplemente puede hacer clic aquí para acceder a ellos. Compartidos contigo son los documentos que son compartidos contigo por los clientes o por tus compañeros de equipo. Eliminados, son todos los archivos que has borrado previamente porque recuerda que tienes espacio limitado en la versión gratuita de Adobe XD y solo tienes un solo prototipo el cual puedes compartir con tus clientes o interesados. Para poder tener múltiples prototipos al mismo tiempo disponibles para ti, necesitas actualizar a planta pagada. Y por eso te estoy mostrando esto en un plan gratuito. Se puede ver que estoy en un plan gratuito porque dice up upgrade y dice iniciar un plan. Pero quería mostrarles que se pueden hacer todas estas cosas dentro de la tierra de startup, sobre todo si se empieza. Por lo que no es necesario pagar las versiones premium desde el principio. Puedes probar esta herramienta. Se puede ver si es adecuado para usted, si la UX de la UI es adecuada para usted, y luego si lo es, entonces se puede proceder y pagar por esta herramienta. Por lo que moviéndose por la línea, hemos gestionado enlaces. Entonces básicamente estos son los enlaces que tienes un compartido con tus clientes o stakeholders. Y en tu computadora puedes localizar los archivos en tu computadora. Aquí puedes verlo dice que los prototipos de diseño comparten porque eso es lo que hace Adobe XD y eso es lo que es. Y debajo de eso tenemos algunos aeropuertos los cuales puedes crear a partir de aquí. Estos son precreados nuestros tableros, y se puede ver para móviles, tenemos tamaños de iPhone, esperamos Google Pixel, iPad, Nexus y así sucesivamente. Entonces para la Web, se puede ver que tenemos 1920 por 1080. Y si hago click aquí mismo, puedes ver que te están dando estas opciones recompuestas. Si quieres usarlos, entonces tenemos tamaños de redes sociales. Para que puedas ver tenemos posts de historias de Instagram, encabezado de publicaciones de Twitter, Facebook, portada de Facebook, y finalmente video de YouTube. Y finalmente tenemos tamaño personalizado. Por lo que puedes usar este tamaño personalizado para cualquier talla que quieras. Puedes ingresar el valor de píxel aquí mismo, y simplemente puedes hacer clic en él y luego se abrirá como un nuevo documento. Y con eso, nuestro tamaño de puerto dentro. Entonces como dije, puedes usar cualquiera de estos o simplemente puedes ingresar un valor personalizado aquí mismo. Y finalmente aquí tenemos documentos recientes. Entonces estos son solo los documentos que abriste. Y puedes hacer clic aquí para acceder a algunos de los artículos más recientes de su blog y publicar ayuda y así sucesivamente. Según expliqué, Una cosa a destacar es que esta pantalla de bienvenida va a cambiar con el tiempo. Así que solo asegúrate de entender que si estás viendo este video o discurso en el futuro y estás revisando esto y no se ve igual que el tuyo, asegúrate de entender que lo están actualizando todo el tiempo. Pero estas son solo las características y herramientas básicas que puedes esperar aquí en la pantalla de bienvenida. Entonces para empezar, sólo voy a elegir uno, rpart psi iso, tal vez 1920 por 1080. Y voy a entrar aquí sólo para mostrarles cómo se ve esto. Entonces es un 80. Puedes hacer click Enter o puedes dar click aquí para abrirla y descartarla. Parece que una vez que se abre, déjame agrandar un poco. Y ahora vamos a pasar a Adobe XD es herramientas y características y lo que puedes esperar. 5. Interfaz: El bello de Adobe XD es que tiene interfaz realmente simple de usar. Entonces estoy en una versión para Windows, como dije, y esta es la diferencia clave entre Windows y Mac, porque en windows tienes este menú de hamburguesas y puedes acceder a todas tus herramientas desde aquí. Y también puedes hacer clic derecho en cualquier parte de tu documento para acceder a algunas características adicionales como estas. Puedes hacer clic derecho aquí mismo. Y luego tienes sub menús a los que puedes ingresar y usar algunas de las características. Si bien en Mac, vas a tener todas estas opciones justo aquí en la parte superior y por debajo de eso. Entonces esa es realmente la diferencia crucial entre XD en un Mac y en un PC. Entonces cuando se trata de interfaz, se puede ver que está dividido en tres partes. Aquí mismo tienes tus herramientas, por lo que tienes tu herramienta de selección para seleccionar múltiples cosas. Tienes tus formas aquí mismo. Después tienes un lápiz, textual, nuestra herramienta de tableros, y finalmente herramienta de zoom. Y abajo aquí tenemos bibliotecas, tenemos capas, tenemos plugins justo aquí en la parte superior. Hemos diseñado prototipos compartir, porque esas son las cosas por las que XD es famoso. Y simplemente puedes cambiar entre estas tres pestañas para acceder a diferentes funcionalidades de Adobe XD. Por último, tenemos este panel justo aquí a la derecha. Y dependiendo de lo que estés haciendo en tu pizarra, dependiendo de lo que se seleccione, este panel derecho siempre está cambiando. Siempre tiene algunas características en su interior para todas las cosas que estás haciendo, por ejemplo, posicionamiento y así sucesivamente. Pero sigue cambiando dependiendo de lo que hayas seleccionado. Ya sea que eso sea prototipos de diseño compartan, si estás trabajando algo aquí mismo en tu puerto R. Entonces pasemos ahora a las formas y te explicaré qué tipo de formas tienes en Adobe XD y qué puedes hacer con ellas. 6. Formas: Empecemos con las formas y las formas que se encuentran aquí mismo. Y te puedes ver cómo rectángulo tienes labios, tienes polígono, y finalmente tienes tu herramienta de línea. Y finalmente puedes crear formas personalizadas usando mental. Pero dedicaré un poco más de tiempo al manto mismo. Entonces, para usar cualquier forma de aquí, todo lo que necesitas hacer es simplemente hacer clic en él para seleccionarlo, y luego simplemente dibujar en tus tableros. Y tan pronto como lo hagas tienes algunos valores aquí mismo. Entonces vamos uno por uno y te mostraré cuáles son todos esos valores para cada una de estas formas. Entonces primero lo primero, dibujemos rápidamente estas formas para que pueda mostrarte cómo todas son nuclidas así. Y simplemente estoy usando el teclado v omega para usar la herramienta Select con el fin de posicionarlo. Y por último, sigamos adelante y creemos una forma con nuestro mental. Y déjenme mostrarles rápidamente las diferencias. Por lo que puedes ver aquí mismo en tu panel Capas cual puedes ocultar simplemente haciendo clic aquí. Tenemos rectángulo, que es éste, línea de polígono de elipse. Y por último parte, porque utilizamos la herramienta de lápiz para crear esta parte personalizada. Ahora lo que puedes hacer con todas tus formas es si seleccionas una forma, puedes ver todas estas herramientas disponibles para ti aquí mismo. Por lo que aquí tenemos herramientas de posicionamiento para que puedas posicionarlo a cualquier parte del aeropuerto que quieras. Tenemos una grilla de repetición y te explicaré la repetición Grado un poco más tarde con más detalle y qué puedes hacer con ella. Y luego tenemos herramientas de fusión y operaciones booleanas. Por lo que básicamente puedes seleccionar dos o más de estas puertas y puedes sumar, restar, intersectar, y finalmente excluir, solapar. Y realmente te animo si no sabes cuáles son todas estas cosas, a seleccionar dos o más formas y jugar con ellas y ver qué puedes hacer. Pero básicamente, puedes combinarlos en una sola forma o puedes agregarle algunas propiedades múltiples, como por ejemplo, contorno excluido y más. Si avanzamos hacia abajo, entonces nos hemos transformado. Puedes cambiar tu ancho, puedes cambiar tu altura. Posicionamiento en el eje x e y, tienes tu rotación. Entonces si entro 45 grados, por ejemplo, se puede ver girado, pero también se puede pasar el ratón aquí mismo, mantenga presionada la tecla Mayús por ejemplo, y girará en incrementos. O puedes golpear el control z para volver atrás. A continuación, tenemos volteo, así voltear horizontal, voltear vertical. Debajo de eso tenemos un pergamino horizontal. Y eso lo explicaré un poco más tarde. De qué se trata. Tenemos desplazamiento vertical y tenemos desplazamiento en todas las posiciones. Por último, tenemos posición fija al desplazarnos. Entonces, cuando estás creando diseñadores de sitios web o diseños de aplicaciones, quieres que algunos elementos se corrijan en su lugar una vez que el usuario comience a gatear. Entonces esto es para lo que se utiliza y te voy a mostrar eso en ejemplos posteriores también. Debajo de eso, como dije, tenemos redimensionamiento responsive. Y te voy a mostrar un poco más sobre el redimensionamiento responsive más adelante también. Debajo de eso tenemos obesidad. Para que puedas cambiar la obesidad de tu objeto simplemente usando este deslizador o puedes usar atajos de teclado. Entonces uno es para 10%, para, es para el 40%, por ejemplo, ocho es 4800% es para el 100%. Debajo de eso, tienes modos de mezcla y tienes múltiples modos de mezcla, básicamente los mismos que en Photoshop, Illustrator. Entonces si alguna vez usaste para la tienda, realmente te animo a probar estos modos de mezcla porque funcionan casi igual que en Photoshop, pero no tienen casi tantas funciones como en arbustos forestales, obviamente porque en xsd, solo está optimizado para el trabajo de UI y UX. Debajo de eso. Tenemos radio de esquina. Entonces por el momento es 0, pero si quieres redondear las esquinas, puedes usar estos puntos y simplemente hacer clic y arrastrar. Y va a dar la vuelta a las esquinas. Y se puede ver, como estoy haciendo esto, los valores aquí están cambiando. O simplemente puedes introducir manualmente, por ejemplo, 24, el radio de esquina y correrá tus esquinas a ese valor. También puedes alrededor de las esquinas de cada uno tus rincones. Entonces por ejemplo, voy a golpear 0 y se puede ver arriba a la izquierda es 0, justo aquí. Y se puede hacer eso por todo oregon. Simplemente coef aquí anti 20 y se redondeará en todas las esquinas. A continuación viene el color de relleno. Puedes hacer click ahí mismo y puedes cambiar el color de relleno. Puedes ingresar el código hexadecimal aquí mismo. Entonces por ejemplo, tres 0s, C6, FF para un bonito azul. Y aquí tienes tus valores fronterizos blancos. Pero antes de pasar a las fronteras, se puede cambiar de espectro de color. Por qué aquí puedes cambiar qué tan claro u oscuro va a ser tu color. Puedes cambiar la opacidad de tu color. Puedes agregar código hexadecimal o simplemente puedes hacer clic aquí para guardar el color como muestra para poder usarlo más tarde, pero simplemente pinchando sobre él. Y se aplicará a cualquier objeto seleccionado o en tu aeropuerto. A continuación, si hace clic aquí, se va a abrir un gradiente lineal o gradiente radial. Y básicamente tienes estas tres opciones. Entonces por el momento, es el color sólido. Si hago click aquí mismo, puedes ver que tenemos gradiente lineal y puedes agregar tantas paradas como quieras. Simplemente puedes hacer clic aquí, luego puedes girar tu gradiente para ir de un lado a otro. Y finalmente, para cada una de estas paradas, puedes agregar un color diferente o puedes agregar un tono diferente de tu color. También puedes hacer clic y reducir su obesidad como así para cada color individual. Pero los gradientes radiales básicamente se ven exactamente igual, pero es InCircle. Pero sólo voy a usar Carlos sólido para este ejemplo para mantener las cosas bonitas y sencillas. Debajo de eso tenemos frontera. Y si hago clic aquí mismo, se puede ver que la frontera está desapareciendo. Y si yo aumento el tamaño, así por ejemplo diez, se puede ver ahora se ha incrementado. También puedes hacer clic aquí para cambiar el color de tu borde. Misma historia, código hexadecimal de obesidad. También puedes añadirlo como muestra o puedes hacer clic aquí para probar un color para donde quieras. Y déjame rápidamente muestrear este color azul como mi frontera. Pero volvamos a aquí y permítanme explicarles todos estos. Entonces tenemos ancho de trazo, que es básicamente lo que estás viendo aquí mismo. Entonces tenemos el guión. Y si dijera, no sé, 50 por ejemplo, se puede ver que está dividido en estos guiones y la brecha también es de 50. Pero si aumento la brecha a 100, se puede ver ahora la brecha es mucho mayor entre estos guiones. Siempre puedes bajar a 0 y bajar a 0. A ver cómo se ve eso. Y aquí mismo tenemos algunas opciones de trazo diferentes. Entonces Inner Stroke, nuestro ictus centros de trazo. Y realmente te animo a probarlo y a probarlo por ti mismo por todas estas diferentes opciones y a ver qué están haciendo. Siguiente. Tenemos bootcamp, tapa redonda y brecha proyectante. Y esto es realmente útil si quieres tener bordes redondeados en tus líneas, por ejemplo. A continuación, tenemos al señor unido alrededor de un antro y de bisel. Y así es básicamente como van a quedar las esquinas. Por último, tenemos la sombra. Entonces esta es la sombra de fondo de tu forma misma. Los sólidos entran por ejemplo, algo realmente enorme. Entonces 202020, así que este es el eje x, este es el eje y, y esto es cuánto borroso quieres usar para tu sombra. Entonces si yo, por ejemplo, aumento esto, se puede ver que baja en eje y. Si lo incremento hasta aquí, se puede ver que va a la derecha en el eje x. Y si lo incremento hasta aquí, se puede ver que el valor de desenfoque está aumentando masivamente a medida que suben de tamaño y sólo se puede ir al 100. Entonces así es básicamente como se ve la sombra. Y también puedes ahorrar para el color y el borde. Se puede cambiar su color. Se puede ir de espectro de carbono, se puede interactuar alcance, se puede usar muestra de color y siempre se puede bajar hacia abajo en obesidad desde aquí. Por último, tenemos la opción de desenfoque de fondo y desenfoque de fondo es realmente útil, pero necesitas tener dos o más elementos para que esto funcione. Entonces déjame cambiar un poco esto. Entonces moví el rectángulo por encima de la elipse solo para poder mostrarte cómo se ve esto. Entonces si yo más bajo que mi cantidad, más bajo que mi brillo, solo puedes empezar a ver el círculo detrás de nuestro rectángulo y puedes ver cómo se ve eso. Por lo que puedo bajar mi cantidad o aumentarla. Puedo aumentar o disminuir mi brillo y puedo aumentar o disminuir mi obesidad dependiendo de lo que quiera hacer. Entonces básicamente así funciona esto y así es como se ve esto. Si lo deseas, puedes usar el desenfoque de fondo para todo tipo de cosas dentro de Adobe XD, especialmente útil para imágenes si quieres fondos borrosos. Si quieres usar algo así como morfismo de vidrio en tu diseño, entonces puedes usar esta opción con el desenfoque de fondo. Por último, tenemos Mark para exportación aquí mismo. Y esto es realmente útil si quieres exportar rápidamente todos tus archivos los cuales están marcados para la exportación, simplemente puedes hacer clic ahí mismo para comprobarlo. O siempre puedes ir justo aquí y dice Mark para la exportación. Y luego podrás exportar rápidamente todos tus archivos los cuales están marcados para exportarlos posteriormente para diseñadores, desarrolladores o clientes. Entonces si movemos uno hacia abajo, básicamente se puede ver que para todos estos, tenemos algunas de estas opciones. Algunos de ellos son iguales, algunos de ellos son un poco diferentes. Y por último, para este, quería mostrar porque esta es la herramienta poligonal, que es esta herramienta aquí mismo. Y puedes compartir un cuantos rincones quieras. Por lo que actualmente decía libre, por lo que es un triángulo. Pero si lo cambio a cinco, se puede ver cómo se ve eso. Si lo cambio a ocho, se ve así. También puedes aumentar o disminuir el tamaño de sus formas simplemente manteniendo presionada la tecla Mayús y haciendo clic en una de las esquinas para aumentar o disminuir el tamaño de tu forma. Como te explicamos, puedes cambiar lo grande que va a ser la frontera. Y por último, tenemos radio de esquina aquí así. Entonces vamos con 20. Y se puede ver que todas las esquinas para cada uno de estos trimestres se van a redondear sin importar el valor que haya ingresado aquí mismo. Por último, tenemos la relación estelar y no sé, digamos por ejemplo 50. Y se puede ver que crea estas diferentes estrellas. Entonces si entra, digamos diez, se puede ver una especie de engranaje o 70. Por lo que crea este diferente tipo de formas justo aquí. Pero si voy al 100, va a volver a nuestra forma original. También puedes hacer justo aquí es aguantar así y luego así. Tan mayor que y luego número tres, presiona Entrar y se va a crear un Corazón, que es un hábitat sencillo Adobe XD adolescente creado solo para hacerte la vida más fácil cuando comiences a crear estos iconos. Entonces básicamente tenemos las mismas opciones que siempre lo hicimos. Por lo que ahora puedes crear, puedes agregarle el color de relleno, puedes agregarlo al color del borde. Y siempre puedes volver a donde estabas anteriormente. Para que puedas crear todas estas diferentes opciones. Entonces, por ejemplo, he sido claramente tres. Puedo ir a mi color de relleno a algo así. Puedes agregar tu fondo, sombra, desenfoque de fondo, y todas estas opciones que te explicamos. Por último, déjalos que cubran rápidamente estas partes de lápiz y voy a volver a ello en tan solo un segundo y explicar un lápiz. Entonces lo que puedes hacer con él es exactamente lo mismo para todas las formas, pero esta es solo una forma personalizada que creaste usando mental. Y vamos a seguir adelante y voy a explicar qué herramienta de pluma es ahora. Entonces te voy a mostrar cómo puedes editar formas complejas y cómo podemos crear formas complejas usando lápiz. 7. Herramienta Pluma: Entonces como dije, puedes usar lápiz para crear todo tipo de formas, pero normalmente estás usando lápiz para crear estas formas más complejas como esta es la que se crea por. Vámonos una vez más. Por lo que puedes hacer click en tu lápiz y puedes hacer click donde quieras, y tienes estos puntos de anclaje. Y una vez que hayas terminado de completar tu forma, puedes arrastrarte un clic en el aeropuerto y puedes moverlo a donde quieras. Entonces digamos que quiero mover este de aquí. Y si haces doble clic en él, se convertirá en este arco. Y luego puedes cambiar cómo quieres que se posicione este arco. Y también puedes sostener turno para bajar en estos incrementos si quieres. Por lo que mantendrá el ángulo de tus puntos de anclaje al ángulo que quieras. Entonces por ejemplo, 4517918 y así sucesivamente. puedas hacer eso por todos estos, Simplemente haz doble clic o si cambias de opinión y cualquier punto, simplemente puedes hacer doble clic atrás y volverá a la recta. Pero lo que también puedes hacer, lo explicamos en secciones anteriores. Puedes cambiar el color de relleno, color de borde, pero volvamos atrás y te mostraré cómo se ven estos. Por lo que voy a acercar realmente de cerca y voy a dar clic en Mi oveja así. Entonces vamos a la gorra redonda. Y no se ve esto por el momento. Pero por ejemplo, si hago clic aquí, entonces aquí, y aquí, luego golpeo Escape Just para crear esta línea. Déjame seleccionarlo una vez más. Si me acerco realmente de cerca. Ahora puedes ver así es como se ve la gorra de brote. Parece. Entonces, básicamente, es realmente plano. Así es como se ve la tapa de proyección. Entonces es realmente plano, pero se extiende donde estás punto está en la gorra de brote, está justo en el centro, pero aquí en la tapa de proyección, está justo aquí. Entonces esa es la diferencia donde está tu punto final. Si bien con una gorra redonda, puedes ver que redondea tu gorra y corre tu línea en tu forma. Por lo que realmente puedes jugar con él de esa manera. Básicamente, si haces clic aquí y haces clic alrededor de la brecha, puedes estar seguro de que cada uno de estos puntos de anclaje contiene ese gorras redondeadas. O si tú, por ejemplo, quieres borrar uno de estos, podría haber puesto éste. Se puede ver que contiene esa gorra redonda y sigue dentro de esa forma. Entonces como dije, puedes jugar con todos estos ajustes diferentes y puedes hacer click y puedes mover todos estos puntos de anclaje. Y vamos con el Color de relleno y vamos a añadir un color de relleno. Añadamos frontera diferente. Démosle diez. Para que veas lo que está pasando. Y también puedes hacer click donde quieras añadir un nuevo punto de anclaje. Puedes extenderlas, hacer doble clic y cambiar y crear básicamente diferentes formas. Si quieres dibujar usando Adobe XD, puedes poner tu boceto dentro de Adobe XD. Entonces imaginemos que esta es la forma que estás creando. Puedes posicionarlo oreo boceto así por ejemplo. Entonces puedes bajar la obesidad y luego simplemente puedes hacer clic en tu forma y luego podrás ajustar todos estos más adelante, lo cual es extremadamente útil si estás trabajando como diseñador UX de UI. Si estás creando iconos, por ejemplo, y estás usando lápiz y papel para bosquejar estos diferentes iconos. Después puedes usar Adobe XD para ajustar todos estos y puedes ajustar el grosor del borde, 2222 o lo que quieras. Y básicamente, así es como funciona la herramienta de lápiz y cómo se ve en Adobe XD. 8. Herramienta de texto: A la hora de entrar en tus ataques que usar textos en Adobe XD, tienes algunas características geniales, pero no es tan avanzado como algo como Illustrator o InDesign, que se utiliza para imprimir. Entonces vamos a comprobarlo. Tienes unas opciones de texto aquí mismo. También puedes golpear t en tu palabra clave. Entonces déjame escribir algunos textos aleatorios hasta ideas solo para que tengamos algún texto en la página. Y para que pueda explicar qué es. Entonces digamos que lo hemos completado. Y si seleccioné, se puede ver que aquí tenemos estas opciones. Entonces una vez más, lo mismo para las formas. Tenemos estas opciones posicionadas en la parte superior, tenemos estas opciones de transformación, volteo, rotación, y sierra, redimensionamiento sin respuesta. Y aquí tenemos el panel de texto, que es parte importante de este impuesto. Puedes aumentar el tamaño de tu texto simplemente colocando el puntero sobre este punto, haciendo clic sobre él, y simplemente arrastrando. Y es algo realmente útil que hacer si quieres posicionar tu texto, puedes usarlos como un conjunto. Y por último, pasemos ahora al texto para que puedas elegir aquí tu familia de fuentes. Entonces vamos con cuatro pines, por ejemplo, que es una fuente de regla libre. Y voy a simplemente posicionarme y en el centro, así. Entonces lo que puedes hacer es usar el tamaño. Por lo que actualmente está en 47. Puedes usar Mayús y flecha arriba para saltar entre diez incrementos diferentes de tamaño 5767 y así sucesivamente. A continuación, tenemos cómo se va a ver el peso de la fuente. Por lo que dependiendo de la fuente que haya seleccionado aquí, podría tener diferentes pesos. Suma, algunos de ellos tienen uno o dos en algún lugar tienen 1020, por lo que dependiendo de cuál haya seleccionado. Entonces vamos por ejemplo con luz extra, ver cómo se ve eso como luz. Y también puedes usar la tecla Mayús aquí también. Simplemente sube o baja y ve cómo se ven todas estas. A continuación, lo que tenemos es el espaciado de caracteres, y este es básicamente el espaciado entre cada personaje. Entonces si uso mi tecla de turno e incrementos, puedes ver cómo se ve esto. Entonces es realmente útil si quieres hacer eso. Aquí tenemos interlineado. Tan espaciado entre cada una de estas líneas de texto. Y por último, lo que tenemos aquí mismo es espaciado de párrafos, pero tengo que crear un párrafo para hacerlo. Pero básicamente hace casi lo mismo que el interlineado. Aquí tenemos un alineamiento a la izquierda para que cuando estés escribiendo vaya de izquierda a derecha. Aquí tenemos centro alineado. Para que puedas ver cómo se ve eso. Y básicamente va a ir desde el centro hacia afuera. Y aquí tenemos escritura alianza. Entonces básicamente lo mismo que alineado a la izquierda. Aquí tenemos ancho automático, así que no importa lo que estés escribiendo, Vamos con la línea izquierda para mostrar que no importa lo que estés escribiendo. Y cuando salgas, puedes ver que es de ancho automático. Aquí tenemos auto altura. Entonces digamos, por ejemplo, que quiero escribir algo más. Se puede ver que va automáticamente en altura también. Y por último, tenemos tamaño fijo, que es el párrafo del que hablaba. Entonces si hago clic aquí y lo bajo hacia abajo, puedes ver que esta es una gran opción si tienes montones de textos. Y por ejemplo, si hice algo como esto, y sé que hay más texto abajo, siempre puedo hacer clic aquí. Y me va a mostrar el texto que está abajo. Lo que tenemos aquí es mayúscula. Contamos con minúscula, caso de título. Por lo que se va a titular cada primera letra del mundo. Entonces tenemos superíndice. Por lo tanto, permítanme añadir un número a, por ejemplo. Y cuando hago clic en super script, se puede ver lo que hace ahí mismo. Tenemos subíndice. Entonces básicamente lo mismo pero abajo, hemos subrayado. Entonces todo el texto va a ser subrayado y tenemos tachado, así que va a pasar por el texto mismo. Siempre puedes dar click aquí mismo para cambiarlo y para agregar lo que quieras. Pero básicamente mayúscula, minúscula, título mayúscula. Y dejémoslo en eso. Por ahora. Debajo de eso tenemos una apariencia básica tan misma que lo que las formas tenemos obesidad. Entonces si un niño a una palabra de Mickey va a 20 en modo de mezcla de obesidad, color de relleno, colores de borde, sombra, fondo, desenfoque, y Mark para exportación. Entonces básicamente todas las mismas cosas que teníamos dentro de nuestras formas. A continuación, pasemos a nuestras juntas y voy a explicar rápidamente qué son los aeropuertos y cuáles son algunos beneficios de usar aeropuertos versus no. 9. MESAS de trabajo: Como explicamos en un video de bienvenida anterior, donde dije sobre nuestros tableros y dónde puedes crearlos y cómo podemos crear todos estos diferentes tamaños dentro de Adobe XD, también hay una opción más para el rpart también. Entonces, cuando hagas click justo aquí a tu izquierda, te van a presentar todos estos diferentes tamaños de nuestros tableros, que básicamente es exactamente lo mismo que aquí en la página de inicio. Por lo que todos estos tamaños se encuentran aquí también. Pero, ¿por qué son tan útiles nuestros tableros? Y lo que puedes hacer con tus tableros de arte, básicamente, puedes hacer click aquí mismo. Se puede cambiar el tamaño. Entonces digamos que esta es nuestra pantalla principal. Y puedes elegir el tamaño de tu tablero de arte directamente desde aquí. Puedes rotarlo. Por lo que puedes hacer click así o así. Y digamos que quiero cambiar el tamaño a no lo sé. Digamos algo así como el 2453 por cualquier razón que se va a extender hasta aquí. También puedes hacer clic en redimensionar responsive. Entonces, cuando empiezas a cambiar el tamaño, puedes ver cómo va a actuar el texto. Y esto es realmente útil. Obviamente cuando estás haciendo diseño responsive, que vas a hablar toque un poco más tarde. Después tienes también un manual en el que puedes hacer clic y decidir donde quieras, redimensionar sensible y cómo quieres que funcione. A continuación, cuando hago clic ahí mismo, se puede ver que tenemos un desplazamiento vertical y no tenemos ninguno. Pero también puedes usar esas opciones, que mencioné anteriormente, sobre desplazamiento horizontal, vertical y desplazamiento en todas direcciones. Y voy a tocar eso un poco más tarde. A continuación tenemos aparición. Entonces si hacemos click aquí mismo, puedes ver que este es el color de tu aeropuerto en sí. Tan feo con en blanco. O puedes cambiarlo al color que quieras. Y finalmente debajo de eso tenemos maquetación. Entonces si hago click aquí mismo, se puede ver que tenemos maquetación o tenemos cuadrado. Si tienes tu tamaño cuadrado, puedes cambiarlo a heres, tamaño de cuadrícula cuadrada de ocho. Puedo cambiarlo a domingo, enorme como 80. Y puedes ver cómo se ve eso si te resulta más fácil alinear elementos en la cuadrícula así. O puedes seleccionarlo desde aquí. Y luego puedes cambiarlo de cuadrado a layout. Y luego puedes jugar con estas columnas. lo que las columnas se suelen usar para, para el diseño UX de la interfaz de usuario porque puedes alinear las cosas dos columnas diferentes, y simplemente puedes contar columnas, lo cual se traduce realmente fácilmente en código porque los desarrolladores pueden fácilmente entender en términos de columnas, lo ancho que es algo, lo alto que es algo, y así sucesivamente. Entonces aquí tenemos 12 columnas y tenemos este bonito 1920 por 1080, nuestro tamaño de tablero, que puede ser realmente útil para el diseño web por ejemplo. Entonces si elijo, puedo usar algo así como ocho columnas. Hasta puedo cambiarlo a cuatro, pero volvamos a 12. Y puedo cambiar el ancho de canalón a 60, por ejemplo, en ancho de canaleta es básicamente el espaciado entre estas columnas y columnas son estos bits azules en nuestro caso. Para que puedas cambiar el ancho de columna, 260, por ejemplo, para que tus columnas sean aún más estrechas. Y se pueden cambiar diferentes márgenes. Por lo que los márgenes son el espaciado entre estas columnas. Por lo que aquí a la izquierda y a la derecha, puedes cambiarlos automáticamente. Entonces, por ejemplo, si escribo 200 y puedes ver los márgenes ahora son realmente enormes, pero también puedes ir justo aquí y cambiar diferentes márgenes. Entonces si me muero, se puede ver que tenemos margen, arriba, margen, derecha, abajo, e izquierda. También puedes usar el valor predeterminado. Entonces si hacemos click aquí mismo, esta es la opción por defecto, o puedes hacer por defecto. Entonces si nosotros, por ejemplo, hacemos estos cambios, 6060, y usemos esto como un 60 por ejemplo. Y queremos que esto sea nuestro defecto. Simplemente puede hacer clic en Hacer predeterminado. También puedes darle un nombre y va a hacer una opción predeterminada para eso. Por último, si crees que estas columnas son demasiado distrayentes, puedes hacer clic aquí y puedes bajar la obesidad de estas columnas para que no sean demasiado distractivas para mirarlas y siempre puedes vidriar tu contenido a gusto. 10. Librerías: Las bibliotecas son un gran activo para tener en Adobe XD porque puedes organizar rápidamente todos tus archivos, todos tus colores, todos tus estilos de personaje, y mucho más en un solo espacio donde puedes fácilmente navega por ahí y podrás acceder a todos esos archivos a la vez. Por lo que está ubicado justo aquí. Y si hacemos clic en él, se puede ver que se pueden agregar colores, se pueden agregar estilos de carácter, y se pueden agregar componentes. Entonces déjenme mostrarles rápidamente cómo funciona eso. Entonces vamos a duplicar. Estos estaban golpeando Control D Y cuando el cloro bajó a 40, por ejemplo. Y cambiémoslo de medio a luz. También cambiemos el color a este negro realmente oscuro. Y cambiemos esto a un color más claro o aún mejor, usemos algo completamente diferente. Solitudes, revelación, por ejemplo, y que cocinen justo aquí y luego aquí mismo para ocultar mis guías. Entonces lo que puedes hacer desde aquí es por los colores puedo hacer clic aquí mismo, y puedo agregar el color de mi texto como una muestra de color. Y también puedo hacer lo mismo para decimal. Para los estilos de personaje, puedo hacer lo mismo. Así que haz click justo aquí y luego agrégalo a aquí. Entonces porque tenemos esto y déjame borrarlo. Al igual que así, sigamos ahora y cambiemos estos. Entonces vamos a hacer clic derecho en este. Golpear, borrar, así. Entonces ahora sólo tenemos este 157 y yo también haré lo mismo desde aquí. Entonces ya no tenemos este subíndice. Por lo que puedo dar clic aquí y eso agregó, pero también agregó. Por lo que siempre puedo hacer clic en uno de estos y golpear borrar aquí. Y rebaño lechero, básicamente. Entonces así es como se agregan colores. Este Hj que habías llamado estilos de personajes, y puedes hacer esto por cada forma. Entonces usemos esto por ejemplo, y usemos esto. Y quitemos la frontera por ejemplo. Y simplemente puedes hacer click aquí para añadir este color. También puedes hacer doble clic aquí y llamarlo, por ejemplo, ruta principal, llamada este azul principal por ejemplo. Al igual que así. Y llamemos a esto y texto color o texto principal o lo que sea. Y esto es realmente útil de hacer si estás lidiando con desarrolladores más adelante, porque Dan, puedes crear estos tokens y va a ser fácilmente accesible para ellos. Ahora en cuanto a componentes, digamos que, por ejemplo, quería duplicar esto, golpear control D den Shift Alt y hacer clic izquierdo en mi ratón. Y voy a cambiar. Y por ejemplo, usemos estos dos. Y en lugar de esto, vamos a crear algo como esto. Y también si hago clic en él, por ejemplo, tal vez pueda cambiarlo a 20. Y digamos que este es nuestro icono o nuestro logotipo o lo que sea. Y puedo ir a mi paleta de capas, hacer doble clic aquí y llamarlo logo, sólo por ejemplo. Y lo que puedes hacer es hacer click aquí mismo para añadirlo como componente. También puedes hacer clic aquí para añadirlo como componente. Pero puedes presionar la tecla Control o Comando en tu teclado y puedes agregarla como componente. Entonces, por ejemplo, si quieres crear un nuevo aeropuertos, y digamos que queremos crear este. Puedes hacer click cuando tu logo, arrástralo y soltarlo aquí mismo. Y puedes ver que es una instancia de un componente porque te da este diamante ahuecado que puedes ver aquí mismo. Y debido a que este es nuestro componente principal, se puede ver que está lleno. Entonces si los tomamos y los traemos aquí lado a lado, se puede ver claramente la diferencia. Eliminemos este. Pulsa Control 0 para volver a encaje en su lugar y espacio y haz clic con el botón izquierdo para navegar. Entonces si hacemos click aquí mismo, se puede ver que está lleno y esto está vacío. Entonces lo que eso básicamente significa es cuando estás diamante está lleno, tu trabajo con componente principal y cuando tu diamante es ahuecado, trabajando como instancia de ese componente principal, lo que básicamente significa en inglés llano, cualesquiera cambios que estés creando y haciendo el componente principal, automáticamente se van a traducir al componente hijo o a este diamante ahuecado en este caso. Entonces, por ejemplo, si no tocaste los componentes hijos en absoluto, entonces cualquier cambio que hagas al componente principal se va a traducir al componente hijo automáticamente. Pero por ejemplo, si anula esos cambios, si en nuestro caso, por ejemplo, digamos que tal vez si hago doble clic aquí mismo, así, y lo cambio a diez o incluso 0. Entonces salto aquí mismo, hago doble clic en el interior para entrar en mi forma y cambia a 50. Se puede ver actualizado aquí, pero no aquí. Se actualizó en el componente principal, no en el componente hijo, porque cambiamos manualmente este valor en componentes hijo antes de hacerlo en el componente principal. Por lo que solo te puedes imaginar que puedes hacer esto por todo tu trabajo en Adobe XD. Entonces imaginemos que tú, por ejemplo, creaste una navegación para tu sitio web. Y como componente principal lo tienes como tal. Pero como componentes secundarios, digamos que tienes elementos seleccionados en tu navegación. Entonces no va a cambiar en el componente principal, pero va a cambiar en un componente hijo. Pero en el componente hijo no cambiaste el color de fondo, por ejemplo. Para que puedas saltar rápidamente al componente principal, cambiar el color de fondo se va a actualizar todos tus componentes secundarios. Y puedes tener tantos componentes hijo como quieras. En este caso, sólo tengo uno para demostrar cómo se ve esto. Y digamos que por ejemplo, en el componente principal de navegación por deudas, se quiere cambiar el estilo de carácter. Por ejemplo, desea actualizar la familia de fuentes. Se desea actualizar el tamaño de fuente. A lo mejor quieres actualizar el color de la fuente. Eso lo puedes hacer en el componente principal y se actualizará a lo largo de tus componentes secundarios. No importa cuántos componentes hijos tengas, solo imaginaste, los cambios que hagas a sus componentes hijos no se van a traducir a tus componentes principales, pero ellos van a traducir al revés. Entonces de componente principal a componentes hijo. Entonces volvamos rápidamente a aquí y déjame explicarlo un poco más. Por lo que se puede ver en este componente principal, tenemos este color rojo seleccionado. Pero si selecciono este color, por ejemplo, se va a actualizar. Componente hijo también. Y hagamos esto un poco más interesante. Sostengamos nuestro viejo cubo o MAC opcional. Hombre, puedo hacer otro componente infantil. Para que puedas ver estos diamantes ahuecados no están cambiando. Entonces básicamente te has llenado o has aguantado y eso es básicamente todo. Entonces digamos que en este, puedo saltar dentro, hacer doble clic y puedo cambiarlo a azul. Entonces actualicemos este para leer. Pero este azul no va a cambiar porque está anulado dentro de este componente hijo en lugar de en este componente principal. Entonces básicamente puedes ver cómo se ven estos componentes, cómo funcionan, y son realmente útiles, sobre todo si estás trabajando con, digamos iconos. Si estás trabajando con elementos complejos como la navegación. Porque por ejemplo, puedes crear diferentes estilos de componentes y puedes crear diferentes elementos. Somos componentes, y luego se puede pasar a partir de ahí. También se puede crear algo que se llama estados de componentes. Y eso básicamente significa cuando te mueves a la creación de prototipos más adelante, cómo va a cambiar ese componente. Entonces déjame mostrarte eso en un verdadero ejemplo. Entonces aquí tenemos este componente y digamos que quiero crear un estado diferente, por ejemplo, para el estado hover. Por lo que simplemente puedo hacer clic aquí y agregar un nuevo estado o un estado de desplazamiento. En nuestro caso, solo quiero crear un dato de caballo y voy a explicar todos los estados un poco más tarde en el curso, un poco más de detalles. Pero por ahora solo exploremos rápidamente los estados de Horace, solo para que puedas entender cómo funciona todo. Por lo que aquí tenemos estados hover. Una vez más, puedes hacer clic aquí un clicker estado y editar. También puedes cambiarlo. Entonces, por ejemplo, hover. Y dentro del estado de horror, vamos a añadir un borde, o vamos a añadir sombra de fondo, vamos a añadir algunos elementos. Entonces haga clic en la sombra. Vamos a traer algún tamaño ridículo o 202020. Entonces algo realmente enorme como eso. Y si te llevo de vuelta a mi panel de capas, puedes ver cuando haces clic aquí, puedes cambiar entre tus estados de componente. Pero si haces click aquí mismo, puedes ver que también tienes este estado componente. Y aquí también. Debido a que no incluimos ningún estado de componente antes, cambiamos eso e incluimos en nuestro componente principal, no lo incluimos en nuestros componentes hijo. Entonces una vez más, cualquier cambio que hagas a tu Mink uno y se va a traducir a un componente hijo. Entonces aquí estamos en el estado por defecto. Y si hago clic aquí, y solo para previsualizar estos cambios, y si un pase rápidamente por encima de él, se puede ver que cambia y que se actualiza en tiempo real. Pero también, puedes rondar aquí mismo. Y se puede ver que cambia porque aquí hicimos ese cambio. Y también se actualiza igual que con el componente principal. Pero debido a que tenemos este radio de esquina aquí, no lo tenemos aquí en estos dos componentes. Al pasar el cursor, se puede ver que se actualiza y nos da este cambio porque lo hicimos en el componente principal. Entonces eso es básicamente todo para los componentes. Se puede jugar con ellos. Se pueden agregar diferentes estados. Te voy a explicar que un poco más tarde en este curso, qué puedes hacer con estos componentes, y estos son los buscados de la biblioteca una vez más, si te llevo de vuelta aquí, puedes ver que tenemos colores. Puedes tener tantos colores que quieras. Estilos de carácter. Puedes tener tantos de ellos como quieras también. También puedes hacer clic aquí para cambiar entre el analista de GridView tú, lo que sea más fácil para ti. Quizás esta vista sea mucho más adecuada si tienes múltiples iconos, múltiples bajadas, y así sucesivamente. Y también puedes ampliar este panel para darte un poco más de espacio. Y siempre puedes ocultarlo simplemente haciendo clic aquí. Entonces no está en tu camino. Y puedes hacer eso tanto para bibliotecas, capas y plug-ins también. También puede buscar elemento del documento. Entonces por ejemplo, el logotipo. Aquí está. Por lo que es mucho más fácil de encontrar, sobre todo si tienes cientos de iconos diferentes. Digamos que por ejemplo, tengo 50 iconos de búsqueda diferentes. Puedo escribir en búsqueda, y luego puedo ordenar entre esos iconos de búsqueda aquí mismo en esta lista, en lugar de desplazarme hacia abajo y buscar entre todos los iconos de mart. Por último, puedes tener activos documentales aquí mismo. Entonces si vuelvo, te va a llevar a las bibliotecas. Y estos son los ácidos de documento. Por lo que todos los bienes de nuestro documento, que se puede ver aquí mismo. O también puedes crear una Mi Biblioteca, que te va a llevar a la nube. Y puedes crear tu biblioteca, por ejemplo, con imágenes personalizadas, colores personalizados, fuentes personalizadas, iconos personalizados, y mucho más en la nube. Y simplemente puedes hacer clic ahí con mi biblioteca va a sacar su biblioteca de la nube. Y simplemente puedes arrastrar y soltar los elementos de la nube directamente en tu documento. Entonces esa es una gran característica y beneficio haber leído estas bibliotecas en línea. Básicamente, si estás en un plan gratuito, tienes este acceso a bibliotecas en línea, pero tu espacio es limitado. Si tienes el plan premium, tienes espacio ilimitado. Para que puedas tener tantos archivos como quieras en la nube. 11. Capas: Cuando estás trabajando como diseñador UX de UI, más probable es que vayas a tener un montón de capas diferentes en ella. Un manejo de capas es realmente importante tener como habilidad pero como una especie de hábito, Guth hábitos de tener. Porque a medida que crecen tus proyectos, medida que se hacen más grandes, la cantidad de capas va a ser enorme. Por lo que la organización de capas es realmente una gran habilidad para tener como diseñador UX de UI. Entonces déjame mostrarte en un WASD, las capas se encuentran justo aquí. Aquí solo tengo un proyecto para mi canal de YouTube y puedes comprobarlo. Dejaré el enlace para que puedas ir a comprobarlo por ahí y ver cómo creé esto si quieres crearlo por ti mismo. Pero las capas se encuentran justo debajo en las bibliotecas. Y misma historia para las bibliotecas se puede hacer clic para mostrar y hacer clic para ocultarlas. No se puede ver ninguna capa antes de seleccionar el aeropuerto. Entonces si selecciono esto son más, por ejemplo, puedes ver todas estas capas aquí mismo. Entonces permítanme acercar un poco más y explicar lo que está pasando, por ejemplo, en este texto. Entonces aquí tengo el título, tengo el Air Max, que es este texto aquí mismo, y tengo esta máscara, y vamos a retocar las máscaras un poco más tarde. Puede seleccionar todos estos elementos, por ejemplo. Entonces si voy de aquí a aquí, sosteniendo la tecla de turno y luego golpeando Control o Comando G, para que pueda agruparlos en un grupo. Puedo hacer doble clic aquí y cambiar el nombre de este grupo a sitio web por ejemplo. Y luego puedes organizar tus capas peso muerto. Organizarlos en grupos es realmente útil porque si asumo solo un poquito, se puede ver que tengo un grupo para mi navegación. Dentro de ese grupo, tengo tres ítems y siempre me gusta ir de izquierda a derecha porque mayoría de la población mundial está leyendo de izquierda a derecha. Por lo que una tienen esta organización. Entonces voy de logo, que está a la izquierda, arriba a la izquierda búsqueda, y luego Menú. No necesitas tener organización como esta es justo como hago las cosas. Realmente todo depende de ti y cómo quieres estructurar tus capas. Pero me encanta hacerlas de esa manera. Para que veas los puse en un grupo porque es mucho más fácil esconder este grupo. Simplemente puedes hacer eso pinchando aquí. Si quieres, por ejemplo, reposicionar algunos de estos elementos y no quieres que esta navegación sea obtrusiva y esté en su lugar. También puedes bloquearlo para que no puedas moverlo. Entonces si hago clic aquí mismo, puedes ver que se queda en su lugar y también puedes marcarlo para exportación. Por lo que puedes hacer click ahí mismo y puedes exportarlo más tarde si quieres. También puedes dejar algunos artículos fuera de los grupos, como lo hice aquí mismo. Pero puedes ponerlos, Por ejemplo, tengo un grupo y nuestro artículo, puedo golpear control z y ponerlos en un grupo separado. Entonces realmente todo depende de ti cómo quieres estructurar tus elementos. Se puede, por ejemplo, dividir también la página dos. Parte superior, parte media, parte inferior. Podrás combinar tus elementos de esa manera. Entonces, realmente todo depende de ti y cómo quieres estructurar tus elementos dentro del panel de capas. También puedes reorganizar algunos de estos para que puedas seleccionar un grupo, por ejemplo, arrastrarlo y soltarlo debajo de ciertos elementos. Y también se puede hacer eso por los elementos. Puedes ponerlo todo el camino aquí abajo y puedes golpear el control z tantas veces como quieras para organizar todas tus capas. Eso es básicamente todo para las capas. Pero son realmente importantes. Y no puedo recalcar lo importante que es, sobre todo si estás empezando, aprende a nombrar tus capas porque vas a quedar rápidamente atrapado en este momento donde no sabes qué es nada porque lo hiciste, llamado de manera correcta. Y ahora tienes que enviar el archivo a tu cliente en lugar de perder horas de punta, solo para cambiar el nombre de tus capas, para renombrarlo a medida que te desplazas, o al menos tratar de ponerlos en un grupo y renombrar un grupo. Por lo que cuando envías un archivo al desarrollador, el desarrollador va a ser fácilmente capaz de entender qué es todo y dónde se encuentra todo en la página. 12. Plugins: plugins son algo realmente útil de tener en Adobe XD porque expande los huevos estas funcionalidades y va atrás y lejos de lo básico. Y realmente puedes hacer algunas cosas realmente avanzadas en Adobe XD mediante el uso de plug-ins. Por lo que los plugins se encuentran aquí mismo. A la izquierda, puedes dar click ahí mismo. Y te va a mostrar la lista de plug-ins instalados actualmente. Ahora estos son solo plug-ins de mente. Si solo estás instalando Adobe XD, esta lista va a estar vacía. Por lo que tienes que empezar a instalar plugins en tu máquina. Y para hacer eso, simplemente puedes hacer clic en este icono más justo aquí. Te va a llevar aquí y aquí podrás descubrir, navegar y gestionar. Si haces clic en Administrar, obviamente puedes ver todos tus plugins existentes y puedes actualizar el kit. Todos. En mi caso, tengo estos dos los cuales hay que actualizar para que puedas navegar. Y digamos que quiero, no sé, incluir un texto. Y puedes golpear Enter. Y puedes ver todos estos diferentes plugins de texto que puedes usar para aumentar y mejorar tu velocidad o cómo lorem ipsum en mi caso, que te voy a mostrar. Pero así es básicamente como funciona la función de navegación. Y descubrir es realmente genial porque tienes la elección del editor, has saltado tu diseño. Entonces futura colección, qué citas que todos los diseñadores deberían haber localizado ahí mismo. Para que puedas comprobarlo o puedes formar tus propias listas. De verdad depende de lo que estés haciendo porque los plugins que estoy usando para mí quizá no te van a ser muy útiles. Aquí tenemos plugins esenciales. Por lo que documenta chat, mapas de fantasía , listas, plug-in y glitch. Realmente recomiendo usar mapas de fantasía porque puedes, por ejemplo, instalar un mapa rápido ahí mismo. Y va a sacar información de Google Maps y va a integrar eso con mucha facilidad. Puedes conectar XD a tu app favorita. Entonces, si estás usando miedos de escoria en el arbol de Dropbox y así sucesivamente, puedes conectarlo. Tenemos colecciones, tan populares plug-ins de boceto si estás haciendo algo de wireframing, por ejemplo, redacción de textos y pruebas de localización y usabilidad. Por lo que para todas estas diferentes características y también puedes navegar por categorías. Por lo que herramientas de colaboración y automatización, usabilidad y pruebas, editor manejó y diseñó activos. Entonces digamos que quiero dar click en el diseño ya que me va a mostrar diferentes plugins que están en la categoría Activos de Diseño. O simplemente puedo hacer clic aquí y buscar entre estas diferentes categorías o buscar directamente desde aquí. Básicamente, cuando se instala un plugin. Entonces digamos que quiero usar esta interfaz de usuario y puedo hacer click en ella para instalarla. Se puede leer la reseña o se puede hacer clic en el plugin, se puede ver lo que hace. Se pueden ver todos estos diferentes ejemplos. Y se pueden ver las etiquetas, qué hay de nuevo, SO actualizaciones, calificación. Se puede ver quién lo hizo y mucho más. Entonces eso es básicamente todo. ¿ Cómo se puede utilizar una actualización plug-ins donde se encuentran? Y ahora exploremos algunos plug-ins. Entonces aquí tengo este texto. Y digamos que quiero editar este texto. Pero digamos que acabo de crearlo y no sé qué incluir. Atrévete, Lo que puedo usar es usar un plugin llamado Lorem Ipsum por ejemplo. Simplemente puedes seleccionar tu texto. Haga clic aquí. Siente el texto del Marcador de Lugar. Puedes elegir lo que quieras desde aquí. Y vamos a ver. Y con marca de puntuación, digamos punto, Incluir saltos de línea puedes desmarcar que se comprueban en lo que quieras. Altura del área de texto recortada para ajustarse al texto insertado. Y tengo dos líneas de texto, así que pulsa insertar, y se va a insertar este texto. Puedes probarlo de nuevo. Se puede sentir el texto marcador de posición última configuración, lorem ipsum rápido, lorem rápido, ipsum, altura de recorte, y mucho más. Entonces digamos que quiero tener mi talla fija. Digamos que quiero aumentarlo hasta aquí. Y por ejemplo, para escuchar, tal vez sentir con texto marcador de posición. Ahora se llena de texto. También puedes cortarlo demasiado alto. También puedes hacer un tamaño fijo. Se puede hacer así. Y por ejemplo, necesito más texto, entonces puedo rápido lorem ipsum lo va a llenar. A lo mejor puedo extenderlo un poco más hacia abajo a algo así como este lorem rápido ipsum se va a sentir. Entonces así es básicamente como funciona lorem ipsum y cómo funciona este plug-in concreto. Pero digamos que tú quieres, yo no sé otra cosa. Entonces, por ejemplo, tenemos esta interfaz de usuario caras. Ahora vamos a deshacer rápidamente esto un par de veces. Entonces deshacer esto a mi primer y original ajuste, que fue este. Así que digamos que un, necesito una UI aquí mismo, tal vez icono de UI, tal vez algunos, nuestra llanta o algo más. Salgamos rápidamente de esta información. Entonces en algún lugar por aquí, digamos que quiero incluir una cara de una persona dentro. Puedo ir a algo así como caras de UI. Y puedo tomar mi fuente de EU, bendecido por ejemplo, puedes ir al artista de Filtros. Yo quiero incluir a una hembra de, veamos, no sé, 30 a 40 años y la emoción es feliz. Y eso es todo una ayuda. También puedes ir a Avanzado y digamos aplicar al azar son fotos selectas. Escogeré aplicar al azar. Está trabajando en un fondo. Y después escanea el sitio web en busca mis tareas específicas porque confiaba en encontrarme una mujer en este determinado demográfico. puede ver que encontró esta imagen libre de desinteresado. Y también puedes hacer esto para imágenes adicionales. Entonces digamos que quiero crear, no sé, dos o más. Entonces digamos que quiero eliminar rápidamente este. Vayamos rápidamente a aquí. También puedes usar la cuadrícula de repetición, pero te explicaré un poco, crear un poco más tarde. Y digamos, quiero llenarlo, en estos tres de nosotros filtros de rubor. Digamos 230, no lo sé, masculino y femenino y aplíquense haciendo aleatoriamente para trabajar su magia. Y obviamente cuantas más imágenes tengas para que se llene, tomará más tiempo. Obviamente, tu velocidad de conexión a Internet entra en cuenta aquí. Y lo que desde hace, se puede ver lo que hace aquí mismo. Entonces aquí tenemos tres hembras, y también seleccioné un varón. Entonces digamos que quiero que esto sea un varón y pueda dar click afuera. A continuación, desmarque Hembra, haga clic, Aplicar aleatoriamente. N va a aplicar aquí un rostro masculino aleatorio a esta imagen tan pronto como se encuentre, los criterios coincidían ahí mismo. Entonces ahí lo tienes. Esos son los plugins. Y obviamente puedes jugar con estos diferentes plug-ins. Puedes instalar Cuántos de ellos como quieras. Se puede ver que tengo sólo unos pocos aquí, pero se puede imaginar que podría tener una lista de plugins aquí mismo. Y puedes desplazarte hacia arriba y hacia abajo y básicamente buscar estos diferentes plug-ins y aplicarlos. Y por último, descubre plugins. Puedo ir a Administrar plugins. Y digamos que quiero eliminar a este alfarero, por ejemplo, porque como puedes ver, sigue apareciendo aquí mismo. Puedo golpear una instalación 100. Se va a desinstalarlo. Y se puede ver automáticamente, ya no podemos verlos aquí mismo. Entonces básicamente las puertas son implementaciones y realmente todo depende de ti, el diseñador, cómo vas a usar estos plugins. Puedes, por ejemplo, solo usar lorem, ipsum, y mapas. Puedes usar esto, lo que usamos caras de interfaz de usuario para estas fases para generar estos avatares aleatorios, puedes usar algo así como un borde blanco, que es realmente increíble. También puedes usar diferentes plugins los cuales van a poder proporcionarte diferentes diseños ya precreados. solo puedas arrastrar y soltar estos diseños dentro de tus tableros y empezar a crear diseños de esa manera. De verdad todo depende de ti cómo vas a usar estos plug-ins y plug-ins sueltos se está expandiendo siempre. Cualquiera puede crear un plug-in para Adobe XD. Así que asegúrate de comprobarlo siempre. Asegúrate de seguir a Adobe XD steam en Twitter, por ejemplo, cuando están lanzando nuevos plug-ins, que son realmente geniales y piensan que cada vez más gente debe saber de ellos. Siempre publicarán en Twitter, por ejemplo, y en su página de Facebook. Así que asegúrate de caer ahí para conocer todos los últimos plugins y noticias sobre plug-ins. 13. Repetir: Repetir rejilla es esta increíble herramienta en Adobe XD, que es capaz de acortar todas estas tareas aburridas de un elementos que se repiten. Entonces, en lugar de copiar y pegar diferentes elementos, luego colocarlos uno debajo del otro, simplemente puedes usar una cuadrícula de repetición para hacer estas tediosas tareas. Entonces aquí tenemos este diseño y empiezo con una alambrada. Y digamos que quiero crear una lista de estos hoteles populares. Entonces primero lo primero, vamos a deshacernos rápidamente de algunos de estos elementos y voy a moverlos en grupo. Entonces controla g. Y entonces soy capaz de simplemente moverlos hacia abajo. Y vamos a deshacernos de esto. Entonces digamos que necesito llenar este espacio y necesito incluir algo más de información. Lo que puedo hacer es simplemente seleccionar esto y golpear la grilla de repetición. De lo que eso va a ser, permítanme hacer es ampliar la cantidad de todos estos diferentes elementos. Entonces digamos que quiero crear dos de ellos. Y quiero alinearlos a la izquierda con estos a la derecha aquí en la parte inferior. Y digamos que quiero crear un todo tres o cuatro más, por ejemplo, algo así. Y básicamente así es lo fácil que es repetir una cuadrícula para trabajar. Y luego si tienes tus archivos de texto, que tú, entonces puedes arrastrar y soltar fácilmente un texto dentro y puedes cambiarlo fácilmente. Entonces déjame mostrarte rápidamente cómo funciona eso. Digamos que quiero crear un archivo de texto. Entonces déjame crear rápidamente uno en mi computadora y llamarlo, por ejemplo, ciudades. Y así es como se ve. Simplemente estoy usando el Bloc de notas en Windows. Puedes usar la opción predeterminada en Mac. Y puedes ver que tenemos a Honolulu nosotros, digamos que quiero usar ese. Pero también quiero usar un Londres, Reino Unido, París, Francia, Italia. Y démosle dos más, por ejemplo, en Belgrado, Serbia, y digamos Montreal, Canadá. Digamos que esto es todo lo que hemos creado. Y ahora cómo se puede usar realmente este archivo en otros BSD muy rápidamente. Entonces lo que voy a hacer es cerrarlo, golpear guardar. Y simplemente lo voy a arrastrar desde mi escritorio. Como pueden ver, lo llamé Ciudades y simplemente lo coloqué en la primera porque no quiero que lo coloque justo aquí. Yo quería colocarlo en el primero porque creamos la cuadrícula de repetición a partir de esta primera. Por lo que básicamente puedes aquí mismo y puedes verlo actualizado automáticamente a lo largo de todos estos. Por lo que puedes tener tantos de estos documentos como quieras. Se puede haber hecho, por ejemplo, para nombres masculinos, nombres femeninos, ciudades, países, diferentes refs de comida, recetas dondequiera que estés haciendo en Adobe XD, puedes tener diferentes archivos por deuda, diferentes mazos. También puedes generar esto en la web. Se puede utilizar sitios web aleatorios y se puede generar esta información la cual va a ser realmente útil porque entonces se puede crear un sitio web de aspecto real, aplicaciones de aspecto real, estamos buscando dashboards muy rápido porque se tiene todo de estos expedientes ya preparados. Entonces digamos que quiero en lugar de llamar a esta vista del mar y lo que sea, digamos que quiero crear una diferente para, veamos, no conozco a la gente. Y voy a llamar a la gente. Y se puede ver si hago doble clic, lo llamé gente. Digamos que quiero darles nombres. Entonces Jack, Mary importa no, mark. Stephanie, Jude, los analistas dicen Graeme. Y ahora que completé todos estos nombres, lo que puedo hacer es acercar y puedo localizar las imágenes en mi computadora, que quiero incluir dentro. O puedes usar una herramienta aleatoria. Digamos que quiero incluirlos aquí e ir a caras de la interfaz de usuario, vaya a píxeles esta vez. Y vamos con filtros masculinos y femeninos. Y digamos que todos están contentos y haga clic en Aplicar al azar. Este plugin va a funcionar su magia, pero también puedes hacer lo mismo desde tu computadora. Entonces te voy a mostrar eso también. Por lo que se puede ver que se llenó con todas estas diferentes imágenes. Pero como dije, se puede hacer eso por, digamos masculino. Y aquí solo algunas de estas imágenes prepreparadas. Y simplemente puedo arrastrar y soltar Cuántas de estas imágenes quiero. Entonces digamos que tengo seis de ellos. Puedo seleccionar seis imágenes diferentes, y simplemente puedo arrastrarlas y soltarlas desde mi computadora. Déjame agrandar esto tan solo un segundo. Entonces seis de ellos, simplemente puedo hacer clic, arrastrarlos y soltarlos en el primero. Y se va a poblar con estas seis imágenes. Entonces, como puedes ver, repite grilla es realmente extremadamente útil. Y cuando estás trabajando con diferentes componentes, puedes ver que he descolorido seleccionado, quizá quiero editar este erudito. Puedo hacer clic derecho y simplemente puedo ir a Editar. Y digamos que quiero usar una versión azulada de eso. Se puede ver donde sea que se seleccione ese color, se va a cambiar a ese color y se actualizará en tiempo real. Por lo que puedes ver que es realmente útil trabajar con la grilla de repetición. Es realmente extremadamente sencillo. Todo lo que necesitas hacer es simplemente crear una instancia de cualquier disposición de diseño que desees. Golpea la grilla rápida, crea cuántas variantes quieres. Y también puedes usar archivos como te mostré con los archivos de texto, número ilimitado de archivos. Entonces como dije, se puede hacer uno por los nombres, nombres de los nombres de la ciudad de los países y mucho más. O simplemente puedes usar plugins para aplicar diferentes diseños, diferentes elementos a tus diseños de cuadrícula repetida. 14. Máscaras: Si quieres tener porciones de tus elementos o de tus diseños ocultos de ti, siempre puedes usar mezquitas en Adobe XD para lograrlo. Entonces déjame mostrarte en mi ejemplo cómo usé máscaras y cómo puedes hacerlo. Entonces aquí tengo un ejemplo de la animación fuera de mi botón. Entonces si un hit justo aquí, solo una vista previa rápida y haga clic justo aquí, se puede ver mucho de ello está pasando. Y puedes ver todo este tutorial en mi canal de youtube. Pero básicamente muchas de estas cosas diferentes están sucediendo y todo por las máscaras. Entonces si salto aquí mismo y te muestro en mi panel de Capas lo que está pasando. Por lo que obviamente tengo un componente diferente y diferentes estados con diferentes animaciones. Una vez más, si quieres comprobarlo, Harvard está hecho, echa un vistazo a mi canal de YouTube. Ese video va a estar ahí para que sepas cómo hice esto. Pero básicamente aquí tenemos este botón y lo que nos interesa es almizcle. Entonces básicamente cómo funcionan las máscaras es que se puede ver que tenemos todos estos diferentes elementos en su interior. Por lo que tenemos icono de camión de reparto, que es este aquí mismo, entregas enviadas, que es el texto que no se puede ver por el momento. Burgess ahora, que es este texto aquí mismo y obviamente botón. Entonces cómo creé esta máscara, por ejemplo, déjame copiarla rápidamente todo. Entonces tenía el control C. Y digamos que quiero golpear el control D aquí mismo. Y eliminemos todas estas cosas. Y voy a dar clic derecho Desagrupar componente. A clic derecho en mezquita de grupo, eliminar justo aquí. Entonces una vez más, lo que tenemos justo aquí es este camión de reparto. Digamos que quiero posicionarlo aquí mismo. Podemos tener la entrega enviada y quiero moverla fuera del camino a algún lugar por aquí. Y ya hemos comprado con lo que quiero mudarme aquí mismo en el centro. Entonces, ¿cómo puede una mezquita todo para que la gente no pueda ver esta entrega enviada. E incluso cambiemos su color porque realmente no importa de qué color sea. Entonces, ¿cómo puedes hacer eso es simplemente duplicar esto, que es el control de golpe original de Watson D. Y básicamente en nuestro caso, porque quiero ver qué está pasando, quiero ampliarlo solo un poquito. Por lo tanto Shift Alt y click izquierdo. Puedo ampliarlo hasta aquí. Puedo incluir el borde, quitado el color, sólo para que podamos ver qué está pasando en nuestro caso, posiciones aquí mismo. Y todo lo que necesitas hacer es simplemente colocarlo en la parte superior. Haga clic en él. Mantén presionada tu tecla de turno, haz clic aquí para seleccionar todos tus artículos. Después pulsa el comando Shift Control M o Shift en una máscara. Y lo hará en un maxilar y creará una máscara de todos estos componentes. Entonces básicamente lo que pasó aquí es máscara tiene componentes y elementos ocultos que están fuera de tu. Entonces básicamente tu vista es tu máscara. Y debido a que nuestra mezquita es así de grande, se puede ver todo lo que se encuentra fuera de nuestra mezquita. Todo lo que se encuentra en, se puede ver. Básicamente, se puede ver que puedo mover esto a aquí tal vez. Y no vas a poder ver todo el camión cuando haga clic afuera porque es máscara desde aquí, obviamente puedes mover un poco tu máscara hacia abajo si quieres, puedes moverla hacia arriba. puede jugar con él y se pueden crear máscaras usando mental, por ejemplo. Entonces si tienes formas complejas que necesitas seleccionar, obviamente puedes usar lápiz para eso. Y luego puedes colocar en forma de deuda, creaste usando lápiz en la parte superior o pila de capas de alimentos como lo hice con la copia de mi botón aquí. Después simplemente selecciónela, selecciona todo lo que hay debajo de eso, pulsa Shift Control, Shift comándalos para crear una máscara y luego podrás jugar con ella. Obviamente, puedes crear unos estados diferentes como te mostré aquí. Y permítanme mostrarles una vez más en nuestro ejemplo lo que está pasando aquí. Por lo que en el primer estado, cuando los usuarios hacen clic o tocan Burgess ahora va a desaparecer, camión va a caer. Desaparecen, botón va a aparecer una vez más y tenemos esta entrega enviada. Entonces como puedes ver, todo se hace con una máscara. Todo se hace con los estados componentes. Por lo que las máscaras son realmente importantes, una herramienta realmente poderosa para tener en Adobe USD. Por lo que realmente te animo a probarlo y probarlo por ti mismo y ver qué puedes crear usando máscaras. 15. Funciones 3D: Adobe XD tiene alguna funcionalidad 3D y aunque es realmente limitada, es genial tener una opción de actualización para tener solo para darle sabor a tus diseños aquí y allá solo un poquito. Pero es importante tener en cuenta que Adobe XD no es una herramienta 3D por ningún medio. Si quieres aprender 3D, realmente te animo a probar herramientas gratuitas como licuadora, por ejemplo, solo para entender qué es el 3D real y qué puedes hacer con él. Pero en Adobe XD, realmente puedes hacer algunas cosas divertidas. Entonces permítanme mostrarles rápidamente un ejemplo. Este es el video que he creado recientemente en mi canal de YouTube y puedes comprobarlo ahí fuera como tutorial para ver cómo se hace. Pero básicamente si me acerco, tengo todas estas cartas. Y digamos que quiero crear esta tarjeta para ser 3D. Todo lo que necesito hacer es simplemente dar click aquí. Esta cosa aparece y puedes hacer click y rotar y puedes ver que es realmente básico. Entonces como dije, es 3D, pero al mismo tiempo, no es realmente todo tan avanzado, pero puedes hacer algunas cosas bastante geniales con esta herramienta. Entonces si te muestro rápidamente lo que he creado para ese tutorial, si hago clic justo aquí, entonces haga clic aquí en la vista previa, y haga clic justo aquí. Se puede ver que va de stock, que es este 12 3D con solo un solo toque. Para que puedas ver tus opciones son realmente limitadas con esta función 3D. Entonces, vamos a explorarlo un poco más profundo. Entonces una vez más, si hago clic aquí para ir dentro de mi opción 3D, lo que tengo justo aquí, nuestro ancho y altura. Entonces básicamente lo mismo, x e y dicen pintura, pero aquí tenemos estos tres. Entonces este es el eje de rotación, esta es la rotación y. Y por último, esta es la rotación z o rotación deseada como queramos, y esta es la posición desértica. Entonces en lugar de x e y ahora tenemos la posición Z también. Entonces, lo que puedes hacer es explorar un poco y ver cuáles son todas estas rotaciones simplemente haciendo clic aquí y luego manteniendo presionada la tecla Mayús y luego hacia arriba o hacia abajo las flechas. Entonces si te llevo diez incrementos a la vez, puedes ver qué es el eje x. Si hago lo mismo, se puede ver cuál es el eje y y se puede ir al revés, demasiado negativo, y va a cambiar a esa manera también. Y también puedes hacer click aquí y para ver por qué, ¿qué hace eso? Entonces puedes ir, por ejemplo, 30 así. Y luego puedes jugar con 30 como este. Y quizá, no sé, 30 como ésta. Y puedes tener estas formas locas en 3D, o simplemente puedes golpear 0, Tab 0, Tab 0. Y luego entrar va a volver a la opción por defecto. Y es realmente importante si quieres salir de la 3d, realmente necesitas golpear esto aquí mismo, que son las transformaciones 3D. O puedes usar Control o Comando T para entrar, entonces va a salir del 3D. Lo que es realmente genial es que puedes usar diferentes estados de componentes con 3D. Entonces, por ejemplo, este es mi estado por defecto, pero sólo se puede imaginar eso. Digamos que quiero usar diferente, digamos fondo, sombra o colores diferentes o lo que sea. En mi siguiente estado, alma, digamos que quiero, no sé que este primer estado sea así. Pero cuando hagan clic en Fondo va a cambiar el color, esto va a cambiar el color y mucho más. Entonces digamos que a ese estado se le va a llamar estado clicado. Ahora no puedes hacer eso aquí y se va a traducir a 3D, lo cual es realmente una gran adición. Pero, básicamente, es, es realmente limitado. Pero puedes hacer algunas cosas realmente geniales. Lo que no puedes hacer al momento de hacer este video es hover 3D. Por eso te mostré cómo tocar, pero aún no puedes hacer un hover. Pero mientras tanto, cuando estás viendo este video, tal vez el equipo de salida lanzó esa actualización o lo van a actualizar en el futuro y lanzaron una actualización. Así que solo asegúrate, como dije al inicio de este curso, revisar tus actualizaciones, revisar al equipo de Adobe XD y de ver en qué están trabajando actualmente y las actualizaciones que están lanzando. Pero básicamente, eso es todo el 3D que vas a tener en este momento en Adobe XD. Pero tal vez vas a ver este video en un año a partir de ahora y tal vez el actualizado. Así que solo asegúrate de revisar tu actualización y de comprobar las opciones que podrías tener para 3D. 16. Maquetas: Usar maquetas en Adobe XD es realmente bastante simple, pero el problema es que por el momento no tienes tan grande de una elección de unas maquetas. Por lo que realmente recomendaría ya sea una herramienta online gratuita o si tienes Photoshop, tus opciones son básicamente infinitas porque hay miles y miles de maquetas diferentes en línea que puedes descargar gratis o incluso comprar diferentes paquetes y utilizar directamente en Photoshop. que puedas exportar archivos desde XD, guardarlos como PNG por ejemplo, o JPEG, y luego simplemente abrirlos en maquetas de Photoshop, colocarlos en maquetas, y luego crear diferentes presentaciones. Pero si quieres crear todo dentro de Adobe XD, la única gran opción que encontré es angular. Funciona realmente genial para mí, pero encontré a algunas personas en línea y realmente no lo consigo. Obtienen la versión gratuita, no consiguieron la versión B. Entonces tómalo con un grano de sal. Funciona para mí y te voy a mostrar que funciona para mí, pero puede que no funcione para ti. Entonces aquí tengo mi chatty UIKit y puedes conseguir este kit de UI en mi página web si quieres. Puedo golpear el control C para copiar éste, por ejemplo. Y luego puedo volver al ángulo, o mejor aún, puedo tomar esta maqueta por ejemplo, y se puede ver que tengo un equipaje angular premium. Esta es una versión un poco más antigua. Tienen versión más nueva y ahora, pero digamos por ejemplo, que quiero usar este de un teléfono, presione Control-C para copiarlo. Y se puede ver que tengo múltiples de estos y ni siquiera son todos listados aquí porque les falta iMac, por ejemplo. Entonces si te llevo de vuelta a mi chador UIKit, digamos que quiero pegar en esa maqueta aquí mismo y quiero posicionarla así por aquí. Y digamos que estás creando nuestros sólidos de presentación click aquí mismo. Y tal vez tu presentación sea 1920 por 1080. Llamémoslo una presentación. Al igual que así. Vamos a mover esa maqueta adentro y vamos a darle algunos colores. Entonces si voy aquí mismo, vaya con globo principal puede ser. Y luego dejémoslo así por ejemplo. Por lo que necesitas posicionar tu maqueta de esta pantalla en tu teléfono. Entonces, ¿cómo vas a hacer eso? Simplemente haga clic en Control y haga clic en ir a un panel Capas. Necesitas estar en la capa de pantalla, que tengo en este momento. Y luego veamos, esto se llama pantalla de salpicadura. Por lo que necesitas ir a plugins. Es necesario encontrar el plug-in de ángulo, aplicar Mockup. Entonces necesitas seleccionar una pantalla de presentación y golpear aplicar. Va a funcionar su magia. Y en algunos casos va a llevar mucho tiempo. Pero en mi caso, porque es realmente bastante simple, aplicó la maqueta y se puede ver cómo se ve eso. Entonces si quieres, por ejemplo, usar este feed número cinco, proceso es exactamente el mismo. Entonces voy a ir a la capa de pantalla, ir a los plugins, aplicar maqueta y alimentar el número cinco. Vamos a ubicarnos justo aquí. Por lo que alimenta el número cinco aquí es. Y puedes jugar con la orientación de calidad de densidad de píxeles. Entonces tienes lo mejor y lo tienes un poco mejor, tienes promedio y así sucesivamente. Pero yo sólo elijo ser en el mejor de los casos hit, aplico. Y se puede ver que ha funcionado su magia. Y dependiendo de lo grande que sea tu pantalla o de lo alta que sea, cuántos elementos diferentes hay dentro, te va a llevar más tiempo o menos tiempo. Pero como pueden ver, en mi caso se tarda apenas unos segundos. Entonces como dije, esto es realmente una gran cosa de tener. Y volvamos a esto. Y digamos que ahora quiero usar esta maqueta o aún mejor, usemos, no sé, esta. Hit Control C, y luego puedo volver a mi archivo de presentación principal, extender mi aeropuerto. Controlarías V para pegarlo dentro. A lo mejor se va a ubicar aquí. Y ahora puedo hacer clic dentro, localizar mi capa de pantalla, que es esta de aquí. Y digamos que quiero incluir esto en pantalla blanca aceptada. Entonces volvamos a aquí, aplicamos maqueta localizada. Por lo que en blanco, aceptado. Veamos dónde se encuentra. Para incluso lo puede encontrar aquí en la lista. Aquí está en blanco aceptado, hit aplique. Va a funcionar su magia. Y quizá se vaya a llevar un poco más de tiempo por todos estos diferentes elementos, pero aquí están. Entonces si selecciono toda la maqueta, bájala. Se puede ver que la calidad es bastante decente, pero obviamente va a comprimir un poco. Entonces no va a ser tan alta calidad como esto, pero esto es realmente genial y lo suficientemente bueno para la presentación. Entonces básicamente eso es ángulo. Y puedes ir a su página web, simplemente puedes escribir en ángulo para huevos D, por ejemplo, te va a llevar ahí. Como puedes ver, funciona en mi caso, pero encontré en línea algunas personas dicen que no funciona. Entonces lo que puedes hacer está instalado ahí, plug-in, como puedes ver aquí está, aquí mismo. Simplemente puedes ir a la lista de plug-ins. Se puede ir al ángulo de dirección de búsqueda. Y se puede ver que está justo aquí. Yo lo instalé. Y después de instalarlo, ve a su página web y echa un vistazo a la versión gratuita de las maquetas. Tienen. C Si eres como, verías si funcionan para ti. Si lo hacen, genial, entonces realmente puedes decidir si quieres comprar el paquete premium completo. Y puedes ver en mi caso, si te muestro eso una vez más, cuántas de estas maquetas hay. Esta tampoco es historia por defecto porque también puedes obtener todos estos papeles de vol. Entonces así es como se ve. Para que puedas conseguir estos papeles de pared y puedes usarlos en tus diseños y son extremadamente grandes. Entonces digamos este desenfoque número uno, y volvamos a nuestro ángulo, y volvamos a nuestro diseño. Entonces digamos que quería incluir imagen aquí. Y vayamos adentro a este trasfondo. Por ejemplo, quería incluir esto borroso. Simplemente puedo arrastrarlo y soltarlo dentro y se puede ver lo grande que es esto si hago doble clic. Por lo que realmente se puede escalar hacia arriba. Y si reviso una vez más, creo que hay algunos a los que les gusta 4K y 5K cuando sí, phi 1202880 de tamaño. Por lo que también obtienes estos papeles evolucionados y obtienes todas estas maquetas de ángulo diferentes. Y se puede ver tenemos reloj, tenemos pixel nexus galaxy iMac y vimos mucho más. Entonces si quieres, puedes comprobarlo, pero asegúrate de probarlo por ti mismo. Porque vi en línea a algunas personas quejándose de que ni siquiera pueden instalar el plugin o los maquetas no funcionan o no funcionan en su caso, pero trabajan en caso de Francia. Así que asegúrate de probar eso por ti mismo, pero eso es básicamente todo para las maquetas en Adobe XD. Si tienes Photoshop, si tienes diferentes opciones online, realmente las recomiendo. Y debido a que las puertas son mucho mejores en calidad en rango, también puedes elegir diferentes dispositivos. Puedes elegir, por ejemplo, poner tu camión de impresión de diseñador o ponerlo en una casa o en un cartel o lo que sea. Pero aún no tienes esa opción en Adobe XD. También puedes saltar entre Photoshop y XD y guardar los diseños de salvador de imagen como imágenes. Xsd luego salta a Photoshop, colocarlos en maquetas ahí, luego pulsa control o comando ya que se aplicarán automáticamente a los archivos XD. Pero eso es realmente una solución alternativa. Entonces tus opciones son ya sea de ángulo o si, el momento en que estés viendo este video, quizá surjan algunas opciones diferentes. Pero en mi caso por ahora, es o ángulo o Photoshop o alguna herramienta en línea diferente. Entonces una vez más, hacia arriba rural debido a decidir lo que quieres, lo que más te sientes cómodo con usar. Y si quieres, puedes pagar por ángulo o no tienes que hacerlo, puedes usar la versión gratuita, que es realmente limitada. 17. Atajos: Saber usar los atajos de teclado es extremadamente importante porque va a acelerar tu proceso va a acelerar tu flujo de trabajo. Y va a hacer mucho más fácil tu vida como diseñador UX si sabes usar ciertos atajos para el inicio, asegúrate de aprender los más importantes. Pero más adelante cuando te muevas por la línea y metes tus conocimientos sobre UI UX o Adobe XD como herramienta, entonces realmente te recomiendo aprender algunos atajos, un poco más avanzados. Entonces para mostrarte lo que quiero decir, poco tener un diseño que creé en mi canal de YouTube. Entonces si quieres ver cómo creé, dirígete al canal de YouTube y échale un vistazo. En realidad es una serie de diseños. Estamos pasando del boceto en papel a la estructura alámbrica en XD, después al diseño y finalmente prototipado. Entonces si quieres, puedes comprobarlo por ahí. Y para mostrarte lo que quiero decir, aquí tenemos un montón de estos diferentes elementos, sólidos. Diga que quiero dar clic aquí y luego hacer clic derecho. Se puede ver junto a todos estos, se pueden ver estos atajos. Obviamente lo más importante y de uso común es deshacer, que es Control o Comando Z. Pero también tienes control V, control C. Tienes un comando, somos Comando C por supuesto, pero tienes múltiplo de estos. Entonces si hago clic derecho aquí mismo, se puede ver copia. Se puede ver la apariencia basada, basada, duplicar, eliminar, mover hacia delante, mover hacia atrás, agrupar, desagrupar. Por lo que hay muchos de estos diferentes atajos y realmente te recomiendo que aprendas tantos de ellos como quieras y como necesites, sobre todo cuando desarrolles tu flujo de trabajo y cuando veas que estás usando las mismas tareas una y otra vez de nuevo, es realmente importante guardar esas tareas como atajos porque va a mejorar tu velocidad masivamente. Para aprender estos atajos, obviamente puedes hacer lo que estoy haciendo aquí mismo. Para que puedas hacer clic derecho y puedes ver qué es todo. O puedes ir a sitios web como este. Simplemente puede Google accesos directos de Adobe XD en. Se va a llevar tu Ayuda oficial de Adobe. Y puedes ver los atajos de teclado aquí mismo. Si lo deseas, puedes hacer click para descargar la versión PDF de estos atajos. Y puedes ver que está mostrando opciones tanto para Mac como para Windows. Por lo que puedes ver un atajos generales para menú de edición, para Menú Archivo para pieza o herramienta de lápiz para capas, objetos, grupos y así sucesivamente. Para que puedas descargar los accesos directos aprendidos en PDF de esa manera, o puedes explorarlos a través de Adobe ASD. Simplemente aprende cuál es la mejor manera de ahorrarte algo de tiempo cuando estás trabajando como yo-yo tiene diseñador en Adobe XD es mediante el uso de atajos porque vas a ver en cuanto entren en tu rutina diaria, eres va a poder ser mucho más rápido, mucho más productivo, y vas a estar disfrutando de XD mucho más porque no vas a pensar en exagerar lo que estás haciendo porque tu capacidad mental se ha incrementado con todos estos atajos de TEA. 18. Trabajar con archivos: Se puede trabajar con múltiples archivos y tipos de archivos en Adobe XD sierra desde tipos de archivo de imagen básicos como JPEG, PNG, puede abrir y guardar archivos PDF. Se puede trabajar con iconos SVG y mucho más. Además, los tipos de archivo son realmente importantes cuando se trata de archivos de documentos. Entonces, por ejemplo, debido a que Adobe XD obviamente es creado por Adobe, puedes abrir y trabajar fácilmente con archivos de Photoshop. También puedes trabajar con archivos de Illustrator. Y también se puede trabajar con sketch durante horas porque están tratando de tomar número posible de usuarios de sketch y traerlos a Adobe XD y hacerlos quedarse ahí. Entonces si te muestro aquí en nuestra pantalla de inicio, lo que tenemos está en tu computadora, puedes hacer click ahí y puedes ver claramente empieza con el diseño existente. Entonces de esto es de lo que estaba hablando si tienes un archivo. Entonces por ejemplo, nuestro equipo de desarrolladores de clientes hizo que alguien más te enviara el tipo de archivo y necesitas abrirlo en Adobe XD. Puedes hacerlo desde aquí. Entonces aquí tenemos b es d o AI, por lo que Photoshop o Adobe Illustrator archivo, tenemos XD obviamente, y esto es lo que, ya que abre lo mejor y más fácil. Pero también tenemos archivos de boceto y esto es lo que quería mostrarles. Por lo que tengo algún archivo de boceto de la vision y lo abriré. Y una gran cosa de los archivos Adobe XD es que son realmente pequeños. Pero aquí con este archivo de boceto, con todos estos diferentes componentes, estilos de capa y mucho más, tenemos un archivo grande. Entonces, por eso si echan un vistazo aquí mismo, está tardando mucho tiempo en abrirse. Pero lo que Adobe XD está tratando de hacer es abrir este archivo de boceto y convertirlo a archivos Adobe XD. Entonces como puedes ver, empieza a llenarse con estos componentes y va a mostrar un poco más. Ahora como puedes ver. Y lo que está haciendo es tratar de tomar componentes de boceto y traerlos aquí mismo. Entonces como puedes ver, todavía nos faltan colores, seguimos faltando estilos de carácter. Pero si actualizas a estas fuentes que faltan en este caso, van a aparecer aquí en el panel de estilo de carácter. Pero básicamente así es como se va a ver eso. Por lo que tenemos pantalla de bienvenida, tenemos versión móvil. Si me desplaza hacia abajo, tenemos versión de tablet. Y por último, tenemos versión web aquí también. Contamos con color UI. Entonces esto es básicamente, son una especie de guía de estilo. Tenemos estos componentes principales y obviamente se pueden crear componentes a partir de estos elementos y se puede ver que son bugs a veces como una semana, este texto por ejemplo, pero aquí lo tenemos como componente. También tenemos símbolos los cuales se esbozan una forma de decir componentes. Por lo que solía llamarse símbolos en XD también. Ahora están bajo componentes. Entonces básicamente así es como se ve eso. Por lo que se puede ver que sí se ve bastante desordenado, pero aún se puede trabajar con estos archivos. Puedes abrirlos, puedes guardarlos como componentes nativos en Adobe XD, y luego podrás guardar el archivo más adelante y podrás compartir ese archivo con clientes, desarrolladores, y tus compañeros de equipo. Entonces, finalmente, déjame mostrarte la estructura. Entonces si tomamos, por ejemplo, este símbolo aquí mismo, y si cambio a mi paleta de capas justo aquí, se puede ver lo que tenemos. Entonces tenemos esta forma. Por lo que podemos agregarle todos estos elementos. Digamos que quiero cambiarlos. No obstante puedes ver que se actualiza con bastante facilidad. Tenemos este ícono en el centro, por lo que puedes agregarlo fácilmente. El aspecto de este icono, por ejemplo, tenemos este texto y digamos que quiero actualizar esto. Entonces digamos que quiero extender la base y el botón. Entonces vamos a traerlo hasta aquí. Traigamos este texto sólo un poquito ahora. Entonces son 60 entre ICANN y este texto y este texto. Entonces básicamente ahora este componente está actualizado y puedo hacer lo mismo para todos estos otros componentes. Entonces lo que podemos localizarlo, se llama forma. Y puedo saltar aquí mismo. Puedo hacer lo que te dije. Entonces da click justo aquí, escribe en el foro porque como dije, tenemos múltiples de estos. Para que puedas pasar el rato, has formado dos instancias. Y por último, nos hemos formado de dos instancias de ésta. Entonces quizá sea una mejor idea, y eso no lo hicieron en el primer caso. Debido a que estos son componentes medios y símbolos móviles, llamaré a este formulario móvil. Entonces vamos a probarlo. Form mobile, que es una vez más por qué es importante para el escritorio o de tus elementos. Por lo que tenemos foro y forma y forma. Pero si lo creamos como un formulario móvil desde el principio, entonces tal vez si pudiéramos encontrarlo, móvil aún no existe. Por lo que tal vez hay que cerrar en la salida, luego abrirla de nuevo, y luego se actualizará ahí y se mostrará ahí. Pero eso es básicamente todo. Así de fácil es trabajar con archivos de boceto. Como puedes ver, claramente hay algunos bichos y necesitas encontrar tu camino alrededor de esos bichos. Por ejemplo, puede eliminar estos componentes de este archivo y luego empezar de nuevo. O puedes hacer lo que hice aquí mismo y luego editar los componentes. Cierra archivo dxdy, vuelve a abrirlo y se mostrará como una ayuda a componente ahí. Entonces puedes guardarlo como un archivo x D y puedes compartir con el que estamos desarrollando un video desarrolladores, clientes o compañeros de equipo. 19. Trabajar con recursos gratuitos: Cuando estás trabajando como diseñador de UX, obviamente en cada proyecto que haces, necesitas recursos. Ahora bien, ya sean imágenes, pero esos son iconos, maquetas, cualquiera que sea el otro recurso que quieras usar, tienes dos opciones. Se puede trabajar con recursos gratuitos o se puede trabajar con recursos pagados. Especialmente los principiantes y diseñadores que apenas se están iniciando en este negocio tienden a usar recursos gratuitos. Es por eso que la mayoría de los diseños en línea lucen exactamente igual. Porque todos esos deseos están utilizando básicamente exactamente los mismos recursos que todos los demás. Y ese es el único problema clave. Y el otro problema clave es solo la selección que tienes en línea. Entonces si te muestro con las imágenes ejemplo, pero esto también se puede traducir dos iconos. Aquí tengo abierto sin empalmes, que es básicamente el estándar dorado de estas imágenes libres. Y puedes ver que puedes desplazarte hacia abajo y encontrar algunas imágenes increíbles. Entonces digamos que por ejemplo, para mi proyecto, quiero usar esta imagen. Puedo abrirla. Puedo ver quién es el fotógrafo y puedo descargarlo aquí mismo. También tendré que dejar el enlace al perfil de este fotógrafo porque tendré que acreditarlos. No tienes que hacer esto necesariamente. Pero como dice el rubor, va a ser realmente agradable para ese fotógrafo en particular y para nosotros se ruboriza negocios también. Dejar el enlace en cuanto a dónde encontraste tu imagen para que no tengas que hacerlo, pero es realmente bonito hacer. Paxos hace esto así como todos estos otros sitios web también. Entonces si volvemos a la imagen, digamos que uso esta imagen, pero por ejemplo, quiero usar una foto de esta chica en algunas otras posiciones. O digamos que quiero usar la foto donde se pueda ver a esta chica en su conjunto. A lo mejor está sentada en algún lugar, de pie solar. Entonces veamos si podemos encontrar una foto. Entonces puedes ver que tenemos esta imagen única y esta es la crecer, pero no debería, no tiene estas flores. Entonces veamos si podemos encontrar algo más. Y como pueden ver, ahora estamos atascados. Por lo que no podemos usar esa imagen en una serie de otras imágenes. Sí, es la misma chica, pero son atuendos indiferentes. No tiene eso, esas flores en su cara. No tiene la misma exposición. Los colores no son exactamente los mismos. El atuendo no es el mismo. Entonces de inmediato, tenemos un problema. Entonces, ¿cómo están trabajando los diseñadores en torno a este problema? Simplemente están encontrando otros modelos que están parecidos con la exposición similar en esas imágenes con colores similares, estilos, con temperaturas y mucho más. Pero básicamente esa es tu solución alternativa. Tus diseños no van a ser coherentes porque vas a tomar imagen de este fotógrafo con esta exposición, lo hace fotógrafo con esta exposición. Y la misma historia va para los maquetas. Entonces por ejemplo, si estás usando maquetas que no son de la colección como te mostré, angular collection es entonces una maqueta es una maqueta de uno va a tener, por ejemplo, no sé, iPhone diez. El otro va a tener iPhone 11 y luego MacBook va a ser la versión más antigua. Y mucho más si estás usando iconos, misma historia, digamos que estás usando iconos de esquema en tu caso. Y quizá realmente te guste el ícono de búsqueda de ese contorno atrás. Pero por ejemplo, también necesitas un icono de casa y no puedes encontrar el mismo estilo de iconos en esa espalda. Entonces lo que tienes que hacer es usar completamente diferente a alguien más que lo hizo. Eso va a ser una tarea para los desarrolladores porque los iconos no se hacen de la misma manera. Quizás este icono esté disponible como SVG, este icono está disponible como PNG. Y luego cuando envías esos archivos al cliente, también tienes que decirle al cliente si quieres usar estos ítems. Entonces por ejemplo, esta imagen, este icono, esta maqueta, Tienes que acreditar a todos estos diseñadores porque la crearon. Y bajo ciertas licencias, necesitas hacer ciertas cosas. De lo contrario, estás arriesgando una demanda. Y ese es realmente el tema principal con estos recursos gratuitos porque nuestros, mis casi 20 años en esta industria, encontré a muchos, muchos, muchos diseñadores por ahí quejándose de que alguien más viniera tras ellos. Ido fotógrafo o compañero diseñador o un sitio web porque utilizan un recurso, sobre todo de Google Images. Porque cuando estás usando recursos de imágenes de Google, realmente no tienes ni idea de quién lo creó. Blanco y ellos crearon, mucho menos con sitios web como hormigas se comprometen por ejemplo, o sitios web de iconos como icono plano por ejemplo, al menos sabes quién creó el elemento original, dónde lo descargas y a quién puedes acreditar. Pero si estás usando imágenes de Google, por ejemplo, o archivos de Google, entonces estás en verdaderos problemas porque la mayoría de las veces realmente no tienes idea de quién creó el diseño original o el ícono o lo que sea. Y luego una vez que tu cliente lo use, están arriesgando o el potencial se ordenará. Entonces solo ten en cuenta esas cosas. Número uno, colecciones, por lo que tus diseños no van a parecer coherentes porque puedes tomar una imagen de la dispersión, una imagen de esta persona. Por lo que el diseño se va a ver bastante desordenado, sobre todo en pantallas con menor latencia. Y sobre todo hoy en día tenemos pantallas de 120 hercios. Entonces si estás usando el icono PNG y el icono SVG, los usuarios realmente lo pueden decir, y sobre todo con estas demandas. Así que solo ten en cuenta todas esas cosas cuando estés empezando, cuando estés usando estos artículos gratuitos de la web. Entonces sólo asegúrate de entender. estoy diciendo que no uses estos artículos gratuitos, pero asegúrate cuando los uses, para usarlos de manera responsable, simplemente guarde todas estas licencias, mar de estos recursos, muy, los encontraste. Puede abrir Google doc por ejemplo. Y luego puedes enumerar imágenes en una lista donde las encontraste para un proyecto o iconos en particular o cualquier otro recurso que estés usando. Y luego puedes enviar al menos a tu cliente y decir, si quieres usar estos recursos. Tan cuerdos que hice en mi diseño, asegura de seguir estos pasos, agradecer a estas personas, poner los enlaces en sus sitios web y así sucesivamente. Entonces, por lo tanto, tú como diseñador estás cubierto y luego estás tomando la responsabilidad de ti mismo ante tus clientes y haz que tengan elección. Entonces si quieren usar estos artículos, pueden, pero ahora conocen los riesgos. Por ejemplo, llamémoslo así. O si quieren usar algunos otros artículos, entonces estás despejado también porque te estás ahorrando de posibles demandas y de temas potenciales en el futuro. 20. Trabajar con recursos premium: Pero lo que sucede después de cierto tiempo cuando ganas algo de tracción, cuando obtienes algunos clientes más valiosos, cuando ahorras algo de dinero que un realmente, realmente recomiendo que evites todos estos recursos gratuitos, excepto por ejemplo, para fuentes, porque puedes usar formularios de Google cuales son gratuitos y de código abierto y realmente geniales. Pero una vez más, la mayoría de los diseñadores están ahí están utilizando esos fondos. Así que asegúrate de entender si tu diseño se ve bastante similar o incluso exactamente igual que algunos de estos otros diseñadores. Hay una gran posibilidad potencial de que hayas elegido fuente que otros diseñadores también han elegido, iconos, imágenes, y mucho más. Entonces una vez más, si quieres usar recursos premium, hay muchas opciones diferentes están ahí, pero lo que realmente recomiendo es y elementos vitales. Entonces así es como se ve. N, estás obteniendo todos estos artículos que ves justo aquí bajo un solo precio. Por lo que estás recibiendo 50 millones de fotos adicionales. Aquí también tienes sus fotos. Tienes video stock, plantillas de video, música, efectos de sonido, gráfica Dan blood. Por lo que imprime plantillas, sitios web, tus hijos infografías. Contamos con gráficos, así fondos, texturas, patrones, iconos, presentaciones, fotos, fuentes, complementos, plantillas web como plantillas de sitio. También tienes temas de WordPress. Tenemos 3D aquí mismo tenemos WordPress, CMS, tres archivos. Contamos con eBooks y cursos así en Watteau dots plus, estás obteniendo todos estos diferentes elementos bajo un solo precio. Estás pagando el precio por un año. Y luego en ese año tienes un uso ilimitado de estos archivos. Porque en algunos otros sitios como usaid, por ejemplo, cuando pagas, tienes un límite diario de descargas. Por lo que tienes un límite a cuántos artículos puedes descargar en una sola sesión, por ejemplo, o para un solo proyecto. Si bien Whitt y elementos vitales, no necesitas eso y puedes usar lo que quieras con los elementos Eduardo y siempre estás cubierto con su licencia. Entonces tomemos fotos, por ejemplo, saltemos aquí mismo, y veamos fotos. Por lo que una vez más, puedes ir a esas 120 fotos y son 50 millones de fotos adicionales por ahí. Entonces digamos que quiero usar esta foto. Puedo dar click en él. Y cuando se abre, se puede ver claramente de inmediato una enorme diferencia entre las fotos premium y las fotos gratuitas. Es del tamaño. Para que puedas usar estas fotos, por ejemplo, en una campaña. Digamos que tu cliente tiene una campaña. Están utilizando esta huella fotográfica exacta en superficies pequeñas. Entonces digamos en una tarjeta de visita o en un volante en superficies grandes. Entonces digamos en un costado de un edificio, en un sitio web. Entonces las páginas web, y digamos, por ejemplo, el diseño móvil también. A lo mejor lo están usando en una impresión, mejor lo están usando en televisión. Por lo que realmente estás cubierto. Número uno por la licencia y número dos con el tamaño del archivo, porque el tamaño del archivo es enorme y se puede trabajar con él realmente fácilmente. Ahora cuando llega el momento de descargarlo, simplemente puedes hacer clic aquí para descargarlo, puedes crear un nuevo proyecto y llamémoslo imagen r, o una imagen de proyecto o lo que sea. Y simplemente puedes hacer clic en Crear, Proyectar, nuestra imagen, anuncio y diálogo. Y se va a empezar a descargar de inmediato. Puedes descargar sin licencia, pero de esa manera vas a conseguir marca de agua por toda esa imagen, como ves aquí mismo. Por lo que puedes usarla y enviarla a los clientes de esa manera, pero aún así tendrán que comprar esa imagen. Entonces es realmente un arrastre. Se puede ver que tiene 70 megabytes de tamaño, así que es realmente bastante enorme y deja que lo cancelen rápidamente. Entonces no te molestas con ello porque quiero mostrarte aún más. Es por esta personas a 74 imágenes. Entonces estamos mirando a esta chica. Para que pueda abrir el perfil de esta persona. También puedes desplazarte hacia abajo y ver de inmediato. Entonces aquí está, y se puede ver cómo se ve eso. Por lo que de inmediato se puede ver que es de esta serie porque la iluminación es la misma, los modelos son iguales. Para que puedas empezar a desplazarte y ver dónde está esa imagen. Entonces digamos por ejemplo, necesitas estas imágenes de estas personas. Se puede ver que todos ellos están en esta oficina. La iluminación es exactamente la misma. Los tamaños son enormes y también puedes obtener todas estas imágenes adicionales para usar de esta misma serie. Entonces digamos que tienes sobre nosotros sección en un sitio web por ejemplo. Y quieres mostrarle a tus compañeros, puedes usar a estas personas. Si quieres mostrar tu entorno laboral, puedes usar a estas personas. Y va a parecer coherente porque es del mismo set creado el mismo día, bajo la misma iluminación por el mismo fotógrafo, subido en un mismo lugar. Por lo que en este caso en los elementos VO2, y se pueden utilizar todos bajo la misma licencia. Por lo que no es necesario descargar cinco imágenes, tener cinco licencias diferentes para enviar a tu cliente, y tienen que acreditar a cada autor de esas cinco imágenes diferentes. Simplemente pueden usar esta licencia. No necesitan acreditar a nadie. Simplemente tienen esa licencia por si este fotógrafo se acerca a ellos. Y simplemente le pueden mostrar la licencia para decir, echar un vistazo a mi diseñador y consiguió esto de un VO2 elementos son tener la licencia y están cubiertos. Por lo que esta es realmente la principal y clave diferencia entre recursos gratuitos y pagados. Una vez más, puedes empezar con recursos gratuitos. Tan solo asegúrate de entender cuándo las estás usando. Hay algunos riesgos involucrados y hay algunos niveles profesionales involucrados, como expliqué. Pero cuando estás usando licencias profesionales y estás pagando por esos servicios, entonces realmente no tienes limitación. Y la elección es realmente bastante enorme como viste aquí mismo. Déjame mostrarte una cosa más con los iconos por ejemplo. Entonces si te llevo de vuelta aquí mismo y digamos, no sé, iniciamos iconos por ejemplo. Y se puede ver aquí mismo se abre en diferentes categorías. Entonces digamos que necesito gráficos porque necesito estos iconos de inicio, puedes separarlos claramente así. También puedes elegir el formato de archivo que quieras. Y también tienes un poco más de estos formatos de archivo soportados, pero no se muestran aquí por el momento. Entonces digamos que realmente me gustan estos y me gusta cómo se ven. Por lo que simplemente puedo visitar a la persona que los hizo. Es solo ícono. Y se puede ver claramente cómo se ven estos iconos. Y puedo saltar aquí mismo y localizar los iconos que puedes ver exactamente con el mismo estilo. Tienes, todos estos diferentes iconos para que puedas usarlos en tu proyecto. Y tu proyecto va a ser mucho más coherente. Además, se puede ver claramente que se hacen realmente con precisión y realmente profesionalmente. Pero también estás obteniendo es iconos de colores así como los iconos atípicos sin ningún color. Para que puedas ajustarlos como necesites y como quieras. También obtienes estas ilustraciones de aspecto premium, que es una gran tendencia que estoy viendo recientemente, sobre todo en los últimos uno o dos años, gente está usando este plug-in en Adobe XD para generar estas ilustraciones. Y cada diseño por ahí se ve exactamente igual porque todos estos diseñadores están usando exactamente las mismas ilustraciones. Y van tan lejos para ser tan perezosos, no para cambiar el color de estas ilustraciones y tal vez cambiar la pose, tal vez cambiar el tamaño, composición, o cualquier otra cosa. Simplemente están usando esos iconos e ilustraciones de forma gratuita. Entonces, por lo tanto, usar un elemento Watteau por ejemplo, en servicios como le da esa ventaja competitiva. Porque no sólo estás cubierto por estas licencias, tus diseños van a lucir frescos porque tienes todos estos ejemplos para elegir. Y van a parecer mucho más profesionales porque vas a estar llevándolos de diseñadores que los crearon a un lado de las colecciones. Entonces si esas son imágenes como te mostré o iconos como te mostré en este caso, tus diseños van a lucir mucho más pulidos y mucho más profesionales si estás usando servicios premium como elementos inverter, por ejemplo. 21. Uso de los kits UI: Si no quieres empezar desde cero cada vez, la gran manera de mejorar tu flujo de trabajo y aumentar tu velocidad es usar kits de interfaz de usuario. Y puedes usar kits de interfaz de usuario que son gratuitos y realmente pequeños, o que son pagados y realmente grandes. Entonces déjame mostrarte una comparación rápida aquí mismo. Por lo que Cura tiene un kit de interfaz de usuario chatty, que es el UIKit que mi equipo y yo hemos creado hace mucho tiempo. Entonces tienes todos estos elementos, tienes todos estos componentes, tienes todos estos estilos de personaje aquí mismo, para que puedas empezar de inmediato. Entonces si hago clic aquí y me llevo algunos de estos. Entonces, por ejemplo, usemos esto. Y digamos que quiero usar, por ejemplo, en una vieja copia BAR de escritorio y pegada aquí mismo. Quiero usar esta imagen, copiar y pegar aquí mismo. Y digamos que quiero usar este botón, por ejemplo, copiar y pegar aquí mismo. Entonces te das la idea de lo rápido que es esto. Solo necesitas copiar y pegar elementos y también puedes usar componentes. Entonces si te llevo de vuelta una vez más, por ejemplo, puedo ir justo aquí y tenemos nav bar chat por ejemplo. Puedo arrastrarlo y soltarlo aquí mismo. Y simplemente puedo posicionarlo para que esté aquí mismo. Para que veas que puedes empezar a construir estos elementos muy rápidamente. Se pueden cambiar estos artículos. Se pueden cambiar los colores, se pueden cambiar imágenes, iconos y mucho más. Entonces por eso tú, por qué los niños son extremadamente útiles. No es necesario crear estos elementos desde cero. Simplemente puedes usarlos. Ahora este era mi kit de UI, pero no necesitas comprar nada de lo que creamos. Lo que puedes hacer es simplemente usar UIKit gratis que están en línea. Pero una vez más, te estás topando con este mismo tema que mencioné anteriormente sobre artículos gratuitos y premium. Tus diseños podrían terminar luciendo exactamente iguales, pero no en todos los casos. Déjame mostrarte. Entonces si saltas aquí mismo, que es Adobe.com slash products, futuros XD, o simplemente escribiendo kits de interfaz de usuario de Adobe XD en línea y vaya al sitio web de Adobe. Puedes ir aquí mismo y ver que Reino Unido tiene diseño de Apple, que es diseño certificado por Apple. Y esto es realmente extremadamente útil si estás creando apps para iOS. Por lo que realmente, realmente realmente recomiendo que consigas este diseño de material de google, misma historia, pero para componentes AGM de Android. Para que puedas hacer eso. Microsoft UWB, si estás trabajando para Microsoft, plataformas, para Amazon, Amazon, Alexa, si estás trabajando con voz, que es el futuro, Adobe XD también soporta. Tienes IBM Design y también tienes Bootstrap. Entonces si estás trabajando con bootstrap, no puedes empezar ahí. Además, puedes desplazarte todo el camino hacia abajo y puedes ver que tienes pantalla de registro Notas, app, wireframes dibujados a mano. Por lo que tienes esta fecha de componentes de presentación del sistema de diseño. Por lo que puedes saltar aquí mismo y descargar cualquiera de estos UIKit para arrancar tu proceso creativo. Entonces una vez más, solo piénsalo. Empieza siempre con los libres que, no importa lo que estés haciendo, sobre todo si te pones en marcha. Entonces solo agua de escritorio, ve qué funciona para ti, qué no. Y luego más adelante, puedes comprar algunos de estos kits y elementos de la interfaz de usuario si quieres. Pero como viste, la libre elección es extremadamente enorme y esto es sólo en este sitio web oficial de Adobe. Son sitios web de terceros por ahí y diseñadores creando todo tipo de cosas increíbles. Entonces de verdad te insto a que lo revises y veas porque sois niños realmente te pueden ahorrar un montón de tiempo y un montón de energía trabajando en cualquier proyecto, grande o pequeño. 22. Crear un proyecto de diseño: Cuando estás creando proyectos de diseño, hay pocas cosas que debes considerar, como lo grande que es el proyecto, ¿cuánto tiempo te va a llevar? Pero también, ¿cuánto tiempo puedes ir con la estructura que tienes en su lugar? Significado si el cliente por cualquier razón, decide expandir ese proyecto en el futuro. Entonces si estás haciendo un diseño de sitio web, tal vez quieran agregar algunas páginas más. Si están haciendo diseño de aplicaciones, tal vez quieran agregar más pantallas. Están haciendo diseño de tablero. lo mejor hay que añadir unas cuantas secciones más que antes no contabas. Entonces, ¿cómo todo eso se va a ver a tu proceso de diseño y tus archivos son lo suficientemente escalables? ¿ Es su estructura lo suficientemente escalable como para soportar carga de deuda de requisitos de diseño adicionales y retroalimentación de diseño. Entonces les voy a mostrar un archivo que es de mi curso, Adobe XD masterclass, que es a más de 20 horas de masterclass de duración. Y lo puedes conseguir con un enorme descuento. O si estás viendo este curso en una de las plataformas, simplemente puedes ir e inscribirte ahora. Y si ya estás inscrito en la clase y entonces vas a conseguir que este archivo se incluya en un expediente de clase. Entonces así es como se ve. Y normalmente empiezo con el resumen de diseño. No tenemos un resumen de diseño aquí en este singular archivo porque es un archivo externo. Y una vez más, si estás en un curso, vas a conseguir ese breve de diseño. Después puedes replicar ese archivo a tus propios proyectos sin importar si son grandes o pequeños, puedes usar ese archivo de proyecto para los escritos de diseño para tus proyectos tanto personales como comerciales. Por lo que una vez más, vas a conseguir ese expediente cuando estés inscrito en un curso. Pero aquí tenemos esta estructura de archivos. Y como dije, normalmente empezamos con un breve de diseño. Y dentro del resumen de diseño, necesitamos obtener toda esta información importante como quién es el cliente, quién es su público objetivo, edad tienen, dónde viven, qué hacen, cómo van a interactuar con nuestro dashboard del sitio web de la app, lo que sea que estemos haciendo. Y luego vamos a hacerle al cliente todas estas preguntas adicionales las cuales se listan y explican en ese video breve de diseño. Por lo que una vez más, puedes comprobarlo en el curso y consultar también el archivo. Entonces después de reunir toda esa información, lo que estamos haciendo es comenzar, en este caso, la arquitectura del sitio web. Por lo que aquí tenemos la arquitectura del sitio web por ahí. Y no voy a acercar todo el camino para no molestarte, pero esto es sólo un nivel de todas las páginas actualmente en nuestra página web, cómo se están interactuando entre sí. Y esto es justo en el nivel muy básico sobre cómo las páginas están interactuando entre sí. Si el usuario hace clic en una página, ¿a dónde los lleva? Si están haciendo clic en otra página, ¿a dónde los está llevando un poco ir de página en página? ¿ Necesitan ir a páginas separadas, páginas externas, y mucho más? Una vez más, si te inscribes en el curso, Todo se explica en ese video. Debajo de eso tenemos alámbricas de papel. Y como dije muchas veces, realmente me gusta empezar con wireframes de papel porque es justo el proceso tan fácil que tú, todo lo que necesitas hacer es simplemente usar cualquier tipo de Ben, cualquier tipo de papel. Y simplemente puedes volcar tus ideas que tienes en la cabeza en un trozo de papel. Y en cuanto empieces a hacer eso, empiezas a darte cuenta de que nuestras ideas SOM van a funcionar. Quizás algunas ideas podrían no funcionar con este proyecto. Entonces vas a poder entenderlo rápidamente porque puedes hacerlo mucho más rápido de lo que haríamos empezando con cualquier software incluido Adobe XD, porque lo único que necesitas una vez más es solo un bolígrafo y papel. Entonces una vez que decidas sobre el estilo general del proyecto, sobre la estructura general del proyecto. Entonces puedes pasar de los alámbricos de papel a Adobe XD. Y aquí tenemos alambradas de papel aquí mismo. Los escaneé y los arrastré y los tiré dentro de Adobe XD. Pero si no tienes un escáner, puedes tomar una foto con tu teléfono y luego puedes traer esa imagen en Adobe XD. Y a partir de entonces podemos pasar a los wireframes. Y se puede ver que tenemos justamente estos colores básicos. Entonces tenemos pocos tonos de gris, como gris realmente claro, quizá un poco más oscuro. Y luego este gris oscuro, Tenemos un logo porque en este caso los clientes centran el logo y tenemos algunos elementos estructurales como el pie de página aquí. Y se puede ver que acabamos de hacer esta sola línea en los enlaces de pie de página porque aún no nos dimos cuenta en este punto la estructura del pie de página va a contener, por lo tanto, simplemente la mantuvimos muy mínima, pero al mismo tiempo sigue funcionando como un pie de página y aún así vas a poder entender qué es todo. Dan, aquí tenemos una página de inicio de sesión y registro, y aquí tenemos la página de panel principal principal, que es la página de inicio para el panel. Porque cuando los usuarios pasan por todas estas páginas, van a iniciar sesión y registrarse desde cualquiera de estas páginas porque tenemos un botón de llamada a la acción aquí en la parte superior. Entonces pueden ir allí. Y desde ahí pueden acceder a su panel de control y acceder a toda esta información importante, como información de cuenta, transacciones, tarjetas de préstamos, etcétera. Porque se trata de un estudio de caso del sitio web del banco. Entonces básicamente las deudas, cómo se van a ver los wireframes y los wireframes están ahí. Una vez más, en esta etapa, puedes empezar a compartir con tu cliente. El cliente puede empezar a dejarte retroalimentación. Pueden hacerlo también en la etapa de wireframing en papel. Pero es mucho más elegante y aquí es mucho más sencillo porque lo has hecho en Adobe XD. Puedes compartir el enlace único con ellos y luego ellos pueden dejar la retroalimentación. Quizás puedan empezar a entender la estructura del sitio web, de la aplicación o del tablero, lo que sea que estés haciendo, para luego dejarte retroalimentación concreta sobre la estructura de la deuda o en una sola página de una estructura. Y puedes cambiarlo fácilmente porque una vez más, échale un vistazo a él es solo un alámbrico. No tienen ninguna imagen de la que preocuparse. No tienen colores de los que preocuparse. Quizás incluso no icono de qué preocuparse porque se puede ver en este caso, acabamos de utilizar estrella solo para indicar que aquí es donde va a ir el ícono. Una vez que empezamos con el diseño, utilizamos este color para todas las imágenes como no puedes ver. Y tienes que explicarle eso a tu cliente una vez que estás haciendo esto porque a veces no entienden y te van a preguntar, sobre todo clientes que antes no trataban con diseñadores, qué es esto mientras que la imagen y tú tienen que explicarles y guiarlos a través de toda la estructura y todo el proceso de diseño. De acuerdo, esta es solo la parte de la ideación. Esta es sólo la idea. Esto va a representar la imagen, esto va a representar tu logo, esto va a representar el icono y así sucesivamente y así sucesivamente. Por lo que una vez que están fijados en la estructura, o al menos parcialmente configurados, entonces puedes pasar al diseño en sí. Y aquí tenemos el diseño. Y como puedes ver, incluimos muchas imágenes diferentes, muchos colores diferentes Esta vez, también incluimos diferentes transiciones, que te voy a mostrar en tan solo un segundo. Como se puede ver, el pie de página es ahora como un todo porque en realidad conocemos la estructura general de nuestra página donde todo va mayor calificación se presenta para que podamos incluir ese pie de página. Y una vez más, por las propiedades de vinculación, simplemente puedo incluir esto como componente. Y se puede ver. Y esto como componente infantil. Y todos estos son hijos componente de este componente maestro. Y cualquier cambio que hagas aquí mismo a la foto, por ejemplo, cliente cambia de opinión y no quieren tarjetas, tarjetas de débito, por ejemplo, tal vez no quieras cambiarlo por otra cosa, o necesitas hacer es simplemente ir justo aquí a un componente maestro. Y una vez más, ya sabes, es un componente masivo debido a este campo en diamante, mientras que los componentes hijo son, tienen este diamante vacío y holdouts. Entonces, una vez más, si quieren cambiar, por ejemplo, esas tarjetas de débito, puedes cambiarlas aquí y se actualizará automáticamente en tiempo real en todos tus tableros de arte. Pero también se puede ver aquí mismo es que incluimos animaciones aquí. Y también creamos diferentes pantallas para el diseño de dashboard también. Porque ahora con los wireframes, acabamos de tener uno. Pero es solo para determinar que tenemos ese estilo auditivo. Sabemos lo que va a contener el tablero. ¿ Y cómo sabemos eso? Porque le hicimos a nuestro cliente una gran cantidad de estas diferentes preguntas que una vez más no figuran en breve de diseño. Y cuando comienzas a crear tu vas a comunicarte con tu cliente, ya sea a verdadera holgura a través de correo electrónico, chats, whatsapp, y-bar, realmente no importa donde estés llevando esta comunicación dos, eres les va a hacer un montón de preguntas diferentes. Y luego de esta sola página condenas sucursal a todas estas páginas diferentes porque ahora ya sabes, ¿cuál es el maestro y requirió información? ¿ Cuál es la información clave que van a mantener en esta página? Y luego se puede ramificar desde ahí como hicimos en este caso. Por lo que se puede ver que tenemos cuentas de dashboard, largos de transacción, y tenemos todas estas páginas porque una vez más, le preguntamos a nuestro cliente cuáles son los principales servicios. Incluimos esos servicios y sucursal más simple a partir de ahí. Y una vez más, te expliqué todo eso en el curso para que puedas comprobarlo a ver por ti mismo. A continuación se termina lo que hicimos después del proceso de diseño. Porque puedes ver este es el diseño blanco porque está hecho para los dispositivos de escritorio como estas pantallas grandes y así sucesivamente. Por lo que pasamos al diseño de sitios web receptivos. Y aquí sólo tenemos algunos ejemplos de diferentes cuadrículas. Y así es justamente como se ve una de estas bases. Entonces esta es solo la página de inicio y mostré en el curso cómo puedes ir desde este amplio layout hasta este pequeño layout y adaptar tu layout a todas estas páginas diferentes. Ahora no queríamos todas estas otras páginas porque entonces el Curso tomaría algo así como, no sé, 100 horas o algo así. Por lo que acabo de explicar la estructura oral, cómo funciona todo. Guié a cada estudiante a través de todo este proceso, expliqué cómo todos estos diferentes elementos se están adaptando a estas diferentes anchuras y alturas. Y luego pasamos al diseño de sitios web receptivos para nuestra pantalla de tablero. Ahora también hicimos lo mismo aquí que hicimos aquí. Por lo que solo usamos la pantalla de inicio del panel y lo mismo para esta página. Entonces Dashboard, la pantalla de inicio y la pantalla de inicio del sitio web aquí también. Y los adaptamos a través de todos estos diferentes tamaños. Entonces básicamente tienes cinco tamaños diferentes. Y puedes saber cuántos tamaños va a apoyar tu cliente simplemente preguntándoles si el cliente no sabe, si no entiende, que, simplemente pueden preguntar, hay desarrolladores sobre todos estos ancho diferente. Esto es especialmente importante en el diseño web, también en el diseño de aplicaciones. Porque solo imagina que estás creando un diseño para iPhone 12, por ejemplo. Y el cliente quiere apoyar el iPhone ocho. También quieren bajar al iPhone siete, pero esos teléfonos más viejos no tienen una muesca en la parte superior. Por lo tanto, tienes que adaptar tu diseño para que se ajuste a las necesidades de la pantalla más pequeña. Además, la densidad de la pantalla es diferente. Entonces, por lo tanto, tienes que prepararte haciéndole todas estas preguntas a tus clientes porque es algo diferente. Si solo tienen una página en un tamaño y eso es todo. O si tienen como nosotros aquí mismo. Entonces vamos a comprobarlo. 246810121415, diferentes páginas, como se puede ver, en cinco tamaños diferentes. Y también estamos haciendo wireframes así. Y wireframes en un pedazo de papel y arquitectura de sitios web, mucho más. Por lo que solo puedes imaginar que un proyecto como este te va a tardar un mes o dos en completarse, dependiendo de qué tan activo esté el cliente y con qué frecuencia respondan a tus comentarios. Por lo que solo te puedes imaginar que va a llevar mucho tiempo completar un proyecto como este, en lugar de simplemente hacer una sola página. Pero eso realmente no importa. El proceso habla por sí mismo y se mantiene. Tienes que hacer todas estas cosas si quieres hacer un seguimiento de lo que estás haciendo. Si quieres mantener al cliente en bucle, si quieres mantenerlo en tus notas para que puedas hacer todas estas cosas o no. Pero entonces una vez más, dije al principio, quieren hacer más páginas. No tenías ninguna estructura en su lugar. Por lo que esas páginas van a verse diferentes a la página original. Entonces hay que cambiar la página original también. Y ahora estás en este bucle una vez más. Por lo que tener una estructura sólida en su lugar tan pronto como desde el principio. Por lo que tan pronto como empieces a ir y empezar a diseñar te va a ayudar masivamente más tarde y va a ayudar a tu cliente a escalar y hacer crecer este proyecto a medida que hacen crecer su negocio. Entonces después del diseño responsive, como puedes ver, tenemos guía de estilo del proyecto. Y la guía de estilo del proyecto contiene todo, desde las personas que llaman a la tipografía y diferentes tamaños de fuente y pesos de fuente, hasta la iconografía también. Diferentes componentes son mucho más. Y puedes ver aquí mismo cuántos estilos de personajes tenemos, cuántos colores tenemos. Y por último, cuántos componentes tenemos. Se puede ver que hay montones de ellos. Y por último, después de que se complete, entonces estamos pasando a la presentación del proyecto. Y simplemente estoy explicando 3D cómo funciona en el espacio. Y puedes ver aquí cómo se ven estos tres componentes. Entonces esto es sólo un solo componente. Se trata de componentes Horace state, pero estamos logrando crearlo en 3D para dar este tipo de look. Después de que expliqué la presentación, vamos a pasar a Q y a. y vas a conseguir toda esta información adicional, que es parte del curso, y ese es básicamente el curso en sí. Algo importante que quiero mencionar son estos componentes. Y por fin quiero mostrarles cómo se ve todo esto. Por lo que los componentes son extremadamente importantes porque puedes escalarlos a medida que te desplazas. Entonces déjame solo mostrarte un ejemplo rápido. Si acercamos aquí mismo a mi sitio web diseño responsive. Se puede ver que estos son componentes porque si hago doble clic aquí mismo, tenemos el estado flotante y tenemos el estado por defecto, y tenemos lo mismo para todos ellos. Se puede ver cómo nuestro estado y estado por defecto. Entonces si avanzamos hacia abajo desde ahí, se puede ver que tenemos lo mismo para aquí. Entonces si hago doble clic aquí mismo, se puede ver que tenemos estado de horror y tenemos estado por defecto. Estos son dispositivos de gran tamaño. Por lo que una vez más, el estado de flotación y el estado por defecto. Pero debido a que estos son dispositivos medianos y tabletas, sólo tenemos Horst, lo siento, estado predeterminado porque eso es todo lo que necesitamos. Porque en la tableta no se puede flotar y lo mismo va para las espumas. No se puede pasar el ratón en la pantalla del teléfono. Entonces hay que pensar en todas estas cosas. Una vez que comienzas a diseñar, tienes que adaptar todas tus páginas. Y se puede ver claramente que este componente se está adaptando muy bien. Se puede ver cómo el texto está realmente muy bien envolviendo. alta calificación se extiende para llenar el espacio necesario. Todo se ve en orden y como debería. Entonces, básicamente, eso se trata de componentes. Y por último, déjame golpear la vista previa. Por lo que voy a dar clic en este flujo. Haga clic aquí para lanzar mi vista previa. Y te voy a mostrar cómo va a quedar todo esto si te inscribes en un curso y vas a conseguir todas estas diferentes animaciones. Por lo que aquí tenemos un simple efecto hover. Y vas a ver una vez que empiece a desplazarme, tenemos este efecto morfismo de vidrio en el fondo y todo se queda puesto y se mantiene fijo. Una vez que empecemos a desplazarnos. Después tenemos estos efectos flotando con estos iconos animados de fondo. Nosotros también tenemos esto. Tenemos efecto hover para todos estos diferentes botones. Se puede ver una vez que se cuelga, estas flechas se están moviendo. Y puedo ir a la página de cuentas, por ejemplo, desde donde quiera que esté. Y aquí tenemos estos. Por lo que tenemos efecto flotante aquí y así tenemos estos. Por lo que al hacer clic en algunos de ellos, están cambiando dependiendo del servicio que el cliente esté ofreciendo en esta etapa. Y siento que mi computadora se ponga un poco de buggy en C ahí. Entonces, por lo tanto, una vez que empieces a moverte por todos estos, vas a conseguir todas estas animaciones. Por último, tenemos algo así como tarjetas y incluimos algunas animaciones más profundas aquí con el flotador, se puede ver que el corazón se está expandiendo algo así como un latido del corazón. Tenemos esta animación también con la sombra de fondo aquí añadida también. Igual para estos, tenemos éste, por lo que la tarjeta gira. Tenemos efectos hover en todos estos diferentes botones. Y una vez que pases por todas estas diferentes páginas, puedes ir a login. Puedes hacer clic en olvidó contraseña o no tener cuenta. Puedes ver que se anima una vez que inicias sesión, vas al panel y todas estas diferentes páginas están conteniendo información diferente. Para que puedas hacer click a través de todos estos. Por ejemplo, puedes ir a tu cuenta, digamos, y puedes cambiar entre ellos aquí. Y es por ello que los componentes son tan importantes como un seguir explicando, se puede animar estos, se puede obtener el efecto más alto aquí. Tienes estos grupos desplazables, así. Y se puede pasar por todos estos. Y básicamente ese es el diseño y cómo se hace. Pero puedes cambiar entre ellos. Puedes cambiar diferentes tarjetas, puedes depositar fondos para descartar y mucho más. Entonces ese es el diseño del curso. Se puede inscribir en un curso. Y si estás viendo esto en YouTube, descuento masivo se va a vincular abajo. Así que asegúrate de comprobarlo y asegúrate de ingresar ese código de cupón para obtener ese descuento masivo porque esta oferta es limitada, así que asegúrate de usarla y eso es básicamente todo para todo este proyecto. Solo quería mostrarte cómo puedes estructurar tus proyectos de diseño, cómo puedes crearlos, y luego puedes escalarlos a mayor escala. No importa cuántas pantallas tengas, no importa cuántos tamaños tengas. Una vez que tengas la buena base en su lugar, entonces puedes escalar infinitamente. 23. Crear el diseño: Cuando comienzas a crear diseño, como expliqué en el ejemplo anterior, puedes hacer muchas de estas cosas diferentes en Adobe XD. Por lo que sólo quiero elaborar rápidamente algunos de estos diferentes consejos y trucos. Y siempre puedes ver mis cursos. Siempre puedes echar un vistazo a mi canal de YouTube con montones de estos diferentes tutoriales si quieres ir en profundidad, este es solo un curso básico y solo quiero mantenerlo agradable y corto para brindarte la mayor cantidad de información posible. Entonces si vamos y lo echamos un vistazo desde el ejemplo anterior aquí tenemos este diseño de sitio web. Yo solo quiero mostrarte rápidamente cómo se hace. Entonces lo que tenemos aquí mismo es esta navegación. Y se puede ver lo que mencioné sobre los estados componentes. Puedes tener tantos estados de componentes como quieras. Se pueden incluir diferentes estados de flotación. Puedes hacer lo que quieras con ellos. Entonces en este ejemplo, como se puede ver, tenemos cuentas estatales por defecto, tarjetas de préstamos, invertir digital. Por lo que todos estos diferentes elementos de menú y plus hemos incluido componente dentro del componente, que es para este botón, que tiene dos estados. Entonces básicamente esto se puede complicar extremadamente o puede ser extremadamente fácil y simple cuando apenas estás empezando, asegúrate de mantener las cosas bonitas y sencillas para no confundirte. Pero una vez que obtienes algo de exposición, una vez que entres algo de todo esto, asegúrate de intentar incluir los diferentes días de componentes porque te va a hacer la vida mucho más fácil y mucho más simple que con solo un solo entonces puedes copiar y pegar en cualquier otro lugar de tu diseño. Ahora, al seguir adelante, se puede ver que está fijo al desplazarse. Entonces cuando hago clic aquí para abrir esta vista previa, puedes ver cuando empiezo a desplazarme Que esto está arreglado porque está diciéndole a Adobe XD, asegúrate de quedarte donde te pongo cuando empiece a gatear, asegúrate de estar ahí. Se puede ver que aquí no tenemos ningún efecto flotador. Y eso es a propósito porque no quería mientras demasiado mis alumnos. Pero les expliqué que se pueden incluir diferentes efectos de terror. Pero en este caso, no creo que funcione tan bien por este efecto de vidrio, morfismo de vidrio que tenemos en el fondo. Quería incluir ese efecto de fondo solo para mantener las cosas bonitas y simples y hacer que se vea un poco más fresco, porque ese es el punto completo de este proyecto. Si vas al video breve de diseño en el curso, vas a entender por qué, porque ese es el público objetivo, público objetivo específico para este proyecto exacto. Entonces, por tanto, un fondo blanco no va a hacer sólo muerto. Pero si estás haciendo fondo de un solo color como blanco, gris, gris oscuro, negro, lo que sea, cualquiera que sea el color que incluyas, entonces puedes incluir un efecto más alto para cada uno de estos elementos del menú, como lo hacemos aquí para el botón de inicio de sesión por ejemplo. Entonces este es solo el estado por defecto. Este es un estado flotando y puedes ver que funciona sin importar dónde te encuentres. Pero con este efecto morfismo de vidrio, realmente no se ve tan bien tener ese efecto flotador. Entonces así es como eso se completa. Y lo siguiente quiero mostrarles nuestros grupos desplazables. Ahora, se puede ver aquí que tenemos cuatro banderas diferentes. Aquí tenemos cuatro, pero aquí tenemos tres, aquí tenemos dos. Y eso se hace con grupos desplazables. Entonces si te llevo aquí a la página original, puedes ver cómo se ve eso. Por lo que tenemos 246 banderas diferentes con seis tipos de cambio diferentes. Pero aquí en una versión móvil, por ejemplo, sólo tenemos que, así que déjame llevarte rápidamente al, este. Por lo que son 40 tabletas y podría hacer clic en agrandarlo. Y bajemos donde están. Aquí están. Entonces, lo que los usuarios pueden hacer es simplemente tocar. Y desplazarse entre todos estos y luego ir a la izquierda y a la derecha. Entonces lo que esto está haciendo es que estás preparando tu diseño para diferentes dispositivos en diferentes tamaños de dispositivo y diferentes tamaños de pantalla. Y lo estás haciendo, en este caso con algo que se llama pergamino. Y al hacer clic ahí mismo, se puede ver que este pergamino horizontal está incluido. También puede incluir desplazamiento vertical. E incluso puedo mostrarles eso en este ejemplo, que es para nuestro diseño responsive de dashboard. O incluso podemos subir aquí. Si hago clic aquí y luego hago clic aquí, vista previa, puedes ver que tenemos desplazamiento vertical incluido aquí, lo cual es genial porque puedes establecer estos puntos de corte y no necesitas extender tu diseño hasta abajo. Simplemente puedes usar el espacio que tienes. Y luego simplemente puedes incluir estos grupos desplazables en su lugar. Por lo que puedes mostrar todos estos datos e información diferentes y adicionales lugar de simplemente extender tu diseño al hacer que los usuarios se desplazen por tu diseño en su conjunto. Y por último, se puede hacer mucho más con esto. No tenemos un mapa en este ejemplo concreto. Pero lo que también puedes hacer es hacer estas animaciones. Entonces si hago doble clic en el interior, se puede ver que tenemos estado por defecto. Tenemos estado flotando. Es realmente bastante simple, pero también hay algunas sombras de gota incluidas. Ahí hay algún círculo incluido justo aquí. Por lo que pasa mucho, pero se ve bastante sencillo y se ve bastante bonito. Y también con este ejemplo aquí mismo, por ejemplo, tenemos la misma carta que abajo, pero ahora su efecto hover es mucho más grande. Y puedes ver que esta sombra de fondo se vuelve mucho más oscura una vez que estás en el estado de terror. Para que puedas hacer todas estas diferentes cosas adicionales con tus componentes. Y por último, vamos a darle a esto un mundo por ejemplo. Entonces como puedes ver, toda esta sección es, Vamos a comprobarlo en el panel de capas también. Entonces necesitamos necesito un préstamo es, como pueden ver, un componente. Y puedes ir al estado por defecto el cual está cerrado, entonces todos los iconos no son así. Se puede ir a este primer estado, está seleccionado, otros no. Y se puede ver cuando los usuarios comienzan a hacer clic entre todas estas fechas, están cambiando dependiendo de lo que hicieron clic o pueden ir al estado predeterminado. Y toda esta información de abajo se va a derrumbar hasta aquí. Y luego cuando hagan clic aquí mismo, por ejemplo, se va a expandir e ir hasta abajo. Entonces como puedes ver, puedes hacer muchas cosas diferentes en Adobe ASD en cuanto a diseño. Hazlo lo lo más simple posible o puedes hacerlo lo más complejo posible dependiendo de tu conjunto de habilidades y dependiendo del proyecto en cuestión. Algunos proyectos realmente no requieren ninguna animación compleja y en transiciones complejas, ningún diseño complejo, mientras que otros requieren que lo hagas. Así que asegúrate cuando empieces a aprender, cuando empieces a crecer, cuando empezaste a ganar algo de exposición y algo de tracción en este el rol de diseño UX de la interfaz de usuario. Asegúrate de tratar de enfocarte en expandir tus habilidades tanto como sea posible. Asegúrate de aprender los atajos tanto como sea posible porque es extremadamente importante más adelante la línea conocer tantos de estos atajos como sea posible porque te van a ayudar masivamente. 24. Prototipos de diseño: Siguiente parte de Adobe XD, que quiero cubrir es la creación de prototipos. Es realmente importante porque en el pasado, por ejemplo, si has creado tus diseños en Photoshop, tienes que usar recursos externos, algo así como la visión para crear prototipos. Por lo tanto tienes que exportar todos tus archivos de Photoshop o LinkedIn con visión y luego crear allí tus prototipos. Entonces tienes que enviar enviacion ligada a tu cliente. El cliente tiene que responder. Ahí tienes notificación por correo electrónico, que es simplemente demasiado complicado para hoy mundo en desarrollo rápido. Por lo que Adobe XD tiene estas grandes características incluidas dentro, que es el prototipado. que puedas crear, crear prototipos y compartir o colaborar con tus clientes o compañeros de equipo todo dentro de una sola app dentro, sin necesidad de cambiar estas apps sin necesidad de pagar recursos externos, tienes todo dentro una app y puedes empezar de forma gratuita. Entonces permítanme mostrarles en este ejemplo, aquí hemos prototipado. Entonces te mostré un diseño. Al hacer clic en prototipo, se puede ver que al instante todos estos pines azules comenzaron a aparecer. Y estos son para estos flujos. Por lo que se puede ver que en este flujo, no tenemos ninguna conexión con este flujo. Tenemos muchas de estas diferentes conexiones con este defecto. No tenemos ninguno. Y con este flujo no tenemos ninguno. Pero cuando hago clic aquí mismo, se puede ver que todavía lo hacemos. Y también cuando hago clic en este nuestro tablero, se puede ver que todavía lo hacemos y sigue conectado con algunas de estas pantallas principales. Entonces lo que todo esto significa en la traducción al inglés básicamente, es que puedes conectar todos tus informes entre sí. Puedes conectarlos con un solo tamaño, como te mostré para el tamaño del sitio web. Pero también puedes conectarlos con el tamaño responsive. Y puedes mostrar directamente a tus clientes cómo se va a quedar todo eso. Entonces cuando empieces a compartir y vamos a llegar al compartir en un experto, entonces puedes compartir ya sea un flujo, que es solo por ejemplo, diseño de sitios web para escritorios, o simplemente puedes compartir todos los flujos, que es todos los diseños de sitios web en todos los tamaños. Entonces si te muestro cómo se ven estos prototipos, déjame ir al diseño de sitios web. Se puede ver cuántas interacciones tenemos justo aquí. Entonces si acercamos realmente bonito y cerramos y hacemos click en este rpart y puedes ver es diseño de página de inicio. Esto se contabiliza diseño de préstamos de diseño y así sucesivamente y así sucesivamente. Cada uno de estos. Y una vez más, puedes ir en el curso, puedes echarle un vistazo y porque tiene más de 20 horas de duración. Y una vez más, este es solo curso básico para explicar todos los fundamentos del D. de Adobe Si te inscribes en el curso, vamos a pasar por todas estas páginas diferentes y voy a explicar el coito. Cada una de estas interacciones, los blancos conectados así. El blanco está terminado así. Y lo que debiste haber hecho mejor por tus propios proyectos personales. Entonces lo que ves aquí mismo con estas líneas azules es básicamente, puedes hacer clic desde una parte de tus se aburren, arrastrar esta línea azul a otra. Una vez que estás en un modo de prototipado. Entonces aquí en el panel de interacción, que aparece y ya te expliqué que este panel de la derecha sigue cambiando lo que sea que estés seleccionando. Por lo que en el modo de diseño, se ve diferente. En un modo prototipo, se ve diferente. Y en el modo compartir se va a volver a lucir diferentes. Y lo voy a mostrar a continuación. Aquí lo que tenemos es interacción. Entonces primero tenemos gatillo. Entonces lo que están haciendo los usuarios en nuestro caso, necesitan tocar para poder ir a esta página. Pero también puedes elegir arrastrar, flotar, teclas y gamepad y suelo de voz. Se puede elaborar rápidamente en algunos de estos porque pueden obtener tiempo de aura extremadamente complejo. Por lo que una vez más, tab, puedes usarlo para escritorios o puedes usarlos para móviles. Por lo que tap puede básicamente significa el toque de un ratón o el toque de dedo. Por lo que no importa qué dispositivo uses, puedes usar la pestaña. Drag es básicamente el que te mostré antes en video anterior con estas banderas, por ejemplo. Por lo que cuando están en un dispositivo móvil, pueden hacer clic para arrastrar a la izquierda o a la derecha, o incluso pueden hacerlo en el diseño de sitios web si necesitas cortar en algún lugar para que puedan arrastrar de izquierda a derecha. Por ejemplo, hover es lo que explicamos varias veces. Entonces, por ejemplo, con estos botones, puedes incluir diferentes efectos de desplazamiento. Teclas, las camas de juego final es básicamente, si estás creando algunos con experiencia para un juego, puedes incluir algo como el mando PlayStation o el mando Xbox. Y luego puedes programar lo que hace cada tecla. Y luego una vez que comiences a compartir su prototipo con tu cliente, si tienen el mismo mando, básicamente pueden jugar este juego contigo dentro de Adobe XD, que es extremadamente genial. Y por último, tenemos la voz. Para que puedas hacer algo como Google Assistant, Amazon, Alexa o Siri. Podrás integrar todos estos diferentes controladores si estás diseñando para voz. A continuación tenemos acción. Entonces, ¿qué pasa cuando un usuario toca qué acción va a tomar? Re puede ir transición. Podemos hacer auto animar por vía oral, desplazarse por la reproducción de audio a bordo anterior o reproducción de voz. La transición es básicamente, es, transiciones de una página a otra. Auto animate es este mágico futuro de Adobe XD, que utiliza la IA para aprender lo que necesitas hacer. Y puedes ver mis cursos o mis videos de YouTube porque uso auto animate todo el tiempo. De verdad me encanta. Y básicamente, sabe lo que hay que hacer entre dos estados y enemigos perfección para que no tengas que crear algo así como fotogramas clave en Adobe After Effects, por ejemplo, o algo así. Ya lo tenemos, lo cual es genial si estás diseñando para móvil. Por lo que tienes este menú de lado, por ejemplo, y necesitas tocar el icono del menú y luego aparece esta superposición de menú. Entonces deudas por qué eso es útil para, pero también puedes usarlo para elementos de menú en diseño de sitios web si necesitas esa función oral en su lugar, tenemos scroll también, para que puedas crear enlaces de anclaje. Por ejemplo, si esto es solo una página singular y todas estas son secciones diferentes, entonces los usuarios pueden desplazarse por todos estos diferentes diseños. Y entonces, por ejemplo, cuando hagan clic en esta página, se va a desplazar para escuchar. Cuando hagan clic en este elemento del menú, se va a desplazar por aquí. Y mucho más. Tableros de arte anteriores habla por sí mismo. La reproducción de audio es, Si necesita, por ejemplo, para crear un estado estrecho. Cuando tocan ahí, va a reproducir que la reproducción de audio y voz es genial. Una vez más, por voz, si estás diseñando para estas ayudas, posición de desplazamiento preservada básicamente hace lo que dice en el diez. Si hace clic ahí, y por ejemplo, va a aquí, se va a preservar la posición de desplazamiento. En este caso va a estar en la cima. Pero si lo haces aquí, por ejemplo, va a estar en la misma posición cuando el carbón se atreva a destino. Para que puedas elegir cualquiera de estos son puertos que quieras animación, tienes manojo de estas diferentes animaciones en su lugar. Y por último, tenemos flexión vio cómo se va a ver la animación. Se va a ir en duro, no va a la guerra en blando es que vas a salir duro o blando va a rebotar. ¿ Se va a meter en posición? Para que puedas elegir entre todos estos. Y si haces click aquí, puedes ir de non es fuera fácil un fácil ahora para chasquear, windup y rebotar. Tienes todas estas diferentes opciones. Y por último, tenemos duración. Entonces duración ¿cuánto tiempo va a tardar esta acción? Entonces en nuestro caso, cuando tocan, va a hacer la transición al diseño de cuentas usando la animación de disolver con fácil facilidad de notas. Y va a durar 0.4. segundos. Ahora puedes agregar acciones adicionales aquí, así que animación adicional, pero no te voy a molestar en esta etapa. Entonces básicamente cómo se ve todo esto en su lugar. Voy a dar click aquí, voy a dar click en la vista previa. Voy a dar click en las cuentas. Y va a pasar a esa página en particular. Una vez que hagan clic en logo, por ejemplo, los va a llevar a la página de inicio. Y puedes ver una vez que hagan clic en cuentas, esto va a aparecer. Pero una vez que haga clic en préstamo se va a transitar allí y de tamaño estrecho. Para que puedas hacer todas estas cosas y mucho, mucho más en Adobe XD con estas características de prototipado sin necesidad de acudir a herramientas externas como la visión, por ejemplo, en el pasado. O no necesitas pagar por servicios adicionales. Tienes todo eso incluido en Adobe XD para empezar de inmediato. 25. Comparte tu diseño: Otra herramienta increíble que tiene Adobe XD es compartir. Entonces como dije, puedes diseñar prototipo y compartir todo dentro de una sola aplicación, y está ubicado justo aquí en la parte superior. Entonces una vez que hayas terminado de diseñar, Una vez que hayas hecho el prototipado y conectando todas tus tablas de arte por todos los diferentes estados, por todas partes en diferentes pantallas. Entonces es hora de compartir con tus clientes. Y es importante tener en cuenta que puedes compartir en cualquier punto de tu proceso de diseño. Entonces, por ejemplo, si estás en etapa wireframing, puedes compartir desde atreve a obtener retroalimentación y luego pasar a esa retroalimentación y crear diseño se actualizan ese prototipo, actualizar ese enlace y compartirlo con el cliente una vez más, entonces pueden proporcionarle comentarios sobre el diseño de sitios web o diseño responsive y vieron mucho más incluso en guías de estilo y presentación de proyectos. Por lo que en cualquier punto de la etapa del proyecto, pueden proporcionarte la retroalimentación. Entonces, ¿cómo puedes compartirlo realmente? Bueno, como dije al principio, estoy usando una versión gratuita solo para ilustrar que puedes hacer esto sin importar dónde estés en un mundo, puedes empezar de forma gratuita con esto. Entonces básicamente con la versión gratuita, solo tienes una opción de compartir enlaces. Por lo que si estás trabajando en múltiples proyectos al mismo tiempo, tendrás que pagar por Adobe XD. Pero en su página web dice que son apenas nueve dólares al mes. O si tienes paquete premium de adobe, si tienes a Creative Cloud pagado, y luego tienes Adobe XD incluido en esa suscripción a Creative Cloud también. Por lo que cuando quieras compartir, simplemente puedes seleccionar lo que quieres compartir. En nuestro caso, queremos compartir este diseño de sitio web. También puedes compartirlo desvío y diseño de dashboard, pero quiero compartir esto. Y puedes elegir diferentes configuraciones. Por lo que para una revisión de diseño y obtener retroalimentación sobre su diseño o prototipo, esa retroalimentación puede ser proporcionada ya sea por los compañeros de equipo, interesados de sus clientes, incluso los desarrolladores, el desarrollo. Puedes compartir tu diseño o prototipo con los desarrolladores. Y lo que esto hace es que proporciona fragmentos de código para tus desarrolladores. lo que pueden ver fácilmente, por ejemplo, dentro del CSS qué llamadas han utilizado, espaciando uso pesado, que margina el uso pesado. Entonces, por ejemplo, con la tipografía, qué tamaños han utilizado para que puedan empezar a integrar eso de inmediato. Y si estás usando fuentes basadas en web, por ejemplo, estas fuentes de Google que estamos utilizando en este curso. Entonces pueden integrar fácilmente el enlace a esas fuentes y luego comenzar con el código de inmediato. Entonces tenemos presentación optimizada para presentar sus diseños, lo cual es genial. Si estás, por ejemplo, acude a la oficina de tu cliente y quieres presentar esto en una pantalla grande, y luego entra en modo pantalla completa sin distracciones. Y se puede presentar alma de especie como una presentación de PowerPoint por ejemplo. Después mantuvimos las pruebas de usuario, lo cual es ideal para probar tu prototipo. Se puede ocultar en este modo de prueba de usuario, por ejemplo, se pueden ocultar todos estos diferentes elementos como la navegación. Por lo que no estás permitiendo a tus usuarios ver dónde necesitan hacer clic. Tienen que averiguarlo por sí mismos. luego puedan proporcionarte la retroalimentación y podrás saber dónde necesitas seguir adelante. Y por último, tienes personalizada y puedes crear experiencia personalizada a partir de todos estos accesos combinados de enlaces. Por lo que cualquiera con el enlace solo invitó a la gente. Puedes invitarlos vía correo electrónico y cualquier persona con la contraseña para que pueda proteger con contraseña tus enlaces. Por último, todo lo que necesitas hacer es hacer clic en crear enlace. Y antes de hacer eso, simplemente puedes cambiar el nombre de esto. Vamos con el nuevo rediseño de sitio web del banco para que coincida un poco. Lo que tenemos justo aquí hit create link. Y dependiendo de tu velocidad de internet, dependiendo de lo grande que sea tu prototipo, dependiendo de cuántas cosas tenga que subir Adobe XD a la nube. Esto puede tardar más o más corto. Entonces lo que sea que estés creando, solo asegúrate de tenerlo en cuenta. Si estás en un horario apretado, si tienes un presupuesto ajustado, asegúrate de proyectar esto en eso. Porque a veces puede tomar mucho tiempo para que suba y luego a veces puede tomar mucho tiempo para que tus clientes los abran si también tienen una conexión lenta a internet. Una vez que se complete el intercambio, vas a conseguir un enlace como este. Y lo que puedes hacer es copiar ese enlace. Puedes incrustar ese enlace en una presentación de Behance, por ejemplo, puedes ponerlo en tu propia página web y una vez más, puedes acceder a los permisos aquí. Y cualquiera que tenga el enlace, puedes cambiar eso. Puedes darles acceso o no. Y básicamente una vez que copie y pegue este enlace en su navegador o lo envíe al cliente. Así va a quedar la experiencia general dependiendo de lo que hayas seleccionado aquí en Adobe XD. Entonces, ¿es para revisión de diseño, es para prototipado, es para desarrolladores? Y mucho más. Entonces, una vez más, lo que pueden hacer aquí es que pueden desplazarse como si fuera una página real. Pueden hacer clic en cualquiera de estos enlaces. Se puede ver que los efectos de hover aún funcionan. Pueden hacer un comentario, pueden arrastrar un bolígrafo, por ejemplo, aquí mismo. Y pueden decir, por ejemplo, borra este círculo. Y una vez que se presenten, se puede ver que eliminar este círculo está en esta página. Entonces el diseño de la página de inicio, y puedes navegar por tu camino al diseño de la página de inicio. También puedes hacer clic aquí, y te va a mostrar todas tus diferentes páginas de este flujo que has compartido. Porque una vez más, sólo compartimos este flujo dentro de una acción, cualquiera de estos otros flujos. Por eso solo está mostrando esto. Y básicamente puedes ir a tu trabajo y continuar donde lo dejaste, y puedes hacer click ahí para acceder al prototipo una vez más. Entonces básicamente así es como funciona todo esto. Y lo que también puedes hacer es navegar entre estas diferentes páginas para mostrar a tus clientes cómo van a quedar las páginas. Lo que puedes hacer es mostrar u ocultar comentarios. Se puede ir a la página de inicio, que es esta página en este caso, como dije, pueden dar click a través de diferentes páginas. Entonces vamos a los pulmones, por ejemplo. Ellos pueden ir allá y se puede ver que hay un comentario sobre el diseño de la página de inicio. Pueden hacer clic ahí y acceder a él y se puede ver que está etiquetado como número uno. Si hacemos otro comentario, se etiquetará el número dos. Y mucho más. Lo que también pueden hacer es volver a aquí. Se puede mencionar a cualquier otro usuario o compañeros de equipo. Se puede invitar a la gente a escuchar. Puedes ampliar esto para que sea a pantalla completa. Se pueden ocultar comentarios y mucho más. Básicamente, cuando empieces con el desarrollador compartido, como dije, vas a conseguir algunos fragmentos de código. Vas a conseguir algo de CSS, vas a conseguir algunos estados de componentes. Vas a obtener toda esa información adicional que no es relevante para tu cliente. Y excepto si no se están citando a sí mismos o si no entienden código. Por lo que sólo quieren revisar rápidamente algunas cosas aquí y allá. Pero básicamente se puede compartir eso con los desarrolladores. En cuanto a las pruebas del usuario, básicamente puedes probar esto en pantalla completa sin todo esto. Porque como puedes ver, si hago clic en algún lugar afuera , muestra donde pueden hacer clic. Entonces si hacen clic aquí, va a llevar a esta página digital. Pero en el método de prueba del usuario, no les va a mostrar, sus usuarios tienen que averiguar eso por sí mismos y hay que decidir a través de pruebas si es fácil para ellos acceder a todas esas páginas o no, y lo que debes cambiarlo, lo que debes conservar. Por último, última y crucial parte de este proceso de diseño es compartir tus archivos después de que se completen. Después de completar el diseño, crear prototipos, después de que todo esté terminado, necesitas compartir esos archivos con tus clientes y desarrolladores y eso es lo que viene después. 26. Exportar tus archivos: Por último, la última pieza del bullicio del proyecto de diseño es compartir tu diseño con clientes y desarrolladores. Entonces una vez que todo esté terminado, tienes que exportarlo y tienes que empaquetarlo de una manera que sea fácil de entender tanto para tus clientes como para tus desarrolladores. Entonces en nuestro caso, lo que tenemos justo aquí es que tenemos un escritorio grande, tenemos diseño responsive. Entonces solo imagina que creamos esto para todas estas otras páginas. Por lo que ahora llega el momento de exportar y compartirlo con nuestros clientes y desarrolladores. Por lo que antes de hacer eso, siempre recomiendo a la gente y a mis alumnos crear algún tipo de estructura de carpetas, patrón organizativo para poder compartir esto con tus clientes y desarrolladores para que puedan comprenderlo fácilmente como cuanto lo consiguen para que puedan empezar a trabajar y no empantanados con algunas preguntas y retroalimentación adicional. Entonces lo que me gusta hacer es que me gusta crear una estructura de carpetas. Dentro de esa estructura de carpetas, me gusta tener mi archivo principal, que es el archivo Adobe XD. También me gusta crear una carpeta como esta, que se llama Activos. Son todos los activos o lo que quieras. Y puedes incluir iconos, puedes incluir imágenes, puedes incluir archivos PDF, y también puedes hacerlo simplemente poniéndolos dentro de una carpeta. Entonces imágenes, por ejemplo. Y vamos a copiar y pegar, y llamemos a esto, por ejemplo, iconos. Y dentro de la dosis, por ejemplo, si estás usando iconos tanto SVG como PNG, puedes incluirlos. Si está utilizando imágenes PNG y JPEG, puede incluirlas. Si estás usando, por ejemplo, diferentes PDF, puedes separarlos. Entonces, no importa lo grande que sea tu proyecto y lo grande que se vaya a conseguir la cantidad de archivos. Simplemente puedes dividirlos en carpetas y va a ser mucho más sencillo para tus clientes y desarrolladores navegar a esa estructura de carpetas que simplemente enviarles todo en un solo archivo zip. Por lo que tienen que averiguarlo por sí mismos. En cuanto a los tamaños mismos, se puede ver que tenemos todas estas diferentes páginas ubicadas justo aquí. Y para cada una de estas carpetas, he creado una vez más, una estructura de carpetas. Escritorios tan grandes, computadoras de escritorio, dispositivos grandes, dispositivos medianos, y dispositivos pequeños. Este es sólo mi caso y el caso de este proyecto en particular. Entonces si te llevo de vuelta al archivo Adobe XD, puedes ver cómo se ve eso, pero tu proyecto podría terminar luciendo diferente. Simplemente pregúntale a tus desarrolladores qué tipos de dispositivos y qué tamaños van a soportar. Por lo tanto, vas a poder entender mejor cómo puedes estructurar tu estructura de carpetas al empezar a compartir estos archivos con tus clientes y desarrolladores, viste una vez más, con la estructura de carpetas, dependiendo de qué tamaños vas a crear, vas a tener mayor número o menor número de estas carpetas en la misma cosa para los ácidos. Entonces quizá estés usando solo un ícono, tal vez diez, puedes ponerlos aquí. O si estás usando una gran cantidad de iconos como lo estamos haciendo aquí mismo. Entonces si te llevo a mis activos de documento y me desplaza hacia abajo, puedes ver cuántos iconos diferentes estamos usando. Entonces, por tanto, tenemos que exportar todos estos diferentes ácidos y en tamaños de activos. Así que solo asegúrate de preguntarle a tus desarrolladores por adelantado, ¿necesitan tener estos iconos en diferentes tamaños? O simplemente puede enviarles un ícono SVG por ejemplo. Y luego les pueden caber dentro de todos estos tamaños. Así que realmente solo habla con tus desarrolladores, habla con tus clientes sobre lo que necesitan. Antes de empezar a enviarlos. Por lo tanto, vas a reducir mucho tu carga de trabajo. Entonces cuando llega el momento de exportar realmente bien estas cosas diferentes. Entonces lo que tenemos aquí son, por ejemplo, escritorios grandes y quiero exportar esta imagen. Sé que es una imagen PNG. Entonces lo que puedo hacer es simplemente seleccionado, puedo presionar Control o Command E o may keyboard y puedo exportarlo como PNG porque no tiene ningún elemento de fondo. Aquí mismo hay sólo una imagen PNG. Si solo fuera una imagen plana como esta, esto, esto, y esto por ejemplo, entonces elegiré esto para que sea JPEG. Si estás lidiando con iconos, siempre se recomienda si son SVG para exportarlos como SVG, son PNG para exportarlo como PNG. Pero un consejo rápido, asegúrate de usar los iconos SVG tanto como sea posible porque son infinitamente escalables y no perderán calidad una vez que se reduzcan en tamaño. Entonces lo que finalmente tenemos aquí es PDF. Y lo que te puedo mostrar para el PDF. Por ejemplo, desea exportar esta guía de estilo del proyecto. Lo que puedes hacer es simplemente golpear Control E, elegir pdf desde aquí, y luego simplemente puedes exportarlo como PDF. O PDF puede tener múltiples archivos o páginas PDF. Por lo que sus clientes son desarrolladores, simplemente puede desplazarse por todas estas diferentes páginas para ver dónde están. Pero volvamos rápidamente a aquí. Por lo que voy una vez más, puedes, una vez que selecciones tu artículo, puedes golpear Control E. Como dijimos, este es un PNG que puedes elegir para el diseño se va a exportar en 1X. Si diseñas esto para web, lo que hicimos, puede exportar eso como una x y 2x. Pero una vez más, asegúrate de hablar con tus desarrolladores a la necesidad de ese tamaño extra porque tenemos diseño responsive en su lugar y solo asegúrate de preguntarles ¿qué necesitan exportarse? Porque eso te va a ahorrar mucho tiempo porque en algunos casos, solo necesitas exportar la imagen una vez y luego la van a adaptar a través del código. Pero a veces hay que exportar esa imagen o ese icono, tal vez ilustración, todos estos tamaños diferentes porque no pueden adaptarla en código realmente bien y hay que hacerlo en diseño. Entonces, una vez más, la comunicación es clave aquí mismo, y es crucial que tanto tú, tus clientes como los desarrolladores pasen un buen rato en este proyecto. Entonces lo que tenemos aquí es iOS, para que puedas seleccionar 123 x una x es el tamaño original. Dos ejes duplican el tamaño, y esto se triplica el tamaño. Y por último, a donde quieras exportar esto. Entonces si te llevamos de vuelta a aquí, por ejemplo, tenemos la página de inicio y tenemos unos escritorios grandes. Entonces este va a ser nuestro patrón de navegación. Entonces no importa lo que elijas aquí mismo, te va a llevar ahí a ese lugar. Por último, tenemos Android N se va a exportar con todos estos diferentes tamaños. Y solo hay Android y cómo está organizado. Para SVG es puedes tener todos estos diferentes atributos y puedes elegir, ¿queremos usar CSS interno o pueden usar externo optimizado minificado por lo que se va a reducir el tamaño del archivo aún más PDF como se explica. Y por último, lo que tenemos justo aquí es JPEG. Entonces, ¿es diseño o es Web? Una vez más, si eliges web, va a exportar ese 1X y 2X. Y por último, aquí es donde también quieres exportar tus archivos. Eso es básicamente todo para exportar, como puedes ver, puede ser bastante simple. De lo que se puede hacer. Y déjenme mostrarles rápidamente que también, es que pueden seleccionar múltiples de estos. Entonces, por ejemplo, tenemos estas banderas. Puedo ir a mi paleta de capas y ver dónde están. Entonces lo que puedes hacer es simplemente abrir todos estos. Puedes sostener tu antiguo Kim u opción en Mac. Puedes desplazarte hacia abajo, seleccionarlos todos. Y una vez que lo hagas en Control E, sé que estos van a ser PNG. Puedo usarlos para el diseño porque no necesito que estén a una x 2x y 3x. Y simplemente puedo golpear la exportación una vez que haya seleccionado mi carpeta designada en cuanto a dónde quiero que se exporten, simplemente toca Exportar y se va a exportar en todos estos diferentes tamaños, en estos diferentes formatos de archivo que tienes seleccionado. Y cada uno de ellos va a ser nombrado como tu nombre ellos aquí mismo. Entonces, una vez más, nombrar a tus capas es crucial aquí mismo porque como puedes ver, te va a alcanzar tarde o temprano. Entonces aquí estás enviando estos archivos a los desarrolladores. Necesitas nombrar tus archivos para que los desarrolladores puedan entender cuáles son esos archivos. Por lo que realmente pueden usarlos en código. No importa si estás creando un tablero de diseño de página web diseño de aplicaciones no importa. Siempre tienes que nombrar a tus capas. Entonces, ¿por qué no empezar tarde y dejar de perder el tiempo aquí después de haber terminado con el proyecto y solo quieres que esto sea órbita. Entonces eso es básicamente todo. Así es como tus archivos de exportación en Adobe XD. Y esos son los diferentes formatos que son compatibles con la opción nativa del exportador Adobe XD. 27. Crear un sistema de diseño: Los sistemas de diseño son una gran manera de organizar grandes proyectos porque tan pronto como comienzas a escalar tu proyecto es pronto como comienzas a agregar nuevas páginas, nuevos tamaños responsive, tal vez incluso una aplicación móvil, todo tiene que parecer cohesivo, todo se ha visto coherente, y todo tiene que parecer como pertenece al mismo proyecto, que lo crean o no, puede ser extremadamente difícil cuando comienzas a escalar. Eso es mientras que las empresas pequeñas y grandes, especialmente las grandes, tienen todos estos sistemas de diseño en su lugar. Entonces, ¿qué es un sistema de diseño es ajustar para el diseño, o es mucho más? Vamos a comprobarlo. Entonces aquí he abierto sistema de diseño de carbono y en realidad puedes seguir adelante y descargar esto desde su página web. Entonces qué sistema de diseño de carbono es, es para el sistema de diseño de código abierto de IBM para sus productos y experiencias digitales. Por lo que se puede ver que no puede ser solo para productos. También puede ser para una experiencia digital. Puede ser para experiencias analógicas. Por lo que el sistema de diseño puede abarcar todos estos grupos y características adicionales. Entonces lo que tenemos aquí mismo, puedes leer todo sobre el carbono, pero cuando se trata de diseñar, tienes niños de diseño, tienes otros recursos, tutoriales. Cuando se trata de desarrollar, puedes empezar. Framework tiene mucho más. Lo que es interesante aquí es y lineamientos. Entonces si hago clic aquí mismo, puedes ver que los han discutido saludar creados para ellos mismos. Tienen reglas de accesibilidad. Tienen roles de contenido, reglas de color, reglas de iconos, pictogramas, espaciado de movimiento, equipos, topografía, y vieron mucho más. Para que puedas hacer todas estas cosas diferentes. Proporcionando deuda, puedes crear este proyecto. Entonces no sé por qué tarda tanto en abrirse. Entonces vamos a abrirla en esta pestaña mientras se carga. Déjenme mostrarles esto rápidamente. Entonces así es como estos sistema de diseño. Entonces puedes ver si empiezo a desplazarme, que todas estas experiencias se ven exactamente iguales sin importar en qué dispositivos estés, si estás en este gran dispositivo como iMac o en una laptop, teléfono móvil, reloj, no importa. Se ve exactamente igual. Pero lo que es más importante porque Audi es una empresa automovilística, se ve exactamente igual en el auto también. Por lo que los usuarios tienen exactamente la misma experiencia sin importar si están usando la aplicación Audi, por ejemplo, si visitaron su sitio web o si están sentados en el producto Audi real, que es el auto, están usando el infotainment sistema, por ejemplo. Después usando la navegación, todo se ve exactamente igual, incoherente y como pertenece a toda esta experiencia. Entonces si te llevo aquí, ¿verdad? Contamos con UI responsive, tenemos componentes de herramientas foráneos. Entonces si hago clic aquí, tenemos botones, por ejemplo. Y se puede ver cómo se ven sus botones. Por lo que tienen pequeños, medianos, grandes. Se puede ver cómo eso parece que tenemos secundaria, se puede hacer clic en él. Tienes todas estas diferentes animaciones. Para que puedas ver cómo se ve eso. Botón de texto con esta flecha, se puede ver funcionando este efecto de desplazamiento. Se ven todos estos diferentes iconos, C sólido o tarjeta. Tarjeta puede ser algo realmente, básicamente esta guerra es algo así. Para que puedas ver este efecto emergente al pasar el cursor. Se puede ver esta cartas más grandes, por lo que la acción, se puede hacer clic en ellas. Se puede ver cómo se ven. Puedes ir a arrastrar y soltar, lo cual también es importante, por ejemplo, para su IU en un auto, tal vez quieras arrastrar y soltar nuestra canción ahí mismo. Se puede ver cómo se ve eso como campo de entrada, que también es importante. Al hacer clic ahí mismo, se puede ver que este texto va en la parte superior. Busca cómo se ve como entradas de texto múltiples y mucho más. Si vamos al jugador, por ejemplo, se puede ver cómo se ve su jugador, cómo se ve esto. Iconos revertir y mucho más. Si vamos a la interfaz de usuario responsive, se puede ver que hay configuración de cuadrícula y es por eso que esto es importante. Se pueden configurar estas rejillas para dar seguimiento a todo este proyecto. Porque por ejemplo, si estás creando este proyecto, digamos en 2021. Y luego el cliente decide en cinco años volver a ti y luego permitirte continuar y agregar todas estas páginas adicionales, pantallas adicionales, estás atascado porque o bien pones este proceso de diseño en su lugar y tal vez incluso creas este sistema de diseño a menor escala. Entonces simplemente puedes retomar donde lo dejaste y continuar desde ahí. Quieren de repente cambiar los colores, cambiar los estilos. Eso se puede hacer fácilmente porque todo está en su lugar. Tienes este sistema de diseño en su lugar. Tienes todos estos componentes en su lugar. Tienes la guía de estilo en su lugar. Entonces una vez más, si quieres aprender todo sobre este proyecto, asegúrate de revisar mi curso es todo de 20 horas de duración y cubro todas estas cosas con mucho más detalle de lo que puedo en este curso gratuito. Pero básicamente, lo que se puede es escalar fácilmente eso. Entonces no importa si vuelves al proyecto en un año o cinco años, simplemente puedes continuar donde lo dejaste, recogerlo, y simplemente seguir diseñando si quieren cambiar, puedes cambiar fácilmente los colores y estilos, las fuentes, los colores, el logotipo, cuando quieras, incluso las imágenes, solo unos clics, en lugar de simplemente empezar por todo el lugar una vez más. Entonces si echamos un vistazo aquí, se puede ver cómo se están escalando estas tarjetas. Por ejemplo, se pueden ver estas líneas de cuadrícula, como les expliqué. Por lo que puedes ver puedes usar Adobe XD para esto. puede ver cómo se reducieron, que es, cuáles son las buenas prácticas, cuáles son las malas prácticas, y ¿por qué? Se puede ver todo este contenido espaciando líneas, ritmo, ritmo vertical u horizontal. Entonces todo sigue igual. Espaciando cómo se ven todas estas columnas y contenido, por lo que todo se ve como debería. Y por último, una vez que esto se carga en el Sistema de Diseño de carbono, y de verdad te animo a que compruebes esto. Si hacemos click en una cuadrícula 2x y puedes ver cómo se ve eso y cómo se escala. Entonces si bajo esto hacia abajo, haz clic en Jugar. Ahí se pueden ver dos x rejilla, que es una vez más la rejilla que han desarrollado para ellos mismos. No necesitas usar esta cuadrícula en tus proyectos. Funciona en su proyecto, pero tal vez para tu proyecto, tendrás que crear algo más. Básicamente es una cuadrícula de 8 y puedes crear eso fácilmente en Adobe ASD. Y ya te lo mostré en la sección anterior de este curso. Entonces básicamente se puede ver cómo se escala hacia arriba y hacia abajo. Podemos pasar a la topografía. Se puede ver el estilo de la escala, color Recursos. Se puede ver ahí una tipografía y qué es, cómo se ve en el código. También tienes estas familias de fuentes y cómo se ve. Los desarrolladores pueden entonces escoger esto fácilmente desde aquí y simplemente seguir adelante. Si vamos a iconos, por ejemplo, se puede ver qué iconos están utilizando y el estilo general de estos iconos. Y simplemente puedes copiar el nombre de este icono, por ejemplo. Y luego lo pueden usar en código más adelante. Se puede ver cómo se ven y se dividen obviamente en categorías. Por lo que el comercio alfanumérico y esto es relevante para ti si estás usando algo como sus iconos de Diseño de Materiales de Google porque puedes darles nombres o usar nombres Google ya está usando si estás usando algo más, como premium por ejemplo, desde elementos vitales de extremo o cualquier otro lugar es realmente importante dar a estos iconos nombres de voluntad para que los desarrolladores puedan utilizarlos fácilmente más adelante. Entonces puedes ver que aquí se llama edificio, pero aquí se llama Edificio 32. Entonces este es el nombre real que van a usar en código. Y si simplemente descargas como VG desde aquí, que una vez más es una buena práctica. Por lo que realmente te animo a explorar estos sistemas de diseño porque hay muchos de ellos. Compras para Shopify tiene uno, adobe tiene uno, microsoft tiene uno, Apple tiene uno. Así que solo asegúrate de revisarlos y de entender lo que estas grandes empresas están haciendo. Entonces puedes hacer eso por ti mismo, no a esta gran escala, obviamente, sobre todo si estás trabajando solo porque te llevará años crear todo esto. Pero algunos significan en factores clave importantes como el color, la tipografía, la iconografía, espaciado o las rejillas de radón y mucho más que puedes crear para tus clientes y tus proyectos más pequeños. Así que asegúrate de revisar eso si estás viendo esto en YouTube, dejaré el link abajo en la descripción a algunos de estos sistema de diseño, que creo que son geniales y del cual creo que puedes recoger algo más de información. 28. Crear toques de diseño: Gran manera de organizar tus proyectos y hacerlo fácil para ti, tus compañeros de equipo, tus clientes, y finalmente los desarrolladores es usar algo que se llama tokens de diseño. Entonces, en lugar de simplemente nombrar a tu color Road, por ejemplo, puedes vender a tus desarrolladores para qué está diseñado ese rojo. Entonces si te muestro en mi ejemplo aquí mismo, tenemos rojo peligro, que es algo así como cuando ellos, cuando los usuarios han cometido un error, entonces les va a mostrar este color rojo en una forma, por ejemplo, en un y un botón. Pero el rojo peligro es básicamente descolorido hablando que los desarrolladores pueden usar para integrar en código. Y si copio este código hexadecimal, en lugar de nombrarlo así o simplemente leerlo, simplemente pueden nombrarlo rojo peligro, cual es obviamente útil si tienes múltiples versiones de este color. Los desarrolladores necesitan entender la necesidad de saber en qué instancia estás usando qué color. Por lo tanto darle este token de diseño es realmente útil porque como te mostré en el ejemplo anterior con sistemas de diseño, es extremadamente importante, sobre todo con iconos, cuando tienes múltiples versiones del mismo ícono. Por lo que puedes recordar de la sección anterior del curso, cuando te hablo de sistemas de diseño, puedes ver que IBM tiene el edificio número 32 porque tienen 32 iconos de construcción diferentes que están usando en su sistema de diseño. Para que puedas hacer exactamente lo mismo. Puedes nombrar a tus capas así, y luego puedes ayudar a los desarrolladores a entender y desarrollar fácilmente rápidamente dando nombres a tus tokens de diseño. Entonces una vez más, se puede ver en lugar de blanco tenemos blanco liso porque por ejemplo, en algún momento tal vez queremos incluir un blanco más oscuro puede ser que queramos incluir, no sé, sobre blanco de superposición o lo que sea. Tenemos gris oscuro, gris claro, verde principal, verde secundario, lo cual también es importante porque este verde principal es el color principal de nuestro proyecto o marca o sitio web. verde secundario es el color de nuestro efecto hover, por ejemplo, puede ser lo puedes nombrar verde que se cierne. A lo mejor puedes llamarlo gris oscuro, verde en el hover. A lo mejor puedes hacer algo así. Pero una vez más, siempre es mejor hablar con los desarrolladores sobre esto y simplemente les preguntaba cómo preferirías que se nombraran tus colores y que se nombrara a todo este Dawkins, que puedan entenderlos fácilmente más adelante en código. También puedes hacer eso con estilos de carácter. Entonces aquí tengo Poppins 16, pero en algunos casos tal vez quiera nombrar a este H1 Bob en 16. A lo mejor sólo quiero nombrarlo H 1 de mayo sea principal, H1, H2, H3, H4, H5. Entonces, por ejemplo, si tal vez texto de párrafo, por lo que puedes llamarlo tamaño de párrafo, puede ser que tengas algunos Dexter's diferentes de diferentes lugares. Al igual que por ejemplo, en pantallas de tablero, tal vez tengas diferentes tamaños de texto allí. Quizás incluso puedas incluir algo así como texto promocional. A lo mejor quieres incluirlo en la pancarta. Entonces solo piensa en todas estas cosas diferentes mientras estás diseñando. Por lo tanto, puedes incluirlos como fichas de diseño. Y por último, para los iconos y componentes, se puede ver tenemos móvil top nav, main, top nav, ícono de menú principal, y tenemos icono de menú secundario y mucho más. Pero aquí está la principal diferencia entre estos dos. Cuando estás nombrando a los componentes, Mobile top nav es importante porque va en móvil, mientras que main top nav va justo aquí en un diseño de sitio web que es instantáneamente fácil de entender para los desarrolladores porque pueden entender, bien, entonces esto es para un móvil, esto es para la web y pueden ponerse en marcha muy rápido. Entonces esos son los tokens de diseño y realmente te animo a volver a nombrar tus capas, hablar con tus desarrolladores y tus clientes. ¿ Cómo quieren que nombre a sus capas para que puedan entender fácilmente y tirar esto dentro del código para que pueda reducir su carga de trabajo más adelante una vez que realmente haya terminado el proyecto. 29. Crear guía de estilo: Las guías de estilo son extremadamente útiles porque pueden ayudar a tus clientes y especialmente a los desarrolladores a entender qué activos has estado usando en tus diseños. Y pueden seguir el viejo estilo, pueden seguir el color, pueden copiar y pegar colores de tu guía de estilo. Entonces si tomo de vuelta a nuestro ejemplo aquí que estamos reutilizando, tenemos aquí una guía de estilo de proyecto. Entonces si acercamos realmente de cerca, se puede ver que tenemos todos estos colores diferentes. Para que puedan ver blanco liso, que una vez más, si te llevo aquí mismo, aquí es gris claro para que rápidamente puedan echar un vistazo y ver qué código hexadecimal estás usando. Para que puedan copiar este código hexadecimal pegado directamente en código, cableados todos juntos, codificar, y van a tener estos colores integrados. La otra opción es porque será libre de SDS y siempre recomiendo esto a los desarrolladores, con los que estoy trabajando a lo largo de los años, es simplemente instalar XD, abrir este archivo, y simplemente copiar y pegar esto directamente en código si quieren. Porque así, simplemente pueden desplazarse y entender dónde se utilizan estos colores. Lo mismo para la tipografía. Por lo que puedes ver diferentes colores para diferentes tamaños, diferentes espaciamientos y diferente altura de línea es diferente. Aquí todo es diferente. Entonces los desarrolladores pueden entender fácilmente, OK, esto es eso, puedo usar eso aquí. Yo puedo usar eso ahí, esto se usa para eso. También queriendo señalar, si estás compartiendo para desarrolladores va a ser mucho más fácil para ellos darles ese enlace porque pueden copiar y pegar fácilmente estos estilos directamente desde ese enlace compartido en el código. Pero una vez más, esta guía de estilo de proyecto es realmente útil para que las cosas se vean bien de un vistazo, la iconografía. Entonces, una vez más, pueden echar un vistazo a t2, qué iconos Has estado usando? Y en este caso tenemos esta tarjeta. Entonces si has usado 50 tarjetas diferentes, puedes poner el texto a continuación y llamar a esto por ejemplo, diseño de sitio web y página de tarjetas, desplazamiento tres o lo que sea. Para que puedan saber que has estado usando este elemento concreto en tu diseño. Entonces ahí es donde un estilo guías son útiles. Y los clientes también pueden ver estas guías de estilo. Y esta es versión realmente simplificada puedes crear tan compleja la guía de estilo como quieras. Puedes incluir diferentes imágenes en tu guía de estilo. Puedes crear diferentes tableros de humor para inspirarte. Puedes incluirlos en una guía de estilo. Se puede elaborar más en los párrafos, por ejemplo. Para que puedas crear párrafos más grandes, párrafos más pequeños. Puedes mostrar cómo se ve el párrafo, línea central alineada a la izquierda y escribir la línea para que puedas poner tanta información en esta guía de estilo como quieras. O algunos proyectos no requieren de guía de estilo en absoluto. Por lo que una vez más, tienes que hablar con tus clientes y desarrolladores. En realidad necesitan la guía de estilo porque si no lo hacen, esto es solo un ejercicio de diseño para ti mismo. O si solo tienes demasiado tiempo libre en tu mano, puedes crear esto. Pero una vez más, guía de estilo requiere mucho tiempo y mucho esfuerzo y pensamiento puesto en ella. Entonces si no tienes que crear Style Guide por todos los medios, no la crees, sino pregúntale a tus clientes y desarrolladores, ¿realmente necesitas crearlos? Porque cuando comienzas a compartir, puedes compartir para clientes y compartir para desarrolladores. Y ambos pueden obtener la imagen allí en lugar de que tú adicionalmente creando esta guía de estilo. Pero una vez más, es parte importante del propio proceso de diseño. 30. Crear grandes presentaciones: Por último, la última parte o el proceso de diseño, nuestras presentaciones, tienes que tener buenas habilidades de presentación ya sea en persona, sobre la llamada zoom, llamada de Skype, o en la propia presentación. Entonces hay que explicar cuál es el problema. ¿ Cómo accede a este problema? ¿ Cómo te vas al respecto? ¿ Cómo se trata de encontrar la solución? ¿ Y entonces cómo resolvió ese problema? Tienes que mostrar todo dentro de tu presentación. Y esto suele llamarse Caso de Estudio. Y cada proyecto es el caso de estudio para sí mismo. Pero, ¿cómo sabes lo que necesitas presentar? Es realmente fácil. Simplemente ve a Google. Antes de ir a Google, asegúrese de entender es esta presentación del proyecto antes de empezar a trabajar o después de empezar a trabajar. Y tienes que usarlo para tu portafolio. Porque antes de empezar a trabajar, tienes que explicarle a tu cliente potencial porque no son tu cliente hasta el momento, pero les estás lanzando. Tienes que explicar cuáles son tus capacidades como diseñador. Por lo que tienes que venderte a ellos básicamente para trabajar para ellos en su proyecto. Entonces tienes que explicar tus habilidades para resolver problemas y ¿cómo puedes ayudarlos en este proyecto en particular? Si sin embargo, del otro lado, has terminado este proyecto y solo quieres mostrar tus habilidades de diseño, todo tu proceso mientras diseñas este sitio web, entonces tienes que hacerlo al revés. Entonces en el primer método, asegúrate de usar algo así como una presentación de PowerPoint. Quieres mostrar tantos problemas que puedes resolver como sea posible en ese nicho en particular. Para que el cliente pueda entenderte fácilmente. Si un te da un ejemplo, si te estás acercando, porque usamos Dao De En el ejemplo anterior, digamos que vas a tu concesionaria Audi local y quieres rediseñar su página web. Pero lo que has hecho anteriormente es un rediseñado un montón de estos sitios web de juegos. No es relevante para nuestro D. No te van a contratar no importa lo bueno que seas diseñador, porque no entiendes los problemas que están enfrentando dentro de esa industria. Así que asegúrate cuando estés lanzando, quizá seguro de lanzar el tono correcto al cliente adecuado que va a entender los problemas y va a entender las soluciones que estás ofreciendo, por lo tanto, va a ser un mejor ajuste para usted. Y va a ser un proyecto mayor oral Por el otro lado cuando termines el proyecto y quieres presumirlo ya sea en tu cartera, en tu página de Behance o incluso futuros clientes, lo cual también es importante. Quieres mostrarles cómo resolviste los problemas en tus proyectos anteriores en el mismo nicho en el que están, y ahí tienes una combinación ganadora. Entonces déjenme ir rápidamente a porque, y les voy a mostrar algunos buenos ejemplos que rápidamente encontré. Pero también puedes explorar y encontrar diferentes ejemplos que funcionen mejor para ti. Entonces, ¿qué tenemos aquí? Es este proyecto móvil. Ahí, llámalo de color, y aquí puedes ver de qué se trata. Tienes esta bonita animación de fondo. Por lo que el procedimiento de salvamento digitalizado para que puedas ver lo que hace la app. Nuestra visión. Entonces, ¿cuál es nuestra visión? Los problemas? Se puede ver, lo que la app puede hacer de inmediato. Un clic puede salvar la vida de alguien. Entonces esa es la solución. Lo que hicimos, nuestro enfoque, algo de branding, diseño de UX, diseño UI, y para cada uno de estos lo que hicieron, flujo de usuario. Entonces una vez más, donde encontraron a sus usuarios, cómo viaja el usuario a esta app. Por lo que el usuario viaje básicamente base de conocimiento. Entonces lo que han incorporado, comprado y arrojado wat lo que han creado. Para que puedas ver toda esta información adicional diferente que están utilizando dentro de la app. Aquí puedes ver algunos puntos de llamada. Flujo rápido, presencia virtual. Entonces básicamente ir aún más lejos como el smartwatch fluye a través de la app. Y básicamente así se ve. Por lo que se puede ver esto es realmente complejo ejemplo de la presentación del proyecto se hace extremadamente bien. Por lo que puedes dividir tu tiempo adicional a las presentaciones porque buena presentación es la mitad de la venta. Asegúrate de saber eso, asegúrate de recordarlo. Porque si tienes buena presentación, que se comunica muy bien y se ve muy bien, ya estás a medio camino atrevido a prestar proyecto muerto o incluso ese futuro proyecto. Un ejemplo más que quiero mostrarles es este rediseño del sitio web de visa. puede ver que es de Ekaterina, MI halo. Y básicamente ella lo hizo al revés. Este es el diseño del sitio web más que este diseño de aplicaciones. Entonces puedes hacer esto por cualquier cosa que estés diseñando básicamente en lo que ella está haciendo aquí es mostrar que esta página se ve así en móvil. Enseguida. Ella se lo llevó, ella toma el branding, ella extiende esto aún más. Ella tiene estas bonitas animaciones entre las tarjetas. Está mostrando cómo se ve el desplazamiento en la página. Quizás incluso algunos efectos de terror y mucho más. Esta página, cómo se ve en web y móvil. Aquí tenemos la grilla. Por lo que se puede ver que ella está separando páginas reales y todos estos detalles adicionales como un tamaño de fuente entre todo esto mientras estos chicos separaban todo en secciones. Por lo que realmente depende de ti cómo quieres estructurar tus presentaciones a tus clientes y básicamente decir lo que puedes hacer por ellos en un caso particular. Entonces eso es todo para las presentaciones son realmente animar a comprobarlo. Ve a B tiene un C en tu industria, en tu nicho, cómo se ven las presentaciones, asegúrate de recordar el ejemplo de Audi, pero puedes aplicarlo a cualquier ejemplo. Y en cada uno, cualquier industria en la que estés, asegúrate de comunicarte, para escribir ideas, arreglar problemas y escribir soluciones con los clientes adecuados. Y Dan, vas a estar en una racha ganadora. 31. Futuro de las herramientas de diseño: Por lo que tal vez estés empezando en este negocio y tal vez solo te estés preguntando cuál es el futuro de estas herramientas de diseño solo debería valer mi tiempo para Adobe XD. ¿ Debería incluso ir por sigma four sketch, tal vez Photoshop o Illustrator? ¿ Qué debo buscar en estas herramientas y dónde debo dedicar mi tiempo también? Por lo que les puedo decir, desde mis años y años de experiencia, casi dos décadas en este negocio, que realmente no hay una respuesta correcta. Todas estas herramientas están evolucionando a lo largo del tiempo. A mí me gusta mucho Adobe XD porque es parte de la familia Adobe y realmente no son deudas. Si tengo mi suscripción premium al paquete Adobe, Va a ser soportado y puedo usarlo en conjunto con, por ejemplo, Photoshop Illustrator. Si tengo que arreglar algunas de mis imágenes, vamos a ver, tal vez realmente pueda usar Lightroom. Por lo que tengo todo eso en creativo llamado suscripción. Por lo que realmente me gusta Adobe XD para el asunto, también la versatilidad porque como dijeron en este curso, se puede pasar de crear prototipos de diseño y compartir sus características de colaboración. Y lo más crucial de todas es que las actualizaciones vienen todos y cada mes. Y llegan grandes actualizaciones una o dos veces, tal vez tres veces al año, dependiendo del atraso del equipo y de lo que hayan creado hasta el momento. Así que solo asegúrate de entender cuándo estás eligiendo estas herramientas de diseño. Asegúrate de elegir el que sea adecuado para ti. A lo mejor realmente te gusta usar boceto, pero bocetos no soportados en Windows. Entonces si eres usuario de Windows, entonces esa no es una opción. lo mejor te gusta usar para sigma, entonces puedes seguir adelante y usar para sigma en la nube. Pero si tu conexión a internet es demasiado lenta, dan, esa experiencia no va a ser genial con alguna otra experiencia que tiene, por ejemplo, diseñador de Sumatra que tiene mejores velocidades de conexión a internet. Si estás por otro lado, como Adobe XD, como yo, y te gustaría usar algunos de los otros productos de Adobe, entonces realmente sigue adelante. Aquí no hay opción correcta o incorrecta. Te puedo decir por experiencia, vivimos en una gran época para ser diseñador de UI y UX porque tenemos todas estas herramientas a nuestra disposición, lo único que tenemos que hacer es simplemente trabajar. Puedes trabajar en ti mismo, puedes trabajar en mejorarte. Y una cosa clave a recoger de este curso y de éste, una parte del curso sobre todo es cuando sabes usar algunas de estas herramientas, como en este caso, será x D. Será mucho más fácil para ti entender estas herramientas UDL como FISMA o sketch o incluso Photoshop. Porque todas estas herramientas son básicamente las mismas. Simplemente depende de ti y lo que mejor te queda si ganas versiones gratuitas que XD y sigma son gran opción si estás en un Mac en sketch de la vida real o eres un equipo te está obligando a usar sketch o realmente quieres usar sketch, entonces hay que pagar por el Scatchard. Así que solo asegúrate de ver qué es lo mejor para ti. En mi caso, como dije, un real como Adobe XD. Y debido a que es ligera, me proporciona esta gran opciones. Y si quieres, por ejemplo, hacer algo más avanzado y emisiones y mostrar datos o clientes o un desarrollador, entonces puedes elegir ese archivo Adobe XD, ir directamente a Premier, por ejemplo, o incluso después de efectos. Y en, After Effects, puedes agregar todos estos increíbles detalles y todas estas increíbles animaciones. Ni siquiera tienes que hacerlo porque hay tantos plugins dentro de Adobe XD. Y luego puedes ir con plugins para, por ejemplo, pruebas de usuario. Hay algo llamado anima. A partir de hace poco, puedes exportar directamente código fuera de Adobe XD. Se puede trabajar en tantas opciones diferentes y tantos niveles diferentes. Justo dentro será sin cambiar nunca ninguna de estas herramientas. Porque recuerdo cuando empecé y solíamos crear sitios web en Photoshop e Illustrator. Entonces tenemos que usar herramientas como la visión, pero fue mucho más tarde. Antes de imaginarse, tenemos que explicar a nuestros clientes que no son diseñadores web, que no son desarrolladores cómo va a terminar el diseño una vez que se desarrolle. Por lo que es realmente difícil comunicar idea así con tu cliente, sobre todo si no saben y no entienden de qué estás hablando. Pero con herramientas como Adobe XD y todas estas herramientas, extensiones, plugins y los recursos que tenemos ahora a nuestra disposición, es mucho más fácil para los clientes entender porque como viste en el discurso, es mucho más fácil para ellos proporcionar retroalimentación y para guiarte a través de este proyecto para que puedas obtener con el proyecto más rápidamente. Es mucho más fácil comunicarse con el desarrollador porque en el pasado, ese también era el ajetreo. Tienes que instalar diferentes plugins para pulir y fue realmente un desastre. Pero aquí mismo tienes soluciones integradas para exportar tus archivos. Por lo que es mucho más fácil trabajar con desarrolladores, con clientes, que las partes interesadas, con tus compañeros de equipo de un vistazo, todo dentro de una sola aplicación. Y puedes empezar de forma gratuita. 32. PROYECTO DE CLASE: Tu proyecto de clase para esta clase es utilizar los consejos y técnicas que aprendas de este curso para aplicarlos a tu proceso de diseño. Y realmente me gustaría que crearas ya sea un sitio web de una sola página o una sola pantalla para la app usando los consejos y técnicas que aprenderás de este curso y que los subas a los proyectos de clase, asegúrate de guardarlos fuera como simple JPEG, no necesitas incluir nada elegante como una emisiones, nada elegante como Geoff simplemente incluirlos como imágenes JPEG, subirlas a la sección de archivos de clase y yo y otros estudiantes podremos proporcionarte con la retroalimentación. Nadie está aquí para juzgarte. Todos estamos aquí como amigos para ayudarnos unos a otros y para ayudarnos mutuamente a crecer y expandirse en este campo. Por lo que una vez más, realmente te animo a crear lo que quieras que aprendiste de esta clase y simplemente subirlo a los archivos del proyecto de la clase. 33. Conclusión de clase: Gracias por ver este curso. De verdad espero que hayas encontrado valor en ello. Si lo deseas, puedes consultar aquí mi curso de masterclass Adobe XD. Se puede inscribir en ella. Y luego podrás encontrar todas las herramientas y características de las que hablamos en este curso gratuito. Además, si quieres acceder a los enlaces y recursos que mencioné en este curso, habrá enlazado en un PDF. Asegúrate de descargar PDF de composición abierta y simplemente puedes hacer clic en el enlace que te interese y podrás acceder fácilmente a él hasta la próxima vez. Gracias una vez más por mirar y les deseo suerte en todos sus empeños. Has escogido el campo correcto porque UI UX Design es el campo InDesign, que se expande más rápidamente y hay muchas oportunidades diferentes para ti. Por lo que les deseo toda la suerte en su búsqueda de empleo o en sus empeños de mejoras de carrera. Gracias. Y hasta la próxima vez, cuídate.