Diseño de sitios web en Adobe Xd comenzando de cero: Agencia de viajes

1. Introducción a la clase: Hey diseñador y mi nombre es Alex y bienvenidos a esta clase de Skillshare sobre diseño de sitios web en Adobe XD. Soy el fundador de donuts web, donde creamos sondas de diseño para creativos como cubo. También soy profesor, y hasta el momento más de 30000 alumnos se han inscrito en mis clases. En esta clase, vamos a diseñar un sitio web para agencia de viajes. Y vamos a cubrir cómo empezar con el resumen de diseño y explorar a nuestro público objetivo y exploramos el mercado, el análisis de la competencia y ver qué están haciendo y qué podemos mejorar en nuestro diseño. Crear un tablero de humor para determinar el estilo y la dirección de nuestros proyectos. Dibuja wireframes sobre papel para explorar la estructura y poner ideas de nuestra cabeza en el pedazo de papel. Después vamos a importar esos dibujos a Adobe XD y crear wireframes y compartirlos con nuestros clientes para obtener comentarios. Con esa retroalimentación, vamos a pasar a diseñar y añadir color, imágenes, iconos, y más. Con el diseño en su lugar, agregaremos animaciones e interacciones para darle al cliente una mejor sensación del flujo y transiciones del usuario. Después crea un diseño responsive y adaptado para trabajar en diferentes tamaños de pantalla, desde escritorios hasta tabletas y teléfonos. Por último, compartiremos nuestros archivos con clientes y desarrolladores utilizando diferentes métodos y técnicas. Cualquiera puede seguir esta clase, pero debido a que contiene algunas técnicas y animación más avanzadas, se requieren conocimientos básicos de Adobe XD para poder seguir esta clase sin ningún problema. Al final de esta clase, podrás diseñar diseños complejos de sitios web en Adobe XD utilizando técnicas avanzadas de organización y animación. Tu clase de proyecto Skillshare para esta clase es usar una de las páginas, o si lo deseas, incluso puedes diseñar o cuatro. Te exhorto a usar tus propias imágenes, tal vez usar tus propios iconos y tal vez incluso usar tus propios colores solo para condimentar un poco las cosas, seguir las técnicas y seguir las pautas de esta clase para llegar a su propio diseño. Después publica ese diseño a tus proyectos de clase para que yo y todos los demás los vean. Y estaré encantado de proporcionarles la retroalimentación. Por lo que si quieres mejorar tus habilidades y productividad, ahorra mucho tiempo en iteraciones y cambios y crea diseños más rápido. Entonces te veré en clase. 2. Resumen del diseño: Muy bien, entonces la primera lección con la que vamos a empezar esta clase es con el resumen de diseño. Y yo siempre recomendaría que ustedes chicos comiencen con el breve de diseño porque de esa manera pueden obtener tantos detalles como necesiten para empezar a trabajar en sus proyectos. Y siempre es mejor hacerlo antes de empezar a trabajar en un proyecto porque de esa manera puedes hacerle tu cliente tantas preguntas como quieras y como necesites para obtener la mejor imagen de una marca, de un proyecto o de lo que ellos necesidad. Entonces les voy a mostrar nuestra plantilla que ustedes pueden usar tanto para proyectos personales como comerciales. Y te voy a dar su plantilla come plantilla Adobe XD y obviamente puedes editar tanto como quieras. Entonces aquí está esa plantilla, aquí mismo tienes breves esenciales. Y aquí mismo tenemos nuestro breve. Y obviamente nuestro breve es lo que nos vamos a centrar en este video. Pero también puedes explorar breves elementos esenciales y aprender más sobre todos estos. Básicamente, estas son solo las preguntas que le vas a hacer a tu cliente para obtener una mejor imagen de la marca en sí, para tener una mejor comprensión de lo que necesitan de este proyecto. Por lo que aquí tenemos la brevedad rellenada. Una vez más, vas a conseguir una plantilla vacía la cual puedes sentir con tus detalles. Pero aquí tenemos esto rellenado brevemente con el perfil de la empresa. Se llama Diseño de sitio web Traveling. Y se puede ver que la fecha límite es el 6 de abril de 2020. Perfiles de una empresa, por lo que gravelly es una agencia de viajes ubicada en Belgrado, Serbia. Tienen socios alrededor del mundo y sus especialidades combinando viajes a grandes ubicaciones con herramientas y exploración de la cultura y la cocina locales. El principalmente enfocado en tours grupales, pero tienen opciones para herramientas individuales donde están brindando todo desde boletos, hotel, comida, tours, todo en uno paquetes exclusivos. Sus viajes duran entre tres y 14 días y están tratando de enfocarse viajar en avión tanto como sea posible porque les ahorra mucho dinero. Enzima en medio de recorridos. Tienen diez empleados de tiempo completo, por lo que pequeña empresa aquí y tienen agentes freelance trabajando con ellos de todo el mundo, desde operadores turísticos hasta propietarios de alojamientos hasta Servicios de Transporte. El punto principal de este proyecto es atraer a más usuarios a su sitio web y ordenar una hora, cerrar tiendas físicas, y mover todo en línea. El diseño de aplicaciones móviles es posible en el futuro. Entonces básicamente lo que tenemos aquí son algunas características clave e importantes. Número 1, en realidad no son tan grandes de una empresa. Solo tienen 10 empleados. Solo tienen una ubicación en Belgrado, Serbia. Y su principal objetivo para este proyecto es con el tiempo, quieren atraer a la mayor cantidad posible de personas de otras partes de Serbia y también de otras partes de Europa a su página web para que puedan reservar estas tiras. Y debido a que su enfoque principal es el viaje aéreo, es mucho más fácil para ellos entonces expandirse a todos estos otros países y más tarde a lo largo de toda Europa. Y expandir nuestra fuerza laboral simplemente usando el viaje aéreo en lugar del autobús. Porque si quieres viajar en autobús o en tren, tienes que estar ahí físicamente. Pero con los aviones, puedes reservar aviones para ir desde cualquier aeropuerto del mundo, básicamente hasta tu ubicación deseada. Entonces digamos que tienes, por ejemplo, 20 personas que quieren visitar Grecia y son de Irlanda, por ejemplo. Entonces puedes reservar un viaje personalizado en Irlanda para ir a Grecia. Y pueden ser los tour operadores guiando y reservando todos estos servicios. Entonces eso es básicamente todo para esta sección. Pasemos ahora a la siguiente sección. Y en la siguiente sección tenemos proyecto o real. Por lo que el proyecto está enfocado en un rediseño de su sitio web actual, cual luce anticuado y demasiado complicado para usar la experiencia del usuario o su sitio web actual requiere un cambio inmediato para que los usuarios tengan mejor experiencia mientras estén en el sitio. La divulgación de textos y las imágenes son de la vieja moda y el diseño completo no habla bien con el público objetivo. Entonces tratar de llegar a proyecto va a consistir en investigación, wireframes, diseño y entregables al cliente. Y sus principales problemas por el momento están atrayendo a más personas a la página web. Y cuando lo están, los están convirtiendo a usuarios porque muchos llegaron al sitio web pero se van antes de que se conviertan a ser los usuarios. Este es el objetivo principal porque curricular están haciendo eso todo en tienda cuando la gente visita la ubicación. Entonces es trabajo de agente en este momento. Están tratando de mover tantas cosas en línea como sea posible. Por lo que una vez más, puedes ver justo aquí desde este proyecto o tú lo que necesitan. Y de verdad les aconsejo chicos que hablen con sus clientes y obtengan tantos detalles como sea posible porque todos estos detalles que ven aquí mismo tengo estoy hablando con el cliente. Simplemente hágales todas estas preguntas. Puedes seguir estas preguntas de este breve de diseño, o puedes idear tus propias preguntas, que en realidad te animaría a hacer, porque no todos los proyectos son iguales y no te vas a requerir que uses toda esta información para todos tus proyectos. Porque a veces solo vas a tener un proyecto de landing page y a veces vas a tener un sitio web con, por ejemplo, 50 o 100, 100 páginas diferentes. Y obviamente para ese sitio web tan grande vas a necesitar mucho más detalles y mucha más información entonces para esa única playa de aterrizaje. Por lo que a continuación tenemos metas y objetivos. Entonces como dijimos, objetivo principal de este proyecto es atraer a más usuarios a la página web al tener la gran experiencia de usuario haciéndolos quedarse y reservar el viaje. Por lo que una vez más, puedes ver el patrón aquí mismo y quieren que sus usuarios tengan gran experiencia de usuario para reservar el viaje y mover tantas cosas como sea posible en línea, básicamente para evitar que las personas vayan a su tienda física. Objetivos de este proyecto es rastrear a las personas con gran oferta y llevarlas lejos de la competencia. Y una vez que se convierten en cliente, haciendo que se queden uno al sobrevenderles otros servicios y ofertas como turistas por ejemplo. Objetivo de este proyecto es disminuir la tasa de rebote en un 30%. Y tasa de rebote es básicamente estas personas que visitan el sitio y salen antes de comprometerse a una compra o reservar el viaje o algo así. El primer sexenio, una vez que el sitio se pone en marcha, objetivo adicional es convertir a 15 por ciento más personas en ese tiempo en combinación con su estrategia de marketing. Y lanzarán junto con este sitio. Por lo que una vez más, quieren disminuir esta tasa de rebote, aumentar el número de inscripciones, número de reserva de viajes. Y también quieren hacer esto en conjunto con sus tácticas de marketing. Entonces, por ejemplo, dedicados a reservar nuestros comerciales de radio, querían reservar anuncios de televisión. Quieren utilizar herramientas de marketing en línea como Facebook e Instagram marketing. Quieren crear, por ejemplo, clips de YouTube. Y lo que quieren hacer desde todos estos esfuerzos es atraer a la gente a su página web, que vamos a diseñar. Y luego posiblemente convertir 30% más personas en los primeros seis meses de este esfuerzo. Objetivos tan sencillos, pero realmente difíciles de lograr. Y por eso estamos aquí para tratar de convertir a tantos usuarios como sea posible a través de un gran diseño. A continuación tenemos público objetivo. Por lo que se puede ver la edad es de 20 a 70. Tan un rango de edad bastante grande porque esta es una agencia de viajes y tienen algo para todos. Tienen algunos viajes que los más jóvenes podrían preferir. El tienen algunos luchador Viajes fuera con personas mayores, que podrían preferir género o 40 por ciento masculino, 60 por ciento femenino. Porque a partir de su investigación usualmente 60%, todas son femeninas porque las hembras suelen ser las que están reservando distritos para sus maridos, para sus hermanos, para sus novios y demás. País de residencia actualmente sólo Serbia. Pero como dijimos, querían ampliar ciudad de resonancia Belgrado porque son su lugar de trabajo, en su mayoría trabajos de menores ingresos también con dueños de pequeñas empresas, especialmente autónomos, sobre todo para viajes más lejos como, por ejemplo Tailandia, como por ejemplo los vaqueros de Indonesia, cosas así. Porque esos nichos están lejos de Belgrado, Serbia. Hábitos de consumo de medios. Por lo que 60 por ciento Instagram porque denotan esto por cuántos seguidores tienen y cuántas tracción atraen y todas las redes sociales. Entonces por eso los pusieron en un pedazo de papel como éste. ciento húmedo está en Twitter y 10 por ciento está en tiktok. Hábitos diarios, consumo de redes sociales, entregar desplazamientos, comer sano y hacer ejercicio por la tarde. Por último, estamos llegando a estos dos requisitos de diseño. Quieren accionar demencias, resoluciones para estar en escritorio, escritorio más pequeño, tablet y teléfono. Y estas son la resolución de redimensionamiento sensible. Los formatos de archivo son Adobe XD como archivo principal del proyecto, SVG para los iconos porque quieren escalarlos más adelante y utilizarlos en impresión, por ejemplo. Entonces SVG es el camino a seguir aquí. Imágenes Png y JPEG, obviamente B y G para las imágenes sin ningún fondo. Y por último, cerveza para diseño breve y recomendación adicional del proyecto, breve de diseño. Es esto lo que ves aquí mismo? Por lo que simplemente puedes saltar aquí mismo. Hit Control E, selecciona en lugar de PNG, selecciona PDF, selecciona tu destino porque no tengo esto y simplemente toca Exportar. Por eso se va a exportar como PDF. Y luego puedes compartir este PDF con tu cliente para que también tengan este resumen de diseño. Lo que tenemos a continuación son los formatos de archivo. Por lo que como dijimos, todos estos requieren paleta de calidad proporcionada a petición. Por lo que proporcionaron una paleta de colores y la vamos a utilizar. Pero todavía te voy a mostrar cómo puedes usar los moodboards para generar tu paleta de colores y trabajar a tu manera con tu cliente. Activos de imagen a incluir, proporcionados a petición y asociado Copiar documento proporcionado a petición y comunicación incorporamos a lo largo del proyecto porque necesitamos detalles de estos destinos para que nos proporcionen. Por último, estamos llegando al presupuesto y al desglose de horario y presupuesto. Por lo que el total es de diez K, cinco K antes del inicio del proyecto y cinco clave al finalizar, desglose de la línea de tiempo. Entonces obviamente puedes tener tu propia línea de tiempo aquí, pero así es como suele funcionar la mía. Por lo que una línea de tiempo del proyecto es tres meses de tiempo adicional para la revisión y los cambios de activos para los desarrolladores. Entonces eso es un plus, pero ese plus también va a ser un cobro. Adicionalmente, por ejemplo, puedes dar una revisión de forma gratuita mientras trabajas, o puedes dar dos divisiones. Entonces, por ejemplo, uno después de los wireframes y uno después del diseño, y luego cada ilusión después de eso se va a cargar más. Por lo que siempre te recomendaría que hagas esto porque cuando fijas tus límites con tu cliente, entonces van a estar más enfocados en tu diseño. Y luego te van a dar más feedback de calidad. Entonces, por tanto, no perder su tiempo y no perder su tiempo también. Entonces, por tanto, hay que ser objetivo. Tienes que decírselos directamente antes de que incluso enciendas Adobe XD. Cuando tu máquina básicamente, tienes que decirles todos estos precios. Tienes que decirles la línea de tiempo. Entonces, por lo tanto, saben en qué se están metiendo. Entonces si saltamos aquí mismo, también puedes cambiar esta línea de tiempo para que veas la Planeación, Investigación, presentación de diseño de audiencia, esa división, y finalmente entrega. Entonces esta es mi línea de tiempo y obviamente puedes cambiarla a lo que quieras. Puedes cambiar las fechas aquí mismo a cuánto te va a llevar cada etapa del proyecto. Puedes cambiar esto a tu nombre o a tu sitio web y éste debería ser tu correo en lugar de la mente. Por último, sólo quiero mostrarles rápidamente esto. Puedes saltar dentro aquí mismo y cambiar todas estas cosas para que puedas cambiar el color si quieres. No quería crear ningún tipo de componentes aquí mismo, como pueden ver, ningún tipo de colores. Porque quería que fuera lo más fácil de editar para ustedes chicos posible. A lo mejor quieres que esto sea, no sé, algún tipo de efecto flotante. A lo mejor quieres crear esto para ser 3D. Por eso no quise editar esto más. Y por eso ustedes tienen la opción completa de editar esta plantilla. Entonces básicamente lo adeuda por este video. En el siguiente video, vamos a saltar al análisis de competidores. Vamos a analizar algunas webs reales y les voy a mostrar qué les pasa y qué vamos a tratar de lograr con este proyecto de sitio web y lo que vamos a tratar de evitar aprendiendo de estos errores de nuestros competidores. Entonces te veré ahí. 3. Análisis de competidores: En este video, vamos a empezar con un rápido análisis de competidor. Vamos a analizar competidores de canciones en este campo. Y lo que es más importante de todos, competidores de logotipos, porque este negocio quiere competir localmente con los negocios locales. Entonces, por tanto, vamos a explorar lo que están haciendo bien y también lo que están haciendo mal. Para que podamos tratar de evitar usar eso en nuestros propios diseños. Entonces lo que tenemos justo aquí son todos estos sitios web. Están en serbio, pero traté de traducirlos al inglés aquí en Chrome usando clic derecho y luego traducir a función en inglés. Entonces disculpas, si ves algún serbio y no lo entiendes, pero básicamente, solo nos vamos a centrar en el diseño y usabilidad, así que realmente no importa. Entonces vamos a empezar con este. Se puede ver obviamente el diseño en caja y todo este espacio vacío, por lo que no ajustando deuda realmente vieja. Bueno, también puedes ver que no sabes dónde enfocarte. Entonces tenemos este menú, este menú, este menú, tenemos estos menús, tenemos estas imágenes, estas imágenes. Entonces, ¿dónde debería enfocarme? Simplemente guíame a través de este sitio web. Y esto es todo porque estos negocios apestan y vas a notar que esto es una especie de equipo aquí, deuda. Y mientras más información trataran de meter, la batería va a ser para profundidad, lo cual obviamente no es el caso porque los usuarios de estos sitios web son básicamente los mismos que los usuarios de todos estos otros sitios web. que básicamente significa que solo quieren llegar a su oferta y solo querían conseguir lo que les conviene y simplemente seguir adelante con sus vidas, parecen como con todos los demás sitios web en línea. Entonces, por tanto, estos sitios web no son tan diferentes de todos estos otros nichos y de todas estas otras categorías. Por lo tanto, guíe a sus usuarios a través de su sitio web y les mostró pieza por pieza para que puedan tentarlos a hacer clic para ir a estas otras secciones de su sitio web o de las otras secciones de su página. Entonces, por tanto, lo que tenemos justo aquí no es tan bueno. Además, lo que noté a lo largo de todos estos sitios web es que la topografía es extremadamente pequeña, lo cual es difícil si recuerdas que parte de nuestro público objetivo va hasta el 70 plus. Por lo tanto, podrían tener alguna dificultad para leer todo este texto. Además, como pueden ver, este slider no está funcionando tan bien porque no puedo cambiar nada. Simplemente está funcionando por sí mismo. Tengo que dar click aquí mismo, lo cual no es obvio desde el primer lugar. Por lo tanto, cuando estés trabajando con deslizadores, hazlo lo lo más obvio posible para las personas. A dónde deben hacer clic para ir a la siguiente imagen si quieren ir en absoluto. Aquí tenemos todas estas diferentes categorías divididas. Y no creo que esto funcione tan bien. Vamos a comprobarlo para un responsive. Y responsive funciona bien hasta el punto, pero se puede ver de inmediato aquí solo están usando estos layout en caja y todo este espacio vacío perdido aquí a la derecha, se puede ver todas estas imágenes no están escalando correctamente, mapa no está escalando correctamente, pie de página y así sucesivamente. Entonces, por lo tanto, yo solo, si tiene que usar el diseño de caja para usarlo, pero se asegura de escalarlo correctamente. Empieza con el diseño responsive. Y puedes ver aquí mismo con los iconos de las redes sociales, simplemente sacarlos de aquí. Asegúrate de que estén aquí o dentro del pie de página. Puedes ver cuánto espacio tienes aquí mismo. Entonces pasemos a la otra. Y este es uno de los más grandes aquí en Serbia. Por lo que tienen los mismos errores pero los arreglados algunos de ellos, como por ejemplo, se puede ver que en realidad podemos hacer clic en estos puntos de paginación y movernos entre nuestros deslizadores. Y también tienen esto aquí mismo para que podamos elegir lo que queramos y podemos dar click en el Buscar. Y nos lleva a donde nos lleva a esta página aleatoria, la búsqueda. Se pueden ver resultados de búsqueda. Entonces solo nos lleva aquí mismo, pero solo quiero dar clic y mostrar la barra de búsqueda para que pueda ingresar mis datos y se pueda ver que no tienen ningún detalle de búsqueda aquí mismo. Por lo que hay que pasar por todos estos y luego hacer clic en Buscar, lo que básicamente evita el punto de tener esta búsqueda. A lo mejor deberías tener un botón en lugar de este ícono. Una vez más, tenemos esta navegación confusa. Y cuando rondo aquí mismo, se puede ver que cubre esta parte inferior. Entonces al pasar el cursor, se puede ver que no puedo hacer clic en esa parte inferior, no puedo verla. Y ese es un problema realmente grande. Pero cuando hago clic aquí mismo, se puede ver que todavía no puedo ver todos estos, pero esto cubre esto. Entonces es solo un dolor de cabeza masivo usando esta navegación y es demasiado complicado, así como esta sección, una vez más, todos estos colores gritándome tipografías realmente diminutas. No hay imágenes. Entonces, por ejemplo, esta sala de juntas , ¿ cómo, qué es, cómo se ve? ¿ Es r c, es una montaña? ¿ Lo es? No sé, al contrario, recurrir a lo que es. También estas imágenes aquí mismo, ajusta esas imágenes para que no sean banners o dan van a escalar razonablemente, o al menos si están escalando mezcla con tus diseñadores para crear, por ejemplo, tres o cuatro adiciones diferentes de estas imágenes de banner para que las puedas utilizar en todas estas diferentes secciones porque aquí están. Y cuando empiezo a cambiar el tamaño, puede ver que estos banners se mantienen igual y este texto es realmente difícil de leer. Una vez más, lo que tenemos aquí mismo es la navegación ha desaparecido y esta sección superior desapareció por completo. Una vez más, tenemos esto que está bien. Esto es genial cuando se quiere ahorrar mucho espacio. Esto también es bueno. Pero una vez más, esto confuso. Entonces vamos con Serbia. Y se puede ver que esto simplemente se queda aquí, así que es demasiado confuso. Esta navegación. Una vez más, las imágenes no son tan grandes. Se puede ver que las imágenes no se están escalando aquí. Entonces, ¿por qué? Y tienen efectos hover. Por lo que note que esta es la versión móvil, pero aún tienen efecto hover. ¿ Cómo va a pasar el rato cuando pasas el dedo sobre él. Entonces esto realmente debería arreglarse eso. Además, se puede ver que las imágenes no se están escalando al tamaño. Se puede ver todo este texto. Tan azul y negro sobre rojo y blanco realmente no funciona tan bien. Una vez más, el espacio vacío con solo mostrarte que esto lo hace un diseñador de elisa o alguien que no sabe lo que está haciendo todo tan bien. Estos iconos son demasiado grandes, pero al menos tienen algún gran pie de página y tienen estas opciones de pago, lo cual siempre es genial. Y por último, tienen iconos de redes sociales justo aquí y de vuelta a la cima, lo cual siempre es genial. Entonces una vez más, hacen algo está bien, pero muchas de estas cosas no tan buenas. Entonces pasemos a este llamado Big Blue. Y tienen alguna información hecha bien así, por ejemplo, como dije, esta navegación es mucho mejor. Entonces vamos con el verano Cherokee. Se puede ver que esta navegación funciona muy bien. También tienen una barra de búsqueda que es grande, que se expande, que tengo que encomiarlos. Y por último, lo que hacen. Pero hay que hacer click en él para cerrarlo. Una vez más, por qué no puede simplemente hacer clic en otro lugar y se va a cerrar. Pero no importa, al menos el hábito, esto es una especie de pesadilla con todos estos campos. Pero una vez más, al menos los tienen. También tienen esto, pero al menos no tienen tantos colores como estos chicos. Por lo que los enteros tienen básicamente tres colores. Azul, que es el nombre de la empresa en la que está bien, continúa con la marca. Tienen dos versiones de color negro, por ejemplo. Tienen este color dorado, por ejemplo, y tienen estos marcos que lo rodean. Al menos sabes que esa es una sección por sí misma. Tienen estas imágenes, pero lo que no me gusta es estas por donaciones y estos deslizadores moviéndose a su propio ritmo. Puedes hacer click entre todos estos. Va a cambiar, lo cual es genial. Pero una vez más, demasiado de estos y R simplemente los separaría en diferentes secciones y haría que los usuarios hicieran clic si quieren. Porque así es sólo distraer. Si sólo lo dejo aquí mismo. puede ver que funciona como loco en un fondo. Entonces realmente no me gusta eso. Aquí tienen estas imágenes, lo cual está bien, pero sólo las haré mucho más grandes porque se puede ver este espacio vacío izquierda y justo aquí para tener estas imágenes, lo cual es bueno. Y me gusta mucho su diseño, así que están usando el espacio de sabiamente y no solo rellenando estas imágenes donde pueden encontrar tienen destino de tablero Best Buy. Y se puede ver esta lista que es genial. Tienen marcas con las que trabajaban o con las que trabajaban todavía. Y tienen esta foto que no es tan grande, pero no puede pasar. Y por último, boletín de correo electrónico, que es genial para que puedas iniciar sesión con. Por último tienen justo aquí en la parte inferior, tienen algo así como un logotipo, y tienen estos iconos de redes sociales, lo cual es genial y icono de regreso a arriba aquí, que no es más viejo, visible, pero al menos lo tienen. A ver, en redimensionar. Como puedes ver, funciona muy bien. Se mantiene en la marca. Esto es fácilmente legible, pero una vez más, estas acciones, estas imágenes se están escalando terriblemente. Ya no puedes leerlos aquí. Entonces, ¿qué dice aquí mismo en esta sección roja, o realmente no tengo ni idea. Y se puede ver una vez más que las secciones no son tan buenas. Esto es terrible. Deberías escalar correctamente y no así o por qué no te limitas a escalar imágenes y ponerlas encima uno del otro o simplemente usar estos deslizadores como realmente les gusta hacer aquí. Y lo que tenemos justo aquí son d. Entonces, ¿por qué no solo usas estas flechas para todos estos? De verdad no lo entiendo. Y por último, lo que tenemos aquí mismo es estas imágenes en una vez más usadas como son, no escalan correctamente. Estos foros una vez más, por lo que tendrás dos pantallas. Entonces, ¿por qué usar algo de esto? Si bien esta sección realmente escala muy bien. Escala de pie de página muy bien. Los iconos del foro y las redes sociales back to top siguen aquí. Y echemos un vistazo al horror. A ver si lo apagaron. A ver. Creo que en realidad lo hicieron. A mí me gustan estos tipos que no apagaron la energía. Se puede ver aquí mismo, creo que fechado para las versiones móviles, lo cual es genial. Y por último, pasemos a este sitio web, que es para gente más joven y público más joven. Entonces puedes ver de inmediato aquí que usaron algunas, un poco diferentes técnicas entonces todas estas otras webs que te mostré, puedes ver que tienen grandes textos aquí mismo en medio de su imagen. Tienen flechas izquierda y derecha, lo cual está bien. Simplemente úsalos y déjame elegir lo que quiero hacer. Y tienen paginación aquí mismo. Tienen una navegación agradable y sencilla con grandes animaciones. Y se puede ver, si yo rondo aquí mismo, no cubre toda esta zona. Simplemente cubre lo que necesita cubrir. Debajo de eso, tienen todas estas grandes tarjetas que funcionan realmente bien en Howard. Y tienen cierres separados para una imagen de fondo y para el propio botón. Tienen claro en la parte superior justo aquí, que me gusta mucho que estén usando video. Por lo que como usted nota, ninguno de estos sitios web anteriores utilizó video. Simplemente usan imágenes y están usando video para inducir a los más jóvenes a comprarles básicamente porque están enfocados en la mayoría de los jóvenes, los viajes de fiesta de Andy. Y se puede ver aquí mismo, estas tarjetas se ven realmente geniales, pero una vez más, escalarlas y llenar el resto del espacio. Tienen una cotización aquí mismo, pero solo usaría al menos un banner, por ejemplo, todo el ancho de su sitio web y tal vez usted como imagen de viaje para inspirar a la gente con esta cita porque eso es lo que se supone que las cotizaciones deben hacer en sitios web como estos. Por lo que quizá use una imagen de banner con la cita en el medio. Tenemos algo de Francia que es genial, suscríbase, que siempre se quedan justo aquí, que son realmente como, pero aquí no hay ningún botón. Por lo que una vez que entre mi e-mail debería haber presionado Enter. ¿ Qué debo hacer cuando estoy usando el móvil? Entonces solo piensa en cosas como la deuda. Entonces finalmente tienen este gran e impresionante pie de página. De verdad me gusta. Es bastante sencillo. Entonces aquí es su destino y sus ubicaciones, o tienen sus números de teléfono, tienen su dirección de correo electrónico, tienen destino diferente. Por lo que en esta otra ciudad llamó a graduados, y tienen números de teléfono separados para esa ciudad. Y se pueden ver los sitios web de sus socios locales. Y por último, los iconos de las redes sociales justo aquí. El chat no está disponible actualmente, pero al menos tienen el chat, que ninguno de estos otros y lo hacen. Por último, cuando hago clic en la parte superior, puede ver cómo se ve eso y básicamente eso es todo. Entonces el punto principal de estas exploraciones es entender lo que están haciendo tus competidores. Trató de copiar cosas buenas, pero obviamente ajustarlas para la marca para la que estás trabajando e intenta evitar cosas malas como te mostré aquí mismo. Entonces, por ejemplo, imágenes topográficas realmente pequeñas que no escalan bien, puntos de tapping realmente pequeños. Por lo tanto, cuando estés trabajando con diseño sensible y los usuarios necesiten tocar en algún lugar, asegúrate de que esos botones sean grandes, asegúrate de que el texto sea legible. Las imágenes son claras y asegúrate de que estás comunicando tu mensaje la mejor manera posible para que tus usuarios te entiendan desde el principio. Y en cuanto lleguen a esa página web. 4. Crear un panel de inspiración: En este video, vamos a crear tableros de humor para nuestro proyecto. Y los moodboards son básicamente Derek, solo para ponerte de humor como su nombre indica. Y básicamente están ahí para que explores posibles combinaciones de colores, posibles estados de ánimo, y que estas imágenes están usando para conseguir el tuyo en el estado de ánimo. Y básicamente por eso se les llama moodboards. Ahora puedes usarlos para ti mismo. Puedes usarlos en formato digital o puedes crear, por ejemplo, algo así como un tamaño de letra de cuatro o de Estados Unidos e imprimirlos más tarde y mostrárselos a tus clientes. Y obviamente siempre puedes exportarlos como PDF, por ejemplo, y enviarlos a los clientes de esa manera. Ahora los tableros de humor pueden ser tan elaborados como quieras o tan simples como quieras. Se puede incluir, por ejemplo, algo así como dos o tres imágenes diferentes o se puede utilizar, no sé, decenas de imágenes diferentes. Puedes usar diferentes combinaciones de logotipos dependiendo en qué estés trabajando. Porque estábamos trabajando en un proyecto de sitio web, por ejemplo, podemos incluir diferentes navegaciones. Podemos incluir diferentes para nosotros y cosas así para meternos en el modo. Entonces les voy a mostrar algunas plantillas que vendemos en web Donald, que es mi empresa. Podrás obtener estas plantillas con descuento y dejaré el descuento en un PDF. Simplemente haga clic en esos enlaces y ya se aplicará el descuento. Y solo por la facilidad de uso para ustedes chicos, si lo desean o si no, simplemente pueden crearlos fácilmente en Adobe XD. Déjame mostrarte rápidamente lo que quiero decir. Entonces aquí está mis sitios web, web, red de pato Donald. Y puedes ver que tenemos sección Productos. Y dentro de esa sección de productos, tenemos todos estos diferentes productos. Y si eliges los tableros de humor, así es como se ven. Entonces tenemos esta pizarra de humor. Y se puede ver que viene en formato de archivo Photoshop y XD. Viene en unas dimensiones de cuatro letras. Y básicamente esto es antes y este es el después. Se puede ver lo fáciles que son de usar. Puedes probar colores. Se pueden incluir diferentes imágenes, y estos son los diferentes tamaños y se puede ver cuántas de ellas tenemos. Simplemente navega por nuestra sección de productos. Y también dejaré el enlace en el PDF a estos que te estoy mostrando, para que puedas navegar fácilmente por él. Estas son las de Instagram y obviamente son cuadradas. Y están estas rectangulares para las historias. Si quieres usarlos, puedes ver cómo se ven y cómo se ven. En Instagram, tenemos las redes sociales que son básicamente lo mismo. Y obviamente porque XD soporta de forma nativa archivos de Photoshop y abre archivos de Photoshop, puedes abrir fácilmente cualquiera de estos archivos porque una vez más, XD soporta archivos de Photoshop y puedes ver cómo se ven. Y obviamente tenemos cuadrados, tenemos rectangulares para el Twitter y Facebook. Y también tenemos DES quiere para Pinterest, y obviamente puedes usarlos para Historias de Instagram. Y por último, tenemos estos que son para la impresión. Y en estos, creo que también se incluye la versión de boceto de boceto. Pero como dije, puedes abrir fácilmente tu archivo de Photoshop, cual te voy a mostrar en tan solo un segundo. Y así es como se ven. Y puedes ver ilustración aquí mismo de si los imprimes, puedes usarlos así y puedes comentar hacia abajo con tus clientes. Entonces cuando los abres en Adobe XD, desensamblados, en realidad se ven como. Entonces básicamente. Llegué aquí a la página principal y creé un tablero de arte de arena AT por 1080, se puede ver aquí mismo. Y simplemente seguí y abrí uno de estos moodboards. Y lo puedes hacer aquí desde la página de inicio. Y simplemente puede abrir desde su computadora o puede navegar por archivo XD y puede abrir el archivo así. Este es el archivo que abrí y es uno de nuestros productos. Y se puede ver aquí mismo tenemos iconos de imagen. Simplemente les voy a hola y hacer lo mismo por el logo. Voy a dar click en mi logo y voy a utilizar logo de mi cliente realmente formado para este proyecto. Aquí está. Y porque no creo que vaya a caber y no me lo tomo escamas muy bien, cosa que no. Simplemente voy a golpear Control E y exportarlo a mi escritorio. Déjame elegirlo rápidamente desde aquí, seleccionar carpeta, y la voy a exportar como PNG. Entonces voy a quitar mi logo de aquí, y voy a mirar a la derecha aquí, simplemente arrástrelo y soltarlo dentro como PNG para poder escalarlo fácilmente si es necesario. Simplemente puedo posicionarme justo aquí en el centro. También puedes seleccionar estos dos click justo aquí y luego justo aquí para asegurarte de que esté en el centro. Y debido a que este es el objeto, puedes cambiar fácilmente su color y luego puedes hacer lo que quieras. Pero no nos enfoquemos en eso ahora mismo. En cambio, enfoquémonos en estas imágenes. Por lo que seguí adelante y descargué algunas imágenes de agrandar o elementos. Y sólo voy a hacer doble clic aquí y posicionarlo justo aquí, por ejemplo. Por lo que siempre puedo entrar y voltearlo por ejemplo, así. Pero no creo que eso funcione realmente tan bien. Pero dejémoslo justo ahí. O tal vez podamos arrastrar y soltar esta imagen dentro. Creo que eso funciona mucho mejor. Y siempre podemos darle la vuelta porque nuestro logo está de este lado. Y podemos usar esa primera imagen en esta, por ejemplo. Y creo que eso funciona mucho mejor porque se puede ver a la persona en cuadro aquí. Siempre puedo arrastrar y soltar otra imagen dentro. Y como dije, estas imágenes se utilizan sólo para nuestra inspiración. Y se usan y solo se ordenan. Podemos ver los colores y en cuanto a colores, por ejemplo, hagamos doble clic aquí mismo en nuestro login una vez más, y puedo probar el color del cielo, por ejemplo. Y tal vez debería usar uno más oscuro de este azul. Y se puede ver cómo se ve eso y los colores mismos. Simplemente puedes hacer clic en esta muestra y puedes probar algunos colores solo para tener una idea general de estos colores. Y vamos del azul oscuro. Vamos a probar un azul más claro así. Usemos nuestro AN o algo intermedio, tal vez algo así, el color tierra. lo mejor, tal vez podamos usar algo como esto y luego cambiarlos. Y se puede ver lo extremadamente sencillo que es navegar. Y quizá podamos usar un color más oscuro. Usemos, no sé, quizá éste. Y esto básicamente eso es nuestro moodboard hecho. Y obviamente puedes jugar con ellos tanto como quieras. Pero dejémoslo así. Y también puedes cambiar estos alrededor. Puede hacer doble clic en esta imagen o simplemente puede hacer clic y luego extenderse hasta aquí para cambiar el diseño del orden. Si lo deseas, puedes hacer eso por todas estas imágenes puedes ver simplemente click y extender entidades básicamente cómo funcionan estos tableros de humor. Ahora porque tengo mi esquema de color para este proyecto y te voy a mostrar que en un segundo una vez que empecemos con el diseño, no voy a usar ninguno de estos colores particularmente, pero solo puedes imaginar que puedes usar competidores imágenes para probar algunos colores. Puedes usar trabajos anteriores de tu cliente para muestrear algunos colores, y luego puedes usar esos colores en tu diseño. Obviamente, viste que este logo es blanco y están usando el blanco y la versión oscura de este logo. Pero básicamente no tiene ningún color dentro. Pero si el logotipo de tu cliente tiene color, obviamente vas a terminar usando ese color. Simplemente muéstralo de esta manera. Y una vez más, si lo deseas, puedes obtener estos productos de nuestra página web. Y voy a dejar los enlaces y descontando el PDF de todos estos que te mostré. Pero si no quieres simplemente saltar dentro de Adobe XD, crea uno de estos. No tienes que usar 1080. Por 1080 como lo hice yo. Puedes usar 1920 por 1080, puedes usar aún más pequeño. Puedes incluir mayor cantidad de imágenes, más imágenes, menos imágenes, haz lo que quieras con esto. Esto es solo por tu inspiración. Y obviamente puedes compartir esto con tu cliente que puede saltar dentro de aquí y exportar éste, por ejemplo, para luego compartirlo con tu cliente y ellos pueden ver y aprobar o desaprobar tus opciones de color. Entonces básicamente, estos son los moodboards y cómo funcionan. Se puede jugar con ellos. Puedes incluir todo tipo de imágenes diferentes en su interior. Se pueden incluir diferentes logotipos. Puedes incluir, por ejemplo, tarjetas de visita dependiendo de lo que estés haciendo, puedes incluir todo tipo de imágenes diferentes. Incluso se pueden incluir gradientes. Puedes hacer lo que quieras con estos. Como dije, estos son para ponerte de humor. Estos son para que entiendas con qué estás trabajando y para quién estás trabajando, y por lo tanto, seguir adelante con tu proyecto mucho más fácilmente. En el siguiente video, les voy a mostrar cómo configurar este archivo porque ya empezamos con este tablero de humor. Voy a arrastrar y soltar nuestro resumen de diseño dentro. Y les voy a mostrar cómo vamos a construir este archivo más adelante y qué vamos a hacer a continuación. Entonces te veré ahí. 5. Configuración de proyectos: Muy bien, Vamos ahora adelante y armemos nuestro expediente. Y este video va a ser bastante sencillo y corto o simplemente quería correr rápidamente a través de cómo suelo configurar mis archivos. Puedes usar la misma configuración, pero no tienes que hacerlo. Puedes usar tu propia configuración si quieres. Yo solo quiero mostrarte lo que estoy usando. Entonces aquí tenemos nuestro resumen de diseño y como dije, vas a conseguir estos de forma sencilla. Se van a ubicar dentro del archivo zip, descomprimir ese archivo y usarlos para tus propios proyectos personales o comerciales. Básicamente, voy a seleccionarlos, golpear Control o Comando C. Y voy a cerrar este archivo, y aquí está nuestro moodboard. Voy a simplemente Control V aquí mismo. Y lo que realmente voy a hacer es moverlos aquí mismo de este lado. Y por ejemplo, posicionarlos para estar en algún lugar alrededor de 100. Creo que es bueno, y mover este fin a ser 100. Entonces básicamente lo que tenemos aquí son breves esenciales, son breves y tablero de humor. Y básicamente vamos a construir este archivo desde aquí. Adobe XD por defecto lo posiciona en el centro, pero normalmente me gusta subir esto un poco solo para darme un poco más de espacio vertical o en algún lugar por aquí. Ahora lo que puedes hacer es que puedes, por ejemplo, li tus wireframes de papel justo aquí y puedes mudarte a aquí para tus wireframes Adobe XD, entonces diseña justo aquí, den Export, prototipado, lo que sea que estés haciendo a continuación, quizás incluso diseño de aplicaciones, entonces puedes ir hacia abajo y hacia abajo. Pero lo que realmente me gusta hacer es simplemente mover estos archivos hasta esta esquina superior izquierda del archivo. Entonces, por lo tanto, uh, tener mucho más grande de la pantalla realista bienes raíces aquí mismo. Y lo que también me gusta es guardar el archivo localmente así como el documento Cloud. Entonces, qué me permite si por alguna razón Adobe XD se bloquea y se guarda el documento Cloud, pero mi documento local no es con los últimos cambios. Por lo tanto, simplemente puedo tirar hacia arriba el documento en la nube más tarde, guardarlo en mi escritorio. Por ejemplo, si necesito editar este archivo más adelante sin conexión a Internet mientras estoy en movimiento en mi cafetería local donde sea. Entonces, por tanto, realmente me gusta tener esas dos opciones. Entonces tanto documento Cloud como mi documento local, y eso es básicamente todo para este video, voy a golpear Control S. Y en la siguiente parte nos vamos a centrar en los wireframes de papel. Te voy a mostrar por qué son importantes. Vamos a dibujar alambres en trozo de papel. Y luego más adelante vamos a saltar de nuevo a este archivo. Vamos a traer esos wireframes de papel en Adobe XD sólo para nuestra referencia. Y luego vamos a pasar más tarde a algunos wireframes reales en Adobe XD, que luego vamos a convertir en diseños, que finalmente vamos a animar. Entonces te veré ahí. 6. Fotogramas de alambre papel 1: De acuerdo, así que ahora vamos a empezar a crear alámbricos de papel. Y vamos a empezar con la estructura misma. Pero antes de que lo hagamos, solo quería correr rápidamente a través de lo que necesitas para este proceso. Básicamente, necesitas cualquier tipo de papel. Tienes línea Rin alrededor de tu casa o de tu oficina, y necesitas cualquier tipo de bolígrafo o lápiz. Incluso puedes usar marcadores de colores. Se pueden usar gobernantes, pero me gusta hacer las cosas a mano libre sólo porque me hace mucho más rápido poner las ideas en un pedazo de papel. Porque este proceso es sólo un proceso de inicio. Posteriormente vamos a traer esto a Adobe XD y elaborar sobre los propios elementos bajo diseño, posición, escalado y mucho más. Entonces esta es solo la primera parte de este proceso, es bajar tus ideas en un trozo de papel solo para que puedas tirarlas en un trozo de papel y luego puedas empezar más tarde. Interior, habrá extremo o tu otra herramienta favorita de elección y empezarás a crear peso muerto. Entonces lo primero que vamos a crear en este proceso es la estructura de nuestra página así. Entonces voy a empezar realmente con la navegación misma. Entonces sólo voy a hacer rápidamente algo como esto. Por lo que sólo se puede imaginar que este es el contorno de la propia página web. Por lo que vamos a empezar con el logo aquí. Entonces vamos a escribir en destinos. Y los usuarios en realidad pueden hacer clic en estos destinos en indican para llevarlos a cualquiera de estos destinos y deudas que tienen en oferta. A continuación, vamos a escribir en invierno para recorridos de invierno. Entonces vamos a tener wellness para puertas wellness, individuales. Y esta es la página donde los usuarios pueden reservar viajes individuales. Pueden elegir lo que quieran. Para que puedan elegir desde boletos de avión a alojamiento, a comida, a todas estas cosas que van a ver ahí. Por lo que actividades y excursiones y tanto más dentro de esta playa individual. Vamos a tener cruceros. Y se puede ver que se me acaba el espacio. Y finalmente vamos a tener sobre nosotros. Entonces esta página en realidad va a correr hasta aquí, así que no dejes que esta línea te distraiga. Y por último, vamos a escribir en boletos de avión aquí. Al igual que así. Entonces vamos a tener newsletter. Y también vamos a tener números telefónicos, así que 123. Y también podemos tener estos iconos aquí. Entonces, por ejemplo, puedo tener un icono de avión aquí. Puedo tener un icono de newsletter por correo electrónico aquí. Y también puedo tener un ícono telefónico aquí solo para que cuando bajamos esto más tarde, realidad podamos tener esto en esto. A ver. Tenemos el ícono y el texto en unas pantallas grandes, y sólo tenemos el ícono en sí en las pantallas más pequeñas, sobre todo para este número de teléfono. Por lo que los usuarios realmente pueden tocar ahí y podría llevarlos a esa pantalla en particular. Entonces eso es todo para este primer video. En el siguiente video, sólo vamos a empezar con la propia página de inicio. Entonces vamos a seguir adelante, solo usa algo como esto. Entonces tal vez podamos crear algo así para la navegación. Y siempre se puede volver atrás. Y realmente te animo a que, por todos los proyectos que haces para descomponer esto solo para que sepas cómo realmente tu navegación para que siempre puedas volver a ella y ver para qué páginas estás diseñando. 7. Fotogramas de alambre 2 2 2: Muy bien, entonces ahora que la navegación en sí está terminada, Pasemos ahora a esta parte, que en realidad va a ser nuestra página de inicio. Y debido a que la página de inicio va a ser extremadamente larga, voy a crear, por ejemplo, dos cajas como esta. Entonces una vez más, si quieres, puedes usar la regla, pero realmente no me gusta usar a los gobernantes porque creo que se ralentizan. Por lo que sólo puedo crear un esquema como este. Entonces con lo que podemos empezar es con lo que creamos previamente. Entonces este va a ser nuestro logo. Esta va a ser nuestra navegación. Y también tenemos estos aquí mismo en la parte superior. Entonces lo primero que vamos a crear es la sección de héroes así. Y quizá podamos crear flechas para ir a la izquierda y a la derecha. De lo que discutimos en los ejemplos que les mostré. Y quizá podamos crear texto aquí mismo. Y digamos que tal vez esta es la ubicación de Pekín. Y tal vez podamos poner al botón que dice explorar ahora. Al igual que así. Y pueden tocar este botón para ir a la página de Pekín dentro del destino. Por lo que ya puedes empezar a ver cómo todo esto se va a atar el uno con el otro. Lo que podemos crear aquí mismo, y esto puede ser parte de la imagen del héroe, o puede bajar por debajo de la propia imagen del héroe dependiendo del tamaño para el que estés creando es que podemos crear estos selectores. Entonces veamos, tal vez podamos dividir esto en cinco partes. Entonces 1234, y este va a ser quinto uno. Y esta primera parte puede ser, por ejemplo, destinos. Y vamos a crear un icono así. Entonces y el siguiente destino es el tipo de viaje. Entonces tal vez podamos crear una pierna icono hace So viaje. A continuación podemos tener actividades. Entonces tal vez icono de una persona caminando a VTS. Y por último, podemos tener búsqueda. Y una vez que tocan la búsqueda, esta barra de búsqueda, Kim por ejemplo, extiende hasta aquí para que pueda cubrir todos estos campos adicionales. Y por último, podemos tener un botón para Aplicar. Y puede aplicar todos estos filtros a aquí. Entonces déjame rápidamente acercar sólo un poquito para que puedas ver mejor lo que estoy haciendo aquí mismo. Para que veas que aquí tenemos todos estos. A continuación, lo que podemos hacer es, por ejemplo, podemos crear algún tipo de secciones diferentes. Por lo que quizá podamos crear aquí una sección llamada ofertas especiales. Por lo que las ofertas especiales, como todas estas otras webs tienen. Y aquí podemos tener, por ejemplo, primeros minutos. Y aquí podemos tener un último minuto así. Y para ambos, podemos tener estas tarjetas diferentes. Así que vamos a crear una carta y una carta aquí también. Por supuesto, podemos tener el ícono aquí, por ejemplo, de las horas, y podemos tener una escena uno aquí. Y lo que podemos crear en estas ofertas es que podemos, por ejemplo, incluir una imagen aquí. Entonces, arrastrémoslo así. Y puedes usar diferentes marcadores si has querido, solo para indicar que esta es tu imagen. A continuación, lo que podemos crear aquí es. Estrellas. Y podemos crear, por ejemplo, de uno a cinco o lo que sea. Y con estas estrellas, lo que puedes hacer es presentar la ubicación en sí o puedes presentar los propios hoteles. Entonces dependiendo de lo que realmente estés mostrando aquí mismo. Entonces si estás más por debajo de nuestras estrellas, lo que podemos crear es algún tipo de descripción. Entonces usemos, por ejemplo, París aquí y por aquí. Y podemos crear una descripción adicional aquí. Lo que también podemos incluir es, por ejemplo, siete días o 14 días. Y quizá podamos incluir aquí algunos iconos diferentes. Entonces veo, y sólo para indicar que, por ejemplo, se puede viajar a su destino utilizando el avión, utilizando el vagón de tren o autobús o algo así. Y por último, podemos crear un precio aquí. Entonces veamos 1250 y digamos 930. Y por último, podemos crear un icono aquí a la derecha. Y quizá con estos podamos crear diferentes separadores como este. Por lo que podemos incluir diferentes líneas divisorias o algo así. Tan solo para romper, estas secciones son un poco más. Y aquí como dije, podemos incluir sólo un ícono de flecha, que podemos activar al pasar el cursor. Una vez que se desplazan, pueden tocar ahí y pueden ir a ese destino en particular. Y podemos, por ejemplo, hacer estas secciones por cuatro, así que cuatro en total, por ejemplo, sólo para ahorrarnos un poco de espacio para dibujar. Y podemos, por ejemplo, usar dos botones. Entonces C Todo y ver todo. Por ejemplo, ver tu apellido y ver todo por nosotros. Ofertas de primer minuto, no de nombre. Entonces primer minuto y último minuto, ver todos primeros minutos, nos vemos todos de último minuto. Entonces podemos hacer algo así. Lo que podemos hacer a continuación es que podemos incluir otra sección. Para que veas lo que estoy haciendo aquí mismo. Simplemente estoy rompiendo esta página en diferentes secciones solo para mantener altos los intereses del visitante tanto como sea posible. Entonces lo que podemos hacer aquí mismo es incluir nuestro botón de reproducción para indicar que este es el video. Por lo que podemos posicionarlo así. Y podemos, por ejemplo, o usar la función de reproducción automática como te mostré en uno de los ejemplos, o bien podemos mostrarles icono de visualización en sí mismo y dejarles reproducir este video por sí mismo. Entonces sigamos adelante. Y por ejemplo, para la siguiente sección, podemos utilizar diferentes destinos. Entonces usemos destinos europeos así. Y podemos, por ejemplo, incluir aquí una descripción separada. Y podemos usar tiempos 4, cuatro continentes. Por lo que podemos usar destinos europeos, asiáticos , africanos y americanos. Y dentro de los destinos americanos, podemos, por ejemplo, incluir a Norteamérica y Sudamérica. Y entonces tal vez podamos incluso dividirlos un poco mejor, solo para que demos a nuestros usuarios la opción. Para que puedan elegir de inmediato, ¿ dónde quieren viajar y trabajar a qué destino? Y dentro de éstas, podemos, por ejemplo, incluir cuatro cartas diferentes como esta. Por lo que estas tarjetas son quizás las mismas que estas, sólo una girada verticalmente. Entonces aquí es donde podemos usar Adobe XD, estas funciones avanzadas como pilas por ejemplo, y redimensionamiento responsive también. Entonces lo que vamos a hacer aquí mismo es incluir imágenes como esta. Vamos a incluir aquí la calificación. Entonces solo voy a usar una estrella porque básicamente vamos a usar exactamente el mismo diseño es éste. Entonces vamos a usar París, Roma, Londres y Berlín, por ejemplo. Vamos a utilizar la descripción de esa ubicación. Entonces como dije, exactamente el mismo diseño que este. Van a ser siete días con los iconos. Siete días iconos aquí. Yo lo hice. Y vamos a incluir el precio. Entonces usemos 100 River solo para ahorrarnos un poco más de tiempo. Yo sí, y vamos a usar el icono de flecha en el hover. Por lo que este icono no va a ser visible a menos que el pase el cursor. Por lo que sólo va a mostrar cuándo la fecha realmente se cierne. Debajo de eso. De lo que vamos a crear nuestras flechas, pueden ir a la izquierda y a la derecha si quieren. Y por último, podemos incluir un botón como este para ver o para que puedan ver todos los destinos, ya sea europeos o asiáticos, africanos, o americanos. Entonces, como dije, podemos, por ejemplo, incluir a los europeos a continuación que podemos incluir destinos africanos. Y luego podemos romper estas secciones al incluir algo así como una imagen. Entonces vamos a incluir, por ejemplo, imagen posicionada a la derecha como esta. A lo mejor podemos incluso darle sabor agregando un color de fondo como este. Y hasta podemos señalar y decir color como papá, sólo para que sepamos qué es. O si estás compartiendo esto con tus clientes o compañeros de equipo. Por lo que Daikin sabe lo que es. Entonces podemos ponerlo aquí mismo. Y por ejemplo, podemos escribir algo en como libro, tu viaje de ensueño con nosotros. Impuestos aquí mismo. Y por último botón, que dice obtener una cotización gratuita. Cotizaciones tan gratuitas como esa. Y pueden obtener una cotización gratuita para cualquier tipo de estos viajes individuales, si recuerdas aquí mismo en la parte superior del video anterior. Para que puedan obtener una cotización gratuita para ese viaje en particular de lo que elijan. A continuación, podemos incluir, por ejemplo, tropas asiáticas y americanas a continuación. Entonces lo que podemos incluir es una sección completamente diferente que dice, por ejemplo, nuestros destinos principales. Aquí podemos incluir flechas izquierda y derecha. Podemos incluir nuestra breve descripción aquí. Y por último, podemos incluir, por ejemplo, tres cartas, esta vez. Para que podamos ir con el layout así y se puede ver lo que estoy haciendo. Simplemente estoy rompiendo el diseño. Entonces no estamos usando como estos sitios web que te mostré. No estamos usando exactamente el mismo diseño para todas las secciones de nuestra página, estamos usando diferentes diseños. Entonces aquí estamos usando tarjetas posicionadas así. Aquí estamos usando tarjetas posicionadas así. Entonces estamos rompiendo estos tramos. Y aquí estamos usando tres cartas diferentes, exactamente el mismo diseño, pero simplemente posicionadas de manera diferente. Entonces lo que voy a hacer aquí mismo es extender un poco estos hacia abajo. Entonces por ejemplo, mis hojas, esto puede ser, digamos Toscana. Y esto puede ser Aarón o París otra vez, sólo para que podamos tener algo. Podemos incluir texto y decir algo así como de y precio aquí mismo. Así 998, así precio 1, 0, 0, 0, 0, y precio 700. Sólo para que podamos decir desde indicar que pueden cambiar lo que dice aquí mismo en esta página. Entonces lo que podemos hacer a continuación es que simplemente voy a pasar a esta parte vacía de la página porque como dije, esta es realmente una página más larga. Entonces lo que voy a hacer aquí mismo es hacer exactamente lo mismo. Por lo que se extendió todo el camino hasta aquí. Simplemente estoy extendido todo el camino hasta aquí. Y digamos que los viajeros nos aman. Texto aquí y aquí, podemos incluir testimonios. Por lo que quizá podamos incluir una imagen aquí mismo. A ver, nombre. Algunos testimonial y viajó a París. Lo cual es importante porque ahora estás aumentando las posibilidades de vender ese destino. Entonces, por ejemplo, si algún destino está realmente caliente y la gente realmente quiere ir a él, entonces tal vez compartirlo aquí mismo dentro del testimonial con gente real que realmente viajó allá ya va a mostrar y dar un poco más interés a ese destino. Entonces vamos con 0, uno de cuatro. Y podemos usar flechas aquí mismo, así que izquierda y derecha. Y con estas flechas, podemos crearlas como componentes en XD, y luego podemos usarlas a lo largo de nuestro diseño. Entonces lo que podemos hacer a continuación es quizás romper el diseño una vez más. Entonces veamos que puedo incluir tres cartas como esta. Y esto puede ser así, tan menstruante estilo Mansuri. Entonces, por ejemplo, el bienestar. Y digamos desde y el precio 998. Y esto puede ser una imagen de fondo. Entonces tengo razón en que ancho de imagen, por ejemplo, la superposición de color, o ocho o algo así. Podemos decir cruceros aquí y esquiar aquí. Para los viajeros de invierno. Y por ejemplo, de 908 y de 998. Entonces exactamente lo mismo. Estas son imágenes con la superposición de color. Entonces puedes ver aquí mismo, simplemente estoy rompiendo el diseño y haciendo que esta página se vea. Un poco más interesante para los espectadores. Por ejemplo, podemos escribir socios como estos sitios web tienen descripción y por ejemplo, un logos aquí mismo. Por lo que estos son logotipos yo adeudo. Y tal vez podamos usar exactamente el mismo diseño que hicimos aquí mismo, pero simplemente cambiarlo. Entonces imagen, color. Y luego aquí, por ejemplo, escribiendo, hay viaje perfecto para todos. Un poco de texto y llamado a la acción, que dice obtener una cotización gratuita. Por lo que podemos usar Adobe XD y pilas, y podemos, por ejemplo, crear este layout y simplemente copiarlo y pegarlo aquí, a esta sección y simplemente cambiar el orden de estos elementos en su interior. Entonces lo que podemos hacer a continuación es dar a los usuarios y tipo de cambio, por ejemplo, porque eso es realmente útil, sobre todo si estás viajando a otras partes del mundo y no estás usando tu moneda. Entonces tipo de cambio, digamos así. Por lo que tres o cuatro vamos a ver más tarde dentro o programas de diseño extranjeros, podemos incluirnos el Euro, y por ejemplo, británico bound. Entonces vamos a ver qué es aquí mismo. Entonces USD y ¿cuánto es palabra en tu propia moneda? Entonces vamos a la siguiente sección, que puede ser, por ejemplo, Q y a. Así que puedo crear otra sección aquí. Así que prepárate para tu viaje de ensueño. Y un poco de texto aquí y abajo con contáctanos. Yo lo hice. Y aquí lo que vas a hacer es crear una pregunta que vamos a usar un icono más y vamos a crear una respuesta así. Y con estos, los podemos descomponer. Entonces q plus divider, q plus y el más ancho. Entonces aquí, lo que pueden hacer es tocar en realidad este icono más. Se va a abrir esta sección. Entonces se va a pasar de más a menos o dos actos. mejor podemos rotarlo y luego una vez que toquen ahí, va a cerrar y pueden abrir una de estas preguntas adicionales y pueden aprender más sobre el tema. O alternativamente, simplemente pueden hacer clic en el botón Contáctenos aquí mismo y ponerse en contacto. Y tal vez podamos escribir, permanecer en el bucle. Un poco de texto aquí mismo. Y podemos crear un formulario de email opt-in justo aquí. Por lo que el correo electrónico y un botón que dice suscribirse. Y no queremos que sea demasiado prominente, pero aún así queremos que los usuarios vengan aquí y se suscriban. Por último, lo que queda es el propio pie de página. Por lo que quizá podamos incluir un logotipo aquí mismo. Podemos incluir artículos de navegación. Entonces me veré un poco de tiempo de anotarlas en realidad. Entonces destinos, bienestar invernal, cruceros individuales sobre nosotros aquí mismo, lo extendieron por toda la página. A lo mejor podemos incluir un divisor. Divisor tan bonito y sencillo como este. Y podemos, por ejemplo, incluir iconos de redes sociales. Entonces Facebook, Instagram y YouTube por ejemplo, o LinkedIn o lo que sea que realmente tenga la agencia. Podemos incluir el copyright original justo aquí y aquí podemos escribir en términos, por ejemplo. Por lo que rebaño lechero, este es nuestro vistazo a nuestra página de inicio. Como se puede ver, va a ser realmente largo, pero va a mostrar todos los elementos cruciales dentro de ella. Entonces aquí tenemos estas secciones que vamos a copiar, vamos a reorganizarnos. Te vas a reubicar un poco. Quizás podamos crear un componente por defecto y luego reubicarlo y reposicionarlo de diferentes maneras que podamos crear componentes secundarios adicionales a partir de ese componente principal. Por lo que puede ser realmente útil para nosotros a lo largo de nuestro diseño. Simplemente podemos copiar y pegar y tal vez podamos crear elemento adicional al mismo. Por lo que ahí lo tenemos. En el siguiente video, vamos a ver realmente qué sucede cuando los usuarios hacen clic en uno de estos destinos. Entonces te voy a mostrar cómo puedes crear eso siguiendo esta exactamente la misma estrategia. 8. Fotogramas de alambre 3: Ahora sigamos adelante y creemos una playa de destino. Y hasta se puede escribir aquí, así que esta nación, justo eso. Y vamos a crear un esquema rápido como lo hicimos con la página de inicio. Eso NO es como dejar esta parte en blanco porque siempre tengo algo que recordarme. Por lo que o bien tenía que compartir algo con otros diseñadores en el equipo o con mis clientes o con los desarrolladores. Por lo que siempre es útil tener algo justo aquí o incluso a ti mismo si estás creando estos wireframes y luego regresando a ellos en un par de meses o algo así. Entonces lo que vamos a hacer primero es exactamente lo mismo que hicimos con ejemplos anteriores. Entonces esta va a ser nuestra navegación. Quizás podamos incluir una sección de héroes y digamos que los usuarios pisaron una oferta de París en la página anterior, que fue la página de inicio. Entonces podemos escribir en algo como CT of love, Paris con esta bonita fuente grande y tal vez un botón que dice explorar ahora. Y tal vez cuando el toque este botón Explorar ahora, puede luego llevarlos a la siguiente parte de la página, que en este caso sería una parte informativa para esta ubicación en particular. Para que podamos escribir algo en como visitar París. Podemos incluir una descripción aquí. Entonces sobre y luego texto al respecto, actividades. Y entonces podemos, por ejemplo, incluir aquí diferentes iconos. Entonces iconos. Y estos iconos pueden ser algo así como museos turísticos o porque es un Paris tal vez River Cruises, ciclismo, comer lugares de Dios para ver algo así. Entonces a continuación que vamos a tener las mejores ofertas de París, que destacan de todas estas otras ofertas, ya sea en términos de precio o en términos de popularidad o cualquier otra cosa. Y aquí podemos incluir todos estos diferentes filtros que los usuarios pueden elegir. Entonces podemos tener cinco de ellos, por ejemplo, y quizá un botón aquí al final. Entonces vamos con seis. Entonces 1, 2, 3, 4, 5, y luego 6. Esto se puede aplicar. Y vamos a ver, tal vez podamos cambiarlos por precio, duración. Entonces usemos un ícono de calendario aquí. Actividades. Entonces una vez más, en esta persona caminando o algo así, excursiones. Entonces vayamos con un ícono de letrero. Entonces izquierda y derecha por ejemplo, en algún momento lo hice. Y finalmente una calificación. Y entonces incluso puedo escribir algo como esto. Por lo que calificando excursiones, actividades. Y esta es la duración. Y este es el precio. Entonces lo que vamos a tener entonces nuestros hoteles que se corresponden bien con estos filtros que has elegido aquí mismo. Entonces podemos tener exactamente el mismo diseño, pero un poco más elaborado, porque aquí tenemos información adicional, incluyendo dentro. Entonces lo que puedo hacer es crear una tarjeta como esta, que abarca todo el ancho de nuestro sitio web porque tenemos mucho espacio aquí mismo. Entonces lo que podemos incluir una imagen aquí mismo. Entonces podemos incluir una calificación aquí en la parte superior. Y podemos decir nombre del hotel. Podemos incluir dirección aquí mismo. Al igual que esto. Quizás incluso podamos incluir un sitio web en algún lugar por aquí. Entonces vamos a ver que una vez que empecemos a diseñar, esta puede ser la descripción y luego 14 días. Y estos pueden ser los iconos. Entonces veo n y estos iconos pueden ser los mismos que en la página de inicio. Entonces, por ejemplo, ¿cómo se puede llegar a este hotel? Se puede volar, varchar, ir en tren o en coche o algo así. Y luego vamos a incluir un precio. Entonces 1290, por ejemplo, desde y aquí vamos a tener ese mismo efecto de horror con la misma flecha. Entonces por eso digo que puedes crear una tarjeta y luego elaborar más a partir de ahí. Entonces podemos escribir algo así como el tipo 4 o algo así. Y podemos tener, por ejemplo, Load More botón debajo de él o algo así. Entonces en realidad podemos usar secciones de la página principal. Entonces en realidad voy a usar esto. Por lo que hay un viaje perfecto para cualquiera. Más libre de impuestos. Cotización. Entonces vamos a tener saludo de intercambio. Mi papá. Y recuerdan, simplemente incluí tres casillas diferentes que indican el euro USD y por ejemplo, libra británica. Y pueden ir a izquierda y derecha y desplazarse y ver todas estas monedas. Y entonces podemos tener Q y una sección aquí. Entonces Q y a para agilizar un poco las cosas, no voy a dibujarlo porque va a ser exactamente lo mismo que en la página de inicio. Entonces aquí podemos tener permanecer en el bucle y podemos tener esos dos campos. Por lo que suscríbete correo electrónico. Por último, aquí mismo en la parte inferior, en lugar de dibujar todo, vamos a tener el pie de página. Por lo que ahí lo tenemos. Fuimos adelante y preparamos esta página. Entonces como puedes ver, es bastante simple, Es bastante fácil. A continuación, en realidad vamos a crear una página que nos lleve cuando hagan clic en una de estas ofertas. Se los va a llevar a la página dedicada del hotel. Y en esa página pueden explorar características adicionales como por ejemplo, ¿qué hotel tiene para ofrecer, qué tienen para ofrecer las habitaciones? Qué amenidades se incluyen dentro de las habitaciones como Wi-Fi, aire acondicionado, mini nevera, y tantos detalles más. Entonces vamos a jugar con eso en el próximo video. 9. Fotogramas de alambre 4: Está bien, Así que la siguiente página, como dije, se va a seleccionar oferta. Entonces vamos a escribirlo aquí mismo. Oferta tan seleccionada. Y voy a crear un esquema. Por lo que lo mismo que hacía anteriormente. Pero vamos a hacer algo parecido a la página de inicio porque vamos a tener muchas de estas secciones adicionales aquí en la página. Entonces lo primero es lo primero, vamos a mostrar a nuestros usuarios imágenes de este hotel. Entonces eso puede ser una habitación de hotel o cómo se ve el propio hotel. Entonces, empecemos con nuestro logo y navegación. Tan mismo como recreado para todas estas páginas adicionales. Y vamos a crear algo así como 1234 o cinco imágenes diferentes. Y eso podemos incluir aquí. Y podemos incluir, por ejemplo, flechas izquierda y derecha para que los usuarios puedan desplazarse a izquierda y derecha por estas imágenes. Y como dije, esto puede ser ya sea fuera de una habitación de hotel o del propio hotel. Entonces, empecemos con la información del hotel. Entonces, empecemos con una calificación. Entonces digamos que este es un hotel de cinco estrellas. Nombre del hotel. Por ejemplo, podemos incluir un sitio web aquí mismo. Y podemos incluir, por ejemplo, una descripción de este hotel. Entonces, ¿cuándo se construyó? Cuánto tiempo te lleva llegar ahí y cosas así. Por lo que moviéndose hacia abajo, vamos a incluir características de hotel como esa. Y vamos a dividir esta sección en dos secciones. Porque aquí mismo de este lado, vamos a tener una sección pegajosa, lo que significa que esta sección, que va a ser más o menos esta GRANDE, no se va a mover. Y dentro de la sección de muerte, vamos a usar lo que realmente usaron todos estos otros sitios web. Entonces vamos a usar información como check-in, check-out, tipo de habitación, cuántos adultos, cuántos niños y cosas así. Entonces sigamos adelante y creemos eso de inmediato para que no nos distraiga de todos estos otros servicios. Entonces check-in, check-out. Vamos a tener un tipo de habitación. Y por ejemplo, podemos agregar un icono más para que puedan elegir adicional aquí mismo. Para que puedan ir con una habitación, tumbas, tres habitaciones, cosas así. Entonces vamos a tener algo así como adultos. Y pueden elegir 12 o tres niños. Las mismas cosas. Por lo tanto, no escriba nombre. Entonces vamos a tener servicio. Entonces digamos todo incluido. Excursiones. Y todos estos se pueden bajar, por ejemplo. Entonces no digas niños, adultos. Por lo que estos downs nos van a permitir tener más información incluida. Por lo que en excursiones podemos escribir en museos por ejemplo. Y por último, podemos tener total. Entonces 1290 por ejemplo. Y vamos a tener un bonito libro de cantar botón grande ahora. Y razón. Y esto va a ser así, es, por ejemplo, esto puede ser un menú pegajoso como dije. Por lo que esta sección puede ser sección desplazable. Y una vez que realmente empiezan a desplazarse en esta sección, pueden ver toda esta información diferente incluida dentro. Pero esta sección, que va a ser sección pegajosa, va a mantenerse al día con ellos sin importar a dónde se desplacen hasta esta página. Entonces como dije, características del hotel, podemos incluir diferentes iconos. Entonces podemos incluir un tipo de habitación. Y por ejemplo, podemos tener dos o tres habitaciones diferentes, así que no soy dueño de una. Yo quiero sumar en tres. Y estas pueden ser imágenes de estas habitaciones abajo dat. Podemos tener algo así como unas amenidades. Como ya he dicho. Por lo que podemos incluir diferentes iconos. Entonces por ejemplo, para aire acondicionado, para una mini nevera, para un bar, Wi-Fi, cosas así. Por lo que podemos tener a continuación servicios disponibles, por ejemplo, servicios. Y dentro de DAT podemos incluir, por ejemplo, ya sea pan y mantequilla, cama y desayunos. Entonces PUEDO y B, y B o, y luego descripción. Y aquí podemos tener algo así como todo incluido y descripción. Y se puede ver cuando se empieza a sumar toda esta información va a ser realmente larga. Entonces adelante. Por lo tanto, es realmente útil tener esta parte pegajosa de tu página. Por ejemplo, Dan, debajo de eso podemos incluir algo así como plan de viaje. Y veamos d uno y luego descripción, los dos y luego descripción y moviéndose a lo largo. Cuántos días realmente tienes alguna tira. Por lo que podemos caer por debajo de esas excursiones disponibles. Y podemos tener diferentes iconos para diferentes excursiones las cuales en realidad están disponibles. Entonces puedo, por ejemplo, y dividir en esta página así. Tan sólo para que sepamos que esta es en realidad área desplazable y esta es la zona fija. Entonces podemos tener algo como, no sé, tal vez de hotel o algo así. Entonces vamos con sobre la ubicación. Y por ejemplo, podemos incluir un mapa de esa ubicación y luego descripción aquí abajo. Entonces podemos decir algo así como precio incluye y en realidad vamos a poner eso aquí para que no tenga que escribir sección adicional. Entonces el precio incluye, y vamos a traer esto así. Entonces la flecha justo aquí. Por lo que el precio incluye. Y luego podemos poner texto adicional sobre lo que está incluido dentro del precio. Y por ejemplo, podemos escribir en algo así como algodón propios términos de servicios o en algún momento que me prometan. Dentro de esa agencia se puede ver lo que está incluido, lo que no está, y por ejemplo, lo que no está incluido. Y entonces pueden escribir en deuda ahí también. Básicamente, aparte de éste, se desplazan hacia abajo, va a ser exactamente lo mismo. Entonces pasemos a este tramo de la playa. Y en realidad escribamos algo aquí. Entonces cuando el desplazamiento hacia abajo más allá de esta parte de la página y pase en esto, en realidad, lo que les va a saludar es exactamente la misma configuración que en la página anterior. Entonces lo que vamos a tener una imagen con un color, viaje perfecto con scription. Cotización. Entonces vamos a tener calificaciones de intercambio con estos tres. Y se puede ver aquí mismo por qué estoy usando bolígrafo y papel porque se puede ver claramente lo rápido que es esto. Y no hay manera de que se pueda hacer esto más rápido en cualquier tipo de software en lugar de simplemente anotar en pedazo de papel. Por eso amo a la gente que está enmarcando tanto. Aquí vamos a tener Q y a. Así que exactamente la misma sección que en cualquier otra playa. Manténgase en el bucle. Y como de costumbre, vamos a tener correo electrónico con un icono de correo electrónico y botón de suscripción aquí mismo. Y por último, vamos a tener término completo. Entonces rebaño lechero, esto es RPG. Entonces una vez que hacen clic en el destino fue el elegir qué destino realmente quieren, entonces pueden ir a esta página la cual les va a dar toda la información adicional sobre el hotel ¿necesitaron saber? Y desde aquí, de esta sección pegajosa que tiene libro ahora, pueden dar click en el libro ahora en, eso nos va a llevar al siguiente ritual de cuentas que va a diseñar y crear, que es la página de pago. Y dentro de esa página vamos a descomponernos en realidad a tres páginas diferentes. Por lo que va a ser mucho más sencillo para nuestros usuarios y mucho más rápido para que ellos revisen, paguen, y vayan por el camino separado. 10. Fotogramas de alambre 5: Entonces como dije, la siguiente página y pH final para nosotros es la página de pago. Entonces vamos a crearlo muy rápido. Entonces saltemos adelante y creemos este esquema. Pero en lugar de crear este esquema en su conjunto, como dije, déjenme escribir rápidamente el pago porque la navegación para ello va a seguir siendo la misma. Y eso. Entonces parece que lo creamos. Y aquí lo que vamos a crear son, por ejemplo, los detalles del viaje. Mi papá. Y queremos crear un fondo completamente blanco porque no queremos que nuestros usuarios se distraigan y salgan de esta página porque realmente queremos que completen su pedido. Entonces por eso vamos a hacer algo así. Pago. Y por último, confirmación. Y esto o bien es un seleccionado y estos dos están en gris o esto es más oscuro. Y así lo pueden ver realmente muy bien y estos pueden ser geniales fuera. Por lo que dentro de los detalles del viaje, lo que podemos crear es algún tipo de tarjeta como lo hicimos anteriormente. Entonces imagen, entonces podemos incluir un hotel de calificación. Y luego podemos incluir, por ejemplo. Por lo que la misma información que hicimos en esa tarjeta. Por lo que este puede ser un destino o dirección. Y aquí tenemos toda la información que los usuarios han elegido. Entonces, por ejemplo, la gente también. Y por ejemplo, más uno, que es para el niño en el tipo de casa, que es, por ejemplo, la habitación número uno e ir con ese tipo de servicio número uno o inclusive. Y por último, ¿excursiones? Sí. Y pueden estar de acuerdo con la agencia sobre estas excursiones. Entonces tal vez podamos tener un divisor aquí y digamos 14 días. Mismo íconos como teníamos, y total de 1280 por ejemplo. Y ese es básicamente nuestro primer paso. Vamos a tener el siguiente paso, que es el pago. Y eso es lo que vamos a crear ahora. Entonces por eso dije, solo imagina esto como una sección. Entonces vamos a moverlo aquí abajo. Entonces voy a tener lo mismo. Por lo que viaje y detalles, confirmación de pago. Y ahora en realidad se va a seleccionar el pago y estos dos van a estar en gris afuera. Entonces va a ser bastante sencillo que los usuarios naveguen porque básicamente tienen solo una sección y lo vamos a animar más adelante en XD. Para cambiar entre estas tres secciones diferentes. Entonces para el pago en sí, podemos tener, por ejemplo, nombre del titular de la tarjeta, nombre del titular de la tarjeta, y podemos tener campo aquí. Entonces nombre. Entonces podemos tener número de tarjeta. Y podemos tener un número aquí mismo. Entonces 1, 2, 3, 4, 5, 6, 7, y así sucesivamente. Vamos a tener fechas de caducidad. Entonces, ¿cuándo caduca el carrito? Y 12 a 24, por ejemplo. Y finalmente CVC, que es el número en el reverso de tu tarjeta, por lo que 123 y o B ancho, PayPal por ejemplo, o cualquier otra opción que la agencia vaya a apoyar. Vamos a tener el botón P Now aquí mismo, que luego los va a llevar a la página de confirmación, obviamente. Entonces ahora sigamos adelante y anotemos esto una vez más. Por lo que detalles de tropa, pago y finalmente confirmación. Y para la confirmación, Vamos a seleccionarlo. Y aquí podemos tener una AACN, que es una abreviatura de Icon. Tu viaje ha sido reservado. Dat principal. Y aquí podemos tener dos líneas de texto por ejemplo. Y entonces podemos tener dos botones diferentes así. lo que de vuelta a casa, por ejemplo, con el icono de casa aquí dentro, podemos tener un icono PDF, por ejemplo, recibo de descarga. Porque por ejemplo, tal vez deberías mostrar este recibo en tu agencia o en el aeropuerto o cosas así. O quizá cuando llegues a tu destino en el hotel. Entonces tal vez necesitan que los muestres ahí. Entonces por eso descarga recibida es realmente útil. Y también puedes imprimirlo como PDF por ejemplo, o cosas así. Para que lo puedas llevar junto contigo en tu viaje. Debajo de toda esta información, como dije, solo imagina esto como una sola sección. Por lo que debajo de esta sola sección con tres áreas diferentes dentro de ella, vamos a tener cosas normales como lo hicimos en páginas anteriores. Entonces vamos a tener una imagen con el color y viaje perfecto, ¿no? El texto. Cotización. Vamos a tener tipo de cambio. Y vamos a tener estos tres. Vamos a tener Q y un suscribir mis notas. Tan misma sección, así sirve web e-mail box y finalmente pie de página, justo aquí en la parte inferior. Entonces ahí lo tenemos, y esos son nuestros wireframes. Y si me estiro y alcanzo y consigo mis otros wireframes y deuda que creamos durante estos pocos videos. Por lo que aquí tenemos ofertas seleccionadas. Aquí tenemos un destino. Aquí tenemos nuestra gran página de inicio, y aquí tenemos estas páginas que creamos. Entonces en general, se puede ver lo rápido que es este proceso, lo rápido que es. No necesitas ningún equipo de lujo. No necesitas ningún grosor de fantasía y clasificación de papel. No necesitas reglas, no necesitas ningún tipo de rotuladores, bolígrafos y lápices especiales y demás. Solo necesitas el trozo de papel normal, viejo y liso. Necesitas un lápiz o un bolígrafo, lo que elijas. Elegí este negro sólo para que ustedes lo vean mejor contra el pedazo de papel blanco, pero pueden elegir lo que quieran. Ahora el siguiente paso para nosotros es que puedes tomar una foto de todos estos wireframes, después llevar la imagen a tu escritorio y simplemente arrastrarla y soltarla a Adobe XD. O si tienes un escáner como un hub, puedes escanear estas páginas de forma individual y luego simplemente guardarlas como imágenes en nuestro escritorio, para luego simplemente arrastrar y soltar esas imágenes en Adobe XD para que puedas utilizarlas como referencias. No necesitas hacer eso si no estás compartiendo esto con tus clientes, pero si estás compartiendo tu archivo con los clientes o con los desarrolladores o compañeros de equipo o cosas así, entonces es realmente útil tener esa opción dentro de Adobe XD, solo para que puedas recordarles o recordarte estas ideas que tienes en tus wireframes. Y Esa es la característica clave aquí mismo en clave para llevar de este proceso de estructura alámbrica en papel. Estas son solo ideas. Entonces todo esto, que creé durante este proceso son solo ideas simples. Entonces nada tiene que parecer exactamente igual así. Y por ejemplo, algunas de estas páginas no van a verse así. Vamos a dividirlos y cambiarlos un poco más tarde cuando empecemos a crear. Pero ese es el punto completo. Esto es solo para que puedas bajar tus ideas en un trozo de papel muy rápido, más rápido de lo que puedes hacer en cualquier software. Y luego tráelos dentro de Adobe XD o tu autor preferido y luego empieza a trabajar desde ahí. Entonces eso es básicamente todo para esta sección. En el siguiente apartado, como dije, vamos a llevar esto a Adobe XD. Puedes usar tu teléfono para tomar una foto de cada uno de estos, traerlos desde tu escritorio a Adobe XD. O si tienes un escáner como yo, simplemente puedes escandalizarlos y luego guardarlos en tu escritorio y llevarlos a Adobe XD. Entonces te veré en el siguiente video. 11. Importar cuadros de papel: De acuerdo, así que ahora que nuestros wireframes de papel están terminados, como dije, puedes usar tu teléfono para tomar una foto y traerla al interior de Adobe XD así. O si tienes un escáner como yo, simplemente puedes escanearlos y llevarlos a tu máquina y luego arrastrarlos y soltarlos en Adobe XD. Y eso es lo que voy a hacer. Ahora. ¿ Por qué deberías hacer esto de todas formas? Bueno, por si acaso quieres compartir este wireframes de papel con tus clientes, con tus compañeros de equipo, con tus desarrolladores solo para obtener algunos comentarios rápidos. Ese tipo de cosas rara vez sucedieron porque suelen ser solo para que bajes algunas ideas en un pedazo de papel que tienes en cabeza como se explica en el proceso de creación. Pero por si acaso alguna de esas personas realmente quieren ver estos wireframes. Y para darte los primeros comentarios sobre el diseño en sí, entonces puedes compartirlos así con tus clientes, compañeros de equipo o desarrolladores. Entonces para empezar, lo que tengo aquí mismo es ese archivo que creamos previamente, y simplemente voy a seleccionar mis imágenes desde el escritorio, arrastrarlas y soltarlas dentro y podrás ver cómo se ven. Entonces déjame seleccionarlos así y déjame arrastrarlos y colocarlos así. Y déjame acercarme un poco más. Entonces déjame separarlos por un 100. Voy a separar a éste, luego a éste. Éste, y finalmente éste. Y vamos a correr rápidamente a través de ellos. Entonces lo que tenemos aquí mismo es nuestra navegación. Y esto va a ser bastante útil para nosotros. Justo cuando empezamos, tenemos la página de inicio y se puede ver y recordar que esta era esa larga página que creamos con todas estas diversas secciones diferentes. Entonces lo que tenemos es la pantalla de destino. Cuando se van a ir, cuando hagan clic en uno de estos y vayan a esta pantalla de destino. Desde aquí pueden elegir la oferta si recuerdas. Oferta tan seleccionada, y esta oferta va a ser obviamente para el hotel con todas sus características. Por último, una vez que el click reservó y elija todas estas opciones, lo, se van a llevar aquí a la pantalla de pago donde obviamente son buenos para completar su pago. Entonces eso es todo para esta parte de esta clase y esta sección del proyecto. Siguiente sección va a ser en realidad, vamos a empezar a crear wireframes aquí en Adobe XD utilizando estos como nuestras referencias. Entonces por eso los creamos en primer lugar. Tan sólo una última cosa a tener en cuenta. Si lo deseas, puedes mantenerlos en forma de papel. Si no, simplemente puedes tirarlos y tenerlos aquí mismo en Adobe XD una vez más, si quieres compartirlos, porque es bastante fácil compartirlos, simplemente selecciona un clic Control E. Puedes seleccionar la destino, puedes elegir, por ejemplo, PNG o JPEG, lo que quieras, pulsa Export, y luego simplemente puedes compartirlos con tu cliente. O alternativamente, como hiciste, tomaste una foto con tu teléfono, trajiste adentro o las escaneas como lo hice yo. Y luego simplemente puedes enviarles esos escaneos y ellos pueden proporcionar la retroalimentación sobre la deuda. Entonces básicamente, como dije, estos son sólo el proceso de ideación. Estos están ahí para bajar algunas ideas en un pedazo de papel y ahora viene la parte real con wireframes en Adobe XD. Y yo siempre te animaría, si alguna de esas personas no te pidieran que les enviaras estos wireframes en papel entonces obviamente empezar con la retroalimentación en la vía framing parte del proceso en Adobe XD, porque en realidad puedes compartir el enlaza con tus clientes y desarrolladores y pueden empezar a analizar tus diseños de inmediato. Y luego pueden proporcionar la primera retroalimentación sobre el primer borrador, ¿no? Atrévete, porque es mucho más simple y siempre puedes hacer que esos enlaces se puedan hacer clic. Siempre se puede incluir alguna interacción, algunas animaciones ahí, mientras que no se puede hacer eso, porque estos son solo los wireframes de papel. Entonces como dije en la siguiente sección, vamos a empezar con wireframes en Adobe XD. Entonces te veré ahí. 12. Recursos de proyecto: Antes de saltar al diseño y empezar a trabajar en él, solo quiero mencionar rápidamente recursos, porque cada proyecto que vas a crear, vas a necesitar algunos recursos. Y en este proyecto y en esta clase estoy usando recursos premium de elementos Envato. Vas a meter estos recursos dentro del archivo para que puedas utilizarlos con fines de aprendizaje, pero no tienes permitido utilizarlos en ningún tipo de proyectos personales o comerciales porque tendrás que pagarlos. Creo el enlace abajo en el PDF a esta colección que estoy usando. Entonces en caso de que quieras explorar los elementos de Envato en, en caso de que quieras usarlos para, por ejemplo, diseño de tu cartera o para el trabajo del cliente, entonces tendrás que comprar estos artículos. Pero en caso de que solo quieras usarlos con fines de aprendizaje, solo para seguir esta clase, está bien. Pero por favor no los compartas por ahí porque no tienes la licencia. Y esto es realmente importante de entender porque si alguien te pilla usando estos artículos sin licencia, estás arriesgando una posible demanda. Entonces solo ten eso en cuenta. Ahora, quiero mostrarte rápidamente esta colección, qué incluye y qué puedes descargar en uso de los elementos Envato. Entonces aquí está esa colección de la que estaba hablando. Como puedes ver, estoy usando una fuente premium y estoy usando una fuente gratuita. Estoy usando Poppins de Google font como fuente gratuita. Y estoy usando este bicarbonato de Envato Elements, que por supuesto es una fuente premium. También puedes seguir adelante y descargar versiones más grandes de estas imágenes, por ejemplo, desde aquí. Pero vas a poner esta marca de agua encima de todas estas imágenes. Entonces déjame abrirla. Ya puedes ver que lo vas a conseguir aquí mismo. Ahora esto es realmente crucial y por qué estoy usando elementos Envato para todo mi trabajo premium. Se puede ver que mencionaron aquí mismo. Por lo que casi seis K de tamaño. Y también las colecciones son realmente enormes porque puedes conseguir estas impresionantes colecciones con estas imágenes luciendo bastante similares porque y ese es el punto clave medio por qué estoy usando unos recursos premium o los recursos gratuitos. Con recursos premium, sobre todo con imágenes estás obteniendo estas colecciones. Después podrás utilizar colecciones del mismo fotógrafo las cuales son fotografiadas en el mismo entorno utilizando la misma iluminación, utilizando el mismo equipo el mismo día. Por lo que estas imágenes se ven extremadamente coherentes. Parecen que se pertenecen el uno del otro. En lugar de usar todas estas imágenes aleatorias de sitios web gratuitos como Unsplash por ejemplo, terminando con tu sitio web buscando coherente y luciendo inconsistente y realmente amateurish. Entonces con estos recursos, tus diseños pueden terminar luciendo premium porque los estás usando del mismo fotógrafo que dije, en esta extremadamente alta calidad. Y lo mismo vale para los iconos, por ejemplo. Entonces si me desplaza todo el camino hasta aquí y voy a la última página de esta colección, se puede ver cuántas son. Ya puedes ver estoy usando estos iconos premium hechos por este mismo tipo o persona o empresa, lo que sea, estos iconos redondos. Y se puede ver que estos iconos realmente se ven como si se pertenecieran el uno del otro. Se puede ver que todos parecen una parte de la misma colección que son. Por lo que se ven extremadamente premium. Y si abro algunos de ellos, puedes ver todos estos tipos de archivos en los que están entrando. realmente puedas escoger y elegir lo que quieras. Y se puede ver que todos ellos se crean en estas exactamente las mismas dimensiones. Por lo que 1906 con 96, lo que los hace extremadamente sencillos de usar. Y como vas a ver a lo largo de nuestro diseño, vamos a usar versiones de esquema así como las versiones de color, que una vez más, no vas a conseguir con ninguno de estos tres iconos. Lo mismo vale para las ilustraciones. Especialmente si estás usando algo así como andro, que cada diseñador del planeta parece que está usando ahora mismo, sólo porque es gratis. Don haga eso. Si deseas que tus diseños luzcan pulidos y profesionales, asegúrate de utilizar estos servicios premium como Envato Elements. No tienes que usarlo, pero me gusta mucho porque a diferencia de algo así como un peso enorme, por ejemplo, los elementos Envato de trigo, no estás consiguiendo descargar límites diarios, por lo que puedes descargar tantos artículos como quieras donde quieras. Pero con algo así como, UH, por ejemplo, te están limitando a algo así como 18, quizá cuatro u ocho artículos al día. Entonces, ¿qué pasa si ese artículo no es un buen ajuste, por ejemplo, lo cual sucede mucho. Y vas a ver que una vez que empieces a diseñar, entonces estás atascado. Tienes que esperar a mañana para descargar y usar otra cosa. Pero con Envato Elements, simplemente puedes descargar toda la página web si lo deseabas hoy, y simplemente usarla en tu proyecto. Cuando se trata de licencias, es extremadamente sencillo de usar. Entonces digamos que quiero usar mis propios iconos de Ds. Por ejemplo. Simplemente hago clic en el Descargar y simplemente puedo escribir aquí mismo. Por ejemplo, viajes, una agencia de viajes, que es este proyecto. Simplemente puedo hacer clic en él, golpear Agregar y descargar, y eso es básicamente todo. Dentro de esta descarga. Cuando llegues a tus descargas aquí mismo, te van a cubrir con una licencia, para que puedas compartir esa licencia con tu cliente. Y están cubiertos por si acaso tienen que usar estos artículos cualquier otro lugar en línea o en impresión por un cuarto, lo que sea. Por lo que estás consiguiendo que esa licencia te cubra tanto para ti como para tu cliente, cual es otra gran cosa de los elementos de Envato. Y no sólo malditos sino servicios premium en general es que estás cubierto con una licencia, pero cuando estás descargando estos artículos gratuitos, nunca sabrías si alguien más descargó el artículo premium, por ejemplo, lo regaló gratis, y luego estás arriesgando esa demanda. Así que solo asegúrate de familiarizarte con todas estas diferentes licencias y artículos. Como decían, Vas a conseguir todos estos artículos los cuales estamos usando dentro del diseño. Pero solo asegúrate de usarlos con fines de aprendizaje. Tan sólo para seguir esta clase. Si quieres usarlos en cualquier lugar fuera para tu portafolio, para tu trabajo de cliente, tendrás que pagarlos y licenciarlos para ti mismo, como te acabo de mostrar aquí mismo. Una última cosa por la que quería correr antes de pasar al diseño es que quiero mostrarte lo que está incluido en los propios elementos de Envato. Por lo que puedes ver aquí mismo todas estas diferentes categorías. Entonces plantillas de video stock, música que estoy usando para estas clases, así como mi canal de YouTube, efectos de sonido, plantillas gráficas. Puedes ver kits de UX y UI y hay miles de ellos para ayudarte a acelerar tu flujo de trabajo. Plantillas de presentación de gráficos, fotos , fuentes, flechas, plantillas web, y más categorías. Ahora cuando se trata de fotos, tienen sus propias fotos, que son ésta básicamente. Pero también puedes ir a la página web llamada 2020 por 50 millones de fotos adicionales encima de todas estas fotos aquí en elementos de Envato porque son dueños de esa página web. Y dentro de más categorías se puede ver CMS, plantillas, WordPress, 3D, y también tienen sus e-books y clases. Entonces básicamente eso es todo cuando se trata de las licencias, cuando se trata de estos archivos y lo que estoy usando para un día de clase. Por lo que ahora ya sabes, una vez más, puedes utilizar estos elementos los cuales se incluyen en el archivo únicamente con fines de aprendizaje. Para que puedas seguir a lo largo de esta clase y puedes crear todos estos elementos. Pero en caso de que quieras ponerlos en tu cartera, o peor aún, en caso de que quieras trabajar con tu cliente, tendrás que comprarlos. O simplemente puedes usar este diseño que creamos en esta clase y simplemente añadirle en tus propias imágenes, tus propios iconos, y tus propios elementos para que puedas usarlo con ese fin. Entonces sigamos ahora. 13. Crear guía de estilo: Pasemos ahora a los wireframes en Adobe XD. Pero antes de hacerlo, rápidamente necesitamos terminar pocas cosas. En primer lugar, necesitamos crear una guía de estilo. Y la guía de estilo es genial porque dentro de ella, habrá colección de imágenes, de iconos, diferentes colores, fuentes, tamaños de fuente y combinaciones de fuentes, y todos los demás elementos que desee, para ejemplo, botones, deslizadores, todo lo demás puede estar dentro de esa guía de estilo, cual es extremadamente útil tanto para ti, tus compañeros de equipo porque simplemente pueden copiar y pegar esos elementos de esa guía de estilo a tu clientes porque pueden echar un vistazo fácilmente a todos los elementos que usaste en tu diseño. Por último, y lo más importante para tus desarrolladores, porque pueden fácilmente un vistazo y exportar desde ahí si quieren. Pero vas a llegar a exportar características más adelante. Y voy a compartir con ustedes algunas formas que pueden compartir sus archivos con sus desarrolladores. Pero esta es solo una de ellas y esta es solo una de las opciones que está disponible para ti en Adobe XD. Ahora antes pasamos a la guía de estilo y a los alambres reales en Adobe XD. Yo sólo quería compartir rápidamente con ustedes los otros productos que tenemos en una donut web. Y también tenemos UX, UX kids, que básicamente son kits wireframing y puedes usar estos para acelerar tu flujo de trabajo. Ahora bien, no tienes que usar estos para este proyecto en particular, pero puedes utilizarlos para tus propios proyectos en el futuro, tanto personales como comerciales, si quieres saberlo. Solo digo que esta es solo una opción para ti si quieres, pero no es obligatoria para esta clase. Entonces lo que tenemos justo aquí son todos estos diversos chicos UX. Y también tenemos kits de UI, que básicamente son lo mismo pero con Textos reales Incluidos y ancho incluido imágenes dentro. En nosotros los niños usualmente esto es sólo un texto ficticio y normalmente se incluyen algo como texto Lorem Ipsum o algo así. Pero dentro de los kits de interfaz de usuario, hay algunos elementos reales. Puedes conseguir esto con una suscripción o si quieres aún mejor trato, podría sugerir que vayas a mi propia página web personal. Y por cierto, dejaré los enlaces a todo lo que va hablando en el PDF y podrás acceder a él con todos los descuentos que antes mencioné. Y aquí se puede ver que todo está en un solo lugar. Contamos con cursos y tenemos membresía. Y por supuesto estos paquetes son mucho mejores. Entonces simplemente visitando mi sitio web. También tienes una llamada de coaching de 30 minutos cada mes conmigo. También tienes grupo privado de Facebook. Entonces si esto es algo que te interesa, me reuní, te exhorto a que lo revisen y que te metan todos estos productos en todos estos cursos si te interesa, claro, también tengo un canal de YouTube y lo vincularé en ese PDF también. Puedes comprobarlo si quieres algún contenido adicional, pero si no, pasemos rápidamente a Adobe XD. Y quiero mostrarles lo que se incluye dentro de la guía de estilo y lo que vamos a usar. Entonces aquí estamos en Adobe XD, y como pueden ver, aquí es donde dejamos el video anterior. Entonces básicamente tenemos plantilla breve de diseño. Tenemos esta pizarra de humor y tenemos alambres de papel. Ahora antes de pasar a los wireframes en Adobe XD, algo útil de tener es la guía de estilo. No es obligatorio, sobre todo cuando apenas estás empezando con estos proyectos. Obviamente. Muchas veces no tienes los colores, no tienes las fuentes, no tienes los iconos, solo los vas a conseguir. Pero en este caso, porque ya tengo este proyecto creado, voy a empezar con la guía de estilo. Ahora, guía de estilo es siempre cosa en evolución. Entonces a medida que avanzas por tu proyecto, medida que obtienes más y más recursos dentro, por ejemplo , imágenes, diferentes fondos, sombras, diferentes iconos, entonces vas a llenar mucho más esta guía de estilo. Pero para empezar, puedes empezar con el simple uso de la tipografía, por ejemplo. Entonces, cualesquiera que sean los estilos de tipografía que tengas, cualesquiera que sean los colores de tipografía, simplemente puedes incluirlos dentro. Y obviamente puedes crear algo así como componentes en Adobe XD para que puedas cambiarlos fácilmente más adelante y la guía de estilo actualizada en tiempo real. Entonces una vez más, lo que tenemos justo aquí es este documento de Adobe XD. Voy a saltar dentro de mi documento el cual ya creé y pego Control V, Control C para copiarlo y luego Control V aquí mismo para pegarlo dentro. Y como puedes ver, aquí hay algunos problemas. Entonces déjame deshacer ese par de veces y déjame saltar. Veamos bibliotecas. Y saltemos dentro de aquí y creemos 1920, nuestro tablero. No sé por qué sigue haciendo eso. Entonces, en realidad duplicemos este. Y al hacer esto, lo voy a posicionar aquí abajo. saltar, llámalo estilo, ve así. Entonces voy a saltar dentro de mi panel de capas y quitarlas todas, incluyendo VG. Entonces voy a saltar aquí mismo y darle 1920 por 1080, por ejemplo, layout. Usemos un ancho de canaleta de 68. Piensa que va a estar bien. Aquí. Voy a bajar la obesidad profunda de estas líneas de cuadrícula para girar tal vez hasta a ocho. Entonces no es demasiado distrayente para que veas. Creo que eso es bueno. Y ahora voy a saltar. primero es lo primero, en realidad voy a usar un color de fondo para esta guía de estilo en lugar de blanco, solo para que puedas ver todos estos otros iconos que no lo son, que no van a destacar. Entonces simplemente voy a copiar y pegar todos estos elementos en. Aquí están. Y básicamente eso es todo, esa es nuestra guía de estilo. Estos son los iconos que vamos a utilizar. Entonces básicamente estos son todos los iconos que comparto contigo en la colección Envato Elements. Y básicamente puedes usar estos iconos o puedes usar otros iconos que encuentres en línea. Básicamente, todo depende de ti lo que quieras hacer. Como dije, hay que seguir las reglas sobre las licencias para poder utilizarlas sólo estrictamente con fines de aprendizaje. No se pueden utilizar para ningún tipo de trabajo de cliente. Están prohibidos tanto los proyectos personales como los comerciales. Usarlas estrictamente con fines de aprendizaje. Y déjame realmente saltar dentro de aquí. Y déjame ir a Envato Elements. Y Puedes ir a mis artículos solo para mostrarte esa cobranza una vez más, por lo que vas a poder, como dijo, acceder a ese enlace de cobro va a estar en el archivo PDF y simplemente acceder al cobro de deudas y navegar por lo que he incluido. Entonces básicamente esta es esa colección, como se puede ver aquí mismo. Podrás navegar por todas estas diferentes imágenes. Y puedes conseguir estas ilustraciones, puedes conseguir estos paquetes de iconos. Y básicamente lo que he hecho es que lo puedes ver en la lavadora aquí mismo. Y si vuelvo a cambiar a nuestro archivo original donde está, Aquí está. Para que veas que tomé algunos iconos de esos packs y básicamente los pegué aquí mismo. Lo que también hice fue usar el logo. Tenemos el estado por defecto y tenemos el estado oscuro, que es esta fecha, y yo solo muevo esto aquí para que ustedes puedan verlo. De lo que también tenemos nuestros estados para estos iconos. Entonces tenemos el estado por defecto si acercamos realmente de cerca, porque este es el icono de SVG, se puede ver lo bonito que es y también tenemos el contorno. Entonces tal vez vamos a usar el estado por defecto. A lo mejor vamos a usar el estado de esquema. Acabo de seguir adelante y eliminé de este color del icono original para obtener este estado de esquema. Y se puede ver que hemos delineado Estados para todos ellos. Ahora, una última cosa que vamos a hacer antes de que realmente empecemos a crear wireframes en XD. Voy a saltar aquí mismo a mis componentes. Y lo que voy a hacer es básicamente seleccionar todos ellos son hacer clic derecho y hacer glocal porque actualmente están conectados con mi archivo de diseño original que creé primero. Pero quiero hacerlos locales y aplicarlos aquí mismo antes de que realmente sigamos adelante con el diseño, lo que realmente queremos hacer es probar algunos colores. Entonces lo que voy a hacer es arrastrar un rectángulo como este. Entonces por ejemplo, tres columnas de ancho. Voy a asegurarme de dar vueltas por las esquinas sólo un poquito, sólo para que podamos estilizarlo un poco. Y vamos a usar esto como color blanco. Entonces usemos realmente el texto. Ponlo justo ahí. Y digamos toallitas lisas. Al igual que la deuda y dispuesto a usar Poppins para este y elegir Poppins 24, creo. Creo que eso funciona. Bueno. Él 6, Pasémoslo a, por ejemplo, 60. Yo hice Control D. Asegúrate de que esto esté bien alineado y básicamente vamos a usar el código hexadecimal. Así que permítanme copiar y pegar rápidamente el código hexadecimal del documento original. Y esto es solo un código hexadecimal para este color blanco. Asegúrate de que sean 40 porque no creo que sea necesario estar a los 60. Y saltemos a nuestro panel de capas y llamemos así a esta muestra de color. Y también me gusta organizarlos. Esto es color obviamente. Ponlo justo aquí. Esto es llano ancho, esto es justo aquí. Y finalmente agrupemos a todos estos Control G. Y les voy a llamar iconos. Esto va a ser logo, obviamente. Y más adelante, en realidad voy a exportar este logotipo, que es archivo SVG en este punto, pero lo voy a exportar más tarde. Y un arrastre y suelte dos PNG más aquí mismo porque necesitamos reducirlo. Y si recuerdas del ejemplo que te mostré cuando empiezo a reducirlo, como puedes ver, porque estos son tres elementos. No escalan demasiado bien. Entonces es por eso que en tamaños más pequeños realmente vamos a usar PNG en lugar de SVG. Entonces, ahora sigamos adelante y usemos algunos otros colores. Entonces vamos a posicionarlo aquí mismo. Muestra de color, obviamente puedes usarlo un bit grid, pero no voy a hacerlo, simplemente voy a usarla así. Ups. Vamos a posicionarlo así sólo para llenar nuestra grilla realmente bien. Por lo que el primer color que vamos a utilizar es principalmente el azul. Así. Voy a golpear copia del color mismo. Y en realidad voy a colorearme aquí mismo. Ahora, puedo dar click en esta muestra y puedo añadirla como componente, o simplemente puedo ir justo aquí donde dice Colores, click aquí y llamarla blanca lisa. Así. Puedo saltar aquí mismo, añadir éste también, llamarlo azul principal, así. Y entonces puedo seguir adelante. Esto va a ser hover y azul. Y déjame copiarlo rápidamente de mi documento original. Obviamente, vas a trabajar a tu manera alrededor de estos archivos. Simplemente o bien seleccionándolos de tu logotipo real, de tu documento real, de todos estos iconos de este tablero de humor que creamos. Entonces básicamente van a trabajar tu camino alrededor de estos porque ya los creé. Y para ahorrarnos un poco de tiempo, en realidad voy a simplemente seguir adelante y crearlos aquí mismo. Entonces vamos a llamar a este texto oscuro o aún mejor texto negro, o llamarlo casi negro. En realidad voy a copiar y pegar en este clip de texto aquí mismo, pegar y lo voy a agregar a mis colores, casi negro así. Y ahora porque los hemos rellenado todos, Vamos a duplicarlos antes de ese DoubleClick y extender nuestra mesa de trabajo. Esto es lo que estaba diciendo. Entonces obviamente vas a tener esta mesa de trabajo sea grande como necesites. Démosle un espacio de 80 abajo. Y veamos, quizá ahora pueda pasar al texto oscuro. A lo mejor. Vamos a pegarlo aquí mismo, y vamos a pegarlo aquí mismo. Y llamémoslo gris oscuro. Así. Vamos a dar click aquí, haga clic aquí. Cambia su nombre a gris oscuro así. Y vamos a llamar a esto gris medio por ejemplo, o gris claro como quieras. Y obviamente estos nombres pueden ser utilizados como tokens de color más adelante por los desarrolladores. Tan ligero, porque es mucho más fácil en código ver estos colores luego usarlos como están aquí mismo. Por último, lo que vamos a utilizar la muestra algunos colores. Entonces voy a probar el color de esta estrella que ven aquí mismo. Entonces lo voy a llamar naranja estrella, sólo para que sepamos de dónde es y para qué se utiliza. Entonces da click justo aquí y ahí está. Haga clic para agregarlo, renombrarlo a estrella, naranja, así. Y por último, voy a agregar un color más, que básicamente solo va a ser muestreado de algunos de estos y lo vamos a usar más adelante como un básicamente apoyo colores para que podamos usarlo para otra cosa y llamarlo llano saber, color melocotón así. Pega en el código hexadecimal y puedes ver por qué le di ese nombre. Por último, sumémoslo rápidamente a aquí. Cambia su nombre. Hábito de Derek. Y por último, lo que queremos hacer en este punto es agruparlos a todos. A ver. Entonces pongamos estos cuatro en la parte superior. Al igual que así. A ver, este es el primero y este es solo mi TOC. No tienes que hacer esto, pero realmente me gusta mantener las cosas organizadas y bien posicionadas. Entonces voy a poner esto aquí, poner esto aquí, ahí lo tenemos y agruparlos a todos y llamarlos colores. Por lo que ahí lo tenemos, Ahora tenemos nuestros colores, somos capaces de probarlos. También vamos a usar este Poppins y otra fuente, que es la fuente premium. Y lo puedes conseguir en la colección Envato Elements si quieres. Si no, puedes, obviamente, como dijo, encontrar algunas fuentes gratuitas para corresponder bien con la fuente premium que usé. Pero si no, como dije, simplemente lo puedes encontrar aquí en esta colección y luego usarla si quieres. Entonces eso es todo por ahora. Ahora vamos a pasar a crear alambres en Adobe XD. Y les voy a mostrar cómo podemos convertir estos wireframes de papel en algunos wireframes que en realidad pueden compartir con sus clientes para obtener alguna retroalimentación adecuada sobre. 14. Crear alambres: De acuerdo, así que ahora que se crea la guía de estilo, sigamos adelante y en realidad empecemos a crear nuestros wireframes en Adobe XD. Entonces lo primero que voy a hacer es dar click en mi mesa de trabajo, saltando aquí mismo, dar click en este 1920 por 1080. Y finalmente pasa, hacia aquí. primero es lo primero, sólo para que ustedes puedan ver esto, bajémoslo a ocho, así que es lo mismo que éste. Saltemos a algo ancho como 60 por ejemplo. Entonces eso la hace, al ingenio más grande, que es el ancho entre nuestras columnas y anchos de columna, mucho más pequeña. Por lo que en realidad es fácil trabajar con. Y hagamos doble clic aquí mismo, llámalo playa casa. Y lo primero que realmente voy a hacer es extenderse hasta abajo. Porque si salto dentro de aquí se puede ver la página va a ser extremadamente enorme. Así que vamos a saltar aquí mismo. Y lo primero que realmente queremos hacer es incluir una imagen. Y vamos a ver. Podemos, por ejemplo, campeonar y crear un rectángulo de 1920 por 1080 como este, 1920 por 1080 y posicionarlo. Veamos aquí y aquí. Quitemos la frontera y démosle un nombre propio. Entonces digamos por ejemplo, héroe, IMG. Dejémoslo así. Y vamos a darle un color de gris oscuro, por ejemplo, o incluso mejor gris claro, sólo para que podamos ver lo que estamos haciendo. Y vamos a indicar que este gris claro, por ejemplo, es el color de la imagen por la mañana. Entonces, en realidad ahora saltemos aquí mismo. Y como dije, se puede utilizar desde aquí, todos estos elementos guía de estilo. O simplemente puedes saltar aquí mismo, encontrar el logotipo, arrastrarlo y soltarlo dentro. Que es lo que en realidad voy a hacer. Y lo voy a mover, por ejemplo, 40 de arriba, como deuda. Ahora lo primero que voy a hacer si te llevo aquí a nuestro wireframe, puedes ver que tenemos navegación de dos niveles como todos esos sitios web lo hacen, pero lo vamos a hacer de una manera mucho más limpia. Entonces vamos a tener esta parada, que va a decir, por ejemplo, boletos de avión, boletín de noticias, y el número de teléfono. Y este de abajo en realidad va a ser nuestra propia navegación. Entonces saltemos justo ahí y veamos, por ejemplo, puedo arrastrar ese ícono de boletos de avión y realmente puedo saltar dentro de aquí. Icono de boletos de avión. Y necesito dos más. Necesito newsletter. Aquí está. Y por eso es importante volver a nombrar tus capas. Y finalmente icono telefónico aquí está, y arrástrelo y suéltelo dentro. Ahora lo que voy a hacer es saltar a aquí, seleccionar los tres y simplemente organizarlos mejor así. Asegúrate de que todos estén por debajo Logo y simplemente haz clic aquí solo para que se ordenen bien y que estén en línea. Por último, voy a mover la derecha aquí por ahora, y en realidad voy a usar la herramienta de texto, haga clic aquí. Y voy a escribir en boletos de avión. Asegúrate de que sea de la izquierda. Y vamos a ver, vamos a usar Poppins. Y veamos luces como papás y quizá 18. Y también vamos a darle un color de blanco. Simplemente puedo cerrar esto y puedo ver a Lee usar blanco liso para éste. Puedo posicionarlo aquí mismo. Veamos, por ejemplo, puedo darle una distancia de c. Por ejemplo, 28 creo que va a estar bien. Así que así. Y seleccionemos a estos dos. Y simplemente lo saqué del camino por ahora, salta de nuevo a mi panel de capas, golpeé Control D una vez más. Voy a mover disco para tener 20 también. Asegúrate de que esté alineado lo es. Y duplicarlo una vez más y posicionarlo aquí mismo. Y ahora simplemente voy a hacer inducir boletos de avión van a ir por debajo del boletín. Y por último, voy a seleccionar estos para trasladarlos a aquí. Y vamos a ver. Este va a ser nuestra superclase de números telefónicos. Simplemente puedes escribir en algún imaginario para el número uno. Por lo que 1234567890 por ejemplo. Y vamos a ver. Yo puedo, por ejemplo, asegurarme de que lo sean, van de la derecha, por lo que alineados a la derecha. Y lo primero que voy a hacer es en realidad agregarla a mis estilos de personaje. Entonces lo tenemos, Poppins luz 18 aquí. Y ahora sigamos adelante y exploremos y Ds más. Por lo que 20. Y vamos a ver, tal vez podamos dar estos para ser 40. A diferencia de induce, así 40 y esto va a decir boletín, como las deudas y simplemente se mueven en este ícono en un poco más como cuotas y dárselo a 20, lo cual está bien. Entonces finalmente, voy a posicionar estos boletos de avión para ser 40 también. Sólo asegúrate. Y eso, a veces estos iconos no son tan grandes, así que vamos a conseguir estos medios píxeles, pero eso está bien. Simplemente puedes agruparlo. Correlacionar boletos de avión, boletín de noticias, y finalmente teléfono así. Y vamos a ver, podemos llamar a este nav secundario. Si puedo deletrearlo correctamente, e incluso puedo incluir estos guiones inferiores así. Y finalmente, lo que puedo hacer es ponerlo en una pila y como puedes ver, Stack lo organizó correctamente. Entonces ahora si quieres moverlos, puedes hacer esto. O simplemente puedes mantener presionada la tecla Mayús y simplemente extenderla como quieras. Y entonces por ejemplo, si posiciono este nav secundario en algún lugar por aquí, puedo hacer clic aquí y extender esto así o mantener el turno. Y va a extenderlos y moverlos así. Entonces creo que es muy agradable característica tener en esta pila en Adobe XD. Y finalmente, posicionémoslos para que sean 40 de arriba. Entonces veamos así. Y por cierto, estoy sosteniendo la tecla Alt u Opción en un Mac solo para ver dónde estoy con mis espaciados. Entonces sigamos ahora y sumamos nuestra navegación principal. Entonces veamos qué podemos hacer con él. Escribamos en destinos. Y para ello, Veamos tal vez podamos usar pop en leve pero 24 por ejemplo. Y también vamos a darle un color blanco. Y también lo agreguemos aquí mismo. Y veamos, podemos posicionarlo para que esté bien alineado así, lo cual está bien. Veamos destinos 24 luz, eso está bien. Veamos el invierno. Más con aquí mismo y ver el bienestar. Esto puede ser individual. Porque si recuerdas, y ese es su punto de venta clave, y quieren vender estos viajes individuales tanto como sea posible. Entonces eso es lo que estamos haciendo aquí mismo. Tenemos cruceros, y finalmente tenemos sobre nosotros. Ahora por fin, por este, veamos. Lo que también podemos hacer es trasladarlo a aquí y mover esto a los 80. Hace mover esto para ser 80. Y va a ser como estos útil porque es, nos está mostrando todas estas navegaciones o barreras. Por lo que nos muestra distancias y nos muestra con donde todo está en conjunto con todos estos otros elementos. Y una vez más, aquí está mi OCD porque realmente me gusta organizar cosas. Entonces llamemos a este nav principal. Al igual que las muertes posicionadas justo aquí. A ver. La muerte se puede posicionar, por ejemplo, al fondo justo aquí. Y tenemos 47 distancia entre estos dos, y eso está bien. Nuestra navegación está terminada. Y veamos tal vez podamos agregar esto y calidad, por ejemplo, navegación primaria como esa, porque esa es nuestra navegación a lo largo de nuestro diseño. Ahora sigamos adelante y añadamos algunos elementos más a nuestra página. Entonces lo que realmente voy a hacer es localizar mis flechas. Y siempre puedo usar esta búsqueda. Entonces filas, tenemos una flecha izquierda, arrastrar y soltar, flecha derecha, arrastrar y soltar. Y voy a saltar aquí mismo, seleccionarlos para asegurarme de que estén alineados correctamente. Y también voy a usar el rectángulo porque esta va a ser nuestra sección de héroes con el deslizador. Usa ese rectángulo. Seleccione estos dos. Da clic aquí, asegúrate de que estén en un centro. Entonces borra este rectángulo porque ya no necesitamos. Por último, para esta flecha izquierda, sólo la voy a alinear con nuestra línea de cuadrícula así. Y haz lo mismo por la flecha derecha. Entonces simplemente más justo aquí y alinearlo así. Lo siguiente que quiero hacer es usar mi herramienta de texto. Haga clic. Por ejemplo, explora, mística. Y vamos a dar esto, primero vamos a cerrar esto. Vamos a darle azul medio. Asegúrate de que sea desde la posición central como suciedad. C. Por ejemplo. A ver. 24 luz es buena, así que no vamos a cambiarla. Creo que es bueno. Podemos dejarlo así. Pero lo siguiente que vamos a hacer es duplicarlo. Pero para nosotros posicionarnos en un centro, duplicarlo. Y llamemos a este gen B, por ejemplo. Y ahora voy a cambiar realmente la fuente para que podamos esta, lo que voy a hacer es saltar a fuentes premium de deuda y cambiarla a deuda. Entonces creo que se llama corner nimbus. Soda de Bucks. Aquí está. Y voy a cambiarlo para que sean 200. Tan realmente enorme. Voy a usar color casi negro. Y veamos por las distancias entre estos dos, no lo sé. Podemos, por ejemplo, asegurarnos de que estén correctamente alineados porque tenemos suficiente del espacio entre ellos. Y por último, lo que vamos a hacer es incluir un botón dentro. Entonces vamos a ver. Podemos arrastrar un rectángulo como este y podemos hacerlo de dos a cuatro semanas, 70, por ejemplo, asegurarnos de que esté en el centro. Y veamos, podemos darle unas esquinas redondeadas de cinco. Podemos quitar el color de relleno en realidad, saldremos de la frontera n, pero vamos a mantenerlo sea en blanco. Y veamos, por la distancia que podemos, por ejemplo, posicionarla para ser 40 de nuestros textos. O incluso más. Se asemejan a AT, creo que eso funciona bien. Y finalmente dentro de ella, puedo saltar, copiar y arrastrar este texto escribiendo explorar. Ahora, podemos asegurarnos de que sea blanco. Y vamos a dar este btn, pequeño BG, por ejemplo, Data Explorer ahora. Así que asegúrate de que esté en el centro así, y asegúrate de que este texto de botón esté alineado al centro como está. Y por último, en realidad voy a golpear Control D y llamar a esto BG y pequeño color así. Y veamos, por ejemplo, puedo incluir el color. Y éste. Bueno, veamos aún mejor flotar el color porque vamos a usar Herakles poco después. Y en realidad voy a quitar la frontera y bajar la obesidad todo el camino hacia abajo. Entonces los voy a agrupar a todos y llamarlo botón héroe así. Y siempre puedo golpear Control K para asegurarme de que creo eso como componente. Y vamos a tratar con los componentes un poco más tarde, pero sólo quiero mostrarles lo que es posible ahora mismo. Entonces organicemos esto un poco mejor. Voy a posicionar esto aquí mismo. Llamémoslo texto de héroe, así. Y vamos a ver. Posicionarlo. Atrévete, creo que está bien. Aquí. Lo único es, que tratemos un poco con el espaciado. Entonces hazlo al mismo crédito para las flechas. Y básicamente es para nuestra sección de héroes, está terminada. Ahora lo que nos queda por hacer es incluir esa navegación de fondo aquí lo está. Por lo que este viaje de donación actividades, busca y solicita el fondo. Y eso es lo que vamos a hacer a continuación. Pero dejémoslo para el siguiente video porque éste dura casi 15 minutos y no quiero aburrirte demasiado. Pero básicamente lo que hicimos en este es que estamos terminados y completamos nuestra configuración y finalmente fuimos a un agregado todos estos diferentes componentes. Olvidé agregar el texto para este, así que lo voy a agregar rápidamente aquí mismo. Y como pueden ver, ahora seguimos construyendo esta guía de estilo y para construir nuestro archivo oral porque estamos, uh, más adelante cuándo agregar estos textos a nuestra guía de estilo en todos estos pesos diferentes. Pero te voy a mostrar eso más tarde cuando acabemos realmente el diseño y terminemos la propia guía de estilo. 15. Crear alambres en Adobe Xd 2: Ahora sigamos donde lo dejamos. Y vamos a crear esa sección inferior, que es ésta de aquí. Entonces déjame saltar aquí mismo. Y lo que vamos a hacer en primer lugar, se crea que delinea. Entonces, arrastrémoslo a través de todas nuestras columnas. Pero sólo asegúrate de que estoy fuera de mi texto de héroe porque quería estar separado. Voy a moverlo todo el camino hasta aquí. Un texto de héroe va a ir por debajo de nuestra navegación. Igual que con las flechas. Agrupémoslos, llamémoslo flechas así, y posiciónelo aquí mismo. Entonces lo que esto nos va a permitir es crear esa sección inferior y lo vamos a llamar abajo ahora por ejemplo, los anélidos le dan un nombre de fondo ahora BG por ejemplo. Y veamos, podemos mantener esto un ancho, pero aumentémoslo a, por ejemplo, 1640. Sí, vamos a mantenerlo en 640 porque ese es el ancho oral de nuestra cuadrícula. Al igual que los debates en realidad 1644, lo siento. Entonces quitemos la frontera y por la altura, vamos con 70. Tan mismo como con este botón. Y veamos por la distancia que podemos usar algo así como 60. Entonces 1, 2, 3, 4, 5, 6. Estar distante de este borde inferior. Lo que en realidad voy a hacer también es golpear cinco solo para que tengamos bordes redondeados como con nuestro botón. Entonces lo mismo aquí mismo. Y lo que vamos a hacer es utilizar esos otros elementos. Entonces saltemos por dentro y veamos qué podemos crear primero. Entonces vamos a ver, los destinos va a ser nuestro primero. Bueno, veamos. Podemos usar esto a las naciones. Y déjame cambiar eso realmente rápidamente para hacer pop cosas. Vamos a usar una luz una vez más. Y vamos a usar 18 esta vez, como puntos. Y en realidad vamos a usar un gris claro, creo. Y eso va a funcionar bastante bien para asegurarse de que ambos estén centrados así. Y también voy a usar este icono de pin aquí mismo. Entonces veamos dónde está y por qué no puedo verlo. Entonces vamos a comprobarlo aquí mismo. A ver dónde está. No estoy seguro de por qué no puedo verlo. Probemos eso una vez más. Entonces Pin a los curadores de icono y asegúrate de que sea gris claro, por ejemplo. O en realidad, localicemos en esa otra de aquí lo es. Por lo que destino puedo disculparme, escogí el equivocado. Al igual que papá por ejemplo, veamos algunas distancias entre ellos. A lo mejor puedo incluirlos para estar a los 40. Por lo que 1, 2, 3, 4 y destinos también podemos posicionarnos para ser 40 así. Y saltemos dentro de nuestro panel de capas y destinos de calidad como ese. Por último, lo que podemos hacer es controlar la posición D justo aquí. Esto puede ser de tipo Journey, pero en lugar de alinear el centro, Vamos a mantenerlo alineado a la izquierda. Mi duda, se llama a este tipo de viaje así. Y vamos así debe ser alrededor así. Y vamos a ver lo que podemos hacer aquí es reemplazar este icono de destinos por Journey type Python. Entonces aquí es simplemente arrastrarlo y soltarlo dentro porque este es el componente se va a actualizar en tiempo real. Simplemente empujar las muertes son 40 a la derecha, y eso es básicamente todo. Control D para duplicar este, muévalo hacia abajo. Esto van a ser actividades como esa. Mi papá seleccione este icono, haga clic y localice actividades y arrástrelo y suéltelo dentro. Asegúrate de que esto sea 40. Entonces 1234? Yo lo hice. Y como puedes ver, los nombres se están actualizando como deberían y cambiando porque cambiamos estos iconos, golpeamos el control D en este, posicionándolo hacia abajo. Esto se va a buscar viajes como ese. Vaca lechera it, y usa este y busca viajes. A ver, podemos usar este ícono de búsqueda así y asegurarnos de que seamos 40 así. Por último, lo que voy a hacer es duplicar nuestro fondo. Ahora BG golpeó Control y D, y en realidad voy a crear un botón. Entonces llamémoslo aplicar BTM. Y vamos a ver, podemos darle un ancho de 36, 6 así. Y vamos a darle el color principal así. Y finalmente posicionarlo aquí y alinearlo con nuestra grilla. Lo que también voy a hacer es usar Poppins 24 Lights, simplemente escribe algo como aplicar filtros. Mi mezcla de suciedad está alineada en el centro asegúrate de que sea Poppins 24 centro. Y veamos dónde está aquí, asegúrate de que estos dos estén en el centro. Y por último, lo que voy a hacer es hacer algunos cambios para escuchar porque no quiero que estas dos esquinas sean redondeadas. Entonces solo voy a saltar aquí mismo y ver raza de arriba a la izquierda a 0. Y de abajo a la izquierda, que es ésta, bájala a 0. Entonces tenemos a estos dos aplanados y estos dos redondeados. Por último, asegúrate de que estén en el centro. Dr. Control G. Y hit Aplicar btn. Y ahí lo tenemos. Esto lo hemos completado. Ahora dentro de nuestra sección de diseño, en realidad vamos a saltar y organizarlos un poco mejor porque aún quería dar suficiente espacio para todos estos. Y los vamos a posicionar más tarde en realidad e incluir algunos divisores cuando lleguemos a la etapa de diseño más adelante. Pero por ahora, en realidad, sabes qué, tal vez debería ocuparme de los divisores de inmediato. Por lo que es mucho más fácil para nosotros trabajar realmente en ellos. Entonces lo que en realidad voy a hacer es saltar aquí mismo y golpear pegar en uno de mis divisores, que yo creé anteriormente. Por lo que se puede ver el ancho es uno, altura es 70 como lo es con éste. Estos son los colores de relleno. Entonces básicamente el color que ya tenemos. Y lo que voy a hacer es realmente asegurarme de que ese divisor sea, por ejemplo, no sé, ciento ciento ciento, por ejemplo, píxeles de éste. Como muerto. Se Control D. Y asegúrate de que esto sea 40. Entonces usa ese divisor. Todo bien ahí. Asegúrate de que esto sea 40 también. Asegúrate de que esto sea 100. Por último, asegúrate de que esto sea 40 del divisor también. Y todavía tenemos suficiente espacio aquí mismo. Entonces ahí lo tenemos. Déjame pausar rápidamente el video para que pueda organizar estos separadores y no te aburra demasiado. Entonces lo que he hecho es simplemente incluir estos divisores en su carpeta solo para no aburrirte demasiado. Por último, permítanme agrupar rápidamente todo esto así. Y llamémoslo, por ejemplo, bots encendidos ahora. Porque tenemos nervio primario, tenemos fondo ahora en adelante, vamos a ver, tal vez podamos darle algo más. Ahora, vamos a mantenerlo en el fondo ahora y seguir adelante. Ahora vamos a pasar a estas secciones que básicamente van a ser las mismas. Por lo que tenemos ofertas especiales. Vamos a tener algún texto a continuación. Entonces vamos a crear eso realmente rápidamente. Aquí estamos. Entonces tecleemos ofertas especiales. Yo mugre. Saltemos por dentro casi negro y vamos a darle un coda de autobús que está posicionado aquí mismo. Y vamos a parecer tal vez podamos incluso bajarlo a 120 y añadirlo aquí mismo. Y veamos qué podemos hacer con él. A lo mejor posicionarlo para ser 150. Así. Asegúrate de que esté en el centro y organicemos rápidamente estos. Por lo que esta va a ser sección superior. Todo ello. que las ofertas especiales van a ir justo aquí debajo de Control D. Y vamos a ver, para este lo que podemos hacer es usar Poppins 24 luces así, pero solo mantenerlo gris claro por ejemplo, o gris oscuro. Eso es bueno. Y simplemente agregué aquí mismo y asegúrate de organizarlo un poco mejor para que sepas lo que estás haciendo. Asegúrate de que esté alineado en el centro y en el centro. Y realmente vamos a copiar y pegar el texto del documento original sólo para que podamos mantener las cosas un poco más rápido así. Y vamos a ver. Podemos llamarlo, por ejemplo, título de sección, mi papá. Y podemos usarlo a lo largo de nuestro diseño. Entonces lo que vamos a tener aquí mismo, nuestras ofertas de primer minuto y ofertas de último minuto. Entonces sigamos adelante y creemos eso. Déjame duplicar esto aquí mismo. Colóquelo en algún lugar por aquí, asegúrate de que esté alineado a la izquierda y usemos otra cosa. Entonces veamos para ese texto quizá pueda usar 24 perno. A ver qué es. Aquí está. Y usemos el color azul medio, alineado a la izquierda. Y llamémoslo de primer minuto, primero Control D. Y seleccione que ofertas de último minuto. Y vamos a incluir esos iconos en su interior. Entonces veamos. Tengo mi cronómetro donde está. Entonces vamos a escribir en realidad icono de cronómetro. Aquí está. Y veamos, creo que es reloj. Y ahí está. Entonces icono del reloj, así que para primeros y últimos minutos, y vamos a seleccionar todo eso. Y empecemos con este posicionarlo aquí mismo. Asegúrate de que esto esté en el centro y asegúrate de que sean, por ejemplo, 20 el uno del otro así. Y agruparlo. Y vuelve a aquí, llámalo primero, necesita ofertas. Y hacer lo mismo por éste. Así que asegúrate de que sean 20. Eso y grupo puja y ofrece mi deuda. Y eso está bien. Posiciona la tríada aquí. Y lo que voy a hacer es seleccionar estos dos clips aquí mismo. Y veamos, asegúrate de que sean 80, por ejemplo, de este texto. Entonces 1, 2, 3, 4, 5, 6, 7, 8. Manteniendo mi Shift hacia abajo. Y sección titulada sólo tienes que ir a continuación. Y debido a que tenemos 12 columnas, esta sección va a tener seis columnas de ancho. Esta va a ser de seis columnas de ancho, así que asegúrate de contar seis. Entonces 1, 2, 3, 4, 5, 6. Es éste. Son Harut y esto ya está a la izquierda. Entonces lo que vamos a hacer primero es realmente crear esa tarjeta que viste. Por lo que oferta tarjeta, que es esta aquí mismo. Entonces saltemos por dentro y creemos eso. Rápidamente. Entonces voy a asegurarme de que sean seis columnas de ancho así. 1, 2, 3, 4, 5, 6. Y ahí está. Y vamos a darle algo de demencia. Entonces 79 a con 39, uno así. Y vamos a arrastrarlo hasta aquí y llamarlo tarjeta de oferta. ¿ Te hiciste Darío y vamos a ver. Dale unas esquinas redondeadas o cinco. blanco para el color de relleno es bueno. Vamos a darle una sombra de 55 y sonido. Y veamos, por ejemplo, podemos hacer que sea del 5%. Por ejemplo, sólo para que sea bonito y ligero así. Y vamos a ver, también podemos posicionarlo desde nuestro texto para ser 40. Al igual que ese rebaño lechero. Ahora vamos a crear una imagen, así Control D. Y para esta imagen, quitemos la sombra y traigamos el color. Entonces cerremos esto y usemos gris claro porque ese es el color que usamos. Entonces veamos por la altura 39 uno, está bien, pero por el ancho tres, 66, creo que es bueno. Y vamos a ver por estos bordes, así que para la parte superior derecha, vamos a usar 0 porque es éste de abajo justo aquí. En realidad también va a usar ceros. Entonces es así. Ahora lo que voy a hacer es en realidad arrastrar ese icono de estrella. Entonces aquí está. Y en realidad voy a usar una grilla de repetición. Veamos 2345. Y eso está bien. Veamos entre nuestras estrellas simplemente van a tener la distancia. O por ejemplo, para píxeles a algo realmente pequeño. O tal vez pueda usar cinco así, lo cual está bien. Simplemente es saltar dentro de aquí y cerrar nuestra retícula de repetición justo al borde. Acude a la cuadrícula de desagrupamiento. Control G para las estrellas y calificación de calidad así. Y ya me conoces, me gusta organizar rodillas. Por lo que realmente rápidamente solo organízalos como son de izquierda a derecha. Y puedes notar que todas estas estrellas tienen dos estados, que es lo que yo creé también. Entonces esta es la estrella original y esta son las startups grises. lo que puedes mostrar, por ejemplo, la calificación de cuatro estrellas, calificación de tres estrellas simplemente encendiendo el estado gris, lo cual es inmensamente útil, obviamente, para aumentar tu velocidad. Vamos a desacercar un poco. Voy a posicionarme aquí mismo. Por lo que Oferta Tarjeta, IMG así. Y vamos a ver. Podemos, por ejemplo, posicionar estos para que sean 60 aquí. Y veamos 60 así, lo cual está bien. Y podemos, por ejemplo, posicionarlos para ser 20 de arriba. Así. Y ahora vamos a ocuparnos de los textos. Entonces veamos que podemos caber t mecanografía por ejemplo, o bajo. Y sólo para que tengamos algunos textos reales con los que trabajar. Y veamos, podemos usar algo así como el 36, audaz, alineado a la izquierda. Y usemos el color casi negro solo para diferenciarlo de todo el resto de ellos. Agregado a escuchar, posiciónelo justo debajo. Y vamos a ver por el espaciado podemos usar 20 de nuestras estrellas, Control D. Y veamos a continuación, podemos usar Poppins 18 light. Aquí está, pero solo dale en este color gris oscuro. Y veamos, quizá pueda darle una distancia de diez. No hace falta que sea demasiado. Y déjame copiar y pegar ese texto en manadas lecheras. Y lo que voy a hacer a continuación es realmente crear un divisor. Entonces déjame copiar y pegar rápidamente mi divisor dentro de aquí. Ahí está. Y este divisor, trescientos cuatrocientos seis. Este es el color, este es el tamaño. Y puedes crear esto dividido simplemente usando la línea, click hold, shift, su hábito y puedes cambiar el color aquí. Ahí lo tenemos. Este es nuestro divisor. Ahora sigamos adelante y Control D posición de aquí y asegurémonos de que quede alineado 24 días, por ejemplo, que este viaje dure. Y vamos a ver, Poppins 18 luz. Eso está bien. Ahora traigamos el icono del calendario dentro. Así. A ver. A lo mejor puedo hacer que sean 20. De aquí. Eso lo sé. Vamos a asegurarnos de que estos estén centrados como R. Y tal vez 20 distancia entre ellos va a estar bien, que está justo aquí. Eso es genial. Y lo que puedo hacer es llamarlo días y agruparlo y calidad así. Y movámoslo por debajo de una calificación. Y movamos al escritor. Y hay gada y el texto se mueve por debajo de la calificación también. Por lo que ahora tenemos este patrón organizacional. Y lo que voy a hacer es arrastrar y soltar unos cuantos más de estos iconos. Entonces primero está el avión, luego es el tren, luego es el coche, y finalmente es el autobús. Y se puede ver que todos ellos tienen estado no disponible y por defecto. Mantengámoslos en estado predeterminado por ahora no disponibles. Es básicamente lo mismo que con las estrellas, solo un color gris para indicar que no está disponible para elegir. Posicionémonos aquí y asegurémonos de que todos estén alineados correctamente. Tenemos que hacer es una vez eso y vamos a ver, distancia entre ellos puede ser algo así como 28. Piensa que va a funcionar bien. Entonces vamos a organizarlos rápidamente de esa manera. Entonces lo primero es lo primero, alineemos este ícono aquí mismo. Y posicionemos esto para ser 20. Posicionado es ser 20 también. Entonces finalmente mostrando icono para ser 20 también. Y puedo organizarlos rápidamente así. Y muy Howard Control G, lo voy a llamar el transporte por eso. Y muévelo justo aquí donde dice días y cuándo usar una NANDA, hazlo más amplio. Asegúrate de que esté 20 abajo así. Y finalmente, voy a usar esto una vez más, depender de like, veamos 18 luz, eso está bien. Control D una vez más. Y veamos, Poppins, 36 voltios. Podemos usarlo para esto. Entonces 1250 por ejemplo, veamos Poppins 36 negrita, el azul principal así. Y finalmente podemos moverlo sea por ejemplo, San abajo abajo. Y esto puede ir 20 de esto aquí mismo. Y estamos 24 abajo, estamos 20 arriba. Y siempre podemos seleccionarlos y organizarlos un poco mejor, que voy a hacer en realidad ahora. Entonces transporte, selecciona estos para moverlos todo el camino hacia abajo, que va a ser nuestro precio. Entonces golpea Control G. Mi papá, éste va a ser nuestro divisor. Días de transporte, NUEVA cualquiera de las clases llaman a este medio mi papá. Y vamos a ver, podemos llamar a esta info. Ahí lo tenemos. Este es nuestro patrón organizacional básicamente. Entonces lo que voy a hacer es usar, por ejemplo, stack para estos. Por lo que puedo incluir una pila como esta. Sólo asegúrate de que sea éste. Pero lo que realmente puedo hacer, cambiemos eso. Puedo usar una pila para estos así, solo para que pueda aumentar el espaciado entre ellos, disminuirlos cuando empecemos a trabajar con redimensionamiento responsive. Y va a ser mucho más sencillo de hacer. Entonces llamémoslo medio. Porque esta va a ser nuestra tarjeta por defecto y vamos a copiar y pegar a lo largo de nuestro diseño básicamente. Entonces vamos a ocuparnos de eso. Y por el precio, dejémoslo tal como está. Entonces vamos a organizarlo rápidamente y agruparlos. Esto va a ser, como dijimos, tarjeta de oferta. Al igual que papá, tenemos ofertas de primer y último minuto y tenemos título de sección aquí mismo. Estamos en 40. Entonces lo que podemos hacer es usar realmente la cuadrícula de repetición. Una última cosa que me olvidé es que realmente vamos a añadir la flecha aquí mismo, la parte inferior. Entonces usemos esto. Vamos a llamarlo rho, Vg. Vamos a posicionarlo todo el camino hasta aquí. Bajémoslo a aquí, por ejemplo. Asegúrate de que esté justo aquí. Y vamos a ver por el tamaño, vamos con ancho de 82 y altura de 98, por ejemplo. Así. Ponlo aquí mismo y vamos a deshacernos de nuestra frontera. A ver, le vamos a dar el color azul principal. Y veamos, quizá podamos usar mezquita. Entonces Control D. Y veamos por el ancho podemos ir con diez por ejemplo. Y asegúrate de que esté justo aquí. Y todo esto va a tener sentido en tan solo un segundo. Y vamos a ver, voy a simplificar y una flecha derecha aquí es arrastrarla y soltarla dentro. Asegúrate de que esté centrado. Y simplemente voy a seleccionarlos. Entonces busquemos mi flecha derecha. Aquí está justo aquí. Entonces tenemos esto, que vamos a llamar Máscara. Y esto que vamos a llamar, Vamos a ver, flecha BG, que está bien. Selecciónalos a todos, toca Control de turno M. Y justo esta sección se va a quedar a la izquierda, justo aquí. Y podemos llamarlo flecha. Entonces este puede ser, por ejemplo, nuestro estado por defecto y podemos más adelante Incluido para ser nuestro estado Horace por ejemplo, solo para ampliar esta sección para poder ver toda la flecha. Y este puede ser el estado por defecto, sólo para que podamos ver esta sección. Entonces ahora, ahora que se completa la tarjeta de oferta, lo que podemos hacer es usar la cuadrícula de repetición por ejemplo. O simplemente puedes Controlar D en este. Control D. Seleccione esto a tres Control D y colóquelo aquí mismo. Aquí voy a pausar el video y organizarme. Y ahora que ya está terminado. Entonces de aquí para aquí, éste va a ser el último. Lo que realmente vamos a hacer es seguir adelante y voy a añadir estos botones. Entonces para los propios fondos, Usemos nuestra herramienta de rectángulo y vayamos con tres columnas de ancho, por ejemplo. Y veamos, podemos llamarlo, por ejemplo, botón grande. Y esto va a ser btn. Y Biji, así. Vamos a usar colores, tan misma configuración, por lo que BTN sea de gran color. Entonces sin ningún borde, con el color de relleno de hover así. Y también vamos a usar un texto y todo. En primer lugar, mantenimiento. Poppins 24 luz es lo que podemos usar. ¿ Cuál es éste? Sí. Y solo ponlo asegúrate de que sea azul. Y para estos dos, vamos a tener que sea a las cinco así y asegurarnos de que también se seleccione este texto. Esto va a ser así. Y esto va a ser gris al principio. Tan gris oscuro. Y luego vamos a seguir adelante y agregarlo para que sea blanco dentro de nuestro color hover. Entonces Control G. Vamos a ver, y podemos llamarlo grande y btn. Y vamos a ver. Puedo posicionarlo justo debajo de estos tres aquí mismo. Entonces todo primer minuto, Vamos a ver, tal vez podamos posicionarlo para ser una T como esta. A ver. En realidad, lo que puedo hacer es usar esto en un estado normal y darle altura de uno así. Pero sólo asegúrate de que sea todo el camino hacia abajo así. Y están golpeados Control K y luego le dan un estado de horror, como las muertes. Y esto es lo que dijimos, 72. En realidad debería ser 70. Entonces vayamos al estado por defecto. Entonces 70 que esto debería alinearse y esto debería estar justo aquí. Y sólo asegúrate de que esté ahí. Ahí. Lo tenemos dentro del estado de horror. Aquí está justo aquí, simplemente extendido todo el camino hasta 70. Y el aumento de la obesidad en esto va a ser, veamos, rebaño lechero blanco. Y podemos probarlo rápidamente pulsando este botón de vista previa aquí mismo. Y cuando voy todo el camino hacia abajo y flote, puedes ver cómo se ve nuestro botón. En realidad voy a saltar y editar en ese botón Hero también, que es éste. Hero Textos Hero botón default state, su realidad en el estado por defecto, vamos a tener esto a la altura uno para el color. Y simplemente posicionarlo para que esté en el borde inferior. Y vamos a crear un estado de terror así. Dentro del estado de horror, vamos a extenderlo para ser 70, aumentar la opacidad Rebaño lechero. Y ahora si tocamos la vista previa, y ahí estamos. Cuando flotamos, se puede ver que se ve realmente bonito y coherente. Y también este botón funciona bien. Ahora por fin, porque tenemos este segundo botón, que es nuestro botón grande, lo que voy a hacer es en realidad simplemente sostener mi vieja llave, posicionarla aquí mismo. Asegúrate de que esté todo el camino a la derecha, como si estuviera justo aquí. Y muévelo aquí mismo. Yo también voy a hacer esto. Por lo que de último minuto a aquí, primer minuto aquí, y luego agrupa estos. Entonces primer minuto. Y voy a agrupar todas estas columnas límites con alias así. Y ahí lo tenemos, nuestra sección está terminada. Lo que puedo hacer ahora es crear rápidamente una sección de video aquí mismo. Y para esta imagen de héroe, no sé por qué no entró en nuestras secciones superiores, así que movámosla dentro de ahí. Su realidad. Y en realidad puedo hacer un golpe de copia Posición de Control D y fuera posicionarlo aquí mismo. Asegúrate de que lo estamos, veamos 150 por ejemplo. Estamos diciendo como lo que está justo aquí. Y vamos a ver, podemos llamar a esta primera sección ofertas especiales porque tenemos eso. Agrupémoslo todo, golpea Control G. Llámalo ofertas especiales así. Y vamos a llamar a esto, por ejemplo, video, fondos o video promocional, aún mejor. Video promocional. Y vamos a ver por la altura para ello, Vamos con 600. Seguimos en 150. Voy a localizar el ícono de juego. Play icon aquí está justo aquí. Y en realidad voy a seleccionar estos para asegurarme de que Play icon esté en el centro. Y si golpeo la vista previa una vez más muy rápidamente, lo que vas a notar que en realidad creó un efecto de desplazamiento para el botón Mostrar. Así que simplemente le agregué algo de movimiento para el ícono en sí y mostrar en su interior. Yo lo hice un poco más grande. Y yo también criterio, tienes la opacidad de 0 para el color de fondo. Y en el hover, tienes la opacidad de yo creo, 50 o 60 o algo así. Entonces básicamente esas son las cosas que puedes hacer con tus íconos solo para condimentar un poco las cosas. Podemos darle a esto un nombre de video promocional por ejemplo. Y pasemos ahora a la siguiente sección, que va a ser para destino. Voy a pausar el video aquí y volver a ti en el siguiente video porque puedes ver que hay mucho por hacer aquí mismo. Y, pero una vez más, estas cartas se ven realmente similares a estas cartas que acabamos de crear. Entonces tal vez podamos usarlos y editarlos de tal manera que podamos organizarlos mejor y reutilizarlos aquí mismo. Entonces te veré ahí. 16. Crear alambres: Muy bien, Sigamos ahora donde lo dejamos. Y como puedes notar, esta página nos está llevando muchos videos a completar porque es realmente enorme. Y si te llevo de vuelta a nuestros wireframes de papel, claro que es el más grande. Pero en cuanto tengamos todos estos componentes principales, vas a notar no en, no solo en este diseño, no solo en este diseño, sino a lo largo de tus diseños o rollo, algunos de estos componentes y elementos van a cambiar, se van a sumar y vas a terminar reutilizándolos todo el tiempo. Entonces, por eso la primera página siempre toma mucho tiempo en completarse porque entonces vas a pasar a todas estas otras páginas. Ahora como dije, ahora vamos a empezar con estos destinos y vamos a empezar con estas tarjetas. Entonces básicamente solo vamos a usar esta y reutilizarla. Entonces lo primero es lo primero, saltemos aquí mismo. Hit Control C en el control de título de sección, reposiciónelo aquí mismo. Y voy a usar mi tecla Mayús y moverla hasta aquí. En realidad debería hacer la próxima vez, usarlo arriba y luego moverlo abajo. Entonces básicamente vamos a estar a 150, igual que con estos. Y en lugar de ofertas especiales, vamos a escribir destinos europeos como la suciedad. Y simplemente voy a copiar y pegar texto de mi diseño original así. Y ahí lo tenemos. Este es nuestro título de sección una vez más. Ahora lo primero que vamos a hacer es copiar una de estas tarjetas. Así que golpea Control C, Control V Eden y simplemente muévelo así. En realidad debería hacer eso la primera vez. Entonces ahora los posicionemos realmente. Entonces tal vez deberíamos posicionarlo a los 80. Por lo que 80 sostenga mi Alt u Opción. puede ver que está a los 80, lo cual está bien. Y ahora lo que voy a hacer en realidad se llama así a esta tarjeta de destino. Y lo que voy a hacer es en realidad reducirlo hasta aquí. Asegúrate de que sea 36, 6 como suciedad, y asegúrate de que sea, por ejemplo, 690 de altura así. Para la imagen, veamos, podemos llamar así a esta imagen de destino. Y para ello, vamos a ver, 36 seis es bueno, que a 60. Pero ahora tenemos esa misma cuestión una vez más. Entonces vamos a tener que redondear un borde superior izquierdo y superior derecho. Entonces de arriba a la izquierda, arriba a la derecha, cinco, y estos dos vamos a mantener en 0. Ahora, finalmente, usemos toda nuestra información y flecha también, así que todo, y asegurémonos de moverla por aquí. Y vamos a ver. Ahora en realidad puedo moverlo 40 abajo. Entonces 1, 2, 3, 4 yacen muertos. Y vamos a ver, aquí es donde termina nuestra corriente de destino, lo cual está bien. Y básicamente eso es todo. Lo único que vamos a hacer es, por ejemplo, moverlo todo, excluyendo la flecha, así que se va a quedar donde está. Entonces muévete todo 10 píxeles a la derecha. Así. Sólo para que nos demos un poco más de espaciado. Entonces lo que estamos aquí, estamos a los 43, para que podamos redondear sólo un poquito. lo que tres píxeles arriba, por ejemplo, la fuente 6, 8, 7 va a funcionar mejor para nosotros así. A ver, Estamos a los 40 y eso está bien. Este es 40 de aquí. Entonces veamos, esto es 20, esto es 20, esto es 40, lo cual está bien, ya sabes, es como redondear mis valores y bajar al punto decimal porque es mucho más simple Dan, seguir adelante y crear más. Entonces llamémoslo destino, así. Y dejémoslos a todos en gala porque es mucho más sencillo y rápido para nosotros hacerlo. Como dije, se puede usar la cuadrícula de repetición. No voy a hacerlo, simplemente voy a golpear Control D. Control D Una vez más. Control D. Y ya me conoces, voy a mantenerlos organizados así. A ver, este es nuestro primero. Muévete a la cima. Segundo, 1, tercero, 1, cuarto, 1, Eso está bien. Y vamos a tener ese botón aquí mismo. Botón tan grande, arrástralo y suéltalo aquí. Colóquelo aquí. Y vamos a ver, tal vez podamos más ancho para estar a los 80, como las deudas. Y en lugar de primeros minutos, vamos a escribir en toda Europa, viajes así. Van a asegurarse de que esté centrado. Vuelve a saltar. Y vamos a asegurarnos de que esté posicionado en el centro doble clic Control C porque quiero copiar este texto. Pasa a la finca de terror y Control V en el interior. Asegúrate de que esto también esté centrado. Y asegúrate de que esté ubicado en el centro. Entonces ahora funciona. Uno de n tú también se cierne. Entonces lo voy a mover hasta aquí. Y llamemos a estos control GIL. Se llama CTS. Porque estas van a ser en realidad ciudades. Y vamos a asegurarnos de que utilicemos el scroll horizontal más adelante, pero por ahora sólo lo vamos a mantener como está. Por último, lo que voy a hacer es usar esas flechas una vez más. Así flecha izquierda y flecha derecha, Vamos a ver. Y tal vez incluso puedan saltar dentro de aquí. Y veamos, ahí están. Pero los vamos a crear para que estén con color azul como este. Y solo estoy haciendo esto para ahorrarnos un poco de tiempo. Así que arrástralos y suéltalos aquí mismo y asegúrate de que estén en el centro. Entonces flechas y botón grande como este, los lácteos son, así que estamos a 80 todavía de arriba. Y básicamente estas flechas son exactamente las mismas que estas top, pero hoy solo tienen este color azul por dentro. Y si hago clic en mi flecha izquierda, se puede ver en el estado de desplazamiento, lo único que cambió es el tamaño de la flecha dentro y también la opacidad del color de este círculo. Entonces eso es básicamente todo. Y puedes sacar estas flechas del archivo del proyecto y ver cómo lo he hecho. Una vez más, solo estoy haciendo esto para aumentar la velocidad a la que creo estos videos. Control G y lo vamos a llamar los destinos europeos. Entonces déjame realmente copiar y pegar eso de mi documento original. Ahí lo tenemos. Ahora por debajo de eso vamos a tener otra sección, por lo que Control D y asegúrate de que estamos en 150. Una vez más, haga doble clic aquí, extienda esto, mueva esto hacia abajo, y vamos a llamar a esta África soleada. Mi papá. A ver. En realidad puedo saltar así y dejarme copiar el texto original y pegarlo aquí mismo. Entonces firmando África, y como dije, solo vamos a dejar estos destinos por ahora. Porque queremos pasar a la siguiente sección de nuestra página, que en realidad se va a reservar tu viaje de ensueño. Y si te llevo aquí mismo, puedes ver reservar tu viaje de ensueño. Esta es la cotización libre de texto, imagen con el fondo de color. Entonces vamos a trabajar en eso realmente rápido. Así. Entonces, empecemos con la imagen misma, por ejemplo. Puedo posicionarlo justo ahí. Y veamos por la imagen, usemos algo así como 930 con 560. Y vamos a ver, podemos ir sin ningún borde y para el color de relleno, podemos usar ese mismo color una vez más. Entonces veamos. Podemos posicionarlo para estar aquí mismo y Control D una vez más. Y posicionemos esto hacia abajo. Entonces esto va a ser azul, azul principal, por lo que ese fondo coloreado. Y por sus dimensiones, Vamos a utilizar 930, ancho 560. Entonces básicamente lo mismo. Lo que voy a hacer en realidad se posiciona en 40 píxeles hacia abajo. Entonces Cambie 1, 2, 3, 4, y veamos hacia 34 de derecha a izquierda también. Y démosles nombres. Entonces esto va a ser un viaje de ensueño, IMG, y esto va a ser viaje de ensueño y bg color, solo para que nuestros desarrolladores sepan lo que es, Control G disciplina para ser nuestra imagen. Más todo el camino hacia abajo. Y ahora trabajemos en nuestro texto. Entonces para nuestros textos, Vamos a escribir en algo como libro, tu sueño, viaje con nosotros. Y por el texto y el tamaño, Vamos con este. Vamos con la izquierda alineada, y vamos con algo como esto por ahora. Posición está en algún lugar por aquí, Control D. Y veamos qué podemos usar. Y abajo, podemos usar Poppins luz 24 y gris oscuro así. Entonces simplemente estoy copiando el texto de mi documento original y me voy a asegurar que estoy a los 40 solo para aumentar un poco nuestra velocidad. Y por último, vamos a usar ese botón grande una vez más, arrastrar y soltar justo aquí, posicionarse justo aquí. Y veamos, tal vez podamos posicionar esto para estar a los 80, solo para darnos un poco más de espacio. Y dentro vamos a escribir y conseguir unas cotizaciones gratis y asegurarnos de que estamos en una posición de centro C para estar en el centro. Haga clic en corte de pelo lácteo, y vaya al estado de horror, centro de pasta. Al igual que ese centro, centro hábito lácteo y estado por defecto. Lo que seguramente se puede hacer es editar mi componente principal, que es éste. Y puedo saltar aquí y asegurarme de que mi texto esté centrado. Puedo saltar a mi estado de horror, asegurarme de que mi texto esté alineado en el centro. Y por lo tanto, cada vez que copie este componente, como lo hice aquí mismo, por ejemplo, va a estar centrado para que no tenga que rehacerlo todo el tiempo. Entonces ahí lo tenemos. Esto va a ser texto. Veamos, por ejemplo, puedo asegurarme de que esté en el centro de nuestra imagen así. Y justo encima y rebaños lecheros. Entonces lo que podemos hacer es desagruparlo, llamarlo contenido, y luego darle una pila como esa, solo para que más adelante, cuando queramos cambiar de lugar con ellos, por ejemplo, sólido digamos que quiero mover esta imagen a aquí. Se puede ver lo fácil que es hacer eso, o aún mejor si quiero usar una pila como esta o para reposicionarlas así, se puede ver lo sencillas áreas para nuestro diseño y nos va a ayudar inmensamente. Pero pongámoslo en otro grupo sólo para que sepamos qué es. Reserva, tu viaje de ensueño. Y vamos a darle a eso una sección que nombre L, ahora es más uno. Y lo que vamos a tener nuestros dos más de estas secciones. Pero primero, veamos dónde estamos con el espaciado. Entonces veamos. 150, angostelo. Y simplemente voy a usar estos para golpear Control D y colocarlos abajo así. Posición, todos ellos abajo. Esta primera se va a llamar mística Asia. Y la segunda se va a llamar Hermosas Américas. Entonces utilicemos texto para mi archivo original. Encuentra en. Entonces como dije, esto significaba ser una Asia mística. Permítanme copiar rápidamente y el texto original. Pega eso aquí mismo. Y finalmente cuatro. Y esto se va a llamar Hermosas Américas, así. Y déjame copiar y pegar en el texto original en jabón. Lo siguiente que voy a hacer, que nos va a ahorrar mucho tiempo o más tarde, es que se puede ver que tenemos todos los viajes de Europa. Entonces voy a saltar aquí mismo, llámalo todos los viajes africanos. Salta al estado de horror de los viajes africanos. Y Depakote. Y ahora tenemos que hacer eso por todos estos. Entonces toda Asia. Y sé que es tedioso, pero nos va a ahorrar mucho tiempo después cuando realmente empecemos a diseñar. Porque muchos de estos elementos en realidad van a terminar buscando todo listo de América. Y veamos, tal vez podamos agregar una S o todo goteo de América. Ahí. Nosotros lo tenemos, nuestro estado y su rebaño lechero. Y eso es básicamente todo para esta sección. Y vamos a ver, tal vez podamos añadir otra sección. Sí, Vamos a añadir una sección bajo para este video y luego vamos a pasar al siguiente. Entonces vamos a añadir esta sección, básicamente una. Una vez más, vamos a tener estas cartas y vamos a tener estas flechas. Por lo que nuestros destinos principales, y vamos a tener otro texto a continuación. Y entonces en realidad vamos a sumar estas dos flechas, que ya tenemos hoy, ¿no? Entonces, ahora movámonos en un anuncio y dosis. Entonces lo que en realidad voy a hacer es hacer doble clic dentro de Control D, moverlo fuera de la posición de título de sección, está en algún lugar por aquí. Y déjame realmente saltar dentro de aquí. Y vamos a ver. Puedo asegurarme de que esté alineado a la izquierda. A ver. Podemos escribir en algo como nuestro top, esta Naciones. Y puedo saltar y cambiar este texto, asegurarme de que esté alineado a la izquierda. Colóquelo a la izquierda. Ahí vas. Y puedo saltar dentro de aquí. Usa Control D con las flechas y simplemente muévalas fuera de esta sección y asegúrate de que estén en un centro, por ejemplo, aquí y se movieron a la derecha, justo ahí. Debido a que estos tienen los puntos de grifo, simplemente los empuñaré hasta el borde. Y punto de toque es básicamente solo un cuadrado vacío para que puedas usar tus animaciones más adelante. Entonces, lo que puedes hacer es simplemente arrastrar un área donde quieres que tus usuarios toquen y simplemente ocultar tanto el relleno como el borde. Por lo que es mucho más fácil que para ellos tocarlo luego tocar el ícono original. Entonces vamos a quedarnos con estos dos y ahora sigamos adelante. Y en realidad me voy a llevar una de estas tarjetas. Entonces usemos este. Control C, control V. Asegúrate de que lo muevo hacia abajo posición a justo aquí. Tarjeta de destino. Sí, eso funciona bien. Vamos con AT una vez más. Entonces algo así. Y en lugar de toda esta información, lo que en realidad voy a hacer es que en realidad voy a arrastrar esto para tener cuatro columnas de ancho y arrastrar esto para tener cuatro columnas de ancho también. Lo que voy a hacer es dejar este texto dentro, así que voy a quitar la calificación. Voy a renombrar esto a texto así. Y voy a asegurarme de que ambos estén centrados, alineados así. Voy a deshacerme de esta sección media y me voy a deshacer de la flecha también. Voy a dejar el precio tal como está, pero simplemente puedo colocarlos en una pila, asegurarme de que sean así. Y veamos por estos, tal vez debería posicionarlos para estar a los 40. Entonces algo así. A ver. Puedo asegurarme de que estén a los 40. Una vez más, este texto va desde la izquierda. Este texto va desde la izquierda. Entonces lo que sea que escriba aquí mismo siempre se va a quedar en el medio. Por lo que ahora vamos a seguir y posicionarlo en la posición central este texto en el centro también. Asegúrate de que esto esté correctamente en el centro, así o realmente puedes posicionarlos afuera. Haga clic aquí, luego justo aquí. Y luego simplemente selecciona estos dos hit Control G y asegúrate de que se les llame el texto una vez más. Entonces lo que voy a hacer es darle a esto el nombre de las Maldivas, por ejemplo. Y voy a darle a esto un poco más de textos. Y también voy a asegurarme de que esté fijo en tamaño. Es mucho más fácil que escalar este texto y moverlo hacia abajo e incluir toda esta información adicional. Entonces lo que voy a hacer es darle a estos los espaciamientos de 40. Así. Asegúrate de que mi texto sea 40 de mi precio. Entonces me voy a asegurar que mi precio y toda mi información sea de 40 de abajo, como si estuviera aquí mismo. Y por último, voy a asegurarme de que esto sea un poco más estrecho porque no necesito esta altura sólida S5 y S6. Ahí vas. Y ahora voy a usar esta información. 234 lácteos Herat, Son 40 de la parte superior y vamos a revisar rápidamente. Por lo que nuestra imagen va a ser 260 de ancho, lo cual está bien. Y el hábito de Terry, tenemos nuestro auto de destino, que está a 80 de lo más alto. Control D, asegúrate de crear una copia Control D para crear una copia, y ahí la tenemos. Entonces déjame organizar rápidamente estos. Seleccionémoslos todos. Hit Control G. Ahora llamémoslo localizaciones por ejemplo, así. Y ahí lo tenemos. El único que nos queda hacer es obviamente asegurarnos de que esto sea 150. Igual que todos estos otros. Larga matriz justo aquí. Y también voy a extender mucho esto. Y claramente se puede ver que esta es la razón por la que este video en realidad está tardando tanto en crear es por todas estas secciones adicionales que seguimos agregando, agregando y estrechas parece. Y básicamente, así que eso es todo para este video, vamos a seguir donde lo dejamos en este, en el anterior, en el siguiente video. Y esperemos que vayamos a terminar esta primera página. 17. Crear alambres: Muy bien, Sigamos ahora. Y la siguiente sección que vamos a crear son en realidad testimonios. Y si te llevo aquí mismo a los propios testimonios, te puedes ver. Por lo que el viajero ama, amanos. Y este es otro texto. Vamos a crear esta sección con las flechas, para que puedas ver claramente que las flechas están apareciendo una vez más. Entonces primero vamos a lo primero, realidad copiar esta sección en la parte superior o incluso variar porque su centro alineado, vamos a usar esta sección. Entonces Control C, Control V, y posiciónelo todo el camino hasta aquí. Por lo que 150 ubicaciones, lo tenemos. Entonces en realidad voy a copiar y pegar este texto solo para mantener las cosas bonitas y suaves y rápidas. Ahí lo tienes. Entonces lo primero que vamos a hacer es crear esa tarjeta. Entonces démosle algunas dimensiones y cuándo usar, veamos, 10 8000. Creo que está bien en el centro. Y veamos, quizá pueda posicionarlo para ser 80. Y sólo para que tengamos algo de consistencia, vamos a mantener a las cinco. Vamos a quitar la frontera, incluir una sombra de 55, 10. Y veamos, podemos usar cinco. Entonces básicamente la misma configuración que para todas estas otras tarjetas. Entonces eso es básicamente todo para eso. Llamémoslo tarjeta testimonial. Mi papá Control D imagen testimonial. Y veamos por la imagen podemos darle un ancho de tres 66. Y vamos a ver. Podemos, por ejemplo, dejar la parte superior izquierda e inferior izquierda a las cinco, y estos dos van a estar en 0. Entonces básicamente sólo estos dos. Y vamos a darle un color sólo para que sepamos con qué estamos trabajando. Ahí lo tenemos. Y vamos a ver, vamos a darle algún nombre. Por ejemplo, James Martin. En algún momento que asegure que esté alineado a la izquierda. Entonces veamos 36 negrita, que está bien. Y vamos a darle una distancia de 60, por ejemplo, de esta imagen. Mis datos básicamente alineados a esta gran línea Control D. Y obviamente voy a asegurarme de copiar y pegar esto porque no quiero aburrirte esto va a ser, vamos a ver, este color va a ser Poppins 18 de este. Y vamos a arrastrar y posicionar y testimonial real por dentro para que no te aburro con él y vamos a darle una distancia de 40, así. Y una última cosa, voy a Control D Una vez más y escribiendo el destino donde realmente trolaban. Por lo que viajó a Oregon. Y este va a ser nuestro azul principal. Y veamos, por ejemplo, 40 directamente desde aquí y asegurémonos de que todos estos estén centrados con nuestra imagen. Ahí lo tienes. Ahora organizémoslos rápidamente así y así. Y esto va a ser texto. Colóquelo debajo de nuestra imagen. Y veamos tarjeta testimonial. Yo lo hice. Y lo que voy a hacer es usar estas flechas una vez más. Así que asegúrate de seleccionarlos desde aquí, controlar C, controlar V, y colocarlos todo el camino hasta aquí en algún lugar. Y veamos, los puedo alinear con mi tarjeta en realidad aquí mismo. Y veamos, en realidad puedo crear esos números. C. Sólido Por ejemplo, tengo, me olvidé de quitar la sombra de mi imagen, y por eso está mostrando doble sombra. Así que vamos a crear ese texto 0, 1, y ceniza y 0 para, por ejemplo, los warpings 36, negrita está bien, solo este color, asegúrate de que esté alineada a la izquierda mezcla debería posicionarse justo aquí. Y finalmente, posicionémoslo para ser 80, por ejemplo. Al igual que esto. Asegúrate de que nuestras flechas estén en el centro. O simplemente usa esto. Echa un vistazo AT y ahí lo tenemos. Vamos a tratar este texto un poco más tarde. Entonces no vamos a lidiar con ello ahora, una vez que realmente llegues a la parte de diseño, voy a crear múltiples cartas y luego podremos jugar con ella y editar. Entonces vamos a ver, somos 80 de nuestros iconos, lo cual está bien. A lo que se le llama testimonios. Mi papá. Y pasemos realmente a la siguiente sección, que va a ser, si te llevo aquí mismo, esta sección. Entonces vamos a tener estas tres cartas en una especie de grilla Mansuriana. Y vamos a dar un soul wellness cruceros y esquiar. Entonces, tratemos con los datos muy rápidamente. Y vamos a ver, podemos llamarlos, por ejemplo, categorías de viajes o algo así. Entonces veamos para las categorías de viaje, puedo crear estas tres tarjetas. Entonces hagámoslo ahora. Así. Démosle, por ejemplo, categoría tropa. Actual lo hice. Y vamos a darle un ancho de seis columnas. 3, 4, 5, 6, que es éste, que está bien. Y vamos a ver, por la altura, vamos a la semana al 420, y vamos con cinco. Y usemos todos estos mismos ajustes. Entonces 55, 10, y vamos a darle la sombra de fondo, opacidad de cinco, que está bien. Entonces voy a asegurarme de una imagen de tarjeta de categoría viaje duplicada. Porque la imagen va a estar encima así. Y también vamos a añadir en una superposición de color más adelante. Pero también puedo añadirlo ahora, pero no voy a hacerlo porque no te voy a molestar con todos estos detalles. Lo vamos a dejar para el diseño en sí. Entonces, vamos a ver. Lo que podemos hacer aquí mismo es realmente copiar este texto. Entonces el control de precios C, control V, y asegúrate de que lo arrastré todo el camino justo aquí. Y vamos a ver. De lo que podemos escribir dentro de aquí está empezando. Desde, y obviamente puedes ver las ventajas que y usar bajo responsive resize y stack nos da porque es mucho más sencillo alinear y agregar y cambiar todos estos cambios. Entonces 2450 y veamos, puedo, por ejemplo, posicionar que sea no 60 desde abajo. A ver. Entonces, en algún lugar por aquí, digamos. Entonces 40 y 40, que también está bien. Vamos a moverlo aquí. Y vamos a ver lo que puedo hacer es seleccionar este texto, por ejemplo, Control C, Control V. Asegúrese de que esté en algún lugar por aquí, posiciónelo justo por encima de nuestro precio. Y vamos a ver. Podemos asegurarnos de que ahí sea blanco. Y veamos, podemos posicionarlo para que tenga 20 y alinearlo. Asegúrate de que esté alineado a la izquierda y alinearlo a la izquierda con el precio en sí. Y vamos a ver, podemos usar algo así como un bienestar y rebaños lácteos. Y vamos a darle verdad. Pero incrustar un llamarlo a viajes de bienestar. Vamos a hacer Control D, asegúrate de que esto esté abajo. A ver, tal vez podamos darle un 60, algo así. Y vamos a llamar a este uno cruceros. Mi papá y decir que queremos cambiar eso a 240, por ejemplo, así. Ahí lo tenemos. Y también hagamos un duplicado que va a ir en esta página y saltando aquí mismo. Y asegúrate de extenderlos a la parte superior. Y veamos por cuánto. Por ejemplo, podemos asegurarnos de que sea altura de, veamos, 900. Así. Ellos son Harut. Y aquí vamos a escribir, esquiar. Y partiendo de algo más pequeño como un 40 centímetro que se escuchan y la posición descienden hacia abajo. Esquí. Y esto va a ser Wellness. Esto iba a ser cruceros, lo cual está bien. Lo que podemos hacer es agrupar estas tres categorías de viajes. Asegúrate de que estamos en 150. A ver 150 estamos, lo cual está bien. Entonces lo que podemos hacer es crear otro título de sección Control V. Se asegura de que una vez más estemos en 150, posiciónelo todo el camino hacia abajo. Y vamos a llamar a esto nuestros socios. Y fui a copiar en el texto, pegarlo en. Y lo que en realidad voy a hacer es saltar dentro y copiar y pegar los logotipos de pareja, que en realidad usaron, porque estos son solo algunos logotipos ficticios que encontré en línea. Y obviamente puedes usar algo como Envato Elements para encontrar más logos profesionales. O aún mejor si estás trabajando con el cliente real, simplemente pídeles sus logotipos. Lo que hice aquí mismo es, se puede ver que utilicé el pergamino horizontal, que va a ser obviamente útil más adelante cuando empecemos a desplazarnos entre todos estos. Entonces básicamente, llamemos a esta sección nuestros socios, por ejemplo, hábitos lácteos. Y lo que voy a hacer a continuación, si se acuerdan de nuestro alambrado, tenemos otra sección que es exactamente la misma sección que ésta, simplemente volteada. Y vamos a hacer justamente eso. Así que golpea Control D. Seguro que son 150 y posiciona todo el camino hacia abajo. Entonces lo que vamos a llamar a esto es viaje perfecto para cualquiera. Y en realidad vamos a saltar dentro del contenido, cambiarlo así, y asegurarnos de que quede alineado así. Y ahora podemos trabajar en este contenido adicional. Entonces déjame copiar y pegar el texto dentro. Por lo que cuanto más obtienes una cotización de consulta ahora se mantiene igual. Pero esta es básicamente la ventaja de usar esto. Pero lo que quiero hacer es realmente agregar rápidamente la imagen a aquí y luego empujar este 40 a la derecha. Al igual que esto. Y simplemente, por ejemplo, alinear mi texto con mi línea de cuadrícula. Se puede ver aquí mismo. Entonces básicamente 16, tres, solo para que tenga un poco más de espacio con el que jugar, asegúrate de que sea 150, lo es. Y todos los hábitos. Lo siguiente que voy a crear es el tipo de cambio. Pero yo sí, en realidad no voy a crearlo. Voy a copiar y pegar, posicionarlo en su lugar. Asegúrate de que esté justo aquí tan alineado a la cuadrícula. Y en realidad te voy a explicar cómo lo creé para que puedas jugar con él si quieres. Rebaño lechero. Entonces básicamente el texto se va a quedar exactamente igual que es. Por lo que estallando 36 negrita, esto es 24 luz. Pero en términos de éstos, así que para las monedas, lo que tenemos son el euro, USD, la gran libra británica, franco suizo, el rublo, y Japón por el yen. Entonces eso es lo que tenemos justo aquí y cómo los creé. Bueno, simplemente, si te registras aquí mismo, puedes ver que el euro es de 120, de trigo 80. Entonces lo que puedo hacer es saltar fuera de esto. Por lo que 120 con un dos y puedo quitar la frontera. Y lo que puedes hacer es saltar aquí a tus plugins. Y tienes un plugin llamado logos de UI. Se puede dar click en él. Y lo que tienes es lino campestre. Ahora lo que tienes que hacer es crear, veamos cuántos. Por lo que simplemente lo basa en un solo país. Pero si vuelvo atrás, usa la cuadrícula de repetición, por ejemplo, crea estos muchos. Estos muchos. Creo que es algo así como 294 o algo así. Por lo que desagrupa la cuadrícula y prueba ahora puedes ver 126 formas. Entonces básicamente puedes usar cualquiera de estos. Y si cambio a mi panel de capas, se puede ver que esta es la bandera de Mongolia. Si hago clic en este, esto es Finlandia, México, esto es Eslovenia y así sucesivamente. Entonces así es como creé estos. No te voy a aburrir demasiado para que podamos aumentar la velocidad a la que trabajamos en esto. Entonces en el siguiente video, realidad vamos a terminar nuestro proceso de creación porque tenemos esta Q y una, que va a ser un poco difícil de crear. A Ananda te va a aburrir con ella en este video. Pero finalmente, después de eso Q y a, lo único que nos queda para crear, si comprobamos aquí mismo. Entonces aquí está el Q&A Así que tenemos el texto y el botón a un lado. Estos van a ser un poco complicados de crear. Y también tenemos la suscripción y finalmente tenemos el pie de página en la parte inferior. Entonces te veré en el siguiente video. Y en el siguiente video realmente vamos a terminar esta primera página por fin, luego pasar a la siguiente página. 18. Crear alambres: Muy bien, Vamos ahora adelante y finalmente terminemos los trabajos en nuestra página de inicio. Y para hacer eso, como dije, permítanme ampliar semanalmente. Tenemos esta Q y una sección, que va a ser un poco complicado para nosotros crear, pero nada demasiado importante. Entonces lo que voy a hacer es realmente usar esto. Entonces voy a golpear Control C y copiar este texto porque está perfectamente colocado para usarlo en esta sección. Yo lo voy a posicionar aquí mismo, más todo el camino abajo. Y para ahorrar un poco más de tiempo, lo que realmente voy a hacer es copiar y pegar en el texto que ya he creado. Yo lo hice. Y asegúrate de que he movido mi botón aquí mismo a 80, por ejemplo. Y vamos a comprobarlo. Sí, 18, Katie está bien y déjalo así. Entonces la parte complicada aquí es ésta de aquí, que va a ser preguntas y respuestas. Entonces lo primero que voy a hacer es usar realmente mi herramienta tipo click aquí y dice algo así como, mi tropa está protegida a nivel nacional? Y para ello, Vamos a usar algo como Bop es 36 audaz, pero en realidad voy a cambiarlo a 24 voltios porque necesito un texto un poco más pequeño para caber aquí mismo. Y lo voy a agregar a mis estilos de personaje y simplemente más aquí por debajo de mi 36. Y sólo una especie de que está muy bien organizado. Lo que también voy a hacer es asegurarme de que tenga seis columnas de ancho. Entonces 246, así 123456. Ahí está. Y también voy a incluir ese icono, que es este icono tan cercano. Y más adelante cuando empecemos a animar, realidad va a animarse a sí mismo. Entonces va a ir de plus 2 cerca de x Pero vamos a lidiar con eso un poco más tarde. Y como pueden ver, sólo tenemos el estado por defecto porque no necesitamos y después del estado. Lo que también voy a usar es un divisor. Entonces voy a copiar y pegar aquí mismo. Una vez más, el ancho es 702, color es este predeterminado. Un tamaño es uno, y lo creé simplemente usando esta herramienta de alineación. Déjame volver y voy a arrastrar y soltar todas mis capas están justo aquí. Entonces lo que voy a hacer es básicamente agregar otro texto. Entonces, vamos a ver. Lo que puedo hacer es usar parecido al pop in slide para ese. Y veamos posición aquí mismo. Cerrar icono puede ir en la parte superior, así que en algún lugar por aquí. Y veamos, podemos usar, por ejemplo, Poppins 24 y luces, que es ésta. Voy a pegar en ese texto. Y veamos, por ejemplo, puedo posicionarlo para ser 60. Así que así. Y veamos, puedo, por ejemplo. Posiciona mi divisor para que sea 60 también, así. Ahora vamos a comprobarlo. Está bien, Todo se ve muy bien. Analistas ahora desagruparlo, golpea Control G. Y esto va a ser, está protegido mi viaje, por ejemplo, así. Y lo que voy a hacer ahora es básicamente usar estos mismos elementos, pero básicamente moverlos un poco. Y los voy a cerrar y luego te voy a mostrar a qué me refiero. Entonces primero lo primero, vamos a crearlos. Entonces voy a golpear primero, asegurarme de que esto sea hasta la cima como si estuviera aquí mismo. Golpea Control D para duplicarlo y asegúrate de que este sea 60 tan bien como éste. Aquí está. Más, está abajo y lo voy a llamar así política de cancelación. Y simplemente voy a copiar y pegar el texto de mi diseño original. A ver, Solo para que no te aburra demasiado con él. Y mover este divisor para ser 60. Así. Ellos son Harut. Y voy a duplicar esa, moverla a estar a los 60, así. A ver. El siguiente son socios así. Entonces déjame organizar rápidamente mi archivo original porque como dije, estoy copiando y pegando de deuda. Entonces, ¿cómo eliges a tus parejas así? Y luego veamos socios. Podemos copiar y pegar el texto en. Y movamos este divisor en una vez más. Entonces 60 es, puedes ver que Adobe XD es lo suficientemente inteligente como para organizar lo que necesites aquí mismo. Entonces, por fin sigamos con otra sección. Y esto se va a llamar, Lo siento, ¿cómo funcionan los viajes personalizados? Y por último, voy a arrastrar en este y finalmente mover esto a ser 60 también. Así que así. Y básicamente lo que vamos a hacer es que los vamos a organizar un poco mejor. Entonces lo primero es lo primero, voy a llamar a esto viajes de disfraces así y saber que tenemos todas nuestras secciones. El apartado predeterminado va a ser, todas estas respuestas van a ser cerradas. Por lo que tenemos que editarlos todos para nuestra sección por defecto. Y voy a crear un componente. Y más adelante en realidad vamos a seguir adelante y animados Hay componente y crear estados adicionales una vez que realmente empecemos con nuestro diseño. Entonces las primeras cosas primero, en realidad voy a mover esto a la herramienta superior justo aquí. Y posicionado arriba, por ejemplo, asegúrate de que esté en la parte superior de mi texto, como si estuviera justo aquí, así que asegúrate de que sea 60. Y por último, voy a bajar a tu basicidad del texto en sí. A continuación, voy a hacer eso por todos ellos. Entonces, déjame mostrarte otro y luego voy a pausar el video. Entonces divisor va en la parte superior y asegúrate de que vaya justo aquí. Así que solo asegúrate de alinearlo con tu texto y asegúrate de estar a 60 de aquí. Entonces así y luego bajarte básicamente puedes presionar 0 en tu teclado a veces. Y, uh, déjame pausar el video y hacer estos dos y luego volveré contigo. O no vi que eso esté terminado. Tenemos que organizarlos un poco mejor porque ahora se puede ver que están desconectados básicamente y simplemente se sientan aquí en el espacio vacío. Entonces tenemos que organizarlos un poco mejor. Lo que voy a hacer es un globo ocular. Entonces alineándose en algún lugar por aquí. Asegúrate de que sean 60 y haz lo mismo con estos otros dos también. Así que asegúrate de que nuestro globo ocular terminó, el borde superior del texto va con el borde inferior de nuestras líneas están justo aquí. Asegúrate de que sean 60. Y finalmente hacer lo mismo para este último. Entonces en realidad creo que un guardó la primera vez narrativas como esa. Y ahí estamos. Esa sección está terminada. Entonces lo que realmente vamos a hacer ahora es que lo vamos a poner en la sección. Tan viajes personalizados. Entonces llamémoslo las preguntas comunes, por ejemplo, así. Y voy a golpear Control K para crear un componente porque este va a ser el estado por defecto de nuestro componente. Y más adelante vas a ver una vez que los animemos, el primer estado va a ser viaje financiero. Y va a mostrar que los divisores de texto se van a mover hacia abajo y todo se va a animar. Esto va a rotar. Entonces vas a ver que más adelante cuando realmente lleguemos a animar nuestros elementos están diseñados y todo lo demás. Entonces primero lo primero, voy a agrupar esto y llamarlo contenidos. Y luego preguntas de Khan va a ser el nombre de nuestras secciones. Entonces una vez más, preguntas comunes. Y para el contenido, voy a usar la pila. Y la pila va a ser así porque más adelante podríamos querer moverla así. Entonces por eso la pila es realmente útil. Posicionémoslo aquí mismo, organizémoslo un poco mejor. Funciona bien. Veamos dónde estamos. Entonces estamos realmente lejos. Por lo que 150 hábitos lácteos. Y ahora vamos a crear ese otro. Entonces Control C, Control V. Y para esta sección, que va a ser nuestra newsletter, sección de newsletter. Como pueden ver, tenemos el texto, texto inferior, correo electrónico y suscribirse. Así que realmente bastante simple de crear. Y vamos a las primeras cosas primera posición para ser 150. Voy a copiar y pegar el texto para agilizar un poco las cosas. Entonces vamos a copiar y pegar en el texto de abajo, sostenido un bucle. Suscríbete a nuestro newsletter para obtener las últimas ofertas y descuentos. Mueve esto abajo, asegúrate de que esto sea 150, lo es. Entonces lo que voy a hacer es crear una entrada. Entonces para la entrada de texto, Veamos, puedo usar mi herramienta de rectángulo. Vete de aquí. En algún lugar por aquí. Asegúrate de que sea 76, igual que todos nuestros otros botones. O 79 2 va a ser. Entonces llamémoslo entrada. Vg va a contener la frontera y no llenar ninguna sombra. Y vamos a dejar los bordes rectos así. Más ancho todo el camino hacia abajo. Usa la herramienta de texto y usa algo como ingresar tu dirección de correo electrónico. Su hábito. Y para éste, veamos qué podemos usar. Podemos usar 18 luces, por ejemplo. Y veamos, puedo crearlo con este color, por ejemplo. Asegúrese de que estos dos estén seleccionados. Asegúrese de que el texto del correo electrónico vaya en el centro. Pero lo voy a hacer es buscar boletín de correo electrónico. Aquí está. Simplemente arrástrelo y suéltelo en su posición. Y voy a asegurarme de cerrar esto y de cambiar su color a éste. Dearie, cómo es, y creo que es un poco pequeño. Entonces lo que voy a hacer es transformarlo un poco. Asegúrate de que sea, por ejemplo, 42 con 31. Nat funciona mucho mejor con nuestra sección. Asegúrate de que esté en el centro. Lo es. Y por último, lo que voy a hacer es asegurarme de que sean 40 de esta búsqueda. Entonces 1, 2, 3, 4. Y yo voy a hacer lo mismo para los textos de escritorio, así que asegúrate de que sean 40 también. Ahí lo tenemos. Y ahora movamos esto hacia abajo, desagruparlo, y llamémoslo entradas de texto. Yo dat. Y necesitaremos crear nuestro botón. Entonces lo que podemos hacer es a ver. A lo mejor podemos usar ese conocimiento superior crear en realidad otro botón. Entonces vayamos así. Vayamos con 70. Asegúrate de que ambos se alineen correctamente. Y veamos qué podemos hacer. Podemos llamarlo, por ejemplo, Aplicar botón o botón grande o algo así. Entonces aplica btn porque va a ser la acción que utilice, así que voy a tomar en este caso para suscribirme. Entonces veamos por el ancho 36, 6, altura de 70, que está bien. Voy a usar cinco por todas partes. Voy a quitar la frontera. Usa este azul medio como nuestro color y finalmente golpeó T. Y imprimí algo como suscribir. Asegúrate de que esté centrado, alineado. Y veamos qué puedo usar. Por ejemplo, Poppins 24 luces, asegúrate de que sea blanco así. Y luego voy a seleccionar estos para asegurarme de que estén en el centro así. Ver. Y puedo llamarlo, por ejemplo, Botón Suscribir. Y de inmediato podemos crearlo como componente Control K, y podemos agregar un estado de desplazamiento. Y lo único que vas a cambiar realmente dentro del estado de horror es el color del botón a este color flotante así. Entonces básicamente una vez que se cierren, se va a quedar así. A continuación, voy a posicionarlos a ambos en el centro así. Y veamos, quizá pueda asegurarme de que estén a 60, por ejemplo, así. Y voy a asegurarme de llamarlo entrada. También asegúrate de estar en una pila porque más adelante podríamos querer hacer algo así. Y por último, podríamos querer reducir esta entrada de texto a algo como esto para que podamos alinearlos correctamente en tamaño móvil, por ejemplo. Para que eso pueda hacer eso mucho más fácilmente. Asegúrate de que esté en el centro. Y finalmente, a partir de los textos, podemos darle algo un poco más grande como 100. Y podemos llamar así a este boletín de sección. Y por último, pasemos ahora a pie de página y terminemos esta primera parte de nuestro diseño. Entonces permítanme primero extender esto todo el camino hasta aquí y asegurarme de que esto sea 150, lo es. Entonces para el pie de página, voy a arrastrar un bonito rectángulo grande, asegurarme de que no tengo ningún borde. Entonces lo voy a llamar la imagen de pie de página. Yo, que me voy a asegurar que sea este gris claro para que sepamos que es la imagen. Asegúrate de que esté en un centro, sin frontera, eso está bien. Y ahora vamos a darle algunas dimensiones. Entonces para la altura, vayamos con el 632 que, y asegurémonos de que seamos 150. Haga doble clic aquí para que podamos cerrar nuestra página correctamente. Amplíe todo el camino, y simplemente asegúrese de cerrarlo más viejo como para que XD tenga esta opción para reducir. Pero tristemente no lo tiene, así que tenemos que lidiar con ello. Ahora. Hagamos logo, arrástrelo y soltarlo dentro. Asegúrate de que esté en el centro, así. Posición en algún lugar por aquí. A ver. Ahora, básicamente puedo usar todos esos elementos superiores. Entonces lo que puedo hacer es arrastrar esto hacia abajo secciones superiores, navegación primaria, navegación principal. Entonces voy a usar ese hit Control C, Control V. Y voy a asegurarme de que esté todo el camino hacia abajo, asegurarme de que esté en el centro así. Y ahora lo que puedo hacer es simplemente dividirlos en dos secciones, por ejemplo. Pero antes de hacerlo, aumentemos el espaciado a 100 entre ellos y la canción del logo así. Y vamos a ver. Esto puede ser un 24. Primero lo primero, vamos a seleccionarlos todos y asegurarnos de que estén alineados a la izquierda. Así en lugar de alineados a la derecha. Entonces voy a posicionar y el destino aquí. Y porque veamos, 1, 2, 3, 4, 5, 6, todas pueden tener dos columnas de ancho así, así. Esto puede ir justo aquí, esto puede ir justo aquí. Y luego finalmente, esto sobre nosotros puede ir a los extremos, aquí mismo, y aquí mismo. Lo que puedo hacer entonces es dividirlos en izquierda y derecha. Y lo estoy haciendo sólo por los propósitos receptivos. Entonces lo escribe, y esto se va a dejar así. Y puedo llamarlo nav principal por ejemplo, y simplemente usar la función de pila solo para que más adelante pueda hacer esto y redimensionarlos aún más si es necesario. Y creo que es mucho más sencillo hacer esto que empantanarse con todos estos otros elementos. Entonces vamos a seleccionar el logotipo, Vamos a seleccionar nuestros artículos, asegurarnos de que estamos en 100, así que lo sé. Por lo que VR. Y por último, déjame usar mi divisor una vez más. Voy a pegarlo dentro de aquí. Colócala en justo debajo de nuestro principal nav. Y apenas lo puedes ver porque es este color gris claro, pero usemos el color blanco solo para que puedas verlo mucho más fácilmente. Y lo, Vamos a posicionarlo no a 100, sino más bien a 80, por ejemplo. Algo así. Creo que funciona bien. Y luego finalmente, simplemente copiaré y pegaré mis textos Watson. Pega aquí mismo. Asegúrate de que estoy todo el camino hasta aquí. Y voy a asegurarme de que todo sea blanco sólo para que sea visible. Y podemos cambiarlo a un gris claro un poco más tarde. Entonces veamos, tal vez podamos posicionarnos para estar en 80 planeador, asegurarnos de que estamos alineados a la derecha. Y finalmente lo que tengo son estos iconos de redes sociales, que voy a colocar en un derecho aquí, asegúrate de que estoy aquí. Y cambiémoslos para que sean blancos también. Yo que los muevo y finalmente, los posicionó para estar justo aquí y alineados con nuestros textos para que podamos hacer esto, alinearlos, asegurarnos de que estamos en 80 y ahora somos 76. Por lo que en realidad podemos aumentar estos cuatro píxeles hacia abajo si queremos. Entonces lo que podemos hacer es golpear Control G llamó a esto, compré algo de información solo para que podamos tenerla. Y también podemos usar la pila aquí. Y lo que también puedo hacer es, por ejemplo, agrupar todos estos elementos de aquí a aquí. Y llámalo, por ejemplo, info de pie de página. Y puedo ponerlos en una pila, los va a poner en esta pila. Y lo que esto nos va a permitir hacer es básicamente extenderlos o colapsarlos como queramos. Y va a mantener la consistencia y va a ser mucho más rápido para nosotros editarla más adelante. Por último, el control G para la disciplina de calidad pie de página. Y una cosa que quiero hacer antes de dejarte es hacer fondo para iconos, Control K, Tecla de control y Tecla de control para éste, solo para que pueda agregarlos como nuestros iconos. Y antes de irnos, arrastraré y soltaré eso aquí. Dónde están los iconos y ver cómo se home icon es nuestro último. Voy a acercarme sólo un poquito. Saltando justo aquí, facebook, Instagram, YouTube, todos ellos están ahí mismo. Ahora, voy a posicionarlos para que estén todo el camino hacia abajo. No sé por qué XD hace esto. Porque lo pegué hacia abajo. No sé por qué les muestra estar justo aquí, así que realmente no importa. Posicionado y aquí mismo se asegura de que estemos a 80 de aquí también. Creo que fueron 80. Vamos a comprobarlo. Entonces veamos de esto a esto estamos en 80, así que usa estos 38080. Y por último, con este ícono de YouTube AT tan bien organizado ahora una vez más, por lo que van así. Terry lo tiene. Hemos completado el diseño finalmente, para este alámbrico Adobe XD. Y se puede ver que la página es realmente bastante grande. Y sé que antes de dejarte, solo quiero darle un adelanto rápido y ver lo que creamos hasta ahora antes de pasar a la siguiente página, una vez más, golpear ese Play Icon, agrandar esto. Entonces lo que tenemos es que tenemos este bonito efecto flotante. Ahí, lo tenemos. Y lo que podemos hacer aquí mismo es una menor abajo la opacidad de este marco en el fondo. Entonces déjame hacer eso ahora mismo. Entonces buscaré el botón Hero. Aquí está. Y dentro de la finca, lo que puedo hacer es simplemente bajar esto a 0, por ejemplo. Sólo para que sea mucho más agradable a la vista. Y ahora una vez que flote, no puedes ver en ese fondo general formas o se ve mucho mejor. Aplicar filtros. Y estos funcionan porque como dije, ya los creé, así que está bien. Se puede ver que esto funciona bien. Se ve encantador. Esto funciona bien. Y el espaciado entre todas estas secciones funciona muy bien. Por lo que se puede ver que todos estos iconos están flotando y cambiando. Todo se ve bien. Tenemos algunos problemas con esta flecha derecha, pero lo vamos a arreglar más adelante en la etapa de diseño. Pero básicamente los tenemos a todos alineados bellamente y funciona muy bien. Todo esto, como se puede ver, flecha derecha simplemente se niega a brillar. Esto se ve genial. Esto funciona realmente bien. Vamos a animar esto más tarde y, y básicamente se va a expandir hasta aquí. Entonces por eso lo puse aquí arriba. Esto funciona bien. Para que veas que el horror se ve genial, y esto funciona realmente genial también. Entonces básicamente eso es todo para este video y esta primera página, obviamente, estas siguientes páginas van a ser mucho más pequeñas en tamaño de contenido. Entonces básicamente van a ser mucho más rápidos para grabar y crear. Entonces los veré en el siguiente video donde realmente vamos a trabajar en esta pantalla de destino. Y vamos a seguir adelante a partir de ahí. 19. Crear alambres: De acuerdo, Ahora que la página de inicio está terminada, Pasemos a esta página de donación. Y antes de que lo hagamos, revisemos rápidamente lo que tenemos aquí mismo. Entonces tenemos la misma navegación, misma configuración, misma imagen home hero, solo escupe el deslizador. Va a ser sólo una imagen. Y luego tenemos ese título de sección y luego tenemos sobre las actividades de localización y todos estos diferentes iconos. Y por último, tenemos esta sección que nos va a llevar un poco de tiempo. Tenemos este actual tiempos 4, que va a ser bastante similar a los que ya tenemos. Y entonces estas secciones en la parte inferior son básicamente exactamente las mismas que están en la pantalla de inicio. Y esto es lo que estaba viendo en un video anterior. Te va a llevar mucho tiempo, sobre todo con estas páginas más largas, llegar a la misma estructura que vas a usar más adelante en todas estas otras páginas. Pero una vez que lo hagas, va a mejorar tu velocidad e incrementar tu productividad dramáticamente. Por lo tanto, volvamos rápidamente. Haga clic aquí. Voy a golpear Control D para duplicar este. Entonces lo voy a mover hacia abajo. Realmente no sé por qué sigue haciendo esto y pegarlo aquí mismo. Los sólidos sostienen Alt y posicionan a un ritmo aquí. Entonces lo voy a llamar destino. Al igual que así. Entonces lo primero que voy a hacer es deshacerme de esto y navegación de fondo. Entonces vamos a abrirla arriba y abajo ahora se va a ir, las flechas se van a ir. Y cambiemos esto. Y llamémoslo, por ejemplo, ciudad del amor. Y cambiemos esto a París y exploremos. Ahora botón se va a quedar igual. Y si un hit preview aquí mismo, vas a notar que estas animaciones se están quedando igual y el trabajo exactamente igual. Entonces como dije, vamos a quedarnos con esta sección de héroes. Entonces el título de la sección, vamos a desagrupar esto. Ok, entonces para el título de la sección, déjenme ir rápidamente y copiar mi texto de mi documento original. Por lo tanto, visita París. Y seamos Steyn esto, así que veamos qué tiene para ofrecer París y dónde puedes afirmar. Entonces lo primero que voy a hacer en realidad es seguir adelante y eliminar esto y eliminar para hacer para que tenga mucho más espacio con el que jugar. Y lo siguiente que vamos a hacer es crear esa sección Acerca. Por lo que voy a utilizar mi Tiki click justo aquí para escribir sobre París. Y veamos qué podemos hacer. Dejó la línea, eso está bien. Usemos Poppins 36 negrita por ejemplo. Creo que eso funciona bien. Ahora veamos qué podemos hacer aquí mismo. Vamos a posicionarlo en algún lugar alrededor de un 100 por ejemplo. Entonces veamos dónde estamos. 100 y fuimos a la posición por un año o una vez más, asegúrate de que esté alineado a la izquierda ya que está justo aquí. Entonces voy a asegurarme de duplicar este y voy a usar 24 irregulares. Entonces voy a crear un cuadro de texto de tamaño fijo. Voy a extenderlo todo el camino hasta aquí. Y veamos quizá tres o cuatro líneas, algo así. Y déjame seguir adelante y copiar y pegar rápidamente alguna información sobre barreras. Y hay dos cosas que puedes hacer en estos casos. En primer lugar, puedes estrechar tu caja hasta el borde de tu texto hasta que desaparezca y luego traerla de vuelta así. O puedes usar altura automática y va a ajustar automáticamente la altura de tus textos tan pronto como empieces a alinearlo. Esto va a hacer, lo cual es fantástico. Y básicamente va a actuar como un párrafo de texto sensible. Entonces por eso me gusta mucho eso. Y esa función de Adobe XD, vamos a mantener auto altura, como dije, anélidos agrupan esto, Vamos a posicionarlo en el grupo. Conoce de París y tiene título de sección. Y lo vamos a mantener así. Ahora lo primero que voy a presentar aquí mismo es este divisor. Así que simplemente usa tu herramienta de línea así. Y veamos, quizá podamos usar ese color más claro para la frontera. Entonces un gris claro aquí lo es, porque no queremos que sea demasiado intrusivo, solo queremos mantenerlo bastante simple y mínimo. Entonces déjame posicionarlo para ser 40 de mis textos. Por lo que 1234. Yo lo hice. Y voy a llamar a este divisor. Voy a duplicarlo y voy a posicionar este dentro de mi título de sección, así que dentro de aquí. Y voy a bajar mucho este próximo a algún lugar por aquí. Entonces lo que voy a hacer a continuación es duplicar este control de texto D abajo. Entonces, ¿por qué lo duplicé esto? Perdón por eso. Debí haber duplicado así sobre París. Por lo que más con analistas externos ver, tal vez podamos posicionarlo 100 de nuestro divisor. Está contando a partir de este texto, pero como dije, justo desde el divisor, entonces el divisor está ahí. Y aquí mismo vamos a escribir en actividades para tener aquí así. Y luego voy a posicionar algunos de esos iconos que te mostré antes. Entonces estos iconos, porque estos son los iconos de actividades. Entonces lo que puedo hacer es simplemente saltar aquí mismo. Así que turismo, museos, Cruceros por el Río, ciclismo, comer fuera. Y éste. Por lo que voy a simplemente copiarlos. Saltando justo aquí y el bajo se mete. Entonces lo siguiente que voy a hacer es por cada uno de ellos, voy a saltar y usar la versión de esquema. Entonces como dijo, hice esto porque los iconos suelen venir ya sea en esquema o en versión de color. Entonces qué se puede hacer si vienen en versión de color, que les recomendaría a ustedes chicos que descarguen, siempre se puede saltar por dentro y una más baja la opacidad de ese color. Crea componentes adicionales, fecha o una instancia como lo he hecho aquí mismo. Y luego puedes mostrarle a tu cliente o a tus compañeros dosis dos opciones para que puedan elegir. Y también puedes usar estos dos en diferentes tipos de escenarios. Entonces para organizarlos mejor, lo que voy a hacer es crear un rectángulo. Puedes usar la tecla de método abreviado o rápido aquí mismo. Y luego voy a dar clic y volver a posicionar este. Seleccione mi rectángulo, haga clic aquí, luego haga clic en el rectángulo, arrástralo aquí, haga clic en éste de aquí. Selecciona ambas solo para asegurarme de que estoy en el centro de estas dos columnas porque quiero que las columnas ocupen dos espacios cada una. Entonces, vamos a seleccionar este ícono así. Y luego voy a posicionar este y arrastrar éste hasta aquí, secar éste hasta aquí, alinear y subir. Eso está bien. Ahí, lo tenemos. Entonces eso es básicamente todo. Ahora, organizémoslos. voy a mover abajo por debajo de esto, y los voy a empujar un poco. Entonces veamos, quizá pueda posicionarlos para que sean 100. Entonces, alinémoslos así. Vamos a echar un vistazo a 100. Eso está bien. Entonces lo siguiente que vamos a hacer es duplicar esta posición de texto aquí abajo. Y lo que voy a hacer es usar Poppins 24 luz por ejemplo. Entonces arriba Vamos a ver datos sobre, pero sólo use y el texto de muertes. Y déjame saltar, copiar y pegar y el texto de mi documento original. Y veamos, quizá pueda posicionarlo para ser 40. Entonces en algún lugar por aquí, creo que está bien. Control D y luego se puede escribir en museos. Asegúrate de que esté en el centro control D River Cruises, Control D rutas ciclistas, y finalmente, recorridos culturales. Ahora puedes hablar con tus clientes y hacerles saber eso por cada destino que tengan. Por ejemplo, en este caso, en este sitio web infantil, por cada destino que tengan, podemos, por ejemplo, crear iconos adicionales. Entonces vamos 40 yo esto, podemos crear iconos adicionales. Entonces esto es totalmente me caí o Torre Eiffel en París porque esto es más barest funciona bien. Pero quizá quieras incluir algún tipo de iconos diferentes, entonces puedes hablar con ellos y ver si les interesa algo así. Entonces lo que voy a hacer es seleccionar estos dos y llamar a esta carpeta turismo. Voy a seleccionar estos dos puestos aquí mismo. Museos cierra un poco más y fuera. Y esto va a ser ciclismo. 18 nota. Y finalmente este que es turistas culturales posicionan aquí mismo. Ahora voy a pausar el video y lo único que voy a hacer es simplemente pedirlos para que el ícono vaya a la cima. Y ahora que lo he hecho, como pueden ver, el icono está en la parte superior, texto está en la parte inferior. Adelante rápidamente y organizémonos en deuda. Entonces lo que podemos llamar a esta sección son actividades. Entonces voy a agrupar las actividades divisor y todas estas carpetas sólidos primer grupo Ds, llamarlos actividades y voy a agrupar todo lo demás y llamarlo actividades una vez más. Entonces ahora sigamos adelante y voy a duplicar esta sección porque si recuerdas un derecho aquí, lo que tenemos es esto, entonces esto, lo que creamos con ICANN detuvo las ofertas de París. Entonces eso es lo que vas a crear a continuación. Por lo que una vez más, usa el título de la sección. Y no sé por qué entró este divisor aquí. A ver ¿Dónde está sobre París, el aire. Organicemos estas cosas sólo un poquito. Por lo que debe ser dentro de aquí. Por lo que el título de la sección debería estar en la parte superior sobre París y luego dividir allí debería haber dentro así. Por lo que la sección titulada Control D una vez más. Yo lo voy a posicionar aquí mismo. Voy a deshacerme de todas estas secciones. Voy a dejar sólo una parte inferior porque en realidad vamos a usarla. Entonces de aquí todo el camino hasta aquí, y veamos, quizá podamos deshacernos de los socios. Veamos qué creamos aquí mismo. Entonces tenemos esto entonces tipos de cambio. Entonces, sí, vamos a deshacernos de los socios y sólo salgamos en estas secciones en el extremo inferior, van a ser exactamente los mismos que hemos terminado estos. Entonces lo primero que vamos a hacer en realidad es saltar justo aquí y la posición es ser 150. Al igual que esto. Porque quiero mantener la misma distancia de aquí a aquí, pero estos pueden quedarse en 100 como lo hicimos nosotros. Por lo que puedo agrupar todos estos. Control G y escritura visita París. Y este título de sección va a bajar. Entonces lo que vas a escribir aquí mismo es top barris ofrece así. Entonces voy a saltar y pegar en este texto, así. Entonces agruparemos todo esto, Control G y lo llamemos información de fondo. Y también podemos ocultarlo o simplemente sostener un Derrick solo para que yo sepa más tarde que puedo traerlo todo el camino hasta aquí. Entonces lo que vamos a hacer a continuación es crear esas categorías. Por lo que esas opciones que los usuarios pueden tomar antes de elegir su hotel. Entonces por el precio, duración, actividades, excursiones, aireación, y finalmente, aplicar filtros donde se encuentre. Aquí está justo aquí. Por lo que precio duración, actividades, excursiones, calificación y aplicar. Entonces vamos a crear esos. Y como son seis, lo que podemos hacer es simplemente crear un botón. Dos columnas así. Y veamos qué podemos hacer con él. Entonces lo primero es, vamos a ver, Empecemos por dimensión. Entonces 22 Para un ancho 70, vamos a dejar el color blanco, quitar el borde, pero incluir la sombra de 55, 10 esta vez. Entonces una bastante más grande. Y luego lo que solíamos hacer y asegurarnos de que sean cinco. Entonces vamos con esto y apenas lo puedes ver, pero eso está bien. Y vamos también a la vuelta de las esquinas y abajo a cinco, que creo que es bueno. Y llevémoslo a 100 desde aquí, así que turno y 10 veces, lo cual está bien. Ahora lo que voy a hacer a continuación es escribir precio así. Voy a usar Poppins 18. Voy a asegurarme de que esté alineado a la izquierda y posición gris claro en justo aquí y asegurarme de que esté en el centro. Se trata de manada lechera. Y simplemente voy a localizar ese signo de dólar. Entonces veamos qué hay ahí. Lo es. Simplemente arrástralo y soltarlo dentro. Ahora veamos. A lo mejor puedo posicionar ese letrero de dólar aquí mismo en el centro. Y también asegúrate de que sean 40. Y el precio está en 40 también. Al igual que así. Entonces veamos, puedo, por ejemplo, llamar a este insumo PEG. O veamos, desplegable BG. Porque más adelante cuando empecemos a diseñar, vamos a incluir algunos elementos diferentes. Haz eso, va a caer como te mostré en el primer video de esta clase. Entonces llamémosle precio. Ahora sigamos adelante y creemos algunas copias. Entonces Control D, posiciónelo aquí, controla la posición y aquí. Y antes de pasar a más lejos, Vamos a renombrarlos. Entonces la segunda va a ser la duración. turno uno va a ser actividades y duplicarlo. Por lo que esta va a ser excursiones. Y por último, en esta de aquí va a ser la calificación. Y para el final, simplemente duplicarlo y llamarlo botón en Aplicar Filtros litio allí todavía. Entonces lo siguiente que realmente voy a hacer es empezar en mi botón porque es el más simple. Empecemos con esto. Aplica filtros así. Se quitó el icono del dólar, btn, BG, mi papá. Entonces esto va a ser azul principal. Nos vamos a deshacer de las sombras. Y simplemente para el filtro aplique, usemos el blanco. Simplemente se asegura de que esto esté en el centro como está. Y voy a golpear Control K para crear un componente. Voy a crear un estado de terror. Lo único dentro del flotante, lo que va a cambiar es el color del propio flotante, tan azul claro. Y ahora sigamos adelante y trabajemos en todos estos. Entonces como dijimos que esto va a ser una duración así. Y por la duración, Vamos a encontrarlo. A ver. Entonces veamos calendario. Piensa que es éste. Vamos a ver que es 0 en posición y aquí mismo. Y también voy a asegurarme de que haya cambiado de color a gris claro. A ver. Por lo que 40. Y cambiemos esto a 40 también. Al igual que eso, que está bien. Siguiente uno, actividades. Vamos a seleccionar mi icono de cantidad en dólares, ubicó mis actividades y arrastrarlo y soltarlo dentro y ver 40. Y esto es 35. Por lo que 1, 2, 3, 4, 5, rebaño lechero. Y esta próxima van a ser excursiones. Localice mi icono y arrástrelo y suéltelo dentro. A ver, Somos 40 de aquí. Sí, Y aquí estamos 31. Por lo que ahora estamos a los 40. Y finalmente, este va a ser nuestro 18. Y para la escala de calificación, se encuentra ese ícono estrella. Aquí está. Y arrástralo y soltarlo dentro. Voy a asegurarme de que esté en el centro así. Y luego me voy a asegurar que sean 40 los puedo usar, y 33. Entonces vayamos así. Y lo último que quiero cambiar es esto. Entonces sólo voy a usar y D contorno. Y para el contorno, voy a usar este color sólo para que vayamos y tengamos cierta consistencia con todos estos diferentes iconos. Darío lo. Y ahora realmente vamos a asegurarnos de organizar estos un poco mejor en llamarlo filtros así. Entonces tenemos sección superior, que lo siento, título de sección, que es éste. Contamos con filtros. Visitar París es esta sección aquí mismo. Y por último, ahora necesitamos diseñar estas tarjetas. Entonces vamos a revisarlos. Se puede ver que tenemos la imagen aquí mismo y tenemos la calificación, el nombre. Tenemos dirección aquí mismo, y entonces tenemos básicamente la misma información que antes, tiempos 4. Entonces saltemos por dentro y creemos deudas. Entonces lo que podemos hacer es usar realmente la disciplina. Para que podamos copiar esto fuera de registro. Y arrástralo justo aquí, pegado, posicionado justo aquí, y ver Tal vez podamos, sí, creo que 100 es buena manera de ir. Entonces lo que podemos hacer con él es que puedo dar clic aquí y arrastrarlo. Como puedes ver, responsive, resize sí extinguido, pero no realmente todo tan bueno. Entonces lo que voy a hacer es primero renombrar esto a tarjeta de hotel. Y aquí llamó a esto a tarjeta de hotel vg, porque una vez que la exportes más tarde, obviamente va a ser un poco diferente. Por lo que en realidad podemos seleccionar la flecha y la tarjeta del hotel y simplemente escalarla. Y esos dos básicamente se van a quedar igual. Lo siguiente que la imagen se va a quedar igual. Esto se va a quedar igual. El nombre se va a quedar igual, pero en realidad vamos a deshacernos de esto, de este divisor. Entonces segundo divisor, vamos a quitarlo. Y este divisor se va a extender básicamente todo el camino hasta aquí para que tengamos suficiente espacio. Entonces dos aquí. Entonces lo que vamos a hacer es en realidad que puedo deshacerme de esa pila. Entonces vamos a ver, en medio de esta pila, vamos a deshacernos de ella. Y lo que voy a hacer es realmente mover mi precio a algún lugar por aquí, por ejemplo. Entonces me doy suficiente espacio cuando este ícono se expande más tarde, lo cual está bien. Y lo que voy a hacer a continuación es realmente mover los días. Entonces primero se deshace por completo de este grupo. Ahora bajemos al centro de nuestro texto así. Voy a dejar los días aquí y en realidad voy a utilizar el transporte seleccionado de aquí a aquí, por ejemplo. Y luego usa eso y eso para asegurarte de que esté en el centro. Deshazte del rectángulo, y ahí lo tenemos. Entonces creo que eso funciona bien. Ahora lo siguiente que voy a usar mi divisor seleccionado a partir de aquí, asegúrate de que sea 40. Así. Creo que eso es bueno. Y una última cosa que voy a hacer es en realidad usar este texto para la altura automática. Y vamos a ver, voy a copiar y pegar el texto de mi documento original. Y luego voy a extender mi altura a algún lugar por aquí. Creo que va a funcionar bien. Y déjame envolver el texto para que tengamos un poco más de espacio para jugar. Y si lo comprobamos aquí, son 46 en realidad. Entonces veamos qué podemos hacer. A lo mejor podemos mover eso en cuatro hacia abajo seis píxeles. Entonces así, aquí tenemos 26 y vamos a comprobarlo aquí estamos a las 24, lo cual está bien. Entonces sí, podemos dejarlo así. En realidad. El último que voy a usar es este texto Control D. Asegúrate de que esté completamente fuera y asegúrate de que sea ancho automático. Entonces lo que voy a hacer es saltar a mi documento original, copiar y Veamos, con base en la dirección. Entonces voy a saltar de nuevo a la info. Y voy a asegurarme de que lo alinee con mis estrellas así. Entonces está en el centro. Y veamos, puedo, por ejemplo, asegurarme de que sean 60 de este borde derecho, algo así. Entonces me aseguraré de que solo, está alineado a la derecha. Entonces cuando un cambio todas estas direcciones más adelante se va a expandir hacia la izquierda. Y una última cosa que queremos agregar es en ese ícono de ubicación. Por lo que este icono de pin, arrástrelo y suéltelo hasta aquí. Asegúrate de cambiar el color a esto. Entonces ahora veamos, quizá pueda asegurarme de que sean 20 de aquí. Al igual que así. Entonces lo último que voy a hacer es agrupar estos para llamarlo ubicación, posicionarlo. Sí, dejémoslo en calificación, pero voy a usar la pila. lo que más adelante, por ejemplo, se puede imaginar que digamos que esta es la primera calle en la esquina 24. Se puede ver que el icono se queda a 20 píxeles de aquí, y es escala. Entonces, no importa lo que estés escribiendo aquí mismo, se va a expandir. Va a mantener su distancia del texto. Básicamente lo mismo que lo pusiste dentro de la pila justo aquí. Entonces así lo definimos y creo que se ve bien. Entonces sigamos adelante y duplicarlos. Así que en realidad puedo cambiar esto por el nombre real del hotel así. Aquí dentro. Podemos cambiar esto a, por ejemplo, 14 días. Al igual que así. Creo que eso funciona bien. Y lo que voy a hacer es usar mi cuadrícula de repetición y crear cuatro de estos. Y voy a desagrupar la grilla. Seguro que este viene en la cima. Este es el número 2, este es el número cuatro y este es el número 3. Ahí lo tenemos. Entonces lo último que vamos a necesitar en esta sección para rematarlo. Entonces agruparemos primero todas estas secciones. Entonces vamos a ver. Podemos, por ejemplo, hoteles de calidad, porque todos estos van a ser hoteles. Entonces vamos a seleccionar todo esto. Entonces tenemos sección titulada filtros, tarjetas de hotel, Control G. Voy a llamarlo cárteles, y luego simplemente ponerlo todo en el grupo, en la pila. Y veamos aquí mismo. En realidad no voy a hacerlo. Hagamos eso más tarde cuando lleguemos al estado deseado porque les voy a mostrar por qué. Es genial si tienes pilas habilitadas. Por lo que realmente puede ayudarte a alcanzar tus esfuerzos de diseño responsivos más adelante. Entonces veamos 150, así. Y voy a hacer clic derecho Desagrupar esto o simplemente puedes dejarlo en un grupo porque vamos a copiar y pegar más adelante en todas estas otras páginas. Entonces lo voy a redondear. Una vez más, realmente odio que XD no tenga esta opción para redondear el borde inferior de su diseño. Pero básicamente eso es todo. Hemos terminado esta página. Nos llevó un poco menos que den la página anterior porque ya tenemos todos estos elementos. El siguiente nos va a llevar un poco más porque necesitamos crear todas estas secciones desplazables. Pero como dije, porque tenemos todos estos elementos ya creados, va a ser algo sencillo de crear, por lo que no va a ser difícil. Pero este último, va a ser realmente sencillo. Entonces eso es todo para este video, y te veré en el siguiente. 20. Crear alambres: Pasemos ahora a la siguiente página que se va a seleccionar oferta. Pero antes de que lo hagamos, vamos a comprobarlo rápidamente. Entonces aquí tenemos, en lugar de la sección de héroes, vamos a tener la sección blanca. Entonces vamos a cambiar el color general de nuestros artículos de navegación a este color gris realmente claro que estamos usando. Vamos a tener unas imágenes aquí mismo con algunas flechas, Nan, calificación, nombre del hotel y sitio web con la descripción. Y luego abajo vamos a tener todas estas características diferentes del hotel las cuales nos van a llevar la mayor cantidad de tiempo. Y vamos a tener esta sección aquí mismo que se va a quedar quieta y no va a cambiar. Voy a demostrar eso y cómo vamos a lograr eso. Y también vamos a tener esta sección que va a ser exactamente la misma que con estas anteriores. Entonces para empezar, simplemente voy a asegurarme de que use mi tecla Alter Option, zoom y llamar a esta oferta seleccionada. Entonces voy a saltar aquí mismo y asegurarme de que cambie mi logo demasiado oscuro. Y luego veamos, puedo usar mi nav principal y puedo cambiar estos artículos a gris oscuro. Haz un salto aquí mismo, cambia todo esto a gris oscuro. Haga clic aquí, y luego elimine esto y haga clic aquí, elimine todo esto. Entonces básicamente nos queda ahora con este apartado. Por lo que va a leer mucho más, mucho mejor en la imagen. Y luego antes. Entonces lo que voy a hacer es crear una imagen. Entonces para empezar, simplemente voy a dibujar una r, que tiene tres columnas de ancho. Voy a hacer clic derecho y pegar la apariencia solo para mostrarte cómo se ve en la imagen original. Entonces lo que tenemos justo aquí es 55, 10. Entonces básicamente la misma sombra como hicimos un EU antes. Cinco es el radio de esquina y el tamaño es de 36, seis con 305. Entonces voy a llamar a esta imagen carrusel número 1. Voy a asegurarme de seleccionar este control C. Y también voy a asegurarme de llamarlo o arriba porque vamos a usar imágenes más adelante en el propio proceso de diseño. Entonces, vamos a ver. Podemos posicionarlo para estar en algún lugar alrededor, no sé, 100 por ejemplo, o 80. A lo mejor es bueno. Creo que AT, funciona bien, pero hagámoslo al 100, solo para darnos un poco más de espacio para respirar entre la navegación y todas estas diferentes imágenes. Entonces veamos, podemos crear, por ejemplo, seis imágenes diferentes. Entonces lo que puedo hacer es desagrupar este y llamarles imágenes de carrusel. Así que asegúrate de que me muevo por debajo de mi sección superior así. Y luego voy a hacer esos duplicados. Y la razón por la que lo pongo en el grupo es simplemente porque cuando estás en un grupo, puedes poner artículos fuera de tu mesa de trabajo a la mesa base. No se van a mover en absoluto. Se van a quedar puestos ahí mismo. Entonces el número dos y éste es el número tres. Por lo que este va a ser el número cuatro. Y se puede ver simplemente estoy usando las mismas distancias entre todas ellas que se utilizan. Por lo que nuestro ancho de canalón, si recuerdas, para nuestra mesa de trabajo, es de 60. Y eso es lo que Adobe XD utiliza como espaciado. Por lo que se usa uno más con 60 y eso va a ser imaginado en el número 6, así. Entonces lo siguiente que vamos a necesitar, esas dos flechas, sólidos, las encuentran. Están en cada una de estas secciones. Así que vamos a saltar dentro de aquí control C. Y voy a asegurarme de que los aprendí aquí mismo. Entonces voy a usar una, básicamente una distancia de pensamiento, los sesenta van a funcionar bastante bien. Entonces, vamos a ver. Estamos consiguiendo 60. Por lo que una vez más, debido a este toque apunta simplemente Níger flecha hasta aquí. Y vamos a asegurarnos de que lo posicionemos 60 por aquí. ¿ Verdad? Esas imágenes de carrusel se completan así. Y por supuesto para esta siguiente sección, básicamente vamos a copiar y pegar estas otras secciones. Por eso copio esta página porque esto encaja perfectamente con lo que necesitamos. Voy a deshacerme del título de sección. Aquí. En realidad voy a introducir el nombre del hotel. Voy a saltar y copiar y pegar la información de mi hotel así. Y luego voy a asegurarme de moverlos a los dos justo por encima de mi divisor. Ponga eso justo ahí. Y vamos a llamar a esto sobre hotel. Entonces, entonces lo que voy a hacer es deshacerme de esta sección inferior y simplemente ponerla afuera. Entonces, vamos a ver. A lo mejor puedo escribir esto aquí mismo. Desagrupa este. Ten mi sección de hotel arriba ahí y puedo asegurarme de que sea 100, así que así. Y por último, lo que voy a hacer es también lo puedo poner en una pila si quiero, pero no voy a hacer eso. No me voy a molestar con todos esos detalles. Simplemente voy a usar esto y voy a usar los textos de MyLocation. Entonces esto y el texto, Vamos a ver, Control D y Control C. Control D. Así que voy a usar estos dos. Puedes golpear Control X si quieres. Para cortarlas fuera de esta sección. Saltando aquí mismo a este control de sección V. Y lo que voy a hacer es simplemente usar mi calificación, posicionarlo aquí mismo. Y veamos, por ejemplo, puedo asegurarme de que sean 20 porque no creo que tenga que ser mucho más alto. Y asegúrate de que este texto esté muy bien alineado a nuestra cuadrícula. Entonces me voy a asegurar que esto esté en el centro. Y simplemente voy a usar textos de la página web ficticios como así que asegúrate de que esté bien alineado una vez más. Asegúrate de que vaya todo el camino hasta aquí y el hábito de Terry que tenemos son sobre sección hotelera. Ahora lo voy a posicionar en 100 así. Y aquí vamos a tener sección de deuda que no se va a mover, pero esta sección va a mover sal. Deshaznos rápidamente de esto porque no lo vamos a necesitar. Vamos a necesitar todos estos. Entonces pongámoslos justo dentro. Entonces de aquí a aquí. Pero algo de info. Y una cosa más que voy a hacer es simplemente extender esto todo el camino hasta aquí, sólo para darme algo más de espacio aquí que aquí, porque vamos a necesitar ese espacio. Entonces lo primero que voy a hacer es posicionar esto para ser 100 de aquí. Y dentro de aquí, voy a escribir en características de hotel como esa. Entonces me voy a deshacer de este divisor o aún mejor, simplemente puedo moverlo hacia abajo a algún lugar por aquí porque quiero que esta sección sea más estrecha. Yo quiero que sea de seis columnas de ancho. Entonces 2, 4, 6, quería terminar aquí mismo. Entonces en realidad voy a agarrar mi divisor, haga clic y mantenga presionada la tecla Mayús hasta aquí escribiendo así 1, 2, 3, 4, 5, 6. Sí, eso está bien. Simplemente extendido hasta aquí. Ahora, vamos a usar mucho ese divisor a lo largo de nuestro diseño. Por lo tanto, sigamos rápidamente y diseñemos esta sección. Y luego en el siguiente video voy a volver y diseñar en esta sección correcta porque a veces va a ser bastante complicado. Entonces, lo que vas a hacer es realmente usar estas actividades, ponlas en un stack click justo aquí. Y en realidad no, vamos, dejémoslos fuera de la pila. Por ahora. Voy a usar estos tres. Colóquelos aquí mismo, asegúrate de que esto esté en el centro. Y entonces lo que voy a hacer es usar ese truco de rectángulo una vez más. Entonces úsalo hasta aquí. Asegúrate de que tenga dos columnas de ancho como lo es. Selecciona mi ciclismo. Después haga clic en él una vez más y use mi comer fuera. Colócala aquí mismo y usa así a turistas culturales. Ahora me voy a deshacer de él. Y ahora voy a empezar con cambiar todos estos iconos. Entonces lo primero que vamos a cambiar en realidad es el estacionamiento gratuito. Lo siguiente es gimnasio privado. El siguiente es conserje. Entonces debido a que estas son características del hotel, esto es lo que tienes dentro del propio hotel, no dentro de la habitación. Esa información va a llegar un poco más abajo porque hay que elegir sus habitaciones. Entonces lo que tenemos aquí mismo es el acceso Wi-Fi. Entonces sigamos adelante y cambiemos todos estos también. Entonces esto va a ser estacionamiento gratuito y voy a pausar el video aquí, así que no te molesto con renombrar todas mis carpetas. De acuerdo, ahora que lo he hecho, lo último que tenemos que hacer es cambiar estos iconos. Entonces necesito localizarlos aquí mismo. Por lo que tengo que encontrar mi ladrido libre. Y vamos a ver qué es aquí. Así que simplemente arrástrelo y suéltelo en el lugar del icono anterior y asegúrate de colocarlo en el centro de tu texto. Usa la versión de esquema y sigue adelante. Este es el gimnasio privado, así que aquí está. Asegúrate de que esté justo ahí. Y lo que voy a hacer es medir en realidad. Entonces yo a los 40, necesito tener 40 aquí. Al igual que esto y utiliza la versión de esquema. Siguiente arriba más 12 conserje, arrástrelo y suéltelo y vea 23, 40, use la versión de esquema y Jumpin justo aquí. Estamos en alberca privada. Por lo que está ubicado aquí, está justo aquí. Y esta es realmente la característica ordenada de Adobe XD. Me gusta mucho cómo lo han hecho, porque puedes cambiar fácilmente entre todos estos iconos diferentes en cualquier momento. Entonces un servicio a la habitación como ese. Usa el contorno, asegúrate de que esté en el centro. Y luego finalmente por el ícono de Wi-Fi. Aquí está. Pero primero tengo que seleccionar aquí mi icono. Vamos a comprobarlo. Por lo que icono de recorridos culturales, este va a ser icono de Wi-Fi así. 40. Sólo asegúrate de que esté en medio de eso. Por lo que ahí lo tenemos. Hemos terminado esta sección. Se puede ver lo sencillo y fácil que fue eso. Ahora lo último que voy a hacer es realmente asegurarme de que estos tres de abajo sean 80 de arriba. Entonces hagámoslo ahora. Y si revisamos son 85. Ahora son 80, lo cual es genial. Y algo no se alinea muy bien con los sólidos del icono de parada echa un vistazo rápidamente a eso. Entonces voy a hacer esto con mi estacionamiento gratuito. Por alguna razón no se alinea. Y es mejor arreglar eso ahora, luego más tarde dentro de la etapa de diseño, este conserje. Ahora vamos en realidad, mientras estamos aquí, echa vistazo a estos de abajo. Y hay algunas ligeras alteraciones en ellas. Porque a veces cuando cambias estos iconos va a alterar tu posición apenas ligeramente. Entonces hábitos lácteos, esto ahora está completo y podemos poner estos iconos y ver quizá 100, algo así. Sí, vamos a ver, podemos usar el divisor y posicionarlo para ser 40. Así. Ahí dentro lo tenemos. Este hotel cuenta con sección está hecho. Al igual que así. A continuación vamos a tener un tipo de habitación. Entonces voy a duplicar esta sección, moverla hacia abajo. A ver, quizá puedan posicionarlo para ser 100, así. Y lo voy a llamar como un conjunto, nuestros propios tipos. Ahora me voy a deshacer de estas actividades, pero voy a dejar el divisor dentro. Lo que voy a hacer es usar esos mismos ajustes para las imágenes. Entonces una vez más, dos columnas de ancho, algo así, entonces veríamos podemos tener cinco Sin sombra de frontera, así 55, 10. Y podemos usar ese mismo 5% de obesidad. Y lo que podemos llamar a esto es, por ejemplo, una imagen tipo OEM uno. Yo lo voy a posicionar aquí mismo. Y veamos por la distancia que podemos ir con 40 por ejemplo. Y vamos a seguir adelante rápidamente y cambiar su nombre para que veas que es así. Y ahora sigamos adelante y añadamos algunos textos. Pero por ejemplo, incluso puedo duplicar este, posicionarlo hasta aquí. A ver. Podemos usar no sé por qué estos están todos fuera de servicio. Vamos a revisar aquí mismo. Creo que eso está bien. Entonces tal vez así necesitamos cambiarlo a aquí también. Perdón por eso, pero mejor seguro que lamentarlo. Yo digo, eso está bien. Está bien. Entonces sigamos aquí. Y como dije, vamos a tener un tipo de habitación. Entonces lo primero es lo primero, voy a usar Poppins 24 perno así y asegurarme de que sea gris oscuro. A ver 24. 24 negrita. Está bien, y veamos gris claro. El gris oscuro funciona bien. Llamémoslo pequeño. Y veamos por la distancia que podemos ponerlo en 20. Entonces aquí mismo. Y luego Control D para duplicarlo. Y voy a usar Poppins 18 para esto. Y voy a usar el mismo gris oscuro para mejorar mantener, copiar y pegar este texto. Voy a auto alturarlo y posicionarlo aquí para que baje muy bien con este. Tan cool. Al igual que papá quería privacidad y eso está bien. Y posicionar eso para ser 20 también. Organizémoslo rápidamente tan pequeño cuando dos o abajo en todo tipo. Entonces aquí está. Esto va a ser pequeño en absoluto. Control D para duplicarlo, posicionado justo aquí y la posición de Control D está justo aquí. Esta segunda sala se va a llamar Presidente. Entonces este último término se va a llamar ejecutivo. Al igual que así. Por lo que para el Presidente. Y también vamos a copiar y pegar texto de mi diseño original. No es como esta imagen en tiempo de ejecución. Número dos, también me renombran esto porque va a ser mucho más sencillo más adelante cuando llegues a exportarlos. Y te voy a mostrar eso más adelante cuando lleguemos a la parte exportadora. Entonces ejecutivo, una vez más, cosas que puedes hacer mientras estás diseñando, hazlas porque más adelante se van a apilar muy rápido y Daniel va a estar realmente atascado. Y no sé dónde encontrar el tiempo para terminar todas esas tareas. Entonces qué hacer aquí, aquí mismo están los tipos de habitaciones. Y ahora creo que es el buen momento para guardar este archivo. Así que golpea Control S, o como dije, si lo usaste en la nube, va a ahorrar automáticamente. Entonces, básicamente, una vez que llegue a Guardar, lo que voy a hacer es duplicar esta sección y moverla hacia aquí. Colóquelo hasta aquí. Y voy a llamar a esta habitación son muchos t's como así que cambia esto a una habitación. Sí. Al igual que así. El primero es el aire acondicionado. Y déjenme ir rápido y copiar y pegar todos estos. Esto va a ser cocina. Por lo que estas son obviamente las cosas que se encuentran en la propia habitación. Televisión por cable. Esto va a ser cerradura de seguridad. Y finalmente tenemos microondas. Al igual que así. Entonces ahora voy a pausar el video para poder cambiar el nombre de mis carpetas. Y ahora que lo he hecho, sigamos adelante rápidamente y cambiemos todos estos iconos. Entonces una vez más, los voy a seleccionar y veamos aire acondicionado. Por eso siempre es útil guardar todos estos iconos. Entonces tienes aire acondicionado, puedo arrastrar y soltar contorno. A ver, Estamos en 40 cocina es el siguiente, pero como siempre, me olvidé de seleccionarlo. Por lo que cocina. Y ahí tienes. Es 40 línea directa de arandela de contorno y asegúrate de que esté en el centro con nuestro texto. Al igual que así. Gracias Dawn es televisión por cable. Entonces TV que 40 delineó seguro para bloquear su contorno de corte de pelo y asegurarse de que esté en los datos centralizados. Entonces por fin tenemos este icono de microondas. Una vez más, asegúrate de que esté en el centro y en realidad lo voy a dejar justo aquí. Se puede ver que es 62 palabras tipo de parece que está en el centro de estos, así que sólo la voy a dejar ahí. Por lo que una vez más, sólo rápidamente globo ocular se asegura de que todos estén en el centro de. A atreven líneas de rejilla, que por suerte están aquí. Y los voy a cerrar a todos muy rápidamente. Al igual que así. Y básicamente lo muerde, la siguiente sección va a ser servicios disponibles y básicamente va a ser sólo algún texto básico. Entonces veamos qué podemos copiar. Podemos, por ejemplo, copiar esta sección aquí mismo. Por lo que Control D, médico en están justo aquí y asegúrese de seguir adelante y borrar la calificación por ejemplo. Y en esto, y lo voy a posicionar todo el camino hacia abajo justo por encima de nuestro uniforme de fondo. Asegúrate de que estamos en 100 como si fuéramos como la suciedad. Y cuándo llamar a esto servicios disponibles como suciedad. Y también voy a asegurarme de deshacerme de este divisor. Voy a usar un divisor desde aquí, posicionado aquí. Asegúrate de ponerlo en algún lugar por aquí, por ejemplo, porque esta sección va a ser un poco más larga. Entonces lo que vamos a hacer aquí mismo es, vamos a ver. Podemos usar ese ícono. Primero lo primero, vamos a duplicar esto. Llamémoslo un servicio de bed and breakfast. Veamos Poppins 24 luz, pero voy a mantenerlo auto ancho a esto. Y vamos a ver, esto va a ser Poppins 18 a algún lugar por aquí. A ver. Puedo mantenerlo en esto. Entonces seis, puedo posicionarme aquí y simplemente alrededor mi texto donde estamos para escuchar función cena arriba, conserje, servicio es limitado ahí cómo entonces finalmente, por ejemplo, podemos mantenerlo a los 20. Algo así. Creo que funciona bien. Pero en lugar de Poppins 24, lo voy a cambiar a 18. Entonces hasta que hice gris oscuro. Ahora veamos. Creo que eso funciona bien. Entonces una vez más 20 y lo que voy a hacer aquí es incluir el ícono de la deuda. Entonces veamos dónde está. Si en realidad lo traje, hice ícono del desayuno, lo voy a traer aquí mismo. La posición está justo aquí. Y voy a asegurarme de que estos dos estén a los 40 y se fue a asegurarme de que esto es a los 100. Mi texto simplemente así tuve suficiente espacio para jugar con él? Y una última cosa que voy a hacer es asegurarme de que esto esté delineado. Por lo que icono del desayuno, vamos a llamar a esta sección servicios disponibles. Entonces voy a posicionar esto aquí y bed and breakfast cualitativo así. Voy a hacer un duplicado de la misma. Voy a mover esta parte de abajo hacia abajo. Y vamos a ver. Por ejemplo, puedo asegurarme de que sean 40 a algo como esto. Y lo que puedo hacer es llamar a este servicio todo incluido. Así. Un poco rápido, adelante y copia y pega mi texto en mi escritorio. Por último, voy a mover este divisor hacia abajo y cuándo asegurarme de que sean 40 una vez más. Y eso es básicamente todo para esta sección, simplemente renombrar esto a un servicio todo incluido así. Y puedo cerrar esta sección y seguir adelante. siguiente es el plan de viaje, pero voy a hacer una pausa. Aquí voy a parar el video y podemos continuar en el siguiente video sólo para que pueda organizar las cosas un poco mejor, pero no tenemos demasiada información ahí abajo. Lo que tenemos es el viaje bland y tenemos disponibles excursiones. Contamos con ubicación, precio incluye N política de cancelación. Entonces eso es todo para este video, ahora vamos a pasar al siguiente. 21. Crear alambres: Pasemos ahora con la siguiente sección, que se va a planear viaje. Entonces voy a pegarle a Control D en este. Asegúrate de que estoy a la misma distancia. Entonces en posición 100 aquí abajo y llame a este plan de viaje. Entonces dentro de aquí, y llamémoslo viaje. Y esto básicamente va a ser d uno. Esto va a ser en D dos a 13 por ejemplo. Y vamos a crear un día más 14. Antes de que lo hagamos, me voy a deshacer así de estos dos iconos. Voy a asegurarme de que estos estén a 40 el uno del otro así. Y voy a poner hacer una copia final más para aquí. Por lo que 123. Este va a ser el día 14. Así. Entonces los voy a mover a todos básicamente para estar a 100 de aquí. Así. Y como dije, va a ser uno. Estos van a ser los dos, 13. Y esto va a ser d 14 porque sólo imaginemos que este servicio ha durado 14 días. Puedo avanzar rápidamente y copiar y pegar parte de este texto. Y finalmente una más. Yo lo hice. Ahora vamos a seguir adelante y organizarlos un poco mejor. Por lo que una vez más, asegúrate de que esto sea a los 40. Y estoy usando copia real aquí solo para que no perdamos demasiado tiempo más adelante en el diseño porque la sección wireframing nos va a llevar en realidad la mayoría del tiempo. Entonces ahora que eso está terminado, podemos pasar a las excursiones disponibles. Y para la deuda, vamos a necesitar una sección con iconos. Así que hit Control D. Voy a llamarlo excursiones disponibles. Voy a moverlo todo el camino hasta aquí y asegurarme de que sean 100. Y esto va a ser museos, Cruceros por el Río, recorridos culturales, y paseos en globo. Esto va a ser exploración de la ciudad. Y por último, viajes de camping. Y porque ya viste este proceso unas cuantas veces n ¿Ves lo que he hecho? Voy a reemplazar todos estos iconos y voy a renombrar todas estas carpetas y luego voy a volver. De acuerdo, entonces ahora que lo he hecho, podemos pasar a la siguiente sección. Y la siguiente sección va a ser bastante simple en realidad, sólo va a contener un mapa y una ubicación hotelera. Pero antes de eso, revisemos rápidamente y veamos si nuestro divisor está en 40 aquí. Ver lo es, lo cual es genial. Excursión tan disponible, lo voy a mover todo el camino hasta aquí. Y para este que voy a usar en realidad es esta sección. Tan bueno Control D, porque sólo voy a necesitar algunas cosas de él. O en realidad tal vez incluso importa. Tal vez podamos usar este porque ya tiene una imagen. Sí, hagámoslo. Por lo que tu celular poco más tiempo. Escúchala aquí mismo. Y el siguiente se va a llamar como hotel conjunto. Alcalación. Viento para moverlo hasta aquí. Y si te preguntas cómo va a funcionar todo esto, no te preocupes, una vez que hayamos terminado estas secciones, voy a explicar. Entonces como dijimos, esto es y ubicación hotelera como papá. Y para esto, voy a usar, Vamos a ver, Poppins 24, pero voy a usar un regular. Encontremos en la derecha aquí o alfileres 24, no luz. En realidad. La luz es una especie de buena, Así que se aplica para usar la suciedad. Y lo que voy a hacer es volver a aquí y quitar y DCE 2. Voy a poner esto fuera de un grupo y voy a usar estos y moverlos abajo un holandés. Entonces para nuestro mapa, voy a usar 7, 9 a la semana 3, 0, 3. Entonces es bonito y grande. Y por último, voy a poner este texto a los 40. Era también el divisor. En algún momento esto entonces para nuestros textos, voy a usar este. Simplemente lo voy a estirar hasta aquí, lo que funciona bien. Y por último, simplemente voy a escribir en rojo aquí sobre la ubicación. Y para esto, lo que puedes usar es un plugin. Entonces veamos qué tengo justo aquí. Tengo este plug-in llamado mapas de fantasía. Y lo que puedo hacer es entrar asignaciones de parecido a París. Puedo dar click aquí mismo. Y luego una vez que sea falso París, puedes darle estilo. Para que puedas elegir un mapa como este. Puedes elegir un mapa como este, y puedes acercar el nivel de la ciudad, algo así y golpear Aplicar mapa. Va a funcionar su magia. Y como pueden ver, va a ubicar ese. El problema es que no puedes panear. Entonces tal vez puedas acercar solo un poco más para deshacerte del letrero de París y luego golpear aplicar mapa. Y se va a deshacer del propio París. Por lo que puedo saltar aquí mismo y encontrar mi mapa de ubicación pin. Aquí está. Voy a arrastrarlo y soltarlo aquí mismo. Y voy a llamar a esta imagen de mapa. Mapa de otoño y BG, como quieras llamarlo. Y lo voy a poner en un mapa de calidad grupal. Y voy a llamar a este texto por ejemplo. Y sólo para mantener las cosas organizadas un poco mejor. Y eso es básicamente todo. Las siguientes dos secciones van a ser básicamente las mismas. Van a ser todo sobre el texto. Entonces para ahorrarte un poco más de tiempo, Vamos a copiarlos rápidamente y pegarlos aquí mismo. Y los voy a arrastrar hasta aquí sólo para que no te aburra. Pero básicamente como puedes ver, estas secciones son exactamente las mismas y tienen exactamente el mismo aspecto que todas estas otras. Y sólo vamos a ver, esto no funciona para nosotros. Entonces vamos a cambiar esto a pop es 36 audaz. Por lo que el precio incluye, van a ser cuatro pines, 36 voltios. Así que así. Y vamos a subirlo así. Esto va a ser 36 audaz. Muévelo hacia arriba así. Y vamos a ver. Podemos mover esto a 100 y a 100. Y básicamente estas secciones están terminadas. Como se puede ver. Lo que voy a hacer en realidad es agruparlos a todos. Entonces lo voy a llamar información de viaje, por ejemplo, porque contiene toda la información de nuestro viaje. Entonces sobre nuestro hotel, sobre dónde nos alojamos, sobre los tipos de habitaciones, sobre todo. Por lo que la política de cancelación y sobre hotel y justo debajo. Entonces desde las características del hotel hasta la política de cancelación hit Control G. Y como dije, lo voy a llamar información de viaje. Ahora qué voy a hacer, y si te preguntas cómo vamos a bajar realmente y cómo va a quedar todo eso. En realidad es bastante fácil porque solo vamos a usar grupos de desplazamiento en Adobe XD. Entonces digamos que quiero guardarlo, por ejemplo, de solo ponerlo en un grupo primero. Por lo que este pergamino vertical. Y por supuesto puedes elegir dónde quieres que termine en la parte superior, solo quería terminar en algún lugar por aquí, así que justo encima de mis características de hotel. Y al fondo, quería terminar justo por aquí. Por lo que quiero que la gente vea que son habitaciones y hay estos nombres o las habitaciones, pero también pueden bajar más allá. Y siempre puedes asegurarte de que para extender esto o para estrecharlo o hacer lo que quieras. También me renombran a información de viaje. Entonces si golpeo la vista previa donde escucho y lo arrastro justo aquí, si nos desplazamos hacia abajo, puedes ver que se queda justo ahí. Entonces va a ser una sección bonita y grande. Y la siguiente sección que realmente vamos a diseñar es esta sección aquí mismo a la derecha. Por lo que esta sección, como puedes ver, los usuarios pueden desplazarse fácilmente hacia abajo, navegar fácilmente mientras esta sección se va a quedar en quieto, No va a cambiar y va a mejorar las ventas y masivamente, porque no pueden desplazarse más allá de esta parte, tuvieron que desplazarse por esta parte. Pueden ver esto y luego aumenta el potencial de que realmente reservan el viaje y realmente usen esa característica más en lugar de simplemente omitirla Ir a la página siguiente. Entonces lo que voy a hacer es mover esta información de fondo porque ahora hemos terminado con ella. Y me voy a mover con justo aquí, por ejemplo, y cortar esta página a más o menos por aquí para que podamos pasar a paso más cerca de nosotros. Entonces vamos a ver. A lo mejor puede mover esto a algo como esto. A ver dónde estamos. Por lo que estamos en 95, c 100. Ahora estamos en 150. Entonces ahora si golpeo la vista previa solo para mostrarte, Aquí está. Por lo que el todavía puede ver esta sección aquí mismo. Y pueden interactuar con ella. Pero esto sigue igual y esto se queda puesto. Entonces para eso estábamos diseñando y para eso estábamos apuntando. Una conversión más grande y una estancia más grande en estas secciones y ojalá muchas más anotaciones y muchas más reservas. Entonces eso es todo para este video. En el siguiente video, vamos a volver y diseñar esta sección que va a estar llena de campos en formas. Va a ser bastante tedioso. Entonces lo voy a dejar para el siguiente video en lugar de incluir en este. Y te veré en el próximo. 22. Crear alambres: Ahora sigamos adelante y diseñemos esta barra lateral. Y para ello, voy a usar mi rectángulo y asegurarme de tener seis columnas de ancho, así. También voy a usar esos mismos ajustes. Entonces sin ningún borde y cuándo usar sombra. Por lo que 55 zona, básicamente la misma sombra. Y voy a asegurarme de que estoy 5% en opacidad. Y lo voy a llamar barra lateral BG. También lo voy a poner justo debajo de mi información de viaje, por lo que se queda justo aquí a la derecha. Lo que voy a hacer es reciclar algunos elementos y usarlos alrededor. Entonces lo primero que voy a usar es ese botón grande. Y puedo ir justo aquí, buscar big btn, arrastrarlo y soltarlo aquí mismo. Voy a cerrar esto. Y antes de seguir adelante, voy a usar y precio. Entonces vamos a ver si puedo agarrar este control de precios C. Puedo saltar aquí mismo. Control V, puedo posicionarlo aquí mismo, y puedo saltar dentro de mi carpeta, arrástrelo aquí mismo. Y veamos dónde está ese botón grande aquí está. Y déjalo aquí mismo. Ahora voy a escribir en libro, cambiar esto a 1290. Antes de seguir adelante, veamos rápidamente si vamos por el buen camino. Nosotros somos. Vamos a cambiarlo dentro del estado de horror también libro ahora ir al estado predeterminado. Y estos dos me voy a asegurar que estén en el centro. Entonces primero centrémonos en alinearlos hacia el interior y centrémonos en posicionarlos así. Entonces lo primero que voy a cambiar es la distancia. Entonces vamos a agruparlos en realidad, asegurémonos de que estén en el centro. Botón grande. Asegúrate de que esté en el centro también. Y para ello, Vamos a asegurarnos de que esté 40 abajo. Así que en realidad seleccionemos estos dos rápidos aquí mismo, 1, 2, 3, 4. Y luego haz lo mismo por éste. Así como las muertes. Entonces aquí vamos a tener todos estos campos. Y déjame mostrarte eso muy rápido para que puedas ver aquí mismo. Por lo que tenemos check-in, check-out, el tipo equivocado, servicio para adultos, excursiones y total. Entonces básicamente la misma información que acabamos de diseñar aquí mismo. Por lo que los usuarios simplemente pueden seleccionar de estas ofertas justo aquí a la izquierda. Pueden seleccionar y pueden aplicar esas ofertas aquí a la derecha. Por último, eso va a actualizar el precio en tiempo real. Y luego pueden hacer clic en el botón reservar ahora, y luego pueden pasar a la siguiente página, que va a ser la página de pago, y vamos a diseñar eso a continuación. Entonces lo primero que voy a usar es esto. Entonces voy a usar este precio, por ejemplo, voy a saltar aquí mismo. Haga clic a basado. Y también voy a posicionar eso para estar 40 arriba, así. Y luego lo voy a mover justo por encima de mi precio. Entonces eso se va a llamar excursiones. Y me muevo de abajo hacia arriba porque vamos a cambiar algunos elementos un poco más tarde. Entonces primero lo primero para las excursiones de deuda, lo que queremos hacer es llamar a esto el input vg, por ejemplo. Pero aún mejor, Dejémoslo en desplegable BG porque fue así. Lo primero que voy a cambiar son los anchos de 500, ocho, voy a cambiar que 70 va a ser por la altura. Entonces eso está bien. Y simplemente usemos ese icono de flecha. Entonces veamos, flecha abajo, voy a arrastrarlo y soltarlo en su lugar. ¿ Fue? No lo era. Y arrástralo hasta aquí. Aquí está. Y voy a moverlo airea por aquí porque voy a quitar este signo de dólar. No lo vamos a necesitar. Y voy a asegurarme de que sean 40. Y va a decir todo inclusivo, por ejemplo. Porque las deudas, por ejemplo, la opción que los usuarios han elegido. Y luego me voy a asegurar que esta flecha sea 40 de la derecha. Entonces 1, 2, 3, 4, así. Una vez más, asegúrate de que todos estén en el centro así. Ellos lo son. En una última cosa, voy a seleccionar la barra lateral Y excursión, asegurarme de que estén en el centro. Y por último, asegúrate de que sean 40 de aquí siguiente arriba cuando duplicé, así que Control D y posiciónelo. Como puedes ver, va a ser como ese bicho antes de que sigamos adelante. Lo que necesito aquí arriba es el texto en sí. Entonces voy a usar, por ejemplo, ese Poppins 24. Entonces lo voy a duplicar. Y veamos, asegúrate de que sea, por ejemplo 20. Y voy a asegurarme de que se alinea con mi insumo. Entonces mi bajó en BG, voy a posicionar esto aquí en inclusive, solo los ordené un poco. Esto va a ser, como digo, Poppins 24. Entonces vamos a bajar esto. Poppins 24 luces. Asegúrate de que se alinea y asegúrate de que sea 20, así. Y finalmente mezcla, es este color gris oscuro el cual es todo inclusivo. Y lo vamos a llamar, lo siento, eso deberían ser excursiones. Y esto va a ser museos. Entonces excursiones. Museos, que está bien. Una vez más, solo un chequeo rápido antes de seguir adelante. Eso es genial. Esto son 40, eso está bien. Ahora el servicio es lo que va a ser el próximo. Por lo que una vez más, asegúrate de que estamos a los 40. Esto es servicio. Y lo estoy haciendo porque cuando duplicas Adobe XD lo pone encima. Porque ya conozco mi diseño, ya sé cómo se ve. Voy a ir de abajo hacia arriba. Es mucho más sencillo de esa manera. Entonces servicio. Y aquí vamos a escribir en todo incluido, así. Y luego Control D. Lo voy a poner justo aquí. Se va a decir adultos. Y vamos a escribir en dos así. Y para este, porque queremos que sea la mitad del tamaño de éste, C sólido, podemos ponerlo a ser, así que desplegable BG, podemos ponerlo de dos a cuatro por ejemplo. Por lo que es solo la mitad de la distancia de las entradas originales. El Quizás yo pueda hacer esto. No hay cambios. Probémoslo ahora. Ahí está, 1, 2, 3, 4. Ahí lo tenemos. Entonces tenemos adultos a Controlar D. Y yo voy a mover esto, llámalo niños. Esto va a ser adultos así. Entonces esto van a ser niños. Y digamos uno por ejemplo. Por lo que sólo un niño viene junto con sus padres. Entonces, alinémoslo con éste y toda su línea esto con éste. Por lo que tenemos la distancia de 60. Entonces esta es la distancia entre nuestras canaletas. Como ya expliqué anteriormente. Una vez más, estamos a los 40 aquí, así que está bien. Voy a duplicar este, moverlo a la parte superior así. Posiciónelo para mí. Claro, son 40 y esto va a ser en casa tipo así. Y un tipo de habitación va a ser presidente sobre, por ejemplo. Porque estas personas necesitan su habitación porque viajan con niños. Entonces con un niño, en este caso, el tipo de habitación. Por último, lo que queremos incluir aquí mismo es ese icono más. Entonces vamos a buscarlo. Creo que se llama cerrar. Sí, lo es. Simplemente arrástralo y suéltalo aquí. Yo lo voy a cerrar. Y luego me voy a ubicar justo aquí. Entonces un tipo de habitación aquí lo es. Cierra icono, póngalo dentro y asegúrate de que se alinea con esto. Un texto tipo domo así. Y también asegúrate de que vaya todo el camino a la derecha, así. Como dije, tenemos el punto de tapping en el interior. Tan cerca icono porque está girado, nos da esta ilusión de que tiene punto de tapping. Entonces básicamente lo adeuda. Ahora lo único que nos queda hacer es crear esa reserva arriba. Por lo que para el check-in y check-out, finalmente, vamos a crear dat. Entonces para hacer eso, voy a duplicar uno de estos. Entonces usemos a nuestros adultos, por ejemplo, porque vamos a tener dos. Y vamos a subirlo así. Al igual que así. Y veamos qué puedo cambiar. Por ejemplo, puedo eliminar esto. Puedo saltar dentro de esto. Y en realidad voy a cambiar eso más adelante e incluir diferentes animaciones dentro. Pero por ahora. Vamos a incluirlo rápidamente, así que voy a cambiar la altura a 118, así. Y luego lo voy a mover 40. Y vamos a ver, estamos a la distancia de 18 de lo alto. Por lo que tal vez podamos incluso aumentar el tamaño de este fondo general. O podemos disminuir estas distancias para ser 20, o podemos jugar con ella un poco más tarde. Pero por ahora, dejémoslo y veamos dónde estamos. Entonces vamos a llamar a esto revisando mi DAT. Y dentro del check-in, en realidad voy a deshacerme de la flecha desplegable. Voy a llamar a esto, revisarlo. Control D. Voy a posicionar este conocido y por ejemplo, el 22 de marzo. Entonces cuando él cuando quiera abril 2021. Y también voy a cambiar esto a gris oscuro sólo para diferenciarlos un poco más. Y démosles una distancia de 20, por ejemplo. Y reservarlos en así. Y asegúrate de que seamos 40 de este filo, que somos. Entonces ese es nuestro check-in. Y también tenemos que diseñar un checkout. Entonces voy a duplicarlo rápidamente, asegurarme de que nuestra encienda así. Esto se va a revisar. Y digamos que es 28 de abril, por ejemplo, y llamarlo un día. Voy a diseñar un calendario más tarde y solo te mostraré rápidamente cómo lo hice. Pero antes de que lo hagamos, lo voy a dejar rápidamente aquí. Entonces básicamente esto determina cuánto tiempo la gente se va a quedar aquí realmente. Entonces básicamente, cuanto más tiempo se quede la gente dentro del hotel, obviamente, cuanto mayor sea el precio va a ser de cuatro a la habitación misma. Entonces, por lo tanto, cuando actualicen esta información, se va a actualizar el precio abajo y también la cantidad de personas, lo siento, el número de personas que vienen a esta habitación va a determinar obviamente, cuántas camas hacen necesitan, tipos de habitación o lo grande que es la habitación para empezar? Excursiones. Si no tienen ninguna excursión, Dan, pueden elegir ninguna, por ejemplo, y el precio va a bajar. Se obtiene la idea oral. Entonces una última cosa que quiero hacer es aumentar el tamaño de esta barra lateral BG en realidad. Entonces lo que voy a hacer es usar todos mis elementos. Ponlos aquí, 1, 2, 3, 4 abajo. Y luego voy a alinear mi barra lateral BG así. Usa el botón, ponlo 40 abajo y luego baje esto. Porque no sé, como Matt, puedes usar tapete si quieres. Ahora por fin, eso es que se completó. Voy a agruparlos a todos, llámalo barra lateral. Y obviamente vamos a crear esto más adelante para ser menús desplegables y para ser todo tipo de cosas diferentes. Pero por ahora, dejémoslo como dicho dentro porque lo vamos a mantener como está. Una última cosa que quiero hacer es alinearlo con esto. Por lo que nos gustaría características del hotel. Entonces podemos entonces alinear esto con esta sección aquí mismo, para que ambos se queden exactamente como deberían. Entonces cuando golpee la vista previa y cuando salte aquí mismo, se puede ver que esto se va a quedar puesto por aquí. Y obviamente los desarrolladores pueden arreglarlo en su lugar. Así que imagínense que está justo aquí y toda esta sección de la izquierda se va a desplazar hacia abajo y los usuarios obviamente pueden ver toda esta información antes de que golpeen el botón book now. Entonces vamos a cerrar eso. Y la sección que me olvidé de traer dentro de aquí es si un show te. Entonces vamos a tener hoteles similares, que no incluimos aquí dentro de esta sección, dentro de la alambrada de papel. El apartado hotelero similar está básicamente ahí. Tan solo para darte algunas otras opciones porque esta agencia está trabajando con todos estos diferentes hoteles. Entonces obviamente no les importa realmente. Tan pronto como reserve algo. Ellos, de verdad, están recuperando su dinero para que realmente no les importa si su libro este hotel o cualquier otro hotel. Obviamente, cuanto más caro sea el hotel, más dinero van a conseguir. Pero son guarderías obviamente para que usted reserve cualquier cosa en lugar de nada en absoluto. Entonces lo que voy a hacer aquí mismo es saltar aquí mismo, golpear Control C. Puedo copiar esta sección. Déjenme cerrar todas estas cosas. Control V, mueve esto aquí mismo. Y voy a asegurarme de que esto es a los 150. De esto. Voy a ponerlo justo debajo de mi barra lateral. Voy a escribir en hoteles similares así. Y solo sin dos t y solo una. Y voy a copiar mi texto en. Y lo que vamos a hacer aquí mismo es básicamente usar los mismos para la ubicación. Tan los mismos que aquí mismo para estas ciudades. Y usaría Control C para copiar uno de estos. Saltando justo aquí, golpea Control V. Y veamos, a partir de ahí podemos pasar a ser 100 por ejemplo, así. Y este va a ser Hotel. Y obviamente, voy a cambiarlo un poco porque sólo quiero incluir tres hoteles diferentes por ejemplo. Entonces vamos a extender esto hasta aquí. Y veamos que podemos, por ejemplo, vamos a ver, digamos que quiero moverme en estos días. Por lo que en estos días, todo el camino hasta aquí, por ejemplo, ser de 10 píxeles porque toda esta información anterior son de 10 píxeles también. Y entonces porque esto está en una pila, simplemente puedo extenderlo para que esté todo el camino hasta aquí. Y entonces puedo moverme en mi divisor en la parte inferior para tener el mismo ancho que éste y hacer lo mismo para los divisores superiores o algo así. Y obviamente porque voy a necesitar incluir un poco más de información, lo que voy a hacer en realidad es en coludio una pila para toda esta sección. Entonces vamos a pasar a aquí. Y toda esta sección va a ser la pila. Entonces lo que voy a hacer ahora es realmente usar esa información para la dirección. Entonces en este, realidad lo voy a copiar. Así que golpea Control C. Y voy a saltar aquí mismo dentro de mi pila y ponerlo justo arriba aquí. Entonces Control V, lo voy a poner justo aquí. Voy a asegurarme de que esté alineado a la izquierda. Y veamos, quizá pueda hacer que sean 20. Y luego ponlo aquí y luego asegúrate de que estos dos sean 20, como puedes ver, porque estamos en una pila, todo se está escalando realmente bien. Entonces voy a asegurarme de incluir esta información y sólo voy a asegurarme de que sea 18. Voy a cortarlo a auto altura y voy a traerlo de vuelta a algún lugar por aquí. Por lo que corta nuestros textos realmente muy bien aquí. Y luego lo voy a bajar 10 píxeles más. Entonces tenemos mucho más espacio aquí mismo. Voy a copiar el nombre del hotel. 24 Días. Digamos que esto va a ser en realidad 12 días así. Ahora porque eso está terminado, aumentemos en el espacio como papá. Y finalmente desde veamos algo diferente. Entonces en 1960, por ejemplo, para este caso en particular, y esto va a ser precio. Eso es todo para nuestro hotel. Ahora hagamos dos copias más. Entonces Control D y este va a ser Hotel. Y finalmente hotel ahí dentro también. E incluso podemos darles nombres si queremos resolver el hotel uno, hotel dos, y finalmente el hotel tres. Grupo todos ellos controlan G. Esto van a ser hoteles. Y por último, ahora podemos traer este fondo para adentro y llevarlo a 150. Oscuro como aquí mismo. Cierra nuestra mesa de trabajo todo el camino hasta el fondo del pie de página. Entonces todo el camino hasta aquí y allá lo tenemos. Esta información en esta página y secciones se completan. Como puedes ver, a veces te va a llevar un poco de tiempo completar. A veces va a ser mucho más sencillo de completar. Pero al usar estas técnicas avanzadas o como un grupo de desplazamiento y como Puntos de desplazamiento y un ancho, todos estos elementos fijos, como puedes ver, vas a conseguir realmente bonita página, sobre todo si ya sabes cómo tu diseño se va a quedar así, cómo se va a quedar todo esto con solo unas animaciones. Ahora puedes seguir adelante y compartir esto con tu cliente. Y simplemente pueden desplazarse a través con sus teclas de flecha en su teclado a la izquierda y a la derecha. Y te pueden proporcionar algunos primeros y básicos comentarios sobre este diseño, sobre estos colores, sobre la topografía, sobre los tamaños, ¿les gusta el estilo de estos iconos? Poco como el estilo de estos fondos, sombras, y todos estos elementos adicionales que pueden proporcionar una retroalimentación. Y te pueden decir: ¿Les gusta o no? Entonces eso es todo para este video y esta página. Por último, en el siguiente video, vamos a pasar a esta última página, que va a ser nuestra página de pago. Y esperemos que lo completemos en un solo video. Entonces te veré ahí. 23. Crear alambres: Vamos ahora más un extremo diseñar nuestros pagos verdes, que va a ser nuestra pantalla final para nuestro wireframe. Simplemente voy a Hall mi tecla alt y arrastrar para duplicarla. Voy a llamarlo un pago. Y lo primero que voy a hacer es realmente eliminar esto y eliminar esto, eliminar todas estas secciones excepto la sección inferior. Entonces lo mismo que hicimos para todas nuestras páginas y lo voy a dejar aquí por ahora. A continuación, voy a agruparlo hasta aquí, Control G y llamarlo Watson doloroso. Y solo déjalo así por ahora. Ahora, lo que vamos a hacer aquí mismo consiste en tres partes. Entonces detalles del viaje, que va a enumerar todos los detalles que los usuarios han reservado aquí mismo. Va a consistir en el pago. Quiénes son usuarios que van a poder elegir su método de pago. Y finalmente, va a estar fuera de conformación, que va a estar fuera de pantalla de confirmación. Y van a poder confirmar su elección. Entonces lo primero que vamos a diseñar es la tarjeta que va a tener o toda esa información. Entonces vamos a ver. Podemos ponerlo en algún lugar alrededor de 100 píxeles. Entonces básicamente lo mismo que el ancho aquí. Entonces solo para mantener la consistencia, voy a copiar y pegar esta sección y luego alinear esta aserción. Por lo que ahí lo tenemos aproximadamente alrededor de 100. Y voy a asegurarme y descartar muertos. Entonces llamémoslo un pago. Puede ser g. lo voy a mover aquí mismo. Y como vemos, es aproximadamente alrededor de 100, es 774 de altura así. Y podemos usar toda la misma información. Entonces cinco sin sombra, 55, 10, finalmente 54, la opacidad. A continuación, voy a escribir tres detalles así. Y lo voy a cambiar aquí mismo. En primer lugar, voy a elegir, veamos detalles del viaje. Puedo usar Poppins 36 negrita por ejemplo, por eso. Y lo voy a alinear así y así. Y luego me voy a mover a los 40 abajo. Entonces 1, 2, 3, 4. Y también lo voy a mover para la a de izquierda a derecha. Entonces 1, 2, 3, 4. A continuación, lo voy a duplicar. Coloca este justo aquí. Voy a llamarlo pago así. Y debido a que tenemos 12 columnas, vamos a asegurarnos de que esto sea así. Por lo que esto ocupa cuatro columnas. Básicamente, este pago va a ocupar cuatro columnas n. Finalmente, si lo duplicamos una conformación más. Esto también va a tomar cuatro columnas. Entonces 1, 2, 3, y 4. Ahora Embayment de confirmación, vamos a bajarlo a un gris claro. Y también vamos a organizar estas cosas un poco mejor así y vamos a bajar más a menudo así. Debido a que los detalles del viaje es el que se selecciona, pago va a venir a continuación y finalmente, la confirmación. Entonces usemos la información de nuestra tarjeta de hotel. Entonces éste, lo voy a cerrar, posicionarlo aquí mismo. Asegúrate de que esté en algún lugar por aquí. Y veamos, quizá pueda moverlo para que lo veamos. No lo sé. Estoy pensando en algo así como 80. Creo que eso va a estar bien. Entonces 12345678 de estos, eso está bien. Vamos a alinear rápidamente parte de esta información y rápidamente deshacernos de algunos de ellos. Por lo que tenemos el hotel, tenemos un destino, tenemos la calificación, tenemos la imagen del hotel. Déjame moverlo hacia abajo así. Pero aquí vamos a cambiar todos estos otros elementos. Entonces, en primer lugar, vamos a incluir información como personas, por ejemplo, cuántas personas hay dentro de un, cuántas personas están realmente reservando este viaje? Entonces sigamos adelante rápidamente y desagrupemos esta información. Entonces voy a dejar esto, pero me voy a deshacer de esto. Entonces para DAT, usemos algo así como dos adultos más un niño. Y también voy a dar clic aquí para poder moverlo así. Podía controlar D y veamos, quizá 20. Pero primero, cambiémoslo a 24. Y vamos a ver, podemos hacer esto más oscuro, puedo hacer esto más ligero, sólo para diferenciarlo un poco. Y vamos a ver, puedo mover esto a ser 20. Por algunas razones. A veces me da estos medios pixeles. Entonces no sé por qué está haciendo eso. Entonces vamos a ver. Puedo mover esto para que sea tan temprano. Creo que va a funcionar bien. Y entonces podemos mover estos tramos para ser 40 abajo. Y entonces podemos mover esto para estar en el centro. A ver. Puedo usar esto y puedo escribir en total. Y vamos a comprobarlo así. Puedo ponerlo en una pila, puedo usar una pila como esta. Y puedo asegurarme de que esté en medio. Entonces 26 y son 40 de aquí, son 56 de aquí, veamos, 41, así que son 40 abajo, pero 27 de aquí. Entonces usemos esta posición aquí mismo. Dejemos estos iconos de dónde están. Y podemos, por ejemplo, deshacernos de esto. Y luego puede poner esto justo aquí, 1, 2, 3, 4, 5, 6. Entonces es básicamente exactamente lo mismo que éste. Simplemente voy a extenderme. dos aquí y esta es la belleza de estos diseños porque son bastante simples de cambiar. Son bastante simples de trabajar. Y vamos a teclear a la gente aquí mismo. Y voy a agrupar esto, llamarlo gente. Entonces voy a usar Control D porque vamos a tener cuatro de ellos. Vamos a alele una columna vacía y vamos directo a aquí por ejemplo, y recoger esto. Creo que funciona bien. Entonces esto es de 18 a 24, lo cual está bien. Esto va a decir de tipo equivocado. Entonces no tipees. Y va a salvar cuarto de presidente. Entonces básicamente, lo que sea que hayamos seleccionado aquí mismo en la barra lateral, simplemente vamos a asegurarnos de confirmar aquí mismo en la pantalla del pago. Entonces voy a duplicar esto, asegurarme de que esté justo aquí. Por lo que tengo 1 columna vacía. Esto va a ser servicio. Y el servicio va a ser todo incluido. Profundidad. Y por último, vamos a tener uno más aquí mismo. Y vamos a llamar a esto excursiones. Ahora, sólo voy a teclear. Sí. Pero puedes hablar con tu cliente si quieren excursiones personalizadas aquí mismo. Entonces por ejemplo, museos, senderismo, turismo. Entonces todas esas cosas con tres puntos al final por ejemplo. Entonces que corte aquí mismo a los 60 de la derecha. Solo estoy pensando que sí es suficiente para este apartado. Y creo que se va a poner de pie bastante bien. Entonces ahora que tenemos toda esta información, lo que voy a hacer es básicamente usar esto. Por lo que tenemos esta tarjeta de hotel. Voy a saltar aquí mismo y usar mi botón grande y arrastrarlo y soltarlo en su lugar. Voy a cerrar esto, volver a mi panel de capas y lo voy a posicionar aquí mismo. Asegúrate de que esté en el centro así. Y veamos, quizá pueda hacerlo y estar a los 14 abajo. Entonces, primero posicionémoslo así. Entonces 1, 2, 3, 4. Lo que tenemos justo aquí es 94, que básicamente está bien. A lo mejor sería tenerlo a los 100, pero creo que está bien así. A lo mejor podemos cortar a esta tarjeta a seis píxeles tal vez. Entonces vamos a ver, estamos en 39 uno. Entonces no lo sé. A lo mejor, pero estamos a los 40 aquí. Entonces dejémoslo así y no juguemos demasiado con él porque esta es básicamente la sección de pago. Entonces vamos a tener detalles del hotel y luego vamos a tener información de la tarjeta. Entonces cambiemos primero este botón para continuar. Tomó el pago porque el pago es la pantalla, la sección de pantalla que vamos a diseñar a continuación. Por lo que seguir pagando. Y lo que voy a hacer es básicamente duplicar este botón. Voy a agrupar a estos dos. Voy a llamarlo detalles de hotel. Al igual que la deuda. Y básicamente lo que voy a hacer es que voy a ocultar eso. Y voy a diseñar la información de la tarjeta o más tarde. Pero antes de un ocultarlo, sólo quiero dibujar rápidamente Indias que son lineamientos. Porque básicamente quiero mantener la consistencia de todos estos elementos y quiero que todos estos elementos estén en este estadio como un derecho aquí. Por lo que detalles del hotel, ahora puedo simplemente ocultarlos. Y tenemos este botón el cual se va a escribir en paga ahora, Por alguna razón está molestando, así que vamos a comprobarlo. No sé por qué. Sí lo hace. No sé realmente por qué no se está mostrando. Como pueden ver, aquí tenemos un bicho. Entonces cuando cambié a flotar, se puede ver que nada está cambiando. Entonces déjame guardar rápidamente mi documento y volver a él porque obviamente hay algún tipo de error con un Adobe XD. Entonces o tal vez estaba cambiando esto. Entonces vamos a comprobarlo. Sí, estaba cambiando este botón para que no fuera un bicho. Entonces vamos a traer esto y se fue a la escritura están aquí, seguir pagando. Y veamos si aquí se quedó igual. Sí, lo hizo. Entonces en realidad voy a bajar la opacidad pero esconderla para que no lo muestre todo aquí. Ahora voy a escribir en paga. Entonces ahora es bueno y a veces estas cosas pueden suceder y vas a notar que más adelante, una vez que realmente lleguemos a animar etapas de nuestro diseño. Entonces va a ser bastante complicado navegar por tu camino, pero simplemente vamos a ocultar todos estos elementos. Por lo que solo puedes imaginar que los usuarios van a hacer clic en pago. Van a venir a esta pantalla. Entonces permítanme incluso indicar eso aquí. Con esto, voy a esconder esto. Entonces aquí estamos en la pantalla de pago. De lo que necesitamos pantalla independiente son algunas opciones de tarjeta. Entonces usemos estos. Y cuándo usar este servicio, por ejemplo, porque es bonito y blanco. Y vamos a traerlo aquí mismo. Control V. Lo voy a colocar en algún lugar por aquí, son más o menos así que tenemos cuatro columnas de ancho, por ejemplo. Hagámoslo. Sí, Somos cuatro columnas de ancho. Entonces voy a decir nombre de carpeta actual. Y ahora usemos algún nombre aleatorio como JSON miles y va a ser nombre antiguo Control D. Voy a posicionar este aquí mismo, pero antes de hacerlo, soy lo que debo quitar la flecha desplegable porque no necesitamos ella. Y en lugar de BG desplegable, esto va a ser input vg porque va a ser InputField en su lugar. Al igual que así. Y este va a ser el número de tarjeta. Por lo que número de tarjeta. Y déjame rápidamente. Copia y pega aquí mi número de auto. Entonces aquí está. Ahora voy a duplicar esta una vez más y asegurarme de que estoy en, vamos a ver, creo que 40 va a estar bastante bien. Entonces veamos, sí, 40. Mantengamos la misma consistencia así. Entonces esta va a ser fecha de caducidad como esa y cuándo ser algo así como 12 meses de 2025. Piensa que eso es bueno. Entonces fechas de caducidad, voy a moverlo abajo por debajo de mi número de auto y finalmente mover este de abajo hacia aquí. Y esto va a ser C VC, que es que retroceda su código. Entonces código CVC. Y vamos a dar algún número aleatorio como 1, 2, 3. Y por último, lo que necesitamos aquí mismo es la opción para que paguen con PayPal, por ejemplo. Así que saltemos rápidamente por dentro, duplicemos esto, y dejémoslo más con aquí mismo. Y lo que voy a hacer es en realidad usarlos todos. Y simplemente se asegura de que estén en el centro así. Y finalmente la muerte dx, que lo duplicamos. Voy a posicionarlo bien. Por lo tanto ahora voy a asegurarme de que sea a los 18. Es esto o bien pagar con PayPal. Asegúrate de que esté centrado alinear, asegúrate de que sea así. Y voy a asegurarme de que esté en la línea. Son 62, pero realmente no importa porque podemos bajarlo más tarde o podemos aumentar el tamaño de ellos para que puedas hacer lo que quieras, pero solo voy a mantenerlo así. Entonces vamos a agruparlos a todos, derribarlos. Voy a llamar a esta corriente para mación así. Y ahora el siguiente paso para nosotros es la conformación. Entonces la conformación va a ser realmente bastante simple. Entonces sólo va a tener dos textos y va a tener uno de estos iconos, pero va a contener dos botones diferentes. Entonces voy a hacer una copia. Una vez más, asegúrate de traer mi botón dentro. Cambia lugares así. Toca dos veces para bajar a 0. Este va a ser nuestro gran botón y en realidad vamos a cambiarlo un poco y hacer otra copia. Pero antes de que lo hagamos, nos ocuparemos rápidamente de este apartado. Entonces lo que voy a necesitar es que tu viaje se ha reservado texto. Por lo que es débilmente escrito. Por lo que su viaje se ha reservado así. Y voy a asegurarme de que sean 36 audaz. En algún momento que lo voy a posicionar en el centro. Y eso, y por supuesto te puedes imaginar que esta es la pantalla de confirmación. Por lo que en el centro, tu viaje ha sido reservado Control D. Sigamos hacia abajo y usemos esto para ser 18. Voy a dejar caer algún texto, asegurarme de que sea gris. Ahora veamos. Lo que puedo hacer es por ejemplo, mezcla de que son 40. Así, asegúrate de que esté en un centro, esto está en un centro como ese. Y voy a asegurarme de que esté en algún lugar por aquí. Y ahora vamos a incluir rápidamente ese ícono. Por lo que el ícono que quiero usar es det de un globo. Entonces déjame encontrarlo rápidamente aquí mismo en este ícono de viajero tan mundial. Entonces voy a posicionarme y me atrevo seguro que está en el centro. Utilice la versión de esquema. Y veamos, quizá pueda estar a los 80, en algún lugar por aquí. Y vamos rápidamente a configurar esto hasta aquí para que tengamos suficiente espacio para que lo básicamente lo para esta sección, lo único que nos queda hacer es diseñar estos botones. Por lo que voy a incluir un icono en su interior. Pero antes de hacerlo, quiero asegurarme de cambiar esto para alinear a la izquierda. Voy a escribir y descargar recibido. Porque van a poder descargar recibir obviamente. Y voy a escribir en el icono PDF, arrastrarlo y soltarlo en su lugar. Entonces lo voy a posicionar para estar dentro así. Selecciónelo y este lado y estos dos, el centro es. Entonces una vez más, en realidad voy a mezclarlo para ponerlo bien así. Por lo que 1234. A ver si eso es lo suficientemente ancho o también. A ver, porque todo esto demasiado bueno para estar en el centro. Creemos que eso se ve bien. Entonces lo que voy a hacer es golpear Control C para ambos, saltar a mi estado de horror, Control V, voy a eliminar pago ahora. Y para estos dos, simplemente me voy a dar la vuelta y represa a blanco así. Entonces vamos a volver al estado por defecto. Y en realidad voy a hacer una copia de la misma, posicionarla aquí mismo. Y en este ejemplar vamos a escribirle de nuevo. Por lo que los usuarios van a poder saltar atrás de este botón, icono de casa, droga y reemplazar en este. Al igual que así. Voy a asegurarme de que estoy a los 40, que básicamente soy. Pero vamos a comprobarlo una vez más así. Y voy a cerrar esto. Selecciona ambos, y asegúrate de que estoy en un centro de mi botón. Al igual no son simplemente ponerlos en un grupo y asegurarse de que estén en el centro en grupo ese grupo, y simplemente presione Control C para copiarlos. Saltado al estado de terror Control V. Voy a borrar estos dos, traer estos dos y asegurarme de que sean blancos como. Entonces. Vuelve al estado predeterminado anterior, lo tenemos. Entonces lo último que debemos hacer es agrupar esta información a, para recién crear junto a nuestros iconos y al lado de nuestros dos botones. Por lo que ahí lo tenemos. Este va a ser el texto para una organización más fácil, obviamente sólidos y agruparlos y llamar así a esta conformación. Voy a bajarlo a 0 y cuándo traer esto de vuelta 100, lo cual está bien, y esto va a ser 0. Voy a traer esto de vuelta y traerlo hasta 100 detalles de viaje. Se lo voy a poner a negro y conformación a este gris claro. Lo último que quiero hacer en realidad es agrupar todo esto. Entonces voy a llamarlo simplemente pago. Y vamos a traer mi información de fondo. Y veamos dónde estamos ahí mismo. Entonces 1, 2, 3, 4 como llevar a 150, lo cual está bien. Y vamos a cerrar nuestro, nuestro tablero finalmente, para terminar esta página, obviamente, más adelante, voy a animar esta sección y voy a asegurarme de que estas animaciones sean agradables y suaves como viste en el primer video de la introducción de esta clase. Entonces básicamente vamos a animar en tabulador entre todos estos diferentes estados. Pero básicamente eso es todo para la sección wireframing. Como dije, es bastante largo para este proyecto en particular porque tenemos un montón de estos elementos en esta página y en esta página. Entonces por eso nos tomó tanto tiempo crear eso. En el siguiente video, en realidad vamos a empezar con el diseño en sí, vamos a empezar con y la navegación porque es bastante complejo en este proyecto, como lo es todo con estos otros elementos. Vamos a empezar con ello. Y luego después de terminarlo, vamos a pasar al diseño de todas estas otras secciones. Y les voy a mostrar algunas interacciones realmente complejas e interesantes. Entonces te veré ahí. 24. Adobe Xd Bugs: Adobe XD tiene sus errores aquí y allá, pero el equipo está trabajando duro con las actualizaciones regulares. Están haciendo actualizaciones al software cada mes. A veces esas actualizaciones son solo algunas correcciones de errores menores, pero a veces hay algunas actualizaciones de revisión importantes como lo viste en, como lo vas a ver realmente en medio de esta clase cuando actualizaron la interfaz de usuario. Entonces pasamos de ese menú de hamburguesas al menú superior como su cabeza en un Mac durante años, básicamente, a veces vas a ver algunos fallos y los vas a ver a lo largo de esta clase. Pero sólo entiende que algunas de esas fallas están de mi lado porque estoy usando software de grabación encima de Adobe XD. Estoy usando dos ventanas de Adobe XD al mismo tiempo, ambos archivos son enormes. Estoy usando procesamiento de audio para este micrófono. Por lo que es un proceso naturalmente al video. Entonces, por tanto, todas esas diferentes opciones están haciendo un esfuerzo en mi máquina. Y por lo tanto, van a ver algunos bichos aquí y allá. Cuando se trata de errores en tu máquina, no deberías ver ningún error siempre y cuando actualices Adobe XD regularmente. Así que dondequiera que veas que estas actualizaciones están disponibles, asegúrate de actualizarlo y asegúrate de tenerlo para estar en la última versión. Por lo tanto, hay una buena posibilidad y una buena probabilidad de que vas a evitar estos bichos. Pero como cualquier otro software por ahí y no sólo software de Adobe o cualquier otro software. Van a ser algunos bichos aquí y allá. Pero de todos modos, Adobe XD, en mi opinión, sigue siendo una de las mejores herramientas de su clase, sobre todo para el diseño de UX, porque tienes todas estas diferentes opciones en una sola herramienta. Tan pocos bugs aquí y allá no van a determinar la parte posterior de XD y todas sus características y funcionalidad. Entonces, por tanto, solo quería hacerte saber que vas a ver algunos bugs aquí y allá, sobre todo con el ahorro, sobre todo con la entrada de datos y sobre todo con textos. Por ejemplo, vas a ver algunos errores en esta clase con, por ejemplo, un cambio de nombre de carpeta o un cambio de nombre de estructura de carpetas, copiando aquí y allá. Pero intenté en la edición arreglar todos esos errores. Entonces no los vas a ver tanto como probablemente lo harías si estás aquí conmigo y trabajando conmigo en este proyecto directamente. También en algunos casos estoy cambiando de opinión. Entonces, como diseñadores, estamos tratando siempre de conseguir la mejor solución posible para nuestro proyecto. Y en este caso, estoy cambiando de opinión sobre la UX pocas veces. Entonces, por lo tanto, estoy haciendo algunos cambios y por lo tanto XD está tratando de mantenerse al día conmigo todo el tiempo. Entonces sólo ten en cuenta eso. No vas a ver eso mucho. Pero yo como diseñador y como creador de contenidos, siempre trato de esforzarme por la perfección, lo cual es básicamente imposible, pero estoy haciendo lo mejor que puedo aquí para que esto sea tan fácil y tan agradable para ustedes chicos que están viendo como posible. Para que no veas estos errores, no ves estos fallos y no ves estas poses y errores de Adobe XD. Entonces solo quería que supieras. Y con todo eso dicho, volvamos al diseño y empecemos a crear diseño en Adobe XD. 25. Crear la navegación: Muy bien, ahora que finalmente se completan las tramas alambradas, Pasemos ahora al diseño. Y antes de que realmente pasemos al diseño, hay una característica clave que tenemos que diseñar, que es la navegación, porque este proyecto va a ser un poco complejo en cuanto a las navegaciones y en cuanto a las animaciones. Nada demasiado loco, pero requiere muchotrabajo adicional en lugarde trabajo adicional en lugar solo estas navegaciones básicas que te van a llevar de página a página. Y esto va a contener un desplegable separado. Entonces lo primero que hay que empezar es que solo voy a usar esta página de héroes aquí mismo. Y en realidad lo voy a copiar y moverlo a este lado. Entonces para empezar, simplemente voy a seleccionar mantener mi tecla alt como lo hicimos hasta ahora, y simplemente duplicarla y posicionarla en algún lugar por aquí. Ahora porque más adelante vamos a tener un diseño receptivo también. Por eso lo posiciono aquí. Por lo que se puede imaginar que vamos a tener estos tres aquí mismo. Y si también tenemos suficiente espacio para el diseño responsive, en adelante, si lo deseas, puedes diseñar una experiencia móvil aquí mismo para la aplicación móvil, por ejemplo, si eso es algo en lo que estás trabajando. Pero como dije para este video, vamos a enfocarnos estrictamente en la navegación porque va a ser un poco compleja. Entonces homepage, voy a escribir en InDesign solo para que sepamos que este es el diseño real. Entonces lo que haríamos primero es que lo voy a abrir. Y dentro de la sección superior tenemos la imagen de héroe. Y puedo empezar con traer imágenes. Y sólo para que todo esto destaque realmente bien en, eso es lo que en realidad voy a hacer. Por lo que preparé todas estas diferentes imágenes para la sección de héroes y así sucesivamente. Entonces lo que tengo aquí mismo es la primera imagen. Entonces déjame arrastrarlo y soltarlo dentro de esta imagen. Entonces lo voy a llamar héroe imagen número uno por ejemplo. Voy a duplicarlo dos veces. Entonces este va a ser el número 1, éste va a ser el número dos, y éste va a ser el número tres. Entonces voy a bajar la opacidad de este primero, pasar a la segunda y localizar mi segunda imagen. Entonces déjame ver. Esta es mi segunda imagen, que es la imagen de París. Pero lamentablemente hizo lo mismo una vez más. Entonces vamos a esconder rápidamente este. Y luego arrastra y suelta mi imagen aquí mismo a esta segunda, así. Por lo que este va a ser el número 2. Una forma de bajar a la obesidad escondida n para el número tres, que va a ser en Pekín. Voy a arrastrarlo y soltarlo aquí mismo. Entonces ahora que tenemos todas nuestras imágenes, las voy a mostrar así. Entonces, vamos a ver, esto es París. No sé por qué hace eso, pero llevemos esto va a ser toda gada, París, y Pekín. Entonces esas tres imágenes. Ahora, antes de que sigamos adelante, lo que necesito crear es algo así como. Un borrón. Entonces lo que voy a hacer en realidad es duplicar una de estas imágenes, Control D. Y lo voy a llamar el nav primario y desenfocar así. Entonces lo que voy a hacer es usar un color. Por ejemplo, éste, veamos. Por lo que 300, 300, 300. Creo que eso funciona bien. Y voy a incluir el desenfoque de fondo n por la cantidad que voy a usar 25. Aquí, voy a usar 50. Tan un valor bastante grande. Y aquí voy a usar 65 así. Y voy a mantener la obesidad en 100. Por lo que se puede ver que estos están destacando realmente bien. Y lo que vamos a hacer ahora es básicamente imagen de héroe va a bajar de todos modos. Entonces vamos a básicamente sólo mover a este héroe, Hero Textos y hacia abajo. Vamos a mover flechas y abajo, así. Y nos vamos a quedar con sólo este desenfoque. Por lo que la navegación primaria borra. Ahora lo siguiente que vamos a hacer es trabajar con nuestro nav primario. Por lo que tenemos nuestro principal nav y por debajo de los destinos vamos a crear un selector. Entonces voy a usar un rectángulo y arrastrar un bonito rectángulo grande como este. Entonces va a ser altura de dos. No va a contener frontera y el relleno va a ser blanco. Entonces todo el punto de ello es estar a la misma distancia que este texto, así. Y voy a simplemente a la vuelta de las esquinas para cumplir cinco. Ahora en cuanto a la distancia, podemos hacer que sea a las 10 por ejemplo. Entonces turno y en la ciudad. Entonces va a mostrar que esto es lo que se selecciona. Entonces llamémoslo como puntos o selector, así. Para ponerlo aquí mismo. Y lo siguiente que vamos a hacer en realidad es desagrupar esto. Entonces vamos a tener todo dentro de un grupo y vamos a hacer lo mismo para el nav secundario en un poco, pero vamos a moverlo rápidamente hasta aquí, por ejemplo, sólo para mantenerlo fuera del camino. Lo siguiente que voy a hacer es realmente crear ese punto de tabulador para nuestro logo. Así que simplemente crea un rectángulo como este punto de toque inferior de calidad así. Y yo voy a quitar la frontera o quitar el relleno. Y eso es básicamente todo. Simplemente puedes redondearlo hasta el píxel más cercano de tu logo a algo como esto, por ejemplo. Tan solo para que se destaque y es fácilmente tocable. Entonces vamos a quedarnos con eso para nuestro logo y podemos llamarlo logo. Yo lo hice. Por lo que para nuestros destinos, necesitamos crear estos destinos. Y saquemos rápidamente esto también del camino porque se va a esconder. Entonces para estos destinos, Vamos a duplicar rápidamente este texto. Voy a moverlo hacia aquí, asegurarme de que quede alineado así. Y voy a asegurarme de que sean 80 de mi selector así. Y vamos a ver, podemos llamarlo algo así como destinos en Europa. Poppins 24 luz es buena, y encontremos dat. Entonces Europa, aquí está, icono de destinos de Europa. Yo lo voy a posicionar aquí mismo. Y voy a asegurarme de que esté en el centro, así. Así. Voy a cerrarlo. Y por último, puedo llevarlo a algo así como 20 por ejemplo. Veamos cómo se ve eso. Creo que eso funciona bien con nuestro logo, lo siento, con nuestro ícono. Y ahora vamos a traerlo hasta aquí. Y veamos si estamos a los 80. Estamos. Y eso es genial. Por lo que el siguiente paso para nosotros es crear realmente estos destinos en Europa. Entonces movámoslo todo hasta aquí. Por lo que este selector de nación. Entonces Europa, destinos íconos en Europa. Vamos a copiar esto. Entonces Control D, lo voy a posicionar aquí mismo. Y estos destinos van a ser un poco más pequeños. Entonces una t. Y por ejemplo, podemos ponerles algo así como 40 de aquí. Asegúrate de que estén alineados a la izquierda. Entonces el primero va a ser París. Porque van a ser seis de ellos. Van a ocupar cada uno dos columnas. Entonces puedes usar una grilla de repetición si quieres, que en realidad voy a lucir algo como esto. Por lo que 23456, que está bien. Y básicamente voy a simplemente aumentar el espacio para poder ponerlos más o menos por aquí, en algún lugar alrededor de la rejilla de desagrupamiento. Entonces el segundo va a ser Londres. Este va a ser Praga. El próximo va a estar por ahí. Y finalmente en esto va a ser Barcelona. No dejes que los alineen rápidamente con nuestra grilla. Entonces esto de aquí, esto de aquí, esto está bien y Barcelona está bien. Y finalmente tenemos uno más y lo vamos a colocar aquí mismo en el centro de este stop textos como este. Asegúrate de que esté alineado a la derecha. Y vas a teclear en C. Todos. Voy a asegurarme de que esté subrayado y lo voy a posicionar aquí mismo porque los usuarios van a poder, cuando toquen los destinos, ahí van a ver destinos en Europa y van a poder ver todos. Me estoy perdiendo algo aquí. Entonces sí, falta falta Lisboa, que es un cuatro a uno. Entonces voy a mover estos así. Y voy a usar en casa a mi papá, mi papá ahora, los tengo a todos. Pausemos rápidamente el video para poder organizarlos. Y ahora que lo hice, Vamos a seguir adelante. Entonces lo que quiero decir aquí mismo es el divisor. Para que puedas usar uno de esos. Oregon simplemente hacer así. Y para el propio divisor. Usemos el color del blanco y bajemos la obesidad a 40 por ejemplo. Llamémoslo divisor. Encuentra eso. Y vamos a traerlo. Y voy a usar algo así como 20 de aquí. Entonces así funciona bien. Y lo último que voy a hacer es usar este C todos los textos y creado como componente, por lo que Tecla Control. Y lo único que voy a incluir es hover. Y para el color hover, voy a usar el hover de deuda y el azul. Entonces básicamente la gente va a poder rondar. Entonces ver todo, llámenlo así. Y básicamente lo voy a agrupar y destinos de calidad, Europa en algún momento eso y tengo que incluir esto en más amplio en así. Y ahí lo tenemos en básicamente adeudado por los destinos. Voy a pausar el video y copiar y pegar todos estos otros destinos dentro. Y ahora que he hecho mugre, se puede ver cómo se ven todos. Entonces tenemos a Europa, Asia, África, y las Américas aquí mismo. Entonces los voy a agrupar a todos, golpear Control G y llamarlos destinos. Voy a conseguir 0 dos veces. Y finalmente lo voy a ocultar para que no se corrompe con nada más que estamos tratando de hacer. Entonces básicamente, pasemos ahora al siguiente, que va a ser invierno. Obviamente esto se va a mover y encogerse para ajustarse al texto invernal. Entonces para el propio invierno, vamos a tener algunas ilustraciones. Entonces voy a copiar uno del diseño original y cuándo colocarlo aquí mismo. Por lo que tenemos ilustración invernal. Voy a pasar a la derecha aquí, y voy a asegurarme de que sea un componente local desde aquí. Así que haga clic derecho en hacer local. Y lo que voy a hacer ahí mismo es usar el texto. Entonces voy a usar la herramienta de texto aquí mismo, escribiendo com con nosotros y explorar para asegurarme de que quede alineado así. Y va a ser Poppins light 18 como es, pero simplemente voy a usar este color azul medio. Y lo voy a poner aquí justo al lado de nuestra ilustración. Entonces veamos 2, 4, 6. Así. Creo que eso está bien. Y finalmente puedo ponerlo, por ejemplo, algo así. Creo que eso funciona bien. Control D y yo podemos teclear algo así como maravillas invernales. Y puedo saltar aquí mismo y usar 120 blancos estadounidenses, más con y abajo. Entonces 12, por ejemplo, creo que va a funcionar bastante bien. Y finalmente, básicamente voy a copiar y pegar este texto de mi documento original. Vamos a moverlo rápidamente al borde de nuestro texto para pensar que va a estar bien. Veamos aquí reducir 37. Entonces me voy a quedar con el 20 IDAT. Y por último, también voy a usar ese botón grande que es la búsqueda usada. Botón tan grande, arrastrar y soltar. Ahí, lo tenemos. Botón tan grande, muévelo todo el camino abajo en este texto. Colóquelo aquí mismo y asegúrate de que esta vez tengamos 40 años, así. Y dentro del estado por defecto en este, lo que vamos a hacer en realidad es que voy a ocultar este color. Por esta frontera. Simplemente voy a seleccionar este color. Y aquí voy a escribir en Explorer ahora. Y voy a saltar aquí mismo, cerrar esto y usar mi color blanco así. Entonces lo voy a seleccionar e ir a mi estado de horror. Y en lugar de esto, por alguna razón, sigue molestando. Entonces vamos a eliminar este salto, explorar ahora deudas vuelve al estado de incumplimiento. Y se puede ver cómo se ve eso. Entonces básicamente lo que voy a hacer ahora está organizado esto. Entonces lo voy a llamar texto. Voy a agrupar a estos dos. Va a ser invierno, así. Y lo que en realidad voy a hacer es seleccionarlos, clic aquí y asegurarme de que estén en el centro y hábitos lácteos. Entonces esto es lo que se va a mostrar a medida que los usuarios hacen clic en invierno. Entonces voy a hacer doble clic en mi tecla 0 y voy a pausar el video aquí para que pueda caber en cruceros finales individuales de wellness porque esos son exactamente los mismos ajustes y exactamente el mismo look y tacto que el invierno. Entonces no te voy a aburrir con eso. De acuerdo, entonces ahora que lo he hecho, déjame mostrarte rápidamente lo que he creado. Entonces viste estos destinos y viste cómo se ve eso. Entonces déjame esconderlo rápidamente. El siguiente es el invierno. Entonces yo he creado esto y tú lo viste. Entonces pasemos ahora al Wellness. Básicamente exactamente lo mismo, solo ilustración diferente. Y esto dice empezar a relajarse en lugar de reservar ahora por ejemplo. Por lo que solo puedes cambiar los que están alrededor de esos llamados a acciones. Contamos con viajes individuales, así que Gary e ir donde la parte te sigue y puedes contactarnos aquí para abultar tu viaje individual. Y por último, tenemos estos cruceros. Entonces si traigo esto de vuelta, tenemos exóticos cruceros libro acumula. Por último, lo que necesitamos es contactarnos para esta sección Acerca de Nosotros. Entonces lo que voy a hacer es duplicar esta sección de texto aquí mismo. Voy a esconder esto. Voy a posicionar esto justo debajo de nosotros. Entonces lo que voy a hacer es esconderlos a todos. Para que no interfieran con mi tipeo. Puedo escribir fácilmente. Entonces vamos a copiar y pegar el texto de mi diseño original porque va a cumplir mucho más simple para que lo terminemos de esa manera. Yo eso, y finalmente, sigamos adelante y copiemos el texto. Y aquí vamos a decir contáctanos. Mi papá, copia eso, ve al estado de horror. Y puedes ver básicamente es solo copiar y pegar entre todos tus estados. Ahora lo que necesitamos aquí mismo es el mapa y voy a cortar. Y pegar en el mapa que originalmente usé en mi diseño en simplemente explicar rápidamente la deuda y ver lo que he hecho ahí sólido y rápido. Seleccione estos dos. Haga clic aquí. O aún mejor, tal vez ni siquiera. A lo mejor simplemente puedo dejar aquí la información del mapa justo encima de este texto. Creo que eso está bien. Entonces básicamente este mapa es el mapa de esta calle que está en Belgrado. Y uso el pin, básicamente exactamente la misma configuración que hicimos en esta pantalla. Si recuerdas, nos desplazamos todo el camino hacia abajo y te mostré cómo generar tu mapa usando el mapa de fantasía. Entonces hice exactamente lo mismo, exactamente la misma configuración aquí mismo. Pero en términos de esto, si hago clic aquí mismo, se puede ver Poppins light 18, exactamente la misma fuente que siempre usamos. Y la distancia entre estos iconos y es de 20 pixel. Básicamente, este es solo un email donde la gente puede contactar, pueden dar click ahí mismo para enviar un email directamente. Si están en un móvil o una tableta, pueden hacer clic ahí mismo para contactarlos directamente o si tienen eso conectado, por ejemplo, digamos que la agencia usa algo como WhatsApp Viber o algo así. Pueden hacer clic ahí mismo y hacer un contacto directamente con la agencia a través de la página web. Y luego finalmente, esta es la dirección de la calle. Entonces déjame saltar rápidamente aquí mismo y asegurarme de que hago todo esto local porque ya tengo algunos de estos. Obviamente los voy a arreglar más tarde. Pero básicamente eso es todo. Este es el mapa en 4D, este es el texto. Voy a agruparlos, llámalo Acerca de Nosotros. Y eso es básicamente todo. Ahora, lo último que tenemos que hacer aquí mismo es animar estos en la parte superior. Tan nav secundaria, Vamos a crearlos como un componente. Por lo que golpea Control K, Control K, Tecla de control ahí mismo. Entonces lo que quiero hacer con ellos es simplemente agregar algún tipo de interacción. Entonces en hover, por ejemplo, puedes usar estado de terror. Y al flotar, por ejemplo, podemos hacerlos ser de color gris claro. Y esto, también podemos usar un estado de horror. Y podemos hacerlos gris claro. Y esto puede ser estado de horror. Y podemos hacerlos gris claro. Pero lo que también podemos hacer es crear un estado adicional llamado estado oscuro. Dentro del estado oscuro, podemos crearlos para que sean de color gris oscuro, que luego podemos usar en páginas como DES. Por lo que podemos cambiar fácilmente entre todos estos estados. Voy a dar click oscuro y voy a usar gris oscuro. Y por último para éste, click y oscuro. Y voy a usar gris oscuro. Volvamos al default, volvamos al default y volvamos al default. Para que veas lo fácil que es trabajar con esto. Ahora, por fin, lo que podemos hacer es empezar realmente por crear estas animaciones. Entonces vamos a ver. Lo que puedo hacer en realidad es ocultar así mi selector. Y lo que también puedo hacer es secundario ahora está bien. Pero lo que puedo hacer es ver, así que esto es 1080. Entonces lo voy a bajar a un píxel de altura, por ejemplo. Por lo que realmente no se puede ver. Y llevemos, lo que vas a necesitar es algún tipo de superposición de color aquí. Entonces hagámoslo en realidad y sucio. Entonces veamos la superposición de color. lo que puedo, por ejemplo, duplicar en esta imagen y llamarla, por ejemplo, superposición de color de imagen de héroe. Lo que puedo hacer es usar ese color realmente oscuro. Entonces vayamos aquí a aquí, casi negros. Y podemos bajarlo a 70. Para que puedas presionar 7 en tu teclado, por ejemplo. Y cómo son los violentos realmente de este texto es que debe ser blanco por lo que destaque más para escuchar. Y también lo que no me gusta es la posición, así que creo que debería ir más alto. Entonces hagámoslo realmente rápidamente sólidos y hagamos esto, y luego esto. Ahora podemos seleccionar ese rectángulo y podemos seleccionar si es tan nervio primario. Aquí está. Para que podamos seleccionar estos tres. clic aquí para subirlo una muesca, solo para que podamos posicionarlo en el centro. Y ya ves que tiene mucho más espacio para respirar que antes. Pero voy a hacer en realidad es agrupar todos estos, golpear Control G, llamarlo imagen héroe, por ejemplo, porque eso va a ser mucho más fácil de sección a altura. Ahora volvamos a nuestro nav primario y tenemos fondo ahora amado. Entonces nav primario, vamos a, por ejemplo, agruparlo, golpear Control G en, llamarlo nav principal, así. Y lo que puedo hacer es crear un componente. No sé por qué sigue haciendo esto y déjame rápidamente averiguarlo. Una vez más. Rebaños lácteos Control K para traerlo como componente, jabón para correr rápidamente a través de este componente. Esta es nuestra navegación. Va a ser nuestro componente principal, y ahora está en su estado por defecto, lo que significa que aún no se selecciona nada. Entonces si te llevo de vuelta al ejemplo anterior, puedes ver que estos funcionan aquí arriba, pero ninguno de estos lo hace. Y debido a que estamos en el estado por defecto, nada realmente pasó todavía. Entonces lo que vas a hacer a continuación es crear nuestro primer estado y lo vamos a llamar destinos. Dentro de nuestros destinos, lo que vamos a hacer es ampliar este desenfoque de primero que nada, así que 1920 por 1080, así. Y vamos a saltar Es nav primario lateral. Vamos a traer de vuelta el selector y vamos a traer de vuelta nuestros destinos así. Entonces básicamente ese va a ser nuestro primer estado, nuestro segundo estado, y lo vamos a crear desde aquí. Entonces newsfeed, lo vamos a llamar invierno o lo siento, antes de que lo hagamos, ¿sabes qué podemos hacer? Golpear Eliminar dentro de un destinos. En realidad podemos seleccionar todos estos. Por lo que el bienestar invernal cruceros individuales sobre nosotros y bajarlos al 40 por ciento por ejemplo, o incluso menos, digamos 20 por ciento o algo así. Creo que 40. Sí, usemos 20% Así podemos volver atrás y ahora crear de qué estado lo vamos a llamar invierno, así. Por lo que dentro de este nuevo estado, los destinos van a ser 20. El invierno va a ser 100. Entonces solo estoy presionando 0 en mi teclado. Selector se va a mover justo aquí. Y en realidad vamos a bajar esto en tamaño para que quepa aquí mismo, así. Por lo que estos destinos van a bajar. Entonces 0 y un Winter va a aparecer aquí mismo. Y básicamente vamos a seguir adelante y hacer lo mismo con todos los demás. Voy a crear bienestar. Dentro de bienestar de Wesley, empecemos con destinos de invierno. Entonces 20, bienestar, 100. Mueve el selector al bienestar aquí mismo. Simplemente expandido para escuchar. El contenido de bienestar se va a mostrar. El contenido invernal no se va a mostrar, por lo que es así. Entonces vamos a crear el siguiente, que es individual. Así. Dentro del individuo. Una vez más, lo mismo. Los sólidos van con individual, 100, wellness 20. Vamos con el selector. Entonces vamos a moverlo aquí mismo. A ver si cumple. Sí lo expande un poco, así. Entonces básicamente el individuo va a demostrar que el bienestar va a esconderse así. Ahora pasemos al siguiente estado, que van a ser cruceros. Entonces saltemos dentro de aquí. Una vez más, cruceros 100, individuales 20. Por otra parte, el selector justo aquí. Y vas a ver más tarde una vez que animemos, va a ser una realmente dinámica. Se va a ver realmente genial. Entonces cruceros, creo que está bien. Y por último, vamos a traer esto. Ocultemos esto. Y por último, vamos a crear nuestro estado final, que se trata de nosotros. Y dentro Acerca de Nosotros. Básicamente vamos a llevar esto a 100 listas a 20, ubicado nuestro selector y cambiarlo a aquí. Y básicamente ampliar esto hasta el borde de nuestra red. Voy a traernos sección de vuelta y voy a esconder mis cruceros. Básicamente, eso es todo. Eso es lo único que vamos a animar aquí dentro de nuestra página de inicio, diseño de navegación. Entonces ahora viene lo siguiente y necesitamos animar todos estos elementos adicionales. Entonces lo que vamos a hacer es cambiar al estado por defecto. Voy a cambiar al prototipo. Y aquí voy a tocar básicamente el estado por defecto, click en nuestro destino. Entonces voy a usar tap. La transición va a ser auto animate, estado va a ser destinos. Vamos a usar el entrado-salida fácil. 0.4 segundos. Y entonces básicamente tenemos que animar a todos estos otros usando exactamente la misma configuración. Entonces invierno, vamos a usar el bienestar invernal. Vamos a usar wellness individual, como su nombre indica, cruceros como ese y sobre nosotros, vamos a dar click aquí mismo. Entonces vamos a desplazarnos rápidamente por estos estados y ver lo que animó. Entonces tenemos todo esto sobre nosotros y todos estos otros. Pero el problema es que no tenemos estos nabs primarios, artículos niave. Entonces básicamente, Ese es el problema con Adobe XD en mi opinión, porque en cada uno de estos estados, tristemente, hay que saltar dentro y básicamente hacer esto a mano. Entonces esto va a ser individual, esto va a ser cruceros. Al menos te ayuda recordando estos ajustes. No sé por qué. Es mostrarme sobre nosotros y no desplazarse por ahí sino auto animar y sobre nosotros. Entonces voy a pausar el video aquí y hacer todos estos otros para luego volver y mostrarles el resultado final. De acuerdo, ahora que he hecho todo eso y animado todo, ahora, la única cosa más que quería mencionar es el propio logotipo. Por lo que dentro del logo, lo que creamos son este tap points. Entonces aquí estoy en esto, que es el estado de destino. Entonces un punto de logotipo, puedes hacer click en él y lo va a llevar al estado por defecto, el cual básicamente se lee cualquiera de estos elementos en su interior. Entonces volvamos rápidamente al estado por defecto y puedo revisar rápidamente y ver. Así que el bienestar invernal, que es fino cruceros individuales porque puedes ver hice la misma animación para todos ellos. Yo sólo quería ahorrarte un poco de tiempo. Entonces vamos al estado por defecto y vamos a golpear la vista previa y ver qué tenemos hasta ahora. Entonces aquí estamos. Tenemos todo esto que creamos. Tenemos estos estado Horace. Por lo tanto, vamos a dar click en nuestro destino. Se puede ver cómo se ve. Vayamos al invierno. Se puede ver y esto funciona bien, pero quizá debería cambiar esto y quitar ese fondo blanco del bienestar del estado predeterminado original. Y aquí está el problema porque dentro de estos componentes anidados profundos, no tenemos ninguno de estos estados Hover. Realmente no sé por qué. Y en realidad estaba escribiendo al equipo de Adobe XD sobre esto, pero todavía no me volvieron. Lo único que dijeron es que estamos trabajando en ello y te vamos a hacer saber, Pero básicamente puedes crearlo en dos estados. Entonces imagínense aquí, por ejemplo, tengo estos estados flotantes, pero aquí lo tengo, y aquí no lo tengo. Entonces en cualquiera de estos otros, no puedo usar su patrimonio. Realmente no sé por qué, pero básicamente así funciona esto hasta ahora. Y por último, en cualquiera de estos estados, si haces click en el logo, te va a llevar de vuelta a este estado por defecto. Entonces eso es todo para este video. En el siguiente video vamos a seguir adelante y un diseño y esta sección de héroes. Por lo que podemos flotar sobre estas flechas y podemos cambiar entre estas imágenes de héroe y después, pasar a esta navegación inferior. Entonces te veré ahí. 26. Crear el diseño 1: Ahora sigamos con nuestro diseño y empecemos cambiando esta sección de héroes y animándola. Entonces si hago doble clic aquí mismo para abrirlo y saltar dentro de nuestro texto héroe. Como pueden ver, sólo tenemos un soviético, vamos a cambiar eso y tenemos tres. Entonces déjame duplicar eso a más atuendo. Entonces aquí en la prueba dos y aquí un texto tres porque fuimos a animarlo. Entonces, empecemos por cambiar este. Entonces este es el Pekín y lo vamos a dejar ahí. Pero vamos a deshacernos rápidamente del botón héroe. Y llevemos el botón de héroe afuera. Entonces lo voy a posicionar aquí porque sólo quiero animar el texto a medida que estas y las emisiones suceden. No quiero meterme con dos botones, solo quiero mantenerlo donde está. Entonces para éste, porque es un glitz de Pekín, esconde rápidamente esto, esto y esto. Entonces vamos a organizar esto para ser el número uno, como la suciedad. Y entonces, por ejemplo, podría querer incluir a París, que va a ser deshonrado. Entonces llamemos a este número dos. Y por último, veamos esto. No, Vamos a dar esto para ser el número dos porque esto es París. Entonces, vamos a ver. Tenemos pekín. Tenemos Mercado, que va a estar trabajando bajo tres. Y esto va a ser barreras. Así que ponlo justo aquí. Acabo de confundirme. Entonces otra vez, tenemos un Pekín, tenemos París, y finalmente nos hemos olvidado. Entonces estamos bien para ir. Esto es Beijing como CRD, por lo que ahora necesitamos crear un texto número 2 para París. Entonces cambiemos eso. Entonces como dije, esto va a ser barreras. Y veamos, aquí mismo podemos escribir en algo como CTO de amor, por ejemplo. Entonces podemos ocultar eso y ahora podemos pasar a recuperar. Rápidamente, saltando justo ahí. Y vamos a escribir en algo, mágico, Egipto, por ejemplo. Y dejémoslo ahí. Ahora bajo financiamiento, que yo quería hacer con estos textos, como pueden ver, voy a usar una máscara. Y por eso los encendí todos porque quería ver qué tan ancho es el texto más ancho, que es el Hagana en este caso, para simplemente usar nuestro rectángulo y simplemente dibujar uno así. Entonces puedes bajar a tu obesidad, acercar solo un poco solo para ver dónde están los bordes de tus textos. Por ejemplo, en algún lugar en la audiencia, esto no necesita ser demasiado específico y exacto. Es bueno ir así. Yo lo voy a llamar máscara. Significa que lo que puedo hacer es traerlo de vuelta a 100 esconderse, sentir y frontera porque como dijo, esto sólo va a ser nuestra máscara. Entonces voy a seleccionarlos a todos. Control de turno, M cambiará Comando en un Mac. Voy a llamarlo mezquita de texto por ejemplo. Yo lo hice. Y lo que voy a hacer es dejar el primer texto adentro y usar mi Shift y flecha inferior para empujar a estos dos hacia abajo. En algún lugar por aquí. Para que puedas ver tal vez 20 píxeles hacia abajo, solo para que no los veas. Entonces voy a traer a mi imagen de héroe uno de vuelta. Voy a traerlos a todos de vuelta, bajar la obesidad de estos dos. Entonces cuando un escritorio alto, no se ve ningún otro. Y este sólo va a ser nuestro primer estado o nuestro estado por defecto. Entonces hagámoslo ahora. Entonces lo que voy a hacer es básicamente presionar tecla Control o Command. O también puedes hacer click aquí si quieres. Entonces aquí mismo para crearlo como componente. Y ahora quiero crear un nuevo estado. Entonces esta va a ser la imagen dos, por ejemplo. Entonces dentro de ella, vamos a bajar esto a 0, subir esto a 100, ir dentro de nuestro texto. Y voy a mover mi texto de Pekín hacia arriba. Pero antes de hacerlo, quiero mover mi París en policía sólo para poder alinearme fácilmente así. Por lo que está perfectamente alineado y luego simplemente saca tu Beijing fuera del camino. Ahora por fin, saltemos y creemos la imagen tres, así. Y para la imagen tres, claro que vas a bajar esto a 0, subir esto hasta 100, saltar dentro de tu texto y llevar el texto número tres. Al igual que esto. Hasta que todo se alinee perfectamente, simplemente mueve París fuera del camino hasta que se alinee arriba. Y eso es básicamente todo. Entonces si hago clic entre ellos, tenemos estado por defecto, que es Beijing, varus, y Hoegaarden, que todo funciona bien. Ahora vamos a animarlos rápidamente. Por lo que el estado predeterminado, voy a saltar dentro de mi prototipo, localizar mis flechas. Y en mi estado Horace, en mi flecha derecha, voy a cambiar a flotar y luego hacer clic y usaría Tap, transition, auto, animate. Y voy a elegir el estado, estado por defecto. Como pueden ver, de inmediato tenemos un problema. Entonces déjame saltar dentro de mi estado predeterminado y en mi diseño porque me olvidé de crear eso. Entonces aquí estamos en nuestro estado por defecto dentro de las flechas y necesitamos crear esos puntos de paso. Así que saltemos rápidamente y creemos uno. Entonces algo como esto, voy a simplemente ocultar esta calidad amó tap point. O podemos usar esta abreviatura. Así que los puntos de flecha izquierda. Y lo voy a duplicar. Control D, lo voy a mover todo el camino a una puerta, ¿verdad? Al igual que así. Entonces todo el camino hasta aquí. Zoom a la derecha en más semanas solo para que encaje así. Y lo voy a poner por encima de flecha derecha y simplemente cambiaría este de izquierda a derecha Dario go. Y ahora lo que quiero hacer es simplemente ver si Adobe es la actualización de la deuda MAYO. Entonces dentro de nuestra flecha, aquí estamos. Y vamos a comprobar rápidamente imagen número tres flechas, atrévete VR. Entonces ahora vamos a prototiparlo rápidamente. Lo que quería hacer una vez más. Por lo que dentro de nuestro estado por defecto, quiero saltar rápidamente dentro de mis flechas. Punto de tabulación de flecha derecha. Ir al prototipo. Voy a dar click en él. Toca auto animar. Voy a elegir esta imagen estatal número 2 porque ahí es donde quiero que vaya. Entonces voy a cambiar mis estados a la imagen número dos. Y luego voy a ir dos flechas una vez más. Ahora a la izquierda, voy a tocar auto animate destination default state porque quería volver atrás, facilidad fuera. Quiero usar nota fácil para todos ellos. Entonces punto cero para y cuándo usar la misma configuración. Tan disciplinado para ir a la Imagen 3. Y volvamos porque quiero cambiar esto de facilidad fuera a facilidad de entrada y cero punto para. Por último, quiero ir a la imagen número tres. Y en este, en las flechas, no vamos a tocar este. Nosotros sólo vamos a usar este. Y vamos a ir a la imagen número dos es 0.4. Entonces eso es básicamente todo. Vuelve al estado predeterminado click aquí mismo. Porque quiero lanzar una vista previa rápida y ver cómo se ve todo eso. Por lo que puedes ver aún tenemos un flotador en estas flechas porque hover funciona sin importar lo que pongas delante de él, siempre y cuando no tengas el color de sensación. Entonces cuando hago clic ahí mismo, se puede ver que el texto se anima muy bien. Podemos ir al número 3, número 2. Y aquí estamos. Si crees que es un poco demasiado rápido, cual creo que es, tal vez podamos cambiarlo a 0.6, por ejemplo, por la velocidad. Entonces podemos ir aquí a flechas de estado por defecto, flecha derecha. En lugar de, veamos, en lugar de 0.4, podemos pasar a 0.6 o incluso 0.8 si quieres. Por lo que realmente puedes ralentizar tu animación. Flechas. Haga clic en él, 0.6, este 1.60. Entonces podemos ir al número 3. Localice la izquierda, 1.60 justo aquí. Vuelve al primero, y esto es básicamente todo lo que vas a hacerlo. Simplemente vamos a probar todas estas cosas que es tu cliente. Se puede ver que en realidad no es todo tan importante, pero realmente sí trae este tipo de efecto de ralentización y realmente hace facilidad en estas transiciones detrás de él no permite oral a tus usuarios. Entonces voy a calidad para este video porque el próximo video nos va a involucrar creando muertes. Entonces te veré ahí y en qué show cómo puedes crear un drop-downs. 27. Crear el diseño 2: Muy bien, Vamos ahora a seguir adelante y crear este desplegable. Y para crearlo, lo que voy a usar son básicamente dos características. Voy a usar Repetir Grid y este grupos desplazables. Entonces aquí tenemos nav de fondo. Y básicamente lo que voy a hacer es saltar aquí mismo para esta búsqueda en primer lugar, y voy a incluir y papá cerrar icono. Entonces voy a saltar aquí mismo. ¿ A quién cerrar? Aquí está. Más escrito aquí mismo. Cerca de esto. Y veamos, simplemente posicionarlo para estar en el centro y quizá 20 de aquí. Entonces lo que voy a hacer después se rota para animarlo. Pero por ahora, sólo lo voy a mantener aquí como está. De lo que vas a necesitar nuestros antecedentes para todos estos campos. Entonces, antes que nada, voy a usar este original. Voy a golpear Control D para duplicarlo. Y lo voy a poner dentro de todos estos solidus. Y lo que voy a hacer es básicamente reducirlo hasta aquí y hasta aquí, hasta el borde más cercano. Entonces estamos en este divisor mentiras. Y lo voy a llamar buscar legi. Voy a golpear copiarlo, pegar aquí mismo. Y simplemente voy a llamar a esta una actividades. Ponlo dentro de mis actividades, mi papá. Entonces simplemente muévelo aquí mismo. Por lo que una vez más al borde más cercano. Y aquí mismo, voy a pegarle al Control D una vez más, ponerlo afuera. Por qué necesito siguiente es tipo viaje. Entonces lo voy a posicionar aquí mismo. Mórbida, justo aquí en su lugar, posicionándose aquí. Calidad, viaje, tipo, vg, están lastimados y simplemente traerlo dentro de mi tipo de viaje, como suciedad. Y finalmente tenemos uno más para los destinos. Por lo que Control D para duplicarlo. Y lo voy a llamar destinos. Ahora por qué estoy haciendo esto es porque necesito animarlos a todos y crear downs y va a tener mucho más sentido en tan solo un segundo una vez que realmente empecemos a animar a todos estos rebaño lechero. Entonces ahora que tenemos todo eso, lo que puedo hacer es usar este filtro aplicado hit Control K. Y básicamente todo lo que quería hacer es crear un estado hover. Al igual que así. Entonces básicamente estamos creando estados dentro de estados dentro de componentes. Entonces básicamente, lo que sea que no puedas empezar con estos componentes más pequeños porque todo este desplegable va a ser un componente en sí mismo. O simplemente puedes ponerlo dentro de la carpeta como está aquí mismo. Y luego dentro de esa carpeta, cada uno de ellos puede ser componentes separados y puedes hacer con lo que quieras. Entonces lo primero que voy a hacer es usar búsqueda y la voy a posicionar encima de todas ellas. Y por eso usé ese fondo. Porque quiero ampliarlo y moverlo todo el camino hasta aquí. Entonces lo que voy a hacer es básicamente crear mi estado por defecto, que va a ser éste. Y para hacer eso, lo único que quiero hacer es usar mi icono de ropa, que voy dos más aquí mismo. Y es simplemente bajar la obesidad a 0. Como se puede ver, ahora es un plus, pero en el siguiente estado vamos a rotarlo así. Por lo que se puede cerrar y los usuarios pueden entonces tocarlo. Entonces como dije, estado por defecto, lo voy a reducir hacia abajo. Entonces lo que voy a hacer es básicamente presionar Tecla de control. Porque este va a ser nuestro estado por defecto. Crear nuevo estado, clicado. Dentro del estado clicado. Lo que voy a hacer es básicamente usar mi búsqueda BG, icono de búsqueda y buscar viajes. Y lo voy a mover todo el camino hasta aquí. Veamos para qué tenemos bajo Icono de búsqueda. Entonces tenemos 40. Y movamos esto para que sean 40 años. Bueno, creo que fueron 40, así que podemos comprobarlo rápidamente. ¿ Fue? Sí, lo fue. Está bien. Entonces aquí tenemos estado por defecto, entonces hemos clicado estado, así. Y para el estado cliqueado, lo que voy a hacer es traer esto de vuelta. Entonces escribe 0 para ir al 100 y simplemente gira así, entonces es una x Entonces lo que tenemos es esta barra de búsqueda. Si recuerdas del análisis de la competencia, ese es el deseo que creé el tamaño mucho porque esas barras de búsqueda realmente difíciles de conseguir. Aguanta. Entonces aquí lo que tenemos es buscar viajes sin interrumpir. Para que los usuarios simplemente puedan tocar Buscar, ir a la página o simplemente cerrar si no quieren buscar en absoluto. Entonces lo que vamos a hacer a continuación es animado ir al prototipo. Se puede seleccionar todo el campo porque no importa dónde use paso aquí mismo se va a expandir. Así que da click aquí. Usa el tap auto animate, ve al estado de clicado. Facilidad para salir 0.6 porque podemos usar todos esos otros. Después hizo clic. Los usuarios pueden tocar en cualquier lugar una vez más. Así que toca auto animar y ve al estado predeterminado está en fuera, y vamos a previsualizar y ver cómo se ve. Entonces aquí está. Una vez que una pestaña, se puede ver que se expande muy bien y hacer notar este icono de cierre. Se puede ver lo suave que es, lo bonito que es. Y aquí tenemos este efecto hover una vez que quieran aplicar filtros. Entonces te puedes imaginar, vale, quiero buscar, da click aquí. Se expande, se ve bien. Yo toqué lo que quiero, pulsa Aplicar filtros y te va a llevar a esa página en particular. Ahora vamos más desgastados y animemos a todos estos otros. Por lo que todos ellos pueden ser un poco complicados. Entonces mostraría cómo se puede hacer uno y luego copiar y pegar todos estos otros para que no perdamos demasiado tiempo. Por lo que aquí tenemos destinos y tenemos este icono de destino. Entonces lo que voy a hacer es usar mis textos de destino el cual está alineado a la izquierda 18 Poppins light. Voy a duplicarlo Control D. Y lo voy a posicionar en algún lugar por aquí, por ejemplo. Y veamos, tal vez pueda posicionarlo para alinearse bien con mi ícono. Entonces puedo moverlo, por ejemplo, 20 píxeles hacia abajo. Oye, entonces, y lo que puedo hacer es usar mi divisor hit Control D, y lo voy a girar así. Y veamos, quiero medir algo así como algo así creo que va a ser bueno. Entonces vamos a ejecutarlo a 200 de ancho. Colóquelo aquí mismo. Asegúrate de que esté, por ejemplo, diez píxeles abajo. Entonces porque no puedes verlo y eso me deja extender mis destinos BG. Por eso lo creamos después de todo. Entonces aquí tenemos arena, quizá 20, sí, creo que 20 funciona mejor. Entonces voy a seleccionar esto y mi divisor posicionado y aquí abajo. Entonces usa una grilla de repetición y lo voy a llamar destinos. Entonces veamos una vez más. Estamos a 40 de nuestro texto. Entonces vamos a quedarnos con eso para todos estos otros. Por lo que una vez más, tenemos destinos y esto es lo que puedes hacer. Simplemente puedes extenderte todo el camino hasta donde quieras. Y vamos a extender esto para que solo podamos ver lo que tenemos para que podamos terminar correctamente. Al igual, así puedo cortarlo aquí mismo. Y aquí es donde entra la parte divertida. Entonces lo que puedes hacer es usar elementos de textos. Entonces, qué héroe aquí mismo, déjame abrirla rápidamente. Tengo lista de ciudades y simplemente he usado Bloc de notas en mi Windows. Puedes usar lo que quieras en un Mac y va a funcionar bien en un simplemente mecanografiado en todas estas ciudades. Entonces lo que voy a hacer es arrastrar ese archivo en Adobe XD, ponerlo encima de mi primera ciudad, colocarlo, y los lácteos tienen todas estas ciudades. Entonces porque me gusta mucho cómo se ve eso, pero no quiero que se vaya todo el camino hasta aquí. Lo que puedo hacer es simplemente dar click aquí. Entonces desplazamiento vertical. Ahora lo que voy a hacer se expande a Bangkok y por ejemple derechos a aquí para poder cortarlo justo delante de mis textos. Lo que puedo hacer es llamar a esto ciudades. Entonces sé lo que es. Y por último, usa mis destinos BG y simplemente bájalo hasta un punto, tal vez en algún lugar por aquí. Por lo que altura de 500 por ejemplo. Creo que va a funcionar. Bueno. Después haga clic en mis ciudades y córtala hasta más o menos por aquí. Creo que es bueno. Sí. Y ahora vamos a golpear la vista previa y ver de inmediato cómo se ve eso. Entonces una vez abierto, puedes desplazarte y se va a quedar ahí. Entonces creo que se ve realmente bonito. Pero una cosa que creo que esto falta es algún tipo de sombra de fondo porque se puede ver que no se sostiene demasiado bien contra el fondo blanco aquí. Entonces hagámoslo a continuación. Entonces aquí tenemos estas ciudades y lo último que necesitamos es la máscara. Entonces sabes que esto fue 70, así. Entonces lo que voy a hacer es incluir esa sombra. Entonces 55 Sen, y voy a ir a cinco así. Y ahora no se puede ver nada, básicamente, al menos dos aquí. lo único que puedes echar un vistazo es a la sombra que hay por aquí, pero vamos a deshacernos de eso en tan solo un segundo. Lo que necesitamos básicamente es una máscara, que podamos ir a destinos BG, golpear Control D, y llamar a esto máscara. Lo que voy a hacer es ponerlo aquí mismo. Voy a deshacerme de la sombra y deshacerme del relleno. Entonces voy a usar esa máscara. A ver. Vamos a usar las máscaras, máscara, CTs y destinos. O básicamente podemos poner la máscara encima de todo el tanque así. Selecciónelo todo, pulsa Control de turnos. M lo va a enmascarar todo. Entonces simplemente lo voy a llamar destinos. Y básicamente voy a crear un componente ahora. Pero antes de hacerlo en los destinos BG, quiero ocultar mi sombra porque no quiero que se vea. Y básicamente quiero expandir una máscara o solo un poquito hasta aquí. Entonces cuando sí lo expandamos, vas a poder ver la sombra abajo. Hay hasta como esta clave de control PID para crear un componente. Crear una nueva calidad estatal hizo clic en mis deudas. Dentro del estado clicado, lo que queremos hacer es básicamente ampliar esto. Entonces lo que le dimos creo que eran 500 aquí. Y simplemente expande nuestra máscara hasta aquí y traiga nuestra sombra de nuevo. Entonces ahora cuando la cierro, ve a aquí, voy a ir a la pestaña de Prototipo. Vamos a usar el estado fácil y se hace clic en fuera, pasar a clic, hacer clic en algún lugar fuera, pasar al estado predeterminado. Entonces no importa dónde hayas hecho clic, maneja, pulsa vista previa y ve cómo se ve eso. Entonces una vez que estamos aquí, se puede ver que se expande muy bien. Permítanme mostrarle eso a una vez más. De verdad se destaca, pero el problema es que todavía no veo esa sombra toda deuda. Bueno, creo que es bueno, pero sí, dejémoslo ahí. Creo que funciona bien, estoy cambiando por cierto, entre mis monitores porque el que se te ve tiene el menor contraste. Entonces solo estoy cambiando entre ellos. Tan solo a ver cómo se ve. Y creo que se ve bien y creo que funciona bien. Entonces dejémoslo en eso. Lo que voy a hacer a continuación es usar exactamente la misma configuración y trabajar en estos dos. Y cuando los termine, volveré y te mostraré los resultados. De acuerdo, entonces ahora que todos están terminados, déjame mostrarte rápidamente la estructura. Entonces este es el que te mostré a detalle, esta nación. Entonces como puedes ver, todo está justo ahí. Simplemente uso exactamente la misma estructura y elementos. Por lo que simplemente copió esto y lo pegó en todos estos otros. Entonces si les muestro que aquí está el para el tipo de viaje. Si lo abro, aquí está el de las actividades. El genotipo no tiene demasiadas actividades, tiene en lote. Y puedes incluir obviamente muchos más destinos o incluso muchas más actividades. Entonces por fin, hay una búsqueda de viajes, que ya hicimos. Y en cuanto a animaciones, cada animación es exactamente la misma. Entonces los que usé aquí. Por lo tanto tab auto animate facilidad de salida 0.6 segundos para ambos estados se utilizan tanto para todos estos. Entonces si golpeo la vista previa de verdad rápidamente, se puede ver cómo se ve eso. Entonces podemos saltar aquí mismo. Entonces esta es la que hicimos para destinos. Simplemente puede desplazarse hacia arriba y hacia abajo tipo de viaje. Se puede ver que no hay demasiados. Entonces en caso de que quieras, no importa cualquier viaje básicamente que quieras, puedes dar click ahí mismo. Actividades. Entonces nadando, dando vueltas, y se puede ver cuántos son ahí mismo. Y por último, buscar viajes. Tenemos esa bonita animación. Puedes cerrarlo y tenemos aplicar filtros. Entonces eso es todo para este video, se puede ver lo fácil que fue eso. Una última cosa que puedes hacer para resaltar esto es básicamente dentro del estado. lo mejor podemos darle la vuelta y podemos cambiarlos de este color más claro al más oscuro. Pero no creo realmente que eso sea necesario. Pero puedes explorarlo si quieres. Pasar de este color para destino y el icono a este color más oscuro si quieres y ver cómo se ve eso una vez que se hace clic y se expanden, también puedes agregar múltiples efectos de desplazamiento para todos estos textos. Pero no entremos demasiados detalles con muertos, sobre todo si estás apretado en tu horario y el cliente está en estado en un presupuesto, realmente no recomendaría hacer eso porque puedes jugar con todas estas emisiones como tanto como quieras. Y se puede ver que se pueden incluir realmente algunos fáciles y estos realmente complejos. Pero todo depende al final del día del presupuesto del cliente y de cuánto dinero tienen que gastar en estos proyectos. Por lo tanto, puedes determinar la cantidad de todas estas animaciones que puedes hacer en esta clase, simplemente te estoy mostrando todas estas emisiones que puedes hacer. Y básicamente puedes abrirlos todos si quieres gustarte esto. Básicamente juega alrededor como quieras. Simplemente te estoy mostrando todas las opciones que Adobe XD tiene para ofrecer sin escribir una sola línea de código. Entonces eso es todo para este video. En el siguiente video, queremos pasar a las ofertas especiales, y por fin quiero mostrarte cómo podemos crear este icono para pasar al efecto hover y básicamente combinarlo con todos estos otros elementos. Entonces te veré ahí. 28. Crear diseño 3: Pasemos ahora a la sección de ofertas especiales. Y como puedes ver, y si puedes recordar, aquí es donde creamos todos estos diferentes elementos. Nosotros los incluimos a todos. Y como dije, por ejemplo, para estas imágenes de transporte, así que si hago clic justo aquí en el medio, medio transporte, se puede ver que Blaine tren vagón, y autobús, todos ellos no tienen estados disponibles. Entonces como dije, yo creé que sólo por ejemplo, si ustedes se van de, digamos Belgrado, porque una vez más, esta agencia se encuentra en Belgrado, Serbia. Y quieres irte a Hagadah, que es Egipto, por ejemplo, nuestro viaje en coche no está disponible o podría no estar disponible por cualquier razón, tal vez esté demasiado lejos, no hay carreteras lo que sea. Entonces, por tanto, tienes todas estas opciones. Una vez más, tal vez esas opciones pueden estar al pasar el ratón y puedes mostrar una descripción de herramientas, por ejemplo. Y en el hover, puedes hacerle saber a tus espectadores Dan, por ejemplo, una vez que llegan a un destino, no hay atrevimiento de viaje en tren disponible para ellos o no está incluido en la oferta. Por lo que solo está ahí contigo para hablar con tu cliente, para explicarles todas estas diferentes opciones que tienen con estos iconos. Pero el principal en punto clave justo aquí. Y lo que trato de decir es, siempre es genial si puedes, tener todos estos estados diferentes para tus iconos solo para que sean frijoles cosas un poco más tarde. Entonces lo que voy a hacer primero es, como ustedes saben, tenemos nuestras tarjetas de oferta y tenemos ofertas de primer minuto y ofertas de último minuto. Entonces lo que voy a hacer en realidad es que voy a eliminar todas estas tarjetas, pero las voy a conservar por ahora porque quiero crear mis componentes principales y luego distribuirlos y luego editarlos más tarde. Entonces acabo de hacer esto en una sección de wireframing solo para que tengamos estructura, solo para que entienda a dónde va el diseño. Ahora que tenemos todo eso y ahora que determinamos cómo va a quedar, ahora podemos seguir adelante y quizás incluir toda esta información diferente. Entonces porque la creamos gada y la voy a dejar como está. Lo primero que voy a hacer es en realidad que puedo saltar aquí mismo en medio para nuestro transporte. Y por ejemplo, el tren no está disponible. Y por ejemplo, jefes no disponibles. Por ejemplo, a lo mejor se puede llegar en avión y en coche, digamos. Para que podamos seguir adelante. Y lo que voy a hacer, si recuerdas oferta auto, BG tiene esta sombra off 5% de basicidad, lo voy a aumentar en el siguiente estado. Pero antes de seguir adelante, necesitamos una imagen. Entonces voy a arrastrar y soltar una imagen dentro de aquí. Y voy a llamarlo o gada, imagen así. Y lo que voy a hacer también se crea como componente. Entonces veamos, tal vez podamos llamarlo especial. Ofrecer tarjetas. Tendría llave de control. Y lo que vamos a hacer es crear un estado estacionario como ese dentro de nuestro estado Horace, las dos únicas cosas que quiero hacer es con nuestra tarjeta de oferta, BG, o incluso podemos llamarlo tarjeta de oferta especial. ¿ Tan tenía las cosas consistentes? Y eso cambié en el estado por defecto. Por lo que una vez que estamos en estado de horror, se puede ver que se actualizó. Por lo que dentro del estado de horror puedes hacer click en él. Aumenta a 8%. Por ejemplo, solo ordenados, puedes llamar la atención sobre ella un poco más. Ahora podemos ir a la flecha LBG y puedo ampliar nuestra máscara hasta aquí para que el ancho sea de 82 y que cubra realmente bien. Entonces si voy al estado por defecto y una cosa menos que quiero cambiar es la imagen misma. Entonces cuando hacemos click en él, quiero hacer doble clic para poder ir dentro de la máscara de imagen. Entonces voy a mantener presionado Shift Alt y hacer clic izquierdo en una de las esquinas sin importar cuál simplemente se expanda un poco así. Entonces, cuando vas entre el estado por defecto y el estado de Horace, todo parece que se está expandiendo. Por lo que voy a golpear mi adelanto. Tráelo aquí mismo. Ve a aquí. Y se puede ver una vez que estamos en el hover, cómo se ve. Por lo que una vez más, tenemos esa bonita sombra de fondo y tenemos esta imagen moviéndose junto a nuestro ícono. Entonces tal vez queremos tal vez incluso eliminar este estado híbrido aquí mismo. A lo mejor eso no es realmente todo lo necesario. A lo mejor podemos simplemente mantener la flecha tal como está. No creo que el estado de terror funcione todo eso bien aquí porque tenemos primer paso, que es ver su segundo paso el cual se cierne, luego el tercer paso que está justo aquí. Pero tal vez, tal vez podamos incluso dejarlo sólo para que indiquemos que esto es posible. Hacer en este estado. Bueno, dejémoslo y veamos a dónde va desde ahí. Por lo que el siguiente paso para nosotros es duplicar realmente los descartes. Entonces lo que voy a hacer es sostener mi Alt, arrástrelo posición está justo aquí. Alt y arrástrelo, colóquelo aquí mismo, como suciedad. Entonces lo voy a mover justo aquí, luego mover éste justo aquí. Y entonces yo voy a hacer lo mismo. Tan vieja posición y esta justo aquí y luego ALT justo aquí. Todo bien aquí. Entonces voy a organizar estos tres. Así que selecciónalos a todos. Y voy a golpear a Control X en realidad para moverlos fuera de las ofertas de primer minuto y eliminar estas dos tarjetas porque no las necesitamos. Ve al último minuto, toca Control V, pégalo en su lugar, posicionándolo y justo aquí, y luego borra estas tres cartas aquí mismo. Entonces, ¿qué tenemos? Básicamente, si hago clic aquí para entrar en el modo de vista previa, lo que tienes son todas estas cartas. Como puedes ver, los efectos de hover funcionan realmente bien. Les dijimos. Y básicamente, lo que sea que cambies en este componente principal se va a actualizar en todos estos componentes adicionales. Entonces por ejemplo, si redondeo más las esquinas. Se actualizará en todos estos componentes. Si yo, por ejemplo, cambia un color de cualquiera de estos iconos, si cambio el color del texto, si hago lo que en este componente se actualiza a lo largo de todos estos otros componentes. Pero n es que vas a ver en un segundo, vez que empieces a actualizar todos estos componentes hijos que venían de este componente padre, que es éste, no va a revertir los cambios de dosis. Entonces, una vez más, lo que sea que estés haciendo en el componente estéril, que es el componente principal, se va a actualizar a través de tus componentes hijos, pero no va a funcionar al revés. Entonces lo que sea que cambies en estos componentes hijos, no se va a propagar Este componente principal o principal. Entonces empecemos con el segundo. Y por ejemplo, puedo escribir en Tokio aquí tal vez. Para que pueda saltar dentro de esta cualidad única, Tokio. Yo lo hice. Puedo acercar. Ver explorador y la tierra del sol naciente por tierra. Y veamos, tal vez podamos dejar el avión en este. Entonces para el transporte móvil, sólo vamos a salir del avión, pero todos estos otros no se van a comer de él disponible para la dislocación. Uno de los días tal vez podamos poner 14 días en lugar de 24, por lo que 14. Y también podemos aumentar esto a 50, sentido para mí, sí, 58 creo que funciona bien. Por eso lo ponemos en pila. El precio va a ser mucho mayor. Entonces por ejemplo, 2430 dólares en este. Y lo que puedes hacer es que voy a llamar a esta acción tu imagen. No me dejo localizar mi imagen de Tokio dentro de mi carpeta. Entonces veamos Tokio. Voy a arrastrarlo y soltarlo dentro. Qué se puede hacer en este caso porque tenemos toda esta información la cual se cambia entonces también vamos a traerle algo de especia. Entrémonos dentro de nuestra calificación. Localicemos al menos Star, que es éste, y lo pongamos en estado gris. Por lo que tenemos una calificación de cuatro estrellas, por ejemplo, para este. Entonces lo que voy a hacer ahora es que los voy a seleccionar a todos. En lugar de que la flecha impacte Control C, salte dentro de mi estado Horace, QED control V. Y luego voy a borrarlo todo excepto la flecha. Entonces básicamente tenemos toda esta misma información. Y ahora dentro de nuestra imagen, voy a hacer doble clic para entrar al modo máscara, desplazar Control M, para poder ampliarlo un poco, por ejemplo, dos aquí. Y entonces podemos, vamos a querer entre nuestros estados. Y se puede ver lo sencillo que es esto. Va a llevar mucho tiempo porque tenemos todos estos estados diferentes. Pero al menos tienes este bonito efecto. Entonces, una vez más, tenemos el Hoegaarden, tenemos el Tokio encendido, y todo funciona como debería. Entonces, para no aburrirte con demasiados de estos detalles, voy a pausar el video aquí. Voy a hacer el resto de ellos y luego voy a volver para que podamos trabajar en este video uno aquí abajo. Y ahora que todos ellos están terminados, el litio rápidamente aquí para ir a previsualizar y te puedes ver tan regata, barris, Kroc o Tokio, cebada y Taipei. Y por supuesto, les he hecho algunos cambios. Por lo que se puede ver que para el tipo a, por ejemplo, tenemos el auto y un avión justo aquí. Sólo tenemos un viaje en autobús por aquí. Tenemos tres de ellos en lugar del avión justo aquí, tenemos a estos dos justo aquí tenemos el avión. Entonces solo la variedad para que el cliente revise principalmente. Y puedes revisar y hacer click aquí desde cualquiera de estos. Y pueden ir en realidad realmente como estas flechas porque creo que la pausa el cliente y los obligó a dar clic en esta zona. Pero también puedes hacer que toda esta tarjeta se pueda hacer clic área si quieres que vayan a la siguiente página. Entonces ahora vamos a trabajar rápidamente en este video promocional para que pueda cerrar esto desde un video. Entonces lo único que quiero hacer aquí mismo es arrastrar y soltar mi imagen dentro de ella. A ver, tal vez podamos incluso incluir alguna superposición de color porque no creo que todo sea bonito para eso. No creo que se destaque bien, así que Control D, voy a renombrar esto a superposición de video promocional. Y usemos ese mismo color que usamos. Por lo que casi negro y puedo golpear siete en mi teclado. Lori bajó a 70. Ahora se ve mucho mejor. Entonces en el siguiente video vamos a hacer básicamente exactamente lo mismo que hicimos para descartar. Simplemente vamos a crear un componente a partir de esta tarjeta y Dan básicamente lo transformamos a lo largo de todos nuestros diseños. Entonces básicamente copiar y pegar a todos ellos. Y eso va a acelerar nuestro flujo de trabajo masivamente. Pero también te voy a explicar cómo puedes hacer eso también. Entonces te veré ahí. 29. Crear el diseño 4: Pasemos ahora a los destinos y voy a empezar por crear esta tarjeta de destino. Entonces una vez más, misma historia, como fue con esta sección aquí mismo. Cuando estás creando estos como wireframes, Es importante poner tanta información como sea posible para dar a tus clientes tanto contexto como sea posible, y luego explicar manera oportuna cómo se van a quedar una vez ellos están terminados. Pero no quieres invertir todo tu tiempo por adelantado. Y al principio, porque quieres mantenerlo agradable y corto y quieres darles el mayor contexto posible como dije, sin incluir toda esta información dentro, como todas estas imágenes, todas estas animaciones, todas estas transiciones porque quieres mantener el contexto abajo y quieres determinar la estructura y el aspecto general y la sensación de tu diseño. Antes de pasar a toda esta información adicional e incluir toda esta información adicional dentro. Entonces antes de pasar a esa sección, acabo de notar que se puede ver todo por un minuto, pero no cambié esto por todo de último minuto. Entonces déjame hacerlo rápidamente en todos los últimos minutos. Voy a copiarlo. Vuelve a mi estado de horror. Vuelve aquí o hábitos lácteos de última hora. Y ahora podemos pasar a los destinos. Una vez más, voy a hacer lo mismo. Voy a crear un componente a partir de éste. Voy a pausar el video y voy a llenar, y no sólo estos, sino todos estos otros, sólo para ahorrar un poco de tiempo en este video. Pero como dije, quiero darles tanto contexto como sea posible en este diseño general, en estructura desordenada y en este flujo general, sólo para que puedan entender cómo pueden avanzar esto. No quiero perder su tiempo recreando todas estas tarjetas porque vamos a tener ocho tarjetas en esta sección buscadas para secciones con ocho tarjetas llenas de información in vitro. Entonces como dije, no quiero desperdiciar demasiado de su tiempo. Entonces para empezar, lo que vamos a hacer en realidad una vez más, voy a seguir adelante y eliminar estos tres porque sabemos que si hago doble clic en nuestro tablero de arte, sabemos que el ancho de canaleta es de 60, así que esa es la distancia que vamos a tener entre nuestras tarjetas. Entonces para empezar, lo que voy a hacer en realidad es hacer las flechas primero. Porque si hago click en mi flecha izquierda, puedes ver que tenemos estado por defecto en hover. Si saltamos al prototipo, se puede ver que en el estado por defecto hemos hover seleccionado auto animate, facilidad de entrada y 0.3 segundos. Entonces yo también lo voy a hacer en la flecha derecha. Entonces voy a dar clic, voy a usar en lugar de la pestaña, voy a usar el hover. Auto animar. No obstante, facilidad fuera y punto cero tres segundos. 3.3, perdón, 0.3. Presiona Enter solo porque quiero mantener la consistencia misma. Y más tarde cuando lo copie y lo pegue, voy a hacer lo mismo por todas estas otras flechas. Entonces porque nos atrevemos, vayamos con el diseño y una vez más, volvamos a las ciudades. Voy a desagrupar esta y voy a llamarla tarjeta de destino así. Por lo que el primer destino va a ser París aquí mismo. Entonces portadores. Y voy a escribir en Explorer. La Ciudad de las Luces así. Y en lugar de 24 días, podemos lidiar con algo así como siete días, por ejemplo. Entonces, una vez más, aquí es donde esto resulta útil. Porque apilar incluídos. Simplemente puedo saltar justo aquí por ejemplo, y decir que quiero estar a los 24, quiero estar a los 65 Tal vez. Creo que eso es bueno. Creo que eso se ve bien. Y siempre puedes saltar a la derecha y cambiar estos valores aquí mismo, en lugar de simplemente hacer clic en él, luego tirando de izquierda y derecha, siempre puedes, como dije, simplemente hacer clic e introducir el valor aquí que quieras. Entonces una última cosa es que vamos a cambiar el precio de esto, vamos a ser 450, así. Entonces tuvimos el París y vamos a darle cuatro estrellas por ejemplo. Entonces la calificación para las estrellas, creo que eso es bueno. Y en lugar de imagen de destino, llamémosla imagen de París. Ing, porque como dije, vamos a tener múltiples de estos y vamos a incluir diferentes destinos dentro. Entonces déjame saltar rápidamente a mi carpeta de imágenes. Por lo que los faraones aquí mismo y lo arrastran y sueltan dentro. Y básicamente así es como se ve mi carpeta de imágenes. Sólo voy a arrastrar y soltar estas imágenes dentro. También tengo estos logotipos de pareja. También tengo estas banderas como te mostré. Y básicamente se puede hacer ahí también. Ahora, las exporté como estas dimensiones, por lo que dimensiones originales dentro del archivo. Pero una vez más, si quieres obtener dimensión completa de estas imágenes, úsalas para tu portafolio o para el trabajo de tu cliente. Enfréntate a los Envato Elements y consigue la suscripción por sí mismos va a valer la pena porque vas a conseguir todas estas imágenes masivas. Creo que esta imagen original era algo así como ocho K o algo así. Pero aquí, exportado, como se puede ver, son sólo 366 semanas a 60 va a ser suficiente para este proyecto. Pero como dije, si quieres, puedes hacerlo y conseguir la suscripción por ti mismo y explorar todas esas imágenes que te he mostrado ahora por ahora, pulsa Tecla de control para esta tarjeta de destino. Y si te llevo aquí mismo, puedes ver que tenemos tarjeta de oferta especial y tenemos tarjeta de destino. Entonces creo que está bien. Ahora hagamos flotar el poder estatal. Voy a abrirla y una vez más, sólo imagen. Por lo tanto Shift Alt y click izquierdo. Tienes que hacer doble clic en el interior para acceder a la máscara. Porque si no lo haces y haces Shift Alt así, va a aumentar el tamaño general de tu imagen. Entonces va a salir así afuera. Pero una vez que haga doble clic en el interior va a entrar al modo Máscara de imagen, cambiar Alt, y hacer clic izquierdo aumentarlo apenas ligeramente. Una vez más, vamos a pasar a las flechas. Perdón, así que esta tradición tarjetas, estamos en el estado de hover, así que voy a pasar a la máscara de flecha. Y lo voy a ampliar hasta aquí. Y por fin estoy, voy a seguir adelante aquí mismo e incluir esto para ser ocho. Y eso es básicamente todo. Entonces lo siguiente es volver al estado de horror. Y vamos a usar grilla repetida. Por lo que puedes usar la cuadrícula de repetición o simplemente puedes Alt u opción y luego arrastrarlos y soltarlos en lo que quieras. Pero voy a usar la grilla de repetición solo por el bien de la consistencia. Entonces como dije, voy a necesitar ocho de ellos. Entonces 2, 4, 6, 7, uno más. Así que así. Y los voy a posicionar en un grupo de ciudades de calidad como esa. Y voy a saltar a mi grilla de repetición, desagrupar rejilla. Por lo que se están quedando dentro de la carpeta misma. Se están quedando dentro de la propia mesa de trabajo. El punto principal aquí es obtener el aspecto y la sensación consistentes entre ellos. Por lo que como pueden ver, se están quedando dentro de nuestra mesa de trabajo. Entonces si golpeas cliente Preview, un 100 usuarios saben que son más tarjetas para estar aquí mismo, por lo que pueden usar estas flechas para ir a izquierda y derecha. Entonces lo que voy a hacer ahora es pausar el video para poder organizarlos. Ya sabes como me gusta hacer cosas. Entonces voy a poner primero este 1, voy a poner este 1 segundo. Y ahora que lo he hecho, necesito incluir el mismo espaciado entre ellos. Por lo que voy a usar 60 pulsaciones Mayús para anular la selección de éste, mantener pulsada la tecla Mayús, mantener pulsada la tecla Mayús, y hacer lo mismo con todas estas otras. Así que simplemente estoy sosteniendo Shift para arrastrar, luego presionando Shift y haga clic para anular la selección y luego simplemente arrastrándolo hasta aquí. Entonces lo primero es lo primero, si tocamos la vista previa solo para ver estos destinos europeos. Y si me desplaza todo el camino hasta aquí, se puede ver que una vez que golpee el hover, todo funciona como debería, pero no se puede llegar a todos estos otros. Entonces, ¿cómo cambiar eso? Es bastante sencillo con tu carpeta seleccionada y voy a copiar este título. Lo que puedes hacer es simplemente usar scroll horizontal, haz clic ahí mismo. Y se va a ir al borde justo aquí. Pero aquí mismo, lo que voy a hacer es básicamente dejar un poco de espacio justo aquí a la izquierda. Entonces ahora cuando golpeo la vista previa y llegamos a esa etapa de nuestro diseño aquí está. Ahora una vez que haces clic y arrastras, como puedes ver, aún puedes ver todas estas cartas como esta, y aún puedes ver un poco de descarte aquí mismo ahora que se usa solo porque para dar a tus usuarios indicación de que son algunas cartas más estar ahí mismo. Para que puedan hacer clic en estas flechas en la parte inferior y aún así pueden acceder a ellas. Entonces eso es todo para esta parte. Voy a renombrarlo a ciudades como esta. Y ahora voy a saltar y cambiar todas estas ciudades. Voy a cambiar todos estos nombres tanto por estado predeterminado como por estado estacionario. Y lo que también puedes hacer es si conoces tus ciudades, puedes cambiar el nombre de esta tarjeta. Entonces también podemos hacer eso aquí. Por lo que puedes saltar dentro de tarjeta de oferta especial de primer minuto. O puedo dejarlo así o puedo hacer doble clic aquí mismo. Y cualitativo Ricardo. Ahora eso no va a terminar agregado aquí mismo porque solo usamos la tarjeta de oferta especial como nuestro componente principal. Eso sólo te va a ayudar a organizar un poco las cosas aquí. Entonces Tokio y yo vamos a renombrar esto a Bali. También puedes hacer eso aquí. Entonces París, Jarkov. Y finalmente tenemos tipo B, su cabeza. Y ahora que eso está terminado, como dije, voy a seguir adelante hacia abajo y voy a hacer 1 primero, sólo para mostrarte una vez más, así París. Y digamos que esto va a ser Londres, por ejemplo. Entonces Londres, y voy a saltar aquí mismo. Yo me voy, el bosque empieza, así que voy a llamarlo Londres. Voy a decir Explora y por ejemplo, historia de Londres. Por los días vamos a tener, por ejemplo, 70 también. Entonces creo que está bien. Pero aquí sólo vamos a sacar el auto, así que no está disponible. Y dentro del París, por ejemplo, podemos hacer eso también. Entonces veamos Moodle, auto de transporte moodle. Podemos deshacernos de él. Y en cuanto hagas eso, si vamos al estado de Horace, va a estar ahí, pero yo también lo voy a quitar aquí. Por lo que las notas de carro de transporte disponibles, hábito lácteo, y también debe actualizarse a lo largo de todas estas otras. No quizá necesite guardar el archivo y luego se actualizará. Pero pase lo que pase, como pueden ver, actualizamos ese 1, primer lugar, el precio, así que cambiémoslo a 820, papá mío. Y ahora lo que quiero hacer es lo mismo que antes. En primer lugar, cambia esto a Londres. Acude a mi carpeta de imágenes y localiza Londres. Arrastra y suelta mi imagen dentro. Ahora selecciónelo todo excepto la flecha Control C. Saltar a mi control de estado de horror V, y luego eliminar todo excepto el destino final de flecha actual BG. Ahora voy a hacer doble clic aquí mismo, control de turno y aumentarlo. Vuelve a aquí. Y ahora si tocamos la vista previa solo para mostrarles, pero antes que nada, tengo que traer esto de vuelta al estado predeterminado así. Entonces ahora si volvemos a aquí, desplázate todo el camino hacia abajo. Se puede ver que tenemos París, tenemos Londres. Los precios son diferentes. Entonces si me muevo aquí mismo, si me inclino aquí mismo, y simplemente puedo cambiar entre ellos y vamos a animar esto más adelante. Te voy a mostrar eso en el siguiente video. Entonces para este video, Eso es todo. Ahora voy a seguir adelante y cambiarlos a todos. Y luego en el siguiente video voy a volver y mostrarte cómo se ve eso. Y entonces podemos pasar a todas estas otras secciones de nuestro diseño. Pero son solo punto para explicar todo esto en un solo video y agregar su deuda. Como dije, pierdan el tiempo saliendo horas y horas de fin sobre cambiar todos estos estados diferentes. Entonces te veré en el siguiente video y luego vas a ver a todos cambiarlos, así como a todos estos otros. 30. Crear el diseño 5: Bienvenido de nuevo y vamos a continuar donde dejamos la hora anterior. Entonces en el último video, te dejé con estos y voy adelante y los termino. Así que he ido adelante y después he llenado la mística Asia, bellas Américas. Entonces básicamente ahora tenemos un continente cuatro grandes. Por lo que tenemos destinos europeos, africanos , asiáticos y americanos. Y básicamente seguí adelante y las creé todas. Entonces si golpeo la vista previa y salto aquí mismo, agrandar esto realmente rápido, puedo bajar. Entonces puedes ver que tenemos París, Londres, Roma, Praga, y yo puedo arrastrar todos estos. También tenemos lo mismo para África, lo que todos estos destinos funcionan bien. Tenemos lo mismo para Asia y tenemos lo mismo para las Américas. En la edición que se fijan es el efecto de desplazamiento sobre todas estas flechas. Entonces todos estos derecho, flechas justo aquí que se pueden ver. Por lo que ahora todos funcionan como deberían. Una última cosa que arreglé son los CTs. Por lo que dentro de cada ciudad, seguí adelante y usé este un pergamino tan horizontal. Y recorté este borde izquierdo hasta el borde de nuestra rejilla. Entonces eso es básicamente todo lo que hice. Entonces lo que vamos a hacer a continuación antes de pasar a cualquiera de estas próximas etapas, es que voy a y básicamente crear una animación para ellos y básicamente crear dos estados diferentes. Por lo que los usuarios pueden desplazarse por aquí o incluso más elegantemente hacer clic aquí en estas flechas y luego ir a la izquierda y a la derecha. Entonces lo que vamos a hacer es básicamente que podemos convertir todo esto al componente si queremos. Pero básicamente voy a hacer esto. Destinos europeos. O aún mejor. Sí, vamos, hagamos eso sólo para ahorrar tiempo. Así que pulsa Tecla Control y crea todo esto como un componente. Por lo que dentro de eso, tenemos estos componentes anidados para el botón y para las flechas. Entonces vamos a sumar sólo un estado más. Calidad clicada. Por ejemplo, como lo hicimos en tiempo anterior. Y dentro del estado cliqueado, vamos a saltar dentro de nuestras ciudades. Haga clic en nuestra carpeta de ciudades y simplemente arrastre hasta que la ciudad se alinee con esta línea de cuadrícula aquí mismo a la derecha. Entonces cuando nos desplazamos entre ellos y el estado predeterminado y la fecha de clics, eso es lo único que cambia. Ahora sigamos adelante y hagamos lo mismo con África. Por lo que Control K para crear una nueva llamada se hizo clic. Y voy a copiar este texto. Una auditoría, que vamos a hacer es, como dije, saltar a las ciudades y mover esta carpeta aquí mismo. Después cierra toda la copia de seguridad. Trasladado a Asia, Tecla de control. Agregar una nueva calidad de estado clicado. Y es en este punto cuando comienzas a agregar todos estos diferentes elementos, todas estas diferentes imágenes que puedes ver a Adobe XD corriendo un poco despacio. Y sobre todo en mi caso y deuda, estoy usando muro de este programas y software encima de Adobe XD para que en realidad pueda grabar todas estas lecciones. Por lo que solo puedes imaginar que el tuyo va a correr un poco más rápido. Pero por eso es importante optimizar estas imágenes. Y por eso es importante tenerlos así. Entonces en términos de optimización de imágenes, lo que estoy usando en Windows se llama disturbios. Y voy a traerlo rápidamente. Entonces aquí está. Se llama Motines. Básicamente, lo único que estoy haciendo un, a, esto es gratis por cierto. Creo que se llama imagen arriba Tim en Mac. Voy a tratar de desenterrarlo y lo dejaré en el PDF para que ustedes puedan tener acceso a él. Pero siempre te recomendaré que optimizes tus imágenes. Lo que eso te va a permitir hacer es un tamaño de imagen más bajo. No se va a meter con la resolución, sólo va a reducir el tamaño. Entonces tu software, Adobe XD, en este caso, va a funcionar mucho más suave y mucho más rápido porque optimizas estas imágenes más adelante va a ser importante porque vas a enviar estos activos a tus clientes y desarrolladores. Entonces lo que sea que envíes a tus desarrolladores estos enormes archivos, tienen que hacerlo más tarde. Entonces básicamente es tu trabajo hacer eso por ellos. Básicamente, vas a arrastrar y soltar tu imagen aquí mismo a la imagen inicial, click Optimizar n va a optimizarla a tu, lo siento, no tienes que hacer clic incluso simplemente puedes arrastrarla hasta aquí. Se va a empezar a optimizar automáticamente, y luego te va a mostrar eso aquí mismo. Entonces por traer una imagen, tengo una imagen aquí en mi escritorio para poder arrastrarla y soltarla aquí. va a mostrar que puedes optimizarlo inicio. Entonces, ¿cómo quieres optimizarlo? Esta es la resolución original. Entonces, oh lo siento, tamaño original. Yo quiero dar click sí, lo va a optimizar. Y debido a que esto ya está optimizado, no se muestra. Es enorme potencial. Entonces déjame realmente volver a mi computadora y encontrar una oreja. Entonces aquí está mi imagen de mi computadora. Y les voy a mostrar eso en un verdadero ejemplo. Por lo que aquí se puede ver que la imagen original es de 2.5 megabytes optimizados es de 1.7. Lo último que debes hacer es simplemente hacer clic en Guardar. Se va a ahorrar a ese destino. Va a parecer que aquí es raro y va a parecer que se distorsiona. Pero confía en mí, no lo es, es sólo que el adelanto que se ve así. Una última cosa al respecto es sobre todo en proyectos tan grandes como este en el que estamos trabajando en esta clase. Cuando tienes múltiples de estas imágenes, tienen esta función por lotes. Entonces básicamente puedes hacer exactamente lo mismo. Lote, importa todas tus imágenes que quieras. Haga clic en Guardar. Se va a ahorrar y optimizar cada uno de ellos al mejor valor posible. Básicamente, eso es todo para las imágenes. Ahora sigamos adelante y animemos todos estos. Entonces voy a ir al prototipo para destinos europeos. Voy a encontrar mis flechas, un punto de tabulador derecho. Voy a dar click en él. Entonces vamos a usar tap, auto animate, elegir el estado, clicked, easy and out y zero-point, digamos seis segundos solo para que tengamos ese bonito flujo. Y ahora podemos volver al estado clicado, localizar nuestras flechas una vez más. Ahora punto de toque izquierdo. Usa la misma configuración pero ve al estado predeterminado. Y manadas lecheras. Ahora podemos volver al estado por defecto. Fue África. Usa flechas. Entonces a la derecha, tabulador, punto, haga clic aquí. Ir al estado clicado. Cambie a nuestro estado clicado. Flechas, izquierda punto DAP click justo ahí. Voy a ir al estado por defecto. Como puedes ver, Adobe XD, al menos tres miembros, todos estos ajustes, por lo que no tienes que introducirlos. Una vez más, que no era el caso siempre, solías tener que hacer todas esas cosas. Entonces fue realmente una tarea. Pero ahora es mucho mejor, dandy, mejorar, papá. Yo sólo deseo que sigan mejorando eso. Y dijeron que verán, confío en ellos porque todos estos cambios a lo largo del tiempo con estos estados. Entonces, por ejemplo, no tendría que pausar el video y luego volver atrás y editar todas esas imágenes. lo mejor ellos, va a haber otra opción en el futuro que simplemente puedes arrastrar esas imágenes y no tienes que agregarla a todos esos estados manualmente y cambiarlas todas. Entonces volvamos por fin aquí para dar clic a Estados y flechas izquierda a punto. Haga clic justo ahí. Vamos a ir al estado por defecto está en nuestro 0.6 y volver a nuestro estado por defecto. Y podemos volver al diseño, hit Preview. Veamos cómo se ve todo eso. Podemos ir justo aquí a nuestros destinos europeos, localizar nuestra flecha, hacer clic en ella, y se va a cambiar para escuchar cómo están aquí mismo. Haga click en, se va a cambiar a escuchar. Esto aún funciona, efecto de desplazamiento sigue funcionando. Hagámoslo rápidamente por todos ellos. Por lo que funciona. Funciona justo aquí. Volvamos a aquí. Funciona. Y siempre te recomendaré que revises tus diseños porque a veces hay fallas en el lado XD, pero la mayoría de veces hay algunos errores que por ejemplo, te olvidaste de incluir y cosas así. Por lo que antes de pasar a esta sección con nuestros mejores destinos para este video, quiero arreglar y un rápidamente agregó estos elementos simples como este en, por ejemplo. Así que reserva tu viaje de ensueño. Simplemente voy a localizar mi imagen en mi carpeta de imágenes y arrastrarla y soltarla dentro de un canario. Posicionarlo si quiero, pero creo que eso se ve bien. No quiero hacer lo siguiente es saltar aquí mismo de, así que hay un viaje perfecto para que cualquiera pueda ver. Voy a traerlo y lo voy a hacer en realidad, en lugar de soñar y cuándo cambiar esto para lucir perfecto. Y la razón por la que estoy haciendo eso es porque vamos a exportar esto más adelante. Entonces Lo mejor es cambiar ahora todas estas imágenes y cambiar sus nombres. Por lo que es mucho más sencillo exportar más adelante. Por último, voy a saltar a nuestro pie de página. Y para nuestro pie de página va a ser en realidad bastante simple. Vamos a tener imagen de pie de página, que va a estar en este. Entonces déjame mirarlo en mi carpeta. Y ahí está, y arrástrelo y soltarlo en lugares igual que chica tirada por ahí, Chilling. Entonces lo que voy a hacer está duplicado. Entonces lo mismo una vez más, vamos a ir justo aquí a casi negro. Lo vamos a llamar pie de página. Color, Superposición y pintura, como hicimos con el video, sólo vamos a bajarlo al 70 por ciento. Y eso es básicamente todo para este video. lo último que puedo hacer por éste antes pasar a esto y terminar con esto y esto aquí mismo, lo que nos va a llevar más tiempo. Esta sección en la parte inferior, quizá pueda dejarlos con esta sección. Por lo que categorías de viajes, quizá podamos más 12 de deuda. Y puedo hacerlo muy rápido. Entonces saltemos dentro de ahí. Entonces lo que vamos a hacer es abrirlos así a los tres. Entonces vamos a llamar a esta tarjeta wellness wellness. Vamos a llamar a éste esquí y a llamar a éste cruceros. Y vamos a dar esto así cruceros orden de color tarjeta, Lee. Y básicamente vamos a copiar esta sección aquí mismo. Sostenlo aquí mismo, luego usa esto como corriente Keaton. Aunque haga clic aquí, péguelo así, y péguelo aquí mismo, pero tengo que copiarlo. Bufanda tan conocida saltando justo aquí basado en ella, y eso es básicamente todo. Ahora, para estas superposiciones de colores, lo que queremos hacer es básicamente bajarlo al 50 por ciento, por ejemplo. Entonces hagámoslo. Da click justo ahí, Vuelve a 50. Vaya a este, haga clic en él, vuelva a 50. Y finalmente dar click en este, cambiar su color, volver a 50. Y ahora tenemos nuestra imagen. Entonces voy a usar esto. Entonces tal vez podamos hacer como esquiar corriente y luego esquiar tarjeta, imagen, cruceros, carro va imagen mordaza y así sucesivamente. Entonces tal vez podamos hacer eso. Vamos a escondernos rápidamente y estas superposiciones de colores, puedo bajarlas a 0. 0. Ahora voy a duplicar este. Por lo que guardia de bienestar, IMG, conseguirás esta tarjeta de uno cruceros. Y finalmente, en este, así tarjeta esquema, yo soy G. Ahora necesitamos esconder éste, y sólo para que no tengamos esos fallos que expliqué en la sección de héroes. Entonces déjame localizar mis imágenes. Entonces vamos a empezar con imagen wellness. Entonces lo voy a arrastrar y soltar en su lugar. Ahí está. Voy a pasar a los cruceros y arrastrarlo y soltarlo. Y por último, voy a traer mi imagen de esquí m, Iso. Voy a traer mi color o sólo 50 por ciento, trayendo esto en 50 por ciento, y finalmente llevar esto en posición lo al 50 por ciento. Y ahora lo que podemos hacer es Vamos a ver, en este tan Wellness, Wellness trip por ejemplo. Viaje de cruceros, mi papá, y finalmente viaje de esquí. Entonces podemos correr despega justo aquí. Así que pulsa la tecla Control, Control K justo aquí, y la tecla Control justo aquí para crear estos como componentes. Y finalmente, igual que todos estos otros, pero sólo vamos a tener su patrimonio, tanto lo siento, no el propio estado. Por lo que flotar y la suciedad. Y dentro del Howard, lo que vamos a hacer es ocultar rápidamente este doble clic en nuestra imagen. Entonces básicamente lo mismo. Simplemente agrandar la imagen dentro de la máscara un poco así. Vuelve al estado por defecto, cruceros, misma cosa. Entonces crea un flotador. interior del hover, voy a ocultar mi color por vía auditiva. Y la razón por la que dejé estos fondos, por ejemplo, es tal vez quiero agregar algún tipo de superposición de color encima de ella. A lo mejor quiero agregar algunas sombras de fondo. A lo mejor queremos sumar todos esos elementos diferentes. Entonces, sólo vamos a mantenerlo ahí mismo por ahora y tal vez más tarde queremos volver a ello. Por lo que siempre es mejor tener esa opción desde el principio. Entonces aquí voy a usar un estado de horror. Una vez más, el horror. A ver. Entonces quizá pueda esconderme, hace doble clic aquí y agrandarlo. Y en realidad ya tengo una idea. Entonces porque ya tienen esta sombra gota, lo voy a aumentar para ayudar en básicamente tener el mismo efecto que hacemos con todas estas otras cartas. Entonces por eso lo tenemos justo como opción. Entonces tal vez queremos editarlo más adelante, como lo estamos haciendo en este caso, pero no en el estado por defecto. Fui a mantenerlo a las cinco. Atrévete. Yo quiero ir al estado de Horace y luego abrirla. Ubicada, cámbiala en como así. Volver al estado predeterminado. Y finalmente en nuestro bienestar, quiero ir al estado Horace y luego cambiarlo ahí para comer hábitos lácteos. Y eso es todo lo que vamos a hacer por este video. Entonces como pueden ver, hemos hecho bastante. A continuación vamos a tratar con los mejores destinos, y luego vamos a lidiar con estos testimonios. Y finalmente con este apartado, que en realidad va a ser el más desafiante en cuanto a animaciones, porque vamos a lidiar con mucho esconder muchos dos estados diferentes. Pero no va a ser tan difícil. Es sólo que consume mucho tiempo. Pero antes de hacer eso, vamos a previsualizar rápidamente lo que hemos hecho hasta ahora. Entonces hemos terminado todo esto. Todo esto se ve bien como puedes ver, imagen se ve muy bien aquí. Todo esto se ve bien. Vamos a lidiar con esto más adelante. Y ahora aquí tenemos esto. Entonces lo que no me gusta de ello obviamente, es que tenemos que cambiar este texto de gris claro a blanco. Entonces voy a hacer eso ahora. Entonces localíquelos. Entonces voy a cambiar, esto va a ser más fácil. Blanco, blanco aquí a blanco. Y luego voy a volver a cambiar. Está bien, eso está bien. Por lo tanto, flotar, flotar y flotar. Esto es blanco, blanco, blanco, que está bien. Por lo que básicamente a siguió el estado por defecto como debería. Pero como dijo, siempre cambia y siempre. Cuando estés haciendo cambios, comprueba siempre para ver si se aplicaron. Entonces como decía en el video anterior, si quieres cambiar una de estas tarjetas, si tú, por ejemplo, saltas aquí mismo. Ahora sabemos que esta fue la primera tarjeta para el París que creé. Pero si un salto aquí mismo y cambia esto a rojo por ejemplo, como puedes ver, no se está actualizando en tiempo real a través de todos ellos como debería. Lo que podemos hacer es hacer clic derecho en él. El componente principal lo va a mostrar aquí mismo. Y ahora en este componente principal, si lo abro porque cambiamos los nombres de todos estos autos, por ejemplo. Ahora si lo cambio a rojo, se puede ver que cambia y se actualiza en tiempo real a través de todos ellos. Y por ejemplo, si vuelvo control zed, tal vez quiera dar la vuelta a las esquinas al 10, 80 por ciento por ejemplo. Y se puede ver cómo se ven estas esquinas justo aquí en la parte inferior. Pero a lo mejor no quiero hacer eso. A lo mejor quiero redondear, no sé, a lo mejor quiero ampliar esto a, digamos 500. Y si reviso aquí mismo, puedes verlo. Y mostró ese cambio en tiempo real a través de todos ellos. Así que solo asegúrate de que cuando estés haciendo eso, haz clic con el botón derecho en Editar componentes principales para cualquier tipo de componente que quieras. Si quieres asegurarte de que se aplicó correctamente en todos tus cambios de diseño. Entonces eso es todo para este video, te veré en el siguiente cuando vamos a seguir con un cambio estos y haciendo estos cambios. 31. Crear el diseño 6: Sigamos donde dejamos el video anterior. Y ahora sigamos adelante y terminemos esta homepage, que una vez más, por su longitud, va a ser la más difícil. Y como ya hicimos mucho del trabajo aquí en la página de inicio, va a ser mucho más sencillo porque si recuerdas de estos wireframes, todos estos sección inferior es básicamente solo estamos copiando y pegando. Y esta sección de aquí está básicamente casi terminada, por lo que va a ser mucho más fácil en estas próximas páginas. Entonces pasemos ahora a nuestro destino principal. Y lo que voy a hacer es lo mismo que antes. Voy a abrir éste. Déjame primero cerrar todos estos top para que no nos moleste destino. Y llamémoslo, por ejemplo, top. Esta tarjeta de donación. Y lo que voy a hacer dentro es un poco diferente a antes. Voy a agrupar todos estos, golpear Control G, llamarlo contenido. Yo lo hice. Y voy a incluir una pila. Va a reconocer la pila ya que va de arriba a abajo e igual que antes. Obviamente puedes aumentar o disminuir la pila entre ellos. Pero lo que realmente voy a hacer no es deuda. Entonces agrupémoslos a todos. Creo que eso va a ser mucho más divertido. Contenido así. Y ahora incluye eso en una pila. Entonces cada vez que te muevas, uno de estos va a actualizar la corriente en tiempo real, como puedes ver, y la va a escalar de manera responsable. Y esto es especialmente importante más adelante cuando lleguemos a la parte de redimensionamiento sensible de esta clase. Entonces como dije, voy a hacer eso por esto me dio la tarjeta de destino. Entonces llamémosla primera tarjeta de destino superior, Vg. Por lo que podemos saber una vez que empecemos a exportar, una vez más , tenemos la misma sombra o cinco, vamos a aumentarla en el estado flotante. Entonces lo primero es lo primero, vamos a crear nuestros componentes. Por lo que pulsa Tecla de control. Vayamos a nuestros estados estacionarios. En realidad sé Vamos primero a tratar el contenido en sí. Y voy a llamar a esta imagen de destino superior. Seleccione esta imagen de destino superior, Rebaño lechero. Y voy a volver a mi carpeta Imágenes, localizar las Maldivas. Y voy a traerlo así. A continuación, lo que vamos a hacer es básicamente crear ese estado flotante. Entonces ve con el hover. Dentro de nuestro estado Horace, puedo hacer doble clic aquí mismo, aumentar mi imagen. Y básicamente bajar aquí y aumentar la sombra a ayudas así. Y la razón por la que lo puse todo en Hubbard, solo imagínate a veces a tus clientes realmente no les gusta este diseño. Entonces, por ejemplo, quieren que cambies entre los precios. A lo mejor quieren poner el precio encima en lugar de este texto. Entonces por eso tener todo eso en una pila es realmente. Ahorra tiempo, porque imagínate que digan: Vale, pon el precio encima. Quién dijo Simplemente no te preocupes. Haga clic aquí y simplemente reemplácelo así. Y ahí lo tienes. Tienes tu nuevo diseño con un solo clic. Por lo que estos consejos consumen mucho tiempo, sobre todo más adelante cuando amplías este proyecto, cuando entras en muchos más detalles con él. Y realmente creo que estos consejos y técnicas son realmente enormes ahorro de tiempo es cuando se trata de trabajar, sobre todo en un gran proyecto. Entonces vamos a borrar estos y voy a lo mismo como lo hacía antes. Hit Control G. Y lo voy a llamar, por ejemplo, destinos. Y lo que voy a hacer es mantener mi antigua posición clave, esta de aquí, que sea 60. Y esto debería ir justo aquí. Esto es viejo, una vez más aquí mismo. Y debido a que tienen 44 columnas de ancho, esta vez, vamos a crear seis de ellas. Entonces vamos con 69 suciedad. Voy a posicionarme aquí mismo. Y voy a simplemente seleccionar estos para realmente averiguarlo, sostenga mi vieja llave. Asegúrate de que sean 60 justo aquí y colocarlos a las plántulas sólidas de fondo. Esto y esto. Ahora lo que voy a hacer es saltar dentro del primero, llamarlo a no DVS o hojas más simples mohosas. Y déjame pausar el video aquí para que pueda llenar toda esta información y volver. Y ahora que traje todo ese contenido e incluí una lectura adentro, déjame guiarte rápidamente a través para que puedas ver para el hover, hice básicamente exactamente lo mismo para todos ellos. El único que he hecho es en lugar de usar este texto aquí mismo, como este o tamaño fijo, lo cambio a altura automática solo para que pueda escalar mucho más fácilmente más adelante como se puede ver en el redimensionamiento responsive. Y va a empujar este texto hacia abajo. Más adelante va a ser mucho más sencillo diseñarlo. Una vez que lleguemos a una parte de redimensionamiento sensible de esta clase. Por último, dentro del contenido que ves así nada cambió realmente, todo se mantuvo igual e incluyó imágenes para todas estas diferentes. Por lo que se puede ver por la Toscana y así sucesivamente, así sucesivamente. Entonces cambiemos finalmente en esto y lo sustituyamos. Entonces lo primero que quiero hacer en realidad es ir a mi flecha derecha, ir a un prototipo click justo aquí, y voy a elegir hover. Voy a elegir Ease Out. Y 0.3 si recuerdas solo tener la misma configuración que ésta. Entonces sin embargo es nuestro 0.3 y ahí lo tienes. Entonces voy a volver a mis ubicaciones, volver a Design, volver a Design, hacer doble clic aquí mismo, calidad, top, en nuestra parte superior, ahí está la nación por ese hit Control K. Y básicamente lo único que soy va a hacer aquí mismo es usar un nuevo estado. Así hizo clic en mi deuda. Y antes de eso podemos ir al estado por defecto y usar nuestro destino. Y hacer lo mismo. Por lo tanto, crea grupo de desplazamiento horizontal. Por lo que luego podemos ajustarnos más adelante en nuestro diseño responsive dejar dudar y lo vamos a llamar y destinos así. Entonces ahora cuando volvamos a hacer clic, debería traducirse. Se, simplemente lo abrió y mover nuestras naciones de lista a este punto aquí mismo. Ahí lo tenemos. que podamos volver al estado por defecto e ir al prototipo, buscar nuestras flechas, ¿verdad? Punto de tabulador lo van a utilizar. Por lo tanto, use tab auto animate. Clicked es el estado fácil ahora y 0.6 segundos. Ahora podemos volver a hacer clic, localizar nuestras flechas, criterios de clic de punto de paso izquierdo, y usar el estado predeterminado 0.6 está en fuera. Ve al estado predeterminado, y ahora vamos a previsualizarlo rápidamente y ver cómo se ve. Para que pueda ir todo el camino hacia abajo, evitando todos estos diferentes apartados. Y aquí estamos justo ahí. Por lo que se cierne. Por alguna razón, esta flecha aún no funciona, así que la voy a revisar, pero al menos la animación funciona como debería. Por lo que necesitaré revisar esto porque puedes ver que esta flecha izquierda funciona bien. Entonces veamos flechas de estado por defecto, una flecha a la derecha. Podemos usar hover e ir al estado Horace es 0.3 itemsets. Entonces podemos ir a hacer clic en estado y flecha izquierda ya está ahí. Entonces vamos a previsualizarlo de nuevo e ir todo el camino hasta esa sección que está aquí. Y ahora funciona muy bien. Por lo que una vez más, cuando haga clic en él, va a cambiar a diferentes localizaciones, lo cual está bien. Volvamos a Diseño. Y lo que voy a hacer a continuación es en realidad golpear Save. Por lo que controla S o comando S en un Mac. O una vez más, si estás usando un documento de Cloud va a ahorrar en médicamente. Entonces lo que voy a hacer a continuación es que voy a trabajar en estos testimonios. Por lo que dentro de la sección testimonial, lo que vamos a tener son básicamente cuatro imágenes diferentes. Entonces vamos a trabajar en ellos a continuación. Por lo que puedo dar click aquí mismo, y ya creamos este primero. Entonces tal vez deberíamos duplicarlos. Por lo que golpeó Control D, Control D, Control D. Acabo de ver que tenemos para y tal vez incluso podamos nombrarlos. Por lo que tarjeta testimonial número uno, ahí está la tarjeta mono, número 2, carro testimonial y número tres y finalmente carbono testimonial número 4. Por lo que voy a dar click en el primero, ubicar en primera imagen y rebaño lechero testimonial imaginado uno. Yo lo voy a ocultar. Haga clic en la segunda es una imagen individual número dos. Entonces vamos a ir varón, hembra, varón, hembra. Entonces hagamos una imagen número tres. Y una vez más, para D es puedes usar diferentes plugins, pero me pareció mucho más sencillo organizarme así. Porque a partir de años de trabajo, acumulé todas estas diferentes imágenes que luego puedo usar en mi diseño. Entonces una vez más, porque tenemos este primero, voy a pasar a través de estos y voy a cambiar los nombres de ellos y voy a volver en un segundo. Y ahora que lo he hecho, te puedo mostrar muy rápido. Entonces este es el número uno, el número dos, el número tres, el número cuatro. Ahora, el testimonial de Derek se mantuvo igual, pero puedes si quieres cambiar estos testimonios y realmente te animo a que lo hagas porque es mucho más real cuando tienes todos estos diferentes testimonios en lugar de sólo uno como lo hago en este caso. Entonces antes de seguir adelante, solo quiero localizar mis flechas, flecha derecha, ir al prototipo, arreglarlo aquí mismo, enseguida. Entonces hover auto animate, voy a ir a flotar está fuera. Eso es todo. Entonces eso ahora está arreglado. Y ahora sigamos adelante y trabajemos con estas cartas para empezar. Entonces lo que voy a hacer en realidad es que vamos a cambiar entre ellos. Entonces vamos a tener este 04 se va a quedar puesto. Esto me voy a quedar fijo. Simplemente esto va a cambiar, así que necesitamos cuatro copias del mismo. Entonces vamos 1234 por esto, uno más por esto, y uno más por 0 por, todo va a tener mucho más sentido en un segundo. Entonces voy a esconderlos en el fondo. Entonces 1234, entonces 0, 1, voy a ocultar esto y luego esconderlo. Y si los escondo todos, se puede ver lo que estoy haciendo. Entonces 2, 0, 2, y luego ocultarlo. Tenía 01. Voy a hacer doble clic aquí mismo, 0, 3. Añadí 0. Por eso. Yo lo voy a ocultar. Ahora para este, necesitamos línea de justicia. Así. Yo lo puedo ocultar. Y finalmente 0, 4, y puedo esconder eso también. Ahora voy a mover mi 04. Voy a mover mi línea a algo así como, vamos a ver, creo que 10 funciona realmente bien así. Entonces voy a traer todos estos. Una vez más, asegúrate de que todos estén alineados. Entonces va a ser mucho más sencillo y posicionado en mi lista y asegurarme de que estén 10 separados, como si estuvieran justo aquí. Entonces lo que vamos a hacer es que vamos a hacer una máscara obviamente. Entonces hagamos un rectángulo como este. Y lo voy a llamar mezquita. Y qué se puede hacer porque justo la presa están cambiando. No es necesario posicionarlo todo el camino hasta aquí. Simplemente puede posicionarlo aquí, por ejemplo. Pero lo que realmente me gusta es incluir todos mis textos para que todo se quede en una línea, básicamente. Se puede bajar la obesidad y el jarabe, ver dónde está. Por lo que puede ser solo un poco más preciso. Puedes ocultar Phil y border y puedes seleccionar todo Shift Control M o Shift Command M en un Mac. Y podemos llamarlo máscara de texto, por ejemplo. Ahora dentro de nuestro primer estado y nuestro estado por defecto, vamos a tener sólo el número uno para que podamos sacar estos fuera del camino. Puede posicionarlos aquí y luego 10 píxeles hacia abajo, por ejemplo. Entonces 0, 1 de 4. Y no creo que esto realmente funcione bien. Vamos a comprobarlo. Son 19 por alguna razón por los cuatro. Sí. Simplemente déjalo ahí. Creo que está bien. Entonces lo que vamos a hacer a continuación en realidad, es que VR va a agrupar estos. Entonces desagruparlos a todos, Control G, y voy a llamarlo así el Manion, así. Ahora lo que vamos a hacer es simplemente usar scroll horizontal y expandido justo hasta aquí, sólo para que podamos ver esta sombra de fondo aquí. O incluso puede hacer un poco más y ver dónde estamos aquí mismo. Entonces justo hasta el borde de tu imagen. Y entonces puedo renombrarlo a un testimonial. Entonces es la misma idea. Voy a usar estos, moverlos afuera un poco así. Y vamos a ver, tal vez podamos posicionarnos para ser 40 por ejemplo. Son 60. Creo que eso es bueno. Ahora podemos seguir adelante con los siguientes. Y puedo asegurarme de que esos 60 años bien, asegurarme de que esto esté afuera y asegurarme de que sean 60 también, como ese rebaño lechero. Ahora que eso está terminado o simplemente puedes moverlos como lo hacen las letras. De verdad todo depende de ti cómo quieres hacer esto. Entonces lo que queremos hacer a continuación es golpear Control K en nuestros testimonios. Y podemos, por ejemplo, dar a este testimonio estatal. Y lo que podemos hacer obviamente es saltar dentro nuestros testimonios y vamos a movernos en todos ellos. Entonces los seleccionaré así. Y ahí, ahí lo tenemos. Entonces sólo para que se alinearon con nuestra grilla bastante bien. Y dentro de nuestra máscara de texto, lo que queremos hacer es seleccionar el número uno y el número 2. En primer lugar, la posición número 2 en su lugar como deuda. Más. Número uno fuera del camino, mi papá, por ejemplo, crea un nuevo testimonio. Esta vez, va a ser el número tres. Número tres, así. Dentro de nuestros testimonios, simplemente puedes agarrar tu carpeta. Podemos posicionarlos aquí mismo. Y sólo para ser un poco más preciso, puedo mudarme así. Y finalmente ve a tu máscara de texto y haz lo mismo. Entonces mueva el número tres en su lugar hasta que se reúna ahí mismo. Y luego más número dos fuera del camino hasta que se reúne con el número uno. Para que se pueda ver a dónde va esto. Es realmente bastante sencillo. Por último, voy a usar este texto y crear un estado más, que va a ser uno final. Así testimonial número 4, salto Es o en testimonios, usa tu carpeta y haz clic aquí y simplemente coloca esto para alinearte perfectamente con tu grilla. Y luego máscara de texto del usuario e ir al número 4. Y parece posicionarlo en su lugar con estos. Asegúrate una vez más, estás alineado correctamente. Mueve esto fuera del camino así. Y lo último que quiero revisar es el número dos. A ver si lo tengo. Yo no lo hice. Como puedes ver, justo aquí. Entonces lo voy a mover sólo un guión como ese. Entonces lo tenemos. Ahora vamos a pasar a prototipar denso, por lo que los testimonios. Voy a pasar al prototipo y vamos a usar y flechas obviamente. Entonces flechas, ¿verdad? Punto de tabulador. Vamos a usar tab auto animate, elegir testimonial número dos es de 0.6 segundos. Entonces una vez más, ese mismo tiempo de animación. Vayamos con testimonio a los héroes. El punto de tabulador derecho. Testimonial tres a la izquierda en ese punto esta vez vamos a tener un testimonial, que es el predeterminado, que es el número uno. Vayamos al número 3 y usemos lo mismo. Por lo que flechas dejaron ese punto nos va a llevar al número dos. ¿ Verdad? En ese punto nos va a llevar al número cuatro. Y finalmente dentro de un número cuatro, sólo vamos a tener una flecha izquierda y un punto de paso izquierdo, que nos va a llevar al número tres, rebaño lechero. Volvamos al estado por defecto y comprobemos rápidamente y veamos qué tenemos aquí mismo. Entonces si nos movemos todo el camino hacia abajo, ¿dónde están nuestros testimonios aquí? Son agradables y grandes. Entonces lo que vamos a hacer es rondar aquí mismo. Como se puede ver, las flechas se balancean. Por último, haga clic. Se va a cambiar. Los números van a cambiar muy bien. Haga clic aquí y justo aquí. Por lo que todo funciona como debería en lugar de r. flecha derecha una vez más. Entonces realmente no sé por qué es tan terco. Entonces tendría que ir muy rápido. Testimonial. Tan testimonial a lo encontraré flecha derecha, click sobre él y usar mi hover. Ve a los estados de terror, ve a suavizar y 0.3 segundos. Después ir testimonial tres. Una vez más, realmente no sé por qué me está haciendo eso, pero como puedes ver, a veces vas a tener estos bichos obstinados de Adobe XD. Porque yo no, no lo entiendo. Lo arreglé en el estado por defecto. Debe propagarse a todos estos otros estados. Pero como puedes ver, todavía no lo es. Por alguna razón desconocida. Ahí lo tenemos. Por lo que el estado predeterminado y apenas se van. Entonces básicamente lo adeuda. Y en realidad voy a pausar el video aquí para no aburrirte y abrumarte con demasiada información. La última etapa que vamos a tener es esta de aquí. Entonces los veré en el siguiente video donde cuando finalmente vamos a terminar esta sección, y en realidad lo puedo repasar en este video. Pero como dije, no quiero abrumarte demasiado porque estos videos son largos como son. Porque como pueden ver, hay demasiada información para que yo la incluya en un solo video. Entonces los veré en el siguiente cuando finalmente vamos a terminar esta página y sección de escritorio cubierto. 32. Crear el diseño 7: Por último, sigamos adelante y terminemos esta página trabajando en este apartado. Y simplemente voy a darle la vuelta porque viste que lo tenemos como componente. A lo mejor podemos editarlo en el estado por defecto, atrévete, pero lo que en realidad voy a hacer es hacer clic derecho Desagrupar componentes, luego Control G. Y finalmente, voy a llamarlo, Vamos a ver. No sé por qué si se hace eso. Entonces vamos a ver. Lo voy a poner en un grupo para que no se vayan volando como lo hicieron. Y voy a seleccionar este texto o hacer clic derecho Aceptar en componente de grupo ahora y ahora el estado donde deberían estar, voy a presionar Tecla de control para crear estas preguntas comunes. Y voy a crear nuevo estado, que se llama, es mi viaje. Protegido así. Y vamos a hacer obviamente eso por todos ellos. Por lo que en el estado por defecto, todos ellos están cerrados. En el primer estado se va a abrir el primero y todos ellos van a cambiar a la baja. Entonces, ¿cómo se puede hacer eso? Eso se puede hacer con la pila si se quiere, pero yo no voy a hacerlo, sólo voy a no demasiado complicado. Voy a lidiar con ello así. Entonces, en primer lugar, porque está abierto, vamos a cambiar esto a aquí. Entonces vamos a traer de vuelta este texto. Entonces a 0. Vamos a mover el divisor hacia abajo así hasta el borde de nuestros textos, así. Cambia 1, 2, 3, 4, por lo que queda 40 píxeles abajo. Mi papá. Y entonces simplemente vamos a seleccionar a todos estos otros como este y cambiar a la baja 40 también. O eso o incluso podemos ir uno más allá, por ejemplo, así que tal vez 80 sólo para darnos un poco más de espacio. Entonces veamos 1234. Creo que eso funciona aún mejor porque se puede ver, por estas líneas de fondo, no corta demasiado lejos de aquí, pero quizá podamos ir hasta 60. Y ahora está mucho más cerca de aquí. Por lo que se puede ver apenas quizás pocos píxeles hacia abajo. Entonces 40 y 60 son los valores que realmente vamos a cubrir. Entonces lo que vas a hacer es ir a nuestro estado por defecto. Haga clic aquí, nuevo estado. Y desde aquí vamos a ir a política de cancelación porque esa va a ser nuestra próxima. Encuentra política de cancelación y haz lo mismo. Por lo tanto, rota esto a la izquierda para retirarse. Entonces así, voy a traer esto de vuelta. Voy a usar mi divisor y Julian va a empujar todos estos hacia abajo así sólo para darnos un poco más de espacio con él. Entonces voy a usar mi línea divisoria, esta 1234, y traerla de vuelta hasta llegar a los 60, así. Y ahí lo tenemos. Entonces pasemos ahora al estado por defecto una vez más. Ahora en esto van a ser sus socios o elegir a sus socios. Yo lo hice. Y para los socios, para nosotros, movamos este viaje personalizado fuera del camino todo el camino hacia abajo para que tengamos algo de espacio para trabajar con icono cercano. Entonces simplemente voy a mantener mi tecla Shift así. Y voy a traer esto de vuelta. Yo dat. Y vamos a ver. Puedo mover mi divisor todo el camino hacia abajo 1234. Y voy a traer esto de vuelta a 60, así. Y por último, volvamos al estado por defecto y creemos un nuevo estado una vez más. Y esto va a ser propósito personalizado y hacer lo mismo por ello. Tan viajes personalizados, voy a rotar este ícono para leer pueblos así. Trae su espalda y mueva mi divisor y abajo 40, mi papá. Y eso es básicamente todo. Entonces lo único ahora que nos queda por hacer es obviamente prototiparlo. Entonces lo que voy a hacer primero es ir al prototipo. Y en mi estado por defecto, lo que quiero hacer es desde este estado por defecto, quiero dar click en cada uno de ellos para llegar a donde quiero ir. Entonces lo que eso significa es cuando haces clic aquí. Y por ejemplo, incluso podemos ir un poco más profundo, pero creo que está bien. Haga clic justo ahí. Entonces voy a usar step auto animate, elegir el estado, entonces ¿mi viaje está protegido? Nos vamos a ir fácil y salir y 0.6. Entonces va a recordar esos ajustes. Haga clic en este, haga lo mismo, pero esta política de cancelación, esta es para los socios vieron vamos aquí mismo. Y por último, viajes personalizados. Yo me voy a ir justo aquí. Ahora. Voy a ir así a esta parte. Entonces con este, está protegido mi viaje, lo voy a usar para volver al estado por defecto porque quiero que se cierre. Obviamente la política de cancelaciones nos va a llevar allí. Por lo que la política de cancelación, esto nos va a llevar a los socios. Yo estoy muerto. Y por último, esto nos va a llevar a viajes personalizados. Vámonos al siguiente. Por lo que la política de cancelación, una vez más, ésta nos va a llevar a es mipolítica de cancelación protegidade viaje política de cancelación protegida nos va a llevar al estado por defecto porque queremos que se cierre. Partners nos va a llevar a los socios junior y finalmente, viajes personalizados. Nos va a llevar a los viajes de los clientes. Y por último, tratemos de elegir a tus socios. Entonces aquí está mi viaje. Detectado. Política de cancelación que socios, vamos a ir al estado por defecto. Una vez más, queríamos cerrar. Y éste va a ir a Viajes personalizados. Y ahora por fin, tratemos con el último estado. Por lo que finalmente, esto va a ser, es la política de cancelación protegida de Madrid. Y por cierto, los estoy seleccionando desde aquí porque puedes ver que se están solapando. Entonces no quiero que tenga ningún problema porque es mucho más fácil para mí así. Elige a tus socios es éste. Esta es política de cancelación y puedes dar click sobre ellas y ver aquí mismo lo que has seleccionado. Y luego finalmente viajes personalizados. Queremos que vaya al estado por defecto porque queríamos cerrar. Y ahora sigamos adelante y veamos qué creamos. Para que podamos volver a Diseño. Haga clic aquí, luego el estado predeterminado. Y una vez más, la razón por la que los he puesto en una pila como esta, estas dos secciones es más tarde puedo dar clic aquí y se puede ver que vienen justo aquí y van a mantener todas estas animaciones incluidas dentro. Entonces volvamos a los tiempos y vamos finalmente Anterior. A ver lo que tenemos. Mi papá, vayamos todo el camino hacia abajo y localicemos nuestra Q&A Así que una vez que haces clic ahí mismo, puedes ver que se abre y esto pasa de un plus a cerrar realmente bien. Esto hace lo mismo. Y puedes ver algunos errores aquí mismo dependiendo de dónde hagas clic así. Entonces si hago click aquí mismo, puedes ver que se abre este. Entonces tal vez no deberíamos necesitar usar algunas máscaras aquí. Pero cuando haces clic ahí mismo, por ejemplo, se abre en éste. Así que solo asegúrate de decirle eso a tus clientes. Y tal vez incluso puedas hacer clic en estos iconos. Pero ahora porque lo descubre. Entonces puedes ver algunos temas aquí mismo, pero puedes decírselo a tus clientes y solo para prestar atención a esto, y obviamente esto es solo por una conveniencia atrevida. Todos estos prototipos, y por supuesto para la comodidad de los desarrolladores, solo así ¿sabían lo que quieres de este diseño? Entonces, una vez más, puedes decirles, por ejemplo, si esto, si haces clic aquí y abre éste, es porque este texto se solapa. Así que solo asegúrate de hacer clic, por ejemplo, en algún lugar por aquí. Entonces abrirá esta y misma historia para ésta. Entonces, finalmente, eso es todo para esta página, eso es todo para este video. Una última cosa que quiero hacer es usarlos todos. Así que golpea Control G. Voy a ponerlos en un grupo, llámalo homepage así. Y voy a usar la pila. Y la razón por la que estoy usando la pila, puedes verlo reconoce 150 es más tarde cuando comienzas con el diseño responsive, es mucho más sencillo usar pilas, sobre todo si quieres reducir ese espaciado entre tus artículos, entre tus secciones. Especialmente en, por ejemplo, diseño móvil donde realmente no necesitas 150 píxeles entre todas estas pequeñas secciones. Puedes irte con, por ejemplo, 80 o 60 o centralmente, que es mucho más sencillo reducir el espaciado entre ellos cuando simplemente seleccionas, por ejemplo, sección de tu página de inicio, mantén presionada la tecla de turno y simplemente reducirlos así. Se puede ver cómo funciona eso. Y por supuesto, Stack es genial porque si quieres, por ejemplo, poner esto aquí mismo, simplemente puedes hacerlo y mostrarle a un cliente si quieren algunos cambios rápidos. Entonces como dije, eso es todo para este video. Te veré en la siguiente cuando vayamos a empezar con la página de destino. 33. Crear el diseño 8: Pasemos ahora a la playa de destino. Y esperemos que esto vaya a ser mucho más sencillo que éste. Entonces lo que voy a hacer es sostener mi tecla alt y arrástrela justo aquí y ver qué tenemos justo aquí. Creo que fueron 70 entre estos. Sí, lo es. Por lo que sostengo mi tecla alt y se puede ver aquí mismo, dice 70. Entonces lo voy a arrastrar a 70 aquí mismo. Llámala destino InDesign. Igual que hicimos aquí atrás. Y lo que voy a hacer es dar click aquí mismo, usar mi sección superior, así que dar click en ella. Y vamos a ver. Sí, vamos a copiar toda la sección superior. Saltemos aquí mismo. Y puedo dar click dentro y puedo, por ejemplo, golpear Control V. Para que pueda basar toda mi sección superior en. Lo que voy a hacer a continuación se me quita el fondo ahora porque ya no lo necesito. Mi imagen de héroe porque no la necesito. Voy a quitar mi viejo nav primario así. Y lo que voy a hacer es usar mi imagen de héroe y la voy a duplicar. Voy a llamarlo hero image color overlay. Yo no. Y debido a que esto va a ser París, voy a llamar a esta imagen de héroe barris. Entonces voy a ocultar mi superposición de color, saltar a mi carpeta de imágenes, arrastrarla hasta aquí, así. Trae de vuelta mi superposición de color. Y vamos a ver, puedo usar la misma configuración. Para que yo pueda ir justo aquí. Casi negro. Y vamos a ver, 70% como papá. Por último, voy a saltar dentro de mi texto y cambiarlo a blanco porque creo que se destaca más como deuda. Y ahí lo tenemos en esta sección superior se hace básicamente la navegación funciona exactamente igual que aquí. Pero aquí tenemos imagen de justicia. Entonces solo puedes imaginar que la gente está, por ejemplo, rondando aquí mismo y luego haciendo clic y luego viniendo a esta página para explorar París un poco más. Para que podamos seguir adelante hacia abajo. Y por ejemplo, puedo entrar aquí, seleccionar todos estos aquí para eliminar, y luego ir hasta aquí abajo. Veamos qué podemos elegir. Por ejemplo, a partir de aquí. Entonces de aquí en adelante abajo Control C, puedo venir aquí mismo control V, y simplemente moverlos todos hacia abajo con un turno como ese. Y eso es básicamente todo. Entonces una última cosa que necesitamos cambiar es esta sección con el hotel y así con esta. Entonces, primero tratemos con estos filtros. Entonces lo que podemos hacer con los filtros es básicamente mismo que hicimos en la página anterior. Por lo que básicamente podemos usarlos como componente y luego podemos extenderlos hacia abajo. Por lo que tenemos el precio bajado BG, simplemente podemos extenderlo todo el camino hacia abajo, así. Y entonces podemos tener toda esa información. Y entonces lo que realmente voy a hacer para ahorrarte un poco de tiempo es que voy a usar mi texto. Y voy a dar click aquí mismo, Control V, me voy a posicionar justo aquí. Entonces este es solo mis textos originales los cuales usé. O aún mejor, hagámoslo una vez más. Por lo que puede venir justo aquí a la parte superior, sección superior. Puedo abrir el nav de fondo. Puedo utilizar mis destinos. Yo puedo ir aquí mismo, usar mis ciudades, Control C. Y puedo cerrar todas estas cosas. Yo puedo ir aquí mismo solo para mostrarte cómo puedes usar todos estos diferentes elementos. que pueda ir a mi desplegable, pulsa Control V. Puedo posicionarlo están justo aquí. Asegúrate de que estoy, por ejemplo 20 abajo. Entonces lo que puedo hacer es saltar dentro de mi divisor con un turno, por ejemplo, más en algún lugar por aquí. Y debido a que estamos en la cuadrícula de repetición, debería cambiar todos estos hacia abajo. Entonces déjame ocultar rápidamente esta sección para que en realidad lo puedas ver. Como se puede ver propagó el cambio. Entonces cada vez que cambies este, va a cambiar a través de todos ellos así. Y lo que voy a hacer ahora es usar estos cambios. Entonces por ejemplo, haga doble clic y voy a escribir algo como signo de dólar. Necesito cambiar y guardar porque, y luego volver porque Adobe XD una vez más tiene algunos de estos errores. Pero como puedes ver, ni siquiera puedo teclear. Entonces déjame guardar mi documento y volver. Y ahora que se arregló una vez que lo cambié, voy a cambiar esto a precios así. Y vamos a ver. Puedo, por ejemplo, cambiar en este primer signo a dólar 100 a 500. Y este siguiente puede ser de 500 a 100. Yo no, o incluso podemos incluir nuestro letrero aquí mismo. Entonces para ambos, por ejemplo. Y esto puede ser de 100 a 1500. Y éste puede ser del 1500 al 2000. Y por último, podemos escribir en este último, por ejemplo, más de dos claves de jerarquía 2000 quieren. Y básicamente podemos simplemente cerrar nuestra cuadrícula hasta ese punto. Por lo que simplemente puedo arrastrarlo todo el camino hasta aquí. Sus precios de hábito, eso está bien. A ver, dónde está nuestro desplegable ahí está. Y yo simplemente puedo hacer lo mismo. Entonces golpea Control D. Puedo llamar a esta mezquita. Pero antes de que debo conseguir y hacer todas esas cosas, lo que puedo hacer es pausar el video aquí y básicamente hacer lo mismo como lo hice anteriormente y hacer todas ellas. Y luego vamos a volver y conocerlos y básicamente rematar en esta sección. De acuerdo, entonces ahora que los tengo a todos en su lugar, solo quiero mostrarles rápidamente una mejor calificación. Porque dentro de la calificación, en lugar de todos estos, lo que quería hacer es incluir estrellas reales. Entonces voy a dar click aquí mismo. Voy a desagrupar la cuadrícula y voy a seleccionarlas todas excepto la primera. Y calificación de calidad así. Entonces voy a acercar de nuevo y voy a localizar mi icono de estrella. Voy a dar click aquí mismo. Haga clic en la estrella, arrástrela hasta aquí. Vuelve a mi panel de capas y colóquelo donde esté la parte superior de texto así. Entonces voy a quitar el texto, asegurarme de que sean 40. En realidad, posicionémoslo para ser 20 porque no necesitamos que sean 40. Por lo que 20. Y lo que voy a hacer es usar nuestra rejilla responsive, lo siento, repite aquí para crear cinco de ellos así. Asegúrate de cortar en todo el camino hasta aquí. Y luego por el espaciado, Redujamos el espaciado a algo así como cinco. Creo que va a ser bastante bueno así. Y veamos, podemos llamarlo una calificación así. Y sepan que tenemos nuestra grilla de repetición. Lo que podemos hacer es agruparlos a ambos y crear cuadrícula de repetición fuera de ellos. Por lo que podemos llamarlo calificación también. Y entonces podemos llamar a la primera estrella. Así. Podemos incluso desagrupar estas estrellas, hacer lo que quieras con ellas como quieras. Y para este segundo, lo que queremos es tener cinco de ellos. Entonces 3, 4, y 5, y ciérrelo justo en la parte inferior justo aquí. Por lo que obviamente queremos pasar del número uno al número cinco. Vamos a hacer doble clic aquí mismo. asegura de que todos sean grises. Pero como pueden ver, todavía tenemos algunos temas aquí. No sé por qué XD me hace esto. Entonces me voy a desagrupar y éste sólo para tenerlos dentro, pero me voy a quedar con éste. Y ahora vamos, veamos qué podemos. Podemos hacer una grilla de repetición aquí. Entonces 12345, y vamos a cerrar esto al fondo. Por lo que ahora una vez más tenemos justo este. Y una vez que saltas, tienes todas estas estrellas. Entonces lo que podemos hacer a continuación es intentarlo de esa manera. Entonces vamos a ver, esto debería ser dos. Veamos dos a dos. Ver esto. Uno. Sigue siendo un lote. Entonces vamos a desagruparlos, desagrupar la cuadrícula. Entonces lo que tenemos justo aquí son cinco grupos diferentes. Por lo que ahora fácilmente podemos saltar a este. Por lo que por defecto vamos a ir por defecto, por defecto. Entonces, a veces como viste, correcto, en este ejemplo, puedes usarlos como una especie de punto de partida y luego puedes desagruparlos más tarde y saltar dentro de todos ellos. Pero una vez más, no te preocupes, esto es solo para que tus clientes y desarrolladores entiendan lo que estás haciendo. Básicamente más adelante, solo vas a exportar una de ellas. Y básicamente, los desarrolladores pueden hacer su trabajo y reorganizarlos y posicionarlos más tarde. E incluso puedes darles nombres que separan a uno. Esto puede ser o comer también, y esto puede ser calificación 3, esto puede ser calificación para. Por último, disco y B están comiendo. Por. Ahora. Adelante y animemos a todos ellos. Entonces lo que voy a hacer es por cada uno de ellos, como ustedes vieron en el precio, vamos a copiar este texto, copiar la mezquita. Así que salta dentro de la duración, desplegable BG, cópiala en la parte superior, renombrala para enmascarar, y haz lo mismo para las actividades. Mezquita, posiciónala a la cima. Excursión a la misma posición de mezquita hacia arriba. Por último, calificando Control D y muévelo a la parte superior justo ahí. Entonces lo que voy a hacer es enmascarar sobre ellos o inútil o Shift Control M. Voy a llamar a este primero un precio. Control de turnos M. Para estos, les voy a llamar duración. Entonces actividades, Control de Turnos M. Voy a llamarles actividades. Selecciona este texto Control de turnos M excursiones. Y por último, nos quedan con están comiendo nieve. Control de turnos. Seleccionar calificación, los lácteos son. Entonces ahora sigamos adelante y creemos componentes para cada uno de ellos. Por lo que controlaba clave para la disciplina. O como dije, simplemente puedes hacer clic en pantallas aquí mismo si es más fácil, pero para mí, es solo una memoria muscular. Entonces Tecla de control para cada uno de profundidad. Entonces lo que vas a hacer por cada uno de ellos es crear estado clicado. Entonces voy a Control K por cada uno de ellos. Voy a crear un estado clicado para DS1, excursión, clicked y rating finalmente, así. Ahora, porque tenemos esa sombra de gota, lo que quiero hacer está dentro del estado por defecto para cada uno de ellos. Entonces volvamos atrás. En realidad, debería hacer eso primero, pero a veces cuando hablo, mi cerebro es más lento que mi cantidad. Entonces básicamente estamos a las 2, 2, 4, así que tal vez, tal vez, 20, 30 a 35. Veamos dónde estamos. Creo que 234, podemos ir con 240. Creo que es lo suficientemente bueno para la máscara misma. Hagamos lo mismo por este. Por lo que localiza la mezquita 240 de ancho solo para que podamos ver esa sombra gota más adelante. 240. Hacerlo es lo mismo para la excursión. Entonces y puedes ver por qué estoy pausando estos videos solo para no aburrirte con demasiados de estos detalles. 240, y eso es básicamente todo por ahora. Ahora, vamos a entrar a un estado clicker para cada uno de ellos para que podamos expandirlos hacia abajo. hizo clic. Yo lo hice. Entonces yendo dentro del precio y simplemente, vamos a expandir primero nuestro desplegable y ver dónde está en este caso. Entonces a algo así que es 450, Llamémoslo. Y podemos hacer lo mismo por la máscara. Tan expandido, como atreve por ejemplo, creo que está bien. Por lo que para 70. Sí. Y sigamos adelante y hagamos lo mismo durante el tiempo. Entonces vamos a ver, podemos hacer lo mismo. Por lo que para el desplegable, podemos usar del 40 al 50 y para la máscara podemos usar para 70. Ahora, sigamos adelante y hagamos lo mismo por las actividades. Para las actividades, Vamos a ver 450 o a enmascarar para 17. Encuentra eso. Y pasemos a las excursiones. Porque esto es mucho más pequeño. Como pueden ver, sólo tenemos dos de ellos. Podemos mirarlo tan ágilmente por aquí. Y luego con mezquita más o menos por aquí por ejemplo. Y lo mismo para la calificación porque es mucho más pequeña. Podemos usar un desplegable y expandido a más o menos por aquí. Y luego hacer lo mismo por las mezquitas o se expandió a más o menos por aquí. Ahora que ya lo has hecho, lo que voy a hacer en realidad es usarlos todos en un invierno, cambiar el color para el ícono y para el texto en sí. Entonces lo que voy a hacer es saltar dentro y usaría icono de dólar y un precio y cambiarlo a gris oscuro. Mi papá por alguna razón no va a cambiar. Entonces voy a ahorrar y volver con ustedes una vez más. Está bien, así que ahora está arreglado y en realidad puedo cambiarlos. Entonces lo que haría yo, porque hay una mezquita en el camino, simplemente seleccionaría icono y el texto y volvería a aquí y lo cambiaría como papá, es un poco más lento, pero ¿qué puedes hacer? Adobe XD tiene sus formas a veces. Entonces lo voy a cambiar ahí. Y básicamente por qué estoy haciendo esto es solo para indicar que esto está seleccionado. ¿ Qué también puede, qué le puede dar esto también a su cliente? Idea fácil si quieren hacer lo mismo en la página de inicio. Y también te da, como diseñador una idea de lo que puedes hacer para explorar los artículos seleccionados. Entonces ahora que tenemos todos estos filtros en su lugar, podemos ir al estado predeterminado para todos ellos. Ahora que hemos completado todas nuestras animaciones y rehabilitación, aplicar filtros botón, estado predeterminado, estado Horace. Entonces vamos a dejarlo en defecto. Vayamos al prototipo. Y así cuando hacen clic justo ahí, tap, estamos usando auto estado enemigo se hace clic. Facilidad de entrada 0.6 segundos. Podemos cambiarlo a clicado, clic aquí y volver al valor predeterminado, estado. Duración, misma cosa. Así que da click justo ahí. Haga clic en estado, cambie a clic, haga clic aquí y vuelva a las actividades estatales predeterminadas. Por lo que una vez más, no te preocupes por la zona. Es importante incluir. También utiliza No te lo pierdas. Por lo que el punto de tapping es bastante grande. Volver a click y haga clic aquí y vaya al estado predeterminado. Y finalmente para la calificación cambiaría esto de nuevo a default. Para la calificación, click, te va a llevar a auto animate. Te va a llevar a clicked, cambiar a clicked click justo aquí. Te va a llevar al valor predeterminado, estado, cambiarlo de nuevo, y vamos a previsualizar rápidamente esta página. Entonces una vez más, tenemos este bonito botón aquí mismo. Y si te llevo aquí, puedes ver que la navegación está funcionando muy bien. Todo esto funciona como debería. Da click aquí, como puedes ver, se expande muy bien. Funciona como debería. Para todos ellos. Fue genial y hover funciona aquí. Bien. Así que ahora nos enfoquemos rápidamente en estas tarjetas de hotel e intentaré correr a través de ellas lo más rápido que pueda. Entonces básicamente lo que queremos con ellos es que queremos que hagan lo mismo que antes básicamente. Por lo que queremos que muestren todas esas cosas que todas estas otras tarjetas estaban mostrando en páginas anteriores. Entonces básicamente queremos crear uno, crear esos elementos y Dan básicamente ajustar y bajar así. Entonces voy a mostrar la primera tarjeta. Voy a quitarles estos. Pero déjame ver, son 50 píxeles aquí por alguna razón. A ver, tal vez podamos incluir a 60 después. Entonces, eliminémoslo. Entonces tenemos corriente adulta y déjame saltar y voy a usar la imagen del hotel número 1. Entonces esto va a liderar hotel naranja uno. Tenemos la info la cual es buena y divisor. Entonces todo está donde debe estar. Yo sólo quiero mover estos a un poco hacia abajo. Realmente no lo veo aquí. Entonces tal vez aquí, luego posiciona esto aquí. Y luego veamos, estamos donde diez píxeles, 20 píxeles por ejemplo. Y simplemente mueva la tarjeta del hotel hasta aquí. Cuando lo haga. Entonces veamos, 10, 12, 20. Sí, dejémoslo aquí por ahora. Creo que está bien. Para mí aún mejor, simplemente podemos mover estos 10 píxeles hacia arriba y ahora tenemos mucho más espacio para respirar. Y por último, voy a empujar esta imagen hacia abajo para que se reúna. Ahora que tenemos nuestra primera Sección Terminada, voy a presionar Tecla de Control creada como componente. Vamos a tener estado hover. Mi papá dentro de los hovers, lo mismo que antes. Entonces voy a aumentar esto para eliminar. Voy a cambiar mi flecha, localizar mi máscara. Aquí está. Y simplemente voy a posicionarme en dos aquí. Por lo que están lastimados cuando volver a nuestro estado por defecto y finalmente hacer lo mismo como antes. Así que sostenga su tecla Alt, colóquela aquí mismo, y veamos, 60 píxeles. Creo que está bien. Entonces para tarjeta de hasta número uno, y esta es tarjeta de hotel número 2. Esta va a ser tarjeta de hotel número tres. Mi papá. Y por último, esta va a ser tarjeta hotelera número 4. Y voy a trabajar en este segundo solo para mostrarles cómo va a quedar esto. Entonces permítanme copiar rápidamente algunos elementos. Enfrentó un Min. Yo voy a hacer lo mismo por este texto y vamos a correr rápidamente por él. Voy a traerlo de vuelta a aquí. Y traer esto de vuelta a aquí, por ejemplo, creo que vamos a ver, quizás incluso pueda ampliar mis textos hasta aquí para que no distraiga mi divisor. Déjame copiar lo nuevo y destino, que es esto de aquí, porque está en una pila, se va a mover muy bien. Entonces, por fin, para la calificación, vamos a darle cuatro estrellas esta vez. Yo lo hice. En lugar de 14 días, vamos a tener 12 días, por ejemplo, mi papá. Y en lugar de 1250, vamos a tener, vamos a ver, 960 como la duda. Una vez más, se toman imágenes de elementos de Envato sobre los que renombrar esto a herramienta de imagen de hotel y seleccionar todo excepto la flecha. Hit Control C. Ve a mi horror, estado, ábrelo y controla V. Y lo voy a borrar todo una vez más excepto el adulto. Tan querido, cómo se puede ver lo fácil y sencillo que es el disco. Déjame pausar el video y en realidad nominar fue a pausar el video. Vamos a terminarlos rápidamente para que pueda terminar este video. Por lo que esto está vinculado a la imagen hotelera número tres. Esta se va a recortar imagen número cuatro. Y vamos a ver. Esto también puede tener estrellas de Forrest por ejemplo. A ver, calificando de cuatro estrellas. Haga clic en Copiar. No localice. Así. Y sus garras se están aireando. Puede finalmente, vamos a copiar rápidamente nuestras descripciones. Entonces vamos a ver. Yo no copié el correcto. Leche ¿QUIÉN León de Terminus, ese. Y veamos una vez más, ajustemos este texto a, por ejemplo, algo así. Y veamos, tal vez podamos incluso extenderlo un poco más allá hasta aquí. A ver, 30, creo que es bueno. En lugar de 14 días, lo que podemos hacer son los noventa, por ejemplo, mi papá Cerrar Todo. Y por el precio, tenemos 740. Por lo que obviamente va de lo más caro a lo más alto, a lo más barato agrega la botella. Pero obviamente estos hoteles de abajo van a ser mucho peores que estos de arriba en cuanto a calidad de alojamiento, calidad servicio, etcétera. Entonces esto es lo que dice el número tres. Voy a seleccionar todo aparte de la flecha Control C. Volver a mi hover Control V. Voy a eliminar todo aparte de la flecha y volver a mi estado predeterminado. Y por último, tarjeta de hotel número 4. Primero incluamos la imagen de lujo. Y vamos a ocuparnos de la información en eso. Déjame copiar la ubicación realmente rápidamente. Así. Y para este, por ejemplo, calificación puede ser, digamos tres estrellas. Por lo que 12. Entonces ahí lo tenemos, tres estrellas, este es el nombre, esta es la dirección analítica. Por último, copia la descripción del hotel y tendría que ajustar algunas de estas cosas para que no lo haga y voy a posicionar estas dos aquí. Ya veré si encaja lo hace. Hasta puedo moverlo hasta aquí, y eso me da un poco más de espacio. 14 días está bien. 740 va a ser un precio. Y por supuesto, puedes jugar con estos iconos si quieres destilar, tener, si un show te, esto todavía tiene esos dos estados. Para que puedas jugar con ellos si quieres. Pero creo que se ve bastante bien. Así que selecciona todo aparte del icono. Perdón, el rebaño lechero de flecha, y eso es todo. El elastina que quiero hacer es aumentarlos. Entonces haga doble clic y aumente un poco así. Y luego dentro del hover y hacer lo mismo por éste. Entonces Shift Alt, click izquierdo, dudo, y hacer lo mismo para este en el hover Shift Alt a la izquierda, y finalmente, el estado por defecto. Veamos si en realidad lo hicimos justo aquí con no lo hizo. Entonces a veces subes de atrás a frente con estas cosas y ahí lo tenemos. Lo último que quiero hacer es básicamente un cambio en estos los temas de espaciado. Entonces podemos ir desde la posición 400 todo esto hacia abajo. Y puedo ir con algo así como 150. Mi papá y simplemente bajar. ¿ Dónde está mi pie de página? Haciendo doble clic en el espacio vacío de mi mesa de trabajo y se expandió a más o menos por aquí. Ahí lo tenemos. Ahora una cosa más que podemos hacer es agruparlos como hicimos con éste. Golpea Control G para ponerlos en grupo. Y podemos llamar así a este grupo destino así. Y finalmente golpeó la vista previa para ver qué tenemos. Por lo que una vez más, si floto aquí mismo, el menú y el riego funciona como debería. Todo esto funciona bien. Esto funciona bien, por lo que podemos dar click en estos y funcionan bien. Dudo que esto se encienda hover. Se ve realmente bien. El espaciado es bueno. La edición funciona como debería. Derek hábitos en esto funciona como debería. Porque acabamos de copiar y pegar. Todo funciona como debería. Por lo que todo se ve bien y limpio. Entonces básicamente eso es todo para este video. En la siguiente, vamos a pasar a esta página y allí nos vemos. 34. Crear el diseño 9: Pasemos ahora y creemos la pantalla de oferta seleccionada. Por lo que una vez más, simplemente voy a usar mi vieja llave. Asegúrate de pegarlo aquí mismo, oferta seleccionada y cuándo cambiar esta línea germinal así. Y primero lo primero, vamos a seleccionar nuestra navegación. Entonces, en realidad vamos a copiar toda la sección superior. Es mucho más rápido. Arrástrelo y suéltelo aquí mismo. Ve pruébalo aquí mismo. Entonces rebaño lechero. Y dentro de esta sección de paradas, voy a deshacerme de esto. Voy a deshacerme de la sección de héroes. Dentro de una sección superior, tenemos nuestro nav principal. Entonces lo que vas a hacer dentro de este nav principal es básicamente cambiar todas estas cosas. Entonces voy a saltar dentro de aquí, voy dentro de mi logo y cambiarlo a oscuro. Y en el estado principal y predeterminado. Lo que voy a hacer es usar todo el texto dispuesto y cambiarlo a color gris oscuro. También voy a ir a nav secundaria y elegir oscuro para todos ellos como y que son Herat. Por lo que ahora todavía al hacer clic se va a actualizar y cambiar a blanco. Pero cuando estás sobre un fondo blanco va a ser este color. Entonces veamos la sección superior y fuimos a deshacernos de la vieja. Tenemos carrusel, por lo que imágenes de carrusel. Y déjenme arrastrar rápidamente y soltar mis imágenes en. Entonces este es el número uno, el número dos, el número tres. Y una vez más parecía como con todas estas viejas páginas, las conseguí todas de elementos de Envato. Entonces imagen carrusel. También tenemos estas imágenes. Por lo que estos son habitación más pequeña. Entonces no soy el número 1. Este es el número dos. Y por último, esta es la habitación número 3. Y básicamente esas son más o menos todas las imágenes que vamos a necesitar excepto una sección hotelera similar aquí mismo. Entonces vamos a trabajar en eso y luego podemos pasar a animar esto excepto por el conocimiento. Animemos rápidamente esta sección porque no es tan difícil. lo único que vamos a necesitar una vez más, esta flecha derecha nos está causando problemas. Entonces vamos a usar hover y vamos a ir a flotar, relajar 0.3 segundos para que tengamos el mismo. Y vamos a crear esto como un golpe de componentes clave Control. Estamos de vuelta a nuestro estado por defecto de diseño. Vamos a utilizar clicked una vez más dentro del estado clicado. Y lo único una vez más es que estas imágenes van a pasar a aquí así. Por lo que ahora podemos prototipo Petco volver al prototipo, volver a las flechas, a la derecha, punto de tabulador, dar click en él. Vamos a usar tap. La autonomía está dentro, fuera clicado como estado. Y 0.6 segundos, así que parece que lo hicimos. Y por último, ahora podemos cambiar al estado clicado. Usa un punto de tabulación izquierdo porque queremos que vuelva a aquí. Por lo que queremos ir al estado por defecto 0.6 muertes multa. Y preestreno de niño del estado predeterminado, solo para ver lo que tenemos hasta ahora. Por lo que tenemos el hover en ambos. Click, se va a cambiar. Click, se va a cambiar. Creo que se ve bien. Y ahora pasemos a la siguiente sección. Una vez más, tenemos estas habitaciones aquí mismo, y puedes hacer doble clic si quieres agregar en estas imágenes. Pero sólo los voy a dejar como si estuvieran aquí. lo que me voy a centrar en estos hoteles similares y no dejé esta sección para el final porque es la más complicada de esta página. Entonces lo que tenemos aquí mismo es que tenemos información completa para éste. Y básicamente vamos a crear un componente fuera de él. Entonces veamos. Hotel similar. Nuestros hoteles. Hice así hoteles similares, actual BG, hoteles similares, IMG, lácteos go. Por lo que voy a caer en mi imagen número 1. Entonces veamos, quizá pueda usar esas imágenes que usábamos previamente para los destinos. Entonces veamos. Puedo ir con, por ejemplo, Hotel número 1. Pero digamos que han seleccionado en este hotel. Entonces este primero. Entonces, en realidad vamos con lo que Dell número dos. Entonces, por ejemplo, si seleccionaron esta, llegaron a esta página, entonces podemos mostrarles estas tres, estas tres cartas por ejemplo. Entonces dejémoslo ahí dentro. Y ahora vamos a tener, porque tenemos esta información aquí mismo, los vamos a utilizar como nuestra información secundaria. Entonces vamos a crear rápidamente un componente. Tecla de control es lo que vas a usar. Estado Horace. Por lo que se cierne. Y dentro de nuestra sección de cosecha, una vez más parecía como siempre lo hicimos. Entonces ocho aquí mismo, vamos a mostrar el precio. Entonces la flecha va a aparecer así, nuestro ego. Y finalmente la imagen va a realzar sólo un poquito, para acercar sólo un poquito. Vuelve al estado predeterminado y ahora mantén presionada tu tecla Alt, haz un duplicado. Sostén la llave antigua, haz un duplicado. Por lo que este va a ser una vez más hotel uno o incluso mejor hotel también. Tan sólo para que lo sepamos de la página anterior. Hotel tres y finalmente hotel para. Ahora, en este segundo, lo que voy a hacer es rápidamente y arrastrar en esa imagen. Y yo voy a hacer lo mismo por este. Mi papá. Y ahora puedo enfocarme en hacer esos cambios. Entonces, en primer lugar, esta primera, yo, segunda va a tener la calificación de cuatro estrellas, así que no de cinco estrellas. que pueda ir a mi estado Horace y cambiar mi calificación para estar en cuatro estrellas, como es. Entonces eso es genial. El segundo va a ser cuatro, pero este tercero va a tener una calificación de tres como esa. Ahora centrémonos en este segundo. Por lo que realmente voy a copiar una vez más, información de mi diseño original. Por lo que sí mismo un poco de tiempo. Yo lo voy a copiar aquí mismo. Y por último, la descripción de este hotel va a ir justo aquí. En lugar de 12 días, nos vamos a centrar en nueve días. Nueve días. Y veamos qué podemos hacer con este espaciado. Por lo que quizá podamos incrementarlo para ser dos o seis. Creo que está bien. Y el precio es un 20. Vamos a comprobarlo aquí. En realidad no es, es 740, así que usemos ese. Entonces 740 y usamos 744, este último. Entonces sigamos con eso una vez más. 49 días. Y este es lo que C en realidad nueve días y 14 días es para este último. Por lo que 14 días ensucio. Y finalmente lo que voy a hacer es hacer lo mismo. Entonces copia la información de mi diseño original, pega eso aquí mismo. Mi papá. Y por último, copiar y pegar mi texto en rebaño lechero. Entonces eso es todo para estos estados originales. En estos. Voy a cerrarlos todos como así que voy a cerrar este info. Y finalmente, básicamente puedo cambiar los nombres. Este va a ser, veamos, hotel o hotel similar a imagen. Dejémoslo. Esto va a ser hoteles similares imagen dos y de igual manera hoteles imagen tres. Mi papá. Entonces lo que voy a hacer es seleccionarlos a todos. O lo que estoy pensando es que esto puede ser porque dice hotel a imágenes similares, herramienta hotelera. Se trata de imágenes similares, hotel tres. Y esto es similar imágenes hotel para, sólo porque hemos creado estos hotel para hotel tres hotel para. Entonces simplemente voy a copiar este nombre. Vuelve a mi estado de horror. Al igual que la suciedad y dentro de ella, voy a cambiar el nombre así. Y vamos a ver simplemente si se muestra. No funciona, así que tenemos que actualizarlo una vez más. Entonces en lugar de fecha Horace, haga doble clic aquí mismo, y vaya al interior de su imagen, agrandar. Se. Se ve genial. Vamos a comprobarlo ahora. Todavía no funciona. Entonces sigamos adelante y volvamos al estado por defecto, copiarlo desde aquí, vamos al estado de horror, péguelo aquí. Entonces una vez más, no sé por qué, por las pilas. Está bien. Entonces básicamente es justo aquí. Entonces voy a quitar el viejo y voy a hacer doble clic en el interior, agrandarlo un poco así. Vuelva al estado predeterminado, y ahora vamos a golpear la vista previa y ver si se muestra ahora. Todavía tiene algunos problemas entre esas imágenes. Entonces lo que voy a hacer en realidad es volver al valor predeterminado, estado, seleccionar todos mis ítems, Control C. Así que en lugar de la flecha en lugar de la flecha, todavía vamos a tener que expandirlos hecho, ¿no? Sí, pero podemos cambiar eso más tarde. Entonces lo que vamos a hacer es ir de la imagen 2 de aquí. Por lo que la imagen en de Mill, cópiala, ve a hover basándolo. Y donde lo hizo, lo pegó. Oh Dios mío, me estoy confundiendo. Por lo que voy a quitar este en cuatro en medio. Yo me voy a deshacer de eso. Y haga doble clic en. A ver si funciona ahora. Hoteles similares, está bien. Veamos si la animación funciona ahora. Todavía no funciona. Entonces déjame hacer otra cosa. Entonces esto es sólo la solución de problemas. Esto es lo que hago a diario. Y tú también vas a hacer eso. Entonces lo que vas a hacer es seleccionar todo, controlar C, ir al hover, seleccionar todo eliminado. Entonces obviamente en lugar de la actual BG Control V para pegarlo y simplemente cambiar a lugares como ese. Y entonces lo que vamos a hacer es posicionar esto a la cima. Ahora tenemos ese mismo tema que hacíamos antes. Entonces veamos. Todavía no entiendo. Entonces ahora tenemos otro tema que es que no podemos ponerlo fuera de la pila porque se puede ver que es, es, está dentro de la pila. Entonces lo que tendríamos que hacer es básicamente empezar todo de nuevo. Entonces lo que voy a hacer es volver un par de veces atrás. Mi papá, y yo básicamente voy a arrastrar y soltar la misma imagen. Entonces vuelve al estado por defecto, papá mío. Y voy a hacerlo. Usa este nombre. Por lo que hoteles similares, al menos la información es correcta. O imagen de hoteles similares y ese es el nombre. Estado por defecto. Voy a arrastrar y soltar esa misma imagen una vez más. Por lo que he estado localizado aquí, lo es. Ir al estado de terror y arrastrar y soltar un 10. Haga doble clic. Ahora, agrandarlo terahertz. Y ahora puedo ver si finalmente lo hago funcionar. Sí, puedes ver que ahora la imagen es suave y la transición es suave. Pero una vez más, va a ser un verdadero reto, cambiando todos estos. Entonces lo que voy a hacer es basar la edición por debajo de la calificación. La calificación se va a quedar donde está. Nos vamos a actualizar manualmente porque podemos ver aquí tenemos cuatro estrellas para nuestras estrellas aquí, sólo tenemos tres estrellas aquí. Por lo que vamos a actualizar manualmente las calificaciones. Hagámoslo ahora. Por lo que dentro de aquí, podemos ir a la calificación y quitar ésta. Entonces ahora tenemos tres. Para que cuando, cuando lo arrastremos y lo soltemos dentro vaya a ser mucho más sencillo. Entonces lo que voy a hacer es copiarlo todo. Y control de precios C, yo, que voy a ir al estado de terror basado todo justo debajo de aquí. Voy a quitar mi info así. Entonces voy a quitar mi imagen. Por lo que esta imagen original se queda donde está. Y voy a dejar ver, mantener este precio. Se quitó esto en cuatro por ejemplo, porque necesitamos mantener nueve días dentro. Mi papá se quitó de este precio y ahora tenemos lo que necesitamos. Entonces si cambio entre ellos, esta información es correcta excepto por el precio. Por lo que puedo cambiar el precio manual años más o menos. Por lo que 740. Y eso, y esto porque está en estado de horror, también podemos cambiar manualmente este precio también a 1740 como el hecho ahora volvamos a aquí y podemos trabajar en esta imagen. Por lo que en el estado por defecto, el daño se llama hoteles seminales imagen 3. Puedo volver al estado Horace y renombrar esta imagen. Y luego simplemente desde mi carpeta, arrastra y suelta esa imagen en doble clic y puedo ampliarla. Y de inmediato. Antes de seguir adelante, vamos a comprobar rápidamente si funciona. Debería ahora. Sí. Entonces sí funciona. Todo sigue igual como debería. Entonces ahora trabajemos en este tercero y terminemos esto finalmente. Entonces precio, cambiamos el DAT. A ver, estamos en estados de horror. Vayamos al estado por defecto. Una vez más, voy a elegirlo todo. Golpe Control C, vuelve a mi estado de horror. Hit Control V sólo pertenecía a mi imagen. Entonces me voy a deshacer de esta imagen, pero antes de hacerlo, voy a renombrar mi top one. Entonces me desharé de él. Deshazte de esta información. Y deshazte de esto. A ver, 14 días está bien, así que voy a dejarlo. El precio es correcto, pero voy a eliminarlo 12 días borrado, y mantener esta información en. Por lo que una vez más, simplemente voy a arrastrar y soltar mi imagen aquí, hacer doble clic para entrar a la zona de Moscú, agrandarla y rebaño lechero. Perdón por todos estos temas, pero cuando estaba diseñando, no tenía estos temas. Por lo que Adobe XD a veces decide que lo que estás haciendo quizá no sea lo mejor, por lo que trata de luchar contra ti. Pero en caso de que creas que tienes razón, tienes que hacerlo y tratarlo y tienes que trabajar en contra solo para tener tu opinión porque este es el software después de todo, no es un ser humano buscado. Tienes que trabajar en contra. Y ahora por fin, trabajemos en esta barra lateral y terminemos esta página. Entonces vamos a ver, estamos 149 abajo por alguna razón. Entonces veamos todo. Muévete. A ver, en realidad, voy a seleccionar esta información de fondo. Deshazte de él. Selecciónelo desde aquí. Entonces de aquí para aquí, controla C, ciérralo, controla V, y muévelo hacia abajo 150, así. Entonces, veamos si nos cortó el pie de página. Creo que eso no le gustó. Lo que voy a hacer para no aburrirte demasiado con estos es realmente copiar y explicar lo que hice. Entonces voy a abrir mi barra lateral. Voy a abrir mi documento original y mi diseño original solo para mostrarles lo que hice. Entonces voy a copiar toda esa información. Voy a saltar aquí mismo. Lo voy a pegar, alineando con mi información original. Y luego voy a ir todo el camino a la baja excepto por el precio y quitarlo. Y ahora que un hábito, puedo ir entre ellos y explicar lo que f hizo. Entonces aquí, déjame solo comprobar si mantuvo las transiciones originales. No lo hizo. Por lo que necesitaría incluir las transiciones y más adelante. Entonces lo que he hecho aquí mismo es que se puede ver que dentro de este chequeo, tengo mi estado por defecto y tengo mi calendario. Y lo que hice por este tipo, y simplemente uso la grilla de repetición. Entonces si salté dentro, puedes ver aquí cómo una semana. Y para estos datos simplemente use un círculo con el color principal. Esta es la cuadrícula de repetición. Entonces básicamente cosas realmente básicas realmente. Y yo hice lo mismo por éste. Entonces si salto aquí mismo, se puede ver que también tengo calendario. Ahora, lo que hice por todos estos otros, por el tipo de habitación, por ejemplo, todavía se mantiene el estado predeterminado, pero no me mostró el estado abierto. Tan clicado estado. Lo que tengo aquí es básicamente exactamente lo mismo que hicimos anteriormente. Entonces vamos a desmutarlas rápidamente para que pueda mostrártelo. Por lo que para el check-in, vamos a tener, por ejemplo, estado clicado. Entonces hagamos el mismo tipo de clicked dentro del estado clicado. A ver, podemos, por ejemplo, mostrar nuestro calendario así. Y eso es básicamente todo para este. Entonces checkout, puedo crear un estado clicker también. Al igual que papá, dentro del estado camarilla, ocurren corto mi calendario. Eso es todo. Para el tipo de habitación, podemos crear. Haga clic en los estados. Si decide trabajar así. Y para el tipo equivocado, lo que queremos es que este insumo cambie. Entonces lo primero es lo primero, este icono de flecha va a girar. Puedo rotarlo de esta manera. Entonces tengo mi entrada BG, que va a escalar básicamente exactamente lo mismo que lo hicimos hasta ahora. Vamos a aumentar nuestras máscaras a algún lugar por aquí. Por ejemplo, Derek hábito. Podemos volver al estado por defecto, adultos. Entonces para nosotros, vamos a crear ese estado clicado. Dentro del estado clicado, vamos a rotar nuestra flecha, como hicimos con la de arriba. Entrada BG. Voy a ampliarlo todo el camino hasta algún lugar por aquí, por ejemplo, máscara. Yo lo voy a flotar así. Voy a pasar a los niños. Nuevo estado, clicé yo dat entradas y flecha abajo. Y asegúrate de que cuando estés girando estas flechas para rotarlas en la misma dirección. Porque si no lo haces, va a mostrar de verdad y va a ser realmente problemático un poco más tarde. Entonces misa. Y se puede hacer esto exactamente en el mismo lugar. Pero creo que eso va a funcionar sin importar. Sli, servicio clicado estado. Y voy a bajar en absoluto exactamente en la misma dirección. Entrada de texto BG, Vamos a ver, máscara. Voy a desenmascararlo, entrada Vg, posicionarlo más o menos por aquí, por ejemplo, luego expandir nuestra mascota apenas un poco hacia abajo. Y por último, vamos a ocuparnos de las excursiones. Entonces, solo agrega un nuevo estado. Y una vez más, estoy usando el nombre clicado para todos ellos solo para que los desarrolladores sepan litro o cuando les envías estos archivos, cómo todos ellos van a básicamente y Hub todos ellos van a quedar así. Entonces lo voy a alinear con nuestra forma de fondo. Y esto es un grupo de desplazamiento, por lo que van a poder desplazarse hacia abajo, volver a hacer clic en el estado y lácteos cómo vender. Ahora animémoslos y terminemos esta página. Por lo que primero para el check-in. Voy a seleccionarlo, pero como pueden ver, ocupa realmente una enorme cantidad de espacio. Entonces veamos. Sí, simplemente pinchemos aquí. Estado predeterminado, toque auto animar. Se va a ir a hacer clic en estado ahora es 0.6 y clicó básicamente lo mismo. Sólo tienes que ir al estado por defecto. Dan, para la caja, podemos hacer lo mismo. Tan correcto. Al igual que dentro del estado clicado, puede ir al estado por defecto. Y simplemente, vamos a traerlo de vuelta a aquí. Un tipo equivocado. Por lo que una vez que hagan clic ahí mismo, los llevará al estado cliqueado. Una escalera en clicked, va a llevarlos al estado predeterminado Cambiar de nuevo, que aquí también, adultos. Por lo que puedes ver muchas de estas tareas son realmente repetitivas y realmente aburridas, pero todas son parte de este trabajo. Entonces ve, supongo que lo voy a poner afuera porque se ha decidido tener su propia opinión una vez más. Tan clicado estado, cuando estás en clicked y volver al valor predeterminado. Imagínate que si Adobe XD no guardara todos estos ajustes, te volverías loco. Y así fue cuando se acaba de empezar. Pero por suerte, el equipo está trabajando muy duro con todas estas actualizaciones y cambios. Entonces de vez en cuando, realmente están golpeando el clavo en la cabeza con todas estas características útiles. Y por supuesto, puedes agregar tu voz yendo a la voz del usuario. Y simplemente pueden escuchar a toda la gente y lo que la gente está diciendo. Y Dan, evita esos cambios o aplica esos cambios dependiendo de si necesitan aplicarlos. Entonces, una vez más, lo que tenemos es esto aquí mismo. Por lo que funciona muy bien. Y no mostré esto. Una vez que haces clic en cualquiera de estos, vuelve a estar en estado original tanto una vez que haces clic ahí, va a volver a este estado más oscuro. Por lo que se levanta realmente bien contra un fondo blanco. Entonces aquí, si hago clic, se va a llevar el calendario. Había rocas ahí. Bueno, pero aquí está nuestro tema. Por lo que tienes que hacer click en algún lugar por aquí. Y eso es lo que estaba diciendo. Por lo que tendrías que hablar un trigo a tu cliente sobre este. Entonces tal vez podamos poner el calendario justo por encima tal vez o sol, papá, porque todos estos otros están funcionando bien. Pero tenemos algunos problemas superpuestos con el calendario. Entonces si hago clic en ejemplo aquí, se va a mostrar. Pero una vez más, el calendario es el tema aquí. Entonces no lo sé. A lo mejor puedes hablar con tu cliente, sólo explicarles cómo va a funcionar todo esto, o tal vez incluso ocultarlo justo detrás de esto para que no traiga todos estos temas. Pero básicamente, como puedes ver, puedes hacer clic en algún lugar fuera de aquí así, por ejemplo. Y luego se va a mostrar, y tal vez puedas hacer click en algún lugar justo aquí para los adultos. Conoce. A lo mejor puedes traer el punto tabulador aquí mismo para que los adultos vieron a Dan, se va a mostrar así. Entonces hagámoslo realmente. Yo voy a demostrar eso. Por lo que los adultos vuelven a Diseño. Voy a usar mi máscara. Y lo voy a extender sólo un poquito hasta aquí. Entonces ahora esos van a ser nuestros puntos tapping. Entonces si volvemos a Preview, vuelve a aquí. Si hago clic en algún lugar por aquí, se puede ver que se abre a estos adultos. Entonces necesito hacer lo mismo por aquí, pero ni siquiera tengo que hacerlo porque está abierto aquí mismo. Y ahora por fin, vayamos hacia abajo y veamos qué tenemos hasta ahora. Por lo que hemos completado estos trabajos como deberían realmente muy bien. Y luego tenemos un hover dentro del hover, que me gusta mucho. Tenemos este botón y estos funcionan como deberían. Entonces, una vez más, puedes hacer el mismo truco aquí. Para que puedas ampliar tu máscara y puedes decirle a tu cliente que solo haga clic en esas áreas están fuera justo afuera solo para que puedan obtener la imagen completa de cómo va a funcionar todo esto. Y básicamente eso es todo para esta página. Perdón por eso en medio. Pero como dijo, en mi diseño original, solía funcionar sin ningún problema, pero por alguna razón aquí mismo, realmente no funciona desde la primera vez, así que realmente no sé por qué esas cosas están ocurriendo. Adelante y agrupemos toda nuestra información. Así que golpea Control G. Y lo voy a llamar oferta seleccionada. Mi papá los puso en una pila. Y no va a reconocer la pila. Pero una vez más, puedes saltar por dentro y cambiar estas secciones porque entre todas son 150. Pero justo aquí en la parte superior estamos en el foro 80, justo aquí. Lo reconoce desde aquí. Entonces 100 porque tenemos esas flechas. Así que sólo asegúrate de tener eso en cuenta. De qué va a ser esto. Podemos llamarlo, por ejemplo, una sección de información hotelera. Y vamos a tener todo eso recreado dentro. Y eso es básicamente todo para pantalla de disco. Una vez más, lo siento, pero a veces vas a notar que vas a hacer queriendo, lo vas a hacer, ¿verdad? Por ejemplo, estás usando redimensionamiento responsive, digamos, y funciona, entonces lo vas a probar la próxima vez. Pero Adobe XD no te dejará porque piensa que estás tratando de hacer otra cosa. Y básicamente eso es lo que ese era el tema aquí mismo. Pero tu trabajo como diseñador es resolver todos estos problemas los cuales van a surgir y salir a tu camino. Entonces eso me gusta mucho. Te mostré que todos estos errores pueden ser fácilmente arreglables. Solo tienes que seguir estos patrones simples o lo que hagas. El primer estado, asegúrate de repetir en el segundo estado, asegúrate de que todas tus capas tengan el nombre correcto. Por lo que son el mismo nombre entre los estados y todo va a funcionar como debería. En el siguiente video, vamos a pasar por fin a esta página. Nosotros lo vamos a diseñar y nos vemos ahí. 35. Crear el diseño 10: Ahora sigamos adelante y terminemos nuestro proceso de diseño diseñando esta pantalla de pago. Tan mismo que antes. Sostén tu vieja llave, asegúrate de que sea 70. Acercar. Y lo voy a llamar diseño de pagos. Y entonces simplemente voy a saltar aquí mismo, usado sección superior hit Control C porque este es el fondo blanco, así que lo mismo que está justo aquí. Yo lo voy a quitar, luego golpea el control V para pegarlo aquí mismo. Ellos son Herat. Entonces básicamente tenemos todos esos mismos detalles ahora porque este era nuestro hotel, nuestro hotel original, este. Entonces solo voy a saltar aquí mismo a la tarjeta del hotel detalles del hotel y lo voy a llamar actual de hotel, IMG. Yo lo hice. Y también voy a saltar dentro de mi carpeta de imágenes y la voy a bloquear esa misma imagen. Y básicamente lo voy a arrastrar y soltar dentro esta manera para que sepamos que es éste. Entonces Uli dice union hotel aquí, reduzca. Todas esas imágenes son atrevidas. Entonces básicamente esta es la misma imagen que ésta. Y verás tu nuevo hotel. Así que solo asegúrate de tener toda tu información en su lugar. Y la deuda, se ven igual terminó para parecer como deberían. Entonces básicamente eso es todo. Y lo único que tenemos que hacer en esta página es traer esta información de fondo de esta página. Por ejemplo, voy a golpear Control C. Ir a esta página, golpear Control V. Asegúrate de que estamos aquí y vamos a ver 150, está bien. Voy a arrastrarlo y soltarlo al grupo de hierro inferior. Y una cosa menos es por supuesto, animar esta sección. Entonces lo que voy a hacer es presionar Tecla de control. Para crear esto como componente. Nuevo estado va a ser pago. Dentro del pago, lo que vamos a hacer es bajar esto a 0, llevar la información de la tarjeta a 100, ir al pago, cambiar el color a negro, y esto va a ser gris claro. Eso es básicamente todo. Y finalmente, crear un nuevo estado a la confirmación así. Y dentro de la conformación, vamos a bajar esto a 0 y subir esto a 100. Y por último, selecciona esto casi negro, y esto va a ser gris claro, y eso es básicamente todo. Entonces ahora sigamos adelante y lo prototipemos. Si hicieras prototipo, voy a seleccionar el pago. Da click en él y vamos a ver, podemos ir a la sección de pagos está en nuestro 0.6. Eso está bien. Y da click justo aquí que podemos ir a confirmación. Pasar al pago. Y voy a seleccionar los detalles del viaje para ir al estado por defecto. La conformación es información. Y finalmente, confirmación. Pago usado ir al pago. Detalles del viaje va a ser nuestro estado por defecto y la vaca lechera lo. Ahora vamos rápidamente a la vista previa y a ver qué tienes. Por lo que una vez que haga clic en pago, se va a cambiar fácilmente. Y no creo que esto esté centrado, así que en realidad lo es. Pero veamos qué podemos hacer con él. Realmente no encuentro esto realmente todo tan atractivo. Conformación. Funciona bien. Esto funciona como debería, y esto funciona, pero hay que esperar un poco a que XD se desbloquee por alguna razón. Por lo que intenta atacarlos desde un costado. Así que trató de venir de aquí en lugar de directamente de aquí. Entonces a veces no va a funcionar. Por lo que una vez más, detalles de pago y recorte, todo se ve como debería. Déjame comprobar rápidamente el pago de la deuda y ver qué tenemos ahí mismo. Entonces diseña hasta la corriente, déjame ocultar la información de mi tarjeta de detalles del hotel, y veamos qué tenemos ahí mismo. Entonces todo está bien, pero no me parece todo tan bonito porque está compensado. Así que intenta cuando estás recreando este diseño, trató de figurar algo más con estos campos de formulario. Entonces o moverlos todos a la izquierda o poner el texto del número de tarjeta en el centro del campo o el domingo, que tal vez la muerte le traería una mirada realmente más agradable, más agradable. Pero dejémoslo así por ahora y no perdamos demasiado tiempo. Pero eso es básicamente todo por ahora. Cambiemos rápidamente entre estados y eso es todo. Eso está bien. Y como cierto lo adeuda para la etapa de diseño. Por lo que en la próxima serie de videos, vamos a trabajar en el diseño responsive. No te voy a molestar demasiado con un diseño responsive para todas las páginas. En cambio, sólo nos vamos a centrar en la página principal porque es la más grande. Y quiero mostrarte cómo todos estos cambios afectan tu diseño responsive una vez que comiences a diseñar para todos estos diversos tamaños de pantallas. Y te voy a mostrar algunos consejos y trucos que puedes usar, sobre todo con función de redimensionamiento responsive en Adobe XD. Eso te va a ayudar de verdad cuando empiezas con este diseño receptivo. Entonces te veré ahí. 36. Comenzar con el diseño responsivo: Ahora que hemos terminado nuestro diseño, es hora de pasar a un diseño receptivo. Pero antes de que lo hagamos, solo quiero mencionar rápidamente qué es y cómo puedes acercarte al diseño receptivo. Básicamente, diseña cuando lo estás haciendo, la forma en que hemos hecho en esta clase son columnas y contenido. Básicamente, todo el contenido que tengas vas a distribuir a lo largo de estas columnas. No importa si tu diseño tiene 4861216 columnas, no importa. Lo único que importa es el contenido, que es infinitamente escalable. Lo que eso significa, tienes, por ejemplo, en el diseño de 12 columnas, tienes la imagen que tiene 12 columnas de ancho. Entonces hay que poder escalarlo a tamaños más pequeños como tu teléfono móvil, por ejemplo, para ser, por ejemplo, cuatro columnas de ancho o seis columnas de ancho u ocho columnas de ancho. Por lo que hay que tener eso en cuenta cuando empieces a diseñar. Eso no se puede adaptar más adelante. Es decir, se puede, pero va a ser mucho más difícil entonces tener todas esas cosas en mente una vez que empieces a diseñar. Por eso yo, a lo largo de esta clase, pongo todos mis elementos, por ejemplo, dentro de las pilas. Me aseguro de tener espaciado consistente entre ellos sólo porque una nueva deuda, vamos a diseñar esto para responsive más adelante. Cuando se trata de diseño receptivo en su conjunto, tienes que hablar con tus desarrolladores porque a veces tus preferencias son lo suficientemente buenas. Digamos que te gusta diseñar, por ejemplo, dentro de las 12 columnas para el escritorio, dentro de las ocho columnas para la tableta y cuatro columnas para móvil, a veces con los desarrolladores, eso está bien para ellos. Por lo que sólo hay que crear esos tamaños porque tienen que saber dónde están los puntos de ruptura, lo que significa dónde está cambiando el tamaño de la pantalla, dónde va de escritorio a tabletas, a móviles y así sucesivamente. Por lo que hay que diseñar todos esos tamaños diferentes para que puedan saber qué tan amplia es la imagen, por ejemplo, qué ancho es el botón, qué ancho es el texto, cuánto texto hay dentro del determinado elemento y así sucesivamente. Por lo tanto, hay que diseñar para todos esos tamaños. Ahora a algunos desarrolladores les gusta usar sus propios tamaños, sus propios estilos, sus propias pautas. Por lo tanto, antes de empezar con el diseño responsive, asegúrate de hablar con tus desarrolladores. Asegúrate de preguntarles de qué tamaños van a apoyar. Porque a algunos desarrolladores les gusta apoyar, por ejemplo, estas enormes pantallas como televisores por ejemplo. A otros les gusta soportar solo escritorio básico, que es en este caso 1920 por 1080, algo así como diseñamos. Y a algunos otros desarrolladores también les gusta apoyar cada tamaño individual. Por ejemplo, 1920 por 1080 Dan, 1280 por 860 y así sucesivamente y así sucesivamente. Por lo que pasan de este enorme tamaño hasta el tamaño más pequeño. Si bien a otros desarrolladores les gusta diseñar, por ejemplo, tres tamaños principales, como dije, por ejemplo, desktop, tablet, y mobile, nunca diseñados en tamaños para iPads, por ejemplo, porque ese no es el tamaño correcto. De esa forma acabas de diseñar para la propia pantalla del iPad, asegúrate de familiarizarte con estas líneas de cuadrícula. Puedes usar sitios como Bootstrap y puedes explorar Angular, por ejemplo, solo para ver qué están haciendo otros diseñadores por ahí. ¿ Qué están creando mezcla para familiarizarse qué son algunas de estas líneas de cuadrícula, cuáles son algunos de estos tamaños de cuadrícula, nuestra mezcla para explorar sistemas, como dije, como Bootstrap, trató de hacerlo. Usa algo así como sistemas de diseño. Asegúrate de usar 8 cuadrícula. Simplemente familiarízate si apenas estás empezando con todas estas cosas. Pero con el tiempo, una vez que te lo cuelgues, una vez que empieces a trabajar en él, una vez que tengas pocos proyectos debajo de tu cinturón, entonces vas a determinar los tamaños y el espaciado que funciona para ti, tu estilo, tu flujo de trabajo, y Daniel lo va a aplicar a proyectos que avancen. Pero una vez más, tan pronto como empieces a diseñar con estas cosas en mente, por lo que las columnas en cuantitativa, va a ser mucho más sencillo para ti aplicar este método a cualquier tipo de tamaño de cuadrícula, cualquier tipo de espaciado, cualquier tipo de ancho de canalón, ancho de columna. No importa mientras tengas en mente este enfoque de diseño responsive. Ahora, con eso dicho, a algunos diseñadores les gusta comenzar con tamaños móviles, lo cual está bien. A mí me gusta empezar, por ejemplo, con tamaños de escritorio. Lo que diseñamos hasta ahora y lo que creamos hasta ahora, realmente no importa en el día y la edad de hoy siempre y cuando tengas este enfoque en mente, este enfoque escalable. Porque una vez más, no puedes cambiar el ancho de tu pantalla, pero puedes cambiar la altura. Y es por eso que, por ejemplo, un dispositivo móvil que puedes interminables pegamentos gatear en Facebook o Instagram, por ejemplo, porque el contenido se está ajustando a la altura de la pantalla, No se está ajustando al ancho de la pantalla. El ancho se mantiene igual, pero se está ajustando a la altura de la pantalla. Es por eso que este enfoque de respuesta es importante. Y si lo aprendes, si empiezas a aplicarlo, vas a cosechar los beneficios más pronto que tarde. Ahora volvamos al archivo Adobe XD y te voy a mostrar los tamaños que van a estar usando y se van a incluir en este archivo de práctica. Así que asegúrate de comprobarlo, asegúrate de explorarlo y asegúrate de usarlo y probarlo por ti mismo. A ver si funciona para ti. Si no lo hace, realmente no importa. Puedes encontrar los en línea y puedes usar diferentes que se ajusten a ti y a tu estilo de trabajo. Por lo que ahora cambiemos al archivo Adobe XD. Te voy a mostrar lo que quiero decir. Entonces lo que tenemos aquí mismo es el archivo Adobe XD en el que hemos trabajado. Y simplemente voy a seleccionar algunos de estos son tableros de mi diseño original. Voy a copiarlos y luego lo voy a pegar aquí mismo. Entonces aquí están esas mesas de trabajo y les voy a mostrar lo que son en un segundo. Y aún tengo ese tema que tengo anteriormente. Entonces déjame deshacer eso. Y permítanme, por ejemplo, probar esto. Déjame escribir aquí. Y déjame hacer uno por uno. Entonces por ejemplo, puedo, Todavía se enfrenta ahí mismo. Entonces no importa. Voy a crearlos a mi manera. Entonces lo que voy a hacer es usar mi mesa de trabajo, crear un nuevo aeropuerto. O si hago eso, simplemente va a hacer eso una vez más como lo hizo. Entonces lo que realmente voy a hacer es usar esto y luego lo voy a duplicar sosteniendo mi vieja clave. Y voy a quitar todo el contenido dentro de mi papá. Y yo lo voy a llamar, Vamos a ver. Escritorios grandes. Así, o 1200 píxeles. Y vamos a quitar esta línea de rejilla. Yo dat. Y ahora empecemos a trabajar en ello. Entonces lo que vas a tener aquí mismo, en lugar de 1920, vamos a tener 1440 así. Entonces todavía vamos a tener 12 columnas, pero ahora el ancho de canalón va a ser de 30 porque este espaciado es mucho menor. Vamos a tener 65 aquí y aquí vamos a tener 165. Ahora a veces XD te va a batallar, pero hay que seguir adelante ordena bien, con 30, que 65, con 16, 5, que creo que está bien. Ahora, antes de seguir adelante, permítanme explicar qué es esto. Entonces esto es básicamente para los tamaños de escritorio más pequeños, tal vez para los portátiles que son, veamos, 14 pulgadas o 13 pulgadas o algo así porque queríamos tener este tamaño, que va en medio, estos grandes tamaños para escritorios grandes y tamaños pequeños para tablets, por ejemplo, porque queremos la continuidad de nuestro sitio web y por lo tanto queremos que se vea algo así. Déjame ir al más cercano. Entonces voy a usar un 1084, éste también, sólo para poder cerrarlo para que no nos distraiga demasiado. Y también lo voy a mover aquí mismo. Porque aquí abajo, voy a usar estos sitios web y tamaños originales. Entonces solo quiero mantenerlo fuera del camino. Por lo que una vez más, tenemos escritorios grandes o un 1200 píxeles. Y viste que sigo usando 12 columnas. Sigo usando ancho de canaleta. Pero ahora de 30, así que era 60, así que es medio papá en y ancho de columna es de 65. Sigo usando los márgenes vinculados de 165, que son estos. Por lo que son 165 de este lado y 165 de este lado. Pero puedes usar cualquiera de los márgenes que quieras. De verdad todo depende de ti. Ahora duplicemos este. Voy a sostener mi tecla alt y asegurarme de que sean 70. Una vez más, como antes. Ahora, esto va a ser dispositivos de gran tamaño hasta 992. De qué va a ser esto, Son sólo esas laptops más pequeñas y estas tabletas grandes, por ejemplo, en el tamaño del paisaje. Por lo que una vez más, quiero apoyar a todos esos. Pero una vez más, cuando estés trabajando en proyecto real, asegúrate de hablar con tu cliente sobre qué tamaño van a apoyar. Entonces como dije al inicio de este video, tal vez no quisieron apoyar todos estos. A lo mejor sólo quieren 1920 por 1080 y luego se mueven directamente a los tamaños de tabletas. Por lo que una vez más, asegúrate de hablar con ellos, asegúrate de ver cuáles van a apoyar. Y obviamente, el presupuesto del proyecto y cuánto vas a cobrar va a depender de cuántos de estos tamaños tengas en esta clase. Simplemente vamos a adaptar la página de inicio porque es la más grande a todos estos tamaños. Pero solo imagina que tienes, por ejemplo, 20 páginas. No es lo mismo si quisieran esas 20 páginas en tres tamaños. Y si quieren esas 20 páginas en, por ejemplo, 10 tamaños diferentes. Entonces no es lo mismo. Tienes que hablar con ellos qué tamaños van a apoyar antes de iniciar el proyecto. Si vuelves al video breve de diseño y si abres la plantilla de breves de diseño, puedes ver que todos estos tamaños de los que hablo están listados en el resumen de diseño. Y esa es una gran parte importante del resumen de diseño y el proceso sí mismo es hablar con tu cliente y sus desarrolladores sobre qué tamaños van a apoyar. Porque no sólo depende de cuánto vas a cobrar por este proyecto. También depende en gran medida de cuánto, ¿cuánto tiempo va a tardar? Porque una vez más, entre más tamaños tengas, más tiempo te va a llevar adaptar todas estas diferentes mesas de trabajo y pantallas a todos esos tamaños. Ahora volvamos atrás y creemos otro. Entonces como dije, esto va a ser hasta 992. Y vamos a ver, va a ser 1024, así. Por lo que se puede ver que está empezando a ponerse perilla más pequeña y más pequeña aquí mismo. Puedes usar 88 columnas, pero todavía voy a usar 12 solo para mostrarte. Entonces vamos a usar 30 y vamos a usar 50 para el ancho de columna. Entonces volvamos de nuevo aquí mismo. Entonces 30, 50, y usemos 47 aquí. Asegúrate de que seamos 47. Se puede ver que XD va a pelear contigo, pero hay que seguir en ello. Por lo que 12305047. Y se puede ver que debido a que XD es una herramienta después de todo, es un software, no va a reconocer de inmediato lo que estás tratando de hacer. Entonces, por tanto, sólo hay que perseguir y persuadir. Entonces voy a sostener mi vieja llave, duplicar esto una vez más. Y ahora estamos empezando a entrar en territorio de tabletas. Ahora, estos son de hasta 76, ocho píxeles de ancho. Por lo que puedes ver estos como, por ejemplo, retrato para iPad, retrato para Microsoft Surface y dosis de tabletas. Entonces estos son el ancho de 768 así. Y ya van a tener ocho columnas. Por lo que tenemos mucho más espacio entre nuestras columnas. Van a ser 29 para el ancho de canaleta, van a ser 64 de ancho de columna, y finalmente 42 para estos márgenes. Por lo que una vez más, 296042. Y ahora que los hemos terminado, Vamos a crear ahora una dimensión final, que va a ser para pantallas móviles. Ahora, como dije, realmente no se requiere y no es realmente buena idea diseñar para teléfonos, por ejemplo, una recta para iPhone, recta para una galaxia, recta para Google Pixel. Porque las personas que están usando teléfonos que no son estas fuentes, no van a tener buena experiencia. Por eso codifica tu apoyo a estos puntos de ruptura para que tu contenido se escale bien. Por ejemplo, si tus usuarios tienen estos enormes teléfonos, tal vez se vaya a abrir como éste. Si tienen estas fuentes realmente pequeñas, se va a abrir como esta. Entonces es realmente todo dependiendo de todos esos tamaños. Entonces vamos a asegurarnos de que el ancho sea 375. Asegúrate de que ahora estamos usando cuatro columnas. Asegúrate de que estamos usando 30. Aquí hay un 61 y 20. Por lo que me aseguraré de persuadir de que funciona. Entonces una vez más, 3061 y vamos a usar 20 abajo. Entonces Derek, oh, y ahora se puede ver que tenemos estas cuatro columnas. Ahora cómo se va a escalar nuestro contenido, lo vas a ver en tan solo un segundo. Pero básicamente solo vamos a adaptar este mismo diseño que tenemos en nuestra página de inicio a todos estos diferentes tamaños. Entonces lo primero que voy a hacer es usar en realidad esta página de inicio, mantener presionada mi tecla Alt, y arrástrela hasta aquí. Y luego voy a saltar dentro y llamarlo responsive. O mejor aún, llámalo esta abreviatura aquí. Entonces homepage en diseño y en éste, porque vamos a utilizar todas estas otras abreviaturas, M, antes de llegar a diseñar y diseño responsive, solo quiero usar mi nav principal, principal nav y mi logo. Entonces voy a exportar mi logo porque quiero usar PNG para esto, porque este logo, como expliqué anteriormente, porque tiene estos tres elementos en su interior cuando toda una tecla de turno MMA, se puede ver que no escala todo tan bien, si sostengo el Shift y Alt y clic izquierdo, como pueden ver, todos ellos están empezando a agacharse. Entonces lo que voy a hacer es presionar Control o Comando E. Elija mi escritorio, por ejemplo, y simplemente exporte como PNG. Y luego voy a volver a buscar mi logo. Voy a traerlo de vuelta a aquí. Entonces por aquí. Y simplemente lo voy a posicionar aquí. Asegúrate de que esté en el mismo lugar que el logotipo original así. Voy a moverlo por debajo de mi punto papá y cuándo golpear Eliminar en mi logo. Ahora, vamos a explorar rápidamente. Entonces destinos, logo de navegación primaria, como puedes ver, no lo actualizó, así que tengo que hacerlo manualmente. Entonces lo que voy a hacer es usar un logo de mi nav primario, golpear Control C. Y luego medio para hacer eso por todos estos otros y todos estos otros estados, voy a saltar, asignar un logo, golpear Control V posición aquí mismo. Y simplemente lo va a posicionar en el mismo lugar. Entonces voy a seguir haciendo eso. Voy a pegarlo en todos estos otros estados. Y básicamente en el siguiente video vamos a seguir donde lo dejamos aquí y vamos a empezar a adaptar nuestro contenido a todos estos tamaños de diseño responsive. Además, una última cosa que quiero mencionar antes de entrar en diseño responsive real es a veces vas a usar el menos contenido. Entonces en algunos de estos casos, como por ejemplo, esas tarjetas de destino, si recuerdas, porque usamos flecha izquierda y derecha, usamos ocho en total para estos tamaños más pequeños puedes usar y dividirlas. Por ejemplo, no lo sé, dos por dos. Por lo que los usuarios tienen que tocar pocas veces. Pero lo que realmente me gusta hacer es sin perder el tiempo. Por ejemplo, podemos pasar de ocho en este tamaño más grande a seis en este tamaño más pequeño a cuatro en estos medios, por ejemplo, tamaños de tabletas, una sola tarjeta en tamaño móvil. Para que puedan desplazar a izquierda y derecha entre todas estas tarjetas y tocar el botón de todos modos. Entonces también, hay que pensar en los estados hover y vamos a hablar de ellos una vez que realmente lleguemos a esos estados superiores y adaptándolos. Entonces cómo los estados obviamente no son necesarios en los tamaños de móvil y tableta porque no se puede pasar el mouse ahí. Por lo que los vamos a quitar y nuestro contenido va a verse un poco diferente a lo que está en nuestros tamaños de pico para escritorios. Entonces los veré en el siguiente video y voy a seguir trabajando en este logo. Basándolo en todos nuestros estados para que podamos adaptarlos fácilmente más adelante. Entonces te veré en el siguiente video. 37. Crear diseño responsivo: De acuerdo, entonces ahora que he terminado de ajustar mi logo e incluir este ser y jean a todos los estados. Empecemos ahora trabajando realmente en el diseño receptivo. Entonces lo que tenemos aquí es la opción de diseño responsive para el propio tablero de arte. Pero no te recomendaría que lo utilices porque si seleccionaba y luego crecí justo aquí al medio de mi tablero de arte aquí, luego empezar a trabajar en mi diseño responsive. Se puede ver que algunos elementos están funcionando bien, pero otros no. Y se están aplastando sin fin, pero puedes usarlo para páginas más simples. Por ejemplo, las páginas de destino con no demasiados detalles y opciones. Pero como dije, no lo vamos a usar porque tenemos múltiples estados, tenemos múltiples opciones para cada una de estas diferentes secciones de nuestras páginas. Entonces, por lo tanto, quería hacer todo a mano y solo mostrarles el proceso general. Entonces lo que voy a hacer en realidad, hay dos maneras. En realidad puedes hacerlo de dos maneras separadas. Por lo que el método número uno es que simplemente puedes ir justo aquí y copiar todos estos elementos de esta página. Entonces ve aquí y pegarlos aquí mismo. Extiende este aeropuerto todo el camino hacia abajo, y luego simplemente ajusta elemento por elemento o de la otra manera como lo he hecho y como voy a hacer es puedes sostener tu vieja clave, arrastrar tu copia como lo hicimos hasta ahora. Y luego simplemente voy a rehacer todos estos ajustes a esta mesa de trabajo aquí en la parte inferior. Entonces voy a hacer eso es bastante sencillo. Se puede empezar primero con el ancho, así que 1440, haga clic aquí, así que dudamos de un redimensionamiento responsive en. Entonces voy a usar el trabajo 40 ahí, presiona Enter, y puedes ver que está bajado. Y una vez que un hover, se puede ver el contorno de nuestra mesa de trabajo original. Entonces a continuación voy a ajustar todos estos ajustes. Por lo que 365165. Entonces de 30 a 65 y luego 165 aquí mismo. Así. Y ahora que tenemos, siempre se puede volver a comprobar. Por lo que 123065165365165, todo está bien. Ahora en realidad podemos empezar a trabajar en nuestro diseño. Entonces, ¿cómo puedes acercarte a esto es sencillo. Se puede hacer elemento por elemento, como en realidad vamos a hacer, porque me pareció que era el más fácil y preciso que importaba trabajar. O lo que también puedes hacer es hacer algunos de estos elementos similares como éste, por ejemplo, simplemente haz clic, arrástrelo, y eso es básicamente todo para todos estos elementos más simples. También puedes acercarte a éste el mismo método. Puedes acercarte a éste porque realmente no es tan difícil de hacer. A lo mejor simplemente ponerlo en el centro así, por ejemplo. A ver si se alinea correctamente, sí termina básicamente a este apartado. no hay más trabajo por hacer. También puedes hacer las secciones más pequeñas, especialmente estas secciones de socios. Entonces puedo, por ejemplo, posicionarlo aquí mismo en el centro. Voy a asegurarme de que esté justo aquí. Y luego me voy a asegurar que esté justo aquí. Y entonces puedo saltar dentro de los logotipos de mis compañeros, mantener mi tecla de turno. Y debido a que estamos usando pilas, puede ver cómo el diseño a continuación está actuando y redimensionando de manera responsable. También puedes hacer es sin sostener Turnos, simplemente haz clic aquí y luego ajustarlos así. Entonces realmente todo depende de ti. Entonces como puedes ver, algunos elementos son realmente sencillos de hacer, pero también hay que ajustar esto a aquí. Por lo que ahora cuando hago clic en esta sección, no sale afuera. Entonces como dice, algunos elementos son realmente sencillos de hacerlo como éste, por ejemplo, simplemente ajustados a aquí. Haga clic aquí, asegúrese de que esto está aquí. Y luego usa la moneda en simplemente ajustado a aquí, por ejemplo, también puedes ampliarla hasta aquí solo para que los usuarios sepan que hay mucho más que ver a la izquierda y a la derecha. Y también esta sección, por ejemplo, es realmente bastante simple. Entonces vamos a ajustarlo en el centro click justo aquí y hacer esos cambios por ahora. Entonces lo que puedo hacer es realmente mover esto y luego ver a dónde me está llevando esto a escuchar, por ejemplo, así. Entonces lo que puedo hacer es simplemente extenderme y hacerlo, por ejemplo, columna larga de ancho. Y entonces puedo traerlo de vuelta a aquí. Entonces puedo saltar dentro de aquí y reducir el tamaño. Asegúrate de que mi texto de suscripción esté en el centro. Salta a mi estado de horror, y luego simplemente ajusta mi estado Horace también. Asegúrate de suscribirte está en el centro. Vuelve al estado predeterminado, y eso es todo por ahora. Entonces como dije, puedes hacer todas estas cosas así, o puedes hacerlas al revés. Entonces realmente todo depende de ti cómo realmente te vas a ajustar. Esto asegura que esto sea 40 como y muertes. O ahora porque estamos en tamaño más pequeño, incluso podemos bajar a 20. Y sigamos adelante y centrémonos ahora en unas tareas más difíciles a la mano, que básicamente son la navegación y estos menús desplegables y estas tarjetas sobre todo es lo que nos va a llevar y la mayor cantidad de tiempo. Entonces lo primero de todo, vamos a trabajar con nuestra sección de héroes. Entonces voy a saltar dentro de nuestras imágenes de héroe, seleccionarlas todas, y simplemente traerlas hasta aquí. Y entonces lo que puedes hacer es esconder a tu héroe y luego saltar dentro a cada uno de ellos. Haga doble clic en el interior y simplemente enfoca el área que desea que vean los usuarios. Al igual que éste por ejemplo, puedo ocultar éste, traerlo de vuelta y hacer doble clic y tal vez simplemente empujar hasta aquí. Puedo bajarlo a 0, traer este dentro, y quizá vamos a escondernos. Éste se rompió. Por lo que quiero que estos barcos estén en el centro así. Eso está bien. Trae esto de vuelta. Al igual que así. Y trae esto de vuelta. De acuerdo, entonces voy a usar 0 basado en esta imagen, 0 basado en esta imagen. Y simplemente voy a traer mi superposición de color de vuelta y los lácteos lo tienen. También puedes ajustar esto más si quieres, pero creo que va a funcionar bien. siguiente paso es ajustar estas flechas porque una vez más, puedes trabajar tu camino desde Estos elementos los cuales son más fáciles ajustar y pasar a estos elementos que son más difíciles de ajustar. Entonces voy a mover a mi árabe de esta manera y también siempre empezar con el primer estado. Entonces movamos nuestra máscara de textos para estar en el centro así. Vamos a mover nuestro botón para estar en el centro así. Y lo que podemos hacer ahora es también ampliar el tamaño de este botón a algo así. Ve a flotar, algo así. Eso está bien. Y luego simplemente muévelo al centro para que se ajuste a nuestro nuevo diseño básicamente. Entonces ahora que hemos arreglado todo eso, Vamos ahora a trabajar en nuestro software de navegación para mí ahora, vamos a cerrar rápidamente todo esto y trabajar en esto. Entonces lo primero es lo primero, voy a mover mi logo aquí mismo. Y lo que voy a hacer porque tengo todos estos ítems de texto. Lo que voy a hacer, en lugar de ponerlos aquí, voy a bajar a más o menos por aquí. Y luego, por ejemplo, más de 20 abajo de mi logo. Creo que eso está bien. Y luego voy a saltar por dentro y ajustar éste. Y luego los voy a seleccionar a todos. Mi ese ng-click justo aquí, que los va a distribuir uniformemente a través de nuestra red. Ahora puedes seguir las líneas de cuadrícula si quieres. Entonces posiciona el invierno aquí, posiciona Wellness aquí. Por lo que cada uno de ellos ocupa dos columnas por ejemplo. Pero no voy a hacer eso. Es mucho más sencillo de hacer. disuadir. Lo que también puedes hacer es mover esto al centro, así ahora porque tenemos mucho más espacio. Y también lo que podemos hacer es reducir el tamaño general de nuestro logotipo, por ejemplo. Por lo tanto, saltemos dentro de nuestro logo y mantén pulsada la tecla Mayús Podemos posicionarlo aquí mismo porque como dije, no necesitamos tanto espacio para nuestro logo. Podemos llevar nuestro punto de tabulación al centro de nuestro logo. Trae esto aquí y usa todos estos artículos. Y ahora traerlos en 20, por ejemplo. Y creo que eso va a funcionar muy bien. Entonces ahora eso es todo deuda, todo eso está terminado. Lo que puedo hacer es lo que más tiempo consume y lo que te voy a mostrar rápidamente para este primer estado, y luego voy a seguir adelante, hazlas yo mismo y luego volver a ti y mostrarte los resultados es que tienes para hacer esto por todos tus otros estados. Entonces lo primero es lo primero, lo que necesitamos es ajustar estos destinos para poder traerlos de vuelta, llevarlos primero a las cosas 101, mostrarlos como DOS. Y también voy a usar mi primaria ahora Blur asegúrate de que sea 1080 por ejemplo, solo para que pueda ver todos mis elementos ajustados así. Y aquí es donde la pila, por ejemplo, podría ser útil. Entonces veamos que quiero seleccionar estos artículos como dat, CEO, como suciedad y ponerlos en una pila. Entonces estoy viendo así a Europa. Ponlos en una pila. Y dentro de la pila, lo que puedes hacer es simplemente hacer clic en un olor y simplemente ajustar el espaciado entre ellos. Y sostengamos nuestra tecla Mayús. Cierto Darrell va a escalar uniformemente así. Y vamos a ver, son 115 así. Entonces vamos a usar ese espaciado para todos ellos. Y veamos, creo que falta uno de ellos. ¿ Cuál es? A ver. Algo falta aquí mismo. Entonces veamos que algo me escapó porque como puedes ver, me está mostrando ahí. Es un divisor, lo siento. Siempre hay que revisar estas cosas y ver a dónde te llevan. Entonces divisor con es esto. Por lo que 11 y 10. Entonces lo que voy a hacer primero es saltar dentro de este divisor. Basado este valor. Voy a cerrar este, saltar dentro de este divisor, base, este tamaño divisor. Y por último, para las Américas, no tenemos un divisor ahí. Entonces vamos a agruparlos. Américas. Y también voy a caer en SEO ahí dentro, como hicimos con una Europa. Eso es correcto. Y cayó en todos ellos y salta dentro de África. Entonces recordemos a nosotros mismos y veamos la Europa. Entonces es 115. Voy a usar ese mismo, ese mismo valor. Por lo que 115, como se puede ver, funciona bastante bien, pero también podemos saltar dentro y ajustar éste. Por lo que simplemente sigue la regla para esto son 108 dependiendo un carajo. Cuántas letras hay en realidad dentro de todas estas otras. Entonces para Africa stack, saltemos dentro de aquí en la USU, la pila y 115. Y vamos a ver para este último, puedo ajustarlo a más o menos por aquí. Y una vez más, hacer lo mismo por las Américas, apilar 115. Y como pueden ver aquí mismo, tenemos que solaparlos un poco. Entonces, por ejemplo, podemos ajustar este último. Y entonces podemos hacer click aquí justo sólo para que no se superpongan demasiado. Voy a volver atrás y primero las cosas sugirieron primero este un poco y luego ajustar éste a algún lugar por aquí. Ahora que estoy contento con ello, lo que voy a hacer es esconderlos. Entonces voy a tocar dos veces a Mizuki para esconderlos y voy a mostrar todos estos otros. Entonces voy a mostrar el invierno primero. A una que voy a hacer es ajustarla a aquí, por ejemplo. Y luego voy a usar el salto de texto dentro de aquí. Y veamos, por ejemplo, tal vez pueda bajar esto en tamaño. A ver, 120, que está bien. Pero tal vez pueda incluso moverlos uno más. Entonces, vamos a dar click aquí. En realidad, ocultemos esta denoción. Así que los destructores no terminaron en disturbios. Entonces simplemente lo voy a mover a esta línea aquí mismo. Voy a dar clic en mi ilustración y simplemente voy a mantener presionada mi tecla de turno y ajustada a aquí, asegurarme de que ambos estén centrados así. Y básicamente lo adeuda sobre el invierno. Ahora podemos saltar dentro del botón grande y simplemente ajustarnos a aquí. Ve al estado de horror, ajustado a aquí, asegúrate de que encaje. Se. ¿ Ve si está en la línea de rejilla? Lo es. Entonces básicamente eso está bien para el invierno. Voy a hacer doble clic en mi 0, incluir mi wellness back, y hacer lo mismo básicamente. Entonces voy a usar mis textos. A ver dónde encaja. Entonces aquí mismo. Y lo que puedo hacer es usar altura automática, podría simplemente ajustar algunos de estos. Puedo seguir adelante y ocultar mi ilustración sólo para que pueda ver dónde va el texto y como Derek. Derek. Entonces veamos qué tenemos justo aquí. Entonces tenemos 40, lo cual es genial. Puedo volver atrás y ajustar mi texto aquí mismo, su cabeza. Entonces, para la ilustración de bienestar en sí, y si no puedes ver esto, simplemente puedes ajustar el ancho, traerlo de vuelta, y luego traerlo de vuelta así. Entonces lo mismo que lo hicimos anteriormente. Lo que podemos hacer es simplemente ajustar nuestra ilustración así o mantenerla aquí porque no quiero que sea demasiado ancha. El texto de mezcla está aquí. Después ajusta el ancho de nuestro texto una vez más para que quepa. Y luego mueve esto hacia abajo simplemente usando 40 así. Y simplemente selecciona estos dos y tráelos así. O incluso puedes usar menos texto si quieres. Para los textos de bienestar aquí mismo, todo depende realmente de ti y cómo quieres acercarte a esto. Traigamos de vuelta a este individuo, alinéelo a aquí. Voy a traer el texto a algún lugar por aquí. Por ejemplo, analistas ven en la ilustración, ¿va a encajar? ¿ Es? Es anélidos simplemente utilizar los textos para cortar el tamaño. Voy a dar clic aquí y ajustada e injusta en este como DAT, y simplemente mover nuestro botón y moverlo así. Ahora ten en cuenta que si estás usando el mismo botón, por ejemplo, aprende más aquí y no diferentes como nosotros. Y luego simplemente puedes ajustar ese mismo botón una vez y luego usarlo en todo tu diseño para que simplemente puedas mostrar en alta DID una vez más, una vez más. Entonces va a ser mucho más rápido que este enfoque. Pero quería ser lo más personal posible para estos tipos. Entonces por eso estamos usando todos estos botones diferentes. Y por supuesto, trae en este tipo de intereses visuales a tu página. Cuando tienes estos botones N aumenta la probabilidad de clickability porque tienes todos estos botones interesantes en lugar de un aprender más a lo largo de todas tus páginas. Por lo tanto, ten eso en cuenta. En algunos proyectos vas a tener un botón el cual va a ser exactamente el mismo para todos tus diferentes propósitos y páginas y así sucesivamente. Entonces, por lo tanto, algunos de ellos podrían verse un poco diferentes en algunos casos. Ahora, nos estamos acercando al final. Voy a tratar en este apartado muy rápido. Saquemos esto del camino y por ahora voy a ocultar la información de mi mapa. Más cuando los textos a más o menos por aquí, haga doble clic, asegúrese de que sea la altura automática ajustada una vez más, y vamos a cambiarlo a aquí. A ver, vamos a rallar y asegurarnos de que tenemos 40 y ajustar nuestro botón final. Así. Ahí lo tienes. Una vez más, estamos a los 40. Y ahora para el texto de info del mapa, lo que puedo hacer es saltar dentro de mi mapa. Puedo ajustarlo a aquí, por ejemplo, puedo asegurarme de que esté en la misma calle que estaba. Y ahora para esto, lo que puedes hacer es incluirlos en realidad dentro de los grupos. Entonces vamos a ver, esto se va a mapear. Esto va a ser newsletter, esto va a ser teléfono. Y por último, esta va a ser dirección. Ahora una vez que estén ahí, puedes ponerlos en un grupo y ponerlos en una pila. Pero antes de hacer eso, quiero asegurarme de que estén alineados así. Entonces voy a usar mi teléfono, alinearlo aquí, y usar mi dirección, por ejemplo, una alineación a aquí. Asegúrate de que esté 20 abajo. Ahora puedo agruparlos así y ver qué muestran las pilas las costas. Creo que eso está bien. Como puedes ver al hacer clic así, lo va a posicionar hacia el centro. Voy a tratar de anularlo. Eso está bien en manadas lecheras. Por lo que esta sección ya está terminada. Se ve bien. Y no puedo adaptarme por 0, Qi ocultarlo. Y básicamente lo que voy a hacer ahora, por favor copia toda esta misma información y básicamente pegarla en toda esta otra información. Pero antes de hacer eso, lo que voy a hacer con mi borrón nav, voy a traerlo de vuelta a uno. Entonces voy a seleccionarlo todo excepto por el desenfoque nav, hit Control C. Ir a mis destinos, estado. Abriendo. Ver aquí es donde está el ahora desenfoque. Voy a quitar mi nav primario, pulsa Control V para pegar toda mi información en. Y simplemente voy a mostrar mi destino en este primer estado como ese rebaño lechero. Ahora voy a ir al estado invernal. Haz lo mismo. Entonces borra este, muestra todo lo demás. Y lo primero que voy a hacer es usar mi selector. Muévete aquí mismo hasta que se reúna con el invierno. Simplemente trae todo como este y rebaño lechero y asegúrate de que todos sean 20. Entonces, vamos a seleccionarlos así. 20. Y antes de seguir adelante con el invierno, Vamos a los destinos, ábrelos. Entonces enfermedad invernal, cruceros individuales. Y por cierto, simplemente estoy sosteniendo Control para seleccionarlos a todos así. Vuelve al invierno, Derek. Ah, es todo el invierno se selecciona y simplemente localiza tu invierno. Aquí está, y traerlo de vuelta para que se muestre. Entonces voy a pausar el video aquí mientras hago el resto de ellos. Y voy a volver y mostrarles cómo podemos movernos aquí arriba y ajustar todas estas otras secciones. Y ahora que ya he terminado todo eso, déjame pasearte para ver cómo se ve. Entonces aquí tenemos el principal. Ahora bien, este es el estado por defecto. Tenemos los destinos, obviamente los mismos que antes. Tenemos el invierno, tenemos el bienestar, escuchamos al individuo. Entonces básicamente todo lo que expliqué en este video, solo seguí adelante y lo hice. Entonces una última cosa que quería mencionar son las animaciones. Entonces porque cambiamos, todo, reemplazamos los tamaños, lo sacamos todo del camino. Cambiamos el logotipo del SVG original a este B y G, y también dentro de estos estados, por ejemplo, para este individuo, digamos que los movemos a todos. Cambiamos la posición Contáctenos y el espaciado y así sucesivamente. Todas esas animaciones han desaparecido. Entonces si hago clic en el prototipo y no se puede ver eso dentro del estado por defecto, aún podemos ir a ellos. Entonces si abro en modo de vista previa y se puede ver que la ventana de vista previa es ahora un poco más pequeña de lo que era. Se puede ver que el efecto flotante aún funciona. Pero por ejemplo, cuando intenté hacer click justo aquí, nos lleva a la segunda, segundo espacio y segunda animación original . Como puedes ver, no se alinea bien con esta primera. Entonces primero lo primero es que tendría que ajustar nuestros textos. Para que veas que el texto se mueve justo aquí. Por lo que voy a tener que posicionarlo en el centro como tú querrías aquí mismo y toda esta información otra mitad para ingerir un animate una vez más, pero mucho más importante para este elemento en la parte superior, cuando hago clic en invierno, se puede ver que no puedo hacer click en ningún otro lugar. Entonces eso es realmente, el tema principal, es que tendrás que animarlos a todos una vez más, excepto estos estados Hover porque no los cambiamos en absoluto. Están, se están quedando igual y este botón se mantiene igual. Pero como dijo, tendremos que animarlos una vez más a todos. Entonces básicamente para liberar tu tiempo, Si puedo decir satélite que puedes ir a héroe y seleccionarlos. Por lo que la sección superior ahora puede usar un prototipo y luego simplemente hacer clic en uno de ellos y ver la transición. Entonces básicamente, porque usamos en todas partes la misma transición, toca auto animate, facilidad de entrada 0.4 segundos. Por lo que puedes usar eso o puedes usar 0.6. Depende de ti cómo quieres ajustarte a esto. Pero básicamente eso es lo que tendrías que hacer. Ahora, voy a animar eso y volver en el siguiente video. Pero para este video, solo quiero terminarlo en una imagen de héroe. Entonces quiero usar mi héroe de texto mezquita y botón, pulsa Control C. Y también estoy usando en realidad, vamos, usemos la edición. Desde la máscara de héroe hasta la última imagen Control-C. Salta a la imagen para basar en todas partes, todo en la parte superior. Después quita todo del escritorio, máscara de texto hacia abajo así. Voy a bajar la opacidad de esta imagen a 0. Esto va a ser a los 100. Entonces vamos a volver a cambiarlo y ver cómo se ve en el estado por defecto. Porque no recuerdo si fueron estas imagen a una imagen tres, si estaban al 100% en el primer estado. Entonces veamos la animación. Sí. Entonces tendríamos que ir al estado por defecto y llevarlos a 100, ambos así. Y luego cuando lancé mi prototipo, y haga clic aquí, se puede ver que esta animación se ve mucho mejor. Entonces ahora que lo has hecho en el estado por defecto, en el segundo estado, lo que puedo hacer es ir al texto de mi héroe y traeré mis segundos textos para París así. Voy a sacar este de esa manera. Y ahora puedo seleccionar todos estos elementos, Control C, saltas al estado objetivo, controlas V, y simplemente eliminarlos todos hacia abajo. Bajaré esto a 0. Y esto debe ser a los 100. Pero no fue por alguna razón en el segundo estado. Volvamos atrás y lo arreglamos. Entonces esto debe ser en 100, sólo por el bien de la consistencia. Y debe ser a los 100 aquí. Eso está bien. Por último, vamos a cambiar este texto para que más textos número 3 en su lugar, justo por aquí, y luego mover el texto número dos fuera del camino, así. Y eso es básicamente todo. Por fin volvamos a golpear Preview y ver cómo se ve todo eso. Entonces cómo funciona bien el poder. Y ahora se puede ver que todas estas imágenes se están quedando en su lugar, pero se puede ver que no funciona en esta, así que tendríamos que animarla una vez más. Por lo que en el prototipo de estado por defecto, puedo saltar dentro de mis flechas y ver punto de pestaña de flecha derecha es fácil ahora 0.6. Entonces vamos a la imagen número dos. Entonces esa es la parte complicada con todos estos porque estamos cambiando sus lugares, los estamos moviendo. Ese es el problema con ellos. Entonces cuando hacemos clic aquí mismo, vamos a usar auto animates. Vamos a ir al estado por defecto flexibilización y 0.6 segundos. Y vamos a dar clic aquí y ir a la Imagen 3, usar la misma configuración, y luego ir a la imagen número tres flechas a la izquierda. Y en este vamos a ir al estado anterior, y eso es básicamente todo. Entonces como dije, puede ser un poco una tarea animar a todos a la vez. Pero ese es el tema principal que tengo con Adobe XD en general, es porque cuando comienzas a trabajar en estas animaciones, en lugar de que te permita animarlas una a una, por ejemplo, y luego guardar esas animaciones dondequiera que las coloques, sin embargo los tamaño, sepa que tendrá que animarlo todo a la vez. Pero la buena noticia es que el equipo está trabajando duro en ello para hacer esos ajustes para los futuros lanzamientos de Adobe XD para que podamos mejorar aún más nuestra velocidad y no tengamos que hacer eso por todos ellos. Entonces solo te imaginas que ahora mismo, voy a entrar y animar todos estos estados diferentes como lo hice en el tamaño original. Pero en el futuro, ojalá llegue un momento donde tú, donde quieras animarlos a todos. Adobe XD seguirá manteniendo esos ajustes. Entonces te veré en el siguiente video. Y como dije, voy a seguir adelante y animarlos a todos como lo hice en la primera. Y en el siguiente video vamos a lidiar con este nav de fondo. Entonces te veré ahí. 38. Crear diseño responsivo: De acuerdo, así que ahora que he terminado de crear esos y emisiones, revisemos rápidamente y veamos cómo se ve. Básicamente exactamente lo mismo que antes. Por lo que todos estos otros se están quedando igual y se puede hacer clic entre ellos y el selector va a cambiar. Puedes hacer click en tu logo , volverá aquí mismo. Hover funciona. Y como puedes ver, una vez que hagas clic aquí, te llevará allí. Entonces ahora centrémonos en novato en este. Pero antes de que lo hagamos, sólo quiero mencionar rápidamente algo. No creé animación entre todas estas páginas diferentes porque no puedes ir de aquí a aquí a aquí directamente, porque quiero guardarla para el final. Y quiero explicarles eso, esas conexiones entre las páginas antes de que realmente empecemos con la parte de compartir de esta clase. Entonces, por tanto, vamos a quedarnos con eso para el final. Y voy a conectar obviamente esas páginas y mostrar todos los métodos que puedes usar para la deuda. Pero antes de seguir adelante, ahora trabajemos en esta sección aquí mismo. Entonces en esta navegación de fondo y una cosa más, porque ahora estas emisiones se hornean así, la carpintería más tarde, una vez que realmente escalamos esto a diferente tamaño. Entonces, no te preocupes demasiado por eso. Entonces como dije, vamos a trabajar en este. Y para eso, lo que realmente voy a estar haciendo es por cada uno de ellos, excepto por la búsqueda, me voy a deshacer de estos iconos porque los iconos están tomando espacio. Entonces me voy a deshacer de esto. Y voy a posicionar esto para ser 24 ejemplo. Y luego les voy a hacer dos columnas de ancho así. Voy a extender mis destinos BG y traerlo aquí animales que fueron a dar click en mi máscara y se extendieron a algún lugar por aquí, por ejemplo. Así. Y entonces lo que vamos a hacer es hacer lo mismo por bajo arresto de ellos. Entonces voy a dar clic aquí mismo, abrir nuestro divisor y acercarlo a algo como esto por ejemplo. Y aquí lo tenemos. Entonces lo que voy a hacer es usarlo todo. Entonces básicamente puedo incluso usar estas mismas mezquitas. Hit Control C, salta a mi fecha de clics, abriendo, Control-V, borra el viejo y simplemente extiende el nuevo hacia abajo. Por lo que puedo extenderlo hasta aquí, por ejemplo. Y entonces puedo bajar mi máscara hasta aquí. Y veamos ahora si funcionan nuestras animaciones. Por lo que el clic vuelve al valor predeterminado. Por defecto va a hacer clic. Por lo que puedes ver que funciona de esta manera cuando no estás metiendo demasiado con posiciones. Entonces cuando haga clic justo ahí, lo va a expandir todo el camino hacia abajo y va a funcionar muy bien. Y aún lo puedes leer. Dice En destinos, así que creo que estamos bien. Entonces voy a pausar el video y arreglar el resto de ellos para luego volver. Y ahora que arreglé estos mayores, como pueden ver, hice el ancho de dos columnas para todos ellos solo la máscara va un poco afuera para que la sombra de gota pueda mostrar. Ahora arreglemos y las muertes. En primer lugar, y traerlo de vuelta a aquí. Utilizo este botón y lo hice tres columnas y quería mostrarles esta búsqueda una. Por lo que voy a traer la búsqueda BG están aquí mismo. Entonces dos aquí. Y también voy a traer esto mucho más de cerca. Por lo que voy a utilizar el icono de búsqueda y buscar viajes. Voy a asegurarme de que sean 20, por ejemplo. Y luego acerque este poco a aquí, y luego traiga aquí nuestro ícono de ropa. También puedo traerlo de vuelta solo para que lo veas en algún lugar por aquí, por ejemplo, INT y luego bajarlo a 0. Entonces este es nuestro estado por defecto, y simplemente voy a copiar la edición que hice aquí mismo. Acude a nuestro kit de estado clicado aquí mismo, y luego borra todos estos otros de esa manera. Entonces lo primero que vamos a hacer obviamente es traer esto vuelta un rotado por eso. Entonces es lo mismo que antes. Esta oleada BG se va a expandir para cubrir aquí mismo. Y simplemente vamos a mover estos dos aquí y luego 22 aquí. Entonces revisemos rápidamente y veamos si funciona. Sí lo hace. Y por último, vamos a dar al adelanto y ver cómo se ve todo ahora. Por lo que destinos. Y veamos esa sombra de fondo mostrando muy bien. Todo se ve bien. Buscar funciona, Muestra y finalmente aplicar filtros funciona como debería. Entonces ahora que esta sección superior está terminada, Sigamos adelante y trabajemos en esta porque como dije, estas secciones en la parte inferior van a ser lo más desafiante. Y antes que nada, alinémoslo así. Y van a ser los más desafiantes porque obviamente tienes toda esta información dentro. Entonces, antes que nada, alinémoslos a la parte superior. Por lo que en estos apartados van a tener seis columnas de ancho. Entonces veamos dónde está. Entonces 246, así que tienen que terminar aquí mismo. Y por lo tanto podrían necesitar ser un poco más amplios. Entonces lo que voy a hacer primero es usar mi imagen primero, asegúrate de que tenga tres columnas de ancho. Entonces usa todo mi contenido, mi dosis, y asegúrate de que está justo por aquí. Y luego veamos, 1, 2, 3, 4, 5, 6. Por lo que todavía tendríamos que cortarlo aquí mismo. Entonces digamos, por ejemplo, disfrutar del hermoso Egipto así. Y entonces, por ejemplo, podemos saltar aquí y usar esto, posicionarlo como una pila. Y veamos, por ejemplo, tal vez pueda ponerlos todos en ungroup y luego usar una pila posicionada así, y no funciona así. Entonces básicamente lo que tendría que hacer es saltar dentro de aquí y luego posicionar nuestro transporte. Viene a continuación. Pero como pueden ver , no me permitirá hacerlo. Por lo que hay una buena posibilidad de que tenga que desagruparlos, ponerlos en el medio. Pero en una pila y por qué ahora y posicionarlos así. Entonces simplemente salta dentro, asegúrate de que estén alineados así, y muévalos aquí mismo para que se reúnan con la posición alineada del borde. Hizo esta línea justo aquí, asegúrate de que el precio esté justo aquí. Y entonces lo que voy a hacer es obviamente traer esto de vuelta a aquí y traer este BG de vuelta a aquí. Ahora puedo mover estos dos, así posicionados y divisores los mueven justo aquí hasta el borde. A ver dónde estamos. Y por ejemplo, incluso puedo reducir el ancho de ellos. Haz algo así, porque ahora no necesitamos que sean tan altos. Y obviamente puedo posicionar este divisor inferior hacia abajo y puedo mover estos iconos hasta tal vez 20. No creo que necesitemos que sean mucho más que eso. Puedo posicionar esto a cualquiera de ellos en, para ser 20. Y c. No están mostrando como debieran. Entonces vamos a ver, tal vez podamos traerlos así y luego desplazarlos diez a la izquierda y luego dar click en uno de ellos y traerlo de vuelta, dar click en otro. Entonces esta de abajo. Es bastante complicado seleccionar estos divisores porque son bastante pequeños. Y eso es básicamente todo. Entonces lo que voy a hacer ahora es ajustar nuestro contenido en general. Entonces hagámoslo con el carrito. Entonces veamos a lo mejor podemos hacer la altura de 437, tal vez. A ver cómo funciona eso. Creo que eso funciona bien. Entonces simplemente ajusta un poco la altura de nuestra imagen. Y veamos 40. A lo mejor podemos lidiar con 20 y luego 20 abajo. Eso está bien. Alinear esto así. Y vamos a ver, el contenido es 20 del top 22 aquí, 22 aquí, así que todo se ve bien. Por último, simplemente puedo ajustar mi imagen así, por ejemplo. Y lo que quiero hacer a continuación es básicamente seleccionarlo todo. Control C. Ir al estado de terror, controlar V, pegar todo en. Simplemente, puedes seguir adelante y eliminar el contenido antiguo. Voy a hacer doble clic en el interior y simplemente agrandar mi imagen así. Y también voy a saltar por dentro y ampliar mi máscara de adulto a por aquí. Entonces como dije, esto es lo más lento de este diseño. Porque te puedes imaginar que si no tuviéramos todos estos cambios, todos estos efectos de hover dentro de los efectos de hover, todas estas sombras de gota cambiando con los estados de Horace, sobre todo aquí. Entonces si hago clic aquí mismo, se puede ver que es a las cinco, debería ser a las ocho. Entonces si no tuviéramos un diseño complejo como este, sería mucho más sencillo de ajustar. Entonces, una vez más, cuando me desplace hacia abajo en ese nuevo diseño, puede ver cómo se ve eso, pero estas paredes se ven así. Por lo que otra parte que puedes tomar es usar este diseño exacto, convertirlo en la pila y luego posicionar la imagen encima de éstas. Pero sólo Dan en lugar de 3.52 por ejemplo. Puedes hacer ese enfoque si quieres, pero todo depende realmente de ti y de cómo quieres acercarte a estas cosas. Entonces por ahora, seguiré adelante y cambiaré todas estas usando estas mismas técnicas y mismos métodos. Y estas van a ir luego a seis columnas justo aquí. Entonces 12345 y luego seis aquí mismo. Para que veas cómo los vamos a ajustar. Veamos 3, 4, 5, 6. Por lo que este tribunal en realidad debería terminar aquí mismo. Entonces déjame traer mi fondo y mi flecha. Entonces aquí, contemos una vez más. Por lo que 123456, que está bien. Y entonces tendría que traer mis separadores. Entonces, veamos, puedo traer este de cada dos aproximadamente por aquí. Entonces vayamos con 240 así y simplemente usemos este hasta 40 también. Y ahora todo dentro de nuestro contenido está alineado correctamente. Entonces lo que haría sería saltar al estado de Horace y traer esto, esto de vuelta a aquí. A ver. Entonces 123456 y luego ir en el medio, usa nuestros divisores y simplemente usa a 40 así. Y eso es básicamente todo. Entonces como dije, eso es todo para este video. Saltaré adelante y cambiaré todas estas porque como dije, no quiero aburrirlos demasiado ancho, todos estos cambios, pero todavía vamos a mantener la misma distancia. Y porque estamos en una pila, si un show que, así que voy a seleccionar todos estos. Se puede ver que el contenido de la parte inferior se está reduciendo. Y eso es lo que queremos lograr con esto. Por lo que te veré en el siguiente video una vez que termine estos y luego podremos seguir trabajando en las siguientes secciones. 39. Crear diseño responsivo: Está bien, Así que ahora lo hice esta sección está terminada. Déjame mostrarte cómo se ve en la vista previa. Entonces si me desplazo aquí abajo, puede ver básicamente que se ve exactamente igual que antes. Entonces tenemos la sombra de fondo, tenemos imágenes acercando y tenemos este botón aquí mismo con el hover. Y también ajusté el ancho de ambos botones. Entonces básicamente hice lo mismo que te mostré para, para esta primera tarjeta. Y ahora sigamos adelante porque hemos completado esto y puedes ajustar el ancho de este video si quieres. Pero para este tamaño, Vamos a dejarlo así. Ahora sigamos adelante y tratemos con estas tarjetas de destino. Por lo que una vez más, como dije, estas tarjetas de destino se van a ajustar a nuestro diseño. Entonces si acercamos ahí mismo. Entonces, solo ajustemos las cubiertas muy rápidamente. Asegúrate de que esté en el centro así. Y lo que vamos a hacer con las ciudades es obviamente, como dije, voy a quitar pocas tarjetas porque tenemos todos los viajes de Europa botón abajo de todos modos, para que podamos hacerlo. Entonces lo que voy a hacer es tener seis de ellos. Entonces ahora que los usuarios pueden hacer clic, van a ver tres por tres. Entonces me voy a deshacer de estos dos en la parte de atrás. Y también voy a saltar dentro de las ciudades africanas y deshacerme de estos dos aquí mismo. Y también voy a bajar a Asia, CTs, y deshacerme de los dos últimos. Y finalmente tenemos América. Y yo voy a hacer lo mismo y lo estoy haciendo ahora solo para que no lo olvide más tarde porque a veces lo haríamos todos estos, sobre todo si estás corriendo en un plazo apretado, puede ser extremadamente complicado. Entonces ahora trabajemos en unas ciudades europeas. Entonces lo primero es lo primero, vamos a seleccionar la carpeta y moverlas aquí mismo en su lugar. También voy a ajustar nuestro grupo de pergaminos dos aquí. Entonces justo al borde de nuestra grilla así. Y básicamente lo que voy a hacer es ajustar cada tarjeta a la libertad para columnas de ancho. Entonces lo que puedo hacer es simplemente hacer esto y se ajustará muy bien. Lo único que no lo hace, y simplemente puedes alinearlo un poco mejor es por ejemplo, usas 60 aquí mismo. Y entonces podemos, por ejemplo, posicionar o divisores hasta aquí, así. Y por ejemplo, Laura, esto bajó a 340, tal vez. Creo que eso va a funcionar muy bien. Pero el punto es alinear todo este contenido a la izquierda y asegurarnos de ajustarlo, por ejemplo, 10 píxeles a la izquierda, y luego ajustar el tamaño aquí en el centro, C sólido, aquí mismo, podemos usar algo así como 5000 pensar, sí, 50 luce bien. Y lo que podemos hacer es simplemente alinear este primer divisor aquí. Es talla 32018. Y entonces podemos hacer lo mismo para este segundo. Por lo que 328. Entonces tenemos 53, 28. Entonces eso es lo que vamos a hacer en el segundo estado. Entonces ve así. Entonces vamos a ver. Voy a mudarme y ajustar estos dos y la imagen también. Al igual que así. Entonces vamos a ver, esto está bien. Entonces saltemos adentro, usemos esto. Por lo que 328 y yo puedo saltar dentro de aquí. Energía tiene que ir al 15. Y antes de que lloremos más, saltemos adentro y veamos si eso estropeó nuestra animación. No lo hizo. Lo cual es genial. Y por eso sigo diciendo siempre revisa tus animaciones y mira si todo funciona como debería ser entre tus estados. Entonces ahora sigamos adelante y ajustemos lo mismo para Londres. Entonces una vez más, saltando justo aquí. Y voy a saltar dentro de éste y moverlo aquí mismo. Entonces para el Londres, voy a usar estos dos, lo siento, imagen final misma ajustada a aquí. Estos se van a quedar igual. Entonces vayamos rápidamente a París. divisor medio es 328. Entonces voy a usar ese 1 primero. Entonces 3, 28, así. Y vamos a ver, yo también puedo ajustar esto a 50. mi papá. Eso es genial. Y podemos saltar a nuestro estado y destino por defecto, flecha e imagen. Alinearlo a aquí, ir al medio. Esto va a ser 50. Y estos dos van a ser 320, ocho, lo cual es genial. Y ahora por fin, ajustemos este último para Roma. Yo voy a hacer lo mismo por aquí. Y por cierto, simplemente puedo saltar dentro del horror si quiero hacer eso. Pero lo que realmente me gusta es primero hacer ajustes en el estado por defecto para todos ellos, luego saltar al estado terrorista y luego ajustarlos. Atrévete. También podemos usar 50 aquí mismo porque va a funcionar bien y luego saltar dentro de la finca de caballos. Y vamos a ver. Por lo que aquí podemos ajustarlos para que sean 328. Da clic aquí, asegúrate de que sean 50. Y debido a que ajustamos estos por adelantado, va a funcionar muy bien. Entonces antes de seguir adelante con estos otros, solo quiero flotar rápidamente y ver si todos funcionan como deberían. Entonces esto funciona, esto funciona, y esto funciona, y se ven realmente geniales. Pero cuando hagas click aquí mismo, te va a llevar a la sección anterior. Entonces eso no es lo que queremos hacer. Lo que realmente queremos hacer es ajustar correctamente el espaciado para todos ellos. Entonces lo que voy a hacer es mover DC-3 aquí mismo. Entonces hasta que se alineen y luego esconden estos tres. Y antes de seguir adelante, simplemente puedo mover mis flechas en su lugar hasta aquí, por ejemplo. Y también puedo mover mi botón y asegurarme de que tenga cuatro columnas de ancho, por ejemplo. Yo lo puedo ajustar aquí y dentro del estado de horror, funciona muy bien. Y ahora puedo lidiar con estas tres cartas. Entonces en este video los voy a arreglar todos y luego voy a volver atrás y ajustarlos todos para luego volver y mostrarles cómo se ven todas para que podamos seguir adelante con estas otras secciones. Y como dije muchas veces, es sólo porque no quiero desperdiciar demasiado de tu tiempo porque de lo contrario, esta clase podría ser algo así como, no sé, diez horas de duración o algo así. Entonces probemos 50 aquí. Como puedes ver, porque tenemos 10 días, no funciona tan bien. Entonces intentemos 40. Creo que 40 funciona mejor. Y todavía podemos hacer con 328, cuatro aquí. Entonces solo recuerda que son 40. Por lo que dentro del estado de horror, podemos traerlos de vuelta así. Ir citado un molino, esto va a ser 240. Y estos dos son 328. Lo cual funciona muy bien. Volvamos ahora al estado por defecto, traigan éste de vuelta a aquí. Al igual que así. Voy a traer estos tres, como en ese medio. Vayamos con 328. Y aquí, porque tenemos lo mismo, vamos a usar 40 o muy Tierra. Podemos usar 50 aquí mismo porque sólo tenemos uno en los días. O si quieres mantener la consistencia, puedes hacerlo por ejemplo, 40 por estos 44 días. Entonces realmente todo depende de ti lo que quieras hacer con ellos. Entonces ahora que eso está terminado, pasemos a flotar y volvamos a traer esto de nuevo aquí. Y de nuevo son 320 ocho. Y estos divisores son básicamente la tarea más grande aquí mismo. Entonces realmente todo depende de ti. Si quieres usar el divisor, si no lo haces, pero si lo haces, solo recuerda que pueden ser un poco una tarea de ajustar. A diferencia de todo este otro contenido, que es mucho más sencillo de ajustar simplemente haciendo esto. Si yo, por ejemplo, más de estos divisores, más que de este lado, se puede ver que se están moviendo por todo el camino y no se están ajustando como la camisa, que es, creo que un gran tema en XD, pero lo van a arreglar en futuras actualizaciones. Y veamos en estado de horror finalmente, terminemos esto para que pueda mostrarles cómo alinearlos en la cuadrícula. Por lo que 328 así. Y vamos a ver aquí podemos usar 50 y llamarlo un día y decir que ahora lo hemos completado todo. Ahora por fin, tenemos 30 espaciado entre cada uno de ellos. Entonces voy a seleccionar estos, moverlos así. Entonces los voy a traer de vuelta. Y para estos, simplemente lo voy a mover a 30 así. Voy a ajustar este grupo de pergaminos para venir aquí. Y lo que también voy a hacer es básicamente saltar dentro y simplemente puedo usar todo este grupo porque tenemos los dos estados, si te acuerdas. Entonces lo que puedo hacer es saltar aquí mismo, seleccionar toda mi información y luego saltar a mi estado clicado. Control basado en kit V, y luego eliminarlos todos así. Y luego dentro de nuestras ciudades, lo que puedo hacer es simplemente moverlas hacia el borde. Entonces así, así. Y veamos si esto es correcto. Lo es. Entonces lo que también puedes hacer si quieres, puedes ajustar esta línea solo un poco si quieres. Pero no creo que sea necesario porque este lado es plano de todos modos. Entonces ahora si cambiamos entre nuestro estado predeterminado y nuestro estado clicado, puedes ver cómo se ve eso. Así que saltemos rápidamente a la vista previa y veamos si la animación funciona. Aquí estamos. Entonces todo se ve bien. Cuando pase el ratón y haga clic, se va a traducir a aquí se va a quedar bien y limpio. Y cuando regrese, tendría que hacer clic y crear una transición en este estado. Entonces vamos al estado cliqueado. Pero en realidad antes de que lo hagamos, vamos a ver rápidamente, por lo que destinos europeos flechas, derecha, punto de paso C, qué usamos. Así que toca auto, anima los destinos de forma rápida, fácil. Ahora 0.6. Por lo que podemos ir a hacer clic en estado. Localice nuestras flechas punto de paso izquierdo, haga clic derecho Dara, toque autonomía, vaya al estado predeterminado, facilidad de entrada y punto cero 86. Entonces ahora por fin, antes de terminar este video, Vamos a previsualizarlo una vez más, ver cómo se ve. Entonces voy a bajar a Europa. Ahí mismo. Horror, click. Funciona. Howard click it funciona. Y obviamente este pergamino no funciona. Entonces veamos por qué deberían funcionar las ciudades de diseño y esto. No lo entendí. Por qué no funciona. Aquí está. Entonces como puedes ver, a veces hay algunos errores con Adobe XD, pero básicamente sí funciona. Y cuando hago clic aquí mismo, también podemos traerlo de vuelta. Entonces Derek, oh, y también todos estos efectos flotantes del trabajo como deberían. Nuestro botón funciona como debería, y todo está tan conectado. Y también este texto entre las estancias de tu estado en la parte superior, por lo que se ve bonito y limpio. También puedes pensar en ajustar la altura de la sección para que puedas ajustar la altura de las tarjetas si quieres. Simplemente puedes hacer eso ajustando la altura de esta imagen y luego ajustando la altura de todas estas secciones. Si entro a París, por ejemplo, Digamos que si haces eso, simplemente puedes ajustar la altura de todas estas otras secciones si quieres. También puedes ponerlos en un grupo, usar la pila y luego cuando ajustes eso, se ajustará automáticamente. Entonces esas son solo algunas de las opciones que puedes hacer y puedes usar. Pero no voy a hacerlo, creo que se ve bien como debería aquí mismo. Entonces como dije, lo que voy a hacer ahora es ir adelante y trabajar en estos tres. Entonces África, Asia, y América. Y luego voy a volver y mostrarles los resultados. Y luego vamos a trabajar en todas estas otras secciones de nuestra página. 40. Crear diseño responsivo: De acuerdo, así que ahora que he hecho todos esos cambios, déjame pasarte rápidamente y mostrarte cómo se ven. Entonces básicamente lo mismo que en todos estos otros diseños y lo mismo que hicimos aquí mismo. Hice exactamente lo mismo y exactamente los estapes, mismos pasos para todos ellos. Simplemente no quería aburrirte con detalles. Ahora, vamos a trabajar en esta sección, que es reservar tu viaje de ensueño y se fue a posicionarlo aquí mismo. Y veamos, quizá hagamos el camino. Entonces voy a posicionar aquí mi imagen y luego saltar entre las secciones. Y veamos, incluso puedo reducir el tamaño de mi imagen. Ancho, por ejemplo, ver cómo se ve eso, y luego puedo aplicar los cambios a aquí. Entonces vamos a ver si los selecciono a ambos. Y simplemente encoger término como este. A ver, tal vez dos para algunos hasta así tal vez. Y entonces puedo traerlos de vuelta y ver posición, posicionar ese contenido aquí. Y luego vamos a ver. Llevar la imagen a algo así como cuatro columnas de ancho tal vez. Hasta NYC. Esto en realidad, acerquemos un poco más solo para que podamos afinar todos estos detalles antes de seguir adelante realmente y reducir el tamaño. Ahora podemos saltar por dentro, seleccionarlos a ambos y simplemente encoger la demanda. Haré doble clic en mi imagen en cada posición de aquí. Y por eso tenemos todo este contenido como redo aquí. Lo siguiente que voy a hacer es en realidad dar click aquí. Voy a asegurarme de que sea altura automática porque lo vamos a escalar más tarde. Voy a dar click aquí mismo. Asegúrate de que esto también sea altura automática, sólo porque más adelante vamos a copiar este texto, moverlo por todos estos otros tamaños. Y por lo tanto, quiero explorarlo de esa manera y quiero mantenerlo así. Como puedes ver, stack sigue sosteniendo la distancia de 150 entre todas nuestras secciones. Y podemos mantenerlo ahí o podemos cambiarlo más tarde. Todo depende de lo que queramos hacer. Por lo tanto, pasemos a nuestros principales destinos. Yo lo voy a alinear aquí. Y básicamente voy a hacer lo mismo como con todas estas tarjetas. En primer lugar, llevemos las flechas y posicionadas justo por aquí. Entonces están ahí. Y básicamente voy a hacer lo mismo. Entonces antes que nada, para los destinos, lo voy a traer aquí. Ahora veamos si se alinea con nuestra grilla. Sí lo hace. Entonces primero lo primero, porque una vez más tenemos tres cartas, podemos ajustarlas para que sean cuatro columnas de ancho. Entonces voy a saltar dentro de éste y podemos ajustarlo para que esté aquí así cuatro columnas de ancho. Y creo que los textos que ven aquí mismo, realidad no importan siempre y cuando sea comprensible y legible. Por lo que puedes saltar dentro de aquí y ajustar esto a lo que quieras. Entonces veamos, tal vez pueda ajustarlo a aquí. Yo podría hacerlo. No importa mientras tenga sentido. Entonces, vamos a ver. Vamos a mantener cuatro líneas de texto en altura. Entonces lo que también puedo hacer es usar el contenido desde aquí, entonces Control C. Y básicamente lo único que hicimos justo aquí, que es diferente, es en esa sombra de fondo. Entonces voy a ir a aquí, clic aquí, y luego usar ocho para el fondo poco profundo. Y también voy a hacer doble clic y agrandar esta imagen en tan solo un poquito hasta aquí. Entonces ahora que eso está terminado, puedo volver al estado por defecto y puedo traer estos dos. Entonces como usted dijo, cuatro columnas de ancho. Entonces aquí mismo, asegúrate de que tenga sentido. Sí lo hace. Y también puedo ir a flotar porque no requiere ningún cambio. Y se puede ver que aún tenemos estos dos estados. Y el texto es de cuatro líneas de altura. Para que pueda volver a este. Y se puede ver con algunos de estos elementos, es mucho más sencillo ajustar porque se están ajustando y llenando de forma natural todo este espacio. Ahora voy a hacer lo mismo que hice con las anteriores. Entonces voy a usar esta posición aquí mismo. Y voy a trabajar en más. Entonces Michelle, y asegúrate de que sean cuatro columnas de ancho aquí, inmediato, tenemos el problema. Entonces lo que voy a hacer es usar esto. Entonces St igual que especie de abreviatura al nombre original. Entonces todo el mundo está todavía sabe lo que es, pero en sólo dice pestis en lugar del nombre completo. Entonces este Derek fuera. Y voy a volver a la posición estatal por defecto esto aquí mismo. Y para un Sydney, voy a asegurarme de que tenga cuatro columnas de ancho así. Ve a la fecha de Horace, asegúrate de que tenga cuatro columnas de ancho. Y se puede ver cuando se está diseñando con estos elementos simples, sin divisores, por ejemplo, y sin todas estas animaciones complejas, hacer esto es realmente bastante fácil. Entonces como puedes ver, es realmente bastante relajante en realidad hacer esto y para realmente bastante simple. Entonces, finalmente, lo que vamos a hacer es sacarlos del camino así y traer a todos estos tipos. Y luego volver a posicionarse a 30, asegúrese de que aquí es donde debe estar. Y luego simplemente parecía como con otros, selecciona tu contenido, cópialo, ve al estado clicado, lo basaba aquí mismo, y luego eliminaba el contenido antiguo. Y lo único que quiero hacer aquí mismo son dos mis destinos y simplemente mover los destinos a aquí. También ve a Prototipo, ve dos flechas, un punto de tabulador izquierdo click sobre él porque queremos volver a auto animate, elige el estado por defecto, fácil en nuestro 0.6. Entonces eso se va a quedar la misma mano, volver al estado por defecto, y ahí lo tienes. Ahora pasemos a esta sección, que son testimonios. Ahora dentro de nuestros testimonios, lo que quiero hacer es ir a nuestros testimonios ellos mismos. Porque puedes ver que este fondo, si te muestro, si hago click en mi tarjeta aquí mismo, no va todo el camino hasta aquí, lo cual realmente me gustaría que fuera y se expandiera. Entonces lo que voy a hacer es copiar este texto, es Control C. Entonces desagrupa esto. Go Control G una vez más y basado en, y voy a usar la pila. Entonces lo que voy a hacer dentro de la pila es que simplemente voy a ajustar este ancho de tarjeta. Entonces voy a ajustarlo a aquí. Tan ancho de esto, así 11, 12. Y luego voy a saltar dentro de la segunda. Basado en el valor de la deuda. Y se puede ver que la pila se va a ajustar automáticamente de manera adecuada. Entonces lo voy a pegar ahí mismo. Y yo voy a hacer lo mismo por esto. Entonces ahora lo que podemos hacer es o hacer estos mismos cambios en todos ellos como yo voy a hacer. O simplemente puede copiar y pegar dominio si lo desea. Entonces lo que voy a hacer es usar estos mismos. Excepto por ejemplo, para el héroe o el conocimiento. Vamos a Eddy posicionarlos a todos. Entonces como pueden ver, sí los organizaba de una manera agradable aquí. Entonces veamos testimonios. Tendríamos que hacer eso una vez más, desafortunadamente, así que desagrupar, puedes golpear testimonios de calidad Control G. Mi papá. Y vamos a incluir esa misma distancia. Pero empecemos con herramienta testimonial porque es ésta. Entonces lo voy a pegar así. Yo voy a hacer lo mismo en esta primera. Yo lo hice. Y veamos si volvemos a nuestro estado por defecto, vamos a testimonios y veamos que la distancia es de 60. Entonces esa es la distancia que vamos a estar usando para esta de aquí. Por lo que los testimonios. Entonces apilar, voy a usar 60, dudo. Y entonces lo que voy a hacer es simplemente empujarlos a todos para que este segundo llene el espacio muy bien. Probémoslo de esta manera. Ya lo tengo y ahora que tenemos eso, déjame saltar dentro de aquí, copiar este valor. Entonces estamos aquí en aquí. Y pasemos ahora a la siguiente guardia. Entonces vamos a hacer lo mismo por esto. Lo pegaré así. Y por último, hacer lo mismo por esto. Así que pegarlo aquí mismo. Ahora, lo que puedo hacer para evitar este tipo de confusión es simplemente usar un Control C en sección testimonial e ir al testimonial número 3, quitar éste, pegarlo aquí mismo, y simplemente puedo ajustarlos para que quepa en éste. Y esto nos evitará crear animación para el texto, que es básicamente. El más exigente de todos ellos en este apartado en particular. Y vuelve a aquí, borra este. Control V posicionarlo aquí arriba. Porque una vez más, todavía tienes que hacer eso por el bien de auto animate. Por lo que tendrá que volver a posicionarse igual y suciedad y ver dónde está. Todavía tengo que empuñarlo solo un poquito hasta aquí. lo que realmente no me gusta de esto son las flechas, así que me gusta gravar esto. Creo que es bueno. Pero para las flechas, Volvamos al estado por defecto. Trabajemos ahí en ellos. Entonces lo que voy a hacer es simplemente colocarlos aquí mismo y golpear Control C e ir al segundo estado, controlar V. Y cuándo colocarlos abajo, borrar los viejos. Control V. En este, borrar los viejos y simplemente pasar a otros nuevos hacia abajo. Y por último, estado número cuatro, voy a hacer lo mismo. Por lo que lo movió hasta aquí. Yo me quité los viejos, rebaño lechero. Y ahora trabajemos rápidamente en nuestra animación. Entonces prototipo, como saben, sólo tenemos un D justo aquí. Entonces en la flecha derecha, tenemos fácil ahora 0.6. Entonces eso es lo que vamos a crear para todos ellos. Por lo que testimonial para localizar tus flechas, punto de paso izquierdo nos va a llevar al estado por defecto, a la derecha. Tab point nos va a llevar a testimonial tres. Más desgastado a testimonial tres van a localizar nuestras flechas. Aquí estamos. Haga clic aquí. Te vas a ir a testimonial, esto nos va a llevar a testimonial cuatro. Y finalmente ir a la última. Y en este último vamos a utilizar los extremos de izquierda para ir al anterior, que va a ser testimonial tres. Y ahí lo tenemos. Antes de seguir adelante, sólo quiero comprobar rápidamente y ver si conseguimos todos estos y emisiones, ¿verdad? Entonces, empecemos con este. Entonces tenemos, como estamos lo tenemos todo, lo cual es genial, y funciona como está puesta la camisa. Verdadero contento con eso. Entonces vamos a ver, nos queda éste en el hover, así que vamos a arreglar eso. Y esto funciona como debería, por lo que todo se ve bien. Y por último, echemos un vistazo a estos testimonios. Y se ven bien. Volvamos atrás, ver para las filas así 32. Y finalmente uno, que está bien. Entonces arreglemos eso rápidamente. Entonces como dije, dejamos la Toscana aquí. Entonces destinos, Toscana, lo dejamos en los estados de terror. Simplemente haga clic en estado predeterminado y puedo hacer una comprobación rápida y ver si dejé alguno de ellos y están así no. Y finalmente tenemos que ir a los destinos estatales cliqueados. Y vamos a ver, Maldivas está en el defecto. Por defecto. Y se puede ver que la Toscana también está en horror aquí. Por lo que hay que cambiarlo en ambos estados para que puedas evitar cualquier tipo de. Confusión y cualquier tipo de errores en el futuro. Entonces veamos qué tenemos. Hemos completado todas estas secciones. Pasemos ahora a la disciplina. Y lo que voy a hacer básicamente es hacer lo mismo para las categorías de viajes como lo hicimos para todas estas otras. Simplemente voy a ajustarlos y asegurarme de que tengan seis columnas de ancho. Y fue para NIJ Dares, contemos 1, 2, 3, 4, 5, 6. Entonces uno más. 23456. Eso está bien. Y voy a mover este justo aquí y ajustarme a aquí. Básicamente, como se puede ver, lo único que en realidad se va a ajustar es el ancho de la imagen, así. Y vamos a hacer rápidamente el hover por estos. Entonces voy a seleccionarlos. Asegúrate de que sean un seis. Y voy a asegurarme de volver al estado por defecto en todos ellos. Al igual que así. Así funciona bien, terminamos los socios, y ahora vamos a ocuparnos de éste para que podamos usar las mismas dimensiones que antes. Entonces puedo ir aquí mismo y ver que mi imagen es de 514 de ancho. Entonces, usemos esos mismos ajustes para esta sección aquí mismo. Por lo que imagen, puedo ir con 514. Algo no funcionó del todo ahí. A ver. A lo mejor podemos hacer eso manualmente incluso. Entonces, veamos, cuatro de ellos así. Creo que eso está bien. Y quizá incluso podamos ajustar esto para que se alinee con esta línea de rejilla, un lago que está justo aquí. Déjame revisar. Y eso es genial. Y una última cosa que me olvidé de hacer para estas secciones es ajustar los botones. se pueda ver en estos, las cosas se están moviendo a un ritmo mucho más rápido. Vamos a ocuparnos de éste. Voy a dar click justo aquí y justo mi botón allá, lo tenemos. Y básicamente lo adeuda por estos apartados. Como dije, algunos de ellos van a ser mucho más sencillos. Algunos de ellos como éste va a ser mucho más duros. Pero antes de pasar a esta, quiero hacer doble clic en mi mesa de trabajo, extendida hasta abajo para que pueda trabajar en mi pie de página. Entonces permítanme en primer lugar ajustar estos dos. Entonces lo voy a hacer en esta imagen se ve bien. Y ahora tratemos con la propia información del pie de página. Primero alinémoslo a nuestra cuadrícula así. Voy a usar mi logo si puedo, y posicionarlo en el centro de mi tablero de arte. No sé por qué no me deja hacer eso. Entonces usemos un rectángulo. Voy a usar un rectángulo aquí. Pero antes de hacerlo, veamos rápidamente la distancia entre. Entonces son 100. ¿ De acuerdo? Entonces usemos un rectángulo. De verdad rápido. Seleccionar y un logotipo. Asegúrate de que el logotipo esté en el centro o un movimiento nuestro rectángulo. Y ahora para la información del pie de página, podríamos posicionarla en 100 desde arriba. Así. Por lo que ahora está a los 100. Y ahora tratemos con el nav principal. Entonces como recuerdan, hicimos todo esto con propósito. Entonces lo que puedo hacer es quizás alinearlos a la cuadrícula del espaciado de dos, como lo hace. Y así. Entonces puedo hacer lo mismo por estos, estos. Entonces veamos, tal vez pueda alinearlo aquí y luego hacer lo mismo por esto, esto, y esto. Y quizá incluso pueda aumentarlo hasta aquí y tal vez ponerle esto aquí y, y ver qué podemos hacer aquí. Entonces tal vez aquí mismo, esto puede quedarse ahí y quedarse ahí. Por lo que está bien y uniformemente espaciado. Entonces lo que voy a hacer a continuación, estos cierran, estos dos. Voy a saltar a mi divisor de áreas aquí es simplemente traerlo aquí, cerrar esto y luego trabajar en mi fondo forzado. Entonces lo que voy a hacer aquí es que en primer lugar, reducir el espaciado mucho como la suciedad. Y entonces por ejemplo, puedo llamar a estos términos tal vez. A ver. A lo mejor podemos trabajar en ello así. Entonces vamos a ver, ahí mismo. Solo trato de pensar en cómo podemos ajustar esto. Entonces, en realidad, pinchemos aquí y usemos el mismo espaciado fuera, digamos 40. O quizá algo un poco más grande. Entonces tal vez 80. Katie funciona mejor. Entonces ahora vamos a sacarlo del camino a aquí. Y ahí lo tenemos. Hemos completado nuestro pie de página. Ahora, lo último que quiero hacer es hacer doble clic aquí y cerrarlo en la parte inferior. Y ahora podemos seguir adelante y trabajar en esta sección aquí mismo para la Q&A Así que lo primero que voy a hacer es moverlo aquí y luego necesito ajustarlos todos para poder encajar toda mi información dentro. Pero no me voy a molestar con eso ahora mismo. Voy a hacer otra cosa. En realidad voy a usar mi pila, darle la vuelta así. Y luego voy a posicionar toda la sección en el centralizado me conoce seguro de que mis datos están en el centro, más o menos por aquí. Y voy a hacer a continuación es asegurarme de que todos estos estén centrados. Voy a asegurarme de que ambos de mis textos, nuestro centro se alineó así. Y también me voy a asegurar que convierta mi texto a esto para que pueda extenderlo y llenar así el resto de mi espacio. Entonces voy a entrar y ajustarme. Al igual que así. Entonces como dije, se trata de esos pedacitos aburridos en esta primera etapa. Pero más adelante cuando pasemos a otros tamaños, va a ser mucho más sencillo de ajustar porque va a mantener a todos ellos como para que incluso puedas hacer esto en una línea si quieres, pero voy a mantenerlo así. Es decir, vamos a ver. A lo mejor podemos mantenerlo en 60. Creo que eso va a estar bien. Por último, intentemos ajustarlo ahora y ver si es Sí, creo que va a ser bueno. Ver atreve y rebaño lechero. Y por último, trabajemos en este botón. Posicionémoslo así. Y luego como Este se atreven hábito. Y por último, vamos a ocuparnos de esto. No lo voy a cambiar demasiado para todos nosotros. Voy a llevarla al 100, por ejemplo. Y entonces simplemente lo voy a centrar porque no creo que sea necesario sea izquierda y derecha o lo que sea y centrarlo aún mejor, lo que puedo hacer es usar lo céntrico. Entonces vamos a usar el 100 de todos modos de la distancia. Asegúrate de que esté en un centro. Quita nuestro rectángulo así, y luego finalmente, mueve esto hacia abajo. Entonces veamos, puedo saltar aquí mismo y escribir print 100, así, y ahí lo tenemos. Ahora una última cosa que voy a hacer es bajar esto. Pero antes de que me mueva, Vamos a comprobar rápidamente si funciona. Debería funcionar porque acabamos de cambiar de lugar. Entonces vamos a ver, sí funciona y es genial porque empuja el contenido hacia abajo, que es lo que queríamos en primer lugar. Ahora estoy notando un tema aquí. Se puede ver que en este campo no va todo el camino a la línea. Entonces voy a mover toda la entrada 2 aquí y ver qué tenemos que hacer a continuación. Entonces entrada de texto, simplemente voy a mover esto para alinear aquí. Y ahora lo tenemos en su lugar porque accidentalmente lo moví probablemente tiempo anterior. Entonces simplemente voy a extender esto hacia abajo, cerrarlo en la parte inferior como así en la vaca lechera lo, tenemos nuestra página completa. Ahora si no quieres que este espaciado sea así, porque tenemos esta suma, esta cantidad de espacio aquí mismo. Una vez cerrado todo esto, puedes traerlo a, por ejemplo, 100 aquí si quieres. Pero no me voy a molestar con ello porque como dijo, más bien me gustará que todo se vea consistente y coherente y luego que cambie de lugar aquí. Y Derrida es por qué usé 150 para todos ellos. Como dije, puedes hacer lo que quieras, puedes usar lo que quieras. Y eso es básicamente todo para este tamaño. En el siguiente video, vamos a pasar al siguiente tamaño. Te voy a mostrar cómo va a quedar todo este proceso. Va a ser exactamente lo mismo que todo lo que te mostré. Que las cosas realmente van a cambiar y avanzar cuando pasemos al tamaño de la tableta. Entonces eso es lo más importante en esa área. Y luego finalmente, vamos a ajustarnos mayormente para un tamaño móvil. Y ahí es donde se va a ver más diferente de todos estos otros tamaños. Entonces como dije, los veré en el siguiente video donde vamos a trabajar en este próximo tamaño. 41. Crear diseño responsivo: Pasemos ahora a este siguiente tamaño. Y este tamaño en realidad va a contener algunos cambios. No va a ser algo demasiado importante como él. Va a estar aquí para el tamaño de la tableta y sobre todo para el tamaño móvil. Porque como dije, vamos a quitar la mayoría de estos componentes para los tamaños más pequeños debido a la pantalla inmobiliaria. Pero para estos dispositivos grandes, hasta 99 dos, en realidad vamos a hacer futuros intereses, que nos van a hacer mucho más fácil la vida más adelante para todos estos dispositivos medianos. Entonces antes que nada, lo que voy a hacer es sostener mi tecla Alt y un arrastre esto hasta aquí, así. Asegúrate de alinearlo. Entonces voy a copiar este texto en la parte superior. Voy a dar click aquí mismo. Y además estoy haciendo esto solo porque sé de qué talla es. Posteriormente, una vez que empiece a exportar esto a mis desarrolladores. Entonces cuando hago clic aquí y se puede ver 1024, así que eso es lo que vamos a hacer primero. Entonces 10, 24, así. Entonces todavía tenemos 12 columnas. Por lo que 30, 50, 47. Y esos son los valores, así que 30, 50, y cuándo entrar 47 aquí mismo. Entonces vamos una vez más. 3050 y 47. Entonces ahí lo tenemos. Entonces ahora lo primero es lo primero, vamos a trabajar en nuestra navegación superior primera canción y cuándo saltar dentro, usa mi nav principal y voy a saltar y voy a ir a mi navegación primaria y también usar mi desenfoque. Entonces voy a ir justo aquí y ver a 1024. Por lo que saltaré dentro de mi desenfoque de navegación primaria. Y para el duit, usa 1024 así. Y luego voy a abrir esto para mi secundaria. Ahora. Todavía puedo usarlo tal como está. Puedo traerlo aquí mismo. Y también puedo, por ejemplo, bajarlos a 20 tal vez. Entonces algo así. Yo estoy sosteniendo turno así para que tengamos solo un poco más de espacio para nuestro logo, que en realidad vamos a movernos aquí mismo. También para todos estos, Vamos a seleccionarlos. Entonces voy a seleccionar también mi selector para que se mueva con nuestro texto. Bienestar invernal, cruceros individuales animal sí. Vamos a moverlas aquí mismo. Entonces lo que voy a hacer es traernos aquí. Y voy a tratar de hacer eso lo que hice anteriormente. Así que selecciónalos todos, los distribuyó así. Y aún funciona con este tamaño de fuente soviético tienen que cambiar los sitios de fuentes hasta el momento. Pero lo vamos a cambiar un poco más tarde. Voy a simplemente mojar mi logo aquí mismo. Entonces lo primero que vamos a hacer es expandir nuestro nav primario y desdibujarlo todo el camino hasta aquí, por ejemplo, tan 10, 76, para que podamos ver fácilmente lo que estamos haciendo aquí mismo. Entonces, empecemos con nuestro destino. Entonces los voy a abrir y esconderlos y traerlos aquí y veamos dónde estamos con ellos. Entonces estamos en 42. A lo mejor puedo usar 60. Y esta vez, creo que funciona bien. Y lo que voy a hacer es lo mismo que hicimos anteriormente. Entonces voy a saltar en mis destinos. Y vamos a ver, tengo opción automática aquí mismo, pero sólo voy a comprobar cuáles funcionan mejor. Entonces hasta así creo que funciona bien. Entonces voy a hacer lo mismo por el Asia. Entonces. Bastante difícil a veces con algunos de ellos, pero como su te muestra en un tamaño anterior, puedes hacerlo manualmente si quieres, sobre todo un abajo por la deuda de Estados Unidos y finalmente por las Américas. Hagámoslo aquí mismo. Entonces este es el tema. Nos vamos a encontrar con una canción, vamos a dejarlos en algún lugar por aquí, por ejemplo, solo vi que el más o menos alineado a la parte superior, siempre puedo hacer algo como esto y luego saltar a SEO y puedo moverlo manualmente para escuchar su código. Entonces ahora que tenemos nuestro destino es, voy a esconder. Haga clic aquí. Voy a traer de vuelta mi invierno. Y lo que pasa con esto es lo que vas a hacer en realidad es deshacerte de esta ilustración. Porque las ilustraciones se atreven en tamaños de pantalla más grandes para que tengas toda esta pantalla inmobiliaria y puedas usarla mucho más fácilmente. Pero cuando llegues a estos tamaños de pantalla más bajos, no hay necesidad de que uses todos esos elementos diferentes. Entonces básicamente lo que voy a hacer es saltar por dentro, borrar mi ilustración invernal, luego saltar dentro de mi texto. Voy a centrar alinear aireación. Voy a dar click aquí mismo para poder alinearlos todos así. Y también voy a seleccionar mi botón, asegurarme de que todo esté en el centro, y luego simplemente traer mi texto aquí mismo al centro, así. Entonces lo mismo que antes. Voy a saltar dentro y ajustar mi botón así que lo voy a posicionar aquí mismo. Y vamos a ver, 2, 4 creo que ya es lo suficientemente bueno. Lo es. Y hacer lo mismo por el flotador. Mi papá es Derek 0. Entonces ahora tenemos el mismo espaciado, tenemos los mismos elementos, tenemos el mismo texto justo sin la ilustración misma. Lo que puedes hacer es en realidad que puedes ajustar la altura si quieres. Se puede posicionar y este texto es un poco más abajo si se quiere. Pero si golpeo la vista previa apenas muy rápido, se puede ver cómo se ve eso como una sierra. Siempre me gusta mantener mi texto ahí arriba porque mantiene mucho más la atención del espectador y del visitante. Cuando el texto es más alto a la parte superior, entonces gana hacia abajo porque entonces pueden enfocar sus esfuerzos aquí mismo. Y todavía vamos a mantener nuestros efectos de hover porque seguimos siendo un ancho para el ratón aquí mismo, porque estos siguen siendo tamaños de escritorio. Entonces bajemos nuestro invierno hacia abajo. Vamos al Wellness a mostrarlo y hacer lo mismo. Eliminar, ilustración, texto posicionado, asegúrese de que esté centrado, alinear, seleccionar todo. Asegúrate de que esté en el centro. Y luego simplemente trae texto al centro justo ahí, rebaño lechero. Y hacer lo mismo por los botones. De hecho lo voy a alinear aquí mismo. Y cuándo asegurarse de usar para así y usar para lambdas siempre van de izquierda a derecha con estos botones para que no tengas ninguno de estos fallos y errores. Y por cierto, mientras grababa esta clase, Adobe XD lanza una actualización para que no se pueda ver la. Menú de hamburguesas aquí mismo, pero tienes todas estas opciones aquí mismo. Entonces, por tanto, en lugar de hamburguesa y luego todas estas otras opciones, Es lo mismo que está en un Mac. Entonces básicamente puedes pasar el ratón aquí mismo y usar cualquiera de estas opciones si quieres. Ambas opciones de clic derecho siguen funcionando como estaban. Y el equipo de Adobe XD lanza estas actualizaciones de vez en cuando. Y básicamente a veces hay pequeños como éste, pero a veces son un poco más grandes y un poco más grandes. Por lo tanto, solo mantén los ojos abiertos para esas actualizaciones para que corras siempre al día. Y siempre te recomendaría que actualices tu XD siempre que puedas, o si lo tienes, puedes configurarlo para que se actualice automáticamente. Si tienes su suscripción a Cloud, si no estás usando la versión gratuita de XD. Está bien, así que ahora que el individuo está hecho, tengo cruceros y medio a punto de arreglar. Entonces déjame borrar mi ilustración de cruceros. Voy a asegurarme de que todos estos estén centrados. Esto está centrado. Voy a traer mi texto en todo el camino hasta aquí, así. Y voy a arreglar mi botón aquí mismo y luego usar cuatro. Al igual que esto, albergan sus hábitos. Y lo voy a ocultar. Y luego trabaja con la sección Acerca de Nosotros. Ahora para esta sección Acerca de Nosotros, lo que puedes hacer en realidad es que voy a hacer lo mismo por el texto. Entonces voy a seleccionarlos todos, asegurarme de que estén alineados en el centro, asegurarme de que el botón esté también en el centro. Y voy a llevar mi texto todo el camino hasta este filo aquí mismo, así. Entonces básicamente autos endeudados, Veamos, tengo cuatro de ellos vacíos básicamente. Entonces lo que puedo hacer tal vez es reducirlo un poco más. Entonces vamos a ver. En primer lugar voy a ocultar mi mapa y ver que este texto realmente está haciendo un problema. Entonces lo que puedo hacer es simplemente agrupar mis textos así y dejar vacías las cuatro columnas para mi, para mi mapa. Pero antes de que lo haga tenemos 40 aquí, así que sólo vamos a mover nuestro botón por píxeles hacia abajo. Pero antes de que lo hagamos una vez más, asegurémonos de que tenga cuatro columnas de ancho, así. Y así. Entonces me voy a mover con 40 ahora, veamos así. Y por último, sólo voy a asegurarme de que todo esté centrado así. Ahora traigamos de vuelta nuestra información del mapa. Y básicamente lo que voy a hacer aquí mismo porque tenemos esa pila. Si recuerdas, voy a saltar a mi grupo, tenemos la pila disponible. Y básicamente voy a habilitar mi pila una vez más aquí para que tengamos básicamente dos opciones de pila. Voy a llevar esto a la izquierda así. Y veamos, de aquí para aquí tenemos 20. Entonces podemos hacer eso también. Puedo teclear 20 aquí mismo. Entonces tenemos 24 estos dos y 24 esto abajo en la parte inferior. Y finalmente para el mapa, solo voy a hacer doble clic dentro y posicionarme para estar a las cuatro como este y ajustar mi mapa P90 yendo a algún lugar por aquí. Creo que eso es bueno. Y ahí lo tenemos. Esa es nuestra navegación completada. Pero también puedo hacer es quizás empujar un poco nuestro texto. Entonces simplemente muévelo hasta que se alinee mejor con nuestra línea de cuadrícula, por ejemplo, aquí mismo. Sólo para que tengamos un poco más de espacio entre nuestro mapa y nuestro texto. Y no rompemos ninguna regla, pero vamos a, en realidad vamos a subirla apenas un poco a la izquierda, así. Y su sombrero. Entonces ahora lo que me queda hacer es hacer lo mismo. Por lo que básicamente tengo que copiar y pegar todos estos elementos en su interior. Pero las navegaciones o deberían funcionar en realidad porque no hice nada más con esta navegación superior. Básicamente, simplemente puedo reorganizar estos en la parte superior sólida C. Veamos, puedo usar un logotipo secundario. Y déjame copiarlos todos excepto el nav primario borroso. Entonces eso va a ser en 1024, 10, 76. Entonces vamos a copiarlos todos. Yo eso, y para este primero, voy a volver a traer mi borrón a uno, así. Y en este estado por defecto, Vamos a ver, en realidad vamos a ocultar el selector. Entonces va a ser al 0 I que vamos a ir a las naciones. Eso, y si quieres conservar tus animaciones, básicamente puedes ajustarlo todo. Una vez más, como dije, pero no me voy a molestar con eso. Voy a quitarlos a todos y volver a hacer las animaciones más tarde porque me parece mucho más sencillo. Entonces de 10 a 24 y lo hace a las 10, 80, lo cual está bien. Entonces básicamente destinos y voy a mostrar mis destinos y vamos a usar todos estos otros, bajarlos a 20. Ve a la base de invierno 10, todo, y luego sigue adelante y quítalo todo excepto la primaria ahora desenfoca. Entonces lo voy a llevar a 24 así. Voy a, vamos a ver, traer mi contenido invernal. Y ahora destinos y todos estos otros que fueron a estar a los 20. Y voy a saltar a mi selector más que se llevó a cabo aquí mismo. Lleva mucho tiempo. Pero si quieres hacer todo correctamente, entonces realmente tienes que saltar y hacer todas estas cosas. Entonces eliminemos todo esto basado en la nueva información. Esto va a ser un bienestar. Entonces esto, esto, y vamos a ver. Todas estas otras filas van a ser 20. Selector se va a pasar al bienestar así. A ver. Y simplemente lo voy a mover aquí mismo, traer mi contenido de bienestar, mostrarlo así. Y voy a terminar con este individuo y luego voy a pausar esto para poder hacer los ítems de navegación. Ellos pueden hacer las animaciones sin aburrirte demasiado. Entonces vamos a ver, estamos en estados individuales o vamos a esconderlos todos a 20 excepto al individuo. Voy a usar mi posición de selector justo aquí. Vamos, aquí, estamos trayendo mi contenido individual y simplemente voy a ajustar mi selector hasta que encaje. Y ver justo ahí dentro para traer mi panel de capas y rebaño lechero. Y aquí tenemos que ajustar esto a Dan 24, correcto. Entonces pasemos a los cruceros. Eliminarlo todo, basándolo en. Por lo que todos estos van a ser 20 selector y vamos a traer cruceros. Básicamente este selector es el tedioso, más tedioso de todos, porque hay que ajustarlo, moverlo, pero todo a favor de una buena animación. Y finalmente terminémoslos con sobre nosotros. Entonces los voy a quitar a todos. En primer lugar, esto va a ser 1024 y se incurre para custodiados en los cruceros anteriores? Yo creo. Entonces Veamos, antes de ahora desenfoque. Sí, así 1024. Y puedes saltar rápidamente entre todos estos estados y ver, por ejemplo, para individual, puedes ver si lo has hecho por el bienestar para todos ellos sólidos acuden a sobre nosotros y vamos a trabajar en eso. Entonces sobre nosotros, los voy a seleccionar todos y traer nuevos 220, usa mi selector. Más fueron a escribir aquí, trayendo mi sobre contenido de tarea. Lleva esto a 1024, está bien. Y finalmente trabajar en nuestro selector. Al igual que así. Y ahí vamos. Es así ahora que todos nuestros estados, nuestros acabados, lo que voy a hacer es básicamente saltar aquí, ir al prototipo y ver. Al hacer clic en el primero, tengo tipo auto animate, facilidad de salida 0.4 segundos. Entonces ese es el que voy a estar usando en todos estos otros estados. Entonces vayamos a destinos. Se puede ver que guardó todos estos y todos estos, lo cual es genial, pero no se quedó con todos estos otros. Entonces vamos a aquí y vamos a ver. Por lo que los destinos no se van a seleccionar un invierno. Click, tap, auto animate. Nos vamos a ir al invierno, facilidad de entrada, salida y 0.4 segundos. Y básicamente ahora que Adobe XD recordaba, o necesitas hacer, es simplemente seguir adelante y conectarlas todas. Entonces esto es individual, esto son cruceros IDAT sobre nosotros, y eso es todo. Y por último para el logo, ahora puedes hacer click en el propio logo. Realmente no tienes que hacer clic en el logo en ese punto porque es el PNG de todos modos va a volver al estado por defecto. Entonces voy a pausar el video aquí mientras hago todos estos estados para luego volver. De acuerdo, ahora así que eso está terminado. Pasemos a la siguiente sección, que va a ser obviamente nuestra sección de héroes. Entonces vamos a trabajar en eso siguiente n. Básicamente lo único que vamos a hacer. Pero antes de que haga eso, déjenme mover rápidamente este fondo ahora mismo aquí para que no nos distraiga demasiado. De hecho, lo único que vamos a hacer es mover estas flechas. Entonces voy a ir a punto de tabulador de flecha izquierda, y los voy a mover aquí mismo. Al igual que así. Y también voy a hacer eso aquí mismo. Colóquelo hasta el borde de esta manera. Y voy a mover nuestro texto al centro. Vamos con botón Hero y máscara de texto. Asegúrate de que estén en un centro. Y por último, lo que voy a hacer con mi botón se expanden dos aquí y dos aquí. Y eso es básicamente todo. Se pueden ajustar todas estas imágenes por supuesto, pero creo que ésta funciona bien. Este todavía funciona bien. Y veamos, este tercero funciona bastante bien en realidad. Entonces solo vamos a dejar todas esas imágenes. Por lo que una vez más, esto va a ser cuatro tanto para el predeterminado como para flotar así. Y las flechas y el texto van a venir en medio. Entonces, sin más cambios en ellos, simplemente van a alinearlos todos con el remitente. Al igual que esto. Una vez más, asegúrate de que mi botón tenga cuatro columnas de ancho, así. Por lo que se puede ver a veces con estos estados, se pueden ajustar fácilmente. Se pueden hacer todas estas cosas mucho más fácilmente. Entonces vamos a ver, esto es a la línea que está bien y una correcta simplemente ajustada. ¿ Dónde está? ¿ Aquí? Lo es. Al igual que esto. Para que puedas dejar tus imágenes colgando como lo estoy haciendo aquí mismo. O simplemente puedes traerlos todos de vuelta así si quieres. Entonces, en realidad hagamos eso para todos los estados porque no altera demasiado la imagen. Entonces todo lo que estoy viendo aquí es que puedes hacer lo que quieras, porque cuando exportes esta imagen, de todas formas va a ser al ancho del aeropuerto. Por lo que realmente no importa. Es solo para que no te distraiga mientras estás trabajando. Entonces vamos a ver, flechas centro de jardín de coral. Muévelos así. Déjame mover mi segunda flecha aquí mismo. Y si estás pensando que a veces voy demasiado rápido es solo por la experiencia. Todo esto se convierte en una especie de memoria muscular. Por lo que empiezas a conocer todos estos atajos. Y obviamente empiezas a aprenderlas una vez que comienzas a trabajar. Y obviamente cuantos más proyectos tengas, más fácil va a llevar a ajustarse a todos estos diferentes cambios. Entonces por ejemplo, este nuevo cambio que acaba de traer a esta nueva versión de XD. Ni siquiera noté que alguien lo dijo en Twitter y acabo de revisar muy rápido y no es nada demasiado importante en realidad. Entonces sigamos adelante y lo comprobamos. A ver si tenemos todas estas animaciones. Y ahora se puede ver, a diferencia de este menú en la parte superior, hemos guardado todas estas animaciones porque simplemente ajustamos lo que teníamos anteriormente y simplemente movemos eso a su lugar así. Por lo que todas estas animaciones se mantuvieron exactamente igual. tanto que con éste. Cuando hago clic aquí mismo, se puede ver que la animación sigue funcionando. Pero debido a que ajustamos el contenido tanto como expliqué, tuvimos que ajustarlos mientras que todos estos en la parte superior siguen funcionando como deberían. Porque como dije, sólo movemos el contenido un poco más cerca usando esas pilas. Ahora por fin, sigamos adelante y trabajemos en esta navegación de fondo. Entonces lo que podemos hacer aquí mismo es, por ejemplo, el estadounidense 30 de ellos y sólo usar dos para el botón. Entonces déjame mostrarte a lo que me refiero. Voy a traer este fondo aquí mismo, asegurarme de que esté posicionado aquí a la izquierda como está. Entonces voy a usar mi botón. Voy a posicionarlo aquí mismo y simplemente escribir mentira. No voy a usar filtros. Y luego voy a usar mi botón y simplemente moverlo a aquí. Déjame ocultar su barra de búsqueda para que veas cómo va a quedar el botón. Entonces somos realmente bastante pequeños y bastante diminutos, pero va a hacer su trabajo como debería. Entonces aplica y simplemente ajusta nuestro botón justo aquí. Entonces al cambiar entre los estados se puede ver lo que tenemos. Entonces, ahora ocultemos la búsqueda por ejemplo. Y lo hice solo para que podamos tener, por ejemplo, tres columnas para cada una de ellas. Por lo que voy a utilizar mis destinos. Y para este primer estado, voy a ampliar mi BG hasta aquí. Por lo que se alinea con éste. También voy a usar mi posición divisor aquí mismo y usar mi máscara y simplemente extenderla hasta aquí. Y básicamente lo único que vas a cambiar aquí mismo es esto. Entonces Hagamos lo mismo aquí mismo. Por lo que destinos y máscara, en realidad podemos seleccionarlos a ambos al mismo tiempo y posicionarlos aquí mismo. Entonces usemos destino y alinémoslo con nuestra línea de cuadrícula. Al igual que esta máscara se va a ir solo un poquito afuera. Y finalmente tenemos este divisor, que sólo va a ir aquí mismo. Y lo que puedes hacer es ampliar estas líneas de contenido si quieres, pero sólo voy a mantenerlas como son genotipo. Vamos a ajustarlo también. Entonces lo voy a mover aquí mismo para que se alinee correctamente. Yo también lo voy a hacer lo mismo por sus deberes. Entonces 123, así. A ver. Entonces vamos a ver por el tipo, vamos a cambiarlo en realidad y la calidad solo teclea así. Y entonces en realidad vamos a usar dos líneas de cuadrícula sólo para que tengamos un poco más de espacio para la búsqueda. Y vamos a ajustarlo. Entonces vamos a tener que se adhiera y también mover el divisor al mismo tiempo hasta aquí. Ajusta la máscara y solo un poquito hasta aquí. Y tal vez podamos ajustar y el cuántico abajo. Para que pueda usar mi divisor y moverme. Aquí están las líneas, creo, y va a estar bien. Pero se puede ver que aquí tenemos viaje individual que va justo aquí. Entonces voy a quitar esto. Voy a quitar esto. Por lo que va individual. A lo mejor puedo incluso quitar este crucero para usar el tipo. Podemos quitarlos para todos así. Y lo que voy a hacer es simplemente usar copia para todos ellos. Entonces vamos a ver. En realidad voy a usar solo copia para este y ajustarlos más tarde en nuestro estado clicado. Entonces lo voy a abrir con sede en Estados Unidos. Muévete aquí abajo. Entonces veamos aquí. Si puedo, dejó eso ahí dentro. Entonces vamos a borrar. Te vas a dar click aquí y ver que sigue siendo pasta ¿es hasta la cima? No sé por qué sigue haciendo eso. Entonces vamos en realidad, porque hay que tenerlos en el mismo lugar para que esta animación funcione realmente. Trabajemos rápidamente en esto y te voy a mostrar una manera de evitar. Entonces teclea como suciedad, voy a usar mi divisor BG, los movió hasta aquí. Voy a usar mi máscara, moverla a justo aquí. Y voy a copiar esto. Ve al estado predeterminado, ábrelo y pulsa Pegar. Entonces ahora está exactamente en el mismo lugar que en el segundo estado. Entonces ahora que los llamo y cuando un hit a mi vista previa, vas a ver cómo funciona eso. Entonces escribe, puedes hacer click y puedes ver que se queda exactamente en el mismo lugar. Ahora porque tenemos este espacio, lo que realmente podemos hacer es quizás empujar todo nuestro contenido aquí mismo si quieres. Eso nos va a dar mucho más espacio aquí mismo, porque con estas actividades, vamos a tener básicamente lo mismo. Entonces todo depende de ti si quieres rellenarlos, pero sólo voy a dejarlos como si estuvieran aquí. Creo que va a funcionar muy bien. Entonces para las actividades, lo voy a mover aquí mismo. Ahí mismo. Y vamos a ver por las actividades, también podemos tener. A ver. Bg y nuestro divisor pueden ir a aquí por ejemplo, creo que va a funcionar bien, y esto va a ir aquí. Entonces, veamos, no creo que tengamos que hacer demasiados cambios aquí. No creo que podamos necesitar hacer algún cambio en absoluto aquí, creo que está bien. Y finalmente, para la búsqueda, trabajemos en ello. Entonces lo que voy a hacer es alinear mi caja aquí mismo. Y luego voy a traer en mi estado por defecto. Voy a traer esto hasta aquí. Y simplemente voy a usar Search porque no necesito usar aireación. Voy a traer esto de vuelta a 100. Colóquelo aquí mismo. Asegúrate de que sean 20, así, bájalo a 0. Entonces voy a ir al estado cliqueado. Y veamos dentro del estado clicado, puedo traerlo aquí mismo. Por lo que CBG cerrar icono, simplemente puedo mover dos de ellos justo aquí, y simplemente puedo escribir. O aún mejor, podemos usar la búsqueda de viajes aquí y luego buscar en el estado predeterminado. Vamos a ver si funcionan. Creo que esto debería funcionar. Algo no está bien aquí mismo. No sé por qué está haciendo eso. Como puedes ver, sigue moviendo esto. Entonces veamos en el estado por defecto lo voy a mover aquí. Y voy a ajustar manualmente mi BGP a aquí. ¿ De acuerdo? Y ahora vamos al estado cliqueado. Y voy a ajustar esto, posicionarlo así. Y luego usa solo mi BGN de búsqueda, mi icono de ropa, y muévalas aquí mismo. Entonces ahora veamos si funciona. Sí lo hace. Por lo que no puedes simplemente mover el campo. Tienes que ajustar manualmente los elementos dentro. Por lo que el XD realmente conoce las distancias entre todos tus artículos en su interior. Por lo que ahora cuando hago clic justo aquí, se puede ver que dice buscar viajes. Si bien aquí sólo dice la búsqueda aplica todavía funciona. Y si hacemos click en las actividades, se ven bien. tipo se ve bien. Una vez más, si quieres, simplemente puedes extender esto hasta aquí. Si quieres. Destinos, han funcionado bien. Entonces realmente todo depende de ti. Ahora sigamos adelante y pasemos a la siguiente sección. Y les voy a mostrar lo que vamos a estar haciendo aquí mismo. En primer lugar, es simplemente alinearlo a nuestra cuadrícula. Asegúrate de que esté alineado. Lo que voy a hacer aquí mismo es, en primer lugar, alinear nuestro texto al centro así. Básicamente voy a crear dos estados diferentes para estas tarjetas. Entonces en este, vamos a usar básicamente pestañas. Por lo que la primera pestaña va a ser ofertas de primer minuto y la segunda pestaña va a ser ofertas de último minuto. Entonces lo que voy a hacer con este es asegurarme de que tenga seis columnas de ancho. Entonces 1, 2, 3, 4, 5, 6. Entonces se va a ir justo aquí. Y luego la voy a dejar porque va a ser el primer estado. Voy a dar click y utilizar el gris claro para indicar que éste está seleccionado. Entonces debido a que este video corre un poco más largo, ahora, es casi media hora a lo largo. Detengámoslo aquí mismo. Y luego en la siguiente, voy a volver y explicarte cómo puedes crear básicamente dos pestañas para estas secciones. Para que los usuarios puedan cambiar entre el primer y el último minuto, y luego puedes ahorrar algo de espacio en ellos. 42. Crear diseño responsivo: Ahora sigamos adelante y hagamos esto. Y para hacer eso, lo que voy a hacer es realmente desagruparlos. Entonces voy a desagrupar este primer minuto. Voy a desagrupar este último minuto. Y voy a utilizar las ofertas de último minuto en ofertas primer minuto y un grupo ellas como esta. Voy a llamarlos pestañas por ejemplo, porque eso es lo que son. Y luego estas cartas, vamos a ajustar una por una. Entonces, antes que nada, vamos a ocuparnos de estos aquí mismo. Entonces, primero es que los alinemos aquí mismo a la izquierda, que no estén distrayendo. Al igual que así. Y por último, para los botones, lo que vamos a hacer es ocuparnos primero de eso. Entonces veamos dos, podemos usar cuatro columnas. Por lo que son lo mismo que todos estos otros botones así. Y usemos para en este también. Entonces veamos 2, 4 aquí mismo. Así. Y lo que voy a hacer es alinear los dos botones aquí mismo. Por lo que cuando se muestren las ofertas de primer minuto, este botón va a mostrar el mío. Pero cuando se haga clic en los últimos minutos, esto se va a mostrar, por lo que básicamente dos botones en la misma ubicación exactamente. Entonces veamos, los voy a alinear así. Y llamémosles botones así. Y vamos a ver. Simplemente voy a esconder estos tres por ahora porque no los necesitamos por ahora. Primero lo primero, vamos a trabajar en nuestra canción de fondo, vamos a abrirlos todos y fuimos a traerla aquí mismo. Y luego voy a traer este de aquí. Y también voy a usar este último y traerlo aquí mismo. Entonces lo que voy a hacer es en realidad aumentar el tamaño de nuestra imagen. Y quizá pueda usar cinco columnas para el ancho de la imagen. Y movamos todo este contenido aquí mismo, por ejemplo. Entonces veamos 1, 2, 3, 4, 5. Eso está bien. Y creo que la posición de la imagen es bastante buena como está aquí mismo. Entonces ahora volvamos a traer el contenido. Voy a moverlo aquí mismo. Primero lo primero, vamos a ocuparnos de éste. Entonces voy a usar esta pila. Y veamos a Aiken aumentar el espaciado a, no sé, algo bastante enorme. Veamos En realidad, podemos aumentarlo manualmente y luego ver dónde encaja. Por ejemplo, posicionemos este icono de bus para golpear esta línea de cuadrícula. Entonces algo como esto. Creo que eso funciona bien. Entonces vayamos a nuestros analistas divisores expandidos a esta línea de cuadrícula así, y usemos también la otra. Pero tráelo de vuelta para que sean 20, así. Y luego voy a seleccionar a estos dos posicionados aquí mismo. Y luego voy a usar Shift y flecha inferior. Entonces 1, 2. Y voy a traer esto. Para escuchar. Por lo que alinean turno 12 para que pueda traerlos de vuelta. Y entonces puedo llevar mi imagen al borde inferior de nuestra tarjeta, que es justo aquí y allá la tenemos. Ahora tenemos opción completamente diferente, diseño completamente diferente para la misma tarjeta. Entonces lo que voy a hacer es exactamente lo mismo. Entonces voy a seleccionarlos a todos, golpear Control C, ir al estado de horror, QED control V, y luego saltar dentro y matarlos a todos así. Entonces lo que voy a hacer es hacer doble clic en mi imagen, aumentar mi imagen. Voy a abrir así mi máscara. Y voy a dar click en mis antecedentes. Haga clic aquí, haga clic en el ocho, así. Y rebaño lechero. Ahora básicamente comienza el mismo proceso. Tienes que copiar y pegar todos estos elementos. Pero antes de que lo hagamos, veamos, tenemos 40 entre estos dos. Entonces vamos a traerlos aquí mismo. Y primero lo primero, ajustemos la altura para que la altura sea 387. Entonces para esto, voy a dar click dentro. La altura va a ser de tres, 87 por ciento lo son. Y voy a saltar aquí mismo. Altura va a retroceder 8, 7, así. Y luego simplemente ajusta mi imagen a la nueva altura. 87. Yo voy a hacer lo mismo aquí mismo. Entonces 387, correcto, eso, y ahí lo tenemos. Entonces ahora voy a pausar el video aquí una vez más y trabajar en estos. Entonces como dije que en te molestan demasiado con todos estos detalles y ustedes no se aburren viéndome ajustándolos a todos así. Y voy a volver una vez haya terminado DC-3 y también estos tres aquí que he escondido. Y luego voy a mostrar cómo podemos crear animación entre todos ellos. Y ahora que los he completado, déjame mostrarles cómo crearlos. Pero antes de eso, déjame mostrarte rápidamente. Por lo que aquí tenemos flotar por defecto. Y cuando escondo estos tres, se puede ver que tenemos París. Entonces aquí por defecto y flotar, y tenemos estos botones y la distancia es de 80, mientras que entre todos estos autos la distancia es de 40. Entonces déjame llevar estos 3 primero, y luego voy a seleccionar estos tres inferiores que están detrás de estos tres, pulsa 0 en mi teclado a dos veces para que pueda bajar, básicamente estás a 0. También, puedo ir a mis botones y para las ofertas de último minuto, que queda detrás de esta oferta de primer minuto, voy a bajar la opacidad a 0 también. Voy a mantener esto para que sea gris, mantener esto para que sea azul. Y lo que voy a hacer es calidad, por ejemplo, ofertas especiales. Y veamos ofertas especiales. Veamos dispositivos grandes golpean Control K para crear un componente de toda esta sección. Pero es justo antes de que lo hagamos. Veamos gada y volvamos al estado por defecto. Entonces eso es lo que es nuestro estado por defecto para todo este componente. Entonces voy a crear un nuevo estado y llamar a la muerte nuevo estado. Ofertas de último minuto. Eso y luego para las ofertas de último minuto, obviamente vamos a crear las diferentes cosas. Entonces esto va a ser este gris claro. Esto va a ser un azul principal. Vamos a esconder estos tres primeros. Por lo que el doble clic son 0, Qi. Y también vamos a ocultar este botón, mostrar estos botones o para el último minuto. Y vamos a mostrar estos tres. Una vez más. Por último, vamos a ir al estado por defecto, utilice nuestra función de prototipado. Haga clic en nuestras ofertas de última hora. Haga clic en él. Toca auto, animar, fácil ahora 0.6 por ejemplo. Y podemos ir a ofertas de último minuto estado. Entonces podemos cambiar los Estados aquí mismo, hacer doble clic aquí mismo, elegir las ofertas de primer minuto, click en él e ir al estado predeterminado 0.6, easy and out y auto animate. Vayamos al estado por defecto y golpeemos la vista previa, solo para que podamos ver cómo se ve. Entonces déjame volver a aquí. Por lo que se puede ver que estos todavía funcionan y el zoom en las características aún funcionan. Esto todavía funciona muy bien. Por lo que cuando hago click en Nuestras ofertas de último minuto, puedes ver que nos lleva escuchar el primer minuto o dos aquí. Una vez más, todos los primeros minutos. Haga clic aquí y todas las ofertas de última hora. Por lo que ahí lo tenemos. Esa es la sección n Ahora pasemos a esta sección de video. Porque todavía estamos en una pila para todo este contenido. Se puede ver cuando una alta tasas 150, 150. Para el video en sí, puedo bajarlo hasta aquí. Y lo que también puedo hacer es traer mi video porque no necesito que sea tan grande en este pequeño tamaño. Entonces, por ejemplo, algo así. Pero como ves, Stack es esa inteligencia para que mantenga el espaciado entre ellos. En primer lugar, permítanme alinear esta sección entera a aquí así. Y lo voy a hacer es traer mi botón aquí y asegurarme que tenga cuatro columnas de ancho, flotar justo ahí. Y cuando yo era un viento que hacer es dar click en mis flechas y llevarlas justo al borde, ahí mismo. Entonces voy a usar mis ciudades y alinearlas a la cuadrícula así. Y es solo traer esto todo el camino. Entonces Ciudades, los voy a alinear a la línea de cuadrícula así. Y entonces puedo traer esto y cerrarlo aquí mismo. Y también de este lado derecho, voy a hacer lo mismo por aquí. Entonces básicamente lo que podemos hacer aquí mismo es exactamente lo mismo. Sólo vamos a ajustar estas tarjetas. Y veamos, tenemos seis de ellos, lo cual está bien. Y hagamos lo mismo. Entonces voy a usar estos tres, traerlos todos aquí, y luego esconderlos para que puedan trabajar en estos tres y luego simplemente hacer esos mismos ajustes a estos. Entonces lo que vamos a hacer aquí mismo es básicamente bastante sencillo. Lo que tenemos son estos y tenemos que ajustarlos individualmente como lo hicimos para todos ellos por estos divisores. Ahora lo que puedo hacer por esto es que puedo deshacerme de estos divisores y luego el contenido se va a escalar mucho más. Italia. Entonces déjame solo mostrarte esa opción. Por lo que ahora cuando hago clic en Mi París, se puede ver que el contenido se está escalando mucho mejor. Pero aún tenemos este problema el cual podemos arreglar simplemente alineando esto y luego haciendo clic aquí y luego bajando nuestra distancia entre estos si queremos. Entonces, ¿cómo podemos hacer eso? Lo que voy a hacer aquí en realidad es, Volvamos al diseño anterior con nuestros divisores. Lo que voy a hacer aquí en realidad es deshacerme de esto matando su ícono, que nos va a dar mucho más espacio. Y nos va a permitir mucho libre, más libre o maquetación a nuestras secciones. Entonces llevemos la flecha y tarjeta de destino e imagen 24 columnas. Una vez más así. Entonces voy a saltar dentro de mi medio y luego simplemente traer este contenido en algún lugar por aquí. Por último, voy a usar uno de mis separadores y mantener mi tecla de turno hasta aquí. Y 262 es de la talla. Entonces 262, a veces va a funcionar, veces no es abogacía o tener un montón de estos temas que normalmente no tienen. Realmente no sabía lo que pasó. ¿ Lanzaron alguna actualización de que no va a funcionar o Zinedine que no conozco. Pero no importa para esto. Lo que puedes hacer es bajarlo como se explicó en uno de los videos anteriores. Para que puedas poner todo esto en una pila una vez más. Así que golpea Control G y luego ponlo en una pila. Entonces haz click aquí y simplemente ajusta la imagen para que puedas subir esta manera cuántica si quieres. Puedes hacer eso si quieres. Pero no lo sé. Veamos algo como esto. Por lo que la altura puede estar en algún lugar alrededor de 200 materia ni quizá sea bueno. Sí, hagámoslo dispuesto. Entonces que la altura b a un 100, y pongamos todo esto en una pila. Entonces lo que voy a hacer en realidad es guardar justo aquí y luego volver cuando los termine todos. Pero en realidad antes de hacerlo, déjame saltar dentro de mi horror y mostrarte cómo podría parecer eso. Entonces básicamente, con el flotador, todo lo que hemos hecho hasta ahora va a ser exactamente igual, pero con el flotador, esta imagen también va a flotar, también va a acercar sólo un poquito. Por lo que hay que ajustarlo como antes tanto para el estado por defecto como para la fecha de espera de las muertes. Entonces eso es lo que vamos a hacer ahora. Entonces vamos rápido. En nuestro estado por defecto, podría criterios Control C, ir a nuestro estado de horror, clic aquí, y luego Control V. Seleccione todo nuestro otro contenido, y luego solo déjame revisar justo aquí. Entonces creo, sí, son ocho. Entonces viendo como todos estos otros aquí para eliminarlo, y voy a asegurarme de que haga doble clic, acercar aquí realmente rápidamente. Entonces abre, mi máscara, se expandió hasta aquí. Haga clic aquí. Bajar esto a ocho una vez más y rebaño lechero. Entonces ahora si cambio entre nuestras ciudades, puedes ver cómo se ve eso. Ahora, obviamente todo este proceso es increíblemente tedioso, como probablemente puedas decir. Pero entre más de estas animaciones pongas, obviamente, cuanto más complicado va a ser, más tedioso va a ser. Así que solo ten en cuenta todas esas cosas cuando estés diseñando desde el principio. Porque cuando llegues a este punto y cuando comienzas a aumentar y aumentar todas estas cosas va a ser obviamente mucho más complicado manejar todas estas cosas. Entonces primero lo primero, bajemos esto a 200. Perdón, no incluí la pila, así que primero que nada, incluye la pila y luego trae esto a 200, así, y salta dentro de aquí. Estos eliminaron el icono del calendario. Trae a estos dos aquí. Y luego vamos a ver, podemos mover esta c Londres y tarjeta de destino. Puedo hacerlas cuatro columnas de ancho. También puedo saltar a aquí y mover esto a aquí. Al igual que así. Y luego veamos por esto, o realmente odio estos separadores, pero ¿qué puedes hacer? Por lo que para el medio, puedo hacer doble clic en el interior y posicionarme o justo aquí. Veamos qué teníamos aquí mismo. Entonces tenemos 33 un día, para que podamos tener la misma configuración aquí mismo. Puedo saltar 33, presionar Enter, y luego usar este divisor, traerlo todo el camino hasta aquí. Entonces como dije, realmente depende de tu diseño, qué estás haciendo con él, cómo lo estás ajustando. Pero básicamente, así es como se ve aquí mismo. Entonces Control C en nuestro estado Horace de Londres, control V. Terminemos estos tres y luego voy a volver y mostrarles cómo se ven todos. Y también te voy a mostrar cómo se ve la animación en sí una vez hecha. Entonces flecha, lo voy a ampliar hasta aquí y bajar esto a ocho. Ahora vamos a comprobar rápidamente entre el estado por defecto y el estado de Horace y París. Por defecto, se ve bien. Entonces ahora trabajemos en nuestra Roma. Una vez más agrupe a todos, asegúrese de que estén en una pila como esa. Haga doble clic aquí y asegúrese de que está en 200, así. Y luego darán clic aquí mismo. Voy a deshacerme de los días así. Voy a decir que son 33, así. Voy a alinearlo a la izquierda. Usa el divisor. Y definitivamente, creo que las capas de forma son opción mucho mejor en lugar de estas líneas para los divisores. Porque los terroristas en forma siempre van a seguir lo que estás haciendo y siempre puedes ajustarlos, someterse. Por lo que realmente no hay necesidad de este Pfaff todo alrededor de tus divisores. Por lo que realmente no me gustan estos alinea n en el futuro o definitivamente usar capas Shape. Porque como dije, Shape capas, como se puede ver por cierto, con esto, con esta imagen, simplemente se mueve maravillosamente. Simplemente funciona como solo funciona como debería. Entonces realmente creo que las capas de forma son opción mucho mejor en el futuro para todos estos divisores y líneas. Control C, U y descontento flotan y luego Control V, salta dentro de aquí, quítalo todo, y luego trae esto de vuelta a ocho. Entonces, y vamos a incluir nuestra flecha de regreso a aquí. Y por último, hagamos doble clic para acercar aquí a esta imagen. Y ahí lo tenemos. Entonces estado por defecto, estado de horror. Entonces, finalmente, lo que quiero hacer con esto es obviamente traerlos de vuelta. Entonces los voy a posicionar para que sean 80, como tenemos un entre el texto y él. Y por último, para el texto en sí, Vamos a moverlo al centro justo aquí. Veamos estas ciudades donde están cerradas. Eso me gusta. Y eso es básicamente todo. Voy a seguir adelante y trabajar en estos tres sorprendió Amsterdam, Venecia. Y también voy a trabajar en todas estas otras. Entonces permítanme en primer lugar alinearlos así. Entonces, llevémoslos a nuestra luz de rejilla ahí. Este. Trae nuestros mejores destinos, trae esto al centro una vez más, o incluso para escuchar tan bien ajustado después. Trae a estos dos aquí, nuestros socios. Entonces una vez más, obviamente con estos tus artículos, es mucho más sencillo de hacer. Por lo que simplemente se puede ajustar a aquí. Y puedes ajustar el pergamino. Y grupo 2 aquí, asegúrate de que el texto esté centrado. Y lo mismo para estos de aquí. Entonces atrévete y pon esto aquí. Y esto simplemente debería ir directo a aquí, por ejemplo. Por lo que los usuarios pueden desplazarse fácilmente y las muertes. No creo que vayamos a hacer demasiado trabajo con él. Simplemente ajusta este texto a aquí. Y veamos, animas a ser, simplemente mueve esta última línea hasta aquí. ver de Hamlet, este botón puede estar en el centro. Entonces, simplemente seleccionémoslo todo. Asegúrate de que estamos en un centro. Nosotros somos. A ver, la distancia es de 40, así que esto va a ser 40 también y solo asegúrate de usar cuatro columnas o ese botón. Por lo que se puede ver claramente la estructura. Todo va a estar en el centro y esto va a ser en el centro. Así que en realidad puedo seleccionar estos dos y hacer clic aquí y asegurarme de que están en una línea central que. Y por último, haga clic en esto, asegúrese de que se alinea aquí y haga clic aquí. Siguiente está en el centro. Y luego una vez más, lo mismo con esto simplemente ajustado a aquí. Y me voy a asegurar así que si lo pongo justo aquí, Vamos a ver, porque como recuerdas, tienes que hacer a fondo de izquierda a derecha. Por lo que 1234, y en el estado Horace, 1234, así. Y luego simplemente vuelve atrás y expande esto hasta que el botón golpea el borde justo ahí y ahí lo tenemos. Se completa la sección de deuda. Entonces vamos a llamarlo un día para este video porque quería mostrar, ya sabes, en realidad quiero mostrarte esto y entonces lo llamaré un día. Entonces antes que nada, esta sección, la voy a mover aquí y voy a hacer. Así que reserva tu viaje de ensueño. Estamos en el contenido, que está en una pila. Entonces, ¿qué podemos hacer realmente con él? Yo puedo, por ejemplo, posicionarlo para estar arriba. Entonces digamos que quiero poner esta imagen en la parte superior. ¿ Cómo puedo hacer eso? En primer lugar, cámbiala a esta pila vertical, luego salta al interior del contenido y simplemente mueve tu cuántica así. Se va a mantener la misma consistencia va a mantener el mismo efecto, lo mismo básicamente. Por lo que solo expande tu imagen así. Asegúrate de volver a poner tu máscara en su lugar. Y luego para este viaje de ensueño, lo que podemos hacer es básicamente alinearlo a la izquierda, así, por ejemplo. Y asegúrate de hacer lo mismo por aquí, pero alinéelo a esta línea de rejilla. Ahora para el texto, Vamos adentro y hagamos que esté alineado en el centro. Ya que alineamos esto a aquí, simplemente puedo pasar a flotar aquí mismo. Por lo que ahí lo tienes. Y entonces simplemente puedo usar mi contenido y asegurarme de que esté centrado. Y entonces simplemente puedo seleccionar estos para asegurarme de que estén centrados así. Ahora, tenemos todo este espacio vacío en la sección intermedia. Entonces en realidad lo voy a bajar a 100, por ejemplo, simplemente flotando esta sección y luego puedes ajustarla. Y ahora entre estos dos, 150, lo cual está bien. Antes de que te deje, voy a hacer lo mismo para esta sección aquí mismo. Por lo que simplemente salta al interior del contenido. Asegúrate de usar este relleno vertical. Voy a saltar y ampliar mi imagen hasta aquí. Y luego todo el camino hasta aquí. Asegúrate de que esto vaya a la izquierda. Asegúrate de que esto vaya a esta oleada. Por último, asegúrate de que el texto esté alineado al centro así. Y asegúrate de, en primer lugar, alinearlo a la izquierda y la línea de cuadrícula así para que podamos ajustar nuestro botón, sea de cuatro columnas de ancho. Entonces es lo mismo que hicimos anteriormente ahí mismo. Y finalmente, selecciónela, asegúrate de que todo esté en el centro más adelante para seleccionar ambos a ellos. Asegúrate de que estén en un centro haz click justo aquí y luego ajusta esto a 100, así. Pero también puedes hacer es obviamente dar click justo aquí y luego usar 100, pulsa Enter, y ahí lo tenemos. Obviamente esto se queda como 150. Entonces, no importa cuántas de estas pilas tengas, simplemente se van a ajustar bellamente hacia abajo. Y ahora porque tenemos nuestro contenido así, obviamente tenemos que ampliar nuestro aeropuerto hasta abajo para que pueda acomodar nuestro pie de página. Entonces como dije, ahora me voy a ir a trabajar en estos tres y luego terminar en secciones usando exactamente la misma configuración para todos ellos abajo. Entonces Europa, Asia, Américas, y lo que quiero decir, África. Y luego vuelve en el siguiente video y te explico ¿cómo podemos redondear todo eso? Vamos a trabajar en estos primero, en estos testimonios, después en estas tres cartas, que van a ser bastante simples. Por último, vamos a rehacer el pie de página y luego rematar este tamaño. Ah, una cosa más para nuestros mejores destinos. Déjenme mostrarles realmente cómo podemos trabajar en ello. Entonces lo primero es lo primero, para este primer estado, simplemente lo voy a mover los mejores destinos y luego traer mis flechas de vuelta así. Porque éste debería ser bastante sencillo porque como recuerdas, no hicimos demasiado con ellos. Entonces déjame cerrar estos dos aquí. Entonces lo que voy a hacer es hacer lo mismo por todos ellos. Entonces vamos a ver, vamos a estar en cuatro columnas así. Por alguna razón. A ver. Lo mismo con el contenido no está justo aquí mientras que el texto no está bien. Entonces vamos a dar click en él y ver auto altura. Maldivas. No sé por qué no están en el centro. Debería haber así, pero como que rompe el no sé qué pasó. Los sólidos los cambiaron así. Por lo que cuatro columnas de ancho. Y luego cuándo saltar aquí mismo y simplemente extender mi imagen hasta aquí. Y esto debería estar en el centro así. Entonces no sé por qué sucedió eso, pero como pueden ver, puede ajustar con bastante facilidad. Lo que podemos hacer aquí es ajustar también la altura de nuestra imagen si queremos. Pero no me voy a molestar con demasiado. Lo que voy a hacer por último es seleccionar nuestro contenido así. Ve a nuestra cita Horace, ahí mismo. Saltado decide hit Control V. Voy a quitarlo de aquí. Y lo que voy a hacer es acercar un poco y luego llevar esto a ocho. Así. Volver al estado predeterminado. Y no sé por qué viste que estoy copiando contenido aquí mismo. Entonces voy a rondar. Y ahora se enfrenta al contenido. Entonces realmente no conozco a veces este XD con todos estos temas. Pero en términos generales, es sólo porque estoy usando todo este otro software porque tengo que grabar mis y's, tengo que grabar este video. Tengo que correr algún tipo de que no lo sé, todas estas diferentes herramientas en segundo plano, así que probablemente todo depende de eso. Por lo que quiero mostrarte rápidamente porque puedes ver que este texto se está ejecutando realmente salvaje. Entonces vamos a arreglarlo primero, traerlo aquí mismo, por ejemplo, porque vamos a estar dentro de estas cuatro columnas que deberíamos, esto está en el centro. Entonces voy a llevar esto y esto al centro. Entonces realmente voy a quitar mi texto. Veamos dos aquí, así que y asegurémonos de que esto esté en el centro. ¿ Qué importa siquiera? Simplemente puedes seleccionarlos todos y clic aquí y asegurarte de que estén en un centro como ese. Por último, haga clic en contenido. Saltar dentro de un estado de terror basado. Elimina el viejo. ¿Cuáles son los nuevos? Haga doble clic, amplíe la máscara, y finalmente haga clic aquí y luego llévala a ocho. Y el rebaño lechero va al estado por defecto y nosotros iremos con éste. Primero tratemos con estos tubos. Entonces pues voy a asegurarme de que esto esté en el centro de una tierra. No sé por qué. Algo realmente extraño está sucediendo con Adobe XD hoy. No sé por qué, pero es simplemente negarse a rendirse. Entonces alineemos nuestro texto así y hagámoslo también con el precio, ver si lo hace, lo hace, lo cual es genial. Por último, pruébalo así. Algo realmente extraño está pasando. Por lo que demuestra que mi actual BG es dos aquí. Por alguna razón. Si bien amplié y echa un vistazo a esto, cuando hago clic y selecciono todos mis elementos, haga clic aquí. Reduce el tamaño. Entonces realmente no tengo ni idea de por qué hace eso. Pero no importa. Vamos a encendernos a través de él. Entonces lo voy a alinear aquí. Y vamos a ver, todos ellos están del mismo tamaño, lo cual es genial. Y lo que voy a hacer es en realidad pausar el video aquí. Entonces no te aburro con todos estos detalles porque me aburro con las vacaciones este acoplamiento, porque estoy haciendo todo lo mismo una y otra vez. Entonces voy a, como dije, pausar el video aquí para poder terminar esta sección y luego volver a mostrarte la animación y todo. Y luego voy a pausar el video. Y el video, lo siento, para que pueda arreglar todas estas otras áreas y luego podamos volver. Entonces como dije, voy a pausar el video para poder arreglar estos tres y luego volver con ustedes. Y ahora que lo he hecho, déjame traerte de vuelta a la velocidad. Entonces voy a seleccionar estos tres. Los turnos de retención son los mismos que antes. Voy a sacarlos del camino. Asegúrate de que sean 30. A continuación, haga clic aquí y asegúrese de que esto esté recortado hasta el borde. asegura de que esté recortado justo aquí. Lo es, lo cual es genial. Y por último, lo que voy a hacer es obviamente usar todos mis destinos. Entonces voy a hacer clic en el control C, luego ir a mi estado clicado. Y lo que voy a hacer aquí mismo es golpear Control V, así que puedo pegarlos aquí mismo. Tú borras, y luego los voy a mover de vuelta a aquí. También voy a hacer el cambio al texto que he hecho anteriormente. Entonces nuestros destinos principales, y yo también voy a mover mis flechas justo en su lugar, acabo de verlo. Puedo tratar de mantener mi animación en marcha para no tener que rehacerlo una vez más. Creo que esto está bien. Y vayamos al estado predeterminado y veamos si la animación funciona correctamente. De verdad espero que lo haga. Entonces como puedes ver, realmente hemos hecho mucho en este video. Y me gusta cómo funcionan estas con estas imágenes más pequeñas porque ahora el contenido puede caber mucho mejor aquí. Pero tengo que cambiar esto al botón predeterminado. Vamos a lidiar con eso más adelante. Esta sección es, puedes ver que es realmente fácil de leer ahora. Y aquí estamos. Entonces, finalmente, vamos a comprobar rápidamente. Funciona. Todo funciona y podemos dar click ahí mismo. Y lo único que he hecho aquí mismo es por el Monson Michelle, cambié el texto, pero aún no está centrado. Entonces tendremos que arreglar eso. Pero vamos a revisar la animación, a ver si funciona. , lo cual es genial. Entonces cambiaré al Monson Michelle. Genial aquí y destinos. A ver. Puedo moverlo aquí mismo. Algo no está bien con este texto. Como pueden ver, esta es mi ventaja. Entonces en realidad es el fondo, una vez más, jugando trucos. Por alguna razón como pueden ver, no puedo alinearlo aquí. Entonces esos son todos los bugs de Adobe XD y estas técnicas realmente más avanzadas, como puedes ver, es un huido aquí, realmente demasiado. Entonces intentemos hacerlo así. Entonces ancho es 290 y aquí es 290 uno. Entonces vamos con 90 IDAT, y ahora el texto se ve como debería. Entonces lo que voy a hacer es traer todo esto de vuelta así, y luego hacer la copia y pegar una vez más. Por lo que desde el valor predeterminado hasta el clicado, quita estos y trae estos de nuevo dentro. Colóquelos justo en la parte inferior para que se vean exactamente iguales. Y por último, trasladar estos destinos a aquí. Entonces hábitos lácteos, muertes. Ese es nuestro diseño por ahora, eso es todo para este video. Una vez más, estamos corriendo bastante más de media hora, pero como pueden ver, hay mucho contenido por mostrar. Y también una última cosa que quiero compartir con ustedes para este video son estas imágenes. Si crees que son demasiado grandes, simplemente puedes saltar aquí mismo y ajustar la altura de tus imágenes. Entonces estamos a una altura de cinco, veamos 520. Entonces podemos redondear las cosas, hacer doble clic aquí, reubicarlo, y luego hacer lo mismo para el de abajo. Entonces vamos a posicionarlo para estar en 520, así. Y debido a que estamos en una pila, como se puede ver, el contenido sigue bellamente. Entonces eso es todo para este video. Seguiré adelante ahora y cambiaré todas estas y volveré en el siguiente video para que podamos terminar esta página y luego pasar a estas otras páginas. 43. Crear diseño responsivo: Sigamos ahora y terminemos esta página. Y antes de que lo hagamos, solo quiero compartir nuestro rápido detalle con ustedes. Entonces digamos que seguí adelante y terminé todas estas, así que solo seguiré adelante y copiaré esta. Y solo quería mostrarles qué funciona mejor para estas líneas y estas guías. Entonces digamos que queremos reducir aún más su tamaño a tres columnas, por ejemplo. Entonces sobre estos separadores, como dijo en el video anterior, creo que es mejor si usas estos. Por lo que simplemente usa el rectángulo. Y luego una vez que empieces a reducir el tamaño del rectángulo así, simplemente va a seguir el diseño. Entonces solo puedes imaginar que vamos a crearlo de todos modos. Entonces voy a usar el color para el relleno así. Voy a quitar la frontera. Voy a reducir la altura a dos por ejemplo. Y te puedes imaginar, e incluso podemos llamar a esto el más amplio así. Y digamos que queríamos ajustar nuestro diseño para tener tres columnas de ancho. Por lo que simplemente puedo seleccionar mi divisor. Puedo seleccionar mi imagen, y puedo seleccionar mi precio aquí mismo. Entonces mi flecha y mi tarjeta BG, cuando reduzca el tamaño, se puede ver que todo sigue. Pero tenemos un problema aquí abajo con estos divisores porque son elides, lo mejor que hay que hacer es ajustar primero el ancho de los mismos. Entonces lo que quiero decir con eso es buscar, deshazte de éste sólo para mostrarte a lo que me refiero, un poco mejor. Digamos que quieres reducirlos. Y digamos que queremos que toquen línea en desacuerdo justo aquí como ejemplo. Para que puedas hacer click en él, mantener tu turno y decir que son de dos a siete. Entonces ajustaré este uno a dos a siete por ejemplo. Y entonces digamos que quiero reducir esto aún más a algo como Digamos que solo queremos escribir en 3D. Por lo que tres días. Y ahora queremos ampliar esto hasta aquí. Entonces esta es la mejor manera, porque estos divisores son líneas y son realmente difíciles manejar básicamente como una opción de redimensionamiento receptiva. Entonces por eso digo que asegúrate de lidiar con ellos primero antes de pasar a todo este otro contenido. Porque ahora cuando lo escalamos, cuando selecciono mi imagen, cuando selecciono mi icono aquí mismo para el efecto hover y manejo seleccionar mi BG, por ejemplo. Yo los puedo mover y se puede ver que el contenido se está escalando bellamente mientras todo esto se queda puesto. Entonces por eso digo simplemente se asegura de que hagas el cambio para este divisor antes de aplicar todos estos otros cambios n una vez más, es mi punta superior. No uses estas líneas como separadores. Asegúrate de usar siempre la herramienta de rectángulo porque va a seguir mucho mejor cuando estés trabajando con este redimensionamiento sensible. Y una cosa más a destacar en esta visión de clase de trabajar con estas pilas y con estos grupos. Todas estas son opciones avanzadas que se introdujeron a Adobe XD relativamente recientemente. Entonces, por tanto, todos estamos aprendiendo ya que esta herramienta está creciendo, ya que esta herramienta se está actualizando, porque esta es una función totalmente nueva introducida hace apenas un par de meses. Y algunas de estas características ni siquiera están pensadas para este redimensionamiento sensible. Simplemente están destinados a diseñar, pero todos nosotros como diseñadores estamos explorando todas estas opciones todo el tiempo. Entonces, por tanto, si te atascas, si intentas hacer algo no funciona, pruébalo al revés. Prueba algo diferente, trató de adaptarlo a tu flujo de trabajo, y por lo tanto vas a tener opciones mucho mejores. Entonces como dije, las hice todas. Y, y déjenme mostrar rápidamente, por ejemplo, en esta tarjeta, lo que he hecho obviamente está incluido todo dentro de la tarjeta de contenido. Entré y reduje la altura de esta imagen a 200. Después entré a mi carpeta del medio. Reduje el divisor a 66. Yo hice eso por todos ellos. Y luego reduzco el destino entre estos dos, 230, así que entre días y los iconos. Y como dije, si quieres ir aún más lejos, puedes hacer lo que hice justo ahora. Entonces por ejemplo, en lugar de 12 días, simplemente puedes escribir 12 d. Y la gente va a entender, porque eso es básicamente una abreviatura obvia de papá y la mayoría de la gente está usando eso, sobre todo en el móvil aplicaciones. Y por supuesto, en el estado de horror, lo que hice simplemente se incluye ese fondo sombra de ocho. Así que entré dentro de destino BG, hice clic aquí mismo 8% luego simplemente extendí esto a AD2, por lo que 82 de ancho para que puedas ver esta flecha un poco más claramente. Y por último, haga doble clic aquí y simplemente extendió estas imágenes y eso es básicamente todo. Simplemente los alineé a todos. 30 es el destino entre cada de las tarjetas y un simplemente copiado y pegado este efecto. Y básicamente para la segunda animación aquí mismo, todo lo que hice es simplemente usar este para el punto de tabulación izquierdo, tap auto animate, default state. Entonces eso se remonta y simplemente movió todas mis ciudades y movió todas mis tarjetas. Por lo que se puede ver la última de aquí es Carta Hannah. Pero cuando hago clic aquí, es Miami. Entonces simplemente los había movido a izquierda y derecha, básicamente, exactamente lo mismo que hacía antes. Entonces por eso dije que no quería desperdiciar demasiado de tu tiempo. Quiero moverme con esta clase lo más rápido posible sin perder ningún ritmo con ella. Entonces lo que vamos a hacer con los testimonios, primer lugar, alineó el texto aquí mismo. Y también voy a alinear esto, que es grupo de desplazamiento. Casi olvido el nombre, así que simplemente lo voy a alinear con las líneas de cuadrícula. A ver si eso es correcto. Creo que lo es. Sí. Entonces como dije, alinearlo con nuestras líneas de cuadrícula. Y por tanto, lo único que queda es mover estos testimonios al interior. Voy a seleccionar mi testimonio y traerlo hasta aquí, así que al borde. Y aquí mismo lo que voy a hacer es simplemente cambiar el tamaño. Pero antes de que haga eso, nos ocuparemos rápidamente de las flechas. Entonces simplemente voy a mover las flechas así. Y puedo hacer eso por todos ellos antes de que progresemos. Tan testimonial de que simplemente puedo hacer doble clic, cambiar mis flechas, moverlas a escuchar. Yo puedo ir al testimonial tres, y me gusta hacer estas cosas porque si son repetitivas, es mejor hacerlas una por una. Entonces si estás haciendo flechas, por ejemplo, como lo estoy haciendo ahora mismo, lo mejor es lidiar con ellas de inmediato. dos luego regresan después de unos intentos y luego olvidaron lo que hiciste entonces algo así. Entonces como puedes ver, los números se están quedando igual. Por lo que nuestra animación no va a cambiar. flechas se están quedando igual y ahora vamos a tratar con nuestro carrito. Entonces voy a abrir estas tarjetas, tarjeta testimonial número uno. Y lo único que voy a hacer aquí mismo es, primer lugar, vamos a reducir el tamaño de la tarjeta. Vamos a traerlo aquí mismo. Entonces voy a dar click en mi texto convertido a auto altura. Y básicamente lo voy a cambiar a aquí y luego adapté algo como esto. No fue a aquí. Y yo lo voy a actualizar. Apenas mis próximas vacaciones deberían caber. A ver, sin mi así para las próximas vacaciones. Y vamos a ver 40 aquí mismo. 40 aquí mismo. Simplemente voy a copiar este texto porque si recuerdas, usamos exactamente la misma cita en todos ellos. Entonces voy a dar clic aquí en este convertido hace doble clic Control V. Pero aún así debería hacerlo porque es el ancho lo que va a cambiar. Entonces veamos, el ancho es de cinco o cuatro. Entonces si puedo cambiarlo aquí mismo, así que 500 para, veamos si funciona. Sí lo hace. Entonces veamos 1234 líneas. 1234 líneas, lo cual es genial, y el destino está justo aquí. Por lo que 5, 4. Voy a saltar aquí mismo, convertido, luego ir archivo para, luego dar clic aquí, controlar V, así. Porque entonces se va a pegar en esos textos convertidos o cinco o cuatro. Ahora Haz clic en Control V y asegúrate de hacerlos así. Voy a saltar a la primera carta. A ver, que es éste y el destino. Entonces es, el ancho es de 930. Para que pueda seguir adelante y cambiar todos esos. Y como estamos usando unas pilas aquí mismo, se van a adaptar. Entonces vamos con 930 yo eso, y se puede ver que se adapta bellamente. Para que podamos ir con etiquetas cerradas, ir con esta. Por lo que la imagen 930 no va a cambiar, se va a quedar igual. Sólo estamos cambiando el ancho de estas tarjetas. Entonces veamos así 930. Y ahí lo tenemos. También la distancia se está quedando igual. Pero dos, lo vas a cambiar. Se puede ver que va todo el camino hasta aquí. Voy a recortarlo de nuevo a mi tablero de arte así. Y una vez más, chamarra es que funciona, es bueno. Entonces lo que voy a hacer es, creo que estás adivinando en este punto, simplemente copiar este texto o ni siquiera tengo que hacerlo. Simplemente lo puedo posicionar en el centro, pero voy a copiar testimonios y los textos o no me voy a molestar demasiado con ellos, ve a este estado. Haga clic aquí. Por lo que quitó título de sección y testimonios. Y a partir de ésta, simplemente voy a seleccionar todas mis tarjetas, por ejemplo, y luego mover esto para alinearme con mis líneas de cuadrícula. Entonces sólo un poco más así. Y luego voy a copiar este título de sección. Entonces no tengo que hacer lo mismo dos veces. Entonces Control V, se puede ver que son patos. Está arreglado a este segundo. Entonces pasemos ahora nuestros testimonios a este tercero. Y básicamente estoy haciendo esto solo para no tener que animarlos. Una vez más, ciérrelos, selecciona el título de la sección en ella y, finalmente, pégalo aquí mismo. Y saltar al interior de los testimonios. Y finalmente mover este último a aquí. Simplemente ver un alineamiento. Se ve bien. Y eso es básicamente todo. Ahora Vamos a comprobarlo y a ver si funciona. Entonces vamos a dar a nuestro avance. Debería funcionar porque no cambiamos estas flechas. Simplemente movimos su lugar. Aquí estamos. Por lo que los horrores siguen funcionando, lo cual es genial. Se puede ver que esto aún funciona y encaja en la totalidad de nuestra pantalla. Por lo que se puede ver que los números están funcionando, todo está funcionando, lo cual es genial. Entonces pasemos ahora a estas secciones aquí mismo. Una vez más, porque tenemos 12 columnas, las vamos a dividir 66. Entonces voy a hacer doble clic en este para reducirlo. Entonces 1, 2, 3, 4, 5, 6, y destino se va a quedar 60. Entonces eso no va a cambiar. Yo lo voy a adaptar y porque es sólo una imagen, se está adaptando muy bien. Lo que vas a hacer es ocultar mi color, superponer, doble clic en mi tarjeta y usar Mayús 1, 2, 3, 4, 5 por ejemplo. Y es importante recordar porque cuando vas a hover, entonces ábrelo, esconde esto. Haga doble clic en 1, 2, 3, 4, 5, para que la imagen se quede exactamente en la misma ubicación. Se puede ver que sigue siendo un agranda al hover, pero la imagen se está quedando en la misma ubicación. Entonces vayamos a aquí a flotar porque no cambiamos esto para nada. Debería funcionar bien y lo hace. Yo estoy contento con ello. Y por último, viajes de esquema, me voy a mover con justo aquí, posicionarlo hasta el final de nuestra grilla y hacer lo mismo para el hover. Entonces cuando lo cambio, puedes ver que aún funciona y parece que debería. Entonces ahora sigamos adelante. Y lo que nos queda básicamente hacer es sólo el pie de página. Por lo que el pie de página, pie de página está cambiando bastante, obviamente, como se puede ver a lo largo de estos tamaños. Pero básicamente lo que voy a hacer es ocultar esto. Voy a hacer doble clic aquí mismo y posicionar a esta chica para estar más o menos en el centro, pero tal vez compensado un poco a la izquierda así, solo para que podamos traer nuestro poco más interés visual. Y tratemos de alinearlos. Entonces veamos imagen. Y trata de posicionar este contenido al centro así. Y veamos qué podemos hacer con toda nuestra información. Entonces en primer lugar. Vamos a ocuparnos de este nav principal. Entonces lo que voy a hacer es usar en realidad un tipo diferente de pila. Voy a usar este. Y luego me voy a asegurar que me posicioné así. Y veamos, la distancia aquí es de 100. podemos reducirlo a tal vez 60 porque aún tenemos pantalla de escritorio, pero ahora es mucho más pequeña. Entonces voy a saltar dentro de éste y voy a reposicionarlo. Entonces por ejemplo, aquí. Y tal vez pueda llevar esto al centro así. Entonces voy a hacer lo mismo por este, traerlo al centro así. Y estoy contento con ese resultado. Ahora para estos dos, simplemente vamos a reducirlos hacia abajo. Se puede hacer algo así como 40, por ejemplo. Creo que va a funcionar bien. Sí, creo que eso sí funciona bien. Y puedes ver que todavía tenemos el mismo problema con el divisor, pero éste es sencillo porque simplemente puedes alinearlo a tus líneas de cuadrícula y llamarlo un día. Pero si no quieres hacer eso, entonces realmente te recomiendo que uses la herramienta de rectángulo y la uses como divisor. Usemos esto como un 60 como este para que podamos tener el mismo espaciado aquí, sensibilidades aquí dentro. Y hagamos lo mismo aquí mismo. También podría usar turno, pero como dije, a veces estoy eligiendo usar estos. Ahora para este, alinémoslo rápidamente a aquí. Entonces lo que voy a hacer con estos en realidad es, Veamos la información de fondo. Puedo cambiarlo así. Yo puedo, Va a ser un poco complicado hacer click en estos iconos. Yo puedo, por ejemplo, posicionarlos así. Asegúrate de que mi Instagram esté en el centro, por ejemplo. Entonces lo que voy a hacer es reducir el espaciado entre ellos a 60, así. Y lo que puedo hacer es básicamente ajustarlos como quiera. Entonces tal vez pueda posicionar este para estar aquí. A ver, tal vez podamos moverlos todos a la izquierda, así. Y luego pincharemos justo aquí y simplemente moveremos a estos dos aquí. Y luego finalmente, ampliar nuestro pie de página. Entonces vamos a ver. A lo mejor esto puede ser hasta 240, pero vamos a mantenerlo así. Porque tenemos 60, tenemos 60 justo aquí. Y veamos qué tenemos. Tenemos, creo que 100 de arriba. Entonces vamos a ver. Sí, usemos 80 sólo un poquito. Entonces lo que voy a hacer a continuación es usar mi info de pie de página y por ejemplo, duplicado, pero no me gustan estos términos y condiciones. Entonces lo que voy a intentar es quizá posicionarlo aquí mismo y luego extender esto hasta aquí. Puedes ver lo simples que son de usar estas pilas, sobre todo si no quieres tener las mismas distancias entre tu artículo. Por lo que son realmente bastante simples una vez que se llega a colgar colgar de ellos, obviamente. Entonces como dije, Bueno, voy a hacer porque lo que hicimos justo aquí tenemos 80. Voy a duplicar esta información y simplemente usar shift y bottom arrow ocho veces. Y luego mueva mi imagen y hacia abajo hasta que se encuentre justo aquí y mueva mi superposición de color también. Al igual que así. Y luego borrar esta copia que he creado y rebaño lechero, tenemos nuestro pie de página terminado. Ahora que todo está listo, simplemente voy a hacer doble clic aquí mismo. Colóquelo aquí, y allá, lo tenemos. Entonces esa es nuestra página. Así es como se ve. Como puedes ver, algunos elementos son realmente bastante difíciles de manejar como estos. Pero una vez más, como dije varias veces a lo largo de esta clase, si no quieres tener demasiados de estos efectos. Porque una vez más, tenemos el flotador básico donde esta imagen se acerca, donde esta flecha se expande. Y luego tenemos otro hover dentro de esa flecha. Si no quieres todos esos elementos, simplemente puedes usar un diseño más simple como lo teníamos aquí mismo. Entonces, básicamente, todo lo que cambia aquí mismo es acercar la imagen y luego soltar sombra en el fondo. Ni siquiera tienes que hacer eso. Simplemente puedes usar la sombra de gota en el fondo que bastaría con la mayoría de las necesidades. Pero una vez más, quería mostrarles este diseño realmente bastante complejo. Pero se puede distinguir claramente de todos estos ajustes y viniendo alrededor, alrededor de todas estas diferentes opciones. Te va a llevar mucho tiempo dominar y cambiar N, hacer cambios a todos estos elementos. Así que solo ten eso en cuenta, sobre todo cuando estés empezando con tu proyecto, asegúrate de tener en cuenta todos esos costos de tiempo porque te costará tiempo. Y se puede ver que cuánto tiempo nos lleva crear justicia una página y hacerla sensible. Y aún tenemos tres páginas adicionales en este proyecto. Obviamente, no van a ser tan complicados como esta página de inicio. Por eso te mostré la página de inicio porque simplemente puedes entonces aplicar todos estos cambios diferentes a todas estas otras páginas. Pero sólo se puede imaginar, como dijo, asegurarse de tener en cuenta todo eso aquí mismo desde el principio en este breve. Así que asegúrate cuando estés factorizando en el presupuesto, asegúrate de tener en cuenta eso dentro del presupuesto Para cuántas resoluciones quieren. Para que puedas ver escritorio, escritorio pequeño, tablet, teléfono, y finalmente, asegúrate de incluir eso en la línea de tiempo del proyecto porque obviamente te va a llevar mucho más y mucho más que si tú, por ejemplo, eres sólo haciendo, digamos, tres tamaños diferentes o dos tamaños diferentes. Entonces eso es todo para esta página. En el siguiente video, vamos a pasar a esta página, que es la página del doblete. Y dentro de ella vamos a crear menú de hamburguesas. Entonces eso va a crear un montón de retos y cambios adicionales que vamos a abordar juntos. Entonces te veré ahí. 44. Crear diseño responsivo: Empecemos con el tamaño de la tableta. Y como dije en múltiples de estos videos anteriores, Va a ser mucho diferente porque ahora estamos quitando todos nuestros estados. Porque todos nuestros estados Horace, eso es porque no vamos a poder contratar en tabletas ahora en algunas tabletas, obviamente las tabletas Windows, sobre todo tú, van a tener una capacidad de usar el ratón, por ejemplo, y para flotar y también en algunas otras tabletas como los dispositivos Samsung por ejemplo. Tienen opción DAX de deuda. Por lo que podrás hacer eso en esos dispositivos, pero en la mayoría de los dispositivos, no puedes adjuntar un mouse. Y por lo tanto, todos esos dispositivos, debido a que cuentan con pantallas táctiles, es mucho mejor optimizar tus diseños para la experiencia táctil. Entonces vamos con 76 ocho aquí mismo. Entonces cambiemos rápidamente eso a 768. Y lo que vamos a estar haciendo aquí mismo es usar, vamos a ver, vamos a usar ocho columnas. Entonces vamos a saltar aquí mismo sería ir a las ocho. Y aquí mismo vamos a usar 296042. Por lo que 29, 60, y 40 para hacerlo 8296042. Y básicamente, la pintura que va a cambiar es nuestra propia navegación. Entonces vamos a crear el menú de hamburguesas. Pero antes de que lo hagamos, en realidad lo que quiero hacer es saltar dentro de aquí. Y organicemos rápidamente algunas cosas porque no vamos a hacer desplegables adicionales dentro de los menús desplegables dentro de estos menús, porque eso solo crearía una confusión. Para que les pueda dar un ejemplo. Ahora tenemos el destino. Cuando los usuarios toquen ahí, abrirá la sección de destino. Entonces vamos a hacer clic en deuda. Por lo que abrirá todas estas opciones adicionales. Y vemos, tenemos todas estas opciones adicionales de flotación. Tenemos todos estos divisores, tenemos todas esas opciones. Entonces cuando hacen clic en un invierno, por ejemplo, tenemos todos estos más el botón que va a flotar y todo lo demás. No vamos a hacer nada de ello aquí mismo, dentro de la versión de tablet y dentro de la versión móvil, sólo por el espacio. Entonces lo único que vamos a tener es el ícono de Menú aquí mismo. Entonces cuando lo pises, simplemente abrirá estos destinos tan, bienestar invernal y así sucesivamente. Y una vez que hagan clic en la página de destino, por ejemplo, los llevaremos al discurso de destino dedicado donde podrán explorar diferentes opciones como estas, por ejemplo. Para que puedan ver todas estas diferentes opciones para destinos, más bien estas. Y te puedes imaginar que aquí del lado izquierdo será un menú o justo aquí en la parte superior, como hicimos aquí mismo. Para que puedan elegir diferentes destinos por precio, duración del viaje, actividades y demás. Entonces, por lo tanto, pueden tap dare y usar esas opciones. Por eso estamos ahorrando espacio en una versión de tablet porque una vez más, solo puedes imaginar que los usuarios puedan tocar los destinos. Y luego dentro de los destinos, tenemos todas estas opciones. Esos son menús desplegables adicionales bajo menú desplegable adicional. Por lo que sólo crea mucha confusión. Simplemente crea mucho desorden innecesario. Y por eso quiero quitarlos a todos y simplemente ponerlos dentro. Una simple abandonó. Entonces lo que vamos a hacer primero es ajustar algunas de estas cosas. Entonces vamos aquí mismo y yo voy a, veamos una vez más. Por lo que tenemos 76 8. Voy a ajustar eso para un habilitadores primarios son 76 8 como así. Y vamos a ver, tal vez a ¿se puede reducir un poco el tamaño de mi logo? Por ejemplo, salta dentro a mi inicio de sesión, mantén presionada la tecla de turno y ajustada a, por ejemplo, algo así porque no quiero que sea demasiado grande. Y déjame ajustar rápidamente mis puntos de toque del logo para que no salga demasiado como así. Pero no lo vamos a animar en este caso porque vamos a tener icono de menú de deuda. Ahora para empezar, simplemente voy a mover todo esto hacia abajo así. Y vamos a traer nuestra primaria ahora borrosa de vuelta sólo porque podemos ver lo que estamos haciendo un poco mejor de esa manera. Y lo voy a extender a una carroza por aquí. Entonces 10, 75, creo que va a ser bueno. Así. Y eso está bien. Yo sólo voy a moverlo así. Y vamos a extendernos en realidad ver, ¿a dónde nos lleva? Entonces 1018, está bien. Y como dije, sólo vamos a mantener estos artículos aquí mismo. Y debido a que tenemos 20, podemos incluir, por ejemplo, 50. Pero incluso importan 60. Porque ahora vamos a tener mucho más espacio con el que jugar porque lo colocamos aquí mismo. O lo que podemos hacer es dividirlos así. Entonces puedes hacer doble clic en el interior. Asegúrese de que esto esté en el centro, este boletín. Y simplemente muévelo, por ejemplo, aquí mismo y luego traer esto de vuelta a aquí. Entonces de esa manera tenemos mucho más espacio, pero como dije, creo que así se ve un poco mejor, un poco más limpio, y un poco más de cerca juntos. Entonces lo siguiente que voy a hacer es realmente crear esa línea de logo. Entonces para hacer eso, simplemente voy a dar clic en algún lugar justo aquí. Por ejemplo, usa mi herramienta de rectángulo, saltando aquí mismo y crea esta bonita y sencilla línea. Veamos, por ejemplo, y los analistas usan, por ejemplo, 56 semanas, nueve. Creo que eso es un poco demasiado grande. Entonces por ejemplo, 56 con cinco. A ver. Sí, creo que eso funciona. Una muerte se ve un poco mejor. Y simplemente puedo acercar todo el camino. Utilice mi herramienta de selección haga clic y mantenga presionada la tecla Mayús para poder crear esta aristas redondeadas. Se me quitó la frontera. Y vamos a ver. Sí, creo que eso funciona muy bien. Vamos a posicionarlo aquí mismo y vamos a ver. Creo que eso es bueno. Vamos a llamarlo línea. Hit Control D. Y C posición en, por ejemplo. Creo que el bronceado es demasiado. A ver, tal vez ocho. Sí, Control D Una vez más. Ocho. Cert y simplemente alinearlos así porque lo vamos a animar en tan solo un segundo. Entonces lo que voy a hacer es agruparlo a Control G, calidad y menú. Ya veo, sí, Para ícono de menú, pulsa Control K para que sea como componente. Y luego vamos a ver, podemos agrupar estos dos no los agrupan sino que lo posicionaron así. Y vamos a ver, somos 34 quizá podamos bajar un poco más. A ver, 40. Sí, creo que eso es bueno. Porque ahora estamos dejando el espacio justo aquí en la parte superior para los compradores de navegadores necesarios o cosas como esas que van a venir en diferentes tablets. En primer lugar, lo que voy a hacer es que tenemos este estado por defecto, y no sé por qué. Me está mostrando este componente principal de edición. No sé por qué. Pero de todos modos, vamos a crear un nuevo estado. Voy a llamarlo clicado. Y dentro de ese estado clicado, lo que voy a hacer es usarlo en esta línea posicionarlo aquí mismo. Usa esta posición de línea a la derecha aquí, línea central que no ves. Entonces permítanme destacar escribir esto. Entonces esta es la línea central. Simplemente voy a sostener mi vieja llave y traerla todo el camino hasta que básicamente cree este pequeño círculo. Entonces todo el camino hasta aquí por ejemplo. Y puedo presionar 0 dos veces. Déjame traer a esos dos de vuelta. Básicamente en esta primera, voy a rotar por ejemplo, así. Entonces veamos que 60 C45 llevan a ir con 60 y ver cómo se ve eso. Simplemente mantenga presionada la tecla Mayús hasta llegar a los 60. Creo que eso es demasiado. Entonces 45, y bajar esto a 45. Creo que eso funciona bien. Entonces ahora tenemos default y hemos clicado. Entonces vamos a quitarlo. Si volvemos a aquí, a nuestro icono de menú Menú, ahora tenemos ese estado clicado. Ya lo puedes ver. Por lo que vamos rápidamente prototipos en. Entonces cuando los usuarios hagan clic aquí mismo, irá con el tap auto animate, clicked States, relajando y cero punto. Vayamos con 0.4 y veamos cómo se ve eso como un estado onclick. Una vez más, una vez que hacen clic en criterios, DAP auto animan, facilidad de entrada cero para los anélidos, volver al estado predeterminado. Vamos a darle a Preview en él muy rápidamente para ver cómo se ve. Por lo que ahí lo tenemos. Tenemos esta animación agradable y rápida. Si crees que es demasiado rápido, puedes reducirlo a 0.6. Pero creo que va a funcionar bastante bien así. Y como dije, como pueden ver, ahora tenemos una buena cantidad de espacio justo aquí en la parte superior. Entonces ajustemos nuestros artículos. Volvamos al diseño. Y lo que voy a hacer aquí mismo es básicamente ponerlos de un lado o ponerlos aquí a la izquierda, por ejemplo. Pero debido a que tenemos estos en el centro, en la parte inferior, en realidad voy a hacer lo mismo para DES. Entonces voy, lo que voy a hacer es usar la selección es tunecina y básicamente eliminar todas estas carpetas porque ya no las vamos a necesitar. Voy a agrupar todos estos debería controlar gen llamado él, por ejemplo, elementos de menú. Eso Y luego simplemente usa la pila. Usa esta pila y básicamente ajusta mis elementos de menú al centro de mi tablero de arte así. Donde 36, así que asegúrate de que somos 40. Ahora los analistas de mi papá los bajan. Creo que en realidad los voy a empujar hacia abajo a 80. Entonces veamos como deuda y tenemos 110. Entonces llamémoslo así. Entonces somos 100 y luego tenemos este espacio vacío abajo abajo. Entonces lo que voy a hacer aquí mismo es en realidad hacer clic derecho y desagrupar componente. Voy a golpear Control G una vez más, llámalo principal nav. Pero tableta. Esta vez, Ike que golpeó tecla Control. Y voy a crear nuevo estado. Pero en este estado predeterminado, lo que voy a hacer es saltar dentro de aquí, desenfoque de navegación primaria va a subir a un píxel. Estos elementos del menú van a desaparecer. Artículos secundarios, los voy a ocultar y el menú se va a quedar así. Entonces lo último que tenemos que hacer es crear realmente el punto de tabulación para nuestro botón de menú. Entonces para hacer eso y simplemente pincharía justo ahí, salta a nuestro botón de menú. Y por ejemplo, se expandió a algo como esto. Quitar el borde, quitar el relleno, utilizar la herramienta Seleccionar, traerlo a, incluso puedo dejarlo así. Realmente no importa porque vamos a animar también el estado abierto, que va a expandirse un poco en altura. Entonces, por ejemplo, algo como esto va a estar bien y lo vamos a llamar punto de tabulación de menú. Mi papá. Después ve a nuestro estado 2, que va a ser nuestro estado clicado. Y luego dentro de ahí, Vamos a ver, puedo ampliar esto para ser 1080. Quiero decir que puedo cambiar mi clic de estado predeterminado a estado en el icono Menú, navegación secundaria, traerlo de vuelta y se ven elementos de menú. Nosotros los vamos a traer de vuelta una vez más así. Entonces voy a ir al prototipo, abrir mi punto de toque de menú. Voy a dar click en él. Usar estado clicado, facilidad de entrada fuera punto cero. Vamos con 0.6 porque estamos abriendo el menú después de todo. Y debería mantener nuestra animación funcionando bien. Por lo que el menú se va a abrir más rápido que el resto. El icono del menú se va a animar más rápido que el resto del menú en sí. Pero creo que nos vamos a salir con la suya. Así que vamos a comprobarlo y volvamos a hacer clic Estado, navegación primaria, punto de pestaña de menú, y luego usar exactamente la misma configuración. Estado predeterminado golpear Preview, y vamos a ver cómo se ve eso. Entonces cuando hago clic aquí mismo, se puede ver inicialmente tuvimos un error, pero esa es solo mi computadora porque estoy ejecutando todas estas cosas en segundo plano. Pero como puedes ver aquí mismo, va realmente sin problemas. Y todos estos artículos se están mostrando muy bien. Incluso puedes incluir una máscara si quieres ordenar máscara te va a dar aún mejor opción. Por lo que simplemente esconde todos estos artículos. Por lo que estos elementos de texto dentro de una mezquita lo pusieron en algún lugar por aquí, por ejemplo. Y luego cuando haga clic aquí, máscara se va a expandir todo el camino hacia abajo como lo hicimos para algunos de estos elementos anteriores. De acuerdo, vamos a seguir adelante. Entonces eso es todo para esta parte 1 que voy a hacer a continuación es la imagen de héroe. Entonces veamos por la propia imagen de héroe, lo que voy a hacer es a ver. Por ejemplo, puedo crear un poco de un diseño diferente. Entonces vamos a ver. Quizás sólo pueda usar el botón explorador de texto, pero voy a, por ejemplo, mover mi estado de ánimo, mis iconos hacia abajo. Entonces hagámoslo primero. Voy a alinear mi texto aquí mismo. Voy a ir a la imagen número 2. Voy a usar mi texto, alinearlo al centro. Imagen número 3. Usa mi búsqueda basada en texto para comprobar si todo funciona como debería. Sí lo hace. Entonces volvamos al estado por defecto y veamos qué podemos hacer con estos iconos. Entonces, antes que nada, lo que voy a hacer es posicionarme todo aquí en el borde inferior de nuestra máscara de texto. Y veamos, o tal vez aún mejor, puedo moverlos hacia abajo. Por lo que 12345678, por ejemplo. Entonces voy a mover mi texto al centro. Veamos mi botón expandido para tener cuatro columnas de ancho, así. Y veamos, para estos, lo que puedo hacer es estar pensando ¿cómo puedo acercarme a esto? Entonces vamos a ver, estamos a los 80. Y por ejemplo, puedo dividirlos por una sola columna. Así que así. Y luego vete así. Tan solo para mantener la animación en marcha y ver si la alineación es correcta. A lo mejor tú incrustador puedo, puedo posicionarlos en el centro de su columna aquí mismo. Entonces solo estoy pensando, lo que no va a distraer el usuario quiere tab de día. Entonces tenemos que darles suficiente espacio entre estos dos para que tengan el espacio para su lengua, por ejemplo, sólo para tocarlas en la pantalla. Pero aún así queremos mantenerlo bonito y limpio de aspecto. Entonces por eso hice esto. Por lo que tenemos que alinearlos a todos en todos nuestros estados y asegurarnos de que esto sea a las cuatro. Entonces hagámoslo rápidamente. Entonces imagen número 2, voy a poner el botón héroe aquí mismo. Asegúrate de que esté a las cuatro. Debería para esto también. Ve con nuestras flechas y simplemente alinéalas para escuchar y ver. Esto es a los 80 y 18 que creamos esto para ser 80 también. Si recuerdo correctamente. Sí. Entonces hagamos lo mismo aquí. Y zoos posición de flecha izquierda a aquí e ir con posición de flecha derecha a aquí. Y simplemente voy a asegurarme de que esté en el borde. Lo es. Y para ir con flecha izquierda, a ver si está en el borde. Es, que está bien. Y ahora lo único que nos queda por hacer es la imagen número tres. Entonces arreglémoslo realmente rápido, algunos así. Y finalmente bajar las flechas una vez más. Entonces me voy a alinear así. Y el MIT debería hacer uso de 80 de aquí. Salta dentro de aquí, y asegúrate de alinearlos aquí. Y éste hasta aquí. Por lo que simplemente estoy usando las teclas Mayús y flecha en mi teclado. Asegúrate de alinear este hacia arriba. Asegúrate de alinear este. Yo soy Derek, cómo es y ahora lo que no me gusta es todo este espacio vacío aquí mismo. Entonces lo que realmente vamos a hacer se ajusta para ser, por ejemplo, 100 desde arriba. Entonces lo que voy a hacer es ir al estado por defecto. Y debido a que tenemos todas estas opciones seleccionadas de todos modos, voy a seleccionar mi máscara de héroe, mezquita de texto, un botón de héroe y flechas. Voy a alinearlos hasta aquí. A ver, más o menos dos aquí. Por lo que 12345678910, o aún mejor e ir a 150. Ahora vamos con un término. Entonces vamos a ver. No sé qué pienso. Sí, creo que debería usar un divisor porque eso va a ser mucho más sencillo para mí en mis próximos estados. Entonces posicionémonos aquí y vayamos 100, así. Y de manera similar a cómo escribo aquí, haga clic y arrastre mi divisor hasta aquí. Entonces se va a alinear con el borde superior de mi texto héroe. Siguiente Voy a ir a Número de imagen para seleccionar todos estos y simplemente moverlos hacia arriba así. Imagen fotográfica número tres. Selecciona todas estas, haz clic y muévalas hacia arriba así. Y ahora vamos a previsualizarlo rápidamente y ver cómo se ve. Entonces si hago clic aquí mismo, va a muy bien la transición así. Y si crees que estas imágenes no funcionan tan bien, puedes ajustarlas. Pero lo que me gusta ahora es que todavía podemos ver estos yates. Todavía podemos ver estas chozas. Podemos ver la playa de la gente, ver gente bailando aquí mismo. Entonces eso es genial. Y aquí podemos ver la arena del río en París. Eso es genial. Y finalmente aquí mismo en Pekín, todavía podemos ver el hoyuelo. Eso está bien. Esto funciona como debería. Entonces, no pongas atención a esa falla. Porque como se puede ver. Cuando empiezo a hacer clic, desaparece. Entonces es solo a mi computadora. Entonces como yo, como dije, puedes ajustar estas imágenes, pero las voy a mantener donde están. Y lo último que vamos a ajustar es esta navegación de fondo. Entonces lo primero que voy a hacer en realidad es cambiar este botón. Entonces porque ese botón es solo atrévete una columna de ancho, lo siento, dos columnas de ancho, justo aquí. En realidad lo voy a mover hacia abajo y crear una especie de este look separado. Entonces vamos a ver, podemos mover esto a aquí. Más ancho para ser 100 por ejemplo. Y luego usa, Aplicar botón, colóquelo aquí mismo. Asegúrate de que somos, por ejemplo, 40 así. Y lo que voy a hacer en realidad se ha cambiado bastante. Entonces voy a usar cinco para todos los ángulos, para todos los bordes. Aviso, muévelo a aquí. Ampliado para tener cuatro columnas de ancho, por ejemplo. Después entra en estado de horror, ampliado para tener cuatro columnas de ancho también. Y también salta dentro de aquí y asegúrate de que todos sean 5. Entonces porque ahora tenemos más espacio, voy a usar Aplicar filtros que copien mi texto. Salta dentro de mi estado Horace. Con base en aplicar filtros y lácteos tienen. Entonces ahora por todos estos, Vamos a ajustar rápidamente esto porque no necesitamos que sea todo ese blanco. Lo que realmente vas a hacer es simplemente ajustar algunos de esos. Entonces básicamente, para la búsqueda que va a ser la mayor, realidad voy a usar dos columnas. Entonces algo como esto. Y voy a traer a estos dos aquí. También voy a traer mi cerca de aquí. Entonces todo el camino hasta el borde y luego 12, porque una vez más se va a expandir todo el camino hasta aquí. Por lo que podemos ir al estado cliqueado ahora. Y ajustémonos a aquí. Y vamos a traer una búsqueda BG y cerrar icono todo el camino hasta aquí. Así. Vayamos entre ellos. Y aún así tendría que cambiarlo aquí. Entonces esto, esto, y esto van a pasar a aquí. Traigamos la búsqueda. Ponlo a las 10 por ejemplo, y cuándo traer a estos dos de esta manera. Y ahora veamos si lo logramos. Sí, Ahora se ve genial. Entonces, antes de seguir adelante, revisémoslo rápidamente y veamos cómo se ve aquí. Así que da click en una búsqueda ahí mismo. Pero esto no está alineado correctamente. Entonces veamos qué has hecho mal. Y antes que nada, en realidad voy a quitar este estado de horror porque no lo necesitamos para este tamaño porque estamos al tamaño de tableta. Entonces lo que voy a hacer es realmente copiarlo. Estamos en un estado por defecto. Voy a desagruparlo. Pondré simplemente llámalo aplicar botón y no necesito ese componente realmente ahí. Entonces volvamos a la búsqueda y veamos qué hemos hecho mal. Entonces en el ícono de la ropa, voy a seleccionar estos para dar click justo aquí para ponerlo justo aquí a este borde. Voy a asegurarme de que sean 20 a la izquierda, así. Y luego voy a hacer el mismo estado pulsado interno. Entonces lo voy a poner justo aquí. Y veamos, puedo rotarlo de nuevo. Entonces hay así. Hago este borde y luego cambio 1, 2, y finalmente giré así. Entonces ahora vayamos entre ellos. Voy a golpear mi adelanto una vez más. Haga clic justo ahí. Y como puedes ver, ahora, se queda donde no debería estar. Dice buscar viajes aquí mismo. Todo se está expandiendo muy bien. Entonces, ¿qué podemos realmente ajustar aquí? Podemos dejarlo tal como está. Si quieres. Vamos a previsualizarlo una vez más. Por lo que podemos dejarlo tal como está, o puedes ajustarlo aún más si quieres. Pero creo que sólo voy a mantenerlo así. Podemos saltar, se acabó de botes escrituras y simplemente ajustarlas y dar sobre todo el tipo de poco más espacio a la izquierda y a la derecha. Pero hay un cierto ancho para mantenerlo solo por el bien del tiempo. Y lo que puedo hacer en realidad es mover todo esto a 80. Así que permítanme seleccionar rápidamente que algún nav inferior. Como pueden ver, estamos en 100 aquí, así que vamos a subirlo 20. Y así es como se ve en una prima. Y por cierto, no mencioné esto. Si tienes dos pantallas en tu máquina, realidad puedes crear una vista previa en vivo. Y necesito quitar esto explore ahora también. que puedas crear una vista previa en vivo, simplemente puedes abrir esta vista previa haz clic aquí para abrirlo a vista previa del escritorio. Y luego puedes poner esa vista previa de escritorio en la segunda pantalla y puedes diseñar en tiempo real. Entonces vamos a la imagen de héroe. Vayamos a nuestro botón de héroe. Y simplemente voy a copiar mi texto y hacer clic derecho en él. Vamos, preséntate. Desagrupar componente, Control G. Y lo siento por todos estos errores, pero es solo mi máquina. Simplemente se está ejecutando un poco lento porque estoy ejecutando dos versiones de XD, dos pantallas de XD. Y también estoy ejecutando todo este software encima de él. Estoy ejecutando este anterior fuera su software de audio es todas estas cosas. Entonces por eso puedes ver todos estos errores de vez en cuando. Pero no deberías tener todas estas fallas cuando empieces a trabajar en ello. Entonces ahora quitamos eso. Entonces ahora cuando golpee la vista previa y luego vuelva a aquí, vuelva a aquí. Se puede ver que tenemos justo este botón vacío en el interior. También necesitamos quitar el estado de flotación de estas flechas. Entonces lo que voy a hacer en realidad es Aleve en estado hover y luego desagruparlo. Entonces hagámoslo. Cambiemos rápidamente nuestras flechas al estado Horace, flecha derecha al estado Horace. Y voy a simplemente, por ejemplo, desagrupar componente. Llámenlo, correcto. En esta etapa, Control C. Voy a desagrupar componente Control G. Vas a ser flecha izquierda. Y es rápido previsualizar y ver si aún funciona. Entonces cuando hago clic aquí mismo, se puede ver porque estábamos en la finca del horror, todavía se puede hacer clic en él porque en realidad no estábamos animando flechas. Estábamos animando esos puntos. Entonces sigamos adelante y hagamos eso para la imagen número dos. Entonces voy a abrir mis flechas. Voy a desagrupar componente Control G justo aquí, flecha izquierda. Ahora, perdón, tengo que cambiar a mi estado de horror primero en botulinum. Así, haga clic con el botón derecho del ratón desagrupar componente Control G, flecha izquierda, desagrupar componente Control G, y, o flecha derecha así. Y por último, hagamos eso para el primer estado, para las filas de estado por defecto, Vamos a cambiar a flotar. Vamos a cambiar a flotar. Por lo que Control C en grupo, control G. Ahí lo tienes. Y finalmente, desagrupar componente aquí mismo, Control G. Y voy a renombrar este hábito lácteo de flecha derecha. Por lo que ahora se puede ver lo fácil que es trabajar con. Sólo porque en una versión de tableta te estás deshaciendo de todos estos estados de terror. Entonces básicamente eso va a hacer mucho más sencillo nuestro trabajo porque no vamos a tener nuestros estados, por ejemplo, para estas tarjetas y estas tarjetas aquí mismo. Entonces lo que realmente vamos a hacer aquí mismo, y voy a saltar en tan solo un segundo y explicar todas estas en el siguiente video. Pero déjenme mostrarles rápidamente esto en un verdadero ejemplo. Entonces, por ejemplo, vamos con el título de la sección. Vamos a moverlo aquí mismo. Y lo que voy a hacer es en realidad acercar esto un poco más también. Entonces ahora porque tenemos ocho columnas, ya no tenemos 12 columnas. Cada una de estas van a ocupar cuatro columnas. Y volvamos a aquí. Tarjeta de oferta tan especial, flecha y él sí, solo esos dos los van a traer aquí mismo. Voy a saltar dentro del medio. Porque estamos en la pila justo aquí. En realidad voy a ajustar mi pila, ver a dónde me lleva eso. Y veamos, por ejemplo, puedo hacer que mi imagen sea más estrecha. Entonces ajustémoslo para que tenga cuatro columnas de ancho. Y luego vamos a mover todo nuestro contenido a aquí. Ahora tenemos un poco más de espacio para que nuestra pila juegue con ella. Por lo que puedo ajustarlo a aquí. Pero si crees que está demasiado cerca y quieres deshacerte de este ícono por alguna razón, entonces puedes, y puedes ajustarlo así. Pero creo que va a funcionar así de cualquier manera. Ahora por fin, para estos divisores, que son lo más molesto de este diseño, Vamos a moverlos por aquí. Y cuando estés ajustando todas estas otras, simplemente recuerda el valor para este divisor. Entonces son de tres a dos. Entonces vamos a ver por el fondo. Sí, estamos ahí. Y como dijo, porque vamos a deshacernos del efecto flotante en sí, lo que en realidad vamos a hacer es que en realidad se puede saltar al hover justo aquí. Y hagámoslo. En realidad debería hacer eso. Entonces ahora estamos en estado de horror para todos estos, como te puedes ver, voy a saltar dentro de mi flecha y la flecha derecha. Seguramente me dejaste entrar para que veas cuando lo estoy haciendo un poco mejor. Y ajustemos nuestra imagen a cuatro y volvamos todo nuestro contenido una vez más hasta aquí. Ahora pincharemos aquí y simplemente traeremos a todos estos tipos más o menos por aquí. Y posicionarlo aquí mismo. Entonces 313, cópiala y salta aquí mismo en el hábito 13 Lácteos. Entonces ahora lo que voy a hacer es saltar a un lado nuestra máscara porque ahora estamos en el estado de Horace. Lo que voy a hacer es dar click justo aquí, dar click aquí. Y entonces en lugar de 8%, voy a ir al 5%. Y lo que puedes hacer es dejar estas imágenes un poco ampliadas si quieres. Pero lo clave es esto de aquí. Entonces voy a ir a mi flecha derecha e ir a mi efecto de horror. Seleccionar. Por lo tanto Controlar C o hacer clic derecho y desagrupar componente. También puedes hacer es dejarlo así. Creo que debería quedarse. Por lo que no hay necesidad de que hagamos otra cosa. Sí. Porque no lo animamos de vuelta de hover. Entonces se va a quedar en un hover. Y creo que se ve bien así. Si no quieres dejarlo así, simplemente puedes volver a cambiarlo al estado predeterminado, así que así. Entonces ahora cuando llegues a la vista previa, se va a quedar en esta etapa predeterminada, pero hay que quitarla. Por lo tanto, haga doble clic en Control C o haga clic derecho desagrupar componente Control G para agrupar con espalda y basado en el nombre, por lo que flecha derecha y hábito lácteo. Entonces como dijo en el siguiente video, vamos a jugar con todos estos y animar estos dos y finalmente, cuatro botones de muertes en la parte inferior, ahora podemos hacerlo mucho más blanco porque tenemos ese espacio. Entonces posición y justo por aquí por ejemplo. Y voy a asegurarme de que tenga cuatro columnas de ancho. Pero una vez más, porque ahora nos movemos a estos dos, se puede ver, así que si escondo este y muestro éste, puede ver que movimos a esos dos y funcionan así. Entonces lo que voy a hacer es llamar a esto todo para nosotros, minutos, btn. Y voy a hacer clic derecho en él, desagrupar componente Control G para volver a agruparlo. Entonces todo de primer minuto. Y yo voy a hacer lo mismo por este. Pero en este, en lugar de primero lo voy a llamar clase. Yo lo hice. Déjame esconder éste. Como puedes ver todo de primer o último minuto, todo funciona como debería. Y ocultemos este de abajo. Y vaca lechera, Es, así que eso es todo para este video. Como dije, vamos a abordar estos en el próximo video. Nos vamos a ajustar y podemos hacer el video en este porque es realmente bastante sencillo. Y también voy a ajustar un poco la altura. Y debido a la pila como de costumbre, diseño se está ajustando bien. Por lo que te veré en el siguiente video cuando vamos a continuar nuestro trabajo en este tamaño de tablet. 45. Crear diseño responsivo: De acuerdo, sigamos ahora donde lo dejamos. Y antes de que lo hagamos, solo estoy pensando en algo porque tenemos todas estas flechas en todas partes se ven así. Se van a ver así aquí mismo en estos estados. Y también los tenemos aquí mismo como estos azules. Estoy pensando que volver debería cambiarlos aquí mismo. Entonces en todos nuestros Estados héroes, así que para la imagen del héroe, ahí, voy a saltar dentro de mis flechas y tengo mi llamado color. Simplemente lo voy a reducir a 0. Y voy a hacer lo mismo por aquí sólo para mantener la consistencia de ellas porque no creo que estas opciones vean tan bien justo en esta sección sin cambiarlas en todas estas otras secciones. Entonces solo estoy presionando 0 dos veces y los voy a cerrar aquí mismo. Volviendo al número 3 y localizarlos aquí mismo. Y la salud láctea. Ahora pasemos rápidamente a las ofertas especiales. Y bajo ofertas especiales, lo que voy a hacer en realidad es saltar dentro de éste, por ejemplo, y ver todos estos ajustes. Entonces voy a saltar un repentino medio. C, el espaciado de 2002 por ejemplo, y el divisor está en 3, 1, 3. Entonces voy a usar eso para este. Entonces antes que nada, salta dentro de aquí, mueve toda mi información para escuchar más de mi flecha a aquí y mis antecedentes a aquí. Entonces voy a saltar asignado mi divisor, usar 313 suciedad y voy a saltar dentro de aquí y usar 22 y Derek lo tiene. Por lo que es mucho más rápido y simplemente copias y pegas todos estos elementos. Entonces voy a esconder estos, aparecer, estos tres. Entonces vamos a saltar dentro de nuestro París, pero tengo que esconderlos así para poder editar éste. Vamos a crear hasta aquí. Y voy a saltar dentro y mover todos estos. Y voy a seleccionar estos para moverlos al mismo tiempo, dos aquí. Y voy a abrir mi máscara. Colóquelo aquí y haga doble clic en esta flecha. Haga clic con el botón derecho del ratón Desagrupar componente Control G, y llámala flecha derecha. Y vamos a ver, lo que está justo aquí fue 313. Y aquí podemos usar 22. Y ese es el gran beneficio y poder de usar estas pilas porque simplemente puedes ajustarlas como quieras. Y seguirá sin dejar de mantener la misma distancia que se puede ver aquí mismo. Entonces me gusta mucho esa característica, pero una vez más, parecen todas estas características, va a mejorar a tiempo y va a ser mucho más sencillo de usar. Cuanto más lo uses y más se actualizaron a lo largo del tiempo. Tan cerca que voy a saltar dentro del medio aquí. Usa 313 y usemos 2250, este lechero Howard y simplemente se metió dentro de mental Hero 3, 1, 3, y usa 22 para este. Y ahora terminaron las deudas. Una que voy a hacer es traer estos de vuelta, seleccionar las tres tablas Q a 0 MCI para poder traerlos de vuelta. Voy a seleccionar mi Control Haggadah C o hacer clic derecho Desagrupar componente Control G y traerlo de vuelta. Haz lo mismo con Tokio. Y lo estoy haciendo porque como expliqué, ya no tenemos Estados de horror. Entonces va a ser mucho más rápido para nosotros crear todos estos sólo porque estamos usando un solo estado, solo queremos un look básicamente crop llamado click derecho Desagrupar. Y por último para escribir un click Desagrupar. Y ahí lo tienes. Entonces ahora si recuerdas, tenemos estado por defecto y tenemos ofertas de último minuto. Entonces lo que voy a hacer es en realidad lo mismo que siempre lo hizo a lo largo de esta clase, es seleccionar todos mis elementos, Control C. Saltar dentro de ofertas de último minuto basadas en la parte superior, y luego quitar todas las viejas. Entonces lo que voy a hacer aquí mismo, primero iré a mi estado predeterminado. Y estos tres se van a quedar en la cima mientras estos tres se van a esconder. Entonces voy a saltar dentro de ofertas de último minuto. Después estos tres a la parte superior, vamos a estar escondidos y estos tres van a mostrar mientras estos botones. Entonces veamos, de primer minuto lo voy a esconder. último minuto, lo voy a mostrar. Fin. La animación debería funcionar en realidad porque no cambiamos la dosificación. Entonces cuando hago clic justo aquí, puedes ver que cambia de nuevo a aquí. Pero por alguna razón no se animó. Entonces vamos a ir prototipo de estado por defecto. Y veamos qué teníamos justo aquí. Creo que fue, está en nuestro 0.6. Entonces vamos rápidamente a las ofertas de último minuto y voy a seleccionar esta está en nuestro estado de 0.6 por defecto. Vamos a previsualizarlo para ver cómo se ve eso. Por lo que en un click justo aquí para ir al primer minuto, dar click para ir al último minuto. Pero dentro de las ofertas de último minuto, me olvidé de cambiar el texto. Entonces aquí tuvimos, aquí estamos en el estado por defecto. Hemos seleccionado ofertas de primer minuto. Cuando pasemos al último estado, de último minuto pases, lo que voy a hacer es asegurarme de que éste esté florecido en azul principal. Y asegúrate de que esto sea gris claro así. Entonces ahora cuando voy al prototipo y hago clic para previsualizarlo, estamos en los últimos minutos. Estamos en el primer minuto y se pueden ver los cambios. Y si me desplaza hacia abajo, se puede ver que tenemos todos de primer minuto sin ningún flotador, también tenemos que quitar el Hubbard aquí. Entonces sigamos adelante y hagamos eso. Por lo que saltaré dentro de nuestro ícono de reproducción de video promocional. Me aseguraré de que estoy en el estado por defecto, copiar texto, desagrupar componente Control G. Y esto es básicamente lo que te va a llevar la mayor cantidad de tiempo básicamente, en estos no son estos iconos. Entonces porque aquí tenemos destinos europeos, lo que en realidad voy a hacer es simplemente EU, Europa, así. Y luego usar sección titulada posicionarlo en el centro. Y lo que voy a hacer aquí mismo es. A lo mejor podemos tener cuatro de ellos, digamos, o incluso seis de ellos, pero podemos ajustar el tamaño de ellos. Entonces lo que voy a hacer antes que nada es ajustar mi grupo desplazable a Hyrum. Y luego voy a ajustar mis ciudades. A ver. Sí, creo que podemos usar 6. Entonces, ¿qué vamos a hacer por cada uno? Estos básicamente tienen que ser cuatro columnas de ancho. Por lo que no va a requerir realmente todos esos cambios importantes. Entonces, en primer lugar, salta dentro de cada uno y simplemente se cierne. Mi papá, mi papá. Y lo que también podemos hacer es saltar dentro de cada contenido. Por lo que esta flecha de grupo y recapitular esta flecha derecha. Lo que podemos hacer es ir al prototipo y simplemente para cada uno, haga clic y arrástrelo afuera. Entonces así, haga clic y arrástrelo afuera para el desplazamiento. O incluso podemos, vamos a ver ¿cómo podemos quitarlo? Ninguno. Entonces vamos a previsualizar eso y ver cómo se ve. Para que pueda bajar con ello. Dice París. Puedo rondar sobre él. Por lo que simplemente tienes que seleccionar ninguno. No va a mostrar el horror, no se verá así. Y para estos de abajo podemos, como dije, puedes dejarlo así o puedes cambiar a flotar si quieres flecha más grande. Entonces realmente todo depende de ti. Por lo que simplemente puedes seleccionar Ninguno para cada uno de ellos. Y puedo dar click en este. Puedo seleccionar hover. Entonces vamos con ninguno. Entonces. Puedo seleccionar este, destino ninguno, y destino ninguno, para que no tengamos que desagruparlos y hacer todas esas cosas. Ninguno. Y por último, nueve aquí mismo. Y Darío lo. Entonces eso es básicamente todo. Yo voy a hacer lo mismo por estos. Entonces dentro de mis flechas, me voy a ir con ninguna porque no quiero que cambie para flotar. Aquí mismo. Yo no voy a ir nada y sólo voy a dejarlos como están, verdad. Compartir. Si también podemos hacer es hacer lo mismo por el botón. Entonces volvamos al diseño. Y en primer lugar, ajustémonos para ser, por ejemplo, cuatro columnas de ancho. Voy a ajustarlo así. Y también voy a hacer lo mismo para el hover por si acaso, por ejemplo, más adelante podrías cambiar de opinión y quieres usar el estado de horror por alguna razón. Para que puedas ir al prototipo y puedes ir. Entonces ahora cuando golpee la vista previa, debería quedar así para todos ellos para que tengamos esa opción de no desagrupar todos ellos. Entonces vamos a ver. Está ahí. Si los cambio, está ahí. Por lo que incluso puedes dejar estas tarjetas ya que están justo aquí para acelerar todo el proceso. Pero como dije, tal vez sea mejor matarlo un poquito. A lo mejor puedes incluso deshacerte de estas flechas. Entonces como quieras hacer esto, pero en realidad voy a tener sólo dos de ellos y luego hacer que se desplacen a la izquierda y a la derecha. Entonces antes de hacer todo eso, déjame volver a estas tarjetas porque algo no está bien, aquí mismo. Por lo que estamos en unas ofertas de último minuto en este punto. Y voy a cerrar todos estos. Ahora. A ver. Estos son R3. Entonces tenemos París crack de Taipei y voy a cambiarlos. A ver. Lo que en realidad no hice es que no seleccioné mi contenido. Entonces volvamos al estado por defecto. Lo que voy a hacer aquí mismo es que voy a saltar, firmarme ciudades. Yo voy a, Vamos a ver. Lo siento, estoy cambiando destinos europeos y me estoy preguntando qué está pasando. Entonces aquí mismo, voy a ajustar estos. Porque si selecciono estos tres en la parte superior, se puede ver que hicimos esos cambios realmente bien, pero con estos en realidad se olvidó de expandir estas máscaras. Entonces hagámoslo rápidamente. Crack de flecha. Máscara va a ser 80 para mi papá y flecha derecha ir al prototipo y simplemente usar ninguno. Entonces no nos molestamos con todas esas cosas. Ir a escribir una máscara de flecha. Su diseño 82 flecha prototipo. Simplemente dale tiempo para cambiar porque como dije, tengo múltiples cosas funcionando. Entonces voy a ir con non, volver a Design, cambiarlo así. Y ahora voy a simplemente copiarlos todos una vez más. Entonces voy a usar estos y los botones y Control C e ir al estado predeterminado. Escondemos estos tres en la parte superior y traigamos estos de vuelta. Entonces vamos a ver, puedo seleccionar llamado gada todo el camino hasta botones control V. Ahí lo tenemos título de sección, y justo encima de las pestañas, XD está actuando raro hoy. Por lo que ofrece, voy a mostrarle este, esconder éste. Voy a esconder 123 al fondo. Voy a mostrar estos tres primeros, porque ahora ya terminamos todos estos. Por lo que voy a mostrar estos tres en el estado por defecto. Y en la oferta de último minuto, tenemos de último minuto y tenemos estos tres al fondo, lo cual está bien. Todo funciona como debería, terminarlo básicamente. Entonces antes de seleccionarlos y editarlos todos, quiero mostrarles uno, y quiero mostrarles cómo me voy a ajustar realmente. Porque como dije, estamos en estado de horror, no vamos a cambiarlo demasiado. Lo que voy a hacer primero es saltar dentro de cada uno. Así, abre mi contenido. Y para cada una de estas tarjetas de destino. Y vamos a dar click aquí y teclear cinco. Entonces lo voy a hacer muy rápido porque como dije, ya no tenemos ese efecto flotante. Simplemente estamos usando todos estos otros sin ningún efecto flotante. Entonces voy a usar cinco. Haga clic aquí. Usa cinco, y luego salta aquí mismo. Y por último este de un clic, usan cinco y su cabeza. Entonces voy a cerrar todos estos porque voy a estar trabajando en el de París y ver a qué me refiero. Entonces para el de París, lo que voy a hacer es realmente mover a todos estos otros fuera del camino para que no me molesten demasiado. Hola, En esto, simplemente voy a extender todo mi contenido hasta aquí. Y eso es básicamente todo. Entonces, lo que puedes hacer en este punto es simplemente saltar dentro del centro, seleccionar tus divisores, y simplemente alinearlos aquí mismo con el borde izquierdo de tus textos. Todavía se van a quedar ahí mismo. Pero también puedes hacer es expandirlos si quieres. Entonces, por ejemplo, 300s, mira a dónde te lleva eso. Y luego salta dentro de aquí y ajusta cada una de estas herramientas, digamos 741 línea y luego pueden ser 642 líneas de texto. Y creo que eso es bueno. Entonces revisemos una vez más. Por lo que 36074 D's. Así que salta dentro de Londres. Ampliado. Vuelve a la sección media. En realidad movió toda la sección, lo cual está bien. Y vamos a ver. Por lo que puedo dar click aquí entrando 300 por eso. Y yo puedo hacer lo mismo por este. Por ejemplo, 60 o 70 porque tenemos sólo un texto de línea aquí mismo. Y ahí teníamos. Entonces voy a terminar el video aquí y voy a volver una vez que termine, no sólo éste, sino todos estos otros, una vez más, para no aburrirte. Y entonces vamos a seguir adelante y seguir con todas estas otras secciones porque una vez más, estas secciones toman demasiado tiempo. Entonces como dije, no quiero preocuparme, aburren demasiado chicos con todos estos detalles innecesarios porque lo que estoy haciendo es lo que acabo de mostrarles. Simplemente enjuague y repita, enjuague y repita. Y luego les voy a mostrar lo que hice por estos estados porque tenemos default y hemos clicado. Entonces como dije, eso es todo para este video. Te veré en el próximo. Una vez que siga adelante y termine todas estas para poder mostrarles a dónde vamos a ir a continuación. 46. Crear diseño responsivo: De acuerdo, así que sigamos ahora. Pero antes de que lo hagamos, ya salí adelante y creé componentes para estos nuevos que acabo de crear. Pero no lo hice por éste porque quería mostrarles esto lo que voy a hacer porque tengo seis de ellos. Y tú viste muerto. Corté este grupo de libros de desplazamiento aquí mismo. Por lo que al borde de nuestras líneas de red así como al borde de nuestros aeropuertos. Tan misma cosa exacta que hicimos, uh, hasta ahora para todos nuestros tamaños. Entonces lo que voy a hacer porque tenemos seis, realidad voy a crear tres estados diferentes. Entonces para hacer eso, tengo que desagrupar este componente y crear uno nuevo. Pero no voy a hacer clic derecho y desagruparlo así porque como puedes ver, eso acaba de romper nuestro diseño porque Adobe XD cosas que queremos 150 entre todos estos diferentes elementos. Porque por ejemplo, estos dos no están agrupados. Entonces por lo tanto es sólo enviarlos ahí mismo. Lo que voy a hacer en realidad es volver atrás, abrir mi componente, seleccionarlos todos, golpear Control G y bucear en Europa, por ejemplo. Y luego voy a hacer clic derecho y desagrupar componente, que va a mantener 150 para estos dos. Y va a mantener todos estos dentro. Entonces voy a pegarle al Control K por éste. Entonces sólo para crearlo como Europa. Y luego lo voy a llamar etapa dos, por ejemplo. Al igual que esto dentro del estado a lo que voy a hacer es saltar, firmarme ME, las ciudades alinean y este derecho a aquí, así. Y luego voy a crear otro estado, que se va a llamar estado tres. Y dentro del estado tres, voy a usar una vez más mis ciudades y alinearla así. Entonces ahora sigamos adelante y lo prototipemos. Entonces ve a default, prototipo de estado. Voy a abrir mis flechas, derecha, punto tabulador. Te voy a dar click estab auto animate, fácil. Ahora nuestro 0.6, así como para todos estos otros van al estado dos. Y entonces en lugar del estado a, voy a hacer lo mismo. Entonces aquí voy a dar click, Volver al estado por defecto, y voy a dar click en este. Vuelve al estado tres, así. Y finalmente, dentro del estado tres, voy a usar mi punto de datos de laboratorio de flechas. Voy a ir al estado 2. Entonces ahora si vuelvo al diseño del estado por defecto, pulsa la vista previa y te muestra cómo se ve ese anterior. Entonces, vayamos hacia abajo a destinos europeos. Aquí están. Entonces una vez que golpeamos la flecha, porque no tenemos ningún, ningún efecto de desplazamiento, es que puedes ver que los usuarios simplemente pueden tocar y se los va a llevar a todas estas cosas, todas estas diferentes lugares. Y simplemente puede elegir el auto que quieran. Porque eliminamos el efecto flotante de todas estas flechas. Como puedes ver, una vez que se cierren el dedo básicamente sobre ellos, no va a hacer nada y no va a cambiar nada. Entonces básicamente déjame golpear Control S para guardar todos nuestros cambios hasta ahora. Y quiero explicar este apartado. Entonces básicamente va a ser extremadamente sencillo de ajustar. El único equipo que le van a hacer es básicamente simplemente ajustar el ancho de nuestra imagen y poner nuestro contenido en el centro. Entonces básicamente haz lo mismo para el botón en sí. Entonces, antes que nada, ajustemos rápidamente nuestra imagen. Por lo que voy a usar mi imagen ajustada así. Y también voy a dar clic aquí y ajustarme a justo aquí. Entonces porque nuestra imagen mueve el poco hacia abajo, voy a hacer doble clic sobre ella y voy a moverla hacia arriba así para ajustarla. Entonces voy a posicionar mi contenido en el centro así. Todavía mantiene las mismas distancias y edición. Ahora sigamos con este botón posicionando al Reich, así. También voy a usar el hover por si tus clientes cambian de opinión y quieren usarlo así. Podemos ir al prototipo y simplemente dar clic aquí a ninguno, también. Desactivar este efecto de desplazamiento. Por lo que no queremos ese efecto hover. Y siempre puedes volver atrás y decírselo. De acuerdo, Entonces así es como se ve porque lo guardamos como componente. Por lo que una vez más, les muestro ambas opciones. Si recuerdas de la sección de héroes, desagrupamos el componente al estado que queríamos. Puedes ir por esa ruta o simplemente puedes desactivar estos efectos a partir de ahí. Y luego simplemente puedes desactivar ese flotante y ellos pueden elegir lo que quieran hacer con él. Entonces como dije, he hecho lo mismo por América y por Asia. Y ahora pasemos a esta sección. Por lo que este destino superior y el litio lo alinean rápidamente a aquí así. Déjame saltar dentro, ver mis flechas, y revisar rápidamente nuestros destinos, ver si están alineados correctamente. Ellos lo son. Entonces qué voy a hacer con estas flechas, porque obviamente no tenemos demasiado espacio aquí mismo. Puedo, por ejemplo, quitar de los destinos de escritorio, y simplemente puedo escribir en destinos, pero no voy a hacer eso. En realidad voy a poner mis flechas aquí mismo. Y voy a asegurarme de que estén centrados como lo hicimos arriba. Entonces voy a saltar dentro de mi flecha izquierda y la voy a mover justo por aquí. Yo voy a hacer lo mismo por una flecha de escritor como esa. Y veamos, por ejemplo, puedo posicionarlos para ser, veamos, 80 por ejemplo. O mejor aún, 60 porque no necesitamos que sean tan grandes. Entonces lo que vamos a tratar con este es bastante sencillo. Voy a hacer exactamente lo mismo que antes. Entonces lo que voy a hacer primero es golpear Control G en este, destinos de calidad top. Eso me gusta. Voy a hacer clic aquí en componente de grupo porque ya no lo necesitamos y no vamos a usar los hovers. Vamos a usar exactamente la misma sombra de gota en todos estos campos como lo hicimos arriba. Entonces lo que voy a hacer a continuación es saltar dentro y ajustar cada uno. Entonces, antes que nada, traigamos a estos dos aquí. Por lo que vamos a tener que tener cuatro columnas de ancho para cada una. Ahora, ajustemos estos. Entonces déjame esconder estos dos primeros. Voy a usar a Munson, Michelle. Y posicionarlo hasta aquí. Y luego finalmente voy a mover Sydney justo aquí, y luego Capadocia, lo voy a mover justo aquí. Ahora, vamos a traer estos de vuelta. Entonces, en primer lugar, voy a hacer clic en mis Maldivas y simplemente extenderlas hasta aquí. Haga clic en el fallecido Distrito de los Lagos, luego oculte estos para que no estropeen nuestro diseño. Por lo que en realidad podemos hacer click en los que están en la parte inferior. De esta manera se puede comer monstruo Michelle. Y como pueden ver, todavía tenemos algunos problemas con el texto. Por lo que está posicionado en el centro y asegurarnos que estamos en un centro como este. Por lo que ahí lo tenemos. Y voy a esconder estos dos y trabajar en el Sydney, encontrarlo y trabajar en la Capadocia así. Para que veas que tenemos algunos temas aquí mismo. Entonces veamos qué podemos hacer. Puedo poner, por ejemplo, chimenea de hadas abajo, sólo para que no tengamos esa palabra en el fondo. Y también voy a avanzar, por ejemplo, formaciones a la cima. Así. Rico en Irak permisos mantenidos, mantenían viviendas y lo voy a pegar aquí mismo, sugiere que mantengamos el mismo espaciado y las mismas distancias para todos ellos. Porque tenemos el contenido para cada uno de ellos y tenemos la carpeta llamada contenido. No voy a hacer porque si te acuerdas, tenemos el efecto flotante aquí mismo. Entonces solo voy a hacer doble clic aquí, seleccionar mi texto, hacer doble clic aquí. Y estoy basado en el texto de Maldivas. Y cuándo hacer lo mismo por esto? Basado en donde dice Lake District. Yo voy a hacer lo mismo aquí mismo. Lo basé ahí mismo, y todavía tengo algunos bichos. Entonces déjame guardar mi documento. Porque a veces XD, como puedes ver, está mostrando todo tipo de bichos diferentes. No sé qué pasa porque estoy actualizando get en cuanto vean actualizaciones. Entonces solo quería mostrarles que esto también puede suceder. Así que solo asegúrate de entender como puedes ver, algunos fallos aquí mismo. Entonces probemos esto. Si hago clic fuera y luego hago clic en volver a Toscana, por ejemplo, haga doble clic aquí. Todavía muestra esos temas, pero al menos me da la opción de trabajar en mis textos. Entonces solo copia y pega. Y finalmente para Capadocia, y vamos a copiar y pegar. Y ahí lo tenemos. Entonces lo que voy a hacer ahora es simplemente hacer clic derecho en grupo, hacer clic derecho en Desagrupar. Y obviamente los estoy poniendo dentro porque tenemos esa pila. Entonces por eso los estoy poniendo en un grupo y renombrándolos para que solo sepamos cuál es cuál. Por lo que ahora seleccionemos a estos cuatro. Mover un poco afuera y vamos a ver, creo que somos 29 porque ese es nuestro ancho de canaleta. Lo es. Y por último, saquemos a estos dos últimos del camino. Entonces voy a posicionarme en beat 2009 y asegurarme de que este scroll, grupo de desplazamiento esté justo ahí. Ahora voy a saltar. Entonces el prototipo va a mis flechas y ve qué tenemos ahí mismo. Por lo que en una flecha izquierda tenemos el hover. Voy a dar click justo aquí, luego usar non para poder eliminarlo. Y eso es básicamente todo. Entonces ahora vamos a hacer lo mismo porque tenemos destinos top. Voy a golpear Control K o Comando K para crear un componente. Y luego vamos a crear el estado 2. Y luego para que el estado lo haga, lo que voy a hacer es saltar dentro de aquí e ir a los destinos. Alinearlo aquí, así. Y vamos a crear un nuevo estado. Por lo que el estado tres, dentro de un estado 3 ir a destinos, haga clic y arrástrelos derecho hasta aquí. Y ahora vamos al prototipo de estado predeterminado, abre tus flechas, abre tus flechas botón derecho, punto de profundidad derecho, lo siento. Entonces en lugar del hover, vamos a salir a animar el estado para facilitar la entrada y 0.6 segundos van al estado a la izquierda en ese punto va a ir a un estado por defecto, así, justo en ese punto va a ir al estado número 3. Y finalmente podemos ir al número de estado t y usar nuestra flecha izquierda así. Da click ahí y ve al estado dos. Y finalmente, ahora las deudas terminadas, puedo golpear Save y podemos seguir adelante y un diseño, el viajero nos quiere. Por lo que estas secciones testimoniales. Entonces lo que realmente podemos hacer mientras está ahorrando es que podemos ajustarlo de una manera que podamos, por ejemplo, eliminar los números o incluso podemos mantener los números porque queremos mantener esa animación en marcha. Entonces podemos quedarnos con los números y podemos quedarnos con las flechas, pero podemos, por ejemplo, deshacernos de estas imágenes. Entonces si nos deshacemos de estas imágenes, entonces tendremos que reajustar cómo se ve todo. Entonces para hacer eso, Pasemos a los testimonios. Y voy a mover mi título de sección en el centro así. Y Dan y cuándo usar mis flechas y posicionarlas en este lugar. Porque si recuerdas, vamos a deshacernos de los efectos flotantes. Entonces saltando justo aquí, flecha derecha, me voy a deshacer del flotador, flecha izquierda. Yo me voy a deshacer del flotador también así. Y vamos a ver. Justo en ese punto es simplemente toque a la izquierda El punto DEP no está disponible. Entonces volvamos a Diseño. Y como dije, vamos a quedarnos con estos, pero para las tarjetas testimoniales, lo que voy a hacer es saltar dentro de esta llave única para borrar en mi imagen. Y simplemente voy a ajustar el ancho de mi tarjeta para escuchar y más mi texto en el centro. Y porque yo hice eso, todo este contenido va a seguir. Ahora para el texto en sí, voy a seleccionar los tres, asegurarme de que estén alineados al centro, asegurarme de que estén alineados al centro así. Y simplemente voy a asegurarme de que estén en un centro de mi tarjeta. Entonces voy a hacer lo mismo por este número 2. Pasemos a aquí. Y veamos cuál es el ancho de esta tarjeta. Es 678. Entonces trabajemos en nuestro texto. En primer lugar, asegúrate de que esté en el centro. Asegúrate de que esté centrado así. Entonces veamos, 6, 7, 8, presione Entrar. Y voy a mover mi texto ooh, el centro así. Y obviamente parece que lo hicimos con todos estos otros, 678, en realidad los vamos a mover a todos al centro. Entonces volvamos atrás, haga clic justo ahí, ajustemos mi texto. Y fui a saltar dentro, asegurarme de que estén centrados y centrados, alineados, centrados. Y una vez más, seleccionar estos dos hombres deben de texto está en el centro. Y por último, haces lo mismo por indecisión al módulo número cuatro. Entonces voy a asegurarme de que en el marion disidente de ellos sean prestamistas. Entonces déjame ir adelante y comprobar. 678 es el ancho de nuestras tarjetas sobre cuándo hacer lo mismo. Entonces 6, 7, 8, así. Y una vez más, porque nuestro texto está centrado y lo vamos a mover al centro así. Por lo que ahí lo tenemos. Lo único que realmente tenemos que hacer en este momento es mover las flechas y movernos bajo las tarjetas testimoniales ellos mismos. Entonces voy a mover rápidamente esto. Básicamente, vamos a hacer lo mismo. Entonces vamos a deshacernos de todas estas otras animaciones, excepción de estas. Entonces vamos a copiar título de sección, testimonios y flechas. Hit Control C. Acude a nuestro testimonio a, así que voy a golpear Control V y deshacerme de todo excepto del texto para enmascarar. Entonces voy a mover la máscara de texto justo arriba así. Rebaño lechero. Y para los propios testimonios, voy a poner el segundo aquí mismo. Sólo déjame comprobar si está alineado. Por lo que testimonial auto número 2. Lo es, lo cual es genial. Entonces veamos una vez más. No es nieve. Déjame moverlo sólo un poquito. Y en realidad voy a extender esto a línea de red láctea hacia fuera así que todo está bien. Y antes de seguir adelante, voy a volver a los testimonios de esquina estatal por defecto y sólo a ver si lo estamos, no lo somos. Ahora somos es la primera nuestra línea Lytton, comprueba rápidamente que no es así simplemente lo alinearé así. Entonces están lastimados no Vamos a seguir adelante y seguir adelante. Por lo que está comprobado. Y el número 2, y en realidad voy a copiar título de sesión y testimonios de éste. Y también las flechas Control C y van al testimonial 3, saltando aquí mismo, Control V, me voy a deshacer de estos tres y posicionar la máscara de texto justo encima de nuestras flechas para los testimonios, me voy a mover ellos sobre posición testimonial número 3, dos aquí. Y a ver si está alineado. No lo es. Ok, así que ahora lo es. Pero por alguna razón me está mostrando esto. Entonces vamos a incluir más demoler esto. Vamos a ver ahora. Ahora creo que funciona. Entonces va a ser bueno. Y por último, vamos a copiar este Control C y saltar al testimonial para el control V. Y quiero deshacerme de estos más, la máscara de texto justo arriba. Y para los propios testimonios, Vamos a mover el cuarto en así. Es un poco corto, pero va a funcionar porque no quiero volver atrás y ajustar todos esos anchos una vez más, para todos ellos, pero se obtiene la imagen. Entonces para el prototipo, voy a saltar. Por lo que el estado por defecto. Lo que tenemos justo aquí para las flechas veríamos. Entonces flecha derecha, tenemos puntos de toque derecho o testimonial de tap también, lo cual es genial. Pasemos a testimonial también. Entonces aquí vamos a usar nuestra flecha izquierda. Entonces tab auto animate, estado predeterminado, facilidad de entrada 0.6 segundos como suciedad, justo en ese punto va a hacer lo mismo, pero ve a testimonial como árbol. Entonces vamos a testimonial tres. Entonces en esta flecha, vamos a volver a testimonial a en esta, vamos a ir a forma testimonial. Y finalmente, pasemos a testimonial para n para ello, vamos a usar esta flecha para ir a un testimonial a mi papá estado predeterminado. Y vamos a dar clic, haga clic en previsualizar y ver cómo se ve todo. Entonces si nos desplazamos hacia abajo a nuestros testimonios, en primer lugar, vamos a revisar nuestros destinos principales y ver que se ven bien. Por supuesto, si lo deseas, puedes quitar el destino, lo siento, el texto superior, alinear los textos de destinos a la izquierda. Y simplemente hay usar las flechas como siempre hicimos con este diseño. Pero creo que esto funciona bien de cualquier manera. Ahora para estos testimonios, si hago clic aquí mismo, se puede ver que todavía tenemos la animación, tenemos los testimonios, así que todo funciona como debería. Por lo que ahora pasemos a esta sección. Y para esta sección, obviamente porque nos estamos deshaciendo de nuestros efectos de color, lo que voy a hacer es básicamente poner todo esto dentro de un grupo y una copia mi texto aquí mismo, pegarlo aquí mismo. Voy a hacer lo mismo por este control G. Copia mi texto, basado en, dentro de esto. Y por último para el viaje de esquema y cuándo usar copia, los voy a seleccionar todos. Golpea Control G y base aquí mismo. Entonces lo que voy a hacer con estos es antes que nada, los voy a desagrupar porque ya no necesitamos esos efectos flotantes. Y por eso los puse en estas carpetas. Y para este, vamos a habilitar la pila. En realidad voy a usar esta pila así. Y voy a usar estos ajustes. Entonces para descartar, Vamos a ver. Por lo que viaje de bienestar. Estamos, vamos a ver 420 a la altura. Entonces lo primero es lo primero, ajustemos escritorio a 420. Entonces voy a usar estos y ajustar y altura a 420 así. Y el precio y el esquí obviamente van a dar seguimiento. Entonces movámoslos así y veamos de dónde están de la muerte desde aquí. Entonces esto es 40 abajo. Entonces ajustemos lo mismo para las muertes. Entonces alinearlos así, 1234, así que por lo tanto hacia abajo, lo cual está bien. Y ahora ajustémoslos rápidamente en ancho. Entonces simplemente lo voy a ajustar así. Ve a los cruceros. Selecciona los tres, ajústalos en ancho así. Y por supuesto, si una de tus imágenes necesita escalar, por ejemplo, esta si quieres enfocar un área diferente o ésta, simplemente puedes hacer doble clic porque no importa, porque ahora no tenemos más deuda que esas efectos de flotar. Entonces básicamente eso es lo que hemos hecho hasta ahora. Con nuestros socios. Yo lo voy a posicionar en el centro y con estos logotipos, por ejemplo, lo que puedo hacer es agrandarlos un poco, en realidad lo movió justo alrededor de dos aquí. A lo mejor Nan Dan simplemente recortar esto hasta aquí. Y ahora los usuarios pueden usar sus dedos para desplazarse hacia la izquierda y hacia la derecha porque una vez más, están en los tamaños de la tableta. Por éste. Simplemente hagamos lo que hicimos anteriormente. Así que simplemente ajusta nuestra imagen así. Asegúrate de que esto esté alineado al borde que esté. La imagen se ve bien, así que no hay necesidad de cambiar eso. Y para el texto, simplemente alinearlo al centro así. Y vamos a ajustar nuestro botón, asegurarnos de que lo movemos a aquí, mantenga presionado Shift, y luego hay Hover, hacer lo mismo así, volver al estado predeterminado. Y ahora por fin, lo que voy a hacer, elige el botón, ve al prototipo y simplemente deshazte de esta portada usando ninguna. Por lo que no sabe a dónde debe ir y no va a crear ningún tipo de animación. Por estos. Es exactamente la misma historia, así que simplemente alinearlos así. Voy a usar mi texto una vez más, posicionarlo aquí mismo. Y quizá incluso pueda ir un poco más pequeño con este texto, así que está a las 24. Entonces veamos qué podemos hacer aquí mismo. Podemos, por ejemplo, ir con 18 y lo que usamos ahí mismo. Entonces este color, así que una vez más, 18, este color, y simplemente alinearlo a justo aquí. Creo que eso se ve bastante bien. Ahora para este, simplemente ajustémonos para escuchar y los usuarios podrán desplazarse a la izquierda y a la derecha. ¿ Esto es a la línea de cuadrícula? Lo es. Por último, para este, y esto es un poco complicado por lo que puedes reducir el texto que has puesto dentro de aquí. Entonces voy a sencillamente, en primer lugar, ajustar nuestra posición de texto al centro así. Entonces voy a ajustar todo mi texto, asegurarme de que vaya a los bordes de la línea de cuadrícula así. Asegúrate de que esto esté en el centro. Y voy a hacer doble clic aquí mismo controlar V y pegar. Un poco menos de texto y luego antes, así que simplemente corté un corte ese texto hacia abajo un poco, sólo para que no sea demasiado abrumador leer en su dispositivo tablet. Y ve al prototipo. Voy a seleccionar Ninguno de aquí. Y volver al contenido del diseño. Y luego para las preguntas comunes, en realidad los vamos a alinear aquí mismo. Lo que en realidad puedes hacer es, dejémoslo para el siguiente video porque quiero saltar con un poco más de detalle sobre eso. Pero básicamente lo que vamos a hacer es por cada uno de esos, vamos a hacerlo, y empecemos con el estado por defecto. Ahora. Voy a mover mi botón Cerrar todo el camino hasta el borde. Entonces en este, y lo voy a posicionar aquí mismo. Pero como puedes ver, sigue moviendo mi divisor, sigue cambiando eso. Por lo que 6, 8, 2, 4, todos estos divisores. Y puedes saltar dentro, abrir todas tus carpetas, divider 60 para hacer ese salto dentro de este 162, y finalmente saltar dentro de este último 1682 y rebaño lechero. Pero como puedes ver, ahora que si cambias el divisor, no movió el icono. Entonces por eso sigo diciendo para estos divisores, Es, creo que una opción mucho mejor para usar. En estas líneas se agregan formas. Entonces veamos dónde ponemos al primero en la línea. Haz tanto más con un solo píxel en. Y hagamos lo mismo por éste. Por lo que un píxel en. No voy a seleccionar esto. Y puedes ver que son un poco complicados de seleccionar solo porque están fuera de nuestro tablero de arte. Entonces son las preguntas comunes. Mi verdadero protegía el primero que hicimos. Entonces muévelo divisor, eso está bien. Icono de ropa. Entonces voy a usar mi tecla Mayús y usar mi tecla Mayús para esta simplemente para empujar. Entonces lo voy a usar en esta posición única aquí mismo. Voy a acercar dos veces y voy a usar este. Entonces realmente no sé qué está pasando hoy. Adobe XD realmente no, quiere trabajar conmigo. Entonces ahora está bien. Y por último para este, vamos a dar click en él. Entonces esto, una vez más, voy a usar mi tecla Mayús. Por lo general no tengo tantos bichos ni tengo pocos aquí y allá, pero porque estoy grabando esto, probablemente sea por eso. Entonces ahora que tenemos todos nuestros textos, tendremos que ajustarlos. Y lo vamos a hacer en el siguiente video y básicamente rematar este diseño con estas secciones en la parte inferior. Entonces te veré ahí. 47. Crear diseño responsivo: Adelante y finalmente terminemos esta página. Entonces como dije, lo que vamos a hacer es que tenemos que ajustar el texto para todos ellos. Entonces, para hacer eso, simplemente voy a esconder todos estos de abajo. Hago esto o simplemente reduzcamos la obesidad se conocen solo para que este diseño en la parte inferior se quede como está y nos dé suficiente espacio. Entonces voy a traer esto de vuelta así. Y voy a usar la función de altura automática y cuándo simplemente traerla así. Y debido a que había dos líneas de texto, lo vamos a seguir manteniendo en 202 veces. Y luego voy a traer el siguiente y luego traer esto. Y debido a que tenemos tres líneas de texto, voy a dar clic aquí y ajustarme y asegurarme sólo de mantener tres líneas de texto como gusano. Entonces trae esto de vuelta a aquí. A ver si Dan encaja. No simplemente trae este sensor. Todavía tenemos tres líneas, Texto, Haga doble clic 0 aquí mismo para deshacernos de él. Y luego ir a los socios. Y ajustemos eso. Por lo que trayendo esto, haga clic aquí. Ajusta esto y asegúrate de tener dos líneas de texto. Y recorridos turísticos. O vayamos solo viajes. Entonces tenemos que deshacernos de este texto aquí mismo, viajes. Y vamos a traer ese cerco ahí mismo. Y por último, por los viajes personalizados, y es injusto y ese. Por lo que necesitamos tener tres líneas de texto click aquí mismo. Y veamos con qué se nos ocurre. Por lo que se va a troll condiciona alimentos. En tu viaje. Cerremos esta última línea y hábito lácteo. Entonces esto es lo que vamos a estar haciendo por todos ellos. Entonces sólo recuerda, cerramos éste. O aún mejor, aún podemos moverlos así. Entonces vamos a comprobar lo que teníamos aquí mismo en términos de espaciado. Entonces entre estos dos, tenemos 60 y entre el texto y el divisor en la parte inferior tenemos 40. Entonces volvamos ahora al estado por defecto y veamos qué se nos ocurre para que podamos copiar todos ellos control C. Y podemos irnos, está protegido mi viaje? Entonces se va así. Eliminemos estos viejos. Y vamos a ver es métrica protegida. Vamos a traer esto de vuelta. Más del divisor hacia abajo, hazlo 40, cierra este dentro y mueve el resto de ellos a 60. Al igual que esto. Y ahora, como probablemente adivinen, voy a volver al estado por defecto. Selecciona Todo y abajo Control C, vuelve a la política de cancelación. Así que ciérralo, encuéntralo. Entonces tráelo de vuelta. Voy a mover mi divisor hacia abajo. Asegúrate de que sean 40. Cierra esto, selecciona estos dos en la parte inferior y muévelo así. Ve al estado por defecto y ni siquiera tengo que hacerlo porque ya lo tengo copiado. Hicimos política de cancelación. Lo hicimos es mucho reproductivo. Acude a elegir a tus socios, Control V pegar en todo. Y por último, mientras estoy aquí, un gol aquí mismo a viajes personalizados y basados ahí también. Por lo que se puede ajustar un poco más tarde, vamos a elegir a sus socios, haga clic aquí. Entonces socios, voy a traer esto de vuelta. Ahora voy a mover mi divisor. Asegúrate de que sean 40. Por último mover viajes personalizados hacia abajo. Asegúrate de que sean 60, y luego finalmente ve a viajes personalizados y abre ese último hacia arriba. Así que viajes personalizados, trae esto de vuelta, mueve tu divisor así. Entonces ahora sigamos adelante y animémoslo. Entonces vayamos al estado por defecto. Dentro de nuestro prototipo se puede ver que todavía los tenemos, lo cual es genial. Entonces voy a dar click aquí mismo. Por lo que tenemos tab o China Made Easy ahora 0.6 segundos, lo cual es genial. Ahora sigamos adelante y pasemos al siguiente estado. Por lo que voy a es mi viaje protegido, voy a ir a tab o a animar, facilidad de entrada, salida, volver al estado predeterminado, fácil y salir 0.6 segundos y cuándo hacer clic aquí mismo. Entonces la política de cancelación, voy a ir a la política de cancelación. Socios. Acude a los socios y finalmente, viajes personalizados. Ir a viajes personalizados. Política de cancelación ¿está protegido mi viaje? Por defecto, cancelación, perdón, es azúcar protegido métrica para madurar protegido, y esto debería ir a defecto. Obviamente, es mucho difícil, mucho más difícil y mucho más tiempo cuando estás hablando como yo. Y esto obviamente va a ir mucho más rápido cuando lo estás haciendo por tu cuenta. Preguntas comunes está protegida métrica? Se va a ir a aquí. La política de cancelaciones se va a ir a aquí. Elige tu pareja va a ir a default. Y por último, cómo funcionan los viajes personalizados va a ir a Viajes personalizados. Y ahora sigamos adelante y tratemos con el último estado. Por lo que esto irá hasta aquí. Cancelación va a ir a la política de cancelación. Elige a tus socios. Por último, este último va a volver al estado por defecto. Y una vez más, parecía equipo trabaja con todos ellos. Entonces básicamente en cualquiera de estos tamaños, puedes decirle a tu cliente que tienen que hacer clic en algún lugar un poco afuera solo para hacerles saber que se superponen entre sí. Entonces vayamos al estado por defecto aquí mismo, así. Y ahora trabajemos en nuestro boletín. Entonces veamos qué podemos hacer manchar un bucle. Pero por ejemplo, para este y se retrasen a posar. A ver. A lo mejor podemos poner eso en el centro así. Trae esto aquí mismo. Y luego para el botón de suscripción, podemos ir al prototipo y simplemente podemos deshacernos del hover. Volver a Diseño. Y para la entrada en sí, Vamos a traerlo de vuelta. Entonces usemos 84. Entonces, en realidad, vayamos así. Ahora vamos así. Y luego para este botón, lo que podemos hacer es simplemente acercar un poco. Y ahí lo tenemos. Y simplemente lo están trayendo aquí. Haz lo mismo por el Hubbard aquí. Entonces es 53 porque quiero mantener este mismo texto. Si no lo haces, simplemente puedes escribir el correo electrónico aquí mismo y luego mantenerlo en eso. Estamos en 60 y aquí mismo estamos en 150 por eso. Y ahora por fin, para terminar esta página, Empecemos a trabajar en nuestro pie de página. Pero antes de que lo hagamos, voy a hacer doble clic aquí mismo y expandir esto todo el camino hacia abajo solo para que tengamos suficiente espacio. Entonces lo que voy a hacer para el pie de página es que voy a empezar con lo obvio. Voy a traer a estos dos de vuelta. Voy a traer mi información de pie de página abajo en un centro como este. Y básicamente los voy a acumular un poco más cerca, así que nada demasiado importante. Primero tratemos con nuestro divisor. Entonces lo voy a traer de vuelta aquí mismo. Ahí mismo. Yo voy a hacer lo mismo por aquí. Simplemente mantenga presionada la tecla Mayús. Entonces para estos, vamos a alinearlos así. Ve con el de la izquierda y ve. A lo mejor podemos hacer solo pensar. A lo mejor podemos traer todo el medio. A ver, Vamos a usar Invierno posicionarlo en el centro. Vayamos con posición de bienestar. Y aquí mismo cruceros en el centro y esto aquí mismo. Entonces Derek Harris y finalmente cuatro D's sobre lo que creo que deberíamos hacer es por ejemplo, para el texto de fondo, quizá podamos usar este. Posiciona esto en el centro, así. Y luego llevar estos dos a otro grupo. Y luego puedo usar la pila ahí y usar esta pila posicionada aquí mismo. Y veamos qué podemos hacer. Por ejemplo, 40. A ver. Con éste, puedo ir con 40 así y luego simplemente extenderlos ahora. Entonces Turno 1, 2, 3, 4. Vamos con el fondo para los bosques. Por lo que turno uno es todavía quieren que se muevan. Entonces vamos con todo el tanque. Entonces. El informante golpeó Control D turno 1234. Expande mi superposición de color y mi imagen hacia abajo. Voy a deshacerme de esta copia y luego volver aquí mismo. Y para este de abajo, voy a, por ejemplo, ajustarme a aquí. Haga doble clic en el interior, mueva esto derecho a aquí para que se recuperen, pie de página se completa. Obviamente una última cosa con la que vamos a tratar aquí mismo es esa imagen de fondo. Tan localmente concisa y posiciona a esta chica en el centro. Trae esto de vuelta, haga doble clic aquí. Y simplemente cerrar toda esta página por completo, así. Y ahí lo tenemos. Ya hemos terminado de trabajar en este tamaño. Por lo que esto se duplicó de tamaño. Y lamento que estos videos sean demasiado largos, pero realmente quiero meterme en tantos detalles como sea posible, solo para darles todas estas opciones diferentes o opiniones diferentes, como lo hice, por ejemplo, por estas flechas aquí mismo y todas estas otras flechas. Entonces quiero darte ambas opciones y luego decides qué opción funciona mejor para ti, tu escenario, tu proyecto, tu cliente, dependiendo de tu tiempo que tengas en este proyecto, dependiendo del presupuesto que tengas en este proyecto. Así que solo asegúrate de familiarizarte con todas estas diferentes opciones. Porque podría parecer la opción obvia, como por ejemplo, esta flecha de aquí mismo, o simplemente lo haré. Pero confía en mí, en algunos casos, no tienes la opción de hacer eso. No tienes la capacidad de hacer eso. Entonces tienes que hacerlo al revés. Como te mostré, por ejemplo, con estas flechas y este botón para ese asunto, porque lo estamos desagrupados también, también se asegura de usar siempre puntos de toque. Porque si recuerdas aquí mismo, si no usáramos el punto tabulador porque tenemos la animación dentro de la animación, no funcionaría, por lo que realmente no seríamos capaces de transitar. Y estos, esta navegación abierta, por ejemplo, a ese segundo estado de su navegación Doppler si no usamos el punto de toque en sí. Por lo que siempre asegúrate de prestar mucha atención a todos esos detalles. Y como puedes ver, pila está funcionando realmente bien aquí para nosotros porque aún conserva 150 para todo. Y por cierto, simplemente puedes hacer clic aquí. Vuelve a aquí, como hicimos por todas estas etiquetas. Y si nos desplazamos hacia abajo, se puede ver el espaciado entre todos nuestros artículos. Y entonces simplemente puedes ajustarte a aquí. Y va a ajustar el espaciado por igual, en todas partes o como dije varias veces, puedes usar el espaciado diferente para todos tus artículos. Entonces eso es todo para este tamaño, como dije en la próxima serie de videos, vamos a abordar el tamaño móvil, que va a ser de tamaño final. Y después de eso, voy a compartir con ustedes cómo empezar a compartir con sus clientes y desarrolladores y compañeros de equipo. Y luego finalmente, vamos a llegar a exportar opciones. Entonces te veré ahí. 48. Crear diseño responsivo: Sigamos adelante y terminemos nuestro proceso de diseño receptivo creando un tamaño móvil. Y como dije, el tamaño del móvil va a contener probablemente la mayor cantidad de cambios. Entonces sostengamos nuestra vieja llave y duplicemos ésta así. Y yo voy a hacer es lo mismo que antes. Copia este texto, haz doble clic aquí, y voy a eliminar este texto hasta aquí. Entonces vamos a tener cuatro columnas. Van a ser 30, 60, 120. Entonces, vamos a desplazarnos un poco hacia abajo. Por lo que cuatro columnas. Entonces volveré a revisar, 30, 60, 120. Entonces hagámoslo en 3061 y esto va a ser 203061. No sé por qué sigue haciendo eso. Como puedes ver, es realmente complicado, pero este es el problema. Olvidé cambiar. El anchuras son 375, sahib tiene 375. Y vamos a comprobarlo ahora. Entonces 30, 60, 120, así 3061, y finalmente 20. Por lo que ahí lo tenemos. Tan pronto como lo arregles, funcionará muy bien. Entonces empecemos como de costumbre con estos de arriba. Entonces lo voy a hacer, lo voy a hacer es mover el logo aquí mismo. Y también voy a reducir a ambos de esta manera, por ejemplo. Lo que también voy a hacer es traer mi icono de menú. Empujarlo así. Y también vamos a asegurarnos de que esté ahí mismo, así. Por lo que dentro de nuestro estado por defecto, lo voy a traer, dentro. Entonces déjame abrirla. Y vamos a ver, puedo bajarlos a 40, por ejemplo, es a tiempo que. Y entonces puedo usar mi punto Tab, que está todo el camino justo aquí, y puedo extenderlo, ponerlo aquí y justo aquí. Tráelo adentro. Tan solo un toque como la suciedad. Y lo que realmente voy a hacer es hacer la animación una vez más porque es mucho más simple que esto. Entonces desagrupar componente Control G. Y lo voy a llamar icono de menú una vez más. Y vamos a posicionarlo más o menos por aquí. O mejor aún, podemos ir a este filo para que tengamos un poco más de espacio para jugar aquí mismo. Entonces Tecla de control y puedo crear un nuevo componente, pero porque tenemos el mismo nombre, y lo voy a hacer es ir menu, icon, mobile, luego pulsa Control K. Y luego nos va a mostrar, todavía nos mantiene de editarlo aquí mismo. Entonces tendré que editarlo aquí mismo. Entonces tendremos que saltar dentro. En, crear, hacer clic en estado. Dentro de mi estado clicado, como de costumbre, traeré esto aquí mismo. Trae esto aquí mismo. Ocultar primero, tercero 1 clic año de antigüedad. Bájala al centro, toca dos veces para bajarla a 0. Y luego cambia esto a, por ejemplo, 45. Cambia esto a 45 también. E ir del estado por defecto a cobrar estado. Creo que funciona bien. Voy a golpear Eliminar. Vuelve a aquí, mira cómo se ve dentro. Así que el estado predeterminado, estado clicado, eso funciona bien. Y vamos al prototipo. Y veamos qué tenemos justo aquí. Entonces voy a hacerlo, vamos a ver. Haga clic en la pestaña Descargar, animar automáticamente. Estado es inout 0.4 segundos. Cambiemos esto para facilitar dentro y fuera 0.4. Si recuerdas que esto va un poco más rápido que toda la animación, entonces ve al estado clicado. Yo voy a hacer lo mismo. Haga clic aquí y vaya al estado predeterminado 0.4. Eso está bien. Y por último, vamos a previsualizarlo rápidamente y puedes ver lo pequeña que es nuestra ventana de vista previa ahora. Entonces cuando hago click justo aquí, lo siento, tengo que cambiarlo para estar aquí. Entonces hagámoslo primero antes de echar un vistazo a esto. Entonces primaria predeterminada ahora borra Voy a reducirla a 375 como deuda. Y yo voy a ir nav primaria, voy a ir, vamos a ver nav secundaria. En realidad, vamos a extender nuestro desenfoque para que pueda ver lo que estoy haciendo. Ampliado hasta aquí por ejemplo. Y veamos qué estamos haciendo. Entonces, ¿dónde está el punto de corte justo aquí? Entonces en realidad puedo bajarlo sólo por ahora. Y vamos a ver lo que realmente vamos a necesitar aquí mismo. Entonces secundaria ahora lo voy a traer. Voy a traer mis elementos de menú. Dan. Voy a llevarlos al centro, asegurarme de que estén un poco menos abajo. Entonces Turno 1, 2, 3, 4. Y dentro de ellos porque estamos usando stack, los voy a reducir a 40 por ejemplo. Por lo que son 40 entre cada uno de nuestros artículos, como pueden ver. Por último, voy a traer esto de vuelta a 40 también. Y uno que voy a hacer aquí porque no tenemos suficiente espacio. Simplemente los voy a desagrupar. Pero llámenlo secundario nav. Entonces copia hace en el control de grupo G para agruparlos y luego convertirlos en una pila como esta. Asegúrate de que estamos en un centro y asegúrate de que somos un 40. Para esta pila o nav secundaria, también voy a usar 40, pero por ejemplo, vamos a bajar a 60, sólo para que tengamos un poco más de espacio. Por último, para nuestro habilitador primario, no lo necesites para ir todo el camino hacia abajo para atreverse. Entonces, por ejemplo, podemos cortarlo en algún lugar por aquí. Entonces vamos con 100. Por ejemplo. Veamos 10, 5, 1, o 2. Cientos, por lo que rebaño lechero. Entonces lo que voy a hacer obviamente es que los voy a traer a todos. Entonces Control C, haga clic en estados, voy a Control V, luego baje esto, así que escóndelo. Voy a ir a mi menú de navegación primaria ahora más bilis click justo ahí y luego ir a mi estado predeterminado y voy a esconderlos todos. Por lo que nav secundaria y elementos de menú, voy a bajarlos a 0. Desenfoque de nav primario. Voy a llevarla hasta 1, así en altura. Y entonces lo que voy a hacer es usar mi prototipo. Entonces tenemos el prototipo ahí mismo, clicado. Nos trae de vuelta porque lo guardamos en el ícono del menú. Entonces si lo abro, tenemos los puntos de tap del menú. No lo cambiamos para simplemente cambiar el espaciado para ello y solo para colocarlo. Entonces veamos si el punto de tabulación del menú está justo aquí. Veamos que está ahí mismo, lo cual es genial. Ve al hit de estado predeterminado Preview, y veamos con qué estamos trabajando aquí mismo. Entonces haga clic. Tenemos esa gran animación. Entonces veamos el estado predeterminado, estado clicado y esto está cambiando. Entonces algo no está bien, aquí mismo. Vamos a comprobarlo. punto de tap del menú de navegación principal nos lleva al estado clicado. Y click state nos lleva al punto cercano primario, punto minitab. Cuando hago click justo ahí, nos lleva al estado por defecto, ¿de acuerdo? Así que facilidad en fuera 0.6 segundos. Veamos si ese es el caso de la primaria. Entonces 0.6, como se puede ver, eso es genial. Entonces ahora cuando golpeo la vista previa, debería funcionar bien. Ahí lo tienes porque no estaba conectado. Y Dan, cuando hice clic en él, simplemente animó el ícono en sí sin todos estos otros. Entonces sigamos ahora y voy a volver al diseño aquí mismo, y voy a trabajar en mi imagen de héroe en primer lugar. Entonces veamos qué podemos hacer primero, voy a saltar dentro de aquí y traer todo esto de vuelta. Al igual que así. Y porque es mucho más fácil. Y luego ir a mi héroe imagen por defecto estado. Voy a traerlos así. Y rebaño lechero. Y por último, número de imagen para traerlos así. Por lo que todos se ven bastante coherentes. Y no creo que necesitemos demasiado de este espacio, pero vamos a explorar y ver qué podemos hacer. Entonces lo primero es lo primero, este texto obviamente va a necesitar ser mucho más pequeño. Entonces para esta primera, vamos a usar 18 para este top one. Por lo que tiene máscara de texto de imagen de héroe del estado por defecto. Entonces para este texto, tendremos que ir con 18. Cambiémoslo a 18 y luego azul principal y veamos qué tenemos aquí mismo. Entonces lo voy a mover a 10 por ejemplo. Y para éste, voy a crear uno nuevo de 80, como la suciedad. Y veamos, quizá no sea eso lo que quiero. A lo mejor puedo aumentarlo a 120 o en algún momento que Veamos. Creo que esto es realmente bastante pequeño. Entonces vamos primero de todo en realidad volver a veces yo en eso. Y luego traes a todos ellos al centro y ves con qué estamos trabajando? Mi papá y cuándo ir y traer mi botón también. Así. Colóquelo aquí mismo. Entonces veamos con qué estamos trabajando aquí mismo. Entonces voy a expandir estos porque si recuerdas, los extraíamos cuando matamos el interruptor flotante, como hicimos para todas estas flechas en la parte inferior. Entonces lo voy a mover aquí mismo. Entonces voy a The remove this porque no lo necesitamos porque ya no está ahí. Y luego selecciona los textos como el botón, asegúrate de que esté en el centro. Entonces voy a mover mis flechas para estar también en el centro. Y veamos por la distancia, porque eran 18. Ahora bajemos a 60, por ejemplo, n, Esto debería ser un poco más pequeño, pero empecemos a trabajar en ello también. Entonces, por ahora, lo que voy a hacer es cambiar el texto. Entonces veamos si escondemos nuestro nav primario. Ocultemos nuestro nav de fondo para que no nos distraiga. En realidad, no tenemos que hacerlo porque está abajo. Entonces para nuestra imagen de héroe, voy a primero de todo, hacer doble clic en mi Beijing, clic aquí y luego ir 120 por ejemplo. Funciona, pero no creo que vaya a funcionar para su gada. Entonces si vamos con 80, creo que es un poco pequeño. Vamos a ocuparnos de esto. Entonces no lo sé, no me gusta demasiado. Por lo que son totalmente 100 para este. Creo que va a estar bien. A ver 20. Juguemos con estos otros. Entonces vamos a ver quién dugata. Entonces, antes que nada, traigamos nuestra mezquita para que podamos cerrarla bien. Al igual que esto. Voy a posicionarlo así sólo hasta los bordes de nuestros textos así. Entonces voy a traer mi segundo texto y lo voy a ocultar C sólido, y esto es 100. Entonces vamos a seguir adelante y crearlo aquí mismo. Entonces ocultemos el texto número 1. Entonces me voy a ir con París. Haga clic aquí y elija 100. Ahí vamos. Voy a dar click en este y elegir 18 y luego ir azul principal. Y una cosa más que quiero comprobar es la distancia entre estos dos. Entonces creo que puse 20 en hábito árabe. Entonces escondátelo. Y voy a mostrar estos, asegurarme de que estén centrados como esa posición, este ciervo. Y luego finalmente traer el texto de París a una distancia del 26 1789, 120, así. Ahí vamos. Y veamos, esto es 18, esto es 100, que está bien, y luego simplemente ocultarlo y traer el texto número 3. Entonces muéstralo y luego tráelo. Voy a dar click en este. Entonces una vez más, estamos a los 18, posición azul en están justo ahí y esto va a ser 100. A ver si funciona. Hace 17, 18, 20 así. Y lo último que quiero hacer es cambiar un poco nuestra máscara porque va a cortar nuestros textos haggadah para que pueda cambiarlo de borde a borde. Entonces de aquí a aquí arriba su ego. Y finalmente lo que puedo hacer es traer todo mi texto. A ver. El número tres es bueno. El número dos es bueno. número uno no es bueno porque tenemos que cambiar esto a este azul. Entonces, antes de seguir adelante con nuestros textos, lo que me gustaría hacer es reducir la altura general de nuestras imágenes. Entonces lo que voy a hacer es seleccionarlos a todos porque se puede ver dónde van y tal vez mudarlo a algún lugar, algo por aquí tal vez. Ahora traigamos nuestra navegación principal. Podemos ir con los textos, así que mezquita texto y podemos mover nuestra máscara de texto hacia arriba. Y esto mantenga presionada la tecla Mayús y luego simplemente use, por ejemplo, veamos ¿dónde termina? Justo por aquí. Muévelo hacia abajo AT, y luego mueve el resto de ellos AT. Entonces veamos, ¿dónde está nuestra mezquita de texto aquí es 80, y luego estos son 60. Si seleccionamos nuestro botón flotar justo aquí estamos en 60, lo cual es genial. Y lo último que quiero cambiar es esta flecha simplemente moverla aquí y muesca y este solo un píxel aquí. Ahora que eso está terminado, lo que vamos a hacer es animar al resto de ellos. Pero antes de que hagamos eso, todavía no me gusta cómo se ve esto abajo. Entonces voy a hacer un duplicado de mis flechas y bajar 80 píxeles y luego traer todo esto de vuelta en una vez más aquí mismo. Entonces donde corta con nuestras flechas, entonces voy a quitar la copia de nuestras flechas. Y ahí lo tenemos. Por lo que ahora tenemos imágenes de héroes mucho más concisas. Entonces lo siguiente que quiero hacer, porque obviamente vamos a reanimar todo el asunto es jugar con nuestras imágenes. Entonces nuestra primera imagen, realidad voy a ajustarme a algo como esto. A lo mejor, veamos qué ángulo es mejor. A lo mejor éste realmente lo esconda. Entonces haz el otro por el París. Entonces voy a dar clic aquí y luego simplemente usar este. Así, o tal vez incluso más hasta aquí sólo para que podamos ver que es, es un poco más raro. Y por último, este tercero, lo que quieras, voy a poner a estas personas en este patio, por ejemplo, en segundo plano. Y ahí lo tenemos. Entonces lo voy a traer todo y lo voy a llamar, Vamos primero a ponerlo en grupo. Va a ser mucho más sencillo para nosotros. Así imagen de héroe, cuándo llamarlo héroe imagen móvil. Y luego desagrupa este componente, pulsa tecla Control. Y para este primer componente uno que voy a hacer es obviamente ocultar mis dos textos hacia abajo. Entonces los voy a sacar del camino. Está bien por aquí, así que está bien siempre y cuando no sean visibles para aquí. Entonces vamos a crear estado adicional y llamarlo, por ejemplo, llamémoslo un virus. Y para el París, Vamos a mezquita de texto. Mueve nuestro segundo texto dentro. Asegúrate de que esté alineado como dat. Mueve nuestro primer texto fuera de la ballena y la suciedad y crea otro texto y otro estado llamado datos. Y para ello obviamente, mueve nuestro tercer texto en. Yo lo hice. Y más segundo texto afuera. Yo consigo. Por último, vamos a animarlo. Entonces ve al prototipo, ve a la imagen del héroe, y cuándo ir a las flechas, punteo de punto de flecha derecha, vamos a ir a París, 0.6. Ve a París. Flechas. Izquierda nos va a llevar al estado por defecto y un derecho a nombrar nos va a llevar a tener datos. Y por último, esos mismos cuatro que independientemente. Entonces voy a dar click aquí mismo. Flechas, punto def izquierdo nos va a llevar a París. Y un punto de tabulador derecho no nos va a llevar a ningún lado porque ese es nuestro estado final. Ahora por fin, tratemos con las imágenes. Entonces en el estado por defecto, estamos mostrando Pekín, en el estado de París. En la sección de diseño, realidad vamos a ocultar este y mostrar París. Y en el estado Hagadah, vamos a esconderlos a ambos. Yo lo hice y solo le mostré a Calcuta. Por último, vamos a la edición de escritorio. A ver si funciona como debería. Aquí está. Para dar click justo ahí. Como puedes ver, va todo el camino hacia abajo, lo cual no me importa, puedes redistribuirlos si quieres posicionarlos a izquierda y derecha. Y alternativamente, también puedes bajar la altura de este texto y ponerlo para que sea así. Todavía tenemos el flotado aquí mismo para que podamos deshacernos de eso si queremos. Y lo voy a hacer en un segundo. Pero por ahora, simplemente exploremos estos y veamos qué tenemos. Y me gusta mucho cómo se ve esto. Por lo que antes de seguir adelante, vamos rápido, rápido, rápido chequear allí. Entonces ve al estado cliqueado y ve a decir nav secundaria y ve al prototipo. Vamos a deshacernos de esos efectos hover. No voy a ir a ninguna parte con ella. Lo mismo para éste, así que ve a ninguno. Y finalmente, lo mismo para este, ir a ninguna. Por lo que ahora no tenemos ningún efecto flotante en estos. Ahora por fin, para esta siguiente sección, lo que voy a hacer es realmente redistribuirlas bastante. Entonces en uno, por un lado, voy a tener destino y teclear abajo, voy a tener actividades. Y por debajo de eso vamos a tener búsqueda en sí. Por lo que puedes animar la búsqueda en este punto si quieres. No voy a hacer eso. Simplemente los voy a posicionar ahí mismo para el fondo. Ahora, como dije, lo voy a posicionar ahí mismo. Entonces es la búsqueda de viajes y cuándo moverlo realmente por debajo de destinos. Voy a alinearlo a nuestra cuadrícula así. Y en realidad voy a deshacerme de mi divisor. Destinos. Bg va a ir por aquí por ejemplo. Entonces en algún lugar del centro, tal vez aquí mismo. A ver. A mí me gusta. Después ve a las ciudades, destino al jinete y simplemente tráelo de vuelta. Sólo un toque. La máscara obviamente va a ser un poco más grande a algo como esto. Entonces voy a copiarlo obviamente todo Control C e ir al control estatal clicado V. Y vamos a ver, en realidad tendré que volver copia interrogando. Entonces no sólo elementos del interior de la máscara. Y quita el viejo un clic justo aquí y extiende mi máscara todo el camino hasta aquí. Entonces, lo que puedes hacer en realidad se extiende a más o menos por aquí, ir dos direcciones, bg, ¿dónde está Aquí? Se extiende hasta aquí, por ejemplo. Y luego simplemente expande nuestra mascota sólo ese poquito más. Ampliar esto hasta aquí y luego ir a aquí, y luego traerlo todo el camino hasta aquí. Por lo que toda esta sección es desplazable con estos tres elementos y luego los usuarios tendrán que tocar y luego desplazarse hacia abajo por todos estos elementos adicionales. Por lo que el estado por defecto. Ahora trabajemos en nuestro tipo. Voy a alinearlo así. También me voy a deshacer de mi divisor porque ya no lo necesito. Obviamente, voy a usar bg o todo el camino hasta aquí. Voy a ampliar nuestra máscara hasta aquí. Hasta puedo ir justo aquí hasta el final de la página. Realmente sí importa. Entonces veamos, para el genotipo, primero vamos a hacer lo mismo. Entonces vamos a mostrar, A ver, 123. Entonces mostrémosle tres de esos viajes. Ciérrelo realmente bien, atrévete. Y luego finalmente, veamos si ampliamos nuestro BG. Ocultemos primero nuestro botón Aplicar. Cbg y líneas van a mostrar corredor muy bien empapado, eso está bien. Ahora sigamos adelante y copiarlo. Vaya al estado clicado basado en borrar el viejo y simplemente extender esto hacia abajo. Muy bien, por aquí y ve con nuestra máscara y expande nuestra máscara hasta aquí, por ejemplo. Vuelve al estado por defecto y voy a usar mis actividades, posicionarlas aquí abajo. Veamos somos 20 por ejemplo, para este puedes posicionarlo para ser 40 si quieres. De verdad todo depende de ti. Voy a deshacerme de nuestro divisor porque ya no lo necesitamos. Actividades. Voy a ampliarlo hasta aquí y la máscara que voy a ampliar para escuchar porque simplemente estamos ajustando nuestro espacio ahora para las actividades mismas. Haz click rápidamente justo ahí y vamos a cortarlo a tres. Entonces justo por aquí. Ahí lo tienes. A ver, máscara VG, todo funciona bien. Entonces cópielo, vaya al estado clicado, Basándolo en, elimine el anterior. Y finalmente ampliar nuestras actividades en el camino hacia aquí, y ampliar nuestra máscara hasta aquí abajo. Por último, volvamos al estado predeterminado y usemos la búsqueda de viajes. Y lo voy a posicionar aquí mismo, asegúrate de que sean 20. Y tenemos fondo ahora Vg, que obviamente ya no vamos a necesitar. Entonces para la búsqueda en sí, lo que voy a hacer es ampliarlo aquí mismo. Y yo voy a, vamos a ver, usar el cierre. Vamos a traerlo, a ver cómo se ve. Colóquelo aquí 20 píxeles y luego reduzca el tamaño. Y en realidad puedo usarlos todos como este Control C. Entonces ve a mi estado clicado, pulsa Control V, elimino los viejos. Y simplemente voy a traer esto de vuelta y giré un poco así. Entonces ve entre el estado predeterminado y el estado de clic, y creo que está bien. Por último, para el botón Aplicar, puedo moverlo hacia aquí. Puedo asegurarme de que sean 20. Puedo ampliarlo hasta aquí y Derek lo tiene. Por lo que 20. A ver, este tamaño de texto está en 18, este es un 24. Entonces tal vez deberíamos incluso bajar esto a 18, asegurarnos de que sea blanco así. Y finalmente, agrupémoslos a todos como algunos. Pero también puede hacer es hacer lo mismo por este botón porque creo que es demasiado grande. Entonces vamos por el héroe, botón Hero. Explora ahora, simplemente ajustada para ser 18. Vuelve atrás. Asegúrate de que esté en el centro. Y lo que puedes hacer es en realidad, puedes hacer clic y copiarlo si quieres. Pero como pueden ver, lo aplicó muy bien en todos nuestros estados porque lo cambiamos en el estado por defecto. Entonces ahí lo tenemos, Eso es todo para esta sección. A lo último que quiero hacer es ajustarlo aquí. Entonces como pueden ver, estamos a los 26, así que tal vez pueda bajar a Turley y luego a los 40, sólo para que tengamos un poco más de espacio con el que jugar. Y finalmente, cuando golpee la vista previa, voy a agrandar esta posición en el centro. Entonces esto funciona como debería, lo cual es genial. Al hacer clic en este, te va a mostrar tres y puedes desplazarte hacia abajo si quieres. Y haces click en este. Es lo mismo que funciona muy bien. Haga clic en este. Funciona muy bien. Y finalmente, para la búsqueda, tenemos esta bonita animación y podemos aplicar filtros. Entonces eso es todo para este video, y eso es todo para estas secciones que son básicamente los bits más aburridos de todas. En el siguiente video, vamos a seguir adelante y rehacer algunas de estas otras secciones y les voy a mostrar lo que también podemos hacer. Por último, una vez que hayamos terminado la versión móvil y el tamaño móvil, vamos a abordar un poco este espaciado. Por lo que 150 para el móvil, obviamente es demasiado porque como puedes ver, hemos reducido el tamaño de casi todo aquí mismo. Entonces voy a hacer lo mismo para la versión móvil también. Entonces eso es todo para este video y te veré en el siguiente cuando vamos a seguir con estos cambios. 49. Crear diseño responsivo: Ahora sigamos adelante y sigamos trabajando en este diseño. Y empecemos con la oferta especial. Entonces vamos a hacer básicamente lo mismo que hicimos ahí arriba. Entonces para esta primera, lo voy a reducir a 100, poner en casi negro. Y para este segundo voy a usar 18 y luego usar gris oscuro. Voy a asegurarme de que ambos estén centrados y luego los centren así. Porque ahora no lo hago no soy capaz de encajar físicamente el texto dentro. Voy a ir aún más lejos. Entonces voy a ir con 80 por ejemplo. Y luego usa 64, la distancia. Creo que eso va a ser extranjero o no. Vayamos hasta con 40. Entonces esto es, este es 18 y esto va a ser 80. Y ahora porque este es nuestro nuevo, simplemente voy a dar clic aquí para añadirlo. Y para todas estas secciones vamos a usar 80 y después 18. Entonces sigamos adelante y si hago clic aquí mismo, todavía se puede ver que sigue manteniendo 150 distancia. Entonces qué vamos a hacer con éste, obviamente porque ahora tenemos estas tarjetas y tenemos esta oferta de primer y último minuto. Lo que voy a hacer primero es jugar con estos. Entonces antes de que incluso nos pongamos en marcha, quiero golpear rápidamente a un contenido, ofertas especiales, móvil así. Y obviamente voy a desagrupar este componente. Ahora por ahora, voy a usar y pestañas. Y voy a hacer algunos cambios aquí y allá. Entonces voy a posicionar este cronómetro aquí mismo a la parte superior y luego usar, por ejemplo, 10. Y luego simplemente voy a usar el primer minuto. Veamos qué podemos hacer. Posiciónelo aquí mismo. No creo que eso funcione. Entonces usemos, por ejemplo, 18 voltios. Hábito lácteo de 18 voltios. Funciona mucho mejor y luego simplemente agrégalo a Estilos de carácter. Ahora, hagamos lo mismo por este, así que alinéelo. Y voy a, en primer lugar, ajustar nuestro icono a la parte superior es el 10. Haga clic aquí, y vaya con 18 voltios, y luego simplemente cambie el color a gris claro. Voy a usar un texto de último minuto ahí dentro. Ya lo tienes. Ahora lo que voy a hacer es crear el rectángulo y voy a asegurarme de que tenga dos columnas de ancho. Yo lo hice. Voy a seleccionar a los tres posicionados en el centro y simplemente asegurarme de que encajen justo aquí. Voy a quitar mi rectángulo, luego hacer lo mismo aquí mismo. Por lo que selecciona un rectángulo como este, se asegura de que todos estos estén en el centro. Selecciona los tres. Y ahí lo tienes quitado ese rectángulo. Y si simplemente lo alcanzo a la vista, asegúrate de que estén posicionados como deberían, como están aquí como pueden ver. Por lo que todo está alineado correctamente. Entonces ahora que las pestañas están terminadas, su trabajo en nuestra oferta de primer minuto, y eso va a ser regata. Por lo que en primer lugar, descartar obviamente no va a funcionar para nosotros. Entonces lo que podemos hacer, podemos saltar la perspicacia y por ejemplo grupo, todas estas cosas. un solo grupo, incluyendo nuestra tarjeta BG. Entonces vamos a reducirlo primero a aquí por ejemplo. Y es alto su imagen ver lo que tenemos. Entonces creo que esto realmente podría funcionar. Por lo que realmente voy a elegir todo nuestro contenido. Asegúrate de que esté forrado así. A ver, Somos siete, así que 1, 2, 3 para ser 10 desde este filo. Y veamos flecha. Voy a posicionar la flecha a este borde aquí mismo, y ahora necesitamos la imagen. Por lo que fui a traer de vuelta mi imagen. Voy a ampliarlo hasta aquí. Y vamos a ver. Ahora vamos a parar a izquierda y arriba a derecha y a deshacernos de éste. Y por la altura, vamos a ver, tal vez podamos ir con 150, ver cómo se ve eso. Creo que eso funciona bien. Y tal vez hasta 160, solo para darle un poco más de pantalla inmobiliaria, 160, ahí lo tienes, n ahora simplemente selecciónelo todo. A ver, y puedo moverlo hacia abajo 20. Seleccione nuestro carrito y posiciónelo todo el camino hasta aquí. Entonces una vez más, la imagen es de 1, 60 de altura, esto es 20, lo siento, 40 abajo. Y ahora podemos jugar con el resto de ellos. Si lo desea, puede ajustar el texto y puede cambiar el tamaño de todo este texto. Pero no voy a hacer eso. Voy a seleccionar a nuestro Tokio y voy a hacer lo mismo, pero antes de hacerlo, voy a ocultar esto. Y yo estoy haciendo todo esto porque ahora ya no vamos a tener desplazamiento. Vamos a tener desplazamiento de izquierda y derecha, pero ahora no arriba y abajo. Entonces trabajemos en nuestro Tokio. Y en realidad vamos a traerlo hasta aquí así. Y hagamos lo mismo por todos ellos. Vamos con Bali, muévelo hasta aquí así. Y llevemos estos tres. Y veamos dónde están. De acuerdo, entonces París está ahí. Es más crack de NTP así. Y luego así. Y ahí lo tenemos. Entonces voy a reducir la visibilidad de todos estos y sólo voy a trabajar en nuestro Tokio. Por lo que una vez más, la imagen es de 160 y la distancia es de 40 entre estos. Entonces, vamos a esconderla. Y antes que nada, llevemos esto de vuelta a aquí. Al igual que así. Entonces voy a ocultar mi imagen. Voy a traer toda esta información al turno de aquí. Y una vez, entonces voy a traer mi imagen, se asegura de que sea 160 de altura. Voy a ampliarlo hasta aquí. Entonces a nuestra app y ver algo no está bien con nuestro cuántico. Mueve nuestra flecha así, y luego simplemente revisa mi imagen, asegúrate de que esté bien. Se hace doble clic en un ajustado a probablemente por aquí. Y luego ocultarlo realmente rápidamente para que podamos seleccionarlo todo. A ver 160, está bien. Selecciónelo todo y simplemente muévelo hacia abajo 40. O creo que 20 va a ser un poco mejor que 40. Entonces voy a arreglar la primera tarjeta en tan solo un segundo. Por lo que Tokio está hecho. Abre el Hagadá y selecciónalos todos, llévelo a 20, y cierra esto. Y ahí lo tenemos. Trabajemos en nuestro Bali. Vamos a traerlo de vuelta. Por lo que antes que nada, traiga la tarjeta oral hasta aquí, traiga la imagen hasta aquí. Seguro. Nosotros somos 55, 000 así. Y asegúrate de que somos 160, como dat, voy a hacer doble clic en posición para estar más o menos por aquí. O aún mejor podemos, por ejemplo, mover estos, ocultar nuestra imagen y voy a seleccionar todos mis artículos, moverlos aquí. Después diez píxeles mueven la flecha. Por lo que necesita el filo así. Vuelve a mostrar nuestra imagen, selecciona todo nuestro contenido y bájala hasta aquí. Y luego haz 20 y simplemente usa nuestro fondo y muévelo hasta que se reúna aquí mismo. Y luego voy a hacer el resto de ellos. Entonces déjame hacer estos tres. Voy a pausar el video y luego volver. Y ahora que los tenemos todos, déjame mostrarles lo que vamos a crear. Entonces vamos a crear grupo desplazable son nuestros tres primeros para cada uno porque tenemos seis. Entonces cuando toquen de primer minuto, vamos a ver a este primer grupo desplazable. Y luego con el toque de último minuto, entonces vamos a sentar al segundo grupo desplazable. Entonces para hacer eso, en realidad voy a usar Tokio y Bali, moverlos afuera así y asegurarme de que lo sean. Por ejemplo, usemos, usemos 30. Mueve a Bali fuera del camino, tráelo de vuelta. Usemos 30 también. Entonces los voy a agrupar, lo llamé de primer minuto eso y luego los voy a esconder para poder hacer el segundo stents. Entonces vamos a traer estos de vuelta, movidos afuera. Asegúrate de que sean 30, y asegúrate de traer el tipo a, que va a ser a los 30 así como así. Y voy a agruparlos, llamé de último minuto por eso. Y luego voy a traer mi primer minuto click aquí mismo. Para que pueda crear un grupo desplazable. Y lo que realmente puedo hacer es traerlo hasta aquí. Entonces de borde a borde, porque tenemos un tamaño de pantalla más pequeño y la ocultamos y luego hacemos lo mismo para éste. Así que da clic aquí, llévala borde y llámenlo de último minuto. Entonces para este primer estado, en realidad voy a reducir la opacidad de este último minuto y cuándo traer esto de vuelta. Entonces esto es con lo que vamos a estar trabajando. Y finalmente, qué campo falta aquí mismo son los botones. Por lo que obviamente vamos a traerlos. Al igual que esto. Y veamos, quizá podamos hacerlos estar en 60 millones. Y alinémoslos al borde izquierdo fuera de nuestra grilla. Y saltemos dentro de ambos. Entonces todo primer minuto lo vamos a reducir a 18 y luego gris oscuro. Y hacer lo mismo para todo el último minuto. Para como traer de vuelta los criterios, 18, gris oscuro. Y voy a asegurarme de deshacerme de este color porque ya no lo necesitamos y cuándo hacer lo mismo aquí mismo. Y en primer lugar, voy a asegurarme de que estos dos estén centrados. Que estos dos estén centrados. Bajar esto a 0. Pero antes de hacerlo, quiero ampliarlo hasta aquí. Entonces asegúrate de que esté en el centro. Para ahora bajarlo a 0. Voy a mostrarlo una vez más, haga clic aquí, y ampliarlo hasta aquí. Asegúrate de que esté en el centro. Y luego finalmente, vamos a medirlo una vez más. Entonces son 60, lo cual está bien. Esto está en 0 obesidad, esto está en 100 obesidad, lo cual es genial. Y ahora vamos a crear un componente para esta oferta especial móvil. Por lo que pulsa Tecla de control. Y vamos a dar clic a crear una nueva calidad de estado de última hora. Entonces en este primer estado, no vamos a hacer nada porque los usuarios pueden desplazarse a la izquierda y a la derecha. Y en el último estado, lo que vas a hacer es realmente hacer estos cambios. Entonces para las pestañas, vamos a cambiar esto para que sea azul. Y vamos a cambiar esto para que sea gris claro. Para este, vamos a reducir el primer minuto, aumento en último minuto. Y finalmente por los botones vamos a ocultar esto primero, aparecer, este último y conocimiento. Adelante y cambia de nuevo al estado predeterminado, pulsa la vista previa y ve qué tenemos hasta ahora. Por lo que aquí están las ofertas especiales y carga levantada apenas por un segundo. Aquí está. En primer lugar, cuando hago clic primero y último minuto, pero primero debería animarlo, sólo dame un segundo. Entonces ve al prototipo, y voy a seleccionar este. Haga clic en él. Por lo que vamos a usar tap auto animate, facilidad de entrada, salida de última hora y 0.6 segundos. Entonces lo voy a cerrar. Vuelve al último minuto. Haga clic aquí, toque, y vamos a ir al estado predeterminado. Volvamos a cambiarlo ahora. Y ahora si tomo u y hago clic aquí, se puede ver que transiciones muy bien entre el primero y el último Estados, lo cual es genial. Y también puedes hacer clic aquí y arrastrar entre estos estados. Entonces no sé por qué no funciona aquí mismo. Lo haré porque no lo cambié, no lo copié. Entonces hagámoslo. Entonces el diseño. En el último minuto, vamos a mostrar estos. Y en realidad, sí, en este tenemos que esconderlos porque distrae de nuestros usuarios para poder hacer clic y pasar el ratón. Entonces déjame mostrarte click y arrastrar. Aviso, por lo que este es el primero. último minuto ahora eso te lo ocultó. Así es como se ve. Primeros minutos, todo funciona. último minuto, todo funciona sólo porque te lo hemos escondido aquí mismo. Entonces ahora sigamos adelante y tratemos con esto. Entonces vamos a ver, lo dejamos en estado predeterminado, lo cual está bien para el video promocional. Obviamente, voy a reducirlo a aquí y traerlo de vuelta a aquí, por ejemplo, a algo, algo pequeño y bonito así. Y vamos a ver, nuestro ícono de juego se mantuvo igual. Entonces para Europa, básicamente vamos a hacer lo mismo. Entonces, antes que nada, traigamos un título de sección. Pongámoslo en el centro así, y tratemos esos cambios. Entonces para Europa, voy a ir con ver dónde está. Entonces Muskoka, de 18 años, esto va a ser 18, gris oscuro. Y sólo déjame revisar el espaciado aquí mismo. Entonces entre estos, son 40, así que este es 18, este es ATN, el espaciado es 40. Entonces hagámoslo aquí abajo para Europa. Entonces sólo 20 arriba. O puedo bajar esto y va a bajar un poco nuestro diseño completo, lo cual está bien. Y obviamente vamos a ajustarnos un poco más tarde a la parte superior, o incluso puedo hacerlo ahora simplemente haga clic aquí, luego volver atrás y ajustarlo. Entonces vamos a ver, estamos en 84 aquí, lo cual no me gusta. Voy a subirlo cuatro píxeles. A ver. Y luego llévala hasta 60. Veamos realmente dónde estamos justo aquí. Entonces estamos 48 aquí mismo, lo cual no es ideal. Entonces, en realidad hagamos eso también. 40 por eso. Eso no me gusta. Entonces vamos a ver. Posicionarlo aquí. Asegúrate de que sean 60 y luego lleva esto a 40. Creo que eso 150 arriba. Por lo que una vez más 60 y luego 40 justo aquí. Voy a cambiar a último minuto, y vamos a cambiarlo aquí atrás. Si es necesario. Esto es 60, esto es 40. Por lo que sí cambió en el estado por defecto, lo cual es genial. Ahora sigamos adelante y pasemos a aquí. Entonces lo que voy a hacer aquí mismo es realmente extremadamente sencillo. Simplemente voy a deshacerme de algunos de ellos. Entonces antes que nada, vamos a dar click en los RCTs y yo voy a hacer lo mismo. Por lo que simplemente se ajustó a esta oleada. Y lo voy a ajustar a este filo aquí mismo. Entonces lo que voy a hacer es ir al interior de las ciudades. Y ahora como pueden ver, tenemos seis de ellos. Entonces me voy a deshacer de tres y sólo dejar tres de ellos dentro. Y lo que voy a hacer es básicamente ver dónde necesita ser ajustado. Entonces básicamente París, Vamos a ver. Tendremos que moverlo como esto fue solo un poco. Y luego simplemente expande nuestra tarjeta apenas un poco. Por lo que todos estos artículos como este. Entonces básicamente estamos moviendo nuestra imagen, nuestro fondo y nuestra flecha y nuestro botón. Tan alto esto trayendo la posición de Londres justo aquí. Entonces vamos a ver. Solo para ser precisos, ábrelo, selecciona estos tres y simplemente expandido hasta el borde así. Escóndelo y simplemente trayendo a Roma. Esto es lo que estaba diciendo. Entonces algunos, algunos de estos se están volviendo mucho más fáciles porque ahora no tenemos ningún efecto flotante de que preocuparnos. Simplemente tenemos todos estos elementos para que podamos jugar con ellos como queramos. Incluso puedes reducir esto a 20 si quieres. Por lo que se mantiene igual que está justo aquí en la parte superior. Pero debido a que esta imagen es más grande, por ejemplo, podemos bajarla a 160. Por lo que ahora estas tarjetas van a ser casi exactamente las mismas. Quiero decir exactamente lo mismo que estas cartas aquí en la parte superior. Entonces una vez más, 160 y luego 20 justo aquí. Entonces porque ajusté este, tendré que volver atrás y ajustar éste. Entonces una vez más, por la altura, ve con 160 así, y luego simplemente moviendo el contenido a 20 así. Haida Londres, vuelve a París, 160 para la altura justo ahí. Y luego simplemente poner esto en 20. Ahora lo que voy a hacer es animar esta primera, y luego voy a volver atrás y editar todas estas otras. Entonces haré una final por Europa y luego seguiré adelante y cambiaré las para África, Asia, y los estadounidenses, porque como siempre van a ser exactamente iguales. Entonces lo primero que realmente vamos a hacer es reemplazar algunas de estas. Entonces voy a usar antes de que empecemos a animar, Sigamos adelante y reposicionemos estos. Entonces tráelo de vuelta. Y vamos a ver. Puedo, por ejemplo, bajarlos a 30 como hice con los anteriores. Así que así, y luego simplemente traer la nuestra ponerla afuera. Y veamos 30 así. Y solo quiero comprobar rápidamente qué es lo mejor para mis flechas para poder posicionarlas justo debajo de mi botón. Entonces eso es lo que voy a hacer. Voy a usar mi posición de botón y aquí mismo se asegura que estoy siguiendo y estas líneas de cuadrícula como esta. Y voy a saltar dentro de un extendido un poco. Y luego voy a reducir el tamaño de esto a 800, asegurarme de que sea gris claro. Y voy a asegurarme de que vaya al centro así, sus hábitos. Y yo también voy a hacer lo mismo por hover, pero si recuerdas, no incluimos el horror, así que no va a obviamente afectado. Pero como siempre, si tu cliente lo quiere y ahí lo tienes, tienes la opción. Por fin por aquí, Vamos a ver, entre nuestro botón y nuestras tarjetas, no tenemos ningún espacio. Entonces voy a posicionarlo para ser, por ejemplo, a los 40. Y yo voy a hacer lo mismo por nuestras flechas. Entonces vamos con 40. Voy a asegurarme de que estén en un centro. Esta flecha va a este borde justo aquí. Esta flecha va a este borde justo aquí. Y ahí lo tenemos. Comprobemos el punto de tabulador izquierdo. Asegúrate de que cumpla con nuestra flecha. Eso lo mismo para el punto de tabulación derecho, lo que hace. Y eso es básicamente todo. Eso es lo que tenemos que hacer. Todo esto está creado y ahora vamos a animarlo rápidamente. Entonces lo que puedo hacer es ir con Europa. O incluso podemos usar el mismo punto tabulador. Entonces hagámoslo realmente. Control G, voy a llamarlo Europa y despojarlo afuera. Por lo tanto, simplemente desagrupar componente. Y me voy a deshacer de estas flechas en la parte inferior. Simplemente voy a tener el mismo diseño básicamente como lo hice aquí mismo. Entonces todo primer minuto, y luego se va a decir toda Europa. Entonces, a partir de entonces, básicamente, lo que podemos hacer es simplemente previsualizarlo. Ese cierre todo el camino hacia abajo porque tenemos pestañas aquí mismo, puedes quedarte con las flechas si quieres animar intensamente tres estados, si eso es algo que quieres. Pero creo que esto va a funcionar muy bien porque muestra todas estas cartas mayores y este botón se queda clavado al fondo. Toda la sección es muy legible y de fácil acceso. Entonces creo que esto va a funcionar muy bien. Pero una vez más, si quieres, puedes crear exactamente el mismo diseño como hicimos aquí mismo. Entonces si te llevo de vuelta aquí mismo, tenemos tres estados porque los usuarios pueden hacer clic tres veces, pero en lugar de ver dos tarjetas, simplemente pueden ver una tarjeta en este diseño móvil. Entonces eso es todo para este video. Ahora me voy a ir y terminar los de África, Asia y América usando exactamente las mismas técnicas, tamaños, espaciado, así que todo va a ser igual. Por lo que no pierdo demasiado de su tiempo. Y luego voy a volver y vamos a abordar algunas de estas otras secciones. Entonces te veré en el siguiente video. 50. Crear diseño responsivo: De acuerdo, entonces ahora que he ajustado todos esos elementos diferentes, Vamos a mover uno analitos, explorarlos. Y cada vez que ajuste algo hacia abajo, todo el diseño se mueve porque está en una pila, simplemente selecciona la carpeta principal. Por eso lo puse ahí y simplemente lo aplasté de nuevo a la parte superior y se va a alinear muy bien. Entonces como pueden ver, tenemos Europa, tenemos África, tenemos Asia, y tenemos América. Entonces todo es exactamente igual. Y puedes saltar dentro y registrarte en el archivo del proyecto y ver por ti mismo cómo se ve todo. Atacemos ahora estas imágenes. Y básicamente lo que voy a hacer es simplemente ajustarme así. Y simplemente voy a saltar dentro de aquí, ajustada a aquí. Y también voy a cambiar el tamaño a algo así. Entonces podemos ir con 375 con 260, por ejemplo, 375 con 260. Y yo puedo hacer lo mismo por los demás. Por lo que 375 ancho 260. Simplemente cambiaré eso a 375 de ancho a 60. Ahora que tenemos exactamente el mismo diseño. Ahora volvamos a aquí. Y voy a cambiar este texto. Saltemos dentro de aquí. Entonces cambiémoslo a 80 y tragémoslo 0 por alguna razón. No sé por qué. Así que reserva tu viaje de ensueño con nosotros. Déjame revisar. Sí, en realidad lo hizo en todas partes. Entonces déjame seguir adelante y arreglarlo. Curará viaje de ensueño con nosotros. Y voy a tener que cambiar realmente el ancho de este texto para acomodarlo a algo así. Ahí lo tenemos. Cámbialo aquí también. Cambiemos el ancho de nuestro texto a nuestra cuadrícula así. Y sigamos adelante y cambiémoslo aquí mismo. Así que reserva tu viaje de ensueño con nosotros. Y lo voy a expandir a aquí mismo. Y luego simplemente trayendo de vuelta un poco más cerca así. A ver, Sólo para que llegue al borde de nuestra imagen. Entonces ahí lo tenemos. Y ahora sigamos adelante porque creo que lo hice en todas partes. Déjame hacer eso aquí también. Bulkier sueño viaje nos puso simplemente asegúrese de alinear nuestra imagen aquí mismo. Y hay un viaje perfecto. Entonces básicamente arreglé todo ese asunto. Entonces esas son solo algunas cosas que vas a ajustar aquí y allá. Y la belleza de usar Adobe XD para todo tu diseño es justo esto. Para que puedas arreglar rápida y fácilmente algunos de estos errores, como usualmente clientes o cuándo decirte para el texto Tokio, traer esto, sacar esto, hacer esto más grande, hacer esto más pequeño. Por lo que realmente puedes hacer todos estos cambios importantes muy fácilmente en tu texto y en tu archivo en general. Entonces trabajemos ahora en esto. También voy a dar click en este. Asegúrate de que sea mezcla 18, es gris oscuro. Y voy a traer mi texto aquí. Y veamos qué podemos hacer. Simplemente ajustarlos. Veamos qué podemos saber. A lo mejor podemos deshacernos del sueño. Ver un bastante rápido, todavía tengo algunos problemas raros nos llevamos d. Así MOOC tu Con nosotros así. Y voy a simplemente seleccionar mi texto y traerlo aquí y a aquí así. Y luego voy a hacer lo mismo por aquí y por aquí. Y veamos qué podemos hacer aquí mismo. Podemos ajustarlo a, por ejemplo, 40. Y veamos qué tenemos aquí arriba, tenemos 100 para poder saltar aquí mismo, cambiarlo a 60, así. Entonces tenemos 40 entre estos dos y tenemos 60 entre nuestra imagen y nuestros textos. Así que enseguida voy a saltar ahí abajo y cambiar nuestra distancia a 60, como ahí. Y luego vamos a tratar el texto un poco más tarde. Ahora terminémoslo primero, aquí mismo. Por lo que, dice obtener una cotización gratis. Y este botón, lo voy a posicionar aquí mismo, asegúrate de que sean 40. Va a ampliarlo para escuchar noticias. Lo mismo para el horror, saltar aquí mismo. Usa el blanco y ajustado para descentrar así. Entonces voy a ir al estado por defecto aquí mismo. Después usa 18 gris oscuro seleccionado y asegúrate de que esté en el centro así. Y ahí lo tenemos. Entonces ahora que esta sección está terminada, voy a seguir adelante y hacer la otra que está abajo, que es ésta. Entonces, en primer lugar, cambiemos esta canción va a dar clic aquí y asegurémonos de que sea 80. Usa este 18 gris oscuro ahí, lo tenemos. Entonces voy a alinear mi texto justo aquí al centro, saltar dentro de aquí. Y vamos a ver. Entonces, antes que nada, asegúrate de que esto sea altura automática. Asegúrate de que esto sea altura automática y luego simplemente ajustarlo al ancho de nuestras líneas de cuadrícula así. Y luego esto también. Y luego vamos a ver qué vamos a cambiar aquí mismo. Entonces Derek, un perfecto, no creo que vayamos a poder encajarlo. No. Hay un viaje perfecto para todos. Entonces si no te gusta cómo se ve esto, quizá podamos ajustarlo para salir un poco afuera. Toca justo aquí, perfecto. Y luego muévete, tropieza hacia arriba. Y luego haga clic aquí para todos. Entonces haz algo así, y luego podemos ajustarlo una vez más. Entonces veamos si va a funcionar. Está ahí sin embargo. Y por último, vamos a ocuparnos de esto. Entonces voy a pasar a 20 y luego a 40 y luego noticias y este botón, asegurarme de que sea 40 posición abajo y aquí, aquí. Y luego aquí, selecciona éste, asegúrate de que sea 18. Vuelve atrás. Asegúrate de que esté en el centro como ese estado predeterminado. Esto va a ser 18 gris oscuro. Asegúrate de que esté en el centro así. Y vamos a cheques son 40, esto es 40. Y como dije, van a ser 60. Entonces ahora esa sección está terminada, Vamos ahora a trabajar en algunas de estas otras secciones me soliden, ver por dónde empezamos. Por último página de inicio, alinearlo hasta arriba porque hicimos algunos cambios en nuestras secciones. Entonces veamos Asia, Américas, y trabajemos en nuestros mejores destinos. Entonces veamos qué podemos hacer aquí mismo. En realidad vamos a deshacernos de nuestras flechas así. Y podemos deshacernos de estos, algunos de estos destinos. Entonces vamos a usar tres. Nos vamos a deshacer de estos tres. Y en realidad voy a seleccionar uno de estos botones y simplemente copiarlo. Controla C, controla V, y posiciónala dentro de nuestros mejores destinos. Pero antes de eso, voy a copiar este texto. Y lo voy a poner en grupo. Entonces estos dos controlan G. Adopta esta tenaz y voy a hacer clic con el botón derecho del ratón Desagrupar componente y luego usar el botón bu y traerlo aquí mismo. Entonces lo voy a traer todo el camino hacia abajo, asegurarme de que sean 40. Entonces veamos qué podemos hacer aquí mismo para ajustar esto así. Y voy a dar click aquí mismo en nuestros destinos. Asegúrate de usar el grupo de desplazamiento aquí mismo. Entonces la voy a abrir. Usa los tres, asegúrate de que estén centrados. Colóquelos aquí mismo para que pueda alinearlos a nuestra cuadrícula sobre escribir esto así. Y seguiré adelante y ahora ajustaré los tres. Por lo que una vez más, puedes saltar por dentro y cambiar tu texto si quieres, puedes cambiar sus tamaños. Pero no voy a hacerlo, creo que este diseño va a funcionar bastante bien, sobre todo porque estamos en una cuadrícula receptiva. Entonces ahí lo tenemos. Y ahora por fin, trabajemos en estos. Entonces vamos a ver si hago clic aquí mismo. A ver puedo reducir esto a 160 para que podamos tener la misma altura de contenido que hicimos para la carta superior. Entonces todo se ve exactamente igual y coherente. Por lo que para la altura aquí mismo, usa 116. Esconde esto. Y por último para este, usa 160. Ahora, lo siento, no en ancho sino en altura. Entonces, una vez más, algunas cosas raras y raras suceden con Adobe XD. Entonces vamos a deshacer, redimensionar y traer de vuelta la opacidad. Voy a dar clic aquí mismo a uno. Una vez más, no sé por qué. Sigue sucediendo. Pero una vez más, voy a guardar mi archivo y luego volver. Y ahora que arreglé eso, sigamos ahora y reposicionamos algunas de estas. Entonces vamos a ver, algo todavía no está bien, aquí mismo con el multiuso, creo que es solo la máscara de imagen que es. Entonces déjame simplemente hacer doble clic y moverlo. Distrito de los Lagos. Está bien. Toscana está bien. Entonces vamos a traer estos de vuelta. Voy a mantener presionada mi tecla Mayús, usar esta, mantén pulsada la tecla Mayús así. Por lo que me inclino ante ellos y me aseguro de que sean 30. Al igual que esto y finalmente se movió Toscana 30 también. Yo que reviso los destinos. La edición está bien. Asegúrate de ajustar esto para ser 40. A ver, Así 80. Ahora son 40. Y por último, tratemos con el texto superior en este punto. Por lo que esto todavía va a ser de 80. Entonces cambiémoslo a esto. A ver si encaja dentro no lo hace. Entonces tal vez lo que podemos hacer es elegir nuestros mejores destinos y luego ponerlo aquí mismo, asegurarnos de que esté centrado, alineado así. Y luego simplemente posicionando justo aquí. Asegúrate de que sean 40. Déjame sólo comprobar rápidamente que las distancias aquí, así que están 40 y 60 abajo. Entonces vamos a ver, todavía estamos 150 aquí. Voy a cambiar esto para ser 18 luego gris oscuro. Y voy a resolver estos para asegurarme de que estén en un centro. Esa sección titulada lo posiciona en el centro así. Y vamos a ver. Somos 60. Y debido a que los bajé, una vez más, esto va a ocurrir. Entonces si se te ocurre, no te preocupes por ello. Simplemente selecciónela y muévala a la parte superior. Así que simplemente de lado a la carpeta principal, haga clic aquí y se va a ir directamente a la parte superior. Entonces ahora que tenemos todo esto terminado, lo que nos queda por hacer es en realidad ajustarlos. Y lo que podemos hacer con estas tarjetas es realmente bastante sencillo. Entonces voy a hacer lo mismo que antes. Y voy a parar el video aquí mismo. Pero en realidad, no, sigamos adelante. De hecho, trabajemos con esto. Entonces veamos qué podemos hacer con él. Testimonios, en realidad voy a agruparlos, hit Control G. Copiar este texto testimonios de calidad en grupo este componente. Porque una vez más, vamos a usar lo mismo aquí mismo. Y quizá en esta ocasión quizá podamos incluso usar flechas. Para que los usuarios puedan tocar estas flechas porque tenemos flechas ahí mismo en la parte superior. Entonces tal vez podamos hacer eso solo para condimentar un poco las cosas. Entonces vamos a ocuparnos primero de esto, o voy a usar 80. Y para esto voy a usar 18 gris oscuro. Ahora, veamos qué podemos hacer. Así que selecciónalos todos así. Asegúrate de que estemos en un centro como este. A ver lo que la gente está diciendo. Podemos cortarlo ahí y los viajeros nos aman. Asegúrate de ponerlo en alineación a continuación. Una vez más, veamos. Entonces 1, 2, 3, 4, creo que fue? Sí, y luego 60 abajo. Entonces veamos, 123460. Por lo que 40 y 60. Dejar que rápidamente se lo pueda comprobar aquí mismo. Entonces aquí puedes ver tenemos 47, lo cual es raro. Entonces, ¿40? No creo probablemente porque sí, Así 40 y 60. Y vamos a revisar nuestro diseño para ver dónde termina. Página de inicio a la parte superior derecha, ahí. Sí. Entonces creo que eso se ve bien. Entonces 150, eso está bien. Y esto son 40, esto son 60 muertes, genial. Y ahora trabajemos en nuestro testimonio. Entonces lo primero que voy a hacer es lo mismo que hice con estos, es en realidad ampliar esto, cerrar, este fin. Voy a ajustar mi primera tarjeta, así tarjeta testimonial y cuándo llevarla al filo. Y yo voy a llevar éste al borde también. Entonces ahí mismo. Y luego voy a ajustar nuestro texto. Entonces, primero llevémoslo al centro. Entonces veamos qué se necesita ajustar la aireación. Entonces veamos qué podemos arreglar aquí. Podemos cambiarlo a aquí y podemos cambiarlo a aquí. A ver, estamos a los 40. Cambiemos este para que sea modelo de 24 pernos 24 así. Vamos con, vamos a ver, 40. Y voy a cambiar esto por algo aún más pequeño. Por ejemplo, vamos con 16. A ver cómo se ve eso. Eso se ve bien. Esto va a ser 18 y vamos a ver, 40. Así. Selecciona nuestro texto y nuestra tarjeta testimonial da click justo ahí, y ahí lo tenemos. Entonces lo que voy a hacer en realidad es copiar esta tarjeta testimonial y luego puedo hacer cambios ahí. Por lo que golpea Control D, Control D, Control D. Así. Entonces en realidad no, vamos, volvamos. Entonces lo que voy a hacer aquí mismo es cortarlo un poquito a algo así como, vamos a ver, organizar las tropas van a ser barajadas y todo lo que está en medio. Entonces podemos cortar a este problema. A lo mejor puedo bajar esto. Básicamente lo que quería evitar que estos tuvieran una palabra en una línea. Entonces esto es lo que estoy haciendo ahora mismo. Entonces eso está bien. Y ahora en este punto puedo realmente copiar esta tarjeta. Entonces Control D, Control D, Control D. Quiero tener cuatro de ellos. Y básicamente voy a saltar dentro y correlacionarme con Bree Jackson. Y viajó a París para que pueda deshacerme de esta tarjeta. Viajó a París. Esta persona viajó a Bali y su nombre es Arthur Hammond. Entonces tal vez pueda copiarlo y pegarlo aquí mismo. Espero que no estropee nuestro diseño. No lo hizo, lo cual es genial. Entonces puedo borrar este. Pero una vez más, como pueden ver, tenemos algunos temas aquí y allá que soy marrón va a ir a este último y ella viajó a Tokio así. Y por último, vamos a deshacernos de este carro. Ahora que tenemos para podemos empezar con nuestras animaciones. Entonces volvamos a traer todo esto, cambiarnos a nombres, así que texto a tres. Y por último, cuatro. Eso me gusta. Voy a deshacerme de nuestros textos. Voy a usar nuestras flechas, colocarlas en el centro, asegura de que lo sean, digamos 80 y cuándo moverlas a 60. Y yo voy a hacer lo mismo. Entonces voy a ajustar esta flecha para ir a este borde y un poco más así. Rebaño lechero y hacer lo mismo por éste. Entonces voy a ajustarlo a aquí, usado punto de tabulación y ajustado a aquí. Ahora que lo tenemos todo, podemos empezar con animaciones. Y obviamente esto va a ser bastante sencillo. Sal, llamémoslo testimonios más sobre mi papá. Y obviamente puedes incluir algunas imágenes si quieres, no solo por esta, sino también por el texto, si quieres, pero no voy a hacer eso. Y tenemos que sumar este más porque usábamos 16. Voy a moverlo todo el camino hasta aquí porque es el más pequeño. Y ahora vamos a crear nuestro componente hit Control K. Y voy a crear un nuevo testimonio de calidad estatal para copiar en este texto. Para un testimonio a obviamente los van a mover. Entonces mueva esto adentro. Veamos dónde estamos con nuestros testimonios. Eso está bien. Ciérralo. Nuevo testimonio estatal tres. Voy a saltar adentro, moverlos alrededor de una vez más así. Vamos a hacer zoom. Y rebaño lechero. Y por último, crear uno nuevo. Sólo amoníaco para saltar dentro. Testimonios y lloraron el expediente uno en su lugar así. Y por último, vamos a seguir adelante y prototiparlo. Entonces vuelve al default, prototipo estatal. Y vamos a usar flechas, ¿verdad? Punto de toque. Vamos a parar. Autonomía. Herramienta testimonial es de 0.6 segundos. Saltar dentro testimonial dos flechas a la izquierda. Entonces vamos a ir a tocar autonomía. El estado por defecto está en nuestros 0.6 segundos y luego hacer lo mismo para este. Pero aquí vamos a ir a testimonial tres. Ahora en la tercera, vuelve a la segunda. Esto va a ir al cuarto. Y finalmente, en la cuarta, voy a saltar de nuevo con nuestra flecha izquierda a la terminal. Y ahí lo tenemos. Entonces ahora que eso está terminado, podemos volver al diseño. Y por último, para terminar este video, trabajaré en esta sección. Entonces simplemente muévelo así. Y lo que voy a hacer en realidad es saltar aquí mismo. Entonces porque estamos en 120, lo que podemos hacer es ajustar eso a 80, asegurarnos de que sea blanco. Y voy a pensar que estas van a estar bien, así que quizá podamos moverlas. Hagámoslo primero y hagámoslo por todos ellos. Entonces donde estamos 80 blancos. En blanco. Y vamos a revisar con el primero, el bienestar soviético. Lo que tenemos justo aquí es 32. Eso no me gusta. Entonces voy a ir con 40. Y voy a seleccionar estos dos y asegurarme de que seamos 20 de este filo, así que tenemos mucho espacio aquí mismo. Y luego simplemente seleccionarlos todos y traerlos de vuelta a aquí. Tampoco me gusta la altura de esta tarjeta oral. Entonces, por ejemplo, podemos saltar aquí y por la altura, podemos hacer algo como, no sé, a 60 tal vez. Bueno, vamos con 300. Creo que eso va a funcionar un poco mejor con este wellness. El 12, 20, y luego 20 abajo. No creo que funcione bien. Por lo que una vez más, 300 va a ser la altura. Entonces es antes que nada, reduzca esto a algo como esto. Cruceros. Vamos a cambiar la altura a 300. Vr, vas a asegurarte de que sean 40, ¿no? Vamos a comprobar rápidamente aquí mismo, ¿o son 20? Es 20. Entonces 20. Y entonces lo que vamos a hacer es simplemente traer estos de vuelta a aquí. Mueve estos para que sean 20 y luego 20, así. Y los lácteos lo tienen. Por último, tratemos con el 1 final, tercero 1. Y lo que podemos hacer es ajustarlo desde aquí, así que 300. Y voy a traer estos dos aquí, 2020, y luego asegurarme de que esquiar, Está posicionado 20 así. Y vamos a comprobar rápidamente las distancias entre éstas. Entonces 30 no es bueno y cuándo usar 40. Y vamos a ver aquí, 43 no es bueno, así que voy a, vamos a ver más con tres. Y entonces viaje esquema se movió por el camino, cual es genial y todo ajustado como debería. Se trata de 150. Y finalmente para este video, y quiero ajustar a nuestros socios porque son secciones un poco más fáciles. Entonces vamos con 80. Vamos con 18, nueve dat. Y pongamos en nuestro título de sección en el centro así, nuestros socios encajan justo bien. Y lo que podemos hacer es realmente poner esto en dos líneas, lo cual también es bueno. 60 y cuándo asegurarse de que esto es 40, no siempre se olvidó de estas cosas. Eran 40, genial. Y van a ser 60 hasta aquí. Entonces seleccionemos nuestros logotipos y usemos 60. Y entonces lo que vamos a hacer en realidad es usar este grupo desplazable para venir derecho a aquí y luego traerlo derecho a aquí. Y por último, voy a ajustar el tamaño de nuestros logotipos. En primer lugar, asegúrate de ajustarlos a aquí. Y luego todo el camino hasta aquí por ejemplo. Para que podamos ver dos logotipos y luego pueden desplazarse a la izquierda y a la derecha si quieren ver. El resto de estos logotipos vieron algo como esto. Entonces cuando hago clic afuera, así es como se ve. Tan querido, cómo es, Eso es todo para este video. En el siguiente video, vamos a volver y terminar nuestro diseño, diseño responsive completamente porque vamos a trabajar en estas secciones y finalmente, en un pie de página para luego terminar nuestro diseño responsive. Entonces te veré ahí. 51. Crear diseño responsivo: Y ahora sigamos adelante y finalmente terminemos nuestro diseño responsive para esta versión móvil y para toda esta clase. Entonces voy a empezar con esta sección aquí mismo porque son 36. Voy a reducirlo a 24 voltios. Y voy a dar click aquí mismo, asegurarme de que esto esté alineado a la izquierda. Y lo voy a posicionar justo por aquí. Y porque es 18 luz y cuándo asegurarse de que esté 20 abajo en Dan y cuándo llevar toda esta sección a 40, por ejemplo. Y cuando para traer todo esto, me voy a mover adentro, seleccionar nuestras monedas posicionadas aquí mismo. Y hasta puedo hacer si quiero, puedo ponerlos en una pila. Y luego para cada uno de ellos puedo, por ejemplo, reducir la cantidad de pila tal vez a 40. Creo que va a ser bastante bueno, pero necesito sostener Shift y luego bajarlo a 40 así. Por lo que ahora son 40 en todas partes para todos estos. Y obviamente los usuarios pueden desplazarse. Simplemente ajustémonos a la derecha por aquí para que los usuarios sepan que hay más espacio para desplazarse para escribir sus 150. Y eso es básicamente todo para la sección del tipo de cambio DES. Pasemos ahora a venir de las preguntas. Y este obviamente va a ser nuestro mayor reto porque necesitamos ajustarlo para que quepa y necesitamos ajustar todas estas animaciones de fondo. Entonces, antes que nada, vamos a ocuparnos de esto. Entonces si recuerdas, esto fueron 40, esto, y llevemos esto a algo como aquí. Entonces voy a usar mi texto. Asegúrate de que esté centrado, alineado y, y cuándo posicionar también esto aquí mismo. Así que asegúrate de que esté centrado aproximadamente por ahí. Así que prepárate para tu viaje de ensueño. Voy a convertirlo a auto altura. Y veamos, puedo ampliarlo de aquí a aquí. Vamos a ver en sueño no va a caber. Solo usemos viaje. Así que prepárate para tu viaje y veamos qué podemos cortar aquí mismo. Entonces si ajusto esto, a ver cómo se ve tomar y tanto más, vamos, vamos a usarla como si estuviera aquí mismo. Por lo que 40. Y vamos a ajustar este botón, deslizamos hacia abajo. Entonces volvamos a aquí, arreglamos esto así. Demos click en nuestro botón, muévelo hacia abajo 40 y 60. Mueve nuestro botón aquí mismo. Asegúrate de que sean 60. Haga clic aquí, abajo justo aquí, ajustado click dentro. Usar blanco. Perdón, no 16 sino 18. Porque ahora un 16, su más pequeño. Así que haz click en algún lugar por aquí. Y Dan, voy a ir al estado por defecto, clic en él y usar 18, y también usar una mezcla de gris oscuro. Está en un centro como este. Y ahora tenemos que abordar, abordado esto, una sección de preguntas comunes. Entonces estamos en 100, y obviamente vamos a necesitar ajustar muchas de estas cosas diferentes aquí mismo. Entonces, antes que nada, tratemos con esos molestos divisores. Entonces voy a seleccionar este, mantenga presionada la tecla Mayús y ver con dónde termino. Entonces voy a terminar en 3344, el ancho. Entonces voy a usar esa misma configuración para el resto de nuestros divisores. Por lo que 334. Haga clic en este 1334, y finalmente haga clic en este 1334. A continuación, voy a seleccionar todos mis iconos de ropa así. Sostén mi tecla de turno, los movimos de nuevo y simplemente ajustamos a nuestra cuadrícula así. Entonces simplemente un píxel y luego voy a seleccionar todos estos textos. Entonces esto, esto, esto, y esto. Podemos ver que es 24 pernos. Entonces veamos qué podemos hacer aquí mismo. Entonces tal vez podamos incluso hacer algo así como 18 perno que hicimos aquí atrás, pero simplemente vamos a usar 18 negro porque tenemos 18 negrita aquí mismo. Entonces solo estamos haciendo lo mismo pero manteniéndolo negro para que se vea exactamente igual. Voy a asegurarme de que los alinearé todos al centro de nuestros iconos así. Escondamos esto para que pueda trabajar en éste. Obviamente, todavía tenemos un poco de esos temas superpuestos. Entonces lo que voy a hacer aquí mismo es básicamente mover la siguiente línea hacia abajo y luego en realidad ajustada al centro porque creo que funciona mucho mejor. Déjame esconder este por un segundo. Haga clic aquí. Por lo que la política de cancelación va a bajar. Ajustado al centro. Yo lo voy a ocultar. Haga clic aquí. Elige que tus socios puedan bajar, asegúrate de que esté en el centro. Y por último, haz lo mismo para viajes personalizados. Por lo que los grupos personalizados trabajan ajustados al centro así. Y lo vamos a hacer es volver a subir todos estos. Ahora que tenemos datos, configurarlo, lo que voy a hacer es realmente ver dónde aterrizamos con esto. Por lo que en realidad podemos hacer distancias personalizadas un después. Sacémoslos a todos a la ola para que podamos trabajar en ésta. Entonces voy a traer de vuelta nuestros textos. Es 24. Obviamente es demasiado grande, así que ajustémoslo a 18, y usemos gris oscuro. Y por último, voy a ajustar nuestro texto así. Asegúrate de que sea, por ejemplo, tres líneas grandes como esta. Y entonces hagamos lo mismo por todos ellos. Por lo que voy a traerlos de vuelta, asegurarme de que lo haga el globo ocular y luego vaya 60, por ejemplo. Así. Después haz lo mismo para la política de cancelación. Déjenme más que estos dos abajo así. Entonces ve con la política de cancelación. Muéstralo. Asegúrate de ir con 18 gris oscuro y simplemente ajustado así. Al igual que esto. Simplemente ajustado un poco. Por lo que no importa si baja un poco. Eso está bien. Socios, vamos a traerlo de vuelta aquí y mirarlo así. Asegúrate de que sean 60. Y luego voy a mover mi viaje personalizado hacia abajo, trabajar en los socios, traerlo de vuelta. 18, gris oscuro. Haga clic de nuevo en y ajustado a esto. Realmente no me gusta cómo se ve esto, pero para qué se puede hacer así va a ser altamente confiable, eliminemos estas palabras para alojamiento, transporte, y viajes. Entonces eso va a funcionar bien para nosotros. Quitarlo u ocultarlo, para luego traer este último dentro. Dos, más o menos por aquí. A ver. Ahí vamos, 60. Y luego trae esto de vuelta. Voy a asegurarme de que por fin sean 18 gris oscuro y traerlo de vuelta hasta el final. Y realmente no nos importa cómo se vea aquí. En realidad se ve bien, pero no nos importa porque es el último. Entonces finalmente lo voy a ocultar y vamos y ahora animar a todos ellos. Entonces si recuerdas de ejemplos anteriores, en realidad tenemos que animarlos a todos. Entonces voy a saltar dentro, seleccionarlos todos, controlar C, saltar dentro de aquí. Control V. Voy a bajarlos de nuevo. Este, Control V, y éste. Y por último, voy a ocuparme de este último. Base eso aquí mismo y quítate estos por ahora porque este es nuestro último. Vamos de atrás a frente. Entonces voy a hacer así, mover nuestro divisor hacia abajo. Entonces es la distancia aquí es 52. En realidad no me gusta la distancia. Perdón por eso. Cuando realmente debo hacer es volver a nuestro estado por defecto y luego ajustar las distancias entre todos nuestros divisores. Entonces tendré que hacer eso primero. A ver, son 50 para seleccionarlo y un texto. Y entonces tal vez estos descansen. Entonces dos y luego 40. Entonces ve aquí mismo. Y vamos a ver, esto es por ejemplo, 60, como lo seleccionamos para ser. Por lo que divisor y quinto 40. Y seleccione estos dos. Así que así. Y veamos desde el divisor para escuchar. Sí, somos 40. Y por último, para los viajes personalizados, simplemente podemos hacer 12 y luego 40. Ahí vamos. Y ahora realmente copiaré y pegaré en todos estos. Entonces lo siento por eso. Pero como puedes ver a veces mientras estás trabajando, básicamente estoy llegando con todas estas soluciones porque estoy tratando de sacar la usabilidad óptima de todos estos diseños. Entonces, por lo tanto, estoy haciendo cambios a sufrir porque este cambio no fue la parte del diseño original que he creado. Entonces, por tanto, simplemente lo estoy creando a medida que voy. Por último, estamos en este cuarto estado, por lo que los viajes personalizados, por lo que realmente podemos ir al primero. Por lo que va a ser mucho más fácil de seguir. ¿ Está protegido mi viaje? Por lo que se encuentra aquí lo es. Yo lo voy a abrir. Trae esto de vuelta, traiga mi divisor hasta el borde. Asegúrate de que esté 40 abajo. Y luego seleccione estos tres. Alinearlo con nuestro divisor. Al igual que esto. Puedo ir con 40 o incluso mejor, puedo ir con 60 para que mantengamos ese mismo espaciado en marcha. Política de cancelación. Entonces no lo es, está girado. Y C, Así 040. Y luego simplemente seleccione estos dos. 60. Elige a tus socios. Tráelo de vuelta, divisor. Son 40. Y luego finalmente, viajes personalizados moviéndose todo el camino por mi escritorio. Son 60. Y finalmente, para el último, viajes personalizados, voy a traerlo de vuelta. Voy a usar nuestro divisor, bajarlo todo el camino y luego ir a 40, así. Y ahí lo tenemos ahora, obviamente lo último que lo vamos a hacer antes de la animación es rotar estos iconos. Entonces vamos paso a paso. Vayamos a venir preguntas, default, state. Entonces todos ellos son S plus ¿está protegido mi viaje? Entonces voy a saltar dentro de esa. Mantenga mi llave de turno y rotado como esta política de cancelación. Entonces es éste. Cerrar el hover y luego giró como suciedad. Cambia, elige a tus socios. Va a ser éste. Eso, y finalmente el último para los viajes personalizados. Y voy a dar click en él. Cerrar icono y así. Entonces ahora que todos esos están terminados, podemos volver al estado por defecto y empezar a animar así prototipo. Y una vez más, vamos a mantener los mismos ajustes. Súper click en el primero. Podemos ver tap qué animar facilidad en fuera 0.6 segundos. Entonces básicamente vamos a usar ese también. Así que mi viaje está protegido y cuándo volver al disco de estado predeterminado mantuvo la misma configuración. Por lo que la política de cancelación va a ir a la política de cancelación socios van a ir a socios. Por lo tanto, elige a tus socios. Y por último, viajes personalizados va a ir a Viajes personalizados y sexualmente probados y ver si esto tiene algún sentido y puede ir todo el camino hacia abajo. Ubicada. Aquí estamos. Entonces si hago click justo aquí, me llevará allá, lo cual está bien. Si pinchamos justo aquí, me llevará allí. Pero no lo animé de vuelta. Entonces vamos a ocuparnos de eso. Entonces vienen preguntas. Estamos en mi viaje protegidos. Entonces vamos a ver. Este es éste va al estado por defecto, política de cancelación. Va a la política de cancelación socios va a socios y viajes personalizados. Ir a viajes personalizados. Está bien. Vamos a animarlos a todos y luego vamos a comprobarlo. ¿ Está protegido mi viaje? Se va a pasar a, lo siento, estado por defecto porque está abierto. Esto va a ir a elegir a tus parejas. Entonces, por último, viajes personalizados va a ir a Viajes personalizados y elegir a tus socios. Esto va a funcionar al estado por defecto. Y por último, viajes personalizados. Se va a ir a Viajes personalizados. Y finalmente, al final, Vamos a ocuparnos del último estado, que es viajes personalizados. Entonces, ¿está protegida su métrica? Esto va a ir a la política de cancelación y esto va a ser un tema porque es o laboratorios o son mucho, elige a tus socios. Y por último, esto va a ir al estado por defecto. Por lo que una vez más, tendrás que explicarle a tu cliente si estás usando animación como datos DES, algunos de estos se van a solapar y mayormente. Entonces vamos a comprobarlo. Y esto funciona bien. Esto funciona bien. Entonces ahora si hago clic aquí, me va a llevar, lo cual está bien. Si hago click aquí. Por lo que en la parte inferior se va a abrir. Y si hago click aquí en la parte inferior, se va a abrir muy bien. Y como puedes ver, ajusta bien nuestro diseño porque estamos usando estas pilas así, por lo que ahora debería funcionar un poco mejor. Y por último, vamos a ocuparnos de estas dos últimas secciones. Entonces déjame dar click en este y ir 80. va a dar click en este, 18 gris oscuro. Entonces veamos qué podemos hacer. Permanezca en el bucle. mejor podemos ponerlo dos líneas como esta y luego ajustar esto para que sean 40. Ajustar esta entrada para ser, vamos a ver 60. A ver 59, 60, está bien. Ahora para la entrada de texto, lo que podemos hacer por la entrada en sí, podemos cambiarla así. Podemos usar esto. Entonces entrada de texto, puedo traerlo de vuelta a aquí. Y puedo traer entrada Vg aquí. Entonces simplemente podemos escribir tu correo electrónico así. Y entonces en lugar de 40, podemos llevarlo a 20. Podemos llevar esto a 20 también. Al igual que así. Y por último, trabajemos con nuestro botón. Entonces me voy a posicionar aquí mismo. Estamos en 29. Entonces, bajémoslo a 40 por ejemplo. Y yo lo voy a abrir. Por lo que el botón de suscripción va a estar aquí mismo. Si voy al prototipo, como pueden ver, no es prototipado. Así que vuelve a Diseño. Vamos a ir con 18 blanco llano y asegurarnos de que lo colocamos en el centro y eso es básicamente todo. Entonces este es 40 y este es 60, que es lo que queríamos en primer lugar. Y todo esto encaja donde el mundo, esto es 150. Este es nuestro tema aquí mismo porque tenemos este espacio vacío, así que lo vamos a tratar al final, pero ahora tratemos con nuestro pie de página. Entonces, antes que nada, voy a traer mi imagen de pie de página y la superposición de color. Y luego voy a lidiar con ese molesto divisor de una vez más. Entonces posiciónelo aquí y haga clic aquí, tráelo de vuelta a aquí. Entonces me voy a ir con el logo. Asegúrate de que esté en el centro. Y en realidad puede hacerlo un poco más pequeño, pero debido a que no estamos usando PNG aquí mismo, déjame realmente en agarrar nuestra posición PNG en Mirador por aquí. Y puede posicionarse al centro. Yo puedo deshacerme de éste. Y asegúrate de que estoy en un centro Shift Alt, click izquierdo, y solo hazlo un poco más pequeño. Para la información del pie de página en su conjunto, voy a ir algo más pequeño. Entonces tal vez 60 de arriba. Creo que va a funcionar un poco mejor así. Ahora vamos a ocuparnos de toda nuestra información. Primero ajustemos realmente estos. Tan principal nav. Y si salto dentro de aquí, se puede ver que todos son 24. Entonces vamos a ocuparnos de eso. Vamos a tratar con 18 y luego blanco. Vamos a seleccionar estos e ir con 18. Y si podemos, y seleccionarlos. Entonces vayamos así. Y veamos 18 blancos, que está bien. Ahora vamos a ocuparnos de nuestras distancias. Entonces lo que podemos hacer aquí mismo es en realidad, puedo, por ejemplo, posicionar este para descentrar, pero no va a funcionar tan bien. No creo que por este tapping puntos, pero en realidad sí funciona. Bueno, vamos a ver si podemos tratar lo mismo aquí mismo. Eso está bien. Entonces en realidad podemos mantenerlo así sólo porque el texto es más pequeño, puedes usar 16 si quieres porque es el pie de página y luego va a ser mucho mejor. Entonces vamos a probarlo en realidad. Entonces 16, Daniel es blanco. Usa estos. 16 luego blanco. Y creo que funciona aún mejor así. Entonces posicionarse aquí, aquí. Y esto va a ser en el centro. Y esto va a ser en el centro. A esto nos vamos a ir por aquí, y esto va a ir por aquí. Entonces en realidad funciona mucho mejor. Y la posición es de 40 entre nuestro logo es de 60, lo cual es bueno. El divisor es bueno. Ahora, vamos a tratar con el fondo por sí mismo. Vamos a mover nuestros iconos de redes sociales al centro. De acuerdo, por ahí, los analistas cambiaron ahora el tamaño de estos textos a 16 también. Entonces para nosotros lidiamos con estos. Por lo que 16 blancos, elige este 16 blanco. Ahí lo tenemos. Y ahora alinémoslo rápidamente. Entonces voy a ir con comprado algo de info, se asegura de que esté centrado ahí mismo. Asegúrate de que esto esté centrado ahí mismo. Creo que aquí. Algo así. Ahora, vamos en realidad. Trabajemos primero con nuestro texto. Entonces me voy a cambiar en estos dos aquí, justo ahí, y luego ajustar esto a aquí. Y ahora que tenemos que realmente podemos ajustar esto para estar en el centro como siempre debería ser. Y ahora vamos a ocuparnos de nuestros antecedentes. Entonces voy a seleccionar a estos dos y traerlos de vuelta. Apenas ligeramente. información de pie de página puede ir, y luego esto puede ir. Para que pueda arreglar mi imagen. Haga doble clic en posiciones por aquí, traiga esto de vuelta, traiga esto de vuelta, y ahí lo tenemos. Por lo que puedes tener más información de fondo si quieres. Incluso puedes hacer algo como esto y posicionar esta información al centro. Entonces ahora es 7171. Por lo que hasta puedo ir un poco más. Por lo que puedo posicionarlos a todos y simplemente traerlos más. Entonces veamos dónde estamos ahora. Estamos en 55. Entonces ese es el tema aquí mismo. Entonces es genial. Yo solo me aseguro de que seamos 60 Control D. Asegúrate de que estamos 60 ahí. Y simplemente expansivo, básicamente lo mismo que hacíamos antes. Y ahí lo tenemos. Este es nuestro diseño terminado. Todo está terminado. Entonces lo que voy a hacer es revisar rápidamente una vez más hasta la cima Pinot. Preview hit. Ve todo el camino hasta la cima. Analistas, explora una vez más. Por lo que tenemos este apartado. Tenemos estos, tenemos estos. Todo funciona como debería. Bonitas animaciones. Y tenemos estos de primer y último minuto, y podemos desplazarnos a la izquierda y a la derecha. Ten este bonito video. Podemos desplazarnos a la izquierda y a la derecha aquí, aquí, aquí, y aquí. Tenemos estos, por lo que podemos desplazarnos aquí también. Se ven un poco diferentes a estos de arriba, pero tienen las mismas dimensiones. Básicamente. Tenemos estos. Tenemos a estos tres socios. Podemos desplazarnos a la izquierda y a la derecha. Tenemos estos tipos de cambio. Podemos desplazarnos a la izquierda y a la derecha aquí también, lo cual es genial. Y tenemos estas respuestas para que veas cómo se ajusta el contenido. Entonces todo funciona como debería. Pero aquí, sí, hay que hacer click hacia abajo para que funcione. No me gusta este espaciado. Entonces voy a lidiar con todos los espaciados a vez y luego voy a arreglar éste por separado. Pero me gusta cómo se ve el resto de nuestro contenido. Entonces ahora lo primero es lo primero, lo que voy a hacer es seleccionar nuestra página principal como lo he hecho, y lo voy a reducir a, por ejemplo, 80. Y veamos cómo se ve eso. Creo que eso funciona bastante bien. El espaciado sigue luciendo bien, por lo que todo sigue siendo agradable y suave. El espaciado es bueno ahí, así que todo está bien. Incluso puedes aumentarlo a 100 si crees que AT es demasiado poco. En realidad, 118 funciona bastante bien. Entonces como dije, lo último que vamos a abordar aquí es éste. Entonces voy a ajustarme manualmente a algo así como 20 por ejemplo. Entonces ahora cuando el contenido se expande, cuando las animaciones están funcionando así, puedo llegar a esa sección para mostrarte en realidad. Para que podamos ir todo el camino de regreso a aquí. Entonces cuando hago clic aquí mismo, se puede ver que el contenido se está superponiendo. Entonces ese fue nuestro principal tema desde el inicio. Por lo que 20 podría no funcionar por esto. Los sólidos van con 60 por ejemplo. Y veamos cómo se va a ajustar eso. Entonces vamos con 60. Y luego cuando traiga esto de vuelta a aquí, haga clic aquí. Se puede ver que ahora es bueno. Por lo que se ajusta muy bien a escuchar porque no vas a poder ver esto. Pero si lo haces, si vas todo el camino hasta aquí y luego aquí, quizás incluso puedas ampliar esto a 100 y mantenerlo exactamente igual. Por último, para redondear esto, lo que voy a hacer obviamente es hacer doble clic aquí mismo en nuestro tablero de arte para subir la altura e ir hasta el final, cerrarlo así. Y rebaño lechero. Por lo que esas son opciones de diseño receptivas que tienes en Adobe XD. Perdón por algunos de estos errores y la muerte ocurrió lo largo de este proceso de diseño receptivo. Pero como dije en el video introductorio a la sección de diseño, todo es por mi software de grabación. Por lo que usé Camtasia para grabar video y utilizo todo tipo de procesamiento para audio. Entonces, por tanto, todos esos se están mezclando de ancho. Mi Adobe XD, también solía Adobe XD al mismo tiempo. Entonces, por eso, por eso todos estos bichos diferentes están sucediendo aquí y allá. Entonces Dan, estás viendo esta sección de redimensionamiento sensible. Y luego en la siguiente sección, voy a explicar compartir. Nosotros vamos a lidiar con compartir. Y por último, una vez que hayamos hecho eso, por fin te voy a decir cómo puedes exportar todos estos activos y enviarlos a tus clientes y desarrolladores para que lo comprueben y finalmente, ojalá terminen tus proyectos. Entonces los veré en el siguiente video cuando vamos a empezar a compartir. 52. Conexión de páginas: Antes de empezar con el compartir con nuestros clientes y nuestros desarrolladores, solo quiero mostrarte rápidamente cómo puedes conectar todas estas páginas en diseño de sitios web. Entonces si cambio a Adobe XD, puedo mostrarles a qué me refiero. Entonces aquí tenemos esos pasos básicos que hemos hecho al inicio de este proyecto. Por lo que diseña breves moodboard, guía de estilo de proyecto de wireframes de papel, que vamos a terminar un poco más tarde. Teníamos wireframes en Adobe XD, después diseño y finalmente, diseño responsive. Entonces si cambiamos al prototipo, no se ve ninguno de estos conectores. Pero si los selecciono todos, se puede ver cuántos de estos conectores tenemos Word sobre emisiones. Entonces para empezar con las animaciones, porque queremos que nuestros usuarios puedan navegar entre estas páginas. Lo que voy a hacer es seleccionar barris de algunas de estas porque puedes ver que aquí tenemos bayas como destino. Por lo que podemos hacerlo ya sea desde aquí o desde aquí, o incluso incluídos a los principales destinos aquí mismo, por ejemplo, y luego conectados. Entonces lo que voy a hacer es seleccionar esta que es ofertas especiales. Ve al último minuto, localiza el París. Y voy a cambiarlo al estado Horace y luego elegir esta flecha entera así, y simplemente haga clic y arrástrela hasta aquí. Y luego voy a usar tap y cuándo usar transition, Disolver, aliviar. Y por ejemplo, 0.8 segundos. Creo que va a funcionar bien. Y luego lo voy a traer de vuelta al estado predeterminado para que los usuarios puedan realmente decir cómo navegar su previsualización de calor, agrandarla y solo un poquito para que puedas ver. Por lo que aún tenemos estos efectos flotando. Funcionan muy, muy bien. Así que flote. Y si optan por hacer click aquí mismo, los va a llevar a esta página. Ahora. Voy a conectar este botón explorado ahora para poder mostrarte cómo funciona la opción de herramienta de desplazamiento. Por lo que se va a desplazar a esta sección en particular. Y para hacer eso, voy a volver al diseño porque recuerdas, los incluimos a todos como una pila aquí mismo. Pero debido a que no usé stack en esta página y puedes ver, simplemente puedo hacer clic derecho y desagrupar todos mis elementos desde dentro. No usé stack porque estaba usando diferentes destinos entre las secciones. Para que veas tenemos 150, tenemos 150, tenemos 150, y aquí tenemos 150 también. Pero porque éste no tiene 150, nos muestra esto, pero no es por estos. Simplemente lo eliminé del grupo. Entonces si voy a explorar, ahora, ábrelo, el localiza mi botón. Ve a su estado de horror. Ir a Prototipo. Haga clic en él. Y lo haremos es tocar en lugar de transición o auto animar. Yo también voy a usar scroll. Y lo que básicamente hace es que imita hipervínculo. Y esto es realmente útil, sobre todo si tienes la navegación que va a seguir en scroll. Es útil porque los usuarios pueden hacer clic donde quieran. Y los va a llevar a esa sección de la página porque todavía va a seguir la navegación. Como dije, esto es realmente útil especialmente para las páginas de aterrizaje donde solo tienes una página y todo el contenido está en esa sola página. Pero en nuestro caso, no es realmente todo tan útil porque tenemos todos estos downs adicionales y todo este complejo sistema de navegación. Entonces, por tanto, sólo vamos a navegar a esta sección, pero quería mostrarles eso como opción. Entonces aquí mismo para el destino, lo que tenemos que hacer es elegir visitar París aquí mismo, que es esta sección. Y puedes elegir, por ejemplo, suavizar 0.8 segundos. Se puede elegir la velocidad a la que se va a traducir una transición. Entonces voy a elegir 0.6 porque no creo que 0.8 sea todo lo necesario. Voy a traerlo de vuelta al estado por defecto. Hit Preview. Entonces cuando los usuarios se desplazan aquí mismo, Veamos si funciona. Por alguna razón no funciona. Entonces vamos al prototipo. Aquí mismo. Ni siquiera incluí el hover en nuestro estado por defecto. Entonces voy a dar click aquí mismo. Voy a elegir hover. Destino va a estar flotando así. Y volvamos atrás y previsualizarlo ahora. Por lo que ahora hover funciona. Y cuando el click los va a llevar ahí, obviamente puedes ralentizar esta animación. Por lo que una vez más, puedo dar click aquí mismo. Ve a flotar. Tenemos desplazamiento de tabulador para visitar París. Voy a salir con facilidad y luego 1 segundo, por ejemplo, volver al estado predeterminado, hit preview una vez más. Así que pasa el cursor, haz clic aquí, y podrás ver lo suave que es. Simplemente te traduce a este apartado. Por lo que solo puedes imaginar esto para ser usado, por ejemplo, si tienes esa navegación flotante justo aquí o aquí mismo con las secciones. Por lo que puedes incluir diferentes efectos de color para mostrar diferentes opciones. Y luego click te va a llevar a diferentes secciones. Por lo que ahora necesitamos conectar este hotel a la siguiente página. Voy a abrir eso de cerca en este apartado. Podemos ir a este hotel. Y tenemos tarjeta de hotel uno. Voy a elegir hover. Tan misma animación. Voy a usar flecha, arrástrela a esta página. Así que toque, transición, Disolver , aliviar, y vamos con 0.6 segundos por ejemplo. Porque no creo que, uh, 1 segundo sea eso necesario. Entonces vamos a previsualizarlo, a ver cómo se ve. Por lo que una vez más, tenemos esta opción click y podemos desplazarnos fácilmente. Como puedes ver, todos estos efectos de terror funcionan. Por lo que sentar suerte en la página de inicio. Al pasar el ratón aquí y hacer clic, Te va a llevar a esta página donde podrás navegar fácilmente por estas imágenes mediante el uso de estas flechas. Y lo que queremos hacer a continuación es arreglar este libro ahora botón y asegurarnos de que vaya a la siguiente página. Entonces hagámoslo. Debido a la siguiente página es Billings quien simplemente puede imaginar que los usuarios han elegido todas estas diferentes opciones. Han elegido este hotel en particular. Entonces ahora lo que quieren es ir a esta página de facturación y hacer un pago. Por lo que tenemos que localizar nuestra barra lateral. Así información del hotel barra lateral. Voy a localizar mi botón grande, que es éste. Ve a flotar. Click, voy a paso transición, Disolver, aliviar 0.6. Entonces exactamente la misma configuración. E incluso puedes elegir conservar ubicación de desplazamiento. Entonces si eliges eso va a transitar y te pones en esta sección de tu página, lo cual es genial si quieres que tus usuarios hagan la transición a sección particular de cada página y no vayan directamente a la parte superior. Pero en este caso queremos que vayan directamente a la cima. Entonces sólo vamos a dejar eso sin control. A continuación, voy a hacer clic en mi botón una vez más, devolverlo al estado predeterminado. Porque una vez más, quiero que los usuarios puedan seleccionar y ese estado. Así que da click justo aquí, Vista previa. Y una vez que van justo aquí y se puede pasar el mouse click, se les va a llevar al despacho n. Ahora tenemos que animar justo este botón aquí mismo. Entonces para hacer eso, voy a dar click justo aquí obviamente. Y también los animamos previamente. Entonces cuando los usuarios hagan clic ahí, los va a llevar a esta sección, pero quiero animar nuestro botón en este caso. Entonces vamos con los detalles del hotel. Tarjeta de hotel, botón grande. Voy a ir a pasar el ratón y al pasar el ratón y ver Tap Transition. A ver si podemos ir. Ahora solo podemos ir al estado por defecto de nuestro botón. Entonces lo que necesito hacer es o dejarlos como están aquí y simplemente animar nuestro último botón, que es éste. Por lo que para confirmación, puedo ir a confirmación, localizar nuestro botón, ir al hover. El recibo de descarga no nos va a llevar a ningún lado porque no tenemos esa opción para diseñar eso. Pero podemos animar esa calma. Entonces cuando van a pasar el mouse, podemos hacer clic en él, arrastrarlo a casa, o simplemente puedes seleccionarlo aquí donde dice destino. Para que esa página de inicio de transición se disuelva, alivia todos los mismos ajustes y voy a traerla de vuelta. Y los usos pueden ser, pueden animarse simplemente aquí mismo si queremos incluir diferentes opciones. Entonces cuando hagan clic en estos botones aquí mismo, déjame llevarte al estado por defecto. Tendría que crear el punto de tabulación para nuestro botón aquí mismo. Por lo que simplemente volveré al diseño. Crea un punto de datos aquí mismo. Punto de toque de botón de calidad. Tendría que usar Control X para cortarlo. Entonces ve justo aquí, toca Control V para pegarlo, e intenta posicionarlo en algún lugar por aquí. Entonces puedo bajar todos estos. Vuelve al prototipo y luego selecciónelo. Haga clic en él. Voy a ir a tocar, ir a auto animate porque quiero hacer la transición al siguiente estado. Entonces déjame hacer eso una vez más. Así que toque auto, animar, elegir un estado, quiero ir al pago. Voy a ir fácil y fuera y 0.6 segundos, por ejemplo. Entonces pasemos al siguiente estado, que es éste. Todavía tenemos ese punto tabulador. Hagamos click en él ahora. Y voy a ir ahora a la confirmación. Y finalmente confirmación tenemos esta animada, que está bien. Entonces vamos a golpear la vista previa, a ver cómo se ve eso. Entonces como dije, podemos dar click aquí mismo. Se va a transitar de todos modos, pero si quieres, puedes pasar el ratón y dar click justo aquí porque tenemos ese botón o quedamos aquí como tenedor de lugar, Se va a transitar aquí. Golpea B ahora. Y por último, estamos aquí. Y cuando queremos dar click en volver a casa, y nos va a llevar de vuelta a la página principal. Por lo que ahí lo tenemos. Así funciona la animación. Como dije, tendrá este expediente. Puedes explorarlo en más detalles. Y como dije, puedes usar scroll ahora, que en mi opinión es una característica fantástica, sobre todo si tienes páginas de préstamo porque puedes conectar todas tus secciones en una sola página y usar la opción de navegación de desplazamiento. No lo usé aquí porque tenemos todos estos downs diferentes. Lo que puedes hacer es simplemente incluir volver a Flecha superior, que se va a ubicar hacia abajo. Entonces va a seguir todo lo demás porque tenemos efectivamente pilas incluidas. Simplemente puedes incluirlo como parte de esta pila o aún mejor, puedes ponerlo fuera de una pila justo en la parte superior y preservar la posición de desplazamiento allí desde el principio, se va a desplazar fácilmente cuando tus usuarios se desplazan hacia abajo por su página y básicamente simplemente conectado para desplazarse a la posición, para volver a la parte superior. Entonces así de fácil es trabajar con estos prototipos. Ahora hablemos de compartir. Y en el siguiente video te voy a mostrar qué opciones de compartir soporta Adobe XD y ¿cómo puedes compartir tu proyecto con tus clientes y desarrolladores? 53. Comparte con los clientes: Ahora que tenemos todo eso resuelto, hablemos de compartir. Y obviamente compartir es extremadamente importante porque puedes diseñar prototipo compartido en Adobe XD, lo cual es una gran función y no necesitas cambiar diferentes herramientas. No es necesario explorar diferentes opciones y lo más importante es pagar por diferentes servicios. Tienes todo dentro de Adobe XD, si estás usando plan gratuito o un plan premium para esta clase? Estuve usando un plan gratuito todo el tiempo solo para mostrarte cómo funciona todo. Y en plan gratuito solo tienes una opción de compartir prototipado. Entonces esa no es realmente una gran opción para ti si estás trabajando en un múltiples proyectos al mismo tiempo. Pero si estás trabajando en un proyecto por proyecto base, si solo estás trabajando en un solo proyecto el cual es proyecto largo, por ejemplo, entonces la opción libre de XD es realmente una gran opción para cualquiera, no importa si eres un profesional o eres sólo están empezando. Todo eso es, es que si solo tienes instalado Adobe XD, si estás usando Creative Cloud de Adobe, si estás pagando la suscripción a Creative Cloud, entonces realmente no importa. Simplemente puedes usar XD en todo su potencial porque ya tienes instalado Creative Cloud. Ahora volvamos a nuestro proyecto y les voy a mostrar algunas opciones de compartir. Entonces justo para un derecho aquí en la parte superior, lo que tenemos es una vez más diseñar prototipo compartir, exploramos el diseño, exploramos un prototipo. Te mostré todas estas diferentes opciones. Y por último, estamos llegando a nuestra parte. Entonces lo que vamos a hacer aquí mismo es que te voy a mostrar cómo puedes ajustar algunas de estas opciones y cómo puedes compartirlas. Ahora, nos muestra que todo está seleccionado aparte de B, proporcionan marcos porque los wireframes de papel, no somos opcionales, no se pusieron dentro de las mesas de trabajo. Simplemente los arrastré y los tiré por dentro. Entonces, por tanto, simplemente están ahí. Cuando vuelvo al prototipo, puedo hacer justo aquí es que puedo, por ejemplo, click en esta opción y puedo dar click aquí. Y me va a mostrar esta opción que se llama Flujo 1. Ahora porque estos están conectados como un flujo uno. Y si hago clic aquí mismo, se pueden ver algunas de estas diferentes opciones. Pero no conecté estas páginas entre sí. Conecté sólo estas páginas entre sí. Por eso me está mostrando así. Por lo que todos estos van a ser Flow 1 y esta va a ser la página de inicio del flow uno. Y voy a hacer doble clic en el interior y llamarlo wireframes. Que debido a que se trataba de wireframes de papel en, estos eran wireframes en XD. Y luego voy a dar clic aquí y hacer lo mismo. Click y este flujo, voy a llamar a diseño. Y por último, voy a dar click aquí mismo. Da click aquí, haz doble clic y llama así a este diseño responsive. Y ahora tenemos estos tres flujos. Ahora lo que es genial de estos flujos es que simplemente puedes conectar uno de ellos y simplemente compartir un flujo, por ejemplo, el diseño. O puedes compartir todos tus flujos y usuarios, clientes, desarrolladores pueden simplemente desplazarse entre tus flujos. Consulta todas tus opciones. Entonces ahora si volvemos a compartir, se puede ver que tenemos estos tres flujos. Entonces si seleccioné este, va a compartir sólo éste. Si selecciono éste, va a compartir sólo éste. Si conecto las páginas entre sí y si selecciono mis wireframes, seguiría teniendo que hacer las mismas conexiones. te mostré en un video anterior entre estas cuatro páginas. Por lo que puedes compartir en esta etapa de tu proyecto. Puedes compartir en esta etapa, puedes compartir en esta etapa, o simplemente puedes empezar aquí, hacer conexiones entre todos tus aeropuertos y todas tus etapas y todos tus flujos, luego compartir todo con tus clientes y desarrolladores. De verdad todo depende de ti lo que quieras hacer y solo ten una cosa en mente, esa es la velocidad. Por lo que depende de tu tamaño general de archivo. Por eso dije, por favor optimiza tus imágenes porque eso va a bajar el tamaño de tu archivo. N te va a permitir trabajar mucho más rápido en XD. Y a la hora de compartir, te va a permitir compartir tus archivos mucho más rápido que con todos estos archivos grandes. Además, depende de tu velocidad de conexión a Internet. Entonces si tienes internet realmente lento y un archivo realmente grande, obviamente va a tardar mucho más en subir a Adobe Cloud. Y por lo tanto, vas a poder compartir el archivo con los clientes y desarrolladores. Entonces si volvemos al archivo, como dije, wireframes y diseño y sin respuesta, solo vamos a compartir el diseño. Es por eso que a propósito dejé todas estas cosas fuera. Pero una vez más, puedes empezar a compartir. Y de verdad te animo a empezar a compartir en esta etapa de tu proyecto. Porque en esta etapa, cliente, un cliente puede ser fácilmente darle comentarios. Puedes ajustar todo fácilmente porque ahora lo has diseñado. En lugar de hacerlo en un papel wireframing etapas de su proyecto. Aquí es donde debes empezar a compartir con tus clientes después de que te den comentarios, después de recolectar esa retroalimentación, realizar esos cambios, entonces puedes pasar al diseño. Entonces simplemente puedes desconectar estos dos flujos. Imagínense, por ejemplo, ir de esta página a esta página, digamos simplemente desconectar ese conector, como te mostré aquí mismo antes. Y entonces ahora has diseñado y también puedes compartir el diseño y el diseño responsive, como dije, para que puedan ver todo. Por último, volvamos a aquí. Por lo que un enlace es para el diseño y se puede administrar el enlace. Como dije, sólo tienes un enlace. Cuando tengas el plan gratuito, como te estoy mostrando aquí mismo, si tienes un plan premium, si has creado la suscripción llamada, entonces tienes opciones ilimitadas para compartir. Puedes trabajar en tantos proyectos como quieras. Ver ajustes. Entonces, ¿por qué estás compartiendo esto? ¿ Es para revisión de diseño, para desarrollo, para presentación, pruebas de usuario, o personalizado, donde se pueden elegir todas estas diferentes opciones. Así que vamos a hacer click rápido, correr a través de ellos. Revisión de diseño, realmente recomendaría compartir eso con tus clientes o tus compañeros de equipo porque entonces van a poder dejarte retroalimentación específica. Van a poder dejar tus comentarios. Y luego con esos comentarios, simplemente puedes progresar y hacer esos cambios. Desarrollo, obviamente para desarrolladores porque va a ser ambiente mucho más complejo. Dentro de ese entorno, van a poder descargar activos que van a poder ver fragmentos de código. Van a poder ver algunos colores. Opciones de fuente y tanto más presentación es básicamente que elimina todas estas opciones y simplemente te deja con experiencia básicamente a pantalla completa para presentación, lo cual es genial si quieres presentar tu diseño final, por ejemplo, a tus clientes o a diferentes stakeholders son socios o algo así. Las pruebas de usuario son diferentes una vez más, porque elimina todas estas diferentes opciones que están ahí para los usuarios. Por lo que no van a poder ver los puntos de claqué. Por ejemplo, tendrían que figurar el DOM, averiguarlos ellos mismos. Por lo que tendrás que medir cuánto tiempo les lleva hacer clic en esos puntos de datos, lo fácil que es navegar por toda tu interfaz de usuario y lo rápido que están llegando a su ubicación objetivo. En nuestro caso, por ejemplo, reservar este hotel, digamos. Por lo que tendrás que medir todas estas cosas en las pruebas de usuario. Y por último, costumbre. Como su nombre indica, puedes personalizar tu experiencia aquí mismo. Entonces, empecemos con la revisión de diseño. En primer lugar. Ejes de enlace, puedes dar click aquí mismo. Por lo que cualquier persona con el enlace puede ver esto solo personas invitadas que pueden invitarlas vía e-mail y cualquier persona con contraseñas. Para que pueda proteger con contraseña su archivo y su enlace. Entonces no todo el mundo puede verlo. Escogeré a cualquiera con el enlace, luego pulsa Crear enlace una vez más, dependiendo del tamaño del archivo y tus velocidades de conexión a Internet, te va a llevar más o más corto. Y ahora que ha terminado de compartir, como pueden ver, tenemos todas estas opciones. Por lo que simplemente puedes copiar este enlace y puedes pegarlo en tu navegador y abrirlo. Una vez más, lo tenemos para una revisión de diseño. Lo tenemos para cualquier persona con el enlace. Puedes compartirlo con desarrolladores aquí mismo, y puedes actualizar el enlace también. Puedes hacer click aquí mismo e ir por el desarrollo, que es lo que vamos a hacer. Pero finalmente, quiero explicar esta opción. Como puedes ver ahora tenemos que actualizar porque llegamos a ese límite de un enlace libre. Si estás trabajando y haciendo algunos cambios, puedes ver que tenemos esta opción. todas formas puedes copiar el enlace desde aquí. Entonces si volvemos a Diseño, realizamos algún cambio adicional. Podemos volver a Compartir, golpear Actualizar, Link Noticias aún tienen ese enlace que puedes compartir con tus clientes se va a ubicar exactamente en la misma ubicación, va a estar exactamente en el mismo lugar. Entonces este enlace no va a cambiar, pero el contenido dentro de este enlace va a cambiar cuando hagas algunos cambios de diseño aquí mismo. Entonces como dije, simplemente puedes hacer un cambio. Haga clic en Actualizar Enlace va a rotar una vez más una actualización. Y luego puedes dar click aquí mismo para copiar el enlace y compartirlo con tu cliente. Ahora si te muestro cómo se ve todo en línea. Entonces como dije, voy a dar clic aquí mismo, basar eso en mi navegador. Salta aquí mismo. Y así es como se ve una vez que está dentro del navegador. Una vez más, todas estas opciones funcionan tan mismo como antes de que podamos ver. Y por ejemplo, si hago clic justo aquí, se va a la transición a París, se va a la transición a hogarth lo hace como se puede ver, todo funciona como debería y como lo creamos, si hago clic aquí está nos va a mostrar destino bienestar. Entonces todo funciona como debería. Y también puedo desplazarme hacia abajo y porque esto tiene muchos de estos diferentes elementos en su interior. Como puedes ver, todo funciona como debería. Y echemos un vistazo a esos elementos aquí mismo. Entonces si hacemos click aquí mismo, nos va a llevar a escuchar, solo dale tiempo para cargar y se va a quitar todos estos diferentes hipo. Por último, vamos a comprobarlo para pasar a la siguiente página, explorador. Ahora, como pueden ver, todo funciona como imaginábamos y como lo conectamos. Y siempre te recomendaría que revises todo esto antes de que envíes esto a tu cliente. Y solo para poder decir, Vale, ahora todo funciona. Asegúrate de decirles que lo dejan. Por lo que está cargado en eso y en su extremo también. Entonces todo funciona como debería. Y volvamos a casa, de vuelta a casa. Porque quiero mostrarles las opciones de comentarios. Por lo que puedes invitar a la gente a escuchar. Simplemente puedes invitarlos a editar, puedes invitarlos a ver. O una vez más, simplemente puedes compartir este enlace. No necesitan cuenta de Creative Cloud para poder hacer comentarios. Siempre es mejor si lo hacen, pero no tienen que hacerlo. Y básicamente, lo que puedes hacer es compartir este enlace con ellos y luego van a poder dejarte retroalimentación cuando se trata de retroalimentar, lo que pueden hacer es que puedan mencionar a la gente. Entonces si tienen una cuenta y por ejemplo, su nombre es John y el nombre de la otra persona es, por ejemplo, Mark. Simplemente puedes mencionar en mark, en John, y luego podrán ver que los mencionaste en una página en particular y en un comentario en particular. Aquí mismo estamos en una página de inicio para que puedas dar click, va a llevar tu derecho aquí a esta página, y también puedes navegar aquí. Entonces esta es la segunda página, tercera página y cuatro páginas, y contendrá muchas de estas páginas adicionales si las compartes todas en un solo flujo, como les expliqué. Y también puedes hacer clic aquí para volver a la página principal cuando se trata de comentarios, simplemente puedes dejar un comentario como es. Entonces gracias por el diseño. Por ejemplo, puedes hacer clic en Enviar y va a vivir en esta página en particular, que es el diseño de la página principal, que es genial. Y también puedes ver el diseño de la página de inicio aquí. Puedes dar click aquí mismo. Y te va a mostrar estas páginas así. Entonces para una vista previa más fácil, o puedo dar clic aquí y me va a llevar de vuelta a aquí. Y también puedes señalar a cierta parte de tu página. Entonces vamos a bajar a aquí por ejemplo. Y simplemente puedes hacer clic en este pin, soltarlo aquí, por ejemplo, son directamente sobre elementos y decir, por ejemplo, hacer este texto. Por ejemplo, puede hacer clic en Enviar. Y finalmente puedes trabajar en ello, hacerlo azul, y luego venir aquí mismo y darle un resultado. Va a desaparecer porque hiciste ese cambio. Por lo tanto, puedes hacer un seguimiento de todos tus cambios. Puedes hacer un seguimiento de lo que tu cliente y exigió para que hagas esos cambios. Y puedes hacer un seguimiento a dónde va el proyecto en esta etapa en particular. También puedes mostrar u ocultar comentarios aquí mismo. Y aquí puedes ocultar anotaciones, que son estas cosas. Entonces por ejemplo, cuando hago clic aquí, arrastra y tipea una vez más hacen este flujo, por ejemplo, como click para poder ocultarlo y no van a poder verlo, pero voy a poder verlo. Entonces cuando un pase por encima de él, me va a mostrar que también, si haces más cambios, se asemejan aquí. Y vamos a escribir esto, hacer esto más estrecho. Presentar. Entonces cuando haga clic aquí mismo, me va a mostrar que es el número 1. Vamos a mostrarles por un segundo. Entonces cuando haga clic derecho me va a mostrar que ese es éste. Cuando hago clic justo aquí, debería llevarme justo aquí, pero no lo hace por alguna razón. Aquí estamos. Entonces me está llevando justo aquí y también puedes moverlo de esta posición a esta posición. Pero de todos modos, se puede ver que todos estos comentarios se encuentran en un diseño de página de inicio. Por último, aquí mismo puedes filtrar comentarios a los que puedes desplazarte entre, por ejemplo, los comentarios de John marcas comunes. Para que puedas hacer lo que quieras con esa NSA dijo que simplemente puedes hacer clic aquí, dale el resultado aquí. Y por último, también puedes eliminar esos comentarios, pulsa aquí mismo. Y puedes eliminarlo de esta página en particular. Entonces básicamente eso es todo. Lo último es que puedes hacer click aquí mismo para entrar al modo de pantalla completa. Por lo que no tienes todas esas opciones a un lado. Quizás esta sea la mejor opción para presentarles a sus usuarios o clientes o cualquier otra cosa. Y entonces simplemente puedes golpear escape. Y te va a traer de vuelta a esta página. Entonces eso es todo por compartir con tus clientes. En el siguiente video, vamos a hablar de compartir con los desarrolladores. ¿ Cuáles son algunas opciones que puedes usar para compartir con desarrolladores? Y cuáles son algunas opciones que los desarrolladores están buscando para que sepas para qué compartirlo. Entonces te veré ahí. 54. Comparte con desarrolladores: Desarrolladores necesitan saber las cosas técnicas mientras que el cliente necesita saber a dónde va la estructura, utiliza la información que solicitaron y ¿ va el proyecto en la dirección que querían? Pero una vez más, los desarrolladores quieren saber cosa completamente opuesta como, por ejemplo, ¿cuál es el tamaño de la fuente que usas, colores has usado? Qué espaciamientos, márgenes, relleno. Entonces todo ese tipo de cosas técnicas. Si bien del otro lado, los clientes solo quieren ver si tienes la estructura correcta. ¿ Les gusta el diseño? ¿ Incluiste el contenido dentro? Tener el mensaje se ha difundido como lo querían. Entonces por eso hemos diseñado opciones de compartir para un cliente y luego desarrolladores compartir opciones. Entonces si vuelvo a Adobe XD y te muestro esto, tenemos revisión de diseño, que te mostré en el video anterior. Y aquí mismo tenemos desarrollo. Entonces voy a dar click ahí. Y lo que tienes es exportar para web. Y tienes estos activos descargables. Por lo que los tenemos como PNG. Por lo que puedo dar clic aquí para incluirlos en el paquete descargable. Cualquiera que tenga el enlace lo puede ver y simplemente puedo presionar Actualizar Enlace. Y una vez más, va a actualizar este enlace con todas estas configuraciones que acabo de incluir. Y una vez que termine, lo que podemos hacer es dar click aquí mismo para copiar el enlace. Y voy a hacer es otra vez, abre mi página. Voy a golpear Control V para pegarlo, presionar Enter, y esperar a que se cargue sólo un poquito. Porque una vez más, depende si tu archivo es grande o si es pequeño. Y una vez que termine de cargar, puedes notar que ahora tenemos estas opciones aquí mismo. Entonces cuando hago clic aquí, tenemos todos los activos para desarrolladores que cargamos. Podrás ver nuestros logotipos, puedes ver todas estas cosas y simplemente pueden hacer click en él y descargar si quieren. Y aquí mismo lo que tenemos son básicamente fragmentos de código. Por lo que fácilmente pueden mirar estos colores porque los creé como fichas de diseño. Entonces si te llevo de vuelta a nuestro diseño, por ejemplo, si abro nuestro panel de activos y nuestros ácidos de documentos, espere a que se cargue solo un poquito porque tenemos muchos de ellos. Y cuando lo hacen, se puede ver que tenemos todos estos colores se nombran correctamente como tokens de color. Y también puedes hacer esto también con tus fuentes. Entonces, por ejemplo, puedes llamar a este rubro número uno. Entonces H1, H2, H3, puedes hacer eso. También puede cambiar el nombre de sus fuentes a, por ejemplo, fuente de párrafo. Puedes llamarlo a sub-encabezado, y puedes darle a tus fuentes todos estos nombres diferentes. Por lo que los desarrolladores podrán entender fácilmente dónde están entrando todas estas fuentes en la página. Entonces si te llevo de vuelta a aquí, puedes ver que tenemos, por ejemplo, estrella color melocotón, naranja gris claro, que son básicamente todos nuestros colores aquí mismo. Y los desarrolladores pueden simplemente copiar este código hexadecimal desde aquí, y pueden incluirlo bajo este nombre en su código. Ahora cuando se trata de compartir desarrollo, y cuando hago clic aquí mismo, puede ver el tamaño de la ventana gráfica es de 1920 por 1080, que es esto lo que los usuarios ven aquí mismo. Y el tamaño general del diseño es de 1920 por 16,640, que es básicamente cuando empiezan a desplazarse hacia abajo. También, pueden inspeccionar elementos individuales porque aquí mismo tenemos todos nuestros activos, todos nuestros colores, todos nuestros estilos de carácter. Y ni siquiera incluí imágenes, que les voy a mostrar en la siguiente parte cuando realmente lleguemos a exportar. Y eso se va a poblar aquí también, lo que voy a volver sólo para mostrarles todas estas diferentes opciones. Por último, aquí mismo tenemos Estilos de Carácter. Y si hago clic aquí mismo, podemos ver fuente, familia de fuentes, peso de fuente, tamaño de fuente, color, cuidado en el espaciado y espaciado de líneas para que sepan qué incluir en el código. Si me desplaza todo el camino hacia abajo, se pueden ver diferentes interacciones. Por lo que lay-out grid, columnas, ancho de canalón, si recuerdas lo que incluimos, cual es especialmente importante para el diseño responsive, tenemos una columna con márgenes o basicidad. Por lo que estos márgenes son solo para el contenido dentro de las interacciones. Tan diferentes interacciones entre diferentes elementos. Y se puede ver cuántas interacciones más débiles, razón por la cual este curso obviamente tarda tanto tiempo. Por último, lo que quería mostrarles es esto, por ejemplo, quiero dar click aquí mismo. Me muestra diferentes distancias entre diferentes elementos. Me muestra aquí mismo. Por lo que ancho del texto, altura del texto. Me muestra x e y. ejes es mostrarme font-style. Entonces cuál es, es el estaño regular, audaz cualquiera que sea el tamaño. Por lo que una alineación de 120 píxeles es hacia el centro. Tenemos esto que es el espaciado de caracteres mentira altura y así sucesivamente. Tenemos apariencia. Entonces color que es casi negro, y saben qué incluir su obesidad 100%, que una vez más es realmente importante para ellos. Contenido, ofertas especiales, que básicamente es toda esta sección. Tenemos el CSS, por lo que arriba a la izquierda, un ancho y alto. Pueden incluir todas esas opciones y tienen diferentes propiedades de interfaz de usuario. Por lo que las variaciones para la fuente, tenemos espaciado entre letras, color, fuente de alineación de texto. Para que puedan usar toda esta información CSS y ponerla dentro del código. Por lo que estamos haciendo que las vidas de los desarrolladores sean mucho más fáciles con todas estas diferentes opciones, porque anteriormente no tenían estas opciones. Ahora lo hacen dentro de Adobe XD. Y una vez más, simplemente pueden hacer clic aquí y elegir entre todos estos fragmentos de código y simplemente pueden incluirse en su propio diseño. Ahora bien, esto, lo que expliqué se puede aprobar y aplicar a cualquier otra cosa. Entonces ahora hice clic aquí mismo tenemos estado por defecto, tenemos fecha Horace, así que puedo cambiar entre ellos aquí mismo en mi navegador. Se puede ver que el grupo se llama París, que es nombre del componente así como apariencia de 100% CSS. Tenemos interacciones aquí mismo. Por lo que tenemos todos esos elementos diferentes e incluso puedes ir más profundo. Por ejemplo, aquí mismo, puedo cambiarlo para pasar el rato. Puedo dar click aquí mismo. Y podemos ver interacción transición tabulada. El destino es el diseño del destino. Entonces cuál es la siguiente página. Entonces lo que muestra a dos desarrolladores qué tipo de transiciones necesitan para usar facilidad de entrada, salida y toda esa información diferente. Entonces básicamente esto es. Sueño desarrollador porque pueden navegar fácilmente por todos estos elementos. Pueden ver distancias, pueden ver el estilo, pueden ver todo tipo de diferentes elementos en su interior, lo que también puede ser cierto para esto. Por lo que tenemos estado por defecto. Podrán inspeccionar fácilmente todos estos diferentes estados de nuestra navegación. Pueden ver, por ejemplo, ¿dónde se encuentra esta, por ejemplo, la ilustración a partir de este texto? A qué distancia se encuentra esto, por ejemplo, de este borde, de este borde y así sucesivamente. Por lo que básicamente pueden navegar en torno a la edición y todos estos diferentes detalles. Se puede ver que somos 40 de aquí, somos 40 de aquí. Y también pueden sostener ALT y control y ver cuándo mantienen el control y pasar el cursor sobre las distancias entre todos los elementos alrededor de los elementos seleccionados, como por ejemplo, explorar ahora en este caso. Entonces, por fin, lo que quiero mostrarles es esto, Digamos que quiero incluir esta imagen por ejemplo, para poder dar click en ella directamente. Puedo mantener mi Control y hacer clic. Y lo que tengo aquí mismo es marca para exportación. Por lo que no usé esta opción. Y les voy a mostrar eso más adelante en la siguiente sección para la parte de exportación. Porque cuando comercializa para la exportación puede marcar fácilmente todas sus imágenes para la exportación, simplemente puede hacer clic en él y hacer clic aquí mismo, lo que lo va a marcar para la exportación. O simplemente puede usar Shift E, que va a marcar ese activo para su exportación. Entonces podemos cambiar aquí mismo al hover. Si tenías esta imagen con un nombre diferente, y luego cuando la marques para exportación y regresas aquí, va a aparecer aquí. Para que podamos ir a algún lugar afuera. Y con estos ácidos van a aparecer imágenes. Por lo que cuando estás marcando para la exportación, puedes marcar imágenes, puedes marcar iconos. Puedes marcar en estos elementos B y G como estos logotipos, los activos de los Andes son. Por lo que puedes marcar todos esos activos para la exportación y puedes prepararlos así. También puedes marcar tus botones para exportar, por ejemplo, puedes marcar todo tipo de elementos diferentes como estos iconos a la parte superior, por ejemplo. Pero eso no lo recomendaría necesariamente. Y en la siguiente sesión, voy a mostrar diferentes opciones que en realidad puedes usar cuando estás marcando estas cosas para la exportación. Porque queremos asegurarnos de que los desarrolladores obtengan el diseño perfecto y la estructura perfecta porque va a hacer su vida mucho más fácil, pero también nuestras vidas mucho más fáciles porque no vamos a ir atrás y adelante en este proyecto entre nosotros y los desarrolladores. Entonces por eso veo prepararlo todo, que es tu trabajo, que es tu responsabilidad de frente. Por lo que no te molestan más tarde una vez que este proyecto llegue a las etapas de acabado. Para que los desarrolladores puedan hacer su trabajo. Hiciste tu trabajo correctamente y todos están contentos en el equipo. Entonces como dije en el siguiente apartado del curso, vamos a hablar de exportar. Te mostré estas opciones de exportación y vamos a hablar de ellas un poco más después. Pero también te voy a mostrar algunas opciones de exportación directamente desde Adobe XD, que son algunos de los formatos de archivo a los que puedes exportar. Y cuáles son algunas opciones estructurales para ti cuando se trata de carpetas de archivos, empaques y compartir entre tus clientes y desarrolladores. Entonces te veré ahí. 55. Exportar tus recursos: Cuando se trata de compartir tus archivos con tus clientes, normalmente es simplemente enviarles el archivo y eso es básicamente todo. Y entonces esos desarrolladores de ahí pueden editar ese archivo, pueden exportar ese archivo por su cuenta. Pero lo que me gusta hacer es básicamente exportar todos mis archivos. Por lo que no escucho de esos clientes y de sus desarrolladores para ese proyecto en particular. Siempre me gusta llegar de nuevo a ellos y preguntarles ¿Necesitas alguna otra ayuda? ¿ Necesitas alguna otra asistencia? Pero como he hecho mi trabajo correctamente, no me van a molestar en el futuro. Compartí todo lo que solicitaron y más durante el proceso de creación de este proyecto. Entonces, por tanto, no me van a molestar más tarde. Ahora cuando se trata de compartir, tienes múltiples opciones para compartir tus archivos con tus clientes y desarrolladores. Una vez más, los clientes suelen estar interesados en cómo se ve el diseño. ¿ Todo es funcional? ¿ Incluiste toda la copia dentro y todas esas cosas básicamente cosméticas. En tanto que los desarrolladores, por otro lado, como dijo en algunos videos anteriores, están más interesados en estas cosas específicas como márgenes, remo, colores, tamaños de fuente, etcétera. Entonces, por lo tanto, tienes que conocer a tu público básicamente, cuando estás compartiendo con cliente, básicamente suele bastar para enviarles el archivo original, archivo Adobe XD, y eso es básicamente todo. Pero cuando estás trabajando con desarrolladores, tienes que entender la estructura de archivos. Tienes que entender diferentes formatos de archivo porque no todos los formatos son iguales, no los formatos, no todos los formatos se utilizan para exactamente lo mismo. Y eso es lo que vamos a discutir en esta parte de la clase. Te voy a compartir, ¿ cómo puedes exportar diferentes cosas desde Adobe XD y qué opciones estás compartiendo? Entonces si cambio a Adobe XD y les mostraré que aquí tenemos nuestro expediente. Pero si minimizo esto y creo una nueva carpeta aquí mismo en mi escritorio y la llamo, por ejemplo, proyecto. Desde mi profundidad y que sea un nombre, proyecte ácidos. Y cuando lo abro y lo traigo aquí mismo, lo que voy a hacer es crear unas cuantas carpetas. Entonces voy a ir con una página de inicio. Y permítanme volver a XD para ver los nombres de estas páginas. Por lo que el destino es el segundo. Por lo que el número 2 va a estar en distribución. A ver. Se va a seleccionar la oferta número tres. Y por último, el número cuatro va a ser para el pago. Entonces lo que voy a hacer y lo que suelo hacer es saltar dentro de cada una de estas carpetas para cada una de estas páginas diferentes. Y luego creo mis tallas. Entonces voy a crear el número uno original, que es este tamaño en el que diseñamos, que es 1920. Y luego abajo. Y luego voy a crear todos estos otros tamaños de proyecto. Entonces voy a crear carpeta adicional, llamarlo escritorios grandes. Entonces voy a golpear Control V, y voy a renombrar esto. A, por ejemplo, tres dispositivos grandes. Voy a usar Control V y llamar a este número de cuatro tabletas. Yo suciedad y hago el número 15 fuentes. Ahora dentro de cada uno de estos, vamos a exportar elementos separados. Obviamente no te voy a molestar con exportar cada uno de los elementos, pero te voy a mostrar, por ejemplo, aquí mismo en nuestra página de inicio porque contiene la mayoría de nuestros elementos, cómo todo eso se puede exportar. Ahora tienes dos opciones, porque creamos esta guía de estilo, que vamos a terminar en un segundo, pero la creamos y puedes exportar todos tus elementos desde aquí. Entonces lo que vamos a hacer en realidad es seleccionar todos nuestros iconos así. Pero tenemos que seleccionarlos de nuestra carpeta así entonces porque la tenemos justo aquí. Por lo que viajando activos del proyecto, tenemos que localizar esa carpeta ahora para exportar todos nuestros activos. Y esto es lo que hago. Básicamente, exporto todas mis imágenes como JPEG o PNG. Los exporto como JPEGS si no tienen fondos transparentes. Entonces, por ejemplo, si estás sacando a la gente de las imágenes, si estás usando imágenes de logotipos como lo hicimos y te mostré en la sección anterior de la clase. O si, por ejemplo tienes algunas opciones diferentes que lo incluyes como un gradiente o algunos elementos diferentes que tienen sus fondos recortados, entonces vas a usar PNG. Pero de lo contrario, si solo tienes imágenes planas como las tenemos aquí mismo, por ejemplo, para las imágenes de estas ubicaciones y así sucesivamente, entonces te recomendaría que las exportaras como JPEG. Obviamente. Posteriormente podrás optimizarlos aún más usando motín o imagen opt-in para Mac, por ejemplo, como nuestra ya explicada. O los desarrolladores pueden hacer eso en su propio software. Si tienen software específico o algún requisito específico, pueden optimizarlo más allá, solo para hacer esas imágenes aún más pequeñas en tamaño de lo que son aquí mismo en XD. Y el tamaño obviamente es realmente importante cuando se trata de cargar sitios web. Entonces, cuando se trata de cargar páginas, cuanto más pequeños sean tus artículos, más rápido se va a cargar la página. Por lo tanto, a Google le gustará más porque su página se carga más rápido. La experiencia de usuario para tus usuarios es mucho mejor. Y por lo tanto van a optimizar más tu página cuando empiecen a desplazarla y arrastrarla. Y lo van a empujar hasta la cima. Si está bien optimizado para SEO obviamente. Pero es solo uno de estos requisitos para asegurarse de que todo se cargue lo más rápido posible, que todo sea fácilmente accesible, fácilmente tocable, visualizable, y así sucesivamente para sus usuarios. Entonces, por lo tanto, tener optimizados todos tus artículos y hacerlos lo más pequeños posible en tamaño es solo uno de estos muchos componentes diferentes que entra en la optimización SEO. Entonces si volvemos a aquí, como dije, si seleccionamos todos nuestros artículos, los voy a exportar como SVG. Y SVG es un gran formato de archivo para iconos porque escala hacia abajo infinitamente. No va a perder calidad. Entonces, por tanto, si estás exportando tus iconos y los tienes en estos tipos de archivos como lo hicimos nosotros. Para que podamos editar cada uno de estos artículos aquí mismo. Por eso sigo recomendando Envato Elements y no ninguno de estos artículos gratuitos y sitios web gratuitos. Así que asegúrate de exportarlos como SVG. Porque una vez más, los desarrolladores podrán entonces escalar todos estos SVG en código. cambios mansos, más fáciles facilitan las adaptaciones. Entonces, por tanto, SVG es el camino a seguir. Ahora para empezar, en realidad iré aquí mismo con nuestro logo y puedo exportarlo como SVG. Pero como viste, tuvimos algunos problemas mientras realizábamos redimensionamiento de respuesta. Entonces simplemente voy a seleccionar estos dos. Y puedo llamar a este logotipo oscuro, por ejemplo, así. Y luego voy a golpear Control E. Y aquí mismo voy a asegurarme de localizarlo para viajar por la página principal. Y voy a usar la página de inicio o aún mejor. Puedo, por ejemplo, hacer clic aquí y por ejemplo, crear una nueva carpeta llamada iconos y logotipos. Así. Selecciónelo, haga clic en Seleccionar carpeta. Y porque como dije, vamos a usar PNG como nuestro logotipo, simplemente seleccione el diseño. Png hit export se va a exportar. Y luego vamos a seleccionar todos nuestros iconos, razón por la cual estamos creando la guía de estilo en primer lugar hit Control E en lugar de PNG, voy a elegir SVG. Voy a elegir la misma carpeta, pulsa Exportar. Y solo estoy usando básicamente estas opciones predeterminadas para exportar. Y va a tomar un tiempo porque las indies tienen el color y tienen el fondo plano en su interior. Lo que también puedo hacer es saltar aquí mismo. Acude a mis iconos, así que vuelve a aquí, iconos y logotipos. Y puedes ver todos estos iconos tan soportados como SVG. Y tenemos todos estos como PNG, que nuestro logo y logo oscurecieron. Si un niño ve y luego iconos grandes, puedes ver nuestros logotipos, logo claro y logo oscuro en todos estos se exportan obviamente como SVG. Por último, tenemos estas opciones transparentes para todos estos iconos. También puedo exportar eso. Entonces por ejemplo, puedo hacer clic en contorno y luego puedo hacer clic en Iconos de contorno desde ahí. O en realidad puedo saltar a la página donde están todos esos iconos. Puedo seleccionarlos como So. Golpea Control E para esta página en particular, para este tamaño en particular, y luego exporta así. Entonces tienes esas dos opciones. O bien puedes ir exportarlos todos a la vez como lo hicimos nosotros. Yo sólo tendría que cambiar todos estos para delinear estados como éste. Haga clic aquí, haga clic en este esquema y luego haga por todos ellos y luego simplemente exporte hacia fuera. Lo que también haría es quizás aquí mismo, asegúrate de elegir carpeta de color y poner todas estas de color dentro de ahí, y luego crear otra carpeta llamada delineada, y luego poner todos estos iconos delineados ahí dentro. Además, lo que puedes hacer es lo que mencioné anteriormente para estas imágenes. Por ejemplo, puedo saltar aquí mismo, seleccionar este mercado de imágenes para exportación. Pero el problema con la comercialización para la exportación, y puedo demostrarlo con, por ejemplo, este ícono. Puedo darle click ubicado justo aquí, aquí está. Por lo que mercado para la exportación. Si lo marcas para exportación, lo que puedes hacer es ir justo aquí al archivo, luego exportar. Y puedes hacer lote. Y puedes seleccionar, por ejemplo, SVG o PNG. Este es nuestro tema porque quiero que esta imagen se exporte como JPEG, pero quiero que este icono se exporte como SVG. Entonces ese es su tema principal y por eso digo no uses esas opciones porque puedes marcar esto fácilmente y crear una guía de estilo como esta y luego exportarlas como te mostré, y luego simplemente elige tu imágenes. Por lo que desmarcaré esto para exportación. Y entonces por ejemplo, yo habría considerado marcado. Tendría atracar tu marca. Y debido a que teníamos que ser nuestro componente principal, acababa de crear y esas instancias de este componente. Por lo que una vez más, tenemos diseño de homepage. Por lo que iremos a File Export Batch. Escogeré, por ejemplo, P&G, y luego elegiré diseño de la página de inicio. Así que ve a aquí, página de inicio original, y luego haz clic en Seleccionar carpeta, pulsa Exportar. Entonces como dije, ya sea como PNG o SVG, va a hacer lo suyo. Y finalmente, si vamos a esa carpeta en particular, así homepage original, se puede ver que exportó cada cosa que se marcó, que básicamente son todas estas imágenes en diferentes tamaños, todas estas imágenes en diferentes tamaños. Por lo que estos cuatro básicamente, exportó todas nuestras banderas en diferentes tamaños y nuestros logotipos en diferentes tamaños. Si hago eso por este, por ejemplo, y también exportaría esto como PNG, video promocional Color Overlay y video promocional. También puedes seleccionarlos así. Tan tontos estos para golpear Control E, está en la misma carpeta que PNG. O aún mejor, puedo cambiarlos a JPEG por ejemplo, pero no voy a hacer eso porque este Color Overlay tiene una obesidad, como se puede ver aquí mismo. Por lo que los exportaré como ser G. Realmente no importa. Se pueden exportar imágenes planas como ésta, por ejemplo, sb y G. Realmente no importa. Por lo que sólo va a acelerar un poco más tu flujo de trabajo, pero también puedes exportarlos ya que JPEGS realmente depende de ti. Entonces si me desplazo aquí mismo, y si toco Refresh en esta carpeta en particular, vea a dónde los exportó. Aquí estamos. Por lo que video promocional y video promocional superposición de color. Por lo que tienes todas esas opciones diferentes. Y probémoslo con éste porque es, era nuestro componente mayor. Entonces si golpeo marca para exportación y luego lo hago una vez más, así File Export, Batch, PNG, export. Debería darme esa advertencia. Entonces con todos estos Perdón lugar. Y una vez que termine de cargar, debería poner todas nuestras imágenes desde aquí hacia allá. Entonces veamos si eso funcionó porque obviamente hicimos todos estos cambios importantes y masivos en estos. Entonces solo quería ver si va a incluir o hacer clic derecho y refrescar nuestra carpeta porque ¿quién tendría todos estos? Por lo que no sólo incluyó esta barreras una. Y eso es lo que estaba diciendo. Cuantos más cambios hagas a tus artículos, básicamente, tendrás que ir al mercado londinense para la exportación, mercado equivocado para la exportación. Y esto obviamente es mucho más sencillo si lo estás haciendo mientras diseñabas. Entonces en cuanto, por ejemplo, posicione esto, Digamos imagen de Barcelona dentro. Tan pronto como lo coloques dentro, simplemente haz clic aquí y luego te olvidas de ello después de terminar tu diseño y es hora de exportar, luego vienes aquí mismo al lote de exportación File, y eso es todo. También puedes notar opción de arveja aquí mismo. Por lo que el arbolito es básicamente esta herramienta externa la cual es utilizada por equipos de todo el mundo, especialmente en este campo UX de la UI. Y realmente es extremadamente útil en Adobe XD también. Por lo que funciona el ardiente de madera dura y también hay muchas opciones diferentes por ahí disponibles. Si estás trabajando como parte del equipo, quizá consulta con tu equipo y mira si hay esa opción para ti en Adobe XD, porque hay tantos softwares y herramientas diferentes por ahí. En realidad, los usuarios no saben cuál elegir, pero como dije, Zeppelin es uno de los más grandes. Entonces para usar Zeplin, básicamente tendrías que saltar aquí mismo a nuestros plugins. Haga clic en sus plugins, vuelva a aquí. Y luego voy a dar clic aquí para ir a buscar nuevos plug-ins. Y básicamente este plugin se utiliza solo para hacer esas integraciones entre tu cuenta de Chaplin y tu cuenta de Adobe XD. Por lo que es mucho más sencillo que funcione de esa manera. Entonces si lo busco aquí mismo, me centro, por ejemplo, aquí está. Por lo que está solicitando XD, tendrías que instalarlo y luego conectar tu cuenta de arpillera con tu XD. Así que simplemente inicia sesión en tu cuenta de ardiente desde XD y luego funciona un poco diferente. Entonces en lugar de que compartas todos estos diferentes elementos, todas estas diferentes imágenes y opciones con tus desarrolladores. Subirías toda tu mesa de trabajo. Y entonces el muestreo mostraría lo que ya te muestro aquí mismo. Por lo que mostraría todas estas diferentes opciones, todas estas diferentes actualizaciones y todas estas configuraciones diferentes. Por lo que los desarrolladores podrán exportar fácilmente esos activos directamente de arpling a qué formato de archivo ARAF quieren. Entonces les estoy dando todas estas diferentes opciones y ejemplos. Para que puedas elegir lo que quieras hacer. Y a veces no puedes elegir porque tus desarrolladores elegirán. Por lo que siempre varía. Depende de las preferencias del usuario. Entonces como dije, a algunos desarrolladores les gusta mucho hacer la forma en que el método del disco, como te mostré, por ejemplo, poner todos estos ácidos en las carpetas. puede ver lo fácil que es exportar solo los iconos porque básicamente no cambian a lo largo de nuestro diseño y lo fácil que es exportar imágenes. Entonces, cuando empieces a diseñar mezcla para comercializar para las exportaciones, más adelante, simplemente vas a exportar todos tus activos hasta la carpeta designada, hasta el tamaño designado con un solo clic. Entonces va a ser mucho más sencillo hacer eso. O alternativamente, puedes ir página por página, seleccionar todos tus diferentes activos, golpear Control E, seleccionar opción, por ejemplo, PNG JPEG, PNG, SVG, lo que sea, y luego exportarlos directamente a esa carpeta en particular, en ese tamaño en particular. También, alternativamente, puedes hacer que todos tus activos sean descargables, subirlos a la Nube como te mostré. Y entonces los desarrolladores podrán, en el modo de desarrollo del modo de presentación compartida, podrán descargarlo desde ahí. O alternativamente, una vez más, pueden usar algo como Zeplin. Para que puedas conectarlo con XD. Allí puedes subir tus mesas de trabajo. Y entonces pueden hacer los exportadores ellos mismos. De verdad, cuando se trata de esta parte, tienes que asesorar con los desarrolladores de tu cliente. O si estamos trabajando como parte del equipo, puedes hablar con los desarrolladores de esa manera. O si eres desarrollador tú mismo simplemente asegúrate de elegir la opción que mejor funcione para ti. 56. Terminar nuestra guía de estilo: Ahora sigamos adelante y terminemos nuestra guía de estilo. Porque una vez más, la guía de estilo es realmente importante, especialmente para ti como diseñador, porque simplemente puedes copiar y pegar elementos de ella. Y como desarrollador, porque los desarrolladores pueden comprobar fácilmente todo lo que necesitan para revisar dentro. Entonces si volvemos a nuestro proyecto y te llevaré de vuelta a nuestra guía de estilo. Lo que realmente necesitamos incluir aquí son básicamente dos cosas. Si estuvieras usando algún tipo de ilustración, realmente recomendaría incluirla aquí también. Porque una vez más, es mucho más fácil como viste en un video anterior exportar esa ilustración. Y yo siempre exportaría ilustraciones como SVG. O si algunos elementos son raros, como si estuvieran justo aquí con este elemento dentro de nuestro logo, entonces lo exportaría como PNG. Pero básicamente, siempre que tuviste la oportunidad con esos elementos vectoriales como son con iconos como las ilustraciones arábigas. Yo siempre, siempre, siempre optaría por exportarlos como SVG porque esa manera van a mantener su máxima calidad y no van a perder esa calidad siempre que estés cambiando estos tamaños de tu documento. Entonces como dije, si están usando ilustraciones, asegúrese de incluirlas aquí. Pero porque no lo estamos, sólo vamos a incluir tipografía y porque tenemos todas estas opciones diferentes, pero lo voy a hacer es simplemente extenderla hasta aquí, asegúrate de quitar esto. Entonces, lo que puedes hacer es simplemente dividir todas estas secciones. Entonces vamos a mover esto aquí mismo, y por eso los incluyo como carpetas. Y voy a dar clic aquí y escribir siendo logo, por ejemplo. Opciones de logotipo. Y veamos, voy a usar algo más grande como 36 negrita por ejemplo. Yo lo voy a alinear aquí mismo. Voy a asegurarme de que estoy a 80 de aquí. Y también me voy a asegurar que estoy a 80 de aquí, o incluso mejor, 100 así. Entonces voy a duplicar esto, asegúrate de que tengo 100 aquí y usa icono o iconografía, lo que quieras. Posiciona que aquí, asegúrate de que tengo 100. Y luego Control D 100. Una vez más, yo, que voy a asegurarme de llamar a esto colores. Haga clic aquí. Por alguna razón es raro, pero pongámoslo aquí mismo, Sí importa. Y luego finalmente, controla D. Asegúrate de que esté aquí y llama a esta tipografía. Y para la tipografía, Vamos a extender esto un poco más hacia abajo porque tenemos todas estas diferentes opciones que incluir. Por lo que golpeó la mezcla de control D. Tengo 80. Y voy a empezar con básicamente mi fuente más grande y luego ir todo el camino hacia abajo. que puedas pedirlos así. Entonces puedo hacer clic aquí, posicionar esto a la parte superior, entonces, bueno con 120, luego ir con un 100. Hola IT AT y puedo ir con 36. Y luego usa 24, que es este oscuro, 24, que es éste. Ni siquiera tienes que incluir estas diferentes opciones. Puedes cambiar los colores como te mostré a lo largo del diseño. Pero ahí nos gustaría darle esto a los desarrolladores solo para que puedan ver todos estos cambios diferentes que hice a nuestros textos. Entonces, empecemos con la más grande, que es ésta. Y lo que me gusta hacer es tener este archivo de texto con las letras del alfabeto. Simplemente selecciona eso, asegúrate de que el texto esté alineado a la izquierda y simplemente puedo hacer clic ahí y colocarlo ahí. Puedes hacer esto si quieres, pero yo también voy a hacer, es, por ejemplo, llamar a este refresco a cientos, BT. Y simplemente déjalo ahí. Asegúrate de que tengo 100, por ejemplo, controla el, asegúrate de que soy 100, este, asegúrate de 120, entonces puedo ajustarlo así. Entonces este es 120. Controla la posición aquí en alguna parte, esto es 100. Y puedo colocarlo aquí mismo. Control D 100, esto es 80. Entonces voy a cambiar esto a 100. Esto va a ser a2. Yo lo hice. Y por último, ahora que todas estas están terminadas, puedo seguir adelante con mi alfabeto e incluído, porque puedes incluir alfabeto con este, pero viste lo grande que va a hacer tu archivo. También puedes hacer clic y mover esto aquí mismo y mover estos aquí mismo en la misma línea. Entonces esto realmente depende de ti. Cómo quieres ajustar esto, cómo quieres trabajar con él. Pero simplemente lo usaré así. Voy a dar clic aquí y renombrar esto. Entonces esto va a ser Poppins. Y puedo llamarlo, por ejemplo, perno 36, BT. Y luego puedo incluir mi alfabeto así. Pero porque va todo el camino hasta aquí, quizá lo que pueda hacer es simplemente hacer clic así y posicionarlo así. Y Control D. Voy a asegurarme de que sean 100. Y voy a llamar a esto Poppins 24. Así que da click aquí. Ahora que tienes el texto, es bastante sencillo. Entonces 24, solo asegúrate de usar la configuración. También puede incluir el interlineado. Puedes incluir espaciado de caracteres, Lucan incluir espaciado de párrafos, altura de línea, lo que quieras puedes incluir aquí mismo. Pero como dijo, creo que es un poco una pérdida de tiempo porque desarrolladores que también tienen eso incluido. Cuando compartas, voy a posicionar esto aquí mismo y hacer doble clic aquí mismo. Entonces esto es ligero. Entonces en lugar de negrita, vamos a usar la luz 24. Y en realidad voy a cambiar su nombre por éste. Los cambios se ven más rojos solo para que podamos verlos. Y no voy a incluir texto blanco porque es difícil de leer. Pero incluí esta porque acabamos de tener esa instancia. Pero con este 24, también tenemos opciones blancas, oscuras, audaces, e irregulares con este color, que es gris oscuro. Por último, estamos en 24. Incluyamos esto como 18. Entonces me voy a ir con 18. Y voy a cambiar esto a línea audaz. Eso asegura que seamos 100 Control D. Una vez más. Voy a incluir esto como una ligera. Pero por ejemplo, puedo cambiarlo a gris oscuro. Y esto va a ser luz 18. Asegúrate de que estamos en 100 con este también. Y por último, voy a ampliar esto sólo un poco más hacia abajo, sólo para que pueda incluirlos en mi último, que es éste que tiene 16 años. Y es liviana así. Y láctea cómo así esta es nuestra tipografía. Esta es nuestra guía de estilo completada para este proyecto en particular. Lo que también podemos incluir aquí mismo es que podemos ponerlos a todos en grupos separados. Entonces déjame mostrarte eso en tan solo un segundo. Entonces vuelve a aquí a las capas. Por lo que tenemos nuestros colores, tenemos nuestros iconos, logotipo, y tenemos nuestra tipografía. Entonces voy a poner mi tipo aquí mismo, seleccionarlos todos. Hit Control G llamó a esta tipografía. Y lo que me aseguraría de hacer es alinearlos correctamente. Entonces esto va a ir aquí, aquí. Aquí. Obviamente no tienes que hacer esto, pero realmente me gusta mantener mis cosas organizadas como viste a lo largo de esta clase. Entonces, en realidad no es gran cosa para mí, pero va a ser mucho más agradable para los desarrolladores y para los clientes. Puedo ponerlo justo debajo de nuestros colores, dentro de nuestros colores, puedo poner este texto aquí mismo. Dentro de los iconos. Puedo poner los textos aquí mismo. Y también puedes poner los iconos en un grupo. Por ejemplo, primera fila, segunda fila, tercera fila o contorno de color. Puedes hacer lo que quieras. N Por último, para las opciones de logotipo, puedo ponerlo aquí mismo. Y ahora puedo agruparlos todos y crear una pila. Entonces, por ejemplo, puedo reemplazar estos espacios y asegurarme de cambiarlos. Pero lo que eso también me da, déjame cambiar esto a guía de estilo es la opción de una pila para trabajar como debería. Entonces lo que voy a hacer en estos colores, simplemente voy a usar mis colores y usar esta última muestra de color, por ejemplo. Yo lo voy a duplicar. Aquí está. Y lo voy a mover hacia abajo. Y vamos a ver, estamos 80 justo aquí, así que vamos a tener 80 aquí mismo. Y también lo voy a mover aquí mismo. Voy a usar esa y también voy a pegarle al Control D una vez más. Y lo voy a posicionar aquí mismo. Entonces lo que va a ser esto es nuestra sombra. Entonces vamos a reemplazar la temp así. Esto va a ser una sombra de gota o luz de sombra de gota aún mejor. Esto va a caer sombra oscura así. Entonces en la luz de la sombra de gota, voy a usar un color blanco en este también. Color blanco. Y lo que vamos a hacer es realmente copiar esa sombra de alguna parte. Por ejemplo, vayamos aquí. Seleccione esta opción, haga clic con el botón derecho y copie. También puedes ir después con 55, 10, y luego elegir 5, que es aún más apropiado para nosotros en aún más utilizable. Y voy a dar click aquí mismo en un color. Yo lo voy a llamar En realidad, no, vamos con el color. Entonces voy a o hacer clic derecho pegar apariencia, Se va a pegar esa sombra gota. También puedo hacer eso manualmente. Entonces ve con 55 a diez y luego en lugar de cinco, voy a ajustar esto a ocho así. Entonces esto va a ser, por ejemplo, vamos a ver. Podemos ir con x, y ser 55, 10. Entonces puedo llamarlo x, y. esto va a ser 5, 5, 10, o basicidad 5% por ejemplo. Y puedo clonar esto aquí mismo. Y esto va a ser en 8%. Por lo que una vez más, los desarrolladores pueden hacer esto fácilmente y solo tenemos que seleccionar ese color, que se va a decolorar. Entonces cópielo. Voy a saltar aquí mismo, pegar ese color. Entonces veamos eso una vez más. Va a ser todo ceros. Entonces seis ceros saltan aquí mismo, 1, 2, 3, 4, 5, 6. Ha seleccionado Control C, Otra vez seleccionado justo aquí control V. Y lo que puedo hacer es también asegurarme de, por ejemplo, posicionar y justo aquí, y asegurarme de que estoy a las diez. Y hacer lo mismo por éste. Asegúrate de que estoy a las diez, y asegúrate de que esté alineado a la izquierda. Igual que éste por si acaso quiero hacer algunos cambios adicionales a algunos de mis colores. Y debido a que todos están en una pila, todos se ajustaron bien y simplemente puedes cerrar esto. Y por último, cuando se trata de esta guía de estilo, se puede exportar como PDF. Y también puedes guardarlo en tu archivo como lo estamos haciendo en básicamente a la hora de compartir tu archivo con tus clientes y desarrolladores. Lo que haría es básicamente compartir todo mi archivo. Entonces todo lo que viste justo aquí, compartiría con ellos no me quitaría diseño breve o con lo guardado justo en si quieren que yo exporte el resumen de diseño, nuestro exportarlo como PDF y luego van a poder imprimirlo, mostró que dos ahí. Por ejemplo, compañeros dueños de negocios, socios, diseñadores, desarrolladores, quien más en el equipo. Y entonces también me aseguraría de exportar, por ejemplo, guía de estilo si quieren como PDF, compartir eso con ellos. Y estos wireframes de papel, los exportaría como simplemente imágenes JPEG, por lo que puedo compartir eso con ellos si quieren. Cuando se trata de guía de estilo, como dije, se puede exportar como PDF si quisieran imprimirlo. Podrás pasar todo el tiempo y esfuerzo que quieras a esta guía de estilo. Pero en mi opinión, realmente, esta estructura básica es realmente todo lo que es necesario, todo eso es suficiente para este tipo de proyectos porque vi estas guías de estilo en la web y se pueden ver estos elaborados cambios, elaboran configuraciones donde guía el estilo, pero realmente no creo que eso sea necesario, sobre todo si no tienes tiempo mientras trabajas en estos proyectos porque eso va a comer fácilmente en tu tiempo, en tu presupuesto. Y realmente te va a variar mientras no es realmente todo lo necesario. Así que construye tu guía de estilo a medida que construyes tu proyecto, medida que añades más y más elementos, simplemente sigue adelante y construye tu guía de estilo y agrega más a ella. Pero básicamente, eso es todo. Así de fácil es trabajar con guías de estilo. Y por eso son importantes, sobre todo cuando se trata de exportar en tus ácidos, porque simplemente puedes seleccionar todos tus activos, golpear Control E, y exportarlos en el formato de archivo que quieras. 57. Proyecto de clase de Skillshare: Para tu proyecto de clase Skillshare, realmente me gustaría que recrearas una de estas páginas, pero puedes usar diferentes elementos. Por ejemplo, puedes usar diferentes fuentes, puedes usar diferentes colores, puedes usar diferentes iconos. Puedes usar diferentes imágenes solo para condimentar un poco las cosas y aprender un poco mejor. Porque si sigues esta clase paso a paso, vas a aprender mucho, pero vas a aprender aún más cuando intentas usar diferentes elementos que encuentras en línea, sobre todo con imágenes, porque no todos estas imágenes van a escalar exactamente igual en diferentes escenarios. Entonces, por lo tanto, creo que con imágenes, sobre todo, vas a cambiar el aspecto general de tu diseño y la sensación general de tu diseño mucho más que, por ejemplo, con fuentes. También te animaría a elegir diferentes fuentes, a elegir diferentes colores, diferentes iconos, solo una especia cosas hasta un poco mientras usas estos métodos, también puedes usar este diseño exacto. Se puede utilizar esta estructura exacta, nombres de carpetas. Todo puede ser igual, pero simplemente condimentarlo un poco agregando diferentes imágenes, agregando diferentes iconos, diferentes colores, diferente topografía. Entonces todas esas cosas, y te va a ayudar a aprender todo esto mucho más y mucho más rápido y mucho de una manera mucho mejor. Entonces sólo siguiéndome paso a paso y simplemente haciendo lo que hago para crearlos. Simplemente puedes crear mesas de trabajo adicionales dentro de este archivo y luego simplemente seguir paso a paso porque eso va a ser mucho más fácil para ti entonces simplemente para comprobar tus errores y ver lo que hice y comprobar si hiciste eso correctamente. Y te va a ayudar mucho porque tendrás todo dentro del mismo archivo para que puedas comparar y contrastar fácilmente. Gracias una vez más por tomar esta clase y realmente espero ver lo que ustedes chicos van a crear para su proyecto de clase Skillshare y asegúrese de subir eso como una imagen para que puedan exportar toda la mesa de trabajo, por ejemplo, como un JPEG. Y puedes subir ese JPEG a los proyectos de la clase Skillshare. Y realmente espero ver lo que ustedes pueden crear y ojalá les den algunos comentarios también, en cuanto a lo que pueden pasar. Pero como dije, trató de condimentar las cosas un poco agregando, por ejemplo, diferentes colores, diferente topografía, e imágenes diferentes. Por lo que una vez más, estoy deseando ver lo que ustedes pueden crear. 58. Conclusión y recursos: Gracias por ver esta clase. De verdad espero que saquen algo de valor de ello. Y realmente espero que vayas a aplicar lo que has aprendido en esta clase en tu flujo de trabajo. Y de verdad espero que hayas recogido algunos consejos aquí y allá. Ahí va a mejorar su flujo de trabajo y acelerar su flujo de trabajo, que creo que es lo más importante en el negocio de diseño en general, es poder trabajar con rapidez y poder trabajar de la manera inteligente sin perder demasiado tiempo porque al final del día, el tiempo es dinero en este negocio igual que en cualquier otro negocio porque se puede llegar a cualquier cosa que se quiera. Pero si no tienes suficiente tiempo que realmente solo, no importa. Por lo que tienes este archivo, puedes jugar con él. Asegúrate de seguir las pautas que te dije por usar estas imágenes y estos iconos para solo asegurarte de utilizarlas como herramientas de aprendizaje. Asegúrate de usarlos solo para aprender a usarlos en este proyecto. No los uses para tus proyectos personales o comerciales. Porque si haces eso, entonces estás arriesgando todos estos temas legales. Asegúrate de que si quieres usarlos, puedes usar Envato Elements y te dejaré los enlaces a todo lo que estaba hablando en el checkout PDF, ese PDF y simplemente haz click en el enlace que te interesa, visita ese enlace y luego haz lo que quieras con eso. Básicamente, todo lo que digo es práctica, práctica, práctica, práctica. Simplemente lo hace perfecto. Entonces, cuantas más veces hagas esto, más veces practicas crear estos archivos, crear estos diseños, vas a ser mejor en ello. Entonces gracias una vez más por ver y realmente espero que sacaras algo de valor de esta clase y que vas a aplicar ese valor a tu trabajo futuro. Cuídate.