Maestría en diseño de UX / UI - desde la teoría hasta el sitio web vivo en Adobe Xd, Figma y Webflow

1. Introducción a la clase: Ser diseñador de UI UX no se trata solo de trabajar en Adobe XD figma. Se trata de entender a tus usuarios a través las decisiones de diseño que tomas durante el proceso de diseño. Zara oculta, Alex aquí y bienvenidos a esta clase de Skillshare, donde vamos a pasar de cero a héroe como diseñador de UI UX. Soy un creador de productos digitales y hasta el momento he creado o 500 productos de diseño digital. También soy creador de cursos y hasta ahora he grabado más de 40 cursos diferentes, todo sobre tu diseño UX y redes sociales. Y hasta el momento tengo 60 mil alumnos matriculados en cursos. Y en esta clase vamos a cubrir conceptos básicos del diseño UX, ¿qué es y por qué es esencial para el proceso de diseño? Diseña calzoncillos y explica qué son y cómo comunicarlos con tus clientes. Propuestas de proyectos, qué son y por qué las necesitas para cada proyecto. Investigación de usuarios y cómo usarlo para crear una persona de usuario, análisis competitivo y cómo evitar errores que cometen tus competidores. Flujos de usuario de diferentes maneras. Los usuarios se mueven a través de su sitio web, wireframes en papel y por qué son útiles para el diseño, estructura, diseños y cuadrículas y cómo usarlos para una mejor consistencia de diseño, topografía y emparejamiento de fuentes, y cómo elegir fuentes perfectas para sus diseños, iconografía y seleccionar los conjuntos de iconos adecuados para sus proyectos. Teoría del color y cómo elegir colores perfectos para cualquier proyecto. Trabajar con imágenes, conjuntos de imágenes y beneficios de colecciones, mood boards, y por qué son importantes para configurar los proyectos Cargar, kits de interfaz de usuario y sistemas de diseño y cuál es la diferencia entre ellos. Después pasaremos al proyecto de este curso y diseñaremos un sitio web desde cero en Adobe XD Figma, utilizando las técnicas que aprendimos en este curso, construirlo en el flujo sanguíneo, hacerlo receptivo y publicarlo sin escribir una sola línea de código. Estudios de caso y cómo utilizarlos para atraer mejores clientes para tus proyectos. Y dónde conseguir el empleo dependiendo del tipo de trabajo que quieras conseguir. 20 secciones de este curso, una de las 200 lecciones y todas las 28 h de contenido de video, obtendrás todas las plantillas y archivos de práctica utilizados en este curso tanto para Adobe XD como para fémur. Por lo tanto, puede seguir o dos años de grabación y comentarios de más de 60,000 estudiantes que participaron en la creación de este curso para convertirlo en el curso UI UX más grande y completo jamás creado en línea. Delantero sólido para verte por dentro. Y comencemos con el viaje de diseño de UI UX. 2. Estructura de cursos: Hola y bienvenidos al curso. En esta primera lección, voy a hablar un poco sobre la estructura del curso y los archivos del proyecto. Entonces la estructura del curso básicamente tiene dos partes principales. Una es la teoría, la primera es la parte de la práctica. La mayoría de los diseñadores jóvenes, especialmente simplemente omita la parte de la teoría y entra directamente en la herramienta de diseño sin conocer los conceptos básicos sobre el diseño, sobre el proceso, sobre las metodologías que puede usar a lo largo el camino. Y por eso están luchando o peor aún, los demonios se quedan con la parte del diseño y van directo a Webflow o directo al código o algo así como WordPress o Wix o cualquier otra herramienta que sean usando sin saber nunca cómo diseñar realmente. Entonces por eso decidí crear este curso en primer lugar para cubrir tanto las, ambas estructuras, así que tanto la teoría como la práctica y para mostrarles ambos y cómo usarlo al final. Entonces como dije, si quieres, puedes aprender la parte de teoría, o si conoces la teoría, puedes saltarte directamente a la parte de práctica, pero son muy recomendables, especialmente si solo estás recibiendo Empecé a indagar y aprender esta parte de teoría porque te servirá bien al final de tu carrera. Y una última cosa que quiero mencionar de esta lección son los archivos de práctica. Cada sección, si ha practicado archivos, se vincularán en el archivo zip. Puedes descargar el archivo zip en esa sección y utilizarlos. O si se indica lo contrario, dependiendo de dónde estés viendo esta clase, vas a tener ya sea un archivo zip dedicado para descargar cada archivo de esta clase. O vas a tener, como dije, diferentes secciones con archivos zip para cada una de esas secciones que puedes descargar y seguir. Así que comencemos. 3. Proyecto de clase: Su proyecto de clase para esta clase es seguir a lo largo de la sección donde realmente creamos el diseño del sitio web y siguiendo las instrucciones en el video y siguiendo el archivo de práctica que proporcioné, Quiero que ustedes creen su propio diseño. No tienes que cambiar demasiado. Puedes usar las imágenes que te proporcioné por ejemplo , pero me encantaría ver algunos colores diferentes, tal vez incluso alguna topografía diferente. Y solo quiero verlos experimentar con las herramientas y técnicas que les proporcioné en esta clase. Si no te sientes cómodo haciendo ese tipo de diseño a gran escala y guardarlo y subirlo a tu proyecto de clase. Entonces tal vez deberías seguir estas diferentes asignaciones para cada sección porque cada sección tiene su propia tarea, tal vez puedas completar esa tarea, guardarla como JPEG y subirla a un proyecto de clase. Espero con ansias ver lo que ustedes pueden crear y por favor compartan su trabajo. Espero poder brindarte cualquier tipo de retroalimentación y cualquier tipo de ayuda que pueda y asegurarme compartir tu trabajo en los proyectos de clase. 4. Actualizaciones de cursos de Figma: Ahora que Adobe ha comprado Figma, quiero actualizar este curso en el futuro e incluir todo el contenido irrelevante de Figma. Por lo que vas a poder tener la opción de tener Adobe XD así como contenido Figma en cuanto a lo que es diferente. Hay pocas cosas que son diferentes para Figma que no están incluidas en Adobe XD, por ejemplo, fig jam y pages y todo tipo de características diferentes de prototipado que son un poco más avanzadas y están en Adobe XD. Pero por otro lado, adobe XD tiene algunas características que Figma no tiene. Por lo que esta actualización va a rodar gradualmente en los próximos meses. Y voy a tratar de actualizar cada parte de este curso que tiene XD a contenido Figma también. Voy a comenzar con partes importantes de este curso, como por ejemplo diseño, propuestas breves y de proyectos y persona y diseño de las páginas en sí, exportándolas y trabajando con Webflow porque esas son las partes principales de este curso que obviamente necesitan actualizarse. Pero en los próximos meses y durante el próximo año, por ejemplo, incluso voy a ir tan lejos como, en cuanto a incluir el diseño, la configuración del sistema y la creación de su propio kit de interfaz de usuario. Pero vas a tener que esperar un poco más para esas clases. Pero si echas un vistazo al contenido actualizado que he creado hasta ahora, vas a echar un vistazo fácilmente a cómo crear eso en Figma también. También está la pregunta sobre las futuras actualizaciones ahora que Adobe ha comprado Figma y qué va a hacer con Figma en el futuro va a incluir todas las características de Photoshop, por ejemplo va a incluir todas las características de ilustrador, por ejemplo nadie puede decir en este momento, en este momento. Pero por ahora, disfruta estas actualizaciones y asegúrate de quedarte porque voy a actualizar este curso en el futuro y agregar todo el contenido relevante a medida que salga. Y claro, si hay algunas actualizaciones importantes de Figma también en el futuro, voy a cubrirlas también en este curso. En términos de contenido x D, prácticamente cubrí todo lo que hay que cubrir para Adobe XD. Ahora, en el futuro, nos vamos a centrar sólo en el contenido de Figma en términos de usar XD. Adobe ha venido con un comunicado, ya grabó un video separado sobre esto, que va a quedarse con XD por ahora. Lo que esto significa es que para los próximos, por ejemplo , dos años, podrás usar x ya que es completamente normal, todavía va a seguir recibiendo actualizaciones, y acaba de actualizarse hoy temprano. Para que puedas comprobarlo, puedes instalar esas actualizaciones, puedes usarlo. Puedes seguir este curso de forma completamente normal. Entonces en el próximo año y medio, dos años, nada va a cambiar. Puedes usar XD, puedes usar Figma, más o menos exactamente igual. Y como dije, voy a hacer el contenido para este curso y cubrir cada cosa que necesitas saber tanto para Adobe XD, Figma. Así que disfruta del curso. Asegúrate de revisar todas estas actualizaciones si te interesa es el contenido en el contenido de Figma. Y para algunos, tendrás que ver barco porque no quería perder demasiado el tiempo en recrear todo el contenido para que fuera exactamente el mismo para ambos XD Figma, solo cubrí lo que es diferente en Figma luego en Adobe XD porque como mencioné al inicio de este video, ahora son parte de la misma familia Adobe. Así que en el futuro todo va a verse prácticamente exactamente igual. Así que disfruta del curso. 5. SECCIÓN 1 conceptos básicos de diseño: diseño Ux es increíblemente importante en el proceso de diseño porque si lo piensas como una casa, diseño UX es la estructura XOR de la casa. Así que el diseño de interfaz de usuario de ladrillo y mortero es la fachada real que va a una casa y hace que la casa se vea hermosa desde el exterior. Y el código real que va al final son las ventanas reales, la electricidad, Internet. Entonces, para que una casa sea habitable y que funcione, cada uno de estos pasos es increíblemente importante en el proceso de diseño en general. Entonces, saltarse uno de estos pasos es realmente mala idea. En esta primera sección de esta clase, solo vamos a hablar de conceptos básicos de diseño UX. Así que comencemos. 6. ¿Qué es el diseño de UX: diseño de experiencia de usuario es el proceso de diseñar experiencias que son eficientes, efectivas y encantadoras para los usuarios. Entonces, en otras palabras, ¿tienes que saber para quién estás diseñando? ¿Qué estás diseñando en primer lugar y qué problemas ayuda a resolver ese producto o servicio? Entonces, para saber esto, hay que realizar algo que se llama investigación de experiencia de usuario. Y tienes que entender quiénes son tus usuarios, cuáles son sus necesidades, ¿cuáles son sus deseos? Porque no todos los usuarios son iguales. Entonces tu trabajo como diseñador de UX es enfocarte en esas necesidades y ayudar a resolverlas mediante el proceso de diseño de UX. Porque cada proyecto es diferente, cada usuario es diferente y sus necesidades varían de un proyecto a otro. Tienes que adaptarte como diseñador de UX a esas necesidades del usuario. 7. ¿Qué hace el diseñador de UX: diseñador Ux entiende las necesidades y objetivos del usuario. Se conectan con los usuarios para entender lo que realmente necesitan de este producto o experiencias. Eso se llama investigación de usuarios. Y es la primera etapa en el proceso de diseño UX. La siguiente etapa es definir claramente qué productos necesitan y deseos tienen los usuarios, para que pueda definir claramente los objetivos del producto. Esto lleva a la etapa de ideación en la que los diseñadores de UX presentan soluciones potenciales para los problemas que enfrentan los usuarios. Luego viene la etapa de creación de prototipos en la que los diseñadores de UX toman sus ideas y las convierten en prototipos funcionales, que luego comparten con las partes interesadas y otros miembros del equipo para simplemente probar y asegurarse de que realmente funcionan antes de que los empujen a la producción y antes de que lo empujen a más pruebas con los usuarios. Después de eso viene la etapa final, que es probar donde los diseñadores de UX empujan sus soluciones a los usuarios para asegurarse de que realmente funcionan y para asegurarse de que realmente resuelven el problemas que enfrenta el usuario. El proceso de diseño de UX nunca se completa porque cuando realmente prueba el producto que creó como diseñador de UX, al igual que lo están más adelante, por ejemplo, seis meses o 12 meses después de la línea, las necesidades de los usuarios van a cambiar. Por lo tanto, hay que mejorar ese producto o experiencias de acuerdo a las necesidades de esos usuarios. Y los diseñadores de UX están ahí para hacerlo durante todo el ciclo de vida del producto o servicio. Tienen que seguir investigando, tienen que seguir mejorando el producto o servicio para satisfacer las necesidades del usuario. Porque como dije, las necesidades y deseos del usuario cambian constantemente. Porque en el mundo de rápido desarrollo que vivimos hoy en día, esos cambios son requeridos de vez en cuando, por ejemplo, para algunos productos. Pero esos cambios se requieren mensualmente, lo cual es realmente raro. Pero por lo general es algo así como seis meses o un año. Y hay que entender como diseñador de UX, cuáles son esas necesidades realizando a todos esos investigadores entrevistas de dosis oral. Y tienes que adaptar el producto o servicio para satisfacer esos nuevos requerimientos y nuevas necesidades que tienen tus usuarios. 8. ¿Es UX el mismo que la interfaz de usuario: Diseño de interfaz de usuario o diseño de interfaz de usuario, es el proceso de diseñar experiencias como sitios web o aplicaciones móviles. Se encuentra en la etapa posterior del proceso de diseño UX, pero igualmente importante porque no es solo la parte del proceso de diseño UX, es la parte crucial del proceso de diseño de UX. Puedes tener la mejor investigación, estrategia de contenido perfecta. Pero si su experiencia no es hermosa y legible, nadie querrá usarla. Algunos diseñadores de UX van tan lejos como wireframes de papel y simplemente se detienen ahí porque su nivel de habilidad se ha detenido, pero puedes llamarlo wireframes de periódico. Ahí es donde los diseñadores de UI intervienen para convertir esos wireframes de papel para convertir esos investigadores e ideas en modelos funcionales, a prototipos funcionales a veces incluso código que los usuarios pueden usar realmente, prueba. Y luego, los diseñadores de UX y los diseñadores de UI en conjunto pueden mejorar para una mayor usabilidad y para realizar más pruebas e investigaciones. Los diseñadores de UI no necesitan saber cómo codificar, pero es importante que entiendan cómo funciona el código y cómo estructurar su diseño para compartirlo con los desarrolladores. También hay algo llamado sin herramientas de código, que en la actualidad es muy común dentro del sector de diseño UI UX. Y esas son las herramientas como Webflow y Bravo Studio app, que son las herramientas que te ayudan como diseñador de UI, crear todas esas experiencias y convertirlas a partir de diseños estáticos y prototipos en hermosos sitios web o aplicaciones móviles que funcionan. Las herramientas sin código son realmente geniales porque no tienes que saber codificar. Pero una vez más, es muy importante que entiendas cómo funciona el código, cómo estructurar diseños, porque va a ser súper simple entonces para ti crear esas experiencias en herramientas que mencioné como flujo de trabajo o una app de Brow Studio, o para enviar esos diseños y exportarlos adecuadamente para tus desarrolladores porque todo este sistema necesita funcionar como uno solo. De lo contrario sólo se va a desmoronar. Porque una vez más, ¿cuál es el punto de investigación bellamente ejecutada de todas esas reuniones de clientes y usuarios? Si eso no es algo que los usuarios realmente querrían usar en sus dispositivos como computadoras portátiles, dispositivos móviles, tabletas, y mucho más. Entonces ahí es donde el diseño de la interfaz de usuario es crucial en todo este proceso porque están ahí para convertir esas ideas y ponerlas en conceptos funcionales más a menudo que nunca usando algo llamado herramientas sin código, que acabo de mencionar. O simplemente saber cómo estructurar esos, esos diseños en algo que se llama, por ejemplo , sistema de diseño, que luego es escalable más adelante en el proceso de diseño más adelante, por ejemplo, seis meses, 12 meses, o incluso pocos años más adelante. Porque ese sistema de diseño está ahí para ayudarlos a escalar el producto y ayudarlos a actualizar el producto a medida que pasa el tiempo. Porque tú, como diseñador de UI, estarás ahí en esa compañía, por ejemplo , durante, digamos, dos años. Pero qué pasa después de que te vas, después de que cambiaste de empresa, después de ir y trabajar como freelancer, alguien más tiene que llenar tus zapatos y tiene que continuar donde lo dejaste. Ahí es donde estos sistemas de diseño o kits de interfaz de usuario, por ejemplo, son útiles. Y ahí es donde el diseñador de UI como puesto de trabajo es realmente crucial. Porque una vez más, es la brecha clave y el puente clave entre los diseñadores de UX como concepto e investigación y luego los desarrolladores como personas que ponen esos conceptos e investigación en desarrollo para lo real usuarios a utilizar. El diseño de la interfaz de usuario no es diseño UX, sino que es la parte del proceso de diseño en general y parte igualmente importante, en mi opinión. Para eso. 9. Habilidades necesidades de diseñadores de UX: Un buen diseñador UX debe tener empatía para escuchar a sus usuarios y entender sus necesidades. Al realizar investigaciones de usuarios, los diseñadores de UX deben saber qué preguntas hacer para comprender mejor qué problemas resolver. Y tienen que entender cómo manejar las herramientas necesarias para hacer esos trabajos porque las herramientas son muchas y las vamos a cubrir en una de las lecciones futuras. Pero hay que entender qué preguntas hacer para ayudar a otros miembros del equipo a ayudarse a sí mismo resolver ese problema que enfrentan sus usuarios. La comunicación con los usuarios, pero también otros miembros del equipo como diseñadores y desarrolladores de UI, es la clave para un proceso de diseño bellamente funcional. Y esa es una habilidad clave que todo buen diseñador de UX debería tener. grandes diseñadores de UX también se especializan en algo que se llama redacción de UX, diseño visual y, a veces, incluso marketing para ayudar a facilitar todo el proceso de diseño y ayudar a aportar más valor a el equipo en el que trabajan. No es necesario tener todas estas habilidades que se acaban de mencionar. Y hay muchas, muchas, muchas otras habilidades. Pero entre más de ellos tengas, mayor valor vas a aportar al equipo del que formas parte. O si estás trabajando como freelancer, mayores serán las posibilidades de que vayas a conseguir proyectos más grandes y caros en los que trabajar porque vas a ser la parte crucial de este equipo, porque posees todas estas habilidades. Esas habilidades vienen con el tiempo. Así que no te preocupes si recién estás empezando y no tienes algunas de estas habilidades o no entiendes cuáles son algunas de estas cosas. Comienza pequeño que grande, construido a partir de ahí y luego mejora tus habilidades a medida que pasa el tiempo. 10. In House VS Freelance UX Diseñador: Cuando trabajas como parte de una agencia, más probable es que vayas a trabajar como diseñador de UX. Cuanto más grande sea la compañía, mayores serán las posibilidades de que tengan un redactor dedicado y que tengan un equipo de investigación dedicado, que tengan un diseñador de interfaz de usuario dedicado o, por ejemplo, desarrolladores. Para que puedas enfocarte en el diseño de UX en sí mismo y que puedas enfocarte en todo el proceso en sí. Y cuanto mayores sean las posibilidades de que vayas a ser parte interna de ese equipo porque simplemente puedes enfocarte en cuáles son tus deberes como diseñador de UX. Este interino, traemos bienes goo, salario, pero son limitados uno, porque vas a ser parte integral de ese equipo de diseño. Pero simplemente vas a trabajar solo como diseñador de UX. Pero cuando trabajas como diseñador freelance, más de estas cosas sepas hacer, mayor valor vas a aportar a la parte del equipo o al proyecto en el que vas a trabajar. Entonces, por lo tanto, se puede mandar un salario mayor. Por esas razones, puedes, por ejemplo tomar dos o tres grandes proyectos al año y luego relajarte por el resto del año. No tienes que trabajar el resto del año, por ejemplo, o puedes tomar muchos, muchos proyectos más pequeños debido al conjunto de habilidades que posees. Una vez más, cuanto mayor sea el conjunto de habilidades que tengas, mayores serán las posibilidades de que vayas a estar trabajando en estos grandes proyectos y vas a aportar el gran valor a estas empresas. Y una vez más, cuanto más de estos valores puedas aportar al equipo en el que te encuentres, mayores serán las posibilidades de que vayas a obtener un gran salario de estos proyectos. Simplemente depende de lo que te gustaría hacer y dónde quieres estar en tu carrera. A algunas personas les gusta trabajar en una agencia durante años y años. otras personas simplemente les gusta hacer freelance. A algunas personas les gusta hacer ambas cosas. Tal vez trabajar en una agencia y luego trabajar en freelance. el lado, solo depende de quién seas, dónde quieras estar en tu vida y en tu carrera. ejemplo, a algunas personas les gusta la estabilidad de la agencia porque sigue trayendo costos, los ingresos o las personas que les gusta correr el riesgo pueden ser y tomar algunos proyectos más grandes como diseñadores de UX independientes. Pero entonces, una vez más, también, depende de tu conjunto de habilidades, qué sabes hacer, ¿qué tan bueno eres en el trabajo que estás haciendo? Por ejemplo, en este caso, diseñador UX. ¿Qué tan bueno puedes comunicarte con otros miembros del equipo? Como mencioné, por ejemplo, diseñadores de UI, desarrolladores y diseñadores gráficos, algunos casos equipo de marketing. Entonces todo depende de ti, si recién estás comenzando o realmente recomiendas intentar hacer ambas cosas, tal vez empieces con el diseño freelance solo para entender lo que el cliente necesita. A lo mejor puedes ir a plataformas como Upwork o 99 diseños. Recoge algunos proyectos de diseño aquí y allá, y luego simplemente entiende lo que esos clientes realmente necesitan. Entender a sus usuarios, comprender las necesidades del usuario y comprender cómo llevar a cabo una investigación adecuada de la experiencia del usuario. Y luego pasar a partir de ahí. Entonces tal vez con esa experiencia pasar a solicitar trabajo de agencia de diseño solo para entender cómo, cómo es ser parte de un equipo físico trabajando con otras personas dentro de esa agencia. Y simplemente entender el ritmo de trabajar dentro de una agencia, trabajar en un proyecto a la vez con varias personas en la misma oficina, al mismo tiempo. A lo mejor esa es la parte buena para ti. Entonces mi consejo para ti es tratar hacer ambas cosas y ver en dónde te encuentras. Y entonces nunca olvides, siempre puedes cambiar entre estos dos de agencia a freelance y de vuelta a agencia. Realmente no importa. Lo que importa aquí es intentar hacer ambas cosas para que puedas entender ambas caras de una moneda. 11. Herramientas para diseñadores de UX: Hay muchas herramientas diferentes que vas a utilizar como diseñador de UX. Entonces en este video, sólo voy a cubrir algunos básicos. Y también, como mencioné en lecciones anteriores, medida que pasa el tiempo, medida que perfeccionas tus habilidades, vas a encontrar algunas de estas tiendas y pocas otras herramientas que hagan cosas similares. Todo depende de ti fuera del proyecto de las necesidades de los usuarios y lo que realmente te gusta hacer y lo que necesitas hacer. Así que asegúrate de hacer tu investigación. Y para estas herramientas que te voy a mostrar en este video, voy a crear un PDF el cual se va a adjuntar en esta clase que puedes descargar. Y simplemente puedes hacer clic en esos enlaces para acceder a ellos fácilmente sin más preámbulos. Empecemos. Entonces, las primeras herramientas que vamos a cubrir son las herramientas para la investigación de UX. Ahora algunas de estas herramientas son premium y tienes que pagar por ellas lo peyorativas que estas herramientas tienen al menos prueba gratuita para que puedas probarlas y ver si son adecuadas para ti. Una recomendación que tengo para ti es que si recién estás comenzando, asegúrate de investigar sobre herramientas gratuitas y asegúrate de hacerlo a pie. Lo que quiero decir con eso es que puedes usar la mayoría de estas herramientas gratuitas como Skype, como Google Meet y cosas así para llevar a cabo tus investigaciones de usuarios y entrevistas, por ejemplo y cosas como DOS. Y asegúrate de que siempre te paguen por adelantado por tus proyectos. Especialmente si tienes que pagar por algunas de estas herramientas porque son caras, pueden ser muy caras en el futuro, especialmente cada vez más herramientas que agregues a tu caja de herramientas, va a ser cada vez más caro. Así que siempre, siempre, siempre asegúrate de que te paguen por adelantado antes de empezar a usar estas herramientas. Entonces, como mencioné, las herramientas para la investigación de UX primero y tenemos libros de Teller para que pueda comprender el kit de herramientas de UX interactivo de su cliente para comenzar su próximo proyecto con investigación adecuada, asegúrese de ver el video. Una vez más, los enlaces van a estar en el PDF, hacer clic en ellos y acceder a todas estas herramientas. Para que puedas personalizar el proceso de diseño según las necesidades de tu proyecto. Puedes conseguir este piloto con plantillas interactivas únicas. Así que la mayoría de estas plantillas, entrevista a partes interesadas, entrevista de usuario, y simplemente puede adaptar todas estas plantillas a sus necesidades y a las necesidades de su proyecto en particular. Tienes los datos que puedes analizar y crear equipos con etiquetas. Así que puedes etiquetar, por ejemplo, errores de registro. Regístrate un registro necesita incorporación donde los usuarios se atascan y todas estas cosas. A continuación tenemos UX tweak. La única plataforma de investigación UX que necesitará buffer es como herramientas para mejorar la usabilidad de sitios web y aplicaciones desde el prototipo hasta la producción. Para que puedas ver pruebas de usabilidad, investigación de arquitectura de la información, análisis del comportamiento del usuario. Entonces, una vez más, donde los usuarios sí se atascan, necesitan ayuda con algo para que puedas hacer toda esa investigación justo dentro de aquí. Y luego puede exportar esa investigación para comprender y analizar más en, por ejemplo comunicarse con su equipo para comprender mejor lo que realmente necesitan, todo en una solución para hacer datos- decisiones impulsadas en el diseño de tu sitio web, puedes organizar tu contenido a la perfección para que puedas Clasificación de Tarjetas, hacer la clasificación de tarjetas, hacer las pruebas de árbol. Puedes enfatizar con tus usuarios. Así puedes hacer pruebas de preferencia, encuestas de prueba de cinco segundos, grabación de sesiones y todas estas cosas, y luego analizar los datos más tarde para entender lo que tus usuarios realmente necesitan. Y finalmente, tenemos algo que se llama fracaso. Así que básicamente todas estas herramientas son realmente similares, hacen un trabajo muy similar. Y odio estos molestos pop-ups. Entonces tienen la plataforma, tienen las soluciones, tienen los estudios de caso, tienen los recursos, para que puedas aprender a usar estas herramientas. Y por último, tienen el precio. Así que una vez más, soluciones CX intuitivas para mejorar experiencias. Puedes convertir la excelencia de la experiencia en una ventaja competitiva. Para que puedas ver todas estas herramientas. Entonces veamos plataforma. Para que pueda utilizar encuestas interactivas, por SMS y correo electrónico, retroalimentación digital. Puede importar comentarios, contextos, temas de mapeo de viajes. Por lo que tienen la mayoría de estas herramientas. Una vez más, si recién estás empezando, no tienes que saber qué es todo. Solo tienes que familiarizarte con la investigación UX más grande. Y la clave aquí es que no todas las agencias, no todos los equipos utilizan estas herramientas. La mayoría de las grandes agencias lo hacen, pero las agencias pequeñas en equipos no porque sus proyectos son mucho más pequeños, las necesidades de esos usuarios son mucho menores. Y por último, al final, pero crucialmente igual de importante, los presupuestos para esos proyectos son mucho más pequeños. Así que los proyectos más grandes van a tomar todas estas herramientas y todas estas investigaciones, investigadores porque tienen más usuarios y esos usuarios tienen más necesidades que proyectos más pequeños. Entonces hay que entender eso. A continuación tenemos herramientas de diseño UX para crear mapas de sitio y flujos de usuarios. mapas del sitio y los flujos de usuarios son realmente importantes y son parte crucial del proceso de diseño de UX. Entonces aquí voy a mostrar solo dos herramientas, pero una vez más, hay muchas, muchas, muchas otras herramientas por ahí que hacen lo mismo. Para que puedas ver cómo se ven estas herramientas aquí mismo. Para que puedas crear un mapa del sitio, puedes crear un flujo de usuarios, puedes explorar personas, puedes crear mapas de viaje del cliente. Y finalmente, se pueden crear wireframes, que está en progreso para esta plataforma en particular llamada mapa de flujo. Una vez más, las fugas van a estar en un PDF para que puedas revisar fácilmente la boca. Entonces, ¿cómo funciona? Muy bien explicado aquí mismo. Para que puedas crear un mapa del sitio. Puedes ver cómo se ve aquí. Se pueden construir diagramas de flujo. Puedes investigar a los usuarios. Puedes jugar con los viajes de los clientes. Puedes administrar el contenido para que puedas entender y subir archivos en descripciones de páginas, textos y solo labios criminales. Y por último, comparte con el cliente para recibir comentarios. Entonces eso es genial. Y entonces tenemos desbordamiento. Para que puedas crear diagramas de flujo de usuario interactivos que cuenten una historia. Puedes comunicar tus diseños como nunca antes. Para que puedas convertir tus diseños en hermosos flujos de usuario y podrás ver cómo se ve aquí mismo. Entonces, un poco diferente de este sitio web llamado mapa de flujo, es que realmente puedes subir tus diseños aquí y conectarlos a diagramas de flujo y luego compartir esos diagramas de flujo con tus clientes porque, por ejemplo, algunos clientes no entienden diseños como este. Realmente quieren diseños como este. Entonces dependiendo de quién sea tu cliente, quiénes son tus compañeros de equipo, cuáles son sus deseos y necesidades, qué tan grande es el presupuesto, qué tan grande es la línea de tiempo, tendrás que elegir uno u otro. Entonces solo te estoy mostrando estos ejemplos. Una vez más, los enlaces van a estar en un PDF. Asegúrate de revisarlos y ver y entender lo que es adecuado para ti. A continuación, tenemos herramientas para crear wireframes y prototipos. Balsámico es la primera herramienta. Es una herramienta bien conocida. Así que puedes hacer todas estas cosas aquí mismo. Puedes entrevistar a todas estas personas. Puedes ponerlos en estos wireframes. Y el objetivo de Balsamiq es que te están dando estas plantillas realmente básicas. Entonces, si buscas este tipo de cosas, entonces puedes usar Balsámico. Déjame mostrarte rápidamente el producto. Puedes ver aquí mismo en segundo plano cómo parece que te están dando pre-preparados todos estos elementos básicos, que parecen sitios web, que parecían aplicaciones móviles. Para que puedas comunicar rápidamente tus ideas con clientes y grupos de interés. Pero en mi opinión, y lo que puedes hacer es subir el escalón y convertir esas ideas en prototipos más, más hermosos y factibles. Entonces para eso, me gusta usar herramientas como Adobe XD. Lo uso todos los días. Me encanta. Dediqué mis años en este negocio para Adobe XD porque realmente creo que esta herramienta es algo genial. No todos van a estar de acuerdo conmigo. Eso está completamente bien. Por eso tenemos herramientas como Figma y tenemos herramientas como Sketch. Pero en mi opinión, Adobe XD es el mejor porque es parte de la familia Adobe. Lo que quiero decir con eso es que si necesitas ajustar algunas imágenes, puedes usar Photoshop. Si necesitas crear algunas ilustraciones, puedes usar Illustrator. Si necesitas editar algunos videos muy rápido, puedes usar Premiere. Si tienes que crear algunos efectos, puedes usar After Effects. Y todas estas herramientas son parte de una sola familia, lo que reduce el tiempo de uso cambiando entre las aplicaciones, lo que reduce el tiempo de tu aprendizaje. Todas estas nuevas aplicaciones , todas forman parte del mismo sistema. Tengo muchas clases y cursos sobre Adobe XD. Así que asegúrate de echarles un vistazo también. Si quieres conocer a fondo sobre Adobe XD, qué es, qué puede hacer. Pero por ahora, me gusta mucho y me gusta mucho usarlo. Pero a diferencia de Adobe XD, que forma parte de esta gran familia, Figma y Sketch son empresas separadas y empresas dedicadas solo a estas herramientas. Pero eso significa que van a estar más dedicados a sus usuarios. Pero estas herramientas nunca van a ser tan completas como algo de la familia Adobe, por ejemplo, como Adobe XD. Debido a que los equipos que están detrás estas empresas son mucho más pequeños que los equipos de Adobe, por ejemplo, quienes pueden generar más actualizaciones más grandes cada mes, por ejemplo, como para Adobe, XD es el caso. Entonces para sketch, que sé que están lanzando actualizaciones cada año mientras que equipo de Adobe XD hace actualizaciones cada mes. Entonces, una vez más, no estoy tratando de empujar ninguna de estas herramientas porque no tengo un caballo en esta carrera como dicen. Pero sólo te estoy diciendo lo que me gusta hacer. Puedes decidir por ti mismo, por ejemplo, para algunas personas, Adobe XD no es una solución. Figma es la solución. Y para algunas personas, sketch todavía lo es. En mi opinión, Adobe XD, figma r2, las mejores herramientas para el trabajo aquí mismo. Pero tú eres el que va a tomar la decisión final al final del día. A continuación tenemos las herramientas para la investigación y pruebas de UX. Y aquí tenemos usertesting.com, que es uno de los mejores sitios web que existen para este servicio en particular. Puede obtener una visión vívida de primera mano de lo que sus clientes piensan y experimentan con las narrativas de la experiencia del cliente. Así que realmente puedes sumergirte profundamente en estas herramientas. Como dije, no voy a hacer eso en este video en particular. Solo estoy tratando de mostrarte estas herramientas que están disponibles para que puedas explorar más a fondo qué herramienta te importa y qué herramientas importan para el proyecto en particular en el que estás trabajando. Entonces aquí puedes hacer cualquier pregunta a la que puedas apuntar, a cualquiera a quien puedas involucrar y enfatizar, puedes descubrir y analizar y puedes compartir ideas. Así que básicamente están cubriendo toda esta ruta de prueba de usuario para ti en esta herramienta en particular. A continuación, tenemos UX cam para que puedas ofrecer la experiencia de aplicación perfecta. Entonces, una vez más, hay aplicaciones de orientación aquí mismo. Es el líder del mercado en análisis de experiencia de aplicaciones, empoderando a los equipos móviles con contextuales rápidos y alta fidelidad en su interior. Así que solo una analítica de aplicaciones móviles. Entonces, si estás trabajando en proyectos móviles, quizás este sea el adecuado para ti. O si estás trabajando en proyectos de escritorio y móviles, entonces quizás esta herramienta sea la adecuada para ti. Una vez más, se asegura de usar las herramientas que son realmente cruciales para usted. Y una vez más, voy a repetir lo que dije al inicio de este video. Asegúrate de que te paguen por adelantado porque estas herramientas se pueden sumar rápidamente a medida que agregas más y más de estas herramientas. Y antes de que empieces a gastar dinero en estas herramientas, mi principal consejo aquí es probarlas, probarlas y ver si realmente hacen el trabajo por ti en este proyecto en particular. No te ates a una herramienta. Si no es una buena opción para ti, asegúrate de probarlos, asegúrate de probarlos y asegúrate de entender si realmente son requeridos en ese proyecto en particular o no. Por último, tenemos las herramientas para la colaboración en equipo. Lo que tenemos aquí es la holgura, y es una de las herramientas conocidas que existen. Pero lo puedes hacer en Slack es que puedes crear todo tipo de comunidades diferentes. Puedes crear chats separados con personas separadas en tu equipo. También se puede utilizar para los usuarios. Puedes usar la investigación, puedes hacer algunas pruebas aquí mismo dentro de la diapositiva, pero es principalmente una herramienta de comunicación entre equipos y compañeros de equipo. A continuación, lo que tenemos es para entregar, se puede usar algo que se llama muestreo. Y el muestreo funciona bien con las herramientas que mencioné anteriormente, como por ejemplo Adobe, XD, Figma y Sketch. Así que puedes integrarte de forma nativa, es gratis empezar, pero a medida que añades más y más mesas de trabajo en él, medida que añades más y más a ese archivo, entonces va a empezar a costar dinero. El punto clave de Chaplin es permitirte trabajar con desarrolladores para que puedas compartir fácilmente tus diseños con desarrolladores. Luego pueden medir distancias, márgenes de relleno y cosas como esas para poder entender fácilmente lo que necesitan usar dentro del código más adelante, puedes hacerlo de forma nativa dentro de Adobe XD. Figma. No estoy tan seguro del sketch, pero a algunas personas les gusta mucho usar el poder de Chaplin porque también puedes dejar comentarios aquí y allá, que también puedes hacer eso en Adobe XD y en Figma. Pero una vez más, a algunas personas les gusta usar Zeplin también porque o están acostumbradas o tienen que luego facilitar el código muerto más tarde de alguna manera. Entonces, una vez más, depende de ti decidir qué es lo que realmente quiere hacer con estas herramientas y qué es lo que realmente necesitas usar. Entonces como mencioné pocas veces a lo largo de este video, asegúrate de revisar el PDF. Voy a dejar todos los enlaces que mencioné dentro de ese PDF. Asegúrese de ver cuáles de estas herramientas son las adecuadas para usted. ¿Cuál de estas herramientas va a hacer el trabajo por ti? Y una vez más, mi consejo clave aquí es que no te apresures e inviertas todo tu dinero en estas herramientas. Si no los vas a usar, asegúrate de probarlos. Asegúrate de entender lo que hacen. Deberían aprenderlos aquí y allá. Porque cuando llegue el proyecto, estás al tanto de todas estas herramientas que te van a ayudar en ese proyecto en particular. Pero no se salga de su camino e invierta su dinero en el proyecto y en estas herramientas que no va a utilizar en ese momento, asegura a medida que se desarrolla, medida que crece, a medida que descubre estas herramientas para simplemente usar las herramientas que realmente necesitas para tu trabajo y luego evolucionar más adelante durante tu carrera. Y a medida que lleguen estas herramientas, asegúrate de explorarlas todas porque es realmente importante, pero no te apresures e inviertas tu dinero en todas ellas. 12. SECCIÓN 1: Tu tarea para esta sección de la clase es solo para aprender más sobre el diseño UX. Puedes informarte visitando sitios web como Nielsen Norman, o visitando sitios web como la fundición de carrera y simplemente leyendo diferentes blogs en línea de un reconocido diseñador de UX por ahí. Sólo para informarse un poco más, en esta clase, solo vamos a hablar de los conceptos básicos del diseño UX, enfoques básicos porque esta es la clase para principiantes después de todo. Y no quería aburrirlos con demasiadas metodologías y solo para confundirlos aún más, una vez que realmente obtengan todos estos conceptos básicos de esta clase, estarán mucho mejor preparado para atacar alguna información adicional y algunas técnicas más avanzadas que utilizan los diseñadores de UX. Así que puedes usar esos dos o simplemente puedes navegar por los agentes de YouTube Smart tienes un canal de YouTube realmente genial y hay muchos diseñadores de UX diferentes que puedes seguir en YouTube para aprender incluso más. Incluso hay diferentes clases sobre diseño UX, pero antes de que realmente sigas adelante y hagas compras diferentes sobre el diseño de UX, específicamente se asegura de que los primeros se informen de estos recursos gratuitos que se acaban de mencionar para ver si el diseño UX es algo que realmente te apasiona y que realmente quieres perseguir. 13. SECCIÓN 2 Briefs de diseño: Cuando comienzas a trabajar con tus clientes, resumen de diseño es algo que es increíblemente importante para cada proyecto. Entonces de eso es de lo que vamos a hablar en esta sección. Qué es el resumen de diseño, cómo estructurar uno y cómo usar la plantilla gratuita que proporcioné. Así que comencemos. 14. ¿Qué es un escrito de diseño: El resumen de diseño es imprescindible cuando comienzas con cada proyecto tuyo. Siempre que haya un proyecto pequeño o un proyecto grande, debe comprender el alcance de lo que su cliente piensa que necesita antes de que realmente sigamos adelante con la investigación de UX y todo el resto de la UX parte de tu proyecto. Pero primero, detenerse en este viaje con su nuevo cliente o un cliente existente es el brief de diseño. Hay que comenzar con un resumen de diseño cada proyecto, especialmente con nuevos clientes, porque muchas veces piensan que entienden lo que realmente necesitan de este proyecto, pero que cuando entres y les explicas que en realidad no necesitan esto, ellos necesitan eso. De esa manera. Con esa discusión con tu cliente, vas a formar una opinión y vas a ir en el camino que no necesariamente pensaban que vas a ir. Bien, tal vez necesiten que se diseñe un sitio web. Eso está completamente bien, pero quizás no necesiten esta página exacta. A lo mejor necesitan dos de estas páginas. A lo mejor no necesitan tanto de la información de esta página en particular y así sucesivamente. Ahí es donde el resumen de diseño viene muy bien. Deberías crear y discutir el resumen de diseño al comienzo de tu proyecto. En primer lugar, tal vez a veces vas a hacer una llamada con tu cliente, solo una llamada introductoria. Quiénes eres, quiénes son, qué necesitan. Entonces en su próxima convocatoria, tal vez pueda preparar un brief de diseño. Puedes llenarlo cuando hablas con ellos porque tienes que entender quiénes son, en qué mercados están, qué tan grande es la empresa, qué tan grande es el proyecto, dónde quieren este proyecto para ir. ¿Cuáles son los objetivos de este proyecto? ¿Cuáles son los objetivos de este proyecto? ¿Cuál es el presupuesto para este proyecto? Tienes que hacer todas estas preguntas al comienzo mismo de tu proyecto. Porque si lo guardas para más tarde, puede que sea demasiado tarde. En esta clase, te voy a mostrar mi plantilla. De hecho te voy a dar esta plantilla y puedes usar y reutilizar esta misma plantilla exacta para todos tus futuros clientes. Puedes cambiar los colores. Puedes incluir sus logotipos si quieres. Puedes hacer con él lo que quieras. La mejor parte de esta plantilla, que te voy a mostrar en la siguiente lección, es que es imprimible. Si vas a las reuniones con tus clientes en persona, entonces puedes imprimirlo, puedes dárselos, y luego ambos pueden discutir algunos cambios si es necesario antes de que realmente sigue adelante con tu proyecto y antes de que realmente empecemos a diseñar en este proyecto en particular, esta plantilla puede ser editable sin fin y te la estoy dando como parte de esta clase para que puedas hacer con ella lo que quieras en tu próximo proyecto. Entonces en la siguiente lección, te voy a mostrar esta plantilla. Te voy a mostrar cómo puedes editarlo, y te voy a mostrar cómo puedes usarlo para tus futuros clientes. Entonces te veré ahí. 15. Creación de un escrito de diseño en Adobe Xd: Crear un resumen de diseño en Adobe XD puede ser súper simple, y ese mismo resumen de diseño puede usar y reutilizar cuando lo guarde como plantilla para todos sus futuros clientes. Lo bueno de esto es que está construido con las últimas características de Adobe XD en mente, como pilas, como componentes. Así que siempre puedes cambiar los colores, puedes cambiar las fuentes, puedes cambiar los íconos y mucho más. Te voy a dar esta plantilla. Puedes usarlo en todos tus proyectos futuros si quieres. Entonces, sin más preámbulos, comencemos. Entonces aquí está en Adobe XD. Así es como se ve la plantilla. Y aquí tenemos los elementos esenciales del resumen de diseño, y aquí tenemos la plantilla de resumen de diseño real. Ahora antes de seguir adelante y mostrarte lo que en realidad está incluido dentro, solo quería mostrarte esto rápidamente. Aquí tenemos color de párrafo, que es el color para todos estos párrafos. Tengo el color del icono aquí mismo. Entonces, obviamente, el color para los iconos y el color del título, que es el color de estos títulos. Ahora, por favor tenga en cuenta que debido a que el diseño breve esencial, eso no debe cambiarse. Puedes cambiarlo, puedes eliminarlo si no quieres tenerlo aquí. Pero es un propósito principal y el punto es recordarte qué puedes incluir dentro de tu plantilla de resumen de diseño, que es esta plantilla de aquí. Mi recomendación es mantenerlo como está y solo agregarlo a esta parte. Pero si quieres, siempre puedes eliminarlo. Si quieres. Queriendo anotar, si selecciono esto, se puede ver que todo este cuadro es el cuadro de texto porque como dije, no se pretende que se cambie. Pero como dije, una vez más, puedes borrarlo. Puedes hacer con él, lo que quieras para empezar. ¿Por qué tenemos aquí? Si me acerco un poco más, tenemos el perfil de la compañía y tenemos lo mismo aquí mismo. Entonces tenemos visión general del proyecto, lo mismo aquí mismo. Tenemos metas y objetivos. Entras el punto. Entonces todas estas cosas importantes están incluidas aquí mismo. Así que repasemos cada uno de ellos y te voy a explicar qué hay detrás de ellos y por qué deberías incluir algo como esto. Entonces, antes que nada, el perfil de la compañía, debes incluir detalles como nombre, productos de la industria o servicios que tiene la compañía. Ten en cuenta que puedes explorar esta plantilla aquí mismo. Puedes editarlo, puedes extender el cuadro de texto, puedes cambiarlo. Puedes agregar varias páginas, puedes hacer con ella lo que quieras. Esto es solo un puntero en qué dirección debes incluir toda esta información para que tu cliente pueda entender mejor lo que realmente necesitas para este proyecto en particular. Entonces, una vez más, propuesta de venta única, ¿qué los diferencia de su competencia? Esto es muy importante y porque debes saber cuándo comienzas a explorar la competencia, debes saber qué hay para ellos, Qué hay en ella para su competencia, entonces, para qué es diferente su negocio y la competencia de Derek, lo que los diferencia de la competencia y así sucesivamente. ¿Quiénes son los actores clave? ¿Quiénes son los principales tomadores de decisiones, básicamente, contribuyentes y puntos de contacto en el círculo empresarial con el que se trata en esta organización? ¿Es ese el director general, es el RRHH? Con quién se está tratando a diario en esta lista de proyectos de competidores directos e indirectos. Para que puedas hacer tu investigación sobre ellos. Esto es lo que estaba mencionando sobre punto de venta clave y propuesta de venta única y así sucesivamente. Entonces hay que entender quiénes están ahí, competidores directos e indirectos. Tienes que pedir esta información a tus clientes, sobre todo si no estás en esta industria o nicho. Entonces tal vez no entiendas quién es esta empresa, con qué están tratando y cosas así. Te va a dar una mejor comprensión del proyecto y lo que realmente necesitas hacer en este proyecto. Si pediste esta información, entonces qué puedes hacer cuando recopilas toda esta información, puedes recopilar en documento de Word o algo así. Puedes saltar a tu plantilla breve. Puedes ingresar a tu empresa de proyecto aquí mismo. Y por cierto, estaba usando Roboto, como pueden ver aquí mismo, que es una fuente gratuita de Google. Así que simplemente puedes descargarlo y comenzar a usarlo de inmediato. Y una vez más, simplemente puedes hacer clic derecho aquí mismo y puedes editar y cambiar todas estas fuentes, colores, iconos, etc. Nombre del cliente aquí, fecha límite del proyecto, cuándo va a terminar el proyecto, lo cual es crucial para cada proyecto, nombre del proyecto. Entonces, si el proyecto tiene un nombre, entonces puedes ingresarlo aquí, por ejemplo, no sé si algo es algo web o algo , algo app o un tablero o cualquier perfil de la compañía, ¿verdad? Su investigación sobre la empresa aquí. Entonces de esto es de lo que estábamos hablando aquí mismo. A continuación tenemos una visión general del proyecto. Entonces qué es, aquí es donde crearás una descripción detallada del proyecto. Lo siento, eso tiene tanto contexto como sea posible. Intenta preguntarle a tu cliente qué está haciendo, así como por qué lo están haciendo. ¿El qué? ¿Estás construyendo algo nuevo, lo cual es crucial? ¿Estás rediseñando lo que ya tienen? ¿Qué activos tienen inesperados al concluir este proyecto? Y finalmente, la y, tratar de identificar los problemas que tienen. Cuando entiendas los problemas, encontrarás una solución más fácilmente. Entonces aquí es donde en realidad vas a hacer algunas preguntas y ser creativo aquí mismo. Yo, solo te estoy señalando en la dirección correcta en cuanto a lo que deberías estar haciendo. Pero básicamente deberías abrir esta breve plantilla, por ejemplo en una pantalla o en una parte de la pantalla. Y cuando estás hablando con ellos, simplemente puedes ingresar la información que te están diciendo, o puedes usar un documento word, puedes usar la pluma y el papel. Puedes hacer lo que quiera y luego simplemente poner toda esta información en esta breve plantilla. Una vez más, si vamos aquí mismo, da clic aquí mismo, kid Control o Comando E para exportarlo, puedo seleccionarlo como PDF y luego puedes compartir este PDF con tu cliente. Entonces pueden darte algunos comentarios adicionales sobre lo que vas a hacer en este proyecto en particular hoy, estar de acuerdo, no están de acuerdo y cosas así. Entonces tenemos metas y objetivos, lo que también es muy importante. metas reflejan el propósito de origen de tu proyecto, mientras que los objetivos resaltan los métodos para lograr esa meta. Entonces galt, ejemplo, cliente quiere más tráfico en su página web. Ejemplo objetivo, aumentar la cantidad de sesiones semanales en un 20% para esta fecha en particular. Entonces este es el ejemplo perfecto. La mayoría de las veces que los clientes no entienden, ¿qué es lo que realmente quieres que este diseñado logre? ¿Quieres, como en este caso, más tráfico en tu página web? Si es así, qué vas a hacer con este tráfico, vas a convertirlo en leads y vas a usar leads calientes o cables fríos. ¿Vas a darles algún tipo de producto o regalo gratis para que los puedas adjuntar a tu lista de correo electrónico? ¿Quieres que te llamen o quieres que compren algo? ¿Es un producto nuevo en el mercado? ¿Es el producto que existe en este mercado? ¿Cuál es tu público objetivo y qué quieres que hagan una vez que realmente lleguen a tu sitio web? Muchas veces y confía en mí, cuando estás haciendo estas preguntas a tus clientes, en realidad van a empezar a pensar y a decir, sí, tienes razón. Quizás no necesitamos un sitio web que tenga 50 páginas diferentes como las que hablamos en primer lugar. A lo mejor solo necesito una bonita landing page, tal vez sobre la página, tal vez la página del producto. Eso es básicamente todo. Entonces hay que hacer todas estas preguntas para que ellos entiendan lo que realmente necesitan de este proyecto en particular y usted como diseñador en este proyecto. Entonces una vez más, como dije, ejemplo objetivo, aumentar la cantidad de sesiones frecuentes pero un 20 por ciento. Entonces digamos que quieres rediseñar tu sitio web para vendas tu producto y quieres dar obsequios a tantas personas como sea posible para que puedas convertirlos a través su boletín electrónico cada semana. Entonces el objetivo es que quiero incrementar la cantidad de firmas semanales a mi newsletter para poder convertir, digamos 10% más de personas en el próximo mes. Entonces esa es tu pista. Objetivo, objetivo claro, ¿qué debería estar haciendo como diseñador que un comienzo en cómo debo hacer eso, cómo debo integrarlo todo? ¿Deberían usar soluciones existentes para correos electrónicos como, por ejemplo , Mailchimp, digamos, o debería crear algo nuevo y señalarlos en esa dirección? También porque dicen que quieren más registros de correo electrónico para luego conviertan a esas personas, tienes que crear estos registros de correo electrónico para que sean más destacados en tu sitio web. Puedes ver que ya estamos comenzando diseño de UX solo por tener un buen resumen de diseño, por lo que el brief de diseño es súper importante. Al establecer metas y objetivos por adelantado, que es lo que dije, no solo eres apto para tomar decisiones más informadas que están bajo diseño, sino que también estás mejor armado para demostrar tu valor y valor para el cliente fuera de la estética visual de su sitio web. Entonces, una vez más, eres un diseñador que está resolviendo problemas. No estás aquí para crear algo hermoso y eso es todo. Tienes que resolver sus problemas a través tu diseño y hacerlo hermoso al mismo tiempo, Ese es el punto de ser diseñador. Público objetivo. Una vez más, no sabes para quién, para quién estás diseñando. No se puede diseñar. Otra forma de informar sus decisiones de diseño es desarrollar una sólida comprensión de los usuarios que interactuarán con la aplicación o sitio web de sus clientes. Si tu cliente tiene esta investigación que ya estás de suerte. Pero si no lo tienen, tendrás que hacer esa investigación tú mismo. Puedes vender esto como un servicio diferente y ganar más dinero, lo cual es crucial. Lo que debería surgir en tu investigación es la persona de audiencia. La información sobre tu persona de audiencia debe incluir detalles como edad, género, país, Fresno, Ciudad de residencia, lugar de trabajo, hábitos de consumo de medios, hábitos diarios como viajar, comer fuera, socializar, y así sucesivamente. Entonces, lo que esto nos dice es, por ejemplo , si estoy diseñando un sitio web de zapatos para niños de 30 años, ese sitio web tiene que ser completamente diferente a si estoy diseñando el mismo sitio web para niños de 65 años. Debido a que los 65 años, la mayoría de ellos tienen discapacidad visual. No les gustan los colores brillantes. Ya tienen mucho más dinero que el primer grupo de treinta y tantos años. Entonces tienes que pensar en todas estas cosas cuando empiezas a diseñar, tienes que crear personas's. Para quién estás diseñando esto? Por lo tanto, cuando tengas esas personas, cuando tengas esa investigación, cuando tengas listo ese público objetivo, sabrás qué colores usar, qué fuentes usar, qué tamaños de fuente usar, qué tipo de imágenes, qué tipo de tono, qué tipo de lenguaje? Entonces digamos que el lenguaje para los niños de tres años es completamente diferente al de los 65 años. Si estás usando jerga y términos que solo entienden los niños de 35 años, esos de 65 años no podrán entender y simplemente se irán. Así que eso aumentará tu tasa de rebote y doblará la espalda sobre la cuadrada. Entonces hemos diseñado requisitos. Debe especificarlos por adelantado porque muchas veces, especialmente esta es la plantilla de Adobe XD. Digamos que a mis clientes les gusta trabajar en sketch. No trabajo en sketch, trabajo en XD. Y luego vamos a llegar al final del proyecto. Habrá completamente ajeno cuanto a qué herramienta estoy usando. Y luego hubo dos solicitan los archivos del boceto. Por supuesto que hay muchas conversiones por ahí. Puedes pagar ciertos servicios para hacer esas conversiones por ti o puedes hacer esa conversión por ti mismo. Pero, ¿cuál es el punto? ¿Por qué molestarse? Simplemente puedes preguntar por adelantado. Así que las dimensiones de los activos y las resoluciones. En primer lugar, esto es crucial para el dinero. Si quieren solo por ejemplo digamos que la pantalla del iPhone diez, eso es todo. Entonces vas a cobrar una cierta cantidad de dinero. Pero si quieren iPhone 89, 101-112-1314, lo que sea, todos estos tamaños, y luego versiones de Android también. Por supuesto, vas a tener que cobrar mucho más dinero porque vas a tener que hacer mucho más trabajo. Entonces haz esas preguntas por adelantado. Los formatos de archivo, como mencioné, deben ser acordados con los desarrolladores antes de que empieces a trabajar. A algunos desarrolladores les gusta usar archivos Figma, otros les gusta bosquejar archivos. A otros simplemente no les importa siempre y cuando estés usando algo como, no sé, compartiendo plataformas o uno de estos complementos, exploremos. Veamos qué podemos hacer aquí mismo. Algo así como Zeplin, por ejemplo así que a mucha gente le gusta usar Zeplin, digamos. Entonces, si no estás usando orina de Zeplin no vale la pena, no eres bueno con ellos, así que tienes que usar Sapling. Pero si nunca antes habías usado retoño, eso puede crear una situación incómoda para ti, así que tienes que aprenderlo en medio del proyecto. Entonces pregunta por adelantado, te va a ayudar mucho a requerir paleta de colores. ¿Tienen sus colores existentes? Porque si lo hacen, estás de suerte. Si no lo hacen, entonces tienes que crear eso desde cero. Así que piensa en todas estas cosas. Activos de imagen para ser incluidos también. Tienen sus propias imágenes o hay que usar imágenes. Si tienes que usar imágenes, tienes que usar imágenes gratuitas o premium. Es súper sencillo hacer estas preguntas, pero la mayoría de los diseñadores simplemente no lo hacen. Hay que pensar en esto porque si quieren, si quieren usar imágenes premium, por ejemplo, ¿quién está pagando por esas imágenes premium? ¿Está saliendo de su bolsillo? O hay pensando que porque te pagan por ej. digamos $5,000. Todo está incluido dentro de todas esas imágenes, todos esos íconos, videos, metraje de archivo, todo está incluido en esos 5,000 v Así que piensa en todas estas cosas que están presentes. Te va a ahorrar mucho tiempo. Entonces lo que tenemos son documentos copiados asociados. Especialmente los documentos copiados pueden ser algo así como contrato o si puedes usar algo NDA por ejemplo acuerdo de confidencialidad o si puedes usar su logotipo, digamos en esta orientación, no en esta orientación. Así que tienes que hablar de todas estas cosas con ellos para que puedas entender mejor lo que realmente necesitan y lo que realmente puedes proporcionarles. Por último, tenemos que entregar los archivos. Siempre debes entregar tus maquetas, pautas de marca, si las creaste, moodboards o cualquier otra cosa que pueda ayudar a los clientes a comprender y confiar, puedo tener confianza en tu trabajo. Lo que quiero decir con esto es que si has creado tu mood board, simplemente entrégalo a ellos. Porque si se cobra esta cantidad de dinero por el mood board en medio del proyecto les mostró el mood board. Si creó wireframes de papel y densos, muestre esos wireframes de papel. Les va a mostrar cuánto tiempo y esfuerzo se dedicó realmente a este proyecto en particular. Por último, tenemos la razón clave aquí mismo. Entonces presupuesto y horario. Esto es súper importante, un súper incómodo para los diseñadores porque muchos diseñadores simplemente no quieren lidiar con el dinero. Pero el dinero es muy importante, sobre todo para ti porque tienes que cobrar lo que realmente te han trabajado en este proyecto en particular. De lo contrario, solo te va a quedar sin suerte porque cuando firmes el contrato, Eso es todo. No se puede hacer otra cosa aparte de tal vez en realidad crear un proyecto separado o salir de este proyecto y mucho más. Por eso tengo esta animación aquí mismo de pink punk yendo y viniendo entre tú y el cliente, tienes que especificar todas estas cosas por adelantado antes de que realmente encienda su Adobe XD y comience a trabajar de esa manera. Diseñar plantillas breves como esta puede ayudarte mucho, especialmente cuando estás presupuestando y especialmente cuando estás cristalizando, cuánto tiempo necesitas realmente para todos estos partes de tu proyecto? Entonces volviendo a eso, si estás trabajando en una agencia, no estás tratando con esta parte, pero si eres freelancer, esta parte es absolutamente esencial para tu éxito, que es lo que acabo de decir. El presupuesto, dependiendo de lo grande que sea el presupuesto, sabrás qué tan profundo entrarás en el proyecto y dedicarás tu tiempo y recursos al mismo. No creará wireframes de papel, wireframes y luego cinco revisiones diferentes de diseños. Y luego, no sé, cinco prototipos diferentes y luego animación de tus íconos y luego creación de maquetas completamente separadas que están acostumbradas a su proyecto. No vas a hacer todo eso si solo te están pagando o no lo sé, alguna tonta cantidad de dinero dependiendo del dinero que tengan, dependiendo de lo que necesiten. Ese es el tiempo que va a llevar el proyecto. Entonces tendrás que cobrar lo que realmente estás trabajado para este proyecto en particular. De lo contrario, solo te van a usar al final del día. Lo que tenemos valor en el momento antes que nada porque los clientes no lo harán, si no valoras tu tiempo, nadie más lo hará. Horario. Los proyectos deben mantenerse a tiempo y ser rentables. Por eso los horarios son un must have para tus calzoncillos. Cada horario tiene que tener paradas. Entonces uno al inicio, uno al final, y tantos o tan pocos como sea necesario en el medio. Así es como tú y tus clientes sabrán que estás en la pista. Entonces por eso creé esta fecha de inicio, fecha investigación, fecha de audiencia. Por supuesto, puedes cambiar todos estos. Fecha de presentación, fecha de revisión, fecha de entrega. Puedes agregar tantas de estas paradas como quieras. Puedes eliminarlos, puedes hacer lo que quieras. Así que escribe tu presupuesto y agenda aquí. Entonces, el desglose del presupuesto aquí, por ejemplo, 2000 por adelantado, 2000 en el medio, digamos algo como esto. Entonces presentación, digamos 2000. Entonces finalmente al final, la entrega, 2000 ahí, o el 50 por ciento inician su planeación, pies por ciento al final. Así que tienes que factificar lo que realmente vales y lo que realmente te sientes cómodo al preguntar a tus clientes. Y finalmente, desglose del cronograma. No puedes hacer esto mientras estés vivo. Así que hay que crear líneas de tiempo perfectamente claras. Semana tu cliente, cuando es el inicio, cuando es el medio, cuando es el final? ¿Cuándo son las revisiones? ¿Cuántas revisiones tengo? ¿Cuándo debo entregar esto? Cuándo deberías entregar esto y mucho más. Entonces tienes que factorizar todo esto al comienzo mismo de tu proyecto. Por último, lo que tenemos aquí es sin el resumen de diseño, solo estás perdiendo el tiempo esperando que consigas lo que les gusta la primera vez. Al usar el resumen de diseño, te aseguras de que tú y tus clientes estén en la misma página desde el principio. Entonces, ¿tuviste valor tanto para tu tiempo como para el tiempo de tus clientes? Entonces eso es lo que estaba mencionando al comienzo mismo de esta clase. Tienes que crear un resumen de diseño cada vez para cada proyecto, no importa si el cliente es el cliente para el que ya trabajaste en el pasado, tienes que crear un resumen de diseño para este proyecto en particular. Entonces todo el mundo está en la misma vía. Asegúrate de crear estos puntos de parada y estas brechas en tu proyecto. Entonces como te mostré anteriormente aquí mismo. Así que empieza ahí, datos de fecha de inicio para la investigación, para la audiencia, investigación para la presentación del diseño. Mucho más para que tanto usted como sus clientes puedan estar en el mismo camino cuanto a lo que se requiere de este proyecto y lo que se entrega en este proyecto. 16. Breve informe de diseño: En este video, echemos un vistazo a lo esencial del brief de diseño y cómo se ve en Figma, porque es exactamente lo mismo en XD que en Figma, pero aún así es querer guiarte porque hay algunas diferencias cuando quieres crear o reutilizar algo como esto. Y la misma historia como con las plantillas de Adobe XD, también vas a obtener plantillas Figma. Se puede jugar con ellos. Puedes utilizarlos y reutilizarlos para tus propios proyectos. Así que vamos a ir a Figma y déjame mostrarte cómo se ven estas plantillas. Entonces aquí estamos en Figma y aquí como pueden ver, tenemos lo esencial breve y tenemos nuestro brief. Y básicamente es exactamente la misma historia que en Adobe XD como ya se mencionó. Entonces, si quieres cambiar algo, si quieres editar algo, es exactamente lo mismo. Entonces solo las herramientas están aquí arriba en la parte superior y no aquí mismo. Y aún así tienes tu panel de propiedades aquí mismo en tu lado derecho. Si echamos un vistazo aquí mismo, tenemos los estilos locales. Estos son sus estilos de texto y estos son los textiles que apliqué de los propios documentos. La misma historia que con Adobe XD es solo que están ubicados de este lado. Bueno en Figma, se encuentran justo aquí. Y va a leer todo lo que se encuentra dentro de estos archivos. Y luego cuando haces clic en un marco, en este caso, porque no tenemos nuestras tablas en Figma, tenemos marcos. Entonces va a tomar los colores de selección, decir, los colores que se encuentran dentro de ese marco. Pero si hago clic afuera, nos va a llevar de vuelta a los estilos locales. Ahora ten en cuenta, porque estas plantillas son simples, desprovistas de propósito. Más adelante en la línea cuando lleguemos a un diseño, voy a mostrar algunas técnicas más avanzadas. Pero por ahora para los briefs de diseño, para propuestas de proyectos y para persona por ejemplo plantilla, va a ser súper simple porque es con un propósito creado para ser súper simple porque puedes usarlo y reutilizarlo muy rápido. Entonces aquí tenemos el color de fondo, que es el color de fondo en general. Entonces tenemos los estilos de texto y puedes ver info text, títulos de sección de texto principal. Así que la misma historia que antes, me gusta renombrar y nombrar todas mis capas. Entonces tenemos el gris principal, tenemos el gris oscuro, y tenemos los trazos son todos los colores a los que ya estás acostumbrado en cuanto a edición, si selecciono algo, lo va a mostrar aquí mismo. Entonces déjame encontrarme para que veas un poco mejor. De lo que estoy hablando aquí, básicamente, lo que puedes ver aquí mismo es que el texto ha sido seleccionado. Un breve esencial no es el tablero de arte, sino el propio marco. Se ha seleccionado y aquí se puede ver cómo se posiciona. Entonces aquí tenemos el título de la página, que en realidad es el estilo de este texto. Y luego tenemos el gris principal, que es el color real de este texto. Si quieres cambiar algo, puedes dar click aquí mismo. Y se puede ver que tiene el título de la página, que es este 148 pixeles y auto. Y quieres cambiarlo. Puedes pulsar aquí mismo para editar algo y puedes editar el nombre. Se puede ver la fuente, se puede ver que es el negrita, la alineación del texto es automática y así sucesivamente y así sucesivamente. Y la misma historia va para los colores que solo puedes hacer clic aquí mismo. Y estos son los colores dentro del documento. Y aquí están los colores personales que Figma sugiere que uses si quieres cambiarlo a los colores que Figma está sugiriendo aquí mismo. Pero si no, simplemente puedes dar click aquí mismo y va a ir al gris principal. Y aquí tienes las propiedades, aquí tenemos la opacidad. Puedes ocultarlo, mostrarlo, y así sucesivamente y así sucesivamente. Por último, tenemos este icono de enlace. Y si se quiere desprenderlo, así se ha convertido, se va a convertir en propiedad propia. Puedes hacer clic ahí mismo tanto para el color fuente y va a desconectarlo de ahí. Pero en cuanto a la estructura general, me parece como cuando x D. Así que aquí tenemos el título, aquí tenemos todos estos otros textos. Eso es por lo esencial breve. Y puedes ver en ese video para conocer más detalles sobre lo que se incluye dentro de cada uno de estos. Porque ahora que Adobe compró Figma, Figma real muy pronto se convertirá casi exactamente en lo mismo que es XD en este momento, solo con todas estas características de Figma y características adicionales de Adobe como Creative Cloud Libraries y mucho más. Entonces básicamente, vas a poder abrir archivos XD en Figma muy pronto. Pero aún así quería mostrarte estos videos mientras la transición se está repasando porque puede tardar hasta un año o tal vez dos años. Aquí dentro de nuestro breve, tenemos el mismo título aquí mismo. Se puede ver que se llama título de playa y tiene este color gris principal. Pero aquí las cosas son un poco diferentes. Entonces si destaco aquí mismo, pueden ver que aquí tenemos este grupo y aquí tenemos algunas limitaciones. Puede crear un diseño automático si lo desea. Pero aquí tenemos secciones y se encuentra dentro del diseño automático, y puedes verlo aquí mismo. Ahora, también en capas son básicamente pilas en Adobe XD. Es solo que tienen tal vez una o dos opciones más dentro de Figma que no tenemos en Adobe XD, puedes ver que están posicionadas verticalmente y su posición desde arriba a la izquierda, que es la alineación de donde viene. Entonces esto justo aquí y dentro de estas secciones, tenemos todas las secciones separadas. Y el espaciado entre cada una de estas secciones es de 60 píxeles que ves aquí mismo. Y se puede posicionar para que sea de 40 píxeles, por ejemplo puede ver lo que hace, pero voy a dejarlo en 60 píxeles. Una vez más. Puedes abrir este archivo de proyecto. Se puede jugar con él. Puedes explorarlo y ver y profundizar un poco más en cómo creé todos estos. Ahora, cada una de estas secciones tiene su propia estructura. Entonces, si lo abro, pueden ver que tenemos el plazo del proyecto. Así mismo cuento como en Adobe XD. Y si me acerco un poco más, dentro de la fecha límite de este proyecto, tenemos la empresa y este es el ícono, y luego tenemos el plazo del proyecto en sí. Ahora aquí, si selecciono la fecha límite del proyecto, se puede ver que tenemos un auto-layout separado. Ahora bien, esta vez es horizontal. Se posiciona desde la alineación izquierda hasta el centro. Y aquí tenemos el espaciamiento entre los artículos. Entonces entre esto y esto, cuando vuelo el cursor, se puede ver que son 40 pixeles. Ahora puedes seleccionar esta pequeña línea roja justo aquí y extendida a izquierda y derecha si quieres. Así que basta con hacer clic y arrastrar y va a extenderlo. Pero personalmente prefiero escribir mis valores redondos aquí. Entonces, por ejemplo, 60 píxeles, eso va a hacer precisamente eso. Por último, para cada uno de estos, así para la fecha límite del proyecto, e.g Puedes ver que aquí tenemos el layout automático en dirección vertical a 40. Entonces, si pongo esto a 60, se puede ver lo que hace esa cosa en particular. Por supuesto, porque todos ellos están dentro del diseño automático. Si ajusto este a, veamos 100, van a empujar todo hacia abajo porque todo está dentro de su propio diseño automático. Pero si vuelvo, se puede ver que ahora redondea esa sección. Ahora en términos de estos iconos, cuando selecciona nuestro resumen o selecciona cualquier cosa dentro de nuestro marco breve, puede cambiar a activos. Y aquí tienes tus breves componentes locales para estos iconos particulares. Ahora puedes dibujar tu propio icono parecerá un X-Y. Puedes intercambiar iconos y crear distancias de iconos. Y vamos a hablar de eso un poco más tarde cuando lleguemos al diseño. Pero básicamente así es como se ve esto. Y por último, cambiemos a capas. Seleccionemos el periodo de tiempo y déjame mostrarte cómo se ha creado esto. Entonces básicamente no tenemos nada elegante aquí. Solo tenemos un círculo y tenemos un círculo de fecha de inicio y finalización. Si lo selecciono. Aquí mismo, puedes ver que tenemos nuestro trazo y nos está mostrando que está vinculado, pero solo está vinculado al color del trazo. Se puede ver que el trazo de color aquí mismo si me escondo. Para que lo veas un poco mejor. Y aquí tenemos el color de relleno, que es este color blanco. Entonces eso es básicamente lo súper simple que es trabajar con esto. Y como mencioné, es exactamente lo mismo que en Adobe XD. Entonces ahora solo tenemos estos documentos dentro de los marcos y no los aeropuertos como estamos acostumbrados en Adobe XD, por ejemplo, así que ahí tienes. Vas a conseguir este archivo. Vas a llegar a abrirlo en Figma y explorarlo por ti mismo. Solo quiero crear este video rápido solo para mostrar algunas diferencias. Te vas a encontrar con archivos Figma que Adobe XD sí tiene y viceversa. Te animo a jugar con estos archivos, a abrirlos, a explorarlos un poco más, solo para familiarizarte con Figma. Pero si alguna vez abriste algo en Adobe XD, si has trabajado en Adobe XD por un breve periodo de tiempo, vas a notar algunas diferencias aquí y allá, pero las herramientas son básicamente exactamente las mismas. Y ese es el punto aquí mismo. No quería recrear este contenido de Adobe XD para Figma también. Solo quería crear estos videos guiándote a través de lo que es lo mismo, ¿Qué hay de diferente entre estos archivos? Porque no quiero perderte el tiempo porque estas herramientas son básicamente exactamente las mismas. Y ahora que Adobe ambos Figma, van a ser exactamente los mismos en el final de la línea. Entonces eso es básicamente para este video, asegúrate de revisar la plantilla. Se adjunta a los archivos del proyecto del curso. Asegúrate de abrirlo y asegúrate de abrir las plantillas Figma para todas y cada una de las secciones de este curso solo para verificar las diferencias entre los archivos Adobe XD y los archivos Figma. 17. SECCIÓN 3 Propuestas de proyectos: Las propuestas de proyectos son una parte increíblemente importante de cada proyecto de diseñador freelance porque no quieres simplemente enviar a tus clientes los precios y decir, Aquí tienes, quieres romper ese precio para que puedan entender fácilmente qué te están pagando. Quieres digerir, para que entiendan con bastante facilidad lo que has estado trabajando en este proyecto. ¿Cuánto tiempo va a tomar? Cuánto tiempo va a costar realmente cada pieza del proyecto. ¿Por qué estás haciendo todos estos pasos? ¿Qué pasos están realmente involucrados en este proceso de diseño? Entonces todo lo que vamos a cubrir en esta sección, y en realidad voy a mostrarte una plantilla que puedes usar. Y te voy a dar esa plantilla para que la puedas usar en tus futuros proyectos solo para acelerar un poco tu proceso y hacer que se vea un poco más creíble para tus clientes. Así que comencemos. 18. ¿Qué es una propuesta de proyecto: Uno de los mayores errores que veo, especialmente los diseñadores jóvenes cometen es que no envían las propuestas de proyectos. Pero cuando el cliente se acerca a ellos y les pide un precio del proyecto, simplemente simplemente el estadio terminó solo dicen por ejemplo diseño del sitio web es de $2,000, pero los clientes generalmente no entienden porque ellos mismos no son diseñadores en la mayoría de los casos. Y no entienden lo que implica ese proyecto de diseño de sitios web en particular es el diseño ajustado. ¿Está codificando? ¿Es un tema de WordPress? Se enteraron de algo llamado Wix, por ejemplo o un Webflow. Qué incluye el precio y en lo que les estás ofreciendo. Tienes que explicar cada pequeño detalle para justificar tu precio. Eso te va a hacer lucir profesional y pulido como diseñador, y a su vez va a hacer que tu cliente entienda mejor lo que realmente está involucrado en ese proyecto de diseño de sitios web. Ahora bien, esto no tiene que implicar simplemente el diseño de sitios web. Puede ser diseñado por aplicaciones, diseño de folletos, diseño de logotipos, lo que sea que esté haciendo, tiene que explicar a sus clientes qué es exactamente lo que les está ofreciendo por el precio que está pidiendo. Eso es exactamente lo que es la propuesta de diseño. En esta clase vamos a hablar sobre la propuesta de diseño UI UX porque eso es parte de un mundo de diseño y una esfera de diseño, que es realmente diferente a, por ejemplo diseño de logotipos o folletos diseño, porque una vez más incluye diferentes pasos para llegar a la solución, que es el diseño de sitios web, diseño de aplicaciones y cosas así. Entonces en esta clase vamos a hablar de propuestas de diseño UI UX. Pero sea lo que sea que estés haciendo, cualquier rama o diseño en el que te encuentres, puedes aplicar este mismo principio. Simplemente ajústelos a su propio nicho de diseño, su propia esfera de diseño, lo que sea que esté haciendo, y simplemente sígalos para sus futuros clientes. 19. ¿Cuándo debes enviarlo: ¿Cuándo exactamente deberías enviar tu propuesta a tus clientes? Bueno, primero tiene que comenzar con descubrimiento, llamada o correo electrónico. Entonces, cuando tus clientes se acercan a ti, los llevas por correo electrónico a, por ejemplo Zoom o Google Meet, Skype, lo que sea que estés usando. O simplemente puedes continuar esa conversación por correo electrónico si no te sientes cómodo frente a la cámara o hablando con el micrófono, si tu inglés no es realmente bueno, entonces vas a recolectar todo esta información sobre lo que realmente necesitan hacer para ese proyecto en particular. Y tienes que hacerles un conjunto de preguntas y puedes consultar mis tutoriales y cursos de UI UX, especialmente mi masterclass de Adobe XD. Porque en ella realmente profundizo sobre el diseño breve y cuáles son algunas preguntas que deberías estar haciéndole a tus clientes para obtener la imagen perfecta de qué es exactamente lo que necesitan en eso proyecto particular. Una vez que recopile todas esas preguntas y una vez que recopile todas esas respuestas, y luego llega el momento de comenzar a preparar esta propuesta de diseño UI UX. Y en ella, vas a incluir todos los servicios que vas a brindar a tu cliente para ese proyecto en particular. Entonces, por ejemplo, si estás haciendo investigación de proyectos, si estás haciendo entrevistas personales, si estás haciendo investigación de personas, si estás haciendo wireframes en papel, wireframes en Adobe XD, porque estoy usando Adobe XD, esta clase es sobre Adobe XD, pero puede ser cualquier cosa, puede ser Illustrator, puede ser Sketch, figma, lo que sea que estés usando, asegúrate de incluir todos esos detalles. Y luego, por supuesto, el diseño de UI, la exportación de activos, tu tiempo que dedicas a este proyecto porque esa es la única cosa clave que la mayoría de los diseñadores pasan por alto. El tiempo que dediques a este proyecto, ya sea enviando correos electrónicos, haciendo llamadas telefónicas, haciendo videoconversaciones con tus clientes a través de Zoom Skype o Google Meet o lo que sea. Todas esas cosas deben incluirse en la propuesta de proyecto de deuda. Porque de esa manera los clientes van a entender qué es exactamente lo que les estás facturando para pasante, como dije, te va a hacer lucir más pulida y profesional. Y una vez más, los clientes van a tener una idea clara lo que es cada dólar que les pediste, ¿a dónde va? Así que asegúrate de enviar propuestas de proyectos. Y en el siguiente video vamos a explorar realmente cómo crear uno en Adobe XD. Y te voy a mostrar lo que en mi opinión y en mi experiencia, son algunas cosas clave que en realidad deberías incluir en tus propuestas de proyecto. 20. Creación de una propuesta de proyecto: Como dije anteriormente, soy usuario de Adobe XD y realmente me encanta. Lo uso todos los días desde hace años. Y en esta clase te voy a mostrar como crear tu propia propuesta de proyecto y cuales son algunas de las preguntas que deberías estar haciéndote a tus clientes y también, cuales son algunos de los servicios que deberías estar ofreciendo a tus clientes. Así que vamos a saltar dentro de Adobe XD y voy a mostrarte lo que estoy usando. Aquí está la propuesta de proyecto Mike. Y esta es en realidad la propuesta de proyecto que creé. Yo lo creé es como un producto y en realidad puedes conseguir este producto si quieres. Precio realmente simbólico, voy a dejar el enlace en el PDF. Simplemente puedes hacer clic en ese enlace y conseguirle un ancho, un descuento masivo si quieres. Si no, simplemente puedes seguir esta clase y crear la tuya propia con tus propias preguntas, respuestas y todas las cosas en el medio. Entonces vamos a cubrir cada uno de estos en lecciones separadas. Pero solo quería correr rápidamente y mostrarte por qué estoy usando Adobe XD y por qué configuré todas estas cosas como lo hice. En primer lugar, puedes crear estos aeropuertos. Y esto al alza es de 1920 por 2,500, lo que no es realmente ideal para imprimir. Pero en esta época, realmente estás enviando la mayoría de tus propuestas por correo electrónico de todos modos. Entonces esto lo encontré a lo largo de mis años de experiencia, tengo casi 15 años en este negocio. Me pareció archivado tipos de este tamaño funcionan muy bien tanto para impresión como para enviarlos por correo electrónico. Y para mostrarte que estas son estas plantillas exactas las cuales solo te muestran en XD. Entonces esto, simplemente seguí adelante e imprimí en papel A4. Y puedes ver por ejemplo este es el precio del proyecto. Se puede ver la calidad y se puede ver cómo se ve. Y también te puedo mostrar en este proyecto detalles, por ejemplo, para que puedas ver claramente, aunque se lee muy bien y realmente depende de que tu cliente sea local? ¿Se les va a dar esto en persona o va a enviar estos archivos por correo electrónico? Entonces por eso dije que adobe XD es genial porque es una herramienta basada en vectores, lo que significa que todas estas cosas que diseñas no van a perder calidad nunca. Y no están basados en pixeles, como Photoshop, por ejemplo, por eso no recomendaría y aconsejaría usar Photoshop. Te aconsejaría usar Adobe XD. Además, Adobe XD tiene esta increíble característica incorporada. Como puedes ver, puedes diseñar prototipo y compartir dentro del diseño. Puedes diseñar todas estas cosas que ves en la pantalla dentro del prototipo. De hecho, puedes conectar todos estos detalles. Si quieres construir nuestro prototipo y los clientes realmente pueden hacer clic. Puedes enviarles este enlace. Pueden hacer clic y acceder a diferentes páginas si quieres crear esto como un sitio web personalizado, por ejemplo, no hay codificación involucrada, pero parece que la hay. Y agrega otra capa adicional de profesionalismo y personalidad a tu diseño. Por último, hay participación. Así que hagas lo que hagas en un prototipo, puedes saltar dentro de la pestaña Compartir. Puedes generar un enlace y luego puedes enviar ese enlace a tus clientes si así lo deseas. Por eso me encanta Adobe XD porque lo estoy usando para todo mi trabajo, trabajo de diseño UI UX y algún trabajo que no es UI UX, como el trabajo de redes sociales, por ejemplo, pero lo que sea que crees, ya sea diseño de aplicaciones, diseño de sitios web, diseño de productos, lo que sea que estés haciendo, entonces puedes prototimarlo fácilmente y compartirlo todo desde Adobe XD. Y por eso me encanta usarlo. Además, como puede ver, tenemos todos estos componentes globales. Entonces para este diseño y plantilla en particular, como dije, se puede conseguir esto. Una vez más, el link va a estar en un PDF. Simplemente haga clic y acceda a él. Puede hacer clic derecho, por ejemplo en este color H1, puede presionar Editar. Digamos que el color de tus clientes es, digamos tres, E, C6, f, f, por ejemplo, simplemente presiona Enter o Return. Y como puedes ver, con solo un clic, aplicó todos estos cambios globales a este color en particular. Eso se puede hacer con todos estos colores. Y realmente te aconsejaría que, si estás terminando usando esta plantilla al final del día, cada vez que hagas un cambio, simplemente selecciona este color hexadecimal que seleccionaste para tu proyecto cliente. Presiona el comando del controlador C, haz clic derecho aquí mismo, presiona Cambiar nombre y simplemente cambia este código hexadecimal original con tu nuevo código hexadecimal. Y de esa manera se va a actualizar en tiempo real y realmente mostrar a tus clientes que realmente, realmente prestaste atención a los pequeños detalles. Una vez más, esto está diseñado para darte muchas mejores posibilidades de aterrizar a ese cliente y ese proyecto. Porque una vez más, vas a destacar como un profesional del mar de estos diseñadores aficionados que simplemente están pidiendo $500, $5,000 por un sitio web sin siquiera explicar lo que realmente está involucrado en ese proceso. Debajo de eso tenemos estilos de personajes. Y en realidad puedes cambiar estos estilos de personaje como te mostré con los colores. Y tenemos todos estos íconos. Y te voy a dar el enlace a estos iconos si quieres comprarlos, sus premium. Pero si no lo haces, está bien. Simplemente puedes usar cualquier tipo de iconos gratuitos que quieras. Y finalmente, tenemos el componente para el pie de página. Entonces tenemos el componente padre, que es este componente principal aquí mismo. Y entonces todos estos otros componentes de pie son en realidad componentes secundarios. Entonces, cada vez que hagas un cambio en este componente, que es un componente principal maestro, realmente se va a adaptar y cambiar y cruzar todos estos diferentes aeropuertos. Por lo que la primera página de esta propuesta de proyecto es portada. Y en el siguiente video vamos a cubrir lo que realmente está incluido dentro de la portada. Entonces te veré ahí. 21. Portada de propuestas: En este video, vamos a hablar de portada de propuesta. Entonces aquí está, y déjame correr rápidamente y explicarte qué es todo. Entonces, si cambiamos de mi panel de activos a mi panel de Capas aquí mismo y hacemos clic, puedes ver que la organización del proyecto es buena y todo puede ser fácilmente accesible. Entonces, lo que en realidad es el nombre del subproyecto, ahí es donde vas a ingresar el nombre de tu proyecto. Por ejemplo, si ese es nuestro sitio web de automóviles, vas a decir, por ejemplo rediseño de nuestro sitio web o algo así. Pero se asegura de ingresar nombre exacto del proyecto porque una vez más, va a exudar confianza en tus clientes. Y realmente te va a diferenciar de todos estos otros diseñadores porque sí prestaste atención a estos pequeños detalles a continuación que tenemos el nombre de la empresa. Entonces en este ejemplo imaginario, será Audi, sea cual sea el sitio web de la compañía, audi.com, por ejemplo y la dirección de la empresa es su dirección local de ese concesionario Audi. Por supuesto, esto es sólo un ejemplo. Vas a ingresar la información de tu cliente. Y lo bueno de esto es cuando seleccionas este nombre y digamos por ejemplo Audi, rediseño de sitios web. Debido a que incluí relleno, esto se va a expandir a medida que escriba a lo largo. Pero si no quieres relleno, simplemente puedes seleccionar esta información del proyecto. Puedes ver que el relleno está comprobado aquí mismo. Simplemente puede desmarcarlo y luego no se va a expandir a medida que escriba. Sólo querer no detrás de eso hay una imagen. Y realmente te aconsejaría que incluyeras algún tipo de imagen de fondo de oferta de su sitio web existente, redes sociales, página de LinkedIn, captura de pantalla de YouTube, lo que sea que tengan. Una vez más, solo para demostrarles que realmente le prestas atención a los detalles. Realmente podrían sentirse como en casa como esto es realmente personalizado para su negocio, para sus necesidades. Como es, que es básicamente, pero simplemente les estás mostrando cómo puedes realmente diseñar esto y aquello realmente prestó atención y que realmente te preocupas por su negocio y ayudándolos. Debajo de eso, tenemos el pie de página y lo que expliqué anteriormente. Así como, si no tienes tu propio sitio web aquí, puedes ingresar por ejemplo tu dirección de Behance y perfil de balizas perfil de regate, tu perfil Upwork, lo que sea que estés haciendo, lo que sea que lo estás haciendo, simplemente puedes ingresarlo aquí mismo. Lo que es de nuevo, solo asegúrate de instalar estas fuentes. Y dejaré los enlaces a las fuentes en un PDF también. Si quieres echarles un vistazo, entonces tenemos el correo electrónico. Obviamente, esto es solo el valor por defecto. Vas a ingresar tu dirección de correo electrónico y tenemos un contacto, luego puedes ingresar tu información de contacto ahí. Puedes incluir el ícono de WhatsApp aquí o ícono de Viber si estás usando alguno de estos servicios. Y básicamente eso es todo cuando los incluyes aquí en este primer pie de página como se explica esto como un componente padre, se va a actualizar automáticamente a través de todos estos. Entonces si te muestro eso por ejemplo digamos que este es Alex en indesign.com, que es mi sitio web. Cuando lo escriba, puede ver que se aplicó en todas estas páginas, que es el punto de componentes maestros. Entonces así de fáciles son de usar. Entonces eso es básicamente, es una cosa menos que quería mencionar es que hay una grilla involucrada aquí mismo, como se puede decir claramente. Entonces cuando seleccionas el nombre de la mesa de trabajo, puedes ver aquí mismo, déjame esconderme. Entonces tenemos 12 columnas. El ancho del canalón es de 60, que es la distancia entre estas columnas. El ancho de columna es A2, que es el ancho de estas columnas. Y finalmente, tenemos márgenes vinculados a izquierda y derecha. Los márgenes son simplemente este espacio de esta última columna a la derecha y esta última columna a la izquierda. Así que el espacio entre el borde de la mesa de trabajo y la propia columna. Entonces básicamente eso es todo para la portada. Y como puedes ver, realmente puede ser importante obtener el color correcto. Y cuando empieces a ajustar aquí mismo, entonces va a ser fácilmente traducible a estas otras páginas. Y una última cosa a tener en cuenta aquí, incluso puedes agregar su propio logotipo si quieres identificar incluir logo. Pero si quieres, puedes poner su logo ahí, que es solo esa capa extra, extra de personalización y realmente capa extra de mostrar que te importa. En el siguiente video vamos a hablar de detalles del proyecto. Entonces te veré ahí. 22. Detalles del proyecto: Los detalles del proyecto son una de las partes más importantes de tu propuesta de diseño UI UX. Así que vamos a comprobarlo y ver qué puedes hacer, ¿verdad? Así que aquí está la página de detalles de mi proyecto, como puedes ver aquí mismo. Entonces si te llevo a algunos detalles, antes que nada, si hago clic aquí mismo, tenemos el título de la página y tenemos este icono aquí mismo. Pero como mencioné anteriormente, puedes usar tus propios íconos. Puedes cambiar los iconos porque se crean como componentes si lo selecciono aquí mismo. Así que en realidad no incluí este como componente al dejarme presionar Control K para crearlo. Entonces, por ejemplo, si quiero cambiarlo aquí mismo, simplemente puedo agregar este componente, por ejemplo, este ícono. Y se va a actualizar en tiempo real y reemplazar este ícono anterior por este ícono existente. Entonces ese es el título de tu proyecto. Y aquí mismo nos hemos dividido. Y por ejemplo puedes agregar incluso el nombre del proyecto si quieres, pero realmente no te voy a molestar con esa información. Entonces, por ejemplo sitio web de Audi rediseña los detalles del proyecto si quieres, pero creo que esto es lo suficientemente bueno. Como puede ver, no hay números de página porque realmente puede exportar páginas individuales a la vez si lo desea, si solo necesitan detalles del proyecto, por ejemplo, entonces realmente no tiene sentido porque realmente puede exportar páginas individuales a la vez si lo desea, si solo necesitan detalles del proyecto, por ejemplo, entonces realmente no tiene sentido teniendo el número dos, por ejemplo, número tres en la parte superior porque lo que es, ¿qué es eso en realidad? Así que puedes exportarlo sin ningún número de proyecto y número de página y aún así puede funcionar bien. Entonces lo que tenemos aquí mismo es el proyecto Oreo. Así podemos proyectar páginas de descripción para diseñar un diseño receptivo y una línea de tiempo del proyecto. Entonces todo esto tiene, por supuesto, su significado y es realmente importante. La descripción del proyecto es lo que realmente acordó con su cliente vía correo electrónico. Somos una llamada de descubrimiento y cosas así. Páginas para diseñar. O esto puede ser pantallas para diseñar si estás haciendo diseño móvil, que son las pantallas son páginas que acordaste diseñar, un diseño responsive. Y claro, sólo una nota más sobre las páginas para diseñar. Si hay algunas páginas adicionales para diseñar, entonces esto va a venir en la fase de investigación. Y luego puedes simplemente poner un asterisco aquí y, por ejemplo , decir, Todavía no discutimos esas páginas adicionales después de que terminamos con esas, entonces probablemente, por ejemplo podemos ajustar el precio y cosas así. Así que solo asegúrate de prestar atención a ese diseño receptivo. Por supuesto, si aceptaste el diseño responsive, solo asegúrate de hablar con sus desarrolladores sobre los tamaños exactos para el diseño responsive. Y por último, cronograma del proyecto. ¿Cuándo va a comenzar? ¿Cuándo es el punto medio y cuándo va a terminar? Que son por supuesto, extremadamente importantes para cualquier tipo de proyecto en el que estés trabajando. Hay un sitio web que de una sola página o con 100 páginas. No importa. Es sumamente importante. Entonces tenemos cronograma del proyecto. Entonces, para todas estas cosas, ¿cuánto tiempo me va a llevar terminar cada una de estas cosas? Entonces por ejemplo diez días, 20 días, 16 días, ocho días, que son las revisiones. Por lo tanto, las revisiones siempre dependen de tu velocidad y de la velocidad de tus clientes para brindarte la retroalimentación. Entonces, por ejemplo , si les toma, digamos tres días para brindarle comentarios porque necesitan consultar con sus socios, socios comerciales y cosas así. Entonces obviamente te va a llevar mucho más tiempo proporcionar ese resultado final, la revisión final. Por eso siempre pongo, como pueden ver aquí mismo, dice ocho más ocho más estos y más realmente depende de ellos en cuanto a lo rápido que sean. Por último, hemos impartido un tiempo total de proyecto 54 más días. Una vez más, el plus es esa revisión más. Entonces eso es básicamente todo para la estructura. Y ahora déjeme explicarle rápidamente cómo está configurando todo esto. Entonces, si entramos en proyecto o revisión y abrimos eso, tenemos el título, que es esto de aquí mismo. Para que puedas cambiar esto o puedes contratar lo que quieras. Entonces estos son los detalles que acordamos durante nuestras conversaciones de correo electrónico y llamadas. Entonces, si terminas comprando esta plantilla, una vez más, link va a estar en un PDF. Esto se puede cambiar. Si no tuviste una llamada con ellos, entonces solo tienes una conversación por correo electrónico con ellos, entonces puedes eliminar esta conversación de llamada de esta. Y sólo una nota rápida. Si terminas usando esta plantilla exacta o terminas recreando exactamente esta misma plantilla, que te estoy mostrando. Asegúrate de personalizarlo según tus necesidades y lo que realmente necesitas. Entonces como mencioné aquí, pagar la llamada. Asegúrate de revisar cada uno de estos artículos y simplemente personalizarlo para cada cliente en particular, porque te va a llevar como 1 h hacer todo esto y realmente va a pagar dividendos cuando llega a sus clientes, su profesionalismo y la satisfacción del cliente. Entonces, si volvemos a aquí, lo que quería mostrar es esto. Entonces estos son los artículos. Entonces estos son estos artículos y como puedes ver, están incluidos en una pila vertical de 40. Entonces esta es la distancia. Entonces, si lo incluyo a 80, por ejemplo , como pueden ver, la distancia va a ser mayor entre todos estos elementos. Y por último, porque está en una pila y es increíble característica de Adobe XD. Si tomo esta línea de tiempo del proyecto, por ejemplo y digamos que quiero moverlo por encima del diseño responsive. Lo que puedo hacer es simplemente dar clic aquí mismo, arrastrarlo, colocarlo. Y como puedes ver, va a cambiar de lugar automáticamente entre estos dos. Ahora lo que también es importante es entre estos dos. Entonces hay una distancia clara. Entonces aquí mismo tenemos la pila de 100. Entonces dentro de esta pila principal, tenemos estos dos. Así que la visión general del proyecto, que es esta, y la línea de tiempo del proyecto, que es esta con una distancia de 100. Entonces, lo que eso significa es cuando saltas dentro de cada uno de estos, así que ya sea proyecto o vista o cronograma del proyecto. Y digamos que quiero eliminar este cronograma del proyecto por cualquier motivo. Simplemente hago clic en él, lo borro, y luego el contenido de abajo se va a mover automáticamente a la parte superior para llenar ese espacio, que ahora es un fin de semana cuando elimino ese elemento anterior. Y si vuelo el cursor aquí mismo y selecciono esto, puede ver que todavía estamos con 100 de distancia entre estos dos, lo cual es genial. Si quieres quitar alguno de estos artículos, Digamos que estoy trabajando con estos artículos exactos. No lo haces, y luego simplemente, puedes quitar cualquiera de estos artículos que no se ajuste a tus necesidades. Puedes hacer eso por cualquiera de estos que quieras. Entonces páginas para diseñar, digamos que solo tienes una página y borradas. Como puedes ver, va a aplicar ese cambio a todas estas páginas y a todos estos elementos en su interior. Por supuesto, es lo mismo con la línea de tiempo del proyecto. Entonces, si los elementos de la línea de tiempo, si selecciono un elemento, presione eliminar. Como pueden ver, el tiempo total del proyecto se va a ajustar y simplemente ir a un lugar de este ítem anterior el cual acabo de eliminarlo. Por supuesto, esto es extremadamente importante porque quieres revisarlos con los detalles del proyecto tanto como puedas durante tu conversación por correo electrónico, durante tu conversación telefónica, porque de esa manera vas a eliminar cualquier duda sobre lo que realmente incluye, incluido en ese proyecto en particular. Entonces, una vez más, si te llevo de vuelta, puedes ver las páginas de descripción del proyecto para diseñar, el diseño responsivo, la cronología del proyecto. Y por supuesto, puedes agregar cualquier tipo de artículos que quieras aquí mismo, por ejemplo, están establecidos para ser diseñados. Sus bienes, mis bienes, todas esas cosas. Así que puedes incluirlos aquí, por ejemplo, si quieres, por supuesto, dar servicio. Entonces, como puedes ver, investigación de proyectos de investigación de competidores, resumen de diseño e inspiración. Por supuesto, como mencioné, puedes eliminar cualquiera de estos y puedes incluir tus propios artículos en cuanto a exactamente en qué estás trabajando en ese proyecto en particular. Porque no todos los proyectos por ahí van a requerir esto. Entonces, por ejemplo, es posible que la investigación de proyectos ya esté hecha por ti, así que vas a reducir tu conteo de días. La investigación de competencia puede estar fechada eso para ti. Entonces, una vez más, vas a reducir estos días o aumentarlos dependiendo de qué tan rápido estés trabajando realmente en ese proyecto en particular. A continuación tenemos precios de proyectos. Así que te veré en el siguiente video donde vamos a discutir los precios del proyecto, por qué es importante y cómo puedes ajustarlo realmente a tu propuesta general de proyecto. Entonces te veré ahí. 23. Precios de proyectos: En este video, vamos a hablar de precios de proyectos. Así que vamos a comprobarlo. Y aquí está. Una vez más, parecía Detalles del proyecto y portada del proyecto. El precio del proyecto es sumamente importante porque cuando se trata de dinero, los clientes suelen ser repelentes, llamémoslo así. Y realmente no saben en qué se están metiendo. Entonces aquí es donde la propuesta de proyecto en general es útil, pero también los precios del proyecto, ya que es una página separada. Así que saltemos rápidamente y veamos qué se incluye aquí mismo. Entonces una vez más, exactamente la misma estructura. No voy a aburrirte demasiado con estos detalles. Entonces, como puedes ver, tenemos la pila de 81 grupo es este de aquí para las tarifas del proyecto. Y el segundo grupo está aquí para las opciones de Proyecto. Así que cada vez que quites uno de estos artículos, por ejemplo, va a rebotar como te mostré anteriormente. Entonces déjame mostrarte eso una vez más. Digamos que elimino este artículo. Como pueden ver, todos ellos van a saltar para llenar el espacio, que ahora es fin de semana cuando elimino este artículo, hablando de artículos, como pueden ver, tenemos cuotas de proyecto. Entonces esto es lo que estaba hablando anteriormente como dos, qué va a exudar confianza del cliente y realmente explicarles qué exactamente en detalle es lo que realmente estás cobrando por este proyecto en particular. Entonces, si echas un vistazo, tenemos investigación de proyectos y puedes profundizar en los detalles, explicándoles más tarde durante tu llamada. Si quieres revisar esto con ellos o vía correo electrónico, por ejemplo, si te dicen, qué es exactamente una investigación de proyecto, entonces deberías por ejemplo decirles, bueno, necesito investigar tu empresa. Necesito investigar tu competencia, que es lo que viene después. ¿Quién es tu competencia? ¿Qué eres? ¿En qué consiste la naturaleza? ¿Qué está tratando de lograr el servicio de productos de su empresa? ¿Quiénes son sus clientes objetivo, por ejemplo, dónde se encuentran, cuáles son las empresas en las que están trabajando? Y todas esas cosas es lo que entra en la investigación de proyectos, resumen de diseño. En realidad vas a escribir el resumen de diseño tú mismo si te inscribes, como se explicó anteriormente en mi clase magistral de Adobe XD, por ejemplo, vas a obtener la plantilla de resumen de diseño y puedes usar esa plantilla conjunto con esta propuesta de diseño para trabajar con la inspiración de tus clientes, que es una cosa clave. Una cosa importante en cada proyecto es tu inspiración. Entonces necesitamos inspirarte a ti mismo. Necesitas pasar tiempo en todos estos diferentes sitios web explorando posibles soluciones, posibles diseños, estilos posibles, colores, tipografía, escala, todas esas cosas. Necesitas inspirarte y necesitas invertir tu tiempo para lograr estos resultados. Entonces esto es simplemente un precio básico, que obviamente puse un cargo mucho más por todas estas cosas. Contamos con investigación conceptual en papel, wireframe, mapa del sitio y diagramas de flujo. Y siempre incluyo mi tiempo en estos, pero puedes agregar una línea separada. Simplemente lo pongo así porque me voy a quedar sin espacio aquí mismo. Pero puedes incluir una línea separada. Y para hacer eso, por ejemplo seleccionar un elemento, presionar Control D, y va a colocar un elemento debajo. Y por ejemplo, digamos la hora del correo electrónico, llamada y la hora de videollam Ese puede ser tu momento. Entonces cada vez que quieran reunirse contigo y hablar contigo sobre ese proyecto en particular. Vas a cobrar por eso. Y simplemente haz doble clic aquí mismo, y digamos 900 dólares, digamos que eso es todo. Así que asegúrate de incluir todas las cosas que personalmente vas a invertir en este proyecto. Entonces todo tu tiempo, investigación, diseño, planeación, wireframes, compartir estos enlaces, revisiones de retroalimentación, todas estas cosas que van a incluir en este precio. Por último, al final del día, solo pasé por y agregué todos estos, y llega a este precio, así que 30,750. Pero obviamente este es un precio imaginario. Una vez más, cobré mucho más de mis proyectos. Para que puedas recorrer estos y simplemente ajustarlos a lo que funcione para ti. Entonces, por ejemplo, a. Papel, investigación de conceptos wireframe, mapa del sitio y diagramas de flujo. A lo mejor quieres agregar algo más aquí. Entonces digamos estructura metálica de papel, exploración de estructura metálica. Si eso es lo que estás haciendo, investigación conceptual, mapa del sitio, bla, bla, bla, y entonces puedes cobrar más dinero porque agregaste esa cosa adicional. O si, por ejemplo no está haciendo investigación conceptual, haga doble clic aquí, saltando, elimine la investigación de conceptos y luego simplemente ajuste este precio para que se ajuste a lo que sea que esté trabajando sobre este proyecto en particular. Entonces eso es básicamente lo que son las tarifas del proyecto. Y como dije, esto es lo que va a exudar esa confianza en su cliente. Para entender realmente y estar más cómodo en pagarte ese dinero. Porque ahora les mostraste, bien, estas son todas las cosas que en realidad voy a estar trabajando para ti en este proyecto en particular. Entonces de ahí, por eso necesito cobrar ese dinero que te expliqué porque todas estas cosas están realmente involucradas en ese proyecto en particular. Pasemos a esto. Entonces tenemos opciones de pago. Y una vez más, el pago es extremadamente importante para nunca, nunca, nunca, por cualquier proyecto en el que estés trabajando para cualquier cliente que estés trabajando sin que te paguen primero. Y aquí es donde las opciones de pago vienen muy bien. Una vez más, estas son solo opciones de pago que se utilizan en el pasado. Hay muchos otros como, por ejemplo , pago semanal, pago mensual , pagos únicos o te están pagando el 100 por ciento. Si te sientes cómodo con eso, tal vez quieras agregarte a su compañía, por ejemplo, convertirte en accionista y cosas así. Entonces hay muchas, muchas, muchas otras formas en las que te pueden pagar. Pero seguí adelante e incluí tres de los más comunes. Entonces por ejemplo dos, pagos iguales. Entonces donde sea que tu total aquí mismo se divide simplemente en dos. Y luego justo, aquí mismo, 50% por adelantado justo antes de comenzar este proyecto. Y luego 50 por ciento al final, justo antes de que necesite enviarles los expedientes finales para este proyecto en particular, tenemos tres pagos iguales. Entonces 33.3% al inicio, medio, y al final del proyecto. Y tenemos dos pagos, por ejemplo 70, 30 split o 60, 40 split. Por eso dije que hay muchas opciones de pago diferentes, así que asegúrate de escoger y elegir las que sean las que más te sientas cómodo. Y luego simplemente ponlo aquí mismo. Entonces si lo es, creo que en este caso fue 70 30 split, entonces 9625 y luego último pago es por uno a cinco. Y solo asegúrate de explicar cuándo esperas que realicen esos pagos a cualquiera de estos que incluyas dentro de todo el punto de estas opciones de pago es darles opciones y explicarles que se les puede dar opciones. Entonces, en la mayoría de los casos, existe este estigma sobre el dinero, que realmente no entiendo porque estás brindando el servicio. Igual que vas en la tienda a comprar comida, por ejemplo, ese empleado de la tienda te va a proporcionar el servicio por el que se les paga. Parece que es con diseño de sitios web o diseño de aplicaciones. Entonces no es diferente en absoluto. Así que asegúrate de brindarles estas opciones de pago porque a veces va a ser mucho más sencillo para ellos dividir ese gran pago, especialmente si se trata de pagos grandes a tres partes o cuatro partes o cinco partes. Así que asegúrate de darles primero estas opciones y luego estas opciones entre YouTube, puedes solucionarlo aún más. Entonces te voy a dar un ejemplo. Por ejemplo, podrían pedirte dos pagos, pero en vez de, digamos 70, 30 split, tal vez quieran pagar al revés, tal vez 30 por ciento al inicio del proyecto, 70% al final del proyecto, lo mejor te sientes cómodo con eso. O en lugar de tres pagos iguales puede ser el que lo divida en cinco pagos iguales. Entonces por eso dije, solo dales estas opciones de pago con las que te sientas cómodo y con las que quieras trabajar. Y luego entre ustedes dos, se puede arreglar. Por ejemplo, como dije, para igualar varianza tres pagos iguales a través de pagos iguales, lo que sea con lo que se sienta cómodo y con el que su cliente se sienta cómodo, entonces simplemente llegue a ese incluido en las opciones de pago y luego ambos van a terminar satisfechos. Entonces básicamente eso es todo por las opciones de precios. Como puedes ver, es sumamente importante trabajar todas estas cosas porque una vez más, va a mostrar a tus clientes que eres profesional. Les va a dar más confianza en ti para contratarte. Y debido a que vas a utilizar esta propuesta de diseño, la propuesta de proyecto, que se adapta a su negocio y su marca, realmente va a hacer que se sientan cómodos al contratarte que algún otro diseñador. A continuación, tenemos términos y condiciones. Una página sumamente importante. Entonces te veré en el siguiente video donde vamos a discutir eso. 24. Términos y condiciones: A continuación tenemos términos y condiciones. Así que vamos a saltar dentro. Y aquí está. Entonces estos son, estos son los términos y condiciones, una vez más, página sumamente importante porque aquí hay algunas reglas base que vas a poner. Tu cliente va a entender qué incluye, qué no está incluido, qué es posible, qué no es posible, qué está disponible, qué no está disponible. Por lo que todas estas cosas deben estar listadas en dos términos y condiciones. Estos son solo algunos de los míos, claro, para algunos proyectos que usan menos. Para algunos proyectos utilizo mucho más. Entonces, si necesitas usar mucho más de, simplemente puedes duplicar este tablero de arte para n, para cualquiera de estos. Para el caso, puede mantener opción de tecla Alt en su palabra clave, duplicarla y, por ejemplo llamar a estos términos y condiciones uno términos o condiciones o simplemente continuar donde lo dejó aquí, pero se asegura de posicionar esta página en lugar de esta página Acerca de mí. Simplemente saca esto del camino, así. Básicamente solo haz una copia y sácala del camino. Así que simplemente quita sobre mí, posiciona esto aquí mismo. Entonces luego, cuando subiste exportando esto como múltiples archivos PDF, vas a ser, tu cliente va a poder desplazarte hacia abajo entre estos si necesitas incluir más términos y condiciones. Ahora, hablando de términos y condiciones, lo que en realidad deberías estar incluyendo por dentro. Entonces tenemos recursos del proyecto. Entonces, por ejemplo las imágenes que vas a usar para tus proyectos, que son tantas imágenes que están incluidas en este proyecto, vas a terminar usando imágenes de Unsplash o pagando por imágenes de Envato Elements, por ejemplo, o pagando por esas imágenes realmente caras de fotógrafos que van a pagar por esas imágenes, para iconos, para fuentes, para ilustraciones, para maquetas 3D, para maquetas 2D, por todas esas cosas. Estos son los recursos del proyecto. ¿Quién va a pagar por eso? Si vas a pagarlo como diseñador, entonces tienes que volver al precio del proyecto y aumentar mucho ese precio del proyecto porque vas a terminar pagando por todos estos si el cliente va a estar pagando por todos ellos, y entonces cómo va a funcionar todo esto. ¿Vas a encontrar un recurso, luego pedirles que lo compren? O te van a enviar el dinero por adelantado para esos recursos que no están incluidos en el precio de tu proyecto. Esto es dinero adicional del proyecto. Entonces, ¿te va a mandar ese dinero para esos recursos de proyectos? vas a pagar con ese dinero. Y entonces vas a seguir teniendo este dinero, que aceptaste que sea el precio total del proyecto. Así que solo asegúrate de prestar atención a esas cosas. Entonces tenemos revisiones de proyectos, que es lo que más les gusta a los clientes. Tienes que limitar las revisiones de tu proyecto. En primer lugar, cuando esas revisiones van a ocurrir o van a ocurrir todos los días o al final de la semana o al final de dos semanas. O lo que realmente me gusta hacer es en las partes específicas de tu proyecto. Entonces, si te llevo de vuelta aquí mismo al precio del proyecto, por ejemplo, en mis casos, no hay reseñas hasta que llegue a esta sección. Entonces Adobe XD wireframes, y luego te doy dos rondas de revisiones y comentarios. No quiero que me molesten cuando estoy haciendo mi investigación, moodboards, preparativos, planeación, cosas así. Y luego cuando terminé los wireframes y les doy este enlace compartible, entonces podremos comenzar con las revisiones. Llegan a revisiones en este precio incluido. Si necesitan revisiones adicionales, entonces dentro de las revisiones del proyecto, vas a terminar diciéndoles lo costosas que son tus revisiones después de esas revisiones. Y o si les estás dando revisiones adicionales aquí mismo, entonces tienen que pagar las revisiones al final del proyecto porque ahora mismo están incluidas en el precio. Pero si deciden por ejemplo en Greeley en wireframes XD con enlace compartible. Entonces vas a hacer que paguen esas revisiones al final del proyecto. De lo contrario no vas a entregar el archivo, cosas así. Pero para evitar cualquier confusión, por eso tenemos términos y condiciones. Entonces vas a incluir todas estas cosas aquí mismo. Así que la adición del proyecto. Entonces digamos que quieren tarjeta de presentación adicional. No, no. No estás trabajando en una tarjeta de presentación. Solo estás trabajando en este proyecto de diseño de UI UX. Digamos que ellos quieren, para que incluyas publicaciones en redes sociales y un diseño de folleto o diseño de menú si su restaurante nano, solo diseño UI UX. Muchas gracias. Y para esas cosas, si estás trabajando con ellas, entonces puedes crear propuesta de proyecto adicional, que no es UI UX, sino propuesta de proyecto de diseño gráfico. Y luego simplemente trabajar en ellos con todas esas cosas. Una vez más, los términos y condiciones son sumamente importantes porque te van a ayudar a evitar cualquier confusión, cualquier confusión con tu cliente, y simplemente puedes ponerte a trabajar fácilmente. Entonces tenemos jornadas de trabajo. Si tus clientes están trabajando los fines de semana, Eso está bien. Bien en ellos. Pero si no estás trabajando los fines de semana, simplemente ponlo aquí mismo. Si realmente quieren que trabajes los fines de semana, pero no quieres trabajar los fines de semana, entonces cobra más. Por eso esto está aquí para los formatos de archivo. Una vez más, si estás trabajando en XD, que una vez más, realmente te recomiendo porque de verdad me encanta. Pero te preguntan por ejemplo archivo de Adobe Illustrator o tipos de archivos de Photoshop. Se puede decir en este formato de archivo, por ejemplo, no los estoy entregando porque estoy trabajando en XD. Pero por cargo adicional, puedo ir y puedo seguir adelante y entregarte estos porque son estas herramientas convertidoras online que puedes usar y tienes que pagar por ellas. Por eso pagarás, ganarás más dinero pidiendo pago adicional en estos formatos de archivo porque no estás trabajando con ellos. Usted busca ¿verdad? Entonces, después del final del proyecto, quién obtiene los derechos para usar el diseño y en qué momento, lo cual es crucial, si no te pagaron ese pago final, entonces no tienen los derechos para usar este diseño. Si lo hicieron, entonces puedes enviarles el diseño final del diseño, y luego depende completamente de ellos. Pueden hacer lo que yo quiera con ellos. Ellos pueden venderla, pueden revender eso. Pueden hacer lo que quieran. O si tienes algunos requisitos adicionales, entonces puedes ponerlo aquí mismo en derechos de uso, por ejemplo , con esta plantilla, no quiero que vendan esta plantilla. Entonces por eso en camino gamma donde lo vendo, hay una política estricta en el lado de la cámara. Puedes comprarlo, puedes usarlo para tus propios clientes. Puedes usarlo para un número ilimitado de proyectos, pero no puedes revenderlo como propio. De lo contrario, gum road y yo estamos legalmente obligados a demandarte porque rompiste esa regla, que es en términos y condiciones, es realmente bastante simple. Por último, tenemos cancelación de proyecto, que es mi favorita en realidad. Entonces me ha pasado esto anteriormente donde trabajo con clientes por ejemplo durante dos meses y terminan en quiebra. Eso realmente me pasó a mí. Entonces este no es mi problema. Quieren que les dé este diseño, pero aun así no me pagaron en la tarifa del último proyecto. Entonces lo que sucede en la deuda es con esta cancelación del proyecto parte de términos y condiciones, realmente se puede describir eso. Entonces si por alguna razón no quieres pagarme por el proyecto, no vas a conseguir archivos del proyecto o vas a conseguir los archivos del proyecto para esta parte en particular que nosotros terminó hasta la parte en la que me dijiste que no me vas a dar ningún dinero para el final del proyecto. Esto realmente me pasó a mí y lo hice exactamente así. Así que asegúrate de prestar atención, asegúrate de ser sabio sobre estas cosas porque no tienes el control de la vida de otra persona. No sabes lo que les va a pasar mañana. A lo mejor, a lo mejor van a morir. ¿Quién sabe? A lo mejor se van a mudar a otro país. A lo mejor se van a divorciar. A lo mejor su negocio va a estar en bancarrota. A lo mejor, no sé, Bolsa de Valores va a chocar. Muchas de las cosas pueden pasar, así que asegúrate de asegurarte como diseñador trabajando en este proyecto, creando esta cancelación de proyecto. Entonces básicamente, como dije, puedes incluir artículos adicionales si quieres. Estos son solo algunos de los que estoy usando todo el tiempo. Pero como dije, para algunos proyectos estoy usando menos. Para algunos proyectos estoy usando más. Y sobre todo si estás trabajando con clientes repetitivos, puedes evitar algunas de estas cosas, pero asegúrate de ser más inteligente al respecto y asegúrate de incluir lo que creas que es necesario. Estas son solo algunas de las orientaciones que se incluyen. Y una vez más, igual que con todos estos, tenemos estos artículos y se posicionan en una pila. Entonces, por ejemplo, estos derechos de uso , puedes golpear Eliminar, va a aparecer en la parte superior. Entonces es la misma estructura que te mostré con Project Pricing, Project Details y discover page. Por último, lo que nos queda por cubrir es sobre mí, que una vez más es una página clave. Entonces te veré en el siguiente video y vamos a discutir este. 25. Sobre ti: Por último, hablemos de mi página y por qué es importante. Entonces aquí está. Y una vez más, toda esta estructura de página como te mostré, es la misma. Pero lo que puedes hacer con esta imagen es que me incluyera para ser así de amplia. Entonces, por ejemplo, si quieres, puedes ponerte en una oficina como esta. Si tienes una oficina como si estuvieras trabajando en tu computadora, por ejemplo y puedes mostrar una imagen así. O si no lo haces, simplemente puedes ajustar el tamaño de esta imagen. Simplemente haga clic en él. Lo vas a ajustar. Se puede posicionar para estar en el centro. Este texto seguirá, para que realmente puedas jugar y hacer lo que quieras con él. Pero incluí así porque en la mayoría de los casos, los clientes les gusta mucho verte a , a tu cara, pero también les gusta ver en qué estás trabajando. De ahí, estas imágenes a continuación. Estas imágenes pueden ser tomadas de tu trabajo anterior los fines de semana o en Dribble, por ejemplo, puedes simplemente poner imágenes allí, que una vez más va a exudar confianza en nuestros clientes porque estás van a mostrar más de su trabajo que realmente vendieron porque contactaron su cartera de cuatro años desde su sitio web, Behance Dribble donde sea que esté alojando su cartera y su trabajo. Y por lo tanto, realmente puedes incluir imágenes allí solo para recordarles cuán alta es tu trabajo, qué es lo que eres capaz de crear como diseñador, porque hay una pequeña posibilidad que no van a terminar contratándote si piensan que el presupuesto es demasiado grande, por ejemplo o algo así, entonces esta página está realmente ahí para recordarles por qué la cantidad adeudada en la primera lugar. Porque en la mayoría de los casos, los clientes realmente ven a decenas de diseñadores diferentes. Realmente no saben cuál es cuál. Entonces, al recordarles aquí mismo algo de tu trabajo, entonces realmente puedes ayudarlos a decidir ir contigo en este proyecto en particular. Entonces esto, como puedes ver, dice tu nombre UI UX designer, pero claramente puedes hacer doble clic aquí mismo. Déjame ingresar mi propio nombre porque incluí relleno aquí mismo. Entonces cuando empiezo a escribir, se puede ver que el rodamiento se está ajustando. Por lo que puede incluir UI, diseñador UX slash diseñador gráfico. Creamos un Blogger, blog o lo que sea que seas, puedes incluirlo aquí mismo y se va a expandir. Y como te mostré anteriormente, puedes simplemente ajustar esta imagen a lo que quieras. Esto va a seguir. Esto puede terminar sangrando aquí mismo. Y claro que puedes cambiar esto a algún otro color. No tiene que ser blanco, así que realmente puedes jugar con él como yo sobre mí. Dice Recursos del Proyecto aquí mismo. Así que poco, un poco más sobre mí, por ejemplo, así que vas a incluir información sobre ti aquí mismo. Entonces realmente les vas a explicar, ¿quién eres? ¿Cuál es su información? ¿Cuál es tu educación, por ejemplo, cuál es tu experiencia en estos proyectos? Entonces, ¿dónde has trabajado en el pasado, que son algunos de tus intereses, por ejemplo, estoy realmente interesado en los autos y luego voy a explicarles esto? Y si estás trabajando en ese nicho en particular, carnicería, por ejemplo, decir que estás realmente inspirado en los autos, que realmente te interesan los autos. Hay posibilidades y posibilidades extremadamente altas. Los clientes te van a emplear para este proyecto en particular porque estás realmente interesado en esa esfera y en esa parte del mercado. Así que es muy importante poder contar una historia a estos clientes porque historia es lo que te va a contratar al final del día. Una vez más, si no quieres que estos estén aquí. Entonces estos tres párrafos, puedes presionar eliminar, eliminar este párrafo, mover estas imágenes a la parte superior. Simplemente puedes extender estas imágenes así si quieres que sean más grandes. Entonces, una vez más, es sumamente adaptable. Puedes hacer lo que quieras con eso. Y por último, lo que quiero mostrar aquí mismo es si eres varón y te identificas como macho, puedes hacer doble clic aquí mismo, y puedes mostrar este ícono de correo o nosotros también tenemos el ícono femenino. simplemente puedas ajustar la opacidad, tráela aquí mismo si te identificas como femenina. Así que puedes poner eso aquí mismo. De lo contrario, puedes usar un ícono de género neutro si te identificas como eso, eso también está bien, por supuesto. Entonces puedes incluir eso si quieres. No lo incluí aquí mismo, pero una vez más, voy a dejar el enlace a estos packs de iconos. No lo incluyeron ahí, pero si tienes tu propio ícono personal, mejor aún, simplemente inclúyalo ahí mismo. Te enseñé cómo reemplazar estos. Simplemente puedo arrastrar y soltar tu icono en lugar de este componente y se va a actualizar en tiempo real. Por último, ¿cómo puedes realmente exportar esto? Simplemente puede seleccionar no me gusta. Así que presiona Control E, elige un PDF, presiona Exportar y lo va a exportar a tu escritorio. Y por ejemplo donde está, Aquí está. Déjame hacer doble clic sobre él y abrirlo. Aquí está el control cero. Entonces este es el nombre de tu proyecto, detalles del proyecto, precios del proyecto, términos y condiciones sobre mí. Y si te llevo a esta página, por ejemplo y acerco un poco más. Porque una vez más, este es un formato de archivo vectorial. Se puede ver la calidad del texto. Es realmente impecable y no pierde ninguna calidad, como puedes ver aquí mismo. Y si te tomo como para que veas lo crujiente que es realmente claro este texto. Y por eso me gusta trabajar en Adobe XD. Si piensas que este texto gris no es fácil de leer, una vez más, puedes venir justo aquí donde dice gris neutro. Aplícalo para que quede un poco más oscuro, y luego se va a aplicar en todos tus proyectos. Además, una cosa más a tener en cuenta, si quieres exportar este y cualquier otro tipo de archivo, puedes seleccionar aeropuertos individuales y puedes compartirlos aquí mismo si quieres, pero puedes golpear Control E o Comando D en lugar de PDF, puedes compartirlos como imagen PNG o imagen JPEG o SVG si quieres que tus clientes previsualicen esto como JPEG , por ejemplo, simplemente puedes compartir esto o como te mostré con PDF, simplemente puedes seleccionarlos todos golpear Control E. Y luego en lugar de pdf, seleccionar JPEG, golpear Exportar y luego enviarles imágenes JPEG si eso es lo que requieren. Pero como dije desde mi experiencia, PDF realmente funciona bien porque realmente pueden abrir ese PDF y llevarlo consigo por correo electrónico, en su computadora portátil, en su escritorio, teléfono móvil, tableta, lo que sea están usando, pueden tomar ese PDF y es realmente agradable, simple y ligero. Así que es fácilmente compartible con ellos vía correo electrónico, páginas de redes sociales, estas aplicaciones de comunicación como WhatsApp, Viber, y lo que tienes tú. Entonces esto es básicamente cómo trabajar con la propuesta de diseño UI UX. Una vez más, si quieres comprobarlo, enlace está en el PDF. Asegúrate de hacer clic en ese enlace y acceder a él con un descuento masivo. O realmente te animo a crear el tuyo propio si quieres. 26. Plantilla Figma para proyecto UI UX: En este video, quería mostrarte cómo crear la propuesta de proyecto de diseño UI UX. Y la misma historia como con todos estos videos hasta ahora, voy a mostrar cómo crearlo en XD en estilo tutorial completo y luego mostrarte lo que es diferente entre XD figma porque no quiero perder tu tiempo. Entonces en este video, vamos a notar lo que es diferente entre usar Figma y XD para crear este tipo de plantillas. Entonces saltemos a Figma. Y aquí en Figma, se puede ver cómo se ve todo. Entonces me parece que cuando X es simplemente no tenemos nuestras tablas aquí. Tenemos estos marcos que básicamente son exactamente lo mismo. Es solo el área de contenido donde pones tu contenido. Ahora cuando haga clic afuera, van a notar que estos textiles y todos los textiles son exactamente los mismos que en XD ahora en Figma. Y luego tenemos estos estilos de color que son exactamente los mismos en XD e infimum porque queríamos que estas plantillas se vieran exactamente iguales. La única diferencia importante está aquí. Se les llama diseño automático en XD, se les llama pilas. Y estos son estos grupos que ves aquí mismo en los que puedes posicionar tus elementos. Entonces, por ejemplo para el precio del proyecto, tenemos el diseño automático aquí lugar de pilas en dirección vertical. Y la distancia es 80 píxeles entre todas estas secciones. Ahora tenemos dos secciones que son la información de precios, que es esta sección aquí mismo, y la opción de pago, que es esta de aquí. Ahora bien, si selecciono el precio del proyecto aquí, tengo la distancia entre esta sección y esta sección, que es esta distancia aquí mismo. Si vuelo el cursor, va a decir AT, y si lo aumento a 120, por ejemplo se puede ver lo que hace eso. Entonces este es el punto entero es solo nombre diferente y la herramienta es exactamente la misma y hace exactamente la misma historia como antes. Si vengo justo aquí fuera de todo aquí, tengo mi color H1. Si quiero ajustarlo, déjame pegarme justo aquí, alto yo mismo, para que puedas verlo aquí. Tengo el color H1, pero si hago clic aquí mismo para ajustarlo, tal vez quiera dar clic aquí mismo. Y vas a notar que se va a actualizar en tiempo real, ajustándose al color que quieras. Entonces si vuelvo un poco atrás usando Control Z. tan misma historia como en XD, por ejemplo y va a volver a la posición original. Ahora bien, si cambiamos a los activos, aquí tenemos la portada que es el pie de página, que es este componente aquí mismo. Y para crear un componente, es exactamente lo mismo. Simplemente selecciona el grupo en este caso, y vienes aquí mismo y creas componentes o usa la tecla Control Alt, por ejemplo y va a mostrar este componente. Y si lo arrastro y lo suelto en algún lugar por aquí, vas a notar lo que hay dentro. Aquí tenemos el sitio web y el texto del sitio web aquí tenemos el correo electrónico y los textos de correo electrónico y el contrato, y todo el punto de este mismo, igual que en Adobe XD, si has visto esa sección, es ayudarte a crear en esta primera. Y luego se va a actualizar de forma automática en éste, éste, y éste. Para que no tengas que escribir y copiar y pegar tu tipo y perder el tiempo de esa manera. En cambio, solo vas a crear un solo componente al principio, que en realidad está aquí. Y luego va a heredar estas fichas en el futuro. Aquí. Si cambiamos, se puede ver que ahora estamos en la portada. Entonces en la portada, que es ésta, se va a ubicar este componente en particular. Entonces si vuelvo a aquí, selecciono mi portada, lo que quiero hacer es deshacerme de este color de relleno porque realmente no lo necesito. Debo hacer click en él por accidente. Y este es en realidad nuestro componente principal. Y puedes ver que dando click aquí mismo, puedes agregar varianza a este componente. Y vamos a hablar de variantes en la sección de diseño de este curso. Pero solo quería notar rápidamente que si haces un cambio aquí mismo, a notar rápidamente que si haces un cambio aquí mismo, diferencia del estilo de vida de color como elección de la fuente se va a actualizar en tiempo real a través de todos estos otros marcos o tableros de arte si quieres. Y va a hacer ese cambio a lo largo de todos ellos. La misma historia como lo es en Adobe XD. Entonces aquí para el color, se puede ver que tenemos ese componente en particular para los detalles del proyecto. Aquí tenemos, si lo abro, solo este componente, que es este icono de aquí mismo. La misma historia para el precio del proyecto, misma historia para los términos y condiciones. Y para lo de mí, solo tenemos estos dos íconos, que son estos dos iconos de aquí mismo. Entonces básicamente si hago clic afuera, ya te mostraba cómo editar el texto, ya te mostraba cómo editar las fuentes, básicamente la misma historia. Simplemente haz clic aquí, déjame encontrarme a mí mismo. Y aquí puedes elegir la familia de fuentes que puedes elegir para mirar y la sensación, las distancias y así sucesivamente y así sucesivamente. Y por supuesto el nombre y para qué sirve. Entonces si vuelvo, solo quería mostrarte una cosa menos porque tenemos la imagen aquí mismo. Si cambio de assets dos capas y selecciono esta, tenemos esta imagen, así que déjame cerrar esto para que no te confunda. ¿Cómo se agrega imagen en Figma? Entonces lo que puedes hacer es arrastrar y soltar tu imagen aquí mismo. Y lo va a poblar. Entonces puedes arrastrarlo dentro y luego tienes que enmascararlo y así sucesivamente y así sucesivamente. Pero en realidad no soy un gran fan de eso. Entonces, si seleccionas tu imagen aquí, podrás ver el gris natural. Entonces en vez de suerte en XD, que me gusta mucho de Adobe XD y no me gusta de figma. Pero ahora que Adobe compró Figma, ojalá lo vayan a agregar en el futuro. Por lo tanto, no puede simplemente arrastrar y soltar en el soporte del lugar. En su lugar, puede arrastrar y soltar hasta aquí. Entonces aquí dice gris natural. Arrástralo para atreverse. Espera un poco hasta que lo reconozca. Y luego una vez que lo haga, podrás simplemente seleccionarlo, simplemente arrastrarlo y soltarlo allí, y va a reemplazarlo con tu color. Pero en este caso la obra, así que déjame separarla para que se convierta en el color de relleno. Así que arrastra y ya puedes ver que ahora se vuelve azul y solo déjalo ir. Y luego va a poblar ahí. Pero, ¿qué pasa si quieres ajustar esta imagen? Déjame esconderme para que lo veas. Simplemente puedes hacer clic en él en lugar de llenar, puedes golpear crop. Así Rellene, ajuste Recorte y azulejo. Entonces, cuando golpee Crop, voy a poder cambiarlo de tamaño, reposicionarlo, reescalarlo y ajustarlo de la manera que quiera. Y se va a ajustar perfectamente a este sitio, igual que lo es en Adobe XD. Entonces esto es solo una cosa que odio de Figma y me encanta arriba de Adobe XD. Porque en algunos casos se siente como algunos clics demasiado lejos, como es. En este caso en XD, puedes arrastrar y soltar, hacer doble clic y luego ajustar como quieras. Bueno aquí tienes que crear por separado, tienes que desbloquearlo si por ejemplo el color se adjuntó como es en este caso, entonces tienes que caer encima de él, luego ver este one-click, dos clicks, y luego tres clicks para que yo pueda recortarlo dentro en XD. Simplemente es mucho más intuitivo, pero esa es solo una de las cosas que espero que Adobe vaya a agregar a Figma en el futuro ahora que lo poseen en términos de edición de esto, realmente puedes hacer cualquier edición que quieras. La misma historia como te mostré anteriormente en Adobe XD. Y una vez más, si te estás preguntando qué son todas estas cosas y te saltas dxdy part, por favor mírala porque es muy importante sobre cómo fijar el precio de tu proyecto correctamente y cómo hacer esta propuesta de proyecto UI UX. Es solo, puedes abrir esta plantilla en Figma y ver la parte XD mientras te guiamos para entender por qué hice ciertas elecciones y por qué todos estos elementos están donde están. Entonces eso es básicamente todo para este video. Solo quería guiarte rápidamente y mostrarte las diferencias entre los archivos XD y los archivos Figma. Asegúrate de abrir esta plantilla en Figma. Lo vas a conseguir y puedes usarlo y reutilizarlo para tus propios proyectos y asegurarte de explorarlo, cómo lo creé. Y tal vez jugar con algunos escenarios. Tal vez incluya sus propios íconos, sus propios colores, sus propias elecciones tipográficas, y vea cómo puede hacerlo suyo. Porque ese es el punto aquí mismo. No solo uses esta plantilla sin rodeos para asegurarte de ajustarla y hacer algunos cambios que se ajusten a ti y que estén en tu estilo particular. 27. SECCIÓN 4 Investigación de usuarios: Las personas de usuario son una de las partes cruciales de cada proceso de diseño porque no quieres simplemente usar los datos y llamarlos usuarios. Quieres poner una cara detrás de tu persona, detrás de la persona para la que estás diseñando este sitio web o esta aplicación. Y así es como se llama UI UX persona. Quieres usar estas personas con la mayor precisión posible en base a la investigación que hiciste. Y vamos a hablar diferentes metodologías que puedes usar para tu investigación en esta sección de la clase. Pero básicamente, para eso es todo el propósito. Quieres tratarlo como una persona real y no solo algunos datos de usuario. Así que comencemos. 28. ¿Qué es un Persona de usuario: Cuando comienzas tu proyecto de diseño, tienes que saber para quién estás diseñando. De lo contrario, solo vas a diseñar para todos. Y las decisiones de diseño que vas a llevar a la mesa no van a ser valiosas. Porque más adelante en el final de la línea, cuando la gente no está comprando, cuando la gente no se inscribe, cuando la gente no se inscribe, tu cliente te va a preguntar por qué. Y es bastante claro porque no se ha definido al público objetivo. A este público objetivo se le conoce como persona de usuario. Y en lugar de apuntar a una audiencia, en este caso, solo vas a apuntar a una sola persona, a una persona imaginaria, pero a una sola persona no obstante. Pero, ¿cómo puedes saber quién es esta sola persona a la que estás apuntando para tu persona de usuario? Eso lo vas a saber haciendo tu investigación de usuarios. Al hacer tu investigación de usuarios, vas a saber quién es tu público objetivo y de ese público objetivo, como dije, vas a tomar y crear esta persona imaginaria. Vas a usar los datos reales y esto es crucial aquí. No solo uses datos imaginarios porque piensas que a tus usuarios les puede gustar cierta cosa. Intenta idear tu persona a partir de la investigación específica de usuarios que hiciste para obtener mayor cantidad de información posible. Ahora, puedes imaginar una cuota para dependiendo de tus comportamientos de usuario o tu edad de usuario o lo que sea. Pero trata de recoger la información crucial como la edad, como el estado del trabajo, por ejemplo, como el género, como la ciudad o el país en el que se encuentran tus usuarios. Intenta recopilar los datos y ser lo más específico posible para que puedas saber cómo formar tu persona de usuario la manera correcta desde el inicio de tu proyecto. Por qué crear una persona en primer lugar es bastante sencillo. Sólo para referirlo como en lugar de usuario, lo vas a referir como una persona, vas a utilizar una vez más, datos reales que recopilaste a través de la investigación de usuarios. Pero vas a adjuntar un nombre ficticio y un apellido, un puesto de trabajo ficticio a esta persona para que puedas tratarla como una persona real, aunque esta es solo una persona imaginaria, esta persona es, pero como dije y sigue repitiendo, vas a usar los datos reales, lo que va a hacer que parezca una persona real. Cuando mueves tu proyecto al desarrollo en la línea, vas a referirte a esta persona de usuario por nombre y apellido, como si realmente existiera. Y va a ser mucho más sencillo adaptarse y hacer cambios a la persona cuando la tengas sea como persona real en lugar de simplemente decir a tus usuarios o a nuestros usuarios o lo que sea. Como dije, vas a enfocar esta persona y diseñada específicamente para esta persona para que tu diseño sea funcional y que funcione para esta persona, tu base de usuarios desde el inicio de tu proyecto. Pero, ¿cómo investigas tu usuario? Eso es lo que vamos a hablar en la siguiente lección, dónde enfocarnos y qué buscar. 29. Tipos de métodos de investigación: Existen muchos métodos de investigación diferentes que puedes usar para tu proyecto. Y la forma en que puedes saber cuál usar es por el tamaño de tu proyecto. Si el proyecto es más pequeño, obviamente no van a usar los tipos que por ejemplo usa Google, o Microsoft o Apple. Pero vas a formar tu tipo de investigación de usuarios de acuerdo al tamaño de tu audiencia y según el tamaño de tu proyecto. Porque en mi opinión, siempre es mejor empezar poco a poco y ajustarse a medida que la empresa crece, que crecen los objetivos, que crece la base de usuarios. Entonces si recién estás comenzando a lo grande n, si solo te estás enfocando en esta enorme audiencia y luego trataste de destilarla un poco. Entonces necesitas metas. Necesitas el objetivo específico y cierto objetivo de tu cliente para enfocarte, en el que enfocar tu investigación. Entonces no se puede diseñar para todos, creo que lo mencionamos en las lecciones anteriores. Entonces, por lo tanto, necesitas tu persona de usuario y la misma historia para la investigación de usuarios. Hay que entender cuál es el objetivo. ¿Qué estás tratando de resolver? ¿Cuál es el objetivo de este proyecto? ¿Cuáles son algunos puntos dolorosos? Cuáles son algunas debilidades quizás en el mercado que estás tratando de explorar con este producto. Entonces, por lo tanto, tienes que entender para quién estás diseñando y tienes que entender cuáles son tus metas. Porque si los objetivos son, vendamos tantos de estos productos como sea posible. Ese no es un objetivo realista. Este no es un buen objetivo. El objetivo aquí debería ser algo así como, intentemos, no sé si te estás enfocando, digamos una industria automovilística. Intentemos vender estas llantas, que van a durar por ejemplo seis meses más que la competencia. Y van a proporcionar un agarre mucho mejor que la competencia. Y vamos a venderlo a, digamos, familias de los barrios o ciudades del centro. Entonces estas son algunas metas realistas que realmente puedes lograr en lugar de, vendamos millones de estas llantas, pero a quién, cómo vas a lograr esto. Entonces, por lo tanto, hay que establecer sus metas. Luego, después de establecer sus metas, puede elaborar estrategias en cuanto a qué tipo de investigación de usuarios se va a abordar también. Porque como dije, cuando empiezas poco a poco, no necesitas probar, digamos 200 usuarios porque solo puedes probar cinco usuarios y no desperdiciar tus recursos de investigación, no perder tu tiempo eso desperdicie su dinero allí para perder su tiempo y su dinero haciendo esta investigación innecesaria, puede enfocar sus esfuerzos de investigación en, por ejemplo cinco a diez personas. Y a partir de esos grupos, puedes destilar quién es tu público objetivo y quién es tu persona de usuario. En la siguiente lección, vamos a hablar diferentes tipos de métodos de investigación de usuarios. Y cuál puedes elegir para tu proyecto dependiendo de tus objetivos? Como dije. 30. Cuantitativo VS: Cuando empiezas con el proyecto, tienes que saber en qué enfocarte, como mencioné en las lecciones anteriores, pero también tienes que saber qué tipo de investigación de usuarios tienes que elegir. Y hay muchos diferentes por ahí en esta lección, sólo voy a nombrar algunos. Y debido a que este curso es bastante corto, puedes enfocar tus esfuerzos más adelante cuando descubres cuál es el adecuado para ti, entonces puedes destilarlo y explorar algunas rutas más posibles su investigación específica de usuarios. Pero básicamente, puedes dividir tus métodos de investigación de usuarios en cualitativos y cuantitativos. Cualitativo es en realidad algo que se puede destilar en números reales, en datos reales. Si bien cuantitativo es en realidad obtener la mayor cantidad de datos posible. Cuantitativo puede ser algo así como encuestas de usuarios o cuestionarios en línea, donde puede obtener tantas entradas de usuario diferentes como sea posible. Y luego puedes usar métodos de investigación cualitativa para enfocar ese número hacia abajo, para destilarlo para comprender realmente lo que significan todos estos números. ejemplo, si tienes miles de usuarios de todo el mundo, eso es datos cuantitativos porque tienes cantidad, entonces vas a destilar esos usuarios usando datos cualitativos para lograr en realidad el resultado que estás buscando, por ejemplo, en qué país se encuentran esos usuarios? Y luego más abajo, ¿en qué ciudad se encuentran? Si puedes, entonces puedes entender qué edad tienen y puedes entender qué tipo de dispositivo están usando. Puedes entender el tipo de navegador, por ejemplo, así que cuando tienes todos estos datos, esos datos cualitativos, y eso es básicamente puedes separarlos por cantidad versus calidad. Por lo tanto, los nombres en cuestión, también hay dos tipos más, y estos son actitudinales y conductuales. Con actitudinal, es básicamente la actitud de tus usuarios y el comportamiento es cómo se comportan. Entonces básicamente actitudinal es lo que dicen. Conductual es cómo se comportan. Y para ambos, puedes usar diferentes tipos de métodos de investigación, por ejemplo, para Attitudinal, como dije anteriormente, puedes usar cuestionarios, puedes usar foros en línea. Puedes usar algo como Typekit para crear una forma sencilla. Puedes ponerlo en el sitio web existente o puedes enviarlo por correo electrónico a los usuarios y luego podrás ver lo que dicen. Y esto puede ser método cuantitativo de investigación de usuarios porque vas a acumular la cantidad de información antes de ponerla en calidad. Y entonces el comportamiento es algo realmente diferente. Esto es para las etapas posteriores de tu investigación, por ejemplo, cuando ya tienes un prototipo hecho, entonces puedes ponerlos en la misma habitación que estás. Y luego puedes hacer las pruebas de calidad, por ejemplo, este es el método de comportamiento porque vas a ver cómo se van a comportar tus usuarios una vez que estén en la sala. No tienes que hacer esto. Se puede usar maíz, por ejemplo, que es lo que yo uso. Y voy a vincular todos estos recursos que mencioné en el PDF para esta clase. Así que asegúrate de revisarlos, compruébalos y haz clic y ve todos estos sitios web por ti mismo y explóralos un poco más. También puedes usar algo que se llama mapas de calor. Los mapas de calor requieren un cierto conjunto de dispositivos para poner en tu cabeza de jugos. Pero también hay software por ahí y los mapas de calor son básicamente lo que sugiere el nombre, dónde están mirando los usuarios es qué, dónde va a ser el mapa más calentado, dónde están buscando en la lista es donde se va a llamar el mapa por ejemplo, por lo tanto, puede saber dónde enfocar sus esfuerzos de diseño porque sus usuarios están principalmente mirando esto en lugar de esto. Para que puedas enfocar tus mensajes importantes, por ejemplo en tu página, en la parte específica de la página donde más buscan los usuarios. Entonces, si piensas que el impuesto debería estar mejor aquí, pero ninguno de tus usuarios está buscando en esa dirección. Entonces trata de ver dónde están mirando. Por ejemplo, si están mirando en esta dirección, tal vez poner el texto se atreven. Si el texto es la parte más importante de esa sección de tu página, por ejemplo, eso es conductual. Puedes rastrear cómo se comportan tus usuarios en tiempo real. Entonces, una vez más, dependiendo tu método de investigación de cuáles son tus metas, qué estás tratando de lograr con tu investigación. Asegúrate de usar primero los datos cuantitativos para que puedas acumular los datos de tus usuarios. Y luego intente usar datos cualitativos para obtener algunos números reales con los que pueda trabajar y presentarlos a sus clientes, por ejemplo, que pueda mostrarles los hallazgos de la investigación que encontró y luego puedes usar esos hallazgos de investigación más adelante en tu diseño. Además, no olvides la actitudinal. Entonces, ¿cuál es su actitud, cómo dicen que van a reaccionar? Y luego comportamental cómo reaccionan realmente cuando les presentas una prueba, con un prototipo, con el diseño con un sitio web, y en realidad les pides que lo prueben en tiempo real, ya sea al frente de usted o en línea. En el siguiente video, vamos a hablar de elegir a tus participantes. Si no tienes ningún participante y si ya tienes una audiencia existente, cuál es la diferencia y cómo elegir entre ambos. Entonces te veré ahí. 31. Elegir a tus participantes: Elegir a tus participantes es parte crucial de tu investigación de usuarios porque si eliges a los participantes equivocados, tu resultado de la investigación no va a ser válido. Por lo tanto, tu investigación es realmente inútil y desperdiciaste tu tiempo, el tiempo de todos los demás y dinero de tus clientes porque en la mayoría de los casos realmente tienes que pagar por cualquier tipo de usuario investigación que haces. Por lo tanto, es muy importante elegir a los participantes adecuados para el tipo correcto de investigación que vas a hacer y elegir la cantidad correcta de participantes para esa investigación específica. ¿Cómo elegir a los participantes? Bueno, realmente hay dos tipos diferentes que puedes elegir entre la audiencia existente. Esto es si tus clientes, cliente tiene un sitio web, tienen una app, tienen una lista de correo electrónico. Y realmente puedes llegar a estos clientes potenciales, clientes. Y realmente puedes pedirles su opinión y su tiempo. Y entonces realmente puedes realizar esta investigación de usuarios esa manera porque ya tienes esa audiencia existente. La otra forma de hacerlo es con personas inexistentes. Eso es si el negocio de tu cliente apenas está comenzando. Y entonces hay que encontrar a estos participantes para participar y ¿cómo hacerlo? Bueno, ahí una vez más, dos métodos diferentes para esto. Es con la gente en persona. Así que realmente puedes reunirte con diferentes personas cara a cara y puedes hacer tus pruebas de deuda de manera o hacerlo en línea. Y vas a elegir uno u otro en base a algo sencillo. ¿Tu cliente es local y su audiencia va a ser local? Por lo tanto, lo más probable es que elijas en persona. También puedes elegir en línea pero filtrar a tu país y a tu región y a tu ciudad, por ejemplo, pero si la audiencia de tu cliente va a ser global, por lo tanto, el mejor método es elegir a estas personas en línea. Voy a dejar algunos enlaces, el PDF a esta clase, donde puedes hacer click a través estos diversos sitios web donde puedes encontrar diferentes audiencias para hacer tu investigación y tus pruebas. Y estos sitios web obviamente te van a cobrar por ello. Entonces es muy importante si vas a hacer este freelance para cobrar esto en la factura de tu cliente. Puede separar este formulario de su servicio, por ejemplo, puede tener en cuenta todo el proceso de diseño como un cargo y luego cobrar este, el cargo separado. O puedes factorial todo descender desde el inicio. A lo mejor es la mejor manera de acercarse. Se le puede cobrar la parte UX de su proyecto por separado y luego la parte de la interfaz de usuario y quizás la parte de desarrollo más tarde por separado porque ya tiene toda esta información de su parte de UX. Y luego, cuando te mueves a la parte de la interfaz de usuario y a la creación real de tu diseño, tal vez sea mejor enfoque cobrar eso por separado. Solo te estoy diciendo esto porque muchas veces vas a conseguir una investigación de usuarios que en realidad no es tan convincente. Lo que esto significa es que quizás haces las preguntas equivocadas. Quizás no conseguiste la cantidad correcta de personas y todo este cliente investigador va a tener que pagar. A veces, si tu sesión dura, por ejemplo , 30 min, vas a tener que pagar para que la gente se siente 30 min y te escuche haciéndoles las preguntas, o para rellenar el cuestionario, o para probar tu prototipo, o para probar tu hipótesis. Entonces, sea lo que sea, vas a tener que pagarle a esta gente. Por lo que es muy importante entender desde el principio que tienes que construir tu cliente para este servicio específico. O puedes poner el precio de tu proyecto completamente por separado. Entonces el diseño de la interfaz de usuario y la entrega va a venir como un solo cargo. Y el diseño de UX va a ser lo suyo por separado, especialmente con estos métodos usuario y enfoques de usuario y cosas así. Con gente real, es mucho más fácil porque en realidad vas a sentarte con ellos. Vas a preparar tu lista de preguntas por adelantado. Vamos a hacerles estas preguntas y a veces si les estás pagando por 30 min, muchas veces vas a encontrar que tu plática va a durar para todos en 15 min para que puedas pagarles la mitad del precio y cosas así. Pero una vez más, es muy importante tener en cuenta este gasto en el gasto de tu proyecto. Porque muchas veces puede ser muy caro. Estas personas, y vas a ver en estos sitios web que voy a enlazar en el PDF, van a cobrar desde $20 por hora hasta $200 por hora, dependiendo del usuario método de investigación que vas a hacer en estos usuarios. Y dependiendo de, si tienes por ejemplo cinco usuarios son 20 usuarios. Se puede ver claramente que este gasto va a ser vasto. Pero es una historia completamente diferente con tus usuarios existentes porque puedes acercarte tus usuarios existentes y puedes ofrecerles algún tipo de descuento ya sea en características o productos existentes, o un función futura o un producto futuro que su cliente va a lanzar en el futuro. Pero ten mucho cuidado con tus usuarios existentes porque muchas veces hay un sesgo porque a la mayoría de ellos posiblemente ya les guste ese producto que están usando. Entonces van a estar bastante sesgados con las respuestas que van a dar a tu investigación. Así que asegúrate de tener en cuenta todo esto y asegúrate revisar el PDF que voy a proporcionar, como dije, para hacer clic a través de todos estos enlaces a los sitios web donde puedes encontrar estos probadores de investigación de usuarios que van a venir a su proyecto y venir a su rescate. Básicamente, donde quiera que estés en una fila, solo asegúrate de tener en cuenta los gastos para este proyecto en particular. 32. Visualización de tus datos: Cuando tienes tu información de investigación , muchas veces va a ser realmente caótico porque imaginemos que tienes diez preguntas para cada uno de tus participantes. Digamos que estás haciendo una encuesta de usuarios. Tendrás diez preguntas, tienes diez participantes diferentes. Entonces, por lo tanto, vas a obtener 100 respuestas diferentes. Entonces, ¿cómo factorizar todo esto n? Bueno, hay diferentes plantillas en línea que puedes encontrar allí completamente gratis y se utilizan para mayoría de la industria donde por ejemplo dentro de la hoja de cálculo Excel o Google Sheets, puedes incluir esta plantilla que obtengas y va a calcular tus respuestas en función lo que sea que tus usuarios vayan a decir. O si estás usando algo como métodos cuantitativos y, por ejemplo configuras una página de destino y quieres ver cuántos clics vas a obtener. Es mejor usar Google Analytics porque su cantidad de información que obtienes de Google Analytics es simplemente vasta. Entonces tienes que entender y tienes que organizarlo de alguna manera para que puedas factorizarlo luego a través nuestro digamos una semana de tiempo o dos semanas de tiempo o cantidad de tiempo dependiendo de cómo el tiempo que estás probando va a ser. Y por lo tanto, podrás factorizar toda esa información más adelante. Al final del día, cuando lo hagas, vas a formarte en tu persona de usuario. Vamos a llegar a ello en la siguiente lección, realidad vamos a darte una plantilla que puedes rellenar. Y voy a guiarte un poco más en cuanto a información diferente que puedas poner en esa plantilla. Pero es muy importante visualizar tus datos y finalmente, presentarlos a tu cliente antes de pasar al proceso de diseño. Porque muchas veces tus clientes van a tener entradas un poco diferentes que tú haces. Por lo que es muy importante mostrarles los datos y por ejemplo combatir lo que tengan que decir. Si es un poco diferente porque querían creer que era diferente, pero los datos reales se están mostrando diferentes. Por lo tanto, es muy importante mostrarles esos datos, para que visualicen esos datos para que puedan facilitar su comprensión. Entonces, por ejemplo, si estás usando XD o Figma o Photoshop, cualquier software, asegúrate de crear un poco de una plantilla donde puedas presentar esos datos usando iconos, por ejemplo, usando diferentes imágenes para que puedan entienda fácilmente los datos que vas a obtener, porque los datos que vas a obtener suelen ser solo texto. Y el texto es realmente difícil de entender para la gente. Por lo que visualizar esos datos va a ser mucho más fácil de entender para tus clientes y aprobar para que sigas adelante con el proceso de diseño. Como dije en la siguiente lección, te voy a dar una plantilla XD, cual podrás usar y visualizar tus datos una vez que realmente los obtengas y ponerlos en persona de usuario. Entonces te veré ahí. 33. Creación de tu persona: En esta lección, te voy a dar una plantilla de Adobe XD para la creación de personas de usuario. Y puedes usar esta plantilla para todo tu trabajo futuro. Y también voy a compartir contigo diferentes secciones que puedes usar para esta plantilla y las futuras plantillas que vas a crear. Entonces comencemos. Entonces aquí estoy en Adobe XD y como dije, vas a conseguir esta plantilla. Asegúrate de comprobarlo en los recursos de la clase. Y cuando haces clic aquí mismo, que dice Bibliotecas, vas a ver todos los diferentes colores que se utilizan, que obviamente puedes cambiar. Simplemente puede hacer clic con el botón derecho, golpear Editar y el color que elija. Como pueden ver, se va a actualizar. Solo asegúrate porque tenemos este gradiente. Si vas a elegir este color, por ejemplo, hacer clic derecho y copiar, ven aquí donde dice degradado, presiona editar, y luego haz clic en esta parte superior porque esa es la materia amarilla. Golpea Control o Comando V para pegarlo. Y vas a tener exactamente el mismo color que yo aquí mismo. O simplemente puedes probarlo desde aquí y puedes ver que se va a actualizar aquí mismo. Entonces eso es solo un consejo sobre el color. La misma historia va para los estilos de personajes. Esto es Poppins. Puedes usar cualquier tipo de estilos de personaje que quieras. A propósito no usé ningún íconos para mantener las cosas realmente simples y concisas. Para que puedas usar diferentes tipos de componentes. Puedes usar diferentes videos si quieres presentar tu persona de usuario como una persona real, puedes imprimirlo simplemente guardando como PDF. Puedes llamar aquí mismo, golpear Control o Comando E aquí mismo. Y luego simplemente puedes usar PDF por ejemplo puedes exportarlo, puedes exportarlo como una imagen para imprimirlo. O puede exportar como PDF o imagen y compartirlo con sus clientes en línea para facilitar su comprensión. Pero una vez más, vamos a terminar esto. Es muy importante tener tu persona de usuario es muy importante entender para dónde estás diseñando. Es muy importante compartir esta información en todo el equipo. Podrías estar trabajando en. Tanto tu cliente, stakeholders, equipo de marketing, desarrolladores, todos los demás diseñadores, todos en el equipo lo saben. Esto es, en este caso Marcus Morris, por ejemplo así esta es nuestra persona de usuario. Entonces, cómo se estructura todo se trata de sección aquí mismo. Y puedes editar todas estas secciones. Los puedes ver aquí mismo. Cuando hago clic en el panel Capas, tienes tu imagen de usuario, que es esta sobre la cual es esta sección superior. Entonces tenemos necesidades, tenemos frustraciones, redes sociales y finalmente, marcas favoritas. Entonces Acerca de la sección ¿quién es en realidad este usuario? Y de qué se tratan. Lo vas a entender una vez más a partir de tu investigación de usuarios. Entonces usemos usuarios existentes, por ejemplo si estás usando, digamos Google Analytics, vas a entender que la mayoría de tus usuarios son, digamos hombres, en este caso, son de Londres, REINO UNIDO. Entonces le vas a dar nombre, digamos marcadores. Y le encantan los paseos con esta hija y esposa de dos años que se preocupa profundamente por su entorno y qué mejor futuro para su hija. Vas a entender esto a partir de tu combustible, más investigación. Así que no solo vas a usar Google Analytics en este caso, vas a llegar a estas personas potenciales en función de tu Google Analytics. Vas a anotar la edad porque puedes ver el rango de edad aquí mismo. Y vas a conocer la ubicación aquí mismo. Entonces, por lo tanto, puedes ajustar aún más a quién estás apuntando tube. Para que puedas llegar a estas personas potenciales y entender de qué se trata. Entonces esta persona ha dicho que tiene una hija, por ejemplo, tiene esposa. Se preocupa profundamente por el medio ambiente. Le apasionan todas estas cosas. Entonces vas a poner esto en Acerca de la ocupación de la sección. Ellos van a decir lo que hacen los ingresos. Si no te dicen los ingresos, puedes averiguarlo fácilmente a partir de la investigación que puedes hacer en línea porque hay muchos investigadores diferentes por ahí para cada país del mundo. Para que puedas poner ahí mismo los ingresos de los ingresos, lo que una vez más es realmente importante. Si te dicen, si no, puedes averiguarlo tú mismo haciendo algunas investigaciones en línea a partir de los ingresos, puedes entender cuánto puede gastar realmente este usuario en mi sitio web. Entonces si este no es el usuario adecuado para mí porque sus ingresos son demasiado bajos, tal vez en apuntar al usuario equivocado porque mis productos por servicios o demasiado caros para este usuario en particular. Para que veas por qué esta investigación es realmente importante. Una vez más, puedes entender esto haciendo cualquier tipo de investigación de usuarios que acabamos de mencionar anteriormente. Puedes hacer clasificación de tarjetas, por ejemplo, puedes hacer tus cuestionarios, puedes hacer tus, digamos registros de usuario donde el usuario te dice algo sobre ellos todos los días. Y puedes hacer algo como encuestas, por ejemplo, dónde puedes averiguar quiénes son realmente estas personas, luego puedes comunicarte con ellas y hacerles estas preguntas específicas o cualquier otra pregunta que necesitas saber en base a tus metas. Una vez más, realmente importante. Una vez que lo necesites, puedes entender sus necesidades porque puedes preguntarles, ¿cuáles son sus frustraciones, cuáles son las necesidades? ¿Qué necesitan realmente de un producto como este? Y por lo tanto, en base a las respuestas que vas a obtener, puedes filtrarlas en esta sección específica. En este caso, porque elegí una marca de tarjetas apenas de la nada, Es mejor manera de buscar un auto usado en líneas. Déjame colapsar esto y acercar un poco para que puedas verlo un poco mejor. Así que mejor manera de buscar un auto usado en línea. Esta persona quiere encontrar un auto usado en línea, pero simplemente se confunde con todas estas diferentes ofertas que existen. Manera más fácil de entender el auto que mira. Entonces, la mayoría de las veces vas a ver todo tipo de información diferente en sitios web de este automóvil y solo básicamente algún tipo de código que la gente de la industria automovilística entienda. Pero las personas ajenas la industria automovilística no saben realmente lo que están viendo. Entonces necesitan una manera más fácil entender lo que están viendo. Acercamiento fácil para preguntar sobre el vehículo. Entonces en muchos casos es solo un formulario de correo electrónico. A lo mejor quiero dirigir el número de teléfono , a lo mejor quiero usar WhatsApp o messenger o y-bar o lo que sea que estés usando. Frustraciones, sitios web demasiado concurridos y confusos, que es la mayoría de los casos. Una vez más, relacionándose la sobrecarga de información que utiliza la industria. Los sitios web no son aptos para dispositivos móviles. En la mayoría de los casos, tus usuarios van a usar dispositivos móviles en estos días. Entonces, si el sitio web no es compatible con dispositivos móviles, es una gran bandera roja. Disipador de calor, una publicación sin precio. Entonces quieren transparencia. Quieren entender cualquier corriente que estén viendo. ¿Cuánto cuesta? Entonces quieren ver la transparencia. Los va a atraer más a ese anuncio y posiblemente comprarlos antes. Hábitos de redes sociales. Entonces Facebook, Twitter, Instagram, LinkedIn. ¿Por qué esto es importante para tus esfuerzos de marketing? Más tarde abajo de la línea? Y marcas favoritas, quieres ver quiénes son las marcas favoritas. Porque de estas marcas favoritas, quizás puedas elegir unas señales de estilo más tarde para tu diseño. Digamos que si ves un patrón, por ejemplo imágenes enormes y texto nítido, tal vez negro sobre blanco o degradados o imágenes de personas que realmente te gustan y las atrae de vuelta a estos sitios web. Dan, quizás puedas visitarlos y tomar señales para tu diseño o rediseño específico, lo que sea que intentes hacer. En este caso, acabo tropezar con un montón de estos logotipos diferentes, pero tus usuarios en realidad te van a dar un conjunto específico de marcas. Asegúrate de escribirlos y asegúrate de ponerlos aquí para inspirarte. Por último, tenemos algo así como una cita. Puedes elegir esta cotización y puedes preguntar a tus usuarios, tienes una cotización favorita. Si no lo hacen, entonces simplemente puedes encontrar algo en línea para poner aquí. Y por último, lo que quería mostrarles es que tenemos gradiente de imagen, voy a ocultarlo. Tenemos una imagen quiero arrastrar y soltar mi imagen, traer de vuelta el degradado. Y ahora cuando pones una cara encima de tu persona de usuario, en realidad le da esa personalidad. De hecho, te muestra a la persona que estás tratando de diseñar este sitio web para algunos. Una última cosa que quiero agregar aquí es que estas son solo las secciones para esta plantilla específica de persona de usuario. Puedes agregar un montón de diferentes secciones, una vez más, dependiendo de tus objetivos, dependiendo de tu investigación aquí. Entonces, por ejemplo, tal vez quieras agregar etiquetas específicas que mencionaron tus usuarios. A lo mejor sus sentimientos, a lo mejor se sienten tristes , a lo mejor se sienten felices. Entonces vas a conocer los colores que vas a usar. Vas a conocer el ritmo, vas a usar la topografía, el layout basado en todo lo que tus usuarios te van a contar en tu investigación. Vas a poner eso en tu personaje y vas a hacer referencia siempre de nuevo a esta persona para recordarte a ti mismo y recordarle a tu equipo. Si alguien quiere usar, digamos, un color negro y son sitios web un poco rosados, así que no va a funcionar del todo bien. Siempre vas a referirte a la plantilla de persona para entender un poco mejor y recordarte a ti mismo y a tu equipo, ¿para quién estás diseñando? Entonces aquí está esa plantilla de persona de usuario. Asegúrate de comprobarlo, descárgalo , úsalo. Asegúrate de reemplazar todas estas secciones que creas que no son necesariamente para tu investigación específica. Como dije, simplemente puedes volver a aquí y yo voy a volver aquí mismo. Si quieres, puedes hacer que esta imagen mucho más pequeña de lo que puedes, por ejemplo, posicionar esta sección para que esté aquí mismo. Puedes jugar con lo que quieras con esta plantilla que la regaló completamente gratis. Así que asegúrate de explorarlo y crear tu persona de usuario perfecta. 34. Plantilla para persona Figma: Déjame mostrarte cómo usar una plantilla de persona se ve como en Figma. Cuáles son algunas diferencias entre archivo Figma y el archivo Adobe XD y cómo puedes usarlo y reutilizarlo en tus propios proyectos. Entonces aquí estamos en Figma, y se puede ver que el diseño es exactamente el mismo. Y ese es el punto, realmente, porque no quería tener ninguna diferencia entre los archivos Figma y XD porque tú, como diseñador, podrás elegir en qué herramienta vas a trabajar. Como sigo mencionando a lo largo de este curso, Figma va a hacerse cargo porque Adobe compró Figma. Eso va a pasar en algún momento. Pero antes de que suceda, asegúrate de usar XD si te sientes cómodo con los huevos de color negro profundo yo mismo, por ejemplo me gusta mucho XD más de lo que me gusta Figma. Pero Figma va lentamente a convertirse en productos de Adobe a medida que avanza el tiempo. Así que va a tener exactamente las mismas características algunas otras herramientas de Adobe como capas, por ejemplo, como aeropuertos y así sucesivamente y así sucesivamente. Entonces solo el tiempo dirá cómo va a verse Figma en el fondo de la línea. Pero el objetivo de este ejercicio es mostrarte que si abres plantilla XD, si abres plantilla Figma, compara las dos, por eso son exactamente iguales. Realmente no hay diferencias ahí. Y las herramientas en sí van a ser sumamente familiares para que las uses. Si alguna vez has usado XD o si alguna vez has usado Figma y vas viceversa entre estas herramientas. Entonces, si comprobamos esto, puedes ver cómo se ve. Así que son básicamente grupos aquí mismo. Si cambio a activos, no tenemos ningún componente porque propósito no quería crear ningún componente. Tus marcas favoritas van a ser tus marcas favoritas y no estas marcas aquí mismo. Entonces, ¿por qué tenerlos como iconos separados son activos separados aquí. Entonces para la imagen en sí va a ser un poco diferente en cuanto a cómo vas a agregar una imagen. Porque cuando seleccionas imagen donde dice gris claro, vas a arrastrar tu imagen dentro de ahí donde dice gris claro. Simplemente arrástralo aquí y suértalo. Y va a poblar esta sección con esa imagen en particular. El gradiente de imagen se va a quedar donde está. Solo tienes que adjuntar la imagen y arrastrarla y soltarla sobre la propia imagen, como lo haces en Adobe XD, sino más bien arrastrarla hasta aquí donde dice gris claro, apóyate encima de ella y luego suelta. Y va a poblar esta sección con tu imagen. Entonces es súper simple. Así que simplemente no lo sueltes aquí, arrástralo, y luego libéralo aquí. Pero dice gris claro en términos de colores, como mencioné en el video del resumen de diseño, por ejemplo, cuando haces clic aquí mismo, vas a poder ver los colores de tu documento. O si haces clic fuera de todo, verás textiles aquí, verás estilos de color. Y aquí tenemos un gradiente, que es sólo para este degradado de imagen parte del mismo. Por supuesto, puedes cambiarlo ahí, así que si no te gusta, puedes hacer clic en él. Déjame encontrarte para que lo veas un poco mejor. Entonces aquí está el gradiente. Tienes el ícono de Configuración puedes hacer clic ahí mismo, y aquí está tu degradado. Así que aquí puedes elegirlo a lineal. Se puede jugar con diferentes colores, diferentes orientaciones. Puedes pegar tu código hexadecimal aquí. Puedes configurar tu obesidad. Entonces aquí se puede jugar con el posicionamiento. Se pueden agregar diferentes topes, se pueden agregar diferentes difuminados y así sucesivamente y así sucesivamente. Y acabo de llamarlo gradiente, pero puedes cambiarle el nombre a cualquier otra forma que quieras. Simplemente puedes hacer clic aquí mismo, renombrarlo como quieras. Descripción ¿ para quién está, para quién es? Entonces tal vez esto sea para la sección de héroes. Puedes ponerlo ahí mismo. Así que solo consigue el punto, luego puedes agregar propiedades adicionales. Simplemente tiene un gradiente lineal, pero si haces clic en este más, puedes agregar degradado lineal adicional encima de él y bajar un poco la opacidad y simplemente explorar allí en términos de las opciones de fuente y estilos de fuente. Aquí puedes ver que por ejemplo si selecciono esto aquí, tenemos los colores de acento para estos puntos y luego tenemos casi color negro para el texto. Y si seleccionamos el texto en sí, por ejemplo en las necesidades, tenemos el diseño automático, que es la misma historia una forma de estas pilas en Adobe XD. Entonces la historia, va a ser exactamente la misma como lo es en Adobe XD. Simplemente pones algunos artículos en un grupo. Aquí se les llama diseño automático. En Adobe XD, se les llama pilas. Vas a hacer el posicionamiento y la dirección entre los ítems dentro de ese grupo. Entonces, en este caso, el diseño automático va de arriba a abajo. Así dirección vertical. Y tiene necesidad de uno, necesita de tres grupos dentro de él. Una distancia de ocho píxeles aquí mismo. Entonces, si cambio esto a 20 píxeles, por ejemplo, puedes ver cómo va a quedar eso porque va a terminar espaciando este punto y este texto. Pero si selecciono las necesidades en auto, entonces toda la sección, tiene 17 justo aquí. Entonces, si aumenté eso a 40, por ejemplo, se puede ver lo que hace eso. Así que solo juega con estos ejemplos. Y si en algún momento quieres cambiar esto de vertical a horizontal, puedes simplemente dar click aquí mismo y podrás ver lo que eso hace es simplemente traerlo de vuelta y auto adaptarlo al mismo tiempo. Entonces esas son algunas cosas que quería mencionar aquí mismo. Si lo desea, puede reemplazar rápidamente estos colores, como ya se explicó. Si quieres, puedes reemplazar rápidamente las fuentes que hay dentro. Se puede reemplazar el posicionamiento en el interior, se puede cambiar el orden. Pero este video es solo para que sepas ¿cuál es la diferencia entre el archivo XD y el archivo Figma? Y como pueden ver, no hay demasiadas diferencias por ahí. Estas herramientas son básicamente exactamente las mismas. Es solo cómo trabajas con las imágenes, por ejemplo va a diferir ligeramente entre figma XD, pero al final del día es exactamente lo mismo. Vas a ver que una vez lleguemos a la sección de diseño de este curso, porque voy a pasar por el diseño en XD y luego pasar por el diseño completo en Figma, solo para mostrarte algunas diferencias en la forma en que trabajas. Si miras esas dos secciones, vas a notar que todo el proceso es casi exactamente el mismo y ese es el punto aquí mismo. No dejes que la herramienta te limite. Tienes que conocer todas estas cosas que estaban mencionando en el curso para convertirte un diseñador mucho mejor de lo que estás ahora mismo. Pero no te veas demasiado alto, limitarte. Puedo crear esto en Microsoft Paint si mis clientes me lo solicitaron, pero es mucho más fácil en Figma o XD porque estas herramientas han sido creadas en primer lugar para hacer un trabajo como este. 35. ASIGNACIÓN de la SECCIÓN 4: Tu tarea para esta sección es usar la plantilla que te proporcioné y rellenarla con tus propios datos. Puedes imaginar tu persona de usuario. Se puede poner una imagen diferente. Puedes cambiar los colores, puedes cambiar la tipografía, asegúrate de cambiar los logotipos en la última sección de la plantilla solo para hacerlo tuyo y solo la práctica de usarlo realmente. Entonces cuando realmente llegue el momento. O si ya tienes algunos clientes y quieres crear una persona de usuario para ese proyecto en particular. Tienes esa plantilla o puedes explorar otras plantillas gratuitas que puedes encontrar en línea. Pero ahora realmente tienes una idea de qué es realmente una persona de usuario y por qué estas plantillas son útiles para. 36. SECCIÓN 5 Análisis competitivo: El análisis competitivo es una parte sumamente importante del proceso de diseño porque quieres ver a quién compites? Ancho. Quieres ver quién es tu competencia. Quieres ver lo que están haciendo bien, lo que están haciendo mal para que puedas evitarlo adelantado incluso antes de comenzar con tu proceso de diseño. Quieres analizar diferentes detalles de su producto o sus páginas de las pantallas de sus aplicaciones móviles. Quieres entender qué tipo de idioma están usando en su sitio web o aplicación. Y quieres entender un poco mejor en cuanto a lo que puedes tomar y lo que puedes aprender de ellos. Entonces no cometer los mismos errores. Entonces comencemos. 37. ¿Qué es un análisis competitivo: análisis competitivo es la parte necesaria del proceso de diseño porque te ayuda a analizar y entender tu competencia, ver qué están haciendo y cómo tu producto o tu negocio toma pilas contra esa competencia. Es realmente valioso hacer un análisis de la competencia, especialmente al inicio del proceso de diseño, porque puedes entender claramente cuáles son tus objetivos, cuáles son tus objetivos y cuál es tu haciendo competencia, que es igual o diferente a lo que estás planeando hacer. Puedes hacer un análisis de la competencia independientemente del sitio web de tu cliente o tienen un sitio web o no. Pero siempre se recomienda comenzar desde el inicio del proceso de diseño con el análisis de la competencia para que puedas entender cuáles son tus objetivos principales y cuáles son tus principales objetivos en este proyecto en particular? Al hacer análisis competitivos, puedes entender las fortalezas y debilidades de tu competencia y puedes entender a dónde debes apuntar como diseñador y qué problemas debes resolver? También puedes entender si hay una brecha en el mercado y ¿tu producto o servicio puede llenar ese vacío? Al hacer este análisis competitivo, puede comprender las ventajas y desventajas de su producto. Quizás su oferta no sea lo suficientemente convincente. Sus competidores están ofreciendo algo que es más convincente a un mejor precio, por ejemplo, y la clave para nosotros los diseñadores es entender, ¿realmente necesita aplicar algún tipo de cambio de diseño a este diseño en particular solo por el bien de ello? ¿O tu competencia realmente lo requiere de ti para aplicar esos cambios? Lo que quiero decir con eso es, no solo diseñes por el bien del diseño. Diseña por el bien de ser mejor que tu competencia en una tarea en particular o en un objetivo en particular. Por último, un análisis competitivo te ayuda a resolver problemas de usabilidad porque puedes comparar a tus competidores, ver qué están haciendo. Ver es su producto lo suficientemente utilizable para sus usuarios en varios tamaños de pantalla diferentes, por ejemplo, escritorio, tableta o móvil. ¿Su producto se escala bien en todos estos tamaños, se muestra bien, pasa requerido para probar, por ejemplo para la optimización? ¿Las imágenes se cargan rápido si tienes animaciones, qué tan rápido se ejecutan las animaciones? Puedes hacer todas estas cosas desde el comienzo de tu proceso de diseño, solo para entender cómo tu producto o diseño se compara con tu competencia. En el siguiente video, vamos a hablar diferentes tipos de análisis de competidores. Entonces te veré ahí. 38. Tipos de análisis competitivo: Existen dos tipos principales de análisis competitivos. Y dependiendo de dónde se encuentre en su proceso de diseño y dónde esté su cliente en su negocio. Vas a hacer una u otra. O vas a hacer un análisis completo donde vas a tomar algunos de los principales competidores y pocos de los competidores secundarios y simplemente comparar sus soluciones completas. Ahora bien, estos pueden ser sitios web o aplicaciones móviles o productos de diseño digital, por ejemplo, y vas a comparar cada aspecto de todos esos competidores. Y entonces vas a llegar a una solución dependiendo de cuáles son los objetivos de tu proyecto en particular, también puedes hacer un análisis futuro. Y lo que esto significa es por ejemplo que puedes analizar el menú en nuestro sitio web. Se puede analizar la funcionalidad de búsqueda de un sitio web. Puedes analizar lo del desplazamiento en la aplicación. Y básicamente puede hacer una característica que se requiere de su proceso de diseño y analizar esa característica en toda su competencia y ver cómo se apilan. Al principio, tienes que delinear tus metas y definir tu producto. Tienes que ser específico sobre cuáles son los objetivos para tu producto en particular o para tu servicio particular. Y tienes que definirlo y entender cuál es tu público objetivo y ¿a quién intentas competir? A continuación, hay que compilar la lista de competidores directos e indirectos. Los competidores directos son los competidores que están en el mismo nicho exacto en el que estás o tu cliente, o los competidores indirectos son un nicho diferente a tu nicho, entonces tienes que compilar la lista de ellos y entender por ejemplo para el análisis completo, cada cosa, lo que están haciendo, como mencioné. Pero claro, esto no quiere decir que vayas a analizar, digamos 200 páginas diferentes, sino más bien páginas principales en su sitio web y en sus páginas principales de oferta. Puede entender qué ofrecen exactamente y qué puedes aprender de ellos. Para tu negocio en particular, tienes que tener metas claras, metas en mente. Entonces, por ejemplo, si tu objetivo es vender más de lo que tienes que acercarte a este análisis simplemente por esa parte. Entonces hay que entender cómo están vendiendo sus productos. Para que puedas recoger una cosa o dos sobre tu sitio web en particular y tu proceso particular. Esto no quiere decir que los vayas a copiar palabra por palabra o sección por sección. Pero simplemente entiende cómo lo hacen, por qué lo están haciendo y ¿qué puedes aprender de ellos? Porque este es el proceso de aprendizaje. Es por ello que sucede al inicio de su proceso de diseño. Una de las cosas clave aquí es identificar los factores diferenciadores entre los productos. Lo que esto significa es, por ejemplo si tu cliente y todos los competidores de tus clientes están vendiendo tarjetas , por ejemplo, ¿qué diferencia hay entre todas esas tarjetas? ¿Es el precio? ¿Es el diseño de los asientos? ¿Son los motores? Es el impacto ambiental. Qué diferencia a esos competidores de tu producto y cómo tu producto puede ser diferente o mejor en algunos casos que tu competencia. Entonces hay que entender, ¿esa meta es suficientemente buena? ¿Es eso lo suficientemente bueno para ponerlo en un sitio web como característica principal, por ejemplo, como el punto de venta clave, tienes que entender todas estas cosas a medida que te acercas al análisis de la competencia? Básicamente lo que estás ofreciendo y ¿es mejor o a menor costo que tu competencia? Y cómo puedes empaquetar eso para que el usuario lo entienda mejor y ojalá que compre más si ese es tu objetivo clave. En el siguiente video, te voy a mostrar cómo hacer un análisis completo. Y te voy a mostrar solo unos pasos que puedes dar y cómo puedes acercarte al análisis completo. Entonces te veré ahí. 39. Cómo hacer un análisis completo: En este video, te voy a mostrar cómo hacer un análisis completo de tu competencia y ¿cómo puedes abordarla? Por supuesto, no vamos a entrar en demasiados detalles, pero solo quiero que entiendas la esencia misma y los conceptos básicos de la misma cuanto a cómo puedes acercarte al hacer esto con tus clientes. Así que comencemos. Entonces aquí tenemos dos sitios web que básicamente están vendiendo el mismo producto, que es el auto en este caso en particular. Y seguí adelante y elegí mis dos sitios web locales. Entonces, si ves a un serbio aquí y allá, no le pongas atención. Yo solo intenté convertirlo al inglés. Pero el punto aquí es entender cómo me acerqué a esto cuando trabajo con mis clientes. Así que intenté comparar dos marcas con precios realmente similares y con ofertas muy similares porque digamos que mi cliente está en el mismo tramo de precios que estas dos marcas. Se posiciona en el mismo mercado que estas dos marcas. Y están ofreciendo básicamente lo mismo, Digamos palet de productos como estas dos marcas. Entonces, ¿cómo podemos posicionar nuestro sitio web frente a esta competencia solo para ver qué están haciendo y qué podemos aprender si hacemos un análisis completo de sus sitios web? Entonces comenzando aquí en la parte superior, tenemos el menú y tenemos el menú nuevamente. Pero aquí tenemos un enfoque más fácil porque no solo nos da el ícono, sino que también nos da la búsqueda. Entonces, si hago clic en Buscar, puedo buscar rápidamente un modelo y luego presionar Bien o ir a cerrar, lo cual es realmente buena interfaz de usuario. Entonces tenemos el logo aquí mismo a la derecha. Mientras que en este sitio web, solo tenemos el menú. Cuando hago clic para abrir el menú, tenemos todas estas opciones, pero no tenemos la búsqueda. Y sé a ciencia cierta que Qia ofrece muchos vehículos diferentes. Tienen vehículos nuevos, tienen vehículos usados. Así que una buena función de búsqueda es realmente necesaria aquí mismo, pero como puedes ver, realmente no existe. A continuación, tenemos esta enorme imagen de banner aquí mismo, porque este es el nuevo producto que están ofreciendo aquí en Citroen. Pero aquí en, aquí, solo tenemos este deslizador masivo de sección de héroe. Y no tenemos ninguna opción aquí mismo. No podemos hacer nada. Simplemente tenemos este deslizador masivo con estas dos flechas. Pero si me encuentro desde la pantalla solo para que puedas ver cuando te desplazas hacia abajo, información en realidad está aquí. Entonces cuando hago clic aquí mismo, puedes ver que tenemos información, tenemos botones, funcionan en hover, Todo es genial, pero si estás aquí, básicamente no sabes qué hacer. Y eso es realmente mala experiencia de usuario en mi opinión. Entonces aquí tenemos estos nuevos aviones S3, que es este vehículo porque lo dice aquí mismo. Entonces, una vez más, queda muy claro lo que están ofreciendo. Tenemos este botón con mejor efecto hover en mi opinión, entonces este hover, solo subrayamos los textos. Entonces este hover es mucho más fácil de ver, mucho más agradable, mucho más agradable a la vista. Y simplemente funciona mucho mejor que este hover para Qia. Si nos desplazamos un poco hacia abajo, entonces tenemos nuestra gama. Así que puedo hacer clic aquí mismo y esto realmente se desliza. Entonces esto es una desventaja porque si me desplazo hacia abajo, sí, puedo ver que hay paginación y puedo hacer clic en ella y esta información va. Pero si hago clic en esta diapositiva, no hay botón aquí mismo. Entonces ese es un gran inconveniente de esto porque este es uno de sus modelos más caros. Y vas a esperar que va a funcionar bien, pero no funciona en este caso. Además, aquí no hay flechas. Entonces, si hago clic aquí mismo, me va a llevar a esta página en particular que no quiero. Yo solo quiero deslizarme entre ellos, pero no hay flechas y llave o ¿ eso es mucho mejor en este caso? Entonces quizás combinación de ambos para nuestro producto, sería mucho mejor que la combinación de estos dos cuando realmente los pones juntos. En mi opinión, Entonces si te desplazas un poco más hacia abajo, hay un rango. Entonces tenemos vehículos de pasajeros y de hecho podemos colapsar esto. Y tenemos vehículos comerciales, lo cual es genial. Contamos con vehículos de negocios. Y me va a mostrar estos básicamente vehículos comerciales pero son un poco más pequeños para los negocios. Digamos que si quieres comprar a granel, puedes con estos autos, puedes con estos autos, pero apegémonos a los vehículos de pasajeros en este caso. Entonces aquí tenemos justamente estos dos. Y sé a ciencia cierta que hay mucho más. Pero, ¿cómo puedo acceder a ellos? Porque esto es C3, C3b, mientras que el C4, donde está el s5, mientras que el C1, no hay opciones para mí hacer clic a la izquierda o a la derecha, por ejemplo, mientras que en clave un sitio web, si me desplazo hacia abajo, no hay una sección como esta. Entonces, si trato de agrandar esto e intento desplazarme hacia abajo, puedes ver que no hay una sección así en los sitios web de Qia. Entonces, permítanme pegar esto aquí mismo y permítanme tratar de agrandarlo así, para que nos apegemos a lo que les mostré anteriormente. Entonces, si me desplazo un poco hacia abajo, esta es una casilla grande, grande para mí, para Citroen en este caso, porque. Te están mostrando su modelo enseguida. Si bien aquí solo vemos estos modelos los cuales se muestran aquí mismo. Y sé a ciencia cierta que este vehículo, que es Eléctrico, no está a la venta por el momento en mi mercado local en Serbia. Entonces, ¿por qué lo pondrías aquí mismo si no puedo comprarlo? Entonces, si hago clic ahí mismo, solo me va a dar todas estas excelentes críticas. Me va a dar todos estos artículos sobre este auto, pero ¿cuál es el punto cuando no puedo comprarlo? Bueno, en el sitio web de Citroen, están siendo realmente honestos en este caso. Entonces todos estos vehículos que ves en su página web, realidad puedes seguir adelante y comprar hoy, cual es lo genial en mi opinión, en este sitio web en particular a continuación que tenemos asesor. Podemos conocer más sobre este asesor. Tenemos lugares de venta, lo que una vez más es fantástico porque puedo saber dónde están mis concesionarios locales, dónde está la red de servicios, ¿cuál es el horario de atención y cosas así? Entonces tenemos algún tipo de blog aquí mismo, todas las últimas noticias tenemos el boletín, y finalmente tenemos alguna opción de foto e información de redes sociales. Por último, esto se mantiene pegajoso en todo momento. Entonces listas de precios y configuro, así puedo ir de inmediato y configurar mi vehículo nuevo o usado. Tenemos lista de precios, lo cual es fantástico porque solo quiero ver un precio de un vistazo Eso siempre es crear. Y por último, contamos con nuestros servicios y nuestra gama. Y tenemos esto que nos lleva de vuelta al principio. Mientras que si comparamos eso con el Kia, si me desplazo aquí, como dije, buscaré un representante. Por lo que no hay opción como en el sitio web de Citroen para verlos de inmediato. Tengo que dar click en la página externa. Tenemos el examen de manejo, que básicamente significa prueba de manejo. Pero Google no lo tradujo bien en este caso. Así puedo reservar una prueba de manejo, lo cual es genial. Y no puedo hacer eso aquí mismo en los precios y catálogos del sitio web de Citroen. Pero todos estos, tengo que dar click y salir afuera, lo que todavía tienes que ver con Citroen también. Al menos en su caso, se pueden ver esos, esa información en todo momento. Por último, tenemos un pie de página, que es un pie de página grande, no igual en el caso de Citron. Así que déjame moverme otra vez solo para que lo veas. Entonces aquí tenemos servicios y gama, mientras que aquí tenemos vehículos nuevos, vehículos usados para empresas, para propietarios innovación sobre KIA, estamos contratando un poco de pérdida y todas estas cosas. Entonces, dependiendo de lo que te guste y qué enfoque te guste, vas a ir por uno u otro. Pero en mi honesta opinión, justo entre estos dos, prefiero combinar información para nuestro cliente ficticio en este caso particular. Entonces usaría información del sitio web de Citron y usaría diseño del sitio web Qia en este caso, para acercarme a un poco de una combinación de toda esa información, definitivamente voy a poner una búsqueda aquí mismo en el sitio web clave. Definitivamente. Y movería esta información hacia arriba, encogería esta imagen un poco más como está en este sitio web. Porque incluso en páginas más grandes, incluso en tamaños más grandes, como en este caso en particular, se puede ver cuánto espacio vacío y espacio desperdiciado hay aquí mismo. Lo entiendo mientras están haciendo esto, pero en mi honesta opinión, realidad no tienes que hacer esto. Simplemente puedes acercarte a él como lo está haciendo Citroen. Simplemente dé a sus usuarios la opción de ir a páginas externas y aprender más sobre ciertos productos, por ejemplo, pero en este caso en particular, realmente me gustaría la combinación entre estos dos sitios web. En el siguiente video, te voy a mostrar una comparación de características. Y cómo puedes acercarte a la comparación de características usando este ejemplo que acabo de mostrarte para ambos sitios web, porque es mucho más fácil ceñirse a estos sitios web. Entonces te veré ahí. 40. Cómo hacer un análisis de características: En este video, vamos a hacer un análisis de características y vamos a usar los mismos dos ejemplos que solo te muestran en un video anterior, pero en lugar de enfocarnos en todo el sitio web y todas las páginas y la capacidad de respuesta y cosas así. Solo vamos a centrarnos en una sola característica y ver cómo estas dos marcas están haciendo esa característica única, que es la opción de configurador de automóviles en su sitio web. Así que comencemos. Aquí tenemos esos dos sitios web que te mostré anteriormente. Y como dije en este video, nos vamos a centrar en una sola característica, que es la configuración de tu auto. Es muy importante y en la mayoría de estos casos quieres que el auto cumpla con tus especificaciones exactas. Ese puede ser el color o las ruedas o el embellecedor interior o digamos, no sé, paquete de información en el interior. Entonces tal vez quieras tener esa pantalla más grande. A lo mejor quieres tener la garantía de seguridad para sea más larga o cualquier cosa que quieras, ahí es donde el configurador de autos viene muy bien. Aquí estoy en estas diferentes páginas. Y en mi opinión, Qia hace las cosas no solo mejor en este caso en particular, sino a Miles mejor. Lo que quiero decir con eso es que la citrulina es una opción mucho más simple que Kia para comprar de inmediato. Porque si quieres adquirir este sutra y modelo, es un C3 en este caso, solo vas a venir aquí mismo, selecciona tu opción y consíguela. Es así de simple. Mientras que con Qia, es todo este proceso lo que le da este tipo de aspecto más refinado. Una vez más, ambos son buenos. Si compras a granel, quizás Citroen es una opción mucho mejor para ti porque simplemente puedes hojear, analizar el precio, comparar el precio, ver con otros modelos cuál funciona mejor para ti. Entiende estos paquetes y luego simplemente ve con tu compra mientras llevas la llave. O puedes darte un gusto un poco más en todos estos detalles finos. Lo primero es lo primero, estas son las páginas, páginas dedicadas para estos dos modelos específicos. Entonces aquí podemos ver los vehículos, nuevo S3, y aquí podemos ver estos tónicos. Entonces estas son dos páginas para esos modelos particulares. Entonces lo primero es lo primero, la página de Citroen no es tan receptiva porque puedes ver puedo desplazarme por aquí y aquí tenemos cuatro pasos diferentes en el proceso de compra. primer paso es básicamente determinar qué modelo y rico paquete de opciones quieres elegir. El siguiente es reservar tu prueba de manejo. siguiente es dejar la información y la siguiente es la conformación, que es la última, debería decir, la número cuatro en este caso particular. Y tienen la opción de comparar modelos aquí mismo. Tienen la opción de filtros. Entonces puedo usar cinco puertas, puedo usar tres puertas, que es la caja de cambios, que es el tipo de combustible es diesel o gasolina, y niveles de equipo. Y básicamente puedes hacer clic en ese filtro y aplicar esos diferentes cambios. Y una vez más, traduje estos sitios web de mi mercado local al inglés. Para que ustedes puedan entender mejor aquí tenemos exterior, aquí tenemos interior y aquí tenemos objetivos pantalla, que si hago clic ahí mismo, solo voy a agrandarlo básicamente y ponerlo a pantalla completa. Y por debajo de eso tenemos estos diferentes ángulos. Entonces estas son básicamente imágenes PNG. En este caso particular, vas a notar que no tenemos la opción de elegir diferentes colores, por ejemplo, así que ahí es donde el paso número dos viene muy bien. Posteriormente. Tenemos el paquete de campo y puedes ver que las opciones están cambiando cuando hago clic ahí mismo y tenemos el paquete de brillo. Una vez más, va a cambiar, básicamente solo agregando algunos detalles aquí y allá. Lo mismo con el interior. Puedes ver cómo se ve eso en el campo atrás vas a obtener la pantalla de infoentretenimiento más grande en la parte posterior avergonzada, vas a obtener un poco más de opciones aquí y allá. Entonces cuando haces clic en el interior, tienes los 360 grados. Pero solo para el interior, puedes hacer clic y arrastrar para entender cómo se ve el interior, y eso es básicamente todo. Así que realmente simple. Una vez más, igual que la página principal en el video anterior que la comparamos. Eso es básicamente todo. tu precio de inmediato hasta aquí. Entonces Citroen es un poco más honesto, Digámoslo así. Lo que te están ofreciendo, lo que te están mostrando entonces Qia es, pero esta página es realmente súper simple. Así que una vez más, no es demasiado El gusto de todos mientras que si echamos un vistazo al ejemplo de Kias aquí mismo inmediato, imágenes más grandes, mejor diseño, más opciones ahí tratando de venderte este siete año garantía, que Citron no menciona en ninguna parte, qué tipo de garantía tienes realmente aquí. A lo mejor si hago clic Leer más, me va a dar estas opciones. Pero no puedo aplicar ninguna de estas opciones directamente a aquí. Si bien Qia, tienes estas lindas imágenes. Puedes hacer click en todas estas imágenes y tienes la información justo abajo. Se puede entender lo que son todas estas cosas. Entonces cuando haga clic aquí mismo, lleno de contenido, habitáculo. Entonces te da la respuesta de inmediato. Entonces tenemos distónico y tenemos las impresionantes líneas GT. Para que puedas ver claramente la diferencia entre los parachoques, haz ruedas. La combinación de colores aquí mismo. Y puedes lanzar una vista de 360 grados. Se puede ver cómo se ve, pero quiero lanzarlo para el modelo regular. Puedo detenerlo en cualquier momento y puedo hacer clic y arrastrar y básicamente comparar por mí mismo en cualquier ángulo dado lo que me gusta, lo que no me gusta, y tal vez esta no sea la opción para mí. Por último, tenemos la prueba de manejo para que puedas reservarla inmediatamente desde aquí. Si bien no puedes hacerlo en el sitio web de Citroen, tienes que pasar por todos estos diferentes pasos y tienes el catálogo que puedas entender las opciones para tu auto. Puedes entender que estos son solo los colores que están ofreciendo aquí, pero quizás quieras un color personalizado. A lo mejor esa es una opción en su catálogo para que puedas dar click ahí mismo. A lo mejor te están ofreciendo opciones adicionales, servicios adicionales, garantía más larga, cosas como esas. Entonces es por eso que el catálogo es realmente útil. Por último, tenemos los colores, así que estos son la combinación predeterminada, y puedes ver cuando hago clic en ellos, están cambiando en tiempo real, lo cual es fantástico porque puedes compara y ve cuáles te gustan, cuáles no te gustan. Y tal vez incluso pueda hacer clic aquí para simplemente elegir los colores que no son de dos tonos porque la mayoría de estos son dos tonos como este, por ejemplo tal vez solo soy más simple o conservador alambre . A lo mejor quiero dar click aquí mismo para entender eso y ver cómo se ve N. Finalmente, cuando hayas terminado, puedes lanzar 360 en ese color en particular para ver cómo se ve desde todas las partes, lo cual me parece fantástico. Un inconveniente es cuando lancé la vista y voy a, digamos, este ángulo y luego haga clic para aplicar este color diferente. Lo va a traer de vuelta a aquí, y no es tan avanzado, digamos, para apegarse a esa visión en particular y a esta combinación de colores en particular. Pero realmente no importa. Siempre puedes lanzarlo y siempre va a desplazarse así y puedes hacerlo tú mismo si quieres. Entonces por debajo de eso, tenemos características. Nos están mostrando qué opciones obtienes directamente de la caja, qué opciones son, digamos opciones adicionales. Has elegido este y puedes ver el color, pero no actualizo el color. Ese es un inconveniente quizás porque no elegí este. De hecho elegí este gris. Entonces, ¿por qué no se actualizaba aquí? Quizás esa sea una opción que hay que explorar un poco más. Puedes cambiar tu vehículo aquí mismo. Entonces, si no quieres este tónico, lo mejor quieres algún otro auto de aquí. Puedes hacerlo ahí mismo. Por último, puedes reservar un escritorio seco aquí mismo. Entonces este es el segundo paso que Citroen pone aquí mismo. Lo están poniendo todo en la misma página, lo cual es mucho más fácil de entender de un vistazo. Vea lo que se requiere de usted. Tengo que poner mi nombre, apellido, número de teléfono para que pueda entender de qué se trata. Y aquí tengo el precio, que tengo para Citroen aquí mismo, pero tengo el precio aquí mismo. Lo que más me gusta de Citroen es que nos muestra estas diferentes opciones de precios de inmediato hasta aquí. Así que el precio siempre está disponible para ti mientras que con Qia tienes que desplazarte todo el camino hacia abajo. A ver, esto es 15249. A lo mejor si elijo esta opción más cara, ¿va a cambiar eso? No, esto es sólo una imagen de banner. Entonces tal vez deberían actualizar que más opciones de compras para que tengan ofertas especiales, usen vehículos. Entonces todo esto es genial, pero estoy tan, ¿cómo prefiero la apertura del sitio web de Citron aquí mismo? Entonces tal vez para nuestro sitio web, sitio web imaginario, tal vez la combinación de los dos funcionaría mucho mejor. Entonces digamos que el diseño, las imágenes, las opciones de personalización y todas estas cosas quizás podrían funcionar mejor, por ejemplo, mientras que la apertura, la transparencia, la facilidad de uso tal vez deberían funcionar con el ejemplo de Citron. Pero no me toca a mí decir nada porque realmente no tenemos metas. En este video en particular, solo te estoy mostrando ejemplos. Cuando haces esto con tus clientes reales, tienes que entender sus metas y también tienes que entender sus presupuestos. Porque desarrollar una solución como Kia en este caso en particular, puede llevar mucho más tiempo, puede ser mucho más caro que una solución como esta. Y dependiendo de cuánto dinero se pueda hacer para tus clientes, a opción Citroen es mejor opción que la opción Kia, mientras que estoy diciendo es quizás con solo estas imágenes estáticas como lo está haciendo aquí mismo, puedes hacer mucho mejor que lo que Citroen está haciendo por defecto aquí mismo. Así que solo presta atención a detalles como esos. Vea lo que ofrecen y anote todas estas opciones, todas estas soluciones, lo que cada una de ellas ofrece, escríbalo para entender y comparar. Pasa por muchos de tus diferentes competidores solo para entender lo que están haciendo mejor o peor que tú y lo que puedes aprender de ellos. En el siguiente video, vamos a hablar de herramientas. ¿Qué herramientas puedes usar? Entonces te veré ahí. 41. Qué herramientas usar: En este video, vamos a hablar de herramientas que puedes usar para el análisis competitivo y ¿qué herramientas son mejores que las otras? Y finalmente, al final del día, ¿qué herramientas son mejores para ti? Así que comencemos. Entonces aquí tenemos la imagen, y estas son las imágenes que tomé en línea. Y solo quería mostrarte que realmente no importa qué herramientas estés usando. Lo que importa es que hagan un trabajo por ti, porque si estás usando por ejemplo Adobe XD en tu trabajo todo el tiempo. No tiene sentido que cambies a otras herramientas porque Adobe XD puede hacer el trabajo igual de bien, si no mejor que todas estas otras herramientas. La misma historia va si estás usando Photoshop, si estás usando Word, si estás usando productos de Google, realmente no importa. Lo que importa es que seas capaz de hacer la comparación de todos estos diferentes productos. Por lo que puedes ver en este caso particular, están usando Adobe Illustrator para hacer análisis competitivos. Si cambiamos a otro caso, están usando Google Sheets. En este caso. Aquí están usando las diapositivas de Google para una representación un poco mejor. Aquí están usando pizarras blancas, así que incluso puedes hacer eso. Se puede hacer con papeles pegajosos, puede hacerlo con pizarra blanca, puede hacerlo con trozos de papel blancos. Puedes imprimir, como puedes ver que lo han hecho aquí mismo. Puedes imprimir todas estas páginas del sitio web y puedes entender lo que están haciendo, pero también puedes tomar capturas de pantalla y llevarlas a Adobe XD. Y puedes hacer todo esto en Adobe XD. Si estás usando XD, realmente no tiene sentido que vayas a conseguir una pizarra blanca cara, marcadores caros para imprimir todos estos papeles, para conseguir una impresora si no la tienes, cuando todo eso se puede hacer en Adobe XD o en la herramienta que ya estás usando para tu trabajo. Por último, aquí tenemos la herramienta llamada extensor, y puedes hacer mayoría de las cosas que se acaban de mencionar, pero a veces incluso un poco más porque están haciendo todas estas plantillas las cuales puedes crearte al final del día, cuando empieces a trabajar con estos clientes, puedes repetir estas plantillas en cualquier tipo de herramienta que estés usando. Pero por ejemplo, en este caso, simplemente puedes plunk los enlaces a tus competidores. Puedes poner la información aquí mismo. están dando estas plantillas como te mencioné. Entonces es un poco más fácil de hacer en una herramienta como esta cuando estás en esa breve línea de tiempo, pero no tiene por qué serlo. Puedes hacerlo en cualquier tipo de herramienta o software que estés usando. Entonces como mencioné, realmente no importa lo que estés usando siempre y cuando lo estés usando correctamente, siempre y cuando lo estés usando, ¿verdad? Y siempre y cuando haga el trabajo. En el siguiente video, vamos a hablar de las cosas a tener en cuenta, errores y trampas comunes. Entonces te veré ahí. 42. Cosas que debes cuidar de ti: En este video, vamos a hablar cosas a tener en cuenta cuando estás haciendo tu análisis de la competencia y algunas de las mejores prácticas en cuanto a cómo puedes abordar este análisis de la competencia cuando lo estás haciendo? Y lo primero es, no solo hacer las cosas por el bien del diseño. Piensa en los objetivos. Piense en lo que realmente ofrece su cliente. ¿Cuál es su oferta principal? Y ¿tratan de ser diferentes a la competencia, o tratan de ganarle a la competencia en términos de precios? ¿Intentan vencer a la competencia en cuanto al volumen de ventas? ¿Cuál es el objetivo aquí mismo y cuál es el problema que realmente intentas resolver? Así que no pases meses de tu proceso de diseño tratando de poner bellas imágenes como te muestro en uno de los videos anteriores con los ejemplos de autos. No se limite a hacer eso por el simple hecho de hacerlo. Hazlo si es necesario. Si ese es el objetivo clave y si eso es tratar de resolver el problema principal que realmente enfrenta tu cliente, siguiente paso es no hacer las cosas solo por el bien de hacer las cosas. Lo que quiero decir con esto es que si quieres ser diferente, trata de ser diferente con lo que estás ofreciendo y cómo lo estás empacando trata de ser diferente con lo que estás ofreciendo y cómo lo estás solo para diferenciarte de tu competencia y presentar tu oferta de una manera mucho mejor y convincente. En lugar de tratar de redefinir la búsqueda en el aspecto de la búsqueda o posicionar el icono de Menú en lugar de, digamos del lado derecho al lado izquierdo, solo en términos para ser diferentes. No trates de hacer eso. No trates de reinventar el agua caliente porque solo estás gastando un tiempo valioso en las cosas que no importan. Y bajo cosas que no van a dar valor a tu cliente y a sus clientes. Intenta seguir algunos ejemplos y algunas reglas que ya están establecidas por la industria en la que se encuentra tu cliente, especialmente si están en un nicho en particular, trata de entender lo que Nietzsche está haciendo y por qué lo están haciendo. Y trata de hacerlo tú mismo, solo a tu manera. Una vez más, no intentes copiar lo que están haciendo porque no va a funcionar para tu oferta y tu producto. Intenta ser diferente, pero trata de ser convincente en lo que estás haciendo. La clave para llevar aquí es hacer las cosas con un propósito. No trates de hacer las cosas solo por el bien de hacer las cosas. Hacer las cosas con un propósito que va a hacer un cambio a sus clientes y a sus clientes. Clientes al final del día. 43. ASIGNACIÓN de la SECCIÓN 5: Tu tarea para esta sección es solo elegir dos marcas diferentes. Estas pueden ser las marcas que quieras, anualizadas y solo usa lo que te mostré en esto, en estas lecciones. Puedes usar tu pantalla. Se puede dividir por dos. Puedes poner estos dos sitios web uno al lado del otro, y podrías simplemente analizarlos, ir directamente desde la parte superior hasta el fondo. Comienza desde la sección de encabezado, comienza desde la sección de héroe, comienza desde la topografía, comienza desde la copia. Están usando cosas de imágenes, cómo están posicionando eso. ¿Hay alguna historia detrás de este diseño? Lo que están tratando de decir, tratar de analizar todos estos detalles de los que hablamos en esta sección y tratar de anotarlo. Puedes usar Word, puedes usar Microsoft Office, puedes usar Google Docs, lo que quieras. Incluso puedes usar pedazo de papel. Simplemente practica, solo entiende lo que estás viendo en la pantalla. No solo te concentres demasiado en el posicionamiento de los elementos y todas esas cosas visuales , asegúrate de enfocarte cosas más importantes como la estructura, como de lo que realmente están hablando estas páginas y como cómo se ve la copia real porque la copia junto con las imágenes es lo que realmente habla con los usuarios. 44. SECCIÓN 6 Flujos de usuario: flujos de usuario te muestran cómo se mueven tus usuarios a través de tus páginas, cómo se mueven a través de tu sitio web o tu aplicación móvil. Y con los flujos de usuario, solo estás tratando de entender cuál es la ruta más corta posible para que tus usuarios tomen para lograr un objetivo, también puedes ramificar y crear sort de un flujo de tareas para cada tarea diferente que quieras usar es tomar, vas a crear diferentes flujos de tareas en función de tu flujo general de usuarios. Entonces comencemos con esta sección. 45. ¿Qué son los flujos de usuario: Flujos de usuario, todos los diagramas de flujo como a veces se les llama nuestras rutas, tus usuarios estacas al usar un producto, muestran una parte completa que tu usuario toma desde el punto de entrada, derecho, todo el camino hasta el punto final cuando terminan su viaje. Hay muchas partes diferentes que sus usuarios pueden tomar dependiendo de cómo llegaron a su producto, por ejemplo, si nuestro sitio web o página de destino o algo así, tal vez llegaron a esa página de destino cuando haga clic dentro del enlace en su correo electrónico o si es página de Shoppe puede ser una página de producto o algo así, tal vez indíquelo visitando nuestra campaña que tenía en Facebook o Instagram o algo así . A lo mejor hicieron clic en un enlace dentro de un video de YouTube e instinto a esa página de la tienda. O si se trata de una app, tal vez instalen esa app usando un enlace o descarga directa desde una tienda. Y luego cuando instalaron en esa app o tal vez abren y llegaron a la pantalla de inicio. Entonces los flujos de usuario tienen un trabajo sencillo de dirigir todos esos caminos de tal manera que sea lógico para tus usuarios y súper fácil de entender y optimizarlos tal manera que tengan como pocos clics como sea posible para lograr esos objetivos, dependiendo de quién sea su cliente y lo que su producto esté tratando de hacer. Esos objetivos pueden ser comprar un producto, reservar un servicio, descargar, un freebie, suscribirse a un boletín por correo electrónico y mucho más. Entonces tu objetivo como diseñador mediante el uso de estos flujos de usuario es crear estos flujos óptimos y rutas óptimas que tus usuarios puedan tomar para realizar esas tareas de tal manera que sea lo más simple posible para ellos entender y lo más rápido posible para que ellos resuelvan y lleguen a su objetivo final. El objetivo de tus clientes es aumentar la conversión, por ejemplo, por lo que al usar estos flujos de usuario, vas a acercarte un paso más a esa conversión mejorada reducir el número de clics, por ejemplo, eso tus usuarios tienen que tomar para lograr esos objetivos. Al usar flujos de usuario, vas a determinar la cantidad total de pantallas o páginas que vas a necesitar en esta etapa del proyecto. Y eso a su vez te va a ahorrar mucho tiempo después cuando realmente llegues a las etapas de diseño de tu proyecto porque va a mejorar tu comprensión de este proyecto en general. Y por lo tanto, te va a acelerar aún más en esta etapa del proyecto, incluso puedes dejar que los desarrolladores sepan lo que está pasando. E incluso puedes mostrarles estos diagramas de flujo y vamos a hablar de eso en las últimas etapas de esta clase. Pero ese es el objetivo de este proceso, es entender que este proyecto es mucho mejor que simplemente comenzar con el diseño porque ese es un enfoque realmente equivocado. Porque realmente necesitas comenzar con estos flujos de usuario para entender cuántas pantallas, cuántas páginas vas a necesitar más adelante cuando llegues a esa parte de diseño de tu proyecto. En el siguiente video, vamos a discutir cuáles son algunos tipos diferentes de estos flujos de usuario y cómo se utilizan. Entonces te veré ahí. 46. Diferentes tipos de flujo de usuario: Hay muchos tipos diferentes de flujos de usuarios dependiendo de lo que intentes resolver en tu proyecto y de lo que intentes lograr. Pero básicamente hay tres tipos principales que se utilizan en general. Y luego de esos tres tipos principales, hay muchos tipos diferentes que vas a encontrar durante tu carrera de diseño. Y esos son flujos de tareas, flujos de cables y flujos de usuarios. Los flujos de escritorio son lo que sugiere el nombre y están mostrando cómo interactúa el usuario con una determinada tarea haciendo clic en el mismo punto de entrada para llegar al mismo punto de entrada y al mismo punto final, todos tus usuarios van a hacer el mismo viaje. Por lo tanto, este viaje va a mostrar una tarea sencilla, por ejemplo, suscribirse a nuestro boletín electrónico o comprar el producto o reservar un servicio contigo o algo así. Todos esos usuarios tienen que completar esa misma tarea. Esa tarea tiene muchos pasos diferentes en el medio dependiendo de lo compleja que sea la tarea. Y por lo tanto, estos flujos de tareas se utilizan para la deuda. No se utilizan para otras cosas complejas, por ejemplo, diferentes puntos de entrada, diferentes puntos de salida. Pero el objetivo de los flujos de tareas es enfocarse en una sola tarea y optimizar esa parte del usuario de tal manera que tenga los pasos de la lista como sea posible para completar esa tarea. Entonces tenemos flujos de alambre. Y estos flujos de trabajo son en realidad una combinación de estos flujos de tareas y wireframes básicos. Y por eso se les llama flujos de alambre. Y el objetivo de ellos es mostrar diferentes recorridos de usuario a lo largo tu producto y diferentes puntos de entrada en diferentes puntos de salida. Sin embargo, no son demasiados detalles en su interior. Solo están ahí para mostrar todas estas diferentes partes que tus usuarios pueden tomar. Entonces, el objetivo aquí no es ser demasiado detallado, sino mostrarle a tus clientes, a tus compañeros de equipo, ingresar también a los desarrolladores. Muchas partes diferentes que tus usuarios pueden tomar. Pero usar al menos algunos detalles para mostrar cómo pueden verse esas pantallas o páginas. Y luego usar flechas, por ejemplo solo para mostrar cuáles son algunas partes diferentes que pueden tomar tus usuarios. Y luego finalmente, tenemos flujos de usuario ellos mismos. En realidad son una combinación de flujos de tareas y flujos. Y los flujos de usuario en realidad muestran todos los diferentes flujos que sus usuarios pueden tomar, todos los diferentes caminos que pueden tomar. Y en realidad son una combinación de flujos de tareas y flujos de vía. Lo que quiero decir con eso es que son combinación de estos dos elementos. Y te voy a mostrar eso en etapas posteriores de esta clase. Y básicamente lo están mostrando todo. Están mostrando cada punto de entrada, están mostrando cada punto de salida. Están mostrando todas las múltiples partes que sus usuarios pueden tomar, caminos correctos e incorrectos. Están mostrando caminos alternativos y todas esas cosas. Entonces son lo más detallados posible. Entonces, dependiendo de lo que realmente necesites este proyecto y dependiendo de dónde te encuentres en las etapas de diseño de este proyecto, vas a usar uno u otro. A veces los flujos de usuarios son en realidad tu mejor apuesta porque dependiendo de cómo vaya tu proyecto, dependiendo de cómo vaya la retroalimentación, cómo va la investigación. Hay mucho más simples de cambiar, son mucho más simples de editar. Entonces, si recién estás comenzando con flujos de tareas y ahí están, agregando flujos de cable más tarde y luego usando flujos de usuario al final. Entonces quizás User Flows es la mejor manera de hacerlo. Y ¿cuándo realmente usamos estos flujos de usuario? Eso lo vamos a discutir en el siguiente video. Entonces te veré ahí. 47. ¿Cuándo se usan: Los flujos de usuarios se utilizan al principio de un proyecto justo después de que se hayan completado todas las investigaciones y las personas de usuario. Como dije anteriormente, se utilizan para determinar la cantidad de pantallas que vas a necesitar y el orden lógico de esas pantallas o en esas páginas, y cómo son realmente tus usuarios va a interactuar y moverse por todas estas diferentes páginas. Y luego puedes discutir ese orden y todos esos flujos con tus clientes y con tus desarrolladores o compañeros de equipo para lograr el mejor resultado posible en la mejor optimización posible. Antes de pasar a las etapas de diseño de este proyecto, se utilizan para crear una interfaz intuitiva y agradable para que nuestros usuarios encuentren nuestro producto o alegría de usar, y también utilizado con el fin de aumentar la tasa de conversión, como mencioné antes, ya que al usar estos flujos de usuario, vas a determinar al principio de este proceso de diseño, cuándo tus usuarios van a haga clic o compre o compre cierta cosa dentro de este proceso en lugar de posteriormente en el proceso de diseño, lo que a su vez va a hacer el proceso de diseño sea mucho más fácil de hacer, mucho más fácil de crear. Porque tú determinas todas estas cosas en tus flujos de usuario. Puedes usarlos para crear nuevos productos, o puedes usarlos con productos existentes para refinar las rutas que tus usuarios pueden tomar dentro de ese producto, y para aumentar la optimización o conversión o cualquiera que sea el objetivo de este proyecto. Entonces como dije, se pueden crear para productos nuevos o existentes. Y son muy útiles cuando estás creando componentes que luego vas a usar en tus etapas de diseño de este proyecto de diseño porque algunos componentes se utilizan principalmente , como pies de página de navegación. Y dentro de esta etapa de tu proyecto, puedes determinar con bastante facilidad qué se va a ubicar en esa navegación o pie de página. También puedes usarlos para crear algo llamado imágenes de héroe, por ejemplo, o unos deslizadores son diferentes componentes como dosis. Y luego más adelante podrás escalar o reescalar fácilmente esos componentes, ya sea si los necesitas o no más adelante en la línea de tu proyecto. Por último, hay una gran manera mostrar a tus compañeros de equipo, clientes y desarrolladores tus ideas sobre este proyecto. Todas estas diferentes partes que tus usuarios pueden tomar. Porque la validación en esta parte del proyecto es realmente importante porque como ya mencioné varias veces, va a acelerar tu diseño parte de este proyecto son mucho más porque en esta parte con estos flujos de usuarios, vas a determinar todos estos detalles importantes. Y luego más adelante, el diseño va a ser un proceso mucho más fácil y mucho más agradable de hacer. Porque es solo la exploración de la creatividad en lugar de lidiar con todas estas complejas tareas que los usuarios tienen que resolver. Ahora hablando de flujos de usuario en el siguiente video, realidad vamos a crear flujos de usuario usando Adobe XD. Entonces te veré ahí. 48. Creación de flujos de usuario: Hay muchas rutas diferentes que tus flujos de usuario pueden tomar. Hay muchas formas diferentes que puedes usar. Pero hay algunas formas básicas que todo diseñador o allí debería entender. Básicamente son el estándar en la industria desde hace décadas. Y es muy importante conocerlos, sobre todo si estás trabajando con equipos remotos. Si te unirás a una agencia más adelante en el futuro, o si ya estás trabajando en una agencia y trataste establecernos cierto idioma que todos puedan entender. Entonces en este video, te voy a mostrar una plantilla. Vas a poder descargar esta plantilla y explorarla más y luego construir sobre esta plantilla. Y más adelante en la clase, voy a mostrarte algunas plantillas más complejas que puedes obtener si quieres y luego expandirte sobre estas plantillas básicas y simplemente construirlas. Entonces aquí está esa plantilla. Se llama elementos de flujo de tareas. Y si quieres obtener esta plantilla, simplemente descárgala de los archivos de clase y luego podrás abrirla en Adobe XD. Entonces lo que tenemos aquí son todos los elementos, todos los componentes. Entonces tenemos entrada, acción, proceso, decisión y flecha negativa, y estos son tus colores. Entonces cuello de punto de entrada, cuello blanco, que es básicamente el color del texto en todas partes, y el color de los pasos. Si quieres cambiar estos colores a la marca de tu cliente, por ejemplo, simplemente puedes hacer clic derecho. Puedes copiar esto o puedes editar y luego simplemente cambiar este color como quieras. Como puedes ver, se van a actualizar en tiempo real. Puedes pegar tu código hexadecimal aquí mismo si quieres. Y luego se va a actualizar a ese color hexadecimal que has elegido. Así que déjame retroceder un poco. Entonces como dije, esta es la plantilla básica realmente básica y luego puedes construir sobre esta plantilla. Entonces, si nos acercamos un poco también, todos estos elementos diferentes, voy a mostrarte qué son todos ellos y qué hacen todos ellos. Entonces, antes que nada, tenemos entrada, y este es el círculo de entrada, o el punto de entrada suele mostrarse como un círculo, pero puedes mostrarlo de muchas maneras diferentes que quieras. Nada de esto es en realidad estandarizar. Esto es solo diseñadores de la industria utilizan todos estos elementos y plantillas durante décadas. Y luego simplemente llegar a todas estas soluciones diferentes. Entonces tenemos punto de entrada y ese también puede ser el punto de salida. Entonces, el punto de entrada, si recuerdas de los videos anteriores que mencioné, puede ser, por ejemplo, una página de destino de su sitio web o pantalla de inicio de sesión de su aplicación o cualquier otra cosa. El punto de entrada donde los usuarios realmente ingresan a tu diseño, tu producto, tu aplicación móvil, tu sitio web, sea lo que sea. Entonces después de eso, tenemos acción. Para que los usuarios puedan hacer clic, los usuarios pueden navegar, los usuarios pueden afirmar, los usuarios pueden escribir todas esas cosas diferentes son acciones. Las acciones también pueden ser si haces clic en el siguiente botón dentro de tu app, por ejemplo, para ir entre diferentes pantallas. O si haces clic en un icono determinado, por ejemplo Flecha para ir a la izquierda y a la derecha, o si deslizas para usar el círculo de acción de paginación está ahí. Y te voy a mostrar eso en apenas un segundo con esta plantilla realmente básica que encontré en línea y luego simplemente la recreé usando estos elementos. Entonces todos estos elementos los he creado para ustedes chicos y simplemente pueden descargar y usar esta plantilla. Como mencioné. A continuación, hemos procesado. Entonces, ¿qué sucede después de que completamos esta determinada acción? Entonces, ¿fuimos a una página específica? ¿Pasamos de, por ejemplo, una imagen pequeña a una imagen de ancho completo? ¿Fuimos a la siguiente diapositiva? ¿Compramos el producto? ¿Fuiste a la página de pago? Todas esas cosas realmente importan dentro del proceso. Entonces tienes que anotarlo para que entiendas como diseñador, o si estás trabajando con compañeros de equipo o con desarrolladores o con clientes, tienes que mostrarles este proceso. A continuación tenemos esta forma de diamante, que es la decisión. Entonces básicamente eso significa si el usuario se ha comprometido a decir sí o no a un determinado proceso o a una determinada acción. Lo que quiero decir con eso es cuando llegas a nuestra página de pago, por ejemplo, y quieres comprar un producto? Esto puede ser una decisión sí o no. Sí, quiero adquirir el producto. Y luego vas a la página de pago, vas a la página de pago y así sucesivamente o si no, si hago clic en No, ¿a dónde me lleva? Por eso este diamante es realmente importante y generalmente se le conoce como diamante de decisión. Te voy a mostrar cómo edito todos estos elementos a en tan solo un segundo. Pero a continuación tenemos flechas. Ahora bien, estas flechas rellenadas, como pueden ver, tenemos dos tipos. Entonces estas flechas rellenadas son básicamente flechas escalonadas. Por lo que mueven a los usuarios de un paso a otro. Y entonces estas flechas son básicamente lo que les etiqueté aquí. Flechas negativas en es cuando el usuario dice, dice que no, o cuando el usuario no puede completar una determinada tarea, por ejemplo, si la búsqueda pero no puede encontrar nada, entonces no aparece ninguna flecha y se las lleva a un paso siguiente o al paso anterior o algo así. Entonces básicamente por eso se utilizan estas flechas. Ahora bien, si deszoom solo un poquito, se puede ver este flujo. Y básicamente, me inspiré en línea e injusta la recreé usando estos elementos. Debido a que el usuario entra aquí, son recibidos con una página de bienvenida o una pantalla de bienvenida, por ejemplo , a partir de eso, pueden seleccionar una tarea. Se selecciona la tarea, y luego pueden avanzar. Si es correcto, entonces pueden pasar a la página de detalles. Si no es correcto que esto. Si hacen clic en no, por ejemplo, los va a llevar de vuelta a las tareas seleccionadas. Entonces este nodo puede ser un botón concreto cuando hacen clic en no, o pueden ser, que puede ser una X, por ejemplo, si quieren cerrar el pop-up o sea que estructure su diseño, básicamente, el punto es el mismo. Pueden o ir hacia adelante, entonces sí, o pueden ir hacia atrás. Entonces no, por eso se utilizan estos. Entonces entonces vamos a esta página de detalles por ejemplo y desde la página de detalles puedo hacer clic en la búsqueda, digamos para ir a buscar algo. Y luego cuando me comprometa a buscar, puedo buscar elementos. Si no encontré ningún artículo, va a mostrar ningún artículo encontrado. Entonces, en este caso, imaginé que era un ícono de X, así que por ejemplo, no se encontró ningún artículo. Y luego puedes cerrar para completar una búsqueda. Una vez más, To item is found, goal is completed in this particular case because that is the goal of this item. Y luego puedes hacer clic en Ordenar. Y este es tu punto de salida, así que ordenado. O si no quiero ordenar, tal vez pueda hacer clic en no o cancelar o algo así. Y me va a llevar de vuelta a esta página de detalles. Así que solo puedes ver este ejemplo realmente rápido y fácil lo útiles que son estos diagramas de flujo. Esto es básicamente un flujo de tareas que mencioné anteriormente porque solo muestra una sola tarea. En el siguiente video, vamos a discutir algunas plantillas más avanzadas y algunos pasos más avanzados que puedes tomar al crear estos flujos. Pero básicamente, esta es solo una plantilla básica muy básica. Una vez más, puedes descargarlo, usarlo en Adobe XD y explorarlo. Y realmente te animo a que construyas sobre esta plantilla, que agregues más páginas, que agregues más pantallas y así sucesivamente. Y una cosa que no te mostré es por ejemplo en esta tarea aquí mismo, quiero acercarme y digamos que en vez de seleccionar tarea, quiero hacer otra cosa. puede ver que es frase de apertura, por lo que es fuente gratuita de Google. Puedes descargarlo en fuentes de Google y fuentes de Adobe, sea lo que sea que estés usando, completamente gratis. Entonces lo que hice aquí mismo es que incluí el relleno. Lo que quiero decir con eso es que si hago clic ahí mismo, se puede ver que el relleno está habilitado en este componente. Entonces, si hago doble clic aquí mismo, puedo escribir algo, por ejemplo, hacer esto más visible y puedes ver cómo se expande la caja. Entonces básicamente en este caso, yo, si vuelvo, usé 20, como pueden ver aquí mismo, espaciado entre todos mis elementos. Pero puedes usar diez, puedes usar cinco. Incluso puedes superponer estas flechas. Entonces, si lo coloco aquí mismo, se puede ver lo bien que se superpone con este paso. Así que realmente puedes hacer lo que quieras. Además, cuando estés arrastrando estos componentes, simplemente arrástralos aquí mismo. Quiero cambiarlo, haga doble clic dentro, por ejemplo punto de entrada o lo que sea así, o punto de salida, lo que sea. Puedes colocarlo aquí, puedes hacer que esté en un centro seleccionando estos dos elementos, posicionarlo así. O simplemente puedes eliminarlo. Eso se puede hacer por todos estos otros elementos que se le muestran. Y por último, para estas flechas, debido a que estas son bastante simples, puedes hacer doble clic en su interior. Puedes mantener tu tecla Mayús posiciona esta flecha aquí. Y luego puedes hacer click en posición para dar forma aquí mismo. Si quieres hacer esta flecha más corta, por ejemplo, si no quieres que sea así de larga por cualquier razón. Y también para estas flechas, si voy a mi panel Capas y las abro hacia arriba, se puede ver, así flecha negativa, tenemos la etiqueta, que es esta etiqueta de nodo dentro de la cual también puedes cambiar si quieres, , opción negativa o nula, o esta no es una opción o lo que quieras escribir. Y entonces tenemos flechas izquierda, derecha y tenemos esta línea de flecha en el medio. Entonces, ¿qué puedes hacer realmente con estos? Puede hacer clic en la flecha izquierda, por ejemplo, mantener presionada la tecla Mayús y acercarla. Puedes hacer lo mismo con este, o si quieres, incluso puedes separarlos más. Entonces digamos así. Y luego puedes hacer click en este centro y simplemente extenderte así. Si no quieres que sea así, entonces simplemente puedes hacer clic en la flecha y puedes ajustar esto para que veas que tenemos el color del borde, que es este color. Y luego tenemos el ancho del trazo, tenemos el ancho del guión. Entonces básicamente el ancho entre todos estos diferentes guiones, puedes ajustar lo que quieras para lograr un cierto estilo que buscas. Y básicamente esto, todo el punto de esta plantilla para ayudarte en este proceso de exploración. Entonces como mencioné en el siguiente video, vamos a discutir plantillas un poco más complejas. Te voy a mostrar dónde puedes conseguir esas plantillas, que en realidad son mías, y luego qué puedes hacer realmente con ellas. Entonces te veré ahí. 49. Trabajar con diagramas de flujo en Adobe Xd: En este video, voy a mostrar algunas plantillas más complejas. Estas plantillas tardaron meses en crearse. Estas plantillas son en realidad algunas que mi equipo y yo creamos en el pasado. Y puedes conseguir estas plantillas, enlaces que van a estar en el PDF con descuentos porque estas son plantillas premium. Y te voy a mostrar cómo se crean todas ellas, ¿cómo se ven en Adobe XD? Puedes conseguirlos si quieres. Si no, puedes crear el tuyo como quieras. Entonces aquí está mi sitio web llamado Web donut.net. Una vez más, link va a estar en un PDF y esta es la primera plantilla que van a ver llamada flowy. Y se puede ver que tiene 108 pantallas, 128 elementos, y dos papeles diferentes. Entonces puedes usar estos papeles si quieres alinear tu diagrama de flujo y luego imprimirlo más tarde para mostrárselo a tus compañeros de equipo. Los clientes son desarrolladores. Entonces, si es plural, solo un poquito, puedes ver cómo se ven algunos de estos elementos y los vamos a explorar en solo un segundo dentro de Adobe XD. Pero básicamente, esa es la mesita de la misma. Hay muchos diferentes de estos elementos y estos papeles y tenemos diagramas de flujo de agua, y estos son mucho más grandes. Así que tenemos 400 componentes en total. Entonces 200 pantallas, 200 elementos y dos papeles una vez más, y esta vez tenemos versión clara y oscura, así que incluso podemos explorar eso. Y se puede ver que son adaptativos lo que está incluido. Entonces tienes tres tipos de archivos diferentes, Photoshop, Sketch y XD. Mientras que en este tenemos Photoshop y archivos de boceto. Pero debido a que XD es creado por Adobe, simplemente puede abrir un archivo de Photoshop. Va a funcionar perfectamente bien dentro de XD porque está integrado para hacerlo, componentes pixel-perfect, componentes pixel-perfect Google Fonts gratis o usar donde sea que encuentres fuentes. Y si compras, estos son en realidad videotutoriales para ambos incluidos dentro y estructura de capas organizada. Eso lo vas a ver en sólo un segundo. Estos son los papeles para imprimir tanto en tamaño US como A4 si quieres, variaciones ilimitadas y puedes ver como se ven algunos de estos elementos. Ahora bien, si minimizo esto y vuelvo a XD, Este es el impuesto para nuestro programa de radio. Tú, puedes ver lo básico que es, pero si te muestro por ejemplo fluido, puedes ver cómo se ve. Así que en realidad combino estos tres. Así que permítanme acercar esto un poco más. Entonces estos son elementos web, estos son elementos móviles, y estos son todos los elementos adicionales. Entonces si compras estos, van a venir en tres archivos, pero puedes combinarlos en un solo archivo en XD, como puedes ver aquí mismo, simplemente puedes hacer doble clic para cambiar esto. Entonces estos son elementos móviles, por ejemplo, y ¿qué puedes hacer realmente con estos elementos? Así que puedes venir fácilmente aquí mismo a tu tablero de arte y crear un tablero de arte que es 1920 por 1080 por ejemplo y digamos que quiero comenzar con una pantalla de inicio de sesión. Puedo copiarlo, puedo pegarlo aquí mismo. Y en realidad cambiemos esto a este color. Así que déjame en realidad, déjame agarrar un bonito color gris claro solo para que veas un poco mejor lo que estoy haciendo. Y entonces puedo comenzar con esta flecha por ejemplo aquí mismo. Entonces cópielo, pegarlo aquí mismo. Y tal vez pueda posicionarlo aquí mismo. Entonces, cuando mis usuarios hagan clic en este botón, ¿a dónde los va a llevar? Porque esta es una pantalla de inicio de sesión quizás, como puedes ver, tenemos diferentes categorías aquí mismo. A lo mejor vamos a saltar al comercio electrónico y tal vez voy a ir a esto, luego a esto. Y luego veamos, tal vez esta pantalla también, así. Control C saltando aquí mismo, control V para pegarlos todos adentro. Y yo voy a hacer esto. Entonces, por ejemplo, van a venir a esta pantalla aquí mismo. Y luego voy a duplicar mi flecha Control C Control o Control D, lo que quieras. Y luego por ejemplo si hacen clic en eso, colóquelo en la parte superior. Si haces clic en este producto, por ejemplo o aquí mismo, y tenemos diferentes flechas aquí mismo. Entonces, si realmente eliminé esta, puedo usar esta flecha, por ejemplo para que puedas ver por qué estas plantillas son importantes, porque en realidad puedes trabajar mucho más rápido cuando estás haciendo esto. Entonces si yo Control X, Control V, lo coloco aquí mismo. Cuando haga clic aquí, digamos que eso es un botón. Y puedes hacer lo mismo que mostré anteriormente. Entonces puedes extender estos si quieres. Y permítanme extenderme de hecho hasta aquí mismo. De hecho puedo saltar a esta pantalla. Entonces puedes ver que esto no está en línea con todos estos flujos de tareas anteriores porque se trata de un flujo de usuario mucho más complejo porque como puedes ver, tenemos dos botones. Pueden hacer clic en Cancelar, por ejemplo y en realidad podemos duplicar esta flecha. De hecho, puedo darle la vuelta, por ejemplo solo para mostrarte cómo podría verse eso. Entonces tal vez pueda posicionarlo aquí mismo. A lo mejor pueda codazar un poco a estos dos hacia arriba. Puedo posicionar esto hasta aquí. A lo mejor puedan dar click ahí mismo. Y entonces esta flecha en realidad los va a llevar a esta primera pantalla, por ejemplo, incluso puedes voltearla y luego puedes posicionar estos elementos. Te voy a mostrar eso en sólo un segundo. Entonces Control D en este. Y puedes colocarlo justo por aquí. Entonces puedes extender esto. Y tal vez esto pueda parecer un poco aburrido, pero es muy importante entender este flujo de usuarios. Y a partir de aquí por ejemplo si realmente hacen clic en este botón azul, ¿a dónde los lleva? Y en realidad tomemos esto solo para que sea un poco más sencillo navegar en su camino. Entonces voy a mover esto hasta aquí, tal vez así, y luego colocarlo un poco hacia adentro. Voy a borrar esta. Se puede ver lo rápido que es esto para crear realmente. Entonces cuando hagan clic en ese botón azul, tal vez puedan llegar a esta pantalla. Y a partir de entonces, permítanme posicionar esta flecha hasta arriba, justo aquí, colocarla aquí. Y entonces realmente puedo hacer clic aquí mismo y mover esto así y reorganizar esto solo un poquito. Quizás esta sea nuestra pantalla de confirmación o lo que sea, podemos llamarla así. Y luego, cuando hacen clic en este botón azul, en realidad pueden ir a la página de compras y en realidad pueden completar este paso. Ahora bien, lo que podemos hacer con éste es que en realidad podemos combinarlos con los flujos de tareas originales que les mostré. Por ejemplo, I. Se puede utilizar este círculo de entrada. Y entonces solo discúlpeme, porque tengo muchos de estos abiertos. Puedo posicionarlo justo aquí y puedo moverlo. Se puede ver que está vinculado porque en realidad es instancia de nuestros diferentes componentes. Entonces puedo hacer clic derecho aquí mismo y puedo hacerlo local. Y entonces lo que puedo hacer es en realidad saltar seleccionar ambos así y presionar Shift control y reducirlo un poco. También puedo reducir mis textos. Entonces tal vez diez, algo así. Entonces podemos usarlo como un punto de entrada aquí mismo. Pero también se puede hacer es utilizar estos. Entonces por ejemplo esta es nuestra casa, tal vez ese es nuestro control de punto de entrada C. Y entonces puedo, en lugar de este círculo de entrada, puedo hacer que se vea un poco interesante posicionando estos. Entonces puedo posicionar esto para que sea mi círculo de entrada N por ejemplo I. Puedo usar este color si quiero. Puedo cambiar este icono. Si quiero. Incluso puedo cambiar el color del icono. Simplemente haz clic ahí mismo, podrás hacer lo que quieras con estos. Además, lo que puedes ver aquí mismo son todas estas diferentes maquetas, que básicamente son como formas. Y luego puedes usar estas maquetas para mostrar por ejemplo, esta es una vista de una aplicación móvil. Y puedo usar esta sencilla maqueta. mejor posicionarlo aquí mismo en la parte superior, tal vez escribir algunos textos aquí mismo. Mueve todos estos elementos hacia abajo un poco, así tal vez y luego escribe aquí mismo. Esta es una mirada de cómo va a quedar la versión móvil en, por ejemplo, Android o iOS o lo que quieras. O puedo usar todas estas otras. Entonces navegador, versión portátil, versión de escritorio, lo que sea. Entonces, si se completa el paso, podemos usar este, por ejemplo, así que vamos a colocarlo aquí mismo. Y de hecho puedo colocarlo en el centro de mi flecha así. Y entonces realmente puedo usar mi color principal, por ejemplo, para decir que el paso está completado, o puedo colocarlo aquí mismo, justo por ahí, agrandarlo si quiero. Incluso puedo incluir una frontera a ella. Lo que sea que pueda usar una sombra paralela sobre él sobre este fondo. Como para que pueda posicionarme ahí dentro. Entonces, sea cual sea tu estilo para este flujo de usuario en particular, entonces puedes implementar ese estilo usando estas plantillas. Y puedes ver en cuestión de minutos, si no estás hablando como yo, obviamente puedes crear esto en un periodo de tiempo mucho más corto. Entonces esto fue fluido. Si estamos saltando aquí mismo, solo para mostrarte rápidamente los elementos web del diagrama de flujo de aire. Y se puede ver cuántos elementos diferentes tenemos aquí mismo. Y obviamente se pueden crear componentes a partir de estos elementos. Se pueden cambiar sus colores. Entonces por ejemplo I. ¿Quieres cambiar el color de este encabezado. Puedo posicionarlo aquí mismo. O si quiero cambiar el color de mi fondo por completo, puedo cambiarlo así. Y obviamente si tienes colores como ya te muestro en esta plantilla por defecto así. Entonces, si has creado tus colores, simplemente puedes aplicar ese color a ese elemento. Así vas a trabajar mucho más rápido. Pero si no lo haces, está bien. Puedes saltar aquí mismo y cambiar los colores incluso de esto. Entonces por ejemplo esto puede ser de color rojo brillante o lo que sea. Y entonces este puede ser del mismo color. Entonces puedo seleccionarlo así y puedes ver cómo se ve eso. Entonces obviamente hay muchas opciones incluidas aquí y todos estos elementos son iguales. Se puede ver que tenemos muchas flechas diferentes incluidas en su interior. De un punto de entrada a muchos puntos de salida. Puedes hacer lo que quieras. Puedes usar peligro, puedes usar la actualización. Y realmente te animo a que uses tus propios íconos. Puedes usar estos iconos izquierdo y derecho para los pasos si quieres. Pero básicamente se puede ver cómo se ven estos. Tienen muchos más detalles incluidos en su interior. En lugar de estos que te mostré anteriormente para los flujos de tareas. Entonces básicamente, tienes dos opciones. Puedes usar esta versión que es extremadamente ligera, o puedes usar esta versión, que es mucho más compleja. Pero estos no son maquetación final. Estos son solo para transmitir tus ideas mucho mejor a tus compañeros de equipo, tus clientes, a tus desarrolladores. Y el beneficio de esto es porque tienes múltiples puntos de entrada y salida, múltiples flujos. Entonces, por ejemplo, si voy al que creamos usando flowy, así así, puedo crear, como mencioné aquí mismo. Entonces tenemos estas dos flechas, por ejemplo tenemos un botón de cerrar aquí mismo, por ejemplo, donde nos lleva ese botón de cerrar nos lleva de vuelta a la pantalla de inicio de sesión o a esta pantalla. Entonces puedes imaginarte que puedes crear estos múltiples flujos, flujos complejos y lo mismo como una plantilla que te estoy dando gratis. Puedes saltar aquí mismo. Y simplemente puedes ajustar todos estos elementos y hacerlos más pequeños. Si quieres aplicar un color diferente, puedes hacerlo también. Para que puedas usar el color que quieras en estos. Y claro, porque hay muchos, muchos, muchos de estos diferentes elementos divididos en categorías de testimonios promocionales, equipo, blog, comercio electrónico, etc. Tanto para la versión móvil como para escritorio, tu flujo de trabajo va a ser mucho más rápido y tu tiempo de entrega va a ser mucho más rápido. Y una vez más, el beneficio de usar esto es que tus clientes van a entender eres mucho mejor que si simplemente estás usando algo como esto. Este es un fantástico punto de partida. Pero si las cosas necesitan ser un poco más complejas, por ejemplo, como te muestro aquí mismo. Así que tienes que crear múltiples flujos, obviamente como en cada aplicación aquí, entonces realmente recomiendo usar una plantilla premium como esta porque realmente va a mejorar tu flujo de trabajo dramáticamente. Y realmente te va a permitir trabajar mucho más rápido y mostrar tus ideas a tus compañeros de equipo. clientes son desarrolladores que van a entender porque sobre todo con los clientes, mostrarles algo así no les va a hacer realmente fáciles de entender, sino mostrarles algo como esto, por ejemplo , va a hacer que lo entiendan mucho mejor porque van a reconocer al menos algunos de estos elementos, lugar de simplemente mostrarles estas formas en blanco como círculos y cuadrados y diamantes y cosas así. Así que esa fue una mirada muy rápida a estas plantillas premium. Una vez más, si quieres conseguirlos con un descuento muy grande, los enlaces van a estar en el PDF. Simplemente puedes hacer clic en esos enlaces y simplemente ingresaste ese código de descuento que te voy a proporcionar y luego obtenerlos y usarlos en XD, puedes ver como algo así puede mejorar drásticamente su flujo de trabajo. Todavía vas a conseguir ese flujo básico de tareas de forma gratuita, claro. Y puedes descargarla y usarla. Pero si quieres mejorar tu juego, si quieres mostrar tus ideas la mejor manera posible a tus clientes, compañeros de equipo y desarrolladores, entonces el uso estas plantillas premium va a mejorar ese flujo de trabajo masivamente. Como viste, puedes cambiar cualquier cosa, puedes ajustarlos como quieras. Puedes trabajar tan rápido o tan lento como quieras. Puedes usar todo tipo de colores diferentes, todo tipo de formas e iconos diferentes y cosas así. Entonces, si quieres usar algo como esto, una vez más, te voy a dar los enlaces y descuentos en un PDF y puedes consultarlos. En el siguiente video, vamos a hablar sobre cómo puedes compartir algo como esto con tus compañeros de equipo, clientes y desarrolladores. Entonces te veré ahí. 50. Compartiendo tus flujos: Compartir tus flujos de usuario es una parte muy importante de todo el proceso porque realmente va a permitir a tus clientes, compañeros de equipo y desarrolladores entender tu proceso de pensamiento detrás de todo esto. Y realmente va a hacer que la discusión sea mucho más simple que simplemente hacer esto y luego simplemente decirles con palabras o algo así. Entonces en este video, te voy a mostrar algunas formas prácticas que puedes usar para mostrarle esto a tus clientes y desarrolladores. Entonces primero es un, creé esto para mis plantillas premium que se te muestran. Así que tanto para un fluido que está viendo aquí mismo, para diagramas de flujo de flujo de aire. Y puedes abrirlos si compras estos, que mencioné en el video anterior. Estos son estos papeles. Entonces esto es tamaño A4, esto es tamaño carta de Estados Unidos. Y puedes simplemente abrirlos mientras trabajas y alinear todos tus elementos aquí mismo, y luego simplemente imprimir todos estos. Puedes seleccionar esto. Puede presionar Control o Comando E dentro de XD, y luego puede seleccionar PDF aquí mismo. Entonces puedes presionar Exportar y va a exportar este PDF listo para imprimir. Puedes imprimirlo y luego mostrarlo a tus clientes. O si sus clientes están trabajando de forma remota y usted no está a su alcance o algo así, entonces simplemente puede compartir estos archivos PDF con sus clientes y luego pueden imprimir estos archivos PDF y luego dejar notas en esos archivos PDF. O mejor aún, puedes simplemente alinearlos aquí mismo, y luego puedes hacer clic aquí mismo para compartirlo con tus desarrolladores o clientes. Cómo funciona eso es que simplemente puedes hacer clic aquí mismo. Y va a generar este enlace público. Y luego puedes darle un nombre aquí mismo, por ejemplo, digamos elemento Webflow o flujo de cable para un sitio web o algo así. Y entonces puedes mostrarlo aquí mismo. Este es el nombre del enlace, y luego simplemente puedes copiar este enlace y luego compartirlo con tus clientes. Luego, en el navegador, pueden dejar tus comentarios aquí mismo, y luego simplemente puedes cambiar cómo se ve este Flujo de Usuario dentro de tu XD y luego regresar aquí dentro de la pestaña Compartir. Y luego simplemente actualiza ese enlace y luego regresa y comparte ese enlace una vez más con tu cliente. El nombre del cliente, el nombre del proyecto, la fecha límite, el número de páginas del sitio web de pantallas de aplicaciones es lo que realmente es importante y el número de pantallas de aplicaciones es lo que realmente es importante y lo que realmente va a determinar cuánto vas a cobrar al final de este proyecto, o cuánto tiempo va a tomar el proyecto. Porque por lo general, especialmente los diseñadores freelance están cobrando por todo el proyecto. Así que saben por ejemplo por conversación con el cliente, si el cliente tiene proyecto existente o algo así, ya saben cuánto van a cobrar reuniendo todos esos datos. Pero si no, simplemente puedes trabajar por etapas. Por lo que puede cobrar por esta exploración y pruebas de usuario, fase de investigación de usuarios. Y luego después de completar esto, vas a saber simplemente usando estos flujos de usuario, cuántas pantallas vas a diseñar más tarde, cuántas páginas web vas a diseñar. Y a partir de ese número, entonces puedes hacer una conjetura educada y cobrar esa cantidad de dinero a tus clientes. Entonces es por eso que compartir es realmente importante en esta fase del proyecto. Porque vas a saber fácilmente mediante el uso de estos flujos de usuario cuánto dinero vas a cobrar realmente a tus clientes. Ahora bien, este es uno de los métodos y luego puedes seguir esta plantilla, sobre todo si compras estos o si no, simplemente puedes usar algo como esto. Entonces digamos que tú creaste esto. Puedes darle un nombre aquí mismo, así que haz doble clic puede llamarlo como quieras. Entonces, por ejemplo, el flujo móvil, por supuesto, esto va a ser mucho más limpio cuando realmente lo estés creando. Puedes presionar Control o Comando E. Y luego en lugar de PDF, puedes seleccionar JPEG o PNG. Puedes presionar Exportar y luego puedes enviarlo a un cliente de esa manera. Además, lo que puedes hacer es conectar estas páginas. Entonces digamos que este es el puerto número uno, este es nuestro puerto número dos. Puedes ir al modo prototipo, conectarlos, y luego simplemente puedes compartir ese prototipo, como mencioné aquí mismo, luego copiar ese enlace y compartirlo con tu cliente. Ahora bien, la ventaja de usar algo como esto dentro de Adobe XD directamente es porque no estás desperdiciando papel. No estás perdiendo el tiempo. No les estás perdiendo el tiempo. Simplemente puedes compartir un enlace. Pueden acceder a ese enlace, comentar ese enlace, volver a ti con sus cambios. Puedes cambiarlo dentro de XD, actualizar el enlace, enviarlo de nuevo, y luego pueden dejar los nuevos comentarios hasta que todos estén satisfechos. Y luego de eso, vas a comenzar el proceso de diseño con instrucciones claras de tus clientes, con un claro entendimiento de ellos y desarrolladores lo que hay que hacer dentro de esto proyecto. 51. ASIGNACIÓN de la SECCIÓN 6: Tu tarea para esta sección es usar la plantilla que te proporcioné para crear tu propio flujo de usuarios. Ves lo fácil que es crear, y ves lo fácil que es de entender y por qué es realmente útil parte de tu proceso de diseño. Así que trata de hacerlo tuyo. Intenté imaginar cliente imaginario y lo que quieres que tus usuarios logren en este proyecto en particular. Así que ponte a practicar, trata de trabajarlo por tu cuenta. Puedes cambiar los colores, puedes cambiar la tipografía, puedes cambiar el orden. Puedes posicionar estas flechas como quieras. Solo trata de hacerlo tuyo y tratar de practicar y aprender mejor. 52. SECCIÓN 7 Wireframes de papel: Proporcionar marcos son parte importante del proceso de diseño porque es mucho más fácil cometer un error en una hoja de papel, desecharla y tirarla. Entonces para empezar siempre en tu software de diseño, siempre tienes que encenderlo, tienes que configurarlo, tienes que prepararlo para tu flujo de trabajo, todas estas cosas. Entonces, los wireframes de papel están ahí para acelerar este proceso y justo lo que sea que tengas alguna idea, tírala a la hoja de papel. No importa si funciona o si no funciona. Solo quieres arrojar todas tus ideas que tienes en tu cabeza hasta el pedazo de papel, elegir dos o tres de las mejores ideas y luego pasar al software de diseño de tu elección. Esto es especialmente importante si estás trabajando como parte de un equipo, porque todos en el equipo pueden saltar sobre una sola hoja de papel mucho más rápido que si estás usando una herramienta de diseño y tú quieres colaborar con tus compañeros de equipo. Así que comencemos. 53. ¿Qué son los wireframes de papel: wireframes de papel son partes realmente importantes de su proceso de diseño de UX porque son una manera barata, fácil y sencilla de obtener sus ideas de la cabeza hacia abajo en una hoja de papel. Estas ideas son solo para ti porque en esta etapa, solo vas a explorar estos posibles diseños y combinaciones de maquetación que vas a explorar. ¿Vas a usar, por ejemplo , muchas imágenes o más textos o muchos íconos o cosas así? Así que solo va a explorar un posible diseño. También puedes compartir estos wireframes con tus clientes, desarrolladores, stakeholders y compañeros de equipo, por supuesto, para obtener la entrada para ellos y entender si vas en la dirección correcta, wireframes son allí solo para formar estos diseños antes de que realmente progreses hacia software porque es mucho más rápido diseñar en una hoja de papel y simplemente dibujar estas formas regulares en una hoja de papel solo para obtener tus ideas de tu cabeza y solo para entender a dónde va a ir posiblemente este proyecto. En el siguiente video, vamos a discutir posibles combinaciones de diseño y algunos elementos principales que puedes incluir en tus wireframes de papel. Ahora bien, estos elementos son solo algunos de los elementos principales que encontré o mis 15 años en este negocio funcionan mejor en wireframes de papel. Pero claro, siempre puedes volver atrás e incluir elementos adicionales encima de estos elementos regulares. Entonces te veré ahí. 54. ¿Qué elementos incluir: Hay cuatro elementos principales que puedes incluir en tus wireframes de papel. Y estas son imágenes, texto, botones y formas o campos. Las imágenes están ahí porque realmente ayudaron a contar una historia y a guiar a tus usuarios hacia el posible objetivo final. Ahora ese objetivo final puede ser que compren un producto que estés usando o que reserven un servicio que estás ofreciendo o cualquier otro objetivo. Pero básicamente las imágenes están ahí para ayudar a contar la historia mucho más fácil porque sabes que decir imagen dice mil palabras y hablando de palabras, hay que usar texto. Ahora, cuando estás usando textos, lo estás usando junto con tus imágenes para contar mejor la historia y guiar mejor a tus usuarios a través de esa historia. Porque la combinación de textos e imágenes realmente va a impactar tu diseño sin importar lo que estés creando. Si se trata de un sitio web, si es una aplicación móvil o producto web basado en productos o algo así, solo va a ayudar a contar una mejor historia y a guiar mucho mejor a tus usuarios. Te voy a dar un ejemplo rápido. ejemplo, si estás vendiendo un zapato, digamos que una buena imagen de ese zapato se va a convertir mucho mejor porque tus usuarios van a entender todos los detalles sobre el zapato. ¿Es una zapatilla para correr? ¿Es solo un zapato para caminar normal? ¿De qué color es? Qué materiales se utilizan y cosas así. Así que todos esos elementos van a ser representados mucho mejor si tienes imágenes de alta calidad, entonces si tienes imágenes de baja calidad y solo elementos basados en campos de texto y diseño en el lado de eso imagen. Por lo que usar textos e imágenes en conjunción va a aportar mucho más valor a tus usuarios. Van a entender mucho mejor tu producto o servicio. Pero al final de la meta, tienen que hacer algo. Y ahí es donde entran los botones. Los botones son extremadamente importantes porque suelen llamarse CTA o llamada a la acción. Y eso es justo lo que son. Los usuarios tienen que realizar ciertas acciones. Tienen que comprar ese producto, por ejemplo, el zapato que acabo de mencionar, o tienen que reservar un servicio, por ejemplo, estás ofreciendo un servicio freelance o un servicio de diseño o cualquier otra cosa, tienen para reservarlo al final de su viaje. Journey es compatible con imágenes y textos. Y luego al final hay un botón, pero tienen que rellenar alguna información en este diseño tuyo. Ahí es donde entran las formas y los campos. Ahora, foros o pueden ser muchos diseños diferentes, combinaciones, y se pueden usar para variedad de cosas diferentes. Pero generalmente están ahí para recopilar información del usuario, por ejemplo, direcciones de correo electrónico, información de tarjetas de crédito, creación de cuentas de usuario y cosas así. Así que los foros y los campos son partes realmente importantes de sus wireframes de papel. Ahora, hay muchos elementos diferentes que puedes incluir en tus wireframes de papel, por ejemplo, logotipos, avatares, logotipos de socios. Puedes incluir las migas de pan, paginación, diferentes flechas, consejos de herramientas y cosas así. Pero todos estos elementos, voy a provenir de estas cuatro categorías principales que encontré a lo largo de los años funcionan mejor en el viaje del wireframing de papel. Ahora hay muchos estilos diferentes de wireframes de papel por ahí. Y dependiendo de cuánto tiempo tengas y qué tan grande sea el presupuesto para este proyecto, vas a explorar estos posibles estilos. Y en el siguiente video vamos a explorar estos estilos y te voy a mostrar algunos de los principales estilos utilizados en el wireframing de papel, pero también algunos de los estilos que puedes dibujar encima de estos para mejorar el aspecto general y la calidad de sus wireframes de papel. 55. Estilos de Wireframe: Hay muchos estilos diferentes de estructura de alambre por ahí, desde cajas simples que puedes dibujar en una hoja de papel solo para poner tus ideas de la cabeza hacia abajo en ese pedazo de papel, y solo para comenzar a formar esta posible disposición. Pero una vez más, están dependiendo de qué tan grande sea este proyecto, cuánto tiempo tengas en él y qué tan grande sea el presupuesto del cliente. Al final del día, vas a formar diferentes estilos y explorar diferentes combinaciones de diseño. Entonces en este video, voy a mostrar estos estilos y lo que se puede hacer con wireframes de papel. Entonces, si volvemos a Google y hacemos solo una búsqueda rápida en Google wireframes en papel si vas a las imágenes. Y por supuesto, hay muchos sitios web diferentes que puedes explorar para esto. Pero solo podemos explorar las imágenes de Google porque es la más rápida. Puedes ver aquí mismo para el sitio web, para la aplicación, para el prototipo de diseño de Android para móviles , lo que sea. Puedes explorar, todos estos y básicamente un diseño como este. Déjame cambiarme a aquí para que solo puedas ver mejor este diseño de imagen, así, es el diseño más común porque estas cajas representan imágenes que representan grandes elementos en tus wireframes de papel. Y estos garabatos abajo representan el texto. Ahora puedes mostrar este texto de muchas maneras diferentes. Se pueden utilizar líneas más gruesas. Se pueden enfatizar las líneas con color. Y vamos a hablar de eso en algunos de los futuros videos de esta clase. Pero ahora esto es solo un estilo sencillo y regular que la mayoría de los diseñadores usan. Vas a usar este estilo si no tienes demasiado tiempo en este proyecto, si el presupuesto para el cliente es limitado y cosas así. Pero básicamente este es el estilo principal deuda mayoría de diseñadores por ahí me gusta usar si mostré este estilo, por ejemplo puedes ver este dibujo aquí mismo. Ahora este es el siguiente estilo y puedes, por supuesto, ver el texto, que es el texto real en este caso, que nuevamente requiere mucho más de tu tiempo. Así que piensa en todas esas cosas la próxima vez cuando estés dibujando estos wireframes de papel. Porque si no tienes demasiado tiempo en tus proyectos, si el cliente no te está pagando demasiado dinero, entonces no inviertas demasiado de tu tiempo en wireframes de papel. Una vez más, el objetivo de los wireframes de papel es explorar ideas rápidas y ponerlas de la cabeza hacia abajo en una hoja de papel. Ese es el objetivo de los wireframes de papel al final del día. Así que no inviertas demasiado tiempo. Puedes ver lo desordenados que son estos, por ejemplo, estos son solo algunos garabatos y puedes ver combinación de estos elementos lisos, por ejemplo , estas cajas, estos garabatos para los textos pero también textos regulares como correo electrónico, contraseña y cosas así. Puedes ver el botón Editar aquí mismo. Se puede ver este tipo de dibujo permitirse a una persona para el perfil. Puedes ver esta marca de verificación para el guardado. Así que una vez más, puedes combinar todos estos elementos dependiendo del tiempo que tengas en este proyecto. Pero si cierro esto muy rápido y exploro diferentes diseños, puedes ver este que está bien organizado. Y me gusta hacer personalmente este estilo. Y eso lo vas a ver en algunos de los videos posteriores de esta clase. Me gusta dejarme espacio en el lado derecho o en el papel porque ahí es donde puedo dibujar mis ideas. Puedo dibujar posibles pautas de mis compañeros de equipo para los clientes y cosas así. ejemplo, si se te ocurre una idea, tienes ese espacio vacío a tu derecha o izquierda, dependiendo de si escribes con tu mano derecha o mano izquierda, realmente no importa. El punto aquí es dejar un espacio para las notas, por ejemplo, te puedes recordar más tarde, ¿Qué estabas pensando en el momento de la creación de este wireframe de papel? Así que la próxima vez que vuelvas a ello, puedes recordar, bien, eso es lo que estaba pensando en este momento. Así que tener un espacio como este es muy importante y realmente te va a ayudar más adelante la línea tiene para el diseño una vez más, puedes ver el texto aquí mismo, pero también puedes ver estas cajas lisas. Pero si hago clic en éste, se puede ver lo detallado que es. Así que aquí tenemos todas estas increíbles ilustraciones, por ejemplo, para que puedas explorar diseños como DOS. Y aquí tenemos marcadores. Tenemos todos estos diferentes elementos que puedes usar. Si hago clic en este , puedes ver esta persona está usando marcadores. Están usando todos estos wireframes. Y si hago clic en éste, se puede ver que esta persona, este diseñador está llenando el espacio de estos. Entonces, por ejemplo, este es el color principal de la aplicación y se puede ver que usó descoloridos en todos los botones del corazón. Así que realmente puedes optar por este estilo si quieres enfatizar el color del logotipo de la marca de tu cliente o algo así. Entonces si me desplazo un poco más hacia abajo, se puede ver este enfoque, que es el enfoque que se utiliza en oficinas de todo el mundo. Entonces, por ejemplo, a los diseñadores realmente les gusta usar este enfoque porque pueden mostrarlo fácilmente al equipo. Pueden presentarlo al cliente o a las partes interesadas porque pueden dibujarlo en una hoja de papel, cortarlo con tijeras y luego simplemente pegarlo a la pared, por ejemplo, y solo presentar estos wireframes para que sus clientes comprendan el flujo general de la aplicación o el sitio web, por ejemplo, si el usuario hace clic en este libro Botón de sesión, ¿a dónde va a ir? Para que puedas usar plantillas de estos dispositivos móviles o dispositivos de sitios web, lo que sea. Y luego simplemente puede guiar sus usuarios a través de su estructura de alambre de papel. Y si me desplazo un poco más hacia abajo, solo estoy tratando de encontrar por ejemplo este estilo, se puede ver mucho más detallado, se utilizan bolígrafos muy diferentes en diferentes diseños. ¿Eres, como puedes ver, el menú emergente, que se usa aquí mismo? Así podrás usar todos estos elementos que te van a ayudar a ti, a tus usuarios, a tus compañeros de equipo a entender cómo estos wireframes se van a convertir en un diseño real más adelante una vez que entres en tu software de elección. Mi software preferido es Adobe XD, lo cual es increíble, pero sigue siendo como usar wireframes de papel en todos mis proyectos porque como sigo mencionando en este video y en esta clase, es solo me da la posibilidad de poner todas estas ideas rápidas en una hoja de papel y solo comunicarlas con mis clientes. Una vez más, se puede ver en este ejemplo, se puede ver en este ejemplo, se puede detallar con wireframes de papel o se puede ensuciar con wireframes de papel. Entonces realmente depende de ti, del presupuesto del cliente y del tiempo que tengas en este proyecto. Porque como sigo mencionando en esta clase, no vas a pasar demasiado tiempo dibujando estas ilustraciones detalladas, estos iconos de detalles. Si el cliente no te está pagando dinero suficiente para hacer eso en este proyecto en particular. Así que solo ten esas cosas en mente. Y en cuanto al estilo, puedes ver si no eres muy puedes ver si no eres muy bueno dibujando como yo, no lo soy, no soy muy bueno dibujando, pero sigo usando estos wireframes de papel para más de un década ahora, y nunca tuve un problema con eso. Así que siempre puedes usar una regla, por ejemplo, solo para mantener tus líneas rectas. O puedes usar diferentes papeles punteados que van a mencionar más adelante en esta clase. Pero el punto aquí es conseguir esas ideas de tu cabeza en la hoja de papel porque no hay un solo software ahí fuera que sea más rápido que tu cerebro y tu mano. Así que solo ten esas cosas en mente. En el siguiente video, vamos a discutir lo que vas a necesitar de equipos para dibujar estos wireframes de papel porque hay algunas opciones de equipo realmente básicas por ahí y hay algunas opciones de equipo realmente avanzadas están ahí. Entonces sólo voy a compartirlos contigo. Y una vez más, dependiendo del presupuesto del cliente y tiempo que realmente tengas en este proyecto, vas a usar uno u otro. Entonces te veré ahí. 56. Equipo que necesitas: Cuando se trata de equipos, hay muchas opciones diferentes por ahí. Se puede pasar de un equipo realmente estándar. Y realmente recomiendo, especialmente si recién estás comenzando, comenzar con equipos estándar, especialmente si nunca antes has usado wireframes de papel. Y luego sube por la escalera y luego simplemente compra todas estas opciones más caras medida que subes de nivel. Entonces en este video, solo voy a mostrarte algunos de los equipos que estoy usando, un novelista usando a lo largo de los años. Y sólo para mostrarte lo que es todo. Entonces aquí está todo el equipo que actualmente tengo y actualmente poseo y lo usé en todos mis diferentes proyectos. Entonces esto de aquí mismo es solo un pedazo de papel blanco normal. Este es el papel de imprenta porque estoy ubicado en Europa. Estoy usando un trozo de papel A4 si estás en nosotros que su tamaño carta para ti. Pero básicamente, utilizo este papel A4 porque mi impresora lo soporta. Y si recuerdas, acabo de mencionar eso cuando quiero compartir estos wireframes con mis clientes, con mis compañeros de equipo y cosas así. Realmente me resulta más fácil hacerlo con escáner. Así que simplemente puedo tomar este pedazo de papel A4, escanearlo, y luego enviarlo a todas esas personas en cuestión. A continuación, lo que tenemos es sólo este lápiz viejo y llano. Y puedes usar este lápiz para dibujar lo que quieras en este trozo de papel. Y justo ahí mismo equipamiento básico. A continuación, tengo este bolígrafo y puedes usar cualquier bolígrafo que quieras, pero realmente te recomiendo que tengas bolígrafo negro o azul. No importa lo que estés usando, siempre vas a necesitar usar algunos de esos. Y luego también tengo esta banda, que es completamente negra pero un poco más oscura, como puedes ver aquí mismo. Entonces esta banda realmente me ayuda a anunciar algunos de los detalles como sombras, por ejemplo, y cosas así. O si solo quiero rellenarlo con color. A continuación, tengo un gobernante y en la mayoría de mis wireframes, no uso gobernantes en absoluto porque descubrí que tus gobernantes simplemente me están ralentizando mucho. Pero si quieres, siempre puedes usar una regla solo para ayudarte a comenzar, solo para sentar alguna base. Porque si estás dibujando con mano libre, obviamente, tus diseños van a verse así, por ejemplo, si recuerdas del ejemplo anterior para las imágenes que te mostré. Pero si quieres, puedes usar regla solo para llegar a esas líneas perfectas como esta, pero puedes ver cuánto más lento es esto comparado con esto. Entonces, una vez más, siempre vamos a volver a esa línea de tiempo y a la línea de tiempo del proyecto. Entonces depende realmente de cuánto tiempo tengas en tu proyecto vas a usar uno u otro. A continuación tenemos todos estos marcadores, por lo que puedes usar diferentes marcadores. Y este es solo un tipo que obtuve de mi tienda local. Entonces realmente no importa qué tipo de creador sea este. Esto es un pastel Firebird, a ver. Se trata de fibra Pelican, Christelle, esta es alguna marca desconocida, neón o lo que sea. Entonces realmente no importa porque una vez más, estos marcadores están ahí solo para resaltar el color que está usando tu cliente. Digamos que tenemos un botón, y vamos a crear un botón aquí mismo. Y digamos que quiero resaltar este botón usando este color para que veas lo rápido que es esto. Y si recuerdas de ese ejemplo, te muestro en línea, simplemente puedes resaltar este color y simplemente integrarlo a tu proyecto. Si este es el color del cliente, entonces una vez que empiezas a ganar, algunos clientes quieren empezar a ganar algo de impulso. Una vez que empiezas a ganar no mucho dinero, sino una vez que empiezas a ganar suficiente dinero de estos proyectos para comenzar a invertir nuevo en ella misma y en tu equipo. De verdad te recomiendo que consigas estos. Ahora bien, estos son lo que se llama papel cuadriculado de puntos. Y este trabajo viene en muchas culturas diferentes, muchos tamaños diferentes una vez más parecen este papel. Pero la diferencia son todos estos puntos, estos puntos están ahí para ayudarte a no usar una regla. Ahora, una vez más, puedes usar una regla. Y en los siguientes videos, vas a ver una vez que realmente empecemos a dibujar estos wireframes, en realidad voy a usar la regla porque la consistencia, por el layout combinaciones y cosas así. Porque estoy acostumbrado a ello en este punto. En la mayoría de mis casos, no estoy usando el rodillo porque esas ideas son básicamente solo para mí. Estos papeles, si empiezas a usarlos o requieres de diferentes tipos de equipo, porque si muestro, si tomo este marcador por ejemplo y empiezo a dibujar en él, no puedes ver este marcador muy bien porque este papel de rejilla de puntos es mucho más grueso que este papel. Entonces estos marcadores realmente no funcionan aquí mismo. Entonces necesitas equipo especializado como estos son. Ahora bien, estos son bolígrafos Jelly Roll y esta es de Sakura. Esto es, no sé, alguna otra marca, realmente no importa. Entonces la marca realmente no importa en este caso, lo que sí importa es cómo funcionan estas. Entonces, básicamente, estos bolígrafos, a diferencia de estos lápices, por ejemplo o bolígrafos que normalmente vas a usar, no contienen el gel en su interior. Este gel es lo que ayuda a que este wireframe se destaque. Entonces puedes ver porque tengo todos estos puntos, es mucho más rápido para mí dibujar sin gobernante. Y todavía voy a tener algo de consistencia y un diseño bonito. Y se puede ver claramente la diferencia entre esto y esto. Cuánto mejor se ve esto, porque está sobre un trozo de papel negro. Estoy usando estos bolígrafos blancos que esto porque está en un trozo de papel blanco y los estoy usando, así que destaca mucho mejor. Se ve mucho más pulida y profesional. Y realmente va a involucrar mucho mejor a tus clientes. Encontré a lo largo de los años porque a los clientes les gusta mucho ver en qué estás trabajando porque te están pagando por tu trabajo al final del día, obviamente. Entonces realmente hay que mostrarles hacia dónde va su dinero. Entonces básicamente eso es todo para el equipo. Se puede empezar poco a poco. Todo el mundo puede permitirse uno de estos y uno de estos. Para que puedas empezar poco a poco, puedes empezar despacio. Y luego una vez que actualices, una vez que empieces a ganar dinero, entonces puedes invertir en diferentes marcadores. Una vez más, no tienen que ser esta marca de fantasía ni las tonalidades de los marcadores o ninguna de esas cosas. Porque no eres ilustrador, no estás dibujando, solo estás dibujando estas ideas en una hoja de papel para presentarlas a tus clientes. En el siguiente video, vamos a comenzar con el boceto. Te voy a mostrar algunas ideas y voy a mostrarte cómo puedes trabajar con estos wireframes de papel y cómo puedes realmente dar vuelta a tus ideas que tienes en tu cabeza. Póngalos en una hoja de papel y luego conviértelos en diseño, que luego podrás usar en tu software favorito. Entonces te veré ahí. 57. Dibujo sobre papel plano: En este video, vamos a dibujar en una hoja de papel normal, y voy a mostrar cómo puedes darle vuelta a nuestro layout que tienes en la cabeza y ponerlo en este pedazo de papel. Porque mencioné en uno de mis videos anteriores, nuestro ejemplo de zapato, dent, cuando estás usando imágenes junto con texto, es realmente importante para darles contexto. Y es muy importante tener imágenes de alta calidad que van a ayudar a contar una mejor historia para tus usuarios. Entonces en este ejemplo vamos a dibujar, vamos a usar ese ejemplo de zapato que mencioné en el video anterior. Así que comencemos. Lo que tengo aquí mismo, como pueden ver, es solo un trozo de papel impreso normal, como te mostré anteriormente. Tengo dos marcadores que voy a usar solo para indicar botones, por ejemplo y áreas en las que se puede hacer clic. Tengo mi regla y tengo un lápiz y tengo este bolígrafo. Voy a usar el lápiz para las sombras, por ejemplo, solo para anunciar algunas de estas sombras. Entonces, sin más preámbulos, comencemos. Lo que realmente me gusta hacer en todos mis wireframes es, como mencioné en el video anterior, donde exploramos estilos wireframing, me gusta mucho dejar esta parte de mi papel en blanco porque realmente me ayuda a anotar algunas notas que tengo las cuales van a ser de mucha ayuda para reunirme más tarde si recuerdo algo o a mis compañeros de equipo o a mis clientes si quiero guiarlos en cierta dirección. Entonces, ¿qué vamos a hacer? Primero es que vamos a dibujar un bosquejo rápido. Entonces como dije, puedes usar una regla, pero realmente no es un mandato. Y puedes ser realmente estricto con tus ángulos, por ejemplo, puedes hacer ángulos rectos. Puedes usar esas reglas que, por ejemplo, los diseñadores de autos usan solo para dar todos esos ángulos y cosas así. Pero no voy a hacer eso. No me voy a molestar con demasiados detalles. Yo sólo voy a hacer algo como esto. Entonces esto de aquí va a ser nuestra navegación aquí mismo en la parte superior. Voy a usar un plano y un estilo de navegación porque tus usuarios están acostumbrados a estos cert ciertos tipos de navegaciones. Así que no lo compliques demasiado, asegúrate de usar algo que todos puedan entender. En la mayoría de los casos, las navegaciones ya están probadas. Así que no trates de inventar agua caliente solo por el bien de ella, usa navegaciones que ya funcionan en ya convertir. Bueno, entonces en este caso voy a usar la navegación. Voy a poner un logo aquí mismo. Y para hacer eso, simplemente voy a dibujar un círculo. Y puedo usar de inmediato mi color para poder rellenarlo muy bien así. Y entonces puedo hacer algo como esto. Así podré usar mi regla una vez más, asegurarme de ir a algún lugar en el medio. Realmente no importa. Y voy a usar estos que indican mi navegación aquí mismo. Lo que voy a hacer, voy a dibujar dos botones. Entonces voy a hacer esa mano libre. Por ejemplo, así. Por ejemplo, así. Este botón de aquí va a ser el botón de inicio de sesión, por ejemplo, porque ese es el punto principal. Quiero que mis usuarios inicien sesión y tengan tantos usuarios como sea posible. Y esto puede ser por ejemplo botón Registrarse, que va a traer a mis usuarios de nuevo a sus perfiles. Voy a anotar eso. Entonces voy a dibujar una flecha así. Así que en realidad se usa este. Para que podamos verlo mejor. Así que regístrate y esto de aquí mismo se puede iniciar sesión. Puedo subrayarlo porque una vez más, es mucho más importante que registrarse porque ya tienes estos usuarios, pero tienes que convertir nuevos usuarios y traer nuevos usuarios a tu sitio web. A continuación, quiero crear una bonita imagen de gran héroe para poder colocarla aproximadamente por aquí, por ejemplo, y porque mencionamos zapatos, una vez más, no soy muy bueno dibujando, pero estoy sólo voy a ilustrar esto aquí mismo. Por supuesto que puedes. Si eres bueno dibujando, puedes dibujar esto. También puedes tomar imágenes de Internet, recortarlas y luego pegarlas en un trozo de papel. Pero una vez más, ese enfoque requiere mucho de tu tiempo y energía. Así que solo asegúrate de entender eso antes de saltar realmente a un proceso como ese. En mi caso, sólo voy a garabatear algo que se asemeja a un zapato. Pero antes de hacerlo, quiero posicionar un texto. Entonces voy a usar un bonito título grande aquí mismo. Así. Y voy a llenarlo de color así. Entonces voy a usar el subtítulo aquí mismo. Y entonces realmente puedo usar mi lápiz para rellenarlo aquí mismo. Y luego por debajo de eso, puedo usar un botón porque estos aquí mismo y describen su producto. Dispara en nuestro caso. Y voy a usar de nuevo este color. Así que ahora solo vamos a crear alguna forma básica que se asemeje al zapato. Una vez más, en realidad no soy tan buena dibujando. Así que voy a, digamos hacer algo como esto, tal vez así, y luego terminarlo aquí mismo. Quizás así, así, y luego bajarlo aquí mismo. A lo mejor estos son para los cordones, algo así. Y usemos rayas al costado. Al igual que tal vez tenga una forma aquí mismo, y ahí va usted, tenemos algo que se asemeja a un zapato. Y entonces lo que pueda hacer en la parte de atrás, realidad puedo crear tal vez un círculo o una forma, que sólo va a traer nuestro zapato, el frente, algo así. Ahí vas. Esta es nuestra imagen de héroe. Entonces, el objetivo de esta imagen de héroe es convertir mejor a tus usuarios. Entonces este título va a indicar qué es esto. Es un zapato. Entonces el nombre del zapato, el nombre de la marca o algo así. subtítulo va a describir un poco más detalles sobre el programa. Entonces, por ejemplo , ¿ materiales de los que está hecho o para qué sirve? ¿Es para correr, es para caminar, cosas así? Y luego el botón, los usuarios realmente pueden comprobarlo y entrar en una página separada, que es para ese zapato en particular. Así que solo ten todas esas cosas en mente. Entonces lo que puedo hacer es dibujar una paginación aquí mismo. Por lo que los usuarios realmente pueden hacer clic en estos puntos. Y digamos que este punto está rellenado. O esto puede ser deslizador automático y simplemente puede ir a la izquierda y a la derecha automáticamente. Y los usuarios realmente no pueden hacer clic en estos para cambiar, o pueden hacerlo, dependiendo del diseño que realmente vaya al final. Entonces a continuación lo que voy a hacer a continuación es crear algún tipo de tira de logo. Entonces usemos una regla y vamos a crear algunos círculos básicos. Entonces tal vez pueda crear cuatro círculos tal vez. Y luego simplemente haz algo como esto. Y posicionar esto, por ejemplo, socios o tiendas asociadas, algo así. Entonces digamos que este es un zapato muy conocido. Y entonces estos socios pueden representar a todas estas tiendas famosas, por ejemplo donde este zapato es sal. A continuación, debajo de eso, lo que puedo hacer es incluir un video por ejemplo como este. Y sólo se me ocurren ideas. Solo estoy probando estas cosas y solo explorando estas cosas. Entonces tal vez podamos hacer algo así. Tal vez pueda crear un círculo de inmediato, así. Y luego usa este bolígrafo para poner un botón de reproducción en el centro así. Entonces esto puede ser un video. Y luego detrás de este video lo que puedo hacer es por ejemplo incluir una bonita sombra como esta. Y esta sombra paralizadora va a indicar que los usuarios pueden dar click en este video en particular. Pero también puedo hacer indicar que esta es la imagen. Entonces aunque es un video, sigue siendo un elemento de imagen. Y entonces lo que puedo hacer aquí mismo es poner un bonito título grande. Entonces ponle un gran subtítulo detrás, perdón, debajo de él, así. Y luego por ejemplo botón, donde los usuarios realmente pueden hacer clic e ir y hacer una determinada acción. Entonces digamos que en este video se describe este zapato o el proceso de creación de estos zapatos o algo así. Debajo de eso, lo que podemos hacer es, por ejemplo brindar algunos servicios y brindar antecedentes sobre los servicios que este sitio web realmente brinda. Entonces, por ejemplo, aparte de vender el zapato, tal vez estén tomando zapatos de segunda mano y luego ponerlos en su sitio web. A lo mejor los están reformando. Así que realmente tienes que hablar con tu cliente sobre todos esos detalles y sobre lo que realmente están haciendo. Pero en nuestro caso, por ejemplo, tal vez no solo estamos vendiendo zapatos, tal vez también estamos vendiendo ropa. Entonces, por ejemplo, estás vendiendo playeras nosotros estamos vendiendo chaquetas, estamos vendiendo todas estas cosas. Entonces voy a poner estas tres cajas. Una de mis imágenes, y usemos algo como esto tal vez solo para indicar que estas son nuestras imágenes. Una vez más, si estás haciendo esta mano libre, vas a ser mucho más rápido. Pero sólo voy a mostrarte en estos videos que puedes usar una regla así. Entonces estas son las imágenes analistas dicen otros servicios, ¿qué otros productos? Entonces, una vez más, podré saber más tarde cuando vuelva a aquí cuáles son estos. Entonces tal vez tengamos un texto más grande. Entonces, por ejemplo , título de este producto, entonces tenemos una descripción como esta, y luego tenemos un enlace. Entonces puedo hacerlo así. Entonces puedo resaltarlo usando este color. Y entonces puedo señalar para adherir y decir enlace. Así que los usuarios realmente pueden hacer clic aquí para acceder a este producto. Lo que podemos hacer a continuación es que quizás podamos poner una imagen grande y una imagen gran héroe o un video que se esté reproduciendo en loop así. Entonces tal vez modelar con el producto. Así. Y luego por debajo de eso, podemos terminar esto por ejemplo con otra sección como esta. Entonces tal vez podamos, por ejemplo decir algo así sobre el fabricante de este producto en particular o algo así. O tal vez incluso podamos mostrar otro producto aquí con una imagen. Y debido a que usamos un diseño izquierdo aquí, tal vez podamos usar un diseño correcto aquí solo para romper nuestro diseño un poco así. Y puedo llamar así a esta imagen del producto. Y entonces lo que puedo hacer es poner un título aquí mismo, bonito título grande subtítulo aquí, así. Y luego pon un botón aquí. Por lo que una vez más, los usuarios pueden adquirir este producto o al menos visitar una página para adquirir este producto. Debajo de eso, lo que podemos hacer es crear un formulario de contacto. Entonces lo que puedo hacer es poner un título aquí, subtítulo aquí, por ejemplo y luego montón de estos. Entonces, vamos a rellenar esto. Vamos a rellenar esto. Entonces, qué es esto, por ejemplo I. Puedo ponerlo aquí mismo. Entonces formulario de contacto, por ejemplo, nos encantaría saber de usted, contáctenos usando la información de contacto a continuación y luego dirección, número de contacto, dirección de correo electrónico o algo así. Entonces podemos poner nuestro formulario de contacto aquí. Entonces estos son campos de formulario como este. Y puedo por ejemplo poner una línea como esta solo para indicar por ejemplo tu correo electrónico, tu nombre, tu dirección, algo así. Y luego por debajo de todos estos, podemos poner un botón. Pongamos un botón justo aquí solo para romper un poco nuestro diseño porque tenemos un botón izquierdo aquí mismo, así. Entonces lo que puedo hacer al final es que puedo romper esto, por ejemplo así. Y entonces puedo poner un logo aquí mismo, así. Y luego puedo poner un menú de elementos de navegación. Entonces veamos, 123-456-2345. A lo mejor puedo Jeremy y otro aquí mismo. Entonces este va a ser nuestro nav así por ejemplo original Copyright 2022, y nombre de marca como este, por ejemplo y luego puedes poner los términos del servicio. Puedes poner política de privacidad o algo así. Para que puedas ver en solo un par de minutos, 10 min más o menos, puedes crear algo que sí se ve bastante bien y realmente se muestra a tus clientes DID o que tienes. Y puedes poner esa idea así en un trozo de papel. Pero me olvidé de escribir aquí, es poner sombra de fondo, e.g. I. Incluso puedo señalar eso, llamarlo en sombra paralela para que los clientes, compañeros de equipo, desarrolladores, todos los involucrados puedan saber lo que en realidad quiso decir con esto. Entonces ahí tienes. Así de fácil es dibujar en una hoja de papel simple. Y si recién estás iniciando o si ya empezaste, ya en este negocio, realmente te recomendaría que uses este papel porque es extremadamente barato. Es extremadamente rápido para dibujar, como puedes ver. Pero en el siguiente video, voy a mostrar que es un papel cuadriculado de puntos, el negro que tengo. Pero también puedes obtener muchos otros colores. Y sólo para mostrarte cómo se ve eso, este diseño se ve como en ese pedazo de papel. Y entonces puedes comparar lo que realmente te gusta más. Pedazo de papel normal o ese pedazo de papel de cuadrícula de puntos si quieres salpicar un poco más de dinero en eso. Entonces te veré ahí. 58. Dibujo en papel de cuadrícula: En este video, vamos a usar ese papel cuadriculado de puntos negros que te mostré. Y vamos a crear exactamente el mismo diseño que hicimos anteriormente con el trozo de papel de impresión blanco liso . Y voy a mostrar algunas diferencias entre este pedazo de papel negro oscuro y ese trozo de papel blanco. Así que comencemos. Y lo primero es lo primero, tienes todos estos diferentes grosores de tus bolígrafos. Entonces este es el número cinco, e.g Este es el número ocho, este es el número diez. Obviamente, cuanto mayor sea el número, más gruesa será la línea . Así que voy a empezar con solo esta más ligera. Entonces voy a hacer lo mismo que antes. Simplemente voy a crear el esquema. Y es mucho más fácil alinear tu regla aquí porque estás usando estas notas. Voy a hacer algo así. Voy a hacer algo como esto, por ejemplo, como dije, es mucho más rápido y más fácil cuando realmente puedes contar cuántos de estos puntos tienes. Entonces lo primero es lo primero, vamos a crear esa navegación para que pueda crear un círculo para mi logo. Y porque no tengo un color naranja que usábamos anteriormente, voy a usar este solo para rellenarlo. Así. Entonces voy a usar el mismo estilo. Entonces vamos a esto solo para indicarlas. Y sólo voy a crear esos dos botones una vez más. Así puedo crear un botón como este, En botón así. Y luego voy a usar este color gris para rellenar mi botón de registro. Y voy a usar este color morado para rellenar mi botón Iniciar sesión. Una vez más, puedes usar diferentes colores. Si tomo esto y probemos esto lea y veamos si funciona mejor. Yo no lo creo. Pero vamos a ir con eso. realidad es mucho más oscuro que este morado. Así que en realidad voy a cambiar así, pero obviamente, dependiendo del color del cliente, vas a usar uno u otro. Ya lo mencioné. Entonces, sigamos adelante para el siguiente. Voy a usar el número ocho porque no encuentro que estas líneas sean lo suficientemente gruesas. Así que vamos a alinearlo así. Y se puede ver enseguida el corazón más oscuro. Esto es así que voy a usar estos para mi título, por ejemplo, vamos a llenarlo así. Entonces voy a usar ese deseo gris para mi subtítulo. Así. No hay mucha diferencia pero consigues el punto. Y voy a usar esta roja para nuestro botón. Vamos a llenarlo muy bien, así. Y entonces voy a usar esos círculos para nuestra paginación. Vamos a rellenar esto. Así. Entonces voy a usar este encendedor para crear mi zapato así, por ejemplo, así. Y claro, dependiendo de cuánto tiempo quieras invertir, cuánto tiempo tengas en tu proyecto. Una vez más, puedo seguir repitiéndome o puedes invertir dependiendo del proyecto en cuestión. Entonces, vamos a sentir lo mismo. Dibujemos estas líneas muy rápido, como hicimos anteriormente. Y si recuerdas, teníamos ese círculo. Ahora voy a usar el número diez, que es el más grueso que tengo, así, y simplemente rellenarlo con algún color de fondo aquí mismo. Ahora lo que también puedes hacer es que puedes, por ejemplo rellenarlos con este color. Así. Una vez más, siempre vuelvo a la cantidad de tiempo que realmente tienes en este proyecto. Para que puedas hacer lo que quieras con esto. A continuación tenemos esa tira de logo. Así que permítanme crear aquí mismo. Y teníamos esos círculos. Por lo que se posiciona para diferentes círculos. Mi Excel. Y debajo de eso, teníamos ese video así, así. Y en realidad voy a crear un círculo en el centro así. Y sólo ve dónde está mi número diez. Entonces aquí está. Simplemente voy a dibujar ese botón de reproducción dentro usando mi color blanco. Y puedo seguir usando este número diez para mi título. Puedo usar este color gris para mi subtítulo. Y vamos a ver. Puedo usar lo que es este número cinco. Puedo usar eso para el botón y luego simplemente rellenarlo con mi color rojo así. A continuación lo que tenemos son esos títulos. Así que vamos a seguir usando el número diez. Ver títulos. Voy a hacer esta mano libre así. Entonces título principal, subtítulo. Y lo que teníamos a continuación que están en esas imágenes. Entonces, lo mejor de este trabajo es que en realidad se puede contar. No me voy a molestar porque ya creamos este diseño, pero si quieres, en realidad puedes contar cuántos de estos puntos estás usando para tu maquetación. Así podrás asegurarte de que todas tus líneas son perfectas, todas tus alturas son perfectas. Lo que a su vez va a crear un diseño mucho más limpio. Así que una vez más, dependiendo de lo que quieras lograr, lo que quieras usar, puedes ir con uno u otro. Prefiero un poco este papel negro porque los detalles destacan en su contra mucho mejor que en un trozo de papel blanco. Por supuesto, es un pedazo de papel un poco más caro y luego blanco. Pero dependiendo de lo que quieras lograr, lo que quieras crear, vas a ir con uno u otro. Entonces ahí los hemos creado y continuemos con éste. Entonces teníamos ese título así. Voy a cambiar a esta para las líneas más pequeñas como esta. Y finalmente tuvimos ese enlace al final. Así. A continuación tuvimos esa gran imagen. Entonces usemos este para romperlo un poco. Así. Y simplemente voy a usar a mano alzada para no perder demasiado tiempo. Y creo que la mejor opción sería en realidad esbozar esto un poco mejor con el número diez. Así porque en realidad va a delinear todo el sitio web mucho mejor que eso, número cinco, pero como dije, puedes explorar y hacer lo que quieras. Pasemos ahora a crear ese título. Entonces hagámoslo. Voy a posicionar ese título aquí. Vamos a tener ese subtítulo. Y lo que teníamos entonces es esa imagen. Entonces ya se ven algunas manchas en el papel. Ojalá no te distraiga demasiado cuando hay una cámara, pero lo que debes hacer con estas es esperar un poco, solo así, solo dales un poco más de tiempo para configurar. Entonces una vez que lo hagan, puedes seguir creando, pero realmente deberías darles un poco de tiempo para establecer. Y dos, forman un poco así. Entonces tenemos nuestro botón. Usemos uno rojo. Ahora realmente tratando de ir lo más rápido posible aquí, solo para no aburrirte demasiado con estos detalles porque ya pasamos por este proceso una vez con pedazo de papel blanco. Entonces lo que tenemos a continuación entonces es el título. Entonces intentemos mantenerlo en la misma línea. Entonces tenemos el subtítulo del título. Y entonces teníamos el título a la derecha. Entonces teníamos el subtítulo debajo de él. Y entonces teníamos esas líneas. Así que sexualmente usa uno poco más delgado. Entonces este es el número ocho. Vamos con el número cinco, porque quiero mostrar esas líneas más pequeñas aquí mismo así. Y luego vamos a ver. Puedo usar el número ocho para crear realmente esos campos de formulario como este. Entonces puedes ver que puedes cambiar fácilmente entre usar una regla o ir con esta cuadrícula de notas, porque ese es el objetivo de tenerla en primer lugar. Así se puede ver sin una regla cuanto más rápido puedo crear estos, pero aún manteniendo el mismo diseño, la misma consistencia, Todo parece igual que debería. Por último, coloquemos nuestro botón aquí mismo, justo esto, rellenarlo con color. Esto, así. Y finalmente al final, vamos a terminar las cosas. Vamos a crear ese pie de página. Entonces puedo posicionar esto como aquí. Y puedo concluir esto. pie de página surgió un poco más grande que antes, pero en realidad no importa. Y lo que puedo hacer aquí mismo es crear esos seis. Entonces 123456. Y puedo dibujar en mi círculo para mi logo. Puedo usar mi color, rellenar esto muy bien. Por último, vea a continuación eso. Entonces usemos uno más delgado. Entonces pongámoslo en el centro en realidad. Así OC 2022. Y lo que puedo hacer es usar número diez o incluso mejor el número ocho para indicar los términos del servicio, por ejemplo, política de privacidad. Y ahí lo tienes. Por supuesto, puedes dibujar todos esos detalles. Entonces vayamos con esta, por ejemplo, tiendas asociadas. Pero no quiero aburrirte con demasiados detalles porque ya pasamos por este proceso antes. Entonces básicamente, eso es todo. Así es como usas este papel de cuadrícula de puntos y papel de cuadrícula de puntos negros. En mi caso, realmente debería encontrar marcadores ticker, ticker estos bolígrafos de gel en color para acentuar estos colores un poco mejor porque algunos colores funcionan bien, como este color dorado, que te voy a mostrar. Entonces por ejemplo puedes usar eso para tus botones, pero si quieres usar el color exacto de la marca de tu cliente, entonces vas a tener problemas en algunos casos, especialmente si no tienes estos. Ahora bien, esta es una de mis marcas favoritas. Se llama Sokoto. Es de Japón. Y realmente crean estos bolígrafos de aspecto increíble. Se puede ver cómo, qué buen resultado se puede obtener realmente con estos bolígrafos. Por lo que en realidad venden estos en una variedad de colores diferentes. Y puedes comprarlos si quieres. Pero estos tres cuestan tanto como 20 de estos. Entonces ese es todo el punto, esa es toda la razón detrás de esto. Pero quería mostrarte que puedes conseguir estos en diferentes variedades, en diferentes precios, igual que con estos marcadores que vas a utilizar para papel blanco. Ahora, déjame aclarar esto y déjame mostrarte la diferencia entre este trozo de papel negro y un trozo de papel blanco. Entonces aquí está. Es el mismo diseño usando dos técnicas diferentes, usando dos papeles diferentes. Entonces aquí tenemos este libro blanco que ya cubrimos, y aquí tenemos este papel de punto negro. Y básicamente puedes hacer tu juicio. Esto es mucho más fresco y es mucho más rápido de crear usando mano libre porque tienes esta cuadrícula de puntos. Pero si básicamente quieres atravesar el dolor de usar estos, porque una vez más, se rellenan con este gel y este gel se va a traducir en una hoja de papel. Estoy dispuesto a pasar por eso porque mis clientes están mucho más impresionados por un resultado como este, entonces nuestro resultado así. Pero si recién estás comenzando, si no puedes molestarte en usarlos y tal vez lucir un poco más profesional pero pagando el precio. Entonces claro que puedes ir con estos. Obviamente, lo que sea que elijas para crear tus wireframes de papel para tubos. Mucho más importante qué historia están contando y el diseño, y cómo se ve el diseño. Entonces, ¿qué papel estás usando? Pero claro, volviendo a ello, puedes usar opciones más económicas. Puedes usar opciones mucho más caras. Pero al final del día, el resultado es lo que importa y no el trozo de papel. En realidad hay un consejo más que quiero compartir contigo en esta clase y es usar plantillas. Y vamos a llegar a eso en el siguiente video. Entonces te veré ahí. 59. Usando plantillas para imprimir: Una excelente manera de mejorar su velocidad y productividad mientras trabaja con wireframes de papel es usar plantillas principales. Ahora bien, estas son solo plantillas de dispositivos conocidos, por ejemplo , dispositivos telefónicos, dispositivos de navegador, dispositivos de reloj, y cualquier otra cosa en la que estés trabajando, puedes usar tabletas, puedes usar computadoras portátiles, lo que quieras. Entonces en este video, solo voy a mostrarte un recurso gratuito que te estoy ofreciendo para que puedas usarlo. Pero también hay una salvedad en eso. que arreglar algunas de estas tallas porque son un poco mayores. También voy a proporcionar plantillas que te voy a mostrar en solo un segundo, las cuales son imprimibles en PDF para que puedas imprimirlas de inmediato. Pero también te voy a mostrar algunos enlaces premium en el PDF. Puedes hacer click ahí y visitarlos y comprarlos si quieres. Pero no es realmente obligatorio. Te estoy dando todos estos recursos gratuitos, pero si quieres, puedes adquirir esos recursos premium. Entonces aquí está mi sitio web, web donut.net, y estos son dispositivos imprimibles, plantillas. Como se mencionó, voy a dejar el enlace abajo en el PDF y puedes dar click para acceder a estos, simplemente descárgalos. Son archivos de Photoshop. También puedes abrir archivos de Photoshop en Adobe XD si no tienes Photoshop. Y lo que son básicamente son solo maquetas de estos teléfonos. Entonces tenemos smartwatches, tenemos teléfonos móviles y se puede ver iPhone siete y Galaxy píxeles, Samsung Galaxy S7. Entonces estos dispositivos son un poco más antiguos en este punto, pero como dije, solo puedes usarlos. Por ejemplo, puede quitar estos botones, puede quitar estas cámaras, colocar la cámara en el centro, por ejemplo, para obtener un dispositivo más actualizado. Vamos así. También puedes combinar estos elementos, pero como puedes ver, no hay notch. Pero voy a mostrar en apenas un segundo, voy a proporcionarte una plantilla imprimible en PDF, para que puedas tener un teléfono con arco, tenemos tablets, tenemos navegador Google Chrome, y eso es básicamente todo. Así que solo ven aquí, descárgalo ya. Y eso básicamente es golpear M para mostrarte lo que vas a conseguir. Estas son plantillas imprimibles que puedes obtener dentro del formato de archivo PDF. Simplemente imprima estos. Y como pueden ver, este es el navegador que acabo de mostrarle. Estos son los teléfonos que tienen la muesca en la parte superior. Así que en realidad seguí adelante y los creé. Y estos son smartwatches, Así que por ejemplo para Apple Watch o algo así. Entonces, ¿cómo puedes usar estos pequeños, vamos con este. ejemplo, simplemente dibuja en ellos y son realmente útiles porque realmente puedes mostrar a tus clientes y a tus compañeros de equipo cómo se verán todos estos una vez que realmente los pones en tu software y una vez que empieces a crear. Entonces, por ejemplo, usemos un logotipo aquí mismo en el centro en los tres. Y usemos una regla. En este caso, puedes ver por qué regla aquí es realmente útil. Porque puedo, por ejemplo poner una barra de pestañas aquí mismo en la parte inferior de estos tres al mismo tiempo. Entonces obtienes el punto. Simplemente puedes dibujar aquí mismo. Y a propósito dejé todo este espacio vacío alrededor. Entonces, por ejemplo, todavía puedes hacer esto. Puedes poner texto aquí, puedes hacer lo que quieras con esto. Pero básicamente las plantillas imprimibles te van a ahorrar un montón de tiempo, sobre todo si vas a presentar más tarde a los clientes. Me pareció que estos son extremadamente útiles cuando estás creando aplicaciones móviles como estas. Y cuando estás creando conceptos de reloj como estos, porque puedes ver que estos relojes son apenas un poquito más pequeños. Entonces crear una maqueta, básicamente, así es como va a quedar el producto final al final es realmente útil para mostrar a tus clientes. Pero ¿qué pasa con la web? Bueno, eso es un poco complicado. Lo que tenemos aquí mismo es Google Chrome, básicamente una plantilla. Lo que puedes hacer aquí mismo es si volvemos al ejemplo que te mostré anteriormente, así podemos, por ejemplo dibujar ese zapato una vez más. Una vez más con mi épica. Estoy probando habilidades aquí mismo, pero usted entiende el punto. Vas a usar esto para mostrar conceptos rápidos a tus clientes. Y claro, lo que también puedes hacer es darle la vuelta a esto. Así que usa en este espacio y solo usa esta barra. Dale la vuelta y solo reposiciona y aquí en la parte superior dentro de Photoshop. Y entonces vas a tener mucho más espacio abajo. Lo que también puedes hacer es usar ese mismo enfoque. Así que usa esta barra, dale la vuelta, estrecha un poco y simplemente colóquelo aquí mismo en la parte superior. Entonces en ese caso vas a tener todo este espacio abajo vacío. Entonces estos son solo algunos de los ejemplos que quería mostrarles. Estos son gratuitos. Los vas a conseguir. Simplemente puedes descargarlos y usarlos en tu proyecto ¿verdad? Ahora bien, si vuelvo a aquí, esta es la de mi página web, web donut.net. Y también voy a proporcionar algunos recursos premium con un montón más de estos dispositivos con algunas pautas, por ejemplo y cosas así en el PDF. Puedes conseguir esos si quieres. Y tal vez te estés preguntando, es genial usar este pedazo de papel blanco, pero ¿qué pasa con ese elegante trozo de papel de punto negro? Bueno, es un poco complicado con eso porque tienes que asegurarte de alinear todas estas maquetas usando esa cuadrícula. Así que solo asegúrate de lo que estés comprando tu papel de cuadrícula de puntos, asegúrate de pedirles dimensiones o incluso mejor, simplemente puedes usar una regla y luego puedes medir las dimensiones entre los bordes de tu papel. Entonces solo los bordes exteriores de tu papel. Entonces por ejemplo este borde, este borde, este borde, porque el centro realmente no importa. Por qué hacemos eso. Bueno, cuando estas creando estas y poniéndolas abajo en el trozo de papel antes de imprimirlas, solo puedes asegurarte de que las mides correctamente terminadas, todo encaja como debería. Entonces, cuando los imprimas, va a parecer alineados, coherentes. Todo va a coincidir con tu cuadrícula de puntos. Entonces cuando empieces a dibujar todo, voy a tener mucho más sentido porque si los imprimes así, entonces todos estos marcos no van a alinearse con tu cuadrícula de puntos, que luego derrota el propósito de la cuadrícula de puntos en primer lugar. Así que solo asegúrate de prestar atención a detalles como esos. Una vez más, usar plantillas como esta es una excelente manera de presentar a tus clientes o a tus compañeros de equipo solo para mostrarles cómo se vería el producto terminado. Así que solo asegúrate de echarles un vistazo. Una vez más, te estoy dando recursos gratuitos y premium para que decidas lo que quieres usar. 60. Compartiendo tus wireframes: Como dije a lo largo de esta clase y estos wireframes en papel son principalmente para ti y para tus ideas solo para descubrir los posibles diseños que vas a usar en tu diseño una vez que realmente llegues a software. Pero si estás trabajando como parte de un equipo con otro diseñador, o si solo quieres compartir tu proceso con el cliente. Y el cliente quiere ver dónde se en este proyecto en este momento en particular, entonces realmente puede compartir estos wireframes en papel con su cliente. Pero, ¿cómo puedes hacer eso en realidad? Donde si el cliente o tus compañeros de diseño son locales, simplemente puedes tomar un trozo de papel y simplemente llevarlos a la oficina y mostrarlos de esa manera. Si recuerdas, cuando te muestro posibles estilos para el wireframe en video anterior, viste que algunos diseñadores en realidad están cortando esos wireframes del pedazo de papel y luego les presentan eso manera. También puedes hacer eso. Pero la forma más fácil que he encontrado a lo largo de los años, especialmente con clientes que solo querían ver, solo eran curiosos porque la mayoría de los clientes más pequeños, especialmente no entienden realmente su proceso y realmente no saben qué son los wireframes de papel, y solo quieren ver por qué están pagando. Entonces, en esos casos, lo que puedes hacer es simplemente usar tu teléfono, colocar un trozo de papel abajo, asegurarte de tener buena iluminación y luego simplemente tomar una foto de tu teléfono. No tienes que compartir todos los wireframes de papel porque si, por ejemplo tienes 20 páginas diferentes en un sitio web, vas a tener 20 trozos de papel diferentes. Así que solo puedes compartir uno o dos solo para que ellos vean y entiendan lo que realmente estás haciendo y por qué te están pagando si el cliente quiere ver todo el proceso y todo wireframes de papel, tú también puedes hacer eso. O si tienes un escáner, que es la forma más fácil que encontré a lo largo de los años, simplemente puedes escanear todos esos papeles. Puedes ponerlos en un archivo zip, por ejemplo y luego simplemente enviar ese archivo zip por correo electrónico a tu cliente o a tus desarrolladores, compañeros de equipo, a quien sea. Entonces, una vez más, no todo el mundo va a exigirte esto. Pero si lo hacen, entonces tienes todas estas opciones para compartir wireframes en papel con ellos porque tienen todo el derecho de entender en qué estás trabajando en este proyecto y dónde estás en este momento. 61. ASIGNACIÓN de la SECCIÓN 7: Su tarea para esta sesión es crear cualquier tipo de estructura de papel que desee. Puede ser un sitio web como lo estamos haciendo en esta clase. Puede ser una aplicación móvil, se puede adjuntar placa, puede ser lo que quieras. Simplemente practica con algunas de estas cajas. Se pueden utilizar varios estilos diferentes que se muestran en esta clase. Puedes hacer lo que quieras. El punto aquí es sólo para practicar. No te preocupes por usar papeles elegantes. No te preocupes por usar lápices o bolígrafos elegantes. Solo usa el tipo de papel que quieras. Incluso puedes usar servilleta y algún bolígrafo. Así que asegúrate de practicar, asegúrate de probarlo y asegúrate tratar de entender por qué hará que tu proceso de diseño sea mucho más rápido una vez que realmente lo cojas. 62. SECCIÓN 8 Diseño y cuadrículas: Crear diseños comunes en el diseño de la interfaz de usuario es extremadamente importante porque estos diseños ya han sido probados, ¿verdad? Ya han estado demostrando que en realidad están trabajando. Así que no solo intentes inventar agua caliente porque por diversión, intenta usar siempre estas metodologías comprobadas y estos diseños y cuadrículas probados están ahí solo para organizar un poco nuestro contenido un poco mejor en varios puntos de interrupción o tamaños de pantalla diferentes. Así que comencemos. 63. ¿Qué es un diseño: diseño en el diseño de la interfaz de usuario puede referirse simplemente a la organización de los elementos que se incluyen en una página o en una pantalla móvil. Básicamente, lo que sea que esté incluido en tu diseño y cómo está estructurado y organizado se puede categorizar como diseño. Hay muchos diseños diferentes por ahí. Entonces hay diseño móvil, Hay diseño de escritorio, diseño de tableta. También hay diseño de paisaje, diseños de retrato y mucho más. Pero básicamente, lo principal que necesitas saber aquí es cuando alguien está mencionando el diseño, básicamente están hablando de la estructura general de todos tus elementos que conducirán en una página o una sola pantalla. forma en que creas tu maquetación depende de tu proyecto. Qué complejo es tu proyecto, qué tan grande es tu proyecto. ¿Estás usando una grilla? Estás usando guías, estás usando algunos estados de componentes, algunos elementos. Así que todas esas cosas pueden depender de tu diseño y del resultado final de tu maquetación. En esta clase, nos vamos a centrar en cómo crear tu layout, cómo usar cuadrículas, cómo estructurar tu contenido dentro de tus cuadrículas y dentro de tu layout. Entonces de esto es de lo que vamos a hablar en esta clase. Pero siempre puedes navegar en línea y ver diferentes diseños después de esta clase. Y solo entiende lo que otras personas están usando en otros temas, en otras clases, en otros proyectos. Y lo vas a entender mucho mejor después de esta clase. 64. ¿Qué es un sistema de cuadrícula y por qué es importante: Los sistemas de cuadrícula se utilizan en el diseño para organizar mucho mejor tu contenido. Porque si no usas sistemas de cuadrícula, no sabes dónde deben alinearse ciertos elementos a la izquierda o a la derecha, o en la parte superior e inferior. Así que los sistemas de cuadrícula están diseñados básicamente para hacer eso para mantener tu contenido organizado, para mantener tu contenido coherente, y para mantener tu vista se experimenta mucho mejor porque van para ver este contenido organizado en lugar de estos elementos dispersos que no se alinean. Los sistemas de cuadrícula también se utilizan para desarrolladores porque los desarrolladores pueden codificar mucho más simple y mucho más fácil que sin ningún sistema de cuadrícula porque pueden poner el contenido dentro del y luego estableces el ancho fijo de esos contenedores. O pueden ser variables si están usando algo así como un diseño de contenido flexible. Por lo tanto, ese contenido puede ser mucho más fácilmente escalable si están creando un diseño responsive, tú como diseñador, puedes diseñar ese contenido mucho mejor para diseño responsive porque estás utilizando estos sistemas de rejilla. sistema de cuadrícula más conocido por ahí es Bootstrap. También hay muchos otros por ahí. Y en esta clase vamos a mencionar Bootstrap, y también vamos a mencionar algo llamado sistema de cuadrícula de ocho píxeles porque ese sistema de cuadrícula es realmente, en mi opinión, el más escalable ahí porque todos los elementos son divisibles por ocho. Los sistemas grid son geniales porque como dije, mantienen tu contenido en línea ahí, mantienen tu contenido organizado. Y son súper fáciles de codificar para los desarrolladores. Porque sobre todo con estos conocidos sistemas de grid como Bootstrap, por ejemplo, ya tienen estos componentes. Por lo que va a mantener su tiempo de desarrollo mucho menor porque ya tienen todos estos componentes preconstruidos. Solo necesitan ingresarlos dentro de su propio código. En la siguiente lección, te voy a mostrar cómo configurar cuadrículas en Adobe XD. Es súper simple, así que te veré ahí. 65. Cómo configurar las rejillas en Adobe Xd: En esta lección, te voy a mostrar cómo configurar cuadrículas en Adobe XD. Así que saltemos a Adobe XD de inmediato. Y aquí en Adobe XD, lo que puedes ver es que creé estos tableros de arte de 1920 por 1080, y rápidamente te voy a mostrar esto en Adobe XD, pero también puedes configurar esto en Sketch. Se puede configurar esto en Figma. Y Figma es una de las mejores herramientas que existen en mi opinión, porque tiene la mayor cantidad de funciones incluidas por defecto, XD es genial. Y debido a la comunidad, eventualmente van a incluir todas estas opciones que la Figma ya tiene, porque estas herramientas están compitiendo todo el tiempo. Y es genial para nosotros como diseñadores porque somos nosotros los que estamos beneficiando básicamente de estas herramientas compitiendo entre sí, porque siempre podemos esperar las últimas herramientas y las últimas características dentro de las nuevas actualizaciones. Entonces porque me encanta Adobe XD, lo uso desde hace años, lo uso todos los días en mi trabajo. Esta clase está dedicada a Adobe XD. Pero si eres un Figma o un usuario de sketches, también puedes hacerlo en esas herramientas. O si no sabes cómo puedes simplemente buscar clases en línea o buscar videos de YouTube. Entonces si vuelves a Adobe XD, como dije, lo que tenemos aquí mismo son los aeropuertos de 1920 por 1080. Es sólo un aeropuerto regular. Puedes configurar esto desde aquí. Puede hacer clic en Mesa de trabajo y luego configurarla o en la pantalla de inicio. Ahora, para configurar nuestras cuadrículas, todo lo que necesita hacer es simplemente seleccionar esta placa de arte. Ve justo aquí donde dice grilla. Y tienes dos opciones. Tienes disposición y cuadrado. Como dije, figma tiene más opciones que Adobe XD. Y realmente espero que el equipo de Adobe XD vaya a incluir pronto todas esas otras opciones en Adobe XD. Pero por ahora, como dije, tenemos el layout y tenemos la grilla. Así que volviendo a Adobe XD, como puedes ver, tenemos el layout y el cuadrado, y voy a elegir el layout solo para mostrarte. Y puedes hacer clic aquí solo para mostrar tu diseño. Lo que tenemos aquí mismo, nuestras columnas, tenemos ancho de canalón, ancho columna, y tenemos márgenes enlazados aquí mismo. Puedes usar esto como predeterminado. Puedes hacer esto como predeterminado, o puedes cambiar todos estos valores y luego hacer esa plantilla como predeterminada. Ahora bien, esto es genial. Si estás trabajando con algo como Bootstrap, puedes crear una cuadrícula bootstrap aquí mismo, hazla por defecto. Y luego cada vez que vuelves, y si siempre estás trabajando con bootstrap, no tienes que perder el tiempo creándolos todo el tiempo. Simplemente puede hacer clic en Make Default, abrirlo y lo mostrará como predeterminado. Entonces si volvemos a aquí, lo que puedes ver aquí mismo son las columnas, que son estos bits azules aquí mismo, tenemos el ancho del canalón, que es el espacio entre tus columnas. Tenemos el ancho de columna, que es el ancho de estos bits azules, que son las columnas. Y finalmente tenemos márgenes de izquierda y derecha. Y también puedes hacer clic aquí mismo para configurar márgenes superiores, márgenes inferiores. Tenemos márgenes izquierdos y márgenes derechos. Si haces clic aquí mismo, simplemente va a vincular los márgenes izquierdo y derecho y lo que sea que establezca aquí, va a encajarlos. Entonces, por ejemplo, si quiero que mis columnas sean anchas, por ejemplo no sé, 65, presione Enter o Return. Se puede ver lo que hace. Por lo que aumentó el ancho de la canaleta. Me guardó el ancho de mi columna aquí mismo. Y solo me mostró estos márgenes vinculados así. No me gusta demasiado el espaciado de estas canaletas. Voy a cambiarlos, por ejemplo, haga clic aquí mismo. Y luego simplemente se cambió a algo más pequeño, como, no sé, 40 por ejemplo y cuando presiono Enter o Return, como pueden ver, va a cambiar estos valores. Entonces, lo que tienes que hacer aquí mismo es jugar con estos valores en Adobe XD para obtener los valores que deseas. Y por lo general cuando configuras los valores con los que estás contento, entonces puedes seguir adelante y convertirlo en un valor predeterminado. O cada vez que vuelves a Adobe XD cuando creas tu primer tablero de arte y comienzas a diseñar. Entonces crea estos cuando realmente copies este aeropuerto a otro aeropuerto están duplicados. Entonces, si vuelvo aquí mismo y les muestro eso también, lo que tenemos aquí mismo es este primer tablero de arte y por ejemplo digamos que estos son nuestros valores. lo mejor me gustaría cambiar esto a 60 tal vez, o cambiar esto a 40, esto a 100, y este 2.0, 80. Y puedes ver cómo cambia este layout. Entonces digamos que esta es mi salida por defecto. Todo lo que necesito hacer es presionar Control o Comando D para duplicar esta mesa de trabajo. Y como puede ver, va a guardar estos valores para usted. Una cosa más que quería mostrarles es si presiono Control Zero para encajar en el lugar seleccionado una vez más. Haga clic aquí. Aquí puedes cambiar el color de estas columnas. Entonces, si no te gusta este color verde azulado predeterminado que proporciona Adobe XD, entonces simplemente puedes cambiarlo a lo que quieras. Y finalmente, puedes bajar la opacidad aquí mismo. Así que no es demasiado perturbador cuando empiezas a trabajar. Entonces básicamente, eso es todo para Adobe XD. Como puedes ver, es sumamente sencillo. Puedes crear todo tipo de informes puedes crear escritorio son poros como esto fue, puedes crear aeropuertos de tablet, tableros de arte telefónico. Se pueden rotar horizontal y vertical. Y luego puedes crear estas rejillas para tus diseños. En la siguiente lección, vamos a hablar de Bootstrap, y te veré ahí. 66. Trabajar con Bootstrap: gran mayoría de los desarrolladores y diseñadores les gusta trabajar con Bootstrap porque es una base bien conocida y sistemas de cuadrícula conocidos desde hace años. Y muchos sitios web están realmente diseñados y construidos sobre Bootstrap usando algo con lo que estás familiarizado, con lo que la mayoría de la gente está familiarizada, es genial porque el diseño y proceso de desarrollo puede suceder mucho más rápido. Entonces, si te llevo aquí mismo, este es en realidad el sitio web de Adobe XD. Y puedes ir a las características aquí mismo. Y puedes ir a los kits de UI porque estos son los componentes que realmente puedes descargar del sitio web oficial de Adobe. Entonces lo que tenemos aquí mismo, como pueden ver, es el diseño de Apple. Tenemos Google Material Design, y puedes usar estos kits de interfaz de usuario. Puedes descargarlos y utilizarlos en tus propios proyectos. Pero lo que nos interesa para esta lección en particular es Bootstrap. Entonces, si te desplazas hasta aquí, puedes ver un Bootstrap aquí mismo. Así que Bill sitios de respuesta rápida con activos y componentes prediseñados con Bootstrap cinco. Ahora, bootstrap tiene sus propias versiones, por lo que podrías diseñar tu sitio web en Bootstrap, Bootstrap de tres años para esto es el Bootstrap cinco al momento de crear esta clase. Entonces, si estás viendo esta clase en el futuro y vienes justo aquí y te dice bootstrap seis o siete o diez o lo que sea, entonces solo debes saber que esta es la versión del Bootstrap, pero solo sé que la estructura oral, el diseño general es básicamente el mismo. Solo están incluyendo más y más componentes, vez más código en todas y cada una de las versiones. Y lo que nos interesa en esta clase es solo un diseño, solo los componentes, solo los nombres de los componentes que te van a mostrar en solo un segundo. Entonces, si volvemos a aquí, simplemente puedes hacer clic en obtener el kit. Cuando lo consigas, déjame cerrar esto. Así es como se ve cuando lo abres en Adobe XD. Entonces lo que tienes aquí mismo, tengo estas fuentes faltantes y puedes instalarlas si quieres. Si tienes un derecho aquí, va a demostrar que te faltan algunas fuentes. Lo que tenemos aquí son estos colores. Tenemos estilos de personaje porque están usando Helvetica. No lo tengo en mi Windows. Por eso los está mostrando como faltantes, pero simplemente puedo reemplazarlos si quiero. A continuación, tenemos estos componentes. Tenemos estos íconos y todos estos elementos. Así interruptores de palanca, interruptores foráneos y así sucesivamente hilanderos. Entonces todos estos son componentes de Bootstrap. Déjame cambiar a mi panel Capas aquí mismo. Y si hago zoom hasta aquí, lo que puedes hacer es hacer clic aquí mismo, ir a la vista previa si quieres, y luego por ejemplo puedes hacer clic en el sistema de cuadrícula, va a llevarlo al sistema de cuadrícula si eso es algo que quieres. Pero simplemente me gustaría navegar aquí mismo. Entonces comencemos con el layout. Ahora, el diseño es extremadamente importante porque el diseño te ayuda a entender cómo se imagina Bootstrap y puedes entender fácilmente todas estas otras cosas como Bootstrap en línea. Por ejemplo, la Fundación tiene uno y muchos otros por ahí. Pero básicamente, todos tienen una filosofía similar en cuanto a cómo se construyen, cómo se usan y cómo se actualizan para mantenerse al día con las últimas funciones de la web. Entonces si volvemos a aquí, se puede ver que tenemos un sistema de grid. Ahora bien, qué es esto, si me acerco un poco más, como pueden ver, tenemos la columna y tenemos todos estos espaciadores a cada lado. Entonces tenemos el marcador derecho y el marcador izquierdo. Así es como los llaman. Y eso lo vamos a explicar en sólo un segundo. Pero lo que tenemos debajo de eso, nuestros tamaños de cuadrícula. Tamaños de cuadrícula, si recuerdas, cuando seleccionas tus tableros de arte y puedes dar click aquí mismo para crear esta cuadrícula. Ahora bien, estos son los tamaños de rejilla. Entonces tenemos el extra grande, y estos son de un 1,200 pixeles en palabras. Entonces, si estás creando algo mayor que 1,200 píxeles, puedes usar este tamaño y obviamente va a codificar la escala con tu tamaño de tu ventana gráfica. Viewport es básicamente el escritorio, por ejemplo o el móvil, o cualquier pantalla que su usuario esté mirando en su sitio web o su aplicación, Ese es el tamaño de su ventana gráfica, en este caso es 1,200. Y esto dice básicamente que toda esta grilla va a tener 100.11, 40 pixeles de ancho. Entonces 1140 pixeles de ancho es todo esto. Y si lo selecciono, puedes dar click aquí mismo y ver en tu ancho, estamos en ese tamaño, así que 1140. Ahora bien, si cavamos un poco más profundo y antes de hacerlo, tienes todos estos otros tamaños y puedes ver cómo tus columnas y tu contenido van a escalar en todos estos otros dispositivos. Pero si rápidamente seleccionamos éste, lo que tenemos es que tenemos las columnas. Tenemos 12 columnas diferentes. Si recuerdas del video anterior en Adobe XD, realidad creamos estas 12 columnas y todas estas columnas tienen canaletas y espaciadores, pero son un poco diferentes porque son bootstrap y voy a mostrar en apenas un segundo. Entonces tenemos las canaletas aquí mismo. Entonces tenemos la canaleta izquierda y la canaleta derecha. Y esta es en realidad la diferencia clave entre Bootstrap y algo más que podrías crear por tu cuenta o descubrir algo por tu cuenta. Bootstrap tiene esta cosa realmente extraña de que están poniendo estas canaletas la izquierda y a la derecha. Entonces antes de los márgenes a la izquierda y a la derecha tienes estas canaletas. Entonces si lo llevo de vuelta a Adobe XD. Ya puedes ver a lo que me refiero. Entonces imagínense que este es el margen izquierdo y éste va a ser el margen derecho, aquí mismo. Así que todos estos espacios vacíos a la derecha, y en lugar de que la columna vaya todo el camino hasta aquí, en realidad, han dejado cuneta en su lugar. Entonces realmente no sé por qué lo están haciendo. Lo he visto en código. Lo que básicamente tienes que hacer cuando estás creando estos es que tienes que tener cuidado con la forma en que los creas. Básicamente, de estos 101,140 píxeles de ancho para tus columnas, tienes que deducir estas canaletas izquierda y derecha, y por lo tanto vas a tener ahí tu área de contenido. Entonces lo que voy a hacer es usar este, darle a Control C para sacarlo de esto aquí mismo. Y también voy a saltar dentro y abrirme en esta. Usa Control C y luego salta afuera hasta aquí, control V. Y si hago una copia, Control D, salta dentro de aquí y verás lo que estoy haciendo en tan solo un segundo. Justo a aquí y ve todo el camino hasta aquí. Acercarlos y alinearlos así. Y luego simplemente cambia el color a otra cosa que realmente puedas ver, por ejemplo este azul, lo que puedes ver en color azul, realidad el área de contenido. Entonces esta área de contenido es el área donde va a ir tu diseño real, donde van a ir todos tus elementos. Y estos maridajes a la izquierda y a la derecha son en realidad estas canaletas en las que dejaron. No sé por qué están haciendo esto, pero básicamente, este bit azul que acabo de crear es en realidad tu área de contenido. Ahora bien, si volvemos a XD, se puede ver que tienen todo esto a lo largo de sus tamaños para la grilla. Y puedes simplemente ajustar y cambiar y crear tu área de contenido para todas estas cosas. Entonces, en realidad, en lugar de 1140 para el ancho, tu ancho real va a ser 1108. Y entonces tendrás que crear estos contenidos y columnas en su interior. Una característica clave sobre Adobe XD, que en realidad es bastante mala. Si estás creando para Bootstrap, es que no puedes mostrar estas canaletas a la izquierda y a la derecha. Porque si selecciono esta una vez más para esta mesa de trabajo y no le presto atención que este aeropuerto es sumamente enorme. Yo sólo quiero cruzar el punto. Si hago clic aquí mismo, como pueden ver, no podemos usar las canaletas izquierda y derecha. Por lo tanto, nos limitamos a lo que Adobe XD tiene para ofrecernos. Entonces en este caso, lo que tienes que hacer es en realidad, vamos directo a aquí. Déjame crear mi tablero de arte y hacer lo que me dijeron. Entonces 1,200 con 1080 o lo que sea. Así que la altura realmente no importa porque la altura en realidad escala con tu diseño. Entonces, si saltamos a aquí, y voy a seleccionar realmente esto, y vamos a eliminar realmente las canaletas izquierda y derecha. Y seleccionemos éste y éste. Entonces Control C, voy a saltar aquí mismo, controlar V, asegurarme de que estén en el centro. Entonces esta es en realidad nuestra área de contenido. Lo que puedes hacer en este caso es que en realidad puedes dibujar guías. Entonces, si muevo esto hacia abajo para que puedan ver lo que estoy haciendo, en realidad podemos dibujar guías. Así que primero guía, así que simplemente pasa el cursor aquí mismo y simplemente colóquelo ahí. Si quieres dibujar guía ahí, dibuja otra ahí. Y entonces tendrás que crear estas guías a lo largo de tu diseño. Entonces así, así. Y luego comenzar realmente con cada columna por ahí. Entonces lo que recomendaría es donde sea que esté tu canaleta. Así que ahí mismo, solo tira de esa grilla de aquí mismo. También hay algunos plug-ins por ahí que puedes instalar los cuales te van a ayudar con esto. Pero solo te estoy mostrando la versión más lenta, más aburrida. Si estás haciendo esto por tu cuenta, solo quieres ser lo más preciso posible, pero por supuesto, puedes instalar un plug-in para hacerlo mucho más rápido. Pero solo ten en cuenta que tendrás que revisar el plug-in y ver qué hace y qué hizo y si hizo el buen trabajo. Entonces, si volvemos a aquí, lo que puedes hacer es que puedas ver qué tan amplia es tu columna en este caso. Así que voy a duplicar mi bit azul, golpear Control D, y en realidad voy a acotarlo hasta aquí, moverlo hacia arriba y solo ver qué se obtiene de esto. Entonces lo que tenemos es el ancho de 63. Entonces ese es el ancho real de nuestra columna. Y lo que puedo hacer ahora es en realidad crear la grilla de repetición a partir de esta. Entonces lo que quiero hacer es saber qué tan amplio es esto. Y simplemente puedo sostener mi clic de Control dentro y ver que mi canaleta izquierda es de 16. Lo que puedes hacer es tener dos opciones. Puedes usar la cuadrícula de repetición. Puedes crearlos y luego simplemente cursor en el medio hasta que estés a los 16, así. Y luego simplemente. Ajusta esto. Entonces, si flotamos, estamos a los 16, como pueden ver. Entonces todo lo que tenemos que hacer es básicamente crear 12 de estos. Entonces 24681012. Así que necesito cortarlo donde está este, aquí mismo. Así. Y obviamente acabo de contar para esta canaleta de aquí mismo. Lo que tienes que hacer es empezar desde aquí. Y como pueden ver, tenemos esta canaleta aquí mismo. Y tenemos esta canaleta aquí mismo, porque es 16 doble a 16 es en realidad 32. Entonces, lo que vamos a hacer en realidad es saltar dentro de nuestra cuadrícula de repetición aquí mismo y muesca esto para convertirlo en así. Y ahora se puede ver que tenemos exactamente la misma configuración para un escritorio que la deuda bootstrap. Entonces, lo que tenemos que hacer a continuación es que puedas seguir adelante y eliminar esta si quieres. Y en realidad puedo seguir adelante y eliminar esta si quiero. Y lo que voy a hacer es quitar esto. Y en realidad voy a mantener estos adentro, o puedo quitar esta si quiero, porque esta cantidad está en el centro. Entonces lo que tienes que hacer es que no puedes diseñar desde esta línea hacia adelante o en el lado izquierdo, lo siento, porque esta es esa canaleta que incluían ese acolchado en el lado izquierdo. También hay la misma historia aquí. Entonces básicamente tu contenido va a estar aquí. Lo que voy a hacer en este punto, si quieres tomar este enfoque una vez más, es que voy a hacer clic con el botón derecho desagrupar la grilla. Y se puede llamar a esto e.g uno para la primera columna, esto es 23. Esto puede ser cuatro y cambiemos rápidamente el nombre de este 567-89-1011. Y finalmente 12. Si quieres, puedes ordenar el mapa. Entonces, en lugar de estar 12 encima de tu pila de capas, puedes moverlo hacia abajo. Número uno, muévelo todo el camino hacia arriba. Entonces, solo depende de ti cómo quieres cambiar eso. Si volvemos a aquí, lo que puedes hacer en esta etapa es simplemente ajustarlos para moverlos hacia abajo así. Y puedes ponerlos en grupo, llama a esta grilla. En realidad puedes bloquearlo para que no se mueva. Y lo que también puedes hacer es saltar dentro de aquí. Y hay que seleccionar todos estos y simplemente reducir la opacidad. Pero porque está bloqueado, simplemente reduce la opacidad ahora para digamos diez por ciento, algo así. Y luego puedes moverlo todo el camino hasta aquí. Y ahora, cuando hayas terminado, puedes simplemente bloquearlo y luego puedes meter tu contenido aquí. Entonces, cómo va a quedar tu contenido es, digamos que estamos creando descarte, por ejemplo, dos aquí mismo. Entonces simplemente puedes darle un codazo hasta que estés contento con él, así. Y vamos a redondear las esquinas, por ejemplo pongámoslo aquí mismo. A lo mejor es algo así como una imagen. Entonces Control D si quieres por ejemplo crear un botón en el mismo estilo. Digamos que va a tener cuatro columnas ancho y algo así. Vamos a moverlo a 17 de altura o algo así. Y en realidad vamos a reducir esto a diez porque 20 es demasiado. Entonces solo puedes imaginar cómo va a funcionar esto. Se puede ver al codazar estos elementos de izquierda a derecha cómo funciona esto, cómo se puede jugar con esto, como. Entonces básicamente, lo que hay que hacer aquí mismo es dentro del bootstrap, tienen 12 columnas, ocho columnas, seis columnas, cuatro columnas, y dos columnas. Y por supuesto una columna que es la base de todo. Entonces, si volvemos a aquí, lo que puedes hacer es escalar tu diseño acuerdo con Bootstrap y según estas columnas. Entonces voy a compartir eso en tan sólo un segundo. Ellos crearon esto aquí mismo. Entonces puedes ver que esta es una columna o una columna más pequeña, sin embargo quieres ajustarla. Y si borro esta, puedes ver claramente lo que han hecho aquí mismo. Para que puedas crear columnas pares, cuatro columnas con canalones estándar, tres columnas, dos columnas, una columna. Así que como quieras, puedes crearlos en par. Lo que esto significa es que puedes crear una columna enorme y una columna pequeña, básicamente para llenar ese espacio de 1140. Y puedes jugar con tu diseño como deuda, pero te voy a mostrar eso aquí. En este ejemplo, tenemos una columna de doce elementos blancos. Entonces si lo duplico y elimino cuatro columnas así. Entonces aquí tenemos las ocho columnas elementos de ancho y se la acoplan a aquí mismo. Si lo duplico, muévelo hacia aquí. Retire dos. Ahora tenemos seis posiciones aquí, ahora tenemos cuatro. Y te haces la idea, puedes ir a 2.21. Y básicamente, así es como funciona tu maquetación en Bootstrap usando Adobe XD. Entonces, como puedes ver, es realmente bastante simple una vez que lo entiendes. Pero vas a tener que crear estas rejillas tú mismo porque como dije, no tenemos la opción para el relleno a la izquierda y a la derecha. Y solo puedes mantener estas guías a la izquierda, la derecha, solo para que puedas saber a dónde puede ir tu contenido. Y esto obviamente no importa si estás usando estas grandes imágenes. Entonces déjame mostrarte eso rápidamente en tan solo un segundo. Así que imaginemos que estamos usando alguna imagen enorme que va a crecer. Veamos 246 columnas de ancho. Y digamos que quiero posicionar esta imagen a la izquierda para llegar hasta el borde de mi tablero de arte. En realidad puedes hacer eso. La posición está justo aquí. Y los desarrolladores en código, vamos a eliminar en realidad la parte superior izquierda, que es esta, vamos a cero. Y tenemos que quitar este que es el de abajo a la izquierda. Entonces solo encuéntralo aquí mismo, que es este uno a cero. Entonces estos dos están en cero y estos dos están en tienda de campo. Así que en realidad puedes hacer esto. Y los desarrolladores en realidad van a extender el ancho de esta imagen en código. Pero como puedes ver, sigue ocupando seis columnas de tu contenido solo se va a escalar con el margen que tienes justo aquí a la izquierda. Ese es el bootstrap. En pocas palabras, como puedes ver, es realmente bastante sencillo de crear una vez que te pones en marcha. Y realmente no te mostré lo que se incluye dentro de este kit de interfaz de usuario. Para que te lo pueda mostrar en tan sólo un segundo. Entonces tenemos el contenido aquí mismo, tenemos la topografía, tenemos estas cifras, tenemos estos iconos, tenemos diferentes tablas. Tenemos diferentes colores aquí mismo. Tenemos diferentes formas. Contamos con grupos de entrada, diferentes componentes, componentes, Estados, insignias, breadcrumbs, botones. Tenemos tarjetas, los carruseles colapsan. Entonces tienes todos estos elementos. Realmente te animo si estás usando Bootstrap o estás pensando en usar Bootstrap, entonces simplemente sumérgete aquí en estos elementos solo para explorarlos un poco más y entender Bootstrap un poco mejor antes de comenzar su próximo proyecto. En el siguiente video, vamos a hablar de una cuadrícula de píxeles. Entonces te veré ahí. 67. Trabajar con el sistema de rejilla de 8 px: Un sistema de cuadrícula que muchos diseñadores utilizan por ahí es un sistema de cuadrícula de ocho puntos o un sistema de diseño de ocho píxeles. Y te voy a mostrar cómo hacer eso en Adobe XD. Entonces si saltamos aquí mismo, se puede ver que he creado mi documento predeterminado una vez más, así que 1920 por 1080 y podemos ir justo aquí donde dice grid. Pero en lugar del diseño, en realidad vamos a pasar a los cuadrados. Y puedes establecer el tamaño cuadrado aquí mismo. Y una vez más, igual que con el layout, puedes usar default, make default, y default en este caso es ocho. Entonces de esto es básicamente de lo que se trata esta Cuadrícula de Diseño de ocho píxeles. Todo tu contenido va a ser creado dentro de estos cuadrados de ocho píxeles. Y básicamente están usando ocho porque ocho es divisible por cuatro por 16, por 32 por 64. Y vas a usar esos tamaños más adelante si estás usando este sistema de cuadrícula de ocho puntos y su sistema cuadrícula de píxeles para crear realmente tu contenido y espaciar tu contenido de manera uniforme. Entonces déjame mostrarte lo que eso significa. Si volvemos a XD aquí mismo. Entonces, una vez más, si hago zoom todo el camino en muy bonito y cercano, elige mi herramienta de rectángulo y crea un rectángulo como este. puede ver que es de ocho por ocho, así que ocho píxeles por ocho píxeles. Por lo tanto, Este es el sistema de cuadrícula de ocho píxeles. Y digamos que quiero diseñar algo como esto, y quiero quitar el borde. Incluyamos el color gris aquí mismo. Y básicamente 12345678. Este es en realidad el ancho. Entonces ocho cajas, ocho cuadrados es igual a 64 porque cada una de estas tiene ocho píxeles de ancho. Así que esto es justo lo que tienes que tener en cuenta lo que sea que estés creando usando este sistema de diseño de ocho píxeles y sistema de cuadrícula, en realidad vas a multiplicar básicamente todos tus elementos por ocho. Vamos adentro y dispositivo eso una vez más. Entonces si tomamos el texto por ejemplo y si escribo aquí mismo, así que llamémoslo, este es un título. Y vamos a cerrarlo ahí mismo. Lo que tienes que hacer es fijarlo en algo así como, no sé, 16. Porque una vez más, estamos creando con un sistema de diseño de ocho píxeles. Y voy a pasarlo a esta posición. No te preocupes por esto porque siempre puedes volver a aquí y puedes ver que el interlineado está ahí. Y puedes asegurarte de cambiar todas estas cosas si quieres. Entonces, si lo configuramos en 16, en realidad va a configurarlo así. Pero si lo pongo a 32, por ejemplo va a moverlo. Entonces, cuando empieces a crear estos, y volvamos realmente a 16, así. Yo sólo quería mostrar, así que este es un título. Una vez que presionas Enter para ir a una nueva línea y un subtítulo. Y si la cierro, se puede ver lo que hace. Así que siempre deja es este espaciado solo un poquito, pero siempre puedes incluir esto y simplemente empujarlo. Al igual que a 20, creo. Algo así como 19 quizás. Es realmente difícil juzgar esta manera el texto porque esto es solo Adobe XD es problema porque están incluyendo este espaciado desigual. Entonces no puedes nunca alrededor de tu texto sin estas cajas. Simplemente es dxdy white. Así que imaginemos que este es nuestro título, este es nuestro texto, por ejemplo Control D. Y quiero mover esto a ocho, se puede ver, o por ejemplo 16. Entonces de esta manera vamos a mantener nuestra escritura horizontal creciendo. Digamos que quiero duplicar esto. Por lo que siempre puedes volver a los tiempos de aquí para presionar Enter. Y en realidad va a usar la calculadora para este ejemplo. Entonces tenemos 64, voy a entrar 64 aquí mismo veces dos. Entonces va a ser 128. Siempre puedes usar esta calculadora o puedes, como dije, Hazlo aquí mismo, pero por alguna razón no funciona. Sí. Se trabaja con las divisiones. Hagámoslo así. Entonces e.g. 32. Y por alguna razón no funciona así. Entonces vamos a extenderlo a 64. Muévelo hasta aquí al 64, y luego lo que sea 128, se obtiene la imagen. Así es básicamente como vas a obtener el ritmo horizontal y vertical usando las cuadrículas de ocho píxeles. Y básicamente todo tu contenido va a tener un posicionamiento estratégico de deuda. Y en los próximos videos que voy a crear en esta clase, realidad voy a mostrarte que con diseño real, vamos a hablar de ritmo horizontal, vertical. Y voy a usar estos componentes prefabricados que creé a partir de una de mis clases anteriores, solo para mostrarte cómo va a quedar tu layout y tu ritmo vertical va a quedar como en XD. Entonces te veré ahí. 68. Ritmo horizontal: En este video, vamos a hablar ritmo horizontal en Adobe XD en lo vamos a hacer usando su increíble característica llamada stack. Entonces tengo un proyecto abierto, y este proyecto es en realidad de una de mis clases llamada Adobe XD masterclass. Si te interesa, puedes encontrarlo y verlo. Tiene más de 20 h de largo. Y todo lo que ves aquí mismo en este documento que realmente creamos en esta clase. Entonces, si te interesa, solo echa un vistazo y tal vez explora cómo crear todos estos elementos. Pero en esta clase, solo vamos a enfocarnos en el ritmo horizontal en Adobe XD usando pilas. Si elijo uno de estos tableros de arte, por ejemplo vamos con este, por ejemplo, presione Control D. Y voy a crear un duplicado del mismo, y lo voy a mover hacia un lado. Así que no distrae en algún lugar por aquí. Y solo quiero mostrarte el poder de las pilas. Las pilas se encuentran justo aquí a la derecha. Y básicamente lo que es es solo imaginar que posicionas muchos de tus componentes, que ya tienes muchos de tus elementos dentro de un grupo. Y entonces estás creando estas pilas, que en realidad son espacios o canaletas, si quieres, para tu diseño. Ahora, las pilas son geniales porque puedes crearlas para que sean horizontales o verticales. Entonces, en este caso, exploremos cómo funciona eso. Entonces como dije, tenemos las pilas y si salto aquí mismo, ya tengo una pila incluida. Es pila horizontal de dos O2, así que básicamente 202 píxeles, pero puedo saltar dentro aún más y luego hacer los cambios de esa manera. Porque tengo este diseño aquí mismo. Tengo 12 columnas. El ancho de canalón es 60, ancho de columna es 82, y los márgenes enlazados a, izquierda y derecha, R1, 38. Entonces estos son la grilla y el sistema de cuadrícula que se utilizan para crear este diseño y toda esta clase que estás viendo aquí mismo. Entonces obviamente tenemos dos O2 aquí mismo porque esto encaja con el ancho de la columna oral. Si salto aquí mismo, lo que puedes hacer es poner este texto en un grupo, este texto en un grupo, y este botón está en un grupo en sí. Y luego puedes crear stack para ello. Entonces, si selecciono mis pilas, se puede ver que lo sabe. Quiero una pila vertical y se puede ver que son 40. Entonces todos los espaciamientos son 40 en este caso. Entonces 40 aquí mismo, 40 aquí mismo. Pero, ¿qué pasa si quieres cambiar esto para que sea más así simplemente puedes hacer clic y arrastrar para posicionarlo para que sea 80, por ejemplo, así que es 80 aquí mismo y es 40 aquí mismo. Puedes hacerlo si quieres o si no, si tu cliente te lo pide, por ejemplo Hey, cambiemos el espaciado aquí mismo. Simplemente puedes saltar intrasite 60, por ejemplo, asegura de mover esto en el centro y ahí vas. Entonces me gusta mucho este diseño y siempre puedes cambiar entre tus pilas verticales y horizontales si quieres hacer eso. Entonces coloquemos esto en el centro y quiero mostrar cómo funciona eso. Entonces por el momento, tenemos esta pila, que es la pila horizontal de dos O2. Pero si hago clic aquí mismo, como pueden ver, va a cambiarlo a pila vertical. Ahora bien, este diseño no cambió porque no pusimos todos estos elementos en una pila. Entonces, si te muestro que tenemos esto, esto, esto, y vamos a incluirlo todo en realidad. Entonces, si golpeo justo aquí y golpeo justo aquí, todo el camino hasta nuestro texto. Mantenga presionada la tecla Mayús, selecciónela toda, presione Control G para ponerlas todas en un grupo luego incluirlas en una pila. Y luego por ejemplo veamos realmente, así que esto es 150 entre ellos. Entonces posicionemos eso para que sea una quinta parte si queremos. Ya es a las 01:50. Así que vamos a posicionarlo de esa manera. Y todos nuestros elementos ahora van a ser posicionados a las 01:50. Ahora bien, no incluyó eso porque aquí no teníamos 150. Entonces si vuelvo y reduzco esto a cero o retrocedo una vez más, va a estar en cero porque aquí tenemos 150. Tenemos 150 aquí. Y para todos estos, pero no tenemos 150 entre esto y el pie de página. Entonces, una vez más, esta es la excelente manera de usar stacks en Adobe XD para crear tu ritmo. Si estás luchando con tu ritmo, básicamente la regla general es doblarlo o triplicarlo como quieras incluirlo. Entonces básicamente, digamos que estoy usando 40 aquí mismo. Si quiero mover los espacios entre, digamos mi imagen y mi texto debajo de mi imagen. Entonces voy a usar algo como 60, 80, o uno veinte o algo así. Entonces solo multiplica tus valores. Siempre puedes doblarlo o tripletes si no estás seguro cómo usarlos y simplemente cuando encuentras algo que funciona, que se ve genial, que nuestros clientes aprobaron, por ejemplo o que simplemente piensas se ve visualmente atractivo que simplemente ir con eso y seguir adelante con eso. Pero empieza y asegúrate de tener espaciamientos de coherencia. Asegúrate de tener valores coherentes. Entonces, lo que eso significa básicamente es que si has elegido AT, luego quédate con AT, no vayas por tu manera intentar, digamos incluir aquí, 60 aquí para ti porque tu diseño va para descomponerse, sus espaciamientos no van a ser coherentes. Tu diseño no va a parecer coherente, y por lo tanto va a ser una pesadilla para tus desarrolladores lo desarrollen más tarde porque simplemente puedes decirles, Bien, espaciamientos entre e.g H1 y mi imagen son 40. Ellos lo sabrán e incluirán eso dentro del código para todos tus diseños. Así que solo asegúrate de ser consistente, lo más consistente posible. Entonces, si recién estás comenzando porque esta clase está pensada para realmente los principiantes. Si recién estás comenzando, asegúrate de que cuando crees tus primeros elementos, si quieres, cómo se ve, asegúrate de usar tus tallas a lo largo de tus diseños. Porque como dije, va a ser mucho más sencillo para que recuerdes lo que has usado anteriormente para todos esos espaciamientos. Y va a ser mucho más sencillo para tus desarrolladores desarrollarlo porque verán tus espaciamientos mucho más fácilmente. Si volvemos a XD, lo que quiero mostrarles cuatro al final es básicamente que se pueden posicionar estos en una pila. Entonces ya te dije si hacemos clic aquí mismo, puedes ver que tenemos dos O2 aquí mismo, lo cual obviamente es demasiado. Entonces lo que puedes hacer es hacer clic aquí y luego dar clic aquí y arrastrar o puedes ajustar manualmente. Entonces digamos que quiero ponerlo a 18. Y así es como se ven los datos. Así puedo saltar aquí mismo y cambiar esto para que sea así. Y la gran característica de las pilas es que puedes hacer doble clic aquí mismo y organizarlas. Entonces, si esto no me gusta, simplemente puedo cambiarlo. Entonces posicionado es estar en la parte superior, esto para estar en la parte inferior. Y simplemente puedo ir atrás y adelante entre esos elementos, lo que también puedes hacer es hacer eso dentro de las pilas horizontales. Entonces estamos en pila horizontal si por alguna razón quiero poner esto aquí mismo. Como puedes ver, X d lo va a cambiar fácilmente, pero no va a alinearlo. Necesito alinearlo aquí mismo porque esta imagen va todo el camino hasta aquí. Si va la imagen o donde está mi cuadrícula, entonces simplemente va a alinearla a ese valor. Se puede ver lo sencillo de usar. Estas pilas son, lo geniales que son, lo fáciles que son de usar con tu ritmo. Puedes usar la cuadrícula de repetición en Adobe XD, pero realmente preferí mucho más usar pilas porque te dan mucho más control sobre tu diseño de tu diseño y sobre tus espaciamientos. Entonces básicamente eso es todo para Adobe XD y me gusta mucho usarlo. Realmente te animo a que lo uses. Y si no la has usado o no la has probado, asegúrate de hacerlo porque tienen la versión gratuita y siempre puedes usar esa versión gratuita, no tienes que pagarla. Si no estás seguro al respecto. Si quieres explorar un poco más alerta y Figma aprendió boceto, por ejemplo I. Realmente animarte a probar Adobe XD, pruébalo, y prueba todos estos valores. Y claro, voy a dejar los enlaces a todo lo que mencioné en esta clase. En el archivo PDF, simplemente puedes abrirlo, hacer clic en él, y te va a llevar a todas estas cosas para que no tengas que buscarlas tú mismo. 69. ASIGNACIÓN de la SECCIÓN 8: Tu tarea para esta sección es solo jugar con diferentes cuadrículas. Asegúrese de intentar crear, digamos una cuadrícula de escritorio, una cuadrícula tableta y una cuadrícula de teléfono. Y tratando de incluir diferente cantidad de columnas con diferente cantidad de un ancho de canalón, por ejemplo y el ancho de columna. Solo trata de jugar y tratar ver diferentes resultados que vas a obtener. También juega con el color de las columnas reales. Y sólo para ver qué funciona mejor para ti. A lo mejor para algunas personas, el azul funciona mejor. Para algunas personas leen, funciona mejor para algunas personas, negro funciona mejor solo por su visión. Intenta entender lo que funciona para ti. Trate de practicar y vea por qué estas características son tan importantes una vez que realmente empecemos con el diseño. 70. SECCIÓN 9 Tipografía y emparejamiento de fuentes: Una de las partes cruciales de cualquier tipografía de diseño está ahí junto con imágenes para contar una historia. Y cuanto mejor impacto tenga la topografía en tus usuarios, mejor se va a contar la historia junto con las imágenes. Entonces en esta sección de la clase, vamos a hablar de tipografía y sobre todo de emparejamiento de fuentes. Cómo emparejar tus fuentes de diferentes maneras. Y ¿cuáles son algunas fuentes diferentes que puedes emparejar? Entonces comencemos. 71. Typefaces VS: Uno de los principales errores que veo que cometen los jóvenes diseñadores es que están llamando fuentes, tipografías, lo cual no es realmente cierto. Typeface es realmente una familia de fuentes. Y la fuente es solo una variación dentro de esa familia. Déjame darte un ejemplo rápido. Imagínese que está usando la fuente Roboto, por ejemplo, y luego dentro de la otra fuente de agua, tiene bolt, regular, tin, ultra bold. Todas estas son fuentes, pero el informe en sí es una fuente. Familia endeudada son los conceptos erróneos clave que tienen los diseñadores. Están tratando de empujar esta noción de que la fuente lo es todo cuando realmente no lo es. Lo que puedes tener son diferentes tipos de variaciones de fuente dentro de la unifamiliar o una botella es muy buen ejemplo porque tienes Roboto regular, Roboto normal y luego tienes algo llamado roboto slab, que es tomar completamente fuente, líneas realmente gordas, y realmente se usa para imprimir principalmente, pero también puedes usarlo en algún tipo de diseño web audaz. Pero ese es el punto aquí mismo. No intentes confundir fuentes con familias de fuentes porque las familias de fuentes pueden tener varias fuentes diferentes dentro de ellas. Y las fuentes son solo variaciones dentro de esa familia de fuentes. Como dije, puede haber múltiples fuentes dentro de una unifamiliar. Así que solo tenlo en mente y no te confundas. Puedes usar toda la familia o fuente dentro de tu diseño, o simplemente puedes usar una variación como, digamos en este ejemplo, Roboto regular o Roboto bold. Vamos a llegar a ello en tan solo unos videos en esta clase. Pero solo quería señalarlo. 72. Tipos de fuentes: A menudo cuando entrevisto a jóvenes diseñadores sobre cuando hablo con ellos, realmente no saben cuál es la diferencia entre Serif y Sans Serif cuando se trata de fuente, es realmente súper simple. Y seguí adelante y encontré un artículo realmente bueno. Voy a vincularlo en el archivo de recursos de clase. Así que asegúrate de comprobarlo y leerlo por ti mismo porque no vamos a profundizar demasiado en este video, pero solo quiero mostrarte rápidamente cuáles son las diferencias entre las serifs, sans serifs, y cuando se usa cada una de ellas. Entonces aquí tenemos ese artículo que mencioné y es de adobe.com, diseño de Creative Cloud descubre. Y voy a dejar el enlace a este artículo, como dije en los archivos de recursos de clase. Así que puedes ver algunos ejemplos aquí mismo. mejor esto no busca distinguirte. A lo mejor viste fuentes como estas. A lo mejor viste fuentes como estas. Pero, ¿cuál es realmente la diferencia entre Serif y Sans Serif? Entonces aquí tenemos la pista en el nombre y la principal diferencia entre estas fuentes. Entonces estas cosas al final de la carta en sí son surf. Y puedes ver aquí mismo, no los tenemos que surfear de arena, si no me equivoco, eso es francés. Entonces sin estas serifs al final. Entonces esa es la principal diferencia entre serifs y send serves. Ahora, cuando los puedes usar, puedes ver cuándo usar fuentes serif. Entonces va a ir realmente a fondo sobre cuándo usarlos y cómo usarlos. Los puedes ver impresos aquí mismo. Así que asegúrate de revisar este artículo para conocer más sobre él. Y por supuesto, puedes explorar más sobre cuándo encontrarlos. Pero en pocas palabras, cuándo usar serifs y sensores, es realmente súper simple. Es, todo se reduce al tema de tu diseño y a la dirección de diseño de tu diseño y para qué estás diseñando. Entonces por ejemplo, si estás diseñando diseño de sitios web atrevidos, tal vez algo nuevo , algo fresco, algo para la generación más joven no vas a usar serifs, que son las fuentes con esas cosas. Al final de cada letra, vas a usar fuentes sans serif porque las fuentes Cera realmente se atribuyen a algo que es viejo. Y si estás diseñando para algo que es viejo, por ejemplo, estás haciendo algún tipo de sitio web vintage o estás haciendo algún tipo de exhibición de autos antiguos tal vez o algo que resolvieron. Entonces vas a usar las fuentes Serif, que tienen esas cosas al final de las letras. Pero generalmente la regla general es que si no estás diseñando para algo que es tradicional, que es elegante, que es viejo, entonces vas a usar estas fuentes sans serif porque estas son fuentes más modernas y más disponibles para usar, especialmente en diseño web, porque están trabajando en línea y están optimizadas para trabajar en línea, para legibilidad, para accesibilidad, para escalabilidad, por todas estas razones, las fuentes sans serif son mucho mejores de usar, especialmente en el diseño de sitios web. Pero como dije, aún puedes encontrar miles de fuentes serif diferentes si quieres usarlas en tu diseño web o diseño de aplicaciones. Todo esto depende de tu tema, para qué estás diseñando, quién es tu público objetivo y qué intentas transmitir, qué tipo de emoción, qué tipo de satisfacción con la fuente usted está eligiendo. Así que solo ten esas cosas en mente cuando estés diseñando para la web. 73. Pesos de fuentes y cómo usarlos: Cuando empiezas a usar una familia de fuentes, dependiendo de la familia misma, verás que tiene muchas fuentes diferentes en su interior, las cuales están etiquetadas con diferentes nombres como regular teen bold, extra bold, italic, negrita, cursiva y muchos, muchos, muchos más, dependiendo de la familia de fuentes en sí. estos se les llama pesos. Y cómo usar estos pesos en diferentes escenarios. De eso vamos a hablar en este video. Y voy a mostrarte un ejemplo y darte solo una idea de dónde usarlos. Entonces aquí está el ejemplo, y estoy en Adobe XD, este es el archivo de diseño de uno de mis cursos anteriores, y solo lo uso como ejemplo solo para mostrarte todos estos diferentes pesos de fuente y cómo usar para acentuar lo que quieres mostrar en tus diseños. Entonces lo que tenemos aquí dentro de la sección de héroes, si lo selecciono y vengo aquí mismo al lado derecho. Así que déjame elegir ésta. Ahí vamos. Se puede ver que el nombre de la fuente es Abierto. Sans, la talla es 24 y el peso es regular. Entonces, ¿por qué es regular? Bueno, porque solo me gustaría que la gente viera esto primero, que obviamente es más grande, más pronunciado y tiene diferente color. Eso se llama punto de atención porque quiero señalar primero su atención a este texto blanco, porque quería que primero leyeran este texto. Por lo tanto, quiero que se vea diferente a este texto en la parte superior e inferior mientras están aquí en el centro leyendo esta heroína es hotel boutique. Quiero que vea que hay otro texto arriba y abajo. Y luego quiero leerlos. Quiero que lo lean porque están ahí. Entonces, si voy y rápidamente lanzo el prototipo aquí mismo, puedes ver cómo se ve eso. Entonces aquí estoy en la sección de héroes y todo lo que pueden ver es esto. Entonces tu ojo se siente naturalmente atraído a la mitad de esta página, a la mitad de esta imagen. Y puedes leer este hetero significa hotel boutique después de la deuda. Se puede ver todo lo que hay otros textos ahí. Bienvenido al hotel boutique de Halloween. Bien, tu casa, lejos de casa. Entonces ese es el peso de la fuente. Así es como usarlos. Y puedes notar que esta fuente se ve diferente. Se puede ver que es serif, como mencionamos en un video anterior. Entonces, ¿por qué es eso? Porque la marca de este hotel y de este diseño realmente lo requiere. Y por eso fui por este tipo de look. Entonces si elijo eso, puedes ver que se llama Playfair display 70, que es el tamaño de fuente, mucho más grande en este caso. Porque sin mencionar, de nuevo, todas estas cosas que mencioné, sino para llamar la atención sobre ello. Y entonces se puede ver frío negrita, cursiva es el peso. Es Itálica. Entonces es un poco inclinarse hacia el lado derecho y es audaz. Es más pronunciada que en fuente normal. Así es como puedes equilibrar tus pesos de fuente en muchos ejemplos diferentes. Y si nos desplazamos un poco hacia abajo, se puede ver una vez más, aquí está esa misma fuente ahora en un color diferente para lograr el contraste entre fondo blanco y la propia fuente. Y puedes ver tu hogar lejos de casa. Entonces, una vez más, vamos a volver a ese lemas quizás. Entonces puedes ver algo realmente interesante aquí mismo. Entonces, si selecciono este, puedes ver que es Open Sans 24 bolt. Y si selecciono este, Open Sans 24 regular. Y se puede ver con sólo seleccionar perno y regular y elegir diferente color, estoy apuntando su dirección hacia y señalando su atención en una dirección diferente. En este ejemplo, pueden ver, he querido leer este subtítulo porque es muy importante. Quiero que su mente solo preste atención a estas tres cosas. Así que camas king size, comida incluye acceso a la playa porque estos son puntos clave de venta realmente importantes para este sitio web en particular para atraer nuevos visitantes para que acudan a él. Y luego si quieren, claro, pueden leer el texto debajo de él. Entonces por eso este es audaz y este es regular. Este tiene un color un poco más oscuro que este porque quiero que primero sus ojos se vean atraídos por este texto. La misma historia como con esta y con esta de aquí mismo. Si nos desplazamos un poco ahora, podemos ver los mismos textos aquí mismo. El hotel boutique Headwinds está bien. Y aquí tenemos una cotización de uno de nuestros clientes anteriores a este sitio web o un testimonio, puedes ver a Jenny desde Londres, pero esta es mucho más pronunciada. Es mucho más grande. Entonces si lo selecciono y vengo aquí mismo, puedes ver que es Open Sans 36 italic. Y tiene este color más oscuro que este, que es Open Sans 24 irregular. Entonces, una vez más, quiero que lean primero la cita y luego vean de quién es la cita. El nombre en este caso, realidad no importa demasiado. Puedes deshacerte de él para las segues de diseño. No importa lo que importa es su experiencia con este hotel, porque el próximo cliente que intentas adquirir para tu hotel va a querer ver esa experiencia primero. Realmente no me importó, ¿es la marca de Jenny, es quien sea? Realmente no les importa, realmente les importa la experiencia. Y luego se puede ver el contraste debajo de él con el botón libro ahora, que es azul y tiene texto blanco en su interior. Una vez más, por el bien del contraste, si nos desplazamos un poco hacia abajo, se puede ver esto a lo largo de este diseño. Y no sólo este diseño, sino cada uno de los diseños que creo. Porque siempre pienso en estas cosas. ¿Qué es más importante? ¿Qué es menos importante? ¿Qué va a ver la gente primero? ¿Y cómo puedo acentuar eso con mis fuentes y pesos de fuente? Se puede ver aquí mismo. Entonces, para los nombres de la habitación, fuente es mucho más grande que todos estos abajo. Y se puede ver esto con las características, sí y no. Por supuesto, entonces estamos eligiendo diferentes colores para mostrar qué características están disponibles, cuáles no. Y luego tenemos los diferentes estilos una vez más con el siguiente enlace. Entonces aprende más, pueden hacer clic en ese enlace, es diferente. Entonces, cuando los, cómo están, van a ver el cambio. Entonces hay que pensar en todas estas cosas. Aquí. Se pueden ver las características. Entonces tenemos alberca privada, tenemos hermoso jardín, contamos con estacionamiento privado. Todos estos son súper fáciles de leer que con un propósito. Por eso elegí esta fuente, que es mucho más grande, que es un poco diferente, que es boulder, tiene un color más oscuro que la fuente debajo de ella. Una vez más, estaba usando Open Sans como fuente principal. Este de aquí mismo, y Playfair muestran para esta fuente grande en negrita. Una vez más, si nos desplazamos un poco hacia abajo, puedes ver que esto vuelve a suceder. Entonces visita Delos, que es el título, y este es el texto. Entonces, si no quiero leer este texto, todo lo que puedo ver y todo lo que necesito saber realmente es visitar Delos. Entonces hay algo que hacer en las exhibiciones. Y si nos desplazamos un poco hacia abajo, una vez más, reserve su estancia con nosotros. Por lo que realmente los invita a reservar su estancia con este lugar. Y una vez más, se puede ver este contraste aquí mismo sucediendo con el fondo blanco y este texto gris oscuro. Y último ejemplo es suscribirse a boletines informativos. Entonces realmente te está llamando a la acción, a tomar acción. Y entonces esto es lo que ves. Primero, inscríbase a un boletín. Esto es lo que ves en segundo lugar, y eso es una vez más con un propósito porque quiero pronunciar esto, apúntate a un boletín porque esa es la acción que quiero que tome. Y luego una vez tengo su atención con suscribirse a newsletter, registrarse y recibir noticias y actualizaciones y bla, bla. Eso es realmente secundario porque quiero que se queden en esta parte de la página el mayor tiempo posible. Entonces así es como puedes usar fuentes, formas de fuente y diferentes colores, y tal vez incluso diferentes familias de fuentes para acentuar lo que quieres que tus usuarios vean en tu página. Puedes explorar esto con muchos más detalles. Y dependiendo de tu esquema de color para tu proyecto, esto puede ser realmente aún más complejo o incluso más simple que el ejemplo que acabo de mostrarte, que solo tiene algunos colores en él. 74. Elige fuentes: A la hora de elegir fuentes para tu proyecto, realmente hay dos consideraciones principales. Deberías tener fuentes existentes y el tema principal del proyecto, las fuentes existentes son obviamente las fuentes que tu cliente estaba usando anteriormente. Entonces puedes echar un vistazo a esas fuentes. Ver toda la familia de fuentes, ver lo que tiene dentro, y tal vez pensar en cómo se puede acentuar un poco más. De lo que hablamos en un video anterior de esta clase. ¿Cómo puedes usarlos un poco diferente para mostrar algunas características principales del producto o un servicio que tu cliente está ofreciendo? Y luego puedes echar un vistazo a los colores, ver cómo se utilizó anteriormente esa familia de fuentes con estos diferentes colores. Quizás si tienes la capacidad de hacerlo, tal vez puedas cambiar esos colores. Tal vez puedas incluir algunos colores más oscuros o algunos colores más claros. Tal vez puedas agregar tonos de estos diferentes colores que ya están usando o introducir nuevos colores completamente al proyecto para darle más vida y traer más adeptos al proyecto en la que estás trabajando. La otra forma de hacerlo es con nuevas fuentes. Y cuando estés eligiendo nuevos fondos, asegúrate de prestar atención a lo que ya mencioné en uno de los videos anteriores. Considerado del proyecto en sí. Obviamente, no vas a usar estas fuentes atrevidas, brillantes y extravagantes. Si estás haciendo sitio web para un banco, tal vez porque el banco está tratando transmitir un sentimiento de confianza, de seguridad, de estabilidad. No conozco nobleza en algunos casos. Entonces quieres ponerle atención a eso. ¿De qué se trata tu proyecto? Qué es lo que se intentó transmitir a los propios usuarios. Entonces, por lo tanto, hay que usar estas fuentes que van a corresponder bien con el equipo del proyecto. Por supuesto, si el proyecto está bien, digamos que estás haciendo un sitio web para compañía de cómics o juguetería o cualquier tipo de contenido relacionado con niños como juegos o rubores o muebles, lo que sea que tenga que ver con los niños. Pero incluso con los niños, todavía hay algunos límites cuanto a cuándo puedes usar ciertas fuentes, cómo puedes usarlas. Debido a que la heredabilidad es realmente la clave, especialmente en línea, quieres asegurarte de que tus fuentes sean legibles al final del día, sin importar quién sea tu público objetivo, no importa si es serio o juguetón, si es colorido, todo monocromático, todavía quieres poder saber si es legible o no. Y cómo puedes hacerlo es probarlo en diferentes dispositivos. Cuando creas un sitio web, por ejemplo, tienes que probarlo en pantallas grandes como pantallas de escritorio y pantallas de portátiles, pero también tienes que asegurarte de que funcione bien y que sea legible en los más pequeños pantallas como Formularios. Si estás usando algo como Webflow, es súper fácil de hacer. Simplemente crea una página responsive a partir de tu diseño y simplemente envíate el enlace, quizás envíale ese enlace a alguien que sea mayor, el nuevo tal vez, y mira si pueden leer fácilmente si el color el contraste es bueno, si los pesos de fuente son buenos, si tu ritmo de color es bueno. Así que realmente lo pueden leer. Ellos realmente lo pueden entender, y pueden ver lo que estabas tratando transmitir en esa página en particular. Así que asegúrate de probar siempre, asegúrate de pensar siempre por adelantado. ¿Con quién hablas? ¿Con quién hablas? ¿Quién es tu público principal? ¿Y las fuentes son legibles usando estos colores en este contexto? 75. vincular fuente: A veces en algunos ejemplos, quieres usar diferentes familias de fuentes, como en el ejemplo que te mostré anteriormente con ese sitio web de viajes. Tal vez quieras mostrar una sección diferente de esa página o una aplicación móvil usando cierta familia de fuentes. Y luego otra sección, tal vez quieras que sientan que están leyendo un artículo. Por lo tanto, no vas a usar alguna fuente loca y loca. Solo quieres sumar una fuente vieja normal y simple que sea realmente legible, comprensible y súper fácil ver y leer para ellos. Entonces, por lo tanto, tienes que saber sobre emparejamiento de fuentes y ¿cómo puedes emparejar fondos? Bueno, existen diferentes herramientas en línea que pueden ayudarte con eso. Y voy a mostrar algunos en este video en particular. Entonces aquí estamos con el primero de estos tipos de frío aspiración. Y ya creé un video de YouTube. Voy a vincularlo en los recursos de clase. Simplemente puedes hacer clic y ver ese video completo donde te explico todas estas diferentes herramientas. Pero sólo voy a darte una visión general rápida. En este video en particular, tienes inspiración y tienes guías, guiándote cómo emparejar estas diferentes fuentes. Una vez más, todo se reduce a lo que ya se menciona algunas veces en este video, el tema de tu proyecto y el público con el que intentas hablar. Entonces, por lo tanto, no vas a usar algunas fuentes locas como sigue mencionando a los banqueros, por ejemplo o alguna audiencia seria. Pero puedes ir al revés con niños y usar algunos colores más juguetones y usar algunas fuentes más juguetonas. Así que la inspiración tipo es el primer sitio web y puedes elegir muchos estilos diferentes. Se puede ver Open Sans y crema. Algunos textos son las fuentes utilizadas aquí mismo. Estos son los colores. Puedes elegir diferentes colores de. Aquí puedes elegir fuentes de encabezado, puedes elegir fuentes de cuerpo. La fuente de encabezado es esta de aquí en la parte superior, que se usa para encabezados o para títulos. Y la fuente body es esta de aquí mismo, que se usa básicamente para párrafos y para todos los contenidos que tiene más texto en ella. Y está más pensado para tarifas más largas. Básicamente, los títulos son más glándulas, pero también puedes leerlos y Atlanta muy rápido, pero párrafos, realmente puedes tener que dedicar tu tiempo a leerlos. Y ese es el punto principal aquí mismo. Con párrafos, puedes explorar con varias fuentes y pesos de fuente diferentes. Pero con párrafos, quieres asegurarte de que tu fuente sea legible, que el color tenga un bonito contraste contra el fondo. Y realmente no es demasiada tensión en tus ojos pasar más tiempo leyendo este artículo, especialmente si hay un artículo más largo, si estás haciendo un sitio web para, para noticias, por ejemplo eso es sumamente importante. Ese es el problema clave que debes abordar primero y de inmediato en ese proyecto en particular, porque el objetivo de un sitio web de noticias es que la gente pase mucho tiempo leyendo estos artículos. Por lo tanto, quieres tener una gran fuente que sea realmente legible. Y estos títulos que son realmente mirables porque no quieres que destaquen demasiado, sobre todo en ese tipo de sitios web, porque quieres que sigan moviéndose hacia la lectura estos artículos abajo. Así que explora este sitio web. Como dije, voy a señalar el video que ya creé en mi canal de YouTube todo sobre estas cosas. Y esto lo explico con más detalle. Y voy a dejar los enlaces en ese video, así que asegúrate de comprobarlo. El par de fuentes es otro. Así que puedes ver aquí mismo tenemos losa sans serif serif. Entonces puedes ver que es una especie de grasa monoespacio Display Handwriting. Así que hay un montón de estos diferentes estilos de fuente que puedes elegir. Y puedes ver todas estas Fuentes importantes y fuente principal. Puedes ver combinaciones aquí mismo, puedes ver más emparejamiento de fuentes. Así que vamos a elegir fuentes de visualización y te va a mostrar todas estas fuentes de visualización. Puedes explorarlos. Entonces tenemos esto, que son maridajes de fuentes, punto py people.com. Puede seleccionar una familia de fuentes aquí mismo. Y luego después de hacer eso, puedes elegir diferentes estilos de textos y el estilo. Entonces esto es regular, esto es negrita, esta losa textos secundarios, que es ese párrafo textos que acabamos de mencionar. Y luego te va a dar emparejamientos disponibles. Y por último, font joy, que es súper, súper simple de usar. Entonces tenemos Generar y va a generar un emparejamiento de fuentes diferente. Puedes elegir más contraste, o puedes elegir más similitud o contraste equilibrado. Puedes ir entre blanco y negro para ver cómo va a quedar. Especialmente si estás diseñando un modo oscuro en tu sitio web o tu aplicación, entonces puedes ver emparejamientos de fuentes y diferentes tamaños de texto, diferentes pesos y así sucesivamente y así sucesivamente. Entonces aquí tenemos a Montserrat, que es ésta de aquí. Aquí tenemos esta fuente maqueta de Varney, que es esta de aquí. Por lo que se puede ver H1, H2 y párrafo o encabezamiento uno encabezado dos párrafo o un título principal , subtítulo y párrafo. Sánchez es el texto para el propio párrafo. Para que puedas hacer clic. Te va a llevar a las fuentes de Google, que es lo que esta fuente Sánchez es cuatro. Y entonces puedo dar click aquí mismo y puedo elegir, no sé, a lo mejor éste sólo para ver cómo se ve. Si no me gusta, va a seguir adelante y cambiar estos. Entonces digamos, en realidad no me gustan estos ni este. Quizá pueda ir con algo un poco más brillante como éste. Puedo cerrarlo aquí. Y va a bloquear a esta Montserrat. Realmente no me gusta este, así que puedo seguir adelante y generar más. Se ve que Montserrat está encerrada, quizá me guste esta, pero no me gusta esta. Podemos llegar al grano. Todavía puedes desplazarte todo el camino hacia abajo. Y al final, cuando encuentres la combinación de fuentes perfecta que quieras usar, como te mencioné, puedes dar click aquí. Te va a llevar a las fuentes de Google. Asegúrate de descargar la familia de fuentes Montserrat in Montserrat, luego córtalas. Y pilón Quinn en este ejemplo en particular, asegura de descargarlos todos, los instaló en una máquina. Entonces tienes todos estos diferentes pesos de fuente, como mencioné, negrita regular, y mucho más. Ahí vas. Así de fácil es par de fuentes. Asegúrate de prestar atención a lo siguiente, al contraste, a la legibilidad y al tema para lo que estás diseñando en primer lugar. Obtienes todos estos ordenados. Entonces va a ser muy fácil de diseñar y apenas va a ser fácil de probar. Y hablando de pruebas, asegúrate de probar siempre con tu audiencia, especialmente si tienes acceso a ellas. Entonces, por ejemplo, si estás diseñando para niños, tal vez puedas tener acceso a niños y tal vez puedas tener acceso a niños y ver cómo interactúan con el prototipo, cómo interactúan con el sitio web, con la aplicación móvil. Es fácil para ellos entender dónde necesitan hacer clic o están tropezando con estos diferentes elementos de su diseño puede ser algo que está arrastrando demasiada atención de ellos? O si estás trabajando con el público mayor, tal vez como sigo mencionando a los bancos, quizás tengas acceso a la gente que está trabajando en el banco. Si estás trabajando para un banco en este caso en particular, tal vez puedas probarlo con ellos, darles una tarea concreta, ver lo fácil que es para ellos encontrar esa tarea, qué fácil es para ellos para navegar por tu app y lo fácil que es para ellos leer el texto que intentas mostrar en esa página en particular. 76. Escala de fuentes: Cuando estás diseñando para la web o para aplicaciones móviles, quieres tener escalado consistente a través de tus tamaños de fuente y pesos de fuente. Y esto se puede lograr con una escala de fuente. Puedes crear escala de fuente, por lo que es mucho más fácil para los desarrolladores más tarde entender qué tipo de tamaño de fuente es para qué, y eso es lo que puedes incluir en tu guía de estilo, solo para mostrarlos junto a tu colores, junto a tus imágenes, tus estilos y mucho más. Entonces en este video, te voy a mostrar cómo crear una escala de fuente fácil. No hay que usar este enfoque. Puedes encontrar otros enfoques en línea. Hay literalmente docenas de enfoques diferentes en línea. Vea cuál funciona para usted, su proyecto y sus propósitos de escalado. Así que comencemos. Entonces aquí estamos en Adobe XD y solo voy a mostrarte cómo crear una escala de fuente rápida usando Adobe XD. Si estás usando Figma Photoshop, lo que sea que puedas crear eso ahí. Pero para ello, voy a usar x D porque me gusta mucho y lo uso todos los días. Entonces voy a hacer clic en T para crear H1 por ejemplo entonces lo que voy a usar es, digamos una botella así. En lugar de regular, voy a ir con, digamos negro. Y voy a ir con talla de 80. Así que realmente enorme. Y este va a ser mi H1. Quizás, tal vez incluso mayor, tal vez 88, algo así. Ahí vamos. Entonces voy a golpear Control D o Comando D, y bajar esto a tal vez a algo así como 64. Ahí vas. En vez de negro, voy a ir con perno. Y en vez de H1, voy a llamarlo H2. Entonces, lo que se crea aquí mismo es una clara distinción entre Heather, Heather hasta aquí. El uno es algo que voy a usar en mis imágenes de héroe, por ejemplo, en el centro del diseño mismo, en el centro de estas imágenes de héroe. A diferencia del ejemplo que te mostré anteriormente. Pero esto es simplemente más acentuado, grande, más audaz, negro en este caso, pero este es audaz porque tal vez quiera usarlo tal vez como título de mis secciones tal vez o algo así. Entonces, por lo tanto, es audaz y no negro y es 64 88. Entonces, si bajamos un poco más, puedes crear un H3 en este caso. Y en vez de 64, tal vez podamos usar 48 para este caso. Y en lugar de perno, en realidad no, mantengámoslo audaz para esto. Entonces si bajamos un poco, podemos crear algo como H4. Y en vez de 48, tal vez podamos ir con 40, en este caso n. Vamos a usar irregular esta vez. Por lo que se puede ver claramente la distinción entre estos. Entonces si bajamos un poco H5, y en este caso tal vez podamos usar algo, no sé, 24. A lo mejor, ahí vamos. Quizás podamos usar esto como texto de párrafo o algunos ejemplos o algo así, algo que es un poco más pequeño y H6, vamos con, no sé, 16 tal vez en mis casos son realmente no quiero ir más allá de 16. Entonces tenemos H1, H2, H3, H4, H5 y H6. Quizás puedas renombrarle el nombre este H6 y llamarlo textos de párrafo. Quizás puedas mostrarle algo así a tus desarrolladores, ver lo que piensan. Y lo que también puedes hacer es golpear Control D Una vez más en cada uno de estos y escribir alfabeto. Entonces a, a, B, B, B, C, C, D, D, E, y así sucesivamente y así sucesivamente. Así que puedes escribir todo el alfabeto y mostrar peso de la fuente y el tamaño de fuente en este ejemplo en particular sobre el alfabeto, o algo más que puedas hacer es puedas usar algo como, No sé, texto de Lorem Ipsum o algo así. No tengo el atajo de teclado aquí mismo, y no tengo el plug-in instalado aquí mismo. Entonces vamos con esto. Entonces Lorem Ipsum ROC se reunió, tal vez pueda copiar este texto y luego pueda hacer lo mismo con este. Simplemente pegarlo. Y lo que esto te va a permitir es mostrarle a tu cliente y a tus desarrolladores cómo va a quedar el texto en particular en casos de uso particulares. Entonces digamos que a propósito comencé con este color en particular. Y la razón por la que elegí hacerlo es solo para mostrarte las principales diferencias entre este texto. Pero en este caso en particular, lo que haría a propósito es que rápidamente seguiría adelante y cambiaría este color a algo mucho, mucho, mucho más oscuro. Y tal vez guárdala aquí mismo como muestra de color. O puedo seguir adelante y editar aquí mismo a mis colores. Entonces lo que puedo hacer es. Deshazte de éste. Quizás pueda seguir adelante y elegir el mismo color, pero ir unos pasos hasta algo así, luego elegirlo para que sea de color diferente. Lo que puedes hacer es dar los nombres de tus muestras de inmediato. Entonces este es de color H2. Ahí vas. Este es H1. Y tal vez podamos ir aún más lejos. Lo siento, vamos a guardar esto como un H2. Para que pueda volver atrás y usar el H12 y luego ir un paso arriba, algo así. Guárdalo aquí mismo, guárdalo aquí mismo. Llama a esto h tres. Ahí vamos. Y luego por fin, a lo mejor quiero ir con algo aún más brillante. Para este, quizás, tal vez no, pero todo depende realmente de ti. Quizás algo así. Ahí vas. Y le puedo dar un nombre de H4. En este caso particular, se puede ver que son realmente similares. Pero ahí está el punto de este video, pero tus clientes quizás tengan el color principal, digamos que el azul son sus colores principales. Entonces en este caso, podemos ir con algo así como tres C6 FF quizás. Entonces azul realmente brillante y fuerte, tal vez ese sea su color principal. Entonces, ¿cómo puedes incorporar este color a tu diseño? Obviamente, no lo vas a usar para esto. Esto es realmente para secciones de héroes, cosas, que ya mencioné. A lo mejor lo vas a usar para cada tres. Entonces tres es C6, F, F. Y como pueden ver enseguida, se ve mucho mejor en este ejemplo que en este ejemplo. ¿Por qué es eso? Porque si lo usas para el tamaño de texto más grande que tengas en tu diseño, solo va a robar la atención del usuario de todo lo demás. Eso no es algo que quieras. El texto realmente está ahí para explicar cosas para guiar a tus usuarios hacia lo que deben hacer a continuación, y para realmente ayudarlos, lograron el objetivo su visita en su sitio web o aplicación móvil en particular. Entonces en este caso, usaría el color para el texto, algo así. Y no lo usaría para textos de párrafos porque como mencioné anteriormente, quiere que sus párrafos sean legibles. Quieres que sean fácilmente comprensibles y quieres que tus usuarios puedan navegar fácilmente a lo largo de tu diseño. Entonces una última cosa que me olvidé de hacer es que quiero guardar este color. Ya lo tenemos. Ahí vas. Entonces H5, quiero salvarlo. Ahí vamos. H5. Y vamos a usar el mismo color para el párrafo mismo. Y una última cosa que quiero hacer es seleccionar todos mis tamaños de fuente y venir aquí mismo a los estilos de caracteres y dar clic ahí. Para que veas que va a afirmar algo como esto. Pero lo que puedo hacer es ir a Control o Comando Z. click aquí para guardar este y ser el primero. Y luego así y abajo así. Y solo sube y sube y sube. Ahí vamos. Y claro que puedes cambiarles el nombre. Puedes venir aquí mismo y escribir H1. Y puedes hacerlo con todas estas otras. Entonces H2, H3, y así sucesivamente y así sucesivamente. No te voy a molestar demasiado con ello. Pero el punto aquí mismo es cambiar el nombre de estos. Entonces como dije, es mucho más fácil para los desarrolladores después entender lo que estabas tratando de transmitir si no vas a desarrollar este diseño tú mismo. Entonces ahí vamos. Así de súper fácil es de usar. Y puedes ver si te metes como lo hice antes, simplemente puedes ver todas las k en H1 seleccionadas aquí mismo. O si accidentalmente cambiaste el color, puedes seguir adelante y ver, bien, es un clic H1 justo ahí, y va a ir a usar ese color correspondiente. Para que veas lo súper simple que es esto. Y voy a proporcionar este archivo, que acabo de mostrarte como un archivo de práctica para ti para que puedas probarlo. Hoke alrededor, explotado por ti mismo, tal vez jugando con estos diferentes colores que te acaban de mostrar, o tal vez diferentes familias de fuentes por completo. Entonces usamos Roboto en este caso en particular, tal vez quieras usar algo con una superficie dentro como la fuente de visualización Playfair, que mencioné anteriormente, o quieres ir aún más audaz que ¿Roboto? Puedes hacerlo bien. Ahí. Ahí vamos. Esas son las escalas de fuentes, y así es como usarlas. Como dije, vas a tener este archivo de práctica, asegúrate de explotarlo, se asegura de jugar para lograr un resultado perfecto. O si no te gusta este acercamiento de ocho píxeles una parte, como dije al inicio de este video, tienes montón de estos diferentes ejemplos en línea. Asegúrate de explorarlos por ti mismo y ver qué funciona mejor para ti. 77. ASIGNACIÓN de la SECCIÓN 9: Su tarea para esta sección es utilizar una de estas diferentes herramientas que le mostré en esta sección. Y tratar de emparejar una fuente diferente y tratar de ver, ¿trabajan juntos? Si lo hacen, ¿por qué trabajan juntos? ¿Cuál funciona mejor para los rubros? Cuál funciona mejor para párrafos, por ejemplo e intenté experimentar con diferentes colores usando una de estas herramientas que acabo de mostrarte. Y trata de entender qué combinación de colores, qué tipo de combinación divertida te gusta más en realidad. Tal vez incluso experimente con diferentes tamaños y vea qué tamaño tiene el mejor impacto para usted como espectador. Y obviamente va a tener el mismo impacto para tus usuarios. Así que solo experimenta, diviértete y aprende algo nuevo. 78. SECCIÓN 10 Iconografía: Como activos de diseño, los iconos son increíblemente importantes porque la imagen dice 1,000 palabras y los íconos están ahí para demostrar que, cierto, puedes usar diferentes íconos para contar una mejor historia, en lugar de solo usar un montón de textos, puedes reemplazar todos los textos por un simple icono, que va a contar una historia mejor que todo ese texto que nadie va a leer después de todo. Entonces los íconos son increíblemente importantes, pero ¿qué tipo de estilos vas a usar? ¿Cómo emparejar diferentes iconos, dónde encontrar íconos? De eso vamos a hablar en esta sección. 79. ¿Qué son los iconos: Los iconos son elementos gráficos que se utilizan en tus diseños para ayudar a tus usuarios a entender mejor tus diseños. Están ahí solo para corresponder mejor con el texto o las imágenes. Asegúrate de que cuando estés usando íconos no exageres porque el objetivo de los íconos es ayudar a tu otro contenido, no a la soldadura oral. Lo que eso significa básicamente es cuando estás usando íconos, asegúrate de que los estás usando en lugares específicos donde sí tenga sentido. asegura de que cuando tengas múltiples espacios en tus diseños y un enorme espacio en tus diseños, no uses íconos porque así las imágenes van a verse mucho mejor en tus diseños. También se utilizan iconos para explicar a los usuarios lo que tienen que hacer un poco mejor. Lo que quiero decir con eso es si simplemente no puedes usar imágenes, si simplemente no puedes encontrar imágenes que van a explicar situaciones complejas. Bueno, si no podemos usar video en ciertos lugares, entonces los íconos son una forma mucho mejor de hacerlo, porque siempre se pueden incluir varios iconos para explicar múltiples temas en un solo espacio. Y es por eso que los iconos son un gran enfoque y una excelente manera de usar en tus diseños. Los iconos pueden ser simples o complejos. Pueden ser de color o blanco y negro. Y vamos a hablar de todas las clasificaciones en los próximos videos, dónde encontrarles diferencias entre diferentes íconos y cómo usar tus íconos correctamente. 80. Diferentes tipos de iconos: Hay muchos tipos diferentes de iconos. Y dependiendo de por qué los estés usando, vas a usar un cierto tipo de icono donde ese, ese contorno se llenó de colores. Y hay múltiples formas de usar íconos, que vamos a discutir más adelante en esta clase. Pero también hay múltiples categorías. Entonces aquí tengo íconos de material, y se puede ver eso aquí mismo en la parte superior que hemos esbozado. Y puedes ver todos estos iconos delineados. Se puede ver que la premisa básica de los iconos de contorno, pero no para todos los íconos, sobre todo para este corazón se puede ver aquí mismo es tener espacio vacío dentro de ellos y luego solo tener el contorno fuera del icono. Si lo vuelvo a cambiar a campo, puedes ver cómo se ven todos ellos. Pero una vez más, se puede ver con una búsqueda, por ejemplo simplemente no tiene sentido que algunos iconos se llenen por completo. Porque si sentimos este icono de búsqueda por completo, entonces va a perder su propósito. Va a desaparecer. Este espacio en blanco intermedio para este cierre de sesión, lo mismo para esta fase, lo mismo para este borde favorito. Lo mismo si vamos con el redondeado, básicamente solo te va a mostrar las esquinas redondeadas de estos iconos. Si vamos con filosos, te va a mostrar los bordes afilados. Y va a ser básicamente, todos estos iconos son pixel perfect porque la mayoría de ellos son SVG. Y vamos a discutir eso un poco más adelante en la parte Adobe XD de esta clase. Cuando voy a explicar diferentes formatos de archivo y cómo se puede trabajar con diferentes formatos de archivo. Y finalmente, tenemos que girar a la derecha aquí para tonificar, como su nombre indica, tiene todos estos contornos, todo esto lleno de colores. Pero también te muestra estos dos diseños de tono, básicamente un color, un tono es para el contorno en este caso, y un tono y un color es para la línea de este caso. Una vez más, dependiendo de qué íconos estés usando para qué propósito se va a mostrar de manera diferente. Y si te muestro aquí mismo en este ejemplo, este es el pack premium de Envato Elements, que puedes ver aquí mismo son el icono coloreado. Si doy click aquí para agrandar esta imagen y mostrarte la diferencia. Entonces estos son los iconos de colores y estos son el icono de contorno. Para que puedas ver de inmediato la diferencia entre estos iconos, básicamente en el contorno, igual que te mostré aquí mismo en este reverso gratuito de los iconos de material de Google. Por cierto, todos estos recursos que menciono van a estar vinculados en un PDF. Asegúrate de descargar ese PDF y de explorar todos estos enlaces y acceder a ellos tú mismo, simplemente haz clic en el enlace que quieras. N te va a llevar ahí en tu navegador. Si volvemos a aquí, como dije, tenemos estos íconos delineados y tenemos estos iconos delineados aquí mismo. La diferencia entre estos dos es obviamente el grosor y el estilo. Entonces, si te llevo de vuelta aquí mismo a los iconos del material, puedes ver que son extremadamente simples. Son realmente simples de usar. Pero si te llevo aquí mismo a estos íconos de viaje, puedes ver que son mucho más complejos. Tienen elementos más ricos en su interior. Tienen tez múltiple, tienen diferentes trazos incluso. Entonces, son realmente complejos. Si quieres hacer cosas así. Una vez más, dependiendo del proyecto en cuestión, vas a utilizar o bien estos íconos más simples son estos iconos complejos. Y finalmente, si te llevo a estos iconos de colores, puedes ver que todavía tenemos todos estos trazos, pero ahora tenemos color y con iconos de colores, vas a notar a veces que están usando un color o como en este caso, están usando varios colores. Entonces puedes ver que tenemos verde, rojo, tenemos este gris oscuro, tenemos este gris claro, y tenemos este color casi blanco. También tenemos este color verde azulado, tenemos este color amarillo, color rojo. Entonces, dependiendo del proyecto en cuestión y lo que estés haciendo con tus íconos, vas a elegir uno de estos estilos, cualquiera de los dos, que te mostré aquí mismo con los íconos de material. Así que estilos realmente simples. O si buscas estos estilos complejos una vez más, entonces puedes elegir entre contorno o con color. Y claro, porque estoy usando Envato Elements desde hace años, sé que todos estos iconos son realmente de alta calidad, así que puedes ajustar todos estos colores. Entonces por ejemplo quiero usar unos colores de mi marca. Digamos que tu cliente tiene dos colores, por ejemplo, azul y rojo. Entonces si volvemos a estos, puedes ajustar todos estos colores. Entonces, en lugar de amarillo en vez de verde en lugar de todos estos, digamos que estás usando azul y rojo. Puede lograr ese resultado fácilmente simplemente ajustando estos colores en su herramienta de elección. Para esta clase, estamos usando Adobe XD. También voy a mostrar eso un poco más tarde y cómo puedes ajustar algunos de estos iconos para que coincidan con tu marca. Pero esa es toda la premisa de estos iconos de colores. Entonces, una vez más, dependiendo de lo que estés haciendo, qué tipo de proyecto estés trabajando, tu complejo de proyectos, ¿qué estás tratando de describir a sus visitantes en usuarios? ¿Es algo realmente sencillo? Entonces vas a utilizar estos iconos de material gratuitos. ¿Qué son incluso puedes usar íconos premium que son tan simples como esos íconos de material? O por otro lado, vas a usar algo mucho más complejo, como estos íconos premium que te mostré desde Envato Elements. 81. Librerías de iconos, paquetes y formatos de archivos: Dependiendo de lo que vayas a usar tus íconos, vas a elegir la biblioteca de iconos o el paquete de iconos. La diferencia está en las bibliotecas a veces hay miles de iconos diferentes como los íconos de material que te mostré. Y no es realmente factible que descargues toda la biblioteca porque como dije, a veces esas bibliotecas pueden tener hasta 10,000 o 15 o 20,000 iconos diferentes. Entonces descargar y ordenar todos esos íconos es realmente difícil. Entonces puedes usar algo llamado Icon jar, que lamentablemente no funciona en Windows, pero sí funciona en Mac. Entonces, si estás usando Mac, entonces puedes usar icon jar muy fácilmente. Navega por estos diferentes paquetes. La mayoría de estos packs son premium por lo que tendrás que pagar por ellos. Pero si estás usando algo así como iconos de material que puedes salirte con la tuya usándolo gratis. Y vamos a tocar gratis versus premium un poco más adelante en esta clase. Pero por ahora, permítanme explicar rápidamente estos diferentes tipos de archivos y formatos de archivo. Entonces si te llevo aquí mismo a Adobe X d, Este es mi chat, un kit de interfaz de usuario, y puedes obtenerlo enlace va a estar abajo en el PDF si quieres, pero no es obligatorio. Sólo te estoy mostrando aquí como ejemplo. Entonces lo que tenemos aquí mismo es un kit de interfaz de usuario, pero puedes imaginarlo como un proyecto en el que vas a estar trabajando para tu cliente. Y imaginemos que vas a estar usando algunos íconos. Entonces, ¿dónde puedes encontrar estos íconos? Web como te mostré. Los puedes encontrar en línea en estos recursos premium y sitios web premium como Envato Elements. Y de hecho voy a abrir esto de nuevo en un segundo solo para mostrarte. Pero si vuelvo a XD, también puedes encontrar este menú de complementos aquí mismo, y puedes usar algo llamado iconos para el diseño, por ejemplo, hay muchos complementos diferentes por ahí, y puedes hacer clic aquí para acceder al menú de plugins. Y luego puedes simplemente buscar iconos aquí, presionar Enter o Return. Y te va a mostrar todos estos diferentes paquetes de iconos. Ten en cuenta que la mayoría de estos cuentan con versiones gratuitas. Entonces no todos los íconos son gratuitos. Solo están teniendo algunas versiones gratuitas e íconos gratuitos que puedes usar. Porque la mayoría de estas son bibliotecas de iconos, como mencioné. Entonces te están dando la opción de usar un ícono gratis. Entonces, si instalas uno de estos plugins, solo ten en cuenta que te va a mostrar todos estos íconos y vas a pensar que, sí, todos estos son gratuitos, eso es genial. Pero en realidad no lo son. Solo te están dando algunas opciones gratuitas, pero para la mayoría de los íconos vas a tener que pagar. Entonces si volvemos a aquí, si instalas estos iconos para el plugin de diseño, sí funciona al momento de la grabación de esta clase, pero solo asegúrate de entender eso. No está en mi capacidad para asegurarme de que todos estos plug-ins funcionen todo el tiempo. Porque al igual que el software, igual que todo en la vida para ir y venir. Así que asegúrate de navegar por estos plugins si estás usando Adobe XD, asegúrate de revisar la voz del usuario y de revisar el blog oficial de Adobe XD solo para ver cuándo actualizan estas cosas, especialmente para los íconos. Porque como dije, a veces estos plugins sólo van y vienen. Los desarrolladores se aburren y no los actualizan durante meses, por lo que no funcionan correctamente. Y solo asegúrate de entender si vas por esta ruta usando estos complementos en Adobe XD se asegura familiarizarte si el complemento realmente funciona. Y si tienes la opción de usar estos iconos en tus proyectos premium o gratuitos, lo cual es realmente importante porque a veces estos íconos se pueden usar para proyectos pre gratuitos, pero a veces pueden también se utilizará para proyectos pre y premium. Así que solo asegúrate de familiarizarte con la opción que te están ofreciendo. Si estás usando una herramienta como Envato Elements, por ejemplo, te están dando la opción de usar estos activos como quieras. Y si volvemos a elementos Envato aquí mismo, tienes la opción de usar todos estos. Entonces, desde videos de archivo, música, efectos de sonido, plantillas gráficas, kits de interfaz de usuario, fotos, plantillas web , modelos 3D e íconos, por ejemplo, tienes la opción de usarlos todos como quieras, cuando que quieras en el que sea, en el proyecto que quieras. Pero claro, es premium así que tendrás que pagarlo. Solo asegúrate de entender si estás usando software libre, plug-in gratuito, ícono gratis. Asegúrese de ver la licencia en su sitio web. O si el plugin tiene un sitio web, asegúrate de familiarizarte porque lo último que quieres hacer y tener en tu vida es la demanda de alguien más que creó ese activo. Solo estás pensando, oh genial, eso es todo gratis, pero en la mayoría de los casos, gran mayoría de los casos, no es gratis. Tendrás que pagar por al menos algunos como esos plugins que te mostré que tienen versión gratuita, pero no son totalmente gratuitos. Así que una vez más, antes de seguir adelante, asegúrate de lo que estés usando para familiarizarte. Si solo estás usando material, eso está bien porque eso es de código abierto, creado por Google, igual que Google Fonts. Es gratis y puedes usarlo como quieras. Entonces si volvemos a aquí, como dije, tenemos este ícono para el diseño. Y si tengo algo como corazón escrito aquí mismo, lo que puedes ver aquí mismo es todas estas son bibliotecas de iconos, así que está sacando iconos gratis de las bibliotecas de iconos que no me gustan. Entonces este es el problema de inmediato. Este es el problema que mencioné en el primer video de esta clase sobre el constante cambio de estilos. Porque este es el problema clave que estoy viendo con estar en diseñadores por ahí. Simplemente no entienden. Están usando un icono de una biblioteca hacia atrás, otro icono de otra biblioteca Packer. Y simplemente no tienen la consistencia y sus diseños. Un look no pulido, no profesional digest look amateur. Y realmente se puede decir, no solo como diseñador, sino como cliente también, que no es diseñador en sí mismo. Una vez más, asegúrate de que estás usando estos , asegúrate de familiarizarte y de usar todos estos desde el mismo estilo y desde la misma apariencia. Porque una vez más, solo hará que tus diseños luzcan no profesionales y no pulidos. Como puedes ver en este paquete de iconos de plumas, por ejemplo, solo tenemos un ícono. Pero a partir de estos impresionantes iconos atrás, tenemos múltiples íconos, pero una vez más, no, no en el mismo estilo. Por ejemplo, quiero los iconos de esquema porque van a funcionar bien con mi proyecto. Pero no puedes encontrar ese estilo aquí mismo. Para icónico, puedes encontrar diferentes estilos. Pero, ¿y si estás buscando desde otro ícono y no lo tienes en icónico? Por ejemplo, yo. ¿Quieres usar este corazón iOS vacío, por ejemplo, vamos a la entrega? A lo mejor estoy trabajando en un sitio de entrega. Se puede ver que no hay ni un solo icono de esa parte de atrás. Entonces eso es un problema enseguida. Si quieres lograr consistencia y hacer que tus diseños luzcan profesionales y pulidos. Entonces, lo que puedes hacer en ese caso es que puedes localizar una biblioteca que tenga la mayoría de estos iconos y utilizarlos de forma gratuita si estás empezando. Pero si ya has empezado y tienes algo de tracción, realmente no puedo recomendar lo suficiente o servicio que van a pagar y tener todos estos iconos disponibles para ti al alcance de tu mano en cualquier momento. Ahora voy a mostrarte el pack premium. Esta es la gran constante que obtuve de, uh, es un paquete premium. Pero si me acerco un poco más, se puede ver que todos estos iconos son de este estilo. Así que el estilo de contorno, no hay estilo relleno, no hay nada más. Estilo simplemente delineado, lo cual es genial si estás usando este estilo a lo largo de tu proyecto. Entonces porque esto tiene, creo que algo así como 240 o 2,400 en realidad. En zoom un poco. Sí, creo que son 22400 porque tenemos todos estos diferentes packs y simplemente los desagruparía así. Pero puedo navegar por internet y ver, pero creo que son 2.400 iconos diferentes. Así que solo puedes imaginar que tienen el ícono para cada ocasión posible. Y si estás usando este estilo exacto, entonces puedes usarlo a lo largo tus proyectos, a lo largo de tu diseño. Solo asegúrate de usar este estilo exacto para lograr esa consistencia y ese aspecto profesional. Y puedes hacer eso porque todos estos íconos tienen el mismo aspecto. Porque son creados por el mismo equipo de personas. Se puede ver que todos ellos tienen el mismo aspecto. Parecen que se pertenecen entre sí en la especificación, y puedes personalizarlos fácilmente. Puedes cambiar el color, puedes cambiar este contorno, haz lo que quieras con ellos. Puedes ver por ejemplo cambiar este color y puedes cambiar el grosor del borde si lo abres en formato de archivo de Adobe Illustrator. Y creo que este es el buen momento para hablar de formatos de archivo. Entonces, básicamente, los formatos de archivo son realmente importantes dependiendo del proyecto con el que estés trabajando. Si estás trabajando con imágenes JPEG, no tienes la opción de transparencia. Lo que eso significa básicamente es cualquier color de fondo de tu imagen JPEG que va a mostrar. No puedes usar ese icono. No se puede cambiar su color sin cambiar el rizo general de la imagen. Entonces básicamente es solo una imagen horneada en. Es una imagen de mapa de bits. Entonces, cuando acercas muy de cerca, va a perder su calidad dramáticamente. Así que realmente no puedes usarlo para proyectos de páginas web, para nuestros proyectos de página donde necesitas lograr escalabilidad. Desde luego no se puede usar para imprimir, porque en cuanto empieces a imprimir, especialmente en impresiones más grandes, vas a ver la pérdida de calidad. También hay P y G, que básicamente es solo una imagen de mapa de bits como la JPEG, pero con la transparencia. Entonces con JPEG tienes la imagen horneada en fondo y no tienes ninguna transparencia. Con PNG, sí tienes transparencia. Pero una vez más, debido a que es una imagen de mapa de bits, todavía nos encontramos con este tema de pérdida de calidad. Entonces, en cuanto empieces a acercarte, vas a ver esa pérdida de calidad. Entonces, para algo así como impresiones grandes, es realmente un no-go usar un PNG. Entonces, lo que puedes hacer en este caso es que realmente te recomiendo que todos tus proyectos trabajen con imágenes SVG. Lo que eso básicamente significa, si vuelvo a aquí, si me acerco extremadamente de cerca a este icono, no se puede ver ningún pixel. Entonces si te llevo de vuelta una vez más a esto de vuelta porque lo descargo para este ejemplo en particular. Entonces si vuelvo a Adobe XD, pulsa aquí mismo en tu computadora, abre BSD o AI. Porque Adobe XD es el producto de Adobe. Y porque adobe Illustrator y Adobe Photoshop, que esto es, son básicamente productos de Adobe. Así podrás abrir fácilmente cualquiera de estos formatos de archivo. Y va a mantener la consistencia va a mantener la calidad. Porque una vez más, es el producto de la misma compañía. Entonces si volvemos a aquí, PSD o AI se va a abrir en una carpeta con estos iconos particulares de elementos Envato. Entonces estos son íconos de viaje. Y lo que tenemos aquí mismo es ai para Adobe Illustrator, EPS, que también es otro formato de archivo que mantiene la consistencia. Es un formato de archivo vectorial como Adobe Illustrator, como SVG. Entonces va a mantener la calidad. Pero tristemente, EPS no es compatible con Adobe XD. Entonces todos estos iconos son exactamente iguales, pero en estos diferentes formatos de archivo, lo que tenemos a continuación es el icono jar, que mencioné anteriormente. Entonces, si estás usando Mac, siempre puedes abrir frasco de iconos y agregarlos a tu colección. Tenemos el PNG y no estoy muerto contra PNG. Aún puedes usar iconos PNG y puedes usar imágenes JPEG si quieres, por ejemplo, en publicaciones en redes sociales, porque no requieren una resolución tan grande. Así que aún puedes salirte con la tuya usando imágenes PNG si eso es lo único que tienes. Pero para cualquier cosa más grande, por ejemplo , impresión, o especialmente para algo que la gente pueda acercar muy de cerca, como páginas web, proyectos web y aplicaciones móviles son realmente recomendables que ir con algo así como SVG. Si volvemos aquí, tenemos el SVG ahora diferencia entre estos y vas a ver esto en la mayoría de otros paquetes de iconos y tipos de iconos. Es esto cuando estás usando SVG, va a separar estos SVG en la mayoría de los casos. Y va a mostrar íconos separados. Entonces si volvemos a aquí, se puede ver que hemos explicado e inexplicable, que es básicamente la cantidad de detalles. Entonces si vamos a aquí, tenemos color y tenemos contorno como te mostré. Y no muestra nada porque hay que abrir SVG directamente desde la carpeta, pero están ahí. Los va a mostrar básicamente como estos PNGs. Así que ojalá vaya a aparecer aquí. Entonces déjame ver si puedo cambiar esto. Ahora porque abrimos esto como PSD e IA, pero no importa. Puedo demostrarlo si los abro en una carpeta como esta o expando color. Entonces estos son los iconos SVG. Esto es lo que estaba mencionando, los va a mostrar individualmente. Así que aún puedes arrastrar y soltar estos iconos SVG desde aquí, que voy a mostrar en tan solo un segundo. Pero volviendo a esto, lo que haría en estos casos es usar IA, porque AI o Adobe Illustrator es formato de archivo vectorial y no va a perder calidad nunca. Puedes usarlo para cualquier tipo de proyecto en el que estés trabajando. Se puede utilizar para tamaños pequeños, tallas grandes. Siempre va a mantener la consistencia de la calidad y de los detalles en esos íconos. Entonces si volvemos a aquí lo que tenemos, tenemos color y color expanden, que en este caso particular de este pack en particular, es apenas la cantidad de detalles y riqueza de los detalles. Pero en algunos otros packs no vas a ver que tenemos viajes y viajes expandirse. Entonces básicamente viajar es sin color, color viajado es con el color. Así que abramos por ejemplo color de viaje porque quiero mostrar cómo puedes cambiar esos colores. Y mientras esto se abre, permítanme minimizar esto y traer de vuelta esto. Porque solo quiero demostrar que aún puedes , estos son SVG. Puede hacer clic, arrastrarlos y soltarlos en su archivo Adobe XD. Y si me acerco muy de cerca, extremadamente de cerca, se puede ver que no tenemos ninguna pérdida de detalle. Tenemos todos estos detalles contenidos dentro de este icono. Y si vuelvo a este pack de iconos que acabo de abrir, se puede ver cómo se ve. Así que permítanme borrar este. Puedo volver a aquí. Déjame mostrarte rápidamente este solo para que veas cómo se ve. Entonces, si lo abro y golpeo Control Zero para encajar en su lugar, acercar muy de cerca esto. Para que puedas ver todas estas sombras diferentes. Se puede ver que la calidad es realmente de primera categoría. Entonces, si volvemos y seleccionamos por ejemplo , no lo sé, vamos con este. Pulsa Control C. Vuelve a aquí, controla V para pegar en cualquier tablero de arte que hayas seleccionado y simplemente puedes moverlo a su lugar. Ahora, porque ya tengo algunos colores pre-preparados aquí mismo. Si quiero encajar este icono para que funcione con mi estilo, lo que haría es simplemente, por ejemplo seleccionar esto. Puede mantener Control y hacer clic dentro. Y tenemos la frontera aquí mismo. Si seleccionamos este borde, puede ver que cambió y actualizó este a este color. Y e.g. Quiero hacer lo mismo con este. A lo mejor puedo hacer aquí. Y tenemos esto justo aquí. Para que puedas ver y hacerte la idea de cómo vas a adaptar estos para que funcionen con tu proyecto, por ejemplo, esto va a ser este azul claro. Y voy a usar este color para trabajar con esto. Y a lo mejor tengo esta naranja , a lo mejor quiero usarla aquí mismo para estas. A lo mejor quiero usar esto para ser, no sé, blanco también. Tenemos la frontera, entonces. Vamos con éste. Y para este rojo, vamos con éste para que te hagas una idea de lo fácil que es ajustar esto. Y estamos a solo un par de clics. Puedes ajustar fácilmente estos iconos para que funcionen con tu estilo. Por supuesto, esto es con los íconos de colores, para que puedas ver cómo es ahora. Entonces, si te llevamos de vuelta a cómo era antes y cómo es ahora. Para que puedas ver el cambio completo. Y si te llevo aquí mismo a las capas, puedes ver todas estas capas. Ahora bien, lo que quiero mostrarles también es esto. Entonces, si estás usando esos íconos como contornos. Entonces si vuelvo a aquí, amplíe color, hemos delineado y vamos con el elevador, que es el mismo icono. Si acercamos todo el camino, se puede ver que no tenemos ningún color en su interior. Nosotros solo tenemos este esquema. Entonces si quiero cambiar esto, lo que voy a hacer es simplemente dar clic aquí mismo y se puede ver que se actualiza en tiempo real de acuerdo a mis colores, que necesito. Entonces esa es la opción que tienes cuando estás usando estos íconos premium. Y por último, lo que quiero compartir con ustedes es la exportación real de los propios íconos. Así que a veces vas a exportar estos iconos para desarrolladores si no están usando plugins, si la participación usa opciones de Bridge como por ejemplo Zeplin, y no los están usando. También son uno para que puedas exportar iconos manualmente, para que los usen en ciertos casos. Así que también puedes hacerlo en Adobe XD. Y para darte estas opciones de exportación, volvamos a aquí, y en realidad vamos a seleccionar el icono que ya tenemos aquí mismo. Entonces tengo estos múltiples íconos aquí mismo. Entonces, si selecciono este, da clic en él y vaya al panel Capas, puede ver su icono de Perfil. Entonces si solo quiero seleccionar una exportación, ésta, lo que haría es presionar Control o Comando E. Me va a mostrar este diálogo. Entonces, una vez más, solo recuerda de lo que hablamos hace un minuto sobre estos formatos de archivo. Entonces si vuelvo a aquí, lo que tenemos es P y G. Entonces como dije, PNG es genial para redes sociales y en mi opinión, opinión honesta, realmente nada más. Puedes dar click aquí mismo para elegir SVG, lo cual es genial. Una vez más, si quieres exportarlo para cualquier cosa con alta calidad que requiera calidad. Así que asegúrate de hacer eso. También contamos con PDF. Pdf es genial para exportar si tienes, por ejemplo guía de estilo con múltiples iconos dentro, y solo quieres exportar esa guía de estilo para que tu cliente pague y vea si eso es algo que ellos querer. Es genial para los tableros de estado de ánimo, por ejemplo, que puedan tomar ese PDF impreso y luego tomar algunas notas, tal vez escanearlo y enviarlo de vuelta a usted. Entonces, dependiendo del caso de uso, PDF puede ser realmente útil. Y por último, tenemos el JPEG. Jpeg es realmente útil si solo quieres enviarlo a tu cliente para que lo revise solo para ver si ese ícono es lo que realmente necesitan. Si ese icono es algo que les gusta. Entonces tal vez vas a usar ese JPEG, pero para desarrolladores, para desarrollo, para fines de desarrollo, yo siempre, siempre, siempre recomendaría iconos SVG. Entonces eso es básicamente todo para los íconos. De verdad espero que entiendas la idea y esperes que ojalá te hagas una idea de cómo usarlas. Diferencias entre packs, packs premium, packs gratis. Vamos a discutir eso en un momento en un video separado en esta clase, porque creo que es muy importante, especialmente para los diseñadores principiantes, qué usar y dónde usarlo para qué tipo de proyectos. Solo asegúrate de usarlo de acuerdo a la licencia. Entonces, si puedes usarlos para pre proyectos y mayoría de los íconos se pueden usar para pre proyectos, especialmente si estás trabajando solo para ti, solo para fines de presentación en Behance o driblar por ejemplo deudas. Casi siempre bien. Pero solo para estar seguros, asegúrate de consultar con el creador en su sitio web solo para ver si tienes la licencia adecuada. 82. Iconos premium de VS: Aparte del precio, obviamente la diferencia entre los íconos gratis y premium está en variedad y disfruta. Entonces con íconos gratis, como te mostré en ese enchufar en el video anterior, a veces solo vas a tener variedad de dos, tal vez tres íconos, pero con íconos premium. A la luz de los casos, vas a tener cientos de opciones diferentes para elegir. Entonces, dependiendo de tus proyectos, a veces esos tres íconos podrían no funcionar correctamente. Y lo que es más importante, si sigues usando íconos gratuitos, lo cual está bien al principio si recién estás iniciando en este negocio. Pero en cuanto consigas algo de dinero, cuanto tengas algo de tracción, siempre te recomendamos que uses íconos premium porque eso te va a diferenciar de los principiantes. Y va a demostrar a tus clientes que te importa porque vas a darle a tus diseños esta nota profesional y vas a darle una distinción entre todos estos otros diseños en el mercado. Como mencioné, me gusta mucho usar elementos Envato porque en los elementos Envato tienes todas estas opciones diferentes. Y acabo de mostrarte la punta del iceberg. Y si te muestro por ejemplo usamos estos iconos y son de solo icono, lo cual es una gran opción en Envato Elements. Puedes ver que esta persona creó estos iconos y simplemente puedes hacer clic aquí mismo para encontrar exactamente el mismo estilo de los íconos que acabamos de usar. Entonces, si vamos aquí mismo, se puede ver que tienen más de mil activos diferentes. Entonces, si hago clic también en plantillas gráficas y me desplazo hacia abajo hasta aquí. Ahora bien, si volvemos a los gráficos y nos desplazamos hacia abajo, se puede ver que tenemos estos iconos exactamente en el mismo estilo. Entonces, si la consistencia es algo que te gusta, siempre puedes navegar a través estos diferentes paquetes aquí mismo en Envato elementos del mismo Creador y la mayoría de estos creadores simplemente están rompiendo estos paquetes de una enorme y gigantesca espalda. Solo así es mucho más fácil para ti como consumidor acceder a estas clavijas. Y una vez más, no tienes que usar elementos Envato son realmente así porque son todas estas cosas en Envato elementos que mencioné desde gráficos hasta fotos, videos, hasta fuentes, a la música, a cualquier otra cosa que puedas necesitar. Pero esta clase es todo sobre el icono, así que eso es lo que estoy mencionando aquí mismo. Bueno. Solo imagínese que por ejemplo yo estaba usando Recuerdo algo así como hace dos años o algo así. Y estoy usando esto desde hace más de cinco años. Este Envato Elementos de ustedes, yo estaba usando iconos de un Creador. No era este creador si esos otros creadores, pero no importa. Estaba usando uno de los iconos para un proyecto de hotel que estaba teniendo. Y luego tuve un proyecto de tienda de renta de autos. Y también utilizo el mismo icono de creadores de elementos Envato para ese proyecto en particular, lo que me permitió navegar mucho más simplemente porque estaba trabajando en dos proyectos al mismo tiempo. Entonces yo estaba mirando a uno los íconos de Creator y encajaban decían ambos proyectos. Entonces ambos proyectos en los que estaba trabajando al mismo tiempo tenían los íconos del mismo creador, pero se ven completamente diferentes porque en un sitio web estaba usando iconos de colores. En un sitio web, estaba usando iconos de esquema, pero eran del mismo creador, así que fue muy sencillo para mí acceder a ellos. Una vez más, no tienes que usar elementos Envato solo porque el servicio que deseas, hay miles de servicios diferentes por ahí. Me gusta mucho usarlos porque como mencioné varias veces, me gusta mucho cómo tienes todas estas cosas aquí mismo porque no hay un proyecto ahí fuera que no vaya a requieren que utilices fotos, para usar diferentes fuentes. Y hablando de fuentes, es la misma historia con fuentes, con imágenes que con íconos, cuando estás usando cosas premium. Así que los íconos, fuentes e imágenes premium, realmente va a hacer que tu diseño luzca pulido y profesional. Y realmente va a hacer que se destaque entre la multitud. Y realmente va a atraer clics o enlaces o suscripciones para sus clientes también porque va a verse mucho más pulido y profesional que la competencia, porque la mayoría de la competencia, especialmente para las empresas más pequeñas, están usando sitios web como Unsplash o usando sitios web como iconos de material para iconos. Y todos básicamente se ven iguales. Así que todos los diseñadores que están trabajando en estos sitios web se ven exactamente iguales. Entonces este es tu beneficio clave y los puntos de diferenciación te aseguran si puedes, tan pronto como puedas comenzar a usar estos íconos premium y servicios premium, paquetes premium, solo para diferenciar usted mismo de la multitud, va a traer su diseño mucho más profesional y aspecto pulido. Y sin mencionar, no te vas a meter en problemas porque como mencioné en ejemplos anteriores, si estás usando estos activos gratuitos en línea, te vas a meter en problemas si no estás usando ellos correctamente. Así que asegúrate siempre de consultar con la licencia. Entonces, si nos desplazamos hasta aquí y podemos explorar la licencia, haga clic aquí. Para que puedas ver una vez simple licencia comercial, así podrás utilizarla para lo que quieras. Puedes registrar artículos cada vez que los uses. Lineamientos claros para lo que no está permitido. Entonces no puedes revender, no puedes ponerlos en servicios bajo demanda como, no lo sé, por ejemplo, Creative Market UI. Entonces, básicamente, no puedes tomar lo que encuentres aquí y venderlo como licencia propia y a prueba de futuro, lo que significa que incluso en el futuro, si te das de baja de su servicio, todavía estás cubierto por esa licencia, que me gusta mucho. Entonces, por ejemplo, tu cliente descubrió que estás cubierto y aún tienes acceso a todos estos iconos anteriormente. Lo que eso significa básicamente es más adelante en el futuro, si estás usando uno de estos softwares gratuitos y herramientas gratuitas, las posibilidades son una deuda, especialmente con los plugins, que mencioné en uno de los videos anteriores, que simplemente se van a aburrir con ese proyecto. Lo van a matar y desaparecer. Entonces, más adelante, por ejemplo, su cliente lo llama, ha trabajado en un sitio web y usa iconos de ese complemento en particular, por ejemplo, pero ese complemento ya no existe, entonces no puede encontrar los iconos que utilizó en el proyecto en ese momento en particular. Ya no se pueden encontrar esos íconos. Entonces, ¿qué puedes hacer? Básicamente estás atascado. que encontrar otros iconos que no sean los mismos que esos íconos. A su vez, tu diseño no va a parecer profesional, pulido y coherente como lo hacías antes. Entonces hay que encontrar otras formas de hacer que ese proyecto funcione. Por eso me gusta y qué dos elementos, porque como decía aquí mismo, siempre puedes volver atrás, puedes descargar, puedes echar un vistazo a tus proyectos anteriores y siempre puedes descargar estos iconos más. Entonces, una vez más, si tu cliente quiere que trabajes en páginas futuras, pantallas futuras para su aplicación móvil, presentaciones futuras, diapositivas, lo que sea que estés trabajando en el futuro, por ejemplo, solo están lanzando. Siempre puedes volver a Envato Elements, siempre volver a esa categoría en particular, ese proyecto en particular en el que estás trabajando, tomar esos íconos y seguir con el mismo estilo, usando los mismos iconos, usando el mismo servicio, usando la misma licencia que antes, simplemente seguir trabajando en ese proyecto. Como dije, eso es lo que realmente me gusta de estos servicios premium. Y con servicios gratuitos, no lo consigues. La advertencia aquí mismo es con iconos de material, lo entiendes. Entonces, debido a que son iconos de código abierto gratuitos, puedes usarlos todo el tiempo. Pero todos sabemos cómo es Google con sus productos. Entonces nadie te garantiza que en algún momento no van a matar a los íconos de Material Design. Entonces, ¿qué puedes hacer en ese momento? Una vez más, no estoy usando este video y esta clase para presionarte para que compres nada. Depende completamente de ti. Puedes hacer lo que quieras con tu carrera. En realidad no estoy empujando mi opinión sobre ti. Sólo te estoy diciendo cómo tus diseños o miraban y miraban de alguien que está haciendo esto desde hace casi dos décadas. Contraté y despidió a muchos diseñadores en mi carrera tanto para empresas como para mi propio negocio. Y realmente realmente puedo decir muy fácilmente si alguien estaba usando recursos gratuitos, especialmente con íconos, pero también con fuentes, con imágenes, o si estaban usando recursos premium. Y realmente se puede notar la diferencia entre diseños pulidos y aficionados. Así que solo tenlo en mente. Una vez más, no te estoy presionando para que compres nada. Puedes hacer lo que quieras con tu carrera, con tu vida. Así que una vez más, no hay presión para mí. Sólo digo que va a parecer mucho más profesional y pulido si estás usando recursos premium que gratuitos. 83. Consejos para los mejores resultados: En este video, te voy a dar algunos consejos para obtener mejores resultados en mi opinión. Y estos realmente te van a diferenciar de tu competencia, de otros diseñadores. Y realmente va a diferenciar tus diseños de otros diseñadores no profesionales. Entonces el número uno es, estoy leyendo aquí mismo de la lista. Es mucho más sencillo para mí. Usa iconos únicos. Estos iconos únicos son los que mencioné aquí mismo en elementos Envato. Así que no voy a volver a ello una vez más, sino usar íconos únicos porque eso te va a diferenciar como diseñador y tu diseño va a diferenciar a tu cliente de la multitud. Y realmente te va a ayudar a contar una mejor historia. Porque cuando estás usando íconos únicos, realmente va a ayudar a que la marca de tus clientes se destaque porque realmente va a asociar esos íconos con esa marca mucho más claramente. Y va a hacer que destaque entre la multitud mucho más claramente. El número dos es asegurarse de que tenga sentido. Entonces, siempre que estés usando estos íconos, asegúrate de que tengan sentido. Así que no solo pongas íconos en alguna página aleatoria, en algún lugar aleatorio la página y solo esperes que tus usuarios la entiendan y vean lo que estás viendo como diseñador, nadie es un diseñador pero a ti mismo. Asegúrate de saber, eso asegura entender que tu cliente no es diseñador. De lo contrario no te contratarán para ser diseñador. Así que solo asegúrate de entender dónde estás colocando estos iconos. Asegúrate de que tenga sentido. Asegúrate de no abrumarlos. Asegúrate de que estás colocando estos iconos en lugares donde sí tenga sentido. Entonces solo recuerda una vez más, los íconos están ahí Para ayudar a facilitar el texto. Entonces no usar demasiados textos, sino usar un icono. O si no hay suficiente espacio para una imagen, tal vez puedas usar icono. Si estás usando conjuntos de iconos, si estás usando filas de iconos, asegúrate de que tenga sentido, especialmente si estás contando el proceso o una historia. Entonces en esos casos asegúrate de usar íconos, pero una vez más, se asegura de usarlos cuando tenga sentido. El siguiente paso es ser consistente. Entonces hablamos de esto en esta clase. Si estás usando el icono de una biblioteca o una parte posterior, asegúrate de que sea consistente. Entonces, si es contorno, asegúrate de que todos tus íconos estén delineados. Si está rellenado, asegúrate de que ese es el estilo que buscas. Si estás usando iconos de colores como te mostré en Adobe XD en ese caso en particular, asegúrate de usar colores que se correspondan bien con esa marca en particular. No te alejes demasiado de esos colores. Rojo y verde están bien en algunos casos, especialmente para alertas, por peligro, por trabajo bien hecho para la correcta ejecución, cosas así. Entonces puedes usar unos colores rojo y verde, también, tal vez color azul si ese es el color correspondiente. Y estoy planeando crear una clase de color a finales de este año. Así que asegúrate de volver a revisar y de ver eso. Pero en el caso de los iconos, asegura de mantenerlo en la marca se asegura de ver dónde puede usar ciertos colores en sus íconos. Sé moderado, así que no exageres. Puedes usar iconos en algunos lugares, pero no te vuelvas loco y úsalos por todas partes. Porque los clientes solo van a estar confundidos. Además, cuando estás siendo mezcla moderada para explicar tus íconos si eso es necesario. Entonces, si te llevamos de vuelta a Adobe XD, déjame llevarte de vuelta aquí mismo. Entonces lo que tenemos aquí es esta barra de pestañas y no tiene ningún texto debajo de ella, pero puedo agregar fácilmente el texto para estos iconos, por ejemplo aquí donde dice Tal vez, dice, digamos perfil, tal vez esto puede ser Francia, esto es Chad, esto es escenario. Entonces Usa los textos, explicadores, pero sí tiene sentido y solo ser moderado. Como pueden ver, sólo tengo cuatro iconos aquí mismo. Entonces no tengo 60 iconos diferentes. No tengo dos filas de iconos. Tengo cuatro porque eso es realmente suficiente. Y no necesito usar más que eso. No necesito usar menos que eso. Está bien. Y por último, un último consejo es divertirse porque el proceso de diseño es ayudar a resolver los problemas de sus clientes, pero también para que usted como diseñador se divierta. Entonces, si estás explorando estos nuevos íconos que acabas de descubrir, tal vez estés muy emocionado integrarlos en los proyectos de tu cliente. Asegúrate de divertirte tanto como puedas, porque eso te va a permitir ser más creativo, estar más evolucionando en el diseño en sí, y probar nuevas ideas, probar posibles soluciones que enseñado e.g No son posibles hace apenas unos momentos. Se trata de burlarse. Se trata de divertirse. Así que solo asegúrate si estás usando estos iconos para divertirte lo más posible e intentar retratar ese fondo que no tienes sobre la usabilidad del diseño en sí. Entonces, si estás, por ejemplo creando un proceso, asegúrate usar estos iconos de una manera creativa, pero simplemente no exageres. Ser moderado. Asegúrate de seguir estos consejos, que mencioné en este video. Asegúrate de mantener la consistencia. Asegúrate de usar el mismo estilo de icono. asegura de usar el mismo paquete de iconos tanto como sea posible y asegúrese de divertirse. Eso es básicamente todo, que esos son todos los consejos para este video. Y una vez más, solo usa tu sentido común cuando estés usando estos iconos. No exageres. Solo asegúrate de usar el mismo estilo y ser moderado y divertirte. 84. ASIGNACIÓN de la SECCIÓN 10: Tu tarea para esta sección es solo para elegir un equipo aleatorio. Puedes elegir un equipo, por ejemplo, digamos autos de lujo. Y luego puedes intentar encontrar los diferentes íconos que van a encajar en ese equipo. Tal vez elige ocho o diez iconos diferentes e intenta emparejarlos. Intenta usar el mismo estilo. Intente usar el mismo grosor de línea, por ejemplo , un radio de borde, o diferentes colores de fondo, sea cual sea el tipo de estilo de icono que vaya a usar, intentó usar exactamente los mismos tamaños e intente para tener un ritmo consistente con tus íconos, por ejemplo, si éste tiene el fondo negro, asegúrate de que todos ellos tengan el fondo negro. O si el grosor de la línea es distinto, asegúrate de que todos tengan esto, tengan el mismo grosor de deleite. Asegúrate de organizarlos y ver cómo se ven juntos y ¿ quedarían bien en los proyectos reales? Entonces trata de practicar de esa manera. Entonces, cuando realmente empartes en un proyecto real va a ser mucho más fácil para ti entender qué tipo de práctica deberías usar y dónde encontramos realmente los íconos que funcione para ti? 85. SECCIÓN 11 Selección de colores: Seleccionar los colores adecuados puede ser realmente difícil para algunos diseñadores porque no quieres que tus diseños se vean demasiado aburridos, pero tampoco quieres que se vean demasiado juguetones. Es importante elegir colores de acuerdo a tu proyecto, acuerdo al equipo de tu proyecto, acuerdo al ritmo, entrar al ritmo de tu proyecto, lo que tu proyecto está tratando transmitir a los usuarios y mucho más. Entonces de eso vamos a hablar en esta sección. Cómo elegir los colores adecuados para su proyecto en particular. 86. Por qué el color es importante: Aparte de la tipografía, el ritmo, las cuadrículas y muchos de estos otros elementos, color es uno de los elementos más importantes en cada diseño. Sin color, los usuarios no sabrán a dónde ir. No sabrán qué hacer y no podrán distinguir elementos entre sí porque todos los elementos simplemente se verían iguales en blanco y negro. Entonces, en este video, discutamos por qué el color es importante y en qué deberías pensar cuando eliges colores para tus proyectos de diseño de UI UX. Establece el tono de tu proyecto. Entonces, ¿estás hablando de la manera más orientada a los negocios a tus espectadores, entonces vas a usar diferentes colores que si estás hablando de una manera lúdica y amable? Siempre hay que pensar en eso. Asegúrate de hablar con tus clientes, asegúrate de entenderlos profundamente , entender su industria, entender el nicho y, por lo tanto, cuando eliges colores para ese cliente en particular, asegura de establecer el tono. Si el tono es de negocios, entonces usa la piedra del negocio, pero asegúrate de seguir ese tono a lo largo de tu diseño. Entonces es agradable y coherencia. Para que tus usuarios siempre sepan cuál es el tono de tu diseño dondequiera que estén en tu diseño, determina el modo de los espectadores. Lo que quiero decir con eso es que si los colores son demasiado oscuros, entonces los espectadores van a estar de cierto humor. Si los colores son demasiado claros, entonces van a estar en un modo diferente. Si los colores son demasiado fuertes, tal vez van a ser fuertes en sus ojos. Van a estar en diferentes estados de ánimo. Así que asegúrate de prestar atención a todo ello y asegúrate de entender cuál es el estado de ánimo que quieres crear para tus espectadores. Una vez más, ¿es lo juguetón? ¿Es el negocio? ¿Es el aprendizaje? ¿Es el modo de enfoque? De todas estas diferentes métricas hay que aprender sobre su estado de ánimo. Entonces, por lo tanto, cuando estás eligiendo el color, tienes que tener ese estado de ánimo en mente. Entonces por ejemplo, si queremos que estén tranquilos y relajados, voy a usar algunos colores de la naturaleza, por ejemplo, blanco y verde y marrón y algo así. Si quiero mantenerlos bombeados, si quiero que la energía suba y la mantenga alta, entonces tal vez quiera usar algunos colores fuertes como el rojo, como el azul oscuro, el verde, y algo así. Así que asegúrate de prestar atención al estado de ánimo de tus espectadores porque es extremadamente importante en cualquier diseño. Destaca acciones. Entonces, por ejemplo, si quieres que hagan clic en un botón, elegirías el color de ese botón para destacar porque quieres que vean ese botón y luego tomen medidas, así que haga clic en él. O si quieres que envíen un formulario, si queremos que dejen tu correo electrónico, usarás el color para enfatizar aquellas áreas en las que quieres que hagan clic o que tomen medidas. Y claro, dependiendo de la acción que quieras que tomen, dependiendo de la industria que sea tu cliente, vas a elegir algunos colores diferentes y diferentes tonalidades de esos colores, simplemente guiando los ojos de tus espectadores hacia esa acción en particular que quieres que tomen. Ayuda con la legibilidad. Esto es increíblemente importante porque vista está realmente deteriorada durante casi dos décadas porque todos tenemos estos dispositivos con pantallas y la mayoría de la gente por ahí tiene algunos problemas con sus la vista. Por lo tanto, se asegura de que cuando estés planeando, especialmente para párrafos, especialmente para textos, asegúrate de usar los colores que no van a verse deteriorados en los ojos de tus espectadores. Lo que quiero decir con eso es que no son demasiado fuertes, pero también a la vez que no son demasiado débiles porque si su vista es débil, no lo van a hacer, no van a poder leerla. Los colores son demasiado débiles y al revés, así que hay que encontrar ese término medio feliz. Por lo tanto, tu legibilidad va a ser mucho mejor y tu tasa de rebote va a ser mucho menor porque van a quedar mucho más tiempo en la página y van a leer el texto y la información que pongas en tu diseño. Y por último, guía los ojos del usuario. Lo que quiero decir con eso es que si quieres que se vean de izquierda a derecha, puedes posicionar estratégicamente tus colores en esa dirección para que puedas guiarlos a través de tu diseño. Puedes organizar ese espectador experimentado como quieres que sean. Y luego, cuando miran de izquierda a derecha, pueden buscar por ejemplo colores más brillantes o colores más oscuros o algo así. Tú eres el encargado de su experiencia de usuario. Entonces, por lo tanto, convierte la experiencia del usuario a una mejor usando colores y navegando por ellos a través tu diseño usando el color. Hay muchas teorías y técnicas diferentes para elegir los colores que son importantes para su diseño. Entonces estos son solo algunos que encontré largo de los años que funcionan mejor para mí y para mis clientes. Así que asegúrate de navegar por Internet para obtener algunos consejos y trucos adicionales y mezcla para entender cuando estés diseñando para tener todas estas cosas en mente. Y solo para crear la mejor experiencia de usuario posible para tus usuarios mediante el uso del color. En la siguiente lección, vamos a hablar de qué colores existen. Entonces te veré ahí. 87. ¿Qué colores existen: Hay muchos colores diferentes por ahí, pero cuando eliges colores para tu diseño UI UX, tienes que pensar básicamente en tres colores, que es el color principal, los colores secundarios y el color terciario. color principal es el color que es el color general de su diseño. Se utiliza color secundario por ejemplo botones o para textos enlaces, hipervínculos y algo así. Y el color terciario es básicamente el color de acento. Ahora bien, esto no es cierto para todos los proyectos. A veces solo vas a elegir dos colores, por ejemplo y vamos a hablar de eso un poco más tarde en esta clase. Pero lo importante a tener en cuenta como diseñador UI UX es que no vas a usar color CMYK en la mayoría de los casos. Lo que eso significa es cian, magenta, amarillo y clave. La razón de ello es que esos colores se utilizan mayoritariamente para el diseño gráfico y para el trabajo de impresión. Porque estamos haciendo trabajo de pantalla, no vamos a usar esos colores porque no se traducen bien para proyectar los colores que vas a usar. En la mayoría de los casos para sus proyectos de diseño UI UX son códigos hexadecimales y color RGB. Los códigos hexadecimales son algo que es la abreviatura de hexadecimal. Y básicamente significa que en el 16, no te molestes demasiado al respecto. Es solo el recuento de píxeles dentro del color, pero solo recuerda, pero solo recuerda, los colores hexagonales sí tienen todos esos códigos diferentes. Vas a usar esos códigos hexadecimales en la mayoría de los casos. Y en algunos casos también vas a usar color RGB. Rgb significa rojo, verde y azul. Y también hay algunos otros colores como HSL, que es por tonalidad, saturación y luminosidad. Pero dependiendo de los desarrolladores, dependiendo del proyecto, dependiendo de si el cliente ya tiene sus combinaciones de colores y el color ya creado para ellos, vas a usar sus colores y colores en ese código de color particular, que mencionaron en su teoría. Entonces básicamente en este video, solo voy a mostrarte cómo funciona todo eso y cómo puedes encontrar esos colores. Aquí estamos en los sitios web de Apple y la mayoría de ustedes conocen Apple. Básicamente crean estos dispositivos y gadgets tecnológicos, y también tienen su sistema operativo para sus dispositivos móviles y dispositivos de escritorio. Todo eso no importa. Lo que importa, es que puedes hacer clic derecho en tu navegador y puedes instalar este plugin llamado selección de color, sobre todo si eres usuario de Google Chrome, como yo soy. Cuando hagas clic ahí, te va a mostrar todos estos diferentes colores que se utilizan a lo largo de esta página en particular. Ahora bien, estos no son todos los colores de la marca. No va a sacar colores de cada página en ese sitio web en particular. Pero si echas un vistazo aquí mismo, puedes ver todos estos colores. Para que puedas ver este color rosa púrpura, por ejemplo de este reloj y los textos que lo rodean, puedes ver este color azul. Quizás sea éste de aquí. Y si me desplazo hacia abajo, quizá podamos encontrar este color. Aquí está. Y si nos desplazamos más, se puede ver que este color oscuro para el texto es por ejemplo este y éste. Entonces, ¿podemos entender con bastante facilidad qué color es la marca utilizada en esta página en particular? Una vez más, estoy mencionando esta página en particular porque si cambio a la página de Mac por ejemplo aquí, están usando colores completamente diferentes. Entonces volvamos a la página principal y vayamos a aquí. Una vez más, llamarlo grande es completamente gratis. Lo vincularé en un PDF y podrás acceder a él. Simplemente puedes instalarlo en tu navegador. Y por qué esto importa es que simplemente puedes probar colores como te mostré. Así que simplemente haga clic derecho en color, elija entre estilos de página. Va a tomar estos colores de esta página en particular y luego mostrarte todos estos colores aquí mismo. Lo que puedes ver son los valores RGB para cada color en particular. Puedes quitar este color si quieres, y no quieres verlo aquí. Entonces si hago clic en este reloj de aquí mismo, se puede ver que tenemos colores hexadecimales. Entonces si cambio a hex, puedes ver como funciona esto. Entonces, si cambio entre RGB y hexadecimal, puedes ver claramente la diferencia. Ahora, los colores hexadecimales son estos colores, y este es el código de color. Voy a mostrar eso un poco más tarde dentro de Adobe XD. Ahora, cada herramienta por ahí tiene estos códigos hexadecimales. Entonces, si estás usando Photoshop, XD, sketch, Figma, no importa. Todos ellos los tienen, y todos suelen tener RGB y algunos de ellos también tienen HSL. Si un cambio a HSL, que es saturación de tonalidad y luminosidad, puedes ver cómo se ve esto. Entonces básicamente, puedes copiar esto, especialmente con códigos hexadecimales. Así que selecciona esta copia o controla C, control V con el botón derecho y pégalo en la herramienta favorita de tu elección. Y entonces puedes tener este color y trabajar a partir de este color. Esto es especialmente importante si estás trabajando con clientes que ya tienen sus sitios web completados. Si tienen sus aplicaciones completadas o algo así, y no saben qué colores usan, entonces simplemente puedes tirar del sitio web como debería mostrarte, haz clic derecho en color elegir de estilos de página y luego simplemente puedes entender qué colores han usado en su diseño. Esto es importante porque si quieren cambiar su paleta de colores, por ejemplo, más abajo en la línea. O si necesitas tener un color específico, entonces puedes usar este enfoque, copiar ese color en particular y luego usarlo en tu diseño. La otra forma de hacerlo es haciendo una captura de pantalla de su diseño anterior. Arrástralo a tu herramienta favorita de elección, en mi caso, Adobe XD, y luego simplemente muestrea ese color de tu diseño. Esto no va a ser un buen enfoque de deuda porque vas a perder algunos píxeles cuando hagas estas capturas de pantalla. Y por lo tanto, esos colores van a ser solo un poco diferentes si utilizas este enfoque porque esto es jalar del estilo de página. Entonces si lo retomo una vez más, aquí mismo, si hago clic derecho en la página y voy a Inspeccionar, se puede ver que si pasamos por el código, si vamos aquí mismo, se puede ver 1d1df. Entonces vayamos a aquí, uno d1, d1. Entonces puedes ver de inmediato, está tirando del estilo de página, así que está sacando colores directamente del código. Entonces no hay margen de error ahí porque está sacando directamente del código. Ahora bien, podrías estar pensando, sí, pero ¿qué pasa con estas imágenes? Así que tomemos esta imagen, por ejemplo, haga clic derecho en Inspeccionar. Aquí estamos y aquí tenemos este color. Entonces, si hago clic en él, lo puedes ver aquí mismo. Tal vez te estés preguntando qué pasa si mi cliente no tiene ningún sitio web existente donde vas a formar la paleta de colores en base lo que hablamos anteriormente, en base a lo que vamos a hablar en futuras lecciones en esta clase. Principalmente del nicho de industria en el que se encuentran, por ejemplo, si están en un sector bancario, si están en el sector de TI, las posibilidades dependen de quién sea el público objetivo, que el sitio web o el móvil app va a hablar con. Lo más probable es que vayan a elegir colores específicos en esos casos. asegura de explorar la competencia, asegura de ver lo que están haciendo, y asegúrese de formar sus colores en función de las necesidades de su cliente se encuentra en, basado en la competencia, basado en el modo de visor en el que quieras ponerlos. Entonces quiero que compren algo. ¿Quieres que disfruten del contenido y se queden más tiempo? Quiero ser serio, quiero ser juguetón. De todas estas cosas, vas a determinar el color que vas a elegir en tu diseño. Por último, como dije, asegúrate de usar la selección de color porque es realmente bastante simple. Simplemente haz clic derecho en cualquier página, te va a mostrar todos estos colores. Y básicamente puedes seleccionar este color, presionar copiar y pegarlo en tu diseño. En el siguiente video de esta clase, vamos a hablar sobre las combinaciones de colores y por qué son importantes en qué combinaciones de colores existen, y cómo seleccionar, eh, cuál, cuál es la correcta para ti. Entonces te veré ahí. 88. Combinaciones de colores: Hay muchas formas diferentes de combinar el color para sus proyectos de diseño de UI UX. Pero en esta clase y en esta lección, voy a hablar de sólo cuatro de los cuales son los cuatro principales y los cuatro que más se utilizan en el diseño, más uno adicional, que es una especie de un bono en esta lección, los de nuestra monocromática, análoga, complementaria y triádica. Entonces, exploremos todos estos y veamos cuáles son. Esquema de color monocromático es lo que sugiere el nombre. Solo vas a tomar un color y elegir diferentes hojas de ese color en particular. Entonces por ejemplo estás eligiendo el color azul, que es realmente oscuro, entonces vas a elegir diferentes tonos de ese color azul para que se corresponda mejor con ese color azul oscuro principal. Entonces, por lo tanto, vas a usar esos tonos más claros, por ejemplo, para tus botones o al revés, puedes usar los tonos más claros para el texto o los tonos más oscuros para los botones para el enlaces y cosas así. Los colores análogos son los colores que están uno al lado del otro en la rueda de colores, vas a elegir tres colores que están muy cerca uno del otro. Entonces cuando tomas rueda de colores y luego puedes elegir diferentes tonos de esos colores que están justo al lado del otro. Lo que esto te va a permitir es que tu diseño va a ser mucho más coherente porque va a parecer que pertenece el uno al otro. Tus elementos van a ser de colores similares, de énfasis similar con esos colores porque no vas a elegir diferentes tonalidades de tus colores, solo los colores que son siguientes el uno al otro en la rueda de colores. Colores de cortesía es lo que sugiere el nombre. Vas a tomar dos colores que están en la escala completamente opuesta de la rueda de colores. Y luego los vas a combinar. Puedes elegir tu color principal de esa rueda de colores. Y luego desde tu color principal, puedes colocar tu rueda de colores de esa manera para encontrar tu color complementario en el lado opuesto completo de la rueda de colores. Puedes usar diferentes tonos de esos colores, así que color medio y complementario. Pero siempre te sugeriré que elijas tu color principal y esto es lo más fácil hacer si tu cliente ya tiene algo como un logotipo o una tarjeta de presentación, o el color que le gusta. Y entonces simplemente puedes poner ese color en tu color. Nosotros elegiremos el color complementario, y por lo tanto, usted puede elegir diferentes tonos de esos colores. Y puedes saber qué color es el color complementario para ese color. Y por último, tenemos colores triádicos. Ahora, los colores triádicos son básicamente solo tres colores espaciados uniformemente en su rueda de colores. Así que puedes imaginarlo como un triángulo, y puedes rotar ese triángulo para elegir el color principal y los colores complementarios que están en el lado opuesto formando un triángulo, puedes elige tu color principal, y por lo tanto puedes seleccionar los otros dos colores que están en los lados pares de ese triángulo. Y el enfoque de bonificación es 603010. Ahora, este enfoque requiere tres colores diferentes que puedes elegir como quieras, pero asegúrate de elegir tu color principal, que va a comprender el 60% de tu diseño. 60 por ciento es la cantidad que vas a usar tu color principal, 30% es tu color secundario o complementario, y luego esos diez por ciento son tu color de acento. Este es un enfoque que se usa comúnmente en UI, diseño UX e InDesign en general. Así que básicamente puedes usar cualquiera de estos métodos los cuales se acaban mencionar para seleccionar esos tres colores que quieras. Y puedes usar triádico si quieres, solo para ver en el rectángulo cómo van a quedar esos tres colores. Pero asegúrate de formar esos colores de tal manera que no se abrumen entre sí. Si tu color principal es el 60 por ciento, entonces solo asegúrate de usar ese color para el 60% de tu diseño, luego 30% y luego diez por ciento que comprende el 100 por ciento de tus colores. No uses ningún otro color. Solo asegúrate si estás usando este enfoque en este método para usar solo esos tres colores. Entonces estas son solo algunas de las principales combinaciones de colores. Como mencioné, hay muchas, muchas, muchas otras combinaciones de colores diferentes, pero estas cuatro es lo que encontré, me funcionaron mejor a lo largo de los años. Y he encontrado que la mayoría de los diseñadores de la industria usan. En el siguiente video, te voy a mostrar algunas herramientas que te van a ayudar a seleccionar estos colores. Entonces te veré ahí. 89. Herramientas de selección de color: En este video, voy a mostrar algunas herramientas de selección de color que he estado usando en los últimos años. Y descubrí que la mayoría de estos, especialmente uno de Adobe, es lo que la mayoría de los diseñadores por ahí usan. Porque una vez que conozcas la herramienta, una vez que estés familiarizado con dos, te vas a quedar atascado con ella y la vas a usar nuevo porque si no está rota, no la arregles. Entonces como dije en este video, te voy a dar solo algunos ejemplos. Si no te gusta ninguno de estos, simplemente puedes navegar por Internet para encontrar el que funcione para ti. Entonces aquí está el primero que se llama Pelotón. Y se puede ver por el diseño en el sitio web, es realmente bastante antiguo. Ahora como se ve todo esto puedes dar click aquí mismo para seleccionar el solo color monocromático, como acabamos de hablar, colores adyacentes o tres colores, puedes ver colores triádicos. Así tríada de tres colores, tétradas, así para colores. Y por último, freestyle cuatro colores, y puedes seleccionar dos colores, tres colores como quieras. Entonces, como mencioné en el video anterior, dependiendo de lo que quieras crear aquí mismo, vas a seleccionar los colores monocromáticos por ejemplo o adyacentes, que son colores complementarios o algo así así. Entonces vamos por la tríada en este caso. Para que veas cuando empiezo a rotar esto, puedes ver los colores. Entonces digamos que este es mi color principal. Y puedes ver que están espaciadas uniformemente en este triángulo y me está mostrando todas las hojas de mi color principal. Y puedes mantener pulsada la tecla Mayús para mover los tonos individualmente. Entonces, si lo sostengo, y si selecciono esta forma, por ejemplo si selecciono esta, puedes ver que estamos obteniendo colores completamente diferentes aquí mismo. Entonces si lo giro hasta aquí, puede ver que ahora tenemos esta paleta de igualar de manera uniforme. Ahora, puedes ir a Presets y puedes elegir diferentes presets para este color triádico, lo cual es realmente útil si no tienes suficiente tiempo. Y a partir de los colores que has elegido, te está mostrando estos presets. Entonces, si volvemos a los colores, si lo rotas hacia aquí, por ejemplo, vuelve a los presets, puedes ver que ahora son completamente diferentes. Para que puedas elegir estos colores, puedes hacer lo que quieras con ellos. Y si nos escondemos de aquí, se pueden ver tablas de exportación. Si hago clic ahí mismo, puedes ver, puedes exportarlos como HTML, CSS, Less sass, ACML, y como texto, puedes exportar muestras de color y puedes exportar estas combinaciones de colores para las que nosotros creado, lo cual creo que es muy importante y muy útil porque esta herramienta es gratuita. Y por cierto, voy a vincular todas estas herramientas que están mencionando en este video dentro del PDF. Así que asegúrate de abrirlo, asegúrate de hacer clic en esos enlaces si quieres acceder a estos sitios web y a todos los recursos y consejos que están mencionando a lo largo de esta clase. Entonces básicamente ese es el Palatino para ti. Se puede aleatorizar, se puede restablecer, volver a los colores originales. Entonces aquí mismo, y como dije, puedes elegir el que sea, el estilo que quieras. A continuación, tenemos Color Hunt. Para que puedas ver una vez más, ahora tenemos algunas selecciones diferentes aquí mismo porque estas son preseleccionadas. Para que puedas acertar al azar, va a mostrar solo colores aleatorios. Puedes ir con mes popular, año, tiempo antiguo, o puedes elegir por este. Entonces si golpeo colores pastel, si esos son los colores que quieres para tu proyecto particular, tienes retro vintage claro, oscuro, sobre todo oscuro es importante y popular en el día de hoy y edad donde tenemos modo oscuro para el diseño de UI UX. Entonces, si estás diseñando para el modo oscuro, asegúrate de comprobarlo. Entonces puedes ver los tonos de piel, especialmente importantes para las marcas de belleza, por ejemplo , una vez más, volviendo a ese estado de ánimo de tus espectadores, volvemos a ese nicho. Vamos a volver con ese cliente. Entonces, cuando recojas todos esos puntos, cuando los conectes, ¿vas a entender qué tipo de color y combinaciones de colores necesitas realmente para tu proyecto en particular? Entonces, si nos desplazamos todo el camino hacia abajo, se puede ver que no los tenemos. Entonces si volvemos a aquí, no tenemos tríada monocromática de colores adyacentes, pero sí tenemos estos. Entonces estos son los modos, estos son los proyectos, estos son los e.g digamos industrias en las que se encuentra su cliente. Así que vamos con oscuro e.g y puedes ver todos estos. Te pueden gustar si quieres. puede ver que se publicó hace 13 h. Escojamos éste. Y si me cierro, puedes ver que me sale el código hexadecimal ahí mismo. Para cada uno de estos colores. Te puede gustar esta paleta. Se puede descargar como imagen. Y tienes todos estos colores aquí como códigos hexagonales y como RGB, que es lo que mencioné anteriormente, mayoría de los diseñadores de UI UX están usando códigos hexagonales y en algunos casos, RGB colores porque son fáciles integrar para tus desarrolladores en código. Por eso los están usando. Y también colores HSL a veces porque pueden usar porcentajes. Así que asegúrate de hablar con tus desarrolladores. Si recién estás empezando con estos colores, asegúrate de hablar con ellos. Es el código hexadecimal adecuado para ellos, o es el RGB o HSL, dependiendo de esos valores y esos, esa información que vas a obtener de tus desarrolladores, vas a elegir sus colores para este proyecto en particular. Entonces, una vez más, tienes más paleta oscura para adultos aquí mismo. Y si crees que este color no funciona, por ejemplo, puedes elegir los verdes para que puedas jugar con estos colores. A continuación tenemos colors.com, para que puedas empezar a generarlo. Una vez más, voy a enlazar todos estos sitios web en un PDF. Y lo que tenemos aquí mismo es este jabón. Tenemos todos estos colores diferentes que puedes explorar, puedes ver, puedes verlo, puedes ajustarlo. Se puede ver por daltonismo cómo se ve. Para que puedas elegir todos estos. Y si lo cerramos. Puedes crear un collage y puedes crear paleta a partir de la foto. Entonces, si tu cliente te está enviando ese logo o el color que le guste, puedes subir esa foto aquí mismo. Va a generar la paleta de colores partir de ese color en particular. Ahora, puedes ver que estás obteniendo los nombres aquí mismo, lo cual es genial si quieres usar estos nombres más tarde dentro de tu diseño como tokens, por ejemplo, cuando estás configurando tus colores a tus desarrolladores. Y entonces van a entender fácilmente qué color mencionaste porque pueden ponerlo dentro del código. Entonces, por ejemplo , este lobo maderero, Allah, Buster, y culta, pueden poner todas estas palabras dentro del código, conectándolas en la base de datos principal. Y por lo tanto, la base de datos principal va a sacar los nombres de estos colores y los va a representar como un sitio web o una aplicación móvil. Entonces, ¿cómo trabajas realmente con esto? Bueno, tenemos todas estas opciones aquí mismo para que puedas quitar el color, puedes ver tonos. Entonces digamos que quiero usar esta. Ahora tenga esa. Puedes guardar el color en favorito. Se puede arrastrar. Así que posiciona aquí para cambiar el aspecto de tu paleta de colores. Puedes copiar el código hexadecimal y puedes bloquearlo. Para que puedas elegir cualquiera de estos diferentes colores. Puedes arreglarlos. Entonces si un relicario, y digamos que quiero posicionar esto justo aquí va a quedar este color y no va a cambiar. ¿Cómo exportamos desde aquí? Tienes esto. Entonces digamos que me gusta esta paleta de colores, pero permítanme mostrarles realmente tan miradores. Y digamos éste, pero no estoy muy seguro. Puedo dar click ahí mismo. Entonces aquí mismo. Elige el hex o cualquiera de estos. Déjame ir al selector y déjame seleccionar por ejemplo este tono oscuro aquí mismo. Me gusta y puedo cerrarlo. Y por lo tanto puedo explorar mis colores más lejos de este color en particular o simplemente dejarlo como está. Y por último, si quiero exportarlo, puedes usar Control E o puedes copiar URL para enviarlo a los desarrolladores. Puedes exportarlo como PDF, lo cual es genial como imagen. Puedes obtener los colores CSS, lo cual es increíble para tus desarrolladores. Obviamente. Ase, SVG, que también es genial, y puedes obtener el código si tus desarrolladores también quieren el código. Por último, puedes incrustar el código para estos colores particulares si quieres guardarlos de esa manera a tus clientes o desarrolladores. A continuación tenemos Adobe Color, que es uno de los más antiguos del negocio. Pero en mi opinión, quizás sea una de las mejores porque está integrada con Adobe XD, con productos de Adobe, puedes abrirlos en una aplicación muerta de Creative Cloud si eres usuario Creative Cloud, y por lo tanto simplemente puede acceder a estos colores y abrirlos en el software de su elección. Puedes crear, puedes explorar, tienes tendencias, y finalmente tienes bibliotecas. Entonces dentro de las bibliotecas, puedes crear tu biblioteca y luego puedes abrir esa biblioteca en Adobe XD, por ejemplo, simplemente puedes copiar esos colores, pegarlos dentro de tu XD. Es realmente así de simple. Si eres usuario de Adobe, también hay una integración con Photoshop, integración Illustrator. Así que no importa qué herramienta estés usando de la familia de Adobe, vas a tener esa integración. Así que tenemos extraer equipo, extraer herramientas de accesibilidad de gradiente, lo cual también es genial. Entonces si hago clic ahí mismo, puedes ver la relación de contraste, puedes ver la partitura, puedes ver. Para que puedas verificar sal para fallar 17 Puntos y por debajo. Entonces tenemos que ajustar este color, pasar 18 puntos arriba y pasar por iconos y gráficos accionables si estás usando estos colores. Entonces básicamente lo que necesitamos cambiar es el color del texto. En este caso particular, que Adobe casos. Y aquí a la izquierda tienes todos los que mencioné. Entonces actualmente está en costumbre, pero si cambio a análogo y hago clic en él, se puede ver que sólo podemos elegir este color. Si vamos con monocromática, se puede ver cómo se ve eso triádico. Entonces básicamente tres colores. Y se puede ver ese triángulo que mencionamos. Entonces este es nuestro color principal, estos son nuestros colores secundarios y terciarios. Puedes tener cortesía. Así que en los lados opuestos en esta rueda de colores, split complementario. Entonces básicamente esto, y luego puedes elegir cerca o lejos que quieras que esto sea. Y puedes dividirlos, puedes moverlos por ahí. Puedes mover estos diferentes tonos para obtener la mejor paleta de colores posible. Y haz doble clic en split complementario. Entonces básicamente lo mismo pero el doble del color. Tienes el cuadrado, compuesto y tonos. Entonces dependiendo de lo que quieras, que mencioné a lo largo de este curso, siempre puedes ir con Custom y puedes ajustarlo como quieras resolver, por ejemplo, si elijo cortesía y si voy costumbre y quiero ajustar estos, Vamos a usar éste simplemente al azar. Vamos con esto. También puedes ajustar los tonos aquí mismo de este color en particular. Si selecciono este color, puedo ajustar los tonos para ese color en particular así. Puedo ajustar todas estas cosas. Puedo copiar este código hexadecimal de forma rápida si quiero. Y por último, puedes guardarlo como mi equipo de color, e.g. I. Puede nombrarlo. No conozco proyectos de mi sitio web, digamos. Y puedes ver los códigos que vas a conseguir ahí mismo. Entonces estas son las etiquetas que puedes verificar para la accesibilidad. Una vez más, sólo para ver si eso es lo suficientemente bueno. El equipo es seguro daltónico, lo cual es genial. Para que puedas guardarla si quieres. Va a aparecer en tus bibliotecas XD o bibliotecas de Photoshop. Por último, se puede extraer el equipo. Para que puedas extraer el color de la imagen y guardarlo como una paleta de colores. Se puede extraer el gradiente. Entonces lo mismo. Una vez más, las herramientas de accesibilidad, que mencionamos anteriormente y tenemos rueda de colores, lo cual es genial. Entonces, por último, si estás usando esto, asegúrate de guardarlo, va a aparecer en tu herramienta de elección. También tienes estos juegos de colores. Has cambiado de equipo para que puedas elegirlo. Has explorado, para que puedas explorar diferentes combinaciones de colores. Qué es tendencia, qué no. Entonces, si me cambio a tendencias, puedes ver lo que me va a dar eso. Entonces por ejemplo me va a dar un montón de imágenes que son tendencia. Y se pueden ver los colores que se toman de estas imágenes particulares. Entonces, si te gustan estos colores, puedes descargarlos como JPEG o agregarlos a la biblioteca, que una vez más va a aparecer en tu XD o Photoshop Illustrator o lo que sea que estés usando. Y por último, la selección de color, que mencionamos anteriormente. Una vez más, es genial. Voy a dejar los enlaces a todo lo que mencioné en el PDF. Pero realmente te recomendaría conseguir el color rosa porque te va a hacer la vida mucho más fácil. Este es el Spotify, así que tienes estos colores de Spotify y por supuesto puedes ir al sitio web de tu elección si quieres escoger los colores de ese sitio web en particular. Y te va a mostrar aquí mismo dentro del pico de color. Ahí vamos. Estos son los colores, estas son las herramientas son realmente espero que las encuentres útiles. Una vez más, te voy a dar todos estos enlaces en el PDF. Abre el PDF, haz clic en el enlace, quieres acceder a él y asegúrate comenzar a explorar estos colores. Asegúrate de explorar estas herramientas para ver cuál funciona mejor para ti. Y una vez que lo encuentres, asegúrate de explorarlo más profundo, asegura de, como viste en el color de Adobe. Asegúrate de explorar las tendencias. Asegúrate de subir imágenes, asegúrate de explorar y solo para ver y entender cómo elegir los colores para tus proyectos de la mejor manera para ti. En el siguiente video, te voy a mostrar cómo crear una guía de estilo de exportación para desarrolladores de Adobe XD. Entonces te veré ahí. 90. Guías de estilo para desarrolladores: La guía de estilo es una parte muy importante de tus diseños de UI UX porque en ella vas a presentar todos los colores, iconos, imágenes y todos los demás elementos que usaste en tus diseños UI UX. Vas a mostrárselos a tus clientes y lo más importante a tus desarrolladores. Porque de esa guía de estilo, pueden sacar información importante como color para usar en tu código. Entonces voy a mostrarte un proyecto que hice anteriormente para una de mis clases magistrales. Y voy a explorar qué es la guía de estilo y a mostrarte algunos consejos y trucos. Entonces aquí estamos en Adobe XD, y este es el nuevo proyecto del sitio web del banco. Y como dije, esto es de mi masterclass de Adobe XD. Voy a vincularlo en el PDF. Puedes comprobarlo si te interesa. Y aquí comenzamos desde la arquitectura del sitio web, pasamos a wireframes en papel, pasamos a wireframes en Adobe XD, pasamos al diseño de sitios web, al diseño de paneles. Y luego finalmente hizo diseño responsive y diseño responsive dashboard. También hicimos presentación de proyectos y finalmente, guía de estilo. Entonces, si cambiamos de capas a aquí, que es Document Assets, puedes ver todos los colores y códigos de color que se utilizan. Entonces, básicamente, estas son fichas de colores. Cuando pasas el cursor, puedes ver que el blanco liso es FFF. Si pasas el cursor aquí mismo, puedes ver así los valores RGB de opacidad 100. Si nos acercamos muy de cerca, puedes ver que tenemos la guía de estilo de proyectos aquí mismo. Entonces lo que te recomendaría que hagas es cuando estés creando estas guías de estilo de proyectos, asegúrate de incluir siempre el código hexadecimal si esos son los que requieren los desarrolladores o los códigos RGB. Si, una vez más, esos son los que requiere desarrollador. Además, lo que puedes ver aquí mismo es que tenemos blanco liso, que es este color. Y también incluí el código hexadecimal para que los desarrolladores puedan seleccionar fácilmente este código hexadecimal si así lo desean. Y avanzando más, se pueden ver todos estos otros colores. Lo que puedes hacer es darles este archivo XD. Entonces pueden simplemente tomar esto. Entonces si voy aquí mismo, puedo copiar este color. Así que haz clic derecho y copia. Puedo ir aquí mismo, copiar este color por ejemplo pegado en mi editor de código. Y por lo tanto puedo tenerlo en mi código o puedo seleccionarlo desde aquí y copiarlo. O aún mejor, puedes simplemente Control o Comando E en tu teclado para exportar esto como PDF. Cuando presionas Exportar, se va a exportar como PDF. Y luego, cuando los abran más tarde, simplemente pueden seleccionar este código hexadecimal del PDF, copiarlo y pegarlo dentro. También para la tipografía, se puede ver para la iconografía. Así que todos los iconos que usamos en ese proyecto en particular y todas las ilustraciones y elementos adicionales que utilizas. Puedes poner aquí mismo, pero también puedes hacer es justo aquí, ¿dónde está tu color? Siempre puedes luchar, por ejemplo , sombras de fondo, borrones, opacidad, cubiertas y todos estos otros elementos aquí mismo porque las puertas también aportan un erudito, porque todos esos antecedentes, sombras y desenfoque también tienen color en ellos. Entonces otra cosa que puedes hacer con este objetivo es compartirlo. Entonces, si solo selecciono este tablero de arte, ve a Compartir. puede ver que es sólo uno seleccionado. Entonces, si deszoom, se puede ver que no se selecciona nada más porque acabo de seleccionar este aeropuerto en particular. Entonces pero puede hacer es compartirlo. Puedo crear el enlace, pero en vez de Design Review, voy a usar el desarrollo. Puedo crear un enlace. Y mientras está creando, lo que quiero mostrarles aquí es que los desarrolladores puedan obtener este enlace. Pueden sacar todos estos colores de este enlace en particular. Y también puedes elegir este compartir para desarrollo para cualquier otro tablero de arte que tengas en tu diseño, por ejemplo, tenemos diseño de sitios web aquí mismo y tenemos muchos de estos tableros de arte, para que puedas seleccionar todos ellos. Puedes compartirlos para el desarrollo. Y por lo tanto, tus desarrolladores van a tener la deuda coloreada. Ellos pueden elegirlo. Entonces, si hago clic aquí para ver nuestra guía de estilo, los va a abrir en mi navegador, y va a mostrar en mi navegador cómo se ve todo esto. Entonces, si te muestro aquí mismo mientras se abre, entonces tenemos objetivos de proyectos. Entonces, dependiendo de cómo nombraste a tu tablero de arte, se va a mostrar de esa manera. Entonces, una vez más, tenemos todos estos colores diferentes. Entonces, si selecciono uno de ellos, por ejemplo, asegúrate de este. Y si cambio al código aquí mismo, puedes ver todos los colores y todas las tonalidades de mis colores, que se saca de aquí. Entonces si selecciono este, puedes ver que se llama Danger read y enseguida tenemos propiedades CSS. Entonces tenemos arriba a la izquierda ancho y alto, tenemos fondo, tenemos fondo aquí. Entonces es este código hexadecimal y tenemos opacidad de 100. Entonces básicamente lo que pueden hacer desde aquí es que pueden seleccionar copiar desde aquí. Pueden hacer click en este color. Aquí. Color copiado ordenar. Déjame esconderme solo para que lo veas. Entonces, si selecciono este color, haga clic en él, podrá ver el color copiado, así se copia a y luego lo pueden pegar dentro del código. También podemos cambiar a aquí. Para que puedas ver root para todos estos colores. Entonces una vez más, blanco liso, gris claro, gris oscuro, verde principal, todos los colores a los que nombré familias Point. Así que tenemos familias de fuentes, que también es genial para desarrolladores, todas ubicadas aquí dentro de nuestra guía de estilo. Y por último. Este personaje estilo nueve. Entonces, si nos desplazamos todo el camino hacia abajo, que es este. Entonces, si selecciono solo eso y vuelvo a cambiar al código. Entonces déjame seleccionarlo una vez más. Se pueden ver todos los estados que he creado para este diseño en particular. Entonces tenemos Visa, Blanco y Negro, mastercard. Mastercard Black and White sugiere cambiar todos estos logotipos. Y básicamente si hago doble clic dentro y voy con apariencia, si elegimos Control y pulsamos, se puede ver un degradado lineal. Así que todos los colores de un degradado lineal, se puede ver la dirección del degradado, la opacidad y la sombra paralela. Este es el que mencioné anteriormente. Entonces drop shadow tiene este color y tiene estos valores. Así que básicamente tus desarrolladores pueden sacar estos valores directamente desde aquí. Tienen el código CSS justo aquí una vez más. Y por último, si cambian a escuchar, pueden seleccionar esto. Y luego pueden ver dentro del CSS raíz todas las cosas desde aquí. Entonces básicamente, solo tienen que encontrar esta tarjeta aquí mismo y pueden copiar el código CSS desde ahí. Entonces si selecciono este, por ejemplo y se puede ver el estado predeterminado casi negro. Entonces, si sostengo mi Control y hago clic dentro, se puede ver gris claro. Si selecciono y hago clic dentro. Para que puedas ver este color, que es el color de su piel. Y si me acerco un poco más aquí. Así que vamos con 100, por ejemplo, si acercamos el zoom y hacemos clic en este color verde, por ejemplo puedes ver los colores para que puedan hacer clic, pueden copiar al portapapeles y básicamente pegar lo que quieran. Por último, pueden dar click aquí mismo en los comentarios. Y pueden tirar de este alfiler por ejemplo aquí. Y puedes decir algo como, ¿Te gustan estos íconos o deberían ser blancos y negros? Si dicen que sí, por ejemplo entonces lo que puedes hacer es hacer clic en este icono. Puedes volver al código, localizar uno de estos. Entonces, por ejemplo, digamos éste. Y sólo tenemos estado por defecto para ello. Y por ejemplo puedes crear diferentes estados para estos íconos. ejemplo, tenemos default, tenemos hover. Entonces puedes ver que cambia el color para el estado predeterminado y para el hover. Entonces, dependiendo de lo que hayas hecho con tus colores, va a reaccionar de esa manera en particular. Entonces iconografía, colores, lo mismo, misma historia. Entonces, cuando seleccionen, van a obtener CSS. Simplemente pueden hacer clic para copiar, el portapapeles y pueden pegarlo en su código. Entonces básicamente así de fácil es trabajar con Adobe XD con colores, con guías de estilo. Y siempre recomendaría que exportes esto como PDF porque tus desarrolladores podrían estar en movimiento. A veces pueden discutir esto con tu cliente. Asegúrate de enviarles el enlace de la guía de estilo en sí, para no confundirlos demasiado y asegúrate de enviarles enlaces separados. A menudo el diseño de wireframes, de papel, wireframes, lo que sea que esté haciendo, porque de esa manera pueden inspeccionar fácilmente todos estos colores. Porque si pones todos ellos en un solo enlace, lo cual puedes hacer, simplemente vas a confundirlos. Y descubrí que este enfoque funciona mejor con mis desarrolladores. Pero asegúrate de hablar siempre con tus desarrolladores primero antes de empezar a trabajar. Asegúrate de mencionar los colores hexadecimal o RGB. Asegúrate de ver si son buenos con algunos de esos colores. Y por último, que algo que no te mostré. Si selecciono este color, por ejemplo, puedo dar click aquí mismo. Déjame esconderme. Así se puede ver que tenemos color sólido, gradiente lineal, gradiente radial, y gradiente angular en XD, tenemos obesidad para el color, tenemos diferentes tonos de colores aquí mismo tenemos la opacidad para el canal Alfa para el color mismo. Y por último, tenemos el hex, RGB, HSB. Entonces, dependiendo de lo que quieran tus clientes y desarrolladores, puedes elegirlo desde aquí. Entonces básicamente eso es todo. Por eso estas guías de estilo de proyectos son realmente importantes porque en un solo lugar, tienes todos estos elementos que usaste en tu diseño. Cuando estés trabajando en tus proyectos, asegúrate de crear siempre estas guías de estilo en paralelo con lo que estás haciendo porque más adelante va a ser mucho más fácil exportarlas para tus desarrolladores para echarle un vistazo. Entonces básicamente eso es todo. Creo que viste lo importantes que son las guías de estilo para los desarrolladores. No son tan importantes para ti, pero pueden ser importantes para los otros diseñadores que podrían trabajar en este diseño en particular después de ti. Porque en la mayoría de los casos, tal vez no te interese seguir trabajando en este proyecto en particular. Puede que algunos otros diseñadores vayan a pisar tus zapatos y seguir trabajando en este proyecto. Así que al tener algo así como una guía de estilo, siempre va a ser mucho más fácil para ese diseñador continuar donde lo dejaste con el mismo estilo. Y claro, va a ser mucho más fácil para los desarrolladores trabajar con la guía de estilo, porque en un lugar singular, tienen toda la información que necesitan para comenzar a llamar a este proyecto. 91. ASIGNACIÓN de la SECCIÓN 11: Su tarea para esta sección es utilizar una de estas herramientas que mencioné en esta sección de la clase. Y para tratar de escoger tus colores favoritos para un proyecto. Intenta usar proyecto imaginario si has estado usando el mismo proyecto imaginario a lo largo de esta clase hasta ahora , asegúrate de usar la selección de color para ello también. Asegúrese de usar una de estas herramientas. Intenta entender qué colores funcionarían mejor, cuáles no funcionarían mejor, y trata de ver si esos colores son, digamos, deteriorados visualmente. Si usas una de estas herramientas en línea, algunas de ellas en realidad tienen esto. van a decir si estos colores van a pasar o no. Por lo que es muy importante utilizar esas herramientas para las personas con discapacidad de color y para las personas con discapacidad visual que en realidad están teniendo dificultades en realidad están teniendo dificultades para leer estos colores brillantes. Entonces como dije, explora, diviértete y ve qué colores te van a funcionar mejor e intenta ver una de estas herramientas y elige cuál es la adecuada para tu proceso. 92. SECCIÓN 12 Imágenes: Aparte de la topografía, las imágenes están ahí como un elemento crucial que cuenta una historia en tu diseño. Entonces, saber elegir un par de imágenes diferentes realmente va a hacer que tu diseño destaque entre la multitud. En esta sección, vamos a hablar de imágenes gratuitas versus pagas. Cómo elegir conjuntos de imágenes, cómo elegir el ritmo adecuado para tus imágenes y equipo adecuado dependiendo de tu proyecto y mucho más. Así que comencemos. 93. ¿Por qué son importantes las imágenes: Ya sabes lo que dicen, esa imagen dice mil palabras. Bueno, es la misma historia en pinturas que en diseño, sobre todo en diseño gráfico, pero lo mismo se puede decir en diseño web y diseño de aplicaciones. Entonces, elegir las imágenes adecuadas realmente puede determinar el ritmo que para los espectadores están mirando tu proyecto, ya sea un proyecto de aplicación o un proyecto de diseño de sitios web. También puede determinar el tono al que estás hablando con tus visitantes. Así que eso puede ser serio o divertido, juguetón. También puede determinar el ritmo a tus espectadores puedan mirar tu proyecto. Entonces lo que eso significa es que voy a usar imágenes más pequeñas, van a usar imágenes más grandes. ¿Vas a usar imagen de pantalla completa es imágenes de ancho completo y mucho más. También van a determinar qué tan juguetón o serio es o el sitio web. Y también van a determinar los colores que vas a usar. Es tu diseño, porque el tono de tus imágenes realmente va a determinar eso. Porque si estás usando por ejemplo imágenes realmente oscuras, entonces vas a usar algunos colores, lo que va a contrastar mucho mejor con esas imágenes oscuras. O si estás usando imágenes muy claras y aireadas, entonces vas a contrastar eso, pero usando algo mucho más oscuro, por ejemplo, ya sea un negro oscuro o un gris oscuro o un verde oscuro o algo así. Así que las imágenes son realmente el factor clave en la creación de tus diseños y elegir las imágenes adecuadas para tus diseños va a hacer o deshacer tu diseño. 94. 3 tipos de imágenes de proyectos: Cuando se trata de proyectar imágenes, realmente hay tres tipos principales. El número uno son las imágenes tomadas por el fotógrafo. Entonces estas son imágenes que tu cliente ya tiene alguna ha llevado a nuestro fotógrafo premium que ha tomado esas imágenes en sets y creado realmente toda la historia para tu cliente, luego entregar esas imágenes a su cliente. Y entonces tu cliente te va a entregar esas imágenes y tú a tu vez las vas a utilizar en tus diseños. Dos son imágenes gratis. Entonces esas son las imágenes que normalmente vas a encontrar en sitios web como Unsplash o Pixabay. Y estas imágenes aquí realmente un enorme defecto y esa variedad. Entonces, lo que eso significa es que puedes encontrar una gran imagen de un gran fotógrafo, y eso es básicamente todo. Por lo tanto, no puede encontrar otra imagen, por ejemplo modelo en una pose diferente, o una puesta de sol desde un punto de vista diferente, o una calle de la ciudad desde otro punto de vista también. Entonces no puedes encontrarlos. Y por lo general esas imágenes realmente no son de esa gran calidad. Por lo general hay algo así como 1920 por 1080 HD o al menos hasta k de tamaño. Por último, el número tres, nuestros conjuntos premium. Ahora bien, estos son los sitios web que puedes encontrar en línea. Normalmente, me gusta usar elementos Envato y su propio sitio web 2020, lo que significa que tienen más de 50 millones de imágenes para elegir. Y lo que eso significa es estos fotógrafos premium están creando escenas. Así que imagínense, por ejemplo visto en la oficina y luego están configurando esa escena. Están poniendo esa oficina. Están pagando por los modelos y están tomando cientos de imágenes diferentes desde todos los ángulos diferentes con diferentes modelos haciendo diferentes cosas. Y el beneficio clave de esas imágenes es que todas están tomando en un ambiente controlado por un solo fotógrafo bajo una sola fuente de iluminación con los mismos modelos, con el mismo equipo en la misma habitación. Entonces se entiende la idea. Estas imágenes se pueden utilizar fácilmente en tus proyectos. Y por ejemplo, si tienes que hacer un ligero cambio de ancho, por ejemplo brillo, entonces puedes hacerlo en algo como Adobe Lightroom. Y luego podrás tomar todas esas imágenes que descargues para tu proyecto. Puedes hacer un solo tweet, por ejemplo al brillo o a la opacidad, o al viñeteado o lo que sea que estés haciendo con esa primera imagen. Y quieres aplicar ese mismo cambio a todas tus imágenes, por ejemplo, has descargado el conjunto de 50 imágenes diferentes, entonces simplemente puedes aplicar ese primer cambio a la primera imagen y luego aplicarlo a través de muchas de tus otras imágenes de la misma colección, simplemente puedes sincronizar esos cambios. Y por ejemplo adobe Lightroom va a aplicar esos cambios. No tienes que usar Lightroom. Me gusta mucho usarlo porque soy usuario de Adobe. Yo uso Adobe XD o uso Adobe Photoshop. Yo uso Premier y, por supuesto uso Lightroom para todas mis imágenes. Y esa función me gustó mucho, pero no es solo en Lightroom. Lo puedes encontrar en otras herramientas y softwares por ahí. Así que solo asegúrate de buscarlo, pero te va a ahorrar un montón de tiempo. Entonces, ya sea que estés usando imágenes de clientes, tal vez vas a tener que ajustar algunas cosas aquí y allá. Porque generalmente estos fotógrafos están tomando imágenes fantásticas, pero quizás si estás creando sitios web diseñados para nuestro tono un poco más oscuro, digamos, entonces vas a aplicar algunos de esos cambios adicionales a esas imágenes. Por lo general, a los fotógrafos les gusta dejar esas imágenes bonitas fila. Entonces, por lo tanto, los diseñadores van a hacer a su vez esos cambios. Entonces por ejemplo Saturación, Brillo, contraste y cosas como deuda con esas imágenes. Una vez más, si estás usando imágenes gratis, las muertes son geniales, especialmente para clientes de bajo presupuesto, porque realmente no les importa cómo se vea su blog. Pero si estás trabajando con clientes que tienen presupuestos razonables, entonces puedes integrar fácilmente estos conjuntos de imágenes de primas en tu trabajo desde sitios como Envato Elements, por ejemplo y yo realmente lo recomendaría porque puedes encontrar millones de estas diferentes imágenes. Y a su vez, van a hacer que tu trabajo luzca mucho más profesional, mucho más pulido que si solo estás usando estas tres imágenes. 95. Cómo elegir imágenes de nichos: Hay muchas formas diferentes para que elijas imágenes de nicho, pero solo te voy a dar algunos consejos y técnicas sobre cómo lo hago y cómo lo he hecho en los últimos casi 20 años. Entonces, dependiendo del nicho en el que estés trabajando, hay cierto tono. Entonces, por ejemplo, si está creando un sitio web para trajes de hombre, por ejemplo , es muy probable que ese sea un sitio web de aspecto premium. Y están tratando de retratar un tono de profesionalismo, de un diseño limpio, de cierto estilo de vida que esos trajes van a retratar. Entonces obviamente no vas a usar algo así como un amarillo brillante o un rojo brillante o algo así. Seguro que vas a usar estos color gris claro son los colores gris oscuro, posiblemente un toque de azul, tal vez incluso dorado, pocos lugares si estás trabajando contra el color negro. Entonces te va a permitir destacar, obviamente los colores blancos. Entonces, cuando elijas tus imágenes, asegúrate de tener esas cosas en mente porque no vas a elegir tus modelos contra este fondo amarillo y contra el fondo, que va a arruinar el aspecto de tu traje. Obviamente, te vas a ajustar al tono. Entonces, lo que eso significa es que vas a buscar modelos que estén en estas posiciones en, por ejemplo fondos blancos adecuadamente expuestos porque va a ser mucho más fácil para ti integrarlos imágenes en tu obra. También modela contra el fondo negro porque puedes usar algo así como una obesidad de pantalla y luego puedes reducir ese fondo negro contra tu diseño. Por lo tanto, puedes extraer fácilmente tu modelo de tu fondo y adaptarlo fácilmente a tu diseño. Entonces este es obviamente solo uno de los ejemplos. Asegúrate de establecer el tono y ver en qué tono se encuentra tu nicho. Entonces, por lo tanto, vas a buscar imágenes que estén en ese nicho y en ese tono, lo cual es realmente importante porque tus visitantes van a alinearse mucho más fácilmente si ven cosas que entienden, más bien las cosas que no. Entonces, por ejemplo, volvamos a ese ejemplo de traje. Solo imagina que eres este caballero buscando un traje para tu boda, por ejemplo, o para la boda de tu amigo o algo así, entonces estás buscando una clase muy alta, algo realmente de lujo, algo muy caro, porque quieres presentarte para ese día y quieres verte bien. Entonces visitas este sitio web, que es todo gritando de colores y todo rojo, verde, azul. No te da esa sensación. No te da esa borra del sitio web que está vendiendo estos trajes caros. Entonces algo no va a sentirse bien. Algunas cosas que van a quedar bien. Quizás a primera vista, no lo vas a pensar demasiado. Pero a medida que empiezas a navegar, obviamente vas a notar que aquí algo no es bueno. No te va a dar esa confianza para comprar ese traje, porque no te va a dar esa vibra que normalmente esperas del sitio web del traje. Entonces vas al sitio web de la competencia, que tiene todas estas cosas de las que hablamos para este ejemplo en particular, te vas a sentir mucho más como en casa ahí. Te vas a sentir mucho más cómodo con tu decisión de compra y te vas a sentir mucho más como en casa, por así decirlo, porque tus expectativas son satisfechas por este sitio web en lugar de este sitio web anterior con todos esos colores verdes. Entonces por eso es realmente importante a la hora de elegir imágenes, asegúrate de elegir imágenes de nicho, que tu audiencia se va a relacionar fácilmente. Por lo tanto, su sitio web a cambio va a ser mucho más relacionable con sus usuarios y aplicaciones móviles también para el caso, porque sus usuarios van a reconocer estas pistas, estas imágenes , estos colores, estos estilos, porque están acostumbrados a ellos. Así que no intentes experimentar demasiado e ir salvajemente con tus imágenes. Asegúrate de apegarte a lo que sabes y asegúrate de apegarte a lo que funciona, que es lo más importante. Después de todo, se asegura de que tus usuarios se sientan cómodos cuando visitan tu sitio web o tu aplicación móvil. Porque a cambio, eso va a traer más conversiones. 96. VS Premium: En este video, te voy a mostrar algunas diferencias principales a la hora buscar imágenes tú mismo. Entonces estos son los ejemplos cuando tu cliente no tiene ninguna imagen. Entonces hay que buscar imágenes para ese proyecto en particular. Y te voy a mostrar algunas diferencias clave entre las imágenes gratuitas y premium y lo que se supone que debes buscar cuando estás buscando imágenes. Entonces aquí tenemos nuestro sitio web llamado unsplash.com, que suele ser lo que estos diseñadores están usando hoy en día. Y también hay pixabay.com y muchos de estos otros sitios web. Pero generalmente Unsplash y Pixabay son los sitios web que normalmente van a buscar. Entonces, si tecleamos un traje, por ejemplo, como te mostré en ejemplos anteriores. Y como hablamos en el video anterior, solo voy a mostrarte y comparar las diferencias entre el sitio web gratuito y el premium. Entonces como dije, tenemos un traje aquí mismo y voy a copiar este texto y voy a venir a este sitio web que está en elementos volátiles, que es un sitio web premium. Y simplemente voy a pegarlo aquí mismo. Busca las fotos, pero puedes buscar todas estas cosas diferentes. Así que stock video, plantillas de video, música, efectos de sonido, plantillas gráficas como plantillas de impresión y UI, UX kids, presentaciones gráficas sucede, fotos, fuentes , complementos, plantillas web, 3D y mucho, mucho más. Entonces escribimos trajes y también tienen este sitio web llamado 2020 con 50 millones de imágenes adicionales. Sí, eso son 50 millones de imágenes adicionales. Y todas esas imágenes que son realmente de alta calidad subidas por todos estos fotógrafos independientes. Entonces, si vamos a ese sitio web que es 2020 stock y escribiendo traje aquí mismo. Así que tenemos exactamente la misma consulta de búsqueda en todos estos sitios web. Y lo que tenemos aquí mismo en Unsplash es cuando flotamos, tenemos esta carrera de cazadores. Tenemos otro fotógrafo, otro fotógrafo, otro fotógrafo. Entonces todos estos son fotógrafos diferentes. Entonces vamos con, veamos, este es Benjamin Roscoe así como este. Así que visitemos su perfil. Como puedes ver, están tomando imágenes de skylines, barras, detalles inversos. Aquí mismo tenemos algunas imágenes de esta persona en traje. Pero eso es básicamente lo que es. Se puede ver que sólo tenemos tres o cuatro imágenes distintas. Y una vez más, estas imágenes de barra todo el camino hacia abajo. Una vez más, si hago clic en esta imagen, por ejemplo lo que tengo aquí mismo es puedo hacer clic, Leer más para ver todos estos diferentes detalles. Y puedo escribir la info. Podemos ver que la cámara es Sony, ISO 400, y estas son las dimensiones. Entonces estos en realidad son bastante buenos en esta etapa. Y se puede ver cuántas descargas y utilizar esta imagen tenía. Pero si volvemos y hacemos clic en esta imagen, por ejemplo, entonces vamos a info. Ya ves que son cinco K. Pero una vez más, tenemos el mismo problema. Entonces, cuando hago clic en este perfil, por ejemplo, puedes ver que sí tenemos estas muchas imágenes diferentes, pero solo hay una imagen de un traje. Así que imaginemos que quieres usar este color particular de traje, por ejemplo y quieres usarlo en este entorno. Entonces digamos que adentro contra estas escaleras y cosas así. Así que solo puedes imaginar que tu modelo va a ser fotografiada en interiores, por ejemplo, digamos dentro del centro comercial, haciendo un viaje de compras o algo así. Entonces hay que encontrar imágenes de esa naturaleza. Bueno, esta es solo una imagen y básicamente estás atascado. No tienes ninguna otra opción. Entonces, si volvemos y echamos un vistazo a todas estas otras imágenes de un traje. Como pueden ver, no hay mucho más. Quizás esté éste, pero tiene un árbol de Navidad dentro de él. Entonces no va a funcionar para todas tus ocasiones. Y como puedes ver, no hay mucha opción aquí no hay mucha opción para tu proyecto en particular. Entonces podemos ir a algunos de estos sitios web y podemos encontrar algo que nos va a funcionar. Entonces digamos que este es el centro comercial y esta es la tienda dentro del centro comercial. Así que vamos a abrir eso dentro de una nueva pestaña. Notemos rápidamente que esto es de ocho K de tamaño, por ejemplo y puede leer más esta información. Puedes conocer más al respecto. Y podemos ver que son cuatro, requiere taller de diseñador de sastrería. Pero si me desplazo por aquí, pueden ver que es todo de la misma serie. Para que puedas ver este mismo modelo, mismo fondo, misma iluminación, mismo fotógrafo. Para que puedas ver acerca de las imágenes, es un fotógrafo. Entonces todos ellos, y lo genial de ello es que si hago clic, Ver más y abro en nueva pestaña, puedes ver cuántas de estas diferentes imágenes tenemos. Así que claramente puedes elaborar una historia a partir de todas estas imágenes. Para que pueda comenzar en su página, por ejemplo , dando la bienvenida a su usuario a su tienda y luego explicándole. Calidad de tus trajes y cómo están hechos, cuánto tiempo le toma a cada persona ver un botón en particular, por ejemplo y cosas así. Así que realmente puedes acercar los detalles con estas imágenes porque son ocho K de calidad y son realmente enormes. Luego puedes contarles cómo va a funcionar el ajuste cuando prueben el traje, cómo los hace sentir, cuándo se obtienen los materiales para el traje y mucho más. que lo puedas hacer con estas imágenes premium. Realmente se puede contar una historia en lugar de simplemente mostrar una imagen singular. Lo que eso va a hacer es que va a hacer que tu sitio web se vea mucho más profesional, mucho más pulido. Porque una vez más, puedes sumergir a tu espectador en esa experiencia porque tienes todas estas imágenes diferentes del mismo conjunto. Así que vamos a echarles un vistazo una vez más. Se puede ver que están tomando café. Tenemos cabida justo aquí. Tenemos pruebas del material. Tenemos cabida justo aquí. Tenemos por ejemplo acuerdo aquí tenemos algunos materiales diferentes. Tenemos como va a encajar la corbata. Entonces se puede ver claramente solo de un ejemplo, un préstamo para esto se ajusta a cuántas de estas diferentes imágenes tenemos. Así que puedes imaginarte acercando estos detalles y cuánto puedes hacer realmente con todas estas diferentes imágenes en lugar de estas diferentes imágenes en lugar solo con una sola imagen. Por último, aquí podemos hacer lo mismo. Entonces si escribo sido demandado y lo abro, tienes estas diferentes colecciones. Y dentro de estas colecciones. Entonces, si los abro, puedes encontrar diferentes fotógrafos. Entonces por ejemplo me gusta mucho este traje. Tal vez pueda entrar y buscarlo, o tal vez incluso pueda echarle un vistazo a este. Entonces estas son las colecciones. Puedes abrir estas colecciones de estos diferentes fotógrafos y luego puedes explorar imágenes adicionales. Entonces aquí tenemos esta imagen y este modelo. Entonces, si hago clic aquí mismo y abro sus colecciones, tenemos estas diferentes fotos, tenemos diferentes Amores, tenemos todas estas cosas diferentes aquí mismo. Así podremos explorar y ver todas las imágenes de este fotógrafo. Se puede ver claramente que tenemos montón de estas diferentes imágenes. Pero una vez más, si no te apetece el 2020 y todas estas imágenes diferentes, siempre puedes volver a los elementos de Envato porque estas dos son parte de la misma colección. Entonces, cuando recibas esta suscripción a Envato Elements, que es una suscripción anual, esta va a ser incluida. Entonces, si no puedes encontrar una imagen aquí, entonces quizás puedas probar el 2020. puede ver que dice por Envato. Entonces esas son solo algunas comparaciones diferentes entre imágenes gratuitas y de pago. Solo asegúrate de entender que no puedes hacer trabajo profesional altamente pulido con imágenes gratis debido a estas limitaciones que acabo de mencionar, tienes que usar activos profesionales como imágenes de, por ejemplo, Envato Elements. No tienes que usar elementos Envato. Son un montón de diferentes sitios web por ahí. Pero porque como te mostré lo que está incluido dentro de tu suscripción, me gustaron mucho y los uso todos los días para mis proyectos. Esto a cambio va a hacer que tus proyectos luzcan mucho más pulidos, mucho más profesionales. Y si estás tratando de venderte tu diseño a tu cliente, por ejemplo, si estás tratando de presentarle una idea de diseño o un cambio de diseño, rediseño completo o algo así. Haciendo eso con estas imágenes profesionales y pulidas, va a ser mucho más simple que simplemente abofeteando algunas imágenes diferentes de diferentes fotógrafos con diferentes exposiciones, con diferentes modelos en una página y luego tratando de venderles deuda. 97. Optimización de imágenes: Una parte clave más cuando estás creando proyectos usando estas imágenes, especialmente estas enormes imágenes, es la optimización de imágenes. Lo que eso significa es que un software de su elección va a reducir el tamaño de la imagen, que a su vez va a subir mucho más rápido al servidor, por ejemplo que a su vez va a cargar su sitio web mucho más rápido, dándole un mejor ranking de Google, lo que significa un mejor SEO. Entonces, básicamente, esta optimización SEO es extremadamente importante, especialmente en los proyectos de diseño de sitios web, en proyectos de diseño móvil , también es muy importante, especialmente si estás tirando de la misma base de datos. Por lo que optimizar tus imágenes va a dar a tus usuarios una experiencia mucho mejor sin perder ninguna calidad de estas imágenes originales. Entonces, si te llevo una vez más aquí mismo a Envato Elements, puedes ver por ejemplo esta imagen que estábamos viendo anteriormente. Entonces como puedes ver, casi ocho K de tamaño. Entonces, cuando presione descargar, va a sacar todos estos proyectos de clase diferentes. Entonces por ejemplo voy a llamarlo proyectos de imagen. Para nuestro proyecto de imagen, por ejemplo y simplemente puedo crear este proyecto. Ahora lo que esto significa en Envato Elements es que puedo agregar todos estos diferentes elementos a este proyecto en particular. Así que puedes imaginarte que voy a usar todas estas diferentes imágenes. Voy a usar diferentes íconos, tal vez incluso un tema de WordPress. A lo mejor necesito algo de música de mis videos. Entonces todos esos diferentes artículos que descargaste de Envato Elements simplemente puedes poner en este proyecto que creamos hace un momento. Lo que esto significa es que va a ser mucho más sencillo para tus clientes licenciar todos estos artículos en caso de que tal cosa sea necesaria. Entonces, por ejemplo, puede usar una suscripción para un número ilimitado de clientes, y cada cliente puede tener sus propios proyectos. Lo que significa que la licencia puede ser tan simple como simplemente copiar una licencia y luego enviarla a sus clientes. Ellos a su vez van a contener esta licencia y van a conservarla. Por lo que no es necesario que actualices estas licencias cada año. Básicamente, una vez que lo pagas, una vez que lo descargues, Eso es todo. Así puedes licenciar fácilmente todos estos diferentes elementos, incluyendo imágenes en Envato Elements para tus proyectos. Entonces si volvemos a aquí, simplemente puedo hacer clic en nuestro proyecto de imagen para crear este proyecto. Entonces simplemente puedo agregar y descargar. Y va a empezar a descargarse aquí mismo. Ahora, se puede ver que esta imagen es bastante enorme. En realidad es de casi 18 mb de tamaño. Así que una vez que se descarga, ahora, es el momento de optimizar nuestras imágenes. Ahora, la optimización de imágenes no es nada realmente nuevo. Lo hacen los desarrolladores desde hace décadas, n por diseñadores desde hace algunas décadas también. Básicamente lo que es, es que simplemente va a reducir el número de píxeles dentro de tu imagen. Va a contener el tamaño de tu imagen. Va a contener nitidez, va a contener calidad. Pero a su vez, te va a dar un tamaño de archivo mucho más pequeño porque todas estas cámaras diferentes simplemente están agregando el tamaño del archivo, especialmente dependiendo de la lente que estés usando en el modelo de cámara que estás usando. Entonces, para no aburrirte con demasiados detalles, te voy a mostrar eso en la práctica. Entonces porque estoy en Windows, estoy usando algo llamado el motín. Y si estás en una Mac, puedes usar algo llamado imagen óptima de un bucle, el archivo PDF, y simplemente puedes hacer clic en el enlace para descargar el que necesites un nuevo deseo. Y hay muchas herramientas diferentes por ahí para ambos sistemas operativos, tanto Windows como Mac. Entonces, realmente depende de ti decidir cuál quieres elegir. Yo elijo, ¿verdad? Y lo uso desde hace años y me funcionó bien. Entonces, si te llevo de vuelta, simplemente puedes ver cómo se ve la derecha. Y ahí está. Es realmente una herramienta básica y realmente quieres que puedas aprender fácilmente a usar y básicamente lo que hace. Eso, tiene estos dos Windows y si arrastro y dejo caer mi imagen dentro, entonces esta es la imagen que hemos elegido. Puedes ver que puedes abrir imagen, puedes importar imágenes por lotes, lo que una vez más es realmente importante, sobre todo si estás trabajando con estas colecciones. Así que no perder ningún tiempo. Solo imagina que tienes por ejemplo 50 imágenes diferentes que lo descargues. Y esa es la gran manera, por ejemplo de elementos Envato. Puede que ni siquiera uses todas estas imágenes, pero es genial porque están ahí. Simplemente puedes seleccionarlos todos, descargarlos todos, ponerlos en la misma colección. Ahora, optimice todos usando derecho, por ejemplo así que aquí mismo, simplemente voy a usar una imagen. Y lo que voy a hacer es que voy a hacer click y arrastrarlo hasta aquí. Entonces una vez que se cargue, me va a avisar esto. Entonces este archivo contiene una imagen de alta resolución, ¿verdad? Puede manejar tales imágenes, pero el procesamiento puede ser bastante lento en esta situación. Ellos quieren redimensionarlo primero. Se recomienda que no se modifique la imagen original. Entonces solo fíjate lo que va a pasar cuando haga clic en Sí. Nos va a dar esta talla original. Entonces va a escalarlo nuevo tamaño, 100 por 100. Así que mantén la relación de aspecto. Esto es en porcentaje porque puedes ver aquí mismo y puedes bajarlo en píxeles específicos. Pero te recomendaría que mantuvieras este porcentaje por igual. Entonces entonces simplemente va a pensar, se bajó básicamente al 100 por ciento? Lo que esto significa es que cuando hago clic en Bien, puedes ver la imagen inicial aquí mismo. Entonces 17.5 mb de tamaño y la nueva imagen es de 3.4 mb de tamaño. Ahora se va a cargar mucho más lento. Así que cuando haga clic aquí mismo y hover, se puede ver 17.5 mb. Y esta es la imagen de aquí mismo. Pero cuando lo optimice, va a ser 3.4. Entonces cuando golpeé Guardar, Bien, aquí, queremos reemplazarlo. Quiero escribir, sí. Y básicamente va a sustituir a esta imagen. Así que cuando haga clic ahora y hover 17.5 mb, así que permítanme refrescarlo rápidamente. Y se puede ver que es de 3.4 mb. Entonces básicamente empezamos con 17.5 mb. Ahora estamos en 3.4 mb. Y lo que es lo más importante de todo, si flojo aquí mismo, se puede ver 7952 con 5304. Y si te llevamos de vuelta hasta aquí, puedes ver que estas son exactamente las mismas dimensiones ya que funcionan con la imagen original. Simplemente reduce el tamaño de la imagen sobre todo. Entonces, lo que esto significa para ti, básicamente, va a dar a tus desarrolladores mucho más espacio de juego porque reduzcas este tamaño de archivo, puedes ir aún más allá. Por ejemplo, uso Adobe XD a diario para diseñar todos mis proyectos. Así que puedes imaginarte que voy a poner esta imagen de ocho K en algo que es, digamos por ejemplo , 1920 por 1080. Y entonces voy a exportarlo de XD en esa resolución en particular. Entonces 1920 por 1080, lo que va a reducir aún más el espacio requerido. N va a reducir aún más el tamaño de esta imagen. Se podría decir, ¿por qué no usarlo así de inmediato? Bueno, porque estás tirando todas estas enormes imágenes en el software de tu elección. En mi caso, Adobe XD va a rezagarse masivamente porque se trata de archivos enormes. Como viste, solo esta imagen en particular es de 17.5 mb. La mayoría de mis archivos rondan los 20 mb. Así que puedes imaginarte que todo el archivo de diseño es 20 mb y esta solo una sola imagen es de 17.5 mb. Así que solo ten esas cosas en mente cuando estés creando, especialmente para web, porque estás tratando de hacer Google Optimize este sitio web. Estás tratando de hacer que la cantidad de personas encuentre este sitio web como sea posible. Por lo que es muy importante para ti optimizar estas imágenes. Y cuando trabajas con proyectos de diseño móvil, también es importante. Porque entonces el sistema operativo y la propia aplicación, no va a sacar todas estas enormes imágenes de la base de datos, simplemente va a sacar una imagen singular que es bastante pequeña en tamaño. Y todavía va a contener esta enorme cualidad que originalmente la tenía. Cuando el fotógrafo tomó esa imagen. 98. Estructura de nombres: Al igual que con la optimización de tus imágenes, es muy importante nombrar tus imágenes correctamente porque de esa manera se van a mostrar correctamente en tu sitio web o en tu aplicación móvil. Va a ser mucho más sencillo para tus desarrolladores encontrar estas imágenes, para incluirlas en código. Y va a ser mucho más sencillo para código sacar estas imágenes de las bases de datos. Entonces déjame mostrarte lo que quiero decir en la imagen que acabamos de descargar. Entonces si echamos un vistazo a esta imagen, seguí adelante y la descargué nuevamente en el mismo proyecto para que puedas ver el nombre hasta el año, dash PA a VBC y C4 o lo que sea. Esto es, el reducido la imagen. Entonces como puedes ver una vez más, 17.5 mb sal tamaño original, y puedes ver el título aquí mismo. Y si tomo tu derecha aquí, puedes ver que tenemos un nombre así. Entonces qué podemos hacer con esta imagen porque va a ser tomada en nuestro software de elección. En mi caso, Adobe XD. En tu caso, podría ser Sketch, figma, Photoshop Illustrator realmente no importa. Entonces lo que puedes hacer con esta imagen es que puedes hacer clic derecho sobre ella y cambiarle el nombre de esa manera. De esa manera, cuando lo arrastre y lo suelte en software de tu elección va a recordar ese nombre. Y luego cuando lo exportes, lo va a exportar así. La otra cosa que puedes hacer es que puedes ir a algo como Lightroom, por ejemplo y puedes editar metadatos de esta imagen en particular, lo que te va a dar mucho más detalle sobre cuándo está esta imagen, se ha filmado con qué cámara, con qué lente con la que exponga y así sucesivamente. Entonces esto podría ser requerido de usted si está trabajando en algún tipo de proyecto de diseño gráfico, por ejemplo, para editoriales y cosas así, especialmente si esa imagen se va a imprimir en lienzos enormes. Así que algunos clientes enormes de gama alta van a requerir toda esa información para Mu. Así que asegúrate de entender que no importa en qué tipo de proyecto estés trabajando, hay algunos requisitos por tu parte, pero para la mayoría de estos proyectos web y proyectos de diseño de aplicaciones, simplemente renombrar su archivo va a ser lo suficientemente bueno. Entonces, si te llevo una vez más aquí mismo a nuestra imagen, lo que puedes hacer es imaginarte que esta imagen, por ejemplo, va a estar ubicada en tu sección de héroes. Lo que puedes hacer es hacer clic derecho Renombrar y simplemente llamarlo héroe, IMG. O si eres un desarrollador quiere agregar guiones, luego agrega hero, dash, IMG o guión bajo como este. Así que aquí subrayan IMG. Entonces esto realmente depende de desarrollador a desarrollador. Entonces, cuando estás iniciando tu diseño, si tienes acceso, información de contacto de tus desarrolladores, quizás simplemente pregúntales esto, o simplemente pregúntale a tus clientes para que puedan preguntarle a tu desarrollador. Entonces esto a su vez va a ser mucho más rápido para usted cuando comience a crear para que pueda cambiar el nombre de todas estas imágenes y activos, por ejemplo, como iconos e ilustraciones antes de comenzar a trabajar, luego más tarde cuando empieces a trabajar. Y luego tienes que cambiar el nombre de todos estos archivos una vez que realmente los incluyas en el software de tu elección. Sé que en Adobe XD es realmente un gran dolor cuando incluyes imágenes como con este nombre vio hasta el error 58, lo que sea. Y luego, cuando intentas exportarlos a tu escritorio y quieres enviarlos a nuestros desarrolladores, entonces tienes que cambiarles el nombre manualmente a todos En tu carpeta de exportación, por ejemplo y especialmente si compartes con algo como retoño por ejemplo con tus desarrolladores, entonces tienes que cambiarles el nombre en Sapling. Entonces es realmente un ajetreo. Si puedes cambiar el nombre de todas tus imágenes o al menos algunas de tus imágenes por adelantado. Porque de esa manera va a ser mucho más sencillo para ti diseñar. Y además se asegura de preguntar a tus desarrolladores qué tipo de abreviatura les gusta? Además, si por ejemplo estás usando esta imagen de héroe y solo imagina que si te llevo aquí mismo, quizás esto va a ser sobre nosotros. Este va a ser el producto uno, esta va a ser la sección uno del blog. Esto va a ser testimonial uno o lo que sea. Asegúrate de cambiar el nombre de todas tus imágenes correctamente. Entonces, por ejemplo si tu testimonio tiene cuatro imágenes, entonces pregúntale a tu desarrollador sobre las abreviaturas. Entonces, por ejemplo, guión testimonial uno guión testimonial dos guión tres guión cuatro y lo que sea o guión bajo o sin guiones, guiones bajos y así sucesivamente. Así que solo testimonial para todos ellos combinados. asegura de preguntarles, ¿les gusta el bloqueo de mayúsculas activado? Pero la mayoría de los desarrolladores no. La mayoría de los desarrolladores al menos que conozco, les gusta usar imágenes con letras minúsculas y números para que no les guste que sean gorras Mira por ejemplo, así que estos son solo algunos consejos y técnicas Me gusta compartir con ustedes porque creo que va a mejorar su tiempo en estos proyectos masivamente, y va a mejorar la calidad de su entrega a sus clientes masivamente. 99. ASIGNACIÓN de la SECCIÓN 12: Tu tarea para esta sección es solo para elegir un proyecto diferente en el que quieras trabajar. Si usaste uno, el mismo equipo a lo largo de este proyecto, puedes usar ese, por ejemplo y asegúrate de elegir cinco imágenes diferentes que funcionen mejor para ese proyecto en particular e intentar optimizar ellos usando algunas herramientas que mencioné en esta clase. Y solo traté de ver qué tipo de impacto va a tener cuando realmente empiezas con tu diseño. 100. SECCIÓN 13 Tablas de humor: Los tableros de estado de ánimo son una excelente manera de ponerte de humor, ahí el nombre de las palabras de humor de todos modos, y son increíblemente fáciles de crear. En este moderno diseño las herramientas que solían ser un verdadero ajetreo serán Castle. En los tiempos en que solíamos crear sitios web y aplicaciones con Photoshop, por ejemplo, pero ahora con estas modernas herramientas de diseño, es más fácil que nunca crear mood boards. Y son increíblemente útiles para ponerte de humor, para inspirarte, y para entender un poco mejor lo que tu cliente realmente necesita de este proyecto, que son los colores que debes usar, ¿Qué tipo de imágenes deberías usar? Y sólo para inspirarte sobre este proyecto. Así que comencemos. 101. ¿Qué son las tablas de ánimo y por qué usarlas: mood boards son realmente extremadamente importantes y son en mi opinión, la parte clave de cada proceso de diseño, ya sea que el proyecto sea grande o pequeño, porque en la etapa de mood boarding, realmente puedes comunicarse claramente con sus clientes y llegar al punto en cuanto a lo que necesitan. ¿Con quién están hablando? Qué tan grande es el proyecto, qué tan grande es el público, quién es el público y todas estas preguntas diferentes. Y puedes usar el mood board para determinar la dirección general del proyecto, hacia dónde va a ir el diseño. Puedes hacer esto antes de empezar a diseñar, lo que te va a ahorrar mucho tiempo porque vas a determinar el estilo, el proyecto paga, los colores, las fuentes, la iconografía, y mucho más en esta etapa particular con moodboards, en lugar de más tarde, cuando realmente enciendas tu software de diseño favorito y comiences a diseñar, puedes comunicar claramente estos valores de tus clientes. Después describa a su cliente lo que es realmente importante para este proyecto en particular. Para que puedan entender antes de que empieces a diseñar, ¿en qué necesitan enfocarse? Entonces como dije, esta etapa es muy importante en mi opinión porque va a ahorrarle a usted y su cliente un montón de tiempo después. Porque en esta etapa en particular, vas a determinar a dónde va a ir el estilo general del proyecto. Por supuesto, el diseño va a variar enormemente más adelante cuando realmente comiences a diseñar. Pero el tono general del proyecto con los colores, las fuentes, la dirección del diseño, todo se va a determinar en esta etapa en particular con los mood boards. Posteriormente podrás empezar a diseñar. Puedes agregar todo este tipo de elementos diferentes. Pero por ahora, como dije, nos vamos a centrar en lo básico y en las cosas más importantes. Vas a usar tu resumen de diseño para determinar todos estos elementos de diseño y decisiones de diseño. Vas a hacerle a tu cliente todas estas preguntas de diseño usando tu brief de diseño, como quién es su público objetivo, ¿cuál es su nicho? ¿Hay competidores en ese nicho? ¿Quiénes son los principales competidores? ¿Quiénes son los competidores más pequeños? ¿Cuál es el tono general del diseño? Entonces, ¿es divertido o juguetón? ¿Es grave? ¿Es corporativo? ¿Cuál es el tono general de entrega de la copia del sitio web? Y mucho más. Entonces como dije, vas a determinar todos estos elementos en la etapa de embarque del estado de ánimo lugar de más tarde en la etapa de diseño, lo que como dije, te va a permitir ahorrar un montón de tiempo en el diseño, tanto para usted como para su cliente. En la siguiente lección, vamos a discutir qué elementos debes considerar para tus tablas de estado de ánimo. Entonces te veré ahí. 102. ¿Qué elementos a considerar: Dependiendo del nicho en el se encuentre tu proyecto y en el que se encuentre tu cliente, vas a incluir o considerar incluir diferentes elementos. Entonces, si tu estilo es corporativo, obviamente vas a usar imágenes corporativas. Vas a usar la fuente clara para leer porque tienes que entender quién es tu público objetivo. Entonces estos no son niños, probablemente se trata de personas en su mediana edad o personas mayores. Entonces hay que considerar la topografía, hay que considerar el contraste, lo fácil que es leer el sitio web. Así que tienes que considerar todas estas cosas cuando planeas tu nicho y tu proyecto. Además, las imágenes juegan un papel realmente clave porque imágenes van a marcar la pauta van a marcar el ritmo del proyecto. Por lo que hay que considerar que los colores también son una característica importante del diseño de su sitio web en cualquier diseño para el caso. Entonces hay que considerar los colores. Son los colores divertidos y juguetones, cómo va a contrastar el texto entre estos colores. que puedas determinar todas estas cosas En el proceso de Mood Board, del proceso de diseño en general. Así que vas a describir, descubrir todos estos elementos cuando empieces a crear tus moodboards, en lugar de cuando realmente comiences a crear tu diseño. En el siguiente video, te voy a mostrar cómo hacer tu investigación, cómo, por ejemplo ajustarte para diferentes nichos, cómo explorar diferentes elementos y cómo presentarlos a tu cliente para que ambos de usted puede llegar al acuerdo en cuanto a dónde va a ir este proyecto y cuál es el estilo y dirección de diseño oral. 103. Cómo hacer tu investigación: En este video, en realidad vamos a comenzar con la investigación. Y te voy a mostrar cuáles son algunos sitios web que puedes usar para hacer tu investigación y para comunicarte claramente con tu cliente en cuanto a qué elementos considerar. Entonces déjame saltar dentro de mi computadora y te voy a mostrar algunos sitios web. Entonces, los primeros sitios web que tenemos son en realidad driblar. Dribble, como sabes, se usa como inspiración, como la mayor parte del tiempo para estos diseñadores, especialmente en el mundo del diseño de UI. Así que puedes usar fácilmente el driblar aquí mismo para explorar todos estos elementos. Para que puedas usarlo para explorar imágenes. Se puede utilizar para explorar la topografía y ver cómo se coloca la topografía en algunos de estos ejemplos. Entonces, si hacemos una búsqueda rápida aquí mismo, por ejemplo, si escribo corporativo, presione Enter y vea a dónde nos lleva. Así que vamos con el diseño web, por ejemplo , no nos da nada. Entonces usemos banco por ejemplo o bancario. Y veamos a dónde nos lleva eso. Entonces puedes ver aquí mismo para la banca, no hay colores gritando excepto por estos gradientes aquí mismo. Pero esto es para determinar el tono general del propio sitio web. Entonces, probablemente esta aplicación de banca móvil aquí mismo esté hablando con una audiencia diferente. Entonces, probablemente, un público más joven. Pero puedes ver aquí mismo, están usando realmente todos estos colores dorsales. Están usando estos colores negros, colores blancos. Están usando estos verdes claros como hilos, por ejemplo, por lo que el color probablemente juega un papel clave y puedes investigar aquí mismo sobre Dribble para explorar dependiendo del proyecto en cuestión y el proyecto en el que estás trabajando, qué tipos de colores debes usar para tu proyecto de diseño particular. A continuación, si echamos un vistazo a la topografía, se puede ver que la topografía aquí mismo es realmente clara. Realmente espació de manera uniforme. Así que el espaciado está realmente muy bien hecho aquí mismo. Y se puede ver que la mayor parte de este texto es de color negro sobre color, lo que a su vez va a acercar más el texto al espectador e intermedio haciéndolo fácil de leer. Entonces este ejemplo es realmente genial. Y si vamos al revés, podemos verlo en este ejemplo, por ejemplo porque es lúdico con todas estas ilustraciones y colores. Una vez más, los textos juegan un papel clave porque es súper fácil de leer, como puedes ver aquí mismo. Si te llevamos a Behance, que es otro sitio web que puedes usar para tu inspiración. Si echamos un vistazo aquí mismo y por ejemplo escribiendo lo mismo. Entonces centro bancario, mira a donde nos lleva. Así que vamos, usemos este por ejemplo y podemos ver que es diferente de Dribble si no lo sabías ya. Porque en Dribble realmente puedes publicar estas presentaciones más cortas como esta, por ejemplo, tan solo la única imagen singular. Mientras estás en beacons, realmente puedes publicar estas largas presentaciones y profundizar sobre el proyecto. Y esto realmente puede ser una excelente manera de informarte sobre la competencia de tus clientes, por ejemplo, digamos que están en el espacio bancario. Puedes usar esto, por ejemplo solo para entender cómo hacen su investigación, cuál es su público objetivo, ¿Cuáles son sus colores y cuál es el razonamiento detrás de elegir esos colores? Para que puedas adaptarlo fácilmente a tu proyecto en particular. Si nos desplazamos hacia abajo aquí para ir a nuestra etapa de diseño, puedes ver que realmente están usando estos colores dorsales. Tan blanco y negro con un toque de azul. Y esto es realmente diseño corporativo en su máxima expresión. Se pueden ver textos grandes, así que súper fáciles de leer. Puedes ver logotipos, puedes ver estos gradientes detrás. Entonces todos estos elementos realmente me destacan en este ejemplo en particular como algo tangible, que es fácil de leer, que es fácil de entender, que es fácil de limpiar. Y se puede ver cómo destaca la topografía sobre un fondo blanco, cómo se pone de pie contra estas etiquetas, por ejemplo, se levanta alto aquí mismo. Estos grandes títulos. Entonces es súper fácil de leer. Si echamos un vistazo a las imágenes y esta es la explosión, que es Shopify su propio sitio web. Y voy a dejar enlaces a todo lo que hablo en el PDF. Puede descargar el PDF y simplemente hacer clic en estos enlaces para acceder a todos estos archivos que mencioné. Y estas son realmente imágenes gratuitas de alta resolución, por lo que son de uso gratuito tanto para uso personal como comercial. Así que realmente puedes encontrar algunas imágenes geniales aquí mismo, y2q aquí en primer lugar es explicar las imágenes. Entonces, por ejemplo esta imagen y esta imagen es directa desde el principio cuentan una historia completamente diferente, aunque el tono es realmente bastante similar porque probablemente estén usando los mismos fotógrafos. esos fotógrafos les gusta usar ciertos filtros, les gusta ciertos colores y les gusta cómo algunas llamadas determinadas se destacan contra los diferentes colores. Como en este ejemplo, no tenemos que ver el cielo azul. Podemos ver este cielo volado con un filtro aquí mismo en la parte superior. Entonces a esos fotógrafos les gusta usar esas técnicas. Pero por qué esto es importante para ti como diseñador es simplemente entender a dónde puedes llevar tu proyecto en términos de imágenes. Entonces, si nos desplazamos hacia abajo, se pueden ver diferentes colecciones. Entonces digamos por ejemplo que es una cafetería en cuestión. Y se pueden ver todas estas imágenes de café con una textura grunge, filtros realmente oscuros en general. Y realmente puedes hablar con tu audiencia si esta es tu audiencia, y puedes entender fácilmente quién es tu audiencia si simplemente estás navegando por estas imágenes. También lo son los más jóvenes. Aquí hay gente más joven. ¿Están disfrutando del café? Sí. ¿Sus clientes están la cafetería en este tono, en esta vibra? ¿Es así? Entonces, ¿es realmente limpio y sencillo? O es así algo un poco más sucio, algo un poco más anticuado. Para que puedas decir fácilmente y hablar fácilmente con tu audiencia si usas imágenes como estas. Entonces por eso dije que las imágenes juegan un papel realmente clave en cada diseño. Si finalmente te llevo a Envato Elements, que es uno de mis sitios web favoritos para los recursos. Puedes ver aquí mismo que exploré todas estas diferentes imágenes para el diseño de auriculares. Y uso a los jóvenes. Jóvenes en este caso, para el diseño de auriculares porque ese es el grupo demográfico clave de mi cliente y simplemente exploro algunas imágenes aquí mismo. Ahora, Envato elements es un servicio premium que tendrás que pagar para usarlo. Pero es fantástico porque en un solo lugar y puedes encontrar video de stock, puedes encontrar plantillas de video, puedes encontrar ferias de sonido musical, plantillas gráficas y mucho más, incluyendo imágenes. En mi caso, voy a emparejar eventualmente estas imágenes, cuya topografía correspondiente con los iconos correspondientes y mucho más para lograr esa mirada coherente a mi cliente va a querer, si están de acuerdo, entonces simplemente podemos pasar a la etapa de diseño y comenzar, por ejemplo, con wireframes. Pero antes de todo eso, quiero determinar es este estilo tutorial que a mi cliente le gusta tomar? ¿Esto es algo que les interesa? ¿Esto es algo que les atrae? ¿Es este el color correcto? ¿Es este el tono correcto? ¿Están estos modelos tomando las poses correctas? Entonces voy a considerar todos estos elementos antes de pasar al diseño. Porque cuando empiezo a diseñar, todas estas decisiones se han tomado en el mood board, mood boarding parte del proceso. Así que simplemente puedo aplicarlos a mi diseño y simplemente puedo comenzar a trabajar en mi diseño. Entonces es por eso que los moodboards son importantes. Así es como haces tu investigación. Y en el siguiente video, vamos a comenzar con Adobe XD. Te voy a mostrar algunos ejemplos ya creados y te voy a mostrar cómo puedes crear el tuyo propio y cómo puedes comunicar tus ideas con tus clientes. Entonces te veré ahí. 104. Crear tablero de ánimo en Adobe Xd: En este video, vamos a utilizar Adobe XD para crear nuestro mood board. Y también te voy a mostrar algunos de mis ejemplos los cuales puedes comprar si quieres o si no, simplemente puedes explorarlos para tu inspiración. Si seguimos adelante y cambiamos a Adobe XD, lo que he hecho aquí mismo es crear un 1920 por 1080 documentos. Ahora bien, si quieres imprimir este documento, lo que puedes hacer es que puedes venir aquí mismo y rotarlo. Por supuesto que puedes ser tan preciso como quieras. Puede importar el número exacto de píxeles de su tamaño de papel si desea imprimirlo más tarde. Entonces, por ejemplo, si estás usando A4, puedes buscar A4 en línea o puedes abrirlo en Photoshop y simplemente puedes ver el tamaño exacto de píxel. Puedes ingresar ese tamaño de píxel aquí mismo. Solo recuerda que no tienes que usar 300 DPI porque Adobe XD es una herramienta vectorial. Para que no tengas que hacer eso. Simplemente puedes importar por 72 DPI aquí mismo. Simplemente puedes crear tu mood board y luego exportarlo. Puedes guardarlo aquí mismo como ves, hice un guardarlo en mis documentos Cloud, cual es genial porque puedo acceder a eso donde quiera que esté. Entonces, por ejemplo, si estoy trabajando en un escritorio como lo estoy haciendo ahora mismo, puedo ir a mi reunión de clientes en su oficina, por ejemplo y puedo levantar mi computadora portátil. Puedo abrir Adobe XD con la misma cuenta. Y simplemente puedo sacar este documento de mi Nube y simplemente podemos discutir nuestro mood board así. Entonces, si volvemos a Adobe XD, lo que voy a hacer es simplemente llamarlo mood board aquí mismo. Antes de seguir adelante, quiero seguir adelante y mostrarles mis ejemplos. Entonces aquí está mi sitio web, web donut.net. Y como dije, puedes adquirir estas plantillas si quieres. Puedes abrirlos fácilmente en Adobe XD y luego puedes trabajar en ellos así. Si no, simplemente puedes usarlos como inspiración. Entonces, lo que tenemos aquí son estos moodboards, y están en tamaño A4 y tamaño carta estadounidense aquí mismo. Y los obtienes en Adobe XD en archivos de Photoshop. Si algunos de estos productos son archivos de Photoshop, puedes abrirlos fácilmente en Adobe XD porque son creados por la misma compañía. Así que Adobe posee tanto Photoshop como XD, y estos archivos van a funcionar bien tanto en Photoshop como en XD. Si volvemos a aquí, puedes ver todos estos diferentes diseños para imágenes y cuatro colores. Puedes intercambiar fácilmente estas imágenes por logotipos, por ejemplo y puedes ver que están impresas, listas y todos estos diseños, si volvemos a este, esto es para Instagram porque está al cuadrado, pero puedes adaptarte fácilmente para trabajar con cualquier tamaño como puedes ver aquí mismo para las historias o para los reales, por ejemplo, así que estas son publicaciones de Instagram, estas son historias de Instagram. Se puede ver cómo se ve eso. Y si cambiamos a esta, esto es para plantillas de mood board de redes sociales. Una vez más, lo mismo. Y puedes ver que estos son cuadrados o rectangulares, lo cual es genial para Facebook, por ejemplo, si estás usando las redes sociales y puedes intercambiarlos fácilmente, puedes cambiarlos. Puedes usar todos estos diferentes diseños para crear el tuyo propio. Y puedes adaptarlos fácilmente y puedes ver cómo se ven en diferentes páginas de redes sociales. Y finalmente tenemos éste. Entonces cuatro de estos, y como dije, voy a vincular todos estos en el archivo PDF. Simplemente puedes, si quieres hacer click en el enlace de cada uno de estos, puedes acceder fácilmente a él si quieres. Si no, como dije, simplemente puedes usarlo como inspiración. Entonces, si volvemos a cambiar aquí mismo, puedes ver cómo se ve este. Entonces, una vez más, está listo para imprimir. Puedes ver algunos de estos elementos de presentación como puedes incluir los diferentes logotipos, diferentes colores, diferentes imágenes, y puedes ver el resultado aquí mismo. Ahora, puedes usar esto si quieres ahorrarte fácilmente un montón de tiempo si quieres, si no, como dije, estos son geniales para la inspiración. Puedes inspirarte en dónde posicionar todos estos diferentes elementos. Y si no, simplemente puedes crear tuyo propio dependiendo del proyecto en el que estés trabajando en este momento. Como dijo en uno de los videos anteriores, dependiendo del tamaño del proyecto, dependiendo del nicho en el que se encuentre tu proyecto, en que esté tu cliente, vas a invertir más o menos tiempo. Y esta parte de los proyectos no debería llevar mucho tiempo. Debería ser realmente rápido y fácil. No debería llevarte más de un día completar, sin importar el tamaño de la empresa, sin importar el tamaño del proyecto, sin importar el nicho en el que se encuentre tu cliente. Entonces solo considera eso. No pases demasiado tiempo en los mood boards porque están ahí simplemente para determinar la pasta oral, el estilo, el tono del proyecto. Y entonces cuando empieces a diseñar, vas a invertir la mayor parte de tu tiempo en esos cambios particulares. Entonces, si echamos un vistazo atrás en Adobe XD, así es como se ve nuestro documento, y simplemente puedo sesgarlo así, por ejemplo, si queremos lograr algo un poco más como un cuatro, como dije, puedes ingresar fácilmente los valores correctos aquí mismo si eso es algo que quieres. Entonces comencemos con imágenes porque tengo algunas imágenes preparadas. Lo que quiero hacer es simplemente crear un rectángulo y puedo usar una cuadrícula repetida si quiero lograr un aspecto así, y puedo elegir que se vea así, por ejemplo, entonces simplemente puede desagrupar la cuadrícula mía, doble- haga clic en uno de estos, y simplemente tráelo de vuelta aquí. Por ejemplo, I. Puede escalarlo fácilmente. Y esto no tiene que ser perfecto si no quieres simplemente adaptarlo así para crear un círculo, por ejemplo o un elemento como este, pueden superponerse, puedes incluir diferentes sombras. Entonces, por ejemplo, así. Entonces 5520, digamos y bajemos esa sombra a ocho, por ejemplo, algo como esto. Lo que voy a hacer en realidad es seleccionar todos mis elementos así. Voy a quitar el borde y voy a incluir algo como DDT, que es un bonito color gris claro. Tal vez pueda reducirlo un poco a algo como esto. Y por ejemplo I. Puedo sacar esto aquí mismo. Puedo posicionarlo aquí. Puedo seguir adelante clic-derecho y puedo copiar clic-derecho pegar apariencia para poder pegar esa misma sombra. Pero simplemente voy a reducir el radio de la esquina de nuevo a cero. Y tal vez pueda sacar fácilmente esta imagen. A lo mejor pueda expandir éste solo un toque a algo así. A lo mejor pueda ampliar esto hasta aquí. Entonces, como pueden ver, esto es claramente alguna variación diferente a los ejemplos que se le muestran. Entonces, si vuelvo a estos ejemplos, se puede ver que estas imágenes son realmente bastante rectas. Se incluyen fácilmente hueso aquí mismo. Y puedes ver todos estos diferentes colores posicionados aquí mismo. Se pueden ver diferentes textos, se pueden ver diferentes imágenes. Pero en nuestro ejemplo, todo está por todas partes. Estoy haciendo esto solo para mostrarte que también puedes tomar este enfoque. Una vez más, dependiendo del proyecto, dependiendo del nicho. Porque sus clientes corporativos no van a apreciar este estilo que estoy creando en Adobe XD en este momento. Pero tus clientes a los que les gusta usar algún tipo de estilo divertido y lúdico realmente van a apreciar este tipo de diseño. Entonces si volvemos a Adobe XD y te voy a mostrar esto aquí mismo. Entonces, simplemente, la posición está justo aquí. Tal vez en algún lugar por aquí los analistas usan Control D. Voy a duplicarlo y colocarlo aproximadamente por aquí, por ejemplo y tal vez a algún lugar por aquí. Y tal vez pueda usar la misma distancia de 52 en este caso, tal vez pueda hacer esto. Y tal vez pueda cambiar el color detrás de mi celular para que lo veas. Así que puedo cambiar el color a algo un poco más oscuro porque vamos a usar esta muestra de color para nuestros colores. Entonces puedo reducir el tamaño a aquí, y puedo usar la cuadrícula de repetición una vez más para extraer algunos colores, por ejemplo algo como esto, tal vez desagrupar migrar. Y tal vez pueda posicionar esto un poco aquí mismo. Tal vez pueda escalarlo así. Y tal vez puedas usar uno más. Entonces Control D. Puedo escalarlo un poco y tal vez colocarlo aquí mismo. Entonces ahora que tenemos todos estos elementos, quizás lo que falta es alguna tipografía. Así puedo golpear T y escribir por ejemplo juguetón. Esto y yo puedo, por ejemplo, usar algo como Open Sans. En este caso, tal vez pueda usar un poco negrita y pueda escalar esto a 36 tal vez solo para que lo puedan ver. Tan juguetón. Control D, puedo, por ejemplo, escribir. Control D, algo así como amistad. Control D, puedo ponerlo aquí mismo, café. Y digamos Control D. Relajación. Ahí vamos. Este es nuestro mood board preparado. Lo que voy a hacer a continuación es simplemente traer mis imágenes. Ya tengo algunas imágenes que preparé solo para esta demostración. Pero puedes seguir adelante y usar las imágenes de tus clientes, o puedes usar uno de los sitios web de los que hablamos, o incluso mejores elementos Envato porque literalmente lo tienen todo. Lo que voy a hacer es arrastrar y soltar una imagen aquí mismo. Sólo para poblarlo. Voy a ir y dejarlo aquí mismo. Por cierto, puedes usar la cuadrícula de repetición cuando la creaste, simplemente puedes arrastrar y soltar la primera imagen que va a poblar con todas tus imágenes. Y entonces puedes hacer todos estos cambios que yo he hecho en este caso. Pero me gusta hacerlo así. O tal vez pueda posicionar esto aquí mismo porque es una cafetería. Voy a colocarlo aquí mismo. Quizás voy a colocar esta imagen aquí mismo. Haz doble clic, muévelo así. Y veamos, tal vez pueda posicionar esta imagen aquí mismo así. Esto no funciona para nuestro ejemplo. Entonces lo que realmente voy a hacer es quizá arrastrar y soltar, Digamos esta imagen así. Y creo que es mucho mejor. Lo que voy a hacer a continuación es simplemente probar algunos colores. Pero antes de hacerlo, lo que puedo hacer es quizás encontrar otra imagen que vaya a corresponder, bueno. Porque no preparé ningún logo para aquí mismo. Pero por ejemplo I. Tal vez pueda hacer clic aquí mismo y usar uno de estos. Entonces veamos qué es. Logotipo de Ui. Entonces pienso ahora, porque puedes usar estos plug-ins y extensiones para hacer esto fácilmente. Entonces como dije, puedes extraer imágenes de tu cliente, de tu computadora, de Envato Elements, por ejemplo, o de uno de estos plugins. Pero digamos UI Faces. Y quiero incluir desde Unsplash, quiero usar, digamos, filtros macho y hembra. Y voy a hacer clic en Aplicar aleatoriamente. Y va a elegir una imagen y se va a aplicar aleatoriamente a este marcador de posición de imagen en particular. Como pueden ver, posicionó éste. Si eso es algo que quieres, entonces bien. Pero volvamos a nuestra carpeta y veamos. Lo que me gustaría hacer en realidad es traer esta porque es una cafetería. Y puedo hacer doble clic en la posición de lata aquí mismo porque el café debería estar realmente en el centro del escenario de este diseño en particular. Por último, lo que quiero hacer es en realidad probar algunos colores. Entonces lo que me gustaría hacer es pasar de más claro a más oscuro. Es más fácil, solo en mi caso, pero puedes dar la vuelta al revés como quieras. Entonces, para este, simplemente puedo hacer clic aquí mismo y por ejemplo seleccionar este. Y puedo dar click aquí mismo y quizás empezar con, no lo sé. Vamos con éste. Tal vez. Puedo dar click aquí mismo y probar uno de estos. Entonces puedo ir a mis colores oscuros como este. Esto va a ser realmente genial si tu cliente ya tiene algunos muebles, por ejemplo y te envían imágenes de su cafetería ahí. Así que puedes sacar fácilmente esas imágenes y puedes probar colores de esas imágenes en particular y puedes presentarles fácilmente este mood board. Entonces ahí vamos. Como dije, se puede ir realmente a fondo. Se puede entrar realmente en muchos detalles. O simplemente puedes inducir algo como esto que es rápido, que se limpia solo para mostrarle a tu cliente cuáles son las posibilidades de este proyecto en particular. Pero también se puede hacer es simplemente seleccionar estos colores. Salta aquí mismo, haz clic aquí para agregarlos a tus colores. Y por ejemplo, si necesitas cambiar este color de texto, simplemente puedo hacer clic aquí mismo, por ejemplo y puedo cambiar y aplicar fácilmente diferentes colores. Si quieres lograr ese look aún más lúdico, puedes terminar con algo como esto. Si esto es algo que su cliente apreciará. Si este es su nicho, si esto es algo que les gusta, entonces ella seguirá adelante por ello. Pero si es un poco más corporativo de lo que puedes saltar dentro inexplorado, quizás. Voy a exponer como te mostré en estos moodboards que creamos. Por último, lo que quiero mostrarles es que pueden incluir algunos elementos de fondo. Entonces e.g. Puedo dibujarlo y arrastrarlo y crear un rectángulo como este. Puedo crear un color como este. Puedo posicionarlo aquí mismo. Y si no me gusta el color, puedo cambiarlo fácilmente y cambiarlo a algo así. Sólo para que mis imágenes destaquen un poco. Y para incluir quizás esos elementos lúdicos en que tu cliente para las piernas. Y se puede lograr un resultado como este. Eso es todo para este video. En el siguiente video, te voy a mostrar cómo puedes compartir este mood board con tu cliente. Si desea obtener comentarios en línea o si no, puede imprimirlos fácilmente. Y te voy a mostrar cómo puedes exportar para imprimir desde Adobe XD y cómo se ven impresos y qué puedes hacer realmente con ellos. Entonces te veré ahí. 105. Comparte o exporta tu tablero de ánimo: En este video, te voy a mostrar algunos ajustes que puedes usar para exportar tu moodboard y fuente, imprimiéndolo. Y también puedo mostrarte lo que puedes hacer para compartir este mood board en línea con tu cliente y obtener los comentarios de esa manera. Entonces, si volvemos a Adobe XD, aquí está nuestro mood board que creamos. Lo que puedes hacer es simplemente compartirlo así. Para que puedas compartir este tablero de arte en particular que creamos con tu cliente y simplemente puedes compartir solo este. O puedes hacer clic aquí mismo a la pestaña Compartir. Haga clic en Generar enlace en el botón azul, que va a aparecer por aquí. Puedes copiar ese enlace y compartirlo con tu cliente. Ahora, lo que ese enlace le permitirá hacer es recopilar comentarios y su cliente puede dejar sus comentarios en este tablero de estado de ánimo en particular si está lejos de usted, por ejemplo, que es un gran manera de comunicarse con clientes que no se encuentran en su área. Así que simplemente puedes compartir ese enlace con ellos. No tienen que tener cuenta de Adobe, ninguna cuenta para el caso. Simplemente pueden saltar dentro ese enlace y simplemente pueden dejarte comentarios. Puedes navegar por mis otras clases sobre diseño de UI UX para ver eso en acción y ver ese proceso de intercambio en acción. Porque realmente va en profundidad y realmente puedes apuntar los giros. Y pueden dejar ciertos comentarios sobre ciertas partes de su diseño y así sucesivamente. Más adelante, cuando comiences a crear tu diseño en Adobe XD, por ejemplo, puedes ampliar este archivo existente para que puedas agregar wireframes, puedes agregar diseño. Vas a la creación de prototipos. Puedes agregar guías de estilo, puedes cada cosa dentro de este archivo. Entonces tu link para compartir obviamente va a crecer. Asegúrate de que estás usando la versión gratuita de Adobe XD para compartir solo un diseño con tu cliente porque este es el límite con el plan gratuito. Si tienes un plan premium y un plan premium como suscripción a Adobe XD Creative Cloud o un plan premium de Adobe XD, entonces no tienes ese límite. Pero si estás usando la versión gratuita, tienes eso limitado a un solo enlace que puedes compartir con tu cliente. Así que una vez más, si te interesa asegúrate de revisar mis otras clases porque esos tipos realmente pueden entrar en profundidad. Y creo que una de mis clases anteriores, hay algo así como sesión de 3 h. A donde vamos, vamos a encontrar detalles sobre la configuración de uso compartido para Adobe XD porque puedes compartir para clientes, puedes compartir para desarrolladores, puedes compartir tu presentación o puedes compartir de manera personalizada y ajustar todos estos diferentes ajustes dentro de eso. Entonces no tengo tiempo en esta clase en particular y realmente no quiero aburrirte porque solo tenemos mood boards. Pero cuando empiezas a expandirte, esto es realmente clave para entender lo que necesitas hacer para compartir con tus clientes. Lo siguiente que podemos hacer es exportar esto. Entonces si volvemos a aquí, puedo ir a Archivo, Guardar como y guardarlo así. O simplemente puedo golpear Control E en mi tablero de arte y simplemente puedo exportarlo así. Así puedo usar PNG, puedo usar SVG, puedo usar PDF, y puedo usar JPEG. Puedes establecer el destino aquí mismo. Entonces esta es la salida donde va a ir tu archivo una vez que se guarde. Entonces lo que voy a hacer es presionar JPEG, presionar Exportar, y luego presionar Control E una vez más. Después cámbielo a PDF. Y voy a exportarlo una vez más. razón por la que estoy haciendo esto es que simplemente quiero tener la capacidad de imprimir tanto jpeg como PDF y simplemente comparar con qué tipo de elemento funciona mejor. Entonces, por ejemplo, en algunos casos, los PDF tienen mayor calidad. En otros casos, los jpegs tienen mayor igualdad. Entonces lo que realmente recomendaría es exportar perno y ver a dónde te va a llevar cada uno de ellos. Entonces voy a seguir adelante e imprimirlo ahora y volver y mostrarte cómo se ve impreso y qué puedes hacer con esas versiones impresas. Déjame ahora mostrarte cómo se ve impreso. Entonces aquí tenemos ese archivo Adobe XD, y aquí lo tienes impreso. Y lo puedes hacer con esta versión impresa es que simplemente puedes usar tu pluma y papel y puedes saltar a tu cliente y discutir posibles soluciones, discutir posibles cambios. Entonces, si te encuentras con ellos en su casa, en su oficina, por ejemplo, podrían decir que esto es demasiado oscuro. Esta es por ejemplo la clave, el mundo clave tal vez que quieran usar en su copia, digamos. O si eso es algo por lo que se están esforzando por lograr. Así que realmente puedes discutir con ellos todos estos diferentes temas, todas estas diferentes soluciones que creaste aquí mismo e imprimirlas aquí mismo. Entonces por ejemplo se puede decir que estas imágenes no funcionan. Y quieren ver más de estos. Por ejemplo, no incluimos a ninguna de las personas aquí mismo. A lo mejor más gente. Imágenes. Más de estos modos de café, por ejemplo algo así. Entonces te haces la idea, vas a discutir con ellos, todos estos cambios, todas estas imágenes diferentes, todos estos colores. Y cuando estás de acuerdo con ellos, por ejemplo aquí mismo, solo incluimos una fuente. Pero tal vez si incluías varias fuentes diferentes en tu moodboard, tal vez van a tomar esta y decir ir con esta. Y si has elegido múltiples fuentes con múltiples colores, tal vez van a decir, sí, esta fuente con este color e.g va a funcionar bien. En nuestro caso. Vas a notar un poco de equipo, un poco de tendencia desarrollándose una vez que empieces a explorar esto en, una vez que empieces a hablar con tus clientes, propósito dejé o espacios en blanco alrededor de todos mis imágenes, alrededor de todos mis colores, solo para poder escribir esto fácilmente. No tienes que hacer eso. Puede cambiar fácilmente alrededor de n, por ejemplo, puede llamar a este número de imagen 1234. Y del otro lado, puedes voltearlo n por ejemplo imagen uno, puedes decir bueno. Imagen tres, por ejemplo, no es buena o demasiado oscura o lo que sea que quieras obtener. Como tu referencia. Esto es solo para ayudarte cuando empiezas a desarrollar ese diseño, cuando empiezas a desarrollar ese tono. Y como dije, esto es realmente genial porque puedes imprimirlo, darlo a tu cliente. Pueden dejar estas notas alrededor y fácilmente pueden hacerse una idea de hacia dónde va a ir y venir este proyecto. Si puedes, puedes hacer estos cambios con estas cosas que acabamos de discutir. Y puedes imprimir esto una vez más. Puedes volver con tu cliente si están en algún lugar cerca de ti, y luego puedes sentarte con ellos una vez más y simplemente preguntarles, Es esta la dirección correcta ahora? ¿Es así como quieres que se vea más así en esta dirección? ¿Te gusta más este estilo y todas estas preguntas diferentes? Entonces, si dicen que sí, puedes saltar aquí mismo y luego puedes tomarlos fácilmente , por ejemplo, así. Y si no les gusta este, lo mejor puedas hacer así. Entonces como dije, esto es solo un ejemplo rápido de lo que se puede hacer con estas multipartes. Así que asegúrate de entender que este proceso de tablero de estado de ánimo va a llevar tiempo y a veces en algunos proyectos te va a llevar, por ejemplo 15 min para crear y luego tal vez 30 min para discutir con tus clientes en algunos proyectos te va a llevar un día para crear en dos o tres días para discutir con tu cliente, para determinar el estilo general, por ejemplo , una dirección neuronal del proyecto en sí. Así que asegúrate de calcular eso en tu presupuesto porque esta es la parte del proceso de diseño, deberías estar cobrando por los mood boards. Entonces solo asegúrate de entender que cuando empieces a trabajar, como dije, asegúrate de ajustarte al tamaño de tu papel. Entonces, por ejemplo, esto es A4. Si está trabajando con tamaño carta estadounidense, por ejemplo , puede ajustarlo a ese tamaño en particular en Adobe XD aquí mismo. Entonces como dije, puedes saltar aquí mismo, ajustar los píxeles según sea necesario, ajustarlos como quieras. Puedes darle la vuelta a esto si eso es algo que quieres y asegurarte al imprimirlo. No hay que preocuparse por los 300 DPI porque como dije, adobe XD es una herramienta tipo vector. Entonces eso es todo. Asegúrate de probarlo, asegúrate de probarlo, asegúrate de hablar con tus clientes. Porque como dije varias veces a lo largo de esta clase, esta parte del proceso de diseño es determinar el estilo general, la dirección general, tu tono de rol. Así que asegúrate de tener eso en cuenta, en tus direcciones de diseño. 106. ASIGNACIÓN de la SECCIÓN 13: Tu tarea para esta sección es crear tus propios moodboards. Puedes usar solo uno que puedas crear, puedes crear cinco por muchos que quieras, y por mucho tiempo que realmente tengas para invertir en uno. Pero solo intenta comenzar con uno y solo traté de elegir algunos colores aleatorios de imágenes aleatorias que realmente te gusten. Y trata de combinarlos en algo útil que realmente puedas usar en tu proyecto. Intenta practicar de esa manera y más tarde, en realidad, cuando quieras probarlo con proyectos reales y clientes reales, asegúrate de tomar su logotipo, elegir colores de él. Asegúrese de tomar sus imágenes favoritas, las existentes o las que realmente les gustan, intente usar diferentes inspiraciones de diferentes sitios web que proporcionaron en el cerebro de diseño, p. ej. y solo intenté combinarlo todo en una tabla de estado de ánimo utilizable. 107. SECCIÓN 14 Kits de interfaz: Los kits de interfaz de usuario pueden ser increíblemente importantes e increíblemente útiles en su proceso de diseño porque puede reutilizar algunos de estos elementos una y otra y otra vez. En esta sección de la clase, vamos a hablar sobre qué es un kit de UI, cómo crear el tuyo propio usando Adobe XD y cómo reutilizar algunos de estos elementos en tus diseños. Entonces comencemos. 108. ¿Cuáles son los kits de interfaz de usuario: Los kits de interfaz de usuario son básicamente solo una colección de diferentes elementos que puedes usar para tus proyectos de diseño de UI. Esos proyectos pueden variar desde diseño móvil hasta proyectos de diseño de sitios web proyectos de diseño de productos como dashboards y aplicaciones web y proyectos de esa naturaleza. Pueden venir en diferentes tipos de archivos, por ejemplo, Photoshop, Sketch, Illustrator, Figma, Adobe XD. Y en esta clase nos vamos a centrar en Adobe XD. También pueden ser imágenes de ancho y sin imágenes. Y vamos a explorar algunas diferencias entre esos dos tipos. ¿Por qué uno es mejor que el otro y al revés? Y principalmente vas a usar estos kits de interfaz de usuario para acelerar tu flujo de trabajo porque vas a hacer estas tareas repetitivas, especialmente en el diseño de la interfaz de usuario, por ejemplo, vas a crear navegaciones para todos tus proyectos. Entonces, en lugar de recrear esa navegación per se para cada proyecto en particular, solo vas a crear un tipo de navegación y luego simplemente expandir tu ideación de deuda un tipo de navegación, que también te voy a mostrar más tarde en esta clase. Así que básicamente vas a acelerar tu flujo próxima vez que inicies un proyecto de diseño porque vas a tener todos estos diferentes tipos de archivos guardados en tu computadora. Y luego básicamente vas a poder usar y reutilizar todos estos diferentes elementos para todos tus diferentes proyectos. Ahora, como vamos a trabajar en Adobe XD, vamos a trabajar con componentes y vas a poder reutilizar esos componentes para cambiar los colores, para cambiar los tipos de archivos, para cambiar la estructura, para cambiar la sombra de fondo, por ejemplo, para cambiar los colores y mucho, mucho más con tus hijos, vas a poder adaptarte a diferentes proyectos. Así que una vez más, por ejemplo, si estás creando en Adobe XD per se, puedes crear componentes, por ejemplo , diseño de sitios web en pantalla completa digamos 1920 por 1080, entonces puedes bajar y crear tamaños de redimensionamiento responsivos para sus proyectos de diseño responsive. Lo mismo ocurre con los diseños móviles, por ejemplo, creas tu kit de interfaz de usuario para aplicaciones web de iOS. Entonces quieres crear ese mismo kit de interfaz de usuario para que funcione en Android. Va a ser mucho más sencillo cuando en realidad tienes los tipos de archivos y los archivos ya preparados. Entonces para hacer eso desde cero, esto te va a permitir cobrar más por tus proyectos porque vas a poder entregar más rápido. Porque vienes preparado con estos kits de UI y lo preparas todos estos elementos para tus futuros proyectos. Entonces, en el siguiente video, vamos a explorar estas diferencias entre los kits de interfaz de usuario con imágenes y sin imágenes. ¿Cuáles son algunos beneficios e inconvenientes de cada uno de ellos? Y te veré en el siguiente video. 109. Tipos de kits de interfaz de usuario: En este video, vamos a explorar algunas diferencias principales de los kits de UI con imágenes y sin imágenes. ¿Cuáles son algunos de los principales inconvenientes y puntos de venta para cada uno de ellos? Así que comencemos. Entonces aquí he abierto una interfaz de usuario ocho, que es un sitio web donde realmente puedes comprar estos kits de interfaz de usuario. Y vamos a hablar estos sitios web un poco más adelante en este video en particular, solo quiero centrarme en las diferencias entre los kits de UI con imágenes y sin imágenes. ¿Para qué se puede utilizar cada uno de estos? Y lo que puedes aprender sobre la creación estos kits de UI para tus diferentes tipos de proyectos. Entonces lo que tenemos aquí mismo es este kit cuántico de interfaz de usuario, que es, como dicen, enorme biblioteca de tus tarjetas para servicios web. Y lo que realmente crearon aquí mismo, como puedes ver, son todos estos diferentes componentes, que básicamente son plantillas que buscan sitios web que puedes usar y reutilizar para tus futuros proyectos. Entonces por qué esto es útil para, si hago clic derecho y abro en la nueva pestaña y acerco para que puedas ver un poco de estos detalles. Puedes ver que aquí mismo tenemos por ejemplo este amortiguador Sony Dual para controlador negro, o tenemos el precio, tenemos este icono. Entonces, básicamente, lo que puedes hacer con este diseño es que puedes simplemente trabajar con este diseño exacto. Simplemente cree un componente, por ejemplo, para este controlador de doble espectáculo. Y digamos que quieres reemplazar esto dentro del componente, por ejemplo, para agregar un producto diferente, digamos que tal vez quieras vender el iPhone, entonces puedes crear componente de deuda de esta tarjeta en particular. Simplemente puedes arrastrar y soltar la imagen de tu iPhone. Puedes arrastrar y soltar la información de ese iPhone que tengas a la venta. Y Darío, no tienes que volver a crear la carta, no tienes que añadir la sombra paralela. No tienes que elegir la fuente específica. No tienes que elegir el diseño tipográfico, no tienes que elegir la jerarquía. Todo eso se hace por ti mismo en el proyecto anterior. Y ahora puedes simplemente usar y reutilizar exactamente este mismo componente en tus proyectos futuros. Voy a explicar eso un poco más adelante en la lección específicamente sobre Adobe XD, cómo puedes escalar estos componentes, cómo podemos cambiarlos, usarlos y reutilizarlos y así sucesivamente. Pero en este ejemplo, como dije, queremos enfocarnos en los kits de UI con imágenes y sin imágenes y en qué se puede utilizar cada uno de estos cuatro. Entonces volviendo a este ejemplo, se puede ver cuántos de estos tienen. Tienen este auto de venta, por ejemplo, tienen esta carga más componentes. Entonces, básicamente, todos estos componentes son extremadamente cruciales para crear en un kit de interfaz de usuario porque los vas a usar y reutilizar para todos y cada uno de los proyectos. Entonces en las navegaciones, pies de página, tarjetas de blog, estos son artículos de tienda y así sucesivamente. Entonces todos estos van a ser realmente útiles para tener para tus futuros proyectos. Si revisamos este que se llama plataforma nuestro kit wireframe. Entonces, ¿cuál es la diferencia aquí entre éste y éste? Básicamente, los kits de marco de alambre son estos kits de interfaz de usuario sin ninguna imagen. Y puedes encontrarlos en línea o donde sea que busques. Y realmente te recomiendo que crees estos tipos de wireframe sobre kits de interfaz de usuario. ¿Por qué? Porque siempre puedes arrastrar y soltar imágenes en lugares de estos kits de wireframing. Y no tienes que registrarte con estos enormes tipos de archivos porque obviamente cuáles son los programas que estás usando, si no tienes imágenes incluidas dentro de tus diseños, tus tipos de archivos van a ser mucho más pequeños. Va a ser mucho más fácil trabajar con estos archivos. Entonces si los tienes con imágenes, también va a ser mucho más sencillo mostrar estos niños wireframe a tus clientes y solo decirles, solo imagina incluir imágenes dentro, dentro de la imagen marcador de posición, por ejemplo, puede cambiar el color. Entonces digamos que puedes hablar con tu cliente y comunicar esta idea, por ejemplo esa imagen va a ser azul, como en este caso aquí mismo, para que puedan saber, bien, Entonces este fondo solo va a ser imagen. Entonces va a ser mucho más sencillo para ellos entender y visualizar en su cabeza que la imagen va a ir ahí. Lo que hay en él para ti es, va a ser mucho más sencillo de cambiar y hacer cambios a estos kits de estructura metálica que a los kits de interfaz de usuario. Porque los kits de UI con imágenes van a ser mucho más difíciles cambiar porque siempre vas a seguir algún tipo de estructura de imagen. Siempre vas a seguir algún tipo de tono de imagen. A lo mejor vas a probar tus colores a partir de tus imágenes. Entonces, por lo tanto, es bueno ser mucho más sencillo usar colores y usar todos estos elementos de wireframe kids, porque no tienes imágenes en su lugar. Más adelante, cuando determinas la estructura con tu cliente durante tu trabajo en ese proyecto, simplemente puedes arrastrar y soltar imágenes dentro y luego simplemente ajustar un poco el diseño. Por ejemplo, incluye la sombra paralela aquí y allá, solo para hacer que el botón, por ejemplo destaque o navegación o imagen de héroe o los textos. A lo mejor deberías cambiar el color del texto de oscuro a claro y al revés dependiendo de la imagen que elijas. Entonces, por lo tanto, los niños wireframe son mucho más útiles en mi opinión. Y luego kits de UI porque los kits de UI, como dije, siguen la estructura de las imágenes y por lo tanto se adaptan a esa estructura y esas imágenes, mientras que los niños wireframe simplemente usan la estructura en sí y no se adaptan a cualquier cosa. Simplemente puede arrastrar y soltar imágenes dentro más tarde. Ahora, por fin, hay una cosa más que quiero mencionar, y estos son los diagramas de flujo. Los diagramas de flujo vienen en diferentes tipos de tamaños de archivo, diferentes tipos de elementos. Y esto es algo llamado esquema diagrama de flujo móvil. Y puedo mostrarte uno de mis productos de diagrama de flujo un poco más tarde porque tengo que hacerlo, y te voy a mostrar cómo los creé y cómo puedes usarlos para comunicar ideas con tus clientes. Volviendo a éste, porque no se puede ver. Aquí. Lo abro en una nueva pestaña, y aquí se puede ver que no usan textos reales. No usan imágenes reales. Simplemente usan estos marcadores de posición, por ejemplo, este va a ser párrafo este va a ser título subtítulo. Esta es la imagen, este es el botón, esta es la paginación es se puede ver que están usando iconos para la navegación y para la búsqueda. Usando estos íconos sociales para Facebook y Twitter. Y lo que esto te va a permitir es que seas capaz de comunicar tus ideas mucho más rápido con tu cliente. Porque una vez más, al igual que con los kits de wireframing y los kits de interfaz de usuario, no pierdes el tiempo eligiendo estas imágenes, eligiendo estos colores. Simplemente estás creando diseños que puedes comunicarte y compartir con tu cliente. Una vez aprobadas esas capas, puedes trabajar en los detalles. Entonces, es por eso que estos kits de estructura metálica, kits de interfaz de usuario y estos diagramas de flujo son tan cruciales para que los cree. Así que puedes imaginarte que puedes empezar a trabajar en un diagrama de flujo, por ejemplo, para tu cliente. Luego, una vez terminado ese proyecto, simplemente puede reutilizar ese diagrama de flujo en términos de creación de un kit de interfaz de usuario para su próximo proyecto, simplemente puede crear componentes para formas, para colores, para fuentes, para imágenes, para botones, y así sucesivamente. Y puedes simplemente usar y reutilizar esos componentes en tus proyectos futuros, lo que a su vez te va a ahorrar mucho tiempo y te va a ayudar a seguir adelante con tus proyectos más rápido te va a permitir cobrar mucho más porque vas a pasar mucho menos tiempo en cada proyecto porque ya has creado todos estos componentes. 110. ¿Qué componentes son importantes: Cuando se trata de estructura, estos componentes son realmente importantes y menos importantes. Entonces, realmente depende de ti qué tipos de componentes quieres usar. Entonces digamos que estás trabajando en proyectos de blog todo el tiempo. Simplemente eche un vistazo a sus trabajos anteriores y comprenda qué tipos de componentes ha utilizado en el pasado. Obviamente, algún tipo de barra de búsqueda o algún tipo de pie de página de navegación, tal vez incluso los deslizadores aquí o las puertas de imágenes son realmente obligatorias porque esos son tipos de elementos que van a utilizar todo el tiempo en tus proyectos. Pero dependiendo del nicho, eres independiente de los proyectos en los que trabajarás anteriormente y en los que anteriormente, eres tú quien va a determinar qué tipos de estos elementos vas para usar en tus kits de interfaz de usuario. Entonces te voy a mostrar con los ejemplos anteriores que te mostré. Y puedes determinar mirando la dosis, qué tipos de elementos puedes elegir. Y en los próximos videos de esta clase, te voy a mostrar cuáles son algunos tipos de elementos que se utilizan en el pasado y qué puedes aprender de eso. Entonces volviendo a estos ejemplos que te mostré anteriormente, puedes ver que tienen e-commerce aquí mismo. Y si me desplazo todo el camino por aquí, para que podamos ver el comercio electrónico. Y si me desplazo todo el camino hacia abajo, puedes ver Dashboard. Entonces, si estás trabajando en proyectos que requieren todos estos elementos, puedes imaginarte el tiempo que consumen todos estos. Así puedes crearlos una vez y luego simplemente reutilizarlos cambiando los colores, cambiando por ejemplo la posición de estos diferentes textos y así sucesivamente. Si nos desplazamos todo el camino hacia abajo, tenemos tarjetas de compañía. Así que esto puede ser, por ejemplo cartera del equipo Acerca de nosotros testimonios, características, precios y cosas así. Si nos desplazamos todo el camino hacia abajo, podemos ver tarjetas de música y video. Entonces estos quizás no sean tan importantes como estos anteriores, y pueden variar de un proyecto a otro. Tarjetas de noticias y revistas. Una vez más, si estás trabajando en proyectos de blog todo el tiempo, estos son realmente cruciales. Entonces, una vez que los crees, una vez va a ser mucho más sencillo reutilizarlos y reutilizarlos para futuros proyectos. Y se puede ver aquí mismo, así que tenemos diferentes tipos de navegación. Tenemos estas tarjetas sociales, que una vez más, dependiendo del proyecto en el que estés trabajando, pueden ser importantes o menos importantes. Contamos con elementos base y tarjetas de estilo. Entonces tenemos elementos base como estos navegación, pies de página, migajas. Tenemos estos diferentes íconos, cargadores, deslizadores, botones, colores. Y finalmente tienes las páginas de muestra en este kit de interfaz de usuario cuántico particular. Y puedes mirar estas páginas en busca de inspiración y ver dónde usaron todos estos diferentes elementos. Si echamos un vistazo a la plataforma y tenemos encabezados, tenemos contenidos. Entonces, una vez más, bloques de Contenidos, deslizadores, cuadrículas simples. Así que básicamente imágenes en una cuadrícula izquierda y derecha. Tenemos este hombre para grilla. Tenemos futuros a la izquierda características, ¿verdad? Por ejemplo, con maqueta de teléfono móvil, con maqueta de sitio web, lo siento, maqueta de laptop con maqueta de tableta. Tenemos diferentes carteras una vez más, dependiendo de dónde estés trabajando en qué naturaleza, cuándo usar una u otra. Tenemos comercio electrónico, especialmente importante si estás trabajando con sitios web de comercio electrónico. Tenemos tarjetas blogueadas. Y obviamente puedes usar y reutilizar estos diferentes componentes, por ejemplo, estas tarjetas de bloque, no tienes que usarlas para sitios web de blogs. Puedes usarlos, por ejemplo, para sitios web de comercio electrónico, esa es la belleza de estos kits de interfaz de usuario. Simplemente puedes reutilizar estas tarjetas en tus proyectos futuros y simplemente adaptarlas para que funcionen para ese proyecto en particular. Para que podamos tener testimonios de equipo, establos de precios, llamado a la acción. Estas tablas de precios son especialmente aburridas de crear porque básicamente eres, digamos que tienes por ejemplo 20 ejemplos diferentes de estas tablas de precios en línea y todos estos otros ejemplos son solo variaciones de esos ejemplos. Entonces, ¿por qué perderías el tiempo recreando todo el tiempo? Todos estos elementos simplemente crean, por ejemplo cinco o seis tablas de precios a la vez, y luego simplemente reutilizarlas para sus proyectos futuros le ahorrará mucho tiempo, especialmente con estos detalles aburridos donde tienes la mayoría de estas diferentes opciones, especialmente con tabla de precios. Entonces tienes opciones, tienes precios, tienes plan mensual, plan anual. Entonces todos estos detalles te van a llevar mucho tiempo crear para cada proyecto en particular. Entonces, por lo tanto, tenerlos en un solo kit de interfaz de usuario te va a ahorrar mucho tiempo. Si echamos un vistazo aquí mismo, llamado a la acción, especialmente importante con todas estas tarjetas promocionales, tenemos foros y contextos. Una vez más, con estas formas, ¿cuántas de estas variaciones puedes tener realmente? Entonces digamos que puedes crear por ejemplo 15, 20 formularios de contacto. Ahí vas. Puedes reutilizarlos para todos tus proyectos futuros. Y los encabezados y pies de página, sobre todo son aburridos para mí de crear por la repetitividad. Y están utilizando todos estos elementos diferentes. Por ejemplo, el logotipo del cliente va a estar a la izquierda, derecha, al centro en la parte inferior. Y eso es básicamente todo. Para que puedas ver cuando empieces a crear estos kits de interfaz de usuario, puedes obtener la imagen de qué tipos de elementos necesitas para crear más. Qué tipo de elementos necesitas crear menos obviamente para cualquier tipo de naturaleza, en algún tipo de formulario de contacto va a ser bueno incluir. Pero básicamente una vez que empieces a crear, puedes usar el formulario de contacto para esto, a partir de este proyecto. Puedes usar el formulario de contacto de este proyecto y simplemente adaptarte y trabajar para tus futuros proyectos. Ese es todo el punto de vista, crío. Y por eso creo que son sumamente útiles tenerlos y crear. Y obviamente la creación de este kit de interfaz no va a ser fácil. No va a venir primero. Este es el proceso que vas a utilizar y reutilizar a lo largo de tu carrera. Así que básicamente puedes desechar algunos elementos que ya no son relevantes en términos de estilo, en términos de función. Quizás algunos elementos ya no se utilizan en la industria o en, por lo que simplemente puede desecharlos y usar elementos que son n simplemente adaptarse y adaptarse a ese kit de interfaz de usuario que está utilizando. Así que esa es la belleza de los kits UI y por eso me encantan tanto. Y creo que deberías empezar a explorarlos también. 111. Estructura de kit de interfaz de usuario: En este video, te voy a mostrar algunas ideas de estructura para tus kits de UI en Adobe XD. Te voy a mostrar mis ejemplos porque he estado creando estas UI y UX hace cuatro años. Y tengo más de 500 productos de diseño en mi tienda web realizados en el.net. Voy a dejar los enlaces a todo y hablando en el PDF, simplemente puedes hacer clic en esos enlaces y visitar y explorar. Y si te interesa, incluso compra todos estos diferentes productos que mencioné n, que voy a mencionar en el futuro. Una vez que realmente lleguemos a estos tipos de venta y estos perfiles en estos sitios web, puedes vender tus diseños. Pero por ahora, exploremos la estructura de estos kits de interfaz de usuario, cómo pueden funcionar en Adobe XD y cómo puedes aprender de ellos y crear los tuyos propios. Entonces, lo que tengo aquí mismo es el constructor de landing page convertido, que es el producto que creamos hace un tiempo. Y este es el kit wireframe, obviamente, como pueden ver. Y si me acerco un poco más, pero puedes ver aquí mismo tenemos la navegación, tenemos los encabezados, historia, características, beneficios, promo, testimonios, equipo, precios, otros. Y para todos estos, tenemos múltiples opciones, obviamente porque este es el constructor de landing page. Estos son los elementos que van a utilizar para la mayoría de las páginas de destino. Y esto está destinado a alguien que está creando estas páginas de destino todo el tiempo porque la mayoría de estas empresas están creando estas páginas de destino todo el tiempo, por ejemplo, para su patada- iniciar campañas, por sus lanzamientos de productos, por sus promociones de productos, por todas estas campañas, para anuncios de Facebook, para anuncios de Instagram, anuncios de YouTube, etc. Por lo que las landing pages son sumamente importantes para eso. Este producto en particular está destinado a trabajar con páginas de destino. Entonces, una vez más, vamos a volver al nicho. ¿Cuál es tu nicho y cuál es tu tipo de proyecto en el que estás trabajando? Vas a crear componentes que van a funcionar en ese nicho. Si saltamos de nuevo aquí mismo, e.g. I. Puedo ver esto es 1,400. Y puedo saltar aquí mismo para crear un nuevo tablero de arte. Y puedo saltar aquí mismo, crear éste, clic aquí mismo y simplemente ajustarlo a 1,400, así para que todos nuestros elementos funcionen. Y voy a ampliarlo aún más. Entonces lo que puedo hacer es que puedo, por ejemplo clic en esta navegación Control C. Haga clic aquí, control V. Y puedo, por ejemplo, hacer clic aquí mismo, controlar C, controlar V, y ajustar esto para que se ajuste. Incluso puedo ponerlos dentro de la pila, y luego simplemente puedo arrastrar y soltar dentro de la pila. Pero también podemos hacer eso más tarde. Por ejemplo, yo. Quiero mostrar estas diferentes características. Entonces veamos dónde están las características. Aquí están. Entonces e.g. I. Puede usar este control C, control V. Y puedes ver lo fácil que es la creación de estos sitios web, digamos esta posición aquí mismo. A lo mejor quiero usar éste ahora. Posición aquí mismo. A lo mejor quiero usar este de aquí mismo. Al igual que así. Y digamos que ahora llega el momento de los precios, ponlo aquí mismo. Y tal vez algo como esto. Quiero persuadir aún más a la gente. Ponlo aquí mismo. Y la posición no importa, uh, por el momento y vas a ver por qué en sólo un segundo. Así que ponlos aquí mismo. Y digamos que ahora que tu landing page está terminada, puedes seleccionarlas todas, presionar Control G para ponerlas en un grupo y luego ponerlas en una pila. Esta es la pila vertical y puedo poner la distancia de 150, por ejemplo entre ellas y presionar Enter o Return. Y ahora tenemos un espacio uniformemente espaciado entre todos nuestros elementos. Puedo ponerlos todos en la parte superior de la página así. Y por ejemplo yo. No quiero que sea una quinta parte de esto. Así que simplemente puedo ajustar solo este a cero. Y todos estos otros van a tener 150 para el espaciado. Para que puedas ver lo sencillo que es crear una landing page. Puedes hacer doble clic aquí mismo para cerrarlo aquí mismo. Y por ejemplo digamos que la copia está lista y quieres hacer algunos cambios en las imágenes. Simplemente puede arrastrar y soltar sus imágenes dentro de aquí, colocarlas y luego simplemente hacer cambios. Por ejemplo, tenemos este icono de imagen aquí mismo. Simplemente puedo hacer clic en Eliminar para eliminarlo. Y puedo por ejemplo bajar la opacidad de mi imagen para que destaque un poco más. Y por ejemplo quiero agregar imagen adicional a aquí. A lo mejor esta imagen, quiero agregar algo para el video. Tal vez. A lo mejor esta imagen va a funcionar para que veas lo sencillo que es trabajar con estas diferentes imágenes. Entonces puedo seleccionarlo, golpear para, tal vez, para 40% de opacidad. Quizás pueda usar un ícono diferente, diferente aquí mismo. Y a lo mejor quiero poner esto para que sea, no sé, algo un poco más redondo. Para que pueda saltar aquí mismo, escriba 20 para el radio de la esquina. Si quiero hacer eso, puedes ajustar esto para que te hagas una idea de lo sencillo que es crear estos elementos. Entonces esta es básicamente mi estructura y cómo mi equipo y yo estamos trabajando durante años en estas estructuras. Y te voy a mostrar diferente estructura para niños móviles. Y este es el kit de interfaz de usuario de Chetty. Y se puede ver que tenemos imágenes aquí mismo. Obviamente va a ser bastante sencillo reemplazar todas estas imágenes. Sólo vas a usar exactamente la misma estructura. Entonces, si le echo un vistazo aquí mismo, tal vez quiera ajustar estas imágenes para poder seleccionarla y ésta, y tal vez pueda seleccionar dos imágenes distintas, arrastrarlas y soltarlas dentro. Y quiero usar este, por ejemplo que te des la idea de lo rápido que es. Pero lo que también puedes hacer es dar click aquí mismo, y aquí tenemos todos estos diferentes elementos. Ahora bien, los elementos son realmente útiles. Tenemos este azul principal y quiero hacer clic derecho, hacer clic en Editar, y tal vez quiera cambiarlo a rojo. Así que solo fíjate cómo se aplica a lo largo de todos nuestros diferentes cambios y simplemente ajustado para leer. También puedo ir Control Z. para deshacer eso. También podemos cambiar los tamaños de fuente y las opciones de fuente. Podemos cambiar los pesos de la fuente. Podemos cambiar todos estos elementos diferentes. Entonces, lo que puedo hacer es presionar Editar y, por ejemplo quiero elegir algunos otros teléfonos como Open Sans, por ejemplo, presionar Enter. Y va a aplicar ese cambio a lo largo de nuestro diseño. Para que veas lo fácil y sencillo que es eso. Además, podemos tener todos estos diferentes componentes que podemos cambiar de forma independiente. Así se puede ver por ejemplo que tenemos estos puntos que son negros, aquí mismo, aquí mismo, aquí mismo. Entonces a lo largo de nuestro diseño y todo lo demás, que es negro, queremos cambiarlo a algo salvaje, como leer una vez más, por ejemplo para que puedas ver lo que sea que tuviéramos. Ese color se va a aplicar en todo el diseño artístico. Y va a aplicar donde quiera que lo tengamos en primer lugar. Entonces es por eso que todos estos componentes son extremadamente útiles. Y en el siguiente ejemplo y en el siguiente video, voy a mostrar cómo puedes convertir tu diseño existente en UIKit porque no vas a comprar estos kits de UI para cada proyecto. Y creo que es un enfoque mucho mejor, pesar de que estoy vendiendo estos kits de UI, es mucho, mucho mejor enfoque para comenzar con un kit de UI premium solo para tu estructura, solo para este elemento, solo por algunos elementos aburridos, que luego puedes reutilizar para tus propios proyectos y luego crear tu propio kit de interfaz de usuario usando estos elementos, usando estas tácticas y técnicas, que va a funcionar para tu caso de uso particular. Porque voy a volver al nicho una vez más. Debido a que estás, por ejemplo en un nicho de viajes, los elementos que funcionaron para ti en tu proyecto podrían no funcionar para alguien que está en un nicho de blog, por ejemplo, porque pueden necesitar diferentes elementos. Entonces en el siguiente video, te voy a mostrar cómo puedes convertir tu proyecto existente en kits de UI. 112. Creación de kit de interfaz en Adobe Xd: En este video, te voy a mostrar cómo puedes convertir tu proyecto existente en UIKit y luego reutilizarlo para tus futuros proyectos. Este enfoque puede ser utilizado para diferentes proyectos tan grandes y pequeños. Y puedes usar ciertos elementos o puedes usar todos los elementos y luego simplemente continuar a partir de ahí. Puedes usar un tipo de elemento, por ejemplo, navegación, si eso es algo que se repite todo el tiempo en tu proyecto, o puedes usar diferentes tipos de elementos, por ejemplo, ambas navegaciones, imágenes de héroes, pies de página, blog, corazones, y todo este tipo de artículos. Entonces voy a mostrar en este ejemplo de para los proyectos existentes como puedes convertirlo en un kit de UI. Este es el proyecto que he creado para uno de mis cursos anteriores. Lo voy a dejar, deja el enlace a él en el PDF para que puedas echarle un vistazo si te interesa. Entonces todos estos elementos se crean en esa clase. Por lo que tiene más de 20 h de largo. Y una vez más, voy a dejar el enlace en el PDF para que puedas acceder rápidamente a él. Y lo que tenemos aquí son diferentes componentes para los colores, estilos de personajes, todos estos componentes para todas estas tarjetas diferentes, tenemos diferentes iconos, tenemos diferentes estructuras derecho aquí. Tenemos el logo, tenemos las tarjetas de flechas y mucho, mucho más. Entonces lo que puedes hacer para esto es si hago clic aquí mismo, una vez más, estamos en el 120 en lugar de 1,400 como hicimos la última vez. Entonces lo que puedo hacer es hacer clic en mi mesa de trabajo para crear una nueva mesa de arte. O simplemente puedo duplicar el existente. Lo que mejor aún, lo que puedo hacer es ir aquí mismo al Archivo. Y luego Nuevo, perdón si se queda un poquito porque estoy ejecutando todos estos elementos en mi máquina. Y este archivo es bastante enorme. Entonces voy a crear un nuevo archivo, y simplemente voy a reutilizar algunos de estos diferentes elementos en mi proyecto. Bien, así que ahora que hemos creado ese proyecto, lo que voy a hacer es saltar aquí mismo al diseño de este sitio web. Y voy a saltar todo el camino hasta aquí, golpeo Control C. Y luego voy a cambiar al proyecto que acabamos de crear, golpeamos Control V, para que yo pueda simplemente pegar dentro de este diseño. Y lo que también puedo hacer es volver a saltar hasta aquí. Y tal vez pueda usar el uno al otro. Vamos a usar este control C. Y voy a saltar a este proyecto, golpear control V. Y luego una vez ahí vamos, sólo para ahorrarnos un poco de tiempo, lo que voy a hacer es que voy a en realidad apague esto, así que mátalo. Y como puedes ver, algunos elementos ya están pegados de nuestro proyecto anterior, como todos estos diferentes íconos. Pero no tenemos colores y estilos de personaje y podemos trabajar en ellos por separado. Lo que quería mostrarles es esto. Entonces voy a agrandar esto. Y digamos que quiero usar esta navegación, pero antes que nada, usemos la misma grilla. Entonces, si lo enciendo, tenemos, veamos, 12 columnas. Entonces 60, 82, y voy a hacer lo mismo por esto. Entonces tenemos 60, 82. Ahí vamos. Entonces es lo mismo que éste. Y voy a bajar así la opacidad de estas líneas de cuadrícula. Entonces digamos que quiero usar esta navegación para poder presionar Control C, pegarlo aquí mismo. Y lo que puedo hacer es posicionarlo aquí mismo. Y digamos que esta es nuestra primera navegación. Vayamos a nuestras capas. Entonces podemos usar por ejemplo Nav uno. Y lo que también puedo hacer es desvincularlo. Así que vamos a hacer clic derecho. Sólo déjame ver dónde está. Componente desvinculado. Ahí vamos. Entonces este es el único fin. Podemos crearlo para que sea componentes locales. Podemos golpear Control K Si queremos, y podemos crear diferentes estados a partir de él. Así que puedo hacer clic aquí y escribir por ejemplo digamos botón grande, big btn. Y lo que quiero hacer aquí es que solo quiero hacer doble clic dentro y extender este botón para escuchar y quizás mover más nuestros elementos de navegación. Digamos que quiero alinearlos aquí mismo, o tal vez incluso mejor en el centro así. Entonces, si echamos un vistazo a este estado predeterminado y a este estado, tenemos estos dos estados separados. Entonces lo que puedes hacer con este es simplemente mantener Alt en tu estado predeterminado, colocarlo aquí también, no sé, digamos 60, luego usa este estado. Y ya tienes dos tipos de navegaciones distintas. Entonces digamos que quiero crear otra. Entonces podemos volver al estado predeterminado, que es éste, crear un nuevo estado. Y e.g. I. Se puede poner algo como sin texto, algo así. Entonces en este estado, lo que vamos a hacer es básicamente entrar y eliminar nuestro texto, abrir, seleccionar nuestro texto, presionar Eliminar. Entonces ahora solo nos quedamos con nuestro botón. Y podemos o bien expandir este botón, dejarlo así. Todo depende realmente de ti. Entonces lo que voy a hacer es seleccionar esta, moverla a 60 y dar click sin textos. Entonces ahí vamos. Tenemos nuestros Tres elementos diferentes y tres elementos de navegación diferentes ya creados. También puedes hacer es organizar estos, y me gusta mucho hacerlo. Entonces este es ahora uno, este es ahora los dos. Y esto va a ser nav tres. Déjame darte solo un ejemplo más para que podamos volver a este predeterminado y crear uno sin botón o sin btn para abreviar. Entonces lo que vamos a hacer es básicamente hacer un punto selecto. Entonces de aquí somos 40 y voy a seleccionar nuestro botón eliminado y seleccionar todos nuestros elementos de navegación. Así. Los posicionó al desplazamiento de borde 1234. Entonces estamos a 40 de este borde, igual que estamos con este filo. Y básicamente voy a hacer eso una vez más. Entonces voy a sostener mi Alt u opción, seleccionar conocer btn. Y ahí vamos. Puedo volver al estado predeterminado y puedes ver lo rápido que es esto, qué tan rápido es esto. Y te va a ahorrar un montón de tiempo. Voy a cambiar esto a botón grande así. Entonces te va a ahorrar un montón de tiempo después para tus futuros proyectos. Y ya viste lo sencillo que es esto simplemente copiar y pegar en video anterior. Pero también puedes hacer por este héroe imágenes, por ejemplo así que vamos a golpear Control C. Voy a Control V. Y lo que te recomiendo que hagas es cambiar el nombre de esto a navegación y crear por separado rpart para estas imágenes de héroe, por ejemplo así que en este caso, digamos que tenemos a estas personas este lado y vamos a duplicarlo. Control J, perdón, Control D, así y posicionarlo para que sea 60. Entonces, una vez más, esto va a ser en mesas de trabajo separadas, así que vamos a crear eso en realidad. Entonces voy a quitar estos dos. Y puedes colocar pies de página dentro de tu navegación si quieres. Ya depende de ti cómo quieres crearlos. Y voy a llamar a esto Héroe, por ejemplo porque estas imágenes de héroes son algo en lo que vas a pasar la mayor parte de tu tiempo. Entonces digamos eso para este segundo ejemplo, que va a ser héroe para este héroe uno. Observe cómo no creo componentes a partir de estos. Quiero mostrarles este segundo enfoque. Entonces como ya te mostré con estos, los componentes son obviamente extremadamente simples de crear, pero también puedes ir sin componentes y simplemente puedes crear los elementos separados por ti mismo. Entonces digamos que quiero posicionar este texto a la derecha. Lo que podemos hacer con estos es que podemos posicionar estos dos en un grupo, ponerlos en una pila, y simplemente invertir el orden, así. Y ahora el texto está de este lado, gente está de este lado. Y lo que también podemos hacer es utilizar estos elementos de fondo. Entonces esta forma de héroe, tal vez quiera darle la vuelta así, y quiero posicionarla así. Y todos estos diferentes elementos. Entonces Hero Elements, los voy a posicionar por aquí. Entonces te das la idea de lo sencillo que es esto, n. También tengo una máscara aquí mismo con mi círculo de héroes adentro. Entonces lo voy a posicionar aquí mismo. Entonces ahí vamos. Nosotros solo un par de clics. Tenemos dos opciones diferentes que podemos mostrar a nuestros clientes. Lo que esto va a hacer por ti una vez más, te va a permitir trabajar mucho más rápido en estos proyectos, sobre todo con estas tareas repetitivas como mencioné. Entonces, navegación, imágenes de pie de página y todos estos diferentes elementos que se van a repetir todo el tiempo, como tablas de precios, por ejemplo, por lo que es mucho más fácil para usted como diseñador crea todas estas variaciones en tu estilo, usando tus componentes, usando tu lenguaje de diseño, usando tu fuente preferida, usando tus colores preferidos, y luego simplemente reutiliza estos componentes para sus proyectos futuros. ¿Esto es trampa para tus clientes? Sepa, porque sus clientes solo quieren el resultado final. No les importa cómo llegues a ese resultado final. ¿Esto es algo que reutilizó? Obviamente lo es, pero solo asegúrate de no usar ningún logotipo que hayas usado anteriormente en tus proyectos y de no usar ninguna marca, por ejemplo, ciertos colores en tus libros de marcas que obtienes con tus clientes, por ejemplo, algunos colores son de marca registrada, algunas fuentes son de marca registrada. Así que solo asegúrate de usar, por ejemplo fuentes gratuitas de Google cuando empieces a crearlas, y luego simplemente adaptarlas a las especificaciones de tu cliente, por ejemplo, para colores y fuentes. Déjame mostrarte una cosa más. Con el poder de x D, tenemos todos estos elementos diferentes. Así que imagina que queremos usar esta imagen. Entonces Control C, Control V aquí mismo. Y digamos que esta es nuestra primera tarjeta. Entonces llamémoslo tarjeta uno, como pato. Y aquí tenemos la pila, como pueden ver. Entonces voy a pegarle a Alt. ¿Qué hacer aún mejor? Puedo crearlo como un componente. Entonces Control K, tenemos este estado predeterminado es con la imagen a la izquierda. Entonces nuevo estado, imagen correcta. Y luego simplemente ajústelo a aquí. Así. Y lo que voy a hacer por éste es que básicamente voy a darles la vuelta. Entonces ahí vamos. Y voy a ajustar esta tarjeta. Una, voy a asegurarme de que mi imagen esté justo aquí, y ahí vamos. Entonces este es nuestro estado predeterminado. Esta es una imagen correcta. Y una vez más, voy a crear uno más. Así que centrar la imagen así. Y voy a hacer un cambio así. Entonces 123, así que estamos en 60 así. Y obviamente para éste, voy a ir con imagen central. Entonces lo que voy a hacer es saltar aquí mismo. Y voy a cambiar la posición de mi stack. Entonces lo que voy a hacer es ponerlos dentro de un grupo. Voy a usar el stack vertical de la SEC así. Y básicamente solo expande la imagen a los bordes así. Haga doble clic en el interior colocado por ejemplo aquí. Ahí vamos. El texto va a estar en el centro en un momento. Así que vamos por el estado predeterminado, y vamos a trabajar en la imagen central aquí mismo. Porque este es nuestro componente. Lo que quiero hacer es básicamente ajustar este texto. Así que vamos con, veamos el ancho automático. Entonces lo que voy a hacer es hacer doble clic dentro y ajustar este texto. Bingo un poco afuera. Pero también puedes hacer es crear altura automática y puedes ajustarla así. Y simplemente trae aquí lo que no necesitas así. Así que solo tenemos un par de clics. Vamos a poder ajustarlo. Y puedes hacer auto peso, puedes hacer auto altura, lo que quieras. Y voy a asegurarme de que esto esté alineado al centro así. Y tal vez voy a posicionar esto en el centro y colocar mi botón en el centro también. Y asegúrate de que somos 40 de todos estos. Y solo asegúrate de que estamos, porque estamos en una pila, por ejemplo 64, esta. Y también puedes ingresarlo aquí mismo. Entonces, si selecciono mi grupo aquí mismo, selecciono 60, y es seleccionado. Ahí vamos con solo un par de clics. Tienes tres tarjetas diferentes que puedes usar. Así que básicamente tenemos imagen por defecto, imagen derecha, imagen central. Para que puedas hacer lo que quieras con esos. Entonces podemos ver lo sencillo que es crear estos elementos en Adobe XD. Y una vez más, te exhorto a que empieces a pensar en tu proyecto, a empezar a pensar en tu nicho, que son algunos elementos que se repiten todo el tiempo, que se buscan. Mis elementos que son extremadamente aburridos. ¿Puedes comprar algo o descargar algo gratis que va a mejorar tu flujo de trabajo, que va a acelerar tu flujo de trabajo? O tienes que crear todo desde cero dependiendo del nuevo corion, dependiendo de tu estilo de diseño. Si ese es el caso, entonces simplemente comience creando todos estos elementos regulares como le mostré en este ejemplo, por ejemplo, navegación, pie de página, todos estos autos diferentes que son va a repetir todo el tiempo y luego simplemente expandirse a partir de ahí a lo largo del tiempo. Por último, lo que quiero mostrarte es que si volvemos a Adobe XD, puedes ver que guardó este archivo en la Nube. Esto es extremadamente importante, especialmente si lo estás compartiendo con tus compañeros de diseño, con tus clientes, o si trabajas remotamente en empresas, por ejemplo, tienes la oficina y tú también funcionan en laptop. Pero lo que también recomiendo es guardar esto en tu escritorio. Para ello puedes simplemente escribir aquí en Archivo, Guardar como, y puedes elegir tan seguro como documento local a tu escritorio. Lo que eso te va a permitir es que simplemente puedas tener este archivo, por ejemplo, si la electricidad se ha ido, puedes llevarla a tu laptop y llevarla a donde quieras. Si hay que ajustar y hacer algunos cambios rápidos, si Internet se ha ido, que es realmente el beneficio clave de los documentos locales, simplemente puede guardarlo localmente y simplemente trabajar o no. Si no tienes conexión a Internet. 113. Sistemas de diseño VS: También hay un tipo más de plantilla que está disponible en línea, que se llama sistema de diseño. Y el sistema de diseño está básicamente muerto. Implica diferentes tipos de fuentes, diferentes tipos de reglas, diferentes tipos de cuadrículas en muchos otros proyectos, especialmente si estás trabajando con código. Entonces vas a asignar diferentes fragmentos de código. Vas a asignar diferentes tokens para colores, para fuentes y mucho más. Entonces el sistema de diseño es mucho más complejo, bestia y un kit de interfaz de usuario. Entonces, dependiendo de los proyectos en los que estés trabajando, puedes crear un sistema de diseño que sea más pequeño si estás trabajando en proyectos pequeños o si estás trabajando con proyectos más grandes, definitivamente te recomiendo trabajando con sistema de diseño. Pero la diferencia clave entre el kit de interfaz de usuario y el sistema de diseño es que UIKit ya tiene estos componentes prefabricados ya creados. Entonces como viste en el video anterior, ya creamos esa navegación. Entonces está listo. Tiene el logo dentro del cual puedes intercambiar con tu próximo proyecto cliente. Tiene el tipo en su interior, por lo que todo ya está posicionado. Simplemente puede cambiar el nombre de algunos de estos tipos. Puedes cambiar la fuente, puedes cambiar los estilos, puedes cambiar el tamaño y todo lo demás. Y ya tenía ese botón en su lugar. Así que simplemente puedes ajustar el ancho, la altura, el color del botón, la sombra de fondo, y todos estos elementos. Y ese es el kit de interfaz de usuario en pocas palabras, mientras que con el sistema de diseño, tendrías que recrear esa navegación desde cero. Y porque dentro del sistema de diseño tienes mucha estructura coherente. Entonces, una vez más, vuelvo al proyecto más grande, sobre todo en el enorme proyecto donde mayoría de los diseñadores están trabajando en ese mismo proyecto. Entonces el sistema de diseño es realmente crucial porque necesitas tener un repositorio central de elementos para ser utilizado por todos estos diferentes diseñadores dentro de tu equipo. Mientras que si estás trabajando solo o si estás trabajando solo con otro diseñador, o si estás trabajando directamente con el cliente, UI kit es una solución mucho mejor, en mi opinión, porque una vez más, va a acelerar tu flujo de trabajo masivamente porque ya tienes todos estos elementos creados. No tienes que crearlos desde cero todo el tiempo. Si bien diseñar sistemas es extremadamente importante, extremadamente valioso y extremadamente útil, en mi opinión, para estos proyectos más pequeños, realmente no es necesario crear estos sistemas de diseño porque tener los componentes. Así que simplemente podemos ajustar los componentes. Simplemente puede ajustar el tamaño de fuente. Simplemente puede ajustar la familia de fuentes. Se puede ajustar el color. Puede ajustar todos estos elementos diferentes, por ejemplo, iconos. Digamos que estás usando estos iconos de imagen a lo largo de tu diseño. Y solo quieres cambiarlo muy rápido mientras puedes crear un componente. Y la próxima vez en el siguiente proyecto, si quieres cambiar eso, simplemente puedes arrastrar y soltar un ícono diferente dentro. Se va a intercambiar esos componentes. Y ahí tienes. No necesitas un sistema de diseño para todos estos pequeños proyectos. Entonces, una vez más, depende de ti qué tipo de proyectos estés trabajando, en qué tipo de nicho te encuentres, especialmente para estos pequeños nichos, estos sistemas de diseño no son realmente tan útiles. Una vez más, todo depende de ti y voy a dejar los enlaces a algunos de los sistemas de diseño más conocidos en un PDF, puedes descargar la versión XD. Puedes abrirlos en Adobe XD y simplemente puedes explorar qué son estos sistemas de diseño y qué puedes aprender de ellos. Porque todos esos son creados por grandes empresas. Y una vez más, esas grandes empresas crearon esos sistemas de diseño porque tienen múltiples diseñadores trabajando en equipo al mismo tiempo. Por lo que necesitan ese repositorio central de elementos para ser utilizados por todos estos diferentes diseñadores. De lo contrario, si solo eres una banda de hombres, si estás trabajando en proyectos pequeños, simplemente puedes usar kits de interfaz y va a estar bien. 114. Kits de interfaz de usuario libres de VS: Está muy bien crear estos kits de interfaz de usuario por ti mismo. Pero a veces puede ser más fácil simplemente continuar y descargar o comprar estos diferentes kits de interfaz de usuario que van a ser utilizados para sus proyectos futuros, tal vez para esos elementos aburridos como hablamos anteriormente, me gustó la navegación, como el pie de página, como las tablas de precios y así sucesivamente. Entonces, donde puedes encontrar estos kits de interfaz de usuario, te voy a mostrar en la siguiente lección donde realmente vamos a discutir la venta tus propios kits de interfaz de usuario personales en estos sitios web. Pero básicamente lo que quería compartir en esta lección es estos kits de interfaz de usuario premium están hechos que estos kits de interfaz de usuario premium están hechos con una marca tonta en mente. Lo que quiero decir con eso es que no hay cierta conexión entre ese kit de interfaz de usuario y cierta marca. Puedes imaginarte que si iOS lanzó su kit de interfaz de usuario va a ser específico para esas pautas de marca, a esas pautas de cuadrícula, a esas pautas de topografía y todas estas diferentes elementos que comprenden ese kit de interfaz de usuario en particular y de ese sistema operativo en particular en ese caso. Entonces es lo mismo. Si Facebook, por ejemplo, lanza su propio kit de interfaz de usuario, va a ser reconocido por ese color azul, por la fuente de deuda y todos esos elementos. Si bien con estos kits de interfaz de usuario premium y gratuitos, que puedes encontrar en línea, no hay una marca determinada en mente. ¿Por qué es eso? Porque está destinado a ser utilizado por otros diseñadores. Va a ser bastante sencillo para ti cambiar los colores, cambiar las fuentes y todos estos elementos de los que hablamos antes. Entonces ese es el objetivo del kit de interfaz de usuario premium o gratuito. Ahora, ¿cuál es la diferencia entre kit de interfaz de usuario gratuito y premium? Obviamente, el número uno está en precio. Los kits de interfaz de usuario gratuitos se pueden descargar de forma gratuita, obviamente, y se puede comprar el premium. Y la diferencia clave, en mi opinión es el número de elementos. Por lo general, estos kits de interfaz de usuario gratuitos solo vienen con diez o 20 elementos diferentes. Mientras que los kits de interfaz de usuario premium, como el kit de interfaz de usuario cuántico, especialmente que te mostré antes, vienen con por ejemplo 1,000 elementos diferentes. Además, hay diferencia en los tipos de archivos, por ejemplo, con kits de interfaz de usuario gratuitos, generalmente viene con un solo tipo de archivo, por ejemplo, Adobe XD o Adobe Photoshop o Sketch o Figma o lo que sea. Si bien con los premium, los diseñadores generalmente se esfuerzan por incluir todos estos diferentes tipos de archivos. Así que no importa lo que estés usando, vas a estar cubierto. También, hay una diferencia en la diferenciación de elementos. Entonces, en los kits de interfaz de usuario gratuitos, simplemente vas a obtener, por ejemplo, 23 categorías. Mientras que con los kits de interfaz de usuario premium, generalmente obtendrás 102050 categorías diferentes. Y por último, quiero mencionar el apoyo. Si algo se rompe, si algo no funciona con tres kits de UI, básicamente, a quién le importa, es gratis y no vas a conseguir ningún apoyo del diseñador. Mientras que con los mercados premium, especialmente si los estás comprando directamente en su sitio web, básicamente vas a tener derecho al soporte. Y vas a ser el primero en la fila para obtener ayuda de estos diseñadores que crearon estos kits de interfaz de usuario. Entonces en el siguiente video, voy a hablar de vender tus propios kits de UI. Y básicamente vamos a navegar por estos diferentes sitios web. Y te voy a mostrar dónde puedes conseguir los kits de UI premium por ti mismo. Y también puedes vender tus propios kits de interfaz de usuario en esos sitios web en particular. 115. Creación y venta de tu kit de interfaz de usuario: Cuando se trata de comprar kits de interfaz de usuario premium en línea, o cuando se trata de vender sus propios kits de interfaz de usuario en línea. Solo hay un puñado de sitios web donde puedes hacerlo con éxito. Hay muchos sitios web diferentes por ahí. Y mi consejo como alguien que está en esto por seis años es que no trates de vender en todas partes porque solo te vas a dejar diez, vas a pasar demasiado tiempo perdido en estos sitios web que no van a generar tus ventas. Siguió este consejo. Sigue este video de alguien que lo ha hecho, como dije, hace seis años y tengo 100 mil ventas en todos mis diferentes productos. Entonces debería saber, pienso hasta dónde se debe vender y dónde es rentable o no. Entonces en este video, te voy a mostrar, como dije en el video anterior, estos sitios web donde puedes comprar kits de UI premium y donde puedes vender tus propios Kits UI. Ahora primero que nada, por qué deberías vender tus propios kits de UI en primer lugar. En realidad, es solo un buen sentido hacerlo y es solo una buena fuente de ingresos adicionales para ti. Si, por ejemplo, ha creado un kit de interfaz de usuario atractivo para uno de sus proyectos anteriores. Simplemente puedes ampliarlo usando los consejos y técnicas de las que hablamos anteriormente. Simplemente prepararlo y venderlo en uno de estos diferentes sitios web. Puedes ponerlo a la venta por el precio que se representa en todos estos diferentes sitios web. Simplemente puede ajustar por el precio de mercado. Puedes explorar lo que otros están haciendo. Simplemente ajusta por ti mismo. Entonces, si tienes por ejemplo 100 elementos en tus kits de interfaz de usuario y estás ofreciendo solo un tipo de archivo, que es Adobe XD. asegura de no cobrar demasiado porque estás compitiendo contra alguien más que lo está creando en Adobe XD sketch Figma Photoshop. Entonces tal vez que tu hijo vaya a vender mucho mejor que tu kit de interfaz porque están ofreciendo todos estos diferentes tipos de archivos. Vamos a saltar dentro y te voy a mostrar todos estos diferentes sitios web y donde puedes vender tus productos. Y antes que nada, el autohospedaje. Entonces, básicamente, el autohospedaje es donde estás alojando los productos y tú eres el encargado de traer a tus clientes. Entonces estás a cargo de la promoción, estás a cargo de la venta, estás a cargo de la entrega de todo lo demás. Y también son marketplaces donde puedes vender en todos estos diferentes marketplaces y ellos están haciendo todo el trabajo por ti. Así que comencemos con auto alojado en básicamente el sitio web que estoy usando durante años es gum road. Puedes ajustar, puedes subir todos estos diferentes productos. Puedes crear enlaces personalizados, descuentos personalizados, colores personalizados. Puedes crear estos diferentes botones de llamada a la acción, como dice aquí mismo, empezar a vender o comprar ahora, o comprar ahora, lo que quieras. Y básicamente puedes atar esto con la presentación de balizas, con presentación de driblar, simplemente puedes llevar a tus espectadores aquí y ellos pueden comprar en tu tienda de cámaras. O puedes hacer lo que hice con mi equipo es crear un sitio web. Y en este sitio web, puede crear por ejemplo kits de interfaz de usuario. Y digamos que puedes ver UIKit aquí mismo, UX kids aquí mismo. Entonces tenemos un montón de ellos. Y digamos que los usuarios quieren comprar este, por ejemplo, simplemente pueden hacer clic. Los va a llevar a la página específica para ese producto, que va a tener la descripción aquí mismo, ¿qué incluye? Funciona en qué software y cuando haces clic en Comprar ahora, los va a llevar a la página de chicle road. Simplemente pueden hacer click, yo nos quiero y pueden adquirir este producto. Y como puedes ver, es bastante más sencillo pasar de página web a escuchar. Lo que también puedes hacer es venta integrada. Lo que eso significa es que cuando hacen clic en Comprar ahora, una ventana se va a abrir aquí mismo y pueden comprar directamente desde allí. Pero solo asegúrate de entender si estás usando gum road, especialmente si estás usando algo como Google Analytics, por ejemplo, esos dos van a chocar. Entonces básicamente solo asegúrate, y por eso digo que te redirige a una página de compra segura. Entonces cuando van justo aquí, como pueden ver, gum road es realmente seguro ya que es mi sitio web, pero solo quiero tener esa capa adicional de seguridad porque la gente está dejando su tarjeta de crédito números, sus direcciones de correo electrónico de PayPal. Entonces no quiero que le pase nada a eso. Entonces básicamente es Esa es mi opinión. También tienes un sitio web llamado sulfuro, que básicamente es bastante similar a venir camino, pero en mi opinión, camino de las encías está ahí desde el inicio de este juego en línea y puedes, como dije, ajustado para adaptarse a lo que sea que estés haciendo, sea cual sea el aspecto de tu producto, en este caso , UIKit, pero puedes vender todo tipo de cosas diferentes. Ahora pasemos a los mercados. Y te voy a mostrar cuáles son algunos de los principales mercados que hay. Y como dije, puedes explorar todos estos otros mercados, especialmente cuando empiezas a vender, cuando empiezas a conseguir tracción. Todas estas diferentes personas del mercado se acercarán a ti y te dirán que tienen este nuevo y revolucionario sitio web que te va a traer tanto dinero. No vas a saber qué hacer con ello, pero simplemente no los escuches. Asegúrese de comenzar a vender en estos sitios web principales y luego expandirse a estos sitios web más pequeños. Pero solo con un producto a la vez. Si tienes 500 productos como yo, es literalmente imposible subir todos esos productos a todos esos diferentes sitios web. Y ¿por qué deberías siquiera querer hacer esto? Si no tienen por ejemplo 1 millón de vendedores diferentes o si no te traen suficientes ventas. Entonces para empezar, lo que tenemos es Envato market y este sitio web es Graphic River. Dentro de eso, tienes Web Elements y tienes interfaces de usuario. Se puede saltar dentro de ahí. Puedes ver cómo se ven algunos de estos diferentes productos. Como dije anteriormente, no tienes que vender kits de UI. Puedes vender lo que quieras. Pero esta clase se trata de kits de interfaz de usuario. A continuación, hemos diseñado modelo y estos chicos son sin miedo selectivos sobre lo que es capaz de ir en su página web. Y puedes ver que todos estos elementos son realmente de alta calidad, realmente de primera categoría, especialmente para estos kits de interfaz de usuario y, por ejemplo si hago clic aquí solo para mostrarte estas diferentes presentaciones porque estás trabajando con ellos para crear estas presentaciones. puede ver que son realmente a pantalla completa, realmente se ven pulidos. Realmente se ven profesionales. Realmente se ven de alta gama, y eso es lo clave de ellos. Y creo que también puedes agregar diferentes animaciones cuando estás creando con ellas. A continuación tenemos Mercado Creativo y básicamente río gráfico y Mercado Creativo, o ahí desde el principio de los tiempos. Y puedes navegar a través de todas estas diferentes plantillas. Así que vamos con las plantillas web, por ejemplo, puedes ver cuántas de estas hay. Pero si voy con plantillas y voy con, déjame recordarme dónde están todas estas. Así elementos web gráficos. Y si hago clic ahí, podemos filtrar a través. Así que vamos con Adobe XD. Y puedes ver todos estos diferentes elementos para Adobe XD. E incluso podemos filtrar esto más yendo a plantillas de sitios web de redes sociales. Y tenemos kits de wireframing, e.g . I. Puede seleccionar eso. Y se puede ver a los niños wireframe, cómo se ven, ¿cuánto hay? Aquí están los míos. Y puedes navegar a través de ellos si te interesa. Y eso es básicamente todo. Simplemente vaya aquí y vea qué están haciendo estos otros diseñadores C, cuál de sus categorías están usando, C en qué software están creando estos niños wireframe, UI kits y así sucesivamente. Y básicamente empieza desde ahí y explora lo que funciona para ti. Por último, lo que tenemos también es que ustedes son ocho, lo cual es bien conocido en la industria. También son de alto estándar, de alta calidad. Y realmente lo son a la hora de seleccionar quién es capaz de vender en su sitio web para que puedas consultarlos. Realmente los recomiendo. Por último, tenemos elementos Envato y hemos diseñado paquetes. Envato elements es solo la parte del mercado Envato. Por lo que hay que aplicar por separado para vender en elementos Envato. Pero una vez que lo haces , básicamente te pagan por la cantidad que alguien descarga tus productos. Entonces, si busco el kit de interfaz de usuario, por ejemplo puedes ver todos estos diferentes elementos. Y básicamente la diferencia entre este mercado y todos estos otros mercados es excepto, UH, porque tienen todos los pases de acceso, pero tienen limitaciones sobre cómo muchos artículos que puedes descargar por semana, por mes, por día, y así sucesivamente. Si bien Envato elements no tiene ninguna limitación, puedes descargar lo que quieras, donde quieras, y estás pagando una suscripción anual en lugar de tres meses, seis meses, un mes, lo que sea. Todos estos otros son básicamente solo paga por la marcha. Entonces, si eliges comprar este producto, por ejemplo, solo lo compras. O si eliges comprar mis productos, simplemente puedes comprarlo. Y la misma historia con todas estas otras, y la misma historia con gum road, pero con cámaras, puedes elegir crear paquetes separados. Entonces, si volvemos a aquí, si me desplazo hacia abajo, por ejemplo, I. Puedo crear un paquete de kit de interfaz de usuario a partir de todos mis productos. Y puedo elegir crear un paquete de wireframe masivo como lo he hecho. Y puedes hacerlo con bastante facilidad dentro de las cámaras, mientras que no puedes hacerlo en todos estos diferentes sitios web. Ahora volviendo a Envato elementos, como dije, no estás ganando dinero por unos productos separados que alguien más compró, sino que estás ganando dinero. Pero, ¿cuántos de tus productos descargó alguien y también cuántas descargas tienes en esa categoría para tu bono de colaborador? Entonces, por ejemplo, cuántos de estos diferentes productos tienes en la mayoría de estas otras cosas. Y una vez más, si te interesa, simplemente puedes navegar por su sitio web. Y una vez más, aquí está mi producto Austria UI kit. Y por último, quiero compartir paquetes de diseño contigo, que es uno de los sitios web más nuevos de la industria, pero vale la pena perseguirlo porque aquí también puedes vender todos estos kits de interfaz de usuario, como mencionamos, pero también tienen diferentes paquetes que están ejecutando de vez en cuando. Y básicamente bundle es algo así como un paquete y puedes comprar un paquete, por ejemplo, diez diseñadores diferentes tienen diez kits de interfaz de usuario diferentes. Usan todos esos kits de interfaz de usuario, los ponen dentro de un paquete llamado el paquete , reducen el precio muy duro y luego simplemente se comercializan como locos. Y básicamente ese paquete va a traer pocos miles de ventas y luego simplemente dividen ese dinero de ese paquete en particular a lo largo de estos diseñadores, por lo general lo que pasa es que hay dos diferentes modelos. O 50, 50, 50 va a los paquetes de diseño en este caso, y 50 va a todos los demás diseñadores. Y también hay un modelo 50 y el resto, el 50% va a diseñar paquetes, y el resto va para quien tenga el kit de UI más grande obtiene la mayor cantidad de dinero. Quién tiene la alegría más pequeña los niños obtienen la menor cantidad de dinero. Entonces básicamente dependiendo del sitio web, dependiendo del trato, dependiendo del paquete, vas a obtener un cierto porcentaje del dinero. Voy a crear un curso separado en el futuro. Explicando todo esto, explicando cómo preparar etiquetas de presentaciones, cómo preparar descripciones, cómo elegir tu segmentación, cómo describir mejor tu producto, cómo crear estas listas cortas, cómo puedes crear estas imágenes de portada y todos estos elementos. Especialmente voy a hablar de apoyo. Por qué es importante el soporte, cómo puede moverse brindando soporte proporcionando una buena descripción y proporcionando un buen producto en primer lugar, qué hace que un gran producto y mucho más. Si te interesa esa clase para el futuro, solo sígueme en redes sociales o puedes dejarme un mensaje. Puedes seguirme aquí donde quiera que estés viendo esta clase y básicamente solo mantente atento para el futuro. Y también puedes seguir mi canal de YouTube. Voy a dejar el enlace a él también en el PDF, estoy poniendo todo tipo de contenido de Adobe XD ahí fuera. Entonces, si te interesa, asegúrate de seguirme ahí y voy a anunciar esa clase en el futuro. 116. ASIGNACIÓN de la SECCIÓN 14: Tu tarea para esta sección es usar Adobe XD y crear tu propio kit de interfaz de usuario. No tiene que ser nada masivo. Simplemente puede crear dos o tres elementos, como la navegación, puede ser un control deslizante o dos o tres secciones diferentes como un formulario de contacto, por ejemplo, solo algunos elementos que podría reutilizar a lo largo su proceso de diseño de sitios web o su proceso de diseño de aplicaciones. Solo trata de practicar de esa manera porque va a ser mucho más simple cuanto más tarde en el final de la línea cuando realmente te mudes a proyectos reales. O si ya tienes algunos proyectos reales trabajando, va a ser mucho más sencillo reutilizar en estos componentes más adelante en ese proyecto. 117. SECCIÓN 15 Sistemas de diseño: Los sistemas de diseño son una de las herramientas más poderosas que tienen los diseñadores en la actualidad. Son increíblemente importantes, increíblemente poderosos cuando realmente comienzas con ellos porque en realidad no pierdes más tiempo con los elementos que ya creaste. Empiezas a reutilizar algunos de estos elementos, colores, tipografía, estilos, y mucho más. Son especialmente importantes cuando los conectas con el código en vivo. Cuando realmente creas un sistema de diseño en una herramienta de diseño, es genial tenerlo, pero cuando realmente lo emparejas con elementos en vivo en algo como Webflow que vamos a usar en esta clase. Va a ser increíblemente fácil trabajar con él, increíblemente rápido trabajar con él. Y te va a ahorrar mucho tiempo. Y tus clientes son mucho dinero porque no vas a experimentar demasiado una vez que realmente tienes las funciones básicas básicas de un sistema de diseño. Así que comencemos. 118. ¿Qué es un sistema de diseño: El sistema de diseño, como su nombre indica, es un enfoque sistemático para crear diseños de UI y UX. El objetivo principal de cada sistema de diseño es hacer un seguimiento de lo que todos en el equipo han creado. El propósito principal del sistema de diseño es la escalabilidad. Ya sea la escalabilidad inmediata o la escalabilidad que va a venir en el futuro. Pero el trabajo principal del sistema de diseño es mantener esa escala consistente. Lo que eso significa es que cada cambio que hagas va a reflejar a través del resto de tu diseño va a ser coherente y va a permanecer en la apariencia de lo que es determinante en el comienzo de un sistema de diseño. Todo buen sistema de diseño consta de dos tanques, reglas y estándares y bibliotecas de patrones. Las reglas y estándares están ahí para que todos los compañeros de equipo los sigan a la t, porque esa es la única forma en que el sistema de diseño va a escalar de manera uniforme. Va a crecer y va a ser consistente a lo largo de su vida. Porque la vida útil del sistema de diseño es la vida de la empresa. Nunca se hace, nunca se acaba. Entonces, mientras exista la compañía o el producto, el sistema de diseño puede coexistir con ese producto o compañía, mientras que la biblioteca de patrones, otro lado, está ahí, y va a escalar todo el tiempo dependiendo, a menudo necesidades, necesidades de curado y necesidades futuras de cada proyecto en particular y cada compañía en particular. El principal error que hay es que los sistemas de diseño son solo para las grandes empresas que no son. Puede usar un sistema de diseño para empresas más pequeñas, puede usar el sistema de diseño con menos número de componentes, con menos pautas y estándares numéricos. Y esas pautas pueden ser un poco rudas al principio. Pero a medida que va el proyecto, medida que la empresa crece, las reglas y estándares van a endurecerse y el sistema de diseño finalmente va a tomar su forma y su forma, forma pretendida a partir del comienzo. Y sólo va a crecer con la compañía. Los sistemas de diseño pueden ser para diseñadores y también para desarrolladores. Y eso se puede lograr con el uso de algo que se llama token. Vamos a hablar de ellos un poco más tarde en esta clase. Pero básicamente, la colaboración entre diseñadores es desarrolladores, es la clave para todo buen sistema de diseño que hay. Por lo que en cuanto se realiza o propaga el cambio, diseñadores y desarrolladores tienen que estar en la misma página para que su sistema de diseño funcione y para que el cambio se implemente de inmediato. Y es lo más fácil posible. Eso es extremadamente importante para las startups, pero también para las empresas establecidas, porque no quieres romper el diseño y la funcionalidad del producto simplemente cambiando el diseño sistema demasiado con algo que no está alineado con todos en el equipo. Hay algunas cosas que todo buen sistema de diseño por ahí debería tener N. En el siguiente video, vamos a hablar justamente de eso. ¿Cuál es la buena estructura para cada buen sistema de diseño que hay? 119. Estructura de un sistema de diseño: Como mencioné en la lección anterior, estructura de un buen sistema de diseño realmente consiste en dos cosas, reglas y estándares y bibliotecas de patrones. Las reglas y estándares pueden estar ahí en muchas formas diferentes. ejemplo, cada regla tiene que ser una coincidencia con algo que estás haciendo dentro de ese sistema de diseño. Digamos que la regla puede ser sobre grid en absoluto, puede ser sobre tipografía. La regla puede ser sobre el color, sobre el espaciado, sobre el ritmo horizontal o vertical. Puede tratarse de cualquier cosa. Y los roles por supuesto se pueden romper, pero se pueden romper al principio de un sistema de diseño porque más adelante cuando se desarrolla el proyecto, cuando el proyecto ha crecido, es mucho difícil romper una regla de lo que es cuando recién estás comenzando con un sistema de diseño. Los estándares pueden ser algo así como los valores de la compañía. Pueden ser algo así como una lengua, como un estado de ánimo del proyecto y fuera del sitio web del cliente o de la marca del cliente. Y eso debe seguirse a la t dentro de un sistema de diseño porque no se quiere desviarse demasiado, especialmente en el sistema de diseño que realmente son Corporativos. No quieres que cambien demasiado porque multitud corporativa está realmente acostumbrada a ese tipo de tono, ese tipo de diseño, esos tipos de colores, esas topografías, jerarquías y mucho más. La segunda parte de un buen sistema de diseño son las bibliotecas de patrones. Y puedes cambiar estas bibliotecas de patrones medida que vayas creciendo. El consejo principal aquí es que tan pronto como comiences a construir bibliotecas de patrones de sistemas de diseño, no necesitas crear elementos que no son necesarios en este momento. ejemplo, si tu proyecto no tiene un tablero, no crearás elementos como gráficos y tablas porque simplemente no son relevantes en este momento. No vas a llenar tu sistema de diseño con todos estos componentes inútiles porque solo recuerda que tú como el diseñador, estás ahí. Su equipo de diseño está ahí para crear esos diseños, pero esos diseños deben ser accesibles y fáciles de entender para los desarrolladores que tienen que desarrollar todos estos elementos para ese proyecto en particular. Así que simplemente cree los elementos que se necesitan en ese momento y deje que el sistema de diseño escale a lo largo del tiempo según lo requiera el proyecto. Ahora, ¿cómo se pueden dividir todos estos componentes en la biblioteca de componentes? Básicamente, hay tres categorías principales. Hay átomos, moléculas y organismos. Y puedes por supuesto, agregar plantillas. Por supuesto, puede expandirse a cuántas otras variaciones desea, por ejemplo, diagramas de flujo o wireframes, wireframes de alta fidelidad. Pero básicamente los átomos, las moléculas y los organismos están ahí para cada buen sistema de diseño y están escalando cuál es el proyecto. Y siempre se puede agregar más de estos elementos, como dije más adelante abajo en el proyecto, alinear. Ahora como su nombre lo indica, los átomos son los más pequeños del grupo, y pueden ser algo que es bastante fácil, por ejemplo, color o el tamaño del texto, o el ancho de un botón o algo así. Entonces se crean moléculas a partir de átomos. Cuando se combinan dos átomos, básicamente vas a crear una molécula, por ejemplo, un menú desplegable o algo así. Y entonces los organismos son, digamos, un foro que se crea a partir de varios elementos diferentes, por ejemplo, campos de entrada y botones. Y entonces vas a obtener una forma que es organismo creado para varios, a partir de diversos átomos y moléculas diferentes combinados en un solo organismo. A esto se le llama la estructura atómica y realmente son nuestros estándares de la industria desde hace décadas. Pero puedes crear tu sistema de diseño como quieras. Pero si estás usando este enfoque atómico, va a ser mucho más sencillo para ti crear tus elementos y escalarlos en el futuro. El punto principal de cada sistema de diseño es la consistencia. Entonces hay que pensar en la consistencia todo el tiempo. Dondequiera que estés creando un simple botón, tienes que pensar en cómo ese botón va a escalar a través de varios tamaños de pantalla diferentes va a cambiar, el ancho va a cambiar la altura. ¿Va a cambiar el color va a ser con esquinas redondeadas, sin esquinas redondeadas para tener que pensar en todos estos elementos ya que estás construyendo tu sistema de diseño, tienes que pensar sobre reglas y estándares, que mencionamos al inicio de esta lección. Y también hay que pensar otros elementos en su biblioteca de patrones. Cómo van a coincidir entre sí, o van a quedar bien en la página. Entonces, sea lo que sea que crees un nuevo elemento dentro de la biblioteca de patrones, tienes que ponerlo en una página, tienes que ponerlo a prueba de inmediato, ver si funciona con el resto de tu biblioteca de patrones. Y entonces si lo hace, puedes quedártelo y si no, siempre puedes desecharlo. Ese es el objetivo de nuestro sistema de diseño. Siempre va a evolucionar, siempre va a cambiar y nunca va a quedar igual como lo era ayer. En la siguiente lección, voy a mostrar algunos excelentes ejemplos de sistemas de diseño de los líderes de la industria y los estándares de la industria. Te voy a mostrar lo que debes tener en cuenta. Y luego más adelante en esta clase, voy a mostrar cómo crear tu propio sistema de diseño en Adobe XD y lo que puedes lograr con creación de sistemas de diseño en Adobe XD. Entonces te veré ahí. 120. Ejemplos de sistemas de diseño: La mejor manera de crear su propio sistema de diseño es aprender de los estándares de la industria y de los gigantes de la industria. Y para ello, solo voy a mostrarte algunos ejemplos y puedes encontrar estos ejemplos en el PDF adjunto. Simplemente puedes hacer click en esos enlaces para acceder a todos estos ejemplos que te voy a mostrar. Simplemente aprende de ellos lo que están creando. Pero lo clave antes de comenzar, no se sienta obligado a tomar cada componente que estas empresas están creando. Porque como mencioné anteriormente en las lecciones anteriores, estos componentes están ahí por alguna razón. Entonces, a menos que estés usando alguno de estos componentes, no los crees. Cuando empiezas a crear un sistema de diseño, es muy importante empezar poco a poco. Entonces a medida que tu proyecto evolucione, entonces vas a agregar todos estos diferentes componentes. Porque ¿cuál es el punto de crear componentes? Si no son necesarios en este momento, solo te van a ralentizar y no vas a optimizar tu tiempo en ese proyecto en particular si estás creando componentes que no son necesarios para tu proyecto. Entonces déjame mostrarte todos estos ejemplos. El primer ejemplo que tenemos es el diseño de materiales de Google. Por supuesto, este diseño de material se utiliza en su sistema operativo Android. Apple tiene su propio, se llama pautas de interfaz humana, y también lo puedes encontrar. Vincularé todos estos sistemas de diseño que están mencionando con pocos sistemas de diseño más que no van a mencionar en este video dentro del PDF. Una vez más, abre el PDF, haz clic en estos enlaces para acceder y navegar por ti mismo. Entonces lo que tenemos aquí mismo es presentarte material al momento de hacer de este video. Esto es completamente nuevo y el estándar de la industria en el mundo Android. Entonces, básicamente, seguir usando el diseño de materiales. Puedes ver pautas, componentes, iconos, componentes para la web, pautas de accesibilidad y tutoriales para desarrolladores. Puedes aprender más de su blog. Y repasemos rápidamente estos elementos. Y no voy a entrar en demasiados detalles porque la mayoría de estos sistemas de diseño son básicamente los mismos. Están usando los mismos estándares, están usando las mismas pautas, pero simplemente se ven diferentes porque por ejemplo con este sistema de diseño de materiales, es para Android, entonces es para dispositivos móviles. Mientras que otros sistemas de diseño lo son, hay cuatro, por ejemplo sitios web o proyectos web, o para paneles o elementos como esos. Entonces, por supuesto, todos estos elementos van a ser diferentes entre los sistemas de diseño móvil y de escritorio. Pero la clave es la misma, los estándares son los mismos. Entonces, digamos que tienes estas pautas, principios, estilos y mejores prácticas. Lo que eso significa es para cada elemento, cuándo es el mejor momento para usar ese elemento? En cuyo caso escenario e.g No vas a usar ciertos, digamos selectores de fecha. En ciertos ejemplos, vas a usar diferentes tipos de selectores de fecha en esos ejemplos. Entonces es por eso que esos principios y mejores prácticas están ahí. Si alguna vez miraste un proyecto de marca o la presentación de marca de una marca, puedes verlos los fines de semana, por ejemplo, puedes buscar videos de YouTube para esos. Básicamente, las mejores prácticas están ahí. Y esa es la razón clave, por ejemplo, por qué usas el logotipo en esta orientación en lugar de desorientación. Por qué usas imágenes blancas aquí y no aquí. Por eso estas mejores prácticas están ahí. Para lograr estas mejores prácticas y estos principios y estilos, hay que empezar poco a poco. Hay que empezar desde el principio. Tienes que crear estos diversos botones y experimentar. ¿Ves qué funciona, qué no, qué funciona? Asegúrate de actualizar desde ahí, asegúrate de agregar nuevos elementos, asegúrate de agregar nuevos estilos, nuevos componentes a partir de esos elementos y ver qué funciona y qué se pega, qué no, tíralo lejos y simplemente seguir adelante. Eso me lleva amablemente a los componentes. Así que guía de diseño y documentación para desarrolladores para bloques de construcción de interfaz de usuario interactivos Y puedes verlas aquí mismo. Estos son botones, imágenes, foros, campos de entrada, iconos, y mucho más. Estos componentes están ahí para que sea fácil para ti. Y te voy a mostrar eso en una lección posterior en esta clase una vez que realmente lleguemos a Adobe XD. Por lo tanto, los componentes están ahí para acelerar mucho las cosas porque los componentes se pueden usar en todo su sistema de diseño, a lo largo de su proyecto. Y pueden ser utilizados por varios diseñadores diferentes en su equipo porque, por supuesto, función de edición de Adobe XD, varios miembros del equipo diferentes pueden estar en varios lados diferentes de la planetas. Y todos pueden estar usando el mismo sistema de diseño y usar los mismos componentes de ese sistema de diseño en particular. Por supuesto, siempre se pueden cambiar componentes. Siempre puedes actualizarlos. Se pueden agregar diferentes componentes, estilos y mucho más. Esa es la clave aquí para crear componentes que van a ser reutilizables en todo su sistema de diseño. Eso lo vamos a explicar un poco más tarde, pero por ahora, sigamos adelante. Los iconos son un recurso clave para cada buen sistema de diseño que existe. Por supuesto, debido a que se trata de Google, tienen sus propios íconos de material. Cuando empieces con tu sistema de diseño, probablemente vas a usar algunos otros iconos en tu sistema de diseño. Pero a medida que ese sistema de diseño evoluciona, medida que encuentres voz para una marca, medida que encuentres la dirección y pautas para la marca, vas a evolucionar esos íconos también. Entonces, si no eres un experto en creación de iconos, tal vez tu cliente pueda. Contrata a alguien que sea, y luego podrás usar esos iconos en ese sistema de diseño. Entonces tenemos componentes para la web. Así implementa y personaliza aplicaciones web de material con nuestro código y documentación. Por supuesto, esto es escalar desde dispositivos móviles hasta la web. Por último, tenemos pautas de accesibilidad que son sumamente importantes. Aprenda a ayudar a los usuarios de diversas habilidades a navegar, comprender y usar su interfaz de usuario, porque no todos tienen la misma visión. Algunas personas tienen discapacidad visual, por ejemplo, algunas personas tienen dificultad para leer. Entonces tienes que pensar en todas esas personas porque hay muchos de tus usuarios. Lamentablemente vamos a tener algunos de estos temas que tienen que pensar ellos todo el tiempo cuando estás creando tu sistema de diseño. Por último, tenemos tutoriales para desarrolladores. Así se implementó material con Java, Kotlin, Objective-C, Swift y red de agua. Entonces, dependiendo del sistema de diseño, dependiendo de los desarrolladores, vas a usar esta o aquella tecnología. Entonces básicamente, aquí no hay una respuesta correcta o incorrecta, tienes que hablar con tus desarrolladores. Tienes que hablar con tu cliente, una vez más, dependiendo de lo que vaya a usar tu cliente. En este caso, para material, es mayoritario para dispositivos móviles, para Android. Entonces, por supuesto, van a usar tecnologías diferentes a las que si estás, por ejemplo , usando, no sé, PHP o algo así para WordPress o lo que sea. Entonces esas tecnologías van a ser diferentes. Y dependiendo de qué tecnología vayan a usar tus desarrolladores, vas a formar tu sistema de diseño para esos fines de desarrollo. Entonces básicamente, puedes saltar aquí mismo, puedes dar click en el diseño. Se puede ver. Así fundación, visión general, maquetación del entorno , navegación, color, tipografía, sonido, iconografía, forma, movimiento. Entonces como dije, y voy a seguir diciendo esto a lo largo de esta clase. No se deje intimidar por todos estos diferentes elementos porque una vez más, se trata de Google. Tienen literalmente miles de millones de usuarios a lo largo de sus dispositivos y en toda su compañía. Entonces, por supuesto, van a usar todos estos diferentes elementos de los que probablemente nunca se oiga hablar, y mucho menos usar. Así que no se deje intimidar demasiado con eso. Entonces tenemos componentes. Y estos son botones, tarjeta, casillas de verificación, chips, tablas de datos y así sucesivamente. Después hemos desarrollado para Android, para web flutter, iOS. Tenemos recursos y puedes leer todo sobre estos recursos. Así que bombo, tipo de escala, un creador de herramientas de personalización de formas y así sucesivamente. Tienen el blog. Así que asegúrate de echarle un vistazo. Una vez más, dejaré los enlaces a todo lo que mencioné en este video y más en el archivo PDF. Haga clic en esos enlaces para acceder a él. Entonces tenemos el sistema de diseño Atlassian. Así que un lenguaje de diseño integral para crear experiencias simples, intuitivas y hermosas. Entonces, una vez más, vas a notar que tenemos componentes, tenemos patrones. Entonces marca, tienen misión, tienen personalidad, y han prometido, que es lo que mencioné en el video anterior. No vas a hablar de las mismas dos personas que están usando esto en sus calzoncillos en su dispositivo móvil. Y dos directores generales de grandes empresas que por ejemplo están en alguna oficina cara. Entonces el tono simplemente no es lo mismo. Entonces tienes que hablar con tu usuario en el idioma que van a entender. Entonces tenemos fundaciones. Entonces color, iconografía, tipografía. Una vez más, dependiendo de quién sea tu usuario, vas a usar diferentes colores, diferentes íconos y diferente tipo, contenido, idioma y gramática, vocabulario, estilo de escritura. Entonces, una vez más, estamos hablando con el usuario. ¿Quién es tu usuario? Tienes que hablar con tu usuario en ese idioma que van a entender. Para que puedas explorar esto. Y aquí tenemos contenido de fundaciones de marca. Vamos a hacer clic en el contenido para que puedas ver lenguaje inclusivo, gramática, vocabulario. Puedes dar click aquí mismo, componentes. Entonces tenemos nuestro término, grupo externo, insignia y de inmediato, vas a notar que esto se ve bastante diferente a esto porque hay dos cosas completamente diferentes. Entonces, si hago clic en el banner, por ejemplo aquí mismo, puedes ver cómo se ve este banner. Y enseguida podemos ver el código, podemos ver el error, podemos ver el anuncio. ¿Cómo se ve? ¿Cómo escala? ¿Cómo se encoge o crece? Y se puede ver el uso. Entonces, ¿cómo funciona? Entonces anatomía, tenemos el ícono, tenemos el mensaje, y tenemos las acciones que son opcionales en este caso. Así que siéntete libre de navegar por todas estas categorías para conocer más sobre cómo se usan y cómo se integran. Justo aquí. A continuación tenemos Shopify, sistema de diseño Polaris, sal. Vamos primero con las fundaciones. Valores experimentados, que es lo que mencioné. Entonces su enfoque, qué considerarlo. Son empoderadores, elaborados, deficientes, confiables y familiares. Entonces esos son todos los valores que buscan con su marca, por lo tanto su sistema de diseño. Entonces tenemos el contenido. Entonces voz y tono, Shopify es voz reflejo de quiénes son. Entonces, quiénes son simplemente ponen ahí la compañía construida por personas reales que entienden este negocio y se preocupan por ayudar a otros a tener éxito. Entonces esos son del, valores. Tenemos el diseño. Entonces, una vez más, los colores de diseño, los principios, la comunicación es clave. Los colores tienen significado. Carlos, sigue las pautas de accesibilidad para que puedas ver los roles de color. Entonces superficie, básicamente elementos que están detrás de otros elementos en superficie. Entonces esos son los elementos como el texto, por ejemplo, primario , para los elementos, digamos botón secundario para los elementos, que son, digamos marcas de verificación o iconos o algo así , interactivos . A lo mejor hay una animación sucediendo. Entonces todos estos colores están ahí por una razón. Una vez más, estoy volviendo a cada vez que el punto que hice anteriormente no crea elementos que no están necesariamente en su sistema de diseño. Para que puedas ver las variantes de color y puedes ver estos colores implementados aquí mismo. Una vez más, te animo a que revises todos estos elementos y aprendas más sobre ellos. Para que puedas ver ilustraciones. Están usando estas ilustraciones. Pero por qué, por qué están usando esta ilustración en particular en este estilo particular, usando estos colores en particular. Para que puedas conocer más sobre todo eso aquí mismo en esta página. A continuación tenemos el sistema de diseño de carbono, que es creado por IBM, que es una corporación enorme. Y me encanta este sistema de diseño porque puedes dar click aquí mismo y puedes dar click en los kits de diseño y puedes obtener la versión sketch, pero también puedes obtener la versión Adobe XD, que está en algún lugar por aquí. Y se puede abrir en XD, aquí está. Pero es construido por la comunidad del carbono. Entonces no es exactamente acertado porque no está creado para Adobe XD en lugar de para sketch al principio. Después pasaron a Figma, pero también soportan Adobe XD y Azure. Para que puedas conseguir a los niños ahí mismo, abrirlo y también puedes hacer lo mismo para Shopify como sistema de diseño polaris. Y estoy bastante seguro de que también puedes conseguir Atlassian. Para que puedas abrirla y conocer más sobre cómo se ve. Pero volviendo al carbono, básicamente, sistema de diseño de código abierto para productos y experiencias digitales. El lenguaje de diseño es su sistema de base consistente en código de trabajo, herramientas y recursos de diseño, pautas de interfaz humana y una vibrante comunidad de contribuyentes. Ahí vamos. Muchos diseñadores diferentes están contribuyendo a este sistema de diseño. Por eso puedes descargar esos archivos y explorarlos de forma gratuita. Así que empieza a diseñar. Se pueden ver todos estos diferentes elementos, lo que están usando, pero me preocupan más las pautas. Esto. Entonces están empezando por la grilla. Grid está en el corazón de todos los buenos sistemas de diseño que existen. Entonces, si acabo de reproducir este video, así, se pueden ver dos x grid y ¿cómo se ve? Básicamente consiste en una caja y luego la caja puede expandirse a otras cajas, que pueden ser más grandes o más pequeñas. Pero básicamente, es en los incrementos de dos. Todo encaja muy bien a esas cajas. Básicamente, puedes ver el espaciado aquí mismo. Dos cajas separan el texto, las imágenes, el diseño y cosas así. Así que asegúrate de explorarlo todo y podrás ver cómo funciona el ritmo vertical aquí mismo, y cómo funciona la escala aquí mismo en este video en particular. Por lo que realmente te animo a explorarlo más. Se pueden ver iconos, pictogramas, movimiento, lo cual es realmente importante. Entonces, ¿cómo usaron la animación? Entonces, si hago clic aquí para reproducir este video, puedes ver cómo están usando el movimiento dentro de su sistema de diseño, cómo funciona la animación, cómo funciona la transición, cómo funcionan las cosas, ej., la facilidad en la animación está fuera de la animación y mucho más. Así que explóralo, descárgalo y asegúrate de comprobarlo por ti mismo. Por último, tenemos Salesforce. Para que puedas empezar. Puedes ver qué plataformas son zanahorias o lightning visual para nosotros, heroku, pautas de diseño de Android e iOS. Entonces visión general, constructor, gráfico, entrada de datos, visualización de datos y mucho más accesibilidad, que es de lo que hablamos, planos de componentes o visión general, digamos acordeón, quiero echa un vistazo al en consecuencia, ¿cómo se ve? Entonces esto es una gran cosa. Puedo dar click aquí y entender cuál era la intención detrás de este acordeón. Entonces en este caso en particular, se puede ver que este acordeón está cerrado, pero cuando haga clic, toda esta sección se va a expandir hacia abajo. Entonces, ¿cuánto se va a expandir hacia abajo? Por ejemplo, si está usando eso para la cuadrícula de píxeles, que mencionó en el sistema de diseño de carbono de IBM. Entonces se va a expandir por los incrementos de dos. Y puede usar esas reglas y estándares y pautas en todo su sistema de diseño, sea lo que sea que esté creando. Entonces, una vez más, puedes hacer clic en la alerta, por ejemplo, puedes hacer clic en el avatar de insignias. Vamos a hacer clic en el carrito y ver cómo se ven sus tarjetas. Entonces este es el auto, este es el nuevo, los autos más pequeños, los autos más cortos, por qué sus tarjetas. Para que puedas ver cómo se implementan todos estos elementos, cómo se establecen en la página. Y si hago clic aquí mismo, así tenemos la acción 12.3, tenemos el tooltip, todos estos diferentes elementos. Por último, tenemos esto que es utilidades, así que margen de texto, dimensionamiento, función, lista vertical. Y por último, tenemos fichas de diseño. Así que los tokens de diseño son algo increíble de los sistemas de diseño y vamos a hablar ellos en una de las lecciones posteriores porque realmente están en el corazón de todo buen sistema de diseño. Y realmente son el puente entre diseñadores y desarrolladores para conocer el sistema de diseño y usarlo su mayor medida y seguir usándolo en el futuro. Y es por eso que estamos usando tokens de diseño en nuestros sistemas de diseño. Y te voy a mostrar eso en Adobe XD también en la lección posterior. Pero por ahora, echa un vistazo a estos enlaces. Como mencioné, van a estar en un PDF. Asegúrate de explorar lo más posible y de aprender lo más posible. Porque puedes ver que el sistema de diseño no es algo que vayas a aprender en uno o dos días. Realmente toma meses y años para que se desarrolle un buen sistema de diseño. Pero no dejes que eso te deteriore al crear tu propio sistema de diseño porque los beneficios son enormes a medida que diseñas, a medida que estás construyendo y desarrollando, vas a expandir tu propio diseño sistema. En la siguiente lección, vamos a hablar de Adobe XD. ¿Qué puedes crear en Adobe XD en cuanto a sistemas de diseño y cómo puedes escalar tu sistema de diseño en Adobe XD? Entonces te veré ahí. 121. Creación de un sistema de diseño en Adobe Xd: Adobe XD es una herramienta increíble porque en una sola herramienta puedes diseñar prototipos y compartirlos con tus clientes, desarrolladores y partes interesadas. Esto es genial para crear sistemas de diseño, y de esto es de lo que vamos a hablar en esta lección de la clase, cómo crear tus propios sistemas de diseño en Adobe XD. Y más adelante vamos a hablar escalar esos sistemas de diseño en Adobe XD. Así que comencemos. Aquí estoy en Adobe XD y abro hasta 12 80 por 800 tablero de arte. Este es solo el tablero de arte básico que encuentras en la pantalla de inicio aquí mismo en un D Adobe XD. Entonces, ¿cómo crear tu sistema de diseño? Bueno, hay que empezar poco a poco, así que comencemos con la grilla. Entonces, si me escondo para que lo veas, en lugar de disparar este layout, voy a cambiarlo al cuadrado n. Esto es lo que hablamos anteriormente para el sistema de diseño de IBM. Están usando esta iteración de dos. Entonces va a ser realmente cuadrados pequeños aquí mismo, pero voy a usarlo número de ocho, por ejemplo, algo así. Y luego voy a encender mi calculadora y la voy a traer aquí mismo. Entonces tenemos el 12 AT, para el ancho. Entonces 1280/8, es una sexta parte. Entonces lo que eso significa es cuando un zoom todo el camino aquí mismo, se puede ver que estos cuadrados son ocho píxeles por ocho píxeles porque ese es el tamaño del cuadrado. Si los bajo a dos, se puede ver que bajaron de tamaño, pero voy a volver a aumentarlos a ocho porque ocho píxeles son una especie de estándar de la industria o cuadrícula de ocho puntos si quieres. Y eso es lo que vamos a utilizar para nuestro sistema de diseño imaginario aquí mismo en Adobe XD. Entonces, para comenzar, lo que podemos crear es algo pequeño, como un botón, por ejemplo, así que comencemos primero con la topografía. Entonces puedo decir algo como hacer clic aquí tal vez. Y usemos algo como Open Sans tal vez, porque esa es una fuente gratuita de Google y puedes encontrar en línea. Y voy a posicionarlo más o menos por aquí. Vamos con 24, porque 24 es divisible por ocho, claro. Y luego voy a crear mis botones. Así que voy a crear algo de espaciado alrededor de él. Y voy a hacer clic derecho en enviarlo a la espalda solo para que podamos ver nuestros textos. Y ahora puedo empezar a jugar y posicionarme a mi grilla. Entonces si sostengo mi tecla Alt, se puede ver que estoy 16 de este lado, 16 de este lado por 7.8 en este lado, ocho es bueno, pero siete no es tanto. Entonces, ¿qué puedes hacer aquí mismo no es mucho realmente porque Adobe XD, estas herramientas de texto no son realmente todas las que se desarrollaron como Adobe Illustrator, por ejemplo o Adobe Photoshop. Pero va a funcionar bastante bien en este caso porque solo estamos creando nuestro proyecto de inicio aquí mismo. Entonces, lo primero que hay que considerar, ¿es tu tipo demasiado grande? Si es así, entonces puedes aumentar el espaciado a 16 en cada lado, por ejemplo, pero aún puedes ver 15.15 aquí mismo. Si empezamos así, van a seguir siendo 15 porque la forma en que Adobe XD trata el texto. Entonces, una vez más, qué puedes hacer si estás trabajando con marca, que requiere ese lenguaje, lo que hablamos anteriormente, entonces vas a ajustar este radio de esquina a algo así como ocho, e.g y ahora tenemos las esquinas redondeadas. Entonces 64 es el tamaño de nuestro botón, divisible por ocho, claro, 144 divisible por ocho. Entonces ya podemos proceder. El siguiente es la convención de nomenclatura. Entonces este botón es bastante grande. Entonces e.g lo vas a nombrar btn. Btn dash BG, botón, fondo, tablero grande. Y tienes que hacer esto a lo largo tu sistema de diseño para todos tus elementos porque de esa manera vas a conocer y los diseñadores de tu equipo lo van a saber, los desarrolladores lo van a saber, es esto para nuestro sitio web, tableta, reloj móvil o cualquier tamaño que sea. Entonces lo siguiente es agruparlos. Entonces lo que hay que considerar es de dónde viene este texto . En este caso, va desde la izquierda. Entonces, si flojo aquí mismo, se puede ver que está alineado a la izquierda y está fuera de él. Entonces va a escalar automáticamente el botón sin expandir hacia el lado derecho. O puedes arreglarlo si quieres, puedes hacer clic en sitios fijos y no va a expandir el botón. Entonces dependiendo del propósito de los botones, así digamos BTN, grandes y variables. Entonces podemos usar VAR por ejemplo algo así, o simplemente llamarlo btn large. Y entonces si queremos que se arregle, entonces podemos llamarlo btn grande fijo. Entonces, una vez más, mantén un registro de ese trasfondo BTN. Grande, btn grande. Si estás usando fijo, por ejemplo, va a ser para el fondo del botón, btn, BG, large fixed, o BT y BG. Un fijo más grande como quieras llamarlo. Entonces, la convención de nombres es realmente crucial porque tan pronto como empieces a agregar más y más de estos elementos va a ser mucho más complicado para que hagas un seguimiento de lo que has creado a continuación porque queremos que este botón se expanda, voy a activar el padding. Entonces, la próxima vez que alguien diga algo así como a estas alturas, se puede ver que el botón se va a expandir. Pero una vez más, por ese elemento gradual que creamos, si hago clic aquí mismo, puedes ver 16161516, se va a expandir, pero siempre puedes anularlo. Entonces si hago clic aquí mismo y si extiendo esto aún más aquí mismo, así que si hago clic aquí mismo y lo extiendo a 20, tal vez va a chasquear para migrar mucho mejor. Por lo que siempre puedes hacer estos cambios para asegurarte de que estamos 136.64. Entonces todo es divisible por ocho. En nuestro caso, si estás pensando cuadrículas y cómo crear cuadrículas, puedes por supuesto, usar esta cuadrícula de ocho píxeles para tu cuadrícula sólida, digamos 12 columnas para este gran tamaño, ocho columnas para el tamaño de tableta, cuatro columnas para el tamaño del móvil. Y dependiendo de los tamaños que elijas, vas a elegir el número de columnas y qué tan amplias son estas columnas. Por supuesto, apenas estamos empezando. Se puede ver cómo se ve esto. Y antes de seguir adelante, voy a dar click aquí mismo, saltando aquí mismo a mis bibliotecas y agregaré color, porque este es el color de mi texto en este caso. Y voy a añadir estilo de personaje. Entonces, ¿cómo puedes nombrar esto? Y esto es muy importante porque ahora estamos entrando al territorio de los tokens de diseño. Y voy a explicar un poco más los tokens de diseño en la siguiente lección de esta clase. Pero básicamente voy a llamar a esto h cuatro por ejemplo porque ese es el tamaño de este texto. Y aquí por el color, voy a cambiarle el nombre a algo así como, no sé, gris regular o lo que sea, guión regular y gris, algo así. Entonces todo el mundo de mi equipo sabe que, bien, esto es H por su abierto desde 24, y cuando se ciernen, se pueden ver opuestos, espaciado de 24 caracteres, el tamaño 24 puntos. Entonces vas a poder decírselo enseguida. siguiente es el botón con el borde o sin borde. Cómo vas a tratar esto, cómo se van a apilar todos estos elementos. ¿Tiene, tiene el guión o no? Entonces hay que pensar en todas estas cosas, pero asegúrate de crear múltiples copias de este botón. Vea lo que funciona, vea lo que no termina cuando empiece a agregar elementos a este botón, asegúrese de comenzar con los componentes. Así Control o Comando K en tu teclado para crear un componente. Este es el estado predeterminado. Entonces, el primer componente a crear es quizás el estado estacionario. Entonces voy a llamarlo hover. Y la próxima vez que alguien se cierne sobre este botón, tal vez va a cambiar el color. Entonces en vez de blanco, tal vez puedas cambiarlo a algo ligero como esto. Da click aquí, pulsa Control, Enter para previsualizar lo que estamos creando. Y ahora cuando pongo el cursor sobre este botón, se puede ver que tiene estado estacionario. Entonces así de fácil es crear tu inicio de un sistema de diseño. Y ahora voy a mostrarles lo que he creado en los últimos dos años. Y me tomó seis meses crear en Adobe XD. Se llama Inception design system. Y aquí está. Este es el archivo maestro del sistema de diseño inicial. Esto me llevó seis meses de trabajo continuo para crear. Y puedes conseguir este sistema de diseño si quieres. Voy a dejar el enlace en un PDF. Esta es la página para el diseño de inicio system.co. Y una vez más, dejaré el enlace en el PDF. Puedes dar click aquí mismo e ir a mi canal de YouTube para ver el curso gratuito. En ella. Voy a través de cada uno de los elementos. Creo que es algo así como una hora duración o algo así. Está en mi canal de YouTube y puedes verlo ahí para saber más cómo funciona y qué incluye. Se puede ver, se puede diseñar más rápido. Puedes leer algunas reseñas. Está diseñado para escalar usando una cuadrícula de ocho píxeles. Tiene estructura molecular como mencionamos. Es local y nubes quienes pueden trabajar tanto a nivel local como en la nube con tus compañeros de equipo. Y tiene diagramas de flujo, plantillas e íconos de Lottie, que son íconos animados. Está hecho con las últimas características como pilas, componentes, estados y ácidos de documentos. Así que déjame volver a Adobe XD y para mostrarte. Entonces, lo primero es lo primero, ¿qué incluye este sistema de diseño? Aquí tenemos alguna información básica y pautas sobre el sistema de diseño en sí, cómo usarlo y dónde usarlo. Entonces aquí tenemos las rejillas. Tenemos tres tamaños de pantalla diferentes, básicamente. Contamos con grandes, medianos y pequeños, o de escritorio, tableta y móvil, independientemente del tamaño, tenemos varios números de columna de color diferente. Entonces para los grandes, tenemos 12 columnas. Para el mediano tenemos ocho columnas y para las pequeñas tenemos cuatro columnas. Aquí tenemos las guías y puedes copiar fácilmente estas guías y pegarlas en tus tablas de arte. Entonces tenemos topografía y se puede ver que dividí la topografía dos rubros y cuerpo. Los encabezados vienen en estos diferentes tamaños y cuerpo en estos diferentes tamaños. Entonces tenemos los colores, colores principales y colores de soporte. Vas a notar que aquí no tengo sombras y eso es con un propósito porque cuando obtienes este sistema de diseño, puedes agregar tus propias sombras. Y van a escalar con el propio sistema de diseño. Entonces tenemos el logo que puedes reemplazar con el logo de tus clientes. Tenemos estos diferentes logotipos que puedes usar en tus proyectos. Tenemos íconos y de inmediato, vas a notar estas cuadrículas de ocho píxeles, así de tamaño cuadrado. Y si lo escondo aquí mismo, solo para que puedas ver el sistema de diseño en sí un poco mejor. Entonces tenemos iconos aquí mismo, y estos son íconos estáticos. Y por supuesto, el sistema de diseño también viene con iconos animados, que funcionan de forma nativa dentro de Adobe XD, lo cual es fantástico para la creación de prototipos. Entonces si hago zoom un poco, lo que tenemos aquí mismo son átomos y moléculas, y los puedes encontrar aquí mismo. Si abres esto, puedes ver que tenemos cuadrículas, íconos, avatares, desplegables, los modelos de imágenes, paginación, línea de aplicación, búsqueda de acordeón y mucho más. Entonces todos estos elementos aquí son átomos y moléculas. Y si me acerco un poco más cerca, ya pueden ver. Entonces tenemos botones, tenemos entradas de texto, selectores, área de texto, casillas de verificación, selectores de fecha de radio, selectores , switchers de contenido, tabuladores, indicadores de progreso, entradas numéricas, acordeones, imágenes que son sumamente importantes. Tenemos Blobs, desplegables, tenemos varios dispositivos diferentes, notificaciones, paginación, Zapatero es modelo, y mucho más que en el lado izquierdo, tenemos diagramas de flujo, que se encuentran justo aquí. Entonces, si me acerco, tenemos diagramas de flujo de escritorio, tenemos diagramas de flujo móviles, entonces tenemos elementos de flujo de tareas. Obviamente para los flujos de tareas, tenemos elementos de diagrama de flujo que se utilizan para conectar estos diferentes diagramas de flujo. Y entonces lo que tenemos aquí mismo, tenemos estos tamaños de papel. Entonces aquí tenemos retrato tamaño A4, apaisado, retrato carta estadounidense y apaisado. Y cada uno de estos, si cambio al panel Capas aquí mismo y hago clic dentro, tiene varios elementos diferentes que se utilizan para ayudarte a crear más rápido usando este sistema de diseño. Entonces si lo selecciono, puedes ver lo que tenemos aquí mismo es la cuadrícula de puntos. Entonces, si enciendo esta cuadrícula de puntos, puedes ver cómo se ve. Entonces incluso tengo un vapor aquí mismo, que voy a mostrarles ahora mismo, que se utilizan para una de mis transmisiones en vivo son recientemente y lo pueden encontrar en mi página de YouTube. Entonces, si acerco esto, este artículo fue realmente creado dentro de este sistema de diseño. Y en realidad se imprimió y luego se dibujó usando la pluma normal. Para que puedas ver lo versátil y útil que es esto cuando creas elementos como este en tu sistema de diseño. Entonces volviendo a ello, lo que también tenemos nuestros teléfonos. Entonces para demostró que puedes usar estos teléfonos. Obviamente imprímalos como te mostré con este trabajo en particular. Y vas a notar que van a estar posicionados aquí mismo. Y obviamente, si el papel es apaisado así, se van a posicionar de manera diferente y se usan para el wireframing de papel si quieres. Entonces tenemos navegador para responsive, tenemos navegador de escritorio y navegador móvil, y va igual para todos estos tamaños. Entonces tenemos información de diagrama de flujo. Tenemos el nombre del proyecto del cliente, fecha límite, número de páginas del sitio web, número de pantallas de aplicaciones, y por supuesto puede combinar una cuadrícula de puntos y el diagrama de flujo para que pueda cambiar de lugar, puedes colocarlos, imprimirlos y crear básicamente componentes y diagramas de flujo en ellos. Y por último, lo que tenemos, si me cambio aquí mismo, tenemos las plantillas. Aquí tenemos plantillas en tres tamaños diferentes, como acabo de mencionar anteriormente. Entonces tenemos grandes, medianos y pequeños, y esos están justo aquí. Entonces estas son plantillas grandes en 15 categorías diferentes. Estas son plantillas pequeñas en esas mismas categorías, pero solo ajustadas para el tamaño de la tableta. Y estas son plantillas, pequeñas o medianas y estas son pequeñas para tamaños de teléfono. Entonces, ¿cómo funciona todo esto? Básicamente, si abro esto, tenemos colores, entonces tenemos colores principales y colores de apoyo, como dije. Y estos son componentes principales. Suma, si cambio el color, este azul océano aquí mismo, por ejemplo I. Simplemente puede ir a editar aquí mismo y cambiar el color. Se va a actualizar ese color en tiempo real en todas partes donde se encuentre ese color en este sistema de diseño. Así que yendo de aquí y la muestra todo el camino por aquí, por aquí y por aquí, va a actualizarse en tiempo real y cambiar y actualizar ese color. Si decides obtener este sistema de diseño y comienzas a trabajar en un proyecto para tu cliente. Simplemente puede cambiar estos colores a los colores de sus clientes que va a cambiar a lo largo de este sistema de diseño. La misma historia va para los estilos de los personajes. Entonces para los encabezamientos, por ejemplo si decido cambiar esto, es Próxima Nova en este momento. Pero por ejemplo, si decides cambiarlo a ciencia abierta, como dije, entonces puedes actualizarlo en tiempo real. Va a cambiar a lo largo de tu diseño. A continuación, tenemos lo que dije, átomos y moléculas, diagramas de flujo y plantillas, y ¿cómo puedes usarlos? Es realmente bastante simple. Así que permítanme usar esta gran caída hasta aquí. Y te voy a mostrar. Entonces si hago clic aquí mismo, y digamos que quiero ocultar estas columnas solo para que veas lo que estoy haciendo. Y digamos que quiero arrastrar y soltar algunos elementos dentro así que es bueno para átomos y moléculas. Y vamos a cambiar este diseño en realidad. Pero vamos con la plaza de aquí mismo, solo para que veas lo que estoy haciendo en realidad. Así que vamos con algo así como desplegable, desplegable grande. Vamos a arrastrarlo y soltarlo dentro. puede ver como se ve para que pueda posicionarlo donde quiera. Y entonces vamos a traer de vuelta nuestras columnas. Haga clic en nuestro menú desplegable , colóquelo aquí mismo y podrá ver que funciona de inmediato. Y debido a que este es un componente con múltiples estados, vamos a ver el estado de enfoque, por ejemplo, vamos a echar un vistazo abierto. Y por supuesto puedo saltar dentro y adaptarme y cambiar cualquiera de estos estados. Entonces en vez de decir desplegable grande, tal vez pueda decir tu talla de zapato o el color de tu zapato o lo que sea que tu proyecto requiera que la belleza de este sistema de diseño. Entonces estos son átomos y moléculas. En resumen. Básicamente puedes adaptarlos y usarlos como quieras. Y déjame mostrarte rápidamente las plantillas. Entonces aquí tenemos las plantillas y vamos a usar grandes. Entonces lo que necesitamos es navegación. Así que arrastra y suelta mi nav one, por ejemplo, voy a ajustarlo a la posición. Cierra esto. Vamos a usar la sección héroe. Vamos con aquí en el número cuatro, por ejemplo, colocémoslo aquí y aquí mismo. A lo mejor hacer algo como esto. Entonces lo que podemos hacer es usar el llamado a la acción puede ser así que usemos el llamado a la acción cinco. Snap it, asegúrate de que está en la posición central está justo aquí hasta que se reúna con nuestra sección de héroes y te hagas la idea. Sólo vas a arrastrar y soltar estos elementos dentro. vas a construir. Lo mejor de todas las plantillas y todos los diagramas de flujo es que vienen en dos modos diferentes. Estado predeterminado, que es el modo de luz y el modo oscuro. Entonces, si hago clic en mi navegación, vuelvo a modo oscuro, clic aquí mismo, cambio a oscuro, clic aquí mismo, cambio a oscuro en solo unos clics. Y si escondo mi grilla solo para que veas que tenemos esto. Entonces, si lo previsualizo realmente rápido, puedes ver cómo se ve en tiempo real. Incluso tiene estos efectos de hover. Y por supuesto, cuando cambias y adaptas todos estos componentes, por ejemplo, este logotipo y lo cambias al logotipo de un cliente. Puedes agregar diferentes iconos, puedes agregar diferentes imágenes. Se va a adaptar en tiempo real. Y este es el objetivo de un sistema de diseño, es ahorrarle miles y miles de horas de crear estas aburridas tareas porque no hay nada en el mundo que más odio. Y para crear pies de página, y tengo mi pie de página aquí mismo. Así que haga clic aquí, arrastre y suelte la posición del pie de página allí, por ejemplo , snap, es un modo demasiado oscuro como ese. Colóquelo aquí. Hit preview una vez más. Y aquí tengo mi pie de página en su lugar. Esa es la belleza de estos sistemas de diseño, es crear con velocidad, crear una escala de ancho. Y eso es lo que se puede ver con este particular sistema de diseño de inicio, que he creado en los últimos seis meses, es que he creado todos estos elementos. Entonces, permítanme borrar esto. Creé todos estos elementos, pero puedo escalarlos fácilmente. Puedo agregar más elementos aquí usando elementos existentes, puedo reposicionarlos, reorganizarlos, cambiar sus colores, cambiar su radio de esquina. Porque si me acerco muy cerca a uno de estos botones, puedes ver que el radio de la esquina es de cuatro si te muestro aquí mismo, pero tal vez quiero cambiar el radio de la esquina en este botón principal a algo un poco más grande. Déjame hacer zoom para que puedas ver todos los estados un poco más grandes a algo así como 20. Pulse Intro. Y se puede ver en tiempo real, va a cambiar a lo largo donde sea que se encuentre este botón, donde sea que se use este botón, no solo aquí, sino a lo largo de mis plantillas también. Entonces se va a actualizar en tiempo real. Eso es lo clave de los sistemas de diseño. En Adobe XD. Tienes que cambiarlos en los componentes predeterminados y todos estos componentes que arrastras y sueltas, que te mostraré nuestros componentes hijos. Para que puedas cambiar y adaptarte ahí y usar estos cambios locales, por ejemplo, en esa sección de héroes que acabo de mostrarte anteriormente, vas a actualizar el texto. Quieres agregar tu propio texto, tus clientes gravan lo que sea, entonces va a cambiar en componente de deuda. Pero si queremos hacer cambios más globales como el color de fondo, como la fuente, y lo que sea, ustedes van a hacer esos cambios aquí dentro de los componentes principales, sistema de diseño de inicio viene con dos archivos, archivo maestro y archivo ligero. Básicamente la única diferencia está dentro del archivo maestro, que solo te estoy mostrando, puedes ver todos los elementos aquí mismo en un solo lugar, dentro del archivo de luz. No puedes hacer eso porque a propósito los eliminé todos del lienzo para mantener la mayor cantidad de lienzo libre posible para que podamos diseñar sin distracciones como mirarlos aquí mismo. Entonces tal vez sean divisores para comenzar con el archivo maestro para aprender todos estos componentes. Por supuesto, proporcioné imágenes de todos estos componentes que pueden navegar de un vistazo en cuanto a cómo se ve el componente, cómo se ve la plantilla antes de comenzar a trabajar con esos. Lo último que quería mostrarles sobre esto son estos diagramas de flujo. Así que déjame abrirlos aquí mismo. Así que vamos a cerrar las plantillas, abrir los diagramas de flujo. Vamos con los diagramas de flujo de escritorio. Usemos el encabezado, por ejemplo, y arrástrelo y suéltelo aquí mismo. Usemos el contenido. A lo mejor quiero posicionarlo aquí mismo. Vamos a usar algo más como una posición de deslizador aquí mismo. Entonces lo bueno de estos componentes es que simplemente puedes duplicarlos posicionándolos aquí mismo. Y porque estos son los componentes, como dije, simplemente puedes hacer clic en arrastrar y va a reemplazar ese componente en tiempo real. Entonces portafolio, arrástralo y subirlo aquí. A lo mejor quiero usar el formulario número cinco. Mi cliente dice, no me gusta cómo se ve la fórmula Phi. A lo mejor puedas probar otra cosa, bien, para el número tres, ahí tienes. Se puede ver lo súper simple que es esto crearlos. Cuando quieras conectar todos estos elementos, vamos a cerrar esto. Entonces usemos los elementos del diagrama de flujo. Usemos, por ejemplo, números. Entonces vamos con el número uno. A lo mejor esta es la primera página, por ejemplo vamos a cerrar eso. Usemos flechas. Entonces voy a usar esta flecha, arrastrarla y soltarla en su lugar. Quizás cuando los usuarios hagan clic en este botón de aquí mismo, vayan a ir a esta página. Así que simplemente voy a extender esto y seleccionar mi línea y lácteos, pero así es lo súper simple que es esto de usar y para crear n por ejemplo si se te cayó esto, Digamos árabe por error, Quiero reemplazarlo. Yo quiero hacerlo con éste. Ahí vas. Este es el error que quería, por ejemplo de este par, de este deslizador de aquí mismo, quiero que vayan a esta pieza de portafolio. Se puede ver lo súper simple que es esto de crear. Entonces esa es la belleza de estos sistemas de diseño. Obviamente esto es un extremo, como dije, me tomó más de seis meses crearlo todo. Me tomó dos o más de dos años de investigación. Y si te muestro algunas de estas plantillas, puedes ver cómo se ven. Entonces tenemos aquí por aquí el llamado a la acción de futuros. Entonces hice mi investigación sobre cuál es el más utilizado dentro de la industria. ¿Cuáles son algunos estándares de la industria y cuáles son los más utilizados? Entonces rejillas de contenido, precios, tenemos el blog, tenemos login y tenemos foros, contáctanos. Y mucho más. Y todo ello responde como muestro aquí mismo. Y todo está usando x, estas últimas características. Entonces si hago clic aquí mismo y salto dentro de estas imágenes, puedes ver que tenemos la pila, tenemos el emparejamiento. Entonces, si elijo cambiar esta etiqueta, por ejemplo I. Puede hacer clic aquí mismo, y va a cambiar la dirección de esta pila a esta dirección. Y vas a notar que va a empujar este contenido hacia abajo y va a escalar de manera uniforme a lo que sea que esté creando en mi sistema de diseño. Una vez más, si te interesa, sistema de diseño es el inicio del sistema de diseño. Hay un curso de YouTube para ello. Todo se explica con mucho más detalle. Puedes consultar esta página para que veas los futuros. Como mencioné, átomos o moléculas, organismos, diagramas de flujo, plantillas, modo oscuro, iconos animados, curso incluido. Así que todo está dentro del sistema de diseño de inicio. Si quieres crear tu propio sistema de diseño, solo asegúrate de prestar atención a dos cosas. Asegúrate de que cuando comiences a escalar a escala con un propósito. No solo escale por el bien de escalar y asegúrese de usar solo los elementos que son necesarios en su sistema de diseño. Para mi sistema de diseño aquí mismo, utilicé elementos de mi investigación que la mayoría de los diseñadores están utilizando. Pero para tu sistema de diseño, quizás no vas a usar estos elementos. A lo mejor vas a usar alguna otra cosa, otra cosa. Pero básicamente comienza con pequeños elementos como botones como te mostré y luego expandirte a partir de ahí, agrega componentes, pero asegúrate de agregar solo los componentes que son realmente necesarios en su sistema de diseño. En el siguiente video, vamos a hablar sobre los tokens de diseño, qué son elaborados, un poco más sobre ellos y cómo usarlos en tu sistema de diseño. Entonces te veré ahí. 122. Diseño de fichas: Los tokens de diseño están en el corazón de todos los buenos sistemas de diseño que existen porque son una gran herramienta para la colaboración entre diseñadores, desarrolladores y accionistas. En este video, te voy a mostrar cómo lo hago y cómo lo hacen algunas grandes empresas por ahí, y ¿ cuáles son algunas de las mejores prácticas con respecto a los tokens de diseño? Así que comencemos. Así que aquí estamos de vuelta otra vez en Adobe XD y una vez más en mi archivo maestro de sistema de diseño de inicio, que te mostré en video anterior. Y las fichas de diseño se encuentran justo aquí a la izquierda. Básicamente lo que mencioné anteriormente en la lección anterior, tienen el nombre. Entonces este nombre es realmente útil porque cuando estás colaborando con otros diseñadores, digamos que quiero usar este color oceánico para, digamos, el color de fondo de nuestro modelo o algo así. Y luego tengo que decirle eso a mi colaborador de diseño en mis compañeros de diseño, Digamos que use ese color azul dentro de ese fondo de modelo. Pero tenemos múltiples colores azules, ¿cuál de cuello azul? Uso. Uno B8, F9. Una vez más, va a ser muy difícil para la gente, sobre todo si estás trabajando con ellos muy separados. Si estás trabajando desde casa con tus compañeros de equipo, va a ser difícil para ellos implementar ese cambio. Y va a ser difícil para todos en el equipo recordar este código hexadecimal, por ejemplo, así que por eso estamos usando nombres. En este caso, solo puedo decirles, usan el azul océano para el fondo de la modelo y todos están en la misma página. El océano es mucho más fácil de recordar que por ejemplo a. Hashtag uno, B8, f e, f nueve o lo que sea. Así que los desarrolladores pueden usar la misma función y voy a mostrar eso en solo un segundo en un gran sistema de diseño por ahí. Pero básicamente ese es el objetivo del diseño. Los tokens los usan sabiamente y los usan como escalas de su sistema de diseño. Por supuesto, puedes utilizarlos para texto. En este caso, solo tengo titular y cuerpo, pero por ejemplo puedes usar el tamaño de carácter específico para elementos específicos, por ejemplo, si el personaje está justo debajo, digamos, animaciones o ilustraciones incluso mejor, entonces puedes usarlos junto con esas ilustraciones, por ejemplo, titular, grande, ilustración titular es pequeña o lo que sea. Y luego cuando le dijiste a tus desarrolladores, asegúrate de cambiar el titular, herramienta de ilustración grande, digamos 64 puntos. Todos en el equipo van a poder entender eso mucho mejor que, si no, lo que mencioné anteriormente sobre los componentes y diferentes nombres de componentes. Entonces, si acercamos aquí mismo a mis botones, por ejemplo, cambiar, el panel de capas, haga clic aquí mismo. Se puede ver que tenemos botón predeterminado grande, porque estos son botones grandes. Entonces tenemos botón por defecto, medio, botón predeterminado pequeño. Entonces estos son botones predeterminados, pero si cambio a otra cosa, por ejemplo aquí mismo tenemos selectores. Selectores en valor de línea, selectores grandes en valor de línea, selectores medianos en valor de línea, Digamos un pequeño o lo que sea. Por lo que hay que prestar atención a todos estos detalles. Y tenemos imágenes. Entonces hemos imaginado grandes y ¿cuántas columnas toma tu imagen? Entonces en este caso, imagen grande a imagen de columna grande imagen de nueve columnas mayor que 12, ancho completo, medio de pantalla completa, la misma historia, pequeña, la misma historia. Entonces tenemos dispositivos, por ejemplo, dispositivo, tablero, navegador o lo que sea. Entonces tienes que usar estos tokens de diseño para explicar lo que estás creando en tu sistema de diseño y para qué está diseñado cada token de diseño en primer lugar. Así que ahora te voy a mostrar esto, que es un Salesforce Lightning Design System Los tokens de diseño ya te muestran eso en la lección anterior donde hablamos de todos estos increíbles sistemas de diseño. Cómo lo usan básicamente es exactamente lo mismo. Entonces tenemos marca accesible, variante oscura de marca que es accesible con blanco. Entonces están usando combinaciones y están usando estos apoyos. Para que puedas ver el acceso global disponible para usar en la plataforma. O si no, puedo flotar aquí mismo, interno, por lo que está disponible para desarrolladores internos de Salesforce solo sujeto a cambios. Por lo que tienen todas estas reglas puestas en marcha cuando se libera. Entonces el número de versión 1234 y así sucesivamente, T-Mobile. Entonces, ¿ lo están usando con un equipo? ¿Lo usas con una app? ¿Lo usas para front-end o back-end? usas para lo que están viendo los visitantes, o para el tablero interno o para el panel de visitantes, tienes que etiquetar todos estos elementos. Y aquí se puede ver otra cosa. Entonces están usando primero RGB y valores hexagonales. En segundo lugar, la mayoría de las marcas están usando al revés, por lo que están usando el valor hexadecimal primero, el valor RGB en segundo lugar. Así que hay que tener en cuenta todos estos elementos con respecto a su propio sistema de diseño. Entonces por eso creé esta estructura simple en sistema de diseño Inception porque la mayoría de las personas son capaces de entender que tenemos foco. Entonces es solo para desenfocar, pero si estoy creando una variación en el enfoque, por ejemplo, diferentes tonos de enfoque. A lo mejor voy a decir algo como enfocar 80 por ciento o botón de enfoque o enfoque. No sé, sección de héroes o lo que sea. lo vas a decir dentro del propio token de diseño. Entonces todos en el equipo van a poder entenderlo. Y si te muestro aquí una vez más, si nos desplazamos un poco más hacia abajo, puedes ver cuántos colores diferentes tienen. Así que vamos a elegir uno al azar, por ejemplo este, palé nube azul, 15. Por lo que tienen 15 variaciones diferentes de esta paleta. Color azul nube. No, no es un T-Mobile y aquí lo están usando internamente. Esta es la versión 2.14, 0.0. Y se puede ver cortés nube azul, entonces cómo la están usando y cómo funcionan. Entonces básicamente, como sigo mencionando, todo depende de tu proyecto, tu necesidad, no vas a tener todos estos colores diferentes si tus clientes, un proyecto no los requiere. Entonces, ¿por qué molestarse en crear y dedicar tanto tiempo a crear todos estos colores, tonos, variaciones y mucho más cuando puede salirse con la suya con algo como esto, por ejemplo, solo unos pocos colores aquí y ahí y entonces, y esto es lo crucial y Keating, cuando el gasto del proyecto, siempre se puede agregar más colores. Entonces, por ejemplo, déjame mostrarte eso también. Vamos a hacer clic en seleccionar eso. Cambiémoslo a, no sé algo, lo que sea aquí mismo. Y si queremos añadir este color, simplemente puedo dar click aquí mismo. Y puedo decir algo como renombrar, tal vez llamarlo mancha púrpura, algo así. ¿Este es mi color principal en mi tarjeta secundaria? Llámalo colores principales. Así que ponlo por aquí, mancha púrpura. Y luego cuando seleccione mi blog la próxima vez que pueda hacer clic en púrpura sanguina va a aplicar al mismo tiempo. ejemplo, si tenemos estas manchas en la sección héroe de tu sitio web, por ejemplo, o si tu aplicación, puedes decir tu diseño. compañeros de equipo, cambien el blob número cinco a blob, color morado. Haga clic, haga clic, Listo. Por eso los tokens de diseño son increíbles. Por eso son útiles, porque puedes utilizarlos para crear todos estos elementos en tu sistema de diseño. Es mucho más rápido y todos en tu equipo pueden estar en la misma página y entender lo que estás creando mucho más rápido que si no estás usando estos tokens de diseño en primer lugar. En la siguiente lección, vamos a hablar de escalar tu sistema de diseño. Cuándo debes hacerlo y cómo debes hacerlo? Te veré ahí. 123. Escalar tu sistema de diseño: Cuando estás escalando tu sistema de diseño, siempre debes hacerlo pero un propósito y siempre debes hacerlo paso a paso. ¿Por qué lo estás escalando? ¿A dónde lo estás escalando? Para qué páginas, para qué tamaños, para qué dispositivos tienes que pensar todas estas cosas a medida que escalas. Así que saltemos a Adobe XD y te mostraré y te daré algunos consejos sobre cuándo y cómo escalar tus sistemas de diseño. Así que aquí estamos en Adobe XD una vez más dentro de mi archivo maestro de sistema de diseño inicial. Si quieres checar este sistema de diseño, asegúrate de hacer clic en el enlace en el PDF y ahí está, puedes comprobarlo si te interesa. Para este caso, digamos que acabas de crear estos botones y has elegido estos tres tamaños. Tan grande, mediano y pequeño. Y a partir de aquí tal vez quieras agregar tamaño extra grande. ¿Qué debes hacer? Primero tienes que consultar con tus desarrolladores, ¿ debo crear diferentes botones para ese tamaño extra grande o eres capaz de escalarlos y reposicionarlos? Codificar por ejemplo, tal vez el tamaño extra grande para el botón en sí no sea realmente necesario. A lo mejor se debe ajustar el espaciado y va a ajustarse a un tamaño más grande. Entonces es por eso que la comunicación entre diseñadores y desarrolladores es la clave. Así que no estás invirtiendo tu tiempo en estos cambios que no son realmente necesarios y obligatorios. Entonces, si no son obligatorios y necesarios, vas a terminar con un aspecto limpio así. Pero si lo son, entonces tal vez vas a tener 20 tamaños de botones diferentes. Y luego más adelante, vas a decidir que, por ejemplo tamaño número siete no es realmente necesario. Qué tamaños usar. Eso es bastante sencillo. Tienes que hablar con tu cliente y tienes que hablar con la empresa para la que trabajas. ¿Qué tamaños usan tus usuarios? Si están usando, por ejemplo, solo una talla mayoritaria de ellos. Asegúrate de centrar toda tu atención en ese tamaño único. Y luego, cuando estás trayendo más usuarios en la línea, por ejemplo, esos usuarios vienen, la mayoría de ellos están llegando al tamaño de escritorio es, digamos que la mayoría de ellos están usando computadoras portátiles y luego de repente, gran afluencia de nuevos usuarios están usando iPhone. Entonces, ¿cómo adaptar este tamaño de escritorio al tamaño del iPhone? Entonces tienes que hablar con tus clientes, tus desarrolladores, tienes que hacer tu investigación todo el tiempo. Y luego, cuando estás escalando, realmente no tiene mucho sentido escalar a tableta si tus usuarios no usan tamaños de tabletas. Así que piensa en todas estas cosas, pero piensa en estas cosas a medida que avanzas y a medida que estás creando tu sistema de diseño, porque no hay punto de escala. Por el bien de la escala, hay todo un punto detrás de esto es escalar con un propósito y es atraer nuevos usuarios, acomodar a nuevos usuarios, acomodar nuevas necesidades y deseos de los usuarios, y por lo tanto hay que escalar con eso en mente. Además, como sigo mencionando a lo largo de esta clase, no cree elementos que no sean necesarios. ejemplo, si no estás apoyando avatares, porque a lo mejor tienes perfiles en tu proyecto, en tu producto, en tu dashboard o lo que sea. A lo mejor no tienes la opción de ellos inicien sesión y creen su cuenta, entonces ¿por qué crearías avatares? Realmente no tiene mucho sentido. No los crees solo para estar aquí, creando porque son innecesarios para tu proyecto. Y no tengas demasiado miedo. Si, por ejemplo, acaba de crear una punta de herramienta y no ha creado 50 descripciones emergentes diferentes. A lo mejor no lo son necesariamente. Y Tooltip, como su nombre indica, es realmente así de simple porque es solo un poco de información. Así que no le prestes demasiada atención a todas estas pequeñas cosas. Asegúrate de hacer bien las cosas grandes, como el diseño, como las cuadrículas, como la cuadrícula de espaciado y horizontal y vertical. Deshágase de todas estas cosas antes de preocuparse por la información sobre herramientas. Y una última cosa que quiero decirte sobre escalar tu sistema de diseño es con estas plantillas. Entonces, si nos acercamos aquí mismo y te mostramos, entonces lo que tenemos aquí es Futures call to actions equipos. Entonces, tal vez tenemos calificaciones de contenido, tal vez tenemos cartera, tenemos precios y por ejemplo estás creando un panel de control. Dentro de ese tablero, vas a tener una sola página que es solo una descripción general, por ejemplo , dentro de esa visión general, les vas a dar la posibilidad de ver, no sé, deja dicen gastos mensuales o algo así. No entres en demasiados detalles. Al adaptar nuevos componentes para trabajar con esto, tal vez puedas usar componentes existentes y luego dejar los desarrolladores integren la solución que no es Nativa. Si es nativo como, por ejemplo , Gráficos, entonces tienes que crear un diseño para un solo gráfico y no te molestes en crear múltiples gráficos, haciendo múltiples cosas solo por el simple hecho de tener todos estos gráficos, asegúrate de enfocarte en lo que es necesario para ese proyecto. Y luego, a medida que se agreguen nuevas características más adelante, asegúrese de escalar junto con esas nuevas características y su sistema de diseño. No te molestes en crear esos elementos que no son necesarios o no necesariamente, porque solo va a abarrotar tu sistema de diseño y en realidad va a ralentizar tu progreso en este proyecto en particular y sus desarrolladores progresan. Porque recuerda, sea lo que sea que estés diseñando, diseñando dentro de tu sistema de diseño, los desarrolladores tienen que desarrolladores, así que no utilices su valioso tiempo si esos elementos no están necesariamente en el momento. Y puedes crear un backlog. Entonces, por ejemplo, estos elementos , digamos, son necesarios en este momento. Estos elementos son necesarios en tres meses, estos elementos son necesarios en seis meses. Para que puedas crear backlogs de elementos. Y a medida que avanza el proyecto, a medida que avanzas, entonces puedes abordar esos elementos un poco más tarde porque no son necesarios en este momento. Así que una vez más, y finalmente, la escala, ya que necesita ser escalada, no se limite a escalar por el bien de escalar. 124. ASIGNACIÓN de la SECCIÓN 15: Tu tarea para esta sección es solo usar dos o tres elementos diferentes en Adobe XD y solo tratar practicar la creación de tu propio sistema de diseño. Porque a partir de estos elementos básicos, realmente puedes ramificar, como viste en esta sección de la clase y crear algunos sistemas de diseño masivos que puedes usar a lo largo de tus proyectos. No intentes invertir demasiado tiempo ahora mismo en este enfoque, pero asegúrate de tener este enfoque en mente, especialmente si recién estás comenzando y te parece un poco confuso, parece un poco difícil, tú. No trates de cargarte demasiado con ello. Se pueden utilizar elementos como los que mencioné en el apartado anterior. Con los kits de interfaz de usuario, puedes usar uno de esos elementos, por ejemplo, y simplemente reemplazarlos aquí y allá solo para acelerar un poco tu proceso. Pero ese es el objetivo de acelerar tu proceso. Porque donde quiera que estés trabajando, siempre intentas ser más rápido. Siempre intentas ser más preciso. Siempre intentas entregar a tus clientes un poco más rápido y sin revisiones si es posible. Así que los sistemas de diseño te van a permitir simplemente muertos. Entonces como dije, son increíblemente importantes, pero si recién estás empezando y todo se ve un poco demasiado, no te preocupes por ello. Siempre puedes volver a ello en una etapa posterior de tu carrera. 125. SECCIÓN 16 Diseño de páginas web en Adobe Xd: Muy bien, así que aquí estamos. Después de todo este tiempo, finalmente vamos a empezar con el diseño. Y en esta sección del curso, realidad vamos a empezar a trabajar en nuestro diseño, que va a ser para concesionarios exclusivos de autos. Van a vender autos usados. Y vamos a abordarlo utilizando algunas de estas metodologías que hasta ahora mencionamos en el curso. Y después de crear el diseño, después de crear diferentes interacciones en nuestro diseño, después de elegir los colores, elegimos la tipografía, elegimos las imágenes correctas, elegimos el diseño correcto con probarlo, practicamos con él y entendemos, y de hecho conseguimos el último get-go de nuestro cliente. Entonces vamos a moverlo al flujo de trabajo. Entonces comencemos con esta sección. 126. Resumen del diseño: Bien, vamos a saltar directamente y comencemos con nuestro brief de diseño. Y lo que he abierto aquí mismo son las plantillas de Adobe XD del brief de diseño, que ya les mostré en una de las lecciones anteriores sobre el brief de diseño en sí. Y puedes obtener esta plantilla y puedes usarla. Voy a compartir el original, y también compartiré éste que se rellena con la información del proyecto que vamos a cubrir. Y como pueden ver, es completamente el mismo el que ya le mostré antes. Sin más preámbulos, conozcamos a nuestro cliente para este proyecto. Entonces este va a ser un cliente imaginario, y en realidad se basa en un cliente real que tuve hace unos años. Entonces tomé los aprendizajes, pasos y enfoques de ese proyecto en particular. Y lo puse directo en este proyecto. Siempre me gusta usar esto y hacer esto para mis cursos. Siempre me gusta usar proyectos reales que realmente hacían antes y convertirlos en conocimiento y lo que aprendí ellos mientras trabajaba en ellos y convertirlos en cursos reales y te mostré algunos de mis enfoques y algunas de mis metodologías. Entonces es la misma historia con esta, pero porque es extremadamente difícil porque estamos tratando con autos para encontrar imágenes de autos que realmente puedas usar múltiples ángulos diferentes a las que vamos a llegar en apenas un segundo donde vamos a hablar unas imágenes distintas que vamos a utilizar en este curso. Es realmente difícil hacerlo. Entonces por eso lo elegí para ser cliente imaginario porque como dije, autos reales con todos estos ángulos diferentes, es realmente difícil de encontrar. Así que vamos a saltar directamente a XD. Y déjame mostrarte este breve de diseño y lo que se incluye en su interior. Por supuesto, puedes leer esto por ti mismo porque como dije, te lo voy a dar. Pero solo voy a recorrer esto rápidamente y explicar cómo llegué a esta información y por qué elegí esta información. Como dije, con base en la experiencia previa en metodólogos anteriores sub, hemos caducado un sitio web de autos exclusivos de araña, que es el proyecto que mencioné. Tenemos el plazo del proyecto aquí mismo, que son tres meses para hacer todo. Entonces para hacer investigación, diseño y Webflow construido, entonces tenemos el perfil de la compañía. Por lo que es un concesionario de autos usados ubicado en Belgrado, Serbia. Ellos son el auto de lujo y nicho. Entonces esto es realmente importante porque el concesionario de autos usados puede ser básicamente cualquier cosa que puedas vender autos usados, que son, por ejemplo , a, $1,000 o $2,000 o $100,000 o $500,000 porque los autos usados son autos usados sin importar dónde se encuentren en el espectro del precio. Todavía van a ser autos usados, pero en este caso están vendiendo 50000-500 mil. ¿Por qué es importante esto? Porque quieres saber estructurar la información. Con quién estás hablando. Entonces, obviamente, estas personas como clientes van a ser diferentes a si estás construyendo un sitio web para un $1,000 autos, por ejemplo, algunas imágenes obviamente van a ser diferentes tipos de autos que vas a usar on ya que las imágenes van a ser diferentes. Tal vez. La iconografía va a ser diferente porque quieres atraer a ese público más amplio. Venden en su mayoría sedanes, SUV y superclase. Por lo que se puede ver a veces tienen un hatchback caliente en stock. Estos son respaldos de cobertura que son extremadamente fuertes o potentes en caballos de fuerza, por ejemplo, así que tenemos algo así como un Mercedes, un 45, ANG o Audi RS tres, por ejemplo o algo así. Así que a veces tienen eso como parte de intercambio. Lo que significa intercambio de partes es que si voy a comprarte un auto, ya tengo mis propios carbohidratos, así que te lo voy a dar. Vas a ponerle precio y me vas a cobrar en base a ese precio. Entonces, si pones un precio a mi auto, digamos $20,000, por ejemplo, vas a deducir esos $20,000 del precio original del auto que estás vendiendo. Entonces así es lo que se llama intercambio parcial. Entonces como dije, a veces van a conseguir que estas partes cambien autos a cambio de vender realmente sus propias acciones. Entonces como dije, esto se basa en la experiencia real que tuve con el cliente anteriormente hace unos años, y así es como hacen su negocio. Y la mayoría de estos vendedores de autos están haciendo esto. Lo mismo. Y una vez que llegue esto es importante porque queremos saber qué vamos a poner en el propio sitio web. Entonces hay diferentes de la competencia porque todos sus autos o autos de demostración de concesionario y la mayoría de los autos son de Alemania. Lo que por qué esto es importante es que esos autos no son utilizados por, llamémoslos gente normal. Son utilizados en su mayoría por periodistas que van a venir a los concesionarios y probar estos autos. Y es realmente importante porque están comprando estos autos usados a los concesionarios oficiales de Alemania. Su misión es ser transparentes, honestos y brindar una garantía completa del historial del automóvil dependiendo del automóvil y un excelente soporte posventa. Marco es la persona clave en una empresa que cuenta con otros cinco empleados, lo que es crítico solo pueden seis personas en esta empresa. Entonces son una empresa muy pequeña. Están utilizando proveedores externos para autos transferidos desde Alemania y tienen socios para préstamos y aduanas. Entonces no están haciendo todas estas cosas ellos mismos. Por eso pueden ser tan magros con solo seis personas en el equipo. Están utilizando a todos estos socios externos para ayudarlos. Su competidor directo es DSD, y voy a mostrarte su sitio web un poco más tarde. Y los competidores indirectos me están horrorizados, los automóviles, lo que básicamente se traduce en usar autos, pero en una escala mucho mayor porque venden autos de todos los rangos de precios. Solo imagina Amazon, pero para autos, y de hecho te voy a mostrar ese sitio web un poco más tarde. Entonces tenemos Project o eras tú Así que actualmente tienen una página de Instagram donde muestran su stock para que no tengan un sitio web en este momento, que fue la misma historia con el cliente I mencionado anteriormente los hicieron algunos trabajos para ellos. Pero quieren tener un sitio web porque pueden mostrar imágenes más rápidas y más, lo que instagram las limita a sus propios tamaños, a su propio diseño. Quieren mostrar imágenes enormes. Quieren mostrar imágenes detalladas de los interiores, por ejemplo cosas así. Y no pueden caber más de diez imágenes en la fila de la cuadrícula de Instagram. Por eso optaron por crear un sitio web y tener un punto de contacto directo a través del formulario de contacto y mostrar algunas de sus características, todo en un solo lugar. Puedes tener todo eso en página web, en Instagram, lo siento, puedes tener imágenes. Cuando haces clic fuera de las imágenes, por ejemplo o historias o lo que sea, entonces puedes leer la descripción, pero luego solo puedes ir y hacer clic y contactar a la persona que te interesa Acerca de, descarta que estás viendo el sitio web del botón, puedes hacer todo eso en una sola página. Por eso quieren un sitio web en primer lugar. Quieren que sea receptivo y que pueda agregar rápidamente nuevos stock al sitio y no contactarme como diseñador por cada pequeño detalle, pero quisiera mi apoyo si se atascan. Ahí es donde vamos a usar Webflow CMS más adelante porque podremos fácilmente simplemente agregar autos nuevos a sus existencias. O si los autos se han vendido, podemos sacar fácilmente esos autos del stock. Y voy a demostrar que en Webflow construimos un poco más tarde y lo súper fácil que es una vez que realmente sigas adelante y lo configuras, el proceso de configuración real, lleva un poco de tiempo, es un poco complicado. Pero una vez que realmente lo configuraste, trabajar con él para tus clientes va a ser súper simple y directo. Tienen las imágenes de su stock, pero no tienen ninguna otra imagen de íconos. Ahí es donde entramos como diseñadores para encontrar imágenes que van a satisfacer sus necesidades y este proyecto en particular, así como los íconos que les voy a mostrar en tan solo un segundo cuando nos movemos a diseño en XD, quieren ser reconocidos como un distribuidor de lujo, pero no les gustan los sitios web oscuros y las imágenes enormes. Esto es lo que realmente hizo con mi cliente anterior, que mencioné. Seguí adelante y platiqué con ellos, me gustan estos colores, me gustan estas imágenes, qué tipo de sitio web les gusta por inspiración, por ejemplo y luego señalé todos estos sitios web sin ningún color oscuro. Entonces seguí adelante y les pregunté , ¿te gustaría colores oscuros? Porque los colores oscuros suelen estar asociados con algo que es lujoso y caro. Dijeron No nos gusta eso porque simplemente no soy fan de ello. Como el minimalismo. Nos gusta que las cosas sean simples, organizadas, fáciles de usar, y no tensas en tus ojos porque mayoría de estos sitios web en línea que ves por lujo, lo general el color negro para el fondo, imágenes realmente oscuras y luego texto blanco o textos dorados. Así que eso no me gustó mucho. Piensan que es demasiado, es demasiado vieja escuela. Pero les gusta el color azul y la sencillez. Y su sitio web ideal es car wow, que también van a mostrar en apenas un segundo qué es y por qué les gusta tanto porque les hice todas estas preguntas. El principal problema que están tratando de resolver es presentar sus acciones y tener un punto de contacto en un solo lugar en lugar de comunicarse a través de DMs de Instagram, que acabas de mencionar, y por qué necesitan un sitio web en primer lugar en absoluto. Metas y objetivos. Por lo que su principal objetivo es presentar la marca de lujo es un concesionario de autos de lujo y se distinguieron de otros concesionarios que están vendiendo autos familiares baratos. Así que imagínate esto. Cuando eliges tres sitios web y los pones juntos, quieres notar que estos tipos están vendiendo cosas caras y no solo colores regulares. Entonces esa es toda la idea aquí mismo. El objetivo principal de este proyecto es enviar personas desde su página de Instagram a este nuevo sitio web y aumentar las reservas de pruebas de manejo, que es cuando realmente llamas al showroom y reservas una prueba de manejo para un determinado automóvil en un diez por ciento en los dos primeros meses posteriores al lanzamiento. Entonces quieren que lanzemos el sitio web, para configurar el SEO por ejemplo y luego en los próximos dos meses después del lanzamiento, quieren poder aumentar las reservas para las pruebas de manejo diez por ciento en los dos primeros meses posteriores al lanzamiento. Después pasamos al público objetivo. Es bastante sencillo porque se han abierto a los negocios desde hace tres años. Y un tipo de persona sigue regresando con una pequeña excepción de vez en cuando, pero generalmente, solo un tipo de cliente que sigue regresando a ellos. Es un hombre 45-65 de Serbia, generalmente vive en Belgrado, es dueño de un negocio, tiene su propio negocio en realidad porque estos autos son bastante caros. Entonces esos son los tipos de personas que realmente pueden permitirse este tipo de autos. Hábitos de consumo de medios, Instagram y LinkedIn todo el día, YouTube para cuidadores y exploración, hábito diario. Entonces Jim, estilo de vida saludable le gusta publicar contenido en Instagram. ¿Cómo sabemos todas estas cosas? Porque preguntamos a nuestros clientes y de hecho nos lo dijeron, solo recuerda, están trabajando en Instagram. Todos sus clientes vienen de Instagram, por lo que son capaces de ver quiénes son esas personas. Porque cuando realmente envías un mensaje, puedes hacer clic en el perfil. Puedes explorar el perfil y ver quién es esta persona. ¿Cómo sabes de la edad? ¿Cuándo realmente compras un auto? Tienes que darles tu licencia de conducir, tienes que darles tu cédula de emisión gubernamental, por ejemplo, pasaporte o algo así para verificar tu identidad a partir de esos datos. Podemos saber que son 45-65. Suelen ser masculinos porque vienen ese tipo de personas. También se puede conocer su residencia y la ciudad de los residentes a partir de esos documentos oficiales emitidos por el gobierno porque tienen que firmar papeles ahí. Entonces no estás pidiendo este tipo de información solo tu propio bien o para que esté más informado, sino para crear una persona de usuario que van a llegar en solo un segundo. Entonces a partir de esta información, se puede saber quiénes son estas personas. Además, puedes buscar a estas personas en Instagram porque tus clientes te dijeron que los encontraron en Instagram y se pusieron contacto con ellos a través de Instagram para llegar a ir y probar todos estos vehículos y a eventualmente por estos vehículos. Entonces así es como sabemos quiénes son y cómo son. Debido a que nos desplazamos por sus feeds de Instagram, los encontramos en LinkedIn. Así es como sabemos que hay dueños de negocios porque vemos que ellos configuran su negocio. Vemos cuanto tiempo lo trabajaron. Ese negocio, quienes son los puntos clave de contacto en ese negocio son donde se ubicaron los negocios. ¿Cuánto tiempo ha estado abierto? ¿Cuánta gente trabaja ahí? Puedes ver toda esa información ahí mismo en LinkedIn y en YouTube porque le dijeron a nuestro cliente que vieron muchos videos y reseñas de YouTube porque se trata de autos caros. Serbia es un lugar bastante pequeño y un país bastante pequeño. Y por lo tanto, no son muchos de estos autos circulando como en Inglaterra, por ejemplo o en Los Ángeles o lo que sea. Por lo que tienes que informarte a través de otros medios. Y ese medio en este caso es YouTube para reseñas de autos. Y sólo para explorar estos autos y entenderlos un poco más. Hábitos diarios. Una vez más, para no repetirme demasiado de Instagram porque se puede ver lo que hacen, a dónde viajan, qué están haciendo. Para que puedas averiguar dónde están a diario. Y también se puede ver cuando publicaron estas imágenes. Entonces puedes entender con bastante facilidad ¿ con qué frecuencia posan para que los me gusta estén en Instagram? Y una vez más, todo esto es realmente importante porque puedes orientar fácilmente tus anuncios un poco más tarde una vez que realmente lanzaste un sitio web directamente a través de Instagram, porque una vez más, toda su audiencia está en su gramo de cualquier manera. Para que podamos apuntar a Instagram, ahora podemos obtener LinkedIn porque sabemos quiénes son estas personas, qué les gusta, cuántos años tienen donde viven, y así sucesivamente y así sucesivamente. Por último, llegamos a estas dos cosas. Por lo que tenemos requisitos de diseño. Entonces, dado que estamos usando Webflow, solo se requiere una dimensión antes de la compilación. Y en realidad voy a mostrarte cómo crear un diseño responsive en Adobe XD en tan solo un segundo. Pero no vamos a hablar diseño responsive porque es solo una pérdida de tiempo cuando trabajas solo directamente de XD a Webflow, nosotros, las dimensiones como soluciones, vamos para tener mesa de trabajo de 40.40 pixeles. Entonces el formato de archivo XD es nuestro formato de archivo principal. Vamos a tener JPEG, PNG y SVG para el contenido de imágenes e iconos. Se requieren paletas de colores para ser creadas, por lo que no tienen una. Tenemos que crear uno. Las imágenes deben ser incluidas. Su stock está incluido, tipo de ahorro. Entonces voy a explicar eso un poco más tarde. Otras imágenes son de Envato elements. En nuestro caso, todas las imágenes son de mis elementos de lema, pero voy a llegar a ello en apenas un segundo. Como dije, los documentos asociados copian a crear. Entonces lo que esto significa es, por ejemplo, guía de estilo. Vamos a crear eso. Y vamos a exportar todas estas otras opciones como precios y este resumen de diseño, en este caso, presupuesto y horario. Así que la línea de tiempo se divide en dos partes. Uno para investigación y diseño, los otros cuatro, desarrollo de Webflow. Y siempre tenlo en cuenta. Siempre deja un poco más de tiempo para el desarrollo de desprendimientos de rocas porque a veces puede haber algunos bichos. Entonces, cuando tienes tiempo para descubrir todos estos errores y resolverlos, es mucho mejor tener un poco más de tiempo para tu generador de flujo de trabajo. Entonces para este tipo de proyectos, cinco K para la investigación y el diseño, cinco K para el Webflow construido. Y como dije, tres meses para completarlo en este caso. Entonces no parece mucho, pero solo quiero crear algo que sea amigable para principiantes. Por lo general, este tipo de proyectos me duran alrededor de un mes y cobro un poco más de lo que ves aquí mismo por ese tipo de proyectos. Entonces dos semanas para la investigación, un mes para el diseño, mes y medio para la construcción. Para que veas lo que dije. Solo dejo un poco más de tiempo para el cinturón real. Luego tenemos la presentación de Planeación, Investigación, diseño de audiencia construida y entrega en. Puedes navegar por todas estas fechas Solo para entenderlas un poco más altamente estructuradas. Por último, pongo mi nombre aquí mismo, mi correo electrónico aquí mismo. Sólo para darte una idea, porque más adelante podría querer enviar esto a mis clientes para poder seleccionarlo, presionar Control o Comando E para exportarlo. Y desde aquí voy a elegir el PDF, luego presionar Exportar, exportar este PDF para que pueda compartirlo fácilmente con ellos para que puedan verlo, puedan entenderlo un poco más y son capaces de ver todas mis intenciones con este diseño y lo que quería hacer. Así que eso es todo por diseño breve, siéntete libre de explorarlo un poco más. Lo voy a incluir como dije, la plantilla original y esta, puedes agregarla la que quieras . Básicamente son lo mismo. Este acaba de llenarse, el otro solo está en blanco. Y ahora vamos a pasar a propuestas de proyectos. Y les voy a explicar cómo enviar estas propuestas de proyectos y cómo ser más efectivos con ellas. Entonces te veré ahí. 127. Propuestas de proyecto: Ahora que sabemos quién es nuestro cliente, pasemos directamente a las propuestas de proyectos porque queremos enviarles el precio real. Queremos que verifiquen el precio. Y queremos establecer algunos términos y condiciones. Así que no te confundas un poco más tarde. Así que saltemos directamente a la z. Y aquí está la plantilla de propuesta de proyecto. Puedes obtener esta plantilla. Voy a dejar el enlace porque es la plantilla premium que en realidad soy la vendo y no es demasiado cara. Creo que es algo así como de cinco a 6 dólares, algo así. Y también tiene página adicional aquí mismo las cuales se eliminan a propósito para este proyecto, que es la página sobre mí y creo en seguir adelante y darte un descuento. Así que asegúrate de hacer clic en el enlace en el PDF para que puedas obtenerlo. Entonces lo que tenemos aquí mismo es la portada. Entonces tenemos Detalles del Proyecto, Precios del proyecto y Términos y Condiciones. Y recuerdas esto de la lección anterior. Entonces puedes conseguirlo ahí o puedes obtenerlo desde este enlace. Sin embargo, es más fácil para ti si realmente quieres usarlo. Si no, dije lo que ya dije en esa parte del curso, puedes crear estas cosas tú mismo. Pero si el tiempo es dinero, entonces puedes seguir adelante y conseguir este. Entonces tenemos el color como autos exclusivos de Pilar. Esta es su dirección. Este es mi sitio web aquí mismo y mi información. Entonces tenemos detalles del proyecto. Entonces resumen del proyecto, lo que acordamos durante nuestra conversación de correo electrónico y llamada. A veces vas a conocer a tus clientes directamente en persona. Entonces vas a poner eso aquí, pero la mayoría de las veces vas a tratar con correos electrónicos, vas a lidiar con llamadas telefónicas, por ejemplo, videollamadas y algo así. Así que solo asegúrate de ponerlo ahí. Descripción del proyecto. Entonces ya hablamos de ello. Contamos con sitio web para ser diseñado y desarrollado, preventa ofrecen autos exclusivos. Es para ser diseñado en XD y desarrollado y alojado en Webflow para facilitar el diseño de páginas de mantenimiento. Entonces tenemos aproximadamente la página principal, que es nuestra página de héroe, que presentará los valores de la marca , la misión y parte del stock. Entonces tenemos los autos donde se presentarán todos los autos. Tenemos préstamos para explicar los préstamos así como la página de contacto donde las personas realmente pueden contactarlos. Y acabamos de platicar de todas estas cosas con nuestro cliente y les preguntamos, ¿cuáles son algunas partes principales de su negocio? Entonces nos dijeron que están vendiendo autos, generalmente a través de préstamos, así a través de sus socios. Entonces ya tenemos que crear estas dos páginas. Por lo general, tenemos que crear una página de inicio porque tenemos que estructurar esa información y mostrar a las personas que son nuevas en el sitio web. En realidad no saben lo que está haciendo este negocio. Así que queremos convertirlos con bastante facilidad y enviarlos de inmediato a la sección de autos de la página. Entonces tenemos la página Contáctenos porque queremos que gente pueda contactar fácilmente con esta empresa, pero también incluirá fuente de contacto en toda nuestra página web. Y siempre me gusta hacer esto porque Y obliga a las personas a desplazarse hacia arriba, por ejemplo, hacer clic en el contacto cuando pueda tener un formulario de contacto en todas y cada una de las páginas si eso es requerido por su cliente. Por último, tendremos todas estas páginas, como mencioné, donde vamos a presentar un auto individual de las existencias. Entonces tal vez quieras ver cuántas millas tiene el auto la identificación, qué color es, qué lo diseña? No conozco todas estas otras imágenes adicionales, así que vamos a hablar de todo eso en profundidad un poco más tarde. Todas las páginas deben diseñarse de manera receptiva, lo que ya mencionamos. El cronograma del proyecto debe completarse en 90 días, lo que ya mencionamos en nuestro resumen de diseño. Entonces, finalmente, esto es realmente importante. Así que tenemos investigación de proyectos, investigación de competencia, resumen de diseño e inspiración, papel, wireframe, investigación conceptual, mapa del sitio y diagramas de flujo. Todo esto nos va a llevar 14 días en este caso. Entonces tenemos moodboards, selección de colores, estilo de iconos, comparación y exploración. Adobe XD diseñado para compartir enlaces para comentarios más dos rondas de revisiones y comentarios que se realizarán en 15 días. Luego tenemos diseño de interfaz de usuario con imágenes, colores, sombras e íconos en estilo determinado más dos rondas de retroalimentación. También tenemos 15 días, pero solo ten en cuenta, estamos haciendo estos dos al mismo tiempo. Entonces esto es un poco engañoso en un poco, pero aún quieres presentar a tus clientes ¿ cuánto tiempo te lleva realmente crear esto? Por último, tenemos Asset Export, desarrollo de sitios web en Webflow, conexión de un dominio a un alojamiento Webflow. Obviamente van a brindar todas estas cosas más una sesión de consulta de 1 h sobre cómo usar Webflow para agregar autos nuevos al sitio, lo cual es realmente importante. Quieres poder comunicarte con tus clientes, explicarlos, lo que puedas. Entonces te van a picar menos en el futuro. Siempre quieres hacer esto. Siempre quieres configurar tus proyectos correctamente. Siempre quieres iniciar tu conversación con tus clientes correctamente. Entonces no te están llamando todos los días. No te están enviando correos electrónicos cada 2 h. Quieres explicarlos a fondo. Cómo usar Webflow, cómo usar el diseño, cómo usar el brief de diseño, lo que sea que estés creando para ellos. Solo asegúrate de explicar y tomarte un poco de tiempo de ese proyecto. Obviamente, puedes construir ese tiempo, construye este nuestro dentro de tu proyecto. Pero simplemente no les digas que en realidad lo estás construyendo porque siempre construye tu obra. Asegúrate de facturar tus correos electrónicos, tus llamadas telefónicas. Este que acabo de mencionar, si estás creando videos. Lo que sea que estés haciendo por tu cliente es parte del trabajo. No solo diseño, no solo Workflow Build. Así que siempre asegúrate de construir lo que estés haciendo dentro de tu propuesta de proyecto. Entonces tenemos la parte divertida, tenemos los precios. Entonces aquí tenemos las tarifas del proyecto. Entonces investigación, competencia, diseño de investigación, breve e inspiración. Todo esto nos va a llevar tanto. No sumé los números aquí mismo, pero no me moleste por ello. Entonces tenemos investigación de proyectos, tenemos investigación de conceptos de estructura metálica de papel, tenemos moodboards, selección de costos. Esto costó tanto, esto cuesta tanto, esto costó tanto. Y todo el punto aquí es llegar al total de 10 mil dólares. No incluí Webflow aquí mismo, así que vamos a construirlo aquí mismo. Entonces Webflow. Webflow build website o Webflow responsive website construido con un CMS incluido, que es el sistema de gestión de contenidos, que es para que puedan agregar todos estos autos nuevos a su stock. Entonces tenemos opciones de pago. Entonces tenemos dos pagos iguales. Entonces cinco k Ahora cinco k al final, tres pagos iguales son 3333 cada uno. Entonces el primero en este momento, segundo después de que terminamos el diseño y el turbo y después de que se complete la compilación de Webflow, entonces tenemos dos pagos, cinco K Ahora cinco k al final. Entonces lo que quieras, puedes agregar un pago, puedes cambiar toda esta información. Entonces tenemos términos y condiciones. Como dije, también hay una página que es sobre mí, que a propósito eliminé de esto porque los clientes me contactaron Así que no necesitan saber de mí. Ya saben de mí desde mis páginas en mi sitio web, por ejemplo, por lo que tenemos recursos del proyecto, si no se acuerda lo contrario, debe ser proporcionada por revisiones de proyectos del cliente. Cuántas revisiones pueden tener antes de que sigamos adelante edición, así que no puedes agregar tu diseño gráfico a esto. Esto es solo para el diseño de UI UX, una investigación y Webflow construidos a partir de su sitio web. No me agregues cosas adicionales como diseño de banners o diseño de mandarín o tarjetas de visita, diseño de folletos, lo que sea, eso no está incluido en este precio. Si tú, como diseñador, sabes cómo hacer todas estas cosas, más poder para ti, realmente te animo a crear aún más para que tu cliente las tome, tome aún más dinero de ellas, construya aún mejor relación con ellos. Pero para mí, realmente no me gusta hacer esas cosas. Yo sé cómo hacerlas. Simplemente no me gusta hacerlas. Para mí. Investigación UI, UX y construido. Eso es lo que hago y eso es lo que me gustan los días de trabajo. Entonces, si estás trabajando de lunes a viernes, están trabajando los fines de semana. Podrían enviarte un correo electrónico, pero solo sé directo con ellos. No trabajo los fines de semana. Para que puedas enviar tu correo electrónico. Recibiré su correo electrónico, pero le responderé el lunes. Así que asegúrate de ser directo con tus clientes o de dónde a cuándo. Si trabajo 9-5, asegúrate de incluir la zona horaria. Esto es fácil para este proyecto en particular porque tanto yo como mis clientes estamos en la misma zona horaria. Entonces eso es bastante simple, pero si estás trabajando en cualquier otra zona horaria, es muy importante hacerlo. Además, ¿cuáles son tus días festivos? ¿Si estás trabajando el fin de semana? ¿Cobras aún más por hora o cuál es tu tarifa el fin de semana? Formatos de archivo. Entonces, por lo general, si estás trabajando en ASD, ellos quieren archivos Figma, luego se asegura de especificar que vas a entregar solo archivos XD. Si estás trabajando en Photoshop, por ejemplo, para la edición de imágenes, como lo estoy haciendo, siempre me gusta declarar esos derechos de uso. Entonces, ¿quién obtiene los derechos este diseño y construcción y cuando la cancelación del proyecto, si deciden cancelar en medio del proyecto, qué haces? ¿Vas a devolverles el dinero? Cuánto los vas a reembolsar, cuándo los vas a refinar o si no los vas a reembolsar en absoluto. Así que asegúrate de pensar todas estas cosas cuando empiezas y en todas estas cosas cuando empiezas y asegúrate de acercarte a ellas de una manera lógica, ¿qué harías en esa situación si estás trabajando con alguien en alguna, solo decides cancelar, ¿ Quieres que te devuelvan tu dinero? ¿Te sentirías mal por ello? Así que asegúrate de averiguar todas estas cosas. Como dije en la parte anterior del curso donde platicamos de propuestas de proyectos. Y ahora en esta, puedes conseguir esta plantilla con el descuento. Te voy a dar un código de cupón. Y básicamente esto es todo. Vas a exportar esto como PDF, seleccionarlo y seleccionarlos todos en realidad. Entonces hagámoslo. Al igual que sosteniendo Shift Control o Comando E, como PDF y va a exportar como un solo PDF, pero va a unir todos estos diferentes PDF juntos. Así que en realidad vas a tener esto como la primera página. Esta es la segunda página y así sucesivamente, que es lo que queremos al final. Para que puedas exportar esto, puedes imprimirlo si quieres que se lo entreguen directamente a tu cliente. Si tu cliente es local, si no, como dije, puedes exportarlo como PDF y simplemente puedes enviarlo por correo electrónico. Entonces eso es todo para este video. Vamos a ir al siguiente donde vamos a hablar de nuestra personalidad. Y te voy a mostrar esa plantilla que cubrimos anteriormente, cómo llenarla para este proyecto en particular. Entonces te veré ahí. 128. Persona del usuario: En esta lección, vamos a hablar sobre persona del usuario y lo que aprendimos hasta ahora del brief de diseño y de nuestra conversación con nuestro cliente, la investigación que hicimos en Instagram, en LinkedIn, en YouTube. Pero entendimos por lo que nos dijeron nuestros clientes y lo que vimos en línea directamente. E incluso puedes ir más allá y simplemente llamar a estas personas que ya están compradas autos a tu cliente y luego simplemente reservar una reunión con ellos y hacerles algunas preguntas simples. Haz un cuestionario sobre algunos conceptos básicos de UX como, ¿ qué te gustó de experimentar? ¿Qué crees que podría mejorarse de la experiencia de compra? ¿Tomaste un préstamo? ¿Lo hiciste Bye bye cash? ¿Tomaste algunos otros métodos para comprar este auto a la compañía? ¿Cómo te trató la empresa? ¿Obtuviste una escritura de garantía que encuentras segura de obtener una garantía? ¿Y cuánto tiempo usaste el auto? ¿Vendiste el auto para que puedas hacerles todas estas preguntas y simplemente decirles que va a ser anónimo? Solo vas a hacer la investigación para futuros compradores para que puedas construir este sitio web de la manera correcta si esa persona quiere volver y comprar aún más núcleos o para futuros compradores en el futuro que van a venir. Puedes hacer esto con por ejemplo cinco de sus clientes si están interesados, puedes decir que esto va a ser completamente anónimo. Nadie va a saber de ti solo vas a querer saber de información de por qué decidiste comprar con esta empresa? ¿Qué le atrajo de esta empresa? Y ¿cómo encontraste tu experiencia? Eso es lo que quieres aprender de tus clientes. Y luego cuando te muevas más, esto es lo que vas a conseguir una nueva persona de usuario. Entonces como mencioné anteriormente, sabemos que estas personas son 45, sabemos que son hombres, sabemos que el dueño de su negocio, lo que mencionamos hasta el momento que nos enteramos en LinkedIn, que nos enteramos en Instagram, ganan más de 100 K. Esto se puede ver fácilmente tomando qué hacer, poniendo dentro de las calculadoras del gobierno para que entiendas cuánto dinero posiblemente están ganando. O incluso mejor. Este país, que es Serbia. Pero puedes conseguir esto en casi todos los demás países. Se puede acudir al órgano de gobierno que en realidad expide licencias a las empresas para que estén operativas. Entonces, si quieres abrir un negocio, primero tienes que obtener una licencia del gobierno y de ellos básicamente para darte luz verde para que puedas abrir un negocio y por lo tanto puedas rastrear nuestros negocios reales, siguen operativos o los difuntos RT cierran para que pueda rastrear toda esa información en sitios web gubernamentales y los ingresos. Se puede ver el ingreso que es un dato disponible públicamente porque se puede ver cuánto dinero ganaron en los últimos 12 meses, por ejemplo, ¿tienen algún préstamo permanente? Para que puedas entender un poco con cuánto dinero estás tratando en esta empresa. Y por lo tanto, se puede deducir ¿cuánto dinero puede ganar un CEO o puede ganar un empresario? Y como dije, puedes encontrar en LinkedIn, puedes encontrar posibles salarios para estos puestos. Así que realmente puedes llegar a esa cifra. O mejor aún si tu cliente sabe cuánto dinero ganan sus clientes y cuánto dinero están dispuestos a gastar aún mejor, más poder para ti. Puedes dejar de deducir eso fácilmente, y puedes poner esto en. Una vez más, esto es realmente importante porque el tono general y el idioma del sitio web quieren estar dirigidos a estas personas en lugar de a todos los demás. Entonces por eso queremos formatear esto de tal manera. Estado, casado. ¿Por qué lo sabemos? Por Instagram, una vez más, ubicación Belgrado, Serbia es lo que nos dijeron nuestros clientes. Stefan es el dueño del negocio de Belgrado, Serbia. Disfruta cenando con sus amigos y viendo programas de YouTube sobre autoayuda y mejora. Todo esto se puede ver en su feed de Instagram y sus historias. Es padre de dos hijos y apasionado de la arquitectura los fines de semana, le gusta explorar y salir de la vida marina. Lo que más le apasiona de nuestros autos y le gustan los deportivos de lujo, principalmente por su apariencia y sonidos. Y entonces tenemos necesidades mejor manera de buscar un auto usado en línea. Manera más fácil de entender el auto. Se ve en un enfoque más fácil para indagar sobre vehículo. Todas estas cosas las mencionamos y todas estas cosas es lo que nos dijeron nuestros clientes, que su cliente les dijo. Y por lo tanto, entendemos lo que queremos construir aquí mismo. Frustraciones, los sitios web están demasiado concurridos y confusos, lo que voy a mostrarles en el análisis competitivo, que va a llegar un poco más tarde. Los sitios web no son aptos para dispositivos móviles, lo que una vez más es un gran no-no en la época actual. Oye, solo publicando sin precio, yo a lo que sea me estoy comprando una luz para ver el precio de inmediato. Porque ¿cuál es el punto de venderlo? Si no quieres mostrarme el precio, ¿cómo puedo comprarlo? Esto vamos a querer que te pongas en contacto con ellos y que te estafen en alguna otra compra. No quieres eso, quieres total transparencia. Entonces tenemos el uso de las redes sociales aquí mismo. Entonces la mayoría son Instagram y LinkedIn. A lo mejor podría poner YouTube aquí mismo, pero Facebook y Twitter están en algún punto intermedio. Entonces tenemos la cotización y tenemos las marcas favoritas, que en realidad no cambié de la plantilla que ya te mostré. Pero crucialmente aquí tenemos esto porque nuestro cliente nos dijo que les gusta el sitio web de Cardboard. De hecho tomé el color del sitio web de Cowell, que te voy a mostrar en solo un segundo y ponerlo ahí. Tan me inspiró. Entonces entiendo que les gusta el azul y quiero presionar por este color azul aún más. Y te voy a mostrar en uno de los futuros videos cómo hacer eso y ¿por qué es eso importante? A continuación, pasamos al análisis competitivo. Y les voy a mostrar un análisis competitivo para este negocio. Vamos a comparar a estos competidores, tanto directos como indirectos. Y para entender un poco mejor, ¿cuál es la fecha? Genial, lo que hicieron tan bien para que podamos seguir adelante y corregir esos errores en nuestro futuro diseño. Entonces te veré ahí. 129. Análisis competitivo: Pasemos ahora al análisis competitivo y voy a mostrarte algunos competidores directos e indirectos para nuestra marca. Y voy a señalar algunas cosas buenas y algunas cosas malas que los dos que nos llevaron lloran. Y aquí tenemos dos sitios web y te voy a mostrar primero así y luego lo vamos a agrandar un poco porque primero lo primero es lo primero, este competidor directo no responde. Se puede ver eso aquí mismo. Entonces, si estrecho aún más este sitio web, puedes ver todo el problema aquí mismo. Así que puedes imaginarte cuando vas a tu dispositivo móvil y te desplazas hacia la izquierda y hacia la derecha, en realidad tienes que pellizcar y hacer zoom y moverte, algo así como a mediados de la década de 2000. Entonces este texto no está centrado entonces de esta manera. Así que tenemos un gran problema. Entonces veamos eso primero porque esta es la plataforma real que te dije, que hay un competidor indirecto. Y están vendiendo en la plataforma. No están vendiendo en su propio sitio web, pero esta empresa tiene su propio sitio web. Entonces antes que nada, tienen casa en una obligación, vamos a deshacernos de ella porque la mayoría de estas personas, sobre todo porque son dueños de negocios, tienen experiencia con los negocios en línea. No van a dar click en el logo para volver a casa. Entonces tenemos ofertas. Déjame tratar de traducir esto al inglés. Entonces va a ser un poco más fácil de entender para ti. Ahí vamos. Entonces tenemos casa como mencioné, tenemos oferta vehicular. Por lo que hay vehículos actuales, vehículo a la llegada. Entonces esos son Cusco reales recién comprados y están en transporte, por ejemplo financiamiento, que necesitamos galería, que no necesitamos porque la oferta de vehículos nos va a ofrecer eso y vamos para poder ver todas las imágenes allí. Entonces tenemos la página de contacto que necesitaremos. Entonces tienen esta agradable sección de héroes no se trata de marca, se trata de rendimiento. Pero no sabemos si por ejemplo sabes, de autos, sabrás de inmediato que se trata un grupo de indicadores Porsche 911 Turbo. Y ¿vendes solo empuja o vendes otras marcas? Dices que no se trata de marca, pero ¿por qué me venden una marca específica de fondo? Y lo vas a ver en apenas un segundo. Tienen mucho de esta marca en su página de Instagram y en este sitio web. Entonces eso no lo entiendo realmente. Entonces tenemos vehículos de llegada y tenemos oferta vehicular. Y se puede ver que estas dos cajas no están alineadas y no vemos ninguna imagen detrás. No vemos ninguna opción de cobertura disponible. Entonces tenemos las mejores ofertas. Entonces tenemos Porsche, Porsche, Porsche, que acaba de mencionar. Entonces no se trata de marca, pero vamos a mostrarles todas las porciones que tenemos. Entonces vamos a autos por qué esta sala de exposición Así que contamos con vehículos certificados, prueba de manejo, y entrega gratuita. Entonces, ¿necesitas financiamiento? Estamos aquí para ustedes, nuestros socios. Bien. Entonces tenemos esta imagen por cualquier motivo, visítanos y conduce tu nuevo auto. Por lo que tienen dirección de correo electrónico y número de teléfono. Entonces tienen el mapa, lo cual es genial. Y tienen este simple pie de página al final. Así que bastante simple, y me gusta mucho, pero simplemente no entiendo realmente todas estas diferentes secciones. Pero no importa. Veamos todos los autos. Entonces tenemos un montón de Porsches y tenemos BMWs. Entonces tomemos algo, tomemos un Porsche. Entonces tenemos puntos de vista. Entonces si hago clic ahí, me va a llevar y vamos a ir de hecho a esta página anterior. Entonces tenemos visitantes y ellos no tienen contacto aquí. Me gustó que no en la página de inicio. Entonces no importa. Sigamos adelante. Entonces lo que tenemos aquí es que tenemos reservar un auto, tenemos igual. Pero de qué sirve, si no tengo un perfil donde pueda ver todos estos lagos, está bien donde realmente pueda contactarte a través de estas redes, creo. Entonces, si comparto esto en Twitter, es que va a abrir compartir. Sí, así que va a abrir un widget para compartir. Bien, en lugar de widget de contacto. Entonces me gusta este auto, me pondré en contacto contigo a través de Twitter y daré click ahí. Y en realidad lo va a compartir como un tuit. Bien, probablemente lo mismo para WhatsApp y Pinterest. Entonces tenemos esta galería. Entonces, si hago clic en la galería, se abre bastante bien. Entonces tenemos todos estos puntos en la parte inferior, lo cual está bien. Pero una vez más, este diseño es un poco reducido. Así que tenemos 2467 imágenes aquí. Quizás no sea el mejor diseño, pero lo exploraremos un poco más tarde. Entonces sólo tenemos un montón de textos. Contamos con descripción de información general. Entonces está dividido bastante bien en él, manera bastante fácil de entender, pero no es demasiado visual. Tal vez. En nuestro caso, podemos dividirlo en diferentes secciones. Y eso lo vas a ver en el segundo sitio web. Y en lo que TRB al alza, que voy a mostrar, que no está ahí en absoluto, sino el sitio web de inspiración para nuestro cliente. Y entonces tenemos toda esta información. Y finalmente, tenemos las mismas dos secciones aquí mismo en la parte inferior. Entonces esa es nuestra corriente. Y si vas al financiamiento, lo que vemos, las mejores tarifas simples, rápidas, de donde viene más información, así que ni siquiera tienen esta página. Bien, entonces este es el competidor directo. Veamos ahora al competidor indirecto. Si me desplazo un poco más para ocultar esto aún más, ahí vamos. Entonces tenemos la plataforma, como mencioné. Entonces este no es su sitio web. Entonces nos están dando toda esta información. Así que permítanme tratar de traducir esto al inglés también. Ahí vamos. Entonces dos años de Negocios, Sara marcas de vehículos, vehículos de Serbia. Entonces no son importadores, son directamente de Serbia. Posibilidad de comprar a crédito o préstamo, lo que te pueden ofrecer. Entonces una vez más, solo entiende que esta es una plataforma y voy a mostrar esto. Entonces se llama autos usados o Paulownia Toby Lia, si traduzco al inglés, ahí tienes. Para que puedas ver que todo esto es de variedad de vendedores de negocios diferentes. Entonces todos estos vendedores, y luego tenemos más vendedores y Marcellus, solo imagínense Amazon para autos. Este competidor está ahí justo en esta plataforma, así que este no es su sitio web, solo están vendiendo aquí. Puedes navegar por diferentes categorías, lo cual es genial, pero nuestro cliente no tiene demasiados autos. Simplemente tienen por ejemplo seis u ocho autos, así que no necesitamos ninguna opción de búsqueda. Solo necesitamos una página donde podamos presentar todos sus autos porque suelen vender bastante rápido. Y se puede ver en esta página web de la competencia, si nos desplazamos aquí, entonces vehículo ofrecen 2467 autos. Entonces no necesitas una opción de búsqueda para siete autos, pero sí necesitas una opción de búsqueda, por ejemplo, si tienes 20 marcas diferentes, si tienes 100 tarjetas, si tienes todas estas cosas, para que es donde lo necesitas. Una vez más, esto es desde una plataforma, así que sólo voy a abrir un auto. Tienen muchas fotos diferentes aquí mismo, lo cual es genial. Y lo primero, primero, de un vistazo, se puede ver el año en que se produjo el automóvil. ¿Qué tipo de auto es? ¿Cuántos kilómetros ha recorrido? La transmisión? Entonces tenemos el tipo de motor. Tenemos ¿cuántas pulgadas cúbicas tiene? Entonces tenemos caballos de fuerza y tenemos ¿qué tipo de vehículo es? ¿Tiene dos puertas para esas fibras? Entonces toda esta información es realmente útil aquí mismo. No tenemos ninguno de estos. Y en realidad esta sección se ve, estuve pensando por un segundo, tal vez sea sensible pero en realidad no es solo va de izquierda a derecha. Así que pasemos a aquí. Y aquí podemos ver el seguro. Déjame traducir éste también para que te resulte más fácil entenderlo. Entonces tenemos precio de registro, luego tenemos la calculadora de seguros, tenemos acuerdo de compra, todas estas cosas las cuales son proporcionadas por la plataforma. Una vez más, no puedo insistir lo suficiente en esto. Y me gustó mucho este diseño. Creo que es bastante bueno. Y cuando haga clic, me va a mostrar a pantalla completa para la imagen, lo cual está completamente bien. Tenemos la x, así que solo el diseño típico, y luego tenemos información general. Entonces considerando esto en comparación con esto, creo que esto se ve mucho mejor porque va a dividirlo en ciertas secciones porque esta plataforma está en el negocio desde hace 20 años, , saben qué hacer porque están recopilando datos desde hace más de 20 años. Entienden a sus clientes y saben qué tipo de información es realmente importante poner dentro de la página de venta. Entonces tienes más información sobre el modelo. Quizás pueda haber unos videos de YouTube, tal vez. Entonces tenemos seguridad, contamos con equipo. Observe cómo se queda esto, clavado en la parte superior en todo momento lo cual me gusta mucho mientras estoy en esta web, si la agrandé, si nos desplazamos hacia abajo, no tenemos ningún botón, simplemente se mueven hacia fuera de la página. Si vuelves enseguida a aquí, y si soy capaz de escalar esto ahora sin romper mi computadora, intentemos dibujar esto así. Porque estoy ejecutando todo este software de grabación, Por eso ves esta falla negra negra. Contamos con equipo, tenemos el estado. Entonces, ¿el actual nuevo es el auto usado? Dónde se encuentra como historial de servicio, lo cual es sumamente importante para los autos caros. Entonces tenemos descripción. Entonces tal vez qué, ¿qué tipo de equipo tiene el auto? Y tal vez algún equipo adicional. Se puede ver que aquí hay mucho y siempre es el caso de los vehículos Mercedes. Y luego tienen toda esta descripción en la parte inferior. Algunos, en mi opinión, necesitamos algo como esto, pero en un estilo más minimalista porque una vez más, no necesitamos toda esta información porque íbamos a tener página separada para los préstamos para autos y ellos van a poder ver esa información. Y solo queremos que puedan ponerse contacto con nosotros con bastante facilidad para indagar sobre este auto específico y entender más al respecto y ver más información al respecto y reservar una prueba de manejo. Porque recuerden, Ese es nuestro objetivo incrementar las reservas de pruebas de manejo en un 10% en los próximos dos meses. Eso es lo que queremos y por eso queremos crear un diseño bonito, hermoso, tal vez con una tarjeta como esta, pero tal vez se pueda pegar a medida que bajamos. Se puede ver aquí es justo ahí. Y si empiezo a bajar, tenemos esta información aquí, pero no tenemos esta información. Así que haz clic para ver el número y enviar un mensaje al vendedor. Solo tenemos esta información que comparten redes sociales reportar el anuncio y luego agregarlo a me gusta y tenemos el precio. Pero en mi opinión, esto, incluso para este enorme sitio web, mi opinión es que esto es mucho más importante. Entonces esta información. Así que solo tenlo en mente. Quiero ver el precio, pero ¿por qué no puedo ver el precio aquí? Por qué no puedes contactarte vía, no puedes enviarte un mensaje o llamarte directamente desde aquí, especialmente en un dispositivo móvil. Te puedes imaginar, vamos a escalar rápidamente esto un poco. Ahí vamos. Y luego déjame escalarlo desde este lado y pensar, sí, ya puedes ver lo abarrotadas que pueden llegar estas secciones. Y luego tenemos estas pestañas que no se abren por alguna razón, lo que sea. Pero solo puedes imaginar que si funcionan, cuando abren toda esta información, solo veas esto. Y todo este tiempo cuando estás desplazándote en tu dispositivo móvil, solo tienes esta información. Bien, estoy bien. Quiero adquirir este vehículo. A mí me encanta. Está bien. Déjame llamarlos. Tendrás que desplazarte hasta arriba solo para poder verlo. Me gustó cómo hicieron el responsive porque su navegación es simplemente enorme, porque este sitio web es bastante enorme como decían. Así que pongámoslo aquí mismo, y sigamos adelante aquí mismo. Para que veas ¿cuántos de estos tienen? Entonces tienen mucho por dentro. Ahora, solo necesitamos algo como esto. Así que con bastante facilidad, bastante simple porque nuestra marca es bastante fácil. Por último, después de toda esta información y entendemos lo que queremos, entendemos lo que necesitamos un poco mejor ahora. Entonces vemos bien el auto, que es el sitio web que inspiró a nuestro cliente. Y aquí es donde tomé ese color azul y cómo lo hice. Es solo hacer clic derecho, llamar a un pico desde los estilos de página. Haga clic, y ahí va. Entonces, si quieres, puedes navegar por este pico de color. Es lo que se conoce como selección de color o selección de color lo que sea. Y entonces aquí vas a ver todos los colores que se usan en el sitio web, pero no voy a hacerlo aquí. Voy a ir a los autos usados, por ejemplo, pero en realidad, no, vayamos a los autos nuevos. Y veamos algo que es popular. Lo que sea. Tomemos este Hyundai Tucson ofertas. Ahí vamos. Y aquí tienes este diseño de tarjeta, que yo estaba mencionando. Ahí vas. Pero lo que en realidad quiero mostrar es esto, creo que está justo aquí, ahí vamos. Tan populares críticas en profundidad. Entonces cuando empecé a desplazarme, se puede ver que esta sección de la página me sigue hacia abajo con información sumamente importante, que es lo que dije. Así que solo puedes ver cuánta información tengo aquí mismo a la izquierda de la página. Pero en esta barra lateral derecha sigue pegándose a la parte superior, sin importar dónde esté en la página, toda esta información es de fácil acceso para mí. Puedo entenderlo fácilmente mientras estoy aquí, si empiezo a desplazarme hacia abajo, se ha ido. Especialmente en dispositivo móvil. Aquí es la misma historia. Entonces, si nos desplazamos todo el camino hacia abajo, simplemente se detiene aquí mismo donde la información y para que puedas ver está haciendo clic y desapareciendo porque ahora nos estamos moviendo a las otras partes del sitio web. Así que eso me gustó mucho. Y en términos de color, una vez más, puede hacer clic con el botón derecho del ratón en la selección de colores de estilos Y esto es completamente gratis por cierto, puedes instalarlo como una extensión de Chrome. Y entonces aquí puedes ver que nos muestra estilos RGB, pero queremos textiles porque es mucho más fácil trabajar con ellos. Simplemente puede seleccionar este color azul, copiarlo y pegarlo directamente en Adobe XD. Y ahí tienes. Ahora lo tienes y ahora puedes ver súper fácil, esto es para trabajarlo. Entonces ahora que conocemos toda esta información, ahora que sabemos lo que queremos, lo que no queremos, lo que nos gusta, lo que no nos gusta. Sabemos lo que les gusta como cliente, sabemos a qué tipo de color podemos apuntar. Ahora que podemos empezar a apuntar a flujos de usuarios? Y ahora podemos pasar a tal vez estructurar los caminos que nuestros usuarios van a tomar cuando aterricen en nuestro sitio web y lo que van a hacer a continuación. Así que pasemos a Adobe XD y trabajemos con algunos flujos de usuario. 130. Flujos de usuario: En esta lección, vamos a trabajar con flujos de usuarios porque este sitio web va a ser bastante sencillo en términos de navegación, en cuanto a páginas. No van a ser muchos de ellos. Entonces vamos a superar esto un poco más rápido que si fuéramos a hacer esto en una página un poco más compleja. Así que vamos a saltar a XD y estás familiarizado con esta plantilla si viste las partes anteriores del curso. Porque ya te mostré esta plantilla y te di esta plantilla. Asalto. Tenemos punto de entrada, tenemos el blanco, tenemos los escalones, tenemos todos estos elementos diferentes. Y si sigo adelante y selecciono esto, tenemos Open Sans como fuente. Pero en realidad voy a seguir adelante y usar Poppins para la fuente, por ejemplo así que veamos, tal vez podamos. Vamos aquí. Así que déjame seguir adelante y seleccionar estos elementos son bajo impacto Control C o Comando C en una Mac. Déjame cambiar a un documento XD en blanco, que es este Control o Comando V para pegarlo. Y voy a seguir adelante y seleccionarlos aquí mismo y golpear en realidad no, vamos, veamos, pasar a donde es componente principal. Ahora, volvamos a cambiar a este archivo y cerrarlo. Y ahora vamos a guardarlo en mi escritorio, por ejemplo así que sigamos adelante y nombremos esto nuestro flujo de usuarios. Ahí vamos. Entonces lo primero es lo primero, vamos a agregar realmente el componente principal aquí mismo. Y aquí, quiero tomar ese color azul que elegimos. Entonces vamos a seleccionarlo para el relleno, dale ese color. Y voy a llamar a este color por ejemplo principal, azul. Y eso también me gusta. Sigamos adelante y deshagámonos de esto. También me gustaron esos otros colores. Entonces para el auto mientras sitios web, así que si te llevo ahí, ahí vamos. Entonces cuando flojo, tenemos este color más claro. Entonces lo que puedo hacer es quizás flotar y luego hacer clic derecho aquí mismo y pico coloreado y tomarlo de ahí si es posible. O si no, tal vez podamos ir a otro lado porque probablemente lo usen en otro lugar. Se puede ver aquí mismo para el color del enlace, se ve bastante similar. Entonces tal vez podamos encontrarlo. Aquí está en su logo. Entonces puedes tomar el logo, haz clic derecho en algún lugar por aquí, y veamos. Haga clic en el pico de color exterior. Ahora solo me da este color. Entonces ya tomé este color, pero puedes hojearlo. Se puede abrir en un nuevo documento. Incluso puedes entrar en CSS si quieres. Toma ese color. Y yo solo voy derecho adelante y voy a dar clic aquí mismo, clic aquí, y luego dar clic aquí para pegar este color. Ahora puedes ver que es una diferencia menor, pero aún así vamos a llamarlo color hover porque quiero usar ese color para nuestros enlaces, por ejemplo y para nuestro botón hover color un poco más tarde. Entonces tenemos el punto de entrada, tenemos la acción, tenemos el proceso. A lo mejor podemos dejar esto, pero en realidad voy a tomar una decisión, aplicar color principal al fondo. Ahí vamos. Y todos estos, realidad voy a tomar el color estacionario. Ahí vamos. Y por todos estos, veamos, esta es la frontera, la frontera y la frontera. Apliquemos esto como un color de borde. Seleccionemos esto, apliquemos esto a nuestro color principal así, y este sea el color hover. Ahí vamos. Seleccione este para que sea nuestro color de borde, luego este, y este para ser nuestro color. Así como este clic derecho aplicar acuarela. Esto también va a estar flotando. Y vamos a deshacernos de la caldera aplicando aquí el color del borde. Para que veas lo súper simple que es esto cambiar. Entonces lo que vamos a hacer es que vamos a tener la entrada o justo por aquí y no preocuparnos por el tamaño del tablero de arte. Voy a deshacerme de él en sólo un segundo y reducirlo un poco. Entonces si te llevo de vuelta aquí y me aseguro de que estamos centrados y 20 por ejemplo tenemos el punto de entrada, que es lo que aterriza el usuario en nuestro sitio web. Y vamos a alinear esto un poco. Entonces vamos a golpear Shift y flechas. Entonces tal vez 40.40 solo para ser un poco más precisos. Entonces una vez más, tenemos la entrada y luego vamos a tener, veamos, veamos, veamos. Tal vez proceso. Entonces llamemos a esto, digamos Examinar autos. Y en vez de esto, déjame limitarlo a este lado. Entonces cuando escriba aquí mismo, navegue por los autos, ahí vamos. En la página de inicio, entonces tendremos la acción. Entonces así, ahí vamos. Todavía tenía 40 años, estamos al tanto de 20. Ahí vamos. Encantadora. Entonces vamos a ver. Tal vez haga clic para ver todos los autos, buscar autos, o tal vez un Vieux Carre. Vieux Carre, que es el auto en cuestión. Entonces tal vez solo quieran ver la información general sobre el auto en sí. Entonces tenemos al Vieux Carre. Entonces voy a duplicar esto una vez más posicionado aquí mismo, Vieux Carre. Y a lo mejor toman una decisión. A partir de aquí, iremos por dos vías separadas. Entonces uno va a estar justo aquí, entonces aquí mismo, así que el turno 12 y luego Control de Cambio D, comando D, derecho, los dos, entonces tenemos una decisión, entonces tenemos la acción. Y veamos qué podemos hacer. Navegar por los autos. A lo mejor podamos darle al control D en éste. Ahí vas. Contactos, distribuidor. Ahí vas. De los contactos de deuda, podemos, por ejemplo golpear Control D aquí mismo, darle la vuelta a esto. Ahí vamos. Asegúrate de que esto esté en el centro. Turno. Uno a la acción es de estos contactos. Justo aquí. Veamos, reserve una prueba de manejo. Yo creo. Entonces. Eso es lo que queremos. Queremos que puedan reservar una prueba de manejo o podemos hacer otra cosa. Entonces esa es una opción cuando contactaron al distribuidor. O pueden ver una decisión. Quizás en realidad podamos mover todo esto hacia abajo y te mostraré por qué en tan solo un segundo. Entonces Vieux Carre, porque aquí tendremos información adicional. Entonces, vamos a duplicar esto. lo contrario, dale la vuelta, asegúrate de que estamos en un centro. Asegúrate de que somos 20. Ahí vamos. A partir de aquí. Ahora vamos a mover todo esto aún más para que podamos escucharte más. Espacio. El Control D se asegura de que estemos en un centro. Ahí vamos. A partir de aquí lo que haremos es sellar préstamos, por ejemplo ver préstamos. Ahí vamos. Entonces de los préstamos, entonces pueden seguir adelante y Control D. Tal vez podamos rotar esto a más o menos por aquí, aquí, en el centro. Ahí vamos. Entonces posicionaremos esto para estar aquí. 20. Voy a golpear una extensión del suelo para que se encuentre aquí mismo. Ahí vamos. Y luego golpear el control D o reducirlo o rotarlo. Así se asegura de que estoy por aquí. Encantadora. Tomaré este girado lateralmente para colocarlo aproximadamente en el centro. No tiene que ser todo perfecto, tal vez más o menos por aquí. O incluso mejor. Podemos tomar esto y tomar una línea de cuadrícula si solo quisiéramos ser perfectamente precisos. Bueno, de verdad cojo esta flecha, está en el centro. Ahí vas. Posicione esto, posición, esto hasta que se reúna entonces posicione esto aquí mismo. A ver, no estamos aquí. Ahí vamos. Y si deszoom un poco, zoom aquí, estamos ahí. Entonces lo que hicimos aquí mismo es deshacernos de esta guía para que no nos moleste demasiado. Entonces Wendy navega por los autos, pueden hacer clic para ver auto individual. Ese es Vieux Carre, aquí mismo. Desde Vieux Carre, pueden hacer clic en ver préstamos, que puede ser un botón, por ejemplo, que los puede llevar al discurso del préstamo y tienen que tomar una decisión. Entonces tal vez podamos mover esto aquí en realidad. Entonces tienen una decisión. A ver, 21 a dos a cuatro, tal vez 20. Ahí vamos. Y esto va a estar realmente aquí. Ahí vamos. Y esto puede ser un poco reducido a aproximadamente por aquí. Vamos a mover esto aquí. Entonces 14, ve y una vez que entra, Eso es todo. Entonces una vez más, una vez que realmente ven el auto, tienen que tomar una decisión. O se pondrán en contacto con el concesionario sobre ese auto específico o verán los préstamos. Entonces, cuando el distribuidor de cantidad, pueden reservar una prueba de manejo o pueden ver los pulmones contactados con el distribuidor y luego reservar una prueba de manejo. Y estoy de acuerdo en los términos y condiciones del préstamo ahí mismo y entonces o pueden tomar una decisión. Pueden decir por ejemplo Ver otros autos. Y entonces esa puede ser su decisión desde esta página en particular. Y pueden o bien ir aquí para navegar por otros autos o pueden ir a la página específica sobre vista o autos. Entonces podemos estructurar esto de muchas maneras diferentes. Entonces esta página de Vieux Carre en realidad va a ser creada en CMS, en Webflow. Entonces crearemos una sola página y luego la duplicaremos una y otra vez y poblaremos con el contenido de ese auto específico. Pero en este caso, lo que podemos hacer tal vez es llevarlos a ver otros autos para que puedan navegar por los autos. Entonces tal vez incluso podamos combinar los dos y crear algún tipo de widget en la parte inferior de la página donde no tengan que ir a la página específica y cargar una página específica cada vez. Quizás puedan ver autos relacionados al final de la página. Así que podemos ver aquí mismo. Entonces C, autos relacionados en la parte inferior de esa página. Ahí vamos. Y luego a partir de entonces, entonces podremos dar click para ver un auto. Por lo que una vez más, no los llevará a esta página y desperdiciará la velocidad de carga y cargas de tiempo. Simplemente los llevaremos a la misma página exacta, pero para una tarjeta diferente. Así. Sexualmente vamos a duplicar este tal vez se asegure de que estamos en un centro aquí. Ahí vamos. Y 20 por igual. Entonces, bien, entonces voy a seguir adelante y seleccionar esta flecha, abrir los elementos de ella, luego seleccionar esta flecha, pegar los elementos es sitio. Y entonces sólo voy a seguir adelante y borrar esta. Elimine este, y asegúrese que estos dos se reúnan por aquí. Este se encuentra justo por aquí. Yo creo. Solo da un codazo más. Ahí vamos. Y ahora que lo he hecho, déjeme esconder éste. Haga clic en este, y muéstrelo para que pueda ver lo que hice. Simplemente lo dupliqué y lo coloco aquí mismo. Y en realidad no tenemos un no en este caso. Pero si lo hicimos, sólo los llevaremos a una de estas páginas diferentes. Así que en realidad reservar una prueba de manejo es nuestro destino final. Pero contactos distribuidor puede ser, puede ser eso. Así que usemos un libro, una prueba de manejo para ser nuestro destino final. Entonces Control D aquí mismo. Vamos a llamarlo salida. Así. Voy a deshacerme de estas flechas porque no las necesito en este caso, Control D, y se asegura de que estemos en un centro aquí. Ahí vamos. Por alguna razón no estamos en esta. Bien. Seleccionemos estos dos. Ahí vamos. Dos, ahí vamos. Encantadora. Asegúrate de que estos estén bien posicionados y que estemos 20. Y finalmente, ese es nuestro flujo de usuarios. Entonces así van a fluir nuestros usuarios por nuestra página. Entonces, vamos a empujar esto para que esté a los 40. Y voy a deshacerme del espaciado, por ejemplo 40, 05:00 A.M. va a moverlo hasta aquí para que veas, no tienes que usar tamaños específicos para tus tablas de arte. Puedes ver cómo puedes ajustarlos fácilmente y aplicarlos a diferentes tamaños. Pero tenemos 40 por todas partes, como puedes ver aquí mismo, este es nuestro flujo de usuarios. Así que sigamos adelante y lo revisemos rápidamente una vez más. Vamos a deshacernos de esto. Una vez más. Habremos dejado que me acabe de ver lo que hice. Haz el duplicado todos ellos arriba. Entonces veamos eso una vez más. Entonces tenemos el punto de entrada, que es la página de inicio donde nuestros usuarios van a pasar de la deuda. Pueden navegar por los autos. Esto puede ser ya sea en una página de inicio o en una página separada. A partir de ahí, pueden dar click en el auto y ver ese auto para más información. Y a partir de ahí, pueden tomar una decisión. Pueden ver un préstamo y ver algunas opciones para los pulmones que tienen, por ejemplo qué compañía regala préstamos y otros términos y condiciones de búsqueda pueden ser y poner toda esa información en. A partir de ahí. Pueden contactar con el concesionario o pueden contactarte directamente, quiere ver el auto y les gusta. Entonces tal vez quieran saber más información es que todavía está disponible para la venta. ¿Está disponible para una prueba de manejo? Si es así, cuándo está disponible para prueba de manejo y todo distinto. O podrían ver autos relacionados. Si no les gusta el auto específico de deuda de ellos, pueden hacer clic en esa tarjeta o en varias tarjetas. Vamos a tomar sobre el diseño en un poco. Y luego Vieux Carre para más información sobre esa tarjeta que realmente les gusta si contactan al distribuidor. Una vez más, nuestro principal objetivo aquí es conseguir que reserven una prueba de manejo. Y esa va a ser nuestra estrategia de salida porque la prueba de manejo en realidad va a ser la etapa final de este proceso donde en realidad reservan una prueba de manejo. Y en realidad sabemos que reservaron una prueba de manejo y eso es lo que realmente queríamos hacer. Así que aquí tenemos todos estos componentes a medida que construimos esta página a lo largo de este curso, en realidad voy a guardar un archivo, archivo. Y cuando realmente lo consigas, se va a terminar obviamente porque estoy grabando este curso ahora mismo. Pero podrás seguir paso a paso. Te voy a dar una información completa. Entonces puedes usar eso como referencia. Pero realmente te animo a que construyas las tuyas a mi lado a lo largo de este curso. Entonces como dije, esta es sólo la primera parte. Se puede ver que tenemos este flujo de usuarios. Ahora vamos a pasar a los wireframes de papel en la siguiente lección. Y voy a escanearlos y ponerlos aquí mismo para una referencia más fácil. Entonces, como mencioné, los wireframes de papel es lo que viene a continuación. Voy a usar ese trozo de papel de punto negro, que ya mencioné en el curso. Pero no te preocupes por ello. Si no lo tienes, puedes usar cualquier trozo de papel viejo. Entonces te veré ahí. 131. Arquitectura de contenido: En el último video, dije que vamos a pasar a wireframes de papel, y de hecho pasaremos a wireframes de papel en el siguiente video. Pero en este video, quiero mostrarte otro enfoque que se llama Arquitectura de contenido, donde en realidad planeas qué tipo de contenido va a ir a cada página, lo importante que es y cómo lo posicionamos en la página para ponerlo en la parte superior, para ponerlo al fondo. Vamos a lidiar con eso en este video. Y en realidad no necesitas hacer esto específicamente en este orden específico. Puede pasar directamente a wireframes en papel si ya tiene en mente el plan de arquitectura de contenido. Pero si no lo haces, todavía quería mostrarte este método porque creo que puede ser beneficioso de vez en cuando dependiendo del proyecto en cuestión. Especialmente en proyectos más grandes donde tienes múltiples piezas de contenido y bloques de contenido. Entonces, es mucho más fácil e importante abordarlo de esta manera cuando realmente planeas la arquitectura de contenido en lugar de no hacerlo. Si tu cliente no tiene contacto con la conferencia, entonces también puedes cobrarle por esto. Pero la mayoría de ellos tendrán al menos alguna idea de qué tipo de contenido se colocará en las páginas y dónde ¿qué les gustaría presentar? Cuál es su oferta principal, cuál es su oferta secundaria, oferta terciaria, y así sucesivamente y así sucesivamente. Lo que es más importante, lo que es menos importante. Para que puedas estructurar todo eso usando la arquitectura de contenido. Entonces aquí estamos en Adobe XD y esto va a ser bastante sencillo. Así que en realidad voy a golpear un en mi teclado, por ejemplo, para uno de estos aeropuertos. Y tomemos 13, 66, lo que sea. Y llamemos a esto arquitectura de contenido. En realidad, llamémoslo Sitemap Slash Arquitectura de contenido porque va a contener tanto dentro como , vaya, yo no quería hacer eso. Vamos a deshacernos de éste. Y para éste, lo que en realidad quiero es reemplazar esto como Poppins. Entonces, escojamos Poppins. Ahí. Ahí vamos, porque últimamente me gustan mucho los Poppins. Y con frecuencia es fuente. Funciona en Webflow, en trabajos vistos revista, fuentes de Google, por lo que funciona bien en la web. A mí me gusta cómo se ve, así que vamos a reemplazarlo aquí. Ahí vamos. Y esto será mucho más sencillo si creé unos componentes separados para estos, en lugar de simplemente tomar componentes existentes, pero no importa lo vamos a tratar. Entonces Poppins, donde estamos. Entonces aquí Poppins, ahí vamos. Poppins reservar una prueba de manejo. Poppins y alfileres de salida. Bien, entonces lo que voy a hacer es tomar uno de estos. Así que elige en esta carta, por ejemplo pulsa Control C para copiarlo, y luego saltando aquí mismo, controla V para pegarlo. Fui a desagrupar componente y golpeé Control G o Comando G para agruparlo una vez más, llamarlo stack, llamarlo emparejamiento para tener existente el mismo, exactamente los mismos detalles. Entonces va a tener algo como la página de inicio para que veas cómo se escala muy bien. Entonces aquí vamos a aplicar algún color oscuro. No lo sé. A lo mejor podemos tomar algo que es casi negro. Tal vez. Ahí vamos, me gusta. Y si tomamos Q justo aquí y realmente me escondemos de la página, se puede ver que es 2122 a cuatro, que es casi negro. Y creo que este color puede funcionar bien para, digamos, encabezamientos. Así que vamos a darle un color de color oscuro, sombreado porque es bastante oscuro y tal vez usaremos un color más claro después. Y veamos, esto es blanco puro, así que vamos a darle eso. Entonces llamémoslo blancos puros. Y estoy usando guiones en mi estrategia de convención de nomenclatura. Puedes usar subrayados, puedes usar dos guiones, puedes hacer lo que quieras. Y por último, tenemos a Poppins como fuente aquí mismo. No voy a agregarlo aquí enseguida. Voy a agregarlo más tarde cuando empecemos a trabajar con nuestro diseño. Así que llamemos a esto, por ejemplo , hogar, nuestro elemento de navegación, elemento de navegación. Ahí vamos. Y luego desde la página principal, lo que podemos hacer es duplicar esto porque recuerden que tenemos préstamos o mejor aún, primero tenemos autos. Ahí vamos. Y dentro de los autos, vamos a agruparlos. Entonces Controla G y llámalos elementos de navegación y ponlos en una pila así. Y ahora puedo saltar dentro y puedo mover esto alrededor y posicionando más alto quiero o puedo seleccionar esto y vamos a darle 150, por ejemplo así. Entonces, una vez más, tenemos una página de inicio donde se va a estructurar toda nuestra información, luego tenemos autos donde se van a presentar todos los autos. Entonces si una deuda duplicada, lo que podemos hacer es poner un préstamo dentro donde mostraremos todos los diferentes préstamos que están disponibles. Y por último, cuando dupliquemos eso, vamos a darle por ejemplo contacto. Como que va a ser nuestra página de contacto. Y porque realmente no me gusta el espaciado, es bastante enorme. Vamos a reducirlo a cientos, y tal vez eso funcione por ahora. Entonces tomemos el texto de aquí, control C, control V para pegarlo afuera. Y porque no lo ves, déjame convertirlo en aquí para que veas lo bueno que es este color directo de aquí. Entonces, lo que vamos a hacer aquí mismo es obviamente que todas nuestras páginas necesitan nav. Así ubicación Navi. Ahí vamos. Y voy a darle a Control G para agrupar esto. Y voy a llamarlo texto o secciones. Aún mejores secciones porque cada sitio web tiene diferentes secciones. Lo voy a poner 40 y luego le a dar pila aquí mismo en esta dirección porque quiero duplicar este texto algunas veces para tener más opciones. Entonces Control D, y voy a dar esto para que sea, veamos, 20. Sí, creo que funciona bastante bien. Enseguida, lo que necesitamos en la parte superior es, ¿quién es esta compañía? Porque cuando estás de visita como nuevo visitante, ¿quieres entender quién es esta empresa? ¿Qué haces en una fracción de segundo antes de salir del sitio web? Entonces queremos ser inteligentes con nuestro ejemplar. Diles que estos son autos exclusivos. Están vendiendo autos, pero tarjetas exclusivas. Entonces, si no eres de este tipo de comprador, digamos que tal vez esto no esté bien, el sitio web para ti. O si eres este tipo de comprador que sabes que estás en el lugar correcto. Entonces tal vez podamos escribir quiénes somos, quiénes somos así, como un título. Entonces por debajo de eso, queremos decirles tal vez lo que hacemos. Entonces lo que hacemos, vendemos autos exclusivos y dislocaciones. Estamos tratando con estas marcas, tal vez algo así. Entonces lo que ofrecemos, esto puede ser en la sección con diferentes tarjetas en la página por ejemplo donde podemos mostrar diferentes autos de su oferta y la oferta original que tienen en el momento. A lo mejor podemos poner algunos beneficios. Quizá nuestros beneficios. Tal vez podamos obtener detalles gratis o un lavado de autos o tal vez protección de cuerpo completo o juego extra de llantas o llantas de invierno son todas estas cosas pueden ser beneficios cuando compras un auto de ahí. Tal vez como vimos en ese sitio web de la competencia, tal vez podamos ofrecerles transporte gratuito desde la sala de exposición de autos hasta su lugar de vida real. Entonces tal vez eso pueda ser un beneficio. Y finalmente, tal vez donde estamos, donde estamos. Ponlo como mapa, así. Y luego por debajo de eso, tal vez contáctanos. Porque una vez más, es muy importante tener un formulario de contacto. Y por último, tendremos pie de página en la parte inferior de la página. Así que vamos a repasar rápidamente todo esto una vez más. Entonces tenemos navegación porque necesitamos navegación obviamente en cada página, quiénes somos, queremos presentarnos y queremos decirles qué hacemos. Porque queremos presentar nuestros servicios y no solo decir que vendemos autos exclusivos, sino ¿de qué manera lo hacemos? Tal vez establecer un poco de confianza. Este es el ejemplo perfecto donde vas a usar o los testimonios pueden ser cosas así, lo que ofrecemos. Entonces sí, ofrecemos estos autos exclusivos, pero tal vez mostrarles algunas características adicionales como tal vez tenemos garantía, tal vez tenemos como mencioné, ese servicio de pulido y cosas así, nuestros beneficios . Entonces, ¿por qué te elegirían a ti o a tus competidores? A lo mejor ustedes están ofreciendo garantía adicional, veamos, por un año adicional. Eso es bueno. Tranquilidad para tener eso porque voy a tener que pagar el servicio y cuesta tal vez. Entonces, ¿dónde estamos? Lo que una vez más es muy importante. Y podemos mostrar un mapa, Contáctenos y pie de página. Y tal vez podamos duplicar estas secciones a lo largo de nuestras páginas y navegación, obviamente va a ir a cada página. Entonces veamos, esto va a ser secciones home y luego Control D para duplicarlo. Voy a moverlo a más o menos por aquí. O mejor aún, puedo desagruparlos. Así que puedo alinearlos fácilmente hasta aquí y luego podemos arreglar esto en un poco. Mba puede mover esto aquí mismo. A lo mejor puedo mover esto aquí mismo para darnos un poco de espacio. A ver, 100 pixeles. Ahí vamos. Entonces sobre esto, lo que queremos es deshacernos de toda esta información. Entonces tendremos información que vamos a reutilizar a lo largo de nuestras páginas. Vamos a crear componentes en XD y en Webflow. Crearemos estos símbolos que podremos reutilizar exactamente la misma metodología y estructura como en XD, figma, como en cualquier otra herramienta que puedas reutilizar y no tienes que básicamente recrearlos todo el tiempo. Entonces lo que vamos a tener aquí es tal vez podamos tener promo info top. Veamos algo así como erróneamente para el baile de graduación cuando para algo así. A ver. Top promo en forma donde tal vez podamos promotor agregar un lema o algo así. Entonces lo que podemos hacer es crear stock. Y tal vez podamos poner ocho autos. A lo mejor sólo para demostrar que tienen ocho autos en este momento, digamos entonces podemos tener claro llamado a la acción. O en realidad no lo hacemos porque tenemos las acciones. A lo mejor podamos poner esta tarjeta por cada auto. Pueden hacer click en la tarjeta para acceder a la página completa, que te va a mostrar todos los autos, que es la decisión cuando tú, cuando realmente ves el auto. Entonces estamos aquí navegar por los autos, que son los autos en nuestra navegación, que es este de aquí mismo. Entonces, cuando hagas clic en Examinar autos, verás Ver autos. Entonces de cada uno de estos ocho, al hacer clic en cada uno de ellos, vas a ver esta página de ver carrito y a partir de ahí, lleva a cabo el proceso de decisión. Entonces tenemos vamos a ver, esto son las secciones de autos. Entonces tenemos préstamos. Así que sigamos adelante y hagamos clic en Control D. Duplicar eso. Posición, esto hasta aquí. Oh, lo siento. Veamos dónde estamos. Estamos viendo como vender, no importa. Entonces, una vez más, me voy a deshacer de éste. Voy a deshacerme de ésta porque estas son las secciones que estamos guardando y repitiendo. Así que aquí tendremos, por ejemplo, información de promoción superior. Pero diferente porque el anterior era para autos, este es para préstamos. Entonces, obviamente, va a ser un poco diferente a lo que podemos hacer es mostrarles nuestra oferta. Porque todos estos otros competidores tienen su propia oferta. Esta es nuestra oferta y por qué somos un poco diferentes y tal vez les mostramos a nuestros socios. Porque como mencionamos, inexplorado en breve, esta empresa no lo hace por sí sola. Y luego tienen a estos socios externos que les están ayudando con el transporte desde Alemania. Si recuerdas, los autos vienen de Alemania a Serbia, entonces tenemos a estos socios para préstamos porque esto puede ser los bancos están prestando las empresas son celulares y papá, que están pasando con el pulmones. Tienen compañías de seguros y todas ellas son socios externos. Entonces tenemos préstamos y tenemos socios específicamente para préstamos. Entonces podemos tener donde estamos contactanos y pie de página, creo que está bien. Y llamemos a esto préstamos secciones de préstamos. Por qué tenemos dos espacios aquí y allá vamos. Y por último, vamos a golpear Control D Una vez más. Duplica esto y navega hasta aquí tal vez y contáctanos. Entonces aquí vamos a tener, vamos a ver, me voy a deshacer de esto y de esto. Y en lugar de top premium porque tengo tal vez la imagen superior, la imagen héroe superior, por ejemplo, porque recuerda que las secciones de héroes se encuentran a lo largo de tus páginas, no solo en la página de inicio, es solo la primera página, primera sección en la página anterior, por defecto. Entonces llamémoslo secciones de Contáctenos. Ahí vamos. Ahora vamos a agrupar todos estos. Entonces voy a golpear Shift Control G. Voy a llamar a esta página principal. Ahí vamos. Esta va a ser nuestra página de autos autos. Esta va a ser nuestra página de préstamos. Vivos. Y por último, Contáctenos página contáctenos página. Ahí vamos. Voy a agrupar a todos ellos hit stack aquí mismo. Y voy a llamar a esto nuestro mapa del sitio. Arquitectura de contenidos. Una tableta encantadora. Entonces si lo posiciono como lo hicimos anteriormente con 40, y aquí estamos a los 40. Puedo hacer doble clic, puedo agregar esto aquí. A lo mejor no tiene que ser perfecto. Solo soy un poco más estricto para estos detalles. Así que a veces solo tendrás que aguantar conmigo. Así que vamos a dejarlo así. Entonces lo que tenemos es que tenemos flujo de usuarios en base al cual creamos nuestra arquitectura de contenido. Y ahora con base en la que finalmente vamos a pasar a los wireframes de papel. Ahora eso es mucho más sencillo porque tenemos todas estas ideas de nuestra cabeza puestas en mapa del sitio y la arquitectura de contenido va a ser mucho más sencilla para diseñar estos elementos que si acabamos de empezar con wireframes de papel. Una vez más, este método no es realmente necesario, pero es bueno tenerlo. Y es bueno si tienes todas estas ideas en tu cabeza para simplemente colocarlas en la página de arquitectura de contenido, especialmente si tienes varias secciones diferentes para un sitio web grande como un blog, por ejemplo así que es mucho más sencillo hacerlo de esta manera en lugar de simplemente comenzar con wireframes de papel directamente. Entonces en la siguiente sección, finalmente, vamos a pasar a los wireframes de papel. Entonces te veré ahí. 132. Guías de papel: Ahora que conocemos nuestra arquitectura de contenido, vamos a movernos rápidamente hacia ella y nos recordemos un poco. Entonces aquí tenemos autos Homepage, préstamos en contacto con nosotros, y con bastante facilidad podremos distinguir todas estas páginas por lo que platicamos en la arquitectura cuadrante hasta el momento. Entonces, lo que vamos a hacer a continuación es pasar a los wireframes de papel. Y lo que tengo aquí es solo ese pedazo de papel de punto negro. Como mencioné anteriormente, no es necesario usar este tipo de papel. Simplemente puedes usar un trozo de papel blanco viejo liso, o puedes usar un bloc de notas, puedes usar lo que quieras en lo que tengas. A mí me gusta usar estos, sobre todo para estos cursos porque se trata de un papel negro con puntos blancos en él. Y cuando empecé a escribir con estos bolígrafos de gel blancos, se va a traducir bastante bien para ustedes chicos y podrán verlo bastante bien. Así que sigamos aquí mismo. Lo que voy a hacer primero es crear un esquema rápido justo en el centro de mi página o un fluido porque recuerda más tarde en el futuro, en realidad seguiré adelante y escanearé esto y los meteré en Adobe XD. Así que muévete todo el camino hasta aquí más o menos. Entonces esto no tiene que ser perfecto, como mencioné algunas veces. Y simplemente lo dejaré así. Entonces lo que voy a hacer primero es que ya tengo algunas manchas, pero una vez más, realmente no importa. Lo que voy a hacer. Primero es si te llevo de vuelta hasta aquí, tenemos navegación y tenemos quienes somos directo de aquí. Entonces eso es en lo que nos vamos a centrar aquí. Así que vamos a bloquear una sección rápida aquí. Vamos a darle el nombre de un logotipo, y usemos uno más pequeño. Entonces llamemos a este préstamos autos, y contáctanos. Ahí vamos. Y si sigo adelante y acerco solo un poquito, podrás verlo solo un poquito mejor. Ahí vamos. Entonces autos, préstamos contáctanos. Y ahora déjame acercar solo un toque para que lo veas un poco mejor. Entonces, lo que vamos a tener aquí es una especie de sección de héroes. Así que vamos a bloquear piezas más pequeñas para que podamos tenerlas todas en nuestra página, así. Entonces aquí vamos a tener tal vez un título, tal vez un subtítulo. Y entonces tendremos tal vez un botón. Entonces vamos a darle n. Y entonces aquí vamos a tener algún tipo de auto. Porque una vez más, es un sitio web de autos y solo echa un vistazo a mis habilidades de dibujo. Loco. Pero realmente no importa, como mencioné algunas veces a lo largo de esto porque esto es solo para nosotros. Queremos poder presentar a nuestros clientes algo que sea un poco atractivo y queremos poder entenderlo con bastante facilidad. Entonces es por eso que estamos usando estos wireframes en papel para simplemente arrojar rápidamente algunas ideas en una página. Entonces tal vez pueda tener algunos íconos aquí mismo. Entonces ya veo, ahí vamos. Debajo de eso. A lo mejor podamos tener nuestra sección. Veamos qué tenemos aquí mismo. Entonces tenemos quienes somos. Entonces tal vez podamos seguir adelante y crear algún tipo de imagen. Tal vez más o menos por aquí de este lado. Ahí vamos. Y puedo escribir quiénes somos y tal vez algunos párrafos de textos. Entonces si llevamos aquí tenemos lo que hacemos. Lo que hacemos. A lo mejor puede ser una sección con los autos directamente. Entonces tal vez podamos tener esas tarjetas que mencionamos y luego ver todos los autos porque eso es lo que hacemos después de todo. Entonces lo que podemos tener aquí mismo son quizá tres cartas. Vamos con un diseño como este. Como dije, no importa si no soy tan preciso porque estoy tratando de apresurar esta sección porque tenemos varias páginas. Pero solo quiero llevarte a través de mi kernel de proceso de pensamiento. Entonces tendremos aquí mismo el nombre, tal vez el precio y tal vez alguna información aquí mismo. Entonces nombre del auto, precio del auto, y alguna información básica. Y discutiremos esa información básica en solo un segundo y tendremos imágenes de autos obviamente aquí mismo. Y luego vamos a cerrar estas tarjetas aquí mismo. Conecta estas líneas muy rápido. Y luego por debajo de eso tal vez podamos tener C todos los autos. Tal vez. Ver todos los autos. Ahí vamos. Botón en el centro. Creo que eso va a funcionar bastante bien. Entonces. A lo mejor podamos tener una sección aquí mismo de este lado, tal vez aquí mismo. Así puedo tener un poco más de espacio abajo en la parte inferior. Entonces esto puede ser imaginado y podemos llamarlo lo que ofrecemos. Entonces tal vez podamos tener tres Nikon diferentes , algo así. Entonces PUEDO tal vez podamos tener texto, texto y texto a continuación, algo así para que podamos llenar esta sección. Entonces tal vez podamos bloquearlo. Porque si te llevo aquí, tenemos nuestros beneficios. Entonces lo que ofrecemos y tal vez nuestros beneficios pueden ser sección debajo de él. Entonces tal vez algo como esto. A lo mejor podamos tener, ya veo, ya veo, y para el icono, veo N, entonces tal vez tener un título para cada uno de esos beneficios. Y puede haber un párrafo de texto o algo así. Para que puedan ver, me estoy moviendo a través de estos bastante rápido porque ese es el punto. A lo mejor tener dos o cinco o diez ideas distintas. Quiero ponerme en un trozo de papel lo más rápido posible. Y debido a que tenemos esta bonita arquitectura de contenido clara en su lugar, es mucho más sencillo ponerlos en su lugar así. Entonces lo que queremos es que nos contactes. Así que contáctanos. Ahí vamos. Y tal vez podamos tener eso como una forma regular como esta. Ahí vamos. Y entonces tal vez uno en el centro para llenarlo todo. Ahí vamos. Botón aquí mismo, btn. Y luego debajo de eso, lo que quiero es tener tal vez un mapa. Bien, por aquí. Ahí vamos. Esto puede ser un mapa. Ahí vas. Y entonces donde estamos, tal vez donde estamos. Y tal vez podamos usar el mismo diseño, solo reutilizarlo puede ser icono, icono, textos de iconos, textos, textos. Ahí vamos y tal vez pongamos algunos, no sé, dirección, número de teléfono, correo electrónico, lo que sea. Y luego finalmente, vamos a cerrar esta página de inicio. Puedes poner un logo en el centro. Entonces puedo usar el más pequeño. Tal vez podamos usar FB para Facebook, TW para Twitter, IgE para Instagram y L, y para LinkedIn o lo que sea. Y entonces aquí podemos tener la misma navegación. Entonces de este lado llamémoslo autos. Préstamos, contacta con nosotros. Ahí vamos. Entonces si sigo adelante y acerco solo para tocarlo para que lo veas un poquito mejor. Ahí vamos. Entonces, antes que nada, tenemos navegación aquí mismo en la parte superior. Entonces tenemos esa sección de héroe con el contenido al costado. Y tenemos la imagen del otro lado, quiénes somos. Entonces tenemos todas esas tarjetas en su lugar que puedes ver aquí mismo. debajo de eso tenemos lo que ofrecemos, luego por debajo de eso tenemos nuestros beneficios. Entonces tal vez podamos poner una flecha aquí o simplemente haber sido beneficios. Beneficios. Ahí vamos. Entonces estos son nuestros beneficios por debajo de eso. Tenemos Contáctenos. Entonces tenemos el mapa en la información de cada lado, que es lo mismo que esta sección. Y por último, tenemos pie de página abajo en la parte inferior de la página. Entonces lo que acabamos de hacer es colocar alguna información que tenemos aquí dentro de la arquitectura de contenido, abajo en una hoja de papel y es mucho más sencillo visualizarla. Ahora, lo que necesitamos es crear autos. Entonces, vamos a lidiar con la deuda ahora. primero es lo primero, tomemos este que es el número diez. Voy a llamarlo hogar. Ahora sigamos adelante y creamos autos. Así que voy a usar este mismo diseño que hice aquí más o menos. Así que vamos a llevarlo de aquí a tal vez Veamos aquí no tiene por qué ser precisos. Entonces veamos, estoy usando cuál es este número diez. Entonces tal vez no voy a usar este idealmente, pero una vez más, no importa. Simplemente coloque la estructura rugosa en su lugar. Ahí vamos muy bien. Vamos a cerrar esta. Usemos el número ocho. Entonces una vez más, si te llevamos de vuelta hasta aquí, dentro de los autos, lo que tenemos es la navegación. Tenemos estos tres repetidores más negación. Entonces tenemos cuatro secciones repitiendo. Tenemos top promo info y tenemos stock ocho veces. Entonces, ¿cómo podemos hacer eso? Bastante simple, simplemente copiemos nuestra navegación. Así que vamos a escribir un logo, escribir autos. Ahí vamos. Y vamos a escribir, veamos leyes y contáctanos. Ahí vamos. Y aquí para la información promocional, lo que puedo hacer es tal vez hacer algo un poco diferente. Entonces, sigamos teniendo esa información del problema aquí mismo. Pero tal vez tengamos un auto de perfil. Una vez más, mis habilidades épicas de dibujo están en su lugar. Ahí vamos. Entonces auto de perfil, tal vez podamos tener un círculo de fondo y tal vez podamos tener algún tipo de título en la parte superior. Algo así con un círculo de fondo alrededor del auto. Creo que eso va a funcionar bastante bien. Distinguieron esta sección, aparte de todas las demás. Tal vez. Tal vez puedas escribir algo como nuestra colección exclusiva. Ahí vamos. Y solo usaremos estas tarjetas que acabamos de crear y las plunk aquí mismo. Porque recuerda si te llevo aquí, esta es la sección de autos que tendrá todos los autos mostrados en la página. Y eso es lo que vamos a crear. Ahora. Vamos a crear uno a partir de aquí. Entonces tomemos esta altura, tal vez. Empieza por aquí, colócala aquí mismo, luego aquí mismo. Ahí vamos. Y tomemos, no sé si esto no va a quedar muy bien, pero no importa como mencioné, esto es solo un boceto rudo. Y créeme, si no estoy hablando, estoy haciendo esto como diez veces más rápido que lo estoy haciendo aquí mismo. Entonces, vamos a cerrar estas tarjetas así, así, así. Ahí vamos. Vamos a darles esa misma imagen superior aquí mismo. Ahí vamos. Vamos a cerrarlo así, solo para que sepamos que es una imagen. Teníamos un nombre en cada uno de ellos. Nombre, entonces teníamos un precio. Y entonces teníamos esos datos en la parte inferior de aquí. Entonces qué vamos a hacer, en lugar de que yo dibuje todo esto, los escribiré por ocho, así. Y luego por debajo de eso lo que vamos a hacer es simplemente crear, contactanos. Contáctanos. Porque si te lleva aquí puedes ver que en la sección de autos tenemos el stock, que es esto de aquí mismo que acabamos de dibujar. Y luego tenemos nuestro Contáctenos y pie de página. Entonces tal vez contáctanos, puede ir ahí. Y luego donde estamos. Estamos con la imagen de un mapa aquí mismo. Mapa. Y luego finalmente, podemos tener pie de página en la parte inferior. Entonces algo como esto. Entonces esto puede ser un logotipo. Esto puede ser, veamos, autos, préstamos, contacto. Ahí vamos. Estos pueden ser esos íconos, encantadores. Y ahora que se crea el carro es sección, vamos a movernos rápidamente hacia los pulmones. Y si nos lo recordamos, tenemos una vez más navegación top promo info, tenemos nuestros socios de oferta, y luego estas mismas secciones. Entonces si lo volvemos a cambiar aquí mismo, vamos a crear otro. Entonces, una vez más, esto no tiene que ser perfecto. A lo mejor ni siquiera voy a escanear estos porque son realmente, realmente extremadamente rudos. Entonces tal vez algo como esto solo para darnos un poco de espacio. Un error encantador. A ver. Déjame tomar el número diez porque es bastante grueso uno y puedo escribir en algo así como logo. Y luego autos, préstamos, contacto. He vivido. Y solo para estos. Entonces lo que podemos hacer es tal vez tener un título en el centro. Ahí vamos. Y entonces tal vez podamos tener dos autos. Un auto puede estar aquí. Ahí vamos. Y un auto puede estar aquí. Algo así. Ahí vamos. Entonces tal vez podamos pensar en la sección de animación porque estos dos autos pueden saltar del sitio. El título puede deslizarse desde abajo o desde arriba. Para que puedas empezar a pensar en estas cosas inmediato sin crearlas nunca. Entonces aquí tenemos esa opción. Entonces por debajo de eso, lo que podemos hacer tal vez es tener, recordémonos a nosotros mismos. Tenemos nuestra información de promoción superior, que es esta cosa aquí mismo. Entonces tenemos nuestra oferta y luego nuestros socios. Entonces veamos nuestra oferta. Nuestra oferta. Tal vez podamos crear el mismo layout que hicimos en la página principal. Entonces tal vez algo así por los beneficios y tal vez podamos hacer lo mismo. Entonces tal vez podamos teclear. Veo, veo, veo. Redondearlos en círculos. Entonces tenemos el título y después tenemos los textos de párrafo justo debajo. Entonces lo que tenemos son nuestros socios. Entonces llamémoslos algo así como En realidad no, vamos, vamos a darles el layout que hicimos anteriormente en la página de inicio justo en este lado. Entonces lo que voy a hacer es tener mi imagen aquí. Ahí vamos. Y tal vez hacer algo un poco diferente esta vez. Entonces tal vez poner un logo aquí. Entonces déjame elegir el número diez. Entonces logo. Y entonces tal vez de este lado tal vez pueda poner una tarjeta y llamarla logo para los socios. Y tal vez podamos llamarlos nuestros socios. Socios. Ahí vamos. Y entonces tal vez podamos poner el mismo layout que hicimos en la página de inicio aquí por quienes somos, pero solo para nuestros socios y luego no perder demasiado tiempo solo para recordarnos dónde estamos. Contáctanos pie de página para que pueda tomar el número diez, así contacta donde estamos con la imagen. Y finalmente pie de página para que podamos movernos de manera rápida. Lo que tenemos a continuación es solo contactarnos. Entonces hagámoslo en 2 s porque va a ser súper sencillo. No voy a necesitar crear ninguna línea adicional aquí mismo. A lo mejor puedo ponerlo aquí. He sido logo. Ahí vamos. Y en lugar de escribir, ya sabemos cuáles son. Entonces, si nos recordamos por la página Contáctenos, solo tenemos navegación y luego todas estas cosas. Así que la imagen de héroe superior y dónde estamos. Por lo que todos estos quedan. Entonces tal vez podamos poner una buena imagen grande para un héroe. Y luego podemos escribir en contacto con nosotros donde estamos con una imagen de un mapa. Y finalmente por término. Y ahora lo que tenemos que hacer es en realidad seguir adelante y crear la página donde vamos a proporcionar información adicional sobre el auto. Entonces, si te llevo a una de estas páginas que acabamos de hacer, entonces esta, por ejemplo, tenemos todas estas diferentes secciones. Tenemos el auto, tenemos las imágenes. Vamos a filtrar a través de toda esta información en un poco. Pero ahora mismo, en realidad tendremos que crear algo como esto. Entonces, ¿cómo podemos hacer eso? En realidad es súper simple cuando sabes lo que necesitas poner, pero solo voy a poner algunos bloques dentro. Y luego más adelante en XD hablaremos de las diferentes secciones que podemos crear. ¿Por qué creamos y cosas así? Entonces aquí tenemos la página del auto. Déjame llamarlo auto en la página de detalle. Y permítanme, permítanme crear un esquema rápido por aquí, más o menos por aquí. Y solo recuerda que esta página se va a crear usando Webflow, CMS. Por lo que va a crear solo uno. Y luego cuando ingresemos toda la información, CMS en realidad va a hacer todo el trabajo duro. Por lo que nuestros clientes podrán incluir imágenes adicionales e incluye información separada para cada automóvil. Entonces el color del año, la producción, el kilometraje, toda esa información. Ahí podrán incluirlo por cada otro auto que pongan. Pero la estructura general y el diseño van a ser exactamente los mismos. Entonces si te llevo aquí, tenemos el navbar-justo aquí, entonces logo y no tenemos artículos. Entonces lo que vamos a hacer es quizá dividir esto en dos secciones son como te mostré en esa web en particular. Tenemos una sección con las imágenes y la información y la segunda sección con la tarjeta tal vez la cual va a seguir y la maquetación que te mostré. Entonces, lo que podemos hacer aquí mismo es tal vez crear un diseño que se vea algo así. Y por supuesto siempre se puede jugar con esto y ajustar estas secciones. Entonces voy a poner una imagen gigante y luego tal vez para imágenes más pequeñas. Y luego poner un banner con ya sea un icono o el texto en su interior, que al hacer clic en él, va a agrandar la imagen. Entonces he puesto esto aquí, esto aquí. Y luego de este lado, crearemos esa tarjeta, tal vez del mismo tamaño que esta. Realmente no importa por ahora, pero cuando nos movemos al diseño va a importar. Entonces lo que podemos hacer aquí mismo es en realidad poner esa información que mencionaste, la sal, tal vez podamos poner en nombre el auto, precio del auto. Tal vez alguna pequeña descripción aquí mismo. Y entonces tal vez podamos poner dos botones. Uno es para tal vez coche de reserva, que al hacer clic en él, te va a llevar al formulario de contacto. Y el otro puede ser tal vez solo opciones u opciones préstamo C. Opciones. Ahí vamos. Y eso tal vez te pueda llevar demasiado tiempo discurso, préstamos, formulario de contacto o página o lo que sea. Entonces ese va a ser un layout para esa sección. Y entonces básicamente lo que vamos a hacer es que voy a hacer esta mano libre y voy a darle la vuelta aquí mismo. Escuchará tal vez algo como esto. Así que visión general o revisión. Un montón de información diferente en su interior. Entonces tendremos especificaciones de autos. Y esa sección puede ser larga. Somos información genial. Y entonces lo que podemos hacer es tal vez poner performance y luego poner toda la información dentro de la performance. Seguridad como la que vimos en ese sitio web. Porque la seguridad es realmente importante. Obviamente. Tal vez ayudas al conductor o algo o conveniencia. Entonces tal vez podamos poner exterior y qué tipo de detalles exteriores sí tienen exterior. Esto puede ser habitaciones en color y cosas así. Interior. A lo mejor tienes asientos de cuero o lado de control de clima o algo así. Entonces tal vez podamos poner dimensiones. Dimensiones. Ahí vamos. Y eso puede ser. Esta sección se puede cerrar aquí mismo. Y esta tarjeta puede seguir esta sección. Ahí vas. A medida que te desplazas hacia abajo, se va a mover hacia abajo. Entonces tendremos tal vez alguna opción para, digamos, Explorar autos similares. Entonces tal vez pueda escribir eso. Explora autos similares. Y aquí solo tendremos esas tres tarjetas que teníamos en todas las demás páginas. Entonces tarjeta uno, tarjeta a tarjeta tres. Pero en este caso, solo cargará otros autos de esta colección, que crearán en CMS. Entonces, si estás viendo Mercedes clase S aquí, no va a mostrarse como clase aquí mismo porque estamos viendo la clase S aquí mismo en esta página. En cambio, extraerá información de la siguiente tarjeta para que la pongamos en Webflow. Entonces estoy pensando en todos estos procesos por adelantado. Entonces, cuando realmente nos mudamos a Webflow va a ser mucho más sencillo crear esto. Entonces no estamos viendo la clase S aquí. Y aquí, solo lo estás viendo aquí. Pero aquí van a haber diferentes autos. Así nombre, precio e información, nombre, precios, info, nombre precio e info. Y entonces tendremos toda la misma información. Entonces tendremos contacto con nosotros donde estemos. Y por último, término completo. Y porque estamos haciendo esto en CMS, esta información va a ser la misma. Entonces, finalmente, esta página que acabamos de crear, así que la página de detalles del auto va a ser exactamente la misma para cada tarjeta que creamos. Y los clientes van a poder actualizar fácilmente esta página y agregar ya sea imágenes adicionales al auto existente o crear nuevos autos y crear estas páginas dinámicas llenas de contenido. Ahí es donde Webflow, CMS va a ser útil. Entonces, finalmente, repasemos lo que hicimos hasta el momento. Entonces empezamos con la página de inicio, que te mostré aquí mismo. Así que tenemos préstamos para autos a domicilio Contáctenos. Entonces finalmente, página de detalles de la tarjeta. Entonces empezamos con una página de inicio. Luego pasamos a la página de autos. Vamos a crear las ocho tarjetas diferentes de autos. Y estas secciones en la parte inferior van a repetir. Luego nos mudamos préstamos donde vamos a mostrar dos imágenes de autos diferentes. Les mostraremos nuestra oferta para los pulmones. Les mostraremos a nuestros socios para que los pulmones establezcan confianza. Y entonces estas secciones van a ser las mismas. Por último, para la página Contáctenos, que tal vez pueda marcar aquí, contáctenos. Solo tendremos imagen de héroe aquí mismo en la parte superior. Tendrás el formulario de contacto que vimos en todo el sitio web donde estamos para la ubicación y el pie de página. Y por último, el tono más importante en términos de convergencia va a ser la página de detalles de la tarjeta, que es esta página. Y solo les va a mostrar los detalles sobre el auto en el que hicieron clic. Cualquiera de estas páginas anteriores, ya sea en las tarjetas están en la sección de autos de la página. Y como mencioné, va a tener imágenes aquí mismo en la parte superior. Entonces va a tener una visión general. Entonces tal vez podría acercarme solo un toque para poder mostrar esto con un poco más de detalle. Entonces como dije, vamos a tener imágenes aquí mismo con cuatro imágenes diferentes y el icono para agrandar las imágenes y entrar en pantalla completa tal vez aquí mismo para ver más detalles. Tendremos nuestro vehículo de revisión en cuatro con rendimiento, con seguridad, ayudas al conductor, dimensiones exteriores e interiores. Y finalmente, habremos explorado autos similares de esa misma Colección de Autos que crearán en Webflow más adelante. Y luego finalmente, mismas secciones como contactanos donde estamos y pie de página justo debajo. Y por último y crucialmente, descarte los va a seguir donde quiera que se hacia arriba y hacia abajo en esta sección en particular. Entonces sabemos que llegamos al final de nuestros wireframes de papel. Realmente espero que lo hayas disfrutado y realmente espero que hayas entendido por qué es importante crear esta arquitectura de contenido y mapa del sitio junto a estos wireframes en papel. Y que es mucho más sencillo crear contenidos así porque estás planeando con anticipación en tu pensamiento futuro como para abrir, dónde crear algo y cómo crear algo que necesites para tu sitio web. En la siguiente lección, vamos a hablar de imágenes, donde las obtuve para este proyecto en particular. Dónde puedes llevarlos a cómo voy a estructurar imágenes para este proyecto y cuáles son términos y condiciones en cuanto a dónde y cómo puedes usar esas imágenes en tu propio proyecto si quiero usarlas para tu cartera, por ejemplo, así que te veré allí. 133. Imágenes de proyectos: En esta lección, vamos a hablar de imágenes donde encontré mis imágenes para este proyecto en particular. Cómo puedes usar esas mismas imágenes y cómo puedes licenciarlas posteriormente si quieres usarlas en tu portafolio. Si no, puedes usar algunas otras imágenes, pero déjame mostrarte el enfoque que tomé porque es realmente complicado. Entonces, si voy aquí mismo, usé todas mis imágenes de elementos Envato como lo hago para todos mis tutoriales de YouTube, todos mis cursos. Y uso este sitio web desde hace años, y creo que es fantástico. Entonces el principal problema aquí es que tienes que encontrar un auto y tomar imágenes desde todos los ángulos posibles, como puedes ver aquí mismo. Posiblemente en el mismo lugar. Y luego haces lo mismo con el interior. Así que no hice interiores porque es muy complicado encontrar interiores 3D en línea y tomar imágenes de alta calidad. Puedes hacerlo en línea en los sitios web de la compañía. Pero para mostrar a tus clientes quienes en realidad van a tener estas imágenes porque tienen stock de estos autos en su showroom. Para que puedan tomar imágenes desde todos estos diferentes ángulos, incluido el interior. El objetivo aquí es mostrarles cómo funcionará el sitio web para que puedan reemplazar las imágenes que pones dentro esa plantilla de Webflow que proporcionaremos y crearemos más adelante. Entonces para crear algo así, lo que yo hago, lo que hizo fue a Envato Elements. Y descargué este logo y acabo de sustituir el nombre por una araña, que es el nombre de nuestra compañía imaginaria. Tomó este software 3D, tomó esta planta 3D y tomó este piso y panel de pared de piedra caliza, colóquelos en Photoshop y creó algo como esto. Entonces, si golpeo Control H para ocultar estas guías, lo que tengo aquí mismo es la textura de fondo, que es un fondo aquí mismo. Tengo el uso de la palabra. Tengo la planta con un poco de desenfoque. Y tengo el sofá aquí mismo, y tengo el logo justo aquí arriba. Y si te llevamos de vuelta aquí mismo, ¿cuáles son sus necesidades? Son los autos. Entonces si me llevo este bulto de Guinea, por ejemplo, ese tiene mi auto. Este es el render 3D en el que vas a estar en elementos Envato. Entonces lo que hice fue encender la vista 3D para que puedas rotar este auto como quieras. Entonces digamos que quiero tomarlo desde este ángulo, y luego este ángulo, y luego este ángulo y luego tal vez este ángulo que este, que esto para imitar lo que vemos aquí mismo en la vida real, lo que voy a hacer es seleccione este, luego descargue este ángulo como PNG, lo cual hice. Seleccione esta descarga angular como PNG, seleccione Descargar como PNG. Y lo hice por todos estos ocho autos que puedes ver aquí mismo. E incluso agregué, creo algunas adicionales como esta que usaremos en la sección de héroes. Y déjame ver. Creo que ya está. Probablemente, sí, porque aquí tenemos nueve y luego estos autos son maquetas. Y simplemente seguí adelante y los abro en Photoshop. Y acabo de quitar todas estas diferentes secciones con el diseño irá y simplemente exporto a ellas como PNG. E hice lo mismo por éste. Si recuerdas, creo que en página de autos habrá un auto mirando desde el lado del círculo en el fondo con unos textos superiores, que es algo así como esto es. Entonces solo tomé esta imagen y pinté todos los autos negro por ese equipo de lujo. Entonces seguí adelante y encontré todas estas imágenes premium en elementos Envato, que son millones de ellos. Y puedes usar todo tipo de imágenes diferentes. Entonces aquí hay uno para los vendedores de autos. Aquí está uno de vendedor de autos mostrando el auto a la gente y aquí está el que tal vez están estableciendo un contrato o algo así. Así que utilizo todas estas imágenes en el diseño. Y van a ver eso a medida que avancemos. Y te voy a proporcionar todas estas imágenes para que uses. Dependiendo de dónde estés viendo este sitio web, tal vez sea como un enlace de Dropbox para que puedas descargarlo de esa manera. O lo pondré en la sección de esta sección de diseño que tendrás en parte donde podrás descargar imágenes, simplemente haz clic, descárgalas. Si quieres usar estas imágenes es realmente importante. Tienes que licenciarlos tú mismo de Envato elements porque todos ellos están bajo licencia y tienes que pagar por esa licencia si quieres usar estas imágenes existentes en tu proyecto, que vamos a mostrar. Si los estás usando con fines de aprendizaje, está completamente bien. Simplemente puedes descargarlos, pero no puedes usarlos en ningún lado, no en tu portafolio, loco para exhibirlos en Instagram, no para trabajar con clientes porque eres responsable de esos imágenes bajo mucho. Entonces, si no tienes licencia para estas imágenes, todas estas empresas que están publicando estas imágenes en elementos de Envato, incluidos los propios elementos de Envato pueden demandarte fácilmente porque no tener una licencia correcta. Pero si los estás usando con fines de aprendizaje, solo para los tuyos, solo en tu computadora, solo para aprender, solo para poner las cosas aquí mismo. Entonces está bien usarlos así porque una vez más, es extremadamente difícil encontrar imágenes como estas. O si quieres, en lugar de autos exclusivos, puedes reemplazar estas imágenes por tus imágenes de tu auto o el del vecino, o tu auto o lo que sea. Y entonces puedes simplemente duplicar esas imágenes y ponerlas en su lugar en lugar de usar estas imágenes. Entonces como dije, lo hice. Y luego cuando entre en Photoshop, lo que voy a hacer es simplemente tomar las imágenes que se acaban de descargar, arrastrarlas y soltarlas en Photoshop. Y va a colocarlos como objetos inteligentes en su lugar por celda. Y luego déjame organizarlos un poco diversos. Déjame dar click. Bien, entonces el número uno, el número dos, el número tres, el número cuatro. Entonces estas son todas las posiciones. Y si traigo Control H Back Control T, así puedo cambiar el tamaño de estos como para que no tenga peso. Entonces Control T una vez más, solo con un ascensor y turno, tal vez algo como esto. Ahí vas. Voy a esconder estos. sólo voy a trabajar con el número uno Ahora sólo voy a trabajar con el número uno, así como esto. Entonces tal vez pueda posicionarlo solo para estar en el centro, más o menos por aquí, tal vez donde se tocan las ruedas, tal vez ahí mismo. Entonces voy a hacer lo mismo para el número dos, así que donde se tocan las ruedas y tal vez lo coloque aproximadamente por aquí. Entonces para el número tres, se te da la idea. Así que solo lo colocas aproximadamente por aquí y quieres tener la ilusión de este sea un auto real en una sala de exposición real, como los que te acaban de mostrar aquí mismo. Pero ahora estamos tratando con la imagen de Photoshop y el render. Entonces, ¿cómo se ve esto cuando realmente lo renderizaste? Se ve algo así. Entonces este es el render real que vamos a usar en este curso. Entonces aquí está el indicado. Y luego déjame hacer clic para poder cambiarlos o dejarme abrirlos una vez más. Vamos a probarlo ahora. No sé qué está pasando aquí mismo. Entonces, cancelemos esto. Vamos a abrirla. Una vez más. Ojalá esta vez vaya a funcionar porque estoy usando todos estos softwares en segundo plano. A veces va a provocar algunos fallos en mi computadora. Entonces déjame en realidad seguir adelante y cerrar Photoshop muy rápido porque ya viste eso. Y probémoslo ahora. Entonces aquí está esa imagen. Entonces ahora cuando cambio a izquierda y derecha, se puede ver 12345678. Por lo que estamos mostrando el auto desde todos los ángulos excepto en el interior. Porque como mencioné, es muy difícil encontrar interiores en línea que sean buenos. Pero este va a ser un buen punto de partida porque hice esto si recuerdo por ocho autos diferentes. Entonces, si lanzo Cadillac escalate, por ejemplo y te lo demuestro, puedes ver que es completamente lo mismo en el mismo interior. Vamos a lanzar este Maclaurin e.g para que puedas ver cómo se ve en este interior. Y por último, déjame mostrarlo y dibujar Vogue. Ahí vas. Para que veas que son exactamente iguales en cada interior y todos ellos están tomados de elementos Envato de esta colección. Y como dije, para no repetirme demasiado. Puedes usar estas imágenes con fines de aprendizaje en tu máquina, pero no puedes publicarlas en ningún otro lugar. Si quieres, puedes unirte a lo que dos elementos y simplemente descargarlos y para mostrarte lo súper simple que es esto. Entonces digamos que voy a abrir esta. Y voy a desplazarme un poco hacia abajo. A lo mejor quiero usar este auto por cualquier razón o esto lo haremos aún mejor. Digamos que elijo este render. Para que se renderice. A lo mejor quiero rotarlo así. A lo mejor quiero usar este ángulo, B y G. Descarga este ángulo, y puedes verlo aquí mismo. Tan exclusivo sitio web de showroom de autos, que es la colección que ya creó para el discurso. Da click aquí, agrégalo ahora carga y por lo tanto tengo una licencia. Ahora para este ángulo de esta imagen. Si lo cambio a un ánodo, esta descarga de ángulo se agregó a la misma colección en no permitido. Ahora tengo licencia para éste, y puedo utilizarla en número ilimitado de proyectos. Puedo crear un número ilimitado de estas colecciones. Puedo agregar estos, creé estas colecciones para ciertos tipos de sitios web o aplicaciones móviles, para que pueda hacer lo que quiera. Y una última cosa que quería mostrarles es por estas imágenes. Entonces si tomo esto y tal vez vendedor de autos toma esto, y esta es una imagen, puedes ver imágenes adicionales de esta persona que imágenes gratis no te pueden dar. Sencillamente. Puedes ver más fotos similares, que te va a mostrar fotos de este fotógrafo en particular y otros fotógrafos. Para que pueda ver diferentes tipos de un vendedor de autos, diferentes tipos de salas de exhibición de autos y así sucesivamente y así sucesivamente. Pero si quieres de esta persona, que es Ross Helen en este caso, click aquí mismo, basado en vendedor de autos, escribiendo Enter or Return. Y ahí tienes. Tienes cientos de imágenes diferentes de este mismo vendedor de autos en el mismo showroom de autos, viendo autos, explorando autos, probando autos, vendiendo autos, posicionando diferentes lugares, todo tipo de cosas diferentes. Porque este fotógrafo tomó estas imágenes en la misma iluminación, usando los mismos modelos, usando el mismo showroom, mismas condiciones. Entonces va a ser mucho más profesional si lo usas desde aquí. Entonces si usas una imagen de aquí, una imagen de ahí, 1 "de este fotógrafo, una neutral en este fotógrafo n, Por supuesto, puedes filtrar a través de todos estos diferentes filtros increíbles para encontrar tus imágenes aún mejor de esa manera. Entonces eso es todo para las imágenes. Recuerda, si quieres volver a usarlos, tienes que licenciarlos de Envato Elements en cualquier parte de tu portafolio, en el trabajo de tu cliente, o compartirlos en Instagram, fines de semana, sea lo que sea que estés haciendo, tienes que licenciar estas imágenes. De lo contrario estás violando sus leyes cuando estás arriesgando una demanda potencial. Pero si quieres usar estas imágenes con fines de aprendizaje que de lo que trata este curso, entonces puedes usar estas imágenes de forma gratuita. Simplemente no subas tu trabajo a ningún lado en línea. En la siguiente sección, o lo siento, en la siguiente lección, vamos a pasar a Adobe XD y finalmente comenzar a diseñar este proyecto. Así que comencemos. 134. Creación de tableros de humor: Entonces, ahora que hemos hecho wireframes de papel, es hora de seguir adelante con nuestro diseño comenzar a explorar diferentes imágenes, diferentes opciones de estilo, diferentes enfoques. Y para ayudarnos mejor a hacerlo, vamos a usar algunos mood boards. No vas a entrar en demasiados detalles. Obviamente ya se creó este proyecto. Obviamente nuestro cliente imaginario sabe lo que le gusta, pero solo está ahí para ponernos de humor de cualquier manera. Así que todavía te voy a mostrar. Pero antes de eso, déjame llevarte a nuestro archivo Adobe XD donde te voy a mostrar que limpio este wireframe solo un poco. Entonces se puede ver que yo solo seguí adelante una vez más y crearlos todavía tienen algunos bordes ásperos, pero no importa porque este es el wireframe después de todo. Y solo necesitamos esto para hacer referencia cuando empezamos diseñar solo para recordarnos cómo funcionaban las cosas y cómo lo imaginábamos. Entonces, una vez más, no tomes este wireframe como decisión final de diseño. Será en este caso porque como dije, ya diseñé esto porque vamos a sentarnos aquí por, no sé, semanas para que yo diseñe esto. Pero cuando estás creando tu propio proyecto, siempre puedes cambiar esto. Esto es sólo para algunas ideas básicas. Y verán que todavía vamos a cambiar algunos diseños aquí y allá en este wireframe, pesar de que ya he creado este diseño antes. Pero no importa. Todavía vamos a seguir adelante y hacer eso. Déjame mover esta imagen porque es una imagen aquí mismo. Porque voy a presionar un en mi teclado y crear algo así como 1920 por 1080. Déjame llamarlo humor. Tablero de estado de ánimo. Ahí vas. Ya tengo este logo, que volverás a entrar en este archivo, porque como creativo, lo vas a conseguir cuando llegues al curso y cuando realmente empieces a trabajar conmigo, posicionarlo aproximadamente en el centro, en algún lugar por aquí. Creo que va a funcionar bien. Y como dije, esto solo está ahí para ayudarnos a navegar un poco más. Entonces verás que estas fuentes faltantes se volvieron negras porque este logo tiene esta fuente dentro, pero no te preocupes por ello. No lo vamos a instalar solo para que podamos tener una fuente. Así que vamos a crear un rectángulo y permítanme usar realmente una cuadrícula de repetición aquí mismo. Entonces algo como esto. Y vamos a expandirlo un poco. Y desagruparemos la grilla. Y lo que puedo hacer es tal vez extender esto un toque, tal vez extender esto un diseño táctil aquí realmente no importa porque solo quiero poder arrastrar y soltar algunas imágenes rápidas dentro. Déjame dejar caer uno aquí también. Vamos a agrandar esto. El análisis debería duplicar este y colocarlo aproximadamente por aquí. Ahí vamos. Entonces ahora que tenemos este diseño, lo que puedo hacer en realidad es escalarlo solo un toque. Una vez más, puedes explorar con los colores. Simplemente refiérase de nuevo a esta sección sobre los mood boards. No me voy a molestar demasiado porque como dije, ya tengo un diseño preparado. Solo quería mostrarte cómo lo haría si tuviera crearlo desde cero una vez más. Entonces, lo que puedes hacer es crear estos mood boards como quieras. Pero no vamos, como dicho, no tratemos de demasiados detalles innecesariamente. Algo como esto. Creo que va a funcionar bien. Sigamos adelante y deshacernos de los analistas fronterizos, darles un poco de un color gris claro solo para que podamos ver dónde podemos colocar nuestras imágenes. Y para las imágenes, podemos ir a Dribbble para inspirarnos. Los analistas en realidad hacen eso antes de pasar al auto, guau, tal vez algo como esto funciona bien. Solo recuerda, a nuestro cliente realmente no le gustan los diseños oscuros. Entonces les gustan estos diseños más ligeros. Y tal vez podamos usar algo como esto. A lo mejor, no lo sé, puedes desplazarte y navegar por ahí y ver qué funciona. No lo sé, tal vez algo así. Estas tarjetas se ven bonitas. Entonces lo que podemos hacer en este caso es porque me gustan estas tarjetas. Lo que puedo hacer es tener una herramienta para una captura de pantalla y voy a capturar región. Y a lo mejor no sé más o menos por aquí. Realmente no importa porque solo quería usar esta imagen como inspiración. No necesariamente vamos a copiar nada de este diseño como vas a ver cuando realmente empecemos a diseñar. Pero en realidad vamos a crear otro aquí. Y estoy usando algo llamado tiro verde. Puedes usar lo que quieras. En realidad, no, vamos, vamos a cerrar esto. Y en realidad voy a capturar esta región. Porque creo que algo como esto podría funcionar un poco mejor para nuestro diseño. Vamos a cerrar esto. Y a lo mejor me gusta esta zona con el texto dentro. Así que vamos a capturar en deuda. Ahí tienes, porque esta es una especie de diseño agradable y elegante. Y tal vez esta tarjeta con el lado actual. Una vez más, puedes usar el layout que quieras para tu proyecto y lo que te inspire para este proyecto. Entonces tal vez algo así, guardado directamente. Y veamos, tal vez podamos usar desde aquí y nada realmente. Entonces llamémoslo un día con el regate. Y vamos a capturar descarte porque piensan que en realidad vamos a usar nuestro diseño así. Para que pueda arrastrarlo y guardarlo directamente desde aquí. Ahí vas. Y lo que también me gusta es desechar aquí mismo. Para que veas lo sencillo que es esto. Sólo estoy dando vueltas y capturando lo que me gusta. No necesariamente vamos a usarlo todo. Sólo nos vamos a inspirar a nosotros mismos. Como dije, esto no me gusta mucho. Creo que está demasiado abarrotado. Entonces lo que puedes hacer es simplemente desplazarte buscar los detalles que te gusten. Quizás estas tarjetas, y funcionan muy bien. Así que vamos a capturar eso. Región de captura. Ahí vamos. Entonces algo así porque todavía queremos que los botones estén ahí abajo. Y tal vez estos diseños se ven geniales. Pero creo, creo que ya es suficiente por ahora. Dejemos el sitio web de carla abierto l. De hecho, empezó a arrastrar nuestras imágenes dentro. Para que veas lo que estoy haciendo aquí mismo. Simplemente los estoy posicionando a la izquierda, a la derecha y al centro donde pueda básicamente. Entonces hagamos algo como esto, tal vez aquí arriba. Y luego posicionar esto aquí mismo. Ahí vas. Entonces tal vez pueda darle un codazo aquí mismo porque es un poco más ancho. Para esta tarjeta, tal vez pueda usar este diseño y me interesa este diseño inferior con el precio y los botones tal vez. Y luego veamos, tal vez podamos posicionar esto para que sea más o menos por aquí y tal vez incluso acercar un poco. Entonces podemos recortar en esta imagen, quizás aquí, porque una vez más, me interesan las tarjetas, no necesariamente el diseño del tablero en sí. Y una vez más, solo estoy usando esto para una referencia rápida. Aquí podemos usar matar esto porque me molesté con este color negro en el fondo. Escale esto solo un toque. Ahí vamos, solo para que podamos ver un botón y un auto. Lo que puedo hacer aquí mismo es arrastrar esto adentro, que es por mi precio. Y tal vez pueda darle un codazo más o menos por aquí solo para que sepa que esa es esa sección. Una vez más, podemos recrear este moverlo aquí mismo a un lado, pero realmente no me importa demasiado en este momento. Solo quiero inspirarme con estos diseños. Ahí vamos. Entonces me gustan estos con las tarjetas. Y no lo sé, tal vez una vez más quizá podamos volver al carro. Bueno, vamos a ver. Volvamos a la página principal y veamos qué tenemos aquí mismo. Ahí vas. A mí me gustan estas secciones, así que vamos a resaltarlas. Es región de captura. Derek, ve a guardar directamente y déjame volver a x D y arrastrar y soltar esos dentro. Ahí vamos. Entonces lo que puedo hacer es quizás incluso poder escalarlos porque es un fondo blanco. Entonces sigamos adelante y hagamos eso. Algo como esto. Ahí vamos. Ahí vas. Ese es nuestro mood board. Una vez más, puedes seguir adelante y usar lo que quieras. Puedes moverte sobre ello de diferentes maneras, pero creo que eso va a ser por ahora. Una vez más, esto es solo sobras aquí y allá, justo ahí para inspirarnos. Creo que esto es suficiente para este proyecto porque ya tenemos nuestro flujo de usuarios. Contamos con un mapa del sitio y arquitectura de contenido. Ya hemos creado nuestros wireframes de papel. Ahora tenemos nuestros mood boards. Sabemos qué colores y estilos le gustan realmente a nuestro cliente. Así que realmente no me gustaron una vez más, esos sitios web oscuros. Les gustan los sitios web más ligeros y les gustan los sitios web que tienen color azul en ellos, como el sitio web de tallado, que es este de aquí. Son como estas tarjetas, diseño, día como diseño minimalista y estilo. Entonces creo que estamos bien para irnos. En el siguiente video, vamos a pasar al diseño. Y en realidad vamos a empezar a crear algunos aeropuertos y empezar a diseñar algunos elementos como cuadrículas. Entonces te veré ahí. 135. Cuadrícula, tipografía y colores: Empecemos ahora con el diseño y lo primero que vamos a hacer es volver a Adobe XD y comenzar con algunos aeropuertos. Entonces aquí estoy en nuestro archivo y lo vamos a hacer es en zoom un poco, algo así, y darle un en mi teclado. Y déjame crear un aeropuerto. Realmente no importa cuál. Así que vamos con 1920 por 1080 para ir, puedo guardar rápidamente este diseño. Lo que voy a hacer es cambiarle el nombre a homepage. Entonces x D va a ladrar de vez en cuando. Así que tengan que soportar conmigo en esta. Así que la página de inicio allí, aunque. Lo que voy a hacer en realidad es que voy a cambiar el tamaño. Entonces aquí voy a ir con 14, 40. ¿Y por qué estoy haciendo eso? Porque en Webflow, eso es su natural y un punto de partida porque en Webflow estás comenzando desde el tamaño del escritorio y estás diseñando hacia abajo. Así que estás pasando de escritorio a tablet a móvil. O si quieres crear puntos de interrupción aún mayores, que son estos tamaños de pantallas son básicamente, entonces comenzarás con este tipo de tamaño y luego te moverás hacia arriba como, no sé, 1619220003000 y así sucesivamente y así sucesivamente. Pero en este caso, sólo vamos a ir con 14, 40 porque eso es lo que nos van a dar ahí. Entonces vamos a tener un diseño de 12 columnas. Y veamos aquí mismo lo que podemos hacer es quizás ir con 39 por el ancho. Ahí vamos. Y vamos con 6044 anchuras de columna. Y lo que estoy apuntando aquí es tener uno a uno para mis márgenes izquierdo y derecho. A ver. Entonces uno a uno. ¿Puedo hacerlo? No, intentémoslo de nuevo. Uno a uno se convirtió en una celda para que puedas ver lo que realmente estoy haciendo. Así que solo estoy tratando de que XD trabaje conmigo aquí mismo. Entonces vamos con 39 aquí. Vamos con 61 aquí, 64 tal vez. Entonces uno a uno. Ahí vas. Entonces 386051 a uno. Y lo que quería hacer aquí mismo es lograr el mismo diseño exacto aquí mismo en el lado izquierdo y derecho. Entonces cuando dibujo una caja dentro de mis columnas así, puedes ver que es 11 98, y no te preocupes por ello porque XD es un poco buggy con estos diseños. Pero tendremos un diseño de 12 columnas con el ancho máximo de 1,200 píxeles dentro de Webflow. Entonces, deshagámonos de esa. Así que déjame volver a mis columnas y déjame bajar el layout y el ec2, algo así como cinco, tal vez. Veamos algo así. Ahí vas. Para que ustedes puedan ver lo que estoy haciendo un poco mejor. Lo que también voy a hacer es quizás comenzar con alguna topografía. Así que vamos a hacer eso. Vamos a golpear T en nuestro teclado escribiendo. Veamos encabezamiento, encabezamiento uno. Y voy a ir con Poppins aquí mismo, lo cual es genial. A ver, a lo mejor puedo ir con 64, 64 perno. Creo que eso va a funcionar bastante bien. Y vamos con, no sé, tal vez 86 por la altura de la línea. Ahí vamos. Entonces, lo que estoy haciendo aquí es que estoy tratando de determinar mi escala de tipos. Entonces, por lo general, lo que mejor funciona es ir con incrementos de ocho. Entonces en este caso tenemos encabezamiento uno, que es 64. Entonces sigamos adelante y dupliquemos eso. Lo que va a pasar ahora se dirige a la partida dos, que va a ser 32. Tal vez. Ahí vas. Creo que eso va a funcionar bastante bien. Y veamos. Lo que podemos hacer a continuación es que a lo mejor podamos tocarlo al 53, algo así. Creo que eso va a funcionar bastante bien. Bien. Y lo que podemos hacer es golpear Control D Una vez más escribiendo rumbo tres. Y para el rubro tres, lo que podemos hacer es ir con 24. Para que puedan ver lo que estoy haciendo aquí. 24, 30 a 64, tal vez puedas usar 40 en algún lugar, tal vez 48, tal vez 56. Pero básicamente pasar a incrementos de ocho. Es una especie de pequeño truco. Así que vamos con 40 aquí también. Y somos 24, 30, 32, somos 64. Entonces este es nuestro rubro tres. Y en Webflow hay algo llamado textblock. Y en general, en diseño web, Eso son solo algunos textos básicos que vas a usar cuando empieces a escribir. Entonces eso es lo que vamos a hacer aquí mismo. Entonces usemos bloque de texto. Ahí vas. Y para el bloque de texto, tal vez podamos ir con algo un poco diferente. Así que vamos con, no sé, tal vez 20. Ahí vas. En lugar de audaz, vamos con regular. Creo que eso funciona bastante bien. Y vamos con control y D Una vez más. Vamos a escribir el párrafo. Por un párrafo, tal vez podamos ir con 16. Y para los 16, veamos, tal vez 26 funcionen aquí. Entonces 26, ahí tienes. Entonces ese es nuestro párrafo. Y finalmente tendremos uno más textos llamados etiqueta. Déjame mostrarte adónde va a ir eso. Entonces, si hago zoom aquí mismo en esta página, entonces esta es la página de detalles del auto. Al hacer clic en una de estas tarjetas, en cualquiera de estas páginas. Entonces ya sea aquí o aquí, o incluso aquí, irás a esta página y luego esa etiqueta vendrá justo aquí arriba la etiqueta con el nombre mostrará el tipo de auto. Entonces, si recuerdas, están vendiendo SUV, están vendiendo estas limusinas, están vendiendo sedanes. Están vendiendo súper autos. No tendríamos que desglosar básicamente esos autos en tres categorías solo para mostrar qué tipo de auto es ese, y para eso vamos a usar el texto de la etiqueta. Entonces si vuelvo a mi etiqueta aquí mismo, lo que vamos a hacer con etiqueta es ir aún más pequeño y no tenemos que seguir necesariamente las reglas de ocho aquí mismo. Entonces tal vez pueda ir con 12. Ahí vas. Podemos ir con regular y tal vez 19 aquí mismo. Entonces veamos. Esto en realidad es el interlineado, que es básicamente el espaciado entre tus dos líneas. Entonces, si copio este texto y lo coloco hacia abajo y luego hacia abajo, el espaciamiento entre cada uno de estos es de 12. Entonces eso es lo que estamos tratando de lograr aquí mismo, porque tendremos que poner esos valores más adelante en Webflow. Entonces sabe cuándo empieza a escalar qué hacer y a dónde ir a partir de aquí. Entonces ahí vamos. Ya terminamos esto. Lo que podemos hacer tal vez es jugar con algunos colores. Así que vamos a ocultar el diseño por ahora. Lo que puedo hacer es simplemente dibujar un rectángulo y dejarme tal vez colorearlo de gris, quizás algo así. Entonces lo que haría es usar el color del cuerpo para el fondo. Entonces, si recuerdas, el auto, guau, sitio web no tenía el fondo completamente blanco, sino una especie de leve, ligero fondo gris poco. Lo que puedo hacer es quizás usar un color como este. Déjame esconderme para que lo veas un poco mejor, que es F6, F5, F5. Y se puede ver que es apenas un poco blanquecino. Y puedo agregarlo aquí mismo a mis muestras de color. Vamos a moverlo un poco hacia abajo, y llamémoslo color del cuerpo. Porque en HTML, el elemento principal que pones tus elementos en una página se llama body. Y ese cuerpo es donde va a ir todo y eso es lo que vamos a colorear. Entonces básicamente, en software de diseño como XD o Figma, el color de tu tablero de arte o de tu marco, va a ser el color del cuerpo cuando realmente lo muevas a HTML, porque esa es la etiqueta HTML, que es la etiqueta principal en el desarrollo. No te preocupes por ello. No vamos a escribir ningún código. Solo estoy tratando de explicarte cómo pensar en estas cosas cuando empiezas a diseñar y luego te mueves al desarrollo. Entonces este va a ser nuestro color corporal. A continuación, lo que vamos a necesitar es una especie de color gris claro, me solido, posiciona este justo aquí para que veas D2, D2, D2. Ahí vamos. Y déjame agregarlo como un gris claro, así. Y pueden ver que sigo usando guiones para distinguir lo que sea que estoy tratando de crear aquí mismo. Así que vamos a posicionarlo justo aquí. Y lo que ahora necesitamos es algún color gris más oscuro para distinguirlo un poco mejor. Algo así suele funcionar bien. Así que vamos a agregarlo aquí mismo. Vamos a llamarlo gris oscuro, algo así. Y por último, lo que necesitaremos es que necesitemos distinguir entre H1 y H2. H1 suele estar en la parte superior de cada página. Y luego a medida que bajes por la página, tendrás H2, H3 y bloques de texto y párrafos. Y tendrás que contar en tu SEO, tendrás que explicar eso en tu estructura. Entonces cuando empieces a desarrollar esto en Webflow, más adelante, tendrás que empezar a usar estos nombres. Porque más adelante, cuando Google indexa tu sitio, necesita entender qué tipo de textos es, dónde se encuentra en la página y qué tan importante es. Y sabe lo importante que es porque se lo dijiste, porque usas estos H1, H2, H3 P es para el bloque de texto del párrafo y así sucesivamente y así sucesivamente. Eso lo verás en Webflow. Pero sólo estoy tratando de explicarte esto aquí. Mientras que, mientras estamos en XD, cuando empiezas a diseñar, tienes que pensar en estas cosas todo el tiempo. Entonces pasemos ahora a ese color, como dije, para el H2, tal vez hasta h3. Entonces vamos a copiar ese color y voy a llegar a él en apenas un segundo cómo obtuve estos colores. Entonces déjame agregarlo aquí mismo. Entonces vamos con H3 y tal vez párrafo. Porque todavía necesitamos que esos párrafos sean legibles porque son bastante pequeños. Los puedes ver aquí mismo. Entonces vamos a seguir adelante y agregarlo. Entonces este va a tener un color de rumbo oscuro porque es un H1. A ver. H dos, tal vez podamos usar, Veamos. Entonces 2122 a cuatro. ¿Qué fue eso? Entonces tal vez podamos usar el mismo color. Entonces este para rumbo oscuro y para los tres años, tal vez podamos cambiarlo a algo como tal vez gris oscuro resultante. A ver. Entonces H tres, déjame cambiarlo a este color que es, creo gris oscuro. Ahora. Éste. ¿Lo es? No. Sí, vamos a usarlo para así. Entonces este va a ser nuestro color h3 para nuestro bloque de texto. Veamos qué podemos hacer. Podemos usar esta. Entonces gris oscuro para el párrafo. Ya explicamos que vamos a utilizar éste sólo para diferenciarlo un poco. Y para la etiqueta, lo que podemos usar es a mí con este color gris claro o incluso de cuerpo. Déjame comprobar en mi diseño original lo que solía D a E, tres ceros. Déjame ver qué color está muerto. Entonces es ésta. Entonces porque van a etiquetar el texto es demasiado pequeño, todavía uso este. Y ahora que hemos hecho lo que podemos hacer es seguir adelante y agregarlos. Entonces seleccionaré mi etiqueta. Y veamos, haz clic en Estilos de personaje. Voy a llamar a esta etiqueta. Entonces iré al párrafo, escribo en párrafo. A continuación, pasar al bloque de texto. Ahí vas. Y este va a ser nuestro h3h3. Este va a ser nuestro H2. Y finalmente, este va a ser nuestro H1. Ahí vas. Ahora que tenemos todo eso, déjame guiarte rápidamente a través de cómo llegué a estos colores. Así que generalmente cada vez que estoy diseñando, sea lo que sea que esté diseñando, siempre trato tener múltiples tonalidades de gris. Los colores grises más oscuros suelen ser para la topografía más grande de la página. Entonces para H1 o H2, entonces puedes ir un poco más ligero en esa oscuridad. Nunca usé completo el color negro porque es realmente difícil de leer para algunas personas. Así que siempre puedes escalarlo como un tono de dos fuera de color completamente negro en colores grises. Y entonces siempre me gusta crear un completo opuesto. Colores, por igual, digamos realmente gris claro. Así que sólo ligeramente blanquecino siempre. Puedes usar el blanco siempre, pero solo trata de asegurarte de que tienes color blanquecino. Como en este caso, tenemos este color de cuerpo que luego entraremos en uso para nuestro cuerpo. Pero ese es el punto aquí mismo en términos de un color azul. Pero puedes ver aquí mismo es que solo usamos ese color que encontramos en su página web. Retocarlo solo para tocarlo para que no sea completamente lo mismo porque nunca quieres usar exactamente el mismo color alguien más o solo un poco de ese color, entonces tenemos color estacionario, que es lo mismo que este color, así que solo azul pero en una perspectiva diferente. Y en cuanto a tamaños para las fuentes. Como dije, me gusta usar esa escala de ocho píxeles para mi tipografía. Entonces puedes comenzar con ocho, que suele ser bastante pequeño pero lo suficientemente bueno para, digamos aplicaciones móviles. Entonces puedes ir con 16, 24, 30 a 40, 48, 56, lo que sea. Así puedes ir hasta Latino 90 o cualquier tipo de tamaño que quieras hacer. Pero en nuestro caso, 64 es donde vamos a parar para H1. Y esa es básicamente nuestra escala tipo. Entonces lo que voy a hacer ahora es seguir adelante y deshacerme de ellos. Porque una vez más, esta es nuestra página de inicio y la trataremos así. Entonces volvamos a nuestra grilla. Y en estos casos, déjenme volver a mis columnas y bajémoslo abajo a cero. Por la opacidad. Bajemos esto a cero, o tal vez 2%, solo para que podamos ver lo que estamos haciendo aquí mismo. Así que volvamos a aquí al 2%, y volvamos a aquí también para presentar solo para que no nos distraiga cuando empecemos a diseñar. Y en realidad vamos a usar estos. Y finalmente, para el final de este video, permítanme extender esto hacia abajo porque eso es lo que vamos a usar en el siguiente video. Por fin vamos a abordar esta página de inicio. Y en realidad voy a empezar a poner algunos elementos y mostrarte cómo creé mi diseño original. Entonces comencemos. 136. Diseño de página principal: Vamos a retomar donde lo dejamos en el video anterior y empecemos a trabajar en nuestra página de inicio. Entonces aquí voy a pegar mi logo justo por aquí. Y déjame posicionarlo justo para que se alinee aquí mismo. Entonces voy a usar mi herramienta de rectángulo atajo es r, y voy a darle una altura de 80, por ejemplo porque siempre quieres darle alturas a tus elementos porque va a ser mucho más fácil definir ellos más tarde en Webflow. Colóquelo aquí y déjeme deshacerme de la frontera. Y este va a ser mi Nav y B G, y tienes que nombrar tus capas. Es súper importante. Vamos a golpear Control K para convertir este logotipo en un componente. Y puedes ver que podemos usarlo directamente aquí. Y en términos de convenciones de nomenclatura, tienes que nombrar tus capas más tarde porque más adelante en Webflow, va a ser súper importante porque vamos a usar todas estas clases. Entonces, si no nombras tus capas, tus diseños se van a desmoronar. Así que empieza a nombrar tus capas lo antes posible. Vas a hacerte la vida más fácil cuando llegues a Webflow más tarde. Entonces, tecleemos la deuda y la navegación. Entonces usemos autos. Y para eso, lo que podemos usar tal vez es, veamos, tal vez bloque de texto. Sí, eso funciona bastante bien. Y si recuerdas de aquí tenemos autos solos es contactarnos. Entonces solo tres de ellos. Entonces lo que podemos hacer es poner eso en un grupo y llamarlo elementos nav, así. Y veamos, tal vez la distancia entre todos estos elementos pueda ser de 24. Entonces encendamos la pila y vamos a duplicarla dos veces más. Volvamos y volvamos a 24, así. Y le daremos a esto préstamos y le daremos este nombre de autos. Perdón, No, No. Contáctenos. Ahí vas. Y por último, permítanme moverlos aquí mismo y colocarlos en el centro de este elemento. Ahí vas. Y para la página principal, Sigamos adelante y cambiemos ese color al color del cuerpo. Y se puede ver enseguida lo que pasó. Entonces por aquí, vamos con el color del cuerpo también. Ahí vas. Entonces se ve un poco transparente. Entonces lo que vamos a hacer es convertir cada uno de estos en sus propios componentes. Entonces golpeó Control K, Control K, Control K. Este va a ser autos. Este va a ser préstamos, y este va a ser Contáctenos. Ahí vas. Y por qué estoy haciendo esto simplemente porque quiero crear estados de terror. Entonces para hacer eso, da clic aquí mismo para crear una flor. Harvard. Ahí vas. Para el hover. Todo lo que quiero hacer es simplemente convertir esto en un color hover. Ahí vas. Porque si recuerdas, este es nuestro color hover. Entonces, todo debería estar en el color hover una vez en hover. Entonces este, vamos a convertir esto en un estado de horror. Cambiemos el color. Demos también este estado de horror. Cambiemos el color. Vamos a traer esto de vuelta. Vamos a traer esto de vuelta, y vamos a traer esto de nuevo a default, control de estado, enter para previsualizar, y se puede ver cómo se ve esto. Entonces estamos empezando a obtener el layout y la idea que queremos crear. Y creo que esto va a funcionar muy bien. Entonces, ahora sigamos adelante y agruparemos estos. Entonces tenemos los elementos logo nav y f, b, g. así que vamos a Control G para agrupar esto en un grupo, llamarlo nav. Ahí vas. Y porque vamos a reutilizar esta navegación a lo largo de nuestro diseño, y ahora como ya tenemos estos artículos, lo que realmente quiero hacer es seleccionar mis elementos una vez más y agregar un nuevo estado, que va a ser seleccionado. Estado. En realidad copia este texto para no tener que escribir una vez más. Por lo que el estado seleccionado y anular la selección del estado nos mostrará que estamos en esa página. Entonces usemos azul principal para ese azul principal y bucle principal. Entonces, lo que sucederá es cuando el usuario haga clic y visite esa página, y mientras estén en esa página, verá ese color visitado. Entonces, vamos a darle a Control K para convertir nuestra navegación en un componente, como dije, porque vamos a empezar a usarlo más tarde. Entonces usemos T para nuestra herramienta de texto. Y aquí mismo escribe a tu pareja para tu pareja, para autos exclusivos. Y estos textos serán H1. Vamos a dividirlo en dos líneas, algo así. Vamos a darle un codazo hasta aquí. Control D para duplicar esto, permítanme seleccionar realmente el texto de mi InDesign original. Y convertiremos esto en bloque de texto y peguemos mi texto M. Así que los autos usados certificados con bajo kilometraje e historial documentado es de lo que hablamos con nuestros clientes. Y te están dando autos de bajo kilometraje porque los están tomando de estos concesionarios oficiales en Alemania. Y documentó la historia porque obviamente los autos son tomados directamente de los concesionarios, por lo que es mucho más sencillo rastrearlos de esa manera. Entonces lo que haces es duplicar esta una vez más. Y voy a usar algo como explorar nuestros autos. Y este va a ser el texto de nuestro botón. Y en cuanto al botón, sigamos adelante y usemos algo como esto. Tal vez haga clic con el botón derecho en enviar atrás y traer esta escena aquí mismo. Voy a centrarlo aquí mismo. Se puede ver. Así que vamos a centrarlo aquí. Y vamos, vamos a darle un color azul principal y deshacernos del borde. Seleccione mi texto y gírelo blanco. Y para esto, lo que podemos hacer es quizá usar ocho para el radio de esquina aquí mismo. Algo como esto para que podamos obtener esa apariencia redondeada. Entonces veamos, tal vez pueda darle un codazo solo un poco para escuchar. Colóquelo en el centro. Y una vez más dales nombres. Entonces este va a ser nuestro BTN BG, entonces botón de fondo, y este va a ser nuestro texto. Entonces vamos a darle a esto un nombre de main, btn. Entonces botón principal. Y voy a convertir de inmediato eso en un componente pulsando la tecla Control. Haga clic en Más y pase el cursor, llámalo hover. Dentro de nuestro estado Horacio. Todo lo que quiero hacer es cambiar esto a un color hover. Así que cierra esto, vuelve al estado predeterminado, presiona preview. Y cuando prevea, se puede ver cómo se ve esto. Entonces ahora tenemos el cursor sobre nuestros elementos de navegación, y también tenemos el cursor sobre nuestro botón, que está funcionando bastante bien. Lo que quiero hacer es conseguir algo de espaciado aquí mismo. Entonces volteemos esto, muévalos a la izquierda y agruparlos y llamémoslo por ejemplo héroe. Contenido. Así, lleva esto a una pila y dale una distancia de 32. Así que las pilas son útiles, como puedes ver aquí mismo. Para ti también. Da un espaciado rápido para organizar tu contenido un poco mejor, y en general para mejorar tu velocidad cuando empieces a trabajar con eso. Entonces veamos qué podemos hacer aquí mismo. A lo mejor puedo usar la imagen. Entonces déjame, déjame ver qué puedo hacer. Tengo mi imagen de héroe preparada aquí mismo, que una vez más es de elementos Envato. Déjame usarlo más o menos por aquí. Tal vez. Algo así va a funcionar bastante bien. Yo creo. Lo que necesito en este caso es usar algún tipo de círculo para que salga del círculo. Porque si recuerdas de aquí, vamos a tener estos dos círculos alrededor. Y a lo mejor se verá bien si el auto viene de este círculo de algún tipo o algo así, llegó a saber. Así que permítanme hacerlo realmente rápido. Entonces lo que puedo hacer en este caso es usar mi círculo, algo así. Y vamos a darle unas dimensiones rugosas como 38 por 388. Entonces va a ser un círculo. Colócala aquí, luego un empujarlo al fondo, Enviar a Atrás y posicionar mi carro o más o menos por aquí. Esto va a ser, veamos cómo podemos llamarlo. Quizá círculo de imagen de héroe, algo así. Y trae de vuelta un poco nuestra imagen de héroe. Controla una D, vamos a llamar a esta mezquita héroe máscara de imagen. Colóquelo en la parte superior y luego simplemente presione Control de Cambio, Comando de Cambio M. Vamos a llamar a este Héroe IMG, así que imagen de héroe. Y permítanme extender esta máscara a este sitio, o tal vez incluso a este lado, algo así. Va a trabajar bastante bien. Todo lo que quiero hacer es tener mi círculo a la vista. A lo mejor pueda ampliarlo a este lado. Veamos qué podemos hacer aquí. Entonces algo como esto creo que va a funcionar muy bien. Y ahí tienes. Entonces tal vez así, también puedes usar un rectángulo. Puedes hacer lo que quieras. Pero en este caso sólo voy a usar mi círculo. No, mejor aún, usemos un rectángulo. Entonces máscara no grupal. Vamos a deshacernos de éste. Y usemos un rectángulo porque tenemos una cuadrícula. Y va a tener un poco más de sentido para nosotros usar realmente el rectángulo en este caso así. Y llamémoslo máscara y Control de Cambio. Shift Comando M, y llamémoslo imagen de héroe. Y creo que ahí estamos bien. Todo lo que quiero hacer es simplemente seleccionar mi círculo de fondo, deshacerme de mi borde. Entonces se ve algo así. Y estoy muy contento con cómo se ve eso. Así que vamos a ver. Estamos ahí en el centro, puede estar más o menos por aquí en los bordes. Y tal vez mover nuestro círculo en sólo un poquito para que no quede cortado por la máscara. Y ahí vamos. Ahora que tenemos en deuda. Tal vez incluso podamos centrar nuestra máscara, solo una pequeña oferta a aproximadamente por aquí. Y estos son importantes porque querrás que tus mediciones posteriores sean exactas y precisas cuando realmente te mudes a Webflow. Así que posiciona esto y baja un poco todo mi contenido. Y lo que voy a hacer en este caso es, veamos, quiero usar un círculo. Entonces vamos con un círculo aquí porque voy a posicionar eso como lo creamos aquí mismo. Para que veas tendremos dos íconos y dos círculos. Entonces para este top uno, llamémoslo, Veamos el círculo de los mejores héroes. Círculo de iconos de héroe superior o algo así. Y para el color, podemos usar nuestro azul principal. Y tengo mi icono aquí mismo. Una vez más, obtendrás todos estos iconos ya preparados. Y los mostraré al final de la parte de diseño de la clase. Simplemente puedes usarlos. Quizás pueda crear una guía de estilo aquí mismo para que puedas copiar y pegar todos estos iconos que estoy usando ahora mismo, y solo usarlos para seguirlos. Entonces ahora que posicionamos esto, Vamos a boxes, Vamos a llamarlo héroe superior, círculo. Así. Y tal vez podamos darle un codazo brusco por aquí. Vamos a duplicarlo. Muévelo quizás aquí mismo, tal vez solo reduzca ligeramente el tamaño a algo así. Entonces este va a ser nuestro fondo. Abajo aquí, un círculo, y abajo aquí, un círculo. Ahí vas. Y para esto, permítanme usar solo otro icono, que va a estar en este. Ahora vamos a darle un codazo aquí mismo. Y solo estoy usando un icono de llave para mostrar la llave de un auto. Vas a conseguir tu auto, algo así. Y aquí estamos usando el lote para la garantía. Así que vamos a convertir esto en un componente, y vamos a convertir esto en un componente también. Así que va a ser mucho más fácil más adelante para mí crear esas guías de estilo y que ustedes las usen en este archivo. Entonces para éste, lo que puedo hacer es incluso darle un empujón hasta aquí o tal vez pueda empujarlo a tal vez 20, algo así. Sí, dejémoslo ahí. Y usemos algún color gris oscuro, tal vez algo así. Y creo que eso funciona bastante bien. Entonces finalmente lo que puedo hacer es agrupar todos estos y llamarlo imagen de héroe, algo así. Y la posición de estos dos son más o menos por aquí. Entonces lo que vamos a hacer es quizá mover este contenido hacia abajo, digamos a 100 pixeles de aquí, lo cual creo que va a funcionar bastante bien. Ahí vamos. Y ahora en realidad vamos a agruparlos y llamemos a esto Héroe. Ahí vas. Hagamos otra. pasar a un poco de descanso, vamos a crear esa siguiente sección, que va a ser quienes somos. Y vamos a tener una imagen en el lateral. Tendremos líneas de texto y quiénes somos en la parte superior. Entonces, debido a que usamos H1 aquí mismo, solo será natural que usemos H2 aquí mismo en la parte inferior. Entonces lo primero es lo primero, comencemos con nuestra imagen. Entonces lo que voy a hacer es crear un rectángulo rápido, algo así. Y veamos, tal vez podamos usar 246 columnas así. Y por las dimensiones, Vamos con, no sé, tal vez cinco, tres-tres de altura. Y veamos, tal vez puedas darle vida incluso un poco para que puedas abrir este panel aquí mismo. Y esto te va a dar un radio de esquina para cada esquina e individual. Lo que voy a hacer es redondear justo esta esquina de aquí mismo a tal vez 24 pixeles, algo así. Deshazte de la frontera porque no la necesito. Y vamos a darle un nombre. Puede ser quienes somos, quiénes somos o algo así. Déjame tomar la imagen por lo que somos. Ahí vamos. Entonces es ese tipo de elementos Envato, si recuerdas. Y tal vez podamos escalarlo solo un toque, colocarlos en el centro, tal vez más o menos por aquí. Tal vez un poco más. Y me gusta cómo se ve eso. Creo que está bien. Y ahora sigamos adelante y agreguemos ese texto al costado. Entonces como dije, vamos a usar los tres años. Así que vamos a escribir en una araña autos exclusivos, especie de H2. Ahí vas. Y vamos a alinearlo para este caso. Ahora vamos a posicionarlo tal vez por aquí, Control D. Y lo que puedo hacer ahí es quizás crear algún tipo de lama o algo así. Entonces usemos textblock para ello. Y peguemos algunos textos de pasión y dedicación. Puedes usar algo así o algo diferente. Sólo para darle a tus párrafos un poco más de vida, un poco más de sentido, un poco más de estilo. Así que no solo estás usando algunos textos en blanco que encuentras en línea. Este último como viste, lo convertí en un párrafo así y voy a pegar en un párrafo. Entonces se trata de ellos cuando empezaron, cuando crearon su negocio, cuántos clientes tenían. Tal vez algunos datos y cifras importantes como en cuántas ubicaciones están tratando y tal vez dónde se encuentra la sede, ¿cuántos empleados tienen? Así que cosas así. Va a funcionar bastante bien en la sección Acerca de Nosotros. Por último, coloquemos esto donde deberían estar, deberían estar en la cima. Esto debería estar justo aquí. Vamos a agruparlos. Así Control o Comando G, posicionando aquí mismo. Y llamémoslo algo así como veamos, textContent son solo texto. Y vamos a darle una pila de 24, así. Y vamos a agrupar a estos dos. Pero antes de eso, solo posiciona esto en el centro. Creo que va a funcionar bastante bien. Entonces veamos. Sí. Y agrupa estos Control G y escribe algo así como quienes somos. Ahí vamos. Antes de seguir adelante, lo que puedo hacer es simplemente moverlo porque aquí teníamos 100. Quiero mantener el espaciado consistente a lo largo de mi diseño y compilación de Webflow. Entonces iremos con, digamos 101, 50, o 200, dependiendo de la sección en cuestión. Entonces aquí lo que podemos hacer es que tenemos un veinte, tal vez podamos empujarlo hasta 200 porque creo que tenemos suficiente espacio. Ahí vas. Si presiono Control o Comando Enter para entrar en el modo de vista previa, tenemos nuestro botón que está funcionando bastante bien. Entonces tenemos autos, préstamos contáctanos. Tenemos nuestra bonita sección de héroes con esta imagen algo así como que viene de este círculo. Y si tuvieras algunos colores adicionales, como tal vez colores de acento, puedes convertir un círculo en ese color de acento para darle un poco más de vida. Entonces tenemos esta sección, tal vez este sea Marco, nuestro Presidente clave dentro de la empresa. A lo mejor es él quien va a poder ayudarnos con la compra de un auto o lo que sea. Y luego tenemos alguna nota publicitaria sobre la compañía. Entonces en la siguiente sección vamos a pasar a esto, que son tarjetas para nuestros autos. Y va a ser sección bastante importante porque como puedes ver, estos carros van a repetirse a lo largo de nuestro diseño. Te veré en el siguiente video cuando vamos a crear justamente eso. 137. Diseño de página principal: Ahora continuemos donde lo dejamos y creamos esas secciones de tarjetas. Entonces lo que puedo hacer es quizás usar otros tres años y pegar algunos son selección exclusiva, tal vez asegurarme de que esté en el centro, así. Y tal vez pueda moverlo 200 lejos de esta sección también, algo como esto. Para que veas que lo estamos posicionando ahí. Entonces lo que puedo hacer es quizás usar mi grilla para crear mis tres cartas. Así que primero vamos a crear uno, y luego vamos a seguir adelante y crear otros. Entonces lo primero es lo primero para nuestra tarjeta, lo que usaremos es, veamos. mejor podemos darle un nombre de inmediato y llamarlo tal vez stock. Artículo B, G, o puede darle un nombre de artículo de automóvil BG o lo que sea. Pero debido a que este es su stock y lo que tienen en stock, vamos a utilizar justamente eso. Entonces, lo que podemos hacer ahora es a ver, tal vez pueda usar un color de borde aquí mismo de inmediato. Entonces 2D, tal vez este de aquí, aplicó color de borde. Sólo vamos a usar uno. Tan ligero color de borde porque lo usaremos para el efecto hover un poco más tarde. Entonces lo que puedo hacer aquí mismo es quizás extender esto. A ver. Tal vez incluso pueda redondear las esquinas a ocho para tener esa apariencia consistente. Y primero lo primero me voy a deshacer de la frontera aquí mismo, pero sólo voy a bajar la opacidad, así. Y entonces lo que puedo hacer es presionar Control D y usar esto como mi imagen. Entonces vamos a ver. A lo mejor puedo llamar ocurrió porque ese va a ser el nombre de nuestro auto o imagen de auto. Ahí vas. A ver. En primer lugar, para el tamaño de la tarjeta, tal vez puedas ir con una altura de 450 o algo así. Entonces vamos con por 50 en este caso. Y para la imagen de mi auto, puedo ir con algo así como, veamos 250. Entonces esa es la imagen de mi tarjeta. Pero por la altura, ahí tienes. Sólo voy a seguir adelante y deshacerme de algunas de estas esquinas redondeadas en la parte inferior. Entonces, si pasas el mouse, esto va a ser de arriba a la izquierda, arriba a la derecha, abajo a la derecha no queremos, y abajo a la izquierda no queremos también. Entonces lo que puedo hacer es saltar de inmediato y agregar mi imagen. Entonces déjame ir al huracán Lamborghini. Y una vez más, se puede ver cómo se ven estos. Y voy a sumar el número tres para todos estos porque solo muestra el auto en tres cuartos. Por lo que da suficientes detalles para que sepas de qué se trata. Entonces solo arrástralo y suéltalo dentro de su ego. Y lo que puede hacer aquí mismo es comenzar con alguna información. Entonces lo que voy a hacer aquí es tipo alarma de dolor o Heaney ¿quién recurre? Pero en vez de 32, vamos con algo más pequeño, como 24. Ahí tienes, asegúrate de que quede alineado a la izquierda. Un médico encantador en aproximadamente por aquí. Y veamos por el espaciado, lo que podemos hacer es tal vez podamos ir con 24 por todas partes. Entonces 12, 123-412-1234. Y ahí tienes. Ese va a ser nuestro espaciamiento. Y entonces tal vez pueda duplicar esto una vez más controlar D. Y veamos a dónde puedo ir tal vez con 16 esta vez. Entonces 20123416, Este va a ser nuestro precio. Así que déjame tomar el precio de nuestro diseño original y vamos a darle la vuelta a azul. Y por último, vamos a dar alguna información en la parte inferior. Y usaremos esa información para básicamente decirle a nuestra audiencia qué año es el auto, ¿qué tipo de kilometraje tiene el auto o algo así? Apenas alguna información mirable antes de pasar a la información principal. Así que vamos a duplicar esto y vamos a darle el bloque de texto y vamos a darle 2021, tal vez la edad del color. Y coloquemos esto en un grupo de control G, como puedes ver aquí mismo. Y tal vez podamos llamar a esto algo así como año, kilómetros. Se puede ver. Y vamos a darle una pila y duplicar nuestra capa de texto. Y posicionemos esto para que sea 24. Y esto puede ser ¿cuántos kilómetros tiene el auto? Se puede utilizar el kilometraje. Estoy usando kilómetros porque es más fácil para mí. Pero lo que sea que funcione para ti, también puedes hacerlo. Así que vamos a darle un codazo a esto justo debajo de nuestra imagen. Veamos aquí lo que tenemos. Tenemos 16, aquí tenemos 16, 24. Por lo que es natural que vayamos 24 desde abajo, creo. Entonces. Imaginemos esto a 2042 píxeles más. Vamos a acercar solo un toque y podrás ver por qué esto es útil. Ahora que tenemos nuestro diseño, lo que puedo hacer es agrupar estos elementos y llamarlo tarjeta de coche, texto. Entonces agrupa todo y llámalo tal vez tarjeta de auto o algo así. Y vamos a duplicarlo. Control D. Y Control D. Permítanme intercambiar rápidamente algunos de estos elementos. Entonces aquí voy a tener mi Cadillac escalar. Y entonces aquí voy a tener mi precio. El año será 2020. Y los kilómetros serán algo así como algo así. Ahí va, funciona bien. Y luego vamos con algo un poco diferente. Esta vez el auto va a ser procurador eléctrico. Y vamos con el kilometraje. Kilómetros. El año va a ser 2020. 2 km tendrán esto para ser 6,000 y tal vez a 40. Entonces todos ellos tienen un kilometraje bajo y vamos a cogerlos hacia abajo. Esto va a estar en el centro. Ahí vamos. Y veamos, tal vez podamos usar algo de espaciado de inmediato. Entonces en vez de 113, tal vez podamos ir con algo bonito y redondo como el 64. Entonces, una vez más, nos quedamos con ese espaciado de ocho. Creo que eso funciona bastante bien. Y lo que voy a hacer en este caso tal vez sea golpear y decir una de estas cartas. No lo sé. Déjame usarlo. Así que dale Control C o Control D y simplemente dale un codazo aquí mismo. Entonces déjame seleccionar esta imagen y usar el gris claro así. Y déjame seleccionarlo aquí. tarjeta de auto funciona bastante bien. Dejémoslo ahí porque voy a dar nombres a estas tarjetas. Entonces este va a ser un auto hurra. Esto puede ser escalado. ver si tiene el año, y esto puede ser lúcido, solo para que sepa lo que es todo. Y en cuanto a imágenes, volvamos y simplemente encontremos Cadillac Escalade número tres. Y volvamos ahí con Lucy. Número tres, arrastra y suelta. Y una vez más, obtendrás estas imágenes para que puedas jugar con ellas también. Entonces ahora vamos a convertirlos en componentes. Este efecto hover no va a funcionar muy bien aquí, creo, porque tenemos un borde de píxel y solo va a ser cubierto por la imagen. Entonces lo que puedo hacer en este caso es simplemente bajar un ancho de la imagen a tal vez 372. Entonces solo dos pixeles a cada lado y posicionan su centro. Haz lo mismo aquí. Entonces 372, porque solo estoy pensando en cómo hacer esto más adelante en Webflow. Y creo que este tipo de enfoque va a funcionar bastante bien porque en el estado predeterminado solo tendrás sin fronteras. Y en el estado hover tendremos un borde de un píxel, C37 para solo asegurarnos de que esto esté en el centro. Y una vez más, este es nuestro estado predeterminado. Así que seleccione el control de huracanes, K escalar Control K Lucid Air Control clave. Y ahora vamos a llevarlos a flotar. Selecciona este texto y selecciona el estado de terror. Ahí vas. Seleccione el estado ferroso, encantador. Y en lugar del estado de terror, selecciona el fondo y lleva la opacidad fronteriza a 100. Haz lo mismo para éste. Y haz lo mismo por éste. Ahí vas. Cierra todos tus componentes, vuelve al estado predeterminado. Y creo que deberíamos estar bien para ir aquí. Sí. Así que vamos a obtener una vista previa rápida solo para ver qué tenemos. Así que todavía tenemos todos estos elementos que diseñamos en el video anterior, pero ahora tenemos esta tarjeta. Entonces cuando flote, puedes ver cómo se ve. Simplemente tiene este pequeño y agradable efecto hover en nuestras fronteras. Y creo que solo se suma un poco a esa usabilidad porque estás demostrando a los usuarios que en realidad rondaban y en realidad pueden hacer algo al respecto. Lo que vamos a hacer a continuación es usar nuestro botón principal. Simplemente arrástralo y suéltalo dentro. Voy a agregar el tipo de edición de los componentes principales. No sé por qué se cambia aquí mismo, así que vamos a deshacernos de esa. Alice acaba de agregar este primero. Entonces lo que voy a hacer es quizás, veamos, puedo encender una pila en mi botón, que va a activar el emparejamiento. Y me voy a deshacer de la pila porque va a seguir manteniendo nuestro relleno. Y ahora puedo seguir adelante y arrastrar mi botón principal y arrastrarlo hasta aquí, colocarlo en el centro. Y se puede ver que ahora tenemos este lápiz y este diamante lo que indica que este es componente hijo de estos componentes maestros. Entonces, en términos simples, sean cuales sean los cambios que hagamos aquí, se va a traducir a aquí. Pero cualesquiera que sean los cambios que hagamos aquí no se va a traducir a aquí porque este es el original. Entonces en este caso, lo que quiero hacer es cambiar el texto para ver todos los autos y se puede ver como responde el botón. Seleccione el texto, cambie al estado de desplazamiento para cambiarlo aquí también. Ahí vas. Porque tenemos dos estados. Recuerda que si tienes más, tendrás que cambiar más. Entonces aquí cuando flote , dirá explorar nuestros autos. Pero aquí cuando flote, dirá, Ver todos los autos y el tamaño va a cambiar. Entonces. Lo que puedo hacer es quizás darle un codazo para que esté a los 64 también, algo así. Asegúrate de que esté en el centro. Ahí vas. Y vamos a llamar a esta sección selección exclusiva o nuestra selección. Ahí vamos. Bonito. Y lo siguiente va a ser lo que ofrecemos. Si te llevo de vuelta hasta aquí, veamos dónde estamos con el tiempo. Entonces, lo que ofrecemos, eso es lo que vamos a diseñar un de vez en cuando hacer un pequeño descanso. Entonces aquí voy a escribir lo que ofrecemos. Y para eso, a ver, vamos a usar H3 una vez más. Entonces h tres, estamos en el H2, lo siento, estamos en una posición central, su centro, y vamos a darle una vez más la distancia de 200. Entonces veamos 213. Entonces mu una vez más. Veamos 200. Su ego y una guarida. Lo que podemos hacer es simplemente usar otra de esas imágenes. Así que permítanme crear eso muy rápido. Y tal vez podamos usar solo la otra esquina redondeada como lo hicimos anteriormente. Entonces veamos 246, quizá siete columnas ahora, algo así. Entonces 2467, términos de altura, Vamos con cinco o siete. Y en términos de radio de coordenadas, vamos con el radio en la esquina inferior izquierda de 24. Deshazte de la frontera y déjame arrastrar y soltar mi imagen dentro, que va a estar en esta por lo que ofrecemos. Ahí vas. Puedo seguir adelante y hacer doble clic y tal vez agrandarlo un poco. Pero no creo que sea necesario porque está mostrando la clave. Y voy a bajar un poco estas dos secciones. Una vez más, estamos a 200 de aquí. Y aquí vamos a empezar realmente a usar algunos elementos. Entonces vamos a ver. A lo mejor pueda usar esa placa una vez más. Así que insignia de garantía así. Y tal vez pueda colorearlo de azul. Y a lo mejor le pueda dar algunas dimensiones diferentes. Entonces veamos, tal vez el derecho en realidad va a ser bueno. Lo que voy a escribir aquí mismo es garantía extendida porque eso es lo que están ofreciendo. Y vamos a usar tal vez H3 para éste. Porque creo que va a funcionar mucho mejor que la A12. Veamos por la distancia tal vez podamos posicionarlo. En primer lugar, selecciona estos para asegurarnos de que estén en el centro y codazo esto para que tenga tal vez 16, algo así para que podamos mantener nuestro espaciado y organicémoslos un poco mejor. Así que voy a hacer es darle un codazo todo el camino hacia abajo solo hasta aquí Control G. Y he sido una orden para convertir esto en una pila. Y tal vez lo que podamos hacer a continuación es quizá usar texto. Así que escribe T, y vamos a seleccionar esto y pegarlo en. Y lo que voy a hacer es convertir esto en un bloque de texto. Asegúrate de que sea desde el lado, desde el lado izquierdo. Aquí por la distancia entre una presa, vamos a ir con s104. Para que veas que seguimos manteniendo esa consistencia, así que algo así. Y vamos a darle un codazo esto y solo un poco y hacia abajo. Entonces vamos a llamar una garantía de disco una vez más. Entonces podemos dar esto, ver cómo podemos estructurar esto. Podemos llamar a este icono de garantía o algo así. Veamos icono o título. Ahora vamos a darle 1.2. Y luego solo agrupa estos dos y llámalos garantía también. Simplemente va a ser súper sencillo para nosotros hacer eso. Y nos vamos a preocupar nombrar un poco más tarde en Webflow. Entonces lo que voy a hacer con estos es quizás estructurarlos de tal manera que tal vez tengamos 40 distancias entre ellos, algo así. Entonces esto va a estar todo el camino hacia abajo. Esto va a estar todo el camino en la cima. A este siguiente llamaremos a mantenimiento. Y el último llamaremos préstamos. Y para el mantenimiento, déjame usar el icono de mantenimiento para mi diseño original. Voy a saltar aquí mismo y colocarlo aquí. Asegúrate de que estoy en el centro de mi diseño porque es una pila. Simplemente presiona eliminar y va a colocarlo de nuevo en su lugar. Y como pueden ver, seguimos en el centro con estos dos elementos. Entonces, si sigo adelante y los selecciono, da clic aquí mismo. Ahí vas. Así que permítanme copiar el texto de mantenimiento. Ahí vas. Sólo vamos a ver. Pasa esto hasta aquí. Encantador, porque no giramos esto de la línea central a la izquierda alineada. Hagámoslo. Hagamos esto por aquí. Hagamos esto por aquí. Veamos aquí estamos, aquí estamos, y quiénes somos también. Así que ilegalmente, copiemos los textos de mantenimiento y copiemos. Entonces veamos, esto también va a ser mantenimiento. Ahí vas. Y esto va a ser préstamos también. Entonces, vamos a teclear alarmas. Y en cuanto al icono, voy a copiar el icono también y hacer lo mismo que hice anteriormente. Entonces saltando dentro de aquí, Control o Comando V se asegura de que esté en el centro la mezcla es justo antes de que los préstamos golpeen a este lote, retírelo, y ahí tienes. Ahora tenemos a estos dos en la posición que queríamos que fueran. Entonces déjame copiar el texto de los préstamos. Ahí vas. Y esta sección básicamente solo muestra a los usuarios lo que realmente ofrecen. Ofrecen garantía extendida. Entonces tienes ese pedazo de mente adicional. Ofrecen mantenimiento de acuerdo con sus socios porque ellos mismos no proporcionan el mantenimiento. Y por último, vuelven a otorgar préstamos a través de sus socios para que puedas asociarte con ellos sobre aquellos solos. Entonces una vez más, finalmente, tenemos 40 espacios entre todos nuestros artículos. Y veamos, tal vez podamos llamar a este grupo control G y llamarlo, digamos ofrecer información. Y asegúrate de que estos dos están en el centro y estamos a 64 de aquí. Algo así. Creo que va a funcionar bien. Y lo que podemos hacer es agruparlos y llamarlo de lo que ofrecemos. Nuestra oferta aún mejor. Ahí vas. Si llegamos a un avance rápido, lo que hicimos hasta ahora, hemos explorado nuestros autos. Tenemos estas tres, tenemos a este héroe, tenemos en esta sección Acerca de, tenemos estas cartas con efectos hover. Tenemos nuestro nuevo botón con nuestro efecto también, lo que ofrecemos. Entonces tenemos todos estos elementos en su interior. Y ahora veamos qué sigue. El siguiente son los beneficios, luego contáctanos donde estamos. Y finalmente, el pie de página estará ahí abajo. Una vez más, un diseño va a avanzar mucho más rápido porque vamos a crear contactanos donde estamos, sección de pie de página y héroe, especie de sección de navegación, lo siento. Y solo los copiaremos y pegaremos a lo largo de nuestros diseños. Así que solo este primero cuando realmente empecemos a desglosarlos y posicionar estos elementos en la página va a ser mucho, mucho más simple más adelante cuando realmente sigamos adelante y creamos eso. Entonces eso es todo para éste. Y déjame verte en el siguiente video donde vamos a continuar. 138. Diseño de página principal: Pasemos ahora a la siguiente sección que va a ser sobre beneficios. Entonces lo que voy a hacer es seleccionar este control de texto C, colocarlo fuera del Control V y escribir nuestros beneficios. Así, asegúrate de que esté en el centro y coge todo el camino hacia abajo. Entonces lo que voy a hacer es usar una herramienta de rectángulo rápido para crear en una especie de sección de ruptura aquí. Y déjenme darle una altura de tal vez, veamos 469, creo. Veamos 200 aquí. Así mismo como todos estos otros. Y vamos a darle algún nombre, como prestaciones sección BGN. Lo que voy a hacer en este caso es darle este color oscuro y convertir este texto en textos de blanco puro y darle un codazo brusco por aquí. Entonces ahora que lo hemos hecho, lo que voy a hacer es usar alguna imagen que también encuentro en los elementos de Envato. Y lo voy a dejar en una colección también. Colóquelo aproximadamente por aquí para que veamos esta luz trasera, algo así. Y veamos En cuanto a y obesidad, tal vez pueda darle una en mi teclado, pero no en todo, solo en esta imagen. Vaya, lo siento. Hagámoslo otra vez. Así que haz esto, pero en vez de BG, llamémoslo beneficia imagen IMG. Y luego dentro de esa, vamos a arrastrar y soltar esa imagen. Haga doble clic en posición manteniendo pulsada la tecla Mayús y haciendo clic Y luego una vez que hayas terminado, presiona uno en tu teclado para bajarlo a una opacidad del uno al diez por ciento. Y si le damos un codazo a este navegador aquí, se puede ver cómo se ve eso. Entonces tenemos este bonito efecto ghosting. Y esa va a ser quizás una de las partes más oscuras de nuestro sitio web o rol. Porque si recuerdas, nuestros clientes nos dijeron que realmente no les gustan estos diseños oscuros. Entonces aquí lo que vamos a hacer es tal vez en lugar de 32, tal vez podamos usar H3 y usar blancos una vez más. Y vamos a escribir en la entrega gratuita. Ahí vas. Y con esto, vamos a darle a Control D para duplicarlo. Y aquí tal vez podamos usar el texto del párrafo. Entonces párrafo, y vamos con el color del cuerpo esta vez, en vez de blanco puro. Ahí vas. Y escribe pin este texto. Y en cuanto al espaciamiento, tal vez podamos ir con 24. Así que vamos 123424 y asegurémonos de que estamos en el centro. Y simplemente voy a copiar el icono que estaba usando aquí. Y colóquelo aproximadamente alrededor. Aquí. Ahí vamos. Y esto también puede ser 24. Por el espaciado agradable y uniforme. Este va a ser ícono de entrega gratuita y voy a golpear Control K para convertirlo en componentes, entrega gratuita y a nivel nacional donde está. Ahí vamos. Entonces vamos a tener estos tres bucles. Entonces entrega gratuita, entrega gratuita, Control a nivel nacional, G, para agruparla. Y llamaremos a esto entrega gratuita así. Y para asegurarnos de que estamos posicionados de manera uniforme, lo que voy a hacer para el espaciado es arrastrar un rectángulo alrededor de estas cuatro columnas. Luego selecciona mi contenido y haz clic aquí para asegurarte de que esté centrado. Ahora que lo he hecho, lo que puedo hacer es controlar D y simplemente darle esto al Control Central D y simplemente posicionar esto para aquí. Usa mi truco de rectángulo una vez más. Pero antes que yo, porque aquí vamos a cambiar el texto. Entonces, primero hagamos eso. Al igual que así. Y esto va a ser un intercambio parcial. Y llamémoslo bolsa de granja. Y ahora que lo hemos hecho, podemos posicionarlo de manera uniforme porque los textos de los párrafos son la parte más amplia de la sección. Para el intercambio de piezas, déjame usar el icono del diseño original de zoom en solo un toque. Posicione esto aquí. Y vamos a dar un codazo en estos dos de aquí. Todo el camino hacia abajo. Ahí vas. Presiona Control K para convertirlo en un componente. Y ahora en el centro, lo que vamos a tener va a decir pulido de tres etapas. Así que vas a estar a salvo cuando obtengas el coro de destilador porque van a pulir tu auto y básicamente no va a permitir que se ensucie o que sea por su pintura estar contaminado o algo así. Entonces, en este caso, posicionemos esto aquí. Vamos a darle un codazo hasta aquí. Ahí vas. Deshazte de esto. Golpea Control K en esto. Asegúrate de que todos estén centrados. Al igual que así. Entonces se asegura de que el texto esté centrado. Estos dos ya lo son porque ya hicimos eso. Y como pueden ver, en tan solo unos pasos, los conseguimos. Ahora en cuanto a estos iconos, de donde los obtuve es obviamente los vas a conseguir dentro del diseño, como dije, pero los obtuve de los buscadores de iconos. Y lo que hice aquí mismo es que creé mi colección. Y puedes ver todos estos diferentes íconos que vamos a utilizar a lo largo de nuestro diseño. Y para usar uno de estos, es bastante sencillo. Click lo va a copiar y luego puedes pegarlo básicamente donde quieras en tu diseño. Puedes escalarlo, puedes cambiarlo a lo que él quiera. Entonces es súper sencillo de hacer. Lo que te voy a recomendar es que vayas a tus plugins, que es esta área aquí mismo. Da click en el Plus, localiza el icono scout, y luego simplemente ve a su página web si quieres crear esta colección. O cuando descargues algo, puedes ir a mis descargas y puedes localizar tus descargas más tarde en el sitio web y luego hacer clic en el icono del corazón ahí para dárselas a mis colecciones. Y luego podrás posicionarlos todos en tus colecciones. Así que así de súper simple es usar estos iconos y ahí es donde encontré todos estos iconos increíbles. Entonces podría haber usado los elementos Envato, pero no quería, para los iconos, a propósito quiero usar el ícono Scott, solo para mostrarte lo fácil que es usar n, que puedes encontrar todos estos grandes íconos ahí. Entonces vayamos aquí con el polaco de tres etapas. A ver. Y veamos qué podemos hacer. Nuestros beneficios los posicionan en la cima. Veamos de aquí para acá, tal vez podamos darle esto a 64, así. Y luego seleccionar todo nuestro contenido y darle un codazo para que se centre así. Ahí vamos. Y puedo agruparlo todo y llamarlo beneficios son beneficios así. Y ahora pasemos directamente a nuestro formulario de contacto. Si te llevo de vuelta hasta aquí, si recuerdas, tenemos Contáctenos y entonces lo que vamos a hacer es quizás tener, veamos cuántos campos, donde podemos tener cinco campos en total. Entonces tal vez este pueda pasar aquí mismo y darle un nombre. Entonces podemos tener dos de estos para correo electrónico, número de teléfono, y luego uno para el mensaje, y finalmente un botón para mensaje de arena o algo así. Entonces vamos a hacer precisamente eso. Entonces, antes que nada, vamos a seleccionar éste y pegarlo aquí mismo, y darle un codazo aquí mismo, posicionarlo aquí, y asegurarnos de que somos 200. Me encanta cómo XD solo te da estas opciones de posicionamiento de inmediato. Entonces es bastante sencillo de hacer. Y para nuestros campos, lo que haremos es simplemente usar un rectángulo así. Y llamemos así a este campo de entrada. Y para los propios campos de entrada, lo que podemos hacer es quizás ver usar un color blanco, que creo que ya está usando. Sí. Así de color blanco. Y veamos por demencias donde podemos ir con 60, creo que va a funcionar bastante bien. Deshazte de la frontera y sin radio. Así que vamos a ir con los cuadrados y vamos a golpear T y escribir por ejemplo nombre completo. Nombre completo. Y para ese texto se utilizará textblock. Asegúrate de que está justo aquí. Y en cuanto a espaciamiento, tal vez podamos ir con 16. Creo que va a funcionar bastante bien. Entonces algo como este Control D para posicionarlo aproximadamente por aquí. Y luego veamos tal vez para ese texto podamos ir con textos de párrafo. Ahí vas. E ingresa tu nombre completo. Y asegúrate de que aquí nos queden alineados. Aquí estamos de pulmón izquierdo. Y a partir de aquí lo que podemos hacer es posicionar en el centro. Y luego para la distancia podemos ir con 16. Entonces vamos con el turno 121234. Entonces, si sostengo mi tecla Alt u Opción en cada lado, puedes ver las distancias. Entonces si flojo aquí, se puede ver que somos 17 de arriba y abajo, y aquí estamos 16 de este lado. Entonces lo que puedo hacer aquí mismo se selecciona esto y esto, y veamos, tal vez pueda llamarlo entradas. Veamos control G para agruparlos, llámalos entradas. Y luego mover el nombre completo justo abajo aquí. Y esto se puede nombrar, tal vez nombre. Ahí vas. Lo que puedo hacer es presionar Control D para duplicarlo. Y veamos por el posicionamiento tal vez pueda tener 32 distancia aquí. Entonces algo como esto. En lugar de FullName, lo que tenemos aquí es correo electrónico. Y aquí escribiré ingrese su correo electrónico. Entonces ya tenemos el contenido, tenemos estructura, tenemos todo, pero simplemente vamos a renombrar estos elementos. Entonces esto va a ser correo electrónico. Y en cuanto a ancho no va a ser ancho completo. Va a tener seis columnas de ancho porque recuerden que tenemos 12 columnas de ancho completo. Entonces 123456, ahí tienes. Entonces ese es nuestro correo electrónico. Y lo que puedo hacer en este caso es poner a estos dos en grupo. Tal vez solo te muestre un poco cómo va a funcionar el diseño responsive más tarde. Entonces esto puede ser correo electrónico y teléfono, así. Y vamos a duplicar éste. Controle D y colóquelo aquí. Entonces toca el borde. Ahí vamos. Y esto puede ser teléfono. Seleccione el tipo en teléfono, libros. Y en lugar de ingresar tu correo electrónico, tal vez ingresa tu número de teléfono así. Y finalmente, lo que necesitamos es que necesitamos uno más grande. Entonces voy a usar esta posición a los 30 para moverla hacia abajo. Esto va a ser un mensaje. Y vamos a darle algo así como un mensaje. Y mecanografiar. Escribe tu mensaje aquí. Algo así. En cuanto a la altura, va a ser un poco más alto que estos dos, solo porque queremos dar suficiente espacio para nuestros usuarios escriban un mensaje que ellos quieran. Entonces vamos a darle algo así como 171. Creo que va a ser bastante bueno. Por último, sigamos adelante y agreguemos nuestro componente para el botón principal. Arrástralo y suéltalo dentro, asegúrate de que somos 32. Ahí vamos. Y aquí una vez más tenemos todo ese diamante negro, lo que significa que estamos en unos componentes hijo. Y aquí escribiremos Enviar, mensaje. Ahí vas. Colóquelo aquí. Se puede ver que no tenemos un tamaño fijo para el botón. Eso es lo que quería en realidad. Entonces vayamos a nuestro estado de horror. Arrastre y suelte muerto dentro del estado predeterminado. Ahí vas. Entonces 32. Y ahora creo que todo está muy bien posicionado. Y vamos a agruparlos a todos golpeando Control o Comando G. Vamos a llamarlo contactos o simplemente formar, porque así es como se llama en Webflow también. Por último, para el distanciamiento, lo que podemos hacer es ir con 64 porque eso es lo que usamos a lo largo de nuestro deseo. Al igual que así. Ahí vas. Entonces ahora que tenemos nuestro formulario, vamos, en lugar de lo que ofrecemos, escribamos Contáctenos. Esta sección está concluida. Vamos a agruparlo, llamémoslo foro. Y de inmediato golpeó Control K para convertirlo en componente. Porque recuerden, lo vamos a utilizar en todo nuestro diseño, incluso con esta siguiente sección llamada dónde estamos y el pie de página. Y eso es lo que vamos a abordar a continuación porque ya estamos a 13 min en este video. Así que vamos a presionar pausa aquí mismo y déjame verte en el siguiente video donde vamos a crear esas dos secciones. 139. Diseño de página principal: Ahora continuemos con esta siguiente sección, que va a ser para el mapa. Y lo primero es lo primero, déjame dibujar un rectángulo rápido aquí mismo, algo así. A ver, 246, tal vez siete. Entonces algo como esto, 2467. Ahí vas. En cuanto a la altura, tal vez podamos ir con cinco o siete. Déjame deshacerme del color del borde para mapear así. Y déjame dibujar un mapa rápido dentro, que es el mapa de la ubicación que he elegido. Y por supuesto puedes seguir adelante y elegir una ubicación diferente. Aquí puedes hacer lo que quieras. Pero sólo voy a usar esta. Ahora en cuanto al texto interior, lo que voy a hacer es usar este. Entonces Controle C, Control V, y simplemente colóquelo aquí, asegúrese de que quede alineado así, y muévelo hasta aquí. Y aquí voy a teclear donde estamos. Control D. Y éste va a estar adentro abajo. Y también va a ser un bloque de texto porque queremos darles un poco más de información aquí sobre dónde estamos y qué pueden esperar. Entonces lo que hice fue visitar nuestra sala de exposición para traer su auto para una oferta de valuación gratuita. Entonces, si quieren hacer ese intercambio de parte entre los mencionados, entonces pueden hacerlo aquí mismo. Vamos a pegar eso a 24. Colóquelo aproximadamente por aquí. Ahí vas. Y ahora permítanme quizás duplicar esta posición de texto aquí abajo voy a usar, Veamos, párrafo y palabras clave dirección. Esa va a ser nuestra primera sección. Y darle un codazo aquí mismo. Déjame seleccionar mi icono y pegarlo aquí mismo. Y de inmediato antes de seguir avanzando, déjame seleccionarlo, presionar Control K para convertirlo en un componente. Y vamos a codazar esto para que sea, digamos 16. Sí, creo que eso va a funcionar bastante bien. Ahí vas. Asegúrate de agruparlos , asegúrate de poner pila y asegúrate de darle un nombre de dirección. Algo así. A ver, Eso está bien. Mueve esto hacia aquí. Y a partir de aquí lo que podemos hacer es en vez de 24, podemos ir uno más allá e ir con 32. Y la dirección volveremos a utilizar este texto. Entonces Control C, Control V, colóquelo aquí, asegúrese de que quede alineado a la izquierda. Está justo debajo de nuestra dirección. Y déjame hacer doble clic y copiar y pegar la dirección. Por supuesto que puedes usar el tuyo. Esto es imaginar un fideicomiso para los fines de este curso obviamente, pero puedes usar lo que quieras. Entonces aquí voy a ir con 16, y vamos con la dirección. Ahora en este caso, voy a encender la pila, que va a ser vertical y va a ser 16. Entonces va a ser mucho más fácil para mí ajustar todos estos. Entonces vamos con Control D aquí a 24, controlar el ancho 24. Y esto va a ser todo el camino hacia abajo. Esto va a estar en el centro. Este último va a ser horario de apertura. Y este segundo va a ser encontrado. Ahora para esto, permítanme copiar el contenido del diseño original muy rápido. Podemos avanzar un poco más rápido y ahí tienes. Número de teléfono, solo algún número de teléfono aleatorio que puedas elegir. Una vez más, lo que sea que le convenga, luego el horario de apertura. Bien, y por último, vamos a demostrarlo porque quieres que tus usuarios sepan cuándo estás abierto, reabres en días festivos o abres el sábado o abres el domingo. Tal vez trabajes en diferente huso horario o lo que sea. Así que siempre hay que decirles eso y darles esta valiosa información. Así que deshazte de éste, Control K para convertir esto en un componente. Y le voy a dar a esto el nombre del horario de apertura. Ahí vas. Y finalmente, nos quedamos con el número de teléfono. Así que vamos con foráneos aquí mismo. Entonces Controle C, Control V, y selecciónelo. Y déjame seleccionar el ícono de mi teléfono. Ahí vas. Dónde está. Ahí está. Asegúrate de que esté en el centro encima de mi texto. Voy a golpear Control K. La va a posicionar muy bien por ahí. Pero también puedo hacer es convertir este texto en una pila. Así que selecciona todos mis textos, Control G. Y lo que puedo hacer tal vez se llama dislocación contenido. Contenido de ubicación, centrarlo con mi mapa así. Y el contenido de ubicación se va a convertir en una pila así. Va a tener valores diferentes porque 24 aquí, 32 aquí, no importa. Lo importante es que lo convertimos en una pila. Y vamos a agrupar esto y llamarlo. Veamos dónde estamos. Y finalmente golpeó Control K. Porque una vez más, reutilizaremos este contenido a lo largo de nuestro diseño. Asegúrate de que estamos a 200 de aquí. Ahí vas desde este botón. Y por último, la última sección aquí que nos queda es para nosotros crear este pie de página. Entonces hagamos precisamente eso. Voy a tomar mi nav, usar mi logo Control C, y acercar un poco aquí mismo, golpear Control V. Ahí tienes. Asegúrate de que esté en el centro, entalla todo el camino hacia abajo. Porque será recordado, logo está en el centro. En el lado izquierdo, tenemos íconos de redes sociales. En el lado derecho, tendremos nuestro nav. En cuanto al nav, hit elementos de navegación Control C. Así que este es el objetivo de Adobe XD. Todas estas herramientas, quieres poder reutilizar todos tus elementos porque ¿cuál es el punto de vista? Seleccionándolos una y otra y otra vez. Permítanme usar estos iconos sociales que ya crearon en mi InDesign anterior. Y va a pegar también los componentes, lo cual no necesariamente quiero, pero vamos a mantenerlo así. Entonces tenemos íconos sociales y tenemos el estado predeterminado, que es este color gris oscuro. Tenemos el estado hover, que por supuesto es el efecto hover para nuestro color hover para nuestro diseño. Entonces lo que podemos hacer es para cada hover, vamos a asegurarnos de que estamos aplicando el mismo color aquí. Nuestro hover hover. Entonces usemos el color de la libración. Asegúrate de que lo seleccionamos. A ver. ¿Por qué es, no está seleccionando esto sobre, entonces este rectángulo, sea lo que sea, y vamos a ver, flotar, usar este color, usar este color, usar este color, usar este color. Y por último, para este uso, se decoloró. Ahí vas. Entonces todo funciona como debería. Una vez más, tomé estos iconos de este plug-in llamado Icon scout. Y si me desplazo un poco hacia abajo hasta mis descargas, creo. Y papi lo son. Así que aquí puedes ver todos estos iconos. Así que permítanme volver a mi panel de capas y llevar todos estos a sus estados predeterminados así, así. Y así. Por último, posicionemos esto a aquí. Y lo que quiero hacer es tal vez codazarlos para que sean 64 de nuestro logo. Algo así. 64, ahí tienes. Debajo del logo. Y una última cosa que quiero hacer es girar el texto en la parte inferior. Así que vamos a escribir algo así como área de texto. Y vamos a usar para ello, usaremos texto de párrafo y dejaré copiar y pegar el texto, que sólo va a ser alguna información básica sobre la empresa. Y se puede ver, bien, reservar como parte autos exclusivos 2023 y vamos a tener el mismo espaciado. Entonces a partir de aquí, veamos, sostengo el Alt tres. Veamos qué podemos hacer aquí. Veamos a lo mejor podemos darle un codazo para que sea 64. Ahí vas. Entonces ahora que eso está hecho, muévelo hacia abajo y agrupe todo, llámalo pie de página. Pie de página. Ahí vamos. Y vamos a empujar el pie de página a 200 de aquí. Y por último, una última cosa que quiero hacer. Y una cosa molesta en XD es porque no puedo cerrar mis tableros de arte al final. Entonces tengo que hacer doble clic aquí mismo, hacer clic y arrastrar y simplemente medir así. Entonces es una pérdida de tiempo, pero ¿qué puedes hacer? Es solo una ligera unción de todas las piezas de hábito de software. Y este es el de XD para mí. Entonces si lo selecciono 64, ahí vamos. Entonces, antes de pasar a la página siguiente, quiero previsualizar esta y cubrir lo que hicimos hasta ahora en esta parte del curso. Entonces tenemos nuestra navegación en la parte superior, tenemos las tarjetas, préstamos contáctanos. Tenemos nuestra sección de héroes, tu pareja para autos exclusivos que les están diciendo de inmediato qué eres, qué estás haciendo y para quien esto se pretende certificar autos usados con baja kilometraje e historial documentado. Entonces les estamos contando sobre nuestros autos, qué son, explora nuestros autos para que puedan hacer click ahí e ir a la página del curso como ya mencionamos. Entonces un poco sobre nosotros, gente feliz Smiley. Y en la ubicación exclusiva, tenemos nuestra selección exclusiva con algunas tarjetas que se ven igual. Tenemos C todos los autos, así que tenemos elementos e información mirables aquí mismo, como el nombre, precio, un año de producción, y cuántos kilómetros tiene el auto. Sellar autos una vez más, te lleva a la sección del curso, lo que ofrecemos garantía extendida, mantenimiento y préstamos. Podría tranquilidad o beneficios. Entonces, si compras un auto a través de nosotros, lo que vas a conseguir. Entonces vas a conseguir entrega gratuita, intercambio de fiestas polacas en tres etapas, para que puedas venderles tu tarjeta antigua y ellos recibieron una parte del intercambio. Entonces tenemos el Contáctenos, lo cual es realmente importante. Tenemos el mensaje de envío donde estamos, por lo que nuestra ubicación y una vez más, información importante incluida aquí, así dirigida por número, horario de apertura. Y finalmente tenemos el pie de página con todos estos enlaces de trabajo. Y luego tenemos en estos íconos, este ícono de YouTube me está molestando y no funciona por alguna razón, pero no importa. Vamos a arreglarlo más tarde en Webflow. Y eso es básicamente todo. Eso es todo para la parte de diseño de la página principal. En el siguiente video, vamos a pasar a la página de autos, y vamos a profundizar un poco más en estas tarjetas. Vamos a tener ocho de ellos y los vamos a posicionar un poco equitativamente. Y voy a mostrarles el poder de reutilizar todos estos componentes por igual. Navegación, como un formulario de contacto Acerca Nosotros y mapa y el pie de página en la parte inferior. Entonces te veré en el siguiente video cuando vamos a continuar con nuestro diseño. 140. Diseño de páginas de coches: Pasemos ahora a la página del curso y continuemos donde lo dejamos y te mostraré cómo puedes reutilizar algunos de estos elementos que mencionamos. Entonces aquí estamos en nuestro diseño y lo que voy a hacer es bastante sencillo. Simplemente selecciona todo mi tablero de arte, pulsa Control D y viniendo aquí mismo. Y en lugar de página de inicio escriba en autos. Ahora para el actual, lo que queremos es porque esta página está seleccionada, si recuerdas. Entonces, si selecciono mis autos, solo hemos seleccionado para mostrarle a un usuario que estamos en esa página. Entonces, si hago clic aquí mismo, pueden ver que ya no puedo flotar, pero puedo flotar aquí y aquí. Simplemente indica que estamos en la misma página. Entonces lo vamos a hacer para esta sección es deshacernos de esto, deshacernos de esto, y deshacernos de estas secciones, algo así. Y lo que voy a hacer es tal vez empujar esto un poco aquí abajo porque tenemos todos los autos presentados. No necesitamos ver todos los autos botón y sólo vamos a deshacernos de él. Ahora, lo primero es lo primero, permítame seleccionar este texto, presionar Control C y simplemente reutilizar este contenido aquí mismo. En lugar de alineado a la izquierda, asegurémonos de que su centro esté alineado así. Y déjame seleccionar los textos. Tu socio para un auto exclusivo. Entonces es justo el mismo texto que aquí. Y en cuanto al espaciado, lo que podemos hacer tal vez es posicionarlo 40 desde arriba. Entonces turno 1234 porque queremos que esté bastante cerca de la cima, así. Y claro que quieres que esté justo debajo de nuestra navegación. ¿Bien? Entonces aquí lo que voy a hacer es arrastrar un lindo círculo al fondo. Entonces para hacer eso, claro puedes usar tu círculo así y colocarlo en el centro, deshacerte del borde en cuanto a colores, usemos azul principal porque esa es nuestra empresa color en este caso. Vamos con las dimensiones de 300 por 300. Tal vez. Asegúrate de que esté en el centro y empujarlo hacia abajo de nuestro texto. A lo mejor hasta podemos darle un codazo hasta aquí. Entonces justo debajo de nuestros textos, asegúrate de que esté en el centro. Algo no es del todo bueno con este texto. Entonces si lo posiciono aquí, no. Bien, a lo mejor es un dólar XD. Así que ahora sigamos adelante y voy a arrastrar y soltar mi imagen de mi auto aquí. Una vez más, utilicé Envato Elements para éste. Es esa maqueta que mencioné. Y este auto básicamente se acaba de cortar de esa maqueta. Entonces lo que puedo hacer en este caso tal vez esté posicionado para ser solo un poco más alto, tal vez 300 o algo así para que tengamos un buen número par. Y a partir de aquí lo que puedo hacer es tal vez empujarlo hasta aquí un poco, tal vez en algún lugar por aquí. Y realmente no quiero poder ver el círculo en la parte inferior, citando el posicionamiento de esto funciona bastante bien como se puede ver, porque esto es transparente todavía va a mostrar el círculo en el fondo, pero no vamos a tener el círculo aquí mismo sólo nos va a dar ese bonito efecto si queremos. Y por último, para esta sección, lo que quiero es quizá darle un empujón 100. Entonces veamos algo así como algo así como 100 porque todavía queremos poder ver esta sección por encima de la falla. Entonces cuando una vista previa, una vez más, se puede ver por encima del pliegue, todavía podemos ver esta sección. Y dentro de esta sección lo que queremos es usar esta carta, carta , tarjeta hit Control C, saltando aquí mismo y abrir nuestra selección y tecleando Control V, algo así. Colóquelo hacia abajo. Y lo que puede hacer por el espaciado es que le puedo dar tal vez 32. Entonces 32, 32, ahí vamos. Y lo que puedes hacer es seleccionar estos tres, Control G y darles fila superior. Ahí vas. Aquí dentro de éste porque este no es un componente y esa es la parte crucial aquí mismo, porque si se trataba de un componente, entonces tendré que recrear lo que hice por estos tres componentes. Yo creo el estado original, creo estado de horror, y luego cambio el texto para cada uno de ellos dentro de cada uno de esos estados. Por eso es útil tener esta tarjeta y el modo de espera sin ningún componente es sesión en ella para que puedas intercambiar fácilmente tus elementos están a la izquierda, derecha y centro sin interrumpir. Y luego se pueden crear componentes encima de la deuda. Entonces si volvemos a aquí y dejame simplemente duplicar eso, así Control D o incluso mejor, puedo ir aquí. Algo no está del todo bien con mi XD en este momento. Lo siento mucho por eso. Ahí vamos. Entonces esta va a ser nuestra fila superior. Una vez más. Esta va a ser nuestra fila media. Ahí vas. Y voy a encender mi pila. Puedo encender la pila aquí también de 38. Entonces vamos a duplicar estos dos. Y pongamos 38 porque esa es la distancia entre nuestras columnas. Control D Una vez más, y posiciona esto para estar abajo en la parte inferior. Recuerda que tenemos ocho autos, así que tendremos 32 y nos desharemos de este último. Entonces esta va a ser nuestra fila inferior. Ahí vas. Y finalmente, ahora es el momento de que agreguemos toda esta información en. Entonces, en términos de información, lo que quiero hacer es que esto va a ser Tesla, y llamémoslo sin muerte de inmediato. Pero primero vamos a copiar la información va a ser mucho más fácil de esa manera. Entonces el año del auto va a ser 2021, está bien. Y el kilometraje va a ser de 40,000 km. Entonces llamémoslo Tesla. Este próximo va a ser Porsche. Y este último va a ser McLaren. Entonces para el Porsche, lo que puedo hacer es seleccionar y he estado empujando. Este va a ser el precio. Obviamente. Cuando estás haciendo un diseño como este, quieres asegurarte de posicionar tus precios manera uniforme porque obviamente McLaren va a ser mucho más caro que el Porsche, por ejemplo y Tesla. Entonces quieres asegurarte de que estás seleccionando estos precios y todos estos elementos en función de la deuda. Entonces va a ser bastante bajo kilometraje 2020 es el año. Ahí vas. Lo que puedo hacer de inmediato en realidad es usar mis imágenes. Entonces McLaren número tres. Y recuerden, estoy usando el número tres para todos ellos. Porsche número tres. Entonces este va a ser Porsche Cayenne, y finalmente Tesla Model X. Ahí vamos. Antes de pasar a estos, vamos a golpear Control K, Control K, Control K para convertirlos en componentes. Y vamos con nuestro estado, llámalo hover, seleccionar Control C. Y yo voy a hacer lo mismo por aquí, así que hover, hover para éste también. Lo que voy a hacer dentro de su finca es simplemente seleccionar mi acuarela y traerla hasta 100. Haz lo mismo aquí mismo. Tráelo hasta 100, y haz lo mismo aquí mismo. Así que tráelo hasta 100. Y ahora cuando cambie a default, default, default va a volver. Por último, tratemos con estas dos últimas cartas, y esta última va a ser Cadillac. Vamos a llamarlo así. Entonces Cadillac o incluso mejor ver TSV porque ya tenemos un Cadillac en la parte superior. Este va a ser un poco más barato. A lo mejor como parte de ese intercambio de partes que mencioné, el año va a ser 2019. 2019. Ahí vamos. Y el kilometraje va a ser bastante alto. kilometraje por el año de la producción va a ser 2021 y va a ser un Range Rover evocar. Y finalmente, llevemos esto hasta aquí y el kilometraje va a estar en éste. Ahí vas. Entonces, vamos a darle el nombre a esto. Digamos que la ciudad es tres. Esto va a ser un rango como ese. Y por fin vamos a traer las imágenes. ¿Cuáles son los Range Rover USA Número tres, información de arrastrar y soltar y para Cadillac, vamos con el número tres, arrastrar y soltar dentro. Entonces ahí vamos. Ahora que hemos hecho todo esto, lo que podemos hacer es usar las secciones restantes de las que hablamos anteriormente y simplemente sacarlas a colación. Así que selecciona todas nuestras secciones restantes , hazlas subir hasta aquí, y asegúrate de que somos 200 de aquí. Algo así. Creo que va a funcionar bastante bien. Sí. Y eso es básicamente todo. Todo lo que tenemos que hacer es simplemente cerrar esto. Y si recuerdas, simplemente odio esta función de x dy. Pero, ¿qué puedes hacer? Porque tengo que hacer esto manualmente, no tienes que hacerlo. Simplemente puedes dejarlos como están porque realmente no importa. Dentro de Webflow, estableceremos la tapa para el espaciado en la parte inferior para el margen. Y va a respetar ese margen en cada página. Entonces es mucho, mucho más sencillo en desarrollo que InDesign, pero sin embargo, algunos. Aquí tenemos nuestro puente. Entonces, si selecciono la página de mi curso, te pongo al día. Una vez más, hemos seleccionado autos aquí mismo, préstamos y contáctenos. Todavía podemos pasar el botón para autos exclusivos. Ahí vas. Entonces ahora tenemos esta imagen con un bonito círculo azul en el fondo directamente a nuestros autos. Para que podamos flotar sobre cada uno de estos autos. Se puede ver que el efecto hover funciona bastante bien excepto en estos dos. Y cambiemos a para que la tarea de contacto funcione, funcione, funcione, todo funcione. Entonces nos olvidamos de hacer esto en esta. Así que volvamos. Control K, control K. Convirtamos esto en estados florecientes como este. Y volvamos este CSV estado de Horace también, al hover. Voy a llevar este color de borde de vuelta hasta el 100. Y en el Range Rover, veamos, acuarela hasta el 100. Ahí vamos. Volvamos a cambiarlos a los valores predeterminados. Por defecto. Y vamos a previsualizar nuestra página una vez más. Entonces veamos autos, préstamos contáctanos. Todo funciona bien. Ahí vamos. Y ahora pasemos el cursor sobre esto. Tiene un poco de retraso en hover, pero no te preocupes por ello. Vamos a arreglar eso en Webflow, así que no vamos a perder demasiado tiempo en el diseño en sí. Por último, lo que quiero hacer es simplemente empujar esto hacia arriba. Entonces llamemos al círculo VG de este auto. Y voy a posicionar esto aquí mismo. Y tal vez darle a esto un nombre de sección promocional o autos para casi sección, algo así. Entonces tenemos nuestra selección y tenemos todos nuestros otros elementos. Entonces ahí vamos. Esa es nuestra página para este video. En la siguiente vamos a diseñar una página de detalles de la tarjeta de débito cuando tus usuarios realmente hagan clic en una de estas tarjetas para abrirla y conocer más sobre el auto en cuestión. Y eso es lo que vamos a abordar en el siguiente video. Entonces te veré ahí. 141. Página de detalles de coches: Ahora sigamos adelante y creamos esa página detallada de autos o auto seleccionado, quieras llamarlo. Volvamos a XD. Y aquí lo que voy a hacer enseguida es en lugar de duplicar éste, voy a duplicar al héroe ordenado la página principal porque voy a reutilizar esta sección. Así que vamos a llamarlo por ejemplo coche seleccionado. Ahí vas. Dentro de la tarjeta seleccionada, lo que voy a hacer es deshacerme de algunas de estas secciones una vez más, así que presiona Eliminar y eliminar. Voy a quedarme con esta, eliminar, borrar, y voy a quedarme con todas estas secciones. Lo que quiero hacer a continuación es quizás, veamos, tal vez podamos extender esto un poco hacia abajo para tal vez cubrir 200 distancia. Ahí vas. Y lo que voy a hacer es simplemente extender mucho mi tablero de arte porque aquí mismo tendremos un poco más de espacio para trabajar. Entonces lo que voy a hacer ahora es elegir un auto. A lo mejor pueda elegir un Range Rover tal vez o algo así. Entonces, lo que podemos hacer en este caso es porque vamos a crear el diseño de dos columnas. Una columna va a tener todos los contenidos. Entonces va a tener imágenes, va a tener visión general, descripción, información de especificación del vehículo. Todas esas cosas van a estar a la izquierda y a la derecha, tendremos esa tarjeta que tendrá un diseño pegajoso, que seguirá de arriba a abajo. Una vez que realmente empecemos a desplazarnos en el escritorio, en el móvil, va a cambiar y va a llegar al final de esa página. Y eso es lo que vamos a crear ahora. Entonces, si te cambiamos de nuevo a aquí, lo que tenemos es el diseño de dos columnas. Entonces comencemos a trabajar con él. Seleccionado ahora. Bueno, permítanme comenzar a crear algunas de estas imágenes. Posicionando algo así. Porque si lo tomamos aquí, se puede ver que tenemos una imagen y luego a continuación que tenemos cuatro imágenes diferentes. Y luego tenemos la tarjeta desplazándose hacia arriba y hacia abajo, y se va a colocar pegajosa dentro del Webflow un poco más tarde. Entonces, vamos a endeudarnos. Vamos a crear eso muy rápido. Entonces para esta primera imagen, lo que puedo hacer es darle un nombre de imagen, una, o imagen principal o algo así. Y veamos, tal vez podamos darle 8.4 anchuras de columna. Entonces algo como esto. Así que podemos tener cuatro columnas de amplio diseño aquí mismo. Ahí vas. Y en cuanto a la altura, vamos con, no sé, 437, algo así. Deshagámonos de la frontera y dejémonos saltar y posicionar mi imagen enseguida. Entonces esto va a ser fotografiado número uno. Así que déjame arrastrarlo y soltarlo dentro. Ahí vas. Y en cuanto al espaciado desde arriba, podemos ir con 40 tal vez una vez más, así que algo como esto. Y ahora enfoquemos nuestra atención de estas imágenes porque tenemos ocho columnas. Ahora. Cuatro de las imágenes, cada una de ellas podría tomar dos columnas de ancho. Entonces hagámoslo. Duplicemos este. En cuanto al espaciamiento, podemos ir con 24. Creo que va a estar bastante bien. Y vamos a darle un codazo hasta aquí. Y esta va a ser la imagen número dos. Posicionémoslo dentro de un grupo y llamémoslo imágenes de autos. Vamos a darle una pila. Podemos organizarlo un poco mejor. Y veamos En cuanto a las distancias, veamos qué podemos tener. Entonces tal vez aquí o lo que tenemos aquí es si me desplazo hacia abajo y me escondo solo un toque, se puede ver que el ancho del canalón, que es la distancia entre estas columnas es de 38. Entonces este espacio vacío entre las columnas azules. Y eso es lo que vamos a atacar aquí. Así que escribe 38. Y como puedes ver, va a alinearse con la siguiente columna disponible. Entonces esto va a ser fotografiado número tres, Control D. Se va a fotografiar el número para n control dy dt va a ser la imagen número cinco. Ahí vas. Ahora, permítanme traer rápidamente esas imágenes. Entonces esto va a ser dos, esto va a ser tres, esto va a ser cuatro. Y finalmente, esto va a ser cinco. Y claro, cuando quieras, puedes hacer clic aquí mismo en este botón, que no creo que hayamos creado. Ahora, aquí habrá un botón que te dirá ver todas las imágenes por ejemplo así que si haces clic en eso, se ampliará y te mostrará un diseño de caja de luz, que crearemos un XD. Y viene un estándar en Webflow. Por lo que no vamos a prestar demasiada atención a eso. En cuanto a esta imagen de héroe. Lo que voy a hacer es hacer clic aquí y escribir, por ejemplo, ver. Todas las imágenes. Convierte este texto en bloque de texto. Ahí vas. Posición y aproximadamente por aquí. Y en cuanto al rectángulo que van a usar aquí mismo, algo así. Deshazte de la caldera. Y vamos a ver. Llámalo tal vez todas las imágenes de fondo o luz solar en absoluto. Fondo de aficionados. Ahí vas. Ver todas las imágenes. Y luego en cuanto a las distancias y dimensionamiento, tal vez podamos ir con 50145145 y luego 50. Algo así. Y vamos a agrupar a estos dos. No, eso no me funciona bien. Entonces tal vez pueda acotar esto y bajarlo al párrafo. Ahí vas. Ahora funciona mucho mejor. Entonces, si me aseguro de que estén en el centro, controle G y escriba por ejemplo ver todas las imágenes. Y en cuanto al espaciamiento, tal vez podamos ir con 24. Entonces 12, 123-412-1234. Entonces somos 24 en cada lado. Si sostengo mi tecla Alt u Opción, puedes ver cómo se ve eso. Entonces podemos agruparlos para llamarlo imagen uno, imagen uno, y podemos llamarlo imágenes de autos, por ejemplo y ahora movamos nuestra atención a este sitio para la tarjeta en sí. Entonces lo que voy a hacer es usar nuestra herramienta de rectángulo una vez más y dibujar un rectángulo rápido, algo así. Va a tener un color de fondo blanco. Y veamos, tal vez podamos redondear las esquinas a ocho, algo así. Deshazte de esa frontera. No lo necesitamos. Y aquí lo que podemos hacer es llamarlo por ejemplo barra lateral del coche y darle un nombre por supuesto, sidebar PG películas aquí mismo. Y aquí lo que podemos hacer es crear eso, esa etiqueta que mencionamos. Entonces voy a crear el texto. Vamos a deshacernos de esa. Y escribe en Saloon, que va a ser un tipo de auto. Y voy a aplicarlo, el texto de la etiqueta a ella. Ahí vas. Y vamos a tener el fondo etiquetado adjunto. Así que vamos a crear un rectángulo rápido. Una vez más, dale un nombre. Etiqueta, BG. Ahí vas. Debajo del texto. Voy a deshacerme del borde y por el color, realidad voy a usar el color de la carrocería. Entonces, si le pego a la vista previa una vez más, se puede ver tiene el color de la carrocería y este tiene el color blanco, que solo lo va a diferenciar y hacer que destaque un poco más. Y puedes ver nuestras imágenes lo bonitas que se ven. Entonces, en términos del dimensionamiento de fondos etiquetados de deuda, entonces lo que puedo hacer es quizás usar el tamaño 3034 para la altura. Asegúrate de que esto esté centrado. Ahí vamos. Y tengo un buen poco de conocimiento del auto, así que voy a pegarlo. Y este es el icono del salón. Voy a convertirlo en componentes de inmediato. Asegúrate de que esta es una posición así. Y en cuanto al espaciamiento, lo que puedo hacer es a lo mejor posicionar es a 16 de este lado. 16. En cuanto al fondo etiquetado, lo que puedo hacer es tal vez poner cuatro para el radio de la esquina. Entonces no ocho porque este elemento es bastante pequeño, entonces las distancias aquí pueden ser ocho quizá. Así que vamos con esto. Esto puede ser label, Icon, Label I CAN apilar y cumplir ocho así. Y finalmente, en cuanto a estas distancias, tal vez pueda traer a estos dos aquí tal vez y darle una distancia de 16. Al igual que ahí vamos. Y ahora tenemos nuestro fondo de etiqueta y un contenido de etiqueta. Entonces voy a llamar a esta etiqueta, y vamos a llamarla etiqueta de salón. Y veamos qué podemos hacerlo. Entonces el berlina, puedo golpear Control K. Así que ese va a ser nuestro estado predeterminado en cuanto al posicionamiento de esta etiqueta, tal vez pueda ser 24 en cada lado. Así que vamos con 24 y luego 24 así. Vamos a convertirlo en una pila que va a permitir el relleno dentro de la deuda que necesitaremos crear mañana. Entonces tendré que crear el SUV, y tendré que crear los íconos del súper auto. Entonces lo que puedo hacer es simplemente arrastrar esos íconos adentro. Entonces veamos solu, súper auto, que no es ese superdeportivo. Voy a arrastrarlo hasta aquí. Y SUV, la voy a arrastrar aquí. Ahí vas. Entonces lo que puedo hacer es usar estos iconos. Golpea Control K, golpea Control K. Ahí tienes. Y simplemente quítelos de aquí. Entonces aquí dentro, tenemos el salón como el estado por defecto. Lo que voy a hacer a continuación es dar clic aquí mismo para el estado SUV dentro de la etiqueta frontal y moverlo aquí. Entonces dentro del estado SUV, lo que voy a hacer es abrir mi ícono de etiqueta, seleccionar mi ícono de soluto y ubicar mi ícono de SUV, que es este. Simplemente arrástralo y suéltalo hasta que se vuelva azul como este, lo solté, va a poblar. Y luego aquí, teclearlo SUV. Y porque tenemos esta sección de contenido, lo que voy a hacer es convertir esto en un alineado a la izquierda. En realidad vuelve al estado predeterminado aquí, selecciona mis textos, asegúrate de que esté alineado a la izquierda para que se extienda al lado derecho y no a todos los sitios. Ahí vas. Ahora SUV, ahí lo tienes. Entonces estado predeterminado, Veamos, 24, 24, esto está bien. Así que vamos, vamos a mantenerlo así. Y por último, vamos a crear uno para el súper auto. Dentro de éste, vamos a escribir, vamos a ver, superdeportivo. Ahí vas. Y en lugar de Saloon, simplemente localiza el ícono del superdeportivo, arrástralo arriba hasta que se vuelva azul. Déjalo ir. Y ahora tenemos un interruptor de icono de superdeportivo entre el salón y el superdeportivo. Se ve bien, pero el SUV se mueve sólo un poquito. Entonces veamos dónde estamos con eso. Entonces 24, veamos si estamos bien ahora no lo estamos, así que todavía tenemos que asegurarnos de que estamos aquí. Así que 24 dentro de la SUV. Esto queda alineado, así que tendremos que arreglarlo manualmente. Pero no te preocupes porque dentro de Webflow solo usaremos ese. Así que dentro de la camioneta, sólo voy a darle un codazo aquí mismo. Entonces porque el Range Rover es el SUV, como puedes ver, tenemos 24 y ahora comencemos a agregar nuestros elementos de texto. Entonces lo primero es lo primero, comencemos con el nombre. Entonces un Range Rover, Voc. Y este texto va a ser H tres. Entonces 24, algo así. Y veamos dónde está. Así que etiquetada justo aquí. No entiendo por qué no se muestra, pero no importa. Vamos a posicionarlo de esa manera. Ahí vas. Y las distancias van a ser 24 también. Entonces 24 ahí vas, Control D para duplicarlo. Y éste va a ser nuestro precio. Y el precio sólo va a ser el azul principal. Y una vez más, 24 de aquí, Control D lubricado. Este último va a ser nuestro texto de párrafo, así. Y dentro de eso, podemos poner información adicional como disponible para su recogida. Ahora bien, si no lo es, si está en el transporte, tal vez entonces podamos poner esa información ahí si queremos. Pero está disponible para su recogida. Ahora, entonces lo que podemos hacer es simplemente arrastrar en nuestro componente donde está el botón principal. Ahí vas. Así que arrástralo. Y lo que podemos hacer es asegurarnos de que somos 24. Así mismo como todos estos otros elementos. Aquí. Puedo escribir algo como reservar este auto. Ahí vas. Y al flotar, simplemente voy a escribir también reservar este auto. Ahí vas. Y ahora lo que puedo hacer es duplicar este botón. Asegúrate de que tengo 24. Haga doble clic aquí. Vaya, sólo uno. Y asegúrate de que estamos a 24 de aquí también. Como uno más. Ahí vas. Y este botón, en realidad voy a Desagrupar componente Desagrupar. Y esto va a ser el fondo del botón de contorno. Dentro del fondo del botón de contorno, lo que voy a hacer es simplemente seleccionar mi texto, que es este texto de aquí mismo. Y voy a escribir en C solo opciones. Ahí vas. Y para ello, lo que puedo hacer es agruparlo, llamarlo esquema o BTN, esbozar. Al igual que así. Y solo C opciones va a tener un disco de color. Entonces tal vez este gris oscuro o algo así. Sí, vamos con gris oscuro. Y el botón no tendrá el color de relleno, pero tendrá el color de la caldera de gris oscuro, algo así. Ahí vas. Presiona Control K para convertirlo en un componente. Ahora crea un estado de hover para ello. Dentro de la portada, cambiaremos este color a tal vez párrafo h3 y cambiaremos el borde de nuestro botón a párrafo HD también. Entonces solo va a diferenciarse un poco más. Entonces, si tengo una vista previa de esto muy rápido, puedes ver que esto funciona y esto también funciona. Entonces ahora tenemos estos dos. Una vez más, el descarte se va a pegar en la parte superior de la página y solo va a desplazarse un poco hacia abajo. Entonces eso es lo que vamos a hacer. Agrupemos rápidamente todos nuestros elementos. Así que vamos a seleccionar la Etiqueta. Range Rover evocan debajo la etiqueta precio disponible para camioneta que tenemos nuestro botón principal. Tenemos contorno de botón. Ahí vas, carritos barra lateral, selecciona todo, Control G o Comando G. Y vamos a llamar a este carro sidebar. Ahí vas. Y ponlo justo atrás aquí. Entonces ahora tenemos nuestras imágenes y podemos ponerlas por ejemplo en un grupo, Un grupo principal. Así que vamos a golpear Control G y llamarlo por ejemplo contenido del coche. Contenido del automóvil o detalles de la tarjeta de inflamación del automóvil. Puedes llamarlo como quieras. Sólo voy a llamarlo contenido de autos. Y veamos 24 en cada lado. Quizás hasta pueda extender este botón. Entonces lo que puedo hacer en este caso quizá se extienda a B24. Pero para hacer eso, tendré que desagrupar este componente. Entonces, primero tratemos con éste. Veamos dónde estamos. 22, 24, ahí tienes. Y si cambio a hover, cambió porque quería tomar todo el ancho de este elemento porque así es como va a quedar más adelante dentro de Webflow. Y para éste, lo que podemos hacer es ver, desagrupar, agrupar, llamarlo btn principal, llamarlo btn principal, y tal vez darle una clase de grande o algo así, darle a Control K. Luego extiende esto para que quepa esto y crear un pequeño y agradable estado Horace. Llámalo hover dentro del estado de terror. O tenemos que hacer es simplemente cambiar el color del hover y volver a cambiarlo a la principal cabra lechera. Y ahora cuando prevea, tenemos un poco más de espacio aquí dentro de nuestra tarjeta. Entonces cuando vuelo el cursor, se puede ver que la información se ve un poco más legible que antes. Entonces voy a parar el video aquí. Y en el siguiente video vamos a seguir construyendo esta sección porque vamos a tener muchos contenidos aquí mismo. Entonces porque ya estamos a 17 min en este video, sigamos ahí. Entonces te veré ahí. 142. Diseño de cajas de luz: Cuando haces clic en esa imagen grande, quieres poder ver todas las imágenes y simplemente desplazarte hacia la izquierda y hacia la derecha entre ellas. Y eso es lo que te permitirá hacer caja de luz en Webflow. Es súper sencillo de hacer. Va a ser un poco complicado después conectarlo con CMS. Pero en cuanto a maquetación, es simplemente simple porque el componente ya está ahí. Pero para mostrar algo así en XD, hay que diseñarlo. Así que vamos a saltar a XD en solo eso. Entonces aquí estamos en Adobe XD. Y lo que voy a hacer por ésta es que voy a crear una página completamente diferente. Así que pulsa Control D aquí mismo para duplicar este y llamarlo caja de luz. Si quiere crear, si quiere trabajar en mí. Entonces intentemos eso otra vez. Vamos. Caja de luz. Ahí vamos. Encantadora. Y sólo voy a reutilizar estas imágenes. Entonces a partir de aquí, voy a desagrupar esto. Pon las imágenes encima así, y deshazte de todo lo demás así. Entonces lo voy a tapar a la talla original, que es esta. Así que simplemente haz doble clic y reduce el tamaño hasta alguna cosa como esta. Ahí vamos. Entonces tal vez 1080 o algo así. Entonces, si le pego a la vista previa, se puede ver cómo se ve eso. Tendremos un bucle. Y entonces lo que voy a hacer es deshacerme de esto, ver todas las imágenes así. Y tal vez incluso pueda deshacerme de éste así desagruparme. Y ahora lo que puedo hacer es tal vez posicionarlos un poco diferente. Entonces en este caso, lo que podemos hacer es quizás, veamos, tal vez podamos crear un bonito fondo aquí. Así que crea el fondo, y desagruparemos esto también. Entonces desagrupa, esto va a ser una caja de luz. Bg. Ahí vamos. Y lo voy a posicionar para que sea de ancho completo de nuestro tablero de arte así. Ahí vamos y nos deshacemos de la frontera. Y en cuanto al color, vamos con, no sé, algo así. Tal vez redujo la opacidad a tal vez 80% o algo así. Entonces es un poco transparente así. Entonces finalmente, lo que puedo hacer es quizá experimentar con el tamaño de esto. Quizás hasta aquí. A ver. Así que la altura puede ser tal vez 6609. Aquí, funciona bien. Asegúrate de que esté en un centro. Eso se ve bien. Y aquí lo que voy a hacer es porque tenemos 12345, voy a crear más. Así Control D 67.8. Entonces voy a localizar mis imágenes de Range Rover. Entonces imágenes de autos, localicemos el Range Rover. Entonces aquí tenemos 12345. Entonces ahora necesitamos seis. Ahí vamos. Entonces necesitamos siete. Ahí vamos. Y finalmente necesitamos el número ocho. Encantadora. Una última cosa que quiero hacer es seleccionar mi x o mi ropa de aquí y colocarla aproximadamente por aquí. Entonces veamos, estamos 56, 49. Así que vamos a darle un codazo para que esté en el centro, aproximadamente, así que realmente no importa para este caso en particular. Porque una vez más, la caja de luz tiene su propio stock o diseño que sigue dentro de Webflow. Y para esta disposición, lo que necesitamos es quizá posicionarlo en el centro así, lo cual creo que funciona para este caso. Lo que también podemos hacer es quizá bajarlo a 64, así. Y tal vez meter esto en un centro entre nuestra ropa y estas imágenes justo aquí vamos. Una última cosa que vamos a querer hacer para este diseño en este momento es simplemente conectarnos. Así que vamos a comprobar esto rápidamente. Ahí vamos. Entonces, lo que voy a hacer ahora es cuando alguien haga clic en esta imagen, por ejemplo, esta imagen principal. Ahí vas. Voy a cambiar al modo prototipo. Haz clic y arrastra este asa azul a mi nueva caja de luz, nuestro puerto. Y lo que voy a hacer en lugar de transición, voy a elegir Overlay, que sólo va a superponer eso encima de nuestro tablero de arte. Animación. Tal vez podamos deslizarnos hacia arriba o hacia abajo o simplemente golpear a Ninguno. No importa. O podemos elegir disolver tal vez o algo así, pero vamos a ir con ninguno. Y cuando haces clic en algún lugar fuera de este tablero de arte, vas a conseguir ese efecto deslizante y simplemente va a desaparecer. Así que vamos a probarlo. Entonces cuando selecciono este tablero de arte golpeó Preview, no podemos ver nada así que podemos desplazarnos hacia abajo, podemos explorar todas estas cosas. Pero cuando hago clic aquí mismo, se puede ver que la caja de luz simplemente aparece en su lugar. Y claro que puedes ajustar este componente, pero no vamos a perder demasiado tiempo con este video. Obviamente puedes agregar, cuando haga clic en esta imagen, va a reemplazarla con esta imagen. Cuando haga clic en esta imagen se va a reemplazar con esta imagen, pero tengo que crear un componente gigante con ocho estados diferentes. Entonces el estado uno va a ser fotografiado número uno, el estado dos va a ser fotografiado número para quedarse tres y así sucesivamente y así sucesivamente. Pero no quiero aburriros demasiado chicos. Lo importante aquí es que cuando haga clic aquí mismo, simplemente va a desaparecer. Entonces en cualquier momento puedo volver haga clic aquí mismo, lo va a mostrar. Pero cuando haga clic aquí mismo, entonces va a desaparecer y me va a llevar de vuelta a ahí. Entonces así de súper simple es crear ese componente de caja de luz. Vamos a golpear Ahorra en nuestro diseño y lo que podemos crear. A continuación quizá esté la página de nuestros préstamos. Debido a que los préstamos son bastante importantes, todavía vamos a reutilizar algunos de estos elementos. Y vamos a tener esta sección, esta sección, y esta sección que va a ser diferente y todas estas otras secciones van a ser las mismas. Entonces te veré en el siguiente video donde vamos a comenzar con la sección de préstamos. 143. Página de préstamos: Ahora sigamos adelante y creamos la página para los préstamos porque como mencioné anteriormente, tienen estos socios externos con los que están trabajando para los pulmones, así como el transporte del autos y agentes de aduanas y cosas así. Entonces vamos ahora adelante a XD y trabajemos en la página de préstamos. Entonces aquí estamos de vuelta en Adobe XD. Duplicemos una vez más una de estas páginas. Entonces tal vez podamos usar este Control D. Y puedo llamar a esto préstamos. Y si quieres un poco mejor de consistencia, puedes sacar esto del camino hacia aquí. Y claro, la animación todavía va a funcionar correctamente porque si la vuelvo a cambiar a prototipo, se puede ver que esto sigue conectado. Entonces no importa a dónde lo estés moviendo, todavía va a funcionar bien. Entonces en este caso, lo que haremos es elegir nuestros autos. En este caso, ir al estado por defecto, ir a préstamos seleccionados porque esta es la página seleccionada. Después de todo. Ahí vas. Y ahora lo que voy a hacer es hacer algunos ajustes aquí. Entonces no necesito esta sección superior, pero en realidad vamos a usarla. Pero yo sólo voy a deshacerme de estas imágenes todavía van a tener que comprobar esto. Y esto va a estar solo. En realidad, no, volvamos un toque. Entonces algo está pasando. Así que vamos a deshacernos de esa. Entonces esto va a ser en lugar de la sección de promesas de autos, será la sección de promesa de préstamos. Ahí vamos. Y aquí sólo vamos a usar el mismo texto, la misma posición, préstamos para el auto de tus sueños. Deshazte de esta sección porque no la necesitamos. Y vamos a tener estas secciones en la parte inferior. Pero vamos a seguir adelante y extender nuestro tablero de arte solo para tocar y mover estas tres secciones hacia abajo un poco, algo así. Y luego nos preocuparemos por el posicionamiento un poco más tarde. Aquí lo que vamos a hacer es usar esas dos imágenes, que mencioné. Entonces voy a usar este del Range Rover, y voy a usar este de los Audi RS cinco. Y voy a seguir adelante y darle la vuelta a esto dando click aquí. Y los voy a posicionar hacia abajo así. Y veamos dónde estamos. Entonces tal vez podamos movernos al centro de nuestra página y mantener pulsada la tecla Mayús Alt y hacer clic con el botón izquierdo para que podamos reducirlas uniformemente. Ahora lo que podemos hacer es simplemente posicionarlos un poco mejor. Entonces esto va a estar aquí. Esto va a estar aquí. Y obviamente necesitamos reducir el tamaño, aún más de estos hasta llegar a algo de la apariencia que queremos quizás por aquí, creo que va a funcionar bastante bien. Sí, tal vez pueda medir esto en, sólo un toque. Así que para disfrutar sobre Audi, está bien. Sólo muévalos por aquí. Y en cuanto al espaciado, lo que puedo hacer es simplemente mojarlos hasta que toquen la línea del texto aquí mismo. En cuanto al texto en sí, todavía se mantiene a los 40, lo que creemos que va a funcionar bien, pero realmente no me satisface con el Audi, así que tal vez pueda darle un codazo solo un poquito. Ahí vamos. Creo que eso funciona bastante bien. Entonces veamos. A AD cinco, tal vez podría darle un codazo a esto. Sólo un toque. En realidad, no, dejémoslo así y no perdamos demasiado tiempo porque creo que se ve bastante bien. Entonces la siguiente sección aquí va a ser esta sección aquí. Entonces nuestras ofertas y por debajo que contaremos con nuestros socios. Entonces, tratemos primero con nuestras ofertas, y hagamos eso primero. Entonces tomemos primero los textos. Entonces voy a tomar la T aquí y escribir algo así como préstamos líderes en el mercado de nuestros socios. Ahí vamos. Voy a posicionarlo en el centro y solo asegurarme de que estamos en el H2. Enrócalo en el centro. Ahí vamos. Y aquí lo que voy a hacer a continuación es solo asegurarme de que estoy en el centro. Y finalmente asegúrate de que no soy 200, sino quizá 150 de estas imágenes. Porque una vez más, quiero poder ver toda esta información justo por encima de la falla, lo cual creo que es muy importante por los propósitos de SEO y porque quieres que tu información ser legible en todo momento si es posible. Entonces aquí lo que vamos a hacer es hacer esa cosa una vez más. Así que vamos a cambiar al panel de Capas control D. Eso. Y voy a escribir algo así como simple y conveniente, pero convertirlo en el H3 Control D en él. Muévelo al centro y tal vez elija algo como múltiples opciones de pago, Control D una vez más. Y esto puede ser una tranquilidad. Así que estamos haciendo básicamente exactamente el mismo diseño que hicimos. ¿Dónde lo hacemos? Como hicimos aquí mismo. Así que solo podemos tomar esto y colorearlo de nuevo si queremos, pero solo voy a recrearlo directamente desde arriba. Entonces aquí voy a golpear Control D elige los textos de párrafo aquí mismo. Y para los textos de párrafo, lo que puedo hacer es elegir esto aquí y tal vez pueda cambiarlo a gris oscuro solo para hacer un ligero cambio. Entonces no se ve exactamente igual que el texto en la parte superior. Control C, control V. Ahí vamos. Y ahora lo que puedo hacer antes de seguir adelante con más contenido e información, quiero poder pegar estos iconos en su lugar, bien, aquí y aquí voy a elegir este, pegarlo en aquí mismo. Y por último, voy a elegir esta, pegarla aquí mismo. Entonces ahora tratemos con nuestras capas. Entonces lo primero es lo primero, vamos a tener 24 distancias entre cada uno de ellos. Entonces aquí, aquí y aquí, podemos ver que somos 24 de cada uno de estos, lo cual está bien. Solo tratemos con estos íconos. Asegúrate de que estén alineados en la parte inferior. Y veamos 24. Ahí vamos. Entonces ahora lo que puedo hacer es simplemente agrupar estos. Entonces vamos a agrupar estos. Agrupemos a este grupo de analistas en esto. Y puedo convertirlos en stack, que solo los va a organizar un poco amablemente para mí. Así que no tengo que perder demasiado tiempo tratando con mi diseño y esas cosas. Entonces lo primero es lo primero, posicionémoslo para que esté en el centro y hagamos lo mismo por éste. Así que selecciona todo, asegúrate de que esté en el centro. Y selecciona todo aquí mismo. Vamos. Ahí vamos. Y asegúrate de que es solo éste. Y asegúrate de que también esté en el centro. Ahí vamos. Ahora que ya está hecho. El segundo va a ir al centro y el segundo va a ser múltiples opciones de pago. Ahí vamos. El primero va a ser sencillo y conveniente. Y el último va a ser tranquilidad. Entonces solo estoy tomando el texto para que pueda ir un poco más rápido. Y por último, porque el central siempre va a estar en el centro da clic aquí mismo. Pero estos otros, usemos ese truco de rectángulo. Así que sólo voy a posicionarlo aquí. Haz clic aquí, asegúrate de que esté en el centro. Ahí vamos. Y mueve esto aquí mismo hasta que encaje con nuestra grilla, más bien. Entonces. Seleccione ambos. Ahí vamos, y nos deshacemos de este rectángulo porque ya no lo necesitamos. En cuanto al espaciado, lo que podemos hacer es quizá elegir 64. Creo que va a funcionar bien. Veamos dónde estamos. Así que así, 64, estamos ahí. Y debido a que usaremos grid dentro de Webflow, lo que podemos hacer es golpear a Control G aquí mismo y tal vez llamarlos grid de préstamos. Ahí vamos. Y golpeó Control G en esta sección una vez más. Así que recuerda que somos 150 porque quieres que te vean por encima de la falla. Muévelo aquí mismo. Y llamemos a esta sección bultos líderes en el mercado. A continuación, pasemos a esta siguiente sección. Y para ahorrarme un poco de tiempo, solo voy a reutilizar esta sesión desde la página principal Control C, Control V, y codazarla para que sea la misma que esta. En realidad, no, mantengámoslo a 200 por este bien de espaciamiento de estos otros. Entonces aquí lo que voy a hacer es esto va a ser imagen sola. Y esto puede ser, veamos, nuestros socios. Nuestros socios. Porque este diseño es exactamente el mismo que en la pantalla de inicio. Déjame llevarme puedes hacer esto en Webflow por cierto también. Entonces, en lugar de recrear esto una y otra y otra vez, puede simplemente hacer doble clic en copiar y simplemente pegar su copia directamente desde su software de diseño de elección, en este caso, Adobe XD imagen de préstamos. Déjame ubicarlo justo aquí y arrastrarlo y soltarlo dentro. Ahí vamos. Quizás, codazo hasta aquí tal vez. Y ahora que eso está hecho, déjame elegir mis logotipos, arrastrarlos y soltarlos dentro. primero es lo primero, tal vez vamos a reducirlos a algo así o incluso mejor, vamos a crear algunas cajas que van a dar la vuelta a nuestros logotipos. Entonces vayamos con algo como esto, y vamos a darle las dimensiones de 270 por 60. Y en cuanto al radio de esquina, puedo deshacerme de la frontera, pero en cuanto al radio de esquina, quiero poder, veamos el pin ocho aquí y ocho aquí, lo que le dará el arriba a la derecha e inferior izquierda de ocho. Ahí vamos. Puedo darle un codazo al centro de mi imagen. A ver, tal vez 20 o 24 o incluso mejor en cada lado. Y esto va a ser para el bronceado, su logo. Entonces esto va a ser titular del logo, algo así. Y vamos a duplicar esa porque vamos a necesitar posicionarla aquí. 24 de este lado como se puede ver. Y vamos a empujar estos abajo a aquí. Usa el bronceado, su logo, bájalo, solo una mezcla de toque. Estamos en el centro de nuestro logo titular hit Control G. Este va a ser nuestro logotipo de socio superior. Una vez más, no va a renombrar esto por alguna razón. No sé por qué. Entonces intentemos eso otra vez. Socio superior, logo. Conoce un tema, pero el top. Ahí vamos. Y finalmente, vamos a tratar con este siguiente que obviamente va a estar abajo. Entonces vamos primero lo primero, alinéelo al centro y centro y golpeemos Control G, en este caso. Y en vez de arriba, voy a dar una botella. Logotipo de socio inferior. Atrévete a ir n muy bien hecho. Entonces ya puedes ver que tenemos esta página también. Por último, lo que nos queda por hacer es seleccionar estas secciones en la parte inferior. Así que vamos a seleccionarlos. Ahora vamos a organizar esto un poco mejor. Entonces tendremos a nuestros socios justo debajo de nuestros pulmones. Entonces tendremos héroe luego préstamos, sección de promoción, luego los préstamos de compensación de mercado son socios, que no es 170 y debería ser en 200. Eso es porque ponemos logotipos en su lugar. Ahí vamos. Y ahora permítanme seleccionar estos tres y moverlos en su lugar hasta que sean 200. Ahí vamos. Y finalmente, una última cosa que hacer es recortar esto a B64. Vaya, casi ahí. 64, ahí vamos. Entonces ahora que esa página está terminada, finalmente, lo que nos queda por hacer es crear la página Contáctenos, que obviamente va a ser súper simple. Sólo vamos a reutilizar esa información y simplemente pegarla en la imagen dentro. Entonces te veré en el siguiente video. Realmente no hay necesidad de que cree el siguiente video, pero seguiré creando solo aseguré eso y te guiaré a través alguna información adicional que no cubrimos aquí. Entonces te veré ahí. 144. Página de "Contacto": Sigamos adelante y diseñemos la página Contáctenos. Como dije, va a ser súper simple. Se va a hacer en solo un par de segundos porque guardamos todos estos componentes. Así que saltemos directamente a XD y creemos. Entonces aquí estamos en XD, pero voy a hacer es seleccionar éste, Control D una vez más. Y vamos a empujar esto un poco más porque nos está distrayendo por alguna razón. Ahí vamos y lo movemos justo a su lugar. Ahora los tenemos a todos. Entonces, vamos a darle un nombre a esto si quiere renombrarle el nombre. Ahí vamos. Póngase en contacto con nosotros. Ahí vamos. Y aquí lo que haremos de inmediato es seleccionar los préstamos por defecto estado seleccionar, Contacto, Nosotros, seleccionar seleccionado porque eso es lo que vamos a estar seleccionando después de todo. Y deshazte de éste. Entonces esto, esto, y esto va a deshacerse de toda esa información. Y por último, lo que necesitamos es simplemente arrastrar y soltar una imagen dentro. Veamos algo como esto. Ahí vamos. Es una imagen bastante enorme una vez más de Envato Elements y cobro de deudas, que ya te hablé y te mostré. Para que podamos darle un codazo aquí mismo. En realidad sabemos que lo que vamos a hacer es cortarlo. Entonces usemos un rectángulo con una altura de, digamos 600. Vamos a deshacernos de la frontera. Ahora vamos a darle un codazo directo a la cima. Me refiero al fondo de nuestra navegación. Y llamémoslo un showroom de araña tal vez porque digamos que ese es el showroom de esta empresa. Y ahora dentro de ese marcador de posición, vamos a arrastrar y soltar esta imagen, haga doble clic y ajustado para que quepa tal vez más o menos por aquí o algo así. Sí, sólo cortarle los zapatos y creo que eso va a funcionar bastante bien. Por último, lo único que tenemos que hacer ahora mismo es empujar esto hacia arriba y darle una distancia de 100, por ejemplo, porque no necesitamos que sea 200. Una vez más, por el bien de que todo esté justo por encima del redil. Cortarlo a 64, tal vez 63, 65. Ahí vamos. Entonces, finalmente, eso es todo. Este es nuestro diseño terminado y aquí es donde empezamos. Entonces empezamos con una página de inicio. Luego pasamos a la página del curso donde nuestros usuarios podrán seleccionar los autos que quieran cuando alguna vez sean llevados a este reporte, que se llama auto seleccionado, donde podrán ver información adicional. Incluso pueden hacer clic en esta imagen para ser recibidos con esta caja de luz. Y luego si cambian a pulmones, se les dará la información de los préstamos aquí mismo en esta página. Y por último, Contáctenos, que es solo una simple página de Contáctenos. Entonces ahí tienes. Eso es todo por la parte de diseño, básicamente más o menos. En la siguiente lección, te mostraré cómo conectar algunas interacciones básicas y algunas animaciones básicas entre estas páginas. Entonces, cuando compartes esto con tus clientes, podrás disfrutar al menos de algunas transiciones antes de que realmente te mudes Webflow cuando vamos a agregar algunas animaciones finales y realmente estamos va a hacer que este sitio web se destaque. Entonces te veré ahí. 145. Animación de los diseños: Bien, ahora trabajemos en nuestra animación. No vamos a hacer algo loco porque como mencioné, vamos a hacer en Webflow con todas las secciones volando en carga y cosas así. Pero aún tienes que mostrarle a tu cliente algo en la parte de diseño. Entonces, ahora sigamos adelante y hagamos eso. Entonces aquí mismo en XD, lo que voy a hacer es primero lo primero cambiar al modo prototipo como lo hice anteriormente. Y selecciona mis préstamos aquí mismo. Así que los artículos de nav, los préstamos. Y aquí mismo lo que voy a hacer es dar clic en este plus y simplemente arrastrarlo a préstamos. Y en vez de fórmula, porque esa fue la última interacción, voy a usar transición. Vamos a usar, no sé, pertenece animación. A lo mejor podemos usar disolver, tal vez esté fuera punto cero, digamos 4 s y hacer lo mismo para contactarnos. Así que haz clic en arrastrar hasta aquí, luego va a mantener la misma configuración. Ahora dentro de esta página, lo que voy a hacer, como pueden ver, ya está conectado porque estamos usando el componente hijo de este componente maestro. Por eso dije desde el principio que los componentes son sumamente importantes en XD. Entonces aquí en esta segunda página, porque no lo conectamos a los elementos de navegación para los autos. Sólo voy a arrastrarlo hasta aquí y vamos a comprobarlo aquí mismo. Todavía no lo conectó aquí porque este es el componente hijo. No podemos conectarlo aquí porque ya está en esa página. Entonces lo que tendremos que hacer es conectar en todos y cada uno de estos elementos. Autos, arrástrelo hasta aquí, selecciónelo de aquí, nav items autos lo arrastran hasta aquí. Y por último, haz lo mismo por éste. Si quieres ahorrarte un poco de tiempo, entonces lo que puedes hacer es hacerlo cuando realmente comiences con la página siguiente. Entonces, en nuestro caso, cuando en realidad empezamos con esta página del curso, deberíamos estar haciendo eso en esa etapa para que nos quede la libertad de hacer todas estas cosas. Entonces lo que vamos a hacer a continuación son solo algunas cosas súper básicas. Así que explora nuestros autos. Lo que podemos hacer aquí es hacer clic y arrastrar a esta sección y transición. Sí, vamos a hacer la superposición. Entonces solo algunas transiciones básicas. Ver todos los autos vamos a hacer lo mismo. Entonces solo va a hacer la transición a esta página. Y finalmente iremos al Range Rover. Y cuando seleccione el rango, va a dar click y arrastrar hasta aquí. Y veamos qué podemos hacer. Así que toca la transición. Sí, vamos con, vamos con algo diferente. Así que vamos con en lugar de transición, podemos ir con auto animar y destino de la tarjeta seleccionada está fuera, tal vez fácil. Ahora, vayamos con facilidad , reserve este auto. Lo que puede hacer es que quizás podamos llevarlos a esta página. En lugar de auto animar, solo vamos a usar transición Disolver, por lo que la animación se disolverá. Y finalmente en esta página C solo opciones, solo te llevará a la página de pulmones aquí mismo. Y cantidad va a enviar el formulario de contacto. Obviamente, podemos animar estos íconos al flotar y cosas así. Pero como dije, no nos vamos a molestar demasiado porque ya hicimos mucho trabajo. Entonces, si llego a una vista previa de prueba rápida, haga clic en los préstamos nos va a llevar a la página de lanzamiento. Haga clic en el botón Contáctenos. Va a llevarnos a la página Contáctenos. Haga clic en los autos. Y lo que necesitamos aquí mismo es en realidad conectar esto no a la página de inicio sino a la página del curso. Entonces ese fue mi error. Entonces vamos a ver. Los autos en realidad están conectados aquí. Entonces simplemente no aquí. Entonces aquí sólo vamos a moverlo a esta página. Aquí. Vamos a moverlo a esta página. Y aquí vamos a moverlo a esta página. Ahí vamos. Y ahora debería funcionar. Entonces ahora estamos en contactus. Entonces cuando haga clic en dos autos va a cambiar a autos. Préstamos, volver a los autos. Ahí vamos, vamos los préstamos. Y tarea de contacto va a cambiar para contactarnos. Una última cosa que queremos es conectar un logo para volver al hogar. Así que haz clic aquí mismo estamos en disolver. Eso es bueno. Seleccione un logotipo disolver. Seleccione un logotipo, disuelva. Ahí vamos y seleccionamos el logo y puedes hacer lo mismo en pie de página. Entonces aquí, aquí, porque el componente original obviamente está en la propia página de inicio, por lo que no funcionará de esa manera. Y finalmente, aquí, allá vamos. Entonces ahora cuando lo cambiamos y digamos que estamos visitando o no hay página de préstamos. Haga clic para cambiarlo. Y cuando haga clic en el logo, me llevará de vuelta a casa. Así que explora nuestros autos nos va a llevar aquí. Esto nos va a llevar de vuelta a casa. Ver todos los autos. Nos va a llevar aquí y echemos un vistazo al Range Rover. Entonces cuando haga clic aquí mismo , vaya, nos va a llevar hasta aquí. Entonces eso no es bueno. Entonces cambiemos eso muy rápido. Entonces si selecciono eso, en lugar de auto anima, voy a elegir transición y destino es la misma animación disolver está fuera. Escritorio de analista que fuera. Entonces si hago clic aquí mismo, localice mi Range Rover, haga clic, Allá vamos. Entonces ahora estamos en la parte superior de la página reservar este auto nos va a llevar a la página Contáctenos. Así que los autos una vez más, cambian a Range Rover una vez más. C solo opciones. Te va a llevar un discurso demasiado largo. Entonces si cambio todo el camino hacia abajo al pie de página, si hacemos clic en el logotipo, nos va a llevar a la página principal. Entonces ahí tienes. Es solo una pequeña transición rápida y pequeño curso rápido de animación en Adobe XD. Obviamente lo vamos a tratar en muchos más detalles en pipe flow donde vamos a animar cada una pipe flow donde vamos a de estas secciones, cada una de estas cartas, vamos a animar un poco de flotar sobre las imágenes. Vamos a animar todos estos iconos volando hacia su lugar. Esto es solo para mostrarte lo que es posible en Adobe XD. Obviamente, si no estás trabajando en algo como Webflow más tarde, solo estás haciendo diseño. Quizás pasar mucho más tiempo en Adobe XD y animar, como dije, esta caja de luz por ejemplo o este tipo de formulario, tal vez puedas crear un estado de componente separado, algo así, solo para darle a tu cliente un poco más de valor con tus animaciones. En el siguiente video, vamos a hablar sobre cómo exportar todos estos activos para Webflow. Entonces te veré ahí. 146. Exportar los activos: Hablemos ahora de cómo exportar nuestros activos para un desarrollo posterior en Webflow. Y te voy a mostrar algunos formatos de archivo, para qué se pueden usar y cómo estructurar realmente tus archivos para un mejor caso de uso para ti porque eres tú quien va a hacer el flujo de trabajo de desarrollo. Pero aún más importante, si estás configurando esto para otro desarrollador o equipo de desarrollo, para que puedan usarlo fácilmente. Así que vamos a cambiarte a XD y mostrarte cómo hacerlo. Entonces aquí estamos en Adobe XD y lo que voy a hacer es simplemente exportar algunos de estos artículos. Entonces lo primero es lo primero, lo que puedo hacer es seleccionar esto porque voy a exportar esto, esto, y esto como artículos separados. Entonces voy a seleccionarlos todos golpean Control o Comando E. Y aquí lo que puedo hacer es seleccionar PNG, pero en realidad no voy a hacer eso. Lo que voy a hacer aquí es seleccionar estos dos. Entonces estos círculos golpearon a Control E. Y cambiemos rápidamente aquí mismo. Déjame configurar la carpeta aquí mismo en mi escritorio, por ejemplo y voy a hacer, digamos un lugar en los activos. Ahí vamos. Déjame mostrarte este que voy a hacer. Entonces aquí dentro de esta carpeta, voy a crear otra carpeta y llamarla imágenes. Y otro polar lo llaman íconos. Y debido a que estas pueden ser ya sea imágenes o iconos, realmente depende de ti, pero en este caso, les voy a poner dos imágenes. Ahora, mantengámoslos también. Icono selecciona carpeta, y asegúrate de seleccionar el SVG porque eso va a mantener la capacidad de editor más tarde para los desarrolladores y para ti mismo, vas a experimentar un poco en Webflow, animaciones, retrasos, animaciones de caminos y cosas así. Pero si no simplemente exporta y va a mantener la misma consistencia en calidad que tenías aquí mismo. Porque nombramos todas nuestras capas correctamente. Es súper sencillo para nosotros exportar todos estos activos. Entonces, ahora sigamos adelante y exportemos algunos de estos íconos. Entonces aquí tenemos nuestros íconos, así que seleccionémoslos desde aquí. Entonces aquí tenemos garantía, mantenimiento, préstamos. Abre todas estas carpetas. Seleccione esto. Vaya, no creé el componente para esto. Y esto. Ahí vas. Entonces ahora, porque estos están en la pila, vamos a ver. Sí, porque esta es la pila, no puedo seleccionar esta y ésta es simplemente seleccionar todo. Golpea Control E, SVG a los iconos. Ahí vas. Seleccione este también a los iconos. Y selecciona éste también a los íconos. Te darás cuenta de que me estoy saltando estas imágenes por ahora, pero no hace ninguna diferencia. Entonces, dale a Control E para exportar este. Después, golpeó Control E para exportar éste. Todos ellos como SVG, y finalmente éste como SVG. Ahí vas. Ahora pasemos hacia aquí abajo. Entonces aquí ¿cómo se dirige? Entonces, dale Control E, exporta, selecciona el teléfono, y este es el ícono del teléfono. Entonces es íntimo. Control K, Control E. Exportaciones. Ahí vamos. Y horario de apertura, Vamos a darle el nombre para que veamos, el teléfono. Cometí un error. Déjenme mostrarle eso. Icons teléfono. Déjame deshacerme de él porque convierto todo este texto con el icono en un componente y no quiero hacer eso. Entonces lo que voy a hacer en realidad es volver a aquí, Control Z para deshacer eso y solo seleccionar el ícono del teléfono, golpear Control E. Ahora exportarlo. Eso está bien. Y hacer lo mismo para el horario de atención. Entonces en vez de todo, sólo voy a seleccionar el icono del reloj, Control-V. Ahí vamos, y se ha exportado el icono del reloj. Ahora déjenme cerrar eso y seleccionemos estos iconos en la parte inferior. Entonces tenemos estos, voy a seleccionar todos control E SVG. Y lo último que quiero hacer es exportar mi logo como SVG también. Porque quiero quedarme con ese retenedor. Mapa es algo que vamos a actualizar más tarde e integrar directamente en Webflow los sólidos tratan con imágenes. Entonces lo primero es lo primero, nuestros beneficios control de imagen E. Y en vez de SVG, voy a elegir JPEG esta vez debido a la mejor relación de compresión. Así que volvamos a las imágenes. Seleccione Carpeta, haga clic en Exportar. Haz lo mismo para esto. Entonces lo que ofrecemos, y no voy a exportar estos porque ya los tengo en carpetas separadas. Voy a seleccionar esta. Julie, ahí vamos. Y finalmente selecciona éste. Pero en vez de como JPEG, porque tiene fondo transparente, voy a seleccionar en como exportación PNG. Ahí vamos. Ahora lo que nos queda por hacer es hacer lo mismo para todas estas páginas diferentes. Aquí. No tenemos que hacer nada básicamente porque seleccionamos todo. Pero aquí. De hecho, seleccionemos esto, conviértelo en. Ahora primero vamos a seleccionar la imagen porque estamos en esa carpeta. Exporta PNG una vez más porque es un fondo transparente. Aquí. Cambiemos a SVG y cambiemos la carpeta. Vamos a los íconos. Ahí vamos. Seleccione Exportación de carpetas. No voy a tocar estas imágenes. Todo lo demás aquí está bien excepto esto. Así que vamos a lidiar con esto un poco. Así que el icono de SUV golpeó SVG. Ahí vamos. Voy a cambiar mi etiqueta porque recuerden que tenemos tres de estos íconos. Entonces vamos con la exportación de superdeportivos. Vamos a cambiarlo al estado predeterminado para un salón. Icono de salón. Ahí vamos. Aquí lo voy a volver a cambiar a SUV y simplemente alinearlo con el resto del contenido aquí. Si quiere chasquear. Ahí vamos. Así que todo se ve bastante bien. No voy a tratar con estas imágenes. Y vamos a tratar rápidamente con estos íconos porque aquí hay un montón de ellos. Pero puedo hacer para acelerar mi proceso sólo un poco es tal vez tratar de seleccionarlos todos pero quitó la pila de cada uno de ellos. Si tratamos de hacer esto, ahí vamos. Entonces va a quitar la pila de cada una de ellas, lo que me va a permitir seleccionar varios iconos al mismo tiempo. Entonces, si los abro, puedo seleccionar, seleccionar, seleccionar, seleccionar. En realidad no, vamos a pasar por abrir todos estos. Así que selecciona, selecciona, selecciona, selecciona, y estoy manteniendo presionado Control mientras estoy haciendo esto por cierto. Y él controlaría los iconos E SVG. Ahí vamos. Ahora puedes devolverlos a pilas si crees que es necesario. Pero no me voy a molestar demasiado al respecto. Eso es todo exportado, está todo bien. Veamos si tenemos algún otro íconos que tenemos. Entonces intentemos exportar estos. Entonces Control clave en éste, Control K en éste, y control K en éste. A ver, porque están en una pila, creo. Por alguna razón, sí, esto está en una pila. Entonces no importa, exportemos uno por uno. No quiero perder demasiado de tu tiempo y de mi tiempo también. Ya estamos a casi 8 min en este video. Y se puede ver que este proceso se repite de nuevo. Entonces veamos si tengo algún otro íconos. No acepto para el icono de cerrar aquí mismo. Pero no voy a exportarlo porque como dije, Webflow tiene su propio componente lightbox dentro de él. Entonces, ahora tratemos con las imágenes. Entonces la última imagen exportada fue esta. No voy a exportar esto porque ya los tenemos en carpetas. Entonces, vamos a lidiar con estos. Entonces selecciona estos dos controles E. Convierte esto en PNG porque tiene fondo transparente una vez más. Y cambiemos a nuestras imágenes. Seleccione, haga clic en Exportar y seleccione estos tres. Así. En lugar de PNG, voy a elegir JPEG porque todos tienen sus propios fondos, como este, Control E, JPEG. Y ahí tienes. Hemos seguido adelante y exportamos todo lo que necesitamos para exportar desde nuestro archivo para que podamos construirlo en Webflow. Entonces puedes ver lo sencillo que es esto, especialmente si estás haciendo un seguimiento lo que estás haciendo, dónde lo estás haciendo. Y si estás posicionando estos elementos correctamente, nombrados incorrectamente. Entonces es así como esto es simplemente rápido exportarlo a nuestro escritorio y comenzar a prepararse para Webflow. Entonces ahí vas por el diseño. La última lección, que quiero tocar un poco es el diseño responsive. En esta sección del curso, no vamos a hacer diseño responsive en Adobe XD, como mencioné, porque solo sería una pérdida de tiempo. Pero sin embargo, quiero mostrarte cómo trabajar con el diseño responsive usando estos elementos stacks y cómo planificar mejor para responsive más adelante en Webflow. Entonces te veré ahí. 147. Diseñado para responder: Finalmente, toquemos un poco nuestro diseño receptivo. El diseño responsivo es básicamente cómo diseño se adapta a diferentes tamaños de pantalla, que también se denominan puntos de interrupción. Y generalmente en tus herramientas como Webflow, tienes algo así como tres o cuatro puntos de interrupción principales, y luego puedes agregar puntos de interrupción adicionales y entre esos puntos de interrupción principales, tienes puntos de interrupción. Entonces, por ejemplo, para la tableta, ese es el punto de ruptura principal, pero tienes tamaños de tableta adicionales, como por ejemplo iPad es una superficie es una, las muertes de Samsung una. Entonces todos estos tienen diferentes puntos de interrupción. I diferentes tamaños de pantalla. Entonces déjame mostrarte cómo trabajar con eso en XD. Aquí estamos en Adobe XD aquí está nuestro diseño terminado. Así es como lo vas a conseguir aparte de esta sección donde en realidad voy a seguir adelante y crear todos estos iconos, todos estos colores, estilos, estilos tipográficos, solo para hacer tu vida un poco más fácil cuando llegas a este archivo. Pero sin embargo, todavía quería mostrarte cómo trabajar con el diseño responsive aquí. Así que vamos, por ejemplo no sé, duplicar esta página. Entonces Control D ahí mismo, pulsa un en tu teclado para tablero de arte, y usemos tabletas. Vamos a usar este tamaño de tableta, por ejemplo y lo que podemos hacer es seleccionarlo. Y vamos a elegir una de las ocho columnas, por ejemplo, vamos a elegir algo como 60 en cada lado para hacerla un poco más ancha. Entonces lo que podemos hacer aquí mismo es seleccionar nuestro nav, basándolo en aquí mismo. Y si el tamaño de la pantalla lo permite, simplemente podemos ajustar y mover esto en un poquito. Y entonces tal vez podamos mover este adjunto a aquí. Entonces así de fácil es ajustar esto, pero necesito ajustarlo desde este lado, así. Y luego haga doble clic dentro y posicione. Estas, obviamente, estas secciones van a ser súper simples porque solo están escalando por dentro. Así que colóquelo aproximadamente por aquí. Porque ahora tenemos un poco menos de tamaño. A lo mejor podamos ir con 32 aquí. Ahí vamos. Y ahora en cuanto a imagen, movamos la imagen en un poquito a algo así. El círculo puede quedarse. O tal vez podamos echar un poco la imagen un poco hacia abajo para que pueda cubrir el círculo. Ahora, cambiemos nuestras posiciones y permítanme ahorrar esto para que sea cinco por ciento en obesidad solo para que puedan verlo un poco mejor. Entonces en términos de la siguiente sección, lo que podemos hacer es simplemente copiarlo, pegarlo aquí mismo, y ahí vas. Ahora porque tenemos esta sección, voy a asegurarme de que esto esté en el centro de nuestro tablero de arte, así. Pero ahora se puede ver lo que tenemos. Entonces tenemos que ajustar cada uno de estos. Entonces en términos de esto, voy a desagruparlo. Y voy a posicionar estos dos últimos en la parte inferior, justo por aquí. Y esto va a ir aquí. Entonces movamos a bajar a estos dos. Esto va a ir justo aquí, esto va a ir justo aquí. Ahí vamos. Entonces ahora lo que podemos hacer porque tenemos ocho columnas, cada una de estas tarjetas puede ocupar cuatro columnas, así que vamos a cogerlas para que escuchen. Imagínalos para escuchar y codazarlos para que oigan. Y claro, todos ellos pueden ocupar algo como 32 de distancia. Entonces seleccionemos estos y tal vez codazo y 32. Y esto puede ser 32 también, así. Ahora por fin para el ancho, lo que puedo hacer es simplemente seleccionar todas mis cartas en un lado, así. Y solo asegúrate de que el ancho lo cubra así. Y haz lo mismo con estos. Pero debido a que tienen el efecto hover, no necesitamos el efecto hover aquí mismo. Entonces lo que puedes hacer es desagruparlos o si eres demasiado vago, puedes cambiar al efecto hover. Se puede ver que va, que volvió al estado original. Y puedes simplemente extender lo mismo que yo hice aquí mismo. Pero mejor aún es simplemente seguir adelante y deshacerse del efecto hover simplemente desagrupándolos como un componente. Entonces porque tenemos este formulario de contacto, e.g. I. Puede seguir adelante y copiarlo y pegarlo aquí mismo. Y debido a que necesitamos tener el color original para este sitio web, vamos a darle un color de color de cuerpo. Ahí vamos. Ahora, todo se levanta bien como debería. Entonces aquí lo que puedo hacer es hacer lo mismo. Así que asegúrate de que esto esté en el centro. Asegúrate de colocar este botón aquí mismo. Asegúrate de darle un codazo a esto aquí mismo. Asegúrate de darle un codazo a esto aquí mismo. Y ahora tenemos estos dos. Este es el sensible en pocas palabras. Así que solo estás alineando estos campos como el espacio lo permite. Y solo van a apilar muy bien y a llenar el espacio disponible donde quiera que ocurra el espacio. Entonces vamos a colapsar esa forma y veamos qué más tenemos. Entonces tenemos en este campo, así que copia y pega. Pero podemos hacerlo aquí mismo, es que podemos de inmediato convertirlo en una pila. Pero primero, desagruparlo porque eran los componentes originales. Así que desagrupa el Control G y conviértelo en una pila. Y esto puede ser por ejemplo donde estamos como así gritos. Copas mira donde estamos. Y debido a que tenemos la pila, simplemente puedo cambiar la posición de la pila y cambiar la distancia a 64. A lo mejor. Ahí van. Y lo que puedo hacer aquí es simplemente alinearlo. Entonces ven aquí, ven aquí, extiende esto para rellenar todo el ancho. A lo mejor reducir un poco la altura a algo como esto. Y entonces esto tal vez pueda ir a los centros. Entonces tal vez pueda posicionar esto en el centro y poner todo en una línea de texto donde estemos puede estar en el centro. Ahí vamos. Y ahora tal vez pueda ubicar el contenido. Puedo moverlo al centro de mi página así. Pero ahora tengo estos tres. Entonces lo que puedo hacer con ellos es ponerlos en un grupo, ponerlos en una pila en esta dirección. Ahí vamos. Y ahora simplemente tráelos a escuchar así, desagrupa mi pila, ven aquí, colócala aquí y asegúrate de que esto esté en el centro. Ahí vas. Ahora tienes un diseño completamente diferente. Lo que puedo hacer es darle un codazo a esto en el centro. Y todo eso se ve realmente encantador. Algunos, lo que puedo hacer a continuación es simplemente ajustar mi pie de página. Entonces controla C, control V para el pie de página. Asegúrate de que esto esté en el centro. Ahí vamos. Y solo ajusta lo que tengo aquí mismo. No sé por qué. Por alguna razón olvidé agregar el pie de página como componente. No sé por qué hice eso, pero no importa. Porque todavía lo mantuvimos durante todo nuestro diseño, pero vamos a conservarlo por consistencia. Vamos a darle más control C, control V. Veamos dónde estamos con esto. 200. Y el pie de página irá justo aquí. En realidad. No perder demasiado tiempo. Déjame hacerlo un poco más tarde. Centrémonos ahora en esto. Así que hagamos doble clic aquí y movamos estos íconos de las redes sociales a aquí. Así, mueve esto en el centro, así, y mueve esto justo aquí y allá vas. Así de súper fácil es crear un diseño responsive y ajustado, obviamente querer y no hacer es que no hice la navegación porque una vez más, no quería perder demasiado tiempo. Así que vamos a usar este logo por alguna razón. Se me derrumbó justo aquí. No sé por qué, pero en realidad no importa. Entonces, si golpeo la vista previa muy rápido, puedes ver cómo se ve esto. Entonces, en lugar del diseño de tres columnas, ahora tenemos un diseño de dos columnas. Y porque estamos en la tableta, quizás la mejor idea es desagrupar estos componentes porque no puedes pasar el cursor sobre la tableta porque estás usando tu dedo y no tu mouse. Y la misma historia aquí mismo. Entonces así es como estás haciendo los diseños responsivos para simplemente básicamente organizar estos elementos de arriba a abajo, izquierda y derecha y simplemente moverlos hacia abajo. Mueve este hacia arriba, mueve este hacia abajo, escala según el ancho de tu pantalla. Porque el ancho es lo que importa. La altura realmente no importa porque la altura puede ser interminable. Entonces ahí es donde voy a terminar esta lección sobre el diseño responsive. Porque una vez más, vamos a abordarlo con mucho más detalle dentro de Webflow. Así que realmente no es necesario que explique esto más a fondo aquí mismo, pero solo quería explicarte lo que puedes hacer en Adobe XD y que puedes lograr algo de esta capacidad de respuesta en sus páginas. En el siguiente video, vamos a comenzar con Webflow porque ya exportamos todos nuestros increíbles artículos. Y te voy a mostrar cómo empezar con Webflow, qué es y cómo navegar por él si nunca lo has usado antes. Entonces te veré ahí. 148. Futuro de Adobe Xd: En esta última lección, antes de pasar a Webflow, solo quería cubrir el futuro de Adobe XD porque con noticias recientes de comprar Figma del lado de Adobe, y solo quería darte mis $0.02 porque también soy embajador de Adobe XD y estoy trabajando estrechamente con el equipo de Adobe detrás de escena en todo esto a medida que se desarrolla. Entonces básicamente lo que necesitas saber es si sabes cómo diseñar, si conoces la estructura del diseño, si sabes cómo estructurar el diseño desde el principio hasta el final para que los problemas adecuados y ayudar a la audiencia adecuada. Realmente no te importa el software que vas a usar. Porque si eres un buen diseñador, incluso puedes usar Microsoft Paint si quieres, y seguirás creando buenos diseños. Entonces realmente no importa qué tipo de software vas a hacer y usar para lograr esos objetivos que tienes en el proyecto en el que estás trabajando. Básicamente lo que va a pasar es al momento de la grabación de este curso, las pláticas siguen en curso. Entonces este byte aún no es definitivo. Todavía tendrán que hacerlo final básicamente. Entonces todavía tienen que platicar con la gente que en realidad posee Figma porque no es solo un dueño, es múltiples propietarios diferentes. Todo el mundo tiene que estar en la misma página para que este buy-in pueda pasar. También, unos equipos legales tienen que residir unos con otros. Tienen que firmar montón de papeleo diferente. Y luego, si realmente pasa por que Figma se convierta en parte de Adobe Creative Cloud, como lo son todos los demás productos de Adobe, tiene que haber algunos cambios y esos cambios deben ocurrir dentro de Figma. Entonces, básicamente, las fuentes de Adobe tienen que ser incorporadas. Una mejor optimización de la imagen y una mejor inclusión de la imagen tienen que ser incluidas dentro. Se tiene que incluir alguna funcionalidad 3D, y hay que mejorar el video así como el soporte nativo de baja T, todo lo cual Adobe XD ya tiene, Figma no. Por lo que al momento de la grabación de este video de Figma acaba de introducir la posibilidad de video, y Adobe XD ya tenía esa posibilidad desde hace más de un año. Entonces para que todo pase y para que cierren XD, irá algo así como un año y medio. Y en tiempo de año y medio, podrás hacer la transición fácilmente a Figma porque Figma se verá como lote XDR en año y medio tiempo una vez que se convierta en parte de la suite Adobe Creative Cloud . En cuanto a XD y apagarlo, no lo cerrarán de la noche a la mañana. Y estoy hablando con el equipo de Adobe XD sobre esto todo el tiempo porque tengo todos estos cursos, tengo todos estos videos de YouTube. Y necesito saberlo porque muchos de mis alumnos me preguntan cuál va a ser el futuro de Adobe XD. Cómo va a quedar es una vez que la transición comience a suceder, irán desfasando lentamente las actualizaciones de Adobe XD. Una vez más, no lo apagarán de la noche a la mañana. Y durante el próximo año o dos, XD seguirá existiendo tal como es. Y seguirá recibiendo algunas actualizaciones básicas de vez en cuando. Y debido a que tienen muchos usuarios diferentes usando Adobe XD, creo que es algo más como 1 millón o 2 millones de usuarios usan Adobe XD en el día a día. Solo puedes imaginar que todas estas personas van a estar realmente enojadas si solo apagas su herramienta favorita de la noche a la mañana. Entonces van a pasar lentamente a Figma. Una vez que el Figma se convierte en parte de Adobe Creative Cloud, si todo pasa por un lado legal, obviamente. Y luego una vez que apaguen XD, la idea detrás de esto es que se parecerá mucho a Adobe XD. Entonces los dos básicamente se verán casi idénticos. Sólo las herramientas a las que estás acostumbrado en XD o en Figma van a ser diminutas, un poco diferentes. ejemplo, el posicionamiento de algunos de estos elementos va a estar aquí en lugar de aquí. Entonces nada demasiado importante. Y lo último que quiero tocar es la compatibilidad de archivos, porque todavía tendrás todos estos archivos XD. Por ejemplo, I. Creó un sistema de diseño llamado inicio. Y puedes consultarlo en mi página web, Alex, en design.co. Y ese sistema de diseño Inception está creado únicamente para Adobe XD. Pero una vez que Figma se convierte en parte de Adobe Creative Cloud, ojalá tengas la opción de usar archivos XD de forma nativa directamente dentro de figma debido a toda esta compatibilidad cruzada de archivos que Adobe Creative Cloud tiene. Porque actualmente, puedes abrir, por ejemplo archivo de Adobe Illustrator en XD. Puedes abrir archivos de Photoshop en XD. Puedes abrir diferentes conjuntos de iconos e imágenes de iconos, digamos en InDesign, puedes importarlos a illustrator. Desde Illustrator, puedes enviarlos a after effects. Desde After Effects, puedes enviarlos a estreno y así sucesivamente y así sucesivamente. Entonces, hay todos estos flujos de trabajo que deben ocurrir antes de que finalmente cierren Adobe XD. Y eso va a pasar en el próximo año o dos. Entonces, una vez más, volviendo al inicio de este video, el objetivo de este curso no es restringirte a Adobe XD, es mostrarte y enseñarte a aplicar estos mejores métodos y mejores utilizando el pensamiento de diseño y utilizando el proceso de diseño. Entonces, no importa qué herramienta esté utilizando, aún podrá ser el mejor diseñador de UI UX que pueda. Entonces, con eso fuera del camino, pasemos a Webflow y realmente comencemos a construir a partir de la trama web. Ahora. 149. Diseño de páginas web en Figma: En esta parte del curso, te voy a mostrar cómo crear un diseño que acabamos crear en Adobe XD, figma. ¿Cuáles son algunas diferencias entre trabajar en XD, trabajar en Figma y cuáles dos prefiero? ¿Por qué crear algo como esto en primer lugar? Bueno, si no lo sabía ya, Adobe compró Figma por una enorme suma de dinero durante el próximo año o dos, van a integrarlo en su suite de herramientas Creative Cloud. Lo que esto significa para ti como diseñador básicamente no es nada en absoluto. Si sabes usar Adobe XD, prácticamente sabes usar Figma también, porque esas dos herramientas son exactamente las mismas, excepto en algunas características clave que tiene figma. Adobe XD no tiene, y viceversa. Ahora bien, lo que esto significa para Figma en general, dicen que no van a cambiarlo en absoluto. Todavía se va a quedar igual. Pero no es de confiar en Adobe, en mi opinión, porque si solo miras las últimas décadas de su negocio, lo que hicieron con los macro medios, lo que hicieron con Dreamweaver, lo que hicieron con la demencia, y recientemente lo que hicieron con XD. Ellos van a hacer más o menos lo mismo con Figma también. Lo que esto significa es que van a agregar lentamente nuevas características sobre estas características existentes y convertirla en algún tipo de versión de Photoshop como lo hacen con todas sus herramientas. Pero nosotros, como diseñador, tenemos que ajustarnos y adaptarnos a estas tendencias y cambios en la industria. Y al final del día, estas son solo herramientas. Entonces, si viste este curso hasta este punto, viste que el proceso de diseño no es solo cómo trabajar dentro de una herramienta de diseño como XD o Figma. Esta es solo una parte muy pequeña al final del rompecabezas. Además, una cosa más que quiero mencionar es que les voy a mostrar ambos flujos de trabajo porque en este curso vamos a abordar Webflow en la siguiente sección de este curso. Y voy a mostrar algunas diferencias como exportar archivos desde XD y luego trabajar en Figma, trabajar en Webflow y como trabajar en Figma directamente. Y luego solo copia y pega tu diseño en Webflow. Y por qué no creo que sea una gran idea. En mi opinión, siempre debes exportar todos tus activos y recrearlos desde cero en Webflow, excepto si estás creando estas landing pages realmente simples en las que se pueden recrear, digamos 1 h o 2 h o algo así. En mi opinión, que ese plug-in realmente vale la pena probar. Y realmente merece la pena el esfuerzo de figma a Webflow, pero no al revés, no por estas, digamos, páginas complejas porque en mi opinión, si algo se va a romper, si no sabes cómo arreglarlo en Webflow, entonces realmente vas a tropezar. Así que asegúrate de revisar la parte de Webflow y asegúrate de ver cómo construirla desde cero. Y no voy a volver a grabar esa sección una vez más porque ya se ha grabado a partir de estos activos exportados de Adobe XD a Figma porque es exactamente lo mismo. Una vez más, la imagen es una imagen ya sea que hayas exportado desde Adobe XD o Figma, todavía vas a terminar en Webflow en este ejemplo en particular. Entonces como dije en la siguiente lección, vamos a comenzar con esta transición de XD Figma. Y voy a mostrar algunas diferencias en la forma de trabajar con ambas herramientas. Entonces te veré en la siguiente lección y comencemos. 150. Tablero de humor y mapa del sitio: Bien, menos que saltar a Adobe XD. Déjame mostrarte dónde estuvimos y dónde vamos a terminar durante esta sección del curso. Entonces aquí estamos en Adobe XD y esto es lo que creamos hasta ahora, como recordarás, creamos estos wireframes en papel se crean flujos de usuario, sitemaps para la arquitectura de contenido. Luego creamos este mood board copiando y pegando imágenes de la web. Y creamos esta guía de estilo al final de nuestro proyecto. Ahora, no voy a cubrir exactamente los mismos pasos porque ya los creé y ya los viste probablemente. Entonces simplemente te aburrirás porque todo es exactamente igual. Lo que voy a hacer en esta parte del curso está enfocado no en wireframes de papel, enfocarme en el flujo de usuarios. Pero voy a mostrar algunas diferencias en Figma respecto a estas flechas en particular. Y vamos a trabajar en sitemap y arquitectura de contenido. Y no por el contenido per se, solo voy a copiar este contenido de aquí y pegarlo en Figma. Pero voy a mostrar algunos consejos y trucos de organización que puedes usar en la deuda Figma. Adobe XD tiene pero son un poco diferentes una vez más, luego para el mood board, solo vamos a copiar esto porque no quiero perder tu tiempo en esta guía de estilo. Misma historia. Sólo voy a copiar y pegar esto porque solo estamos usando los mismos activos. Y solo voy a mostrar cómo configurar esto para tus desarrolladores más tarde porque Figma tiene esta característica llamada páginas que Adobe XD no tiene. Entonces ahí voy a mostrar algunas diferencias. Entonces vamos a atacar nuestro diseño. Vamos a empezar desde la página principal, pasar a los autos, autos seleccionados y así sucesivamente y así sucesivamente. Entonces voy a hacer exactamente lo mismo que hicimos aquí mismo. Sólo voy a mostrar cómo recrearlo en Figma y cuáles son algunas diferencias. Quiero guiarte a través este proceso completamente desde cero, como dije, porque solo quería mostrarte que estas herramientas son casi exactamente las mismas. Como un forastero. Podrías mirar algunas características y pensar por ti mismo, bueno, aquí hay algunas diferencias principales. No son exactamente lo mismo, pero créeme lo son. medida que te acompaño por este proceso, puedes ver toda la parte XD del curso y ahora toda la parte de película del curso. Y ve por ti mismo lo diferentes que son realmente estas herramientas. La verdad es que son casi exactamente lo mismo. Que hay algunas, solo algunas diferencias aquí y allá en, digamos convenciones de nomenclatura y estas páginas, por ejemplo, cómo funcionan los componentes y cosas así. Pero al final del día, el panorama general es exactamente el mismo y estas herramientas hacen exactamente el mismo trabajo. Entonces lo que voy a hacer es poner esto a un lado así y mostrarte cómo trabajar en Figma. Entonces aquí estamos en Figma. Y como podrías notar, la herramienta es un poco diferente a XD. Porque en XD, si lo traigo de vuelta una vez más, puedes ver que tenemos todas nuestras características y todos nuestros componentes, colores, estilos aquí mismo, y tenemos nuestras herramientas en el lado izquierdo, mientras que en Figma, tenemos nuestras herramientas aquí mismo, y tenemos nuestro panel de propiedades aquí mismo. Compartir es exactamente lo mismo que en XD. Simplemente no tienes este prototipo de diseño compartido aquí mismo, pero estás diseñando de inmediato. No necesitas compartir per se, solo necesitas compartir una vez que comience a compartir, y luego se va a actualizar de forma automática porque está en el navegador. Pero aquí puedes simplemente dar click para previsualizar, igual que lo es en Adobe XD. Y en lugar de tener todos tus colores, estilos, activos, íconos de este lado, solo los vas a tener en este lado cuando hagas clic en algún lugar afuera. La otra gran diferencia aquí es que no tenemos nuestras juntas. Entonces en XD tenemos nuestras aves. Entonces todos estos son tableros de arte, como recordarás, esto por ejemplo es 14 40 por 5775. Entonces voy a seguir adelante y copiar eso muy rápido. Justo este ancho. Regresa a aquí y aquí tengo que darle a F para el cuadro, arrastrar un cuadro rápido. Y luego aquí por el ancho, solo pega ese N. Y aquí tengo mi marco. Si no recuerdo bien, esa es una página de inicio. Entonces déjame copiar este texto aquí mismo. Regrese a aquí, haga doble clic en este nombre del control de cuadro V y presione Entrar. Entonces básicamente lo que hice aquí mismo, ha creado un aeropuerto. Es solo, no se le llama nuestro puerto en Figma. Se llama marco. Y el marco tiene algunas características que son puertos no tiene. Pero básicamente, en pocas palabras, son exactamente lo mismo. Así que comencemos con el primero y voy a presionar Eliminar en este muy rápido porque lo que quiero hacer es arrastrar x dy afuera. Así que no te quedes ciego sobre mí mientras empiezo a trabajar con esta canción, sólo vamos a golpear Control C y Control V para pegar algunos ácidos aquí y allá. Entonces voy a entrar aquí mismo y pegar en esta estructura metálica de papel por dentro así. Entonces lo que voy a hacer es básicamente crear un informe o un marco como este. Y lo voy a llamar moodboard. Y déjame comprobarlo. Es el 19 201-080-1920 por 1080, así. Y luego voy a seguir adelante y seleccionar todo el contenido que estaba dentro de ese mood board originalmente, y seleccioné hit Control V para pegarlo. Y puedes ver que lo va a pegar exactamente en el mismo peso, simplemente En vez de tener imágenes separadas como las que tengo aquí mismo en XD, las va a pegar como una sola imagen. Entonces lo que puedo hacer en este punto se llama este mood board images. Y si quieres exportar imágenes separadas, qué puedes hacer, porque como puedes ver, las seleccioné. Bien, aquí. Esto se puede hacer. Para que puedas hacer control C, copiar, controlar V pegar. Entonces va a pegar una sola imagen. Entonces puedes escalarlo manteniendo presionado Shift y pegándolo ahí mismo para que puedas colocarlo donde quieras. Pero en este caso, no quiero perderte el tiempo porque si queremos ver cómo obtuve estas imágenes, asegúrate de ver la sección de mood board del curso. Entonces lo que voy a hacer es arrastrar y soltar mi logo dentro. Y voy a colocarlo en algún lugar por aquí y voy a llamarlo logo. Y se puede ver que tenemos algunos temas aquí mismo. Entonces lo que voy a hacer antes que nada es por ejemplo, veamos. Tal vez quiera aumentar el espaciado entre letras a algo como esto, luego asegurarme de que estos dos estén centrados. Y voy a poner el contorno tal como está, seleccionar mi logo, y este es tu componente aquí mismo. Entonces Control Alt haga clic o Comando Alt haga clic en un Mac. En lugar de control K, Se puede ver que dice control Alt K aquí en XD es sólo Control K o Comando K, Comando tecla Alt. Entonces básicamente exactamente el mismo logo. Y si quieres hacer una versión de este logo, no necesitamos hacerlo, pero si quieres, lo que puedes hacer es simplemente dar clic aquí para agregar una variante. Cuál es la variante, es una versión o nuestro componente hijo de este componente principal. Y en este caso, veamos qué podemos hacer. Entonces esta variante, puedo llamarla e.g en lugar de variantes a la puedo llamar blanca. Para que veas que ahora tenemos eso. Y si hago doble clic aquí mismo, se puede ver la propiedad una blanca. Entonces la propiedad uno quiere decir que es la primera propiedad. Si agregamos otra variante, va a ser propiedad a propiedad tres y así sucesivamente y así sucesivamente. Entonces, no importa cuántas de estas propiedades agregues, va a terminar así. Entonces voy a seleccionar mi esquema. Haga clic aquí. Asegúrate de elegir el blanco. Y voy a agregar este blanco como color para poder dar click aquí mismo y dejarme esconderme para que veas eso un poquito mejor. Y luego puedo hacer click donde dice estilos de color. Voy a dar click aquí mismo y llamarlo blanco, así. Y descripción color blanco puro. Ahí vamos. Entonces ahora tenemos ese estilo blanco. Se puede ver que se aplica. Y puedo seleccionar estos dos textos y llegar a mi color de relleno, que es este de aquí mismo. Haga clic en estos puntos. Creo que seleccionar blanco. Entonces se va a actualizar a eso. Entonces ahora tenemos un logo con dos versiones. Tenemos blanco y tenemos este color original oscuro. Así que sigamos adelante y organicemos estos un poco mejor. Voy a codazarlos son así. Y antes de seguir adelante, puedes ver que tenemos la página aquí mismo. Puedo dar click en la Página, clic derecho aquí mismo, página renombrada. Y puedo ver por ejemplo activos o una araña porque ese es el nombre. Ácidos. Golpea Enter. Ahí vamos. Y puedo crear una nueva página, y puedo llamarla diseño. Entonces dentro del diseño, tal vez quiera seleccionar Control C y Control V para pegar estos wireframes. Porque si quiero recordarme a mí mismo en algún momento, si algo se ha hecho correctamente, por ejemplo, y puedo hacer doble clic aquí y llamar a este wireframe de papel, por ejemplo y luego cambiar de nuevo a un activo spotter. Puedo deshacerme de él si quiero, pero lo voy a dejar como está aquí mismo. Ahora bien, lo que quiero hacer a continuación para esta sección en particular es comenzar a crear este sitemap o arquitectura de contenido. Así que dale marco, presiona F. Ahora haz clic y copia y pega el nombre de los textos. Una vez que pueda sitemap la arquitectura de contenido para este caso en particular, lo que voy a hacer es 1173616 porque, whoops, no el logo. Este 11173616. Ahí vamos. Porque quiero que el contenido sea exactamente el mismo. Y queriendo que quiero mencionar es que vas a conseguir estos archivos Figma como archivos de proyecto, igual que hicimos con archivos XD. Así que asegúrate de descargarlos, asegúrate de abrirlos en tu computadora justo cuando quieras abrirlos y ven aquí mismo. Volver a archivos y luego Importación de archivos. Y vas a importar estos archivos como archivos nuevos. Básicamente va a ver algo como importar desde algunas otras herramientas o algo así. Así que déjame en realidad solo cheques. Así que este nuevo archivo de diseño y archivo de importación, puede hacer clic en Importar archivo para traer archivos de otras herramientas. Y luego dentro de eso, vas a poder abrirla. Así que déjame volver a mi expediente, así. Entonces ahí estamos y vamos a saltar dentro y crear rápidamente esta arquitectura de contenido porque ya estamos a 10 min en este video. Así que vamos a crear rápidamente eso terminado ahí. Y luego voy a regresar. flujo de usuario en el siguiente video. Entonces comencemos con la página de inicio. Y antes que nada, vamos a crear un texto. Así que escojamos Poppins de aquí mismo. Poppins, ahí vamos. Y Poppins va a ser 20 irregulares. Ahí vamos. Y el color puede ser blanco puro, por ejemplo así que lo que puedo hacer en este punto es escribir home page. Ahí vamos. Y lo que puedo hacer es darle a Shift a, eso va a crear un marco a su alrededor. Y voy a usar exactamente la misma configuración que antes. Entonces me voy a asegurar de que esté centrado. Y voy a incluir el emparejamiento horizontal de, veamos, 44, 44 píxeles. Ahí vamos. Y ahora necesito relleno vertical de 26 píxeles, por ejemplo y voy a obtener exactamente la misma forma que esta forma. Ahora solo en Figma. Ahora en cuanto a colores, déjame elegir ese color que ya tenemos justo aquí y aquí, donde dice Rellenar, voy a hacer clic Más haz clic aquí mismo, pega ese color. Ahí vamos. Y ahora voy a seleccionar el color del texto aquí mismo. Y veamos, en realidad esto debería ser blanco. Ahí vamos. Selección de colores. Vamos a ver. Así que llene. Ahí vamos. Si selecciono mi texto, ahora, ahí vamos. Entonces esto debería ser blanco ahí. ¿Bien? Entonces, si sostengo mi tecla Alt u Opción, puede ver que somos 26 de arriba y abajo, y 44 de cada lado, igual liquidado aquí mismo. Entonces puedes ver ahora que tenemos el marco. Y en términos de convenciones de nomenclatura, vamos con esa misma convención de nomenclatura. Entonces voy a llamarlo elemento nav como lo hice en Adobe XD. Y sólo voy a duplicarlo. Entonces Control D. Y aquí lo que voy a llamarlo son autos. Control D. Este voy a llamar préstamos. Control D. Esto va a ser Contáctenos. Y si viste el video sobre arquitectura de contenido, lo que realmente te animo a que hagas, lo que realmente deberías hacer es básicamente pensar en qué tipo de contenido irá en cada página. Ese es el verdadero, todo el punto de la arquitectura de contenido. Y en este caso, sólo estamos pensando en qué vamos a incluir en qué página. Con eso, quiero decir, lo que necesita cada página. Así que permítanme intentar copiar y pegar realmente el texto, pero solo se basa en como una imagen. Entonces hagámoslo. Así que golpeó T, he estado de navegación. Y vamos a comprobar lo que hizo aquí mismo. Y esto es lo que se va a arreglar en las versiones posteriores de Figma. Ahora que es parte de XD. Así que vamos a comprobar este color. Entonces voy a seleccionar este color, solo déjame ver cómo lo llamé. Color de golpeo oscuro, creo. Sí. Cambiémosle el nombre y agreguémoslo rápidamente a aquí, haga clic aquí. Tan oscuro, agregando color, pelo oscuro en color, y ahí vamos. Entonces ahora lo que vamos a hacer es seguir adelante básicamente y crear un grupo y llamar a este grupo. Déjame ver cómo lo llamé. Dentro de aquí se encuentran las secciones de inicio. Ahora, para este grupo, puedo crear maquetación automática así. Y lo puedo poner al fondo, así. Y veamos qué hice en Adobe XD. Se puede ver aquí mismo que usamos stack al fondo de 20. Entonces volvamos a Figma. Así apiló el diseño automático inferior 20 en este caso. Entonces cuando hago el duplicado y mantengo pulsada la tecla Alt, se puede ver que tenemos 20 distancia entre estos dos elementos, que es lo que realmente queremos. Entonces, ¿quiénes somos? Ahí vamos. Puedes hacer click fuera del Control D, va a colocar eso. Entonces lo que hacemos, control D, Control D, Control D. Así que esto va a ser nuestro beneficio donde estamos y mapear así que esto va a ser Contáctenos. Entonces finalmente controlar D Una vez más pie de página. Ahí vamos. Entonces ahora que tenemos estas secciones de hogares, lo que podemos hacer en realidad es poner estas dos. Entonces este elemento de navegación y la sección de inicio, podemos ponerlos en un control de grupo G. Y veamos, puedo llamar a esto por ejemplo página de inicio así. Y asegúrate de girar el diseño automático para ello. Y esta vez voy a hacer la distancia de 40. Ahí vamos. Y ahora en realidad voy a terminar este video aquí. Deshazte de estos. Porque lo que puedo hacer es misma historia como lo hizo en Adobe XD. Antes que nada, asegúrate de que esto esté centrado así. Y luego hacer tres copias más. Entonces Control D, Control D. Vaya. Control D, así. Y ahora puedo seguir adelante y hacer doble clic dentro de esto y llamar a eso autos y luego cambiar todos estos. Voy a hacer doble clic aquí mismo, escribir préstamos y cambiar todos estos. Haga doble clic aquí y escriba Contáctenos, y luego cambie todos estos. Así que nos vemos en el siguiente video una vez que haya terminado con eso, y luego vamos a pasar al flujo de usuarios. Entonces te veré ahí. 151. Flujo de usuario: Ahora que ya está hecha la arquitectura de contenido sitemap I, pasemos ahora al flujo de usuarios y a mostrar cómo se ve en XD. Entonces esto es todo. Vamos a crear rápidamente estos componentes de la misma longitud que hicimos para la arquitectura de contenido ahora mismo en Figma sort, déjame mostrarte cómo hacer precisamente eso. Así que vamos a ponerlo en algún lugar por aquí, por ejemplo, así que el espacio y el clic izquierdo del ratón para navegar, presione F para el marco. Dibuja uno y voy a llamarlo e.g User Flows igual como lo llamamos en Adobe XD. Ahora en realidad vamos a darle lo mismo, digamos dimensiones. Entonces déjame seleccionar esa y ver qué teníamos aquí mismo. Entonces tenemos 18 73 con 749 así. Así que ancho y alto, y voy a colocarlo por aquí y luego colocarlo aquí, tal vez en aquí y luego colocarlo aquí, algún lugar alrededor de esto. Entonces tal vez podamos reemplazar esto para que se vea exactamente igual, como si estuviera dentro de XD a algo así. Y entonces tal vez pueda posicionar mi logo y más o menos por aquí. Y voy a posicionar ese logo un poco diferente porque voy a crear una guía de estilo en la siguiente lección, mostrar cómo hacerlo. Entonces vamos a colocar este logo ahí, pero por ahora vamos a colocarlo tal vez aquí para que podamos acercar esto un poco más. Ahora, pasemos al flujo de usuarios. Cuando primero lo primero voy a dibujar algunos rectángulos. Entonces hit R, hit están una vez más dentro de ahí. Y luego voy a copiar esos dos colores. Así que copia mi azul principal. Pégala aquí mismo. Ahí vamos. Voy a dar click aquí mismo. Da click para añadir un nuevo estilo de color y déjame esconderme para que veas lo que estoy haciendo. Y voy a llamar a este azul principal. Yo lo llamo color azul principal. Entonces esta es en realidad la principal diferencia en XD figma es porque puedes ver las opciones descriptivas de d y puedes explicar más para qué se utiliza este color. Entonces básicamente, si este color se usa solo para los botones, entonces puedes describirlo. ejemplo, el color del botón azul principal o si se usa solo para imágenes de fondo o para sombras o para cualquier otra cosa. Entonces puedes describirlo aquí. Y esto es especialmente útil para los desarrolladores. No tienes Mostrar más opciones. Entonces cuando hago clic ahí mismo, se puede ver que tenemos estas propiedades. Puedo ajustarlo, o incluso puedo agregar nuevas propiedades aquí mismo. Por ejemplo, yo. Puedo agregar las superposiciones, puedo dar click aquí mismo. Y luego en lugar de sólido, puedo incluir un gradiente lineal. Entonces tal vez pueda bajar la opacidad de ese gradiente lineal. Y puedo agregar aún más todas estas opciones. Ahora, solo puedo darle a Create style porque no necesitamos nada de eso. Voy a darle al estilo Create. Y ahora tenemos este estilo blues principal. Ahora voy a hacer lo mismo. Entonces déjame copiar y pegar éste. Haga clic aquí, haga clic aquí y llame a este color de libración. Coloca el color o el color de la libración del botón. Entonces nuestros desarrolladores después, yo sabemos lo que es eso. Entonces ahora que creé esos dos, déjame deshacerme de ellos muy rápido. Y voy a usar esos mismos Poppins 20 textos. Y te voy a mostrar cómo agregar ese texto un poco más tarde, pero por ahora solo lo vamos a crear desde cero. Entonces lo que voy a hacer es básicamente crear un círculo y el atajo es 0 aquí mismo. Puedes mantener tu tecla Mayús aquí mismo. Y déjame cerrar todos estos para que no nos estén molestando. Entonces para éste, lo que puedo hacer es llamarlo círculo, como deuda. Y para las dimensiones, vamos con una quinta parte, t con una quinta parte. Entonces algo bonito y grande. Haga clic en sus colores, presione azul principal, escriba el texto dentro. Y voy a llamarlo entrada así. Y como puedes ver, va a mantener ese mismo color y vamos a darle un blanco. Y agruparlos a todos, asegúrate de que estén en un centro como deuda. Y voy a ponerlos en un grupo antes que nada. Y voy a llamar a esa entrada. Y entonces voy a convertir eso en un componente. Entonces ahora tenemos entrada. Así que voy a colocar eso aquí muy rápido. Entonces lo que también tenemos es si me desplazo todo el camino hacia abajo, tenemos entrada, acción, proceso y decisión. Entonces para la acción, lo que vamos a hacer es básicamente crear ese círculo más claro. Pero ahora que lo miro, realmente no lo usamos. Entonces, lo que podemos hacer en tal vez solo podamos usar la acción. Así que vamos otra vez. Así que golpea 0 aquí mismo, crea un círculo, 15150. Ahí vamos. Y le voy a adjuntar el color hover. Voy a llamarlo círculo. Después usa la herramienta de texto, escribe en acción así. Y solo asegúrate de que el texto esté alineado al centro de la misma historia aquí mismo. Así que solo asegúrate de que ambos estén centrados así. Como, entonces, ahí vamos. Y voy a agruparlos para llamarlo acción. Puede golpear a Shift a inmediatamente. Sólo voy a mostrarles que el flujo de trabajo que usamos en XD funciona exactamente igual aquí también. Entonces ahora que tenemos acción, lo que queremos es el proceso. Entonces, para el proceso, vamos a crear un rectángulo rápido. Puedes golpear R aquí mismo. Y para el proceso podemos usar exactamente el mismo color. Ahí vamos. Y voy a llamarlo el rectángulo. Así. Golpea T para la Herramienta Tipo, Yo proceso de pin así. Y veamos qué podemos hacer aquí mismo para que pueda empujarlo hasta aquí. Y veamos, éste tenía 86 de altura. Entonces hagámoslo. 86 de altura y asegúrate de que esto esté en el centro. Ahí vamos. Y para los lados, lo que podemos hacer es quizá incluir 44. Creo que esto está bien. Sí. Entonces si un grupo lo y lo llaman proceso, ahí tienes, presionas Shift a y luego puedo convertirlo en un componente. Entonces esta vez me fui al revés, pero aún así se puede ver que se están mostrando como componente. Entonces básicamente puedes hacerlo como quieras. Por último, lo que tenemos es una decisión. Entonces para hacer eso, lo que puedes hacer es crear un cuadrado. Así que vamos con nuestro una vez más, y vamos a convertir esto en 100 por 100. Ahí vamos. Y podemos usar el mismo color de terror. Ahí vamos. Y puedo llamar a esta decisión como So. Dale a la decisión que golpeó a Shift mientras estás rotando, asegúrate de posicionar a estos dos en el centro así. Ahí vamos. Y en realidad, vamos a convertir esto en un color oscuro. Entonces color azul principal. Y agruparlos para llamar a una decisión. Y luego golpeó aquí mismo para convertir eso en un componente. Ahora por fin, para usar todas estas flechas, lo que puedes hacer es simplemente usar una flecha de aquí. Entonces, para conectar todos estos y convertirlo en esto, lo que tenemos aquí mismo dentro de nuestro archivo XD. Entonces lo que puedo hacer en realidad es seleccionar todo así o controlar C. Entra aquí mismo, escribe Control V, y va a pegarlo como imagen. Entonces va a ser una pequeña referencia agradable para nosotros. Entonces lo que podemos hacer aquí mismo es tal vez hacer algunas selecciones. Entonces por aquí, tenemos esta decisión. Entonces aquí en vez de proceso, lo que haremos es escribir algo así como Explorar autos y puedes ver que se ajusta automáticamente. Entonces para esta acción, vamos a escribir la tarjeta de vista. Ahí vamos y nos aseguramos de que ambos estén en el centro. Así que la misma historia como en XD antes. Pero por alguna razón no va a hacer pepitas, así que déjame seleccionarlo y manualmente y colocarlo aquí mismo. Entonces Vieux Carre, Ahí vamos. Entonces tenemos esta decisión. Y asegurémonos de que todos estén centrados en la vida. Así que asegúrate de darles un codazo aquí. Entonces aquí arriba vemos, vemos bajo, así Control D una vez más. Así que ver préstamos. Ahí vamos. Esto irá al centro de este Control D. Abajo. Ahí vas y ves Autos relacionados. Asegúrate de que esté en el centro de control D. Aquí voy a escribir en contacto, distribuidor se asegura que esté en el centro. Controlar el libro. Una prueba de manejo, permita el bucle y luego duplique éste. En lugar de entrada, escriba en salida. Ahora que tenemos son User Flow, lo que podemos hacer en este punto está conectado con flechas. Entonces tal vez podamos espaciarlos y tal vez colocarlos como así tal vez darle un codazo un poco. A lo mejor podemos asegurarnos de que estos estén centrados. Muévalos un poco. A lo mejor hacer algo como esto, algo así porque tenemos espacio y lo voy a dar un codazo aquí. Entonces aquí se asegura de que esto, estos dos estén centrados y esto sea más o menos por aquí. Entonces ahora sigamos adelante y sumemos todas esas flechas. Entonces lo primero es lo primero, solo voy a usar Shift L, pero voy a dar click en la flecha solo para mostrarte. Puedes usar el turno. Ahí vamos. Ahora 40 flechas, si recuerdo correctamente, si, si usamos este color, no puedes tener este círculo. Tendrías que recrearlo si quieres que sea exactamente igual que en Figma. Pero por ahora, sólo voy a usarlo en todo este círculo. Así que vamos a saltar dentro de aquí. De hecho, déjame moverme aquí. Entonces aquí tal vez podamos usar para, para el grosor, para el color. Puedo ir con color hover y al instante tenemos nuestra flecha. Entonces lo que puedo hacer es seleccionar presionar Control D para duplicarlo, Control D para colocarlo aquí mismo. Puedo ver que saltó a la misma distancia, pero quiero que sea más o menos por aquí. Ahí vamos. Y a lo mejor estos dos no están centrados. Ahora lo son. Así que sigamos adelante y rápidamente centremos todos estos. Ahí vamos. Entonces ahora lo que podemos hacer porque tenemos estas flechas más complicadas, como estas, e.g podemos hacer algunas combinaciones. Entonces, antes que nada, terminemos con estas flechas de muestra. Entonces Control D, Vamos a darle un codazo a más o menos por aquí. Control D, colóquelo aquí así. Y voy a golpear a Shift. Ahí vamos. Asegúrate de que eso esté en la posición central a las 23, digamos. Después Control D y cubrir y girar, mantener el cambio. Ahí vamos. Y 23 aquí, y veamos 23 aquí. Ahí vamos. A lo mejor podemos hacer la misma distancia solo por el bien de ella. Y colóquelo aquí. Veamos, alt 20, dos y medio. Ahí vamos, 24 o k se asegura de que esto esté en el centro así. Y voy a dejar esto como está ahora mismo. Entonces la única otra cosa que necesitamos, esta y esta. Entonces seleccionemos este y este Control D para hacer duplicados. Entonces voy a colocar este de aquí, este de aquí, allá vamos. Y voy a darle un codazo más o menos por aquí. Entonces veamos ahí. Y éste va a ir al centro, y éste va a ir aquí. Ahí vamos. Entonces ahora necesitamos estos dos. Entonces necesitamos conectarnos, ver amarillos y contactar con el distribuidor. Por alguna razón tengo un duplicado aquí. Déjame deshacerme de él. Entonces lo que voy a hacer es Control D para duplicar este se asegura de que esté en el centro. Control D una vez más. Y voy a rotar éste. Hagámoslo otra vez. Ahí vamos. Entonces ahora lo que puedo hacer es en realidad extender este. Sostén mi tecla Mayús para llegar al centro. Extiende esta, Toda mi tecla Mayús, y luego solo selecciona el final aquí. Entonces digamos que ninguno. Y entonces estos dos van a conectar aquí. Entonces esta es la primera ventaja de Figma sobre x, z en mi opinión, porque tienes una herramienta como esta. Ahora no tenemos los círculos que creé en XD, pero no importa, podemos simplemente usarlos así. Así que solo le pegué Control D en este. Y voy a darle un codazo aquí mismo. Así que vamos a acercarnos un poco para que podamos usarlos y fusionarlos. Ahí vamos. Entonces lo que haremos es pasar de autos relacionados con C a ver auto. Entonces, en este caso, sigamos adelante. Girado manteniendo pulsada Shift. Ahí vas. Asegúrate de posicionar esto en el centro de nuestro círculo así. Y luego simplemente empujar suavemente el escritorio hacia la derecha, así. Asegúrate de que esté en el centro. Asegúrate de que esto se reúna aquí mismo. Si el turno de retención, y ahí vas. Básicamente, en pocas palabras, acabamos de crear nuestro flujo de usuarios y nos tomó 14 min hacerlo. Por lo que hay algunas ventajas en este flujo de trabajo. Hay algunas desventajas. Se puede ver, por ejemplo, el hielo acaba de seleccionar todos ellos y estoy tratando de moverlos. Y a veces simplemente no se mueve, veces va a ser un poco terco conmigo y cosas así. Así se puede ver eso aquí. No tenemos esos puntos azules que teníamos en versión XD, pero aún así, creo que va a hacer el trabajo muy bien. Solo ten en cuenta, puedes ir al germen de higo, que es algo que no cubrirá en este curso. Y para los alemanes básicamente casi creado para cosas como esta, pero quería demostrar que también puedes hacerlo en Figma, usando exactamente el mismo flujo que usamos hasta ahora en XD. Entonces por ahora, lo que voy a hacer es seleccionar todos estos. Ahora veamos. Esta es la flecha que se alejó de nosotros y golpeó Control G. Llama a estas flechas solo para mantener las cosas un poco más organizadas. Y lo que voy a hacer es ocultar este flujo de usuarios. Entonces eso es básicamente todo para nuestro flujo de usuarios. Eso es básicamente para la estructura de aquí. En la siguiente lección, lo que haremos es enfocarnos en esto, que es la guía de estilo. Entonces te veré ahí y ahí vamos a estructurar nuestra tipografía. Voy a arrastrar y soltar estos iconos. Voy a posicionar el logo. Vamos a averiguar los botones y asegurarnos de colocarlos ahí y básicamente poner todos nuestros elementos en forma antes de saltar diseño y antes de terminar con el diseño de la página principal. Entonces te veré ahí. 152. Creación de guía de estilos: Continuemos y trabajemos en nuestra guía de estilo. Entonces, antes que nada, permítanme crear ese marco muy rápido. Entonces F para el marco, ahora haz clic en llamarlo guía de estilo. Y una vez más, estamos en las páginas como activos de Pilar y vamos a cambiar al diseño cuando realmente empecemos con el diseño. Pero primero terminemos con nuestro proceso de creación de activos. Entonces aquí si quieres extenderlo, simplemente puedes hacer clic aquí mismo y extender mucho tiempo que quieras que sea. Pero en nuestro caso va a ser de 2,400. Entonces solo voy a tratar de hacer todo exactamente igual como lo es en Adobe XD. Entonces lo primero es lo primero, lo que quiero hacer es escribir colores aquí mismo . Ahí vamos. Y éste, voy a ir con 32 y perno, como deuda. Y el color va a ser ese oscuro aquí agregando colores. Entonces no estoy muy seguro de por qué no lo tradujo. Oh, ahí vamos. Por lo que tomó tiempo actualizarse un poco. Entonces vamos a colocarlo 64 desde arriba, así. Y vamos a colocarlo 32 desde este sitio. Entonces veamos, tienes esta pequeña opción agradable en la parte superior mostrándote dónde está. Entonces dos pixeles. Y si sostengo mi tecla Alt u Opción en Mac, puedes ver que estamos 64.32. Entonces sigamos adelante y comencemos con la topografía porque eso es mucho más importante, en mi opinión. Estos colores porque van a ser creados muy rápidamente. Entonces tipografía, voy a pegar en ese texto aquí mismo. Asegúrate de que esté alineado a la izquierda, asegúrate de que esto también quede alineado a la izquierda. Entonces no tenemos esos temas después. Ahí vamos. Primero lo primero voy a golpear Control D aquí mismo y básicamente copiar y pegar en todo este texto dentro de aquí. Y lo primero es lo primero, esto va a ser 64 perno. Ahí vamos. Y lo voy a colocar, veamos 40 de aquí. Así. Y entonces voy a mover esto hacia abajo, poner esto en un grupo llamado topografía. Así. Pulsa diseño automático o cambia una mezcla si 40 es la diferencia y luego voy a seleccionar este y venir aquí mismo. Entonces lo primero es lo primero, veamos por los colores. Sí, podemos tener ese color de rumbo. Eso está bien. Voy a dar click aquí mismo y añadir un nuevo estilo. Y voy a llamar así a este H uno. Entonces básicamente este va a ser nuestro H1. Y ahora sigamos adelante y dupliquemos esa. Haga clic aquí. Ahora voy a dar click sobre este enlace para desvincularlo. Entonces para esta segunda, lo que quiero es esto. Entonces tal vez pueda simplemente Controlar D y seleccionar todos estos. Entonces es mucho más sencillo para nosotros crear. A ver, esto va a ser bloque de texto. Ahí vamos. Y párrafo. Ahí vamos. Y el texto sin etiquetar ahí vamos. Entonces lo primero es lo primero, sigamos adelante y verifiquemos si tenemos esta configuración. Así que asegúrate de seleccionar H1 y luego dar clic en él, haz clic aquí mismo. Y veamos qué tenemos. Entonces tenemos lo que dice, un interlineado. Entonces tenemos un espaciado entre letras y tenemos altura de línea. Entonces en este caso es auto. Pero aquí vamos a escribir 86, por ejemplo ahí vamos. Y ahora todo va a ser mucho más agudo. Ahí vamos. Entonces este es nuestro H1 aquí para este segundo, lo que queremos es convertirlo en 32. Así que perno. Y veamos por el color, creo que es lo mismo. Sí, lo es. Entonces es este uno a uno a dos a cuatro. Ahí vamos. Eso está bien. Entonces eso es lo mismo. Voy a seguir adelante y ajustar estos. Entonces tenemos 56 para la altura de línea o interlineado. ¿Cómo lo vas a llamar? Entonces veamos 56. Ahí vamos. Y voy a dar click aquí mismo, click aquí y llamarlo H2. Entonces para esta tercera, voy a hacer es, veamos, el color es diferente. Entonces tal vez debería crear estos colores para que no nos confundamos. Entonces veamos así. Entonces ya tenemos hover, tenemos azul principal, tenemos rumbo oscuro, que es este color aquí mismo, de color más oscuro. Entonces tal vez pueda seguir adelante y muy rápido, solo haz esto. Entonces nuestro control D, Control D, Control D Control D, Control D. Veamos. Entonces para éste. Lo que puedo hacer es dar clic aquí mismo y luego muestrear este color. Para este, puedo hacer lo mismo y probar este color. Para éste. Puedo probar esto un gris claro. Ahí vamos. Esto va a ser blanco puro. Ya tenemos eso. Y finalmente, tenemos este último que es un color de cuerpo. Ahí vamos. Entonces, vamos a probar esa. Ahí vamos. Entonces lo primero es lo primero, agreguemos estos tal como están. Así que así. Y esto va a estar aquí solo que sepa lo que es todo. Entonces para darles nombres, bien, podemos comenzar con este. Así que vamos a agregarlo rápidamente. Crea un nuevo estilo. Este va a ser h párrafo de tres guiones. Entonces color para cada tres y párrafos. Ahí vamos. Recréalo. Yo lo hice. Entonces probemos eso una vez más. Entonces h3, el párrafo, color, crea estilo. Ahí vamos. Ahora, éste. Vamos a dar clic aquí mismo y luego aquí mismo, llamarlo gris oscuro. Crear estilo. A esto lo llamaremos un gris claro. Ahí vamos. Entonces finalmente esto lo llamaremos color de cuerpo. ¿Bien? Entonces ahora que todo está terminado, podemos hacer en este punto es tal vez podamos seguir adelante y eliminar esto, seleccionar el disco porque necesitamos aplicar el color de la carrocería aquí también. Así que solo haz clic aquí. Ahí vamos, porque queremos asegurarnos de que esto destaque un poco. Entonces aquí, lo que queremos con este h3 es, veamos. Entonces en este caso necesitaremos ese color h3. Entonces da click aquí mismo, h tres párrafo. Ahí vamos. Y vamos a ajustar esto. Entonces 40 por la talla, iremos 24. Ahí vamos. Bolt sigue ahí. Sí. Vamos a dar click aquí mismo en New Style, esto va a ser HD. Ahora bien, esto va a ser bloque de texto. Entonces antes que nada, bajemos a cuatro a 20. Vamos a ir a la lechería regular. Y aquí tenemos este color, que es gris oscuro. Así que selecciona el color gris oscuro aquí mismo. Ahí vamos. Y 44, el espaciado así. Ahí vamos. Entonces ese es nuestro bloque de texto. Y vamos a crear ese estilo. Entonces bloque de texto, porque más adelante en Webflow, usaremos estos estilos exactos. Entonces es muy importante. Entonces aquí lo que vamos a hacer es que nos falta el párrafo por algunas razones. Así que vamos a duplicar esto y déjame copiar y pegar esto aquí mismo. Ahí vamos. Entonces para los textos de párrafo, necesitamos esto a color D, así que a D a e30. Déjame comprobar si este es de este color. A D a E, tres ceros. Entonces eso es lo mismo para el párrafo. Entonces H tres párrafo voy a creer que esto va a ser 16, 26, irregular. Y vamos a crear un nuevo estilo, llamarlo párrafo. Ahí vamos. Por último, tenemos este texto de etiqueta. Y ese color va a ser el mismo que este color. Entonces cambiemos al párrafo de tres años. Y aquí le daremos 12. Irregular. Y lo que dice aquí mismo, 24 altura de línea. Ahí vamos. Entonces esto es lo que llamaremos texto sin etiquetar Crear estilo. Ahí vamos. Ahora, nuestros estilos se han completado, nuestros colores se han completado. Y vamos a crear solo una muestra de color. Entonces, para mostrarte cómo hacerlo. Entonces sigamos adelante básicamente y creamos 177-17-7149. En realidad voy a no. Vamos con algo así como 186 con 177. Esa es una posición mucho mejor aquí. En cuanto al radio de esquina pones el coronario está aquí. Entonces aquí tenemos ocho. Ahí vamos. Y lo voy a ajustar de este color a nuestro azul principal. Ahí vamos. Y voy a darle un codazo para que sea para el o 32, veamos desde aquí. Entonces 22, guión 32. Una vez más, cuando presionas Mayús y la flecha inferior va a dar un codazo a diez píxeles, igual que en Adobe XD. Entonces voy a llamar a este color Biji, como hicimos en XD o tarjeta de color tal vez. Y luego golpeó T justo aquí. Y vamos a ver. Ahí vamos. Entonces ese es nuestro color. En cuanto al tamaño, lo que podemos hacer es 24 voltios. Entonces tal vez podamos usar uno de estos estilos. Entonces 24, y ese es este. Ahí vamos. Y en vez de este color, voy a usar, digamos este color. Asegúrate de que esto esté centrado. Ahí vamos. Y voy a darle a Control D para duplicarlo y asegurarme de colocarlo aquí, y esto va a ser r. Veamos, cambiémoslo a textblock. Ahí vamos. Y vamos a llamarlo color hover. Ahí vamos. En cuanto a espaciamiento, vamos con 16 aquí mismo. Entonces algo así. Ahí vamos, ahí. Déjame fusionar esto. Agrupemos esto, y llamemos a esta tarjeta de color. Ahí vamos. Golpea Control G. Y voy a Guardar los colores del proyecto. Presiona Shift a para convertir esto en diseño automático. Y luego veamos que la distancia entre estos puede ser de 24, así. Y veamos cuántos colores tengo. 12345678. Entonces otros siete ejemplares. Uno, vaya, eso no. Debo seleccionar tarjeta de color 1234567. Ahí vamos. Y voy a seguir adelante y renombrar. Todos estos están fuera de la pantalla, así que no estás aburrido. Lo que les voy a mostrar aquí es, así que vamos con 64 aquí. Ahí vamos. Lo que voy a mostrar a continuación es la iconografía. Entonces lo primero es lo primero, sigamos adelante y usemos estos colores Control D, colóquelos aquí a 64. Entonces vamos a seleccionar este texto llamado iconografía. Ahí vamos. Y voy a saltar dentro de mis íconos, asegúrate de ubicarlos en tus archivos de proyecto. Voy a darle a Shift un controlador, debería decir, para seleccionarlos todos, arrastrarlos y soltarlos dentro. Así que todos son una especie de grupo aquí y allá. Entonces los voy a organizar un poco más tarde. Pero básicamente, lo que necesitas entender es que va a ser un poco diferente a lo que solías, para organizarlos dentro de Figma y dentro de XD. Entonces así es como se organizan en XD. Y básicamente voy a ponerlos a todos en el mismo grupo. Pero antes que lo haga, voy a convertirlos a todos en componentes. Entonces eso va a llevar un poco de tiempo. Entonces voy a pausar el video ahí y detenerlo. Y entonces tal vez regreses a ti en el video separado para mostrar cómo hacer esos botones. Y luego vamos a terminar los botones del logo y estas tarjetas de autos solo para mostrar algunas técnicas de diseño muy rápido. Y entonces ahí vamos a terminar el video. Y luego en el video después de eso, vamos a saltar al diseño y comenzamos a crear nuestra página de inicio. Entonces te veré en el siguiente video donde realmente vamos a terminar con esta guía de estilo. 153. Creación de la guía de estilo: Entonces aquí es donde está la guía de estilo. Ahora, simplemente seguí adelante y poblé todos estos colores diferentes, nombres diferentes, resolví toda la iconografía. Y si hago clic a través, se puede ver que acabo de poner todos estos iconos en auto layout con una distancia de 32. Si quieres explorarlo un poco más, solo recuerda, puedes abrir todos estos archivos. Puedes explorarlos por ti mismo y ver hi estructurados todos estos elementos que puedas aprender por ti mismo. Si volvemos a aquí, lo que también hizo es traer de vuelta ese logo que estaba afuera. Ahora está dentro. Y configuré todos estos botones y textos de tarjetas de autos. Así que para los propios botones, Empecemos y vamos a crearlos muy rápido. Así que vamos a golpear nuestra derecha aquí y posicionarlo 32, por ejemplo, algo como esto. Entonces voy a llamarlo btn BG aquí mismo, y voy a darle, veamos qué podemos hacer. A lo mejor ocho píxeles así para la altura. Vamos por el ancho. Vamos con dos a cinco. Altura 73. Ahí vamos. Y voy a darle a T, teclea el botón principal así. Y voy a ver, veamos por los textos, lo que podemos hacer es usar, veamos. Tal vez bloque de texto. Sí, creo que el libro de texto está bien. Y por el color, vamos con el blanco puro. Al igual que se asegura que el texto vaya desde el centro y debería posicionarlo aquí. Ahí vamos. Y para el botón de fondo, lo que voy a hacer por el color es usar el azul principal. Ahora lo que voy a hacer es agruparlo, llamarlo principal, btn principal para el botón principal. Ahí vamos, Hit crear componentes y dar clic para crear una variante. Y para esta variante, vamos a simplemente cambiar esto del azul principal al color hover porque esta variante se va a llamar hover. Ahí vamos. Y ahora lo único que tenemos que hacer es seleccionar esto, cambiar a prototipo. Y puedes acertar a mostrar configuraciones de prototipo de esta manera. Y voy a darle click. Y voy a adjuntarlo a aquí. Ahí vamos. Así sucesivamente mientras se cierne, se cambió a la propiedad uno, que en este caso es hover. Ahí vamos. Y emisión instantánea o puedes ir con la disolución o animate inteligente, pero solo voy a ir con instantánea. Si quisiéramos ver cómo se ve eso, puedes simplemente dar click aquí mismo, pero básicamente solo va a pasar el cursor hacia atrás y hacia adelante. Y eso es lo que realmente queremos para esta animación en particular. Y porque realmente no queremos perder el tiempo a nuestros usuarios. Entonces, cuando flote aquí mismo, realmente lo puedes ver en este momento. Entonces tal vez deberíamos conectarlo de nuevo. Veamos mientras se cierne. Mostrar sección prototipo. ver lo que podemos hacer. Mientras se cierne. Cambiar a. Ahí vamos. A lo mejor deberíamos simplemente arrastrar uno. Entonces vayamos con los activos. Y vamos con la guía de estilo. Encontremos nuestro botón. Ahí vamos. Entonces voy a arrastrarlo hasta aquí. Ahora cuando flote, puedes ver que se está volviendo loco. Entonces lo primero es lo primero, vamos a eliminar esto. Vayamos dos veces y volvamos tres veces. Atrás. Ahí vamos. Así que solo quería quitarle esta. Ahí vamos. Por lo que ahora estamos justo en esta dirección. Entonces cuando arrastre este botón y hover, podemos ver que ahora tenemos este bonito color azul para la sección Hover. Entonces ahí vamos. Voy a deshacerme de éste. Ahora tenemos nuestro botón principal con hovering. Volvamos a cambiar al diseño. Y lo voy a posicionar aproximadamente por aquí y allá vamos por una distancia. Vamos con 64, entonces 123 con 64. Bonito. Y entonces tenemos ese botón hover. Y ahora solo necesitamos ese contorno de botón. Así que vamos con nuestro una vez más para crear un rectángulo. Y aquí lo que necesitamos es crear eso. Entonces tres a seis, que 73. Ahí vamos. Y voy a, vaya, no x e y, ancho y alto. Entonces una vez más, tres a seis con 73. Ahí vamos. Ahora voy a seguir adelante y seleccionar ese boton de contorno. Entonces voy a volver a cambiar a mis capas y llamarlo boton de esquema B, G. En este caso, ahí vamos. Voy a usar ese mismo texto. Voy a escribir el contorno del botón. Ahí vamos. Y en este caso por el color, podemos ir con un color gris oscuro. Así. Y tal vez pueda hacerlo en el centro. ¿Esto deberíamos comer también? Al igual que la deuda. Y veamos cómo podemos llamarlo. Contorno btn. Encantadora. Ahora en cuanto al contorno en sí, lo que necesito hacer es simplemente básicamente usar este color como borde. Entonces en este caso, voy a deshacerme del relleno. Voy a incluir un derrame cerebral. Y para el color del trazo, voy a usar el color gris oscuro. Ahí vamos, así. Y veamos ahora mismo aquí lo que hicimos es, como pueden ver, eso acabamos de destacar. Entonces este es el estado predeterminado, este es el estado hover. Entonces este es el estado hover en este caso. Para lo más duro solo tenemos esto para el color del borde, que es esto así a D a e30. Y ese es este color, creo. Sí. Entonces H tres párrafo, sólo para el hover o q. Así que ahora vamos a seguir adelante y hacer eso. Entonces BTN esquema, vamos a crear un componente. Bonito. Vamos a crear una variante. En esta variante se va a llamar hover. Dentro del hover, lo que haremos es simplemente cambiar esto de gris oscuro a párrafo HD y cambiar esto de gris oscuro a un CH, color de tres párrafos. Ahí vamos. Y ahora por fin, cambiemos a prototipo y luego hagamos lo mismo que antes. Así que selecciona este y voy a arrastrarlo hasta aquí mientras se cierne, cambia a ningún instante de animación. Y ahí vamos. Hemos terminado nuestros botones. Asegúrate de posicionarlo aquí para mantenerlo bien organizado. Entonces 48, en realidad está bien. Mantengámoslo ahí. Y lo que voy a hacer es posicionar esto aquí, esto aquí, y agrupar todos estos llamados botones. Ahí vamos. Se trata de 64 muertes. Encantadora. Y por último, para la última sección, que es una tarjeta de auto, la voy a empujar a 64. ver, 64, ahí vamos. Y para esta tarjeta de auto, puedo crearla aquí, o mejor aún, tal vez pueda posicionarla más tarde. Entonces no estoy muy seguro de qué hacer en este caso. Pasemos al diseño, lo siento. Sé algo así. Sí. Entonces lo que puedo hacer es simplemente usar estos como referencias. Porque aquí solo tenemos el esquema. No es nada demasiado importante. Y esto es para nuestra Harvard, esto es para nuestra tarjeta principal de auto. Así que empecemos en realidad, vamos a crear eso. Entonces vayamos con algo como esto. Entonces voy a golpear R aquí mismo y asegurarme que coincida con esta altura. Ahí vamos. Voy a ir por ocho para el radio de la esquina. Y voy a ir por el relleno. Vamos a montar el blanco puro. Ahí vamos. Y por la altura, vamos por 43, por el ancho, vamos con 374. Ahí vamos. Colóquelo aquí en grado, y voy a llamarlo Artículo de Stock B, G. Ahora para el trazo, Vamos a incluir el trazo haga clic aquí mismo. Voy a ir con un color más oscuro, pero en este caso, sólo voy a dejar ver qué podemos hacer aquí mismo. Entonces trazo, color de audición oscuro, tal vez podamos usar este. En realidad cópielo de aquí y péguelo aquí. Ahí vamos. Y sólo lo voy a esconder por ahora porque no lo necesitamos en este momento. Ahora que eso está hecho, lo que puedo hacer es darle a Control y D. Ahí vamos. Y vamos a ver ¿qué más tenemos aquí? Entonces tenemos imagen de auto, imagen de auto para ello. Voy a deshacerme del derrame cerebral porque no lo necesito. Aquí. Voy a usar este gris oscuro o incluso gris claro. No creo que el gris oscuro sea realmente necesario para ello. Lo que podemos hacer es ampliar esto un poco. Entonces para el radio de esquina superior izquierda y superior derecha, vamos a dejarlo a las ocho, pero estos dos, vamos a tenerlo en cero, así. Y veamos por la altura, lo que podemos hacer es configurarlo hasta 250. Esta va a ser nuestra imagen de nuestro auto. Entonces lo siguiente que debemos hacer es incluir los textos de las tarjetas del auto. Entonces, dale a T justo aquí. Una vez más. Y llamemos a esto. Lamborghini horror Kahn. A ver, eso debería ser 24. 24. ¿Esta es buena? Asegúrate de que esté alineado a la izquierda. Lo es. Eso es genial. Veamos para el espaciado oral, lo que necesitamos aquí es 24.24. 24.24, Eso es genial. Pulsa Control D para duplicarlo. Y aquí voy a usar el mismo texto, pero esta vez voy a usar el color principal, que es el azul principal. Y permítanme copiar realmente este precio muy rápido. Ahí tienes, Control D Una vez más. Y entonces aquí vamos a usar texto más pequeño. Así que vamos con regular en realidad. Entonces H30, vamos con el bloque de texto azul principal. Vamos con el párrafo H2 creo, o no, tal vez podamos ir con gris oscuro esta vez. Entonces veamos gris oscuro. Ahí vamos. Esto va a vencer al año. Entonces 2021, golpeó a Shift a y llámalo, veamos años, kilómetros como deuda y luego convertirlo en esta dirección. Eso está bien. A ver, tal vez 24 es la distancia. Nosotros lo vamos a incluir. Ahí vamos. Y aquí lo que voy a hacer es simplemente duplicar este de aquí. Voy a escribir ¿cuántos kilómetros ha pasado el auto? O ¿cuántos kilómetros tiene en el odómetro o como quiera llamarlo? Entonces podemos agrupar estos tres ítems. Entonces el nombre, el precio, y año, kilómetros, así. Voy a llamar a esto por ejemplo auto, autos textos crean auto-layout para ello. Y entonces tal vez podamos saber la distancia. Estos 216. Sí, vamos con 16, algo así. Ahí vamos. Entonces veamos 24, 14, vamos con 24. Y esta vez ahí vamos y tal vez ajustamos esto por la razón que sea que tengamos en esto. Pongan esto a cero así. Pongamos esto a cero así. Y ahora solo tenemos un texto regular sin estos temas. Entonces 16 está en todas partes, 24 está en todas partes. Eso es lo que me gusta. 17 justo aquí en la parte inferior. Esto en realidad debería ser 24. Entonces 241,616.24. Entonces tal vez deberíamos extender esto un poco menos. Cero. Ahí vamos. Entonces ahora estamos 24 en todas partes. Para 50. Bien, entonces ahí vamos. Ahora que eso está terminado, lo que podemos hacer es agrupar esta tarjeta de oro. Bueno, vamos a mantenerlo así. Así que tarjeta de auto. Y vamos a crear un componente y vamos a deshacernos de éste. Y vamos a poner un conjunto de componentes, solo ponlo a este lado. Y aquí lo vamos a expandir como esta variante, que es esta. En realidad es deshacerse de éste. Y agreguemos una variante. Pero realmente no entiendo por qué lo está poniendo aquí. Pero ya no importa. Lo es. Así que vamos a llamarlo hover. Pase el cursor. Ahí vamos. Para el hover, lo único que necesitamos es mostrar esto. Ahí vamos. Eso es más o menos. Entonces ahora en el estado predeterminado, cambiar al prototipo, y conectemos estos dos. Entonces mientras se cierne, va a ir a instancia a esto. Ahí vamos. Y ahora sólo voy a arrastrar rápidamente esto hasta aquí. Cambie al diseño. Ahí vamos. Entonces ahora lo único que básicamente queda aquí es esto. Entonces, ¿cómo puedes realmente arreglar esto es teniendo este mismo borde en esta imagen? Entonces volvamos a la imagen predeterminada del auto estatal. Y voy a un golpe de calor, y voy a tener este mismo golpe así. Ahí vamos. Y lo voy a esconder. Vuelve a aquí, ten el mismo trazo para mostrarlo. Entonces ahí tienes. Básicamente muertes, lo fácil que es y lo súper simple que es crear un layout como este. Pero aquí, lo que en realidad podemos hacer es que tal vez podamos ocultarlo también. ¿Deberíamos buscar en este diseño y lo que hicimos? Entonces aquí tenemos el Relleno y tenemos la frontera. Y la frontera está demostrando que es cero por ciento. Existencias. El ítem B, G, E de ancho está en 374 en imagen actual, ¿es 372? Ahí vamos. Lo siento mucho. Esta imagen en realidad no cumple realmente con ninguna frontera. Entonces, deshagámonos de esa y hagamos lo mismo aquí. Ahí vamos. Lo único que realmente necesita es vencer a 372 así. Y asegúrate de seleccionar estos dos. Deberíamos haberlo puesto en el centro, así, para que tengas un pixel a cada lado. Aquí, 372, allá vamos. Simplemente colóquelo a un píxel al centro. En tal vez incluso deberíamos darle un codazo un píxel hacia abajo. Yo creo. Algo como esto. Pero en mi opinión realmente no importa. Simplemente puedes dejarlo así porque es solo un pequeño detalle. Y va a ser visible solo por una descarga de un segundo. Realmente todo depende de ti. Si quieres, puedes empujarla hacia abajo. Pero por ahora voy a llamarlo un día aquí porque siento lo de mi nariz. Todavía estoy teniendo un poco de resfriado, pero aún así quería seguir adelante y traerles esta actualización para que puedan disfrutar tanto Figma en XD por el listado que realmente deberíamos hacer. Antes de concluir esta sección es simplemente crear este diseño básico para este tablero de arte en particular. Y podemos usar ese aeropuerto en todo momento. Entonces golpeó a F así. Voy a llamarlo, por ejemplo, tamaño de la placa de arte o la configuración de nuestros tableros o digamos nuestra página web de transporte de trabajo portuario. Vamos a llamarlo así. Vamos a ajustarlo para escucharlo. Veamos los ajustes que tenemos aquí son 40, 40 para el ancho. Entonces para ir con 14, 40, ahí vamos por la altura, realmente no importa. Podemos ajustar eso más adelante. Entonces ahora lo que haremos es agregar una cuadrícula de diseño. Entonces simplemente haga clic ahí mismo en lugar de esta cuadrícula, haga clic aquí mismo en columnas, 12 columnas. Veamos el diseño que teníamos aquí mismo. Como se puede ver, es colapso total 38, 65, uno a uno. Entonces intentemos replicar este mismo layout. Entonces veamos, antes que nada, porque el color puede cambiar de uso algún tipo de, no sé, tal vez de color azulado o rojizo, algo así. Podemos ajustar la visibilidad a tal vez 5% solo para que veas lo estoy haciendo y llamarlo un día ahí. Entonces vamos por la cuneta. Por COVID 38. Ahí vas. Y los márgenes en cada lado deben ser uno a uno. Ahí vamos. Entonces ahora tenemos estos dos márgenes, 38 y columna, que deberían ser 65. Así que vamos. Me está enseñando auto, pero puedo ir de cualquier manera. Entonces una vez 213085 muertes completamente bien. Y ahí vamos. Ahora lo que vamos a hacer es solo reutilizar esto cuando comencemos con el diseño y simplemente péguelo hasta aquí. Entonces ahí vamos, solo un par de clics. Nosotros lo configuramos nuestros documentos. Y básicamente se ve exactamente igual, a diferencia de este documento XD que hemos trabajado hasta ahora. Una vez más, si quieres profundizar en todos estos detalles sobre este diseño, asegúrate de revisar la sección x D sobre el pensamiento detrás del diseño, sobre todo el proceso, especialmente sobre wireframes de papel, entrando en la arquitectura de cantidades de investigación, así sucesivamente y así sucesivamente. Pero esto solo se asegura que el proceso de diseño real en Figma y ¿cuál es la diferencia entre fema en XD? En el siguiente video, vamos a abordar el propio diseño de sitios web. Voy a mostrar cómo reutilizar estos componentes que creamos aquí. Entonces te veré ahí. 154. Configuración de página de diseño: En este video, archivemos y comencemos con el diseño. Y te voy a mostrar cómo recrear un diseño que ya hicimos en Adobe XD en Figma. Así que comencemos. Entonces aquí estamos de vuelta en Figma, y aquí es donde lo dejamos la vez anterior. Entonces lo que voy a hacer antes que nada, es esta página web que tenemos. Voy a golpear Control C, ven al diseño del sitio web en sí a esta página, dale Control V para pegarlo dentro. Y lo voy a posicionar aquí mismo. Obviamente, no vamos a usar esto porque ya creamos este diseño en Adobe XD. Pero si estás creando esto por primera vez o si estás compartiendo este documento con tus clientes, los compañeros de trabajo son diseñadores. Es sumamente útil tener algo como esto porque siempre pueden hacer referencia al papel por marco y volver a él para algunos detalles adicionales. Entonces, si te llevo de vuelta al documento Adobe XD, lo que tenemos son 123456 páginas. Entonces comencemos con esto. Así Control D, Control D, Control D, Control D, Control D. Así 123456. Y vamos a darles todos los nombres. Entonces lo primero es lo primero, esta va a ser la página principal. A continuación, tendremos autos. Entonces después de eso habremos seleccionado auto. Entonces, cuando seleccionas una tarjeta de la página del curso, luego vuelve a la tarjeta seleccionada y te voy a guiar a través de todo el proceso en solo un segundo, si acaso no viste los videos de XD. Y te recomiendo encarecidamente que los veas porque como sigo mencionando, no voy a entrar en demasiados detalles aquí mismo. No repetirme demasiado y ser aburrido para la gente que ya está viendo la parte del curso con las lecciones de XD. Entonces esto va a ser préstamos. Y luego a otras páginas tenemos Contáctenos. Y finalmente, esto sólo va a ser una superposición para la caja de luz. Y debido a que la caja de luz va a ser cortada, vas a tener la altura de 1080 pixeles. Ahí vamos. Y esto sólo va a vencer al propio overlay. Entonces déjame guiarte rápidamente a través del archivo XD, así. Y básicamente voy a explicar qué es este sitio web si no viste la parte XD del curso. Entonces aquí tenemos la página principal. Y en la página de inicio básicamente vamos a mostrar toda la oferta de este discurso. Entonces esta solo va a ser una simple página de préstamos. Este sitios web, entonces quiénes son, déjame ocultar estas líneas para que puedas verlo. Estas guías. Entonces quiénes son, qué representan. Entonces estos son concesionarios exclusivos de autos. Entonces básicamente van a vender estos autos de alta gama y no estos autos baratos que puedes encontrar básicamente en cualquier otro piso de taller o cualquier otro concesionario que esté ahí. Entonces, básicamente, estos tipos son un poco diferentes porque están vendiendo estos autos de alta gama. Y por lo tanto queremos representar eso y lo haremos en términos de imaginería. Entonces ya te proporcioné estas imágenes y puedes ver estas imágenes aquí mismo. Básicamente así es como van a verse. Tienes un montón de estas diferentes imágenes que usaremos para nuestro desarrollo Webflow y no para el diseño. Porque para el diseño solo vamos a utilizar una de cada una básicamente para crear estas tarjetas, que ya creamos alguna selección exclusiva en la página de inicio va a mostrar la selección de la esta página web y este distribuidor, lo que ofrecen, lo que tienen en el stock en este momento, lo que ofrecen. Entonces en este caso, garantía extendida , mantenimiento y préstamos. Estas son solo algunas características clave que van a ofrecer a sus clientes, sus beneficios. Te van a dar la entrega gratuita sin importar dónde te encuentres en el país. Pulido en tres etapas. Entonces antes de que entregaran la caricatura, ahí la van a pulir en tres etapas en intercambio parcial. Lo que esto significa es que van a quitarte tu viejo auto y van a deducir ese precio de tu auto viejo, que básicamente van a juzgar a cuántos kilómetros se hace, a qué tipo de etapa en la que se encuentra el auto en este momento no ha sido derrumpido. ¿Hay algún daño en él y así sucesivamente y así sucesivamente. Entonces tenemos la página Contáctenos. Tenemos donde estamos con la página del mapa y tenemos el pie de página. Ahora bien, estas secciones que vas a notar van a repetir mucho. Entonces aquí tenemos el contacto Mapa y Filtrar contacto mapa pliegues o contacto mapa pie de página contenido mapa pie de página. Entonces, por lo tanto, va a ser realmente beneficioso para ti crearlos como componentes una vez que los hayas terminado. Y eso es lo que vamos a hacer. Y básicamente, esta página es, este sitio web en sí va a ser realmente sencillo de crear en Webflow más adelante. Y la razón por la que no voy a usar ese plugin de flujos de trabajo de la herramienta figma que fueron sacados ellos mismos liberados es por esta página en particular. Sí, puedes crear esto en ese complemento, pero va a, tomar muchas rutas diferentes alrededor de rutas diferentes alrededor este diseño para que esto funcione en Webflow. Entonces por esta página en sí, no voy a usar ese plug-in, pero sin embargo, voy a mostrarles que enchufar una de las lecciones posteriores. Solo para que veas cómo crear un sitio web como este en Webflow pauper, esta página en particular. No va a funcionar en Webflow porque vamos a utilizar algunas técnicas diferentes. Así que solo tenlo en mente. Si intentas construir algo usando ese plugin , asegúrate de probarlo primero y ver si funciona. Sí, puedes crear un layout como ese en Figma. De cualquier manera va a ser beneficioso para ti y no tienes que importar todas las páginas. Puedes crear algunas páginas manualmente porque puedes crear algunos componentes en Webflow, puedes crear algunos componentes en Figma va a importar todos esos estilos, opciones de color, fuentes y componentes de figma a Webflow. Entonces puedes usar algunos de esos, pero solo ten en cuenta esa página igual que estas porque requieren un poco de pensamiento adicional fuera de la caja. Y algunos básicamente pirateo de Webflow para que funcionen porque no hay ninguna opción predeterminada en Webflow preconstruida para crear diseños como este. Entonces para estas páginas básicas como esta, como esta, estas dos, va a funcionar bien. Pero tan pronto como te encuentras algo como esto con este diseño, con este diseño pegajoso, con esta superposición. Entonces, cuando los usuarios hagan clic en una de estas imágenes, les va a mostrar estas opciones de caja de luz. Entonces ahí es donde se rompe. Entonces solo quería mostrarte eso y explicarte eso. Por supuesto, las imágenes son de Envato Elements, que ya mencioné en la sección XD. Y tienes la opción de obtener todas estas imágenes si obtienes la suscripción premium de Envato Elements, porque estas imágenes son imágenes premium, si no quieres, entonces puedes usar imágenes gratis. Depende de ti. Pero si quieres usar estas imágenes exactas que estoy usando dentro de mi diseño. Tienes que licenciarlos de elementos Envato, lo contrario no puedes usarlos en tu cartera. Así que asegúrate de revisar esa licencia también. Asegúrate de revisar ese PDF, asegúrate de revisar todas estas imágenes que estoy proporcionando en esta colección en particular. Y como mencioné, todos estos activos son de elementos Envato. Entonces eso va a ser para esta lección en particular. En la siguiente lección, vamos a empezar con la página principal y dejarme extender eso un poco así. Así que simplemente puedes hacer clic aquí mismo. Y como dije, vamos a empezar desde toda la página y comenzar a construir nuestro diseño de página principal. Entonces te veré ahí. 155. Diseño de página principal: Sigamos adelante y comencemos con la página principal. Y lo primero que quiero hacer es dirigirme a mis activos y buscar logo. Justo aquí en la parte superior. Tengo este logo. Voy a arrastrarlo y soltarlo en algún lugar por aquí. Déjame revisar mi diseño original. Creo que lo posiciono a los 20. Entonces lo que puedo hacer es ajustarlo a la parte superior, desplaza dos veces hacia abajo, mantén pulsado mi Alt u opción y ver que estoy a 20 pixeles. Entonces voy a seguir adelante y crear la navegación. Entonces voy a teclear autos así. Y voy a elegir la opción predeterminada para los estilos de texto. Vamos con textblock. Ahí vamos. Déjame comprobarlo. Sí, ahí estamos. Sólo voy a usar este color, así que gris oscuro en este caso. Y déjame alinearlo agradable y fácil con mi logo. Se pueden seleccionar ambos. Puede hacer clic aquí mismo, se asegura de que estén alineados y moverlos tres píxeles hacia abajo. Ahí vamos. Entonces ahora que tenemos autos, lo que puedo hacer es darle a Control G para agruparlo. Y voy a llamar a esto Top Nav y convertirlo en auto-layout en esta dirección. Y veamos por estos dos Ds, puedo hacer algo como 24. Creo que eso va a estar bien. Golpea Control D, Control D para hacer dos copias más. Este va a ser un Lowe's y este de aquí va a ser Contáctanos. Ahí vamos. Ahora que lo he hecho, voy a seleccionarlos a todos. Así que Top Nav y asegúrate de romperlos aquí mismo. Ahora lo primero es lo primero, debemos seguir adelante y crear componentes para cada uno de estos, porque este es un estado predeterminado. Si te lleva de vuelta a XD, si no lo viste, asegúrate de volver a verlo. Entonces tenemos el estado hover y tenemos el estado seleccionado. Entonces, si me acerco un poco más aquí mismo y elijo el estado predeterminado de mi auto es este color gris oscuro, estado de Horace es este color hover, que puedes ver aquí mismo. Y entonces el estado seleccionado es este color azul principal. Esto va a ser seleccionado cuando estés en la página donde estés en este momento para crear estos. Así que volvamos a Figma. Y para hacer algo así, lo que puedo hacer es básicamente seleccionarlos todos, darle a Control C y llevarlos afuera a algún lugar por aquí. Porque quería poder crear estos componentes. Entonces solo voy a seleccionar estos tal como son. Y voy a convertir esto en un componente, convertirlo en un componente y esto, y luego voy a crear dos más así. Y agregar otra variante en una variante, en una variante, Agregar variante y agregar variante. Déjame espaciarlos un poco. Ahora bien, esto es una cosa molesta de Figma, si me preguntas, es porque no puedes hacer eso dentro de tu tablero de arte como puedes dentro de XD. Entonces, en lugar de XD, solo puedes cambiarlos en su lugar. Pero aquí en Figma, puedes hacerlo aquí mismo. Y luego puedes elegir el estado que quieras, pero sigue creando estas variantes. Entonces eso es algo que realmente no me gusta de figma, pero ¿qué puedes hacer? Entonces comencemos. Este es nuestro estado predeterminado. Este va a ser nuestro estado de horror. Entonces solo voy a seleccionar el tipo en hover. Selecciona mi hover, así. Golpeó Control C. Ahí vamos. Y voy a seleccionar esta. Qué variante dos. Entonces voy a pegar en color hover ahí también. Seleccione este basado en hover. Aquí. Ahí vamos. Y este último va a ser seleccionado. Seleccionado. Déjame seleccionar, seleccionar. Déjame hacerlo aquí mismo. Y lo estoy haciendo porque va a ser mucho más sencillo para mí luego organizarlos. Porque lo que viene después es básicamente simplemente cambiar estos colores aquí y allá. Entonces ahora que estamos ahí, seleccionemos todo el estado de terror. Y vamos al color Relleno. Vaya, no el color de relleno, sino que seleccione el texto mismo en lugar de gris oscuro. Pasemos al color de terror, color , color, y luego seleccionemos este en lugar de gris oscuro. Vamos al azul principal. Azul principal, e ir adentro, golpeó azul principal. Ahí vamos. Ahora que eso se ha creado, lo que podemos hacer aquí mismo es que podemos probarlos. Entonces aquí lo que puedo hacer es que en realidad puedo seguir adelante y deshacerme de estos. Entonces déjame ir a mi panel de activos. Y en realidad lo que puedo hacer es seleccionar estos dominios base aquí mismo. Ahí vamos, Control G. Convierte eso en Auto Layout 24. Vaya, eso es 62424. Ahí vamos. Asegúrate de que estamos en el centro de estos dos. Ahí vamos. 24 o 2018, 20. Solo mueve esto y solo estima. Entonces aquí voy a seleccionar eso y puedes ver que tenemos autos, contáctanos y préstamos. Entonces eso es lo que tenemos aquí mismo. Y aquí tenemos el default, tenemos el hover. Nosotros hemos seleccionado, así que voy a seleccionar la predeterminada y esas van a ser nuestras opciones para este componente en particular, puedes desvincular instancia si quieres comprar y si haces algún tipo de cambio a estos componentes principales, estas instancias van a seguir. Así que vamos rápidamente adelante y renombrémoslos a Top Nav. Ahí vamos. Y voy a arrastrar esto hasta aquí. Ahora que ya lo hemos hecho, sigamos adelante y agruparemos esto y cuándo llamarlo nav. Y debajo del nav, lo que vamos a hacer es básicamente incluir esa sección de héroes. Así que crea una sección de héroe. Y voy a seguir adelante y copiarlos muy rápido. Ahí vamos, Control D. Y vamos a tomar esta. Ahí vamos, Control D enseguida. Voy a cambiarlo a esto. Voy a cambiar el color de relleno a gris oscuro. Este va a ser el H1. Ahí vamos. Voy a alinearlos muy bien aquí mismo. Encantadora. Y luego activos. Voy a arrastrar mi botón. Para mi botón, voy a escribir algo como explorar autos. Ahí vamos, Niza. Y entonces tengo que crear ese grupo. Entonces Control G. Déjame cambiar a capas. Estos van a ser nuestros textos de héroe. Ahí vamos. Vamos a convertir eso en auto-layout hacia abajo 32 para ser la distancia. Asegúrate de espaciarlos hacia el lado izquierdo. Ahí vamos, agradable y fácil, ¿estaría ahí? Y una última cosa que necesitamos aquí mismo es crear nuestra sección de héroes. Ahora para hacer eso, voy a traer mi imagen. Entonces tengo mi imagen del Maclaurin. Vamos a colocarlo ahí mismo y luego crear dos círculos. Entonces es un golpe. Bien, aquí se desplaza. Ahí vamos. Control D para duplicarlo, colóquelo aproximadamente alrededor de ahí. Y voy a llamar a este pequeño círculo. Y este va a ser un círculo grande. Ahí vamos y lo posicionamos ahí y ahí. Ahora para el círculo pequeño, lo que vamos a hacer en cuanto a tamaño es, vamos a darle 1054105 solo para que sea exactamente el mismo lago que está en nuestro en nuestro diseño original en XD y este gran círculo, Veamos, tal vez podamos crearlo para que sea 13130. Así. Ahí vamos. Y voy a seleccionar toda la página y sólo esconder este diseño por un segundo. Ahí vamos. Agradable y fácil. Y lo que nos falta aquí mismo es este círculo blanco, creo. Entonces lo primero es lo primero, cambiemos los colores reales. Entonces este círculo PG debería ser, perdón, no esto, pero esto, deberíamos significar azul y este círculo de aquí mismo debería ser gris oscuro. Ahí vamos. Y ahora lo que necesito es crear este círculo de fondo. Volvamos a aquí. Así que el círculo de imagen de héroe es 388 por 388. Entonces, vamos a duplicar este. Círculo de imagen de héroe. A ver, el color va a ser blanco y el tamaño va a ser 388. Por 388. Ahí vamos, algo así y lo posicionamos justo detrás de esta imagen de héroe. Y asegúrate de que estos estén centrados, algo así. Ahí vamos. Asegúrate de que esto esté aquí, esto está aquí. Y creo que eso es genial. Solo para comprobar esto muy rápido porque no mostraba los colores de la carrocería. Entonces, en realidad vamos a escondernos este año, tenemos los círculos de héroes. Todos tenemos que crearlo porque lo exporté del diseño original como imagen. Ahora sigamos adelante y apliquemos ese cambio a todos estos. Así que sólo voy a sostener a Shift. Y para el color de relleno, voy a usar color de cuerpo. Ahí vamos. Entonces ahora lo siguiente que voy a hacer es traer mis columnas de vuelta solo para que podamos ver lo que estamos haciendo. Y aquí voy a introducir algunos íconos. Entonces lo primero es lo primero, vamos a traer aquí el icono de la llave. Voy a darle un codazo, ponerlo en el centro. Ahí vamos, Control G para agruparlo. Y entonces aquí voy a usar ese otro icono para ese tipo de metal como ese para la placa. Asegúrate de que estos dos estén en el centro de control G. Ahí vamos, volvemos a golpear a capas. Y dentro de XD, lo que voy a hacer es nombrarlo así. Y nombre y disgustos. Entonces posiciona esto un poco abajo, posiciona esto así. Y voy a agrupar todo esto y llamarlo héroe IMG. Ahí vamos. Lo que puedo hacer es seleccionar ambos, asegurarme de que estén alineados al centro. A ver, tal vez podamos cogerlos 100 desde la imagen del héroe, desde la navegación superior, lo siento. Entonces ahora que tenemos la imagen, tenemos el texto. Lo que podemos hacer es agrupar estos para llamarlos héroes. Ahí vamos y pasamos a la siguiente sección. Y para la siguiente sección, lo que necesitaremos es justamente esta imagen. Colóquelo en su lugar así, y luego solo use algunas líneas de texto. Entonces lo primero es lo primero, vamos a golpear a D. Organizemos un poco nuestros textos. Entonces hagámoslo una vez más. Ahí vamos. Control D. Y voy a usar otra. Control D. Voy a usar otro. Ahí vamos. Ahora bien, éste debería ser un párrafo, éste debería ser h3. Éste debería ser, vamos a ver. Bloque de texto. Eso está bien. Simplemente diferente color, gris oscuro. Ahí vamos. En cuanto a espaciamiento. Vamos C a D a D a E. Entonces H tres párrafos debería estar en esto. Ahí vamos. En cuanto a espaciamiento, vamos con 24. Entonces lo que puedo hacer es asegurarme de que se queden solos. Deberíamos hacer agruparlos. Quienes somos. Texto, active Disposición automática hacia abajo 24. Ahí vamos. Y solo asegúrate de posicionarlo aquí mismo. Entonces tenemos 12345 líneas, y entonces esta imagen va a alinear esto al centro hit Control G vamos a llamarlo quienes somos. Y la distancia esta 200 de aquí. Entonces algo como esto. Entonces 200. Sigamos adelante y pasemos a la siguiente sección. El siguiente apartado va a ser esa oferta exclusiva. Entonces para hacer eso, vamos a crear un elemento de texto así. Pegar en nuestra selección exclusiva se asegura de que estemos en el centro y asegúrate de elegir h tres. Ahí vamos. Asegúrate de ponerlo en el centro así que va a ser 200 de la sección anterior. Así que sólo dale un codazo aquí mismo. Veamos 200. Encantadora. Lo que vamos a hacer en realidad es traer esas tarjetas que creamos. Para que los podamos encontrar aquí mismo. Ahí vamos. Aquí tenemos la misma tarjeta. Colóquelo ahí mismo. Y lo que vamos a hacer es posicionar aquí es 64. 64, ahí vamos. Y voy al Control D para duplicarlo. Control D lo va a colocar aquí mismo. Y voy a regresar y encontrar mi botón, colocarlo ahí, asegurarme de que esté en el centro. Y asegúrate de que sea la distancia 64 de esta tarjeta de aquí mismo. Ahora bien, este botón debería decir, Ver todos los autos. Una vez más, porque esto es genial sobre Figma y no muy bien de XD. Cuando cambias a flotar, va a cambiar el texto automáticamente. Mientras que en XD hay que cambiarlo manualmente. Entonces déjame rellenar algunos textos. Entonces Cadillac Escalade va a ser esto. El precio va a ser este. Ver, el año va a ser 2020. Así. Y déjame cambiar a mi panel de capas y aquí donde estamos tan años, tarjeta de kilómetros, campo de texto. Esto debería ser un poco diferente porque aquí tenemos 28 de distancia. Cambiemos eso a aquí. No estoy seguro de por qué son 28, deberían ser 24. Entonces por alguna razón se actualiza aquí. Entonces tal vez tenemos que fijar la altura, no la anchura fija. Saber por alguna razón no va a cambiar o Derek arriba así que se cambia cuando un interruptor para arreglar, creo. Sí. Entonces cuando cambio a ancho fijo, ancho fijo aquí, ancho fijo. Entonces cuando cambie la altura a ancho fijo va a cambiar de nuevo a 24. Entonces hagámoslo por todos ellos. Así de altura fija, ahí vamos. Y ancho fijo. No sé por qué sucede eso. Porque cuando sigues adelante y te cambias, todo adentro, XD se acaba de quedar, se queda como le dijiste. Entonces esto va a ser Lucid Air. Este va a ser el precio. Y estos van a ser los kilómetros, y el año va a ser 2022. Ahí vamos. Entonces ahora que esta sección está terminada, lo que necesito hacer es probarla rápidamente. Ver en el hover, ahí vamos. Entonces cambió y recordó, lo cual es encantador al respecto. Entonces lo que voy a hacer es dirigirme a la página de mi curso. Y localizar un capó Lamborghini ocurrido y seleccionar esto. Entonces, para la imagen del auto. Y voy a seguir adelante y convertirlo en relleno. Haz lo mismo aquí mismo. Entonces solo agrega un relleno. Ahí vas. ¿Qué ocurrió? Y voy a posicionar mi imagen encima del relleno. Entonces haz lo mismo para Cadillac escalar. Simplemente localice la imagen número tres. Colóquelo encima de él. Y esto básicamente va a funcionar un poco más lento si la imagen es grande, aunque la haya optimizado, Ese es el problema con Figma. No puedes simplemente arrastrar y soltar imágenes. Al igual que puedes comer Adobe XD, que es lo que realmente molesta de esta herramienta. Entonces cuando lo arrastre, lo va a colocar. Ahí vamos. Entonces Lucid, Air, imagen número tres y simplemente colócala ahí mismo. Ahí vamos. Tenemos nuestras tarjetas. Eso es genial. Así que organicemos esto un poco mejor. Entonces déjame, antes que nada incluir estas tarjetas en un auto de grupo. Tarjetas. Ahí vamos. Gíralo diseño automático. Ahí vamos. Y ahora selecciona todo esto. Y selección exclusiva. Ahí vamos. Y conviértelo en auto layout. Por lo que ahora que se ha completado esta sección, la siguiente sección va a ser la sección Ofertas. Así que sigamos adelante y creemos eso. Entonces lo primero es lo primero, sigamos adelante y en realidad copiemos esto. Entonces nuestra selección exclusiva, continúe y haga clic aquí mismo, donde está, aquí mismo. Ahí vamos y eso dentro del nav. Pero aquí tenemos que organizar esto. Ahí vamos. Y voy a colocar eso para estar a 200 también. Así. Entonces lo que ofrecemos, ahí vamos. Y necesito esa imagen muy rápido para mostrar lo que están ofreciendo posicionar eso aquí mismo. Y veamos, podemos tenerlo a 64 píxeles de este borde. Asegúrate de alinearlo. 64. Ahí vamos. Y ahora sólo tengo que escribir ese texto. Pero antes de hacerlo, quiero arrastrar esos íconos muy rápido. Entonces necesito el ciclo de mantenimiento. Necesito el icono de garantía extendida. Déjame encontrarlo muy rápido. Por alguna razón no se muestra aquí. Bien. Veamos los préstamos. Préstamos. Ahí vamos. Si elegimos garantía, solo voy a usar esta . No importa. Entonces sigamos adelante y llenémoslo de ser azul. O veamos qué podemos hacer. Entonces cuando cambié a Capas, ábrela. Entonces tenemos una parte justo aquí. Parte tiene un relleno en ella. Entonces azul principal, este tiene un relleno en él. Entonces tal vez azul este tiene un relleno en él. Entonces azul principal, ahí vamos. Entonces eso está hecho. Entonces ahora esto debería estar en la parte superior porque queremos mostrar aquí la garantía extendida, entonces esto debería estar abajo y esto también debería estar abajo de eso. Por lo que todos ellos deben estar alineados con éste. Así que sigamos adelante y comencemos. Entonces voy a elegir la herramienta de texto aquí mismo. Al estar extendida la garantía se asegura de que estoy aquí. A ver, 24 tornillos. Entonces eso nos va a llevar a los tres años. Encantadora. Y ahora lo que puedo hacer en realidad es seleccionar esto, duplicarlo, duplicarlo tomates. Ahí vamos. Lo que voy a hacer es asegurarme de que estos dos estén centrados. Estos dos están centrados. Así son estos. Ahí vamos. Básicamente quiero duplicar esto así. Asegúrate de que sea bloque de texto. Asegúrate de colocarlo justo aquí, y asegúrate de usar el color gris oscuro Control D. Control D. Ahí vamos. Ahora, estos dos, voy a seguir adelante y cambiar a mi panel Capas y asegurarme de agruparlos. Voy a agrupar estos, voy a desagrupar a estos dos. Ahí vamos. Entonces, el diseño automático, el diseño automático y el diseño automático van a ser 16. Esto va a ser 16 también, y esto va a ser 16 también. Entonces lo que necesitamos aquí mismo es escribir la palabra mantenimiento. Este último debería decir, uh, cargas. En la última, deberíamos tener este texto. En éste. Deberíamos tener este texto. Entonces esto es básicamente lo que están ofreciendo. Entonces aquí lo que voy a hacer es escribir en Los. Esto va a ser de mantenimiento. Y este primero debería ser 1.2. Esto debería decir garantía. Ahí vamos. Y ahora las distancias entre el texto y el título deberían ser 24. Entonces en realidad, vamos a seleccionar esto, ponerlos en un grupo. Seleccionemos esto, pongamos el grupo amino y este grupo. Entonces este son préstamos, este es mantenimiento. Y finalmente, este es 1.2. Entonces cuando pongo eso en auto layout y uso 24, haz lo mismo para este. Y haz lo mismo por éste. Lo que puedo hacer también es ponerlos en otro diseño automático también si quiero. Entonces así y la distancia entre todos ellos. Entonces llamémoslo algo así como ofrecer texto. Este texto parece un poco pequeño. Debería ser H2, en realidad. Esto también debería ser H2. Entonces vamos a cambiarlo. Ahí vamos. Y esto creo que debería ser H2 también, si no me equivoco. Sí. Entonces, en vez de H tres, vamos a cambiarlo a H12, asegurémonos de que esté alineado. Sí, lo es. Este está en 64, 200 grados, este 48. Entonces lo que puedo hacer es simplemente darle un codazo a 64. Aquí, muévelo a ser 200. Entonces esto debería ser a los 64. Ahí vamos. Y entonces esto debería ser el diseño automático a los 40 y simplemente básicamente colocarlo justo encima, así. O tal vez incluso la puedas poner en el centro, realmente no importa, va a cubrir la deuda de cualquier manera. Entonces lo que ofrecemos de textos, ahí vamos. Así que básicamente voy a seleccionar estos tres hit Control G, Lo que ofrecemos así y aquí puedes poner estos en un layout automático si quieres. No me voy a molestar con ello. Sólo voy a pasar a la siguiente sección. En la siguiente sección se encuentran los beneficios. Entonces en este caso, lo que vamos a hacer es realmente rápido simplemente tomar algunos beneficios. Lugar de imagen sentado aquí mismo. Asegúrate de que estamos en el centro. asegura de que somos 200. Una vez más, desde la imagen de arriba, ahí vamos. Top de deuda. Lo que voy a hacer es básicamente dibujar un rectángulo, así que dale a R y asegúrate de que lo tengamos cubierto así, para que cubra solo todo el ancho de nuestra imagen. Y a esto se le va a llamar fondo de sección de beneficios. Ahí vamos. Ese puede ser este color de relleno. Entonces veamos, tal vez cada tres párrafos e imagen, sólo vamos a bajar la opacidad a tal vez diez por ciento. Entonces vamos con algo como esto para que tengamos esta bonita imagen transparente. Creo que se ve genial. Granizo, Sigamos adelante y organicemos estas secciones una vez más. Entonces veamos qué tenemos. Deberíamos tener un nav en la parte superior. Entonces héroe, eso lo que somos. Que son selección exclusiva. Ahí vamos. Entonces lo que ofrecemos y ahora estos beneficios van a ser útiles. Entonces lo que puedo hacer de inmediato, es solo ponerlos en grupo y llamar a esto beneficios. Ahí vamos. Entonces voy a seleccionar este texto. tipo T son beneficios. Ahí vamos. Bonito. Pon eso en el centro de estos dos así. Y solo asegúrate de que esté justo aquí. Y veamos desde arriba, lo que puedo hacer es tal vez 95 o algo así. Tan agradable, gran distancia así, Control D. Y para éste, usemos H tres. Ahí vamos. Ahora esto va a ser entrega gratuita así. Y lo voy a fusionar aquí. Y veamos para este tal vez podamos usar 16. Entonces para el párrafo y para el color, vamos con el blanco. Entonces esto también debería ser blanco. Esto también debería ser blanco. Entonces en realidad, ¿sabes qué? Tal vez podamos usar ese color de mesa de trabajo aquí. El color del cuerpo. Creo que aquí va a ser una opción mucho mejor. Ahí vamos. Entonces voy a darle a Control D en este o no, vamos, primero coloquemos un ícono. Entonces lo primero es lo primero, veamos, tal vez podamos posicionar a estos dos para que estén a 24 de distancia así. Usemos ese icono. Entonces, antes que nada, vamos a cerrar esto. Y veamos, necesitamos encontrar este icono. Peso, el localizador. Ahí vamos. La distancia entre deuda debería ser una vez más de 24. Entonces veamos dónde estamos en este momento. 20. Entonces somos 24. Entonces, si los selecciono y agrupo a todos, presione Capas. Entrega gratuita. Ahí vamos. Control D o Control D una vez más. Ahí vamos. Entonces ahora lo que voy a hacer es básicamente simplemente darle a R, crear un rectángulo, seleccionar estos dos y asegurarme de colocar esto en el centro. Entonces usa exactamente ese mismo rectángulo. Regresa a aquí, alinéalo, mueve esto, alinéalo a la cuadrícula. Seleccione estos para asegurarse de que estamos en un centro. Deshazte de este rectángulo. Ya no lo necesitamos. Ahora bien, este segundo debería decir pulido de tres etapas. Ahí vamos. Y sólo tiene que copiar y pegar los textos. Porque una vez más, estos no son los beneficios que ya mencionamos. Y este último debería ser un intercambio parcial. Ahí vamos. Por último, el texto en su interior. Ahora en términos de estos, entonces lo que puedo hacer se llama este intercambio parcial. Esto debería ser pulido. Esto es entrega gratuita, está bien. Entonces, lo que necesitamos en esta etapa es que necesitamos reemplazar estos íconos. Entonces voy a seleccionar este icono, volver a mi panel de activos y localizar mi icono polaco. Entonces las chicas lecheras tienen que hacer es básicamente poner eso en, volver a cambiar a capas así. Pulse Eliminar. Asegúrate de que estoy en el centro con este texto. Y voy a seguir adelante y moverlo hacia arriba hasta las 24. Ahí vamos, bonito y grande. Y finalmente esta parte intercambio icono. Entonces veamos, solo tenemos que ubicar el auto con una llave del auto. Ahí vamos. Y solo dale un codazo en su lugar , colóquelo aquí, luego seleccione el original, deshágase de él. Ahí vamos. Así que vuelve al panel Capas y veamos el intercambio de piezas así. Ahora que tenemos esta sección, todo lo que tenemos que hacer es simplemente espaciar estos tres. Así que usa estos tres y coge hacia abajo para que sean 64 de estos beneficios. A ver. 64, ahí vamos. Entonces el pulido debería estar en el centro. Asegurémonos de que esté en el centro. Ahí vamos. Y los beneficios también deberían estar en el centro. Asegúrate de que esté en el centro. Ahí vamos. Por lo que se ha concluido la sesión de beneficios. A continuación, tenemos contacto con nosotros. Tenemos el formulario y tenemos el pie de página. Pero no te voy a aburrir demasiado con esta lección porque ya estamos como 30 min adentro o algo así. Así que paremos aquí mismo y continuemos con la página del héroe. En el siguiente video, vamos a terminar estas tres secciones porque van a repetirse a lo largo de nuestro diseño. Entonces te veré ahí. 156. Diseño de página principal: Sigamos adelante y terminemos esta sección de página principal y el discurso en sí. Entonces voy a teclear T y teclear Contáctenos. Y voy a cambiarlo de bloque de texto a H12. Asegúrate de que esté en el centro y en el centro alineado así. Y asegúrate de que son 200 de aquí, así. Y entonces lo que voy a hacer es duplicar éste también. Y voy a seleccionarlo para que sea textblock, así. Y veamos, puedo posicionarlo puede ser 64 de aquí. A ver. Así. Y voy a usar este color gris oscuro. Ahí vamos. No estoy muy seguro de por qué está heredando estos, pero no importa. Entonces usemos este color gris oscuro y voy a escribir aquí en nombre completo. Y me voy a alinear a la izquierda así. Entonces estamos a los 64, Eso es genial. Y voy a darle a Control y D Una vez más para duplicar eso. Y voy a usar textos de párrafo aquí mismo. Y me voy a asegurar de cambiar esto a, veamos, párrafo H tres. Y voy a decir algo como Ingresa tu nombre completo. Ahí vamos. Y ahora voy a seguir adelante y crear el campo de entrada para esto. Entonces veamos, usemos un rectángulo y arrastremos uno de borde a borde, así. Ahora para la distancia, esto está bien y vamos por la altura de 60. Haga clic con el botón derecho y podrá ver, así que vaya a la página, Enviar al Atrás. Puedes usar la barra diagonal inversa si quieres, y asegúrate de colocarla en el centro mismo. Ahora bien, en cuanto al color, este va a tener el color blanco en cuanto al nombre, va a ser campo de entrada. Y ahora por la distancia entre estos, voy a mover este 16. Entonces cuando llamo a mi tecla Alt, se puede ver que hay 16 de la página izquierda y 17 de arriba y abajo. Entonces ahora sigamos adelante y agruparemos a estos dos. Y voy a llamar así a esta entrada. Y voy a agrupar a estos dos de control G. Y voy a llamar así a este nombre. Veamos Para las distancias, tal vez podamos usar auto layout y 16, así. Ahí vamos. Así que ahora pulsa Control D para duplicar esto, y voy a mover esto para que esté en 32. Entonces vamos a ver. 32. Ahí vamos. Ahora bien, este segundo debería ser correo electrónico. Y el campo de entrada en sí debería ser más corto, por lo que debería tener seis columnas de ancho. Entonces 123456. Y alineemos esto a la columna. Ahí vamos. Bonito agrandar. Entonces ese va a ser correo electrónico. Así que escribe el correo electrónico. Y en lugar de ingresar tu nombre completo, va a decir ingresa tu correo electrónico así. Ahora lo que podemos hacer aquí es poner esto en un grupo y llamarlo medio si quieres. Pero no voy a hacerlo, solo voy a darle al Control D para duplicarlo, colocarlo aquí mismo, y alinearlo a la página. No estoy muy segura de por qué. Me está enseñando esto por cualquier razón. Pero estamos bien para irnos, creo que aquí. Así que vamos a comprobarlo. Por alguna razón. No se pega a la grilla. Entonces el ancho es cinco AT, así que asegúrate de que esto sea cinco AD también. Ahí vamos. Entonces ahora va a encajarse a la rejilla perfectamente en ambos lados. Entonces éste no va a ser enviado por correo electrónico. Este va a ser divertido. Voy a escribir el teléfono. Ingresa tu número de teléfono. Genial. Y ahora vamos a duplicar éste y posicionarlo aquí. 32. Esto va a ser correo electrónico o mensaje. Y esto va a decir algo como escribir tu mensaje. Aquí. Ahí vamos. Y ahora vamos a cambiar el nombre de esto a mensaje y asegurémonos de posicionarlo hasta aquí. Y este campo vamos a alargar un poco. Entonces va a ser 171 de altura así, solo para que podamos darle un poco más de espacio a nuestros usuarios para que puedan incluir cualquier tipo de mensaje que tengan. Sutura a los activos, usa nuestro botón principal. Y aquí vamos a tener esa misma distancia de 30 para asegurarnos de que dejamos alinearlo y hacer doble clic dentro y escribir enviar mensaje. Ahí vamos. Y vuelve a la posición del panel de capas aquí y asegúrate de que ****** nos contacte aquí. Voy a agrupar estos, llamarlos insumos. Y voy a agrupar todo esto, posicionarlo abajo, ser contactado con nosotros. Y aquí está la parte crucial. Si te muestro esto, comunícate con nosotros. Voy a seleccionar todo este campo y convertirlo en un componente. Ahora bien, esto me va a permitir copiarlo y pegarlo en todas estas otras secciones que ya les mostré anteriormente. Así que sigamos adelante y creamos el siguiente. Así que asegúrate de que somos 200. Sí, lo estamos. Entonces donde estamos va a ser nuestra siguiente sección. Así que vamos rápido y arrastremos en un mapa como este, nos aseguramos de que estemos aquí, nos aseguramos de que estamos a 200 de este. Así, ahí vamos. Entonces ahora lo que vamos a hacer aquí es que usaremos ese mismo H12. Entonces donde estamos. Y voy a usar este como H12. Ahí vamos. Alinear a la izquierda. Se asegura de que aquí sean dos cuadrículas. Ahora bien, esto es bloque de texto. Usaremos gris oscuro. Usa este, asegúrate de que esté alineado a la izquierda , colóquelo ahí. ver, vamos a estar 24 desde este filo. A ver. 24. Encantadora. Entonces este va a ser título. Y asegúrate de darle un codazo hasta aquí. Colóquelo a la cima, solo así ¿tenemos suficiente espacio? Ahora, vamos a necesitar algunos íconos aquí. Entonces, el primer icono que necesitaremos es arrastremos en un teléfono. Arrastremos un reloj, éste, y pintemos un localizador. Entonces esta va a ir a la cima. Este va a ir al fondo. Este estará en el centro. Ahí vamos. Entonces ahora presiona D escribe en dirección y convierte esto del bloque de texto en un párrafo. Y asegúrate de agruparlos para asegurarte de posicionarlos por igual. Y esto ahí vamos. Ahora de aquí para aquí deberían ser 16, creo. Sí. Pero antes de hacer eso, asegurémonos de pegar esto aquí mismo. Y quiero organizar primero mi contenido para que luego pueda avanzar un poco más allá. Así. Ahí vamos. Entonces esto debería decir número de teléfono. Y déjame pegar el número de teléfono. Este va a ser el horario de apertura. Estos son los horarios de apertura. Ahí vamos. Entonces lo primero es lo primero, asegurémonos de que estos estén centrados, ponerlos en un grupo, asegurarnos de que el diseño de diseño automático se asegure de que sea a los 16. Estos dos están en un grupo. En primer lugar, los alineó, los puso en un grupo, usa el diseño automático 16. Estos dos deben estar alineados en un grupo o a maquetación y 16. Y estos otros también pueden ser 16. Para que puedas agrupar estos auto-layout 16. Entonces puedes asegurarte de que estos estén alineados a la izquierda en un grupo de auto-layout 16. Y estos se dejan alineados en un grupo de auto-layout 16. Ahora, todo lo que tenemos que hacer es volver a nuestro panel Capas porque solo tenemos marcos, así que horas. Ahora bien, esto puede ser un teléfono y este primero puede ser abordado. Ahí vamos. Ahora, podemos poner todos estos en un grupo y asegurarnos de llamarlo por ejemplo contenido. Pon eso en el diseño automático de 24. Ahí vamos. Y ahora todo lo que tenemos que hacer es distanciarnos esto de aquí. Entonces déjame ver lo que hice en el diseño original. Entonces sí, tal vez podamos ponerlo a los 32. 32, ahí vamos. Selecciona todo nuestro contenido, llévelo al centro de nuestro mapa, asegúrate de que esté alineado a la izquierda. Lo es. Y veamos, solo agrupa todo. Asegúrate de que somos 200. Estamos posicionados todo el camino hacia abajo. Y a esta sección vamos a llamar donde estamos. Así. Convierte eso en un componente. Ahora bien, un componente final que necesitamos incluir aquí mismo es el propio pie de página. Entonces, lo que voy a hacer para esta etapa en particular es simplemente usar mi navegación, duplicarla, centrarla y moverla hasta el fondo. Asegúrate de que estoy más o menos por aquí y allá vamos. Entonces me voy a encabezar y desagrupar esto. Así. Y asegurémonos el subidón yo mismo para dispersión solo para que lo veas un poco mejor. Entonces voy a usar este logo, asegurarme de que esté en el centro. Y básicamente voy a usar mi herramienta de texto y pegar en ese texto que originalmente estaba ahí. Y veamos, podemos usar el estilo de texto para ello de párrafo. Ahí vamos, y asegúrate encajarlo al centro de nuestra página. La jabalina 64 de estos así. Y el logo debería ser 64 de estos también. Así. Ahora una última cosa que tenemos que hacer es traer esos íconos de las redes sociales. Entonces tenemos Twitter, tenemos YouTube. Localicemos instagram, perdón, LinkedIn y Facebook. Entonces déjame organizarlos un poco mejor. Entonces primero, Facebook que Twitter, que YouTube, y luego enlazados, asegúrate de que todos estén alineados al centro. Y veamos qué tenemos. A lo mejor podemos ponerlos en grupo. Activar Auto Layout 24 está bien. Vuelve al panel Capas, y voy a llamar a este grupo o este marco iconos sociales. Ahí vamos. Y ahora lo que voy a hacer es simplemente alinearlos al centro con este texto aquí mismo. Solo asegúrate y vuelve a verificar. Ahí vamos. Entonces voy a seleccionar todo este hit Control G, poner todo esto ahí atrás, llamarlo pie de página, así, y asegurarme de que soy 200 de aquí. Ahí vamos. Y una última cosa que quiero hacer es mover esto y cortarlo un poco. Así que básicamente estoy 64 de este borde inferior en particular. Entonces solo tres pixeles más mañana. Entonces altura, veamos, tenemos que sumar dos más. Veamos el original, qué dice, 5775. Por alguna razón lo extendimos solo un toque, pero sí importa. Agreguemos dos más. Agreguemos uno más. Entonces 5796. A ver. Ahí vamos. Entonces esta es nuestra página de inicio terminada. Sigamos adelante y ocultemos esto muy rápido. Sigamos adelante y previsualizarlo porque quería mostrarles algo porque tenemos algunos problemas aquí mismo de inmediato. Entonces tendremos que arreglar esos problemas. Entonces estamos mientras se carga aquí, no tenemos eso. Así que vamos a abrirlo en pantalla completa. Vamos a esconder esto. No tenemos este efecto hover. Entonces tendremos que cambiar eso. Conectado aquí. Cuando vuelo el cursor, se puede ver que las imágenes desaparecen. Por lo que tendremos que seguir adelante en hover para cada uno de estos y agregar imágenes adicionales. Una vez más, todo funciona bien aquí, se ve genial aquí. Todo funciona muy bien aquí como debería. Entonces sigamos adelante y agreguemos eso. Lo primero es lo primero, sigamos adelante y conectemos estos. Entonces, antes que nada, cambia al prototipo y dale la vuelta a esto aquí. Estos dos aquí, estos dos aquí. Mientras se cierne. Esto debería ser mientras se cierne. Esto debería ser mientras se cierne. Y cuando hago clic en el hover en sí, onclick cambiar a propiedad uno. Ahí vamos. Onclick. Y finalmente en click. Eso es genial. Entonces ahora que funciona, podemos volver a cambiar nuestra atención a estos. Así que volvamos a nuestro diseño. Cambiemos para pasar el cursor. Haga clic aquí, cambie a cómo, o haga clic aquí, cambie a flotar. Entonces lo primero es lo primero, necesitamos, adelante y agreguemos primero un Lucid Air, porque ya lo tengo abierto aquí. Entonces sigue adelante y agrega escalado. Ahí vamos. Y agrega Oticon muy rápido. Ahí vamos. Entonces ahora tenemos que seleccionar éste, llevarlo al valor por defecto, llevar esto a default, llevar esto a default. Ahí vamos. Entonces ahora que todo esto se ha completado, nuestra página básicamente está hecha. Y en la siguiente sección vamos a pasar a diseñar esta sección del curso, que básicamente va a contener montón de estos va a tener múltiples secciones aquí. Por lo que tendremos que extenderlo un poco, y también vamos a duplicar algunas de estas secciones. Añadiremos contenido adicional. Vamos a añadir cada vez más y copiaremos algunas de estas secciones y algunas páginas como esta Contáctenos va a ser sumamente sencillo de diseñar porque como mencioné, ya tenemos la mayoría de estas secciones hechas. Entonces te veré en el siguiente video donde vamos a atacar la página de autos, y te veré ahí. 157. Diseño de páginas de coches: Ahora sigamos adelante y diseñemos la página de este auto. Entonces lo que voy a hacer en realidad es volver a nuestra página de inicio porque me olvidé convertir esto en un componente. Entonces ahora cuando me cambié a aquí, volver a mis activos e ir a aspirar a como sus activos de sitio web. Entonces lo que tengo aquí mismo está en mi página principal, tengo todos estos. Entonces nav, voy a arrastrarlo y soltarlo, colocarlo aquí, colocarlo aquí, y luego colocarlo a 20. Lo que también puedo hacer es hacer lo mismo por cada uno de estos. Porque básicamente lo que vamos a tener está en la misma maquetación en cada página. Entonces, ¿por qué no ahorrar tiempo adicional directamente aquí? Veamos, Contáctenos va a ser nuestra última posición aquí y luego aquí. Ahí vamos. Y también lo que todas estas páginas van a tener básicamente son todas estas acciones con formulario de contacto, mapa y pie de página. Entonces sigamos adelante y hagamos eso. Y déjame comprobar si creé el pie de página, no lo hice. Así que vamos a convertir eso en componente también. Entonces lo primero es lo primero, sigamos adelante y realmente arrastremos ese pie de página m a esta página, a esta página, a esta página, y a esta página. Asegúrate de que esté alineado a la izquierda. Y simplemente colóquelo a 40 píxeles de la parte inferior porque obviamente lo vamos a ajustar un poco más tarde vez que sigamos adelante y realmente agregamos el contenido en. Entonces voy a empujar a toda esta sección hacia abajo porque justo encima de ella. Voy a agregar mi mapa, asegurarme de que esté centrado, y asegurarme de que esté a 200 píxeles de aquí. Y formulario de contacto centrado. Y de hecho voy a agregarlo 200 pixeles de aquí. Entonces la misma historia aquí. Voy a posicionar a estos dos en el centro. Y esto va a ser a 200 píxeles, y esto va a ser a 200 píxeles también. Entonces haz la misma historia aquí mismo. Entonces tendremos el mapa tendremos el formulario de contacto. Tendremos el mapa tendrá el formulario de contacto, centro, centro. Y veamos 222200200 centro centro. Para que veas cuanto tiempo estamos ahorrando para después. Y esto sólo va a reducir mucho nuestro clon de fruta. Por eso estos componentes son tan útiles. Entonces para la sección de coro en sí, lo que voy a hacer es básicamente duplicar esta sección y arrastrarla hasta aquí. Veamos capas. Cuando hago clic por aquí, selección exclusiva. Aquí tenemos selección exclusiva. Asegúrate de chasquearlo en el centro. Lo que voy a hacer aquí mismo para arriba se usa este texto aquí mismo. Y sólo voy a hacerlo centro, centro aquí. Y voy a escribir en el texto que tu socio para autos exclusivos. Y veamos, puedo hacer este texto 40. Vamos a ver que algo no está bien aquí. Ahí vamos. Ahora es agradable y centrado. Entonces desde este filo, voy a ir al turno 1234. Asegúrate de empujarlo 40 píxeles hacia abajo. Ahí vamos. Y voy a crear ese círculo que va a ir en segundo plano. Así que golpeó 0. Así de inmediato, usa el color azul principal. Y para las tallas, voy a ir con 300 por 300. Ahí va, asegúrate de que esté centrado. Y desde este borde, lo que voy a hacer es básicamente alinearlo al centro de mis textos y a su borde inferior. Y aquí, déjame seguir adelante y agregar la imagen del auto, que voy a usar, colocarlo en el centro y darle un codazo aquí solo para que no veamos el círculo real en el fondo. Entonces lo que voy a hacer es mover esa sección de selección exclusiva y asegurarme de que esté a 100 píxeles de aquí. Así. Y voy a seguir adelante y deshacerme de C, todos los autos abajo así. Y aquí lo que tenemos, si recuerdas, es que tenemos estas tarjetas de autos. Entonces voy a quitar el diseño automático en este caso porque voy a duplicar estos y los voy a rechazar. Entonces tarjetas de autos, ahora voy a girar el diseño automático. Así que volvamos una vez más porque tenemos este grupo con tres tarjetas dentro, así, así que 12.3 y no tenemos auto layout en él. Lo que voy a hacer es poner a este grupo en otro grupo por eso. Y ahora gira el trazado automático en esta dirección y la distancia entre estos autos debería ser de 32. Así. Y ahora todo lo que necesitas hacer es golpear Control D, control D para tener dos copias más. Ahora bien, esta va a ser una selección exclusiva. Y todo lo que tenemos que hacer ahora es seguir adelante y rellenar esta aburrida información. Pero antes que lo hagamos, quiero. Básicamente codazos a estos para que estén en su lugar. C15, 6200. Ahí vamos. Y ahora solo 64 de abajo justo aquí. Así que sigamos adelante y hagamos eso muy rápido. Entonces tenemos todo en su lugar. Veamos dónde estamos. 59, así que solo un poco más. Ahí vamos. Entonces ahora que eso está hecho, sigamos adelante y centrémonos en estos autos porque esta página está más o menos hecha. Entonces lo que tengo aquí mismo es el Tesla Model X. Así que voy a seguir adelante y enfocarme primero en el contenido en sí. Y el año del automóvil es 2020. En realidad 2021. ¿Por qué no? Dejémoslo así. Entonces ese es el Tesla Model, X nought S, perdón. Entonces el siguiente después de eso va a ser un Porsche Cayenne. El precio va a estar en este año, va a ser 2021. Y kilómetros. Entonces 18,000.692. Ahí vamos. El siguiente va a ser McLaren. Entonces, una vez más, solo concéntrate en autos exclusivos. De eso se trata este concesionario. Puedes usar cualquier tipo de auto si quieres. Si no quieres tener estas imágenes de Envato Elements, si no quieres licenciarlas, quieres usar tus propias imágenes. Por supuesto, solo puedes asegurarte seguir algunas de las reglas que mencionamos en este curso en términos de consistencia y diseño y espaciado y ritmo y ritmo y cosas así. Sólo para tener básicamente el mismo diseño que hicimos aquí mismo. Entonces 56, veamos, 24, seguimos ahí. Eso está bien. Y este es el auto más antiguo de esta colección. Entonces tal vez alguien lo dio como intercambio parcial. Por último, usemos esto una revocación de Range Rover. Ver 90 kilómetros y el año es 2021. Ahora, porque no tengo esto, voy a deshacerme de él y eliminarlo. Entonces básicamente estos son todos nuestros autos. Lo que voy a hacer en esta etapa es seguir adelante y cerrar algunos de estos porque no necesito que se abran tanto. En realidad. Sigamos adelante y cerrémoslos así. Ahí vamos. Entonces lo que voy a hacer en este punto es ubicar mis imágenes. Entonces vamos a ver tesla número tres y cambiarlo. Ahí vamos. Este va a ser Porsche Cayenne. Este va a ser McLaren. Esto va a ser un Cadillac CTS, perdón. Y finalmente, esto va a ser un Range Rover evocar. Una última pieza del rompecabezas. Sólo recuerda lo que hicimos anteriormente. Puedes cerrar todos estos porque todos estos tres están hechos si recuerdas desde la página de inicio. Entonces lo que vamos a hacer ahora es seleccionar éste, convertirlo en un hover. Selecciona esta, conviértela en hover. Esto para flotar. Entonces esto debería estar flotando, esta aplicación le gusta, debería estar flotando. Ahí vamos. Así que ahora déjame seguir adelante y seleccionarlos a todos una vez más. Así que vamos de atrás. Entonces este es un Range Rover, ciérrelo y conviértelo en default. Cts, solo tenemos el impulso de chasquear la imagen en el centro del campo porque puedo hacerlo en XD. Así que solo espero que el equipo vaya a agregar eso en el futuro ahora que ambos forman parte del mismo equipo porque solo tiene más sentido sacarlo aquí en lugar de aquí a este pequeño campo, así que simplemente no tiene sentido. Entonces McLaren en realidad debería ser esta imagen. Ahí vamos. Bonito y suelto. Entonces por defecto, esto debería ser empujado coreano. Entonces localicemos ese número tres. Ahí vamos. Arrastre y suelte y vuelva a cambiar esto al estado predeterminado. Y el último es el Teslas. Entonces localicemos el Tesla número tres. Ahí vamos. Por lo que ahora se han completado todos ellos. Se puede ver que estamos a solo 10 min en. Esta página ya se completó. Y sigamos adelante y probémoslo muy rápido. Porque sí, Una cosa que olvidé mencionar está aquí porque estamos en la página del curso. Voy a seguir adelante y seleccionar este y convertirlo en un campo seleccionado. Entonces ahora puedes ver allá arriba que dice autos y que está seleccionado. Y cómo nuestros efectos siguen funcionando, Contáctenos, sigue funcionando. Y voy a averiguar cómo deshacerme de este bar solo para que no nos moleste. Entonces aquí, creo que sí, creo que a lo mejor no se cargó o algo así porque viste que lo cambiamos y reemplazamos a todos ellos. Entonces tal vez tendré que saltar y hacerlas todas una vez más. Lo que cada instancia particular. Entonces lo haré fuera de cámara solo para asegurarme de que funcione. Pero todo esto funciona. Esto sigue aquí. Todo esto está aquí. Autos está seleccionado y Diego página adicional ha sido completada. Un paso más, ya está hecho. Entonces tal vez porque V pega esto primero. Sí, se puede ver cuando cambié el valor por defecto en hover, funciona aquí. Sí, no, tampoco funciona en una página de inicio. Entonces tal vez debería configurarlo aquí y luego volver contigo solo para decirte y hacerte saber cuál fue la solución. Pero por ahora, la página de autos está hecha. En el siguiente video, vamos a pasar a la tarjeta seleccionada, que es la parte más difícil de todo este diseño. Entonces te veré ahí y voy a mostrarte cómo configurarlo también. 158. Diseño de página de coches: Sigamos donde lo dejamos en la lección anterior. Y antes que lo hagamos, solo quiero mostrar cómo arreglé las tarjetas de este auto. Entonces básicamente lo que hice es recrearlos desde cero. Y todo lo que hice aquí mismo es simplemente crear el nombre para ello para que el nombre del titular actual pueda escalar lúcido. Y vas a llegar a ver esto si descargas este archivo y lo abres en la Figma por ti mismo. Y todo lo que hice fue crear otra instancia de ello. Entonces se puede ver que aquí tengo el hover y aquí tengo el predeterminado. Así que básicamente acabo de crear esto y agregar una variante. Variante es el hover para cada una de estas tarjetas. Dentro de la variante hover para cada una de estas cartas, todo lo que hice fue seleccionar este fondo y mostrar este color de trazo. Eso es básicamente porque cada cosa que intenté simplemente fracasó por aquí mismo. Así que ahora cuando previsualizo la página de inicio, por ejemplo y todo lo que quiero mostrarte aquí es solo para que veas que realmente funciona ahora porque estos son los componentes reales de la página real. Entonces, cuando flojo, el único cambio que estaba ocurriendo es simplemente mostrar este contorno fuera del color de fondo aquí. Entonces eso es prácticamente todo. Y ahora podemos pasar a la página siguiente. En todo este proceso, hice lo mismo por aquí mismo como mencioné. Y aquí todo lo que quiero hacer es crear la página de tarjeta seleccionada. Ahora va a tener el selector de imagen aquí mismo para la caja de luz. Y vamos a animarlo un poco más tarde. Va a tener la información a continuación y ahí voy a acortar un poco. Pero antes de pasar a todo eso, lo que quería mostrarles es el intercambio de instancias en Figma. Entonces cuando selecciono esto, puedes ver que creé selección exclusiva entonces rho 12.3. Y ahora cuando selecciono éste, por ejemplo y quiero cambiarlo. Se puede ver que he arreglado aquí mismo, que es el Range Rover. Cuando haga clic, me va a mostrar diferentes instancias. Esta es una opción mucho mejor que XD, tengo que admitir porque simplemente mucho más rápido para reemplazarlos de esta manera. Después para localizarlo aquí mismo, haga clic en arrastrar y colocar encima de él para intercambiar instancias. Así que simplemente puede hacer clic para cambiarlo a Porsche, por ejemplo y luego cambiarlo de nuevo a Range Rover. Método mucho más rápido, sobre todo si tienes miles de estos iconos diferentes y así sucesivamente. Entonces para la tarjeta seleccionada, lo que quiero hacer, y como dije, solo sigo adelante y creé esto. Así que voy a traer esto muy rápido a algún lugar por aquí solo para que podamos ahorrarnos un poco de tiempo aquí tengo esta especificación del vehículo. Entonces, sigamos adelante y comencemos con las imágenes. Entonces lo que quiero hacer es usar mi herramienta de rectángulo aquí mismo. Entonces R y crea la imagen aquí mismo, ocho columnas de ancho. Entonces 786 es el ancho y la altura es 437. Ahí vamos. Entonces esta va a ser imagen1, así. Y luego debajo de eso tendremos algunas imágenes de autos. Así que sigamos adelante y creémoslos muy rápidamente con una distancia de 24. Incluso puedo duplicar este. Posicionarlo para ser 24. Así. Y voy a simplemente encogerlo así. Y debería ser 93 de alto y 168 de ancho. Así que vamos a comprobar si estamos ahí. Ahí vamos. Entonces, ¿qué es el 68, 93? Ahí vamos. Y puedo llamar a esta imagen número dos y básicamente ponerla en un grupo de imágenes separadas. E incluso puedo convertir en el diseño automático y duplicar este. Así que solo selecciónala. Y veamos, la distancia puede ser 38 e.g y por la razón que sea, sí, solo porque se coloca eso en una sola imagen. Entonces, en realidad, vamos, antes de hacer eso, vamos a duplicarlo a la manera de la vieja escuela, así y así. Así que vamos a crear una copia separada. Entonces esto va a ser dos, esto va a ser tres. Y es muy importante nombrar tus capas, sobre todo aquí porque cuando llegas a Figma, realmente quieres que las cosas funcionen. Entonces este va a ser un pincel número cuatro y esto va a ser fotografiado el número cinco. Entonces ahora puedo agruparlos, llamarlos imágenes. Ahí vamos. Y 24 es la distancia, que está bien. Ahora lo que voy a hacer también es crear un poco esta etiqueta alt un poco aquí mismo. Entonces una vez más, le voy a dar un color blanco. Ahí vamos. Y veamos. Esto va a ser 145, ancho 50. Ahí vamos. Y le voy a nombrar todas las imágenes, BG, Veamos, las distancias pueden ser, veamos qué hacíamos anteriormente. Entonces 24, 24 en cada lado. Entonces hagámoslo. Así 24, 24 niños D Ver. Todas las imágenes se centran y asegúrate de posicionarlo aquí. Este es un tamaño de párrafo, por cierto, Control G para poner los grupos delgados, ver todas las imágenes. Ahí vamos. Y ahora lo que puedo hacer en esta etapa es simplemente traer mis imágenes. Entonces voy a localizar mi Range Rover. Entonces lo primero es lo primero, esta primera sólo va a ser la imagen número uno. Esto va a ser imaginado número dos. Esto va a ser fotografiado número tres, hemorragia número cuatro, y finalmente imagen número cinco. Ahí vamos. Y arreglaremos esto más adelante cuando creamos ese efecto Lightbox. Pero por ahora, creo que estamos bien para ir aquí y creo que simplemente lo dejaremos como está. Entonces aquí lo que vamos a hacer es simplemente alinear esto a la navegación. Es 40, tráelo en píxeles. Y ahí vamos. Ahora estamos 40 arriba desde arriba. Entonces aquí lo que voy a hacer es simplemente darle a R Una vez más y crear un rectángulo que tiene cuatro columnas de ancho. Ahí vamos, así. Y para éste, veamos qué podemos hacer. A lo mejor podemos traer un poco de radio de maíz a la mezcla. Sí, así que para el radio de la esquina, vamos con ocho. Para el color de fondo, vamos con el blanco. Y por la altura, vamos con uno-veinte. Esta es la sección que en realidad va a escalar hacia arriba y hacia abajo. Entonces en realidad, vamos con cuatro a 53, algo así es un bonito agrandar. Entonces lo que voy a hacer es llamar a este carro sidebar background. Ahí vamos. Aquí, voy a empezar a crear estas son etiquetas. Entonces, lo primero es lo primero, comencemos con el ícono , localicemos los activos y localicemos ese ícono de SUV, que es este. Arrastrarlo dentro del calor son algo así. Hit D SUV. Ahora bien, esto debería ir de la izquierda y en realidad debería etiquetarse como textos así. Ahora bien, esto debería ser de 33 de altura. Debe ser el color del cuerpo, y debe ser para el radio de la esquina. Ahí vamos. Vuelve a nuestro panel Capas y lo voy a posicionar aquí mismo. Así etiquetar BG. Ahí vamos. Veamos para el distanciamiento, lo que puedo hacer tal vez es usar 16. En primer lugar, coloquemos esto en el centro. Todo esto así. Y veamos esto. Podemos traerlo 16, así. Y el texto en sí se asegura de que esté centrado. Lo es. Eso puede ser a las ocho. Quizá. Ahí vamos. Entonces lo que puedo hacer es poner esto en un grupo llamado el tipo cicatriz así. Y asegúrate de activar el diseño automático con ocho y luego etiquetado como fondo. Lo que puedo hacer es tal vez poner 16 en cada lado. A ver. Tráelo de vuelta a aquí. Dos píxeles, por lo que debería ser 88. Ahí vamos. Vamos a comprobarlo una vez más. Entonces 6.7. Ahí vamos. Entonces ahora que eso está hecho, solo agruparé esto y lo llamaré etiqueta. Y voy a simplemente colocarlo desde el borde superior e inferior para estar, perdón, desde el borde superior e izquierdo para ser 24. Ahí vamos. Entonces ahora que eso está hecho, esto es blanco. Este es el color más nítido básicamente, lo que va a destacar sobre el fondo blanco. Entonces, lo que vamos a hacer a continuación es básicamente sólo traer nuestro título aquí. Entonces escribe Range Rover, esto va a ser RH tres. Ahí vamos. Y la distancia aquí debería ser de 24. Control D Una vez más. Convierte esto en un color azul porque este va a ser el precio. Ahí vamos. Control D una vez más. Y ante esto, me voy a convertir en un bloque de texto, o incluso mejor en párrafo. Cada párrafo, y voy a convertir esto en un párrafo. Va a estar, por ejemplo, disponible para su recogida ahora. Y la distancia para eso va a ser 24 también. 24 aquí, 24 aquí. Entonces todas las distancias son consistentes y esto va a ser muy fácil de desarrollar más adelante en Webflow. Entonces lo que voy a hacer en esta etapa es traer esos botones. Entonces este va a ser nuestro primer botón, 24. Ahí vamos. Y la distancia aquí debería ser de 24, así que está bien. Y ahora voy a traer ese segundo botón que creamos, que es éste. Colóquelo aquí. Así que se asegura de que estamos 24 aquí mismo. 24. Y veamos, debemos estrechar esto hasta que estemos a las 24. Por lo que la altura debe ser 448. Ahí vamos. Entonces eso es todo. Ahora bien, en términos de este botón, debería ser, veamos, 73 es la altura, tres a seis es el ancho. Esto debería ser en realidad de tres a seis también. Pero antes de que cambie eso, déjeme cambiar eso para reservar. Este auto. Vamos. Ahí vamos. Volvamos a cambiarlo a flotar. Funciona. Eso es genial. Esto para flotar funciona, eso es genial. Y esto debería decir C solo opciones. Ahí vamos. Ahora se han completado estos botones. Toda la información ha sido incluida en su interior. Vamos a seguir adelante y seleccionarlo Control G y llamarlo barra lateral del coche. Ahí vamos. Y esta barra lateral en Webflow va a seguir nuestro contenido a medida que nos desplazamos hacia abajo. Entonces básicamente, eso es lo que vamos a incluir ahí. Entonces, a continuación, tratemos con la visión general que vendrá aquí mismo. Entonces, antes que nada, usemos un rectángulo. Así que pegamos a nuestra posición es de ocho columnas de ancho. Y usemos, veamos, ocho para el radio de la esquina. Asegúrate de que esto sea blanco, así destaca sobre este fondo y asegúrate de posicionarlo 24 una vez más, a partir de aquí, esto va a ser resumen de fondo o Oreo BG hit T y tecleando resumen. Ahí vamos. Asegúrate de que esté alineado a la izquierda, ahí mismo. Y vamos a ir con H tres en esta ocasión. Entonces 24 una vez más, vamos a comprobar 24. Eso es genial. Y ahora llega el momento de que creamos ese layout. Pero antes de hacerlo, quiero arreglar este layout porque va a ser mucho más rápido hacerlo. Permítanme en realidad seguir adelante y duplicar estos dos. Póngalos en un grupo y colóquelo aquí. Ahora bien, este grupo va a ser una descripción así. Y esto debería decir la descripción del vehículo. Eso es genial. Control D para duplicar eso. Y esto en realidad debería ser párrafo. Ahí vamos. Bueno, déjame copiar y pegar el texto. Y entonces esto debería ser 24, así. Y la altura total de esto debería ser de 198. Entonces cambiemos eso a 198. Ahí vamos. Entonces estamos 32 desde el borde inferior. Eso es genial. Ahora bien esto no me gusta mucho, así que voy a cambiarlo a párrafo de tres años, y eso es básicamente todo para esta sección en particular. Entonces se hace la descripción. Ahora vamos a tratar con la visión general del automóvil. Pero una vez más, antes de hacerlo, vamos a empujar esto a 24. Vamos a empujar esto a 24, que acabamos de crear. Así. Ahí vamos. Y voy a mover esto un poco más tarde. Pero básicamente es a 200, igual que todas las demás cosas, pero tendremos que incluir esta sección. Pero primero tratemos con visión general porque aquí tenemos algunos íconos. Entonces lo que vamos a hacer primero es simplemente incluir el texto y para el texto en sí, lo que voy a hacer es simplemente crear un montón de estos elementos de párrafo. Entonces lo voy a llamar 2021. Esto va a ser para el año. Entonces párrafo para el color del párrafo, voy a usar este. Ahí vamos. Y voy a ir rápidamente por el icono e ir por el icono del calendario aquí mismo. Ponlo aquí mismo, y asegúrate de que los agrupé. Asegúrate de que los llame calendario. Asegúrate entonces de que entregué el diseño automático, pero antes de hacerlo, asegúrate de centrarlos así. Diseño automático de calendario. Y veamos, la distancia para esto puede ser de 16, por ejemplo, creo. Sí. Entonces 16, ahí vamos. Ahora voy a darle un codazo aquí mismo. Ahí vamos. Y básicamente lo que voy a hacer en esta etapa es simplemente crear un montón de copias. A ver, 24 desde este borde deberían funcionar bien. Sí, creo que es genial. Así que solo crea dos copias más así. Y voy a colocar en esta llamada automática. La transmisión, esto va a ser gasolina para el tipo de combustible, y esto va a ser de 15,246 km. Esto es lo mucho que ha hecho el auto hasta el momento. Entonces veamos. Tenemos el calendario, que es éste. Entonces tenemos el kilometraje, que debería ir por debajo del calendario. Entonces tenemos el tipo de campo, que debe ir por debajo del kilometraje. Y por último, tenemos la transmisión, que debería ir justo aquí. Entonces lo que podemos hacer en esta etapa es un poco codazar esto a tal vez, no sé ADH o algo así. Entonces vamos con, veamos, 88. Y luego puedo seleccionar estos cuatro, llegar a la cima y simplemente ordenar. Sí. Hace seis obras bien, pero no estoy muy segura. Me gusta lo que hice anteriormente. Así que distribuye el espaciado horizontal. Ahí vamos. Creo que eso va a estar bien. Entonces veamos un T9. Ahora, sigamos adelante e intentemos intercambiar estos íconos. Entonces para ésta, lo que vamos a necesitar es esa transmisión. Así que asegúrate de encontrarlo. Ahí vamos. Para éste. Vamos a intercambiar. Iremos al tipo de campo. Este es el kilometraje. Entonces creo que ese ícono del odómetro debería funcionar bien aquí. Ahí vamos. Y ahora que estos se han completado, lo que podemos hacer es básicamente ponerlos en fila y duplicar esa fila, posicionarla hacia abajo. Entonces esta va a ser una fila número dos dentro de ahí. Cambiemos esto a un motor. Porque va a ser el tipo de motor. Esto debería decir motor V8. Tipo de motor, como queramos. En lugar de kilometraje, esto va a tener el icono de la puerta. Entonces veamos dónde está. Ahí vamos. Y va a tener cinco puertas. Ahí vamos. Ahora bien, este siguiente debería tener asientos, entonces siete asientos. Entonces este ícono va a ir por las semillas, que está justo por aquí. Asientos. Y este último debería ser por garantía. Debido a que algunos autos tendrán garantía, otros no. Todo depende de la antigüedad de tu auto en la etapa de venta. Y si puedes probar que es tuyo, si puedes probarlo, vale lo que estás diciendo y cosas así. Entonces no estamos ahí vamos. Entonces eso es más o menos para esto. Y creo que esta sección está terminada. Todo lo que tenemos que hacer es ordenarlo un poco. Así que voy a colocar esto a las 24 también y convertirlo en un 196. Entonces la altura es 196. Ahí vamos. Entonces estamos 32 de abajo, 24 de cada uno de estos lados. Y ahora lo que voy a hacer es simplemente poner esto encima con esto en la parte inferior. Llame a este resumen. Y déjame mostrarme a este lado. Entonces 24 de este lado, Vamos a empujar esto a 24, empujar esto a 24 también. Aquí lo que necesitaremos es sólo copiar esta sección. Así que básicamente solo codazo aquí mismo, asegúrate de que esté centrado. Y veamos por la distancia para ello, lo pondremos en 200. Entonces veamos dónde estamos aquí mismo, algo así. Entonces 200 y luego estas secciones a continuación deberían estar en 200 así como a algo así como a algo así. Ahí vamos. Y sólo voy a extender esto hacia abajo para que mi pie de página no esté cubierto. Será a los 64, igual que lo hicimos anteriormente. Entonces la altura debería ser 5856, creo. Ahí vamos. Así que un poco de matemáticas va por el camino. Ahí vas. Esa es esa página. Todo se ha completado. Así que vamos a golpear la vista previa para el final de este video. Sólo quiero mostrarles lo que hemos hecho hasta ahora y lo que haremos con esta página en particular. Entonces aquí vamos a tener estas imágenes. Y al hacer clic en alguna de las imágenes, va a aparecer la caja de luz. Eso se puede ver en la parte Adobe XD del curso, pero lo haremos en uno de los videos posteriores aquí también. Tenemos una reserva este curso, tus opciones de préstamo y los autos deben ser seleccionados aquí, lo que arreglará ahora mismo porque esta es en realidad la parte de la página del curso. Así que vamos a seleccionar eso. Y en lugar de por defecto, vamos a elegir seleccionado. Entonces ahora puedes ver que está resaltado aquí mismo. Reserve este auto o C solo opciones. Entonces solo agrega S aquí mismo. Y por eso estamos comprobando esto. Entonces eso es genial. Entonces opciones de Ceilán. Para que puedas ver estas opciones de préstamo en la página siguiente. Y solo te va a dar opciones generales. Pero claro, para cada auto y por cada precio va a ser diferente. Por lo que es mejor simplemente contactar a la persona que está haciendo los préstamos dentro de esta empresa o compañía externa para darle la mejor opción posible. Entonces opciones de Ceilán, vamos a llevarte al discurso del préstamo en sí. Reservar este auto solo te va a llevar al foro Philip. Puedes rellenar este formulario, reservar. Este auto va a saber que viniste de esta página. Entonces va a ir mucho mejor de esa manera tenemos la gran descripción del vehículo, lo cual es genial. Todo esto es genial. Todo esto está bien. 200 todos de este trabajo sellan autos Contáctenos. Ahí vamos. Entonces todo esto funciona bien. Y ahí vamos. Eso es. Eso es todo para esta página, página de préstamos, contáctanos va a ser súper simple y caja ligera. Va a ser básicamente el mismo diseño pero agregando más imágenes. Entonces te veré en el siguiente video donde vamos a crear esta página de Préstamos. Entonces te veré ahí. 159. Préstamos, póngase en contacto con nosotros y Diseño de páginas de lento: Empecemos con la página Préstamos. Entonces lo que voy a hacer antes que nada, solo se selecciona este texto aquí mismo. Control C, ven aquí mismo, controla V, pégalo en su lugar. Y voy a reemplazarlo con algunos textos adicionales. Entonces préstamos del auto de tus sueños. Y voy a venir aquí mismo con mis imágenes. Y sólo voy a traer a las imágenes que irán a la sección de héroes en la parte superior. Alinear así, tráelos aquí y solo asegúrate de alinearlos aún más a algo como esto, luego acercar esto un poco, tal vez incluso a algo como esto. Pero sí, creo que esto va a estar bien porque va a ser fácil para mí alinear estas imágenes en términos de la alineación general. Creo que estamos bien aquí mismo. Entonces seleccionemos estas imágenes, llámalo imágenes de héroe. Ahí vamos. Y voy a agrupar todo esto, llamarlo héroe. Simplemente revisa el texto muy rápido. Eso es genial. Selecciona los préstamos y saltaremos dentro de ahí. Nav no sé por qué no me está mostrando. Ahí vamos. Entonces los préstamos voy a ir con seleccionados mientras estamos ahí fuera, vaya a Contáctenos y elija, selecciónelo. Ahí vamos. Así que vuelve a los pulmones. Lo que vamos a necesitar aquí mismo es crear otra sección debajo de esto. Así que dale T y voy a escribir en algo como esto, asegúrate de que esté centrado. Y en vez de esto, voy a ir con esto. Tan centrado una vez más, centro de la página. Y voy a ir con 150 de esta imagen. Entonces así, ahí vamos. voy a poner obviamente debajo de mi sección de héroe. Y luego voy a duplicar esto, asegura de que sean tres años en este caso. Básicamente voy a recrear el mismo layout que tenemos aquí mismo. Incluso podemos copiar esto si quieres. Así que vamos a seguir adelante y hacer eso, porque básicamente sólo vamos a utilizar el mismo diseño. Entonces selecciona estos tres, pulsa Control C, vuelve aquí mismo. Hit Control V. asegura de que estamos en el centro de la página así, y asegúrate de que estamos , a ver, 64 de aquí. Entonces 64, ahí vamos. Ahora esto, me voy a convertir en el color h3. Ahí vamos. Haz lo mismo para esto. Entonces h3h3 y esto, vamos a ver, a lo mejor puede ser ese color gris oscuro. Creo que eso va a estar bien. Y gris oscuro y gris oscuro. Ahora bien, en cuanto al contenido, vamos a llenar lo mismo. Ahí vamos. Ahí vamos. Y voy a dejar los íconos para el final porque vamos a llegar a ellos en apenas un segundo. Voy a mostrar cómo usar y reutilizar rápidamente algunas de estas secciones porque se están repitiendo. todas formas vas a hacer eso en Webflow. Entonces, ¿por qué no hacerlo también en Figma? Entonces aquí lo que vamos a hacer es seleccionar este icono y vamos a conseguir y cambiar a tan conveniente. Incluso puedo escribir conveniente. Ahí vamos. Esto será, a ver, el pago del auto. Así que reemplázalo con pagos de autos. Entonces esto va a ser garantía de auto. Garantía de auto. Ahí vamos. Ahora todo lo que quiero hacer es alinear estos tres arriba. Así, creo. No, vamos a probarlo hasta el fondo. Ahí vamos. Ahora, todo se ve bien. A ver si selecciono esta. Estamos 64, somos 72 por alguna razón aquí. A lo mejor este icono es un poco más corto. Entonces lo que voy a hacer es simplemente seleccionar los tres, presionar Desagrupar y simplemente organizar manualmente todo. Entonces de aquí para acá, deberíamos estar a las 24. Ahí vamos de aquí para acá, deberíamos estar a los 74. Ahí vamos. Esto también debería ser a las 24. Ahí vamos. Y esto debería ser un 24 también porque hicimos algún intercambio de instancias y cambiamos algunos de estos íconos. Vamos a intentarlo desde aquí. No sé por qué no va a alinearse aquí. Ahí vamos. Vamos. Bien, entonces ahora esto está hecho, esto está hecho, esto está hecho, eso es genial. Entonces Control G, control G, control G. Ahí vamos. Esto va a ser sencillo. Esto va a ser pago. Esto va a ser garantía. Tranquilidad. Ahí vamos. Entonces ahora estamos. Cuando los seleccionamos todos, deberíamos tener 64. Estamos. Lo pondremos aquí mismo, golpearemos Control G y llamaremos a este mercado préstamos líderes, por ejemplo, ahí vamos. 150 de la sección anterior, lo que voy a hacer en este caso es seleccionar esta sección control C, control V aquí mismo. Cualquiera que sea la razón no la pegó. Así que vamos con algo así por ahora. Y lo que voy a hacer es simplemente arrastrar otra imagen aquí mismo para poblar esta. Ahí vamos. Y voy a seleccionar estos para asegurarme de que estén centrados. Aquí. Déjame copiar este texto. Ahí vamos. Pegar en este texto. Ahí vamos. Entonces ahora que eso está hecho, voy a seleccionar estos para dar click aquí mismo. Ahí vamos. Y ahora quiero agregar esos logotipos adicionales que están incluidos anteriormente. Entonces déjame arrastrarlos dentro de aquí. Ahí vamos. Así que hemos enviado ahí y tenemos esta S leasing. Entonces en algún momento va a venir justo aquí y el zinc dormido va a venir justo aquí. Ahí vas. Entonces 24 en cada lado. Ahí vamos. Entonces ahora que eso está hecho, lo que voy a hacer es seleccionar básicamente estos tres. Así que vamos a traer esto en realidad. Entonces, ¿quiénes somos? Deberíamos cambiar eso a nuestros socios. Ahí vamos. La mano de nuestro socio. Vamos a traer a esos dos dentro de ahí. Algo así. Ahí vamos. Solo asegúrate de que esté perfectamente en el centro. 24. Y ahora eso está hecho. Por lo que nuestros socios se han completado. Quienes somos socios gravados. Texto. Bien. Básicamente eso es todo para esta página. Entonces lo único que nos queda por hacer es solo alinear esto, esto y esto a una distancia de 200 píxeles. Vamos a agrandarlo. Ahí vamos. Haga doble clic aquí para seleccionar nuestro marco de préstamos. Empujarlo hacia abajo, y deberíamos estar bien para ir algo como esto. Entonces menos tres. Entonces 3885. Ahí vamos. Porque estamos aquí y sólo nos falta la imagen básicamente aquí mismo. Así que terminemos la página de contacto también. Así que solo voy a arrastrar y soltar una imagen aquí mismo, asegura de que su centro esté alineado. Asegúrese de que se alinee hasta aquí, 20 píxeles hacia abajo, por ejemplo o incluso mejor. Sí, 20 píxeles está bien. Todo lo que tenemos que hacer aquí es básicamente seleccionar todo este contenido y sacarlo a colación. Entonces, en vez de 200, vayamos con 100 porque no necesitamos ese espaciado. Entonces veamos 100. Y una vez más, básicamente acaba de cortar esto en el núcleo. Ahí vamos. Veamos dónde estamos. Estamos a 9 min en. Tal vez incluso podamos terminar esta superposición también. Entonces 4273564. Ahí vamos. Así que sigamos adelante y en realidad hagamos la caja de luz en sí. Entonces déjame copiar esto. Déjame pegar esto. Y la propia caja de luz. A ver. Esto debería ser diez. Entonces 10905609. Ahí vamos. Asegúrate de que esté en el centro. ¿Voy a creer que vamos a traer esto? Se va a quedar como está. Entonces 168 por 93, eso es genial. Y todo lo que tenemos que hacer ahora en este punto es solo sumar tres más porque tenemos 12345. Así que a tres más le irá bien aquí. Entonces, antes que nada, voy a volver a aquí y convertir esto en auto-layout. Ven a aquí, convierte esto en un diseño automático. 123. Entonces este debería ser el número seis, este debería ser el número siete. Ahí vamos, y este debería ser el número ocho. Entonces ahora que eso está hecho, lo que también podemos hacer es básicamente alinear estos un poco mejor. Entonces, antes que nada, es chasquear esto en el centro de la página. Voy a bajar esto un poco. Empuje, por ejemplo veamos, 64, tal vez 64 de este lado, Eso es genial. Y tal vez 16 de este lado. Déjame ver algo como esto. Porque quiero poder ver todas las imágenes o tal vez incluso mejor, podemos simplemente chasquearla en el centro así. Entonces ahí vamos. Ve tal vez una veinte desde este filo. Entonces algo como esto. Sí. Entonces ahora que tenemos esto, lo que podemos hacer es darle a R para el rectángulo y simplemente colocarlo para rellenar este fotograma por completo. Ahí vamos. Colóquelo en el fondo. Y voy a llamarlo caja de luz fondo. Voy a darle ese color gris oscuro. Ahí vamos. Y le voy a dar una ciudad base del 80 por ciento. Así que llénate con el gris oscuro y la obesidad del 80 por ciento. Ahí vamos. Lo que también necesitamos aquí mismo es ese ícono de cerrar. Para que podamos usar esta . Ahí vamos. Colóquelo aproximadamente por aquí para que se alinee. Y le voy a dar el, vamos a ver, color de selección. Entonces en vez de éste, no llenar color, vamos a seleccionarlo en realidad. fracaso debe ser blanco. Ahí vamos. Malabares encantadores. Y desde arriba debería ser, no sé, tal vez 53 o algo así. 56, creo. Sí, 56. Y eso es básicamente todo. Esa es nuestra superposición hecha. Porque dejamos esto al 80 por ciento. Se va a pasar básicamente. Entonces cuando lo pongamos sobre esa página, podremos tener la opacidad en el fondo. Entonces, en realidad vamos a agruparlos y llamémoslo caja de luz así. Y ahí vamos. Nuestro diseño ha sido terminado, todo se ha hecho. En el siguiente video, podemos atacar algunos prototipos básicos. Y en el video posterior a eso, tal vez pueda mostrarles cómo exportar algunos de estos activos. Y luego finalmente al final, voy a mostrar ese plugin, que te va a ayudar a transformar algunos diseños básicos de figma a Webflow sin escribir una sola línea de código, agregar sin tocar todos estos componentes en el propio Webflow porque puedes hacerlo todo en Figma. Pero una vez más, solo recuerda que es para páginas realmente básicas. Entonces te veré en el siguiente video donde vamos a comenzar con la creación de prototipos. 160. Creación de prototipos en Figma: Empecemos ahora con algunos prototipos bastante básicos. Entonces lo que voy a hacer es justo aquí donde dice autos, voy a cambiar a prototipo y voy a arrastrarlo a la página de autos. Voy a ir al click, navegar un instante porque no quiero ninguna, ningún tipo de animaciones entre préstamos. Misma historia. Así que solo selecciónala y ve a préstamos y contacta con nosotros, selecciónala y ve a Contáctenos. Ahora porque lo aplicamos desde aquí, como puedes ver, se hace la transición a cada instancia de este componente en particular. C botón de todos los autos. Lo que voy a hacer es simplemente seleccionarlo y de él, voy a ir a esta página instantáneamente. Vayamos a smart animate porque vamos a tener esta opción aquí mismo. Contáctenos navegación. Todo esto va a quedar prácticamente igual. Ahora desde esta página, lo que haremos es cuando seleccionemos el Range Rover. Entonces, seleccionemos la tarjeta de deuda e iremos a esta página en particular. Vamos con smart animate también en este caso, Reserva ¿García presta opciones? Entonces para las opciones de préstamo, voy a ir a los pulmones. Aquí, vea todos los autos o nos va a llevar a esta página aquí mismo. Ni siquiera creo que necesitamos este botón ahora que lo pienso, pero dejémoslo como está porque vamos a incluirlo más adelante en Webflow. Y eso es más o menos para esta página en particular. Ahora, por aquí, todo está hecho aquí, todo está hecho. Todo lo que tenemos que hacer ahora es simplemente conectar esta caja de luz. Entonces para hacer eso, lo que puedes hacer es hacer clic aquí mismo o aquí mismo. Por lo que seleccionaré C todas las imágenes. Haga clic y arrastre a la caja de luz al hacer clic. Ir a, voy a ir a Abrir superposición. Y sólo voy a elegir al instante. Y dentro de la caja de luz, voy a dar click y seleccionar este cierre. Haga clic aquí. Al hacer clic. Ya tengo esta interacción de alguna manera. Así que vamos a cerrar eso. Vamos a cerrar eso. Así que selecciónala una vez más. Haz clic y arrastra aquí. Entonces onclick, voy a cerrar la superposición. Entonces eso básicamente va a cerrar ese ahí. Ahora bien, una cosa que no investigué es cómo escondo esta barra de menú en particular que viene de arriba hacia abajo aquí mismo. Entonces esta, probablemente haya alguna opción, pero yo era demasiado vago. Entonces ahora cuando vaya y haga clic, solo me va a llevar ahí, lo cual está bien. Aquí. Podemos ver cómo se ve todo esto. E incluso puedo volver a aquí. Pero probablemente debería hacer un prototipo de ella. Así que vamos a comprobarlo aquí mismo. Entonces autos, todo funciona. Cuando haga clic aquí mismo, va a abrir esta página. Así que todo funciona bien. Se puede ver que tenemos las portadas. Ver todos los autos nos va a llevar a esta página. Se va a mantener esa posición que no es lo ideal, pero sin embargo reservar este auto C opciones de préstamo. Nos va a llevar dos pulmones. Y al hacer clic en Ver todas las imágenes, se va a abrir esta página. Ahora lo que podemos hacer con esta página es en realidad acostarla un poco en altura. Entonces sigamos adelante y cerremos esto. Ahí vamos y cerramos esto. Cambiar al diseño. Entonces lo que tenemos aquí mismo es 64, si no recuerdo bien, sí, lo hacemos. Así que solo podemos darle un empujón a esto. Veamos dónde estamos aquí mismo, 118. Catia a pensar va a funcionar bien. Y mira dónde estamos con esto. Sí, así que también tengo que acotar la imagen de la caja de luz. 68, así que cuatro abajo, 150. Ahí vamos. Y la caja de luz en sí debería ser de 150. Ahí vamos. Entonces ahora que eso está hecho, tal vez podamos darle a Preview aquí mismo en esta página en particular para que veamos si hay alguna diferencia en lo que creamos. Sí, la hay, porque ahora solo lo empuja un poco hacia arriba hacia el centro. Y eso es más o menos para el prototipado oral y lo que puedes hacer con él. Aquí no nos vamos a volver locos porque vamos a hacer prototipos más tarde en Webflow. En el siguiente video, voy a mostrar algunas opciones de exportación y cómo puedes exportar algunos de estos activos para desarrolladores si no estás desarrollando esto tú mismo o por ti mismo. Si estas desarrollando esto en Webflow como nosotros vamos a hacerlo te veo ahí. 161. Exportar activos de Figma: Ahora tratemos con la exportación de algunos de estos artículos. Y básicamente voy a explicar tres formatos diferentes, formatos archivo para ti que puedes exportar en. Así que prácticamente puedes consultar las desviaciones de exportación en este punto y comenzar con Webflow parte de este curso para entender un poco cómo importar algunas de estas opciones, qué se utilizan, para qué se utiliza cada formato de archivo. Lo expliqué todo en la parte de reflujo del curso. En esa parte del curso, vamos a utilizar elementos de exportación de Adobe XD. Figma funciona exactamente de la misma manera. Te muestro aquí, por ejemplo tenemos estos iconos ahora, cada icono que voy a exportar como SVG. Y para ello, voy a seleccionar el propio icono. Ven justo aquí donde dice Exportar, pulsa Seleccionar. Y aquí puedo cambiar el formato de archivo de PNG a JPEG, SVG, y PDF básicamente para este curso. Y en general, lo que te tiene que preocupar es PNG, JPEG y SVG. Solo ten en cuenta así. Svg es increíble para los iconos porque va a mantener la misma calidad y va a permanecer consistente sin importar en qué tamaño estés diseñando porque SVG es gráficos vectoriales escalables, siempre va a mantener la misma calidad. Jpeg es para horneado en imágenes que no tienen fondo transparente. Y te voy a mostrar uno de ellos aquí mismo. Por ejemplo, esta imagen aquí mismo. No tiene ningún fondo transparente, por lo que JPEG para ese formato de archivo en particular está bien. Y por último, tenemos P&G. P&g es genial para imágenes como estas, por ejemplo, para imágenes como estas, como estas dos. Porque tienen fondos transparentes. Entonces, para exportar, realmente tienes dos opciones diferentes aquí. Digamos que quiero exportar este icono en lugar de PNG, voy a seleccionar SVG. Lo que puedes hacer es agregar diferentes sufijos aquí, por ejemplo 1x2x3 x. Si quieres exportar esto a una x2, x3 x, todo lo que tienes que hacer es simplemente agregar en una x como sufijo. Haga clic aquí. Se va a agregar automáticamente a, agregar para hacer clic una vez más, tres salidas a3x. Puedes agregar cada vez más y más si quieres, pero en realidad no necesitamos eso. Entonces básicamente voy a seguir adelante y deshacerme de estos. Puedes ver cómo se ve aquí mismo. Pero solo voy a cerrar todos estos y solo exportar en este. Voy a quitar el sufijo porque realmente no lo necesito. Lo que puedo hacer es simplemente presionar Exportar imagen de llave de coche. Y puedes ver aquí mismo, si me doy un codazo, eso, lo exporta a mi escritorio muy rápido. Ahora bien, lo que esto hace es que me permite simplemente arrastrarlo y soltarlo en Webflow, como voy a hacer en la siguiente parte del curso cuando empecemos con la web para el desarrollo. Y solo va a ser súper simple arrastrar y soltar y tener todos tus archivos consistentes en esos patrones organizacionales particulares. Entonces déjame mostrarte eso también. Así es como básicamente se ven estas imágenes. Entonces puedes ver algunos de ellos son SVG, como éste y éste. Esto es un PNG. Entonces cuando cubro muy rápido, se puede ver una extensión de archivo PNG. Se trata de un archivo JPEG porque realmente no necesitamos la extensión PNG. Este es el PNG porque tiene fondo transparente lo puedes ver, así que aquí mismo, este es un Jpeg, como mencioné, porque no tiene fondo transparente en cuanto iconos puedes ver todos ellos son SVG. Y básicamente simplemente seguí adelante y exporté todos ellos. Pero, ¿qué pasa si quieres exportar varios íconos? Bueno, solo puedes seleccionar el icono mientras estás diseñando. Pulsa Exportar, cambia esto a SVG. Y ahora cuando seleccione éste, va a saber que siempre selecciono ahí el SVG. Se va a seleccionar éste como SVG. Quizás este se pueda exportar como JPEG, y éste, grande. Así que la imagen de héroe se puede exportar en P&G Entonces, ¿qué pasa si queremos seleccionar una exportación? Todos ellos, bueno, puedes hacerlo con bastante facilidad pinchando aquí. Después Archivo y Exportación. Y va a exportar todos los elementos que básicamente alineaste para exportar porque los marcas todos, seleccionaste los formatos de archivo. Entonces puedes ir a Exportación de archivos y va a exportar a tu destino deseado. Básicamente, eso es más o menos todo. Así de sencillo es exportar. No voy a molestarme seleccionar a un experto en todos estos. Básicamente con esto, ni siquiera tienes que exportar esta elipse. Puedes recrearlo en Webflow, pero creo que aún lo exporté desde Adobe XD porque es mucho más sencillo importar en forma SVG y crear uno por tu cuenta. Porque en Webflow esto es más o menos un div con solo un radio de esquina del 100 por ciento y color azul en su interior. Eso es más o menos. Y luego puedes jugar con las opciones de posicionamiento dentro de Webflow. No estás exportando fuentes. No estás exportando colores, no estás exportando botones. Estás creando todas estas cosas dentro de Webflow. Entonces básicamente no hay necesidad de que lo hagas y que los exportes directamente desde Figma. Hablando de exportar de figma a Webflow. En el siguiente video, voy a abordar ese famoso plugin. Y vamos a explorarlo y ver qué puedes hacer dentro de Figma, cómo conectarlo con tu proyecto Webflow y cómo trabajar en proyectos similares en él, pero no en este. Entonces te veré ahí. 162. Plugin de Figma a Webflow: Bien, así que aquí vamos. Te voy a mostrar cómo conectar el flujo de trabajo de la herramienta Figma. Estoy haciendo esto la primera vez y voy a mostrarte cómo se ve. Así que básicamente vas a venir aquí mismo a tu búsqueda del panel de Plugins, Figma a Webflow y vas a instalar este. Solo asegúrate de que sea por laboratorios Webflow. Se puede ver aquí mismo. Así que solo para asegurarse de que es plugin oficial, hit run. Y va a ejecutar básicamente una instalación. Se puede ver aquí mismo. Y te va a mostrar todo tipo de opciones diferentes. Por lo que Safari no es compatible. Utilice el flujo de trabajo en Chrome. Lo estoy usando en Chrome, así que no estoy muy seguro de por qué me está mostrando eso. Y eso es prácticamente todo. Entonces lo que tenemos aquí mismo, tenemos diseños y tenemos estructura. Por lo que se puede incluir sección y contenedor. Dos columnas, tres columnas, cuatro columnas encabezamiento más tres columnas y así sucesivamente y así sucesivamente. Y realmente deberías aprender esto en la sección Webflow del curso en sí, qué son todos estos y cómo estructurar tus sitios web. Y entonces quizás volvamos a esto. Si no estás familiarizado con alguna estructura HTML básica de tus páginas, entonces tenemos el diseño, y estas son básicamente las plantillas que puedes usar. Entonces, vamos a darle un codazo a un lado. De hecho, vayamos a nuestros activos spot. Utilice nuestra página web, presione Control C. Vuelva al control de diseño del sitio web V. Colóquelo aproximadamente por aquí. Ahí vamos. Lo que voy a hacer es, digamos usar este logo de nav, click izquierdo y agregar a Canvas. Entonces voy a hacer click y ojalá lo vaya a agregar aquí mismo. No es tal vez que esté en otro lugar. Sepa, por la razón que sea no funciona. No estoy muy segura de por qué. A lo mejor deberíamos comenzar con una conferencia de estructura. Vamos a deshacernos de éste. Entonces intentemos así. Ahí vamos. Así nueva página. Tenemos que usar los suyos. Entonces 14, 40. En este caso. Aquí lo que vamos a hacer es simplemente nav logo a la izquierda. Va a incluir a ese héroe que se dirige a la izquierda. A ver. Así equipo héroe, veamos características, matriz de características. Ahí vamos. Para que veas que empieza a sumar todos estos quizá sección de equipo, círculos de equipo. Ahí vamos. Tal vez testimonios. Entonces usemos este. Y tal vez podamos usar logotipos. Quizás éste, Pie de página, quizá éste. Y ahí vamos. Intentemos una vez más. Ahí vamos. Entonces ahora que tenemos todo, exploremos rápidamente este diseño porque tendrás que usar este diseño en particular para que puedas implementar este diseño en tus propias páginas. Entonces lo primero es lo primero, podemos ver que el layout se fija en 14:40 API, 14, 40 pixeles. Entonces aquí tenemos 14, 40 también. Pero el nuestro no es fijo. Entonces básicamente deberías arreglarlo. Y deberías convertir todo tu contenido en auto-layout. Para que veas que tienen el diseño automático. Entonces, por ejemplo, si lo hago aquí mismo, así puedo crear un diseño automático en lugar de un ancho fijo de cerdo. Y ahí tienes. Mi contenido es el mismo que el de ellos. Entonces, ¿qué debemos hacer a continuación? Bueno, básicamente, todos estos deberían estar en su propio diseño automático separado. Entonces aquí tenemos ahora el logotipo de Navbar a la izquierda, que es esta barra de navegación en la parte superior. Y si lo abro, antes que nada, se puede ver que es por sí solo, es diseño automático. Y se puede ver que tenemos relleno horizontal de 24. Entonces si lo abro, tenemos el contenedor navbar, que es el contenedor para que el contenido vaya dentro. Entonces tenemos el contenido de la barra de navegación en sí. Sí. Ahora pide prestado contenido, que es todo esto por dentro. Dentro de eso, tenemos la marca navbar y tenemos el menú de la barra de navegación. Entonces así es como debes estructurar tus archivos y solo asegurarte configurarlo para llenar el contenedor y abrazar los elementos en su interior. Entonces cuando selecciono esto, se puede ver que son las 14 40 p. pero como se establece a una distancia de 24 en cada lado, se puede ver aquí mismo. Entonces cuando selecciono mi contenedor, establecen el ancho fijo de 1,200 y luego el ancho completo del contenido en su interior. Eso va a hacer que sea receptivo de inmediato. Lo que va a pasar aquí es que puedes seleccionar esta. ejemplo, y luego en lugar de esto, puedes incluir tu propio logo dentro de aquí. Así que puedes hacer algún intercambio de instancias, digamos, o simplemente arrastrar y soltar tu logo dentro. Y en realidad intentemos hacer eso. Veamos una araña. Ahí vamos. Puedes ver que puedes colocar tu logo interior y simplemente podrías deshacerte de su logo, solo se asegura de que mantengas la distancia dentro de la deuda. Entonces en realidad Control X, Control V. Golpea eso, borra eso, y ahí vamos. Ahora reemplazamos el logo por nuestro propio logo. Podemos poner todas nuestras instancias aquí en muchas características aquí y así sucesivamente y así sucesivamente. Pero en realidad cómo conectar todo eso. Tienes que abrir tus dashboards de flujo de trabajo y tienes que encontrar el proyecto. Este archivo Figma está relacionado con? En nuestro caso, se le llama a los autos exclusivos de araña diseñados en Webflow, se llama lo mismo. Entonces, cuando abras tu panel de flujo de trabajo, vas a iniciar sesión. Así que simplemente haz clic aquí mismo. Vas a iniciar sesión y luego vas a hacer clic en ese proyecto en particular para que lo conectes. Entonces cuando lo conectes, lo que puedes hacer es copiar todos los textos y estilos de color, solo texto y solo estilos de color. Puede ingresar a la configuración del complemento y configurarlo allí. Ahora, básicamente para cada archivo Figma, puedes conectarte a diferentes web para proyectos e ir al revés. ¿Por qué? No creo que esto sea útil para proyectos complejos es que prácticamente puedes hacer cualquier cosa aquí. Pero como dije, para nuestro caso de uso particular, esta página realmente requiere algún trabajo adicional en los ajustes. Y vas a ver que cuando llegues a la página de Webflow porque estas cajas de luz, tuve que combinar múltiples cajas de luz porque el flujo de trabajo no tiene opciones predeterminadas que realmente necesito para ejecutar este proyecto. Entonces es realmente difícil hacer algunas cosas cuando solo vas a la ruta predeterminada. A veces tienes que fingirlo básicamente y hacer algunas cosas de una manera diferente, diferente materia. Pero con eso, voy a terminar esta etapa de diseño y prototipado en el siguiente video. Básicamente, vas a poder comenzar con la parte Webflow de este curso. Puedes abrir este archivo Figma para explorarlo. Puedes exportar todos estos activos como te mostré. Puedes jugar con algunos ajustes de prototipado. Solo recuerda que todo funciona exactamente igual en Figma que en Adobe XD. Las únicas dos diferencias principales, como viste hasta ahora, son básicamente tres. Cómo se crean estos estilos para texto y colores. Porque en XD, están justo aquí del lado izquierdo. En Figma, están justo aquí. Así se puede hacer clic en él en el intercambio de instancias ya que en XD se puede arrastrar el componente, colocarlo encima del nuevo componente. Aquí tienes ese intercambio de instancias, que creo que es un poco mejor de lo que es aquí mismo. Y básicamente en toda la estructura que llaman auto layout aquí, y en XD se les llama pilas. Todo lo demás, en mi opinión es exactamente lo mismo. Algunas cosas que son aún peores en mi opinión, como agregar imágenes que no puedes simplemente arrastrar y soltar imagen encima de la forma. Entonces tienes que, aquí mismo en el lado derecho, encontrar esa forma y luego arrastrarla y soltarla ahí. Por supuesto, hay algunas diferencias masivas cuando se trata de fémur, que son mejores que en XD, como puedes agregar rejillas horizontales y verticales, por ejemplo, puedes agregar múltiples opacidades y múltiples colores y colores, estilos y textiles encima de una cantidad existente. No se puede hacerlo en XD. Entonces hay más o menos muertos. Y son por supuesto, algunas funciones avanzadas de prototipado como usings y nice outs y puedes cambiar las curvas y cosas así. Pero a propósito no quería molestarte demasiado con esas cosas porque solo vamos a hacer eso más tarde en Webflow de todos modos. Entonces, ¿cuál es el punto? Justo aquí, acabo de mostrarte algunos pernos básicos de prototipado en XD y aquí en Figma. Así que eso va a terminar más o menos esta sección de diseño del curso. Lo siento si algunos videos han sido más largos, pero solo estaba tratando de explicar todo lo que pudieron sobre esta transición de XD Figma. Se puede ver que es más o menos lo mismo y va a ser más o menos lo mismo ahora que Adobe lo compró. Entonces te veré en la siguiente lección donde vamos a comenzar con el flujo de trabajo. 163. ASIGNACIÓN de la SECCIÓN 16: Su tarea para esta sección es usar los archivos que proporcioné y tratar usar diferentes imágenes o diferentes colores o diferentes topografías por completo. Y solo para jugar con los archivos, realmente te animo a que sigas esta clase en su totalidad porque los archivos se proporcionan por esa razón en particular. No solo intentes usar el archivo terminado y jugar con él para intentar seguirme conmigo, traté de seguirme y crear a mi lado mientras enseño. Entonces, para entender mucho mejor que solo usar el archivo terminado y solo para destrozarlo y llamarlo un día, Siempre es el mejor enfoque para aprender a medida que avanzas. Entonces, mientras enseño, mientras ves estas lecciones, siempre es el mejor enfoque seguir y tratar de crearlo tú mismo. Y mientras lo estás creando la primera vez, tal vez experimentes solo un poco solo para usar quizás un tono diferente de gris y no exactamente el mismo tono de gris que utilicé en esta lección. Y esa es la mejor manera de aprender, en mi opinión. 164. SECCIÓN 17 Creación de flujo web: En esta sección del curso, vamos a tomar lo que acabamos diseñar y trasladarlo al flujo de trabajo. Workflow es una herramienta fantástica diseñada sin código en mente. Lo que eso significa es que tienes el código ejecutándose en segundo plano, pero en realidad estás haciendo las cosas visuales, pero es diferente de todas estas otras herramientas porque vas a aprender HTML, CSS y JavaScript en el camino sin que realmente tengas que conocer una sola línea de código. Así que comencemos con el Webflow y acabemos con este proyecto. 165. Introducción al flujo web: Webflow es una herramienta increíble que te permite crear sitios web ricos en contenido que son totalmente receptivos y completamente animados, todo sin conocer una sola línea de código. Obviamente, es mejor si sabes codificar porque luego puedes ampliar esa funcionalidad web falsa. Pero si no sabes codificar, eso está completamente bien porque puedes crear tu diseño desde cero como lo estamos haciendo en este curso, o puedes usar algunos de los miles llorados, diferentes plantillas que proporciona Webflow. Y luego puedes editar una de esas plantillas y simplemente continuar donde las dejaron con esa plantilla. Una vez más, es beneficioso para ti conocer al menos la estructura del código. Pero si no lo sabes, vamos a hablar de ello en este curso, lo haremos en breve. Pero por ahora, Webflow es una herramienta fantástica porque no te permite empantanarte con algunos complementos y actualizaciones como WordPress, por ejemplo, no es súper limitado como fijo, por ejemplo donde todo ya está preparado y estás limitado con esas plantillas, anchos y tamaños y así sucesivamente. Pero puedes crear todo tu contenido desde cero. Puedes crear tus diseños personalizados desde cero. Y realmente ha sido oficial, sobre todo cuando se trata de la funcionalidad CMS, que vamos a tocar en este curso más adelante. Y por supuesto, la funcionalidad de comercio electrónico, que permite a tus clientes vender cosas en línea usando Webflow. Lo que distingue al flujo de trabajo de todos sus competidores es que ofrece hosting, lo cual es súper beneficioso para usted y sus clientes. Porque de inmediato, cuando termine su diseño, cuando obtenga la aprobación final de sus clientes, puede comenzar a hospedar inmediatamente. Puede integrar su nombre de dominio obstaculizado hosting directamente desde Webflow. O puedes comprar tu nombre de dominio para algo como GoDaddy, por ejemplo, y simplemente implementar ese nombre de dominio en tu alojamiento Webflow. Por último, si no quieres alojar sitios web con flujo de fuego, quieres alojarlo en sitios web externos como stinger completo o Host Gator o algo así, host azul tal vez. Entonces Webflow también tiene esa opción. Puedes exportar todo tu código y simplemente tenerlo bien preparado en una sola carpeta. Entonces puedes subir esa carpeta a una carpeta raíz en tu sitio web de alojamiento. Entonces déjame mostrarte qué fluye y qué puede hacer ahora mismo. Entonces aquí estamos en webflow.com y puedes visitar este sitio web solo para familiarizarte un poco lo que puede hacer Webflow, cómo se ve. Por supuesto, vamos a pasar por mucho en este curso, pero siempre es beneficioso que sepas al menos un poco antes de saltar al contenido mismo. Entonces, lo que tenemos aquí es cómo se ve Webflow. Entonces este es el modo de vista previa y tienes este ion aquí mismo, que vamos a tocar muchas veces en el curso. Aquí arriba tienes tus diversos puntos de interrupción, los cuales mencioné en la sección de diseño. Entonces este es el escritorio y en Webflow, todo empieza desde el escritorio y baja como ya se mencionó. Así que primero estás diseñando para escritorio y luego estás bajando a la tableta, lo cual es distinto. Esto es paisaje móvil y esto es retrato móvil. Y aquí puedes ver el tamaño de vista previa de tu ventana. Entonces, si tienes un portátil más pequeño, esto es realmente beneficioso porque aquí puedes ingresar algunos tamaños diferentes como por ejemplo 2000 píxeles de ancho de la pantalla. Y va a imitar el ancho de la pantalla de 2000 píxeles, aunque tu pantalla pueda ser de 13, 80 o algo así. Entonces aquí tenemos la función adenina que tus clientes pueden editar con bastante facilidad una vez que publiques el sitio porque simplemente puedes invitarlos o puedes compartir el enlace o cuando traduces y haga la transición de su sitio web de su diseño a su alojamiento, por ejemplo, entonces pueden editarlo directamente. Pueden cambiar el texto, pueden crear nuevos textos. Pueden copiar y pegar diferentes secciones del sitio web. Pueden crear contenido completamente nuevo a través de CMS, que vamos a tocar un poco. Y luego puedes ver los cambios guardados aquí mismo. Y aquí puedes publicar cambios para que el mundo los vea. Entonces es bastante sencillo una vez que lo domines, pero va a parecer complicado, pero te prometo que no es nada complicado. Solo piensa en ello como una gran herramienta de diseño, algo así como un Photoshop tal vez o algo así. Y va a ser muy fácil de entender para ti. Una última cosa que quiero referirme a Webflow es esto. Si quieres alojar tus sitios web en cualquier otro lugar, CMS y comercio electrónico, incluidos los foros, no va a funcionar correctamente porque todos esos elementos se combinan en funcionalidad de flujos de trabajo. Entonces, si quieres crear tus artículos CMS como lo vamos a hacer en este curso para todos esos autos y páginas detalladas de todos esos autos, tienes que hacerlo a través de Webflow. De lo contrario, no se conectará correctamente y no funcionará correctamente. Así que asegúrate de tenerlo en cuenta. La misma historia va para la funcionalidad de comercio electrónico del Webflow. Así que tienes que alojar los productos de tu cliente dentro de Webflow para que funcione. Y por último, quiero tocar foros. Foros como formulario de contacto que vamos a crear en esta clase está conectado a través de flujos de trabajo api. Entonces es enviar la información directamente a través de Webflow. A tu, digamos Gmail o lo que sea que estés recibiendo tu correo electrónico. Entonces eso tampoco va a funcionar correctamente. Pero si estás creando foros de contacto, simplemente puedes editarlos un poco más tarde. En algo así como, no sé, texto sublime puede ser o lo que sea tu editor de texto, si conoces solo un poco de código para que solo puedas apuntar ese correo electrónico. Entonces no es enviar ese correo electrónico a través de servidores de flujos de trabajo, sino directamente a través de su servidor, simplemente puede posicionar eso y solo eso directamente dentro de Gmail, por ejemplo, si está alojando tu correo electrónico en Gmail. Pero solo quería señalarlo y es muy importante si estás trabajando con tus clientes para decirles que si no quieren hospedar en Webflow, entonces CMS, comercio electrónico y los foros no van a funcionar directamente ahí. Entonces, una cosa a tener en cuenta para los sitios web estáticos, yo, las páginas que no se van a mover, van a permanecer completamente estáticas, como las páginas de destino son todas las demás páginas de este sitio web, excepción de esas páginas para varios autos diferentes. Eso va a cambiar. Así que tenlo en cuenta y solo deja que tus clientes sepan por adelantado en qué se están metiendo. Entonces aquí estamos de vuelta en el sitio web de flujos de trabajo. Y como mencioné, permítame simplemente desplazarme y mostrarle algunos ejemplos en cuanto a lo que puede crear. Aquí puedes ver el picker de color, así mismo gusto, digamos Photoshop o cualquier otra herramienta. Vamos a crear estas muestras de color como hicimos en Adobe XD. Aquí puedes ver lo publicado su nación. Por lo que puede publicar a través de dominio de puesta en escena, que se le permite hacer hasta por dos sitios web en el plan gratuito en Webflow. Y aquí puedes conectar tu dominio personalizado o tu hosting personalizado o lo que quieras directamente a través de Webflow para que puedas conectar tu dominio personalizado como lattice.com en este caso, y puedes alojarlo directamente en Webflow, como mencioné, y va a conectarlo todo por ti. Puedes publicar para seleccionar los dominios así, o puedes ir a Opciones Avanzadas y exportar código y cosas así. Entonces aquí donde dice publicar, puedes hacer click ahí y te va a mostrar la opción de código de exportación, que voy a mostrar un poco más tarde. Entonces, si empiezo a desplazarme hacia abajo, puedes ver que todos estos sitios web están creados o tener al menos algunas páginas que se crean en Webflow. Upwork se crea casi en su totalidad en Webflow, y sé que gamma road también se crea en Webflow. Para que puedas ver cuántos diseñadores están usando Webflow en este momento. Y así es como se ve una vez que empiezas a trabajar dentro del flujo de trabajo. Así que simplemente puedes hacer clic en Ajustar y se va a ajustar en tiempo real. Igual que cualquier otra herramienta de diseño. Y me recuerda mucho a Photoshop, sobre todo por la combinación de colores y el posicionamiento de todos estos diferentes elementos. Puede arrastrar y soltar elementos en la página y ser realmente específico. E incluso se puede introducir código personalizado en su interior. Como dije, si sabes codificar, si no, está completamente bien. Ni siquiera sabes codificar. Te voy a mostrar eso más tarde. Algún poder creativo que va mucho más allá de las plantillas. Entonces puedes ver que este es el CMS que vamos a tocar un poco para que puedas sacar contenido de tu biblioteca, que es lo que vamos a crear un poco más tarde. Así que vamos a crear esa página dinámica que tiene solo una página, una plantilla, que va a albergar el diseño y el contenido de todas nuestras diferentes páginas dinámicas. Así que recuerda que vamos a tener ocho autos diferentes, así que vamos a tener ocho páginas dinámicas diferentes. Pero en lugar de ir y crear ocho páginas diferentes de nuevo, o simplemente copiar y pegar elementos. Lo vamos a hacer todo dentro del CMS. Entonces es por eso que el sistema de gestión de contenidos o CMS como este, es beneficioso para tus clientes. Puedes lanzar tiendas de comercio electrónico personalizadas, como mencioné, para que puedas posicionar los precios y puedes poner diferentes opciones de color, botones, y cosas así. Podemos monetizar contenido solo para miembros a través de la membresía. Y puedes hacerla pop. Para que puedas ver todo tipo de animaciones diferentes aquí mismo. Y puedes conseguir realmente, muy específico con animaciones. Y vamos a tocar la animación es un poco más tarde. Pero básicamente podemos crear un curso completo sobre animaciones porque son muy avanzadas y pueden ser tan avanzadas. Pero al mismo tiempo pueden ser súper fáciles de crear. Todo depende de ti lo que quieras crear con las animaciones de tu sitio web. Entonces, si te desplazas un poco hacia abajo, está optimizado para marketing y respaldado por el diseño. Para que puedas ver algo como esto. Por qué mencionaron a tus clientes tal vez quieran agregar un nuevo texto, tal vez poner una nueva copia dentro y puedes ver aquí mismo, así que tenemos este botón Publicar. Entonces, una vez que edites tu copia, puedes hacer clic en Publicar y va a publicar ese cambio vivo. Para que puedas optimizar el SEO. Para que puedas agregar etiquetas de título, puedes agregar Meta descripciones. Puedes construir flujos con lógica, lo cual es realmente beneficioso, especialmente si estás usando algo como mesa de aire tal vez para obtener información de la mesa de aire directamente a través de tu web, sitio web completo. Y puedes conectar estos ejemplos de lógica personalizados algo así como Zapier. Entonces si el usuario hace esto, entonces haces esto y les mostraste esto. Para que puedas conectar todo tipo de cosas diferentes. Como por ejemplo, si el usuario me envía un correo electrónico, ponga esa dirección de correo electrónico de ese usuario en una base de datos llamada Marketing para los lunes o algo así. Así que puedes ser realmente específico y realmente creativo con lógica de Webflow y puedes conectar todas tus herramientas favoritas. Entonces, si estás usando Google Analytics, puedes, si estás usando el píxel de Facebook, puedes, si estás vendiendo a través de, digamos cursos a través de Teachable, también puedes hacerlo. Así que puedes hacer muchas cosas aquí mismo dentro de Webflow. Entonces puedes crecer porque está diseñado para el crecimiento a escala empresarial, especialmente si estás creando blogs más grandes. mejor esta no es la opción correcta para blogs que tal vez son nuevos tamaños porque a veces puede resultar engorroso porque esos sitios web grandes tienden a cambiar de página de vez en cuando, interactuando con diferentes elementos de vez en cuando. Entonces tal vez algo así como una solución personalizada sea genial. Pero hasta que el negocio en cada uno sea algo así como una agencia de noticias con miles de publicaciones de blog diferentes, publicaciones diarias, entonces Webflow es una gran opción para eso. Se pueden ver algunos sitios web que se crean en Webflow. Y básicamente el cielo es el límite cuando se trata de creatividad. Puedes ver made in Webflow y enterarte de todo respecto y ver qué crearon las personas. Tienen un gran recurso llamado Webflow University, y puedes ver sus tutoriales ya sea en webflow.com o en YouTube. Tienen un gran canal de YouTube y puedes verlo gratis hasta que estés listo para lanzarlo. Puedes construir tu sitio gratis y tomar todo el tiempo que necesites. Simplemente agregue un plan de sitio para más páginas y dominio acostumbrado cuando esté listo para el mundo. que veas por qué están poniendo esto gratis porque puedes construir, puedes aprenderlo, puedes prepararlo todo. Y luego cuando estés listo para, para el lanzamiento, justo entonces vas a pagar. Entonces hablando de eso, cubramos rápidamente los precios y veamos cómo se ve eso. Entonces, si voy a precios aquí mismo, puedes ver que tenemos planes de sitio. Contamos con starter, CMS básico, business y enterprise. Ahora esto puede ser un poco complicado. Así que los planes del sitio son excelentes para probar Webflow. Y cuando compras un plan de sitio pago para publicar, alojar y desbloquear funciones adicionales. Entonces esto básicamente te va a permitir publicar tu sitio web terminado, y para eso están los planes del sitio. Para que puedas ver lo que está incluido en el básico. Puede incluir el dominio personalizado cero elementos CMS. Entonces no es para CMS, 500 suscripciones mensuales al foro. Para que puedas obtener esa cantidad de gente a través tu correo electrónico y 50 gb de ancho de banda. Y para el CMS, puedes tener artículos CMS del 2000, que mencioné. Solo recuerda que tenemos ocho por ejemplo en este caso. Pero en nuestro caso, digamos que cuando el cliente venda ese auto, obviamente van a eliminar ese listado. Entonces aquí tenemos artículos CMS del 2000. Sólo tenemos ocho, pero vendimos uno, así que lo vamos a eliminar ahora tenemos siete, queremos agregar dos más. Entonces ahora tenemos nueve. Vamos a vender uno y eliminar uno. Entonces ahora tenemos ocho. Para que puedas ver los 2000, es realmente difícil de escalar, sobre todo para el negocio de este tamaño. Entonces $23 mensuales o si cambio aquí mismo a anual. Entonces esto se construye anualmente, así que 23 veces 12, y eso es lo que vas a conseguir. Entonces tenemos general y luego tenemos comercio electrónico, que una vez más te va a dar diferente funcionalidad. Entonces aquí tenemos mil artículos diferentes y 2000, 200,000 en volumen de ventas anuales. Y aquí tienes volumen de ventas ilimitado. Entonces, obviamente, como tus habilidades comerciales, vas a expandirte y agregar estos diferentes planes de sitio. Y obviamente cuando estás vendiendo estos sitios web a tus clientes, es importante guiarlos a través de todo esto para que entiendan que es mejor para ellos comenzar más pequeños. Entonces, si tu cliente no tiene ninguna página CMS, no quiere ningún contenido dinámico lo que esta planta funciona bastante bien. Pero en cuanto agreguen algún contenido CMS, tendrás que adquirir este plan. Tendrán que comprarlo una vez más porque alojarán su sitio web en el flujo de trabajo si quieren CMS. Si no quieren CMS, solo quieren un hosting regular, entonces esta es probablemente una buena opción. Pero si no necesitan ningún tipo de CMS, quizás incluso esta no sea una buena opción porque se pone bastante cara cuando se agrega esto. Porque si quieren cambiar lo que necesiten para crear un plan de diseñador al que vas a llegar en solo un segundo para que hagan cualquier cambio, suban nuevas imágenes, las reemplacen y cosas así. Entonces tal vez incluso esta no sea una buena opción, pero realmente depende de usted y su cliente estar de acuerdo. ejemplo, uno de mis clientes no quería alojar su sitio web en Webflow, pero por cada cambio, me contactaron y les cobré por cada cambio en el sitio web. Pero es justo cómo estás de acuerdo con tus clientes porque para ese cliente en particular, acabamos de hacer creo que Dan cambia a lo largo de un periodo de un año. Entonces no es realmente tan difícil, pero si tu cliente requiere cambios constantes en su sitio web, quizás comprar alojamiento Webflow sea una buena opción para ellos. Contamos con espacios de trabajo para freelancers y agencias. No vamos a tocar demasiado para esto. Pero obviamente, si eres parte de una agencia o estás creando una agencia, entonces esto es lo que hay que explicar. Y aquí tenemos aún más. Entonces. Contamos con diseñador de producto, que es lo que nos interesa el discurso. Y tenemos la estructura, navegamos sus símbolos, todo tipo de cosas diferentes. Entonces vamos a hablar de eso en sólo un segundo. Solo quiero ver si puedo encontrar precios aquí mismo. No creo que pueda. Si voy a ver dashboard y voy a cuenta y voy a plantas. Entonces era ligero pero va a cancelar en esta fecha porque quiero actualizar a pro, pero no quería actualizar antes. Entonces, cuando canceles tu plan, puedes pagar mensualmente o puedes pagar anualmente. Para que veas que este es mi plan actual. Puedes comenzar de forma gratuita. Como mencioné aquí, tienes dos proyectos. Tenemos puesta en escena libre, pero no tienes un código de exportación, así que tendrás que pagar por ti para poder exportar código, sin etiquetado blanco. Y lo que eso significa es que puedes agregar tu propio logotipo al editor y eliminar la marca de Webflow, sin protección con contraseña del sitio y sin panel de control del equipo. Entonces tampoco tienes eso aquí, pero tienes en este plan, por qué elegí este plan es que mis clientes puedan exportar código y para mí tener diez proyectos, lo cual creo que es suficiente para a mí. Una vez más, puedes construir esto de forma manual o anual, o construir esta mensualmente como quieras, pero tendrás que comprar esta planta, como mencioné, si quieres más de dos proyectos y si quieres poder exportar código, si no quieres hacer nada de eso. Si solo quieres aprender, esto, empezar a plano plano está completamente bien. Puedes aprender Webflow. Puedes crear tantos de estos proyectos como quieras. Solo tienes que eliminar algunos de ellos ya que llegas a ese límite de dos proyectos. Y luego una vez que consigas algunos clientes iban a ponerse en marcha, entonces puedes adquirir el plan de consulta y simplemente continuar ahí donde tengas diez proyectos o cuando eso se vuelva pequeño, ojalá pronto para ti, entonces puedes ir a sondear. Entonces una vez más, para cubrir rápidamente, hay que comprar plantas de cuenta si quieres tener más de dos proyectos y poder exportar código. Si quieres hospedar en Webflow, no tú sino tus clientes, ellos tendrán que comprar planes de hosting. Y si quieren poder realizar cambios en sus sitios web por sí mismos, también tendrán que adquirir estos planes de cuenta para que puedan hacer cualquier tipo de cambio y ser capaz de agregar imágenes por sí mismos, por ejemplo, y perder el tiempo con el CMS y cosas así. Entonces tienes que explicar esto a tus clientes. Esto es solo un gasto normal para el negocio. Entonces cualquiera que esté haciendo negocios, yo, yo, por ejemplo estoy pagando por Teachable para poder albergar todos mis cursos. Estoy pagando por Gmail para poder tener correo electrónico comercial. Estoy pagando al flujo de trabajo, como pueden ver en este ejemplo aquí mismo, estoy pagando por Plan de Negocios por ejemplo así que todo es parte del negocio y solo tienen que saber que este es su gasto. Tengan esto en mente. Tendrán que comprar dominio. Tendrán que adquirir hosting, en todo caso, ya sea a través de Webflow o a través hosting girl, Bluehost, Host, Gator, lo que sea que tengan que comprar que también son dominio. Tendrás que comprar tu dominio a través GoDaddy o a dominios de Google, o a través de Webflow. Entonces es de cualquier manera tendrán que comprar estas cosas. Webflow solo le brinda esta opción adicional donde puede diseñar, construir, organizar, lanzar y alojar todo en un solo lugar. Entonces, si tus clientes quieren hacer eso, está completamente bien. Si no, entonces es tu responsabilidad explicarles. Entonces toda esta funcionalidad no va a funcionar. Si no hospedas en Webflow. Es así de simple. Entonces ahí vamos. Te explicamos Webflow. Ojalá esto tenga más sentido para ti ahora, si no se asegura de explorar esto una vez más, mira este video una vez más. Solo lo veremos por ti mismo y crearemos tu cuenta ahí. Una vez más, es completamente gratis para ti comenzar hasta dos proyectos sin expertos en código. Pero te voy a mostrar cómo se ve eso en este curso. A continuación, vamos a preparar nuestros archivos y comenzar a crear nuestro proyecto Webflow. Entonces te veré ahí. 166. Configurar el proyecto: Bien, ahora preparemos nuestros archivos de Adobe XD y asegurémonos de traducirlos a través de Webflow. Y te voy a enseñar cómo iniciar un nuevo proyecto. Así que comencemos. Entonces aquí estamos en Adobe XD y este es nuestro proyecto, y aquí es donde lo dejamos fuera. Entonces una vez más, aquí tenemos flujo de usuarios, tenemos wireframes de papel que hicimos. Contamos con sitemap y arquitectura de contenido. Tenemos nuestro mood board, y aquí tenemos nuestro diseño. Pero esto no lo veías antes en los videos. Entonces esta es la guía de estilo y cómo puedes crear algo como esto. Es simplemente súper simple. Y antes que nada, por qué crearías algo así en primer lugar. La guía de estilos es mucho más fácil simplemente copiar y pegar estilos y elementos de si es necesario, y solo para mantener y tener todos sus elementos de un vistazo. Entonces aquí puedes ver que creé colores, tipografía, iconografía, logo, botones y tarjetas de autos. Entonces, ¿por qué es importante esto? Bueno, es mucho más mirable para mí crear esto ahora en Webflow. Y eso lo voy a mostrar en sólo un segundo. Pero antes de hacer como crear alguna delicia esto, simplemente creas, digamos para la tipografía, creas todos estos elementos. Y si quieres cambiar algo, simplemente da clic aquí y va a aplicar ese cambio como te mostré en este caso. Entonces para los colores, hice exactamente lo mismo porque quiero poder copiar estos códigos hexagonales ya sea desde aquí o desde aquí. Pero es mucho más sencillo tenerlos de un vistazo, tanto para ti como para tus clientes. Para desarrolladores, si estás enviando esto a para un mayor desarrollo. Pero en este caso, para nosotros solo para recordarnos lo que implica este proyecto y lo que está incluido en este proyecto. Entonces lo primero es lo primero, déjame cambiar a desbordamiento. Y aquí tenemos mis lados. Este es el lugar de puesta en escena que creé para poder guiarte a este curso. Y en este caso, voy a crear un nuevo sitio cual se encuentra justo aquí, que está en mi tablero de Webflow. Entonces, si hago clic aquí mismo, y puedes ver puedes comenzar con las plantillas. Y tienes estas plantillas, que son plantillas premium, que están hechas por una comunidad de diseñadores. Y puedes ir con carne en Webflow y aquí donde dice los recursos tienes plantillas. Entonces, si hago clic derecho y abro esto en una nueva pestaña, puedes ver todo tipo de plantillas diferentes, pero en su mayoría son premium. Pero puedes filtrar a través de gratis aquí mismo en la parte superior. Y puedes ver todo tipo de diferentes plantillas gratuitas aquí mismo. Pero la mayoría de las plantillas buenas y excelentes son premium. Para que puedas buscar por categoría popular CMS, comercio electrónico. Puedes encontrar todo eso o puedes hacer clic en conocer en Webflow para inspirarte. Y va a mostrar algunos sitios web increíbles que se crean en Webflow. Pero de vuelta en nuestro tablero, lo que voy a hacer es simplemente comenzar con una plantilla en blanco. Se puede ver, claro que es gratis. Entonces cuando hago clic ahí mismo, tengo que darle un nombre. Entonces en este caso voy a darle el nombre de un sitio web exclusivo de autos araña solo para distinguirlo del original que creé. Haga clic en crear sitio. Y va a empezar a crear. En este caso. Aquí somos recibidos con nuestros diseñadores. Entonces, antes de seguir adelante, solo quería hablar un poco más sobre este diseñador. Qué hace, si algunas funcionalidades que debes conocer y conocer. Y qué tipo de código se requiere para que al menos entiendas cómo funciona. Entonces aquí estamos de vuelta en nuestro diseñador y así es como se ve todo en Webflow. Empezó desde aquí. Cuando pasa el cursor sobre este logotipo de flujo de trabajo, puede hacer clic y le mostrará un panel, configuración del proyecto y el editor. Entonces, si hago clic afuera de aquí, tenemos todo tipo de elementos que podemos agregar a nuestra página. Pero donde agregarlos, puedes dar click aquí mismo para abrir todos estos elementos. Entonces tenemos elementos y layouts, que son básicamente plantillas prefabricadas que puedes usar. En este curso, vamos a empezar todo desde cero, pero puedes usar algunos de estos elementos si quieres. Son como kits de interfaz de usuario. Simplemente puedes arrastrarlos y soltarlos dentro. Entonces aquí tenemos maquetación, elementos básicos, tipografía, CMS, medios, foros, componentes, todo tipo de cosas diferentes ahí mismo. Entonces, para que puedas agregar cualquier cosa, tienes tres opciones. Entonces, si quiero agregar una sección, puedo hacer clic y arrastrar y soltar aquí mismo, o dejarme quitarla de aquí. Lo que puedo hacer es, digamos golpear una vez más Sección. Arrástralo aquí mismo al Navegador, que es como un panel de capas. Y se encuentra justo aquí. Se puede ver en una cosa final. Y vamos a hacer eso todo el tiempo. Cuando selecciono el cuerpo y presiono Control K o Comando K, entonces puedo escribir algo así como sección, presionar Enter o Retorno, y lo va a publicar aquí mismo. Vamos a usar eso a lo largo de este curso, así que asegúrate de acostumbrarte una vez más Control K. Así que dentro de esa sección, voy a poner un bloque div, por ejemplo dentro del blog div, por ejemplo, Control Una vez más, voy a escribir H para el encabezado y dar clic en mi mouse. Y digamos que este es el H2 entonces por debajo de ese rubro Control K, IMG para la imagen. Y debajo de ese control de imagen K, Digamos párrafo. Y puedes ver lo sencillo que es esto m porque esto es HTML. Solo recuerda en HTML, todo va de arriba a la izquierda hacia abajo. Entonces así es como HTML apila las cosas. No es uno al lado del otro. O si lo abro aquí en el navegador, puedes ver dentro de esta sección tenemos nuestro bloque div, que va a contener todos nuestros elementos. Entonces dentro del bloque div, tenemos encabezado que es distinto. Tenemos imagen y tenemos párrafo, y no son uno debajo del otro como están en Photoshop o XD o Figma o cualquier otra herramienta de diseño, sino que están uno debajo del otro. Entonces tenemos que crear algo que se llama eje y. Y vamos a llegar a ello en un poquito, un poquito después. Pero antes de hacerlo, quiero mostrarles cosas adicionales. Entonces, lo que tenemos aquí mismo, esta caja son símbolos, y los símbolos son básicamente componentes que vamos a tocar un poco. Entonces, si te cambio a XD una vez más, aquí tenemos un componente para la navegación y luego tenemos un componente para nuestro formulario Contáctenos y para el mapa y la ubicación, y para el pie de página, e.g y va a ser lo mismo aquí en Webflow, donde vamos a crear estos componentes una vez que realmente empecemos con nuestro diseño. Debajo de eso, tenemos este Navigator, que es lo que ya les mostré. Es algo así como tu panel de capas. Y aquí puedes colapsar todas las vidas vivas o abrirlas aquí dentro, puedes desanclar el navegador y se va a mover, pero no te recomiendo que simplemente haga clic en pin el navegador y va a se quedan ahí todo el tiempo. Puedes flotar y luego puedes ajustar el ancho del navegador, algo así. Si quieres ver más del navegador en auto, debajo de eso tenemos las páginas. Entonces aquí vas a agregar tus páginas adicionales, nuevas páginas, páginas de utilidades, tenemos contraseña y cuatro o cuatro redirecciones. Puedes agregarlo a esos. Puedes hacer click ahí mismo y puedes agregarlo como se ve. O si quieres crear una nueva página, entonces puedes hacer clic aquí mismo. Y si quieres crear una nueva carpeta, lo cual obviamente es útil por muchas razones diferentes. Pero por ahora, sólo vamos a crear nuevas páginas para este sitio web. Debajo de eso tenemos el CMS, que es el sistema de gestión de contenidos. Vamos a tocarlo un poco más tarde, así que tendremos que crear una nueva colección. La colección va a ser autos en venta o simplemente autos, lo que sea. Y luego dentro de esa colección, vamos a crear una página o un elemento y luego simplemente recrear esa página de nuevo. Una vez comenzamos a crear nuevos datos y nueva información y ponerlos dentro. Debajo de eso, tenemos comercio electrónico. Y se puede ver lo que dice aquí mismo, pero no vamos a hacer con el comercio electrónico en el discurso. Debajo de eso, tenemos activos. Aquí. Vas a poder arrastrar y soltar todos tus activos. Y en realidad, hagámoslo ahora mismo. Entonces si recuerdas, exportamos estos aquí tenemos todas las imágenes de nuestro proyecto aquí tenemos todos nuestros íconos de proyectos. Así que simplemente voy a seleccionarlos todos, hacer clic, arrastrar y soltarlos dentro. Y puedes ver que va a poblar con todos estos diferentes íconos. Y voy a hacer lo mismo con mis imágenes. Así que simplemente selecciona todas mis imágenes, arrástralas y suéltalas dentro. Ahí vas. Y va a subir todas tus imágenes y posicionarlas. Están hablando de imágenes. Lo que puedes hacer o iconos es hacer click en este reloj. Así que cuando se ciernen va a mostrar este dentado en la esquina superior derecha. Entonces cuando haga clic ahí mismo, va a mostrar, ¿ la imagen es descriptiva o decorativa? Porque es descriptivo porque está tratando de explicar algo. Voy a decir algo así como hombre parado en la sala de exposición de autos así y simplemente cerrarlo. ¿Por qué hice eso? Si hago clic una vez más para abrirlo, es por personas que tienen impedimentos visuales y utilizan lectores de pantalla para puedan navegar por el sitio web. Entonces por eso estás usando esto. Y si hago clic aquí mismo, agregue otros adicionales para que gente cierre el trato en ventas de autos, venta de autos o algo así. Ahí vas. Entonces aquí vamos a escribir algo como personas exploran una sala de exposición de autos araña. Así. Y aquí vamos a tener préstamos para una araña autos exclusivos, algo así. Entonces aquí lo que podemos hacer es crear algo así como Mercedes Benz si clausula. Ahí vas. Esto va a ser una imagen o coloración de un coche araña. Coche. Imagen tal vez, o porque es decorativa, lo que puedo hacer es deshacerme de esto y simplemente se cambia a decorativa. Por lo que no transmiten significado y no requieren textos alt, por lo que solo están ahí con fines de decoración. Pero como esto es, voy a escribir algo como Audi RS five y cambiarme a mi rango sobre, que va a ser este , Range Rover, Vogue. Ahí vamos. Entonces ahora el texto alt va a mostrar estos y se va a traducir muy bien en mostrar esto a mi público. Déjame ver estos beneficios. La imagen se ve un poco apagada porque tiene la opacidad en ella. Entonces déjame deshacerme de él. En realidad. Déjame cambiar a Adobe XD. Déjame encontrarlo aquí está. Y si te muestro es al diez por ciento, pero quiero hacerlo en Webflow. Así que voy a expandirlo aquí, golpear Control o Comando E. Y tenemos JPEG es imágenes finas, eso está bien. Exportación. Y luego traerlo hasta el 10% aquí. Ahora bien, si cambio al flujo de trabajo y te llevo de vuelta a mis autos, ya puedes ver, está bien. Entonces lo voy a encontrar aquí mismo. Haga clic en él y presione Eliminar. Confirmar, Eliminar. Ahí vamos. Y ahora puedo volver a mi carpeta, hacer clic en arrastrar y soltarla dentro. Y ahora lo va a posicionar al 100 por ciento. Porque como dije, quiero poder ajustar esos ajustes. Qué debes hacer por todas tus imágenes. Pero no te voy a molestar demasiado con el discurso, pero es solo la mejor práctica para hacerlo. Cada una de tus imágenes o iconos en este caso, debe tener texto alt. El texto alt va a ser llevado del nombre. Entonces por eso los estamos nombrando en XD. Tan conveniente icono de auto, eso es lo que va a ser. Descripción o el decorativo. Para que puedas escribir una descripción de la imagen. El texto alt es utilizado por los lectores de pantalla y, o Si una imagen no se carga. Entonces va a usar el texto alt, y estos son los textos antiguos que vamos a crear. Así que simplemente puedes usar algo como esto. Tan conveniente icono de coche. Entonces puedes crear eso. Entonces Kuan, ícono de auto indulgente. Y va a usar los textos antiguos de ella. Entonces es tu trabajo revisar todas tus imágenes, todos tus íconos, todos tus logotipos e incluidos ahí. Y hablando de logos, no creo que exportemos logo aquí. Creo que no lo hicimos. Así que volvamos a XD muy rápido. Acercar un poco. Tengo mi logo ahí, pero lo voy a hacer directamente desde aquí. Así que en vez de JPEG, vamos con SVG y ponlo dentro de nuestras imágenes. Y si cambiamos a mi flujo web, ahí vamos. Volver a mis imágenes y ¿dónde está mi logo? ¿Ahí? Está destinado a arrastrarlo y soltarlo dentro. Y ahí vamos Ahora tenemos nuestro logo. Entonces, una vez más, si quieres arrastrar alguna de estas imágenes, digamos ésta, simplemente haz clic, arrastra y suelta dentro. Y se puede ver que va a colocar, ser colocado ahí mismo. Entonces esas fueron nuestras imágenes. Y finalmente, tenemos algunos ajustes aquí mismo. Para que puedas ver las copias de seguridad generales. Flujo de trabajo de comercio electrónico crea automáticamente copias de seguridad para usted Y ahí va a hacer una copia de seguridad de todos tus elementos. Pero básicamente eso es todo a partir de ahí. Entonces aquí tenemos auditorías, aquí tenemos Búsqueda Personalizada, así que encuentra cualquier cosa. Aquí tenemos videos tutoriales que puedes encontrar allí. Y aquí tenemos la sección de ayuda. Entonces si un cierre todo y solo deja mi navegador abierto. Lo que tengo aquí mismo es la vista previa, así que alternó la vista previa. Y así es como va a quedar tu sitio web en vivo. Y puedes hacer clic a través todo tipo de puntos de interrupción diferentes para ver cómo va a quedar tu sitio web en esos puntos de interrupción. Adicionalmente, lo que puedes hacer es digamos que estoy en una tableta, tienes este asa. Así que cuando haces clic y arrastras, va a cambiar entre tus tallas. Puedes simplemente mirar aquí mismo en la parte superior mientras arrastro lo que está pasando. Entonces va a cambiar entre esos tamaños. O como mencioné, puedes dar clic aquí mismo y escribir algo así como 2000 píxeles solo para ver cómo va a quedar el sitio web en 2000, o digamos 4,000 píxeles. Y lo puedes ver ahí mismo. Entonces solo va a imitar eso y solo te va a mostrar eso. Entonces si vuelvo a volver a aquí, lo que vamos a hacer a continuación es dejarme guiarte a través de este panel y vamos a parar el video ahí porque no quiero que sea demasiado confuso para ti y demasiado tiempo. Entonces este video, esta sección trata sobre los estilos. Cuando coloco el cursor aquí mismo puedes ver que es el panel de estilo. Este es el panel Configuración. Se trata de los gerentes de estilo. Entonces a medida que agregues tus clases, vamos a llegar a ella en apenas un segundo. Todas esas clases van a ser listadas aquí mismo. Y por último, esta es tu sección de animación. Vamos a tocar todas estas secciones a lo largo del curso, pero sobre todo en esta sección de estilo. Entonces, básicamente, cómo puedes mirar Webflow es de este lado, es todo HTML, así que todo sobre la estructura, cómo se va a colocar todo en la página. Y aquí a la derecha está todo CSS. Entonces, cómo va a quedar todo y cómo va a ser estilizado. Entonces. Lo que puedo hacer en este caso, por ejemplo vamos a deshacernos de todos estos elementos. Así que solo presiona Eliminar en todos ellos. Y solo trabajemos en nuestro rumbo. Vamos a darle una clase un poco más tarde. Entonces en el siguiente video vamos a tocar eso. Pero aquí puedes cambiar la forma en que se muestra. Digamos que quiero poner margen superior a 100 píxeles. Puedo hacer clic aquí mismo, fijar 100 píxeles, y va a colocarlo aquí mismo. Después en la parte inferior, mismo tamaño. Entonces para el tamaño, Digamos que quiero crear otro bloque div por debajo de eso. Así que dale Control K div, solo para que veas lo que estoy haciendo. Y tal vez pueda posicionar esto para que sea emparejamiento. No lo sé, 60 pixeles quizá. Y luego usa el color aquí mismo para algo como esto. Ahí vas. Y para la talla, vamos a darle un ancho. Vamos a darle una altura en realidad de 200 pixeles, solo para que veas lo que estoy haciendo. Y en realidad vamos a darle un codazo aún más hasta que sepa por la altura, por el ancho, digamos 500. Entonces aquí tenemos una caja que es el bloque div, 500 ancho 200 píxeles. Y si empiezo a expandir esto así manteniendo pulsada Shift y mi tecla de flecha izquierda, puedes ver cuánto se está expandiendo. Si agrego el margen, que es el espacio fuera de tu objeto, a la izquierda, puedes ver cómo se ve. O a la derecha va a ser exactamente lo mismo y el relleno es el espaciado dentro de tu objeto. Entonces si sigo adelante y dentro de este blog div escribiendo Control K y escribo algo así como textblock, ponlo dentro. Se puede ver que el texto está ahora dentro. Entonces si escribo algo así, es nuestro botón, se puede ver que el texto va a estar ahí. Solo puedes imaginarte que este es nuestro botón tal vez. Entonces la altura es, digamos 100 pixeles y el ancho es digamos a 50. Ahí vas. Entonces ya puedes ver cómo empuja el texto alrededor. Pero también hay otra manera de arreglarlo, que se llama Flexbox. Así que cuando haga clic aquí y vamos a tocar mucho Flexbox a lo largo de este curso. Se puede cambiar a través de horizontal y vertical. Y aquí puedes posicionar cómo se colocan tus elementos en la página para que veas lo sencillo que es eso. Y si ajusto un poco esto, se puede ver que ahora tenemos algún tipo de botón aquí dentro. Entonces este es el bloque de visualización, display flex, display grid, display, inline-block. Esta es la línea en el valor predeterminado para el texto, y esto es todo para oculto. Entonces, si hago clic ahí, va a ocultar todos los elementos que están dentro de este bloque div, incluido el bloque en sí. Espaciado, como ya expliqué, tamaño, ya voy a explicar. Entonces este es tu peso, tu altura, este es tu ancho mínimo y tu altura mínima. Y vas a hacer esto por ejemplo para tamaños de pantalla más pequeños, digamos para pantallas móviles realmente pequeñas, no quiero que mis elementos sean más pequeños que este tamaño en ancho o alto. La anchura máxima o la altura máxima están haciendo exactamente lo contrario de eso. Entonces, por ejemplo no crezca más grande que, digamos, 1,300 píxeles de ancho, por ejemplo, luego desbordamiento va a mostrar elementos en su interior. Vamos a tocar eso un poco más tarde. Tenemos las opciones de relleno, que son excelentes para las imágenes. Te voy a mostrar eso más tarde también. Tenemos el posicionamiento, por lo que tenemos estática relativa, absoluta, fija y pegajosa. Cubriremos la mayoría de ellos en este curso. Entonces tenemos la topografía va a cubrir eso mucho. En la siguiente lección. Tenemos los fondos para todo tipo de elementos diferentes. Entonces tenemos radio de borde, tenemos los bordes, y finalmente, tenemos los efectos y animaciones aquí mismo en la parte inferior. Aquí es donde realmente voy a detener este video. Porque si entro en muchos más detalles en este video, video va a ser mucho más largo que 20 min. Ahí está ahora mismo. Así que pasemos al siguiente video y no te preocupes por ello. Si parece demasiado confuso en este momento, va a ser mucho más claro una vez que realmente empecemos a trabajar en Webflow. Solo recuerda, lado izquierdo es el HTML, que es una estructura. derecha se encuentra el CMS y las animaciones pueden ser js, que es escritura amarilla. Entonces vamos a tocar todo en este curso. No se deje intimidar si no sabe lo que está pasando. Si solo estás un poco confundido, va a ser súper simple, te lo prometo. Y te veré en el siguiente video. 167. Creación de guía de estilos: Guía de estilo. Ahora vamos a moverlo dentro del flujo de trabajo y crear nuestra guía de estilo. Entonces aquí estamos en Webflow y voy a tratar de hacer esto lo más rápido posible, pero aún así tratar de guiarte en tantos detalles como sea posible como pueda. Entonces una de las primeras cosas que vamos a hacer es en realidad agregar mis colores en. Entonces lo que voy a hacer es seleccionar el cuerpo, que es la etiqueta corporal. Y una vez más, si te cambiamos a Adobe XD, así. Entonces aquí tenemos la página, solo imagínala como así nuestro puerto en este caso, pero es solo una página. Entonces todo lo que está dentro de esta página está dentro de la etiqueta del cuerpo. Entonces eso es muy importante de entender. Y la estructura va algo así. Entonces aquí tenemos, si hago clic aquí, tenemos el nav, tenemos el héroe, quiénes somos, y así sucesivamente y así sucesivamente. Todos estos son secciones. Dentro de las secciones, se pueden ver contenedores. Entonces solo puedes imaginar que esto se extiende a través de todo tipo de, llamémoslo así. Se extiende completamente desde el borde izquierdo hasta el borde derecho. Esa es una sección. Contenedor es en realidad esto, que es de 1,200 píxeles de ancho que explicamos. Y luego dentro de ese contenedor tenemos diferentes bloques div, que de nuevo son, diferentes contenedores que están conteniendo esta información en su interior. Probablemente parezca demasiado confuso por el momento, pero no te preocupes por ello. Te prometo que no lo será. Entonces una vez más, aquí tenemos sección que va del borde izquierdo al borde derecho. Tenemos contenedor que contiene contenido para no ir más ancho que 1,200 píxeles. Y luego tenemos contenedores adicionales, también llamados bloques div. Este es uno de ellos, por ejemplo, que contiene el contenido y aquí lo puedes ver. Entonces contenido de héroe, y esta es otra para imagen de héroe porque tiene tres imágenes diferentes en su interior. Así que vamos al interior de Webflow y comencemos a agregar nuestros colores, como mencioné. Entonces si me cambio a aquí, desplácese un poco por aquí, este lado, lo que tenemos son los colores. Entonces lo que puedo hacer es donde dice tipografía, puedo empezar a agregar mis colores, o simplemente puedo ir, Veamos fondos. Incluso puedo ir ahí. Y lo que quiero hacer es cambiarte a XD. Y primero lo primero quiero agregar este color de cuerpo. Entonces déjame copiarlo, hacer clic derecho y copiar. Cambiar a Webflow. Seleccione este texto aquí mismo. Control V para pegarlo. Y se va a pegar en ese color de cuerpo para agregarlo, déjame cambiarme aquí para que puedas verlo un poco mejor o aquí mismo en la materia. Entonces lo pegué codificación de efectos. Voy a dar click aquí mismo y voy a escribir el color del cuerpo así. Presiona Enter y va a agregar ese color de cuerpo. A continuación tenemos el color blanco. Entonces voy a cambiar todo el camino a blanco. Da click aquí y escribe algo así como blanco puro porque eso es lo que teníamos en XD. Entonces si cambio a XD, lo que tenemos a continuación es gris claro. Así que haga clic derecho, Copiar, vaya a Webflow y simplemente seleccione Pegar, Entrar. Da clic aquí mismo, escribe en gris claro. Y yo no uso guiones, pero tú puedes. Entonces realmente depende de ti cómo vas a usar esto. A continuación tenemos gris oscuro. Entonces voy a entrar aquí mismo. Haga clic en gris oscuro. Puedes ver que Webflow te da algunas indicaciones qué tipo de nombres quieres usar. Copia y pega mi color n. y para este, quiero darle este nombre. Entonces H tres párrafo. Entonces H tres párrafo. Entonces sé cuál es y dónde usarlo. Entonces tenemos éste. V, haz clic en el Plus oscuro añadiendo color. Y luego tenemos nuestro azul principal. Vuelve aquí. Agrégalo aquí. Entonces azul principal. Y finalmente tenemos nuestro color de portada. Así que cópialo, pégalo, da clic aquí y llámenlo hover color. Ahí vamos. Ahora que tienes todos nuestros colores, vamos a aplicar estos colores de cuerpo. Entonces cuando flote, puedes ver cómo se ven. cuerpo se selecciona en el navegador se aplicará el color de la carrocería y va a contener el color del cuerpo, que va a ser exactamente el mismo que nuestros diseños aquí. Así que pasemos ahora a la tipografía. Y es por eso que en realidad creé esto. Entonces si me acerco solo un poquito para que lo veas un poquito mejor, algo como esto. Entonces, antes que nada, tenemos que integrar las fuentes Poppins. Entonces, para que podamos hacer eso, déjame esconderme. Para esta parte se puede ir aquí mismo, clic y ir a Configuración del proyecto. Dentro del sitio web actual exclusivo de spider, tienes todo tipo de opciones diferentes. Entonces para el general, puedes ingresar todo tipo de cosas diferentes aquí mismo. Y para el Fab Icon, realmente te recomiendo que subas este clip web es para dispositivos iPhone cuando se guardaron en especie de marcador. Entonces solo va a mostrar que solo sube a 56 por 256 pixel imagen de tu logo, tal vez cinco, yo puedo hacer lo mismo. Entonces 32 por 32, solo sube ahí. Esta es la zona horaria en la que se encuentra, marca Webflow, visión general y todo tipo de cosas diferentes. Entonces lo que me interesa aquí mismo es hospedar. Puedes agregar estos planes de hosting. Como platicamos, Editor es quien es capaz de agregarlo. Planes y facturación es que puedes agregar los planes de sitio de los que hablamos. Seo es algo que vamos a tocar un poco más tarde. Así que las etiquetas de certificación del sitio de Google y así sucesivamente y así sucesivamente. Entonces tal vez puedas agregar un mapa del sitio personalizado si lo tienes aquí. Y puede deshabilitar la indexación de subdominios de Webflow. Ahora bien, por qué esto es importante es que si quieres lanzar este sitio web para vista previa, no lo va a indexar. Entonces Google no va a poder encontrarlo hasta que permitas que lo encuentre. Eso va a impedir tus usuarios visiten el sitio web antes de que esté listo. Entonces por eso está ahí. Entonces tenemos los formularios. Entonces aquí dentro de un formulario puedes agregar un nombre extranjero, enviar envíos al correo electrónico que quieras. Tus envíos para pasar, línea de asunto responde a las plantillas de correo electrónico de dirección para que puedas poner todo eso en, recuperar la validación para detener integración de formularios de spammers formados. Para que puedas crear diferentes integraciones de formularios de diferentes proveedores en línea. Contamos con respaldos, integraciones. Entonces esto es lo que mencioné para Google Analytics, por ejemplo Google Optimize para Google Maps. Se requiere la clave Api para usar Google Maps en los sitios web de Webflow, que es lo que vamos a crear un poco más tarde. Para que puedas crear una clave API JavaScript de Google Maps y pegarla aquí mismo. Y voy a revisar nuestra guía de mapas un poco más adelante cuando realmente lleguemos a ella, facebook pixel para rastrear el acceso a la API, puedes generar el token API y conectarlo con todo tipo de diferentes proveedores externos que luego van a hablar a través de esta API a través de Webflow. Web hooks, puedes adjuntar tus web hooks, están al aire libre, autorizo aplicaciones. Y entonces finalmente, el código personalizado es, aquí no es donde vas a exportar tu código personalizado. Voy a compartirlo en sólo un segundo. Pero aquí, cuando hago clic en Publicar, puedes ver de qué hablamos antes. Por lo que va a publicar a esta etapa dominio de forma gratuita. O puedes ir al dominio personalizado y luego conectar el dominio que compraste. código personalizado está aquí. Si quieres agregar alguna funcionalidad personalizada, como tal vez quieras agregar, no lo sé, pop-ups adicionales tal vez, o unas funciones de chat diferentes que van a hablar de chats externos y esas cosas así. Entonces eso es lo que vamos a importar aquí. Entonces aquí se puede ver algo que se llama cabeza Código. cabeza es el elemento que va por encima del cuerpo. Se encuentra en la misma página y el cuerpo y la cabeza funcionan para cada página de su sitio web, pero acababa de ir por encima de ella. El contenido no va dentro de la cabeza, sino que el código va dentro de la cabeza. El contenido va dentro de la etiqueta body. Y luego tenemos Footer Code, que una vez más va todo el camino abajo y por dentro pueden estar, se puede ver en el código antes los textos corporales o antes de que termine la etiqueta corporal, y va en el parte inferior de la página. A veces vas a agregar diferentes estilos en la alimentación. A veces vas a agregar diferentes estilos y más, dependiendo de lo que intentes integrar en tu sitio web. Lo que nos interesa aquí mismo son las fuentes. Entonces, si hago clic en las fuentes, podemos integrar fácilmente las fuentes de Google aquí mismo. Si tu cliente tiene fuentes personalizadas, simplemente puedes descomprimirlas y subirlas aquí mismo. Les vamos a mostrar fuentes de Adobe son un poco diferentes porque una vez más, tienes tu token API y simplemente pégalo aquí mismo, guarda token. Y va a sacar esa fuente de las fuentes de Adobe y mostrarla en Webflow. Nos interesan las fuentes de Google porque quería mantener las cosas simples y lo que necesitamos es Poppins. Entonces si voy a Poppins, ahí vamos. Lo que necesito es regular. Necesito esto audaz, y digamos varios cientos, lo cual es audaz. Esto es regular y esto es medio, por ejemplo, así que simplemente puedo hacer clic en Agregar fuente. Se agrega, y puedo dar click aquí mismo para volver con mi diseñador, va a cargarlo aquí mismo. Y ahora podemos comenzar a agregar nuestras fuentes. Para ello, lo que voy a hacer antes que nada, es crear esas secciones que mencioné. Entonces, si te llevo de vuelta a XD una vez más, vamos a crear esta sección que es de ancho completo. Y luego vamos a crear un contenedor que es de 1.200 píxeles. Entonces, vamos a presionar la tecla Control y tecleemos, digamos sección. Aquí, voy a agregar una clase de sección. Pulse Intro. Y esta clase de sección va a ser la misma para todas nuestras secciones a lo largo de nuestra página web. Y va a contener todo tipo de elementos diferentes que vamos a poner en su interior. Entonces no voy a tocar estos elementos en absoluto. Quizás lo que pueda hacer es tal vez agregarlo de ancho completo. Entonces ancho máximo de, digamos, 100 por ciento. Y simplemente puedes escribir por ciento, presionar Enter. Y Webflow es inteligente así porque solo va a reemplazar el porcentaje de ancho de píxeles. Y lo que también puedes hacer es dar clic aquí mismo y ajustarlo. Y lo que vamos a hacer ahora es ahora que estamos dentro de esta sección, que es la clase de sección, voy a darle a Control K y poner en un div. Y se puede ver diblock pops in para este div log, que está aquí mismo. Voy a darle una clase de contenedor. Entonces Kuan, Dana, presione Enter. Y aquí tenemos la clase de contenedor. Lo que voy a hacer en primer lugar es dar clic aquí mismo para el espaciado, que va a centrar el elemento horizontalmente. Y sólo lo va a poner en el centro. Y le voy a dar un ancho máximo de, digamos, 1,200 pixeles. Así. Y puedes ver que está en el centro de mi página porque hice clic ahí mismo. Entonces ese es, ese es mi contenedor. Y para mi contenedor lo que voy a hacer es simplemente incluir algo de relleno, que es el elemento interior. Y me va a permitir un diseño más fácil de responder más adelante. Entonces voy a dar click aquí mismo. Se puede ver que ya tenemos algunos presets. Voy a poner 20 en este lado y poner 20 en este lado. Ahí vas. Y ahora cuando empecemos a poner contenido en, va a tener el relleno de 20 píxeles del lado izquierdo y derecho, que verás en las próximas lecciones una vez que realmente empecemos con el diseño de este lado. Pero por ahora, solo nos da ese respiro cuando vamos a las tallas más pequeñas. Y nos va a permitir un diseño responsivo mucho más sencillo más adelante. Entonces dentro del contenedor, como recuerdas va, nuestro contenido. Entonces me voy a deshacer de esto por ahora porque vamos a dar click en el cuerpo. Controlamos K y tecleamos encabezado H y solo elegimos el rumbo uno aquí mismo como es. Y voy a dar click aquí mismo. Y puedes ver que tenemos esta etiqueta HTML que dice todos los encabezados H1. Vamos a seleccionar eso porque ahora donde sea que tengas tu configuración H1, va a traducir esos ajustes a lo largo de tu sitio web sin importar en qué página estés, que es lo que realmente querer. Entonces, si me desplazo un poco hacia abajo para que veas lo que estoy seleccionando. En lugar de áreas, voy a seleccionar mis Poppins, que está justo aquí. Y el peso va a ser audaz. Volvamos a XD y veamos qué creamos. Entonces ahí vamos. Ahora tenemos, veamos, H1 Poppins, 64 pernos, y 86 es el interlineado. Entonces si vuelvo ahí, así que vamos con 64, 86 voltios es el color. Y finalmente, este es el color que vamos a elegir. Esta realmente oscura de aquí. Tan oscuro rumbo, color. Ahí vamos. Y ahora nuestra fuente está preparada y va a quedar alineada, lo cual está bien. Entonces este va a ser nuestro H1. Entonces si voy y escribo algo como encabezarlo uno, solo para que sepamos lo que es. Y si escribo Control K, h, vuelvo a usar rumbo. Esta vez vamos a elegir H2 y seleccionar todos los encabezados H2 porque cambiamos esto para todos los encabezados H1. Y si hago clic aquí mismo, se puede ver que los valores provienen de todos los rubros H1. Entonces, está sacando ese estilo de todos los encabezados H1, que son elementos HTML. Y son los mismos para cada página de nuestro sitio web. Entonces, una vez más, este es el H2 y está jalando hacia arriba de todos los encabezados H2 aquí mismo. Entonces, en lugar de área, cambiémoslo a Poppins aquí mismo. Va a ser audaz. Y veamos, para el tamaño tenemos 32 pernos 56 espaciados entre líneas. Déjame comprobar el color de uno a dos a cuatro. Y si pongo el cursor aquí mismo a uno, a dos a cuatro, entonces es lo mismo que este color. Entonces gírela a, y esto es 56. Entonces aquí mismo, 22, escondo este 56 color va a ser ese color más oscuro. Ahí vamos. Ahí vamos. Nuestro H2 está listo y afecta a todos los encabezados H2. Ahora si golpeo Control tipo K en rumbo H y H3 y H4, encabezamientos H3. Vamos a elegir a Poppins una vez más. Y volvamos a XD. Entonces este es Bolt también, pero 24. ¿Y ahora es del mismo color? Ahora es el color de párrafo de tres años porque es el H3. Así que vamos a cambiar, o lo siento. Entonces 24.40 es el interlineado. Entonces 24, esto va a ser 40. Y este color va a ser este color para H3 y párrafo. Ahí vamos. Entonces estamos afectando a todos los rubros h3. Y veamos qué tenemos a continuación. Tenemos el bloque de texto. Entonces hagámoslo. Y voy a escribir en el bloque de texto Control K. Pero ahora mira lo que pasa cuando hago clic aquí mismo. No tenemos esa opción de bloque de texto, así que tendremos que crear nuestro propio cuadro de texto. Así que simplemente escribe el bloque de texto, mi pintor, y va a afectar a todos los cuadros de texto. Entonces aquí vamos a seleccionar Poppins. Ahí vamos. Normal es el peso. Y veamos por el color, qué tenemos. Tenemos este 70, 70, que es gris oscuro, creo que aquí. Y son 20 irregulares y 40 para el espaciado entre líneas. Entonces vamos que este es el gris oscuro. Ahí vamos, y 20.40. Y ahí vamos. Ahora tenemos nuestro tamaño de fuente. Entonces tenemos 24 aquí, y aquí tenemos 20, que creo que tal vez va a ser un poco mucho en la web. No lo sé. Vamos, dejémoslo ahí. Entonces tenemos nuestros bloques de texto, y ahora lo que haremos es seleccionar nuestro párrafo, que es un 16, 26 regular , y tiene este color h3. Entonces 16, 26 regulares. Entonces, vamos a crear ese párrafo K de control. Y voy a seleccionar todos los párrafos aquí mismo, Poppins, 16, 26. Y para el color vamos a usar el párrafo de tres años. Ahí vamos. Encantadora. Sólo vamos a darle gráfico de texto. Ahí vamos. Este va a ser nuestro H2. Esto va a ser RH tres, este va a ser nuestro bloque de texto. Entonces finalmente, lo que necesitamos para nuestro párrafo es todos los estilos se han completado para las viejas etiquetas de párrafo, se puede ver ahí mismo. Y por último, lo que necesitamos es que todos los textos, así que apenas golpee Control K, escriba en bloque de texto. Ahí vas. Dentro del cuadro de texto, voy a llamarlo. A ver. Textos así etiquetados, que va a ser Poppins 12.20. Entonces llamémoslo etiqueta texto por eso. Y va a ser, como dije, Poppins, 12, 20, normal para la talla. Para que veas normal, medio, y negrita es lo que usamos para el color. A ver, a ver. Edítelo usando esto a D a e30, que si flojo está en este color. Entonces H tres párrafo es el color que está usando. Entonces da click aquí mismo, h tres párrafo. Ahí vamos. Y ahora tenemos unos textos etiquetados, que voy a escribir aquí mismo. Así etiquetados textos, y ahí vamos. Entonces ahora tenemos todos nuestros elementos. Solo recuerda, ya incluimos todas nuestras imágenes, así que simplemente las arrastramos y soltamos dentro. Y ahora hemos creado nuestra sección, nuestro contenedor, toda nuestra tipografía, todos nuestros colores. Así que ahora estamos listos para comenzar y realmente comenzar a construir este sitio web. En términos de esto, ya no lo necesitamos. Simplemente puedo volver atrás y presionar Eliminar en todos ellos. Y puedes recordar ese cuerpo, ya usamos ese color de cuerpo por dentro. Entonces ahora que ya estamos listos en el siguiente video, vamos a abordar diseño de este sitio web y voy a mostrarte cómo recrear fácilmente lo que hicimos en Adobe XD ahora en Webflow. Entonces te veré ahí. 168. Construido en navar: Bien, finalmente, comencemos con construcción de nuestro sitio web de Webflow. Y empecemos ahora mismo. Entonces aquí estamos en Webflow y lo que vamos a hacer primero es seleccionar mi cuerpo. Haga clic aquí mismo. Y lo que tenemos aquí son todo tipo de estos diferentes elementos que podemos incluir. Pero una vez más, como mencioné, voy a usar atajos para moverme más rápido. Y simplemente voy a usar Control K una vez más y escribir nav, que me va a mostrar esta barra de navegación. Pero antes de poner en esa barra de navegación, lo que voy a hacer es crear una sección, entonces Control K sección. Y poniendo sección dentro de esa sección, voy a poner una barra de navegación. Así controla K navbar. Ahí vas. Voy a llamar a esta barra de navbar nav. Así que dale una clase así. Y aquí podemos tener todo tipo de estos diferentes escenarios, pero no lo estamos, realmente no nos importa eso. Lo que nos importa es este contenedor en el que se encuentra toda esta información, porque este contenedor es algo así como 960 de ancho. Así que vamos a arreglar eso seleccionando nuestro contenedor, porque nuestro contenedor, si recuerdas, es 1,200 para el ancho máximo. Así que voy a golpear Control K una vez más escribiendo div y poner mi div dentro de aquí. Así. Voy a llamar a ese div navbar, algo así, o navegación o vamos a llamarlo o barra de navegación principal en la parte superior, barra navegación o algo así, o NAV. La desviación. Vamos a llamarlo, llamémoslo así porque solo tendremos una navegación dentro de la deuda. Voy a poner justamente todo esto n. y en vez de navegación, vamos a cambiar el nombre de esto a contenedor. Así. En realidad aún mejor. Quitemos la clase y comencemos de nuevo. Entonces contenedor, porque ya tenemos esa clase y la vamos a llamar navegación, barra de navegación así. Entonces ahora tenemos clase combo. Y qué clase combo es, es tu clase principal, que en este caso es contenedor. Y ya sabe que tiene 1,200 píxeles de ancho porque es un contenedor. Y ya creamos ese contenedor. Lo sentimos, barra de navegación, porque queremos saber cuál es el valor adicional agregado a la misma. Entonces en este caso, sabemos que el contenedor es, como dije, 1,200 pixeles de ancho, y tiene el emparejamiento de 20. Como puedes ver, nuestra barra de navegación es porque es la navegación en la parte superior. Lo que voy a hacer a continuación es darle estilo un poco. Entonces voy a seleccionar mi contenedor. Y aquí vamos a, solo quedemos con ese contenedor por ahora. A lo mejor podamos sacarlo de aquí por completo escribiendo. Ahora, vamos a quedárnoslo. Solo mantengámoslo como ellos lo crearon. Porque creo que podemos agregarle valor así o incluso puedo agregar, veamos, contenedor 1,200. Y nuestro contenedor es de mil 200, así que está bien. Entonces acabo de agregar esa clase de contenedor a su contenedor original. Y dentro de este contenedor, lo acabo de crear como una barra de navegación. Entonces es un poco confuso, pero no te preocupes por ello. Se va a explicar todo en un poco. Entonces lo que voy a hacer aquí es donde dice marca. A lo mejor puedo agregar eso, pero en realidad antes de eso, comencemos con nuestro contenedor y primero cambiemos el color. Entonces, si me desplazo todo el camino hacia abajo donde dice color, dice transparente. Voy a seleccionar el color de la carrocería aquí. Y voy a hacer lo mismo con la barra de navegación. Para que veas que está seleccionado este DDD color gris claro, pero sólo voy a seleccionar mi color de cuerpo. Ahí vamos, y ahora lo tenemos ahí. Entonces lo primero es lo primero para la marca, solo voy a navegar a nuestros activos aquí mismo, seleccionar mi logotipo, arrastrarlo y soltarlo dentro. Ahí vamos. Y solo voy a usar textos alt de asset, que es el logo. O puedo tocar una descripción personalizada y, por ejemplo, un logotipo de Spotter. Ahí vas. Y sólo voy a colocarlo ahí mismo. Ahora a continuación lo que voy a hacer es seleccionar este enlace de navegación. De hecho tenemos que darle estilo a estos enlaces de navegación primero. Así que vamos a darle una clase de enlace de navegación así. Y en cuanto al estilo, lo que podemos hacer es si vuelvo a mi diseño aquí, si lo selecciono y saltando aquí mismo, se puede ver que tenemos el estilo del bloque de texto, así 20 irregulares y 40. Entonces vamos a aplicar esos ajustes ahí. Entonces vamos con Poppins, donde estamos. Y luego nos vamos a ir con el 2040. sin ninguna decoración aquí mismo. Entonces sin ningún enlace. Y voy a poner ese color, que es éste, creo. Sí, tan gris oscuro, ese es nuestro color para el enlace. Y debido a que tenemos la clase nav link, lo que puedo hacer es seleccionar estos para deshacerme de ellos. Control C, control V, control V. Así que ahora tengo tres de ellos. Entonces, si volvemos, tenemos autos solos y contactanos. Entonces esto va a decir autos. Esto va a decir préstamos, y esto va a decir, contáctanos. Ahí vamos. Ahora veamos por el estilo porque tenemos 20 en cada lado para esto Contáctenos. Quería pegarme a la derecha de la página. Entonces lo que voy a hacer en realidad es agregar otro que es clase combo para el último yo que voy a deshacerme de este relleno en el lado derecho así. Entonces se va a apegar a ello aquí. Así que ahora vamos a crear el estilo. Así que aquí estamos por defecto seleccionados. Entonces vamos con el estado hover. Así que simplemente haz clic en esta flecha, selecciona tu estado de libración. Todo lo que tenemos que hacer aquí es cambiar el color de gris oscuro a color estacionario, así. Y luego aquí, vamos con estado deprimido e insertemos un estado deprimido. Quiero elegir nuestro color azul principal. Ahí vamos. Así de fácil es crear esto. Ahora todo lo que necesitas hacer es hacer clic aquí mismo. Voy a ir al modo de vista previa y pasar el cursor. Puedes ver que tenemos el efecto hover de inmediato, razón por la que mencioné dentro de la sección de diseño, no te preocupes demasiado por ello. No pases demasiado tiempo con tus elementos. Creo que esto va a salir bien. Por último, lo que haremos es seleccionar nuestro contenedor con todos nuestros elementos y convertirlo en un flexbox, horizontal. Y digamos así, y vamos a seleccionar nuestro logo. Simplemente va a ser nuestra marca posicionándola aquí mismo y la va a poner aquí mismo. Y juguemos con algunos escenarios. Así que dentro del contenedor, vamos a seleccionar nuestro menú de navegación. Y aquí tenemos alineación y orden, y puedo dar click ahí mismo y seleccionar eso para que se pierda, lo que va a empujarlo aquí mismo. Luego seleccione mi contenedor y tal vez juegue con estas configuraciones como esta, por ejemplo, y si pasa el mouse, puede ver lo que hace esto. Esto es para el final y este es el espacio entre así para distribuir uniformemente de principio a fin. Así que ahora cuando golpeo la vista previa, puedes ver que mi logo está centrado junto con estos elementos. Y cuando vuelo el cursor aquí mismo y hago clic, puedes ver que mi navegación funciona bien porque tenemos ese relleno de 20 píxeles de cada lado. Para que puedas ver cómo se ve eso. Y ahora cuando hago clic aquí mismo, puedes ver cómo se ven mis enlaces aquí mismo, posicionados directamente, así que todo se ve bien y podemos ajustar aún más la deuda. Entonces cuando voy justo aquí, vuelve, y luego quizás pueda seleccionar todo mi componente. A lo mejor puedo ir al estilismo y se puede ver que el tipo se descarta, como funciona la apertura. Y funciona, funciona. Por lo que funciona para tablet, funciona para el paisaje del teléfono, y funciona para el paisaje móvil. Entonces si digo show por ejemplo dentro de la tablet, ahora puedo empezar a peinar esto. Entonces, si hago clic aquí mismo, qué puedo hacer por mi logo. Entonces, vamos a seleccionar esa. Y dentro del fondo, se puede ver que se selecciona este fondo. Quizás pueda seleccionar este fondo más oscuro. Creo que eso va a funcionar. Quizá un poco mejor, creo, no. Entonces podemos ver que esto es seleccionado para el fondo. Entonces vamos por el icono. El color es transparente en este caso, así que no sé de dónde saca el juego de estilismo. Entonces veamos qué podemos hacer aquí mismo. Sí, entonces está tomando ese estilo de aquí. Pero cuando lo cambio a aquí, ahí vamos. Entonces es solo tomar el estilo de aquí. Entonces cuando lo selecciono de aquí, no sé por qué no cambia. Ahí vamos. Entonces finalmente se aplica. Entonces voy a seleccionar este párrafo de tres años, tal vez más, quizás hasta este color más oscuro. No lo sé. Pero solo mantenlo gris claro tal como está, y luego entra en mi icono y cambia el color de mi icono a este color tal vez. Pero por la razón que sea se transformó en eso. Entonces lo que podemos hacer es más tarde en el futuro, tal vez podamos cambiar el icono en sí porque tiene esta caja a su alrededor. Se puede ver la caja alrededor del icono. Entonces tal vez volvamos a transparente y tal vez podamos seleccionar esa casilla. A lo mejor podemos aplicar algo diferente, como tal vez descolorido. Ahí vas. Y en cuanto a los enlaces de navegación, Veamos la transición de color nav. Veamos dónde estamos. Ahí vamos. Así que vamos a seleccionar éste. Y aplicarlo en todas partes. Y a causa de esto, sí, así que ahí vamos. Ahora tenemos a los tres así. Creo que está bien. Y es para el hover. Lo que podemos hacer es ir al principal. Por lo que se puede ver esto tiene enlace de navegación. Ahora vamos a tinta y ésta fue la última. Entonces ahora Lincoln menos. Entonces podrías agregarlo cualquiera de estos. Y vamos a seleccionar el estado de hover. Y dentro de los estilos, lo que podemos hacer es que podamos ver precarga. Entonces, ¿a dónde nos lleva? No creo que podamos, en realidad deberíamos seleccionar eso. Verás, creo que está bien. Eso en realidad está bien porque no podrás cubrir todos modos cuando comiences con tu diseño. Entonces creo que está bien, Eso se ve bien. Esto también se ve bien. Entonces vamos a llegar a ello un poco más tarde, pero creo que por ahora, esto está bien. Hasta que reemplazamos el icono. En realidad lo que podemos hacer es quizás podamos ir rápidamente a X d. Así que hagámoslo. Aquí dentro de mis plugins. Qué puedo hacer por los exploradores de iconos, si se carga, veamos qué va a hacer. Así que vuelve a Icon scalp una vez más. Y aquí lo que puedo hacer es buscar cerrar. Ahí vamos. Tenemos éste. O mejor aún, ya tenemos ese ícono de cerrar. Veamos qué es en algún lugar por aquí, creo. Pero no lo agregué como componente. Ahí vas. Por eso no está ahí. Entonces, si selecciono este y golpeo Control C, puedo cerrar esto. No lo necesito. Luego volvamos a mi iconografía, están aquí, pulsamos Control V e.g Y luego escoge, digamos que el color de encabezado oscuro y cerrar el icono pulsa Control K. Y entonces lo que puedo hacer es abrir mi iconografía y deuda y simplemente ponerla dentro de mis íconos. Lo va a poner al final de aquí. Ahí vas. Ahora, solo necesito alinearlo al centro o algo así. Pulsa Control o Comando E como SVG en lugar de imágenes, voy a exportarlo a iconos. Seleccione la carpeta, presione exportar como SVG. Eso está bien. Vamos a cerrar este control S volver a Webflow. Y voy a dirigirme a aquí mismo. Y déjame abrir mi carpeta una vez más. Entonces tenemos unos activos de spotter. Ahí vamos como íconos. Y voy a seleccionar C, cerrar icono, arrastrarlo y soltarlo dentro. Ahí vamos. Y ahora cuando me dirijo a la tableta, puedo ir justo aquí donde dice icono y seleccionar esto. Y vamos, vamos, vamos a ajustarlo al color del cuerpo. Ahí vamos. Y selecciona mi icono. Y veamos, selecciona esos ajustes. A lo mejor hasta pueda arrastrarlo dentro. Así que vamos a comprobar eso. Haga clic y arrástralo dentro. A ver si eso funciona. Te sientas sí. Entonces cuando selecciono este icono y presione eliminar, lo va a poner ahí mismo. Entonces cuando haga clic aquí, haga clic aquí mismo, ahí va. Todo está ahí. Y hagamos clic en Mostrar para ver cómo se ve eso. Creo que eso se ve bastante bien. Y ahora incluso podemos seguir adelante y avanzar más con esto. Entonces lo primero es lo primero para esto, creo que ya no necesitamos este color, gris claro, así que vamos a cambiarlo al color de la carrocería. Ahí vamos. Y todo esto puede ser color de cuerpo si quieres, pero creo que el gris claro funciona bien. Y dejémoslo así. Entonces como puedes ver, ahora tenemos ahí el ícono personalizado. Entonces así de fácil es y así de bonito se ve. Y va a funcionar bien en todos los tamaños diferentes. Entonces ahora que hemos creado nuestra barra de navegación, y nos llevó bastante tiempo porque quería explicarlo, porque vamos a reutilizarla a lo largo de nuestro diseño. Lo que vamos a hacer ahora es convertirlo en ese símbolo. Para crear un nuevo símbolo, lo que haremos es tener esta barra de navegación dentro de nuestra sección. Así que simplemente voy a seleccionar toda mi barra de navegación. Porque más adelante en la línea, vamos a crear una sección. Dentro de esa sección, podemos tirar de la barra de navegación. O mejor aún, podemos simplemente ponerlo afuera. Vamos a darle un nombre. Pero nombró a clase de barra de navegación. Así. Vamos a quitar la barra de navegación, la barra navegación principal superior. Así es como se va a llamar a nuestra sección en este caso. Sólo para que podamos verlo en la página con este nombre. Como se puede ver. Selecciona nuestro símbolo, crea un nuevo símbolo, y voy a llamarlo barra de navegación. Y crear símbolo. Ahí vas. Así que ahora tenemos nuestra barra de navegación principal, y ahora donde quiera que estemos en el sitio web, podemos seguir adelante y editarlo y simplemente podemos copiarlo y pegarlo cuando cambie a mis símbolos, se puede ver que ahora nosotros tener navbar una instancia. Si lo usamos encendido para páginas, tendremos cuatro instancias diferentes y así sucesivamente y así sucesivamente. Entonces, básicamente, esto es lo que tenemos hasta ahora. Ahora en el siguiente video, permítanme cerrar esto por un segundo. En el siguiente video, vamos a pasar a esta sección y crear esta imagen con un auto y esto de aquí mismo, vamos a tener un poco de relleno encima de 100 píxeles. Entonces te veré en el siguiente video. 169. Sección de héroes: Bien, así que sigamos donde lo dejamos aquí tenemos esta sección de héroes. Así que volvamos al desbordamiento. Y vamos a seleccionar nuestro cuerpo golpeamos Control K y tecleamos S para esta sección. Voy a volver aquí mismo, teclee en sección para darle esa clase Control K tipo en div para el bloque do, voy a llamarlo C para el contenedor. Ahí vamos. Y ahora dentro de esta sección, vamos a llamarlo, vamos a darle una clase combo de héroe. Y dentro de este contenedor, lo que podemos hacer es tal vez ponerlo en diferentes divs. Creo que eso puede ser bastante beneficioso. Pero en realidad antes de eso, lo que podemos hacer es poner en un envoltorio. El wrapper es en realidad el elemento que va, solo recuerda si volvemos a XD aquí mismo. Entonces tenemos que envolver esto en ese envoltorio. Entonces lo que puedo hacer es usar eso como contenedor y llamarlo rapero o crear un envoltorio completamente nuevo. Así que voy a hacer eso en lugar de usar contenedor como mi envoltorio, voy a golpear Control K una vez más escribiendo div, y ahora llamaré a este envoltorio de un héroe. Ahí vas. Y todo el propósito aquí es que envuelva nuestro contenido dentro. Para que veas que el contenedor está aquí, envoltorio héroe está dentro. Todavía tenemos ese relleno de 20 píxeles porque empuja ese envoltorio héroe y dentro del héroe rapero, lo que en realidad queremos es a divs adicionales. Así que vamos a golpear Control K, escriba div. Este bloque div va a ser, digamos contenido de héroe. Ahí vas. Y lo puedes ver aquí mismo. Y quiero seleccionar otro, presionar Control K, escribir div. Y este bloque div puede ser hero.eg. Para la imagen del héroe, por ejemplo, dentro del contenido del héroe, lo que podemos hacer es que tal vez podamos, antes que nada usar el envoltorio de héroe y convertirlo en un flexbox. Y eso va a empujar nuestro contenido lado a lado, como puedes ver aquí mismo. Ahora, dentro de este contenedor, lo que podemos hacer es, o mejor aún en esta sección, lo que podemos hacer, digamos, darle un margen superior de 100s. Entonces aquí tenemos esta sección, héroe. Y voy a usar margen superior de 100, y va a alejar ese contenido de mi navegación. Así que vuelve con el héroe, el rapero. Lo que voy a hacer aquí es por ejemplo I. Puede quizá, digamos distribuir así. Entonces va a empujar el contenido de lado a lado. Lo mismo que hicimos aquí mismo con la navegación dentro del contenido del héroe, lo que podemos hacer es que puedo escribir Control tipo K en encabezado H, y voy a elegir el H1. Simplemente usemos el texto. Entonces H1 y usa todos los encabezados H1. Ahí vas. No sé por qué por qué no recogí el algo no está bien. Entonces si voy a Poppins y 64 y uso mi color para el color oscuro. Ahí vamos. Ahora cuando pego en mi texto, sí, algo no está bien. No sé por qué no salvó las clases que hacíamos anteriormente. Entonces, si selecciono mi edad uno, puedes ver que son 86. Entonces si vuelvo y tecleo, 86, debe ser un bug o algo así. Entonces tu pareja para Voy a presionar Enter para autos exclusivos. Ahí vamos. Entonces ahora dentro de la deuda, lo que voy a hacer es presionar Control K para un texto, no enlace de texto, lo siento, puedo deshacerme de esa clave de control. Bloque de texto. Voy a darle enseguida una clase de bloque de texto. Ahí vas. Ahora tenemos eso. Entonces voy a copiar mi texto, pegarlo aquí mismo. Una historia documentada se ve encantadora. Y una última cosa que quiero hacer es agregar un botón. Así que pulsa el botón Control K. Ahí vamos. Y le voy a dar una clase de btn principal, igual que hicimos con el, con el diseño en Adobe XD. Entonces aquí enseguida, lo que voy a hacer es usar la fuente de Poppins. Creo que fueron 20. Así que déjame revisar mi diseño. Entonces vamos a ver. Se trata de Poppins 20 regular y 40, y va a ser el color del blanco. Entonces veamos, 2040, Poppins, normal, eso es lo que necesitamos. El color va a ser blanco puro. Ahí vas. Y ahora, en cuanto al relleno, tal vez lo que podamos hacer es poner en algo así como, no sé, tal vez 16. Entonces estoy sosteniendo Alt y sosteniendo el botón izquierdo del ratón, 16. O puedes dar click aquí mismo que he tenido 16 años. Da clic aquí mismo, han tenido 16 años si no te funciona. Y por aquí voy a usar algo así como 52. Creo que eso va a funcionar bien. Y para el radio de la esquina puedes desplazarte hasta abajo y escribir algo así como ocho. Creo que eso va a funcionar bien. Ahí vas. No voy a ocuparme de ningún tallaje en este momento. Creo que eso está bien para el color en lo que vamos a hacer es seleccionar nuestro color principal. Y aquí lo que haremos es escribir, explora nuestro curso y podrás ver que el botón crece igual que en Adobe XD. Por último, voy a seleccionar aquí mismo estado hover, color. Voy a cambiarlo a nuestro color. Ahí vamos. Quítelo de aquí porque quiero que mi estado actual sea este. Y ahora si le pego a preview y hover, puedes ver cómo se ve eso. Creo que se ve genial. Esto se ve bien. Y ahora volvamos a ello. Y veamos al héroe rapero. Lo que puedo hacer, tal vez, sí, tal vez pueda darle a mi envoltorio de héroe un ancho máximo de 1,200. Ahí vas. Y por el contenido que está empujando, tal vez pueda darle un relleno adicional de 20, digamos algo así. Y ahora cuando golpeo aquí mismo, se puede ver que ahora en realidad están alineados sub es solo tomar ese 20 y le da otros 20 adentro. Entonces cuando me cambio a aquí mismo, pueden ver que ahora tenemos 20 aquí y 20 aquí, lo que está alineando con nuestro logotipo superior. O lo que también podemos hacer es volver atrás y simplemente sacarlo de aquí. Pero creo que va a funcionar bien para este ejemplo. Entonces aquí tenemos 20, aquí tenemos 20 o tu mejor, puedo deshacerme de él aquí mismo. Entonces cero y luego cero aquí mismo porque tenemos el contenedor que tiene el 20 adentro. Y simplemente puedo ajustar la barra de navegación. Así que presiona Enter. Y dentro de la barra de navegación, lo que puedo hacer es por mi contenedor aquí tengo 20. Y cuando entro aquí, una vez más, tengo 20. Entonces aquí lo que puedo hacer es acertar a cero. Aquí puedo llegar a cero, y ahora estos dos se van a alinear. Así que cuando golpeé la vista previa una vez más, ya se puede ver que el contenido está alineado y todavía tenemos ese 20 padding en cada lado. Entonces así de fácil es arreglarlo y no te preocupes por ello. Vamos a lidiar con eso un poco más tarde con responsive. Volvamos a nuestro diseño y trabajemos con la sección de contenido héroe. Ahora bien, lo que puedo hacer aquí mismo por un contenido de héroe es quizás les pueda dar a estos un poco de relleno o margen o algo así solo para diferenciarlos, diferenciarlos un poquito. Entonces en este caso, puedo escribir y seleccionar todos los encabezados H1. Y en este caso, agreguemos el héroe H1 aquí en lugar de margen superior. Voy a deshacerme de él. Y para el margen inferior voy a sumar 32. Ahí vas. Aquí para mi bloque de texto, lo que puedo hacer es digamos textblock y agregar una clase combo de héroe. Y dentro de eso podemos agregar un margen inferior de 32 lácteos go. Y si te llevo de vuelta a nuestro diseño, eso es exactamente lo que tenemos. Entonces, si selecciono mi llave antigua, 32, y luego 32 aquí mismo, eso funciona como un encanto. Creo que esto va a salir muy bien para nosotros. Pero una última cosa que podríamos querer hacer es seleccionar este contenido de héroe y tal vez darle un ancho máximo. Entonces en este caso, voy a venir aquí mismo y dice ancho. Y whoops, no ese clic y luego resetear. Veamos el ancho. Le puedo dar un ancho del 60%. Entonces no sé qué está pasando. Entonces 60 y escriba en porcentaje. Ahí vas. Entonces ahora va a tapar el ancho al 60%. Entonces como mencioné, puedes usar píxeles, puedes usar porcentajes, puedes usar todo tipo de estos diferentes valores aquí mismo dentro de Webflow. Pero para este caso vamos a usar 60. Y para nuestras imágenes de héroe, lo que podemos hacer es usar un ancho completo. Entonces lo que podemos hacer es volver a nuestro diseño. Veamos dónde estamos. Y si selecciono toda la caja, se puede ver que es 515 con 450. Entonces si volvemos a aquí, tal vez pueda ir con algo un poco diferente, como cinco a dos y tal vez 388. Ahí tienes, algo así. Y dentro de nuestra imagen de héroe, porque esto está hecho, veamos con el botón, no sé por qué me está dando este margen. Entonces veamos el contenido del héroe. ¿Tiene el margen? No. Entonces aquí están nuestro envoltorio o tal vez podamos colocarlos en el centro. Ahí vamos. Entonces ahora el texto va a estar en el centro con nuestra imagen. Entonces con nuestra imagen, lo que voy a hacer es darle a Control K tipo en imagen. Para mi imagen, me gustaría usar este auto. Ahí vas. Ahora, tecleando Control K una vez más, escriba imagen, una vez más, elija imagen. Y veamos, vamos a necesitar esto y Control K una vez más, IMG, necesitaremos otra imagen. Y esa imagen va a ser ese círculo gris, que es éste. Ahí vamos. Y ahora se puede ver por el HTML, los posicionó a continuación. Y en realidad no quiero hacer eso. Entonces lo que voy a hacer es usar mi imagen de héroe. Y ahora vamos a hablar de posicionamiento. Entonces si me desplazo un poco hacia abajo, aquí, tenemos la posición estática en lugar de estática, que está justo ahí. Voy a ponérselo a pariente. Y relativo básicamente te permite apuntar tu código. Porque recuerda, Webflow escribe el código en segundo plano todo el tiempo a medida que comenzamos a diseñar, apunta al código a una tarea específica que quieres que logre. Entonces para este caso, quiero seleccionar esta imagen. Y en vez de, vamos a ver, en lugar de posicionar estática, voy a ponerla en posición absoluta. Y se puede ver que es absoluta a la imagen de héroe. Entonces, donde quiera que esté la imagen del héroe, esto va a ser absoluto a esa posición. Entonces aquí en este caso voy a poner mi imagen azul la esquina superior izquierda y luego puedo ajustar el posicionamiento en un segundo. Pero también voy a seleccionar esta gris y también seleccionada para ser absoluta. Pero en este caso, esquina inferior derecha, así. Y ahora puedo seleccionarlo y venir aquí mismo y tal vez pueda ajustar este círculo azul. A ver. De hecho, vamos a restablecerlo. Y tal vez pueda ajustarlo aquí y tal vez incluso escuchar algo así. Y se puede ver lo sencillo que es hacer esto con éste. No voy a experimentar demasiado quizá aquí. Y creo que ahí podemos llamarlo un día. Y si quieres ajustar el tamaño de este, simplemente ajustado así, tirando de la esquina. Y entonces tal vez pueda moverlo ligeramente hacia abajo, empujarlo ligeramente. Ahí vamos. Tenemos nuestra sección terminada. Tenga en cuenta. Lo vamos a ajustar un poco más tarde cuando se trata de responsive. Y esta sección es, veamos, 100 desde arriba. Entonces eso va a respetar. Entonces cuando tengo una vista previa, así es como se ve nuestro sitio web hasta ahora. No tenemos ningún enlace aquí mismo porque vamos a crear una página, escribir un poco más tarde. La misma historia con estas páginas. Una vez que hayamos terminado la página de inicio, vamos a movernos y posicionaremos esas páginas. Y lo que me olvidé de contarte está a punto de y posicionamiento. Entonces voy a tocar eso en tan sólo un segundo. Pero cuando sobre todo la tableta, todo se va a descomponer. Así que vamos a lidiar con eso un poco más tarde cuando lleguemos a responder. Pero por ahora, volvamos a aquí. Y lo que voy a hacer aquí es con esta imagen seleccionada, o mejor aún con esta imagen seleccionada con esta imagen azul. Y voy a encontrar este que es el índice Z. Y básicamente tienes tu índice x, que es superior e inferior. Tienes tu índice y, que es a la izquierda y a la derecha. Y luego al revés, los índices y, el índice máximo superior e inferior son de izquierda y derecha. Ahí vamos. Y z-index es por delante y por detrás. Entonces básicamente como mirar las cosas en 3D una vez más, porque HTML pone las cosas una encima de la otra y no le importa el espaciado. Por eso crearon este índice z. Entonces para que podamos señalarlo. Entonces aquí puedes ver que esta imagen tipo de Sean brilla a través de ella. Entonces voy a seleccionar este azul, poner z-index de cinco tal vez. Y ahora voy a saber que es por adelantado y por adelantado de esta imagen de auto. Y yo voy a hacer lo mismo por éste. Entonces simplemente usa el número cinco, presiona Enter, y ahora sabré lo que pase. Va a estar frente a esta imagen. Pero en cuanto a su posicionamiento, debido a que la imagen principal es relativa y estas dos imágenes son absolutas, las va a situar ahí. Entonces ahí tienes. Esa es nuestra sección de héroes. Y voy a llamarlo aquí mismo. Porque si selecciono mi envoltorio héroe, puedes ver que el flexbox se posiciona a horizontal. Si lo cambio a vertical, esto es genial una vez más, para responder. Para que veas lo sencillo que es ajustar esto. Pero como dije, lo vamos a ajustar un poco más tarde y jugar con los ajustes. Por ahora, sólo vamos a pasar por estas secciones. Y como dije, este es nuestro héroe de sección. Y en la siguiente lección, tratemos sobre la sección de ancho sobre nosotros, y te veré en el siguiente video. 170. Quienes somos: Bien, ahora vamos a crear quiénes somos sección. Y voy a seleccionar el cuerpo. Porque si creo esta sección me va a dar un error porque no puedo poner una sección dentro de esta sección. Entonces, seleccionemos el control del cuerpo tipo K en C para esta sección. Selecciona la sección, y voy a darle una clase combo de quienes somos. Digamos. En lugar de esa clave de control div. Para el div, voy a seleccionar clase combo de contenedor. Ahí vamos. Y ahora para éste, voy a dar un margen superior de, digamos 200. Y voy a empujarla 200 desde aquí. Porque si te llevo de vuelta a Adobe XD, puedes ver cuando flote, tenemos 200 entre estas dos secciones. Tenemos 100 entre esto y la navegación. Entonces ahora necesitamos esto. Entonces si selecciono esa sección y selecciono ese contenedor, lo que necesitamos es que crearemos otro div, así Control K, escriba en bloque def. Y vamos a llamarlo, digamos quiénes somos. Rapero, Algo así dentro de este contenedor. Y para ese rapero, lo que voy a hacer es encender la pantalla flex porque voy a crear Control K, poner en una imagen. Y esta imagen va a ser esta imagen. Ahí vas. Después voy a seleccionar quienes somos, rapero. Y dentro, vamos a crear otro div de contenido. Y vamos a crear quiénes somos contentos. Y dentro de ese contenido, lo que podemos hacer es tal vez podamos poner, veamos, encabezado H2 y teclear H2. Veamos si se guarda en la configuración. Entonces todos los ajustes H2. No lo sé. ¿Por qué no simplemente no lo sabía? Entonces no lo consigo. Entonces H12 aquí mismo, no lo guardó por el motivo que sea. Entonces si elijo Poppins aquí mismo, y elijo el color de H2, que es este 132. Y veamos, creo que estamos a los 48 o algo así, del 30 al 56. Mantengamos las muertes de 56. Todos los rubros H2. Ahí vas. Ahora tenemos eso. Entonces déjame seleccionar mi texto e ir con un spotter autos exclusivos. Ahí vamos. Antes de seguir adelante, lo que puedo hacer es quizás darle un margen a mi imagen aquí mismo para poder espaciarlas de manera uniforme. Aún mejor. Quienes somos, nuestro envoltorio, podemos hacer lo mismo. Así que haz clic aquí mismo, va a posicionarlos ahí mismo. Y luego imagen, puedo poner en tal vez 80, algo así. Y entonces ni siquiera necesitamos eso. A lo mejor podemos posicionarlo a la izquierda. Ahí vas. Y ahora tenemos los 80 pixeles. Si coloco el cursor sobre mi imagen y flojo aquí mismo, puede ver que aquí tenemos el espaciado de píxeles AD para el margen. Ahora dentro de nuestro contenido, voy a golpear Control K y escribir bloque de texto así, darle una clase de bloque de texto así. Y voy a seleccionar mi tipo de texto en pasión y dedicación, Control K. Y veamos si tenemos algún estilo para el párrafo. Una vez más, no, no sé por qué sucede. Así que selecciona Poppins aquí mismo. Así que vamos a tamaño de 16, seleccione el color de H3 y párrafo. Ahí vamos. Y para la altura, veamos dónde estamos con Adobe XD, son 26. Así que ven aquí al 26. Ahí vamos. Y sólo voy a seleccionar mi contenido aquí mismo. Y sólo estoy seleccionando y pegando. Se puede pegar desde Adobe XD porque tengo dos monitores. Simplemente estoy copiando y pegando el texto de nuestros diseños. Entonces si te llevo a Adobe XD, ahí tienes. Así que simplemente hago doble clic en copiar Control C y volver a Webflow y simplemente pegarlo. Entonces eso es básicamente todo para esta sección. Lo único que ahora nos queda por hacer es simplemente darle estilo un poco. Entonces lo primero es lo primero, a quien estamos llamando wrapper, porque es el flexbox. Voy a dar click aquí mismo, que va a centrar mi contenido. Y ahora voy a darle una clase a esta imagen. Entonces voy a cambiarle el nombre a quienes somos. Img, como, entonces, solo para que sepamos lo que es. Y aquí veamos qué podemos hacer. Entonces tal vez podamos dar esto. Se había comprometido t2. Voy a darle una clase separada. Entonces vamos a darle un Th2. Quienes somos. Bueno, vamos a ver. H2. Oscuro, tal vez, porque lo vas a reutilizar en toda nuestra página web. Y aquí por el margen, voy a ir con cero. Por el margen inferior, voy a ir con 24 tal vez. Aquí para este bloque de texto, lo que puedo hacer es agregar una clase combo de quienes somos. Ahí vas. Y aquí voy a añadir otro margen inferior de 24 y el párrafo está bien. Ahí vamos. Ahora tenemos esta sección terminada. Y se puede ver lo súper simple que fue esto. Entonces cuando haga clic aquí mismo, pueden ver ahora tenemos esta sección superior con el botón. Y ahora tenemos esta sección inferior. Y cuando me cambié a una tableta, obviamente vamos a cambiar estas dos y la imagen va a ir a la parte superior. El texto va a ir al fondo. Entonces va a funcionar bien. Y aquí tenemos esta suma. Cometí un error en realidad porque en vez de poner el ícono del Menú, yo poniendo el ícono de la ropa. Así que voy a arreglar eso. Volvamos a aquí. Volvamos a nuestra barra de navegación escribiendo Enter, vaya a aquí y seleccione nuestro icono. Déjame ir de hecho a X d, y déjame ir de hecho hasta aquí. Y veamos, selecciona nuestro menú de búsqueda. Ahí vamos. Menú y tal vez podamos usar este. Creo que va a ser bueno. Ahí vas. Seleccionemos pegarlo aquí mismo. Y vamos a darle un nombre de menú. Icn. Vamos a darle ese color, que usas un color más oscuro. Ahí vamos. Y lo voy a poner aquí mismo al centro. Así que va a ser mucho más sencillo para mí pegarlo dentro de mis íconos y colocarlo todo el camino abajo debajo del icono de cerrar. Ahí vamos. Asegúrate de que esté en el centro y presiona Control E, expórtalo a los activos. Ahí vamos. Y ahora cuando cambie a mi carpeta, déjeme simplemente averiguarlo donde está. Ahí vamos. Y voy a ir a mis iconos, y después seleccionar mi Webflow. Ir a mis bienes. Encuentra ese ícono de menú. Ahí vamos. Encantadora. Y luego para el icono del menú, vamos a golpear aquí mismo para ampliar esto. Entonces no sé por qué me está mostrando así, pero no importa. Vamos a ir al icono de menú aquí y agregarlo aquí mismo. Ahí vamos. Y lo que puedo hacer es quizás hacerlo un poco más grande. Entonces ancho, tal vez podamos ir con 16 por 16 o 24 por 24 píxeles. Ahí vamos. Se ve preciosa. Selecciona esto, deshazte de él. Por alguna razón. Se puede ver que no se deshace de él de inmediato. Entonces es realmente molesto. Imagen del menú. Deshazte de él. Ahí vamos. Y voy a darle este ícono Renombrar a Menú. Ahí vamos. Ahora, se ve genial. Entonces ahora cuando vuelva a mi instancia, seleccione el escritorio, presione vista previa, vaya a tablet. Ahora tenemos este ícono de Menú. Entonces cuando hago clic, puedes ver que ahora todo esto funciona como debería. Así que vuelve a ello y vuelve. Entonces ahora en la siguiente sección lo que haremos es volver a XD para mostrarte dónde vamos a empezar realmente con nuestras tarjetas. Entonces como dije, y lo tengo justo aquí. Vamos a diseñar esta tarjeta. Vamos a poner en su interior esta información y luego agregaremos estas imágenes un poco más adelante. Entonces te veré ahí. 171. Sección de selección de coches: Bien, sigamos adelante y diseñemos esta sección para que veas que tenemos el título en el centro, y luego tenemos estas tres cartas con el botón Bot en el fondo, en la parte inferior. Lo siento. Así que vamos a cambiarte a nuestro flujo de trabajo, ¿verdad? Así que déjame cerrar mi carpeta para que no me distraiga. Voy a seleccionar mi cuerpo golpeo Control K. Anexo div, bloque div. Y para este bloque div, lo que puedo llamarlo en realidad es no, vamos a deshacernos de él. Lo sentimos, Control tipo K se seccionó primero, dale una clase de sección y auto o selección. Selección. Esa va a ser nuestra sección. Dentro de ese div. Para el contenedor. Ahí vamos. Y dentro de ese contenedor donde podemos hacer es tal vez crear un envoltorio o algo así. Pero aquí, primero vamos a darle un margen de 200 para que podamos alejarlo de esta sección, esta. Y dentro de este contenedor, lo que puedo hacer es escribir Control K type in div, div block. Y este va a ser nuestro envoltorio de tarjetas de auto. Ahí vamos. Entonces dentro de este contenedor, lo que voy a hacer primero es escribir Control K, escribir en encabezado. Voy a usar el H2 para esto, y voy a usar todos los encabezados. Ahí vamos. Por último, ahora estamos con esto y sólo voy a sumar el H2 centrado. Ahí vamos. Y dentro del H2 centrado, voy a deshacerme de esto y esto. Ahí vamos. Y voy a asegurarme de que esté centrado así. Y por dentro, voy a escribir como nuestra colección exclusiva. Ahí vamos. Y lo voy a poner por encima de mis tarjetas de envoltorio. Y si selecciono mi sección, se puede ver que ahora tenemos 200 para el margen dentro del rapero de contenido. Lo que voy a hacer es convertir ese envoltorio de contenido en una grilla un poco más tarde. Pero antes de hacer eso, pulsa Control K escribiendo div para agregar otro div que va a alojar mis elementos. Y ese div, le voy a dar un nombre de tarjeta de auto. Ahí vas. Entonces, dentro de mi tarjeta de auto, lo que voy a hacer es poner en realidad toda mi información. Entonces veamos qué podemos hacer. Podemos dejar decir dentro de la tarjeta del auto puedo golpear Control K tipo en imagen. Y dejémoslo así por ahora. Imagen de auto porque va a sacar una imagen del contenedor. Pero en realidad vamos, vamos, veamos qué podemos hacer. Entonces por aquí, puedo ir con imágenes de autos y tal vez agregar tres imágenes diferentes sobre la guinea hurra Khan fue una. Así que permítanme seleccionarlo de aquí. Entonces quienes son cuenta se va a agregar. Entonces veamos, se va a agregar escalate. Y Lucid Air se va a agregar aquí dentro también. Porque vamos a agregar imágenes más tarde cuando realmente empecemos a meterse con nuestro CMS. Pero por ahora, vamos a ponerla aquí. Entonces imagen de auto, voy a darle a este reloj, elegir imagen, y voy a seleccionar cuenta de Twitter solo para que podamos verlo obviamente es simplemente enorme porque necesitamos agregar todos estos elementos adicionales. Y para hacer eso dentro de las tarjetas del auto, voy a crear otro div Control K. Solo piénsalo como un tipo de carpeta en div. Y este bloque div podemos nombrar algo como información de tarjeta de coche, tarjeta, información de tarjeta. Y dentro de esa información, lo que puedo hacer tal vez es agregar en esa edad de tres años, controlar K tipo pin rumbo H3 y ver qué tenemos aquí mismo. Entonces todos los encabezamientos h3, sigue siendo no tomó la información. Entonces tomemos a Poppins. No sé por qué cuando diseñé esto por primera vez, no me causó ningún problema, pero ahora por la razón que sea simplemente lo hace. Entonces aquí tenemos ese h tres colores, así que hagámoslo. Entonces color h tres y párrafo. Ahí vamos. Y estoy seleccionando y esto solo para que ustedes puedan ver lo que estoy haciendo. Y lo que voy a hacer es usar los h tres párrafos. Eso está bien. Aquí voy a escribir Lamborghini ocurriría. Ahí vamos. Y aquí mismo voy a darle a Control C, Control V para pegarlo. Y este h3 va a ser H tres azul. Y todo lo que quiero hacer es simplemente cambiar esto al color azul. Y este color azul en realidad va a ser por el precio. Así que vamos con 1949990, lo siento. Y luego finalmente, lo que haremos es crear otro bloque div dentro porque si te cambio a mi diseño, si recuerdas, creamos este año kilómetros y de hecho voy para seleccionar eso y darle eso como una clase combo. Este año, kilómetro tiene el acolchado en él y tiene una distancia de 24. Entonces eso es exactamente lo que vamos a hacer aquí. Entonces Control K una vez más escribiendo div si bloque, voy a darle esa clase la cual son apenas copiadas año kilómetros. Y agreguemos dos textos en su interior. Entonces Control K escribe en texto. Y veamos, bloque de texto tal vez. Yo creo, sí, textblock, dale una clase de bloque de texto aquí mismo. Bloque de texto, ahí vamos. Este primero va a ser 2021. Ahí vas. Voy a golpear Control C, Control V para crear otro. Y esto va a ser por los kilómetros. Así que vamos con 63 a 4 km. Y sólo voy a cambiarlos y luego seleccionar tu año kilómetros. Ven aquí mismo a la exhibición. Haga clic aquí para ver el flexbox, y haga clic para estar en el centro y luego simplemente distribuirlos así. Ahí vas. Ahora, lo único que nos queda por hacer de verdad es jugar con la configuración de nuestros elementos. Entonces lo que puedo hacer con H tres azules aquí mismo es darle tal vez en vez de este margen, voy a ir con cero. Margen inferior, podemos ir con 16 o algo así. A ver. O tal vez relleno, podemos darle a 16 de emparejamiento. Ahí vamos. Y este H tres, llamémoslo h tres oscuro. Quizá. Aquí vamos a quitar esto, y aquí vamos a quitar esto y tal vez darle 16 también. Pero ahora lo que podemos hacer es sí, sí, solo dale eso. Y para el nombre de la tarjeta del auto por lo que voy a hacer en realidad es darle un relleno de 24. Porque si te llevo de vuelta a XD y selecciono el texto de mi tarjeta de auto, en este caso, 24 aquí, 24 aquí, 24 aquí. Entonces para hacer eso en Webflow, seleccionado y luego ir 24 aquí, cuatro aquí. Y finalmente 24 aquí. Y ahí tienes. Ahora que nuestra tarjeta está lista, lo que realmente haremos es darle a esto una clase de quién le gusta el auto así y en las tarjetas del auto, rapero, lo que haré es convertir la pantalla de inline en una grilla. Y grid funciona así. Tienes tus columnas y tienes tus filas. Ahora bien, estas son las columnas en este momento, solo tenemos dos columnas. Pero si voy aquí mismo y escribiendo este plus, ahora tenemos tres columnas y ahora tenemos dos filas. Se puede ver esta es la fila número uno, estas tres grandes columnas. Y ahora esta es la fila número dos, estas tres columnas más pequeñas, para deshacernos de ellas porque no las necesitamos. Yo sólo voy a golpear Eliminar aquí mismo en las filas. Y ahora sólo vamos a tener una columna, súper simple. Para que puedas jugar con los ajustes aquí para la cuadrícula y para los tamaños y así sucesivamente y así sucesivamente. Pero antes de hacer nada, tenemos la tarjeta del auto, que se encuentra en la única columna de nuestra cuadrícula. Voy a golpear Control C, Control V, control V para pegarlo en tres ocasiones. Y antes de seguir adelante, lo que quiero hacer a continuación es para mi tarjeta de auto, quiero darle ese trasfondo. Entonces tarjeta de auto ir a mi diseño para el fondo. Puedo ir con el color y puedo seleccionar mi color blanco. Se puede ver eso aquí mismo. Así que simplemente selecciona tu blanco puro. Ahí vamos. Y va a colorear en los colores de cada lado. Ahora bien, lo que tenemos aquí mismo es el radio de la esquina redondeada. Entonces voy a seleccionar las ayudas de deuda y mecanografía. Ahí vamos. Ahora tenemos el ocho para el radio de la esquina y para las imágenes, vamos a seleccionar esta primera, por ejemplo porque todas ellas son exactamente iguales aquí para esta, creo que vamos a tener las escaladas. Así que hagamos clic derecho aquí mismo. Duplicar el tipo de clase en escalado. Ahí vamos. Voy a sustituir enseguida la imagen para que no sea confuso. Ahí vamos. Y aquí para mi imagen, lo que voy a hacer por el radio es dar click aquí mismo. Para la esquina izquierda, voy a escribir ocho. Para la esquina derecha, voy a teclear ocho y va a y los reemplazó por estos dos, pero no con este porque lo cambio alrededor. Entonces cuando selecciono mi escalado y hago lo mismo, entonces escriba en ayuda, escriba ocho. Y va a redondear esas esquinas así. Y eso es exactamente lo que quiero. Pero lo último es por esto. Entonces se puede ver aquí con los años, kilómetros, lo que voy a hacer es sólo tal vez, veamos, tal vez pueda poner en el maridaje aquí o 24 tal vez. Y creo que eso va a funcionar bien. O tal vez incluso mejor con 16 porque no necesitamos tanto espaciado aquí mismo de este lado. Y ahí tienes. Nuestras tarjetas están listas. Pero aún mejor, lo que puedo hacer es escribir en cero aquí mismo porque quiero lograr esto. Y escribiendo en lugar de bloques de texto, voy a llamarlo año de tarjeta de coche. Y si lo llevamos de vuelta al diseño, veamos aquí. Ahí vamos. Tenemos una pila de 24 distancia. Entonces, cuando vuelva a nuestro diseño, tomemos Q aquí mismo. Y para los bloques de texto, lo que podemos hacer es seleccionar este blog tecnológico año coche y simplemente añadir un margen de 24. Ahí vamos. Y ahora esto, vamos a configurarlo para que sea así, para estar alineado hasta aquí. Y este año kilómetro por cualquier razón no se tradujo hasta aquí. Entonces vamos a darle una clase a eso. Entonces esta era tarjeta de bloque de texto, año de tarjeta. Entonces si lo agrego aquí mismo, tarjeta año tarjeta, va a aplicarla. Seleccione éste. Tarjeta, año de tarjeta. Lo va a aplicar. Ahí vamos. Y una última cosa que nos queda por hacer es simplemente seleccionar esto. Entonces Cadillac escalan, este es el precio. Esta va a ser la escalada de suerte. Creo que así es como lo escribes. Con dos L's escalan 2020 y este va a ser el kilometraje. Entonces este va a ser el 2020. Y este va a ser el kilometraje. Ahí vamos. Y finalmente, esto va a ser Lucid Air. Sigamos adelante y reemplacemos. En primer lugar, hagamos clic aquí mismo. Duplica la clase, llámalo Lucid para esta imagen, y simplemente reemplazó la imagen aquí mismo. Ahí vamos. Y por el precio, volvamos a XD. A ver. 2022 es el año. Este es el precio. Esto va a ser 22. 22, ahí vamos. Y para el año 40 km, perdón, podemos volver a aquí y escribir en deuda. Entonces ahí vamos. Ahora tenemos nuestras tarjetas. Y lo último que quiero hacer en realidad es primero colapsar todo esto y luego seleccionar nuestra tarjeta así. Voy a seleccionar mi tarjeta y luego poner un borde aquí mismo. Entonces voy a hacer click en la frontera. En lugar de color negro, voy a elegir este color o incluso mejor, este color, y luego reducirlo hasta cero para que no sea visible. Entonces ese es nuestro estado predeterminado. Y ahora vamos a crear un estado de horror. Y todo lo que tenemos que hacer es simplemente traer eso de vuelta a 100, así. Entonces ahora cuando llego a la vista previa, ojalá funcione. Ahí vamos. Pero por la razón que sea se queda justo aquí. Entonces veamos cómo lo llama. Haz eso. Ahí vamos. Entonces, si elimino eso, dale a vista previa ahora mismo, flote. Se puede ver que todo funciona bien. Pero ahora tenemos un pequeño problema porque esto está demasiado cerca y estos están demasiado cerca el uno del otro. Entonces, si volvemos a mi flujo de trabajo y veamos qué podemos hacer aquí mismo. Entonces tal vez podamos agregar al envoltorio de tarjetas de autos un margen superior de 64. Ahí vas. Y por último, para que la propia grilla la edite, lo que puedes hacer es dar click sobre este icono. Aquí tenemos este FR, que es la fracción de la grilla. Y como puedes pensarlo es que tus columnas de cuadrícula se dividen por defecto en iguales f las nuestras, así que aquí tenemos tres fracciones, entonces tres fracciones iguales. Y puedes ajustar estas fracciones dando click aquí mismo, ajustándolo, haciendo una columna, a corto plazo, haciendo una columna más grande. Pero lo que en realidad voy a hacer en nuestro caso es llegar a XD y C. Así que tenemos 38, así que no necesariamente tenemos que lograr el mismo resultado. Pero si hubieran sido 24, tal vez por la brecha entre estas columnas, presione Enter, ya puede ver. Entonces tal vez podamos tener 32, incluso 38. A ver. Entonces sí, creo que esto se ve bastante bien. A lo mejor ya es demasiado tarde. No creo que 38 sea del todo necesario. Ahí vamos, porque hace que mis imágenes se vean un poco más pequeñas. Y se puede ver que los efectos hover funcionan como deberían. Y ahí tienes. Ahora creamos esto. Ahora, obviamente, porque este va a ser nuestro contenido dinámico. Una vez que terminemos realmente esta página, vamos a empezar a hablar ese contenido dinámico antes de pasar a la siguiente página es porque obviamente lo necesitaremos para las próximas páginas. Pero por ahora, veamos rápidamente lo que hicimos. Entonces aquí tenemos nuestra navegación. Tenemos nuestro botón, y funciona. Tenemos estas dos secciones. Entonces tenemos esta sección con nuestra imagen y este ancho o el texto. Y por último, tenemos nuestra colección exclusiva cuando flotamos, funciona exactamente igual, igual que lo imaginamos en Adobe XD. Así que estoy muy contento con cómo se ve esto. En la siguiente sección, vamos a hablar de lo que ofrecemos. Y te veré en el siguiente video. 172. Sección de oferta: Bien, continuemos donde lo dejamos y comencemos con nuestra sección de Ofertas. Así que golpea Control K en el tipo de cuerpo en sección. Y voy a agregar una clase de sección. Y tal vez nuestra oferta. Ahí vamos. Y dentro de ese control tipo K en div. Para el div, dale una clase de C de contenedor. Ahí vamos. Y para nuestra sección, vamos a ver, a lo mejor podemos darle un margen de 200s para que podamos empujarlo desde estos abajo dentro del contenedor Control K para que haya sido div. Para el div, voy a agregarle una clase de oferta. Nuestra oferta de envoltorio. Ahí vamos. Y dentro de ese envoltorio, lo que voy a hacer es quizás, veamos qué podemos hacer. A lo mejor podemos poner en, vamos a ver, vamos a usar este H2. Así que golpea Control C aquí mismo, cierra todo esto y golpea Control D aquí dentro de nuestro contenedor. Y solo lo va a poner justo debajo de nuestro envoltorio. Sólo ponlo aquí mismo. Y sólo voy a usar así los textos de lo que ofrecemos. Ahí vamos. Dentro de nuestro envoltorio. Lo que voy a hacer es quizá convertir eso en un flexbox. Porque recuerda si te llevamos vuelta a nuestro diseño aquí mismo, desplázate hacia lo que te ofrecemos. Todavía tenemos estas dos columnas, igual que hicimos con el héroe y con lo que sea. Entonces aquí en esta columna vamos a tener esta sección. Entonces déjame cerrar esto para que no sea confuso. Entonces aquí en nuestra oferta, hemos ofrecido en cuatro y tenemos nuestra imagen en el lateral. Entonces eso es exactamente lo mismo que haremos con nuestro diseño aquí. Así que vamos a golpear Control K escriba en def, agregue un div. Y este div va a ser algo así como nuestro contenido de oferta. Ahí vamos. Y tal vez podamos darle a Control K tipo en imagen y agregar esa imagen para la oferta, que es esta. Ahí vamos. Por último, porque hemos convertido esto en un flexbox, asegúrate de centrarlo y asegurarnos de que lo esparcimos por ahí. Entonces ponemos ese posicionamiento igual entre nuestros elementos. Entonces ahora tenemos esto y tenemos esto. Por último, nuestra oferta rapero puede tener un margen de 64. Tal vez. Ahí vamos para que podamos distinguirlo del texto. Y si te llevo de vuelta hasta aquí, como pueden ver, todavía tenemos esos 64 textos. Entonces, dentro de nuestro contenido de oferta, lo que quiero hacer es, por ejemplo, veamos qué podemos hacer. Tal vez crear, tal vez crear tres noticias diferentes. Porque si me llevo aquí, lo mejor este puede ser un div y todos los contenidos deberían ir dentro. Entonces dentro de este div, podemos tener tres divs más. Entonces 12.3 y dentro de cada uno de ellos puede haber un div el cual va a contener esto, que tiene la pila de 16, Así icono y el texto, y el texto debajo de él. Así que vamos a estructurarlo así. Entonces si vuelvo a mi flujo de trabajo aquí mismo, entonces tenemos nuestro contenido de oferta, que es este. Y dentro de la deuda, lo que puedo hacer es a lo mejor golpear Control K tipo en div. Y dentro de ese div, que voy a llamar Vamos a ver, ofrecer garantía. Ofrecer garantía. Lo que voy a poner dentro de ahí es quizá imagen. Para la imagen, voy a usar el icono de, veamos, veamos, veamos dónde estamos para ese lote. Pero necesito esa placa azul. Parece que no lo exportó porque solo tienen esta versión blanca de la misma. Entonces pongamos eso por ahora hasta que vayamos a X d, icono de garantía seleccionado, placa, azul, Control X exportaciones. Ahí vamos. Y ahora déjeme encontrarlo en mi carpeta. Ahí vamos. Estamos en los íconos. Y veamos, puedo dar click aquí a mis iconos. Entonces eso fue garantía, insignia, icono, azul, arrastrar y soltar. Ahí vamos. Déjame cerrar esto para que no nos moleste. Reemplaza la imagen por esta. Y ahora está dentro. Entonces si vuelvo a aquí, aquí tenemos la garantía de la oferta y aquí tenemos esta imagen. Entonces voy a escribir algo así como la guerra. Ran. T, icono, azul. Ahí vamos y decidimos que necesito tener un texto que va a ser un h3. Entonces Control K, escriba rumbo, seleccione el H3. A ver si se guarda. Mis ajustes, todos los encabezados h3. Sí, lo hizo. Por último, encantador. Y puedes ver los ajustes aquí mismo. Y lo que voy a hacer es quizás agregar una clase combo de H3 y dark. Así, sólo para que sepamos lo que tenemos. Y me voy a deshacer de este rodamiento por ahora porque no lo necesito en este caso. Y aquí vamos a escribir en algo así como garantía extendida. Ahí vamos. Ahora vamos a usar esa oferta de garantía y convertirla en un flexbox. Asegúrate de que esté centrado. Y voy a seleccionar mi icono aquí, icono de garantía azul, y darle un margen de 16 porque eso es lo que teníamos, si recuerdas en nuestro stack, en nuestro diseño, en vez de nuestro contenido de oferta, lo que puedo hacer es quizás, veamos. A lo mejor no quiero hacer esto. A lo mejor puedo cambiar el nombre de esto para ofrecer un título, tal vez. Así renombró clase para ofrecer un título. Ahí vamos. Y voy a crear otro div aquí mismo. Pon eso encima, luego pon este título dentro de ese div, así, y luego dale esta oferta. Oferta Veamos garantía. Ofrecer garantía. Dentro de esa oferta de garantía, voy a poner en un bloque de texto, K, bloque de texto. Ahí vamos. Y aquí le voy a dar una clase de textblock. Y déjenme sólo tomar algunos textos. Ahí vamos. Y aquí para este bloque de texto, lo que puedo hacer es que se le ofrezca título. A lo mejor pueda empujarla un poco hacia abajo . Veamos qué podemos hacer. A lo mejor le podemos dar una carga de 24. Así que selecciona nuestro título de oferta y va a ir al margen 24 abajo. Creo que eso va a funcionar bien. Aquí tenemos nuestra oferta de garantía. Entonces lo que puedo hacer con esta sección es nuestro contenido de oferta, que una vez más es el div principal sosteniéndolo en su lugar. Lo que puedo hacer es quizás convertir eso en una pila, pero tal vez ni siquiera necesito hacerlo. Vamos a comprobarlo. Entonces si golpea como Control C, Control V, Control V, lo va a pegar en tres tiempos, lo cual creo que está bien porque nuestro envoltorio de oferta recuerda es un flexbox en sí mismo. Entonces este es solo el hijo de nuestro Flexbox, esta oferta de contenido. Entonces aquí lo que voy a hacer es ofrecer garantía está bien. Este siguiente va a ser de mantenimiento. Entonces veamos qué puedo hacer aquí mismo. Así que ofrezco garantía, voy a dar click aquí mismo. Duplicar la clase. En lugar de garantía, voy a escribir en mantenimiento. Y luego voy a seleccionar los textos aquí mismo. Entonces para el título está bien, pero esto, voy a reemplazarlo, reemplazó el icono y solo necesitamos encontrar ese ícono de mantenimiento. Entonces veamos dónde está. Ahí vamos. Y en lugar de garantía icon bloom, voy a duplicar la clase y escribir en mantenimiento. Icn. Ahí vamos. Y va a mantener el mismo ajuste de 16 como se puede ver, que es lo que queremos exactamente. Y por último, cambiemos este último. Entonces hagamos clic derecho, clic izquierdo, lo siento, duplicamos la clase. Y esto va a ser ofrecer préstamos. Y hagamos doble clic aquí mismo escriba en préstamos. Y esto va a duplicar la clase sola. Icn, encantadora. Y en lugar de este icono, vamos a reemplazarlo por el icono de préstamos. Entonces vamos a encontrarla donde está. Es la mano que sostiene un auto. Entonces vamos a buscarlo. Ahí vamos. Icono de préstamos a nivel mundial. Todavía mantiene ese 16 una distancia. Ahora déjame tomar el texto y pegarlo aquí mismo. Y toma el texto de aquí, pégalo aquí mismo. Encantadora. Y lo que voy a hacer a continuación, y finalmente es que si lo llevo de vuelta a XD, tenemos cierta distancia entre cada uno de estos. Entonces tenemos 40 y tenemos 40 aquí. Entonces quizás eso es lo que podamos hacer aquí también. Entonces si cierro todo mi, uh, mira lo que hice anteriormente. Así que ofrezca garantía, tal vez pueda empujar esto a 40 y ofrecer mantenimiento. A lo mejor pueda empujar esto a 40 también. Entonces veamos cómo se ve eso. Ahí vamos. Cuando acerté a la vista previa, creo que eso se ve bien. Pero quizás 40 es un poco mucho y queremos tener el espacio para nuestra imagen. Así que vamos con 32. Creo que va a funcionar bien. Entonces 32, encantador, encantador. Ahora esta sección se completa básicamente. Para que veas lo que hicimos y lo rápido que fue eso. Y te veré en el siguiente video donde vamos a crear esta sección de beneficios. Y va a requerir un poco más de trabajo debido a la superposición de la imagen. Entonces te veré ahí. 173. Sección de beneficios: Bien, sigamos adelante y tratemos con nuestra sección de beneficios. Entonces si te llevo de vuelta a fluir justo aquí, voy a seleccionar el cuerpo golpe Control K tipo en C para nosotros, perdón, S para una sección. Sección. Ahí vamos. Ellos han sido controlados Kate y div, y este va a ser nuestro contenedor. Encantadora. Y ahora dentro de ese contenedor, lo que podemos hacer tal vez es poner en el envoltorio. Entonces Control K escriba en div. Y este div puede ser, veamos, beneficios. Rapero. Así. Dentro de ese contenido obviamente va a estar nuestro contenido de texto. Ahora en términos de esto, llamemos a esta sección beneficios. Ahí van, y le dan un margen superior de 200 visto como con todos estos otros que hicimos. Y por último, lo que quiero hacer aquí mismo es que quiero hacer algunos cambios. Entonces para el contenedor, quiero que en realidad sea de ancho completo. Entonces voy a escribir ancho completo para mi clase combo. Y para el ancho aquí mismo, voy a escribir al 100%. Y va a tomar todo el porcentaje de mi pantalla. Los beneficios de la envoltura en realidad van a estar en 1,200 píxeles. Ahí vamos. Y vamos a centrarlo igual que ese contenedor. Entonces lo que voy a hacer es en lugar de donde dice fondos, imagen, gradiente, voy a seleccionar eso y voy a poner en una imagen. Voy a elegir mi imagen. Y a partir de aquí voy a seleccionar mis prestaciones. Ahí vamos. Asegúrate de que esté centrado, asegúrate de que no tenga mosaicos y asegúrate de que esté configurado para cubrir. Y de esa manera va a cubrirse bien. Ahora, por fin, lo que nos queda por hacer a continuación es quizás, veamos, hacer algunos cambios en su interior. Entonces si entro y veamos, tal vez pueda poner algún contenido dentro de nuestro envoltorio de beneficios. Y por ahora, veamos, vamos a darle algún tamaño a este contenedor. Entonces si te llevo de vuelta a aquí, lo que tenemos para nuestros beneficios es 469. Así que usemos eso por ahora como marcador de posición. Volvamos a aquí. Por lo que los contenedores deben estar en altura 469, así. Y ahora tenemos esto. Entonces este envoltorio de beneficios y contenedor tal vez puedan vivir uno dentro del otro. Pero vamos a trabajar con el envoltorio de beneficios por ahora. Entonces voy a darle a Control K, escriba H para el rumbo. Y aquí por el rumbo con el que vamos a ir, veamos, H12, tal vez. Ahí vamos. Y va a retener todos nuestros ajustes. Así que vamos con H2 blanco. Y para eso, lo que podemos hacer es deshacernos de este margen. Deshazte de este margen aquí. Podemos ir con color blanco y podemos ir con centrado así. Y puedo escribir algo así como nuestros beneficios. Encantadora. Y por debajo de eso lo que podemos hacer es quizás crear otro div Control K escribiendo div. Este div va a tener una clase de nuestros beneficios. Algo así. Dentro de la deuda. Lo que puedo hacer es quizás crear otro. Entonces nuestros beneficios va a ser nuestro div principal. Y vamos a golpear Control K tipo en div. A este div se le va a llamar entrega gratuita. Entrega. Ahí vamos. Vamos a seleccionarlo desde aquí, pulsa Control K para escribir una imagen. Y voy a agregar una imagen rápida, que va a ser ese ícono de entrega, que es el auto con un pin en la parte superior. Ahí vamos, que es éste. Y por debajo de eso, lo que voy a hacer quizá sean anuncios. ver, tal vez un H3 Control K, h. Vamos con H3. Guarde la configuración. No, no lo hizo por alguna razón. Todos estos tres rubros, ahí vamos. Encantadora. Y simplemente voy a añadir H tres blancos. Así. Selecciónelo de aquí mismo. Asegúrate de que sea blanco. Y también asegúrate de que esté centrado así. Aquí voy a escribir algo así como entrega gratuita, allow loop. Y dentro de nuestra entrega gratuita, voy a golpear Control K una vez más y escribir P. Para el párrafo. Todos los párrafos. Tomó el estilo y voy a escribir algo así como párrafo o p o p color de cuerpo. Porque ese es el estilo que va a tomar. Y desde aquí voy a elegir el color del color de la carrocería , así. Déjame copiar y pegar ese texto. Veamos algo así. Así que copiemos y peguemos una jabalina preciosa. Y así es básicamente como va a quedar nuestro contenido. Ahora, obviamente no está centrado, así que Peabody College debería estar centrado. Ahí vamos. Y para que yo centre todos estos elementos, puedo convertirlos en un Flexbox, pero no hagamos eso porque vamos a usar nuestros beneficios y convertirlo en una grilla. Y se puede ver de inmediato centrado estos elementos en su interior de inmediato. Entonces usemos 32, igual que lo hicimos anteriormente. Y vamos a añadir una columna más. Vamos a deshacernos de esta fila. Encantadora. Y voy a golpear Control C, Control V, control V para pegar en dos ocasiones más. En esta entrega gratuita, lo que puedo hacer es convertirlo en un flexbox con vertical y solo voy a golpear justo aquí donde dice centro. Y va a centrar todo mi contenido en su interior. Encantadora. Todo está donde debería estar. Incluso puedes simplemente aplicarlo al centro, pero no creo que sea necesariamente tal vez solo colocarlo en la parte superior. Entonces, lo que podemos hacer a continuación es aquí en el centro, no necesitamos entrega gratuita, así puedo duplicar esa clase y llamarla un polaco de tres etapas. Así. Y este último va a ser, vamos a dar click aquí mismo, duplicar la parte de clase, intercambiar, parte intercambio while loop. Y en realidad agreguemos el contenido. Así que pégalo. Así. Este último va a ser parte de un intercambio y los contenidos para estar en este. Ahí vas. Ahora, en términos de H tres blancos, cuando voy a hacer es deshacerme de este top uno. Y para el de abajo, lo que puedo hacer es teclear 24. Me va a dar ese bonito espaciado que quiero. Y para la imagen, lo que puedo hacer es esto va a estar entregando icono. Y tal vez pueda poner en el margen inferior de 24 también. Este va a ser el ícono polaco. Y haz lo mismo por ello. Mientras estamos aquí, asegúrate de deshacernos de éste y usar nuestro polaco, que es este, encantador. Y finalmente, seleccionemos este que es el icono de intercambio en parte. Y en este, vamos con 24 también. Haga clic aquí y reemplázalo con el intercambio de piezas. Lo cual es, a ver, para asegurarme de verlo en mi diseño. Sí, el que tiene la llave. El que tiene la llave, que es esta preciosa. ¿Y qué podemos hacer a continuación? Ahora que tenemos todo nuestro contenido dentro, puedes ver que nuestro envoltorio de beneficios se está pegando a la parte superior de esta página. Entonces, lo que vamos a hacer es convertir un contenedor en un flexbox y luego usar nuestro envoltorio y simplemente nos aseguramos de que esté en el centro así. Entonces lo que podemos hacer es asegurarnos de que nuestros beneficios tengan el margen en la parte superior. Entonces si selecciono aquí mismo, puedes ver que aquí tenemos 64, así que eso es lo que vas a crear aquí también. Entonces nuestros beneficios deberían tener un margen superior de 64 y todo va a alinearse bastante bien. Ahora, por fin, lo que vamos a hacer es usar nuestro contenedor y desplazarnos por donde tengamos nuestra imagen. Entonces ahora lo que vamos a hacer es seleccionar el color. Entonces veamos superposición de colores tal vez. Y para el color, lo que podemos hacer es quizá usar este. Así que el cabello oscuro y el color y simplemente reducirlo en un 10% más o menos, tal vez incluso un poco más, algo así. Entonces en este caso, porque está al revés, tal vez podamos ir al 80% solo para que podamos tener el mismo efecto que tuvimos en XD. Entonces, si lo llevo a XD, puedes ver cómo se ve eso. Entonces si presiono Control Entra aquí, lo siento, Control, Control Enter para la vista previa y desplázate a la derecha, aquí mismo. Se puede ver que ahora tenemos ese efecto. Entonces creo que eso funciona bastante bien. El siguiente paso es nuestro foro. Entonces sigamos adelante y rematemos esto, porque creo que esto se ve bastante bien. Y no creo que no sean necesarios más cambios a esta sección, para ser sinceros. Y va a funcionar bastante bien porque es una grilla. Cuando empecemos a cambiar el tamaño de estos, obviamente solo vamos a empujar el contenido uno encima del otro. Pero por ahora, todo funciona como debería. Estos préstamos, comencemos desde arriba. Entonces aquí tenemos esto, tenemos esto, tenemos estas tarjetas funcionan bien. Tenemos esta sección que funciona como un encanto, y luego tenemos esta sección. Entonces estoy bastante contento con cómo se ve esto. Y en la siguiente sección, como dije, vamos a abordar en el foro. Entonces te veré ahí. 174. Formulario de contacto: Bien, continuemos ahora con el formulario Contáctenos. Y antes de pasar al flujo de trabajo, recordemos rápidamente cómo se ve en XD. Entonces aquí tenemos el texto que es Contáctenos, entonces tenemos un campo de formulario completo o InputField. Esta va a ocupar seis columnas o tres columnas más altas, quieres llamarlo porque esto va a ser una grilla. Y éste va a tomar un poco más de espacio porque va a ser un poco más alto para que el mensaje acompañe al espacio para el mensaje. Por último, solo vamos a reutilizar nuestro componente de botón principal con el mensaje de envío. Así que vayamos a Webflow. Y lo primero es lo primero, siempre hay que golpear Control K y escribir en sección. Y una cosa que quiero mencionar es que puedes ver que ahora el flujo de trabajo está ahorrando. Y cuando haga clic en la sección C justo aquí y allá vamos. Y nos va a mostrar esa marca de verificación. Se puede ver que todavía tenemos cambios no guardados, pero cuando se guarda va a mostrar ese cambio guardado. En lugar de aquí, lo que voy a hacer es presionar Control K type in div, div block presenter. Y para el bloque div, voy a agregar una sección de contenedor, así, ahí vamos. Dentro de ese contenedor, voy a agregar otro. Así que golpea, y ahí tienes. Ahora salvó nuestros cambios. Golpea Control K, escribe div, así. Y a este, voy a llamar forum wrapper, e.g warm wrapper porque una vez más va a envolver esa forma dentro de nuestro campo. Entonces vamos a abrirla. Y dentro de la deuda, primero seleccionemos esta sección y llamemos foro. Veamos qué podemos hacer. Llámenlo un formulario de contacto. Porque a lo mejor vas a tener diferentes foros en tu sitio web. Y para esta sección, una vez más, vamos 200 con el margen superior. Entonces va a empujar ese contenido muy bien por dentro. Ahora, dentro de este contenido, lo que puedo hacer es veamos, tal vez donde dice envoltorio de foro dentro de este contenedor puedo golpear Control K y M es algo así como un encabezado H2 y buscar H2 centrado en voz alta. Y aquí simplemente voy a escribir contáctanos. Y una vez más, debido a que está directamente en HTML debajo de nuestro elemento principal, voy a posicionar el Form Wrapper a continuación, que va a empujar el Contáctenos arriba. Para el propio envoltorio del foro, le voy a dar un margen superior de 64. Así que mantenemos ese aspecto agradable y consistente de nuestro diseño. Dentro del Form Wrapper, lo que puedo hacer es presionar Control K type in form. Y simplemente va a agregar este bloque de formulario en su interior. Cuando haga clic en él, lo va a meter. Y así es como se ve. Entonces si cierro esto, tenemos el nombre, tenemos la dirección de correo electrónico y tenemos el botón adentro. Así que dentro de Form Wrapper tenemos nuestro bloque de formulario. Entonces tenemos el elemento forma en sí. Aquí tenemos la etiqueta de campo. Y este primero, vamos a llamarlo e.g. I. No lo sé. Nombre completo. Eso es lo que antes era. Y dentro de nuestro TextField, lo que puedo hacer es cuando haga clic aquí mismo, vamos a decir el nombre, vamos a decir el tipo. Y finalmente para el marcador de posición, voy a escribir en ingrese su nombre completo. Y puedes ver ese texto apareciendo aquí mismo. Ahora bien, en cuanto al estilo, lo que puedo hacer es por esta etiqueta de campo, lo que puedo hacer es deshacerme de esta. Pero en realidad no, vamos, veamos qué teníamos en XD. Entonces aquí tenemos 16, y esto obviamente es 16, esto es 24. Así que vamos a hacerlo en Webflow. Entonces esto va a tener el acolchado inferior de 16, un vivaz. Y éste va a, tengo el acolchado inferior de 16 también, así como así. Y nuestro campo de texto, Volvamos a XD va a tener la distancia 32. Veamos, la etiqueta de campo de campo de texto puede tener 32, por ejemplo, ahí vamos. Por último, este de abajo, pero no, no ese campo de texto debería tener 32. Ahí vamos. Y TextField, Este también debería tener 32, así. En lugar de dirección de correo electrónico, lo que necesito aquí mismo es, sí, vamos a escribir el correo electrónico y hacer clic en el campo de texto a lo que voy a hacer es ingresar marcadores de posición, así que ingrese su correo electrónico. Y ahora tratemos de algunas clases. Entonces lo primero es lo primero, este va a ser un texto de campo. Vamos a darle una clase de bloque de texto. Así que quita la clase y vamos a darle una clase de textblock en realidad. Entonces soy al estilo Qin, lo que quiera aquí mismo. Así TextField y forma. Lo siento. Entonces aquí lo que voy a hacer es en lugar de perno, voy a ir con irregular. Y en lugar del color del disco, podría usar algo como este color. Sí, creo que eso funciona bien. Veamos qué teníamos aquí mismo. Ahora aquí en realidad teníamos ese color gris pero simplemente regular. Entonces volvamos a aquí. Así que vamos con el color gris, irregular. Ahí vamos, y vamos a ajustarlo a 16. Aquí. Ahí vamos. Entonces ahora tenemos libros de texto y un bloque de texto y forma. Entonces, seleccionémoslo aquí mismo. Así que eliminar el bloque de texto de la clase y la forma era la clase combo. Y ayuda, pero no para eso, sino para esto. Quitar el formulario de bloque de texto. Trabajo precioso. Entonces ahora tenemos eso. Y sigamos adelante y diseñemos esto. Entonces en estilo del campo de texto, lo que puedo hacer es seleccionar ese texto. Y veamos cómo podemos darle estilo a eso. Entonces tal vez podamos ajustar esto. Digamos que avión recibe un correo electrónico de y puedes acceder a todos estos para el éxito y para el error. Para que puedas ver cómo se siente el éxito, cómo se ven los campos de error, pero solo vamos a apuntar al principal. En términos de un TextField. Mostrar todos los ajustes aquí mismo. Y para el tallado, vamos con algo así como Poppins. Poppins también con 16. Y vamos con 24 aquí mismo. Y vamos por el color de éste. Y éste. Vamos con un color más oscuro. Creo que se verá muy bien. En lugar de TextField, cambiemos el nombre de la clase y llamémosla por ejemplo, campo de texto del foro. Ahí vamos. Y por la razón que sea no cambió. Entonces tal vez la opacidad está jugando un papel en ella. Entonces, si le pego a la vista previa justo rápido, ahí tienes. Entonces funciona, pero por la razón que sea, no cambió aquí mismo. Entonces, ¿qué podemos hacer dentro de la cuadra? ¿Campos de formulario? Vamos a ajustar esto para que se vea como en XD. Entonces aquí tenemos 16 en cada lado, por ejemplo así que vamos a ajustar eso. Entonces para el emparejamiento en el campo de texto del formulario, voy a ir con relleno de 16 aquí mismo. Acolchado de 16 aquí mismo, o simplemente en este lado. De este lado va a ser cero. Pero por la razón que sea , va a, no me va a permitir hacerlo. Entonces tal vez si selecciono mi configuración de campo de texto, entonces formulario campo de texto. Así que vamos con eso y déjame cambiarlo a tal vez a ocho. Y esto puede ser a ocho también. Entonces estoy encantado de que esto pueda ser 16, Este puede ser 32, así empuja hacia abajo y se términos del dimensionamiento, vamos con la altura de 50. Y ahora tenemos lo que necesitamos. Y el texto dentro de una mirada. Se ve bien. El color debe ser blanco, así que está bien. Entonces campo de texto del foro, vamos a aplicar ese formulario. Campo de texto. Ahí vamos. Tenemos lo mismo por dentro y tenemos el estilismo y acompañamiento a esto. Ahora vamos a cerrar esto rápidamente porque tenemos este botón de enviar. No lo necesito. Voy a presionar Control K y teclear botón. Y por dentro solo agregaré nuestro botón principal, así. Ahí vamos. Y para nuestro botón principal, uno a la derecha es enviar un mensaje como este. Y ahora que esto se ha completado, lo que puedo hacer es simplemente tal vez poner en un div Control K tipo en div. Y este bloque div puede alojar estos dos grupos. A veces pueden ser un poco tercos. Simplemente ponlo dentro del bloque de texto, dentro. Ahí vamos. Y a este bloque de def podemos llamar por ejemplo campo de nombre así. Y ese campo de nombre realmente no necesita tener ningún estilo adicional. Creo que está bien. Ahora vamos a crear otro. Así que seleccione el Control de formulario K para anexar div. Ponlo justo debajo de nuestro campo de nombre y pon esto dentro de eso. Así. Lo que voy a hacer tal vez es llamar así a este correo electrónico. Voy a darle a Control C, Control V en este correo electrónico, lo que voy a hacer es cambiarle el nombre, pero primero duplique la clase, y ahora cambiarle el nombre a teléfono. Aquí voy a seleccionar éste. Voy a escribir aquí el teléfono para el texto. Esto va a ser divertido. Va a ser ingresar tu número de teléfono. Así. Encantadora. Y aquí vamos a ver, para el correo electrónico, Vamos a ajustar esto. Entonces este es el correo electrónico, está bien. Y este es el nombre, entonces nombre, correo electrónico. Y aquí tenemos qué? Tenemos el número de teléfono, como el teléfono, ahí vamos. Y por último, lo que voy a hacer por éste es golpear Control C, Control V. Y éste va a ser, así que duplicar la clase va a ser mensaje así dentro del mensaje aquí. Digamos algo así como mensaje. Aquí vamos a escribir el mensaje en voz alta. Y en vez de ingresar tu número de teléfono, lo mejor pueda decir algo como escribir tu mensaje. Por último, lo que quiero hacer es deshacerme de esta frontera. Así que selecciona cualquiera de estos y da clic aquí y luego aquí mismo, y va a deshacerse de cada borde. Entonces cuando hago clic, puedes ver cómo se ve. Entonces creo que se ve bastante bien. Pero obviamente tenemos que ponerla ahora dentro de una grilla y alinearla un poco más. Entonces, ¿cómo podemos hacer eso? En realidad es súper simple. Usemos nuestro envoltorio de foro, que esta vez va a ser nuestra grilla . Así que haz clic aquí mismo. Y entonces lo que necesitamos es por ejemplo seis columnas diferentes. Entonces digamos 123456. Y digamos para las filas, necesitamos algo así como, no sé, tal vez cinco filas. Entonces ya tenemos uno aquí, así que 12345. ¿Y por qué necesitamos eso? Es bastante sencillo porque sólo vamos a gastar estos. Así que vamos a seleccionar el campo de nombre. Veamos qué podemos hacer. Así bloque de formulario de texto. Veamos cómo podemos ajustar la dosis. Sí, creo que lo que necesitamos no está aquí. Entonces pongamos esto para exhibir. Pero lo voy a hacer es en el propio formulario en realidad, pongamos que eso sea nuestra grilla. Entonces una vez más, 23456. Sí, está bien. Y aquí dijimos 12345. Ahí vamos. Así que ahora vamos a seleccionar, vamos a ver nuestro campo de nombre y haga clic aquí mismo en la esquina con este punto es y simplemente abarcarlo. Para ocupar todo el ancho de tu página. Después toma el correo electrónico y lo abarcan tres columnas. Entonces 123, Eso es lo que vamos a hacer aquí mismo. Ahí vamos. Toma el teléfono 123 y toma el mensaje, abarcarlo todo el camino hasta aquí. Y en cuanto al mensaje, pero puedo hacer es girarlo para tomar el ancho de las dos columnas. Ahí vamos. Y ahora simplemente selecciona nuestro botón. Y lo que podemos hacer es tal vez abarcarnos en toda la sección. Pero en realidad saber lo que vamos a hacer es tal vez abarcar es solo una columna o algo así. Y entonces tal vez podamos ir justo aquí y escribir en último así que se pierde y tal vez posicionarlo a un lado justo aquí y tal vez simplemente abarcarlo todo el camino hasta aquí. Ahí vamos. Ahora tenemos nuestro botón. Entonces ahora lo último que tenemos que hacer es simplemente ajustar el ancho de esta sección de mensaje. Entonces, ¿cómo podemos hacer eso? Es necesario ajustar la altura de la misma para el campo de entrada de texto. Así que volvamos a nuestro campo de mensaje de texto foráneo. Y voy a agregar una clase combo de mensaje porque recuerden que son 50, pero aquí quiero uno B17, por ejemplo, Derek go. Y ahora lo que puedo hacer es quizás, veamos. Necesito asegurarme de que mi texto esté en la parte superior. Entonces tal vez pueda lidiar con el acolchado en este caso. Entonces para éste, qué puedo hacer por el acolchado inferior aquí, lo mejor pueda ir con el 112. Ahí vamos, 168. Y para ésta, ¿debería ponerla a cero? Sí, creo que eso funciona bien. Así que solo juega con los valores de relleno. Juega con un valor de margen c, donde estás en tu diseño. Así que ahora cuando me pega a vista previa, se puede ver el nombre completo y hago clic aquí mismo, va a tirar en mi información, mi información de correo electrónico. Y para el mensaje, lo mejor puedas escribir es algo que yo Hola chicos. ¿Cómo te va? Pero antes de enviarla, en realidad tengo que conectar esta forma dentro de mi diseñador como ya te explicó. Ahí, puedes poner el correo electrónico de tu cliente y por lo tanto, va a poder enviarlo realmente a donde quieras que lo envíe. Entonces, ¿a qué dirección de correo electrónico? Sigo pensando que este botón tal vez solo se toque demasiado grande. Entonces si hago clic en él y veo 16, tal vez si ajusto esto a ocho, estamos bien. No. No, no creo que lo haga. Así que dejémoslo como si estuviera ahí mismo. Creo que va a funcionar como es. Entonces ahora que creamos eso, porque vamos a reutilizarlo a lo largo de nuestro diseño. Lo que vamos a hacer es hacer clic aquí mismo, crear un nuevo símbolo y llamarlo por ejemplo Formulario de contacto. Aquí vamos, creamos simple, y ahora tenemos el símbolo para el formulario Contáctenos. Podemos volver a la instancia. Y ahora cuando golpeé la vista previa, nada cambia realmente, pero aún así lo tenemos ahí. Además, cuando hago clic aquí, se puede ver porque tenemos ese relleno de 20 píxeles dentro de nuestro contenedor todavía lo contiene en su interior. Pero ahora cuando ajuste esto, obviamente tendré que ajustar estas columnas un poco más tarde, pero se puede ver que responde bastante bien en responsive. Entonces ahí vamos. Ahora, la siguiente sección que vamos a hacer es la sección con el mapa. Entonces te veré en el siguiente video donde vamos a abordar eso. 175. Sección de mapas: Ahora vamos a tratar con el mapa. Y aquí estamos en XD y solo puedes ver el contenido aquí. Entonces vamos a tener este contenido de izquierda y derecha igual que lo hicimos anteriormente con la sección superior. Y entonces vamos a tener este texto dentro y la dirección. Para la dirección y el icono va a ser lo mismo que creamos aquí mismo. Entonces si selecciono eso, se puede ver que esta tiene la pila de 16, la distancia entre estos dos. Y obviamente esto va a tener un poco de espaciado de 24, y aquí va a tener el espaciado de 32, aquí, 24. Entonces saltemos dentro de la OLP y empecemos a construir esa sección. Entonces veamos lo que podemos hacer aquí mismo es ir al cuerpo, golpear Control K, escribir en sección, y volver al diseñador, darle una clase de sección. Lovely Control K div, bloque div. Y para esta sección, porque esta era la forma para esta sección, voy a gritar, por qué no lo hizo. Espera, espera, espera, espera. Creo darle una clase de sección por alguna razón. No, no importa. Y voy a escribir algo así como un mapa. Ahí vamos. Ahora este bloque def va a ser contenedor. Y dentro de ese contenedor voy a darle otro div, llamarlo map wrapper. Ahí vamos. Y para esta sección, voy a dar un margen, margen superior de 200. Ahí va, así puedo distinguirlo un poco. Ahora dentro de este envoltorio de mapas, que voy a convertir en un flexbox. Voy a poner en el contenido del sitio. Entonces poniendo div y este bloque div, podemos llamar a algo así como contenido de mapa o algo así. Entonces veamos dónde estamos contentos, dónde estamos contentos. Y solo nombra este envoltorio de mapas. Entonces tal vez podamos cambiarle el nombre a donde Somos rapero porque podríamos tener mapas en diferentes lugares en nuestro sitio web más adelante. Entonces solo déjalo así, vívelo así. Así que asegúrate de que estos dos estén centrados. Y lo que vamos a hacer dentro de aquí es simplemente agregar un mapa, entonces Control K escribe en mapa. Y aquí tenemos un mapa. Entonces solo va a agregar tu mapa por dentro. Y debido a que ya puse mi clave API, vas a obtener tu clave API creando tu cuenta de Google. Si aún no tienes uno, tienes que poner los datos de tu tarjeta de crédito. Ahora vamos a construirnos. Google solo necesita verificar que eres humano y que eres un negocio. Si estás haciendo esto como tu propio negocio, probablemente sea prudente crear esta clave API porque vas a crear esto para tus clientes de nuevo. Pero si no eres, un negocio, asegura de que tu cliente cree esta cuenta, simplemente escribe la clave API de Google N te va a mostrar para el mapa, te va a llevar a este Google Cloud. Y como ya te expliqué, cuando entres a Ajustes aquí mismo, así que ve a la configuración del proyecto. ¿Puedo ir justo aquí? Y veamos por las integraciones. Vamos a cargar, por favor. Ahí vas. Google Optimize y luego tienes Google Maps. Así que puedes dar click aquí mismo donde dice clave API JavaScript de Google Maps. Y vas a obtener esta clave API que puedes simplemente copiar y pegar. Justo ahí. Puedes presionar Guardar y te va a mostrar este mapa. Pero una vez más, lo mejor es que o tú, si estás haciendo esto todo el tiempo, porque va a ser súper sencillo para ti simplemente copiar y pegar la clave API en tus proyectos futuros y simplemente cambia el nombre y tu dirección más tarde cuando lo necesites. O tu cliente, si necesita el mapa, entonces puede crear una cuenta. Va a ser gratis para ellos. Solo hay que ponerlo en la información de la tarjeta de crédito Google pueda verificar que son humanos. Obviamente si empiezan a recibir tráfico directamente de este mapa. Entonces la gente toma este mapa, clic en él, va al mapa y va a la navegación, por ejemplo para el auto, para el paseo o lo que sea, entonces Google va a navegar por eso y ver cuántas visitas hace el negocios tienen y empiezan a facturarlos al final del ciclo, creo que es algo así como 200 visitas o 300 visitas gratis y luego va a empezar a facturarles así. Entonces este es nuestro Google Map, esta es nuestra clave API. Entonces lo que voy a hacer es seleccionar mi contenedor y seleccionar mi mapa. Ahí vamos. Haga clic en seleccionar aquí mismo porque quiero ingresar la dirección. Entonces déjame volver a XD. Aquí tengo la dirección en Belgrado, Serbia. Y déjame volver a aquí. Obviamente puedes tomar la dirección que quieras. Entonces tenemos a este presentador y va a actualizar esa dirección más adelante cuando realmente vayas en vivo y la veas. Y se puede ajustar esto a carretera, terreno, híbrido satelital, pero sólo voy a dejarlo en carretera. Entonces vamos a ver. Puedes dejar esto así. Puedes acercar si quieres, pero dejémoslo así por defecto. Entonces lo que podemos hacer aquí en este caso es, veamos, tal vez podamos darle el ancho de contenido del 40%. Así. Sólo vamos a empujar nuestro mapa y tal vez podamos darle el margen aquí de, veamos, 64. Tal vez. Ahí vamos. Y creo que eso va a empujar muy bien nuestro mapa. Pero aquí en este caso aquí tenemos los mapas más amplios, así que es 683 por defecto. Entonces si voy aquí a mi mapa, obviamente puedo agregar el ancho máximo, por ejemplo es 683, algo así. Y sólo va a empujar mi contenido así. Resulta que la alta tecnología puede ir con algo así como el 100%, que va a ocupar el 100% de mi contenido aquí. Pero como no tengo ningún contenido, probablemente debería comenzar a agregar ese contenido. Así que hagamos clic aquí mismo y reiniciemos eso solo para que podamos ver nuestro mapa. Entonces, donde estamos contentos, lo que vamos a hacer es por ejemplo poner los encabezados H2. Entonces Control K escriba en rumbo, seleccione nuestro H2. Ahí vamos y veamos qué tenemos. Entonces H2, oscuro Live. Y para esa, lo que puedo hacer es ver, tal vez por qué, por qué no guarda la configuración. No sé por qué está pasando. Así que vamos a eliminar la clase, todos los encabezados H2. Aún mantiene el área por cualquier motivo. Entonces espero que estés teniendo este problema. Entonces H2 y solo seleccionamos esto, entonces 32. Y veamos dónde estamos aquí. Entonces estamos a los 56. Entonces 32.56, aquí mismo. Ahí vas. Ese va a ser nuestro rumbo H2. Y vamos a estilizar eso para que sea h a oscuro. Sí, está tomando clases de todos los rubros H2, pero no me demuestra que sí importa. Así que vamos a dar clic aquí mismo, así donde estamos, así. Y luego por debajo de eso, vamos a golpear Control K tipo en bloque de texto, darle una clase de bloque de texto, así. Y simplemente seleccionemos copiar nuestros textos, ponerlos dentro. Ahí vamos. Y ahora para las distancias, veamos lo que podemos hacer es por este bloque de texto, lo que puedo hacer es poner en donde estamos. Por cualquier razón mantiene el espaciado de 20. Vamos a darle un espaciado de 32 en realidad en este caso. Entonces, pero simplemente cámbielo a donde estamos como endeudados. Y en vez de 20 torr, vamos con 32. Ahí vamos. Entonces empuja esto hacia abajo. Y en términos de esto, lo que puedo hacer es bloque de texto donde estamos así y abajo debería ser 24, 32. Ahí vas. Porque si te llevamos de vuelta a mi diseño, puedes ver que aquí tenemos 24 y aquí tenemos 32. Así que volvamos a aquí. Esto en realidad debería ser 24, perdón por eso. Esto debería ser 32. Ahora estamos bien. Entonces lo que voy a hacer a continuación es poner un diblock Control K escribiendo div, div block. Y el primero va a ser para la dirección, la dirección dentro de ese bloque div. Lo que voy a hacer es escribir en otro div bloques de control. Kate había sido dividida bloque, y este va a ser el título e.g Veamos, vestido, título así. Y dentro de ese hit Control K escribe en imagen. Para la imagen, voy a elegir ese icono de pin, que va a ser, obviamente puedes usar la búsqueda, pero no quiero confundirte aún más, que es este precioso. Y dentro de ese título de dirección, lo que voy a hacer es darle a Control K escribir en párrafo y usar todos los párrafos. Veamos, por la razón que sea, no cambió esto. Poppins 16, 24, y este color debe ser h tres párrafos. Entonces esto, como dije, por cualquier razón, no cambió la deuda. Así que vamos con el aquí. Así que vamos con un vestido así. Y aquí voy a agregar el icono de clase de dirección. Ahí vamos. Y título de dirección. Vamos a poner dentro de los flexbox, asegurarnos de que estén centrados. Y asegúrate de que veamos qué podemos hacer aquí. Para ello. Por cualquier razón no están centrados. Veamos qué podemos hacer aquí. Parece párrafo. Sí, así es. Así que ve a cero. Ahí vamos. Porque tenía que estamos acolchando párrafo. Entonces, ¿dónde se dirigen el icono es? Solo dale un margen de 16 en el lado derecho porque solo queremos imitar nuestro diseño. Tengo este espaciado. Entonces si selecciono esto, se puede ver que la pila está en 16 píxeles, así mismo como lo hicimos aquí mismo. Entonces lo que voy a hacer a continuación es usar esta dirección. Y en realidad tenemos el título, así que le pego Control K escriba en P para el párrafo. Y dentro de ese párrafo, probemos todo H1. Ahí vamos. Ahora lo guardó y simplemente vamos a pegar en nuestra dirección un título encantador, este dirigido. Veamos qué podemos hacer aquí. Entonces estamos a distancia de 16, así podemos darle un acolchado inferior de 16. Así abordó el título, relleno inferior de 16, lo que va a empujar nuestra dirección un poco hacia abajo. Después selecciona nuestra dirección, pulsa Control C, Control V, Control V dos veces. Encantadora. Y aquí lo que podemos hacer es este medio deberían ser los números de teléfono. Entonces duplica el número de teléfono de la clase. Este interior debe duplicar el título del foro de la clase y deshacerse de este texto de copia así. Y esto debería ser duplicado. Entonces debería ser divertido. Encantadora. Entonces, sigamos adelante y comencemos a reemplazar estos. Entonces esto debería ser divertido. Busquemos el teléfono donde está. Ahí vamos. Entonces esto, en lugar de dirección, debería decir número de teléfono. Y en lugar de muertes debería ser más 381-123-4567. Entonces solo un número aleatorio. Y finalmente, para esta última, debería ser horario de apertura, duplicar la clase. Horarios de apertura así. Y dentro de la deuda, podemos hacer es duplicar. Entonces tal vez podamos llamarlo algo así como horario de apertura, título, animado. Y una vez más por fin, para el icono de dentro, en lugar de un vestido, duplicar. Vamos a darle la clase de reloj, icono de reloj porque eso es lo se va a presentar ahí. Vamos a ubicarlo aquí mismo. Veamos dónde está. Entonces icono del reloj, ahí vamos. Y por último, hagámoslo. Entonces horario de apertura. Y aquí vamos a escribir algo así como de lunes a viernes, dos a 04:00 P.M., sí. Creo que eso va a funcionar bien. Entonces ahora que ya lo has hecho, lo que necesitamos es poner en el espaciamiento entre ellos. Entonces, si hago clic aquí mismo, pueden ver que el espaciado es de 24, así que vamos a tratar con eso ahora. Por lo que la dirección debe tener un margen inferior de 24. número de teléfono debe tener el margen inferior de 24. Y el horario de atención debe permanecer igual. Ahora cuando selecciono mi mapa y le renombro a mapa, gritos. Renombrarlo a main, nuestro mapa principal. Prueba eso. Ahí vamos. Y ahora la altura se puede alterar para rellenar esto, o puede ser del 100 por ciento para llenar el espacio de este contenido. Pero por la razón que sea, no llenó eso. No entiendo por qué. Entonces volvamos al valor predeterminado y dejemos que se aplique. O podemos volver a XD y ver la altura del 507. Entonces tal vez podamos ajustar eso. Por lo que el mapa principal debe ser 507. Ahí vamos. Y ahora solo se llena de una manera mucho más amena. Entonces, si golpeo la vista previa muy rápido, esta es una vista de vista previa de mapa genérica, mapa real en sitios publicados. Entonces tenemos que publicar nuestro sitio web, ya sea dominio de dos etapas, que es este , o dos dominios personalizados, que es este, para poder ver la ubicación, pero realmente no nos importa en este momento. Va a funcionar bien porque lo configuramos ya dentro de Google y dentro de Webflow. Entonces aquí todo está, como debería ser, todo se posiciona correctamente. Todo funciona como queríamos trabajar. Y aquí podemos establecer esto en horizontal o vertical. Puedes ver cómo se ve esto más adelante para que respondan. Entonces todo funciona bien. Entonces este es nuestro mapa. Lo último que quiero hacer es volver a aquí donde dice símbolos, crear un nuevo símbolo. Voy a llamarlo mapa. Crea un símbolo. Ahí vamos, y ahora tenemos ese símbolo. Y ahí vamos. Una última cosa que creo que debemos hacer es seguir adelante y crear nuestro pie de página. Y te veré en el siguiente video donde vamos a hacer precisamente eso. 176. Sección de pie: Bien, ahora sigamos adelante y creamos este pie de página y rematemos nuestra página de inicio. Y luego más adelante en la siguiente lección podremos abordar esa página de colección CMS, que va a ser el salto central de nuestra página. Pero por ahora, solo tratemos con el pie de página en sí. Entonces lo que puedo hacer es volver a Webflow aquí mismo. Y acabamos de crear nuestros mapas. Así que vamos a seleccionar nuestra sección de pines tipo Control K de golpe corporal. Y vuelve al diseñador, dale una clase de sección así. Dentro de esta sección, voy a poner en el bloque div, que voy a llamar contenedor un animado. Y esta sección va a ser Pie de página. Y va a tener el margen de 200 en la parte superior. Encantadora mezcla. Y dentro del contenedor, lo que voy a hacer es darle a Control K para abrir div y llamar a este rapero de pie de página. Así. Y dentro del rapero de pie de página, lo que puedo hacer es poner a mi imagen. Entonces Tecla de control, imagen. Para mi imagen, elegiré mi logo, que es este. Vamos. Y el envoltorio de pie de página solo tiene la imagen ahora mismo. Y lo que también puedo hacer es poner esos textos de fondo, así Control K, escribir P para el párrafo y heredar todos los párrafos. Ahora funciona bien, lo cual es encantador. Déjame copiar ese texto, colocarlo aquí mismo. Y vamos a darle una clase de p. Veamos p color del cuerpo, p centrado. Estar centrado para el párrafo centrado. Y solo voy a dar click aquí mismo y va a centrar ese texto a continuación. Pero también necesito son esos cuatro íconos y la navegación desde la barra de navegación. Entonces voy a hacer trampa un poco. Así que solo abre tu barra de navegación y encuentra tu contenedor. Y veamos el menú de navegación. Puedo presionar Control C para copiarlo desde aquí, simplemente puedo volver a mi instancia, volver a mi pie de página va a saltar ahí y pegarlo justo encima del párrafo mismo. Para que veas, tal vez pueda volver a ella y ajustarla aquí. Entonces vamos a ver. En lugar del menú de navegación, puedo cambiarle el nombre de clase a elementos de navegación. Ahí vamos. Y voy a tomar todos estos y quizá colocarlos abajo en la parte inferior. Intentemos esto una vez más. Así que dale Control C, vuelve a aquí, control V, No funciona. Entonces volvamos a aquí y veamos qué podemos hacer porque siempre trato de navegar por esto. Entonces tenemos una clase de enlace de navegación. Entonces volvamos a aquí, y voy a darle a Control K para convertir este texto en un enlace de texto. Ahora probemos con el enlace nav. Ahora pestañea. Ahí vamos. Y sólo nos va a dar el mismo texto que hicimos antes. El primero van a ser los autos. Ahí vamos. Y pongamos eso en un bloque div, div. Poner el texto dentro de él llamado el bloque div. Digamos que nav vincula el pie de página. Enlaces pie de página. Ahí vamos. Y vamos a duplicarlo dos veces más. Entonces Control C, Control V, Control V, Ahí vamos. Este enlace de navegación debería tener el margen de 24, creo que sí vamos a comprobarlo muy rápido. Ahora items nav link. En realidad tiene el acolchado de 20. Y este último. ¿Bien? Entonces, vamos a lidiar con la deuda. Entonces si vuelvo al link de navegación aquí, vamos a darle en realidad el emparejamiento de 20 aquí. Entonces todos ellos tienen maridaje de 20, bonito. Y en el lado izquierdo también. Encantadora. Así que ni siquiera necesitamos eso en el lado izquierdo. Entonces vamos con cero y éste, sólo voy a darle una clase combo de último, último, y va a quitar ese emparejamiento de ceros. Entonces autos, aquí vamos a tener préstamos. Y por último, vamos a tener contacto con nosotros, contáctenos. Ahí vamos. Entonces ahora que tenemos eso, vamos a posicionarlo aquí. Una última cosa que quiero hacer es presionar Control K escribiendo div. Y a este div, voy a llamar así a los íconos sociales. Y dentro de eso, voy a golpear Control K tipo en imagen. Y entonces tal vez pueda copiarlo de inmediato. Entonces Control C, Control V, Control V, Control V, porque sabemos que tenemos cuatro de estos. Y en realidad los cuatro deberían ir aquí. Entonces, no, este no cometió un error. Debería copiar esta. Control C control V, Control V, control V. Ahí vamos. Y voy a entregar un flexbox y en la imagen, vamos a darle esto, veamos Facebook. Y veamos qué tenemos en el contenido mismo. Tenemos 24. Entonces volvamos a aquí y le demos un margen de 20 para este próximo debería ser Twitter. Y vamos a darle un margen de 20 para este próximo debería ser YouTube, margen de 24. Y este último debería ser LinkedIn, creo. Y no debería tener ningún margen. En esta ocasión. Para el Facebook haz clic aquí mismo, luego elige la imagen y déjame elegir el ícono de Facebook, que es, que es este encantador. Entonces para éste tenemos Twitter. Entonces escojamos el Twitter. Para este tenemos YouTube. Aquí vamos. Y finalmente para este tenemos LinkedIn. Así que localicemos nuestro LinkedIn. Aquí vamos. Entonces ahora que tenemos todos nuestros íconos, lo que voy a hacer es poner estos dos en otro div para que pueda espaciarlos de manera uniforme. Entonces vamos a darle un control. K una vez más escribiendo div. Esto va a ser contenido de pie de página. Y dentro de ese contenido de pie de página, coloquemos estos dos como así que asegúrate de que estos estén aquí. Seleccione el contenido del pie de página, active el flujo y encienda esto para que pueda distribuirlos de manera uniforme, así. Y los íconos sociales, lo que podemos hacer es, creo que son un poco grandes. Así que por cualquier razón tienen el ancho máximo. Porque para todas las imágenes, así que si escribo en cero, veamos, los anchos deberían ser. A lo mejor la opción es tener la altura porque van a tener la misma altura de 24. Entonces volvamos a este. Así. Por lo que la altura debe ser de 24 píxeles. ¿Lo es? ¿Eso es correcto? Sí, hola a 24. Seleccione éste. La altura debe ser de 24 px. Así que simplemente puedes escribir lo que quieras dentro de Webflow. Así que 24 px dentro de la altura y se puede ver cómo se ajustan fácilmente. Entonces 24 p. x. ahí vamos. Y ahora coloquemos esto en el centro, así. Y ahí vamos. Ahora se ve como debería. Estoy contento con ello. Y ahora por fin lo que podemos hacer es seleccionar nuestro pie de página, convertimos en un flexbox y asegurarnos de que esta vez sea vertical. Y asegúrate de centrar todos nuestros artículos. Ahí vamos. Y ahora lo que puedo hacer, quizá darle un tramo. Sepa, veamos qué podemos hacer aquí. Tal vez podamos ajustar algunos de estos elementos. Entonces vamos a ver. A lo mejor podemos darle a esto el ancho del 100%. No funciona. En realidad no, vamos a deshacernos de éste. Digamos que quédate con la eliminación y con la imagen. Entonces sí, en realidad, podemos poner en la grilla, pero antes de hacer lo que necesito aquí mismo es reemplazar esto con el enlace. Entonces lo que puedo hacer es entrar aquí mismo y usar la marca porque la marca es en aquí mismo y usar la marca porque la marca es realidad nuestro logo hit Control C. Voy a reemplazar mi imagen aquí mismo, que es la marca que acabo de tomar. Así que pulsa Eliminar, porque una vez que realmente arreglemos la marca, va a enlazar a una parte específica de la página. Entonces aquí mismo lo que puedo hacer por mi envoltorio de pie de página, en lugar de este contenido de pie de página, como acabo de mostrarte, lo que puedo hacer es realmente empujarlos afuera. Así. Ahí vamos. Y ahora podemos crear nuestra grilla. Entonces para ello, simplemente selecciona el envoltorio de pie de página, crea nuestra cuadrícula. Y lo que voy a hacer aquí mismo es quizá también. Sí, podemos tener dos columnas, pero podemos tener por ejemplo cuatro filas. Entonces primero va a ser porque el logo va a pasar toda la fila. Estos dos van a tener el suyo, y este va a tener su propio tipo C3, creo que va a estar bien. Toma un lapso más largo, todo el ancho del mismo. Pero no, es como si la marca realmente abarcara el ancho de la columna misma. Se asegura de que esté así en el centro. Entonces estos dos van a estar bien porque están aceptando, cada uno está tomando este tamaño, pero este. Deberían alinearse a la derecha, así. Y luego finalmente tenemos centros de párrafos. Así que vamos a rodear la luz aquí. Y vamos a darle al pie de página central del párrafo. Y tal vez le podamos dar ese margen inferior de 64. Muerte Negra. Entonces va a empujar aún más nuestro contenido. Por último, lo que quiero hacer es quizás darles un poco más de espaciado a estos. Entonces aquí tenemos, veamos, 64, creo que 69, pero vamos con 64. Y aquí tenemos 64 también. Entonces hagámoslo rápidamente. Entonces aquí lo que puedo hacer es quizás vayamos con el pie de página del logotipo de la marca. Y voy a saltar dentro de la barra de navegación. En lugar de una marca. Voy a llamarlo logo. Solo logo. Bien. Y viniendo justo aquí. Ver para esta carpeta logo, voy a darle el margen inferior de 64. Encantadora. Y veamos qué podemos hacer aquí mismo. Tal vez o los íconos sociales son enlaces de navegación pie de página, o incluso mejor. Podemos ir con el párrafo y darle el margen superior de 64, que sólo va a mantener estos desatendidos y un trazable. Entonces aquí tenemos nuestro pie de página y ahí vamos. Todo se ve precioso. Todo parece como pretendemos. Entonces, una última cosa que hay que hacer aquí mismo es convertir estos en estados suspendidos. Entonces para hacer eso, lo que voy a hacer es intentar endeudarse. Entonces nos ciernemos. Todo lo que necesito hacer es reemplazar el color con esto. Pero ahora solo se trata de reemplazos y contenido detrás de algunos. Vamos a lidiar con eso un poco más tarde. Pero por ahora, sólo voy a dejarlo como está. Porque como viste con la barra de navegación, siempre puedes volver atrás. Y aquí voy a crear un nuevo símbolo y llamarlo pie de página así. Y ahí vamos. Una última cosa que quiero hacer es darle a esta sección un margen superior de 20. Ahí vamos. Así que se ve precioso el regreso a clases. Y ahí vamos. Por lo que ahora todo nuestro sitio web está terminado. Entonces la página principal está hecha. Sé que estoy divagando mucho, pero solo estoy tratando de darles muchos detalles para recordar porque va a ser mucho más fácil para ustedes navegar más adelante en la línea. Entonces aquí tenemos el auto es préstamos y contáctanos. Aquí tenemos esto por la razón que sea que cambie esto. Entonces tendré que volver atrás y ajustar este H1 porque simplemente me vuelve loco. Todo esto se ve bien. Simplemente esto tendrá que ajustarse una vez más. Esto se ve bien. Esto se ve bien. Esto se ve bien. Esto se ve bien. Ahí vamos. Entonces tenemos que ajustar cada uno y tenemos que ajustar estos. Entonces hagámoslo. Lo primero es lo primero, vamos a seleccionar esta. Entonces tenemos h tres tarjetas oscuras, tarjetas de autos. Ahí vamos. Y selecciona esta, agrega tarjeta, tarjetas. Entonces si este anuncio tarjetas de autos, y este azul tiene 160 aquí, entonces 16, y este auto, auto, también debería tener 16. Ahí vamos. Entonces ahora eso está arreglado y los finalistas tratan con éste. Entonces H un héroe, por cualquier razón, cambia a Poppins, negrita 64 color es este. Vamos a ver el espaciado. Aquí. Es el 86. Entonces volvamos con nuestro héroe. 86 debería estar aquí. Ahí vamos. Y ahora se ve como debería. Entonces ahora se ve bien. El espaciado se ve bien aquí y aquí. Y aquí. Esto es bueno. Esto es bueno. Una vez más, te va a mostrar una vez que se publique y el pie de página se vea como debería. Entonces ahí vamos. Nuestra página de inicio está terminada. Como dije, vamos a colapsar dando clic aquí mismo. Lo que hicimos hasta ahora es que recreamos la página de inicio va a ser mucho más sencilla a partir de aquí porque lo mismo como en XD. Una vez que lo diseñamos, podemos copiar y pegar estos símbolos a lo largo de nuestras páginas. Y podemos gestionar y empezar a crear de una manera mucho más ágil, una manera mucho más rápida. Entonces te veré en el siguiente video cuando en realidad vamos a hablar de esto aquí mismo, que es el CMS. Va a ser extremadamente complicado comenzar, pero en realidad no es demasiado complicado en absoluto una vez que realmente lo dominas, algo así como un Webflow en sí. Entonces te veré en el siguiente video y vamos a comenzar con el CMS. 177. Creación de la colección de CMS: En este video, vamos a hablar sobre las colecciones CMS en Webflow. Y te voy a mostrar cómo crear uno, especialmente para este proyecto y cómo conectar todos esos elementos de colección CMS, CMS en tu proyecto. Entonces comencemos. Y aquí estamos en Webflow y esto es lo que tenemos hasta ahora. Entonces si refrescamos un poco nuestra memoria, ahora, aquí tenemos navegación, tenemos nuestro botón, tenemos esta sección con la imagen. Tenemos estas tarjetas aquí mismo. Entonces tenemos lo que ofrecemos con estos iconos en el lateral. Tenemos nuestros beneficios luciendo bien, y luego tenemos un formulario de Contáctenos que funciona y puede ingresar mensajes y puede tener el botón de enviar mensaje aquí mismo. Entonces tenemos el mapa y te mostré cómo integrar el mapa en su interior. Y luego finalmente, tenemos el pie de página en la parte inferior. Entonces, ¿cómo hacemos para incluir la colección CMS? Vamos a dar click aquí mismo donde dice colección CMS, da clic aquí mismo. Entonces, antes de comenzar con toda esta información, vale la pena recordarnos a nosotros mismos lo que realmente deberíamos incluir dentro. Así que aquí tenemos nuestro archivo XD y en realidad deberíamos crear la página del curso. Pero antes que lo hagamos, porque estas tres tarjetas y estas ocho tarjetas van a estar todas conectadas a nuestra colección CMS. Y lo que eso básicamente significa es que va a sacar todos esos datos de la colección CMS. Y si te lo muestro muy rápido, esto va a ser nombrado, este va a ser el precio, este va a ser el año. Esto va a ser cuántos kilómetros ha recorrido el auto. Va a sacar toda esa información y va a ser el contenido dinámico y mostrar todo eso dentro de nuestra colección CMS. Entonces vamos a crear esta página. Y esta página en realidad va a ser para los detalles del auto. Pero antes de poner todos esos detalles en, primero tenemos que crear la colección CMS y luego apuntar los elementos a esa colección CMS y básicamente conectarlos todos juntos. Así que en realidad vamos a empezar con esta página y vamos a sacar la información de esta página. Entonces, para ayudarnos a comenzar lo que realmente necesitamos aquí mismo, permítanme verificar rápidamente si conecté esto. Así súper auto, SUV y Saloon. Entonces estos son los íconos. Si vuelvo a nuestro Webflow, vuelvo a nuestros artículos muy rápido y solo para verificar si los tenemos. Entonces sí, SUV, insulina superdeportivo. Si volvemos a mi CMS, como dije, da clic aquí mismo. Entonces lo primero es lo primero, necesitamos crear la propia colección CMS. Entonces nombre de colección, vamos a llamarlo autos, por ejemplo y luego aquí tenemos campos de recolección. Ahora nombre y babosa es lo que se va a incluir como básico. Y se puede ver que la URL de la colección es autos. Para que puedas ver website.com four slash cars for slash Cart page. Y eso es lo que vamos a incluir dentro. Entonces lo primero lo primero lo que vamos a incluir es que vamos a agregar un campo. Y puedes agregar todo tipo de campos diferentes y para no perder demasiado tiempo con esta lección, puedes pasar el cursor sobre cualquiera de estos campos para aprender más al respecto. Y se puede ver a través estas lecciones cuáles son algunas de estas. Vamos a usar textos planos, tal vez alguna imagen de texto rico y multi imagen es lo que vamos a usar aquí. Pero puedes ver que puedes tener enlaces, correo electrónico, números y números de teléfono, fecha y hora, selectores, opciones de color. Entonces, por ejemplo, esta opción desplegable es genial si tienes múltiples selecciones o categorías diferentes o algo así. Entonces comencemos con el texto plano. Y voy a llamar a este nombre de texto. Y llamémoslo tal vez Carney. Nombre del auto, algo así. Voy a golpear Guardar campo. Entonces voy a, vamos a ver, agregar un nuevo campo, texto plano. Voy a llamarlo precio de auto. Ahí vamos. Golpear Guardar campo. Entonces el siguiente campo va a ser, veamos, imagen. Y esta va a ser la imagen de la tarjeta del auto. Golpea Guardar campo. Y ya se puede ver aquí mismo en el lado derecho, la vista previa que se está construyendo. Y si hago clic aquí mismo, lo que realmente necesitamos y lo que estamos creando es esta imagen de tarjeta de auto. Para que pueda sacar esa imagen de la colección de imágenes que creamos aquí mismo y mostrarla donde queremos mostrarla. Entonces una vez más, tenemos el nombre actual, tenemos el precio del auto, y aquí tenemos la imagen del auto. Entonces, centrémonos ahora en todos estos otros detalles que tenemos. Volvamos a Webflow. Entonces imagen de tarjeta de auto, lo que podemos hacer a continuación es incluir otra imagen. Entonces vamos con la imagen. Y aquí lo voy a llamar e.g . Etiqueta tipo auto. Y esta etiqueta es el icono real que va a ir aquí mismo. Entonces aquí tenemos el ícono de SUV. Entonces, vamos a golpear Save Field. Ahora por debajo de eso, lo que podemos hacer es poner en el texto plano y este llamado tipo auto. Tipo de auto, diría campo. Entonces por debajo de eso lo que podemos hacer es agregar otro, llamarlo el año de producción. Diría Phil, quiero que el auto se haya producido, agregue otro. Y digamos kilometraje o kilómetros o lo que sea, golpear a otro. Y esto va a ser tipo de combustible. Golpea Guardar. Y si los llevo de vuelta a nuestro documento XD, estos son en realidad estos. Así kilometraje, transmisión tipo campo, tipo motor, puertas, asientos, garantía. Entonces todo esto se va a actualizar automáticamente en nuestro sitio web. Entonces el último fue tipo combustible que transmisión, transmisión. Y aquí puedes tener todo tipo de personajes diferentes. Puede limitar los caracteres si este campo es obligatorio. Entonces va a poner la estrella muy parecida a esta. Y sólo vamos a golpear Save field porque esto va a ser bastante sencillo. El tipo de motor es el siguiente. Vaya, lo siento. Textos tan sencillos y tipo ginebra. Ahí vas. El siguiente va a ser, veamos, puertas. ¿Cuántas puertas tiene el auto? El siguiente va a ser, veamos, asientos. Ahí vas. Guardar campo. El siguiente va a ser vamos a ver, garantía. Y ahora los adeudos cumplimentados. Lo que vamos a hacer a continuación es poner el texto enriquecido porque quiero incluir la descripción del vehículo, que es esta. Entonces ya hemos terminado con esta sección y hemos terminado con estos datos. Así podrás ver que el año del coche va a jalar desde aquí y mostrarlo aquí también. El kilometraje se va a mostrar aquí y aquí. El nombre actual y el precio del auto es lo que se muestra aquí y aquí, así como aquí y aquí. Y la imagen del auto va a tirar aquí. Y también incluimos el SUV, que es el tipo de auto, y el ícono que va con el tipo de auto en sí. Aquí vamos a incluir un texto enriquecido y voy a llamar a ese vehículo descripción para este curso. Yo solo voy a usar la misma descripción, los mismos datos, pero obviamente tus clientes van a incluir información diferente, obviamente basada en el auto. Entonces ahora vamos más allá y agreguemos nuevos campos. Y se puede ver que nos quedan 16 de 30. Así web para limitarte con 30. Entonces vamos con cero a 100 km/h Así que así de rápido va a llegar el auto a esa velocidad. Incluyamos vocales, por ejemplo, puede incluir todo tipo de información diferente. Yo sólo voy de acuerdo con esto. Esto va a ser la máxima velocidad. Y si te llevo de vuelta a XD, en realidad estamos usando esta información aquí mismo. Entonces, mientras que el par de potencia, todo tipo de cosas diferentes. Entonces la última fue la velocidad máxima. El siguiente es el poder. Ahí vas. Golpea Guardar en uno nuevo. Veamos cilindros. Y obviamente para los autos eléctricos sólo va a escribir algo así como una a. entonces son cilindros. Esto es par. Debería decir campo. Al nuevo. Esto va a ser la altura. Guarda el nuevo. Esto va a ser peso. Haz clic en Guardar, agrega uno nuevo. Esto va a estar vinculado. Vinculado. A ver si lo hicimos, bien, sí, lo hicimos. Gran trabajo y agregar uno nuevo. Esto va a ser espacio de arranque. Espacio de arranque. A ver. Nuevo. Vamos a decir distancia entre ejes. Di campo. Sé que esto es aburrido, pero esto es básicamente lo que vas a hacer por tus clientes. Entonces vamos a basar y el siguiente es cargar pesos. Y dependiendo del proyecto en cuestión y en qué estés trabajando, vas a agregar la diferente información aquí y allá. Entonces veamos. Vamos a incluir lo que fue el último cargando peso. El siguiente punto es el ancho. Entonces ancho. Entonces incluiremos la capacidad del tanque de combustible. Y finalmente, lo que vamos a hacer es quizás, quizá reducir algunos de estos. Entonces tal vez cargando pesos, puedo deshacerme de él o algo así. No estoy muy segura porque me quedan dos campos y necesito tres más. Entonces, si pulsas Agregar campo, lo que voy a incluir es la imagen. Y llamémoslo héroe del coche. Imagen. Golpea Guardar. Y si tomamos en XD, va a ser esta imagen que va a ser nuestra imagen de héroe de autos. Eso es lo que en realidad va a activar la caja de luz real. Todas estas imágenes van a estar conectadas dentro de la caja de luz, pero esto solo va a activarlo. Entonces veamos de qué tipo de información podemos deshacernos. Porque si vuelvo a aquí, necesito agregar un campo más para la multi imagen. Entonces llamémoslo galería de autos uno. Ahí vas. Y se puede ver que nos quedamos sin campos, pero aún necesitamos que el campo incluya. Para que pueda o deshacerme de esta descripción del vehículo o de uno de estos detalles. Entonces veamos de qué podemos deshacernos aquí mismo. Entonces tal vez podamos deshacernos del peso de carga. Vamos a deshacernos de eso porque el espacio de arranque es básicamente lo que está mostrando ese peso de carga después de todo. Entonces, qué tan grande es el peso de tu bota, eso es lo mucho que puedes poner dentro. Y obviamente puedes poner toda esta información más adelante si quieres. Y vamos a poner eso y tu cliente puede agregar esto manualmente por cada página que cree. Entonces porque estamos hablando con para un proyecto más pequeño aquí mismo, entonces una vez que agregan una página, pueden saltar manualmente dentro y agregar la página. Porque una vez más, estamos hablando de un pequeño lote de tarjetas. En este caso, solo tienen ocho autos a la venta. Entonces eso va a ser súper fácil para ellos. Si no, puedes sortear esto de manera simple y comprobar qué nos deshicimos de qué capacidad creo que estaba cargando peso. Entonces déjame volver a aquí. Déjame golpear Ahorra en esto y déjame encontrar el peso de carga, que es este. Haga clic aquí y presione Eliminar. Ahí vamos. Y ahora nos queda uno más. Así que da clic aquí, multi imagen, coche, galería también. Ahí vas. Entonces ahora cómo va a quedar esto, esta va a ser imagen de héroe, entonces imagen número uno, entonces esto va a ser 234 y esto va a ser o tal vez cinco y luego 678. Necesito hacer esto debido a los propósitos de diseño porque es una especie de error de flujo de trabajo. Mi amigo y yo terminamos eso. Y aquí hay un gurú de Webflow en mi opinión, porque está haciendo esto por años y años y años. Entonces básicamente, lo que sucede en Webflow es que me va a mostrar las ocho imágenes. Es posible que desee taparlos. No es realmente fácil conectar esas imágenes a través de una caja de luz. Entonces, cuando alguien hace clic en una de las imágenes, va a abrir la caja de luz y van a aparecer las ocho imágenes. Entonces, por lo tanto, si estás usando este método, lo mejor es saber qué hacer. Entonces en este caso, lo que vamos a hacer es porque tenemos ocho imágenes por cada auto. Obviamente tu cliente puede tener muchas más imágenes. Entonces en ese caso, número uno, que es si echamos un vistazo aquí, imagen actual de héroe va a ser ésta. Entonces imagen número uno. Entonces para esta siguiente, que va a ser, veamos, ésta. Entonces Carrier galería uno, lo que vamos a incluir nuestras imágenes, 234.5. Y entonces en realidad vamos a incluir uno más de estos y esconderlo. Todavía va a estar ahí, pero vamos a ocultarlo y ellos van a entrar en esta galería. Así que las imágenes restantes van a ir allí para tu proyecto en particular. Si tienes por ejemplo 40 imágenes diferentes, entonces puedes poner las imágenes restantes. Entonces primero cinco, este es el número 12345. Entonces cinco imágenes en total. Y luego las imágenes restantes simplemente se ponen en esta galería de autos, las conectan todas y van a mostrar dentro de la caja de luz. Y eso te voy a mostrar en un momento. Pero básicamente ya terminamos aquí. Por último, sé que esta fue una lección aburrida, pero ¿qué puedes hacer? Es lo que necesitas hacer con las lecciones de CMS. Así que recuerda, nombramos a nuestros autos de colección. Entonces, cuando hago clic en Crear colección, puedes ver que estás a punto de cerrar esta colección. Ahora guarda los cambios. ¿Te gustaría guardar estos cambios? Sí, guarda los cambios. Y ahora se ha creado nuestra colección. Sin embargo, no tenemos ningún artículo. Y se puede ver que el Webflow es inteligente porque llamo a mis autos de colección. Me pide hacer un auto nuevo, para crear un auto nuevo. Entonces puedo hacerlo ahora mismo. Puedo hacer clic en auto nuevo y le puedo dar un nombre para que pueda simplemente copiar la información que creé anteriormente. Vamos a darle este huracán Lamborghini y podrás ver cómo va a quedar esto como website.com slash cars, Lamborghini, Horeca. Entonces tenemos un nombre personalizado. Entonces el nombre del auto va a ser huracán. El precio va a estar en esta imagen de tarjeta de una tarjeta. Déjame mostrar cómo van a quedar las imágenes. Este es el plegado en el que te vas a meter. Cada uno de ellos obviamente tiene todas estas imágenes. Vamos a necesitar el número tres para este ejemplo en particular. Así que arrastrar y soltar la imagen dentro etiqueta de tipo de coche es lo que necesitamos para arrastrar y soltar de nuestra carpeta. Entonces todos esos activos que exportaste previamente, si recuerdas. Entonces veamos. Este es un superdeportivo, entonces tipo S, aquí está el ícono del superdeportivo. Sólo voy a arrastrarlo y soltarlo en su lugar justo aquí mismo. Ahí vamos. Ahora, sigamos adelante con los campos son así que el tipo de tarjeta es súper auto. Obviamente esto es lo que tu cliente va a crear cada vez. Entonces, cuando hacen clic en nueva tarjeta, como viste aquí mismo, todos estos campos los están esperando. Solo necesitan seguir adelante e ingresar información. Y en la mayoría de los casos, vas a obtener esta información de tu cliente. Y en realidad voy a mostrarte nuestro sitio web en tan solo un segundo de donde obtuve la mayor parte de esta información. Obviamente todo esto es de conocimiento público y obviamente lo puedes encontrar en línea. Pero si no puedes, entonces están estos sitios web que te van a ser de gran ayuda. Así que solo pega algún texto. Y como dije, este texto va a ser el mismo para todos los autos, que voy a crear. Así que simplemente copia y pega esta información aquí. Déjame abrir esto aquí mismo. Entonces, la potencia de máxima velocidad , como dije, para cilindros, autos que funcionan con baterías, básicamente no tienen cilindros obviamente. Entonces, por lo tanto, van a poner NA e.g y voy a mostrarlo un poco más tarde también. Tan vinculado, ahí tienes. Litros de capacidad estará ahí vamos, cargando peso. Uy. Entonces basaremos el espacio de arranque. Nosotros siempre, gritos, me perdí eso. Peso de carga espacial. Así que sin cargar peso que ancho. Y por último, la capacidad del tanque de combustible. Ahí vamos. Entonces, ahora por fin, estamos llegando a esta sección que acabamos de crear. Entonces lo que vamos a hacer aquí es si te llevo de vuelta a XD, lo que tenemos es esta imagen número uno. Entonces eso es lo que vamos a crear aquí mismo. Así que déjame llevarte de vuelta a mis Imágenes. Y convenientemente a todos ellos se les llama así huracán 123 y así sucesivamente y así sucesivamente. Entonces aquí tenemos al héroe número uno, así que arrástralo y suéltalo dentro. Entonces tenemos galería de autos. Entonces, si te llevo de vuelta a XD una vez más, hemos imaginado 234.5. Eso es lo que vas a incluir aquí. Entonces 234.5 van a ir aquí y luego las imágenes restantes van a ir aquí. Entonces básicamente 67.8. Como dije, esto va a estar oculto de la página, pero aún así va a estar conectado. Y básicamente eso es todo. Creamos nuestro primer auto. Obviamente todavía no podemos verlo, así que tenemos que conectarlo. Vamos a ocuparnos de ello más tarde, pero déjame darle a Crear ahora mismo. Y va a crear nuestro primer auto. Porque tenemos ocho autos. Ahora me iré, crearé siete autos restantes, y luego volveré a ti. Pero básicamente voy a hacer lo mismo que te mostré aquí mismo. Entonces lo que podemos hacer a continuación es, digamos para el Cadillac escalan tal vez. Para que puedan ver, recrear este huracán. Cuando haga clic en auto nuevo, todavía va a tener todo eso, todos esos campos que creamos, todo lo que necesito hacer ahora es simplemente entrar con mi nombre y luego entrar con mi precio, que es lo que mi cliente proporcionó la imagen de la tarjeta del auto. Solo vuelve a mi carpeta aquí mismo, localiza mi escalado. Entonces voy a usar la imagen número tres para este ejemplo. Arrastre y suelte aquí mismo, y ahí tienes. Así que déjame volver a esto y déjame crear las cartas restantes y me pondré en contacto contigo cuando lo haga en la siguiente lección. 178. Usando la colección de CMS: Bien, así que aquí estamos. Y yo creé los ocho de nuestros autos. Y si los hojeo muy rápido para que puedas ver alcance o caminar. Entonces exactamente la misma configuración que mencioné, esta es exactamente la misma y va a permanecer exactamente igual, como ves aquí mismo. Si solo te llevamos a probar el modelo X por ejemplo porque es un auto eléctrico. Se puede ver por ejemplo para votos, no tiene ninguna válvula obviamente. Entonces NaN para cilindros porque no tiene ninguno solo un a. entonces así es como me ocupé de eso. Y ahora tenemos ocho autos todos llenos de información una vez más, y ustedes vieron esto con las imágenes que se le proporcionan. Sólo puedes poner las imágenes, como ya mencioné. Así que vamos a repasar rápidamente esa misma McLaren, una vez más, la misma historia. Entonces para el auto hero imagen poniendo imagen número uno, luego imágenes 234.5, todas ellas están etiquetadas. Y para esta galería final, que es multi imagen 67.8. Entonces, ahora que tenemos toda esa información, ¿qué podemos hacer al respecto? Entonces, vamos a golpear guardar cambios. Así que salvó. Entonces, si vuelvo a mi colección CMS, puedes ver que tenemos todos estos cambios. Pero si vamos a, digamos páginas y luego vamos a nuestra página de inicio porque esa es la única página que tenemos. Y lo que podemos hacer aquí mismo es que voy a enchufar la información aquí. Entonces aquí tenemos este envoltorio de tarjetas de auto. Y porque es una cuadrícula simple, y si hago clic aquí mismo, las distancias entre estas son 32. Entonces vamos a recrear rápidamente eso. Entonces lo que tengo que hacer es ¿ dónde están mis elementos? Se puede ver que tenemos las listas de colección. Entonces lo que puedo hacer es hacer clic en la lista Colección, arrastrarla y soltarla justo aquí justo debajo de mi colección exclusiva de autos, y aquí está completamente vacía. Entonces lo que puedo hacer es hacer doble clic para conectar una colección. Puede hacer doble clic allí, o puede hacer clic aquí mismo donde dice fuente. Y esta ventana de diálogo va a aparecer. Simplemente haga clic aquí. Y con las colecciones CMS solo tenemos autos. Así que mira lo que pasa ahora cuando hago eso. Cuando haga clic en autos, va a extraer la información de todos estos detalles que sacamos dentro. Entonces lo que voy a hacer a continuación es simplemente lo voy a dejar ahí. Y digamos dentro lo que puedo hacer es si abro esto, se puede ver que tenemos la lista de colección y le voy a dar nombre, llamarlo colección de autos, una lista solo para que sepamos que estos son los autos que hay dentro. Y cuando abro por dentro, se puede ver que finalmente, tenemos artículos de colección. Entonces dentro de ese artículo de colección, lo que voy a hacer es tomar una de estas cartas, simplemente golpear Control C, saltar dentro del artículo de colección de autos y golpear Control V. Y puedes ver obviamente, va a pegar en la información que incluí dentro. Y se ve exactamente igual para todos estos porque todavía no le dijimos de qué sacar. Vayamos todo el camino hasta la cima. Y lo que podemos hacer en realidad es para la lista de recolección o incluso para el contenedor, qué podemos hacer, veamos. Para la lista de colección de autos, déjame crear esa cuadrícula. Entonces cuando haga clic aquí mismo, puedo incluir el espaciado de 32 líquidos si puedo incluir otra columna, y luego voy a quitar esta fila. Entonces sólo nos vamos a quedar con tres, como tenemos en la fila justo abajo. Y porque no necesitamos estos, porque ya incluimos la tarjeta del auto en su interior, que ya tiene el efecto hover. puede ver que está heredando un selector. Si hago clic ahí, puedes ver que es la tarjeta del auto. Entonces cuando golpeo la vista previa aquí mismo, puedes ver que mis efectos hover siguen funcionando. Así que básicamente desechar el envoltorio de tarjetas ya no necesita estar aquí. Así que vamos a presionar Eliminar y deshacernos de él. Y para la lista de colección de autos, rapero, lo que voy a hacer en este caso es darle e.g No quiero darle ninguna clase. Lo que voy a hacer es darle ese margen superior de 64. Y sólo lo va a empujar un poco hacia abajo. Entonces para la lista de recolección de autos, en este caso, lo que voy a mostrar y agregar una clase combo de, digamos casa. Sólo para que sepamos que estamos en la página de inicio por ejemplo pero puedo ir es ir a Ajustes. Y si selecciono, veamos. No lo sé, podemos filtrarlos , podemos hacer lo que sea. Pero en este caso lo que voy a hacer, primero vamos a conectarlos. Entonces cuando seleccionas el artículo, tienes este toggle y podrás ver obtener imagen de autos, que es nuestra colección. Entonces cuando hagas clic ahí mismo, te va a preguntar qué campo. Entonces la imagen de la tarjeta del auto es lo que vamos a sacar. Y enseguida puedes ver que me está mostrando diferentes autos de mi colección, lo cual es fantástico. Entonces cuando haga clic ahí mismo en el H3 dark, lo que voy a hacer es obtener textos de autos, seleccionar campo, y solo voy a seleccionar el nombre. Para que puedas ver automáticamente sabe qué nombre quiero sacar porque eso es lo que le dijimos que hiciera. En cualquiera de estos, puedo seleccionar este por ejemplo y obtener texto de las imágenes. Este obviamente va a ser el precio del auto. Ahí tienes, puedes verlo actualizaciones a precios reales en todos mis autos. Esto me dejó conectarlo. Haga clic aquí, seleccione el campo. Y esto va a ser, veamos, veamos, veamos el precio del auto, nombre, tipo, año de producción, creo. Sí, aquí la producción. Ahí vamos. Y finalmente, este último va a ser el kilometraje. Así que vamos a conectarlo aquí. Entonces veamos dónde estamos aquí mismo, kilometraje, Allá vamos. Así que ahora tenemos todos nuestros autos incluidos dentro conectados correctamente a nuestra lista de recolección. Este efecto hover funciona en todos ellos. Entonces lo que podemos hacer en este caso es que tengo este envoltorio. Puedo limitar mis artículos y mostrar tres artículos, por ejemplo y ahí tienes. Ahora tenemos nuestro diseño original, pero puedes ver que esto es un poco incorrecto. Entonces lo que puedo hacer es hacer clic y agregar un nuevo orden de clasificación. Entonces puedo ir al revés alfabético o alfabético o puedo ir nombre texto plano. Entonces veamos qué puedo hacer o puedo agregar un nuevo filtro. Veamos qué podemos hacer aquí mismo. ¿Cómo podemos ordenarlos? Tal vez orden de clasificación. Aquí vamos. Así orden ordenada, Vamos a reducir este orden de clasificación, ir todo el camino hacia abajo. Creado en el más antiguo al más nuevo, más reciente al más antiguo éxito Guardar. Debería hacer eso. No. Vamos de más antiguo a más nuevo. Y ahí vamos. último, finalmente, tenemos este orden que necesitamos incluir aquí mismo. Entonces ahí vamos. Contamos con Lamborghini Cadillac y Lucid Air. Y si vuelvo a aquí, tenemos el mismo efecto aquí mismo. Lo que nos falta aquí es ese botón. Así que déjame presionar el botón de pin tipo Control K. Golpea el estilo para nuestros botones. Entonces botón principal, principal. Ahí vamos. Y este botón debería escribir C. Todos los autos. Ver todos los autos. Ahí vas. Y todo lo que quiero hacer aquí mismo es tal vez poner esta sección como una pila vertical y tal vez centrar mis elementos así. Y este botón tendrá una clase combo o incluso mejor. Puedo porque ya usé el envoltorio de lista de colección. ¿Y dónde puse eso? Yo agregué aquí. Así que envoltorio de lista de colección puedo agregar a casa aquí también. Ahí vas. Porque tenemos el margen 64 y déjame crear el margen de 64 en la parte inferior para este botón. Y si selecciono ese botón en XD hover, se puede ver que ahora tenemos 64. Entonces ahí tienes. Ahora ya sabes cómo conectar tus artículos en tu lista de colección. Y dentro de los ajustes, puedes jugar con todos estos diferentes ajustes. Incluso puedes agregar atributos personalizados como el valor del nombre y cosas así. Y solo presiona eliminar. Si no quieres poner algo dentro, puedes paginar artículos. Entonces vas a agregar las flechas son esos puntos para la paginación. Y puedes mostrar un límite y mostrar cuántos artículos quieres limitar. Aquí tenemos tres en la siguiente página que vamos a crear, tendremos ocho. Entonces eso es lo que vamos a abordar en el siguiente video porque ahora esto se completa. Vamos a golpear la vista previa. Ahí vamos. Y ahora no nos lleva a ningún lado porque primero tenemos que crear una página y asignarla a una colección particular, que luego nos va a llevar a ese lugar. Entonces, para el final de este video, vamos a crear rápidamente una nueva página. Crear una nueva página. Llámalo autos, que va a ser esta página aquí mismo para los autos. Y simplemente haz clic en Crear. Algo pasó aquí mismo en la navegación. Así que déjame volver a mi página principal. Déjame ver qué pasa. Entonces, por cualquier razón, lo posiciona aquí. Entonces tal vez cambie alguna clase o algo así. Déjame revisar el contenedor. Deducir algo no. Lateral del contenedor, barra de navegación. Vamos por una horizontal. Vayamos aquí mismo. No sé por qué hizo esto. Déjame ir a mi logo. Asegúrate de que sea lo primero. Nav items, se asegura de que eso se pierda por cualquier razón lo hizo esto. Entonces déjame volver a mi instancia y ver qué pasó aquí. Porque acabo de hacer esto para mi navbar. Y se puede ver que rompió algunos diseños aquí y allá. Entonces déjame ver lo que hice. Déjame, déjame realmente averiguarlo y volveré a ti en el siguiente video. Y estas cosas pasan, sobre todo cuando intentas platicar al mismo tiempo y resolver estas cosas. Entonces en el siguiente video, voy a mostrarles cuál fue la solución real. Pero yo jugueteo acaba de agregar una clase combo que rompió un poco nuestro diseño. Entonces te veré en el siguiente video. 179. Página de coches: Bien, así que como mencioné, voy a mostrarte lo que hice y lo que hice mal. Entonces, ya sabes, cuando sucede algo así, qué hacer. Por lo general, porque estas clases se heredan entre sí, porque usamos un contenedor de clase para todos nuestros contenedores. Justo aquí. Acabo de agregar el flexbox y me rompió todos mis contenedores. Entonces lo que voy a hacer aquí mismo es porque tenemos este contenedor, simplemente voy a agregar una clase combo de tarjeta. Tarjetas. Ahí vamos. Para esta clase combo. Ahora, voy a poner en el flexbox vertical y asegurarme de que funcione justo aquí. Puedes ver si empiezo desde arriba, tenemos la navegación, tenemos esta sección, esta sección. Entonces todo funciona como debería. Se ve bien. Esto funciona bien. Esto se ve bien. Formulario de contacto funciona bien. Todo funciona bien porque solo lo agrego en el propio contenedor y no me di cuenta porque estoy hablando con la grabación y todo tipo de cosas. Por eso pasó eso. Ahora que esta página de inicio finalmente está lista, lo que podemos hacer es, como mencioné en el video anterior, ir a la página del curso que acabamos de crear. Entonces si hago clic aquí, se puede ver que el fondo está heredando para el cuerpo. Entonces, si hago clic ahí mismo y vengo aquí mismo, se puede ver por cualquier motivo. Pero las páginas antiguas deberían aplicarse a este color gris claro, color de cuerpo. Ahí vamos. Permítanme realmente volver a la página principal y seleccionar mi cuerpo por la razón que sea que haya creado esto. Así que vamos a eliminar esta clase y seleccionar el cuerpo páginas antiguas. Y va a heredar el color del cuerpo, que es lo que quiero en realidad. Entonces todo aquí funciona como debería. Volvamos una vez más a esa página del curso y empecemos a usar el poder de estos símbolos. Entonces lo primero es lo primero, necesito mostrarte realmente lo que vamos a estar diseñando aquí. Entonces va a ser bastante sencillo. La única sección que realmente vamos a crear es esta sección de aquí. Entonces solo va a tener esto copiado, este texto. Y solo va a tener el círculo y la imagen de un auto adentro abajo. Simplemente vamos a tener básicamente esta misma sección pero sin ningún límite en nuestros artículos. Y va a mostrar todos estos artículos sin el botón. Y entonces simplemente vamos a reutilizar estos elementos a continuación. Así que comencemos con ello. Entonces lo que voy a hacer primero es dejarme llevarte de vuelta hasta aquí. Empecemos con la barra de navegación. Arrástralo y suéltelo dentro. Y déjame usar el, veamos qué vamos a hacer. Primero, Contáctenos y luego el mapa. Entonces también puedo golpear cuerpo, golpear Control K tipo en mapa. Se va a mostrar el símbolo del mapa haga clic ahí, presione Control K, escribiendo pie de página. Y va a mostrar símbolos de pie de página. Así que simplemente haz clic ahí y podrás ver que está heredando el espaciado que establecemos para el margen superior. Así que funciona igual que cualquier otra herramienta de diseño como XD, figma, sketch o lo que sea. Cuando configuras tus componentes y los creas, solo te va a mostrar eso, todo eso. Entonces lo primero es lo primero, comencemos con la creación de una sección. Selecciona tu control corporal, Kate, he sido sección y dale una clase de sección. Ahí vamos. Voy a posicionar esta sección justo debajo de mi barra de navegación porque es lo que va a contener el texto, la imagen, esas dos imágenes dentro. Entonces, a continuación, sigamos adelante y golpeemos Control K tipo en div. Este div va a ser nuestro contenedor. Al igual que así. Y dentro de ese contenedor, lo que podemos incluir es por ejemplo Control K para fijar rumbo. Vamos a usar el encabezado H1, usar todos los encabezados H1. Veamos, por la razón que sea, no incluyó esto. Entonces vamos con Poppins. Un color perno 64 va a ser este color, de color más oscuro. Y déjame recordarme sobre la altura. La altura va a ser de 86. Ahí vamos. Y voy a agregar una clase combo de H1 centrada. Ahí vamos. aquí dentro sólo voy a hacer este cambio. Así que solo haz clic para que esté en el centro. Ahí vas. Y por ahora, sólo voy a pegar en este texto. Ahora debajo de este texto está mi control div Kate, pero div, este bloque div, voy a llamarlo hero car. Tarjeta de Héroe. Ahí vamos. Y dentro de ese auto héroe, lo que voy a hacer es simplemente poner esas dos imágenes, así Control K, esa imagen. Y esta primera imagen puede ser de ese auto desde un lado. Ahí vas. Y puedo usar todos los textos de los activos. Ahí tienes, porque se llama Mercedes Benz, creo. Finalmente presiona Control K, escribe una imagen y agrega una nueva. Y éste va a ser este círculo azul. Encantadora. Y por último, lo que vamos a hacer por estos dos es, a ver, quizá. A lo mejor pueda convertir esto en un flexbox como este y asegurarme de que mis artículos estén centrados verticalmente. mejor para la posición de esos, lo que puedo hacer es quizás por el auto héroe en sí, puedo ir justo aquí, mientras que la posición ahí está, y hacer clic relativo. Y este auto puede ser absoluto, e.g Pero creo que es mejor hacerlo primero con este círculo. Tan absoluto, ahí vamos. Y veamos, el auto que creo puede ser relativo. Por ejemplo, veamos. Vamos a llamarlo antes que nada autos, héroe, IMG. Ahí vamos. A ver. Aquí lo que podemos hacer en realidad es a ver. Sí, pongamos el auto para que sea pariente. En realidad. En lugar de estática, voy a ponerlo para que sea relativo. Y le voy a dar un índice Z de cinco. Y este círculo, voy a dar un índice Z de uno, tal vez algo así. Entonces todo va a estar muy bien centrado por dentro. Ahora, en cuanto a nuestro auto héroe, no le vamos a dar ninguna dimensión. A ver. Esta Carta de Héroe. Vamos a darle a esto un margen, margen superior de tal vez 64 algo, que solo nos va a dar ese diseño distinguido, distinguido y simplemente empujar nuestro contenido un poco hacia abajo. Ahora bien, esto es, vamos a cambiarle el nombre y vamos a llamarlo cars hero, BG circle. Ahí vas. Y aquí lo que vamos a hacer es simplemente centrarlo un poco mejor a algo como esto. Así que hasta puedo moverlo un poco hacia arriba o hacia abajo un poquito. Realmente todo depende. Y este auto va a bailar un poco, pero no te preocupes por ello. Como puedes ver, ahora tenemos nuestro layout. Obviamente más adelante. Jugaremos con él y reduciremos el tamaño de este círculo. Obviamente es demasiado enorme ahora mismo, pero todo funciona como debería, incluso en esta segunda página, por cualquier razón estos enlaces llegaron al sitio. Así que déjame arreglarlo muy rápido. Si voy a mi página de inicio, da clic aquí mismo, vaya a la configuración de la tableta. Entra. A ver si hago clic en mostrar. Sí, entonces estos enlaces no tienen el emparejamiento. Entonces ahora mismo voy a incluir el emparejamiento de 20 relleno izquierdo. Y sólo los va a mover un poco. Y esto debería funcionar para el problema, pero aquí mismo tenemos un problema nuevo. Y vamos a abrir los elementos de navegación. Y para el color de fondo, tal vez pueda deshacerme del color de fondo. Ahí vamos y hacemos lo mismo para este último. Da clic aquí mismo, deshazte de él. Así que simplemente haz clic aquí mismo donde está vacío. Y ahora hemos arreglado el problema. Entonces si hago clic aquí mismo y luego aquí mismo, todo funciona como debería, y ahora están bien para ir. Si volvemos a nuestra página del curso y lo probamos aquí mismo. Si lo previsualizo muy rápido, da clic para abrir. Ahora se puede ver que tenemos este espaciado intermedio. Entonces ahora que esta sección está terminada, pero en realidad puedo hacer es pasar a la siguiente sección, que en nuestro diseño, si recuerdas, son estos autos. Así que nuestra colección exclusiva. Lo que puedo hacer es volver al flujo de trabajo. Haga clic en mis páginas, vaya a la página principal, y esto es una gran cosa de Webflow. Puedo dar click aquí mismo y usar toda esta sección. que puedan ver por cualquier motivo se lo di a clase de secciones. Así que vamos a cambiar el nombre de esta clase y llamarla colección o somos exclusivos. No puedo escribir por ejemplo colección colusoria. Ahí vamos. Yo sólo voy a golpear Control C en esa sección. Volver a la página de mi curso. Seleccione mi control corporal V, y va a pegar en esa sección en la parte inferior, aquí está justo aquí. Puedo arrastrarlo justo aquí. Y se puede ver que va a mantener el mismo espaciado que antes. Pero ahora voy a golpear duplicar la clase y luego simplemente cambiarle el nombre a los autos. Porque quiero estar seguro de que solo está aquí en esta página. Entonces esta es la página del curso y esta es la página principal. Entonces si seleccioné aquí, puedes ver si cierro esta sección es solo colección exclusiva, que es lo que quiero. Entonces, cuando haga algún cambio, no se propagarán a esta página, sino que se quedarán solos en la página del curso. Entonces cuando selecciono eso, lo primero que quiero hacer es deshacerme de este botón. Después seleccione mi envoltorio de lista de colecciones, haga clic aquí mismo, y luego tenemos el hogar aquí. Entonces voy a duplicar la clase aquí también y solo darle un nombre, autos. Y veamos qué más tenemos. Creo que tenemos una nueva lista de colecciones. Nosotros lo hacemos. Así que vamos a duplicar esto y llamémoslo autos aquí también. Ahí vamos. Y artículo de colección. No tenemos nada, así que ahora todo funciona bien. Sí. Entonces en el envoltorio de lista de colecciones, voy a ir a la configuración y simplemente mostrar mis ocho elementos. Ahí vamos. Y ahora solo se está mostrando como debería mostrarse en primer lugar. Entonces, si le pego a previsualización aquí mismo, pueden ver que ahora tenemos la página del curso, así tenemos esta imagen en la parte superior. No sé por qué sigue rebotando arriba y abajo, pero no debería. Y aquí tenemos esto. Entonces todo funciona como debería. Creo que eso es simplemente genial. Y veamos, para esto, tal vez podamos limitarlo. Entonces para el contenedor, veamos uno aquí, un auto. Lo que puedo hacer es agregar algunos márgenes para poder ir con auto y puedo ir con auto aquí a la izquierda y a la derecha. Y esto ojalá se detenga con el rebote. Y para la imagen de héroe, ésta, le puedo dar un ancho máximo del 100 por ciento, que ya tiene. Y creo que eso es todo. Creo que eso va a solucionar el problema a largo plazo. Como puedes ver, en cuanto entran en modo de vista previa, se desplazan hacia arriba y hacia abajo, se arregla por sí mismo. Pero justo cuando estamos previsualizando, va a saltar de izquierda a derecha. Y cuando haga clic para abrir estas nuevas páginas más tarde, verá que ese tema vuelve a suceder. Pero con esa nueva página y con todas estas diferentes imágenes que creamos y hablando de net new page, Volvamos a Inicio. Y aquí lo que tenemos debajo de las páginas es que tenemos nuestra plantilla de autos, que es la página que vamos a diseñar a continuación, y te veré en el siguiente video cuando vamos a abordar eso. Y eso va a tener mucha información diferente dentro de la que ya creamos. Entonces te veré ahí. 180. Creación de plantillas de coches: Para que podamos incluir toda esta información que ponemos dentro de nuestro CMS. Necesitamos usar esta plantilla de curso, que se crea automáticamente. Entonces cuando hago clic ahí mismo, puedes ver que realmente no pasa nada. Entonces, cuando seleccione el cuerpo, déjeme verificar. Heredan ese cuerpo todas las etiquetas de páginas. Entonces el color del cuerpo, que está bien, pero como se puede ver, no hay elementos en su interior. Entonces déjame darle a Control tipo K en Navbar. Agreguemos nuestra barra de navegación y construyamos esta página de la misma manera que hicimos anteriormente. Entonces lo que voy a hacer a continuación es presionar Control K y escribir en formulario, Contáctenos formulario control K, escriba en mapa, y Control K y escriba en pie de página. Ahí vas. Ahora tenemos todos nuestros elementos regulares como lo hicimos en todas estas páginas anteriores, pero todavía nos queda la información aquí. Entonces, si vuelvo a XD, lo que necesitamos incluir es este montón de información dentro. Así que comencemos. Simplemente hagamos eso y vamos a crear toda esta información. Si vuelvo a aquí, lo que necesito obviamente es una nueva sección. Y voy a poner en la clase de sección, igual que siempre hago. Ponlo justo debajo de mi barra de navegación. Y dentro de esa sección, primero llamémoslo por ejemplo detalles del auto como ese. Y dentro de esa sección, vamos a ver lo que podemos hacer es que podemos poner en un div, div block, llamarlo contenedor. Y de inmediato darle otra clase de detalles de la tarjeta. Contenedor así. Y así se trata de detalles de tarjeta, descarte detalles contenedor solo para que sepamos lo que estamos haciendo. Y luego vamos a ver. Podemos poner en más divs. Entonces Control K, escriba en def. Esta primera va a ser información de la tarjeta. Y esa es la información que va a estar en el lado izquierdo de la página. Imágenes y todo el texto a continuación. Y lo puedes ver aquí mismo. Y finalmente golpeó Control K una vez más y agrega otro div. Y a este div, voy a llamar a Car action card, que es ese auto que va a estar del lado derecho y simplemente pegarse a la parte superior y luego seguirnos mientras nos desplazamos hacia abajo. Entonces lo que podemos hacer aquí mismo por el contenedor es que voy a encender el flexbox, usar mi horizontal. Y veamos, podemos pegarlo a la cima y podemos posicionarlo puede ser así. Entonces para la información del auto en sí, necesita tener un poco de ancho. Entonces vamos con el 65 por ciento. Ahí vamos. Para el auto Action Card, lo que podemos hacer es usar tal vez 30%, algo así. Y obviamente va a tener ese cinco por ciento en el medio así. Entonces finalmente, lo que quiero hacer tal vez es ir con un pequeño margen aquí en el contenedor. A lo mejor ir con algo como 40 encima solo para distinguirnos un poco de la navegación. Y luego empecemos con el auto Action Card en realidad. Entonces lo que puedo hacer primero es, veamos. Primero veamos el diseño. Entonces aquí tenemos esta etiqueta, tenemos textos, estos textos y dos botones y un fondo blanco con un radio de esquina de ocho, creo. Sí, aquí vamos. Así que déjame volver a mi diseño. Seleccionemos el auto Action Card. Empecemos a poner el contenido dentro. Entonces voy a golpear Control K. Pero antes de hacerlo en realidad, volvamos a aquí donde dice imagen y degradado y donde dice Color, voy a seleccionar un color blanco. Y voy a elegir el radio de esquina para que sea de ocho píxeles, valor y. Después dentro había Tecla Control y tocando h3, encabezando y seleccionando h3 aquí mismo. Para esta edad de tres años, veamos. Lo que puedo hacer es que se lo puedo dar. Veamos todos los encabezamientos h3. Veamos cómo se ve eso. Una vez más. Entonces vamos a deshacernos de ese h3c, lo que tenemos oscuro. Una vez más, no heredó ningún estilo. No lo sé, no sé qué pasó. Así que deshazte de ese todo H3 para éste, Poppins. Realmente no sé qué le pasa a 24. Y veamos, esto debería ser 40 y el color debería ser ese color de tres años. Ahí vamos. Entonces ahora voy a escribir algo así como el nombre del auto. Ahí vas. Voy a golpear Control C, Control V. Y este H tres va a tener h tres azules. Ahí vamos. Estamos heredando deuda. Y por debajo de eso, vamos a incluir Control K p para el párrafo. Pongamos en todos los párrafos. Una vez más, no heredó el atributo style. No sé qué pasa porque cada vez que haces esto, sí hereda el estilo como debería. Así que vamos con 16. Y vamos con, ¿qué podemos ir aquí? A ver, 26 tal vez. Entonces 26. Y en este caso, permítanme elegir este color oscuro, por ejemplo, así que este debería ser. Y digamos disponible para recoger ahora y puedes ver cómo la tarjeta está escalando en realidad. Entonces, lo que vamos a hacer en este caso es que a lo mejor podamos poner esto en un div ahora mismo. Así que dale Control K. He sido div y metí todo esto dentro de un div. Así. Entonces, entonces este div debería llamarse algo así como auto Acción, Contenido, contenido de la tarjeta de corrección, algo así. Y debería tener un acolchado dentro de tal vez 24 en este lado. Porque quiero quitarlo del borde izquierdo de mi pantalla, algo así. Dentro de la deuda, lo que puedo hacer es presionar Control K, escribir B para el botón. Y voy a seleccionar mi botón principal aquí mismo. Y ese botón principal también puede tener una clase separada de botón de acción Car. Ahí vamos. A lo mejor puedo simplemente escribir algo así como reservar. Este auto. Ahí vamos. Creo que eso va a funcionar bien. Entonces lo que voy a hacer es presionar Control C, Control V para pegar en ese botón. Voy a deshacerme de estas clases. Para esta clase, voy a duplicarla y simplemente llamarla, Veamos esquema de Batson. Para el esquema del botón, vamos a tener lo mismo aquí mismo, pero C, opciones de préstamo. Ahí vamos. Y lo que tenemos aquí mismo, veamos. Reserva este auto por lo que deben ser del mismo ancho. Entonces tal vez pueda tener 47 acolchados aquí. Así que vamos a reducir esto un poco a 47 solo para que podamos igualar el tamaño de estos dos botones. Este contorno de botón debería tener, digamos color blanco porque el fondo es blanco. El texto dentro debería ser, veamos, no éste, sino quizá éste. Y debería tener un esquema como este. Pero en vez de negro, vamos a darle este bosquejo. Y el radio de la esquina sigue siendo ocho, y vamos a darle un relleno. Veamos cuánto los separamos aquí de 24. Entonces, el rodamiento superior debe ser algo así como 24 y el acolchado inferior también debe ser 24. Entonces solo nos da este espacio para nuestra tarjeta en la parte inferior. Entonces aquí lo que podemos hacer es darle a este párrafo algo así como pickup, P pickup. Ahora veamos qué tenemos para las distancias en nuestro diseño. Tenemos 24 y luego tenemos 24 aquí. Entonces hagámoslo. Entonces solo voy a seleccionar aquí y escribir algo así como s104. Estoy sosteniendo la tecla Alt y haciendo esto al mismo tiempo. Entonces eso se ve bien. Y por último, para el contorno del botón, lo que quiero hacer es cambiar esto para que pase el cursor. Dentro de la cubierta. Voy a cambiar una vez más esto a blanco, luego cambiar el color de mi texto a tal vez este párrafo h3, digamos y veamos, cambiar el color de este contorno a los tres años párrafo también. Déjame esconderme para que lo veas un poco mejor. Así. N va a heredar todo ese ancho. Así que cuando golpeé la vista previa muy rápido, se puede ver lo que tenemos hasta ahora. Así que reserva este auto, encantador. Y tenemos opciones de C solas. Sí, creo que eso funciona bien. Y en vez de que vaya atrás y adelante con el texto aquí, lo que puedo hacer es simplemente conectarlo. Entonces recuerdas cómo creamos esa colección CMS anteriormente, y esta es la plantilla de cicatrices. Y aquí puedes ver por el auto que quieras Actualmente estamos en una página de huracanes de Lamborghini, pero puedes cambiarlo en cualquier momento. Para que puedas obtener textos de autos select field, y yo voy a seleccionar el nombre. Entonces porque estamos en el huracán Lamborghini, va a sacar ese nombre por dentro. Entonces este va a tirar también, seleccione el precio del auto de campo. Y esto es sólo el normal que va a ir ahí. Ahora porque este azul tiene el acolchado en la parte inferior, me voy a deshacer de él, pero H3 azul y voy a llamarlo autos, plantillas de autos, porque se encuentra aquí. Voy a deshacerme de él porque esto es heredar ese espaciado aquí mismo. Y el contenido del auto. A lo mejor podamos tener un poco de relleno en este lado. Entonces tal vez podamos escribir algo como ocho o algo en el lado derecho. A ver. Sí, creo que ocho va a ir bien, solo porque quiere escalar en tamaños más pequeños y solo recortar en deuda. Bueno, así que básicamente el contenido de este auto está casi terminado, pero lo que necesitamos en la parte superior es que necesitamos esa etiqueta. Así que vamos a crear otro div. Así que golpea Control K tipo en def. Y pon esto encima aquí mismo. Y para eso, lo que podemos hacer es por ejemplo llamarlo auto o etiqueta. Ahí vamos. Y para el auto y la etiqueta lo que puedo hacer es darle un poco de ancho. Entonces le voy a dar 108. Entonces ese va a ser mi ancho y el ancho máximo va a ser algo así como 140. A lo mejor. Podemos comprobarlo más tarde y ver si funciona. Para el color de fondo. Lo que podemos hacer es elegir el color de la carrocería. Así. Porque si te llevo a nuestro diseño, puedes ver que eso es lo que está haciendo. Aquí. Lo que haremos es incluir esos elementos en. Entonces lo primero lo primero lo que necesito es dejar caer esos elementos dentro. Así que pulsa Control K escriba en imagen. Para la imagen, lo que quiero es que me imagines de autos, digamos campo. Y veamos etiqueta tipo auto, que es lo que necesitamos. Y en este auto, porque es un súper auto, se puede ver que está jalando desde ese campo. Lo siento. Y ahora en la etiqueta actual, lo que tengo que hacer es incluir ese texto de párrafo. Entonces lo que puedo hacer es darle a Control K tipo en P, saltar con el párrafo. Y vamos a darle párrafo. Veamos, veamos textos etiquetados. Porque en realidad es más pequeño y tenemos esa clase simplemente tirar ahí mismo. Y puedo seleccionar esto. ver, Dáselo al súper auto de Texas. Pero antes que lo hagamos, quiero seleccionarlo y obtener textos de autos. Y esto va a ser tipo auto. Entonces va a tirar del tipo de auto en sí. Ahí vas. Ahora para que esto se pegue el uno al otro, voy a encender el flexbox. Asegúrate de que estén centrados aquí mismo. Y veamos, asegúrate de que nuestra imagen no tenga ninguna pareja rara, pero nuestros textos sí. Entonces, deshagámonos de él. Vamos con cero. Ahora, hay centrados y este va a ser, veamos, icono de etiqueta de auto. Ya veo. Y si lo llevo de vuelta a nuestro diseño, se puede ver que tenemos la distancia de ocho entre esos dos. Entonces solo va a tener el margen derecho de ocho. Y finalmente, vamos a conseguir algo de relleno dentro. Entonces lo que puedo hacer es tal vez para el auto una etiqueta aquí, puedo saltar con 16 en cada lado. Creo que se ve bien. Pero para los anchos, vamos con 140 aquí también. Ahí vamos. Incluso puedo ir a un reset. Veamos cómo se ve eso. Genial. Bien. Veamos 24 a cada lado, aquí mismo. Así que vamos con 24. Una vez más, sosteniendo mi tecla alt. Ahí vas. Y de este lado, voy a poner 24 solo para que coincida con mi contenido a continuación. Pero aquí se puede ver que tenemos este tema, por lo que sí necesitamos darle algo de ancho. Entonces vamos con 140, creo, porque esta es la más larga. A ver, algo así como una treinta y dos, tal vez. Podemos darle al ancho máximo de un tercio e a, creo que va a funcionar bien. Y el ancho aquí va a ser, digamos 132. Entonces creo que va a ser bueno. Y no voy a lidiar con la altura porque ya puse ese emparejamiento, pero puedo agregar prohibición adicional de ocho tal vez. Y eso solo me va a dar algo de espacio adicional en su interior. Y finalmente, esto tiene un radio de esquina de cuatro, así que vamos a lidiar con eso muy rápido. Entonces aquí en la etiqueta actual voy a desplazarme hacia abajo y escribir cuatro y agregar ese relleno dentro. Entonces ahí vamos. Ahora tenemos nuestra tarjeta. Entonces si cambio entre estas páginas, entonces aquí estamos en un huracán Lamborghini. Puedes revisar este, por ejemplo y ver cómo se ve eso para el Maclaurin porque el texto es un poco más largo. Y si cambio a éste, por ejemplo se puede ver que todo cambia, incluyendo este. Pero no soy realmente fan de cómo se ve esto. Entonces tal vez podamos cambiarlo. Entonces no es lo mismo, pero de cualquier manera, simplemente mantiene el espaciado de la misma muy bien. Entonces tenemos etiqueta actual y tal vez podamos ajustar esto a algo aún menos como 128, tal vez algo así. Entonces ahora cuando cambiamos entre ellos, sí, se ve un poco mejor. Así que cuando le pegué a la vista previa aquí mismo, incluso puedes hacerlo aquí mismo y solo ver cómo se ven todas ellas. Entonces voy a parar el video aquí porque ya estamos a 16 min adentro. Y cuando volvamos vamos a empezar a abordar esta sección que es un poco más exigente que esta. Entonces te veré ahí. 181. Plantilla de coches: Bien, continuemos donde lo dejamos y lidiemos con la parte más difícil de este proyecto porque ahora tenemos que crear esta página y estos elementos dentro de aquí. Y van a ser bastante complicadas, pero solo trata de seguirme. Si no, siempre puedes simplemente o clonar este proyecto o abrirlo e intentar hacerlo una vez más. Entonces lo primero es lo primero, comencemos con un div. Así que pulsa Control K tipo en div. Y a este div se le va a llamar coche. Galería de autos. A lo mejor la información de tu auto, digamos. Déjame revisar mi proyecto original y ver. Entonces galería de autos porque esta es la información del auto. Sí. La galería de autos. Y dentro de esa galería de autos, lo que voy a hacer es darle a Control tipo K en div. Y a este div se le va a llamar car hero image, IMG. Y dentro de la deuda, lo que puedo hacer es poner en mi caja de luz. Así que pulsa Control K, escribe en caja de luz. Ahí vamos. Con la caja de luz. Está completamente en blanco, por lo que necesita obtener información de algún lugar para que primero tenga que configurarlo. Así que consigue medios de los autos. Y el primer campo que voy a hacer es seleccionar, digamos imagen de héroe de coche. Así que vuelve a aquí. A ver, mi caja de luz funciona. Y vamos a darle un nombre de héroe de autos, lightbox. Imágenes. Ahí vas. Y ahora lo que tengo que hacer es donde dice imagen, voy a seleccionarla y veamos, necesitamos configurarla para que saque imágenes de. Así que consigue imágenes de autos y selecciona campo, digamos imagen de héroe de cartas. Y porque estamos en Huracán Lamborghini, funciona pero no tarjeta de auto sino imagen de héroe de auto. Ahí vas. Entonces número uno. Y ahora que eso está terminado y lo tenemos listo, Lo que tenemos que hacer es poner en eso, esa etiqueta que vimos aquí, que dice c todas las imágenes. Así que vamos a lidiar rápidamente con eso. Entonces lo que voy a hacer aquí mismo dentro de la imagen del héroe del auto es golpear Control K, escribir en def, y colocarlo justo encima de mi caja de luz. Y le voy a dar un nombre de C. Todas las imágenes. Y vamos a darle un acolchado de 12 en cada lado. 121 cada estilo, así. 12 en cada lado. Veamos algo así. Y le voy a dar un color de fondo de los blancos puros son deuda. Y dentro de eso, lo que puedo hacer es tal vez tú eras el ancho máximo. Ancho máximo de 145, solo para que no vaya todo el camino hacia un lado. La altura va a ser auto. Y dentro de eso, voy a agregar rápidamente un párrafo. Entonces, dale Control K, escribe P para el párrafo. Y voy a escribir mi texto y ver, ver todas las imágenes. Ahí vamos. Y a ver si el estilo funciona. Sí, porque es heredar para todos los párrafos que funciona bien. Ahora en las imágenes del héroe del auto, lo que puedo hacer, vamos a ver, es que voy a poner esto, veamos. Entonces la imagen del héroe del auto va a ser relativa. Éste. Tan relativo. Y esto por dentro va a ser absoluto. Entonces cambiemos la posición a absoluta, así. Y solo ponlo en esta esquina derecha. Ahora bien, en términos de este párrafo, creo que sí, es retener esto. Entonces, si voy a un cero, debería quedarse igual que lo hace. Y finalmente aquí lo que puedo hacer es jugar un poco con el posicionamiento. Entonces tal vez pueda ir con uno y tal vez pueda ir con uno en el fondo o tal vez con dos. Veamos a dónde nos lleva eso. Sí, creo que dos funcionan bien para este caso. Pero si le pego a vista previa, da clic aquí mismo , se puede ver que ahora solo tenemos esta imagen dentro de nuestra caja de luz, así que necesitamos agregar más. Y para hacer eso, vamos a acercar aquí mismo en este auto y galería en esta imagen de héroe de autos. Ahí vamos. Y dentro de la información del auto, lo que voy a hacer es golpear Control K y escribir lista de recolección. Ahí vas. Esta lista de colección va a estar conectada a la galería de autos uno. Y va a tener esas cuatro imágenes, si recuerdas. Entonces si voy a aquí y le voy a dar un nombre de, digamos autos, galería. Uno. Así. Ve a mi configuración y asegúrate de que obtenga las imágenes de ella. Entonces fuente es esa. Así que los autos Galería Uno, que está bien vuelven a aquí, y obviamente necesito asignarlo. Así lista de colección, artículo de colección. Aquí puedes ver que tenemos estas imágenes, así que tenemos 234.5. No están en el orden correcto. Entonces lo que podemos hacer muy rápido es a ver, a ver. A lo mejor podamos tratar con la lista de colecciones y mostrarla como un flexbox como este. Y tal vez asegurarse de que estamos en el espacio intermedio. Por aquí. Veamos qué podemos hacer. Colección, lista, artículo, auto, galería uno. Por alguna razón. No me muestra las imágenes. Galería uno. Ahí vas. Me muestra las imágenes pero me muestra las imágenes de fondo. Así que sí, en realidad debería poner la caja de luz dentro. Entonces, deshagámonos de éste. Lo que puedo hacer es así que dentro del artículo de colección, o voy a hacer es presionar Control tipo K en caja de luz y poner esa caja de luz adentro. Entonces ahora se puede ver que tenemos esta caja de luz así. Voy a darle básicamente el mismo nombre que este primero. Entonces voy a ir justo aquí. Héroe del coche, imágenes de caja de luz. Así que selecciona este, héroe de coche o tal vez imágenes de caja de luz de coche. Bueno, aún mejor ahora vamos a darte las mismas imágenes de car hero lightbox. Ahí vamos. Entonces exactamente la misma clase. Y finalmente tenemos que conectarlo. Entonces, si abro la imagen y obtengo imágenes de ella, dices galería de autos uno. Entonces haz clic ahí y ahí vas. Ahora tenemos todas nuestras imágenes en su interior. Ahora bien, una cosa en la que deberíamos trabajar es un poco de espaciado aquí mismo. Entonces vamos a ver, Obtener Media de los autos. Galería de autos uno, está bien. Entonces ahora todo está conectado. Pero en realidad no quiero eso. Porque si le pego a la vista previa, ahora, ya ves que no se conecta, así que necesito conectarlo con otras cajas de luz. Yo creo. Así que vinculado con otras cajas de luz aquí, el nombre del grupo debería ser galería de autos o comer o galería. Bien, si golpeo adelanto, ahora sigue mostrando esta galería de cursos. Permítanme ver realmente cuál es el problema aquí. Entonces galería de autos, Probemos esa. Ahí vamos. Entonces ahora tenemos este 1,234.5. Todo funciona como debería. Se puede ver cómo se ve. Y ahora lo que puedo hacer, creo, es en vez de esto, juguemos un poco con algunos escenarios. Entonces en vez de que esto sea un flexbox, tal vez pueda convertirlo en una grilla. Crea cuatro columnas aquí, y deshazte de esta segunda fila. Prensa hecha. Y creo que está bien. Entonces esta lista de colección, Vamos a ver, autos galería uno. Sí, la galería de Keras uno puede tener algún margen en la parte superior y el margen debería ser 24. Entonces vamos con 24. Margen. Ahí vamos. Entonces ahora tenemos galería de autos uno. Lo que podemos hacer en este caso es probar un descarado y duplicado. Así que dale Control C, Control V. Así que ahora vamos a cambiar el nombre de esto para duplicar esta clase, llámala Galería a. Y dentro de esta galería a. De hecho intentemos vincularlo con esa otra caja de luz. Así lista de colección. Veamos qué podemos hacer. ¿Podemos vincularlo de alguna manera? No podemos. Entonces vamos a ver ¿ qué más podemos hacer? Entonces, deshagámonos de eso. Y lo que puedo hacer en este caso es simplemente agregar una nueva colección. Control K, empieza todo de nuevo. Entonces tecleando colección o lista así, y deberíamos vincularla a la galería de autos también. En realidad. Y eso le va a dar nombre. Entonces lo que podemos hacer es volver a aquí, galería de autos a, en este caso. Ahí vamos. Y nos va a mostrar esto. Entonces 67.8. Así que recuerda lo que hicimos con este dentro del artículo de colección que tenemos que poner en la caja de luz. Entonces hagámoslo aquí mismo. Así que lista de colección, colección, artículo Control K tipo en caja de luz. Te dije que esto va a ser difícil. Y ahora tenemos que conectar estos. Entonces una caja de luz debería conectarse a esa. Así que vamos a seleccionarlo de aquí, creo que obtenga imagen de la galería de autos también. Ahí vamos. Está mostrando esto. Entonces 5678. Sí. Veamos qué podemos hacer en este caso. Entonces creo que podemos tener en la lista de recolección, podemos poner las rejillas así mismo como lo hicimos anteriormente, poner en la cuadrícula y darle una cuadrícula de tres columnas de ancho, tal vez cuatro columnas de ancho. Entonces se mantiene en la misma dimensión, se deshace de ella aquí mismo, golpea aquí y ve a Configuración. Y necesito asegurarme de que se vincule con otras cajas de luz. Enlace de caja con otras cajas de luz. ¿Y cuál era el nombre? ¿Una vez más? Galería de autos. Ahí vamos. Entonces vamos a cerrar todo esto. Vamos a aquí. Galería de autos. Ahí vamos. Ahora cuando golpee la vista previa rápida, da clic aquí mismo. No, sigue sin enlazar por alguna razón, así que intentemos eso una vez más. Por lo que no puedes ver ningún artículo encontrado por cualquier motivo. Así que vamos a ver en el enlace de la caja de luz de configuración. A lo mejor le pueda dar una clase. A ver, esta caja de luz está obteniendo medios de medios de comunicación de la galería de autos dos. Y vamos a probarlo. Ahora. Ahí vamos. Entonces solo debería haber sacado los medios de comunicación. Entonces ahora cuando hago clic a través de estas páginas, se puede ver que tenemos las ocho imágenes. Y cuando cambié a través de ellos, se puede ver que todo funciona muy bien. Ahora un último paso es que necesito intentar que esto se oculte. Entonces lo que puedo hacer es cerrar todo esto, volver a mi estilo, seleccionar Course Gallery Tool e intentar ocultar estos elementos y ver si eso funciona. Y lo hace. Entonces 2345678. Entonces está ahí en la página, simplemente no es visible. Así que incluso puedo usar mis flechas aquí y enumerar izquierda y derecha. Se puede ver en este caso, así puedo cambiar entre ellos. Todo funciona como debería. Simplemente no es visible. Entonces ojalá para que sea de 14 min en este video, te das cuenta que incluso a veces tengo mi apertura diseñada aquí mismo, pero a veces incluso eso no va a funcionar correctamente. Entonces hay que ser creativo con esto. Hay que imaginarlo, hay que trabajarlo. Y a veces estos temas van a aparecer. Pero más de estos problemas que resuelves mejor diseñador y desarrollador, vas a conseguir con el tiempo. Voy a parar este video aquí. Y en el siguiente video vamos a continuar con la información a continuación esta. Y voy a mostrar cómo agregar esas diferentes secciones. Y básicamente se va a repetir de nuevo. Vamos a conectarlo. Pero antes que lo hagamos, saltemos rápidamente a aquí. Así que vamos a cambiar a Cadillac escalar, por ejemplo y se puede ver que está cambiado. Entonces, si golpeo la vista previa aquí mismo, haga clic en escalar. Todo está conectado como debería, lo cual es encantador de ver y nos ahorra un montón de veces. Así que ahora estamos creando un layout para nuestros clientes por primera vez. Y luego una vez que cambien, puedes ver que debería actualizarse. Creo que por la razón que sea no se actualizo. Entonces probemos este. Dibujo un paseo. Por lo que se actualiza aquí, pero no aquí. Ahora me muestra estos colores fuertes. Entonces, si cambio al siguiente, tal vez me muestre un rango o caminar por la actualización. Para que puedan ver me muestra el Range Rover, vogue. Pero si vuelvo a Vogue y llego a adelanto ahí, ahora me muestra la gama Rover Vogue, que quería en primer lugar. Entonces sí funciona. Solo necesita un poco de tiempo para que se actualice para que veas que todo funciona como debería como queremos. Volvamos a Lamborghini porque ahí es donde empezamos. Y como dije en el siguiente video, vamos a empezar con esa siguiente sección. Entonces te veré ahí. 182. Plantilla de coches: Ahora continuemos donde lo dejamos. Y me acabo de dar cuenta de que esto no está dentro de un div. Así que vamos a darle a Control K tipo en div y adentro porque debería ser galería de autos, pero lo acabo de colocar afuera así que no importa. Vamos a llamarlo galería de autos top tal vez o principal Kalgoorlie o como quieras llamar tuyo. Y pongámoslo aquí. Esto debería ir aquí. Esto debería ir arriba, esto debería ir por encima de eso, y todo debería funcionar como se esperaba. Vamos a echarle un vistazo. Sí. Entonces todo funciona como debería. Y no vamos a tratar con responsive todavía porque esta sección va a tomar toda la sección, todo el ancho de la sección y solo va a tener el relleno 12 20 adentro. También vamos a ocultar estas imágenes y sólo tenemos una imagen principal. Pero cuando haces clic, obviamente puedes tener tu diseño aquí también. Puedes ver cómo se ve en diferentes páginas porque este es solo un componente principal y solo va a mostrarse bien en cada pantalla. Así que volvamos a aquí, y volvamos a la edición porque necesitamos crear esa siguiente sección, que va a ser esta sección de visión general. Así que vamos a hacer precisamente eso. Entonces ahora que tenemos nuestra galería actual top, lo que necesito aquí mismo es darle a Control K y poner en un div, que llamaré resumen. Así. Dentro de la visión general, lo que voy a hacer es poner la altura máxima de 196, que es la altura máxima de lo que creamos anteriormente. Voy a tener el color de los blancos puros, así. Y voy a tener el radio de esquina de ocho, creo. Sí. Entonces entremos y veamos qué necesitamos. Entonces necesitamos ese tipo H3 Control K en H para el tipo de rumbo en H tres. Y va a tomar finalmente de la topografía que necesitamos, así que vamos a guardarla y voy a escribir en resumen. Y para eso, voy a agregar una clase combo aquí, y voy a llamarla por ejemplo de tres años. Información del auto. Ahí vamos. Y aquí lo que vamos a hacer es tal vez poner algún relleno o margen. A ver. Vamos con margen cero aquí. Vamos con margen cero aquí. Y voy a poner el maridaje superior de 24. Y voy a poner, digamos margen izquierdo de 24. Eso solo me va a dar un poco de espacio en cuanto a esto para la visión general, lo que puedo hacer es quizá veamos. Sólo puedo poner en mi margen superior de 24. Sólo voy a empujar esta sección aquí mismo. Veamos, tal vez, sí, eso es todo. Entonces, vamos a golpear Control K una vez más porque ahora necesitamos poner esa información. Así que crea otro div, el bloque. Y a este bloque voy a llamar Visión general del coche porque eso es lo que es. Y esa va a ser nuestra grilla. Pero antes de eso, tenemos que lidiar con esas pequeñas y aburridas secciones. Entonces si te llevo de vuelta aquí mismo, aquí vamos a tener una cuadrícula de cuatro columnas y dos filas que contengan ocho elementos en total. Cada elemento va a estar dentro de un div separado. Y ese div va a ser el real. Entonces veamos esto, que es el flexbox. Así que comencemos. Voy a golpear Control K una vez más. Ha habido div. Y dentro de este bloque div, que aquí voy a llamar producción. Uy. No me di cuenta que estaba cambiando eso. Entonces volvamos a aquí. Así diblock cláusula de producción. Aquí. Ahí vamos. Y dentro de ese div, lo que voy a poner es el control de imagen tipo K en imagen, así. Y voy a obtener imagen del campo selecto. Y veamos qué podemos hacer. En realidad, no, no voy a sacar una imagen porque ya tenemos esas imágenes. Entonces esto va a ser, vamos a ver, calendario, icono así y dejar que lo tire de inmediato. Así que elige imagen, déjame encontrar mi icono de calendario, que está ahí vamos, este al lado. Lo que vamos a tener es, veamos, un párrafo, Control tipo K en párrafo PIE. Y va a contener los ajustes de párrafo, lo cual es genial. Aquí. Consigamos textos de campo selecto, y esto va a ser en el año de producción. Veamos, año de producción, producción aquí. Ahí vamos. Producción aquí. Eso se ve genial. Entonces finalmente, lo que voy a hacer es convertir esto en una pila y asegurarme de que se alineen así y asegurarme de que mi párrafo esté puesto en P. Veamos qué puedo hacer. Todas las opiniones tal vez o P autos. Sí, hagamos una revisión y solo deshagamos de este margen inferior. Y ahí tienes. Ahora, van a ir justo ahí. Y lo que voy a hacer con éste es que veamos cuanto estuvo aquí dentro. Creo que el espaciado era de 16. Encantadora. Entonces volvamos a aquí y simplemente ingresemos 16 para el margen derecho, que solo va a empujar eso. No te preocupes por eso hace un momento porque solo lo vamos a poner dentro de otro envoltorio. Entonces vamos a ver. Lo que podemos hacer es para la visión general del curso, lo que puedo hacer es voltear en una grilla. Entonces vamos con cuatro columnas. Como ya hablamos, los anélidos van con dos papeles, lo cual está bien, ya tenemos eso. Entonces selecciona esa producción aquí, dale Control C. Pero antes de eso, déjame revisar algo. Sólo voy a ponerlo en el centro. Y veamos, porque es un grid child, pero Flexbox piensa que no se ve tan bien Aquí mismo. Sí, creo que en realidad está bien. Entonces Control C, Control V. Y este siguiente es lo que llamaremos clase tan duplicada. Llamaremos kilometraje. Para el kilometraje. Esto va a ser duplicar el icono de kilometraje de clase y reemplazar la imagen con el kilometraje. Entonces, una vez más, puedes usar la búsqueda si quieres. Yo sólo voy a poner en esto y para el texto en lugar de la visión general, lo que voy a hacer es usar kilometraje. Ahí vamos. Ahora pulsa Control C, Control V. En esta siguiente, lo que haremos es duplicar la clase. Será tipo combustible. Vamos de inmediato a escuchar un reemplazar esto con el tipo de combustible en voz alta. Y voy a sustituir este duplicado clase de combustible tipo ICN por icono de tipo combustible. Y sustituya esto por el icono de tipo combustible, que es el icono de una bomba. Déjame ver dónde está. Ahí vamos. Genial. Una final que quiero agregar es el control C. Control V en esta línea es si duplico la clase, será transmisión. Transmisión. Y vamos a seleccionar el texto para ello. Transmisión, donde está, donde es nivel de transmisión. Y para éste, vamos a duplicar esto y llamémoslo icono de transmisión. Genial. Y vamos a reemplazar la imagen con la transmisión, que es ésta. Y ahí vamos. Entonces ahora sigamos adelante y agreguemos uno nuevo. Control C control V, Control C Control V y Control C, Control V. Ahora tratemos con estos. En primer lugar, vamos a duplicar este. Y va a ser tipo motor. Duplicemos este. Y van a ser puertas. Este va a ser asientos. Y la última va a ser la garantía. Ahí vas. Entonces ahora vamos uno por uno y reemplazarlos aquí. Entonces esto va a ser una garantía. Reemplacemos este ícono de garantía y reemplacemos esto con la garantía, que es esta una grados. Este siguiente debería ser, veamos, uh, asientos. Entonces escriba asientos de pintura. Y esto debería ser reemplazarlo aquí. Entonces semillas, ICN, sustituyen la imagen por el asiento, que está aquí. Esta es puertas. Así que selecciónala de aquí. Una vez más, cuando hagas esto, una vez, se conectará y sea lo que sea que tu cliente cree una nueva página, simplemente conectará esos elementos en n, simplemente todos funcionan a la perfección. Entonces se llama puertas. Icn. Para el icono, para que sepa lo que queremos. Encuentra el icono de la puerta, y aquí está, aquí mismo. Y por último, estos van a ser los tipos de motores. Entonces vamos a reemplazarlo aquí. Aquí, el tipo de motor califica y vamos a reemplazar esto tomó una clase y el tipo de gen grados ICN. Y por fin vamos a reemplazar eso. Y vamos a estar bien para ir motor, que es este. Eso es genial. Ahora, por fin, lo que quiero hacer es porque tenemos esta visión general del coche de la parrilla. Lo que puedes hacer es poner un poco de relleno. Entonces pongamos en el emparejamiento por ambos lados, algo así como 20 aquí. Y vamos a darle un margen en la parte superior e inferior. Entonces veamos aquí. Entonces ya tenemos, tenemos 24 y por debajo que tenemos 32. Entonces hagámoslo. Entonces si vuelvo a aquí, lo que puedo hacer es volver al top 24, volver al fondo. O tal vez incluso mejor puedo poner en margen aquí. Entonces 24 porque quiero el espacio afuera y 32 porque quiero que empuje n. pero por alguna razón no empujó. Veamos un resumen. Entonces tal vez voy a necesitar poner eso en la propia tarjeta. Así que acertó a cero aquí mismo. Y puedo golpear a todos ustedes en realidad n tipo en auto para el margen inferior y eso debería arreglarlo. No hay pedido de pin aquí también. Por lo general, lo arregla auto, pero no importa. Vamos a ocuparnos de ello aquí. Entonces aquí voy a escribir cero, pero para el emparejamiento voy a ir con 32 en la parte inferior. Y ahora eso realmente lo arregla muy bien. Cuando lo último que quiero hacer es asegurarme de que este espaciado sea correcto. Entonces lo que voy a hacer aquí es que tenemos 24. Lo que puedo hacer es editar un poco mi grilla. Y aquí por las filas puedo ir con 24 y eso los va a empujar un poco aquí. A lo mejor podamos tener ese espaciado de 32. Creo que eso va a agruparlos bien. Y ahora tengo, tenemos, creo que tenemos mucho más respiro para que todos nuestros íconos y todo nuestro contenido lo muestren. Entonces una última cosa quiero mostrarles aquí, porque quiero concluir este video aquí. Y entonces vamos a pasar a la siguiente sección en el siguiente video es esto. Entonces cuando cambio entre el coro, digamos que este es 2021 y tiene tantos kilómetros. Lucy ahí. Se puede ver que tiene tantos kilómetros, pero es 22 en el tipo de motor es batería. Contamos con dos años de garantía. Entonces, si cambio esto a Porsche Cayenne, por ejemplo tenemos cinco puertas. Tenemos este kilometraje, tenemos un año, todo se actualiza en tiempo real. Y esa es la belleza pura de estas plantillas Webflow CMS porque creas una plantilla de una vez y todo el contenido que tú o tu cliente crearon, se va a actualizar automáticamente. Entonces volvamos a nuestro huracán porque eso es lo que editamos. Y como dije, vamos a parar aquí mismo porque en el siguiente video, vamos a crear esa descripción del vehículo que irá justo abajo. Pero en realidad porque, porque eso es bastante simple en realidad, hagámoslo en este video. Así que golpea Control K tipo en def y llama a este vehículo descripción llamada descripción. Y lo que voy a hacer es simplemente usar el color blanco aquí, así. Vamos con ocho para el radio de esquina. Y en cuanto a dimensiones, veamos qué podemos hacer aquí mismo es ante todo, vamos a darle 24 del margen en la parte superior. Ahí vamos. Sólo voy a robar este texto y pegarlo aquí mismo. Va a mantener los mismos ajustes que antes. Y por último, lo que quiero hacer es poner en el texto enriquecido que hay dentro. Así que pulsa Control K type enriquecer texto, y solo asegúrate de conectarlo desde los autos. Y voy a seleccionar una descripción del vehículo, y va a poner en esa descripción del vehículo. Y por último, llamémoslo digamos texto de descripción del vehículo. Ahí vamos. Solo quiero asegurarme de que tengo relleno en el lado izquierdo de 24, 24. Y sólo va a empujar eso. Y puedo poner en el acolchado superior así como 24 tal vez. Para la descripción del vehículo en sí, puedo ir con 32 en la parte inferior. Ahí vas. Esta sección se ha completado y va a sacar la diferente información que pones dentro de lo que sea que hayas establecido ahí mismo. Y debido a que esto es una configuración así, tal vez podamos entrar y hacer más algunos cambios adicionales. Pero creo que aquí es donde realmente quiero concluir este video porque en el siguiente video vamos a tratar con la especificación de los vehículos. Y si lo demostré, ahora tenemos que lidiar con esto y este video ya lleva 15 min de largo, así que te veré en el siguiente video. 183. Plantilla de coches: Continuemos donde lo dejamos con la especificación del vehículo. Y básicamente es la misma sección. Simplemente tiene estas rejillas pobladas en su interior. Así que déjame volver a Webflow. Seleccionar la información de mi carro div Control K para haber sido div. Y a esto se le va a llamar especificación del vehículo. Especificación del vehículo , recta, margen, superior 24, margen inferior 32. Y podemos darle ese color de fondo del blanco. Y podemos ir con radio de esquina de ocho. Entonces puedo entrar y todavía esto y pegarlo aquí mismo. Vaya, intentemos eso otra vez. Ahí vamos. Aquí donde dice todo reseña, voy a cambiarlo a una descripción del vehículo. Aquí abajo. Voy a teclear la información del vehículo. Lo sentimos, especificación del vehículo. Ahí vamos. Eso es lo que quería. Así que sigamos adelante y cerremos todo esto para que no nos moleste. Entonces ahora cuando abro eso, lo que tengo que hacer a continuación es poner en un bloque de texto. Así que pulsa Control K tipo en texto, bloque de texto, dale una clase de bloque de texto. Ahí vamos. Y ahora voy a poner en la clase combo de tal vez, no sé, auto, autos, plantillas. Ahí vamos. Y lo hice porque voy a poder agregar un relleno de 24 en este lado. Encantadora. Y tal vez podamos hacer algunos cambios adicionales en el estilo. Entonces veamos qué podemos hacer aquí. A lo mejor podemos sumar el margen en la parte superior de 24, en la parte inferior de 32. Y porque tenemos esta clase combo sólo va a afectar a esa. Ahora por debajo de ese hit Control K escriba en def, agregue un nuevo div, que se va a llamar performance. Y esa actuación va a ser grid, que va a albergar todos nuestros artículos. Pero antes de empezar, lo que primero voy a hacer es quizá incluir algún acolchado en cada lado, tal vez 24, como hicimos encima con este. Entonces, si selecciono esa, déjame comprobarlo. Sí, tenemos 20. Se puede aumentar eso a 24. Así que eso es precioso porque aquí tenemos 24 y ahora todo funciona como debería en realidad. Así que ahora con ese conjunto de rendimiento, lo que puedo hacer es golpear el tipo de Control K en div. Y dentro de ese bloque div, lo que voy a necesitar es poner en ese texto. Entonces solo voy a necesitar bloques de texto dentro de aquí. Entonces vamos a ver. Dentro de la actuación, voy a poner de cero a 100 km/h, así como esto K h. y dentro de eso, voy a golpear Control K, escribir bloque de texto. Y usa la clase de bloque de texto. Y usa una clase adicional de, veamos, auto, plantillas del auto, descripción plantilla del curso. Porque lo que quiero aquí mismo es simplemente usar normal, simplemente todo está como debería ser. Pero aquí debería tirar de algunos textos. Entonces veamos, tal vez pueda incluso bajarlo de tamaño. Entonces tal vez 16. Este de cada 40 es demasiado. Vamos con 32. Debido a que estamos en una descripción de plantilla de curso, funcionará bien y podrás extraer el texto. Entonces, antes que nada, seleccionemos esto y escribamos de cero a 100 K M H. Ahí vamos. Golpea Control C, Control V. Y luego en el siguiente, solo conecta ese campo. Entonces ahí vamos. Ahora en esta, lo que voy a hacer es convertir esto en una pila así que asegúrate de que sean así. Entonces conectando en cada lado. Y ahora lo que puedo hacer es seleccionar mi actuación y convertirla en una grilla. Y lo que voy a hacer es crear dos columnas, lo cual está bien. Y aquí voy a tener tres filas. Así que agrega fila adicional aquí mismo. Y veamos, la distancia debería ser 32, esto debería ser 24, creo. Presiona Bien, y volvamos a XD y simplemente verifiquemos muy rápido. Entonces estos son 24 y esto está bien. Volvamos a aquí. Así que solo voy a seguir adelante y presionar Control C Control V. Control C Control V. Solo rellena todos mis campos muy rápido para poder seguir adelante y agregar una información adicional dentro. Entonces lo que puedo hacer aquí mismo es que esto es de cero a 100. Duplicemos este. Esta siguiente serán válvulas, así. Y vamos a seleccionar esto y llamarlo vocales. Y elige esta. Y veamos ¿dónde están nuestras válvulas? Ellos son, son encantadores. Este siguiente debería ser de máxima velocidad. Y el campo en sí debería ser de máxima velocidad. Así que duplica este , velocidad máxima. Y solo cambia este bloque de texto a velocidad máxima dentro de donde estamos. Veamos la velocidad superior, superior, máxima en voz alta. Entonces este siguiente abajo que debería ser el poder. Y voy a teclear Poder. Bi en realidad escribe en todos ellos así que sé lo que son. Entonces cilindros. Y este último debería ser torque. Entonces conectemos el poder. Veamos dónde estamos. Poder, poder, poder, encantador. Y esto debería ser cilindros. Así que vamos a duplicar esta clase. Y esto debería ser cilindros. Y finalmente, este último debería ser torque. Así que duplicarlo. Y vamos a conectar esto con el par así. Ahora esta sección está terminada. Lo que puedo hacer a continuación es porque tenemos listo el rendimiento. Voy a ver el espaciado y la distancia es 32. Entonces tal vez pueda darle, así que seleccione la actuación y le dé el margen inferior de 32, tal vez así. Y veamos, esta especificación vehicular tiene el margen inferior de 32, pero no quiero eso. Quiero que el relleno sea 32 duramente. Entonces sigue lo que sea que haga aquí. Seleccionemos este texto, presionemos Control C, Control V, y solo muévelo por debajo de mi rendimiento. Y el siguiente debería decir seguridad, seguridad así. Y básicamente, voy a hacer lo mismo por la seguridad que hice aquí mismo. La diferencia es que en realidad voy a tener una configuración un poco diferente. Así que vamos a seleccionar este bloque de texto, presione Control K escribiendo div. Y dentro de este bloque div, que voy a llamar entrada de seguridad en 24 en cada lado. Así. Voy a convertir eso en una grilla. Pero ahora va a tener dos columnas, pero 245 filas distintas. Así que 2345 filas diferentes. Ahí vamos. Ahora dentro de eso y golpeas Control K tipo en def. Y esta primera debería ser, veamos, seguridad en la forma. A lo mejor puedo llamarlo columna izquierda o columna derecha. Realmente depende de ti cómo quieres hacer eso. Pero creo que esto va a funcionar bien para éste. Pero puedo hacer es tal vez sólo pueda poner algunos bloques de texto. Ni siquiera necesito hacer bloqueo. Entonces veamos qué podemos hacer aquí. Así que pulsa Control K escriba en bloque de texto. Así. Vamos a darle un estilo de bloque de texto y vamos a darle una descripción de plantilla de curso de clase combo. Sí, eso funciona bien. Déjame solo revisar los textos. Lo que tenemos aquí mismo. Eso es genial. Así que pulsa Control C, Control V, Control V, Control V, v, V, v, V, hasta que complete todo mi texto. Y ahora lo que voy a hacer es seguir adelante y copiar y pegar el texto en. Ahora bien, este texto es muy importante porque va a reflejar todos tus elementos que realmente tiene tu auto. Entonces, por ejemplo puede ver asistencia de freno adaptativa con sujeción y cosas así. Pero porque no usamos el sistema de gestión de contenido para ello, porque obviamente algunos autos, especialmente los autos más antiguos, pueden tener tal vez dos o tres características de seguridad diferentes mientras que los autos más nuevos, especialmente con estos Autos Clásicos, o digamos, los autos de lujo, como en este caso, van a tener como mil características diferentes. Por lo que es realmente difícil juzgar lo que puedes hacer dentro de dónde. Pero en este caso, lo que podemos hacer es a lo mejor que podamos hacer que nuestros clientes llenen esta información por sí mismos. Entonces en este caso, como pueden ver, ahora tenemos esta grilla. Entonces seguridad, tenemos 24 en cada lado, lo cual es fantástico, pero lo que puedo hacer a continuación es golpear Control C, Control V. Mueve esto abajo. Esperanzas no aquí sino aquí. la razón que sea él no lo hizo. Vamos Control Z. Textblock en voz alta. Y vamos a mover el campo de seguridad justo arriba. Entonces tengo algunos errores claramente con el Webflow. Ahí vamos. Entonces seguridad, el siguiente va a ser la comodidad del conductor. Lo que quería decir antes es quizás tu cliente no va a tener esa información lista para que la incluyas dentro de CMS. Entonces quizás la mejor opción para ellos sería poner esta información manualmente más tarde porque como dije, algunos autos tienen exactamente los mismos sistemas como ABS, como frenos de estacionamiento, como cámaras en estos días, pero otros autos no. Entonces tal vez sea una sabia decisión que tener eso a su disposición para su cliente y simplemente poner esa visión para ellos para que puedan manualmente dentro del sitio está en vivo, entrar, haga doble clic y simplemente reemplace o elimine o edite campos del diseño de ER y no romperlo. Porque aquí sólo vamos a tener una grilla dentro. Entonces solo va a ser súper simple. Duplicemos este. Esto va a ser la comodidad del conductor. Y simplemente me encanta trabajar con cuadrículas por esa misma razón. Así pueden ver que solo estoy usando la misma cuadrícula, pero solo estoy reemplazando el texto dentro de otro texto. A ver. Y porque solo estamos usando una clase combo para ello, que es la descripción de la plantilla de autos. Es solo heredar esa clase de comp. Y es solo mostrarnos lo que queremos ver en primer lugar, que es el espaciado en la parte superior y en la parte inferior, que es exactamente lo que quiero en realidad. Vamos con éste. Vamos con éste. Integración de teléfonos inteligentes. Ahí vamos y tenemos dos más así. Y por último, así. Ahí vamos. Entonces ahora que eso está terminado para la comodidad del conductor, lo que tengo a continuación es otro. Así que le pegó Control C, Control V. Y voy a tratar de posicionarlo justo debajo de saber. Entonces intentemos hacerlo de esta manera. Golpea Control C, Control V en este. Y voy a posicionar mis bloques de texto justo arriba. Esto va a ser la seguridad. Eliminar clase. Pero quita el duplicado. Esto va a ser la seguridad. Y aquí simplemente voy a escribir en seguridad. Y por la seguridad una vez más. Así que vamos a duplicar esta clase va a renombrar la clase va a ser seguridad ya existe. A ver. Esto va a ser realmente exterior. Exterior. Y esto debería decir exterior así. Entonces aquí en el exterior vamos a tener un poco menos de artículos. Entonces porque tenemos aquí una clase combo de exterior, la clase que acabamos de copiar. Te voy a enseñar cómo lidiar con eso también. Haga doble clic aquí. Entonces haz doble clic aquí mismo, control C, control V. Tengo a los niños robando estrellas, que tengo en mi auto también. Ya ni siquiera te dan la llanta de repuesto. Solo tienes que arreglar tu llanta, comprar o vender. Básicamente si estás atascado al final de la cuerda. Entonces ahora que tenemos esto para el exterior, se puede ver que faltan estos cuatro. Entonces lo voy a hacer es simplemente deshacerme de ellos así. Y ahora nos quedamos con estos campos vacíos. Entonces porque esto tiene su propia clase, lo que puedo hacer es simplemente quitar las filas. Y por eso me encanta trabajar con estas rejillas, simplemente súper, súper simple de hacer. Y debido a que el interior tiene exactamente lo mismo que éste, lo que voy a hacer es darle a Control C Control V. Y darle a Control C Control V aquí mismo. Muévelo justo abajo. O mover esto justo arriba donde queramos. Aquí. Sólo vamos a teclear en interior. Y vamos a terminar en apenas un par de segundos. Porque la última sección en realidad necesita algunos ajustes. No va a ser tan sencillo como este, pero voy a mostrar un pequeño truco cómo puedes acelerar eso también. Entonces hagamos clic aquí mismo, control C, control V, haga doble clic en Control V, Control V. Ahí vamos. Y una última cosa que es esta, Control V. Ahora que eso está hecho, en realidad voy a seleccionar esto porque este es nuestro interior. Así que duplica el interior de la clase. Se puede ver porque este es el exterior, este es el interior. Funciona bien. Y una última cosa que quiero mostrarles es esto porque tenemos estas dimensiones, que es esto de aquí mismo. Y tenemos que sacar estos del CMS. Entonces, ¿cómo podemos hacerlo en deuda? De hecho, cerremos todo esto. Déjame. Simplemente mira lo que hice aquí mismo. Entonces lo que puedo hacer aquí es que puedo tomar esta información. Entonces veamos, esto fue performance. Así puedo presionar Control C, Control V para pegar esa sección y arrastrarla hasta aquí. Y entonces puedo mover estos dos arriba, así. Entonces puedo usar mi libro de texto Control C Control V y pegarlo justo debajo de mi interior, así. Y porque esto va a tener un poco más, voy a usar esta performance y voy a duplicar la clase y llamarla dimensiones. Dimensiones. Y ahora porque voy a necesitar cuatro en cada lado, excepto aquí mismo, pero seguiré necesitando cuatro. Simplemente sigamos adelante y agregamos porque ahora estamos en dimensiones, puedes dar clic aquí mismo y simplemente agregar una nueva fila. Y esto va a quedar en blanco, pero esto va a tener una cantidad dentro. Así que vamos a ocuparnos de ello. Entonces esta primera, vamos a duplicarla. Se le va a llamar altura. A éste se le van a llamar pesos. Éste. Así que vamos a duplicarlo. Se va a llamar vinculado. Al siguiente se le va a llamar espacio de arranque. A esta se le va a llamar distancia entre ejes. Esta va a ser, veamos qué es lo que realmente eliminamos aquí mismo. Entonces tanque de combustible, así que un renombrar, tanque de combustible así. Y copiemos y peguemos uno más. Y esta última en la parte inferior va a estar mojada. Así que vamos a traer eso de vuelta cuando la escena, esto va a ser ancho duplicado. Y finalmente, vamos a hacer doble clic y escribir todo eso en altura. Esto va a estar vinculado. Esto va a ser la distancia entre ejes. Esto va a ser peso. Esto va a ser Brightspace. Y esto va a ser llenado de la capacidad del tanque. Y por último, vamos a conectarlos. Entonces éste, conectemos con ancho. Entonces veamos dónde estamos aquí mismo. Yo creo, aquí mismo, allá vamos. Ese es el ancho. Esta es la capacidad del tanque de combustible, que es esta. Esto va a ser por la distancia entre ejes. C basará, la base basará, donde está. Poder. Distancia entre ejes. Genial. Esto va a ser para el espacio de arranque. Empecemos desde el espacio de arranque superior. Entonces, por cualquier razón , simplemente reemplaza su posición. Así que la longitud, la longitud está justo aquí. Esto va a ser por los pesos. Veamos, espera, espera, espera, espera, espera, espera, espera. Y por último, esto va a ser por la altura, así. Y ahora todo está terminado. Déjame colapsar todo. Entonces, si le pego a vista previa ahora mismo en esta página, aquí tenemos nuestras imágenes como explicamos como hicimos algunas. Esta visión general. Tenemos, tenemos y igual descripción, tenemos especificación dentro de la cual tenemos rendimiento. Tal vez podamos ajustar esto un poco solo para que podamos obtener un poco de mejor espaciado. Creo que tenemos esto que es genial. Contamos con conductor comodidad, exterior, interior, interior. Y esto finalmente debería decir dimensiones. Así que arreglemos eso muy rápido. Dimensiones. Y debido a que esta es una plantilla de curso de libro de texto, lo que voy a hacer es cambiar su color a este color solo para diferenciarlo un poco como ves aquí mismo. Por lo que coincide un poco más con estos títulos en la parte superior. Y creo que eso es básicamente, es, lo último que queda por hacer es conectar esta tarjeta para seguir. Y cómo podemos hacer eso en realidad es bastante sencillo. Para que puedas seleccionar la tarjeta de acción del coche. Y puedes volver a la parte superior justo aquí. Y para el puesto, voy a elegir pegajoso. Y hay que decírselo a donde quieres que se pegue? Entonces le voy a decir que se pegue a tal vez 20. Puedes ver que ya tenemos estas opciones predeterminadas. Así que ahora mira esta magia. Déjame encontrarme realmente para que veas un poco mejor. Entonces aquí tenemos todo funciona, todo es como debería ser. Pero ahora cuando empiece a desplazarme y llegue al 20%, se va a pegar. Y se va a pegar. Y va a seguir lo que hagamos. Va a seguir un ahora cuando llegó al final de la sección sólo va a parar. Y ahora cuando empiece a desplazarme, todo va a funcionar bien. Para que veas lo súper simple que es hacer esto. Y realmente me encanta esta característica. Y si lo cambiamos a Carol calculamos por ejemplo y cuando empiezo a desplazarme, puedes ver que el efecto ya se lleva a cabo. Ya se desplaza a través. Una última cosa que tenemos que hacer si te llevo de vuelta a XD, es que tenemos esto, nuestra selección exclusiva, y solo necesitamos pegarlo y conectaré esto más tarde. Así que volvamos a nuestra página de inicio aquí mismo. Así que las páginas de inicio usan esta sección exacta. Así que vamos a tomarlo de aquí. Colecciones exclusivas. Así que pulsa Control C y luego ve a nuestras páginas de plantilla de curso control V. Y la voy a poner aquí mismo. Pero en este caso, voy a renombrar esta clase duplicada selección exclusiva autos, plantillas. Ahí vamos, porque tenemos que hacer algunos cambios aquí. Entonces lo que voy a hacer aquí es dentro del contenedor, vamos a ir al envoltorio de lista de recolección. Y aquí es donde voy a duplicar las plantillas de clase y tipo de autos. Y aquí vamos a ir a la configuración muy rápido. Aquí. Lo que puedo mostrar es empezar a la una. Empecemos a las ocho, por ejemplo esta vez o no, comencemos en Empecemos en una. Pero para éste, ordenemos el orden. Entonces veamos qué podemos hacer aquí. Así que vamos con un orden aleatorio. Y debería funcionar bien. Por qué no escogió eso. Así que vamos con orden aleatorio, pulsa Guardar. Y ahora cuando le pego a la vista previa, se puede ver que estamos aquí, pero aún tenemos nuestro Lamborghini, que es lo que no queremos ver. En realidad. Lo que puedo hacer aquí mismo es una mezcla aleatoria. Vamos con otra cosa. Entonces tal vez podamos ir con algo un poco diferente. Se puede ir por el nombre. Algo un poco diferente. Tal vez creado del más nuevo al más antiguo. A lo mejor podamos demostrar eso. Entonces probemos eso. Así que cuando golpeé la vista previa aquí mismo, y cuando cambie a, digamos escalar. A ver si eso ayuda. Lo hace, pero cuando cambié a McLaren, por ejemplo , ahora debería actualizar y mover esto. Entonces tal vez deberíamos tal vez obtener esto a través de un poco más. Entonces tenemos que mostrar tal vez filtros o iguales no es igual, tal vez nombre no es igual. Pulse Guardar, especifique un valor válido. A lo mejor debería investigar esto, pero creo que las obras más antiguas a las más nuevas, excepto en el caso de cuando se muestra el auto. Así que puedes ver aquí mismo. Entonces funciona. En mi opinión, la mejor versión es ésta. Entonces orden aleatorio, golpea Guardar. Entonces lo que sea que puedas, va a demostrar que incluso puedo agregar un nuevo filtro aquí y crear eso y tal vez mostrar aún más abajo. Entonces no sé, puedes hacer lo que quieras básicamente aquí, pero ver todos los autos es el botón que vamos a vincular en una de las próximas lecciones. Pero por ahora, déjame dejarte en esto. Entonces, finalmente, recapitulemos rápidamente lo que hemos hecho porque ya estamos a 25 min, que es una de las lecciones más largas hasta ahora. Nosotros hemos ido adelante y creado esto, que funciona, creó esto, que se pega, creó estos elementos, todos estos elementos. Y finalmente, creamos esto. Y creo que este margen superior debería ser un poco menos en mi opinión. Entonces veamos qué hacía originalmente. Sí. Simplemente me encantaría a los 200, así que creo que está bien. Contáctanos. Entonces todo funciona como debería. Y como dije, vamos a tratar con responsive un poco más adelante en esta clase, y vamos a arreglar este espaciado. Ahora que eso está terminado, podemos pasar a las páginas siguientes, que son préstamos y contactarnos. Y cuando terminamos estas páginas, tal vez podamos entonces lidiar con los problemas receptivos que tenemos. Y tal vez entonces podamos adaptarnos un poco más a temas como este y ¿cómo podemos cambiar esto? Entonces nos muestra orden aleatorio, que no es la página en la que estamos ahora mismo. Entonces te veré en el siguiente video donde vamos a abordar la página de Préstamos. Te veré ahí. 184. Vinculación de tarjetas de coche: Antes de seguir adelante con nuestro trabajo adicional en Webflow, primero tenemos que vincular todas esas tarjetas, tarjetas con las páginas reales. Entonces, cuando nuestro usuario hace clic en una de estas tarjetas, en realidad va a llevarlas a ver la página real del auto y aprender más sobre el auto en sí. Entonces aquí estamos en Webflow y cómo podemos hacerlo. Es realmente bastante simple. A propósito no hice esto porque quería mostrarles cómo se pueden lograr estas correcciones. Entonces aquí estamos en nuestras tarjetas de autos, en nuestra página de inicio. Entonces cuando hago clic aquí mismo, puedes ver que no tengo ningún enlace. Así que tendrás que vincular todas tus páginas y todos tus activos si quieres que lideren a alguna parte, para que lleven a tus usuarios a algún lado. Entonces, ¿cómo podemos hacer eso dentro de la propia tarjeta del auto, voy a golpear Control K y tecleando link block. Ahora simplemente haz clic en el bloque de enlaces. Lo va a poner aquí mismo y no te preocupes demasiado por ello. Vamos a adjuntar los valores en sólo un segundo. Lo que voy a hacer es colocarlo aquí mismo, por ejemplo, y luego usar la información de mi tarjeta de auto, ponerla dentro de ese bloque de enlaces, y luego la imagen de la tarjeta del auto también la coloco dentro del bloque de correo. Y ahora se puede ver que el estilo está todo mal. Ahora tenemos esto subrayado en nuestros textos que no queremos. Así que selecciona tu blog de enlace. Ve justo aquí donde está, ¿dónde está la topografía? Y se puede ver que la declaración está establecida por defecto. Simplemente haga clic aquí mismo donde dice ninguno. Y va a quitar todo tu estilo de ahí. Entonces ahora tenemos un bloque de enlace número cuatro. Lo que voy a hacer es digamos renombrar esta clase y llamarla coche, hard link, block, así. Y ahora va a tener ese mismo valor para los tres porque están conectados. Lo último que hay que hacer es conectarlo realmente a algo. Entonces, cuando seleccione el bloque de enlace de su tarjeta de automóvil, haga clic aquí y vaya justo aquí donde dice página de recolección. Cuando hagas clic ahí, te va a llevar al auto actual. Así que simplemente haz clic ahí y va a abrir la tarjeta que realmente seleccionaste. Entonces ese es nuestro auto actual. Puedes configurarlo para que abra nueva pestaña si quieres, pero yo no voy a hacer eso. Y recordemos que este es el bloque de enlace de la tarjeta del coche. Entonces lo que tenemos que hacer es configurarlo para todas nuestras páginas. Pero antes que nada, vamos a probarlo y ver si funciona. Entonces todo funciona como debería. Esta es la escalada, por ejemplo, si hago clic en ella, me va a llevar a la página de escalar, que en realidad es lo que quiero. Pero aquí mismo cuando me desplazo todo el camino hacia abajo y hago clic, puedes ver que estos no funcionan. Entonces lo que vamos a hacer es salir del modo de vista previa, volver a nuestras páginas, ir a los autos, porque ahí es donde tenemos todos nuestros autos conectados. Y cuando hago clic aquí mismo, puedes ver que no tenemos ningún error de enlace porque también tenemos que conectarlo aquí mismo. Así que selecciona tu tarjeta de auto, presiona Control K type in link block, póngala dentro y luego simplemente deja caer tus artículos dentro. Selecciona tu bloque de enlaces. Y le vamos a dar una clase de tarjeta, bloque de enlace de tarjeta. Ahí vamos. Y se puede ver enseguida, va a quitar ese estilo que hicimos anteriormente. Y lo único que nos queda por hacer aquí es conectar esta colección. Elija la página de la colección. Así que simplemente haz clic aquí mismo donde dice página de colección, elige una página de colección, elige auto actual. Y ahora todos estos autos están conectados. Entonces, si le pego a la vista previa muy rápido y selecciono algo como Porsche Cayenne, haga clic justo ahí va a abrir la página de Porsche Cayenne, pero aún así tenemos ese mismo problema aquí. Entonces tenemos que hacer eso también. Entonces, mientras estamos en una plantilla de curso, no importa qué página. En este caso estamos de nuevo en el Bosch. Tenemos que hacer esa cosa una vez más. Entonces, si hago clic ahí, presione Control K, escriba bloque de enlace, póngalo ahí. Y una vez más trae la información de mi tarjeta de auto dentro e imagen de tarjeta de auto. Así que podrías imaginarte este tipo de como una superposición con el bloque de enlace del sitio Lincoln, tarjeta, bloque de enlace de tarjeta. Ahí vamos. Y va a heredar el mismo estilo. Vamos a dar click aquí mismo, luego aquí mismo, elige la página de colección, auto actual, y ahí vas. Pero ahora tenemos otro tema. Entonces tenemos estos tres. Entonces cuando golpeé la vista previa, recuerden que estamos en el Porsche Cayenne. Entonces estos tres funcionarán bien. Entonces cuando hagas clic ahí mismo, me va a llevar a Lucy ahí. Y se va a actualizar. Así que sólo dale un poco de tiempo. Pero aún así, tenemos a Lucid Air aquí. Y estamos en Lucy, su página, que no queremos porque no tiene ningún sentido. Entonces, cuando haga clic ahí mismo para salir del modo de vista previa y haga clic en el envoltorio de lista de colección para esta colección exclusiva de autos en la página de mi plantilla de curso. Lo que puedo hacer es volver a mi configuración aquí mismo. Y aquí tengo mi orden de clasificación y tengo mi filtro. Entonces voy a agregar un nuevo filtro. Y aquí voy a montar algo así como un auto. Y voy a elegir no es auto actual. Entonces no quiero que esto sea nada que es lo que estoy viendo. Entonces por ejemplo estoy viendo a Lucy ahí. No quiero que esté justo aquí porque ya lo estoy viendo. Así que solo muéstrame algún otro auto. Entonces cuando golpeé Guardar, como pueden ver, simplemente cambió esos elementos. Y ahora puedo hacer acabo de elegir aleatoria aleatoria. Entonces puedo hacer eso si quiero o puedo seguir adelante y elegir otra cosa. Ya te mostré cómo hacerlo anteriormente. Entonces ahora, como pueden ver, estamos en una página de error lúcida. Entonces todo funciona como debería. Todos tenemos ocho imágenes. Estos funcionan y se pega a la cima. Entonces, si me desplazo todo el camino hacia abajo, pueden ver que tenemos nuestra colección exclusiva y ahora no hay Lucid Air. Así que vamos a probarlo. Cuando hago clic Cadillac escalar, por ejemplo, solo estamos escalar página. Entonces, cuando me desplazo hasta abajo, ya no vemos escalar. Y así de fácil es conectar esta casa súper simple. Es para configurar. Y por eso es importante. Y como dije, a propósito lo dejé fuera así porque quería mostrarles el poder de los bloques de enlace. Puedes poner estos bloques de enlace en las imágenes. Tienes que hacerlo, puedes hacer una imagen como enlace. Pero si quieres por ejemplo en la página de préstamos, tenemos esa imagen con tres imágenes diferentes. A lo mejor quieres poner todo como un solo bloque de enlace. Así que solo puedes poner un blog de enlace como un estilo de superposición. Ya lo está explicando aquí mismo y va a llevar a tus usuarios a algún lado si hacen clic en él, o puedes ir al revés y simplemente estilizar las tres imágenes para que sean enlaces separados. Y por lo tanto vas a lograr los mismos resultados. Entonces, realmente depende de ti y todo depende diseño que quieras lograr en tu diseño. 185. Página de préstamos: Ahora sigamos adelante y creamos una página de Préstamos. Entonces, desde páginas oscuras, haz clic aquí mismo y escribe préstamos. Ahí vamos. Pulsa Crear y solo comprueba si el cuerpo ha heredado el estilo que tiene. Entonces lo que vamos a hacer golpea Control K type in navigation, control, K, N type in Form, Control K type in map, y control K type in footer. Ahora que ya lo has hecho, lo que podemos hacer es seleccionar el cuerpo golpear el tipo Control K en sección. Agregar una clase de sección. Así que mueve la sección justo debajo de nuestra barra de nav. Y dentro de esa sección, si tuviera Control K escriba en def y le diera una clase de contenedor, así. Es genial. Y lo que puedo hacer es dentro de este contenedor en realidad, puedo poner ese texto, pero solo voy a crear otro dentro de eso. Así que golpea Control K tipo en def. Y a éste voy a nombrar así a un rapero héroe solitario. Y dentro de ese envoltorio héroe, déjame darle a Control K, escribir encabezado de audición H1 y escribir H1, que ya creamos, que está centrado. Ahí vamos. Así. Permítanme copiar y pegar algo de texto dentro así. Y entonces lo que puedo hacer es crear otro, Digamos Control K tipo en div. Y este div de darle un nombre de préstamos, imágenes de héroe. Y en realidad voy a convertirlo en una grilla. Pero antes de hacerlo, permítame agregar mis imágenes Control K para fijar imagen. Y esta imagen, le voy a dar el Audi RS cinco. Vamos a darle el nombre de Audi S5. Y una vez más Control K escribe en imagen. Y esta imagen va a ser ese Range Rover, que es esta. Y llámalo un rango sobre Voc así. Y por último, lo que quiero hacer es convertir esto en una grilla que sea de buenas calificaciones. Y finalmente, lo que puedo hacer aquí es tal vez aumentar esto a 24, tal vez no. Mantengámoslo a los 16 porque va a mantener la misma consistencia para éste. Lo que voy a hacer es alinearlo al fondo justo aquí. Y éste ya está alineado al fondo. Pero solo para estar seguros, y creo que eso es bueno. Eso es genial y eso es lo que necesitamos para esta sección en particular. Y vamos a darle una clase de préstamos de héroe que, y ahora seleccionar el cuerpo golpeó el tipo de Control K sido sección. Entonces podemos agregar la nueva sección. Vamos a darle una clase de posición de sección a justo debajo de esta sección así. Y a este siguiente lo llamaremos encabezamiento. Préstamos, son préstamos así. Y dentro de eso vamos a golpear girando div, escribiendo contenedor. Digamos que los préstamos son préstamos líderes porque dice líneas líderes del mercado. Líneas principales, ahí vamos. Y dentro de eso, lo que podemos hacer es tal vez meternos en otro envoltorio o algo así. Veamos qué podemos hacer. Déjame crear otro div, así Control K escribe en def. Y en vez de llamarlo envoltorio, llamémoslo préstamos líderes del mercado así. Y dentro de eso, pero puedo hacer es darle a Control K tipo en rumbo. Escoge h tres. Y h tres debería tener h tres. A ver, oscuro. Vamos a darle centrado. Tan centrado y solo centrarlo como TO. Entonces déjame copiar y pegar el texto dentro. Y para esta sección lo que voy a hacer es darle una distancia de 200 tal vez o incluso menos. No lo sé. Veamos cómo se ve una vez vista previa. Sí, 200 es bueno porque seguirá siendo legible y seguirá siendo una escena a partir de aquí. Así que mantengámoslo así y vamos a crear otro. Así Control D div. Y este div, voy a llamar a préstamos para beneficios de corte como deuda. Y dentro de eso. Vamos a crear el primero. Entonces Control K escribe en def dentro de ese div, que voy a llamar, veamos, simple conveniencia. Voy a incluir la imagen de Control K. La imagen va a ser simple y conveniente. Vamos a encontrarlo aquí mismo. Entonces es este ícono. Y debajo de ese icono, en realidad voy a poner el h tres una vez más, así Control K para pinchar arenque. Usa los tres años, y sí, podemos usar cualquiera. Así que vamos con simple inconveniente para el texto. Y por debajo de eso, lo que voy a hacer es darle Control K una vez más escribiendo p para el párrafo. Y este párrafo va a tener este texto. Pero para el párrafo, vamos con P en gris porque le voy a dar el color gris desde aquí grados. Y por último, lo que puedo hacer es poner estos en un flexbox de vertical, asegurarme de que estén centrados así. Lo que también puedo hacer es quizás porque esto es de la izquierda, a lo mejor puedo darle a esa edad tres centrada que tenemos justo encima. O fue ¿Qué era? H3 centrado en la oscuridad. Bien, entonces H tres oscuro y luego centrado. Genial. Entonces ahora que tenemos deuda, pero puedo hacer aquí es quizás con esto, podemos darle cierta distancia de 24 hasta la cima. Presionemos deshacernos de éste. Y a la cima le podemos dar un margen superior de 24 así. Y por último, con este icono que se va a llamar, Veamos, simple conveniencia. Icm Vamos a darle el margen inferior de 24 por ejemplo genial. Ahora que eso está terminado, voy a tomar estos beneficios de préstamos y convertirlo en una grilla, darle otra columna, deshacerme de esta fila y tal vez agregar algo así como, no sé, 24 aquí, 32. Veamos cómo se ve eso. Bueno por ahora. Así que vamos a cerrarlo. Golpea Control C, Control V, Control V en este y en préstamos, beneficios, solo le voy a dar un margen superior de 64 para darle sabor un poco. Ahora bien, esta, voy a duplicar la clase y cambiarle el nombre a opciones de pago. Y permítanme copiar realmente el texto y ver si le queda bien. Hace. Ahí vamos. Cambiemos este último de inmediato a la tranquilidad. Así que duplicar la tranquilidad de la cuadrícula. Y cambiemos esto. Pagos duplicados. Icn. Y vamos a reemplazarlo por una imagen de lugar y encontrarla aquí mismo. Entonces veamos dónde está. Aquí vamos. Entonces pago icono grado. Y por último, sustituyamos a éste. Así que solo duplicarlo y llamarlo tranquilidad, CIE. Y vamos a buscarlo y a ver dónde está. Es el que tiene el escudo, que es éste. Ahí vamos. Ahora que eso se ha completado, lo que podemos hacer es que podemos jugar con estos escenarios aún más si queremos. Pero eso creo, está bien. Pero voy a hacer lo siguiente es crear esa sección si la llevo a nuestro diseño, que es para esto. Entonces lo que podemos hacer en este caso es que podemos copiar esta sección que tenemos en nuestra página de inicio y ajustarla un poco y jugar un poco más tarde con estos posicionamientos. Así que para ahorrarnos un poco de tiempo, pero puedo hacer es volver a la página principal. Utilice esta sección. Control C. Luego ve a nuestra página de préstamos. Seleccione nuestro control corporal V y colóquelo aquí. Ahí vamos. Ahora en lugar de quienes somos, voy a duplicar esta clase y llamarla socios. Así. Aquí lo que voy a hacer es duplicar esto. Porque la imagen de los socios, haga clic en la rueda dentada, reemplace la imagen y encuentre la imagen de mi pareja. Ahí vamos. Encantadora. Por último, tomemos el texto y reemplázalo aquí mismo. Así. Y por último, lo que tenemos es ¿quién entre préstamos experiencia? Ellos son ustedes, ¿su siguiente? Ahí vamos. Eso está bien. Por último, lo que necesitamos es que tenemos que poner esto en un div por su cuenta quizás. O incluso podemos simplemente poner imágenes en su interior. Entonces probemos eso primero y veamos cómo funciona eso. O lo que podemos hacer es simplemente hacer eso. Control de golpe tipo K en def. Y voy a poner esta imagen en un div así. Ahora bien, este bloque div necesita una altura del 100% de sus padres y necesita un ancho del 60%, creo, ¿era ese el ancho de la imagen? A ver. Ahora, el ancho máximo es del 100 por ciento. Entonces hagámoslo. El ancho máximo es del 100%. Pero por la razón que sea, simplemente no me permite hacerlo. Intentemos ese truco una vez más. Entonces esto va a ser, digamos, 60%. Y vamos a deshacernos de éste. Y este contenido. En lugar de que estemos contentos, voy a duplicar la clase y decir socios. Contenido, así. Y le voy a dar un ancho de, digamos, el 30% o tal vez el 40%. Sí, creo que eso va a salir bien antes de seguir adelante, déjame revisar la casa y ver si se rompe aquí. No lo hizo. Entonces vamos a leer. Entonces volvamos a los pulmones. Y ahora que hicimos esto, lo que vamos a hacer es usar este bloque div, llamarlo, renombrarlo, llamarlo nervios de parte, imágenes. Y para el posicionamiento de la misma, vamos a elegir un pariente. Y dentro de ese hit Control K escribe en imagen. Elige la imagen. Y voy a elegir uno de estos. Entonces este 1.1 más tiempo, así que pulsa Control K escriba en imagen. Para esta imagen, voy a elegir al otro compañero. Espero no haber exportado. Ahí vamos. Y ahora juguemos con ellos. Entonces esto va a ser como leasing. Entonces llamémoslo así. Esto va a ser Santander. Y para ambos, obviamente, pondremos el posicionamiento. Entonces en vez de posicionar estática, voy a cambiarla a absoluta. Y me va a mostrar que lo absoluto es para las imágenes de los socios, que es esto de aquí mismo. Entonces como leasing hacen lo mismo absoluto. Así que juguemos con el posicionamiento. Entonces veamos algo como esto. A lo mejor yo pueda poner el bronceado atrévete a estar en la cima. Derecha. ¿Fue así? Sí, lo fue. Así que arriba a la derecha, ns leasing va a estar en la parte superior, abajo a la izquierda. Entonces a veces hay va a ir a la parte superior derecha y el arrendamiento S va a ir a la parte inferior izquierda. Y vamos a jugar con algunos ajustes. Para que Santander pueda ir hasta aquí, algo así. A lo mejor. Puede ir hasta aquí tal vez. Entonces una vez más, estos bichos con el posicionamiento. Entonces vamos con el margen inferior esta vez, así. Y vamos con la izquierda quiere algo así. Entonces intentemos imitar esto. Entonces tenemos 20 en el lado y cinco. Vamos cinco aquí. Y vamos 20 aquí. Uy. Entonces ahora vamos con diez. Veamos por qué sucede esto. Entonces si hago clic aquí y luego aquí, ahí vamos, funciona bien. Cuando llegas a vista previa, vuelve a funcionar, así que todo se ve como debería. Y básicamente esa es nuestra página terminada. Puedes ver lo fácil que es cuando tienes todos estos elementos y puedes simplemente agruparlos. Realmente no entiendo por qué sucede esto con estas imágenes. Simplemente rebotando a izquierda y derecha. Si hago clic aquí y luego aquí se puede ver que está completamente bien. Pero entonces cuando me desplazo hacia arriba y hacia abajo y hago otra cosa, simplemente rebota de nuevo en su lugar. Así que siempre hay que resolver estas cosas. Y esta es básicamente la vida de un desarrollador. Entonces eso es básicamente todo para nuestra página de préstamos. La única página que nos queda realmente para diseñar es esta página de Contáctenos, que simplemente va a ser súper simple de hacer. Sólo básicamente agrega una imagen. Entonces te veré en el siguiente video donde vamos a terminar eso. 186. Página de "Contacto": Ahora sigamos adelante y creemos esa página final. Entonces aquí lo que voy a hacer es hacer clic en la página Nueva, escribir Contáctenos, presionar Crear. Y aquí vamos a revisar el cuerpo una vez más, el color del cuerpo, está bien. Entonces aquí, hagamos lo mismo para controlar el tipo K en nav. Tipo de control K en Formulario, Control K tipo en el mapa, control K escribiendo pie de página. Y una última cosa que quiero hacer aquí mismo es golpear Control K type in div. Y llamemos a este bloque div, digamos un showroom de spotter así. Y dentro de ese div, que va a ser ancho al 100%, ancho máximo está al 100% porque quiero que esta imagen tome el control de ancho completo. Kate, me han fotografiado. Y escojamos una imagen que va a ser ésta. Ahí vamos. Y sólo voy a llamarlo una imagen de araña showroom. Y esa imagen va a ocupar el 100% del espacio. Y básicamente eso es todo para esta página, puedes ver lo súper simple que es crear. A lo mejor puedas poner alguna nota publicitaria aquí, pero en realidad no creo que sea necesario. Y creo que eso es lo suficientemente bueno para nuestra página. Básicamente ahora podemos seguir adelante y comenzar a conectarnos. Estos son enlaces. Entonces voy a parar el video aquí y voy a llegar a ti en el siguiente video. Vamos a conectar todos estos enlaces y conectar todos estos botones y realmente hacer que nos lleven a alguna parte y no solo estar en la página vacía. Entonces te veré en el siguiente video. 187. Agregar enlaces: En este video, vamos a crear nuestros enlaces. Vamos a vincular nuestras páginas en la navegación y conectar nuestros botones a las páginas reales. Entonces aquí estoy en Webflow, aquí estoy en la página principal. Y esto es realmente súper sencillo de hacer, sobre todo porque estamos usando estos símbolos en Webflow. Como mencioné, se puede ver que estos símbolos se conectan a lo largo de nuestras páginas, así que por lo tanto, podemos ajustarlos y, uh, hacer con ellos lo que queramos. Entonces aquí estamos en los autos, y voy a seleccionar este enlace de navegación. Y cuando lo selecciono aquí mismo, quería decirme en la configuración a dónde quería ir. Entonces aquí lo voy a llevar a mi página. Elige una página, autos. Y se puede abrir en esta pestaña o en una nueva pestaña, y se puede elegir diferentes opciones de carga útil. Así que prefetch, pre-render default, sólo voy a elegir default. Incluso puedes ir con atributos personalizados aquí mismo, así puedes nombrar tus atributos como quieras. Pero no voy a molestarte demasiado con esto. Esto en la vinculación de páginas es realmente útil, especialmente si tienes páginas de destino largas. Solo puedes imaginar que la navegación va a ser pegajosa en ella va a estar en la parte superior de la página todo el tiempo. Y va a tener, digamos, seis elementos de navegación diferentes dentro de esa navegación. Así que este id para en enlace de páginas es realmente útil porque en esa página podrías tener, digamos testimonios, formulario de contacto, galería, portafolio. Puedes tener todos esos elementos en tu navegación. Entonces, cuando hagas clic en ellos, te va a llevar a esa sección de tu sitio web. Es realmente útil y puedes hacerlo en XD y en Figma también. Pero aquí es realmente útil porque en tus propias secciones, puedes seleccionar esa sección y decir, Esto es lo que somos. Sólo voy a nombrar si tuviéramos quienes somos aquí mismo en la navegación, nombraría una sección de escritorio, le daría una identificación de quienes somos. Y luego cuando mis usuarios hagan clic en quiénes somos aquí, todo el sitio web se desplazaría hacia abajo hasta esa sección en particular. Por lo que estos ID son realmente útiles cuando quieres usarlos. Pero aquí sólo lo vamos a dejar como está. Entonces, a continuación tenemos préstamos, así que voy a hacer lo mismo. Entonces página y aquí puedes ver, podemos divertirnos. Entonces llamar a alguien directamente por correo electrónico, para enviar correo electrónico directamente a través de proveedores externos de correo electrónico como Gmail o Hotmail sección para enlazar a diferentes secciones y archivo. Si quieres subir un archivo y luego para tus usuarios puedan descargar ese archivo. Por supuesto, ahí hay limitaciones presentadas. Voy a dejar la página. Como mencioné. Esto nos va a llevar a préstamos, esta ficha. Entonces se va a abrir en esta pestaña. Y finalmente, hagamos lo mismo para contactarnos. Así que pasemos a la página, elija la página. Vayamos con contactanos. Esta ficha. Ahí vamos. Entonces ahora que eso está arreglado, primero vamos a probarlo. Vamos a golpear la vista previa aquí mismo. Vamos a los autos. Y me va a llevar a la página de mi curso, golpear préstamos. Me va a llevar a la página de Préstamos y me está mostrando mal escaparse por alguna razón. Ahí vamos porque no fue capaz de salvar hit Contáctenos. Y me lleva a la página Contáctenos autos. Pero cuando vuelvo a casa, cuando hago clic en mi logo, no me lleva a ningún lado, así que por lo tanto tengo que vincularlo. Entonces vamos a la página, vamos a casa. Pasemos al modo Editar. Dentro de nuestra barra de navegación, puedes presionar Enter para poder editarla. Selecciona tu logo, que es esta cosa de aquí. Y lo que quiero hacer es hacer lo mismo. Entonces, en lugar de URL externa, lo que quiero hacer es vincularme a la página. Puedo elegir una página que es la página principal y la precarga va a ser predeterminada. Ahora, volvamos y vamos a probarlo rápidamente. Entonces, cuando golpeo vista previa y voy a préstamos y selecciono mi logo, haga clic en él. Me va a llevar aquí. Pero si vuelvo a mis pulmones, vamos a probarlo en el pie de página. Se puede ver que esto todavía se está comportando. Voy a tratar de arreglarlo. A lo mejor puedo agregarlo como una grilla. De esa manera no va a quedar fuera de lugar. Entonces aquí tenemos ese mismo logo y se puede ver cuando coloco el cursor sobre él, cambia. Entonces el enlace se propaga porque lo tomamos de nuestra navegación. Entonces cuando haga clic ahí, debería llevarme, pero no lo hace. Entonces veamos cuál es el problema. Entonces, cuando selecciono mi pie de página y cuando elijo mi logotipo pie de página, golpea la selección URL externa. Así que llévame a la página, llévame a casa. Ahí vamos. Y veamos esto. Entonces esto es nab, un enlace. Así que cuando presiono Ajustes aquí mismo, todavía tengo que editarlo aquí mismo. Entonces hagámoslo. Esta es pagina autos, esta es pagina prestamos, y esta final es pagina contáctanos. Entonces ahí vamos. Ahora tenemos todos estos y asegúrate de establecer los íconos de las redes sociales lo que quieras configurarlo. Sólo voy a dejarlo en blanco por ahora porque no creo que sea necesario vincularlo para esta página. Lo que quiero hacer, como dije, es que me voy a ir, como pueden ver ahora, está arreglado, pero cuando le pego vista previa es simplemente jugar conmigo. Así que sólo voy a hacer esto. Entonces quienes somos rapero en vez de flexbox, voy a elegir la grilla. Esta grilla, digamos que voy a posicionar esto para que sea un poco más estrecho, algo así. Y me voy a deshacer de la segunda fila, algo así. Ahí vamos. Y luego dentro, voy a seleccionar esto. Y probémoslo con esto o altura. Vamos a deshacernos del ancho. Ahí vamos. Pero ahora tenemos que ajustar esto también. Contenidos. Deshazte del ancho también. Ahí vamos ahora funciona. Y por último, ajustemos esta grilla. Entonces, cuando haga clic aquí para ajustar mi cuadrícula, simplemente ajustaré este texto para sea un poco más estrecho que esta imagen. Para que la puedas ajustar aún más. Y se puede ver que aquí tenemos el margen porque se puede ver dónde está terminando la imagen de este lado. Y ahí tienes. Entonces ahora va a ser mucho más sencillo para nosotros hacer esto. Cuando haces clic aquí mismo en la cuadrícula de edición y estás en el modo tablet, lo que puedes hacer es simplemente agregar otra fila y deshacerte de la columna. Y sólo va a propagarse y expandirse aquí mismo, como pueden ver. Y justo ahora tenemos que agregar algo de espaciado aquí y asegurarnos que este margen se elimine de este lado. Golpea a cero. Así. Y puedo seguir adelante y seleccionar mis imágenes de pareja y asegurarme de que mi ancho sea del 100%. Ahí vamos. Y ahora todo lo que necesito hacer es simplemente ajustar esto. Entonces veamos que esta imagen de pareja es, digamos que el ancho es del 100 por ciento. Ahí vamos. Y sólo voy a seleccionar éste y ajustado manualmente. Tan calmante aquí mismo, por ejemplo y puedes ver el espaciado en el lado izquierdo y derecho que es el relleno que incluimos anteriormente. Para que puedas ver lo útil que es esto cuando empiezas a trabajar con la tablet. Me estoy dejando llevar un poco, pero no voy a hacer esto demasiado aquí. Permítanme incluir aquí un margen de 64. Ahí vamos. Y ahora puedes ver cómo se ve esto en una tableta y va a ser lo mismo en el móvil. Sólo vamos a tener que hacer algunos cambios adicionales en nuestras imágenes. Pero como dije, no nos dejemos llevar demasiado por ahora. Este es el video sobre los enlaces. Y vas a llegar a estos diseños responsivos un poco más tarde. Aquí lo que tenemos es que tenemos la página actual es préstamos y puedes ver que es azul, que es lo que queríamos en primer lugar mostrar a nuestros usuarios dónde están en el propio sitio web. Entonces si vuelvo a los autos, vamos a golpear Preview. Vuelve a los autos y selecciona uno de estos. Vamos con Lamborghini. Se puede ver que no estamos en los autos en absoluto porque esta es esa página externa. Entonces si vuelvo y digo algo como Cadillac Escalade, lo mejor ahí vamos. No me lo demuestra, pero cuando hago clic en los autos y visito autos, ahora tenemos ese enlace azul y la misma historia para el Contáctenos. Entonces volvamos a la página principal. Y lo que quiero hacer es empezar a vincular estos botones. Este botón. Vamos a llevarla a alguna parte. Entonces, si hago clic en la página, elige una página, llévame a los autos, y puedes abrir una nueva pestaña si quieres. No me voy a molestar por el momento con nuevas pestañas. Vamos a mantener esto aquí, ver todos los autos. Vamos a dejar el enlace a la misma página. Entonces autos, porque quiero que vean todos los autos, lo que ofrecemos Beneficios Contáctenos. Y luego esto, tienes que ajustar en tu tablero. Entonces tienes que ajustar a dónde estás enviando enlaces y a dónde estás enviando mensajes. Y va a funcionar de esa manera. Entonces si te llevo ahí a Configuración del Proyecto, y puedes ver los formularios aquí mismo para la notificación de quién es. Para que puedas cambiar esto a tu nombre. Así que establece la etiqueta y así sucesivamente. Envíos de formularios de centavo a actualmente tengo mi propia dirección de correo electrónico aquí. Por supuesto, cuando envíes este proyecto a tu cliente, vas a ingresar el correo electrónico de tu cliente aquí, y por lo tanto va a enviar su línea de asunto. Puede ver por ejemplo el nombre del sitio para un nombre solo para que ellos sepan de dónde viene el formulario. Responder a domicilio. Para que puedas ingresar direcciones personalizadas, su plantilla de correo electrónico. Puedes ingresar la deuda y el envío del formulario no se puede incluir en el correo electrónico de notificación formal. Entonces, ¿cuál es? E incluso se puede incluir la recaptura. Es no en este momento puedes hacer clic aquí para habilitarlo y luego puedes ajustar estos ajustes como quieras. Y como mencioné anteriormente, puedes integrar formularios adicionales aquí mismo. Volvamos al diseñador y volvamos a Lincoln porque no tenemos demasiados elementos, así que vamos a terminar muy pronto. Como mencioné, ya hicimos esto. Entonces cuando voy a Configuración, se puede ver que vamos a maldecir, lo cual está bien. Ya expliqué sobre esto. Para el mapa, no hay que vincular nada porque cuando haga clic ahí, los va a llevar a Google. Entonces eso está bien. Y si vas a autos aquí, no tenemos que vincular nada. Es súper sencillo. En los pulmones. Lo que podemos hacer es contactarnos. Entonces misma historia, por ejemplo digamos que voy a ingresar mi nombre completo, mi correo electrónico, mi teléfono, y el mensaje, oye, me interesan tus pulmones y así sucesivamente y así sucesivamente. Para que puedas ver por qué estos foros de contacto son realmente útiles en cada página porque sea lo que sea que esté haciendo el usuario, tiene ahí el formulario de contacto. Por lo que simplemente pueden enviar el formulario de contacto sobre lo que sea que estén haciendo en este momento, lo que sea que les interese, en este caso sobre los préstamos. Entonces me interesan tus pulmones. ¿Cómo funciona? ¿Quién es tu pareja? Con quién puedo hablar y así sucesivamente y así sucesivamente. Entonces así es como está funcionando eso. Y vayamos al Contáctenos. Por último, contáctanos. Aquí no tenemos que hacer nada. Y lo último que quiero hacer para este video es plantilla de autos, porque dentro de aquí tenemos tres botones. Entonces volvamos primero a aquí, porque ya sabemos lo que queremos hacer esto. Y aquí puedes ver la página de Colección. No quiero que lleve a la página de la colección. Quería llevarlo a la página del ferrocarril. Y la página normal va a ser autos porque ver todos los autos los va a llevar ahí para ver la lista de autos. Puedes abrir una nueva pestaña. Puedes hacerlo por defecto. Y lo que voy a hacer en este caso en realidad es abrir una nueva pestaña. ¿Por qué quiero hacer esto? Porque a lo mejor quiero comparar los dos autos. Digamos que me interesa, ustedes tienen que los modelos BMW, por ejemplo, estoy mirando a un ángulo. Quiero ir a ver todos los autos para mirar otro y simplemente comparar los dos en dos pestañas. O tienes exactamente los mismos autos pero con un color diferente. Entonces tal vez quiero abrir imágenes en lightbox en ambas pestañas. Y quiero comparar cómo se ve el auto en diferentes colores. Entonces por eso eso es útil. Aquí. Lo que tenemos es reservado este auto. Lo que podemos hacer ahora es, por ejemplo podemos ir a la URL y enviarlos al formulario, o bien podemos ir a la sección Páginas y podemos elegir una sección de página. Y digamos mensaje a tal vez, veamos qué hace eso. Entonces cuando llegue a la vista previa, reserve este mensaje de auto para, me va a mandar ahí. Pero tal vez, tal vez pueda vincularlos a algún lugar por aquí. Así que vamos aquí. Vamos al formulario de correo electrónico, tal vez probemos eso. Entonces cuando escucho nuestro reservar este auto, Ahí tienes. Me va a llevar al formulario de correo electrónico, que es exactamente lo que quiero. Así que no quiero que pierdan demasiado tiempo. Yo los quiero, si les interesa, simplemente pueden hacer click ahí. O por eso usamos buena UX en este caso. Si están aquí en la parte superior de la página y quieren reservar rápidamente el auto, pueden dar click aquí, los va a llevar ahí al formulario. Pero si están por aquí, esto sigue siguiéndolos. Si se desplazan hasta aquí y dicen, ya sabes, qué, quiero reservar aquí está el formulario de contacto, para no se lo pierdan. Es buena UX, es una buena solución de pensamiento de diseño ahí. Por último, lo que queremos es C, opciones de préstamo. Lo que quiero es llevarlos a una página de Préstamos así. Y una vez más, puedes abrir eso en nueva pestaña. ¿Por qué? Porque a lo mejor quiero que lean todo sobre estos préstamos, pero en una nueva pestaña para que puedan comparar el auto que están buscando en este momento y los préstamos que tenemos en oferta, lo mejor están con Santander en este caso o con como leasing, sea cual sea el caso. Siempre es el buen proceso de pensar para darles opciones. Y en este caso, la opción sería abrir dos pestañas para que puedan comparar las dos opciones y ver qué funciona mejor para ellas. Entonces ahí vamos. Ahora, con eso terminado, vinculamos todo. Todo funciona como debería. Entonces, cuando golpee la vista previa aquí mismo, haga clic aquí mismo. Todo esto funciona bien. En el siguiente video, vamos a hablar de diseño responsive. Y te voy a mostrar cómo convertir algunos de estos diseños en responsive. Y va a ser un video bastante rápido porque ya hicimos algunos preparativos, pero si tenemos algunos fallos, mejor voy a dividirlo en dos o tres videos, solo para que sea fácil para ustedes chicos a seguir. Entonces te veré en el siguiente video donde vamos a abordar tablet. 188. Tablet responsivo: Bien, así que ahora comencemos con el diseño responsive, y comencemos con la tableta. Y vamos a ocuparnos primero de la página principal. Y luego a medida que avanzamos, quiero pasar a las páginas siguientes, pero todo va a ser exactamente igual. Sólo vas a ajustar algunos de estos elementos aquí y allá. Y ya viste en el video anterior lo súper sencillo que es hacerlo sin más preámbulos, comencemos. Entonces ya por defecto, tenemos nuestra navegación, que funciona en todas nuestras secciones, lo cual está completamente bien. Lo que quiero hacer aquí es entrar justo aquí donde dice tabletas. Abre esta sección. Y lo primero es lo primero, no quiero que tenga tanto espacio en la parte superior. Entonces déjame abrir mi sección y bajemos esto a tal vez 40 píxeles. Ahí vamos. Y abramos el envoltorio de héroe. Porque tenemos este diseño flex activado. Voy a elegir vertical en este caso. Ahí vamos. Y ahora todo lo que necesito hacer es simplemente hacer algunos ajustes. Entonces aquí tengo a mi héroe. Contenido. El ancho es del 60%. Voy a ponerlo al 100% porque de esa manera va a ocupar todo el espacio disponible que se ofrece. Y cuando se trata de estos porcentajes, es realmente súper sencillo de memorizar. Solo piénsalo, dónde se encuentra tu contenido. En, en este caso, nuestro contenido de héroe se encuentra dentro del envoltorio héroe, pero ese héroe de envoltura se encuentra dentro del contenedor, y ese contenedor tiene el emparejamiento de 20 en cada lado. Entonces cuando flote, puedes ver dónde se encuentra ese emparejamiento. Entonces sea lo que sea que esté dentro de mi contenedor no va a ser más ancho que esos, ese ancho del contenedor -20% de relleno en cada lado. Entonces es súper sencillo de calcular y de entender. Ahora, hagamos algo un poco diferente. Entonces aquí tenemos el ancho, tenemos la altura para nuestra imagen de héroe. Lo que voy a hacer es empujar eso hacia abajo. Lo que puedo hacer es tal vez establecer esto para que sea, digamos cientos. A ver si eso es demasiado. Ahí vas. Y no quiero que sea al 100%. Creo que eso va a estar bien. Lo que puedo hacer aquí mismo es quizás poner este contenido en el centro porque va a ser mucho más fácil escalar de esa manera. Entonces llamémoslo el centro. Y recuerda, cualquier cambio que realices en una tableta no afectará el tamaño del escritorio. Entonces cuando va justo aquí y da clic en el escritorio, todo se ve exactamente igual. Pero cuando me cambié la tableta, va a afectar a la tableta y a un teléfono de tamaños bajos. Pero cuando hagas el cambio de escritorio va a afectar a todo. Así que cae en cascada desde el escritorio hacia abajo, no al revés en Webflow. Entonces volvamos al centrado y pongamos nuestro texto en el centro. Lo que también puedes hacer es quizás hacer de esto un flexbox y convertirlo en un centro de esa manera. Pero en este caso, llamémoslo centrado. Ahora vamos a posicionar esto para que esté centrado. En realidad, sabes qué, podemos hacerlo, así que vamos, hagámoslo en realidad, pongamos esto para que sea un Flexbox vertical. Y sólo voy a poner todo en un centro así. Va a ser mucho más fácil para mí después ajustar estas cosas. Y en realidad, vamos a visitar el tamaño del teléfono y podrás ver cómo se escala con el texto. Y por último, para estos tamaños más pequeños habrá que ajustar el tamaño de nuestros textos, pero llegaremos a él en apenas un segundo. Primero tratemos con la tableta. Para esta sección en particular aquí mismo. Ya hizo el trabajo por nosotros de alguna manera. Entonces, seleccionemos nuestro wrapper en este caso, así tenemos la grilla, que sepa qué hacer. Déjame ajustarla porque tenemos estas dos columnas, Eso es genial. Sólo tenemos que ajustar el contenido dentro de aquí con la imagen. El ancho máximo es del 100 por ciento. Vamos con el 100% para el ancho y va a rellenar eso. Lo que puedes hacer es ajustar la altura, ajustar el ancho o algo así, pero no creo que sea necesario. Lo que puedo hacer dentro de aquí es que también puedo alinear mis contenidos para que puedas justificar tus artículos en el centro, pero no quiero que hagas eso en este caso. Quiero que se estiren para llenar el espacio completo. Aquí para este texto, lo que quiero hacer es quizá añadir un margen de 64 quizá. Y creo que eso va a estar bien. Es legible, es legible, está bien. N Cuando comencé a reducir la escala, puedes ver cómo se ajusta esto. Entonces cuando hago clic aquí mismo, cuando hago clic aquí mismo, puedes ver cómo se sigue fácilmente y cómo se ajusta fácilmente y todo funciona como debería. Me gusta. Ahí. Ahí vamos. Entonces pasemos ahora a esta sección. Y aquí también tenemos una cuadrícula para el envoltorio de listas de colección. Entonces lo que voy a hacer en este caso es a ver. En realidad tenemos el Flexbox, pero no importa. Pero aquí tenemos una grilla. Sólo déjame ver. Sí, en una lista de colección en sí. Entonces, si ajusto esa grilla, lo que voy a hacer aquí es deshacerme de algunos de estos hasta que solo tenga uno y solo agregue dos más aquí. Ahí vamos. Y me voy a quedar con el botón porque todavía lo necesito. Todavía necesito que vayan hasta allí. Y cuando empiezo a escalar aquí, se puede ver que se ajusta automáticamente y cabe en ese espacio restante. Y se puede ver que se mantiene el espaciado. Y por eso me encantan las cuadrículas porque son súper fáciles de trabajar con ellas. Si bajamos un poco lo que ofrecemos, arreglemos esta sección. Aquí en el contenedor. No tenemos nada más que aquí en nuestro envoltorio, realidad tenemos un flexbox. Entonces voltémoslo a vertical. Y lo que tendré que hacer es poner mi imagen e ir aquí mismo a los márgenes, establecer mi margen, es 64 por ejemplo y veamos qué podemos hacer con estos textos. Hay muchas, muchas opciones diferentes que puedes hacer aquí mismo. Pero lo que puedo hacer aquí, Digamos que tal vez pueda estirarlo o hacer mi ancho al 100 por ciento. Pruébalo, algo así y luego intenta centrarlo o no. No lo sé. A lo mejor lo que puedo hacer es porque estos están en el centro, tal vez pueda ponerlos todos como flexbox para que sean verticales. Y entonces tal vez pueda centrar el contenido dentro. Así que selecciona cada uno de ellos. Haga clic en el flexbox vertical centrar el contenido. Haga clic aquí, Flexbox centro vertical al contenido. Y ahí vamos. Ahora tenemos el contenido en el centro. Y una vez más, cuando comienzas a escalar, puedes ver cómo encaja y cómo se ajusta muy bien para quepa en el tamaño que está disponible para cada punto de interrupción en particular. Esta imagen se ve genial. Nuestros beneficios, ahora vamos a lidiar con eso también. Voy a ir a mis prestaciones. Va a ser un poco diferente. Entonces cuando golpeé Vertical, en realidad vamos con horizontal porque esto era para el envoltorio real de beneficios de imagen. Veamos qué podemos hacer aquí y nuestros beneficios. Vamos a darle la vuelta a esa grilla. Entonces cuando lo ajuste aquí tenemos tres columnas y no hay filas. Entonces agreguemos dos filas más, y deshagamos de estas columnas. Ahí vamos. Entonces ahora tenemos el contenido en el centro. Pero ahora lo que tenemos que hacer es ajustar el tamaño real de nuestro contenedor. Entonces cuando golpeo aquí mismo y mantén presionada tecla Mayús y mi flecha hacia arriba, se va a ajustar a, digamos 800. Creo que eso va a ser bastante bueno. Y es bastante bueno. Ahí vas. Para que se complete esa sección. Y por último, para el Contáctenos, porque una vez más, esa es la grilla. Recuerda, pero puedo hacer enseguida, lo que me va a ahorrar mucho tiempo, es hit edit enseguida porque se propaga por todas mis páginas. Recuerda, puedo ir a mi contenedor y puedo ir a mi envoltorio de formularios. Puedo seleccionar mi bloque de formulario. Dentro de eso. Tengo esa forma para recordar, y aquí tenemos esa grilla. Entonces, cuando presiono editar en mi grilla, lo que tendré que hacer es quizás, veamos. A lo mejor pueda agregar una fila más así. Regresa afuera. Y voy a seleccionar mi correo electrónico aquí mismo. Voy a atravesarlo. Eso va a empujar el teléfono hacia abajo, pasó el teléfono al otro lado. Y ahí vamos. Ahora tenemos cada uno de estos campos ocupando todo el ancho de nuestra cuadrícula y el botón permanece igual. Pero, ¿qué puedes hacer con tu botón? Recuerden que justificamos ese derecho, aquí mismo. Lo que puedo hacer es justificarlo a la izquierda. Y simplemente puedo hacer clic en él y ampliar el tamaño de la misma. O lo puedo poner en el centro, algo así y puede ocupar todo el ancho. Puedo ir con el ancho completo y llamar a este botón formulario btn, solo para que tengamos un estilo diferente. A lo mejor puedo ir con el ancho del 100% en este caso. Y puedo ir con el texto que está en el centro. Y está bien porque tenemos en un foro btn, que sólo va a tomar ese ancho. Ahí vamos. Ahora cuando cambias a cualquier tamaño que quieras, todavía va a ocupar todo el ancho de tu pantalla. Y tenemos que volver a la instancia para que podamos ver que se lleva a cabo todo el formulario. Para que veas que se corta aquí mismo porque tenemos ese 20 acolchado en cada lado, que en realidad es lo que queremos en primer lugar. Todo funciona bien aquí mismo. Lo que podemos hacer en los tamaños más pequeños, más pequeños en realidad es cortar en ese tamaño. Entonces vamos a tratar con la tableta. Y vamos a venir aquí mismo donde dice mapa, entrar dentro. Qué puedo hacer con el mapa. Veamos qué tenemos aquí mismo en el envoltorio. Tenemos el giro de flujo en el flex vertical. Y lo que podemos hacer tal vez es poner estos tres en una grilla o simplemente dejarlos así, tal vez uno por uno. Entonces donde estamos contentos, veamos, tal vez pueda llevar el ancho al 100 por ciento. Así. Pero porque el envoltorio está en, veamos, 100 por ciento y el contenido está dentro. Realmente no sé por qué está ocupando esa habitación. Cuenta con los 20 acolchados. Debería mantener ese emparejamiento 20, pero no lo hace por alguna razón. Veamos 2020 en cada lado así, donde estamos contentos por ciento y vamos a alinearlo a la izquierda. Ahí vamos. Ahora funciona. Y ahora para el texto dentro, lo que puedo hacer es quizás le pueda dar esa clase de centrado así porque quiero centrar mi título. Saltando aquí mismo, da clic en el centro y centro este también. Haga clic aquí. Y entonces como dije, puedes hacer con estos lo que quieras. Puedes ponerlos en una cuadrícula y luego asegurarte de que hay tres columnas de ancho. Y luego puedes ajustar esa cuadrícula o simplemente puedes ponerlas para que estén en el centro de cualquier manera. Entonces lo que podemos hacer aquí mismo es, veamos, tal vez podamos poner nuestro contenido en el centro. No, necesito poner un nuevo div aquí mismo. Entonces hagámoslo rápidamente. Seleccionemos nuestro control de cuadro de texto tipo K en deve, han bloque. Y llamemos a este formulario o mapa. Info del mapa. Y voy a poner en el horario de apertura dentro de ahí. Vamos, número de teléfono y dirección. Ahí vamos. Entonces convierte esa información del mapa en una cuadrícula. Voy a tener tres columnas. No voy a tener filas. Ahí vamos. Ahora como puedes ver, todo funciona como debería y cabe dentro muy bien. Y envuelve bastante bien. Y me da este relleno en la parte inferior porque no tengo uno para mi mapa, pero creo que funciona bastante bien. Entonces cuando lo cambio por aquí mismo, sigue funcionando, pero no en el tamaño más pequeño. Entonces tal vez podamos arreglar eso en el tamaño más pequeño. En algún lugar por aquí, empieza a romperse, pero vamos a ocuparnos de eso en un momento. Pero básicamente para nuestro mapa, eso es básicamente todo. Así que volviendo a la instancia, esto ya está arreglado. Y por último para nuestro pie de página, Vamos a tratar con el pie de página en sí. Creo que esto funciona bastante bien incluso a esta escala. Incluso a esta escala. Quizás, tal vez en algún lugar por aquí. Entonces tal vez aquí en el tamaño del teléfono, lo que podemos hacer es romperlo un poco. Así que selecciona el pie de página, pulsa Enter. Recuerda que esto va a propagar el cambio a lo largo de nuestro diseño. Así que cambiemos a nuestro envoltorio de pie de página porque esto es una cuadrícula. Podemos golpear Editar a la cuadrícula. Y lo que podemos hacer aquí mismo es quizás, veamos, tal vez podamos agregar fila adicional así. Y tal vez podamos deshacernos de una columna. Ahí vas. Entonces ahora solo tenemos, ahora vamos a tener, vamos a tener dos columnas solo por el bien de ello. Lo que voy a hacer a continuación es venir aquí y ajustar mis íconos sociales a aquí. Esto se va a propagar. Vamos a ajustarlo a aquí. Y aquí lo voy a poner para que esté en el centro. Usa mis íconos sociales, asegúrate de que estén en el centro. Ahí vamos. Esto está en el centro por defecto. Y lo que puedo hacer es ajustar estos cambios porque se puede ver que estamos en el margen 64, arriba y abajo. Demasiado en mi opinión. Así que tal vez podamos bajarlo a tal vez 32 o algo así. 33. Vamos con 30 a manualmente porque no me va a escuchar. 32. Encantadora. Y aquí lo que podemos hacer es quizá usar nuestro pie de página de iconos sociales y hacer ese cambio adicional. A ver. Nuestros enlaces. No tiene ningún valor. Entonces aquí podemos decir algo como 32, creo, o 24, tal vez. Ahí vamos. Por último, un pie de página de logotipo solo tiene el relleno en el lado izquierdo por cualquier motivo, vamos a reducirlo a cero. Y ese acolchado, veamos. Sí, creo que está bien. Creo que sólo lo vamos a dejar así. Entonces cuando reviso mi tablet, siguen siendo así y puedo desplazarme hacia abajo hasta el tamaño más bajo posible. Entonces cuando hago clic aquí mismo y empiezo a desplazarme, puedes ver que se mantiene ahí y puedes ver los diferentes dispositivos aquí mismo en el lateral. Entonces déjame esconderme solo para que veas eso un poquito mejor. Entonces aquí están, cuando empiezo a desplazarme, puedes ver uno más tres Kindle Fire Galaxy Note. Cuando paremos y empecemos a desplazarnos por aquí, me va a mostrar nuevos dispositivos. Entonces Kindle Fire Galaxy Tab a cuando empiezo a moverme hacia arriba, Surface Pro Tools, Surface Pro. Entonces cuando camino por aquí, puedes ver todo tipo de iPads y Microsoft Surface. Entonces esas son todas tus tallas. Y la misma historia va para el teléfono. En algún lugar por aquí se puede ver Nintendo Entertainment System. trata de iPhone SE, Phi de S y anteriores iPod touch. Entonces, realmente, dispositivos muy pequeños. Y cuando empieza a arrastrarse hacia arriba, se pueden ver todos estos diamantes en la parte inferior justo aquí. Puedes verlas apareciendo y mostrándome todos estos valores. Entonces, una vez más, la versión tablet básicamente está hecha. Entonces cuando voy justo aquí en la parte superior, navegación sigue funcionando porque arreglamos desde el primer día. Y este efecto hover no será visible de todos modos, porque vas a usar tu pestaña en primer lugar. Aquí no necesitamos un hover, pero una vez más, no va a ser visible porque no va a reaccionar ante tu dedo. Aquí. Lo que podemos hacer es porque todo es un poco, sí, vamos a mantener estos textos donde está. Pero quizá extender este párrafo para rellenar el espacio. Entonces, ¿cómo hacer eso? Da click en tu párrafo. Y vamos con un ancho del 100%. O tendremos que hacerlo, creo ajustado manualmente por cualquier motivo. Así que vamos ahí. Sí, ahí tienes. A veces va a funcionar bastante bien. Otras veces tendrás que ajustarlo manualmente, pero puedes ver lo súper simple que es esto. Y ahora cuando empiece a desplazarme, realidad va a recortar en ese párrafo y lo va a ajustar como pueden ver para que encaje en el espacio disponible que tengo. Pero primero tengo que ajustarlo manualmente porque es muy importante que tus usuarios no obtengan, no cojan el tren de hielo. Lo que significa que si las filas son dos grandes, van a estar muy cansadas muy pronto. Entonces, una última cosa que quiero hacer aquí mismo para el espaciado es que no creo que necesitemos demasiado espaciado aquí mismo. Entonces aquí está bien. Aquí, tal vez esté bien. Entonces veamos cuánto tenemos aquí mismo. Así que estamos en la sección contenedor envoltorio, tenemos 200. Entonces tal vez podamos tener 200, tal vez 150, algo así. Y aquí en esta sección quizá podamos tener también 150. Sólo para que podamos estrechar un poco nuestras secciones. Aquí en esta sección, también podemos tener 150 así. No soy realmente un gran fan de este diseño por ahora, pero tal vez lo que podamos hacer aquí es hacer lo mismo como hicimos con nuestros párrafos. Entonces simplemente extiende los textos. Algo así. Se ve si el texto está centrado, no lo es. Entonces ese es el problema. Así que volvamos y seleccionemos nuestro bloque de texto y voy a darle una clase separada lo que es esto, ofrecer, ofrecer centrado así. Y sólo voy a centrarlo. Y aquí en este, voy a ir con oferta centrada. Asegúrate de que esté centrado. Ahí vamos, y aquí oferta centrada. Y ahora cuando empiece a escalar en estos tamaños más pequeños, va a llenar ese espacio restante. Y en realidad va a espaciar el texto muy bien. Puedes ver cómo funciona aquí mismo. Una última cosa que puedo hacer es quizás hacer, Veamos, la garantía del software no tiene ningún ancho. Entonces tal vez este bloque de texto pueda tener un ancho del 100 por ciento. A ver si eso funciona. No lo hace. Lo que también puedes hacer es taparlo a algo que se llama CH, que es carácter. Entonces si vamos con 60 CAH, sólo va a extenderlo para que no funcione. que ajustar manualmente Aquí hay que ajustar manualmente, pero no importa. Creo que todavía funciona bien. Lo que podría querer hacer es ajustar el espaciado aquí se puede ver en la parte inferior tenemos 32, ofrecer garantía, tenemos 32. Entonces tal vez pueda ajustar eso para mejorar un poco mi legibilidad para poder ir con 40. Creo que selecciono mi oferta de mantenimiento, da clic aquí mismo, vaya con 40 y ofrezco préstamos. No tiene ninguno, pero todavía tiene mucho espacio aquí mismo. Beneficios. Todo se ve bien. Quizá pueda hacer lo mismo aquí mismo, pero creo que es legible. Creo que es legible. Esto se ve bien. Esto se ve bien. Quizás podamos agregar algo de relleno adicional aquí mismo, pero tratemos con ese margen. Entonces aquí en esta sección el margen es de 150, Eso es genial. Pasemos a la siguiente sección. Márgenes a 100. Entonces pasemos a 150. Y finalmente Formulario de Contacto, si hago clic en el interior, vamos al 150 y recordemos que va a ajustar eso para cada página. Ve al mapa y ajusta su 2150. Y por último, ve a mi pie de página, presiona Enter y ajusta eso a 150 también. Una última cosa que quiero hacer aquí mismo es que quiero ir aquí al mapa. Y aquí quiero hacer este ajuste y empujar esto un poco hacia abajo. Entonces tal vez pueda ir con 40. Ahí vas. Y este H2 oscuro quienes estamos centrados o donde estamos centrados, tal vez pueda ir con 40 también. Ahí vamos. Entonces ahora esto es agradable y centrado y solo tenemos un poco más de respiro abajo. Lo que puedo hacer con dos mapas es que tal vez pueda mantener la altura a 450 o algo así, no a 150, sino a 50. Ahí vas. Creo que se ve mucho mejor en una pantalla de tamaños más pequeños. Y entonces también puedes bajar por aquí tal vez por 50 realmente no funciona. Todo así de genial. Entonces cuando haga clic dentro, seleccione mi mapa, tal vez 350. Ahí vas. Creo que eso funciona mucho mejor. Cuando voy al tamaño más pequeño posible. A lo mejor aquí mismo, puedo ir con 250. Ahí vamos. Y creo que eso funciona bastante bien. Entonces ahí vamos. Nuestra tableta está básicamente terminada para nuestra página de inicio. Lo que podemos hacer a continuación es que quizás podamos ir a la página siguiente por los autos y arreglarlo de inmediato. Entonces esto básicamente funciona como debería. Todo lo que quiero hacer es quizá ajustar el posicionamiento de este círculo. Entonces solo estoy haciendo clic en la esquina, arrastrándola un poco hacia abajo. Y creo que esto está bastante bien hasta ahora. Sí. Entonces es bueno para esta colección exclusiva. Lo que podemos hacer, vamos a ajustarlo. Entonces lo primero es lo primero para esta sección. Lo que tenemos en el contenedor es que no tenemos ningún maridaje, lo cual es genial. Así que sólo lo vamos a dejar así. No tenemos ningún margen. Pero aquí para éste, quiero quedármelo a las 01:20, tal vez algo así, o tal vez 150, pero no, no más que eso. Y por último para ello están la sección de colecciones exclusivas. Pero recuerda que tenemos esa grilla dentro de la lista de recolección de autos. Entonces lo que voy a hacer es que tenemos ocho autos. Voy a golpear aquí mismo. Y en vez de estos, lo que puedo hacer es Digamos columnas, voy a deshacerme de estas y solo quedarme con dos columnas por ahora. Entonces se puede ver que ahora tenemos dos columnas y creo que hay muchos detalles al 768, lo cual es genial. Un montón de detalles. Puedes tocarlo, puedes tocarlo, puedes hacer lo que sea. Formulario de contacto. Cuando entro, todavía tiene 150. Pero aquí tengo ese margen inferior. Entonces quizás aquí lo que podamos hacer es seleccionar esta sección. Veamos de dónde viene el margen. Veamos el envoltorio de lista de colección de autos. Aquí tenemos el margen de 64, así que vamos a deshacernos de ese margen, bajemos a cero. Y ahora tenemos ese espaciado fijo bastante bien, lo que creo que funciona bastante bien. Y aquí puedes ver todos esos cambios que hicimos. Todo funciona como debería, incluyendo el nav. Entonces eso es bueno. No tenemos que hacer realmente nada aquí mismo. Pasemos ahora al discurso del préstamo y veamos cómo se ve eso. Entonces qué podemos hacer aquí mismo, porque recuerden que teníamos estos autos en una parrilla. Yo sólo los voy a quedar así. Quiero hacer edición básicamente. No los voy a tocar. Sólo voy a quedarme con ellos. Y quiero que escale como es, que se asemeje a una sola imagen. Así que dejémoslo como es. Para esta siguiente sección, lo que voy a hacer es ajustar esto para que sea 150, tal vez el veinte. Porque ahora tenemos suficiente espacio, entonces lo que voy a hacer es saltar dentro de aquí. Recuerda que tenemos esa grilla para préstamos, beneficios. Voy a dar click aquí mismo. Simplemente agrego dos filas más así. Voy a deshacerme de estas columnas. Se va a rellenar el contenido, todo se ve como debería. Y vamos a ajustar un poco el espaciado así el espaciado entre filas, Vamos con 32. Creo que eso funciona bastante bien, y va a escalar bastante bien en cada tamaño individual. Como puedes ver, va a rellenar esa información. Lo que posiblemente podamos hacer es en los tamaños más pequeños se puede ver que empuja el texto hacia la izquierda. Entonces lo que puedo hacer aquí mismo es seleccionar P gris y agregar una clase combo de centrado. Ahí vamos. Y sólo voy a centrar mi texto así. Y voy a agregar esa clase combo a todos estos. Así que simplemente selecciona Agregar centrado. Ahí vamos. Y ahora cuando empiezo a escalar, se ve que escala desde el centro y no se alinea al lado izquierdo, así que todo funciona como se esperaba y como debería. Ya hicimos esta sección anteriormente. A lo mejor lo que podamos hacer aquí mismo es tener un poco más de respiro porque tenemos estas imágenes abajo. Así que recuerda que agregamos 64. Vamos con 80 en este caso. Creo que está bien. Y veamos si tenemos algún emparejamiento adicional aquí. No creo que sí. Entonces el envoltorio no tiene ningún contenedor, no tiene ninguno. En la sección inferior no tiene ninguno, así que está bien. Contáctenos está bien. Ahí vamos. Y la última página que quiero tocar en este video es contactus. Así que vamos a lidiar con eso porque ya estamos 27 min adentro. Entonces, para contactarnos, realmente no hay mucho que hacer por aquí porque todo ya está configurado como debería. Entonces aquí tenemos imagen de showroom. Puedes ajustar el tamaño si quieres, pero aquí no me voy a molestar. Esto es a las 01:50, así que voy a dejarlo así. Entonces, si le doy a Enter, se puede ver 150. Tal vez podamos agregar la clase combo aquí y ajustar esto un poco, pero no me voy a molestar realmente. Se puede entrar en margen negativo con este y el tamaño, pero no creo que sea necesario. Creo que esto se ve bastante bien. Una última cosa que quiero tocar para la tableta es en realidad vamos a tratar con el CMS, con la plantilla de autos. Entonces aquí lo que podemos hacer es que en realidad podemos posicionar esto para que esté abajo. Así que vamos a cerrar todo esto así. Entonces tenemos información de autos y tenemos tarjeta de acción de auto. Y esto es lo que planeamos inicialmente. Entonces cuando selecciono mi contenedor, se puede ver que tenemos un flexbox. Entonces, cuando golpee vertical, va a empujar esa carta hasta el final. Entonces lo que puedo hacer es golpear centrado justo aquí, o puedo mantenerlo a la izquierda. Puedo usar la información de mi auto y usar el ancho. puede ver que es 65 por ciento. Puedo ir con el 100%. Ahí vamos, y va a llenar ese espacio restante. Mi diseño va a ser consistente, pero ahora tenemos el problema con nuestra tarjeta. Aquí. Yo también voy a escribir al 100 por ciento. Va a rellenar esa información. Voy a usar este botón. Lo que pueda hacer quizás, es quizás darle un margen de, digamos, 40 o algo por esta dimensión de tablilla. Y quiero que este diseño se vea a la izquierda. Aquí, lo que necesitamos es que la posición sea estática. Ya no es muy pegajoso, como si estuviera aquí mismo. Entonces, una vez más, se puede ver que se queda aquí mismo. Se queda lo que queremos. Y en una tableta solo va a empujar este contenido hasta el fondo. Esto escaló muy bien para que no tengamos que preocuparnos por ello. Tenemos tres autos, Eso es genial. Esta escala, esta escala, así que todo está como debería y como queremos que sea. Una última cosa que quiero hacer es seleccionar el contenido de mi tarjeta de subasta de autos. Ven aquí y agrega un margen de 64, por ejemplo y creo que no el contenido, lo siento, sino auto Action Card. Ven justo aquí al top 64. Ahí vamos. Y ahora tenemos esa separación. 64 es quizá demasiado. Así que vamos con 32.32 funciona bien. Creo que en este caso en particular, en cuanto a estas imágenes, lo que podemos hacer es que tal vez podamos seleccionar esta. Y veamos, porque esta es una lista de colección. Puedo ir a la lista de colecciones y ocultarla. Ahora cuando llego a vista previa, veamos si funciona. Lo hace. Entonces todavía está oculto, pero aún me muestra todas estas imágenes diferentes. Y todavía puedo usar mis flechas izquierda y derecha, desplazarme entre todas mis ocho imágenes, que en realidad es lo que quería. Así que nos vemos todas las imágenes cuando usas una parada ahí, va a llevarlas a esta página. Entonces creo que son cosas fantásticas para nuestro layout. Y todo funciona muy bien hasta tamaños realmente pequeños que vas a tratar en el siguiente video. Pero básicamente para la tableta y la mayoría de las veces aquí en el modo retrato móvil, todo funciona como debería. Solo entonces ajustaremos esto un poco más tarde y ajustaremos esto y ajustaremos todas estas cosas. Pero por ahora, todo funciona como debería, incluyendo esto, excepto en tamaños realmente, muy pequeños, pequeños, pequeños, que vamos a tratar en un momento. Así que puedes ver aquí mismo. Entonces, cuando estoy en un escritorio, tenemos tres tarjetas. Inmediatamente cuando cambié al doblete, ahora tenemos solo una tarjeta y funciona hasta los tamaños más pequeños posibles. Pero vamos a tratar con ellos en un momento. Entonces ahí vamos. Esa es nuestra respuesta. Todo es como se esperaba, todo funciona como se esperaba. Entonces en el siguiente video donde podemos hacer es quizás abordar este retrato móvil y tamaños de paisaje móvil. Porque hay algunos puntos de interrupción adicionales y algunos consejos que puedo darte para esos tamaños. Pero ya hicimos la mayor parte del trabajo, así que va a estar bien excepto por el retrato móvil cuando realmente necesitamos comenzar a hacer algunos cambios en nuestros tamaños de fuente. Entonces te veré ahí. 189. Paisaje móvil: Ahora trabajemos en nuestros tamaños de respuesta telefónica. Entonces cuando voy aquí mismo, tablet ya lo hicimos. Y cuando vamos al teléfono, podemos ir y empezar a ajustar algunas de estas cosas. Entonces dentro del paisaje, creo que todo esto funciona bien, pero quizás, tal vez pueda empezar a hacer cambios aquí, pero quiero, quiero hacer algunos cambios adicionales aquí. Entonces, primero comencemos con esto. Veamos qué tenemos aquí mismo. Entonces tal vez podamos empezar a hacer algunos cambios dentro de aquí. Entonces tal vez esta sección debería tener un margen menor. Así que vamos con 100. Mira cómo se ve eso. Creo que está bien. Entonces tal vez podamos simplemente mantener todas nuestras secciones al 100. Por el bien de la consistencia. Creo que eso es bueno. Beneficios. 100, ahí vamos. El tamaño es bueno y válido Formulario de contacto. Lo que puedo hacer aquí mismo es presentador saltar al 100. Recuerda que va a propagarse a lo largo de nuestro diseño. Vamos a ir a aquí, Enter escriba en 100 aquí ya tenemos eso como configuración. Andrew ya ajustó el tamaño de este mapa. Así que cuando entre de aquí, finalmente, vamos al 100. Ahí volvemos a la instancia. Y creo que todo funciona bien hasta cierto punto aquí, pero vamos a arreglar eso en el siguiente tamaño. Pero por ahora creo que todo se ve bien en una pantalla de inicio excepto por aquí mismo. Entonces tal vez, tal vez pueda empezar a hacer algunos cambios aquí mismo. Entonces aquí estamos aquí, 1s centrados. Y te puedo dar la clase combo de, digamos teléfono. Aquí. Lo que puedo hacer es empezar a hacer algunos cambios. Entonces para el H1, puedo llamar aquí mismo en vez de 64, tal vez pueda ir con 56, ver cómo se ve eso. O tal vez 48. 48 se ve bien aquí para esta imagen. Lo que puedo hacer, si recuerdas, si vamos todo el camino hasta aquí, tenemos ancho y alto fijos. Entonces tal vez podamos ajustar eso. Y vamos con ancho de algo más pequeño como para cuando t, algo así. Y podemos ajustar manualmente estos dos, algo así y esto a algo así. Y luego podemos ajustarlos más manualmente , moverlos hacia abajo, seleccionar éste, y moverlo un poco hacia arriba a algo como esto. Ahí vamos. Por último, lo que puedo hacer por esta sección en particular es en lugar de una quinta parte, vamos con 100. N va a funcionar bien. Igual que todos estos otros. Entonces aquí dentro del teléfono, del teléfono o del paisaje, se puede ver cómo se ve eso. Esto es genial, esto es genial. Vamos a estrecharlo a la más pequeña. Creo que eso es bueno. Ahí vamos. Entonces eso se ve bien. Entonces, dentro del panorama más grande de los teléfonos, incluso entonces, esto funciona bastante bien. Así que cuando golpeé la vista previa y la estreché hacia abajo, así que todo se ve bastante bien. Entonces creo que eso es bueno. Y volvamos a aquí y ajustemos algunas de estas otras páginas. Entonces vayamos a los autos y veamos qué tenemos ahí mismo. Entonces lo primero es lo primero, ajustemos este círculo. Estrecha un poco para ver cómo se ve eso. Esto está bien. Entonces, mantengamos el círculo donde está. Este H1 centrado. Se ve bien. Veamos esta colección exclusiva. En primer lugar, para esta sección, vamos a mantener como está. Pero para esta sección vamos a ir a 100 lados saltantes de nuestro envoltorio liberado sanador y nuestra lista de colecciones porque esa es nuestra cuadrícula, pulsa Editar cuadrícula. Y me voy a deshacer de mis columnas. Así que solo tiene una columna golpeada ahí. Porque se trata de autos. Debería exhibir los ocho autos. Entonces, simplemente contémoslos. 12345678. Ahí vamos. Así que eso funciona como un encanto. Contáctenos es bueno porque ya lo configuramos. Esto es bueno. Esto es bueno. Por lo que ahora esta página está terminada. Se puede ver lo sencillo que es esto. Ir a préstamos. Como mencioné, me voy a quedar con esto tal como está. Pero aquí voy a tener esa clase. Vamonos rápidamente a la página principal y veamos qué hicimos para el H one aquí mismo. Entonces tenemos la clase telefónica H1 héroe centrado teléfono. Entonces vayamos a los pulmones. Seleccione éste. Veamos H1 centrado. Déjame ver qué puedo hacer aquí. Así que déjame volver a casa. Y empieza a explorar un poco. Entonces aquí tenemos un teléfono centrado, y para el teléfono, lo ajustamos para que sea 48.86. En este caso, no creo que necesitemos un T6, así que podemos bajarlo a tal vez 56. Ahora, tal vez 64. A ver. Lo que podemos hacer. No lo sé. 70 a 72 funciona bien. Entonces 48, 72, Eso es genial. Vamos a los pulmones. Y vamos a darle a este H uno. Verás, ya son 38. Entonces veamos, tal vez podamos darte ese 48. Esto puede ser de 60, 72. Ahí vamos. Creo que eso va a funcionar bastante bien para estos tamaños más pequeños hasta que lleguemos a este tamaño. Entonces entonces vamos a cambiarlo. Entonces aquí funciona bien. Aquí para estas imágenes, tal vez podamos agregar un poco de respiro, así que tal vez 40 pixeles, algo así. Creo que eso va a funcionar bastante bien para este. Bajémoslo a 100. Ya lo arreglamos. Por lo que funciona simplemente bien para esta sección. En vez de 200, vamos con 100, que va a crecer bien. Y aquí lo que podemos hacer es quizá empezar a centrar estos. Entonces tal vez a este tamaño, tal vez podamos centrarlo, centrado éste y centrar nuestro párrafo también. A ver si ese cambio. Sí, se puede ver que no afectó este cambio, que es de lo que estaba hablando. puede ver en la tableta, Se puede ver en la tableta, sólo afectó este punto de ruptura porque fue entonces cuando empezamos a jugar con él. Entonces todo esto funciona. Bueno, se ve genial. Si ahora vamos a la página Contáctenos. realidad no tenemos que cambiar nada aquí. Todo está hecho por nosotros. Y por último, vayamos a la plantilla del curso y veamos qué podemos hacer aquí mismo. Entonces aquí, dejémoslo en esta etapa. Creo que esto funciona. Bien. No es fantástico, pero funciona. Bien. Se puede ver que son 480 píxeles, así que vamos a cambiarlo aquí porque sí se descompone mucho. Entonces aquí lo que vamos a hacer es a lo mejor podamos dejar todo esto. Sí, en realidad voy a dejarlo todo como es porque está dentro de una grilla. Y lo que puedo hacer aquí en este caso es quizá, a lo mejor pueda ajustar esto o algo así. Entonces veamos, porque esto está dentro de un contenedor que se llama contenido de tarjeta de subasta de autos. Entonces tal vez podamos empezar a jugar un poco con estos o ahora solo vamos a mantenerlos en el tamaño más pequeño. Dejémoslo como si estuviera aquí mismo. O tal vez, a lo mejor pueda posicionar esto en el centro. Veamos cómo se ve. Entonces esto está en un centro y esto vamos a convertirlo en un flexbox, asegurarnos de que todo esté centrado. Y ahora puedes ver el problema que tenemos aquí mismo. Entonces, si coloco esto en el centro y esto en el centro, no va a funcionar correctamente. Entonces lo que puedo hacer por este botón es quizá le pueda dar un ancho del 80%. Vamos a ver, y centrar el texto en su interior. Entonces usa este botón, dale un ancho del 80 por ciento, y centra el texto dentro de él. Y mira lo que puedo hacer aquí. Entonces no. A ver si esto soluciona. No lo hace. Sí, ¿puedes ver cuál es el problema? Tengo un margen justo aquí, así que vamos a deshacernos de ese margen. Y ahora estos están centrados aquí para la etiqueta actual, lo que puedo hacer es que tengo un margen aquí, para poder deshacerme de él. Y este auto Action Card. En realidad, veamos, veamos qué podemos hacer aquí. A lo mejor puedo saber. A lo mejor puedo poner esto, asegurarme de que mi contenido esté en el centro. Veamos si configuramos auto en este lado y configuramos en auto en este lado, va a empujar ese contenido en el centro. Pero ahora lo que quiero hacer es quizás ajustar este contenido, pero me temo que va a romper el ancho del mismo. Así que vamos a guardarlo donde está. Y aquí lo que voy a hacer es quizá añadir un poco más. Sala de Respiración. Pueden ser 40 o 20. Quizás 20 aquí también. A ver. 20. No, porque esto tiene 24. Vayamos aquí con 24 también. Y aquí para un top de margen, realmente no lo necesitamos, así que creo que eso va a funcionar bien. Ahí vamos. Y ahora por fin, tratemos con esta última sección, que es esta, y vamos a ajustarla para que sea 100. Y ahí tienes. Hemos terminado de diseñar y cambiar para el paisaje móvil. En el siguiente video, vamos a abordar retratos móviles. Entonces te veré ahí. 190. Retrato móvil: Bien, así que finalmente, tratemos con el retrato móvil. Entonces estoy en la página principal. Voy a dar click ahí mismo. Y lo primero es lo primero, ajustemos esto. Entonces aquí lo que voy a hacer es reducir mucho el tamaño. A lo mejor 32. Veamos cómo se ve eso. Y esto puede ser 48. A lo mejor. Eso está bien. Esto está bien, esto está bien, pero la imagen no está bien. Imagen de héroe. Lo que podemos hacer en este caso es por un ancho, puedo sostener mi tecla Mayús y la flecha inferior, como pueden ver, va a reducirla a tal vez 270. Creo que eso va a funcionar bien. Esto podemos reducir esto, podemos reducirlo como mucho. Y lo que podemos hacer es darle eso a auto y asegurarnos de posicionarlo aquí mismo, pero ajustarlo justo por aquí. Ahí vamos. Ahí vamos y tal vez ajustemos esto un poco a algún lugar por aquí. Creo que eso va a funcionar bien. Cuando escala incluso a los tamaños más pequeños posibles, todavía vas a poder verlo al menos un poquito. Entonces tal vez algo como esto salga un poco mejor. Entonces cuando llego al tamaño más pequeño, puedes ver cómo se ve eso. Entonces, finalmente, imagen de héroe. Y lo que podemos hacer es, veamos, la altura no es algo. Vamos a establecer la altura en auto. Algo así. Y yo sólo voy a arreglar esto ahora y traerlo todo el camino hacia abajo. A medida que el ancho escala, la altura va a escalar automáticamente. Eso es lo que quiero para las tallas. Ahí vas. Entonces este es el tamaño más pequeño posible. Esta es nuestra talla más grande. Entonces tal vez incluso podamos bajar con un ancho a algo como esto. Ahí vamos. Entonces vamos a ir al tamaño más grande. Veamos qué podemos hacer. Quizá esa no sea la solución correcta. Entonces para mi imagen, voy a escalar aquí mismo. A ver. Sólo tiene un ancho. Entonces, si voy al 100 por ciento así, eso ojalá arregle el problema. O incluso 80%. A lo mejor podemos ir con imagen de héroe. A lo mejor podemos incluir el relleno de, digamos diez píxeles. Entonces eso va a impedir que salga afuera. Ahí vamos. Y creo que eso solucionó bastante bien el problema. Aquí lo que podemos hacer es simplemente dejarlo como está. Tenemos un margen de 100, que creo que es bastante grande. Pero no importa. Podemos dejarlo como ahí. En términos de este botón, lo que podemos hacer es que tal vez podamos establecer algunas alturas en algunas anchuras o algo así. Así que vamos con una altura mínima de tal vez 50 píxeles, algo así. Por lo que siempre va a mantener esos 50 píxeles de altura mínima. Y dentro voy a centrar mi texto. Entonces no importa lo que esté pasando, siempre va a escalar así , algo así. Entonces no es demasiado pequeño y no dos, nueces demasiado abarrotadas. Esto funciona bien a excepción del texto. Centrémoslo así. Y cuando empieces a escalar, todo va a salir bien. Quizás estos espaciamientos, no necesitamos que sean así de grandes. Entonces aquí tenemos 64, tal vez podamos bajar a 40. Y en términos de toda la sección, tenemos 100s. Así que vamos a mantenerlo así. Creo que eso funciona bien. Esto funciona bien en todos los tamaños, así que en realidad no tenemos que hacer nada mucho. Aquí. Ahí vas. Este botón, altura mínima 50. Entonces va a heredar ese estilo que ya nos fijamos. Eso está bien. Todo esto funciona bien, las imágenes funcionan bien. Esto funciona bien. Recuerda, este es un dispositivo tan pequeño, 240 píxeles. Entonces esto es realmente, realmente, veamos qué es esto. Entonces Nintendo Entertainment System, N E S. Así que vamos a ver. A lo mejor ir a algo así como una S. Sí, así que eso es esto. Eso es esto. Este es el tamaño para el que estamos diseñando aquí mismo. Así que solo recuerda, no pongas demasiada atención a estos tamaños extremadamente pequeños y nadie los está usando realmente. Pero por cualquier razón, mala o peor, todavía podemos ajustarla y hacer cambios si es necesario. Lo que quiero hacer aquí mismo, porque esto funciona como debería. Quiero ajustar esto. Así que entra aquí dentro de mi mapa, recuerda que incluimos esa cuadrícula. Entonces voy a ir a donde somos rapero, donde estamos contentos, encantadores. Y aquí tenemos nuestro mapa en cuatro. Voy a golpear ahí mismo. Y lo voy a ajustar en tres filas, así, y añadir sólo una columna. Ahí vamos. Ahora esa deuda fija y para el mapa en, por lo que puedo hacer es agregar un margen inferior de 40 tal vez, solo para poder empujar este texto un poco hacia abajo. Entonces, cuando escala todo el camino hacia abajo, todo funciona como debería. Por último, para el pie de página, vamos a ajustar y hacer algunos cambios ahí también. Lo que puedo hacer es presionar Enter aquí mismo. Así que incluso en los tamaños más pequeños, más pequeños, esto funciona. Pero permítanme simplemente tomar estos enlaces. Y lo que puedo hacer porque son un niño grid. Quizá pueda convertirlos en un flexbox aquí. Encienda la vertical, asegúrese de que estén centrados. Y ahora esto funciona sin importar en qué tamaño estés. Todo escala muy bien así. No importa el tamaño en el que estés. Ahora que eso funciona, lo que podemos hacer es ir a otra página, que son los autos en este caso. Esto funciona como debería, todo el camino hasta el tamaño más pequeño posible excepto este. Entonces lo que podemos hacer aquí en este caso es bajar eso 32. Y esto 248. Ahí vamos. O tal vez incluso más, pero no creo que sea necesario. Vamos a guardarlo donde está. Entonces este 32, 32, así que simplemente hereda eso. Lo que podemos hacer en este caso es que bajemos un poco el círculo, pero no creo que sea necesario. Incluso pienso que se suma un poco a un encanto. Entonces todo funciona incluso en los tamaños más pequeños, lo cual es genial. forma funciona muy bien. Esto funciona muy bien. Excepto por aquí. Veamos a dónde bajamos todo el camino. Lo que podemos hacer es que pueda estar centrado en esta información. ¿ Qué opinan ustedes? Entonces, si me golpeo aquí mismo, siendo la dirección y centro el contenido dentro, usa la columna del número de teléfono aquí mismo. Centrar el contenido dentro, ven aquí mismo, centra el contenido. Ahora cuando empiezo a escalar, se ve bien, excepción de esta. Ahora, dejémoslo a la izquierda. Vamos a mantenerlo alineado a la izquierda. No quiero que trabaje demasiado duro en este caso, porque este es un contenido más largo, este contenido más corto y el centrado del mismo podría parecer un poco raro en este caso. Así que vamos a mantenerlo así porque se envuelve muy bien. Volvamos a la instancia. Vamos a nuestra página de préstamos. Mira dónde estamos aquí mismo. No creo que los cambios necesarios aquí tal vez aquí lo que podamos hacer es cambiar esto a 30 a lo ya es a los 32. Entonces eso es bueno. Todo funciona como ya se debería configurar deuda. Esto funciona bastante bien. Esto funciona bien, Contáctenos. Todo funciona bien, excepción de estos dos. Entonces lo que podemos hacer es que podemos establecer algunos, se puede ver que el ancho máximo es del 100 por ciento. Entonces lo que puedo hacer es, digamos un ancho mínimo de tal vez 50 píxeles. Usa este, ancho mínimo de 50 píxeles, para que no baje por debajo de los 50 píxeles de ancho. Y se puede ver cómo se ve eso. Entonces tal vez 50 es demasiado. A lo mejor podemos ir con 20 píxeles y 20 píxeles. Algo así. A ver. Sí, así que empieza a desmoronarse por aquí. Para que puedas ver iPhone mini, 13 mini. Entonces por debajo de eso en algún lugar por aquí, así que 310 píxeles. Entonces lo que podemos hacer es ajustar tal vez el ancho mínimo de diez píxeles así. Y me voy a deshacer de esto. Así que vamos a aquí. Anchos máximos. Digamos, no sé al 100% aquí o tal vez 100 pixeles. Sí, vamos con 250. Eso es un ancho máximo. Y esto es ancho máximo de 250 píxeles. Encantadora. Entonces ahora cuando empiece a escalar, va a reducir la escala. Vamos con un ancho de 250. Esto puede ser hasta 50 muertes. Y ahora cuando empiezo a escalar, todo se ve igual. Entonces probemos 150. Mira lo que hace eso en estos tamaños más pequeños posibles así. Sí, creo que 150 funciona mejor porque aún muestra la imagen y mantiene el posicionamiento de ellos donde queríamos que estuvieran. Y en lugar de un ancho mínimo de diez píxeles, puedo ir con un ancho mínimo de tal vez 80 píxeles o algo así. Entonces solo para que no sea demasiado pequeño. 80 pixeles, y ahí vamos. Entonces ahora eso está terminado. Esto está bien. Todo esto está bien. Tenemos esa página de contacto Vamos a repasar rápidamente la deuda. Entonces veamos, aquí no tenemos que hacer ningún cambio. Todo está bien. Y por último, vayamos a la plantilla del curso y veamos qué podemos cambiar aquí mismo. Entonces lo primero es lo primero, tenemos que ajustar esto porque sigue rompiendo. Entonces lo que puedo hacer en este caso, recuerda que tenemos ese relleno inferior en cada uno de estos fondos es que puedo ajustar el espaciado para mis filas para poder ir con 24 o algo así. Entonces lo que voy a hacer es que lo voy a romper en dos. Entonces tendremos 2468 en dos. Así que vamos a tener cuatro filas distintas así. Y vamos a tener dos columnas distintas así. Ahí vamos. Y por la razón que sea, no lo respetaba así. Así que mantengamos ese me gusta o vista. Tenemos el emparejamiento. Veamos la descripción general del auto. A lo mejor podamos empujar en ese emparejamiento y ver qué pasa. No mucho realmente. Entonces tal vez intente con un margen no mucho. Entonces lo que podemos hacer tal vez es extender esto hacia abajo. Entonces tal vez necesitemos alguna altura porque estamos tapados con una altura máxima de 196. Lo que podemos hacer es ir con algo como 500 o algo así, y luego tratar de aumentar esto. Ahí vamos. Así que vamos con 32 aquí también. Ahora cuando empiezo a escalar, funciona hasta los tamaños más pequeños, más pequeños hasta algún lugar por aquí tal vez. Entonces, qué es esto, una vez más, esa cosa de Nintendo. Así que en algún lugar por aquí todavía funciona. Así que sólo voy a mantener este diseño. No me voy a preocupar demasiado por ello. Lo que realmente podemos hacer es dentro de aquí, lo que nos va a dar un poco más de espacio para respirar, es que voy a reducir esta brecha a 24. Entonces lo que eso me va a permitir es que va a estar mucho más cerca incluso en estas tallas más pequeñas, algo así. Entonces nos llaman descripción funciona bien. La especificación de los vehículos no. Entonces cambiemos eso. Entonces vayamos a la descripción de la especificación. Eso es bueno. Este catión específico. Ahora veamos dónde estamos. Entonces aquí vamos a ajustar porque tenemos seis de ellos. Veamos qué podemos hacer aquí mismo. A lo mejor podemos ajustar el ancho de estos, algo así como 0.75 PARA 0.754. Y voy a reducir esto a 24. Ahí vas. Entonces ahora las fracciones de estas columnas son en realidad mucho más estrechas. Para que veas que el contenido se va a pegar mucho mejor. O si no quieres ver eso, lo que puedes hacer es venir aquí y simplemente deshacerte de una columna y va a empujarlas hacia abajo. Entonces necesito seis de ellos en total. Entonces 123, ahí vamos. Y este FR, va a ser, digamos uno FOR así. Y ahora tenemos el diseño de ancho de contenido completo y solo vamos a mantenerlo así. Entonces solo deshazte de la segunda columna y solo quédate con una columna para la seguridad misma historia. Entonces veamos qué podemos hacer. Podemos pasar por la columna cálida y veamos cuántos necesitamos. Entonces necesitamos 123451 FR. Entonces 12345, encantador, hit, Listo. Y porque es texto sólo va a escalar muy bien. Vamos a hacer lo mismo aquí mismo. Así que solo sé muy rápido ingenioso. Deshazte de éste. A cuántos necesitamos. Vivos. Pasar al siguiente, que es el exterior. Deshazte de éste. Agrega los nuevos aquí también. Bien. Pasar al interior. Misma historia. Así que solo asegúrate de estar en una FR, para el ancho. Porque así todo va a encajar bastante bien y hacer lo mismo aquí mismo. Veamos las filas 123. Eso es genial. Ahora todo va a escalar de una manera mucho más agradable y se verá mucho más coherente, natural aquí dentro. Por último, para descartar lo que tenemos es en los tamaños realmente extremos más pequeños posibles tenemos esto. Entonces veamos para el texto dentro de aquí, está centrado, aquí, está centrado. Entonces lo que puedo hacer es porque está heredando ese 50 pixel, incluso puedo agregar la clase combo, lo cual no voy a hacer porque estoy muy contento con este layout, cómo se ve. Creo que esto está bien porque ¿quién realmente usa algo por debajo de estos tamaños? Algo así como este iPhone SE Phi de S en antes. No creo que alguien use algo que es pequeño. Entonces aquí tenemos nuestra colección funciona bien, todo funciona bien. Y eso es básicamente todo. Ese es nuestro diseño responsive completado. Y en la siguiente lección vamos a empezar y abordar algunas animaciones. Entonces te voy a mostrar cómo configurar a tantos pacientes cómo jugar con animaciones. Voy a explicar cómo funcionan las animaciones dentro de Webflow y en qué debes pensar cuando estés creando estas animaciones en Webflow. 191. Animaciones en Webflow: En este video, vamos a abordar la animación, pero solo quiero mostrarte el pequeño error que cometí anteriormente. Entonces si lo llevo de vuelta a Webflow aquí mismo, lo que hice anteriormente es que intenté bajar el tamaño de estas imágenes aquí. Pero lo que puedo hacer es agregar clases separadas y luego ajustar el ancho y la altura aquí. Eso va a mantener esos tamaños consistentes. Así que no importa lo que esté haciendo aquí mismo a lo largo de mi diseño, va a mantenerlos consistentes. Entonces, déjame mostrarte eso aquí mismo. Entonces hagamos algo como Hiro, hiro, key, image phone aquí mismo. Entonces cuando ajuste el ancho y altura a tal vez metrónomo 80 pixeles, veamos qué hace eso. Y altura de 80 pixeles. Porque estoy en ese teléfono, no debería propagarse hasta aquí. Para que puedas ver lo que hace. Y la misma historia aquí. Entonces, si voy a deshacerme de este, quita clase, y vamos con el teléfono de garantía Hero. Ahora vamos con ancho de 80 píxeles, alto de 80 píxeles. Y se va a propagar muy bien y va a mantener la misma consistencia que nos propusimos que fuera. Aquí. A lo mejor puedo mover esto un poco, tal vez más o menos por aquí para que veas cómo esto se vuelve tedioso de vez en cuando cuando juegas con estos elementos. Entonces creo que eso funciona bien. Ahora por fin, el objetivo de este video es la animación en Webflow. Y la animación puede ser muy compleja a veces, pero no tiene por qué serlo. Puedes hacerlo tan simple como quieras que sea. Entonces lo que queremos aquí mismo es que si cambio a la animación, se puede ver que tenemos elemento trigger y tenemos el trigger basado en page trigger es que se puede ver aquí mismo lo que hace. Simplemente activa toda la página una vez que se carga. Y el disparador de elementos va a desencadenar ese elemento en sí mismo. Así que cambiemos a aquí. Y déjame fijar esto aquí mismo. Por lo que se mantiene consistente. Entonces aquí tenemos este contenido de héroe. Entonces lo que voy a hacer es que los elementos disparen, voy a hacer click en este Plus. Y ya tienes algunas animaciones preparadas y luego tienes algunas animaciones que tienes que preparar tú mismo. Así que aquí se puede ver cuando los golpeo y gatillo, se puede ver clic del ratón o toque. ¿Qué pasa entonces? Mouse hover, que es lo que ya tenemos básicamente cuando pasamos el cursor por encima con nuestro botón, se puede ver lo que tenemos. Entonces tienes que mover el mouse sobre el elemento. Entonces, cuando muevo el ratón, ¿qué pasa? Puedes establecer y tienes millones de ejemplos diferentes en línea. A propósito quería que el discurso fuera lo más directo posible, pero una vez más, complejo como fuera posible. Pero el ajustable para todo el mundo y no voy a abordar demasiado, pero puedes ir a award.com con tres w Así que un www.com. Y se puede ver todo tipo de animaciones diferentes así. Cuando pasas el cursor, tienes estos gradientes que se mueven en el fondo. Puedes seguir mi canal de YouTube Alex sobre diseño, donde en un futuro voy a abordar estos tutoriales son muchos, abordar estos tutoriales son muchos, porque muchos diseñadores los están pidiendo, así que no vamos a hablar demasiado de ahora. Desplazarse a la vista. Entonces, ¿qué sucede cuando este elemento se desplaza a la vista? Eso es lo que vamos a hacer. Y mientras se desplaza hacia la vista, ¿qué pasa entonces? Tenemos navbar abre. ¿Qué pasa entonces? Cambio de paso abierto caído, diapositiva de cambio. Entonces todas estas cosas. Entonces vamos con, digamos Page trigger. Veamos qué tenemos ahí. Así que el ratón se mueve en la ventana gráfica mientras la página se desplaza, página se carga y la página se desplaza. Voy a golpear aquí mismo para el elemento disparador y escribir en scroll a la vista. Y lo que puedo hacer aquí mismo es que puedo seleccionar la acción. Y puedes ver que solo estoy seleccionando este contenido de héroe. Entonces mi acción será slide. Voy a deslizarme por la izquierda. Mi offset va a ser algo así como ocho tal vez, y el retraso puede ser de tres milisegundos o algo así. Cuando llego a la vista previa, puedes ver cómo se ve eso. Entonces 8.3 y voy a seleccionar mi imagen de héroe, y voy a hacer exactamente lo mismo. Así que desplácese a la vista. Se desliza en cambio desde la izquierda, voy a elegir de la derecha. Y voy a decir algo como ocho y tal vez cinco. Entonces va a ser sólo un poquito más lento. Para que puedas ver cómo se ve eso. Voy a golpear Preview. Se puede ver cómo se ve eso. Entonces, cuando volvamos, tratemos ahora de toda esta sección. Y lo que podemos hacer es desplazarnos a la vista, seleccionar una acción. Voy a elegir una diapositiva. Desde abajo. Ahí vas. Offset. Vamos con ocho y retraso. Vamos con diez milisegundos esta vez. Entonces cuando golpeé la vista previa, se puede ver que se llama entrevista porque estaba apenas un poquito por encima del redil. Así que ahora vamos a tratar con esta sección cuando se arrastra a la vista. Yo voy a hacer lo mismo. Pero tal vez podamos alimentarnos por ejemplo así aparecen y desaparecen. Entonces tal vez podamos desvanecer offset de ocho, retraso de tal vez diez. Y veamos qué hace eso. Así que solo tenemos fade in o fade out. Y también puedes cambiar cuando te desplazas fuera de ti. También podemos iniciar fade, Fade Out offset de ocho, retraso de diez. Entonces veamos qué hace todo eso. Vamos a desplazarnos hasta la cima. Entonces aquí tenemos esto, entonces tenemos esto. Entonces tal vez estés desplazándote hacia la vista y desplazándote fuera de la vista. Ni siquiera se puede ver porque ya se ha desvanecido. Entonces eso es básicamente lo que quiero. Pero tal vez podamos establecer este desplazamiento para que sea cero milisegundos. Y a lo mejor esto puede ser, no sé, 3% o algo así. Así que cuando voy por aquí, desvanece y se desvanece más o menos por aquí. Por lo que incluso se puede reducir ese desplazamiento por completo. Vuelve a cero y mira qué hace eso por aquí. Entonces creo que está bien. Y por último, lo que quería mostrarles es esto. Entonces podemos hacer estos ajustes de disparadores. Esto es básicamente para que puedas abordar ya sea elementos o la clase. Para que pueda abordar la clase. Para que puedas ver colección exclusiva, esa es mi sección, sección colección exclusiva. Voy a hacer frente a toda la clase. Y no voy a cargar esta animación en tablet, paisaje y retrato. ¿Por qué? Porque quiero que la gente guarde su conexión a Internet, tal vez en las tabletas. Vamos a mantenerlo en una tableta, pero no en el teléfono, horizontal y retrato, lo que sólo va a hacer que nuestro sitio web sea un poco más rápido cuando se cargue. Puedes hacer lo mismo con este. Para que pueda deshacerme de él de aquí y de aquí. Y para este principal, hecho lo guardaré dentro solo por el bien de aquí lo que podemos hacer es tal vez podamos hacer algo un poco diferente. Entonces tenemos nuestra oferta de envoltorio, luego tenemos contenido y tenemos esta imagen para en lo primero lo primero, porque estamos en un escritorio, lo que podemos hacer es darle un nombre a esta imagen, para que podamos renombrar esta clase y podemos llamarla nuestra oferta, IMG, solo para que sepamos lo que es. Podemos ir a la animación y al elemento trigger. Y podemos hacerlo mientras nos desplazamos en la acción de vista. Y entonces podremos deshacernos de estos. Para que pueda seleccionar una animación de desplazamiento de juego de acción mientras se desplaza en la vista, los límites de animación son esto cuando el elemento es completamente invisible y cuando un elemento es completamente visible. Para que incluso puedas ajustar la deuda. Para que puedas agregar offset, puedes comenzar a salir. Entonces empieza a salir. Y puedes agregar un poco de malestar, tal vez algo así como el 20 por ciento, algo así. Ahí vamos. Lo que podemos hacer es que no tenemos ninguna animación, así que tenemos que iniciar una animación. Entonces esta va a ser nuestra oferta de animación o nuestra oferta de animación de imagen. Ahí vamos. Entonces al cero por ciento, vamos a decir, digamos opacidad, que va a ser algo así como cero por ciento. Ahí vamos. Y aquí, déjame deshacerme de mí solo para que veas lo que estoy haciendo. Así que solo reduzco la opacidad aquí al 0% y flexibilizando, voy a configurar dos adentro, out quad. Ahí vas. Eso es al 0%. Entonces cuando llego a la vista previa en vivo y cuando vaya a algo así como el seis por ciento, voy a darle estilo a la opacidad una vez más. Y va a ser al 100%, y esto va a estar dentro, fuera quad. Para que puedas ver cómo se ve eso. Entonces cuando empiece a desplazarme, va a estar aquí. Y cuando me salga del camino, va a desaparecer por completo. Entonces tal vez el seis por ciento es un poco menos. Entonces, bajemos a tal vez al 20 por ciento. Entonces, cuando empieza a desplazarse, se puede ver que aparece fácilmente tal vez aproximadamente alrededor del 40 por ciento o algo así. Ahí vas. O tal vez incluso ir a los 80. Veamos qué hace eso. No mucho, así que aquí está a los 100. Entonces tal vez podamos establecer uno más y darle opacidad aquí a tal vez 40%, algo así. Entonces cuando empecemos a desplazarnos aquí, y luego aquí, pulsamos Guardar. Vamos a darle un adelanto y veamos qué hace eso. Ahí vamos. Entonces puedes ver que es realmente diapositiva. Se puede ver aquí mismo en la parte inferior. Realmente ligero se desvanecen, así. Y también puedes hacer los cambios al fade out. Lo que quiero para esta sección en particular u ofrecer contenido es que solo quiero que se mueva a su lugar. Así que desplácese a la vista. Acción, tal vez desvanecerse a la vista, desvanecerse. Offset, tal vez pueda configurarlo a tal vez cinco y retrasar tal vez diez milisegundos, algo así. Entonces cuando golpeo aquí mismo, se puede ver que aparece así que es solo un ligero retraso así, así que se desvanece a la vista. Y cuando te desplazas fuera de la vista, lo que puedes hacer es el destino, una vez más simplemente se desvaneció. Y no quiero que haga ningún offset, así que vamos a probarlo, a ver cómo se ve eso como un fade in. Y cuando sale a la manera se va a desvanecer. Éste. Lo que podemos hacer es tal vez, sé, tal vez podamos seguir desgustando que sea, pero tal vez solo pueda usar este beneficio elementos desencadenan scroll into view. Puedo deslizarme desde abajo. Ahí vamos. Y tal vez pueda mover un poco de offset y un poco de retraso, algo así. Veamos si un retraso enorme hace alguna diferencia. Sí, lo hace. Como se puede ver. Se puede ver cómo se ve eso. Así que cuando hago clic una vez más, ahí vamos. Tan enorme retraso llegando a su lugar. Entonces algo así como 460. Creo que funciona bien. En cuanto al formulario de contacto, lo que podemos hacer es que podemos hacer los mismos elementos desencadenantes que se va a propagar a lo largo de nuestro diseño. Así que pulsa enter para que podamos editarlo. Elementos desencadenantes, vamos a ir scroll a la vista. Y puedo ir a deslizar y retrasar. A lo mejor vamos con 350 milisegundos. Ahí vamos. En cambio desde la izquierda, voy a ir desde abajo. Offset, tal vez cinco, solo para que podamos tener al menos algo. Y vamos a darle a Preview y a dormir lo que hacemos. Entonces beneficios. Y se puede ver el formulario. Y vamos a hacer lo mismo por esto y nuestro pie de página. Entonces veamos Mapa, Kit ingrese el mismo pergamino a la vista. Y puedo ir con algo así como diapositivas desde abajo, 400. Y esto puede ser a las cinco. Ahí vamos. Y no lo voy a mostrar en móvil y retrato. Ahí vamos, volvemos a la instancia y yo voy a hacer lo mismo por aquí. Así que haz clic en tu animación y simplemente retírela de aquí una vez más, solo por el bien de la velocidad, haz lo mismo con el pie de página. Para la carpeta, desplázate a la vista. Sin estos, lo que puedo hacer es quizá veamos, podemos volar, podemos caer, podemos hacer todas estas cosas. Tal vez se desvanecen. Vamos con 400. Y esto puede ser cinco. Se desvanecen. Ahí vamos. Ahora volvamos a la instancia. Vamos, volvamos a la cima. Hit vista previa. Estos para que aparezcan en su lugar. Esto todavía funciona bien. Entonces, cuando venga aquí, esto va a desaparecer. Esto se va a desvanecer. Esto se va a desvanecer. Se puede ver lo tarde que son estas secciones, que es lo que queríamos en primer lugar. Y eso es genial. Entonces la página principal está hecha. Vamos a los autos. Entonces al auto es lo que podemos hacer es quizás podamos hacer una animación un poco diferente. Entonces este elemento disparador cuando scroll into view va a alimentarse y el retraso va a ser bastante grande. Entonces 600 e.g este caso. Y vamos con diez. Y esta imagen de tarjeta se desplaza a la vista, puede deslizarse, deslizarse hacia arriba desde abajo. Y vamos con algo así como 100s. Y esto puede ser como cinco. Entonces, consigamos un adelanto. Para que puedas ver cómo se ve eso. Y no lo voy a mostrar en estos dos, algo así. Y también puedes establecer las acciones personalizadas aquí mismo, o puedes configurar el Easing personalizado. Pero creo que esto va a salir bien. Al igual que tal vez podamos ajustar esto un poco más. Como el jarabe para la tos. A lo mejor pueden ser cinco, solo para que sea un poco más rápido así. Y nuestra colección exclusiva ya está ahí. Así que tal vez podamos desvanecer eso también. Así que toda esta sección se desplaza hacia la vista o mientras se desplaza la entrevista, incluso puedes configurarlo para que sea una interacción continua animar mientras los elementos crecen. Vista. No voy a hacer eso porque tenemos ocho elementos, así que simplemente desplazarse a la vista va a funcionar bien. Vamos a golpear fade aquí mismo, y vamos con algo así como 400 milisegundos de desvanecimiento. Ahí vamos. Haga clic, y ahí va. Entonces ahora tenemos estos dos. Y tenemos contacto con nosotros. Tenemos esto todo el camino. Funciona bien. Quizás para el pie de página, tal vez podamos ajustarlo para que sea un poco más lento porque es más rápido, no más lento. En lugar de 400, tal vez 300. Ahí vamos. Entonces ahora eso está terminado. Pasemos ahora a los préstamos. Y lo que quiero hacer con los pulmones es que quiero hacer tres animaciones diferentes aquí. Entonces por aquí. Pero antes de hacerlo En realidad lo siento por eso. Volvamos a los autos y ajustemos algunos de estos. Esto, bien. Y esto es para estos dos. Ahí vamos y arreglamos el resto de ellos. Entonces vayamos a los préstamos. Y aquí lo que voy a hacer es desplazarme a la vista. Voy a decir seleccionar diapositiva. Desde arriba. Ahí vamos, algo así como 100s. Y entonces estos pueden deslizarse de cada lado. Así que desplácese hacia la vista, se desliza desde la derecha, 300. Y esto debería ser scroll en ver diapositivas desde la izquierda, 300, algo así. Y por último, tratemos de esta sección a continuación. Entonces lo primero lo primero se desplaza hacia la vista. Voy a seleccionar el destino, no deslizarse, sino el destino. Y algo así como 400. Va a ser bueno y el offset va a ser algo así como cinco. Así que vamos a probarlo. Ahí vamos. Creo que eso va a estar bien. Y luego para estos dos, qué podemos hacer, porque esa es básicamente nuestra última sección. Tal vez podamos deslizar esto de sitios como este desde un lado y llamarlo un día. No están desperdiciando demasiado tiempo y puedes por supuesto, jugar con estos elementos como quieras. Entonces esto, mientras se desplaza a la vista, voy a establecer la acción. Y antes que nada, deshagámonos de estos. Y antes de que lo haga en realidad, veamos si lo configuramos para estos. No lo hicimos. Así que asegurémonos de arreglar eso. Ahí vamos. Y los textos pueden permanecer igual porque no toma demasiado del ancho de banda. Así que las imágenes de los socios mientras se desplaza en la vista, seleccione la animación de desplazamiento de juego de acción Aquí lo que podemos hacer es suavizar está en 50 por ciento se les ofrece animación de imagen. Agreguemos uno nuevo. Entonces esto va a ser socios, animación, compañeros animación de imagen así. Entonces al cero por ciento, vamos a decir, digamos que la opacidad va a estar en 0%. Al nueve por ciento, va a ser la opacidad al 40%. Y aquí es 13%. Tal vez podamos tener opacidad en 100% IN, OUT quad para la flexibilización, seleccionar este en nuestro quad, y seleccionar este en, out quad. Déjame escalar un poco, acertar a adelanto y ver qué tenemos hasta ahora. Entonces puedes ver que es solo un poco leve, un poco de flexibilización. Solo presta atención a este rincón de tu pantalla. Ahí vas. Así que un poco de animación y todo funciona bien. Y quiero empujar este texto desde un lado. Así que vamos a configurarlo aquí mismo. Puedes presionar guardar aquí mismo y luego volver a tu animación. Entonces, cuando seleccione el contenido de mi socio, me llevará justo aquí. Entonces aquí, mientras te desplazas la vista, podemos hacer eso, pero solo voy a usar un scroll into view. Y voy a decir algo como slide porque ya usamos los de la derecha. Algo así como ciento 50 milisegundos. Tal vez. Hit vista previa. Ahí vamos. Entonces se ve bien y creo que está bien. Y finalmente, lo que nos queda por hacer es contactarnos. Aquí no voy a animar nada. Ya está hecho para mí. Pero vamos a tratar con la plantilla de página de autos y no voy a hacer demasiado aquí mismo. Lo único que tal vez pueda mencionar aquí es esto. Así que en la animación porque puedes imaginarte que la gente se desplaza por la izquierda y la derecha a través de estas páginas y se están cansando un poco de tus animaciones, especialmente si estás usándolos imprudentemente en cada sección. Entonces puede ser un poco tedioso de vez en cuando. Entonces, por lo tanto, en esta sección, todo lo que quiero hacer es quizás animar esta tarjeta. Quizá sólo un poco, pero tampoco creo que eso sea necesario. No lo sé. A lo mejor pueda editar toda esta sección. Entonces veamos. Los elementos se activan, se desplazan hacia la vista, la acción, el fundido y el retraso de tal vez 50 milisegundos. Veamos cómo se ve eso. Ahí vamos. Entonces nada demasiado importante. A lo mejor puedo ajustar esos 200 milisegundos o algo así solo para que parezca una carga de página así. Y creo que eso es realmente todo lo que hay que hacer aquí. Yo lo quiero tal vez incluso animado esto, pero vamos, hagámoslo. Para esta sección. Vamos a desplazarnos a la vista, o digamos que se desvanece, 200 milisegundos de desvanecimiento. Creo que eso va a ser lo suficientemente bueno. Entonces cuando golpeé la vista previa. Viniendo aquí mismo, puedes ver cómo se ve eso . Eso está bien. Ahí vamos. Las animaciones de nuestro sitio web están terminadas. Y claro que puedes seguir adelante y jugar con esto mucho más con mucho más detalle. Lo que no mencioné es que puedes combinar varios elementos diferentes. Entonces veamos que quiero animar esta imagen por cualquier motivo, puedo ir al elemento trigger. Y luego puedo decir algo así como mientras se desplaza a la vista, que ya te mostré. Y luego vamos scroll, place crawl animation. Voy a deshacerme de estos como ya se mencionó, y luego puedo agregar una nueva animación aquí. Lo que no mencioné es que puedes agregar todos estos al mismo tiempo. También puedes filtrar y hacer animaciones en filtros, puedes hacer clic aquí mismo y eliminar la animación. Entonces cuando vayas justo aquí, desplázate hasta el final. Déjame esconderme para que lo veas. Tienes estas transformadas 2D y 3D. Entonces lo que puedes hacer en dosis es si te muestro algo así como transiciones, tienes esta opacidad. Entonces, cuando agregas el cursor sobre la opacidad, por ejemplo, así que aquí lo que tenemos es opacidad. Ahí vamos. Pero si sigo adelante y agrego un estado de hover a esta imagen, ahora puedo ajustar esta opacidad y moverla para poder cambiar a no estado. Así que vamos a ver cuando llego a vista previa, puedes ver un poco de opacidad, pero claro, puedes ajustar eso y moverlo y colocarlo como quieras. Entonces básicamente a, digamos 275 milisegundos, puedo ajustar esto para que sea algo así. Ahí vamos. E incluso puedo agregar una nueva animación por dentro. Entonces cuando vas a hover, dice cambiar al no estado para agregar una transición para que pueda cambiar ahí. Pero en realidad no necesito eso por el momento. Y sólo me voy a deshacer de él. Lo que quería mostrarles, nuestras transformaciones 2D y 3D. Entonces lo que puedes hacer es también en hover o en carga, puedes cambiar los valores x. Entonces izquierda y derecha, que van a aumentar la escala a través valores que van a aumentar los valores de altura y Z. Te has movido, tienes escala, has girado, tienes sesgo, todo tipo de cosas diferentes. Para que puedas ajustar eso. Tienes tus sombras de caja para que el fondo caiga sombras, tienes tus diversos filtros. Entonces tienes tu pleura aquí mismo. Brillo, contraste, matiz, saturación, todo tipo de cosas diferentes. Y puedes agregar uno para que aparezca en ciertos fotogramas y luego agregar otro para que aparezca en diferentes fotogramas. Y por último, tienes estos filtros de telón de fondo, que básicamente son los mismos que éste, pero para tu fondo, no para la imagen misma en este caso. Para que puedas combinar estos con las animaciones básicas que ya te mostré. Y por último, lo que podemos hacer es usar el activador de página. Así que volvamos a casa aquí mismo. Entonces se carga una vez más, así. Y luego así. Entonces desencadenador de página, carga de página. Y podemos iniciar una animación. Así que ahora puedes ajustar la animación de carga para toda tu carga. Entonces sucede solo en el escritorio por ejemplo y se puede iniciar un tiempo de animación. Las animaciones no hay. Entonces puedo dar click aquí y luego puedo empezar a animar esto. Entonces digamos animación de página de inicio. Ahí vamos. Y aquí puedo dar click aquí mismo. Y luego digamos, no sé, los textos, el color o el tamaño u ocultar muestran algo o lo que sea. Ocultar Mostrar, puedo seleccionar el elemento que quiero ocultar. Entonces digamos éste. Ocultar, mostrar. Y puedo establecer eso como el estado inicial. Y ahora cuando empiezo a animar hacia abajo, así que por ejemplo aquí al final, puedo ocultar los elementos del espectáculo. Puedo seleccionar el elemento después de la sesión anterior con la relajación del retardo. Para que puedas elegir Display. Puedes hacer todo tipo de cosas diferentes aquí mismo. Y realmente se puede ir en profundidad sobre la animación y el flujo de trabajo tiene un gran curso en su Webflow Academy en su página web. Entonces tal vez puedas comprobarlo y ver cómo se ve eso. Pero por ahora, sólo voy a dejar esto como está. Y solo voy a llamarlo un día para estas animaciones porque ya estamos 26 min adentro y realmente podemos avanzar otra hora hablando de estas animaciones, pero solo recuerda, lo que sea que cree mejor en su software de diseño de su elección. Eso es Adobe XD, figma, sketch, lo que sea. Puedes recrear eso en Webflow y agregar mucho más. Entonces transiciones entre páginas, efectos de desplazamiento sobre elementos, animaciones en diferentes elementos, animaciones de fondo en estos diferentes fondos, por ejemplo aquí tenemos estos círculos. Entonces tal vez mientras están a la vista, estos círculos pueden animarse y moverse. Entonces si lo demuestro, a lo mejor pueda seleccionar éste para que sea estado inicial. Y luego mientras mi usuario está mirando la pantalla, esto puede animar y seguir este camino hasta aquí y luego rebotar de nuevo hasta aquí o algo así. A lo mejor esta imagen del auto puede crecer, encogerse y volver. Así que todo tipo de animaciones diferentes se pueden lograr aquí mismo en Webflow. Pero básicamente, este video va a cubrir solo lo básico como mencioné, porque estaremos aquí todo el día. 192. Publica y codifica la exportación: Ahí vamos, llegamos al final de este Webflow construido. Ojalá te hayas divertido mucho. Ahora, es el momento de lanzar este sitio web y exportar nuestro código. Como mencioné anteriormente, sí hay que tener el plan pagado para que así lo hagas. Pero aún puedes lanzarte al dominio Webflow, que es lo que vamos a hacer, pero no puedes exportar código en un plan gratuito. Déjame mostrarte cómo hacer precisamente eso. Entonces cuando golpeo justo aquí y te llevo aquí mismo, tienes estas opciones. Entonces tienes esta opción de Compartir. Para que puedas tener tu enlace solo para compartir y puedes copiar ese enlace e invitar a editores invitados si quieres que alguien más lo edite, tienes que tener tu plan de pago para hacer esto. O simplemente puede copiar y compartir este enlace con sus clientes. Entonces esta es una gran opción. Igual que en tu software de diseño o elección. Puedes compartir el enlace y tus clientes podrán ver lo que hiciste. Pueden jugar con las animaciones. Pueden ver la respuesta que hiciste. Y van a ver esta vista previa aquí mismo incluso puedan hacer click a través estos diferentes puntos de interrupción. Y pueden ver que esta animación está sucediendo en tiempo real, lo cual es genial para que te den retroalimentación. E incluso puedes invitarlos a colaborar contigo en este proyecto en particular. Aquí al lado, lo que tenemos es que tenemos código de exportación, por lo que no incluye funcionalidad o contenido CMS. Puede exportar contenido de colección desde el panel de colecciones. Entonces de esto es de lo que hablamos. Puedes hospedar con Webflow para aprovechar al máximo CMS, el formulario de comercio electrónico es funciones de búsqueda. Pero si solo imaginas que por ejemplo para este proyecto no teníamos CMS, solo teníamos páginas estáticas y queremos exportar algo así. Así va a quedar el código. Así que sólo tienes que hacer clic aquí mismo donde tienes este icono de código. Tienes tu HTML, tienes tu CSS, tienes tu JS, que es para las animaciones. Y finalmente tienes tu activo. Así que va a empaquetar todos nuestros activos muy bien. Ya los tenemos en un escritorio, pero necesitas estos activos si quieres mover este sitio web a otro hosting. Entonces digamos que no quiero hospedar con Webflow. Quiero hospedar con hosting aquí o Bluehost, que mencioné anteriormente. Es por ello que necesitas todos estos activos. Lo que vas a conseguir entonces es hit prepare zip. Vamos a preparar tus archivos en una carpeta zip en aproximadamente dos o 3 min, dependiendo del tiempo de procesamiento, va a preparar esos archivos por ti. Y luego puedes tomar ese archivo zip y subirlo directamente a la carpeta raíz de tu hosting ya lo hice muchas veces antes, pero más recientemente para mi sistema de diseño llamado Sistema de diseño de inicio, esa página está totalmente diseñada y prepararla en Webflow, exportarla desde Webflow y simplemente subirla a mi propio hosting. Esa página no hospedo en flujo de trabajo. Y así de súper simple es esto. Básicamente puedes ver el HTML, puedes ver dentro de la etiqueta body aquí mismo lo que tenemos. Entonces tenemos todos estos divs básicos. Entonces contenedor un contenedor sección Navbar, todos estos. Entonces tenemos el envoltorio héroe que agregamos. Puedes ver el texto aquí mismo. Se puede ver el bloque de texto break Siqueiros centrado, Esa es la clase, y ese es el nombre div. Y entonces tenemos esto en cuanto a CSS, lo que tenemos es que tenemos estos márgenes, secciones, todo tipo de cosas diferentes. Entonces solo puedes imaginar lo que hicimos visualmente. Tendremos que escribir todo eso dentro de nuestro código. Por eso Webflow es increíble, porque puedes agregar todo eso dentro. Entonces puedes ver para el flexbox, para los elementos de alineación, para el margen, tienes todo eso. Y en JS, tienes todas tus animaciones que hiciste para la introducción, para la carga de las páginas, todo tipo de cosas diferentes. Y aquí puedes ver que tienes esta licencia de flujo de trabajo, pero si quieres deshacerte de ella, tienes que pagar ese plan de agencia. Creo que 35 dólares al mes o algo así, que va a etiquetar tu código en blanco y no va a mostrar ahí el flujo web. Por último, quiero mostrar esto publicado. Para que puedas elegir Publicar destino. Puede optar por publicar en el enlace IO de Webflow. Y puedes cerrar, puedes ir a Opciones Avanzadas y puedes habilitar SSL, que es básicamente si estás vendiendo algo en tu sitio web, solo muestra ese bloqueo seguro al lado de tu navegador. HTML minificado, que simplemente va a reducir el código dentro y hacerlo organizado y bien empaquetado. Css y JS, va a hacer lo mismo. Y puede usar encabezados de marco seguros, que si pasa el cursor sobre aquí mismo, protege su sitio de varios tipos de ataques de jacking de clics restringiendo varios lados que se pueden incrustar. Así que no todo el mundo puede incrustar su sitio web en sus bloques, por ejemplo o algo así. Entonces solo voy a usar esto. No voy a usar dominio personalizado, así que puedes presionar Publicar para seleccionarlo. Dominios va a tomar unos momentos y cuando esté listo, se va a publicar. Y luego vas publicado con éxito. Y ahora lo que podemos hacer es dirigirnos a ajustar algunos de nuestros Ajustes de SEO. Y por lo general cuando hago esto, me gusta trabajar y ajustar el SEO a la vez. O al ajustar, solo empieza. Me gustaría preparar mi SEO, pero a propósito no quería confundirlos chicos porque no a todos les va a importar el SEO. Obviamente, cuando trabajas para ti mismo, eres el responsable de eso a menos que tu cliente contrate a un experto en SEO. Pero si quieres y si sabes cómo hacerlo, puedes aprender algo de SEO básico muy rápido, incluso en YouTube, y simplemente aplicar ese conocimiento directamente a través de tu Webflow. Sitios web. Seo es, por supuesto, optimización de motores de búsqueda es como ayudas a tu, ayudas a Google a encontrar, indexar y optimizar tu sitio web. Y cuanto mejor estés en SEO y la batería o habilidades SEO son para mejorar el sitio web de tu cliente va a ser clasificado en búsqueda. Entonces en el siguiente video, vamos a abordar algo de SEO. Y sólo voy a mostrarte algunos ajustes básicos que todos pueden hacer. 193. Optimización de Seo: Bien, entonces déjame mostrarte algunas configuraciones de SEO que puedes hacer y que todos pueden hacer Inside Buffalo sin importar cuán experimentado o no seas. Entonces cuando voy aquí mismo a nuestro sitio, lo que puedo hacer es hacer clic aquí mismo donde dice páginas. Y aquí tienes esta configuración de página de edición. Cuando haces clic ahí mismo, probablemente hayas notado esto cuando creamos estas páginas, pero esta es solo la configuración básica del SEO porque cómo escribes tu código afecta directamente al SEO. Pero como no escribimos código en Webflow, solo usamos los componentes prefabricados y solo usamos el creador de páginas y esta estructura cuando estás usando las mejores prácticas, obviamente no importa porque las mejores prácticas van a conseguir que te cubran cuando se trata de SEO. Pero si solo estás atascando elementos en una página sin ninguna estructura, sin usar, digamos secciones porque esta sección le dice al Google indexa tu sitio que, bien, este es el sección de esta página. Dentro de esta sección tenemos el contenedor. Entonces sé que contiene algunos elementos en su interior. Dentro de ese contenedor, tenemos un envoltorio. Entonces sé que el envoltorio envuelve algún contenido. Y dentro de ese envoltorio, dije que tengo eje. no conozco contenido de héroe, así que sé que ese es el héroe que se supone que va a ir a la cima. También usamos ese H1, H2, H3, H4, y así sucesivamente y así sucesivamente para los encabezados. Y a propósito usamos H1 en la parte superior de la página, H2 menores de tres años por debajo de eso. Y luego usamos bloques de texto para los elementos de texto y para los elementos de texto más pequeños usamos párrafos. Eso es todo una buena práctica para hacer. Porque Google va a tener un tiempo mucho mejor indexando tu sitio web y optimizándolo para una búsqueda porque va a entender lo estás haciendo también por las imágenes de las que hablamos, esas etiquetas alt, cuando optimizas tus textos antiguos para cada imagen, lo que se supone que debes hacer. Pero me salté mucho de ello a propósito para este curso porque nos llevará horas y horas de fin. Pero deberías hacerlo por cada imagen que va a ayudar a que tus imágenes se muestren en la búsqueda de imágenes. Así que cada imagen que haces, que subes cada icono, cada foto. asegura de usar siempre los textos alt y de usar siempre el texto descriptivo si es necesario dependiendo de la imagen como le expliqué. Entonces, lo que tenemos aquí mismo, si bajamos todo el camino, lo clasificamos todo el camino hacia arriba. Tenemos homepage, así podemos tener protección con contraseña, lo cual no haremos porque no la necesitamos en un plan de sitio. Para que puedas agregar un plan de sitio para descargar deuda. Entonces ajustes de SEO, lo que podemos hacer aquí mismo es cómo se ve el resultado de búsqueda. Entonces etiqueta de título, título de la página. Este es el título óptimo de la página. Entonces lo que puedo hacer aquí mismo se llama esto como salón. Y aquí puedes ver cómo se ve en Google, en la búsqueda, una araña, autos exclusivos. Y luego Meta Descripción. Describa la página. longitud óptima de la descripción es de 155 a 300 caracteres. Tan exclusivo showroom de autos, concesionario de autos exclusivo. Vamos a arreglar esto. Exclusivo concesionario de autos en el centro de Belgrado. Entonces sabemos que podemos conectarnos directamente usando la meta descripción. Podemos conectar el mapa porque ya lo hicimos conectados usando Google Maps. Por lo que sabrá una vez más publicarnos y mostrarnos más a las personas que se encuentran en Belgrado o en zona de sondeo. Ahora, el título de gráfico abierto es algo cuando estás compartiendo tu sitio web en algo como redes sociales como Facebook, Twitter, LinkedIn, Pinterest. Entonces, lo que puedes hacer es lo mismo que la etiqueta de título de SEO, igual que la meta descripción en alguna parte. Y alguien que comparta tu página en las redes sociales, será exactamente lo mismo que esta. Y puedes agregar URL de imagen abierta, URL imagen de Open Graph, que debes subir. Abra Graph si desea que su sitio web sea compartido en redes sociales. Así que solo ve a este sitio web y sube la imagen en estas dimensiones de tu sitio, solo puedes subir una captura de pantalla, por ejemplo y esa captura de pantalla es cuando estás compartiendo algo, digamos a Facebook historias o publicaciones en Facebook, cualquiera que sea la imagen que obtenga del sitio web, esa es esa imagen. Y puede excluir esta página de los resultados de búsqueda del sitio. Y se puede decir buscar título, mismo, mismo, mismo. Y luego finalmente, código personalizado. Si necesitas poner algún código personalizado dentro de la etiqueta de la cabeza antes de la etiqueta del cuerpo. Puedes hacerlo aquí mismo. Por lo general, haces esto para algunos scripts como digamos Google Pixel, por ejemplo, cuando lo estás haciendo por tu cuenta. Pero aquí tenemos integración directa, por lo que va a aparecer en sí misma. O si tienes algún chat externo, por ejemplo, entonces vas a endeudarte. Por lo general, están dentro de la etiqueta de la cabeza. Si estás usando algo como Google Analytics tal vez o algo así. Entonces lo que voy a hacer es simplemente copiar esto. Y él diría aquí mismo. Entonces donde dice autos, carpeta padre, sabemos cómo lo voy a usar aquí mismo. etiqueta del título dice autos. Entonces veamos. Autos de vaca. Sí. A ver. Etiqueta de título. ¿Esto es lo que ves en la parte superior de la página? Entonces tal vez podamos ir con algo así como unos autos araña, autos estacionados. Entonces esta es la URL real, website.com forward slash cars. Pero sólo vamos a mostrar algo así como un coche araña tal vez. Entonces todo esto va a quedar intacto para que no cambiemos la deuda. Entonces podríamos ir a los pulmones. Y para los préstamos, puedo acertar lo mismo aquí mismo. Pero tal vez podamos simplemente cambiar esto. Tan exclusivo concesionario de autos en el centro de Belgrado. A lo mejor podemos hacer algo como los mejores préstamos exclusivos para autos en el centro de Belgrado porque se trata de préstamos. Entonces podemos hablar de una araña, préstamos de autos. Ahí vamos, Hit Guardar. Y finalmente contáctanos. Lo que podemos hacer es volver a Pages. Haga clic aquí, contáctenos. Lo que podemos hacer es contactar como parte de los autos. Ahí vamos. La meta descripción asegura que sea lo mismo. Ponte en contacto con nosotros y conduce el auto de tus sueños hoy mismo. A lo mejor algo así. Para que veas lo sencillo que es esto. todo el mundo puede hacer esto, pero realmente ayuda a Google a indexar tus imágenes, realmente ayuda a encontrar n porque esta imagen se llama showroom de araña, como puedes ver aquí mismo. Eso es de lo que hablamos e incluso puedes señalar eso. Así que contáctanos. A lo mejor podamos ajustar un poco esto. Así que ponte en contacto con nosotros y tal vez visita nuestra sala de exposición para conducir el auto de tus sueños o algo así solo para conectar más la imagen y la Meta descripción misma. Y aquí lo que tenemos es que podemos hacer esto. Para que podamos ir con etiqueta de título. Tal vez. No lo sé, usando el campo de recolección según sea necesario. Entonces tal vez podamos agregar un campo de nombre. Ahí vamos, meta descripción. Podemos agregar babosa tal vez, que es esta fila naranja o Vogue. Ahí vas. O puedes agregar campos adicionales. Entonces veamos tal vez, tal vez el nombre también. Y no necesitamos babosas, así que vamos a deshacernos de eso. Podemos agregar un nombre. Entonces voy a dibujar nuestro Voc. Ahí vas. Y tal vez podamos tener un corte aquí mismo o algo así. A los autos araña como parte de autos o spot autos exclusivos o algo así. Entonces no queremos que sea demasiado grande. Detecta autos exclusivos. Entonces cuando cambia porque en este momento es guardabosques o caminar, cuando cambie más tarde a Huracán Lamborghini va a seguir teniendo un spotter autos exclusivos, pero solo tienen un huracán Lamborghini antes de ello. Y el nombre de abajo, también va a optimizar. Utilice la configuración de Open Graph. Lo mismo, lo mismo, lo mismo. Esto es lo mismo, mismo, mismo. Esto es lo mismo que mencioné. Entonces ahí tienes. Se puede ver lo súper simple que fue eso. Solo estas pocas cosas realmente nos ayudaron a optimizar el SEO para nuestra página. Y eso es básicamente todo. Eso es todo lo que puedes hacer. En solo un par de minutos. Puedes ver que me tomó solo 8 min lograr algo como esto en un nivel realmente básico. Pero puedes ir realmente a fondo en ello. Cuando se trata de lo general, lo que recomendaría es, como mencioné, subir el Fab Icon, subir el clip web. Puedes establecer la zona horaria, asegúrate de hacer precisamente eso. Entonces tenemos el hosting. Si quieres quedarte aquí mismo, tienes que comprar el plan. Como mencionamos, tenemos a los editores. Entonces quien va a ser tu editor puede editar y publicar. Entonces tenemos facturación, tenemos SEO, así podemos ajustar eso. Entonces indexando, no quiero que se indexe porque este es el sitio web de práctica básicamente. Entonces no quiero que se muestre en los resultados de búsqueda. Mapa del sitio. Deberías agregar un mapa del sitio si no sabes cómo hacerlo, es súper sencillo de hacer. Hay sitios web por ahí. Simplemente puede ir a su archivo de diseño y ver todas sus páginas o simplemente volver a aquí al sitio web. Básicamente tienes casa, tienes autos, tienes préstamos, Contáctanos, y solo tienes una página. Entonces eso es todo lo que necesitas hacer dentro de tu mapa del sitio, la verificación del sitio de Google. que puedas ir a la Consola de Búsqueda de Google, crear tu cuenta ahí y reclamar esto como tu propiedad. Y vas a obtener esta identificación de verificación, pégala aquí mismo. Esos dos van a platicar entre sí de fondo. Y tienes esta URL de etiqueta canónica. Puedes conocer más sobre ello aquí. Solo estos pocos cambios van a aumentar aún más tu sitio web. Entonces tenemos los formularios, como ya mencioné, asegúrate de incluir ahí el correo electrónico de tu cliente y no tus propias fuentes de correo electrónico. Ya hicimos las fuentes de Google, así que está bien. Las copias de seguridad van a hacer integraciones finas y código personalizado. Entonces, básicamente, eso es todo lo que hay para ello. Tenemos esto, así que está publicado. Vamos a publicar para seleccionar los dominios. Y ahí tienes, va a publicar ese sitio web publicado con éxito, hit close. Y cuando vuelvo con mi diseñador, puedo ver cómo se ve eso. Y ahora en mi perfil, vas a poder ver este sitio web y vas a poder clonarlo. Porque voy a hacerlo Colonial para ustedes chicos. Creo que tal vez no porque tenemos estas imágenes. Entonces tal vez porque tienes el contenido dentro de este curso, tal vez no sea la mejor opción para hacerlo. Quizá en el futuro. Hazme saber si quieres que lo haga, escríbeme un correo electrónico y avísame si quieres que cree este archivo completamente en blanco para que puedas incluir tus propias imágenes y luego puedas clonar ese archivo . Porque no estoy muy seguro, porque todo el mundo de la web toda la comunidad podrá clonar esto. Y tenemos estos derechos de licencia sobre estas imágenes. Entonces esa es la única razón por la que quería, me gusta hacer eso. Pero básicamente, eso es todo. Se puede ver lo súper simple que es hacer este SEO. En el nivel principiante. Obviamente, tienes agencias de SEO que están lidiando con esto de tiempo completo. Están optimizando para palabras clave y luego estás usando esas palabras clave dentro de tus textos. Entonces, por lo tanto, vas a optimizar todas estas cosas. Entonces solo presta atención a eso. Pero lo que puedes hacer como diseñador, como diseñador UI UX es solo lidiar con estas técnicas básicas de SEO y creo que estarás bien Al final del día. 194. ASIGNACIÓN de la SECCIÓN 17: Tu tarea para esta sección es obviamente construir a mi lado e intentar crear lo que diseñamos anteriormente. Ahora en Webflow, si estás teniendo problemas, proporcionaré un enlace al archivo colonial para que puedas simplemente colonizarlo y usarlo en tu proyecto y simplemente destrozarlo y ver qué usé, qué creado si te confundes en algún momento. Pero, y esto es un enorme pero que quiero mencionar. Siempre trata de asegurarte de seguir adelante porque como mencioné anteriormente en la sección de diseño de esta clase, esa es la mejor manera para aprendas si solo usas archivos terminados, si nosotros solo reemplaza las imágenes, entra ahí y llámela tuya. Nunca, jamás vas a aprender diseño. Nunca aprenderás el desarrollo de esa manera. Y siempre es la mejor manera y siempre el mejor enfoque a seguir. Si te quedas atascado en alguna parte, si cometas un error, asegúrate de ver siempre estas lecciones a un ritmo un poco más lento. Algunos de estos jugadores tienen esa opción. Si no, entonces puedes detenerlo, puedes rebobinarlo, puedes verlo varias veces. Y por último, si simplemente no tienes respuesta, no te preocupes, siempre puedes contactarme y siempre estoy ahí para ayudarte con cualquiera de estas lecciones de la clase. 195. SECCIÓN 18 Estudios de casos: Los estudios son una parte crucial de tu portafolio porque en realidad no quieres mostrar a tus clientes imagen final y el resultado final. Quieres mostrarles el proceso. Eso es lo que se llama el estudio de caso. ¿Cuál es el problema que realmente resolviste durante este proyecto? ¿Cuál es el enfoque que realmente tomaste para este proyecto? ¿Lo iniciaste con la investigación que iniciaste con wireframes? ¿Empezaste con tu software favorito de elección? ¿Empezaste con imágenes? ¿Cuál fue su proceso durante este proyecto? Porque contratando gerentes y expertos en diseño que buscan ayuda de diseño y para contratar diseñadores. Eso es lo que les interesa de tu proceso, no estás acabado los resultados porque cada diseñador, Altair puede crear un hermoso diseño pero visitar funcional. ¿Por qué realmente tomaste estas decisiones? ¿Por qué hiciste esto y no eso? Para eso están los estudios de caso. Por lo que son increíblemente importantes. 196. ¿Qué es un estudio de caso: El estudio de caso no es más que un largo para la presentación de su trabajo. Tu trabajo puede ser tu trabajo de diseño, o puede ser nuestro producto para crearlo. Y vamos a tocar esa parte un poco más tarde en esta clase. Pero a todos los efectos, es solo una presentación de tu trabajo. Ahora, ¿por qué? Forma larga y ¿cuál es la diferencia entre forma larga y forma corta? Bueno, es de forma corta. La presentación es algo que ves en Dribble todos los días. Y los sitios web como driblar son básicamente una captura de pantalla la parte de su trabajo para que pueda ser una sección de encabezado de su sitio web, por ejemplo, o una imagen maqueta de su aplicación que es ya concluida. Bueno, el estudio de caso es un largo para presentación que normalmente se ve en balizas. Es un estudio de caso porque ayuda a tus usuarios y a tus espectadores de ese estudio de caso, a estudiar tu proceso, a estudiar tus pasos y a estudiar cómo logras ese resultado final, que es, por ejemplo diseño de producto o la aplicación diseño, diseño web o algo así. No se limita estrictamente al diseño UI UX. También puede ser un gran en branding. Puede ser genial en el diseño del logotipo es solo la longitud de la misma. Va a variar dependiendo del proyecto en cuestión. ejemplo, si acabas de diseñar un logotipo va a ser un poco más corto porque no hay demasiados pasos en el diseño de un logotipo. Mientras que en el diseño de UI UX, si por ejemplo estás diseñando un sitio web que tiene 20 páginas diferentes, todas son receptivas y tienes que crear wireframes en papel. Los wireframes en tu software favorito, por supuesto, van a variar y vas a tener muchos más pasos que, por ejemplo en el diseño de logotipos. Entonces básicamente eso es un estudio de caso en pocas palabras. Y en las próximas lecciones de esta clase, vamos a explorar lo que debes incluir en tu estudio de caso. Cuáles son algunos pasos que debes tomar y algunos ejemplos de presentaciones geniales para comenzar con tus estudios de caso. 197. Elementos a incluir: Hay muchos elementos diferentes que puedes incluir en tus estudios de caso. Y a lo largo de mis más de 15 años en este negocio, he descubierto que algunos elementos funcionan mejor que otros porque algunos elementos realmente ayudaron a contar una historia de cómo se desarrolló ese diseño sobre el proceso, proceso de creación atrasado y, o el proceso que trabajaste en este proyecto en particular y algunos otros realmente distraen tus espectadores de llegar al grano. Porque el objetivo de un estudio de caso es atraer espectadores potenciales que puedan convertirse en clientes. Ojalá si eso es algo que estás buscando o si solo quieres presumir ante tus compañeros y que ellos entiendan tu proceso y cómo llegaste a esos resultados finales. Entonces en este video, vamos a discutir algunos elementos importantes para incluir, en mi opinión, porque veo estos elementos bombeándolo todo el tiempo en algunas grandes presentaciones que encontré en línea. Entonces aquí tenemos esta pequeña introducción rápida y algunos elementos importantes para incluir en su estudio de caso. Una vez más, va a variar dependiendo de tu industria, dependiendo del nicho en el que te encuentres. Porque no todas las industrias van a necesitar estos elementos y no todos los estudios de caso van a necesitar estos elementos. Si el proyecto es más corto, por ejemplo, entonces si el proyecto es más largo. Entonces, lo primero que hay que hacer es incluir textos, describir lo que hace cada sección y elemento. Así que no abrumes a tus espectadores, sino que des suficiente información sobre el proyecto. Entonces, por ejemplo, si hiciste un diseño de sitio web, no entres en demasiados detalles. Por ejemplo, me desperté una mañana y luego el cliente se comunicó conmigo. Nadie quiere oír eso. Llega al punto. Sea breve, conciso, pero sea preciso sobre los elementos que está tratando de describir con su texto. Haz que las imágenes cuenten la historia clave aquí. Pero el texto está ahí solo para ayudar a celular la idea oral, el diseño oral, tu presentación oral. Entonces solo está ahí para ayudar a que tus imágenes funcionen para ti. Entonces hablando el idioma de tu audiencia y no seas demasiado técnico. Lo que quiero decir con esto es, ¿quién es tu público objetivo? ¿Su público objetivo es diseñadores? Entonces puedes hablar en términos como yo usé responsive resize en Adobe XD, y utilizo diferentes tamaños de tablero de arte y cosas así. Pero si estás tratando de atraer a los clientes que hablar el idioma ellos entenderán porque probablemente no sepan qué es Adobe XD en primer lugar. Entonces tal vez no deberías mencionarlo como una deuda prominente en tu proyecto. Por supuesto que deberías mencionarlo algunas veces a lo largo de tu estudio de caso. Asegúrate de apegarte a lo que entienden tus clientes. Entonces, por ejemplo, si esa es una compañía de belleza, entonces asegúrate de hablar sobre productos de belleza, sobre el proceso de llegar a este diseño en particular. Usa el idioma que entenderán si ese es el público objetivo al que estás apuntando. Por supuesto, si esto va a ser visto por los directores de arte, claro que conocen Adobe XD y todas estas herramientas, pero tampoco seas demasiado técnico con los textos que intentas contar aquí. Entonces, una vez más, si estás en una industria de la belleza, asegúrate de mantener ese equilibrio. Así que describe qué herramientas estás usando y también describe el nicho en el que te encuentras. Describe el proceso en el que te encuentras y usa algunas jergas técnicas dentro de ese nicho en particular, pero no exageres y no compliques demasiado las cosas. Una vez más, los textos están ahí solo para ayudar a tus imágenes, contar una mejor historia. A continuación tenemos imágenes. Entonces como mencioné, usa imágenes para complementar tus textos. Las imágenes deben estar conectadas con la historia que estás contando. Una imagen de noticias que ayuda a tu historia, no a cualquier imagen. Y si puedes tomarlos tú mismo. Lo que quiero decir con eso es por ejemplo si estás en un negocio de autos y estás hablando de autos, no solo mostraste imagen de una montaña. Porque ¿cuál es el punto de esa imagen? No ayuda contar esa historia. No ayuda vender la idea de ese diseño en particular. Así que no lo uses. Usa imágenes que van a ir bien con tus presentaciones y que van a tener sentido. Como dije aquí, toma cualquier imagen si puedes. Todo el mundo tiene uno de estos, así que simplemente puedes usar tu teléfono y tomar una foto de tu proceso sobre ti mismo trabajando en este proyecto, sobre la creación de, por ejemplo wireframes de papel. O puedes tomar tu teléfono y dárselo a alguien, ya sabes, por ejemplo, tu familiar o tu mejor amigo o algo así. O incluso puedes hacerlo tú mismo. Si no quieres que nadie te ayude, simplemente puedes colocar tu teléfono detrás de ti. Por ejemplo, tomar un tiro, algo así. Entonces sobre el hombro de ti trabajando en tu computadora por ejemplo o en este lado. O si estás echando un vistazo a la vista previa de ese diseño, simplemente puedes mostrar tu teléfono así bajo un ángulo de sostener ese teléfono y mostrar ese diseño. Realmente va a ayudar a contar una historia porque va a mostrar a tus clientes objetivo y tu público objetivo que realmente te importa este proyecto. Que realmente pones mucho pensamiento y esfuerzo en este proyecto. Y que realmente le prestes atención a los detalles para nuestros directores, sobre todo los que buscan contratar diseñadores. Esto va a ser crucial en sus decisiones porque pueden ver de inmediato que tú eres el diseñador que está prestando atención a esos pequeños detalles. Y realmente va a dar sus frutos a la larga. Así que solo asegúrate de prestar atención a pequeños detalles como este. Pero una vez más, no exageres. No se limite a tomar fotos de usted mismo al azar y simplemente ponerlas en su caso de estudio. No ayuda contar una historia, pero pocas imágenes aquí y allá realmente te van a ayudar a vender la idea de ese diseño en particular. A continuación tenemos guía de estilo y sistema de diseño. Así que presume de tu guía de estilo o sistema de diseño para demostrar que estás organizado y estructurado. Una vez más, para nuestros directores, esto es sumamente crucial, pero también para nuestros clientes, porque pueden ver todos estos elementos que se unen en el diseño terminado, presentan los más elementos importantes que uses, pero no exageres. Coloca los gradientes para cortar tu imagen en la parte inferior si es demasiado larga. Esto es especialmente importante para proyectos muy largos y estudios de casos muy largos porque en sus guías de estilo sistemas de InDesign en muchos casos, puede tener cientos de elementos diferentes, pero no todos los elementos son importantes. Por ejemplo, puedes mostrar colores, usaste fuentes, quizás algunos botones, tal vez algunos foros, elementos, cosas más grandes como esas. Y luego simplemente introduce un gradiente de luz, que simplemente va a alimentar ese sistema de diseño mientras tus espectadores se desplazan hacia abajo hasta la parte inferior. Así que no los estás abrumando porque una vez más, guía de estilo y el sistema de diseño no es el resultado final, es solo una herramienta que te va a ayudar a llegar al resultado final, que es, claro que debería ser en la parte inferior de tu guía de estilo. Pero vamos a hablar de eso un poco más tarde en esta clase. Por último, usa los colores de tu proyecto y guía de estilo en tu presentación, así como el branding está a punto. Lo que quiero decir con esto es por ejemplo si tus colores principales son el azul y el gris, no solo vayas y uses el rosa porque rosa nunca se muestra en tu diseño, nunca se muestra en tu proceso. Entonces, ¿por qué ponerlos en tu presentación? Asegúrate de usar los colores de tu guía de estilo y sistema de diseño. Si tienes uno, si no tienes guía de estilo o sistema de diseño, tu proyecto es demasiado pequeño, simplemente se trabaja en una landing page. Independientemente, realmente recomiendo que empieces a usar guías de estilo y sistemas de diseño porque son sumamente importantes para el desarrollo futuro de ese producto en particular. Pero si no los tienes, asegúrate de usar los colores que tengas en tu diseño, en tu presentación. Porque de esa manera el branding va a estar en el punto. Te sorprendería la cantidad de veces que veo esto en presentaciones en línea, especialmente cuando estoy buscando diseñadores para contratar para que me ayuden en mis proyectos. Entonces veo esto todo el tiempo. Asegúrate de no repetir ese error porque una vez más, para nuestros directores, sobre todo esto demuestra que pones atención a los pequeños detalles. A continuación tenemos wireframes de papel, así que preséntelos en una declaración de problemas. Desafío en las fases conceptuales de tu estudio. Vamos a hablar de fases un poco más tarde en esta clase. Pero básicamente lo que esto significa es que tienes que presentar tu caso de estudio por etapas. Entonces el inicio está justo aquí arriba y el final está justo aquí abajo. Así que los usuarios tienen que desplazarse hasta el final para llegar a ese resultado final, básicamente un método de progreso. Así que los usuarios están progresando mientras se desplazan hacia abajo y están comenzando desde las etapas muy ásperas de ese proyecto para la ideación, tal vez algunos textos en páginas en blanco y wireframes de papel porque marcos son todo acerca de sus ideas. Así que muestra imágenes de creación así como imágenes escaneadas con una impresora o tu teléfono. Lo que quiero decir con esto es lo que expliqué anteriormente cuando alguien más te está tomando una foto creando ese wireframe, puedes hacerlo tú mismo. Simplemente puedes usar un bolígrafo y un papel y usar un formulario como este. Simplemente tomo una foto tuya creando ese wireframe. Una vez más, no exageres, pero asegúrate de incluir algunos de estos aquí y allá, solo para ayudar a contar una mejor historia y ayudar a vender el concepto oral a tus espectadores. Da suficientes detalles para complementar la historia que estás contando, pero no abrumes a tu audiencia. Eso es justo lo que dije. Y asegúrate de ser moderado con todas estas secciones. Entonces, si echamos un vistazo a la guía de estilo y al sistema de diseño, mencioné por el degradado, me refiero a lo mismo para los wireframes de papel, por ejemplo puedes usar una tira de imágenes que va a ser horizontal o puede cambiarlo a un lado solo para mostrar estos wireframes de papel y para mostrar su proceso. Y por supuesto puedes hacer algunas imágenes aquí y allá sobre ti creando estos wireframes de papel. A continuación tenemos un wireframe, así que muéstralos en los conceptos y partes de prueba de tu caso de estudio. Una vez más, vamos a llegar a eso un poco más tarde. Y claro, siempre puedes volver a estas lecciones y estudiarlas un poco más. Preséntelos como una imagen en perspectiva, en imágenes y en maquetas. Una vez más, simplemente puede guardar su wireframe de Adobe XD como una imagen. Puedes ponerlo en perspectiva en 3D, por ejemplo, puedes mostrarlo en imágenes. Entonces como te mencioné, puedes demostrarlo. Alguien que te tome una foto, por ejemplo, desde aquí o desde el costado o la estructura metálica de su teléfono, por ejemplo Entonces, desde esta perspectiva, digamos que usa esa estructura metálica en modo prototipo de Adobe XD, por ejemplo y finalmente, en maquetas, puedes usar maqueta de un dispositivo de escritorio, dispositivo portátil, dispositivo telefónico, sin importar lo que estés haciendo y presentar una maqueta de esa manera de tu wireframe. Si puedes hacer algunas pantallas, son parte de tu diseño clicable e incrustado en tu presentación. No importa qué herramienta estés usando, puedes hacerlo. Pero como estoy usando XD, es nativo en XD, simplemente puedes compartir la parte de tu prototipo para que puedas compartir una sola placa de arte, por ejemplo y luego puedes incrustarla en tu sitio web si tener esa función o si no, simplemente puedes hacerlo en balizas. Porque comienza se integra bien con Adobe XD porque es parte de la familia Adobe, es Adobe balizas de producto es. Así que simplemente puedes usar ese enlace desde tu Adobe XD y luego incrustarlo en tu presentación de balizas. Y luego la gente puede hacer clic en él y luego navegar por tu camino. Se. Se asegura de que cuente una historia y que complemente su texto, imágenes, papel, wireframes y otros elementos. Entonces esto va por todo lo que mencioné anteriormente. Así que no abrumes a tus espectadores por docenas de estos wireframes porque solo recuerda, este no es el resultado final. Esto es solo una parte de tu parte para el resultado final. Diseño de interfaz de usuario terminado. Ahí vamos. Así que asegúrate de mostrarlo en las etapas de prueba y resultado de tu estudio de caso. Lo que quiero decir con esto es que puedes demostrarlo siendo probado a tus usuarios. Entonces, si tienes usuarios en la habitación, por ejemplo, puedes seguir adelante y tomar fotos de personas usando tu diseño en el teléfono o en la computadora portátil o en los dispositivos de escritorio, lo que sea. Y puedes mostrarlo en la etapa de resultado, que suele ser la última etapa de tu estudio de caso. Entonces, cómo se ve al final, cómo se ve como un producto terminado, quizás ya se haya lanzado tu app o sitio web. Entonces puedes dar un enlace para que la gente pueda verlo. A lo largo de tu caso de estudio. Están aprendiendo sobre cómo lo creaste, cómo solucionas problemas en el camino. Y ahora hay un enlace en vivo para que la gente pueda acceder a él si estás trabajando en un proyecto privado. Entonces no estás planeando codificarlo, no estás planeando hacerlo vivo, entonces todo está bien. Puedes presentarlo en prototipos clicables, maquetas 3D e imágenes como mencioné anteriormente para todos estos otros elementos. Y también puedes grabar algunos videos de tus pantallas inacción y adjuntarlos a nuestro estudio de caso. Una vez más, si estás usando Adobe XD, simplemente puedes grabar un prototipo y puedes subir ese video para ser presentación de latas o a tu sitio web. Así que simplemente puedes incrustar ese video dentro y la gente puede hacer clic en él y luego puedes mostrarles tu, por ejemplo estructura de navegación o navegación entre dos o tres pantallas o algo así. Este es el resultado final de tu trabajo. Así que asegúrate de que tu diseño de interfaz destaque de tu presentación. Este es el punto de venta. Este es el punto final de su estudio de caso. Así que la gente se desplaza hasta el final para ver su diseño de interfaz de usuario terminado, para ver el producto terminado. Así que asegúrate de que destaque más que otras partes de tu estudio de caso. Porque una vez más, esta es la parte que realmente te vende como diseñador y un verdadero celdas el estudio de caso y tu proceso como diseñador. Así que asegúrate de que destaque. Por último, tenemos otros elementos a considerar. Entonces, dependiendo del nicho, eres independiente del proyecto en el que estés trabajando. Estos elementos podrían funcionar y podrían no funcionar. Así que asegúrate de tener cuidado con el estilo oral de tu producto, con el nicho general en el que se encuentra tu cliente. Maquetas, 2D y 3D en diversas etapas. Entonces, ¿qué es 2D? ¿Qué es 3D? Obviamente 2D es esto, y esto. 3d es esto y esto, por ejemplo para que puedas usar cualquier tipo de ángulo diferente de tus maquetas y también de tus diseños. Adobe XD tiene estas características 3D para que puedas usar tu tablero de arte y hacerlo 3D. Y puedes guardar la imagen como un PNG así y luego subirla a tu presentación si quieres tener prototipos cliqueables. Entonces mencioné que si estás trabajando en XD, simplemente incrusta el prototipo think video. Entonces, una vez más, puedes hacerlo un registro de pantalla estilo recorrido de ti sosteniendo un teléfono o detrás de la computadora portátil. Entonces el estilo walk-through es lo que mencioné. Simplemente puedes golpear record en XD si lo estás usando. Y estos otros estilos son, por ejemplo alguien más puede tomar su teléfono y simplemente colocarlo así sobre tu hombro, por ejemplo , aquí estás usando tu diseño en tu dispositivo para que puedas encender prototipo clicable al final del proyecto, y luego simplemente puedes usarlo en tu teléfono y alguien más puede grabarte. Y por supuesto puedes hacer lo mismo en tu computadora portátil o dispositivo de escritorio. Elementos de fondo. Entonces esto es lo que dice, elementos BG solo para mantenerlo un poco más corto, ayudar con los intereses visuales, así como para guiar a través de tu estudio de caso. Por supuesto, esto va a depender de tu proyecto. Entonces, si tienes hojas, por ejemplo, si estás trabajando en un entorno y compañía basados en la naturaleza, puedes usar las hojas como elementos de fondo. Puedes usar flores, puedes usar diferentes elementos gráficos y elementos geométricos, por ejemplo, círculos y cuadrados y triángulos, y algunos elementos gráficos diferentes, por ejemplo, como diamantes . Y por último, puedes usar iconos para que se correspondan bien con todos estos elementos de fondo. Una vez más, no exageres. Estos son, solo ayudan a mantener altos los intereses de esa audiencia y hacer que se desplace un poco más. Gradientes y difuminan si se ajustan al estilo del proyecto, pero no exageres porque muchas veces veo gradientes a lo largo de todo el estudio de caso y realmente te duele los ojos. Realmente te aburre después de un tiempo y no olvides, mucha de la gente por ahí tiene discapacidad visual. Entonces realmente va a ser muy difícil sus ojos ver estos gradientes. Y básicamente para distinguir tus gradientes de tu diseño, sobre todo si son daltónicos, cosas así. Así que solo asegúrate de usar degradados y difuminados en un par de lugares solo para darle un poco más sabor a tu diseño. Tenemos pegatinas y emojis. uso depende del proyecto de nutrimentos, por supuesto. Entonces digamos que estás trabajando en un proyecto para un banco. Obviamente no vas a incluir pegatinas o emojis. O tal vez el banco es para un público más joven y eso es a lo que están tratando de apuntar. Entonces quizás en esos casos, pegatinas y los emojis podrían tener sentido. Así que solo usa tu sentido común sobre lo que estás tratando de crear. Entonces estos son solo algunos de los elementos que me gusta usar en mis estudios de caso a lo largo de los años. Y estos son los elementos que encontré algunas de las principales empresas y diseñadores que existen utilizan todo el tiempo para complementar su presentación de diseño y contar una mejor historia. Puedes usar algunos de ellos. Puedes usarlos todos, pero solo sea lo que sea que estés usando, asegúrate de que te ayude a contar una historia y asegúrate de que funcione con tu marca y tu nicho. Porque de lo contrario solo se pegaría elementos y dificultaba la comprensión de la gente. Y por supuesto, si estás tratando de conseguir un trabajo usando tu estudio de caso, simplemente va a alejar a directores de arte y a la gente de RRHH los directores de arte y a la gente de RRHH porque están viendo a cientos de diseñadores en diariamente y realmente pueden decir quién es bueno, quién no se trata de estos pequeños cambios. Así que solo asegúrate de prestar atención a esos. 198. Creación de una estructura de estudio de casos: En el último video, hablamos sobre qué elementos debes incluir en tu estudio de caso, pero ¿cómo los estructuras para comprensión más fácil y para un consumo más fácil? De esto se trata este video. Así que tenemos la creación de estructura para su estudio de caso. Organiza tus estudios de caso para que sea más fácil de consumir y entender porque realmente no tiene sentido simplemente rellenar estos elementos en una página. Realmente tienen que tener alguna estructura coherente que tenga sentido y muestre a tus espectadores que realmente prestas atención a este estudio de caso y realmente prestes atención a tu trabajo de diseño sobre todo. Entonces proyecto, intro y breve, en mi experiencia, y en mi opinión, realmente debería ser lo primero. Y en la parte superior de la página, quizás en tu presentación, deberías tener algo así como imagen de portada, quizás presentando el resultado final, el resultado de tu proyecto y de este caso de estudio. Quizás si hay una aplicación móvil, tal vez deberías posicionar una bonita maqueta de aspecto 3D con un título al lado, solo para mostrar y contar la historia lo que realmente es esto. Y tal vez una sola línea sobre lo que realmente hace la aplicación o el sitio web. Por debajo de eso, en mi opinión, y en mi experiencia, los temas saltan directamente al diseño. Breve. Describa de qué se trata el proyecto, pero hágalo breve y conciso. No des demasiados detalles en caso de que estés bajo NDA. Entonces, por ejemplo, lo que quiero decir con esto es que si estás trabajando para una compañía de automóviles, no digas solo que la compañía de autos se fundó en 1954, por ejemplo, y sigue tu camino para describir los detalles sobre la historia fundacional. A nadie le importa eso. Se puede mencionar ese detalle. Entonces por ejemplo empresas fundadas en 1954, digamos que tienen 20 mil empleados. Entonces, ¿ves a lo que me refiero? Solo sé breve y conciso y mueve la historia porque nadie tiene tiempo para leer todo sobre eso, simplemente pueden ir al sitio web en cuestión en el que trabajaste, por ejemplo, leer todo sobre su historia o si se trata de una empresa conocida, simplemente pueden ir a Wikipedia si realmente les interesa aprender más sobre la propia compañía. Tu proyecto no se trata de la propia empresa. Se trata de los productos que están vendiendo, sobre un servicio que están ofreciendo, o sobre las buenas acciones que están haciendo si son sin fines de lucro o algo así. Así que una vez más, asegúrate de que sea breve en tu diseño. Breves, solo da la esencia para que tu audiencia esté informada y te cuente una historia a través de tu estudio de caso. Lo que quiero decir con esto es lo que mencioné en el video anterior. A complementar tus textos con tus imágenes y a lo que me refiero con NDA, no menciones los datos personales de los empleados. Por ejemplo, john es el director aquí vive en este tres a este este su número de teléfono. Obviamente, esto es una estupidez. No hagas eso tan bien. No menciones sus datos personales. Entonces, por ejemplo puedes mencionar a los fundadores si están de acuerdo contigo, y generalmente lo harán porque es buena PR, pero no menciones a otros empleados si no están contentos con eso. Nunca menciones sus datos personales como números de teléfono, direcciones de correo electrónico, páginas de Facebook, páginas de LinkedIn, no hagas nada de eso. Es que esa gente quiere hacer eso. Lo harán en su propia página web, pero simplemente no cometan el mismo error que tantos diseñadores por ahí, que he visto poniendo esto en tu caso de estudio, además, no menciones ninguna ganancia si no lo hacen lo quiero. Porque esto realmente va a mostrar a su competencia cómo les va y realmente va a funcionar en contra de su ventaja en este caso. Entonces por ejemplo se puede decir algo como lo hicieron 20% de incremento en el último trimestre, pero no lo haga. ejemplo, hacen 20,000 dólares más en el último trimestre que antes, porque eso realmente va a mostrar a su competencia sobre esta información sensible. Así que solo presta atención a cosas como esta. Una vez más, asegúrate de ser conciso y llegar al grano. A continuación estamos aquí. Problema que vendiste. ¿Cuál es el principal problema que enfrentaste en este proyecto y cómo lo resolviste? Diseñar el sitio web no es el principal problema. Es un problema y es un trabajo que tomaste y está diseñado que creaste. Entonces creaste este diseño de sitio web, pero ¿qué problema diseña ese sitio web? Entonces, por ejemplo, si tienen nuestro producto playa por ejemplo y las conversiones no son todo eso. Bueno. Ese es el problema que estás tratando de resolver. ejemplo, si la imagen del producto no es demasiado grande y los compradores potenciales no entienden de qué se trata el producto. A lo mejor aumentas el tamaño de esa imagen. Posicionó los botones aquí y allá y luego incrementó la conversión más antigua a largo plazo, por ejemplo durante los próximos seis meses en un 20 por ciento. Entonces ese es el problema que resuelves. Ese debería ser el punto clave que estás mencionando en tu estudio de caso porque una vez más, demuestra a tus futuros empleadores que realmente estás cuidando cosas pequeñas, pequeñas como esta, que en realidad se va a convertir en un gran problema si no se resuelve a tiempo. No digas cómo crear una app, sino a qué problema usas esta enfrentada y cómo la resolvió tu app. Esto es justo lo que mencioné. Entonces, por ejemplo, si digamos vamos a ceñirnos a la página del producto. Si no funciona bien, no responde. Digamos que en Escritorio, móvil, perdón, en escritorio y en laptop y dobletes, Digamos Comprar Ahora, el botón funciona bien, pero en el móvil se pierde. Entonces tal vez aumentas la conversión en, digamos, diez por ciento en los próximos tres meses simplemente haciendo ese botón pegajoso y haciendo que, es tal manera, entonces simplemente comienza a gatear cuando los usuarios comienzan a desplazarse más allá de cierto punto. Entonces ese es el problema que resuelves y aumentas la conversión en un diez por ciento. Este es sólo uno de los ejemplos. Por supuesto, cada proyecto por ahí va a tener diferentes problemas y que hay que resolver como diseñador. Esta es sólo una de ellas. A continuación tenemos retos que enfrentaste. ¿Hubo algún reto particular al que te enfrentaste al crear tu diseño? Los desafíos pueden ser plazos cortos, problemas de usuario, desarrollo de nuevas ideas, pruebas largas, implementación y cosas así. Sea conciso y deje que su estudio de caso cuente una historia, pero dé suficientes antecedentes para que los espectadores puedan entender de lo que está hablando sin revelar demasiados detalles. Entonces, digamos que después de crear conceptos iniciales, los usuarios tienen problemas navegar por la aplicación. Entonces, por ejemplo, el reto que enfrentaste es que tenías que simplificar la navegación. Así que facilitaste la comprensión de los usuarios y más rápido llegar a donde necesitan ir. Entonces ese es solo uno de los retos por ejemplo desarrollo de nuevas ideas en este caso, digamos, Digamos que rara vez se crean conceptos originales y a los usuarios les gustó. Pero los fundadores, por ejemplo, tuvieron esta nueva idea y realmente piensan que necesitaban en este momento. Así que tienes que desarrollarlo muy rápido e introducirlo en el diseño existente y en los conceptos existentes que a tus usuarios ya les gustaron. Entonces este es solo uno de los millones de ejemplos diferentes. Así que asegúrate de mencionar desafía tu cara, pero una vez más, sé conciso. No les hagas oral a tus espectadores, con esta parte de tu estudio de caso. A continuación, tenemos conceptos que creaste. Entonces los conceptos no son productos terminados, sino ideas y versiones de tu diseño. Los conceptos pueden ser wireframes de papel. Pueden ser wireframes. Una vez más, lo que mencioné en el video anterior, puedes mostrarlos en tu teléfono de que los estás usando, puedes mostrar a tus usuarios usándolos lo que mencioné también en el video anterior. Pueden ser wireframes de papel, wireframes, conceptos de interfaz de usuario, pero conceptos aterradores, así como interfaz de usuario, pruebas de usuario. Entonces esas son todas las cosas que puedes incluir en los conceptos que has creado y puedes dispersar estos conceptos a lo largo de tu estudio de caso. Lo que mencioné en un video anterior y lo que vamos a tocar en los siguientes videos sobre la estructura general. Muéstrales de una manera interesante, pero no lo hagas. ahí está el capítulo de resultados. Una vez más, los conceptos no son los productos terminados. Son solo ideas que has puesto en marcha. ejemplo, la estructura metálica de papel no es el producto terminado, pero el resultado es. Así que una vez más, se asegura de no exagerar con los conceptos y asegurarse mostrar de manera destacada el resultado al final porque desenlace es lo que importa al final del día y lo que todas estas semanas y meses de diseñar , probar, trabajar en ello te ha llevado al resultado de este proyecto. Así que asegúrate de que sea prominente. Al final de tu caso de estudio, tenemos pruebas de usuario, así que acertar sobre tus pruebas de usuarios y darte conocimiento sobre lo que encontraste, cómo manejan con tu concepto. ¿Qué respuesta te dieron? ¿Cómo se dividió su grupo de pruebas de usuarios? ¿A qué edad había? Cuál es su ocupación y así sucesivamente. Muestra imágenes de tus conceptos. Concepto que se está probando junto al texto para dar una mejor perspectiva a tus espectadores. Lo que quiero decir con esto es, por ejemplo puedes crear todo tipo de gráficos diferentes. Entonces, por ejemplo, puedes mostrar gráficas de usuarias versus usuarias masculinas, cuántas horas pasan probando. Encontraste que la opción uno era mejor que la opción dos, por ejemplo, y puedes mostrar todas estas cosas junto a tu texto en forma de imágenes, en forma de gráficos y gráficos, y en la forma de los iconos. Así puedes combinar todos estos elementos para realmente ayudar a contar una historia sobre pruebas de usuario y Ababa sobre cómo solucionas todos estos problemas usando tus usuarios, quienes te ayudaron a probar tus conceptos para llegar al resultado y llegar a la idea terminada. Si nunca has hecho pruebas de usuario, realmente te recomiendo que empieces a hacerlo para empezar a aprenderlo, porque realmente te va a ayudar a mejorar el resultado de tu posible solución para el sitio web de AP donde quiera que esté haciendo. Pero las pruebas de usuario son solo eso. Es solo probar cuando la aplicación o el sitio web están en vivo. Ahí es cuando van a entrar los usuarios reales. Así que esta prueba realmente te ayuda a entender antes de lanzar sobre cómo tus usuarios van a interactuar con tu diseño. Hemos diseñado el resultado, ¿verdad? Acerca de cuánto tiempo tardó, cuántas horas pasas las iteraciones por las que pasaste y así sucesivamente. Aquí es donde necesitas texto al menos porque el diseño va a hacer toda la plática, pero incluye alguna información importante e hitos de tu proyecto. Lo que quiero decir con esto es, por ejemplo proyecto me tomó seis meses completar. En estos seis meses habíamos hecho por ejemplo 20 pruebas de usuario diferentes , 40 wireframes diferentes. Contamos con 100 wireframes de papel diferentes. Bebí, no sé, 200 tazas de café y cosas así. Así que asegúrate de incluir todos estos detalles porque te van a ayudar a vender la historia a tus futuros empleadores y a futuros usuarios. Puedes incluir las horas de pruebas, número de pruebas realizadas, como dije, para llegar a este diseño así como algunas reflexiones de cierre y compañeros de equipo te ayudarán con este proyecto si hay fueron alguna. Entonces, si tuviste algún compañero trabajando contigo en este proyecto en particular, asegúrate de mencionarlos. Si no quieren mostrar sus imágenes. Una vez más, estamos volviendo a ese NDA y a todo lo de la privacidad. Entonces simplemente mencionó sus nombres y siempre puedes dejar sus perfiles de balizas. Puedes dejar los perfiles de regate, perfil de LinkedIn, cosas así. Y si eres la parte clave de este equipo, por ejemplo, si eres un fundador de equipo, si eres el CEO de tu propia empresa, por ejemplo, asegúrate de mostrarte más prominente que todas estas otras personas porque las personas que te están contratando como agencia, por ejemplo van a querer ver quien es el chico o chica principal en esta empresa. Entonces van a querer ver quién está detrás de esta operación. Y si te pones algo por encima de esta gente, no como aquí, yo soy así y estas personas no son así. No. Pero si esas personas son así, asegúrate de hacerte así o simplemente posicionarte por encima de ellas solo para mostrarte a tus futuros empleados. Sí, soy la persona que está dirigiendo este programa y deberías contactarme para, por ejemplo, hablar sobre tu futuro proyecto. Entonces esta es solo mi estructura. Esta es la estructura que encontré que funcionó a lo largo de los años, no solo para mí, sino para mucha gente de la industria, especialmente grandes marcas y grandes diseñadores. Entonces, una vez más, no todos los elementos de esta estructura van a funcionar todo el tiempo en cada proyecto. Pero la mayoría de estos elementos van a funcionar bien. Así que asegúrate de explorarlos y utilizarlos sabiamente. Porque una vez más, hay ahí solo para ayudarte a contar una historia y solo para ayudarte a formar la opinión oral de tu proyecto, de tu flujo de trabajo y de ti mismo como diseñador a Nuevo Estudio de caso de York, cuando tienes todos tus elementos estructurados de tal manera que los usuarios puedan seguir fácilmente. 199. Impresionantes ejemplos de estudio de casos: En este video, voy a mostrar algunos ejemplos increíbles de fines de semana que se encuentran en línea. Hay miles de ejemplos diferentes los fines de semana, especialmente para que puedas navegar por ellos y también puedes mirar algunos otros sitios web. Puedes mirar sitios web personales de los creadores que admiras para buscar sus estudios de caso y entender cómo los están haciendo. Y asegúrate de entender que ni un solo estudio de caso es lo mismo que los otros estudios de caso. Ni siquiera por el mismo diseñador, porque cada caso de estudio cuenta una historia diferente. Le dice diferentes partes a ese proyecto final y realmente muestra un diseño diferente. Entonces aquí están solo algunas de las más recientes que encontré. Pero, por supuesto, puedes saltar aquí y buscar, por ejemplo , UI, estudio de caso UX y va a escupir miles de estudios de casos diferentes. Y por supuesto puedes explorarlos y ver cómo se crean. Entonces, lo que tenemos aquí mismo es este concepto de aplicación para compartir autos, y esto es lo que mencioné en el video anterior. Asegúrese de incluir algún tipo de imagen de portada es solo para que sus usuarios la entiendan bien. Y por supuesto puedes saltar a aquí futuro en UI UX, y luego te van a mostrar el mejor trabajo en Behance, que es impartido por el equipo de fines de semana. Así que una vez más, en el concepto de app de costo compartido, puedes ver que nos debes 2021 en cualquier momento de papel y quién lo diseñó y alguien. Entonces estamos empezando con una imagen de un auto y no voy a entrar en demasiados detalles sobre todos estos porque este video va a tener 3 h de largo. Sólo voy a saltar entre ellos, pero solo asegúrate de prestar atención a todos estos elementos que mencionamos anteriormente en esta clase. El proyecto. ¿Cuál era el objetivo del proyecto? ¿Flujo de usuarios? Entonces, cómo van a fluir los usuarios a través de tu app, colores y fuentes. Entonces no tienen ese sistema de diseño que mencioné. Tienen estos colores y fuentes, lo cual también está bien. Simplemente estás demostrando a tus empleados potenciales cómo lo creaste. Tenemos prototipos, pantallas, así que saltaron directamente a wireframes en el dispositivo. Lo que tenemos aquí mismo es una suerte de video. Entonces tenemos una pantalla de carga. Esto es lo que mencioné. Tenemos pantalla de inicio de sesión, así que toda la navegación aquí mismo. Y puedes ver de inmediato que esto realmente parece un wireframe. Y creo que este es su producto terminado, pero por supuesto puedes hacerlo también en etapas de wireframe. Y tenemos producto terminado aquí, como ves. Entonces este era el wireframe después de todo. Entonces tenemos el producto terminado y tenemos estas maquetas en perspectiva lo que mencioné, tenemos estas maquetas de modo oscuro y tenemos tanques al final. Para que puedas vincular tu regate de Instagram en Telegram o lo que quieras aquí mismo, tu propia página web personal. Y por supuesto, dale tu agradecimiento a estos diseñadores una vez que te desplazas por todo el camino hacia abajo. Y esto es lo que mencioné sobre ti, tus compañeros de equipo, o lo que quieras incluir al final. Entonces puedes hacerlo en nombre, por supuesto en tu propio sitio web también. Contamos con tenedor, por lo que desarrollo de una aplicación de alimentos saludables. Y puedo vincular todos estos en el PDF y de hecho nuestra voluntad. puedas consultar el PDF que se adjunta a esta clase, y simplemente puedes hacer clic en estos enlaces para acceder a estas presentaciones para que no tengas que explorarlos. Puedes verlo por ti mismo inmediato y luego simplemente puedes saltar a los perfiles de estos creadores. Y por supuesto se puede ver que tienen muchos más en cada uno de sus perfiles. Entonces solo el único atajo para ti ahí mismo. Entonces lo que tenemos una vez más son estas maquetas en perspectiva, qué se trata el proyecto, ¿cuáles son los objetivos? Para que pueda ver alcances de trabajo. ¿Qué hizo exactamente este diseñador? ¿Encontrando la solución óptima? Entonces investigación que le habían hecho a la competencia. Entonces tenemos nuestro flujo aquí mismo. Entonces, de la idea a la creación de hipótesis hasta la investigación de prototipos. Entonces ninguno de estos pasos es lo que te importa como diseñador porque estos pasos van a cambiar de proyecto en proyecto. Entonces a veces vas a tener creación de hipótesis, a veces no lo eres. A veces vas a tener que investigar. Otras veces los clientes han hecho investigaciones para usted, prototipado e investigación una vez más sistema de diseño. Entonces no todos estos son, es lo que hay que incluir. Una vez más, van a variar de un proyecto a otro para la verificación de hipótesis. Entonces tenemos eso aquí mismo. Tenemos maquetas 3D aquí. Así que sólo un especiado aquí y allá. Lo que mencioné anteriormente no abruma a sus televidentes. Tenemos el producto terminado aquí mismo con todos estos elementos de fondo, imágenes de fondo. Para que puedas ver el chorrito de leche y todas estas plantas aquí mismo en la vanguardia, podemos ver a persona sosteniendo la maqueta. Entonces todos estos elementos mencionados, que mencioné anteriormente en lecciones anteriores. Tenemos estas maquetas 3D y todos estos elementos saltando afuera para mostrar que hay más elementos en estas páginas. Tenemos imágenes que corresponden bien con texto. Para que puedas ver estadísticas y perfil, embudo de ventas adicional. Para que puedas ver todos estos detalles. Reembolso de efectivo hasta el 20 por ciento. Entonces todos estos pequeños detalles es lo que ayuda a vender una historia a los espectadores potenciales. Una vez más, haga clic en agradecimiento porque realmente lo apreciamos. Contamos con una página de préstamo de estudio, diseño web y desarrollo web. Y puedes ver a estos dos diseñadores. Entonces esto es lo que mencioné. Si tienes un estudio puedes tener varios propietarios. En tu página de balizas. El sitio web fue construido usando tilda y modificación de código, análisis de la competencia, y podemos ver esta bonita estructura. Entonces beneficios de introducción, servicios de trabajo, trabajo en progreso. Acerca de Nosotros. Entonces todos estos, tenemos la tipografía aquí mismo. Voy a desplazarme un poco más rápido porque puedes ver cuánto dura este sitio web. Tenemos esta animación de aspecto increíble. Y yo diría de estas maquetas es que son realmente una gran idea porque no lo hacen. La edad es solo una pantalla básica. No está mostrando parte específica. Y esto es lo que veo todo el tiempo. Los diseñadores están usando iPhones, que son generaciones mayores. Yo también lo hice por mis productos. Y eso lo vas a ver en un futuro video. Pero asegúrate si estás usando estas maquetas para usar maquetas que no tienen rostro, básicamente, no puedes decir qué dispositivo es este, qué tamaño es este. Y siempre va a mantenerse encaminado. Y básicamente, porque no va a mostrar los elementos de un determinado dispositivo. Si nos desplazamos todo el camino hacia abajo, puedes ver más ejemplos. puede ver cómo se ve en un teléfono y en un escritorio. Versiones en inglés y ruso, podemos ver la cuadrícula aquí mismo, que por supuesto es una animación de desplazamiento importante, lo cual es fantástico. Se pueden ver estos elementos saltando fuera de las tabletas iniciales mostrando también la página. Y gracias por ver. Entonces aquí tienes aprecio. Tenemos sitios web de concesionarios de automóviles, que se muestran en el futuro en XD y futuro en UI UX. Así que una vez más, asegúrate de comprobarlo y podrás ver a varios propietarios. Entonces tenemos a cuatro personas aquí mismo. Así sitios web de concesionarios de autos para Mercedes Benz, Ucrania resumen. Por lo que querían crear un sitio web nuevo y más eficiente para reemplazar a los antiguos. Tan excelente breve, y mostrar el problema oral que tienen. El sitio web anterior se basó en la plantilla oficial de Benz y resultó en una baja usabilidad para las tasas de conversión y la falta de función necesaria. Entonces este es el problema que resuelves enseguida en la parte superior. Entonces por eso dije que no pierdas demasiado tiempo, simplemente ve al grano. Por qué rediseñar el sitio web antiguo. Entonces este es el problema que resolvieron los objetivos del proyecto. Para que puedas seguir adelante. Una vez más, voy a dejar los enlaces en el PDF para que puedas leer todo sobre estos detalles. Podemos ver imágenes agradables experimentar lo que es sentarse al volante. Entonces estos son los problemas que resolvieron. Entonces, cuando quieres programar una prueba de manejo, por ejemplo, simplemente caminar o conducir, qué fácil es reservarlo en tu teléfono. Una vez más, imágenes para complementar lo que estás hablando. Fácil configuración de prueba de manejo. Para que veas que están comercializando a gente más joven en este caso. Entonces, la búsqueda filtra cómo resuelven eso. Y podemos desplazarnos un poco más hacia abajo. Pagos automáticos, solo API, préstamo directo a los clientes. Puedes ver esta agradable animación de todas estas diferentes pantallas desde el catálogo PDF hasta la tienda en línea. Este es el problema también porque la mayoría de estos, especialmente los fabricantes de automóviles heredados, por lo que todos los fabricantes de automóviles están enviando sus catálogos en PDF y luego tiene que hacer clic los enlaces en el Teteras PDF para llegar a la tienda en línea, lo cual es ridículo en la época actual, simplemente lanzan una tienda en línea en primer lugar. Pero te sorprendería saber cuántas de estas compañías más antiguas siguen haciendo esto. Funciones y funciones de control total. Se puede ver la grilla de inmediato. Detalles como márgenes, canalones, columnas, etc., fuentes y colores. Tenemos esta linda presentación aquí mismo, que está en la marca, que es lo que mencioné anteriormente. No ves el color amarillo aquí, por ejemplo, porque el amarillo no se ve en ninguna parte en las fuentes y colores originales, por ejemplo así que no lo uses aquí también. Te lo agradezco. Y finalmente, tenemos este Mother Care, y aparece en una UI UX. Así que el mayor integrador de soluciones digitales en Moscú. Así podemos ver aquí mismo los colores. Ellos usaron. Es un minorista del Reino Unido que se especializa en maternidad en productos generales para niños menores de ocho años. Eso es. No hay que entrar en demasiados detalles sobre lo que hacen. Si las personas realmente quieren aprender sobre lo que hacen, también pueden hacer clic en el enlace y acceder a la empresa. Así que tenemos tienda online, cómo se ve en todo el negocio global, Ahora hay más de 100 tiendas para el territorio, lo cual es genial. Entonces app y me gustan mucho estos pequeños fragmentos de textos. diseño de la aplicación se realiza en un estilo ligero y moderno, lo que realmente demuestra, se muestra a los líderes de proyectos y directores de arte de inmediato. Pero alguien que esté buscando, que probablemente esté en este nicho, no va a saber cuál es el estilo moderno de enlight. Simplemente les gusta el mirador, pero no saben qué estilo es ese. Y esto realmente les ayuda. Si se ponen en contacto contigo para un proyecto como este, pueden hacer referencia a estos textos. Por ejemplo, realmente quiero que crees esta app para mí en un estilo aligerado y moderno como hiciste para esta marca. Por lo que realmente ayuda contar una historia a tus usuarios y realmente ayuda con la conversación posterior. Entonces tenemos íconos aquí. Quizás alguien no va a saber que estas no son ilustraciones. Estos son iconos en 3D. Es realmente fácil de leer y entender. Tenemos segunda pantalla web, mucho aire y estructura de página clara. Una vez más, el texto ayuda a vender una historia y estos elementos de fondo como este color aquí mismo y estos números aquí realmente ayudan a contar una historia también. Me gustaron mucho estos textos, fragmentos. Creo que hacen un muy buen trabajo. Versión tan oscura con el fondo oscuro, con las maquetas oscuras en su interior, se puede ver el espaciado, qué tan bien le va. Entonces creo que esto es algo así como 300 píxeles o algo así, tal vez incluso un poco más en el espaciado. Y puedes ver un espaciado consistente a lo largo de todos estos detalles de fondo. Prestando atención a los colores. Los colores que utilizan están a lo largo de la presentación. Realmente no hay colores forasteros. Se puede ver esto saliendo de la maqueta. Una vez más, esto realmente complementa, bueno de lo que estás hablando. Me gustan mucho estos colores. Me gusta mucho cómo cuentan una historia y cómo están conectadas las pantallas. Entonces tal vez vamos a partir de aquí, luego vamos a escuchar, luego vamos a escuchar de ahí, vamos a escuchar. Entonces me gusta mucho este equipo de proyecto de estilo de recorrido. Esto es lo que mencioné. Para que puedas tenerte como líder de proyecto aquí mismo en la parte superior. Así que jefe de UX. Y luego puedes enumerar a todos tus compañeros por debajo de ti. Si eres una vez más, la característica clave y miembro clave de este equipo aquí para apreciar. Y puedes ver el mayor integrador de soluciones digitales en Moscú, lo cual es genial para nuestro tagline, para tu empresa. Entonces, una vez más, estos son solo algunos de mis ejemplos que encontré hace poco. Pero como mencioné, hay millones de ejemplos diferentes los fines de semana. Especialmente una vez más, me gustan mucho las balizas para estudios de caso porque realmente te ayuda a entender todos estos detalles que mencionamos a lo largo de esta clase. Y ojalá hayas visto en estos ejemplos, una vez más, los ejemplos que se muestran aquí mismo van a ser enlazados en el PDF. Simplemente puedes hacer clic en estos enlaces en un PDF y acceder a ellos fácilmente y simplemente recorrerlo una vez más conmigo con este video sobre lo que mencionamos en esta clase para ayudarte de verdad Entiende todos estos elementos que necesitas incluir. Una vez más, asegúrate de entender. Una vez más, el enorme estudio de caso es diferente. Cada proyecto es diferente, así que no todos los proyectos, y espero que los hayas visto en este video, estos son todos estudios de caso, pero todos ellos son teorías completamente diferentes, elementos diferentes, hay diferente espaciamiento. Usan diferentes ritmos, usan diferentes colores y fuentes e iconografía y cosas así. Entonces, una vez más, todos usan la misma estructura de los elementos que mencioné, pero no todos siguen exactamente la misma estructura. Lo hacen de diferentes maneras, pero ayudan a contar una historia que es el objetivo final aquí mismo, es ayudar a tus usuarios y a tus espectadores a entender cuál fue tu papel en esto proyecto y cuáles son algunos pasos que tomaste para llegar al resultado final. 200. Redacción de contenido: Cuando estés escribiendo el texto para incluir en tus estudios de caso, asegúrate de escribir en un idioma que tus usuarios vayan a entender. Una vez más, lo que estamos volviendo a lo que dije al inicio de esta clase. No uses el lenguaje que es demasiado complicado, que no habla con tu público objetivo. Asegúrate de hablar con ellos como con un amigo. Si ese es el tono al que quieres ir. Si eso es una tonelada más corporativa, tono más serio, está bien. Pero si esos son tus usuarios, si tus usuarios van a entender lo que estás diciendo en el lenguaje muy básico, ya sea realmente casual o profesional no importa realmente. Lo que importa al final es que entiendan lo que intentas decirles. Entonces si te llevo de vuelta muy rápido a este ejemplo que mencioné en el video anterior. Para que pueda ver este texto. Así que configurando una recomendación personalizada para entregar las mejores ofertas de productos. Como pueden ver, no mencionan aquí mismo. Entonces, por ejemplo, I. Usé XD para crear dos pilas para asegurarse que el botón derecho sea más grande y simplemente entrar en demasiados detalles innecesarios complicados. Lo que dijeron es establecer una recomendación personal para entregar las mejores ofertas de productos. Entonces, cuando estés creando tu texto, asegúrate de prestar atención a detalles como esas mezclas para ser cortos, concisos, ir al grano y simplemente hacer que tu diseño hable. Ese es el objetivo del estudio de caso de los diseñadores es mostrar tu diseño, no mostrar tus habilidades de escritura o mostrar tus habilidades de presentación, que van a venir a través de los años de trabajo. Así que no vas a poder crear presentaciones de tan alto nivel como estas rectas al principio. Pero con el tiempo, sobre la práctica, sobre los proyectos, vas a ser mejor en ello. Y entonces vas a llegar al nivel de estas presentaciones que te mostré anteriormente, por ejemplo, un nivel aún más alto. Una vez más, al final de este video, asegúrate de mantenerlo conciso. Asegúrate de hablar en un idioma tus usuarios y tus espectadores van a entender. Así que asegúrate de dirigirlo y hablar con los espectadores y usuarios que van a entender y quiénes son tu público objetivo porque estás tratando de ser contratado o estás tratando de presumir a sus colegas diseñadores, que es su público objetivo y luego hablar en ese idioma. 201. Consejos de presentación: En esta lección, te voy a dar algunos consejos de presentación dependiendo de lo que estés presentando. Así que saltemos enseguida. Este es uno de nuestros productos. Se llama flujo de alambre, diagramas de flujo, y se puede encontrar en una red de donantes web dotnet. Voy a dejar el enlace en el PDF y puedes acceder a él. Y por supuesto puedes obtener todos mis cursos, todos mis productos digitales en mi membresía. Voy a dejar el enlace a eso también. Si te interesa. Puedes hacer clic en su articulación y luego obtener acceso a cada cosa que he creado alguna vez. Entonces aquí tenemos gráficos de gofres, que es solo uno de nuestros productos. Y quería mostrar esto porque es un poco diferente a tu clásico estudio de caso. Sin embargo, este es el estudio de caso, pero es un estudio de caso para un producto digital. Así lo hace la historia diferente. Realmente no muestra todos esos detalles. Entonces tenemos 200 pantallas, 200 elementos, dos papeles, y tenemos versiones claras y oscuras. Entonces tienes un pequeño fragmento de texto aquí mismo, pero estoy tratando de mostrar aquí mismo, así como versiones claras y oscuras. Y estoy mostrando esto aquí mismo, así que solo estoy tratando de vender el producto en general también. Entonces, si nos desplazamos hacia abajo, puedes ver el botón Comprar Ahora aquí mismo, para que puedas comprar de inmediato. Pero estoy tratando de vender la historia oral del producto en sí. Así que las versiones claras y oscuras, si nos desplazamos hacia abajo, tenemos componentes adaptativos. Componentes que son inter, interactuando entre sí y cambiando de lugar, cambiando elementos. Entonces, ¿qué incluye? Estoy tratando de demostrar que hay 400 componentes en web y móvil en tres formatos de archivo. Así que Photoshop, Sketch y XD sean componentes tan perfectos, capas súper organizadas gratis Google Fonts para diseños de papel, video tutorial incluido para ayudarte a comenzar. Entonces solo este solo nos ayudó a vender decenas de copias de este producto porque muchos de estos diseñadores principiantes realmente no saben para qué sirve esto. Realmente no sé para qué usarlo, el comprarlo. Y cuando vieron el video tutorial, simplemente quedan impresionados. Recibí muchos correos electrónicos diferentes a lo largo los años sobre cómo los tutoriales en video realmente ayudan a mis compradores a entender cómo usar mis productos, mejorar la experiencia de usuario de tu proyecto. Entonces es por eso que vas a usar estos diagramas de flujo. Al crear diagramas de flujo y planificar con anticipación, puede ahorrar mucho tiempo en las últimas etapas del proyecto y tanto para usted como para sus clientes, reduciendo el tiempo que usaría para wireframes y más tarde para UI. Entonces explica para qué sirve el proyecto, para qué sirve el producto de inmediato. Y realmente ayuda a vender historia porque puedes ver todos estos diferentes elementos combinados juntos haciendo estas pantallas. Por lo que realmente ayuda a los usuarios a entender cómo pueden posiblemente usar este producto si lo compran. Estructura de capas organizada. Así que estoy compartiendo todas estas capturas de pantalla aquí mismo. Y si no ves esto correctamente, puedo acercarme mucho más. Entonces puedes ver Photoshop, puedes ver boceto, y puedes ver x D, aquí mismo. Se puede ver esta estructura de archivos organizada. Así que diagramas de flujo de cualquier complejidad. Así podrás combinar y conectar todos estos diagramas de flujo de diferentes maneras. Listo para imprimir. Así que solo estoy mostrando un tamaño carta estadounidense y una impresión A4 lista para que puedas imprimir estos cuatro gráficos si necesitas mostrarlos en persona a tus clientes o tus compañeros de equipo. Variaciones ilimitadas. Así que solo estoy mostrando un montón de diferentes variaciones aquí mismo, para que puedas combinarlas como quieras. Y luego estoy mostrando este icono, ofrezco laptop, y estoy mostrando Web Elements, light, que son estos elementos ligeros, 200 elementos ligeros para diagramas de flujo del sitio web. Y estoy empezando por la categoría de encabezados. Para que puedas ver cómo el texto realmente está ayudando a celular la historia oral y el producto en este caso, combinándolo con imágenes. Entonces esto es lo que me estaba diciendo. No estoy diciendo una diapositiva de Web Elements. Entonces por ejemplo no estoy diciendo aquí, todos tienen fondo blanco para ayudar a que tus elementos se destaquen entre la multitud. Porque va a ayudar a tus usuarios con discapacidad visual entender mejor el producto. No estoy viendo nada de eso. Elementos Fab encienden 200 elementos ligeros para diagrama de flujo del sitio web para que los usuarios puedan entender, Oh, esto no es para móvil, esto es para sitio web y categoría para encabezados. Se puede ver el contenido, deslizadores, cartera de futuros y así sucesivamente y así sucesivamente. Y si nos desplazamos aún más hacia abajo, tenemos elementos móviles ligeros, para que los usuarios puedan decir entonces, bien, entonces esto es para móviles también. Impresionante. Entonces tengo 200 aquí, 200 allá, genial. Entonces tenemos categorías de inicio de sesión y así sucesivamente. Y luego cuando se desplazan todo el camino hacia abajo hasta aquí. Como puedes ver, la presentación es extremadamente larga porque hay decenas de elementos diferentes. Elementos web oscuros. Entonces, bien, así puedo combinar un claro y oscuro o puedo usar claro u oscuro de inmediato. Impresionante. Para que no tenga que perder tiempo creando estos elementos claros u oscuros más tarde. ¿Cuál es el objetivo de esta presentación en primer lugar? Es un poco más lento de cargar porque es enorme. ¿Puedes ver cuánto tiempo estoy desplazándome? Y esto es lo que intentaba decirte en las lecciones anteriores. Imprime tus diagramas de flujo web y muéstralos a tu equipo o clientes y resuelve el diseño con ellos. Y puedes ver esta imagen aquí mismo de los diagramas de flujo. Se están tomando notas impresas. La colaboración está sucediendo aquí mismo, o puede imprimir sus diagramas de flujo móviles y mostrarlos a un equipo o los clientes están resueltos el diseño con ellos. Entonces aquí tenemos el celular, tenemos lo mismo, tenemos la banda, tenemos todos estos detalles. Y seguí adelante y cerré estas imágenes. En primer lugar, combino mis diagramas de flujo, los imprimo. Me tomé el tiempo para hacer algunos de estos cambios, para hacer algunos de estos bocetos. Y luego me tomé el tiempo para organizar todos estos elementos y tomar una foto porque esto realmente ayuda a contar una historia a mis usuarios y compradores potenciales de este producto. Porque realmente les ayuda a entender un poco mejor en cuanto a cómo pueden usarlos. Para acercar todo el camino. Puedes ver que baja, desliza hacia arriba. Ya ves que no, así que no vayas aquí. Y puedes ver todos estos elementos en ambos diagramas de flujo. Y finalmente, al final, lo que quería mostrarles es esto. Así que desplázate hacia arriba solo un poco aquí. Puede leer Love by web donut para ayudarte a crear diseños dulces. Así que solo un pequeño lenglón abajo en la parte inferior. Y en mi página web puedes ver que tenemos múltiples productos diferentes de la misma categoría y haz clic en ver más productos para ver todos estos otros productos de la misma categoría o diferentes categorías. Pero si empiezo mi primer pergamino, puedes ver cuánto tiempo va a llevar esto para llegar a la cima. Entonces es extremadamente largo y no se carga en tiempo real, pero puedes hacerte la foto. Dejaré el enlace en el PDF, como dije, para que puedas acceder a este producto solo para explorarlo, para ver esta presentación. Pero este es el caso de estudio. Sin embargo, el estudio de caso puede ser venderte como diseñador, vender tu servicio o vender tu producto. Este es el caso de estudio del producto. En este caso, y por supuesto lo he hecho para todos nuestros productos. Entonces va a ser un poco diferente de un producto a dependiendo de qué tan grande sea, qué hace, cuál es su público objetivo y cosas así. Pero el objetivo de este video es ayudarte a entender que el estudio de caso realmente está ahí para ayudarte a vender algo. Ya sea usted mismo como diseñador, para que alguien más lo contrate, ya sea un producto como en este caso, ya sea un servicio que está brindando como el diseño de sitios web, diseño de aplicaciones y cosas así. Siempre asegúrate de hablar con tus usuarios, hablar con tus espectadores y de ayudarles realmente a entender de qué se trata. Su caso de estudio, como mencioné varias veces, puede ser sobre el servicio, sobre el producto o usted mismo. Entonces te estás vendiendo como diseñador que está trayendo este paquete. Así que asegúrate de estar sobre eso. asegura de contar una historia y asegurarse ser lo más fácil de entender posible. Porque no todos, nuestros diseñadores, no todos son expertos y no todos los clientes son iguales. Algunos clientes van a entender. Sí. Bien. Sé lo que es Adobe XD, por ejemplo, cuáles son nuestras pilas, qué son las capas, pero otros clientes no van a saber nada al respecto. La mayoría de los clientes por ahí ni siquiera poseen una computadora, lo creas o no. Entonces están haciendo todo su trabajo en su teléfono o en su tableta. Y la aplicación de escritorio, que está disponible en computadora de escritorio, no les va a sonar familiar porque no tienen una computadora de escritorio en absoluto. Así que solo asegúrate de prestar atención a todas estas cosas y tu estudio de caso se va a convertir como loco. 202. ASIGNACIÓN de la SECCIÓN 18: Tu tarea para esta sección es usar cualquiera de tus diseños, simplemente no de esta clase porque todos van a crear diseños de esta clase en ese caso. Entonces realmente te insto a crear tu propio diseño personalizado y recién presentado en tu caso de estudio, si no tienes un sitio web, está completamente bien. Como acabo de mencionar, se pueden utilizar balizas. Es una herramienta fantástica para crear estos estudios de casos de foros largos y puedes publicarlos para que todos los demás los vean. Entonces una vez que realmente te acercas a los clientes o quieres que los clientes se acerquen, tú, puedes señalarlos al estudio de caso y solo para mostrarles tu forma de pensar y tu forma de resolver diferentes problemas. 203. SECCIÓN 19 Encontrar un trabajo: En esta última sección del curso, vamos a hablar sobre diferentes lugares donde puedes encontrar un trabajo UI UX, y diferentes plataformas que puedes usar para hacerlo. Así que comencemos. 204. Agencia de VS: Cuando estás buscando un trabajo, primero tienes que entender las diferencias entre trabajar como freelancer versus trabajar en una agencia. Obviamente, cuando trabajas dentro de una agencia, las personas que trabajan en esa agencia tienen puesto de trabajo dedicado para encontrarte qué hacer, para encontrar nuevas tus tareas diarias, para pagarte tu salario mensual, y para cubrir todos los gastos que pueda tener, por ejemplo, alimentos, facturas de luz, facturas de Internet y mucho más. También en la mayoría de estos lugares, vas a conseguir tu propio equipo. Si no tienes tu propia computadora, por ejemplo, obtendrás una allí una vez que realmente empieces a trabajar versus lo que tengas en este momento como freelancer, vas a comenzar a usarlo. Pero sin embargo, cuando trabajas como freelancer, obviamente tienes mucha más libertad para trabajar donde quieras, para hacer lo que quieras. Y dos, por ejemplo, si funciona mejor para tu horario y para tu vida, porque no todos son iguales. Se puede trabajar ya sea por la mañana o por la noche porque a algunas personas, especialmente a las personas con familias, les gusta trabajar más por las tardes, porque eso les da algo de libertad adicional porque los niños necesitan ser puestos a dormir, por ejemplo, o tienes mucho más tiempo libre por las noches en lugar de hacer el día. otras personas les gusta trabajar realmente, muy temprano en la mañana, terminaron sus tareas en ese momento porque es lo que les conviene. Entonces todo el mundo es diferente en ese sentido. Pero sin embargo, lo que sea que elijas, lo que decidas hacer, realmente todo depende de ti. Una cosa que debes recordar y tomar de esta clase es que puedes hacer ambas cosas. Puedes ser contratado en una agencia y trabajar como freelancer al mismo tiempo. O puedes comenzar como freelancer y luego pasar a la agencia o viceversa. O como dije, puedes trabajar ambos al mismo tiempo. Realmente todo depende de ti también en el auge de los acontecimientos actuales en los últimos años. Y hay posiciones mucho más remotas que se abren todo el mundo y mucho más y más empresas cerveceras se están moviendo hacia el trabajo remoto porque encontraron que sus gastos son mucho menores porque no tienen que mantener a toda la compañía en todo el personal del edificio. No tienen que pagar por edificios enormes, enormes oficiales en todas estas facturas. Así que para gran número de empresas y sólo va a crecer año por aquí. Es mucho más beneficioso para ti como trabajador trabajar de forma remota de cualquier manera. Entonces, o estás trabajando para una agencia o como freelancer, hay muchas posibilidades de que encuentres un puesto freelance o de tiempo completo para ser removido. 205. Concursos de diseño: Una gran opción, especialmente para principiantes, es participar en concursos de diseño. Y estos contextos pueden ser ya sea para pequeñas empresas o para grandes marcas globales. Y hay una clara distinción entre ambos. Y en este video, te voy a mostrar algunos sitios web donde puedes intentar participar en estos concursos y construir tu confianza como diseñador. Desarrolla tus habilidades para hablar con los clientes, entender el brief como diseñador y también construir tu portafolio como diseñador. Recuerda que voy a dejar los enlaces en un PDF para todo lo que haya hablado en esta sección del curso. Asegúrate de revisar ese Ensamblaje PDF. Haga clic en esos enlaces para que pueda acceder fácilmente a todos estos sitios web y probarlos usted mismo. Entonces el primer sitio web que tenemos aquí mismo es 99 designs.com. Es un sitio web muy conocido desde hace años. Y como funciona esto es simplemente puedes navegar por los concursos y funciona casi exactamente igual. Así que vamos a navegar por los concursos, por ejemplo, y vamos a encontrar todas las categorías pueden ser diseño web y aplicaciones, y todas las subcategorías pueden ser diseño de páginas web o diseñador de WordPress o algo así. Y puedes ver aquí mismo, así que este es el precio que vas a conseguir si ganas este concurso. Este es el tiempo que tienes para participar en este contexto, y este es el número de diseños que ya hay en estos contextos. Un consejo que puedo darte sobre no solo 99 diseños, sino sitios web de este tipo es si puedes buscar clientes que den feedback, de clientes que no dan feedback suelen esperar hasta el último minuto porque obviamente están ocupados con su trabajo, y luego solo proporcionan algunos comentarios aleatorios. Eso no quieres. Quieres clientes que busquen activamente y brinden comentarios. Y luego una vez que realmente ganes uno de estos concursos, vas a platicar con ellos sobre cómo construir su sitio web en Webflow y mostrarles cómo alojarlo en Webflow. Todo de lo que hemos hablado en el curso hasta el momento. Pero lo que es crucial aquí es que los vas a ganar con tu diseño y luego repasar y hacer la transición a Webflow, que obviamente vas a cobrar un futuro más adelante por la deuda servicio adicional, pero 900 diseños, asegúrese de comprobarlo. Hay varias categorías diferentes aquí mismo y aquí mismo con las subcategorías que incluso puedes elegir por industria, puedes mostrar filtros aquí mismo. Entonces todas estas cosas, así que asegúrate de comprobarlo, crea tu cuenta. Y la misma historia es para el público del diseño, que es un sitio web que es un poco menos conocido que 99 diseños, pero sin embargo, también puedes encontrar algunos clientes allí. Lo clave que debes recordar acerca de 99 diseños y multitud de diseños es que estos son para los contextos más pequeños, pero esto significa que generalmente estos son los negocios donde están los precios, por ejemplo, I. No sé, de 1.500 a mil dólares, algo así, que suena genial. Pero también puedes encontrar algunos otros negocios y algunos otros concursos para ampliar marcas globales como por ejemplo si vas a sitios web como tu agua, que es la plataforma de innovación de marketing en realidad. Y se puede ver todo sobre la comunidad en los proyectos y algo así. Entonces lo que hacen es crear estos concursos para grandes marcas globales. Para que puedas ver como Coca-Cola, Deutsche Bank, Mealer, Henkel, todas estas marcas. Básicamente cómo funciona es que exploras, te conectas, para que puedas construir el proyecto, luego puedes crear y evaluar. Entonces así es como realmente funciona para las marcas, pero para ti, vas a conseguir que el proyecto era realmente registrarte para obtener una cuenta gratis aquí. Vas a recibir los proyectos vía correo electrónico y luego podrás participar en estos proyectos son muy parecidos con la multitud de diseños nonane y diseño, pero en tu casa de agua y talento, que es el siguiente sitio web que quería mostrarles. Estas pueden ser marcas realmente grandes. Entonces por ejemplo hace unos meses, recibí el correo electrónico de una campaña que Mercedes-Benz hizo con, creo, talent house, creo. Y estaban eligiendo 50 diseñadores diferentes para darles premios, que iban desde algo así como 2.000€ hasta 10.000€ o algo así. Y creo que el precio principal era incluso un auto. Entonces esto puede ser enorme, no solo por el dinero, no solo por el precio en sí, sino por las conexiones que puedes conseguir con estas marcas. Y solo imagínese si está trabajando con una marca, digamos la pequeña panadería de mamá o lo que sea, y Mercedes Benz, ¿cuál es mejor poner en su cartera? Sólo piénsalo. Así que no solo pienses en el precio inmediato, sino en el impacto que ese concurso va a tener hacia tu carrera más adelante en el futuro. Entonces una vez más, su casa de agua y talento, dejaré los enlaces en un PDF. Asegúrate de echarles un vistazo. Puedes ver los calzoncillos aquí mismo. Así que echemos un vistazo a un breve creativo. Para que puedas ver el pavo real aquí mismo. Motor irreal. Esto es para una de las películas, creo. Sí. Para que puedas ver todo tipo de marcas diferentes aquí mismo. A nivel nacional, Seguridad de Edificios, Absolut Vodka, una marca enorme. Una vez más, Downton Abbey, que fue el programa de televisión, Seinfeld. Entonces todo tipo de diferentes grandes marcas están aquí y tienen unos calzoncillos creativos decentes. Obviamente, se puede ver convocatoria para presentaciones. Puede enviar su periodo de selección. Ahí es cuando el cliente ya ha elegido esto para CLEA, por ejemplo ya ha elegido las presentaciones ganadoras y luego va a la ronda final o simplemente elige ese selector final, selección final, y solo hazlos ganadores y dales todos los precios. Así que asegúrate de echarle un vistazo. Como dije, ten paciencia con estos sitios web porque la mayoría de las veces no vas a ganar nada. Pero puede verse así, pero en realidad vas a ganar mucha experiencia y muchas habilidades blandas que no vas a aprender en ningún otro lado. Tienes que tratar con clientes para que entiendas estas habilidades blandas y para que las puedas aplicar en tu futuro trabajo. 206. Plataformas de concierto: Otra opción que podría funcionar para ti son las plataformas de conciertos. Y estas plataformas son básicamente proyectos más pequeños en estas plataformas, que varios diseñadores mordieron. El más conocido es Upwork. Y probablemente escuchaste sobre Upwork. Aquí es donde creas tu portafolio y donde puedes enviar todas estas propuestas a tus clientes. Así podrás encontrar diseño y creatividad. Podemos ir a buscar trabajo e incluso puedes mejorar tus habilidades aquí mismo. Entonces, básicamente, cómo funciona es un cliente publique o diseño breve y varios diseñadores diferentes básicamente pujan por ese brief y por ese trabajo. Cómo vas a poder ganar eso es explorar otros tutoriales y blogs en línea porque hay un arte puro al respecto. Cómo puede abordarlo para que sea más comparable con otros clientes, por ejemplo y con otros diseñadores. Así que recomendaría encarecidamente Upwork, especialmente si recién estás comenzando y cuando lo haces como bolas de nieve en él por igual. Cuando recién estás comenzando, va a ser difícil encontrar un cliente. Pero cuando encuentres al cliente, él es él o ella te va a dejar una reseña. Esa revisión te va a ayudar en el paso de la línea para conseguir más clientes así que solo entra en vigor las bolas de nieve. No te rindas. Si no consigues un trabajo de inmediato, solo sigue enviando, sigue intentándolo, asegúrate de seguir todas las reglas y pautas. Porque escuché tantas historias de terror donde los diseñadores de la banda porque intentaron engañar al sistema y obligar a la gente a darles trabajo y cosas así. Entonces no hagas eso. Asegúrate de ser lo preciso posible siguiendo las reglas. Por lo tanto, vas a conseguir el trabajo mucho más rápido. Siguiente plataforma es freelancer, que está haciendo exactamente lo mismo. Así que asegúrate de golpear aquí mismo para buscar empleos. Y como dije, voy a dejar el enlace en el PDF, gente por hora, exactamente la misma historia. Así que asegúrate de explorar los tres y ver cuál funciona para ti. Tal vez puedas probar los tres y ver de dónde puedes conseguir el trabajo. Puedes ver aquí mismo diseñadores de interfaces. Por lo que siempre están buscando personas que estén haciendo esto. Y puedes ver desarrollador web e incluso puedes encontrarles trabajos de flujo de trabajo en las tres plataformas. Y por último, lo que quiero mostrarles es de arriba hacia abajo. arriba hacia abajo es un poco diferente porque es una de estas plataformas de licitación, pero un poco no es porque tienen el proceso de investigación de antecedentes. Y puedes ver que los tres mejores talentos freelance del mundo están en esta plataforma porque son muy rigurosos con su proceso de selección y contratación una vez que realmente te metes dentro de la cima, top, equipo superior. Por lo que decir, te van a dar trabajos todo el tiempo. Entonces, depende de ti agarrar esos trabajos tan pronto como estén disponibles. E incluso puedes trabajar como desarrollador web aquí, pero voy a mostrar algunos sitios web completos dedicados un poco más tarde. Pero básicamente cómo funciona es que vas a superar ese proceso de contratación. Si pasas por, vas a formar parte de un equipo, por así decirlo equipo virtual. Y por lo tanto vas a conseguir mucho más de estas oportunidades laborales y puestos de trabajo. Entonces te estoy dando tres plataformas diferentes y Toalla Top, así que asegúrate de elegir lo que mejor te funcione. Una vez más, del mismo ancho, los concursos de diseño no se desaniman a entrar fácilmente rápidamente. Tienes que probar todos estos hasta conseguir tu primer puesto. Esa primera posición te va a conseguir tu segunda posición, tercera posición. Y entonces va a ser mucho, mucho más rápido para ti conseguir tus trabajos adicionales y tus próximos trabajos porque tendrás toda esa experiencia y toda esa pista en estas plataformas. 207. Nómadas digitales: Ser nómada digital es genial porque puedes trabajar donde quieras en el mundo, y puedes vivir donde quieras en el mundo y trabajando al mismo tiempo. De eso se tratan estos sitios web. De eso se tratan estas posiciones. Porque la cifra desde el principio de que no estás atado a tu casa, por ejemplo, todavía puedes estar en tu casa y aún puedes vivir en tu lugar de trabajo, estos trabajos. Pero solo estoy tratando de decirte que este es el punto aquí mismo. Están bien con que alguien sea remoto. Para que puedas vivir en la India, por ejemplo y trabajar para una empresa estadounidense, viceversa. Entonces no importa en qué parte del mundo te encuentres, puedes trabajar en uno de estos trabajos. Entonces estos son solo tres de los sitios web, y puedes encontrar muchos de ellos en Google, solo busca empleos nómadas digitales. Y el primero es digital nomad dot world slash job. Para que puedas encontrar trabajo freelance, tiempo completo, medio tiempo, contrato temporal. Entonces todo tipo de cosas diferentes. Incluso tienen nivel de entrada que está bien. Puedes ver que la mayoría de ellos son un control remoto donde dice USA, por ejemplo , porque es un tiempo completo, pero tal vez incluso puedas intentar que ese trabajo sea remoto si negocias con ellos, esto es temporal, por ejemplo sugerir uno, digamos proyecto o algo así. A continuación tenemos trabajos remotos y esto está trabajando nomad.com slash jobs. Así que puedes encontrar todo tipo de trabajos diferentes aquí mismo y puedes ver que el diseño está aquí mismo, así puedes ****** eso. Entonces, si pudiera verificar el diseño, puedes ver diseñador UX, UI, diseñador, diseñador gráfico, todo tipo de trabajos diferentes. Entonces tenemos remoto ok.com slash digital nomad jobs. Y puedes buscar por ubicación I, donde están tus clientes en el mundo, por salario aun así, puedes encontrar salario aquí mismo. Entonces 70 eternidad, cualesquiera que sean los beneficios, qué tipo de beneficios sí obtienen. Entonces este es un gran sitio web para eso. Y puedes encontrar todo tipo de resultados diferentes aquí mismo. Pero busquemos, digamos, diseño de desarrollador. Ahí vamos. Y como puedes ver, todo tipo de trabajos de diseño diferentes aquí arriba. Así que tenemos ingeniero de pruebas, ingeniero de pila, desarrollador de diseño o una UI UX o todo tipo de posiciones diferentes. Asegúrese de visitar este sitio web y recordar como la misma historia con todas estas lecciones anteriores, incluida esta. Si una cosa falla, prueba otra, y luego otra, y mira a dónde te va a llevar. Si vas a conseguir el trabajo remoto en lugar de un concurso de diseño, genial, puedes poner ese trabajo remoto en tu cartera, viceversa, funciona igual. Entonces tal vez vas a conseguir tres trabajos al mismo tiempo. ¿Quién sabe? Solo tienes que ser consistente, tienes que ser persistente, y vas a conseguir ese trabajo al final del día. 208. Plataformas de diseño: Las plataformas de diseño pueden ser una manera increíble para que encuentres un trabajo. Y no solo el trabajo, sino incluso algunos amigos que están en el mismo barco que tú, puedes conectarte con otros diseñadores que te pueden gustar para trabajar, puedes enviarles mensajes. Puede intercambiar recursos increíbles que encontró en línea, por ejemplo cursos en línea como este, guiño, guiño o puede intercambiar sus libros favoritos sobre diseño de UX, tal vez algunos consejos y trucos sobre trabajar con ciertos tipos de clientes. Por lo tanto, es una excelente manera de construir tu red y conectarte con otros diseñadores mientras te quedas en casa. Voy a mostrar tres de mis sitios web favoritos y por supuesto puedes explorar y encontrar otros por ahí. Entonces el primero es beacons y Behance es uno de los sitios web más antiguos que existen. Es genial porque los fines de semana puedes construir tu propia cartera. Si no tienes tu propio sitio web personal, puedes crearlo los fines de semana y es fantástico porque puedes crear estas presentaciones de formato largo que son excelentes para fines de estudio de caso. Y siempre puedes señalar a tus clientes esos estudios de caso y ellos pudieron ver todo tipo de detalles diferentes de los que hablamos en la sección de estudios de casos de esta clase. Además, es genial porque como dije, puedes conectarte con la comunidad. Puedes explorar e inspirarte por la comunidad y también puedes aprender porque son geniales y tienen esta pestaña de transmisión en vivo aquí mismo, que a veces transmito en vivo con ellos, especialmente con Adobe XD y otras aplicaciones de Adobe. Pero puedes encontrar trabajo aquí mismo con bastante facilidad. Para que puedas ir a trabajos aquí mismo en la parte superior. Crea tu perfil, obviamente, entonces tienes freelance tiempo completo y creativos para contratar y también podrás guardar trabajos para después. Entonces cómo hacer esto, Digamos freelance. Y puedes ver aquí mismo, para que puedas buscar todo tipo de campos de categorías diferentes. O puedo filtrar a través de UI UX, por ejemplo y puedes ver UI UX en cualquier lugar, en cualquier lugar y en cualquier lugar. Y todos estos son independientes. Puedes ver que tenemos 56 diferentes puestos de trabajo freelance. Si quieres aplicar, vas a aplicar directamente durante el fin de semana. Así que asegúrate de tener tu perfil en orden asegúrate de publicar tu trabajo que hiciste anteriormente. Y eso es todo en Dribble. Va a ser un poco diferente porque cuando vas a buscar trabajo, tu bolsa de trabajo es gratuita, pero para proyectos freelance, tienes que tener una cuenta Pro. Entonces Joe Board se ve así. Entonces cuando vayas aquí, puedes filtrar. Entonces digamos que eres diseñador. Digamos UX, digamos diseño web, haga clic en Filtrar. Y te va a mostrar en todas partes. Y puedes filtrar por un contrato freelance de tiempo completo y abierto a remoto. Y puedes ver que algunos de ellos son amigables a distancia, por ejemplo este, este, este. Así podrás encontrar todo tipo de posiciones diferentes mientras estás con freelance. Lo que se puede ver es el presupuesto de inmediato. Entonces algunos de estos, vamos a filtrarlos a través de UI, diseño web UX, igual que lo hicimos anteriormente. Filtrar resultados. Veamos qué tenemos. Entonces tenemos 16 nuevos proyectos publicados hoy. Entonces tienen muchos proyectos nuevos, pero una vez más, hay que pagar regate por este servicio en particular. Entonces puedes ver todo tipo de posiciones diferentes y es genial porque puedes ver el presupuesto. Entonces vas a abordar esto la manera que ya mencioné anteriormente. que pueda ofrecerles servicio de diseño para este presupuesto en particular y luego ofrecerles Webflow como una venta adicional. les puede decir a alguien como, Bien, vamos a construir este diseño, lo cual está bien, pero no tienes desarrollador. A lo mejor puedo desarrollar esto para ti en Webflow va a ser increíble para ti porque va a ser fácil de actualizar, va a ser fácil de administrar, fácil de agregar nueva información, fácil de intercambiar. No tienes que lidiar con plugins sino actualizaciones, todo tipo de cosas diferentes. Y hay hosting incluido dentro. Va a ser bastante fácil. Upsell, en mi opinión, sobre todo para pequeñas empresas que no saben lo que estás haciendo. Y por último, divertido sitio web final es este, que está diseñado noticias. Y en Designer News tienen estas secciones de empleos. Puedes hacer clic ahí mismo y puedes enumerar por desarrollo de diseño, prácticas de tiempo completo, tiempo parcial por contrato , freelance, amigable a distancia, o incluso puedes ingresar asignación si quieres ser ubicación- específico. Y por último, puedes abrir todos estos en una nueva pestaña, pero tienes que tener tu cartera preparada. Esto es básicamente un blog, por lo que puedes dar click a historias y leer diferentes tipos de historias, conectar con otros diseñadores como mencioné, pero tienen esta sección de empleo y la sección de podcasts. Para que puedas hacer click y aplicarlo a estos diferentes puestos de trabajo. Entonces ahí tienes. La misma historia que con todas estas anteriores, que ya te mostré en este curso. Asegúrese de probarlo, asegúrese de aplicar la mezcla para que sea persistente, sea consistente, tenga una cartera en orden y solo siga aplicando. Uno de ellos te va a conseguir ese trabajo. Puedes doblar esa, o incluso puedes ir más ancha y probarlas todas al mismo tiempo. Ya depende de ti, sube tu tiempo, pero solo asegúrate de no rendirte. Asegúrate de mantener la concentración, asegúrate de mantener la persistencia y vas a conseguir un trabajo al final del día. 209. Trabajos de Webflow: Aparte de estos métodos de los que hablamos antes, cuando creas un diseño y luego ofreces un servicio de flujo de trabajo en la parte superior, puedes ir a sitios web dedicados donde puedes encontrar trabajos de Webflow. Puedes ir a Webflow y postularte para ser un desarrollador certificado de Webflow. Van a decir que te manden leads esa manera y luego puedes encontrar fácilmente un trabajo. Se puede aplicar a diferentes agencias. Puedes ir a LinkedIn, crear un perfil, agregar ahí tu portafolio completo web, por ejemplo, a la sección web gratuita de Webflow de la que hablamos en Webflow parte de este curso. Y luego puedes señalar que como tu cartera, vas a conseguir leads y ofertas de trabajo de esa manera. Pero en esta lección, solo quería mostrar dos sitios adicionales donde pueda encontrar trabajos de flujo de trabajo con bastante facilidad. El primero de ellos es que no tendremos código. Cómo funciona es que aplicas aquí y luego te pareció una toalla superior. Te van a mandar empleos todo el tiempo. Entonces tienes que pasar por varias pruebas diferentes donde puedan poner a prueba tus conocimientos sobre Webflow. Y tienes que rellenar tu perfil, tienes que mostrarles un portafolio. Entonces por eso dije que puedes adjuntar los de publicación gratuita de Webflow que creaste en tu perfil de Webflow y poner eso para tu portafolio. Puedes mostrarles tu experiencia. En base a tu experiencia, te van a pagar. La misma historia como todos estos diferentes sitios web. Y por último, tenemos flotación o IO remoto. Así que una bolsa de trabajo número uno para encontrar empleos en Webflow y contratar talento. Así que puedes ir aquí mismo, buscar por ubicación, ocupación, tipo de empresa y experiencia. Entonces puesto de trabajo de nivel de entrada, por ejemplo, para subir diseñador. Ahí vamos. Bueno, el aceite por diseñador desarrollador en cualquier lugar. Entonces todo tipo de diferentes puestos de trabajo. Creo que este es un sitio web fantástico. Voy a dejarle un enlace en un PDF. Asegúrate de probarlo, asegúrate de probarlo. Y una vez más, la misma historia. Me estoy repitiendo en todas estas diferentes lecciones, pero asegúrate de ser persistente. Si no consigues este, vas a conseguir el siguiente. Así que siempre sigue intentándolo, siempre trata de repetir los pasos que hiciste cuando conseguiste un trabajo e intenta innovar un poco cuando encuentres tu próximo trabajo. Y asegúrate de combinar estos sitios web de Webflow con sitios web de diseño y asegúrate de ofrecer ventas adicionales de Webflow y ver qué funciona mejor para ti. Es solo que Webflow es ajustar diseño cuando decides que va a ser mucho más simple, para que concentres todos tus esfuerzos en una canasta, por ejemplo, pero antes de eso tienes que probar todos otra vez. 210. Consejos de cartera: Una última cosa de los empleos es tu cartera, porque tu cartera te va a conseguir tu próximo trabajo. Por lo que es muy importante tener uno bueno. Y en esta breve lección, solo quiero darte algunos consejos y sugerencias sobre cómo vas con tu portafolio. Entonces, lo primero en lo que debes enfocarte es en si contrataras a alguien, qué buscarías en esa persona. Entonces, por ejemplo, si en este curso estábamos construyendo el sitio web sobre autos, y digamos que todo lo que haces es construir sitios web sobre autos. Entonces ese va a ser un gran portafolio para que solicites un puesto para un diseño de sitio web sobre autos. Ya ve a dónde voy. Así que en cuanto te nices hacia abajo, tan pronto como organices tan pronto como organices tu cartera de cierta manera va a ser mucho más sencillo para que encuentres un empleo, pero se asegura de postularte. Digamos que en este caso, apegémonos a este escenario. Si solo estás trabajando por autos de ancho y sobre autos con marcas de autos, vas a aplicar a diferentes marcas de autos y no a maquilladores y no a artistas musicales y cosas así. Solo vas a enfocar todos tus esfuerzos en este nicho. Siempre puedes darle la vuelta más tarde, pero especialmente cuando estás comenzando, es mucho mejor si puedes enfocar todos tus esfuerzos en un nicho o una industria, porque así va para ser mucho más simple para que usted cree su cartera, apuntar a todos sus próximos clientes potenciales, y para hacer su argumento de venta, por ejemplo , para organizar todos sus documentos por igual. Contratos, como propuesta, plantillas, como calzoncillos de diseño. Todas estas cosas de las que hablamos en este curso van a ser mucho mejores y mucho más sencillas para que las hagas. Entonces, si solo te enfocas en un tipo de industria o un tipo de nicho, también puedes trabajar con clientes locales, son clientes globales. Realmente no importa. Siempre hay que tener su cartera. Por último, una última cosa que te puedo dar. Un último consejo que te puedo dar sobre tu portafolio es tener siempre tu imagen en ella. Porque a la gente le gusta verte. gente le gusta trabajar con gente y no con algún tipo de marca o algún tipo de computadora. Quieren ver quién eres. Asegúrate de poner en tu cartera. Asegúrate de poner algunas cosas que sean diferentes sobre ti. ¿Eres ruidoso o callado? ¿Te gustan las cosas oscuras? Hacen como cosas ligeras como no sé, algunas ropas llamativas a las que les gusta sentarse en la oscuridad o hacer bromas, les gusta ver películas, hacer como andar en bicicleta, sí tienen mil gatos sí tienen. ¿Qué es lo que te diferencia de todos los demás diseñadores que hay ahí fuera? Puede ser muy pequeño, puede ser muy grande. No importa. Solo asegúrate de poner eso. Se va a poner va a humanizarte en lugar de que los clientes te vean como una máquina. Solo recuerda que estas personas están mirando a través de miles de portafolios diferentes. Por lo que hay que destacar entre la multitud para poder llamar su atención y para ser contratados. Así que asegúrate de hacer precisamente eso. Y finalmente, cuando formatees tu trabajo, asegúrate de comenzar desde arriba y bajar hasta abajo, como mencionamos en la sección de estudios de casos de UX. Asegúrate de empezar siempre por la parte superior. Qué problema has resuelto ahí mismo en la parte inferior de tu presentación va a ser el resultado final. Por último, para esta clase, quiero desearle suerte en su trabajo. Caza. Asegúrate de no rendirte nunca. Asegúrese de ser persistente, asegura de ser consistente. Va a ser difícil. Vas a enfrentar rechazos todo el tiempo, pero solo sigue empujándolo y vas a encontrar el trabajo de tus sueños más temprano que tarde. Muchas gracias por ver esta lección y esta parte de la clase. Y una vez más, buena suerte con tu trabajo. Caza. 211. Conclusión de cursos y próximos: Ahí vamos. Llegamos al final de esta clase. Muchas gracias por ver. Y realmente, realmente espero que aprendas algo nuevo, que vayas a implementar algunos de estos aprendizajes en tu proceso de diseño. Y realmente te deseo suerte para encontrar un trabajo. Si no tienes uno, si ya estás en un verdadero deseo encuentras un patrón uno o para mejorar ese usando algunas de estas técnicas que aprenderás. Recuerda, si en algún momento te quedas atascado durante esta clase o después de ver esta clase, siempre puedes consultar conmigo. Siempre puede comunicarse conmigo por correo electrónico, por ejemplo, o a través de este sitio web. Siempre estoy ahí para ayudarte y estaré encantado de hacerlo. Asegúrate de seguir algunos de estos métodos. Si no son adecuados para ti, entonces puedes saltarlos hasta una fecha posterior. Si estás consiguiendo un trabajo en una empresa, asegúrate de explorar siempre cuál es su proceso, porque todas estas empresas tienen diferentes procesos en su lugar. Si estás trabajando como freelancer en solitario, entonces cada cliente va a ser ligeramente diferente. Y cuando estés trabajando con estas plataformas, cada plataforma va a ser ligeramente diferente. Entonces solo trata de entender lo que te funciona porque eso es lo más importante aquí mismo. Si no te gusta trabajar con mood boards, no los uses. Si no te gusta trabajar con wireframes de papel, no los uses. No te agobies demasiado por ninguno de estos pasos en el camino. Todos son pasos importantes del proceso de diseño. Pero si en el camino encuentras que algunos de estos no funcionan para ti, simplemente no los uses. No te metas demasiado con ninguno de estos. Porque si no te funciona, entonces no lo uses. Muchas gracias una vez más por ver este curso, asegúrate de consultar en mi canal de YouTube, que es Alex en diseño. También voy a vincularlo en algún lugar de este curso. Estoy creando tutoriales UI UX todo el tiempo. Estoy creando muchos de estos diferentes cursos todo el tiempo y siempre estoy ahí para ayudarte. También tengo un grupo de Facebook, así que asegúrate de unirte a eso si quieres publicar tu trabajo ahí junto a tus compañeros para que ellos vean tu trabajo. O si solo quieres obtener algunos comentarios rápidos de mi parte una vez más. Y por último, muchas gracias por ver. Y realmente te deseo suerte en lo que sea que estés haciendo en el campo UX. Cuídate.