Clase magistral de Adobe Xd: diseño UI/UX desde cero

1. Introducción a la clase: Hey diseñador y mi nombre es Alex y bienvenidos a esta clase de habilidad compartir. Soy el fundador de donantes web, productos de diseño muy creativos para creativos como tú, también soy profesor y hasta el momento más de 30 mil alumnos han concluido mis cursos. En esta clase magistral de 20 horas más logada, vas a aprender conceptos básicos de Adobe XD y lo que puede hacer, cómo crear un gran diseño, breve. Crear arquitectura de sitios web. Dibuja tus wireframes en papel, luego importarlos y crearlos en Adobe XD. Crea diseños complejos agregando colores, imágenes y animaciones. Comparte esos diseños con los clientes para obtener comentarios. Crea diseño responsive con múltiples tamaños. Presenta tus diseños en un portafolio. Y por último, cómo exportar tus activos para desarrolladores usando estándares de la industria. Esta clase cubre todo lo que necesitas saber para empezar en el diseño UX de UI, o para mejorar tus habilidades, sin importar el nivel que estés en este momento. No necesitas ningún conocimiento previo de UI, UX o Adobe XD, lo vamos a cubrir todo en este curso. Tu proyecto de clase es crear un sitio web diseñado utilizando los consejos y técnicas que aprendes de esta clase. Entonces si quieres emplear tus habilidades y productividad, ahorra mucho tiempo y dinero en iteraciones y cambios V y crea diseños fomentan que te veré en clase. 2. Descripción general de la clase: Hey diseñadora Alice aquí y bienvenidos al curso. De verdad espero que encuentres valor en ella y realmente espero que aprendas algo nuevo o que vayas a mejorar tus conocimientos de Adobe XD o proceso de diseño y creación del diseño de sitios web. Entonces en este primer video de este curso, realmente me gustaría que te presentaran el curso, qué vamos a hacer, y cómo vamos a empezar. Y lo primero que les voy a mostrar es la visión general de nuestro proyecto. Y te voy a guiar a través realmente rápido lo que vamos a estar haciendo en este curso. ¿ Por qué es tan largo y por qué me tomé el tiempo para crearlo? Entonces, en primer lugar, vamos a explorar nuestro resumen de diseño. Te voy a mostrar el breve de diseño después de la introducción a Adobe XD parte del discurso. Entonces si estás familiarizado con dx, dy, si sabemos cómo usarlo, simplemente puedes saltarte estas lecciones. Pero si no, realmente te animo a que pases por estas lecciones y solo a que te familiarices con Adobe XD como herramienta, qué puede hacer y cómo te puede ayudar a elevar tu juego de diseño de UI y UX. Entonces lo que vamos a hacer es leer ese breve de diseño que usted considera desde el cliente. También te mostraré una plantilla que podrás utilizar para tus propios proyectos. Te contaré y te explicaré cómo conseguimos toda esa información? Y luego te vamos a guiar a través de cómo puedes explorar una persona diferente? ¿ Cómo puedes explorar diferentes casos de uso y diferentes audiencias y deudas van a estar usando tu producto, en este caso, diseño de sitios web. Y luego vamos a empezar con wireframes de papel y vamos a crear cosas como estas. Entonces vamos a empezar con solo trozo de papel liso y vamos a dibujar sobre él usando un simple bolígrafo o lápiz. También podemos usar estos marcadores de colores como se puede ver aquí mismo. Y luego te voy a mostrar cómo puedes traer todas las puertas de pago proporcionan marcos a Adobe XD. Ahora tal vez te estés preguntando, ¿por qué debería soltar alambres de papel y luego hacer todo lo mismo en Adobe XD, es bastante sencillo. Quizás necesites compartir este archivo con algunos otros diseñadores. lo mejor necesitas compartir este archivo con tus clientes y está todo bien y bien tener estos pedazos de papel como esta línea a tu lado. Pero por ejemplo, si necesitas compartir esto con algunos compañeros de equipo con los clientes, en cualquier caso, tal vez incluso con los desarrolladores solo para que puedan comprobarlo en esta etapa temprana del proyecto, entonces necesitarás algo para compartirlas ancho para que o bien puedas tomar, uh, tomar una foto con tu teléfono y luego llevar esas fotos dentro de tu computadora, arrastrarlas y soltarlas en Adobe XD. O aún mejor, si tienes un escáner, no es obligatorio, pero si lo tienes, es genial. Puedes escanearlo y simplemente traerlo dentro de Adobe XD. Voy a acercarme sólo un poco en nuestro archivo Adobe XD, que es lo que es esto y lo que puedes ver aquí mismo. Entonces les voy a caminar por los pasos y vamos a dar a lo largo del discurso para lograr el resultado final. Entonces lo primero es lo primero, vamos a empezar con alambres de papel y se pueden ver aquí mismo como dije. Por lo que estos son todos nuestros alámbricos de papel. Y vamos a dibujar todos estos alámbricos en un pedazo de papel. Voy a explicarles todas mis decisiones por qué he optado por hacer estas cosas. Te voy a mostrar cómo puedes anotar notas solo para recordarte o para explicarte a sus compañeros o al cliente algunas de tus decisiones y por qué has elegido esa decisión sobre canción otra, otra cosa, para ejemplo. Entonces vamos a crear esta arquitectura de sitio web. Vamos a conectar todas las páginas entre ellos. Y te voy a explicar el flujo de la página web donde los usuarios van a hacer clic en páginas ricas, van a visitar, a donde van a ir desde ahí y así sucesivamente. Después de que eso se complete, vamos a pasar a wireframes en Adobe XD. Ahora tal vez te estés preguntando, ¿Por qué debería crear alambres dos veces? Bueno, es mucho más fácil poner ideas solo en un trozo de papel y simplemente dibujarlas rápidamente hacia abajo, solo Sukh y obtener el sentido general, una imagen general de su proyecto y ofrecer una dirección de diseño, por ejemplo. Y luego una vez que tengas deuda, una vez que hayas demostrado eso a tu cliente ya sea en jpeg, como estos están aquí mismo, o como PDF por ejemplo. Por lo que puedes combinar todos estos dentro de Adobe XD o cualquier otro software en un gran PDF. Y puedes enviar ese PDF a tu cliente para que puedan comprobarlo y ver por sí mismos si eso es algo que les gustaría proceder con este proyecto después de que todo eso se complete y tu ejemplo de Fourier consiga un verde luz de su cliente. Entonces vas a pasar por dentro de Adobe XD y luego empezar a crear alámbricas. Como puedes ver, vamos a crear todas estas alámbricas en Adobe XD. Te voy a mostrar cómo puedes usar y reutilizar ciertos iconos. Cómo se pueden crear estilos de fuente, cómo se pueden crear colores personalizados, hacerlos como un componente, y luego aplicar esos colores en todo su diseño. También te voy a mostrar algunos plug-ins para crear estas banderas aquí mismo, por ejemplo, no entraré en mostrarte algunos plugins diferentes más adelante para algunas otras cosas. Y después de que hayamos completado el diseño del sitio web, también vamos a crear una pantalla de dashboard porque los usuarios necesitan iniciar sesión desde este sitio web e ingresar al panel donde tienen toda su información personal. Y debido a que se trata de un proyecto bancario, tendrán acceso a sus cuentas, tendrán acceso a sus tarjetas, préstamos, etcétera. Entonces vamos a crear deuda. Ahora, la importancia de estos wireframes en Adobe XD es porque puedes compartirlos con tu cliente para recibir comentarios. Cuando te proporcionan retroalimentación sobre estos wireframes, entonces puedes realizar ciertos cambios en estos wireframes. Densa arena los que retroceden para revisión. Ellos o bien pueden proporcionarle más comentarios y usted puede seguir adelante con comentarios en estos wireframes. O puedes aplicar la retroalimentación que tienes y empezar a crear diseños. Ahora cuando empieces a crear diseños, como puedes ver aquí mismo, vas a empezar a incluir diferentes colores porque si mires aquí mismo, puedes ver que solo es gris sobre Blanco, quizás incluso algún gris más oscuro . Entonces esos son solo tu color básico para que tus ideas lleguen a tu cliente y tal vez hasta a los desarrolladores, tal vez compañeros de equipo, para que puedas reunir todos esos comentarios. Te estoy contando todo sobre la retroalimentación en la parte de compartir de este curso. Por lo que realmente te animo a saltar de nuevo a la deuda parte del curso. Para que puedas ver todo el curso o puedes saltar directamente a esa parte solo para familiarizarte con la deuda. Entonces realmente todo depende de ti. ¿ Cómo quieres ver este curso? Por último, vamos a empezar a diseñar. Vamos a diseñar todas estas páginas, y también vamos a añadir algunas animaciones bonitas y personalizadas. Nosotros los vamos a dividir en flujos. Eso es lo que ves aquí mismo donde dice diseño de sitios web, diseño de paneles, y así sucesivamente. Vamos a conectar todas esas páginas. Y como pueden ver aquí mismo, sólo tenemos una pantalla de tablero dentro de nuestro marco alámbrico porque vamos a seguir construyendo a partir de ahí. Y vamos a crear todas estas otras pantallas de dashboard. Ahora bien, si te llevo aquí mismo y presiono este botón de vista previa aquí mismo, se abrirá en la ventana externa. Y entonces puedo mostrarles lo que hemos hecho aquí mismo con este diseño enriqueció la animación. Por lo que incluimos algunas animaciones personalizadas y algunas realmente cuidadosas una planta colocación de esas animaciones. Entonces si paso el cursor, puedes ver estos efectos de flotar en estos botones. Se puede ver que este menú nos está siguiendo. A medida que nos desplazamos. Se pueden ver estos efectos de terror. Estas tarjetas, por ejemplo, se puede ver cómo funciona eso. Incluimos algunos efectos después con esta parte también. Aquí hay algún efecto de horror y esta navegación funciona. Entonces si hago clic en mis cuentas, por ejemplo, me va a llevar a la página de cuentas donde tengo todos estos iconos, por ejemplo, que al hacer clic en ellas, van a cambiar. Y toda esta información va a cambiar también para corresponderse mejor con toda esta información aquí mismo en la parte superior diciendo la selección que has elegido. También tenemos nuestro efecto en estos botones. También tenemos Q y a. tenemos esta bonita carpeta y así sucesivamente. Después de eso, voy a mostrar cómo podemos crear estas páginas de inicio de sesión y registro, que puedes ver aquí mismo. Y luego después de que inicies sesión, te llevará a tu panel de control donde tienes todos estos efectos de paginación a estas tarjetas. Por ejemplo, tienes estos efectos aquí mismo en la parte superior. Y también te puedo llevar a páginas como esta donde voy a mostrar cómo podemos crear estas gráficas animadas. Cómo se pueden crear estos botones, cómo se pueden crear estos grupos desplazables y mucho, mucho más después de que se complete el diseño, después de reunir suficiente retroalimentación, después de haber hecho todos estos y emisiones, que te voy a guiar paso a paso, cómo podemos crearlos de una manera inteligente usando componentes, y cómo luego puedes reutilizar esos componentes más adelante, vas a pasar al diseño responsive. Voy a compartir con ustedes cuál es el diseño responsive. Te voy a mostrar todos estos diferentes tipos de rejillas y cuadrículas, cómo van a funcionar dentro de nuestro diseño. Y voy a mostrar cómo podemos crear esta página de inicio, que es esta página y ajustada en cuatro tamaños diferentes. Y Dan, voy a hacer lo mismo y mostrarte cómo puedes hacer exactamente lo mismo usando los mismos principios en la pantalla de diseño del tablero también. No vamos a crear un diseño responsive para todas las páginas solo por el bien del tiempo. Pero si quieres, realmente te animo a probarlo para que lo pruebes por ti mismo con todas estas páginas que vamos a crear en este curso, porque esa es la mejor manera que vas a aprender. Vas a aplicar estos principios de todos modos cuando empieces a trabajar con tus clientes o si ya estás trabajando con tus clientes, esta es una gran manera solo de retocar tus conocimientos o de recoger algunas nuevas técnicas que Adobe XD puede proporcionarle. Por último, después de haber completado este diseño responsive, vamos a pasar a la guía de estilo del proyecto. Te voy a mostrar cómo puedes compartir tus diseños con tu cliente. Cómo podemos recopilar comentarios, Coca-Cola, y compartir diseños con los desarrolladores, dándoles activos que luego pueden descargar y usar en código. ¿ Cómo puede compartir código CSS personalizado? Cómo puedes usar y crear todos estos activos de documentos aquí mismo. Entonces cuando la carga, se puede ver que hemos creado estos tokens de color. Creamos un estilo de personaje diferente. Creamos un montón de estos diferentes componentes. Entonces te voy a mostrar cómo puedes compartir todas esas cosas con tus clientes y con tus desarrolladores. Vamos a discutir cómo podemos recopilar comentarios y cómo puedes tomar esa retroalimentación en cualquier parte de tu proyecto. Entonces si eso es en esta parte, en esta parte, en diseño Barth y parte receptiva. O finalmente, cuando comienzas con la guía de estilo del proyecto. Por último, sí, vamos a cerrar este proyecto. Vamos a crear la guía de estilo del proyecto. Y te voy a mostrar cómo puedes exportar manualmente todos los activos de este proyecto para mostrarlos a tus desarrolladores y clientes, te voy a mostrar la estructura de carpetas. Te voy a mostrar diferentes técnicas de exportación de activos, diferentes formatos de archivo, cómo se corresponden entre sí, por lo que puedes usar, qué formato de archivo y mucho, mucho más. También te voy a mostrar diferentes tamaños y cómo puedes trabajar con diferentes tamaños. Entonces, por ejemplo, para todos estos y ¿cómo se pueden exportar activos rápidamente? ¿ Cómo hacer, no repetir la exportación de activos? Y cómo se puede mejorar aún más ese proceso, acelerar un poco las cosas. Entonces básicamente ese es nuestro proyecto y se puede ver cuánto hay en blanco. El curso dura tanto tiempo. De verdad espero que ustedes vayan a aprender algo nuevo del discurso. Y realmente espero que ustedes vayan a aplicar el conocimiento del discurso en su trabajo futuro. Entonces como dije, primer video después de este video es solo pasear por el proyecto en sí. Entonces si quieres, puedes ver que después de ese video viene la parte de introducción o para Adobe XD. Entonces, una vez más, si no estás familiarizado con Adobe XD, si no sabes en qué es posible, habrá UCSD. De verdad te animo a ver esa parte del curso antes de que realmente pases a esta parte del curso cuando vamos a empezar con el diseño del proyecto. Entonces te veré ahí. 3. Introducción a Adobe Xd: En esta sección del curso, vamos a explorar Adobe X, estas herramientas y características básicas. Y de verdad recomendaré a cualquiera que apenas esté empezando con el diseño UX de UI o con el propio Adobe XD que consulte esta parte del curso porque realmente contiene parte de la información más valiosa sobre todas las herramientas que Adobe XD tiene para ofrecer. Herramientas sobre el diseño porque las herramientas de prototipado, las vamos a explorar un poco más adelante en el curso, vez que realmente empecemos a crear prototipos nuestros diseños y agregarle algo de animación y algo de especia a ella. Pero antes de todo eso, una vez más, si apenas estás empezando, si no sabes qué es Adobe XD, si no sabes lo que estás en el diseño de UX. Y entonces realmente te recomendaré que revises esta parte del curso para que conozcas algunos de estos atajos. Porque van a haber herramientas realmente valiosas para entender, sobre todo una vez que empieces a seguir adelante por este curso. Y vamos a conseguir algo a algunas cosas extremadamente complejas más adelante abajo en el error del curso. Antes de todo eso, realmente recomendaría que ustedes chicos echaran un vistazo a esta sección del curso, porque como dije, contiene algunos de los consejos y técnicas más importantes de Adobe XD y sobre todas sus herramientas básicas para el diseño. En el siguiente apartado del curso, vamos a empezar realmente a diseñar, vamos a planear. Vamos a procesar todo desde el propio proceso de diseño. Entonces, una vez más, si sabemos hacer todas estas cosas, simplemente puedes saltarte esta parte del curso. Pero si no lo hacen, de verdad les recomiendo que echen un vistazo y que se familiaricen con todas estas herramientas y características. Entonces te veré en el curso. 4. Instala Adobe Xd: En este primer video de esta serie, donde te paso por el Adobe XD, sus características y todas sus funciones. Vamos a explorar la aplicación creativa de escritorio nublado. Por lo que puedes ir a la página web oficial de Adobe, Adobe.com, Si no tienes esta aplicación de escritorio de Creative Cloud. Y básicamente se utiliza para todas las actualizaciones y todas las instalaciones de todos y cada uno de los programas que Adobe tiene para ofrecer, incluyendo un Adobe be x D. Así es como va a quedar. Para que puedas crear tu cuenta gratuita y podrás acceder a ella desde aquí. También puedes conectar tu cuenta de Behance si tienes una, y se mostrará aquí mismo. Y las de tus notificaciones aquí, aquí mismo tienes aplicaciones de escritorio, tienes aplicaciones móviles, y también tienes aplicaciones web. Por lo que la mayoría de estas aplicaciones de escritorio tienen al menos versión móvil. Y si no, algunos de ellos también pueden trabajar en una Web. Por ejemplo, las fuentes de Adobe donde se pueden descargar fuentes, Obviamente, Adobe Stock donde se pueden obtener fotos de stock, portafolio, Acrobat, y así sucesivamente. De lo que nos interesa son las aplicaciones de escritorio y Adobe XD. Entonces aquí lo tengo instalado, como puedes ver, y está actualizado cuando no está actualizado,simplemente puedes, como dice, aquí mismo,dar simplemente puedes, como dice, aquí mismo, clic en actualizar. Verás Actualizar barra de progreso aquí mismo. Se actualizará a la última versión y luego mostrará este mensaje a los visitantes actualizados. ¿ Cómo se puede instalar realmente? Donde es bastante sencillo de esta lista, aquí mismo, tienes este botón de instalación junto a Adobe XD, como dije, ya lo tienes instalado por lo que no lo puedes ver, pero simplemente haz clic en Instalar. Te pedirá que lo instales como cualquier otro software en tu computadora. Funciona tanto en Mac como en PC. Y una vez que esté instalado en su máquina, dirá instalado un actualizado. Y básicamente para abrirlo, simplemente puedes hacer click aquí mismo. Y cuando haces esto, pantalla aparece y deja que oculten rápidamente la disciplina fuera de la vista. Y en el siguiente video vamos a explorar este verde, que se llama pantalla de inicio. Y esto es básicamente lo primero que ves una vez cargas Adobe XD desde esta aplicación de escritorio de Creative Cloud, no tienes que cargarlo desde ahí. También hay un atajo de escritorio para poder abrirlo como cualquier otro software. Pero de verdad te recomiendo que compruebes de vez en cuando si hay alguna actualización porque esa es la forma más fácil de lanzarla y de acceder a todas sus características. 5. Pantalla casual: Entonces aquí tenemos la pantalla Inicio, como mencioné en el video anterior. Y aquí en la pantalla de inicio puedes acceder a todas estas características medias antes de empezar realmente a trabajar en Adobe XD. Por lo que debajo de la pantalla de inicio tenemos la pestaña Aprender. Y una vez que haga clic en él, traerá estos tutoriales de Adobe XD steam. Y puedes ver cómo nuestros bins Q0, que básicamente es su evangelista en Adobe steam, puedes ver sobre cómo empezar, sobre el diseño, prototipo, colaborar en sistemas de diseño, todos estos diferentes tutoriales para ayudarte fuera una vez que te inicias o cuando te atascas, por ejemplo, es la forma fácil de acceder a todos estos tutoriales, pero a todo lo que tenemos documentos en la nube, y estos documentos obviamente se suben a la nube. Y debido a que Adobe XD se basa en su mayoría en la nube, puedes usarlo justo como una aplicación de escritorio. Si tú, por ejemplo, no tienes acceso a internet o no quieres subir tus archivos a la nube. Pero si lo haces y si decides hacerlo, puedes ver tus documentos en la nube aquí mismo. Y como pueden ver, estoy en un arranque, un plan para un discurso porque quiero mostrarles todas sus características una vez que estén en un plan de inicio. Por lo que no tienes que pagar Creative Cloud de Adobe o no compraste la app en sí desde hace un año. Entonces básicamente esto es lo que dice, actualizar. Entonces eso es lo que vas a ver. Si estás usando la versión gratuita de Adobe XD, puedes hacer clic en ese botón. Atrévete a actualizar si quieres, pero si no lo haces, simplemente puedes seguir usando esta versión gratuita. Por lo que dentro de una versión gratuita, tienes algún almacenamiento en la nube limitado. Y si hago clic aquí mismo, puedes ver cómo puedes trabajar con tus documentos en la nube. Y puedes hacer click aquí para agregar documentos adicionales en la nube si quieres compartirlo contigo son los documentos que se comparten contigo a través de la nube y borrados son obviamente los documentos borrados que te has ido adelante y eliminado porque necesitas ese espacio adicional en tu almacenamiento en la nube. Debajo de que puedes ver enlaces administrados. Y estos son los enlaces para los prototipos compartibles. Por lo que también están tomando espacio. Y porque en un plan libre, que es la tierra de inicio, obviamente aquí mismo, solo tienes un enlace compartido. Entonces, si estás en otro proyecto, es posible que quieras eliminar ese enlace compartido si ya no es necesario. Por ejemplo, has completado ese proyecto con tu cliente y ya no necesitan ver este enlace compartido. Para que puedas seguir adelante y eliminarlo si quieres. Volvamos a casa haciendo click aquí mismo. Y lo que se puede ver aquí mismo es su eslogan. Entonces diseña prototipo share, eso es todo lo que Adobe XD no puede hacer. Debajo de eso. Tenemos algunos son más tamaños y nuestros tableros son básicamente, si nunca has trabajado con un archivo vectorial antes y programa vectorial antes. Básicamente, esas son las dimensiones de sus archivos dentro de Adobe XD. Por lo que aquí han introducido algunos de estos atajos. Entonces básicamente esto es para el móvil y la tableta, esto es para la web, y esto es para las redes sociales, y este es tu tamaño personalizado. Y si haces clic en estas flechas en cualquiera de estas, tienes este desplegable con algunos tamaños principales los cuales se utilizan. En toda la industria. Y estos son básicamente estándares de la industria si estás trabajando con estos tamaños. Entonces como puedes ver, tenemos versiones para móviles y tabletas aquí, tenemos versiones de un sitio web Aquí, tenemos versiones de redes sociales aquí. Y si hacemos clic en él, en realidad te llevará a un nuevo documento. Entonces déjame volver rápidamente y mostrártelo todo. Y por último, les hemos discutido el tamaño, cual puedes abrir y puedes ingresar tus valores. Entonces, por ejemplo, usemos 1920 por 1080, así, simplemente puedes ingresar tus números en tu teclado. Simplemente presione enter o haga clic aquí. Antes de hacer eso, cargamos que tienes tus archivos recientes y estos son básicamente tus archivos los cuales has abierto previamente. Por lo que estos son accesibles desde aquí. Y también puedes abrir tu Adobe XD y abrirlos desde ahí. Y eso también lo demostraré. Pero básicamente estos son solo algunos de tus archivos más recientes. Y es útil tenerlos aquí porque por ejemplo, estos son mis maquetas que estoy usando en Adobe XD. Y simplemente puedo hacer clic aquí y se abrirá ese archivo sin que yo navegue por él en mi computadora. Por último, antes de pasar a tableros de arte reales, y te mostraré el XD desde dentro. Estos son solo algunos básicamente boletines que están incluyendo aquí mismo. Así que algunos consejos o recursos útiles y así sucesivamente. Por lo que puedes hacer clic aquí para explorar algunos de sus tutoriales. Y lo puedes hacer haciendo clicando aquí así como ya te lo dije. Aquí tenemos algunos corchetes que obviamente son útiles si quieres descargar y explorar algunos de tus hijos que otras personas crearon. Y los vamos a mencionar también un poco más tarde. Y por último, lo que tenemos aquí mismo es reto creativo diario, que realmente recomiendo que te unas, sobre todo si piensas que este camino de carrera es para ti ahí diariamente los retos creativos son impresionantes y tú puede acceder a ellos simplemente haciendo clic ahí mismo. Y son versátiles. Por lo que están incluyendo nuevos retos todo el tiempo. Por lo que realmente recomiendo que ustedes los revisen. ¿ Y probaste suerte en algunos de sus retos diarios? Por último, sigamos adelante y abrimos nuestro tamaño personalizado que creamos. Pero también se puede acceder a estas dimensiones exactas desde aquí. Por lo que se puede ver 1920 por 1080. Entonces realmente depende de ti lo que quieras hacer. Pero debido a que ya creé eso, déjenme dar click rápidamente allí. Y como pueden ver, se va a abrir este nuevo rpart, como yo escalarlo hacia arriba. Ella tenía el control del mando es 0 para chasquear en posición. Y así es básicamente como se va a ver. Entonces este es tu aeropuerto, este es tu espacio de trabajo. Y dentro de este espacio en blanco, dentro de este tablero de arte, puedes dibujar, puedes poner algo de texto dentro, puedes crear gráficos. Se puede hacer todo tipo de cosas diferentes, que vamos a cubrir en este curso. Pero básicamente, este es tu espacio de trabajo. A su alrededor. Este espacio de trabajo es básicamente este espacio vacío el cual se puede subir y bajar. Como puedes ver, hay mucho espacio para todo tu aeropuerto adicional el cual vas a crear. Y te voy a mostrar en este curso cómo puedes hacer eso. Y en realidad vamos a pasar por todo el proceso de diseño. Y te voy a mostrar muchos detalles diferentes en este curso. Pero antes de que lo hagamos, solo quiero cubrir estos conceptos básicos para todas las personas que nunca antes habían usado Adobe XD. Entonces lo que puedes hacer es hacer clic aquí para cambiar el nombre de este documento. Como puedes ver por defecto, pasa por la fecha, los sólidos renombrarlo rápidamente a mi primer proyecto, por ejemplo. Y haga clic en Guardar. Y como puedes ver, este ícono de nube aquí mismo, porque se está actualizando a la nube y se puede ver que está ahorrando. ¿ Qué se guarda? Tú. Ya no tienes este progreso y siempre puedes golpear Control o Command S para guardarlo si quieres. Por último, los nombres de nuestros tableros se pueden cambiar desde aquí, por lo que puede hacer doble clic aquí mismo. Por ejemplo, llame a este uno Homepage. Digamos si eso es algo que quieres. Por lo que en la próxima serie de videos, vamos a explorar las tres pestañas que tiene Adobe XD. Por lo que tiene esta pestaña izquierda, tiene la pestaña stop, y tiene esta pestaña derecha. Y todas estas pestañas están haciendo cosas diferentes y las voy a explicar en próximos videos. Entonces te veré ahí. 6. Conoce Adobe Xd: Entonces déjame guiarte rápidamente por estas pestañas de Adobe XD. Por lo que a tu izquierda tienes la pestaña de herramientas. Aquí mismo. Tiene el Inspector de Propiedades. Y aquí mismo tienes estas pestaña principal. Diferencia entre las versiones de Windows y Mac de Adobe es el son bastante simples, en realidad sólo la media. Y el único factor diferenciador es la navegación. Entonces en un Mac tendrás navegación aquí mismo en la parte superior, como suele tener en cualquier otra aplicación, en tu Mac o en Windows, tienes estas opciones aquí, y también tienes este menú de hamburguesas aquí. Por lo que una vez que haces clic ahí, tienes todas tus opciones aquí. Y también puedes hacer clic derecho en la mayoría de estas herramientas y estas opciones. Y vas a conseguir algunas características adicionales, lo que sea que estés haciendo. Entonces ese es el factor de diferenciación principal y clave entre las versiones de Mac y PC. Ahora es justo aquí a tu izquierda, una vez que pasas por alto, tienes todas estas diferentes herramientas que puedes usar para crear diferentes diseños. Y empecemos de arriba hacia abajo. Por lo que esta es tu Herramienta Select y normalmente la estás usando para seleccionar cualquier objeto que puedas tener dentro de tu arbóreo. Debajo de eso tenemos algunos objetos de forma. Por lo que tienes Rectángulo, Elipse, polígono, y una forma de línea. Y puedes notar, una vez que pase el cursor sobre cada uno de estos, tienes una tecla de método abreviado. Y también les daré un PDF con todos los atajos. O simplemente puedes ir al sitio web de Adobe XD, escribir atajos en la barra de búsqueda y puedes encontrarlos allí, o simplemente acceder a los accesos directos de Google, Adobe XD, que sea más fácil para ti. Alternativamente, también puedes hacer clic aquí y acudir a la ayuda. Y desde aquí se puede acceder a ella, por ejemplo, ayuda XD. Puedes hacer click ahí y puedes encontrar todos estos atajos. Debajo de eso tenemos la herramienta lápiz y bolígrafo se utiliza para crear formas complejas. Y eso lo vas a ver en el siguiente video. Y por debajo de eso tenemos textual obviamente para crear y administrar texto. Debajo de eso contamos con nuestra herramienta de tablero. Por lo que si quieres agregar rápidamente múltiples placas R sin ir a la pantalla de inicio, simplemente puedes hacer clic allí. Y dentro de tu inspector de propiedades, puedes ver todo lo que está en la pantalla de inicio, pero desde aquí accesible para que puedas fácilmente, por ejemplo, quiero crear este. Puedes hacer clic en él y lo agregará justo aquí a la derecha, como puedes ver ahí mismo. Por lo que puedo seguir adelante y eliminarlo simplemente pulsando mi control de tecla delete 0 para encaja en posición. Y finalmente tenemos la herramienta de zoom. Entonces como cualquier otra herramienta por debajo de eso, tenemos panel de activos. Y cuando haga clic en él, se expandirá hacia la derecha. Y puedes agregar tus diferentes ácidos. Para que puedas agregar diferentes colores con los que estás trabajando dentro de tu diseño. Y simplemente haciendo clic en estos colores que previamente has agregado allí. Aplicará a cualquiera que hayas seleccionado. Entonces, por ejemplo, si estás editando texto, todo es negro y quieres crearlo, por ejemplo, para ser azul y tienes color azul aquí mismo. Puedes seleccionar el texto click justo ahí, y se aplicará. Te voy a mostrar todo eso más adelante en este curso. Debajo de eso tenemos estilos de carácter. Por ejemplo, estás creando. H uno deja c y h uno deja ser, por ejemplo, 36 negrita. Simplemente puedes hacer click en este plus y lo agregará ahí como un estilo de personaje. Posteriormente tienes otra que es de 18 irregulares. Puedes dar click ahí mismo y lo agregará ahí. Entonces más adelante, si quieres cambiar algún estilo de personaje que pudieras tener dentro de tu aeropuerto, simplemente puedes seleccionarlo, navegar aquí, click en él, y se actualizará a ese estilo de personaje. Por último, tenemos componentes, y los componentes son un tema un poco complejo para discutir, pero lo vamos a discutir a lo largo de este curso porque vas a ver que vamos a usar muchos componentes diferentes. Y digamos que tienes un botón que quieres usar en todo tu diseño. A lo mejor es un botón azul. Digamos que el ancho es de 76 píxeles, algo así. Y dice, por ejemplo, aprender más. Puedes golpear el control o el comando K para añadirlo como componente, o puedes navegar hasta aquí mismo a nuestra batalla de ácidos. Haga clic aquí en este símbolo más, y agregará ese componente aquí. Entonces simplemente puedes hacer clic, arrastrar y soltar tu componente a lo largo de tu diseño. Y es mucho más fácil, más rápida y más ágil manera de crear tus diseños luego para recrear o copiar y pegar ese botón. Todo el tiempo. No tienes que usar componentes solo para botones. Puedes usarlos para todo tipo de cosas diferentes. Por ejemplo, imágenes. Puedes usarlos para diferentes formas, puedes usarlos para iconos y así sucesivamente. Pero como dijo, voy a explicar eso con mucho más detalle a lo largo de este curso. Debajo de eso, tenemos panel Capas. Y obviamente una vez que empieces a usar estos, vas a ver que se llena con tus capas justo aquí. Puedes reordenarlos y reorganizarlos, destinatario haciendo clic y arrastrándolos. Y también tienes grupos bilayer. tanto que antes te muestro que tienes algunas opciones aquí mismo. Por lo que puedes marcar para exportar cualquier capa, y luego solo puedes presionar Control o Comando E. Y se va a empezar a exportar todas estas capas que hemos marcado para la exportación. O simplemente puedes seleccionarlos manualmente así, pulsa Control Command E Y exportarán así. Puedes bloquear tus capas para que no puedan moverse. Y también puedes ocultar ciertas capas simplemente haciendo clic aquí y no se mostrará. Entonces déjame cambiar el color. Y si hago clic aquí mismo, ya no lo puedes ver porque está oculto. Por último, puedes agregar tus capas a través de grupo y puedes seleccionar múltiples capas, bucketing, click y un turno. Entonces si doy clic aquí mismo Hall mi tecla de turno, click en esta, los seleccionaré todos. Él controlaría mando G para agruparlos. Y se puede hacer doble clic y cambiar el nombre de grupo solidario. Y también puedes hacer clic derecho y puedes ver todos estos atajos diferentes aquí mismo. Por lo que es realmente importante aprender al menos algunos atajos básicos. De lo contrario, simplemente puede hacer clic derecho en grupo y puede cambiar el nombre de estas capas también. Entonces yo diría primero, segundo, y así sucesivamente. Entonces esas son básicamente tus capas. Y para eliminar la capa simplemente seleccionada, pulsa Eliminar en tu teclado y la eliminará a partir de ahí. También puedes reposicionar eso. Ya te lo dije. Y eso básicamente se trata de capas. Y los vamos a explorar en muchos más detalles a lo largo de este curso. Yo sólo quería mostrarte rápidamente lo que los dos. Por último es justo aquí en la parte inferior tenemos plugins, panel. Y los plugins se utilizan para ayudarte a diseñar de una manera más eficiente y más rápida. Entonces por ejemplo, como ves aquí mismo, tengo mi plugin angular el cual se forma mis maquetas. Tengo mi plugin de arreglista y todos estos plugins son diferentes. Por lo que una vez que haces clic instalarlos, hacen diferentes cosas ordenan. Veamos este lorem ipsum, puedo seleccionar el texto, seleccionar el área de texto y escribir algo. A ver, tal vez cubiertas. Haga clic en algún lugar fuera. Haga clic en lorem ipsum, rellene el texto del marcador de posición. Insertar texto, como pueden ver, en lugar de ir a algún sitio web oyendo copiar y pegar y así sucesivamente, en tan solo unos clics dentro de Adobe XD, logré incluir algún texto ficticio aquí mismo. Entonces como puedes ver cómo muchos de ellos, y para agregar más, puedes hacer clic en este icono más y puedes ver descubrir, navegar y administrar. Entonces aquí tenemos Editor's Choice y cuáles creen que son los plugins más importantes. Y los puedes ver por categorías. Entonces, por ejemplo, si quieres cantar para reusabilidad y pruebas, puedes hacer clic ahí mismo y te asegurarán los plug-ins más relevantes e importantes para esa categoría en particular. También puedes hacer clic en Administrar, y estos son todos mis plugins instalados justo aquí. Entonces sé que estos mapas generados ya no funcionan tristemente. Por lo que puedo dar click en Instalar desde aquí, dar click en Instalar, y se puede ver que desapareció de aquí así como de aquí. Si tienes una actualización para tus plugins, puedes hacer clic en actualizar todo. Y como puedes ver, dependiendo de lo rápida que sea tu conexión a internet, puedes ver que se actualiza realmente rápidamente. Entonces esos son tus plugins y ese es tu bar justo aquí a la izquierda. Por lo que bajo la parte superior hemos diseñado prototipo y compartir opciones. Entonces, ¿cuáles son esos? Y básicamente en la pestaña Diseño, lo estás haciendo, todo tu diseño, quiere hacer clic en pestaña prototipo. Podrás agregar todo tipo de animaciones diferentes a tus objetos, nuestra junta, o al propio aeropuerto. Puedes crear múltiples flujos y vamos a entrar en todos esos detalles. Y podrías notar una vez al clic algunas de estas cosas, estos inspectores de propiedades están a la derecha están cambiando. que puedan ver por estos dos, es completamente diferente cuando cambio entre ellos. Y eso es realmente a propósito porque sobre todo en pestañas de diseño y prototipado, hay haciendo cosas completamente diferentes. Y por último, tenemos la pestaña Compartir, que en realidad van a usar una vez que termines tu proyecto y quieres compartirlo con las partes interesadas, con los clientes, con los desarrolladores, con tus compañeros de equipo. Y puedes configurar todo aquí mismo. Para que puedas elegir la revisión de diseño, que en realidad tu cliente va a revisar y dejar tus comentarios. Se puede hacer lo mismo por un desarrollo. Para que los desarrolladores puedan ver fragmentos de CSS. Pueden ver todos los activos diferentes que utilizas. Pueden ver diferentes márgenes, remeros y demás. Presentación, pruebas de usuario, nombre lo dice todo. Y por último, disfraz. Si quieres ajustar algunas de estas cosas, si tu público es público personalizado, que no está representado aquí. Y como puedes ver, un enlace se llama Mi Primer Proyecto porque nuestro proyecto se llama Mi Primer Proyecto. Pero obviamente puedes renombrarlo desde aquí. Y vamos a darle algunos no saben nombre del proyecto basado en la propia empresa y así sucesivamente. Para que puedas acceder a todo eso ahí. Entonces eso es básicamente todo para este video. Y te voy a mostrar un inspector de propiedades y cómo cambia en la próxima serie de videos, una vez que empecemos a explorar todas estas diferentes herramientas, aquí mismo en el panel de Herramientas I'll. Entonces te veré ahí. 7. Formas: En este video, vamos a explorar algunas formas que están aquí en oferta dentro de Adobe XD. Entonces empecemos con la forma rectangular. Y ya viste que creé algunos de estos, pero déjame seguir adelante y borrar todo para que tengamos una bonita pizarra limpia. Por lo que puedes hacer click en él o puedes usar nuestro atajo para ello. Puedes hacer clic y arrastrar y crear lo que quieras aquí mismo usando esta herramienta de rectángulo, puedes hacer clic en la herramienta Seleccionar, que es v, como un atajo y puedes posicionarlo donde quieras, justo aquí. Y aquí. Como mencioné en un video anterior, inspector de propiedades cambia en función de lo que haya seleccionado de aquí. Entonces aquí tenemos algunas opciones y déjame guiarte por todas ellas. Y básicamente son bastante similares para todas estas formas. Y en realidad vamos a explorar y endeudar realmente rápidamente. Por lo que estoy sosteniendo turno a escala adecuadamente. Y si no mantienes turno, esto es lo que va a pasar. Por lo que se puede ver que no escala como debería. Y déjame usar esto para crear mi rectángulo y déjame usar esto para crear mi línea. Entonces básicamente así es como se va a ver. Una vez que creas todas estas diferentes formas, DEJA que les den rápidamente un color. Para que podamos darles un color, uno por uno simplemente haciendo clic aquí y luego eligiendo el color que quieras. Puedes usar un color sólido. Se puede utilizar gradiente lineal, que se puede ver cómo se ve eso. Y vamos a explicar eso un poco más tarde en este curso. Y se puede utilizar un gradientes radiales, que es básicamente de este círculo. Pero vamos con el color sólido. Y puedes usar este código hexadecimal, especialmente si tienes un código hexadecimal personalizado. Entonces usemos el mío tres, C6 ff, que es un bonito azul. Una vez que haga clic en entrar o regresar, se aplicará. Y luego puedes usar un descolorido para aplicar a todos tus objetos simplemente haciendo clic aquí y luego aquí. Y se puede ver que se aplica a todos ellos. Ahora, la otra función es el color del borde. Como puedes ver, está en todas estas formas pero difícil ahí mismo. Eliminará ese color de borde de todos ellos. Déjame seleccionar mi línea y dejar que la traiga de vuelta porque sólo tiene el color del borde. Y déjame aumentar el tamaño de esta frontera a, digamos diez, sólo para que puedas verlo un poco mejor. Y ahora paseemos por algunas de estas opciones aquí dentro de nuestro inspector de propiedades. Por lo que en la parte superior tenemos iconos de posicionamiento. Entonces aquí mismo lo puedes fijar a la parte superior, al centro así, al fondo, a la izquierda, al centro así, y a la derecha aquí tienes distribuida uniformemente. Por lo que si seleccionas todas, puedes distribuirlas así. Y puedes distribuirlos así. Entonces básicamente lo que elijas aquí mismo, va a mostrar dentro de tu inspector de propiedades a continuación que tenemos opción de repetición Grid. Por lo que una vez que seleccionas eso, tienes estas dos asas y puedes repetir a la derecha. Y también puedes repetir en la parte inferior. Entonces si tienes múltiples de estas formas, puedes posicionarlas así. Y es realmente extremadamente fácil de usar y con el que trabajar, sobre todo si tienes formas repetidas como cuadrículas de imagen, etcétera. Puedes desagruparlo y puedes trabajar uno por uno o puedes si no quieres hacerlo en, él tendría Control Z para tenerlos aún en el grupo. Y si selecciono este primero, y si escalo lo es, se pueden ver todos ellos están escalando. Se puede rondar aquí mismo entre ellos. Y puedes ajustar el espaciado entre ellos. Y también siempre puedes extender y tener tantos de ellos como quieras. Básicamente cualquier cambio que estés haciendo a este primero se va a aplicar a todos ellos. Entonces cambiemos rápidamente un color. Se puede ver que se actualiza en tiempo real. Y también puedes agregar todas estas características adicionales que vamos a explorar. Pero por ahora, vamos rápidamente a hacer clic en Desagrupar cuadrícula y déjame eliminarlas todas solo para que no te confundas con lo que está pasando. A continuación. Tenemos todas estas opciones diferentes. Entonces si alguna vez usas herramientas como Photoshop, Illustrator, o cualquier otra herramienta de diseño antes, básicamente lo que tienes aquí son agregar. Por lo que se va a sumar a la forma. Restar, intersectar, y finalmente excluir la superposición. Por lo que aquí mismo se muestra lo que hacen. Se puede jugar con estos diferentes ajustes, pero no vamos a hacer eso por el momento. Corremos rápidamente a través de todo. Así que ten ancho y altura y puedes ajustarlo manualmente y el obviamente cambia a medida que trabajas en ellos desde aquí, las tienes en el eje x e y. Puedes rotarlas sólidas, digamos 45 grados. Así se va a ver. Se puede voltear de izquierda a derecha, de arriba a abajo. Y aquí tenemos desplazamiento horizontal, tenemos desplazamiento vertical, y tenemos desplazamiento en todas las áreas, por lo que horizontal y vertical. Y estos tres van a tener mucho más sentido una vez que empecemos a diseñar. Pero básicamente, están ahí para ayudarte con tu proceso de diseño para acelerar aún más las cosas. Aquí tenemos posición fija al desplazarnos. Obviamente, si extiendes tu tablero del brazo, cual puedes hacer haciendo click aquí. Y luego una vez que dibujes a continuación, puedes ver esta línea de falla. Básicamente todo lo que veas aquí mismo va a ser visible en la pantalla. Pero por debajo de esta línea de falla es donde van a necesitar desplazarse sus reservas. Entonces vamos a deshacer eso. Volvamos atrás. Tienes redimensionamiento responsive y puedes usar esta función de redimensionamiento responsive simplemente haciendo clic aquí para habilitarla o desactivarla como quieras. Y vamos a llegar a redimensionar responsive más adelante en el curso cuando realmente terminemos nuestra página web y empecemos a diseñar para responsive. Pero básicamente tienes opciones auto y manual ahí. Y voy a rodar eso fue que empezamos a diseñar. Tienes tu deslizador de obesidad. Puedes colocarlo donde quieras o puedes usar atajos de teclado. Entonces por ejemplo, si uso cinco con auto completo 53%, irá al 30% o 0, irá al 100%. Debajo de eso tenemos modo de mezcla. Entonces si una posición estos dos aquí, y si hago clic en oscuro y si hacemos clic en pantalla, si elijo entre todos estos, como pueden ver, cambia. Para que puedas jugar con estos ajustes, pero en su mayoría se usan y se usan mejor con imágenes en lugar de con estas formas. Debajo de eso tenemos radio de esquina. Y puedes ajustar el radio de esquina o también, por ejemplo, 50, como puedes ver, redondea todos los lados. O si hace clic aquí. No obstante, tienes arriba a la izquierda, arriba a la derecha, abajo a la derecha e inferior a la izquierda, y puedes acceder a estos. Entonces, por ejemplo, usemos diez para este. Como puedes ver, este es Dan y todos los demás son 50. Debajo de que tenemos el Color de Relleno y ya te dije que puedes elegir entre estos diferentes autos aquí mismo, y esta es tu opacidad aquí. Y volvamos rápidamente a este mismo color. Por lo que simplemente haz clic ahí y podrás ver que estos son tus recolectores de color. Este es tu borde y obviamente puedes aumentar el grosor de tu frontera ya te mostró eso con la línea. Entonces digamos 20. Y se puede ver que esta frontera está a los 20. Se puede agregar sólidos de tablero si 50, se puede ver cómo se ve eso. Y todas estas diferentes opciones que básicamente se usan mejor con lápiz. Pero vamos a llegar a ella en un segundo en el video mental. Pero básicamente se puede flotar y ver cuáles son todos estos. Estos son tus trazos. Estas son tus gorras. Por lo que puedes hacer clic alrededor de la brecha y ver que estas líneas punteadas ya no son rectas, planas, redondeadas. Y finalmente tienes unidas aquí mismo. Entonces cómo quieres que se unan. Y por debajo de eso tenemos la sombra pero me quitó rápidamente frontera. Una vez que haces clic en sombra, lo tienes en el x, y, y más azul. Entonces x e y son hachas, y el azul es cuánto azul quieres en tu sombra. Entonces veamos 2020. Y se puede ver que va 20 abajo y 20 a la derecha. Y si quieres aumentar borroso porque por razón que sea esto es demasiado fuerte de una sombra. Usemos 50 por ejemplo. Y se puede ver cómo se ve eso. Entonces básicamente ahora este elemento parece como fluye hacia el aire medio. Para que puedas ajustar la sombra, puedes elegir su color. Al hacer esto, también puedes seleccionar esta misma sombra del color mismo y menor sea su obesidad como esta a cualquiera que quieras usar, 40 por ejemplo. Y ahora se puede ver que es una especie de forma pulsante aquí mismo. Por último, tenemos al abogado de antecedentes y esa opción se usa mejor con imágenes. Y te voy a mostrar eso un poco más tarde en el curso. Y por último, puedes hacer clic en Marcar para exportación como ya se mencionó, o puedes saltar aquí mismo, panel de dos capas. Lo que sea que se seleccione aquí está marcado aquí, y simplemente puede hacer clic aquí para enmascarar para Mark para exportación. Entonces eso es básicamente todo para las formas. Pasemos rápidamente por algunos factores diferenciadores entre todas estas diferentes formas. Entonces ya te mostré esto, éste. Tienes algunas opciones más aquí, pero básicamente todo lo demás es igual. Entonces lo que es esto es el recuento forense. Entonces cuántos trimestres quieres Actualmente teníamos tres. Si aumento esto a cinco, se puede ver que conseguimos estas formas diferentes. Si digo ocho, por ejemplo, se puede ver que conseguimos esto. Este es el radio de esquina y no se puede hacer eso. Para una semejanza aquí mismo para cambiar el radio de esquina para cada esquina, tienes que hacerlo para todas las esquinas. Entonces si elijo diez por ejemplo, o tal vez incluso algo más grande para que lo veas tan 40. Y se puede ver aquí que tenemos ahora estas esquinas redondeadas. Y lo que es esto, es la estrella arrasada aquí. Entonces, por ejemplo, si quiero pasar el rato aquí mismo, y para disminuir esto a 50, se puede ver que estamos consiguiendo algunas formas diferentes aquí mismo. Por lo que 45. Y si lo traigo de vuelta al 100, irá a la forma original y obviamente cambiará con lo que cambies aquí mismo. Entonces si voy a cinco, ahora cámbialo a 50, puedes ver que ahora conseguimos esta forma diferente. Por lo que todo depende de lo que estés seleccionando aquí. Si elijo tres, por ejemplo, y luego voy al 15, se puede ver que ahora tenemos este tipo de logotipo de Mercedes Benz. Entonces básicamente todo depende de lo que estés haciendo aquí mismo. Entonces ese es básicamente nuestro triángulo y voy a polígono herramienta para el círculo. Básicamente nada cambia aquí. Y obviamente puedes aumentarlo para disminuirlo. Y si quieres disminuirlo o aumentarlo de manera uniforme en todos los lados, puedes usar Shift y arrastrar una de las esquinas y aumentará en ese tamaño. Si quieres aumentarlo uniformemente en todos los lados, puedes mantener presionado Shift old y hacer clic izquierdo en una de las esquinas. Y puedes ver que aumenta y disminuye proporcionalmente porque estás usando ese Charcot. Por último, para la línea, se puede ver que sólo tenemos la frontera. No tenemos el color de relleno como lo hacemos con estos. Y básicamente puedes hacer todas las mismas cosas. Entonces déjame mostrarte gorras. Se puede ver que ahora es cuadrado. Pero si selecciono esta gorra redonda, se puede ver que ahora tenemos esta redondez aquí. Y no se puede extender, no se puede cambiar. Por lo que no se puede cambiar el radio de esquina como no se puede aquí mismo. Pero en realidad se puede hacer es simplemente aumentar el tamaño de este borde a 50, por ejemplo. Y se puede ver que ahora cambió de tamaño. Esto básicamente si las puertas son tus formas y creo que lo cubrí todo, cuando se trata de estas diferentes formas, puedes jugar con ellas. Puedes hacer todo tipo de cosas diferentes y puedes usarlas para el propósito que quieras. Déjame mostrarte rápidamente un ejemplo rápido. Entonces digamos que por lo que sea, quieres agregar imágenes a tus diseños. Entonces déjame crecer rápidamente y encontrar una imágenes. Permítanme usar éste por ejemplo. Simplemente puedes arrastrarlo y soltarlo. Y puedes ver que una vez que lo haces, resalta tus formas. Y una vez que lo sueltes, se va a poblar. Y Adobe XD va a hacer todo lo posible para encontrar el centro de tu imagen. Pero si haces doble clic en el interior, puedes ver cómo se ve eso. Entonces si Adele hace clic una vez más y extiende mi imagen, ahora, este va a ser el punto focal de este borde para que puedas posicionarlo donde quieras. Se puede ver cómo se ve eso. Si obviamente quieres actualizar tu sombra, puedes hacerlo también. Y déjame bajar mucho la opacidad. Déjame ver, por ejemplo, puedo usar cinco y en realidad usar cinco para este también. Y ahora se puede ver que tenemos la imagen del software. Obviamente puedes cambiar el radio de esquina o Vamos con diez en este. Y ahora tienes esta bonita imagen aquí. Entonces esas son tus formas básicamente en el siguiente video vamos a cubrir parental, qué puede hacer por ti y tu proyecto. Y allí te veré. 8. Herramienta Pluma: De acuerdo, así que pasemos ahora al lápiz. Y mental se encuentra justo aquí, justo debajo de todas estas herramientas de forma. Y para acceder al lápiz, puedes usar un atajo b, como puedes ver aquí mismo. Simplemente haga clic en él. Y lo que la herramienta Pluma hace básicamente, es que puedes crear todas estas formas básicas. Ya te lo han dicho y te explican también. Y puedes acceder a todos los mismos ajustes aquí mismo en el Inspector de Propiedades. Pero lo que también hace es que se pueden crear formas complejas usando lo mental. Y cómo funciona es básicamente que tienes estos puntos de anclaje. Entonces lo que sea que estés haciendo y dondequiera que estés haciendo clic, como puedes ver, XD te está mostrando guías para que tus líneas puedan ser rectas. Por ejemplo, si eso es algo que quieres. Y una vez que cierras la parte simplemente haciendo clic donde lo dejaste, donde empiezas. Y en la primera es en realidad la última para que cierres el camino. Lo que puedes hacer en realidad es flotar. Y como puedes ver, te da la opción al hacer clic para agregar más de estos puntos de anclaje adicionales. Por lo que realmente puedes crear formas complejas a partir de estas formas básicas. Entonces como puedes ver, hemos empezado con solo la herramienta básica de rectángulo y puedes usarla aquí mismo con un lápiz. Puedes agregar todas estas funcionalidades adicionales a tus formas. Entonces, ¿cómo puedes hacer eso? Donde hay dos formas de hacerlo, simplemente puede hacer clic en cualquiera de estos puntos de anclaje y extenderlos. Y como se puede ver, se está moviendo de una suerte de manera lineal. Entonces como puedes ver, estas líneas son realmente rectas y estás obteniendo todos estos ángulos rectos. Y si estás sosteniendo Shift mientras lo estás haciendo, se ajustará a la posición original donde lo dejaste. El otro camino es simplemente hacer doble clic en este punto de anclaje. Y ahora una vez que lo extiendes, puedes ver que esta línea ahora está curvada. Y puedes cambiar el ángulo de esta curvatura simplemente usando estos dos mangos si acercamos un poco más. Por lo que una vez que haces clic en ellos, puedes ver que ahora estás obteniendo todas estas diferentes formas complejas. Y si entras, irá a la posición original así. Y si sales todo el camino, puedes ver que esta curvatura es cada vez más grande y más fuerte. También puedes usar shift para ajustar a diferentes ángulos, como un C justo aquí. Entonces, dependiendo del tipo de forma que quieras, también puedes llamar a la tecla Mayús mientras la estás arrastrando, para arrastrarla directamente. Y puedes acceder a todos estos ajustes diferentes simplemente usando estos puntos de anclaje y estos mangos así. Entonces como dije, se puede hacer esto con cualquiera de estos. Y si quieres eliminar ese punto, simplemente puedes hacer click en él aquí para eliminar, y se borrará ese punto. Entonces ahora nos acaba de quedar con solo uno de estos. Y se puede ver que ahora estos dos están consiguiendo estos mangos para que podamos extender la curvatura de nuestra forma y cambiar su posición como queramos. Si queremos volver, simplemente puede hacer doble clic en este punto. Haga doble clic en este punto. Y se puede ver que ahora tenemos una recta, pero como solíamos hacerlo. Entonces eso es básicamente todo para el Pentaho. Pero permítanme ahora seguir adelante y mostrarles cómo podemos crear algunas formas más complejas y de fuentes. Entonces digamos que queremos aislar esta parte de nuestro informe. Entonces cómo podemos hacer eso es simplemente, vamos a hacer clic, luego hacer clic y mantener pulsado. Como puedes ver, puedes cambiar este ángulo como quieras. Y digamos que quiero dar click en algún lugar por aquí. Entonces puedo hacer clic afuera y cerrar mi forma. Ahora que estoy, mi forma está aquí, simplemente puedo usar esta herramienta de movimiento y simplemente seleccionarla, o puedes seleccionarla así. Por lo tanto, basta con hacer clic y arrastrar para seleccionarlo. Y ahora en el Inspector de Propiedades, se puede ver que tenemos exactamente la misma configuración que tenemos con todas nuestras otras formas básicas. Pero ahora podemos acceder a ellos para esta forma más compleja. Entonces lo que podemos hacer es, por ejemplo, agregar un color de relleno. Usemos este color. Podemos quitar la frontera. Podemos, por ejemplo, incluye sombra y todo lo que te mostré para todas estas formas básicas. Mc Ahora tenemos esta forma más compleja. Y debido a que aislamos solo esta parte de nuestro diseño cuando floto, lo puedes ver y puedes acceder a ella. Y si quieres cambiarlo es poner doble clic en tu forma. Te mostrará todos tus puntos de anclaje y luego podrás hacer clic y por ejemplo, cambiar esta forma para que sea algo así. No lo sé, tal vez esto es algo que buscas y puedes ver cómo se ve eso. Entonces esa es tu herramienta de bolígrafo en pocas palabras. Y como se puede ver, se puede acceder a todas estas formas básicas, especialmente a ésta. Y si recuerdas del video anterior, puedes cambiarlo en el conteo de esquinas. Podrías cambiar el radio de esquina y puedes cambiar esta dirade que relación para acceder a todas estas diferentes formas. Pero si quieres algo completamente personalizado, entonces un uso realmente recomendado parental porque como viste, realmente no hay límite a lo que puedes crear. La gente está usando esta herramienta de lápiz para crear, por ejemplo, iconos dentro de Adobe XD. Lo están usando para crear ilustraciones en herramientas como ilustrador. Lo están usando para cortar diferentes formas en Photoshop, por ejemplo. Por lo que realmente no hay límite a tu imaginación y puedes hacer lo que quieras con el lápiz. En el siguiente video, vamos a explorar al lado. Entonces te veré ahí. 9. Herramienta de texto: En este video, vamos a explorar la herramienta de texto, y aquí está, y el atajo es t. Y antes de hacerlo, déjame seguir adelante y quitar esta forma mental solo para que tengamos un poco más de espacio con el que trabajar. Y déjame mover esto aquí, por ejemplo, sólo para que tenga este espacio en blanco aquí. Para que puedas hacer clic en tu herramienta de texto. Y hay dos formas de incluir texto en Adobe XD. En primer lugar, hay puntos, textos y lo que sea que escribamos aquí mismo. Entonces, por ejemplo, este es nuestro texto. Y cuando haga clic afuera, se completará eso. Entonces este es nuestro texto puntual, y también hay uno más textos que se llama textos de área. Y para incluir eso, tienes que seleccionar el área en la que quieres que aparezca tu texto. Entonces digamos que esta es nuestra zona una vez que empieces a escribir. Por lo que esta es nuestra área de texto. Y si seguimos escribiendo abajo , continuará aquí. Y déjenme mostrarles rápidamente eso también. Entonces si selecciono ese control de golpe C, control V, control V, control V. Y se puede ver que se está envolviendo en esta área porque esta es nuestra área de texto. Pero si lo hago con este texto, y si falta un montón barra espaciadora, se puede ver que simplemente va a la derecha, a la derecha, a derecha, a la derecha, a todo el camino, a la derecha. Y en realidad no pasa nada. Entonces sea cual sea tu área, puedes apuntar tus textos para estar ahí. Pero si solo estás usando este texto puntero, va donde quieras. Entonces este texto es realmente útil para, digamos, títulos, suelo, digamos H1, H2, H3, y así sucesivamente. Subtítulos y texto que no, o al menos se envuelve sólo un poquito. Si bien este texto es perfecto para párrafos y grandes áreas de texto, descripciones de su producto, características del producto, etcétera. Entonces lo haré, realmente recomendaría que ustedes usen los textos como Dat, especialmente en el diseño de UI y UX porque estas dos herramientas realmente van de la mano entre sí. Por lo que realmente les recomendaría chicos que los revisen y los exploraran por ustedes mismos. Entonces, ahora sumémonos profundamente en esto aquí mismo. Por lo que puedes cambiar muchas de las propiedades aquí en el inspector de propiedades para el texto. Y las principales son que se puede seleccionar la fuente en sí. Entonces si decides usar una familia de fuentes, por ejemplo, Open Science, que es una fuente gratuita de Google, y también puedes encontrarla de forma gratuita en fuentes Adobe. Por lo que elegí Open stands para esto. Y déjenme elegir Open es también para esto, así. Y ahora se puede ver, cuando hago clic, se puede ver que es sentido abierto. Pero por ejemplo, quiero cambiar este para que sea un poco más grande. Entonces elijamos 26, por ejemplo, presione Entrar. Y se puede ver que ahora el, hay una diferenciación entre estos dos. También usaré negrita para este. Al igual que esto. Entonces dependiendo de cuál estés usando, tendrás varios pesos aquí mismo. Para algunas fuentes, tienes 12, tal vez tres para algunas fuentes como esta que ves, tienes muchas de ellas de la luz. Todo el camino hacia abajo a extra audaz, cursiva. Para que puedas ver cómo se ve eso. También puedes combinar texto y realmente depende de ti y de tu diseño. Pero generalmente no recomiendo usar más de dos familias de fuentes para tus diseños porque entonces tu diseño simplemente se veía demasiado disperso y demasiado diferente el uno del otro. Lo que también tenemos aquí mismo, nuestro espaciado de personajes. Entonces este es el espaciado entre cada uno de los personajes. Y si hago clic justo aquí, y por ejemplo, tipografía, No. Entonces vamos a ver. A lo mejor puedo escribir en 50. Se puede ver que el espaciado entre cada personaje es simplemente más diferente. interlineado es básicamente espaciado entre cada una de estas Alianza de textos. Entonces esta es tu línea uno. Esta es tu línea para, si hago clic ahí y aumento esto y tal vez, vamos a ver, tal vez pueda escribir en 90 algo stream. Se puede ver cómo funciona eso. Y lo que esto es, es espaciado de párrafos. Entonces si tomo 50 por ejemplo, no se puede ver porque este es el párrafo con sólo dos líneas de texto. Entonces realmente tendré que tener más líneas de texto y luego usará ese espaciado entre cada línea de texto. Lo que tenemos a continuación que son herramientas de alineación. Entonces, por ejemplo, digamos que este es nuestro texto de cabecera. Entonces H uno, actualmente está a la izquierda alineada y se puede ver cómo se ve eso. Si escribo en centro, se puede ver que nada cambia. Pero ahora una vez que empiezo a escribir, se puede ver que va desde el centro, la izquierda, y la derecha. Pero si elegimos alinear a la izquierda, se puede ver que se queda clavado a la izquierda. Y también si elegimos alineados a la derecha, se puede ver que se va a quedar clavado a la derecha. Al igual que así. Por último, déjame cambiarlo de nuevo a aquí y déjame hacer clic en la tecla Mayús y alinearla aquí. Lo que tenemos aquí son textos puntuales y textos de área vieron corte. Explique eso a usted. Entonces este es nuestro punto x, este es nuestro texto de área, pero se puede cambiar eso en cualquier momento. Entonces por ejemplo, puedo seleccionar esta área, clic aquí, y ahora la convertí a textos puntuales. Entonces es exactamente lo mismo como éste y viceversa. Se puede hacer lo mismo por éste. Tan solo tienes que extender tu área para tus etiquetas. Como se puede ver, se encoge y recorta de nuevo a estas dos líneas de texto. Pero obviamente puedo extenderme a donde quiera entrar más texto. Entonces eso es básicamente todo para esto. Y en la siguiente parte se puede ver mayúsculas. Entonces si hago clic aquí y hago clic en mayúsculas, convierte todos mis personajes en mayúsculas o minúsculas, título en mayúsculas. Por lo que la primera letra de cada palabra es un superíndice de título. Por lo que realmente no se puede ver aquí mismo, pero déjame añadir un número a, por ejemplo. Y ahora agregado aquí se puede ver que va justo aquí. Tenemos subíndice, así que lo pondrá justo aquí. Si seleccionamos aireación y hacemos click justo aquí, puedes ver que tenemos esto subyacente. Y finalmente tenemos tachado también. Para que veas que tienes muchas opciones diferentes. Aquí mismo en Adobe XD. No hay futuro Rich, por ejemplo, como las aplicaciones. Veamos palabra por ejemplo. Porque Microsoft Word está diseñado para escribir desde la palabra go, mientras que Adobe XD está diseñado para el diseño de UI y UX desde la palabra go. Por lo tanto, tienes muchas de estas opciones, pero no son realmente ricas en futuro, como Word por ejemplo, o Google Docs o algo así. O Adobe tiene su propio software para impresión. Por lo que no son borde futuro así. Pero puedes conseguir muchas de estas opciones como acabas ver a continuación que tenemos todas las cosas habituales como lo hacemos en el Inspector de Propiedades. Entonces tenemos apariencia. Se puede bajar o aumentar la obesidad. Tenemos los modos de mezcla que te mostré con esta imagen. Tenemos el color de relleno, que es el color de relleno para nuestro texto. También tenemos el color del borde. Entonces cambiemos el color de relleno a algo un poco más oscuro para que diferencie entre estos dos. Contamos con el color del agua para que puedas agregar tu borde si quieres. Vamos con algo extremo. Se puede ver cómo se ve eso. Pero déjame deshacer eso. Y Jaime frontera. Tienes la sombra para que puedas añadir tu sombra a tus textos en say, 55 y 20. Se puede ver cómo funciona eso. Y finalmente tenemos el desenfoque de fondo para que puedas usar su característica como puedes en cualquiera de estas otras herramientas. Entonces eso es básicamente todo para el texto. Y vas a ver a lo largo de este curso cómo vamos a utilizar el texto, Javier lo va a adaptar y cómo lo vamos a utilizar en, por ejemplo, algunas de estas. Entonces lo vamos a usar en grupos de desplazamiento y lo vamos a usar en pilas y también te mostraremos qué pilas son más adelante en el curso. Y vas a ver lo increíble que es la función de muerte para usar en Adobe XD. En el siguiente video, voy a correr un poco más por nuestros tableros y mostrarte características adicionales que son los tableros tienen un osteodermo. 10. Tableros de trabajo: De acuerdo, así que ahora vamos a correr a través de algunas características adicionales que tienen los tableros. Entonces como ya te mostré, a es la palabra clave para en los aeropuertos, también puedes hacer clic aquí. Y para añadir un aeropuerto diferente, puedes dar click aquí mismo. Ahora bien, si selecciono mi herramienta y voy a dar clic aquí para cambiarla, por ejemplo, llamémosla solo ejemplo. Y si seleccioné, se puede ver que aquí tenemos diferentes características. Por lo que puedes rotarlo para que sea un paisaje o para que sea horizontal. Se puede cambiar su tamaño. Entonces digamos 400 por 500. Por lo que puedes agregar todas estas características adicionales como puedes cuando haces clic en el hogar e ir al tamaño personalizado justo aquí. Entonces puedes hacer todo eso aquí. Puedes hacer recites responsivos tan pronto como crees un aeropuerto. Para que puedas empezar a crear diseños responsivos desde la palabra go. Se puede incluir el desplazamiento, por lo que vertical o ninguno. O si me cambio aquí mismo, se puede ver que todavía me da cosquillas del mundo porque creé este tablero de arte en esta relación de aspecto. Entonces éste que es el original. Y si creo esto hasta que esto, entonces me va a dar el pergamino horizontal y esa habilidad, altura de ventana gráfica es ésta. Entonces si recuerdas de los videos anteriores, si amplías esto, como dije, esta es la línea de falla y todo por encima del pliegue será visible de inmediato mientras los usuarios tienen que desplazarse hacia abajo para poder ver el contenido que está justo por debajo de esta línea de falla. Entonces esa es básicamente la altura de tu ventana de visión. Si extendí, se puede ver que va, se queda en 812. Pero como puedes ver ahora tenemos esta línea, que es básicamente la línea de falla para el teléfono. Entonces digamos que esto tiene la pantalla de formulario y los usuarios tienen que desplazarse hacia abajo para ver el cuántico debajo de esta línea de falla. Entonces, básicamente, los teléfonos móviles también lo tienen. Debajo de eso, tenemos a Phil y básicamente tienes este relleno colores igual que para todas estas otras formas. Por lo que tienes color sólido, tienes gradiente lineal y ayudas al gradiente radial. También tienes el deslizador de opacidad y puedes elegir cualquiera de estos colores e incluir también el código hexadecimal. Lo que no explicaron sobre los colores es esto. Para que puedas agregar diferentes muestras. Entonces digamos que realmente me gusta este color. Puedo dar click en él. Puedo dar click aquí mismo y lo agregará a mi muestra. Si voy justo aquí a mi panel de ácidos, se puede ver que no está ahí, es sólo en mi panel de muestreos. Entonces eso es, uh, por ejemplo, si quieres cambiar algunos de estos objetos por separado y estás usando los mismos colores, pero no quieres aplicarlos para escuchar. Entonces si quiero, simplemente puedo dar click justo aquí y se aplicará allí. Y si hago clic derecho, déjame seleccionar todos mis objetos. Haga clic aquí. Y si yo, por ejemplo, clic derecho y voy a editar y editar el color aquí, se puede ver que se actualiza en tiempo real. Pero si hago clic aquí y luego aquí mismo y cambio mi color, simplemente cambiará el color de este objeto solo. Entonces, finalmente, lo que también tenemos aquí mismo en nuestros aeropuertos inspector de propiedades es la grilla. Y te mostraré la cuadrícula aquí mismo porque esto representa el tamaño básico de la página Web. Entonces si hago click ahí mismo, tenemos el diseño y tenemos cuadrado. Entonces bajo el diseño no ves nada porque tengo que seleccionarlo. Pero si selecciono mi cuadrado, puedes ver que estamos teniendo todos estos cuadrados y estos son geniales, sobre todo si estás usando sistemas de cuadrícula. Entonces por ejemplo, sistema de cuadrícula 8 o un sistema de cuadrícula de 16 puntos o algo así, donde realmente tienes estos tamaños cuadrados. Entonces si estás usando 8, obviamente usarás el tamaño de ocho para cada una de estas casillas. Pero si utilizamos un layout, se puede ver que ahora tenemos el diseño de columnas. Entonces por ejemplo, tenemos 12 columnas para este diseño. A lo mejor queremos cambiarlo a ocho. Se puede ver que ahora tenemos ocho columnas. Ancho de canalón es básicamente este espaciado entre cada una de tus columnas. Y el ingenio tranquilo es obviamente el ancho de cada una de estas columnas. Ahora, puedes cambiar todas estas propiedades aquí, y estos son tus márgenes. Por lo que los márgenes son estos espacios en blanco a la izquierda y a la derecha. Entonces básicamente este espacio entre los bordes de tu rpart y tu propio diseño de cuadrícula, y tus propias columnas. Y también puedes cambiar eso aquí. Por lo que tienes diferentes márgenes para la parte superior, derecha, inferior e izquierda. Entonces si quieres cambiarlos todos, aquí mismo, así de izquierda y derecha, básicamente, puedes hacerlo simplemente seleccionando esto y eligiendo 120, por ejemplo. Pero si Adobe XD no puede calcularlo por sí mismo, entonces te va a dar todas estas propiedades diferentes aquí. Pero también se puede hacer es, por ejemplo, aumentar el ancho de la canaleta a 40 relativo. Y se puede ver que ahora tenemos mucho más espacio entre todas nuestras columnas. El ancho de la columna es, vamos a ver, 120, pero va a bajar el ancho de la canaleta a 18. Por lo que realmente tienes que jugar con todos estos ajustes diferentes para lograr el resultado perfecto que quieras. Y básicamente, eso es todo para estos son tableros. De verdad espero que veas lo fácil que es trabajar con ellos. Y una última cosa que no mencioné es si esto es demasiado distrayente para que trabajes. Por lo que se puede ver que todos estos elementos ahora se están ajustando a nuestras rejillas muy bien. Por lo que realmente puedes contarlos y colocarlos donde quieras en tu página. Entonces si esto realmente distrae, puedes seleccionar tu RPL. Puedes hacer click aquí y puedes bajar la opacidad de tu cuadrícula a algo como esto. Por lo que todavía se va a chasquear, como se puede ver a todas estas diferentes posiciones. Pero ahora lo puedes ver mucho mejor. También puedes cambiar su color si eso es algo que quieres. Por lo que aumenta sólo un poco, cambia el color a rojo y ahora disminuye la obesidad todo el camino a algo así para que puedas verlo un poco mejor. realmente puedas jugar con todos estos ajustes diferentes. Y puedes entrar, en profundidad para encontrar algo que vaya a funcionar para ti y tu defecto general. 11. Guías: Permítanme mostrarles ahora una característica más. Cobramos guías. Y para ellos, simplificaré man grid layout dicho posicion esta aqui mismo. Y los chicos están ubicados en la parte superior de tu aeropuerto así como a la izquierda de tu teclado. Entonces si se ciernen aquí mismo, se puede ver que se puede extruir una guía desde aquí y desde aquí. Entonces digamos que quiero incluir guías en la parte superior y en la parte inferior de mi imagen. Entonces simplemente puedes cómo están aquí mismo, luego haz clic y coloca la guía y se enmarcará en posición aquí. Y como no puedes hacer eso desde el lado inferior de tu aeropuerto, también tienes que hacerlo desde la parte superior. puedas hacer eso para arriba, abajo, izquierda y derecha. Y por qué esto es útil si por ejemplo, en alguna zona de tu rpart, tus cualidades de posicionamiento elementos. Entonces digamos arriba a la izquierda, arriba a la derecha, lo que sea. Puedes posicionar estos elementos para que se acople a una cuadrícula como esta. Y puedes posicionarlos para que estén donde quieras que estén. Y se partirán muy bien a tus guías. Entonces si quieres usar guías, puedes, si quieres usar grid, puedes hacerlo también. Y también son útiles las guías. Por ejemplo, podemos usar este diseño de cuadrícula para el diseño vertical, pero no tenemos nada para el ritmo horizontal de nuestro diseño. Entonces para hacer eso, digamos que queremos tener un desconocido. Veamos 18 tal vez. O Vayamos con 60. Y queremos tener este ritmo vertical en todas partes. Entonces queremos tener 60 aquí, 60 aquí, 60 aquí. Si no quieres medir este espaciado entre cada uno de tus elementos. Entonces así, puedes incluir diferentes rejillas a 60606060 solo para mantener ese ritmo horizontal, si ese algo que quieres, realmente depende de ti y de cómo te gusta diseñar usando Adobe XD. Pero como dije, estas rejillas son realmente útiles y para sacarlas de tu camino y para eliminarlas, simplemente haz clic en ellas y arrástralas afuera, básicamente de la misma manera que las metes. Entonces esas son tus cuadrículas en Adobe XD y esas son tus guías en Adobe XD también. Una cosa más. Si, por ejemplo, digamos que quiero secar esto aquí. Quieres copiar esto en Guía a esto, nuestros puertos para que chico Control C haga clic aquí mismo, pulsa Control V. Y déjame reducir el tamaño de mi forma. Digamos que quiero copiar esta guía. Haga clic derecho. Se puede ir a guías, copiar chicos. Haga clic aquí, haga clic derecho en guías, guías basadas en finales. Esto obviamente funcionará mejor si lo estás, los aeropuertos son exactamente del mismo tamaño. Entonces digamos que estás usando, esta es la página de inicio y tal vez tenemos blog sobre precios de servicios y así sucesivamente. Y todas esas páginas son exactamente las mismas dimensiones. Por lo que esta guía, una vez que la copie y pegue a la próxima vez, se basará exactamente en la misma ubicación donde está justo aquí. Entonces eso es realmente útil si por ejemplo, quieres alinear algunas cosas a la izquierda, a la derecha, al centro de lo que quieras hacer con estos chicos. Esa opción es extremadamente útil, N extremadamente potente. 12. Repetición de la cuadrícula: Ahora vamos a cavar un poco más profundo en la cuadrícula de repetición porque la función en sí es realmente importante y extremadamente poderosa. Así que vamos a dar clic aquí y eliminar esto. Y vamos a crear un diseño rápido a partir de aquí. Por lo que dos panned izquierda y derecha. Solo estoy usando mi barra espaciadora y mi click izquierdo del ratón. Entonces en nuclear imagen así, por ejemplo, me posicionaré en el centro. Voy a quitar la frontera y sólo para verlo por aquí legalmente. Entonces le pegaré a mi Tiki por mi textual y le daré clic a algo. Por ejemplo, como Jinete Número uno. Llamémoslo así dice abierto pero sigue siendo 26. Usemos algo así como 80. Y lo posicionaré. El gritar puede cambiar la tecla, y tendré 20. De esta manera, hit control D Una vez más. Envío 12, y usaré 14 Para este. En lugar de audaz, iré con regular. Así que solo asegúrate de que estamos 20 en todas partes en lugar de texto puntual, usaremos textos de área y extenderemos a los bordes de mi imagen así. Y también seguiré adelante y usaré mi plug-in. Entonces usaré el mismo plugin como te mostré. Entonces Lorem Ipsum, así que si quieres instalarlo, da click justo aquí, escribe lorem ipsum, instálalo y luego haz clic en sentir, reemplaza todo el texto. Voy a usar este, pero puedes usar cualquiera de estos que quieras. Haga clic en insertar texto y se insertará aquí mismo. Tengamos, por ejemplo, tres líneas de texto como esta. Y también puedes extender todo esto hacia abajo y luego reducir el tamaño de tu área para tus textos. Y obviamente cambiemos el color para que puedas usar este color solo para que sea un poco más claro. Y en lugar de regular, también puedes usar la luz si eso es algo que quieres y si eso te apela. Ahora para las imágenes, no me gusta que esto sea así. Entonces tal vez pueda usar diez si eso es demasiado, tal vez un cinco solo para aumentar algún radio de esquina. Ahora para usar la cuadrícula de repetición, simplemente selecciona todos tus elementos, pulsa la cuadrícula de repetición. Y lo que puedes hacer es simplemente extender esto hacia abajo y puedes ver lo poderosa e importante que es la grilla de repetición. Ahora para mostrarles que aún más, tengo algunas de estas imágenes aquí mismo. Entonces lo arrastraré y lo dejaré caer dentro de mi diseño. Por lo que simplemente arrástrelo y soltarlo sobre el primero. Entonces solo el primero y déjalo ir. Y se puede ver cómo funciona eso así que es extremadamente fácil, extremadamente poderoso de hacer. Entonces lo que también puedo hacer es crear mi documento de texto, y simplemente puedo usar un documento de texto, que es sólo un documento básico. Se puede ver que estoy usando bloc de notas aquí. Entonces en lugar de Ryder en uno o ya sea para escribir o tres, tal vez podamos llamarlo una anomalía, James May, Tyler. Y por ejemplo, llamemos a éste elegir la moral o lo que sea. Y se puede cerrar eso. Y de igual manera en arrastrar y soltar ese nombre del documento sobre el texto mismo. Y se puede ver que se llena de texto. Por lo que esto es algo extremadamente importante y poderoso que hacer si queremos llegar a datos ricos en tus diseños. realmente puedas jugar con cómo se va a quedar todo este texto. Obviamente, se puede hacer lo mismo por todos estos. Entonces en lugar de solo este lorem ipsum básico llano, digamos que puedes incluir algunos textos reales como por ejemplo, tienes al hombre un viejo portafolio, o en información real sobre todas estas personas. Puedes copiar y pegar esa información para crear esta rica y diseños. Una vez más, repetiríamos las rejillas. Lo que podemos hacer es si cambiamos el primero. Entonces digamos que queremos agregar una sombra. Se puede ver que va a agregar el mismo castillo a todos estos otros, sólidos, digamos 5515. Y si hago clic afuera, puedes ver que corta justo aquí, pero lo extiendo hasta aquí. Ahora, tenemos estos bonitos en gran sombra. Por lo que también podemos hacer es cambiar el color. Entonces digamos que haga clic aquí, haga clic en mi muestra. Se puede ver que actualiza área en tiempo real. Y eso es básicamente todo. Cualquier cosa que quieras hacer con tu grilla de repetición. Sólo recuerda que estás editando el primero. No se puede agregar el segundo. Entonces si quiero volver a posicionar esta imagen, simplemente puedo hacer doble clic y volver a posicionarla aquí. También puedo hacer esto con esta primera imagen, sólido C aquí. Y esta última imagen puede estar en algún lugar por aquí. Para que veas que puedes cambiar todos estos detalles de forma independiente. Por último, si quieres aumentar el tamaño entre tus elementos en agarre europeo, simplemente repite rejilla más rápido, cursor y luego podrás extender donde todos estos elementos e ir. Y por ejemplo, si quieres previsualizar cómo va a quedar esta aplicación, puedes hacer click aquí donde dice vista previa de escritorio. Y también puedes hacer Mobile Preview vía cable USB. Si sigues adelante e instalas la aplicación Adobe XD en tu iPhone o en tu dispositivo Android. Eso también lo puedes hacer para ver si estás, por ejemplo, diseñando para el iPhone ten y tienes iPhone diez en mano y viceversa con todos estos diferentes tamaños de Android. Para que puedas hacer un reto de vista previa en vivo y ver directamente cómo se verá una vez que esté codificado y terminado dentro de tu dispositivo móvil. Pero si solo quieres previsualizarlo para la web, puedes hacer click aquí mismo. Esta ventana adicional va a aparecer. Y cuando me desplace hacia abajo, se puede ver cómo se ve eso. Pero como pueden ver, porque tenemos que habilitar que esta sea área desplazable. Entonces si hago clic ahí mismo, use, se puede ver que tenemos posición fija whens gateando, pero tengo que extender mi tabla para poder desplazarse. Entonces si lo sigo extendiendo, se puede ver que esta cuadrícula repetida nos está mostrando una lectura, pero sólo quiero ver estos tres. Por lo que 123. Y obviamente puedes tener tantos como quieras, pero me extenderé solo hasta aquí. Y ahora si hacemos clic en mi vista previa, puedo desplazarme hacia abajo para ver lo que quiera ver. Para que veas que extendí mi aeropuerto hasta aquí y esa es mi área desplazable. Si queremos extenderlo todo el camino hacia abajo en agregar más elementos adicionales. Y entonces podré desplazarme más hacia abajo y ver toda esa información adicional. Entonces eso es básicamente todo para tu grilla de repetición. Por último, si quieres desagrupar cuadrícula, también puedes hacerlo. Y volver a un panel Capas. Se puede ver que ahora tenemos tres grupos. Entonces este es el primer grupo, este es el segundo, este es el tercero. Y me gusta pedirlos así, así que no me gusta al revés. Y dentro de tu grupo puedes ver que tienes todos estos diferentes elementos y todas estas cosas de diseño diferentes que incluyste en tus diseños. Por lo que es realmente fácil trabajar con. Es realmente divertido. Y una vez que te acostumbras a él, será extremadamente útil tener función de cuadrícula distribuida en tu proceso de diseño. 13. Descripción del proceso de diseño de diseño: De acuerdo, ahora que estás familiarizado con Adobe XD, ahora que sabes lo que pueden hacer las herramientas, déjame presentarte rápidamente el proyecto en el que vamos a estar trabajando en inducir puntajes del que vas a aprender todos estos técnicas avanzadas que Adobe XD tiene para ofrecer. Entonces lo primero es lo primero, vamos a empezar con el resumen de diseño. Y siempre estoy recomendando a mis alumnos y toda la gente que me está preguntando por dónde empezar con el proyecto. Siempre es el breve de diseño. Porque a partir del resumen de diseño, siempre se puede entender qué quiere el cliente, cuál es el presupuesto, cuál es la línea de tiempo. ¿ Estás haciendo el rediseño? ¿ Estás haciendo la revisión completa? ¿ Estás haciendo el trabajo desde cero, lo que realmente estás haciendo en este proyecto. Por lo que siempre estoy recomendando a estudiantes y personas que son interesantes en diseño que comiencen con el breve de diseño, porque eso, en mi opinión, es lo fundamental de cualquier proyecto. Y el breve de diseño puede básicamente hacer o romper el proyecto. Porque si no comienzas con el breve de diseño de alta calidad, que necesitas hacer tú mismo, entonces todo el proyecto puede desmoronarse de inmediato, básicamente porque el cliente puede entonces pedir algunos cambios los cuales fueron no acordados en el informe de diseño. Pueden pedir algunas cosas con las que no estás familiarizado. Entonces hay que subir a algunas otras personas para que te ayuden con eso porque no sabes cómo lidiar con esos problemas y no sabes cómo solucionarlos. Por lo que el diseño breve, como dije, es esencial básicamente para cualquier proyecto de diseño. A continuación, vamos a pasar a los wireframes de papel. Ahora puedes hacer wireframes directamente en Adobe XD, que vamos a hacer también. Pero realmente me gusta empezar con el wireframe de papel porque me da esta libertad de usar solo lápiz y papel. Y todos tienen bolígrafo y papel tirados en su casa. Por lo que básicamente puedes empezar con solo bolígrafo y papel y puedes crear estos wireframes desde cero. Después del papel de wireframes viene el proceso de wireframing en Adobe XD. Básicamente lo que vamos a hacer es que vamos a tomar esos wireframes y vamos a ponerlos dentro de Adobe XD. Y entonces vamos a empezar por simplemente recrear en Adobe XD lo que retirar en pedazo de papel. Una vez más, si crees que este paso es innecesario, realmente te insto a ver todo el proceso y solo a ver la parte pensante detrás de los wireframes de papel. Porque como dije, es mucho más fácil crear estos wireframes en solo un pedazo de papel. Puedes usar fácilmente cualquier prohibición, cualquier papel que quieras, o podrías tener bordes, sacar algunas ideas de tu cabeza hacia abajo en un pedazo de papel. Y una vez que estés en Adobe XD, entonces puedes, por ejemplo, hacer puertas, alambradas solo un poco más completas, solo un poco más pulidas y terminadas. Entonces puedes presentar esos wireframes al cliente, lo cual obviamente recomiendo porque Adobe XD tiene estas grandes opciones y funcionalidades para compartir. Por lo que su cliente puede dejar comentarios directamente en esos wireframes antes incluso de pasar al proceso de diseño. Querer en medio básicamente es que vamos a hacer la arquitectura del sitio web. Simplemente vamos a enumerar algunas páginas básicas y vamos a enlazar y ver vetadas esas páginas van en nuestro sitio web. Entonces, básicamente, si la gente hace clic en la página de inicio, hay en la página de inicio. dónde pueden ir a partir de ahí y a partir de ahí si hacen clic en páginas adicionales, por ejemplo, sobre nosotros página, ¿dónde los está llevando esa página? Dónde necesitan hacer clic para volver a la página de inicio, para volver a las páginas de productos, y así sucesivamente. Entonces ahí es donde la arquitectura de sitios web es importante y lo vamos a hacer entre todos estos wireframes. Entonces básicamente vamos a terminar los wireframes de papel. Vamos a escanear y llevar el papel en Adobe XD. Si no tienes un escáner, eso también está bien. Simplemente puedes usar tu teléfono para sacar algunas fotos si quieres tener esos wireframes en el interior de Adobe XD, no es necesario porque estás dibujando estos wireframes en un pedazo de papel. Por lo que siempre puedes simplemente echar un vistazo a ese pedazo de papel y ver dónde están esos elementos, dónde necesitas hacer algunos cambios, cómo estructuraste todo. Porque solo recuerda, podrías hacer estos wireframes en, digamos el lunes y luego el próximo lunes, EUR iniciando el proyecto en Adobe XD. Entonces hay una posibilidad y posibilidad de que te vayas a olvidar algunas cosas de ese mejor lunes. Entonces por eso es importante tenerlos a la mano. Los escanearé y los traeré dentro de Adobe XD para que juntos podamos mirarlos y ver qué bosquejamos en un pedazo de papel y qué queremos traer a continuación en Adobe XD. Entonces una vez que hayamos terminado el wireframing en papel, una vez que hayamos terminado la arquitectura de sitios web, una vez terminamos los wireframes en Adobe XD y hacemos el proyecto más completo. Entonces vamos a pasar a las etapas de diseño. Dentro de las etapas de diseño, vamos a incluir color. Vamos a cambiar de texto Lorem ipsum a algún texto realista que nos trajo el redactor de esta empresa. Y si no tienen al redactor a mano, puedes ser el redactor. Se puede escribir una copia para ellos. Si eres una edición hábil, sin calificar, si no, puedes externalizar eso a otra persona. Para que alguien más pueda acertar, para copiar para el sitio web por ti y puedes ganarles. Si no, simplemente puedes dejar el lorem ipsum dare. Y con la función de coedición de Adobe XD, puedes compartir el enlace de edición de código y luego el cliente puede traer el texto dentro. O una vez que terminaron el texto internamente, pueden enviarte los textos. Somos solo un archivo de texto regular, PDF, correo electrónico, lo que les guste. Y luego puedes traer ese texto en archivo Adobe XD y traerlo dentro de tu diseño. Una vez que empecemos con el diseño, una vez que traigamos todos estos detalles, una vez que empecemos a pulir las cosas aquí y allá, también vamos a empezar con la animación, las microtransacciones, las grandes transiciones, y así sucesivamente. Por lo que la animación es realmente la característica importante clave de Adobe XD de cualquier proyecto moderno. Porque si solo compartes imagen estática con tu cliente que tal vez no entiendan a dónde están liderando esas páginas. Si hago click aquí, ¿qué va a pasar si hago click ahí, dónde me va a llevar? Por lo que las animaciones son realmente factor clave e importante de Adobe XD, así como con el proceso UI y UX de hoy. Debido a que Adobe XD tiene todas estas grandes características integradas, vamos a explorarlas juntos. Vamos a enlazar diferentes páginas. Vamos a crear componentes. Vamos a crear estados de componentes. Una vez que la gente haga clic aquí, una vez que la gente rondaba ahí, ¿qué va a pasar? Entonces les voy a mostrar todo eso una vez que nos pongamos en marcha con este proyecto. Por último, vamos a terminar con cliente. Una vez que tengamos el objetivo final, entonces vamos a empaquetar todos esos, todos estos archivos de tal manera que va a ser fácil para los desarrolladores acceder a ellos, va a ser fácil para los desarrolladores usarlos más adelante en código. Y por último, va a ser fácil y mirable para el cliente simplemente comprobar rápidamente y ver si tiene alguna revisión adicional. En caso de tener alguna solicitud o cambios adicionales que pudieran tener para este proyecto en particular. Entonces, por eso la estructura de archivos es realmente clave. Hacia el final del proyecto, voy a guiar por todas estas etapas. Y realmente espero que te gusten y disfruten del discurso. Y lo que es aún más importante que vas a aprender algo que antes no sabías. O si lo hiciste, eso, elevaste un poco tus habilidades y conocimientos de diseño a lo largo de este curso. Por lo que realmente estoy deseando verte en este curso. Y como dije, la primera etapa de este curso es solo para mostrarte el breve de diseño. Te voy a compartir algunas plantillas que puedes usar para tu propio resumen de diseño y va a ser mucho más fácil para ti hacer esto con tus propios clientes. Entonces te veré ahí. 14. Nuestro resumen de diseño: En este video, vamos a seguir adelante donde lo dejamos en el anterior. Y voy a hablar del breve de diseño. También les voy a mostrar este resumen de diseño para este proyecto y discurso en particular. Pero vas a poder usar esta plantilla para tus propios proyectos grandes y pequeños, porque te estoy dando una plantilla vacía, en blanco al igual que esta para llenarla con tu propia información y utilizarla para futuros proyectos. Entonces para empezar lo que tenemos aquí mismo, como se puede ver en Adobe XD, nuestros breves esenciales, y nuestros breves, breves esenciales es básicamente lo que dice. Es lo que necesitas sentir para este breve de diseño. Y nuestro resumen es básicamente nuestro resumen de diseño para este proyecto. Y dejé alguna información a propósito. Te voy a mostrar sólo porque para que puedas entender lo que necesitamos usar en este proyecto. Entonces permítanme acercar a breves esenciales son un poco más. Entonces lo que tenemos aquí mismo es el perfil de la empresa y ya anoté toda esta información se puede leer en detalles. Pero básicamente lo que necesitamos bajo este perfil de empresa es lo que es la empresa, ¿en qué industria está? ¿ Qué productos cuenta con servicios que tiene para ofrecer? Y alguien propuesta de venta única, que básicamente es degradante característica clave importante que vas a usar para diseñar tu sitio web y tu diseño alrededor. Entonces, ¿qué los diferencia de su competencia? Vas a seguir eso una vez que empieces a diseñar interés clave y personas con las que estás lidiando en esta organización. Entonces, por ejemplo, si lo es, si es una pequeña empresa, normalmente vas a tratar con el fundador, con el CEO. Si es un gran negocio, entonces normalmente vas a estar hablando con algún gerente o algún director de arte incluso, por ejemplo, si tienes el departamento de diseño y así sucesivamente, una lista de competidores directos e indirectos para que puede inspirarse y ver lo que están haciendo los otros jugadores de esta industria. Por lo que puedes saber lo que sigue, qué evitar, pero básicamente no copiar. Vas a usar una propuesta de venta única para una deuda, pero solo te vas a informar sobre la competencia, lo que están haciendo, lo que no están haciendo. Para que sepas lo que necesitas seguir y lo que no. Debajo de eso tenemos proyecto o real. Entonces básicamente aquí es donde crearás una descripción detallada del proyecto, tiene tanto contexto como sea posible. Trata de preguntarle a tu cliente qué están haciendo así como qué están haciendo y y ¿qué estás construyendo algo nuevo? Audio diseñando algo desde cero? O estás rediseñando algo que ya tienen? Esto es obviamente importante porque si estás lidiando con algo desde cero, entonces tienes una libertad mucho mayor para explorar para desarrollar tu concepto, tus ideas en este producto. Pero si ya tienen algo, y entonces hay que seguir algunas pautas y algunos principios clave que ya tienen en marcha. Pero hay que rediseñar por encima de la deuda, que obviamente es mucho más difícil, y la odontología empieza desde cero. A continuación, tenemos el WIP, tratar de identificar los problemas que tienen. Cuando entiendas los problemas, encontrarás la solución más fácilmente, ordenar ¿cuáles son sus problemas? Obviamente quieren rediseñar o quieren completar el diseño desde cero, pero qué problemas estás resolviendo con tus diseños. Entonces, básicamente, el diseño se trata de resolver problemas. La experiencia del usuario está resolviendo problemas que podrían tener los usuarios una vez que están en la página web, una vez que están en la app. ¿ Qué problemas está resolviendo este diseño? No tiene sentido el diseño solo lucir bonito. Necesita resolver problemas concretos. Entonces, por eso necesitas preguntarte a ti mismo y a tus clientes, qué problemas estás enfrentando. ¿ Es una tasa de rebote? ¿ Es la navegación desordenada? ¿ La gente sale de tu página web demasiado temprano? ¿ Es un diseño receptivo? Por lo que todos estos son diferentes problemas que estás tratando de resolver con tu diseño. Entonces, una vez más, sí se ve bonito, necesita verse bonito y convincente a la vista, pero hay que resolver ciertos problemas. Voy a compartir eso una vez que pasemos al breve de diseño de arte. Entonces a continuación tenemos metas y objetivos. Por lo que los objetivos reflejan el propósito de origen fuera de tu proyecto y ejemplo de meta es cliente quiere más tráfico en sus sitios web, lo que hablé justo antes. Objetivo Ejemplo, se incrementa el monto de sesiones semanales en 20% por fecha específica de deuda. Por lo que se puede ver cómo las metas y los objetivos, los objetivos son diferentes, pero son claves para este proyecto y breve de diseño. Al establecer metas y objetivos por primera vez, no solo eres adecuado para tomar decisiones más informadas en torno a tu diseño, sino que también estás mejor armado para demostrar tu valor y valor al cliente fuera de la estética visual de su página web, básicamente lo dice todo. metas y objetivos son extremadamente importantes y necesitas saber qué metas debes seguir, en qué objetivos debes seguir para entregarle a este cliente. A continuación, tenemos público objetivo. Entonces, ¿para quién estás diseñando? Porque como sabrías, las personas son diferentes, pero son el mismo Daron, una criatura de hábito. Entonces básicamente diferentes personas en diferentes grupos de edad, hombres y mujeres. Gente de EU, gente de Europa, gente de India, gente de China. Todos son básicamente iguales, pero son diferentes. Por lo que necesitas hacer que esas diferenciaciones funcionen para ti y para este proyecto en particular. Entonces digamos que tienen edades de 20 a 35 años, por ejemplo, esas personas no les gustan las mismas cosas que personas del grupo de edad de 45 a 65 años les podrían gustar. También las personas más jóvenes por igual para usar la tecnología más las personas mayores no. A los más jóvenes les gusta mantenerse al día con las tendencias. Las personas mayores no. Entonces te dan mi foto aquí. Siguiente. De género, a los géneros masculinos y femeninos no les gustan las mismas cosas por lo general. Por lo que necesitas diseñar con esto en mente. Si estás diseñando solo para mujeres, es posible que necesites hacer ciertos colores. Es posible que necesites utilizar cierta topografía porque una vez más, ¿cuál es tu objetivo? ¿ Cuál es tu objetivo? Por lo que necesitas hacer que esos funcionen para ti y para estos grupos específicos de edad y género. País de resonancia. Obviamente esto es importante porque los diferentes países tienen costumbres diferentes, diferentes personas les gustan cosas diferentes y así sucesivamente. Por lo que necesitamos diseñar para la deuda en mente. Es posible que necesites, podrías vivir en India por ejemplo, pero a la gente en EU les gusten cosas diferentes luego en tu país. Por lo que hay que tener eso en cuenta. trabajo, donde trabajan al trabajo en grandes organizaciones, hacen el trabajo en equipos pequeños y así sucesivamente. Hábitos de consumo de medios. Esto es obviamente importante para el diseño, pero más importante para las redes sociales y para los equipos de marketing. Pero también podrías diseñar con eso en mente. Entonces si a la gente le gustan más los videos, tal vez puedas incluir videos en tu diseño porque obviamente les gustaron más los videos si no les gusta leer, pero como los videos más simplemente usan ese texto convertido en video. No vas a hacer eso obviamente, pero la gente del equipo y del cliente hizo y lo hace por ti. Si eres bueno con la edición de video, entonces bien. Pero en este ejemplo, a la gente no le gusta leer. A ellos les gusta ver videos, así que déles lo que quieran. Básicamente. Por último, tenemos a David hábitos diarios como viajar, comer nuestra socialización y así sucesivamente. Lo cual obviamente es importante cuando la gente va a visitar este sitio web, cuando lo van a usar, son las criaturas de hábito y lo voy a usar a diario, por ejemplo, en la noche, alrededor de medianoche, 12 AM, 12:00 PM. Por lo que necesitas básicamente entrevistar a esas personas y enterarte de sus hábitos diarios. Debajo de eso, tenemos requisitos diseñados. Entonces esto es obviamente para desarrolladores, lo que los desarrolladores te están pidiendo, lo que quieren de ti. Entonces dimensión ácida, resolución de error, para la cual resolución se está diseñando. Si se trata de una página web para la que resolución y resoluciones. Si está diseñando para tabletas rendimiento para qué formas, qué tamaños. Obviamente, vas a hacerle a los desarrolladores todas estas preguntas. Cuando los desarrolladores vuelven a ti, entonces puedes saber empezar a diseñar, nunca hacer esto antes. Pregúntale a los desarrolladores porque necesitas saber qué tamaños van a apoyar más adelante en Cote, Cuando le pregunto a los clientes esto solo me miraba ciegas y luego lo desgloso básicamente para ellos. Y les pregunté, ¿sus usuarios van a usar este producto en dispositivos grandes, por ejemplo, televisores inteligentes y digamos 15 computadoras de escritorio. Dijeron que no. De acuerdo, entonces ¿ahí va a usar esto en nuestra pantalla Full HD por ejemplo? Entonces 1920 por 1080 y dicen que sí, vale, ¿van a usar este producto en una laptop? Sí. ¿ Van a usar esto en una tableta tal vez, pero no una gran cantidad. ¿ Lo van a usar en un teléfono? Sí. Entonces ahora tienes cuatro tamaños y lo hiciste puedes diseñar para los que anteriormente no tenías n. Lo hiciste antes incluso de encender Adobe X, Z y empezar a diseñar. Entonces esto es realmente, realmente importante de entender antes de que te pongas en marcha. También, para los formatos de archivo, es necesario saber qué formatos de archivo van a apoyar los desarrolladores porque diferentes formatos de archivo se adaptan a diferentes personas y diferentes desarrolladores trabajan de diferentes maneras. Entonces básicamente necesitas saber qué van a usar, qué no van a usar para entender cómo vas a estructurar tu trabajo. Porque si por ejemplo, podrían funcionar con iconos B y G y envían Jacobs europeos, Vamos, ya no puedes cambiar los iconos PNG porque básicamente esas son solo imágenes JPEG sin fondo. Por lo que tal vez quieras hablar con ellos sobre trabajar en SVG porque SVG no pierde ninguna calidad, es mucho más fácil exportar y es mucho más fácil trabajar con cotización. Entonces todas esas cosas que necesitas preguntarles antes de que realmente te pongas en marcha. Contamos con activos de imagen a incluir, paletas de colores y documentos de copia asociados. Entonces. ¿ Tienen todas estas cosas, o no tienen todas estas cosas? Porque la deuda básicamente significa más trabajo para ti, y eso básicamente significa aumento de precio para ellos. Por lo que tienes que hacer todas estas preguntas antes de que incluso te pongas en marcha. Y antes de estructurar el precio, hablando del precio, teníamos el presupuesto y horario. Entonces básicamente cómo luce su presupuesto, cómo lo desglosaron, ¿cómo lo desglosan? Yo sí cobrándolos todos por delante, 50% ahora, 50% al final, estás cobrando en etapas y así sucesivamente, y también horario para el proyecto. ¿ Cuánto tiempo va a durar este proyecto? Por lo que ahora permítanme mostrarles rápidamente nuestro breve. Por lo que tenemos nuevo diseño de página web bancaria. Este es el nombre de la empresa. Esta es una empresa ficticia, pero estoy basando toda esta experiencia de proyecto desde la experiencia anterior porque antes trabajé para bancos reales, para sus diseños de página web y aplicaciones. Entonces aquí tenemos nueva banda Corporation es el nombre del cliente. sexto de junio de 2021 es la fecha en la que este proyecto necesita ser terminado. Perfil de la empresa sal. No perdamos tiempo puedes saltar dentro de este archivo porque te estoy dando este archivo y puedes leer todo sobre esto. Pero básicamente lo esencial de ello es dare Bank y tienen una gran cantidad de clientes que son gente más joven. Y quieren enfocar todos sus esfuerzos en las personas más jóvenes. No van a echar abajo a las personas mayores, pero los más jóvenes y los millennials sobre todo son su público objetivo porque encontraron que estas personas están gastando la mayor parte del dinero por delante, no les importaban los costos de organizar sus cuentas y demás. Por lo que es mucho más fácil suprimirles diferentes servicios en deudas. ¿ Por qué les gustó tanto a estas personas también día como a los más jóvenes porque están deseosos de cambiar las tecnologías. Son claves para probar cosas nuevas, realidad virtual en la realidad y demás. Por lo que tenemos visión general del proyecto aquí. Quieren rediseñar para ahí sitio web actual. Y quieren que ese diseño sea más centrado en el usuario, más centrado en el usuario, y que una experiencia de usuario de todo el diseño sea más acercada a estas personas más jóvenes. Porque lo que tienen en este momento es realmente viejo, realmente anticuado. Veamos a India en algo nuevo, algo fresco para atraer a esos jóvenes a la plataforma. Entonces tenemos metas y objetivos. Por lo que se mezclan o este proyecto es atraer a más usuarios al sitio web y al tener la experiencia de usuario de tarifa, haciendo que se queden ahí como cliente. Y el objetivo de este proyecto es atraer a personas con gran oferta, hacerlas dictum lejos de la competencia. Y una vez que se convierten en un cliente, haciendo que se queden uno al sobrevenderles otros servicios y ofertas. Entonces básicamente en pocas palabras, si vienes a este sitio web al tener la gran experiencia de usuario, gran diseño, si estás en su público objetivo, tan millennial, personas mayores , jóvenes, entonces te van a atraer, regístrate para sus servicios y luego te subvendes en segundo plano, servicios adicionales, algunos podrías firmar para un servicio específico. Pero una vez que entras, una vez que estás conectado, te van a atraer ofreciéndote diferentes servicios que puedes utilizar. Este banco y en esta página web. Por lo que el objetivo es disminuir la tasa de rebote en un 40%. Y la tasa de rebote es tan alta porque su sitio web. Es tan viejo, por lo que quieren disminuir la deuda en los primeros seis meses una vez y psi va como objetivo adicional es convertir un 50% más de personas en ese tiempo en combinación con la estrategia de marketing que lanzarán junto con este sitio. Entonces básicamente en pocas palabras, una vez que el sitio se ponga en marcha, equipo de marketing va a publicar todo el material de marketing. Van a atraer a más gente a la página web al mismo tiempo deciden que se va a vivir. Quieren disminuir esta tasa de rebote límite en un 40% al tener la gran experiencia de usuario, gran diseño. Y también quieren convertir un 15% más de personas de ese nuevo tráfico que tienen. Entonces podrían correr loco Instagram, podrían correr Facebook, yo hago dos camas y así sucesivamente. Para atraer gente adicional para quitárselos de otros bancos, para atreverse a banco y a eso les subvenda todas estas cosas adicionales en futuros, tenemos público objetivo buscado de 20 a 45 años y género, 40% mujeres, 60% hombres. Por lo que quizá queramos experimentar con algunos colores aquí y son resonancia serial. Entonces básicamente tenemos Belgrado y Londres porque como dije, este es un proyecto ficticio, pero sí trabajé en el pasado sobre los proyectos similares a éste. Y también tenemos como yo a Serbia y a Reino Unido, lo que significa demografía clave. Básicamente, es posible que necesites adaptar esto a tus propias preferencias personales. Entonces, por ejemplo, si eres de EU, como EU y por ejemplo, digamos México, si eres de India, haz lo mismo pero por tu propia demografía personal, solo para explorar cosas adicionales en características que puedes usar y hacer con este proyecto. trabajo, por lo que en su mayoría los empleos de menores ingresos y pero también los dueños de pequeñas empresas, especialmente los autónomos. Y los freelancers, son la demografía clave para un futuro para esta empresa, hábitos de consumo de medios, como se puede ver ahí 60% en Instagram, 20% en Youtube, Dan presente en Twitter, y 10% en tick tock también. Hábitos diarios o consumo de redes sociales, trato de viaje, comer sano, ejercicio por la tarde. A continuación tenemos requisitos diseñados. Entonces de esto era de lo que hablaba antes. Por lo que tenemos demencias ácidas día queremos tener básicamente escritorio, escritorio pequeño, tablet y formas a esos cuatro tamaños. También te voy a mostrar una vez que diseñemos oldies, cómo puedes adaptar el tamaño del teléfono al iPhone. Entonces básicamente tener una app para iPhone la cual van a desarrollar más adelante en un React, van a usar React mismo como lo hacía mi cliente real antes. Porque React es realmente fácil de adaptar todos estos tamaños para diferentes dispositivos. Formatos de archivo o Adobe XD como archivo principal del proyecto, SVG 40 hace eco PNG y JPEG para las imágenes porque vamos a tener algunas imágenes sin el fondo sobre ellas. Por lo que podríamos querer exportarlos como PNG, por lo que es más fácil para los desarrolladores usarlos más adelante. Y tenemos PDF para breve de diseño que estamos viendo ahora y documentación adicional del proyecto. Entonces básicamente, todo lo que te estoy leyendo aquí mismo es que puedes recolectar, combinar y crear, y luego exportarlo como PDF, enviarlo a tu cliente. Y entonces pueden ir por encima de este fin, básicamente estar de acuerdo contigo o estar en desacuerdo contigo. Si están en desacuerdo, entonces. Incluir los cambios de dosis que requieren. Envíales esto de nuevo hasta que llegues al acuerdo completo antes de firmar realmente el contrato y empezar a proyectar a continuación que requieren llamarlo pallet. Por lo que D siempre que este onSolicite imágenes se proporcionan bajo petición. Voy a hablar de imágenes en video separado, asociar una copia de documentos, por lo que lo proporcionaron OnRequest con su redactor. Entonces no vamos a usar sólo lorem ipsum. Te voy a mostrar muchos mips, algunos en y wireframing proceso del discurso. Pero más tarde dentro del proceso de diseño del discurso. Y en realidad va a mostrarte cómo se va a ver la copia real dentro del presupuesto y horario de diseño. Por lo que el presupuesto total es de $15 mil 5K antes del inicio del proyecto tanto que en realidad estás de acuerdo en todos estos términos. Y luego cobras 5K. 5k cuando empezamos con el diseño. Entonces una vez que hayamos terminado la parte de wireframing, una parte de estructura de sitio web, una vez que realmente terminemos todo eso, empecemos con el diseño, entonces vamos a cobrar 5K adicionales. Y por último, el último cinco dio antes entregar los archivos al cliente y a los desarrolladores. Clasificar desglose de línea de tiempo. Básicamente todo en seis meses más cualquier Diane adicional para revisiones y cambios de ácido para desarrolladores después de que esos seis meses hayan caducado. Y aquí tienes esto aquí abajo. Para que puedas cambiar todas estas cosas. que puedas, por ejemplo, mantener el control y hacer clic dentro. Y como puedes ver, puedes cambiar lo que quieras y puedes adaptar esto. Cualquiera de estos básicamente hace sus propias preferencias personales. A continuación, puede escribir su nombre o nombre de su empresa y su nombre o correo electrónico de la empresa. O también puedes agregar adicionalmente información de tu teléfono si quieren ponerse en contacto contigo por teléfono. Pero básicamente lees todos los clientes con los que estoy trabajando. Por lo general están usando el correo electrónico porque es mucho más fácil y más rápido. Y por último, si abres la paleta Capas justo aquí, puedes ver que todas estas están en capas. Y también puedes, por ejemplo, vamos a ir a este ícono del presupuesto aquí mismo. Puedes cambiarlo. Se puede cambiar el color, como se puede ver ahora, es rojo y se puede adaptar ese color agregando calor aquí mismo. Y puedes cambiar y adaptar esto básicamente al gusto de tu cliente. También puedes cambiar el color del propio aeropuerto haciendo clic aquí, luego aquí. Y como puedes ver, puedes cambiar esto también convertirlo en una especie de modo oscuro y básicamente deberes para los clientes y básicamente exportar esto y mostrarles una especie de resumen de diseño de marca mientras realmente usas esta plantilla. Y se ve como de marca, pero en realidad no lo es. Es solo una plantilla. Con el fin de exportar esto como PDF. Digamos que este es el resumen final de diseño. Simplemente puedes presionar Control E y usar la función PDF desde aquí, exportación de kit. Y obviamente puedes cambiar dónde quieres exportar tus archivos. En este caso, es un escritorio para mí, simplemente hit export. Se va a exportar como PDF. Y básicamente puedes compartir entonces ese resumen de diseño con tu cliente. Obviamente, van a quitar algunos detalles de los que no hablé antes, pero se lo dejan para ustedes chicos. Entonces básicamente, escribe aquí sobre tu público objetivo. No es necesario incluir eso. Escribe sobre requisitos de diseño y programación presupuestaria aquí puedes eliminar que mazos simplemente seleccionados de aquí, y simplemente borrados así. Y luego manda eso a tu cliente. Y luego van a estar contentos con eso. Entonces básicamente este es nuestro resumen de diseño, o realmente espero que les haya gustado este video porque como dije, es realmente importante tener un breve de diseño en su lugar porque la mayoría de las veces van a usar esto y los clientes van a preguntar usted, por ejemplo, por algunos cambios diferentes. Pero si esos cambios no están dentro del breve de diseño requerido, si no están en el contrato, y entonces siéntete libre de decir que no. O si quieres trabajar en esos, siéntete libre de decir que sí, pero asegúrate de cobrar siempre adicional por una dosis porque no estaban en breve de diseño, no estaban en el contrato. Entonces, ¿por qué deberías trabajar en deuda? Básicamente, esto está fechado para video breve de diseño. En la próxima serie de videos, les voy a mostrar un proceso de wireframing en papel. Vamos a empezar a dibujar en un trozo de papel. Voy a explicar mi proceso de diseño podría diseñar pensando detrás de cada uno de estos diseños de sitio web o aplicaciones. Te voy a mostrar algo de pensamiento adicional sobre diseño para ciertas personas, diseño para cierto demográfico, ciertos países y así sucesivamente. Pero todo eso se va a explicar en esos videos wireframing. Así que asegúrate de vigilarlos si te interesa. De no ser así, siempre puedes seguir adelante con este curso y pasar por diferentes clases. Lo que te interesa, lo que encontrarás más interesante, lo que necesitas bien. ¿ Qué te parece más útil y así sucesivamente. Por lo tanto, asegúrate de explorar plenamente el discurso. Y porque estructuré así, para que no tengas que ver todas las lecciones si quieres. Simplemente puedes saltar a la pieza de diseño si quieres. Pero incluí alguna información clave e importante en cada una de las secciones del discurso. Entonces si quieres aprender más y sacar el máximo provecho de este curso, entonces asegúrate de seguir todas esas lecciones. Va a tardar más, pero te prometo que los beneficios van a ser mucho más grandes. Por lo que en el siguiente video y en la siguiente serie de videos, vamos a empezar a diseñar wireframes en un pedazo de papel. Entonces te veré ahí. 15. Encuentra el público objetivo: En este video, vamos a hablar investigación del público y de lo que puedes hacer para investigar a tu público. Por lo que hay dos tipos de investigadores que quieren lo cual ya está terminado. Entonces eso significa que si tu cliente ya sabe quiénes son sus clientes y si ya están hechos la investigación, entonces solo vas a tomar esa investigación y por ejemplo, pulirla un poco o refinarla un poco si ellos, por ejemplo, quieren expandirse a público adicional. Para que puedas saber por sus objetivos anteriores y unos ejemplos anteriores qué puedes hacer con el diseño y a dónde puedes ir desde ahí. Si necesitas investigar nueva audiencia, Si por ejemplo, D Solo saber más o menos quién es su público, entonces necesitas hacer la investigación cuando necesitas entender quién es el público objetivo. Entonces en nuestro resumen de diseño aquí mismo, lo estoy mirando en mi pantalla. Rehabilitación, la edad de 22 años, de 45 años. Entonces eso significa, por ejemplo, porque este es el Proyecto del banco. El banco ya sabe por la cuenta que ya abrieron y pueden checar en su sistema que este es su público objetivo Porque en este rango de edad, la mayoría de las personas están ahí. Y luego tenemos género, 40% femenino, 60% comida. Una vez más, lo sabemos por el banco de datos ya tiene país de residencia. Por lo que Serbia y Reino Unido resonancia ciudad Belgrado en Londres, porque ahí es donde tienen su ubicación está en. Tenemos lugar de trabajo. Por lo que en su mayoría empleos de menores ingresos. Qué dueños de pequeñas empresas también, sobre todo freelancers. Entonces esto es lo que preguntaron cuando abren sus cuentas. Por lo que saben que desde la deuda, la experiencia de la deuda, los hábitos de consumo de medios. Por lo que Instagram, YouTube, Twitter, y tick tock, hábitos diarios o consumo de redes sociales. Tratar con los desplazamientos, comer sano, ejercicio por la tarde y así sucesivamente. Banco puede alertar sobre toda esta información, principalmente preguntando a los clientes de Derek. Y puedes aprender de la información de datos lo que debes hacer para el diseño. Entonces porque aquí tenemos más clientes masculinos que femeninos y estamos en audiencias yanquis. Así que de 22 años, 45 años, podemos saber al instante que no necesitamos usar todos estos colores premium y tipo de viejos envejecidos como el color negro oscuro real, literalmente oro y así sucesivamente. Además, no vamos a usar esos colores porque este banco no lo es. ¿ Cómo puedo decir este banquete realmente personalizable? No sé cómo decir esto, pero no es para clientes de gama alta y clientes que ya están en yaks, súper autos Dionne. No hay muchas casas diferentes en la zona Mencius. Y este banco es para gente regular. Por lo tanto, necesitas estructurar tu forma de deuda de voz para que esas personas regulares puedan entender lo que quieres decirles. Por lo que no quieren ver imágenes de yaks y mansiones y demás porque no son dueños de esas cosas. Y por lo tanto, vas a utilizar los colores que sean apropiados para tu público. En este caso, 60% masculino, 40% femenino. Entonces le vamos a poner algo de especia a su diseño, digamos así. Entonces digamos que vamos a usar algunas esquinas redondeadas y que se vea suave. Quizás podamos usar algunas sombras de fondo más adelante, puede ser incluso desenfoque de fondo. Tan solo para dar este look moderno y suave para que podamos acomodar tanto al público masculino como al femenino. Una vez más, es necesario mirar un país de residencia y ciudad de resentimientos. Por lo que hay que mirar la cultura de esas personas. Es necesario entender cuál es la cultura, especialmente la cultura local, sobre todo en estos casos en los que sólo se centran, por ejemplo, en Belgrado y Londres. Por lo que necesitas entender una cultura de dosis a las ciudades y necesitas adaptar tu diseñado a esas culturas. Entonces, una vez más, si cierta cultura o religión están usando un conjunto de colores en particular, no vas a usar esos conjuntos de colores particulares. Otras religiones, ciudades, países, etcétera. Por lo que hay que pensar en todas esas cosas. Y ¿cómo puedes pensar en eso es simplemente haciendo tu investigación, simplemente entendiendo quiénes son tus clientes objetivo, quién es tu público objetivo? Y si, como en nuestro caso, ya tenemos esta información y la tenemos pidiendo al banco que nos proporcione esta información, entonces fácilmente podemos estructurar esa información en nuestro deseo. Entonces una vez más, usando el color, usando la topografía y bajo frente topográfico, si tu público es gente mayor, generalmente vas a usar tipografía más grande porque el sitio de la gente es realmente malo a cierta edad o están empezando a ir mal. Entonces, por lo tanto, vas a usar una tipografía más grande. Vas a una tipografía más oscura solo para que sea más accesible para esas personas. Si las personas más jóvenes están en cuestión como lo son en nuestro caso, entonces puedes, por ejemplo, usar alguna topografía de menor tamaño. Puedes usar colores más claros solo para darle esta sensación general de bienestar a tu sitio web. Porque como se puede ver por los hábitos diarios, consumo diario de redes sociales recomendó comer sano y hacer ejercicio por la tarde. Entonces tal vez estas personas están comiendo fuera en algún lugar sano y están revisando su cuenta bancaria mientras están en lugar de deuda. Entonces si están en ese estado mental, no quieres que los empantanen con topografía de cama, con malos colores y demás. Se quiere conseguir esa sensación general de bienestar y ser KLT y ser verde y estar en uno con la naturaleza y con la comunidad y así sucesivamente. Pero usando esos ciertos colores sin embargo, la topografía y el imager, lo cual es especialmente importante si estás hablando con gente más joven como estamos aquí mismo, entonces vas a usar imágenes de gente más joven. Porque una vez más, las imágenes son realmente importantes porque está apuntando a la gente hacia la dirección hacia donde va el negocio. Entonces, una vez más, si nuestra edad demográfica es de 22 años, de 45 años, no vamos a mostrar a algunas personas mayores en esas imágenes de Windows, sino personas más jóvenes, por ejemplo, usando sus teléfonos móviles, usando las tabletas, colgando fuera, tal vez bebiendo café, cojeando bicicletas por ahí, tal vez pasando el rato. Es algún lugar bonito y así sucesivamente. Entonces, ¿solo quieres enfocarte con quién estás hablando? Lanza tus imágenes a través de tus fuentes y a través de tus colores. Entonces ahí es donde este público objetivo realmente viene muy bien porque solo necesitas investigar y endeudar. Si como en este caso ya tenemos eso. Y debido a que banco nos proporciona toda esta información, ¿qué pasa cuando no tienes ninguna de estas informaciones? Bueno, simplemente necesitas sentarte con tu cliente 101. Simplemente pregúntales que las citas se atreven público objetivo es. Y luego puedes hacerles una serie de preguntas como lo hacemos aquí mismo. ¿ Cuál es su edad, cuál es su género? ¿ Dónde se encuentran? Qué les gusta hacer, y así sucesivamente. que puedas enumerar todas estas preguntas las cuales ya tienen plantilla indice la cual te estoy dando, haz esas preguntas a tu cliente para entender quién es su público objetivo. Den, una vez que sigas a ese público objetivo, puedes tomar tus propias decisiones simplemente incorporando eso a tu diseño. Si necesitas hacer una investigación de público objetivo y entonces obviamente van a cobrar más por papá. Y eso es más tipo de cosas basadas en campo UX. ¿ Cómo se hace la investigación objetivo? Por ejemplo, te están diciendo que piensan que estas personas están, digamos, trabajando en un banco local, por ejemplo. Entonces vas a ir a ese banco local y preguntarle a esas personas si están disponibles para algún tipo de entrevista. Dan, vas a formar la lista de preguntas que se van a hacer a estas personas. Y lo mejor que puedes hacer es meter a todas esas personas en un grupo, en una habitación al mismo tiempo, si es posible, durante dos, esta pandemia mundial y así sucesivamente. Esto se puede hacer en línea. Obviamente puedes programar llamadas Xun, llamadas Skype, Google Hangouts, y así sucesivamente. Para que puedas preguntarle a todas esas personas al mismo tiempo incluso, o puedes precordar tus preguntas. Puedes enviarle papá, te pueden mandar una bolsa de email para que realmente no tengas que sentarte con ellos si no quieres, o si eres tímido o si no tienen tiempo y así sucesivamente. A la gente le gusta que le paguen por esta clasificación. Por lo que esta investigación del público objetivo obviamente lleva mucho tiempo. Entonces va a ser mejor si puedes pagarle a esa gente. ¿ Y cómo puedes ir a buscar p? ¿ Cómo puedes pagarlos es simplemente pidiendo a tu cliente que te pague por adelantado en nosotros ya hemos hablado de esto antes, porque si te pagan por adelantado, por ejemplo, digamos 30% o 50% o lo que sea. Puedes usar ese dinero para este público objetivo, no tienes que pagar cantidades masivas. Y sólo algunos básicos, no sé, cantidad regular a estas personas porque están usando su tiempo contigo. Y luego una vez que formes tu opinión sobre este público objetivo, entonces podrás usarla en tu trabajo de diseño y más adelante, cuando la obra esté terminada o casi terminada, puedes volver con estas personas y ahora pedirles para probar tu producto y cómo puedes hacerlo. Hay muchos plugins diferentes dentro de Adobe superados que puedes instalar para probar con audiencias reales. Vea qué datación del producto antes de que el producto entre en código y se ponga en marcha. Porque vamos a usar técnicas de prototipado, micro interacciones y así sucesivamente. Para que puedas mostrarles cómo se verá el producto en la vida real una vez que esté codificado, antes de que esté realmente codificado, lo que ahorra tiempo tanto para ti, tus clientes, desarrolladores y así sucesivamente. Porque vas a probar estas soluciones en personas reales. Y puedes entender si a la gente real que en realidad son nuestro público objetivo les va a gustar este producto antes de que se ponga en marcha. Si no lo hacen, obviamente, vas a anotar todas sus respuestas y vas a incorporar esas respuestas en tu diseño para que puedas cambiarlo. Se puede volver a ellos. Simplemente hazles esas preguntas otra vez o algunas preguntas diferentes. Al igual que, por ejemplo, ¿cómo encontraste la navegación? ¿ Crees que está demasiado abarrotado? ¿ Eres capaz de hacer click en alguna de estas cosas? ¿ Te gustan estas animaciones? No creo que se toman demasiado tiempo. ¿ Cómo encuentras que lo hacen los colores, ¿encuentras distintivo distrayente para encontrarlo fácilmente para hacer click en estos botones para que puedas formatear todas esas preguntas y hacer todas esas preguntas a esas personas que tú y tu cliente piensa que son el público objetivo. Si tienes el público objetivo. Por lo que estamos volviendo a la historia desde el inicio. Por lo que tenemos nuestro público objetivo porque el banco ya proporcionó estas opciones. Descarga que puedes hacer es cuando llegues a la parte de compartir de tu proyecto y probar parte de tu proyecto, entonces podrás formar tu público objetivo usando la información que el cliente te proporcionó. En este caso el banco, puedes meter a todas esas personas a una habitación o Skype llamar a la llamada zoom y todo lo demás de lo que hablé y hacerle estas mismas preguntas a esas personas. Entonces podrás obtener sus respuestas. Puedes formatear y puedes pensar como por ejemplo, si dos o más personas decían que este botón es demasiado distrayente, lo estoy cambiando. Si tres o más personas dijeron que sí, no pueden leer el texto, voy a tratar de mejorar el color, puede ser hacer algo más oscuro y tal vez cambiar el color por completo. Entonces consigues lo que quiero decir. Tienes que probar estas cosas con gente real. Y ese es el verdadero proceso UX del diseño. Entonces desempolvando, cambiando, implementando, destinado de nuevo, y básicamente es un círculo de fallas y estás haciendo este círculo durante toda la vida útil del proyecto. Entonces desde el punto en que te inicias hasta el punto en que terminas y el producto es vida. Ese no es el final del proceso de diseño. Vas a hacer esto una y otra vez. Pero solo te estoy mostrando el formato basado en proyectos estructurados de base de proyectos. Entonces básicamente, para todas y cada una de esas pruebas, por ejemplo, después de que el producto esté en vivo a través del diseño del sitio web aquí. Entonces cuando el sitio web esté en vivo, tal vez en un periodo de tres meses, puede ser que puedas recolectar algunos datos del banco y puedes sentarte con la persona del banco y luego hablarnos con ellos. lo mejor tienen un gerente de proyecto para este proyecto y así sucesivamente. O si el cliente es más pequeño, puede sentarse con los clientes directamente y luego inspeccionar toda esa información. Por ejemplo, si piensan que la página es realmente importante para la conversión, y ves en Google Analytics, por ejemplo, que la conversión es realmente mala, entonces puedes sentarte con tu público objetivo, hablar con ellos sobre qué les gustaría cambiar con esa página en particular, entonces puedes aplicar esos cambios, Enviarlos a los desarrolladores. Los desarrolladores pueden implementar esos cambios porque ahora es mucho más fácil porque tienen un sitio web en vivo funcionando. Y luego puedes dárselo a un mes más o tres meses más y ver si la conversión ha mejorado. Obviamente, puedes establecer estos plazos con tu cliente y ver, por ejemplo, si quieren lograr algo en un periodo de tiempo más corto, digamos que quieren una conversión más grande en tres meses. Entonces por ejemplo, tal vez puedas hacer dos de esos cambios después de cada uno de los meses. Por lo que espero que lo entiendas. Después de un mes, obtienes una vez más con tu público objetivo. Hablas con ellos sobre estos cambios, implementa los cambios y los desarrolladores los implementan. Y luego después de un mes más, exploras y ves si llegaron al público objetivo. Si alcanzan sus metas objetivo, si lo tienen, entonces eso está bien. A lo mejor puedes hacer algo para mejorar un poco más. Si no les alcanzaron, entonces puedes volver a un público objetivo con algunas preguntas nuevas, nuevos cambios y demás. Entonces es realmente todo el proceso del círculo porque comienza y luego nunca termina porque siempre haces estos cambios. Una vez más, no es tu responsabilidad hacer estos cambios después de que el producto esté en vivo, pero puedes ofrecerles eso como servicio a un cliente y luego decirles: Vale, tienes estos objetivos pueden ser, podemos cumplirlos. Si no los encontramos, quizá debamos volver a encontrarnos. Deberíamos volver a hablar de hablar con el público objetivo para que podamos probar otra cosa. Podemos probar algo diferente y quizá mejorar las posibilidades de llegar a ese objetivo objetivo objetivo. Entonces eso es todo para este video, y te veré en el siguiente. 16. Recursos el esquel inalámbrico papel papel: De acuerdo, así que empecemos ahora con los alámbricos de papel. Pero antes de que lo hagamos, solo quiero mostrarte rápidamente los recursos que estoy usando puedes usar y los recursos que básicamente necesitas para wireframing en papel. Entonces lo que realmente necesitas es papel. Estoy usando sólo un papel de impresión regular. Puedes usar cualquier papel que quieras. Puede tener líneas y puntos, puede tener cuadrados. De verdad depende de ti. ¿ Y qué tipo de papel tiene, qué tipo de papel le gusta usar? Y realmente no importa. Cosa desordenada como el grosor del papel, la calificación del papel y demás. Simplemente puedes usar hoja lisa de gente blanca como estoy usando aquí mismo. Este es solo un papel de impresión básico o puedes comprar en cualquier tienda. Depende S4. Puedes usar lápices de madera, puedes usar bolígrafos como estos. Se pueden utilizar curvas de punta de bola. De verdad depende de ti una vez más lo que tienes tirado alrededor de tu casa. Si quieres hacerte fantasía, puedes comprar estos gobernantes. Podrás comprar estas reglas que tengan iconos grabados dentro de ellas. De modo que básicamente puedes sentar la regla, una regla como esta, y luego simplemente puedes dibujar un icono sobre ella. Entonces realmente no me gusta hacer eso porque me ralentiza. Pero puedes usarlo, puedes comprarlo en línea, básicamente puedes encontrar lo que quieras. También puedes usar diferentes marcadores de color. No los estoy usando hoy solo para acelerar un poco las cosas. Puedes usar bolígrafos como DES. Como dije, realmente depende de ti lo que tengas, lo que más te sientes cómodo con usar. Y este proceso básicamente se trata de ideas. Por lo que solo quieres sacar ideas de tu cabeza, abajo en un trozo de papel y simplemente ordenadas. Se puede ver a dónde se puede llevar esta herramienta de proceso y en qué dirección. Entonces para empezar, lo que quiero es enumerar abajo todos los servicios que me dio el cliente. Por lo que una vez más, Cliente es un banco y cuentan con todos estos diferentes servicios que quieren incluir en su página web. Tienen toda la página web la cual quieren rediseñar. Y la navegación en la parte superior está realmente abarrotada. En realidad no es tan grande a la vista. Es realmente difícil de entender. Entonces lo primero en el diseño de UX, que vamos a hacer para este sitio web en particular es arreglar su navegación. Entonces básicamente su navegación está detenida ahora mismo aquí, solo imagínense en la parte superior de la página. Y está realmente abarrotado con un montón de estos diferentes servicios que ofrecen. Yo quiero arreglar eso porque quiero que los usuarios naveguen fácilmente por este sitio web para reducir la tasa de rebote. Porque si recuerdas del video anterior sobre breve de diseño, tasa de rebote es uno de sus principales requisitos. Entonces para empezar, solo voy a enumerar las páginas que básicamente quieren que se hagan para este sitio web. Por lo que tienen cuentas, tienen préstamos, tarjetas, invierten, digitales, y dashboard con servicios adicionales. Entonces si me llevo mi cámara y acerco un poco más, solo lo hiciste tú puedes ver lo que estoy haciendo un poquito mejor. Se puede ver aquí mismo que tenemos cuentas, tarjetas de préstamos, invertir, digital y dashboard. Por lo que todos estos tienen diferentes servicios en su interior. Entonces básicamente bajo cuentas puedes abrir diferentes cuentas como chequeo, cuenta de ahorro y así sucesivamente. Vas a ver que una vez que realmente empecemos con el proceso de diseño y los wireframes y así sucesivamente en los préstamos de Adobe XD, básicamente lo mismo. Por lo que todos estos tienen diferentes servicios, autos, te puedes imaginar tarjetas de débito, tarjetas de crédito y demás, invierte. Por lo que tienen diferentes paquetes de inversión. Entonces por ejemplo, becario celebrado invertir en el futuro y así sucesivamente. Digital es básicamente se atreven AI ayudante herramientas. Tienen banca en línea, banca y así sucesivamente. Y bajo el tablero, una vez que realmente inicies sesión en este sitio web y vas debajo del tablero, vas a poder acceder a toda esta información adicional diferente. Vas a poder ver que tu gasto tu día limita tus tarjetas, tus pulmones, por ejemplo, que tienes bajo este banco y así sucesivamente. Entonces para arreglar todo esto, lo que en realidad me pidieron que hiciera es incluir los cationes metálicos. La renta va a ser pop-up básicamente de sus ubicaciones bajo un mapa de Google. Ahí me pidió que incluyera para los negocios. Me pidieron que incluyera nuestro número de teléfono móvil y diferentes idiomas. Entonces, vamos a anotar eso. Por lo tanto ubicaciones, negocios, teléfono, e idiomas. Por lo que todas estas cosas necesitan ser incluidas dentro de nuestra navegación. D necesita estar despejado. D necesita ser fácil de leer, fácil de entender tanto en el móvil como en la web. Entonces este es nuestro primer reto básicamente, porque en cuanto aterrices en este sitio web, vas a ver esta navegación superior. Te vas a preguntar, vale, estoy en una página bancaria. ¿A dónde necesito ir? A lo mejor necesitas abrir una cuenta. A lo mejor necesitas llevarte una tarjeta. A lo mejor estás pensando en invertir y demás. Por lo que necesitas poder navegar fácilmente por este sitio web. Entonces, para hacer eso, lo que realmente vamos a hacer es que vamos a dibujar el contorno de una página web. Por lo que sólo se puede imaginar que este es el esquema. Cuando aterrices en una página web, lo que vas a hacer es incluir una barra superior como esta, que va a correr un ancho completo de nuestra página web. Dentro de ahí, vamos a incluir nuestras ubicaciones aquí. Nosotros vamos a hacer por negocios aquí. Y en realidad lo voy a anotar. Entonces de este lado vamos a incluir un número telefónico. Entonces déjame incluir rápidamente un ícono del teléfono. Y de esto era de lo que hablaba antes. Simplemente puedes incluir un garabateado básico como este. Y también puedes usar flechas del ICN. Entonces para Nikon, si estás compartiendo esto con otro diseñador o un desarrollador o quien sea, van a poder entender. Ok, este es un CI extranjero y este es un ícono de ubicación. Y puedes escribir todas estas cosas. Para los idiomas. Voy a incluir dos banderas, básicamente bandera del Reino Unido y quema serbio porque estos son nuestros idiomas. Déjame escribirlo. Idiomas. Y lo que vamos a hacer es incluir otra navegación, pero dentro de este sitio web, así que no va a ser de ancho completo, va a ser una navegación en caja. Entonces básicamente de aquí para aquí, porque vamos a usar la cuadrícula una vez que realmente empecemos con el diseño. Entonces esta va a ser nuestra navegación en caja. Al igual que esto. Va a tener un efecto borroso, va a tener una sombra gota. Vas a ver más adelante cuando en realidad empezamos con el diseño de este lado izquierdo. Y vamos a tratar con el logo. Por lo que vamos a incluir el logo ahí. Y luego cuentas. Y en realidad le pregunté al cliente el real, lo cual hice anteriormente. ¿ Cómo puede una lista de d's porque es necesario enumerar estos en orden de prioridad. Porque, por ejemplo, estos servicios digitales son, pueden ser secundarios a presa o terciario o lo que sea. Y estos son conteos en préstamos quizá sean el min, ahí significa servicios. Por lo que necesitas enumerar los servicios en tu navegación en orden de prioridad porque la mayoría de las personas, sobre todo en Occidente, lee de izquierda a derecha si se trata de otros mercados o Mercado de Medio Oriente, por ejemplo, el leer de derecha a izquierda. Por lo que necesitas incluir tus ítems de menú en orden de prioridad de izquierda a derecha para estos países occidentales en audiencias occidentales. Entonces cuentas, préstamos, tarjetas, invertir, y digital. Y en lugar del tablero, realidad voy a incluir un botón aquí mismo. Y puede ser un botón de inicio de sesión, que en realidad nos va a llevar a la sección de dashboard. Por lo que van a poder hacer clic en este botón de inicio de sesión e ir al panel de control. Entonces, vamos a anotar eso. Y en realidad prefiero escribir todas estas cosas, sobre todo tal vez ahora estás creando este wireframe, pero vas a volver a ello en un mes, digamos, o en un par de días o en unas semanas. Y quizá te vayas a olvidar qué es esto, qué es esto a donde te está llevando esto. Por lo que es realmente extremadamente fácil como viste, basta con bajar la flecha por ejemplo, este es nuestro icono de ubicación. Entonces, vamos a escribirlo. Ocasión YO PUEDO simplemente así lo hizo se puede ver lo que es. Y veamos eso por ahora. Es sólo un ícono, pero tal vez lo vas a anotar. Ubicaciones aquí. Esto para los negocios se van a mover a la derecha. Por lo que necesitas tener todas estas cosas anotadas. Acabo de ver hizo puedes recordar más adelante cuando vuelvas a ella, qué es, qué hace y demás. Entonces eso básicamente no son navegación. Y lo voy a dejar aquí para este video. En el siguiente video realmente vamos a volver a él. Te voy a mostrar algunos estilos de wireframing diferentes, qué puedes hacer. Y luego en video después de ese, realidad vamos a empezar por fin con wireframes. Y en realidad vamos a dibujar todos nuestros elementos hacia abajo en un pedazo de papel. Entonces eso es todo para este video, y te veré en el siguiente. 17. Estilos de alambre en papel papel: De acuerdo, así que sigamos ahora donde lo dejamos en el video anterior. Y en este video, te voy a mostrar unos estilos de wireframes diferentes que puedes usar para tus wireframes. Entonces voy a usar este mismo pedazo de papel. Y en realidad voy a acercarme un poco más. Para que ustedes puedan ver todo esto un poco mejor así. Entonces, básicamente, ¿los estilos varían de diseñador a diseñador? El factor clave aquí es el tiempo. Entonces, ¿cuánto tiempo tienes en este proyecto? Y otro factor clave es obviamente el presupuesto de los clientes. Entonces si te están pagando bajo salario mensual o bajas cuotas o lo que sea, no vas a invertir mucho tu tiempo en este proceso porque como dije, están subiendo tu poco o nada de dinero. Entonces simplemente vas a garabatear algunas ideas y pasar a Adobe XD. Pero si te están pagando buen dinero, si tienes tiempo suficiente para hacer esto y tienes talento y tienes algunas ideas que necesitas para mostrarlas. Y luego puedes invertir mucho tiempo en este proceso, sobre todo si estás compartiendo con él con otros diseñadores, en equipo de deuda o con el cliente que quiere ser práctico y así sucesivamente. Entonces básicamente estos dos factores, tiempo y el dinero, son los que diferencian estos diferentes estilos. Por lo que me dio el estilo número uno, básicamente, voy a robar tres cartas así. Y en estas tres cartas, voy a mostrar estos tres estilos diferentes. Entonces esta es la imagen y en el Primer Estilo, que es solo estilo básico, para mostrar que esta es una imagen. Simplemente puedes hacer esto y mostrarles que, OK, esta es una imagen. Y puedes apuntar a tu cliente y decir, donde quiera que veas a esta oveja, significa que es una imagen. Y luego en el segundo estilo, si tienes un poco más de tiempo y con presupuesto, es un poco más grande, y entonces puedes hacer algo como esto. Todo el mundo ha visto iconos como este para las imágenes. Para que puedas señalarlos y decir lo que sea, tenemos una imagen, y esta es la imagen real, abolladura en el torniquetes. Lo que puedes hacer es dibujar en realidad en una hermosa montaña. Si sabes dibujar, puedes usar diferentes marcadores. Se puede usar el sombreado. Digamos que aquí tenemos maderas. Entonces obtienes la idea y obtienes la foto. También podemos dibujar nubes aquí o podemos usar diferentes colores y así sucesivamente. Entonces básicamente el diferenciador clave aquí son los detalles. Tienes una cantidad limitada de tiempo. Si tienes un presupuesto pequeño a la mano, entonces vas a usar este. Si tienes todo lo que dije un poco más grande, vas a usar este. Y si quieres, y si tienes mucho tiempo, mucho dinero en tus manos, y entonces puedes usar este. Se pueden utilizar diferentes marcadores de color. Puedes hacer lo que quieras. Pero aquí, y déjenme mostrarles en realidad porque tengo algunos marcadores a mano. Entonces digamos que vas a usar este estilo o tener este marcador aquí mismo. Y solo quiero mostrarles rápidamente cuánto tiempo nos va a llevar esto. Y sólo para ilustrar mi punto, y sólo para que se pueda ver la diferencia aquí. Entonces en realidad hice un proyecto como este en el pasado. El cliente tenía un presupuesto masivo y quieren demostrárselo a las partes interesadas solo para que todos puedan ver. Entonces utilicé este método, pero eso fue sólo una vez, la mayoría de veces. En realidad estoy combinando esto y este estilo. Entonces dependiendo donde estés poniendo tus imágenes, sobre todo para los avatares. Por lo que 40 dólares, puedes hacer un circuito como este. Se puede hacer así. Entonces básicamente adeuda tu avatar. O por algunas veces incluso puedes ir así. Para que puedas pintar en las partes de tu avatar solo para que destaque un poco en la página. Puedes hacer diferentes colores. Entonces dependiendo de tu avatar, obviamente, puedes pintar un final. Por lo que realmente depende de ti o de tus clientes, tu presupuesto y demás. No quiero alargar mucho más. Creo que obtienes la foto. Entonces vamos ahora más uno. Imaginemos que tenemos un título justo aquí justo debajo de este carrito. Entonces para este primer estilo, en realidad solo voy a dibujar una linda línea gruesa como esta. Entonces este es nuestro título. Este es un subtítulo, por lo que es un poco más pequeño. Y por último, para el párrafo, sólo podemos usar líneas como estas. Entonces tenemos nuestra imagen, título, subtítulo, y un párrafo. También puedes usar algo como esto. Por lo que puedes bajar un int solo un poquito para diferenciar estos. Puedes usar diferentes colores y así sucesivamente. Pero el método más rápido es este método. Y digamos que tenemos un botón de llamada a la acción aquí abajo. Lo que podemos hacer es realmente dibujar un botón como este y llamarlo un día. A lo mejor puedes hacer esto solo para indicar que se trata de un botón para el estilo número dos, lo que podemos hacer es anotar título, subtítulo, párrafo. Y finalmente hacer un botón y escribir b n. para que puedas ver la diferencia entre estos dos. Esto es obviamente, una vez más, mucho más rápido, mucho más rápido. Esto es sólo un poco más lento. Botón nos da más información y puedes combinar estos dos. Por ejemplo, puede escribir título, subtítulo y, a continuación, líneas de deberes. Y para el btn, usa este estilo si quieres. Ahora por fin, para este último Style, obviamente vas a usar una información real dentro. Entonces digamos Montaña. A ver, Parque Yellowstone. Nosotros vamos a escribir párrafos reales, así que texto real va aquí y no voy a perder demasiado su tiempo con esto. Pero te puedes imaginar que realmente vas a escribir texto real, que va a ir aquí. Ahora para el btn, vamos a darle un como esto. Y veamos cargar o leer más. Y en realidad voy a usar mi marcador una vez más aquí mismo. Voy a llamarlo mi botón así. Y en realidad voy a usar otro bolígrafo sólo para ilustrar cuánto tiempo me está llevando esto. Entonces éste sólo para agregar bajo OK sombra alrededor de mi botón. Por lo que básicamente se puede ver sólo a partir de estos tres ejemplos, qué se puede hacer con estos y cómo se diferencian entre sí. Por lo que tenemos versión más simple, almacenamiento rápido y la que vas a usar la mayor parte del tiempo. Ahora tenemos una versión un poco más lenta, pero puedes usar algunos de los elementos de dispersión en esta versión. Y tenemos la versión más lenta, pero la más detallada y la que probablemente nunca vas a usar. Pero quería mostrarte eso, ese de todos modos. Para los avatares e imágenes de tipo muerto, recomiendo usar algún tipo de iconos. Digamos que tienes características en tu página. Y en lugar de solo incluir un círculo como este y llamarlo un día, quizá puedas hacer algo como esto. A lo mejor puedes incluir una estrella, nuestro icono de diferente tipo, y señaló en uno de los wireframes que esta es una característica. A ver. Para que puedas saber, tus clientes, pueden conocer desarrolladores y diseñadores y así sucesivamente, qué es eso en realidad. Entonces eso es todo para este video. De verdad espero que hayas entendido algunas diferencias entre estos estilos wireframing. En el siguiente video, en realidad vamos a empezar un uso de esta navegación. Y en realidad vamos a empezar a diseñar algunas páginas y a sentar algunos elementos. Entonces te veré ahí. 18. Patres de papel papel 1: En este video, vamos a empezar con nuestros wireframes y vamos a empezar con la página de inicio. Homepage básicamente va a ser nuestra página básica de préstamos, que va a mostrar la mayoría de la información que están ofreciendo, así como con algún tipo de publicación de blog o noticias o algo así. Entonces para empezar, voy a dibujar rápidamente un esquema que estás notando que no estoy usando ninguna regla. Puedes usar los gobernantes si quieres. Creo que es más rápido así, sobre todo historia o naughts atracando como yo. Pero si quieres usar reglas para hacerlo elegante, si estás compartiendo esto con tu cliente, si quieres lucir un poco más profesional, recomiendo usar una regla solo básicamente para estos contornos. Entonces si recuerdas, tenemos esta navegación superior y tenemos esta navegación inferior. Ahora, no voy a perder demasiado tiempo y escribir todo esto. Entonces sólo voy a dibujar en más baja, sólo voy a dibujar en iniciar sesión. Porque sabemos cuáles son estos ya de este ejemplo anterior que les mostré. Y porque lo tengo a mano, siempre puedo comprobarlo y ver qué es todo. Entonces en lugar de anotar nada porque esta es nuestra página de inicio, solo vamos a vivir este espacio en blanco porque los usuarios no hicieron clic en ninguna parte. Entonces si hacen clic, por ejemplo, en las cuentas, veamos que podemos usar este selector justo aquí en la parte inferior. puedan saber que los clicked en las cuentas y actualmente están en esa página en particular. Pero como no se hace clic en nada, dejémoslo en blanco así. Entonces permítanme dibujar otro esquema de este lado así. Y siempre me gusta hacer esto porque tengo un espacio vacío de este lado para poder usar ese espacio para recordarme y darme notas de lo que están todas estas cosas de este lado de la página. Entonces para empezar, voy a dibujar en una imagen de héroe. Entonces sólo voy a dibujarlo así. Y aquí están las imágenes, básicamente algo que llama la atención de tus usuarios. Entonces en este caso, vamos a usar imagen y un texto. Vamos a usar imagen en el lado derecho. Entonces aquí, y en realidad voy a dibujar una imagen como lo hicimos anteriormente. Entonces déjame hacer esto. Déjame hacer suciedad, y llamémoslo un trato. Démosle una imagen. Y quizá podamos usar la imagen de la gente. Las personas son mg porque D quieren dis sitio web y su enfoque principal es en las personas más jóvenes. Entonces quizá podamos hacer un par de personas aquí. A lo mejor podemos hacer un grupo de personas. A lo mejor podemos hacer masculino y femenino porque no son cliente específico de género. También quieren clientes masculinos y femeninos. Entonces lo que podemos hacer aquí del lado derecho es título, texto o un subtítulo, como quieras llamarlo, y una ciudad. Por lo que nos va a llevar a alguna parte de la página web que es importante para ellos. Por lo que puedes ver un poco mejor ahora como un hub con zoom, todo esto un poco mira por debajo de esto, podemos cumplir con algunos servicios. Entonces vamos a anotar Servicios. Y obviamente la copia va a depender de algunas cosas. ¿ El Cliente te proporcionó la copia REO haciendo la copia, pero por la parte wireframe y Por el bien del proyecto y esta parte del proyecto, no tienes que ser demasiado específico. Siempre puedes cambiar estas etiquetas dentro de Adobe XD una vez que realmente traigas estos wireframes. Por lo que para estos servicios, podemos usar algunas cajas. Entonces démosle tres cajas, por ejemplo, así. Y para las cajas, Tal vez pueda usar algunos iconos. Justo aquí arriba a la izquierda. Puedo darle un título. Puedo darle un párrafo como este y quizá leer más. Para que los usuarios luego puedan hacer clic aquí y vamos a darle. Ya veo. Y porque a veces estos son demasiado pequeños para dibujar cualquier tipo de iconos en su interior. Por lo que sólo puede apuntar su flecha y dijo que este es el ICN. Hagamos estos otros. Por lo que induco leer más, leer más. Y como pueden ver, solo estoy anotando básicamente y se puede ver claramente lo rápido que es esto. Y una también, una cosa es que puedes ver que los estoy alineando de un lado. estoy forrando en el otro lado porque en realidad voy a usar una rejilla en el interior. Y por eso estoy dibujando mis wireframes así. A continuación. Lo que podemos incluir es porque es un banco, podemos incluir algún tipo de cambio por ejemplo. Y tal vez podamos hacer una tira como esta. Cambio de tasa. La fecha va a estar justo aquí. Te estás dando cuenta de que solo estoy anotando fecha. No voy a incluir la fecha real en este punto. Podemos hacer bandera e información aquí mismo, así que esta es nuestra bandera. Y podemos hacer algunas monedas importantes como el euro, USD, el yen japonés, y así sucesivamente, lo que sea en este mercado y en este banco en un requiere, no estás viendo, no estoy perdiendo el tiempo sino anotando todo. Y este es nuestro primer estilo que te mostré anteriormente. Por lo que puedes ver ya estoy combinando estos dos estilos, este estilo para la imagen. Y se puede ver que está justo aquí. Y básicamente este otro estilo para todos estos otros elementos, porque solo quiero hacer esto rápidamente. Quería ser rápido y arrojar hacia abajo algunas ideas que ya tengo. Lo que podemos hacer aquí mismo es dibujar una imagen porque quieren incluir algunas de sus características medias que están usando. Entonces llamémoslo título. Démosle un párrafo. Elementos, dale btn. Y porque tal vez estos son sus servidores, esta es su promo, esta alguna vez yo adeudo. Debajo de eso, lo que podemos hacer es usar otra caja o quizás cajas de herramientas e incluir servicios adicionales y que tienen. Entonces vamos a darle imagen. Por lo que yo mg. También puedes hacer esto. O puedes hacer esto lo que quieras, lo que sea más fácil. Y entonces tal vez título, tal vez párrafo. Y podemos incluir un botón a continuación. Este btn solo para que sepas lo que está por debajo de esa noticia. Y lo que podemos hacer es incluir tres GridLayout aquí. Imágenes. Se puede ver lo rápido y desordenado que es este hogar no usando líneas rectas. Simplemente estoy bajando lo que tengo en mi cabeza actualmente. Por lo que podemos tener un título, subtítulo y tal vez una lectura más. En todos estos. Debajo de eso lo que podemos hacer es tener una tira de información. Yo diría que tal vez pueda incluir un logotipo justo aquí solo para recordarle a la gente. Entonces aquí tenemos un número telefónico. Por ejemplo. Aquí tenemos, vamos a ver, ubicaciones. Y finalmente aquí tenemos un correo electrónico. Por lo que rápidamente pueden llegar a esta empresa y pueden ponerse en contacto con ellos. Y por último, lo que tenemos al fondo es el pie de página. Y el pie de página va a ser básicamente uno grande porque este banco tiene muchos servicios diferentes. Por lo que estos son nuestros principales servicios desde nuestra navegación. Y te voy a mostrar eso en tan solo un segundo. Entonces si traigo esto de vuelta, se puede ver el video. Tenemos cuentas, pertenece, autos y demás. Entonces esto es lo que va a ser esto. Entonces esto van a ser cuentas, pulmones, tarjetas y demás. Y debajo de cada uno de estos, vamos a tener elementos de navegación adicionales. Yo, artículos de foto. Porque por ejemplo, digamos que esta cuenta es ésta. Y como mencioné, tienen cuentas corrientes, cuenta de ahorro y demás. Entonces estos son los qué, estos son justo aquí. Vamos a escribir o escribir logo o lo que sea n, llamémoslo un día. Y esta es básicamente nuestra playa de casa. Entonces lo que también puedes hacer es escribir encima o característica de ellos. Por lo que induce página de inicio. Como se puede ver aquí mismo en la parte superior. Entonces tenemos homepage aquí solo para que, ya sabes, diseñadores, clientes y todos los demás sepan estén en la misma página. Entonces todo el mundo sabe lo que es esto, es que se puede ver este proceso no nos llevó mucho tiempo, diez minutos porque estoy hablando demasiado. Pero solo te puedes imaginar si estás arrojando ideas, puedes hacer algo como esto en 3-5 minutos. Depende realmente de lo grandes que sean las páginas, cuántos elementos hay y lo que quieras incluir. Una última cosa que quiero hacer porque como dijo, estoy dejando este espacio aquí mismo. Entonces para este, no necesito nada porque dice servicios esto como tipos de cambio, así que ya sabes lo que es. Pero para esto, tal vez pueda ver promo o algo más, tal vez ofrecer. Y podemos ver con el cliente lo que en realidad es importante incluir aquí mismo. Para éste, quizá paquetes o cuentas o combinados como suciedad. Y estos son solo artículos de noticias. Otro estilo que puedes hacer es poner tu estructura alámbrica en el centro de tu papel y luego tener espacios vacíos a izquierda y derecha. Y puedes usar esos espacios vacíos para anotar toda esta información adicional que vas a utilizar en tu página. Eso es básicamente todo para este video, te veré en el siguiente donde vamos a empezar con las cuentas y básicamente vamos a usar el mismo diseño, pero algunas diferencias. Y eso lo voy a explicar en el siguiente video. Entonces te veré ahí. 19. Patres de papel papel 2 2: Entonces en este video vamos a empezar con cuentas. Y si no quieres desperdiciar demasiado papel, puedes hacer lo que hice con estos ejemplos. Por lo que puedes usar un lado para un phage, puedes usar otro sitio para otras páginas y sólido. Pero porque tengo esta hoja de papel y la voy a utilizar en algunos otros proyectos futuros. Simplemente puedes estar pendiente de desperdiciar papel y gastar demasiado dinero básicamente. Entonces empecemos con las cuentas, si te acuerdas, y solo estoy trayendo esto para mantenerte al día. Tenemos cuentas aquí mismo y la voy a anotar. Entonces vamos a hacer lo mismo que hicimos con la anterior. Esta semana. Vamos a incluir la parte superior. Ahora, vamos a incluir un lado de la siesta. Entonces básicamente esta caja estilo nav, botón logo, btn y cuentas como esta. No sé deletrear hoy el que no le presta atención a eso. Entonces si elimino esto para decidir, puedes ver claramente, si me acerco un poco más, cuentas y solo por tu bien, soncuentas y solo por tu bien, y lo vamos a anotar aquí, así que así. Por lo que puede saber en la parte superior de la página qué es y qué hay que dibujar en este. Y de verdad te recomiendo que hagas esto por todas tus páginas. Pero ahora sigamos adelante. Entonces voy a extender esto hacia abajo sólo un poquito. Lo que realmente vamos a hacer es básicamente usar el mismo diseño como hicimos aquí mismo con la página de inicio. Entonces voy a usar esta misma sección de héroes para todas mis páginas porque me da una gran oportunidad solo para mostrar algunas diferencias clave entre todas estas páginas. Pero vamos a darle algo de giro. En lugar de hacerlo como aquí en la página principal donde la imagen está en el lado derecho. El texto está en el lado izquierdo. Voltémoslo, y hagámoslo. Entonces dibujemos una línea como esta para nuestra sección de héroes. Y hagamos un héroe de imagen. Entonces básicamente lo mismo. Y lo voy a poner aquí para que la gente, soy G. Como pueden ver, déjame acercar un poco más. Entonces la gente imagina y sólo para que no pueda lo que es esto. Y puedo poner el título aquí, texto y CTA. Ahora bien, este llamado a la acción en realidad no tiene que llevarte a páginas adicionales como está en la página de inicio. Porque en la página de inicio quieres promocionar lo que es más importante para tu proyecto o tu marca o lo que sea. Pero en estas páginas internas, que esto en realidad es porque estamos en el discurso de la cuenta. En realidad quieres promover secciones de esa página para que no quieras que la gente pierda y pierda demasiado tiempo. Se los quiere llevar directamente a esa sección. Entonces tenemos una cuenta, sabemos, por ejemplo, por la experiencia de los bancos. La mayoría de la gente abre una cuenta corriente. Para que puedas, al hacer clic ahí, puede llevarlos directamente a la sección de cuenta corriente. Entonces lo que realmente vamos a escribir esto a continuación es quizás abrir tu cuenta perfecta o tu cuenta o lo que sea. Hoy o como quiera estructurar las muertes se escriben sobre cómo escribir Daisy y Tom fear. Entonces la atención que, lo que podemos hacer es usar una fila de iconos vio, digamos ¿tenían para servicios? Por lo que podemos usar para diferentes iconos como este. Entonces esto es i, c, n. Y aquí realmente puedes dibujar porque estas son un poco más grandes, puedes dibujar estrellas, por ejemplo, solo para indicar que este es tu ícono. Puedes usar cualquier otro importado que puedas dibujar así. Entonces realmente depende de ti cuánto tiempo quieres invertir en este obviamente vio que puede garabatear rápidamente y se puede ver ahí mismo. Entonces estas cuentas son básicamente cuentas diferentes y en realidad voy a escribir los nombres de estas cuentas. Entonces por ejemplo, tarta, extranjera, millennial, y premium. En realidad estoy escribiendo d nombres de cuenta que el banco me ha proporcionado para que sepa cuál es cuál. Ahora estos iconos van a ser un poco diferentes unos de otros porque queremos ilustrar en qué es lo que el usuario ha hecho clic. Entonces cuando el usuario ha hecho clic en algo, tal vez el icono se va en blanco y negro. Y todos estos iconos están en color. Entonces, vamos a anotar eso. Por lo que ICM, blanco y negro. Cuando se hace clic, color, cuando no. Se puede ver justo aquí de este lado. Entonces esta sección aquí, como sigo diciendo, obviamente es realmente útil porque puedes usarlo a tu favor. Se pueden anotar algunas notas. Una vez más, si vuelves a este proyecto, digamos una semana después, si le muestras estos wireframes a un cliente, quizá estés esperando la respuesta, tal vez te vuelvan en una semana, dos semanas o lo que sea. Podrás entender y saber cuál fue tu proceso de pensamiento cuando realmente creaste D. Así que por eso sigo diciendo que este espacio es realmente útil. Y ahora abajo escritorio, pero ver que este icono está seleccionado. Tomémoslo un poco. Y solo para mostrar que está seleccionado, Tal vez podamos hacer una sombra de gota a su alrededor solo para que demostremos que está seleccionada. Debajo de eso, quizá podamos incluir una imagen. A lo mejor podemos incluir, así que digamos Iniciar cuenta. Porque es lo que es. Tenemos un párrafo justo aquí y tenemos un llamado a la acción. Y quizá pueda decir aplicar ahora. Y cuando un usuario hace clic en este botón aplicar ahora, los va a llevar al foro en línea que un banco ya ha preparado. No vamos a diseñar esto porque muchas de las veces vas a hablar con tus clientes, lo que han preparado, lo que no tienen. Te daré un ejemplo, un ejemplo rápido, y el que ves la mayor parte del tiempo, nuestros mapas, muchos de los negocios están usando Google Maps porque la integración con el sitio web es extremadamente rápida. Es extremadamente fácil. Cualquiera puede hacerlo, especialmente negocios más pequeños con plug-ins, si la gente está usando sitios web de WordPress, por ejemplo, plug-ins en todas partes. Entonces, ¿por qué perder el tiempo, perder el presupuesto del cliente rediseñando un mapa, lo que puedes hacer en el caso de Maps es simplemente hacer rectángulo y anotar mapa. En ese caso particular. Muchas veces los clientes también necesitan algunos reproductores de medios. Por lo que una vez más, la integración es básicamente atrevimiento. Simplemente se integran atreven a media-player. Y en este caso básicamente están usando un formulario. Están usando un formulario en línea que ya tienen, que ya funciona. Y básicamente no importa cómo se vea. Entonces cuando el usuario hace clic aquí en este botón de suministro ahora, los va a llevar externamente a un formulario que van a llenar con su información personal. Y tal vez pueda llevarlos a la página de confirmación la cual puedes llevar al diseño y ver con declinado a si eso es necesario. Si no tienen la página de Confirmación, los va a llevar de vuelta, por ejemplo, a esta página una vez que realmente la llenen ahí. Y digamos que nuestro pequeño pop-up puede aparecer y hacerles saber deuda, el cajero del banco va a volver con ellos lo antes posible. Debajo de esta sección, lo que realmente vamos a incluir y la destrucción va a estar en todas las páginas son preguntas comunes. Preguntas tan comunes. Y para este, vamos a darle división de tres. Al igual que esto. Como puedes ver, esto es extremadamente desordenado, extremadamente rápido. Pero ese es el punto de estos wireframes de papel. Por lo que vamos a utilizar el ICN. Ya veo, y veo n justo aquí. Entonces tenemos título, tenemos un párrafo explicando, por ejemplo, la sección de este. Entonces digamos que estas son nuestras preguntas de cuenta, preguntas bancarias, herramientas útiles, lo que sea, y los enlaces pueden estar aquí en forma del texto. Entonces, vamos a anotar eso. Veo título más párrafo y luego respuestas. Respuestas clicables como esa. Debajo de eso, vamos a tener nuestra franja infinita. Por lo que logo. Lo que hicimos fue despedir miembro Ubicación, teléfono, y correo electrónico aquí. En realidad vamos a incluir información aquí, pero no pierdas demasiado tiempo en esta sección. Y finalmente cuatro término justo aquí abajo. Simplemente puedes escribirlo a pie de página porque obviamente lo creamos en el ejemplo anterior aquí. Y si quieres, puedes invertir tiempo, puedes poner en el esfuerzo y hacer exactamente lo mismo en todas estas páginas. No voy a hacer eso. Yo sólo quiero acelerar un poco las cosas. Pero una vez más, si quieres, si tienes tiempo, si tienes presupuesto, puedes hacerlo por todas tus páginas. Entonces déjame acercar un poco. Al igual que solo tipo de se puede ver cómo se ve nuestra página en este momento. Entonces, como puedes ver, todo está tomando forma muy bien. Todo se ve como debería ser, ya están empezando a conseguir algún tipo de maquetación que vamos a utilizar en todas las páginas. Entonces como ya lo mencioné, tenemos nuestro top nav. Tenemos esta caja ahora, que es nuestra media f Tenemos la sección de héroes que en realidad vamos a copiar pegar en todas nuestras otras páginas. Ya tenemos algunos diseños que podemos explorar y utilizar en páginas adicionales en forma de estos iconos. Ya tenemos estas imágenes haría texto y un botón para que podamos voltearlas. Por ejemplo, podemos poner una imagen en la parte superior, podemos poner texto abajo y luego botón en un lado. También tenemos estas tarjetas las cuales podemos explorar. Y por ejemplo, en algunos de ellos, quizá podamos incluir imágenes aquí mismo. Podemos quizá incluir diferentes estilos de botones y así sucesivamente. Por lo que ya empezamos a tener estos ejemplos de maquetación y estas ideas de maquetación. Entonces en el siguiente video, realidad vamos a pasar a los préstamos. Y te voy a mostrar básicamente este mismo dengue, pero en un paquete diferente solo para que puedas ver cómo puedes explorar concepto de descenso en otras páginas. Entonces te veré ahí. 20. Patres de papel papel 3 3: Entonces en este video vamos a seguir donde lo dejamos en el anterior y vamos a empezar con la página de Préstamos. puedes ver que ya incluí toda esta información para ahorrar un poco de tiempo. Entonces básicamente lo mismo que con estos otros, pero justo aquí, dice un préstamo. Si lo puedes ver un poco mejor. Aquí. Y debajo de eso, lo que podemos hacer es usar el mismo diseño que hicimos en el anterior. Y voy a escribir, necesito un largo también. Y puedes ver que estoy empezando a usar un texto real aquí. Y ya dije que en los videos anteriores se puede hacer una combinación de textos reales y falsos. Y yo solo creo que esto es apropiado tener algo similar en su página web por el momento ya. Pero voy a apuntar necesito un préstamo para y luego se les puede dar básicamente el mismo diseño como hicimos en el video anterior. Entonces, por ejemplo, puedes incluir y estas informaciones. Efectivo tan rápido. Y también podemos usar iconos aquí, como hicimos en los ejemplos anteriores. Biochar, casa y finanzas o lo que sea. Por lo que obviamente vamos a cambiar esto en la sesión de wireframing, pero esto es sólo un ejemplo rápido. Entonces digamos que esto es lo que seleccionaron visto en el ejemplo anterior. Préstamo en efectivo tan rápido, y tal vez podamos anotarlo y conseguir un efectivo largo en 20 minutos o 30 minutos o lo que sea. Así. Esto se va a centrar obviamente en los descendientes. Pero porque sólo lo estoy haciendo a mano alzada, se puede ver un poco fuera de aquí. También se puede apuntar eso. Centra texto así, solo para que puedas saberlo. Y luego fui a un diseño similar. Por lo que imagen en el lado izquierdo. Pero en lugar de solo el texto, podemos crear algún tipo de características. Entonces démosle aquí el ICN. Y veamos efectivo en 30 minutos con un texto así. ¿ Verdad? Skew it. Documentación de ICM. A lo mejor necesitan preparar alguna documentación porque no se puede simplemente presentarse en un banco y pedir un trato de préstamo. Te pediré algo de información. Por ejemplo, su licencia de conducir, usted es actualmente información praderas información bancaria y así sucesivamente y así sucesivamente. A ver. En línea, porque tal vez se pueda hacer esto en línea. Entonces si comparo esto con nuestro ejemplo anterior, ya puedes ver lo que estoy haciendo aquí. Entonces estoy usando este ejemplo anterior con una imagen, texto y un botón. Y se puede ver que insinué todos esos principios similares básicamente a este ejemplo. Simplemente en lugar de texto, estoy usando iconos y la imagen de texto sigue en el lado izquierdo, pero tal vez ahora pueda ser un poco más alto para acomodar toda esta información. Esto puede ser más estrecho dependiendo de este texto, hay que pensar en todas estas cosas debido al diseño receptivo. Tan insensible más adelante, tal vez esta imagen en un teléfono, vamos a ver, puede ir de ancho completo. Y entonces todos estos pueden ir uno encima del otro como si estuvieran aquí, pero en el centro de tu pantalla porque estás en la pantalla del teléfono. Ahora, sigamos adelante y diseñamos algunas otras cosas. Entonces veamos deudas. Puedo escribir aquí, por ejemplo, respuesta en 20 minutos. Porque son realmente rápidos con estos préstamos. lo mejor puedo poner aquí un párrafo de texto y llamar a la acción que dice aplicar ahora. Así. En lugar de dibujar todas estas otras cosas adicionales, si recuerdas del video anterior y lo siento, esto bonito, solo estoy sacando papeles dentro y fuera. Entonces en lugar de dibujar toda esta sección, solo escribamos preguntas com y pongamos tres cajas porque va a ser mucho más fácil para nosotros entender lo que es. Preguntas tan comunes. Pondré tres cajas así para ahorrar espacio y tiempo. Esta es nuestra tira de información. Entonces logo, debido a que estos iconos son realmente simples, puedes dibujarlos fácilmente. Y por último, tenemos correo electrónico, como pueden ver. Y por último, podemos escribir en pie de página y logo en la parte inferior. Por lo que puedes ver que este proceso no tiene que llevarte demasiado tiempo. Realmente puedes hacerlo fácilmente y de manera rápida. Entonces puedes ver que básicamente tenemos un diseño similar hacia la playa anterior, pero la estamos explorando de una manera diferente. Entonces en cambio, como dije, una imagen y texto y un botón aquí mismo tenemos un ícono de imagen, texto y botón se ha movido abajo, que se aplica ahora botón de llamada a la acción, esto y esto y esto, básicamente lo mismo. Esto y todas estas partes superiores son básicamente las mismas. Por lo que sólo vamos a seguir donde lo dejamos con todas nuestras próximas playas y la deuda va a venir después de ésta. Y básicamente vamos a utilizar estos elementos de diferentes tipos de maneras. Entonces eso es todo para este video, y te veré en el siguiente. 21. Patres de papel papel 4: Ahora vamos a crear una página para las tarjetas. Entonces para este discurso, diácono, usa diferentes tarjetas o tarjetas de crédito, tarjetas de débito. Pueden crear sus propias tarjetas y tal vez incluso tarjetas de regalo para que también puedan explorar esa opción. Por lo que podemos tener un título aquí, tal vez pueda anotar compañero diario. A ver. Perdón por el perrito y el fondo si puedes oírlo. Pero no puede hacer nada al respecto. A lo mejor podemos hacer nuestro párrafo aquí mismo. Y veamos que aquí podemos incluir nuestra imagen actual. Entonces tal vez esto es un carritos o 1-2-3, 4-5-6. Y hasta puedo escribirlo aquí abajo. Tarjeta para ahorrar un poco de tiempo. Logo puede ir aquí, Visa puede ir aquí tal vez. Y el Kingo justo aquí. Al igual que la deuda, sólo para que sepamos que esto es un carrito. A lo mejor podemos ponerlo en algún tipo de forma. Puede ser que podamos usar Adobe XD para incluir algunas animaciones diferentes dentro de él, pero realmente depende, una vez más, presupuesto de tiempo y todo lo demás de lo que hablamos antes. Bueno, es un muerto por debajo de dat. Podemos usar tarjetas de crédito. Y quizá podamos crecer con Visa y MasterCard. A lo mejor tienen algunos otros en opción, pero no lo sabemos por el momento. Pero si lo hacen, aquí podemos incluir diferentes tipos de secciones. Por lo que para este apartado, podemos incluir una corriente. Y en realidad voy a apuntar. Y veamos, Visa, corrientes de crédito, muster actual. Y básicamente lo mismo. Podemos tener una descripción y quizá podamos haber aplicado ahora como enlace, que en realidad los va a llevar al foro de aplicación externo del que hablamos en los videos anteriores. Entonces tal vez puedan simplemente hacer clic aquí e ir a esa forma exterior. Entonces este es solo nuestro gráfico. Esto es sólo para mostrarles cómo pueden verse algunas tarjetas en el autobús. Cómo podrían verse algunas tarjetas personalizadas solo para darles algún interés visual. Pero aquí, como el Scroll hacia abajo, pueden ver tarjetas de crédito y en oferta nuestra Visa y MasterCard, tal vez puedan incluir alguna otra como American Express o cualquier otro fabricante de tarjetas D no puede concluir, atreve. Por lo que las disecciones son injustas para guiar a los usuarios a lo que esté disponible en este momento. Entonces vamos a incluir las mismas secciones, pero para las tarjetas de débito, vamos a tener lo mismo aquí. Por lo que dos tarjeta actual. Y No perdamos demasiado tiempo porque estas secciones son las mismas, la misma mirada y sensación. Diferente. Diseño de tarjeta. Entonces, por ejemplo, podemos incluir un diseño de auto diferente en su interior. Tan solo para ilustrar que las tarjetas de débito y crédito son diferentes para que puedan ver, por ejemplo, si las tienes en su billetera, pueden ver cuál es débito, cuál es crédito, obviamente, medio, que podemos tener una sección, por ejemplo, crear la tuya propia así. Y tal vez podamos incluir otra corriente con algún diseño puede ser que podamos poner una sombra de gota, tal vez podamos poner una forma de fondo o algún tipo o lo que sea y simplemente corriente personalizada como esa. Por lo que en realidad vamos a diseñar descarte más adelante en un sitio fuera de Adobe XD. Y quizá podamos poner un llamado a la acción. Crea el tuyo. Este CTA realmente los va a llevar a la forma d necesidad de llenar el formulario que ya tiene el banco. Después pueden empezar a crear su corriente perfecta. Digamos que tienen este creador de carros dentro del banco, por lo que tienen que crecer en tienda y ver diferentes opciones. Pero están planeando poner estas opciones en línea para que la gente pueda elegir entre diferentes formas, colores, puedan elegir Visa, MasterCard, ¿hay fabricantes? Pueden, por ejemplo, incluir diferentes imágenes dentro y así sucesivamente. Pero eso es todo con el banco, eso es todo con ellos. De lo que quieren darle una opción D a los usuarios para este. Por último, a continuación de eso podemos incluir una sección con una imagen y llamarla y tarjetas de regalo. Podemos incluir un párrafo y por ejemplo, y sin embargo el tuyo. Y pueden solicitar la tarjeta de regalo. Pueden poner el dinero en el auto al final, después pueden darlo como regalo a algunos de sus familiares, amigos, o lo que sea. Debajo de eso, vamos a tener preguntas comunes. Vamos a hacer lo mismo que hicimos en la página anterior. Vamos a tener Info strip, así logo, Localización, teléfono, correo electrónico. Y finalmente pie de página en la parte inferior. Te vas a dar cuenta, si hago zoom un poco así, vas a notar que sobre todo esta sección en la parte inferior está realmente aplastada. Pero eso es realmente a propósito porque lo principal y diferenciador de esta página es sección desde aquí. Entonces justo debajo de la imagen de héroe, hasta aquí, justo por encima de las preguntas comunes. Y debido a que ya tenemos esto, básicamente esto es lo mismo deuda que diseñamos en páginas anteriores. Entonces, ¿cómo te mostrará en este ejemplo? Entonces esta es nuestra página de inicio. Vamos a usar básicamente este mismo diseño exacto con un texto de imagen y un botón. Simplemente estrechó un poco la imagen. Por ejemplo, tal vez incluir un poco menos de texto. A lo mejor este párrafo es mucho más grande que éste y demás. Así que no pierdas demasiado tiempo en tus wireframes que estamos dibujando mismos elementos una y otra vez y tratamos de que se vean perfectos. Ya sabes que esto es una imagen. La imagen puede ser más alta y más ancha o más estrecha, lo que sea. Puede tener, una sombra de gota y así sucesivamente, así sucesivamente. Por lo tanto, no pierdas demasiado tiempo en ello, simplemente dibujarlo y seguir adelante. Esta parte, como dije varias veces, es sólo un arrojado abajo todas tus ideas que tienes en la cabeza. Y quieres ponerlos en un trozo de papel solo para que puedas mostrárselo al cliente o a otros diseñadores. Esta es nuestra playa de tarjetas. Y básicamente nos estamos estrechando hasta el final de nuestro proceso de estructura alámbrica. Por lo que tenemos invertir inicio de sesión digital y te voy a mostrar un dashboard playa más tarde. Entonces te veré en el siguiente video donde pasamos a invertir playa. 22. Patres de papel papel 5 5: Pasemos ahora a la playa de invertir. Y una vez más lo mismo que antes, todo es igual aquí. Entonces sigamos ahora y esa es la escritura en la que quiero invertir. Y en realidad vamos a tener el mismo diseño que antes. Entonces les vamos a dar cuatro opciones diferentes, Soul y ver que esta primera es educación. Yo, éste, este segundo es de bienes raíces. Entonces la tercera es la familia. Y por último, esto es por deuda de jubilación. Y aquí vamos a incluir diferentes iconos. Voy a asegurarme de que este sea seleccionado igual como en todos los demás ejemplos. Y debajo de eso, podemos incluir otro título. Por lo tanto, invierte en un futuro más brillante o en el futuro. Copia. Vamos a tratar de ello una mujer más tarde quiere Adobe XD. Por lo que esta vez vamos a tener un diseño un poco diferente. Entonces vas a tener dos imágenes. Entonces vas a notar básicamente, como yo sigo hablando, esto es exactamente lo mismo, solo posicionado un poco diferente. Entonces vamos a tener un título aquí. Texto y un botón. Llamada a la acción, quizá aprenda más. Entonces titulo y desabotonado. A lo mejor CTA. Debajo de eso, vamos a tener otra imagen para que pueda ir desde aquí. Y vamos a ver, va a escribir en seguro tu futuro. Pero vamos a tener un párrafo de texto y botón de llamada a la acción, por ejemplo, aprender más. Y lo que hace esta sección con una imagen. Y se puede ver esta misma sección en otros Bart solo por ejemplo, en algunos lugares imágenes recortadas aquí para caber a la cuadrícula. Y en algunos casos se extiende al sitio de nuestra página. Y básicamente lo que es esto, es que toda esta sección se trata de todos estos de seguridad social o futuro. Puedes hacerlo invirtiendo en educación, invirtiendo en bienes raíces, invirtiendo, en familia, invirtiendo en el retiro. Básicamente, todos estos son para tu futuro. Por lo que este apartado te está diciendo lo importante que es invertir en cualquiera de estos. Y obviamente puedes escoger y elegir cualquiera de estos que quieras invertir en el futuro porque es educación. Y te va a dar dos paquetes de inversión diferentes para el paquete educativo. Entonces por eso decía antes sobre el pie de página, por ejemplo, vamos a mover todo este desorden desde arriba, que tienen un actualmente en el sitio web actual hasta el pie de página. Y en realidad vamos a distribuir todos estos elementos innecesarios desde la navegación principal hasta aquí. Entonces en lugar de tener, digamos invertir y luego bajar la educación y luego bajar, digamos dos de estos. Entonces tal vez esto pueda ser fondo de educación, este puede ser otro fondo, Becario Legado para nodo, lo que sea. Tienen seis opciones diferentes. Por lo que solo puedes imaginar el calendario aquí mismo dentro de la navegación. Por lo que es mucho más fácil a la vista. Es mucho más rápido para que la gente entienda si pones todo desde la navegación lo cual no es necesario. Por lo que invertir es necesario porque ese es uno de sus servicios clave y ofertas clave. Pero todas estas otras funciones y otras estadísticas no son necesarias para estar dentro de la navegación. Entonces por eso es importante desarmar tu navegador y puedes poner toda esa información en el pie de página. Si hay demasiada información en el pie de página, nadie le importa porque el foro siempre está en la parte inferior de la página, pero siempre puedes necesitarla un poco abajo e incluir algunos dropdowns para el pie de página también. Pero ese es el punto principal de este proceso de wireframing, solo para bajar tus ideas en un pedazo de papel y ver que todo lo que tienes frente a ti pertenece aquí. Van a incluir sección de parecer. Pregunta tan común. Con tres cajas parecen como antes, vamos a incluir info strip aquí. Entonces logo, esos tres iconos, tan mismo que antes. Así que así. Y finalmente pie de página justo aquí en la parte inferior. Y eso es básicamente todo para este discurso. Como pueden ver, no tengo ninguna nota, pero quizá más adelante, si recuerdo algo, tal vez pueda incluir algunos nodos. Entonces vamos a ver, tal vez incluir una caja alrededor del ícono. Sólo para indicar, tal vez, tal vez podamos incluir una caja como esta. Si el dinero de AIG seleccionado, tal vez la caja pueda tener un esquema. Puede tener una sombra de gota, puede tener algo más solo para indicar que esta caja está seleccionada y todas estas otras cajas no lo están. Por lo que siempre puedes jugar como sigue viendo con esta sección de tu ponencia. Y solo para incluir alguna información adicional aquí en la página. Si no, puedes dejarlo en blanco, y eso es básicamente todo. En el siguiente video, vamos a terminar esto agregando nuestro melocotón digital. Y allí te veré. 23. Patres de papel papel 6 6: Por lo que ahora terminemos nuestra página web con la era digital. Y como dije, al inicio de este Bij digital va a tener todos sus servicios digitales que la gente puede utilizar desde casa en sus teléfonos móviles, laptops, computadoras y así sucesivamente. Por lo que Daryl tiene título. Por lo que los servicios para el futuro moderno. Y en realidad vamos a usar el mismo diseño que hicimos en todas estas páginas. Entonces permítanme encontrar cuentas para cada uno, por ejemplo. Entonces voy a usar esto a mi ventaja y básicamente usar pilas de llamadas futuras en Adobe XD, que en realidad voy a mostrar más adelante cuando empecemos a diseñar. Porque hago esto de vez en cuando. Cuando empiezo a planear, ya empiezo a ver características que puedo usar dentro de Adobe XD para acelerar un poco las cosas. Y en mi ventaja, básicamente, hay una característica llamada pilas en Adobe XD. Te lo voy a mostrar más tarde. Pero básicamente lo que hace es que se puede cambiar entre estos. lo que por un lado se puede tener una imagen a la izquierda, por el otro se puede tener imagen a la derecha. Entonces básicamente somos sólo un clic de un botón y un interruptor. Se puede dar la vuelta a estos para acelerar un poco las cosas. También podemos hacer esto como componente y adaptar ese componente a lo largo de nuestro diseño. Por lo que por un lado puede ser de ancho completo. Por un lado puede ser así. Por lo que las puertas pueden ser nuestros estados componentes. Por lo que siempre estoy haciendo esto como deseo. Siempre planifica por delante nuestro hedor por delante. Qué puedo hacer con mis diseños más adelante cuando los traiga en deudas de Adobe XD, justo lo que hago. Y realmente recomendé que ustedes también lo hagan. Si apenas estás empezando con esto, no te preocupes, solo puedes empezar así y luego planear a medida que avanzas. Solo estoy tratando de agilizar mi proceso tanto como sea posible y de aumentar mi velocidad tanto como sea posible porque en cuanto termine esto, puedo llevarme más dinero a casa. Y luego desperdiciando mi dinero, mi tiempo y mis clientes presupuesto en algunas cosas innecesarias. Volvamos a esto. Entonces para esta primera, voy a hacer imagen aquí mismo. Entonces llamemos a esto Banca E. Démosle un párrafo. Vamos a darle botón. Y tal vez pueda decir aprender más o donde sea. Yo sólo voy a poner CTE. Ahora en esta siguiente, podemos poner una imagen aquí mismo. Esto puede ser m banca, por lo que la banca móvil. Lo mismo, párrafo, CTA. Deja más uno. Esto puede ser pagos de código QR o cura podría ser lo que sea. Y obviamente vamos a tratar con detalles cuando realmente pasemos a Adobe XD. Y esta es nuestra última, alma asistente virtual. Mi papá. Vamos a tener una llamada a la acción de párrafo. Y por último, a continuación, vamos a tener lo mismo de siempre. Preguntas tan comunes. Esas tres cajas en para despojado. Por lo que estos tres iconos y nuestro pie de página en la parte inferior. Por lo que se puede ver desde no hablar demasiado, lo rápido y fácil que es esto. Entonces básicamente puedo dejarme una nota, usar pilas en Adobe X. Y así lo que esto básicamente significa, una vez más, es que puedo crear una de estas. Puedo hacer una pila. Entonces puedo duplicarlo usando la función de grilla de oferta de Gary o cualquier función. De lo contrario tiene que ofrecer y luego simplemente los cambió. Así que izquierda una derecha, una izquierda a derecha simplemente con un clic de botón va a ser un montón de diversión y realmente súper simple. Lo vas a ver una vez que realmente lleguemos a la parte de diseño. Entonces eso es básicamente todo para este. En el siguiente video, te voy a mostrar un login y formularios de registro cómo podemos diseñar dosis. Un video. Después de eso, te voy a mostrar cómo puedes crear estas páginas de dashboards una vez más en un pedazo de papel. Y porque es importante, porque va a ser diferente. Y vamos a mover nuestra navegación hacia el lado izquierdo. lo vas a ver en ese video. Y después de esos videos, vamos a escanear estos y trasladarlos a Adobe XD, donde realmente los vamos a convertir en wireframes. Entonces te veré en el próximo. 24. Patres de papel papel 7: De acuerdo, ahora pasemos a las pantallas de inicio de sesión e inscríbase. Entonces lo que en realidad voy a hacer aquí, como pueden ver, volteo a mi papel. Entonces voy a hacer esto de una manera más grande. De este lado, vamos a tener una imagen. También puedes hacer esto. Y de este lado vamos a tener información. Obviamente, llamémoslo Iniciar sesión e Inscríbase. Obviamente, el registro va a tener un poco más de información que el login, porque login solo requiere tu email y contraseña. Por ejemplo, tal vez algunos coordinados Necesitas entrar con realmente varía de cliente a cliente. De lo que quieren incluir dentro. Cuando te estás registrando para obtener una cuenta con la empresa, necesitas traer información adicional. Entonces para el login e inscríbase, podemos usar exactamente el mismo layout, solo un poco diferente entre ellos, como dije, porque el registro tiene un poco más de información. Entonces por ejemplo, para iniciar sesión, Tal vez podamos escribir en Welcome back. Y accede a tu cuenta. Y déjenme acercar un poco más para que puedan ver esto un poco mejor. Ahora podemos tener un formulario, así que el correo electrónico y un foro pueden ir justo aquí. Obviamente puede ser de ancho completo. Tu correo electrónico y contraseña. Avance rápido puede ir bien aquí. Así. Y tal vez podamos escribir, no tengamos cuenta. Cuenta. Crea uno aquí. Y esto puede ser un enlace. Por lo que el enlace de pareja colegiado. Y los lleva a la página de registro. Por lo que este es nuestra camarilla de inicio de sesión Wendy. Ahí los va a llevar a que se inscriban. Y al inscribirse Quizás disco por escrito o ya tener una cuenta inicie sesión aquí y luego los lleve a la pantalla de inicio de sesión. Entonces eso es básicamente todo. Y esos son todos los cambios y la muerte necesita que ocurra entre estos dos porque otra información es básicamente la misma. Lo que podemos hacer aquí mismo es agregar un bonito gran llamado a la acción, que puede justo en login obviamente así. Y tal vez podamos escribir en contraseña olvidada. Porque la gente suele hacerlo. Y pueden hacer click dare. Podría llevarlos externamente a página adicional donde puedan llenar información, preguntas de seguridad y demás, por lo que muertos pueden recuperar su contraseña y su cuenta. Quizás incluso podamos incluir algunas formas aquí. Entonces tal vez pueda incluir la forma así. A lo mejor puede incluir una forma de círculo puede concluir algunas mentiras diferentes y así sucesivamente. Pero vamos a ver eso cuando pasemos al diseño. Una última cosa de esto antes de pasar al tablero y el video final de nuestra wireframing on paper series es, voy a pegarme a mi cuadrícula. Y digamos que se trata de seis columnas de ancho. Quizás si estamos en la pantalla de registro, esto puede ser de tres columnas de ancho para el correo electrónico. Entonces cuatro, perdón por el nombre y el apellido. Se trata de seis columnas de ancho solo para llenar el espacio. Y obviamente puedes adaptar estos campos de formulario a medida que avanzas. Y dependiendo de lo que necesites que los usuarios introduzcan dentro de ellos. Entonces eso es básicamente todo para este video. Te veré en la siguiente cuando vamos a empezar con el dashboard, te voy a mostrar algunos factores diferenciadores clave entre todas las páginas que dibujamos hasta ahora y la página del dashboard y por qué es diferente. Entonces te veré ahí. 25. Patres de papel papel 8: Entonces, finalmente, vamos a terminar ahora con nuestro propio tablero de instrumentos. Y lo siento, tengo que usar una configuración diferente porque tuve que mover mi cámara por los problemas de barrera. Entonces, finalmente, voy a escribir en tablero justo aquí en la parte superior. Por lo que parecía cuando todos los ejemplos anteriores voy a dibujar en bosquejo como este. Todo una vez más, parecen como en los ejemplos anteriores. Pero en este caso, porque es un tablero y necesitamos mostrar información adicional en la página. En realidad vamos a tener un tipo diferente de navegación. Vamos a tener en lugar de la navegación superior, que va a contener toda nuestra media, unas características de navegación importantes. Lo vamos a mover a la izquierda y todo el punto del tablero, si lo buscas en dribble o los fines de semana, tienes todos estos diferentes ejemplos es mostrar la mayor cantidad de datos posible, tanta información sobre tu cuenta, tanta información sobre y eres un gasto diferente, por ejemplo, tus tarjetas, últimas transacciones, gastos, etcétera. Entonces en lugar de abarrotar la página web principal con ella, por eso tenemos ese botón Iniciar sesión, que nos va a llevar al dashboard donde realmente vamos a presentar toda esa información de una manera agradable y fácil de entender . Ahora en cuanto a la navegación, en realidad vamos a tener que hacerlo. Entonces en realidad vamos a tener la tira superior aquí mismo con el logo. Vamos a tener Avatar con el nombre justo aquí en la parte superior. Y luego aquí mismo del lado izquierdo, vamos a tener nuestra navegación. Va a ser alrededor del diez o 15% del ancho general de la página. Y en lugar de tener nuestra navegación en la parte superior, vamos a mover hacia la izquierda, que es básicamente la mayoría de veces que vas a acceder a estos dashboard. Aquí vas a ver la navegación. Pero lo que eso le hace a nuestro diseño, en realidad vamos a mover nuestra grilla desde aquí. Entonces desde aquí, esta sección, veamos desde logo hasta aquí. En lugar de líneas corriendo por aquí, en realidad vamos a moverlo a esta sección aquí mismo. Por lo que este 80 o 85% se va a incluir en nuestro sistema de grilla así. Si bien esto va a estar vacío, vamos a lograr eso incrementando este margen izquierdo de nuestro sistema de red. Eso voy a mostrar en Adobe XD. Y en realidad vamos a usar esto sólo para la navegación para los tamaños de un escritorio y para los tamaños de tableta y móvil. Vamos a hacer lo mismo como siempre hacemos en esos tamaños. Y ves que on line es básicamente vamos a mover esta navegación a la parte superior o usar algunas negociaciones importantes clave como una nota pegajosa hacia abajo en la parte inferior. Entonces aquí vamos a tener un panel de control. Y todos estos van a contener iconos. Vamos a tener un conteo. Vamos a tener transacciones. Vamos a tener préstamos. Y te voy a mostrar todo esto en un segundo. Vamos a tener tarjetas, inversiones en digital. Y por último, un log out en la parte inferior. Como dije, puedes usar un cierre de sesión y posicionarlo aquí. Entonces, por ejemplo, si los usuarios hacen clic en esta imagen, tal vez pueda ser un desplegable, tal vez logout pueda estar ahí. Quizás pueda llevarlos de vuelta a la página principal, tal vez podría llevarlos a algunas ofertas que el banco tiene en este momento. Por lo que realmente depende de ti y de tu cliente acordar la muerte en términos de esta navegación aquí mismo, puedes ver, así que tenemos un dashboard, tenemos tarjeta de préstamos de transacción de cuenta. Entonces básicamente todas estas mismas cosas en lugar del tablero. Por lo que Dashboard va a ser nuestra pantalla de inicio para esta sección de dashboard. Al igual que tenemos casa para la pantalla de inicio para la sección de página web. Y tenemos un cierre de sesión aquí. propósito lo espacié así para propósitos de UX porque no quieres que los usuarios hagan clic accidentalmente aquí y que cierren la sesión de lectura queriendo hacerlo. Y como dije, vamos a utilizar en esta sección aquí mismo para la información. Entonces digamos que este usuario se llama Michael. Para que podamos escribir, bienvenido de nuevo Michael. Michael. Y aquí están sus estadísticas para esa fecha en particular. Entonces veamos por efecto. Para que él pueda saber o ella puede saber que estas son las estadísticas para esa fecha en particular. Para que podamos tener esos estados así. Entonces digamos cuenta media. Y digamos que tienen 30 llaves en su conteo, así. A continuación, vamos a tener tarjetas, digamos. Para que puedan elegir diferentes cartas como esta. Si hay múltiples tarjetas, podemos incluir la paginación. Para que puedan ver qué tarjeta se selecciona a partir de aquí. En realidad vamos a incluir otra sección aquí para el problema con la paginación como esta. O puede ser una sección de ayuda. Entonces en lugar de la promo, si el banco no tiene la promo en este momento, tal vez puedan ayudarlos y guiarlos a través. Entonces por ejemplo. ¿ Cuál es la sección larga? Cuál es la sección de carros y así sucesivamente. Pueden acceder rápidamente a ella simplemente haciendo clic o tocando su. Ahora y por debajo de eso vamos a tener transacciones por ejemplo, porque por eso viniste aquí básicamente. Por lo que las transacciones latus. Y esas transacciones pueden ser algo así como, no sé, hoy. La categoría café es comida con ICN y el gasto así que menos, vamos a ver, 15 dólares. Entonces, básicamente, puedes imaginar cómo se va a ver esto. Y obviamente podemos incluir en esta sección para repetir y bajar. Y yo sólo voy a terminar aquí. Y escribiendo una carga más. De acuerdo, aquí al fondo. Por lo que pueden hacer clic en una pestaña ahí para cargar más de estas transacciones. Y por ejemplo, podemos incluir un control deslizante aquí en el lado derecho, y pueden deslizarse hacia arriba y hacia abajo o cavar simplemente usar la rueda de desplazamiento su ratón para desplazarse hacia arriba y hacia abajo para ver todas sus transacciones. Pero como ya tenemos transacciones aquí, simplemente pueden hacer clic en Lord Moore Cualquiera puede llevarlas al discurso de transacción donde en realidad pueden ver más detalles. Por último, quizá podamos sumar gastos. Entonces veamos todos los gastos. Entonces tal vez diario, semanal, y mensual. Entonces así, tal vez podamos incluirlos. Por lo que todos los días, semanales, mensuales. Y tal vez podamos tener montos reales. Por lo que vendiendo esto. Por lo que obviamente daly va a ser más bajo, los semanarios dispuestos a ser más altos y mensualmente va a ser el más. Por último, tal vez podamos incluir algún gráfico aquí. Por lo que simplemente escribiré en gráfico. Y tal vez pueda incluir algo como ropa, comida, utilidades, y pagos de autos, tal vez. Al igual que esto. Por lo que en este gráfico puede mostrarlos por separado si hacen clic en ellos, o puede mostrarlos todos aquí mismo. Pero te puedes imaginar que va a ser un poco demasiado si tienes muchos de estos artículos aquí mismo. Para que el usuario iter pueda tocar todos estos por separado y se los va a mostrar aquí. O en realidad pueden incluirlos a todos en este gráfico único. Y en realidad puede mostrarles eso ahí. Entonces eso es básicamente todo para esta sección wireframing. De verdad espero que lo hayas disfrutado. Y lo siento por este último video por ser pegado esta mi cámara y decidió empatarme. Por lo que tuve que usar batería externa, externa y ángulo de visión así. Entonces si simplemente te puedo mostrar así, para que veas cómo se ve esto. En la próxima serie de videos, realidad voy a escanear todos estos wireframes, traerlos dentro de la D. de Adobe Y en realidad te voy a mostrar cómo puedes empezar crear tus wireframes dentro de Adobe XD, y cómo realmente se puede pasar de las tramas alámbricas al diseño. Por lo que una vez más, si no tienes un escáner, simplemente puedes tomar una foto con tu teléfono. De todos estos, tráelos dentro de Adobe XD, como se explicó en uno de los videos anteriores. Si no, si estás solo trabajando en esto, simplemente puedes tenerlos a tu lado, como yo lo tengo con todas estas anteriores que diseñamos en esta sección del curso. Para que puedas mantenerlos dulces a tu lado y simplemente puedes pasar a digital justo dentro de Adobe XD. Pero solo quiero mostrarles este enfoque también que ustedes pueden hacerlo también. Simplemente carnicero pargo o escandium, importante en Adobe XD. Y puedes tenerlos a mano a tu lado para todas las referencias futuras. Entonces te veré en Adobe XD. 26. Importar nuestros trazos de papel: De acuerdo, entonces ahora que hemos terminado proceso de wireframing en pedazo de papel, y ahora que escanea tus papeles en los que tu escáner o tomaste las fotos en las que tu teléfono. Ahora por fin podemos abrir Adobe XD y empezar a traer toda esa información. Y así lo que tengo aquí mismo es la pantalla de inicio de Adobe XD va a verse un poco diferente para ti dependiendo de lo que no hayas abierto anteriormente. Puedes ver mis archivos de diseño aquí mismo que tengo abiertos previamente. Se va a ver un poco diferente para ti. Va a estar en blanco si solo lo abres por primera vez y nunca abriste nada. Pero aquí mismo vamos a utilizar esta web estándar 1920, un dashboard. Simplemente haga clic en él. Se va a abrir una nueva pestaña. Se va a abrir una nueva ventana. Y este archivo es el archivo que en realidad vamos a utilizar para este curso. Entonces voy a dar clic aquí y lo voy a guardar primero, las cosas primero. Por lo que si hago clic aquí, usted ha guardado como documento local. Voy a dar click ahí mismo. Voy a darle un nombre y simplemente golpear save. Ahora que hemos hecho eso, podemos seguir adelante y empezar a renombrar estos tableros de arte. Podemos empezar a crear otros tableros de arte. Se puede ver aquí mismo en la parte superior tenemos nuevo diseño de página web bancaria. Y ese es el nombre que he decidido darle a este proyecto. Pero también puedes seguir adelante y darle a tu proyecto cualquier otro nombre que pudieras desear. Ahora, lo siguiente que quiero hacer es traer mis wireframes. Y se pueden ver los wireframes aquí. Seguí adelante y los escaneé y les cambié el nombre para comprensión más fácil y para una importación más fácil y más tarde para exportar si es necesario. Entonces la primera alambrada que dibujé, le renombré número uno, y luego a partir de entonces, pasé a un número y 09. Y los puedes ver aquí mismo. Ahora para importarlos, simplemente puedes seleccionarlos todos. Vuelve a Adobe XD, mantén presionada la tecla alter Option y rueda de desplazamiento en el ratón. Y luego puedes desacercar todo el camino solo para que puedas darte un poco de espacio. Entonces puedo traer esto de vuelta y simplemente traerlos dentro para que puedas seleccionarlos todos, arrastrarlos y soltarlos dentro de tu documento Adobe XD. Entonces todos ellos van a estar justo aquí y todos van a estar en el orden equivocado. Para que puedas ver aquí mismo que la pantalla de inicio de sesión y registro está todo el camino aquí. No queremos eso. Entonces lo que queremos, y por eso cambiaste el nombre de todos estos, es que queremos organizarlos un poco. Entonces esta fue nuestra primera Homepage fue nuestra segunda, cuentas y simplemente estoy sosteniendo Shift y se puede ver el espacio entre ellas. Y se puede ver claramente eso está basado, estas son imágenes, pero esa es la base está ahí y es la misma y la misma para nuestros tableros. Eso lo vas a ver un poco más tarde. Entonces como dije, las cuentas son un Siguiente, vamos a ver, préstamos y siempre se puede volver a aquí y c, Así que tuvimos una página de inicio, cuentas, préstamos. Por lo que las tarjetas invierten préstamos digitales y de tablero. A ver, las tarjetas invierten digital. Y finalmente tenemos dashboard, pero antes de eso tenemos un login y registrarnos así. Entonces ahora que hemos ordenado todos estos, lo que también podemos hacer es seleccionarlos y moverlos aquí mismo todo el camino hasta la cima. Todo este espacio que ves aquí mismo, este espacio gris es el espacio vacío que puedes usar para tu documento. Por lo que dentro de ahí puedes guardar un texto, puedes guardar imágenes como lo hacemos aquí mismo. Puedes mantener nuestros tableros aquí es R, R puerto justo aquí. Simplemente puede hacer clic en el nombre del aeropuerto que se mueve. Y siempre me gusta hacer esto solo para liberar algo de espacio y solo para dejar algo de espacio para mi proyecto real. También puedes ver esta estrella justo aquí en la parte superior, lo que significa que te jugueteaste con tu documento. Si lo guardaste como un documento local como lo hice, entonces puedes golpear el control S. Como esto se va a salvar y esa estrella va a desaparecer. Como se puede ver aquí mismo. Si lo estás guardando como documento en la nube, entonces como documento en la nube va a hacer esta función de guardado automático, pero puedes desactivarla en la configuración para que puedas guardarla tú mismo. Entonces eso es todo para este primer video. Básicamente, sólo quería traer esto. Ahora que tenemos un archivo, realidad podemos empezar a trabajar en este proyecto. Entonces si acercamos un poco más cerca solo para llevarte. Y esta era nuestra pantalla básicamente de exploración. Y aquí hicimos todas las páginas que queríamos. Decidimos cómo se va a ver la navegación hecha como el orden de nuestro muelle de navegación ahora, top nav y este nav en caja. Después pasamos a la página principal. Y ahora puedes ver cómo se ve la página de inicio, cuenta y así sucesivamente. Entonces ahora tenemos esta idea general de cómo podría terminar nuestro proyecto. Y como dijo en el video, siempre me gusta hacer esto porque ahora tengo todos mis wireframes aquí dentro de Adobe XD. Como dije, no tienes que hacer esto. Si no quieres, simplemente puedes guardar la pila de papeles contigo como lo hago aquí mismo. Por lo que simplemente puedes pasear por todos estos papeles y puedes decidir qué elementos quieres incluir dentro de tu proyecto. Entonces eso es básicamente todo para este video. En el siguiente video, en realidad vamos a empezar con la arquitectura de sitios web. Vamos a conectar algunas de estas páginas. Simplemente vamos a jugar con él y ver qué se necesita hacer con la navegación, cómo todo va a conectar entre sí. Vamos a reposicionar algunos de estos elementos dentro de nuestro documento. Y luego después de eso, por fin vamos a seguir adelante y empezar a diseñar wireframes dentro de Adobe XD, utilizando estas referencias que hicimos en un pedazo de papel como solo ideas de Blaine. Vamos a usar algunos elementos de estos para luego pasar a los wireframes digitales reales en Adobe XD. Entonces te veré ahí. 27. Crear arquitectura del sitio web: En este video, vamos a empezar con la arquitectura de sitios web. Y la arquitectura de sitios web básicamente es cuando se reduce a los bits codiciosos, es la conexión entre todas las páginas que tiene en su sitio web. También puedes usar la arquitectura de sitios web como arquitectura de aplicaciones móviles. Y a algunas personas les gusta llamar a estos diagramas de flujo. En realidad estamos vendiendo los productos en nuestra página web, web donut.net. Y dejaré el enlace a estos productos junto con algunos descuentos para ustedes chicos como estudiantes si quieren adquirir estos productos. Entonces el primero está fluyendo. Y fluyendo viene con 108 pantallas, 128 elementos para sitios web y a papeles de impresión para un cuatro, así como el tamaño de letra estadounidense. Se puede ver cómo se ven algunas de estas en básicamente estas son solo tarjetas de diferentes elementos que puedes usar para conectar tus pantallas entre sí. Y luego puedes usar esto trae plantillas listas si quieres imprimirlas y mostrarlas a tu equipo o a tus clientes. Como pueden ver, si empiezo mi rápido desplazamiento en mi ratón, se puede ver cuántos de estos elementos hay. Entonces esta es la fluida. También viene con todos estos elementos adicionales como maquetas, como números, como los iconos más cruciales e importantes, estos conectores de flecha, y como dije, estos archivos. Y se puede ver una vez que se imprimen, se puede ver cómo se ven. Entonces eso fluye. También tenemos flujo de alambre, diagramas de flujo que son mucho más grandes que fluidos. Se puede ver tenemos 200 pantallas, 200 elementos así como dos papeles. También tenemos con éste, nuestras versiones claras y oscuras. Este es mucho más detallado si te gustan ese tipo de cosas. Y están llegando en Photoshop Sketch en versiones XD, ambas. Para que puedas ver cómo se ven. Y si empiezo mi rápido desplazamiento, solo para que puedas echar un vistazo a cuántos elementos diferentes están ahí mismo. Y si quieres enterarte de eso en nuestra página web, así es web nano.net. Una vez más, creo el link y el descuento para ustedes chicos si quieren echarle un vistazo. Entonces vas a los productos web nano.net y luego lo dejas cargar un poco porque tenemos muchos productos diferentes y justo debajo de UX consigue, encontrarás todos estos diferentes productos. Por lo que junto con los diagramas de flujo, como se puede ver, tenemos tramas alámbricas. Para que pueda construir completamente sus wireframes utilizando estos productos. También tenemos UIKit esta justo aquí, así que listo nos hizo niños. Simplemente puedes cambiarlos por ahí con tus imágenes y así sucesivamente. Te estoy mostrando esto y solo para que veas lo detallado que puedes conseguir, pero no nos vamos a dar detalles con esto. Simplemente puedo seguir adelante y usar mis productos y hacer trampa como deuda. Pero quiero mostrarles chicos que no tienen que usar esto. Si lo deseas, puedes comprarlos otros en vivo para descontar para vosotros también chicos. Pero no tienes que usarlos Aquí estamos en Adobe XD y todo lo que necesitas hacer es simplemente rectángulo y algún texto. Entonces seguiré adelante y acercando, lo llamé mi viejo y mi rueda de desplazamiento en mi ratón. Ratón. Simplemente crearé un rectángulo como este. Realmente no importa lo grande o pequeño que sea. Puedes lograrlo. De todas formas que quieras. Entonces este rectángulo, también puedo hacer un radio de esquina de 25 en, solo para dárselo a alguna especia. También puedes incluir una sombra solo para que pueda sobresalir un poco de este fondo. Entonces démosle una sombra de tuh, tuh y quizá 15, sólo para hacerlo un poco más grande. ¿ De acuerdo? Y ahora podemos empezar a escribir. Entonces puedo escribir en la página principal, por ejemplo, si es desde el centro y voy a usar para toppings para esto. Y voy a usar Poppins como mi fuente para todo este proyecto. Y Poppins es un Google fuentes gratuitas de Aleve y un enlace a cada material que uso en la última lección de este curso o en un curso documentos. Y dependiendo de dónde estés viendo este curso. Por lo que simplemente puedes acceder a ella o simplemente puedes escribir Poppins en Google o lo que sea que estés usando como motor de búsqueda y hermano crecer a la página de Google Fonts y empezar a usar esta fuente Poppins. Entonces lo que vamos a hacer es simplemente mantener presionada la tecla Mayús y seleccionar estos dos. Haga clic aquí, aquí abajo, golpea Control G para agruparlo y llamar a esta arquitectura de sitio web. Actual. Así. Estoy haciendo esto porque quiero crear un componente a partir de él. Simplemente presione la tecla de control o comando para crear un componente. Y se puede ver este diamante aquí mismo el cual se rellena, lo que indica que este es nuestro principal o componente principal. Si un sello distintivo alterar tecla Opción. Para duplicar este, se puede ver que ahora este diamante es una especie de retención o vacío en su interior mientras éste se llena. Y esto se debe a que este es el componente hijo de este componente maestro. Entonces si tuviera que básicamente funciona. Si yo, por ejemplo, decido saltar dentro de éste y aumentar este radio de esquina 250, por ejemplo, se puede ver que el cambio se aplicó también al componente secundario. Pero si salto dentro de aquí, cambio distal 50, puede ver que sólo se aplica a éste porque este es el componente hijo, este es el componente maestro. Por lo que espero que entiendas las diferencias entre éstas. Y vamos a terminar usando todos estos componentes a lo largo del arte y los diseños. Entonces como dije, puedes usar diseños complejos y como estos que te mostré, pero no tienes que hacerlo. Simplemente puedes usar en Des Moines, que son realmente bastante simples. Entonces lo que vamos a hacer con estos es que sólo vamos a enumerar los nombres de estas páginas. Entonces tenemos cuentas aquí así. Y luego vamos a duplicar esta una vez más. Entonces simplemente sosteniendo tu Alt u Opción, ¿qué tenemos a continuación? Estos préstamos y Dan registros. Entonces déjame duplicar este. Entonces céspedes tarjetas, ¿por qué necesitamos invertir digital? Tan invertido y digital. Y lo vamos a duplicar más tarde para eso. Entonces tenemos, una vez más, cuentas pertenecen, un SIPOC sosteniendo mi control para saltar dentro y luego hacer doble clic en un texto para editarlo. Siempre y cuando tengamos corriente. Tenemos invertir, tenemos digital. Y por último, podemos seguir adelante y duplicar este porque vamos a terminar usando un login. Y simplemente lo voy a mover aquí. Entonces Login. Voy a posicionar este aquí abajo. 65 Creo que fueron boletas. Viva así. Date de alta porque vamos a tener estas dos páginas. Y finalmente a partir de éste, lo voy a posicionar justo alrededor en medio de estos. Ahora que tenemos estos, necesitamos conectar algunas páginas al tablero. Pero porque sabemos cuáles de esas páginas son porque las cubrí en sección de alambre en papel. Entonces los voy a reposicionar solo un poco diferente de aquí porque si recuerdas de nuestra navegación, tenemos este botón de inicio de sesión en cada página para que desde cada página aquí y puedan acceder a este login y luego desde una página de inicio de sesión, podemos ir al panel de inicio. Y me voy a posicionar aquí porque una vez que estás dentro de la casa de dashboard, tienes transacciones de cuenta, céspedes tarjetas de inversión digital y logout. Si estás saltando de lado aquí mismo donde realmente dibujamos el tablero y es por eso que tenemos ON a mano estos wireframes dentro de Adobe XD. puedas ver ese dashboard, cuentas de casa, transacciones, autos prestados, inversiones digitales, y cerrar sesión. Entonces para ahorrar un poco de tiempo, voy a duplicar estos. Así que pulsa el control D para duplicarlo o simplemente puedes seguir adelante y mantener tu tecla alter Opción y simplemente duplicarlo como papá, voy a moverlo. ¿ Qué hacemos a continuación? Al igual que eso ahora lo final que tenemos que hacer es simplemente seleccionar todos estos y posicionarme para estar en el centro. Entonces veamos, así, algo así ahora finalmente puedes agruparlos. Por lo que tenía el control G Y puedes agrupar todos estos puedes golpear el control G para agrupar todos estos. Se puede golpear el control G para agrupar todos estos. Y ahora va a ser mucho más sencillo. Simplemente selecciónalos aquí mismo y los va a hacer agradables y organizados. Puedes posicionarlos aquí mismo Ahora una última cosa que quiero hacer con estas es que quiero crear flechas como tú viste aquí mismo en este ejemplo. Entonces si nos desplazamos todo el camino hacia abajo, se puede ver que aquí tenemos estas flechas de conexión. Y realmente puedes seguir adelante fácilmente y crear aquellos en Adobe XD sin la necesidad de usar ninguna otra plantilla externa. Entonces lo que necesitamos es simplemente en este rectángulo. Y estoy notando que esta sombra es un poco más oscura aquí. Entonces voy a quitar este. Tenía porque teníamos una copia extra, el tuiteó, aseado. Entonces lo que voy a hacer es crear un rectángulo, tal vez así aquí. Y voy a quitar la frontera. Lo siguiente que voy a hacer es crear un polígono sosteniendo la tecla de turno. Girándolo mientras se mantiene presionada la tecla de cambio. Por lo que puede chasquear a la posición así. Puedes posicionarlo aquí y quitar tu frontera. Y también puedes darle una especia de color si quieres, suelo puede salir lastimado y para el color de relleno, simplemente haz clic en este y usa estos. Entonces ahí tenemos nuestra flecha. Voy a seleccionarlo, golpear Control G y llamarlo Arrow o arquitectura de sitios web. Arrow, solo para que podamos saber cuándo recalentar el control y tecla de comando creados como componente e ir a nuestros componentes. Ahora podemos ver cuando pasas el cursor, de acuerdo, así que esta es nuestra flecha de arquitectura del sitio web. Esta es nuestras tarjetas de arquitectura de sitios web. Y lo estamos manteniendo agradable y simple, fácil de entender, sobre todo si envías estos a tus clientes. Entonces lo que quiero de estas es que quiero conectar estas tarjetas entre sí. Entonces lo voy a posicionar en grupo. Entonces en este grupo por ejemplo, así. O otoño ver rápidamente qué grupo es cuál. Entonces llamemos a este sitio web un medio. Va. Porque esa es nuestra página principal. Esta va a ser nuestra sección de inicio de sesión o registrando Ba, Sin embargo quieras llamarla. Y esta es nuestra rueda de salpicadero, así. Entonces voy a reorganizarlos sólo un poquito, ver cuánto espacio tenemos. Démosle un 100 por ejemplo. Así turno 12345678910. Y hagamos lo mismo por éste. Entonces 12345678910, estoy usando shift y bottom arrow para empujar hacia abajo. Y lo que quiero hacer finalmente, lo hacemos una vez quiero incluirlo dentro de esta carpeta para poder reposicionarlo. Puedo traer esto así. Yo llego a casa o cambio de marcha para traer esto. Y por eso lo creamos como componente. Y simplemente puedes moverlo a la izquierda o a la derecha. Date prisa quiero. Como se puede ver, nos falta algo de espacio. Y por eso estos componentes son fantásticos. Y lo que queremos en este momento es simplemente golpear el control D. Para duplicarlo y colocarlo aquí para que puedas alinearlo, por ejemplo, a este borde y borde izquierdo, eso es de la tu tarjeta así. Voy a resolver este, golpear el control D y hacerlo así. Ahora, lo que quiero es golpear el control D, moverlo fuera de la carpeta. Así. Voy a dar click en él posicionado aquí mismo. Entonces lo que quiero es rotarlo. Entonces estoy sosteniendo Shift y lo voy a posicionar aquí mismo. Y voy a hacer turno 123 por ejemplo, de dos lo que quieras. Tan solo para indicar que desde cualquiera de estas páginas, se puede ir a estas páginas. Y lo que necesito en este momento es duplicar otro momento, posición, este de aquí, e ir a mi login. Y lo que estoy haciendo aquí mismo es una versión extremadamente simple y simplificada de lo que te mostré. Porque si bajo una vez más, se pueden ver claramente estos conectores que se están extendiendo hacia la izquierda y hacia la derecha hacia abajo, se puede ver cómo se ven estos autos. Entonces a partir de 1, digamos una página puedes ir a un número de páginas diferentes. Podrás interconectar todos estos puntos y flechas y así sucesivamente, solo para crear una imagen realmente compleja de tus conexiones entre páginas. Pero lo que estoy haciendo en nuestro ejemplo es una vez más, extremadamente sencillo porque quiero mantener esto agradable y lento, lo siento, agradable y rápido para que ustedes entiendan. Y lo que quiero de este es hacer un duplicado y luego dar click auto girado así. Y posicionarlo aquí. Y puedo hacer, así 1234, sólo para darle un poco de espacio. Sostén molto, No te asegures de que estén en el centro. Y lo que hicimos aquí mismo es indicar que la gente puede ir de un login para inscribirse y volver de nuevo a esa deuda de enlace, pueden hacer clic. Entonces si vuelvo aquí y muestro que una vez más, estoy usando el espacio, tomé pan, izquierda y derecha. Se puede ver en que hicimos eso aquí. Enlace por lo que se puede hacer clic para registrarse y al registrarse, enlace clicable para volver a iniciar sesión. Por eso estamos usando alambres de papel y estas flechas, y ya te lo dije. Por lo que puedes indicarle esto a tu equipo o a tu cliente y también a ti mismo. Apenas dije que se puede saber lo que está pasando. Entonces de aquí en adelante, puedo usar este. El control D fue una porquería, digamos 20-30 donde quieras. Y entonces una vez más, puedo usar algunos de estos. Entonces, por ejemplo, se usa este solo para ahorrar un poco de tiempo. Colóquelo fuera, y lo voy a usar dentro de nuestro tablero. Voy a dar click en él. ¿ Es éste? Lo es. Si bien rápidamente esconde esto. Y luego simplemente haga clic en este solo para posicionarlo un poco así. Y trayendo esto de vuelta porque teníamos la superposición de deuda. Y por eso nos mostró eso. Es en esa primera carpeta o mientras estamos ubicados en nuestra segunda carpeta. Entonces lo que estoy haciendo aquí mismo es usar el comando de control d, usando la tecla de turno para posicionarlo a izquierda y derecha. Justo en el centro, solo para mantener las cosas bonitas y limpias. Y ahí lo tenemos. Hemos completado nuestra arquitectura de sitio web o nuestra navegación. Y por qué esto es importante una vez más, es que se puede mostrar esto a la gente, se puede mostrar esto a su equipo, a sus clientes, y la gente puede mirar esto y entender a dónde pueden ir. Ahora una última cosa que podemos hacer es a partir de este grito de cierre de sesión. Y porque cuando la gente hace clic ahí, y si volvemos a nuestro tablero, puedes ver eso si ponemos nuestro cierre de sesión aquí mismo. Entonces solo imagínense cuando la gente haga clic ahí, los va a llevar de vuelta aquí a la pantalla de inicio. Entonces lo que podemos hacer en este caso es hacer un poco de diversión y juegos. Entonces voy a usar esta flecha, CTRL D, solo para mostrarte algunas posibilidades con esta. Voy a posicionarlo y justo aquí, asegurarme de que esté en el centro así, y luego moverlo fuera de nuestra pantalla. Lo que podemos hacer en este caso es simplemente saltar dentro de la posición nuestra flecha todo el camino donde los criadores de casa. Entonces justo por aquí. Y ahora voy a volver a esta línea y extenderla. Así que simplemente haga clic aquí, extiendlo. Y realmente puedes jugar con él así. Ahora puedes duplicarlo, o simplemente puedes ver que esta es la altura de nueve. Para que puedas hacer esto. Se puede ir a aquí. Asegúrate de que eres altura de línea así. Y que es así. Entonces si lo volteamos, esto debería ser lo mismo. Entonces veamos. Al igual que así. Y el posicionamiento simple, su posicionamiento, atrévete a asegurarte de que no tienes color de relleno de borde es éste, y luego simplemente extendido. Por lo que necesitas acercar solo un poquito. Una vez más, usa el espacio para hacer panecillos alrededor de esto, así. Y solo para darte un truco, lo que realmente puedes hacer es saltar dentro de este polígono y rotarlo usando éste. Al igual que, posicionado a aquí. Y entonces lo que puedes hacer es golpear Control C. Saltar dentro de este medio sitio web, controlar V para pegarlo en posición solo para que puedas encontrar el medio de esta página principal. Controlaría X para cortarlo. Vuelve a aquí, controla V, y luego borra este. Porque ahora estás en el centro de aquí y ahora estás de vuelta en tu componente. Entonces lo que ahora podemos hacer es saltar dentro de aquí, crear otro como éste, pero quitar la frontera. Usa en este mismo Color de Relleno y girado así. Posicionarlo en su lugar. Asegúrate de estar en el centro de tu de tu perdón, de esta forma como esta. Y Terry Herat. Ahora tenemos conectado este logout que va todo el camino hasta aquí. Por lo que puedes ver claramente cómo con solo un poco de ups holandeses, puedes llegar a esta arquitectura de sitio web luciendo bonita y conectando entre todas estas diferentes páginas. Como dije, puedes usar plantillas, ahora tienes que usar las nuestras. Si no quieres pagar. Puedes encontrar algunas versiones gratuitas en línea con tan solo algunas de estas formas y puedes pasar tiempo así. O si quieres usarlo para conseguir uno de nuestros productos y conseguir esta masiva una biblioteca de formas que puedes utilizar en tus proyectos. Una última cosa que quiero hacer es seleccionar todas estas formas porque quiero mantener las cosas bonitas y limpias. Hold Control G, la arquitectura de sitios web más fría, así. Y una vez más, voy a usar nuestros wireframes. Tenía control g, n papel de calidad. Sólo para que si yo elijo, los puedo mover así. Yo puedo hacer lo mismo con nuestra arquitectura de sitio web. Y porque lo lógico es tener wireframes de papel encima de los modelos de alámbrico reales y unos modelos reales encima del diseño. Entonces eso es lo que vamos a hacer aquí mismo. Y simplemente vamos a hacer clic y mover estos en la parte superior. Démosle algo así como 600. Creo que va a funcionar muy bien así. Y también me voy a mover de este para estar a 600 así. Y eso es básicamente todo. Si golpeas el control 0, te va a meter en disposición, golpea el control S para guardar esto. Y eso es básicamente todo para este video. En el siguiente video, vamos a empezar con wireframes en Adobe XD. Ahora que tenemos aireación. Y te voy a mostrar cómo puedes utilizar estos wireframes de papel para realmente empezar a crear realmente wireframes reales que puedes mostrar a tus clientes y puedes compartirlos usando un prototipado y funciones de compartir de Adobe XD a tu clientes para algunos comentarios reales. Entonces te veré ahí. 28. Los trazos de Wireframes en Adobe Xd 1: De acuerdo, ahora sigamos adelante y empecemos con wireframes en Adobe XD. Y lo primero que voy a hacer es contarte un poco sobre los recursos que vamos a utilizar en este curso. Por lo que este archivo que estás viendo en este momento, este archivo de Adobe XD, vas a conseguir este archivo. Este archivo va a contener cada cosa que vamos a crear en este curso. También te voy a dar recursos que estoy usando aquí, así iconos, imágenes, etcétera. Pero lo importante que tienes que entender es que puedes usar estos recursos sólo para proyectos personales. Por lo que no puedes usar estos para clientes, no puedes usar estos para la venta. No se pueden utilizar estos para otra cosa que no sea proyecto personal como aprendizaje. Por lo que puedes usar esto para aprender, para entender todo, cómo funciona todo, para seguir junto con este curso. Y eso es todo porque estos recursos son premium, tienes que pagar por estos recursos para poder utilizarlos comercialmente en tus proyectos, para tus clientes y así sucesivamente. Voy a dejar enlaces a cada cosa que estoy usando. Por lo que una vez más, que los recursos son prima. Las estás usando solo para proyectos personales, con fines de aprendizaje y para nada más. Sólo recuerda, si estás utilizando estos recursos para proyectos de clientes y para proyectos comerciales, es sobre ti. Entonces si alguna de estas empresas decide demandarte para ir tras de ti en la cancha, entonces es todo después de que no vuelvas a mí por estos recursos, todo depende de ti. Entonces ahora que sacamos eso del camino, voy a empezar simplemente seleccionando mis colores para este proyecto en particular. Entonces para hacer eso, voy a venir aquí mismo y vamos a llamar a esta primera página de inicio de rpart. Entonces podemos venir aquí mismo y hacer doble clic aquí mismo, Palm Beach. Y lo primero que voy a hacer en realidad es crear una cuadrícula. Entonces voy a venir aquí mismo. Y se pueden ver estas columnas. Entonces justo aquí a la izquierda y a la derecha aquí a la derecha están estos márgenes. Por lo que estos márgenes son del borde de la página tanto en el lado izquierdo como en el derecho. Estos bits azules son columnas y estos bits blancos en medio de nuestra canaleta. Por lo que la canaleta es básicamente despreciada entre las columnas. Y las columnas son este espacio donde se va a ir el contenido. Los contenidos son básicamente texto, imágenes, iconos, etcétera. Y así cada cosa que estás incluyendo en tu diseño, ese es el contenido y el ancho de canalón es básicamente espacio en disco entre tu contenido. Entonces vamos a usar 12 columnas, así que lo mismo que está aquí mismo. Para el ancho de canaleta, voy a usar 60. Voy a usar 82 para el ancho de columna y 138 en ambos lados. Como se puede ver. Ahora tenemos un poco menos de espacio aquí mismo, y tenemos un poco más de espacio en estos gobernadores. Y nuestras columnas son un poco más estrechas, así que todo es mucho más limpio. Para que lo veas un poco mejor. Una cosa más que voy a hacer es bajar la obesidad de nuestras columnas. Entonces, para hacer eso, simplemente haga clic aquí. Y luego un más bajo este deslizador como quieras. Se puede bajar todo el camino hacia abajo, o se puede subir hasta aquí, por ejemplo. Por lo que aún los puedes ver, pero no son dat, distrayendo. También puedes cambiar y de color Derek, simplemente hacemos clic aquí mismo, pero no te voy a molestar con eso. Entonces una vez más, solo vamos a crear estas cajas, por ejemplo. Y voy a usar estas cajas para los colores. Entonces el primer color va a ser blanco, así que es éste. Y luego voy a golpear el control D más con algún lugar por aquí. Y luego voy a usar en disco erudito. Entonces f dos, f cuatro, F6, por lo que un color gris claro. Y si elimino estas columnas, se puede ver claramente perjudicado a luces. Por lo que puedo duplicarlo una vez más. Posición. Está en algún lugar por aquí. Porque este paso, realmente no necesitas columnas para esto. Simplemente estamos eligiendo estos colores en dos van a usar. Por lo que este color va a ser c2e, c2e, c2e. Entonces un poco más oscuro, gris. Se puede ver la diferencia entre estos. Y los voy a posicionar de manera uniforme entre sí. Voy a duplicar esto una vez más. Para este, me voy a ir con verde realmente claro. Por lo que 0-0, ED busca cinco. Voy a duplicar este. Ahora. Verde un poco más oscuro, así 0-0, C6, y luego 89. Ahora vamos a pasar un poco más allá al azul oscuro. Entonces 00859 V. Ahora vamos a ir aún más oscuro, casi oscuro, de acuerdo. Entonces para 495463, Así que como puedes ver, realidad es casi un gris oscuro. Ahora esto va a ser realmente oscura gracia de 46, 4646, así. Y por último, vamos a crear un color de carretera. Entonces ff 4376, así. Ahora que tenemos todos estos colores, los vamos a seleccionar y añadirlos a nuestros colores aquí mismo como búsquedas de color para que podamos utilizarlos a lo largo de nuestro proyecto. Por lo que simplemente puedes seleccionar estos colores, clic aquí, y se va a añadir tus colores aquí. Podrás organizarlos un poco de manera diferente, por lo que puedes agregarlos como cuadrícula o como lista, lo que sea que te resulte más fácil. A mí me gusta usarlos así. Y también puedes extender esto si quieres. Por lo que solo te puedes imaginar cuando empieces a sentir estos componentes, van a ser muchos de ellos. Por lo que puedes extender rápidamente esta izquierda y derecha solo para ver tus componentes son siempre puedes volver a esta vista si te resulta más fácil. Una cosa más que voy a hacer es también crear mis estilos de personaje, pero puedo lidiar con eso un poco más tarde. Para que pueda seguir adelante y borrar estos. Por lo que sólo eran un tenedor de lugar con el fin de que creáramos esto. Fuimos adelante y creamos nuestra grilla, así que la tenemos aquí. Ahora lo siguiente que realmente voy a hacer es incluir mi logo. Voy a pegarlo desde mi documento original. Y se puede ver este enlace porque a lo largo de este curso voy a utilizar mi documento original que he creado como archivo de referencia. Por lo que vas a ver estos iconos de conjuntos enlazados. Se puede ver aquí mismo. Por lo que este es un componente vinculado porque se está vinculando de nuevo al diseño original o han creado. Pero para arreglar eso para este expediente en particular. Entonces, por ejemplo, si sigo adelante y edito este logotipo en documento original, me mostrará una actualización aquí mismo para que pueda seguir adelante y actualizarlo. Por lo que tengo ambas instancias en ambos archivos teniendo esta misma actualización y las últimas actualizaciones. Por lo que se verán exactamente iguales. O lo que realmente voy a hacer a lo largo de este curso es copiar a este documento o hacer clic derecho y simplemente hacer clic en hacer local. Entonces lo que esto significa básicamente es ahora este es nuestro principal componente aquí en este documento. Y se puede ver que tiene dos estados. Por lo que tiene este estado por defecto y él tiene este gran estado. Y seguí adelante y creé eso. Ahora para hacer eso, simplemente puedes ir justo aquí. Haga clic en Editar componente principal te va a llevar aquí mismo. Se puede agregar un nuevo estado. Entonces llamemos a este estado blanco y negro, solo para mostrarles cómo fui adelante y creé eso. Por lo que tenemos este bonito logo. Y por ejemplo, digamos que quiero tomar este texto para poder sostener mi control click dentro, ir al color, convertirlo en blanco. Y porque tenemos todos estos colores, digamos que quiero usar, no lo sé. Veamos este color simplemente llamado Control click dentro, y luego puedes elegir cualquiera de estos colores. Por lo que puedo usar esto por ejemplo. Y también tenemos esta forma. Entonces tenemos este punto dentro, pero dejémoslo ahí. Entonces si volvemos, se puede ver que ahora tenemos este estado blanco y negro. Si hago clic, este es nuestro estado por defecto y este fue mi gran estado original. Y ahora tenemos estado blanco y negro. Por lo que puedes cambiar entre estos estados en diversos puntos diferentes de tu diseño. Entonces, por ejemplo, si necesitas presentar este logotipo sobre un fondo más oscuro, como puedes ver, este color no funcionará en su fondo más oscuro. Por lo tanto, necesitas este estado blanco y negro. Entonces, en lugar de crear otra copia y luego editar esa copia, simplemente puedes crear un nuevo estado, convirtiéndolo en blanco y negro. Entonces, donde sea que necesites cambiar entre estos estados, simplemente puedes seguir adelante y dar la vuelta donde quieras. Puedes escribir aquí, hacer clic derecho y hacer clic en eliminar como voy a hacer eso, básicamente, puedo seguir adelante y quitar esto porque lo tengo justo aquí como nuestro original. Entonces para empezar con nuestro wireframe, Lo primero que vamos a hacer, y eso es de lo que estaba hablando. Sección de wireframing es básicamente, se pueden ver estas páginas que dibujamos en un pedazo de papel. Si las tienes a tu lado, entonces puedes usarlas así. Si no, puedes traerlos a Adobe XD como hicimos para este curso en particular. Y siempre puedes hacer referencia a ellos, por ejemplo, a la idea que tuviste. Y porque creamos nuestra navegación principal justo aquí, así puedes ver que tenemos un ícono de ubicación aquí para negocios aquí y así sucesivamente. Entonces podemos hacer eso. Entonces sigamos adelante y empecemos con esta navegación realmente superior. Por lo que tenemos un ícono para los negocios. Tenemos un ícono telefónico, lenguajes de símbolos aquí mismo. Entonces voy a seguir adelante y hacer eso. Voy a dar click en mi aeropuerto porque necesitamos crear una página larga. Ya lo puedes ver. O hay que hacer es hacer click en este punto en el medio y extendido todo el camino hacia abajo. No, dejémoslo justo ahí. Por lo que dejaremos nuestro logo, Reddit es por el momento. Entonces vamos a utilizar nuestra herramienta de rectángulo extendida hasta aquí. Y veamos, tal vez podamos usar esto como nuestro color de fondo. Podemos quitar la frontera. Y para el tamaño 1920 años para el ancho, final de la muerte, se utiliza 70, por ejemplo, para la altura. Y puedes hacer click aquí mismo, lo fijará a la parte superior. Ahora lo que vamos a hacer es empezar realmente con el texto. Entonces aquí es donde necesitamos nuestros textos. Y como dije, voy a usar Poppins como nuestra fuente. Entonces lo que voy a hacer es hacer clic en té y simplemente dar clic aquí. Y ahora puedo escribir algo así como para negocios o nuestra ubicación. Eso y lo pondré aquí mismo. Escogeré Poppins y vamos a ver, puedo usar 18 para este así. Y veamos, quizá pueda usar este color. Podemos posicionarnos para estar alineados a la izquierda. Y podemos mantener pulsada Shift seleccionar estos dos. Haga clic aquí para posicionarlo en el centro. Y entonces puedo seguir adelante y dar clic aquí para agregar esto a mi estilo de personaje. Y se puede ver que me está mostrando irregular 18. Si quieres editarlo en cualquier momento, no lo editas aquí mismo. Tú vas, aquí mismo, haz clic derecho. Y puedes editar y luego hacer cambios desde aquí. Ahora que tenemos eso, voy a seguir adelante y duplicarlo y mecanografiar o negocio. Porque si salto adelante y te muestro, puedes ver que tenemos un ícono de ubicación y tenemos cuatro negocios. Entonces vamos a tener el texto del formulario aquí mismo porque tenemos suficiente espacio en este tamaño de escritorio. Entonces voy a duplicar mi texto y añadir mi número de teléfono aquí, que sólo va a ser algún número de teléfono ficticio. Entonces veamos, por ejemplo, más 123456789 o 0. Bueno, dejémoslo así. Entonces ahora que tengo y que lo que necesito a continuación, nuestros idiomas. Y se puede ver que aquí tenemos estas dos banderas. Ahora para los idiomas, simplemente voy a usar un plugin. Por lo que puedes dar click aquí mismo. Y estoy usando este plug-in de logotipos de UI, y debería funcionar. Vamos a buscarlo aquí mismo. Por lo que puedes hacer clic atreverse a buscar tus plugins. Entonces veamos logotipos de la interfaz de usuario. Debería estar ahí. Aquí está. Entonces estoy usando esa, pero por alguna razón no se muestra. Y el logo fuera de sí mismo ahí. Pero como se puede ver, se instaló un hábito. Entonces lo que realmente necesitas hacer es crear algunas cajas. Ahora para crear estas cajas, vamos a usar Rectangle Tool y tú las vas a usar aquí mismo afuera. Necesitas crear 194 de ellas. Entonces para las tallas, así que voy a usar 40, ancho 27. Tan realmente pequeño. Voy a quitar la frontera y como dije, voy a crear 194. Ahora para hacer eso, voy a usar las rejillas de repetición simplemente dan clic aquí. Entonces tenemos uno. Y simplemente seguir adelante y extenderse hasta 345678, 910. Entonces, contémoslos una vez más. Eso es todo. Y voy a bajar 20 básicamente. Entonces y eso es básicamente todo. Ahora que estamos hechos que simplemente podría desagrupar grilla. Como dije, se necesita 194. Entonces voy a borrar seis de ellos. Por lo que 246, pulsa Eliminar en tu teclado. Ahora puedes seguir adelante y seleccionarlos todos. Vuelve a los logotipos de una interfaz de usuario. Haga clic allí. Tienes banderas campestres. Por lo que tienen marca de logo negro, logo de color marcado logo negro tipo logo color. Pero nos interesa este país. Banderas. Simplemente haga clic allí. Agregó 194 flex. Para que puedas localizar tu bandera. Como dijo, para este proyecto en particular, estoy usando bandera serbia y también estoy usando bandera de Reino Unido. Puedes usar la flor americana, puedes usar la bandera de tu propio país. Entonces realmente todo depende de ti, lo que quieras hacer con este proyecto en particular. Entonces lo que necesito ahora mismo es localizar mis dos banderas. Entonces aquí está la bandera británica. Y déjenme ir rápido y encontrar la bandera serbia. Aquí está. Y ahora que he localizado a estos dos, todo lo que necesito hacer es simplemente seleccionar todos los demás. Hit delete, porque sólo necesito estos dos. Seguiré adelante y los arrastraré y soltaré dentro de mi documento y los reposicionaré solo un poquito. Entonces veamos, tal vez pueda tenerlos a los 40. Entonces así, 1234, así. Y voy a dar clic aquí y teclear dos en mi teclado para bajar esto al 20% de obesidad. O puedo seguir adelante y más volver a 30 o lo que sea, sólo para indicar que en esta bandera británica se selecciona como idioma inglés se selecciona aquí. Entonces lo que necesito a continuación son esos dos iconos para la ubicación y para la forma. Como se dice, estoy usando estos iconos y estos iconos, te voy a mostrar nuestros grandes iconos. Y los puedes conseguir a través del enlace que te voy a proporcionar. Entonces una vez más. Estos iconos son gratuitos para ti únicamente con fines de aprendizaje. No se pueden utilizar para clientes, no se pueden utilizar para trabajos comerciales, no se pueden utilizar para reventa. Si haces todos los requisitos legales y cada condena es básicamente sobre ti. Entonces si alguna de estas empresas te toca a ti, si las estás usando, una vez más, todo depende de ti. Entonces volvamos a ello. Este es nuestro icono de ubicación, este es nuestro icono de teléfono. Si vuelvo aquí mismo, se puede ver que estos dos iconos y componentes se transfieren básicamente formado el documento original. Haga clic derecho, manso local, haga clic derecho en hacer local para hacer nuestra vida más fácil. Ahora que hemos hecho eso, necesitamos reposicionarlos sólo un poquito. Entonces lo que en realidad voy a hacer es empezar con este. Entonces posicionando 20, como datos. Y voy a posicionar esto para estar aquí. Por lo que para alinearme con esto, para la forma c, puedo hacer clic en él y posicionarlo. Sólo vamos a verme. Bu podemos poner el texto en el lado derecho y hacer que doble esto. Por lo que a 1234. Entonces, si sostengo mi vieja llave y vuelvo aquí mismo, se puede ver que son 80 de esta bandera. Y puedo posicionar esto para ser 20, así. Y lo que voy a hacer finalmente es volver a mi panel de capas. Seleccione todo excepto el logotipo y haga clic aquí, solo para posicionarlos a todos en el centro. A mí me gusta cómo se ve eso. Y también voy a renombrar esto a arriba. Ahora, BG. Y voy a organizar las cosas un poco mejor. Por lo que vamos a empezar con el ícono de ubicación. Nuestras ubicaciones luego va por negocios como así, icono extranjero y luego número telefónico, Inglaterra y Serbia, top now BG y puedes mantener presionado Shift, seleccionarlos todos, y llamar a este top ahora. De acuerdo, entonces ahora que hemos hecho eso y este video funcionó durante 19 minutos porque necesitamos prepreparar aireación. Básicamente, voy a terminar este video aquí. Y en el siguiente video realmente vamos a empezar con creación de nuestro wireframe para esta página principal. Entonces te veré ahí. 29. Los tramas de Wireframes en Adobe Xd 2: Volvamos ahora a ello y empecemos con la navegación principal. Entonces si volvemos a acercar, lo que voy a hacer es dar clic en mi logo y luego dar clic aquí para usar mi rectángulo. Y voy a dibujar un bonito fondo grande para mi logo. También voy a nav de calidad, Vg, y lo voy a mover a algún lugar por aquí, pero primero vamos a darle una altura de 1-20. Y por último, vamos más con 50 desde un escritorio cerca así. Entonces voy a posicionar el logo justo aquí, dentro. Y para el propio logotipo, lo voy a posicionar 40 píxeles a la derecha. Por lo que naveguen 1234. Entonces otra vez, así, y puedes flotar y ver que tienes 40 de la izquierda y 26 y casi 26 de arriba y abajo. Ahora para la siesta en sí BG, démosle un poco de estilo. Entonces veamos, por un color, dejémoslo blanco. Nos vamos a ir sin ninguna frontera. Para el radio de esquina, vamos a ir con diez. Ahora por la sombra, me voy a ir con cantó 2020. Y veamos, tal vez podamos ir algo un poco más ligero. Entonces démosle un poco de tiempo. Diez por ejemplo. Y también voy a incluir un desenfoque de fondo. Y para los valores de desenfoque de fondo, vamos con 2015 y finalmente, 50 para el 50%. Si me escondo en discrepancia, sólo por el momento, no se puede ver en este momento. Pero una vez que realmente empieces a desplazarte hacia abajo, vas a poder ver cómo va a actuar este desenfoque y cómo va a quedar. Entonces dejémoslo ahí por el momento. Lo que necesitamos a continuación es algún texto. Entonces sigamos adelante y justo en algunos textos porque si te llevo de vuelta aquí mismo, puedes ver que tenemos todas estas páginas. Por lo que cuentas alongs, tarjetas, invierte digital. Y por último, tenemos este botón de inicio de sesión, que nos va a llevar a la pantalla de inicio de sesión y registro. Entonces, empecemos con eso. Voy a dar click aquí mismo. Y veamos, a las cuentas les gusta la suciedad. Por lo que tenemos Poppins, 18 analistas de izquierda irregulares Elegir Color. Y vamos a añadirlo de inmediato a aquí. Y veamos qué podemos hacer a continuación. Podemos continuar y agregar más de estos artículos. Entonces vamos a CEO posicionar esto en el centro así, controlar D para duplicarlo y nuestra mecanografía pertenece Control D y voy a escribir en corriente. Esto se va a invertir. Este próximo va a ser digital. Y también lo voy a duplicar una vez más para nuestro botón y mecanografiar y Morgan lo deja así por ahora. Y sólo lo posicionaré para estar alineado en el centro. Ahora por nuestro propio botón. Voy a dibujar un rectángulo así. Y veamos por el ancho, usemos de dos a 44 para escondernos. Usemos el 64, el radio de esquina, llamémoslo arena. Porque si recuerdas, hicimos el radio de esquina de diez para snappy g, o lo posicionamos en el centro. Y vamos a ver, voy a mezclar son 40 del lado derecho porque hicimos este cuadro para el banco. Y si lo posicionas así, puedes ver que está tomando dos columnas de ancho. Y ese es el punto principal de nuestras columnas porque queremos que todo esté bien estructurado y organizado. Voy a seguir adelante y volver aquí mismo. Voy a nombrar esto btn G, por ejemplo, y posicionarlo todo el camino hasta aquí. Organicemos estas capas un poco mejor. Solo posiciona mi logo justo aquí a la parte superior. Voy a mover mi top ahora todo el camino hasta la cima. Por lo que logo. Y luego de izquierda a derecha, tenemos cuentas. Tenemos alongs. Contamos con tarjetas, invertir, digital, login y BT y B, g. por lo que seleccionaré estas dos. Da clic aquí y luego justo aquí para posicionar esto en el centro y mi botón, seguiré adelante y seleccionaré un color. Usemos este. Por ejemplo, esconderé mi frontera. Haré clic aquí y cambiaré mi color a blanco. Y luego seguiré adelante y seleccionaré estos dos, pegaré Control G y los llamaré para que inicien sesión. Y puedes seguir adelante y hacer un componente si quieres. Pero simplemente dejaré esto tal como está. Yo lo organizaré, por supuesto, pero déjalo como está sin ningún componente a, que podamos llegar a la etapa de diseño. Y luego más adelante en la etapa de diseño, realidad seguiré adelante y crearé un componente, estados de componente y así sucesivamente y así sucesivamente. Entonces de aquí a nuestro digital, lo vamos a tener a los 80. Por lo que 12345678, solo para darle un poco más de espacio para la posición de click, esta para ser 80 también. Y esto para estar a los 80. Entonces así, esto va a ser obviamente lo mismo y la cuenta va a ser la misma. Y eso es básicamente todo. Entonces podemos seguir adelante ahora y agrupar todos estos, controlar G y llamarlo principal. Ahora, cuando realmente lleguemos a la parte del diseño, voy a hacer un poco más de estilo a la desegregación. También voy a agregar selector, que va a aparecer en algunas páginas seleccionadas. Entonces, por ejemplo, si los usuarios hacen clic en cuenta, entonces selector va a aparecer debajo de dat. Si hacen clic en tarjetas se va a mover aquí mismo y le vamos a añadir algo de animación y así sucesivamente. Pero vamos a llegar a todo eso un poco más adelante cuando realmente empecemos con eso. Ahora, si te llevo aquí mismo, puedes ver que en la página de inicio tenemos esta sección de imagen de héroe con texto Digital y botón de llamada a la acción a la izquierda, mientras que la imagen a la derecha, en realidad no vamos a utilizar cualquier imagen a partir de ahora porque ahí es donde entra la parte de diseño. Pero puedo empezar por crear mi rectángulo. Ahora, colocaré mi rectángulo hasta aquí. Llamaremos a este héroe. Haz como la suciedad. Para separarlo un poco y hacer que destaque. Voy a dar click aquí para añadir nuestro color. O un skinneriano, adelante y usa estos colores para mis imágenes. Usemos este. Sólo para que sea un poco más obvio. Seguiré adelante y quitaré la frontera en 1924 y el ancho y la altura. Usemos 900. Y simplemente me posicionaré para estar aquí mismo. Ahora bien, si tomo mi nav principal, se puede ver que cuando empiezo a moverme arriba y abajo, algunos efectos están empezando a suceder. Y se puede ver, sobre todo si muevo esto y ahí es donde entra ese borrón. Pero no te preocupes por ello justo ahora. Lo vamos a usar un poco más tarde. Y simplemente seguiré adelante y usaré este porque necesitamos incluir algún texto y botón y así sucesivamente. Entonces no complicemos demasiado las cosas hasta ahora nuestro texto, vamos a ver. Puedo seguir adelante y teclear. Este es el título o título. Aquí, digamos. Entonces vamos a usar toppings y vamos a cambiar esto para que quede alineado. Vayamos con audaces. Entonces encuéntralo aquí. Una vez más, si no tienes Poppins, ve a la página de Google Fuentes, o puedes ir al PDF que he proporcionado en esta última lección de discurso o en los documentos del curso dependiendo de dónde estés viendo este curso, simplemente puedes abrir un PDF arriba, dar click en el enlace. Te llevará allí, descarga e instala esa fuente como suele hacer con cualquiera de tus fuentes. Debería poder usarlo en este proyecto. Ahora por el tamaño, vamos a ir con enormes 190 así. Y lo voy a posicionar en algún lugar por aquí. Digamos. Seguiré adelante y seleccionaré éste. Oro de vuelta aquí a mis estilos de personaje. Haga clic aquí para agregarlo y colocarlo viejo hacia abajo. Y voy a dar click aquí mismo, porque es mucho más fácil reorganizar esto solo un poquito aquí mismo. Ahora, seguiré adelante y pincharé aquí. Entonces en mi subtitulado porque si te llevamos de vuelta, puedes ver cómo se ve como texto de título, que va a estar en tan solo una línea de texto y botón de llamada a la acción. Entonces qué, lo que podemos hacer con este es tipo en algo como esto, es un subtítulo de una línea. Y para ello, usemos 24. Usemos también irregulares. A ver. Al igual que Dat, analita más ancho. A ver, tal vez pueda posicionarme para estar a los 50, así. Mueve esto sólo un poquito hacia abajo. Y lo que ahora necesitamos es un botón. Entonces, en lugar de recrear un botón o simplemente presionar Control C y salir afuera, haga clic aquí, presione Control V, y luego simplemente vuelva a posicionarlo hacia abajo. A ver, quizá también pueda hacer que sean 50, así. Y simplemente seleccionemos todos estos. Da clic aquí para alinearlos a la izquierda, y solo asegúrate de que estás alineado a la izquierda al borde de nuestra cuadrícula. Por último, voy a extender nuestro botón y posicionarlo para que tenga tres columnas de ancho. Y haré doble clic en el interior, dentro de KPN, aprenderé más. Y se puede ver que todo encaja bien. Y porque Adobe XD está pensando en redimensionar sensible como acabas de ver. Entonces porque nuestros textos una línea central, si sigo adelante y extiendo este botón, se puede ver que el texto sigue realmente bien y siempre va a permanecer en, en el centro, como lo cambias. Por lo que voy a organizar estos sólo un poco mejor y agrupar estos texto de colon gen control de calor así, posicionarlos aquí. Y luego usaré mi herramienta de rectángulo. Ve de aquí al borde inferior de nuestro héroe. Usa el texto click justo aquí para posicionarlo centralmente ahí dentro. Y el hábito de Derek, esta es nuestra imagen de héroe. No nos vamos a molestar con la imagen en este punto, obviamente porque esto es sólo una alambrada. Lo que puedes hacer es poner un ícono de imagen justo aquí solo para indicar a tu equipo o a tus clientes que eso va a ser una imagen. Pero porque les estoy mostrando esto, ustedes saben que, por ejemplo, para todas las imágenes que hay afuera, este va a ser nuestro color. Entonces, ahora sigamos adelante y sigamos con nuestro diseño. Entonces si te llevo de vuelta a nuestro wireframe, puedes ver servicios están ahí con tres tarjetas, sólidas. Empieza por ahí. Voy a R, T. Por ejemplo. Nuestros servicios. A ver. Podemos posicionarlo para estar en el centro y podemos hacer algo más grande como 48, por ejemplo. En lugar de irregular, vayamos con negrita, así y asegurémonos de que esté en el centro. Es de este color, simplemente es click justo aquí. Y veamos, podemos posicionarnos para ser 100 por ejemplo. Entonces solo dale un poco más de espacio a partir de nuestra imagen de héroe. Y aquí abajo vamos a empezar con la creación de nuestras tarjetas. Por lo que estas tarjetas van a ser nuestras tarjetas de contenido. Entonces para hacer eso, simplemente vamos a contar las columnas porque tenemos tres tarjetas que vamos a usar para columnas como esta porque tenemos columnas totales de 12. Entonces si duplicé, se puede ver en eso, porque son de cuatro columnas de ancho, podemos caber tres. Si tú, si necesitas caber cuatro, entonces habrá tres columnas blancas así. Entonces para estas tarjetas de contenido, sigamos adelante y empecemos por crear una primera y luego vamos a seguir adelante y crear otras. Y también vamos a hacer 100 espaciado. Por lo que 1020. Veamos 90 y esto es 100. Ahora para ello, voy a hacer un radio de esquina de 20. A ver. Puedo usar ese color de relleno que usamos para las imágenes. Entonces éste, y vamos a ver, puedo hacer algunos cambios a la Altura. Entonces digamos que va a ser 546, por ejemplo. Entonces así, sin ninguna frontera. No incluyamos la sombra por ahora, quizá podamos usarla más adelante, InDesign y un consejo rápido, no tienes que ir todo el camino de regreso a aquí para hacer clic y luego quitar la cuadrícula. Para ver tu diseño, siempre puedes hacer doble clic aquí mismo en el espacio vacío, y luego simplemente haz clic aquí para mostrar tu InDesign. Entonces lo que voy a hacer en este punto es simplemente usar un icono. Entonces veamos, puedo enfrentarlo a él. Y esto también es gran icono. Y si hago clic aquí mismo, se puede ver que no es un componente, pero hagámoslo un componente. Pero antes de que lo hagamos, quizá podamos ponerlo dentro de un círculo sólo para mostrarlo un poco mejor así. Seleccionaron a estos dos posicionados en el centro así, y agruparlos. Entonces esta va a ser nuestra estrella. Yo lo vi. propósito dejaré aquí el fondo blanco. Controlaría clave para crearlo como componente. Y vamos a utilizar este componente a lo largo de nuestro diseño. Vamos a posicionarlo. Por lo que 12341234, por ejemplo. Y déjalo ahí porque queremos indicar que nuestro ícono va a ir justo ahí. Ahora por ahí abajo, vamos a tipearlo penal. Ver, esta es nuestra tarjeta, B, G Por ejemplo. Este es nuestro icono estrella. Posiciona ambos hacia abajo. Y vamos a usar mi herramienta de texto y escribir algo así como contar uno, así. Ahora voy a seguir adelante y asegurarme de que esté alineado a la izquierda, posicionarlo aquí, o aún mejor ir justo aquí. Y vamos a ver, no creamos estilo a partir de este. Por lo que crearé aquí. Por lo que como se puede ver, 24. Y saltaré justo aquí, pincha aquí para usar esto como 24. Pero debido a que esto es regular, quiero crearlo para ser audaz, sólo para destacar un poco mejor. Ahora porque tenemos click regular aquí para agregar negrita. Por lo que un estilo de carácter general vas adelante y creas. Puedes saltar dentro de aquí y luego simplemente añadir un nuevo estilo de personaje. Entonces me aseguraré de que esté alineado y todo adelante, hit control D duplicado. Y crearé aquí un párrafo de texto. Ahora para hacer eso, simplemente seleccionaré éste a los 18. Se ve bien. Y voy a mover a estos dos hacia abajo como lo hice con este 91. Por lo que una vez más, 80. Y para crear un párrafo, puedes crear un tamaño fijo y simplemente extender en este cuadro de texto hasta aquí. 1234. Entonces tenemos 40%, lo siento, 40 píxeles aquí, y simplemente mover esto a aquí. Ahora para la altura, simplemente puedes extender esto como quieras. Y para llenarlo de texto, voy a ir aquí mismo y elegir lorem ipsum. Por lo que una vez más, puedes hacer clic aquí, buscar todos los m ipsum como tu plugin, click, sentir el texto del placeholder y puedes elegir cualquiera de estos que quieras. Y simplemente voy a usar este, inserte texto y lo vaca lechera. Ahora tenemos el texto. Ahora por debajo de dat. También vamos a aprender más. Entonces voy a volver a mi paleta de capas. Ella controlaría D para duplicar esto, moverlo hacia abajo. Y vamos a ver, tal vez pueda hacer un 40 espaciado entre todos ellos. Entonces algo como esto, así, y tenemos 32, así que posicionemos para ser 40. Voy a quitar en este tamaño fijo y hacerlo auto Whit. Y simplemente escribiré, aprenderé más un escritor. Y eso es básicamente todo. Lo que también voy a hacer es incluir un icono más. Y ya tengo este ícono preparado, pero antes de hacerlo, quizá pueda cambiar en disco a algún otro color, éste por ejemplo. Y tal vez podamos usar ese color para todos los enlaces. Debido a que este es un enlace, gente va a dar click en él. Y veamos por éste, quizá podamos, no sé, posicionarlo para ser 20. Entonces veamos 12. Por lo que 20. Puedo volver a aquí. Haga clic derecho, haga local, igual que hicimos con todos estos otros. Y eso es básicamente todo. Entonces lo que podemos hacer ahora es seleccionar todos estos. Entonces estamos a los 40, fracaso a los 40 y posicionarlos a todos abajo 1234 porque tenemos 40 de aquí, 40 de aquí. Y vamos a incluir icono, que va a ser un poco más grande más adelante cuando empecemos con el diseño. Entonces si te llevamos de vuelta a aquí, ahora sigamos adelante y organicemos todos estos. Entonces tenemos icono de estrella, y vamos a mover todos estos hacia abajo así. Tan icono estrella, cuenta uno. Así, Aprender más icono de flecha va a ir aquí. Y vamos a agrupar disco y llamarlo tarjeta uno. Así. Ahora puedes usar una función de cuadrícula de repetición, realmente fácil. Simplemente ampliar, crear tres. Pero no voy a hacer eso. Voy a simplemente duplicarlos todos alineados así. Y la razón es que más adelante voy a eliminar estos, crear un diseño y luego crear un componente y desde ese componente editado a todos estos otros diseños. Entonces eso es básicamente todo. Lo único que quizá podamos hacer es darnos un poco más de espacio. Entonces por ejemplo, una línea más de espacio. Ve aquí mismo y rellena el texto del marcador de posición. Entonces vamos a ver, necesitamos extenderlo a la escritura betún. No sé por qué. No me está dando más espacio. Entonces yo solo lo voy a llenar yo mismo. Al igual que así. Y luego me voy a dar un espaciado de 40 entre todos estos así, así. Porque voy a añadir algo de información real más adelante. Y realmente creo que necesito un poco más de espacio para todos estos. Y siempre puedes alinear así esta tarjeta central. Ahora vamos a renombrarlos algunos. Esta es la tarjeta número dos, y esta última es el auto número tres. agruparé un poco diferente, así que así y vamos a ver, podemos llamar a estos servicios. Y podemos llamar a este servicio uno, controlar un control C, controlar V. Y finalmente controlar V para este tercero. Y eso es básicamente su sección de servicios está terminada. Si te llevo de vuelta, lo que necesitamos ahora mismo es esto. Por lo que tenemos Homepage y tenemos tipo de cambio aquí. Entonces para ahorrar un poco de tiempo, lo que puedo hacer es simplemente usar indies Flags Great aquí. O en realidad podemos seguir adelante y empezar por crear nuestra sección de tipos de cambio. Entonces para hacer eso, voy a seleccionar este puesto, así. Y veamos, quizá pueda llamarlo tipo de cambio, BG. Mi papá. Y veamos, 1924, la altura para el ancho. Vayamos con 240, así. Para el color, vayamos con el mismo color que hicimos para nuestras imágenes y para el espaciado glitzy. A lo mejor podemos ir con algo un poco más grande, como 150, por ejemplo. Así. Y ahora lo que podemos hacer es realmente cavar y empezar añadiendo nuestros textos. Por lo que sin ningún tipo de frontera en. Y veamos, 24 perno funciona bien. Vamos a ver recomposicionarlo para estar aquí. 1234 y abajo Control D. Y posiciona aquí estos escombros. A ver, dejó la línea y esto va a ser cuatro. Y en efecto, como papá y vamos a ver, esto va a ser 24, irregular así. A ver, estamos a los 40, así que todo se ve bien. Ahora para agregar toda esta información, veamos qué podemos hacer. A lo mejor podemos duplicar estos dos. Golpe control D, posición y abajo posicionado es estar aquí, asegurarse de que ambos se les dejen más, nuestro centro y por ejemplo, disciplina para ser euro. Y va a ser algún valor. Entonces 1.58917, Por ejemplo. A ver, tal vez podamos darle 15 espaciado y eso es básicamente todo. Todo lo que necesitamos hacer es crear estas, estas banderas. Entonces para hacer eso, puedo crear una cuadrícula una vez más y mostrarte eso una vez más. Entonces vamos a ver. Vamos con algo un poco más grande, como una línea, nueve semanas AT que quitan la frontera, usaron la repiente cuadrícula. Y voy a pausar el video aquí porque voy a crear ese mismo proceso que ya te mostré. Y ahora que lo he hecho, se puede ver que todos ellos están seleccionados. Y también seguí adelante y dejé a un lado estas, que en realidad voy a usar. Por lo que tengo dólar de los Estados Unidos, Reino Unido, y Franco Suizo, Rublo ruso, y Yen Japonés. Y no estás viendo que nos falta euro. Eso se debe a que aquí no hay bandera de la Unión Europea. Entonces vamos a seguir adelante y quitar todos estos. Haga clic aquí. Podría controlar la posición D aquí mismo. Y el hormigueo que va a hacer es arrastrar y soltar una imagen de una bandera de la UE. Y puedes encontrar estas imágenes en Wikipedia. Son libres de usar para estos fines. Por lo que seguiré adelante y seleccionaré, arrastraré y soltaré dentro. Y lo que en realidad voy a hacer es ver posición y esto para ser un alineamiento a la izquierda, asegúrate de que esté a los 40 como este. caso de que estos dos estén en el centro y posicionarlos para estar aquí mismo. A ver. Entonces tal vez 22. Creo que eso funciona bien. Y ahora sigamos adelante y empecemos agregando estos. Por lo que le pegaré al grupo Control G este texto de calidad, así. Y luego simplemente hacer pocas copias más y posicionarlas. Entonces seguiré adelante y posicionaré aquí mi bandera de Estados Unidos. Tú alguien. Sí, vamos a dar este capital. O bien puedes seguir adelante y dar click aquí para añadir un color mayúscula. Es más fácil para ti. ¿Qué necesitamos? Siguiente es un Reino Unido. Entonces posiciónelo aquí, médalo en el centro con todas estas posiciones de Control D aquí. Esta es una gran libra británica. Haga otra copia, y haga otra copia aquí mismo. Entonces lo que necesitamos a continuación es franco suizo y nombre es c, h, f Así que posiciónelo aquí. Puedes ver cuando tienes tus copias, es mucho más fácil lidiar con todas estas porque es simplemente una situación de arrastrar y soltar, como puedes ver. Entonces para este X, U, B, y finalmente, y japonés todavía, y llámalo un día. Entonces esta es nuestra sección más adelante el fin de semana, adelante y hacer algunos cambios, adaptar esto, pero básicamente esto es irritante. Entonces sigamos adelante y organizemos todo. Así que muévete aireando justo aquí desde arriba. Pondré tipo de cambio aquí mismo. Presentaré la fecha también aquí mismo. Y luego iré con euro. Entonces es esta posición única aquí. Y asegúrate de que un texto hecho a mano, USD con este texto y grupo necesita llamarlo británico congruente. Se puede ver con algunos de estos, se puede llevar un poco de tiempo y es paliza y laborioso. Pero como siempre, se puede acelerar un poco las cosas hablando, primer lugar, como estoy haciendo yo. Pero básicamente puedes aumentar tu velocidad. Ahora por fin, sigamos adelante y agrupemos todos estos. No me voy a molestar con los valores reales en este momento. Vamos a dejar eso para el diseño así. Y ahora sigamos adelante y sigamos hacia abajo. Entonces si te llevo aquí, puedes ver que tenemos una imaginería alineada a la izquierda, tenemos título párrafo y el texto. Entonces lo que vamos a empezar a hacer ahora es en realidad quizás copiar y pegar algunos de estos artículos. Entonces para nuestra imagen y sigamos adelante y usemos una herramienta de rectángulo. Seguiré adelante y quitaré la frontera. Y veamos, usemos ese color para nuestras imágenes. Entonces es éste. Para este enfrentamiento glitzy. A lo mejor podemos ir con 150 de aquí, así. Y veamos por el ancho, tal vez podamos ir con seis columnas de ancho, por lo que 246, así que alinearnos con esta. Y tenemos seis más para el texto y para todos estos otros elementos. Entonces lo primero que voy a hacer en realidad es copiar este botón y vamos a renombrarlo. Conoce más. Btn, buen control. Sue. Y vamos a ver, posición. Está en algún lugar por aquí. Y en realidad voy a hacer espacio adicional. Entonces si elimino mi cuadrícula, se puede ver que tengo una columna en el medio, que es el espacio vacío. Sólo para darme un poco más de espacio para respirar para que pueda ver todo esto un poco mejor. Ahora, puedo dar click en mis textos y ver. Y puedo teclear algo como Servicio irá aquí, nuestro nombre de servicio aquí. Y esto es sólo porque y para mostrar a tus clientes y lo que va a ser posible, lo que pueden incluir aquí mismo. Y vamos a hacer algo un poco diferente aquí también. Entonces vamos a ir con audacia. Nos vamos a ir con 48. El color del texto va a ser el mismo. Simplemente ve rec aquí estilo de carácter y más ancho justo debajo aquí. A continuación, vamos con un párrafo de texto. Y vamos a ver, 24 va a funcionar. Bueno aquí, Extendido. A ver, tal vez cinco líneas de texto como esta. Al igual que así. Y voy a cerrarlo aquí y volver a mis plugins, llenar el texto de marcador de posición solo para llenar todo así. Y veamos por el espaciado, podemos ir con 40 por todos lados como lo hicimos antes. Y ahora puedes empezar a ver estos cambios que se repiten. Por lo que hablando de múltiples veces. Entonces este espaciado o 40 y así sucesivamente y así sucesivamente. Por lo que todas esas cosas van a suceder cada vez más a medida que empecemos a movernos a lo largo de nuestros diseños. Entonces aquí va a ser nuestra imagen. Y llamemos a esto, digamos nombre de servicio. Por ejemplo, solo por ahora y más adelante cuando realmente tengamos contenido real que poner aquí, entonces vamos a cambiar y actualizar su nombre. Ahora, puedo golpear el control S, y puedo seguir adelante y mostrarte lo que puedes hacer con esto. Por lo que puedes hacer clic en el nombre del aeropuerto y hacer clic aquí justo solo para ingresar al modo de vista previa. Y se puede ver cómo se ve eso porque extendimos nuestro rpart, podemos seguir adelante y desplazarnos hacia abajo. Y ahora puedes ver que esto empieza a parecer un sitio web real. siempre puedas seguir adelante y compartir esto con tu cliente simplemente yendo a la acción. Pero voy a explicar eso un poco más tarde. Vamos ahora adelante y, y básicamente redondear este diseño y rematarlo. Entonces ahora empecemos por crear nuestra corriente. Si te llevamos de vuelta una vez más, puedes ver que tenemos estas dos tarjetas, sierra, imagen y texto y btn está abajo. Por lo que los paquetes son cuentas combinadas. Volvamos atrás y empecemos diseñando dosis. Entonces porque tenemos que hacerlo, podemos ir con 16 ancho así. Y veamos qué podemos hacer con ellos. Entonces llamemos a esta tarjeta grande, por ejemplo. Y así. Y vamos a darle ese mismo color. Entonces en S1. Y sigamos adelante y cambiemos el tamaño. Entonces podemos ir con 7-0 para, por ejemplo, así, radio de esquina de 20 va a funcionar bien, quitar cualquier frontera. Y lo que podemos hacer es duplicar este. Has controlado d Lo vamos a llamar gran imagen actual. Porque va a ser la imagen la que va a ir justo aquí en la parte superior. Entonces vamos a ver. Podemos entrar a la derecha aquí, 20, 24 la parte superior izquierda y superior derecha, 00 para la parte inferior izquierda e inferior derecha. Y para mostrarte lo que hice, puedo dar click aquí mismo. Y veamos, podemos hacer 368 por ejemplo. Y ahora se puede ver que este es nuestro fondo para el texto y este es para nuestra imagen. Entonces vamos a incluir nuestra imagen un poco más tarde. Y lo dejaré en esto. Entonces para poner nuestro texto, vamos a ver aquí. Y podemos seguir adelante con 24 voltios por ejemplo, para éste. Sí, creo que eso funciona muy bien. Y vamos a ver, podemos ir con 40 en todo el camino. Por lo que 1234. Y podemos hacer lo mismo aquí, 1234. Podemos ir control de cabeza grupo D1, lo siento, duplicar esto, posicionarlo hacia abajo. Y parezcamos tal vez podamos hacer que este 18 sea irregular así. Y podemos ampliarlo para que sea, veamos, así, 1234 y luego posicionarlo aquí. Y me voy a dar cuatro seguidas así. Y asegúrate de que esto encaje aquí. Adelante a mis plugins. Lorem ipsum, tasa de clic. Atrévete. No entiendo por qué hizo eso. Por alguna razón no funciona. A lo mejor podemos apagar esto e ir con tamaño fijo. Sí, ya funciona. No sé por qué hicieron eso, pero realmente no importa. Entonces lo que voy a hacer a continuación es usar este botón y en realidad ponerlo dentro. Entonces lo pondré aquí mismo. Asegúrate de que el centro del botón esté alineando aquí. Y en realidad lo voy a posicionar 40 desde la derecha. Por lo que 1234. Y ajustando deuda, le da algún interés visual lugar de posicionarse en el botón justo aquí y teniendo todo este espacio vacío. Entonces ahora como que parece uno. También puedes posicionarte para estar en el centro izquierdo alineado como quieras. Pero creo que para fines de variación, es mejor dejarlo aquí, pero realmente todo depende de ti. Puedes seguir adelante y experimentar, lo siento, experimentar con esto como quieras. Por lo que posicionará esto aquí. Y Ver, así que necesitamos agrupar estos dos textos, imagen y aprender más botón debe controlar g, llamado esta gran corriente. De esta manera, golpear el control D para duplicar. Y veamos, tal vez podamos posicionar estos para que sean 150 para que podamos tener el mismo espaciado que teníamos entre todos estos. Ahora que esta página viene muy bien, lo que tenemos que hacer por último, básicamente es crear y blog. Porque si te llevo de vuelta, puedes ver que tenemos noticias y tenemos estas tres secciones con artículos de noticias. Entonces lo que podemos hacer es realmente usar en este mismo control de golpe de corriente D moldeado y mordido. También voy a usar estos mismos textos. Por lo que hit control C, control V misión. Está en el centro. Y tal vez podamos llamar a esto nuestras últimas noticias o lo que sea. Nuestras últimas entradas de blog o como quieras asegurarte de que sean 150 también. Asegúrate de que esté en el centro. Y lo que en realidad voy a hacer con este, vamos a ver. Puedo saltar dentro y sería, puedo llamar a esta pequeña corriente o algo así. O aún mejor, en realidad podemos usar estos. Entonces vamos a ver. Control C. Escribiremos aquí borrado este. Control v posición está aquí. Y porque tenemos tres de ellos, entonces va a ser básicamente lo mismo que éste. Entonces más con todo el camino hacia abajo. Ahora, lo que en realidad voy a hacer aquí mismo, vamos a ver. Llamemos a esta pequeña corriente. Porque para realmente lo vamos a crear más tarde para ser un componente. Lo que vas a hacer con este es asegurarte de que solo tengamos dos líneas de texto, así. Entonces 40, una vez más, hit control D. Vamos a poner la fecha aquí porque obviamente necesitas una fecha para estos. Nos vamos a ir con auto ancho. Y veamos 1012, 20-24 ejemplo. Y vamos a darle este color, por ejemplo, sólo para diferenciar un poco, esto puede permanecer igual. Y en lugar de este Ikhwan, veamos, podemos conseguir este control D. Y veamos pequeña parte como esta. Ahora por la altura. Y veamos qué podemos hacer. mejor 300, creo que va a funcionar bien así. Y van a cambiar el color para descubrir. Lo que vamos a hacer a continuación es extender esto en altura. Esta tarjeta original. Entonces veamos, 631. Creo que va a funcionar bien. Sí. Por lo que voy a seleccionar estos usando la tecla Mayús, posicionándolos hacia abajo 1234. A ver. Y veamos qué podemos hacer con este. Entonces posiciónelo desde aquí. A ver, a lo mejor puedo subir estos cambios sólo un poquito. O aún mejor, puedo mover esto sólo un poquito hacia abajo. Entonces como 20, esto va a ser 40. Y veamos, 1234. Eso está bien. Entonces lo que realmente necesitamos es posicionar esto hacia abajo. Entonces va a ser al 87, llegó a lo 50, siete. Y hagamos algunos cambios finales. Por lo que necesitamos estos dos de fondo. Así que abajo derecha e inferior izquierda para estar en 0 así. Entonces cuando hago clic afuera, puedes ver cómo se ve eso. Entonces finalmente, tenemos 40, tenemos 40 de aquí, tenemos 20, tenemos 4040. Entonces sigamos adelante y agruparemos esto. Entonces tenemos uno actual. Aquí lo puedo esconder. Y organicemos las cosas sólo un poquito. Entonces el servicio uno, ver más lo admite. Y justo aquí vamos a escribir en algo como Artículo uno. Sólo para diferenciar un poco las cosas porque esta va a ser nuestra última noticia. Veamos dónde estamos así. Y golpear el control D para duplicarlo. Y duplicarlo una vez más. Este es evento a, B, Artículo Dos y disciplina para ser Artículo tres como éste. Y simplemente organice estos. Entonces esto son dos, este es el actual tres. Colóquelos solo un poco diferentes. Y por último, podemos llamar a esto nuestras últimas noticias porque ya tenemos desde ese título como celular. Ahora, últimas dos cosas vamos a crear aquí nuestra tira de información y el fondo de pie de página. Simplemente lo voy a tener básicamente como un pie a fondo porque te voy a explicar cómo puedes editar estas fotos a medida que avanzas un poco más tarde. Pero por ahora sólo vamos a tener el fondo de pie de página, Derek. Pero antes de eso, vamos a darle una tira de información. Y para ello, vamos a utilizar una herramienta de rectángulo una vez más. Y posicionémoslo para ser 150. Entonces viendo como todos estos, ahora, para esto, llamémoslo stripar. Bg va a contener básicamente el medio en información clave que queremos retratar a nuestros visitantes. Entonces démosle una altura de 180. Vamos a revisar el 50. Eso está bien. Vamos a darle este color, por ejemplo, bonito y oscuro. Quitemos la frontera. Y lo que vamos a hacer ahora, simplemente usamos nuestro logo que tenemos justo aquí, top now. O en realidad podemos ir adelante y arrastrarlo y dejarlo caer de héroe. En realidad lo posicionaron aquí. Usa la versión gris o la versión en blanco y negro, como te expliqué. Y esto es lo que estaba diciendo porque hay que posicionar a estos indiferentes encima de diferentes colores. Por eso tenemos logotipos en diferentes versiones, diferentes variaciones y diferentes colores. Ahora, por fin, lo que necesitamos es el texto. Entonces en realidad voy a seguir adelante y copiar esto y copiar esto. Entonces localiza, coloca este logotipo hacia abajo, ve a mi parte superior. Ahora, usa ubicaciones. Hold podría controlar nuestras ubicaciones. Usar teléfono y disciplinarlo. Control C, para copiarlo e ir todo el camino hacia abajo. Da click en mi control BG V y mueve loros hacia abajo. Sostendré mi turno y más aireante. Y ahora lo que tenemos que hacer es básicamente una reorganizar estos. Y sólo un poquito, Vamos a ver, tal vez pueda poner esto y esto para estar en algún lugar por aquí, por ejemplo. Y puedo poner esto, y esto podría parecer estar aquí por ahora. Y lo que necesito finalmente es texto para mi correo electrónico. Por lo que tienen un correo electrónico, así que ha tenido un préstamo en el bank.com. Obviamente vas a usar los tuyos, ponérselo a los clientes más tarde. Y lo que necesitamos finalmente es un icono de correo electrónico. Entonces voy a usar uno que ya he creado previamente. Y aquí está. Voy a volver aquí, ubicado aquí, haga clic derecho hacer local, igual que lo hicimos para todos ellos o puedo comprobar rápidamente. Entonces esto es a los 20, si recuerdo, Sí. Entonces ve aquí mismo. Cambie uno para asegurarse de que esto esté en el centro así. Y esto está en centralizado. Entonces vamos a llamar así a este correo electrónico. Y hagamos algunas alineaciones rápidas. Entonces posicionaré esto hacia abajo. Podemos llamar a este teléfono y ubicaciones. Y en realidad usaré una ubicación real aquí. Podría ver, porque soy un poco perezoso para teclear, simplemente voy a dotar al gris aquí control V. Y vamos a ver, puedo reposicionar estos. Por eso los estás poniendo en carpetas. Seleccionaré esto para estar aquí. Y luego seleccionaré los tres y pincharé aquí mismo, lo que lo va a posicionar de manera uniforme en disidente de aquí a aquí. Ahora hagamos algo de reorganización una vez más. Por lo que contamos con Logo, Ubicación, teléfono, correo electrónico. Una última cosa y los seleccionaremos a todos. Da clic aquí para asegurarte de que estén en el centro. Sí golpea Control G y llama a esta info resbaló. Y debido a que esta sección es realmente bastante simple, podemos terminar usándola en nuestro diseño final. Por último, vamos a crear un pie de página. Y para hacer eso, simplemente voy a usar un rectángulo una vez más. Entonces, veamos. Démosle algún día. Mencius de 19-21 Y por 5-6, cinco, por ejemplo. Me aseguraré de que esté en el centro. Volveré aquí y usaré nuestro color más oscuro, que es este 100 realmente lo moverá abajo. No sé por qué Adobe st está haciendo esto de vez en cuando, pero me sigue mostrando estas variaciones. Yo quiero hacer esto aquí, posicionado esto aquí. Y ahora tengo todos mis colores se posicionan de manera uniforme. Ahora que lo he hecho, puedo llamar a este pie de página BG, posicionarlo todo el camino hacia abajo. En realidad voy a seguir adelante y cerrar la junta de RR. Entonces haz doble clic y asegúrate de que tu zoom todo el camino con ropa bonita, tenemos un borde, te vas a quitar eso. Y básicamente lo único que voy a hacer es usar y d arriba elementos de nuestra navegación. Entonces si te llevamos de vuelta aquí, tenemos cuentas pertenece, tarjetas, invierte digital. Eso es lo que realmente vamos a usar y finalmente usar cualquiera de los enlaces. Por lo que ahora voy a utilizar el texto de nuestra principal. Por lo que simplemente seleccionó golpeó Control-C. Y vamos a ver, puedo acercar en posición adherir Control V. Ahora lo que voy a hacer es usar un color blanco, así. Y por último, voy a usar algo así como 24 negrita para estos años color lejano. Y ahora los he reorganizado sólo un poquito a jabón. A ver. A lo mejor puedo posicionarlo para estar 100 abajo desde arriba. Por lo que 12345678910, sólo para darnos un poco más de espacio y asegurarnos de que esto esté posicionado a la cuadrícula. Asegúrate de que tengas a columnas de separación porque realidad vamos a incluir alguna información adicional más adelante. Pero mira como aquí hay trato Control D y enlaces de ardor tipo--in aquí. Eso es básicamente lo último que vamos a hacer es duplicar este. Y veamos, puedo crear algo pequeño. Entonces 18, asegúrate de que sea blanco, asegúrate de que sea centro. Y veamos, puedo, enfrentado en este texto que anteriormente ya creé. Entonces vamos a ver. Puedo posicionar que habrá 40. Hasta 3-4. Y más adelante cuando iniciemos el diseño empecemos a llenar toda esta información adicional con páginas, entonces vamos a posicionar eso para estar ahí. Lo que puedes hacer en realidad es comenzar agregando estos enlaces. Entonces veamos, voy a duplicar esto, asegurarme de que esta vez quede alineado. Y veamos, puedo asegurarme de que sea 4D en medio. Por lo que 1234. Y llama a esto, digamos cuentas una. Por ejemplo, el control de golpes D. Cuenta también. Cuenta tres. Por último, da cuenta, y eso es básicamente todo. Entonces cuando realmente comienzas a importar datos reales dentro, cuando realmente comienzas a traer datos reales. Entonces, ¿cuál es el nombre de esta cuenta, 30. Los tramas de Wireframes en Adobe Xd 3: Adelante y continúa con nuestra alambrada. Entonces si acercamos un poco más, se puede ver que la siguiente página que tenemos para crear cuentas. Y lo que voy a hacer es dar click aquí mismo, golpear control D para duplicar mi rpart. Y luego lo que vamos a hacer, como expliqué en videos anteriores, no vamos a tocar este nav principal. En realidad vamos a adaptarnos a ella. Lo vamos a animar más adelante en las etapas de diseño, pero por ahora, sólo lo vamos a dejar aquí. Ahora, cuando se trata de imagen de héroe, como se puede ver a partir de estos wireframes que dibujamos. Entonces en la página de inicio, que es ésta de aquí, tenemos el texto del título y el botón de llamada a la acción a la izquierda. Pero en todos y cada uno de estos, Después de eso, lo tenemos a la derecha, como se puede ver, sólo para darle algún tipo de distinción entre estas dos páginas. Entonces lo que vamos a hacer primero es que vamos a saltar dentro. Y sólo voy a hacer doble clic porque lo ponemos en una carpeta. Simplemente lo voy a posicionar en algún lugar por aquí. Entonces veamos 246. Entonces, alinémoslo hasta el sexto. Entonces si acercamos sólo un poco más cerca, se ve 1-2-3, 4-5-6. Por lo que está cubriendo seis de líneas indies, líneas de cuadrícula. A continuación, vamos a hacer doble clic aquí y escribir cuentas porque queremos darle un nombre. Y una cosa más de Adobe XD si queremos mostrar flujos. Entonces vamos a ver si golpeo control un 0, que este es nuestro wireframe, Estas son nuestras personas wireframes en esta es nuestra arquitectura de sitio web. Por lo que puedes darle un flujo y mostrar un flujo a tus clientes, tus clientes, u otros diseñadores en el equipo. Simplemente haga clic aquí en un prototipo. Haga clic en este y haga clic aquí. Se va a mostrar flow uno, simplemente haga doble clic en insight y dale un nombre. Vamos a llamarlo wireframes. Y por qué Flo es importante. Si vuelvo a mi diseño, se puede ver que este nombre se pega justo aquí. Bueno, más adelante nos vamos a dar realmente mucho más de estos elementos de diseño. Mucho más de estos son tableros. Vamos a incluir el diseño responsive, vamos a incluir cuadros de mando y así sucesivamente. Por último, voy a mostrar cómo puede adaptar todo esto a las apps y tamaños de apps que vamos a diseñar para el iPhone. Por lo que todos estos instintos nos van a llevar mucho espacio. Y cuando envías este archivo a tus clientes y a los desarrolladores, ellos quieren saber qué es todo. Y por último, es mucho más fácil para ti como diseñador. Conoce lo que es todo porque te vas a ver al final de este curso. Vamos a tener mucha de esta información incluida en el interior. Por eso es importante mostrar tus flujos. Cualquiera de los beneficios sobre el flujo es y estos wireframes solo se van a conectar entre sí. Entonces si acercamos un poco más, puedes ver que aquí tenemos una portada o una página web o como quieras llamarla. Pero después de la página de inicio de sesión, estamos saltando dentro del aeropuerto. Perdón, dentro del tablero. Por lo que el tablero puede ser como flujo separado. Puede ser nuestro tablero de mandos de estructura alámbrica. Puede ser alámbrico de dashboard, quiera llamarlo. Y vamos a ver un poco más tarde. ¿ En realidad vamos a diseñar todas estas páginas dentro de nuestros wireframes? O simplemente vamos a diseñar este primer dashboard y luego saltar al diseño y luego sumar todas estas otras páginas. No perder demasiado tiempo. Entonces ahora que, eso está cubierto, volvamos a saltar. Y lo que queremos hacer por éste es, y una vez más, por eso tienes todos estos. Para que veas que tenemos un texto aquí mismo, abre tu cuenta. Por lo que simplemente podemos hacer doble clic aquí. Y podemos desagrupar los servicios. Para que puedas hacer clic derecho en grupo o control de turnos G, Shift Command Z. Y llamémoslo abrir tu cuenta. Y lo que vamos a tener aquí mismo, si una vez más te llevo aquí, vamos a tener cuatro iconos diferentes. Entonces básicamente vamos a tener cuatro cajas diferentes con el texto dentro y en estas cajas realmente vamos a incluir iconos y el texto. Entonces vamos a ver, tal vez podamos empezar agregando esto. A lo mejor podemos llamarlo selector. Por ejemplo. Justo debajo de aquí. Puedo saltar dentro de esta tarjeta número uno. Déjame seguir adelante y borrar estos dos para poder abrirla. Y en lugar de BG actual, tal vez pueda llamar a este selector así. Y si acercamos un poco más, puedo cambiar su que mencionaron porque por el momento es demasiado grande. Entonces vamos con tres 66 ancho, 312, así. Por lo que se puede ver que está tomando tres columnas de ancho. Nos vamos a deshacer de esto. Nosotros vamos a deshacernos de esto. Y en realidad sólo vamos a dejar nuestro mensaje de texto, sólo éste. Entonces sólo voy a quitar esto también. Y ahora tenemos a estos dos. Entonces voy a llamar a esta cuenta Start porque si te acuerdas, en realidad nos dieron estos nombres de contador. Entonces iniciar el conteo es nuestro primero. Y vamos a seleccionar esta cuenta de dos estrellas y esta, posicionarla en el centro. Vamos a posicionar r, icono estrella. Colócala en el centro así, y déjala así por ahora. Pero voy a hacer a continuación es crear esta forma. Y quizá incluso pueda extenderla sólo un poquito a algo como esto. A lo mejor puedo darle la vuelta porque quiero mostrar que distinto está seleccionado. Entonces vamos a seleccionar estos para asegurarnos de que están en la posición central, este selector de polígono hacia abajo hacia arriba, y llamémoslo flecha. A ver. Alejémonos un poco y veamos cómo se ve. Creo que va a funcionar bien, va a apagar mi grilla por un segundo. Creo que va a funcionar bien, solo necesito posicionarlo y tal vez como en disco. Y luego le voy a dar el mismo color y que hice con este fondo. Por lo que voy a seleccionar estos para dar clic aquí para combinar en esta forma. Entonces ahora tenemos una sola forma. Para que veas si cambio estos colores, puedes ver cómo cambia y actualiza a esta sola forma. Entonces vamos a dejarlo ahí. Y vamos a ver, podemos llamar así a esta cuenta de Start. Y puedo traer mi grilla de vuelta porque la voy a necesitar. Voy a duplicar esta única posición aquí. Una posición este aquí. Una vez más, puedes usar la función de repetición de cuadrícula si quieres comprar el una vez más, porque esto es solo un alámbrico. Y más adelante, en realidad voy a crear esto como componente y añadirle algunos elementos adicionales. Entonces solo lo voy a dejar así. A esta siguiente se le llama cuenta extranjera. Y simplemente voy a hacer doble clic aquí mismo. Como pueden ver, tenemos algunos errores y esto va a ser millennial. Tan cuenta milenaria. Y la razón por la que estoy renombrando a todos estos es solo, es más sencillo que después entienda qué es todo. Y este último es premium. Entonces solo voy a seleccionar mi inicio escribiendo Freemium y llamarlo t Siguiente, voy a eliminar esto, y en realidad voy a usar esto a mi ventaja. Entonces vamos a ver, tal vez Aiken una posición que a los 60, tal vez, vamos a ver. Entonces 1-2-3, 4-5-6 tal vez. Veamos cómo se ve eso aquí. Y también lo puedo demostrar solo para mostrarte cómo va a quedar más adelante cuando esté en vivo. Entonces obviamente no se puede decir por el momento, pero éste, digamos está seleccionado. Entonces con cada uno de estos, al seleccionarlos desdeñan fois se va a actualizar y esta imagen también se va a actualizar. Entonces volvamos a cambiarlo. Y para esta imagen, déjenme elegir rápidamente este color porque necesito adaptar algunos de estos radios coordinadores. Entonces vamos a ver. Voy a actualizar mi parte superior izquierda y añadí 20. Esto va a ser 20. Entonces si hacemos clic afuera, se puede ver que esto y esto están a su alrededor. Lo que en realidad voy a hacer a continuación es incluir espalda de manglar. Y voy a saltar dentro de mi imagen. Y lo voy a posicionar justo ahí. Entonces voy a hacerlo sólo un poco más estrecho de lo que originalmente era. Tan atrevidos, se ajusta un poco mejor a nuestra red y a nuestra estructura. Entonces si vemos que estamos en 100 aquí, estamos en 60 justo aquí. Para que todo se vea bien. Lo que voy a hacer a continuación es agregar una sección de preguntas comunes justo debajo de la disección. Entonces voy a golpear el control D y posicionarlo para estar al 100. Y veamos, lo voy a dejar aquí y veamos de qué podemos deshacernos. Para que podamos deshacernos de todas estas cosas. Entonces lo que voy a hacer por este es, vamos a ver, necesito, necesito este apartado por ejemplo. Entonces saltemos dentro de aquí. Y siempre se puede ir atrás y adelante entre todos estos y tomar estos diferentes elementos. También voy a tomar aprender más hit Control C. Y también voy a volver aquí mismo y posicionarme justo aquí. Entonces ahora los organicemos sólo un poquito. Entonces porque estas van a ser preguntas comunes. Y en realidad podemos seguir adelante y terminar esta sección porque va a ser mucho más fácil para nosotros más adelante. Por lo que este es de 24 voltios. En realidad voy a aumentar esto a 24. Voy a aumentar esto a 24. Y una mezcla que se selecciona este color. Y veamos, les puedo dar espaciado o 40. Eso se ve bien. A ver, esto va a ser en cirugía o por tal vez algo como esto. Y déjame seguir adelante y copiar y pegar el texto original que realmente vamos a usar aquí. Y saltaré aquí y me aseguraré de que sean 40. Y esto va a escribir en cuentas comunes preguntas como así. Y en realidad voy a arrastrar y soltar mis iconos aquí, que he preparado. Entonces saltaré aquí y posicionaré aquí mi ícono y lo alinearé a la izquierda. Y veamos, puedo posicionarlo para estar a los 40, así. Saltaré aquí mismo o haga clic derecho hacer local, y este es mi ícono. Ahora todos estos iconos premium ahora están tomados de invitaciones o elementos. Y vas a ver estos iconos a lo largo de nuestro diseño, sobre todo cuando tocamos estos. Y también voy a dejar enlaces a estos iconos y estos paquetes de iconos. Hombre, para no repetirme, no puedes usarlos para otra cosa que no sea con fines de aprendizaje. Si decides usarlos, entonces no te sorprenda si algunas de estas empresas trataron de demandarte para ir tras de ti. Entonces si quieres usarlos para proyectos premium, para tus proyectos de cliente y así sucesivamente, tienes que comprar estos iconos. Ahora voy a hacer tres más de estos. A ver, control. ¿ Te aseguras de que esto sea 41234 y Control D una vez más. Entonces vamos a ver. No sé por qué me está dando 39.8, pero no importa. También voy a copiar y pegar algunos de estos de mi diseño original solo para ahorrar un poco de tiempo. Porque como dijo en este apartado, va a aparecer a lo largo de nuestras páginas. Entonces si acercamos aquí puedes ver preguntas comunes vienen, preguntas, vienen preguntas y así sucesivamente. Entonces, todas estas páginas, va a aparecer, así que es mucho más fácil para nosotros arreglarlo ahora y terminarlo ahora que esperarlo más tarde. Ahora, saltemos adentro y organicemos un poco las cosas. Por lo que tenemos información de cuenta, ícono, preguntas de iconos, tenemos el texto. Y organicemos estos tres un poco así. Y saltaré dentro del hit del grupo d Control G. Y llamaré así a estas preguntas comunes de conteo. Y déjame posicionarlo justo por encima de la tira de información así. Preguntas comunes como esta. Y saltemos adentro en lugar del nombre del servicio. Veamos qué podemos hacer. Podemos simplemente renombrar esta información o info. Porque como dije, esto va a contener información que es específica de cada una de estas cuentas o siempre que un usuario haga clic en éstas y esta información realmente va a cambiar. Entonces cuando lleguemos a la etapa de diseño, en realidad voy a demostrar que vamos a prototipo de cama, agregar a alguien menciones, agregarle alguna especia. Y ahí es cuando esta información va a cambiar junto con estas imágenes. Entonces, por ahora, dejémoslo a una. Entonces vamos de abrir tu cuenta y voy a seleccionar todos estos. Entonces abre tu cuenta. Deuda. Debajo de que hemos llegado preguntas y tenemos unas preguntas comunes de cuenta. Entonces veamos que la recomposición merece estar a 140 de aquí. Entonces vamos a ver, estamos en 140. Sólo estoy usando turno y mi flecha inferior. Entonces voy a duplicar esto. Golpe control D. Colóquelo aquí. Control D, Una vez más. Posiciona este al fondo, éste al centro. Y veamos, el centro uno va a ser preguntas bancarias comunes como esa. Y por último, tenemos ésta que va a ser herramientas útiles como esa. Ahora, déjame saltar dentro y seleccionar mis otros iconos. Y los copiaré y pegaré aquí mismo de nuestros documentos originales. Para que puedan ver, acabo de seguir adelante y les nombré herramientas útiles, icono y preguntas bancarias icono. Entonces si saltamos aquí mismo, puedo hacer clic derecho y hacer local ME Klocal, y eso es todo. Ahora, la auditoría que me queda para hacer es traerlos adentro. Entonces aquí tenemos preguntas bancarias que solo voy a usar en este y simplemente posicionarlo a los 40. Y a la izquierda, voy a seguir adelante y borrar este. Y en realidad vamos a hacer lo mismo por herramientas útiles. Arrástrelo y suéltelo dentro de la posición del manto en aquí a los 40. Asegúrate de que esté alineado a la izquierda y borra este. Y rebaño lechero. Ahora, lo único que me queda por hacer es simplemente copiar y pegar mis textos para no aburrirte con esos detalles, voy a pausar el video aquí. Y ahora que lo he hecho, puedo volver atrás y explicar algo de esto un poco más. Entonces por el momento solo estamos diseñando estas páginas en realidad iban a traer todas estas páginas adicionales del panel de control. Y lo vamos a llamar así por ahora. Y también se puede ver en la arquitectura del sitio web, estas playas exactas que vamos a diseñar. Todas estas páginas adicionales son páginas secundarias a nuestro cliente, lo que significa que son importantes, pero simplemente no son tan importantes como estas páginas que estamos diseñando en este momento. Y vas a ver esto a lo largo de tu diseño. Entonces tu trabajo como diseñador es ver, por ejemplo, si estás haciendo un rediseño de un sitio web como lo estamos haciendo con este ejemplo, tu trabajo como diseñador es darle a tu cliente la solución que te están pidiendo. Entonces tu trabajo es resolver los problemas que están teniendo. Descubre quién es el cliente objetivo en cómo puedes adaptar tu diseño, diseño existente y tu diseño que vas a diseñar para sus necesidades. Pero tu trabajo también es ver todas estas páginas adicionales y preguntarles, ¿también las necesitas rediseñadas? Porque todo esto varía. Por ejemplo, con tu presupuesto y el tiempo que vas a gastar en este proyecto y así sucesivamente. Si en realidad vamos a hacer este sitio web de verdad y vamos a rediseñar todas estas páginas. Nos va a llevar unos cuatro meses hacerlo. Por lo que solo puedes imaginar lo enorme que es esta tarea. Pero con algunas páginas como mapas de Ubuntu por ejemplo, como con sobre páginas y así sucesivamente. Todo lo que estás haciendo es simplemente usar algo que alguien más ya creó. Entonces, por ejemplo, con los mapas, la mayoría de los negocios están usando Google maps o simplemente los integran en tu diseño. Y los desarrolladores solo van a usar SDK o algún tipo de conexión en frío. Para que puedan integrar eso en la página web. Lo mismo con los foros. Si están usando foros de clientes, entonces bien. Pero la mayoría de las empresas, especialmente las pequeñas empresas, están usando algo así como un plug-in de foro o formularios externos o formularios de google y así sucesivamente. Por lo que no tienes que diseñar esas páginas ahora para estas páginas, puedes ver claramente que estas son solo páginas de preguntas frecuentes. Entonces básicamente preguntas y respuestas en forma de texto. Por lo que solo puedes diseñar una sola página, que solo se va a repetir una y otra vez, pero con información diferente, que es el trabajo del desarrollador para ingresar toda esa información. Pero por ejemplo, aquí con herramientas útiles, se puede ver que tienen calculadora universal de dinero en línea. que básicamente significa que si tú, por ejemplo, quieres convertir Euros a dólares estadounidenses o lo que sea, entonces tienes que ir a esta página de calculadora de dinero, que ya tienen. Por lo que no estás rediseñando la deuda. Los tipos de cambio en línea actuales son, por ejemplo, no vas a rediseñar eso tampoco porque están actualizando la deuda todos los días. Ya lo tienen. Y en realidad no tiene que estar sincronizado con otros diseños de la página. Herramienta calculadora larga mensual es la herramienta que ya tienen. Por lo que tampoco tienes que rediseñar esa página. Tienes que tener todas estas cosas en mente. ¿ Tienes que hacer todo tú mismo? ¿ Ya tienen algo diseñado? ¿ Tienes que preparar algo, y así sucesivamente. Y de todas estas cosas sale el presupuesto y llega el momento de este proyecto en particular. Entonces sigamos ahora y agruparemos todos estos porque no voy a invertir demasiado tiempo en ello porque ya está terminado. Y podemos llamarlo preguntas comunes. Y solo voy a mostrarte rápidamente un consejo que puedes hacer, sobre todo para el diseño responsive. Entonces aquí se puede ver que tenemos 12 columnas diferentes, pero sólo se puede imaginar y endeudar. Cuando un sitio web está yendo y respondiendo, está reduciendo en tamaño. Por lo que este aeropuerto se está haciendo más pequeño como disco por ejemplo. Y lo que puedes hacer en Adobe XD es usar pilas. Y así es como funcionan las pilas. Por lo que automáticamente efectivamente mazos y que tu pila sea así, tan horizontal. Y también puedes crear una pila vertical, que es una función fantástica para tener en Adobe XD cuando estás haciendo diseño responsive. Entonces digamos que quiero posicionarlos no así, sino uno encima del otro. Simplemente puedes hacer clic aquí y los va a reposicionar, pero el orden no se corrige momento. Entonces todo lo que realmente tienes que hacer es simplemente una reorganizar algunos de estos. Y puedo agregar una posición como esta. Y ahora si reduzco el tamaño de mi arte nacido, puedes ver que encaja realmente bien. Mantiene todo el espaciado en el que originalmente creamos, por lo que todo se ve bonito y limpio. Entonces esas son las pilas, y te voy a mostrar cómo puedes jugar con ellas mucho más adelante en el proceso de diseño. Por ahora, vamos a cerrar este diseño y vamos a darle 100 aquí. Al igual que esto. Y comprobar rápidamente, ¿hacemos ella uno o 150. Por lo que voy a seleccionar estos dos hits 1-2-3-4-5 para aumentarlo a 150. Y voy a cerrar esto por aquí. Entonces vamos a acercarnos un poco más así. Voy a cerrarlo. Controlaría 0, y eso es básicamente todo. Ahora que tenemos nuestra página, en lugar de copiar esta en adelante, sólo vamos a copiar esta y simplemente añadirla en deuda para su uso posterior. Entonces eso es todo para este video. Te voy a ver en la siguiente cuando empecemos con la playa de los pulmones. Entonces te veré ahí. 31. Patres de Wireframes en Adobe Xd 4: Sigamos ahora donde lo dejamos en un video anterior. Y vamos a duplicar este. Y esta siguiente página va a ser por los préstamos. Entonces, hagamos doble clic aquí mismo. Pulmones como así. Entonces si te acuerdas de Adobe wireframe, puedes ver que necesito a lo largo de dos. Y ahora tenemos este texto aquí mismo y obtenemos un préstamo en efectivo en 30 minutos. Entonces cambiemos rápidamente las muertes o necesito un préstamo a y simplemente puedes seleccionar el préstamo que realmente necesitas. Entonces conseguimos una ELLA rápida Y también voy a renombrarla aquí. En este segundo uno va a ser llamado por un auto, comprar una casa. Y refinanciar mi profundidad. Al igual que así. Entonces una vez más. Y esto va a ser comprar un auto, comprar una casa. Y luego financiaste por deuda. Al igual que así. Ahora por fin, seguiré adelante y cerraré todos estos así. Y ahora lo que necesito hacer es trabajar realmente en esta imagen. Porque si ven aquí mismo, dibujé con un espacio entre este borde izquierdo y la imagen misma. Pero en realidad estoy decidido, y aquí es donde es, estos wireframes vienen muy bien porque siempre se puede seguir adelante y cambiarlos. En realidad estoy decidido a extender mi imagen hasta aquí y alrededor de estas dos esquinas. Así arriba izquierda e inferior derecha. Entonces antes de hacer algo, déjame seguir adelante y extender mis aeropuertos hacia abajo. Y voy a mover estos tres hacia abajo así. Por lo que no están en mi peso como diseño. En realidad voy a duplicar esta información así. Por lo que golpea el control D y muévalos afuera. Al igual que esto. En realidad habrá un separado y creció. Entonces llamaré a esto necesito solo o sí, llamémoslo necesito solo o simplemente préstamos porque tenemos diferentes tipos de préstamos obviamente. Y este texto aquí mismo, vamos a ocultar rápidamente esto para que pueda mover esto. Este texto se va a llamar conseguir un efectivo solo o obtener una respuesta. Y sumémoslo ahora en deuda. Por lo que en realidad copiaré este texto para hacer mi vida un poco más difícil. Entonces copiaré ese texto y saltaré aquí mismo. Asegúrate de que esto esté centrado. R va a abrir aS like this, asegúrate de que esté centrado, botón está centrado así, y en lugar de 40, lo incrementaré a 80 como este. Y también me he asegurado de tener dos líneas de texto aquí en lugar de cuatro, así. Y ahora se escucha a las chicas. Ver por polvo o envolver el texto alrededor. Y veamos 41234. Por lo que ahora estamos a los 80. Y voy a llamar a esto y obtiene respuesta en 20 minutos. Y en realidad voy a saltar sitio y cambiar este texto. Por lo que basaré el texto del que originalmente creé mezcla. Está en el centro. Entonces básicamente, nuestros operadores están trabajando las 24 horas del día para entregar respuestas Antonio minutos o menos. Haga clic en aplicarlo ahora para ver Olvidar, llevarse bien hoy y esto se va a escribir aplicar ahora, pero no por ahora. Solo vamos a mantener las cosas bonitas y sencillas. Entonces esto va a ser un conseguir una respuesta así. Voy a sacar esto de la cintura un poco porque ahora me voy a mover y trabajar en mi imagen. Por lo que una vez más, esta va a ser la sección Info y la desinfección va a cambiar dependiendo de cuál de estos préstamos el usuario realmente haga clic. Entonces para la imagen, empecemos con 930, con 950. Como dije, lo voy a mover al borde izquierdo, y esto va a ser 02020. Entonces esto va a estar a su alrededor y esto se va a redondear. Ahora para este, en realidad voy a saltar aquí mismo y usar 24 perno. A ver, posiciónelo a los 40. Y en realidad voy a dejar aquí dos líneas de texto, así. Y voy a dar clic aquí para cortarlo a esa línea. Entonces dos, voy a eliminar este texto y en realidad voy a pegar en algunos iconos que originalmente usé en el diseño original. Entonces déjame seguir adelante y seleccionar esos iconos aquí. Y estos iconos son básicamente lo mismo que todos estos otros iconos. Entonces les voy a mostrar cómo hice eso primero lo primero, efectivo en 30 minutos. Porque una vez más, el usuario ha seleccionado GET un efectivo rápido. Por lo que obviamente necesitan obtenerlo rápido. Consíguelo minutos internos, posiciona esto justo aquí y asegúrate de que esté a los 40 y solo déjame ver, y están fuera de la carpeta. Por eso no se puede alinear indebidamente. Entonces intentémoslo una vez más. Yo hago esto y 234. Y volveré a saltar aquí mismo, click derecho mayo Klocal, me Klocal y hacer local salto atrás. Por lo que voy a alinear estas tres células lacustres son cronómetro. A continuación estoy alineado y éste. Mueve este fuera del camino. Así que alinea esto aquí, asegúrate de que esté a los 40 también. Y luego saltaré dentro, duplicaré estos dos, terminaré posicionándolos fuera de aquí. Y asegúrate de que sean 40 así. Y esta va a ser documentación mínima como esa. Y finalmente, posicionó esto a los 40 también, asegúrate de que un duplicado estos lo posicionaron hacia abajo y simplemente empujar hacia abajo. Esto se va a escribir completamente en línea. Y más adelante en etapas de diseño, vamos a utilizar algunos iconos adicionales aquí. Cuando los usuarios hacen clic entre estos, porque cuando hacen clic en biochar, va a aparecer como un icono de Coche y así sucesivamente y así sucesivamente. Pero como dijo, Justo por ahora, dejémoslos como están. Entonces agruparemos estos completamente en línea. Esta va a ser documentación mínima. Y por último, disco en efectivo B en 20 minutos. Por último, seleccionaré los tres y me aseguraré de que estén en el centro de nuestra imagen así. Y eso es básicamente todo para nuestros céspedes. Una cosa más que puedo hacer es realmente traer esta respuesta getter dentro de nuestra info. Entonces abriré pulmones, abriré info, abriré obtener una respuesta y la dejaré caer en posición. Todo esto en la parte superior porque esta respuesta getter en realidad va a estar en todas nuestras secciones. Por lo que siempre que un usuario haga clic en alguna de estas profundidades va a, lo siento, cualquiera de estos préstamos va a mostrar esto, pero solo un poco de información diferente para cada uno de ellos. También te voy a mostrar eso dentro de nuestra parte de diseño. Entonces estamos en 150. ¿ Qué lo va a cerrar? Porque obviamente digamos que usuario quiere comprar una casa. No pueden obtener una respuesta de vuelta en 20 minutos porque obviamente documentación es mucho más grande que conseguir un tiempo de efectivo rápido, o sobre todo si quieren refinanciar su deuda. Bankteller obvio necesita buscar toda esa información con el fin de proporcionarles la respuesta que querían. Por eso necesitan esperar un poco más y necesitan aportar documentación adicional. Entonces vamos a terminar ahora esta página. Seleccione aireación, posiciónelo aquí, asegura de que estemos en para 150, como este doble clic aquí mismo. Y sólo vamos a cerrar nuestra página. Al fondo, así. Tenía el control 0 y eso es básicamente todo para esta página es que puedes ver es mucho más fácil ahora trabajar con todos estos elementos, sobre todo porque tenemos todos estos elementos en la parte superior ya terminados. Tenemos todos estos elementos en la parte inferior ya terminados. Entonces básicamente solo estamos editando porción disidente de nuestras páginas. Entonces eso es básicamente todo para esa. En la siguiente vamos a diseñar la sección de tarjetas. Entonces te veré ahí. 32. Los tramas de Wireframes en Adobe Xd 5: Bueno, ahora es más viento y diseña nuestra pantalla actual y una página de carrito. Entonces voy a golpear el control D para lubricar este y llamarlo tarjetas así. Y una vez más, vamos rápidamente a clase en nuestro wireframe. Se puede ver que esta sección es básicamente un círculo interno de tarjeta con el título y tres líneas de texto. Debajo de eso tenemos tarjetas de crédito. Entonces con dos tarjetas, se está repitiendo o las tarjetas de débito crean las tuyas es básicamente en esta sección copiada aquí mismo. Y por último, tenemos una sección que es bastante similar, por lo que en realidad podemos usar la de la propia página de inicio. Entonces lo primero que voy a hacer es extender mi tabla hacia abajo porque va a ser mucho más grande, va a ocupar mucho más espacio que todos estos otros. También moveré estos tramos hacia abajo. Así que selecciona toda su retención Shift, muévalos hacia abajo. Y lo que me gustaría hacer ahora es realmente usar esta sección tal vez. Por lo que puedo moverlo afuera así y obtener una respuesta. Puedo moverlo todo el camino hasta aquí. Y vamos a ver. Puedo posicionarlo aquí tan alineado con este texto, esconderé los pulmones. Y no necesitamos un botón aquí mismo, pero lo vamos a necesitar más tarde. Entonces lo esconderé y quizá hasta lo posicionaré para que no lo confundamos. O veamos, necesitamos el botón muerto todo el camino hacia abajo. Entonces tal vez eso es, y eso es lo que haremos en realidad. Por lo que posicionándolo todo el camino hacia abajo y déjalo ahí por ahora. Ahora aquí escribiré en tu Perfecto idealmente Campaniano. Y en realidad salta dentro, copia y pega el texto de mi diseño original. Para que puedas ver cómo se ve eso. Y saltaré adelante, Desagrupa este texto y justo por ahora, mueve esto todo el camino hacia abajo. Y para la sección larga, en realidad seguiré adelante y eliminaré la edición. Entonces si te llevo de vuelta a aquí, puedes ver que tenemos un círculo y tenemos una corriente dentro de ese círculo. No vamos a diseñar una tarjeta por ahora. Tan espinoso posiciona esto así. Y veamos, tal vez incluso pueda darle un poco más de espaciado. Dejémoslo tal como está. Entonces primero lo primero voy a crear un círculo. Estoy sosteniendo mi tecla de turno como lo estoy haciendo, y simplemente estoy usando esta herramienta de elipse para crear mi círculo. Seis sesenta, seis sesenta van a ser dimensiones. Y lo posicionaré en el centro y me aseguraré de que esté a 100 de nuestros textos así. A continuación, lo llamaré círculo o un círculo GRANDE. Porque va a estar en el fondo de nuestra tarjeta. Para ese círculo, vamos a aplicar en esta escena el análisis de color para eliminar el borde. Y ahora cuando cree mi tarjeta, realidad usaré en este color. Para indicar que esta es nuestra corriente. Entonces empecemos con nuestras tarjetas reduce nuestra posición actual y justo dentro de nuestro círculo. Y veamos por la propia tarjeta, podemos usar algo así como 776, semana cinco, o nueve, o 510 como quieras. Y esperaré posición para estar en el centro de nuestro círculo así y así, también puedo seleccionar a ambos, haga clic aquí que aquí, asegúrate de que estén en un círculo perfecto. Ahora por la propia tarjeta, como dijo, vamos a dejarla como y deuda. Y dejémoslo despejado a los 15, por ejemplo, por todos lados, sólo para indicar que este es nuestro carrito. Ahora sigamos adelante y seleccionemos todo esto. Tenía control g llamó a este compañero perfecto y de alivio porque es lo que es justo aquí. Siguiente arriba para la tarjeta. Si te retomo una vez más, podemos ver que tenemos en toda esta sección entonces un texto actual y título tres líneas de texto y aplicadas ahora, por lo que realmente podemos usar esto que ya creamos para él antes aquí. Entonces puedo golpear el control C y luego puedo saltar aquí mismo. Tenía control de posicionamiento V a la derecha por aquí y mover esto hacia abajo. Ahora, lo que realmente necesito es este texto y así título y subtítulo. Así que golpea el control C, el control V. Y veamos, tal vez pueda posicionarlo para estar en 100 esta vez en lugar de 150. Al igual que ahora. Y vamos a llamar así a esto tarjetas de crédito. Y en realidad una vez más voy a copiar y pegar mi texto original y lo moveré justo aquí. Ahora, lo siguiente que voy a hacer es realmente mover esto para estar a los 80. Por lo que 12345678. Y ahora sigamos adelante y creemos nuestra tarjeta de contenido. Entonces para nuestra tarjeta de contenido, lo que realmente vamos a hacer, va a ser bastante similar a ésta en realidad. Entonces, sí, vamos a usar en realidad este. Porque si te llevo de vuelta en lugar del ícono, ¿dónde hay? Aquí están. En lugar del ícono, vamos a tener esta tarjeta, ilustración o un gráfico o palanca. Entonces voy a quitar este basado en éste. Y una vez más, asegúrate de que estamos a los 80. Por lo que 1234. Colóquelo aquí. Y vamos a ver, porque tenemos nuestra línea de cuadrícula de 12, en realidad podemos extender este fondo para estar a las seis de peso. Entonces así, entonces ahora tenemos mucho más espacio con el que jugar. Entonces este primero, lo voy a llamar Visa. Tarjetas de crédito como esta. Y veamos, tal vez pueda extender esto. Entonces para disparar, puedo tener dos líneas de texto. Puedo cosecharlo así. En lugar de herramienta, podemos tener tres líneas de texto que voy a pegar en mis textos originales. Y vamos a ver. Podemos estar a 60 de aquí. Entonces, vamos a bajar esto sólo un poquito. Entonces, sólo para que podamos tener un poco más de espacio para jugar con él. Podemos posicionar esto para estar a los 40, así que así. Y ahora saltemos por dentro y creemos nuestro carrito. Entonces, en realidad no vamos a diseñar todo el gráfico. Ahora. En realidad voy a usar este fondo de autos. Controlarías un D. Y voy a llamar a este curado actual BG así. Y por sus dimensiones, usemos 300 ancho uno 97 por ejemplo. Entonces algo bonito y pequeño. Y vamos a usar este color más oscuro. Y veamos, quizá podamos dejarlo ahí. No estoy seguro de que lo vería. Por lo que 1234. Y alineemos la edición aquí. Entonces vamos a ver. Para este contenido, tal vez pueda dejarlo así. Sólo estoy tratando de averiguar todo, cómo va a quedar todo en realidad. Por lo que esto puede ser con 40, esto puede estar en 60. A ver, esto puede ser a los 40. Y por último, esto también puede ser a los 40. Creo que eso funciona bien por ahora. Simplemente voy a aumentar en realidad la altura de este fondo camina para que pueda tener un poco más de espacio de cinco 46 a realmente 567, así. Sólo para que me dé un poco más de espacio. Lo alinearé con el borde superior de mi tarjeta, hit shift 1234. Y ahora veamos qué nos da eso. Entonces estamos a los 40, estamos a los 40 justo aquí, estamos a los 40, estamos a los 60 y estamos a los 20 justo aquí. Y así vamos a ver, tal vez podamos realmente mover esto. Veamos qué puedo hacer porque necesito un poco más de espacio y abajo, realidad puedo empujar el disco hacia abajo solo un poquito. Entonces veamos 234. Así que así. Y ahí lo tenemos. Contamos con nuestra tarjeta de contenido. Vamos a jugar con él, obviamente un poco para después. Entonces vamos a llamar a esto actual moral lo ve, sí, información actual. Creo que funciona bien. Y vamos a ver. Ahora qué podemos hacer. Podemos mover esto para ser un DT, así 12345678 abajo así. Y puedo sostener el control y D para duplicarlo, posicionarlo aquí. Y esto va a ser tarjetas de crédito MasterCard como esta. Y en realidad voy a copiar y pegar mi información aquí así como así. Entonces en lugar de tarjetas de crédito personales Visa, tenemos tarjetas de crédito MasterCard personales. Voy a bajar esta información. Voy a agrupar todo esto, llamarlo tarjetas de crédito, así. Y por último, voy a tener exactamente la misma sección, pero llamada tarjetas de débito. Por lo que golpea el control D en toda esta sección, colócala hacia abajo. Voy a llamar a esto tarjetas de débito obviamente. De esta manera, voy a llamar a esto tarjetas de débito, así. Y en realidad voy a copiar y pegar el texto desde aquí así. Por lo que resulta tarjetas de débito en lugar de tarjetas de crédito Rostow, guardián para la información de la tarjeta. Entonces eso va a ser lo mismo. En lugar de tarjetas grises, en realidad vamos a darle un nombre de tarjetas de débito. Voy a seleccionar este texto, copiarlo, y seleccionar la palabra crédito, reemplazarlo por un débito. Y finalmente, voy a tomar mi texto de aquí y hacer lo mismo por esto y lo pegué. Básicamente, es exactamente el mismo texto que envió el cliente. Y acabo de reemplazar tarjetas de crédito, tarjetas débito, y eso es básicamente todo lo que hice ahí. Ahora que esa sección está terminada, básicamente, tenemos grandes guardias, tenemos tarjetas de débito. Vamos a reposicionarlo rápidamente. Entonces vamos a tener que estar a 100 como es. Y en realidad voy a duplicar esta sección. Por lo que golpea Control C o un Dee controlado prisa, quieren duplicarlo, posicionarlo abajo de los anélidos. El puesto de la ICANN es estar al 100 una vez más, así. Por lo que lo llamaré crear el tuyo propio. Porque esta sección, si te llevo de vuelta a aquí, puedes ver crear la tuya propia. Tenemos tarjeta y tenemos crear tus diapositivas vas a describir cómo puedes crear tu propia tarjeta y luego botón que dice crear la tuya. Y por eso pegamos este botón aquí mismo. Entonces lo vamos a traer dentro de esta sección. Y veamos, quizá pueda posicionarlo para ser a uno cientos, así, 100. Y eso es básicamente todo. Ahora para esta sección, simplemente copiaré y pegaré el texto en. Entonces vamos a ver, podemos darle 100 con todas estas formas como esta. Y como puedes ver aquí mismo, puedes crear una tarjeta personalizada y agregarle tu toque personal, elegir entre colores, formas e incluso imágenes. Por lo que estos son básicamente todos los elementos a los que los usuarios pueden crear y adaptarse. Crear los suyos propios. Y va a cambiar el nombre para crear el tuyo propio así. Y lo voy a mover justo debajo de mis tarjetas de débito. Por lo que somos tarjetas grises, tarjetas de débito y crear las suyas propias y en la parte superior perfecta comparación diaria. Por último, necesitamos esta sección aquí mismo con la imagen. Cuando está aquí es tierra izquierda imagen y va a ser tarjetas de regalo. Entonces encontremos esa sección aquí está, Control-C, Control-V aquí mismo. Ahora veamos esa sección. Podemos, por ejemplo, posicionarnos a 150. Entonces veamos así y simplemente posicionarlo a la izquierda. Ahora, vamos a darle un nombre de tarjetas de regalo. Y lo vamos a mantener así en este momento. Entonces nombre del servicio, lo vamos a llamar tarjetas de regalo porque sabemos lo que es justo por encima de las preguntas comunes. Y por último, todas estas secciones, vamos a seleccionarlas y moverlas estar a 150, así. Por último, voy a redondear nuestro puerto aquí y cerrarlo aquí y ver si eso es correcto. Es decir, tú Controlarías S o Command S en el Mac para Guardar. Y eso es básicamente todo. Para esta página, se puede ver lo sencillo que es y cómo algunos de estos elementos se están repitiendo. propósito no estoy usando estos elementos personalizados y estos componentes y así sucesivamente aquí dentro de nuestros wireframes, porque esta etapa de wireframe sigue siendo sobre ideas cuando el cliente confirma tus ideas. Y luego te voy a mostrar cómo puedes compartir estos wireframes con tu cliente. Pero lo primero es lo primero, pasemos rápidamente por todas estas páginas. Voy a mostrar cómo podemos diseñarlos todos. Y luego voy a mostrar cómo puedes compartirlos con tus clientes para obtener retroalimentación. También puedes exportarlos como imágenes, enviarlo así. Pero ¿por qué harías eso cuando tienes esta gran opción de compartirlos como enlace. Por lo que el cliente realmente puede dejar su retroalimentación adecuada de abajo en adelante. Se puede aplicar esa retroalimentación al diseño. Y luego puedes empezar por crear estos componentes. Todo esto son solo ideas. Entonces esto fue sólo para mostrarte cómo se pueden transferir todas esas ideas y dos pedazos de papel. Entonces a partir de aquí, estás creando algo un poco más realista. Ya estás usando algunos de estos elementos los cuales son básicamente predeterminados y, y están entrando básicamente así. Por lo que simplemente podemos seguir adelante con el diseño, sobre todo aquí con la sección de navegación y héroe y así sucesivamente. Entonces básicamente eso es, eso es todo. Ahora puedes compartir estos wireframes. Cuando tengas algunos comentarios de tu cliente, puedes volver a ellos y luego puedes empezar a trabajar en un diseño terminado. Entonces eso es todo para este video, y te veré en el siguiente. 33. Los tramas de Wireframes en Adobe Xd 6: Sigamos ahora con la página de invertir. Y si acercamos un poco más, se puede ver que invertir es básicamente muy similar a todas estas otras páginas. Simplemente tiene este patrón aquí. Por lo que hemos imaginado texto de título y botón de llamada a la acción aquí. Y tenemos dos de ellos, lo que básicamente significa que son seis en ingenio. Entonces en lugar de copiar este, vamos a saltar dentro de n, Por ejemplo, copiado este. Por lo que voy a golpear el control D está dispuesto a la posición dos aquí mismo. Y llamaremos a esto invertir. Al igual que esto. Todos saltaré también por dentro, extenderé esto hacia abajo, moveré todo este infinito hacia abajo solo para que tengamos un poco más de espacio con el que jugar. Entonces en lugar de abrir tu cuenta, llamaré en la que quiero invertir. Y ahora en realidad debería seguir adelante y copiar alguna otra página, pero sí importa. En realidad usaré esta información que ya tengo. Entonces simplemente moveré esto hacia abajo, golpea el control D, porque necesito un texto aquí mismo. Y posicionaré ese texto. Veamos quizá 100 de la página en adelante. Entonces veamos 12345678910 así. Y entonces posicionaré esto como otros adicionales. Entonces 100 ancho que vamos a ver. Sí, creo que eso funciona bien. Y vamos a seguir adelante y renombrar todos estos. Entonces la educación es nuestra primera. Y vamos a renombrarlo aquí también. Y entonces la segunda es la inmobiliaria. Por lo que una vez más, los usuarios pueden elegir en qué quieren invertir. Y dependiendo de lo que la camarilla, esta información va a cambiar obviamente para corresponderse con su elección. Seguridad familiar. Viene a continuación. Accidentalmente hice clic hacia abajo y éste está bien. Por lo que seguridad familiar. Y el último aquí es un retiro. Esto y eso es básicamente todo. Entonces si han seleccionado esta primera, Va a estar escribiendo en un futuro más brillante como este. Y en realidad lo vamos a mover hacia abajo a la carpeta de información en la parte superior. Entonces lo que vamos a hacer es realmente crear estas dos secciones. Entonces en realidad voy a mover esto hasta aquí. Y en realidad voy a ver así 246, ya estamos en el ancho correcto sólo por la altura de nuestras imágenes. Entonces posicionémoslos para estar en 500. Y este texto es demasiado grande. No necesita estar en tan grande. Entonces vamos a ver, podemos jugar con 24. Entonces ve aquí mismo, 24 audaz. Se trata de 24, irregular. Y vamos a extenderla para encajar hasta aquí. Y veamos, podemos tener tres líneas de texto como este y recortarlo a la altura. Y por último, podemos posicionar el botón para que no sean 40 sino 60. Primero traigamos sí parece estar a los 40 y esto puede ser a los 60, así. Por último, el texto en sí puede estar en, digamos 60. Y sólo para que podamos nosotros mismos un poco más de espacio. Entonces veamos algo como esto. Y creo que eso funciona bien. Ahora, saltaré por dentro y en realidad copiaré y pegaré mi texto original. He incluido dentro de nuestro, de mi diseño. Y esto va a escribir aprender más, así que eso está bien. Siguiente arriba. Entonces voy a agrupar en realidad estos g controlados HD y llamar a este nuevo fondo de educación bancaria porque es lo que es justo aquí. Y una última cosa que quiero hacer es en realidad veamos. Puedo conseguir 20 en todas las esquinas así. Justo así tuve una, sólo un poco de una diferenciación entre todas mis imágenes en nuestro diseño. Por lo que esta se va a llamar Ute para una fuente de futuro más brillante. Y yo voy a hacer lo mismo. Entonces en realidad voy a copiar y pegar texto desde mi diseño original. Y esta es básicamente la información que vas a recibir de tu cliente, sobre todo si tienen todos los servicios. Por lo que realmente puedes jugar con ellos y reposicionarlos como quieras. Ahora, esto se va a llamar, quiero invertir en o incluso mejores inversiones. Porque vamos a tener todas estas inversiones diferentes. Ahora aquí en el medio, si me acerco un poco más, se puede ver que tenemos esta sección con la imagen yendo todo el camino a la izquierda, seguro futuro y aprender más botón. Tenemos esa imagen es ésta de aquí. Por lo que el control C, el control V, el médico se adhieren. Y justo encima de las preguntas comunes, veamos asegurar tu futuro. Y vamos a llamar a esta sección así calificaciones. Y una cosa final es posicionarse y vender su posición para estar en 150. Al igual que esto. Y por último, simplemente seleccionemos estos, posicionarlos para estar en 150 también. Haga doble clic aquí y reorganizando nuestra, nuestra altura de tablero. Simplemente recortarlo así, y eso es básicamente todo. Esa es nuestra playa terminada. Ahora bien, si tu cliente te pregunta por qué algunas de estas imágenes son un poco más oscuras que estas otras. Simplemente diles que esas son las imágenes. Solo querías acercar algo de enfoque a partes específicas de tu diseño. Por ejemplo, tenemos descarte con una tarjeta de crédito dentro. Por lo que querías traer para enfocar hacia abajo en auto de deuda por ejemplo. Y no quieres que se curen demasiado. Simplemente necesitan entender que esas son las imágenes y eso es básicamente todo para que podamos seguir adelante con ese diseño. Por lo que nos acaba de quedar con una página para diseñar para nuestro sitio web antes de pasar a las pantallas de inicio de sesión y registro. Entonces te veré en el próximo. 34. Los tramas de Wireframes en Adobe Xd 7: Por lo que la siguiente página y última para nuestra página web es la digital. Y si acercamos un poco más, se puede ver que básicamente rehab una sección que se está repitiendo todo el camino hacia abajo. Por lo que ya tenemos este apartado. Simplemente lo vamos a utilizar para estos servicios. Simplemente vamos a reemplazar rápidamente algunos de estos títulos. Y eso es básicamente todo. Podemos llamarlo un día. Por lo que podemos usar cualquiera de estos. Puedo usar este control de golpe seleccionado D, duplicarlo. Y voy a llamar a esto digital, así. Y por último, simplemente voy a sacar esto, eliminar esto, y aquí está nuestra sección aquí. Entonces lo que podemos hacer con él es que realmente podemos posicionarlo así. Y quizá pueda moverme a los 100, así. Y déjame comprobar rápidamente. Por lo que puedo hacer este B 600, por ejemplo, sólo para diferenciarlo un poco. Y luego puedo seleccionar estos y moverlos en el centro. Asegúrate de que esté en 100. Lo es. Y el primero es, puedes ver, déjame desplazarme hacia arriba. Contamos con E banca y banca, códigos QR, pago y asistente virtual. Entonces hagámoslo. Pero antes de que lo hagamos, les voy a mostrar pilas una vez más. Entonces van a venir muy bien aquí. Simplemente selecciona tu pila. Eso es básicamente todo. Ya lo has hecho. Ahora, voy a cambiar esto por servicios bancarios así. Y voy a tener 150 espaciados entre todos estos. Por lo que puedes llamar a esto en cuatro o texto o apenas querer. Debido a que las pilas están creando estas carpetas adicionales, simplemente puedes cambiarle el nombre o dejarla tal como está. Entonces voy a renombrarlo aquí. Entonces E, los servicios bancarios golpearon el control D, posicionarlo 150 abajo así. Y lo voy a posicionar aquí. Y voy a llamar a este uno m banca. Entonces uno es E, uno es m. pierdo. Y estás auditando lo que necesitas hacer con tus pilas es simplemente seleccionar tu imagen y posicionarla para decidir. Y por último, mueve esto para alinear nuestra redacción. Al igual. Entonces. Eso es básicamente todo. Simplemente puedes cambiarlos. Entonces posicionemos no, 1-2-3-4-5. Básicamente, lo único que hicimos con este es que cambiamos lugares entre ellos. Y una vez más, esto va a venir un realmente útil una vez que llegues al diseño responsive, porque simplemente puedes hacer clic aquí mismo lo va a posicionar hacia abajo, y eso es básicamente todo para tu diseño. Entonces déjame revisar mis márgenes. De nuevo, todo se ve bien. Entonces E M banca y voy a hacer un duplicado de estos dos. Por lo que golpea el control D y posiciónalos abajo 100. Entonces 150 como este. Y en realidad voy a extender aún más mi aeropuerto. Por lo que estos los posicionan hacia abajo solo para darme un poco más de espacio. Y vamos a ver, podemos posicionar esto para ser 150 y podemos cerrarlo justo aquí muy rápido. Por lo que puedes ver en cuanto comienzas a diseñar, cuanto tengas algunos elementos, cuanto los elementos se estén repitiendo, es mucho más fácil hacer todos estos cambios y adaptar su mental, aplicarlos a su diseño. Entonces esto va a ser pagos de código QR como este. Lo voy a posicionar aquí abajo. Y finalmente, voy a posicionar esto aquí abajo, organizado esto aquí. Entonces, vamos a correr. Por lo que tenemos E banca y banca QR copagos. Y este último va a ser asistente virtual. Cambiemos el nombre aquí también. Y una cosa ordenada sobre las pilas. Si abro éste, se puede ver el texto porque está bajo vivido llega a la cima. Y aquí porque el texto está a la derecha, originalmente viene en la parte inferior. Por lo que Adobe XD ya los organizó de una manera agradable y limpia porque aquí organizamos la edición. Eso es básicamente todo para nuestro Pekín. Simplemente golpea el control S para guardarlo. Y así como así, hemos terminado nuestra web wireframes. Y lo único que nos queda por hacer ahora es diseñar este login e inscribir pantallas. Te voy a mostrar la diferencia entre ellos. Y por último, vamos a diseñar esta página de dashboard antes pasar al diseño real del sitio web, donde realmente vamos a crear un nuevo flujo. Entonces aquí tenemos un flujo de wireframes y luego vamos a tener en el flujo de diseño. Entonces eso es todo para este video. Y los veré en la siguiente donde vamos a abordar pantallas de inicio de sesión y registro. Entonces te veré ahí. 35. Los tramas de Wireframes en Adobe Xd 8 8: En esta lección, vamos a continuar donde lo dejamos y vamos a crear esta pantalla de inicio de sesión y de alta. Entonces, empecemos. Voy a las primeras cosas para nosotros, duplicar este, llámalo inicio de sesión. Y en realidad voy a borrar todo lo que se encuentra dentro. Por lo que sólo puedo tener un vacío nuestro puerto. Y luego lo voy a cortar en altura para intentar AT así. Y ahora puedo empezar con mi diseño. Entonces lo primero es lo primero, voy a crear mi imagen usando mi herramienta de rectángulo. Voy a usar este color, así como lo hicimos anteriormente. Y para nuestra imagen, voy a usar la altura de 1080. Entonces va a ir de arriba a abajo, así. Y para el ancho, usemos 708, por ejemplo. Entonces como puedes ver, nos va a llevar un cinco de las columnas de Andy en el espacio. Entonces ahora usemos este texto y posicionémonos aquí, hagámoslo alineado a la izquierda. Y por ejemplo, digamos Bienvenido de nuevo. Y debido a que esta es una pantalla de inicio de sesión, quieres introducir a alguien de nuevo a esta página. A ver, podemos tener un espaciado de uno, así que tenemos una imagen, tenemos una columna vacía, y luego podemos traerla de vuelta y decir, bienvenido de nuevo. Voy a posicionar esto hacia abajo. Voy a asegurarme de que sean 24. Y simplemente podemos escribir en un log de nuevo en su cuenta así. Y veamos, podemos hacer que esto sea a los 40. Al igual que esto. Bien posicionado aquí solo para darme un poco más de espacio. Y ahora puedo duplicar este, posicionarlo abajo, volver aquí. Y voy a escribir esto para ser correo electrónico y duplicarlo y escribiendo tu correo electrónico. O usemos tu correo electrónico en email.com solo para que podamos ser un poco más precisos y un poco más específicos con este. Ahora vamos a crear nuestro campo de entrada, y va a ser de seis columnas de ancho. Vamos a darle un nombre, campo de entrada. Y así. Y veamos, podemos darle el mismo color que hicimos con nuestra imagen. Podemos posicionarlo y volver detrás de nuestro correo electrónico. Y veamos, para nuestro correo electrónico, podemos hacer que sean 24 muertes regulares. Bien. Yo sólo quiero cambiar su color. No lo dejemos como está. Entonces posicionémoslo en el centro. Pero antes de hacerlo en realidad, vamos a darle a esto una altura. Por lo que el campo de entrada debe estar en 70, así. Y ahora agrupemos a estos dos, posicionarlo en el centro. A ver. Eso se ve bien. Y sólo vamos a ver, primero lo primero, puedo darle a esto un coronario es de diez, quitar nuestra frontera y eso se ve mucho mejor. Y ahora finalmente, puedo posicionarlo para ser 40, así 1234. Y ahora esto nos va a dar un poco más de espacio. Entonces déjame esconder mis columnas para ver cómo se ve eso. Creo que eso funciona muy bien. Sí. Entonces organicemos un poco estos. Por lo que este es nuestro campo de correo electrónico. O no, vamos, vamos a agrupar aireando. Controlado g, calidad, email Control, D, posición en analistas abajo. C, puedo posicionarlo para estar a los 40 y llamar al fondo en contraseña. Cambia esto. Al igual que así. Y ahora puedo saltar dentro de aquí y simplemente escribir turno un diez, por ejemplo, ocho veces o lo que sea. Y entonces puedo cambiar eso para ser 48, por ejemplo. Y ahora puedo volver atrás y agrupar a estos dos y asegurarme de que esto esté en el centro. No sé por qué se está cortando así. Entonces vamos a ver si podemos sacarlo solo un poquito. Puedo solo necesito organizar esto para estar en el centro así. Entonces obviamente esto es solo un ejemplo para mostrarle a tus clientes que esta en realidad va a ser nuestra contraseña de algún tipo. También puedes usar puntos si quieres, pero creo que las estrellas van a funcionar bien. Ahora que lo hemos hecho. Ahora podemos organizar estos dos para que pueda asegurarme de que estén a los 80, solo para darnos un poco más de espacio entre estos dos. Ahora, puedo duplicar esta posición de texto y aquí, y vamos a ver, puedo posicionarla para estar a los 40, así. Colócala y solo un poco hacia abajo. Y yo escribiré, no tengas cuenta. Crea uno aquí. Y porque esto va a ser un eslabón, perderé este color. gente pueda conocer RK, yo puedo cambiar entre login e inscribirme Mississippi clicando ahí mismo. Por último, duplicaré esto una vez más. Por lo que golpeó el control D y la escritura olvidó contraseña. interrogación, usa este collar ahora, asegúrate de que esté alineado a la derecha y necesito un botón. Entonces usaré éste. Golpea Control C, cierra todo esto aquí mismo, controla V, y traeré mi grilla una vez más, asegúrate de que esto esté centrado. Y veamos, podemos posicionarlo para estar a los 80. Eso está bien. Posición por aquí y una línea esta justo aquí. Y asegúrate de que estos dos estén centrados. Y eso es básicamente todo. Ahora tenemos todo nuestro contenido viejo grupo. Simplemente haga clic aquí para asegurarse de que está en la posición central justo debajo de nuestra imagen. Y una vez más, organice todo una vez más. Entonces tenemos aprender más botón va a funcionar hacia abajo. Volveremos correo electrónico, contraseña, contraseña olvidada. Esto va a ir aquí, y eso es básicamente todo para nuestra pantalla de inicio de sesión. Ahora para inscribirme, voy a simplemente duplicar es. Por lo que golpea el control D en nuestra pizarra. Esto va a ser registro, así. Y vamos a, en lugar de dar la bienvenida de nuevo, vamos a escribir bienvenido dos nuevos banco, porque esto es para los usuarios que están visitando esta página por primera vez. Crea una cuenta y empieza hoy mismo. Al igual que así. Ahora vamos a dejar a estos dos. Vamos a escribir aquí, ya soy miembro. Inicia sesión aquí. Una vez más, este es un enlace. Entonces cuando hagan clic ahí, los va a llevar aquí. Cuando hagan clic aquí, les va a llevar atreverse a sugerir cambiar entre estos dos. Y como no hay palabra de moda, están creando una cuenta que no necesitamos en esta. Entonces, finalmente, lo que necesitamos son nombre y apellido. Van a ser el peso de tres. Entonces démonos un poco más de espacio. Entonces voy a posicionar esto aquí. Voy a posicionar a este tipo justo aquí. Voy a duplicar este. Asegúrate de que estamos en 40. Voy a llamar a esto Apellido. Golpear el control D una vez más. Este va a ser nombre_nombre. Al igual que esto. Voy a esconder este y este va a ser nombre. Y va a ser ancho de tres. Entonces veamos 123. Y vamos a darle el nombre de Jacob, por ejemplo. Hace. Y por último, empuje de vuelta a aquí. Nombre, lo mismo. Entonces vamos a darle tres y cuándo darle el nombre de Michael. Por ejemplo, FirstName. Y eso es básicamente todo. Esto lo hemos completado. Llevemos esto de vuelta a 80 años que fue. Y agruparemos todo esto una vez más. Controlaría G, se aseguraría de que esté en el centro así. Entonces tenemos exactamente el mismo espaciado que antes. Si crees que es un poco demasiado allá arriba en la parte superior, puedes reducir el espaciado. Aquí puedes reducir el espaciado en la parte inferior. Pero creo que este diseño funciona muy bien. Sólo asegúrate de que esté centrado, desagruparlo, y eso es básicamente todo. Entonces estas son nuestras dos páginas. Obviamente, se pueden cambiar estas imágenes entre sí. Aquí puedes tener una imagen para el inicio de sesión, una para el inscrito, pero realmente todo depende de ti. En mi diseño, en, en mi caso, voy a dejar como están. Entonces eso es básicamente todo para la web frontal B, justo en el siguiente y último video de esta serie wireframe en Adobe XD, vamos a crear esta pantalla de dashboard. Vamos a crear sólo uno dentro de nuestra sesión de wireframing. Dentro de la sección de diseño, obviamente vamos a crear todas estas páginas adicionales. Y te voy a mostrar cuál es la diferencia entre el diseño, entre las rejillas y demás. Entonces los veré en el siguiente video cuando vamos a empezar con eso. 36. Los tramas de Wireframes en Adobe Xd 9: En este último video de la sección wireframing en Adobe XD, terminémoslo creando nuestra pantalla de dashboard. Si hago zoom un poco, se puede ver que la principal diferencia entre la pantalla del tablero y todas las demás páginas del sitio web es la navegación del panel está aquí a la izquierda, mientras que todo el contenido está a la derecha. Por lo tanto, tenemos que crear todas estas columnas para que nuestro contenido esté a la derecha. Y este margen debe ser más amplio para acomodar en este menú. Para explicar de qué hablo, si saltamos aquí mismo a la pantalla de registro, se puede ver en que nuestros márgenes izquierdo y derecho son básicamente los mismos. Y todas nuestras columnas y canaletas están justo aquí en el centro. Para nuestro tablero de instrumentos. Vamos a desplazar todo eso a la derecha y vamos a liberar este espacio la izquierda para acomodar todos nuestros elementos de navegación. Entonces para empezar, simplemente voy a duplicar esta página y moverla un poco. Al igual que así. Entonces lo voy a llamar Dashboard. Y voy a saltar a mi prototipo. Haga clic aquí para crear un nuevo flujo. Y llamaré a este dashboards de flujo. Así. Volveré a saltar a mi diseño y ahora puedes ver que tenemos wireframes y tenemos dashboard. Ahora podemos llamar a este sitio web wireframes y página web el panel de control. Pero creo que tú y el cliente podrán entenderlo fácilmente. Ahora me voy a dar un poco más de espacio después. Y porque si ves cuando nos alejamos, tenemos todo esto agrupando básicamente. Entonces lo mejor y más fácil de hacer es simplemente mover estos hacia arriba así. Y ahora cuando haces zoom, como puedes ver, tenemos mucho más espacio para que se genere. Voy a golpear el control S para guardar mi archivo. Y luego voy a saltar dentro de mi tablero y empezar a trabajar en mis rejillas. Entonces primero lo primero, voy a quitar todos estos elementos porque vamos a volver a estos elementos un poco más tarde. Pero antes de que lo hagamos, solo quiero crear rápidamente mis columnas y migrar para lucir un poco diferente. Entonces para empezar, lo que quiero hacer es que quiero usar 12 columnas, así que eso va a ser lo mismo. Voy a usar 49. Y vas a ver a Adobe XD cambiar y actuar como loco aquí. Porque en cuanto empieces a jugar con estos, te va a dar diferentes valores. Entonces qué justo aquí en el margen derecho, voy a usar 20. Voy a usar un gran margen a la izquierda. Entonces para 01. Entonces esto va a ser 12 y esto va a ser 49, esto va a ser 80, y la disciplina a ser 2401. Entonces lo que hicimos aquí mismo, como pueden ver, tenemos a la derecha, sólo un espacio de 20. Podemos aumentar eso al espacio de 40. Si crees que es solo un poco demasiado pequeño y demasiado estrecho, mientras que aquí tenemos 401, por lo que 401 píxeles para acomodar nuestra navegación. Entonces si te llevo de vuelta a aquí, puedes ver que tenemos este espacio para nuestro nav y tenemos este otro espacio para el contenido dentro. Entonces saltemos aquí mismo. Y lo primero que voy a hacer aquí mismo es que voy a seguir adelante y crear mi navegación superior. Entonces para hacer eso, simplemente voy a usar mi rectángulo. Voy a ir de ancho completo. Por lo que 19-21. Colóquelo arriba izquierdo. Entonces Pinot y yo tendremos un color. A ver, tal vez pueda tener color blanco, así que lo dejaré ahí por la altura. Vámonos con el 1-20, así. Vamos con una pequeña sombra porque quiero separarla de este fondo. Entonces vamos con 1020 y luego 20 una vez más. Y veamos, quizá podamos ir con algo mucho más pequeño que esto, así que quizá cinco. Entonces es bonito y ligero. Entonces si hago clic aquí para subir mis columnas, se puede ver claramente que es bonito y ligero. No es intrusivo de ninguna manera. Añadamos también un desenfoque de fondo. Así que déjame hacer click rápidamente aquí mismo, desenfoque de fondo. Y para estos valores, veamos, quizá pueda tener algo un poco más pequeño. Entonces 20. Podemos ir con 1550 por la obesidad. Entonces ahora básicamente casi no lo puedes ver. Pero sigue ahí y sigue luciendo bien. Ahora para nuestro color de fondo de nuestro tablero, simplemente voy a volver atrás y dar clic aquí. Por lo que ahora se puede ver en deuda, color, color de fondo del tablero de arte en sí para el tablero es este color en lugar de color blanco. Lo que esto va a hacer, nos va a permitir separar todos estos elementos los cuales van a ser blancos en la página. Y esta principal estrecha justo aquí en la parte superior. Y se va a poner de pie básicamente mucho mejor. Y ahora se puede ver esta sombra de gota funcionando aún bien entonces antes. Entonces lo siguiente que voy a hacer es realmente copiar algunos micros que he usado anteriormente. Y los voy a pegar aquí mismo. Y como se puede ver, todos están vinculados. Entonces voy a seguir adelante y hacer clic derecho para hacer local, hacer local en todos ellos. Y una vez más, el beneficio de esto es en lugar de actualizarlas en mi archivo principal, simplemente puedo seguir adelante y actualizarlas aquí. Adobe XD los va a reconocer, como realmente los actualizo aquí. Entonces eso va a ser mucho más fácil para nosotros trabajar. Ahora, sigamos adelante y ordenémoslos. Entonces los voy a posicionar así. Y si saltamos atrás, puedes ver que tenemos dashboard, transacciones de cuentas, pulmones, tarjetas, inversiones, digital, y logout. Entonces sigamos adelante y los ordenamos así. Primero usemos algo de texto. Entonces usemos un texto Poppins regular, y eso se ve bien. Y vamos a ver, puedo teclear en dashboard. Asegúrate de que vaya desde la izquierda. Asegúrate de que esté en el centro de nuestro ícono. Y también puedes seleccionarlos a ambos. Simplemente haga clic aquí. Y vamos a seguir adelante y organizarlos un poco. Sólido C, Tal vez pueda posicionarlo para estar a los 30. Por lo que 123. Vámonos con 44 ahora. Vámonos así. Asegúrate de que estén en el centro. Ellos lo son. Y simplemente voy a duplicar esto pocas veces. Entonces esto va a ser de cuenta. Esto va a ser transacciones tarjetas solas. Por lo que solo estoy usando el control en D para duplicarlo en digital. Y por último, vamos a posicionar logout aquí mismo en la parte inferior. Por lo que lo siguiente es posicionar estos iconos junto a nuestros artículos. Solver izquierda alinearlos así. Entonces posicionaré disco para estar aquí mismo. Y una vez más, te daré todos estos íconos, pero si quieres paquetes más grandes para usarlos en proyectos profesionales con tus clientes y no el solo por aprender ya que estos son proporcionados para ti, entonces vas a poder comprarlos si así lo eliges. Y todos estos paquetes de iconos, les voy a mostrar que en un video futuro sólo para ver lo masivos que son. Entonces decidir compacto, por ejemplo, es iconos grandes. En su interior se incluyen 2400 iconos diferentes. Vienen en varios formatos de archivo para que los puedas conseguir en formatos de archivo Adobe Illustrator, formato catch file, Photoshop, PNG y así sucesivamente y así sucesivamente. Creo que también tienen EPS. Entonces está que tenemos digital. Seleccionemos a estos dos. A ver, selecciona estos dos. Todo se ve bien. Y finalmente tenemos este logout posicionado aquí mismo. Ahora lo que realmente puedo hacer es usar estos. Asegúrate de que estén alineados a la izquierda, así. Y vamos a ver, tal vez pueda posicionarlos con C puede ser de 40. Entonces haz así. Turno 1234, así. Y luego puedo seleccionar todo nuestro texto, asegurarme de que esté alineado a la izquierda. Lo es. Yo lo puedo empuñar aquí. Turno 123 por ejemplo. Creo que eso va a funcionar bien. Y ahora vamos a seguir adelante y organizarlos porque se puede ver que estos artículos están grisáceos. Entonces tenemos este collar y lo tenemos aquí mismo. Entonces lo que realmente voy a hacer es seleccionar todo mi texto. Haga clic aquí para que sea de este color. Y este primero, voy a usar este color porque ese es el color de mi aeropuerto, lo que indica que éste está seleccionado. Ahora lo siguiente que voy a crear es el selector. Por lo que siempre que un usuario haga clic en algunos de estos ítems, selector va a mostrar detrás del elemento seleccionado de viciosamente. Entonces para hacer eso, simplemente voy a usar mi herramienta de rectángulo. Yo lo voy a posicionar aquí. Voy a asegurarme de que sea blanco. Lo es. Y para el tamaño, veamos, 302, ancho, 80, así. Voy a llamarlo selector. Al igual que así. Voy a posicionarlo todo el camino atrás. Este es nuestro top ahora, así. Y lo vamos a tratar en sólo un poquito. En realidad sabemos lo que podemos seguir adelante y terminar este antes de pasar a esto. Entonces lo que necesitamos aquí mismo es el logotipo. Si te llevo de vuelta a aquí, no tenemos logo, hemos nombrado aquí mismo una imagen de avatar. Entonces tomemos un logo de algún lugar. Podemos tomarlo desde aquí, en realidad controlar C. También tenemos una copia en nuestros activos. Aquí está. Por lo que en realidad podemos arrastrarlo y soltarlo desde aquí si queremos. Puedo asegurarme de que esté en el centro con éste. Y veamos, puedo posicionarlo para estar a los 40 así. Por lo que está muy bien alineado con todos nuestros activos de navegación a continuación. Lo que voy a hacer a continuación es usar el texto del lado derecho. Entonces en realidad voy a copiar una de estas posiciones aquí. Y vamos a ver, porque aquí le dimos nombre. ¿ Dónde estaba? Michael Jacobs. Entonces usemos el mismo nombre para la consistencia. Así. Me aseguraré de que sea un derecho alineado aquí. Ahora, sigamos adelante y creemos nuestra elipse. Para la elipse, usemos 60 por 60, así. Seguiré adelante y me aseguraré de que sea este color para indicar que la imagen necesita ir allí. Me aseguraré de que esté en el centro así, y lo posicionaré todo el camino hasta aquí. Posicionaré mi texto a los 40. Entonces así, y eso es básicamente todo. Tenemos nuestro top ahora terminado. Ahora lo que podemos hacer en realidad es agrupar esto. Para poder seleccionar mi logo, texto, nuestro alquitrán y fondo, golpear Control G. Lo llamaré, veamos arriba ahora creo que va a funcionar bien. Así. Y organizaré las cosas por dentro. Entonces este es nuestro DAR, lo posicionaré aquí, y eso es básicamente todo. Ahora organicemos estos también. Entonces este es nuestro panel de control. Vamos a seleccionarlo. Te controla. Porque más adelante, dentro de nuestro diseño, realmente vamos a usar estos para animarlos. Van a cambiar de color a medida que haces clic en ellos. Entonces en realidad te voy a mostrar eso desde mi diseño original porque pretendía mostrarte diseño original un poco más tarde, pero te voy a mostrar eso ahora solo para que lo puedas entender. Entonces este es el diseño final. Y al hacer clic entre ellos, se puede ver en que estos están cambiando de color. Y los usuarios en realidad pueden hacer clic en ellos. Y se puede ver que los iconos se cambian de color, así como los textos y todo este contenido aquí mismo a la derecha. Entonces sigamos ahora y organizémoslos. Simplemente selecciónelos, llame a esta cuenta. Para ir a continuación las transacciones del panel de control. Entonces para crear esas animaciones, hay que agruparlas para ser más fáciles de entender para XD y para que realmente organices estas animaciones y esas transiciones de tránsito. Se trata de inversiones de cordones. Al igual que así. Tenemos digital va a bajar. Y finalmente tenemos logout. Un selector va a ir justo por debajo de todos estos porque va a ir por debajo y por detrás de ellos. Entonces para el selector en sí, vamos rápidamente a darle la vuelta solo un poquito porque no cavo esta esquina porque es demasiado plana para mí. Entonces voy a ir justo aquí y dar este 2020. Entonces arriba, abajo izquierda, y arriba derecha. Entonces si puedo acercar un poco, se puede ver cómo se ve eso mientras estos dos son completamente planos. Entonces lo que vamos a hacer es realmente darle a esto el espaciado de 40, así 1234 y posicionar nuestro tablero dentro en el centro así. Entonces de aquí al siguiente punto, lo vamos a posicionar en 40. Por lo que 1234. Y de nuestro siguiente artículo para abajo, vamos a dar el espaciado de 60. De esta manera porque cuando haces la transición de esto, quieres tener suficiente espacio entre todos tus artículos. Como puedes ver, por eso estamos dando un poco más de espacio. También puedes darle el espacio de 80 si quieres. Pero creo que 60 va a funcionar muy bien entre todos estos diferentes artículos. Entonces démosle un espaciado de 60. Adobe XD recogió muy bien. De lo que realmente quiero hacer con él. Eso funciona bien. Veamos 60. Y finalmente para el cierre de sesión en sí, podemos posicionarlo para estar en 40. Entonces turno 1-2-3 por ahora, lo que voy a hacer es en realidad seleccionar todos estos deberían controlar G y llamarlos barra lateral. Al igual que así. Porque quiero posicionarlos para estar dentro de mi barra lateral. Así es como se llama a este bit. Y este bit en realidad va a ser nuestra área de contenido. Por lo que para nuestro área de contenido, queremos algún texto aquí mismo en la parte superior. Y luego queremos crear todos estos otros elementos. Entonces para hacer eso, en realidad voy a copiar este texto y distritos control C, control V. Así que voy a asegurarme de que se queden alineados así. Se posicionan en la misma altura que este conducto. Por lo que 40 de nuestro nav, vamos a escribir aquí, bienvenido de nuevo, Michael. Y aquí eso por condiciones como esta, y va a contener la fecha misma. Entonces cambiemos el color. Y para este texto aquí mismo, tal vez pueda ir con 36. Creo que esto es demasiado grande. Por lo que 36 audaz. Lo voy a agregar aquí mismo a mis estilos de personaje. Músicos que están justo aquí. Entonces justo debajo de un in-intermediario estos, porque creo que 36 va a funcionar un poco mejor. Y luego 48. Y me va a dar sólo un poco más de espacio para jugar. Nuestra posición es estar en 20 a la izquierda alineada a este borde. Y ahora sigamos adelante y empecemos por crear estas cajas para nuestro contenido. Entonces, empecemos con una herramienta de rectángulo. Esto va a tomar cuatro columnas de ancho y dimensiones van a ser 467 semanas, 231, así. Y veamos, puedo darle un radio de esquina diez. Y por el espaciado, puedo ir con 40. Así. También puedo agregar una sombra, pequeña sombra, así 55 y 20. Y veamos, esto es demasiado brillante. Vámonos con seis. Sí, creo que eso funciona un poco mejor. Yo lo voy a duplicar. Entonces Control D, herramienta de posición más aquí. Y si te llevo de vuelta a nuestro boceto original, puedes ver que tenemos tres justo aquí y tenemos que escribir aquí. Entonces lo que voy a hacer es duplicar éste por ejemplo. Y veamos, puedo posicionarlo para estar a los 40. Lo es. Y simplemente extendió todo el camino hacia abajo porque esto es a los 40 va a redondear muy bien aquí. Voy a extender esto para estar a las siete. Por lo que 4567 columnas de ancho. Y lo vamos a duplicar y simplemente cancela y este como éste. Entonces va a ser a cinco columnas de ancho. Entonces si lo incluí aquí y lo previsualizo, y solo para que ustedes puedan verlo un poco mejor, pueden ver cómo se ve eso. Una vez más, si crees que esto es demasiado estrecho, puedes aumentarlo a 40. Creo que realmente no importa y se ve bien como lo es ahora mismo. Entonces solo lo voy a dejar ahí por ahora. Entonces lo que vamos a hacer a continuación es incluir algún texto. Y voy a escribir en algo como contar. En realidad voy a ir con 18. Y funciona bien. A ver si puedo hacerlo. 123412, por ejemplo. Y puedes posicionarlo un poco hacia abajo. Demos este 48. Vamos a darle algunos números. Entonces vamos, por ejemplo, 34 al 5.186 porque quieres estar exactamente a estos números porque esa es tu cuenta. Después de todo, turno 12. Yo lo voy a dar descubrir por ejemplo. Y vamos a ver. Cuenta bancaria nueva. Porque esta es la cuenta principal que está usando el usuario. Colóquelo en el centro así. Entonces obviamente puedes agregar un icono aquí si quieres. Pero creo que va a funcionar bien, como es. Entonces esta es nuestra cuenta Vg. Y voy a seleccionar todos estos. Controlará G y llamará así a esta cuenta principal. Entonces lo que vamos a hacer a continuación es pasar a algunas de estas. Entonces esto, por ejemplo, puede ser sobre tus tarjetas. Entonces vamos a la calidad que realmente lo haga, por ejemplo. Y bueno, veamos, tal vez pueda copiar y pegar. También lo hace el texto de esta manera. Y puedo guardar algo como tu corriente. Y vamos a ver, tal vez pueda posicionarme para estar a los 40 una vez más, así que turno 1234 y c, y esto puede ser corriente VSA. Cambiemos su color a este texto. Sí, creo que eso funciona mejor, pero no creo que este tamaño funcione. Entonces cambiémoslo a 16 y sumémoslo de inmediato. Se va a la cima, lo cual está bien. Entonces, ¿este es 18 fallecido? 16. Creo que eso funciona bien. A ver. Puedo posicionarlo para estar en 20 dólares. Y esto puede ser también a los 20, válido hasta C, nueve de 21. Por lo que nueve meses de 202120 en todas partes. Y eso está bien. Y veamos, tal vez podamos crear una paginación justo aquí en la parte inferior, solo para que los usuarios puedan cambiar entre todas estas tarjetas. Porque por ejemplo, podrías tener una tarjeta de débito de la que tienes tarjeta de crédito y así sucesivamente, sal siempre que estén haciendo clic en esta paginación, esta información va a cambiar. Entonces por ejemplo, armar auto en una tarjeta de débito o lo que sea. Y la tarjeta en sí va a cambiar aquí mismo. Entonces pasemos a esos círculos. Entonces simplemente voy a crear un círculo que va a ser de 15 por 15. Eso está bien. Usa este color así. Y vamos a ver, tal vez pueda posicionarlo para estar en su garantía. Entonces 12 así, controla D Y veamos, quizá también le pueda dar el espaciado o 15 porque es 15 por 15, así. Y estos dos se pueden descolorear porque éste es y el que se selecciona, o en realidad podemos seleccionar DS1 y luego darle decolorido, digamos solo para indicar que está seleccionado. Ahora voy a agrupar este texto. Voy a usar mi herramienta de rectángulo así de aquí a aquí. Úsalo y texto, asegúrate de que el texto esté centrado. Después borró este rectángulo, volviendo a mi panel de capas y llámalo texto. Porque una vez más, una vez que empieces a cambiar estos, este texto en realidad va a actualizarse y cambiar. Llamemos a estos. Entonces estos van a ser nuestros círculos. Y simplemente voy a copiar y pegar ese texto. Esta va a ser nuestra paginación. Entonces más con justo debajo del texto. Y lo que para ti te queda es la tarjeta. Voy a duplicar este fondo. Y veamos por las dimensiones de la tarjeta, puedo usar algo así como de dos a ocho con 149. Algo bonito y pequeño. Voy a usar este color sólo para indicar que esta es nuestra mezcla de cartas. Está en el centro y vamos a ver, puedo posicionarlo para estar a los 40 de aquí. Entonces 1234, así. Y creo que eso funciona bien como nuestro diseño. Entonces como dije, solo puedes imaginar que va a renombrar esto a Carter PG, así. Y agruparemos de estos. Entonces llamémoslo tu corriente, así. Por lo que una vez más, solo puedes imaginar que cuando los usuarios empiecen a hacer clic entre estos y cambiar esta paginación, esta información se va a actualizar. Entonces por ejemplo, de VSA a MasterCard, lo que sea un válido hasta diferentes fechas y luego descartar gráfico también se va a actualizar. Entonces, una vez más, si piensa que esto es solo para, por qué puedes espaciarlos un poco más para darte un poco más de espacio aquí o aquí, así, por ejemplo, entonces puedes acomodar texto MasterCard y así sucesivamente. Pero creo que eso funciona bien. Por último, lo que vamos a hacer aquí mismo por esta alta guardia, también voy a usar mi paginación. Voy a usar mi control de texto C, control V y posicionarlo aquí. Por lo que 1234 y se fue a dirigir una paginación. Y lo que vamos a hacer ahí es que la vamos a llamar pestaña de Ayuda porque va a mostrar a los usuarios algunos consejos. Entonces, ¿cómo tabulador, Vg, así? Y les va a mostrar propinas. Como dije, simplemente voy a seguir adelante y copiar aquí mi texto. Sólo para mostrarte, voy a borrar este. Y por último, vamos a ver. A lo mejor puedo dar esto así y espaciar así. Y yo lo voy a cerrar hasta aquí. A ver, puedo posicionarme para estar a los 20, que ya lo es. Y eso está bien. Posición fina. Y eso es básicamente todo. Todos. Lo único que podemos hacer es en diseño después agregar algunos gráficos. Y voy a demostrar eso una vez más sólo para ver a qué me refiero. Tenemos estos cuidados gráficos y más adelante los vamos a sumar. Y vas a ver en la sección de diseño de este curso lo que en realidad están resolviendo. Los usuarios empiezan a hacer clic entre estos. Como puedes ver, estos gráficos van a cambiar y actualizar dondequiera que hagan clic y les mostrarán estos haplotipos que al hacer clic, pueden llevarlos a diferentes páginas. Entonces, por ahora, dejémoslo tal como está. Voy a seleccionar a la próxima generación, todo y llamarla. A ver, ficha Ayuda, así. Ahora, por fin, organicemos las cosas sólo un poquito. O podemos incluso más y crear estos dos y luego podemos organizarlos. Creo que eso es mucho mejor. Entonces vamos a ver, podemos llamar a estas transacciones. Así que así. Y entonces puedo mover esto a aquí. A ver, le puedo dar el espaciado de 40. Por lo que 1234, sus transacciones. Y veamos, una vez más 40. Así. Esto va a ser Indeed y este va a ser nuevo nombre comercial para que puedas saber qué negocio gastas tu dinero sería. Ahora, esto puede ser un servicio y esto puede ser cantidad en dólares. Soe me vio antes de este 1234. Piensa que eso funciona bien. Va desde la derecha, y vamos a darle algunos números aleatorios. Entonces C menos 15.14, Por ejemplo. Organicemos estos sólo un poquito mejor. Entonces tenemos la fecha primero, después tenemos un nombre comercial, tenemos el servicio y tenemos esto. Entonces llamémoslo datos. Debajo de sus transacciones. En realidad voy a copiar y pegar este texto con una flecha donde está, aquí está. En lugar de aprender más, vamos a renombrarlo para ver más. Aquí mismo. Voy a posicionarlo en el centro así. Voy a posicionar conocido. A ver, tal vez pueda darnos basación de 20, así que turno 12. Acerquemos solo un poquito. Por esto. Lo colocaré todo el camino hacia abajo. Y esta carpeta de datos, simplemente voy a usar una cuadrícula de repetición por ahora. Entonces voy a asegurarme de que esté ahí. Voy a aumentar el espaciado a, vamos, dejémoslo en realidad a los 20. Creo que eso funciona bien. Y como dije, lo vamos a dejar así por ahora. Ahora. Voy a agruparlos. Entonces aprende más que datos y transacciones. Vamos a llamar a estas últimas transacciones, noto. Y por último, estamos en un ancho a la izquierda con éste. Por lo que en este video fue un poco más largo. Pero me gusta mucho ir en detalles para que ustedes no se pierdan nada. Entonces voy a copiar este basado en texto lo hizo en posición al, a los 40, así 1234. Todos los gastos como este. Y vamos a ver, tal vez podamos llamar a esta llamada gastos BG. Yo hice esto. Y lo que también podemos hacer es duplicar éste y darnos un poco más de espaciado. Entonces por ejemplo, 40, voy a asegurarme de que sean 16. Voy a llamarlo diariamente. Y entonces lo que podemos hacer es típicamente esto, asegurarnos de que esté a los 20, asegurarnos de que esté a los 18. Así. Y le voy a dar algunos números aleatorios. Entonces veamos 2.4875 por ejemplo, porque ese es nuestro gasto diario. Y luego los voy a agrupar. En primer lugar, volvamos al panel de capas. Por lo que esto va a estar idealmente posicionado. Esto de aquí. Organizémonos en esto, al revés así. Por lo que esto fue a vencer semanalmente. Y asegúrate de que creamos otro sí necesita estar en mensualmente así. Entonces para el mensual, cámbialo a algunos números más grandes. Por lo que mil a cinco puntos, 13, por ejemplo. Esto va a ser algo un poco más pequeño. Por lo que 1.4 a 0.64 en el diario y semanal se va a quedar ahí mismo. Entonces lo que voy a hacer es posicionarme es estar a los 40. Entonces 1234, porque esto es a los 40, si te acuerdas. Ahora voy a seleccionar a estos tres, así. Y haz click aquí para asegurarte de que todos los días estén en el centro entre estos dos. Esto va a ser en semanalmente. Y por último, esto va a ser mensual. Por lo que puedes ver lo fácil que es organizarlo y mantenerlo sencillo. Entonces lo que voy a hacer a continuación es realmente crear mi círculo. Entonces voy a empezar añadiendo un círculo aquí mismo, porque nos va a mostrar el gráfico de todos los gastos. Entonces lo voy a llamar servidor por ahora y lo vamos a tratar más adelante en la parte de diseño del curso. Entonces vamos a querer 86 con 186, así. Y vamos a ver, podemos añadir un borde de ticker. Entonces, en primer lugar, cambiemos esto a una columna de disco y démosle un borde de arena, por ejemplo, solo ordenados. Se puede ver un poco mejor y en realidad se puede hacer click en él. Y vamos a ver. Podemos posicionarnos para ser 42, esto es 36. Entonces veamos, tal vez 40 de abajo, así. Entonces tenemos 40 aquí y tenemos 38 aquí. Entonces 39 aquí, girando, escucho, eso está bien. Lo que voy a hacer a continuación es en realidad duplicar esta sección. Colóquelo aquí dentro de nuestro círculo. Y vamos a llamar a esto, por ejemplo, en noviembre. Y dar esto. Algunos gastos de, de c 82513 para corresponder con este número máximo que tenemos. Entonces con éste, me aseguraré de que ambos estén centrados. Me aseguraré de que estén centrados así. Seleccionaré así. Y voy a llamar a este texto que le voy a dar a esto un nombre de gráfico. Y obviamente esto se va a actualizar tan pronto como la gente comience a hacer clic sobre ellos. Entonces lo que voy a hacer a continuación es en realidad agregar algunas etiquetas básicamente de texto. Usemos este texto de 16 duplicados, morbosos afuera y cuándo posicionarse todo por aquí. Entonces veamos qué podemos realmente hacerlo, tal vez podamos agregar algunas cosas al azar que la gente está comprando. Sí, dejémoslo aquí por ahora. Voy a darle algún nombre como la ropa. Ahora voy a duplicarlo llamado esta comida. Y esto va a ser utilidades. Y por último, esto puede ser pagos de auto tienen derecho lo que quieras incluir ahí, dale un espaciado o 20 o piensa que va a funcionar bien y agruparlos y asegurarte de que estén en el centro de nuestro círculo y posicionarlos aquí por ahora porque creo que va a funcionar bien. Pero más adelante en diseño, realidad vamos a agregar algunos iconos allí. Entonces creo que va a funcionar bien por ahora. Entonces veamos. Todos los gastos posición a la cima. Tenemos diarios, semanales, mensuales posicionados aquí. Por lo que todos los días, semanales, mensuales. Y luego tenemos el gráfico y lo lanzamos, vemos ropa, comida, utilidades, y pagos de autos. Y finalmente tenemos este trasfondo el cual va a ir aquí. Voy a agrupar todos estos y llamarlo todos los gastos y llamarlo un día. En realidad, tenemos que poner en esta posición interior al fondo así. Y es básicamente en, lo último que quiero hacer es organizar las cosas sólo un poquito. Así que adopta nav y lo siento, barra lateral va a ir justo aquí. Todos los gastos se va a ir al fondo. Y esto y esto van a ir justo aquí. Por lo que tenemos cuenta principal, tu tarjeta está retenida, dab, últimas transacciones y gastos, y ese es nuestro panel de control completado. Y cuando lleguemos a la parte de diseño de la misma, y cuando lleguemos a páginas adicionales de este panel, vas a ver lo fácil que es esto solo copiar pegar y ajustar algunos de estos elementos, sobre todo con estos quiere, realidad vamos a crear algunas etiquetas para ellos. Vamos a reemplazar esto cuando diga servicio con esas etiquetas. Va a ser realmente sencillo y todos ellos van a tener un color Darrell diferente. Entonces vas a ver lo fácil que va a ser eso. Por lo que hit control S o comando tiene que ahorrar y las deudas son proceso de wireframing en Adobe XD terminado. De verdad espero que ustedes aprendan algo nuevo. Espero que hayan disfrutado con este proceso de creación. Conmigo. De verdad espero que vayas a recrear esto o hacer algo un poco diferente para ti mismo. Y para explorar este proceso de wireframing porque puedes verlo puede ser extremadamente sencillo dependiendo de qué técnica puedas utilizar. Se puede utilizar una cuadrículas de repetición para todos estos elementos. Puedes usar componentes para ellos y luego adaptar esos componentes. Se puede copiar y pegar. Puedes usar Grid para posicionar estos a la izquierda y a la derecha como quieras. Por lo que realmente no hay límite a lo que puedes hacer en Adobe XD. Su límite es solo tu creatividad básicamente. Por lo que realmente te insto y adelante explora Adobe XD y empieza por crear estos wireframes. Y comienza explorando lo que puedes hacer por tu proyecto en Adobe XD. Entonces eso es todo para este video, eso es todo para esta serie de videos para wireframes en Adobe XD. En el siguiente video, voy a explicar sólo un poquito de dónde obtuve imágenes para este proyecto. Porque en la siguiente etapa del proyecto, cuando lleguemos a la parte de diseño, en realidad vamos a empezar a usar imágenes. Entonces solo quiero mostrarte de dónde conseguí esas imágenes, qué puedes hacer para conseguirlas también. Y diferencia entre imágenes libres y B8, así como estos iconos premium donde las conseguí, cómo se pueden conseguir también, así como las limitaciones de licencias para este proyecto en particular. Entonces te veré en el siguiente video. 37. Recursos y licencias originales VS Premium y: A la hora de usar artículos en tus diseños, ya sea que nuestros iconos, imágenes, maquetas, y así sucesivamente. Siempre hay estas dos partes. Primera parte es usar artículos gratuitos. Tan Free Fonts, imágenes gratis, maquetas gratis y así sucesivamente. Y la otra parte es usar las premium. Diferencia entre Dosis dos es obviamente variaciones porque por cada artículo gratis que encontraste en línea, hay una buena probabilidad de que no tengas suficiente variación. Entonces, por ejemplo, si descargas la fuente gratuita, más probable es que no estés usando fuentes de Google, por ejemplo, no encontrarás suficientes formas de fuente. Si están usando iconos, no encontrarás exactamente los mismos iconos del mismo conjunto. Por lo que tendrás que terminar comprando esos iconos si, por ejemplo, estás usando para equipos de mama, hay una buena probabilidad de que encuentres un equipo con solo dos o tres páginas y no todas las páginas que necesites. Misma historia con maquetas, misma historia con imágenes, sobre todo. Entonces te mostraré imágenes ejemplo en detalles, pero valor y variaciones son lo que separa los recursos libres y premium. Siempre hay esta otra cosa que es cada diseñador por ahí que está usando artículos gratuitos, va a terminar teniendo básicamente muy similar, si no el mismo diseño que tú, porque estás usando el mismo artículos gratis que encuentres en línea, ya sean fuentes, imágenes, maquetas, y así sucesivamente. Entonces en este video les voy a mostrar artículos que he elegido utilizar en este curso. Te estoy dando estos ítems, pero una vez más, los ítems premium son solo con fines de aprendizaje. Por lo que no tienes el permiso para usarlos para el trabajo de tu cliente. Si eliges usarlos, asegúrate de entender que en caso de que alguien vaya tras de ti por nuestra demanda, ya sean estos sitios web o de autor original, Todo depende de ti. Así que asegúrate de entender que esto es realmente serio. No utilices estos elementos premium si no tienes permisos para hacerlo. Por lo tanto, asegúrate de entender que para los artículos premium, deuda es el caso de los artículos gratuitos. Obviamente se les permite usarlos. Entonces, empecemos con las fuentes. Y el primer sitio web aquí mismo es Google Fonts. Estoy usando la fuente Poppins a lo largo de este curso. Obviamente puedes ir a este enlace, haz clic en familia Donald, y se descargará en funesta familia de fuentes. Entonces todos estos enlaces, que les voy a mostrar en este video se van a vincular en el PDF. Por lo que por favor descargue el PDF y haga clic en todos estos enlaces que desee visitar. Entonces esas son las fuentes de Google. Y obviamente puedes, si quieres usar cualquier otra fuente, puedes ir a las fuentes de Google, puedes dar click aquí mismo. Se puede elegir por categorías, se puede elegir por idioma. Entonces, ¿qué idiomas se soportan? Propiedades de fuente. Entonces si quieres, cuánta cantidad de estilos, espesores, inclinaciones, ancho, etcétera. Para que puedas hacer lo que quieras aquí mismo en Google Fonts. Y una vez más, este recurso es completamente gratuito. Si eliges ir con recursos premium, entonces realmente recomiendo Creative Market. Porque Crea tu mercado es realmente este bonito recurso para fuentes premium. También puedes encontrar cualquier otro tipo de recursos aquí. Entonces desde fotos, gráficos, plantillas, equipos web, fuentes, complementos, incluso 3D. Aquí puedes encontrar los premium. También, el Dinka mencionó al inicio de este video. El motivo clave por el que no ibas a hacer esto es porque quieres diferenciar tu diseño de todos estos otros diseñadores. Se quiere dar a sus clientes esa experiencia premium, sobre todo si tienen el presupuesto. Por lo que siempre puedes ir aquí mismo y comprar estas fuentes para que tus diseños no terminen luciendo igual que todos estos otros tipos que están usando recursos gratuitos. Entonces ese es el principal punto keef aquí mismo. Estoy recomendando crear mercado porque algunas personas realmente creativas han creado fuentes aquí mismo. Y de verdad les recomiendo que los revisen. A continuación tenemos iconos. Estaba usando estos iconos, tan gran icono Steyn, y este conjunto fue actualizado. azulejo Kinky tiene 2400 iconos, algo así. Y puedes dar click aquí mismo para ir a la prima y perdón por previsualizar. Y se puede ver cuántos iconos diferentes en diferentes estilos en esta espalda realmente contiene. Entonces este es el que estoy usando, su prima como puedes ver. Pero si quieres iconos gratis, una vez más, puedes ir a sitios web como flat icon.com. Y por cada ícono que estás usando aquí mismo, tienes que volver a enlazar con el autor original, sólido y con forma. Si tú, por ejemplo, eliges, no lo sé, este pack de iconos. Y digamos que quiero descargar este ícono. Puedes ver que al hacer clic en opción PNG o opción SVG, siempre te recomendaré SVG si es posible. Al hacer clic en SVG UC, tienes diálogo premium. Por lo que tienes todos estos iconos para este precio de mes ni atribucional requerido. Pero si optas por descargar versión gratuita, entonces tienes que atribuir al autor original. Entonces tienes que copiar este enlace, tienes que basarlo en tu página web y así sucesivamente porque estás usando el recurso de otra persona de forma gratuita. Entonces ese es el inconveniente. Tienes que vincular a este tipo. Entonces este es Gregor Krasner, espero haberlo pronunciado correctamente. Entonces esas son las limitaciones de los iconos libres. Siempre se puede ir a los sitios web como el diseño de materiales, que son los iconos propios de Google. Pero el problema con esto es que estos son los iconos que usan en el sistema operativo Android I. Entonces básicamente cada teléfono individual ahora ahí que tiene sistema operativo Android, está usando estos iconos. Entonces, una vez más, lo más posible es que tu diseño acabe luciendo bastante similar a todos estos otros diseños que se encuentran en línea, sobre todo si estás haciendo diseño de aplicaciones móviles, especialmente para usuarios de Android. Entonces esas son tu limitación. Si lo deseas, obviamente puedes descargar y usar estos iconos, igual que con las fuentes de Google porque Google los creó. Básicamente son casi de código abierto, que están justo aquí. Pero todavía tienes estas licencias aquí mismo, pero puedes utilizarlas de forma gratuita sin que se requiera ninguna atribución. A continuación estamos moviendo dos imágenes, y este es realmente el recurso clave se encuentran en línea que tienes más limitaciones ancho. Porque sobre todo con la gente, si estás usando imágenes de personas quieres conjuntos de imágenes y las posibilidades son que no encuentres conjuntos de imágenes como imágenes libres. Entonces ahí es donde una imágenes premium vienen en juego y las imágenes premium SET vienen en juego. El otro camino es la resolución, sobre todo si estás creando trabajo para impresión. Es posible que esas resoluciones no sean suficientes para tu trabajo de impresión. Por lo que aún tendrás que terminar comprando esas imágenes, conjuntos de imágenes. Podrás utilizarlos más adelante en tu trabajo de impresión. Sólidos. Tomen un buen ejemplo. A ver, tal vez podamos escribir algo así como, no lo sé. Hombre, sólo para ver algunas imágenes. Y tenemos esta imagen aquí mismo. Entonces digamos que queremos usar imágenes de este conjunto. Podemos hacer click en el fotógrafo y se puede ver que tienen variación de estas diferentes imágenes, pero no hay un conjunto de imágenes de este modelo en particular. Entonces eso es lo que estaba diciendo. Entonces si quieres usar esto para un equipo por ejemplo, y lo tienes, digamos cuatro personas en tu equipo. A lo mejor podemos terminar usando esta imagen, puede ser esta imagen, pero Eso es básicamente todo. Estamos atascados. Por lo que tenemos que encontrar en línea imágenes que sean realmente similares a éstas, que son gratuitas, que tienen la misma iluminación, que tienen el mismo tipo de fondo. Por lo que esos van a parecer coherentes en nuestra página web. Y entonces estamos atascados. Estamos perdiendo el tiempo buscando estas imágenes en línea en buenas posibilidades son que no termines encontrando esas imágenes en línea. Entonces ahí es donde un respaldo de imagen premium son útiles. Y sitio web que estoy usando es y elementos vitales porque tienen todas estas diferentes imágenes aquí mismo en conjuntos de imágenes. Y también tienen este sitio web llamado 20-20, que han comprado. Entonces si elijo, por ejemplo, fotos aquí mismo. Y si hago clic en ellos, se puede ver que podemos refinarlos por retrato de paisaje, fondo cuadrado, que está aislado, lo que básicamente significa que si queremos encontrar imágenes como esta, es realmente bastante sencillo. Por lo que puedo escribir en hombre Buscar. Y luego también puedo hacer clic aislado. Y se puede ver de inmediato que tenemos estas imágenes aisladas. Entonces ya sea sobre fondo blanco, fondo gris, fondo oscuro, y así sucesivamente. Por lo que es mucho más fácil que para ti saltar dentro, por ejemplo, Photoshop o cualquier otra herramienta en línea que pueda utilizarse para cortar estos fondos para estas imágenes. Y solo con un solo clic, vas a poder eliminar fondos de estas imágenes. Entonces tomemos, no sé, esta imagen por ejemplo. Y podemos ver imágenes similares. Entonces aquí están. Para que puedas de inmediato, sólo tienes que mirar desde estas imágenes y quitar el fondo como si las utilizáramos en tus diseños. O si no quieres quitar los fondos, simplemente puedes usarlos así. Entonces ahí es donde estas imágenes premium son útiles porque vienen en sets. Entonces déjame mostrarle esta imagen también. Si tú, por ejemplo, querías revisarlo, ves que tenemos este modelo. Y puedes desplazarte hacia abajo y ver que tenemos modelos similares a partir de este tipo de configuración. Y también puedes hacer click en el fotógrafo. Y se puede ver que tienen 3 mil imágenes. Y luego puedes buscar ese modelo en particular y ver otras, por ejemplo, poses u otras cosas que ese modelo en particular ha hecho. Y puedes ver claramente, digamos que este hombre, puedes localizarlo en la mayoría de estas imágenes para que puedas verlo en diversas poses diferentes. Ves que tenemos hijos, tenemos gente mayor, tenemos subs de llamadas, tenemos detalles y así sucesivamente y así sucesivamente. Entonces básicamente deudas, qué fácil es esto de usar. Y lo que quería mostrarte así como fotos. Entonces cuando haces click justo ahí, ves que tenemos 50 millones de imágenes diferentes en este sitio web, 20-20 dot com. Entonces cuando haces clic derecho te va a llevar a este sitio web y está mucho mejor organizado que y elementos Watteau, pero sigue siendo parte de elementos inverter. Entonces cuando quieres comprar y suscripción de elementos de agua, aún terminas con este sitio web en particular. Por lo que puedes usar tanto imágenes en tus proyectos imágenes de barco son básicamente realmente profesionales de alta calidad y así sucesivamente. Por lo que puedes ver aquí mismo que puedes configurarlos por sets. Y básicamente lo mismo una vez más, cuando se quiere usarlos, sólo hay una salvedad. Puedes elegir diferentes tamaños de estas imágenes. Entonces, por ejemplo, elijamos esta imagen. Y puedes ver, puedes elegir pequeño, mediano o grande, y luego puedes descargarlos. Pero ingenio y elementos vitales, hay que descargar la imagen más grande posible y luego terminar optimizándola. Te voy a mostrar Optimización que estoy usando más tarde, pero siempre puedes arrastrarla y soltarla dentro de Adobe XD como deuda. Pero hay buenas posibilidades, sobre todo si estás usando estas imágenes premium, vas a terminar con un archivo realmente grande. Por lo que su sistema podría rezagarse. Por lo que siempre te recomiendo optimizar tus imágenes si puedes. O si optas por usar estas imágenes premium, puedes usar algo como 20-20 y luego descargar estas versiones más pequeñas. Se van a guardar en tu colección y todavía puedes terminarlos como colección. Puedes agregarlas a tus favoritos. Y luego cuando termines compartiendo esos recursos con tus desarrolladores, entonces puedes seguir adelante y descargar versiones más grandes si así lo desean. Por ejemplo, su cliente podría terminar teniendo diseño de sitios web, diseño de aplicaciones, pero también diseño de impresión. Por lo que podrían necesitar enormes versiones para imprimir. Por lo tanto, se puede volver atrás y enviarles esas resoluciones. Si bien las imágenes de fray V8, hay una buena probabilidad de que esto sea básicamente ella. Es así como el fotógrafo mitades lo proporcionó. Entonces tal vez te guste de verdad esta imagen y tal vez sea 1920 por 1080. Tu cliente requiere algo más grande y no puedes proporcionarles algo más grande de lo que estás atascado. Entonces así de fácil es usar estas imágenes premium. Y realmente una cosa bastante simple, elementos de ancho y VO2 es, por ejemplo, si elegimos usar esta imagen, y si elegimos usar grande, porque ya estoy conectado aquí como usuario premium, Simplemente puedo dar clic en Descargar. Gran opción. Y puedes ver justo aquí en la esquina izquierda, mi descarga va a empezar de inmediato en cuanto haga clic en botón de descarga desconfirmada, y lo puedes ver aquí mismo. Por lo que siempre comenzó a descargar en elementos Eduardo. No obstante, por cada recurso que terminas usando en y elementos Watteau. Simplemente puedes hacer clic en descargar y luego tendrás que elegir el proyecto que quieras. Entonces tengo este Proyecto Bancario, pero por ejemplo, puedo llamarlo nuevos y proyectos bancarios. Yo puedo crear ese proyecto y puedo sumar y dialogar. Y de inmediato, tengo una licencia comercial que luego puedo dar a mis clientes. Y no se van a preocupar de que alguien los demande por usar esta imagen y demás porque están cubiertos por licencia. Una mercadotecnia sobre imágenes realmente importantes. Una es, por ejemplo, que si este fotógrafo por cualquier razón elige salir de chapoteo, déjame no sólo elegir a este fotógrafo. Entonces, por ejemplo, éste, si optan por salir de nuestro chapoteo, entretengan sus imágenes hacia abajo. Todavía terminas usando sus imágenes. Hay una buena posibilidad de que luego cambien de opinión y pasen de imágenes libres a premium y acaben demandarte por usar esas imágenes. Por lo que siempre hay muerte. Si bien con este lee estos servicios premium, terminas teniendo un documento escrito de licencia que luego puedes compartir con tu cliente, y entonces tu cliente está realmente cubierto si algunas de estas personas intentan ir tras ellos, que es no va a ser realmente el caso mientras nosotros estos recursos gratuitos para imágenes, maquetas, iconos, cualesquiera que sean los recursos gratuitos, hay una buena posibilidad de que alguien vaya a hacer eso. Por último, voy a mostrar imágenes que estaba usando y estas son imágenes premium. Y puedes ver aquí mismo cuando hago click lo fáciles que son para trabajar con estos. Y puedes ver que terminas con estas imágenes sin ningún color y estas con color. Y si cierro esta vista previa, se pueden ver los tipos de Adobe Illustrator. Se puede ver que tenemos tipos de archivo, Adobe Illustrator, EPS, PNG, SVG. Se puede ver que las dimensiones en las que están entrando estos iconos, son vectoriales y en capas. Contamos con licencia comercial y puedes dar click para cargar y ver más información sobre comercializa. Pero básicamente, ya lo cubrí. Y siempre se puede llegar a esta persona y pedir, por ejemplo, iconos personalizados. Puedes pedirles que cambien un color en particular si tienen algo así como componentes integrados dentro de illustrator o dentro de x D, o dentro de sketch, cualquiera que sea la herramienta que estés usando mientras libere iconos, eres básicamente pegado con lo que sea que te estén dando. Yo soy porque estoy usando es R, R de solo icono. Como puedes ver, tienen 955 de estos iconos premium. Y puedes desplazarte y ver todo tipo de diferentes servicios para los que puedes usar estos iconos. puede ver que tienen educación de Startup trabajando desde redes domiciliarias, deporte y así sucesivamente y así sucesivamente. Y básicamente puedes ver variación en estos diferentes paquetes de iconos para mostrarte una vez más. Y elementos vitales es básicamente un servicio de suscripción. Por lo que en lugar de comprar desde la creación de mercado cada uno de los elementos por separado o de la ayuda de la interfaz de usuario, puedes comprar una suscripción a este sitio web de elementos inverter. Y básicamente tienes descargas ilimitadas por un año y luego tienes que renovar tu suscripción en deuda un año, puedes descargar tantos artículos como quieras. Y puedes ver que incluso estás cubierto con video, plantillas de video, incluso con música, efectos de sonido, plantillas gráficas, presentaciones gráficas, fotos, fuentes, add ons, plantillas web y aún más categorías. Para que veas que tienes 3D, tienes eBooks y cursos. Por lo que puedes ir a y Watteau puntos más n incluso aprender en tu suscripción. Entonces básicamente lo han cubierto todo. Y realmente si buscas el mejor recurso para recursos premium, no puedo recomendar y elementos Watteau suficientes. También tengo un canal de YouTube, así que termino usando recursos de elementos submarinos todo el tiempo. Estoy usando recursos para estos cursos es que ustedes pueden ver, y también los estoy usando para mi negocio. Por lo que realmente cubrieron todas las bases y están relacionando que no hay mejor alternativa dos y elementos vitales por ahí. Entonces básicamente eso es un recapitulativo para este video. De verdad espero haber cubierto todo y de verdad espero que ustedes entiendan lo importante que es entender qué artículos están usando. Entonces, una vez más, si estás usando artículos gratuitos, estás realmente limitado con lo que sea que te haya proporcionado el autor y diseñador original, sobre todo con fotos. Ya te expliqué que si estás usando imágenes premium, estás cubierto con licencia. Para que no tengas que preocuparte de que nadie te demande. Estás cubierto por su licencia y siempre puedes darles licencia a tus clientes para que estén cubiertos también. En el siguiente video, te voy a mostrar cómo termino optimizando mis imágenes, sobre todo las que estoy dialogando desde un lema elementos porque como te mostré, Jarrod enorme. Entonces vamos a revisar eso. A lo mejor puedo hacer click en éste por ejemplo. Y se puede ver que son 6 mil por 4 mil en altura y ancho. Por lo que es realmente importante optimizar esas imágenes para su uso, sobre todo para mantener el tamaño de tu archivo Adobe XD lo más bajo posible, porque eso va a ser entonces más fácil para que tu computadora trabaje. Y va a ser más fácil compartirlo con tus desarrolladores y clientes. Entonces te veré ahí. 38. Optimizar tus imágenes: Entonces, cuando se trata de usar tus imágenes en tu proyecto, como dije en un video anterior, es realmente importante optimizar esas imágenes. Optimización realmente significa que puedes hacer, puedes usar esa misma imagen, pero solo con un tamaño de archivo más pequeño, lo que significa que tu computadora no se va a retrasar. Tu archivo XD va a ser más pequeño. Tu vista previa para tus clientes online va a ser más rápida porque su conexión a internet no tiene que cargar todas estas enormes imágenes. Y luego finalmente, para los desarrolladores, significa que luego simplemente puedes enviarles esas imágenes optimizadas porque tienen que optimizar esas imágenes también al final del día. Por lo que si las optimizas , les ahorrará tiempo. Carga del diablo por ello. cliente le encantará por ello porque el proyecto va a estar vivo antes. Entonces estoy usando Windows y en Windows, estoy usando una herramienta llamada motín. Y lo puedes ver aquí mismo. Básicamente significa una herramienta radical de optimización de imagen. Y lo que eso significa es que está usando estos mismos datos de imagen es simplemente haciéndolos más pequeños. Entonces para mostrarte en ejemplo real, estas son las dos imágenes, imágenes premium que descargué del video anterior. Entonces aquí está la que descargué para 20-20. Y como puedes ver, es 55 00 de altura y 3-6, 67 de in, lo siento, en 55 00 de ancho y 3667 de altura. Por lo que es casi 6K una imagen, y se puede ver que tiene 7.3 megabytes de tamaño. Todo lo que necesitas hacer es simplemente arrastrarlo y soltarlo dentro de este top. puede ver que contiene una imagen de alta resolución. Llegado puede manejar este tipo de imágenes, pero el procesamiento puede ser bastante lento en esta situación. ¿ Queremos redimensionarlo primero recomendado, las imágenes originales no serán modificadas. que básicamente significa básicamente va a reducirlo en el porcentaje. Por lo que el 100% mantiene actos relación de aspecto y puedes golpear OK. Se puede ver aquí mismo, la imagen inicial es de 7.3 megabytes. La imagen optimizada es de 1.8 megabytes. Entonces puedes ver ahí mismo lo fácil que fue eso, lo rápido que fue, y cuánto en tamaño. Y esto nos dio, se puede ver que la calidad es básicamente sin cambios. Y si hago clic aquí, una vez más, 55 00 con 3667, cuando haga clic en Guardar, va a reemplazar esa imagen. Y luego cuando haga clic una vez más, se puede ver 55 003667731 de tamaño. Y básicamente, ahora tengo que localizarlo donde está. Perdón, estuvo en mi escritorio todo el tiempo. Sólo tengo que revisar la parte para el expediente. Pero cuando hago un refresco aquí mismo, se puede ver 5000306, 6-7, Pero ahora 183, así como es justo aquí. Entonces, básicamente, puedes escalar todas estas imágenes masivas, hacerlas más pequeñas, mejorar la velocidad de tu Adobe XD, mejorar la velocidad de tu computadora porque no se va a retrasar con estas enormes imágenes. Y básicamente lo que eso significa va a funcionar mucho más rápido. Déjame mostrarte en un ejemplo más. lo que este ejemplo es de invitar dos elementos. Y se puede ver 54723648. Entonces esos son los resolutivos. Y se puede ver tamaño casi siete megabytes. Si un arrastre y soltarlo dentro. Haz lo mismo. Entonces sí. Está bien. Se puede ver la imagen inicial era casi siete, optimizada. La imagen es 1.32. Entonces si golpeo guardar, así recuerda, casi siete megabytes. Haz un poco de refresco Así. puede ver que ahora es 1.32. Entonces, una vez más, las dimensiones son las mismas. La resolución es la misma. El recién bajó el tamaño del archivo general al comprometer todos estos píxeles y comprenderlos y hacerlos más pequeños en la imagen inicial. Entonces así es básicamente como funciona la optimización de imágenes. Una vez más, un motín. Es herramienta gratuita. Lo vincularé en el PDF también. Si estás usando Mac, puedes usar algo así como imagen óptima o puedes encontrar algunas herramientas de optimización de imagen adicionales en línea que tienes que pagar. Pero la imagen óptima siempre fue libre y el motín siempre fue libre en Windows. Entonces eso es básicamente todo para este video. En el siguiente video vamos a empezar importando mundo estas imágenes a nuestros diseños. Te voy a mostrar cómo puedes optimizar aún más esas imágenes haciéndolas aún más pequeñas en XD y cómo puedes entonces presentar esos diseños a nuestros clientes. Entonces te veré ahí. 39. Crear diseño 1: Ahora sigamos adelante y empecemos con Dart diseñado. Pero antes de que lo hagamos y asumamos visto los dos videos anteriores sobre recursos, Déjame añadir una rápida salvedad a eso, porque muchas de las veces en las que estás diseñando, la mayor cantidad de tiempo que te lleva realmente es encontrar esos recursos. Entonces para encontrar imágenes, para encontrar iconos, y realmente no importa si estás usando versiones gratuitas o de pago. Todavía vas a terminar usando la mayoría de tu tiempo para encontrar esos recursos. Entonces por eso te digo, organízate de tal manera. Por lo que es mucho más fácil para ti encontrar esos recursos. Entonces, por ejemplo, si estás usando recursos premium, veamos desde en Watteau elementos, entonces, siempre te recomendaré que, en tu tiempo libre, exploraras esos recursos y veas dónde puedes ahorrar mucho tiempo. Básicamente, puedes crear colecciones cuando encuentres algunas imágenes para futuros proyectos, puedes nombrar colecciones que solo mejorarán tu velocidad en la próxima vez que comiences con el proyecto. Entonces, solo ten todas esas cosas en mente. Vas a usar mucho tu tiempo solo investigando y encontrando esos recursos. Entonces realmente creando el diseño. Eso es al final del día, parte realmente fácil. Si el cliente ya tiene todos esos recursos y solo los estás usando, entonces eso está bien. Es un sueño para ti. Pero al final del día, Eso no es realmente el caso en la gran mayoría del proyecto. Ahora que eso está fuera del camino, si te llevo de vuelta a nuestro archivo de proyecto, puedes ver que tenemos una arquitectura de sitio web. Contamos con wireframes en papel, Contamos con una web wireframes, y tenemos un panel wireframe desde el que vamos a construir más adelante cuando lleguemos a la parte de diseño de la sección de deuda y tablero. Entonces para empezar con el diseño de Dart, lo que en realidad voy a hacer es mover todo esto un poco. Entonces déjenme subir rápidamente las indies. Déjame subir estos, así. Déjame seleccionar estos y ver en realidad puedo simplemente seleccionar todos mis aeropuertos. No sé por qué no me da opción hábil. A ver, tal vez si puedo seleccionarlo así. No. No sé por qué. No me da la opción de mover todos mis tableros de arte. De repente, aquí estamos. Por lo que tienes que usar turno y tienes que hacer click en esos nombres para poder seleccionar todos tus aeropuertos y moverlos. Y la razón por la que he hecho esto es porque si vuelvo al modo de diseño, ahora vamos a copiar, estos son tableros basados aquí mismo. Y más adelante vamos a hacer diseño responsive. Entonces podemos basar puntos hacia abajo también. También puedes hacer es, como puedes ver, tenemos mucho espacio vacío aquí mismo. Los puedes hacer uno al lado del otro. Entonces digamos que puedo golpear el control D duplicar este, y luego simplemente moverlo todo el camino hasta aquí. Y luego puedo crear mi diseño, crear mi tablero aquí, y luego usar este espacio para el diseño responsive. Entonces realmente todo depende de ti cómo quieres hacer esto. Lo que quiero hacer en realidad es dar click en este. Entonces en nuestra página de inicio, sostén mi Alt u opción, y luego simplemente crea un duplicado de ella, colóquelo aquí, y luego simplemente se asegura de que lo coloque un poco abajo. Daré clic aquí y llamaré a este sitio web. Diseño. Entonces ahora que tenemos tres flujos diferentes. Así que solo recuerda una vez más, puedes compartir estos tres flujos con tus clientes que pueden compartir wireframes para recibir comentarios. Puedes compartirlo dashboard para comentarios. Y por último, puedes compartir sitio web diseñado para la retroalimentación. Te explicaré compartir más tarde. Y luego puedes aplicar retroactivamente ese conocimiento que vas a ganar de la acción simplemente siguiendo esas lecciones. Pero por ahora, solo quiero mantener las cosas simples y no confundirte más. Por lo tanto, empecemos con el diseño de nuestro sitio web. Entonces, si acercamos mucho más, se puede ver cómo se ve eso. Y voy a renombrar todas estas páginas también, diseño. Por lo que tendremos un diseño de cuentas de diseño de homepage y así sucesivamente y así sucesivamente. Sólo porque cuando empecemos a conectar estas páginas más tarde, va a ser mucho más fácil de entender para nosotros. Ok, solo necesito conectarlos a la abreviatura de diseño al final. Entonces, empecemos. De hecho, lo primero que voy a hacer es trabajar en mi navegación principal. Y para hacer eso, lo que tengo que hacer es acercar. Voy a dar click en él. Lo abriré en mi panel Capas de extremo abierto aquí mismo. Porque ahora quiero crear un componente a partir de este nav principal. Pero antes de hacerlo, quiero trabajar en mi botón de inicio de sesión porque eso es básicamente muy sencillo. Entonces, para crear un componente, todo lo que tienes que hacer es simplemente presionar control o tecla de comando. Y se puede ver que siempre se muestra como un estado por defecto. Lo que quería hacer por ello es simplemente crear un estado Horus. Por lo que puedo dar click justo aquí donde dice Y estado. Se puede agregar un nuevo estado o un estado de desplazamiento. Escogeré hover, calidad, hover. Y ahora en mayo Horace declara lo que quiero hacer es entrar. Así que da clic aquí para abrirlo. Haga clic aquí. Todo lo que quiero hacer es simplemente cambiar el color de mi botón en el estado de desplazamiento. Entonces la forma en que puedes hacer eso son básicamente dos cosas. Por lo que puedes seleccionar un color aquí, o puedes elegir otros colores y así sucesivamente y así sucesivamente. También puedes cambiar su tamaño si quieres al pasar el cursor, puedes cambiar el color de este texto y así sucesivamente y así sucesivamente. Yo no quiero hacer eso. Quiero mantener las cosas bonitas y sencillas y usaré este efecto flotante a lo largo de mi deseo solo para seguir lorando, luciendo organizado. Entonces si te llevo de vuelta a la vista previa pulsa aquí mismo. Y cuando se abre mi vista previa, cuando paso el cursor, se puede ver cómo se ve eso. Por lo que es realmente agradable y simple, muy fácil, y se ve muy bien. De acuerdo, así que ahora sigamos adelante y volvamos a nuestra siesta principal. Lo que quiero hacer, en primer lugar, es crear un punto de toque para mi logo. Punto de profundidad es básicamente donde los usuarios van a terminar haciendo clic más tarde para acceder a la página de inicio. Entonces de todas estas viejas páginas, por lo que las cuentas lanzaron tarjetas y así sucesivamente. Si las personas quieren volver a la página de inicio, simplemente pueden hacer clic aquí. Pero en lugar de hacer clic en el propio logotipo, se va a dar click en este puntitos de tap invisibles. Entonces démosle un nombre, logotipo, punto DAP. Lo que quería hacer es quitar el color, quitar el borde, así que en realidad no lo puedes ver, pero sigue ahí porque es la obesidad está al 100% y es solo funcionalidad es básicamente punto de adaptación. Y voy a demostrar eso un poco más tarde cuando realmente empecemos. Con la creación de todos estos. Entonces vamos a crear ahora un selector. Y selector va a bajar aquí en esta página inferior para la cuenta. Por lo que siempre que un usuario haga clic en algunas de estas, el selector va a aparecer mostrando que realmente hiciste clic en cualquiera de esas páginas. Y para hacer eso, voy a usar un rectángulo. Y voy a crear un rectángulo como este. Entonces vamos a ver. Podemos darle 112 con ocho. Así que rectángulo realmente inteligente así. Y básicamente, quiero crear nuestro color principal. Entonces elegiré y descubriré. Y veamos, para el radio de esquina puedo usar algo así como cinco. Creo que funciona bien sin ninguna frontera. Puedo posicionarlo hasta el borde inferior así. Y también puedo asegurarme de que sea del tamaño del texto en sí, así. Posición por debajo de todos nuestros artículos, selector de calidad. Y lo que voy a hacer es allover la obesidad de la misma. Por lo que pegó 02 veces así. Y déjenme bajar la obesidad de rejilla mía sólo un poquito para que ustedes puedan verlo un poco mejor. Entonces ahora que tenemos todo esto, tenemos nuestro botón, tenemos nuestro logo. Si hago doble clic, se puede ver que tenemos, estos dos estados están en mora gris para nuestro logo. Tenemos estado Horace para nuestro botón. Ahora llega el momento de crear nuestro nav principal como componente en sí mismo. Para que pueda seleccionar una clave de control de feud para crear un componente. Y lo que vamos a hacer en realidad es crear algunos estados diferentes. Entonces para crear diferentes estados, lo que voy a hacer es dar click aquí mismo nuevo estado y llamarlo cuentas. Entonces si podemos ver en estado por defecto no tenemos nada seleccionado. Pero a cuenta, este selector va a aparecer aquí mismo. Y en realidad vamos a cambiar el nombre del texto de cuentas a este color sólo para que podamos indicar que esto está seleccionado si lo llevo a pantalla completa. Para que puedas ver cómo se ve eso. Se puede ver que es mucho más limpio y es mucho más obvio ahora que tenemos el selector y esto cambió el color, que esto realmente está seleccionado. Por lo que ahora podemos seguir adelante y volver a aquí. Puedo cerrar este click para añadir un nuevo estado. Y este estado se va a llamar pertenece. Y en el lanzamiento, lo que voy a hacer es simplemente poder seleccionar esto. Se puede ver que este color está seleccionado. Por lo que 495463 para todos ellos, que es este color. Y si te llevo de vuelta aquí, puedes ver que estamos en préstamos. Por lo que ahora los anhelos van a estar en este color y las cuentas van a estar en descoloridos y manteniendo el control para hacer clic en diferentes artículos. Y también voy a mover el selector aquí. Y también soy un reducido su tamaño para encajar mi texto de préstamos. Entonces, básicamente, así es como funciona eso. Haga clic para agregar un nuevo estado, llámalo tarjetas. Y se puede ver que básicamente este es este estado repetitivo, pero realmente hay que hacerlo. Y hay que hacerlo sólo una vez, lo cual es genial. Y luego más adelante, cuando empieces a seleccionar todos estos estados diferentes desde la navegación neuronal, va a ser mucho más simple y mucho más limpio. Esto va a ser invertir. Así que selecciona nuestros invertidos, usa esta tarjeta de sílice de color, usa esto y mueve nuestro selector dos aquí y dos aquí, por lo que encaja realmente bien. Y el estado final para nuestro nav es digital. Al igual que esto. Seleccionaré digital. Ve aquí mismo, elige este color, los inversionistas eligen este color. Mueve esto justo aquí, aumenta dos aquí, y ahí lo tenemos. Hemos completado nuestro nav principal. Entonces si cambio entre mis estados o me dejas cerrar esto para que puedas verlo un poco mejor. Entonces si vas a Default State vino tener algo, cuentas, préstamos, tarjetas, invertir, y digital. Vamos a empezar con el estado por defecto obviamente. Y el estado por defecto se va a ubicar en la página principal. Pero por cada una de estas páginas, va a cambiar entre todas estas páginas diferentes, n nombres. Por lo que hoy en día hemos completado eso. Pasemos a la sección de héroes de nuestra página web. Y voy a darle un nombre a esto. Entonces voy a llamarlo nuevo banco o una nueva era así. Y también voy a reorganizar un poco mi texto. Entonces vamos a ver. Puedo darle un espaciado de un giro por ejemplo, creo que va a funcionar bien. Me posicionaré para estar a los 50. Entonces turno 1-2-3-4-5. Al igual que esto. Copiaré y pegaré el texto aquí. Y aun así me quedaré con esto. Conoce más para el botón. Y vamos a ver, está en 60, aumentará esto a 70, así. Y vamos a ver, aprender más textos pueden ser 24 irregulares y blancos. Y también me posicionaré aquí. Y veamos por nuestro botón principal para el login, creo que va a funcionar bien a los 60 y sí, vamos a mantenerlo en 60 porque es un poco más pequeño y encaja justo aquí, pero este es nuestro botón principal. Se va a ver a lo largo de nuestra página web. Entonces, sólo vamos a mantenerlo ahí por ahora. Entonces vamos a ver, podemos posicionar este botón para ser 50, y esto está en 50. En lugar de aprender más, lo llamaré botón principal. Entonces significan BTM así. Y lo que también voy a hacer es crear un componente. Por lo que pulsa Tecla de control , estado por defecto, tenemos. No en lugar de nuevo estado, haga clic derecho para eliminar, voy a elegir estado Horace, llamarlo hover, y básicamente crear lo mismo que hice para la navegación superior. Entonces solo voy a usar en este color así. Dónde volver a la vista previa de hit de estado predeterminado solo para ver cómo se ve eso. Entonces aquí tenemos un flotador, y aquí también tenemos un flotador. Entonces creo que eso se ve bien. Lo que voy a hacer a continuación para este texto es pila usada. También lo estoy manteniendo así y estoy usando stack para más adelante porque va a ser mucho más fácil para mí trabajar en el diseño responsive. Voy a espaciar esto un poco mejor de aquí para aquí, selecciona esto y el texto, asegúrate de que el texto esté en el centro. Elimina esto, y eso es básicamente todo. Ahora puedes ver que todo empieza a tomar forma. Todo se ve mucho mejor ahora. Y lo siguiente, y el siguiente paso que voy a hacer es básicamente traer una imagen. Estoy usando una imagen PNG para este. Entonces básicamente esta es la imagen a partir de elementos invertibles. Y todo lo que hice, entré dentro de Photoshop y corté todos estos son rincones hacia fuera y lo exporté como B y G, que básicamente significa que la imagen no tiene ningún color de fondo ni forma de fondo en ella. Entonces ahora que lo he hecho, lo que puedo hacer es básicamente posicionarlo como quiera, tal vez algo así. Creo que funciona bien. Y ya puedes empezar a ver que ahora tenemos este diseño de sitio web empezando a tomar forma. Lo que voy a hacer a continuación es crear algunas formas. Entonces para hacer eso, voy a usar mi lápiz, por ejemplo. Haga clic, haga clic, mantenga presionado y luego haga clic por ejemplo aquí mismo, golpee escape. Y lo que voy a hacer es realmente elegir un color de caldera de verde. Por lo que elegiré este color. Y aumentaré el tamaño de mi frontera a diez. También lo haré alrededor del campamento. Entonces es bonito y redondo así. puedas ver cómo se ve eso y obviamente puedes reposicionarlo donde quieras. Creo que me atrevo, se ve bien por ahora. Vamos a moverlo un poco más tarde. Puedo llamarlo una línea o una parte. De todas formas que quieras. Me posicionaré obviamente dentro de nuestro héroe y moveré mi imagen detrás de mis mazos, pondré esto, y también moveré mi línea detrás del texto. Lo siguiente que vamos a hacer es crear un círculo. Y usaré algo así como, no sé, 70 por 70 por ejemplo. Creo que eso va a funcionar bien. A lo mejor 80 por 80, sólo para darnos un poco más de espacio. Sin ningún campo. Voy a usar ese mismo color para nuestra frontera. Entonces éste. Y para el tamaño adoquinado use diez. Entonces para mantener lo mismo como este 11, lo final que voy a hacer es usar mi canción A line. Cuándo usar un rectángulo, quiero crear una cruz como esta. Puedo traer esto en diez y vamos a darle, por ejemplo, San Juan no casarse a los 15 con 80. Creo que eso va a funcionar bien. Voy a rotarlo así. Golpear control D, voltearlo. Así que da click aquí. Y seleccionaré estos dos, los fusionaré, y luego quitaré el borde. Y para el color de relleno, usaré este. Y básicamente ahora puedo darle la vuelta. Puedo posicionarlo donde quiera. Y por ejemplo, lo mantendré aquí mismo mientras mantengo el llamado poquito más bajo. Y esta es solo la forma de un banco de estar a tiempo con estos diseños mínimos y desmembrados y diseños y demás. Entonces ahora lo último que voy a hacer por el héroe es en realidad agregar una forma de fondo. Y para agregar esa forma de fondo, en realidad voy a usar mi mental. Entonces volvamos al cinturón de capas. Llamemos a esta cruz. Se llama a este círculo. Y agruparé todos estos, lo llamé héroe. Elementos. Posicionado detrás de mi texto. Y voy a dar click aquí mismo. A continuación, haga clic aquí, y simplemente use mi herramienta de pluma para crear esta forma de suelo a partir de aquí, por ejemplo. Y simplemente haga clic aquí. Perdón por eso. Mi teléfono se volvió loco por alguna razón. Entonces haces clic aquí, luego haces clic aquí, y luego puedes extender esto. Por lo que puedes hacer click aquí, tal vez aquí, y aquí. Entonces puedes mantener pulsada la tecla Shift hasta que se muestre esta línea, lo que básicamente muestra que puedes cerrar y disquear con esta forma. Y obviamente puedes jugar con estos para que puedas dar click ahí mismo, puedes reorganizarlo. Si haces doble clic en él, vas a conseguir esta parte externa. Para que puedas jugar con él aún más así. Y obviamente puedes reposicionar estos como quieras. Puedes cambiar el ángulo de estos puntos de anclaje y crearlos como quieras. Entonces en este caso, solo bajaré esto un poco. Quizás posicione esto para estar aquí mismo. Porque no quiero que bloquee MyText porque obviamente el texto es mucho más importante. Entonces esta forma de fondo con la que estás jugando. Y también puedo hacer doble clic aquí y posicionar esto aquí, y luego hacer doble clic una vez más. Si quiero cambiar esta forma un poco más allá para que selle así. Y ahora que he terminado de jugar con él, obviamente puedo posicionarme aquí. Y siempre es un poco complicado con estas formas porque siempre quieres lograr el mejor resultado posible sin perder demasiado tiempo. Pero siempre puede ponerse un poco más complicado de lo que pensabas. Por último, lo que vamos a hacer es que voy a posicionar esto sólo un poquito aquí. Y como puedes ver, tenemos esto raro. Forma. Entonces voy a hacer doble clic de mi parte. Y simplemente voy a hacer esto para poder conectarlo y crear distribuido solo un poquito mejor. Pero eso realmente no importa porque lo que vamos a usar es un gradiente lineal. Entonces para nuestro gradiente y cuándo elegir mi trasero y carga mantente en la cima por ahora. Lo que voy a hacer es quitar la frontera, incluir el relleno click justo aquí. En lugar de color sólido, voy a usar un gradiente lineal. Y para mi punto más oscuro, ¿se puede ver que está ahí abajo. Voy a rotarlo. Entonces voy a Marie posicionarlo así. Y luego voy a subir esto. Es jugar cosas conmigo por alguna razón. Pero vamos a incluir el color por ahora y luego podemos jugar con él un poco más tarde. Entonces para el color más claro, voy a bajar la obesidad a 0. Para este color más oscuro, simplemente voy a seleccionar este color. Y ahora que tenemos nuestro gradiente, obviamente podemos darle un nombre. Entonces llamémoslo Hiroshima, así. Y lo voy a mover justo debajo de nuestra imagen para que veas cómo se ve eso. Y si no te gusta y la configuración del escritorio, obviamente puedes cambiar este morboso hacia arriba. Y puedes hacer click en esta posición de ahí dentro y organizarlos como quieras. Pero si no te gusta cómo se ve este, obviamente puedes claire aquí mismo, entonces puedes reposicionar estos y no sé por qué. Me está mandando todo el camino hasta aquí por alguna razón. Pero obviamente se puede jugar con ellos y se puede dar click ahí mismo y bajar la obesidad de éste. Si piensa que es demasiado oscuro para algo como esto, mantengámoslo alrededor en un 40% así. Y creo que eso se ve mucho mejor. Todavía no me gusta esta forma aquí mismo. Entonces si hago click en mi héroe, me esconderé imagen solo para que pueda llegar a ella. Todavía no me gusta realmente cómo resultó eso. Creo que ahora es mejor. Y siempre puedes volver atrás y cambiarlo si no te gusta, y así sucesivamente. Entonces eso es básicamente todo para el héroe. Una última cosa que queremos hacer es agregar un círculo detrás de ellos. Y para agregar ese círculo, lo que voy a hacer en realidad es usar mis labios para sostener la tecla Mayús. Crea mi posición de círculo. Está en algún lugar por aquí porque quiero crear algún tipo de unidad entre los usuarios y un banco. Y la gente más joven está enfocada aquí. Entonces posicionarse por aquí. Yo lo llamaré Círculo de Héroe. Al igual que esto. Colóquelo aquí mismo. Ahora por ello, voy a quitar la frontera. Incluiré el mismo color de relleno. Y ahora vamos a jugar con el desenfoque de fondo. Por lo que voy a dar clic en mis opciones de desenfoque de fondo. Daré este 50 y le daré este 50, le daré este ocho. Y ahora lo puedes ver justo ahí de fondo, sobre todo si les quito estos. Entonces es realmente, realmente, muy tarde, pero vamos a jugar con él aún más. Entonces aquí están nuestro círculo, lo tenemos justo aquí. Lo que podemos hacer es en realidad aumentar la obesidad. Entonces dejémoslo, veamos a las diez, creo que es bueno. A lo mejor 12. Sí, estoy contento con este resultado. Ahora, lo que voy a hacer a continuación es duplicar a mi héroe BG. Por lo que hit control D. Voy a posicionarlo justo por encima de mi héroe llamado. Seleccionaré ambos, pulsa Shift Control M o Shift Command ellos en un Mac para crear una máscara. Y lo llamaré almizcle. Y lo que esto hace básicamente es enmascarar la parte inferior de nuestro héroe. Por lo que al hacer clic en el héroe, se puede ver cómo se ve eso. Obviamente puedes traer aún más esta forma de héroe si quieres simplemente dar click aquí. Pero por ahora, dejémoslo ahí. Y eso es básicamente todo. Esa es nuestra imagen de héroe completada. Si hace un clic aquí para la vista previa, se puede ver cómo se ve esa vista previa. Creo que se ve bien. Y ahora pasemos a algunas otras secciones de nuestra página web. Entonces para esta superficie, lo que vamos a hacer es que realmente voy a crear este componente principal. Y luego vamos a seguir adelante y copiarlo y pegarlo a otros componentes. Entonces lo que voy a hacer primero es que voy a copiar y pegar el texto en. Supongo. Voy a usar la copia real que voy a usar de todos modos. Y lo que voy a hacer es incluir también mi icono. Entonces voy a soltar mi ícono aquí. Y lo voy a posicionar 40 de mis textos. Por lo que 1234, voy a quitar este ícono estrella. Y también voy a convertirlo en el componente principal, que sea local. Entonces vamos a llamar a este contenido actual, así. Y lo que voy a hacer a continuación es crear básicamente dos estados. Entonces lo que vamos a hacer es usar las formas de nuestro héroe. Entonces estas tres formas, y vamos a usar un círculo. Entonces vamos a dar click en nuestro héroe. Usa, veamos dónde están. Elementos de héroe. Voy a copiar a los tres. Cierra todo esto. Haciendo zoom aquí mismo, golpea Control V. Y saltaré adentro y los seleccionaré a todos. Los posicionó en el centro para que ustedes puedan verlos mejor. Entonces lo que voy a hacer es posicionar aquí mi cruz. Por ejemplo, posicione mi línea en algún lugar por aquí. Coloca este círculo en algún lugar por aquí. Si golpeas el control D para duplicar y aumentar el tamaño de éste. Posición en algún lugar por aquí. Y lo que voy a hacer es llamarlos elementos. Duplicaré el carrito VG, lo colocaré dentro de mis elementos y justo aquí. Por lo que necesitaba ser básicamente la misma que hicimos con la anterior. Por lo que sostendré Control de Mayús M a Mascota, máscara de calidad. Y lo que voy a hacer finalmente es por todos estos elementos, sólo los haré esperar. Por lo que usaré un borde blanco para la línea de un también use borde blanco. Y por último, para la cruz, simplemente usaré cuello blanco así. Y eso es básicamente lo que voy a hacer. En primer lugar, es que los voy a posicionar aquí mismo a segundo plano. Golpear 02 veces. Y yo hice todo eso. Por lo que ahora puedo crear un botón de componentes clave de control para la tarjeta de contenido. Y voy a dar clic en nuevo estado, que es básicamente color. Perdón, necesito estado de hover, no fecha de noticias. Entonces lo llamaré flotar, así. Y al flotar, lo que voy a hacer es usar el carrito Vg y hacerlo de este color verde. Exponer mis elementos. Y pero bajaré la obesidad de ellos. Entonces vamos a ver. Por ejemplo, puedo Lord ellos hasta, veamos, no sé, 10, 20%. Entonces veamos cómo funciona eso. Creo que se ve bien. Y lo que también voy a hacer es volver a posicionarlos un poco algunos de este año y normDiS aquí tal vez incluso rotar esto un poco y posicionarse hacia arriba. También voy a usar este ícono. Y voy a ocultar mis colores sólido C donde lo, más bien están. Entonces veamos p sub t Sólo necesito ver dónde están esos colores. Aquí están. Entonces voy a Laura abajo de estos. Por lo que estos son los colores de los iconos así. Y también lo subiré. A ver, 12, no, diez píxeles. Creo que va a funcionar muy bien. Ahora para estas cuentas de personnels, no me gusta este color, así que voy a cambiarlo a color de disco. Así. Voy a cambiar una flecha aprender más ND. Y también voy a mover Arrow 20 pixeles así. Creo que eso es todo. Vamos a dejar este texto ya que es tarjetas de contenido. Entonces eso es básicamente lo mismo, volverá al estado por defecto. Se puede ver cómo se ve. Y si tocamos la vista previa, desplázate hacia abajo. Si pasamos el rato, se puede ver cómo se ve eso. Obviamente va demasiado rápido. Entonces vamos a cambiar de deuda e ir al prototipo. Y aquí mismo ya vemos que tenemos flotando o para animar está dentro, fuera. Y vamos a darle una duración de 0.06 segundos. Volver al diseño. Golpear vista previa. Perdón, sigue lanzándose en mi otra pantalla. Entonces cuando yo flote, puedes ver cómo se ve eso. Todavía no me gusta el trasfondo de esto. Entonces lo que voy a hacer ahora es volver a mi estado por defecto. Voy a duplicar tarjeta BG y llamarla color o color actual. Y lo voy a dar en este color en el estado por defecto, pero voy a bajar la obesidad al 0%. Y ahora si vamos al estado flotando, sigue ahí. Va a ser al 100%. Pero una tarjeta bg color va a ser este color. O simplemente puedo hacer clic aquí. Y lo que eso va a hacer es que nos va a permitir una transición mucho mejor. Entonces si flotamos, se puede ver lo suave que es ahora. Y se puede ver lo genial que se ve aireación. Lo que aún no me gusta es este nombre, tan cuentas personalizadas en este caso, quiero que se decolore para que no cambie el color de esa manera. Entonces voy a ir al Predeterminado Estado click aquí mismo, y voy a seleccionar este color. Y hagamos un adelanto final. Entonces, cuando te desplazas hacia abajo, puedes ver cómo se ve eso. Por lo que todo se ve bastante bonito. Ahora lo que voy a hacer a continuación es realmente duplicar esta tarjeta de contenido para que yo siga y haciendo estos elementos. Entonces, ¿cómo puedo hacer eso? Simplemente puedo hacer clic aquí, eliminar éste, dar clic aquí y eliminar éste. Y puedo crear componentes hijo adicionales. Puedo mantener mi cola antigua, clic y arrastrar para hacer una copia. Y también puedo sostener Alt y arrastrar para crear otra copia como esta. Y ahora puedo seguir adelante y cambiar estos, pero antes de hacerlo, sólo quiero pedirlos. Y se puede ver que este es componente principal y el diamante está lleno. Bueno estos dos son retenidos y los puedes ver aquí también. Y estos son componentes infantiles. Entonces lo primero es lo primero, vamos a cambiar algunos textos para que tengas que cambiar el texto en ambos componentes principales, lo siento, a bordo estado por defecto y estado estacionario. Entonces lo voy a cambiar aquí. Vuelva al estado predeterminado y haga doble clic para pegarlo. Yo también iré al estado Horace con base en ahí dentro. Y déjenme ir rápido y cambiar el texto de este turno uno. Al igual que eso. Voy a seguir adelante con la deuda basada en estado de horror en y vamos a ver, yo juguetón no lo pegué por alguna razón. Sí. Así. Se ve genial. Y por último, sólo elegiré esto para mi estado de horror. Y ahora por fin, puedo volver atrás y cambiar iconos por estos. Entonces para hacerlo una vez más, lo que puedes hacer es usar tus iconos para que pueda copiar y pegar mi icono de mi documento original aquí. Lo colocaré en su lugar. Resolver aquí mismo para que puedas ver que son 40. Eliminaré uno original y haré clic con el botón derecho. Y lo siento, no aquí, sino aquí. Haga clic derecho en hacer local. Y lo que también puedo hacer es seleccionar otro para nuestro tercero. Para que pueda abrirla. Posicionarlo en su lugar. Al igual que esto. Veamos qué tan lejos estamos eso. Seleccione estas herramientas, asegúrese de que estén alineados. Elimina el original, oro aquí atrás, haga clic derecho may Klocal. Y ahora lo que puedo hacer es jugar con ellos. Por lo que puedo dar click en este, ir al hover. Pero antes de hacerlo, puedo dar click ahí mismo y copiar mi icono. Después ve al hover. Abriendo basado en kit, posicionarlo a la misma posición. Eliminó el original, y luego ve aquí mismo y localiza mi color. Entonces déjame ver rápidamente, este es un tema con no solo este icono de vuelta, sino con la mayoría de off todos estos ítems vas a terminar usando una línea es que la gente no nombra a sus ítems como deberían. Y por eso me gusta mucho nombrar todos mis artículos. Entonces no solo yo, sino todos los demás diseñadores. Y se puede ver que en nuestros productos que vendemos en web donut.net, se puede ver que siempre tenemos o todos nuestros artículos con nombre, todas las capas impares nombradas así sucesivamente. gente pueda encontrarlos y organizarlos de una manera que quieran. Por último, lo que quiero hacer es doble clic aquí mismo, llámalo servicios a medida solo para darle una especia. Y ahora podemos golpear la vista previa, sólo a ver dónde estamos en este momento. Entonces tenemos flotando aquí, flotando aquí tenemos esta bonita forma de fondo con un círculo, linda pareja. Y se puede ver cuando empiezo a flotar, cómo se ve todo esto. Tan solo asegúrate de que tu texto esté ahí. Y funciona con esto. Entonces eso es básicamente todo para esta sección. Hemos concluido esta sección el trabajo de conocimiento en este apartado. Entonces si hacemos zoom solo un poco y puedes ver esta sección aquí. Y todo lo que quería hacer básicamente aquí es importar mi imagen. Por lo que puedo usar una imagen como esta. A lo mejor, veamos, quizá pueda hacer doble clic y colocarlo un poco a un lado. Y siempre puedes, harán clic en mantener pulsado Shift, Alt y clic izquierdo para aumentarlo. Si lo desea, puede mantener pulsada la tecla Mayús y hacer clic izquierdo para aumentarlo a un lado, cualquiera que sea el lado que desee. Y siempre se puede, como dije, Cambiar viejo y hacer clic izquierdo para aumentarlo en todos lados. Y también puedes moverlo a izquierda y derecha como quieras. Entonces para el texto en sí, déjame copiarlo. Por lo que se va a llamar festival de la semana de la juventud. Y vamos a ver, voy a dar esto aquí. Y lo último que voy a hacer es quitar este botón. Porque ahora tenemos nuestro botón aquí. Yo lo voy a traer desde aquí. O también puedes ir a la sección de héroes y usarlo desde ahí. Entonces ve a los textos, significa botón, pulsa Control C. Vuelve aquí, él controlaría V. Y puedes ver que es holdout, lo que significa que es un componente infantil. Entonces lo que voy a hacer se posiciona en 40. Asegúrate de que esto sea 40. Entonces lo que voy a hacer es simplemente posicionarme en el centro y llamarlo un día. También puedo agrupar estos texto en color. Y también puedo crear una pila solo para que más adelante pueda trabajar en esto como un responsive. Como dije, si quieres cambiarlo, solo puedes hacerlo con un solo clic. A continuación, sigamos adelante y trabajemos en estos. Entonces básicamente, estos de aquí son bastante simples y bastante similares. Todo lo que hice fue crear nuestro componente a partir de uno de ellos y luego creé otro aquí mismo. Por lo que no tienes que crear el componente si no quieres. Pero simplemente quería crear uno porque me parece que va a ser mucho más fácil de adaptar en los componentes. Y siempre se pueden crear varios estados para ese componente, para recites responsivos, por ejemplo. Entonces ahí es donde eso es muy útil. Entonces voy a volver a posicionar esto aquí mismo. Haga clic, elimine este. Y también voy a saltar aquí mismo y borrar y escritorio botón niño Control V tomó basado en nuestro botón amine, que acabamos de crear médico a los 40, así que 1234. Y lo que voy a hacer es presionar Tecla de control para crear un componente llamado Tarjeta grande. Voy a mover esto un poco hacia abajo y una grúa sobre mi imagen en primer lugar. Por lo que arrastraré y soltaré mi imagen dentro. Haga doble clic, mantenga presionada la tecla Mayús para colocarla en su lugar como este turno, los diez clic izquierdo pueden estar posicionándose aquí así. Y por último, puedo traer mi copia real dentro así. Y ahora que eso está terminado, lo que puedo hacer es simplemente sostener Alt y hacer una copia del mismo posicionado aquí mismo. Ábrelo y voy a arrastrar y soltar una nueva imagen dentro. También copiaré y pegaré texto, que va a ir ahí así. Y ahora esa etapa está terminada. Entonces si hago clic aquí, probamos todo esto. Por lo que funciona agradable y simple. Se puede ver que este efecto flotando también funciona. Esto funciona, y esto funciona. Por lo que tenemos ese mismo efecto hover en todas partes. Y por eso lo hemos creado para que podamos usarlo una y otra vez a lo largo de nuestro diseño. Entonces, por último, lo que podemos hacer es crear nuevos componentes para este último estado. Y lo que voy a hacer es saltar dentro y hacer lo mismo. Entonces voy a borrar estos. Voy a saltar aquí mismo y presionar Tecla de control para crearlo como componente. Y simplemente voy a añadir este texto aquí. Entonces vamos a ver. Lo único que realmente quiero hacer es crear un hover y mover esta flecha. Entonces, en realidad deshagamos eso. Entonces golpea Control Z. Y primero lo agreguemos, la información que tenemos justo aquí. Por lo que arrastraré y soltaré mi imagen dentro. Voy a darle un nombre de texto. Al igual que esto. Fecha puede permanecer ya que se basa desenfoque más, puede quedarse donde está. Eso es básicamente todo. Y ahora puedo seguir adelante y crear unas fincas de terror que controlarían clave en mi estado de terror, que voy a llamar hover. Obviamente, lo único que quiero hacer es básicamente mover mi flecha. Entonces turno 12k, y eso es básicamente todo. Por lo que siguiente Im va a hacer es golpear la posición Alt esta aquí. Alt posiciona esto aquí. Y ahora tenemos que editar estos para los componentes principales así como para sofá significa fecha, así como heurística de Florida como ésta. Y esto. Y aprende más porque estamos en el hover. A ver, puedo traer esto, sonando mi nueva imagen. Entonces básicamente lo que puedo hacer es seleccionar todos estos que ella controlaría. Por lo que vuelves a mi estado predeterminado, seleccionas todo y borras. Él Control-V y los posicionaría curar. Por lo que ahora cuando cambio entre mi hover y el predeterminado, airear se ve como debería. Ahora, vayamos a nuestra tercera y organizemos un poco estos. Tan disciplinado para ser tarjeta tres, auto y uno, y esto va a ser tarjeta para obviamente así. Entonces en el auto tres y llevemos esto a un estado por defecto. En la tarjeta tres. Lo que puedo hacer es cambiar esta imagen. Voy a cambiar este texto, cambiar en este texto, cambiar este texto. Y por último, en el estado de horror, primero sigamos adelante y copiemos eso. Vaya al estado predeterminado. Eliminar y pegar. Y ahora cambiaremos entre el estado de Horace y estado predeterminado la edición permanece exactamente igual. Entonces estamos en nuestro estado aquí, estado aquí. Y eso es básicamente todo. Todavía no voy a trabajar en pie de página. Yo lo voy a dejar como es por ahora porque te voy a mostrar eso un poco más tarde. Cuando realmente llegamos a estas páginas, cómo puedes trabajar en ello y cómo puedes cambiarlo. Y luego puedes crear un componente en cualquier etapa del diseño y luego volver a él y trabajar desde él. Pero por ahora, vamos a dar click en Vista previa para ver lo que hemos hecho hasta ahora. Por lo que una vez más, tenemos un login. Aquí hemos aprendido más. Tenemos efectos flotadores aquí, luciendo muy bien lentamente. Tenemos esto aquí mismo, que vamos a crear como grupo desplazable más adelante. Y dejamos la fecha aquí. Por lo que voy a volver a ello justo después de este avance. Conoce más. Entonces, ¿qué funciona bien? Como puedes ver cómo el poder es realmente agradable y dispara porque aquí no necesitamos nada de fantasía. Porque justo esta flecha se está moviendo. Una última cosa. Entonces sigamos adelante y cambiemos esa fecha. Entonces para cambiar esa fecha, lo único que quiero hacer es básicamente copiar y pegar el texto de aquí a mi fecha y hábitos lácteos. Por lo que hemos completado el diseño de nuestro sitio web. De verdad espero que les haya gustado chicos. Lo sentimos, el tutorial continuó un poco y es un video un poco más largo, pero solo quería mostrarte en tantos detalles como sea posible, lo que es posible con Adobe XD y en realidad combinó diseño y prototipado en este mismo sección. Entonces me gusta mucho hacer eso como un gol a lo largo porque creo que ustedes van a sacar el máximo valor de ello cuando lo haga al mismo tiempo. Por lo que ahí lo tenemos. Ese es nuestro diseño de sitio web completado para nuestra página de inicio. En el siguiente video, vamos a pasar a la página de cuentas, y allí nos vemos. 40. Crear diseño 2: Ahora volvamos al diseño y antes pasar a la cuenta la velocidad llega a la página siguiente, sólo quería hacer un cambio rápido aquí mismo. Entonces si selecciono mi navegación, que es mi media. Ahora, aquí mismo, puedo hacer clic en este botón aquí mismo, que dice posición fija al desplazarse, lo que básicamente significa cuando los usuarios se desplazan hacia abajo, esta navegación permanecerá fijada a esta posición. Entonces si hago clic justo aquí, entonces haga clic aquí para obtener una vista previa de mi sitio web. Se puede ver que cuando empiezo a desplazarme, mi nav se queda justo aquí en la parte superior y nada cambia. Pero cuando hago clic derecho y error. Entonces aquí, posición fija al desplazarse. Después haga clic y previsualice una vez más. Se puede ver que cuando empiece a desplazarme, mi nav se va a quedar ahí mismo. Y debido a que incluimos en este efecto de desenfoque en el fondo, se puede ver claramente qué diferencia hace eso porque simplemente muestra que con todas estas interacciones y bluer permanece básicamente igual y permanece puesto. Y se puede ver claramente que hay cierta información sobre el fondo, pero aún se pueden ver todos estos elementos de navegación. Se puede ver este botón, se puede ver claramente el logotipo y así sucesivamente y así sucesivamente. Entonces me gusta mucho cómo se ve eso. N vamos a correr con él y vamos a dejarlo como está ahí. Entonces lo siguiente que vamos a hacer aquí es que en realidad voy a dar click aquí mismo. Y voy a sostener mi vieja llave u Opción. Colocaré esta copia aquí mismo. Más con el lugar. Y siempre puedes volver aquí y ver la distancia que tienes. Entonces son 70. Por lo que podemos tener una buena distancia tanto para el diseño como para los wireframes. Entonces 70, y vamos a hacer lo mismo. Por lo que el diseño de homepage va a ser un diseño de cuentas así. Y lo primero que vamos a hacer es realmente copiar este NAV. Entonces golpea Control C y borra este, controla V, porque lo voy a usar a lo largo de mi diseño. Ahora. Lo siguiente que vamos a hacer es realmente copiar mi imagen de héroe. Por lo que golpeó Control-C. Elimina estos viejos. Controla V y lo coloca justo debajo de mi navegación principal. Y la razón por la que he hecho eso es porque ahora tenemos en esta gráfica, tenemos esta ilustración, y sólo vamos a mover nuestro texto y reemplazar la posición que estos. Entonces sigamos adelante y hagamos eso. Voy a seleccionar mi texto y posicionarlo o justo aquí. Así que sólo asegúrate de que está justo aquí. Entonces veamos 245 columnas. Y lo que voy a hacer es quitar esta imagen porque voy a traer mi nueva imagen. Y lo voy a traer a algún lugar por aquí. Aquí está. Entonces, una vez más, es de elementos invertibles. La imagen es la imagen premium. Y acabo de usar Adobe Photoshop para cortar el fondo de mi imagen. Entonces voy a posicionarlo es en algún lugar por aquí, digamos algo así. Y también voy a voltear mi máscara. Entonces en algo como esto. Entonces voy a saltar dentro y reposicionar may hero circle. Por lo que estas dos personas están en el centro de mi círculo. Entonces tal vez algo como esto. Sí, creo que esto funciona bien. También voltearé mis formas de héroe son simplemente click aquí. Y luego reposicionarlo también. Puedo más con algún lugar por aquí porque no quiero que esconda mi botón en esta etapa. También voltearé a mi héroe Elementos y los reorganizaré un poco. Entonces algo así, creo que va a funcionar bien. Haga doble clic para saltar dentro y luego simplemente haga doble clic para reubicar DES. Y también moveré mi imagen aquí mismo para que pueda agregarla estos elementos y reposicionarlos alrededor. Por fin movió este justo aquí. Y creo que eso funciona bien. Lo que voy a hacer un Por último es que voy a dar a mis textos el espacio de seis. Por lo que 1-2-3, 4-5-6 columnas. Se lo llevaré a ésta de aquí. Y luego saltaré por dentro y lo añadiré a mis ovejas. Entonces posicionaré éste aquí mismo, quizá éste de aquí. O aún mejor, simplemente puedo mover éste hacia arriba. Mueve este. A ver, tal vez aún pueda cortar total mi botón. Entonces algo así como un disco tal vez. Aquí. Basta con bajarlo un poco para que podamos evitar el texto tanto como sea posible. Y entonces puedo seguir adelante con el siguiente y simplemente una reorganizar un poquito ese. Incluso puedo hacer clic en este y volver a posicionarlo aquí. Y como dijo muchas veces, siempre se puede saltar atrás y reorganizar estas, estas formas como quieras. También podemos tal vez hacer esto. Sí, creo que eso funciona mucho mejor. Haré doble clic aquí mismo en una posición y aquí, y eso es básicamente todo para nuestra sección de héroes. Simplemente puedo cerrarlo y luego pasar a estas otras secciones. Entonces lo que voy a hacer a continuación es en realidad usado algunos iconos aquí mismo. Entonces puedes ver eso porque empieza a contabilizar una cuenta, Melanie, y así sucesivamente, así sucesivamente. Entonces saltaré a mi abrir tu cuenta, o llamemos a esta sección cuentas porque va a contener cuentas diferentes. Por lo que sólo voy a saltar por dentro y pegar mi secuencia en Ocurrido AR. Y yo sólo voy a posicionarlos hacia abajo. Entonces la carne aquí mismo con estos iconos de fondo, veamos 1234. A lo mejor. Vamos a ver tal vez tú en solo un poco más de neumonía. Y 40 píxeles arriba. Creo que eso funciona bien. Y luego lo que voy a hacer como siempre hago, simplemente salta de nuevo a sus activos y queremos hacer todos estos y solo nuestro componente local. Por lo que MC, local, local, simple clic derecho y haga clic en Hacer Local, saltar hacia atrás. Y, y ahora los voy a incluir en sus lugares. Entonces para todos y cada uno de estos, quiero ponerlo en su propio lugar. Entonces, vamos a ver. Tenemos esta cuenta Start. Lo colocaré aquí mismo y quitaré el ícono estrella para una cuenta. Lo pondré aquí y haré lo mismo. Cuenta milenaria puso una cura, casi ésta. Y por último, cuenta premium y borró ésta. Una vez más, todos estos iconos son de elementos invertibles. Ahora voy a incluir de nuevo mi color sólo para que puedas ver cómo se ve este. Y lo que voy a hacer es realmente crear el componente principal. Y voy a duplicar esta sección de información y ponerla dentro de todas estas. Entonces hagámoslo ahora. Voy a hacer cuatro copias en total. Y voy a abrir mi cuenta Start y arrastrar y posicionar esto en. Y vamos a ver, voy a llamar a este selector uno, a este fondo. Y voy a renombrar a todos ellos. Entonces no tenemos este sindicato. ¿ Sabemos qué? Lo es. Simplemente haga doble clic y basado en su nombre allí. Entonces ahora que tenemos esta sección de información, en realidad puedo ocultarla por completo. Arrastraré y posicionaré otra intersección a la cuenta extranjera. Arrastra y posiciona otro a mi cuenta milenaria. Y finalmente en drag y una reposicion esto a mi cuenta premium. Ahora mostraré mi cuenta Start. Y en realidad voy a empezar por incluir aquí la información real. Entonces hagamos doble clic en el interior y en la posición, todos estos así. Y también saltaré dentro de aquí y saltaré dentro de mi texto. Control-c en botón Dominio. Haga clic aquí. Por lo que cerraré mi icono y pincharé en la posición Mi Info allí. Y veamos de qué se trata. Botón medio, mantén pulsado el turno y la flecha hacia abajo para que puedas moverlo hacia abajo en una posición como esta. Lo colocaré ahí mismo y veamos. Entonces estamos a los 40, lo cual está bien. Y simplemente borraré éste. Y voy a cambiar este texto para aplicarlo así. Y voy a hacer doble clic, golpear el control C para copiar este texto. Porque cuando me cambio a flotar, se puede ver todavía dice Aprender más. Por lo que necesito cambiarlo para solicitar ahora para esta instancia en particular. Entonces una vez más, si te llevo de vuelta aquí puedes ver Maine y botón original aún dice aprender más. Y todas estas instancias aún dicen aprender más. Pero aquí dice aplicado. Ahora. Ahora una vez más, esta página real va a ser bastante fácil porque como dije en la sesión de wireframing, lo vamos a agregar, solo desbarató esta parte media y esto, y esto va a seguir siendo igual. Pero finalmente vamos a empezar con el pie de página porque ahora tenemos nuestras cuentas y te voy a mostrar cómo puedes editar al pie de página y hacer los cambios para reflexionar a lo largo de tu diseño. Entonces, empecemos con esto. Como dije, tenemos un botón principal del brazo, tenemos terminado el estado de horror. Entonces sólo voy a hacer el control C para copiarlo. Voy a esconderme, empieza a contar. Mostrar cuenta extranjera salto dentro info hit Control V va a estar exactamente en la misma ubicación. Simplemente vuelve a cambiarlo. Si comprobamos, se puede ver que está alineado a la izquierda a la cuadrícula y están a 40 píxeles de la disciplina. Ocultarse para una cuenta, abrir cuenta millennial, ir a la info y hacer lo mismo. Entonces una vez más estamos a los 40, pero simplemente posicionando y bajando. Y por último, hagamos lo mismo con una cuenta premium. Entonces borra este control V. Vamos a revisar. Y siempre hago estos cheques solo para asegurarme de que cuando empiezo a trabajar, todo se vea bien y limpio y todo funcione como debería. Ahora saltemos dentro de esta imagen y arrastraré y soltaré mi imagen dentro en posición a su gusto. Entonces haré doble clic Hall mi tecla de turno, mi tecla alt solo para aumentar un poco a este tipo viejo, posicionarlo en el centro, algo así. Y básicamente eso es todo para la cuenta Start. Antes de pasar a diferentes secciones de esto, simplemente cambiemos este texto. Entonces se va a decir Abre tu perfecto, así. Entonces sólo vamos a darle un poco más de, vamos a ver, sensación diferente. Por lo que se ve un poco más amigable de esta manera que simplemente abrir tu cuenta. Se parece a la orden. Entonces vayamos a la cuenta extranjera y cambiemos su nombre también. Entonces voy a hacer doble clic aquí mismo. Esto tenemos aplicar ahora cubiertas, lo cual está bien. Y voy a hacer doble clic dentro de mi archivo principal, copiar y pegar esta información en. También arrastraré y soltaré mi imagen dentro. Y vamos a ver. Creo que eso está bien, pero siempre pueden aumentarlo un poco así, solo para que estos chicos se centren más. Entonces ahora que eso está terminado, puedo ocultar esta sección y siempre puedo ir a la sección millennial, abrir eso. Y vamos a ver. Ahora puedo bien y copiar y pegar mi información original. Haré lo mismo por el texto. Simplemente arrastraré y soltaré mi imagen dentro así. Y siempre puedo hacer doble clic y ampliar esta imagen sólo un poco, sólo para que podamos ponerla en foco un poco mejor así. Y en lugar de cuenta de inicio, debería decir cuenta milenaria, así. Y vamos a ver. Tengo que cambiar también este texto, por lo que escribe, se corresponde mejor con esta cuenta real. De acuerdo, así que ahora que he pegado ese texto, déjame rápidamente sólo consultar con a cuenta extranjera. No sé qué pasó realmente, pero obviamente hay algún problema aquí mismo. Por lo que rápidamente acercaré y reescribiré todo esto porque está usando el mismo texto para el inicio. El conteo. Como puedes ver, el texto no cambia aquí mismo. Entonces pausaré el video o aquí realmente rápido y luego volveré a escribir todo eso. De acuerdo, y ahora que he terminado, papá, déjame volver y revisar estos otros. Por lo que tenemos nuevo banco empezar a contar para una cuenta, cuenta millennials. Y por último, tratemos con esta cuenta premium. Entonces, vamos a ver. Todo lo que necesitamos aquí mismo es escribir paquete premium. Entonces lo que voy a usar es más premium, así que especie de la imagen. Entonces en estas dos personas son básicamente jóvenes empresarios que creo que eso funciona bien. Y primero lo primero, necesitaré dejarme consultar rápidamente con todos estos curadores. Tan net, uh, ahora que he copiado y ese texto, lo que tenemos que hacer es básicamente crear un componente. Entonces saltemos adelante y empecemos con este primero. Por lo que voy a crear un componente para ello aquí. Y la primera cuenta que se va a mostrar es empezar a contar porque esa es su cuenta básica y se va a mostrar y como opción predeterminada, si quieres, para las personas que apenas vienen a este banco. Por lo que voy a presionar Tecla Control. Y este va a ser nuestro estado por defecto. Y dentro del estado por defecto, hagamos rápidamente algo diferente. Por lo que en realidad voy más estado predeterminado ocultar toda esta información a continuación. Entonces lo que puedes hacer rápidamente es abrir todas las carpetas, elegir información de todas ellas. De esta manera, usando tu llave de control y simplemente Laura duplicidad hacia abajo. Y este es básicamente nuestro estado por defecto. Está cerca de esto. Ahora agreguemos otro estado. Y esto se va a llamar Start account. Por lo que solo estoy creando este estado por defecto. Se puede ver que tenemos este espacio vacío y obviamente codificar pregunta tranquila va a estar aquí mismo. Entonces si les muestro que esto va a ser como en código. Y luego cuando los usuarios hacen clic. Por ejemplo, en la cuenta de inicio, que es con lo que estamos tratando en este momento, información para la cuenta de almacenamiento va a mostrar así y esta información de fondo va a ser empujada hacia abajo. Ahora porque esta cuenta está realmente seleccionada. Juguemos con el ícono. Por lo que tengo color y he delineado. Por lo que simplemente bajaré la obesidad de mi color para indicar que se hace clic en esto. Entonces simplemente bajaste la obesidad así. Ahora que lo hemos completado, podemos pasar a la cuenta extranjera. Así que haga clic aquí, nuevo estado recuento de flúor. Y básicamente vamos a hacer lo mismo. Por lo que salta dentro del arranque el conteo. Vamos a traer el color de vuelta. Vamos a ocultar la información del disco. Vamos a ir a la cuenta extranjera. Alto el color de la misma y mostrar D para cerrar todo esto. En otro estado. A esto se le va a llamar conteo milenario. Y básicamente se ve lo que viene. Básicamente vamos a hacer lo mismo aquí también. Entonces esconde esto, muéstralo, vuelve a tu cuenta 400. Muéstrale esto, y oculte esto. Y por último, vamos a crear uno para el paquete premium también. Al igual que esto. Y saltaré dentro de la cuenta millennial. Mostraré esta altura, esta altura, esto. Y por fin voy a mostrar esto. Y eso es básicamente todo. Ahora lo que podemos hacer es en realidad tocar entre ellos para que podamos animarlos. Entonces en el estado por defecto, lo que necesitamos hacer es realmente usar en esto, que es nuestro selector como selector de medias. Entonces vamos a prototiparlo. Simplemente haga clic en su pestaña de prototipos, haga doble clic en el interior para elegir el selector, luego simplemente haga clic. Y lo que vamos a usar un paso. Vamos a usar Auto animate. Vamos a usar está dentro, fuera y usemos 0.4 segundos. Creo que eso funciona bien. Entonces si te llevo de vuelta una vez más, puedes ver que estamos en estado por defecto. Por lo que en este estado, aún no se abre nada. Entonces una vez más, no se abre nada, todo está cerrado. Y si recuerdas, mencioné que codificar, esta sección de preguntas comunes va a volver a la cima. Y va a estar en algún lugar por aquí. Pero porque no podemos demostrar eso por el momento en Adobe XD, porque todavía no puede estar en vivo, digamos entonces podemos hacer algo como esto. Por lo que te mostraré dentro del diseño, la primera cuenta que se va a abrir y mostrar es iniciar el conteo siempre. Entonces volvamos al prototipado. Como ya he dicho, hemos seleccionado esto. Por lo que una vez más, estamos en estado predeterminado. Entonces haré doble clic aquí mismo, toque o para animar fácil y salir 0.4 segundos. Y se puede elegir el destino, que nos va a llevar al estado, que es la cuenta de inicio. Y lo conseguirás como un gol a lo largo. Así que haga doble clic aquí. Click va a tener toda la misma información. Por lo que toca auto enemigos, fácil, no 0.4. y en este caso, vamos a ir a cuenta extranjera. Cierra este click. Vamos a ir a la cuenta Millennial. Y finalmente click, vas a ir al paquete premium. Ahora tenemos que hacer lo mismo pero con cuenta de inicio. Por lo que notarás que se abre la cuenta de inicio. Entonces lo que tenemos que hacer es dar click en conteo foráneo y básicamente hacer lo mismo. Adobe XD va a mantener todos estos ajustes, así que no te preocupes por ellos. Lo único que realmente tienes que hacer es simplemente hacer click entre todos estos. Y una vez más, porque estoy hablando, me está tomando mucho más tiempo del que debería. Pero cuando no estás hablando, cuando estás enfocado, esto solo lleva unos segundos. Entonces inicia cuenta. Esta va a ser la cuenta milenaria. Va a ser paquete Premium, así. Y por último, voy a cerrar todos estos. Estamos en cuenta extranjera. Haga clic en el millennial, haga lo mismo. Por lo que empieza prima extranjera. Voy a cerrar todos estos abajo. Y por último, estamos en paquete premium. Esto va a ser de inicio extranjero. Y finalmente milenario y lechería. De qué manera, lo hemos completado. Puedes volver atrás y ver la marca de tiempo, pero no creo que me tomara más que como un minuto o dos. Entonces como dije, vamos a empezar con la cuenta de inicio. Entonces esto es lo que se va a mostrar al principio. Y si te llevo de vuelta a la vista previa, haz click aquí. Cuando se abra, déjame traerlo aquí. Una vez más, tenemos estos efectos de flotación cuando empezamos a desplazarnos, esta navegación se desplaza con nosotros. Y aquí lo tenemos. Por lo que tenemos nuestro inicio para contar para una cuenta millennial y premium. Al hacer clic en extranjero, Se puede ver que cambia y cambia entre todos estos. Y se puede ver lo bonita y sutil que es esta transición entre iconos de colores y los que no tienen ningún color en ellos. Entonces como dije, vamos a mantener el inicio el conteo, y se puede saltar entre ellos. Entonces de principio a prima y así sucesivamente. Y se puede ver que esto cambia muy bien aplicando nuestros trabajos, pero aquí no funciona. Por lo que no funciona en estos estados internos. Realmente no sé cuál es el caso. También me puse en contacto con el soporte de XD. Por lo que se puede ver en esta primera funciona, pero en estas adicionales, no funciona. Entonces si saben cuál es el tema, avísame y haré una actualización o si averiguo el tema, haré una actualización también y les haré saber qué pueden hacer para arreglarlo. Por lo que funciona en todos los estados. A lo mejor tengo que crear múltiples componentes de este botón. De verdad no lo sé. Pero dejémoslo así porque en este primero, funciona y se puede demostrar que a reclinado abajo que tenemos preguntas comunes. Y por último, volvamos a nuestra cuenta. Entonces ahora que conocemos los nombres que conocemos empiezan extranjeros, millennial, y premium, podemos saltar a este primero. Haga doble clic aquí. Así que llámalo inicio. Y veamos, tal vez yo pueda. Sí, vamos a darle un nombre de conteo de inicio. Esto va a ser extranjero. Esto va a ser milenario. Y esto va a ser Premium así. Y ahora que lo he completado, lo que podemos hacer es presionar Tecla de control para crear un componente. Y ahora lo que podemos hacer es simplemente eliminar este. Haga clic en este Control-C, Control-V. Y puedes hacer click aquí para posicionarlo en posición. Y ahora cada vez que lo agregues, esta primera, que es el componente original, Va a reflexionar aquí también. Entonces si te llevo de vuelta a nuestros préstamos, aquí están. Se puede ver que tenemos y conseguimos un efectivo rápido, compramos un auto, compramos una casa, refinanciamos mi deuda. Entonces una vez más, este segundo es, se puede ver que está completamente vacío. Entonces si vamos al componente principal de nuestro pie de página y salto adentro, puedo ir aquí mismo, copiar estos. Entonces golpea Control-C, Control-V, y posiciónalos en línea con nuestros préstamos. Al igual que este grupo, todos ellos. Lo que voy a hacer es hacer doble clic aquí y conseguir un efectivo rápido. Este va a ser Viacom y comprar una casa. Y que encuentre dept. Así que Darío lo. Y ahora si te llevo de vuelta a aquí, puedes ver que tenemos esa misma sección. Entonces esa es la magia de los componentes. Así de poderosas son. Y para demostrarlo aún más, te puedo llevar de vuelta a aquí, que es nuestro botón original, si te acuerdas. Entonces, por ejemplo, si opto por, por la razón que sea, cambiar este color a rojo, puedes verlo actualizado no solo aquí, sino en todos estos botones adicionales. También puedo aumentar el radio de esquina a 60, por ejemplo. Y se puede ver que aplicó ese mismo cambio a través de todos mis botones. Entonces esa es realmente la magia de estos componentes y la magia de Adobe XD. Y realmente me gusta trabajar así, parece la misma historia para el pie de página, por ejemplo. Entonces si opto por cambiar el color, puedes ver que se va a actualizar a lo largo de nuestro diseño. Gran cosa de este pie de página. Si opta por usarlo como componente. Lo mismo aquí para la navegación y es parar ahora y así sucesivamente, es que siempre se pueden crear estados de componentes adicionales para el diseño responsive. Y te voy a mostrar eso más adelante cuando lleguemos realmente a la sección de diseño responsive. Entonces eso es genial. Simplemente puedes hacer clic y se aplicará ese cambio en todos esos estados y a través del techo, diseño responsive organizar. Pero eso es todo para este video. Te veré en la próxima cuando vamos a seguir con nuestro diseño. 41. Crear diseño 3 3: Pasemos ahora a la página siguiente. Y la siguiente página aquí mismo son los préstamos. Entonces yo voy a hacer lo mismo. Entonces toda mi vieja Q y arrástrela hacia abajo. Estamos a los 70 aquí también. ¿ A esto le vamos a llamar diseño de pulmones? Y creo que me olvidé de mostrarte en el video anterior, es porque esta es la página de cuentas. Vamos a seleccionar la cuenta. Y ahora lo que podemos hacer es usar este hit Control-C, da click aquí. O en realidad aún mejor, podemos seleccionar ambos. Así que ahora puede y héroe Control-C, haga clic, haga clic, elimine estos dos Control-V posicionados en su lugar. Más muelle ahora en la parte superior y puede ahora aquí mismo va a mostrar pertenece. Entonces aquí lo tenemos. Y ahora sólo cosa que vamos a cambiar realmente donde aquí están el texto y la imagen. Entonces voy a borrar nuestra imagen, y voy a arrastrar y soltar mi imagen dentro de aquí. Aquí está. Y mantendré pulsada Mayús Alt y haga clic izquierdo en mi ratón para destetarlo de manera uniforme. Colóquelo hasta debajo de una línea como esta, C así. Y puedo posicionar esto para ser un derecho aquí. Y puedes jugar con estos elementos. Puedes reposicionarlos. Yo puedo, por ejemplo, rotar esto, ellos pueden mover esto hacia arriba. Yo puedo voltear adisgusto. Entonces muévelo justo afuera. Y ahí lo tenemos. Entonces ahora volvamos atrás y empecemos por cambiar el texto en sí. Por lo que haré doble clic en el interior. Haré doble clic dentro de aquí, cambiaré este texto y lo llamaré un día. Esa es nuestra imagen de héroe completada. Y esa es la ventaja de tener D's ya hechas secciones. Y luego puedo saltar por dentro y retocar mi imagen o solo un poco, por ejemplo, puedo moverla aquí mismo. Si quiero posicionarlo solo un poco diferente alrededor de este círculo, tal vez pueda poner esto aquí. Incluso puedes cambiar estas formas si quieres, pero solo voy a dejarlo así. Entonces lo siguiente que vamos a hacer es cambiar estos. Y esto básicamente va a ser exactamente la misma sección y exactamente la misma configuración que ésta. Entonces voy a saltar aquí mismo y voy a elegir estos iconos y pegarlos dentro. Entonces voy a saltar aquí mismo, hacer doble clic, y con base aquí, lo basaré exactamente en la misma posición. Y yo globo ocular muertes igual de bien como lo hizo con la anterior. Entonces en algún lugar por aquí, 123440 píxeles arriba y denso, básicamente saltando justo aquí. Voy a hacer clic derecho, hacer local, ME Klocal, hacer local, y finalmente hacer mermelada local de vuelta. Y lo que voy a hacer es básicamente lo mismo que hice con el anterior. Abriré todas estas carpetas y arrastraré y soltaré el ícono Muy debería ser y simplemente eliminaré el titular del lugar de inicio. Al igual que esto. Entonces biochar y comprar una casa. Y por último, refinanciar mi cuello. Ahora lo que también voy a hacer es llamar a este selector. Entonces como lo hice con el anterior, voy a golpear el control D, mover info adentro, cerrarlo también llamado a este selector. Control D pasar a info dentro, como así. Y finalmente en este primero, más profundo conocimiento de la información original. Pero voy a hacer lo siguiente es en realidad empezar con algunos cambios aquí mismo. Y quiero crear todo como lo hacía antes. Entonces si recuerdas, primero hicimos todo el diseño, toda la información y luego creamos componentes o para los préstamos y así sucesivamente. Entonces saltaré por dentro y empezaré desde aquí. Por lo que bajaré la obesidad de todos estos y empezaré con mi dinero rápido. Entonces lo que voy a hacer es arrastrar y soltar mi visión de imagen para mí dinero rápido como ese. Entonces lo que tenemos es la herida en 30 minutos. Y simplemente copiaré este texto aquí. Y yo haré lo mismo por estos son los campos de texto. Basta con incluir la información que el cliente me ha proporcionado. Y siempre puedes obtener esta información básicamente porque la estás obteniendo de tu cliente. Y el cliente siempre tiene, al menos en esta información. Ahora que lo hemos hecho, deja que más quieran comprar un auto así. Y hacemos biochar, básicamente va a ser lo mismo una vez más, pero vamos a tener alguna información adicional incluida, así como iconos de ancho. Por lo que estos iconos básicamente van a ser un poco diferentes a estos. Entonces para nosotros, saltemos adentro y cambiemos realmente este texto. Entonces en este primer texto va a ser así. Por lo que una amplia gama de coros, documentación mínima va a batir en el mismo. Yo sólo voy a cambiar en esta circunstancia. Y por último, tenemos este último texto, como la deuda. Y ahora tengo dos iconos que voy a copiar y pegar dentro. Entonces los voy a pegar aquí mismo. Voy a saltar atrás, hacer clic derecho, hacer local, hacer clic derecho, hacer local. Vuelve a mi panel de capas. Y voy a posicionar este primer ícono todo el camino hasta la cima. Y o posicionarlo aquí mismo en lugar de este icono de cronómetro, borrar y mi icono de cronómetro. Cerraré esto por un momento. La documentación va a ser la misma y este ícono ecológico simplemente va a ir a la posición de discípulo. Al igual que así. Elimina el icono anterior y eso es básicamente todo. El único que nos queda hacer aquí mismo es incluir una nueva imagen. Arrastraré y soltaré mi imagen, atreveré. Y simplemente lo moveré y tal vez lo realzaré solo un poquito de tamaño. Por lo que necesitas ver esto acoplado eligiendo un auto básicamente. Entonces ese es el punto completo de este apartado. Y por último, vamos a cambiar esta sección en la parte inferior. Porque como decían en video anterior donde trabajamos en wireframe, obviamente va a verse un poco diferente. Para un préstamo para comprar un auto, para comprar una casa, o para obtener un efectivo rápido. Lo que también vamos a hacer es saltar dentro de todos ellos y cambiar, cambiar el botón. Entonces lo que voy a hacer es quizá dar click en este. Elige este botón. Podría usar éste, pero lo que sea, puedo cambiar esto. Así que salta dentro de mi info y consigue una respuesta. Saltó. Por lo que aquí mismo, clic en el Postúlate Ahora posicionarlo en un lugar como este. Y voy a quitar esto y cambiarlo para aplicarlo ahora. Ya está en aplicar ahora. Entonces dejémoslo ahí. Estamos a los 74, el espaciado en este tiempo, pero no importa. Se ve bien de todos modos. Y de esta sección hacia abajo seguimos en 150, así que eso también está bien. Control C para copiarlo y ocultarlo. Ir a esta sección info, obtener el control de respuesta V para pegarlo en su lugar. Entonces vamos a ver, estamos a los 70 aquí también. Voy a borrar el viejo, simplemente reemplazarlo aquí. Y sigamos adelante y editamos. Todos estos otros. Ver eliminar este 170, escóndelo y haga clic aquí. Posición en 70 y casi, y este último también. Entonces revisemos una vez más. Entonces tenemos el mismo día o respuesta. Pagar un auto. Tenemos respuesta en 20 minutos para un flujo de efectivo. Y ahora podemos seguir adelante y trabajar en comprar una casa. Entonces hagámoslo ahora. Entonces lo que puedo hacer con eso en realidad es que puedo incluir el texto justo aquí en la parte superior, o simplemente puedo dejarlo así. A ver. Sí, dejémoslo así. Porque vamos a tener este texto aquí mismo. Y este primero va a escribir, vamos a ver, por la casa de tus sueños, así, la documentación mínima va a permanecer igual. Pero sólo esto va a cambiar. Completamente en línea y vamos a cambiar esto aquí mismo. Entonces lo único que vamos a cambiar es que tenemos un ícono aquí para el hogar. Entonces cambiemos el nombre de esto para comprar la casa de tus sueños. En lugar del icono del cronómetro, o posiciona esta posición del icono de Inicio en aquí. Y estos son grandes iconos delgados. Entonces, dondequiera que veas estos iconos, son gran icono stand. Y dondequiera que veas iconos en color, son de solo ícono y elementos vitales. Entonces antes de que queramos escuchar, solo quiero hacer un cambio rápido aquí también, los nombres de las carpetas. Tan amplia gama de autos, documentación, mismo. Y aquí vamos a escribir así. De acuerdo, entonces ahora que eso está terminado, volvamos a comprar una casa. Hemos cambiado el texto y lo único que nos queda por hacer es la imagen misma. Entonces veamos, arrástrelo y soltarlo dentro. Entonces tenemos un agente inmobiliario y tenemos una pareja comprando una casa. Se ve realmente bonito. Posicionarlo en policías así. Redes, bien. Y ahora esta sección está terminada. Podemos pasar ahora por fin, a este último que es refinanciar mi profundidad. Y déjame enseguida y saltando sitio y agregar mi imagen. Voy a mover un disco acoplado. Entonces en algún lugar por aquí. O quizás incluso un poco más, algo así. Y ahora sigamos adelante y veamos cómo va a quedar eso con nuestra información agregada. Entonces, vamos a ver. Vamos a llamar a esto un poco diferente y le vamos a dar algunos otros iconos así como texto. Por lo que el cálculo en 20 minutos. A ver. La documentación se va a quedar en la misma. Yo sólo voy a cambiar este texto completamente en línea y vamos a cambiar esto a aquí. Ahora lo que acabo de notar es que estoy usando un texto ficticio para este primero. Vamos a ver aquí rápido, lo cambiamos, eso está bien. Entonces sigamos adelante y ahora volvamos a encender esto. Al igual que así. Y cambiemos este primer ícono. Por lo que el cálculo en 20 minutos. Vamos a cambiarlo. Control VP sentarse. Tenemos este bonito icono de calculadora. Y se puede ver el poder de los conjuntos de iconos. Porque todos estos iconos pertenecen juntos. Básicamente, todos lucen el mismo trato de estilo tenía el mismo grosor de las líneas. Por lo que todos funcionan bien con este diseño. Por último, solo voy a cambiar el nombre de esto para calcular la eliminación en 20 minutos. Y eso es básicamente todo. Esta sección ya está terminada. O finalmente, ha cambiado el texto de abajo para obtener una respuesta en 20 minutos. Cambiemos el texto aquí también. Mi papá y yo creo que me olvidé de cambiar y que por un comprar una casa, comprar un auto. Nosotros lo cambiamos. Y comprar casa. Sí. Entonces tenemos que cambiar de deuda ahora. Entonces, vamos a ver. En este caso vamos a tener respuesta rápida hoy. Demasiados clics para saltar dentro. Al igual que esto. Entonces hoy responde, y eso es básicamente todo. Ya hemos completado todas nuestras secciones. Entonces, finalmente, lo que vamos a hacer es crear nuestros componentes. Entonces lo que voy a hacer aquí es por este primer componente, vamos a golpear Control K. Una vez más, igual que aquí. Si recuerdas, esta sección inferior con preguntas comunes se va a mover justo aquí a la parte superior porque toda esta información se va a ocultar en estado predeterminado. Entonces vamos a abrir la edición y ocultar toda la información. Haga doble clic sobre mí 0 clave o simplemente puede Señor obesidad hasta 0. Cerraré todas las carpetas. Empieza por crear un nuevo estado, que va a ser conseguir una racha rápida como esa en la caché de la CPU getter, lo que vamos a hacer es cambiar el icono, canción va a ocultar el color. Y éste también. Voy a mostrar mi info. Y eso es básicamente todo. Pasemos ahora y creemos otro estado que va a ser biochar. En biochar, vamos a volver a efectivo rápido. Vamos a traer el color de vuelta así. Voy a ocultar esta información. Acude a comprar un auto. Altura, esta altura, este color también. Vuelve y te mostraré mi info aquí mismo. Ahora, sigamos adelante y cerramos esto. Puedo crear un nuevo estado. Llamaré a este estado y compraré una casa. Y en ello, volvamos a comprar un auto. Vamos a traer todo esto de vuelta. Entonces traeré de vuelta este color, este color. Cierra todo, esconde este pecaminoso. Mostró esta info. Y por último, vamos a ver. Ocultar este color, haga doble clic para ocultar este color. Eso es todo. Y por último, vamos a seguir adelante y crear un nuevo estado para un refinanciar mi profundidad, así, y hacer lo mismo básicamente. Entonces abre esto. A ver. Voy a ocultar esta información. Y voy a mostrar color de nuevo en ambos para que financiara mi deuda. Y voy a esconder descolorida ocultar este color. A ver si lo hice. Yo lo hice. Y finalmente mostrar mi info. Entonces eso es básicamente todo para el proceso de creación. Ahora viene la parte divertida una vez más. Y vamos a saltar al modo prototipado. En el estado por defecto, vamos a hacer un selector. Y si te preguntas por qué seguimos haciendo este selector en el estado predeterminado es mostrar a clientes y a los desarrolladores cómo va a quedar todo esto una vez que esté en estado predeterminado. puedas mostrarles que todos estos iconos tienen color como puedes ver. Y puedes mostrarles que esta sección inferior con las preguntas y pie de página va a venir justo aquí a la parte superior. Entonces, empecemos. Entonces como dije, estamos en un estado por defecto. Voy a hacer doble clic aquí mismo. Haga clic como puedes ver, Adobe XD guardó toda nuestra configuración de la pestaña de sierra anterior o para animar fácil. Ahora 0.4. lo cual es importante para la consistencia porque quieres mostrárselo a tus clientes y a los desarrolladores y a los miembros de tu equipo. Por ejemplo, solo un cuán consistente esta entidad de sitio web IS estás usando la misma animación, lo que va a reducir el tiempo que el desarrollador necesita para desarrollar este diseño al final del día. Por lo que voy a elegir obtener rápido gash requerido aquí. Compra un auto, compra una casa, y finalmente, refinalizó mi deuda. Voy a cerrar todas estas carpetas. Si te preguntas por qué estoy causando carpetas, es porque eso me gusta. Yo quiero que las cosas se vean bien y limpias y o bien quería distraerme litro. Entonces esto va a ser comprando un auto. Si estás oyendo algunos golpes por fuera, es sólo alguien preparándose bien para el invierno. Perdón si puedes oír eso, pero yo realmente no. No puedo hacer nada al respecto. Por lo que sólo traté de ignorarlo. Consigue un corte rápido. Por lo que una vez más, consigue un efectivo rápido vía casa. Y por último, hemos refinado mi profundidad porque elegí tener mi oficina fuera de la ciudad. Entonces, en lugar de autos corriendo afuera, se puede escuchar algo así. Consigue un efectivo rápido. Pero al menos el aire es más limpio y es mucho más silencioso la mayor parte del tiempo. Volvamos a nuestra ropa de diseño, todo eso. Y finalmente estamos en refinados, yacen muertos. Entonces voy a elegir esto, conseguir un efectivo rápido va a ser biochar y comprar una casa. Y lo llamamos un día. Ahora que sabes trabajar con todos estos, como puedes ver, es mucho más rápido. Nuevamente, el estado por defecto que vas a mostrar no es el estado por defecto, sino obtener un efectivo rápido. Entonces el primero que se selecciona, y eso es básicamente todo. Puedo volver a mi vista previa de kit de diseño solo para ver cómo se ve eso. Agrandarlo, ir a pantalla completa. Cuando se inicia el desplazamiento, se puede ver que tenemos préstamos seleccionados. Todo se ve bonito y limpio. Y cuando empieza a desplazarse hacia abajo, se puede ver esta sección muy bien. Entonces cuando hago clic entre ellos, se puede ver que esta información cambia muy bien. Y aún tenemos esta animación bonita y estas transiciones entre nuestros iconos. Una vez más, nuestro primero funciona, pero si hago clic en el biochar, se puede ver el efecto flotante no funciona aquí también. Entonces una vez más, si todo el mundo sabe, cuál es la razón de eso, házmelo saber y con gusto lo arreglaré. Ahora, tenemos que adaptar esto para que tengamos préstamos en tarjetas. Entonces sigamos adelante y peguemos el original en. Siempre puedo hacer esto para poder golpear el control C en esta copia del original, posicionarlo hacia abajo, volver a cambiarlo. Y ahora que sabemos cuáles de estos están incluidos. Por lo que sabemos que tenemos estos pulmones y los hemos incluido. Eso es básicamente todo. En el siguiente video, voy a mostrar tarjetas y aquí también vamos a incluir dos cartas. Pero como pueden ver, ya lo hemos terminado. Entonces tengo tarjetas de crédito, tarjetas débito, tarjetas personalizadas, y tarjetas de regalo. Quizás por las tarjetas personalizadas. Nosotros aquí donde dice crear los tuyos propios. No llenamos eso, pero aún tenemos tarjetas de regalo y así sucesivamente. Entonces eso es básicamente todo para este video. Como dije en la siguiente, vamos a jugar con estas cartas. Te voy a mostrar algunas animaciones avanzadas. Y vamos a terminar esa página también. Entonces te veré ahí. 42. Crear diseño 4: Muy bien, así que empecemos ahora con las cartas. Y esta va a ser la más complicada porque en realidad vamos a incluir aquí algunas animaciones en todas estas y en esta. Entonces, empecemos. Te voy a mostrar todo eso simplemente caer alt y son lo mismo que hicimos para todos estos otros, son 70 justo aquí. Van a hacer cartas cortadas, nueve aquí, así. También voy a hacer lo mismo que antes. Entonces copia esto, borra estos dos. Entonces uso a mis hombres ahora héroe podría controlar V para pegarlos en mi media, ahora, los movió para nosotros abajo arriba. Ahora, mi principal nav elige tarjetas obviamente. Y aquí, empecemos con la edición. Entonces lo primero que voy a hacer es condimentar un poco las cosas. Por lo que cambiaré de lugar por el círculo y 4dx lo hace. También voy a rotar un poco, y voy a rotar este también para que me guste esta posición para resolver por aquí. Entonces seguiré adelante e incluiré mi imagen. Entonces arrastraremos y soltaremos mi imagen dentro. Una vez más, la imagen es de elementos vitales y acabo de seguir adelante y usé Photoshop para cortar el fondo de esta jovencita. Vi posición en algún lugar por aquí. Entonces mira mi héroe, BG, mi posición de imagen en atreve, mueve mi imagen, atrévete a quitar mi vieja imagen y usa mi nueva imagen para posicionarla. Está en algún lugar del centro de mi círculo. En algún lugar por aquí o dos. Creo que va a funcionar muy bien. En nota, empecemos con la edición del texto. Entonces haré doble clic, cambiaré el texto aquí, cambiaré el texto aquí también, y no estás perdiendo la muerte. Todavía estamos usando stack, que va a llamar viene muy útil más tarde cuando realmente lleguemos a la parte receptiva de este diseño. Ahora que eso está terminado, puedo pasar rápidamente a la segunda sección porque ya hemos completado esta parte de nuestro diseño. Lo que en realidad voy a hacer aquí mismo es saltar a esta parte de mi diseño. Usa mi círculo BG. Y en realidad voy a usar en este color. Y vamos a ver. Entonces puedo bajar la obesidad, por ejemplo. O incluso puedo hacer uno mejor. Elige un desenfoque de fondo y luego ve con 5050. Y luego ocho en ingenio y perdón, en obesidad. ¿ Y eso qué va a hacer? ¿ Va a traer sólo un poco de diferenciación entre la carta, el círculo, y todos estos otros elementos. Entonces creo que eso va a funcionar bien. Checkpoint anti-héroe, forma de héroes. Eso está bien. Máscara está abajo. De acuerdo, así que ahora sigamos adelante y pasemos a nuestro carrito. Entonces para hacer eso, necesitaré un logotipo aquí mismo. Necesitaré nuestro logotipo Visa y MasterCard aquí mismo de una necesidad algunos números, algún nombre y una fecha aquí mismo. Entonces empecemos con todas esas cosas. Entonces para empezar, saltaré aquí mismo, localizaré mi logotipo, lo arrastraré, y lo dejaré caer en su posición. Y vamos a ver. Lo posicionaré aquí, asegúrate de que esté en mi tarjeta. Al igual que la deuda. Lo colocaré ahí. Paul turno, 12341234. Creo que está bien. Sí. Y ahora lo voy a exportar desde aquí. Entonces para hacer eso, sostendré Control o Command y E, y lo exportaré como B y G. La razón por la que estoy haciendo esto es porque voy a escalar diseño de descartar y usarlo a lo largo de estos diseños. Por lo que básicamente vamos a tener el mismo diseño, pero este logotipo no es realmente bueno con el escalado. Entonces si te muestro eso, puedes ver que está cambiando aquí mismo. Y si sostengo la tecla Mayús y esta forma distorsiona y así sucesivamente. Entonces eso no es realmente todo eso. Bueno. También voy a seguir adelante y renombrarlo en mi escritorio. Por lo que voy a renombrarlo a barra de registro de registro Color. Y luego saltaré aquí mismo. Optar por versión gris exportada. Por lo que iba a Control o Comando E exportado como PNG. Y voy a añadir deuda a un logo, blanco y negro. Y luego seleccionaré la dosis a un arrastre y las soltaré aquí mismo. Por lo que puedes ver esto es color del logo. Se trata de Logo en blanco y negro. Y obviamente cuando se escala esto hacia abajo se va a escalar muy bien. Sin ningún tema. Obviamente la calidad no es tan grande, pero vas a poder trabajar con ella. No obstante. Sustituir esos. Me aseguraré de que estén en el centro así. Los colocaré en la posición original aquí mismo. Y también puedes usar la versión predeterminada aquí mismo. Entonces como versión VG si quieres, pero simplemente lo voy a ocultar por ahora. Voy a esconder blanco y negro oscuro a logo. Y aquí tenemos nuestro logotipo original. Lo que en realidad voy a hacer para esta gran versión se usa el original solido me esconden estos dos. Local Pushkin Blanco y usaré mi logo del medio. Ocultar todos estos otros. Y ahí tenemos. Entonces lo primero que voy a hacer es usar en realidad los logotipos de mis tarjetas. Por lo que usaré el logotipo de Visa y MasterCard. Entonces hice básicamente lo mismo. Perdón. Eso es lo que pasó cuando lo arrastras y lo sueltas en su posición. Yo quiero arrastrarlo y dejarlo ahí dentro. Por lo que aquí tenemos todos los detalles de nuestro logo. Por lo que puedes ver tenemos debe tener blanco y negro actual y en color tenemos visa en color y blanco. También descargo estos de y elementos de agua. Por lo que ahí lo tienes. Como pueden ver, estoy usando todos estos activos. Linda extremidad. Entonces turno, asegúrate de estar en la línea. Turno 1234. A ver si estamos ahí. Estamos ahora, así que estamos a los 40. Y lo que voy a hacer es agruparlos. Entonces voy a tener, debe haber conseguido grupo. Y también voy a tener así al grupo SAR. Y me aseguraré de hacer mis cambios y hacer mis estados. Pero antes de todo eso, vamos ahora adelante y vamos. En primer lugar bajó la obesidad de estas fusiones en blanco y negro. Y para esta primera, ocultaré por completo mi MasterCard, así que me acaba de quedar con la visa. Lo que voy a hacer a continuación es que voy a hacer lo mismo para el logo, así que voy a hacer estos cambios. Así que llámalo Logo. Y lo que voy a hacer a continuación es usar algún texto. Entonces sigamos adelante y por ejemplo, duplicemos este texto. Colócala aquí abajo, asegúrate de que vaya desde la izquierda. Y simplemente voy a usar algunos números ahí sólo para indicar que esto es en realidad una tarjeta. Por lo que 367 para hacer espacio, o 282 a 938 a 90372, o simplemente puedes usar cualquier número antiguo. De verdad todo depende de ti. Entonces estamos en 48. Si piensa que eso no funciona realmente bien, puedes intentarlo con 90, pero creo que 48 funciona bien con esta posición de caso. Está en algún lugar por aquí o podemos meterlo en, en medio como lo es ahora mismo. Y también podemos bajar esta información aún más si así lo elegimos. Pero por ahora dejémoslo ahí para que podamos terminar esta información de fondo y ver cómo va a quedar eso. Entonces voy a duplicar este, posicionarlo un poco abajo. Y veamos, para este, puedo usar algo más pequeño, así que llamémoslo 36. Bueno, veamos cómo se ve 24. Sí, 18-24 va a ser mucho mejor. Entonces, vamos a ver. Caduca el noveno mes de 2021. Voy a duplicarlo. Asegúrate de que esté bien alineado y démosle un nombre de cuál era el nombre que realmente usábamos allí. Entonces vamos a comprobarlo. Usamos a Michael Jacobs. Entonces usemos el mismo nombre en los oldies. Así. Me aseguraré de posicionarlo 40 de mi tarjeta. También puedes seleccionar así, pozo profundidad 1234. Y se puede ver que estamos a los 40 en todos estos. Entonces lo que también podemos hacer es asegurarnos de que estemos en 40 abajo para cambiar 123456. Y veamos ahora con estos logotipos, asegúrate de seleccionar MasterCard también. Entonces seis, ahora estamos a 60, estamos a 60. Y también puedo hacer este truco que ya te mostré. Así que asegúrate de usar Rectángulo, ve de arriba a abajo del texto. Y ahora posiciona este texto en el centro entre tu logo y otros textos. Y ahí lo tenemos. Contamos con nuestro diseño de tarjeta terminado. Ahora lo que voy a hacer es agrupar todos estos. Entonces voy a posicionar esto aquí, tarjeta BG, démosle ese nombre. Así. Voy a agruparlos. Llámalo tarjeta de crédito o simplemente tarjeta. Sí, vamos a darle el nombre de presa ocurrió porque ya tenemos tarjetas para poder diferenciarlas. Entonces vamos a ver, tenemos un círculo de fondo aquí, tenemos un carro. Tenemos este texto, tu compañero diario, y conviértete en Michael Jacobs por alguna razón saliendo afuera sobre nosotros. Eso está bien. Aquí, reordenado. Entonces esa es nuestra corriente. Ahora lo que podemos hacer es usar en realidad algunos otros colores que no forman parte de nuestro diseño. Entonces simplemente voy a usar uno de esos colores. Por lo que en realidad voy a ir al gradiente sólo para que sea un poco más imaginativo. Y veamos, puedo rotar esto hasta aquí. Puedo rotar esto para aquí, por ejemplo, hacer unos dos como este. En el color más oscuro. Voy a aplicar este color. En el color más claro, voy a aplicar la misma columna. Y luego en una versión más ligera, simplemente voy a hacer algo como esto. Y versión más oscura. A lo mejor puedo incluso ir un poco más oscuro para lograr este tipo de resultado brillante o como quieras llamarlo. Creo que la visa va a funcionar muy bien aquí, pero como pueden ver, nuestras cartas tienen que ser blancas. Probémoslo con este color. Creo que funciona bien. Y para nuestro logo, lo que también podemos hacer es simplemente saltar dentro de este estado original y cambiar esto a aquí. Por lo que aún podemos leer nuestro logo, pero ahora el texto es blanco. Y eso es todo para la primera versión, ahora volveré y pegaré a Control o Comando K para usar esto como estado predeterminado. Por lo que una vez más, estamos en estado predeterminado para nuestra tarjeta Visa. Ahora sigamos adelante y creemos otro. Entonces esto va a estar en estado predeterminado para la tarjeta de visa, pero blanco y negro, así v sub w w Tan blanco y negro. Y voy a saltar aquí mismo, usar mi Visa, Escondite Blanco y Negro, disciplina. Y ahí lo tenemos. Y podemos cambiar el logotipo a voluntad si es necesario. Lo que vamos a hacer a continuación es crear otro estado. Lo vamos a llamar MasterCard. Y básicamente hacer lo mismo. Por lo que mostrar MasterCard ocultar visa, se asegura de que la versión en blanco y negro esté oculta. Y eso es básicamente todo para la MasterCard. Y ahora vamos a la nueva Master Card de calidad estatal. Perdón, MasterCard. El W para el blanco y negro, salta dentro de MasterCard y dale esto para caer y dale este 0 y Terry Earth. Entonces esas son nuestras tarjetas. Y ahora tenemos deuda concluida. Ahora lo que voy a hacer a continuación es en realidad voy a agrupar estos dos y crear un componente a partir de ellos. Y luego cuando la persona se cierne, va a ser bastante simple en realidad demostrar eso. Entonces hagámoslo. Entonces lo que dije es cuando se cierren y vamos a usar primero. Por lo que el estado predeterminado para este, cuando se desplazan básicamente va a aumentar un poco y mostrar un poco más de tamaño. Entonces hagámoslo. Entonces agruparemos a estos dos. Entonces control G, vamos a llamarlo tarjeta hover, sólo para que sepamos qué es. Tecla de control de golpe. Y lo único que voy a agregar aquí es el estado Horace, llámalo flotando o actual prisa flotante, quiero llamarlo. Y ahora en el hover, simplemente voy a aumentar mi tarjeta de crédito y sólo un poquito. Entonces dos, algo así, por ejemplo, voy a asegurarme de que todavía estoy dentro de mis puntos centrales, algo así. Entonces podemos ir al estado por defecto, al estado de horror, y podemos comprobar entre todos estos números si todo se ve bien, creo que sí. Y una cosa más que voy a hacer es en el estado por defecto, voy a añadir una sombra de gota en mi tarjeta. Entonces vamos a ver, podemos abrirla. Podemos ir al círculo de fondo y podemos añadir esta bonita sombra de gota. Entonces 20 a 2050 por ejemplo. Veamos cómo funciona eso. No me está mostrando nada porque algunos son mano haciéndolo bajo círculo. Entonces escogeré el auto BG y luego haré la sombra. Entonces es 10x 2050, creo que se ve bien. Y vamos a ver. Voy a reducir la obesidad a 0. Y luego podemos ir al carro hover, tarjeta de crédito, tarjeta, el bg, y aumentar esta obesidad de nuevo a, digamos 20% para ver cómo funciona eso. O tal vez algo menos. Entonces tal vez 12 o diez. Creo que diez funciona bien. Ahora por fin, sigamos adelante y probarlo. Antes de hacerlo, necesitamos volver al estado predeterminado. Y haga clic en Vista previa. Por lo que ahora que la vista previa está abierta, puedes ver que hemos seleccionado el botón de tarjetas sigue funcionando bien. Todo se ve bien. Por lo que ahora puedes ver Descartar luciendo realmente bonito. Pero cuando se pasa el cursor, se puede ver en aumento y estos números están cambiando. También tenemos esta bonita sombra de fondo apareciendo de la nada. También puedes reducir el tamaño del círculo si quieres. Pero todo se ve bien cuando los usuarios se arrastran hacia abajo así. Por lo que esto sale interfaz básicamente. Entonces nada en el interior cambia realmente. Todo lo que cambia es la propia tarjeta. Entonces creo que funciona bien. Vamos ahora adelante y edita esta tarjeta a sólo un poquito más. Entonces lo que podemos hacer es saltar dentro de nuestra propia tarjeta. Y podemos seguir adelante y agregar algunas formas solo para darle un poco más a las cosas. Por lo que puedo agregar con forma así. Puedo usar una grilla de repetición como esta. Puedo quitar el borde y puedo rotar esa rejilla de repetición. Pero primero vamos a desagruparlo, llamarlo rectángulos que se rotan a algo como esto. Digamos. Escribir la muerte funciona bien. Posicionado a algún lugar por aquí. Sólo para que no se pueda ver en este ángulo. A lo mejor girarlo sólo un poquito. Ver jugador encendido con la posición. Y creo que eso se ve bien. Entonces saltaré la perspicacia. Tenía control x dos posición que dentro voy a golpear control de v, posicionarlo todo el camino hacia abajo, golpe control D en el BG actual. Para que lo pueda posicionar. Y entonces lo que voy a hacer es usar mi máscara. Entonces selecciona estos dos Shift Control M. Y lo que eso va a hacer es que va a enmascarar estas formas. Entonces lo voy a llamar líneas. Todos los rectángulos. Por lo que quieras llamarlo como simple, ahora puedo seguir adelante y desagrupar estos si quieres, pero aún puedo dejarlos dentro de esa carpeta. Lo único que voy a hacer es bajar la obesidad. Entonces por ejemplo, 10%, creo que funciona bastante bien. Lo que también voy a hacer es golpear Control C e ir a cada uno de mis estados para basarlo. Entonces posiciónelo todo el camino hacia abajo. Asegúrate de que esté abajo en todos los estados. Entonces auto BG y luego rectángulos. Por lo que primera capa en la parte superior, como puedes ver, ve a la MasterCard y haz lo mismo. Entonces aquí mismo. Y finalmente MasterCard, blanco y negro, haga clic aquí. Y ahí lo tenemos. Ya hemos concluido. Y eso creo que funciona bastante bien. Bueno, ahora es el botón de vista previa y ve una vez más cómo se ve eso. Entonces podemos ver que tenemos estas lindas líneas, pero como puedes ver, ya no están aquí, Así que necesitamos pegarlas, en este estado también. Entonces vamos a saltar hacia atrás tarjeta de crédito hover duro, y usaremos estos rectángulos. Salta dentro de mi tarjeta, idea de horror clicker, rectángulos de tarjeta de crédito. Ahí está, se puede ver, se atreve, se atreve, pero no se están mostrando por alguna razón. No sé realmente por qué. Vamos a intentarlo de nuevo. Aquí están. Entonces rectángulos. Y lo colocaré ahí y me aseguraré de que no estén en fila. En caso de que estén iluminados Lindert, y eliminaremos estos. Por lo que en la suciedad. Y de todas formas lo estado por defecto, estado de puerto. Vamos a llevarte eso una vez más. Entonces, como puedes ver, están aumentando muy bien. Se están moviendo bastante bien y todo funciona como debería. Siempre puedes saltar de lado y agregar algo de textura de fondo aquí si lo deseas, puedes agregar un gradiente más complejo. De verdad depende de ti y de lo que quieras hacerlo. Entonces dominio y factor importante aquí es, es que terminamos esta tarjeta de grado, por lo que cabe en todos estos porque vamos a saltar dentro de una noticia esta tarjeta de crédito para todas estas tarjetas y hacia abajo. Entonces lo que te estoy recomendando ahora es golpear el control S para guardar tu diseño. Y lo que realmente vamos a hacer a continuación es saltar dentro de un agregado todas estas cartas. Entonces lo que vamos a hacer cuando termine de ahorrar línea ahora es saltar dentro de aquí. Entonces vamos a dejar caer nuestra tarjeta aquí. Entonces aquí lo tenemos, la tarjeta de crédito. Voy a arrastrarlo y dejarlo aquí en posición. Y voy a jugar con el nombre mencionado. Entonces por eso incluimos estos PNG solo para que podamos jugar con la posición así. Entonces voy a mantener presionada la tecla Mayús y arrastrarla todo el camino hasta aquí. Y lo que voy a hacer a continuación es saltar dentro con tarjeta de crédito. Y simplemente reorganizaré algunos de estos detalles. Entonces voy a empezar con el logo. Voy a ocultar mi Logo original e incluir color del logo, por ejemplo. O llamémoslo bitácora de blanco y negro. A ver. ¿ Cómo podemos hacer esto? A ver, porque necesitaré la versión con esto y con este texto blanco. Entonces tal vez podría exportar esa, pero hagamos trampa un poco. Primero posicionemos aquí nuestro color del logo. Voy a reducir su tamaño y posicionarlo para estar en 40, digamos así. Ahora vamos más palabras para el turno 1212, tal vez 20 sea mejor. Ahora Visa y MasterCard, vamos a seleccionarlos, asegurarnos de que estén en el centro. Todos ellos y maduros, bajamos y decidimos, OK, no sólidos, ver, ver cómo podemos hacer eso. Y todavía no son por jinx o Vamos con las indies. En primer lugar. Al igual que esto. Ahora salta dentro de una corriente imperdible como esta. Entonces sólo asegúrate de que holandés, que decide como yo. Y siempre vas a tener algunos de estos temas. Así que solo asegúrate de seleccionarlos y de que sepas lo que estás haciendo básicamente. Entonces lo que voy a hacer en realidad es caer ambos en la carpeta del logo solo para que pueda alinearlos con el logo, secarlos Alto realmente rápidamente. Coloca mi carpeta de logotipos, opta por ejemplo, Dan o, colóquelos en el borde izquierdo, asegúrate de que sean 20. Y voy a esconder podria carpeta MasterCard. Siempre puedes extender esto si quieres, así. Pero no creo que sea necesario hacer eso demasiado. Señor la obesidad. Y lo que voy a hacer en realidad es usar mi logo, Blanco y Negro. Colóquelo hasta la posición aquí. O tamaño, doble toque. Y usaré mi logo medio. Ocultaré mi billetera y simplemente usaré mi texto para reducir su tamaño. Y para posicionarlo en su lugar aquí mismo. Por lo que simplemente puedes hacer click en este punto y puedes reposicionarlo como quieras. A ver, creo que esto está bien. Quizás sólo un poquito abajo. Sí. Podemos llamarlo así. Entonces lo que podemos hacer entonces es golpear el control C para copiarlo de nuestro Logo original, Control V. Y ahora puedes seguir adelante y posicionarlo ahí así. Y creo que va a funcionar bien para nuestro ejemplo. Lo que vamos a hacer a continuación obviamente es trabajar en los conductos o vamos a cerrar todos estos. Entonces como dije, terminamos esto, preparamos todo. Ocultamos el logo, ocultamos todo. Entonces simplemente voy a saltar aquí mismo. Y vamos a posicionar primero estos dos descarga Ver. Entonces si ahora están a 24, bajémoslos a 16, por ejemplo. Asegúrate de que sean blancos así. Y los voy a posicionar hacia abajo. Entonces vamos abajo y abajo. A ver, estamos en, creo 20 año, por lo que 20 por todos lados. Aquí mismo. Y si un sello viejo se puede ver somos 20 zona. Ahora puedo dar click en este 124. ¿ Y eso funciona? Bueno, vamos a ver. No. Pero lo que también podemos hacer es bajar el espaciado entre ellos. Y ahora va a funcionar solo mezcla fina. Simplemente usas negrita, solo usas deudas de mano blanca básicamente lo vamos a hacer el mismo truco. Por lo que la posición son un rectángulo a la parte superior. Asegúrate de ralentizar Ambos de estos. Da clic aquí y luego salta dentro de un quitar tu rectángulo. Y lo que vamos a hacer a continuación es que ya puedes ver que ahora tenemos nuestra tarjeta. Se ve bonito. Lo que vamos a hacer a continuación es básicamente usar estos mismos, esta misma información de todos nuestros estados. Por lo que para mostrarte cómo se hace eso, simplemente puedes seleccionar toda tu información en lugar de tarjeta Vg. Entonces no lo vamos a cambiar. Haga clic en Control C. Así. Acude a la visa, blanco y negro, por ejemplo. Elimina toda tu información, utiliza tu tarjeta Bg. En realidad podríamos haber copiado esa también. Entonces volvamos al estado predeterminado y seleccionemos todo. Golpe Control C. Ir a la Visa, Blanco y Negro, abrir todo consiguió borrar todo. Y simplemente basado loros de vuelta en. A ver, eso no funcionó. Sólo dejemos tarjeta VG, control V, y ahora eliminemos el BG actual para que podamos tenerlo como blanco y negro reciente. Lo único que vamos a hacer ahora es en realidad corremos primero entre todos ellos y hagamos lo mismo por ellos. Y entonces simplemente podemos saltar, cambiar y bloggers por dentro. Y finalmente MasterCard en blanco y negro. Y quita todos estos y quita esto. Y ahora, porque se trata de MasterCard en blanco y negro, simplemente puedo dejar en deuda en baja y esta original, simplemente puedo aprender el logo de Visa va a seguir igual. Eso es todo. Mastercard. Entonces haz lo mismo aquí. Entonces muéstrale esto y quítelo. Y esto es a 0, eso está bien. Pasemos a Visa, Blanco y Negro. Entonces Reesa, vamos a mostrar este escondite y así, Y estamos en estado por defecto con visa. Eso está bien. Por lo que ahí lo tenemos. Nosotros hemos concluido en estos. Por lo que como pueden ver, tenemos tarjetas de crédito visa. Este texto es básicamente el mismo que era, así que todo se ve bonito y limpio. Lo que voy a hacer a continuación es realmente copiar descarte y basarlo en algunos de estos lugares. Entonces simplemente puedo golpear Control C, o lo que realmente puedo hacer es hacer componente adicional de esto, pero no voy a jugar aquí con él. Entonces solo voy a usar Control C porque este es el componente hijo de este componente maestro de todos modos. Entonces puedo saltar aquí mismo una forma de caricatura, buen control V y moverlo a su lugar así. Gracias. Vuelve a acercar el zoom. Y lo que puedo hacer es simplemente dejarlo en la carta superior. Vg se borran, y luego pasaré a mis tarjetas de débito y básicamente haré los mismos tanques o CU Control V, lo posicionaré en posición como este gran atuendo EEG y lo quitaré y pasaré al otro. Control V. Posicionarlo en su lugar. Y ahí lo tenemos. Yo también quitaré éste. Y lo que necesito finalmente, fraude aquí es que voy a usar esta misma tarjeta antes de volver y trabajar en nuestras ilustraciones y animaciones, volvamos a esta misma tarjeta. Tarjeta de crédito hit Control C. Y saltaré a esta sección, podría controlar v. Asegúrate de que estoy en el centro de mi posición de carrito aquí que quitan esto y eso es básicamente todo. Entonces ahora sigamos adelante porque tenemos exactamente las mismas cartas. En realidad queremos hacerles algunos cambios. Y porque como dije, este es el componente maestro, todos estos son componentes hijos. Entonces como puedes ver, todo funciona bien y sin problemas. Entonces lo que voy a hacer ahí es básicamente hacer esos cambios. Entonces, empecemos con las tarjetas de crédito Visa, por ejemplo. Quiero agregar algún color diferente aquí. Entonces saltemos aquí mismo. Y vamos a ver, ¿quería agregar nuestros colores originales? Entonces tal vez éste. Por lo que saltaré justo aquí, haga clic aquí, y le añadiré nuestro color original. Haga clic en este encendedor. Y añadiré color original también. Entonces saltaré de nuevo aquí y aumentaré esto hasta aquí. Tal vez pueda disminuir un poco esto, algo así, sólo para que se vea un poco más interesante. Obviamente, si no te gusta este logotipo de Visa aquí, siempre puedes saltar por dentro y simplemente usar uno blanco. Por lo que puedo, por ejemplo, copiar esto. Por lo que él controlaría C o un clic derecho aún mejor copia. Y luego puedo ir a Visa, Blanco y Negro. Seleccione mi VG actual, haga clic con el botón derecho en apariencia basada. Y solo vas a pegar en esa apariencia al estado de este componente. Puedo cerrarlo porque estoy contento con ello. Yo estoy contenta cómo se ve eso? Y simplemente puedo pasar a mi MasterCard. Entonces solo voy a hacer doble clic aquí mismo. Tarjeta de crédito, usa mi MasterCard. Y ahora se puede ver el poder de los componentes ahí mismo. Haré lo mismo. Entonces saltaré la perspicacia, MasterCard. Vamos a ver si lo seleccioné. Tengo algunos autos geniales, BG, clic derecho. Pegaremos apariencia. Por lo tanto, asegúrate de que sean iguales porque son tarjetas de crédito. O incluso puedes ir más allá y hacer algunos cambios adicionales a este. Entonces volvamos a nuestros colores, por ejemplo. O aún mejor, simplemente puedes saltar aquí mismo y hacer que éste sea un poco más oscuro. Haga clic aquí. Este un poco más oscuro, o incluso ir al revés. Entonces tal vez por algo como esto, tal vez haga clic aquí, asegúrese de ir al revés a algo como esto. Y creo que ¿funcionan bastante bien? Puedo seguir adelante y cerrar esto y podemos trabajar en nuestras tarjetas de débito. Entonces en nuestras tarjetas de débito, básicamente lo que vamos a hacer es exactamente lo mismo. Yo sólo voy a incluir, incluir algunos cambios menores en retoques menores a aquí. Por lo que voy a volver a seleccionar mi fondo para el color más oscuro. En realidad voy a seleccionar Color de disco ahora. Y cuatro en color más claro. Voy a seleccionar el mismo color para el color más oscuro. Obviamente vamos a ir al revés por el tofu, por ejemplo, a algún lugar por aquí. Y para el color más claro, podemos pasar a algún lugar por aquí. Puedo hacer clic derecho en copiar para que se puedan sentar a mi otro jardín también. Haga clic justo ahí. Vamos a elegir una MasterCard. Aspecto basado con el botón derecho. Creo que la India se ve bastante bien. Pero una vez más, sigamos adelante y hagamos algunos de estos cambios adicionales. Tal vez este azul realmente bonito, tal vez incluso azul más claro, todo el camino al blanco o algo así. Creo que va a funcionar bastante bien. Entonces ahora que hemos completado, eso, ahora podemos pasar a descartar. Pero antes de que lo hagamos, quizá debamos seguir adelante y terminar estos tramos. Y para las secciones D, todo lo que realmente quiero hacer es básicamente crear componentes para ellas. Y voy a crear diferentes componentes con básicamente el mismo, el mismo efecto hover. Y básicamente vamos a tener un tipo similar de efecto hover a aquí. Por lo que en realidad vamos a utilizar estos elementos. Entonces voy a saltar aquí mismo de esta tarjeta de contenido. Voy a usar elementos control de malas hierbas C. Sácalos, vuelve aquí y abre esta tarjeta info PID control v. voy a incluir mi o básicamente espalda posicionada y dos aquí. Por lo que no eliminé el protocolo BEG de aquí. Por lo tanto, seleccione estos para asegurarse de que estén abajo. No estoy realmente seguro de que los blancos moviendo disco hacia abajo. Entonces es bueno cambiar este color a esto, solo para que pueda ver mis elementos un poco mejor. Entonces un píxel abajo, eso es todo. Y lo que voy a hacer es simplemente saltar dentro de ellos y está ubicado. Entonces aquí está, círculo. Simplemente voy a aumentar ligeramente el tamaño y asegurarme de que esté aquí. Tarjeta BG se asegura de que seas del mismo tamaño que esta nueva es. Y siempre se puede revisar, por lo que 792587700 a 587. Así que así. Y como pueden ver, básicamente estamos atrevidos, sólo voy a moverlo hacia abajo un poco así. Y eso está bien. Yo voy a hacer voy a Lord, básicamente estás abajo de ellos más tarde. Entonces no juguemos con todos estos elementos porque obviamente ahora tenemos un poco más de espacio. Quizás incluso pueda aumentar el tamaño de D, Así 20. Ahora sigamos adelante y rotemos a esto, por ejemplo, a aquí. ¿ Dónde está nuestra línea? ¿ Curioso? Localicemos también la deuda. Ver 20. Ahora, Dan trabaja mucho mejor y aumenta un poco el tamaño. Y obviamente puedes jugar con estos elementos tanto como quieras. Pero simplemente no te metas demasiado atrapadas en ellos porque son solo elementos secundarios porque suceden distintos aquí es tu principal preocupación. Lo que voy a hacer a continuación es simplemente más bajo en la obesidad hacia abajo. Pero antes de hacerlo, tal vez pueda copiar y pegar estos elementos a todos estos. Así que golpea Control-C, salta aquí mismo para tallar BG control v Voy a posicionarlo todo el camino hasta aquí. A ver. Asegúrate de que estén alineados como suciedad en todos los lados. Ellos lo son. Y si una vez más cambiamos en este fondo, podemos comprobar y ver que todo se ve bien y limpio. Por lo que puedo volver a saltar de nuevo a mi auto BG y hacer lo mismo por los primeros que tallaron BG car VG. Voy a cambiar el color a éste. Y también voy a copiar y pegar estos dos. Entonces ahora los voy a seleccionar a ambos. Hit Control-C, solo ordenados, me puedo ver un poco más de tiempo ir a tarjetas de débito. En algún lugar por aquí tenía el control V. Y en realidad voy a seleccionar esos elementos, mantener la tecla Shift, y simplemente empujar amortiguado. Y para ver lo que hice, volveré a cambiar el color de mi auto BG que hice. Seleccionaré ambos de mis elementos y los empuñaré hasta aquí. Y luego volveré a cambiar estos elementos. Y vamos a ver, posición descartando para donde está. Por lo que DES elementos o posición en mi primera. Entonces aquí. Estos elementos o posición en mi segundo aquí, lo que podemos hacer ahora es simplemente bajar la obesidad de todos ellos hacia abajo así. Entonces si puedes checar 00 y yo puedo hacer lo mismo por las tarjetas de crédito. Entonces donde son elementos posicionados justo debajo de nuestra flecha, Señor obesidad hacia abajo y haga lo mismo por estos. Entonces ahora que hemos completado eso, todo lo que básicamente quiero hacer es agregarles algunos hovers. Entonces vamos a ver, separamos las tarjetas, las tarjetas de crédito MasterCard. A lo mejor podemos cambiar esos nombres porque vamos a crear componentes. Entonces, vamos a ver. Por lo que información de tarjeta de crédito. Y lo vamos a copiar. Y esto va a ser MasterCard. Entonces para este vamos a, en lugar de crédito, usar adeudos y copiar y diseñar porque soy demasiado perezoso para anotar algo de MasterCard y adeudos. Y ahí lo tenemos. Ahora, simplemente podemos golpear Control K, Control K, Control K, Control K. Para que podamos crear todos estos componentes adicionales. Entonces lo que podemos hacer en este primero es que en realidad podemos, volvamos atrás y usemos el color como hicimos con el original. Así que golpea el control D. Y cuándo llamar a este color, o llamémoslo tarjeta bg color. Hagamos lo mismo por todos ellos. Entonces vamos a cerrar este. Controlador D, tarjeta, bg, color, Control D, así. Y finalmente para éste, lo que entonces voy a hacer es simplemente seleccionarlos en el mar. No puedo, tengo que seleccionar uno por uno. Voy a usar veamos, becario de escritorio. Sí. Y lo voy a bajar a 0 en nuestro estado por defecto. Haga clic aquí, use este cloruro de color abajo a 0 usando mi tecla 0 en mi teclado. Aquí mismo, 0. Salta de vuelta a aquí. Y finalmente este, cambia el color y todo vuelve a 0. Y esos son todos nuestros cambios en nuestros principales estados. Ahora lo que realmente vamos a hacer es simplemente crear estados de cobertura para todos ellos. Y simplemente te voy a mostrar cómo puedes agregar solo un poco más de interés a tu diseño. Entonces para crear estos estados Howard, lo único que voy a hacer es realmente bastante simple. Por lo tanto, crear un poder de calidad estatal. Copia este texto para que pueda usarlo más tarde. Y en nuestra tarjeta de crédito, veamos, tal vez podamos saltar al fondo de la tarjeta de crédito. Podemos añadir un poco de sombra. A ver. Entonces 5510, por ejemplo. Oh lo siento. Una vez más utilizó este equivocado. Entonces vamos a nuestro carrito. Entonces carta Bg, ya tenemos esa sombra, pero vamos a cambiarla. Entonces 55 y Sen, y veamos, diez en obesidad. Por lo que sólo queríamos destacar un poco. Entonces voy a ver, sólo para recordar ese cinco, 5-10. A continuación, voy a usar mi flecha y moverla 20 píxeles hacia abajo, así. A continuación, voy a incluir a mis elementos de vuelta. Y por último, incluye mi color de vuelta. Y los elementos en realidad van a ser diez. A ver, 20. Vamos a encontrarnos a 151815 va a funcionar bastante bien. Todavía puedes leer todo esto. Y, pero porque yo sólo quería hacer un cambio rápido, intercambie esto por blanco. Tan solo lo pudiste ver un poco mejor porque sigue siendo llamado a la acción al final del día. Por lo que el estado por defecto, el estado Horace. Y siempre podemos saltar al prototipo y flotar hacia fuera dinamita flotando. Nota fácil. Y veamos 0.4 segundos. Usemos eso. Y usemos la facilidad de entrada en lugar de un resultado. Eso es básicamente todo. Vamos a probarlo y a ver si este primero funciona. Y antes lo aplicábamos a todos estos otros. Entonces aquí lo tenemos. Como puedes ver, funciona muy bien. Tenemos todas estas formas. Pero lo que también podemos hacer es quizás en nuestro estado original, tal vez podamos empujar estas formas. Entonces hay, podemos animarlos sólo un poquito. Entonces hagámoslo. Entonces en nuestro estado por defecto, lo que puedo hacer es simplemente mostrar mi color, mostrar mis elementos, solo ordenados, los puedo ver. Entonces en nuestro estado por defecto, simplemente movamos nuestra cruz hmm. A ver. 20 pixeles, ¿verdad? Línea 20 píxeles, derecha, en un círculo de 20 píxeles hacia abajo. Y este círculo de mezquita, veamos, 20 píxeles abajo. Entonces esto está abajo, esto está abajo, esto es correcto, y esto es correcto tener que recordar eso. Bajémoslos hacia atrás más cuello lamda espalda. Y vamos a revisar nuestros resultados. Veamos si eso es y nos da algún tipo de interés visual. A ver. De verdad no pasó nada con ellos. Entonces, exploremos un poco más y veamos qué podemos hacer. Entonces veamos en el flotador, quizá podamos tratar de moverlos allí también. Entonces los elementos, vamos a ver, cruzan 20 píxeles y estos 20 píxeles a la izquierda inducieron 20 píxeles hacia arriba. Y este fondo llamado C 20 píxeles arriba también. Entonces, veamos si eso marcó alguna diferencia. A ver cómo se ve eso. Aquí. Como puedes ver, se agrega solo un poco de movimiento en el fondo. Entonces esto se fue, esto, dejó esto arriba y esto arriba. Entonces hagámoslo por todos ellos. Entonces pasemos ahora a este. Y vamos a sumar básicamente lo mismo. Entonces recuerda phi 5-10. Entonces tenemos el estado por defecto aquí. Veamos tarjeta de crédito, BG, sombra 55. Y va a bajar la sombra aquí. Y en realidad voy a hacer en lo mismo para el estado por defecto aquí. Entonces auto B, G, aprendí por 5-10, solo para que pueda hacer esa animación un poco más inteligente. En previamente se imprime. Ya lo puedes ver. No es lo más liso del mundo, pero sigue siendo más pequeño de lo que era con esa sombra de fondo. Entonces sigamos adelante y editamos éste para que podamos. En primer lugar, veamos qué podemos hacer aquí mismo. Tenemos nuestro color, tenemos nuestros elementos. Y vamos a crear rápidamente un efecto de terror. Entonces hover estados, y esto se va a llamar obviamente dentro del hover o vamos a incluir este color. Vamos a incluir los elementos, pero que estén al 15%. Vamos a dejar que C mueva este círculo hacia arriba 20. Muévete en este círculo hasta 20. Y estos dos se van a mover a la izquierda 20 píxeles también. Siguiente cosa, tarjeta de crédito, BG. Nos vamos a asegurar que esto sea a las diez. Y por último, vamos a cambiar indies a, a blanco. Y también vamos a mover la flecha 20 píxeles a la derecha. Entonces vamos a comprobarlo y veamos cómo funciona eso ahora que tenemos dos. A ver. Entonces tenemos éste y tenemos éste. Lo que tenemos que hacer para este segundo es realmente saltar dentro y cambiar la duración. Entonces si recuerdas esto es 0.4. vamos a comprobarlo. Prototipo. Entonces si hago click en este, así tenemos un hover. Fácil ahora, 0.4. mientras que en este tenemos nuestra facilidad fuera 0.3. Entonces esa es la diferencia está en nuestro 0.4. y ahora si lo pruebo, y tal vez sea un poco aburrido, pero todavía hay que probar todas estas cosas todo el tiempo. Entonces ahora puedes ver que se ven exactamente igual y se ven realmente bien. Entonces ahora que eso está terminado. Y fuera del camino, ahora podemos seguir adelante y terminar estos dos también. Entonces déjenme hacer eso rápidamente. Por lo que una vez más, empecemos desde la tarjeta de crédito superior, BG. Y voy a incluir una sombra por 5-10. Y voy a reducir la obesidad más uno. Y veamos elementos. Todo se va a quedar en el mismo. Y atrévete, vamos a crear un flotador. Perdón, en ese nuevo estado, pero fecha de cosecha, cuando trataste de trabajar rápido, a veces tienes quintil terminan con todos estos diferentes temas. Entonces cambiemos esto a blanco. Mueve estos 20 píxeles a la derecha, vuelve a nuestra tarjeta de crédito, BG. Y voy a aumentar esto a diez, así. Y luego lo voy a cerrar. Y esto ya ha cambiado. Elementos van a ser Dare, pero al 15%, cambiemos dosis o estos 220, ¿no? 20 arriba, abre esto a cualquier arriba. Básicamente es eso. Ahora que puedes saber lo que necesitas hacer, vuelve al prototipo, hover, autonomía, sustantivos fáciles, y 0.4. segundos. Vuelve a nuestro diseño y elige esta tarjeta. Por lo que tarjeta gris, tarjeta BG incluyen la sombra Firefly o bajar la obesidad a 0. 43. Crear diseño 5 5: Adelante y sigamos con nuestra siguiente página. Siguiente página es invertir. Entonces una vez más, lo mismo que siempre hicimos con estas páginas. Asegúrese de que estamos en 70. Zoom, haga doble clic y cambie esto para enlistar diseño. Déjame mover mi micrófono un poco más allá. Y voy a hacer lo mismo una vez más. Así que usa héroe principal nav, café. Seleccione estos dos, elimine u para controlar la posición basada en V8 m aquí. Y voy a cambiar en muertes una vez más, por lo que necesita ser invertir. Así que da click aquí. Y ahora sigamos adelante y comencemos a trabajar en nuestro diseño. Entonces déjame saltar rápidamente por dentro y copiar y pegar mis nuevos textos aquí mismo. Por lo que invertir en un futuro brillante. Vamos a ver así. Y veamos, tal vez podamos incluso agregarle algo de especia. Entonces en lugar de simplemente desplazarnos hacia abajo, podemos hacer clic aquí mismo. Cualquiera nos puede llevar hasta aquí. Entonces veamos dentro de ella un héroe, tenemos el texto y veamos el botón principal. Nosotros elegimos hover. Y vayamos a un prototipo. Y dentro del estado de horror, podemos hacer click. El gatillo es hover, escribir, auto, animar y elegir un destino. O podemos cambiar esto para desplazarse también. Entonces cuando el usuario pasa el ratón, pueden hacer clic y se va a desplazar a esta siguiente parte. Entonces vamos a elegir inversiones. Entonces se va a desplazar hasta ahí. Entonces si te llevo de vuelta una vez más vector el deseo y voy al héroe, ve al texto. Quiero volver al estado predeterminado de mi botón. Y puedo hacer click en vista previa, agrandarla. Entonces en un hover y click, me va a llevar a este espacio. Obviamente esta navegación es así porque no podemos adaptarla. Pero se puede imaginar que puede ser, por ejemplo, en algún lugar por aquí codificar. Por lo que los usuarios podrán ver esta parte un poco mejor. Y por supuesto, ahí es donde entras como diseñador, tienes que explicarle estas cosas a los desarrolladores para que puedan entenderlo un poco mejor. Ahora saltemos por dentro y quiero cambiar esta imagen. Entonces voy a arrastrar y soltar y nueva imagen de este tipo sonriendo. Y una vez más, como se puede ver con todas estas imágenes, son, han elegido a los jóvenes porque ese es el punto focal de este banco. Ellos realmente quieren que los jóvenes estén ahí significan clientes. Entonces voy a borrar esta vieja imagen, mover esto aquí mismo. Y por último, juguemos con estos aún más forma de canción para posicionar esta escritura aquí, por ejemplo, voy a cambiar a lugares de estos dos. Voy a dar click aquí mismo. Al igual que esto, por ejemplo. Sí. Y voy a posicionar escritorio para estar aquí mismo. Aprender más básicamente va a permanecer igual. Y esa es nuestra sección de héroes completada. Ahora, pasemos a la siguiente sección. Y básicamente esto va a ser lo mismo que hicimos con todos los anteriores. Entonces básicamente solo voy a usar algunos iconos. Entonces, vamos a ver. Puedo copiarlos y puedo saltar aquí mismo a mis inversiones. Puedo pegarlos aquí y AR, y vamos a ver, puedo, porque esto no era un componente, puedo crear un icono de componente y retiro. Y puedo saltar por todos estos grises clics me Klocal, Klocal y hacer local. Puedo volver atrás y básicamente hacer lo mismo. Entonces voy a seleccionarlos. Voy a Níger DEM y me balazo desde aquí, 1234. Y ahora puedo ir y empezar a incluir estos iconos dentro. Entonces pondré la educación aquí. Elimino éste y delineo color y formas. A ver. Por lo que sólo voy a Florida resolución de esto más tarde. Pero como puedes ver, es apropiado. Y esto fue, veamos a nuestro selector. Entonces vamos a renombrarlo. Y puedes hacer doble clic en control v, sin control de camarilla V. Presione Entrar para confirmar. Y eso es básicamente conseguir la educación está terminada, bienes raíces o dejarla caer. Un r-star remoto. Troponina de seguridad familiar, quitó el inicio y el retiro y hacer lo mismo básicamente. Entonces ahora que eso está terminado y vamos a seguir adelante y hacer un ahorro rápido. Entonces controla s. Y ahora lo que queremos hacer, como pueden ver, tenemos este texto aquí mismo, y es una sección un poco diferente a las secciones anteriores. Pero básicamente, como dije, casi exactamente lo mismo. Lo que quiero hacer primero es usar un botón para estos dos, porque como dije, vamos a copiar esta información es lo mismo que hicimos para los ejemplos anteriores. Entonces lo que voy a hacer es localizar mis botones o por ejemplo, lo que quiero aprender más botones. A ver, tal vez incluso pueda usar este solo para que no nos desplacemos demasiado hacia abajo. Y salta dentro de nuestra sección de información. Abre los dos arriba y voy a saltar aquí mismo. Aprende Más posiciónelo aquí. Voy a quitar éste, debería controlar la filtración. Salta a la siguiente sección. Controla V para hacer más con fuera de la forma en que hacen esto, asegúrate de que esté alineado y quita este. Eso es básicamente todo para este. Y ahora déjame saltar adentro y empezar a editar estos. Entonces, en realidad, hagámoslo al revés en su abrir todas estas carpetas. Y empecemos con esta info. Arrástrelo dentro de aquí. Control D, arrastra este aquí. Control D arrastra este aquí. El control te diriges es uno aquí, justo aquí. Está bien. Por lo que ahora puedo cerrar por completo todos estos DEM altos. Y ahora puedo saltar dentro de mi sección de información. Puedo abrir todos estos y vamos a ver. Ya edité estos dos, así que solo necesito imágenes. Entonces déjame abrir mi carpeta de imágenes y veamos, puedo arrastrar y soltar mi imagen dentro. Eso se ve bien. Sí. Y arrastraré y soltaré otra imagen aquí, así, pero haré doble clic y la ampliaré usando mi tecla de turno. En algún lugar por aquí. Creo que va a funcionar bien. Así que así. O tal vez pueda incluso más con hasta sólo para que podamos cortar esta porción de nuestra imagen. Creo que la muerte funciona bien. Y ahora porque eso está terminado, puedo ocultar mi educación. Puedo pasar a mi inmobiliaria. Y vamos a ver, para los bienes raíces, lo que podemos hacer es que podemos jugar con estos aún más. Entonces déjame saltar rápidamente dentro de ahí. Y puedo empezar copiando estos textos superiores o vamos a ver, así. Obviamente es mucho más difícil para mí porque estoy usando a ella para archivos Adobe XD. Entonces es por eso que en esto tarda mucho más de lo que debería ser. Pero básicamente, todo lo que necesitas saber es que obtendrás esta información en algún tipo de archivo Word o un archivo de texto o algo así. Entonces va a ser mucho más fácil para ustedes editar esto que yo. Y obviamente no vas a hablar con la cámara ni con el micrófono. Entonces todo esto va a ser mucho más rápido para ustedes que para mí. Entonces escribiré aquí, voy a seguir donde lo dejé y voy a cambiar todo esto. Al igual que así. A continuación, voy a incluir mis imágenes en. Entonces empieza con este. Voy a quizá más con sólo un poquito abajo. Entonces hay chicos cabeza está en el marco así. Y por último, voy a arrastrar y soltar esta imagen dentro de aquí. Voy a hacer doble clic en el interior, mantenga pulsada la tecla Shift Alt y haga clic izquierdo para que pueda escalarlo hacia arriba, posicionarlos en marco, tal vez un poco hacia abajo, así. Y eso es básicamente todo para esta sección. Puedo cerrar todos estos. Todo se ve muy bien. Yo puedo esconder éste, mostré éste. Y luego puedo saltar atrás y empezar a editar muerto el próximo. Entonces, vamos a ver. Este siguiente es punta de semilla familiar. Entonces lo van a llamar invertir en tu familia. Pero antes de seguir adelante, volvamos a bienes raíces y cambiemos el nombre de éstos. Por lo que dentro de nuestra info, tenemos fondo inmobiliario de Newark. Y esto se va a llamar nuevo dinero en euros no bancarios. Y sólo para que podamos seguir comiendo ratones, Lee y consistentemente. Entonces mostrémosle esto de vuelta. Y veamos, sigamos ahora agregando la información. Obviamente esta parte para ustedes chicos es la más aburrida de ver, pero lo que pueden hacer, es parte de cada diseño individual que hago. Por lo que siempre tienes que trabajar con este tipo de información y siempre es mejor si puedes mostrar a tus clientes información real en lugar solo ese texto aburrido o Lorem Ipsum que ven. mejor algunas personas no entienden realmente qué es eso. A lo mejor no pensaste ahí también, usaste algún tipo de lenguaje cualquiera que ellos no entienden. En realidad tenía un cliente el cual se ofendió por lorem ipsum porque enseñó que estoy jugando algún tipo de juegos con ellos, pero realmente no lo estaba. Por lo que tendrás a todos los adultos rey. Entonces esto va a ser num blank sleeve t, find plus. Y este expediente uno va a ser estimulado fondos dibujados así. Y por último, sigamos ahora y cambiemos esto a jubilación y trabajemos en deuda. A ver. Tan inverso el mañana tranquilo interior así. Y vamos a ver, esto va a liderar llamado nuevo futuro bancario. También estoy dispuesto a copiar y pegar este texto en. Traté de trabajar lo más rápido posible para ustedes y de hablar al mismo tiempo. ¿ Qué? Porque no quiero que te pongas en guerra con este apartado. Pero como puedes ver, esta es la parte que en realidad dura más tiempo. Entonces, vamos a ver. Puedo arrastrar y soltar mi imagen aquí. Y la imagen final va a ir justo aquí. Y finalmente, sigamos adelante y renombremos este tipo de, esto es un nuevo futuro bancario. Y esta es tu característica del euro así. Y eso es básicamente todo. Ahora sigamos adelante y empecemos a trabajar en estos. Entonces básicamente, lo que quiero hacer con estos es que primero quería ocultar toda la información. Entonces lo mismo que hicimos por todos estos otros. Entonces solo estoy presionando 02 veces en mi teclado. Tenemos inversiones obviamente, por lo que controlaría clave, convertirlo en componente. En primer lugar, el estado va a ser educación. Por lo que para la educación, quiero ocultar mi color de fondo. Quiero mostrar mi información. Y vamos a crear un segundo estado, que se va a llamar Bienes Raíces. Para los bienes raíces, lo mismo. Entonces voy a esconderlos. En realidad les mostró de vuelta. Perdón. Voy a luchar contra esta información. Voy a ir al icono de mi inmobiliaria, ocultar mis colores, y mostrar mi info. Haga clic aquí, un nuevo estado. Voy a cambiar esto por seguridad familiar. Entonces en eso, voy a volver a shill mis bienes raíces. Ocultar mi información, o volver a seguridad familiar, ocultar esto, mostrar esto. Entonces como puedes ver, a medida que comienzas a trabajar y comienzas a repetir las tareas de Baldi, todo tipo de cosas se vuelve mucho más rápido porque estás repitiendo estos escritorios o un Oregon. Y ocultemos esto. Mostrémosle esto. Ocultemos la dosis, y eso es básicamente todo. Ahora, volvamos al estado predeterminado y saltemos dentro de nuestro prototipo. Ahora voy a dar click aquí mismo, elige esto y usa tap o para animar está en nuestros 0.4. segundos. Elegido a bordo va a ir a la educación. Elige este mismo, bienes raíces, seguridad familiar, y finalmente, un retiro. Voy a cerrar de nuevo todos estos puntos e ir a mi educación. Bienes raíces. Esto va a ser autonomía a la seguridad familiar. Y esto no va a ser un retiro. Por lo que puedes ver a veces puedes tener todos esos errores como hasta ahora. Nos mostró muertos que quiere desplazarse a una sección por alguna razón y no queríamos hacerlo. Entonces sólo tenemos que echarle un vistazo a esos. Entonces la educación de autonomía, esto va a ser seguridad familiar, esto va a ser un retiro. Cerremos los oldies. Y por último, trabajemos en estos dos, que son nuestros últimos. Entonces esto es educación, bienes raíces, y al retiro. Y por último, vayamos a nuestro último estado que es el trabajo analítico de retiro en muertos. Por lo que la educación, bienes raíces, seguridad familiar. Y que deja cerrar todos estos, volver a nuestro estado educativo, o incluso podemos ir al estado por defecto, hit preview para ver cómo funciona eso. En realidad, saltemos de aquí a aquí. Por lo que puedes ver que funciona. Haga clic en la educación, bienes raíces, seguridad familiar, y jubilaciones o obras de edición o bien como debiera. Sí. Y todo esto se ve bien. Y en esta primera tenemos estados de Horace. Pero como dije varias veces en las segundas, en las internas, no tenemos cómo estados. Entonces una vez más, si alguien conoce la solución para ese tema y avísame y lo arreglaré y haré una actualización para todos tus chicos. Entonces lo que tenemos el próximo, asegure su futuro. Obviamente vamos a trabajar en eso. Y vamos a ver. Déjame primero copiar N3C y texto de escritorio en otro, luego saltar a mi educación de inversión en cuatro. Usaré este Watson porque es una especie de la más cercana. Control V. Y dejar la posición C hacia abajo, Lindert. Aprender más se va a quedar. Por lo tanto, permítanme seleccionar este texto. Bien, ciérrelo. Y esto está en 40 índices a las cuatro, desaparecer futuro es lo que se va a escribir justo ahí. Déjame tomar rápidamente mi imagen, arrastrarla y soltarla dentro de un estilo de vida que se parece. También me voy a llevar estos cuatro mazos porque voy a usar esto como pila más adelante en mi diseño responsive. Y es básicamente, es lo único que nos queda hacer para esta página en particular es trabajar en nuestro pie de página. Entonces voy a golpear Control C, eliminar control v, Asegúrate de que esté abajo, posicionarlo todo el camino hacia abajo. Y luego voy a volver a mi estado original y a mi pie de página original. Entonces vamos a ver, tenemos invertir a continuación. Entonces voy a abrir en estas tarjetas, voy a elegir todas estas. Así que golpea el control C, el control V. Asegúrate de que esté justo aquí. Turno de noticias y una flecha derecha lo posicionaron justo aquí. Por lo que bajo invertir tenemos todos esos, entonces tenemos educación, tenemos bienes raíces, tenemos seguridad familiar. Y finalmente tenemos retiro. Al igual que así. Por último, voy a agrupar a todos ellos llamados esto Invest. Y una vez más, la razón por la que estoy trabajando en este primero es porque como pueden ver, se traduce muy bien en todos estos. Entonces en el siguiente video, vamos a trabajar en la playa digital y dibujar disco dos son bonita y rápida conclusión. También incluiré en algunos de los otros videos otros enlaces que van a ir aquí mismo. Y luego finalmente, si vas a trabajar en la transición entre estas páginas, tan pronto como completemos esta siguiente y pasemos a la página de registro de inicio de sesión porque en este momento no incluimos ninguna transición. Entonces si trataste de hacer click en alguno de estos artículos, no te llevará a ninguna parte porque estos clics no estaban conectados como están, por ejemplo, con esta playa. Entonces eso es todo para este video. Te veré en la siguiente cuando realmente empecemos a trabajar en esta página digital. Y vamos a incluir algunas imágenes más. Y te voy a mostrar algunos consejos y trucos más. Entonces te veré ahí. 44. Crear diseño 6 6: Ahora sigamos adelante y empecemos a trabajar en la página final, que se muestra aquí mismo para lo digital. Entonces voy a mantener mi antigua posición clave en o en aquí, acercar. Va a ser un diseño digital así. Vamos a hacer lo mismo que hicimos por todos estos anteriores. Por lo que lo posicionó aquí, mueva esto hacia abajo. Y por último, voy a elegir mi navegación principal, elegir digital, y ese es nuestro último estado, como pueden ver. Por último, voy a sustituir este texto como siempre lo hacen. Tan maduros. ¿Y lo sustituí así? Aprender más se va a quedar igual. Y también puedes conectarlo si quisieras hacer la siguiente sección, pero no te voy a molestar. Por lo que siempre puedes explorar dat si quieres. Por último, quiero cambiar rápidamente estas formas. Entonces tal vez afín posicionar este aquí. Yo puedo posicionar este aquí mismo. Puedo rotar este un poco o tal vez así, sólo para que podamos darle un poco a las cosas. Déjame incluir mi imagen ahí arriba, así que está en esta. Yo me posicionaré aquí. Una vez más, la imagen es de elementos invitados. Usé Photoshop para cortarlo y exportarlo como PNG. Y es lo que ves aquí mismo. Y vamos a posicionarlo y detrás de chico de escritorio. A ver, tal vez lleguemos hasta aquí. Sí, borré el viejo y eso es básicamente todo para el héroe. Ahora sigamos adelante y pasemos a estos siguientes apartados. Entonces dice, quiero invertir en, pero en realidad lo que debería decir es un servicio para el futuro moderno. Entonces porque ya me adelanté y agregué unos títulos indies, Lo único que realmente necesito hacer es en esto, y también elegiré mi botón. Entonces Control C. Y los botones van a ser básicamente el mismo inicio y se les va a aprender más así. Eliminó este viejo. Y básicamente voy a hacer lo mismo por todos ellos. Entonces voy a eliminar este pliegue uno que controlaría V para pegar en uno nuevo como este y asegurarme de que estamos a los 40, como hicimos con éste. Por lo que 40 en todas partes. Y para cerrar estos, salta dentro de aquí control V. Una vez más 40 borran este que los organizó y hacen lo mismo para este último. Al igual que este control V. Justo ahí. Eliminar. Entonces ahora sigamos adelante y empecemos ya con nuestros textos. Adelante y terminó este. Déjame cambiar este próximo. Bagdad. Hazme saber. Ya terminé estos dos así. Y déjame terminar esto y último. Una vez más, vas a hacer esto mucho más rápido porque estoy copiando y pegando de dos archivos XD diferentes. Y eso es básicamente lo único que nos queda hacer aquí mismo es agregar imágenes. Entonces para esta primera, voy a sumar en esta imagen, cerrarla. Y esta siguiente va a estar en esta imagen. En realidad no voy a cambiarlos demasiado porque me pareció que funcionara así. Entonces creo que esto va a ser bueno. Por último, elige esta imagen para asistente virtual. Pero lo que podemos hacer con este tipo es simplemente agrandar un poco nuestra imagen. Asegúrate de posicionarlo está en algún lugar del centro, algo así. Voy a ir sí. A lo mejor un poco más abajo para que no veamos este borde frontal de este escritorio. Y eso es básicamente todo. Eso es todo. Esta página está completada. Como puedes ver, algunas páginas Degas menos nefasto, por lo que las páginas nos llevan más. Lo que tenemos que hacer ahora es saltar de vuelta a aquí al pie de página. Y vamos a elegir MDs control V. Y los voy a posicionar aquí. Entonces esto, los voy a secar afuera, movió hacia abajo o simplemente puedo organizarlos de esta manera, como así posicionado y abajo y narrativa grupal a digital así. Y ahora por fin, sólo voy a seguir adelante y reemplazar los nombres, obviamente todos estos. Por lo que estos van a contener estos nombres en la parte superior. Entonces sigamos adelante y sumamos la banca. Añadamos em banca. Este va a ser código QR Bay. Y finalmente en esta última se supone que sea asistente real o virtual. Así. Ahora que estamos aquí, podemos agregar rápidamente cualquiera de los enlaces a nuestro pie de página. Por lo que voy a copiar una vez más estos. Por lo que golpea el control C, el control V, los posicionó o justo aquí, posicionado y abajo. Seleccionar grupo de otros enlaces. Y estos van a ser sobre nosotros, contáctanos. Esto van a ser quejas. Y por último, la protección así. Ahora eso está terminado, vamos a comprobar rápidamente. Como se puede ver, se encuentran en todas partes en cada una de estas páginas en lugar de esta última. Entonces vamos a arreglar rápidamente los datos. Asegúrate de que esté en la parte inferior posicionado su mano. Terry Howard, hemos completado nuestro antisionista todas estas páginas. En el siguiente video, te voy a mostrar cómo puedes crear estas tumbas. Y son realmente rápidos porque lo único que realmente tenemos que hacer, o hagámoslo en este video. Simplemente usa tu antigua llave. Posicionado así. Acercar. Contamos con un diseño de inicio de sesión. Tenemos un diseño de registro así. Y eso es básicamente lo único que voy a hacer es incluir mis formas e incluir mis imágenes, India. Entonces vamos a saltar rápidamente. Arrastraré y soltaré mi imagen dentro. Haremos doble clic o lo reorganizaremos. Atrévete así. Él tendría Control C. Eliminar para controlar v, Sólo para que pueda hacer las cosas más rápidas. De todos modos, las imágenes siguen en la cima. Y lo que necesitamos es nuestro botón. Entonces, usémoslo. Golpear Control-C. Saltando justo aquí, borrado este viejo, control V. asegura de que estemos en el centro aquí. Ver 75, queremos que esté a los 80, por lo que 12345. Veamos por qué eso. Vamos a posicionar esto y hacia abajo. Podemos seleccionarlo todo y agruparlo. Más. Centro de testigos, desagruparlo. Control C para copiar este botón aquí mismo y borrar el control V. Y vamos a ver, 345678. Creo que va a funcionar bastante bien. En veamos. Sí, vamos a agruparlos. Veamos qué tenemos. Y entonces tal vez podamos jugar con el espaciado y un poco más. Creo que va a funcionar bastante bien. Sí, creo que 80 va a funcionar muy bien con esta cadera. Y por último, vamos a Desagrupar esto. Y lo último que quiero hacer por estas dos páginas es incluir estas formas. Entonces simplemente puedo saltar aquí y puedo copiarlo y estas dos formas básicamente. Entonces sigamos adelante y hagamos eso realmente rápido. Entonces saltaré dentro de mi héroe, localizaré a mi héroe Elementos, golpearé Control C, y saltaré de nuevo, digamos página de inicio de sesión. Entonces este, control V para basar a mi héroe Elements old les dejó caer en algún lugar justo debajo de aireación. Me posicionaré aquí mismo. Y veamos, tal vez pueda hacer doble clic posicionar este círculo aquí. Puedo posicionar esta X aquí mismo, girado un poco. Dónde está mi línea aquí está. Puedo posicionarme, está en algún lugar por aquí. A ver. Puedo rotarlo un poco a algún lugar así. Golpea el control C en todos mis elementos y salta aquí mismo. Controlarías V, lo arrastraste todo el camino hacia abajo. Y lo que puedo hacer en realidad es rotar esta posición X aquí. Entonces puedo seguir adelante y muertes para estar en algún lugar por aquí, tal vez incluso rotarlo un poco más así. Y también puedo mover un poco más mi círculo a algún lugar por aquí, por ejemplo. Y eso es básicamente todo para esta playa. ¿ Qué queremos hacer? A ver. Realmente no me gusta esto. Cruza tal vez aquí y tal vez pueda ir aquí un poco. Sí, eso es un poco mejor. Lo que vamos a hacer ahora es realmente interactuar entre dos, estos dos enlaces. Acude a un prototipo. Haga clic aquí en este. Arrástralo. Por lo que vamos a usar el paso o para animar nota fácil punto cero. Veamos seis segundos. Y yo también voy a hacer lo mismo por aquí. Y veamos cómo funciona eso. Por lo que van a poder cambiar rápidamente entre no tener una cuenta y tener una cuenta. Para que veas cómo funciona eso. Y todas estas formas se están llevando a cabo realmente muy bien. Por lo que se puede ver la cruz y la línea morfándose realmente bien. Todo salta a la posición y funciona muy bien. Entonces eso es todo para este video. En el siguiente video, te voy a mostrar cómo puedes empezar con los dashboards y antes de que empecemos con el dashboard, así que te voy a mostrar cómo realmente puedes conectar esta navegación y cómo puedes interactuar aún más entre todos estas páginas. Porque ahora tenemos una página de inicio de sesión y registro completada, y tenemos este botón de inicio de sesión en la parte superior. Y estos dos botones que nos van a llevar en realidad al propio Dashboard. Entonces te veré ahí. 45. Crear diseño de diseño 7: De acuerdo, sigamos ahora con las pantallas del tablero y hagamos lo mismo como lo hicimos hasta ahora. Tan completa tu vieja llave, posición en el terror. Y diseño de tablero. Así. O saltando al prototipo, haz clic aquí y llama a este chico judío. Mi papá. Saltar de nuevo al diseño. Y antes de que realmente iniciemos el diseño del tablero, terminaré nuestra navegación porque queremos conectar todas estas páginas y asegurarnos de que funcionen. Por lo que ahora mismo en este momento, si selecciono alguno de estos, si golpeo mi vista previa de escritorio, puedes ver que al hacer click en cualquiera de estos no funcionó. Entonces tenemos que conectarlos a todos y asegurarnos de que sí funcionen. Entonces cómo vamos a hacer eso es bastante simple en realidad. Entonces vamos a saltar entre todos estos estados. Entonces si recuerdas de este video, digamos que tienes que agregarlo para cada estado individual para que todo funcione correctamente, porque este es el estado original o un estado predeterminado de este principal. Ahora bien, esta es la cuenta Estado solo tarjetas de etapa y así sucesivamente y así sucesivamente. Por lo que tenemos que añadir es que para todos y cada uno de los estados. Entonces, ¿cómo hacemos eso? Es bastante sencillo. En realidad. Simplemente entra dentro de tu modo de prototipado y puedes abrirlo y editar desde aquí. O simplemente puedes copiar a todos estos elementos separados y arrastrar y soltar estas flechas para que puedas hacer lo que quieras con ellas. Vamos a elegir la transición. Destino son cuentas diseñadas. Entonces por eso utilizamos esta abreviatura de diseño. Vamos a utilizar la animación disolver. Y no estoy usando auto enemigos para estos porque a diferencia de un login y registro, estos, sí tienen diferentes elementos. Estos dos básicamente tienen exactamente los mismos elementos. Entonces la transición entre sí muy bien, pero todos estos otros tienen elementos completamente diferentes. Entonces por ejemplo, esta página y esta página. Por lo que auto animable no funciona como debería. En lugar de facilitar hacia fuera, voy a usar Easy and out. Y voy a usar 0.4 segundos para la duración de mi transición. Entonces si lo llevo a la vista previa, haga clic en la cuenta, se puede ver que hace transición muy bien y la transición no dura una eternidad. Entonces lo que podemos hacer a continuación es en realidad bastante simple. Podemos saltar a Lawrence y como dije, puedo seleccionarlo desde aquí. Y en lugar de arrastrar esta flecha, simplemente haré clic. Y necesitaré escoger de esto aquí mismo. Necesitaré elegir alongs y diseño. Y va a mantener todos los mismos ajustes. Por lo que tarjeta click justo aquí, elige dónde está aquí, Diseño de tarjetas. Entonces aquí estamos. Invertir. Entonces, una vez más, vamos a hacer lo mismo. Tan invertido y se fue a click localizar invertir diseñado aquí está, digital parecen tick y diseño digital. Por último, lo que vamos a hacer por el botón es seleccionar nuestro botón y en lugar de estado predeterminado ir al estado de terror porque quieres que gente realmente se pase el mouse y luego haga clic. Por lo que van a dar clic en el estado de horror y no en el estado predeterminado. Entonces básicamente la misma configuración, pero esta donación va a ser un diseño de inicio de sesión. Entonces nuestra primera página aquí mismo, así que disciplina. Y voy a volver al estado por defecto, y eso es básicamente todo para este estado de nuestra navegación. Vamos a editar la ley con ese punto más adelante porque ahora estamos en la página de inicio y logo type point nos está llevando a la página de inicio. Por lo que lamentablemente tenemos que editar datos en cada pantalla, pero no todas estas otras cosas. Entonces vamos a saltar a las cuentas. Y desde las cuentas básicamente, vas a hacer lo mismo. Por lo que nuestra corriente va a seguir siendo el mismo logo en ese punto. Intentemos editarlo, pero no creo que vaya a funcionar. No. Como puedes ver, aquí no tenemos Homepage diseñado. Por lo que simplemente puedes hacer clic y arrastrarlo fuera. Y eso básicamente va a negar tu selección. Por lo que una vez más, alongs eligen de aquí mismo. Entonces ahí es donde nos lanzan. Tarjetas de deseo, aquí mismo, Diseño de tarjetas, invertir, básicamente lo mismo. Así que invierte, diseña digital aquí mismo. Y veamos el diseño digital. Siguiente arriba. Déjame comprobar rápidamente mi botón de inicio de sesión, ver si el cursor funciona. No lo hace. Por lo que básicamente tenemos que hacer esto por todos ellos. Entonces donde estamos maderando diseñado Harrier. Pero una vez más, vas a hacer esto justo en este aeropuerto y luego vamos a copiar y pegar esta navegación a través de nuestras, nuestras tablas. Y básicamente va a funcionar muy bien. Por lo que voy a hacer doble clic elegir mis cuentas de esto y donde estamos en nuestras tarjetas de conteo y diseño, diseño para elegirlo diseño ráfaga, digital, InDesign, donde somos carrera. Y por último, una vez más, nuestro botón estado Horace. Vamos a elegir un inicio de sesión en InDesign, volver al estado predeterminado. Y ahora pasemos a algunos de estos otros vieron, voy a pausar el video aquí y hacer las tarjetas, invertir en digital y luego volver a ustedes mañana. Información. Ok, ahora sí los completé todos aquí estoy en mi estado por defecto, como pueden ver, que es nuestro estado de la página principal. Entonces lo que voy a hacer a continuación es volver a saltar a mi pestaña de diseño. Voy a copiar este salto de navegación aquí, eliminar este, golpear el control V para pegar este en. Y básicamente voy a seleccionar la cuenta desde aquí. Y si volvemos al prototipo, se puede ver que tenemos todos estos seleccionados. El único que no tenemos es el punto de toque del logo. Pero saltemos rápidamente o diseñemos para que podamos basar todos estos en. Entonces voy a borrar este, mantener el control V tomó pieza que m posición justo debajo de nuestra parte superior. Ahora, como siempre lo hicimos. Yo sólo voy a ir rápido adelante y base, base base para que no perdamos demasiado tiempo. Cotizamos aquí y lo aplacamos. Y ahora sigamos adelante y esto es digital, así que selecciona Estado Digital. Este está invertido. Esto es Cards. Este es C, céspedes. Y por último, esta son cuentas y ya está seleccionada. Ahora lo que podemos hacer es saltar al modo prototipado. Puedo acercar un poco para que podamos ver todos nuestros, nuestros tableros. Y lo que queremos hacer básicamente se usa mucho con el punto DAP, que es este aquí mismo. Haga clic y arrástrelo a la página de inicio y eso es todo porque va a contener toda la misma información. Entonces qué tenemos que hacer eso aquí mismo porque estábamos en la página de inicio y no puedes seleccionar la página de inicio desde la página de inicio. Entonces por eso tenemos que hacerlo, aquí. Pero como puedes ver, es realmente rápido y fácil y compra solo un par de segundos. Entonces eso es lo clave con esta navegación. Sigue repitiendo y repitiendo, y ese es el principio básico de la interfaz de usuario y el diseño de UX es la repetición. Por lo que todo se repite todo el tiempo. Entonces Dairy, cómo es ahora lo hicimos lo hemos completado todo y podríamos volver al estado de diseño. Puedo hacer click en mi vista previa de escritorio para saltar dentro de mi vista previa y mostrarte cómo funciona todo. Entonces como pueden ver, tenemos todos estos estados en los que hemos trabajado. Por lo que ahora agregó cuentas cíclicas y préstamos de clic, haga clic en tarjetas, invierta digital, todo funciona como debería. Y también puedo dar clic aquí para volver a la página de inicio. Para que veas cómo funciona esta transición con la disolución. Creo que funciona bien. Y reforma aquí mismo cuando pases el mouse y pinches justo aquí, te va a llevar a la pantalla de inicio de sesión. A partir de aquí. Se puede revisar estos dos. Y tienes esta bonita animación. Y acabo de notar que no arreglamos estos botones para iniciar sesión e inscribirme. Entonces hagámoslo ahora. Entonces saltaré aquí mismo. Saltando a nuestro texto, escritura descontenta Login. Voy a copiarlo e ir a nuestro estado de horror, como este estado por defecto. Y en esta próxima, le voy a escribir que se apunte. De esta manera, ve a nuestro estado de horror, registro seleccionado, salida láctea, y vuelve al estado por defecto. Entonces una última cosa que nos queda hacer para este video, y en realidad vamos a empezar con el diseño del dashboard en el siguiente video es conectar el login y registrarnos con esta pantalla de dashboard. Entonces vamos a saltar al prototipo. Haga clic en este. Voy a ir al estado de terror y arrastrarlo porque está justo aquí. Y básicamente voy a usar la misma configuración deuda que usamos. Por lo que voy a volver al estado por defecto. Haga clic aquí. Ve al flotador, encadenado así, y cámbialo de nuevo al estado predeterminado. Entonces vamos a previsualizarlo y ver cómo se ve. Por lo que voy a dar clic aquí para previsualizarlo. Una vez más, nuestras animaciones funcionan realmente bien y todo funciona como debería cuando tú, sin embargo, te va a llevar de vuelta a esta pantalla. Y vamos a probarlo aquí mismo. Por lo tanto, cambiemos al hover de registro. Y funciona así. Entonces en el siguiente video vamos a empezar a trabajar en esto. Y vamos a conectar todo esto para que podamos cambiar entre todas nuestras diferentes pantallas, que vamos a diseñar más adelante, sólo para mostrarte cómo va a quedar esta animación, cómo va a trabajo, todo ello. Y te veré en el siguiente video. 46. Crear diseño 8 8: Ahora que hemos completado nuestra navegación, saltemos dentro de nuestro diseño de tablero. Y voy a acercarme un poco más al igual que lo hicieron ustedes pueden ver. Y básicamente, el diseño de tablero de escritorio va a reflejar lo que ya hicimos hasta ahora. Entonces básicamente, vamos a tener exactamente la misma configuración aquí en términos de color, en términos de imágenes, en términos de estilo y así sucesivamente. Simplemente vamos a adaptar eso básicamente al diseño del tablero, los principios del tablero y así sucesivamente. Entonces empecemos desde nuestra navegación. Por lo que tenemos decidir bar justo aquí. Y lo primero que voy a hacer es en realidad en los ítems seleccionados. Por lo que estamos seleccionados aquí mismo en el tablero. Voy a cambiar el color del icono del tablero. Entonces voy a usar en este color aquí mismo, lo voy a aplicar. Y vamos a ver si sí aplicó. Lo hizo. Y voy a dejar el texto del tablero tal como está. También voy a dar clic aquí para que pueda cambiar esto para que se vea así. Y quizá podamos trabajar en nuestra navegación un poco más tarde una vez que realmente tengamos algunos más de estos creados. Entonces puedo seguir adelante y convertir esto en un componente por ahora. Entonces pulsa tecla Control, y este sólo va a ser nuestro estado por defecto, pero vamos a trabajar en los otros estados, litro. O incluso puedo hacer eso de vez en cuando vamos a hacer animaciones más tarde. Entonces hagámoslo en realidad ahora. Entonces, como dije, estamos en estado por defecto. Pasemos ahora al nuevo estado. Vamos a llamar a estos datos de cuenta. Vamos a abrir cuenta profunda. Y vamos a mover este Selector hacia abajo en el centro de nuestra cuenta. Vamos a volver a cambiar esto a este color gris para que pueda seleccionarlos a ambos en simplemente click bolt en el color gris. Voy a seleccionar mi cuenta. Y si te llevo de vuelta aquí mismo, y podemos ir al estado por defecto, puedo dar click aquí y ver este color. Entonces este es mi collar el cual voy a terminar usando para todos ellos. Por lo que ahora volvamos a la sección Cuenta y vamos a seleccionarla y elegir este color. Y para el ícono en sí, vamos a seleccionarlo. Voy a usar este color. Para que pueda volver atrás, crear un nuevo estado y lo voy a llamar transacciones así. Y en este, simplemente voy a saltar aquí mismo. Selecciona este color gris. Haga clic aquí, haga clic aquí. Entonces ahora que tenemos datos, podemos pasar al siguiente estado. Y este estado, lo voy a llamar céspedes para los préstamos. Una vez más, n lo siento. Podemos volver a las transacciones y me olvidé de mover selector de mesa. Supongo. Podemos volver a los pulmones y en largos, voy a asegurarme de que cambie estos. Por lo que una vez más, esto va a ser, este icono va a ser decolorido. Y por último, vamos a pasar de aquí. Se van a crear transacciones fuera. Y veamos rápidamente lo que tenemos hasta ahora. Por lo que estamos en estado de defecto, transacciones de cuenta y pulmones. Pasemos ahora y creemos un nuevo estado. Vamos a llamarlo actual. Y en las tarjetas vamos de nuevo a cambiar esto. Volvamos a nuestros colores. Voy a elegir este color y para mi ícono y voy a ir con verde. Cierra esto. Y vamos a crear un nuevo estado. Lo vamos a llamar inversiones, así. Por ello, voy a mover esto una vez más. Vuelve a mis colores. Seleccione este. Una vez más, tenemos esta repetición, pero qué puedes hacerlo de UI UX Design en su conjunto. Entonces vayamos a lo digital, que va a ser nuestro estado final. Mis inversiones en deuda. Asegúrate de que esté gris digital. Y vamos a dar click aquí para el ícono. Y eso es básicamente todo. Ahora corremos rápidamente. Por lo que tenemos digital, tenemos inversiones, tarjetas, préstamos, transacciones, cuenta, y el estado por defecto va a ser nuestro dashboard. Si te preguntas por qué no lo creé nada para el cierre de sesión. Básicamente, cuando los usuarios hacen clic en el Cerrar sesión, los van a llevar a la pantalla de inicio. Entonces por eso el cierre de sesión está ahí. También puedes trabajar con tu cliente y con tus desarrolladores si quieres llevarlos de vuelta a aquí. Pero por ejemplo, en mi caso, creo que es mucho más inteligente llevarlos de vuelta a la página principal porque tal vez quieran explorar algunos servicios adicionales que su cliente tiene para ofrecer. Y cuando están aquí en las páginas de inicio de sesión y registro, y simplemente no son navegación, por lo que no pueden salir de su, simplemente pueden volver a iniciar sesión. Entonces ese es el beneficio. Si los llevas de vuelta a la página principal, pueden navegar hoy por dónde alrededor y simplemente elegir la fecha de servicio deseada. Entonces sigamos ahora y rápidamente agregaré mi imagen aquí. Por lo que tengo estas imágenes en mi computadora. Simplemente estaba arrastrando y soltando uno desde mi computadora dentro. Se puede ver aquí mismo. Y estoy usando estas imágenes y estas son en realidad de un chapoteo. Y lo hice hace años, en realidad los corté, los incluí aquí, pero también puedes usar ajustes de plugins. Caras de Ui es el plug-in donde puedes tomar estas imágenes de nosotros placer y así sucesivamente. N d ya hizo el trabajo por ti. Pero tengo estas imágenes en mi computadora y una vez más, están libres de EU. Blush, y los creé hace años ¿Pensaría algo así como 50 caras masculinas, 50 caras femeninas, algo así. Entonces, ahora sigamos adelante y empecemos por incluir nuestra información. Y cambiemos esto a TDT diarreica. Entonces, aquí están sus estadísticas para, digamos diciembre 222211, por ejemplo. Bienvenido de nuevo Michael. Creo que eso funciona bien. Cuentas principales todo lo hemos creado eso. Entonces vayamos ahora a las cartas. Entonces vamos a llamar a esta tarjeta de débito. Y este es el estado que ya muestra, así que mientras que hasta esta fecha. Por lo que en realidad necesitamos una tarjeta aquí. Entonces vamos a tomar uno de la sección actual. Entonces voy a llamar a esto, así que voy a golpear a Control-C para copiar esta tarjeta. Voy a saltar. Nuestro salpicadero, salta dentro de aquí, control de plomo V para pegar en mi tarjeta dentro. Así. También voy a mantener mi tecla de turno para reducirla en tamaño. O incluso puedo hacerlo así, así. Entonces lo que podemos hacer un siguiente obviamente es reducir el tamaño de estos. Entonces voy a volver al blanco y negro reciente por ejemplo. Creo que funciona bien. Y ahora sigamos adelante y empecemos editando nuestro logo. Entonces usemos el muro de ley. Es el nuevo banco, ese es el color del logo del texto. Entonces vamos a escalarlo en algún lugar por aquí. Y simplemente acerquemos para que podamos mover nuestros ataques a algún lugar por aquí. Creo que funciona bien. Logotipo reciente, vamos a reorganizarlo un poco. Entonces, por ejemplo, algo así. Y también puedes asegurarte de que estás en disuasorio descentrado. Por lo que básicamente puedes mirarlo si quieres. Entonces voy a posicionar mi logo. Veamos, 1010 píxeles funciona bien con este caso. Píxeles de tanque. Ir a seleccionar mi texto y vamos a ver a dónde podemos ir. A ver 18. Creo que funciona bien. Vayamos con ángulo blanco. Voy a añadir negrita aquí. Tan audaz, y lo voy a agregar a mis estilos. Voy a moverlo aquí abajo. Perdón, no, 16 no, pero este perno 18, lo voy a mover aquí así. También me voy a asegurar que esté ubicado aquí. Para este voy a usar, veamos 16 blancos. 16 blancos, y eso funciona bien. Diez, vamos a ver. Diez como posición de suciedad y diez abajo. Van a hacer lo mismo por estos dos. Al igual que esto. A lo mejor 20, sí. Y vamos a posicionarnos también y así podemos mirarlo de aquí a aquí. Selecciona estos para asegurarte de que estén en el centro. Y ahora podemos borrar este. Y eso es básicamente todo. Ahora, todo lo que necesito hacer es volver a mi panel de capas. Por lo que una vez más tenemos nuestra tarjeta gris. Voy a quitar descarte BG y obviamente puedes seguir adelante y crear la paginación sobre emisión si quisieras cambiar entre tu carrito. Y quizá podamos hacer eso aquí también. Entonces, vamos a ver. Sí, hagámoslo. Entonces voy a duplicar mi tarjeta y una vez más. Entonces vamos a tener visado vigente. Vamos a tener MasterCard y Visa ella una vez más. Qué calidad sólida, ver, crédito. Así. La razón por la que estoy teniendo estos tres es porque voy a crear un componente. Y saltemos adentro y veamos qué podemos tomar desde aquí. Por lo que podemos saltar aquí mismo, mantener el control y hacer clic, hacer clic derecho copiar porque solo queremos tener estilo de disco para nuestra tarjeta. Entonces voy a volver aquí, esconder nuestro primer auto porque lo hemos completado. Puedo hacer click justo aquí, hacer clic en apariencia basada para que podamos tomar deudas. Y lo que quieren hacer es simplemente usar mi logo de MasterCard. Voy a reducirlo sólo un poquito. Voy a asegurarme de que sean diez focos que voy a ocultar mi visa. Y eso es básicamente todo. Hemos creado la segunda tarjeta. Ahora sigamos adelante y ocultemos este. Tenemos crédito reciente. Bueno, veamos qué hemos hecho hasta ahora. Por lo que estos son en realidad crédito. Entonces tomemos sólo y éste por ejemplo. Así que haga clic derecho en copiar. Entonces sólo me interesan los colores y nada más. Por lo que voy a seleccionar este basado con el botón derecho, haga clic derecho en apariencia basada en realidad no basada. Y eso es básicamente todo. Por lo que ahora tenemos nuestras tres cartas. Entonces lo que voy a hacer es empezar realmente por crear nuestro componente. Y para ello, voy a primeras cosas primero posicionar estos ahora por debajo de nuestro texto. Y vamos a la edición grupal. Entonces tuvo control en g y voy a llamarlo tarjeta. O veamos, los autos Dashboard aún mejor para que puedas saber en tus componentes qué es todo. Entonces a partir de aquí, lo que podemos hacer en realidad es hacer click aquí y ver cómo se ve esto. O en realidad dejémoslo ahí. A lo mejor podemos incluso ir uno mejor y tener éste como seleccionado en estos no se seleccionan. Eso me gustará aún más. Entonces vamos a cerrarlo y golpear el control, kay, solo para crear un componente. Entonces ese es nuestro estado por defecto. Este es nuestro próximo estado. Entonces llamémoslo, no sé estado ni Carrito. Dos. Así. Lo que vamos a hacer en este es dar click aquí mismo, y luego elegir este color. Da clic aquí, elige este color porque van a cambiar. Entonces vamos a bajar esta obesidad a 0, sólo para que podamos cambiar a esta tarjeta. Y entonces lo que podemos hacer es básicamente cambiar en esto. Entonces solo le vamos a dar un nombre de débito master card. Y puedes cambiar esto si quieres, pero voy a dejarlo ahí porque de todas formas es solo por el ejemplo. Entonces, ahora lo cerremos y creemos un nuevo estado. Entonces tarjeta tres, así. Y en este nuevo estado básicamente vamos a hacer exactamente lo mismo. Entonces voy a dar clic aquí, cambiar en disco académico a verde, clic aquí, cambiar esto a gris. Voy a bajar la obesidad del descarte. Para que pueda ver Descartar. Y yo lo voy a llamar, Vamos a ver, Visa, tarjeta de crédito. Y me voy a quitar de éste. Entonces tenemos adeudo y tenemos crédito. Y esto básicamente lo es, lo único que nos queda por hacer es obviamente prototiparlo. Entonces voy a dar click en este y vamos a ir al estado. Entonces carta para auto enemigos es entrar, salir y 0.4 segundos, creo que va a funcionar bien. Y vamos a ir al carrito tres. Acude al siguiente estado. Entonces este va a ser uno actual o un estado por defecto, lo siento, este va a ser el actual tres. Y por último, como puedes ver, es mucho más fácil cuando no tienes demasiados estados para animar. Entonces vamos al estado por defecto, y esta va a ser nuestra tarjeta también. Así que saltemos al modo de vista previa solo para ver qué tenemos hasta ahora. Entonces voy a dar click aquí mismo. Se pueden ver estas bonitas transiciones entre nuestras tarjetas y se puede ver cómo funciona todo esto. Creo que realmente se ve bien. Entonces sigamos ahora y hagamos básicamente lo mismo pero con éste. Entonces lo que necesitamos para eso es saltar dentro de él. En realidad necesitamos que esto se llame pestañas de ayuda. Y lo es. Entonces vamos a ver, podemos saltar dentro y onclick, podemos seleccionar todos estos. Entonces hagamos lo mismo como hicimos nosotros. Entonces este va a ser nuestro primer y original estado. Por lo que ya copié este texto. Simplemente lo voy a cambiar para descubrir. Y voy a cambiar esto a blanco porque en un minuto sólo voy a hacer rápidamente algunos cambios a este fondo. Entonces lo primero que voy a hacer en realidad es, vamos a ver, cerrar a este chico Control D. Y le voy a dar un color. Entonces vamos a ver, Ayuda Tab Color. Mi papá, en realidad voy a aplicar este color. Y porque ahora no podemos usar estos, vayamos con el blanco y vayamos con o aún mejor, quizá podamos ir con este color. A ver. Sí. Y estos pueden ser blancos. Por lo que sólo para indicar que esto está seleccionado, como pueden ver, ahora tenemos algunos cambios aquí. Por lo que estos para seleccionados son verdes, éste no lo es. Entonces lo que realmente podemos hacer es saltar por dentro aquí mismo y elegir este color. Y ahora para esto, en realidad podemos ir verdes, solo para que podamos tener consistencia entre estos elementos. Entonces lo que podemos hacer aquí mismo, si no te apetece en este color de texto, puedes cambiarlo a este color. Creo que va a funcionar bien. Saltemos dentro de un modo de vista previa y veamos cómo se ve eso. Creo que va a funcionar bastante bien. Y lo que necesito aquí mismo son esos elementos que utilizamos a lo largo de nuestro diseño. Por lo que en realidad puedes saltar y ver dónde las usas. Entonces vamos a ver, aquí los hemos usado. Entonces volvamos a nuestro panel Capas. Para que pueda saltar dentro, usar mis elementos. Golpeamos Control C solo para copiarlos. Y retrocede todo el camino hasta aquí y salta dentro, posicionado justo aquí. Por lo que tuvo el control V y asegúrate de que estén al 100% solo para que los puedas ver. Pondré el desorden aquí mismo porque si recuerdas, tenemos esa mezquita. Pondré todos estos elementos a la espalda. Abramos nuestro auto klutzy de Marte BG es demasiado grande. Entonces voy a organizarlo un poco así. Y vamos a ver. Incluso puedo ir a la ficha de ayuda color y vera-sierra para 6723110. Por lo que 46123110. Así. Ahora encaja perfectamente. Y en realidad voy a reducir el tamaño de este círculo a algo así. Creo que va a funcionar bien porque una vez más, vas a bajar la resolución. Perdón, la obesidad de estos elementos. Voy a asegurarme de que este llamado sea más pequeño. Y lo vamos a ver a las diez. Creo que eso funciona bien. Donde se delinea aquí lo es. Lo vamos a posicionar ahí o podemos reducir su tamaño también. A ver, podemos cambiarlo para que sea así por aquí creo que va a funcionar bien. Y finalmente tenemos esta cruz y toda su posición la, veamos qué podemos hacer aquí y tal vez podamos moverla a la cima. Por ejemplo, aquí mismo. Y sobre nuestros elementos, bajemos la obesidad a 15 porque eso es lo que era. Y ahora sigamos adelante y creamos esto ayudó dap como componente. Por lo que controlaría la llave. No hice esto por éste porque acabo incluir un componente dentro con el fondo BG de un auto, no pude hacer eso. Entonces realmente todo depende de ti. Si quieres hacerlo así o así, solo quiero mostrarte diferentes opciones que tienes. Por lo que para la pestaña de ayuda, tenemos estado predeterminado. Vamos a tener un nuevo estado, C sólido, opción uno o Artículo uno o ayudar a uno o como quieras llamarlo. Entonces en realidad voy a copiar esa información. Mi papá, como papá. Entonces básicamente esto es para ayudar a tus usuarios a navegar por el sitio web. Y en esta opción uno, vamos a jugar con la paginación obviamente. Entonces vamos a elegir esto para que sea verde y esto va a ser blanco. Y sólo déjame comprobar si esto es blanco. Lo es. Y cerremos esto y pasemos al siguiente y último estado. Entonces les vamos a dar una opción para comprar esto. En la opción a, obviamente vamos a cambiar esto a verde, vamos a cambiar esto a blanco. Y también voy a cambiar el texto. No emparejen. Por lo que con base en distritos, con base en este texto. Y también puedes integrar el click si quieres resolver, por ejemplo, pueden hacer clic en este texto y se los llevará. Por lo que tenemos el elegir la tarjeta perfecta. Por lo que desconectarlos a la sección de carrito del tablero. Se puede integrar el click obviamente, y cuando el click, se los va a llevar ahí. Pero no voy a hacer eso. Simplemente les voy a mostrar lo que pueden hacer. Porque están mirando esta página desde aquí y la puede leer. Todas las criaturas, el carbono perfecto por va a ocurrir a paso. Aquí está. Para que puedan dar click ahí e ir allí. Una última cosa que quiero hacer es básicamente jugar con estos elementos. Entonces aquí están en el estado por defecto. Y voy a empezar a moverlas sólo para que podamos tener dat y emisión. Entonces voy a rotar un poco esto, posicionarlo aquí. Voy a rotar un poco esto, posicionarlo aquí. Voy a mover mi círculo hasta aquí, por ejemplo. Y también voy a mover esta herramienta oráculo aquí y puede estar arriba. Y por último, hagamos lo mismo para la opción dos. Entonces voy a mover mi disposición reticulada y son más mi identificación de disposición Laila ahí dentro más que mi llamado abajo aún más. Y voy a volver a este círculo y moverlo hacia arriba y tal vez hasta agrandarlo un poco así. Entonces ahora vamos a previsualizar lo que hemos hecho hasta ahora. Haga clic aquí. Por lo que una vez más, pueden cambiar entre estas tarjetas y se puede ver que las tarjetas cambian agobiante muy bien entre estos diferentes estados. Ahora podemos dar click aquí mismo y tenemos que prototiparlo primero. Perdón, me olvidé de ese escenario. Por lo que cuando hacen clic aquí, pueden ir a la Opción uno. Click Dare está en salida opción dos, por lo que utiliza la misma configuración desde aquí, que es una gran opción uno, básicamente lo mismo. Por lo tanto, simplemente elija Estado por defecto, elija Opción dos. Y por último, subasta a. Vamos a ir a un estado por defecto desde aquí. Vamos a ir a la Opción uno desde aquí. Y ahora vamos a previsualizar la aireación. Entonces, simplemente comprobémoslo. Todo funciona bien aquí. Y se puede ver cómo estos elementos básicamente están saltando, ampliándose. Y creo que se ven bastante bonitas y se ven bastante atractivas. Para que puedan traer a los usuarios y más alegría mediante el uso de esta app. Entonces lo que voy a hacer a continuación es en realidad traer algún detalle más realista aquí mismo a sus transacciones. Entonces, vamos a ver. Primero lo primero voy a Desagrupar esta grilla y voy a llamarla, vamos a ver. Necesitamos algo así como transacción. Entonces démosle un dat. Entonces este es el primero. Lo van a llamar Transacción uno. Voy a duplicar el texto. Voy a dar esta transacción a y posicionado aquí. Esta va a ser la transacción tres. Más mojado aquí mismo. Transacción para y si sabes cuáles son estos, puedes darles unos nombres justo dentro de una sección de estructura alámbrica. Entonces si sabes que estas son transacciones, puedes llamarlas directamente. Ahí. Pero no quería perder demasiado tu tiempo, así que solo lo puse aquí. Entonces déjame cambiar las cantidades aquí. Entonces digamos 47.20. Este siguiente va a ser 270.73 porque básicamente con estos números nunca estás alrededor de él. Por lo que nunca tienes 270 dólares, por ejemplo. Siempre estás apuntando algo así que solo para mantenerlo luciendo realista aquí. Entonces veamos 9.43 por ejemplo. Y vamos a dar esto último 171.18. Si eres honesto viendo por qué todos estos son menos es porque pagaste por estos servicios. Entonces por eso son menos algo. Entonces vamos a ver, hoy podemos dar esto. Yo también voy a dar esto hoy. Esto va a ser, veamos, 14 de diciembre de 2020. Y si eres un estadounidense del oeste, Reino Unido, puedes cambiar esto alrededor del SEW 1214. Entonces nosotros en Europa, ¿verdad? Así, ya sabes, escribes al revés. Entonces solo para no confundirme más, puedes cambiar estos para que se ajusten a tus necesidades. Entonces noveno de noviembre de 2020, y sólo voy a cambiar esto al 2020 también sólo para mantener las cosas mucho más consistentes. Como pueden ver, vamos a bajar. Entonces esta es la transacción más reciente y esta es la transacción posterior. Entonces, en realidad usemos estos mismos datos dos veces. Y vamos a dar este 24820. Así. En realidad voy a copiar y pegar algunos nombres comerciales aquí mismo. Entonces, por ejemplo, puedes imaginar que compraste café. Curio compró algo de ropa. Aquí, u, por ejemplo, pagó algunas utilidades. A lo mejor este fue el pago de tu auto, digamos que tal vez esto fue comida. Y el mismo día que pagas tu auto, quizá esperaste en fila. Por lo que hay que pensar en todas estas cosas para que se vean más realistas. Entonces una vez más, le voy a escribir comida. Voy a escribir encerrar. Se trata de utilidades. Y esto va a ser comida o pagos con tarjeta, perdón. Esto va a ser comida. Y finalmente en esto va a estar cerca. Entonces ahora voy a cambiar los colores de estos solo para indicar cómo los usuarios los van a ver para que puedan reconocerlos un poco más fácil. Entonces para la comida y suerte de por defecto aquí también, vamos a cambiarlo a escritorio verde oscuro para la ropa. Por ejemplo. Podemos elegir esto y ir con, no sé, vamos a ver, verde claro son si eso no tiene mucho sentido, quizá podamos hacerlo un poco más oscuro. Entonces tal vez éste para el cierre. Sí. Para las utilidades podrían ver tal vez podamos cambiar esto a rojo, por ejemplo, y los pagos de autos de Florida, podemos ir con este color solo para indicar diferentes opciones y en qué usuarios ya han hecho clic. Entonces lo que voy a hacer ahora es copiar y pegar algunos iconos aquí, sólo para que podamos colocarlos en la posición correcta. Entonces ahora los voy a pegar de nuevo. Missy, y estoy seguro de que estoy tallo dentro de aquí sólo para que pueda pedirlos un poco más amablemente. Entonces voy a posicionar esta comida aquí mismo. Voy a asegurarme de que sean diez píxeles. Aquí. Por ejemplo, el 15, veamos, 12345, año 18, la muerte funciona mejor. Yo voy a hacer lo mismo por debajo de cerca. Entonces vamos a acercarnos un poco. Asegúrate de que estoy en un centro y asegúrate de que voy 15. Por lo que diez en 2.5 utilidades. Por lo que tengo este ícono de posición aquí. Asegúrate de que estoy en un centro como este. Perdón, 12345, así que 15. Y finalmente por un auto pagos. Entonces, no lo hagas aquí mismo. Asegúrese de que quiero decir, como centro 12345. Creo que eso funciona bastante bien. Ahora, cambiemos sus colores. Entonces para los pagos de autos que hemos descubierto, para las utilidades, tenemos este color, para la ropa tendría este color. Y finalmente para la comida, tenemos color escritorio. Lo que voy a hacer a continuación es crear algunos componentes adicionales. Entonces usemos la comida para que pueda usar Control X para cortarla, ir a mi comida, golpear el control V para pegarlo en posición. Puedo agrupar estos y llamarlo etiqueta de comida. A pie etiqueta. De verdad quiero que hubiera controlado clave solo para que pueda crear mi componente. Y entonces lo que puedo hacer es usar este ícono. Entonces haga clic en él debe controlar x una vez más. Localice mi ropa. Entonces aquí están. Y hacer lo mismo. No son citas, etiqueta, clave de control. Y vamos a cerrar estos dos. Entonces obtenemos nuestros pagos de auto junto a golpear Control X. Lo sentimos, tenemos utilidades, pero seamos desperdiciados aquí. Escribe este control k. Y por último, arrastremos aquí nuestras utilidades y creamos pozos como este hit Control K. Y ahora por fin, porque tenemos a estos dos repitiendo, así que comida y ropa, lo que podamos en realidad hacer es ir justo aquí. Haga clic en nuestra comida y localizó la etiqueta de comida. Aquí está. Arrástrelo y suéltelo y simplemente posiciónelo y en su lugar. Entonces lo que voy a hacer es en realidad sólo alinear las cosas aquí mismo. Porque quiero que mi texto esté alineado con nuestra cuadrícula. Ese jumpin, muévalo aquí y quita los alimentos generales de aguas profundas. Mi papá. Y siempre puedes saltar la perspicacia y ver si estás alineado. Entonces veamos así, porque quería estar alineada con mi grilla. Eso es todo. Y finalmente por la ropa, LoginData, mismo. Así que arrastre nuestras pestañas se cierran aquí arriba. Aquí está. Sí, así. Y lo voy a posicionar aquí mismo y asegurarme de que esté en el centro una vez más, y asegurarme de que soy así. Y eso es básicamente todo. Hemos completado este apartado. Una vez más, cuando hacen clic, aprenden más, pueden ir a las transacciones y luego pueden ver más de esas transacciones. Para que puedan verlos en detalles. Por ejemplo, el café Starbucks. Y luego puedes integrar ubicación de tu transacción. Se puede integrar un poco más de trigo, que tarjeta, por ejemplo, pagado en profundidad y así sucesivamente y así sucesivamente. realmente puedas sumergirte en todos esos detalles. Ahora lo que realmente no me gusta de estos es el espaciado. Entonces quizá podamos trabajar un poco mejor en un espaciado. Y quizá pueda mover todas estas etiquetas para que correspondan con mis líneas de cuadrícula. Entonces hagámoslo. Entonces lo que puedo hacer es, vamos a ver, mover mi etiqueta de comida hasta aquí. Y se puede mover y mi ropa para actuar o escuchar, utilidades, pagos de autos, comida. Y por último, cito, sólo para que pueda mantener las cosas bonitas y organizadas. Y obviamente si tienes el número mayor, si terminó, no va a encajar, entonces puedes mover DES solo un poco, por ejemplo, para alinear hasta aquí, pero todo depende realmente de ti. Y puedes ver con tu cliente, ¿qué tipo de transacciones esperan? Porque la mayoría de la gente realmente hace estas pequeñas transacciones como 1597 y así sucesivamente. Pero si creen que van a hacer transacciones más grandes, entonces puedes trabajar con ellos y luego adaptar tu capa Adaptive Layout a eso. Lo que vamos a hacer finalmente, aquí mismo es trabajar en esta sección y no tenemos mucho que hacer aquí es simplemente reemplazar estas etiquetas y ancho, las que acabamos de crear. Entonces, arrastrémoslos y soltémoslos para que tengamos nubes. Y posicionarlo aquí así. Asegúrate de que estás en el centro aquí. Y yo lo voy a mover aquí. A continuación tenemos comida, así mismo. Asegúrate de estar en el centro de esta comida. Y vamos a trabajar en un espaciado en sólo un poquito. Entonces posicionémonos rápidamente. Contamos con utilidades. Entonces lo voy a posicionar o justo aquí. Asegúrate de que estoy alineado. Y finalmente tenemos pagos de auto son básicamente lo mismo. Te mostraré un alineado y eso es todo. Lo que voy a hacer a continuación se quita y estos textos de aquí, voy a posicionar aquí mis etiquetas y las voy a organizar una vez más. Por lo que los clods vienen en la parte superior y luego viene la comida, servicios públicos, el pago del auto después de la muerte está en el extremo inferior, básicamente en eso lo. Ahora los voy a seleccionar a todos y moverlos aquí justo un poco más cerca de mi gráfico. Y hablando de gráfico, vamos a trabajar rápidamente en ello. Entonces ahora tenemos cuatro colores diferentes aquí, y vamos a integrar esos cuatro colores diferentes dentro para indicar qué tan grande de un gasto es el artículo. Por ejemplo, la ropa podría estar debajo de una de las más grandes, sobre todo con la comida. Las utilidades son el segundo lugar en los copagos son quizás el tercero porque los pagos de autos generalmente no te quitan demasiado dinero cada mes. Entonces, ahora trabajemos en eso. Cómo voy a hacer eso es obviamente vamos a dejar este texto en Dutcher. Voy a hacer cuatro copias. Por lo que golpea el control D, D, D. Voy a llamar a esto un círculo cercano. Sólo para que yo sepa lo que es. esto le voy a llamar comida. Y ésta va a ser utilidades. Y finalmente, este último va a ser auto el I de Feynman, que obviamente les vamos a dar y sus colores. Por lo que para el círculo cercano, simplemente puedes hacer clic aquí para seleccionar tu color. O puedes acercar lo que quieras. Vayamos afuera. Y creo que estos dos, Sí, son diferentes. Así que ahora saltemos a la etiqueta de cierre o haga clic con el botón derecho en editar para significar componente. Aquí está. En este componente principal dentro de su ropa, en realidad vamos a seleccionar, vamos a ver. Voy a seleccionar este color. Y ahora coincide, como puedes ver con este ícono de la camiseta. Entonces si hago doble clic y lo muevo afuera solo un poquito. Veamos lo mismo a RB. No son lo mismo. Entonces necesito usar este color, ok? Por lo que ahora son completamente iguales, así que estoy usando este mismo color para ambos hasta el momento, 606406. Y eso es una vez más, las ventajas de estos componentes y componentes datan porque siempre se puede volver al componente principal editado. Y ahora si cerramos esto, te llevamos de vuelta a revelar. puede ver que es lo mismo y llevarte de vuelta aquí y se puede ver que cambiamos el color. Entonces volvamos ahora a nuestros círculos. Por lo que tenemos círculo cerrado. Voy a acercarme un poco y voy a asegurarme de seleccionar este color. Y luego tenemos círculo alimenticio. Voy a asegurarme de seleccionar este color. Utilidades, vamos a seleccionar este color. Y pagos de autos, voy a seleccionar este color. Si te preguntas por qué estoy eligiendo mis autos así, es porque. No se puede aplicar collares de borde simplemente haciendo clic aquí y luego haciendo clic en uno de estos colores porque sólo se aplican al color de relleno en sí, no al color de borde. Por lo que desafortunadamente, hay que crear un color de borde usando esa opción. Entonces lo siguiente, lo que realmente vamos a hacer es empezar con nuestro gráfico. Entonces básicamente cómo vamos a hacer es básicamente crear algunas secciones usando el lápiz para que podamos enmascararlas. Entonces empecemos con el círculo cerrado. Entonces voy a usar mi lápiz. Voy a flotar aquí mismo para que pueda mostrarme que ese es el medio. Voy a hacer clic en mantener presionada la tecla Mayús e ir todo el camino hasta, digamos en algún lugar por aquí. Y voy a dar click aquí y luego aquí para tener este tipo de triángulo. Yo lo voy a mover ahí junto con el círculo Claude. Entonces voy a sostener Shift Alt y lo siento, control de turno y amplificador para que puedan enmascarar ese aborto. Y lo voy a llamar cerca. Sólo para que yo sepa lo que es. Siguiente arriba es la comida. Y como dijimos, la comida va a ser el mayor gasto de probablemente. Así que pega p o haga clic aquí para el padre, una vez más, cursor hacia el centro, haga clic, haga clic en algún lugar del centro. Y voy a, por ejemplo, dar clic en algún lugar por aquí. Haga clic fuera más madera en la parte superior de nuestro control de turno de alimentos m para que podamos enmascarar ese parque. Esto se va a llamar comida. Contamos con utilidades. Y una vez más, las utilidades pueden ser caras, pero no necesitan serlo. Entonces veamos, tal vez podamos darles algo como esto. Y vayamos afuera. Vayamos a aquí, o puedes ir al revés como quieras. Colocar extremidad aquí mismo, golpea control de turno, utilidades de calidad del aire. Y si en algún momento, por ejemplo, su cliente quiere que reduzca el tamaño de estas utilidades. Se puede saltar de vuelta a aquí. Puedes hacer doble clic en el interior y puedes posicionar esto como quieras para que puedas aumentar o disminuir el espacio en disco para todos estos. Entonces por ejemplo, así. Y pongámoslo así. No voy a hacer pagos de auto porque los pagos de auto ya están ahí. Entonces dejémoslo ahí. Y eso es básicamente todo para este diseño que ya aplicamos en la sección de reelaboración información para DES. Si quieres hacer que esto sea ticker para que puedas saltar dentro de todos estos círculos. Déjame mostrarte rápidamente una deuda. Por lo que tenemos el gráfico y hay que seleccionar todos estos círculos. Y se puede, por ejemplo, hacer que sean 20. Y ahora se puede ver cómo se ve eso. Vayamos con 20. Y tienes que establecer realmente seleccionar todo el por separado, o puedes hacerlo desde el principio solo para ver lo que tienes. Entonces ahora tenemos mucho círculo dicker. Entonces si te gusta esto, puedes hacer eso. Pero voy a pegar ancho en temp solo para que me dé mayor consistencia con el resto de mi diseño. Por lo que ahí lo tenemos. Hemos completado nuestra primera pantalla de dashboard. Y simplemente voy a golpear el control D y llamarlo Cuentas de Dashboard o cuenta de diseño de dashboard como quieras. Y creo que eso es básicamente todo. Te veré en el siguiente video donde vamos a abordar esta pantalla de cuenta de dashboard. Y vamos a trabajar en ello más tarde. Entonces te veré ahí. 47. Crear diseño 9: Ahora empecemos a trabajar en y cuenta de diseño de tablero. Y lo primero obviamente es seleccionar aquí nuestra cuenta solo para indicar dónde estamos. A continuación voy a borrar éste y éste porque no lo necesitamos. Pestaña de ayuda, puedes dejarlo ahí. Siguiente arriba. Lo que voy a hacer es la información de tu cuenta así. Y veamos, la memoria puede posicionarlo para estar a los 40, por ejemplo, creo que eso va a funcionar bien. Entonces voy a mover estos tres. Asegúrate de que estamos a los 40 porque estamos a los 40 aquí mismo. Y lo que realmente vamos a presentar en esta cuenta la información es que el usuario va a poder ver, por ejemplo, qué cuentas han abierto. Entonces si recuerdas, hemos empezado a contar y así sucesivamente y así sucesivamente. ¿ Cuánto gastaron desde la apertura? Para que puedan ver todo eso. Y pueden, por ejemplo, hacer clic allí e ir a las transacciones para ver sus transacciones pasadas. Todavía van a tener esto ayudado dab porque es útil tenerlo ahí obviamente. Y por último, vamos a tener estos campos para que puedan añadirla ahí información, por ejemplo, pueden cambiar la forma en que nombran las exhibiciones en la tarjeta. Pueden cambiar la dirección si, por ejemplo, d movió y cambió la dirección, pueden cambiar el correo electrónico y la contraseña y así sucesivamente. Entonces hagámoslo ahora. Ahora nos ocupemos rápidamente de éste. Entonces voy a hacerlo, vamos a ver. Puedo quitar estos para que me pueda tener a mí mismo y pestaña vacía. Y llamemos a este total gastado. Al igual que papá. Voy a saltar dentro de mi cuenta principal y elegir estos dos. Por ejemplo, pulsa Control C. Haga clic aquí, podría controlar V y simplemente posicionar y también en la tecla de turno para posicionarlos allí. Ahora lo que voy a hacer es asegurarme de que ambos estén alineados al centro. Y veamos, puedo posicionar estos dos al centro y estos dos al centro así. Y vamos a dar esto. Entonces por ejemplo, total gastado desde la apertura. Y vamos a ver. Vamos a darle a esto algún otro número. Entonces por ejemplo, 96,507 herramienta para, vamos a ver. Por lo que algún gran número. Y este es el número que gastaron desde la apertura. Voy a asegurarme de que estén en el centro de canotaje y los voy a posicionar aquí mismo. Y lo vamos a llamar un día. Una vez más, pueden hacer clic aquí, ir al paso de transacción más tarde, y explorar todo su gasto ya que se les abre su cuenta. Lo que voy a hacer a continuación es saltar aquí mismo. Y vamos a ver, vamos a llamar a esta cuenta de Start. Lo que voy a hacer es saltar aquí mismo y localizar mi icono de cuenta Start. Entonces voy a ubicar aquí está, y arrástrelo y suéltelo a su posición. Y donde hacer más con aquí. Y lo voy a posicionar en el centro así. Y veamos, tal vez, no sé, 12 a los cuatro. Por ejemplo, voy a quitar este número y voy a posicionar a estos dos aquí mismo. Asegúrate de que estén en la línea izquierda, asegúrate de que estén posicionados a la izquierda para escribir esto. Vamos a llamar así a una cuenta de inicio de disco. Y vamos a ver. Estaré anclado el 23 de abril de 2020, una vez más, al pueblo británico de Estados Unidos, quien esté usando al revés. Por lo que 0-4 punto 23, se puede hacer en deuda también. Entonces 40, veamos cómo funciona eso. Creo que funciona bien. Veamos dónde estamos. Por lo que 1234. Sí, creo que eso funciona bastante bien. Lo que en realidad voy a hacer es quizá hacer esto y gris un poco. Entonces, danos color. Y realmente no me gusta este espaciado. A lo mejor 20. Sí, creo que eso funciona mucho mejor. Y dirección, hemos concluido estos tramos. Ahora lo que nos queda por hacer es completar los campos a continuación para los foros. Entonces simplemente voy a copiar todos estos. Entonces FirstName, LastName, contraseña de correo electrónico, y un botón pulsa Control-C. Y saltar aquí mismo tenía control v . Así que voy a pegarlos todos n Ahora lo voy a hacer es básicamente reorganizarlos un poquito. Pero antes que yo lo haga, porque no se puede ver ninguno de estos campos de formulario. Si puedes ver, porque este es el color de los campos foráneos es del mismo color del tablero. Entonces primero movámoslos todos abajo ayudaron porque de todas formas van a ir ahí. Entonces voy a abrir todos estos campos foráneos, campos de entrada. Y eso es seleccionarlos, elige color blanco solo para que los puedas ver en el tablero un poco mejor. A continuación, los voy a organizar. Por lo que el nombre y el apellido van a ir justo aquí. Entonces vamos a ver, tal vez podamos posicionar esto para ser 40 también, sólo para mantener la consistencia. Entonces así, puedes posicionarlos aún más abajo si quieres, pero creo que van a funcionar bien. A continuación, voy a posicionar aquí mi correo electrónico, asegurarme de que esté a los 40. Y vamos a jugar con algo de espaciado. Pero primero terminemos esto aquí mismo. Entonces, vamos a ver. Vamos a estar en 12345678. Posicionemos esto a los 80 sólo un poquito. Y lo que voy a hacer con el botón es porque se cambian estas rejillas. Voy a cambiar ligeramente el tamaño del botón para que pueda acomodar tres columnas aquí y tres columnas aquí. Entonces cambiemos entre ellos. Funciona bien. Y el texto aquí dentro va a escribir en editar información. Yo hago esto. Y voy a saltar dentro de mi casa, estado basado ese texto en, saltar de nuevo a las mazos principales y Harrier. Entonces lo que voy a hacer en realidad es posicionar Ds son así. A ver, 246. Entonces aquí estamos. Aquí mismo. Yo voy a hacer lo mismo por este. Y básicamente voy a saltar y adaptar mis campos para migrar. Así que así. Por lo que las cuatro van a tener seis columnas de ancho, así. Y cuándo hacer lo mismo por el nombre. Y básicamente aquí estamos. Hemos completado nuestra cuenta de Diseño para la página del tablero. Entonces lo que, una vez más, lo que pueden hacer aquí mismo es sembrar la cuenta en la que están. Por lo que abrió en esta fecha. Si por ejemplo tienen varias cuentas abiertas. Entonces, por ejemplo, uno está revisando, uno está ahorrando, uno es para deuda, crédito y demás y así sucesivamente. Entonces puedes seguir adelante e incluir la paginación y hacerlo igual que hicimos por esto y por las tarjetas, si te acuerdas. Por lo que rápidamente pueden hacer clic en la paginación y cambiar entre todas sus cuentas o bridamente Dan, y esta información se va a actualizar así como el ícono en sí. Entonces tenemos monto total desde el gasto. Entonces esta es la cantidad que gastaron desde que abrieron la cuenta con el banco. Una vez más, pueden hacer clic ahí e ir a las transacciones y explorar todas sus transacciones yendo hacia atrás, aún tenemos la pestaña Ayuda. Y por último, tenemos toda esta información sólidos agruparla solo para que podamos mantener las cosas simples. Entonces, por ejemplo, información personal como esa. Y pueden agregarle esa información personal. Entonces una vez más, si ellos, por ejemplo, se movieron por lo que cambian de dirección. Por lo que no tenemos la dirección aquí mismo, pero podemos incluirla. A ver, tal vez podamos poner la dirección justo aquí en la parte superior. Entonces vamos a ver, no lo tenemos aquí, pero rápidamente podemos incluir. Entonces hagámoslo. En lugar de usar seis, podemos usar un para, por ejemplo. Por lo que puedo saltar aquí mismo, 1234, FirstName, LastName. Por lo que puedo posicionarlo para que esté justo aquí. A ver, 1234. Mi papá y yo podemos golpear el control D y MODIS. Y ésta puede ser entonces nuestra dirección. O estoy pensando porque tenemos esta dirección, así que cambiémosla rápidamente. Así que desvestirse. Porque tenemos dirección. A lo mejor podemos extenderlo para poder jugar aún más con nuestras columnas. Entonces veamos, tal vez en lugar de cuatro, les puedo dar tres porque no necesito demasiado espacio para el nombre y apellido. Entonces veamos 33 así. Y finalmente, puedo darle a esto el espaciado de seis por ejemplo. Entonces 246, porque quiero incluir una dirección más grande, por ejemplo, sólo para que pueda indicar estos intereses. Por lo que ahí estaba, y ahora estamos terminados. Entonces, una vez más, si el usuario quiere cambiar su información personal, por lo que ya sea su nombre o apellido, si de alguna manera lo cambiaron y quieren cambiarla aquí, pueden cambiar la dirección o vagamente, si que se mudaron, pueden cambiar su dirección de correo electrónico y la contraseña. Y pueden hacer eso todo simplemente haciendo clic en agregar información. Por lo que edita la información. Entonces vamos al final, previsualice rápidamente esto, veamos cómo se ve todo. Y también puedes incluir estados flotantes para todos estos si quieres. que puedas, por ejemplo, incluir esta sombra de fondo que ya tenemos. Se puede, por ejemplo, hacerlo un poco más fuerte cuando el flotador aquí. Entonces puedes indicar que sí lo hicieron, pero por ahora, dejémoslo ahí. Entonces aquí tenemos esto o obviamente funciona bien. Tenemos el efecto hover y tenemos una corriente seleccionada. Entonces básicamente eso es todo para este video. Te veré en el próximo. Y veamos qué tenemos a continuación. Siguiente nuestras transacciones. Entonces te veré ahí. 48. Crear diseño de diseño 10: Ahora sigamos adelante y continuemos donde lo dejamos en el video anterior. Y en lugar de copiar este, en realidad voy a seleccionar y copiar en éste. Entonces veamos qué podemos hacer aquí. En este, solo quiero guardar tus transacciones porque en realidad estamos en la pantalla de transacciones. Entonces llamémoslo así. En primer lugar, cambiemos esto por un salto de transacciones aquí mismo, y llamémoslo las transacciones así. Y como dije, dentro de las transacciones se puede hacer clic aquí para, en lugar de aprender más, cambiémoslo a mucho más. Entonces, vamos a ver. Cargar más. Y veamos, puedo mover este seis. Entonces 123456, como diffs, me aseguraré de que esté en el centro de mis antecedentes así. Voy a pegarle a Control C. Y voy a volver a aquí. Entonces voy a golpear el control V para pegarlo. Voy a borrar estos viejos. Y voy a simplemente, y saltando aquí mismo, seleccionar a estos dos, posicionarlos un poco abajo. Entonces dos aquí. Y voy a asegurarme una vez más de que sean un centrado como ese. Por lo que una vez más, puedes hacer clic en cargar más y puedes extender todos estos para que puedan hacer un área desplazable. Entonces hagámoslo realmente. Para que pueda saltar dentro y tengo todas mis transacciones aquí. Para que pueda agrupar términos. Por ejemplo, vamos a ver, puedo golpear el control y G, y puedo llamar a esto transacciones así. Y también puedo hacer clic y hacer una cuadrícula de repetición. Y veamos, puedo extender esto a, por ejemplo, y no sé, digamos aquí. Y lo que puedo hacer con esto es hacer clic derecho en desagrupar cuadrícula. Entonces tenemos tres de estas transacciones. Puedes golpear el control G Si queremos, o simplemente puedes mover estas transacciones dentro de esta primera. Entonces este es nuestro primero. Este es nuestro segundo, luego éste es nuestro tercero. Entonces lo que realmente necesitamos hacer es renombrar estos. Entonces nuestro último fue de seis. Entonces esto va a ser siete. Esto va a ser 89101112. Yo dat. Y en realidad voy a golpear Control X para cortarlos. Y voy a caer término aquí mismo. Es cierto, película posicionada está todo el camino hacia abajo clic derecho Desagrupar componente, lo siento en grupo y nuestro grupo. Y quizá podamos incluso dejarlo ahí. Entonces no te estoy preocupando, pero tú consigues el punto. Lo que voy a hacer a continuación es dar click justo aquí y ustedes tienen estos tres justo aquí. Entonces este es un pergamino horizontal. En realidad vamos a usar más adelante cuando empecemos con el diseño responsive. Este es el desplazamiento vertical, por lo que arriba y abajo, y este es el pergamino en todas las direcciones. Y básicamente la deuda uno es más útil si estás creando un mapa, por ejemplo. Y quieres mostrar mapa en todas las direcciones. Entonces para este caso voy a usar scroll vertical. Entonces voy a posicionar esta área hasta aquí, por ejemplo, solo una especie de puedo indicar donde los usuarios pueden atornillar. Y puedo saltar aquí mismo, hit preview. Y dentro de nuestra vista previa, solo quiero mostrarte que cuando empieces a desplazarte, puedes ver cómo se ve eso. Entonces básicamente, pueden hacer clic cargar más. Se va a cargar más. Y pueden empezar a desplazarse e ir todo el camino hacia abajo. Obviamente, podemos cambiar los hechos para que las cosas sean más realistas, pero no nos empantanemos con detalles. Entonces obviamente estas fechas van a ir de aquí para abajo. Entonces este es el mes de agosto del año, tal vez este sea el dos de agosto, y luego van a bajar hacia enero y principios de año. Pero como dije, No nos empantanemos con esos detalles. Lo que voy a hacer a continuación en realidad es quizás podamos incluso extender esto. Bueno, vamos a ver. Tenemos 245. No lo sé. A lo mejor podemos bajar esto y tal vez extender esto sólo un poquito. Hagámoslo. Entonces voy a hacer esto un poco más estrecho. Y puedes ver el diseño responsive en acción aquí mismo. Pero vamos a hablar un poco de diseño responsive, un litro. Entonces voy a posicionar todos estos aquí abajo. Y dentro de nosotros grupo de rastreo, lo que tenemos que hacer ahora básicamente es que puedo saltar aquí mismo y ver si estoy a los 40. Entonces voy a reposicionar alguien's Así que tengo 35 aquí, así 12345. Entonces estoy en 4041 arriba. Voy a posicionarlo en Dare para estar a los 40. Y por último, voy a trasladar esto a aquí. Y obviamente se puede aumentar el espaciado entre todos estos. Entonces, lo que necesitamos hacer es abrirlos a todos y empezar a organizarlos uno por uno. Por lo que puedo usar hoy a d y a d y luego desplazarme hacia abajo. Por lo que fecha, fecha, fecha para especie de ver dónde estamos. Entonces dos d. D. No sé por qué sigue trayéndolo de vuelta, pero de todos modos me voy a desplazar hacia abajo. Por lo que una vez más, necesitamos estar a los 40. Entonces vamos a pasar a aquí 1234, que estemos en línea con nuestros textos. A continuación, lo que podemos hacer es realmente alinear todos estos elementos a este punto de cuadrícula. Entonces elegamos estas son las empresas. Starbucks son éste donde tenemos rey y luego más uno y seleccionarlos a todos. Estoy sosteniendo mi tecla de control y haciendo clic para que obviamente pueda seleccionar múltiples en ellos. Tan azul Rey, y finalmente, este último es polímero. Por lo que en realidad simplemente alinearlos a la cuadrícula así. A continuación, vamos a movernos en estos números. Por lo que simplemente selecciona tus números. Sube desde aquí. Voy a seleccionar todos estos números y moverlos a la derecha y 40. Entonces vamos todo el camino a escuchar 1234 porque ahora tenemos un poco más de espacio. Y lo que podemos hacer es dejar estos rubros como deuda, pero sólo quiero alinearlos rápidamente a la cuadrícula sólo para que tengamos un poco más de espacio. Entonces lo que tenemos que hacer es en realidad seleccionar nuestras etiquetas. Voy a seleccionar temp negrura. Por lo que simplemente selecciona tus etiquetas y vamos a estar terminados en tan solo un segundo. Por lo que Auditoría es alinearlos a la cuadrícula así. Entonces ahora se ve bonito y limpio. Y lo que también noté es revelada pila debería ir justo aquí. Y busquemos otro. Las herencias alimentarias, porque usamos la repetición mayor los duplican y todo lo demás se ve bien. Cerremos ahora nuestro grupo de scroll y quizá probemos una vez más y veamos qué tenemos aquí mismo. Tenemos 41, por lo que podemos mover uno. Entonces estamos a los 40 y estamos a un nueve aquí. Entonces veamos, tal vez pueda cerrarlos así o incluso pueda revelárselos. Aquí. Estamos en 19 y estamos en 19 aquí. Entonces veamos, tal vez podamos posicionar esto solo uno hacia abajo para que estemos a los 20 aquí. Entonces hasta nuestro grupo de pergaminos y estamos 18 abajo. Hagámoslo una vez más. A ver cómo se ve eso. A ver para que pueda desplazarme hacia abajo y todo se ve bien y limpio. Ahora que eso está terminado, pasemos a las secciones de parada. Por lo que en realidad voy a quitar este. Voy a posicionar este aquí mismo. Y también voy a asegurarme de que seleccioné para estar a las seis. Entonces vamos a ver, ahora estamos a las cuatro, ahora estamos a seis solidus. Y por último, voy a hacer lo mismo por este. Y solo para darme un poco más de espacio, cuando realmente voy a hacer a continuación se borra este tipo en tus transacciones ahí mismo. Y luego voy a seleccionar a estos dos y posicionarlos para estar a los 40. Y se fue a aumentar la altura de ambos. Entonces vamos a seleccionar la cuenta tarjetas VG, VG. Voy a aumentarlo a 291, así. Y ahora estamos en 39 abajo. A ver, estamos en 41 con estos. modo que en realidad podemos mover estos dos, sólo uno hacia abajo. Entonces estamos en el mar. Estamos a los 40 y estamos en el abogado nueve aquí. A ver. Entonces podemos cambiar esto para ser 290, así. Y ahora estamos a los 40, estamos a los 40. Entonces todo se ve bien. Pero lo voy a hacer es golpear control S y explicar lo que va a pasar aquí mismo. Entonces aquí mismo vamos a incluir algunos gráficos y en realidad vamos a mostrar tus transacciones de transición. Entonces básicamente estas transacciones se van a dividir por ingresos y gastos. Y se van a ir una semana atrás. Por lo que los usuarios podrán ver estas transacciones una semana atrás. Y en realidad podrán comprobar entre ingresos y gastos y básicamente a ella y ver dónde gastó más dinero en qué día y cuánto en total. Aquí mismo a la derecha. Y en realidad les vamos a dar algunas Tabletas de Utilidad coloreadas por DADT o vamos a ver algunos pasos serios, por ejemplo. Por lo que ahí se va a poder transferir dinero. Entonces digamos que tienes a tu esposa o a tu novia mamá más amplia no importa. Y quieres transferirles el dinero de tu cuenta. Por lo que tendrán la opción ahí. Entonces tendrán la opción de pagar las cuentas. Y también tendrán la opción de convertir dinero. Entonces para la conversión, digamos que tu cuenta está en dólares estadounidenses y quieres convertir ese dinero a Euros, ya sea para gastar o para enviarlo a otra persona. Y eso es básicamente lo que va a ser esto. No vamos a crear esas páginas, sólo vamos a crear esas opciones porque esas páginas ya están creadas por el banco. Y esos son básicamente sólo un pop-ups de solo código básico. Debajo de eso aquí mismo. Vamos a tener contenido de balance. Entonces vamos a tener ingresos y gastos. Y estos van a ser básicamente totales para el mes. Entonces ahora empecemos creando todos estos. Entonces en realidad voy a empezar justo aquí para que podamos ir de izquierda a derecha. Voy a escribir así en tus secciones. Y vamos a ver, podemos llamarles belleza de transacción así. Y lo que voy a hacer, veamos, quizá pueda subir un poco esto. Veamos spot Suwanee. Veamos dónde estamos justo aquí. 12, estamos a los 20, estamos a los 40. Entonces voy a dejarlo así. También voy a posicionar esto un poco hacia abajo. Voy a borrar este texto, golpear el control D y éste y darle ingresos. Y en este, voy a dar caro. Así. Voy a posicionarlos a ambos para que estén alineados a la derecha. Entonces va a ser fácil para mí organizarlos. Mueve esto para el verde, mueve esto para el rojo. Obviamente, vamos a explorar un poco más estos gastos. Asegúrate de que estamos a los 40. Por lo que 1234. Y una vez más, asegúrate de que estamos a los 40 con este también. Y aquí mismo vamos a usar estos sándwiched me tomó seguro. Tengo 20 abajo 40 justo aquí. Y voy a teclear desde la alineación izquierda, por lo que mod para el lunes. Y obviamente puedes espaciado cantidad uniformemente si quieres demandar puede controlar D. Puedes usar la cuadrícula de repetición y es mucho más rápido. Pero también puedes hacer esto para poder posicionarlos así. Así que asegúrate de estar bien alineado. No va a mostrar es eso. Entonces hagámoslo así. 1234. Ahora estamos alineados y esto obviamente va a ser domingo. Yo sí. Y puedes duplicar esto y llamarlo sábado. Esto va a ser viernes. Esto va a ser jueves. Esto va a ser el miércoles. Y esto va a ser 2Z. Supongo. Entonces básicamente ahora vamos a tener la distancia entre ellos de 60, por ejemplo. Veamos cómo funciona la Tierra. 60. Y déjame organizarlos rápidamente. Entonces voy a seleccionar mi lunes, moverlo todo el camino arriba El domingo está justo aquí. Como dijo, tienes la opción de repetir grilla, pero solo te estoy mostrando ambos caminos para que puedas hacer eso también si quieres. Entonces voy a posicionar esto para estar a los 60. Y ahora intentemos otra cosa. Voy a seleccionarlos todos y simplemente dar clic aquí solo para ver qué Adobe XD gamey. Por lo que me dio 707070707070 aquí. Entonces eso está bien porque está separado a todos rápidamente y tú también viste esa opción. Para que pueda seguir adelante y agruparlos, los llamó días. Y ahora lo que me queda por hacer es básicamente crear mi gráfico. Entonces voy a, por ejemplo, duplicar este Control D y escribir en plus ver para 25. O para asegurarse de que sea desde el medio. Y se puede por supuesto, jugar con estos. Yo me aseguro de que éste se quede, éste esté alineado a la derecha sólo para fines de alineación. Pero puedes asegurarte de que esto sea centro, por ejemplo. Y ahora te va a mostrar un 69 o 70. Entonces, no compremos empantanados con eso y con esos necesarios detalles sin importancia, sigamos adelante. Y lo que voy a crear aquí mismo es y tooltip. Y para crear una información sobre herramientas, simplemente usaré mi Herramienta Rectángulo y arrastraré mi rectángulo más ancho aquí mismo. Voy a llamarlo herramienta para hacer lo que hice. Y voy a asegurarme de que estos dos estén centrados. Y también puedo extender mi acorralado simplemente sosteniendo mi vieja llave. Puedo extender las esquinas de tablero al mismo tiempo. Puedo seguir adelante y escribir, por ejemplo, cinco, sólo para darle Indias alrededor de esquinas y bordes redondos. También puedo saltar dentro y usar mi herramienta de polígono para crear este rectángulo. Voy a voltear y asegurarme de que estos dos estén centrados. Al igual que esto. Obviamente, el polígono va a bajar. Y voy a incluir, por ejemplo, aquí mismo, lo voy a llamar punta. De esta manera, voy a quitar la frontera. Y veamos, quizá pueda elegir este color. Y vamos a ver para el texto, puedes dejar este color si quieres. Creo que va a funcionar bastante bien. Pero también se puede destinar con blanco. Esto funciona bien también. Y vamos, ya sabes, vamos sólo con blanco. Creo que por eso Finalmente, fusionemos estos 2k. Entonces voy a dar click aquí mismo para crear una forma. Y lo llamaríamos Tooltip, así. Y ahora puedes moverlo. Simplemente lo agruparemos. Voy a darle un nombre como este. Y dejémoslo ahí por ahora. Lo que voy a hacer a continuación es usar mi lápiz y mi mental en cuándo alinearme aquí mismo. Yo lo voy a alinear aquí mismo y golpear escape. Y sólo quiero asegurarme de que estoy centrado. Nosotros todos estos. Entonces lo que puedo hacer es obviamente usado mi herramienta de rectángulo justo aquí. Simplemente puedo extenderme. Y también puedes pasar el ratón aquí encima de tu teclado. Y tienes estas guías para que puedas dibujar una guía donde quieras y alinear las cosas a ella. Y puedes hacer lo mismo desde el borde izquierdo. Y simplemente puedes alinear una guía, a diferencia de la deuda, y luego simplemente seguirlo en deuda y guía para la alineación. Creo que eso va a estar bien. Entonces, cuando quieras quitarlo, haz clic y arrástralo afuera. De acuerdo, ahora así que le voy a dar un nombre. Entonces esta va a ser nuestra línea de ingresos. Yo sí cambié eso. Yo lo voy a duplicar. Esta va a ser nuestra línea de gastos o no, vamos a crear primero y vas a ver a qué me refiero. Entonces lo primero es lo primero, cambiemos el color del borde a este color. Yo voy a alrededor de la gorra. Entonces tanto aquí como aquí va a estar alrededor de lo que yo también voy a hacer. A ver. Puedo aumentar el tamaño de parecido a cinco. Creo que eso funciona bien porque ahora lo puedes ver. Y lo que vamos a hacer a continuación es saltar de lado a sumar algunos puntos. Por lo que puedes hacer doble clic y hacer clic aquí. Entonces, por ejemplo, podemos crear un punto de anclaje adicional para todos estos días diferentes. Para que luego podamos presentar todos estos días de tal manera que podamos organizar estas animaciones para que podamos, por ejemplo, mostrar a los usuarios dónde pueden hacer clic. No vamos a tratar el domingo y el lunes porque esos son obviamente puntos de partida. Pero voy a hacer a continuación simplemente los movió alrededor sólo para tratar de globalizarlo. Y puedes ser extremadamente específico si quieres usando esas guías, por ejemplo, pero no me voy a molestar con eso. Solo lo vamos a dejar aquí por ahora. Ahora lo que voy a hacer es simplemente aumentarlo así. A lo mejor puedo disminuir estos dos aquí. Estos dos aquí, aquí, y tal vez aquí. A lo mejor esto puede subir un poco. Y podemos posicionar aquí todo tooltip. Y por ejemplo, si lo deseas, puedes usar estas líneas, pero también puedes usar líneas curvas. Entonces para hacer eso, simplemente tienes que hacer doble clic para crear todos estos para ser curvos así. Por lo que se puede mostrar, por ejemplo, flujo mucho más realista de estos gráficos. Entonces por ejemplo, alguien como escritorio. Y por último, lo que necesitamos es el círculo para que podamos elegir nuestro punto. Que los usuarios puedan hacer clic. Por ejemplo, aquí mismo, digamos, creo que eso funciona bien. Digamos que solo queremos mantenerlo en el centro, mantenerlo agradable y limpio. Y este va a ser nuestro punto de punta de herramienta. Y lo que voy a hacer es realmente darle este color quitado borde. Y es básicamente, también puede incluir algún tipo de sombra de gota. Entonces a 25 tal vez. Creo que eso funcionó bien solo para separarlo básicamente formar nuestro fondo. Ahora que tenemos deuda, lo que podemos hacer es duplicar esta y llamarla línea de gastos. Voy a quitar de vista mi línea de ingresos. Haga clic aquí, seleccione este color. Y lo que voy a hacer básicamente es lo mismo, pero sólo voy a, por ejemplo, aumentar este, disminuir éste hacia abajo. Quizás mueva un poco este hacia arriba. A lo mejor aquí. Quizás posicionó esto justo aquí. A lo mejor esto puede saltar todo el camino y puede bajar. Entonces ahora traí mi línea de ingresos? Eso se puede ver. Entonces eso es básicamente todo. Puedes hacer clic en ingresos y gastos para mostrar esas cosas diferentes. Entonces vamos a llevar los ingresos al punto más alto en realidad. Entonces me voy a mover con aquí mismo. Por lo que es más la punta de la herramienta y el punto de la descripción de herramientas. Por lo que ambos al punto más alto. Entonces este es nuestro punto más alto. Este es un punto más alto en realidad. Entonces podemos, por ejemplo, más ingenio, no lo sé. Dejémoslo aquí donde estaba en descentrado solo para mostrárselo a los usuarios y ser un poco más preciso y un poco más importa no, solo despejarlo con él. También voy a duplicar nuestros tooltips. Entonces agrupemos esta herramienta de calidad. Tip como la muerte o ingreso tooltip y duplicarlo, llámala gastos, así. Y obviamente con gastos y esto va a ser en este color rojo. Entonces voy a seleccionarlo y asegurarme de que estamos en el rojo, saltar dentro de la tooltip BG, y darle en este color rojo. Por lo que ahí lo tenemos. Y también voy a quitar esta cotización más menos. Y veamos, no sé, nueve, 4-6 tal vez. Creo que eso está bien. Asegúrate de que estemos en un centro. Y eso es básicamente todo. Entonces lo posicionaré para que sea, por ejemplo, aquí n. Ahora sigamos adelante y hagamos nuestro componente. Entonces esto va a ser aquí, por ejemplo. Y podemos crear un componente a partir de toda esta sección. Por lo que calidad tus transacciones. Si usted controlaría clave para crear un componente y este valor predeterminado, por ejemplo, puede mostrar ingresos pueden ser. Entonces vamos a ocultar información sobre herramientas de gastos. Vamos a alinearnos gastos altos. Y aquí en los gastos vamos a gris afuera. Por lo que yo esto sólo para indicar que se selecciona el ingreso. Lo que vamos a hacer a continuación es crear un nuevo estado. Nosotros lo vamos a llamar gastos. Mi papá. Y por gastos, obviamente vamos a hacer lo contrario. Entonces aquí y aquí, como aumento, los gastos se van a descolorear, los ingresos ahora van a cumplir con este collar para que puedan cambiar entre ingresos y gastos. Entonces ahora sigamos adelante y lo prototipamos. Por lo que vamos a elegir tabulador para los gastos. Transición auto estado animado va a ser gastos y fácil y fuera y punto cero, vamos a ver. Seis segundos. Creen que va a funcionar bien. Volvamos a caro, seleccionemos nuestros ingresos, hagamos lo mismo, y volvamos al estado por defecto, hit preview, solo para que podamos ver lo que hemos hecho. Entonces, hasta el momento, tenemos un grupo de desplazamiento aquí mismo. Obviamente vamos a tener animaciones aquí. Creo que eso se ve bien. Y ahora vamos a probar esto. Por alguna razón. No quiere dar click. A lo mejor no lo configuré, así que vamos a gastos. Haga clic aquí. Y yo no elegí el estado, por lo que un estado por defecto. Y vamos a previsualizar eso una vez más. A ver. Por lo que realmente no me gusta en esta transición. Pero dejémoslo ahí por ahora. lo mejor cualquier selector aquí abajo, pero dejémoslo ahí por ahora. No me gusta que desaparezcan transiciones entre estos dos. Entonces tal vez sólo una descripción de herramientas puede mostrar o algo así. Pero no nos empantanemos con detalles porque ya estamos a 25 minutos y aún nos sentimos mucho más trabajo por hacer. Entonces saltaré de nuevo al diseño y lo que necesitamos aquí mismo. Como suelo mencionado, se llama a esto terminado y voy a ir al Estado Default. De lo que necesitamos aquí mismo son esos íconos que mencioné. Por lo que puedo llamarlo, por ejemplo, Servicios. Yo muero. Y vería que puedo eliminar corruptando solo los textos para golpear el control C, controlar V para pegarlo afuera, borrar todo. Entonces en lugar de tarjetas VG, lo voy a llamar servicios, BG, mi deuda. Y para el texto, lo voy a desagrupar muy rápidamente. Y vamos a ver, voy a borrar estos dos. Entonces esto y esto dejo justo éste. Yo lo llamaré traslado. Asegúrate de que vaya desde el centro. Por lo que X2 puede transferir dinero. Llamaré a este siguiente uno paga facturas. Y por último, esta última conversión. Entonces lo que podemos hacer ahora es posicionarlos en realidad. Para que esto pueda ir al centro. Y vamos a ver, esto puede ir justo aquí. Entonces, en realidad sigamos adelante y creemos nuestros círculos. Por lo que va a ser mucho más fácil para nosotros. Entonces veamos, los círculos pueden ser, por ejemplo, algo fácil como 100 por 100. Creo que eso funciona bien. Posicionémoslos para que estén a los 40 de aquí. Entonces 1234, y lo voy a llamar un círculo así. Y vamos a duplicarlos en realidad. Lo posicionó justo aquí y justo aquí. Y lo siguiente que vamos a hacer es realmente copiar y pegar todos esos iconos para que pueda incluir el abajo dentro. Entonces, vamos a ver. Déjame encontrarlo rápidamente aquí mismo en mi otro diseño. Entonces haré el ícono de transferencia así, ícono del bebé así. Y finalmente icono de conversión así. Cambiemos rápidamente el color de nuestros círculos para que veas los iconos y asegúrate de que quitamos la frontera porque no lo necesitamos. Y finalmente, puedo saltar aquí mismo y ver mis iconos. Entonces aquí están. Y no son componentes. Entonces posicionaré hace al centro. Y vamos a ver, puedo seleccionar esto. Y ¿tenía control G está pronto para ser transferencia, madurar. Todo denso como este y este hit Control G, D se va a pagar facturas icono. Y finalmente, seleccionaré éste y éste, control G, este va a ser icono de conversión. Y entonces me aseguraré de que los posicioné en el centro así. Hacer lo mismo para este número uno es una vez más, estos son iconos grandes, iconos de estaño. Por lo que solo puedes asegurarte de que cada vez que estoy usando estos iconos, estoy usando iconos grandes. Y esos rellenos son de elementos de invitación. Y creo que sólo icono era el nombre del creador. Por lo que una vez más, estamos a los 40 ahí mismo. Y lo que también puedo hacer es traer estos a las carpetas mismas sólo para que podamos organizar las cosas un poco más. Ver traslado, yo dat. Y porque soy OCD mentira papá, simplemente los moveré hacia abajo. Al igual que papá. Ahí lo tenemos en conocimiento rápidamente, organizarlos. Entonces esto obviamente está en el centro. Primero seleccionémoslos todos y asegurémonos de que estamos en el centro así. Entonces estamos en 60 abajo, 61 arriba. Entonces eso está bien. Y lo que voy a hacer a continuación se posiciona de manera uniforme aquí. Por lo que simplemente usa un rectángulo una vez más, posicionado aquí. A este fin, esta medida, está en el centro, notando para él este lado. Por lo que estos dos en el centro. Y ahora todo se ve mucho más cohesivo. Pero voy a hacer a continuación es simplemente crear mis efectos hover. Entonces para hacer eso, simplemente voy a usar básicamente el mismo efecto para el botón. Entonces si recuerdas, esto cambia a verde, y nosotros vamos a hacer lo mismo. Por lo que pulsa Tecla de control en esto, en control de drogas k, vamos a añadir un hover. Nuestro siguiente click justo aquí. Agrega horror. Haga clic aquí en un horror. Entonces en lugar de dentro de nuestro estado de cosecha, y debo decir. Entonces como pueden ver, cada vez que selecciono uno, estamos en el hover. Entonces voy a seleccionar mi círculo y asegurarme de que sea verde. Seleccionaré mi círculo, aseguraré de que sea verde, Asegúrate de que sea verde y lo adeuda básicamente. Puedo volver a estos estados originales. Por lo que el estado por defecto, se pliega estado y estado por defecto rebaño lechero. Y ahora cuando golpeo la vista previa aquí, podemos ver cómo se ve eso. Entonces básicamente tenemos estos bonitos estados de terror. Si no se atrevió a abreviar, obviamente puedes cambiarlos. Ingresos y gastos funciona bien. Todavía no me gusta realmente este diseño. Pensaré en algo tal vez y luego regresaré. Y finalmente tenemos este Grupo desplazable. Por último, trabajemos en esta sección y terminemos este video porque ya estamos a media hora. Entonces vamos a renombrar esto. A ver, tal vez podamos llamarlo equilibrio o equilibrar contenido o algo así. Llamemos a contenido avanzado. Y yo lo llamaré. Aquí. Lo que necesito es que voy a cambiar esto a contenido. Y básicamente vamos a usar estos dos textos. Voy a borrar este, y voy a borrar todo lo demás así. Entonces, básicamente, alineemos estos dos. Y veamos tal vez antes del texto que realmente podamos usar, no sé, 48 tal vez. Entonces empecemos primero con esto. Esto va a ser ingreso. Y lo vamos a dejar gris así y decide que esto van a ser gastos. Contenido de bonos. Veamos dónde estamos. Entonces quizá debamos no saber, en diciembre, noviembre donde estábamos vamos a ver. Entonces es él no tenemos ninguna cita ahora, pero porque aquí tenemos hoy y esto es en diciembre. Por lo que podemos tener contenido equilibrado, diciembre, por ejemplo. O quizá sea obvio porque estamos en ese mes. Vamos a ver aquí. Por lo que el 22 de diciembre. Por lo que Wendy aterriza aquí y van a esta página, todavía van a poder recordar que están en diciembre. Obviamente, sabrán qué mes es. Por lo que este es el contenido de límites para la actual Hunt. Entonces sigamos adelante y cambiemos este texto. Entonces voy a elegir 48 negrita. Y cuándo hacer lo mismo por éste. Por lo que 48 audaz. Y vamos a mantener esto como está. anélidos simplemente cambian este ingreso a, veamos, cuatro a 7504018. La deuda funciona bien. Y vamos a ver, tal vez pueda posicionarlo a B2 y así sucesivamente a puedo hacer que esto sean veinte hasta así, y voy a cambiar sus colores. Por lo que este ingreso extranjero en esto para los gastos, eso funciona bien. Y veamos, la separación entre esos dos puede ser tal vez en 40 porque 40 es para todo lo demás así. Y veamos, quizá podamos moverlo sólo un poquito. Y todo lo que necesitamos son dos iconos aquí mismo para indicar los ingresos y gastos. Entonces seleccionaré y basaré dosis dos iconos. Entonces saltaré aquí mismo y me aseguraré de que sean locales, así. Y veamos, los ingresos están en la parte superior y los gastos bajan. Entonces esto va a ser ingreso. Esto van a ser gastos. Obviamente intenta renombrar tus capas tanto como sea posible solo para mantenerte organizado. Porque se puede ver en esta etapa ya tenemos demasiadas capas, demasiadas opciones aquí y allá. Entonces por eso necesitamos deuda. Me aseguraré de que este ícono esté centrado con nuestro contenido. Por lo que puedo hacer eso simplemente manteniendo presionada la tecla Mayús. O aún mejor, puedo agrupar mi texto luego seleccionar este click justo aquí, y luego desagrupar mis textos porque realmente necesitaba estar en un grupo. Entonces por ahora, haré lo mismo por gastos y lo tiraré aquí mismo. Desagruparlo. Y lo que realmente podemos hacer es quizás posicionarlos con nuestros textos así. 123456, por ejemplo, puede ser que vaya a funcionar bien. Y luego alinearnos. Todo este ancho de contenido está gravado en la parte superior. Entonces ahí lo estamos. Permítanme previsualizar rápidamente esto una vez más para ver dónde estamos. Entonces una vez más, tenemos ingresos y gastos, una vez más, ya son como funciona esto. Por lo que me aseguraré de tratar de averiguar algo más y traté de cambiarlo. Hemos transferido guijarros y estados de horror de conversión. Tenemos grupos desplazables aquí mismo, y tenemos este contenido de bonos. Por lo que ahí lo tenemos en la siguiente página está alongs. Entonces te veré ahí. 49. Crear diseño 11: Sigamos ahora con nuestra siguiente página llega a la larga canción, va a dar click hit control D para lubricar esto, nuestro tablero. En lugar de transacciones, démosle un nombre, pulmones. Y básicamente para despacho, solo queremos presentar los préstamos que el usuario ya ha tomado. Para que puedan sumar nuevos préstamos a partir de aquí. Entonces, por ejemplo, pueden hacer clic, sí necesitan un largo sin sentido, no mucho o algo así. Y pueden ponerse en contacto con alguien del banco y luego pueden llegar y ofrecer un maldito Nuevo junto usando la información que ya tienen sobre este usuario. Entonces lo que voy a hacer es eliminar esto y eliminar todas estas secciones en realidad. Y vamos a ver, yo también puedo borrar escritorio. Lo que necesitas aquí mismo es una imagen. Entonces veamos, quizá puedan usar la que ya tengo suficiente. Sigamos adelante y creemos uno. Entonces me posicionaré en este ser, veamos 4335, veamos 725781. Tan longitud que también le voy a dar unas esquinas redondeadas 20. Y vamos a ver, somos 3545, así que necesitamos bajar diez. Entonces así, 4040. Entonces eso está bien. Y todo lo que necesito hacer en este momento es incluir mi imagen. Por lo que para incluir tu imagen, puedes usar las mismas imágenes de tu diseño. Simplemente cópialo y pegarlo si quieres. Pero en realidad voy a traer la imagen de mi carpeta. Entonces déjenme localizar rápidamente esa imagen porque ya tengo un montón de estas imágenes aquí mismo. Por lo que rápidamente usaré este. Entonces básicamente es la misma imagen que ya usamos. Permítanme quitar el borde, haga doble clic en el interior, mantenga presionada mi tecla de turno para que pueda escalarlo un poco más por ejemplo hasta que haga esto. Y llamémoslo un día. En lugar de transacciones, obviamente vamos a redactar un préstamo. Y lo que vas a hacer es usar el Ikhwan aquí. Para que pueda llevarte de vuelta a aquí. Analistas ubicados puertas, iconos, listas de sierra, por ejemplo, utilizan caché de disco solo icono. Y me aseguraré de que esté en el centro de estos. Entonces tenemos seis aquí mismo, 614 imagen. Así que selecciona esto y solo asegúrate de que esté en el centro. Y eso es básicamente todo. Entonces lo que voy a hacer a continuación es escribir un montón de textos y abajo. Entonces vamos a ver. Usemos algunos bloques de texto de estos anteriores. Vámonos a aquí. Seleccione estos dos. Obviamente puedes iniciar el nuevo textblock, pero esto es mucho más rápido para mí. Por lo que me aseguraré de que ambos estén centrados, centrados así. Entonces lo que voy a hacer es hacer doble clic y escribir rápido. Efectivo solo. Así. Y veamos, quizá pueda hacerlo un poco más grande. Veamos esto. Creo que eso funciona bien. Y veamos, también puedo posicionarlo así. Ahora lo tenemos y solo asegúrate de que esto esté centrado. Lo es. Vamos a borrarlo y vamos a ver, tal vez podamos posicionarlo. Veamos 40 desde aquí. Por lo que 1234 abajo. Y veamos, tal vez pueda, por ejemplo, hacer de este 24. Volvamos a aquí. Y eso está bien. 24 irregulares. Y ver tal vez podamos escribir algo así como largo tomado el 23 de mayo de 2020. Redes. Bueno, asegúrate de que esté centrado con su texto de stop así. Y vamos a ver, tal vez pueda posicionarlo para ser 40 también. Entonces 1234, así. Eso está bien. Él controlaría D Y tal vez yo pueda hacer que esto tenga 40 también. A ver. Primer pago, 2352020. Por lo que hiciste el primer pago cuando tardaste el tiempo obviamente. Y entonces el último pago va a ser el 23.52021. Entonces digamos que este es solo uno de esos préstamos más pequeños. Entonces por eso se llama préstamo rápido en efectivo. Tan solo para tomar este préstamo, por ejemplo, te va a llevar un mes o algún empate que para devolverlos, o en este caso, un año. Por lo que es posicionarlo al centro, 404040. Eso está bien. Voy a duplicar esto una vez más. Estamos seguros. Está a los 40. Y voy a escribir y descargar sus estados de cuenta de pago. Entonces esto obviamente va a estar dentro de un PDF. Y porque es un enlace que vamos a usar este color. Y este rayo en estado de cuentas es básicamente para mostrarles, por ejemplo, en qué fecha pagaron qué cantidad. Entonces digamos que este mes pagaste 100 dólares, mes que viene pagaste 200 dólares y así sucesivamente. Tan solo quieres hacer un seguimiento de todos esos pagos y ver si estás en el camino y si puedes confiar en eso. Por último, voy a golpear el control D en este, esta vez. Posicionamiento abajo y justo aquí y llámelo necesita un nuevo solo. Se asegura de que esté alineado a la izquierda y alinearlo aquí. Porque aquí mismo voy a incluir un botón. Usemos un botón. Entonces éste, por ejemplo, podrías controlar, ver qué posición lo justo aquí, controlar V. Y en este botón vamos a escribir, hacer el pago. Porque una vez más, si por alguna razón quieres terminar en esto a lo largo rápidamente. Entonces veamos que tienes algo de dinero, tienes la promoción, tienes algún préstamo de alguien más, no sé, lo que sea, entonces rápidamente puedes terminar este pago pagando el resto de tu cantidad ahora. Entonces por eso tenemos este botón aquí mismo. O por ejemplo, si quieres hacer pagos manuales, también puedes hacerlo. Por lo que puedes dar click ahí mismo. Ahora tenemos estado por defecto, estado Horace. Eso está bien. Vamos a posicionar esto para estar en el centro. Se trata de 80. Y lo último que voy a hacer es simplemente seleccionar todos estos artículos y asegurarme de que estén en el centro así. Obviamente, vamos a cambiar en los préstamos de escritorio y los lácteos lo tienen. Hemos terminado esta pantalla. Vamos a dar click aquí mismo. Cuando pasas el cursor Uno, Uno, Una vez más para que puedan descargar sus estados de cuenta de pagos en PDF. Pueden hacer click para pedir un nuevo largo, que los va a conectar con las cosas del banco. Y por fin pueden horrorizar aquí mismo para hacer un pago. Y los va a llevar a la sección de pagos externos. Y deuda con Banco tiene. Entonces eso es básicamente todo para este. Te veré en la próxima cuando vamos a empezar con las tarjetas y en realidad vamos a hacer un poco más de trabajo ahí. Entonces te veré ahí. 50. Crear diseño 12: Ahora sigamos adelante y continuemos con el diseño retirado. Y la siguiente página, que vamos a crear unas tarjetas SD. Entonces voy a hacer esto una vez más. Entonces hit control D. En lugar de préstamos, vamos a escribir en tarjetas aquí mismo. Voy a seleccionar mis tarjetas, estados. En lugar de tus préstamos, obviamente vamos a escribir tus tarjetas. Y me voy a quedar con este texto por ahora. Voy a borrar esta imagen. Y lo que vas a retratar aquí mismo son las cartas. Por lo que estas son las tarjetas que el usuario ya tiene. Por lo que tal vez tengan una tarjeta de débito Visa puede estar en una tarjeta de crédito MasterCard. Vamos a mostrar los fondos disponibles y vamos a mostrar la opción para que depositen fondos en este carrito. Entonces digamos que tienen su cuenta corriente o cuenta de crédito o lo que sea, y no está conectada directamente con la tarjeta. que puedan, por ejemplo, depositar más fuentes en la tarjeta desde una de esas cuentas. O pueden, por ejemplo, optar por depositar fondos de la otra tarjeta. Entonces digamos que tienen la tarjeta de crédito, tienen que tarjeta de débito. A lo mejor quieren depositar fondos de un acorde a otro. Entonces hagámoslo. Voy a dejar todo esto, sólo voy a borrar esto. Efectivo tan rápido. Y mientras estamos en ello, organicemos rápidamente estas cosas porque me olvido de organizarlas antes. Entonces me voy a mover arriba ahora mismo, aquí mismo, voy a mover la barra lateral aquí. Siguiente Voy a tomar tus pulmones texto posicionarlo aquí mismo. Y en realidad voy a hacer eso por todas estas pantallas. Entonces vámonos de aquí. Este está organizado. Vámonos aquí. Y éste también está organizado. Porque como dijo varias veces a lo largo del discurso, realmente te animo a organizar aquí tus capas. Y éste también está organizado. Entonces es solo éste. De verdad te animo a organizar tus capas. Y sólo porque no vas a ahorrar eso para más adelante, lo vas a compartir como fuego con tus clientes y tus desarrolladores. Entonces es realmente importante también, organizó pronto todos estos archivos, salas en las que llamémoslo así. Y organicemos estas cosas. Entonces voy a organizar la disgusto. Este botón va a ir todo el camino hacia abajo. Por tanto tiempo. Tomando ángulos aquí, rápido, efectivo a lo largo va aquí. Voy a posicionar esto aquí mismo, y necesito nuevo largo puede ir todo el camino hacia abajo. Por último, hagamos esto aquí. Entonces tenemos nuestro top ahora, justo aquí, barra lateral, justo aquí, tus tarjetas justo aquí. Y ahora cuando empezamos a desarrollar esto en diseñar más, vamos a posicionar más elementos ahí dentro. Entonces, por ejemplo, empecemos con la tarjeta de la izquierda. Entonces va a estar justo aquí. Y podemos, por ejemplo, calidad, vamos a ver. Por ejemplo, tarjeta de débito Visa. Y asegurémonos de que esté alineado a la izquierda. Voy a posicionarlo todo el camino aquí mismo. Y primero arrastremos aquí nuestra tarjeta sólo para que podamos tener algo con lo que trabajar. Podemos usar este para escalarlo. Pero voy a pasar sólo sosteniendo mi barra espaciadora obviamente a más alrededor de las pantallas. Y vamos a llevarnos esta tarjeta, así que tarjeta hover, Control-C. Pero voy a saltar dentro y en realidad usé jardín de crédito. No necesito todo el hover. Por lo que controla C en la propia tarjeta. Volvamos a aquí. Haga clic en Deshacer control V para posicionarlo en. Me aseguraré de que sean 40. Entonces 246, eso es demasiado. Voy a posicionarme, por ejemplo, a las cinco. Por lo que 12345. Veamos esto una vez más todavía. Sólo porque quiero tener esta columna vacía y quiero darle algo de espaciado ahí. Por lo que una vez más, 12345. Entonces va a terminar aquí en esta. Entonces solo voy a mover esto aquí mismo. Y en tamaño, veamos, quizá podamos tenerlo en 391 o algo así. Entonces como saltar de lado 391 y altura, Yup, eso se ve bien. Entonces veamos rectángulos. Podemos subirlos así, o podemos seleccionar estos dos. Haga clic aquí. Ver rectángulos ahí dentro. Voy a bajar esto así. Y en realidad voy a saltar y vamos a ver auto BG. Veamos y rectángulos van a posicionar mis rectángulos y manualmente. Y lo que también puedo hacer es en realidad, vamos a ver, eres sin hogar La clave Shift para reducirlos así, por ejemplo. Y luego simplemente los movió fuera del camino en algún lugar por aquí. A continuación, colocaré MyText un poco arriba. Entonces así, asegúrate de que esté aquí abajo. Seguro que son 20. Seleccionaré mi logo y mi logo de carro lisa. Entonces 1234, creo que eso se ve bien. Voy a posicionar esto a la mitad y vamos a ver, ya está a las 48. Démosle 36. Entonces así, asegúrate de que sea blanco. Y veamos, ¿esto era blanco? No, es de este color gris claro. Entonces podemos hacer eso aquí también. Y usemos un rectángulo. Por lo que posiciona en Deir encima del texto. Seleccione estos dos posicionados en el medio, y luego retire mi rectángulo. Ahora sólo quiero asegurarme de que todo esto esté alineado. Es, ¿está esto alineado? Se trata de hábitos anteriores. Y ahora tenemos nuestra corriente terminada. Se puede hacer porque cuando hago clic justo aquí se puede ver que se remonta a este estado. Entonces puedes aplicar una descarga a todos los estados, pero yo no voy a hacer eso. Entonces simplemente lo voy a posicionar aquí y voy a hacer una copia. Entonces Control D. Y voy a posicionar este aquí mismo. Entonces ahora se puede ver que tenemos esto y vamos a tener uno vacío de este lado. Entonces realmente no me gusta eso. Veamos prescripción dicen que incluso puede aumentarlo a seis. Veamos cómo se va a ver eso. No a diferencia de cómo se ve eso. Entonces dejémoslo ahí y vamos a tener esta columna todo el camino a la derecha para estar vacíos, sólo ordenados, perdonar, tener algo de espacio. Entonces voy a posicionar esto aquí mismo. Para que veas que tenemos esta columna vacía, así podemos tener más espacio aquí, y vamos a tener esta columna vacía también. Lo que voy a hacer aquí mismo es saltar de lado. Ocultaré mi investigación, mostraré mi guardia muscular. Y vamos a ver, voy a posicionarlo para estar en el centro de mi logo, para estar aquí mismo. Entonces lo voy a posicionar, atrévete. Y también queremos asegurarnos de que esté aquí mismo. Entonces vamos a ver, esto es 37, esto es 40. Entonces vamos a mover este original. Entonces vamos a ver, son 37, así 123, y ahora estamos a los 40. Y si saltamos a éste, se puede ver que seguimos en 37, así que 123. Y voy a mover esto para ser 40 también. Por lo que 1234. Y voy a ver dónde está mi investigación. Está a los 40 y esto a los 40. Entonces todo lo demás está bien. Veamos este texto. Sí, todo lo demás está bien. Entonces lo que voy a hacer, voy a dejar este tal como está, y voy a cambiar rápidamente el color de fondo de éste. Así que vamos rápido adelante, saltar dentro de aquí. Por lo que ambos son los MasterCard. Entonces voy a saltar dentro de aquí y estoy usando control y click. Por lo que puedo dar click directamente en este. Entonces voy a hacer clic con el botón derecho en copia. Voy a cerrar esto y volver a nuestra corriente. Una vez más mantenga el control para que pueda hacer click directamente sobre la capa de BG del coche, haga clic derecho y Pegar apariencia soja, pueden obtener el mismo efecto de gradiente que tengo sobre esa. Yo lo voy a posicionar aquí mismo. Y ahora empecemos a editar nuestra información. Entonces para esta primera, veamos dónde va a mover mi botón medio hacia abajo, tarjeta de crédito Visa y cuándo posicionarse hacia abajo. Y veamos una vez más. Entonces estamos a los 40 aquí, lo cual está bien. Es posición lo hace así está alineado con nuestra tarjeta así. Entonces vamos a ver, tal vez podamos posicionarnos para ser 40 también. Entonces 1234, lo que necesitamos a continuación son los fondos disponibles. Entonces vamos a ver. Podemos escribir algo como hallazgo, por ejemplo, para tres a cuatro, digamos. Y también vamos a posicionar esto para que quede alineado a la izquierda y posicionarlo todo el camino hasta aquí. Entonces veamos, tal vez podamos darle el mismo espaciado de 40. Entonces voy a usar este texto. Asegúrese de que una vez más esté alineado a la izquierda, colóquelo aquí. Seguro que estamos a los 40. Y vamos a esto algo así como depositar fondos para descartar. Por lo que una vez más, los usuarios simplemente pueden hacer clic allí y los llevará a la opción de fondos de depósito por defecto. Para que a partir de ahí puedan ir y depositar fondos en esa cuenta. Entonces organicemos rápidamente estos. Por lo que tienes tarjeta de crédito, tenemos una investigación. Saquemos esta tarjeta del camino por ahora. Fondos disponibles, vaya a aquí y deposite fondos. Eso está bien. Lo que necesitamos a continuación es el botón, quizá aquí. Y tal vez podamos posicionar este texto aquí mismo, asegurarnos de que esté alineado a la izquierda. Y di algo como que necesito un auto nuevo. Entonces estoy con mi papá solo para que podamos tener un espaciado de deudas ahí. Entonces veamos 24. Y eso es final alineado a la izquierda. Y creo que eso funciona bien. Lo que quiero es, por ejemplo, hacer un pago para que también puedas realizar un pago con esta tarjeta. A ver, podemos posicionarlo aquí estamos en 61, eso está bien. Entonces, por ejemplo, podemos hacer un pago a nuestras facturas de electricidad, a nuestras facturas de pago de autos, facturas de alimentos y demás. Entonces todo lo demás de lo que hablamos antes en eso diseñamos antes, justo ahora, estás en la sección de carrito de tu tablero y obviamente puedes hacer cualquiera de esos pagos directamente aquí. lo que cuando, por ejemplo, pases el cursor sobre este botón Hacer Pago, te llevará a la pantalla externa donde podrás ingresar la información. Entonces por ejemplo, un conteo fuera del titular de la tarjeta o del titular de la cuenta. Entonces por ejemplo, la empresa de factura de electricidad o la empresa de pago de automóviles o lo que sea. Y luego puedes usar esa información para realizar un pago usando esta tarjeta concreta. Por lo que ya sea tarjeta Risa o esta MasterCard, vemos este texto aquí mismo. Yo lo voy a quitar. Entonces organicemos esto sólo un poco mejor. Entonces voy a llamar a esta tarjeta de crédito o a una visa actual. Entonces simplemente voy a usar toda la misma información Control D, moverlo afuera. Y voy a simplemente desplazarme todo el camino hacia abajo. uso puede cambiar y la tecla de flecha derecha sólo para que pueda empujar de mi información de esa manera. Y es por eso que tenemos esta columna vacía, porque se puede ver que ahí tenemos mucho más espacio. Obviamente puedes cambiar estos dos para que el botón pueda ir a la derecha y los textos puedan ir a la izquierda. Si eso es algo que tú quieras. También puedes agruparlos gen de control y asegurarte de que sean stack. Y simplemente puedes hacerlo en esto para que puedas hacer doble clic y reorganizarlos de esta manera. Para que puedas ver cómo puede verse tu diseño. Entonces los voy a desagrupar porque no quiero que estén en una pila, pero puedes guardar todo esto en una pila. Sue puede organizar dat, dat manera. Lo que voy a hacer ahora es usar esto. Por lo que MasterCard, crédito corriente, como deuda, fondos disponibles Atila elegir algunas cantidades más pequeñas o por ejemplo, 2417 o lo que sea, y depositar fondos para descartar, puede quedarse donde está. Veamos rápidamente si todo esto está bien organizado. Es, está alineado a nuestra grilla, así que está bien. Y eso es básicamente todo. Lo que quería hacer es asegurarme de que los tenga todos agrupados. Entonces les voy a llamar tarjeta de crédito MasterCard. Y saltemos por dentro y hagamos la vista previa. Y se puede ver que todo funciona muy bien, y ambos funcionan como deberían. selecciona Descartes. Entonces eso es básicamente todo. En el siguiente video, te voy a mostrar Inversiones y te voy a mostrar pantalla vacía porque necesitas pantallas vacías para todos estos. Y podemos, por ejemplo, mostrar eso en las inversiones sólo para mostrar cómo se verá todo sin ninguna información. Entonces, por ejemplo, usuario sólo va a ir a esas inversiones sin nunca hacer ninguna inversión. Por lo que necesitamos mostrarles lo que pueden hacer para hacer la inversión. Entonces te veré ahí. 51. Crear diseño de diseño 13: Ahora sigamos adelante y hagamos la página de inversiones. Por lo que una vez más Control D. Una vez más haga clic aquí, y vamos a ver, puedo dar click en mi barra lateral, seleccionar mis inversiones solo para mostrar que ese seleccionado. Y déjenme volver rápidamente y ver si organicé todas estas tienen. Y por último, lo que queremos aquí mismo es que voy a quitar esto. Voy a Desagrupar esto. Por lo que una vez más, puedo tomar el texto que necesito. Puedo borrar esto. Puedo borrar este texto y vamos a ver, tal vez pueda borrar todos estos. Sólo puedo dejar este texto. Entonces aquí mismo, como dije en el video anterior, queremos mostrar el estado vacío. Y el estado vacío básicamente es a la pantalla a la que van a acudir los usuarios si no seleccionaron ningún servicio o no compraron ningún producto ni lo que sea. Entonces solo quieres mostrar ese estado vacío y mostrar lo que es posible. Entonces tendrías que explicarles qué pueden hacer desde ahí y a dónde pueden ir desde ahí. Entonces solo imagina que no tomaste ninguna inversión, pero te interesa tomar una inversión. Para que puedas volver a aquí, Veamos dónde están. Entonces aquí están estas inversiones. Por lo que las inversiones en educación, en bienes raíces, seguridad familiar, jubilación, etcétera. Y se puede ver y recordar esperemos de estos videos que todos estos tienen conectados estos dos servicios y también tienen este servicio aquí mismo. Por lo que tenemos muchos de estos servicios para mostrarles, que podamos organizarlos así en nuestra página de dashboard. Pero antes que nada, tenemos que mostrar un estado vacío. Entonces no voy a diseñar todos estos. Simplemente te imaginas que puedes usarlos como si estuvieran aquí. Pero también les mostraré cuatro nuestra última pantalla para lo digital. Una posible solución de diseño para eso y posible variación de eso. Para que puedas tomar la inspiración de eso y seguir adelante y diseñar esta página si quieres. Y de verdad los animo a explorar todos estos diseños y a llegar a los tuyos propios, porque esa es la mejor manera en que se puede aprender y se puede explorar y mejorar como diseñador UX de UI, no tiene sentido el ver solo viendo estos videos y copiar cada paso. Yo sí. No incorpores algo propio. Realmente no importa si cometes un error. Por eso estás aprendiendo de estos cursos. Es realmente importante que lo intentes, que trataras de perfeccionar tu oficio. ¿ Y exploraste todos estos diseños por tu cuenta? Entonces no te limites a seguir adelante y copiar, traté de hacer la cosa tuya. Entonces, sin más platicar, sigamos adelante y cambiemos esto. Entonces sus inversiones como esta, voy a asegurarme de que esté alineado en el centro y posicionarse más o menos por aquí. Y luego voy a usar este texto y por ejemplo, escribir poco café rápido en realidad del documento original. Voy a seleccionarlo. Misioneros aquí, posicionados justo aquí. Entonces podemos ver, por ejemplo 40. Entonces 1234, así. Y puedes ver que no tienes ninguna inversión en este momento. Contáctanos si deseas iniciar hoy tu equipaje de inversión. Entonces una vez más, si volvemos a aquí a estas inversiones, se puede ver que todos estos son paquetes. Entonces bajo educación que se selecciona en este caso. Tenemos estos dos paquetes. Entonces, por ejemplo, puedes darles la opción como hicimos aquí mismo para seleccionar ciertas categorías. Entonces ya sea educación, bienes raíces, seguridad familiar, o jubilación. Y bajo esa categoría, pueden entonces seleccionar una de estas dos opciones. Si crees que hay demasiada información, puedes crear un grupo desplazable como lo hicimos para éste aquí mismo. Entonces si te llevo otra vez y te muestro eso. Entonces este es el bucle desplazable y tienen la opción de desplazarse todo el camino hacia abajo. que no tengas que ponerlos sobre el fondo blanco como hicimos con ese ejemplo. Se puede crear toda esta sección, por lo que este cuadrado como un grupo desplazable. Por lo que puedes darles cantidad masiva de opciones. Por ejemplo, si eliges posicionar este tu texto de inversión aquí, como hicimos para tus tarjetas, entonces puedes simplemente imaginar que todo esto puede desplazarse hacia abajo. Entonces esa es otra forma en que puedes mostrar una cantidad masiva de información solo permitiendo que esto se desplace hacia abajo. A continuación, simplemente voy a cambiar esta posición de abajo arriba justo aquí. Y veamos, quizá podamos darle algo así como 60, solo para que les podamos dar un poco más de espacio. Y lo que voy a escribir es contactarnos porque queremos darles la opción de ponerse en contacto con el banco. Porque quizá quieran elegir uno de estos paquetes de inversión. Para que puedan ponerse en contacto con el banco y luego el banco puede explicarles que los embolsos de inversión son todos estos. Ellos les pueden explicar todos estos. O pueden, por ejemplo, contactar al banco en decir por ejemplo, como, oye, soy dueño de mis propios bienes raíces. Yo quería hacer uno de estos paquetes inmobiliarios y quiero invertir en bienes raíces. ¿ Cómo puedo hacer eso? Y entonces simplemente pueden ponerse de acuerdo con ellos y firmar contratos y cualquier otra cosa que venga de la deuda. Por último, quiero incluir un ícono aquí y voy a copiar y basar de mi documento original. Voy a hacer clic derecho en él y hacer local. Y este icono es de elementos invertibles uno a la vez. Entonces solo sin ningún color en él. Porque me gusta la complejidad añadida que añade a mi deseo. Por lo que 123456. Por lo que estamos a 60 de este texto. Lo que voy a hacer a continuación es simplemente organizar todos estos. Entonces los voy a agrupar, controlar g. Y básicamente voy a crear un rectángulo que va todo el camino hasta aquí. Por lo que estoy cubriendo esta zona. Voy a seleccionar mi rectángulo, seleccionar mi grupo, dar clic aquí, y luego justo aquí para posicionarlo en el centro de ese espacio. Y ahora puedes ver cómo se ve eso. Voy a desagruparlo. Bueno, puedes mantenerlo en grupo si quieres. Y por último, nuestras inversiones de escritura aquí mismo. Este l, Es HD premium. Por lo que una vez más aterrizaron justo aquí en la página de desinversión. Pueden leer este texto Hubbard y dar click en contacto con nosotros para que puedan ir allí. No los lleva a ningún lado, sólo los lleva de vuelta a esta página. Pero solo puedes imaginar cómo funcionaría ese flujo y cómo se verá eso. Entonces eso es todo para este video. En el siguiente video, vamos a trabajar en lo digital. Voy a mostrar algunos diseños posibles para esta página también. Después puedes ir desde ahí si quieres diseñar esa página por ti mismo. Y después de lo digital, por fin vamos a seguir adelante y conectar todos estos y elementos de navegación en la barra lateral. Entonces todo funciona como debería. Vamos a correr por eso una vez más. Y después de que terminemos con eso, finalmente vamos a pasar al diseño receptivo. Te voy a explicar qué es el diseño receptivo, qué hay que buscar y todo el resto de la información. Entonces te veré en el siguiente video. ¿ Dónde vamos a abordar lo digital? 52. Crear diseño 14: Por último, empecemos con los servicios digitales. Entonces duplicemos este control D. Y se llama esto digital. Eso también voy a seleccionar mi barra lateral, seleccionar principal digital. Y voy a borrar todos estos. Idat. A continuación, voy a elegir entre, de aquí por ejemplo. Entonces elijamos éste y éste Control-C. Y solo necesitas en deuda pegarlo aquí mismo, porque ya está en la posición correcta. A ver, 4040. Eso está bien. Y voy a saltar y mover todos estos hacia abajo. A continuación, voy a escribir aquí en servicios digitales. Y voy a abrir éste y voy a borrar toda esta información. En realidad, incluso puedo desagruparlo y puedo llamar a esto, por ejemplo, región bancaria E. Porque voy a enumerar aquí mis servicios digitales. A continuación, hagamos algunos cambios en los tamaños. Por lo que siete a cinco con 371. Y ahora se puede ver que estamos a las seis, así que 246, seguimos a los 40. Y va a duplicarlo posición en están justo aquí. Entonces estamos a las seis aquí. Entonces 246, voy a llamar a esta siguiente una M banca Vg. Entonces voy a duplicar este, posicionarlo todo el camino hasta aquí. Se puede ver que estamos en 39. Entonces si muevo esta hacia arriba, y entonces quisiéramos tener 40. Entonces a veces hay que lidiar con estos píxeles porque estamos a 40 de abajo y estamos a 39 de aquí. Entonces voy a bajar esto y lo voy a llamar QR, código, dolores y MEG. Y finalmente voy a golpear el control D en este, posicionarlo todo el camino hacia abajo. Y lo voy a llamar asistente virtual en Bejing, así. Y entonces lo que voy a hacer es saltar dentro de todas estas secciones para que incluso pueda hacer algo como esto. Por lo que puedo mantener presionada la tecla Mayús Control C y puedo mover todo el camino hasta aquí control V, que puedan pegarlos abajo. Y lo que puedo hacer es simplemente usarlos a mi ventaja. Entonces sigamos adelante y Desagrupe este primero. Voy a utilizar mi imagen, así que controla x, voy a dar clic aquí, control V para pegarlo aquí mismo. Y lo que voy a hacer con mi imagen son noticias algunas otras dimensiones. Por lo que para recrear con 371. Por lo que lo posicionaré para ser de tres columnas de ancho básicamente. Entonces lo que voy a hacer es hacer algunos cambios en el radio de esquina. Entonces vamos a tener a Sam y tanque. Por lo que arriba a la izquierda y abajo a la izquierda van a estar alrededor de ella como puedes ver. Y estos dos van a ser rectos. Voy a hacer doble clic aquí mismo y puedo agrandar mi imagen un poco. Algo así. Asegúrate de que estos tipos estén enfocados. Quizás un poco más así. Ahora que estoy contento con ello, simplemente puedo llamarlo banca E, IMG, decir imagen bancaria. Y sigamos adelante y hagamos todos estos. Entonces voy a golpear Actos de Control en este y puedo desagruparlo. Entonces vamos a ver, estamos en M banca, así que control v. Vamos a darle la misma demencia. Por lo que 338371. Yo lo voy a posicionar aquí a la izquierda. Asegúrate de que estamos a las diez y lo estamos. Estoy usando tab para cambiar entre estos. Por lo que se puede ver que esta y esta esquina son redondeadas. Esta imagen está bien porque está centrada y me gusta cómo se ve sal, no le vamos a hacer nada. Entonces puedo ganar más este texto aquí mismo para que podamos tener un poco más de espacio. Puedo hacer clic derecho en este, desagruparlo para que pueda usar mi imagen. Entonces controla X, controla V y C una vez más. Entonces 338 con 371, posiciónelo aquí abajo. Ver, a la izquierda. Y vamos a ver, vamos a llamar a esto, SO posición a la banca así. Entonces lo vamos a llamar un IMG Ben King. Van a colocar esta imagen hacia abajo. Entonces los pagos de código QR, IMG, así. Asegúrate de que estemos alineados a la izquierda, estamos centrados. A ver, algo no está bien aquí, así que así. Entonces 3940 abajo. Entonces eso está bien. Y vamos a dar la vuelta a las esquinas aquí también. Entonces dar la vuelta y arena aquí, eso está bien. Está en el centro, así que eso está bien. Y por último, usemos este. Entonces voy a posicionar este texto aquí mismo. Voy a agrupar este ungroup Control X para cortar su posición hace aquí mismo. Haga clic en Control, reposiciónelo todo el camino hacia abajo. Por lo que IMG. Y vamos a darle algo. 338371. Vamos a usar esa una llantas más o arena. Arena. Y finalmente mover esta imagen hacia aquí y posicionarla hacia aquí. Entonces ahora que eso está terminado en una canoa y hacer doble clic puede mover a este tipo apenas un poco a la izquierda, así. Ahora que eso está terminado, quiero básicamente un selecto estos servicios y los trasladé a sus lugares originales. O simplemente quieren hacer más pequeño el texto. Y voy a cambiar lo que dice aquí mismo en estos botones. Entonces para todos y cada uno de estos, algo diferente dirá en los botones. Por lo que los usuarios pueden entonces o leer sobre el servicio aquí directamente dentro del tablero. No tienen que volver a la página web y a leer información se atreven. Y pueden seleccionar directamente para activar su servicio, por ejemplo, ahí. Entonces nuestro primero es E, sólidos bancarios usando ese. Y veamos, en realidad no voy a usar estos botones, todo su desagrupamiento, estos. Y puedo borrar éste porque ya tengo todos estos botones. Entonces puedo posicionarme aquí, porque si recuerdas, aquí tenemos un poco de una cuadrícula diferente. Ahora lo que voy a hacer es dar click en este y vamos a ver, tal vez pueda usar algo más pequeño como 24. Puedo hacer esto a los 16, y puedo bajar el tamaño de mi texto a algo así. A ver, tal vez podamos estar en el solenoide C Y podemos estar a los 20 aquí también. ¿ Esto encaja con nuestro Watson? Sí, y estamos en 17 abajo. Entonces Eso en realidad cortó esta simplicidad de uso. Vamos a cortarlo. Atrévete. Veamos dónde estamos en 30 bosques. Entonces démosle un poco de espaciado de dos cuando c, así, veamos. Con una conexión a internet listas realmente lo cortaron ahí. Y vamos a dar click aquí para cortar nuestros textos. Y démosle esto a 14, porque no necesitamos demasiados de estos. Entonces veamos. Vamos a tener el texto en tres líneas. Quizás incluso pueda darle a esto un poco más de espacio para que pueda leer un poco mejor. Y me gusta cómo se ve eso. Ahora lo que voy a hacer es en realidad hacer doble clic en el botón. Y hagámoslo de manera tan activa para que puedan activarse directamente. Puedo ir a mi estado de horror, volver a él ahora. Y lo que voy a hacer es realmente asegurarme de que esto sea de dos columnas de ancho ahora. Así que así. Y lo que también podemos hacer porque esto es 24. Ahora podemos hacer cambios adicionales y asegurarnos de que esto sea, por ejemplo, 18 irregular y blanco. Podemos asegurarnos de que esté en el centro de nuestros botones o activarlo. Ahora, así, puedes hacer un nuevo componente de esto y llamarlo, por ejemplo, ver botón de servicios digitales o lo que quieras. Pero todavía lo voy a dejar ahí. Por lo que una vez más, estamos en 182 columnas de ancho y para usar el estado de hover así, activado ahora, estamos en 1800 blancos. Asegúrate de que estamos en el centro. Estamos así, aquí, así. Y eso está bien. Cuando lo cierro y lo muevo hasta aquí, se puede ver cómo se ve eso. Entonces aún puedes dejarlo a tres si quieres, pero yo no voy a hacer eso. Alinémoslo a nuestra grilla. Todavía tenemos un poco más de espacio aquí mismo. Entonces lo vamos a usar. Y creo que se ve bien si saltamos a una vista previa rápida. Se puede ver que el botón aún funciona. Puedes hacerlo más estrecho hasta la parte superior en el agua. Pero como dije, no me voy a molestar, sólo voy a dejarlo tal como está, sólo un poco más estrecho. Obviamente se puede exportar eso para más adelante para desarrolladores, pero vamos a hablar de ello más adelante. Por ahora, agrupemos rápidamente todos estos. Por lo que voy a seleccionar mi texto y mis botones, moverlos debajo de mi imagen. Los reorganizó IDAT agrupa todos estos y lo llaman Eden banking. Y pasemos ahora al siguiente. Por lo que ahora tenemos m banca. Entonces en realidad voy a eliminar botón. Voy a mover mis textos. Voy a desagruparlo. Posición justo debajo de nuestra imagen bancaria. Alinearlo a la cuadrícula. Y si revisamos somos 24, Somos 16 en tres líneas. Entonces hagámoslo aquí también. Entonces veamos. Esto va a ser 24 y perno, y esto va a ser 16 y en tres líneas. Pero vamos a cortarlo a algo así. ¿ Qué espacio tenemos justo aquí? Entonces tenemos ocho. Posicionemos eso ahí dentro. Entonces veamos diez. Y luego veamos cómo podemos hacer esto? Entonces tal vez podamos usar un rectángulo o una guía. Entonces usemos una guía en realidad. Entonces 1012, para que podamos volver atrás y pueda desacercar el cursor aquí mismo, elegir mi posición de guía, está ahí así. Y entonces puedo mover mis textos y extenderme hasta aquí. Y ahora puedo terminarlo, por ejemplo, gestionar tus finanzas y más. No, no funciona. Entonces, primero vamos a cortarlo aquí. Una ubicación Bella para nuevo puede acceder a su cuenta. Obtienes acceso. Puedes ver manejar tus finanzas y más o digamos que sí puedes, así. Puedo cortarlo de nuevo. Y veamos qué tenemos justo aquí. Entonces estamos en 42 justo aquí. ¿ De acuerdo? Entonces démosle ese 123412. Estamos a los 40 aquí. Entonces veamos 40. Y simplemente voy a copiar mi posición de botón. Aquí. Estamos a los 40 y simplemente se asegura de que estemos en un centro. Estamos. Entonces eso está bien. Y coloquemos este botón aquí mismo. Y puedo, por ejemplo, escribir en descarga ahora en lugar de activar ahora. Porque pueden hacer clic y descargar la app para iOS o Android. En lugar de activarse ahora, porque se trata de M banca y necesitan hacer eso. Entonces agrupemos todos estos. Por lo que controlaría g y cuándo llamarlo M bancario mi deuda. Y ahora lo que realmente podemos hacer es, por ejemplo, posicionar a todos estos hacia abajo. Hmm, vamos a ver. Sí, en realidad puedo ocultar esta imagen. Puedo ocultar esta imagen. Puedo eliminar estos dos. Y entonces puedo agrupar a estos dos sólo para mantener las cosas un poco más rápido. 123439 de aquí. Entonces eso está bien. Los posicionaré a ambos hacia abajo. Entonces este va a ser mi código QR, código, pagos. Y podemos darle a esto sus antecedentes así. Vg. Y solo estoy haciendo esto para mejorar un poco mi velocidad. Este va a ser sistema I virtual y Vg N se le está dando esto así. Y en cambio estos dos, sólo vamos a cambiar los lugares. Entonces voy a borrar esto, show. Esto funciona completamente bien. Y voy a hacer lo mismo por mis copagos QR. Como puedes ver, está perfectamente alineado. Todo está en su lugar donde debería estar porque acabamos de sustituir la posición de éstos. Entonces, finalmente, movamos todos estos. Voy a escribirle pagos de código QR. Y voy a escribir en asistente virtual y Adobe XD, corregirme. Voy a eliminar este botón y eliminar este texto, eliminar esto y esto. Entonces para un QR, hagamos doble clic en café y queramos eliminar este texto y doble clic lado y basado. Y veamos qué somos aquí mismo. Se puede acceder al futuro pago de código QR. Simplemente abre la app para encender una cámara. Empecemos desde ahí. Por lo que puede correr punto en el geocodificador y él va a transferir fondos. Para transferir fondos, veamos al instante. Entonces como pueden ver, estamos cambiando copia sobre la marcha. Todavía estamos donde necesitamos estar con las dimensiones. Y podemos escribir por ejemplo, abrir app. Ahora, podemos ir al estado de horror. Porque como puedes leer aquí mismo, simplemente abre la app, enciende la cámara en punto en un código QR y la app va a transferir fondos al instante. Entonces o estás haciendo pagos, estás transfiriendo fondos a otra persona usando ese código QR. Entonces por eso hice esto, por eso los copié porque es mucho más rápido. A continuación, terminemos con los sistemas virtuales sobre copiar el texto usando control. A ver, estoy usando control veto pegarlo y vamos a ver qué podemos usar de este texto. Así que ahorra tiempo y dinero. Sí, hagamos eso. Vamos a conseguirlo. A ver, 4040, Somos 42, así que todo está bien. ¿ Y cómo podemos hacer esto? A lo mejor activar ahora o iniciar el chat. Empieza a chatear ahora. Para que puedas empezar a chatear con el asistente virtual, obviamente. Y básicamente es eso. Ahora hemos completado nuestro diseño. Vamos a previsualizarlo. Y como pueden ver, todos estos estados separados están funcionando bien. Por lo que todos estos efectos hover están funcionando bien. Como dijo varias veces, puedes incluir el hover separado para estas tarjetas si quieres. No voy a hacer eso porque ya tenemos este bonito efecto hover y todo se ve bien ya en mi opinión. Pero puedes explorar eso y convertirlo en un componente para el efecto hover obviamente. Entonces creo que lo vamos a llamar un día aquí. Y en el siguiente video, voy a mostrar cómo puedes conectar todos estos y conectarte a esta navegación. Y vamos a explorar todo esto un poco más. Te voy a dar un poco más de mis opiniones. Y por último, lo que quería decir para este video es que viste cómo incorporamos todos estos para servicios digitales. Entonces estos forman. Y si te llevo de vuelta a éste, por lo que las inversiones, puedes usar un layout similar a estos. Entonces imagínense que, por ejemplo, si te llevo de vuelta a esa pantalla donde está, aquí está. Entonces fue otra vez, educación, bienes raíces, seguridad familiar, y retiro. Entonces, en lugar de escribir algo como servicios digitales, puedes escribir, por ejemplo, algo así como educación. Y puedes mostrar dosis a justo aquí así, en este diseño exacto si quieres, puedes cambiar el diseño o lo que sea. A continuación, puedes copiar ese diseño. Entonces solo imagínense estos tres elementos. Por lo que el texto y estos dos, puedes basarlo a continuación. Y ya puedes crear grupo desplazable. Si ese es el diseño que quieres. También puedes duplicar un diseño. Entonces puedes, por ejemplo, usar el mismo diseño, pero por ejemplo, escribir educación aquí mismo, usar las dos opciones para la educación. Y luego puedes teclear bienes raíces aquí y usar las dos opciones para bienes raíces, y luego puedes duplicar deuda, bajarla abajo, y puedes crear todo eso para que sea grupo desplazable para que los usuarios puedan desplazarse abajo y ver entre todos esos. ¿Viste qué era? Educación, seguridad familiar, y retiro? Sí. Y debido a que todas tienen dos de estas opciones, puedes hacerlo. Y por último, tienes esta opción aquí mismo, así que asegure tu futuro. Se puede crear eso como una opción separada. Entonces esas son solo algunas de mis opiniones y cómo voy a hacer eso. Quitemos rápidamente a este tipo porque ya no lo necesitamos. Y puedes hacer lo que quieras con este diseño. Y una vez más, realmente te animo a probarlo, a probarlo, y a ver que tus ideas cobran vida. Obviamente puedes hacer esos cambios como quieras sobre la marcha. Puedes aplicarlos como quieras. Puedes hacer lo que quieras con este diseño. Mientras dije, está en los propósitos de aprendizaje, no tienes permiso. No puedo recalcar esto lo suficiente legalmente como para utilizar cualquiera de estos activos con fines premium, suelo ya sea para sus clientes o cualquier tipo de torres de otra manera, sólo con fines de aprendizaje. Entonces te animo, si eliges usar este mismo diseño, esta misma estructura, editando la misma. Por favor reemplace estas imágenes por sus propias imágenes, y por favor reemplace la copia, escriba su propia copia. Y de esa manera se puede evitar un posible pleito de mi parte o de otros recursos como y elementos Watteau y todos estos recursos premium de los que se utilizan. Por lo que realmente no puedo recalcar eso lo suficiente. Practica tanto como quieras, pero cuando quieras usar esto con fines comerciales, lo que en para clientes o posteriormente cuatro, reventa intentó incorporar tu propia copia y tus propios elementos. Vieron iconos e imágenes, como decía en el siguiente video y video final de esta sección de diseño, vamos a correr por la navegación. Te voy a mostrar cómo puedes conectar todo. Entonces te veré ahí. 53. Crear diseño de diseño 15: Por último, en este último video de nuestra sección de diseño, sigamos adelante rápidamente y conectemos todos estos elementos de navegación. Entonces como viste, ya tenemos nuestros estados, así que todo está muy bien conectado. Entonces, empecemos con las conexiones mismas. Entonces lo que voy a hacer es saltar dentro del prototipo y voy a dar click en mi cuenta porque está en la carpeta, es mucho más grande tap point. Y eso es realmente importante cuando estás haciendo todas estas cosas. Quieres asegurarte de que los usuarios realmente puedan tocar lo que quieras que tabulen. Entonces por eso estamos poniendo cosas dentro de estos grupos. Entonces cuando tus usuarios, cuando tu cliente, tus desarrolladores, quien sea explorador e interactúe con este prototipo, en realidad puedes compartir, compartir esto con ellos y puedes mostrarles cómo pueden usarlo. Y mucho más simplemente podrán hacer clic en estos ítems cuando estén en el grupo. Por lo que hay punto de toque mucho más grande. Entonces en cambio, imagínense que pueden hacer clic aquí mismo o a este diminuto, diminuto ícono. Entonces Vamos a hacer clic arrastrar hasta este punto. Y simplemente voy a arrastrar por que somos así, por lo que es mucho más fácil hacer eso y luego pasar por todas ellas. Entonces para esta primera transición, lo que vamos a hacer es usar auto animate. Podemos usar algo así como snap porque quiero que este fondo, este selector sea capaz de encajar en posición. Y voy a usar algo así como 0.4. Y hagamos lo mismo por éste. Por lo que en realidad puedo dar click y vamos a ir a las transacciones. Por lo que las transacciones de Dashboard, en realidad es más fácil de esta manera porque se encuentran todo el camino hacia abajo. Y los puedes ver bien aquí. Entonces esto va a ser préstamos. Y una vez más, puedes ver lo que has seleccionado aquí. Esto van a ser tarjetas. Mi papá. Esto van a ser inversiones. Él invirtió. No creo que lo seleccionamos correctamente, no lo hice. Entonces tarjetas, sí. Y digital. Digital. El digital y esto es bueno para ser un logout. Y logout. En realidad nos va a llevar aquí a la página principal. Por lo que el diseño de la página de inicio es donde tenemos que ir. Así que da click aquí y localiza la página de inicio en diseño. Aquí está. Y en lugar de éste, vamos a usar algo un poco diferente. Entonces vamos al diseño de la página de inicio. Entonces en lugar de auto animate, usaré la transición hacia o en lugar de snap DZ y hacia fuera en 0.4. lo que eso va a hacer es porque todos estos son auto animados porque los contenían en su mayoría los mismos elementos. Entonces por lo menos estas tarjetas son las mismas, este texto es el mismo, los botones son los mismos, y así sucesivamente y así sucesivamente. Entonces todo va a quedar bonito y coherente, pero con la página de inicio, una vez más, es completamente diferente. Por lo que realmente no quieres usar auto animate. Entonces volvamos ahora. Y lo que voy a hacer es quizá ir de aquí en adelante. Vayamos a la cuenta. Entonces podemos hacer lo mismo. Pero vamos a ver, ¿cómo puedo hacer esto? Entonces tal vez pueda volver a mi diseño. Controlaría C, saltando aquí mismo, controlaría V, y usaría mi cuenta. Muévelo hacia abajo solo para que pueda seleccionar un dashboard sobre todos estos porque nuestro conteo ya está creado para que phi. Entonces, ahora sigamos adelante y saltemos de nuevo a nuestro prototipo. Haga doble clic en nuestro Dashboard, arrastre y suelte. Y cuándo usar auto animates, voy a usar snap y 0.4. Entonces ahora sigamos adelante y pasemos al resto de ellos. Entonces esto va a ser transacciones. A ver, Dashboard, préstamos. Entonces todo el camino hacia abajo cartas, misma cosa, todo el camino hacia abajo. Inversiones como esta. Digital. Y por último, cierre de sesión click. Y en lugar de auto animate, transición, destino va a ser diseño de la página de inicio. Disolver. En lugar de Snap, vamos con fácil y fuera 0.4 segundos. Ahora, sigamos adelante y cambiemos esto a transacciones como dat. Y podemos hacer lo mismo. Por lo que Dashboard y arrastrar y soltar cuenta. Aquí estamos. Por lo que VR seleccionó, se atreve, y vamos a ver las transacciones. Préstamos para adaptarse ahí mismo. Veamos préstamos, sin tarjetas, inversiones en digital. Y acabo de notar que simplemente estoy usando AZ y fuera. Entonces voy a usar snap. Y para cambiarlos, basta con hacer click sobre ellos. Pasar de lo suficientemente fácil a chasquear. Y hacer lo mismo por todos ellos así, donde estamos tan cuentan porque estamos en la cuenta, no podemos cambiar eso. Entonces veamos, tal vez podamos hacer el tablero en todos ellos y luego traerlo de vuelta a casa. Entonces hagámoslo en tan préstamos. Voy a dar click en mi panel de control. Mi papá. Volvamos atrás. Por lo que tenemos tablero de carrito, inversión, digital, así. Y eso es básicamente todo. Ahora usemos este para que podamos volver a nuestro estado por defecto. A ver. A ver si se actualizó aquí. No, no lo hizo. Por lo que todavía estamos en estado de defecto. Entonces vamos a traer esto de vuelta a aquí. Y vamos a trabajar a partir de ahí. No lo sé, tal vez podamos incluso continuar desde aquí, pero en esta no puedo cambiar la cuenta. Entonces tal vez pueda copiar eso de vuelta. A ver ¿cómo puedo hacer eso? Entonces Control C, puedo traerlo aquí mismo. Y desde Dan, Dan, podré copiar y pegar pozos de error. Por lo que nuestro conteo ya está terminado. Entonces si hago clic aquí y voy a mi cuenta, ve al prototipo, puedes ver que está terminado. Se completan las transacciones. Ahora. Simplemente conecta nuestras transacciones contables, préstamos, está terminado, tarjetas, inversiones, y digital. Por lo que conectó a todos ellos, lo cual es genial. Por lo que ahora puedo ir a mi estado por defecto, volver a mi diseño. Él tendría Control X. Así que porque ya estamos conectados en este, vamos a traerlo hasta aquí. Entonces estas van a ser nuestras transacciones. Vamos a comprobarlo, a ver si está conectado dondequiera que esté, excepto por el cierre de sesión y el tablero y la cuenta. Entonces vamos a conectarlo ahí dentro. Por lo que voy a dar click ahí e ir a mi cuenta. Usaré este snap y pincharé aquí y voy a mi panel de control. Entonces vamos a ver. Y esto va a ser y el diseño de tablero como la deuda. Volvamos a este IQ Control C. Haga clic aquí, control v. Voy a seleccionar el prototipo de pulmones. Y vamos a ver. Por alguna razón no me mostró esto de mente estrecha. Vamos a seguir adelante y conectados en todas partes. Entonces en dashboard, diseño, dashboard, dashboards de cuentas, transacciones, y hay más tarjetas. ¿ Qué? ¿Inversiones? Y dashboard y digital. Y voy a dejar el cierre de sesión para más adelante porque es mucho más sencillo hacer clic entre ellos y conectarlos de esa manera. Entonces hagámoslo del mismo tipo. Voy a golpear Control C, copiarlo o aquí mismo. Posicionado justo debajo en todos ellos ordenados ver abajo mi navegación superior. Y por debajo mater, abajo. Entonces arriba ahora y eso está bien, eso está bien. De acuerdo, sigamos ahora. Tan muy dejado de lado es, vamos a ver, anhelos los hicimos. Aquí estamos en tarjetas. Volvamos al prototipo. Entonces haga doble clic en Dashboard y voy a hacer todo lo mismo. Entonces diseño, cuenta, transacciones, préstamos, inversiones en digital así. Y finalmente, golpeemos el control C y volvamos a nuestro control de inversiones V. Y también lo voy a pegar aquí mismo. Entonces el control. Ahora, vamos, primero hagámoslo con este. Entonces vamos a ir a inversiones prototipado dashboard. Haga clic en Aceptar. Estoy tratando de hacer esto lo más rápido posible. Entonces cuenta vamos a ver. Acciones. Estamos en préstamos. Tarjetas. Digital está seleccionado, o de vuelta al control de diseño c y control v justo aquí. Perdón, así. Esto es digital. Entonces, finalmente, este es el último. Escojamos digital. A ver si seleccionamos inversiones, tarjetas, préstamos, transacciones, donde estamos justo aquí, por lo que necesitamos estar a cuenta. Estamos conectados el SPR, ¿de acuerdo? Y este primero es dashboard. De acuerdo, entonces todo funciona bien por ahora. Vamos a dar click aquí y explorar esto un poco más. Entonces somos un panel de prototipo digital y terminemos esto rápidamente. Por lo que Dashboard Design va a ser cuenta de dashboard. Por lo que abren las transacciones de tablero y los cuadros de mando para lagunas. Y hay más a las inversiones actuales en dashboard. Y eso es todo. Ahora sigamos adelante rápidamente y conectamos estos logotipos. Entonces voy a elegir lo que dijimos, homepage y diseño. Voy a ir con nota fácil 0.4. segundos y transición Disolver. Entonces eso está bien. Yo voy a hacer lo mismo por la disciplina. Entonces veamos la página principal y el diseño y forma de proceder por una disciplina. Por lo que el diseño de la página de inicio en Page y diseñado. Y vería diseño de la página de inicio. Estaré conectado aquí. Uh, sí lo estamos, sí, estamos aquí también. Y por último, sigamos adelante y previsualemos y veamos qué tenemos hasta ahora. Entonces, cuando haces clic aquí, puedes ver que el selector se mueve muy bien. Y todo funciona como debería. Todo cambia muy bien. Por alguna razón no podemos ir a Digital aquí. Entonces vamos a ver, esto es segundo para durar, así que es este prototipo. Sí, no lo conectamos. Entonces vamos a ir aquí. Auto animar. En lugar de nota fácil, vamos a usar el snap. Así que vamos rápidamente a la vista previa a partir de ahí. Perdón, lo perdí. Aquí está. Por lo que ahora lo digital funciona como debería. Entonces podemos ir desde aquí. Todo funciona bien de aquí a aquí, de aquí a aquí. Entonces todo funciona como debería. Y por último, hagamos clic en cerrar sesión y nos lleva de vuelta a la pantalla de inicio. Entonces ahora que estamos aquí, en realidad podemos explorar todos estos un poco más y recordarnos lo que hemos hecho hasta ahora. Por lo que se puede ver todos estos trabajos realmente bien. Todo esto está conectado. Y una cosa más de la que no te conté, esto es que puedes vincular estos. Para que puedas vincular cuenta. Puede ir a la página de cuentas, préstamos, puede ir a la página de lanzamiento y así sucesivamente y así sucesivamente. Obviamente puedes enlazar estas páginas cuando las creas, pero no puedes vincularlas . Entonces cuando vas a la cuenta, y si me desplaza todo el camino hacia abajo en cuentas, hemos iniciado nuestro auto extranjero millennial y fresado de cubo. Entonces no se puede hacer eso. Por lo que no se puede hacer clic en la cuenta de Inicio. Y te lleva empezar el conteo. No se puede vincular esto, y no se puede enlazar con ese porque Adobe XD simplemente no está tan avanzado todavía. Puedes enlazar esas páginas. Entonces creo que lo hemos hecho por tarjetas o préstamos donde lo hemos conectado, invertir. Sí. Por lo que puedes hacer esto y puedes vincularlos para llevarte a cualquier sección de la página. Pero una vez que estás en la propia página, ahora puedes ir del pie de página a esa sección en particular de la página en particular. Entonces, una vez más, cambiemos entre ellos y veamos cómo funcionan. Lo sentimos, mi computadora es un poco más lenta porque estoy corriendo a archivos Adobe XD al mismo tiempo y estoy grabando, así que pido disculpas si algo sube, es más lento. A digital. Entonces creo que con LinkedIn me atrevo también, no, sólo por esa. Para que veas cómo funciona eso. Y por ejemplo, si ves algo así como, no sé, pagos de código QR Yep. Darte escribir algo como puedes pagar con la ley de copagos QR. Y luego al hacer clic en este botón, podría llevarlos directamente a la sección de pagos de código QR. Entonces solo ten eso en cuenta porque para el invertir donde hacen clic ahí mismo o simplemente los llevé a esta sección donde puedo llevarlos al engaño. Conecté esta sección, simplemente vincula este botón a cualquier sección de tu página a la que quieras que vaya. Por último, echemos un vistazo a esto. Entonces inicia sesión, nos lleva aquí. Podemos cambiar entre iniciar sesión e inscribirnos. Cuando hacemos clic aquí, nos lleva a nuestro panel de control. Y desde nuestro Dashboard podemos explorar estos. Por lo que tenemos estas diferentes tarjetas. Tenemos estas diferentes secciones animando realmente bien. Podemos ir a la cuenta. Por lo que podemos enlazar aquí también, editar información, transacciones. Podemos cambiar entre ingresos y gastos, y todavía no me gusta realmente esto, pero vamos a mantenerlo ahí. En realidad, ustedes pueden explorar eso más allá y pueden asegurarse de que creen una mejor versión de lo que hice. Entonces tenemos un grupo desplazable aquí. Tenemos efectos hover para estos, aquí mismo. Podemos ir a los pulmones. Puedes realizar el pago aquí. Tarjetas. Podemos realizar inversiones de pago. Podemos ponernos en contacto con ellos para inversión. Y finalmente digital. Y tenemos estos botones diferentes para todas estas secciones. Y al final, cuando hago clic en cerrar sesión, me lleva de vuelta a la pantalla de inicio. Entonces eso es todo para sección de diseño. De verdad espero que lo hayan disfrutado. Hice todo lo posible para darte tantas opiniones diferentes, opciones, técnicas de diseño, técnicas de formato, y así sucesivamente como sea posible. En la siguiente sección de este curso, vamos a hablar de diseño responsive. Te voy a decir qué es el diseño responsive, cómo puedes usarlo en tu diseño. Cómo vamos a terminar usándolo aquí en nuestro diseño. Y luego más adelante, les voy a mostrar cómo podemos realmente crear una página para ser receptivos. Por lo que nos vemos en la siguiente sección de este curso sobre diseño responsive. Y realmente espero que hasta ahora aprendas mucho, y realmente espero que también te guste esa sección. Después de que se complete un diseño responsive, vamos a cubrir compartir con nuestro cliente. Y como dije al inicio del curso, puedes compartir en el aire en cualquier escenario que quieras. Por lo que puedes compartirlo justo desde aquí y puedes obtener la retroalimentación. Y eso es en realidad lo que quiero de ustedes chicos para hacer a sus clientes reales. Por lo que para empezar con los wireframes de Adobe XD y luego compartir desde Deir, recopilar comentarios de tu cliente y luego adaptar esa retroalimentación. Una vez que aprobaron la estructura alámbrica, puedes pasar al diseño. Puedes compartir el diseño obviamente con tu cliente. Y luego una vez que realmente llegues a la página responsive, puedes compartir un diseño responsive también. Entonces esa es la intención aquí de diseñar, crear prototipos y compartir todo al mismo tiempo. Entonces tienes todas estas opciones aquí, pero solo quería ahorrar un poco de tiempo. Entonces, en lugar de compartir todas estas opciones y obtener algunos comentarios, podemos compartir. Por último, aquí mismo cuando estamos en la sección de diseño. Pero una vez más, y finalmente, verdad quiero que ustedes empiecen a compartir desde aquí y luego sigan adelante desde ahí una vez que reúnan suficientes comentarios. Entonces eso es todo para este video. Por último, realmente tengo que conferir demasiado para hablar. Te veo en la siguiente sección cuando empecemos a trabajar con diseño responsive. Entonces te veré ahí. 54. Qué es el diseño responsivo: Ahora que hemos completado la parte de diseño de nuestro proyecto, vamos a pasar a una parte de diseño responsive. Y solo quiero decirte rápidamente cuál es el diseño responsive, qué vamos a usar, y cómo lo vamos a usar. Y luego qué puedes hacer a partir de ahí y pasar de ahí para practicar tus habilidades de diseño receptivo. Entonces, en primer lugar, estamos usando el diseño responsive como un diseño, no como un código, pero aún así queremos prepararlo para los desarrolladores cuando se unan al código y cuando empiecen realmente a crear un diseño responsive para estar en vivo. Entonces, ¿cómo vamos a hacer eso? Vamos a usar el Bootstrap. Bootstrap es básicamente este conjunto ya prefabricado de componentes en código, pero vamos a utilizar la parte de diseño de esos componentes. Y cuando realmente lleguemos al siguiente video, te voy a mostrar cómo va a funcionar eso dentro de Adobe XD. Y porque si recuerdan, cada uno, nuestra Junta tiene su cuadrícula, vamos a aplicar esta misma estructura al diseño responsive. Pero para cada tamaño en particular, vamos a adaptar el tamaño de la cuadrícula. Y cuando adaptamos el tamaño de la cuadrícula. Y luego vamos a adaptar los elementos a ese tamaño de rejilla, N al tamaño del propio aeropuerto. Entonces digamos que tenemos, por ejemplo, imagen a la izquierda, textos y abajo a la derecha. En lugar de simplemente encogerlos así, vamos a voltearlos. Por lo que la imagen va a ir a la cima. El texto y los botones van a bajar. Y luego van a empezar a estrechar desde ahí a medida que las pantallas más pequeñas y más pequeñas se van hacia. Entonces así funciona el diseño responsive en teoría, práctica, te voy a mostrar algunas opciones más que Adobe XD tiene forma nativa que nos pueden ayudar a trabajar con diseño responsive. Ya te mostré esos grupos de pergaminos. Cómo realmente mostrarte las pilas. Pero no hablé la función de redimensionamiento sensible que tiene Adobe XD de forma nativa Los soviéticos van a hablar de papá, cómo papá puede ayudarnos a acelerar el proceso. Y vamos a hablar de los componentes porque tenemos que reducir el tamaño de nuestros componentes. Y ya viste que compran esas tarjetas de crédito porque aplicamos algunos de esos cambios a nuestras tarjetas de crédito e ir de estas tarjetas grandes a los autos más pequeños. Los textos también necesitan cambiar. Las imágenes también necesitan cambiar. Entonces vamos a hablar de todas esas cosas. Como dije, voy a usar los tamaños Bootstrap si estás usando algo como Angular o algo más. Y este principio básicamente va a ser el mismo, te va a aplicar también. Pero necesitas encontrar tus propias tallas. Porque como dije, estoy usando bootstrap, voy a usar tamaños de bootstrap. Y tú, normalmente puedes encontrar esos tamaños en sitios web de estos creadores. Entonces, por ejemplo, puedes ir al sitio web de Bootstrap y encontrarlo ahí. Si no, puedes encontrar diseñadores en línea que ya crearon dosis usando los principios del código. Porque en la mayoría de los casos, estas plataformas y estos sitios web solo están pensando en decodificar. No piensan en el diseño. Por lo tanto, los diseñadores tienen que crear recursos a partir de ellos mismos. Y debido a que la mayoría de estos son de código abierto como Angular y Bootstrap bar, entonces puedes tomar recursos de esos diseñadores y usarlos en tus propios diseños. Y eso es lo que vamos a hacer porque usé estos de dribble y encontré que estas rejillas tamaños en dribble, eran archivos de boceto, pero acabo de aplicar esas mismas técnicas y tamaños a mi archivo Adobe XD. Entonces lo voy a mostrar más tarde. Una cosa más que quiero mencionar es, ¿tienes que ir del tamaño móvil al tamaño de escritorio o al revés? En mi opinión, realmente no importa porque vas a escalar estos componentes año de la manera si estás trabajando con ilustraciones complejas que no estamos en este proyecto, pero solo puedes imaginar que por ejemplo, en secciones de héroes, tienes estas ilustraciones complejas, entonces vas a usar menos partes de tu ilustración o ninguna ilustración en tamaños más pequeños. Y luego en cuanto empieces a crecer, o bien estos elementos van a aparecer de la nada. Pero hay que pensar en cómo va a funcionar eso. Si algunos, por ejemplo, alguien está usando tableta en un tamaño de paisaje y luego voltear al tamaño de retrato. Entonces hay que pensar en todas esas cosas. Tienes que hablar con desarrolladores obviamente para ver qué tamaños van a apoyar porque no hay punto de vista de diseñar, por ejemplo, no sé un tamaño de smartwatch cuando no van a usar el tamaño del smartwatch de deuda, se suma el tiempo al proyecto. Se suma el costo al proyecto, al cliente y a ti porque vas a perder tu tiempo en el tamaño que no van a apoyar y no van a usar. Si estás pensando en el soporte para navegadores, ese no es tu problema. Ese es el trabajo del desarrollador porque lo están haciendo en código. Simplemente estás haciendo la parte de diseño en Adobe XD. Una vez más, un WASD es todo sobre el diseño. Tienes alguna funcionalidad de exportación de código, pero es tan básica, ni siquiera vale la pena hablar. Hay algo llamado anima bajo mercado y se puede usar eso para exportar código. Pero he encontrado que estos grandes desarrolladores en línea dijeron que ese acorde realmente no es tan limpio. Y solo están usando algunas técnicas para copiar y pegar líneas y bloques de código. Por lo que realmente completamente codificado desde cero es la mejor manera de ir de Adobe XD al producto life. Por último, cuando se trata de diseño responsive, también necesitamos pensar en la tipografía en cómo escala. Vamos a hablar de eso obviamente. Entonces en mi caso o traté de usar la misma topografía y solo con un poco más de espaciado o un poco más de altura de línea o luz solar que a lo largo de mi diseño responsive. Pero cuando llego a la parte más pequeña, realmente me gusta bajarla, sobre todo si estás diseñando para un móvil pantallas que son realmente extremadamente pequeñas. Entonces estoy tratando de reducir el tamaño a medida que voy bajando. Y siempre me gusta ir desde el escritorio hasta el móvil. Entonces como dije en el siguiente video, vamos a empezar con el diseño responsive. Voy a hablar de estas rejillas, tamaños de cuadrícula para el bootstrap. Te voy a mostrar cómo puedes aplicar esos y cómo puedes crearlos también. Una cosa más que me gustaría mencionar es que voy a crear una, una página responsive para un sitio web y otra para el dashboard. No te voy a perder el tiempo pasando por todas estas y luego haciendo todas estas por esas. Eso se puede hacer si se quiere, al igual que una práctica. Y aplicar los conocimientos de esa página y una página de tablero a todas estas otras páginas. Y sobre todo después estás en páginas personales si quieres diseñar dosis. Entonces básicamente eso es todo para este video. Y te veré en el próximo. 55. Crear un sistema de cuadrícula de diseño Responsive: En esta sección del curso, por fin vamos a empezar a trabajar en el diseño responsive. Y te voy a explicar qué es el diseño receptivo a través de sólo este ejemplo. Entonces no solo voy a hablar de interior, solo te voy a mostrar cómo lo hago, cómo puedes hacer con qué opciones de Adobe XD hay para ti. Y algunos consejos que te puedo dar de todos estos años en trabajar con diseño responsive. Entonces como dije en un video anterior, vamos a utilizar el sistema de rejilla Bootstrap. Y como dije, encontré estos en línea en Dribble en realidad. Por lo que en realidad vamos a usar cinco tamaños en total. Entonces este es nuestro tamaño medio. Por lo que esto es para un sitio web grande. Mira, así que es para escritorios grandes y por ejemplo, para pantallas. A ver, de 24 pulgadas para arriba. Y se van a adaptar de esa manera para que se puedan ver en televisores grandes, por ejemplo, y así sucesivamente y así sucesivamente. Y eso es lo que el cliente optó por apoyar. Vamos a diseñar para tamaños más pequeños. Y para ahorrar tiempo, discurriría porque literalmente nos llevará como 100 dólares o algo así para cubrir cada página y cada detalle. Entonces por eso dije que no voy a hacer el wireframe para que todos estos dashboards ahorren tiempo. Por eso dije sobre todas estas páginas adicionales, como sobre nosotros página y demás y así sucesivamente. No lo voy a diseñar porque lo puedes hacer tú mismo si quieres, si quieres practicar, si quieres aprender cosas nuevas, usando los consejos y técnicas que aprenderás del discurso y los aplicarás a esas páginas. La disidencia se aplica al diseño receptivo. Simplemente vamos a hacer un diseño responsive para esta página de inicio y para la página del tablero. Debido a que la navegación en el tablero va a cambiar tan bien como con esta navegación, te voy a mostrar cómo puedes adaptar los componentes, cómo podemos hacerlos más pequeños, y todas esas cosas. Entonces, sin más preámbulos, empecemos. Y en este primer video de la serie de diseño responsive, te voy a mostrar cómo podemos crear rejillas y enriquecer tamaños que vamos a usar. Por lo que para empezar, voy a dar click justo aquí donde dice tablero de arte. También puedes golpear un en tu teclado. Y cuando hago eso, me da todas estas opciones aquí mismo. Entonces si recuerdas de los videos introductorios, si los ves, también puedes hacer eso pateando, golpeando la pantalla de inicio y luego eligiendo entre las plantillas predefinidas. Pero si no, puedes hacer click aquí y te va a mostrar todas esas plantillas más más. Yo sólo voy a hacer esto. Entonces web 19-22. También puedo copiar y pegar uno de estos, pero no voy a hacer eso. Voy a posicionarme a la derecha por aquí y entrar en modo prototipo. Haga clic aquí y llame a este flujo pero diseño receptivo. O aún mejor, un rediseño de sitio web receptivo. Porque más adelante vamos a hacer lo mismo y hacer un diseño de dashboard responsive. Ahora que he creado papá, simplemente puedo moverme. Es sólo hasta un poco para algún lugar por aquí, por ejemplo, cuando alejas el zoom, se ve bien. Y en términos de organización, podemos, por ejemplo, tablero de mesa de frutas justo debajo de aquí. Entonces podemos mover el diseño del sitio web aquí mismo en lugar del panel. Podemos posicionar este tablero a la derecha si no tenemos suficiente espacio. Podemos posicionarlo a continuación. Entonces realmente todo depende de ti y de lo que estás tratando de hacer. También podemos posicionar estos alámbricos y salpicadero aquí mismo. Y luego diseña debajo de eso, y luego Responsive Design debajo de eso, nos va a ahorrar un poco más de espacio, para que no tengas que desplazarte todo el camino hacia abajo. Tus clientes, compañeros de equipo y desarrolladores no tienen que desplazarse hasta el final para ver todos estos. En nuestro caso, sólo lo voy a hacer así. Pero una vez más, puedes hacerlo como quieras. Entonces voy a acercarme realmente de cerca este. Y lo voy a llamar, por ejemplo, o escritorios grandes. Más de 1200 píxeles. Para que pueda mostrarle a mi desarrollador lo que estoy tratando de lograr con este. Entonces lo que voy a hacer con él es lo primero que primero voy a reducir el tamaño. Por lo que la altura va a básicamente se mantuvo igual, pero el ancho va a cambiar. Por lo que esto va a ser de 1440 píxeles. Entonces si recuerdas en este es 1920, éste es 1440. Puedo moverlo solo un poquito arriba así. Y obviamente voy a adaptar la rejilla para que encaje con este tamaño. Por lo que todavía vamos a tener 12 columnas, pero el ancho de canaleta va a vencer a tardy como DAT. El ancho de columna va a ser de 65 y ver si podemos aplicar eso. No hay seguridad. Y vamos a usar 165 aquí mismo. Entonces vamos a comprobarlo una vez más. Por lo que 12365165. Por lo que obviamente esto va a ser margen. Por lo que estos son márgenes izquierdo y derecho. Obviamente se pueden aumentar estos. Entonces si tú, por ejemplo, querías hacer columnas más anchas, puedes, si quieres que el ancho de la canaleta sea más ancho, puedes hacerlo también. Yo sólo lo voy a dejar así. Lo que voy a hacer a continuación es golpear control D para duplicar esto nuestra pizarra. Y voy a llamar a estos, por ejemplo, en escritorios, o llamémoslo, no sé, agrandar dispositivos. Por lo que se trata, por ejemplo, de laptops, que son apenas más grandes que las laptops más pequeñas. Por lo que van hasta 902 píxeles. Y una vez más, obviamente, si estás haciendo algo más como Angular o algo así, vas a tener ajustes diferentes a mí. Si estás haciendo Bootstrap, también puedes usar otras configuraciones. Entonces como dije, no tienes que usar estas columnas. Puedes usar ocho columnas para lo que sea. Se puede utilizar diferente ancho de canalón en diferente ancho de columna y así sucesivamente. Entonces lo mejor que puedes hacer aquí mismo es hablar con tus desarrolladores sobre cómo les gusta trabajar, en qué tamaños y cómo puedes implementar eso en tu diseño responsive? Obviamente, hay que hablar con ellos sobre qué tamaños van a apoyar. Entonces, por ejemplo, si no necesitan los dígitos de tamaño que necesitan en este tamaño. Entonces 19-22, entonces puedes apoyar eso. Ahora para este, sigamos adelante. Y 19, así que 1080 se va a quedar, pero vamos a reducir esto, por ejemplo, a 10-24, por ejemplo. Al igual que la deuda. Entonces vamos a dejarlo en deuda. Dispositivos tan grandes de hasta 992 píxeles. Ese es básicamente el tamaño que vas a apoyar y ese es el tamaño de tu cuadrícula. Entonces como pueden ver aquí mismo, estamos en 1440, pero nuestra cuadrícula, tan blanca orden de nuestra cuadrícula es de 1200 píxeles. Entonces este es el 992. Por lo que va a ser un ancho de nuestra rejilla de 9021024 es el ancho general de nuestro propio aeropuerto. Entonces sigamos hacia abajo. Aquí también vamos a hacer algunos cambios, sólidos de usar. Veamos 47 para nuestros márgenes. Entonces algo así. Y puedes ver de inmediato que tenemos unos márgenes más pequeños aquí y luego aquí. Y esto obviamente está empezando a tomar tabletas de forma. Por lo que la siguiente va a ser tableta. Pero antes de pasar a eso, vamos a comprobar rápidamente. Entonces vamos a tener 12 columnas. Obviamente, si quieres usar, puedes tener ocho columnas o cuatro columnas, incluso seis columnas. Por lo que una vez más, habla con tus desarrolladores sobre lo que les gustaría que implementaras y cómo les gustaría que crearas esto. Por lo que es más fácil para ellos desarrollar este sitio web. Posteriormente. Vamos a tener ancho de canalón de 30, ancho de columna de 50, y los márgenes están vinculados izquierda y derecha o 47 control D para duplicar este. Y esto va a ser mediana. Y dispositivos. Entonces por ejemplo, tabletas y hasta 768 píxeles de ancho. Entonces una vez más, 76 ocho es el ancho de nuestro gran, y vamos a aplicar eso para adaptarnos. Entonces una vez más, como dije, múltiples veces puedes usar sistema de cuadrícula de ocho columnas, puedes usar seis, puedes usar para lo que quieras, pero solo voy a usar 12 por el bien de consistencia. Entonces vamos a bajar esto. Entonces lo vamos a mantener en, digamos 76 asientos. Al igual que la deuda. A continuación vamos a tener 12 columnas, 30, vamos a tener 30 aquí mismo. Y vamos a tener, vamos a ver, 39 aquí, así. Y veamos, me está dando 44 por alguna razón. A ver, Australia otra vez. Por lo que una vez más, Adobe XD nos está jugando juegos. No me deja terminar esto. 30. A ver, 44. Entonces, en realidad, sí, dejémoslo así. Entonces dejémoslo a los 44. Entonces básicamente eso es todo. Vamos a sobreponer algunas cosas más. Entonces voy a duplicar esto. Voy a llamar a esto dispositivos extra pequeños. A ver. Teléfonos y por debajo de cinco, 76 en píxeles. Entonces déjame revisar esto así. Y esto en realidad va a ser, vamos a reducir su tamaño va a ser 375. Tan realmente pequeño. Vamos a tener sólo cuatro columnas. Vamos a tener el ancho de canaleta de 30. Y veamos, podemos reducir esto a 20. Esto va a ser 61. Esta robusta y columnas son para, una vez más, porque estamos haciendo esto, tal vez podamos deducir y distal ocho. A ver, sólo para que podamos darnos un poco más de espacio. Y entre estos, esto es a las cuatro, y eso es básicamente todo. Hemos creado nuestro diseño responsive y sistema de rejilla. Ya lo puedes ver. Realmente no me gustan estos grandes márgenes del costado. Por lo que quizá podamos reducir esos más adelante. Pero por ahora, solo mantengámoslos ahí tumbados y veamos qué tenemos con nuestro diseño una vez que nos pongamos en marcha. Entonces eso es básicamente todo para este primer video. En el siguiente video, vamos a copiar esta página, lo siento, esta página con el diseño hacia abajo y en realidad vamos a empezar a adaptarla a nuestro sistema de grid. Entonces te veré ahí. 56. Diseño responsivo 1: Ahora vamos a empezar por fin a trabajar en nuestro diseño responsive. Y para empezar, puedes abordar estas dos formas. La primera forma es simplemente saltar dentro de tu tablero de arte. Y debido a que vamos a estar haciendo esta pantalla de diseño de la página principal, simplemente puedes copiar todo ese contenido y pegarlo aquí y simplemente extender este rpart hacia abajo que acabamos de crear para este primer tamaño. La otra forma de hacer esto, y realmente preferí este método, es porque es mantener los esquejes realmente agradables, limpios, fáciles de ver, fáciles de entender es simplemente sostener tu vieja llave. Duplicar posición de tablero desarmado. Está en algún lugar por aquí. Entonces si querías estar cerca de tu aeropuerto con tu sistema de red en su lugar para que puedas comprobarlo y ver por ti mismo para qué necesitas escalar, donde necesitas escalarlo, cuatro y así sucesivamente. Por lo que es mucho más fácil así en mi opinión. Pero una vez más, puedes hacerlo al revés. Entonces la otra manera, como dije, es simplemente saltar aquí mismo. Puedes seleccionar todos estos elementos, golpear control C. También puedes agruparlos y luego extendidos esto nacen todo el camino hacia abajo, por ejemplo, así. Y entonces controlaría V para pegar en todo ese contenido. Pero como dije, me gusta hacer las cosas de esta manera. Entonces, realmente todo depende de ti decidir de qué manera sí quieres moverte. Entonces para empezar, lo que quería hacer es básicamente adaptar mi diseño a estos tamaños. Por lo que quería reformarlo en 40 de ancho. Yo quiero que sea ilimitado en altura. Entonces básicamente sea cual sea la altura que tome, porque en todos estos sitios web donde están en Manuel, en escritorio y tablet, lo que sea que estés desplazando hacia abajo. Entonces es realmente el ingenio de DES, elementos y restricción de ancho, que cambia, que se puede ver aquí mismo a través de estos son tableros. Entonces básicamente, la altura puede ser tanto como necesites, mientras que el ancho simplemente está restringido con tu contenido. Entonces como dije, varias veces, este contenido simplemente puede cambiar. Entonces, por ejemplo, para los tamaños más pequeños, tal vez no necesites todos estos elementos de fondo porque, por ejemplo, podrían o no ser fácilmente legibles en tamaño de la pantalla de un teléfono móvil mientras que en el escritorio hay bellamente presentados, limpio, fácil de entender, fácil de ver y de absorber. Entonces lo que puedes hacer es quitar algunos de esos elementos a medida que vas bajando. Pero voy a tratar de mantener tantos de estos elementos como sea posible para que pueda mantener mi experiencia consistente a lo largo de mi diseño de página web. Por lo tanto, empecemos con nuestro diseño responsive. Y para hacer eso, primero necesito hacer algunas cosas. Entonces lo que necesito hacer es crear grupos para estos elementos separados porque quería ser escalable hacia abajo. Entonces, por ejemplo, para este grupo justo aquí en la parte superior, quizá no necesito hacer nada. Lo único que quería hacer y es en realidad agruparlos así. Por lo que vamos a seguir adelante y golpear Control G. Y mecanografiando ubicación. Me voy a ir por negocios como es porque es sólo un texto por sí mismo. Para este, voy a golpear Control G y teclear teléfono. Y finalmente para este, voy a golpear Banderas de genotipificación de Control. Y lo que esto me va a permitir hacer es cuando empiece a escalar, los elementos dentro de las carpetas van a permanecer juntos y ahí van a escalar entre sí. Si bien si los dejas fuera de tus carpetas y comienzas a expandir esto y empiezas a escalarlo. Entonces si empiezo a escalarlo así, se puede ver que las cosas se están moviendo juntas porque están dentro de la carpeta. Pero por ejemplo, si digo Desagrupar mis banderas y mi teléfono. Entonces hagámoslo en grupo. Y luego cuando empiezo a redimensionar esto, se puede ver que casi se ve igual. Pero en cuanto las cosas llegan tan lejos, se puede ver que el teléfono y el ícono del teléfono se superponen entre sí. Y cuanto más y más se reduzca el tamaño de esto, se puede ver cuanto más grande se pone el problema. Entonces, deshagamos todas esas cosas. Vayamos a aquí. Entonces teníamos el teléfono y las banderas. Básicamente tenemos que hacer, pensar. Tenemos que hacer eso para todos estos grupos y capas. Entonces aquí tenemos el texto, que está bien. También lo colocamos en una pila que también está bien y genial para posicionarse más tarde, te voy a mostrar que más adelante, Hero Elements siempre debe estar dentro de una carpeta de datos. Parejas felices. Entonces esta es solo nuestra imagen. Vamos a posicionarlo Forma de héroe, básicamente sólo una forma. Esta máscara está dentro de un grupo. Entonces básicamente una máscara es un grupo de estos dos elementos y simplemente se esconden entre sí. Entonces vamos a dejarlo tal como está y vamos a escalar esta máscara según sea necesario. Y por último, el héroe bg dt puede quedarse así. Ahora por los servicios, podemos dejarlo así porque puedes ver que tenemos estas tarjetas de contenido y podemos renombrarlas. Y obviamente me olvidé de hacer eso. Entonces en lugar de una tarjeta de continente, debes escribir algo así como cuentas personalizadas, Dan ahorros personalizados Dan tarjetas de débito personalizadas. Para que puedas hacer eso por todas estas cosas. Ahora lo que podemos hacer con este es que podemos crear una pila. Y si lo abro, se puede ver que se posicionó a este medio en una pila. No sé por qué las pilas están haciendo esto. Entonces en lugar de simplemente usar este texto fuera o lo que sea, es solo posicionar estas cosas en un grupo. Entonces haré clic con el botón derecho desagrupado en, y en realidad volveré a no seleccionar mi pila. También puedo hacer esto. Ahora. Puedo desagrupar esto. Y ahora si posiciono este texto fuera de mi carpeta, haga clic aquí, lo posiciono en una pila y lo abro. Se puede ver que todos están afuera. Entonces si opto por posicionar mi pila así, puedes ver que automáticamente posicionó todas estas cartas una encima de la otra. Entonces en realidad voy a hacer eso. Voy a quitar mi texto, colocarlo fuera o la carpeta porque así es mucho más fácil que adaptar todos estos cambios. Ahora pasemos al tipo de cambio. Entonces voy a posicionar este texto en un grupo. Entonces así porque ese es sólo el único texto que necesitamos. Y lo que voy a hacer es no me voy a posicionar en una pila. Y lo que voy a estar haciendo en realidad es seleccionar todos estos. Cotización, Por ejemplo, monedas como esta. Y luego simplemente usa esta opción, que es desplazamiento horizontal. Y puedes mostrar con estos contornos donde querías desplazarte horizontalmente para empezar y finalizar. Entonces lo voy a adaptar a aquí y a dos aquí por ahora. Y obviamente una vez que empecemos a bajar, entonces puedes seguir adelante solo con todos estos ajustes. Entonces voy a copiar mi texto pegado aquí. Por lo que dice monedas y no desplazamiento vertical u horizontal, nombre del servicio. Como puedes ver, ya está dentro de la pila. Tenemos la imagen, teníamos el texto, lo cual está bien. Vamos a dejarlo así. Ahora por estas tarjetas, puedo posicionarlas en un grupo y llamarlas tarjetas. Y entonces puedo poner eso creció en una pila. Se puede ver que siguen siendo así. Y una vez más, va a ser mucho más fácil para nosotros simplemente hacer clic en un botón. Se va a posicionar hacia abajo donde sea necesario. Entonces lo vamos a dejar así por ahora. Nuestras últimas noticias, voy a hacer lo mismo. Entonces voy a quitar mi texto afuera, colocarlos en una pila. Si hago clic aquí, puedes ver a lo que me refiero. Por lo que está posicionándolos hacia abajo. Por último, info strip y vamos a hacer lo mismo. Entonces en realidad ya lo hice así tenemos Localización, teléfono y correo electrónico, y tenemos infraestructura, BG. Entonces lo vamos a dejar así porque es mucho más fácil de ajustar. Estos elementos están enviando se ven bien a la parte superior. Ahora sólo tenemos básicamente si lo miras para diferentes elementos. Por lo que tenemos logo, tenemos el nombre de la calle, tenemos el número de teléfono, y tenemos el correo electrónico. Por lo que en realidad voy a eliminar esta información más adelante y simplemente dejando los iconos en su lugar. Ahora cuando se trata de pie de página, si abrí el Photoshop, se puede ver que ya tenemos toda esta información en su interior. Entonces lo que puedo hacer es que puedo, todo lo que puedo solo usar la pila si quiero, pero no voy a hacerlo, lo voy a dejar así porque va a ser mucho más fácil para mí reposicionar todos estos más adelante. Entonces te voy a mostrar eso también. Y eso es básicamente todo para los ajustes. Ahora empecemos con nuestro diseño responsive. Por lo que una vez más, necesitamos reducir el tamaño de esto son o no valen. Porque se puede ver que es en 1920 ahora, necesitamos reducirlo a 1440. Y vamos a dar clic aquí y cambiar el nombre de esta página de inicio respuestas así. Y una vez más, para llevarte de vuelta, solo voy a hacer diseño responsive de esta sola página porque una vez más, me va a tomar horas, si no días, para hablar y crear este diseño responsive para tus chicos, es te va a llevar como un día, por ejemplo, para todas estas páginas. Y puede ser medio día para todas estas páginas si quieres ser completamente preciso y así sucesivamente. Si quieres cortar algo de holgura en unas pocas esquinas solo para crear un diseño responsive. Puedes hacer todas estas páginas en como 67 horas, así que un día hábil, por ejemplo. Así que asegúrate de cobrar a tus clientes. Adicionalmente, si estás creando un diseño receptivo para ellos, solo asegúrate de que lleva tiempo, toma planeación, toma pensar. Por lo que siempre se pueden aplicar estos principios. Entonces por ejemplo, los grupos de desplazamiento, estas pilas a medida que diseñas. Así que practica a través de este curso, ve qué te funciona mejor y luego aplica esas técnicas más adelante cuando comiences a trabajar realmente con clientes reales. O si estás cambiando técnicas con tus clientes existentes. Entonces volvamos a saltar a ella. Si hago clic aquí una vez más, así 1440, voy a dar click aquí, 1440. Y en cuanto presiono Enter, se puede ver que corta todo nuestro cuántico, pero eso está bien, se supone que eso va a suceder. Ahora lo siguiente es copiar todos estos elementos. Por lo que puedes hacer clic derecho aquí mismo. Y puedes ver que tienes todas estas opciones. Tienes copia, has arreglado, has alineado a cuadrícula de píxeles, tienes guías y así sucesivamente. Pero no tienes la opción de realmente copiar el diseño en desacuerdo a aquí. Puedes convertirlo en el predeterminado aquí, pero puedes usar predeterminado, que ¿Hay un valor predeterminado, pero no puedes aplicarlo como una plantilla separada, que en realidad es la actualización que realmente me gustaría ver del equipo de Adobe XD es, por ejemplo, digamos que este es el escritorio, este es un escritorio más pequeño, esto es aún más pequeño. Se trata de sus tabletas y teléfonos. Déjame crear diseños de cuadrícula adicionales para todos ellos. Entonces si hago clic aquí mismo, se puede ver que tengo mi diseño de cuadrícula en su lugar porque ya ingresé manualmente todos estos valores. Entonces déjame crear esos valores como plantilla. Y luego cuando copio y pego esto aquí mismo, simplemente puedo usar un botón para aplicar esa plantilla a mi obra de arte existente. Ojalá tuviera sentido, pero tristemente, por ahora no tenemos esa opción. Entonces tenemos que usar estas opciones para eso. Entonces una vez más, lo tenemos justo aquí. Voy a usar todas estas opciones a continuación. Entonces vamos a usar las 12 columnas. Vamos a usar 30 aquí mismo, donde vamos a usar 65 y vamos a usar 165, Miller, así. Entonces nos va a dar algunos temas más. Por lo que una vez más, 3065165. Entonces Dairy, cómo ahora tenemos este diseño exacto para nuestra grilla, espejado a esta página aquí mismo. Por lo que ahora podemos seguir adelante y empezar. Somos diseño responsive. Entonces lo primero es lo primero, puedo ir adelante y saltar a la cima y ajustar todos estos elementos para que veas dónde está nuestra cuadrícula ahora. Jabones, todavía tenemos rejilla de 12 columnas. Entonces, solo sigamos adelante y ajustemos todos estos elementos a ella. Entonces saltaré aquí mismo. Para nuestra ubicación, simplemente lo moveré aquí mismo, lo alinearé a mi cuadrícula o posicionaré esto aquí mismo. Aprenderé más y pincharé en mi teléfono. Da click en mis flores, y solo necesito ver dónde estoy telefono puedo conseguir posición de maniquí y aquí creo que va a funcionar muy bien. También se puede posicionar para negocios, por ejemplo, aquí afuera, pero me gusta dejarlo ahí por ahora. Y eso es básicamente todo. Eso es lo que vamos a hacer con todos estos diferentes elementos. Ahora con la navegación va a ser un poco diferente porque ya tenemos nuestra navegación seleccionada. Entonces tienes básicamente dos opciones. Una opción es usar la que ya tienes como simplemente seguir adelante y adaptado a todos estos estatus. Detener. A ver. Contamos con escritorios grandes para que uno. Entonces lo que tendría que hacer es dentro de mi nav principal para este. Porque como se puede ver, este es el diamante ahuecado, no lleno de diamante, lo que indica que este no es el componente principal, sino el componente hijo fuera del componente principal en sí. Lo que significa que podemos hacer cualquier tipo de cambios que queramos y no va a afectar nuestro componente medio es solo afectar este componente de gel y componente infantil de ahí hay así que espero que eso tenga sentido. Pero porque solo estoy haciendo esta sola página para ahorrar un poco de tiempo. Simplemente ajustaré esto para el estado predeterminado en sí. Básicamente, si quieres hacer esto por todas las páginas y dentro de los proyectos, obviamente tienes que hacerlo, entonces puedes saltar. Después de ajustar este, puedes saltar a la cuenta, ajustarlo, puedes saltar a préstamos y así sucesivamente y así sucesivamente. Entiendes el punto. Tienes que hacer esto todo el tiempo. Por lo que saltaré dentro y agruparé todos estos juntos así y los llamaré, por ejemplo, elementos de menú o nav como ese. Sólo para que sea un poco más fácil para mí trabajar. Y luego voy a dar clic aquí y ajustar el ancho dos aquí. Y como pueden ver, ya tenemos algunos temas. Entonces tenemos que ajustar esos temas a medida que avanzamos. Entonces básicamente, si hago doble clic ahora, puedes ver que estamos en Poppins 18. Entonces lo que voy a hacer primero es básicamente ajustar mi botón porque necesitaré que sea a este tamaño. Por lo que voy a dar clic en algo como esto. Iré al hover y haré lo mismo. Ir al estado predeterminado es simplemente moverlo. Y vamos a ver, María puede posicionarse para tener 20. Puedo hacer lo mismo por mi logo. Entonces 20, sólo para darme un poco más de espacio. Ahora con esta, si estás usando una cuadrícula de repetición, puedes ajustar automáticamente el espaciado entre ellas. Pero debido a que no lo somos y estos se crean como artículos separados, tenemos que ajustar nuestro espacio manualmente. Entonces lo que puedo hacer es básicamente dar click aquí. Y vamos a ver, posicionar este 1234 tal vez. Y luego adelante, selecciona todos estos. Y vamos a ver, muévalos a los 40 también. Por lo que 1234, puedes anular la selección ésta y luego seguir adelante y crear un espaciado de 44, todos estos. Y como pueden ver, ahora está empezando a darme ese espaciado. Entonces hábito lácteo, si escondo mis rejillas por un segundo. Sólo para que lo veas mejor, puedes ver lo que hicimos. Para que se pueda ver a dónde va esto. Tienes que saltar, ajustar todos estos tamaños, son solo todos estos espacios para todas tus páginas. Y por eso esto es realmente importante. Entonces sigamos adelante y sigamos adelante. A realmente no me gusta este espaciado, pero dejémoslo ahí por ahora. Por lo que voy a dar clic aquí para traerlo de vuelta a mi grilla. Entonces lo que voy a hacer es realmente saltar, mover mi imagen adentro y la puedo bajar, por ejemplo, sólo un poquito, sólo para ver dónde me está poniendo esto. Entonces puedo posicionar mi texto aquí mismo. Puedo saltar por dentro y mover mi botón a este tamaño. Por lo que puedo ajustarme obviamente. Y luego puedes copiar y pegar este botón si quieres, para todos tus demás botones. Entonces por ejemplo, para este y estos dos, solo para que se vea igual en todo tu diseño. Lo que puedo hacer a continuación es si vemos justo aquí estamos a los 90. Entonces lo que podemos hacer es que podamos rodear nuestros textos. Por lo que para una nueva página, puedo dar click afuera. Se puede ver cómo se ve eso. Si estás contento con ello, puedes posicionarlo. También puedo escribir este texto a continuación. Y se puede ver porque están en una pila, todo se está ajustando bien. Entonces estamos 50 aquí, 50 aquí. Simplemente puedo mantener presionado mi click y se va a ajustar para escuchar. O si estás sosteniendo la tecla de turno, va a ajustar ambas. Y ese es el beneficio de usar pilas porque te va a permitir ajustarte fácilmente a todos estos cambios. Ahora movamos esto sólo un poquito arriba, por ejemplo aquí. Entonces puedo volver a posicionar podría imagen, por ejemplo aquí. Y puedes cortar porciones de tu imagen, algo así si crees que eso es apropiado. Pero porque no lo hago, simplemente ajustaré mi tamaño de mi imagen. Algo así, por ejemplo, puede ser un poco más alto. En algún lugar por aquí. Creo que está bien. Y creo que eso funciona un poco mejor que eso. También puedes hacer un rap como este para que puedas dejar la palabra de edad abajo, pero generalmente no se recomienda nunca dejar solo una palabra abajo. Pero en este caso, lo dejaré porque realmente se ajusta a nuestra imagen y realmente se ajusta a nuestro diseño. Por lo que el siguiente paso, los RDs dan forma. Así que sigamos adelante y ajustemos todas estas formas manualmente. Posición del suelo, ésta de aquí. Deja que éste esté aquí mismo. Y mientras que están alineados aquí es manualmente simplemente posicionamiento y tal vez incluso justo aquí. Y también puedes jugar y ajustarte para la rotación, digamos así. Entonces lo siguiente es que nuestra mezquita buscó o simplemente ajustar el ancho de mi máscara así para que se ajuste a la raíz de mi tabla. Y luego saltaré dentro de una luna MyCircle a algún lugar por aquí, por ejemplo. Por último, nos queda la forma de Héroe, y vamos a posicionar nuestra forma de héroe en algún lugar por aquí. Lo que puedes hacer es también reducirlo. Por lo tanto, sostén tu tecla de turno y puedes ajustarla para atreverse. Y a partir de ahí, simplemente puedes ampliar esto. Al igual que así. Y puedo saltar por dentro y mover mis formas por ahí. Entonces básicamente hato lechero, lo que nos queda es el héroe BG. Voy a simplemente más con aquí mismo. O puedes usar 1444, el ancho. Y básicamente cuantos más elementos tengas en tu zona, como puedes ver, nos olvidamos de mover el Vg. Por lo que puedo hacer una duda. 1440, presione enter, enter, va a cortar al ancho general de nuestra página. Básicamente cuantos más elementos tengas en tu página, esto te va a llevar más tiempo. Entonces, por ejemplo, dejemos esto así. Y sólo voy a volver a ese trazado anterior porque realmente no me gusta cómo se ve eso. Para una nueva era. Eso me gusta un poco mejor. A Abbas todavía no le parece demasiado feliz. Entonces porque ponemos este texto fuera de nuestro grupo que simplemente puede hacer clic aquí y posicionarlo. Y como puedes ver, sigue conservando 100 para el espaciado. Ahora llega el momento de ajustar todos estos. Y lo difícil de estos es porque si recuerdas por cada uno de ellos tenemos el hover. Entonces tenemos que ajustar estos dos estados por separado, lo que nos va a llevar obviamente en sólo un poco más a tiempo. Entonces lo voy a posicionar a nuestra grilla así. Voy a saltar aquí mismo y ajustarme. Por lo que una vez más, tenemos tres elementos. Por lo que vas a tomar cuatro columnas por cada elemento. Porque tenemos 12 columnas en su lugar, voy a tratar de mantener la altura en su lugar. Por lo que básicamente la altura debe permanecer igual. Si no, también podemos cambiar la altura. Por lo que una vez más, simplemente haga clic aquí, ajustado a la forma. Se puede ver ajustada realmente bien. Y puedo saltar a mi estado de horror y ajustarme a cuatro también. Lo que voy a hacer dentro del estado de horror es simplemente hacer clic en estas formas. Puedo reorganizarlos. Y esa es la magia del futuro de diseño receptivo para ti. Si hago clic aquí mismo al estado predeterminado, puedes ver cómo se ve eso. Entonces básicamente cómo funciona el diseño receptivo puedes tomarlo para ya sea tu tablero de arte. Entonces cuando está aquí lo está, puedes boleto para nuestra directiva y luego todo tu reporte se va a escalar de manera responsable. Pero luego tienes que saltar adentro entrando por ti mismo lo que XD piensa que es lo mejor para tu diseño. Obviamente sabes cuál es lo mejor para tu diseño porque eres tú quien lo ha hecho. Entonces básicamente, te estoy recomendando este método, que es lo que estamos haciendo aquí mismo, es saltar dentro de una edición todos estos elementos por separado. Para dar click justo aquí puedes ver que tenemos un diseño responsive encendido aquí mismo. Entonces ahora que nos movemos en este grupo y que lo organizamos, puede ver que se mueve de manera responsable. Pero debido a que seguimos en una pila, puedes moverlas para moverlas de manera responsable en todas estas diferentes páginas. Entonces lo que necesitamos hacer aquí mismo es mover nuestra flecha porque se puede ver, porque no estaba en una carpeta, se puede ver aprender más y la flecha están separadas. Y déjame mostrarte eso también. Entonces OK, volvamos todo el camino de regreso. Nuestra posición original. Entonces en Más así, ahora puedo saltar por dentro y agrupar esta calidad, Aprender Más. Control C. Saltaré asignado estado mahara. Agrupar estos para conocer más. Y ahora cuando empiezo a redimensionar de manera responsable estos, se puede ver que aprender más y estado de flecha donde deben estar para que no se muevan en absoluto. Entonces eso es lo que vamos a hacer por todos ellos sólo para ahorrarnos un poco de tiempo. Y por eso los grupos son realmente importantes. Entonces donde quiera que puedas poner artículos en un grupo, porque vendrán a morderte más tarde. Es como lo están haciendo ahora mismo. Normalmente los estoy poniendo a todos en grupos. Pero para el discurso, decidí no encabezar. Fue realmente difícil para mí ajustarme a eso porque como dije, lo hago normalmente solo para mostrárselo a ustedes chicos lo importante que es cuando llegan a esta etapa, que es una etapa de diseño receptiva. Ahora como dije, lo que voy a hacer es adaptarlas a este Otoño columnas de ancho. Entonces así, voy a mover esto aquí mismo. Para que puedas acercar toda la ropa y ver el espaciado que es de 30, simplemente ajustado. Por lo que 1234. Entonces hasta aquí, vamos a ir al hover. Por lo que 1234, una vez más, salta por dentro y cambia todos estos elementos donde creas que es necesario. Por lo que incluso puedes posicionar Esto aquí mismo, por ejemplo, y rotar escritorios como así. Así. A ver, estado sin culpa. Eso está bien. Y por último, voy a ajustar esto también a Turquía, así. Y si te muestro, aquí estamos 30, aquí estamos 30. Simplemente pasa el mouse sobre él y se lo mostrará. Y luego finalmente para este, simplemente clip aquí mismo. Ve a Horace, estado, recorta aquí mismo. Y luego sigamos adelante y ajustemos todos estos elementos. Entonces posicionaré este aquí mismo, tal vez girado un poco, y moveré éste justo aquí. De lo que nos queda es este círculo, como lo pueden ver. Ahora es sólo una elipse porque no estaba en un grupo. Entonces lo que puedes hacer es simplemente hacer una copia desde aquí. Colóquelo, por ejemplo, en algún lugar por aquí. Y puedo golpear el control C para copiarlo. Y luego salta aquí mismo a éste, al estado de horror ubicado donde está. Por lo que elementos y una máscara Control V. Lo colocaré en algún lugar aquí por ejemplo. Por lo que incluso puedes ser preciso. Se puede, por ejemplo, posicionar 20 desde la izquierda. Por lo que va a ser mucho más fácil que posicionarse en todos estos. Entonces 20, voy a quitar el círculo original. Voy a golpear Control C y volver a éste, al casco así. Y por alguna razón es, no cambiamos este hover. Entonces hagámoslo a 1234. Y porque puedes ver que estamos encendidos. Diseño responsive para este elemento, para estos elementos así como las pilas, se puede ver que todos estos elementos se están ajustando bien. Entonces arreglemos primero esto. Hice más al exterior, debería querer. Voy a quitar este círculo y hábitos lácteos cuando voy a hacer también es ajustar estos elementos. Entonces justo aquí, justo aquí. Y eso es básicamente todo. Ya te veo preguntando por este, pero vamos a llegar a él. Pero primero, como pueden ver, nuestro texto está un poco cortado. Como pueden ver, tenemos demasiadas opciones aquí mismo. Entonces lo que podemos hacer es simplemente bajar el tamaño del texto en este punto. Entonces lo que puedo hacer VR, son 24. Lo que puedes hacer es volver al 18. Pero volvamos rápidamente a los estados originales para todos estos. Entonces, vamos a seleccionarlos a partir de aquí. Así que el estado por defecto, el estado sin culpa, el estado por defecto. Y ahora trabajemos en nuestro texto porque como dije, texto es uno de los principales elementos importantes clave. Rico que vas a incluir en tu diseño. Entonces como pueden ver, estamos en 40 justo aquí. Lo que podemos hacer para empezar con este es moverse saliendo a los 20. Para que pueda seleccionarlos todos. Ahora porque esto no es un grupo, es mucho más fácil. Por lo que cambia 12, luego puedes saltar a tu fecha de cosecha, seleccionarlos todos así. Turno 12, y entonces puedo seguir adelante y hacer eso por todos ellos. Entonces avísame. Haga clic aquí. Por lo que le he dicho que quería volver a mi estado de horror. Entonces me estoy dando un poco más de espacio de izquierda a derecha. Pierdo 12. Y se puede ver que el texto encaja ahora. Y en las etapas posteriores vamos a envolver el texto. Pero porque todavía podemos usarlo como si estuviera aquí mismo. Y entonces vamos a trabajar con ello de esa manera. Y se puede ver que todo funciona como debería y todo se ve bien. Entonces hagámoslo para el estado Horace. Y una vez más, vamos a quitar el estado de horror una vez que lleguemos a este punto, porque en la tableta y en un teléfono, realmente no necesitas fincas más altas, pero cuando estás en dispositivos de escritorio, así que imagínate esto es sólo un escritorio más pequeño. Este es el escritorio más grande. Esto es más pequeño y esto es, por ejemplo, una laptop pequeña. Todavía tienes un ratón. O tienes un ratón real o un puntero del ratón o atraes la cama o lo que sea, pero aún tienes un ratón, por lo tanto, aún necesitas el estado de desplazamiento para todos estos elementos. Posteriormente nos movemos, pasamos a estos. Realmente necesitarás el estado de flotación y los artículos básicamente pueden cambiar y ajustarse a estas diferentes posiciones, lo cual te voy a mostrar más adelante. Una vez más, estamos en 100. No cambiamos nada básicamente. Por lo que ahora podemos abordar estos textos. Entonces lo que es otra vez, estamos a los 18. Si comprobamos estamos en 20, pero 60 de este lado, lo que significa que tenemos mucho espacio para jugar. Entonces lo que puedo hacer es dar click 16 y puedes ver para elegir entre una amplia gama de opciones de cuenta. Entonces básicamente lo que podemos hacer es cortarlo. Por ejemplo, aquí mismo. Estamos a las 11, por lo que podemos ajustar estos para estar a los 20, así. Y lo que voy a hacer es básicamente ver de qué color es este, es éste. Entonces voy a saltar aquí mismo, elige este color Control C para mi texto. Pero antes de hacerlo, en realidad puedo expandir esto como dije, 2020. Así que así. Y entonces puedo cortarlo así. A ver. Sí. Fue sólo dejarlo así. Entonces él controlaría parece. Puedo volver a mi estado de horror, salta por dentro, click Control V y rebaño lechero. O puede ir más fácilmente al estado predeterminado porque el color del texto es el mismo. Puedo hacer doble clic aquí mismo, Control C. Y puedo volver a mi estado de horror. Haga clic aquí, eliminar Control V va a pegarlo en el mismo lugar, pero simplemente más con aquí mismo. Entonces estamos a los 40. Y si vamos a mover esto, así tenemos el espaciado de 20. Y vamos a revisar eso una vez más. Sí, aún tenemos el espaciado de 20. Entonces si hago clic en vista previa en este y me desplazo aquí mismo, se puede ver que todavía tenemos éste. Todavía tenemos nuestro efecto flotante en nuestros botones. Todavía tenemos este desenfoque de fondo cuando nos desplazamos hacia abajo, así que todo funciona bien. Y finalmente aquí mismo, todavía se puede ver que estos funcionan y funcionan bien. Basta con ajustarnos como hicimos con este texto. Tenemos que ajustarnos para todos estos otros textos. Entonces déjenme hacer eso rápidamente. Una vez más, estamos a los 16. Somos del mismo color. Estamos 20 de este lado, 20 de este lado. Entonces hagámoslo rápidamente. Voy a saltar aquí mismo. Y voy a las primeras cosas ajustadas primero a 16, usar esta misma posición de color y justo aquí, así que turno 12, y luego puedo posicionar este borde izquierdo. Entonces básicamente tengo 20 aquí, 20 aquí. Y puedo saltar por dentro y ajustar un poco este texto. Entonces veamos. Puedo dar click afuera y luego dar click justo aquí. Puedo posicionar esto para estar a los 20. Entonces lo que podemos ver, 12345 líneas de texto, 12345 líneas de texto. Por lo tanto, intenta mantener esa consistencia si no puedes escuchar tan bien. Por lo que controla C en este estado para este texto, salta dentro de la fecha Horace, haz clic en Eliminar, controla V para pegarlo en películas justo debajo. Y mover esto para vencer a 20, así. Después cierra esto, vuelve al estado predeterminado. Eso está bien. Y por último, pasemos a este. Entonces una vez más, primero lo primero lo cambia a 16, este color. Vuelve al panel Capas, que 22 aquí, así 12 y luego extienden este borde izquierdo todo el camino hasta aquí así. Por último, ajustemos nuestro texto a nuestros deseos. Elogiste estampas y más. Entonces es 12345, lo cual está bien. Haga clic aquí, y luego amplíe esto hasta 20. Copia este texto e ir a la fecha de cosecha. Después quitó el original, pegando el nuevo, muévelo justo debajo de aquí. Y Terry cómo simplemente vuelve a tu estado por defecto. Y si golpeamos la vista previa ahora y saltamos aquí mismo, se puede ver que la vista previa funciona muy bien con todos estos. De lo que estoy notando es que este círculo se está expandiendo, así que este círculo hacia abajo, puedes comprobarlo. Si paso el cursor y luego vuelvo el cursor, se puede ver que va desde el círculo original hasta este círculo. Entonces lo que podemos hacer es cerrar este salto dentro de nuestro diseño, una vez más, saltó a todos estos. Entonces primero lo primero lo que realmente voy a hacer porque lo ajustamos para flotar. Entonces voy a volver a rondar así para todos ellos. Entonces lo que voy a hacer aquí es saltar dentro de esta primera, elementos máscara, círculo Control C. Entonces volver a los elementos de estado originales, control de círculo de mezquita v. Así puedo pegarlo aquí, borrado el viejo así. Y puedo ver en deuda, mis elementos aquí se bajan, la obesidad a 0. Por lo que este elemento va a ser 0 también. Entonces ahora que lo hemos hecho, podemos hacer eso por todos ellos. Entonces veamos elementos de tarjeta cuántica, círculo de Mohr Control C, la ropa, todos ellos vuelven a los elementos de estado por defecto, control de mezquita V, y borran así a este viejo Seroquel. Por lo que ahora las animaciones van a funcionar bellamente a medida que avanzas. Vamos a comprobarlo rápidamente y a ver si esos elementos están en 0, lo están. Entonces no los vamos a ver bien antes de pasar a la deuda estatal superior es. Por lo que una vez más, los elementos llamados control ven, vuelven a los elementos estatales por defecto, control de mezquita V, y lo tenemos. Entonces ahora que cubrimos todos esos, volvamos al estado por defecto que somos. Y vamos a previsualizar y ver qué tenemos hasta ahora. Así que basta con prestar atención a ese círculo en la parte inferior, se puede ver cuánto más agradable esta animación lanzada ahora. Se puede jugar con la posición porque está en la misma posición tanto para este estado de horror como para el estado predeterminado. Para que puedas jugar y ver qué quieres con él. Ver aquí mismo, en realidad me olvidé de cambiar de posición para aprender más. Se puede ver cómo se mueve hacia arriba cuando yo flote. Entonces volvamos a este a nuestro estado de puerto. Y cambiemos el texto aquí a 20. Y esa es realmente la parte aburrida de este diseño receptivo es hacer todos estos cambios y luego asegurarse de que funcionen en todas estas animaciones como lo hacen aquí mismo. Entonces todo funciona bien. Pasemos a la siguiente sección. Entonces una vez más, porque no lo hicimos holandés en la sección, altura. Sigue siendo lo mismo que era. puede ver simplemente que todavía contiene el mismo espaciado entre todos estos diferentes elementos. Lo que voy a hacer aquí mismo es realmente sencillo. Entonces voy a seleccionar el barco de estos. Voy a posicionarlos a la parrilla. Entonces voy a saltar dentro de mi posición de texto mis textos o aquí mismo. Y luego voy a ajustar este grupo de pergaminos. Entonces voy a ajustarlo a aquí así. Y luego básicamente cuando hacemos una vista previa, estoy usando mi ratón para desplazarme a la izquierda y a la derecha. Y se puede ver cómo se ve eso. Entonces básicamente, eso es todo. Eso es realmente simple muerto. Y se puede, por ejemplo, mostrar sólo un poquito. Déjame mostrarte eso. Se puede mostrar sólo un poquito. Entonces, por ejemplo, algo así. Y luego haga clic en vista previa solo para mostrarle a la gente que, bien, hay algo aquí que quizá pueda hacer clic y desplazarse y aún así mantendrá esa consistencia entre todos estos elementos. Simplemente tenemos estos problemas, por ejemplo, este número nueve. Pero también se puede extender la deuda, por ejemplo, para cubrir la totalidad, por ejemplo dos aquí, por lo que hasta el borde del tablero. Por lo que obviamente tendrás que explorar con todos estos, pero ahora nos posiciona escuchar. Entonces, por tanto, tenemos que ajustarnos para más. La otra opción es agregar un texto, por ejemplo, desplazarse a la izquierda y a la derecha, o agregar flechas o lo que sea. Pero se puede ver eso con los desarrolladores lo que les gusta hacer. Por ejemplo, puedo agregar flecha izquierda aquí, puedo agregar flecha derecha aquí. Y en lugar de que se desplazen a izquierda y derecha, pueden hacer click en estas flechas izquierda y derecha y lograr básicamente este mismo resultado. Pasemos ahora a la siguiente sección y podrás ver qué tan rápido puedes trabajar con estos. Entonces básicamente lo que puedo hacer aquí mismo es simplemente ajustar mi imagen. Entonces veamos dos formas. Quizás 52345 y se puede ver ajustándose realmente bien. Puedo ajustar aún más este texto. O ejemplo dos aquí para que pueda alinearlo a mi cuadrícula. Todo funciona bien y puedo ajustar aún más mi texto. Puedo dar click aquí mismo para ampliarlo. Y luego lo que tenemos aquí mismo, así que tenemos 40, podemos mover nuestro botón hacia abajo a 40. Esto no estaba en una pila o originalmente. Entonces cambiemos eso de verdad rápido. Entonces éste está en una pila pero el texto no lo está. Entonces voy a hacer clic en eso. A ver, ajustamos el ancho de nuestra imagen. Podemos organizarlo sólo un poquito. Yo lo hice. Y ahora puedo seguir adelante y reorganizar mis textos. Entonces vayamos con este. Puedo dar click justo aquí, y como puedes ver, se expande automáticamente MyText, lo siento mi botón hacia abajo. Entonces lo que voy a hacer es básicamente usar estos dos elementos. Haga clic aquí para posicionar mis textos en el centro, y luego finalmente, ajustar el ancho de mi botón. También puedo copiar del anterior, pero como pueden ver, es extremadamente sencillo. Simplemente se asegura de que tenga tres columnas de ancho y eso es básicamente todo. Entonces volvamos al Estado principal. Este click en nuestra vista previa, a ver si eso funciona. Y lo hace, se puede ver cómo se ve eso. Entonces básicamente todo funciona como debería aquí. Pasemos ahora a estos. Y debido a que no tienen ningún efecto de terror en ellos, excepción de los botones, van a ser realmente fáciles de ajustar. Entonces lo que voy a hacer es simplemente ajustar el descarte sólido C. Podemos tenerlo a las seis, entonces 246. Por lo que al final de esta línea. Déjame revisar una vez más. Por lo que 246. Puedo mover esto para estar aquí mismo. Entonces estar a los 30, como si estuviera ahí arriba con todos estos otros elementos. Y a veces hay que acercar un poco más solo para ser más precisos. Pero se puede ver que estamos alineados con nuestras líneas de cuadrícula. Por último, ajustaré este para que quepa así que son seis también. Y puedes dejarlo así o me gusta mucho esta imagen. Por lo que 368. A ver. Solo necesito mover mi imagen ahora y en realidad, no necesito expandir nada como esto. Eso funciona. Y lo que podemos hacer es ajustar nuestros textos porque se puede ver que nuestro texto se está moviendo ahí mismo. Entonces veamos qué podemos hacer. Podemos dejar todas estas cosas tal como están, pero sólo podemos, por ejemplo, hacer las imágenes más pequeñas. De hecho vamos a extender nuestros textos de. Entonces vamos a ver, es rapear. ¿ Quieres abrir? A ver, tal vez en realidad podamos cortarlo. Veamos así. ¿ Tenemos demasiado espacio entre? A lo mejor lo hacemos. Por lo que básicamente hay dos opciones. Entonces estoy mirando aquí mismo en una es reducir el texto como lo hice. Una es reducir el tamaño de nuestras imágenes. Pero debido a que todavía tenemos un botón aprender más y todavía los vas a llevar a páginas adicionales para explorar estas opciones, Vamos a reducir el tamaño de nuestros textos. Entonces voy a, por ejemplo, posicionar todo esto aquí mismo. Y sólo para que pueda ver lo que esto dice, poder reducirlo a tres líneas de texto. Voy a copiar esta palabra para que pueda adaptarse sabiamente a tu exigente el estilo de vida. Ahí lo voy a cortar. Y luego haz click aquí y asegúrate de que estoy en la misma altura, 73. Y ahora trabajemos en nuestros botones. Entonces una vez más, veamos, en primer lugar, estamos a los 40, así que ajustémoslo al desierto. Entonces vamos a ver, 123 voluntad al estado de horror en a tres, se trasladó al estado por defecto. Y eso es básicamente todo. Entonces voy a golpear Contr 57. Diseño responsivo 2: Ahora sigamos adelante y creamos nuestro próximo tamaño. Y para hacer eso, en lugar de hacer lo que hice primero. Entonces en lugar de copiar y pegar abajo, simplemente voy a controlar una D en esta y pegarla porque ya hicimos estos cambios en nuestro diseño. Entonces una vez más, empecemos y esta es Homepage responsive. Podemos crearlo como suciedad o realmente puedo saltar aquí mismo. Y escribiendo este nombre. Yo puedo hacer lo mismo por esto, que va a ser mucho más fácil para que los desarrolladores después entiendan cuál de estos es. Entonces primero lo primero es 1024. Hagamos eso. Por lo que 1024. Y lo siguiente es, quiero usar estos valores. Por lo que 12305047 en este. Entonces para ir 123050. Y finalmente en esto va a ser 47. Por lo que una vez más 305047. Por lo que entendió. Por fin ahora vamos a seguir adelante y hacer lo mismo que hacíamos antes. Entonces voy a trasladar esto a aquí. Voy a acercar esto un poco más a aquí. Voy a sacar esto del camino por ahora. Voy a mover mis banderas aquí. Voy a posicionar esto aquí mismo y te diré cómo finalmente, ajustemos éste realmente rápido. Yo que ahora sigamos adelante y ajustemos nuestra navegación. Entonces voy a mover loros aquí mismo. Y vamos a ver, todo esto funciona bien. Yo sólo voy a asegurarme de que por ejemplo, estoy a los 40 aquí, así 1234, pero estoy a los 24. Todos estos otros artículos, por lo que uno a 212. Y finalmente se quiere, así se puede ver ya cómo esto es mucho más rápido que en el primero porque ya tenemos éste en su lugar. Entonces ahora sigamos adelante y pasemos a nuestra sección de héroes, que obviamente nos va a llevar demasiado tiempo. Entonces lo que voy a hacer con este es realmente ajustar cómo se ve mi texto. Entonces lo primero es lo primero, voy a dar clic aquí mismo, asegurarme de que esté en el centro así. Y luego me voy a asegurar que esté en 48, así que es mucho más pequeño de lo que era. Entonces lo voy a ajustar ligeramente para asegurarme de que vaya de ancho completo así. Voy a hacer lo mismo por mis otros textos. Así que asegúrate de que sea así. Asegúrate de que esté en el centro. Asegúrate de que esto esté en el centro de esos. Y para ello, simplemente selecciónelos todos. Da click aquí y asegúrate de que todos ellos estén en disidente. Siguiente posición, todo este grupo de textos al centro así, por ejemplo. Y lo que en realidad voy a hacer es asegurarme de que lo suba. Entonces veamos, desde aquí, 123, tal vez cuatro, veamos cómo funciona eso. Y puedo, incluso, porque esto está en la pila, como puedes ver, entonces puedo ajustarme. Entonces si hago clic aquí mismo, los va a mover. No quiero eso. Yo quiero que sea así. Por lo que simplemente puedo ajustar mi pila. Entonces si sostengo la tecla Mayús, se va a ajustar todo. Entonces tal vez podamos tenerlo en caja de discos 24. Veamos cómo se ve eso. Está bien por ahora. Ahora, movamos nuestra imagen. Y primero lo primero, vamos a mover al héroe BG para que se adapte aquí. Por lo que 1024, puedo seleccionarlo y mi imagen colocarlos en el centro. Y veamos qué puedo hacerlo aquí mismo. Entonces puedo, por ejemplo, subir esto un poco así. A lo mejor puedo bajar mi imagen un poco más. A lo mejor así. Y luego me voy a asegurar que esté en el centro. Lo es. Y quizá incluso pueda ponerlo un poco compensado. En algún momento yo esto sólo para que se botón, que este botón va en medio de estas personas. Entonces tal vez algo como esto. Creo que se ve bien. Voy a dejar esto como es por ahora. A ver, tal vez pueda bajarlo un poco así. A mí me gusta cómo se ve eso. Y vamos más ancho para ser tardíos Desde nuestra navegación superior. Por lo que ahora tratemos con Elementos Héroes. Lo mismo, lo posicionó en el centro. Y ahora simplemente puedo ajustarlos bien, para poder posicionarlo en este círculo. No me gusta cómo se ve eso. Quizás incluso pueda cambiar a lugares. A lo mejor puedo posicionar esto para estar aquí mismo. A veces la suciedad puede ser, puedo poner mi línea aquí o puedo rotarla un poco. A lo mejor apaga y posiciona mi círculo a algún lugar por aquí. Ahora movamos nuestra forma. Entonces lo voy a posicionar aquí mismo. Y ahora que no tenemos ninguna instrucción, realmente no importa. Incluso puedes seguir adelante y extenderla si quieres. Pero lo voy a dejar ahí mismo. Por último, para nuestra mezquita, usemos al héroe BG, cosértala. Entonces 10-24, y luego usar nuestro círculo de héroes. Así. Veamos dónde estamos. Por lo que no me gusta el disco duro se ve así que accidentalmente ya lo posicioné antes. Entonces veamos aquí RBG ahora está bien aquí un círculo. Asegurémonos de que esté muerto en el centro yacan muertos. Y también puedes volver a posicionar el círculo hacia abajo un poco si quieres. Tan solo para que por ejemplo, va desde el centro de tu botón o va a algún lugar por aquí. A mí me gusta cómo se ve eso. Y como está en una mezquita, se va a cortar ahí mismo. Entonces no nos va a distraer de ninguna manera. A mí me gusta cómo se ve eso. Entonces pasemos ahora a este. Todavía voy a posicionar esto en un centro como este. Voy a mover esto para que sea así. Y ahora tenemos que hacer, hacer, necesitamos hacer lo mismo que hicimos anteriormente? Entonces una vez más, como pueden ver, tenemos el mismo espaciado que antes. Solo necesitamos saltar por dentro y ahora ajustarnos a cuatro columnas escena amplia como lo hicimos antes con esta. Entonces hagámoslo. Y realmente no voy a hacer nada aquí mismo. Yo sólo voy a posicionar esto para estar en dos líneas como esta. Y tal vez pueda reducir el tamaño de éste. A ver. Entonces vamos con, veamos algo como esto. Se puede hacer una cuenta a medida. Y dice Aprende más. Entonces básicamente es algo así como nuestra publicación de blog o algo así. No ajustemos estos así me aseguraré de que esto sea a, no sé, 30 o 40. Por lo que 1234. Veamos dónde está esto. Entonces 40, me gusta cómo se ve eso n Una vez más, lo que voy a hacer aquí es básicamente hacer lo mismo que antes. Entonces voy a usar mis elementos. Veamos primero qué podemos hacer aquí hasta ahora. Deuda mezcla patrimonial, estamos a las cuatro justo aquí. Entonces lo que voy a hacer es realmente usar este y este texto y voy a dejar todo lo demás igual. Entonces volvamos al estado por defecto. Entonces esto y este Control C, y ve al estado de horror, encuéntralos control V, y luego simplemente quita los viejos de aquí así. Y por último, me aseguraré de que estoy a los 40 aquí. Entonces cuando hago el Hummer , sigue ahí dentro así. Por último, lo que voy a hacerlo con mi círculo se ajusta un poco. Entonces voy a asegurarme de que sea veamos, doscientos, doscientos. Entonces voy a posicionarlo para ser 20 y algo así tal vez. Y pega Control C Así puedo copiarlo. Después vuelve a mi estado predeterminado, salta dentro, abrió los elementos. Entonces donde estamos, elementos mezquita y se fue a controlar V y quitar mi viejo círculo una vez más, porque estos elementos están a 0, no podrás verlos. Y antes de que hagamos los otros, vamos a probarlo y a ver cómo se ve. Entonces, como puedes ver, esto se ve realmente bonito. Esto todavía funciona bien. Esto se ve realmente bonito. Esto funciona. Por lo que cuando muevo y abajo, se puede ver que Aprender Más se mantiene exactamente en la misma posición. Estos elementos son los mismos. E incluso podemos jugar con la posición de estos tres elementos. Pero como dijo, sólo los voy a dejar como están. Entonces pasemos ahora a estos son los que. Entonces hagamos clic en Ocultar disco. Eso es más aquí. Y veamos dónde estamos. Por lo que estamos en la línea realmente llega Grande. Entonces ajustemos la deuda a cuatro columnas de ancho así. Una vez más, vamos a tener tres líneas de patos, lo cual es genial porque termina aquí mismo. Voy a cortarlo. Asegúrate de que sea la altura. Y vamos a ver. Lo que puedo hacer aquí mismo. En primer lugar, es posicionar esto. Ahora, si tomo aquí, se puede ver que estamos a los 40 aquí. Entonces hagamos lo mismo por esta vez que fueron anti 30 en la bifurcación. Y hagamos lo mismo por nuestros textos. Entonces veamos 234. Por lo que ahí lo tenemos. Ahora lo que voy a hacer es básicamente lo mismo con este, pero antes de hacerlo, saltaré aquí mismo. Veamos dónde estamos. Entonces vayamos al estado de horror. Ajusta ese 1234 así. Pasaré entonces sobre estos elementos. Entonces posiciona este justo aquí, tal vez éste de aquí, este de aquí. A ver. Voy a posicionar esto hacia abajo. Y puede hacer lo mismo por este porque es mucho más rápido que antes, o realmente saber lo que quería hacer. Por lo que 1234, y voy a mover esto para estar a los 40 también. Entonces eso es básicamente todo. Y lo último que quiero hacer es saltar dentro de aquí basado en ese círculo, posicionarlo aquí mismo. Entonces si recuerdas 12x, me quitaré mi viejo círculo, golpearé Control C, y saltaré de nuevo a mi estado predeterminado. Vuelve a mis elementos mezquita Control V, me quito el viejo. Y ahora vamos a cerrar todo esto. Vamos a probarlo. A ver cómo se ve. Entonces estamos en uno original. Todo se ve bien. Todo se ve como debería aquí también. Eso puede comprobar rápidamente y el espaciado a la derecha para ese círculo. Se ve bien. Esta animación funciona muy bien. Entonces me gusta mucho cómo se acaba esto y se puede ver que esta vez es mucho más rápido porque ya tenemos algunos de estos elementos en su lugar. Ya sabemos algunas de las cosas que queremos hacer. Por ejemplo, aquí lo vamos a cortar a las tres. Para que veas tienes la opción de personalizar tu carrito más en squalor dat veamos, puedo hacer esto así, o incluso puedo posicionarlos así. Tarjetas de débito tan precisas, tal vez sea incluso mejor de lo que era. A ver. Vayamos al 44. Mueve esto a 40 también. Entonces así, y básicamente es él. Vamos ahora adelante y ajustémonos al estado Horace así como desde posición invernal estos aquí mismo. Voy a mover estos elementos así. Sube esto y voy a mover esto, por ejemplo aquí. Me voy a ajustar y aversión. Entonces en realidad voy a movernos un poquito ahí mismo. Y luego me voy a asegurar que estoy a los 40. Por lo que 1234. Lo que teníamos aquí mismo, déjame volver atrás y comprobar porque olvidé el estado por defecto. Déjame realmente copiar mi texto es mucho más rápido. Hover Control V ahí, lo tenemos. Vuelve a aquí, por lo que 404040 en todas partes. Y por último, hagamos lo mismo por este círculo. Entonces voy a saltar aquí mismo y dárselo. A ver, de hecho, no, volvamos a aquí. Elementos a, máscara, círculo Control C. Voy a ir a éste. Aquí, controla V. Y simplemente mantenga pulsada la tecla de desplazamiento y flecha derecha para posicionar en su lugar. Voy a borrar el viejo, asegura de que estoy alineado y luego 22 la izquierda Control C. Entonces puedo volver a mi estado por defecto, estrechar, comportarlo, abrirlo, elementos mezquita o dibujar V para pegarlo en su lugar. Quita el viejo. Y Terry tenía, finalmente, vamos a escritorio los tres. Veamos cómo funcionan todas ellas. Entonces si me desplazo aquí mismo, se puede ver que esto funciona realmente bien. Si crees que en este punto este texto se está volviendo un poco demasiado grande, entonces puedes reducirlo. Pero creo que lo vamos a reducir en la siguiente etapa cuando realmente lleguemos al tamaño de tableta. Pero creo que por ahora funciona bien. Vamos a comprobarlo. Todo esto se ve realmente bonito. Y sólo recuerda porque vamos a pasar a las etapas de la tableta, no vamos a tener esta animación más adelante, lo que nos va a ahorrar mucho tiempo porque no se puede pasar el rato con ratón en la fecha de las tabletas porque no se hace utilizar el ratón en una tableta, se utiliza el dedo. Entonces vamos a tener estos como puntos de toque. Entonces todo bien, lo ves aquí mismo va a ser un punto de toque en realidad. Entonces sólo vamos a, como los ves ahora mismo, se van a quedar así. Por lo que simplemente puedes tocar sus más o en toda esta tarjeta y luego seguir aprendiendo más. No es editar así de real rapido. Perdón, una vez más, posicionados en los textos están justo aquí. Mueve este texto aquí mismo. Mueve toda esta sección por aquí. Y entonces podemos cortarlo, por ejemplo, para escuchar lo que se movió todo el fondo. Ahora cuando haga clic aquí, vaya todo el camino hacia abajo, probado. Se puede ver lo rápido que fue eso. Por lo que ahora podemos pasar al siguiente apartado. Porque cuando haces estas cosas, te encuentras trabajando todo el tiempo con los mismos elementos. Por lo que consigue bastante bien Ed a leer todos estos diferentes elementos. Entonces lo que podemos hacer aquí mismo es en realidad hacer algo un poco diferente. A lo mejor podemos hacer en esta imagen arriba, pero no voy a hacer eso en esta etapa. Eso haré en etapas posteriores cuando lleguemos realmente al siguiente estado. Por ahora, lo voy a dejar como está ahora mismo. Entonces veamos, tal vez pueda tener que ser a las cinco una vez más. Entonces 245, reduzcamos así el tamaño de nuestra imagen. Entonces 245, creo que funciona bien, tal vez alguien lo pueda empujar sólo un poquito. A ver. A lo mejor puedo posicionar es solo un poquito a algo como esto. Creo que eso funciona bien. Entonces simplemente moveré mi texto. Por alguna razón. Tengo que seleccionarlo así. No lo reconocerá. Entonces veamos dónde estamos y dónde estamos. Y lo que puedo hacer aquí es simplemente llegó mi texto alrededor para poder basarme y vamos a ver, puedo dar click en este texto expandido. Y porque estamos dentro, vamos a ver, aquí, estamos en una pila, todo gasto muy bien. El único tipo cosa y sobre realmente me gusta es este texto. Entonces vamos a aumentar el espaciado entre líneas a, por ejemplo, 74, este título. Sí, eso se ve mucho mejor. Ahora selecciónelos a ambos. Haga clic aquí. Pero no, no quiero que mueva mi texto. Yo sólo quería mover esto. Por lo que ahora me probaron los trabajos de aireación como debería. También puedes ampliar esta imagen si quieres, para ocupar seis columnas. Así, y ahora simplemente movió un texto de vuelta a aquí. Al hacer esto, asegúrate de tener 30 años. Entonces zoom un poco si empieza a jugar contigo. Entonces aquí mismo. Entonces si eres como se ve eso puedes dejarlo ahí. Si no lo haces, puedes pasar de la lechería también puede aumentar el espaciado de líneas para esto. Pero sólo por el bien del tiempo, voy a tener que ser así porque creo que funciona lo suficientemente bien. Ahora movamos a estos dos aquí. Una vez más. Asegúrate de que sea 6246 justo aquí. Asegúrate de hacer lo mismo para este 1s 246. Y básicamente no necesitas hacer nada, pero R simplemente los moverá hasta aquí. Entonces 12, asegúrate de que tenga 20. Al igual así vamos a ver dónde estamos con el botón. Todavía estamos en 40, así que podemos dejarlo que sus imágenes se vean bien, por lo que ahora podemos pasar a la siguiente. Obviamente en las próximas etapas los vamos a envolver alrededor estos y vamos a posicionarlos en realidad para que sean más amplios, pero eso lo vas a ver un poco más tarde. Por último, juguemos con estos para poder dar click aquí mismo. Y una vez más, tenemos que hacerlas tener cuatro columnas de ancho. Por lo que 1234. Y se puede ver lo inteligentemente que se están ajustando a nuestro diseño. Entonces veamos que estamos a los 30, pero necesito ajustar mi texto dentro. Entonces veamos una rutina AHORA. Muévete todo a aquí. Por lo que 20. Y obviamente voy a mover este r al fondo para darme un poco más de espacio. Veamos qué puedo hacer aquí mismo por excelencia y listo para Premio a la Excelencia en, vamos a ver, tal vez por premio a la excelencia bancaria para 2021. Al igual que recubierto. Y vamos a ver, estamos a los 20, lo cual está bien. Una vez más, vamos a tener aquí tres líneas de texto. Lo que voy a hacer, en primer lugar, es seleccionar todo esto excepto el Aprender Más obviamente, controlar, ver, volver a mi horror, estado. Control v. Voy a borrar todo excepto el aprender más controlado, borrado y su posición heredable. Y aquí me aseguraré de que sea un 20, que es, y está bien. Simplemente puedo pasar al siguiente. Para que yo pueda ir aquí. Estamos a los 30, lo cual está bien. Vamos a comprobarlo. Está alineado a nuestra cuadrícula, como se puede ver en ambos lados. Entonces, ahora trabajemos en esa. Entonces estamos a las cuatro, así. Voy a hacer doble clic para ajustar mi imagen un poco. Posicionar estos dos niveles centro booleano. Entonces esto está bien, esto está bien. Simplemente ajustaré esto a través de nuestra iniciativa. Por lo que simplemente usó esta última palabra aquí. Estamos a los 20, lo cual está bien. Entonces lo que voy a hacer es una vez más, seleccionar todo excepto el Aprender Más. Vuelve al estado de Horace y no puedes ver en esto es de lo que sigo hablando de lo mucho más rápido que es esto cuando ya tienes estos elementos, solo tienes que seguir adelante y eliminarlos. Y donde necesitas un Justin, donde necesitas y todo funciona como debería. Entonces 20, todo está bien. También puedes posicionar este 20 arriba si quieres. Entonces tal vez podamos hacer eso porque estamos bajos aquí y estamos realmente altos aquí. Entonces dentro de nuestro estado por defecto, y simplemente podemos saltar aquí mismo, 12. Por lo que ahora estamos a los 20 aquí. A ver. Estamos en Harvard. Eso está bien. Puedo hacer doble clic 1-2, encerrarlo, volver a mi estado predeterminado 12. Porque aquí estamos en un estado por defecto, podemos ir al hover 1-2, y eso es básicamente todo. Vaya al valor predeterminado. Ya puedes ver cómo se ve y lo vamos a probar un poco más tarde. Ahora terminemos rápidamente un tercero. Yo sólo quiero revisar las cosas aquí. Sí, eso está bien. También puedes posicionar este texto y puedes jugar y ver qué funciona mejor para tu diseño. Pero creo que esto va a funcionar muy bien por ahora. A lo que veamos. ¿ Es esto correcto? Entonces veamos 294 y su peso. Algo no está del todo bien o en éste. Entonces vamos a ver. Sí, aquí no es lo suficientemente amplia. Entonces lo voy a ampliar hasta aquí. Voy a ampliar mi imagen también para escuchar. Y creo que va a estar bien. Y ahora vamos a probar esto. Asegurémonos de que estemos en el estado por defecto , que somos, que también estamos aquí. Entonces vamos a ver. El ancho sigue siendo de 90, el peso es de 289. Entonces nueve. Ahora, está bien. A ver si estamos 30 aquí estamos. Crf, estamos 30 aquí, quiénes somos, lo cual está bien. Y vamos a ver, esto también es 90. Entonces ahora todo debería funcionar. Sí, no, todo está bien. Por lo que obviamente vas necesitas seguir adelante y revisar todas estas cosas. Entonces lo que voy a hacer es volver al estado de horror para este número dos y cambiar esto a dos nueve años, cambiando mi imagen a 29, así. Y ahora esto debería estar bien entre estados. Tú, todo funciona como debería. Por último, sigamos adelante y cambiemos este último. Por lo que alineándome a nuestra grilla, puedo dejarla aquí mismo. Entonces lo que puedo hacer es en realidad, veamos dónde estamos. Por lo que Yar 24 de aquí. Por lo que puedo alinearlo para ser 20 de aquí. Y luego veamos. A lo mejor puedo copiar y pegar la posición de este texto Googlers para escuchar y pegar esto. Entonces vamos a ver. Simplemente voy a usar el texto aquí. Voy a asegurarme de que esté aquí sólo para que sepa dónde está la posición. Entonces voy a copiar en este texto borrado. Vuelve aquí con base en rebaño lechero. Y lo que quiero hacer a continuación es una vez más, asegúrate de que tengo tres. Si quieres trabajar en Nueva York y el ambiente gnomico. Veamos mi ruta y hagamos algún tiempo esto. Sí. Entonces 20 aquí, vamos a comprobarlo. Sí, Eso está bien. Y una vez más, simplemente copiaré y pegaré todo excepto el Aprender Más. Salta dentro de aquí. Copiar y pegar, eliminar todo excepto el Aprender Más posicionado o Aprender Más arriba. Y yo sólo quiero asegurarme así a 90, eso está bien. A 90, eso está bien. Entonces todo está bien con éste. Y vamos a ver. Yo estoy aquí en Howard y quería estar en estado predeterminado. En estado por defecto. Yo estoy aquí en estado por defecto, que es prima de niño fino. Porque una vez más, solo quiero asegurarme de que todo funcione como debería. Realmente no me gusta demasiado este diseño. Entonces tal vez pueda incluso reducir el tamaño de este texto así que son 24, tal vez debería ser un adolescente. Por lo que se necesita un poco menos de espacio aquí. Entonces eso realmente depende de ti y cómo quieres ajustarte para todos esos. Y eso está bien. Porque se puede ver cómo funciona realmente bien. Entonces todo funciona como debería. A lo mejor podemos incluso sólo un poquito. Y justo esta imagen, algo así. mejor, tal vez un poco menos para escuchar. Control C yendo al hover hasta que lea este. Y creo que eso funciona mucho mejor. Por lo que el estado predeterminado Horace state, todo funciona como debería. O le gustará Houghton diseño distante está resultando ser. Entonces pasemos ahora a la siguiente sección. Y en la siguiente sección, vamos a desplazarnos un poco hacia abajo. Porque estamos aquí con nuestra infraestructura. Y lo que puede hacer es simplemente hacer esto para ajustar todos estos elementos y luego hacer doble clic y reorganizarlos un poco como celda. Y para posicionar esto aquí, y puedo asegurarme de que esto esté en algún lugar por aquí. No puede estar en el centro en el estado D, pero puede ser en una etapa posterior. Perdón. Perdón por eso. Por lo que puede ser en una etapa posterior, pero no puede ser en esta etapa. Por lo que en una etapa posterior tal vez podamos quitar el texto y simplemente tener los iconos en su lugar, lo que va a mostrar nuestro, nuestro diseño mucho mejor de lo que es en este momento. Lo que voy a hacer a continuación es en realidad ajustar estos. Entonces si ves tenemos 246. Entonces tal vez podamos tener tres en línea y luego tres en línea abajo para que podamos ajustar eso. Entonces lo que puedo hacer es hacer doble clic en mi rpart y extenderlo todo el camino hacia abajo. Entonces puedo dar click aquí mismo, extender mi pie de página BG. Simplemente así me da un poco más de espacio con el que jugar. Voy a hacer es alinear esto aquí. Sigo usando la misma altura desde aquí hasta la tira de información, así que no va a cambiar. Pero sólo voy a reorganizar algunas de estas. Entonces voy a posicionar esto aquí, asegurarme de que esté en un centroide de distancia. Y voy a usar cuentas, céspedes tarjetas en la misma línea, invertir Digital, otros enlaces en la otra línea. Por lo que podemos ver donde estamos justo aquí estamos al 100, así podemos posicionarlos para estar a 100 también. Al igual que esto. Por lo que nos da suficiente espacio. No está demasiado abarrotado porque estamos a los 12. Por lo que tenemos cuadrícula de 12 columnas. Podemos posicionarlos como hicimos con estos. Por lo que cada uno de estos grupos de textos va a ocupar cuatro columnas. No hace falta, pero todavía va a ocupar cuatro columnas sólo para que nos dé suficiente espacio para reproducirse y utiliza suficiente espacio para leer este texto un poco mejor. Y eso es básicamente todo. Voy a asegurarme de que este también sea 100. Veamos 100. Y ya veré qué puedo hacer aquí mismo. Entonces podemos, por ejemplo, posicionar esto para ser, no necesito que sean 100. A ver, quizá puedan ser 40. Entonces, ¿dónde está mi medio, 0.123. Ahí está. Y simplemente muevo el ratón para ajustarme a la altura de esta posición de texto aquí y hábitos de Terry. Entonces como puedes ver, el pie de página sigue buscando limpio como está aquí mismo. Todavía es legible, sigue siendo transpirable, sigue teniendo suficiente espacio. Pero ahora sólo lo estamos posicionando, disuadir. Simplemente te puedes imaginar en una pantalla más pequeña, puedes hacer algo un poco diferente. Puedes desplazarte a la izquierda y a la derecha. Se pueden posicionar estos en dos cuadras. Por lo que las cuentas y el césped van a estar en uno al lado del otro. Tarjetas e inversionistas van a bajar y b1 uno al lado del otro. Por último, los enlaces digitales y de otro tipo van a bajar o puedes ir por la otra ruta. Se pueden crear estos como puntos de paso separados y luego se puede expandir y mostrar eso y ver cómo se va a ver eso. En realidad vamos a explorar con algunos de estos diseños son un poco más tarde una vez que realmente lleguemos a la tableta y tamaños de fuente. Pero por ahora, creo que esto está funcionando bien y creo que se ve bien. Repasemos rápidamente una vez más y garantizemos incluso hablar. Entonces aquí estamos en el login. Todo funciona bien. Y solo recuerda que seguimos en un escritorio, solo un escritorio realmente pequeño vio tal vez sobre el pequeño portátil como algo así como 12 pulgadas o incluso menos. Por lo que aún tenemos la opción de usar un ratón. Entonces todo funciona como debería. Todo es agradable y suave. Todavía podemos desplazarnos a la izquierda y a la derecha. Una vez más, puedes usar esas flechas de las que hablé. Y se puede, por ejemplo, en este caso, colocarlos en algún lugar por aquí y por aquí, digamos que son realmente pequeños. O bien puede escribir una descripción, por ejemplo, haga clic a la izquierda y a la derecha o desplazarse a la izquierda y a la derecha posicionados en la descripción aquí. Para éste, todavía no me gusta este texto. Entonces tal vez en tu caso, tal vez puedas practicar alrededor y reducir el tamaño de este texto solo para que puedas tener un resultado un poco diferente que hice y ver cómo funciona eso. Por lo que va a ocupar menos espacio vertical. Entonces en mi caso, aquí todavía tenemos esta tarifa todavía buscando sin demasiados cambios. Últimas Noticias o falta cómo esto está resultando ser así lo que está bien. Por último, nuevo banco. Entonces todo esto se ve muy bien y ahora puedes ver la carpeta. Nos da mucho más espacio para respirar y todo se ve bonito y legible. Entonces eso es todo para este video. Te veré en el siguiente video. Vamos a abordar dispositivos medianos o tabletas. Y vamos a hacer muchos cambios diferentes porque una vez más, vamos desde pantallas basadas en camarilla. Escritorios tan grandes, grandes, escritorios más pequeños, y por último, mucho más lentos, más pequeños, como por ejemplo, laptops y demás. Y luego estamos pasando a una tableta dispositivos y dispositivos de forma, que son dispositivos tocables donde no tienes el ratón, solo estás usando los dedos para navegar. Y ahí es donde está la diferencia. Y por eso necesitamos ajustarnos a todos estos diferentes cambios. Entonces te veré ahí. 58. Diseño responsivo 3: Ahora sigamos adelante y diseñemos el tamaño de nuestra tableta. Y para hacer lo mismo de siempre, voy a golpear el control. D va una vez más, ya diseñamos éste. Y se puede ver que un lugar ID justo aquí, yo simplemente más ingenio y abajo están justo aquí. Entonces 70 escena, como con todas estas otras. Aunque haga clic aquí para controlar C, Así que puedo copiarlo localmente cajón aquí. Voy a quitar indebida Stokes buen control VK para bestia. Y ahora podemos empezar ajustando nuestros tamaños a estos. Por lo que se puede ver 76, ocho es el ancho de nuestro suelo arbóreo. Se ha cambiado al principio 76 ocho. Y ahora se puede ver aquí mismo que tenemos ocho columnas. Entonces voy a cambiar eso primero. Entonces vamos a saltar dentro de mí, conseguir II columnas. Y se puede ver que lo hemos pasado a 296042, los sólidos cambian en deuda. Entonces una vez más. Veamos 8296042296042. A ver 602942. Eso es checker inalámbrico un lema. Por lo que 8296042. Por eso. Ahora sigamos adelante y empecemos a ajustar DCE. Primero cosas para nosotros porque ahora estamos en una tableta, vamos a empezar a ajustar algunos de estos elementos y hacer algunos puntos de tapping. Entonces primero las cosas primero voy a ajustar este realmente rápido. Al igual que papá, voy a saltar dentro de posición mis banderas aquí. Y entonces lo que voy a hacer es hacer doble clic en insight y eliminar MyText porque sólo necesito mi ícono. Entonces puedo desagrupar bits. Puedo hacer lo mismo por mi ubicación. Puedo quitar mi ubicación, y simplemente puedo acercar realmente cerca, ajustar mi icono a aquí. Puedo posicionarme para los negocios aquí, sólo una especie de OK, tienes un poco más de espacio. Y puedo posicionar mi ícono aquí mismo. También puedes jugar con estos elementos. Por ejemplo, posición a asignación telefónica justo aquí. Pero sólo por el bien de la consistencia, sólo posicionémoslo donde estaba. Ahora sigamos adelante. Y voy a mover esto aquí. Y lo que voy a hacer para el nav principal en realidad es que voy a Desagrupar este componente. Y una vieja manera. Está aquí. Sí. Fue usted un hockey, que está confundido yo mismo. Entonces lo que voy a hacer en realidad es desagruparlo como componente. Entonces no vamos a tener todos estos porque vamos a crearlo para que sea un componente separado. Por lo que voy a dar clic derecho Desagrupar componente. Pero antes de que lo haga, primero lo movamos adentro. Entonces no es meterse con nuestro espaciado. Entonces ahora puedo desagruparlo para que no salga fuera de nuestro aeropuerto. Entonces ahora que lo tenemos, lo haré un monótono. Así que llámame ahora una vez más, puedes llamarlo tableta o como quieras. lo que su núcleo, por ejemplo, toca la pestaña principal de navegación para que sepamos que es para las tabletas y es para los dispositivos móviles. Entonces lo que voy a hacer en este es realmente crear dos estados. Uno que es estable, N1, que no lo es. Voy a esconder a mi héroe. Simplemente ordenados, podemos muy bien enfocados en este. Lo que voy a hacer es crear dos estados básicamente. Y voy a empezar con el primer estado, que es este estado por defecto. Entonces voy a duplicar este nav BG, y voy a ocultar mi fondo uno como este. Y luego voy a, por ejemplo, ocultar éste en su lugar, mostré éste. Entonces solo mostró este fondo uno, extendido todo el camino hacia abajo, solo para que pueda tener mi original para que pueda ver a dónde se supone que vaya y cuáles son las dimensiones y demás. Entonces déjame esconderlo rápidamente para que extenderé esto y abajo uno solo un poquito más. Y lo que voy a hacer es usar mis artículos de navegación, colocarlos aquí mismo. Y puedo organizarlos un poco para poder ponerlos en una pila. Puedo dar click así. Se puede ver que están muy bien organizados. Puedo seleccionar todo mi texto, asegurarme de que esté alineado a la izquierda así. Asegúrate de que esté alineado a la izquierda así. Y puedo hacer click y alargar justo en este. O puedo sostener Shift y extent en todos estos. Entonces por ejemplo, que sea a los 40, solo ordenados. Tenemos sólo un poco más de espacio para nuestros puntos de tapping. Por lo que te puedes imaginar que vamos a incluir un ícono en tan solo un segundo. Lo vamos a posicionar aquí mismo. Lo que también puedes hacer es posicionarlos en orden o en línea. Entonces vamos a ver, tenemos 24 o cinco. A lo mejor puedes poner uno al lado del otro. Por lo que x3 en esta línea, a esta línea. Pero por sólo por el sake de la consistencia y por lo más simple hace sake, sólo voy a posicionarlo y dejarlo así. Entonces vamos a ver, estamos a los 36, voy a posicionarlo a los 40. A ver. Sí, creo que eso se verá bien. Entonces veamos 1234. Y voy a usar mi botón. Pero antes de que lo haga, voy a golpear el control D en este. Tan solo para tomar un café, usaré esta posición de copia y todo el camino hacia abajo así, asegurarme de que esté alineado con mis textos. Entonces veamos dónde está mi texto. Está a los 20. Entonces posicionarse para ser 12, así. Y vamos a ver, tal vez podamos posicionarnos para ser 40 como todos estos otros artículos. Y por último, extenderé esto hasta aquí y simplemente aumentaré la altura a 40. Entonces si utilizo mi calculadora, que es simplemente la forma más fácil de hacer esto y traerla de vuelta de esta pantalla para que veas que la altura actualmente es de 539. Por lo que 539, puedes sumar 40 porque queremos moverlo hacia abajo así. Su 579. Esto obviamente es matemática realmente simple, pero solo para que solo quiero mostrarte que puedes usar estas herramientas básicas como calcular áreas para mejorar tus posibilidades de ser un poco más preciso y para mejorar tu velocidad sólo un poquito. Por lo que una vez más, 579 es nuestro objetivo para la altura así. Y porque mantuvo el espaciado del disco, así que 50 justo aquí. Y veamos qué es aquí mismo. Entonces estamos a los 50, lo mismo. Vayamos a este por defecto. Estamos a los 50, y si vamos llegamos aquí, estamos al 50 todavía ordenar estamos dejando ese mismo espaciado. Estamos utilizando esos mismos números para lograr estos objetivos. Entonces lo que voy a hacer básicamente es la deuda de mezcla. Tengo mi botón de inicio de sesión, que es éste desagrupado. Entonces seleccionaré este ungroup porque recuerden, no tenemos ningún efecto flotante. Entonces solo voy a asegurarme de que sea una carpeta y no botón real con hover, porque una vez más, no tenemos ningún flotador. Esta es la versión de tablet. A continuación, desagruparé esto también porque solo quiero crear mi icono de menú aquí. Entonces para hacer eso, simplemente voy a usar esta altura. Entonces eliminaré esto. Aquí está. Control D. Llamaré a esta línea de menú, por ejemplo. Y vamos a ver, porque esto es 60, quizá segunda posición para estar a las diez. Escondamos esto por un segundo. Veamos cómo se ve eso. No me gusta. Creo que es demasiado grande. Entonces tal vez podamos hacerlos cinco. Creo que eso es mucho mejor. También por el ancho puedo posicionar. Será aquí como este hábito derek. Y ahora lo que puedo hacer es traer de vuelta mi botón, presionar para, por ejemplo, en mi teclado para bajar la obesidad a 40 o tres, sólo para que pueda ver el espaciado para la altura, cómo eso va a funcionar. Entonces déjame golpear el control D para duplicar mi posición de línea aquí mod diez, Control D posicionarlo aquí, muévelo a diez. Entonces ahora tenemos diez y tenemos diez. Puedo posicionar Dosis tres, asegurarme de que estén en el centro así, y ver cómo se ven en relación a mi logo. Yo soy los dos grandes, ¿son demasiado pequeños? También puedo hacer clic aquí para entrar al modo de vista previa completa. Y creo que por ejemplo, tal vez podamos reducir el tamaño sólo un poco entre estas líneas a algo así como ocho por ejemplo. Y obviamente muévelo sólo un poquito más a la derecha también. Entonces sigamos ahora y hagamos eso. Déjenme cerrar esto. Por lo que una vez más, puedo dar click aquí mismo 12. Por lo que más formas de ser una cita. click en esta últimas 112 películas para ser un Tate, trae mi botón BG de vuelta porque acabo de dejarlo ahí por sake espaciado. Y también voy a más ancho aquí mismo para alinearme con mi posición de Botón original. No conseguí que no se ve mucho mejor, pero vamos a seguir adelante, click en la vista previa es se puede ver que se ve mucho mejor. Lo que no me gusta ahora es el ancho de estas líneas. Entonces tal vez pueda reducir un poco el ancho, pero solo recuerda, este es el ancho de nuestra columna. Entonces tal vez podamos dejarlo atrevido o tal vez podamos simplemente apretarlo un poco más. Por lo que estamos al 60 de mayo, R3 puede estar a 50. Y me gusta mucho cómo se ve eso como un tink. Ahora empieza a tomar mucho más ovejas. Entonces agruparemos estos. Ahora puedo quitar éste porque ya no lo necesito. Y llamemos a esto algo como si puedo menú, PUEDO. O menú principal. Si sólo puedo deletrear correctamente así. Y lo que quiero hacer es golpear Control K porque quiero crear un componente a partir de él, porque este es el estado predeterminado y hay que mostrarle a gente cuando hicieron clic en algo lo que va a suceder. Entonces ahora vamos a crear el estado clicado. Voy a llamarlo clicked o un tap. Toca como quieras llamarlo, realmente todo depende de ti. Y lo que quiero hacer en este es mostrar lo que va a pasar una vez que den click ahí. Entonces lo que voy a hacer es dar click en esta primera, bajarla al centro, así. Haga clic en este último, posiciónelo hasta aquí. También voy a volver a mi estado predeterminado solo para asegurarme de que se ordenen correctamente. Entonces éste va a ser el tercero, así. Este va a ser el primero. Entonces ahora cuando vaya a mis estados de cuenta, muévelo hacia arriba, muévelo hacia abajo. Entonces todo está funcionando correctamente. Pero solo para asegurarme de que puedo eliminar esto, agrega una nueva pestaña de calidad de estado. Y ahora puedo empezar a trabajar porque están ordenados correctamente. Esto es extremadamente importante, obviamente por el redimensionamiento responsive más adelante y también para el auto animate porque queremos asegurarnos de que esta función esté funcionando. Bueno. Lo que voy a hacer es rotar esto. Entonces, por ejemplo, puedo rotar mi primera a algo como esto. Por lo que 45 grados. Y puedo rotar mi último a otro lado, así que menos 45 grados. Y también voy a dar clic en Mate medio uno y traerlo todo el camino adentro. Entonces estoy sosteniendo Alt mientras lo estoy haciendo, para escuchar sólo a un inconformista, para crear un bonito círculo. Entonces para esconder esto, Anders, se puede ver lo que tenemos, básicamente una elipse, no sólo el Rayleigh, así llamado. Entonces así es como se va a ver una vez que se haga clic. Por lo que ahí lo tienes. Entonces ahora que hemos completado eso, sigamos adelante rápidamente y comprobemos si esta x es demasiado grande. No creo que lo sea. Creo que se ve bien. Entonces ahora sigamos adelante y creemos esta media nav tab como un componente en sí mismo. Entonces lo que voy a hacer es traer de vuelta este original así. Y voy a esconder todos estos elementos adicionales. Entonces esto, llevemos esto de vuelta al estado por defecto. Por lo que básicamente hay dos formas en que se puede hacer esto. Puedes hacerlo así. Por lo que puedes posicionar esto donde está justo aquí. Y se puede, por ejemplo, utilizar una guía. Pero no voy a hacer eso. Básicamente voy a usar una máscara para esta de abajo. Entonces cómo va a funcionar eso, simplemente puedes mover esto todo el camino hasta aquí, por ejemplo, porque ya no necesitamos un selector, podemos quitarlo. Voy a mover mi icono principal y mover esto hacia abajo así. Al igual que así. Entonces básicamente, voy a tener mi nav b, g, que es éste de aquí. Voy a tener mis artículos, mi botón de inicio de sesión, y este nav BG aquí abajo. Y lo que voy a hacer es duplicar esto ahora BG Una vez más. Sé que es complicado, pero va a tener mucho sentido en tan solo un segundo. Golpe control D. Lo voy a posicionar hasta aquí. Entonces voy a seleccionar estos tres. Entonces esto, esto, y este golpe control de turno m, Así puedo enmascararlos. Y básicamente lo que puedo hacer en este punto mezquita es que puedo cerrar esto. Para que pueda localizar mi máscara y puedo cerrarla aquí. Entonces lo que puedo hacer es básicamente reducir el tamaño de éste, lo siento, no el tamaño sino la obesidad porque no necesitamos verlo obviamente. Y luego una vez el paso del usuario, éste va a desaparecer. Entonces vamos a crear rápidamente nuestro componente. Por lo que hit Control K. Este es el estado por defecto. Vamos a crear un nuevo estado, llámalo tap. Y dentro del grifo, lo que vamos a hacer es básicamente ir a nuestra máscara nav BG y extenderla para que llegue a este punto. Por lo que incluso puedes seguir adelante y comprobarlo. Por lo que este es de 579 de altura. Puedo dar click ahí mismo para ir al 579, así, solo para asegurarnos de que tengamos la misma altura. Y este nav BG va a reducir en tamaño como así. Y este ícono del menú principal va a ir a la pestaña. Entonces ahora sigamos adelante y prototiquemos todo esto. Entonces vamos al prototipo. Una vez más, una vez que los usuarios hagan clic en esto, vamos a ir al estado de tap. Pero necesitamos crear un punto de tabulación en realidad. Entonces sigamos adelante y hagamos eso. Volvamos al diseño. Entonces no vamos a hacer esto. Entonces vamos a crear un punto de tabulación. Parecía que lo hicimos con el logotipo en navegación original si recuerdas. Entonces, traigamos a estos dos aquí. Llamemos a este punto de paso así. Asegúrate de no ver nada así que no sientas, no derrame cerebral. Déjame simplemente posicionado es al centro. Por lo tanto, quita ambos. Volvamos atrás. Vayamos al prototipo. Por lo que seleccionaré mi punto de tabulador donde está. Aquí está, todavía tenemos un punto de logotipo aquí real flojamente. No lo necesites ahora, pero lo vas a necesitar si quieres diseñar todas estas otras páginas. Entonces dejémoslo ahí por ahora. Entonces, una vez más, si quieres, no puedes hacer eso. Voy a usar este solo clic aquí. Entonces vamos a elegir el estado tabulador. Así. Vamos a usar Easy and out. O puedes usar algo como snap. Por lo que se va a meter en posición. Ve con fácil ahora a ver cómo funciona eso como punto cero, digamos seis. Vamos a probarlo. Ahora vamos al estado tabulador. Una vez más, DAP point click. Podemos ir al estado por defecto fácil y fuera 0.06. Y veamos cómo funciona eso. Entonces vayamos rápidamente al Estado de Default. Haga clic en vista previa. Agrandaré esto para que lo veas mejor. Entonces cuando haces click ahí, puedes ver que tenemos esta bonita animación. Y todo se está expandiendo muy bien. Esto está disminuyendo en la obesidad, por lo que está creciendo fuera del camino. Y esto está mostrando deuda aireadora. Debería. Todavía tenemos esa bonita sombra de fondo alrededor. Entonces me gusta mucho cómo se ve eso. Todo es como debería. Entonces sólo una cosa más. Y salto aquí mismo a este estrecho BG. Se puede ver que tenemos desenfoque de fondo de sombra. Aquí. Todavía tenemos sombra y desenfoque de fondo, pero la obesidad está en 0. Entonces no me gusta cómo se ve eso. Entonces tal vez podamos ir de, veamos, tal vez podamos traer esto de vuelta en realidad. Entonces vamos a ver, estamos en phi 79 en el original. Entonces cambiemos la deuda. Podemos ir a aquí. Estamos en 0 Bay City. Vayamos al estado tabulador. Cambia esto a 100 y cámbialo a 579. Así. Por lo que en realidad se está expandiendo con el resto de nuestro diseño. Entonces vamos a ver, esto es a 0. Vamos a probarlo una vez más porque menos tiempo no se puede ver en esta sombra de fondo. Entonces cuando hago clic justo aquí, y ahora se puede ver la sombra de fondo y está desapareciendo de aquí. Y puedes ver esta bonita animación para nuestro ícono cambiando muy bien. Todo parece como debería. Me gustó mucho esa animación y todavía tenemos este bonito pequeño estado desplegable en el que podemos trabajar. Ahora lo que podemos hacer más adelante es obviamente usar este componente y adaptado a múltiples otros tamaños. Y aún tenemos este tamaño con el que trabajar. Entonces te voy a mostrar un poco más tarde cómo puedes hacer eso. Pero por ahora, pasemos rápidamente a esta siguiente etapa. Entonces vamos a hacer en realidad es usar MyText, posicionarlo en el centro. No voy a editarlo demasiado. También puedo reducir el tamaño de mi imagen a, por ejemplo, hasta que así, creo que funciona bien. Cambiemos el tamaño de la imagen del héroe a esto. Vayamos a nuestra mezquita. Cambia el tamaño de nuestra máscara a esta posición, el círculo en el centro, como lo hicimos antes. Sólo asegúrate de que sea un jinete aquí. También puedes moverlo solo un poco hacia abajo. En este caso, creo que está bien. Formas de héroe o que podemos hacer es que lo podemos sesgar o simplemente puedes moverlo. Entonces voy a hacer eso en realidad simplemente moverlo adentro. Y creo que se ve un poco mejor que. Simplemente sesgado para el escritorio tamaño particular. Eso funciona bien. Eso se ve bien. Y quizá para esta línea, quizá podamos posicionarla para que esté en algún lugar por aquí. A ver. Creo que eso está bien. Y por último, lo que quería hacer por este botón es Desagrupar este componente. Pero aún así llámenlo botón principal. No sé por qué sucedió esto. Por alguna razón o no, y. veamos dónde estamos. A 59. A lo mejor podemos estar a los 50. Creo que eso funciona un poco mejor. Mueve esto fuera del camino. A ver. A lo mejor 40. Sí, 1940, se ve un poco mejor. Entonces todavía tenemos que Desagrupar esto porque no necesitamos que esté en estado de horror porque no podemos flotar si recuerdas. Entonces eso es básicamente todo. Esto lo hemos completado y una vez más, se puede ver lo rápido que es esto. Una vez que empieces a trabajar hacia abajo con tallas D, puedes ajustar fácilmente y realizar todos estos cambios. Por lo que nos aseguraremos de que esto esté centrado. Ahora lo que voy a hacer es simplemente dar click aquí mismo porque quiero reposicionar DES. Entonces lo que voy a hacer es asegurarme de que esto esté dentro de su grupo y grupo. Grupo. Y saltaré por dentro y Desagruparé mi componente. Yo soy grupo Maya componente. Y por último, desagrupar aquí también mi componente. Porque una vez más, no necesitamos estados florecientes, sólo necesitamos estos estados irregulares. Lo que voy a hacer a continuación es darles nombres. Por lo que se trata de cuentas personalizadas. El siguiente es el ahorro personalizado. Y por último, tenemos tarjetas personalizadas y de débito así. Y ahora que eso está terminado, lo que puedes hacer es simplemente ampliar estas tarjetas a la derecha. Entonces voy a seleccionarlos todos y dar clic aquí para poder ampliarlos a la cuadrícula. Asegúrate de que estás alineado aquí perfectamente lo cual no estamos. Entonces me voy a posicionar ahí para arreglarlo. Ahí lo tenemos. Y ahora simplemente extiende esto para que quepa a tu grilla. Veamos narrativas de las gradadoras de rotor. Entonces voy a asegurarme de que esté ahí mismo. Se puede volver atrás y comprobar. Entonces tenemos 150, así que vamos a incluir eso un poco más tarde. Pero lo que podemos hacer por su muro se expande. La altura general de R nacen todo el camino hacia abajo. Voy a seleccionar mi pie de página y esto, este texto, esta sección anterior. Entonces es nombre del servicio, tipo de cambio. Voy a modelar todos abajo, todo el camino hasta aquí, sólo para que pueda jugar un poco más con este texto. Simplemente así tuve un poco más de espacio con el que trabajar? Entonces lo que puedo hacer por su muro es hacer doble clic aquí mismo, posicionarlo aquí porque ahora tenemos mucho más espacio. Yo puedo hacer lo mismo aquí así. Yo puedo hacer lo mismo aquí. Al igual que esto. Y ahora lo que puedes hacer es volver a tu primera donde realmente teníamos más información. Entonces éste, controla a C. Y vuelve aquí mismo. Control V. Veamos si tenemos más información aquí. No lo hacemos, así que podemos fijarlo en posición. Entonces podemos hacer lo mismo por este. Porque donde tienes más espacio, obviamente puedes seguir adelante y mostrar más información. ¿Por qué no? ¿ Al igual que la muerte? Y vamos a ver, Optimiza cuenta y crea tu cuenta. Porque no quiero que baje ni una palabra. Eso no tiene sentido para Dat. Al igual que la suciedad y más así. Por lo que ahí lo tenemos. Ahora podemos jugar con estos otros elementos. Por lo que primero puedo seguir adelante y cerrar Ds. Hazlo así no me molestan más tarde. Entonces lo que puedo hacer en este caso es, por ejemplo, ajustarme por espaciado. Y cómo puedo hacer eso es simplemente entrando. Y empecemos con este primero para que puedas experimentar un poco. Entonces estamos a los 40 aquí, lo cual está bien. Estamos a los 20, eso está todo bien. Pero sólo quiero asegurarme de que todavía tengo más espaciado aquí. Entonces 1234, haz con esto. Entonces, vamos a ver. 1234. Puedo incluso, por ejemplo, la posición es estar aquí. Entonces lo hizo que se envuelve, alrededor de este último y todavía tengo sólo un poco más de espacio aquí. Y lo que tenemos aquí es, vamos a ver, 40 abajo 1234. Creo que eso está bien. Entonces hagámoslo por todos ellos. Entonces vamos a ver, en este estamos regresando nueve o es un rápido alrededor con éste. Veamos aquí somos 40. Entonces posicionemos eso para ser 40 también. Por lo que 1234. Y lo que hicimos por el aprender más, déjame revisar 40. Entonces lo hacemos aquí también. 1234. Ahí lo tienes. Voy a quitar elementos color de la tarjeta porque esos elementos que ya no necesitamos, porque no tenemos ningún efecto flotador sobre estos se atreven hábito. Ahora lo que puedo hacer es quizá también podamos darle a esta tarjeta 60 de arriba. Veamos cómo va a funcionar eso. Entonces 60, correcto, piensa que eso es trabajo en deudas trabajando aún mejor. Entonces vamos a revisar esto y este a 63 de aquí. Tan mismo. Sí. Y lo que vas a hacer es hacer lo mismo por este. Entonces vamos a ver, estamos a los 40. Reducir en tamaño a aquí. Asegúrate de que estamos a los 40. Por lo que 1234, selecciona estos 360 lag esto, y asegúrate de que se trata de 40 Tao. Por lo que 1234, voy a quitar elementos, color, deudas de pluma. Básicamente lo hemos completado en este servicio donde se puede hacer un litro se encuentra este, ver que es 150 de aquí a la siguiente sección. A continuación, simplemente trae en la siguiente sección. Al igual que así. Por lo que 123456789101234 Cinco y ver que estás en 150. Obviamente puedes reducirlo si quieres, pero solo voy a mantenerlo como está por ahora. Voy a hacer doble clic en el interior. Asegúrate de que me posicioné a ancho justo aquí. Asegúrate de que eres una posición podría textos donde necesita ser así a la cuadrícula. A la grilla también. Voy a posicionar esto a la grilla, y voy a localizar esto para estar aquí abajo. Esto puede ser aquí abajo. Y vamos a golpear la vista previa. Simplemente ordenados. Podemos comprobar lo que has hecho hasta ahora. Entonces esto está bien. Obviamente se ve realmente bonito. La transición es realmente buena. Pero también se puede hacer es quizás dentro de aquí en el estado por defecto. Entonces este, asegúrate de que tengas todos estos a 0. No los tenemos porque están bajo desenmascaramiento. Entonces tal vez podamos tenerlos solo para tener ese elemento adicional y giro adicional a ellos. Entonces vamos a revisarlos aquí. Por lo que estamos en estado predeterminado. Podemos ir a nuestra máscara nav ítems log, login, button, click justo aquí. Y en realidad no expliqué todos estos elementos. Entonces déjenme hacer rápidamente adelante y mostrarles esos. Entonces, para todos estos elementos de redimensionamiento sensibles, dondequiera que los selecciones, puedes usar estas restricciones de redimensionamiento atómico, Que es básicamente Auto cualquiera hace todo en auto y esto es lo que has hecho hasta ahora. Pero también puedes seguir adelante y elegir manual si quieres, quiere redimensionar sensible está seleccionado. Por lo que dondequiera que estés haciendo algunos cambios, puedes ver dónde quieres que se arreglen estos elementos. Para que podamos arreglarlos hasta la cima. Puedes fijarlos a la izquierda, fijar el tallo a la derecha, y fijarlos al fondo o cualquiera de estos combinados. Entonces todos estos o solo dos o tres o lo que sea, lo que eso significa es básicamente, si te muestro eso en un ejemplo real, así que vamos antes de eso, rápidamente previsualice esto y veamos cómo se ve. Por lo que ahora cuando hago clic en él, no se pueden ver por alguna razón. No sé por qué. Volvamos al estado tabulador. Vuelve a nuestra mezquita y muéstrales así. Vayamos al default. Haga clic una vez más, agrandarlo. N. Ahora esta animación es sólo un poco más pequeña, más suave. Por lo que estas cuentas están desapareciendo realmente bien. Y me gusta mucho cómo se ve eso. Entonces una vez más, si te llevo de vuelta a aquí, puedes ver un resize responsive está en auto para esta pestaña principal de navegación. Entonces cuando estoy escalando, si recuerdas, este logotipo se queda anclado a la izquierda. Esto está manchado anclado a la derecha. Entonces fue el botón en este caso. Y déjame mostrarte en ese caso. Ahora puedes ver cómo se ve eso aquí. Entonces cuando empiezo a desplazarme, lo siento, administrado, redimensionar va a estado anclado a este tamaño. Para que se pueda ver que la posición del logotipo no cambia. Menú, posición de icono no cambia. Por lo que se queda básicamente donde estaba como media espalda. Pero si hago clic manual, puedo ajustar el para que puedas verlo se queda fijo a la derecha, fijo a la izquierda, y fijo a la parte superior. Pero puedes cambiar todas estas una vez más para ajustarte a lo que necesites para tu propio proyecto. Entonces. Xd se va a ajustar automáticamente una vez que estés en auto, tanto en manual, puedes jugar con todos estos. También se puede decir altura fija. Entonces cada vez que estoy redimensionando estos, puedes ver que la altura se mantiene igual. Pero si desmarcho eso y empiezo a cambiar el tamaño, en algunos casos, sobre todo si estás usando turno, también va a ajustar la altura. Entonces, una vez más, juega con estos ajustes y ve qué funciona mejor para ti. Por lo general, auto es tu mejor apuesta. Pero en la mayoría de los casos, hay que hacer algunos cambios como lo hicimos hasta ahora con básicamente todos estos elementos. Por lo tanto, asegúrate de que estás haciendo los cambios que sean necesarios para tu diseño y tus propósitos. Entonces sigamos ahora. Y en realidad no exploré este tipo de cambio y ver si funciona correctamente. Entonces ahora puedes ver que no tenemos ningún hover y estas tarjetas son realmente bonitas y fáciles de leer. Ahora desde aquí, puedes empezar a desplazarte y aún no puedes revisar y esto suficiente, pero creo que es suficiente porque puedes ver estos dos, estos dos dígitos al final. Entonces así, creo que eso realmente funciona. Bien. Desplazemos hacia abajo y veamos, de aquí en adelante a esta siguiente sección, seguimos en 150, así que hagámoslo también. Entonces nos aseguraremos de que estoy en 150 así. Y lo que voy a hacer que ahora es hacer clic en esto a la pila vertical. Dem. Puedo saltar dentro, así que seguimos en 150. Puedo ampliar mi imagen así. Por lo que se está llevando el espacio completo. También puedo reducirlo en tamaño solo un poquito a algo como esto. Y se puede ver porque estamos en una pila, estos elementos se están moviendo bien imagen radar, puedo hacer doble clic para reposicionarla, tal vez reorganizarla un poco. A lo mejor podemos acercar a sus caras un poco para que realmente puedas jugar con la posición de estas imágenes. Y me gusta mucho cómo se ve eso. Ahora lo siguiente es hacer lo mismo por el texto. Entonces voy a envolver mi texto así. Me aseguraré de que esté en el centro de esto. Entonces posicionaré MyText en el medio. Pero antes de hacerlo, asegúrate de que esto también esté alineado al centro. Y porque ahora tenemos mucho más espacio para jugar con él. Posicionemos en primer lugar este pueblo 40. Entonces vamos a ver, así. Esto está a 150, así que está bien. Ahora podemos posicionar esto en el centro, así. Y lo que puedo hacer es obviamente asegurarme de que esto se esté expandiendo. Entonces para hacer eso, puedo ir de este filo a este filo. Como puedes verlo, el texto se está ajustando realmente bien. Y podemos seleccionar estos tres, asegurarnos de que estamos en un centro. Y lo que también podemos hacer es desagrupar nuestros componentes, asegurarnos de que estén alineados. Por lo que podemos darles un grupo llamado este medio btn. Como siempre fue. Asegúrate de que estén en un centro así. Y ahora simplemente asegúrate de que todavía tienes 40 por todas partes. Al igual que nosotros. Y por último, esto debería ser 150, pero no es así asegúrate de que tu muerto fijo y los lácteos lo tengan. Se puede ver lo fácil que fue esto. Así que la próxima vez cuando empieces a ajustar para móvil, por ejemplo, simplemente comienza a ajustar y podrás ver cómo están cambiando todos estos elementos. Una vez más, si no te gusta que cambien así, puedes volver al manual y arreglarlos, por ejemplo, a la parte superior y a la izquierda. Y ahora empiezan a cambiar y se pueden ver algunos elementos diferentes. Por lo que ahora sigamos adelante y empecemos con las cartas y abajo. Entonces vamos a ver, estos están en 150 todavía. Entonces esto es 150, esto es 150. Entonces manteniendo esa consistencia muy bien. Entonces sigamos adelante y veamos dónde estamos en 33. No sé por qué. No nos muestra, pero sí importa. 150. Déjalos ir adelante rápidamente y posicionarlo aquí mismo. Porque estamos en una pila, da click justo aquí. Y ahora podemos seguir adelante y ajustarlos a ambos al mismo tiempo. Por lo que simplemente expanda para escuchar. Y lo que puedo hacer es básicamente mover mis botones. Entonces éste, y éste, puedo moverlo a donde quiera, pero voy a mantenerlo donde esté. Pero sólo voy a hacer es hacer clic derecho en el hover o agregar mi estado predeterminado, que es este. No me gusta cambiar la posición de la deuda de Carlton. Entonces, vamos a ver. Yo puedo volver atrás. Todavía necesito desagrupar y ese componente. Por lo que haga clic derecho en el componente de pegamento, control G. Todo lo que significa btn cajón ver, hacer lo mismo para este. Entonces haga clic derecho en control de componentes grub g, así. Entonces Darío lo, si quieres ajustar esto para agregarle un poco más de texto, puedes. Lo que puedo hacer, por ejemplo aquí es, como dije, no me gusta tener sólo una palabra abajo. No creo que parezca profesional muerto. También se puede ajustar el ancho de este texto y así sucesivamente y así sucesivamente. En realidad no me voy a molestar con ello, y creo que se ve bien. Por último, lo que vamos a tejido aquí es que estamos a 150 y en general, así que hagámoslo. Asegúrate de que esté en el centro. 123456789105. Por lo que ahí lo tienes. Una vez más, si quieres, puedes posicionar este botón al centro si quieres, pero creo que funciona bien de esta manera. Aquí vamos a tener el mismo espaciado. Por lo que 150, puedo dar click aquí mismo y podemos saltar dentro. Y ahora vamos a hacer lo mismo. Entonces agrupa este grupo, este grupo, esto, esto va a ser la tarjeta número uno. Esta va a ser la tarjeta número dos. Esta va a ser la tarjeta número tres. Y dentro de todas estas tarjetas, podemos hacer clic derecho en componente de grupo. En componente de grupo, y finalmente en componente de grupo. Lo que voy a hacer aquí es que voy a guardar todos estos elementos porque no tenemos ningún color ni nada más. Y que se vincula a ella. Y por último, vamos a expandir estas cartas para llegar a ancho completo. Asegúrate de que estás alineado a la cuadrícula aquí. A ver. Y nosotros lo estamos. Por lo que sólo voy a expandirlos rápidamente para llenar este espacio. Y finalmente ahora tenemos que hacer cambios en nuestras tarjetas. Pero se ve lo fácil que fue y lo rápido que fue. Ahora puedes cambiar todas estas tarjetas simplemente habilitando esta pila y redimensionamiento responsive en nuestro caso en auto. Así que ahora saltemos por dentro en editar todos estos. Y lo primero que voy a hacer es asegurarme de que cambié este texto para ir aquí porque tenemos suficiente espacio obviamente, e incluso puedo moverlo 40 abajo creo que va a quedar mucho mejor que lo mismo para este. Entonces turno 1-2 y haré lo mismo por este. Entonces turno 12. Lo que voy a hacer a continuación es ajustar estas imágenes así que me aseguraré de que estoy de ancho completo aquí y eso se ve bien. Lo haré en santo por esta imagen. Entonces me aseguraré de que me cambié. Y tal vez una se puede agrandar sólo un poquito posición en tan solo un poquito para escuchar. Creo que eso está bien. Y por último, haz lo mismo para la imagen de disco aquí. Así que asegúrate de posicionar esto por aquí solo para que veas que están estrechando la mano y posicionándolo justo ahí. Ahora lo mejor que hay que hacer es posicionar esta fecha. Entonces déjame seleccionar las tres de mis fechas. No puedo porque están en una pila, así que hagámoslo así. Asegúrate de que se trata de 20 poblados. Asegúrate de que esta es la ciudad 20, y asegúrate de que ésta sea 20. Al igual que Dat. A continuación, trabajemos en nuestros textos. Entonces voy a usar un distinguificador tenía más textos, que es este tamaño justo aquí. Entonces voy a disfrutar de champaña o aquí mismo, y voy a dar click en mis textos ampliados para escuchar. Y quizá se pueda cortar aquí mismo. Y sólo para que tengamos suficiente espacio, así que esto es a los 40. Y vamos a ver, en esto pueden ser 40 ahora, así que 1234. Una vez más, lo vamos a cortar aquí mismo. Entonces hagamos lo mismo por los demás. Voy a copiar este texto. Mover llevó aquí. Cargarla hasta aquí. Asegúrate de que estoy a los 40. Asegúrate de que estoy a los 40 también. Cierra este. Y por último, y hacer lo mismo para el tercero. Entonces cada vez que se puede mostrar más información porque ¿por qué no? Todavía tienes ese espacio. Entonces, ¿por qué no usarla para mostrar esa información importante para que la gente no tenga que buscarla en otro lugar y perder su tiempo. Por lo que Darío, en la actualidad hemos completado D's. Podemos dejarlos así. A ver, esto es a los 150, esto es 50, lo cual está bien. Ahora sigamos adelante y sigamos con nuestra siguiente sección. Entonces vamos a ver, estamos a 150 aquí también. Entonces elegamos esto y esto, asegurémonos de que estamos en 150. Entonces vamos a ver, así. Lo primero que voy a hacer es reducir mi ancho de tira de info. Voy a seleccionarlo y mi logo, asegurarme de que estén en el centro. Y lo que voy a hacer a continuación es que no puedo organizar estos elementos un poco diferente, pero en realidad voy a desagrupar así a estos tres. Y porque estás en tu tablet y algunas de las tablets ya tienen las opciones para hacer una llamada telefónica, sobre todo a las 4G. Entonces, ¿por qué no utilizó la deuda? Entonces, eliminemos todos estos. N, Por ejemplo, si quieres enviar un correo electrónico, solo tienes que parar y te lleva a tu cliente de correo electrónico. Si quieres ubicar, estampillarías cualquier zapato de día a un mapa clientes o por ejemplo, Google Maps o Apple Maps o lo que sea que estés usando. Entonces posiciona esto justo aquí, posiciona nuestro mapa están justo aquí. Y finalmente, selecciónelo y un teléfono, asegúrate de que esté en un centro como deuda. Y obviamente puedes juntarlas un poco si quieres. Entonces por ejemplo, puedes mover esto para estar aquí y trasladarte a la última para estar aquí si quieres, si crees que tiene más sentido, lo que también puedes hacer es localizar aquí el logo, ubicado estos tres aquí. Pero sólo por el bien de la consistencia, sólo lo dejaré así, que nos deja finalmente con el pie de página. Entonces vamos a traer el pie de página aquí mismo. Y lo que puedes hacer con el pie de página es básicamente expandirte como hicimos con el menú justo aquí en la parte superior. Entonces con éste. Por lo que puedes causar todos los iconos y puedes hacer clic y expandirte en la parte superior. O lo que puedes hacer es capas en la presa tal manera que aún sean fácilmente legibles y comprensibles. Entonces hagámoslo por este caso. Y quizá pueda mostrarles cómo se puede hacer eso en las etapas posteriores. Solo estoy pensando en cómo puedo hacerlo en sí. Déjame mostrarte que más tarde una vez que lleguemos a la versión móvil para que puedas decidir la versión que quieras usar para ti mismo. Entonces primero lo primero, ordenémoslas. Entonces déjame seleccionar en no lo intentes así. Asegúrate de que estemos en una pila como esta y eso funciona bien. Y Dan, voy a desagruparlos quizá. A ver. conocimiento sólo los deja como la R. Así que primero las cosas primero voy a mover todos estos. Entonces voy a posicionarlos todos para que todos nos alineemos a la izquierda así, también van a reducir el tamaño a partir de aquí. Entonces 123456, por ejemplo, sólo para que no tomemos demasiado espacio. Y luego voy a hacer doble clic dentro de todos ellos, asegurarme de que estén posicionados así. Así, y así. Entonces, vamos a ver. Sí. Dejémoslo así. Creo que está bien. Veamos qué tenemos aquí mismo. Entonces tal vez podamos tenerlo a los 40 o lo que sea. Pero solo lo voy a dejar así por ahora. Vamos a cerrar esto. Pasar a inverso. Entonces lo que teníamos es 60. Por lo que podemos tener 60 aquí también. Al igual que esto. Asegúrate de estar alineado con la cuadrícula así. Con c, puedo trasladar a la Inmobiliaria a escuchar seguridad familiar, a escuchar ese retiro hasta aquí. Y se puede ver porque estamos en una pila, ya se alina muy bien con Eric que lo que estamos haciendo. Por lo que más blanqueados hasta 60 como este. Me 59. Diseño responsivo 4: Ahora sigamos adelante y terminemos nuestro diseño responsive con el tamaño móvil. Por lo que golpea el control D, lubrique este también. Posicionémoslo y abajo para estar justo aquí, así que 70. Y vamos a renombrarlo. Haga doble clic aquí. Redujamos el tamaño y van a ser dispositivos extra pequeños. Entonces cambiemos eso rápidamente también. Entonces ya ves que esto es 375. Entonces cambiemos la deuda. Por lo que 375. Cambiemos esto por cuatro columnas de ancho. Por lo que de ocho a cuatro. Y lo que vamos a hacer es realmente usar estos ajustes. Entonces para 306120, así para 30 a 6120, S4 a principios 6120, así. Y por último, sigamos adelante y adaptemos todos nuestros elementos como lo hicimos hasta ahora para todos ellos. Entonces lo que voy a hacer es saltar dentro y ajustar algunos de estos iconos y elementos. Muévete aquí mismo para los negocios más en toda Europa. Y también puedes envolver el texto si quieres, para darte un poco más de espacio. También me puedo alinear en estos dos aquí, tal vez 1234, sólo para que pueda darme un poco más de espacio. Asegúrate de que esto es a los 40 también. Y por último, porque estamos en un móvil, simplemente podemos irnos y éste como país seleccionado. Vamos a ajustarlo a aquí. Y luego una vez que el usuario estampe, por ejemplo, el disco y expandirlo hacia abajo y mostrar que tienen una opción más. Entonces voy a esconder este país y cuándo ajustarme en esto a la altura. Y ahora tenemos una navegación mucho más limpia que antes. Entonces, por ejemplo, puedo alinear esto aquí. Puedo mover esto a aquí si quiero, pero sólo lo dejaré como era originalmente. Ahora que eso está terminado, lo que podemos hacer es trabajar en nuestra navegación. Por lo que puedo posicionarlo aquí. De nuevo, asegúrate de que vaya hasta aquí. Ahora, necesito hacer mis logotipos más pequeños. Entonces lo que voy a hacer es importar uno de los logotipos que anteriormente exporté. Entonces déjame arrastrarlo desde mi escritorio aquí. Aquí está. Puedo hacer un control x para copiarlo así. Entonces puedo saltar dentro de mi nav principal. Puedo hacer control V para pegarlo, y puedo posicionarlo en un lugar como este. Y luego puedo quitar mi viejo logo y usar este logo porque recuerdas lo que se hablaba anteriormente de este logo, distrayéndote y realizándole estos cambios. Por lo que seleccionaré estos dos, asegurarme de que esté en el centro. Ampliaré esto y quizá desde, veamos, quizá pueda dejarlo aquí por ahora solo para que podamos ver cómo se ve. Y asegurémonos de que para también hacer cambios a estos otros. Por lo que ahora BG está aquí. Sí. Saltemos dentro de una misa. Es querida. Éstos están aquí. Esto también está aquí. Así que ahora sigamos adelante y usemos el grifo. Pero antes de hacerlo, lo que quería hacer es copiar mi logo. Vuelve al estado de tabulador. asegura de que haga cambios como este. Así que asegúrate de que llegaron a escuchar. Lo que también quiero hacer es en realidad de no vamos, hagamos realmente auditoría. Entonces usemos Indias. Entonces ahora BG, Vamos sólo a ellos para escuchar. Vamos a mover nuestro punto de toque y nuestro logotipo dentro a aquí. Veamos dónde estamos en estado predeterminado, por lo que 20. De acuerdo, volvamos a la pestaña. A ver. Tan simplemente más con 20, así 12. Y vamos a mover mi punto de grifo también o simplemente dejarlo ahí. Creo que no importa demasiado. Y entonces puedo basar mi logo, lo siento, que creé. Asegúrate de que esté en el centro. Lo es. Y ahora puedo seguir adelante y hacer algunos de estos cambios. Entonces veamos 2 ahora mezquita BG. Por lo que me aseguraré de cambiar esto a esto como artículos so nav o atrevo, registrando su reto. Entonces todo está donde debe estar. Lo que haré también es golpear Control C para estos elementos. Por lo que nav y login Control-C. Ocultaré todo lo demás. Vuelve a mi estado predeterminado, salta dentro de mi máscara aquí mismo y tú controlarías V para colocarlos ahí. Entonces eliminaré estos porque he reducido el tamaño de ellos antes. Ahora reduciré la opacidad a 0 en estos. Y ahora vamos a probarlo y a ver cómo se ve. Entonces cuando lo abro, haga clic aquí. Todo funciona como debería antes y todo se ve bonito y limpio. Entonces ahora pasemos a la sección de héroes. Ahora que ya hemos terminado esto. Y para la propia sección de héroes, lo que voy a hacer es en realidad, veamos si posiciono todo en un centro. Veamos cómo se ve eso. Yo sólo estoy preocupado por el botón del disco porque creo que es demasiado libro. Entonces posicionemos dat realmente rápidamente para escuchar que decide aquí, saltar adentro y de 24, ir a D, 18. Así, pero asegúrate de que sea blanco. Creo que eso funciona bien. Lo que también puedo hacer es saltar aquí mismo y asegurarme de que sea, por ejemplo, 60 porque ya no necesitamos que sean 70. Creo que 60 está bien. A continuación, una forma de hacerlo es reducir el tamaño de este texto de 24 a, veamos, 18 o tal vez 16, así. Pero sólo asegúrate de que esté descolorido. Y lo voy a envolver, por ejemplo, así. Y luego finalmente para escritorios se asegura de que sea, vamos a ver, 24 pernos. Y creo que eso funciona bien. Ahora sigamos adelante y asegurémonos de que esté en el centro de nuestro aeropuerto. Asegúrate de que sea, por ejemplo, en 41234 así. Creo que eso funciona bien. Y ahora vamos a seguir adelante y adaptarnos a otros elementos. Por lo que saltaré dentro de la posición. Que el héroe BG aquí, salte asignado mi posición de máscara, mi héroe BG aquí, y luego salte dentro de mi círculo, asegúrate de que esté en deuda en un centro como este. Incluso puedo aumentar la altura de mi círculo. Al igual que esto o algo así. Creo que funciona bien. Entonces déjame posicionar podría par en centro. Asegúrate de que estén en algún lugar por aquí, por ejemplo, estoy sosteniendo Shift para ajustarlos. Entonces en algún lugar por aquí creo que va a funcionar bien, entonces puedo asegurarme de que estén aquí, lo cual está bien. Entonces posicionaré puede héroe BG alinearse con mi imagen así? Haré lo mismo por mi máscara. Tan seguro, está en terror así. Por lo que corta en este punto. Entonces lo que voy a hacer es usar mi forma de héroe, colocarla aquí y luego escalarla de manera uniforme. Por lo que sosteniendo Shift, posicionándolo a aquí mismo. Asegúrate de que esté abajo. Al igual que indice, y me aseguré de que mi imagen esté abajo en la misma, por lo que todo se ve correcto. Lo que puedo hacer a continuación es obviamente saltar dentro y reducir el tamaño de mis héroes porque no necesito que sea demasiado grande para poder hacerlo más pequeño de lo que puedo reorganizarlo. Entonces selecciónelo y posiciónelo en algún lugar por aquí, por ejemplo, creo que está bien. Y lo que también podemos hacer es usar a nuestro héroe Elementos. Asegúrate de que todos estén en un centro como este. Y entonces podemos saltar aquí y reducir el tamaño de los datos también a algún lugar por aquí, por ejemplo. Entonces lo que puedo hacer es usar mi cruz, tal vez más, nos adherimos a posición como esta. Usar mi círculo puede ser más aquí y simplemente usar mi posición de línea justo aquí, por ejemplo, si pensamos que eso es un poco demasiado, puedes organizarlo así. Y vamos a ver, Laura baja a cinco. Creo que funciona mejor. Y esto puede ser un cinco también. Y puedes dejar los actos como están. O puedes saltar dentro y reducir estos si quieres Seúl se ve así y así. Por lo que 79479, cuatrocientos cincuenta y tres. Eso está bien. Puedes dejarlo así. Ahora sigamos adelante. Muerte. Terminamos esto y debido a que estamos en tamaño extremadamente pequeño de la pantalla, incluso puedo reducir esto y moverlo un poco para poder seleccionarlo todo así e ir así. 1234, por ejemplo. A ver dónde estamos y podemos mirarlo. Por lo que quiero alinear mi navegación con esta. Por lo que 1234, puedes posicionarlo ahí. Después salta dentro de tu héroe posición y héroe VG para estar aquí. Posición, tu máscara para estar aquí también. Al igual que esto. Y ahí lo tienes. Ya hemos completado esta sección ahora podemos pasar a la siguiente sección. Y obviamente esto es demasiado libro Alma. Es Experimento 3624. Creo que 24 funciona bien con este caso. Asegúrate de estar en el centro. Y entonces lo que voy a hacer es asegurarme de usar unas distancias más pequeñas. Por lo que 12345678, tal vez 80 funciona bien. Entonces donde quiera que fueran 100, podemos, por ejemplo, ponerlo en 80 y olvidarnos de ese 150. Por lo que podemos tenerlo estar en la zona 80 donde para que puedas ver estamos en 80 por todas partes. Y ahora sigamos adelante y hagamos algunos ajustes a estos. Por lo que voy a hacer clic en ellos, ajustarlos todos al mismo tiempo, asegurarme de que estoy alineado para migrar aquí. Yo soy. Entonces lo mismo aquí. Y eso está bien. Pero voy a hacer lo siguiente es quizás un rap MyText alrededor, como una forma directa de hacerlo así. Entonces lo que puedo hacer es extender un poco este texto hacia abajo y luego cortarlo. Entonces 12, me gusta cómo se ve eso. A ver, estamos a los 20 aquí, así que 12, posiciónelo aquí y quizá córtelo 23 líneas de texto, como lo hicimos antes. Taylor, una cuenta que se adapte a tus necesidades, van a terminar ahí la sentencia. A ver, podemos estar 40 abajo, está bien. Entonces tres líneas 20, y ahora vamos a delinear todas ellas. Entonces haré lo mismo por este. Entonces 12, así, vamos a comprobarlo. Estamos 20 abajo, C alineado en dos. Por lo que tres líneas se van a cortar justo aquí. Y vamos a ver 40 abajo. Eso está bien. Pasemos ahora a este. Tan extendido como este para alinearlo aquí. E12 con uno de nuestros, vamos a ver, puede diseños como ese. Esto está en 48 deudas, multa. Y ahora esa sección está terminada. Ahora podemos pasar al siguiente apartado. Y se puede ver que se trata de 24. Esto es 24, así que todo sigue luciendo bien organizado. Estamos a los 80 aquí, así que vamos a estar a 80 años también. Por lo que 12345678. A ver, ahí está. Y lo que voy a hacer por estos es obviamente hacer estos cambios aquí también. Pero vamos a ver, tal vez pueda posicionarlos uno encima del otro. Entonces esto es 24. Esto es 24. Asegurémonos de que esté aquí, en posiciónelo aquí abajo. Y veamos, podemos asegurarnos de que sean 16 por ejemplo. Veamos el espaciado. Entonces uno, sí, vamos a darle un espaciado de diez. Volvamos con ese texto. Estamos 16 aquí, 1234, sólo para que podamos ser 20, asegure de que estamos alineados, estamos, y asegúrate de que estamos 20 aquí también. Entonces 12 y estamos 31 ahí abajo, lo cual está bien. Y lo último que hay que hacer es ajustar esto a aquí así y tipo de cambio BG, traerlo todo dentro, dentro. Entonces ahora que un hit adelanto, te puedo mostrar lo que quise decir. Entonces, una vez más, esto está funcionando realmente bien, mostrando todo. Esto se ve realmente bien porque muestra toda esta información. De verdad no me gusta cómo destaque este impuesto. Entonces solo ve cuáles son los desarrolladores y tu cliente sobre la copia, qué puedes cambiar sobre tu copia porque solo querías envolver en ciertas etapas. Por lo que c, que son desarrolladores y clientes, es posible tener una copia completamente diferente o la misma sólo en otro orden que ofrecen estos otros tamaños. Por lo que tienes que sembrarlo con tu cliente. Y por último, vamos a echar un vistazo a esto. Como puedes ver, se ve realmente bien y muestra la información como debería. Ahora vamos atrás y veamos qué puedo hacer aquí mismo. Entonces tal vez pueda saltar monedas de asignación, posicionar esto aquí. Y vamos a ver si eso va a hacer algún cambio adicional en él. Cuando se arrastró hacia abajo, todo se ve bien. Entonces eso me gusta. Incluso puedes seguir adelante y reducir el espacio y dar más y entre todos estos. Entonces, por ejemplo, entre aquí y aquí, se puede reducir el espacio, pero no perder demasiado tiempo. Yo sólo estoy contento con cómo se ve eso. Por lo que ahora podemos seguir adelante. Podemos reducir este espaciado a 80. Y voy a reducir esto aún más así. Lo que voy a hacer a continuación es saltar imagen lateral está bien. Podemos simplemente pedirlo aquí mismo. Y vamos a verme. Podemos reducir la herramienta de altura. Ver 300. A mí me gusta. Creo que es bueno. A continuación, saltemos aquí. Entonces estamos a los 40, lo cual está bien. Ajustemos nuestros textos. Entonces éste va a ser, veamos, 24. Pero, ¿quién calvo? A mí me gusta cómo se ve eso. Esto es que vamos a arreglar eso más adelante. Ahora para este texto, primero vamos adelante y ampliarlo a los bordes de nuestra cuadrícula así. Y así. A continuación voy a usar 16. Voy a usar este color. Creo que se ve bien. Entonces voy a ajustar mi botón y usar el mismo como lo hacía anteriormente. Entonces dos columnas y veamos realmente espejo, podemos copiar esta para que no nos molesten estos detalles. Control C puede saltar dentro de aquí, haga doble clic para saltar dentro de Control V. Así puedo pegar mis textos en, eliminé este botón para asegurarme de que estoy en 40. Yo estoy a los 40. Yo estoy en 40 con este también. Y esa es tu sección completada. Eso es básicamente todo. Eso es todo lo que necesitas hacer. Ahora por fin, posicionado es estar a los 80. Eso está bien. Si crees que esto sigue siendo demasiado grande, puedes reducir aún más la altura de tu imagen. Pero revisemos la vista previa, veamos cómo se ve. Y también puedes descargar la app tanto para iOS como para Android. Entonces, cualquiera que sea el dispositivo que estés usando conectado con tu cable USB, y ahora puedes lanzarlo y previsualizarlo directamente en tu teléfono y ver cómo se ve. A lo mejor puedo incluso mostrar eso más tarde solo para que puedas ver cómo se ve. Pero básicamente porque estás diseñando para estas formas específicas, Es la mejor opción usar esa función de Adobe XD para dispositivos móviles reales. Entonces si estás usando, si estás diseñando para iOS, por ejemplo, para iPhones, entonces realmente te recomiendo que descargues eso y lo pruebes si estás diseñando para Android, lo mismo, pero solo asegúrese de usar el dispositivo que tiene estas propiedades. Entonces esto está en 375. Entonces si tienes un teléfono móvil que tiene 375 de ancho, entonces se va a quedar bien. Si no, se va a ver sesgada y no realmente todo eso relevante. Entonces, vamos a desplazarnos todo el camino hacia abajo y ver. Por lo que probamos esto hacia fuera grupos. Bueno, usamos ese botón y creo que esto funciona bien. A lo mejor sólo una ligera altura reductora, pero depende de ti y decide lo que quieras hacer con ella. Fui a posicionar esto aquí y a asegurarme de que esté a los 80, así 12345678, voy a saltar enseguida y reducirlo así. Voy a saltar y copiar este botón's que controlan C. Voy a entrar dentro de mi tarjeta. Entonces voy a ir justo aquí, Control-V a basado en mi nuevo botón, borrar mi viejo, y fui a saltar aquí mismo con base en botón de estiércol. Correcto, eso borra mi vieja mezcla. Esto está en el centro y son 40, así que 1234, asegúrate de que esto sea lo mismo. Así centro 1234. Y obviamente puedes aumentar el espaciado entre tus tarjetas simplemente estaban flotando justo aquí. Voy a asegurarme de que sea en 40. Eso está bien. Entonces lo que voy a hacer a continuación es hacer algunos cambios a estos textos. Entonces voy a poner esto así que ver, estamos en 22 para este. Vamos a moverlo a ser 20 exactamente. Y para hacer lo mismo por éste, así 12. Y sólo por el bien de la consistencia, podemos moverlo hacia abajo así. Entonces puedo ampliar mis textos 20. Asegúrate de que estoy haciendo lo mismo aquí. Entonces vamos a ver, estamos a las diez, estamos a los 20 aquí. Y puedo reducirlo a, veamos, cuatro líneas de texto. A ver qué tenemos justo aquí, 33, eso está bien. Y yo puedo hacer lo mismo por esta sierra expandirse en más ancho aquí mismo. Asegúrate de estar en 21234 líneas de texto. Entonces voy a posicionar mi punto aquí mismo, eliminar esto y también estamos en 33. Lo que no me gusta de estas tarjetas es la altura de estas imágenes. Entonces, por ejemplo, puedo reducir la altura a algún lugar por aquí. Entonces veamos 220. Yo puedo hacer lo mismo por los desarmas. Por lo que esta imagen puede estar donde está. Aquí es 220. Supongo que puedo hacer doble clic. Eso está bien. Y ahora tenemos un poco más de espacio para jugar con nuestros elementos. Entonces toda posición en justo aquí. Por lo que 1234, asegúrate de estar a los 40. Asegúrate de estar en 40 también. Da click en este y asegúrate de que estás en el centro de tu botón así. Por lo tanto, haz lo mismo por esto. Por lo que 1234. Asegúrate de estar a los 40 aquí también, como papá. Entonces veamos dónde estamos con éste. Entonces veamos 40. Déjenme ir rápido y chequear aquí mismo. Entonces tengo 4040 porque estoy perdiendo fácilmente cosas en fácilmente para olvidarme de las cosas. Y veamos 1234 líneas de texto. Entonces estamos de nuevo en 21234 unos, no me gusta cómo se ve esto, así que veamos un estado del arte. Hmm, si la palabra de tecnología iría justo ahí, pero ellos ojos realmente importantes. Rey liberación. Y creo que es algo así. Y vamos a ver, podemos posicionar esto para estar también a los 40. Por lo que 1234, muerte temprana. Y por último, mueve esto para estar aquí en el centro. Y déjame hacer una inspección rápida esperar finalmente. Entonces de aquí para aquí, 404040, esto está en el medio, 404040, y esto también está en el medio aquí. Y ahí lo tienen nosotros terminamos en este apartado también. Pasemos ahora a las secciones posteriores. Entonces si te llevo de vuelta una vez más, puedes ver que esto es de 24 voltios. Entonces vamos a aplicar esos mismos ajustes a este texto. Entonces desplácese todo el camino hacia abajo. Así que asegúrate de que está en el centro de nuestro aeropuerto y saltando aquí mismo. Por lo que 24 audaces así. 12345678, como muerto. Una vez más, asegúrate de que esté en el centro, es posición destiladora izquierda. Asegúrate de que sea 80. Ajusta todos estos así. A ver, algo no está bien, aquí mismo, pero los fondos están bien. Déjame revisar los otros es simplemente no están dx x escapando de nosotros. Entonces vamos a arreglar eso. Llamémoslo dentro de aquí. Entonces déjame mover esta imagen a la parte superior. Muertes de Silane. Está bien. Solo necesito escalarlo por dentro. Entonces como en esta posición lo aquí, o mejor aún como un disco. Entonces podemos ver a estos dos tipos les gusta así que creo que MIT se ve mucho mejor. Ahora lo que voy a hacer es saltar dentro de mi texto, hacer lo mismo. Entonces, vamos a ver. Estamos en 20 aquí, 12 y más está justo aquí. Y banca mundial para 2021. Y veamos si podemos hacer justo aquí así. Veamos dónde estamos aquí. Entonces estamos al 14 de mayo, recombinamos a los 20, o variamos a los 40. Y aquí podemos estar a los 20 solo para poder darnos un poco más de espacio. Estamos, vamos a ver, 1234, así, 25 abajo. Y creo que eso se ve bien. De acuerdo, entonces ahora podemos más queríamos este. Puedo hacer doble clic dentro de una reorganizada mi imagen para escuchar. Creo que eso está bien. Uno que voy a hacer con este es ajustar mis textos. Por lo que 20 devueltos. Podemos mover estos hacia abajo a la comunidad. Sube un poco esto. Entonces estamos a los 20. Veamos qué hicimos aquí. Entonces estamos a los 40 aquí. Más con, a los 20, podemos más riffs y 20. Yo puedo hacer esto. Entonces, vamos a ver. Como se puede ver, hay que hacer todos estos cambios y ajustes. Entonces eres tú de aquí a aquí tengo 100. De aquí a aquí estoy a 100, así que tiene que quedarse ahí. Entonces veamos, solo movamos este trabajo comunitario y bajamos así, solo para que sea un poco más legible que antes. A continuación, ver esto es a los 20. Entonces primero vamos a ampliarlo hasta aquí. 12x, así. Entonces vamos a ver, esto es a los 20. Teníamos aquí tres líneas de texto. Entonces simplemente voy a mover esto hacia arriba como suciedad y finalmente aprender más y fue 40 así. Por lo que 1234 así. Y por último, sigamos adelante y terminemos este último. Entonces veamos, el espaciado es tardío entre ellos. Por lo que puedes aumentar eso sosteniendo Shift y va a aumentar a esto y a este siguiente así. Y cuándo saltar dentro de mi imagen en cada posición podría imagen un poco a algo como esto. A ver, la altura es de 631. ¿ Es esto lo mismo que esto? Es, ¿es lo mismo que el original? Por lo que la altura es de 631, pero esto es de 287 a 87 y finalmente a 87. Entonces eso está bien. Ahora saltemos atrás. Entonces una vez más, vamos a revisar. Se trata de 212. Esto se va a quedar donde está. Y esto va a ser 20 de aquí. Pero primero vamos a expandirnos y va a ocupar tres líneas de texto. Entonces un escritorio para gustarle esto, dos, y esto va a ser a los 40 así. Y ahí lo tenemos. Hemos concluido estos tramos. Me permite chequear rápidamente u OTUs en líneas y eso está bien. Ahora sigamos con nuestras tiras de información. Entonces me voy a asegurar que esté a los 80 también. Por lo que 12345678. Y puedes, por ejemplo, saltar dentro y agruparlas así. Y luego van a escalar para descentrar proporcionalmente y mirar como deberían. A mí me gusta cómo se ve eso. Por lo que ahora podemos pasar a nuestro Fuller. Y cuatro es lo que nos va a llevar más justo aquí. Por lo que para agilizar un poco más este proceso, voy a copiar y pegar donde ya lo hizo en mi diseño original. Sólo para mostrarte lo que quise decir. Entonces si significa, salta dentro de aquí y mueve esta belleza fotográfica todo el camino hacia abajo. Solo para mostrarte estas opciones también. luego puedas decidir cuál quieres crear ese disco más abajo. Por lo que puede saltar rápidamente dentro de mi diseño original. Salta dentro de mi pie de página. Y vamos a ver. Ok, selecciona mi Texto. Seleccionar y estos. Soy dat hit Control V. Así puedo pegar lo que ya hice con mi original. Entonces déjame saltar dentro de aquí. Entonces tourney, Veamos el espaciamiento entre ellos. Esto es a los 40. Entonces vamos a seleccionarlos todos menores de 40 años. Y básicamente se puede ver lo que he hecho aquí mismo. Entonces incluí esta flecha, que básicamente es solo a formas como lo hicimos con el ícono del menú combinado juntos. Y también puedes usar cualquier conducta de ROI que quieras básicamente. Y lo que he hecho ahí mismo se posiciona a todos de esta manera. Por lo que puedes ver que estos elementos del menú están por debajo uno del otro con 40 entre ellos. Para que veas cómo se ve todo eso. Entonces todo está bien y limpio. Todo es fácilmente desplazable. N ilegible. Jabón. Permítanme bajar este texto hasta ser 40 también. Puedo posicionar esto. Veamos dónde está. Podemos posicionar eso para ser 40 también. Así, así. Y también puedo cerrar mi tablero de arte hacia abajo. Y voy a explicar cuál es el tema aquí con Adobe XD. Entonces básicamente lo que hay que mostrar aquí mismo son todos estos estados diferentes. Entonces desde tus ítems de pie de página, así todos estos ítems, tarjetas de préstamos, invertir Digital, otros enlaces, la canción, tendrás que agruparlos así, controlar G, y básicamente crear un componente. Y lo que necesitarás hacer es crear estados componentes. Por lo que tendrás alongs, pulmones cerrados, abiertos. Pulmones cerrados va a ser un estado por defecto y abierto va a ser unio Tarjetas Estatales, tarjetas por defecto abiertas. Entonces y esto es lo abierto. Una vez que empieces a mostrar todos estos elementos encerrados, es esta flecha se va a dar la vuelta obviamente, y vas a esconder todos estos. Entonces parece que lo hicimos con la navegación del menú en la parte superior. Entonces básicamente necesitarás crear. Así que estado así para todos y cada uno de sus elementos de menú de creaciones. Entonces por ejemplo, cuentas aquí a la izquierda. Esta es la flecha al hacer clic hacia abajo se va a expandir y mostrar todos estos. Y el tema con eso, por qué no se puede mostrar eso en XD es porque todavía no tenemos tableros de arte dinámico. Tenemos dinámicos nuestros tableros. Entonces, por ejemplo, puedes ver que si selecciono mi aeropuerto haciendo clic aquí mismo, puedes ver que el redimensionamiento responsive está apagado. Si lo enciendo, todo este tablero de arte puede cambiar de tamaño hacia arriba y hacia abajo fácilmente. Pero lo que no puede hacer es que no pueda lidiar con múltiples componentes. Porque, lo siento, estados de múltiples componentes, porque vas a tener esto como tu componente. Por lo que todos estos elementos de pie de página, solo primero componente y luego para cada uno de ellos, tendrás que crear estados de componente. O hub sí tenía sentido como lo hicimos a lo largo de este curso hasta ahora. Por lo que Adobe XD aún no puede hacer frente a todas esas fechas de componentes para que se expanda hacia abajo. No puede hacer frente automáticamente, reajustar un estado, pero aún no puede hacer frente a múltiples estados. Entonces si queremos mostrárselo a tu cliente, puedes, por ejemplo, mantener todos estos abiertos o todos ellos cerrados excepto el primero. Para que cada uno pueda hacer frente a eso y tú puedes lidiar con eso. Simplemente déjalo sensible, cambia el tamaño en click justo aquí para fijarlo a la parte superior. No necesitas hacer todas estas otras. Para que puedas hacer eso. Pero solo asegúrate de seleccionar el nuestro tablero en sí, así, enciende el redimensionamiento de respuesta. Y cuando lo hagas, asegúrate de hacerle esos cambios. Entonces eso es básicamente todo. Tienes que hacer estos cambios. Tienes que seguir pareciendo así. Entonces estoy un poco desordenado si lo puedo decir yo mismo. Entonces no puedes hacer en este lindo escondite como hicimos con nuestro nav principal justo aquí. Todavía tienes que mantenerlos en su lugar así. Entonces eso es básicamente todo para este video, y eso es básicamente todo para esta parte del curso. Ya hemos completado nuestro diseño de sitio web responsive. Una vez más, si quieres un realmente animarte a hacer esto exactamente el mismo proceso para todas estas otras páginas. Y por cada una de las páginas que haces arriba o desde las suyas, porque este es tu trabajo como diseñador, aún tienes que hacer todas estas páginas de diseño de sitios web responsive porque en desarrollador y no sabe por sí solo o lo que tenías en la cabeza y lo que quieres hacer con estas páginas. Porque a veces pueden entender, como por ejemplo, si saltamos a esta página aquí mismo. Entonces es bastante obvio, digamos que nosotros, si incluimos una pila como esta, podemos mostrárselo. Va a ser así en el responsive. Va a ser así en un dispositivo de escritorio y probarlo básicamente. Pero no saben qué hacer con estas páginas, por ejemplo. Por lo que no saben si quieres que esta chica esté centrada. Si quieres que sea de izquierda a derecha donde quería texto. Si quieres que el texto quede alineado, gana justo por así. O si quieres que este texto se posicione en un centro como este. Por lo que aún tienes que crear diseño responsive para que ambos clientes, tus compañeros de equipo, Si tienes uno y desarrolladores entiendan a dónde quieres ir con este diseño, qué quieres crear, qué cambios queremos como pantallas empezar a bajar y bajar de tamaño. Entonces es por eso que el diseño sensible es realmente importante. Pero justo en cuanto al tamaño del discurso y la longitud del discurso, expliqué todo lo que sé básicamente sobre el diseño responsive, la sequía de estas páginas. Y ahora haré lo mismo para esta página para el diseño de dashboard. Te mostraré cómo podemos adaptar esto porque como puedes ver, tenemos en este margen justo aquí, que es mucho más grande que este margen de la derecha. Entonces usaré básicamente estas mismas configuraciones, pero solo retírelas un poco por esos márgenes para mostrarte cómo se verá esta página una vez que los usuarios empiecen a usar ese diseño responsive. Entonces eso es lo que viene a continuación. Y allí te veré. 60. Diseño responsivo 5: Ahora sigamos adelante y comencemos a trabajar en el diseño responsive para nuestro panel de control. Y básicamente lo que vamos a hacer es exactamente el mismo proceso como lo hicimos para una página web. Pero la principal diferencia es ese margen izquierdo que dejará para nuestra navegación. Entonces lo que voy a hacer es básicamente duplicar esto, nuestra posición directiva en todo sentido hacia abajo. Y voy a tratar de alinearlo con estos son tableros, mayoría simplemente sosteniendo mi tecla de turno así. Y luego voy a seleccionar todos estos son tableros así. Hacer un obligado o Control D posicionado aquí mismo. Y luego saltaré dentro de mi modo de prototipado. Da click aquí y llama a esto, veamos dashboard que responde a eso y veamos dónde estamos. Diseño de sitio web responsive dashboard diseño responsive. Entonces eso está bien. Vuelve a Diseño y hagamos algunos cambios. Entonces vamos a ver, podemos llamar a estos como fueron originalmente, porque sí importa. Estos se ajustan a punteros para nosotros, cuales vamos a utilizar para real responsive y diseño y simplemente vamos a quitar uno de cada uno de ellos. Y ahora lo que vamos a hacer es experimentar con algunos de estos diseños. Por lo que aquí tenemos la columna de 12165 a cada lado. Y si hago clic aquí, así que vamos a llamar a esto, vamos a ver. Haga doble clic aquí. Y diseño de tablero. Y este, escritorio tan grande. Entonces si lo miramos aquí mismo, presumo en apenas un poco más de cerca, se puede ver en deuda tenemos margen a la derecha, que es éste de 20 en margen a la izquierda, que es éste en 401 pixels. Pero si echamos un vistazo aquí, lo que tenemos son 165 de izquierda y derecha. Entonces lo que realmente podemos hacer aquí mismo es, por ejemplo, y dar a esta izquierda 1200. Y se puede ver que ya comenzó a adaptar posición de Marika sí para tener 20 como este. Ahora estamos a las dos o dos y ya vemos algunos cambios aquí mismo, lo cual está bien, lo cual vamos a hacer de todos modos. Entonces lo que podemos hacer es seguir adelante desde ahí. Entonces veamos que estamos en, digamos 14401024. Entonces tal vez porque este es 202 con 20, vamos a ver, lo mantendremos a los 20 aquí, así que abramos. Entonces, el correcto va a ser 20, pero mantengamos esto en 180, por ejemplo. Vea cómo se ven los datos. 2182, por ejemplo. Podemos posicionarlos así. Ahora podemos, vamos a querer, y para las tabletas, no tenemos que cambiar nada porque ¿cuáles son las tabletas? Todavía vamos a tener nuestra navegación aquí mismo en la parte superior. Que se va a expandir hacia abajo. Y para estos dispositivos extra pequeños de situación ajetreada va a ser exactamente lo mismo, sugiere que estos dos son los que tienes que preocuparte si piensa que estas columnas son demasiado anchas o que el ancho de canaleta Indies es demasiado ancho. Obviamente puedes jugar con ellos. Entonces, por ejemplo, puedo bajar el ancho de la canaleta a 20. Puedo aumentar el ancho de la columna a 60 o lo que sea, pero todo depende de ti. Sólo voy a usar estas opciones. Entonces primero lo primero, lo que voy a hacer es básicamente replicar lo que hice aquí mismo. Y nosotros hicimos lo mismo con estos. Y obviamente espacio sabio. Y lo que puedes hacer es cuando comienzas a hacer diseño responsive, como hicimos aquí mismo, puedes organizarlos aquí. Entonces de izquierda a derecha con todas estas páginas, como puedes ver en este momento tenemos 246 páginas con estas que son ocho. Y puedes posicionar a estos dos así. Entonces lo son, van a ir sólo un poquito hasta aquí, o puedes cambiarlos y posicionar algunos de ellos justo aquí en la parte superior. Y luego cuando te quedas sin espacio, puedes posicionarlos. Ahora, obviamente tenemos el diseño del tablero. Se puede mover a la derecha. Se puede dar más respuesta a la derecha también. Entonces realmente depende de ti. Esto obviamente nos va a llevar mucho menos espacio que este porque el contenido no va tanto a ese sitio. Sólidos. Empezaste una vez más 1440. Entonces, empecemos con eso. Entonces ve aquí mismo, 1440. Y veamos qué tenemos justo aquí. Por lo que tenemos 123074. Entonces intentemos cambiar eso. 3074. Veamos qué tenemos abajo al fondo. Por lo que 220 en dos. Entonces vamos a abrir la dosis. Por lo que 2222 para intentar deuda. Veamos una vez más. Entonces 30-70 por cumplir 7422 o dos, y eso es básicamente todo. Entonces revisemos una vez más solo para asegurarnos. Así 12307422 a 12307422 a N, Eso está bien. Lo que voy a hacer a continuación es básicamente hacer los mismos ajustes que antes. Entonces lo que puedo hacer es asegurarme de que esto vaya a aquí, así no necesito hacer ningún cambio a papá. Básicamente. Lo que puedo hacer a continuación es básicamente ajustado al ingenio de todos estos. Entonces lo que yo también puedo hacer, él básicamente esconde mi texto así. Entonces me acaban de quedar con estos iconos y tal vez esa sea tu mejor apuesta de todos modos. Entonces, cuando la gente se cierne sobre él, por ejemplo, entonces puedes mostrarles eso. Entonces hagámoslo rápidamente. Entonces para la cuenta lo voy a ocultar, transacciones, préstamos, y fue de nuevo porque voy a hacer sólo esta página. Se lo estoy dejando a ustedes chicos. Si lo deseas, puedes explorar y crear páginas adicionales solo para que puedas practicar un poco. Y ahora se puede ver que tenemos un look mucho más limpio. Y si lo agrando solo para que veas cómo se ve. Ahora tenemos un look extremadamente bonito y limpio aquí mismo, sin dejar de mantener todo esto intacto. Entonces, ahora trabajemos en estos otros elementos. Por lo que voy a seleccionar aquí mi posicionamiento de texto. No hay necesidad de cambiar nada. Pondré disco aquí. Y vamos a ver. Una vez más, lo vamos a mantener a cuatro columnas de ancho. Y cuándo saltar aquí mismo. Una vez más, por culpa de que tenemos estas tarjetas de Dashboard. Obviamente podemos adaptarnos. Entonces 1234, así que va a estar justo aquí. Lo que podemos hacer con dosis es que puedo mover esta información, por ejemplo 12, y luego puedo escalar mi tarjeta. Por lo que puedo saltar dentro donde está. Aquí está. Puedo dejar ver, borrar o simplemente ocultar estos de esta manera. Y ahora simplemente puedo ajustar este, SOT 12 por ejemplo. Y entonces puedo hacer cambios a estos textos. Entonces están en, veamos, 16. No tenemos talla más pequeña. Entonces lo que se puede hacer en realidad está adaptado, así que tarjeta de débito. Y puedes llamarlo, por ejemplo, hasta el 921 porque se muestra aquí mismo y ya sabes lo que es básicamente. Ahora que eso está terminado, trabajemos en la siguiente sección, que son las secciones de ayuda y comorbid aquí, ajustaré el ancho de mi tarjeta así. Y simplemente saltaré por dentro y reposicionaré algunos de estos elementos o pondré esto aquí. Pondré esto aquí por ejemplo. Y creo que se ve o escribe algo como esto. También puedes reducirlo a aquí a ocho tal vez solo para darte un poco más de espacio. Y vamos a dar esto y esto son 20. Por lo que 12. Tan sólo para seguir con éste también. Podemos hacer lo mismo por este texto. Entonces en dos, solo para que todo se vea coherente y agradable. A ella justo aquí con C es misma altura, misma anchura, que está bien. Eso es genial. Ahora sigamos adelante y trabajemos en estos otros elementos. Entonces vamos a traer toda esta información. Entonces si saltamos dentro de nuestro original, podemos ver ese 1234567. Entonces esto nos está llevando siete columnas y esto nos está llevando 1-2-3-4-5. Entonces trabajemos en eso también. A ver 12345. Entonces vamos a reducirlo a eso. Por lo que vamos a escondernos rápidamente en este 1 primero 12345. Por lo que tiene que ir aquí. Y aún tenemos mucho espacio para trabajar con nuestros elementos, así que no necesito hacer ningún cambio. Básicamente, el de Adobe hizo todo por mí. Todo lo que necesito hacer en este momento es más que discos a aquí por ejemplo. Y se puede ver que en realidad no tuve que hacer ningún cambio aquí en absoluto. que puedas, por ejemplo, simplemente dejarlo como muertes. Y eso es básicamente lo único que realmente tengo que cambiar nuestro espaciado d porque se puede ver aquí mismo que no están en línea. Y realmente no me gusta eso, así que rápidamente saltaré por dentro a todos estos. A ver, y puedo alinearlos. Entonces, por ejemplo, quizá pueda, veamos, seleccionar esta posición aquí y luego moverla, por ejemplo, 40 píxeles. Para que puedas bajar, seleccionar los nombres comerciales así, luego simplemente colocarlos hasta que te alinees con el texto 1234. A lo mejor. Creo que va a funcionar bien. Y luego haz lo mismo por estos. Entonces aquí, aquí, aquí, y aquí, veamos si podemos alinearlos. Podemos, lo cual es fantástico. Lo trasladaron aquí. 12, tal vez. Creo que eso está bien y va a funcionar bastante bien. Cuando en realidad empiezas a ser cada vez más pequeño, que puedes hacer es dejar esto, puedes dejar esto, puedes dejar esto. Pero para este sencillo uso iconos porque están mostrando a los usuarios lo que han seleccionado. Por lo que voy a mostrar eso en la siguiente sección del curso. Pero por ahora, para este video, creo que ya terminamos. Creo que esto se ve realmente bien. Entonces déjenme hacer el adelanto final para ustedes chicos. Por lo que lechería Howard, creo que esto se ve muy bien. Creo que esto se ve realmente coherente. Y realmente muestra lo que puedes hacer cuando estás usando este diseño inteligente para investigar, por ejemplo. Entonces creo que esto se ve bien. Y lo último que voy a cambiar es esto de aquí. En realidad no me gusta. Entonces tal vez pueda mover este texto sólo un poquito aquí mismo. Por ejemplo. O quizá incluso podamos cortar esto. Entonces déjame mostrarte eso. Entonces en lugar de 2020, simplemente puedo mostrarme a lloriquear así para darme suficiente espacio. Por lo que obviamente la gente va a saber qué es esto. Entonces, empecemos con la selección de estos. Por lo que una vez más, use estos nombres comerciales. Al igual que no seleccionamos y este. Entonces hagámoslo una vez más. Así. Asegúrate de alinearlos así. Lo posicionó aquí, 123, así que tal vez 30 píxeles, eso está bien. Y ahora todos estos se posicionan correctamente y todos están en línea. Entonces me gusta mucho cómo se ve eso. Entonces eso es básicamente todo para este video. En el siguiente video, cerramos todas estas carpetas hacia abajo para mantener las cosas consistentes. En el siguiente video, vamos a saltar y pasar a esta sección de dispositivos de gran tamaño. Te voy a mostrar cómo podemos adaptar aún más esto obviamente. Y quizá necesitemos ir un poco más en altura, pero vamos a ver qué va a pasar una vez que empecemos a escalar todos estos hacia abajo. Entonces te veré ahí. 61. Diseño responsivo 6: De acuerdo, pasemos ahora a este. Así que una vez más, Control D duplicó, todo saltando justo aquí a la parte superior Control C, y saltando justo aquí y borrar de aquí en adelante el control V, así. Y ahora sigamos adelante y adaptemos un poco más. Entonces lo que voy a hacer es antes que nada, vamos a reducir el tamaño, así que 10-24. Hagámoslo primero. Por lo que 1024. Ahora lo siguiente es adaptar obviamente estos. Por lo que 123041, Buda enseñó abogado 41. Y estamos 2182 allá abajo. Entonces es o 21822082 y este va a ser 3041. Entonces veamos, 30412182304121 H2, 30412182. Derek, cómo es 1230 cuarenta y uno veintiuno ochenta y dos. Eso está bien. Entonces lo que podemos hacer aquí mismo son básicamente dos cosas. Lo que puedes hacer es posicionar esta sección de Ayuda debajo estas secciones y hacer todo aquí mismo área desplazable, que en realidad estoy pensando en hacer. Entonces básicamente vamos a dejar este texto de arriba y empecemos desde arriba. Entonces voy a posicionar esta URL aquí mismo. Voy a dejar la ley, mientras que lo es, voy a dejar esto tal como está. Voy a mover un poco este texto hasta aquí. Entonces lo que voy a hacer es posicionar esto aquí, asegura de AM a 46 de ancho, así. Y voy a asegurarme de que estoy haciendo lo mismo aquí. También voy a mover mi tarjeta y un poco, así 12, sólo para darnos un poco más de espacio aquí. Entonces eso está bien. Bueno que podemos hacer es mover esta sección de Ayuda. Entonces lo voy a extender todo el camino hasta aquí. Y veamos, asegúrate de que nuestro círculo sea algo así como, no sé, 300. Con 300, quizá podamos posicionarlo aquí. Podemos posicionar, distribuir aquí mismo. Edita fácilmente tu información. Podemos mover esto aquí abajo. Podemos posicionar esto para estar en una línea de texto. Pero primero tenemos que ampliarlo a, veamos aquí mismo. Una línea, mentira muerta, de Cotard. Y vamos a ver, podemos posicionar esto aquí mismo. Entonces veamos dónde estamos. Estamos a los 20, estamos a los 35. Entonces veamos 123420. Podemos hacer 20 aquí, así 121234. Por lo que podemos cortar en este punto. Entonces hagámoslo. Voy a asegurarme de seleccionar estos dos. Lo colocó abajo así. Y luego veamos, esta misa puede quedarse donde está. Puedo mover esto así llamado aquí. Puedo mover esto aquí, y eso es básicamente todo. Para este apartado en particular. Eso está bien. Ahora lo que voy a hacer es pasar en realidad a estas otras secciones. Entonces, ocultemos esto. Tus tarjetas. ¿ Qué es esta pestaña de Ayuda? O alguna razón en movido hacia arriba vería por qué está cortando. Entonces la brecha de masas del elemento, necesitamos ajustarnos a mezquita para escuchar y eso está bien. Ahora está bien. Y déjame organizar un poco las cosas. Entonces aquí tenemos el nav top on the morbid to the top on Bruce Lee side debar va a ir después de eso. El texto va a ir después de eso. Vas a tener nuestra cuenta principal después de la muerte, tus tarjetas después de eso. Ahora vienen las pestañas. Vamos a tener unas últimas transacciones y todos los gastos. Ocultemos rápidamente todos los gastos. Últimas transacciones puedo mostrar punto's. Entonces veamos dónde estamos justo aquí. Por lo que estamos en 40 mesure. Estamos a los 40 aquí también. Por lo que 1234, voy a tener 40 aquí también. ¿ Haré esto? Asegúrate de que estoy alineado a la izquierda, asegúrate de ampliar esto hasta aquí. Dan, lo que voy a hacer es saltar rápidamente dentro y organizarlos un poco mejor. Porque ahora tengo mucho más espacio con el que trabajar. Entonces vamos a ver, empecemos con nuestras etiquetas. Al igual que esto. Etiqueta de comida. Asegúrate de estar alineado así. No hay necesidad de espaciado. Por lo que vamos a dejarlo como el R. Seleccione todos estos así. Y no seleccioné el número cinco por alguna razón. Entonces tengo que hacerlo en esa una vez más. Entonces déjame seleccionar mi comida, utilidades y cerrar por suciedad, los alineó. Ahora está bien. Ahora volvamos a las marcas. Mi papá. Ahora está bien. Y como dije, no ajustaré nada. Simplemente dejaré todo tal como está. Y finalmente, ocultaré esto, traeré esto de vuelta así. Colóquelo aquí. Asegúrate de que se expanda todo el camino hasta aquí. Voy a saltar aquí mismo. Asegúrate de que todos estos sean seleccionados así. Y para ahorrar un poco de espacio, lo que voy a hacer es posicionarlos uno al lado del otro. Entonces vayamos de un desconocido, hay que mirarlo porque las mezquitas son un ciervo. C, así, 1234 por ejemplo. Y luego lo voy a posicionar aquí. Permítanme realmente traer todo este año. Oculta mi pestaña de salud solo para que pueda verlo un poco mejor. Entonces lo que podemos hacer es mover todos estos a escuchar como div que somos, y eso es todo. Y en lugar de éste se movió un gráfico. Al igual que necesitamos un auto pagos también. 40, así 1234 así. Y yo sólo voy a organizar estos un poco mejor. Entonces, por ejemplo, algo así como induce debería funcionar, mensualmente debería funcionar también. Y ahí está. Ahí lo tenemos. A lo mejor podemos incluso posicionar hace para vencer a 20. Veamos dónde estamos en la cima. Sí, posicionemos todo para ser 20, así en dos. Y eso es básicamente todo. Puedes asegurarte de que has seleccionado esto. O podemos posicionar todo esto al centro. Todo depende realmente de ti y de lo que quieras hacer con él. Entonces hagámoslo realmente. Hagamos esto así. Y asegurémonos de que esto esté en el centro. Vamos a ver como suelto. Entonces en el centro de nuestro círculo, y ahora simplemente podemos cerrar nuestro fondo BG. Entonces vamos a ver, estamos en algo así como, no lo sé. A ver Control D Así puedo duplicarlo. O ejemplo para escuchar uno más. Entonces 37, Watson, puedo mover esto a aquí así y simplemente asegurarme de que cierro mi original a esta nueva. Yo lo quito. Y ahí lo tenemos. Nuestros gastos están terminados. Por lo que trae de vuelta para ayudar a atreverse a traer de vuelta las últimas transacciones. Y lo que voy a hacer es obviamente posicionar a todos esos en un grupo. Por lo que cada pieza de contenido que ves aquí mismo está dentro de un grupo. Llámenlo contenido así. Y lo que voy a hacer es mover todos los gastos hasta abajo así. Entonces es posicionarlo y veamos dónde estamos. Entonces 1234, así. Y vaca lechera ella, si quieres, puedes crear una pila. Y luego puedes cambiar estos elementos. Quién puede posicionar esto aquí y esto aquí mismo si quieres. No voy a hacer en deuda. Entonces puedes usar una pila, pero lo que en realidad quiero usar es un desplazamiento vertical. Entonces, como puedes ver, es lo suficientemente inteligente como para cortarlo ahí mismo. Entonces si hago clic para previsualizar, y esto es lo que vamos a conseguir. Por lo que obviamente puedes hacer clic en estos elementos del menú y esta altura obviamente se mantiene igual. Pero ahora puedes empezar a desplazarte por esta zona y puedes ver bastante bien que corta justo aquí, lo cual es fantástico si usamos la versión animada de esto. Por lo que realmente puede desplazarse dentro de este grupo también, dentro de grupo desplazable. Por lo que puedes tener grupos dentro de los grupos que se desplazan. Pero para esta necesidad y propósito en particular, creo que esto realmente se ve fantástico. También puedes extender esto para que no tengas este extraño problema una vez que realmente comiences a desplazarte. Por lo que se puede ver el color aquí mismo en lugar de justo aquí. Pero en realidad no le importa porque tenemos este panel superior justo aquí que se mantiene igual. Por lo que realmente me gusta cómo se está poniendo esto. Y eso es básicamente todo para este video. En el siguiente video, vamos a empezar con la versión de tablet. Y básicamente se puede empezar ya visto a dónde va esto. Simplemente vamos a alinear todos estos elementos a nuestra cuadrícula. Y te voy a mostrar cómo puedes crear una navegación tappable y dónde puedes ponerla. Entonces te veré ahí. 62. Diseño Responsive 7: Empecemos ahora a trabajar en una versión de tablet. Una vez más, voy a duplicar rápidamente esto. Entonces Control D. Y vamos a darle un nombre a esto. Entonces haga doble clic en el interior. Perdón. Simplemente eliminaré y este control de información V para pegarlo así. Y vamos a ver. Por lo que estamos en 76 ocho. Entonces sigamos adelante y 768. Estamos en ocho columnas, como dat. Por lo que ocho columnas. Y veamos qué tenemos justo aquí. Entonces primero lo primero tenemos 296042 para ambos. Entonces ahora no necesitamos esto. Entonces déjame recordarme una vez más. Por lo que 296042. Por lo que dos corriendo en 6042. Eso está bien. Por lo que rebaño lechero. Y lo que voy a hacer aquí mismo es usar en realidad las mismas opciones que tengo en la parte superior. Entonces déjame ajustar rápidamente mi top ahora igual. Entonces mi papá, lo que puedo hacer es quizá cargar a este tipo aquí mismo. A lo mejor puedo mostrar todo esto aquí mismo. Veamos qué podemos hacer con nuestra navegación. Básicamente, lo que quería hacer se expande todo el camino hacia abajo y luego mostrar toda esta información desde la barra lateral misma. Así que vamos rápidamente, pasemos rápidamente a la barra lateral dentro así. Y veamos qué podemos hacer. Quizás podamos usar lo que usamos aquí mismo. Entonces puedo hacer doble clic aquí mismo, controlar C. Así puedo usar este ícono exacto del menú. Salta aquí mismo, controla v, posiciónala al centro aquí, asegura de que estemos a la izquierda, lo siento, a la derecha alineados aquí. Hábito lácteo. Y ahora trabajemos en nuestra navegación. Algunos golpearían control D. Voy a ampliar esto y fondo uno. Entonces todo el camino hacia abajo así. Y luego saltaré dentro de mi Sidebar y te permite cargar todos mis artículos vacío. Por lo que golpeó 0. Perdón, lo escondo aquí, así que les mostraré aquí mismo. Así que simplemente haga clic en estos iconos del globo ocular, lo cual está todo bien. Al igual que en deuda. Lo que también voy a hacer es que vamos a dejar esto tal como está. Vamos a quitar el selector porque no lo necesitamos por el momento para esta pantalla en particular. Entonces vamos a quitar el selector. Y también voy a cambiar algunos colores de estos artículos. Simplemente deja este primero en su lugar porque queremos mostrar que estamos en un tablero después de todo, pero solo incluye colores un poco más oscuros a estos otros, solo para que podamos verlos un poco mejor. Entonces sigamos ahora y hagamos eso. Simplemente voy a dar clic en cada uno de ellos. Y voy a aplicar este color. Sólo para que los podamos ver un poco mejor porque se puede ver, sobre todo aquí con esta app ayudada, no se pueden ver realmente todos tan bien. Por lo que simplemente se lo voy a aplicar en este color a ellos. Al igual que así. Y para demostrar que esto está seleccionado, voy a aplicar este color sólo para diferenciar ajustados un poco para que los puedas ver un poco mejor. Por lo que ahí lo tenemos. Esto es una deuda. Lo que voy a hacer a continuación es moverme en esto o aquí mismo, por ejemplo. Y c, puedo escalarlo con mis propios avatares. A ver eso. 1234, por ejemplo. Y puedo moverlo y la barra lateral todo el camino hacia abajo. A ver, 1234 muertos. Y obviamente puedo mover mi logout hasta 1234. Entonces así, me gusta cómo se ve eso. Por fin movió a Michael J. Egos, asegúrate de que esté alineado a la izquierda, asegúrate de que esté centrado, derecho a atreverse. Y manadas lecheras. Creo que eso realmente se ve muy bien. Agrandémoslo para ver cómo se ve, y eso está bien. Lo que vamos a hacer es básicamente exactamente lo mismo que hicimos anteriormente. Entonces vamos a crear un punto de tapping aquí mismo donde nuestras noticias de ícono del menú principal. Entonces llamémoslo así. Menú Principal, Punto de Tab. Así. Colócala debajo del menú principal o quita el borde y el color, y eso es todo. Y entonces lo que voy a hacer es básicamente decir como lo hacía antes. Por lo que voy a duplicar este. Entonces Control D, lo posicionaré encima de todas estas. Así que así. Eso está bien. Entonces vamos a ver. Yo lo puedo bajar solo un poquito también aquí. O no, dejémoslo todo así. Y luego selecciónalos a todos así. Veamos dónde estamos. Eso es todo. Hit Shift Control M, Así puedo crear una máscara como deuda. Y voy a mover todo eso aquí abajo porque este es mi top nav VG después de todo indica este fondo por completo. Entonces, finalmente, y pongamos a prueba esta mezquita, y llevemos esto hasta aquí. Eso está bien. Bueno, vamos a plantear esto también. Y eso está bien. O reducir su visibilidad a esto. Y ahora por fin, sigamos adelante y juguemos con nuestro contenido. Por lo que puedo dar clic aquí para eliminarlo de una sección de disco. Entonces todavía lo voy a llamar contenido, así que está bien. Pero también puedo hacer es ampliar esto todo el camino hasta aquí para que pueda ver lo que estoy haciendo. Y lo que puedo hacer es básicamente ajustar todos estos para que quepan para que podamos ponerlos dentro de la pila. Ponlos encima uno del otro de un ampliar esto para ir a aquí. Si bien amplió esto para ir a aquí también. Voy a mover mi tarjeta para escuchar, por ejemplo, veamos dónde estamos. Pequeño. 23, veamos 1234, porque obviamente tenemos mucho más espacio ahora. Puedo posicionar estos para estar centrados y puedo asegurarme de que estén centrados tarde, Dennis. Y puedo posicionarlos para que escuchen. Y así ahora se ven un poco diferentes. Puedo acercar mucho más el texto. Mismo líquido a la paginación. Entonces veamos 1234 tal vez en algún lugar como atreve. En realidad no me gusta esta sección. Entonces quizá podamos ir a ver, con éste, para, con éste. Veamos cómo se verá eso. Por lo que para posición o tarjeta hasta aquí. A ver, quizá podamos hacer algunos cambios a este texto. Entonces como este 1212. Y vamos a copiar esta tarjeta de texto hasta colocarla aquí en, vamos a ver, 20 distend. Pondré mi tarjeta en el centro o lo puedes hacer es asegurarte de que esto y esto estén en el centro. Esto es 20 abajo. Asegúrate de que esté en el centro también. Entonces vamos a posicionarlo aquí. Sí, ampliaré un poco mis tarjetas BGN hacia abajo. Posición en aquí. Y vamos a ver. Entonces aquí mismo estamos a los 20. Y vamos a ver, podemos dar esto para estar aquí mismo. Entonces por eso. Y por último, posicionaré esto aquí mismo. A ver. Por lo que en realidad necesitaré moverlos fuera de mi pila. Entonces voy a quitar esta pila. Y luego o posicionar disco justo aquí, lo siento, seguimos en una pila así que para el contenido. Entonces lo dejaré todo estab por ello. Y después quizá podamos traerlo de vuelta. Así lo haría, me atrevo, voy a desagrupar todos estos posicionamientos hace aquí, así. Porque ahora realmente no necesitamos ningún punto de corte. Simplemente podemos posicionar estos artículos donde deberías estar de todos modos. Entonces al igual que las muertes, podemos llevar todo esto a descentrar. Y tu, vamos a ver, así. ¿ De acuerdo? Y puedo escalar el ancho de mi texto, quizá hasta los bordes, algo así. Traer esto de vuelta Gleick. Por lo tanto, asegúrate de que esto esté centrado. Asegúrate de posicionarlo aquí mismo. Por lo que 12. Y esto está en el centro de nuestra BAG, así. Colócala en un poco. Ver así. Y eso está bien. Posicionar nuestra paginación al centro. Veamos qué teníamos aquí mismo. Entonces tuvimos que estar 28 abajo. Entonces esto es demasiado 12312, así que 28, así que es exactamente la misma posición que esta. Bajemos esto un poco. Por lo que 1234 tal vez, y rápidamente puedo seguir adelante y organizar estos elementos. Veamos dónde está. Así que circulo. Y hasta podemos quitarle esta máscara porque ya no la necesitamos. A lo mejor podemos hacer que estos tres llenen nuestro espacio porque realmente creo que es demasiado. A veces con estos elementos se puede si se quiere, pero yo lo creo, va a funcionar igual de bien así. Entonces estamos a los 30. Voy a moverlos diez abajo así. Y vamos a ver, van a ser 40 así. Voy a posicionar todos estos así. Entonces todo se ve bien. Sólo necesitamos reorganizar las cosas sólo un poquito. Por lo que 35 alertas posicionaron estas para ser, veamos, 20. Al igual que esto. Y veamos que ahora puedo saltar y hacer cambios a todos estos. Entonces, empecemos con los números en realidad. Por lo que puedo poner los números para estar en 20 también, todo el camino hasta aquí. Entonces me gusta este 12. Entonces lo que puedo hacer es alinear mis etiquetas así. Asegúrate de que estén alineados y puedan posicionarlos. Por ejemplo, C 123, eso está bien. Ahora alineemos nuestros negocios y veamos a dónde pueden ir. Yo Deberían estar alineados y ver, por ejemplo, 123, eso está bien. Y creo que hay bastante espacio para respirar, así que todo eso se ve bien. Una cosa más es con la carga más. Por lo que en realidad reorganizarlo un poco. Entonces icono de flecha y ver 20 píxeles y asegúrate de que esté en el centro así. Entonces ahora está bien. Y solo quiero comprobar si cometí un error en el anterior también. Donde está, aquí está. Nosotros hacemos esto. Así que mira este nodo, está bien. Se puede ver que la flecha está justo aquí. Pero sí cometí un error aquí. Entonces organicemos esto un poco más tarde también. Eso está bien. Al igual y asegúrate de que esté en el centro así. Dirección. Tan sabido que eso está terminado. Ahora volvamos a la sección de discos. Y por último, trabajemos en este último. Entonces estamos a los 40. Al igual que así. Y me voy a ajustar para nuestro nuevo diseño de cuadrícula así. En realidad puedo dejarlos así. O puedo tener mi propio diseño separado, que en realidad voy a hacer. Entonces vamos a ver, estamos a los 20. Ahora podemos organizar los D para que sean así. Entonces 20, veamos lambdas. Entonces 20, puedo ampliar esto para bajar. Esto puede ser a las 20 yo dat. Y veamos dónde estamos aquí. Entonces 22, vamos a seleccionar todos estos, 1-2. Voy a bajar esto 12, así que 20, y puedo traerlo todo. Entonces lo que puedo hacer es asegurarme de que esto esté centrado. Puedo seleccionar todos estos, asegurarme de que estén alineados a la izquierda. Están centrados dentro del círculo y de la obra en sí. A lo mejor para escuchar, y eso es básicamente todo. Ya hemos completado esto, el estado de nuestro diseño apenas más con un poco así. Y eso es básicamente todo para la versión de tablet. Sólo voy a cortar este punto a algún lugar por aquí. A ver 1234. Entonces eso es perfecto. Y lo que podemos hacer es golpear vista previa solo para ver dónde estamos por la turbulencia, obviamente se puede desplazar hacia abajo. Entonces creo que esta información se ve mucho más ordenada y mucho más mejor organizada así. Entonces tal vez podamos incluso eliminar esta información porque muestra la validación aquí mismo. Entonces solo va a decir tus tarjetas y creo que eso va a estar bien. Esto también está bien. Esto se ve genial. Entonces vamos ahora rápidamente a eso. Entonces obtiene esta información y eso está bien. Lo desagruparé porque ya no lo necesitamos como texto y grupo. Y eso es básicamente lo único que nos queda hacer ahora mismo es crear esta navegación. Entonces hagámoslo. Puedo, por ejemplo, llamar a esto tabletas top ahora. O incluso puedo llamarlo mobile top lab, sin embargo, así. Y veamos qué podemos hacer con esto. Para que podamos presionar Tecla Control. Podemos ir al estado tabulador. Dentro de este estado superior, vamos a ampliar nuestra mezquita donde está, aquí está. Entonces lo voy a ampliar todo el camino hasta este punto de corte aquí. Para que pueda acercarme un poco más. Al igual que así. Eso está todo bien. También voy a hacer lo mismo para este top ahora Vg, así que va a estar en 100. Se va a todo el camino hasta aquí así. Y por último, nuestro ícono del menú principal va a estar en su estado de tabulador. Entonces lo adeuda. Ahora sigamos adelante y rápidamente lo prototipemos y veamos qué tenemos hasta ahora. Por lo que voy a localizar mi Punto de Tab de Menú Principal de un click en anuncios. Escogeré Auto animate. Elige el estado está en fuera 0.6 segundos porque eso es lo que usamos la hora anterior. Y luego voy a ir al estado de tabulador, abrir principal Minitab point click. Iré al estado por defecto y veamos rápidamente qué tenemos. Entonces volvamos a nuestro estado por defecto. Golpear vista previa, agrandar este clic aquí. Entra, lo tenemos. Tenemos esta bonita animación mostrándonos todo lo que necesitamos ver. Y realmente creo que se ve bien porque en los dashboards nos muestran que está seleccionado. Todos estos están grisáceos. Ya puedes ver que eres tú, Michael Jacobs. Incluso puedes posicionar descrito aquí si quieres. Pero creo que está bien. Todavía tenemos esta bonita y emisión porque usamos el mismo ícono. Creo que se ve genial. Y realmente he tomado delta, este diseño salió a ser realmente agradable y muy contento con él. Y eso es básicamente todo para este video. En el siguiente video, en el último video sobre diseño responsive, vamos a trabajar en el tamaño móvil. Y básicamente lo que vamos a hacer es usar exactamente la misma configuración. Sólo vamos a hacer algunos cambios. Para que veas cómo se va a ver todo eso. Entonces te veré ahí. 63. Diseño responsivo 8: Ahora sigamos adelante y terminemos nuestro diseño receptivo para el tablero. Y quiero disculparme de antemano por los empleados en segundo plano, pero no puedo hacer nada al respecto es solo unos vecinos ruidosos que conocen algún trabajo. Por lo que lo último que tenemos que hacer es volver a dar click aquí mismo, controlar D para duplicar este dartboard, haga doble clic aquí mismo. Copiar este texto. Voy a saltar aquí mismo y hacer doble clic y eliminaré toda esta información y simplemente controlaré V para pegar en ese texto. Nuevamente, ahora las deudas concluidas, lo que tenemos que hacer es obviamente reducir el tamaño de nuestra junta para decidir o 375. Y hagámoslo rápidamente agrega o 375 como así. Vamos a usar para columnas así. Y veamos, tenemos 306120, así que usemos esos valores. Entonces 306120, hagámoslo de nuevo a principios de 6122. Y ahí lo tienes. De verdad no sé por qué Adobe XD hace que estos pesos mantengan Y sigue trayendo arriba estos Berlioz, por qué queremos cambiar la primera vez, pero está haciendo esta compleja estera de fondo. Quizás por esa razón no lo haga. Adelante ahora y en primer lugar, lidiar con nuestra navegación. Entonces para hacer eso, voy a tener que bajar todos estos. Porque si empiezo a bajar mi logo, pero puedes ver cómo se ve eso. Por lo que seguiré adelante y arrastraré y soltaré mi logo dentro de esta manera. Y lo posicionaré aquí mismo. Entonces este es mi logo PNG y básicamente estoy haciendo lo mismo que antes cuando te muestro eso. Sí. Previamente. Entonces sigamos adelante y nos escondamos. Y esto tal vez bajarlo a algo como esto tal vez. Y lo que también puedo hacer es saltar dentro de nuestra navegación móvil aquí mismo. Y puedo copiar mi logo de cure, y puedo copiar esto de hero. Pero porque ya creamos eso aquí, no nos molestemos. En realidad sólo tomemos el logo porque es lo mismo. Entonces saltaré aquí mismo. Usaré el logo y veamos icono del menú principal, control soo. Volvamos a saltar a aquí. Salta dentro de Control V. Los posicionaré en su lugar así. Voy a borrar este. Eliminaré mi icono del menú principal, Menú principal, punto de toque. Veamos dónde está. Entonces vamos a posicionarlo aquí. Por ejemplo. Vamos a revisar el color solo para que pueda dar click en él por deuda y lo incrementaré a algo como esto. Creo que está bien. Y vamos a ver. Top ahorita BG es este punto de uno. Ahora BG es disciplina sólidos traen a ambos de esta manera. Posicionemos nuestro logotipo y nuestro icono de navegación, algo así. Y simplemente puedo seleccionar esos dos. Selecciona este y asegúrate de que todos estén en el centro. Así. Me aseguraré de que mi icono de menú esté alineado con mi logotipo esté alineado, que es. Y eso está bien. Dot ahora BG y vamos ahora a tratar con máscara de alquitrán. Entonces habla ahora BG, lo traeré todo el camino hasta aquí, como deuda. Y ahora tratemos con toda esa otra información. Entonces vamos a ver, tenemos esta barra lateral. Y como puedes ver, la barra lateral funciona bien. Entonces todo funciona bien. Avatar está ahí. Michael Jacobs es hallazgo top de Derrida ahora BG. Entonces si lo descubro, como pueden ver, podemos ver claramente toda esa información, lo cual está bien. Simplemente tratemos con top ahora BG y creo que va a funcionar bastante bien. Entonces lo que puedo hacer en este punto es realmente copiar toda esta información para obtener Control C. Puedo ir al estado de tabulador, saltar adentro, golpear Control V. Yo eliminaría esto, esto, esto, esto, esto, esto, esto, y solo dejar esto en. Al igual que así. Voy a cambiar mi icono de menú principal para tocar así, porque ya lo tocamos. Ampliaré mi máscara para que pueda ir todo el camino hasta aquí, así. Por lo que cubre la totalidad de esto. Lo que también podemos hacer es elegir toda esta información y empujar hacia la izquierda. Dos son cuadrícula por lo que se puede alinear a nuestra rejilla muy bien así. No sé por qué Al-Azhar no está alineado como le gustaría la duda. Y quizá pueda alinear mi texto a un punto discreto, que está bien. Y eso es básicamente todo. Ese es nuestro estado de tabulador. Es decir volver al estado por defecto. Y lo que quiero hacer es ajustar eso aquí también. Entonces déjame mover mi barra lateral aquí a la cuadrícula. Déjame mover mi avatar. Y Michael Jacobs debería ir justo aquí. Hábito lácteo. Entonces ahora que todo eso está alineado y funcionando bien, ahora es lidiar con nuestro contenido. Entonces, en primer lugar, podemos alinear nuestro contenido así. Y como puedes ver, puedes saltar directamente por dentro y lidiar con estos porque realmente son los fáciles. Tarjeta. Realmente no queda nada que cambiar. Pero primero saltemos por dentro y nos ocupemos de nuestros textos. Entonces si te llevo de vuelta al panel de nuestro sitio web, lo siento, sitio web responsive. Entonces aquí estamos en 24 pernos y este texto es de 16 irregulares. Entonces, ahora hagamos lo mismo aquí. Por lo que estamos a 24 voltios para este. Entonces, vamos a encontrarlo aquí. Darío lo. Y esto va a ser 16 irregulares. Ahí lo tienes. Ahora los adeudos concluyeron. No creo que tenga que hacer más cambios porque corta el texto justo en la línea. Pero si nosotros si fuera para ir más allá, entonces vas a envolver el texto, por ejemplo, así para que podamos poner diciembre y abajo en esta línea. Pero creo que está bien para nuestro caso por ahora. Ahora lidiemos con el espaciado realmente rápido. Entonces si te llevo de vuelta a aquí, si recuerdo correctamente, eran 80. Pero vamos a revisar. Y Yup, son 80 por todas partes. Entonces hagamos la misma estratagema a ésta. Entonces voy a seleccionar mi contenido y vamos a ver dónde estamos. Estamos en 50, por lo que 123, estamos en 80. Voy a posicionar esto serán 35 pero 40, así. Esto es 40 de ella también. Y ahora vamos a ocuparnos de nuestro contenido. Ahora lo que voy a hacer en primer lugar es simplemente extender esta tarjeta. Entonces aquí no voy a cambiar el contenido y no voy a lidiar con ninguna cosa vieja muerta. Lo que voy a hacer a continuación es usar todos esos. Entonces vamos a ver, esto son guardias. Usa estos dos en la parte inferior. Y también voy a ampliar mi pizarra para que pueda ir todo el camino hacia abajo. Y solo recuerda, este es tu punto de desplazamiento o estás por encima del viento de falla por ejemplo. Entonces sólo va a ir todo el camino hacia abajo. Entonces veamos, tal vez este 80 sí funciona, tal vez 4234, porque creo que es mucho mejor ahora porque tenemos el mismo espaciado entre todas estas tarjetas. Y si comprobamos aquí mismo tenemos 40, lo cual es un gran. Y ahora sigamos adelante rápidamente y movamos todos estos hacia abajo así. Voy a mover mi pestaña de ayuda para estar alineado aquí. A ver, estamos a los 40, está bien. Simplemente ajústate en esto así y no tienes que hacer nada más. Eso también es genial. Ahora lo que vamos a hacer por las transacciones y por esto es que tenemos que planear un nuevo diseño porque obviamente esto no va a funcionar así. Por lo que no podemos cambiarlo, no podemos editarlo en esta etapa. Entonces, lo que tenemos que hacer es simplemente ajustar cómo se verán todas estas cosas. Entonces lo que voy a hacer primero es lidiar con este porque es mucho más fácil. Entonces voy a saltar dentro. Todos los gastos belleza. Lo ampliaré para escuchar de un escritorio de posición para escuchar. Y lo que puedo hacer es simplemente usar esto y esto, posicionarlo como así posición aversión. Por lo que posicionaré mi gráfico aquí mismo en el centro. Y vamos a ver, ahora puedo ocuparme de estos para poder asegurarme de que esto esté en el centro. Y puedo usar mi herramienta de rectángulo y posicionarla de aquí a aquí. Úsalo y este texto para asegurarte de que esté en un centro. Entonces posiciona mi rectángulo de aquí a aquí. Por lo que desde este borde hasta este borde, asegura de que estos dos estén en un centro como este. Y luego me quité el rectángulo. Ahora, lo que puedo hacer con este gráfico es que lo voy a dejar ahí, pero que rápidamente se ocupen de estos. Entonces lo que puedo hacer es básicamente poner dos justo uno al lado del otro. Entonces puedo poner comida, por ejemplo, aquí mismo. Utilidades y dejar ver los pagos de autos pueden ir justo aquí. Por lo que los posiciona para ser, por ejemplo, 40 el uno del otro. Veamos dónde estamos. Y un escritorio de un solo para estropear mi espaciado así. Por lo que 1234. Y se puede posicionar necesita estar en el centro. Entonces puedo posicionarme cerca aquí y la comida justo aquí sólo para que tengamos. Aproximadamente el mismo espaciado. Entonces voy a juntar a estos dos así. Y luego asegúrate de hacer 1234, así. Y los lácteos lo tienen. Voy a posicionarlos 40 abajo. Entonces a 1234, voy a cerrar esto aquí mismo. Puedes usar guías, pero me pareció esto, esto mucho más simple, mucho más rápido, y puedo terminar con él y más una. Por lo que todos los gastos se completan. Ahora viene la parte más complicada básicamente, porque aún quieres presentar toda esta información a tus usuarios. Todavía quieres decirles dónde gastaron ese dinero. Pero solo para recordar, este es tu tablero básico. Entonces si te llevo todo el camino hasta aquí, a nuestro menú, al estado de profundidad, puedes ver que estamos en el tablero. Por lo que estamos en el tablero básico mostrando solo la información básica para obtener información adicional sobre sus transacciones. Vas a ir al tap de transacciones. Entonces vas a tocar que la navegación del menú, vas a ir a la pestaña de transacciones y luego vas a poder acceder a tu transacción y básicamente aplicarla a lo que quieras. Entonces cómo vamos a hacer esto es que vamos a hacer algunos cambios en nuestro diseño aquí mismo. Entonces lo primero es lo primero, voy a saltar dentro y extender esto todo el camino hacia abajo, así. Voy a asegurarme de posicionar esto aquí mismo así. Y lo que voy a hacer es descifrar un layout que va a ser el mejor para estas cosas. Entonces voy a mover esto aquí, asegurarme de que esté en un centro, 1234. Creo que vamos a tener suficiente espacio, pero si no, lo vamos a tratar más adelante. Entonces, empecemos ahora. A ver. Podemos, por ejemplo, elegir esto come a los 18. Para que podamos ajustar papá. Pero no voy a hacer eso. Simplemente voy a mover todos estos hacia abajo. Entonces me da suficiente espacio. Voy a mover mi precio así. Voy a asegurarme de que esté alineado. Dan 20. A ver, esto es a los 20, lo cual está bien. Puedo posicionar esto para estar aquí abajo. Asegúrate de que sean diez. Y puedo, por ejemplo, veamos qué puedo hacer aquí mismo. A lo mejor puedo posicionar esto para alinear con esto y alinear mi comida así y hábito lácteo. Ahora ya hemos completado este apartado. Entonces ahora sigamos adelante y tratemos con otras secciones. Obviamente puedes explorarlo con estos diseños tanto como quieras. Pero creo que éste está bien para nuestros propósitos. Entonces diez, voy a posicionarme cerca de los 20. Entonces voy a bajar el precio así y vamos a ver 12. Porque obviamente estas empresas pueden cortarse. Entonces, por ejemplo, tal vez solo pueda ver zara, tal vez pueda simplemente decir Starbucks. Cuando no tienes suficiente espacio y vas aún más abajo con tu, con tu talla. Entonces vamos con. Voy a mover esto una vez más va a ser diez abajo, así. Voy a poner dos utilidades aquí, asegúrate de que sean 21. Más razón estoy poniendo el precio y abajo y el nombre de D, Así utilidades y demás arriba es porque si quiero, por ejemplo, agregar más a esto. Entonces por ejemplo, imaginemos que este gasto no fue de 270.73 dólares, sino digamos por 1000 o 20 mil dólares o lo que sea, entonces vamos a ampliar este precio a la izquierda y reducirlo a la izquierda. Espero que eso tenga sentido. Por lo que una vez más, en este caso, en lugar de 0 y guardo, sólo será Zara. Por lo que nos da más espacio y puede ir automáticamente. Por lo que codifica, puede cortar automáticamente este nombre mientras expande este precio a la izquierda. Ojalá no tuviera sentido. Por último, vamos a ocuparnos de estos otros. Entonces voy a posicionar esto y abajo hasta aquí y asegurarme de que sea a las diez. Al igual que esto. Voy a ver más de esto aquí mismo, así que 12. Y se puede ver claramente por qué hice esto, para que no corte con el nombre aquí mismo. Posicionemos rápidamente esto para estar aquí. Asegúrate de que esté ajustado a 20. Y vamos a cerrar estos. Asegúrate de que esto es a los 40. Voy a mover esto en el camino hacia aquí para que nos dé suficiente espacio. Posicionado está aquí, así, y asegúrate de que la comida esté alineada aquí. Y una vez más, si no quieres que esto sea así, puedo posicionarme rápidamente debido para poder explicar. Lo que también puedes hacer es cambiar estos lugares. Entonces lo que puedes hacer es en lugar de posicionar los pagos de autos, lo que puedes hacer, por ejemplo, es poner el logo de pagos de autos a continuación, lo siento, icono de pagos de autos junto a este nombre. Por lo que al lado de Mercedes Benz por ejemplo. Y se puede subir el precio camino de la deuda. Vas a poder tener mucho más espacio con el que jugar. Por lo que puedes posicionar el precio aquí. En lugar de pagos de automóviles, este espacio va a estar vacío. Entonces, por mucho tiempo que sea el nombre de la empresa, puede expandirse a la derecha. Si bien esta ley, este icono puede ir junto al nombre de la empresa real. Por lo que también puedes hacer eso. También puedes codificar por colores para corresponderte con eso. Por lo que podemos sólo para mostrarte eso rápidamente, déjame seguir adelante rápidamente y terminar este diseño. Para que puedas elegir cómo quieres que se vea este diseño. Por lo que T2. Y déjame posicionar así mi precio. Este es un 20. Déjenme más estos dos. Por lo que 2341234. Voy a elegir esto se mueve a aquí. Así. Lo que estoy haciendo en este momento es simplemente usar exactamente la misma información como hacemos a lo largo de nuestro diseño. Simplemente ya estoy ordenando de manera diferente. Pero lo que puedes hacer es mirar y darte un ejemplo para la comida, digamos. Entonces lo que podemos hacer es simplemente posicionar esto aquí. Usa la etiqueta de comida, pero borra y texto de comida. Por lo que nos acaba de quedar con el ícono básicamente. Y puedes posicionar ese ícono aquí. Y movió un nombre como éste, por ejemplo. Después selecciona estas herramientas, asegúrate de que estén en el centro. Y ahora lo que podemos hacer es simplemente aplicar este mismo color a nuestro texto. Al igual que esto. Y rebaño lechero. Este diseño es mucho más limpio, se ve mucho más bonito. Y lo que también puedes hacer es por ejemplo, cambiar de lugar, vio Starbucks café puede crecer arriba y abajo puede ir por ejemplo hoy y el precio n, cualquier otra cosa que quieras. Pero si encuentras que este diseño es mejor, que en realidad lo hacen vamos a correr con él en realidad. Pero hay que hablar con los desarrolladores sobre esto. Entonces tendrías que exportar estas capas separadas y lo voy a compartir DAT más adelante contigo. Pero primero, completemos los DES. Entonces una transacción, veamos a Claude Stagg y estamos incluyendo todo texto de cargas de trabajo. Voy a asegurarme de que este icono esté alineado con mi texto así. Mi papá deucla a diez, ¿fue a diez? ¿ Aquí? Fue. Y sólo asegúrate de que este texto de Zara sea de este color. Y simplemente posiciona tu precio al alza. Eso está bien. Vamos a ocuparnos de todos estos otros. Por lo que usaré mi etiqueta de utilidades, eliminaré mi texto, posicionaré aquí mi icono de utilidades. Asegúrate de que este texto vaya diez, el precio sube. Este texto va a este color. Y esta capa ya se ve mucho más linda matemática. Como dije, solo quería mostrarles a ustedes cuál es la forma óptima para que los desarrolladores no cambien demasiado. Y de esta manera, el diseño y la experiencia del usuario real va a ser mucho mejor, mucho más limpio. Pero los desarrolladores van a tener tristemente ese trabajo extra, que tendrán que hacer. Y vas a tener el trabajo extra porque vas a exportar estas etiquetas por separado y dispuesto a compartir eso contigo más adelante. Entonces vamos a ocuparnos de la etiqueta de comida y fuimos a quitar el texto. Posición podría icono lambdas, trasladado a aquí. Y centro verde, así. Y por último, vamos a ocuparnos de la ropa y vamos a rematar. Este es I. Necesito mover todo mi icono que use este texto más con diez. Y por último, mueve esto también hacia arriba. Y ahí lo tenemos. Hemos completado nuestro móvil. Para ello y y tablero de instrumentos, pero posicionado es ser 40. Por lo que 1234. Me voy a cerrar el brazo o a atreverme. Y ver 1234. Ahí lo cerraré. Una vez más, puedes usar guías, pero en mi caso, me pareció mucho más sencillo. Yo, esto que debo conseguir es 40 entrañable hábito. Ahora es previsualizar rápidamente esto, ver lo que hemos hecho hasta ahora. Y déjame realmente mostrarte de esta manera. Entonces si toco aquí mismo, tengo que prototiparlo en realidad. Entonces he estado haciendo eso rápidamente. Una vez más, vamos a tocar nuestro logo. Nos va a llevar a, veamos, tabulador de autonomía. Y vamos a, vamos a ver, vamos a ver, vamos a ver qué he hecho. Tan terriblemente fácil. Nota 0.06 segundos, mi papá. Y vayamos al estado tabulador. Su orgullo aquí. Estado por defecto. A ver si hicimos lo que creo que hicimos. A ver, TAP. Yo lo sabía porque tengo que crear el punto de toque para nuestro ícono de menú, ícono. Entonces déjame saltar aquí mismo. Y por eso hay que crear estos aburridos puntos de profundidad. Porque si haces click en el icono como acabas de ver, y déjame mostrarte eso una vez más. Entonces si hago clic en el icono va a animar el icono, no toda la animación del menú. Entonces por eso necesitamos poner tristemente estos puntos de Tab del Menú Principal. Y voy a incluir la plantilla aquí detrás del icono de Menú Principal. Entrar en posición para descentrar. Al igual que esto. Asegúrate de que esté en algún lugar por aquí, lo cual está bien. Dan, sigamos adelante y pinchemos prototipo. Por lo que en el propio punto de tabulación, Haga clic en It. La autonomía está en nuestra ficha 0.06. Y ve a tu estado de tabulador así. Encuéntralo aquí. Y tengo que pegarlo aquí también. Entonces lo mueves a aquí y lo mueves a aquí, justo debajo de mi prototipo de icono, haz clic en él. Punto de toque. Y vamos a ir a Default State. Vamos a comprobarlo y a ver si funciona. Y ahora vamos a golpear la vista previa. Todavía no funciona. Ah, ahí está. Simplemente toma demasiado tiempo por alguna razón. No sé por qué. A lo mejor mi computadora está rezagada. Vamos a comprobarlo una vez más. De acuerdo, entonces nada pasa realmente. Ah, ya veo por qué necesito hacer click en algún lugar fuera. Es mi error. Pero de todos modos, ahí lo tienes. Se puede ver lo bonito que se ve esto. Por lo que tengo que hacer click en algún lugar justo aquí porque si hacemos click en el ícono mismo, animará el ícono mismo. Para que veas cómo funciona eso y puedes ver cómo parece que aún tenemos este bonito efecto de desenfoque. Si crees que es demasiado en este caso, puedes bajarlo por todo este color blanco. Simplemente hace que sea demasiado tal vez. Pero creo que funciona bien. Una cosa más que quiero mostrarles es que aún tenemos esta navegación, por lo que estamos en el estado por defecto. Puedo dar click aquí mismo. Por lo que la posición fija se arrastra porque cuando previsuo y empiezo a desplazarme, se puede ver, no vemos la navegación en la parte superior. Entonces lo que puedes hacer es seleccionar esa zona de navegación. Eso se puede hacer tanto para tablet como para móvil porque se puede ver este es nuestro punto de corte para la tableta. Por lo que voy a dar click Camionetas de posición fija gateando. Yo voy a hacer lo mismo por este. Y creo que no hice eso para el móvil en absoluto. Entonces, vamos a ver. Yo lo puedo hacer por todos ellos. Por lo que esto está arreglado. Esto es fijo. Pero esto no es porque lo cambiamos. Entonces sigamos adelante y volvamos al tablero y veamos cómo se ve ahora. Por lo que ahora cuando comienzas a desplazarte, puedes ver que está fijo a la parte superior y aún tiene este bonito efecto resplandeciente. Pero tengo que quitar el color de mi grifo para el logo porque aquí puedes ver ese color. Pero básicamente obtienes lo fundamental de ello. Se puede ver cómo funciona todo esto. Entonces sigamos adelante y arreglemos eso rápidamente. Por lo que es el Menú Principal Tab punto. Se puede ver que tenemos el color. Quitarlo. Vayamos al estado tabulador y veamos si sigue ahí. Lo es. Estado por defecto. Y ahora cuando golpeo la vista previa y empiezo a desplazarme, puedes ver a través y todo funciona como debería. La navegación funciona muy bien. Ahí mismo también. ¿ Puede esto y quitarle la animación porque se puede ver, vamos a seguir adelante y arreglarlo para que no nos confunda. Entonces prototipo. Seleccionemos esto y veamos qué es. Y simplemente voy a tocar afuera. ¿ Qué es esto? Cada punto de Tab 4R. De acuerdo, así que eso está bien. En realidad puedo saltar por dentro y extender este punto de paso hasta el borde. Y puedo hacer lo mismo en un estado tabulador. Por lo que puedo encontrarlo aquí. Punto de tabulador expandido hasta aquí. Y veamos, cuando toque mi ícono, no irá a ninguna parte. Entonces arreglemos ese hábito lácteo. Ahora. Vamos a probarlo y a ver si esto funciona ahora. O tal vez aún mejor porque es transparente solo para quitar cualquier duda. Veamos dónde estamos en el estado por defecto. Puedo usar mi punto de profundidad y moverlo encima de mi icono de menú principal. De esa manera en realidad voy a tocar mi punto de grifo. Vamos a cambiarlo aquí también en especie del estado tabulador. Entonces veamos dónde estamos en ese punto. Apenas más retorno top, lácteos fuera. Volver al estado de diseño y defecto. Haga clic en vista previa. Y ahora cuando hacemos clic ahí, como se puede ver, todo funciona como debería, como se pretendía hacer. Y creo que esta velocidad de 0.06 fácil y lt funciona muy bien con nuestro diseño. Entonces hábito lácteo, radio un poco más larga, pero aún tenía que explicar todo lo demás que estaba ahí para explicar una vez más y última vez. Si quieres organizarte, estos son tableros un poco mejor de lo que tengo en mi caso. Por favor, hazlo. Pero una vez más, hice esto porque no diseñé el resto de las páginas para el discurso. Y por eso me dejé un poco más de espacio aquí en caso de un diseño ellos alguna vez. Pero si no, si este es tu proyecto, entonces simplemente asegúrate de organizarlos un poco mejor. Puedes hacer click y arrastrar, reposicionar estos como lo hice a lo largo de nuestro diseño. Puedes, por ejemplo, posicionar estas indies wireframes aquí mismo, luego todo tu diseño en una línea, responde en la otra línea, así sucesivamente. Por lo que realmente depende de ti cómo quieres organizar estos. Se puede ver, se puede desplazar hacia arriba y hacia abajo para tener más espacio y XD real añadir más espacio. Entonces, básicamente, no importa cuántas páginas tengas, aún puedes tener ese scroll y agregar tantas de estas páginas como quieras. Entonces básicamente eso es todo para esta parte del curso. Hemos completado nuestro diseño responsive. Y una vez más, para el diseño responsive, si quieres. Hice esto por el bien del tiempo y los propósitos del tiempo. Si lo deseas, por favor adelante y haz un diseño responsive para todos estos ahora ya sabes cómo se puede completar en cómo me gustaba hacer las cosas. Y te mostré para el diseño de sitios web así como diseño responsive para dashboard. En la siguiente sección del curso, vamos a empezar a hablar de compartir y retroalimentación. Te diré lo que necesitas para pedirle retroalimentación a tu cliente, por una especie de lo que deberías estar buscando en una retroalimentación, no solo qué piensas de este diseño, cómo puedes mejorar aún más el diseño, y cómo puedes conseguir que las cosas se hagan en la menor cantidad de revisiones posible. Porque vas a configurar a tu cliente de esa manera. A continuación, después de eso viene exportando. Entonces les voy a mostrar estructura exportadora. Cómo se puede compartir ácidos con clientes y desarrolladores y cómo se puede utilizar mejor el espacio para no desperdiciar el espacio en su computadora para ninguno de estos proyectos porque después de que terminaron, todavía hay que guardar esos archivos para algunos tiempo en caso de que el cliente quiera que se les hagan algunos cambios adicionales. Por lo que ahora tienes que pedirles que te envíen de vuelta a los archivos y pierdan el tiempo de esa manera. Por último, vamos a terminar este curso. Vamos a llegar a una conclusión y recursos. Te voy a mostrar muy, puedes conseguir todos estos recursos de los que hablé en el curso, premium así como gratis. Entonces nos vemos en la siguiente lección donde vamos a empezar a hablar de compartir. 64. Importanza de compartir: Ahora que se completa el diseño, sigamos adelante y hablemos del compartir. Y obviamente, como mencioné varias veces a lo largo de este curso, se supone que debes compartir tan pronto como empieces con wireframes. Pero una vez más, no hice eso porque quería mostrarte todo a lo largo del proceso y luego empezar a compartir. Por lo que no te confundo más con mucha más información de la que necesitas saber en esa etapa en particular, sobre todo si estás empezando. Porque una vez más, todo esto puede llevar demasiado para algunas personas. Y para algunas personas, todo esto puede ser demasiado complicado. Pero como dijo al inicio mismo de este curso, si ya conoces algunas de estas cosas y solo quieres aprender cosas adicionales que antes no sabías. O simplemente necesita retocar sus conocimientos de Adobe XD o de este proceso de diseño, entonces simplemente saltar adelante y ver todo eso estructuré discurso así. Entonces por la razón que sea, si quieres saltar entre las secciones del curso. Entonces si eso es wireframing en papel, wireframing en XD y diseño responsive design y finalmente, compartir. Puedes saltar entre todas estas secciones y simplemente aprender lo que realmente necesitas aprender de esa sección en particular. Entonces como dije en esta sección del curso, vamos a hablar del compartir en Adobe XD. La opción de compartir es fantástica. Anexo D, debido a que cuentan con estas tres opciones, diseño, creación de prototipos y compartir. Y porque compartir como propio es realmente una de las cosas más importantes del proceso de diseño. Porque en esa etapa, estás compartiendo tu diseño con el cliente y pidiendo comentarios. Y la retroalimentación es extremadamente importante, obviamente porque da forma al producto se envía para diseñar de tal manera que se necesita ir. Porque a veces tendrás esa visión clara en tu cabeza donde necesitas ir con este diseño, pero otras veces no. Y por eso necesitas al cliente para que apruebe este diseño, para que lo desaprueben. Tan pronto como lo consigas, tan pronto como puedas obtener la retroalimentación adecuada de tu cliente, mejor, porque antes o puedes dar forma al producto y al diseño de tal manera que ambas partes estarán contentas. Tanto tú como el cliente, solo asegúrate de entender que nunca estarás 100% satisfecho con tu diseño. cliente podría no estar 100% satisfecho con el diseño, pero también está bien porque como dije, este es un proceso continuo. Vas a invertir mucho tiempo a lo largo de este proceso, explorando luego refinando. Si tú, sobre todo si estás tratando con grupos focales, sobre todo si estás tratando con personas que te están dando comentarios fuera de este proyecto. Entonces como dije, estás buscando un público objetivo en tu entrevista a esas personas, ya sea en persona o en línea, entonces vas a enfocar toda esa retroalimentación que obtuviste de ese grupo focal y de esas personas sobre este diseño. Por eso es realmente importante entender cómo compartir puede dar forma al proyecto y cómo compartir puede dar forma al producto en general. Entonces lo que necesitas preguntarle a tu cliente cuando empieces a compartir son todas estas preguntas enfocadas. Entonces el error número uno que cometen los diseñadores es, ¿qué opinas de este diseño? El cliente no es un diseñador. Si lo fueran, diseñarán esto sin ti, por lo que no necesitarán tu ayuda. Ellos sí necesitan de tu ayuda porque tú eres el diseñador y no ellos. Por lo que debes señalarlos en una dirección específica sobre tu diseño. Entonces, por ejemplo, cuando estás empezando con wireframes y cuando estás compartiendo wireframes y hazles saber de antemano, este no es el diseño, este no es el diseño final. Estos no son los colores finales. Esta no es la tipografía final. Este no es el estilo final de este diseño. Este es solo el diseño básico. Asegúrate de decirles esa forma de deuda. Van a empezar a pensar en el diseño de manera diferente. Y van a decir, de acuerdo, así que esto es sólo una estructura. De lo que necesitamos cambiar sobre la estructura. Y luego una vez que lo entiendan, se aseguraron de hacerles preguntas específicas. Entonces, por ejemplo, ¿qué opinas del espaciado entre estos dos elementos? Y sí creo que está bien. No creo que necesitamos más deber en cadete. Este blanco sobre gris, por ejemplo, funciona bien para ti. ¿ Crees que funcionará bien con el público? ¿ Cómo te gusta esta configuración? Por ejemplo, si el texto está a la derecha, imágenes a la izquierda, ¿crees que esto se ve bien, o deberías pensar que deberíamos cambiarlas? Haciendo eso, deberíamos poner la imagen en la parte superior, texto en la parte inferior. Entonces esa es la retroalimentación que necesitas de tu cliente. Cuando digan: Oh, vale, tal vez deberíamos hacer esos cambios, está bien. Y una vez que empieces a obtener esa retroalimentación, puedes empezar a aplicarla a tu diseño. Entonces una vez que compartas tu diseño, st ing, asegúrate de enfocar su atención en algunos de estos detalles porque a la mayoría de las veces a los clientes no les gustará colorear por alguna razón. Por eso estamos usando estos componentes. Por eso estamos usando estos colores conectados en XD. Porque si no les gusta colorear por la razón que sea, puedes cambiarlo con tan solo un simple clic. Amitigar el texto es un poco demasiado grande, solo un poco demasiado pequeño. Asegúrate de decirles que se va a ver solo un poco diferente más adelante en código que te ahorrará mucho tiempo con ellos cambiando todas esas pequeñas cosas. Y mostrará dos DEM, del, mientras que el diseño va a verse así, en cita, la juventud nunca puede ser 100% precisa sólo porque la forma en que funciona el código. Por lo que será algo así como el 9697%, pero no el 100. Así que solo asegúrate de decirles que también para los receptivos, si les gusta, cómo se ve este diseño receptivo, pero no están seguros de algún tipo de cosas. Asegúrate de decirles que lo resolverás con el desarrollador de la mejor manera posible para el propio sitio web. Por eso estaba diciendo en el último video de diseño responsive, por ejemplo, para esos iconos, puedes ocultar el texto de esos iconos y esas etiquetas. Pero necesitas hablar con tus desarrolladores y debes decírselo a tu cliente. Entonces esto va a ser así. Y por esto, por lo que necesitas hacer tu razonamiento, no solo hacer el diseño y enviarles una esperanza para lo mejor. Entonces debes explicarles por qué elegiste este cierto tipo de decisiones y por qué hiciste las cosas de la manera en que lo hiciste. Porque de esa manera mirarán un diseño diferente porque te estás acercando desde el punto de vista lógico, no solo para hacer que las cosas se vean bonitas. Entonces espero que entiendas lo importante que es la retroalimentación, lo importante que es compartir. Y en el siguiente video, vamos a saltar dentro de Adobe XD. Y te mostraré todas las funcionalidades que tiene Adobe XD en cuanto compartir comprado para clientes así como para desarrolladores. Entonces te veré ahí. 65. Opciones de participación del diseño del: Por último, permítanme mostrarles ahora todas las opciones de compartir que tiene Adobe XD. Entonces una vez más, si miras justo aquí tenemos diseño, prototipo y compartimos. Y si escondo mis capas aquí mismo, se puede ver eso aún mejor así. Por lo que hemos diseñado prototipo share. Y una vez más, el diseño es donde estás haciendo todos estos cambios a tu diseño, donde estás creando, donde tu embarque Ahora todos estos elementos, prototipado es donde estás conectando todos estos diferentes elementos, que les mostré a lo largo de este curso. Y por último, compartir es si quieres compartir esos diseños, creaciones, prototipos con tu cliente, desarrolladores o equipo de probadores. Entonces vamos a correr rápidamente a través de eso. Por lo que una vez que haces clic en el compartir, puedes ver que te está dando todas estas diferentes opciones. Entonces cuando haga clic en el diseño de mi sitio web, comer completo Saber que creamos ese flujo y me va a mostrar que el flujo de deuda está conectado. Ahí es donde puedes empezar a compartir. Por eso tenemos todos estos ícono de la Página Principal. Entonces si hago zoom todo el camino cerca de aquí, si navego zoom así, puedes ver que tenemos este pequeño icono de la página de inicio justo aquí, lo que básicamente significa que ese es el flujo para tus wireframes. Si hago clic en esa, se puede ver que nada realmente pasa. Pero si hago click en mis wireframes, puedes ver que podemos compartir solo una opción, lo que significa que si quieres compartir esto con tu cliente, en esta etapa, puedes compartirlo porque ese fue el único diseño que realmente teníamos en nuestro reporte. Si recuerdas, acabamos de tener estas 2468 páginas diferentes. Entonces sólo tenemos esos. No teníamos ningún dashboard y sobre todo no teníamos ningún diseño de sitio web en absoluto. Así que solo asegúrate de entender que puedes compartir estos flujos. Entonces por eso creé todos estos flujos separados para partes separadas del discurso y de este proyecto. Pero si quieres compartir todas las pantallas con tu cliente, entonces no creas ningún flujo en absoluto. Simplemente sigues creando, creando, creando sin etiquetar todos estos flujos como lo hicimos a lo largo de este curso. Y de esa forma podrás compartirlo todo tu proceso con tu cliente y sin hacerles notar todas estas otras cosas. Estos flujos, son extremadamente útiles, sobre todo si estás compartiendo partes específicas de tu diseño. Al igual que por ejemplo, si hago clic en mi diseño de sitio web responsive aquí mismo, y si hago clic en mi página aquí abajo abajo. Por lo que solo puedes imaginar que puedes compartir esas partes específicas de tu diseño con tus probadores, por ejemplo. Para que pueda compartir mi diseño de sitio web responsive con ellos y así sucesivamente. No puedo compartirlos ahora mismo, como pueden ver, porque antes que nada, creé para esta página, que es sólo nuestra página de diseño, por lo que no puedo compartirlos. Pero si estás conectado con quién ha conectado todas estas páginas. Al igual que hicimos, por ejemplo, con nuestro diseño de tablero, entonces puedes compartirlos con tus clientes, desarrolladores de escritorio y así sucesivamente. Hablando de compartir, puedo hacer clic en los diseños de mi sitio web para que pueda empezar desde aquí. Porque recuerden, todo este proceso está conectado porque hemos comenzado desde la página de inicio para luego pasar lo largo de estas páginas a las páginas de inicio y registro. Y luego pasamos a aquí. Entonces cuál es el diseño de tablero. Más, Pasamos por todas estas páginas diferentes. Entonces vamos a ver, tenemos el enlace. Por lo que tenemos diseño de página web. Entonces podemos llamarlo otra cosa. Entonces por ejemplo, este era nuevo banco, así que puedo llamarlo nuevo banco. Diseño de páginas web así. Y lo que puedes hacer aquí mismo es la configuración de documentos. Para que puedas compartir revisión de diseño, que es básicamente cómo va a ser revisada por tu cliente. En modo deuda, el cliente puede dejarte retroalimentación, puedes responder a esa retroalimentación. Puedes apuntarlas a las partes específicas de tu diseño arrastrando y soltando estos pines de comentario. Y luego puedes dejar comentarios en lugares específicos a lo largo de tu diseño. Pueden responder a esos lugares específicos. Por lo que ustedes dos, usted y su cliente pueden estar siempre en la misma vía. Ok, lo que necesitamos hacer aquí mismo, lo que necesitamos para hacer algunos cambios aquí mismo. Por lo que puedes ser específico con la parte de tu diseño que quieres cambiar o que ellos quieren que cambies. Debajo de eso tenemos desarrollo, que es compartir para desarrolladores. Y en ese modo, van a poder ver todos estos diferentes colores que usas, todas diferentes fuentes y diferentes tamaños de fuente que has usado. Y van a poder ver todas las imágenes que usas en ese momento en particular. No pueden ver el código. Una vez más, puedes usar algo como Anima, pero personalmente no lo recomendaría porque no es perfecto lo suficiente. Y en realidad te vas a dar más trabajo a los desarrolladores. Y porque tendrán que entrar en código y luego empezar a refinar y refrescar tu código, que básicamente es solo una pérdida de tiempo. Habrá que codificar todo eso desde cero. A continuación que tenemos presentación. Entonces, por ejemplo, si estás presentando tu diseño a un grupo de personas, si estás haciendo algo como un Roll de skype, presentación de zoom o lo que sea, entonces puedes entrar en modo deuda y elimina todas las distracciones. Elimina todos los iconos, elimina todo, y solo se enfoca en la presentación misma, las pruebas de usuario. Por lo que una vez más quita todo lo demás. Los usuarios no pueden hacer clic en cualquier lugar fuera de donde los configures para hacer clic. Esa es la manera. Vas a probar la usabilidad de tu diseño. ¿ Es fácil hacer click en este tabulador puntos? ¿ Es fácil entender a dónde deben ir? Es la navegación fácil de entender. Amigo, las animaciones duran demasiado y así sucesivamente y así sucesivamente. Entonces ahí es donde entran en juego las pruebas de usuarios, y ahí es donde puedes usar XD para iniciar las pruebas de usuario. También puedes encontrar diferentes plug-ins en el panel de plugins, hechos específicamente para las pruebas de usuarios por parte de empresas externas. Integrado en Adobe XD. Entonces, por ejemplo, si estás usando alguno de esos, puedes encontrar allí un plug-in y luego puedes comenzar a probar el usuario directamente desde Adobe XD, recopilar comentarios en Adobe XD y aplicarlo de inmediato. Entonces ese es el punto principal de Adobe XD es cómo puedes optimizar todo para que sea lo más suave posible, solo para que puedas empezar a trabajar muy rápido. Custom es lo que dice. Puedes personalizar todas estas cosas. Y aquí mismo tenemos a cualquiera con el enlace. Entonces, ¿quién puede acceder a este proyecto? Cualquier persona con el servidor de enlaces obteniendo este enlace, enlace compartible, que puedes compartir con tus clientes o un desarrollador, pueden acceder a él. Por lo que cualquiera a quien luego manden ese enlace también puede acceder a ese prototipo, lo cual es genial para compartir dentro de la empresa. Y todo el mundo dentro de la empresa puede estar en un centro y acceder a ese prototipo y tal vez hacer un comentario al respecto si es necesario. Nosotros sólo hemos invitado a la gente. Por lo que sólo las personas que son invitadas vía correo electrónico pueden acceder a este prototipo y básicamente hacer lo mismo que cualquiera con el enlace. Y finalmente cualquiera con contraseña. Para que puedas proteger con contraseña todos estos. Entonces, por ejemplo, si alguien envía este expediente por error a alguien más de la organización que no se supone que lo vea. O por ejemplo, tus competidores, competidores se ponen de la mano con este expediente. No se podrá abrirla porque está protegida por lo posible. Por lo que vamos a ver podemos compartirlo con revisión de diseño cualquiera que tenga el enlace. Y ahora lo que puedes hacer es simplemente golpear crear un enlace aquí mismo. Se va a empezar a crear final dependiendo del número de nuestros tableros que tengas y dependiendo de tu conexión a internet porque está subiendo todo esto a las deudas de las nubes de Adobe. Y de esa manera va a tomar más o menos dependiendo de estas dos cosas. Entonces qué tan grande es tu archivo y qué tan rápida es tu conexión a internet. Y ahora se sube el enlace de dos y ahora puedes empezar a compartir. A propósito estoy usando versión gratuita de Adobe XD porque ya tengo un plan premium. Estoy usando una versión gratuita solo para compartir esto contigo para que puedas verlo aquí mismo. Desbloqueo ilimitado, enlaces limitados para compartir. Alcanzas la capacidad de compartir enlaces con tus actualizaciones de plan para publicar más enlaces y usar funciones premium para que puedas hacer clic en actualizar aquí. Lo que esto significa es que si estás en una versión gratuita de Adobe XD, solo tienes un enlace disponible. Entonces si estás trabajando en dos proyectos al mismo tiempo, no podrás compartirlos con tus clientes. Sólo tienes uno en plan gratuito. Si actualizas a Dan premium, tienes un número ilimitado de estos enlaces para compartir. Tienes un número ilimitado de opciones y así sucesivamente y así sucesivamente. Pero estoy usando intencionalmente esta versión gratuita a lo largo de este curso para mostrarte que todo lo que estoy creando rojo aquí es posible en una versión gratuita también. Entonces si estás trabajando con múltiples clientes, entonces por todos los medios actualízate al plan premium porque realmente sí tienen muchas de estas opciones, especialmente los documentos en la nube, que va a ser mucho más rápido, especialmente si estás usando bibliotecas Cloud. Pero si no, si solo estás trabajando con un cliente, si apenas estás empezando, entonces simplemente usas Free blend porque Adobe XD es una fantástica herramienta de aprendizaje y una fantástica manera de meterte dentro de este mundo de diseño UX de UI. Ahora por fin, terminemos esto. Y como puedes ver, se crea un enlace. Puedes hacer click aquí mismo para copiar este enlace. Y puedes hacer clic aquí para copiar el código de incrustación. Para que puedas incrustar en ese código, por ejemplo, dentro de tu presentación de balizas. gente pueda desplazarse por tu presentación de balizas y hacer clic a través de tu presentación solo para poder entender lo que has hecho con tu prototipo. Por lo que si realizas algún cambio dentro de la pestaña de diseño o prototipado, puedes volver al compartir y hacer clic en el enlace de actualización. Es el mismo enlace, lo compartes, solo te encuentras con la actualización de ese enlace. Entonces no te preocupes, no cruzarás esta parte de un enlace por cuenta. Pero simplemente puedes actualizar ese enlace para asegurarte de que el cliente tenga los últimos cambios. Un enlace en sí, por lo que el nombre de la dirección del enlace y así sucesivamente. Entonces puedes ver aquí mismo, para que todos estos números, 90 puntos, 918 y demás, no cambien. contenido del enlace cambiará y se actualizará a la última versión. Por lo que una vez más, puedes dar click aquí mismo. Abrirá ese enlace en tu navegador. Puedes copiar este enlace aquí mismo e ir a tu navegador y abrirlo de esa manera. Entonces realmente todo depende de ti cómo quieres interactuar con este enlace. Por lo que ahora te mostraré su apertura justo dentro de mi navegador. Una vez más, dependiendo de tu conexión a Internet, dependiendo de cuántas pantallas tengas, cuántas animaciones tengas. Todo este proceso puede tardar más o más corto, dependiendo de todas esas cosas. Entonces cuando tu pantalla se carga y cuando la subes a internet, esto es lo que realmente se ve. Y para cubrir toda esta información, creo que lo mejor es hacer un descanso aquí mismo y volver en el siguiente video para que podamos explicar qué es toda esta información, cómo puedes interactuar con tu cliente. Y finalmente, cómo puede interactuar con tus desarrolladores. Entonces te veré ahí. 66. Comparte el diseño con el cliente: Está bien, así que aquí estamos, donde lo dejamos en el video anterior. Y en este video solo quiero cubrir todo lo que ven aquí mismo. Y solo quería explicar todas estas opciones, deuda que tienes. Entonces lo primero es lo primero, empecemos desde lo alto y más ROA alrededor. Tienes tu trabajo aquí mismo. Entonces si hacemos clic en tu trabajo, en realidad te llevará a Adobe Creative Cloud y te llevará a tu trabajo. Entonces puedes ver porque estamos en una planta libre en esta cuenta, como dije, solo tienes este prototipo. Y dice aquí mismo, es un prototipo y esto indica que cualquiera con el enlace puede ver. Entonces básicamente todas esas configuraciones que has creado al compartir tu archivo, aparecerá con el cuidado adecuado. Entonces si volvemos a nuestro prototipo y a la vista del prototipo publicada, podemos volver atrás y se puede ver aquí mismo. Por lo que tenemos nuevo diseño de sitio web bancario, homepage dash design. Entonces por eso estaba mencionando el discurso de la sequía. Cuán importante es nombrar a tus capas, nombrar a tus aeropuertos, que todos los involucrados puedan entender dónde están. Entonces este es el caso claro aquí mismo. Es tan nuevo diseño de sitio web bancario es el nombre del proyecto que dimos justo antes, link sharing. Y por último, tenemos diseño de homepage, que en realidad es esta particular página de inicio. Puedes dar click aquí mismo. Y te llevará a la lista de todas estas páginas separadas. Y puedes demostrárselo a tu cliente o desarrolladores para que puedan entender, OK, esto es diseño de cuentas, no wireframe sino diseño. Y por eso dije que es importante si estás haciendo cosas como esta y como lo hicimos en el discurso, para nombrar tus expedientes apropiadamente para que todos los involucrados puedan entender dónde están en un determinado conjunto de tiempo o en un punto específico de tiempo. Por lo que dice 15 pantallas actualizadas en esta fecha en este momento. Entonces cuando haga clic de nuevo en un diseño de página de inicio, me llevará a donde lo dejamos. Este es nuestro diseño real. Y se puede ver cuando empiezo a flotar cualidades, los efectos de terror ya funcionan. Entonces básicamente este es tu diseño en un navegador. Es así como los clientes pueden verlos. Y hay algunos comandos aquí mismo que necesitamos correr rápidamente. Entonces básicamente descartar parte justo aquí es para tu diseño. Y cuando empiezo a desplazarme, se puede ver donde el diseño y n, donde esto aquí mismo en navegación muestra esta negación es el hogar. Por lo que cuando hagas click justo ahí, te llevará a esta página porque esta es la página de inicio. Y también puedes hacer click en estas flechas izquierda y derecha para interactuar entre todas estas diferentes pantallas. Además, si uso mis flechas o hago teclado, como pueden ver, me llevará a las diferentes pantallas izquierda y derecha. Y si por ejemplo, solo quiero dar clic aquí, me llevará de vuelta a la página principal. Asegúrate de entender que esto va a funcionar mucho más lento que en tu computadora. Entonces, por ejemplo, cuando empecé a desplazarme, se puede ver que Scrolls dan, me da este tipo de giro. Para que veas que me estoy desplazando, así que aquí está mi ratón, pero no se mueve todo eso rápidamente. Lo que necesita pasar es que Adobe XD necesita correr por todas estas páginas, desplazarse por todas estas páginas para que funcione. Entonces no te preocupes si no funciona la primera vez que abres esto, funcionará la próxima vez o la vez posterior a eso en la velocidad que se pretende. Así que solo asegúrate de decirle eso a tu cliente. Porque a veces, sobre todo si tu cliente tiene una conexión a internet lenta, esto no funcionará como debería, ya que funciona directamente en Adobe XD cuando lo diseñas. Pero por ejemplo, el desplazamiento tal vez funciona lentamente, pero se puede ver que estos elementos de navegación y en estos iconos funcionan bien. Para que veas que tenemos el efecto flotante y así sucesivamente. Y podemos dar click aquí mismo, y la navegación funciona muy bien. Entonces si recuerdas que 0.06 estuvo aquí, él narrando obras como debería. Como puedes ver, cuando haces click donde no puedes hacer click, básicamente como éste, te muestra donde realmente puedes hacer click en la página. No entiendo por qué no me muestra eso. Puedo dar click aquí, pero tal vez necesito flotar, entonces me va a mostrar. Entonces vamos a echar un vistazo al descarte. Como se puede ver, la animación funciona como se pretende. Es solo esta parte de desplazamiento, que es solo un poquito Demasiado. Y por alguna razón este texto está saltando arriba y abajo. De verdad no sé por qué. A lo mejor podemos comprobar eso en nuestro diseño. Pero creo que es sólo obliterar aquí. Entonces, ¿cómo puede saltar arriba y abajo en el mismo estado? Entonces eso probablemente sea un problema porque se puede ver, por ejemplo, aquí, está de pie. Cuando un hover va a efectos de horror arriba, abajo y luego arriba, abajo otra vez. Y lo mueves hacia arriba y hacia abajo como viste. Entonces eso probablemente sea solo un problema aquí mismo. Si comprobamos esto, funciona. Entonces todo funciona muy bien. Y saltemos rápidamente para iniciar sesión. Vea cómo funciona esto. Entonces todo funciona bien. Acceda al inicio de sesión y vaya a nuestro panel de control. Ahí lo tienes. Comprobemos rápidamente entre todos estos. Por lo que la ferritina funciona como debería. Tan rápidamente revise Ds. Todavía no me gusta esto, pero me oyeron decir eso muchas veces. A ver, sí grupo de desplazamiento funciona bien. Veamos préstamos, tarjetas, y cada vez que un usuario hace clic fuera, así que por ejemplo, si hago clic aquí, puedes ver que me está mostrando qué elementos están realmente vinculados con algunas áreas que se pueden hacer clic. Por lo que puedo dar click en todos estos, pero no puedo hacer click aquí mismo. Entonces en cuanto hago click ahí, me está mostrando en este color azul, ¿dónde puedo realmente hacer click para que me lleve a algún lugar? Por lo que tenemos todas estas terminadas y cuando haga clic en cerrar sesión, me llevará de vuelta a la página principal. Ahora vamos a cubrir lo que ves aquí mismo a la derecha. Para que se pueda ver aquí mismo, tengo algo que decir. Comentario para iniciar la discusión puede connotar o anotar el tablero. Lo que esto significa básicamente es que puedes hacer un comentario aquí mismo. Entonces digamos, bienvenidos a Diseño. De verdad espero que te guste. Y puedes dar clic en enviar. Y esto sólo va a ser comentario general sobre este tablero de arte en particular y en esta página. Por lo que puedes ver el deseo de la página principal, que es obviamente esta página, es donde se encuentra este comentario, pero no se encuentra en ningún lugar dentro del diseño real. Entonces lo que puedes hacer por deuda es aquí tienes esto mencionado un usuario que es este a la señal. Por lo que puedes mencionar al usuario dentro de tu documento sólido decir que eres un cliente se llama RNR, John Doe por ejemplo. Y tienen cuenta de Adobe. Se puede mencionar en John Doe y se les notificará cada vez que haces una subida que haces un cambio de enlace, ¿Hiciste ganar datos HCUP, debo decir, hacer algo común ¿Hiciste algún cambio? Hará la notificación en su cuenta y no los encontrará sobre ese cambio y saltará y lo comprobará por sí mismos. Entonces eso es lo que, para eso es más fácil. Se puede ver aquí mismo que tenemos un comentario, que es éste, y éste se actualizará a medida que agregues cada vez más comentarios. Y lo que quería mostrarles es por ejemplo, esto. Entonces digamos que el desplazado a disposición, tienes este giro. Se puede hacer clic en él en espera. Y como puedes ver, puedes colocarlo donde quieras. Entonces, por ejemplo, puedo colocarlo justo aquí y decir algo como, ¿qué opinas de inducir a Harvard? deber perfecto en el color verde es demasiado fuerte. Por ejemplo, ¿debo reducir la obesidad y hacerla menos directa, glitzy o más ligera o superior? Nosotros queremos expresarlo. Haga clic en enviar. Y una vez más, tenemos esto. Por lo que tenemos diseño de homepage. Nos está mostrando dos comentarios. Uno es el comentario general, Uno es el comentario específico. Y cuando se pasa el cursor aquí mismo, puede ver que esto se pone azul y se puede pasar el cursor justo aquí y se puede hacer clic en él y se le llevará a esa zona específica. Entonces, una vez más, puedes hacer esto en cualquier área de tu diseño y tu aviso cuando empiece a desplazarse, no está ahí, pero tengo que subir. Y aquí es en realidad para que puedan hacer click en él los llevará a ese comentario. Y lo que pueden hacer es dar click reply. Y también puedes colocar un bin a partes específicas de tu diseño para este comentario específico y así sucesivamente. Y por último, lo que pueden hacer es si optamos por dar clic en responder y eso está bien. Uno por ejemplo, haga clic en enviar. Y lo que tenemos aquí mismo es que puedo eliminar esto, puedo editar este comentario, pero la opción que falta en esto está completa. Para que puedan, tú puedes, eres capaz de completar ciertas tareas dentro de aquí. Entonces digamos que hiciste ese cambio. Digamos que subiste la nueva versión de tu diseño y se actualizan los prototipos, se desvincula, se hace cambio, se notifica al cliente, están contentos y puedes hacer clic en opción de resolución, cual vas a tener. Y se va a quitar ese comentario y se va a asegurar de entender. ¿ Ustedes resolvieron eso, llamémoslo problema, pero digamos cambio de diseño, cambio diseño se hace. Esta es la nueva versión. Eso está bien. Ahora sigamos adelante. Por lo que tendrás esa opción de resolución. No lo tengo porque sólo lo comparto con ustedes básicamente conmigo mismo. Entonces por eso no se puede ver ahí. A continuación lo que tenemos es esto aquí mismo, para que puedas invitar a la gente. Puedes hacer click aquí mismo, invitarlos por correo electrónico o invitarlos a través de su cuenta de Adobe, lo cual es aún mejor porque tienen más opciones que simplemente venir a este prototipo. Y una cosa importante aquí, tus clientes no necesitan cuenta de Adobe para acceder a este prototipo o para poder vivir comentarios, simplemente pueden saltar aquí mismo y dejar comentarios de inmediato. Es decir, creo lo genial que hizo el equipo de Adobe porque esas personas no son que sus clientes de todos modos, por lo que no usarán estos productos como XD, Photoshop, Illustrator y así sucesivamente. Eres su cliente. Entonces como diseñador, y por lo tanto necesitas esa cuenta, no lo hacen, y eso está bien. Aquí mismo tenemos el zoom en nivel para que puedas ir al valor predeterminado, por ejemplo, puedes ver cómo funciona eso. Aquí mismo tienes la opción de pantalla completa. Tienes preguntas. Estas son notificaciones para tu cuenta y puedes acceder a tu cuenta aquí mismo. Tenemos todos los comentarios de pantalla aquí abajo. Para que pueda esconderlos, por ejemplo, mostrarlos. Puedo ocultar anotaciones. Entonces si un salto justo aquí, esta es la anotación. Para que se puedan ver estos círculos anaranjados. Simplemente puedo ocultarlo y puedo filtrar comentarios. Entonces puedo filtrar, por ejemplo, por quién publicó por el día y así sucesivamente, n por el aeropuerto también. Y por último, puedo marcar comentarios inapropiados aquí mismo. Si quiero. Déjame mostrarte rápidamente solo para el final y esto, que es la opción de pantalla completa. Perdón, mi cámara se puso un poco inactiva ahí, pero creo que ahora funciona bien. Por lo que una vez más, esta es tu opción de pantalla completa. Entonces, cuando haces clic allí, puedes ver cómo funciona y luego puedes mostrar a tu cliente pantalla forzada cuando este sitio web está realmente publicado cómo podría verse potencialmente cuando se publica. Entonces como puedes ver, todas estas opciones funcionan. Todo lo que aquí mismo funciona. Y puedes saltar a la página que quieras. Te llevará ahí y podrás mostrarles cómo todo esto va a funcionar y se verá como una vez que en realidad esté codificado y en vivo, lo que puedes hacer para volver de aquí es hit escape y tu teclado. Y te llevará de vuelta a esta página anterior. Entonces eso es básicamente sobre el compartir con tu cliente. En el siguiente video, te mostraré cómo funciona compartir con desarrolladores. Entonces te veré ahí. 67. Comparte el diseño con desarrolladores: Entonces aquí estamos de vuelta en Adobe XD y solo quería mostrarte rápidamente cómo funciona como cuando compartes con desarrolladores. Entonces básicamente tienen todas las mismas funciones que los clientes, pero son un poco más avanzados porque son desarrolladores después de todo terminó necesitan cosas diferentes. Después clientes. Los clientes necesitan un diseño visual y por eso los compartiste con esta opinión de diseñador. Necesitan proporcionar su retroalimentación y revisión sobre su diseño para que usted haga esos cambios necesarios para lograr ese cierto oro que tanto usted como sus clientes tienen mientras que los desarrolladores tienen otros objetivos. Es por eso que cuando haces clic en desarrollo aquí mismo, puedes ver exportación para web, exportar para iOS o exportar para Android. Entonces si eliges exportar para una web, que es lo que básicamente es porque hemos creado un diseño de sitio web aquí mismo. Puedes incluir activos descargables, pero no marqué ningún activo usando marc para exportación. Y puedo mostrarles rápidamente eso aquí mismo dentro de nuestro diseño. Entonces si un salto dentro de aquí, y digamos que quería exportar esta imagen directamente. Puedo ir dentro de mi panel Capas. Entonces aquí tenemos una pareja feliz y ustedes tienen esta opción. Por lo que puedes usar turno E o puedes dar click aquí mismo. Y incluirá esa perspicacia de imagen. Si voy a mi forma de héroe, por ejemplo, puedo hacer clic en ella también. Y usemos estos elementos de héroe solo como ejemplo, solo para que veas cómo luce todo eso. Y obviamente puedes hacerlo a lo largo de tu diseño. No estoy haciendo eso porque me gusta exportar mis activos más tarde. Y les mostraré cómo funciona eso también en la siguiente sección del discurso. Pero por ahora, sólo hagámoslos exportables aquí, volvamos al desarrollo de opciones de acciones. Y ahora se puede ver que tenemos cinco activos. Entonces si flotaba aquí mismo, se puede ver que podemos incluir SVG B y G, uno y 2x así como PDF. Por lo que una vez más, cinco activos. Si salto a mi diseño, si te muestro lo que incluí, así que incluí esta imagen, hace formas, así que eso es 2345. Entonces sabe cuántos artículos he incluido para compartir y para un descargable. Por lo que vamos a hacer clic sus desarrolladores podrán descargar estos activos directamente desde el navegador. Por lo que no tendrás que exportarlos más tarde y luego compartir con ellos de esa manera. Entonces solo quería mostrarte los dos caminos. A mí me gusta hacer la segunda vía, que es exportar manualmente todos mis activos porque entonces crearé un litro, la guía de estilo. Y dentro de la guía de estilo, enumeraré todos estos artículos, solo que no imágenes. Voy a enumerar todos estos otros artículos, pero ustedes pueden hacerlo así también. Por lo que una vez más, cualquiera con el enlace, puedes elegir lo que quieras aquí mismo. Aquí puedes agregar diferentes personas para que puedas hacer clic en Derek, necesitan tener su propia cuenta de Adobe para poder acceder a esta opción. Pero como dije, no necesitas otro enlace. Este es básicamente el mismo enlace. Simplemente puede hacer clic en el enlace de actualización y se detendrá, comenzará a actualizarse. Y una vez que se actualice y llegue a 100 aquí. Y luego te mostraré cómo se ve eso dentro del navegador. Y ahora que ha terminado de actualizar el enlace, simplemente puedo llamar aquí mismo a mi navegador. Puedo dar click en Refresh, o puedo volver a la XD y puedo hacer clic en copyright aquí y puedo compartirlo de esa manera con mi cliente. Entonces ahora tienes estas opciones aquí, que no teníamos antes, que son para el desarrollo. Por lo que simplemente dejaré que se cargue por tan solo un segundo, y luego te explicaré cuáles son estas dos opciones. Entonces ahora cuando se carga y se cierren aquí mismo, se puede ver que dice, si sólo pensamos que es, así que déjame simplemente darle clic. Es especificaciones de diseño. Entonces básicamente tomó banda, usa un mango para hacer zoom, usa Control y rueda del ratón, o usa un desplegable si quieres hacer zoom. Básicamente lo que esto significa es siempre que pases por encima de todos estos elementos, puedes hacer clic y te mostrará todas estas diferentes opciones. Para que puedas ver el ancho del texto, puedes ver la altura del texto. Se pueden ver las distancias entre todos estos. Entonces si yo rondo como éste por ejemplo, se puede ver que estamos a 91 desde arriba. Estamos a 71 de la derecha. Y estamos 3.3.2 desde el fondo de nuestra imagen de héroe. Si elijo mi botón, se puede ver que es 366 con 70. Y puedes pasar el rato aquí mismo y ve 296 desde el final de este texto. Es lo que dice, 140, son 50 aquí. Si hago clic justo aquí , son 50 aquí y así sucesivamente. Se puede hacer lo mismo básicamente para todos estos elementos. Y al hacer clic en cualquiera de estos, se puede ver el nombre. Entonces Launch creado para todos, ese es el texto, pero solo usemos imagen por ejemplo. Se puede ver imagen. Hombre tan feliz, este es el ancho, esta es la altura, esta es la apariencia. La opacidad es del 100%. Este es el carajo. Entonces no tenemos huevos porque es la imagen y tenemos este código CSS. Para que puedan seleccionar este código CSS y copiar si quieren usarlo en su proceso de desarrollo. Entonces básicamente ellos también pueden hacer eso. Ellos pueden hacer click en esto y se puede ver que tenemos el borde de este color. Y podemos nombrar el color y luego darle esta variable de token de diseño. Por lo que es mucho más fácil para los desarrolladores luego trabajar con estos tokens de diseño. Yo no hice eso porque no quería confundirte más con todas estas opciones, que básicamente es un poco más avanzada y todo esto. Pero básicamente pueden simplemente usar este color. Y como vamos a exportar todos nuestros colores más adelante, entonces pueden elegir esos colores, ponerlos dentro del CSS y luego simplemente usarlos así con su propio nombre. Por lo que no tuvo que usar ningún token de diseño. Aquí. Una vez más, tenemos círculo, tenemos en píxeles, por lo que básicamente 8080 y tenemos eje x e y. Pueden hacer clic aquí y usar puntos o usar DP si así lo desean. Tenemos la variable 6x aquí, pero también pueden usar RGBA. Ellos pueden usar un. No tenemos un guión, no tenemos ninguna brecha en un trazo comprado Gapminder se unió al Festival alto por ciento. Por lo que todas estas opciones están incluidas dentro para que los desarrolladores puedan acceder fácilmente a ellos y simplemente copiar estas opciones, basándolas dentro de su cotización, es mucho más rápido para ellos luego trabajar así. Si hago clic aquí mismo, podemos ver que estos son nuestros componentes. Por lo que básicamente principal nav, su estado de pulmones. Por lo que estamos en ese estado en particular en esa página en particular. Y luego pueden ver todas las opciones dentro. Por lo que tenemos rectángulo envuelto llamado nav Bg, tenemos apariencia, por lo que 10101010, redondo en todas las esquinas, si recuerdas. La obesidad es 100% de color. Es este fff, una vez más color sin nombre porque no le dieron el token de diseño. Pero una vez más, tú también puedes hacer eso si quieres. Tiene esta sombra. Entonces, al pasar el rato, tienes este color. Por lo que puedes hacer click en ese color, lo copiará y luego podrás pegar desenfoque de fondo, brillo obesidad. Y finalmente tenemos CSS para eso. Por lo que puedes seleccionar para copiar, y yo puedo dar click en mi CSS para copiarlo. Y puede, por ejemplo, seleccionar este. Css copiado, y simplemente pueden pegarlo a su editor de código de elección. Una vez más, tienes estas distancias, por lo que estamos a 50 de arriba, 138, tanto a izquierda como a derecha, y 70-30 hasta el borde inferior de nuestro diseño. También puedes desplazarte hacia abajo y hacer esto por cualquiera de estos que quieras. Entonces si floto aquí mismo y lo muevo, se puede ver que para este, estamos, vamos a ver 100 desde aquí. Estamos a 100 de aquí. Y se puede, se obtiene la imagen, se puede conseguir esto para todos estos. Por último, déjame dar click aquí para mostrarte estas variables. Para que puedas ver, déjame moverme hub a la forma en que tienes todas estas variables. Entonces colores de raíz, fuente, valores de texto, estilos de caracteres, estilo de carácter sin nombre al estilo F3, así sucesivamente software. Por lo que tienen estas variables y pueden copiarlas y utilizarlas en su trabajo de código. Entonces eso es básicamente todo. Aquí mismo en la pantalla principal. Estamos proyectados detalles, por lo que tenemos todos los colores utilizados y solo asegúrate de entender que no es el muestreo solo de los colores que usamos. Entonces estos son nuestros colores reales justo aquí en la parte superior. Todos estos otros colores son básicamente muestreados a partir de esta imagen, estos iconos, esta imagen y así sucesivamente. Entonces básicamente solo para entender, esos son todos los colores utilizados a lo largo de nuestro diseño, pero les vas a enviar nuestros colores principales. Por lo que van a usar esos colores principales en su lugar. Este es el tamaño de la ventanilla, este es el tamaño del diseño. Por lo que 1920 por 4959. Entonces esa es la altura general de nuestro tablero de arte de diseño real. Tenemos estilos de carácter, así que los tenemos justo aquí, y puedes dar click justo aquí para acceder. Así font-family Poppins, font-weight, tamaño de fuente regular 18. Este es el color, espaciado entre caracteres y el espaciado entre líneas, que una vez más es realmente importante para el CSS porque pueden, directamente desde aquí, usar todos esos ajustes. Por lo que una vez más, si quieres, puedes seleccionar cada cosa por encima de subido aquí y pueden descargarlo directamente desde aquí. Pero si no, te voy a mostrar en la siguiente parte del curso, al que en realidad vamos a llegar más tarde. Cómo pueden, cómo se puede organizar, editar, exportar todo, y enviarles eso para un uso posterior. Rejilla de diseño. Se puede ver que tenemos hasta la grilla. Por lo que columnas ancho de canaleta, ancho de columna, margen n. obesidad. La obesidad es básicamente la obesidad de esas líneas de rejilla para que puedas verlas mejor una vez que empieces a diseñar. Y finalmente aquí tenemos diferentes interacciones para diferentes páginas. Por lo que tenemos acción es transición, destino es diseño de tarjeta. Si hacemos click en eso, me llevará a esa página. Y yo soy capaz de ver todas esas cosas aquí. Entonces eso es básicamente todo. Volvamos rápidamente a la página de inicio. Si puedo ir a partir de ahí, puedo hacer click en menú bang en llevar a la página de inicio. Y luego si hago clic aquí, tienes estos activos aquí mismo. Por lo que simplemente pueden hacer clic en los activos. Está mostrando el botón de descarga, espero que lo puedan ver. Y luego una vez que haces clic en Descargar, Como puedes ver, ya comenzó a descargar. Se va a descargar como un SVG, que es con mucho el mejor formato para trabajar con los codificadores más adelante, finalmente, si hago clic en él, me está mostrando lo que está seleccionado, Mostrarme a descargar y así sucesivamente y así sucesivamente. Pero si quiero pasar por encima de él, por ejemplo, aquí mismo va a mostrar la apariencia, se va a mostrar el gradiente porque este es el activo de dirección, porcentaje o basicidad del gradiente . Y por último, tienen la opción de descargar. Por lo que una vez más, si planeas hacerlos descargar estos activos directamente desde aquí, entonces puedes, tan pronto como posiciones algo dentro de él afecta D, puedes marcar para exportación más adelante cuando subas tu diseño para revisión y para un desarrollo, van a poder dar click aquí y descargar los activos directamente desde aquí. Pero una vez más, recuerda si solo estás usando este único proyecto en una versión gratuita de Adobe XD. Los desarrolladores necesitan tiempo para desarrollar esto. ese momento, has pasado al siguiente proyecto y necesitas eliminar en este proyecto de tu cuenta y de tu computadora. Y por lo tanto, ya no podrán acceder a este proyecto. Por lo que la siguiente opción que voy a compartir con ustedes es permanente. Y podrás compartir esa opción con tu cliente y desarrolladores. Por lo que van a poder mantener el archivo indefinidamente. Entonces, por ejemplo, si optan por desarrollar ese archivo, digamos que dentro de dos años, aún lo tendrán. Pero de esta manera, tendrás que mantener este prototipo en línea para que puedan descargar y desarrollar todas estas cosas. Entonces eso es todo para este video. Realmente espero que entiendas lo fácil que es compartir esto, lo fácil que es acceder a tus clientes y desarrolladores, lo sencillo y racionalizado que todo da. Por lo que toda la animación funciona bien, toda la interacción funciona como debería, y todo está en un solo lugar. Así que comparte el desarrollo del diseño, para que todos en el equipo puedan acceder a esto de manera agradable y todos puedan trabajar juntos en este proyecto en particular. En la siguiente sección del curso, voy a mostrar cómo puedes extraer todos estos activos, cómo puedes estructurarlos, empaquetarlos y luego enviarlos a tus clientes y desarrolladores para su uso posterior. Porque como dije, a veces estos, estos proyectos pueden tardar meses en desarrollarse. Entonces de esta manera no es la mejor opción para cualquiera que esté usando el plan gratuito. Si estás usando el plan de pago ofrecido obesidad y tienes almacenamiento ilimitado, tienes opciones de compartir ilimitadas para los enlaces y así sucesivamente. Entonces, ¿a quién le importa? Simplemente puedes dejar ese enlace y ellos podrán acceder a él más adelante si lo deseas. Una vez más, puedes protegerlo con contraseña. Entonces cada vez que alguien tiene que acceder a ella, tiene que usar la contraseña y así sucesivamente. Entonces todo de lo que hablamos en estas lecciones sobre compartir. Por lo que una vez más, en el siguiente video, vamos a pasar a compartir y empaquetar estructura y luego finalmente, entregar sus activos a desarrolladores y clientes. Entonces te veré ahí. 68. Crear toques de diseño de diseño: Antes realmente saltamos a exportar, y te muestro cómo puedes exportar activos directamente a tu computadora y luego compartirlos con desarrolladores y clientes. Yo quiero cubrir rápidamente dos cosas. número uno es tokens de diseño y el número dos es sistemas de diseño. Por lo que ambos son realmente importantes. Ambos son básicamente críticos en el sistema de diseño. Si quieres implementarlas, a propósito no quise implementarlas en este proyecto y te explicaré por qué. Pero solo quería mostrarles que también tienen esas opciones, sobre todo si el proyecto se está escalando y cada vez más grande. Entonces como pueden ver, estoy de vuelta en mi archivo Adobe XD y saltaré aquí mismo. Y como pueden ver aquí mismo, tenemos justamente estos colores básicos. Y estos colores básicos se hacen así a propósito, solo para mostrarte lo que puedes hacer con el diseño de Tolkien's ahora. Entonces los tokens de diseño son básicamente nombres de tus colores, nombres fuera de tus fuentes, y así sucesivamente. Por lo que los tokens de diseño van a ser utilizados posteriormente por los desarrolladores. Y nadie te mostró eso en el video anterior en compartir con desarrolladores. Entonces ahora te voy a mostrar, si te acuerdas, teníamos el color sin nombre de la deuda y así sucesivamente. Te voy a mostrar cómo puedes arreglar eso y algunos consejos y trucos para mejorar aún mejor tu piso de techo y compartir con desarrolladores aún mejor. Entonces empecemos a cambiar el color de tu fuente. Puedes, perdón de tu color. Simplemente puede hacer clic derecho y puede cambiar el nombre o puede hacer doble clic aquí mismo, y puede ver que se llama nombre del elemento. Podemos simplemente llamarlo, por ejemplo, blanco liso. Y usarán el guión de Candice. Y estoy usando guiones básicamente por el código. Entonces si sabes algo de dos códigos, no puedes usar mayúsculas, no puedes usar espaciados. Por lo tanto, puedes usar guiones o esos guiones inferiores. Entonces o éste o déjame mostrarte éste. Entonces, ya sea una recta o esta de abajo. Entonces realmente todo depende de ti. Utilizo el de abajo a lo largo de mi diseño, pero solo quiero mostrarte que también tienes esta opción. A continuación podemos hacer doble clic aquí mismo y llamar a éste gris claro. Podemos llamar a esto gris oscuro. Ahora podemos llamar a esto, por ejemplo, significa verde. Y éste es Verde Secundario. Y éste porque está en medio de verde y azul. Podemos llamarlo algo así como, no sé, color medio. Podemos llamar a esto, vamos a ver. Gris oscuro. Podemos llamar a éste casi negro. Y por último, podemos llamar rojo a este peligro. A propósito di estos colores, estos nombres en lugar de simplemente blanco a gris y así sucesivamente. Sólo porque tú, los desarrolladores y los clientes podrán entender todos estos colores. En algunos casos, por ejemplo, si tu cliente ya tiene parte de la marca, tablero de marca integrado o tienen algo así como unas pautas de marca. Es genial porque tienes todos estos colores o listos. Y en la mayoría de los casos ya tienes nombres de color, así que solo vas a usar esos nombres de color como estos. Y por lo tanto, va a ser mucho más sencillo que tus desarrolladores finales de cliente trabajen desde Dana porque ya tienen estos colores. Si no tienen los colores, como en nuestro caso, vamos a crear los colores desde cero. Y ya te mostré eso por algunos, tomando muestras de otros colores copiando y pegando colores similares a estos y luego simplemente dándoles nombres. Una vez más, estos nombres son realmente importantes como fichas de diseño. Y una vez más, a propósito no los creé al principio se puso una baraja es mostrarte cómo podemos crearlos aquí y cómo es más fácil para los desarrolladores trabajar desde aquí. También, más adelante, cuando empecemos con la guía de estilo, en lugar de simplemente poner blanco, gris y demás, vamos a poner estos nombres exactos más los valores hex. Y te voy a mostrar eso más adelante en video posterior cuando realmente lleguemos a la guía de estilo. Ahora viene la parte de compartir esto con los desarrolladores. Entonces ahora que hemos creado esto, puedes seguir adelante y golpear save porque puedes ver que aquí tenemos esto. De hecho voy a pasar a compartir. Haga clic en el diseño de mi página web. Ya tenemos el enlace que hemos creado previamente. Simplemente voy a golpear enlace de actualización. Y ahora cuando el link se actualice, volveré a ustedes y les mostraré que en developer spec share option, lo que ha cambiado a las versiones anteriores. De acuerdo, entonces ahora que eso está terminado, se puede ver que está actualizado. Déjame moverte rápidamente al prototipo en sí. Entonces aquí estamos. Si queremos aquí mismo a las especificaciones del desarrollador, puedes ver que tenemos todos estos activos. Ahora cuando me inclino sobre esto, puedes ver de inmediato que tenemos el código hexadecimal, que es todo Fs en este caso porque es simplemente blanco liso. Y tenemos el blanqueamiento plano que le dimos a nuestro color original. Junto a eso ves tenemos gris oscuro. Gris claro, casi negro y color medio. Ahora si paso el cursor y hago clic aquí, por ejemplo, en este botón puedes ver que es el color principal. Si hago clic aquí mismo, se puede ver que es blanco liso. Si voy más uno y por ejemplo haz clic aquí y entro más profundo. A ver. ¿ Puedo hacer eso? Por lo que tenemos un verde amina aquí es claro genial cuando hago clic en este fondo. Y si avanzamos más allá, y por ejemplo, haga clic aquí, se puede ver que tenemos el gris claro, pero este botón, por ejemplo, es nuestro color principal. Si hago click en el hover y hago click directamente dentro de ahí, se puede ver que tenemos ese medio verde y bajo estado predeterminado tenemos el color principal en su lugar. Entonces eso es todo para este. Y aquí se puede ver que tenemos dentro del CD, CSS, todos estos valores cambiando. Entonces por ejemplo, si vuelvo a mis variables, se puede ver que tenemos peligroso y el color hexadecimal al lado, casi negro, oscuro, racial. Todos esos colores a los que renombramos están justo aquí en el lado izquierdo. Por lo que estos también están apareciendo aquí mismo en las opciones del d para compartir. Y los desarrolladores podrán simplemente encontrar estas variables y simplemente seleccionarlas, Copiarlas y pegarlas dentro de su código. Por lo que es mucho más fácil para ellos cambiar globalmente los colores cuando tienes esos nombres de color en lugar de cuatro DEM, dando esos nombres de color de más adelante cuando realmente estás más dentro de tu proceso de diseño y desarrollo. Entonces eso es todo. Esos son tus fichas de diseño. Espero que entiendas lo importantes que son. Espero que entiendas lo fáciles que son de implementar. Básicamente, la punta aquí es tan pronto como empieces a trabajar, cuanto empieces a aplicar estos colores, dale nombres a estos colores porque va a ser mucho más fácil después trabajar con estos colores tan pronto como les des nombres. Entonces eso es básicamente todo para fichas de diseño. En el siguiente video, en realidad vamos a pasar a diseñar sistemas. No creamos ningún sistema de diseño para este proyecto, pero les mostraré un gran ejemplo. Muestrarte por qué son importantes y cómo puedes seguir adelante y crear uno. Entonces te veré ahí. 69. Crear un sistema de diseño: Por último, permítanme mostrarles el sistema de diseño, cuáles son. ¿ Por qué son útiles en lo que puedes hacer para crear uno para ti? Por lo que aquí he abierto este sistema de diseño gratuito que he encontrado en línea. Se llama sistema de diseño de carbono. Y es creado por IBM. Y si sabes algo de tecnología, IBM es esta enorme marca global que trabaja alrededor de la tecnología durante décadas. Y se puede ver todo aquí mismo. Por lo que puedes escribir en carbono design system.com. Y puedes abrir todos estos paneles y explorar lo que se explora, diferentes exploradores de datos y diferentes componentes, diferentes elementos, visualización de datos, etcétera. Entonces básicamente, lo que es un sistema de diseño, es un lenguaje de la marca. Entonces, ¿todo lo que haces en torno al diseño, no solo todos estos elementos, sino cómo el diseño va a hablar con tu cliente? Cómo se va a adaptar a diferentes pantallas, los cueros entran en posición en el mercado junto a la competencia. Cómo se va a ver en, por ejemplo, cinco o diez años, cómo va a escalar. Entonces digamos que ahora tienes cinco páginas, pero al año que viene, vas a sumar 100 páginas diferentes. Por lo que necesita todos estos diferentes elementos para escalar proporcionalmente, escalar uniformemente, y adaptarse a todos estos cambios de mercados en todas estas posiciones. Entonces, por eso, por eso los sistemas de diseño están redactados y por eso siempre recomiendo que empieces con los sistemas de diseño. Los sistemas de diseño no son solo para grandes marcas, también se pueden utilizar para marcas más pequeñas. Pero sólo asegúrate de entender que para las marcas más pequeñas, obviamente hay menor cantidad de todos estos componentes, menor cantidad de historia y así sucesivamente y así sucesivamente. Entonces si lo recuperamos solo una vez más aquí mismo, se puede ver diseñando, desarrollando, aportando lo que está pasando. Para que puedas consultar sus lineamientos. Y se puede ver, por ejemplo, atreverse a usar esta rejilla 2x. Y puedes desplazarte hacia abajo y ver y jugar con estos videos. Era hill ax mayor es el marco organizativo para cómo funciona y cómo se adapta a todas estas páginas diferentes. Para que puedas leer más sobre eso. Si no estás usando esta cuadrícula y estás usando la cuadrícula Bootstrap por ejemplo, como nosotros, vas a hacer esta documentación, no en este caso obviamente, pero puedes crearla, por ejemplo, como unos huevos separados, un archivo, como PDF. Se puede crear una página web en línea, por ejemplo, para esa marca y así sucesivamente. A continuación tenemos accesibilidad, llamada fácilmente inaccesible. Tu sitio web es a personas necesitadas, por ejemplo, contenido. Se puede ver voz y tono, niveles conversacionales, menos conversación, más conversacional, etcétera. Color. ¿ Qué representa el color en este sistema de diseño? Iconos, cómo vas a usar estos iconos, puedes ver ahí o no. Aquí no hay variación de iconos. Todos se ven similares a esto. Pictogramas, espaciado de movimiento considera tipografía. Entonces obviamente, muchas de estas cosas diferentes son lo que hace que el sistema de diseño completo y completo. Ahora no tengas miedo de todo lo que veas aquí de la izquierda porque como dije, esto es IBM. Tienen miles de miles de personas diferentes trabajando para ellos. Realmente te animo a explorar sistemas de diseño en línea que son un poco más pequeños que éste y más fáciles de entender, más fáciles de consumir. Pero solo te estoy mostrando lo que están haciendo los gigantes de la industria para que puedas entender mejor lo que ha evolucionado en estos datos del sistema de diseño. Entonces puedes ver, por ejemplo, usemos el movimiento. Y se pueden ver todos estos diferentes movimientos y cómo se componen en este paquete completo de sistema de diseño. Para que se pueda ver esta moción aquí mismo. Por lo tanto, tocando puntos, expandiendo puntos, puntos de navegación y así sucesivamente. Entonces todo va a un punto, punto está intercambiando sus círculos cambiantes y así sucesivamente. Y solo noten que tenemos y este contorno aquí mismo, así que no tenemos ninguna forma rellena. Tenemos los contornos. Estas son curvas bayesianas, entonces cómo se mueven y demás. Por lo que toda esa información se incluye dentro del Sistema de Diseño. Entonces para evitar que me quede sentado aquí hablando contigo durante horas, simplemente puedes ir a carbon design system.com y me aseguraré de dejar un enlace en el PDF para que puedas hacer click y acceder a él de esa manera también. Para que puedas comprobarlo. Y ahora volvamos al archivo y veamos cómo se traduce al propio archivo Adobe XD. Entonces como puedes ver, aún tenemos estos colores. Y se puede ver que llaman de TI grado 20 hover, que significa que es gris, 20% de opacidad y se muestra en el hover. Para que puedas ver cómo se ocupan de los tokens de diseño. Entonces esto es morado, 60, esto es azul 20. Pero básicamente se están moviendo por todo el diseño y se puede ver todo eso. Y ahí tenemos estilos de carácter, muchos de ellos, tenemos diferentes componentes, también, muchos de ellos. Entonces básicamente están creando componentes para cada paso del viaje de diseño. Entonces si te llevo aquí, este es el archivo Getting Started. Obviamente lee esto si quieres. ¿ Cómo se puede utilizar este archivo y así sucesivamente. A continuación, tenemos tokens tipo. Por lo que los tokens de tipo no son compatibles en XDS apagado todavía, pero lo estarán en el futuro definitivamente. Por lo que solo se soportan los tokens de color. Y te mostré que en el video anterior, estos profundos Dawkins van a ser definitivamente apoyados después. Por lo que también podría familiarizarse con eso. Entonces, en lugar de que tu fuente se vea así, puedes renombrarla. Y luego se va a ver algo así. Por lo que puedes llamarlo, por ejemplo, código 01, código 02. Y puedes darles este tipo de hashes y este tipo de, llamémoslo nombres. Por lo que los desarrolladores van a ser más fáciles poder usarlos dentro del código en lugar de simplemente así. Entonces, por ejemplo, se puede ver la imitación. Por lo que es barra tipo mono, mono tipo slash mono, IBM tipo slash Mano. Por lo que todos esos son tokens tipo. A continuación tenemos fichas de colores, y esas son las que ya te mostré. Entonces estos son los valores hash están en los desarrolladores los van a usar. Este es el rol, por lo que el fondo de página predeterminado, este es el valor, por lo que blanco y el fff también es código hexadecimal. Para que puedas pasar por todos estos y puedas dialogar. Esto es gratuito, por lo que puedes explorarlo con más detalles. Contamos con componentes, componentes, acordeón y demás. Entonces si hago click en mi componente y vuelvo a aquí, y veamos donde te puede mostrar eso mejor. A ver. Esto es probablemente en algún lugar por el fondo. Aquí está. Entonces como pueden ver, tenemos este esqueleto. Tenemos discapacitados, abiertos, enfocados y hover. Entonces básicamente han creado un solo componente para este elemento en particular y luego le dieron todas estas opciones. Entonces en estado predeterminado, así es como se ve. Por lo que este es algún desplegable. Por lo que elemento de acordeón hover. Entonces cómo se ve cuando la gente pasa el mouse, enfoca cómo se ve, por ejemplo, cuando haces clic y quieres escribir algo, ese es el estado de enfoque, estado abierto, obviamente cuando se expande deshabilitado. Entonces cuando la gente no puede hacer clic en él, el esqueleto, que es sólo un marco básico, básico y esqueleto abierto. Por lo que quieres mostrar el estado abierto para tu wireframe también. Tienen distintivos para todos estos otros artículos. Para que puedas saltar rápidamente justo aquí y ver, por ejemplo, veamos cuatro botones por ejemplo. O si podemos encontrar algunos foros, Veamos deuda. Entonces vamos a ver qué también cómo aquí mismo, vamos a probarlo en estos. Entonces aquí tenemos, por ejemplo, este bonito desplegable. Por lo que tenemos hover, foco, esqueleto y abierto. Y podrías notar un cuatro a partir de ahora, están usando el mismo día de colores usando las mismas técnicas. Están usando las mismas superposiciones, están usando los mismos contornos, así que todo es igual. A lo largo de tu diseño. Ahí es donde entra en juego un sistema de diseño. Y en el panorama más amplio, cuando empiezas a usar este producto como sitio web, tiene una aplicación móvil como panel de control, lo que sea, se va a ver como pertenece al mismo producto. Para que puedan ver estos aquí estoy en estado predeterminado. Aquí estamos en hover. Entonces básicamente se puede ver que crearon todos estos estados y básicamente presentaron todas esas opciones aquí mismo dentro de este puerto de arte. Entonces aquí tenemos horror estatal por defecto, foco, que es éste, esqueleto, que es éste, abierto, que es éste. Por lo que se puede ver claramente lo que han hecho con este sistema de diseño. Nuevamente, esta es una opción fantástica para mostrar a tus clientes y desarrolladores todas estas diferentes opciones. Y también es una manera fantástica. Por ejemplo, usted ha completado este proyecto. Te llevaste tu dinero, lo terminaste, lo envías a los clientes y desarrolladores. Eso está bien. Todos están contentos. Pero en un año, por ejemplo, si alguien más viene aquí y quiere editar este archivo, va a ser mucho más difícil para ellos hacer eso. Leer cualquier sistema de diseño en su lugar o al menos directrices de diseño. Entonces. Tener un sistema de diseño en su lugar, incluso para proyectos y productos más pequeños es una manera fantástica de hacer las cosas. Aquí. A continuación, te puedo mostrar esto para que veas que tenemos modal, tan diferentes cosas apareciendo aquí y allá. Tenemos notificaciones. Entonces, por ejemplo, algo sale mal error aquí y así sucesivamente. Y puedes notar para todos estos, han incluido estos diferentes estilos. Entonces todo funciona como debería. Todo parece que pertenece a este mismo proyecto. Para que veas que incluyeron todos estos diferentes componentes para todos estos diferentes estilos. Posteriormente, los desarrolladores podrán entonces integrar esa codificación. Por ejemplo, vamos aquí y vamos a ver. Entonces por ejemplo, enfoque por página. Por lo que puedes ver tenemos este contorno azul los desarrolladores pueden usar, por ejemplo, grosor de fecha límite, color de fecha límite, un rectángulo redondeado o no. En este caso, es completamente recto y pueden enseguida, adaptarse a esos cambios en frío. Entonces cada vez que hay foco, como se puede ver aquí mismo, y esos cambios se van a aplicar. Pero aun así tienes que mostrarlos en diseño y aun así tienes que aplicarlos en todos tus elementos solo para mostrar al cliente, desarrolladores y luego usuarios, tal vez incluso compañeros de equipo cómo se va a ver cuando esté aquí. Entonces básicamente eso es todo. Puedes echar un vistazo a todas estas cosas, todos estos cambios. Y ahora minimicemos esto para que pueda llevarlos a nuestro expediente y explicarles cómo se puede hacer todo esto en nuestro expediente. Entonces, básicamente, si te llevo de vuelta a nuestro botón original, por ejemplo, que es este 1 de mayo se ricense, dale a este botón todos estos mismos ajustes para que podamos mostrar hover, que ya tenemos. Podemos mostrar foco discapacitado. Pero aquí no tenemos ningún estado discapacitado porque no podemos desactivar el inicio de sesión. Tienen que dar click ahí. Entonces hay que pensar en todas esas cosas también. Para algunas cosas como para los formularios, por ejemplo, como día mostrado en el ejemplo de IBM, tienes que hacer todas esas cosas porque no todas las veces en las que puedes hacer clic, digamos que quieres hacer clic en el botón Enviar, pero no ingresaste dirección de correo electrónico, por ejemplo, dentro del formulario, entonces ese formulario debería estar, por ejemplo, deshabilitado hasta que ingreses esa información requerida aquí. Entonces ya ves a dónde va esto. Tienes que presentar todos esos estilos diferentes. Entonces en caso de que, por ejemplo, dentro de un año, los clientes decidan que quieren cambiar este botón de inicio de sesión a un formulario en lo que sea. Todavía tienes ese estado deshabilitado, aún tienes ese hover seleccionado enfocado y así sucesivamente. Entonces puedes hacer eso por todas estas cosas diferentes, no solo por estas. se puede hacer para este tipo de tarjetas. Por ejemplo, se puede hacer esto para estas tarjetas, para este Q y un por ejemplo, y así sucesivamente. que puedas crear todos esos componentes con todos esos estados aplicados. Solo asegúrate de usar exactamente la misma configuración. Por lo tanto, si estás usando contornos, asegúrate de usar exactamente el mismo contorno en todas partes. Si estás usando hover como lo hicimos aquí mismo, asegúrate de usar exactamente el mismo color a lo largo de tu deseo. Y así va a crecer tu sistema de diseño. Y así es como vas a desarrollarte y volverte aún más grande y más útil en los años venideros. Entonces eso es básicamente todo para esta sección. De verdad espero que lo hayas disfrutado y de verdad espero que aprendas algo nuevo. Y si hiciste una regla, realmente te recomiendo que revises este IBM Design System. Entonces, una vez más, carbon design system.com, porque te da muchas, muchas opciones diferentes y perspectivas sobre lo que están haciendo todas estas grandes empresas, cómo están escalando sus productos. Y lo puedes ver en acción porque esto es en vivo en su página web. Este es su lenguaje de diseño. Y puedes entender de lo que están haciendo estos grandes jugadores y lo que puedes esperar de proyectos más pequeños. Pero más adelante si te metes en compañía de cerveza, lo que las empresas más grandes están haciendo también para que puedas saber dónde puedes aplicar tus conocimientos. Y si alguien más, por ejemplo, dice: Vale, dame fichas de diseño tipo, no te perderás. Ahora ya sabes qué son los tokens de diseño de tipo , cómo se usan y cómo se pueden usar también. 70. Crear una presentación del proyecto: De acuerdo, así que ahora, ahora hizo todo esto está terminado. Sólo tengo dos cosas más que compartir con ustedes. número uno es la presentación, y esa presentación se puede utilizar en su sitio web o en su perfil de balizas en dribble. O puedes crear una presentación para que tus clientes muestren a sus stakeholders, mostrarles a sus socios comerciales, para mostrarles a los miembros de su equipo y así sucesivamente. Sólo para que la gente pueda entender en, digamos un formulario PDF o en un foro basado en página web, cómo puede verse este proyecto y cómo llegó a ser este diseño. Por lo que puedes usar la presentación para mostrar todo tipo de cosas diferentes. Puedes partir de tu pensamiento. Puedes partir de tu papel de alarmas. Se puede partir de la arquitectura de sitios web, de la exploración, de hablar con la gente. Por lo que hay muchas, muchas, muchas formas diferentes en las que puedes crear esa presentación, así como cuán profesional sí quiere que sea tu presentación. Por lo que el nivel más bajo es básicamente simplemente poner todas tus páginas una encima de la otra en un día. Puedes hacer con la presentación como muerto si no requieres ningún elemento adicional dentro. Pero realmente te animaría, si estás creando estas presentaciones para mostrar al menos tu pensamiento detrás del proyecto. Entonces la persona que está viendo esas presentaciones, por ejemplo, en tu sitio web o en tu perfil de balizas, dribble o lo que sea, puede entender tu lógica, tu pensamiento, y tus habilidades organizacionales detrás de estos proyectos para que puedan entender mejor cómo llegaste a esas conclusiones y ¿por qué hiciste que las cosas fueran como lo hiciste? Entonces en este video, primero voy a compartir con ustedes algunos backends, ejemplos. Te voy a mostrar lo que están haciendo otras personas. Y luego te voy a mostrar ¿dónde puedes conseguir maquetas para usar en tus proyectos de Adobe XD? Y te voy a mostrar esas maquetas. ¿ Y cómo se puede trabajar con esos maquetas para crear sólo el punto de partida de la presentación? Porque las presentaciones pueden tardar horas, a veces días, incluso semanas en crearse, dependiendo una vez más de la complejidad que uno tiende a ser. Entonces empecemos con balizas, ejemplos, y les voy a mostrar a dónde pueden llevar sus presentaciones. De acuerdo, entonces aquí tenemos algunos ejemplos de Behance. Y como pueden ver, simplemente escribí el diseño de sitios web bancarios porque hicimos el diseño del sitio web del banco y solo quería mostrarles algunos ejemplos. Yo ordené aquí mismo por curado, lo que significa que tiene todas estas etiquetas. Y debido a que el diseño de sitios web suele estar en el diseño UX de la interfaz de usuario, debes mirar cosas como esta. También puedes ordenarlo por recomendado. Y te va a dar algunos ejemplos diferentes aquí mismo. Va a ser un poco más preciso, pero no vas a poder buscar curado todo el tiempo. Pero aún así vas a poder buscar curados así. Por lo que esta persona creó su diseño en Adobe XD se muestra también en esta galería de miembros, y finalmente aparece en USA en diseño de UX. Entonces empecemos realmente con este diseño. Yo lo abrí aquí mismo y se puede ver que están empezando con ilustraciones. No creamos ninguna ilustración para nuestro proyecto, pero se puede ver claramente lo que hicieron aquí mismo. Hicieron identidad de marca completa, cual no hicimos porque nuestro proyecto ya tenía alguna marca dentro, como el logotipo, colores, fuentes, etcétera. Entonces hicieron todo eso. Hicieron la exploración del logotipo. Hicieron todas estas tarjetas y el diseño de cartas, así que simplemente se imaginaron cómo van a quedar estas tarjetas una vez que se completen. Hicieron algunas de estas animaciones básicas y crearon desorden de wireframe es estilo. Y se pueden ver algunas tarjetas volando dentro y fuera y cómo se puede completar toda la muerte. Obviamente, están usando algunas herramientas más avanzadas como Adobe After Effects, por ejemplo, para todas estas animaciones. Pero también puedes hacer esto en Adobe XD y puedes grabar un prototipo y puedes exportar eso como un video y luego mostrarlo así. Pero aún necesitas algunas herramientas como after effects, por ejemplo, solo para poner estas dentro de estas maquetas animadas. O puedes usar herramientas en línea o alguna otra herramienta de pago, sobre todo si eres usuario de Mac, porque a veces somos usuario de Windows, es atrevido no tantas opciones disponibles. Pero básicamente se puede ver lo que han hecho aquí mismo en la lista todas sus pantallas de mapas y pantallas de sitios web y así sucesivamente, ilustraciones de clientes. Por lo que presentaron a papá. Y también puedes hacer click aquí para ver este video y ver todas estas animaciones. Y básicamente estas animaciones se hacen en alguna, una herramienta un poco más avanzada, como una vez más, después de efectos. O puedes hacer algo como esto en llenar Mora de vagar compartir. Entonces aquí está su página web y lo pusieron así. Y puedes ver que están usando estos elementos de fondo solo para que el diseño destaque un poco más. Y están usando este enfoque angular. Entonces en lugar de ponerlos así, simplemente lo inclinaron hacia un lado solo para crear intereses un poco más visuales. Y se puede ver que las páginas móviles combinadas así con las páginas de escritorio dentro. Y crearon esta bonita animación para el final. También puedes crear algo como esto para usar maquetas reales o formas de dispositivos reales en este caso. Y puedes empezar con la tipografía. ¿Qué es la topografía? ¿ Usaste branding y difícil de branding se ve así, sobre todo si tu cliente tiene el branding online, por lo que sitio web de marca y puedes ver que usaron, y esta maqueta de nuestra laptop justo aquí en NDI tienen creó esta presentación más larga con estos elementos de fondo. Por ejemplo, dan, han presentado esta app y se puede ver que todo está en branding, todo está en estilo. Y para crear algo como esto, realmente necesitas practicar. Realmente necesitas explorar todos estos ejemplos profesionales. Y se puede ver algo de animación se hace aquí también. Para que veas que están usando secuelas, Adobe Illustrator, InDesign y Photoshop. Y finalmente lo han concluido con esto. Entonces para usar maquetas, señoritas, estoy usando ángulo en Adobe XD. Es el servicio de maquetas de APEDE. Por lo que puedes estar en esta cantidad de dinero para conseguir todas estas maquetas. Para que veas que tienen 2800 y maquetas por el momento. Están disponibles para Sketch XD y fig Maya también. Y si empiezo a desplazarme hacia abajo, puedes ver cómo se ven todas esas maquetas. Tienes versión de arcilla para tener versiones reales, versiones oscuras, versiones lite y así sucesivamente y así sucesivamente. Y se puede ver lo que han hecho aquí mismo. Por lo que tienes 1620 dispositivos iOS, 780 dispositivos Android para 30 dispositivos de escritorio y así sucesivamente. Y puedes ver la vista previa rápida o justo aquí. Todos estos dispositivos. Ahora puedes ver el iPhone 11 y pro incluido. Pantallas Pro, DR. iMac y pixel dispositivos Samsung. Debido a que el iPhone 12 ha lanzado, actualizarán esta espalda para incluir también el iPhone 12. Y una vez, lo que es genial de esto es que incluyeron estos papeles de pared en resolución 5K. Para que puedas usarlos como fondos de escritorio. Se pueden utilizar como algún tipo de superposiciones y así sucesivamente y así sucesivamente. Estas son las empresas que fueron, están utilizando este proyecto. Algunos testimonios del usuario aquí mismo, preguntas frecuentes y demás. Entonces si te gusta esto, no puedes ser muertes. Y también tienen una versión gratuita para que puedas probarla, pero es realmente limitada y puedes descargar la muestra aquí mismo desde la parte superior. También dejaré el enlace para que puedas acceder a él de manera muy rápida. Entonces, cuando sí lo pagues, o si descargas una muestra gratis, solo vas a conseguir unos cuantos dispositivos. Pero si decides pagar, así es como se ven en Adobe XD una vez que se abren. Por lo que puedes hacer clic aquí en tu panel Capas y puedes ver cuántos de estos diferentes dispositivos hay. En realidad te estoy mostrando una versión un poco más antigua, pero puedes ver maquetas en ángulo fueron XD. Y si lanzo aquí se pueden ver maquetas en ángulo fueron XD. Por lo que esta es una versión un poco más antigua de ancho, dispositivos más antiguos, pero aún funciona sin embargo. Entonces para que puedas usar cualquiera de estas maquetas, ya sean versión gratuita o esta versión de velocidad, que realmente recomiendo. Por cierto, tienes que hacer clic en los plugins y tienes que instalar plugin angular desde su tienda. Por lo que básicamente puedes hacer clic aquí y escribir en ángulo desde esta barra de búsqueda. Así que haga clic aquí, escriba en ángulo, pulse Intro o Retorno. Y atrevido Howard. Por lo que tenemos este plugin de ángulo justo aquí. Lo tengo instalado. Simplemente puedes instalarlo y luego puedes usarlo. Entonces, ¿cómo puedes realmente usar estos solidos yo mostrarte eso también. Aquí estamos en nuestro proyecto. Y por ejemplo, voy a utilizar esta guía de estilo del proyecto. Entonces déjame navegar a él. Voy a golpear el control D para duplicarlo. Y veamos, se va a posicionar aquí mismo, lo cual es genial. Y simplemente lo voy a llamar presentación de proyectos así. Entonces voy a saltar dentro y eliminar todos estos artículos porque ya no los necesito. Y ahora puedo empezar a construir mi presentación. Por lo que una vez más, puedes saltar para ser manos y puedes explorar todos estos diferentes ejemplos de presentación. Pero solo voy a empezar mi presentación y sólo voy a mostrarte cómo puedes construir tus presentaciones justo dentro de Adobe XD para que puedas tener cada cosa que has creado justo dentro de Adobe XD. Entonces primero que nada, haga clic aquí y luego prototipo y haga lo mismo como siempre lo hicimos. Entonces proyecto de calidad, presentación así. Saltar de nuevo al diseño. Y por ejemplo, puedo arrastrar y soltar mi imagen que utilicé en este proyecto aquí mismo. Entonces lo puedo posicionar aquí, por ejemplo. Yo lo puedo hacer ahí mismo. Y entonces lo que puedo hacer es usar algo así como un rectángulo. O veamos, quizá pueda hacer algo como esto. Gradiente lineal y luego giró un poco. Asegúrate de que mi top esté más oscuro. Asegúrese de que su posición no le guste. Entonces por ejemplo, entonces puedo dar clic aquí. Asegúrate de que ya voy obesidad todo el camino hacia abajo. Asegúrate de bajar la obesidad de este también. Y entonces lo que puedo hacer es traer de vuelta esa imagen. Podría posicionarlo aquí mismo en el Hall superior. Mi tecla de turno, vuelve a mi panel de capas. Y puedo, por ejemplo, llamar a este gradiente z. Y puedo bajar la obesidad de mi imagen a, digamos 40%, algo así. Y entonces puedo seguir adelante y extender mi gradiente para que cubra mi imagen. Puedo saltar dentro de ella así. Y puedo ajustar donde sea distinto. Y así por ejemplo, si va así puede ser así. Entonces obtienes el punto. También puedes enmascarar a estos dos. Para que puedas crear algo como esto. Por lo que el gradiente va en la cima, obviamente Anakin Laura sí baja aún más a 20% tal vez. Entonces lo que puedo hacer a continuación es que puedo saltar dentro de aquí. Puedo copiar este texto. Por lo que nuevo banco para New Age. Puedo saltar a mi presentación. Puedo visitarlo aquí mismo. Lo va a posicionar muy bien aquí. Y entonces qué puedo hacer porque hemos creado nuestro logotipo, simplemente puedo arrastrarlo y soltarlo aquí mismo. Puedo ampliarlo así, pero te recomendaré que uses y versión PNG como lo hicimos. Para que puedas posicionarlo así, o 1234, por ejemplo, solo para mantener las cosas bonitas y sencillas. Ahora porque este es 1920, simplemente puedes usar todos los activos que hicimos para este proyecto. Y también puedes reducir el tamaño de esto, por ejemplo, ahora sigamos adelante. Y si quieres crear ese mismo diseño que tenemos aquí mismo, simplemente puedes saltar aquí mismo e ir al panel Capas y usar este texto para simplemente copiarlo. Vuelve a nuestra presentación saltando aquí mismo, por ejemplo, pegado. Y puedo quitar nuestro botón y llamar a esto por ejemplo, no lo sé, digamos nuevo banco para una nueva página. Y vamos a ver, porque todavía estamos en una pila, también puedes saltar dentro de aquí y aumentar o disminuir esto de básicamente puedo saltar aquí mismo, aumentar esto a, no sé, 58 por ejemplo, o 68. Sólo para que se vea un poco más bonito. Y deadwood que podría hacer es también puedo reemplazar este texto obviamente. Entonces no es exactamente el mismo texto como este, pero sólo quería incluir una maqueta rápida aquí mismo de nuestra página. Entonces para hacer eso, voy a saltar a mis maquetas angulares y cuándo usar una laptop. Entonces puedo usar algo como esto, por ejemplo, Control C. Puedo dejarlo caer aquí mismo, control V. Y como puedes ver, es extremadamente enorme. Se puede desactivar el tamaño de responsabilidad. Puedes sostener tu tecla de turno y reducirla en tamaño a algo un poco más bonito como este. A lo mejor puedes acercar un poco y puedes posicionarlo aquí mismo. Voy a posicionar disco aquí mismo. Y entonces lo que voy a usar es quizá crear una forma que vaya de fondo. Entonces voy a usar a mis padres empezar desde aquí y luego simplemente dibujar una forma como esta. O puedo volver atrás. De hecho, empecemos desde arriba. Entonces voy a dar clic aquí y eliminarlo todo, y empezar una vez más. Entonces empieza con el P. Click justo aquí, y luego justo aquí, sólo para que tengamos una curva de mejor aspecto. Y entonces ese era así y abajo así y luego simplemente la demanda de Kahlo como jabón. Ahora lo que voy a hacer es saltar aquí mismo a mi forma. Yo lo voy a seleccionar desde aquí. Entonces mi forma de héroe, voy a hacer clic derecho en ella, copiar y luego volver a mi forma. Para que puedas ver cómo esto es realmente sencillo. Haga clic en él, haga clic derecho y Pegar apariencia. Entonces como pueden ver, se va a pegar ese gradiente N. Así que voy a posicionar mi texto en la parte superior así. Y ya se puede ver donde esto está empezando a tomar alguna forma. Por lo que podemos posicionar el disco justo aquí. Se puede hacer esto aún más grande. Obtienes la foto. Lo que quiero mostrarles en realidad es que también puedo reducir la obesidad de ésta si no me gusta a algo como esto. Entonces lo que quería mostrarles es esto. Todo lo que necesitas hacer es seleccionar tu pantalla. Y entonces lo que voy a hacer es usar en realidad algunas de estas canciones. Porque si minimizo esto y vuelvo a mis maquetas angulares para el Mac Book. Puedes localizar esto y estos son los tableros de arte para el MacBook maqueta. Por lo que 1440 con 900, en realidad se puede copiar este tablero de arte. Vuelve a tu proyecto y pegado, por ejemplo, en algún lugar por aquí. Y entonces lo que puedes hacer es realmente usar esto. Por lo que Control C o puedes sostener tu vieja llave o lo que sea y posicionar todos estos elementos dentro de tu rpart. Entonces hagámoslo. Puedo, por ejemplo, seleccionar a mi héroe y seleccionar estos son los, SO Control C. Y entonces puedo saltar aquí mismo. Y puedo eliminar todos estos elementos. Debe controlar V, por ejemplo, para posicionarlo en. Voy a quitar su fondo original. Y lo que puedo hacer es realmente aplicar sólo un poco de cambio. Entonces, por ejemplo, puedo saltar dentro de aquí. Laura, esto baja esto solo para que pueda traerlo más de cerca. Puedo mover todo el texto hacia arriba solo un poquito y puedo mover esto acoplado a aquí, la posición raíz, algunos de estos elementos. Entonces esto puede estar aquí y esto puede estar aquí. Esto está bien. Y eso es básicamente todo. Lo que debes hacer a continuación es que esto se llama MacBook. Por lo que necesitamos seleccionar la capa de pantalla como lo hice aquí mismo. Puedes saltar a plug-ins, saltar al ángulo, golpear, aplicar maqueta y simplemente localizar el MacBook desde tus aeropuertos. Ahora porque tenemos muchos diferentes nuestros tableros, tal vez va a ser un poco difícil de navegar, pero simplemente encontrarlo y está convenientemente al final, así que seleccionado y puedes elegir todas estas diferentes opciones si quiero. No voy a hacerlo, simplemente me golpea aplicar y esperar a que haga su magia. Y va a aplicar maqueta de deuda en tan solo un par de segundos. Obviamente, cuanto más grande sea tu proyecto, esto va a tardar un poco más de tiempo en aplicarlo, pero dale solo unos segundos. Y como puedes ver, aplicó esa maqueta realmente muy bien. También puedes quitar esta marca de MacBook si lo deseas del panel Capas. Pero creo que se ve realmente bonito. Ahora lo que puedes hacer a continuación es simplemente empezar a crecer esto. Y una vez más, si te llevo de vuelta a estas presentaciones, puedes ver lo que han hecho. Por lo que usaron este teléfono. Y si te preguntas cómo hicieron eso, déjame mostrarte eso rápidamente también. Entonces todo lo que necesitas hacer es, por ejemplo, seleccionar, no lo sé. Digamos que este iPhone Control C, saltando justo aquí, control V. Y simplemente puedes entrar en tu panel de Capas, ubicado la sombra aquí es un quitar la sombra y es solo una maqueta plana ahora para que puedas golpear control D, haz copias de ella y posiciónala en el espacio así, luego poblar estas pantallas con tus pantallas. Entonces así es como lo hacen. Así es como puedes hacerlo. Obviamente, cuanto más tiempo pases con esto, más va a lucir profesional Dumouriez va a quedar mejor. Por lo que obviamente, te recomendaría que pases el mayor tiempo posible con tus presentaciones. Si necesitas hacer algo como esto, si solo querías presentar, por ejemplo, esta página web, todo lo que puedes hacer es presionar Control E, Seleccionar un escritorio, por ejemplo. Desde aquí voy a simplemente seleccionar mi JPEG, hit export. Se va a exportar. Y lo que voy a hacer es simplemente traer desde mi escritorio y posicionarlo aquí mismo. Entonces así es como puedes mostrar tus páginas completadas. Entonces por ejemplo, puedo presentar otra página aquí mismo. Y cuando los usuarios se desplazan por las manos de la playa por ejemplo, como en estos ejemplos, puedes mostrarles eso para que puedas mostrar qué páginas más largas, todos estos diferentes elementos. Y puedes poblar partes de tu diseño usando cosas como d, para que puedas usar estas maquetas y así sucesivamente. Una última cosa que quiero mostrarte con estas presentaciones de proyectos es 3D. Y 3D es alguna nueva opción en Adobe XD. Y realmente no se puede llamar 3D real, pero se va a imitar 3D. Entonces les voy a mostrar eso en el siguiente video. Entonces te veré ahí. 71. 3D en Adobe Xd: Cuando se trata de 3D, Adobe XD no está realmente construido para 3D, pero recientemente incluyeron esta opción 3D. Y puedes seguir adelante y jugar con él si quieres agregar un poco de especia y un poco más de interés visual a tus proyectos. Y realmente lo recomendaría en algunos lugares, sobre todo cuando estás creando estas presentaciones. Porque entonces puedes mostrar cómo podrían verse tus elementos en 3D y simplemente darles un poco más de especia visual en un poco más de interés visual de lo habitual. Una vez más, Adobe XD no es un software 3D ni 3d2 por ningún medio, puedes usar algo como 3D Max. Puedes usar algo así como una licuadora. B también tiene su propio software. Creo que se llama algo así como se llama i dot adobe dimension. También es un poco delimitado buscado. Si quieres crear un verdadero 3D real, realmente te recomendaría que uses algo como una licuadora, que es gratis, o que uses algo como 3DS Max o Autodesk Maya o cosas así. Pero realmente no necesitas esas herramientas para trabajar como diseñador UX de UI. Esas son solo si quieres ampliar tus conocimientos y ampliar tu área de trabajo y campo para que puedas probar dosis. Ahora mismo te voy a mostrar lo que es posible en Adobe XD. Una vez más, asegúrate de entender que esto es extremadamente limitado, pero tiene algunos usos. Entonces les voy a mostrar los de aquí, sobre todo en presentaciones. Entonces aquí estamos de vuelta en Adobe XD donde te dejé en el video anterior. Por lo que una vez más, puedes imaginar que puedes construir esta presentación y puedes hacer doble clic en tu tablero de arte extendido todo el camino hacia abajo tanto como necesites. Entonces déjame mostrarte rápidamente lo que puedes hacer con 3D en XD. Entonces empecemos con una de estas tarjetas. Por ejemplo, puedo elegir este, chico Control C. O puedes seleccionarlo desde tu panel de ácido. Obviamente si quieres y simplemente arrastra y suelta. Voy a copiarlo de esta manera. Voy a saltar aquí mismo, chico control V para pegarlo aquí. Aquí está. Puedo posicionarme, está en algún lugar por aquí. Y también puedo ampliarlo solo un poquito si quiero, pero va a escalar así. Entonces si quieres hacer eso, realmente te recomendaría que lo exporte como un JPEG o un PNG. Entonces para crearlo para ser un 3D, lo que notarás aquí mismo es que tenemos esta opción de transformación 3D. Entonces, al hacer clic en él, obtienes esta herramienta aquí mismo. Para que puedas agregarla manualmente, todas estas diferentes opciones. Por lo que para la rotación, si se ciernen, se puede ver lo que hace. Entonces exposición, Esto va a ser amplia rotación y esto va a ser rotación z. Entonces en los tres ejes, o simplemente puedes hacer manualmente algo como esto. Para que puedas rotarlo así. Puedes rotarlo así. Y esto es lo que en realidad terminaré usando. Por lo que puedes crear una sombra de fondo, por ejemplo, en tu componente principal, y se mostrará como una sombra aquí mismo en este componente también. Lo que voy a hacer es posicionar esto en algún lugar por aquí. Voy a golpear el control D. Y me aseguraré de que posicione este duplicado aquí mismo en segundo plano. Entonces, alinémoslo a nuestro grupo, por ejemplo, esa es posición, está en algún lugar por aquí. Posicionémonos en segundo plano. Y voy a dar click en el estado de terror. Y se puede ver que me presentó el estado de horror en 3D. Por lo que simplemente puedes posicionar cualquiera de estos puedes trabajar como quieras. Y lo que es genial es que si haces clic en una tarjeta vG, puedes, por ejemplo, incluir una sombra. Y vamos a incluir alguna bonita sombra grande. Entonces 20-20 y 50 por ejemplo, algo así. Y si arrastro mi carta completa, se puede ver que la sombra está muy bien en 3D y se está aplicando para descartar también. Entonces lo que puedes hacer es crear unas bonitas secciones como DES. Entonces tal vez en algún momento esto, y luego usemos un texto una vez más. Entonces voy a golpear el control D en esta posición de texto, por ejemplo, aquí mismo. Y solo puedes imaginar cómo cierto disco y terminan luciendo como una especie de sección separada en tu presentación o en tu diseño. No necesitas hacer esto solo por componentes. Se pueden crear elementos 3D utilizando todo tipo de imágenes diferentes. Podrás crear diseños como DES. Entonces busquemos otro. Entonces usemos, no sé, solo esta imagen o usemos algo. Sí, sí, en realidad usemos esta imagen. Entonces voy a saltar. Entonces significa para el control C, volveré a saltar a mi presentación. Salta aquí mismo. Posición Control-V puede imagen allí. Voy a incluir la sombra de inmediato. Por lo que 202020. Por lo que esta es un poco más oscura y debido a que se incluye mi transformación 3D, simplemente puedo rotar en otra dirección. Entonces algo así. Y se puede ver cómo se ve eso. Para que puedas posicionarlo a la parrilla, lo cual es fantástico. Entonces puedes hacer Control D e incluir cajas de impuestos como DES por ejemplo. Para que se pueda ver a dónde va esto. También puedes aumentar el tamaño así, por lo que aumenta en 3D. Y si quieres apagar esta opción porque puedes ver lo que seleccione, me muestra que en 3D simplemente puedes hacer clic aquí y luego puedes empezar a editarla en tiempo real y en verdadera especie de look y sentir si quieres. Entonces ese es el look y 3D en Adobe XD. Una vez más, como puedes ver, es realmente limitado, realmente básico, pero puedes usarlo para algunas cosas básicas. Y si quieres algunas cosas más avanzadas son realmente recomiendo algo así como una licuadora, porque una vez más, es gratis y puedes encontrar un montón de estos diferentes tutoriales en YouTube, sobre todo para que puedas aprender un poco más sobre licuadora ahí. Pero una vez más, punto de este video es solo para mostrarte cómo puedes agregar algo de especia a tu diseño. Cómo puedes mejorar tus habilidades de presentación, y cómo puedes llevar tu diseño al siguiente nivel. Porque tal vez algún otro diseñador podría no usar animaciones. Tú lo haces. Las madres diseñadores podrían usar 3D. Se puede. Para que puedas elevarte encima de todos estos otros diseñadores y mejorar tus posibilidades de conseguir un trabajo, por ejemplo. Para que puedas hacer todas estas cosas bien dentro de Adobe XD, como te mostré. que puedas empezar desde la planificación hasta la arquitectura de sitios web, wireframes en papel, wireframes en diseño y animación de huevo dxdy, diseño responsive, guía de estilo de proyecto para finalmente presentación. Puedes hacer todas estas cosas en Adobe XD. Y si estás usando un plan gratuito, puedes hacer todas estas cosas de forma gratuita. Entonces eso es todo para este curso. Este es el video final de este curso, y de verdad espero que lo hayan disfrutado y los veré en la siguiente lección. Vamos a explorar un poco más cosas de Adobe XD. 72. Estructura de la carpeta para exportar los recursos: En esta parte del curso, vamos a hablar de exportar meta de nuestros activos para clientes y desarrolladores. Y les voy a mostrar cómo se puede hacer eso de la manera más segura. Entonces básicamente en la sección anterior, te expliqué cómo puedes compartir eso. Todo eso en Adobe XD cuando lo subes a la nube y los desarrolladores básicamente pueden luego descargar todos esos ácidos. Pero una vez más, si estás usando la versión gratuita de Adobe XD, solo tienes ese proyecto. Por lo que tan pronto como se complete ese proyecto, ya no tienes la opción de compartir esos archivos. Entonces básicamente hay que esperar a que desarrollen ese producto para que en tern te prohíba crear cualquier archivo nuevo, en trabajar con nuevos clientes. Entonces, para evitar eso, lo que puedes hacer es exportar a tu escritorio y luego simplemente poner todos esos archivos dentro de una carpeta zip y luego compartir esa carpeta zip con tus clientes y desarrolladores. Ahora hay muchas opciones diferentes puedes compartir esto, pero te voy a mostrar mi camino. Y básicamente vamos a exportar todos estos activos como activos JPEG, PNG, o SVG. facetas de Pdf son básicamente solo para todos esos archivos. Y como ya les mostré, como, por ejemplo, para un breve de diseño, por ejemplo, para algunas propuestas de proyectos y así sucesivamente. Por lo que todas esas cosas que puedes hacer en z y esas son geniales para exportar este PDF. Pero básicamente estos tres formatos de archivo, así que JPEG, PNG, y SVG es lo que vas a estar usando todo el tiempo. Por lo que una vez más, tenemos un nuevo diseño de página web bancaria. Ese es el nombre de nuestro proyecto. Para que pueda crear mi carpeta. Aseo, por ejemplo, banco real, sitio web, diseño, activos. Calidad que dentro de esta carpeta. Y déjame traerlo aquí mismo. Vas a colocar tu archivo Adobe XD, obviamente cuando el cliente sea x2. Y dentro de esta carpeta principal, vamos a colocar algunas carpetas adicionales donde realmente vamos a incluir en estos activos dentro. Además, en esta carpeta principal, puedes incluir algo así como un PDF donde creaste enlaces para esas fuentes que utilizas o puedes descargar una fuente, ponerla dentro del paquete. Por ejemplo, para la fuente Poppins, viene dentro de un archivo zip. Puedes poner ese archivo zip aquí dentro de esta carpeta. Y luego el desarrollador puede usar la fuente de deuda de inmediato. Entonces empecemos y te voy a mostrar cómo me gusta hacer cosas así. Entonces si saltamos dentro de un diseño de sitio web como este, tenemos todas estas páginas diferentes. Por lo que si hacemos click aquí para seleccionar esta página, se puede ver que tenemos diseño de homepage. Entonces primera carpeta que vamos a crear, y los voy a etiquetar en números porque vamos desde Homepage en adelante es el número uno. Página principal. Entonces vamos a seguir adelante. Y si hacemos zoom un poco para que podamos ver todos estos nombres de páginas diferentes. El número dos va a ser cuentas. El número tres va a ser un préstamo. Tarjetas número cuatro. Y déjame Control-C, Control-V. Y esto van a ser cinco invertidos. Hagámoslo una vez más. Esto va a ser seis digitales. Y porque si te acuerdas, tenemos los mismos activos básicamente en login e inscribirte. Entonces lo que puedo hacer es realmente combinar esas dos páginas. Para que pueda hacer algo así como siete login slash Siam. Y sólo para que podamos redondear dosis a páginas al mismo tiempo, entonces podemos pasar al diseño del tablero y ver qué tenemos aquí mismo. Por lo que tenemos diseño de tablero. Entonces esa va a ser nuestra orden de guión número ocho. Para diseñar. A continuación, vamos a tener un conteo. Para que podamos seleccionar este nueve. Esto va a estar en la cuenta de dashboard. Así. Vamos a crear uno más. Por lo que esto va a ser un tablero de transacciones. Y va a ser el número diez. Y que detengan rápidamente el video aquí para que pueda hacer todos estos y luego podamos seguir adelante de ahí para que no te aburra más. De acuerdo, entonces ahora que eso está terminado, como pueden ver, ahora tenemos 14 de estas carpetas. Dentro de cada una de estas carpetas, vamos a incluir diferentes tamaños. Entonces, ahora exploremos la deuda. Si te llevo de vuelta a nuestra página de inicio justo aquí, puedes ver que tenemos esta talla única, que es nuestra talla original, y luego tenemos todas estas otras tallas. Entonces vamos a crear esas carpetas. Entonces para saltar a mi estructura de valencia, una vez más, vas a poner aquí tu archivo XD. Vas a poner el archivo zip, que las fuentes por ejemplo, aquí, vas a poner en breve de diseño aquí, propuesta de proyecto. Entonces todos esos documentos, puedes ponerlos aquí o puedes llamarlos, Por ejemplo, documentos, y luego poner todos esos en una carpeta separada justo aquí con todas estas otras carpetas, todo depende realmente de ti. Por lo que dentro de su página de inicio, vamos a crear una lista de diferentes carpetas. Entonces voy a llamar a este principal crear número dos. Entonces ese es nuestro tamaño principal. El número dos es grande y los escritorios. El número tres es un gran y dispositivos. El número tres es, por ejemplo, tabletas. O podemos darle exactamente la escena nombrada más alta o que quieras. Por lo que los dispositivos medianos recortan los dobletes. Mi papá. Y por último, tenemos estos dispositivos extra pequeños al final de cinco dispositivos extra pequeños. Entonces lo que vas a hacer es básicamente creo que te vas a sacar la foto. Vamos a exportar por separado todos estos tamaños. Obviamente, lo que puedes hacer es simplemente seleccionar todas estas carpetas Controlar C, volver aquí, controlar v, volver a ésta, controlar V, y hacer eso para todas estas carpetas obviamente. Pero debido a que solo tenemos estos tamaños para la página, solo los vamos a hacer para una página de inicio. También voy a mostrar cómo se puede exportar el dashboard. Pero básicamente solo tenemos una página la cual tiene homepage en nuestro caso. Pero solo te puedes imaginar cuando haces todos estos otros, vas a exportar esos también. Entonces básicamente esa es nuestra estructura. En el siguiente video, te voy a mostrar cómo puedes empezar a exportar qué formatos de archivo son importantes y cómo puedes decidir qué formato de archivo quieres exportar para cuál. Entonces te veré ahí. 73. Exportar tus recursos: Está bien, ahora volvamos a ello y te voy a mostrar cómo puedes empezar a exportar estos. Entonces obviamente vamos a saltar aquí mismo y empezar a exportar todos estos elementos. Entonces Capas, panel es obviamente bastante importante. Voy a saltar aquí mismo. Y para empezar a exportar, lo que puedo hacer es golpear control es decir. Y lo primero que realmente voy a hacer es cambiar hacia dónde van mis archivos de exportación. Por lo que puedes golpear este cambio. Y desde tu escritorio o donde quiera que esté, puedes seleccionar esta carpeta que ya creamos, que es esta carpeta. Y queremos posicionar básicamente esto dentro de nuestra carpeta principal. Entonces esta es nuestra página de inicio. Es nuestra carpeta principal porque es un tamaño medio y simplemente puedes seleccionar esa carpeta y luego todos los activos que exportas de este discurso van a ir a esa carpeta en particular. Entonces lo que voy a hacer por este es elegir SVG. Y obviamente tienes todos estos ajustes diferentes que puedes usar. Puedes ver con tu desarrollador si necesitas ajustar un poco más alguno de estos, o si simplemente puedes usar estos como predeterminados, casi siempre los uso como predeterminados y nunca tuve ningún problema. Entonces, básicamente cuando sí golpeas la exportación, va a empezar a exportar. Y eso es todo. Nosotros dimos estos nombres. Por eso son importantes para exportar. Tenemos icono telefónico, tenemos icono de ubicación, y tenemos estas dos banderas. Tan extranjero y icono de ubicación, voy a exportar como SVG también. Pero estos dos volantes, por ejemplo, puedo exportar como PNG, que se puede, realmente no hay problema, o se puede exportar como GPX. Por lo que hay estos ajustes para JPEG y PNG, y vamos a correr rápidamente a través de ellos. Por lo que el formato es la calidad JPEG es 100%. Puedes bajar la calidad para optimizar tu imagen y hacerla más pequeña si quieres. Se puede exportar para el diseño, que básicamente es solo este tamaño único. O puedes exportarlo para web y se exportará en un solo tamaño, n el doble del tamaño, lo cual va a ser más fácil que para que los desarrolladores lo usen más adelante. Entonces hagámoslo. Exportar así. Ahora pasemos a nuestra sección de héroes N para el nav. Básicamente lo que puedes hacer es exportar el logotipo. Por lo que hit control ie. Nosotros lo vamos a exportar como SVG porque queremos mantener la calidad tanto como sea posible. Y para el botón, básicamente, nunca estás exportando a botón así porque los desarrolladores siempre van a incluir la fuente ellos mismos dentro del botón. Entonces básicamente nunca lo estás exportando así como el botón de avión como está aquí mismo. Entonces básicamente lo que hay que hacer es exportar este botón como en su estado predeterminado, como está aquí mismo, y exportado en estado de desplazamiento. Entonces aquí tenemos botón de inicio de sesión. Entonces lo que puedo hacer es simplemente ocultar el texto de inicio de sesión, dar click en él. Ella controlaría ie. Voy a exportarlo como SVG. Haga clic aquí. Y voy a volver a mi carpeta ubicada cuando esté abierta, haga clic en Ver, icono grande para que puedas verlo. Entonces Botón de inicio de sesión aquí es. Voy a cambiar su nombre a default. Porque ese es el estado por defecto. Y ahora si cambio al estado Horace, puedo ocultar mi texto una vez más, exportado una vez más, una vez más como SVG. Y si salto aquí mismo y refresco esto, ves que tenemos un botón de inicio de sesión ahora. Y voy a cambiar su nombre para pasar el rato, sólo para que ese desarrollador sepa en qué estado está en cuestión. Para que pueda volver, traer esto de vuelta, traer esto de vuelta también. Y eso es básicamente un dos. Ahora podemos mover uno, pero antes de hacer nav, BG necesita ser exportado. Entonces hit control, es decir, voy a exportarlo como SVG. Y una vez más, porque exporté este nav y el fondo como archivos SVG, que puedes hacer es básicamente seleccionar múltiples archivos y que quieras exportar como SVG, que te voy a mostrar ahora. Entonces voy a seleccionar a mi héroe Bu Jue, forma de héroe. Y voy a seleccionar múltiples de estos elementos o los tres, forma de héroe y héroe BG. Voy a exportarlos todos como SVG. Por lo que tuvo el control Lee, voy a mantener todos estos ajustes hit Export. Y de esa manera puedes exportarlos mucho más rápido que exportarlos uno por uno. Aquí, voy a exportar sólo este héroe círculos. Entonces él controlaría como SVG, no quiero exportar la mezquita porque los desarrolladores pueden entender dónde pongo la mezquita y luego pueden exportarse como deuda. Si quieren usar la versión PNG, puedes presionar Control E, y luego puedes seleccionar esto como PNG para web. Por lo que 12 tamaños, está diseñado en una x, por lo que a este tamaño en particular, que puedan saber cómo exportarlo y cómo mover uno desde allí. No se exporta el texto. Los desarrolladores van a utilizar el texto. Vamos a exportar esto como PNG. Por lo que tenía control li, elige PNG aquí, elige la web hit export va a exportarlo como 1X y 2X. Y por último, tenemos que hacer lo mismo por nuestro botón. Entonces solo recuerda, porque usamos exactamente este mismo botón a lo largo de nuestro diseño, solo lo cambiamos aquí más tarde dentro de nuestro tablero. Vamos a llamarlo botón principal, como ya está aquí mismo. Entonces voy a hacer lo mismo. Voy a ocultar MyText hit controlando, exportado como SVG hit export, saltando aquí mismo y ver qué es. Entonces él para botón principal y renombrarlo a default, que es nuestro estado por defecto. Y puedes ver que es justo aquí donde podemos escribir en estado predeterminado como quieras. Yo sólo voy a mantenerlo así, que traerá esto de vuelta, volver a flotar, ocultar esto, golpear Control, Lee, golpear a Exportación, y volver a aquí. Esto va a ser mezquino botón hover. Entonces, una vez más, los desarrolladores pueden saber cuál es, y eso es básicamente todo. Así es como vas y sigues exportando todos estos. Ahora, cuando se trata de estos, lo que puedes hacer es seleccionar tu tarjeta de contenido y exportarla así, solo sin ningún texto. Para que puedas ocultar todos los textos. Incluso puedes esconderte, aprende más. Incluso puedes ocultar esta flecha y puedes exportarla así. Entonces puedes ir al estado de horror en exportado de la misma manera. Pero lo que realmente recomiendo es que exporte todos estos elementos por separado. Por lo que una vez más, puedes traer este texto. Y debido a que queremos exportar todo esto como SVG, lo que voy a hacer es en realidad seleccionar mi tarjeta BG, seleccionar mi flecha, flecha y seleccionar mi icono. Voy a cagarme, pega Control E SVG. Y luego voy a volver al estado de horror. Voy a ir a la tarjeta BG color actual porque necesitábamos ahora. Y voy a exportar icono de flecha, pero voy a cambiar su nombre. Por lo que una vez más, puedes hacer esto. Tienes que hacerlo así de otra manera. Y la función auto animate no funcionará. Entonces debido a que exportamos DC-3 desde aquí, los desarrolladores pueden usarlo directamente desde aquí y no tienen que copiar y pegar lo que sea. Porque tenemos este círculo. Pueden usar ese mismo círculo, pero aquí es un poco diferente. Entonces debido a que esto se llama tarjeta de contenido, quizá podamos darle el nombre de contenido parte círculo. Tan mortíferos, van a poder entender los dados arcade, la deuda. O si quieres, puedes hacer eso por todas estas formas. Entonces en lugar de círculo de línea cruzada, puedes llamarlos tarjeta de contenido, cruzar contenido de línea actual círculo de tarjeta de contacto, y luego hacerlo así. Déjame golpear el control D para explorar este círculo, porque como dije, simplemente voy a usar estos. Entonces vamos a ver, círculo de tarjeta de contenido y verdadera conjetura masiva, ¿lo verías exportado como máscara? Por lo que hay que Desagrupar esta mezquita y luego agruparla una vez más para poder exportar esto. Entonces déjenme mostrarles que desagrupar mezquita, ocultar esta tarjeta de contenido círculo controlar el SVG, eso está bien. Entonces puedes mostrar este turno Control M para volver a ponerlo dentro de la máscara, máscara, y eso es básicamente todo. Entonces lo que necesito hacer aquí mismo es exportar este ícono así. Entonces, ¿cómo puedo hacer eso? Puedo crear un estado diferente para ello, que va a ser mucho más rápido, mucho más simple de lo que puedes simplemente cambiar esos estados. Pero finalmente, no puedo exportarlo como está aquí mismo. Por lo que puedo cambiar su nombre aquí. Pero una vez más, no funcionará bajo los autoenemigos. Entonces hay que hacer eso importó. Por lo que hay que encontrarlo aquí. Veamos qué es. Por lo que P para cuentas personalizadas icono y cambiar su nombre a un valor predeterminado como ese. Y luego vuelve a aquí. Controlaría es decir una vez más. Svg exportó, y ahora lo vamos a llamar hover. Veamos qué es. Esta es la decisión por defecto para pasar el cursor. Y ahora, una vez más, los desarrolladores podrán acceder a esta masiva calidad, como se puede ver, sin ninguna preocupación, porque lo exportamos como SVG. Y eso es básicamente todo. No te aburriré con hacer todos estos elementos o recientemente porque ahora este video nos va a llevar sirena sobre cuántas horas. Volvamos ahora a esto. Y por ejemplo, para este tipo de cambio, puedo seleccionar todas estas banderas y exportarlas como jpegs. Porque ya tenemos Inglaterra, porque la tomamos de aquí. No tenemos que exportarlo, pero aún así lo voy a exportar. Pero antes de que lo haga, puedo saltar aquí mismo y llamar a esto, veamos a Inglaterra arriba ahora. Porque quiero asegurarme de que el desarrollador use el tamaño correcto. Y esto va a ser Inglaterra 2x top nav, así. Porque en el top nav tenemos una talla y aquí tenemos otra talla. Entonces si lo selecciono desde aquí, control es decir, puedo elegir SVG, pero iré con PNG, hit export. Se va a exportar todos esos al mismo tiempo. Como pueden ver si golpeo la actualización, pueden ver que, por ejemplo, Suiza está en dos tamaños, encuestas en tamaños, porque Serbia no está repitiendo aquí. Todavía podemos mantenerlo así. Pero por ejemplo, también puedo hacer el tanque de navegación superior. Entonces Serbia, top nav. Puedo seleccionar estos y cambiar este nombre también. Entonces, una vez más, desarrollador sabe adónde se supone que debe ir. Que cierre rápidamente todos estos y podamos seguir adelante. Por lo que una vez más, esto tiene el nombre de imagen. Entonces este es el festival de la semana. Por lo que te recomendaré que lo llames así o puedes darle unos nombres más cortos. Entonces por ejemplo, así. Por lo que despertarías imagen del festival. Puedes mantener las cosas simples así si quieres. Una vez más, esta imagen aquí mismo, como puedes ver, sólo se llama imagen de tarjeta grande, pero puedes llamarla, por ejemplo, increíble. En inversión. Atrás. Sólo imagen, que sé que es un poco mucho. O puedes hacer algo así como, por ejemplo, imagen de servicios modernos. Por lo que ahora cortomaste eso o puedes hacerlo así. Entonces realmente todo depende de ti. Asegúrate de acordar con clientes y desarrolladores cómo quieres exportar esas imágenes. Y finalmente, una vez más, imágenes, puedes exportarlas como JPEG o PNG. Generalmente se recomienda Png si tienes una imagen con un fondo transparente, como lo hacemos, por ejemplo, como yo exporto este, como lo hacemos aquí. Esta es la imagen sin ningún fondo, por lo que generalmente se prefiere exportar eso como PNG de cualquier manera se recomienda. Pero con todas estas otras imágenes que no tienen ningún recorte a su alrededor, simplemente puedes exportarlas como jpegs. Entonces eso es básicamente todo para todos estos duraderos o qué mostrarte es para el pie de página, Lo único que voy a exportar aquí es el fondo. Pero aquí voy a exportar todos estos como SVG, solars saltan dentro de ahí, ya tengo mi logo exportado. Entonces si salto por dentro, click L Para encontrar mi logo. Veamos qué es. Curioso. Y podemos llamarlo color logo, por ejemplo. Porque aquí tenemos el logo blanco y negro. Entonces ahora si selecciono todos estos, así que vamos a seleccionar el logotipo, icono de ubicación, formar un icono y el icono de correo electrónico. Una vez más, tengo esto, así que tengo mi ubicación e iconos extranjeros arriba. Son del mismo tamaño, por lo que no seleccionaré dosis. Entonces ubicación en la fuente, pero seleccionaré mi icono de correo electrónico y seleccionaré Info strip BG controlando. Escogeré SVG de aquí, donde está, pega Export y se va a exportar esos como SVG. Por lo que ahí lo tienes básicamente adeuda tu exportación. Así lo hago yo. Así es como siempre lo he hecho. Entonces básicamente en pocas palabras, envuelve las cosas cuando estás exportando estos iconos. Por ejemplo, si tienes varios estados, debes decirle a tus desarrolladores a través los nombres de archivo que tienes esos múltiples estados. Entonces como lo hicimos aquí en Logo y logo color. Lo mismo para los botones. Por lo que el botón principal y el botón principal se desplaza. Lo que también puedes hacer es crear un sistema de diseño ya que estás trabajando como un te mostró un ejemplo adulto. Entonces en ese ejemplo viste que colocaron todos esos diferentes elementos uno encima del otro. Por lo que simplemente puede seleccionar el elemento que ya tiene ese nombre. Entonces por ejemplo, color logo o blanco y negro o lo que sea, luego exportar esos diferentes elementos. Olvidé renombrar esto a logroll, blanco y negro por ejemplo. Entonces, cuando empieces a exportar todos estos cuatro desarrolladores, podrán entender qué es todo. Entonces cuando lo abran, será exactamente del mismo tamaño que en diseño. Tendrá exactamente los mismos colores. Tendrá exactamente las mismas opciones. Y por último, los mismos nombres que pretendías para todos estos diferentes elementos. Entonces eso es básicamente todo para exportar. Te puedes imaginar que todo este proceso te mostré, lo harás por todas estas páginas diferentes. Pero por ejemplo, aquí tenemos, ¿qué es esta cuenta? En lugar de en esta carpeta, elegirás la carpeta Cuentas principal, y luego exportarás todos tus activos. Son de esta página en particular. Ahora, pasemos a responsive. Y dentro de responsive, harás exactamente lo mismo. Entonces, por ejemplo, digamos que lo has completado todo. Has completado todos estos en este tamaño que todos estos en este tamaño, todos estos indecisos, básicamente tienes todas las páginas en todos los tamaños. Lo que te recomendaría hacer es realmente sencillo. Ir a la página principal, exportar. Todos estos luego pueden ir a este tamaño de página principal, exportar, este tamaño de página principal, exportar esto y esto. Y luego después de que hayas terminado, pasa a esta página siguiente. Lo que puedes hacer es en lugar de perder el tiempo de exportar todos estos, simplemente puedes exportar, digamos esto una vez. Este principal, vamos a ver cómo llamamos al nav BG. Por lo que exportaste solo una vez y luego simplemente puedes copiar y pegar esos elementos entre carpetas. Entonces tenemos exactamente esta misma cosa en la parte superior. Tenemos exactamente esta misma cosa con la parte superior. Tenemos exactamente el mismo héroe con exactamente los mismos elementos. ¿ Lo único que está cambiando es esta imagen y la ubicación de todos estos elementos por parte de los desarrolladores alineará todos estos ítems más adelante en código. No exportarás este botón una vez más porque ya lo exportaste. Por lo que simplemente puedes ir justo aquí donde estamos a la página de inicio. Es decir, puedes encontrar tu botón. Entonces Botón de inicio de sesión hover y botón de inicio de sesión predeterminado. Vas a ir a Control C, por ejemplo. Entonces vas a ir a Cuentas Mayo y Control V. Así que asegúrate de que todos los elementos que se están repitiendo. Entonces por ejemplo, aquí abajo, tenemos este nuevo banco y toda esta información. copió esa información de tu página principal de escritorio desde aquí, y luego simplemente entra dentro de todos estos tamaños medios y pulsa Control V. Vas a hacer eso lo mismo para todas estas otras páginas. Para esta sección, sobre todo, se puede ver que tenemos estos tres iconos que se están repitiendo a lo largo de todas nuestras páginas. Entonces, ¿por qué perderías tu tiempo e irías exportarlas todas entre todas estas páginas, puedes si quieres. Pero ¿por qué perderías tiempo cuando simplemente puedes seguir adelante y copiar y pegar todos esos elementos a lo largo de tu diseño. Entonces básicamente lo mismo aplica con la exportación como lo es con el diseño. Cuando estés empezando, te va a llevar mucho tiempo aplicar todos estos principios, elementos, colores, tamaños, etcétera. Pero cuando te pongas en marcha, sobre todo con este ejemplo y este ejemplo. Entonces básicamente, como dije, cuando estábamos diseñando estos, esta sección en el medio es lo que va a cambiar. Básicamente, todas estas organizaciones se van a quedar casi exactamente iguales. Lo que estás haciendo aquí en el héroe es cambiar el texto y esta imagen, eso es básicamente todo. Todo depende de ti si quieres ajustar la posición de estos tres elementos, por ejemplo, en este fondo elementos. Pero generalmente quieres que todo en el medio es lo que va a cambiar. Entonces, ¿por qué exportarías todo cuando puedes exportarlo una vez y luego simplemente copiar y pegar a lo largo de tu deseo. Entonces así es como hago exportando, y por eso me gusta hacer exportando de esta manera porque es mucho más sencillo para mí exportarlo para desarrolladores. Y van a poder acceder a esos expedientes dentro de un año, de dos años, dentro de diez años, no importa. Exporté todos esos archivos y luego les envío archivos de dosis. Antes de terminar, quiero terminar con esto. Por lo que puedes exportar estos si quieres simplemente como JPEG, pero no tendrán demasiado sentido. Pero como te mostré en los videos para compartir, desarrolladores, cuando hagan clic en uno de estos tableros de arte van a poder ver todos estos son diseños de cuadrícula para ellos mismos para que puedan aplicarlos directamente en código. Lo que quería mostrarles es esto. Entonces, básicamente, puedes exportar todos estos así, porque esto es solo un texto. No vas a exportar el texto. En cuanto a estas etiquetas, puedes exportarlas así, o simplemente puedes saltar dentro de aquí y exportarlas igual que este ícono. Por lo que puedes exportarlos como la marca. Pero obviamente marca va a cambiar todo el tiempo porque los usuarios no van a seguir yendo a las mismas marcas. Por ejemplo, un día podrías ir al café Starbucks, Al día siguiente podrías ir a costar el café son el día después de papá, podrías ir al sueño del café. Por lo que todas esas diferentes cafeterías no van a aparecer aquí mismo como logotipos, sino que son sólo textos llanos. Entonces, por tanto, no vas a exportar eso. Simplemente vas a exportar este ícono para la comida, porque la comida entra en juego tanto para comer como para beber también. Por la ropa. lo mejor fuiste a comprarte los zapatos, vamos a ver, TI sí, pero todavía se va a mantener en este ícono porque es la ropa. Por lo que no importa si es XyDa agregado COMO H&M, lo que sea, todavía va a mantener este ícono. Entonces, por lo tanto, simplemente exporta solo este ícono. Al igual que con estas formas de fondo, puedes, por ejemplo, exportarlas si quieres, digamos desde esta primera página donde está arriba. Entonces desde aquí, puedes exportarlos desde aquí y luego dejarlos así. Puedes hacer lo mismo por paginación y simplemente copiar y pegar a lo largo de tu diseño. Lo que vas a estar haciendo para esto en realidad es que puedes saltar dentro de este gráfico. Y puedes seguir adelante y esconder tus máscaras. Entonces puedes hacer esto y luego exportar tu círculo así, o simplemente puedes desagrupar la máscara como ya te mostré anteriormente. Entonces haga clic derecho en la máscara de grupo, luego oculte esta parte. Haga clic aquí, controle P, y luego exporte como SVG. Voy a exportarlo a la misma carpeta, no importa. Por lo que da clic aquí para traerlo de vuelta. O simplemente puedes golpear el Control Z tres veces para volver atrás y luego moverte de ahí. También vas a exportar estos como SVG. Y eso es básicamente todo. Eso es todo lo que quería decirte. Este va a ser el logo de J Berg. Simplemente lo exportas una vez y lo copias y pegas lo largo de tu diseño porque es exactamente lo mismo. Se pueden exportar estos iconos unos y eso es básicamente todo. Eso es todo por exportar deudas, por compartir. Una última cosa que quiero mostrarte es la creación de la guía de estilo. Y en el siguiente video te voy a mostrar cómo podemos crear esa guía de estilo, cómo puedes personalizarla. Y luego finalmente, cómo se puede compartir con tus clientes y desarrolladores. Vi, nos vemos ahí. 74. Crear estilismo del proyecto: lo que ahora finalmente llega el momento de terminar este proyecto y terminar el discurso de Graham básicamente. Y ahora es el momento de crear la guía de estilo. Y te mostraré cuál es la guía de estilo, cómo puedes usarla y cómo podemos crearla para tu proyecto, más grande que sea tu proyecto. Básicamente la guía de estilo es la colección de todos tus elementos y pautas para tu diseño. Por lo que el estilo, guía de estilo puede ser extremadamente enorme con miles de elementos diferentes. Y ahí es donde es mejor crear ese sistema de deseos, que ya te mostré. Pero si estás creando un pequeño proyecto como nosotros aquí mismo, simplemente puedes crear un tablero de arte y puedes ponerlo dentro de tu archivo. Y luego puedes compartir esa guía de estilo con tus clientes y sobre todo con los desarrolladores. Entonces, ¿cómo puedes empezar? Simplemente haz clic aquí para crear un nuevo aeropuerto. Y voy a crear este grande, así 19-21, Y lo posiciona justo aquí, pero lo voy a poner todo el camino por debajo de todo lo demás. Entonces por aquí, me voy a trasladar a mi prototipo. Voy a dar click aquí mismo para crear otra trama. Y lo llamaré estilobado o guía de estilo de proyecto. Y ahora puedo moverlo un poco más hacia abajo. Vuelve a mi diseño, dale un nombre de guía de estilo de proyectos. Y ahora porque se crearon estos valores que realmente no quiero. Lo que voy a hacer es usar mi vieja clave para copiar mi rpart a aquí. Entonces lo que puedo hacer es básicamente ver estos valores que he creado. Entonces voy a usar los mismos valores. Entonces voy a bajar esto al 7% aquí mismo. Entonces vamos a tener la misma obesidad fuera de nuestra red. Por lo que 12 columnas, 6080 a 1038. Entonces hagámoslo. Por lo que 6080 a 138, que está bien. Ahora puedo seguir adelante y quitar esto porque ya no lo necesito. Y ahora sigamos adelante y empecemos con nuestra guía de estilo. Lo que puedo hacer es básicamente enumerar todos mis artículos. Primero ampliaré esto y moveré esto arriba o hacia abajo como quieras porque ya no lo necesito realmente. Lo que puedes hacer es saltar dentro de tus bibliotecas, dentro de tu panel de activos y ver lo que tienes aquí mismo. Por lo que tienes colores, tienes estilos de carácter, y tienes todos estos componentes diferentes que creaste a lo largo de todo tu proceso de diseño. Ahora lo que puedes hacer es pasar por aquí y simplemente arrastrar y soltar estos elementos aquí. O puedes ir a lo largo de tu diseño. Entonces aquí mismo, por ejemplo. Y luego selecciona y copia elementos de aquí, luego basarlos en tu guía de estilo. Entonces, empecemos. Lo que puedo hacer primero es que puedo, por ejemplo, enumerar todos mis colores. Por lo que puedes golpear t para la Herramienta Tipo, Escriba en colores. O puedo ir todo capital. De todas formas que quieras. Se puede seleccionar y aplicar, por ejemplo, este 92, así. Sólo para que sea muy visible y vaya bien con nuestro texto. Tan vieja posición que ahí mismo. Y vamos a ver, tal vez pueda posicionarme así 12345678, digamos por ejemplo, luego sobre él te había controlado, posicionado está abajo y usado. A ver. No sé, 24 regulares. Asegúrate de que sea así. Asegúrate de que esto también sea así. Entonces lo que voy a hacer es a ver, 123456789. Voy a crear un rectángulo. Por ejemplo, como esto puede ser. Entonces de dos a cuatro de ancho, veamos dos a cuatro. Entonces sólo una plaza básica y lo que dije nueve. Así que repite grilla y cree nueve instancias. Por lo que 2467. En realidad es demasiado grande, así que volvamos a esa original y tal vez hacerla un poco más pequeña. Entonces algo como esto, creo que va a funcionar bien. Voy a quitar mi frontera. Repetiría grilla y ahora crearía nueve sobredosis. Entonces si no puedes verlos, simplemente puedes terminarlos como esta rejilla de desagrupamiento y C, así 24689. Entonces voy a quitar estos dos. Entonces en realidad estos dos. Y ahora puedes empezar aplicando tus colores. Para que pueda dar click en estos, para que pueda dar click en éste. Esto es blanco liso. Haga clic en el siguiente, gris claro, siguiente uno gris oscuro. Y luego simplemente pasar de ahí y aplicar todas mis muestras de color a agradable. Así que así. Lo que puedo hacer es también darles nombres aquí, pero simplemente voy a organizarlos de una manera diferente. Entonces los voy a posicionar así. Entonces, una vez más, de izquierda a derecha, tal vez solo hay que hacer recolectados hacer cosas de manera realmente organizada, pero todo depende realmente de ti cómo quieres hacer eso. Entonces ahora que has presentado todos estos, lo que también puedes hacer es cambiar el color de tu de tu guía de estilo. Nuestro informe. Por lo que puedes hacer click aquí y ir todo el camino negro, por ejemplo. Y ahora lo puedes presentar como DES. Entonces en especie de modo oscuro si quieres, puedes usar un color neutro que no usaste. Por ejemplo, éste porque no aparece en ningún lugar de nuestro proyecto donde simplemente podríamos usar el blanco. Todo depende realmente de ti y de cómo quieres estructurar las muertes. A continuación lo que puedes hacer con tus colores es bastante sencillo. Se puede hacer Control D, posicionar distritos aquí, más. Está todo el camino justo aquí. Y básicamente asegúrate de que esto esté en el centro de esto. Y simplemente usa el código hexadecimal para ello. Entonces vuelve a unos colores. Haga clic derecho. Puedes copiar o puedes hacer clic con el botón derecho. A ver, cambió los colores así. Puedo hacer clic derecho en Editar. Y ahora puedes copiar el código hexadecimal en sí, saltando justo aquí, controlar V. Y ahora puedes basar ese código hex en. Para que puedas más vino que puedas para controlar el disco de posición justo aquí. Haga clic derecho en Editar. Y puedes copiar el código hexadecimal de este. Y que detengan rápidamente el video para que pueda seguir adelante y terminar todas estas solo para mostrarte cómo se ve eso. Y ahora que he terminado dosis, lo que puedo hacer a continuación es saltar aquí mismo. Asegúrate, por ejemplo, que esto esté en el centro de mi plaza así, y llámalo blanco llano. Puedo asegurarme de que sea x 16 por ejemplo. Por lo que mucho más pequeño para que puedas caber y yo puedo usar este color por ejemplo. Y puedes posicionarlo aquí así. Control D. Y para que las cosas sean más rápidas, puedes hacer doble clic en el control CDO Club V, y simplemente cambiarlo para inducir color. Asegúrate de que estén en su posición D de control hacia el centro. Asegúrate de que este es el disco va desde el centro y no está alineado a la izquierda. Por lo que no nos da esos problemas. Cámbialo y debemos decolorarnos y moriremos. Y en realidad puedes seguir adelante y hacer esos cambios para todos ellos. Entonces este es nuestro verde medio porque cada vez que hagas clic en este texto le va a aplicar color de deuda. Entonces Control D, seguro que está aquí. Yo puedo hacer es secundaria verde, así. Y hagamos lo mismo rápidamente por todos ellos. Vi admin lo posicionó aquí. Al igual que este color principal, este gris oscuro. Yo puedo hacer esto. Casi negro como puedes ver, si eres Tom habla como yo, entonces vas a poder hacer todos estos cambios más rápido y finalmente lo cambiaste de nuevo a aquí, alinearlo y rebaño lechero, tenemos completó todos nuestros colores. Ahora puedes posicionarlos para que sean, por ejemplo, 40. Veamos dónde estamos, 123, Darío lo. Y se puede seleccionar todas estas buenas epidemias y posicionar esto para ser, por ejemplo, 81 donde trabajamos aquí, 80. Tan misma disciplina Witten para resolver así. Y luego cuando termines tus colores, simplemente puedes pasar a las fuentes. Posición se conoce aquí llamado estos colores. Entonces puedes hacer un duplicado de éste, asegúrate de que esté a 80 y fuentes de calidad o topografía. Y cómo puedes lidiar con la tipografía es en realidad bastante simple. Entonces déjenme mostrarles rápidamente eso también. en realidad puedas ir a la Wikipedia, por ejemplo, y encontrar el alfabeto inglés. Y lo que puedes hacer es en realidad seleccionar todas estas letras, pulsa Control C, por ejemplo. Y luego puedes duplicar este, colocarlo ahí abajo, y localizar el tamaño más bajo. Entonces este es, puedes ver que aquí tenemos estos problemas. Asegúrate de que esté alineado a la izquierda y haz doble clic dentro de Control V. Si hacemos zoom, puedes ver que hizo todos estos cambios, pero a veces puedes ver que los volteó por alguna razón. Entonces controla x y luego puedes posicionarlos así. Por lo que obviamente un capital de deuda más bajo viene primero y luego letra más pequeña viene secundaria. Entonces déjame pausar el video mientras hago eso por todos ellos. Y así ahora que lo he hecho, puede ver a dónde va esto obviamente. Así que asegúrate de anotar Control D, colócala hacia abajo. Puedes hacer click en este. Asegúrate de que esté a los 80 también. Al igual que este control D disco de posición abajo en 80. Y luego puedes hacer click entre todos estos diferentes estados. ¿ Habías creado? Y si no te gusta la deuda, esto está espaciado tanto, obviamente, en miniatura 80. Y sigamos adelante rápidamente y terminemos todos estos para que podamos saltar y crear silencio adicional detrás de esto. Entonces si no te gusta eso, este es un día también, obviamente puedes cambiarlo a, por ejemplo, 40 para que tengas suficiente espacio para todos estos. Por lo que 40 en todas partes. Al igual que esto. No sé por qué nos está dando. Por lo que demostramos que esto es 40 también, porque va todo el camino hasta aquí. Lo que puedes hacer obviamente es cortarlo aquí y luego aumentar el espaciado a Arno conocido busca por ejemplo, o, veamos, 60. Chico, está bien. Y por último, haz lo mismo aquí. Entonces 40, lo cortaré aquí. Dejemos ver el crédito aquí también. Y llamémoslo un día. Démosle éste. A, por ejemplo, creo que eso se ve bien. Y básicamente la deuda es tu tipografía. No tienes que hacer esto por cada uno de estos, pero si quieres, puedes, y esas no son tus soluciones. Por lo que simplemente agruparé toda esta topografía de calidad. Y ahora puedo pasar a lo siguiente. Y lo siguiente pueden ser iconos. Por lo que puedo posicionar esto para estar en 90 u 80. Puedo llamarlo iconografía, por ejemplo. Y si piensa que estos son solo un poco demasiado obvios, puedes cambiar el color de estos. Entonces démosles este color medio, por ejemplo, sólo para diferenciarlos para todos estos. Ahora para los iconos, lo que puedes hacer es simplemente ir justo aquí, ir todo el camino hacia abajo, y localizar tus iconos separados y arrastrarlos y soltarlos en su posición. Entonces, por ejemplo, rehabilitar esta flecha, pero no las vamos a usar porque las usamos para la arquitectura de sitios web. En realidad vamos a empezar la ubicación. Por lo que arrástrelo y suéltelo en la policía donde esté. Aquí está. Teléfono. Por lo que una vez más, usamos esta estrella para nuestro alambrado, pero podemos posicionarla aquí si quieres. Icono de flecha, icono de correo electrónico, on-line, recomendación, cronómetro. Y ahora tenemos estos iconos sólidos Missy, Si puedo seleccionar C más viejo así y tratar de arrastrar y soltar todos ellos en su lugar. Yo puedo, como ustedes pueden ver. Entonces puedes hacer eso también. Se obtiene el punto. Entonces comienzas con estos y luego empiezas a pedir humedad izquierda y derecha. Entonces, ¿cómo puedo hacer eso? Simplemente puedo copiar, lo siento, posicionar disco 80, posición y este a 80 también, así. Asegúrate de que éste, por ejemplo, esté en el centro porque es mucho más pequeño. Posicionarlo para escucharme, nos aseguramos de que esto esté organizado hasta aquí, digamos así. Y entonces lo que puedo hacer es hacer lo mismo por éste. O puedo posicionar este abajo, por ejemplo. Y luego asegúrate de que todos estos estén aquí, porque estos son del mismo tamaño que Ds. Puedo posicionarlos aquí y puedo espaciarlos aún más. Entonces por ejemplo, les puedo dar, no lo sé. A ver. A lo mejor puedo seleccionarlos. Tiempo a tres, por ejemplo. Después selecciona este 1123. El seleccionado este 130. Esos mismos cuatro D's son los mismos para reducir. Lo mismo para estos dos. Por fin visto por disciplina así. Ahora puedes poner estos tres al final aquí. Como puedes ver, a veces puede ser un poco complicado seleccionarlos. Así que asegúrate de que estos sean, por ejemplo, 30 también, y puedes asegurarte de que estén alineados correctamente. Ahora puedes posicionar estos para asegurarte de que estén en un centro como este. Y estamos, vamos a ver, a los 34. Puedo desseleccionarlo. Puedo posicionarlo aquí. Entonces en general, se obtiene la imagen hacia dónde va esto. Ahora siguiente, lo que puedes hacer es en realidad que aún tenemos estos. Entonces no sé por qué sigue saltando arriba y abajo cuando selecciono Noticias. Es realmente molesto. Por lo que puedo posicionarlos aquí porque son los mismos que estos. Por lo que obviamente puedes posicionar esto aquí mismo, el selecto este. Y vamos a ver, puedo posicionarlo para que sean 30. Puedo asegurarme de que esto también sean 30. Y estos seleccionan este y asegurarse de que este también sea 30. Y vamos a comprobarlo, a ver si tenemos más de estos iconos que tengan el mismo aspecto. Tenemos a estos dos. Entonces déjame seleccionar Gastadores de disco. Puedo arrastrarlo y tirarlo aquí. A ver si pueden caber aquí bien una tarea desalentadora, así que puedo posicionar rápidamente esto demasiado golpeado. Y luego puedo seleccionar estos para asegurarme de que estoy a los 40, por ejemplo, de DES o incluso más, digamos 80, así. Y entonces asegúrate de que éste sea 30 de éste, así. Y obviamente se puede espaciar a todos ellos, pero se obtiene el punto. Llegas a la foto, vas a arrastrar y soltar todos ellos dentro. A continuación, voy a hacer lo mismo con estos tres, por ejemplo. Y puedo seleccionarlos posicionados aquí. A ver. La caridad va a ser 30 también. Esto también va a ser soberanía. Y puedes saltar dentro de todos ellos. Entonces la conversión, por ejemplo, puedo borrar el texto, facturas beta y la transferencia. Incluso puedes ocultar fondo de escritorio si quieres. Entonces deja sólo los iconos, pero me iré con como la suciedad. Y ahora posicionaré aquí mi círculo porque obviamente encaja este cuadro todo en Batalden antes de asegurarme de que se alinea al centro con estos. Y básicamente en interiores son tus iconos. A lo mejor podemos comprobar para ver si tenemos algún otro. Tenemos esto fue así por ejemplo, puedo dar click aquí mismo. Puedo posicionarlo al centro de estos, como así asegurarme de que estoy en territorio así. Control D. Estoy a los 30 una vez más y pego esto. Por lo que puedo saber que me encuentro este estado. Por último, tienes mi icono de inversiones, que es bastante más grande que todas estas otras. Entonces por ejemplo, puedo posicionarlo aquí o puedo convertirlo en el primer ícono o lo que sea, pero tú consigues el punto. Por último, lo que también podemos hacer es golpear el control D para asegurarnos de que estamos a 80 de este. Entonces y lo que podemos hacer aquí mismo es incluir estos componentes para que simplemente puedas arrastrar y soltar estos componentes. Entonces, por ejemplo, así, puedes posicionarlo héroe. Entonces llamémoslo componentes, o componentes principales o componentes de navegación o como quieras. Puedes posicionarlo aquí, pero llamémoslo navegaciones como esta, por ejemplo. Y luego ir de abajo a arriba. Y veamos, ¿dónde estuvo nuestra primera navegación? Entonces, vamos a ver. Podemos encontrarlo significa nav aquí es nuestra posición aquí. Y 80. Podemos utilizar estas tarjetas de contacto. Por ejemplo. No voy a ir, puedo incluir el pie de página, pero no voy a ponerme en cuarentena por inversiones. Barra lateral. A lo mejor podemos poner la barra lateral solo para mostrar eso también. Entonces a los 80 y obviamente puedes extender el brazo hacia abajo aún más así. Déjame ir a aquí. Entonces veamos dónde estamos. Tenemos media top ahora puedo arrastrarlo y posicionarlo para que esté en algún lugar por aquí, por ejemplo. Y ahora tenemos top móvil, así que puedo posicionarlo aquí también. Ahí tenemos todas nuestras navegaciones. Lo que podemos hacer a continuación es lidiar con las sombras, por ejemplo, y un desenfoque. Podemos incluir eso. Por último, podemos incluir todos estos iconos de colores. Entonces hagámoslo. De hecho movamos todo esto y hacia abajo. Entonces esto es iconografía. Y podemos, por ejemplo, posicionar esa dosis en la misma carpeta para que no complicemos demasiado las cosas. Entonces lo que puedo hacer es acercar un poco y puedo encontrar de dónde parten estos iconos. Por lo que están empezando desde aquí. Para que pueda arrastrarlo y soltarlo aquí. Arrastra este aquí, asegúrate de que estén alineados. O simplemente podemos arrastrarlo y soltarlo aquí. Y vamos a ver, asegurarnos de que somos 30, por ejemplo. Al igual que esto. Asegúrate de que tu abogado también aquí, así. Seleccionarlos todos. Asegúrese de que estén alineados, colóquelos en la rejilla. Asegúrate de estar a 80 de aquí. Entonces así, ahora B son 80. Y ahora puedo ir por y arrastrar y soltar todos estos otros iconos para poder posicionar este. Incluso puedes hacer espacios para mostrar que estos iconos pertenecen juntos, mientras que estos son similares, pero una vez más, un poco diferentes y lo hicieron on pertenecían juntos. Pero también se puede hacer por estos es mostrar diferentes estados. Por lo que puede golpear el control D, posicionar esto en territorio así, y luego mostrar el estado diferente de ese ícono porque no lo creamos estado diferente. Lo que puedo hacer es simplemente seguir adelante y veamos dónde está mi color. Si recuerdo desde aquí. ¿ Fue éste? No. Entonces veamos dónde estaba. Aquí está. Entonces este es el color. Entonces obtienes la foto. Puedes mostrar variaciones de estos diferentes iconos mostrando sus estilos. Al mostrar hay diferentes variaciones con el color, sin el color y así sucesivamente. Este fue el que se posicionó como aquí. Control D. Literalmente abre esto. Vaca lechera lo. Y ahora puedes hacer lo mismo por el resto de ellos. Entonces saltemos de lado. Seleccionaré éste. Seleccione este. No sé por qué sigue saltando arriba y abajo. Es realmente molesto. Pero vamos a pasar el poder. Entonces es que tiene que hacer es asegurarse de que esto sea 30. Y asegúrate de que esto también sea de 30. Al igual que así. Y por último, mueve esto a los 30 también y te sacas la foto. Se puede hacer lo mismo que hicimos con estas paredes. Entonces mueva este control D disco más para estar a los 30. Salta dentro de tus capas y mira si este es el color que es. Selecciona el resto de ellos. Asegúrate de que sean totalmente Control D, así. Y esconderé el color de éste también. Al igual que así. Y duplicaré este último. Y no me molestaré en mostrar todos los iconos. Mira, sólo ciérralo ahí y llámalo terminado. Pero se puede ver el punto y se puede entender lo que yo estaba tratando de mostrarle de todos modos. Entonces vamos a dar esto para ser un T6, 80. A lo mejor podemos incluso posicionar es estar a los 100. Por lo que 20 abajo para Ds. Puedo mover este 20 hacia abajo. Entonces puedo mover este 20 hacia abajo, y finalmente puedo mover mis colores 20 hacia abajo también. Por lo que en todas partes tenemos 100. Pero también se puede hacer aquí. Él incluye elementos adicionales. Por lo que los elementos adicionales o incluso estilos adicionales pueden ser, por ejemplo, los efectos desenfocados pueden ser sombras de gota y diferente variación de sombras de gota. Entonces, por ejemplo, el que tiene 20% de obesidad, uno tiene 41%, tiene 60%. Por lo que siempre recomiendo que les muestres atrevieran camino en profundidad. Ahora una vez que el desarrollador puede hacer con estos es bastante simple. Puede seleccionar, por ejemplo, estos iconos. Entonces vamos por aquí. Y digamos que quiero seleccionar y exportar todos estos iconos. Yo puedo hacer eso. Simplemente selecciónelos todos. Golpear control, es decir. A lo mejor vas a tener algunos temas aquí porque tenemos estos ya exportados. Entonces tal vez pueda cambiar mi carpeta. Allready lo hizo. Bueno, vamos a ver. Por ejemplo, puedo usar este solo, solo para mostrarte. Entonces como SVG golpeó Export y va a exportar todos esos iconos, SVG. Y obviamente esto va a ser mucho más fácil para que los desarrolladores accedan porque los tienen en la carpeta como la deuda. Todos algunos puedes saltar dentro de aquí, por ejemplo, y darle a este personal como icono de cuenta candidata, blanco y negro. Y se puede hacer eso por todos estos otros. Para que puedas entonces, después de que hayas terminado de renombrar, simplemente puedes seleccionarlos. Había controlado e en exportación, todos esos iconos para que puedan acceder a ellos así. También pueden abrir este archivo. Da click aquí y ve por ejemplo, ok, esto es ba pins 24 irregular, está alineado a la izquierda y tiene, por ejemplo, obesidad o 100 y tiene este colegio. Por lo que tienen la opción aquí también. Para explorar todas estas fuentes que utilizaste. Tienen las opciones de ver estos colores. Tienen las opciones de ver estos códigos hex y decir r k Así que este es este código hexadecimal. Pueden saltar dentro de aquí, golpear Control C y aplicar directamente desde aquí en código como este color de código hexadecimal. Entonces eso es básicamente todo. Es así como estás usando esta guía de estilo del proyecto. Permítanme finalmente seleccionar estos. Llámenlo y componentes de navegación. Mueve grupo de discos hasta la parte superior, selecciona mis iconos y mira dónde están todas estas flechas. Entonces aquí, control g, llamó a estos iconos y muévalos aquí mismo, o iconografía así. Y lo que quiero mostrarles para el final es que también puedes exportar esto como PDF. Para que puedan copiar estos valores PDF. Pueden verlo desde aquí. Pueden ver todos estos iconos, componentes de navegación, cómo se ven. Obviamente puedes exportarlo como JPEG, como PNG, pero también puedes exportarlo como PDF para hacerlo, controlando, elige el PDF desde aquí. Entonces aquí está. Hit Export y lo va a exportar a esta carpeta. Entonces déjame verlo. ¿Fue aquí? Sí, lo es. Aquí está. Entonces guía de estilo del proyecto, haga doble clic y déjame abrirla para mostrarte cómo va a quedar este PDF. Entonces aquí está. Si un buen control es 0, se va a desacercar y se puede ver cómo se ve. Pero si me acerco un poco, se puede ver que todavía pueden seleccionar este texto si quieren, y pueden acceder a él y editarlo a voluntad si quieren. Pueden echar un vistazo rápidamente a la topografía, a los colores, a todos estos diferentes iconos, componentes de navegación. Y pueden ver todos estos diferentes elementos, cómo se ven. Y también puedes incluir cualquier otro elemento adicional que desees en tu diseño. Entonces eso es básicamente todo para la guía de estilo, y eso es básicamente todo para el discurso. Te veré en el siguiente video donde hablaré del outro, lo que puedes conseguir fuera del discurso. Y también voy a hablar de un recurso que he usado una vez más en el discurso y mostrarte de dónde puedes conseguirlo por una vez más. Entonces te veré ahí. 75. Conclusión y recursos: Has llegado al final del curso. Muchas gracias por ver este curso y realmente espero que hayas sacado algo de valor y que hayas entendido lo fácil que es usar Adobe XD y lo fácil que es usar este proceso de diseño tan pronto como llegues a FANBOYS. Entonces solo recuerda, no vas a usar este proceso de diseño exacto para cada proyecto. Pero por ejemplo, si estás trabajando en un proyecto un poco más grande como este, entonces realmente te recomiendo que uses este proceso de diseño, que también va a elevar tus ganancias porque puedes justificar el dinero que estás pidiendo a tu cliente simplemente mostrándoles este proceso de diseño, lo que está involucrado en el interior y todos los pasos que debes dar para terminarlo y para poder completarlo. Por lo que una vez más, gracias una vez más por mirar. Y realmente espero que vayas a utilizar al menos algunas de estas técnicas en tu trabajo cuando se trata de enlaces y recursos ya mencionados algunas veces a lo largo de este curso. Para que puedas utilizar los recursos gratuitos tanto como quieras, tanto como necesites. Están libres después de todo. Pero como expliqué en algunos de los videos, para algunos recursos hay que enlazar de nuevo con el autor original. De lo contrario podría tener algunos problemas más adelante. Pero para los recursos premium que estoy compartiendo con ustedes en este momento, sólo quería estresarme una vez más porque es extremadamente importante. Por favor, asegúrate de que usas estos recursos solo con fines de aprendizaje. No utilices estos recursos para el trabajo de los clientes porque esto te puede terminar en un problema grave más adelante, si alguno de estos creadores o elementos invitados decide demandarte porque los estás utilizando sin permiso y sin licencia. Una vez más, si quieres página web, si te gusta en VO2 elementos se alivia un link para que ustedes chicos lo revisen. Y creo que el precio realmente no es tan caro considerando lo que tienes que descargar en ese sitio web y no hay límites. Por ejemplo, hay un sitio web llamado White, y te mostré que obtuve mis iconos de pick del sitio web de usaid y los compré ahí. Y también tienen estos tipos de membresía para las descargas de productos, pero estás limitado con la cantidad diaria de descargas. Así que solo asegúrate de entender que si necesitas ciertos tipos de descargas Hoy en día, vas a usar y elementos vitales porque es solo una inversión mucho mejor, porque no tienes ninguna de estas limitaciones. Simplemente puedes descargar y usar tantos de estos como quieras. Y la razón clave por la que es muchas de las veces en que vas a ver que vas a pensar que el recurso va a encajar bien. 76. Proyecto de clase de Skillshare: ¿ Qué sería una habilidad compartir Clase B sin proyecto de clase de habilidad compartir. Entonces para tu proyecto de clase de show de habilidades, realmente me gustaría que crearas ya sea el mismo diseño como hicimos a lo largo de este curso. Y puedes publicar una imagen a la habilidad, compartir archivos de proyecto, o puedes crear algo propio, lo cual en realidad te animo a que hagas porque esa es en realidad la mejor manera de practicar lo que has aprendido a lo largo de este curso. Así que asegúrate de publicar una imagen en una habilidad compartir proyectos de clase u otros estudiantes la puedan ver. Para que lo pueda ver. Y puedo, por ejemplo, darles algunos comentarios más. ¿ Cómo puedes mejorar ese diseño y tu estilo de diseño oral. Por lo que realmente te animo lo que hagas de, desde la mezcla del discurso para publicarlo hasta el proyecto de clase de habilidade. Entonces tanto yo como otros estudiantes podemos verlo para que podamos construir esta comunidad de esa manera. No te preocupes por que alguien más juzgue tu trabajo. Aquí solo somos amigos y solo queremos ayudarnos unos a otros con este curso. Así que asegúrate de publicar a proyectos de clase de show de habilidades. Por lo que yo y otras personas del discurso podemos verlo también. 77. Canal de YouTube para obtener más contenido: Hey diseñador, aquí Alex y yo sólo quería decir un rápido agradecimiento. Gracias por tomar este curso y realmente espero que haya sacado tanto valor como sea posible de él. Si quieres consultar más contenido. Hace poco lanzé mi canal de youtube donde explorador algunos temas que podrían interesar a diseñadores desde freelancer hasta técnicas de ingresos pasivos desde diseño web, diseño de aplicaciones, diseño de UI, diseño de UX. Entonces si te interesa alguno de esos temas, dirígete a mi canal de YouTube. Lo enlazaré a PDF y simplemente puedes hacer click ahí y te llevará a mi canal de YouTube. Si te gusta ese contenido, asegúrate de suscribirte y asegúrate de dar seguimiento, porque voy a tratar de ser realmente irregular con ese canal de YouTube y aplaudir tanto contenido como sea posible. Entonces gracias una vez más por tomar mi curso y realmente espero verte en mi canal de YouTube, guardería. 78. Únete a mi grupo de Facebook gratuito: Es diseñador. De verdad espero que hayas disfrutado el curso y el objetivo tanto valor como sea posible fuera de él, si quieres recibir aún más valor de mi parte y de la comunidad del diseño, empecé un grupo de Facebook donde puedes unirte es solo un grupo de Facebook para mis alumnos a lo largo. Para que puedas unirte haciendo clic en el siguiente enlace. Ordinate, por supuesto es una cuenta de Facebook y es un grupo gratuito al que unirse. El grupo se forma con el fin de brindarte retroalimentación adicional para que puedas adjuntar tus diseños siguiendo este curso y utilizando ejemplos del discurso o de cualquier otro de mis cursos. O si tienes tus propios ejemplos de trabajos de diseño del pasado o del presente, puedes subir esos trabajos al grupo de Facebook y luego recibir comentarios de mí o de otros miembros del diseño. También te animo si tienes empleo, puestos disponibles para compartirlos en ese grupo. Por lo que todos pueden beneficiarse de ese grupo. Una vez más, el grupo es libre, es fácil unirse. Simplemente haga clic en el enlace en el PDF. Y realmente espero ver a tantos de ustedes como sea posible en ese grupo solo para compartir nuestras experiencias como diseñadores e intentaré publicar algunos videos adicionales, algunos consejos y técnicas adicionales en ese grupo de Facebook. Pero por ahora sólo estamos empezando. Simplemente lo vamos a formar. Y realmente te animo a unirte y a compartir allí tu mejor trabajo, a inspirar a otros diseñadores o a pedir retroalimentación adicional. Sólo asegúrate por favor, cuando estés pidiendo retroalimentación, cuanto a unas cosas específicas, no solo como qué piensas de este diseño, porque nadie va a contestar a eso. Si hacen lo suyo, te van a decir, es que se ve bien o no se ve bien. Asegúrate de pedir comentarios específicos sobre tus diseños. Por ejemplo, haz como esta combinación de colores, ¿crees que debería usar una fuente diferente? Piensa que estas imágenes corresponden bien con el color de fondo, por ejemplo, cosas así. Así que asegúrate de pedir retroalimentación específica sobre tus diseños porque va a ser mucho más fácil para mí y para otros diseñadores de ese grupo darte retroalimentación específica que puedes mejorar mucho más rápido entonces solo preguntando, ¿ qué opinas de este diseño? Entonces gracias una vez más por tomar mi curso y realmente espero verte dentro de mi grupo de Facebook. Daguerre.