Diseño web completo de Figma a Webflow (nueva interfaz de usuario)

1. Resumen de la clase: Las personas que prueban su vida con el diseño web freelance no logran llegar allí. Hay tres grandes obstáculos a los que se enfrentan, y uno a la vez, cada uno de estos obstáculos los saca de su viaje. Estos cursos en realidad tres en uno, tres cursos para enfrentar tres grandes obstáculos. El gran obstáculo número uno, aprender a codificar simplemente les lleva demasiado tiempo. Cientos de miles de estudiantes inscriben en cursos de diseño web, pero solo el 10%, apenas el 10% llegan al final. Lo sé porque eso es lo que me pasó. Antes sabía cómo construir sitios web, solo era un diseñador visual. Estaba diseñando las maquetas, un prototipo de un sitio web, y se lo estaba dando a mi cliente, y el cliente luego le daría estos diseños al desarrollador web, generalmente un desarrollador de Wordpress, y esa persona luego construiría todo el sitio web Me di cuenta que estaba dejando mucho dinero sobre la mesa. Si también pudiera construir todo el sitio web, entonces me llevaría todo el pastel para mí. Así que decidí inscribirme en algunas clases y cursos de codificación para aprender diseño web en términos de construir un sitio web y comencé a aprender HTML y CSS y JAScrit y todo Ahora, como ya he trabajado en proyectos reales y sé lo que mis clientes, los clientes reales piden en términos de funcionalidad del sitio web, y muchas veces piden algunas y animaciones personalizadas complicadas y complejas interacciones y animaciones personalizadas complicadas y complejas. Entonces indagé en eso cómo se podría hacer eso con lo que ya sé y cuánto me queda por aprender. Cuando miré la imagen completa, me di cuenta de que esto era lo mucho que había aprendido hasta ahora. Pensé que me quedaba tanto por aprender para poder entregar lo que mis clientes suelen pedir. Pero en la realidad, así es lo que quedaba. Puse todo el asunto de la codificación a un lado hasta alguna fecha futura indefinida Pero luego me topé con una herramienta de diseño web llamada Webflow, y eso cambió todo Lo abrí, vi algunos tutoriales en video. Dentro de unas horas, estoy construyendo un sitio web completo desde cero con interacciones personalizadas, sin plantillas y nada. Quedó impresionado, amor a primera vista. Empecé a ofrecer a mis clientes el diseño y desarrollo de paquetes completos. A los clientes les encantó el hecho de que yo estaba haciendo todo, y empezaron a fluir. Eso es algo que nunca me había pasado antes. Webflow se deshace del mayor obstáculo al que jamás se enfrentará el tiempo y la dedicación para aprender a codificar un sitio web Con Webflow, es más rápido, más suave y millas más divertido Aprenderás a construir sitios web increíbles tan buenos como un diseñador web profesional sin necesidad de escribir una sola línea de código. Webflow es una especie de potencia que grandes marcas como discord, upwork y dropbox confían Y los poderes creativos de Webflo son tan vastos que las mejores agencias de diseño del mundo utilizan Webflow para ofrecer sitios galardonados para celebridades como Lando Entonces puedes estar seguro de que tu energía está dirigida hacia una herramienta verdaderamente poderosa. Webflow también es un creador de sitios de IA, y lo que hace que la IA de weblos única es que, a diferencia de los constructores de IA tradicionales, el resultado es completamente editable a través de su diseñador visual No es necesario que luche con un bot de chat para obtener el aspecto deseado, pero eso es solo punta del iceberg Las empresas necesitan algo más que un sitio web. Necesitan todo un ecosistema a su alrededor, fuertes herramientas de SEO, soporte de múltiples ilenguajes, un CMS que la gente no técnica pueda usar un espacio para que los especialistas en marketing pongan marcha campañas sin romper el sitio, forma fácil de usar de editar el contenido del sitio Con otros constructores de IA, estás prácticamente solo para unirlo, pero Webflow viene con todo eso listo para usar. Es una razón por la que incluso el modelo de IA líder en el mundo para la codificación, Cloud tiene su sitio de marketing construido sobre Webflow Hay un video después de este título, Qué es Webflow. Puedes verlo si necesitas más información antes de inscribirte en el curso Después de algunos estudiantes valientes que hacen a través de todo el proceso de aprendizaje, ahí espera un obstáculo número dos. En realidad no pueden diseñar bien. Porque casi todos los cursos de diseño web, están enfocados en la parte técnica, que es la codificación, HTML, CSS, JavaScript y todo eso. Pero el diseño en sí es parte del campo del diseño gráfico. Cosas como la teoría del color, tipografía, la fotografía es más arte Y la mayoría de ellos nunca llegan a aprender esa habilidad crucial. Y lo que hacen la mayoría de los diseñadores web, utilizan temas y plantillas. Y a veces eso es algo válido, pero los clientes que pagan altos no quieren un sitio de plantillas. No van a pagar miles por instalar un tema de prensa de palabras, ¿verdad? Quieren un hermoso diseño personalizado que los ponga por delante de su competencia, sea cual sea su negocio. Y si eres un diseñador web que puede entregar eso, no solo atraes a clientes que pagan alto, sino que también tu competencia es más delgada porque no muchos diseñadores web saben cómo hacerlo Entonces te voy a enseñar diseño gráfico, pero solo lo que se necesita para la web. Para que puedas aprender a diseñar sitios web hermosos y personalizados. No tienes que ser creativo ni tener ningún requisito previo. Si puedes mover un ratón y ver colores, te enseñaré a diseñar. El diseño es bastante sencillo. Hay reglas , pautas y muchos trucos ocultos, y es divertido como el infierno. Para crear estos diseños, vamos a necesitar usar una herramienta de diseño de interfaz. Verás, los grandes sitios web no se construyen de inmediato. Primero, necesitas diseñar un prototipo. Algo así como un dibujo no funcional del lado, y luego lo desarrollas. Para eso, vamos a utilizar la mejor herramienta del mercado, que es Figma. Es gratis, fácil de usar, pero potente. Tendrás ejercicios de diseño y proyectos. Diseñarás sitios web de la empresa, diseñarás un blog. Aprenderá el proceso de los diseñadores profesionales, desde escribir un resumen del proyecto hasta el encuadre de cables y el diseño del prototipo final En el tercer curso, aprenderás a hacer frecuencia exitosa porque muchos diseñadores web tropezan en este último paso. Se sienten muy confundidos. No saben cómo ponerse el precio ellos mismos. No saben cómo escribir propuestas ganadoras, cómo acercarse a los clientes, y cómo realizar negociaciones y todo eso. Y por último, te voy a dejar ir con un regalo, un increíble sitio web de portafolio que diseñé y construí para ti. Entonces, en el momento en que termines con este curso, vas a tener un sitio de portafolio brillante e impresionante con trabajo de portafolio de este curso que ya está publicado en él. La mayoría de los diseñadores web en realidad no tienen un sitio web personal. No tendrás dificultad para impresionar a tus clientes potenciales Soy acoshwlli y seré tu guía en este viaje. Ahora, todo lo que tienes que hacer es inscribirte. 2. ¿Qué es Webflow?: Este video, quiero responder varias preguntas que pueda tener sobre Webflow. Entonces, ¿qué es Webflow Webflow es un creador de sitios web sin código que es diferente a cualquier otra cosa por ahí. Te ayuda a diseñar y construir sitios web receptivos desde cero, como lo haría cualquier diseñador web profesional, pero sin escribir ningún código. Bueno, en realidad, Webflow lo escribe para ti. Diseñas todo visualmente mientras Webflow escribe código semántico limpio para Luego puede exportar este código o conservarlo y alojar el sitio web en Webflow Además del diseñador web, es una plataforma CMS algo así como Wordpress, lo que significa que puedes construir sitios dinámicos completos como blogs y sitios web de comercio electrónico. Y aquí hay uno realmente grande. Con Webflow, puede crear animaciones e interacciones enriquecidas Si está codificando, es algo que requiere conocimientos avanzados de Javascript. Pero en Webflow, lo haces visualmente sin siquiera pensar en el código Aprender Webflow se siente como aprender una nueva superpotencia. Es realmente una herramienta innovadora que ha cambiado la industria ¿Quieres ejemplos de sitios construidos en Webflow? No se preocupe. Los sitios web de flujo web son ganadores regulares en concursos de diseño como awards.com Eso es Oscarsoft Web Design, y eso dice mucho cuando una herramienta de diseño visual está compitiendo con sitios web codificados personalizados utilizando motores de animación complejos hechos para juegos Después de la adquisición e integración de Greensock por Webflow en 2025, que se considera el motor de animación web número uno, vamos a ver muchos más sitios premiados hechos en Ya el mismo año, un sitio Webflow hecho para Lando Norris se lleva a casa el premio Side of the Year Award Los diseños impresionantes no son la única razón por la que las marcas optan por Webflow El rendimiento y la funcionalidad es otra. Discord usa Webflow para el sitio principal de marketing y blog Upwork dos para todas sus páginas laterales que no son aplicaciones, dropbox para sus campañas de marketing y lanzamientos de productos. Y aquí hay un pateador Incluso el sitio de marketing de Clod está en Webflow. Eso es irónico porque el coágulo es el mejor modelo para becding. Ninguna de estas empresas carece de desarrolladores para codificar manualmente o codificar vibra sus sitios. Simplemente ven más beneficios al ir con Webflow. Si quieres más ejemplos, puedes ver vitrinas laterales de Webflow en lugares como lapan Ninja, awards.com o directamente en la página Webflow Showcase awards.com o directamente Solo un par de ejemplos son suficientes para mostrar cuán infinitas son las posibilidades de lo que puedes lograr con Webflow Como alguien que ingresa a la industria del diseño web, estoy seguro de que quieres saber cómo se compara Webflow con otras herramientas de la industria, incluida la codificación vibe Elegir la herramienta adecuada para el proyecto es sumamente importante. Hay tantas opciones por ahí, y simplemente buscar en Google Lo que es lo mejor te dará las respuestas equivocadas porque no hay Todos ellos tienen su lugar y ocupan un nicho muy particular, y dentro de su nicho, son muy fuertes. Comparar todo esto es difícil, pero podemos hacerlo usando un práctico pequeño gráfico llamado Cuadrante Mágico Por ejemplo, podemos tomar dos aspectos significativos para los sitios de negocios, poder de diseño y la funcionalidad y trazar las herramientas más populares en esta escala. Conseguiríamos algo así. Las herramientas de codificación de vibra, las estoy uniendo en una porque fundamentalmente, son todas iguales El método de construcción y diseño es idéntico. Es incitador. Y la calidad de salida depende menos de la plataforma y más del modelo de IA que utilicen. Entonces solo estoy asumiendo el mejor modelo para esta comparación. Wix viene con una funcionalidad muy alta debido a sus herramientas nativas para negocios como menús de restaurantes, reservas de hoteles, programación, eventos, etc., y un fuerte mercado de aplicaciones para otras funciones suplementarias Pero no estás ganando ningún premio con un lado débil. Es ideal para las personas que construyen su propio sitio, pero no es adecuado para agencias de diseño que desean ofrecer diseños premium altamente pulidos. Cuando se trata de funcionalidad, nada supera a Wordpress con su funcionalidad casi ilimitada debido a su enorme ecosistema plug in de 60,000 Pero los diseñadores visuales de Wordpress como Elementor tienen restricciones de widgets, lo que significa que tienes que usar diseños prefabricados Sí, pueden tener hermosas opciones, pero serán limitadas. Y los resultados serán genéricos ya que todos tendrán que sacar de la misma selección de widgets y componentes. Por supuesto, a diseños completamente únicos y piezas de guerra, también, pero eso es solo con sitios codificados personalizados sin usar constructores visuales. Cuando se trata de codificación de vibra, teóricamente, tiene una funcionalidad ilimitada Pero en la práctica, la mayor parte de esa funcionalidad no es una característica de sitio web lista para usar. Es un código generado que un no codificador puede tener dificultades para validar y mantener Con plataformas tradicionales sin código, sea cual sea la funcionalidad que ofrezcan, puedes contar con ella. Está probado en batalla, construido y mantenido por profesionales. Esto se basa en la evaluación 2026 de herramientas de IA. Mejorarán aún, y con el tiempo, se moverán ligeramente a la derecha en la escala, pero el prompt a la funcionalidad siempre será menos superior en comparación con funcionalidad robusta nativa que no tienes que inventar desde cero En cuanto al poder de diseño, la colocación es menos discutible. Incluso un diseñador visual experto no puede dirigir la IA de manera confiable para producir diseños únicos de alta gama. Confía en mí, lo he intentado. Esto no es una limitación de AI Tech. Es una limitación del propio lenguaje natural porque una imagen vale mil palabras. Es más fácil y rápido dibujar nuestra visión nosotros mismos que describirla usando palabras. Es por eso que no vemos ningún sitio ganador de barrio saliendo de las herramientas de codificación de vibra. Solo Webflow y framer ganan su lugar por encima de la galardonada línea de referencia Sus sitios son una aparición constante en sitios de competencia de diseño como awards.com, especialmente Ambos ofrecen un control total sobre el diseño y editores de animación extremadamente potentes. Framer ofrece animador basado en fecha, que es simple y potente, y Webflow ofrece animador basado en línea de tiempo, que es lo que obtienes en herramientas de animación profesionales como Y en comparación con Framer, Webflow ofrece una funcionalidad mejor y más establecida para uso empresarial. El territorio donde la alta funcionalidad se encuentra con altas capacidades de diseño es donde ocurren ganancias premium. Es por eso que Webflow es la herramienta elegida por la agencia de diseño Tenga en cuenta que estoy evaluando estas herramientas para sitios de negocios y marketing, no para aplicaciones web. Esta distinción importa porque los sitios de negocios y las aplicaciones web tienen necesidades muy diferentes y ninguno de estos constructores de sitios está hecho para aplicaciones web excepto para el código vibe. Hay otros aspectos que uno podría comparar que contarían una historia muy diferente. Por ejemplo, si comparamos la funcionalidad versus la facilidad de uso aquí, Webflow calificaría manera bastante diferente debido a su curva de aprendizaje Webflow no es algo en lo que simplemente saltes y comienzas a usar y comienzas a construir sitios web No es tan intuitivo como algo así como tal vez espacio cuadrado. Tiene una curva de aprendizaje. Y principalmente es porque se basa en la estructura de código regular que usaría un diseñador y desarrollador web regular. Por ejemplo, agregas elementos HTM en Webflow y los estilizas usando clases CSS, igual que lo que uno haría al codificar realmente el sitio web Si tienes alguna experiencia con HTML y CSS, definitivamente te vendrá bien. Pero si no tienes ninguno, no te preocupes por ello. Te enseñaré todo a medida que avanzamos. De hecho, la curva de aprendizaje de Webflow realmente funciona en tu beneficio porque es la única que te empuja a aprender los fundamentos inmutables del desarrollo web, el modelo box, el flexbox, las clases la física bellamente extraña de HTML y Estas fundaciones web no van a ninguna parte nunca. Si algún día decides hacer la transición a la codificación o a la codificación de vibra, vas a llevar este conocimiento contigo. Es una habilidad atemporal. Ibecar teóricamente es lo más fácil de usar no tiene curva de aprendizaje porque solo le hablas Pero para los no codificadores, esa simplicidad se convierte en máxima complejidad en el momento en que te encuentras con un obstáculo Los bloqueos viales son más comunes de lo que uno podría pensar. Wix se lleva a casa esta categoría. Es funcional y fácil de usar. Este es su nicho y lo dominan. Está hecho para ser fácil de usar y accesible para propietarios de negocios no técnicos. Todas las características que una empresa pueda necesitar, desde SEO hasta carritos de compras, solo toma unos pocos clics en una interfaz de usuario guiada Podrías pensar, entonces ¿por qué no aprender semanas o espacio cuadrado ya que son las más fáciles? Pero esa facilidad en realidad trabaja en tu contra como un profesional que quiere que le paguen por su experiencia La simplicidad trae a más personas a ese mercado laboral de herramientas. Aquí tienes una sabiduría para llevar a casa para ti. Si quieres ganar dinero, hacer lo que haces no puede ser demasiado fácil porque todos pueden reunir a pacientes de una semana para aprender una nueva habilidad e inundarán el mercado laboral. Pero si una habilidad tarda seis años en aprender, entonces muy pocas personas van a quedarse tanto tiempo. Es por eso que a los médicos y odontólogos les paga bien y siempre pueden encontrar el trabajo. No hay dinero fácil en este mundo. O hay dinero fuerte o no hay dinero. Podemos seguir adelante y comparar diferentes aspectos y obtendríamos diferentes ganadores para diferentes nichos como Framer tomando el poder de diseño versus el nicho de facilidad de uso y la codificación de vibra tomando un nicho donde uno necesita lograr una complejidad única relativamente rápido Todas estas herramientas encuentran sus nichos y se enfocan en ellos, entrenando aspectos a favor de aquellos que los fortalecerán dentro de su nicho Los dos últimos aspectos significativos que quiero mostrar son los aspectos que podrían no ser tan importantes para la mayoría de la gente, pero muy significativos para el negocio del diseño web en sí. Calidad de la mano del cliente. ¿Se puede entregar esto a un cliente que luego pueda administrar el sitio ellos mismos con facilidad y profesionalismo de salida? ¿El resultado final parece una construcción de agencia a medida o un proyecto hágalo usted mismo Freelancer o una agencia para vender cómodamente un servicio de diseño web premium, necesitan poder abordar los puntos débiles del cliente. Veo que los clientes necesitan mantener su sitio web actualizado, necesitan crear contenido. Necesitan actualizar el texto en las páginas. Necesitan crear nuevas entradas de blog y así sucesivamente. En WordPress, tienen que actualizar ese contenido en un panel de administración de Clunky muy complicado , no muy fácil de usar, que se ve algo así Este entorno viene con muchas partes móviles, más lugares en los que hacer clic y más riesgo para los clientes deambulan por cosas que no deben tocar Ahora, en Webflow, los clientes editan contenido directamente en vivo. Sin paneles de administración y editores de texto extraños. Editan exactamente lo que ven. Pueden cambiar fotos, actualizar texto, y no hay forma de que rompan el lado. Ser codificación, por ejemplo, tiene un terrible manejo de cliente. No hay tablero visual para que un cliente administre su propio blog o tienda sin fricción técnica. Están prácticamente bloqueados de su propio sitio. Webflow es el estándar oro en esta categoría mashup. sistema de gestión de contenido realmente utilizable de Webflow y la interfaz de usuario dedicada para roles como vendedores y editores de contenido brindan a las empresas la capacidad administrar su Las empresas están constantemente promocionando, creando campañas, páginas, eventos, lanzamiento de productos y más. Necesitan algo más que un sitio web. Necesitan un conjunto de herramientas y funciones de back office para ejecutar toda su experiencia web. punto óptimo que ofrece Webflow entre el pulido del diseño, la funcionalidad y las características del lado del cliente es la razón por la que se ha convertido en la mejor opción para las agencias de diseño y autónomos como yo que operan en los mercados de negocios Nos dio el poder de entregar soluciones de valor extremadamente alto a las empresas sin salir de la plataforma. Sí, con un poco de curva de aprendizaje y una velocidad de construcción más lenta, pero ese no es el aspecto que me importa a mis clientes. No puedo venderles una plataforma porque es fácil para mí aprender. Ese es un problema de mí. Quieren pulir el diseño , potencia y facilidad de uso de su lado. Elegir Webflow no significa que no pueda utilizar el poder de la codificación de vibra Webflow también tiene AI Builder. De hecho, tiene dos AppGen que funciona como un constructor de aplicaciones de IA tradicional, tan poderoso como otros Builders, usando el mejor modelo actual que existe, que es Cloud AI App Builder de Webflow tiene un beneficio adicional de que le permite conectar componentes y contenido CMS desde su sitio existente Cada sitio tiene componentes repetidos como barras de navegación, pies de página, formularios de registro, secciones testimoniales, etc. Poder conectarlos directamente dentro de su mensaje es súper poderoso, especialmente dado que esos componentes y elementos de la base de datos están completamente bajo su control visualmente dentro del editor regular de Webflow Este AI Builder obviamente extiende el techo de funcionalidad de Webflow, y ni siquiera lo tuve en cuenta en mis comparaciones anteriores Las aplicaciones y páginas creadas aquí no se pueden editar en Webflow designer Vas a tener que abrirte paso a través él como cualquier otro código de vibra Pool. Pero Webflows segunda herramienta de IA, el sit Builder es capaz de generar un sitio visualmente editable Esta generación se desplegará el diseñador de Webflow donde podrá iterar visualmente sobre él En la próxima conferencia, vamos a dar una vuelta a este Constructor del lado de IA, así que voy a cubrir todos los matices ahí. Hay otro tipo de sitio que puedes construir en Webflow, sitios de comercio electrónico, pero no los vamos a cubrir en este curso La demanda de sitios de comercio electrónico es mucho menor que la de los sitios web normales. Entonces mi recomendación sería ir y pasar al diseño web de sitios de comercio electrónico y desarrollo web una vez que obtenga una experiencia laboral real lo suficientemente buena con el diseño web regular y general. No tiene mucho sentido saltar directamente al desarrollo web complejo, un poco más complejo, desarrollo web complejo, un poco más complejo, que es el comercio electrónico en lugar de sitios web regulares, lo cual es mucho más simple y mucho más directo. Webflow es gratuito hasta que necesites publicar el sitio web, y luego pagas por el alojamiento Pero el hosting es algo que todos los propietarios de sitios web tienen que pagar, incluso si están usando una plataforma gratuita como WordPress. Pero no tienes que preocuparte demasiado por esto. No es su gasto. Los clientes pagan por el hosting. En conclusión, Webflow ha cambiado la mía y la de tantas otras personas, y puede hacer lo mismo por ti 3. Teaser de Webflow: El curso tiene seis partes. En la primera parte, aprenderás secretos del buen diseño. En la segunda parte, practicarás el diseño en proyectos reales. En la tercera parte, aprenderá Webflow construyendo la página de inicio de una empresa En la cuarta parte, vamos a hacer un proyecto cliente de principio a fin. Te voy a llevar por el mismo proceso por el que paso con cada cliente. Vamos a empezar por wireframing luego diseñando el sitio web en Figma, luego tomando todo y diseñando y construyendo dentro de Webflow con el blog, y finalmente publicándolo y entregándolo al cliente En la quinta parte, aprenderás los secretos de ganar dinero como freelance, y la parte seis tiene varios tutoriales avanzados, tanto en diseño como en Webflow En el video promocional, mencioné primero a Webflow, pero en realidad vamos a comenzar este curso con el diseño porque cada buen proyecto de sitio web comienza primero con el diseño Al igual que cualquier gran edificio siempre comienza primero con los planos arquitectónicos, y luego viene el desde que empezamos a trabajar con Webflow, solo en la tercera parte de este curso, quería darte un poco de sabor antes de continuar Así que adelante y abre Webflow para que podamos darle una vuelta rápida Ya deberías tener la cuenta de Webflow de la lección anterior Si no, vaya a webflow.com e inscríbase. Usa Google Chrome. El diseñador de Webflow trabaja lo mejor ahí dentro. Después de registrarte, llegarás a alguna versión de esta página. Tenemos tres formas en las que podemos construir un sitio en Webflow. Una son las plantillas. Webflow marketplace cuenta con más de 7,000 plantillas pagas y Son absolutamente maravillosos. Son sorprendentemente únicos para las plantillas. Hay variedad. ricas animaciones e interacciones. Es una forma muy válida para que un diseñador web trabaje. Puedes instalar plantillas para un cliente, editarlas, personalizarlas para su contenido, su marca, su negocio. Y proporcionar servicios continuos de mantenimiento y actualización del sitio. Dado que estas plantillas están construidas en Webflow, no estás vinculado a plantillas Son totalmente editables y se pueden modificar por completo. El segundo enfoque es construir con IA. Es uno de los dos constructores de IA dentro de Webflow. Esto es diferente de la generación de aplicaciones que mostré anteriormente, que es una herramienta de codificación de vibra más tradicional. Este funciona como un generador de primer tiro. Démosle una prueba rápida a este. Puedes elegir tu propio aviso o usar el mío. Antes de que genere el sitio, vas a llegar a este tipo de estructura de página. Esta es una pequeña característica útil que ofrece Webflow a diferencia de otros constructores de IA Lo que esto nos da es que realmente somos capaces de estructurar nuestra página, no solo nuestra página, sino nuestro sitio antes de que realmente tengamos la IA generada. Esto es muy útil porque normalmente no tienes todo estructurado en tu cabeza antes de que puedas decirle esto a NAI. Entonces estas son cada una de ellas son páginas. En estas cajitas, son secciones. Entonces, por ejemplo, si olvidamos agregar algún tipo de sección, podemos venir aquí y pensar, Bien, necesitamos otra sección en la parte inferior, como una sección de preguntas frecuentes antes o después del formulario de contacto. Y Webflow va a ofrecer estos diferentes tipos de secciones entre las que podemos elegir Entonces, en realidad, Webflows AI Builder es una especie de IA al mismo tiempo, y luego también como una biblioteca de componentes y diferentes diseños que ofrece Entonces, como que da lo mejor de ambos mundos donde no tienes que idear todo por tu cuenta, pero también puedes usar IA. Entonces, por ejemplo, podemos agregar preguntas frecuentes en la parte inferior, pero bien, tal vez cambié de opinión. No lo quiero en el fondo. No hay problema. Puedo arrastrarlo hacia arriba, y luego puedes revisar las diferentes secciones aquí si funcionan, si no funcionan, y luego puedes agregar más páginas. Entonces, si quieres agregar más página, en realidad, tiene un límite de cinco páginas. No va a generar más de cinco páginas. Entonces, si, por ejemplo, no necesitas página de servicios o página de contacto, puedes eliminar esta, y ahora podrás crear una nueva, digamos, página de precios. Y luego Webflow generará una página de precios para ti. Y luego una vez que hayas terminado de estructurar puedes hacer clic en Generar SI. Va a tomar unos minutos, darle algo de tiempo. Todo bien. Así que vamos a obtener un diseño de cinco páginas o unas pocas páginas depende de cuánto hayas generado. Y lo que este lugar está aquí es en realidad esto es como un paso previo antes de trasladarlo al diseñador Wilo Este paso nos permite antes aceptar los cambios realizados por la IA, realmente somos capaces editar esto y estilizarlos aún más. Entonces, por ejemplo, podemos entrar en una de estas páginas haciendo clic en Editar y obtenemos este tipo de tipo de interfaz fácil para actualizar algunos estilos y experimentar, y ofrece diferentes temas que puedes cambiar y completar va a cambiar diferentes colores. Cambiará diferentes estilos de rumbo, colores. Actualizará muchas cosas diferentes sobre el sitio, y te dará una idea de la estructura y el contenido seguirá siendo el mismo. Pero ahora los colores han cambiado y las fuentes han cambiado y te da una idea de cómo se ve todo esto en un estilo diferente. Cada una de estas secciones, son editables. Y por ejemplo, si haces clic en esto, esto abrirá una gran selección de bibliotecas de componentes y bibliotecas de maquetación, digamos, y tienes diferentes secciones de héroe, características, precios de galería, o lo que no. Y esta es ahora mismo una sección de héroes, y tienes muchas opciones diferentes de cómo quieres darle estilo a esta sección de héroes. Y para los edificios de lado rápido, esta es en realidad una excelente manera abordarlo porque no tienes que provocar una discusión con AIS y te da un poco más de capacidad para elegir algo visualmente que veas y te guste, y puedes editar Por ejemplo, me gustan bastante este tipo de secciones que tienen imágenes dentro del texto. Podemos actualizar eso. Esto aquí te da la posibilidad de intercambiar estilos. Conservarás esta sección, pero cambiará los colores en función la paleta que ya se usa dentro de este tema. La paleta de colores también se puede cambiar desde aquí. Por ejemplo, podemos ir con un poco más, un poco más intenso, color más vibrante como violáceo, flor sagrada, Y puedes ver que te da muchas, muchas variaciones de paleta de colores diferentes. Se actualizan todas las secciones. Puedes usar temas oscuros. También, podemos actualizar la topografía. Podemos actualizar el peso para la tipografía, tal vez hacerla más Los tamaños también se pueden cambiar, e ir un poco más pequeños. Podemos actualizar estilos para botones. Ahora mismo tenemos este tipo de diseño plano. Podemos optar por un diseño potencialmente un poco más schumórfico, un poco más clasmórfico Podemos agregar nuevas secciones desde aquí. Por ejemplo, una sección de logotipo sería muy interesante aquí. El color y el estilo se pueden actualizar para diferentes secciones como esta. Podemos cambiar, por ejemplo, esta galería no es tan interesante, que es un montón de fotos. Estas fotos son todas generadas por IA, y ahora mismo, obviamente, todo se ve muy suelas y mezcla. Vas a tener que actualizar el contenido, actualizar las imágenes para hacerlo más personal. Y una vez que hayamos terminado con los cambios, los estilos que hemos aplicado, todos ellos van a ser llevados y aplicados a todas las páginas. Como puedes ver, los colores, la tipografía, los estilos de botones, todo se ha llevado a todas partes, lo cual es muy bonito Y una vez que hayamos terminado con esto, vamos a hacer clic en este Continuar construyendo, y esto ahora nos llevará dentro del diseñador de Webflow El único problema aquí es que en el plan gratuito, solo obtienes dos páginas, así que vamos a tener que deshacernos de algunas de estas páginas que no queremos. Podemos mantener tal vez una página de servicios. Y una página de inicio. Entonces vamos a terminar dentro del diseñador Webflow. Aquí tenemos el control total, cómo podemos editar nuestro sitio, solucionar cualquier problema que tengamos. Por ejemplo, podemos actualizar nuestras imágenes. Y arreglar problemas como, por ejemplo, en este caso, dada cualquiera que sea la fuente y la forma en que se colocan las imágenes, están tocando aquí, y esto no es agradable. No deberían estar tocándose, así podemos solucionar este problema. Ahora bien, esto no va a ser fácil para ti en este momento porque no sabes cómo trabajar este diseñador. No se sabe cómo estos elementos, cómo los estilos y propiedades y todo eso funciona, pero vamos a llegar a ello. Esto nos da un control total. Obviamente, podemos actualizar el contenido que sea fácil. Diferentes cambios, por ejemplo, preferiría que estos logotipos se distribuyeran. Una vez que entiendas cómo funciona flexbox, puedes hacerlo muy fácilmente con un solo clic Y si lo olvidaste y querías agregar nuevas secciones, todavía podemos hacerlo a través de la IA. Estos pequeños botones de diseño de generación se mostrarán. Y luego, por ejemplo, podemos agregar una sección de precios, y la ganancia de Webflow nos va a dar muchas opciones diferentes de precios que podemos agregar Adaptará el contenido a nuestro sitio web. Y si obtienes alguno de algunos problemas aquí, eso se puede eliminar, sí, obtenemos el control total, y podemos previsualizar nuestra página web desde aquí y ver cómo todo interactúa y funciona Las imágenes en este momento son terribles, pero digamos. El sitio web va a ser receptivo de inmediato, puedes probarlo reduciendo este lienzo Se puede ver que se están ajustando a diferentes tamaños. Y se puede ver también desde aquí los diferentes puntos de quiebre como móvil, tablet, y así sucesivamente. Pero trabajar con un sitio ya construido va a ser demasiado confuso para un principiante. Para aprender los fundamentos del diseño web, necesitamos comenzar de cero. Regrese al tablero y cree un nuevo sitio. En un avión libre, solo puedes tener dos sitios gratuitos. Entonces, si ya alcanzas ese límite jugando con AI Builder, entonces puedes simplemente archivar uno de los sitios desde aquí. Cree un nuevo sitio y luego elija sitio en blanco. Como usuario por primera vez, obtendrás esta ventana emergente de incorporación. No necesitas atravesarlo, pero puedes si quieres. A la izquierda, tenemos un navegante. Muestra la estructura de la página y todos los objetos que contiene. Ahora mismo, sólo hay un objeto, el cuerpo. Desde el icono más, podemos agregar nuevos elementos. Vamos a agregar un contenedor que simplemente podemos arrastrar sobre el lienzo. Además, agreguemos un encabezado y un párrafo dentro. Y escribir algo en él. Centremos el texto. Podemos hacerlo seleccionando el contenedor y presionando la alineación del centro bajo tipografía Y vamos a agregar algo de espaciado para mover el texto en el centro de la pantalla, mantener el contenedor seleccionado, y con el mouse arrastra este asa de relleno superior. Puedes alternar un modo de vista previa para ver cómo se ve tu página en tiempo real. Si vas al código Exportar, vas a ver el código real que Webflow escribió para nosotros. HTML muestra los objetos que hemos editado, como el contenedor, el encabezado y un párrafo. Y dentro de CSS, verás los cambios de estilo que hemos realizado, el pading superior y la alineación central Podríamos exportar este código y alojarlo en cualquier otro lugar. La página funcionaría perfectamente fuera de Webflow dos. Pero no vamos a hacer eso en este curso. La mejor opción es publicar nuestra página en Webflow. Así que ve a publicar y haz clic en Publicar en dominios seleccionados. Una vez hecho esto, haz clic en el enlace para abrir el sitio en vivo. Tu primera página web construida desde cero, fea e inútil, pero sigue siendo una página web. Sin saber diseñar, todos nuestros sitios web se verían tan poco atractivos como este, incluso si fuéramos diseñadores profesionales de Webflow La habilidad de diseño siempre es lo primero. Así que vamos a dejar el Webflow a un lado por ahora y aprender y practicar buen diseño y luego en la tercera parte, volver a Webflow para que podamos hacer que la magia suceda y diseñar y construir un sitio web hermoso 4. PARTE 1: SECRETOS DEL BUEN DISEÑO: No he estudiado en una escuela de arte. No creo que alguna vez haya estado dentro de uno. Mi materia favorita en la escuela era las matemáticas, y no me gustaba dibujar. Nunca en mi vida consideraría convertirme en diseñadora. Mi amigo y socio de negocios en ese momento, que era diseñador gráfico, iba a una escuela de arte y luego era diseñador gráfico habitual, y un día descubrí que no sabía dibujar. No pudo dibujar. Y le di una mirada extraña. ¿Qué quieres decir con que puedes dibujar? Eres diseñador gráfico, ¿verdad? Y él va como, eso es divertido, ¿no? Él explica que para ser diseñador, no hay que saber dibujar. No es necesario tener algún talento innato para la creatividad o ser un artista extravagante El diseño tiene reglas y técnicas y pautas, y solo necesitas aprender a seguirlas. Me quedé impactado. Yo pensé, Espera un segundo. Al igual que, sentí que acababa de descubrir algún secreto increíble que este mundo me ha estado ocultando. Y en esta parte del curso, esto es exactamente lo que quiero enseñarte. Todos esos pequeños trucos y pautas que hacen que algo se vea tan diseñado. Y quiero enseñarte y mostrarte lo sencillo que es convertir algo que es simplemente contenido aleatorio y convertirlo en una hermosa composición de diseño. Te voy a dar tareas y ejercicios de práctica para que puedas obtener tus manos. Sucio. Aprenderemos a usar una herramienta de diseño llamada Figma. Es una herramienta sencilla, y la vamos a aprender paso a paso, así que no vamos a darle la vuelta al revés. Aprenderemos nuevas características a medida que avanzamos y a medida que practicamos a través de diferentes diseños. Y de hecho, el diseño no está realmente en la herramienta. No te conviertes en diseñador gráfico o diseñador web con solo aprender Photoshop. O bosquejo o lo que sea. Su diseño es una escala mental en la realidad. No es esa, ya sabes, la creatividad en la que la gente realmente piensa. Obviamente hay mucha parte creativa por dentro, pero a menudo es una habilidad mental, y es una forma de ver las cosas. Algo así como la forma en que el mecánico de autos mira el auto y escucha el motor del auto y luego entiende solo mirar algo y con solo escuchar el sonido donde apretar los tornillos y dónde escucharlos Te voy a enseñar exactamente esta habilidad de diseño. Para que puedas tomar un lienzo en blanco y crear algo muy atractivo a partir de él. Algo por lo que la gente te va a pagar un buen dinero 5. Primeros pasos con Figma: Nos sumergimos en el diseño, primero configuremos Figma. Va a ser una visión general rápida. Te voy a mostrar solo una comprensión general de cómo funciona la herramienta y todas las características importantes que necesitaremos para diseñar sitios web en FIGMA. Te los enseñaré y te los mostraré a medida que nos movemos por el material y como los necesites. No enseguida. Entonces lo primero es lo primero, vamos a descargar FigMA, ¿verdad? Tenemos dos opciones Mac y Windows. Estoy en una Mac, pero la aplicación para Windows funciona y se ve igual. Así que incluso en Windows, podrás seguir mis tutoriales a la perfección. Si estás en Linux o algún otro sistema operativo, no te preocupes. Puedes usar FigMA directamente en tu navegador. Es así de increíble, pero te recomiendo encarecidamente usar la aplicación de escritorio si tienes una oportunidad. Ahora, vamos a instalarlo. En un MAC, solo necesita ser movido a la carpeta de aplicaciones, y eso es todo. No sé cómo funciona la instalación en Windows, pero estoy seguro que no es primera vez que instalas una aplicación, así que solo tienes que ir con el proceso de instalación habitual. Esta es la pantalla de registro inicial. Regístrate con Google si quieres hacerlo más fácil o regístrate con un correo electrónico. Te va a pedir que verifiques tu dirección de correo electrónico. Tu nombre Waco. ¿Qué tipo de trabajo diseñas? versión gratuita de Figm tiene algunas limitaciones, pero nada crucial para un diseñador freelance Puedes usarlo fácilmente de forma gratuita para siempre. Y vamos a llegar a nuestra página principal, que es nuestro navegador de archivos. Todos tus archivos Figma se mostrarán aquí. Figma está basado en la nube, por lo que necesitará Internet cuando trabaje con él. Puedes trabajar sin conexión, pero solo si cargas el archivo antes de desconectarte. Entonces puedes trabajar con un archivo, y una vez que vuelvas a estar en línea, se sincronizará y actualizará ese archivo. Está bien, pero no recomendaría hacer esto. No quieres arriesgarte a perder tu arduo trabajo. Empecemos por crear un nuevo archivo. Eso lo podemos hacer desde aquí. Ahora estamos en el editor Figma. Aquí es donde pasa todo. Nada de lo que temer , es bastante sencillo. Los archivos abiertos se mostrarán como pestaña algo así como su navegador. Y si quieres volver a la página principal para abrir otro archivo, puedes hacerlo desde este icono de aquí mismo. O si estás trabajando desde el navegador, entonces puedes hacer clic en la carpeta principal del archivo aquí mismo. Dirá borradores en la mayoría de los casos. Pero si estás trabajando bajo un plan de equipo, entonces podría decir el nombre del equipo o el proyecto. O en este menú desplegable, puede seleccionar volver a archivos Para volver al archivo, solo necesita seleccionar la pestaña abierta si el archivo aún está abierto. Pero si no está abierto, entonces todos sus archivos se mostrarán aquí en la pestaña RSN Las ubicaciones más precisas para esos archivos serán carpeta de borradores o una de las carpetas del equipo Pero el equipo es una función de pago y el plan gratuito sólo permite tres archivos. Entonces, en caso de que alguna vez recibas un mensaje que has alcanzado el límite de archivos, se trata solo de los archivos del equipo. Dentro de la carpeta de borradores, puedes tener archivos gratuitos ilimitados. Y como freelancer, la carpeta de borradores te funcionará bien Pasemos por una barra de herramientas aquí. Como puedes ver, solo tiene un puñado de herramientas, nada como lo que obtendrías en Photoshop. primera es una herramienta de movimiento, la herramienta predeterminada que se selecciona la mayor parte del tiempo. Hace exactamente lo que dice. Mueve objetos e interactúa con ellos. La siguiente es la herramienta de marco. Es similar a la mesa de trabajo que obtienes en otras herramientas de diseño Todos nuestros diseños comenzarán con un marco. Dependiendo para qué estamos diseñando, tenemos que elegir un tamaño específico, la pantalla para la que estamos diseñando. Entonces o estamos diseñando una pantalla para una computadora de escritorio, una laptop, iPhone, y así sucesivamente. Es este es un curso de diseño web, estaremos diseñando para computadoras de escritorio y portátiles. Se puede dibujar, pero mejor opción es elegir uno de los tamaños preestablecidos. Y elige la pantalla de este desplegable. Hay iPhones, Androides, tabletas, incluso portadas de Facebook Vamos a elegir uno de los tamaños de pantalla del escritorio, obviamente. No estás atascado con estas dimensiones. Si quieres, puedes redimensionarlo así. Por cierto, este movimiento de la lona que hice, el término técnico para esto es paneo Estoy haciendo esto deslizando con dos dedos en mi touchpad Si estás en una computadora portátil, deberías poder hacer lo mismo. Si estás usando un mouse, entonces puedes usar la rueda de desplazamiento para desplazarte hacia arriba o hacia abajo o mantener pulsada la tecla Mayús, y se desplazará hacia la izquierda o hacia la derecha. Pero una mejor opción con el mouse podría ser mantener pulsada la barra espaciadora que activará una herramienta manual, y luego puedes hacer clic y dirigir el lienzo como desees. También hay zoom que tendrás que hacer de vez en cuando en un panel táctil De nuevo, eso es fácil. Solo necesitas pellizcar con dos dedos exactamente como lo harías en tu teléfono. Y con un mouse, necesitarás mantener presionado un Control o comando en Mac mientras te desplazas. Bien, lo siguiente es una herramienta de forma. Cuando haces clic en una flecha diminuta, te permitirá seleccionar cualquiera de las siguientes formas como rectángulo, línea, etcétera Dibujemos un rectángulo. Es lo primero que se selecciona por defecto, y en el marco dibujas un rectángulo así. Haga clic y arrastre. Misma lógica para otras formas. Entonces tenemos una herramienta Pluma. No te preocupes por esto por ahora. No lo vamos a usar tanto. Junto a ella se encuentra una herramienta de texto. Bastante sencillo. La herramienta de comentarios, esto es para la colaboración. Cuando lo envías a tu cliente o miembros del equipo para que lo revisen, ellos pueden comentar directamente sobre cada elemento, herramienta muy práctica. Aquí tenemos el menú Acciones, que es el hogar de muchas características diferentes. Todos los ajustes y opciones de Figma los puedes encontrar desde aquí, por ejemplo, Zoom o modo oscuro De hecho prefiero el modo de luz. Puedes abrir el menú usando un atajo Control K o Comando K en Mac. De hecho, puede ver todos los accesos directos cuando pasa el cursor sobre cada uno de estos elementos de la barra de herramientas Dentro del Menú Acciones encontrarás pestañas para activos y plug-ins. Los activos son básicamente pequeños componentes que creamos en nuestro archivo, más sobre eso más adelante. Y plugins y widges que son creados por la comunidad, son como mini apps que pueden hacer que nuestro trabajo en Figma sea más eficiente y productivo A veces se les paga, a veces son gratis. Entonces tenemos un modo Dev, esa es otra característica paga que no es necesaria para este curso ni para el diseño web freelance. Es una característica para desarrolladores. Facilita el proceso de traspaso de diseño cuando el diseñador entrega los diseños a los desarrolladores para construir una aplicación o una interfaz web Los desarrolladores podrán encontrar todos los elementos e información necesarios en un formato y lenguaje que les sea más útil. Eso es todo lo que necesitas saber sobre la barra de herramientas por ahora. Por otro lado, tenemos el panel de propiedades. Lo divertido del panel de propiedades es que cambia en función de un objeto que hayas seleccionado. Seleccionamos un rectángulo y obtenemos todas las propiedades para este rectángulo en particular. Cuando seleccionamos texto, obtenemos propiedades ligeramente diferentes, fuente, tamaño del texto, así sucesivamente. Exploraremos cada una de estas propiedades más adelante cuando realmente las necesitemos. No hay que preocuparse por ellos ahora mismo. Por último, en el lado izquierdo, tenemos el panel de navegación, que cuenta con algunas secciones diferentes. Ahí está el menú principal. Verás aquí de nuevo todos los ajustes y opciones del FicMA Nombre del archivo y algunas acciones del archivo. Archivo versus puñalada de activo. Esos son los mismos activos que encuentras en el menú debajo de las páginas porque podemos tener varias páginas en nuestro archivo. Y la sección de capas. Cada nuevo elemento que creamos aparecerá aquí bajo capas. Ahora bien, ¿por qué se llama capas, y por qué no objetos o elementos o algo así? Porque yacían uno encima del otro. Existen en el espacio en capas. Por ejemplo, si queremos que el cuadro morado vaya por debajo, solo necesitamos arrastrar esa capa y moverla por debajo del rectángulo gris. Todos estos objetos son los hijos de nuestro marco llamado escritorio. Ahí es donde viven. Y si movemos alguno de estos objetos fuera de este marco, verás cómo se actualizará el panel de capas y moverá el objeto fuera del marco al lienzo general. Eso es todo lo que necesitas saber de Figma por ahora. Más características surgirán en todos los ejercicios de práctica que vamos a hacer. Si no has estado siguiendo, deja de hacer una pausa y sigue adelante y haz esto ahora mismo, luego continúa con la siguiente lección. Si en algún momento de este curso, te quedas atascado, son nuevas herramientas, a veces se actualizan y, ya sabes, cambian cosas diferentes, y puede que no sea tan rápido como actualizar las pantallas y todo. Obviamente, lo haré, pero, ya sabes, se mueven muy rápido, todas estas herramientas, y actualizan las pantallas y la interfaz de usuario muy rápido. Así que podría mostrarte algo y puede que de repente se haya ido. Házmelo saber. Voy a arreglar eso. Pero si te quedas atascado, siempre puedes dejarme un mensaje o hacer una pregunta en los foros de discusión. O yo o algún otro alumno te ayudaremos. 6. Primeros pasos con Figma: Nos sumergimos en el diseño, primero configuremos Figma. Va a ser una visión general rápida. Te voy a mostrar solo una comprensión general de cómo funciona la herramienta y todas las características importantes que necesitaremos para diseñar sitios web en FIGMA. Te los enseñaré y te los mostraré a medida que nos movemos por el material y como los necesites. No enseguida. Entonces lo primero es lo primero, vamos a descargar FigMA, ¿verdad? Tenemos dos opciones Mac y Windows. Estoy en una Mac, pero la aplicación para Windows funciona y se ve igual. Así que incluso en Windows, podrás seguir mis tutoriales a la perfección. Si estás en Linux o algún otro sistema operativo, no te preocupes. Puedes usar FigMA directamente en tu navegador. Es así de increíble, pero te recomiendo encarecidamente usar la aplicación de escritorio si tienes una oportunidad. Ahora, vamos a instalarlo. En un MAC, solo necesita ser movido a la carpeta de aplicaciones, y eso es todo. No sé cómo funciona la instalación en Windows, pero estoy seguro que no es primera vez que instalas una aplicación, así que solo tienes que ir con el proceso de instalación habitual. Esta es la pantalla de registro inicial. Regístrate con Google si quieres hacerlo más fácil o regístrate con un correo electrónico. Te va a pedir que verifiques tu dirección de correo electrónico. Tu nombre Waco. ¿Qué tipo de trabajo diseñas? versión gratuita de Figma tiene algunas limitaciones, pero nada crucial para un diseñador freelance Puedes usarlo fácilmente de forma gratuita para siempre. Y vamos a llegar a nuestra página de inicio, que es nuestro navegador de archivos. Todos tus archivos Figma se mostrarán aquí. Figma está basado en la nube, por lo que necesitará Internet cuando trabaje con él. Puedes trabajar sin conexión, pero solo si cargas el archivo antes de desconectarte. Entonces puedes trabajar con un archivo, y una vez que vuelvas a estar en línea, se sincronizará y actualizará ese archivo. Está bien, pero no recomendaría hacer esto. No quieres arriesgarte a perder tu arduo trabajo. Empecemos por crear un nuevo archivo. Podemos hacer eso desde aquí o aquí. Ahora estamos en el editor Figma. Aquí es donde pasa todo. Nada de lo que temer , es bastante sencillo. Los archivos abiertos se mostrarán como pestaña algo así como su navegador. Y si quieres volver a la página principal para abrir otro archivo, puedes hacerlo desde este icono de aquí mismo. O si estás trabajando desde el navegador, entonces puedes hacer clic en la carpeta principal del archivo aquí mismo. Dirá borradores en la mayoría de los casos. Pero si estás trabajando bajo un plan de equipo, entonces podría decir el nombre del equipo o el proyecto. O en este menú desplegable, puede seleccionar de nuevo a los archivos Para volver al archivo, solo necesita seleccionar la pestaña abierta si el archivo aún está abierto. Pero si no está abierto, entonces todos sus archivos se mostrarán aquí en el RSNStab Las ubicaciones más precisas para esos archivos serán carpeta de borradores o una de las carpetas del equipo Pero el equipo es una función de pago y el plan gratuito sólo permite tres archivos. Entonces, en caso de que alguna vez recibas un mensaje que has alcanzado el límite de archivos, se trata solo de los archivos del equipo. Dentro de la carpeta de borradores, puedes tener archivos gratuitos ilimitados. Y como freelancer, la carpeta de borradores te funcionará bien Pasemos por una barra de herramientas aquí. Como puedes ver, solo tiene un puñado de herramientas, nada como lo que obtendrías en Photoshop. primera es una herramienta de movimiento, la herramienta predeterminada que se selecciona la mayor parte del tiempo. Hace exactamente lo que dice. Mueve objetos e interactúa con ellos. La siguiente es la herramienta de marco. Es similar a la mesa de trabajo que obtienes en otras herramientas de diseño Todos nuestros diseños comenzarán con un marco. Dependiendo para qué estamos diseñando, tenemos que elegir un tamaño específico, la pantalla para la que estamos diseñando. Entonces o estamos diseñando una pantalla para una computadora de escritorio, una laptop, iPhone, y así sucesivamente. Es este es un curso de diseño web, estaremos diseñando para computadoras de escritorio y portátiles. Se puede dibujar, pero mejor opción es elegir uno de los tamaños preestablecidos. Y elige la pantalla de este menú desplegable. Hay iPhones, Androides, tabletas, incluso portadas de Facebook Vamos a elegir uno de los tamaños de pantalla del escritorio, obviamente. No estás atascado con estas dimensiones. Si quieres, puedes redimensionarlo así. Por cierto, este movimiento de la lona que hice, el término técnico para esto es paneo Estoy haciendo esto deslizando con dos dedos en mi touchpad Si estás en una computadora portátil, deberías poder hacer lo mismo. Si estás usando un mouse, entonces puedes usar la rueda de desplazamiento para desplazarte hacia arriba o hacia abajo o mantener pulsada la tecla Mayús, y se desplazará hacia la izquierda o hacia la derecha. Pero una mejor opción con el mouse podría ser mantener pulsada la barra espaciadora que activará una herramienta manual, y luego puedes hacer clic y dirigir el lienzo como desees. También hay zoom que tendrás que hacer de vez en cuando en un panel táctil De nuevo, eso es fácil. Solo necesitas pellizcar con dos dedos exactamente de la manera en que lo harías en tu teléfono. Y con un mouse, tendrás que mantener presionado un Control o comando en Mac mientras te desplazas. Bien, hasta el siguiente es una herramienta de forma. Cuando haces clic en una flecha diminuta, te permitirá seleccionar cualquiera de las siguientes formas como rectángulo, línea, etcétera Dibujemos un rectángulo. Es lo primero que se selecciona por defecto, y en el marco, dibujas un rectángulo así. Haga clic y arrastre. Misma lógica para otras formas. Entonces tenemos una herramienta Pluma. No te preocupes por esto por ahora. No lo vamos a usar tanto. Junto a ella se encuentra una herramienta de texto. Bastante sencillo. La herramienta de comentarios, esto es para la colaboración Cuando lo envías a tu cliente o miembros del equipo para que lo revisen, ellos pueden comentar directamente sobre cada elemento, herramienta muy práctica. Aquí tenemos el menú Acciones, que es el hogar de muchas características diferentes, todos los ajustes de Figma y opciones que puedes encontrar desde aquí, por ejemplo, Zoom o modo oscuro De hecho prefiero el modo de luz. Puedes abrir el menú usando un atajo Control K o Comando K en Mac. De hecho, puede ver todos los accesos directos cuando pasa el cursor sobre cada uno de estos elementos de la barra de herramientas Dentro del Menú Acciones encontrarás pestañas para activos y plug-ins. Los activos son básicamente pequeños componentes que creamos en nuestro archivo, más sobre eso más adelante. Y plugins y widges que son creados por la comunidad, son como mini apps que pueden hacer que nuestro trabajo en Figma sea más eficiente y productivo A veces se les paga, a veces son gratis. Entonces tenemos un modo Dev, esa es otra característica de pago que no es necesaria para este curso ni para el diseño web freelance. Es una característica para desarrolladores. Facilita el proceso de traspaso de diseño cuando el diseñador entrega los diseños a los desarrolladores para construir una aplicación o una interfaz web Los desarrolladores podrán encontrar todos los elementos e información necesarios en un formato y lenguaje que les sea más útil. Eso es todo lo que necesitas saber sobre la barra de herramientas por ahora. Por otro lado, tenemos el panel de propiedades. Lo divertido del panel de propiedades es que cambia en función de un objeto que hayas seleccionado. Seleccionamos un rectángulo y obtenemos todas las propiedades para este rectángulo en particular. Cuando seleccionamos texto, obtenemos propiedades ligeramente diferentes. Fuente, tamaño del texto, así sucesivamente. Exploraremos cada una de estas propiedades más adelante cuando realmente las necesitemos. No hay necesidad de preocuparse por ellos en este momento. Por último, en el lado izquierdo, tenemos el panel de navegación, que cuenta con algunas secciones diferentes. Ahí está el menú principal. Verás aquí de nuevo todos los ajustes y opciones del FicMA. Nombre del archivo y algunas acciones del archivo. Archivo versus Apuñalada de Activos. Esos son los mismos activos que encuentras en el menú debajo de las páginas porque podemos tener varias páginas en nuestro archivo. Y la sección de capas. Cada nuevo elemento que creamos aparecerá aquí bajo capas. Ahora bien, ¿por qué se llama capas? Y ¿por qué no objetos o elementos o algo así? Porque yacían uno encima del otro. Existen en el espacio en capas. Por ejemplo, si queremos que el cuadro morado vaya por debajo, solo necesitamos arrastrar esa capa y moverla por debajo del rectángulo gris. Todos estos objetos son los hijos de nuestro marco llamado escritorio. Ahí es donde viven. Y si movemos alguno de estos objetos fuera de este marco, verás cómo se actualizará el panel de capas y moverá el objeto fuera del marco al lienzo general. Eso es todo lo que necesitas saber de Figma por ahora. Más características surgirán en todos los ejercicios de práctica que vamos a hacer. Si no has estado siguiendo, deja de hacer una pausa y sigue adelante y haz esto ahora mismo, luego continúa con la siguiente lección. Si en algún momento de este curso, te quedas atascado, son nuevas herramientas, a veces se actualizan y cambian cosas diferentes, y puede que no sea tan rápido como actualizar las pantallas y todo. Obviamente, lo haré, pero se mueven muy rápido, sostienen estas herramientas y actualizan las pantallas y la interfaz de usuario muy rápido. Así que podría mostrarte algo y puede que de repente se haya ido. Házmelo saber. Voy a arreglar eso. Pero si te quedas atascado, siempre puedes dejarme un mensaje o hacer una pregunta en los foros de discusión. O yo o algún otro alumno te ayudaremos. 7. Diseño es King: echa un vistazo a este diseño de sección de héroe. Este diseño no está nada mal, pero hay una cosa mal en él. A ver si puedes notar individual. Cada elemento es de diseño variable, pero la composición juntos se ven algo apagado antes eran dibujar líneas en los bordes de cada elemento, verás que los elementos realmente no están alineados. Armonizar esto es bastante fácil. Nosotros sólo mintiendo. Las cosas son todo lo que podemos. Un simple truco. Cambia el mismo diseño, mirando desde torpe, puntera, ordenada y pulida. Ahora bien, si dibujara líneas en los bordes, se vería una calificación simplista con dos accesos verticales principales. ¿ Por qué alinear objetos hace que una composición se vea mejor? Es exactamente la misma razón por la que esta habitación luce mejor que esta habitación. Es la orden. Evitamos el caos y buscamos el orden, y todo lo que sea ordenado, simétrico y organizado será percibido como más bello que cualquier cosa que sea caótico y desordenado. Algunas de las reglas de diseño más importantes son sobre el diseño. Se trata de dónde poner las cosas, cómo arreglarlas, qué viene después de qué y las próximas lecciones estarán hablando de todas las técnicas de diseño y reglas relacionadas con el diseño. Este es sobre alineación, probablemente una de las más simples, las más básicas pero una de las reglas de diseño más poderosas que existen. Tan solo una simple alineación puede hacer que algo se vea diseñado. Por otro lado, la desalineación hará que parezca un trabajo descuidado y aficionado. Cuántos desarrolladores Web que no tienen antecedentes en diseño simplemente dejarán caer elementos de la página de forma aleatoria dondequiera que quepan. Esto hace que una página se vea desordenada y no atractiva en absoluto, pero aprovechamos todas las oportunidades para alinear objetos entre sí. Entonces creamos algo que se ve s estáticamente, más atractivo. Hay seis formas en que puedes alinear objetos alineados a la izquierda. Esa es la forma más natural de las cosas de revestimiento. Porque la forma en que leemos idiomas occidentales de izquierda a derecha, se siente lo más natural para nuestros ojos empezar a escanear objetos desde la esquina superior izquierda. Entonces tienes la alineación central. Esto se ve con frecuencia en armas en último diseño de impresión. Si estás diseñando para un conejo, hebreo y otro derecho deja idiomas que la mayoría alineación natural serían muescas de alineación correcta para impuestos. Pero para otros objetos a y hay tres formas similares del dedo del pie de los objetos de línea en el eje horizontal. Alineación central de línea superior de nuevo, pero ejes horizontales y la alineación inferior. Software de diseño casi antiguo tendrá botones de acción de alineación, y usarán este íconos exactos para representar ege feed mis usos tres ciclos a, y te mostraré dónde están. En este ejemplo, se puede ver que con una línea objetos en sus bordes izquierdos. Alineación es el primer pentagrama para una buena capa. Cuando empieces a alinear las cosas, verás que el diseño empieza a formar algún tipo de estructura. A esto se le llama el Grande. Es la forma de organizar los elementos en la página para ponerlos en una estructura reconocible. Pero, ¿qué diseño realmente le gusta la codicia que se divide en tamaños iguales? Entonces si dibujáramos ocho iguales con columnas que están espaciadas uniformemente y tomamos todos nuestros objetos y los alinearíamos con estas columnas, entonces obtendríamos un diseño que se siente mucho más equilibrio y diseñado. Y el paso final en este proceso es reutilizar tanto como sea posible los mismos valores. El gas vertical entre objetos son los 30 píxeles, pero el espacio horizontal es de 60 píxeles. El movimiento correcto aquí sería que esa brecha horizontal también fuera 30. Ahora tenemos un diseño verdaderamente equilibrado. ¿ Por qué pegar la codicia tan importante? Da al público la sensación de claridad. En realidad no se dibujan bien los acuerdos, ya sabes, están implícitos. Y ahí eso y público algo así lo siente. Y cuando Ah, algo se vea predecible y familiar y por el credo repetido, el público y el espectador confiarán más en el sitio web, y lo entenderán. Y saben que esta es la página web que no va a perder su tiempo. La regla de grupo es flexible en siempre diseñar dentro de lo grande A veces a veces lo hago. A veces hago caso omiso de ocho. A veces he estado de acuerdo. Y entonces, ya sabes, dejo que las cosas a veces salgan de las restricciones en chico conocen muchos diseñadores exactamente lo mismo, que es, ya sabes, podrían no usarlo, saludar completamente o podrían de alguna manera tenerlo. Pero, ya sabes, usar más de manera flexible. Pero para ti, en un principio, quiero que uses la codicia porque para los inicios y cuando estás aprendiendo a diseñarlo simplemente manera realmente increíble cómo tipo de arraigado este gran hábito de diseño dentro de tú, y luego más adelante puedes y no puedes hacerlo de manera un poco más flexible. Vamos a hacer un ejercicio de práctica después de esta lección, y te voy a mostrar cómo crear fácilmente acordado Inside Sigma y cómo Teoh diseña dentro de la cuadrícula. La mayoría de las reglas de diseño que vamos a estar hablando en este curso se pueden romper, aunque si estamos rompiendo una regla de diseño, tenemos que ver con una intención, porque si no lo estamos haciendo con una atención en la que no estamos realmente pensando, lo, probablemente estaban siendo descuidados. Un diseño muy común Lee fuera a usar en diseño Web es un centro lee out, que realmente no cae bajo una rejilla adecuada. Echemos un vistazo a este ejemplo. No hay una cuadrícula prominente en esta sección que los artistas liberen de fluir, y los elementos en el medio no están creando ningún tipo de cuadrícula. No obstante, todavía se ve bien y no se ve descuidado en absoluto porque al menos hay una alineación. Se puede romper la codicia, pero realmente se puede romper en alineación. Podemos sentir que los elementos de tesis de línea vertical imaginaria están alineados con el diseño de imprenta, el raramente uso alineación central. No obstante, a diferencia de la impresión, el sitio web se puede ver en cientos de tamaños de pantalla diferentes en cualquier lugar desde un diminuto dedo del pie del smartphone. Una gran pantalla de TV. Debido a estos son los alces se han vuelto receptivos. El contenido puede encogerse o expandirse, dependiendo de la pantalla se esté viendo en imprenta. El diseñador moldearía los elementos a su absoluto. Eran Lo que se imprime no iba a cambiar de forma o tamaño. Para que sepas que lograría un resultado óptimo. Es por eso que ves un diseño loco en revistas, pero no en Web. Entonces eso es alineación y avaricia en teoría. A continuación, vamos a practicar la alineación en Great para que puedas hacerlo como parte de tu proceso de diseño . 9. Proyecto: alineación y cuadrícula: Este video, vas a practicar la alineación. Vas a crear un diseño muy simple en Figma, y lo vas a enviar en una tarea Después de esto, es un video de seguimiento, así que dispara tu Figma. Bien, entonces no vamos a diseñar nada útil. El propósito de este ejercicio es practicar la alineación y adquirir algo de experiencia práctica con Figma. Vamos a bosquejar una sección de héroe de una página web, a veces también llamada encabezado o por encima del pliegue. No vamos a hacer nada elegante, ni imágenes, ni texto, solo un montón de rectángulo, algo así como un garabato Entonces, ¿qué es lo primero que insertamos cuando iniciamos algún diseño? Así es. Marco. A partir de mostrar esto en el tutorial de Figma, podemos agregar un marco seleccionando la herramienta de marco y luego seleccionando uno de los presets del panel de propiedades Seleccionemos el marco de escritorio. A continuación, vamos a definir nuestra cuadrícula para este marco. ¿Por qué? Porque queremos estructurar nuestro sitio web de una manera que se vea ordenada y organizada. Configurar una grilla en Figma es muy sencillo. Las cuadrículas se aplican a cada fotograma individualmente, por lo que necesitamos seleccionar el marco, y en el panel de propiedades, obtendremos una opción para agregar una nueva cuadrícula de diseño No olvides seleccionar el marco, lo contrario, esto no aparecerá. Por defecto, obtenemos esta cuadrícula bidimensional que divide un cuadro pequeños cuadrados que son de diez píxeles de tamaño, pero esta no es la cuadrícula que queremos Lo que queremos es una cuadrícula vertical que divida la página en varias columnas La cuadrícula de diseño más utilizada en el diseño web es la cuadrícula de 12 columnas. Por qué 12 columnas porque se divide muy bien. 12 es un múltiplo de tres y cuatro, por lo que 12 columnas se pueden dividir por la mitad con seis columnas a cada lado. Se puede dividir en tres con cada parte de cuatro columnas de ancho, o se puede dividir en cuatro con cada parte de tres columnas de ancho. Otras cuadrículas de diseño ofrecerán menos opciones. Por ejemplo, la cuadrícula de diez u ocho columnas se puede dividir en tres tamaños iguales, por lo que es muy limitante. Aplica rejilla de 12 puntos desde el menú desplegable, selecciona columnas en el conteo, escribe pin 12 Ahora vamos a ajustar algo de espaciado de nuestra cuadrícula. El contenido del sitio web generalmente no se presenta en los bordes. Hay márgenes en los bordes de cualquier sitio web y el contenido se presenta en el centro. Podemos aplicar esos márgenes a nuestra cuadrícula aquí mismo. Algo así como 140 píxeles debería estar bien. Si aumentamos el margen, puedes ver cómo las columnas empiezan a encogerse. Una cosa más que me gusta ajustar aquí es el espaciado entre las columnas. A esto se le llama la cuneta. Por defecto, son 20 pixeles, pero para mí, no es suficiente. Me gusta crear un poco más de separación spep entre los objetos alrededor de 30 o 40 píxeles Bien, esta es nuestra grilla. Me gustaría que crearas exactamente la misma cuadrícula con los mismos valores. Aquí es donde vamos a diseñar el contenido de nuestro sitio web. La cuadrícula es una superposición. No se puede seleccionar con el ratón, y podemos mostrar u ocultar la cuadrícula desde aquí. Hay un atajo junto a él. Se está mostrando para Mac, que es Control G. En Windows, probablemente sea otra cosa, pero podrás verlo si estás en Windows. Y ahí, ahí es donde irá nuestro diseño. A continuación, quiero darle a este marco un color de fondo sin ningún motivo en particular, solo por diversión. ¿Cómo lo hacemos? Recuerda, para cualquier objeto que quieras editar, primero tienes que seleccionar ese objeto. El panel de propiedades se actualiza instantáneamente a medida que lo selecciona, y ahora tenemos una opción aquí mismo para cambiar el color de fondo. Este es un seleccionador de color muy estándar que verías en casi cualquier otra aplicación de diseño o no diseño Posteriormente, aprenderemos el color con más detalle, y también te mostraré cómo trabajar este seleccionador de color como un profesional Puedes elegir cualquier color que prefieras o mantenerlo blanco si lo deseas. Si eres color de fondo y la cuadrícula no tiene un buen contraste, siempre puedes ajustar el color de la cuadrícula. Ves, eso es mucho mejor. Ahora, comencemos a exponer algunos elementos generales que tendríamos en un sitio web estándar. Recuerda, solo estamos haciendo un wireframe súper simple, así que vamos a usar solo rectángulos ¿Qué tenemos encima de cada sitio web? Una barra de navegación, que suele contener un logotipo y algunos enlaces a diferentes páginas en el lateral. Dibujemos un rectángulo. Esa va a ser nuestra barra de navegación. A veces me oirás usar una palabra barra de navegación como abreviatura de barra de navegación Bien. A mí me gusta ser preciso, así que voy a cambiar la altura de este rectángulo a 70 pixeles a partir de aquí. El H es un valor para la altura y el W es el valor para el ancho. Aquí tienes un consejo rápido. Si presionas las flechas de tu teclado hacia arriba y hacia abajo, mientras estás dentro de este campo, puedes aumentar o disminuir los valores así como así. Y si mantienes turno al mismo tiempo, en lugar de aumentar el valor en un píxel, lo incrementará en diez píxeles. Bien, vamos a darle a esta barra de navegación un color un poco más oscuro. Entonces una vez más, si queremos agregar en un objeto, lo seleccionamos, y tendremos todas las propiedades en el panel aquí mismo, y podemos cambiar el color de campo de este rectángulo desde aquí. Voy a hacerlo negro, pero lo haremos transparente. Este deslizador aquí cambia la transparencia del color. Esto se llama comúnmente opacidad. Probablemente hayas escuchado este término antes. Además, se puede establecer la opacidad a partir de este cuadro de porcentaje. Vamos a establecerlo en 20%. Este es un pequeño truco de diseño para mantener la misma paleta de colores. Puedes usar superposiciones en blanco o negro que sean semitransparentes Como resultado, el color de fondo se propaga a través él y se obtiene un color que forma parte de la misma paleta de colores. A continuación, dibujemos un logo en el lado izquierdo. Vamos a dibujar un rectángulo como un porta lugares para el logotipo. Aquí es donde empieza a entrar en juego la parrilla. Cuando empecemos a dibujar objetos, los vamos a colocar dentro de estas columnas de rejilla. Nuestras opciones son encajarlo en una columna, dos columnas tres, y así sucesivamente. Para nuestro logo, tenemos la opción ir por una o dos columnas. Vamos con dos. La grilla hace que nuestro proceso de decisión sea mucho más sencillo. Solo tenemos que decidir entre dos tamaños en lugar de decidir entre cientos de tamaños de píxeles diferentes. A medida que cambie el tamaño de los objetos, verá las guías inteligentes que aparecen cuando su objeto se alinea con el borde de la columna de la cuadrícula que le ayudarán a dimensionarlos Y cambiemos el color. El color depende de ti. Otra cosa que quiero hacer es hacer este rectángulo redondeado. Para ello, tendremos que cambiar lo que se llama radio de esquina. Lo quiero completamente redondeado. Este valor dependerá las dimensiones del rectángulo, por lo que solo aumentarlo hasta que esté completamente redondeado. No importa si obtienes un valor muy raro. Ese es nuestro marcador de posición para el logotipo. Ahora necesitamos enlaces de navegación. Sólo voy a duplicar esta caja. Hay un par de formas en las que puedes hacer eso. Las formas más obvias de ir Control C, Control V o Comando C, Comando V en el mac. Eso va a pegarlo justo encima, y luego puedes arrastrarlo desde ahí. Pero mi forma favorita de duplicar algo es presionar hacia fuera u opción en Mac y luego arrastrar ese objeto. Eso va a duplicar el objeto original. Hagamos que este píxel bronceado sea más pequeño y encajemos en una columna solo para que se vea un poco más como un enlace. Ahora vamos a arrastrar algunos más de estos y alinearlos con columnas. Las guías rápidas rojas te ayudan con la alineación. Sin embargo, Figma también puede hacer la alineación por ti. Primero, tenemos que seleccionar los objetos que estamos alineando. Simplemente puedes arrastrar un cursor alrededor de tus objetos. Ahora podemos alinear estos objetos con una de estas opciones. Probablemente puedas reconocer las formas de la lección anterior. La primera opción alineará los objetos a la izquierda, pero eso no es lo que queremos. Queremos que esta opción centre los objetos horizontalmente. Y bien, esa es nuestra barra de navegación. Ahora para el resto del contenido. Bien, ¿qué tenemos en nuestra sección de héroes? Un titular, a la derecha. Nuevamente, dupliquemos este rectángulo y hagamos que se vea más como un titular. Después del titular, generalmente tenemos un párrafo que explica la empresa o el producto. Dibujemos algo que parezca un párrafo. Todo bien. Ese es nuestro marcador de posición de párrafo Y después del párrafo, normalmente tenemos botones que nos piden que nos inscribamos, aprendamos más, y así sucesivamente. Y esa es nuestra sección de héroes. Veamos cómo se ve sin la grilla. Eso es todo, un ejercicio muy sencillo para que comiences y estés cómodo con Figma y practicar los pasos iniciales del diseño web No creamos nada útil, pero dimos un paso muy importante. Jeff Pesos, al director general de Amazon le encanta este dicho latino paso a paso con ferocidad Así es como vamos a abordar este curso. Vamos a dar un paso a la vez, llevándonos ferozmente al gol final 10. Diseño de la importancia de la jerarquía visual: conocer enlaces autos dot com una de las webs más aterradoras que he visto nunca. ¿ Qué hace eso que algunos sitios web tan hilaradamente terribles? ¿ Y qué hace que otros looks bien diseñados ya cubiertos? El primer gran motivo por el que la alineación esta página odia la alineación su anti aliado. El segundo gran motivo es una jerarquía visual. Todo objeto de esta página olvidada de Dios exige nuestra atención todo al mismo tiempo. No sabemos por dónde mirar por dónde empezar nuestro viaje, y eso puede ser tan abrumador que preferiríamos cerrar la página. Ahora esta página hay una jerarquía visual muy fuerte. ¿ Qué es lo primero que miraste? Probablemente ya sea ese arte funky, colorido en el paseo o el titular. Después viene el resto de los elementos, uno por necesidad. Esta composición nos tomó de la mano y nos guió paso a paso en lo que fue la información más importante Primero y segundo y así sucesivamente. Echa un vistazo a los dos botones. Hay una jerarquía clara, incluso entre ellos. Obviamente, el botón completo es el Alfa Doc. esto se le llama un alto rock visual, y es un principio fundamental fuera del buen diseño. La jerarquía visual tiene mucho que hacer. El modo en que funciona nuestra atención. Simplemente no podemos enfocarnos en más de una cosa a la vez. Esto es especialmente cierto fuera de nuestra visión. La única fracción muy pequeña de lo que vemos lo que miramos es una alta definición. El resto es una periférica de baja resolución, er, borrosidad periférica. Haz esto, haz un cartel de pulgares arriba, pon tu mano delante de ti y mira directamente tu miniatura. Y ese pequeño clavo es la alta definición es la única alta definición que se ve el resto fuera. Es baja rez y bastante borrosa. El jerarquía en el diseño comienza con un punto focal. Tom Hanks sentado en el banquillo es el innegable objetivo visual de este cartel. Es el Hank más interesante. Piensa en un punto focal como un foco en un escenario. Ya ves cómo esta etapa no es en realidad tarde. Es oscuro y más antiguo, pero las líneas brillan en Michael Jackson, lo que lo convierte en el punto focal obvio en esta etapa. Si tuvieran el escenario completamente mentido, entonces todo lo demás sería visible. Pero ese no es su objetivo. Nuestro interés visual obviamente está en Michael, y los diseñadores escénicos se han asegurado de darle al público exactamente que podríamos Este diseño este gráfico chicos el punto focal fuera de esta composición? Es el héroe principal en ella. Es exactamente por eso que estamos para dos que gráfico principal en las páginas. El tiro de héroe fue Hacer un poco autocrítica fuera de uno de mis primeros trabajos esta la página de préstamos que arriba construyó para una agencia inmobiliaria. Me estrecho un poco cuando veo un error de diseño en Sur mi trabajo temprano. Pero, ¿qué vas a hacer? Es el proceso de aprendizaje. El claro villano fuera de esta obra es definitivamente una falta fuera de la jerarquía visual adecuada. Las formas tipo de éstas sin éxito tratando de ser el punto focal. No obstante, no se supone que esté encima de ese Irak. No es el mensaje principal de esta página. Entonces, ¿cómo es que intenta robar tanta atención cuando hay una gran imagen de fondo como esta? Por lo general es porque queríamos ser el héroe para que el público empezara por ahí, pero eso no está pasando aquí. Es oscuro, baja calidad, y no está claro qué demonios está pasando en la imagen. no hablar de cómo la enorme forma y los impuestos que cubren tanto que recoge y maravilla. ¿ Qué hace esta imagen? Terribles juntos? No tiene valor. Es sólo añadir más ruido a la composición. Jugar fondo sería una enorme mejora a esto. Lo mismo con la copia. No hay una jerarquía clara. Es difícil decir dónde titular y dónde comienza párrafo, porque son tan similares y de estilo cuando vemos buen diseño, muchas veces es una jerarquía visual que contribuye a su belleza. ¿ Qué hay? Estaban diseñando un sitio web o un abogado inventado llamado Vinson Schwartz. ¿ Cuál es lo más importante en esta página? Fácil. El hecho de que sea abogado de Boston o es su propio expediente? ¿ O su foto es la que no conocemos? Porque no hay jerarquía. Todo parece, Bueno, realmente no podemos seguir la narrativa. Esta es una historia completamente diferente. Es 100% de mejora, y no he hecho mucho. He usado algunos trucos de diseño para crear una clara jerarquía entre los objetos, y te voy a enseñar todo sobre estos trucos más adelante en esta parte del curso, puedas tomar algo que se parezca a un aficionado, colocando elementos en la página al azar y convertirla en guerra bien pulida por la que te pueden pagar muy bien. Vamos a descomponer el alto ranking aquí. ¿ Tenemos un punto focal? Obviamente, es la foto de Vincent y ¿cómo está regulado el resto del alto? El segundo e importancia? Yo diría la etiqueta con el nombre porque lo cerca que está del punto focal. Es parte de ello. Por lo que el espectador mirará la imagen y el nombre en un rápido oh que el titular Bold All Caps . Cuarto es en realidad el botón antes del impuesto porque es ah, objeto más grande con algo de espacio en blanco a su alrededor. Y finalmente, esto arriba tenía texto. Entonces, ¿qué hice exactamente aquí para crear esta jerarquía visual? ¿ Por qué es esto? Y casi ninguna jerarquía? Pero esto tiene un punto vocal muy distintivo y una jerarquía visual claramente definida entre los elementos creen que esto tiene que ver con tamaños y pesos o elementos. El tamaño y el peso es lo que suele definir la jerarquía. También hay otras formas, como contraste de cuello o imágenes que llaman mucha atención y así sucesivamente. Pero los diseñadores se basan principalmente en el tamaño y el peso primero. Lo que hice fue aumentar el tamaño de la foto. Yo lo hice el elemento más grande. Eso es todo. Cualquiera que sea el más grande de la pantalla atraerá más atención. Es así de sencillo. El rectángulo morado detrás de la imagen también está trayendo más atención a la foto. Sin ella, tendría que hacer la foto mucho más grande. Entonces he definido la jerarquía entre el párrafo titular y el botón. Hice el titular Big, Bold y all caps. No sólo Up hizo el tamaño divertido mucho más grande que el original, sino que también lo hizo extremadamente bola thes. audacia es a lo que me refiero como un elemento de peso a menudo. Se ve pesado en las familias de teléfonos. Hasta verás el estilo llamado Habit. El párrafo debajo del titular es significativamente menor que el titular. Es como David y el go ¡Hyah! Es una espera telefónica regular, gorras pequeñas y tamaño de teléfono pequeño y el botón que he hecho transparente con solo las fronteras. Esto se conoce comúnmente como el Botón Fantasma. No suele querer usar esto como botón primario, sino para acciones secundarias y en los casos en que desee disminuir su significación. Es un gran uso. Y por último pero no menos importante, he usado una alineación de bateadores para el contenido antes de que todo estuviera solo centrado en el medio. Yo sí abro tu alineación central, pero a menudo no hace un buen trabajo y hacer que el diseño luzca pulirlo y organizado la alineación izquierda con pactado definitivamente hace un mejor trabajo como un ejercicio divertido. Quiero que prestes atención a los diseños que te rodean. Presta atención a las carteleras y carteles, volantes que la gente te entrega y obviamente los sitios web. Y mira, si el diseñador hubiera usado una buena jerarquía visual o no, y arriba a continuación, vamos a practicar la jerarquía, quedarnos. 11. Proyecto: jerarquía visual: Este video, vamos a practicar jerarquía visual. Vamos a tomar el contenido de ese sitio web de abogado y aplicar lo que ya hayamos aprendido sobre jerarquía visual y alineación y practicarlo y aplicarlo a nuestro ejemplo. Es un video de seguimiento, así que enciende tu Figma. Ir al archivo Figma que tengo vinculado en los recursos. Los archivos que están enlazados deben crear automáticamente una copia en su cuenta una vez que inicie sesión. Si junto al nombre del archivo, dice solo vista o bloqueado. Eso significa que no duplicó. Deberá crear una copia del archivo antes de poder editar. Junto al nombre del archivo, haga clic en la flecha y seleccione duplicar a sus borradores. Eso creará una copia del archivo en tu cuenta de Figma, y podrás editar el archivo como desees Ahora, vamos a darle otro rehacer a este diseño. Sólo tenemos que aplicar lo que ya hemos aprendido hasta ahora. Verás cómo pensar en jerarquía y alineación va a encargarse de la mayor parte del diseño para nosotros. Empecemos con nuestra grilla. ¿Recuerdas cómo agregar eso? Tenemos que seleccionar primero el marco, y luego aparecerá la opción de cuadrícula de diseño en el panel de propiedades. Al igual que la última vez, columnas 12 canales de 30 píxeles, pero el margen de 60 píxeles esta vez porque estamos usando un marco MacBook más pequeño en lugar del escritorio La barra de navegación encaja perfectamente en los bordes de esta cuadrícula porque esto es exactamente lo que estaba usando al diseñar la barra de navegación Por esa razón, podemos dejar la barra de navegación en su posición. Verás que los enlaces en la barra de navegación no se alinean con las columnas de la cuadrícula, pero eso está bien Como dije antes, la grilla es una pauta, no una regla contundente. No siempre tenemos que tomarlo literalmente. Si alineamos el botón y los enlaces a columnas, en este caso, no obtendríamos los mejores resultados. Por ejemplo, una columna es demasiado pequeña para el botón, y dos columnas son demasiado grandes. Pensemos en la jerarquía visual. Recuerda cuál es el nombre del objeto visualmente más interesante, el punto focal. Usar la foto como punto focal es una buena idea. Cuando tienes fotos, especialmente de personas, por lo general es una gran idea convertirlas en el punto focal. Entonces, ¿cómo hacemos eso? La última vez, usé algunos trucos para llamar más la atención sobre ello, pero podemos ir más simples que eso. Hacerlo muy grande siempre funciona. Quieres que algo se note, hazlo grande bebé. Tan simple como eso. Porque es una foto vertical, como puedes ver, no hace una buena foto de fondo. En cambio, podemos usarlo en la mitad de la pantalla. Bien, entonces esta foto está encubriendo la barra de navegación. Recuerda el panel Capas. Al ser una capa más alta, cubre todo lo que hay debajo. Tenemos que moverlo por debajo de la barra de ahora. Podemos hacer eso ya sea arrastrándolo en el panel Capas, pero formas más fáciles de usar una opción que haga esto por nosotros. Haga clic derecho sobre la foto y seleccione Enviar al Atrás. Esto enviará foto todo el camino a la parte de atrás. Ahora, la barra de navegación está en la parte superior. Pero como el impuesto navbar es oscuro, no podemos ver nada, arreglemos esto Voy a desactivar el diseño de la cuadrícula para poder ver mejor lo que está pasando. Podemos desactivar eso para todo el documento desde aquí, pero me verás a menudo usar un atajo. Ahora hagamos blancos los enlaces de la barra de navegación. Bueno. Hagamos algo similar con el botón. No es muy visible. Podría, por supuesto, voltear los colores, hacer que el botón sea blanco y el texto oscuro. Pero una opción más atractiva en este caso es usar ya sea un botón fantasma o uno semitransparente. Cambie el relleno de fondo a blanco y disminuya la opacidad del relleno de color a aproximadamente diez a 20% Me gustan mucho estos botones semitransparentes. Tienen un aspecto muy elegante para ellos. Puedes ver cómo nuestro diseño está empezando a tomar una forma mucho mejor con modificaciones muy simples. Tenemos un punto focal innegable de esta composición. Ahora, organicemos mejor nuestro contenido y creemos una jerarquía visual entre ellos. Primero, alinémoslos a la izquierda y encajémoslos en una cuadrícula. Ahora tenemos que decidir cuál va a ser nuestro mensaje primario. Aquí, tenemos que empezar a pensar un poco más en nuestros objetivos del sitio web y los visitantes. Ser diseñador no es solo hacer que las cosas se vean bonitas. A menudo se trata de pensar en los objetivos de tu diseño y en cómo lograr esos objetivos de manera más efectiva. Una sección de héroes de casi todos los sitios web tiene que responder tres preguntas para el usuario. ¿De qué trata este sitio web? ¿Qué voy a sacar de este sitio web y cómo lo consigo? La primera pregunta es, ¿de qué se trata este sitio web? Bueno, se trata de Vincent Schwartz, quien es un abogado de divorcios de Boston Ahora bien, de estos dos datos, su nombre y abogado de divorcio de Boston, cuál es más importante? Esto puede depender de algunos otros factores. Por ejemplo, si es un abogado bien conocido, entonces su nombre sería más importante para mostrar primero. Si no se le conoce, entonces es más importante demostrar que esta página trata sobre el abogado de divorcio de Boston. Digamos que sabemos por parte del cliente que su nombre es una información importante y necesita mostrarse como la información principal. Caso, vamos a hacer el nombre grande y audaz. Voy a ir mucho más grande en este momento porque el punto focal, la foto es mucho más prominente que puedo permitirme un texto más grande. En mi ejemplo anterior, no pude ir demasiado grande porque la foto era más pequeña. Para la fuente titular, he elegido play for display font y uso el estilo negro, que es su forma más pesada Hay una sección completa de este curso dedicada a la tipografía Es un gran tema en el diseño, y aprendes mucho sobre cómo elegir fuentes de una manera que tus diseños se vean geniales. En este ejercicio, puedes elegir la fuente que más te guste, pero presta atención a cómo eliges los pesos y tamaños de estas fuentes. El peso de la fuente se puede seleccionar desde aquí. cantidad de opciones que obtenga aquí depende la familia de fuentes y de cuántos pesos viene con. Bien, como he elegido un estilo grande y pesado para el nombre, voy a hacer lo contrario para el texto del abogado de divorcio de Boston. Voy a quedarme con cualquier fuente que fuera y elegir un estilo ligero y hacerlo aún más pequeño. El subtítulo definitivamente no compite por la atención El nombre recibe todo el Spotlight, que es exactamente lo que queremos. La jerarquía entre ambos es clara. A continuación, ajustemos el texto del párrafo. Voy a disminuir un poco más el tamaño del texto, y eso es todo. El botón voy a vivir como es. Voy a hacerlo más pequeño, y eso va a ser suficiente para disminuir su importancia. Eso es todo. Se ve bastante limpio. ¿Qué tal la jerarquía? ¿Tenemos un punto focal? Usted apuesta a que sí. ¿Qué tal el resto de los elementos? Tenemos nuestro titular que es visualmente el texto más notable, y luego el resto de los elementos con diferentes grados de importancia visual. Y eso es todo. Si no has estado siguiendo a lo largo, ahora es tu turno. Siéntete libre de desviarte de nuestra versión si la prefieres. Lo importante es alcanzar dos metas, que es A, tener un punto focal y B tener diferentes niveles de importancia visual entre otros elementos. Depende de ti si quieres usar diferentes colores, no hay problema, diferentes fuentes, diferente arreglo, o puedes recrear mi Versión píxel a píxel No importa. Lo importante es que empieces a pensar como diseñador y empieces a notar y tener jerarquía visual en tu mente en todo momento 12. Diseño de la: cuidado de las ilusiones ópticas: entre estas dos mentiras horizontales, sólo los leones, sin contar sus propias cabezas, que uno fuera de estas líneas es más largo, Al igual que el 8% de la gente. Probablemente fuiste con la línea de fondo, pero la verdad es que su exacta la misma longitud este tipo de ilusiones ópticas suceden todo el tiempo. En diseño, tomarás dos objetos, los medirás y verás que a menudo son de tamaño exacto. Pero nuestros ojos dicen es que el círculo es un poco más pequeño que el cuadrado. Entonces, ¿qué hacemos en tales casos? ¿ Vamos? ¿ Qué dice gobernante, O confiamos en nuestros ojos? La mayoría de las veces, vamos a confiar en nuestros ojos. Eso significa que si un objeto aparece un poco más pequeño que su contraparte, necesitamos compensar la ilusión óptica y aumentar ligeramente el tamaño hasta que ambos aparezcan el mismo tamaño. Entonces vamos a tener a objetos que aparezcan del mismo tamaño. Esto es más importante que sus tamaños reales de píxel porque el público no va a sacar a los gobernantes y empezar a medir. Pero si algo se ve más pequeño, encontrarán que debería. Las ilustraciones son elementos gráficos comunes que usarás en tus diseños Web. Muchas veces estas ilustraciones, o Aikens, van a tener muy, uh, formas. Va a hacer igual tamaño. Las ilustraciones se ven muy diferentes entre sí. En este ejemplo, Envelope on the Laughed parece más grande. Está dominando el icono de la derecha cuando se supone que tienen la misma jerarquía. A pesar de que sus tamaños son idénticos, tienen tanto la misma altura como la misma con, pero el sobre tiene cuerpo mucho más lleno en comparación con esa carpa. Esto es lo que los diseñadores suelen referirse como las formas de salir del objeto, y los objetos más pesados se verán más grandes. Se verán más anchas o más altas, por lo que necesitamos compensar manualmente el cuerpo tenso y más ligero al aumentar sus dimensiones reales de píxel. No hay regla sobre cuánto aumentar. Esto se tiene que hacer por yo lo aumento hasta que se sientan como de igual tamaño. Entonces obtendrás una composición equilibrada que se siente alineada con tamaños a juego. Estos pequeñitos sí nos dicen es lo que hace que la página parezca que fue diseñada por un aficionado o un profesional. La mayoría de los diseñadores y desarrolladores web que no tienen antecedentes en diseño gráfico ni nada diseñado relacionado. Miden las cosas por un gobernante. Y lo que pasa es que los resultados salen a ser inconsistentes y bastante torpes, declinados o el usuario no va a notar lo que está exactamente mal con una página. Lo notarán, pero no sabrán qué es exactamente lo que está apagado con él, pero fallarán que la página no esté diseñada con comillas. Aquí hay otra ilusión óptica muy común. Esta waas, una de las primeras, es Salvo es que recibí de mi mentor de diseño. Siempre que necesitamos poner algo, por ejemplo, impuesto dentro de caja, ¿qué suele hacer uno? Encuentra el medio exacto fuera del contenedor en su lugar ahí, elemento justo en el centro. El tema con esto es que el texto se siente como si se estuviera hundiendo. Incluso se siente como espacio por encima del Texas más grande en comparación con el espacio debajo de él, sensación de hundimiento no es una buena impresión para ningún diseño. En cambio, lo que queremos hacer es muesca un poco el impuesto hacia la parte superior, que se sienta como flotando recordar fácilmente. Piénsalo como un barco hundiendo. No buena nave flotante. Genial. Esto no significa que siempre debas subirlo en lugar de alinearte exactamente en el medio. A veces no será necesario. Dependerá de la tipografía, espaciado y demás, al igual que todas las ilusiones ópticas. O aparece, o no hace falta arreglar una ilusión si no existe. Pero si ves que esto se hunde, el hecho, entonces arréglalo. De hecho, los objetos de aspecto más pesado se sentirán como si estuvieran hundiendo Mawr, y los objetos más ligeros tenderán a sentir como si estuvieran flotando. Es una locura lo preciso que es esto para un mundo real. 13. Diseño de la proximidad: una cosa. Los diseñadores principiantes tienden a hacer un espacio fuera elementos por igual en la página. Principalmente, lo hacen para llenarlos al espacio porque todos los diseñadores principiantes tienen miedo al espacio vacío . Más sobre esto en la lección posterior. Pero lo que realmente le gusta al diseño es agrupar elementos más cerca uno del otro si tienen algo en común. Este es un concepto de diseño llamado proximidad. El concepto básico de la proximidad es que piensa que están relacionados deben estar muy unidos, y las cosas que no están relacionadas deben estar más alejadas. En este ejemplo, he movido todos los enlaces de navegación más cerca uno del otro porque están relacionados. Tienen un mismo contexto. Ahora el titular está más cerca del texto de abajo porque están relacionados. Los botones están un poco más lejos del impuesto, pero dos de ellos están cerca uno del otro porque son porras de acción similares. Ambos ofrecen qué hacer a continuación, y finalmente el pequeño impuesto debajo del botón verde. Me he acercado mucho más al fondo porque es una especie de descripción fuera de los botones para que incluso pueda existir sin ella. Ahora qué pasa si pones bien elementos no relacionados uno al otro, esto implicará de relación, que de hecho no existe. Por ejemplo, si ponemos un eslogan justo al lado de los enlaces de navegación porque fuera de su proximidad, los usuarios confundirán fácilmente el eslogan con un elemento de menú y pensarán que es un enlace de clip clicable , sobre todo si esos elementos tienen un estilo similar. La proximidad es una guía de diseño muy útil. No sólo hace que el contenido sea fácil de entender y digerir para el usuario, sino que también lo hace bonito y de diseño. Y supongo que sabes cosas que son simples y fáciles de entender es bastante bonitas para los usuarios. 14. Cómo usar la tipografía de tipografía bellamente: cada sitio web por ahí tiene texto en él, y mucho diseño depende de cómo seleccionamos esos estilos gravados. A esto se le llama tipografía. La tipografía no es sólo elegir el teléfono correcto. Se trata de elegir la combinación de esos teléfonos, los diferentes estilos como flaco y audaz y regular y esperar, elegir tipos de letra y teléfonos adecuados para las ocasiones correctas y contactos brillantes. La topografía puede hacer grado de sitio web y con una legibilidad sobresaliente. O puede hacerlo de aspecto infantil, o tal vez fuera de contactos o parecer confuso y muy difícil de deshacerse. Puedes tener fácilmente un sitio web que sea solo tipografía y aún así hacer que se vea bien y diseñado sin ningún elemento gráfico. De hecho, el sitio web más popular del mundo es principalmente solo texto. Si grava tan importante en el diseño, entonces debe haber algunas reglas y lineamientos sobre cómo elegir los y utilizarlos, ¿no? Apuesto a que hay, y aprenderás todo sobre ellos en próximas pulgadas menos. Seguir las sencillas pautas hará que tus diseños se vean geniales. Me escucharás usar los términos tipo tipografía y caídos intercambiablemente tipo de corto para tipografía, y la diferencia entre tipografía y fuente es esta en este caso. Hola, Familia de tipografías Vatikai za que tiene muchos estilos de teléfono diferentes en ella, como luz, negrita y así sucesivamente. No importa qué término utilicemos, no realmente, pero sigue siendo bueno saber la diferencia y no confundirse. Recuerdo que estaba confundida al principio porque todos usaban lo que quisieran y él tenía teléfonos y tipos y tipos y tipos de letra, y yo estaba como, ¿Estoy usando lo correcto para mis diseños? 15. Tipografía: tipo viene con una personalidad: cada vez. Cara tiene personalidad. Algunos son divertidos y juguetones, rayados de verano y rubios, y algunos se sienten académicos y lujosos. El carácter de una tipografía es tan importante como elegir el atuendo adecuado para la ocasión correcta . No quieres estar usando shorts de carga en una cita. En restaurante ofensivo, por ejemplo, una tipografía llamada Proxima Soft sería muy adecuada para una página de vacaciones de invierno pero estaría completamente fuera de lugar en una página que vende espacio de oficina de lujo. ¿ Por qué es este el caso? Porque Proxima Soft tiene una personalidad casual y amigable, al igual que el nombre Heene's. Las escaleras son suaves y redondeadas. Parecen como si estuvieran hechas de nieve. Sería adecuado para sitios web que estén relacionados con días santos o Niños. Comida casual, tal vez para sitios web que quieran sentirse amables y accesibles. ¿ Por qué no funciona para el lujo de la web inmobiliaria? Para empezar, la foto nos dice mucho. Se ve esa racha rectangular arquitectura er, que ya está dictando el estado de ánimo fuera de esta composición. Es pedir algo rayado y recto, pero lo más importante, come el contexto. lujo es el pabellón clave, y no hay nada de lujo en Proxima Nova Soft. Por otro lado, una tipografía llamada Adoni sería un excelente ajuste para esta página. Es una tipografía de aspecto clásico. Se ve serio, recto y elegante, pero moderno. Exactamente las palabras que utilizarías para describir el espacio de oficina de lujo. Pero, ¿cómo podemos decir ¿Cuál es la personalidad de la tipografía? En realidad, no es tan difícil. Existen ciertas clasificaciones en las que cae cada tipografía. Esos ya cuentan mucha historia sobre el tiempo Vamos a pasar por ellos en nuestra siguiente lección. Y después de eso, hagamos un pequeño ejercicio para practicar personalidades de fase prototipo tiefest. 16. Tipografía: categorías de tipos de letras: De pie las categorías de tipografía te facilitará la elección de la tipografía correcta, fuente correcta para tu proyecto porque mucha personalidad depende algo así de la categoría, la categoría general general a la que pertenecen En primer lugar, la mayoría de los tipos de letra caen bajo estos dos campamentos, Serif o Sans Serif La diferencia es súper simple. Esas colas en la carta se llaman Serifs. En francés, sans significa sin. Entonces Sans Serif significa sin Serif tan fácil como eso. Además de estas dos amplias categorías, tenemos dos más. Expositor, a veces llamado decorativo y guión. Vamos a repasar cada uno. letra de servicio tienen tres estilos distintivos dentro de ellos. Estos son de estilo antiguo. El estilo antiguo es el estilo más popular en Serafons. Se trata de un tipo de letra clásico y tradicional que se remonta muy atrás. Este es el estilo más utilizado en la impresión, y la mayoría de los libros se establecerán en este tipo de letra Sin embargo, en el diseño web, serifones de estilo antiguo están empezando a aparecer solo el material de impresión tiene mayor definición en general que Tiny Serif y letras son más difíciles de ver en la pantalla debido a las resoluciones más bajas y al parpadeo de la pantalla Esta fue la razón principal por fuentes San Serif se convirtieron el estilo dominante en el diseño digital Aunque hoy en día a medida que las pantallas son cada vez más altas resoluciones, las fuentes Serif están regresando, especialmente en blogs y revistas de Internet tipografía de estilo antiguo, igual que su nombre lo dice, tiene una personalidad muy clásica Se pueden utilizar para sitios web que quieran mostrar un aspecto refinado y clásico, por ejemplo, restaurantes de lujo, instrumentos musicales, despachos de abogados, etcétera Pero también puede ser bastante neutral y usarse para sitios web no clásicos, especialmente para texto de párrafo ya que ofrece una gran legibilidad letra serif modernos pueden ser bastante similares al estilo antiguo La mejor manera de saber si la fuente es moderna es por la serif plana Como puedes ver, Oldstyle tiene una serif inclinada, pero moderna la tiene plana Otra característica muy distintiva es el dramático contraste entre thicks y Observe cómo la primera pierna en la A es delgada como un cabello. Pero el segundo es grueso como un poste. Los tipos modernos se utilizan con frecuencia para moda y todas las cosas del lujo. Aunque no se limitan a esto, se puede utilizar para cualquier cosa en la que quieras retratar una personalidad seria, moderna y refinada En el ejemplo anterior, he usado exactamente el tipo serif moderno llamado Bedni Sin embargo, reservaría letra modernos solo para titulares y grandes tecnologías Ese suele ser el propósito principal para el que están hechos, y no tienen una buena legibilidad para textos largos No querrías leer una blog completa escrita en Onyx Las caras de tipo losa son cajas , los sacos son planos y no tienen contrastes gruesos y delgados como los otros dos Los teléfonos Slap son adecuados para cualquier cosa que se sienta mecánica o fuerte Al igual que el estilo moderno, no es bueno para párrafos, resérvelo solo para titulares. La familia sensorial va a ser el tipo principal que terminarás usando en la mayoría de los proyectos. Es la más versátil. Puede encajar en un diseño con una amplia gama de personalidad. Es el bate más seguro de todos los estilos. Puede funcionar perfectamente tanto para párrafo pequeño como texto de pantalla grande como titulares. Hay algunos estilos diferentes dentro de la familia Sensor como grotescos, geométricos y humanísticos, no voy a repasarlos en detalle porque no existe la de una distinción significativa entre ellos para que una distinción significativa entre ellos para yo atribuya una personalidad dominante a Ya tienes mucha información en tu plato, así que vamos a guardar tu poder cerebral para las cosas más importantes. Cuando se trata de fuentes San sari, hay que juzgarlas individualmente porque pueden abarcar una amplia gama de personalidades, desde lúdicas y suaves hasta serias y conservadoras He desglosado estilos porque se pueden unificar mucho más fácilmente en una categoría útil, como casi todos los serif de estilo antiguo tendrán la misma personalidad clásica tradicional Si realmente tuviera que generalizar la personalidad de las fuentes San serif, entonces diría que en su mayoría tienen una sensación seria y neutra moderna letra display o decorativos suelen ser los que tienen la personalidad más fuerte para ellos, pero esto no quiere decir que sea algo bueno Por el contrario, tienen potencial para ser bastante tontos. Su personalidad puede variar desde el tipo que parece una escritura en una pizarra hasta algo que puede ser bastante elegante La mayor parte del tiempo, querrás mantenerte alejado de este tipo de caras debido a su personalidad implacable Pero a veces sí vienen en estilos más neutros y elegantes, y pueden ser bastante guapos. Sin embargo, por más neutral que se vea, nunca se quiere usarlo para texto de párrafo, solo para grandes titulares. Los tipos de letra de script se basan en la escritura a mano. Al igual que la pantalla, muy raramente vas a usar el estilo de guión. Aunque puede haber momentos en los que vienen bastante útiles, digamos, si tuvieras que diseñar un sitio web para una guardería, una tipografía escrita a mano lúdica puede darle al sitio una personalidad agradable, pero solo para el texto de los titulares Igual que la pantalla, no uses scriptyle para el texto del párrafo. La mayoría de los tipos de letra han sido diseñados con una intención específica El diseñador tenía una intención y un destino para este tipo de letra, y por lo general lo pondrán dentro de la descripción o fuente sea cual sea el manual venga dependiendo de dónde obtengas el tipo de letra, y tendrás el tipo de descripción de dónde puedes usarlo Aquí hay un consejo profesional. Si la descripción del tipo de letra dice que estaba destinado para uso general, entonces eso significa que es seguro usarlo para párrafos y texto largo Pero si dice que era display, cierto, estaba destinado a exhibición, entonces eso significa que aunque no estuviera bajo la categoría display, eso significa que la intención del diseñador era usarla para grandes titulares. Así que nunca lo uses para algo así como párrafos o texto grande y largo porque simplemente no van a ser adecuados para ello. Por ejemplo, este es un teléfono de Google llamado Ferrocarril. Es bastante popular. En sección dice que el tipo de letra está destinado a mostrar texto como titulares y texto grande, pero muchos diseñadores web lo han estado usando para texto de párrafo, haciendo miles de sitios web y temas y plantillas con mala legibilidad de párrafo Esto podría haberse evitado si acabaran de leer el manual. Tantos diseñadores web no han tenido la formación de diseño en absoluto. Aprender estas pautas y seguirlas definitivamente te dará una sobredosis de borde, aunque tengan años de experiencia. 17. Proyecto: personalidad tipográfica: Aquí tienes un divertido ejercicio sobre personalidades tipográficas. Escribí siete frases diferentes en este archivo Figma. Quiero que elijas el tipo de letra para cada frase que creas adecuada para ello. Puedes usar ya sea fuentes que estén instaladas en tu computadora o fuentes de Google que vienen con Figma. Google Fonts es un gran repositorio de muchas fuentes gratuitas pero bellamente diseñadas. Al hacer clic en el selector de fuentes en Figma, le dará opciones tanto de las fuentes que están instaladas en su computadora como también de las fuentes de Google Usar fondos directamente desde este menú desplegable es muy útil. Lo que podemos hacer en cambio es ir al sitio web de Google Fonts y encontrar allí el tipo de letra adecuado Pero antes de hacer eso, primero, necesitamos entender lo que realmente estamos buscando. Imagine que estamos construyendo un sitio web para cada uno de estos negocios, tenemos que elegir tipos de letra adecuados Necesitamos tener una idea de lo que funcionaría, quedaría bien y sería adecuado para cada una de estas industrias. Aquí hay un proceso simple sobre cómo sobrellevar esto. Usaré al entrenador físico para la demostración. Voy a tomar las palabras clave importantes de aquí. Eso sería entrenador de fitness o fitness y Google Images, así puedo encontrar ejemplos de qué tipo de fuentes se están utilizando para el tema de fitness. Pero solo entrenador de fitness o fitness no es suficiente. Eso no nos va a dar ejemplos de diseño. Para obtener ejemplos de diseño y tipografía reales, necesitamos agregar palabras clave como revista, póster, marca, logotipo, sitio web, anuncios, y ahora podemos construir una buena idea sobre qué tipo de tipografía utilizan otros diseñadores Podemos ver muchos teléfonos mayúsculas, grandes y audaces, teléfonos mayúsculas, grandes y audaces, lo que tiene mucho sentido porque el fitness se asocia con la fuerza, los músculos voluminosos y las formas simétricas Combina eso con lo que ya aprendiste sobre las categorías de tipografía, y eso es todo. Entonces, para el entrenador físico, estoy buscando un tipo de letra que sea simétrico y de aspecto voluminoso, algo que se vea bien en Primero, voy a escribir mi frase en mayúsculas porque ese es el estilo que quiero comprobar. Usar nuestro texto real para la vista previa hace que buscar la fuente correcta sea mucho más fácil. Ahora voy a filtrar mis resultados de búsqueda. Tenemos diferentes filtros aquí bastante similares a categorías que ya discutimos. Tenemos Serif, que tiene personalidad clásica, refinada y lujosa, obviamente no muy adecuada para el fitness Slab Serif potencialmente podría funcionar para la aptitud. Tiene una personalidad mecánica y fuerte. Sanseri modern minimal neutral trabajará con fitness porque funciona con De estas categorías para el tema fitness, Sans Serif es el mejor lugar para elegir Lamentablemente, no puedo ver las versiones en negrita de estas fuentes directamente desde aquí. Eso hubiera sido idea. En cambio, voy a tener que revisar la versión en negrita individualmente en la portada. Montserrat es una excelente opción. Es pesado, fuerte y voluminoso, al igual que los músculos. Me gusta lo equilibrada y simétrica que es cada letra. Pero antes de elegir esto, recuerda lo que tenemos que hacer primero. Tenemos que leer el manual. Asegurémonos de que el diseñador no pretendiera este tipo de letra para algo que no es adecuado para el fitness Dice que se inspiró en tipografía urbana, eso es adecuado para nosotros Incluso menciona las palabras clave como trabajo y dedicación. Bueno, ¿no es eso simplemente genial? El trabajo y la dedicación están directamente relacionados con el fitness, hecho. Esa es nuestra fuente. A continuación, vaya al archivo de asignación y aplique la fuente al texto. Cosa a tener en cuenta, los archivos de asignación que compartí contigo deben duplicarse automáticamente al hacer clic en ellos. De esa manera obtienes la copia del archivo en tu cuenta de Figma Pero si notas que el archivo no es editable, en este caso, entonces probablemente no se pudo duplicar Una razón sería porque no has iniciado sesión en Figma en tu navegador Tendrás que iniciar sesión y luego intentar hacer clic en el enlace una vez más. Si aún falla en crear una copia, entonces ve a myfile y duplícalo desde este pequeño menú desplegable. Ahora ese es tu propio archivo Figma y puedes editar como quieras Todos esos duplicados se guardan automáticamente dentro de su cuenta Figma bajo Entonces desde el selector de fuentes, voy a seleccionar Montserrat Por defecto, será en estilo regular, pero lo quiero grueso y atrevido. Voy a seleccionar su estilo más atrevido, que en este caso se llama negro Además, quiero que sea mayúscula. Por supuesto, puedo escribirlo una vez más con mis mayúsculas puestas, pero hay una manera más fácil de hacerlo. Este enlace aquí abre ajustes adicionales, y ahí podemos seleccionar mayúsculas De esta manera, no importa cómo escriba mis mayúsculas de texto o no, se mostrará en mayúsculas y podrá eliminar la mayúscula haciendo clic en esta opción Aquí también es donde tienes opción de subrayado si la necesitas. En este cuadro, quiero que expliques tu proceso de pensamiento sobre por qué elegiste la fuente. Entonces, en mi caso, escribiría lo que ya describí. No te saltes este último paso. Para convertirte en diseñador, tienes que empezar a pensar como diseñador para tener una comprensión más profunda de cada paso y decisión que tomas. Y en realidad clientes, sus clientes definitivamente apreciarán esto. Recuerdo que siempre lo hicieron. Yo enviaría este correo electrónico con, ya sabes, paso a paso de las principales decisiones de diseño que tomaría sobre tipografías o fuentes y cosas así Y al principio, me gusta hacerlo, pero luego me volví un poco flojo. Y cuando no escribí estas descripciones de mi proceso de pensamiento detrás de ello, las revisiones aumentaron porque ahora no confiaban en lo que había hecho una elección. Y querían revisar y, ya sabes, cambiar de fuente o cambiar colores o cosas así porque pensaban que yo las escogía de la nada. Entonces definitivamente practica esto. Y luego cuando trabajes con tus clientes, muéstrales cuánto proceso de pensamiento se ha puesto detrás de escena. 18. Tipografía: conjunto de tipos de ajuste: Este es el título inaugural de la película Gravity. Preste atención a cómo se establece el tipo. Aquí hay otro del Caballero Oscuro que se levanta o éste de interestelar. ¿ Te das cuenta de la similitud? Los tres tienen un espaciado entre letras muy amplio. Otro espaciado es uno de los atributos que pueden cambiar sobre el teléfono y personalizarlo a sus necesidades. Puedes hacerlo muy apretado y ceñido, o puedes hacerlo agradable y aireado. Este tipo de espaciado extra en blanco se llama Panorama. Es un truco de diseño realmente genial, y como que crea es agradable, terminado y refinado. Mira y agrega una importancia extra al impuesto y hace sentir que está diciendo algo muy importante. Si alguna vez estás atascado con un diseño muy aburrido y soso, puedes configurar tu tipo en Panorama y al instante se irá Teoh. Dale un aspecto agradable y refinado. Por ejemplo, si necesito agregar un título extra a un impuesto de bloqueo que ya tiene título, puedo tomar ese título secundario y ponerlo en Panorama. Su título secundario ahora es muy interesante en comparación con lo que teníamos antes. Esto se siente más deliberado son manos secundarias no compitiendo con el titular original. Tiene su propio estilo específico, por lo que podré repetirlos en otros bloques de impuestos similares y ser muy identificable. Un gran beneficio de la tipografía Panorama es que te permite reducir tu teléfono a tamaños muy pequeños sin perder legibilidad. He quitado el efecto panorámico aquí, y el impuesto se ha vuelto mucho menos legible. Esto significa que tendría que aumentar el tamaño del frente, pero esto ahora compite demasiado con el titular principal. Yo quería ser la información secundaria, pero casi se ha convertido en el título primario. Una cosa a tener en cuenta. Al configurar el tipo de esta manera la mayor parte del tiempo, debe usar mayúsculas. Este efecto realmente no funciona mientras que en letras minúsculas. De acuerdo, entonces eso es sobre el espacio en blanco. Pero, ¿qué tal un espaciado más apretado? ¿ Cuándo querríamos usar eso? ¿ Uno? Dichos casos, cuando se trata de texto grande y pesado en espacios de texto grandes entre letras, son proporcionalmente grandes. Por ejemplo, estaba trabajando en un sitio web para una empresa de compartir scooters, Como se puede ver, entretenido un enorme tamaño divertido que es bastante audaz y feliz. El espaciado de letras predeterminado para estos se sentía un poco demasiado espaciado para mí, así que agregué un básico de letras negativas. Si estoy usando un titular muy audaz y grande, quiero crear un impuesto que se vea audaz, pesado y concentrado en un espacio apretado. Una letra relibre El espaciado es lo contrario de lo que quiero lograr, así que apreté las cosas. En este caso. La mayoría de las veces, desea mantener el espaciado de escalera predeterminado para su gravado. Pero en casos específicos, no tienes capacidad de personalizar el teléfono a tus necesidades a la regla de oro. Si alguna vez estás ajustando la letra, espaciado que aumentó el espaciado como se llama se hace más pequeño o más ligero y disminuye la base, ganar se hace más grande y más audaz. Comparemos estos dos bloques impositivos idénticos. Tiene el mismo tamaño de teléfono, y el texto es exactamente el mismo. Su diferencia está en su interlineado o altura de línea. El tipo es sáb en tamaño aéreo de 25 píxeles. El párrafo izquierdo tiene una línea por defecto alta, pero a la derecha, uno lo ha incrementado. La línea por defecto de alto valor fuera de área es muy apretada. Esto hace que el impuesto sea más difícil de leer y seguir el aumento del espaciado entre líneas en los segundos bloques. Texto mixto mawr Airy. Se siente menos pesado, más fácil de leer. Y a pesar de que es más largo en tamaño, todavía se siente menos intimidante que el original. Intimidatando impuestos algo a realmente Wolcott para. La gente no suele leer texto en los sitios web. Escanean. Están escaneando frenéticamente palabras clave y frases para encontrar lo que están buscando o para decidir si el sitio web es relevante para ellos por completo. El texto en el paseo les ayudará a escanear impuestos más fácil y encontrar lo que están buscando. Puedes probarlo tú mismo positividad e intentar leer cada impuesto tan rápido como no puedas. Te darás cuenta de que tendrás mucho es tu velocidad y más rápida en el texto de la derecha, El espaciado de línea original se sentirá como correr sobre una perra arenosa, un poco arrastrada y lenta. Este tema se hace extremadamente evidente cuando nos ocupamos de bloques de texto anchos. Cuando terminas de leer una línea de impuesto en este bloque, saltar a la izquierda al hallazgo siguiente línea es un reto. Es muy fácil perderse, y hay que confiar en conectar enlaces con contexto o ah, dedo o regla. Los teléfonos antiguos vienen con sus propias líneas predeterminadas orientadas y cambia en función del tamaño del teléfono . Algunos teléfonos que están muy bien hechos y bien equilibrados tendrán mejor espaciado de línea que otros. Esta, por ejemplo, es una de mis tipográficas favoritas, llamada Avenir. La línea predeterminada de los 34 píxeles de Heidi en el tamaño específico del teléfono. Como puedes ver, no es muy diferente al ajuste que hice para aérea. Entonces en este caso, podría incluso dejar el interlineado como su valor predeterminado. Ahora hay momentos en los que necesitas encogerte las líneas enfrentadas en lugar de aumentarlas. Y eso suele ser cuando se trata de impuestos grandes y muy audaz, sobre todo en mayúsculas la línea por defecto. Ocultarme en estos impuestos un poco de área para mí. Elegí todas las mayúsculas y el teléfono pesado para hacer que los titulares morados sean pesados y fuertes, concentrados en un solo lugar. Entonces en este caso, voy a disminuir la línea alta sólo un poquito. Ahora. Esta versión es exactamente lo que buscaba. Podemos pensar en esto como una gravedad tener tus objetos tienen una gravedad más fuerte, por lo que empujan molestar más cerca y más ligeros objetos? No tanto, así que están flotando en el espacio y Fillmore Airy, hablando de puntos telefónicos, mienten regular, mienten regular, semi audaz, perno extra audaz teniendo una línea de pelo flaco negro y así sucesivamente. Esto que se llamaba pesos telefónicos o estilos o grosor. Cada tipografía tendrá su propio conjunto de pesos, algunos más que otros. Las cosas, por ejemplo, están apagadas las pesas telefónicas. Un teléfono Google muy popular llamado Open Sense tiene cinco pesos diferentes. Área, por otro lado, tiene sólo dos regulares y audaz. El tipo de letra que tiene estos pequeños pesos es muy difícil de trabajar. En un sitio web moderno, tienes tantos lugares diferentes que necesitas proteger en párrafos sobre botones, barra de navegación, menús desplegables, titulares, titulares secundarios, enlaces de pie de página y más. Si eliges una cara alta que solo tiene dos pesos regulares y tira, lucharás mucho cuando necesites crear una jerarquía y contraste entre un titular , un ESOP tenía básicamente te queda con el tamaño del impuesto para duelo al pesado levantar impuesto blanco regular sobre fondo oscuro a veces se ve roca Para compensar esta ilusión óptica, es posible que desee utilizar el peso más ligero. El impuesto a estos dos autos ahora parece su mismo peso Pero en el ejemplo anterior, el gravado derecho parecía más pesado. Déjame mostrarte que una vez más, ligera y regular, otra situación en la que podríamos necesitar ajustar el peso fuera del teléfono está en texto grande ha aumentado el tamaño fuera del teléfono. Se vuelve más pesado tanto de este peso irregular en este caso. Pero debido a que el primero es mucho más grande, son cuerpos más gruesos y pesados. A veces queríamos lucir un peso similar, solo diferentes tamaños. En tal escenario, tendremos que emparejar los estilos ligeros y regulares. Ahora el impuesto grande y el texto más pequeño se sienten más como si estuviesen fuera del mismo peso. Puedes hacer esto en la otra dirección a haciendo que los ataques más pequeños sean un poco más audaces, necesitarás algo así como semicalvo. En este caso, si eres tipográfica no tiene suficientes pesos, entonces tus manos están apretadas y no podrás lograr resultados óptimos. Escoja tipos de letra que sean versátiles y tengan suficiente cantidad de pesos. La mayoría de los rostros de amarre usados de motor y general hoy tendrán al menos cuatro vías, cual es lo suficientemente decente. Algunas caras de empate completas tendrán nueve pesos diferentes, como esta tipografía llamada Montserrat. No te vas a quedar sin esperas aquí estás Así que tenemos espaciado entre letras, escondite de línea y esperas telefónicas. Estos atributos nos ayudan con dos cosas que principalmente quieren es que los impuestos sean fáciles de leer, sobre todo en el cuerpo y el gran impuesto. Y segundo, para lograr una jerarquía visual realmente buena entre diferentes elementos, elementos de texto, obviamente en la página y en la próxima lección, vamos a practicar este ajuste exacto de tipo entre línea alturas donde mandas todas esas cosas, quédate por ahí. 19. Assignment: tipo de configuración: La topografía es enorme para el diseño web, y aprender a establecer el tipo correctamente te va a convertir en un diseñador web superior. En este video, vamos a hacer un pequeño ejercicio divertido sobre la configuración del tipo, lo que básicamente significa simplemente decir que está eligiendo el tamaño de fuente correcto, alturas de línea correctas, pesos para la fuente y espaciado entre letras. Eso es todo. Es solo combinar todos estos cuatro elementos diferentes para hacer que algo se vea deliberado. Como de costumbre, encontrarás este archivo figma debajo de los recursos, ya sea en la página que he vinculado o bajo los recursos de este video Y en este archivo Figma, he dispuesto cinco bloques de texto Cada uno tiene un titular y un párrafo. Cada uno de estos bloques se configura en un tipo diferente caras, la misma cara tipo para el titular y el par de párrafos. El nombre del tipo mira aquí mismo en la esquina. No te preocupes por el contenido. Es un texto ficticio que he generado aleatoriamente. Quiero que revises cada uno de estos bloques y mejoren la configuración de tipo para cada par. Tu objetivo es lograr dos cosas. Primero, buena legibilidad del texto. Esto se puede lograr ajustando principalmente los tamaños de los teléfonos y las alturas de línea. Todos los bloques de texto están establecidos en sus alturas de línea predeterminadas para algunos de estos teléfonos, Su altura de línea predeterminada podría tener bastante buena legibilidad como el impuesto carmesí aquí, pero para otros, podría ser un poco No hay reglas específicas para alturas de línea. Basta con medirlo en base tu ojo y aumentarlo hacia arriba y hacia abajo y ver qué es lo que te resulta más agradable cuando lo lees. Lo mismo ocurre con el tamaño de fuente. Todos están establecidos en 16 píxeles, pero como puedes ver, 16 píxeles son bastante diferentes de uno a otro. Por ejemplo, 16 sobre el impuesto carmesí es demasiado pequeño. Segundo, tu objetivo es lograr una buena jerarquía entre titular y párrafo. Recuerda nuestra lección sobre jerarquía derecha, la jerarquía visual hace que el diseño sea más fácil seguir y más agradable a la vista. Se puede lograr esta jerarquía entre el titular y los textos haciendo que el titular sea muy grande o muy pesado o ambos. Para lograr ambos objetivos, se le permite ajustar uno el tamaño de fuente. Segundo, el peso de la fuente. Y las alturas de línea. No hay necesidad de preocuparse por el espaciado entre letras. Tan solo manténgalos como están. Además, no cambies el tipo de cara ni el color, guárdalo como están. Eres libre de ajustar la posición de cada cuadro de texto. De hecho, lo más probable es que necesites ajustarlo porque a medida que comiences a establecer tu tipo, las cosas tendrán que moverse en consecuencia. Pero quiero que mantengas el ancho de cada cuadro de texto tal como está Ahora mismo tienen 500 píxeles de ancho. Quiero que trabajes dentro de esas restricciones y establezcas tu tipo de la mejor manera dentro de esas dimensiones. La altura de la caja se ajustará automáticamente. L et me demuestro el primero. Primero, asegúrate de haber hecho zoom de tu Canvas al 100% De lo contrario, no verás el tamaño realista. Hay muchas formas diferentes de acercar y alejar en Figma. Dos formas más comunes es pellizcar el mouse en la computadora portátil. Esto probablemente funcionará en laptops más nuevas que tengan el soporte de acción de pellizco multitouch u otra forma que sea con la rueda del mouse, y mientras mantienes el control o comando en Mac Y con tu mouse bien, solo tienes que desplazarte hacia arriba y hacia abajo, y mientras mantienes el control o el comando, entonces va a acercar o alejar. O mi forma favorita, que es solo calentar el atajo shift cero, y eso va a hacer zoom instantáneamente al 100%. Puedes ver el atajo si vas a las pocas opciones y luego debajo del desplegable, puedes ver que Zoom al 100% tiene este atajo La mayor parte de su trabajo de diseño debe realizarse en este estado normal. De lo contrario, no verás la imagen realista de tamaños y proporciones. Sin embargo, está bien acercar y alejar cuando lo necesites por alguna razón. Una vez que nos hayamos asegurado de que estamos trabajando en un estado normal de Zoom, primero, ajustaré el titular. Quiero que sea delgada. Debajo del nombre de la fuente, puede seleccionar el peso de la fuente. Como mencioné anteriormente, las opciones disponibles aquí dependen de la familia de fuentes en sí, y si has instalado todos los estilos disponibles en tu computadora o si vino con Figma. Selecciono delgado. Ahora para lograr una buena jerarquía visual entre el titular y el pirográfico, debería aumentar el tamaño del titular Como fui con un titular delgado, debería hacerlo aún más grande de lo que haría por un textil más pesado. Estoy presionando una flecha hacia arriba aquí, lo que aumenta el tamaño del teléfono en un píxel. A medida que estoy ampliando mi texto, también estoy prestando atención a dónde están mis exenciones fiscales Dado que el ancho de mi cuadro de texto es fijo, puedo romper el impuesto solo en función de su tamaño o peso. El rompimiento del impuesto es importante porque no quieres que el impuesto se rompa en un lugar extraño, como por ejemplo, en un artículo A y la palabra saltando en la segunda línea. Eso no hace una buena legibilidad. En esta frase, que el mejor salto de línea es cuando un telescopio está en la segunda línea o al comprar un telescopio está en la segunda línea. Incluso prefiero la segunda versión porque hay una ruptura lógica en la oración, los fundamentos de qué? Comprando un telescopio. Me gusta bastante cómo se ve el titular. Ahora voy a ajustar el texto del párrafo. En la mayoría de los casos, no tocaría el peso del párrafo y lo mantendría regular. Regular suele ser la mejor opción para el texto de párrafo, pero debido a que he hecho que el titular sea bastante flaco, el párrafo se siente pesado en comparación y le está robando mucha atención al titular. Recuerde, en jerarquía visual, definimos claramente cuál debería ser el elemento más notable, luego el segundo más notable, y así sucesivamente. Ahora voy a aumentar la altura de línea de este párrafo. La altura de línea predeterminada de esta fuente, que es Roboto Roboto No estoy seguro de cómo se pronuncia eso. Está muy apretada. No hace una buena experiencia de legibilidad. Voy a aumentarlo a partir de este campo de altura de línea. Todo bien. Esto se ve genial. El titular es delgado y resbaladizo, pero aún así capta la atención principal, y el párrafo t es a y fácil de leer qué mejora a lo que era antes Déjame mostrarte qué cambiaría si fuera con un titular pesado en su lugar. En este caso, en realidad disminuiría la altura de línea del texto del titular. Recuerde, como expliqué en la lección, cuando se trata de texto grande y muy negrita, posible que necesitemos reducir la altura de la línea. Eso es porque las letras tienen tracción gravitacional y los objetos más pesados entre sí En este caso, voy a devolver el texto del párrafo al peso regular. Generalmente evito usar pesos delgados para un texto de párrafo. En las pantallas de escritorio que no tienen densidad de píxeles muy alta, pueden ser difíciles de leer. Bien, eso es todo. Ejercicio muy sencillo y divertido para practicar el tipo de configuración y meterse con diferentes valores de alturas y tamaños de teléfono y demás. Y en la próxima tarea, voy a revisar su presentación. 20. Tipografía: solo dos fuentes: Aquí te dejamos una regla importante a seguir a la hora de elegir tipos de letra para tus proyectos. Usa un máximo de dos fuentes para cada proyecto y asegúrate de que tengan un aspecto diferente. Discutamos la primera mitad de este rol radican sólo dos, porque descifrar demasiados estilos de fuente es abrumador. Y dos te darán suficiente espacio para cualquier personalidad específica que quieras retratar. Diga a través de alguna tipografía de pantalla y tener algo más neutral para el párrafo y otros textos. cuanto a la segunda mitad de esta regla, si se usan dos tipos de letra que son demasiado similares, sientes que extrañaste hacer clic y accidentalmente cogió el teléfono equivocado para uno de ellos. El titular es un Open Sans en su párrafo se establece en Roboto. El único contraste que se crea es a través de su tamaño y el peso del titular. Si los ponemos en los mismos pesos y tamaños, verás que son demasiado similares, pero no lo mismo. Si vas con dos tipos muy similares a uno, solo voy con uno de ellos. Eso es algo perfectamente razonable de hacer. En este ejemplo, sustituyo Open Sans por pantalla Playfair. Esto se ve significativamente mejor. Por lo que los contrastes entre estas dos tipografías es muy alto. El primero es un serif moderno, y el segundo es un sans serifs neutro que tiene alta legibilidad para texto más pequeño. Ahora esto parece deliberado e intencional. No quieres las mejores formas de hacer estos y quedar bien. Hazlo sentir intencional. En ocasiones puedes romper las reglas e ignorar los lineamientos y hacer algo que está completamente fuera de línea. Pero si tú, si te sientes intencional, probablemente mirará esto por qué aprender y practicar este diseño reglas y lineamientos que te va a convertir un muy buen diseñador web porque tu pupilo se sentirá y se verá intencional. Se va a sentir como si hubieras puesto algo de trabajo e iniciado proceso detrás de él. Y no solo estabas tirando cosas por ahí encontrando suficiente Open Sans y Roboto es muy usado emparejamiento. Esto sólo apunta al hecho de que hay una tonelada de diseñadores web por ahí que no tienen comprensión de los buenos principios de diseño. Y si sigues esta simple vista de pautas tipográficas hará que tus diseños sean mucho más superiores. Esto no significa que puedas emparejar dos tipos de letra sans serif juntos. Cuando lo haces, sólo tiene que tener sentido. Por ejemplo, cuando un par a tipos sensoriales, suele ser porque quiero algo con personalidad para los textos titulares y luego algo neutro con excelente legibilidad para el texto corporal, para el cuerpo principal toma, a menudo uso las mismas tipografías en todos los proyectos. Dependiendo de cuál sea mi obsesión por cierto periodo de tiempo, elijo algo que sea neutro y tenga muchos pesos de fuente como Open Sans Roboto o recién de esta manera entonces tengo mucha libertad con las aerolíneas. Puedo usar fuentes con pesos limitados, pero un poco más de personalidad. Y elegiré algo que más encaje con la personalidad de ese proyecto en particular y de la marca. 21. Tipografía: dónde encontrar fuentes: Ing teléfonos en línea es bastante simple, y probablemente ya podrías tener algo de experiencia con la descarga y búsqueda de algunos teléfonos en línea. Hay muchas opciones diferentes de pago y gratuitas, así que repasemos algunas de estas opciones. Sitios como defont.com tienen una gran selección de fondos gratuitos. El problema con las fuentes gratuitas es que pueden ser diseñadas por diseñadores aficionados que las crearon por diversión o para ganar alguna experiencia en el diseño de fuentes. Podrías terminar con cualquier cosa, desde fuente mal espaciada hasta algo así como una fuente de gatito. Evita este tipo de reembolsos hasta que consigas una buena experiencia en tipografía E incluso entonces, lo mejor es mantenerse alejado y mantenerse alejado del tipo de fondos gratuitos. A menudo se usan en exceso, lo que significa que hay muchos diseños o sitios web diferentes que los han estado usando, y los han estado usando erróneamente, y simplemente tiene una muy mala reputación Los teléfonos pagados obviamente son opción más superior. Un beneficio de un fondo premium es que puede darle a su proyecto sensación más única porque no son tan populares y no están tan sobreutilizados Con teléfonos individuales de pago, pagas por cada estilo, generalmente alrededor de 20 a 50 dólares. Entonces, si quieres una familia entera con todos los pesos, entonces puede resultar costosa. Además, hay que comprar una licencia para cada proyecto por separado. Entonces, el mejor enfoque con teléfonos individuales de pago sería comprar uno o dos estilos para un texto de titular. Y como el texto del cuerpo principal donde necesitas muchos pesos diferentes como barcos y botes extra y todas esas cosas, entonces puedes usar cosas lugares como Google Phones y algunas otras opciones que mencioné. Hay una manera más barata de tener en las manos muchos teléfonos premium, y eso es mediante el uso de sitios basados en suscripción. Los más populares son los teléfonos Adobe. El nombre antiguo es Type kit. Los teléfonos de Adobe están incluidos en su suscripción a la nube creativa. Estas son suscripciones a Photoshop, Illustrator y otro software de Adobe. Entonces, si te suscribes a eso, obtienes más de 7 mil teléfonos Adobe con él. El plan más barato cuesta alrededor de $10 al mes, creo, así que es un trato bastante bueno. Personalmente, mi lugar favorito es Google Phones. Es gratis. Sin preocupaciones de licencia. Están bien diseñados. Está comisariada por Google, y tanto Figma como Webflow ya vienen Así que eso solo me salva de tanta instalación y de todo ese dolor de cabeza. Mi consejo para ti al principio es que te quedes con Google Phones o teléfonos Adobe. Dos juntos proporcionan teléfonos más que suficientes que necesitarás para cualquier proyecto. Una nota importante sobre las fuentes generalmente es que las fuentes son en realidad archivos regulares de computadora. Entonces eso significa que pueden ser copiadas y redistribuidas innumerables veces Entonces, si tienes un archivo para este teléfono en particular, eso no significa que realmente puedas usarlo. Para usar una fuente para un sitio web en tu proyecto, o necesitas tener una licencia que pagaste, o la fuente en sí tiene que venir con una licencia comercial gratuita para uso comercial. Aquí hay una extensión de navegador genial que uso con frecuencia. Se llama Font Phase Ninja, y te permite ver la fuente que está usando cualquier sitio web. Soy un tipo geek. Me encanta el aspecto de un tipo de letra atractivo Entonces, cuando veo un sitio web que usa una hermosa fuente y tipografía, quiero saber qué es y guardarlo como inspiración para mis proyectos futuros, que básicamente significa para que pueda robarla y luego usarla en mis proyectos Enlace en los recursos. Instala esta extensión y empieza a notar diferentes fuentes en los sitios web que visites Obtener curiosidad es el mejor maestro de un diseñador. Notar diseños a tu alrededor y examinarlos cerca te enseñará mucho y de hecho mejorará tus habilidades de diseño 22. Proyecto: combinación de tipos de letras: Bien, despide tu Figma, tiempo para otra tarea de tipografía Vamos a poner en práctica todo lo que has aprendido hasta ahora sobre los tipos de letra Al igual que en la tarea anterior, he dispuesto tres bloques de texto. Esta vez, todos están en un solo tipo de letra. Tu tarea es elegir dos combinaciones de fuentes para cada bloque de texto Además, al igual que hiciste en el ejercicio anterior, establece el tipo para cada texto para lograr una buena jerarquía y en segundo lugar, buena legibilidad, tal como lo hiciste la última vez Escogerás un total de seis fuentes diferentes, tres, cuatro titulares y texto de 34 párrafos. Cuando eliges tus caras tipo, quiero que uses lo que has aprendido sobre la personalidad tipo. Vemos el video sobre personalidades si es necesario. Quiero que pienses en el contexto que estás eligiendo y escojas uno de los tipos de letra que muestre la personalidad que es buena para ese contexto Al leer los titulares, notará que el primer texto es sobre viajes y Hawai. El segundo se trata de cocinar y barbacoa, y el tercero es de tecnología. Ahora, aquí hay una pista. El tipo con la personalidad debe ser para el titular. Para el párrafo, debes elegir algo un poco más neutral con alta legibilidad Por cierto, si te estás preguntando por qué el texto no termina correctamente, simplemente no puse ahí todo el artículo. Simplemente ha sido extracto de algunos artículos de blog aleatorios que elegí Déjame hacer una demo para la primera. Por lo que el texto trata sobre viajar a las islas de Hawai. Ahora, voy a pensar qué tipo de tipo de letra puede mostrar esa sensación de viajar a hermosas playas de arena Para tener una mejor idea del estilo de tales ellos, voy a buscar en Google algunas imágenes de Hawaii y ver si hay algún tipo de estilo de tipografía que se usa localmente en Yo con una búsqueda rápida, puedo ver que en realidad hay ciertos tipos de letra que se utilizan en el tema hawaiano También busco cosas como postales y letreros en Hawaii. Mira eso. Ahora tengo auténticos ejemplos de topografía que realmente está en uso en las islas, y que le recordarán a la gente a Hawai. Parece que el tipo de letra manuscrito es el camino a seguir Veamos qué puedo encontrar en fuentes de Google que coincida con este tema. Voy a filtrar solo fuentes de escritura a mano y voy pegar en nuestro texto para darme la demostración exacta I Se puede ver que hay varias fuentes que pueden ser bastante adecuadas. Presta atención al nombre de la fuente. Muchas veces te darán la pista sobre cuál es el tema de la fuente. Porque busqué en Google algunas imágenes y ejemplos reales. De antemano, pude tener la sensación correcta de Hawaii. Ahora escoger la fuente es mucho más fácil porque puedo reconocer similitudes en las postales y letreros Al buscar fuentes, también estoy buscando aquellas que tengan alta legibilidad No importa que sea titular. Todavía quiero que sea legible. Fuentes difíciles de leer como estas van a ser una mala elección por muy buenas que se vean. Bien, creo que tengo suficiente para elegir. Ahora voy a leer el manual de estos teléfonos que he seleccionado para ver a qué estaban destinados. Ya veo un problema con éste. En la oración en mayúscula, como en mi titular, la legibilidad era mejor, pero en palabras minúsculas, la Sí, voy a usar mayúsculas para mi titular, pero ¿y si cambio de opinión? Limita mucho mis opciones. El segundo es el guión de Kashan, Cashan Noure. La descripción del teléfono es bastante neutral. No parece que estuviera pensado para un tema muy limitado. Se ve bastante divertido y tranquilo, tal como me imagino estar en Hawaii, así que voy a ir con eso. Una cosa que notarás aquí es que el titular no está realmente alineado con el párrafo. Esto sucede mucho con texto de pantalla grande. Tienen espacio extra y necesitarás arreglarlo manualmente. De lo contrario, el diseño se verá desalineado. Recuerda nuestra lección sobre ilusiones ópticas, Ruler no es lo que importa en el diseño, es el ojo Si algo parece no alineado, entonces no está alineado hecho. Ahora, se ve en el punto. Para el párrafo, voy a ir con algo neutral. La elección obvia sería una fuente sans sera. Un abiertas sas abiertas es una opción obvia. Es una fuente muy popular y excelente. Roboto es otra fuente muy popular. A mí me gusta bastante Lato. Es una fuente muy buena que uso frecuentemente. Tiene un evento de estilo muy agradable en los titulares. Y mira esto. Lato significa verano en polaco. Esa es sin duda una fuente perfecta para nuestro tema Hawaii. Este fue un golpe de suerte. W texto de párrafo neutro, no tienes que ir en una búsqueda loca por la fuente correcta que fue diseñada exactamente con la misma sensación. Voy a hacer que el párrafo se parezca más un gris oscuro que a un negro de contraste completo. Esta es una excelente manera de agregar aire al texto del párrafo sin usar un peso de fuente más delgado Evite pesos finos para el texto de párrafo porque tienen mala legibilidad en pantallas de menor resolución Ahí lo tenemos dos pares telefónicos para un bloque de texto Hawaii ellos. Se ve emocionante, pero es elegante y fácil de leer. Ahora es tu turno. Una cosa más. Encima de cada bloque de texto, quiero que escribas tu razonamiento detrás de tus elecciones telefónicas, como ya hiciste en la asignación de personalidad tipo. Recuerda, anotar tu proceso de pensamiento te va a acostumbrar a pensar como un diseñador. Empezarás a ver las cosas en un diálogo más profundo y detallado. Y además, te darás cuenta a menudo de que tomaste una decisión por un teléfono sin pensarlo porque tal vez solo se veía bonito. 23. El arte del color: Es uno de mis proyectos de sitio web. Es un sitio web para una aplicación para compartir scooters. Cuando estaba diseñando este sitio web, elegí un color verde muy vibrante. El nombre de la aplicación es ir verde. Los scooters son eléctricos y ecológicos. Entonces este verde en particular encaja muy bien con el concepto. Es el tono adecuado de verde. Pero mis clientes tenían un plan diferente, y me hicieron cambiarlo a este verde. Esto es verde bosque, no es una buena combinación para este producto. Forest green funcionará bien con negocios relacionados con el aire libre, campamentos, caminatas, ropa al aire libre, pesca, etc. Pero no algo que sea eléctrico y tecnología verde moderna. Pero a veces tienes que hacer lo que dice tu cliente. Los colores pueden hacer o romper cualquier diseño. Nos atraen los colores que nos gustan y bastante repelidos por aquellos que no somos diseño web u otros productos como autos, ropa, botellas de ketchup, lo que sea ropa, botellas de ketchup, Podríamos ver el mejor producto de diseño, pero si no nos gusta el color, no lo estamos comprando. En las próximas lecciones, te voy a enseñar a elegir y trabajar con colores como un profesional para que tus diseños se vean geniales. Palo. 24. Colores de muestreo de colores: bueno, sabemos que escoger buenos colores es algo muy importante que hacer en los diseños. Pero, ¿cómo sabemos qué es un buen color? ¿ Y qué es un mal collar? Podría estar pensando? Oh no, tengo terrible sabor en colores. No te preocupes, y yo también tengo buen gusto. Pero hay un truco para recoger collares, y el truco es no escoger los colores de tu sombrero o directamente dentro de sigma, sino a colores de algún tipo de inspiración. Esto puede ser otro trabajo de diseño, como sitios web o ilustraciones o carteles, lo que sea, o incluso de re premio como fotos. En esta lección, te voy a enseñar a usar el mundo que nos rodea como nuestra inspiración para nuestros colores simplemente colores del mundo real. Al igual que la gente, la naturaleza , los animales bien, casi siempre te dan crear resultados. ¿ Por qué? Porque la mayoría de nosotros ya estamos de acuerdo en que una orquídea se ve hermosa, pero una cucaracha, no tanto. Escoger buen colorista está solo a la mitad del trabajo. El segundo tiempo en realidad está haciendo coincidir los colores correctos juntos. Usar mundo real es nuestra inspiración resuelve este problema, también, también, de porque la mayoría de las veces el mundo natural proporciona grandes combinaciones de colores. Estas foto de la línea luce hermosa. Si encontramos una paleta de colores que ya está en esta imagen, podemos estar seguros de que la mayoría de las veces estos colores van a ir realmente juntos. De lo contrario, no encontraríamos como atractiva una foto de esta línea. Debilitar simple. Algunos colores dominantes de la imagen. Y ahora tenemos una paleta de colores que es natural y armoniosa. Aquí es donde se pone interesante. Digamos que estamos diseñando una sección que se vea algo así. Si obtenemos esta foto y la usamos en nuestro diseño junto con nuestra nueva paleta de colores, vamos a obtener algunos resultados realmente buenos porque no solo estamos haciendo coincidir autos juntos, sino que en realidad estamos emparejando juntos, colores con nuestra imagen. Podemos entonces jugar y usar estos colores para texto o fondos, o crear combinaciones de colores muy interesantes. Mira eso. Es como una magia. Y yo estaba en el que se le ocurrió estos colores. La Madre Naturaleza lo hizo 25. Proyecto: colores de muestra: Hagamos un divertido ejercicio de muestreo de colores a partir de imágenes. He preparado un archivo Figma para esta tarea. Tiene tres marcos con el mismo diseño. Este es un diseño web muy común, que tiene una especie de pantalla dividida. 50% de la pantalla es la imagen, y luego 50 es para el contenido. Es un diseño muy simple de hacer y puede ser bastante efectivo y hermoso. Será bueno que practiques este diseño ya que practicamos nuestro muestreo de color. Son tres fotogramas en este archivo. En dos de ellas, he preparado imágenes para ti y una está vacía. Quiero que muestres colores de estas imágenes para cada fotograma y pintes el lado izquierdo del marco con una paleta de colores. En la vacía, quiero que escojas tu propia foto. Podrías descubrir que no todas las fotos son una buena elección para la paleta de colores. Además, quiero que uses lo que has aprendido hasta ahora y lo apliques al lado izquierdo del marco, la jerarquía, y todo lo relacionado con la tipografía Déjame hacer una como demostración. Voy a usar un marco vacío. Primero, vayamos a unsplash.com y encontremos una buena foto. Unsplash es una gran fuente de fotos gratis. Son gratuitos para uso comercial, no solo personal, y tienen, ya sabes, gran variedad de fotos diferentes. No son muy no se ven como stock, así que son bastante naturales y de aspecto agradable, aunque porque son libres en los diseños, se usan mucho, pero más sobre la fotografía posterior. Bien, entonces me encantan las montañas, así que voy a elegir una linda foto con vista a la montaña. Esta es una buena opción. Tiene muchos colores en él, por lo que será divertido trabajar con él. Primero, voy a crear un marcador de posición para la imagen. Voy a dibujar un rectángulo para hacer esto exactamente la mitad del marco. Comprobemos el tamaño de nuestro marco. Son 1,152 pixeles. Y ahora voy a hacer el rectángulo la mitad de ese tamaño. Aquí tienes un truco genial de Figma. Voy a escribir 1152/2, y luego presionar Enter, y Figma hará las cuentas Es exactamente la mitad del marco. Ahora voy a colocar mi imagen. Puede arrastrar directamente su imagen en Figma o puede elegir la opción Colocar imagen de la herramienta de forma Aquí hay algunas cosas a tener en cuenta al trabajar con imágenes y Figma. Las fotos que obtengas de Osplash u otros letreros de stock serán de tamaño bastante grande Así que dale un poco de tiempo para que Figma piense porque está subiendo la imagen a sus servidores antes de que puedas colocarla La imagen se colocará en sus dimensiones originales. Dado que esta imagen es muy grande, se ve súper acercada así Pero debido a que es parte del marco solo esto es visible. Como es enorme, necesitamos redimensionarlo. Cuando selecciona una imagen que está llenando todo el espacio del marco, en lugar de seleccionar la capa de imagen, selecciona todo el fotograma. Esto me parece un poco molesto, pero no es gran cosa. Para seleccionar una fotocapa, la opción obvia es seleccionarla en el panel Capas, pero la mejor manera es hacer clic en la imagen mientras se mantiene presionada una tecla Control o comando Este es un truco muy práctico. Téngalo en mente. Para cambiar el tamaño de la foto a algunas dimensiones útiles, alejemos el zoom para que podamos ver los bordes de la imagen Ves esas líneas azules, esas son las fronteras de la imagen. La imagen es realmente grande en comparación con el marco. Por eso las fronteras están tan lejos del marco. Podemos agarrar las asas y cambiar el tamaño de nuestra imagen. Mantén el turno mientras haces esto para mantener las proporciones de la imagen. Un elemento de imagen en Figma es básicamente un rectángulo con imagen como relleno de fondo No tienes que aguantar el turno. No va a distorsionar la imagen, pero en este caso, quiero ver la imagen original, así puedo elegir exactamente qué parte de la imagen mostrar Si colocas una imagen sobre un rectángulo, se va a convertir en un relleno de ese rectángulo en lugar de ser una imagen independiente. Una última cosa a tener en cuenta. Cuando coloques una imagen o cualquier cosa para el caso, asegúrate de que la capa viva en ese fotograma en el que estás trabajando porque además de ese fotograma, puede colocarse accidentalmente en otros fotogramas que están cerca. O se puede colocar sobre el lienzo independientemente de todos los marcos. Si no está en tu marco, no se comportará de la manera que esperas que lo haga. Podría volverte loco hasta que te des cuenta de esto. Por eso quiero cubrir todas las formas posibles de que algo pueda salir mal y no comportarse de la manera que usted lo espera. Esto suele ser lo que causa la mayor frustración al aprender algo nuevo, no entender por qué algo no se comporta de la manera en que se supone que debe hacerlo Entonces, si está actuando raro, echa un vistazo al panel de bengalas y asegúrate de que esté en tu marco Para arrastrarlo sobre el fotograma, tu cursor, el ratón tiene que estar sobre el fotograma, superponiéndose al fotograma. Entonces lo va a arrastrar dentro, y si va como que sale del marco, entonces lo va a arrastrar fuera del marco y ponerlo en el lienzo o en algún otro lugar. Una última opción que tenemos para importar una imagen a Figma es importarla como relleno de imagen Seleccione el rectángulo, haga clic en la configuración de relleno de color y, en esta opción, seleccione la imagen. Obtendrás esta imagen de marcador de posición a cuadros. Después haz clic en Elegir imagen y solo selecciona tu archivo de imagen. Llenará tu capa con esa imagen. La parte divertida de esta opción es que puedes hacer esto con casi cualquier capa, incluso con capa de texto. Esto abre muchas posibilidades creativas para usar en tus diseños. Ahora bien, cuál de estas opciones usas para importar tu imagen en realidad no importa. El resultado es siempre un relleno de imagen. Eso es lo que siempre pasa. Incluso si solo colocas la imagen en el lienzo, Figma solo crea un rectángulo y pone la imagen como relleno En este caso en particular, mi método preferido es subir la imagen directamente en nuestro relleno de rectángulos porque es la forma más controlada en este caso específico, sabemos que queremos que esta imagen sea la mitad de este fotograma y ya creamos un rectángulo marcador de posición para Bien podría simplemente dejar caer la imagen dentro de ella. Ahora bien, lo más probable es que tu imagen y la forma de marcador que creaste para ella no sean exactamente las mismas proporciones Cuando llenes tu forma con la imagen, obtendrás una imagen recortada en ciertos lugares Puede que no te guste este recorte, por lo que tendrás que ajustarlo para obtener la posición ideal Por suerte, podemos hacer esto seleccionando una opción de recorte desde aquí y luego simplemente moviendo nuestra imagen para posicionarla exactamente de la manera que queremos Esta herramienta de recorte funciona prácticamente de la misma manera que recortarías una imagen en tu teléfono Puedes mover la imagen, colocarla donde quieras, y si necesitas agrandarla o encogerla, también puedes hacerlo. Solo una nota importante, al cambiar el tamaño de la imagen dentro de la herramienta de recorte, el cambio de tamaño no bloquea la relación de aspecto de inmediato, es posible que obtengas una imagen distorsionada si no tienes cuidado Una solución fácil para esto es mantener el turno mientras cambias el tamaño Esto bloqueará la proporción de aspec mientras cambias el tamaño, terminas con proporciones originales y no alguna versión de panqueque Excelente. Nuestra imagen está lista. Ahora voy a darle estilo a mi texto un poco. Puedes colocar tu propio texto en el titular cuando escojas tu imagen. No tienes que preocuparte por el párrafo. He usado el texto ficticio, el infame Loren Ya tengo en mente las fuentes. No los voy a elegir en base a imágenes, pero puedes si quieres. El Playfair Display es un hermoso tipo de letra en estilo de servicio moderno, le da mucha clase a la página Y Lato es una excelente corbata sensorial para cualquier tipo de uso general Ahora, alineemos nuestros elementos a la cuadrícula. ¿Recuerdas cómo aplicar la cuadrícula al marco? Primero, seleccione el marco en el panel de propiedades debajo de la cuadrícula de diseño, haga clic en el icono más. Por defecto, es una cuadrícula bidimensional. Queremos columnas. Ingresa 12 columnas. El espacio de la canaleta es flexible. Por lo general se puede poner cualquier cosa 20-40. Prefiero 30 pixeles. Apliquemos también los márgenes. Los márgenes son necesarios porque el contenido del sitio web no comienza desde los bordes. Cada sitio web tiene cierto margen de contenido en los lados. Cuáles son los mejores márgenes depende del ancho del marco. Si estamos diseñando en la gran pantalla del escritorio, entonces nuestros márgenes serán mucho mayores en comparación si estuviéramos diseñando para el teléfono. Para este tamaño de cuadro, 60 píxeles es bastante bueno. Y Una cosa que podrías notar es que mi porta lugares de imagen no se alinea con la cuadrícula, que uno podría pensar, espera un segundo, ¿no es importante esa cuadrícula y no alineamos nuestros elementos en base a nuestra cuadrícula? Sí, eso es cierto, pero en este caso, nuestra imagen es parte del lienzo. Nuestro lienzo es el color de fondo y las imágenes de fondo de la página. Tienen su propio tejido de espacio y no obedecen a las reglas de nuestra grilla. La cuadrícula suele ser para el contenido y para las cosas que se encuentran en la parte superior de su lienzo de fondo de la página de fondo. Yo una cosa que no me gusta en el texto es lo que se llama palabras huérfanas Ves esa sola palabra en la última línea, eso se llama palabra huérfana Yo diseño, tratamos de evitar esos huérfanos. Hacen que el párrafo parezca un poco torpe. No es un gran crimen dejarlos adentro, pero es un bonito detalle extra para pulir tu trabajo. En tal caso, romperé la alineación con la rejilla. No es tan fuerte de todos modos en el lado derecho del texto porque el texto ya está irregular, está bien romper un poco la cuadrícula a favor de arreglar una palabra huérfana Solo hay que reducir el cuadro de texto hasta que al menos una o más palabras salten en la última línea para darle a esa palabra un amigo. Este párrafo ahora parece más equilibrado. Eso es lo que quieres ir por regla general, un bloque de texto más abarrotado y rectangular con las líneas de texto siendo más uniformes tanto como lo permita Ahora que hemos preparado nuestro marco, podemos comenzar a muestrear nuestra paleta de colores. Para muestrear un color de nuestra imagen, primero, necesitamos difuminar nuestra imagen. Lo que esto hace es que promedia los píxeles adyacentes y te da una paleta de colores más precisa, cercana a lo que nuestros ojos están percibiendo porque en realidad no vemos esos píxeles independientes En la vida real, vemos un promedio con sus sombras y gradientes y todo eso La herramienta de selección de color en una computadora es súper precisa, por lo que agarra el color de los píxeles individuales Y el píxel individual no es la representación más precisa de la imagen general. Seleccione la imagen en el panel de propiedades, verá la opción de efectos. Agrega un nuevo efecto haciendo clic en el icono más. Por defecto, esto agregará una sombra paralela. Haga clic en el menú desplegable para ver otros tipos de efectos y seleccionar desenfoque de capa Por defecto, esto no suele ser suficiente desenfoque. Necesitamos un poco más pesado. Para aumentar el desenfoque, haga clic en el icono y luego comience a aumentar y deténgase antes de que los colores comiencen a mezclarse demasiado. 24 es bastante bueno en este caso. Aunque esto no es un signo exacto, a veces necesitarás mucho menos desenfoque, a veces más, sobre todo si quieres probar un color de algo pequeño como un ojos azules, un lápiz labial rojo, entonces necesitarás un valor borroso menor, de lo contrario, el color se mezclará demasiado Observe como la paleta de colores es muy notoria. Tenemos el azul, estos colores marrón claro, y el marrón oscuro. Figma puede escoger estos colores por nosotros con una herramienta cuentagotas Dibuja rectángulo. Y luego haga clic en este campo para cambiar el color del rectángulo, luego seleccione el cuentagotas Al pasar el cursor sobre la imagen, elegiremos el color de ese píxel exacto y pintaremos el rectángulo en ese color Repita el proceso para todos los demás colores. Cuántos colores elegirás dependerá de la imagen y de ti. Se quiere escoger los colores dominantes, los que son innegablemente visibles y conforman la mayor parte de la imagen, y cualquier color más pequeño que sea bastante prominente incluye algunos tonos neutros así como Ahora que tenemos nuestra paleta de colores, desactiva el efecto de desenfoque en la imagen y empieza a pintar el contenido del lado izquierdo en estos colores y mira qué funciona y qué no. Agreguemos otro rectángulo en el lado izquierdo como nuestro relleno de fondo. Recuerda por qué esto cubre nuestros elementos porque la capa es más alta en la lista. Simplemente muévelo abajo, para que quede arreglado como fondo. También puede hacer clic derecho y seleccionar Enviar al Atrás. Eso enviará todo el camino a la parte de atrás. Ahora probemos algunos colores de fondo. Vamos a ironar estos colores neutros. Veamos el color que va mejor con este marrón oscuro. Vaya, se me olvidó quitar la imagen l del texto cuando estaba jugando con El azul contrasta muy bien, y puede ser útil para algún diseño emocionante. Este brillante color enviado tampoco está mal. Ahí, creo que esta es la mejor. Muy mal en los nombres de color, así que normalmente lo busco en sitios de color. Este se llama Tumbleweed. En cuanto a un párrafo, puedo escoger color blanco. A pesar de que está reventando demasiado y compitiendo por la atención con el titular, en tales casos, lo que hago es que disminuya la opacidad del texto blanco a alrededor Esto disminuirá la intensidad de ese color blanco, y también el color de fondo impregnará un poco ya que tiene cierta transparencia, y eso se adaptará bastante generosamente al fondo También podemos probar esa misma caída weet sobre el impuesto, lo cual no es un mal resultado en absoluto Aunque nunca haría algo como esto, eso solo crea una masa a partir de colores en lugar de combinaciones de colores intencionales y naturales . Cuando se trata de párrafo, nunca vayas con una opción de color vibrante. Eso solo se ve súper aficionada. El color para el texto del párrafo es muy difícil de lograr correctamente. Con los titulares, los colores funcionan muy bien porque son grandes y el color aparece correctamente. Pero con texto de párrafo pequeño, los colores intensos simplemente se ven raros. A menudo son difíciles de leer y parecen un gerente de ventas haciendo una presentación de PowerPoint. Para estar en el lado seguro, solo usa blanco o negro y juega con la opacidad Ni siquiera tienes que secar ninguna de estas opciones de los colores que muestreaste Es un poco arriesgado para un principiante. Es fácil equivocarse. Esta opción tumbleweod sí funciona pero es un tiro un poco afortunado porque es de un color apagado y está exactamente en la misma paleta que el fondo También es el color del titular. Dadas todas estas condiciones, funciona. Quita una de estas condiciones y puede que no funcione. Esta pista de opacidad es una opción perfecta y segura. diseñadores de todos los niveles de habilidad les encanta usar esto mucho. Apégate a ello por ahora y una vez que ganes un poco más de experiencia, puedes empezar a experimentar más En este caso, hice blanco, pero sobre un fondo muy claro, comienzas con un párrafo negro y disminuyes la opacidad a partir de ahí Comprobemos otros fondos de color. Oh, sí, esto también se ve precioso. Bien, entonces este me parece lo más orgánico y deja que la belleza del paisaje realmente destaque. Además, el color es bastante adecuado para el tema al aire libre. Bien, ejercicio muy divertido para que comiences con los colores y juegues con ellos. Después de enviar su trabajo en las asignaciones posteriores a esto, encontrará el enlace a un archivo que tiene una solución al mismo. No te preocupes si la solución no es exactamente la misma que la tuya. No hay una sola solución para este ejercicio. 26. Colores de finos: Vamos a tomarlo una muesca y hacer que un color se enorgullezca de ti. Ya has aprendido a simples colores del mundo que te rodea. Ahora vamos a aprender a afinar esas muestras de cuello. Habilidad de encontrar colores de tumba es una habilidad muy útil, y te dejaremos clavar esos diseños. Un buen trozo de magia de diseño está en color, por lo que queremos asegurarnos de que aprendas todos los secretos y te pongas muy seguro al trabajar con collares. Déjame mostrarte cómo y por qué encontramos collares de tumba. Esta es una foto preciosa. Me gusta el contraste de color entre el pájaro y el fondo. Digo pájaro porque no tengo idea de qué nacimiento es este. ¿ Es halcón y águila? ¿ Un halcón? Ni idea. Sencillemos estos dos collares. Pero, ¿te das cuenta de cómo los collares, sobre todo el marrón, realmente no golpean la marca? Estos colores se ven aburridos en comparación con la imagen. El caso es que las plumas no tienen un color uniforme. Algunas partes se mienten. Algunas partes protagonizan. La luz también se refleja de manera diferente en diferentes partes. Por lo que todo esto da una percepción diferente a la toma de muestras de un color desde un solo punto. Pero los colores en el pájaro son más claros, más vibrantes y en general se ven más emocionantes. Esto es lo que podemos hacer para sacar lo mejor de nuestro color en vig Ma o cualquier otro auto fair diseñado . Para el caso, tenemos esta herramienta de recolector de color alertas aprender a trabajar esto realmente rápido. Este año es un espectro de color en este cuarto lleno, nos pico te pregunta. Un matiz es el ingrediente principal que hace el collar. Como puedes ver, el tono para este collar está justo aquí, donde el asa del deslizador está en el espectro. Otros dos ingredientes que componen nuestro color son el brillo en saturación. El brillo es el eje vertical. En este mapa. Es exactamente lo que dice. Qué tan brillante es el cólera se retira verticalmente en el mapa. Más brillante, el color se pone. Y a medida que nos movemos hacia abajo, más oscuro se pone el color. Se puede pensar en esto como la forma en que cae la luz sobre el color. Durante un día soleado de verano, puedes ver un collar un tú específico completamente ya que hay mucha luz cayendo sobre él. Pero por la noche, en tu habitación con las luces, todo cuando es tono negro y no ves nada que todo es negro, incluso el color rojo más brillante. Por eso el círculo inferior es completamente negro. En esta escala, 0% de luz significa que no vemos. No la saturación es el eje horizontal en este mapa. Es esa intensidad fuera de este particular Hugh en el color. A medida que te desplazas hacia la derecha, la saturación aumenta y el collar se vuelve más intenso. Y a medida que avanzas hacia la izquierda, llamamos a esto de saturación que el tono empieza a desvanecerse hasta que se retira por completo de nuestro cuello. Después nos dieron una escala de grises al blanco y negro. Foto es una foto totalmente saturada en este recolector de color. Hay desplegable que te permite cambiar de forma predeterminada entre diferentes sistemas de administración de color . Es hacks, lo que significa código decimal hexi. Cambia esto a HSB. HSB significa exactamente lo que acabo de hablar de tono, saturación y brillo. Los tres valores se pueden ver aquí mismo. 1er 1 emisión segunda saturación en los años treinta. Brillo. El último porcentaje valora la opacidad. Vayamos por la puerta trasera Burt para afinar el color. Mantenemos los qs de hoy y jugamos con saturación y brillo. Es importante mantener el mismo valor de tonalidad de lo contrario, para obtener un color completamente diferente que ya no coincida con la imagen original. En primer lugar, voy a aumentar el brillo porque está demasiado oscuro. El valor de brillo antes era de 78. Terminar lo incrementó. Es 95 la escala tanto en brillo como en saturación y va de cero a casa, 100 como porcentaje. Y ahora disminuya un poco la saturación. Y obtendremos un resultado como este. Esto es más parecido. Se siente más cerca del cuello del pájaro que el original. Lo mismo que podemos hacer con el azul. Está un poco oscuro. Yo sólo voy a aumentar un poco el brillo, y eso es todo. De esta manera. Ambos colores son vibrantes y brillantes. Tal mejora de lo que teníamos antes Esto es más adecuado para el diseño Web de hoy. Mira, estos son colores emocionantes que contras entre sí muy bien y en general se ve fresco y moderno 27. Assignment: colores finos: En esta tarea, quiero que vuelvas al archivo Figma de la asignación anterior Repasa cada cuadro que hayas diseñado y afina las combinaciones de colores finales que hayas utilizado en tu diseño. Déjame mostrarte esto en el mismo ejemplo que he hecho yo mismo. Este fue el resultado final con el que me he asentado. Creo que puede usar alguna afinación fina, sobre todo con un fondo marrón oscuro. Es un poco demasiado oscuro y la transición entre la imagen y el relleno de fondo no es tan evidente. Ciertamente puede usar algo de brillo. Aquí hay un prote. Duplica tus fotogramas cuando trabajes en una nueva variación. El diseño implica mucha exploración y revisiones, adquirir el hábito de tener muchas versiones de la misma pantalla. No hice esto al principio para ninguna variación nueva, solo seguiré editando el fotograma original. A veces después de 20 minutos de ajustar y cambiar las cosas, termino con una opción, que no era mejor que la versión original, pero no tenía forma de comparar Y ir todo el camino de regreso fue demasiado problema. Si no mantienes tus variaciones, cambiar de opinión se vuelve difícil, y muchas veces te conformarás con una opción menor. Para duplicar un fotograma, se hace como cabría esperar con cualquier otro elemento en Figma, ya sea seleccione el fotograma y presione el control C y el control V o arrastre mientras presiona hacia fuera u opción Bien, selecciona la capa de fondo. Haga clic en Fallar. Asegúrese de tener HSB Color management seleccionado y no HX o algo más Para simplificar la afinación fina para mí, tengo una regla personal. Aumento o disminuyo los valores en incrementos de diez. Esto es sólo para limitar mis opciones. De lo contrario, podría dedicar menos tiempo a comparar 32 brillo con 33. Mantenga presionada la tecla Mayús y presione las teclas de flecha arriba y abajo para aumentar o disminuir los valores en incrementos de diez Ahí vas. Eso es mucho mejor. Veamos si afinar el color del titular trae buenos resultados. La mayor parte del tiempo, no tengo idea lo que va a funcionar y de lo que no. El diseño es mucho jugar y comparar opciones. El brillo es realmente bueno, así que solo jugaré con la saturación. Oh, ahí, eso es hermoso. Veamos el antes y el después. Mira eso. El original no estuvo mal, pero tengo un resultado aún mejor. El texto es más fácil de leer en la nueva versión. La transición a la imagen es mucho más evidente y el titular y fondo parecen estar hechos el uno para el otro. Muy divertido. Me encanta jugar con los colores. Se supone que el diseño es divertido. Vuélvete loco. Diviértete con él. Si te encuentras luchando con algo, publica tus preguntas en preguntas y respuestas y te ayudaré 28. 31 Búsqueda de colores NUEVA interfaz de usuario: Aquí hay otros dos métodos para encontrar colores. El primero, y mi favorito, el robo. No hay nada malo en robar colores. A diferencia de otros trabajos creativos, los colores realmente pueden ser propiedad de cualquiera. Así que los diseñadores toman prestados colores el uno del otro todo el tiempo. Esto es básicamente muestrear colores del trabajo de otras personas en lugar de la fotografía. También es un enfoque más simple para encontrar colores que muestrear colores de la fotografía como lo hicimos nosotros. Es la opción más listo para usar que puedas empezar a aplicar a tu trabajo de inmediato. Hay muchos sitios web que crean trabajo de diseño e inspiración. A esto le he dedicado una lección especial. Posteriormente, profundizaremos en el tema de la inspiración y su importancia en tu flujo de trabajo. Por ahora, veamos un lugar para encontrar inspiración de color, dribble.com Puedes encontrar una excelente inspiración aquí. La mayor parte del trabajo aquí ni siquiera es para proyectos reales. Es diseñador mostrar y contar, mucha exploración, ideas y práctica de otros diseñadores. Digamos que estamos trabajando en un sitio web relacionado con las finanzas. Buscaremos por la palabra clave Finanzas y obtendremos mucha inspiración para nuestro trabajo. Cuando encontramos colores que nos gustan, podemos o bien muestrear el color exactamente de la misma manera que hicimos con las fotos. Simplemente guarde la imagen y colóquelo dentro Figma y luego use la herramienta cuentagotas o use una herramienta cuentagotas separada que pueda muestrear colores desde Si estás en Mac, entonces ya tiene una herramienta cuentagotas. Está dentro de utilidades llamadas medidor de color digital. Si estás en PC, puedes usar extensiones de navegador. ColorZ por ejemplo, es una extensión cromada bastante buena para esto La segunda forma de encontrar colores es a través sitios generadores de color como coolers.co Puedes generar paletas desde cero o puedes pegar uno o dos colores que quieras usar y generar algunas otras coincidencias que funcionarán con ese color Aquí hay una cinta profesional. Evite los colores crudos. Los colores crudos son aquellos que tienen 100% de saturación y 100% de brillo. Este es un error que muchos no diseñadores cometen cuando, por ejemplo, diseñan presentaciones para la escuela o trabajo o portadas de Facebook y demás A menudo usan colores de fila como este. Generalmente nos gustan los colores que están presentes en el mundo natural. Y rara vez obtienes esos colores en la naturaleza. Incluso los ejemplos más extremos como Nemo aquí no tienen colores crudos en ellos. Sin embargo, eso no significa que nunca puedas usarlos. Puede haber momentos en los que haya tendencias similares, o tal vez deliberadamente e intencionalmente quiera usar algo así como un verde fluorescente muy brillante , no es un problema. Como siempre con el diseño, si es intencional, probablemente va a funcionar, y si no lo es, podría apestar. 29. Colores de marca: Me encanta cuando estoy trabajando en un proyecto que no viene ya con colores de marca. Eso significa que puedo encontrar la paleta de colores perfecta para el proyecto en mis manos no se atará con los colores de marca existentes, y he sido más libertad para explorar. Pero muchas veces no logramos elegir nuestros propios colores. Esta es una buena noticia si el proyecto viene con buenos colores de marca, pero no como monetario. Si el color suena tan agradable. ¿ Cómo sabes si tienes que usar colores de marca en el proyecto de página web no son fáciles. Si el proyecto ya tiene logotipo, eso significa que hay que usar la marca. Los colores eran para obtener los colores del director del logo. Pero lo mejor es pedir a tus clientes el estilo Dios o las pautas de marca que venían con el logo. Te ves algo así. Esta es una guía que un diseñador de logotipos suele proporcionar para declinar cada vez que entreguen diseños finales de logotipos. Incluirá colores primarios, secundarios y neutros. También podría tener algunas pautas sobre topografía y otros elementos de marca. Si tal documento existe que hay que atenerse a sus coloristas y tipografía proporcionados aquí. La existencia de este tipo depende de cuánto estaba dispuesto a pagar el cliente y de qué tan bueno fuera un diseñador que contrataron. Si se fueron baratos y consiguieron un logotipo en Fiverr, entonces tal vez no tengan una guía de estilo en absoluto. O si el logotipo fue diseñado hace 10 años por el sobrino del propietario, supo hacer clic en pocos botones en la tienda de fotos. Entonces definitivamente no tienen uno. Los colores feos son muy difíciles de trabajar. Y si el cliente ahorró dinero en diseño de logo que casi siempre puedo batear que los colores en el logo van a ser terribles. Los diseñadores de logotipos malos tienen una habilidad única de tiempo viajando hacia el pasado y tomando prestados colores de los noventa. En tiempos como este, a veces sugiero clientes ah, marca refrescan el color de un fresco fuera de su marca. Pueden mantener el logotipo en forma fuera del logotipo, y una vez que diseñé el sitio web y nos conformamos con la nueva paleta de colores, entonces pueden seguir adelante y refrescar el logotipo existente con los nuevos colores. Si eso no es posible y los colores están completos, basura. Entonces limitaré el uso fuera de sus colores en el sitio web, y usaré colores neutros MAWR como blancos, grises y, uh, negros porque se pueden usar con cualquier paleta de colores y luego usar opciones limitadas ah bit y versiones limitadas fuera de sus colores de marca. Este un buen terreno medio entre la necesidad de seguir con el color de la marca se trata de no usarlos tanto para que no hagan que todo el sitio web se vea terrible. 30. Cómo utilizar fotos para crear sitios web de que se mueven en boca: fotos son algo que vas a estar lidiando mucho. Como diseñador Web, es un ingrediente importante para hacer hermosos diseños. Cuando muchos sitios web atractivos verás la belleza proveniente principalmente de la foto bien elegida . Con la foto correcta y la topografía bien colocada, puedes lograr resultados verdaderamente impresionantes en las próximas lecciones. Te voy a enseñar algunos trucos de diseño en manejo de fotos para crear diseños boquiabiertos . 31. Fotos: superposiciones de imágenes: Una gran foto puede hacer maravillas para un diseño. Me encanta esta foto. Es hermoso. Los colores son increíbles. Es simple pero parece un cuento de hadas, pero sí tenemos un problema en esta composición. No hay suficiente contraste entre el fondo y todos los objetos encima de ellos. El contraste es tan bajo que mayor parte de impuestos es completamente ilegible Producir un diseño como este como resultado final es un trabajo terrible, pesar de que todo lo demás es perfecto e imagen tan hermosa. Cómo solucionamos esto mediante el uso de superposiciones. Básicamente, poner rellenos de color encima de la imagen. El más común es ponerle una superposición oscura. En figma, esto significa agregar un relleno de color negro encima de la imagen y agregar transparencia a ese fiel hasta obtener un buen contraste, pero antes de que se oscurezca demasiado Otro método se llama tintado. Es tomar la foto y darle un tinte de color diferente. Para ello, tomas la imagen y la desaturas para convertirla en una foto en blanco y negro Y luego, nuevamente, agregamos un relleno de color, pero esta vez en lugar de negro, se elige un color diferente. Esto le dará a la imagen un tinte de ese color. Esto es especialmente útil si quieres usar colores de marca en el diseño. Es un truco muy práctico. También puedes aplicar la corrección a lugares específicos en lugar de a toda la página. Por ejemplo, aquí, he puesto una caja transparente oscura detrás del contenido, y también he agregado un degradado transparente oscuro detrás de la barra de navegación. ¿Te das cuenta de encendido y apagado y encendido otra vez? Aunque, solo como nota al margen, no soy un gran fan de esos rectángulos negros solo al azar detrás del contenido Así que evito usarlos si realmente sé cómo. Usar grandes imágenes de fondo es un diseño muy fácil. No hay mucho diseño realmente involucrado. Encuentras una foto impresionante y pones tu contenido sobre ella en color blanco. Crea un diseño de aspecto muy atractivo sin mucho esfuerzo. Y en mi experiencia, a los clientes les encanta. 32. Assignment: superposiciones de imágenes: En este video, vamos a practicar aplicar superposiciones a nuestras imágenes Así que encienda su Figma y vamos a quebrar. En este archivo Figma, he preparado tres fotogramas. El contenido está todo diseñado y listo. Tu tarea es encontrar fotos para cada fotograma y aplicar superposiciones de imagen, para que el contenido sea bien visible Déjenme demostrar el primero. Entonces tenemos esta sección de héroes para una app de meditación o algo así. No estoy seguro exactamente. Agarro este contenido de sitios web aleatorios. Primero, necesitamos encontrar una foto. Así que ve a splash.com, e intentemos buscar fotos de meditación No hace falta que sea la meditación exacta. Puedes buscar lo que creas adecuado, así que quizás Lagos tranquilos, aguas, naturaleza, cielo, imágenes básicamente calmantes y calmantes hora de buscar fotos, no necesitamos ir demasiado literalmente y hacer que la imagen describa todo en acción. ¿Qué pasa con las técnicas para encontrar fotos más tarde? Esta foto funciona bien para mí. Puedes usar lo mismo o algo más hasta ti. Descarga desde aquí. Ahora coloquemos la imagen en Figma. Puedes arrastrar la imagen directamente en Figma si quieres o puedes usar una opción de imagen de lugar desde aquí Seleccione su archivo, y luego una vez que obtenga este clavo del pulgar en su cursor, haga clic en algún lugar del marco y colocará la imagen. La imagen se ha insertado en sus dimensiones originales, por lo que está súper zoom y vamos a encogerla zoom para que podamos ver las asas de la imagen y luego simplemente agarrar las asas para recitar la foto Verás que FIMA no distorsiona la foto si la encoge de manera extraña, lo cual es No se obtiene esto en otros softwares de diseño o en muchos otros softwares generalmente Pero esto significa que se están recortando algunas partes. Si no quieres que ninguna de las partes se recorte, tecla Mayús mientras encoge la imagen Eso va a bloquear la relación de aspecto. Ahora, necesitamos enviar la capa de imagen vuelta para que quede detrás del contenido. Dos opciones, ya sea usar una tarjeta corta de teclado de control o comando más un corchete. Una pequeña cosa con la que podrías quedarte atascado, cuando haces clic en la imagen, Pigma selecciona todo el fotograma en lugar de la imagen Así que usa Control o clic de comando para seleccionar la foto directamente. corchete izquierdo lo envía hacia atrás y el corchete derecho lo lleva hacia adelante. Y segunda opción, haga clic derecho en la imagen, luego seleccione, envíela atrás, y eso la va a poner atrás en un solo movimiento. Lo mismo va aquí. Tienes que seleccionar la imagen primero con el clic de Control y luego presionar el botón derecho. Control más clic derecho, y no va a funcionar. Realmente tuve suerte con la imagen se ve genial. Pero como puedes ver, el contenido es muy difícil de leer, así que vamos a aplicar nuestro overlay. Seleccione la capa de imagen y debajo de las opciones de relleno, agregue otro fel haciendo clic en el icono más Asegúrate de tener seleccionada la capa de imagen y no el marco o no hará el trabajo. Y luego empezar a jugar con el control de opacidad. Cuánta transparencia necesitamos va a depender de la propia imagen. Idealmente, queremos lo más transparente que podamos conseguir hasta el punto cualquiera de los contenidos se vuelve difícil de leer. Creo que en algún lugar alrededor del 30% está funcionando bien con esta foto, y eso es todo lo que necesitas hacer para cada fotograma. Ahora te voy a mostrar la opción de tintado que la puedas usar en uno de los marcos Primer paso en el tintado, necesitamos hacer la foto en blanco y negro Esto es súper sencillo de hacer en Figma, clic en el relleno de imagen y disminuir la saturación hasta el Recuerda de las lecciones de color, saturación es la cantidad de matiz en el color. 0% significa que el matiz se ha ido por completo, así que no hay colores. Eso es lo que está pasando aquí. El siguiente paso es agregar un tinte de color. Eso se va a agregar a ese relleno de superposición. Cambiaremos el color negro a otra cosa. También puedes jugar con opacidad, así obtienes el mejor resultado También puedes ajustar otro contenido la página si no están funcionando bien. Por ejemplo, ese botón de registro en la parte superior está demasiado pálido, así que aumentaría un poco la opacidad También en superposiciones tintadas como esa, una práctica común es usar colores de marca Ahí es donde realmente entra en juego el tintado. De lo contrario, realmente no tiene sentido, y es mejor usar la foto original con unos colores vibrantes. Por ejemplo, sean cuales sean los colores de la marca, los usaríamos como tinte y como color de botón tal vez. Si necesitas mover el contenido la página en esos marcos, puedes hacerlo porque a veces tienes algo en la imagen de fondo que está interactuando con el contenido. Si necesitas digamos tomar ese contenido y hacer una alineación central, puedes hacerlo si necesitas reducir un titular o hacerlo más grande o más pequeño, puedes hacerlo. Depende de ti definitivamente. Ahora, termina el trabajo con otros dos marcos y envía tus resultados de los tres fotogramas en la tarea después 33. Fotos: técnicas de recorte de recorte: Soy un gran fan del diseño de carteles de películas. La mayoría de ellos tienen un gran trabajo de diseño. Es intrigante, emocionante y a menudo misterioso. No he tenido esta costumbre de mirar los carteles de películas en las calles y luego aburrir a mi novia con detalles sobre qué tipo de tipografía que estaban usando. Y qué hicieron con la foto y con una especie de truco de diseño que usaron en ella. A medida que aprendes los fundamentos del buen diseño, nunca volverás a mirar los carteles de la película de la misma manera. Aquí en estos dos carteles, quiero que noten la similitud en cómo se usan las fotos. ¿ Te das cuenta de cómo son sombrero lleno es invisible y se acercó muy de cerca a su cara. A esto se le llama Extreme Crop. En esta y siguiente lección, te voy a enseñar varias formas de recortar una imagen. Qué cool se diseñó. Incluso hay trucos sobre cómo recortar una foto. Empecemos con cultivo extremo. ¿ Recuerdas este ejemplo de la lección de color? La foto original fuera de línea es en realidad esta, pero este diseño no es tan impresionante como el anterior, a pesar de que nosotros Seymour del León comparamos con la vista completa. Su look ahora se ha vuelto mucho más intenso y un poco desconcertante. Agrega más emoción y drama a la imagen. Aquí suceden dos cosas. En primer lugar, hay más enfoque en la parte más importante de cualquier ser su rostro y sobre todo los ojos. Esto hace que un tiro sea más íntimo. Los ojos nos están hablando como si estuvieran tratando de darnos un mensaje o demostrar algún tipo de emoción, nos hace más curiosos e interesados en el segundo escondite. Partes del tema lee Misterio. La historia que está en el cartel ahora no termina ahí. Justo al lado del cartel, se siente como si hubiera mucho más por leer, después lo que vemos, que significa que queremos averiguarlo. Y queremos resolver el rompecabezas de ese misterio. Es así como haces un diseño interesante. El cultivo extremo no solo se usa en humanos y animales. Se puede utilizar en objetos. A esto, un gran ejemplo de cultivo extremo. Me encontré en algún sitio web recortando partes de la bicicleta hace que la sección sea más interesante. El clave para clavar cultivo extremo es no ir al fuego y hacer irreconocible el objeto. El público tiene que entender qué inicio. Comprueba instantáneamente sin entrecerrar ni pausar ni siquiera por un segundo, hasta que el objeto siga siendo obvio. Entonces tienes libertad para ir Bastante extremo. Por ejemplo, digamos que estás diseñando un sitio web para una tienda de guitarras. En lugar de usar la forma completa fuera de la guitarra, puedes acercar y recortar a la cabeza de la guitarra. Podemos ver claramente que es una guitarra. Absolutamente innegable. Pero esto no es más interesante de esta manera. Estamos burlando un poco de un público. Estamos colgando un poco de información frente a ellos, pero ninguno revela todo el panorama. Estamos haciendo que terminen el rompecabezas a tu contenido. Simple de color desde la guitarra. Haz que el texto corporal sea tan grande más ligero para que no compita con el titular y ¡Bam! Tienes una excelente sección. Es interesante e intrigante. Recuerda lo último de la tipografía y cómo emparejar la personalidad y el estado de ánimo del tipo Pace con el contexto. Echa un vistazo al titular dice guitarras clásicas sin saber nada de guitarras. El clásico de barrio ya dicta qué elección debemos hacer con una tipografía usando una moderna cara de corbata geométrica como Futura estaría tan fuera de lugar aquí. Pero un tipo de letra de guión como Apple Chancery, es un gran partido. A menudo necesitarás diseñar para unos espacios muy estrechos, por ejemplo, Ah, Ah, banner horizontal para inscríbete de newsletter en un espacio estrecho como estos, cuando colocamos una imagen que el drama y el poder dentro de las imágenes disminuyen porque lo pequeño que es imagen en desacuerdo con mucha emoción en ella, Pero está perdida. esto hay una gran solución. Podemos encontrar un marco que cuenta la historia. En este caso, son las caras y acercar ese marco de estos marcos aún retrata la historia de la imagen. El rostro del niño está enfocado, y las partes del rostro de la madre bastan para demostrar el movimiento de la foto como amor y las vibras felices al contenido. Y eso es todo. Ahora obtenemos un estandarte más efectivo de lo que sigue ahí Motion, y no tenemos que proyectar para entender lo que está pasando en el daño. Este truco es bastante útil para Blawg Hatters y las páginas de artículos encuentran un marco que cuenta la historia en su propio recorte a eso y Ahora tienes un hander muy interesante para una página bloqueada . Un profesor de diseño gráfico llamó a esta técnica mirando a través de las persianas. Piensa en ello no como una foto recortada, sino más como las partes del ver que ves como lo estás mirando a través de las persianas. 34. 38 Recorte suave NUEVO: Otro tipo de cultivo se llama cultivo blando. El cultivo blando no tiene un borde duro. La imagen se desvanece gradualmente. Esto generalmente se hace agregando una superposición de desvanecimiento en la parte superior de la imagen Cuando es del mismo color que el lienzo, especialmente el blanco, parece que la imagen apenas se está desvaneciendo. Se siente natural. Ahora tenemos un excelente espacio a la izquierda donde podemos agregar nuestro contenido. El resultado se ve fantástico. El contenido se presenta en la parte amplia de la composición. Esto le da una cantidad saludable de espacio para respirar. El contenido es aireado y gratuito, es natural, fusionándose con una imagen de fondo sin bloquearla y creando ruido extra ¿Estamos utilizando los conceptos de diseño que hemos aprendido hasta ahora? Apuesto a que lo somos. Hay un punto focal claro, que es el pico de la montaña que emerge de las nubes. El resto del contenido se arregla con una jerarquía visual adecuada, comenzando con un titular grande y negrita, y hay una clara calificación y alineación. Este es un truco muy simple pero, súper poderoso. Es una de mis favoritas ir a técnicas donde ahora estoy trabajando con imágenes. Las pantallas de escritorio y portátiles son bastante amplias. Sin embargo, a veces encuentras la imagen perfecta, pero es vertical. No es una buena solución para usarlo como fondo para una sección de pantalla ancha como esta. La mayor parte de la imagen está extrañamente recortada y pierde su significado. Es demasiado confuso y fácil de ver, y prácticamente no hay espacio para diseñar nuestro contenido. Casi nunca, nunca, quieres colocar una imagen vertical como fondo para una sección de ancho completo. Con un cultivo suave, tenemos un resultado totalmente diferente. La foto mantiene todos sus aspectos importantes, y tenemos un espacio perfecto para colocar el contenido. Esta disposición tiene un punto focal claro, que es el tipo, obviamente. El contenido tiene una gran legibilidad porque está sobre un fondo blanco Si utilizo una imagen vertical como fondo de ancho completo, obtengo un resultado muy caótico El contenido se fusiona con un punto focal de la imagen. No hay suficiente visibilidad para el texto. Es difícil de leer y todo es simplemente muy ruidoso. Con un cultivo suave, por otro lado, le damos a cada pieza de esta composición su propio espacio dándonos un bonito aspecto limpio con alta asibilidad Fotos con las que tengo un fondo negro uniforme es aún más fácil trabajar con. Simplemente muestrea el color desde el último píxel en el borde de la imagen. Llena el espacio con ese color. Organice la imagen en la posición que sea la más adecuada, y obtendrá una disposición fácil con mucho espacio para colocar su contenido maravillosamente. Extender el borde de esta imagen así puede funcionar en otros colores además del negro, pero necesita una solución extra. Bien. En una imagen como esta, si llenamos el espacio usando este método, obtendremos un resultado como este. Existe una estricta separación entre la imagen y el fondo, lo cual es un defecto evidente, y nunca queremos tener un diseño con defectos evidentes como este Ojalá se pueda ver ese borde duro entre la arena y el color de fondo. A lo mejor en tu computadora, debido a la compresión de video, podría estar difuminando ese borde duro Pero es Esto sucede porque los objetos de la vida real nunca son de un solo color, ni siquiera objetos uniformes como la arena. Entonces, cuando probamos un solo color del objeto, es solo ese un solo color. Una forma de solucionar esto es aplicando ese mismo desvanecimiento de degradado. Y en este juego, en lugar de usar el blanco, vamos a muestrear este color exacto de la imagen. De ahora, la arena se fusiona suave y naturalmente con ese color de fondo En el lado verde, sin embargo, hay mucha textura y más mezcla de colores, por lo que el resultado no se ve tan natural. No está nada mal. Se puede usar bien. Aunque, a diferencia de otros tres ejemplos aquí, el verde aparece como una superposición de degradado sobre la imagen. Es más como una cortina que se desvanece en la parte superior de la imagen. Lo cual está perfectamente bien que hacer, y definitivamente puedes usarlo. No obstante, hay un truco que utilizo en esos casos, que nos da un aspecto más agradable. Déjame mostrarte. Si nuestra imagen no es lo suficientemente amplia como para rellenar todo el fotograma, podemos tomar la parte de la imagen que es simple sin formas complicadas y estirarla para sentir el espacio restante. Es importante estirar solo esa parte de la imagen en lugar de estirar toda la cosa. Una parte que es simple no tiene muchos detalles y no está enfocada. De esta manera, la parte importante de la imagen es nítida con sus proporciones originales. No se puede hacer esto con todas las fotos solo si la foto ya tiene fondo borroso que puede permitirse un estiramiento extra En la copia, y tenemos una sección muy guapísima que se siente natural y el contenido es fácil de leer y la sección de pose está realmente bien equilibrada. Así es como el diseño simple y divertido puede ser pequeños trucos que te den grandes resultados. El conocimiento de los trucos es lo que a los diseñadores se les paga mucho dinero. Mis clientes suelen referirse a esto como magia, y me dirán, Oh Vaca, necesitamos un nuevo diseño para esta página. ¿Puedes hacer tu magia? Pero no es magia. Es ciencia. 35. Assignment: recorte de fotos: En esta tarea, practicarás técnicas de recorte que has aprendido hasta ahora Dentro del archivo de asignación, verá tres fotogramas. Cada uno tiene su propio contenido y una imagen. Quiero que apliquen diferentes cultivos para cada fotograma. Voy a demostrar cómo aplicar estos recortes de imagen en un poco En el primer fotograma llamado extreme crop, quiero que apliquen exactamente ese recorte extremo a la imagen del niño. En cuanto al diseño, puede hacerlo en un diseño de pantalla dividida tal como lo hizo en asignaciones anteriores. Como de costumbre, estiliza el contenido en consecuencia, elige tus teléfonos, tamaños, colores y alinea los elementos a la cuadrícula. En el segundo fotograma, quiero que apliquen un cultivo blando blanco. Voy a explicar cómo se hace esto. En el último fotograma, quiero que le apliquen un color soft crop. Igual que la versión blanca pero usando el color de la imagen para crear esa transición suave. Te voy a mostrar cómo hacer esto también. Todo bien. Empecemos con una cosecha extrema. El cultivo extremo es muy sencillo. Se puede adivinar más o menos cómo va a funcionar esto. Voy a crear una pantalla dividida y recortar esta imagen directamente dentro de ella. Ahora, hagamos este rectángulo exactamente la mitad de la pantalla. Podemos hacer que Figma haga las cuentas por nosotros. El marco es de 1,152 píxeles de color blanco. Escriba 1152/2, y obtenemos exactamente la mitad. Alinear con el borde derecho así. Herramienta de recorte abierto. Ahora encuentra los manejadores de la imagen y redimensionarla para crear un efecto de recorte extremo y arrastra la imagen para encontrar tu lugar Aquí hay algunos consejos a la hora de hacer este cultivo. No necesariamente hay que recortar todos los lados eminentemente. Solo se puede ocultar un lado de la cara o de un objeto. El objetivo de la cosecha extrema es crear misterio ocultando partes del sujeto o recogiendo una pequeña porción de toda la imagen y contar la historia solo a través de esa porción. En este caso, prefiero centrar la fase de líneas. Esto funciona mejor con diseños de pantalla dividida como este. Si estaba usando un diseño de ancho completo, entonces tal vez el recorte lateral se adaptaría mejor. Otro consejo, cuando estás recortando a una persona o una imagen, esto tiene que suceder en los bordes del marco Si recortas una imagen y la colocas lejos de los bordes, entonces este truco no funciona. De hecho obtienes un resultado muy extraño. Esta es solo una imagen extrañamente recortada que se coloca en el lienzo Recuerden lo que dije antes, un público tiene que preguntarse qué hay más allá de las fronteras. El hecho de que vamos a buscar es en realidad como mirar por una ventana. Entonces no es que la imagen esté recortada, sino que eso es todo lo que podemos ver a través de la ventana Cuando la imagen se recorta en los bordes, entonces el público puede sentir que esa imagen va más allá de sus fronteras Y esta es exactamente la curiosidad visual que estás creando aquí. Bien. Ahora para el cultivo blando, esto también es bastante sencillo. Lo que tenemos que hacer es poner un rectángulo blanco que se desvanece en el borde de la imagen, para que suavice ese borde final borde izquierdo de la foto Esto se hace usando un relleno degradado. Dibuja un rectángulo. Ir al relleno de este rectángulo. Debajo de estas minúsculas cajas, selecciona la que dice gradiente. Lineal, radial, angular, en diamante. Todos estos son rellenos degradados. Notarás que el relleno del rectángulo comienza desde un color en la parte superior y desvanece a otro color en la parte inferior Queremos que esto sea de color blanco. Dentro del recogedor de color, tenemos dos colores, color inicial y final. Esto muestra lo mismo. Queremos que el color inicial sea blanco con 100 opacidad, y el final vuelva a ser blanco, pero con 0% de opacidad, es decir transparente Esto creará entonces ese efecto de desvanecimiento. Este de aquí es un color de inicio. En el mapa de colores, arrastra el punto a la esquina superior izquierda porque ahí es donde está el blanco. Si accidentalmente haces clic en esta línea de degradado, cambiará la ubicación de donde comienza y termina el color, simplemente arrástralos de nuevo a sus esquinas. El tope extra se puede quitar de aquí. Haz lo mismo en el color final. S. Cambia la opacidad a 0% para el color final. Ahora tenemos un relleno degradado con blanco que se desvanece. Pero esta es una dirección equivocada. Queremos que empiece por la izquierda y se desvanezca por la derecha. Para cambiar la dirección, vuelve a la herramienta de degradado y haz clic en este pequeño icono que dice rotar degradado. Da click en él varias veces hasta obtener la dirección deseada. Necesitamos el 100% blanco para comenzar desde el borde izquierdo, y luego desvanecerse a 0% hacia la derecha. Ahora tenemos una dirección correcta de los gradientes. Ahora colocamos este relleno justo en el borde de la imagen donde se encuentra con un fondo blanco. Y ahí tenemos nuestra cosecha blanda. También puedes estirar este relleno degradado para que el destino sea más suave. Como pueden ver, la transición aquí es un poco aguda. Si extiende el relleno degradado, entonces se extiende de manera más uniforme y hace que una transición sea más suave y natural. Ahora bien, dependiendo de la imagen, a veces esto será suficiente, pero a veces todavía tendrás una transición un poco abrupta como esta En casos como este, duplico el relleno degradado dos veces más, así que tengo un total de tres campos. Se puede ver como ya mejoró, pero aún podemos hacer un poco más. Puedes tomar cada rectángulo y encogerlos o extenderlos, básicamente creando tres campos con tres anchuras diferentes Esto te da un poco más de control en la fijación de cualquier transición nítida. Aquí no hay un papel exacto. Básicamente juegas con su posicionamiento y tamaños hasta encontrar ese punto dulce de la transición. La elección de una imagen también importa, algunas imágenes funcionan mejor que otras. Con el cultivo suave blanco, quieres optar por una imagen que tenga un fondo más claro. Por ejemplo, un cielo diurno en un fondo hace una buena transición. En fondos oscuros, el desvanecimiento blanco no es tan efectivo. Ves aquí se siente antinatural. Un fondo negro y Black fade hace mucho mejor trabajo aquí, como puedes ver. Pero la solución ideal sobre un fondo como este sería escoger un color del borde de la imagen y usarlo como fondo para ese desvanecimiento. Hagámoslo en este ejemplo. Aquí hay un truco de figma genial que puede ser útil en el futuro. Haga clic derecho sobre la imagen y haga clic en voltear horizontalmente. Básicamente refleja la imagen. Esto viene muy útil a menudo. Por ejemplo, cuando quiero poner un contenido en el lado izquierdo, pero la imagen tiene un modelo a la izquierda y un espacio vacío a la derecha, puedo revertirlo y listo. Primero, tenemos que probar un color de la arena y usarlo como nuestro color para el fondo y el fade. Seleccione el marco. Haga clic en fondo y luego muestree el último píxel de color de la imagen. Acércate muy cerca para obtener un mejor manejo y presta atención al zoom de píxeles aquí. Esto muestra qué píxel se muestreará exactamente. La razón por la que estamos seleccionando el último píxel es para crear una transición lo más suave posible entre la imagen y el fondo sin el relleno degradado. Ahora vamos a usar el mismo color exacto para crear un relleno degradado. Copia el código hexadecimal del color del fondo e insértalo como color inicial y final en el relleno degradado. Cambia la opacidad a 0% para el color de la mano. Ahora adelante y aplica esos cultivos en consecuencia a cada uno de los marcos y luego envía tus resultados en la tarea después de esto, y voy a echarles un vistazo. Como notas, probablemente, no he incluido el tutorial de stretch crop y stretch photo en este video, pero he puesto un tutorial de photoshop en la parte avanzada de esta sección, que puedes aprender a hacer y practicar una vez que termines este curso, porque realmente no lo necesitas en este momento. No es tan necesario conocerlo, pero una vez que termines el curso, y puedes pasar por este material principal, entonces definitivamente échale un vistazo y dale una. 36. Fotos: regla de los tercios: alguna vez te has dado cuenta de cómo en las películas los actores suelen posicionarse fuera del centro en el marco? Después de que aprendas estos, nunca podrás no darte cuenta, y estarás obsesionado con ello Cada vez que veas una película, cineastas y fotógrafos usan una técnica llamada Regla de Tercios para agregar algún interés visual al disparo. Se va así. Si divides una pantalla en tres partes iguales, tanto vertical como horizontalmente, la intersección de esas líneas será la visual en los puntos más interesantes para colocar a tu sujeto. Si el objeto es grande, como Angelina Jolie aquí de lo que la colocarías a través de toda esa línea vertical, y si es una imagen fuera de paisaje como esta, entonces colocarías el horizonte en una de las líneas horizontales. Poner a un sujeto en el centro de deuda es algo que se espera. Es simétrico tiene igual espacio a su alrededor. Es seguro y cómodo. Eso también es lo que normalmente haría un no fotógrafo o un no diseñador. Agarrarías una cámara y apuntarías directamente al sujeto, y eso suele ser aburrido. Pero colocar a tu sujeto fuera del centro crea tensión. Es inesperado, sin embargo parece intencional, como si hubiera una razón oculta específica detrás de esto, y queremos saber de qué se trata. Una aplicación de cámara en tu teléfono probablemente tenga esta opción. Yo lo sé. Yo nos encontré. Enciéndalo y pruébalo. Tus fotos mejorarán significativamente al hacerlo, para demostrar este punto, echemos un vistazo a este sencillo ejemplo. Tenemos una caja que se coloca en el centro muerto fuera del lienzo. La distancia entre la dirección de las cámaras y la caja es idéntica en todos los lados. El resultado es papelería simétrica y la caja en reposo. No se está moviendo. Si movemos la caja un poco fuera del centro, al instante agrega tensión. Pero este no es un buen tipo de tensión, porque parece que se supone que la caja está en el centro. Pero no lo es. Esto parece un siempre que un diseñador Miskell comió o no se dio cuenta. Pero si movemos la caja bastante alejada del centro de lo que el resultado parece intencional, no parece que estuviera destinado a estar en el centro, sino que deliberadamente está fuera de los padres. Esto crea un buen tipo de tensión, dando como interés visual. El principio de los tercios está en una ley, es más una pauta blanda. A veces se puede ir bastante lejos de esos puntos de intersección. Esta regla viene súper útil cuando trabajas con caras. Echa un vistazo a este ejemplo. El rostro de este modelo está en el centro, fuera del marco, y esto hace que parezca que está demasiado bajo en el marco. El espacio vacío por encima de su mano es una especie de presionarlo hacia abajo. Para arreglar esto, movimos el modelo en uno fuera de los puntos de intersección superior utilizar Siempre los ojos como tu guía hielo son el punto focal de cualquier rostro humano. Ahí es donde siempre miramos primero. Ahora esta es mucho mejor mirada, y el espacio por encima de él es lo suficientemente pequeño, por lo que no está presionando hacia abajo sobre él. Y otra gran noticia. Esto funciona sin importar el tamaño de la cara. El hombre puede estar lejos en el marco o en extremo de cerca. Siempre y cuando mantengamos esos ojos alineados con ese punto de intersección, siempre se verá correcto. Mira lo que sucede cuando hacemos zoom. Siguen luciendo genial. Acerquemos más luciendo genial. Sin duda una última vez todavía se ve bien. No importa qué tan lejos se reanude. Esta es la belleza del dominio de los tercios. Se trata de una pauta súper simple, sin embargo, puede hacer que las fotos se vean mucho mejor. Ahora. El principio de los tercios es una pauta blanda, y tiene excepciones. Hay muchos casos en los que tendrás mejores resultados. Si no sigues esta regla en una imagen como esta, el centro es la mejor posición, y no debes usar la regla de tercios. ¿ Por qué? Porque el punto de vista central es la intención aquí. El foto está en la perspectiva en primera persona. Estamos viendo la vista desde los ojos del sujeto y con su perspectiva. Obviamente, la colocación más natural es el centro porque no tendría sentido que viera las cosas lado. Hay más ejemplos de posición central siendo la elección correcta. Por ejemplo, cuando la colocación del sujeto y otros elementos de la imagen realmente crean el interés visual en el centro, la carretera bordea la carretera amarilla marcando en el medio esa brecha entre las palmeras. Todo eso está creando interés visual en el medio. Mantener esta mente gobernante te ayuda a escoger buenas, mejores fotos cuando las estás buscando en lados de la fotografía de stock, por ejemplo, si estás buscando una foto para una pantalla dividida como en nuestro ejercicio, entonces en esos casos, una foto con el modelo que está en el centro es una mejor opción porque en los casos de una pantalla dividida , obtienes este modo retratado estrecho fuera de la foto y en las fotos estrechas. No es la mejor opción para usar la regla de los tercios. Pero si estás buscando una foto de fondo, sobre todo una en la que vas a colocar un contenido, entonces la alineación fuera del centro será la mejor apuesta. Por lo que de esta manera mirarás a través de las fotos y encontrarás un tiempo donde hay suficiente espacio para que muevas un sujeto a los pupilos uno fuera de las líneas de la regla de los tercios. 37. Photos: Unbox: fotos siempre vienen en una caja. Ese es el formato original cuando exportaste desde tu cámara, o incluso si descargaste desde nuestro sitio web. Cuando tomas una imagen en caja, colócala justo en el lienzo, a menudo no es muy impresionante. Se trata de un objeto separado, no fusionándose con el espacio, y crea cajas adicionales a su alrededor. No te das cuenta esto conscientemente sobre nuestros ojos lo hacen, y necesitan procesar esas cajas extra que se han creado entre la imagen y la dirección fuera del lienzo. Usemos un ejemplo real de uno de mis proyectos de página de aterrizaje que han hecho para una clínica dental . He usado esta imagen exacta para ese proyecto, y esta es una especie de donde empecé. Entonces, ¿cómo podemos mejorar una sección con una imagen como esta? Tenemos que pensar fuera de la caja, literalmente desencajar la imagen quitando completamente el fondo, ponerla en el borde inferior derecho, y ahora, en lugar de ser una aburrida foto abofeteada en la página, ese modelo es una especie de salir de la página. El fondo blanco no está funcionando realmente con esta imagen. ¿ Puedes adivinar por qué? Porque la modelo lleva un top blanco. Hace un terrible contraste, y si no fuera por su pelo rojo, se estaría desvaneciendo. Ya que la imagen ya no tiene fondo, tenemos más libertad para poner nuestro propio color de fondo en todo el lienzo. Esto nos da más libertad para experimentar y elegir combinaciones de colores interesantes y hacer que el diseño de más emocionante. Este color complementa su pelo rojo, el contraste bien, y hacen un muy buen combo. Además, este color azulado es un pick adecuado para el tema de la odontología. Colores azules, Fillmore Limpio y sanitario. Buena sensación de crear para odontología y muchos otros colores sería una bandera roja para una clínica dental como el rojo y el rosa. Eso nos recordaría a la sangre, no a una buena sensación. A menudo me gusta añadir una sombra detrás del lema. Esto la hace parecer como si estuviera parada frente a una pared. Agregaría más dimensión al espacio. Ahora hay dos capas separadas. Ahí hay un muro, y luego hay un modelo parado frente a él. No necesariamente necesitas aplicar una sombra. Todavía puedes obtener buenos resultados sin ella. A veces ni siquiera Borg esta vez. Funciona y rinde un muy buen resultado porque es un disparo directo de la modelo y fácilmente puede estar parada frente a la pared. Es el titular. ¿ Ves lo que hice con el tipo? Es pesado, ancho y mayúsculas. Eso es para que coincida con su contexto fuera de esta página. Dientes rectos anchos en teléfono flaco negro no serían tan efectivos aquí, ¿verdad? Siempre debemos tener en cuenta el tema a la hora de diseñar todo lo que hacemos en la página crea asociaciones con personas. Se usaron las llamadas formas que elegimos todo lo que va a crear ciertos sentimientos en las personas, igual que lo discutimos en la lección de tipografía sobre las personalidades de Taipei. Esto es pensamiento diseñado, y es una escala única muy importante en el conjunto de habilidades del diseñador. De acuerdo, ahora agrega el resto de la copia en la barra de navegación, y tenemos una hermosa sección de héroes para una clínica dental. ¿ Te das cuenta de por qué hice el botón naranja? Porque lo muestreé del pelo de la chica. No es el color exacto. Como pueden ver, he hecho afinación fina en él de esta manera. Es más vibrante y adecuado para unboxing sitio Web moderno. La imagen nos ha dado más libertad y control sobre nuestra composición, ha añadido la profundidad. Todo objeto parece existir en un espacio compartido, pero en diferentes capas, al igual que en el mundo real. Estos se ha dado como una sección de héroes muy guapa e interesante. No necesariamente es necesario desencajar una imagen completa. Se puede lograr un resultado emocionante sacando una pequeña parte del objeto de su marco. Por ejemplo, eso es lo que he hecho por este sitio web. En otro proyecto para una empresa de techado. Yo quería enfatizar el techo de alguna manera. Pero el diseño del no es realmente cortar la mostaza. El techo se pierde en el diseño, así que saqué la punta del techo y la llevé a meter fuera del marco. Ahora el techo ha ganado un foco de atención. Es un punto de interés, más las imágenes y como cosa separada ya. Está interactuando con el lienzo y otros elementos en él. Eso es todo lo que se necesita para liberar e imagen de su marco y darle vida. Realmente no podemos crear este efecto en fig MMA. Definitivamente necesitaremos una tienda de fotos para estos en la parte avanzada de los puntajes. He puesto un tutorial de photoshop y una asignación sobre cómo lograr este efecto y cómo cortar un tema o un modelo de la imagen y quitar el fondo de la misma. No es un efecto esencial, pero saber cómo hacer que funcione este efecto realmente abre tus opciones en el diseño a la vez. Se quita el fondo del tema. Abre muchas opciones de diseño diferentes, igual que lo que pasó aquí, porque ahora podemos cambiar el fondo. Podemos movernos, digamos titulares e impuestos detrás de objetos, y podemos crear un poco más capas tridimensionales en nuestros diseños. Entonces cuando llegues a la parte avanzada fuera de este curso, definitivamente no te pierdas este tutorial y practica porque realmente va a ser útil cuando comiences a diseñar. 38. Fotos: elige fotos como un profesional: Estas técnicas fotográficas van a ser inútiles si no sabes elegir las fotos adecuadas para tus diseños. En esta lección, te voy a enseñar a elegir fotos como Pro. Las fotos que usarás para tus proyectos se llaman fotos de stock, que descargas de sitios de stock gratuitos como Oslplash y de pago como I Stock Ahora, la gran parte de las fotos de stock son simplemente terribles. Seguro que has visitado sitios web que usan fotos como esta. ¿Cuál es exactamente el problema con esta foto? Las botellas se ven bien. bien vestidos, están sonriendo. La foto es de buena calidad y tomada en un entorno profesional. Todo en papel parece correcto, pero la foto sigue siendo coja. ¿Por qué es eso? Porque es claramente falso. Es claro que no se trata de gente de negocios real. Se trata de modelos haciendo una pose tonta con falsas sonrisas en ellas. Ahora, todas las fotos profesionales están hechas así, una modelo que está desempeñando un papel específico en la foto, vistiendo ropa que no es suya, retratando una emoción específica y recibiendo un pago por Y eso está bien. Pero si la foto se hace bien, no deberíamos poder decir lo que está pasando en la realidad. Piénsalo como películas. Sabemos que se trata de actores. Sabemos que en realidad no están parados en un barco en 1912. Están vistiendo disfraces y actuando una escena. Cuando se hace una película, bueno, no podemos decir. Olvidamos que en realidad es falso y que estas personas solo están fingiendo. Aquí está pasando lo mismo. Están vistiendo disfraces y fingiendo. Pero a diferencia de los buenos actores, estos chicos apestan en ello. ¿Sabes qué pasa cuando usas una foto que se ve falsa? Estás enviando un mensaje muy malo a tu audiencia. Si la foto es falsa y finge, entonces el sitio web se va a sentir falso y fingiendo No hay personas reales detrás de este sitio web. Si los llamo o correo electrónico, no voy a obtener una respuesta de personas reales o peor, incluso podría ser un sitio web de estafa. Se necesita un poco de práctica para distinguir las buenas fotos de archivo de las malas, pero aquí hay tres preguntas que debe hacerse cuando esté mirando fotos. ¿La escena es real? ¿Pasaría algo así en un escenario de la vida real? Entonces, ¿la gente que trabaja en la oficina se pararía frente una cámara y se tomaría de la mano así? Si alguna vez has trabajado en la oficina corporativa, sabes que lo último que quieres hacer es tomarte de la mano con tus compañeros de trabajo y pararte frente a una cámara Entonces la respuesta es claramente no. Falso o esta foto, por ejemplo, ¿qué opinas? ¿Es real esta escena? Obviamente no. Para empezar, el garabato en el vaso es un galimatías completo Se trata de cartas aleatorias y flechas. No tiene sentido. ¿Qué pasa con ese portapapeles Es una forma tan cliché de describir una escena de oficina. Esta foto, por otro lado, es una historia diferente. Parece una reunión realista y la gente lleva ropa que hoy en día verías en las oficinas modernas. Están hablando entre ellos, que es lo que sucede en las reuniones, no tomados de la mano y mirando una pizarra con garabatos sin sentido Falsa La segunda forma de contar una mala foto de stock es por emociones falsas cursi Esto no parece una auténtica emoción humana de emoción. Tampoco la escena es cercana al mundo real en esta foto. ¿Alguna vez has tenido dinero falso en una mano y una lupa en otra O este tipo que está tan entusiasmado con algunas buenas noticias falsas en su computadora portátil falsa. Muy bien seco, amigo. Representar emociones humanas genuinas frente a una cámara en un estudio fotográfico es algo difícil. Por eso tantos de estos modelos están haciendo un trabajo terrible en ello. No premies su mal trabajo usando sus fotos en tu proyecto. Y además no arruines tus diseños con esas fotos. No es difícil saber si la actuación se ve genuina. Así es como se ve una emoción genuina. Esto no. Incluso las emociones sutiles como una sonrisa regular pueden parecer muy antinaturales y falsas, y cuando se hace bien, se ve genuina y acogedora Pregúntate, si las emociones se sienten reales, probablemente podrás decirlo con bastante facilidad. Además de lo que están haciendo los modelos dentro de la foto, también puedes distinguir fácilmente una mala foto de stock de una buena prestando atención al diseño del escenario. Por set, me refiero a todo además del modelo donde se toma la foto, objetos en la toma, incluso ropa que lleva la modelo. Muchas fotos de stock suelen ser bastante antiguas. Se han tomado hace años, pero siguen siendo vendidos y utilizados en sitios web. Realmente no quieres usar una foto de una década para un sitio web de startups de tecnología moderna. Al prestar atención a la ropa, puedes identificar fácilmente fotos fechadas. No tienes que ser fashionista para esto. Usa tu sentido común. No es difícil decir que ninguna chica de su edad usaría algo así hoy. Esto en realidad no quiere decir que la foto fue tomada hace mucho tiempo. A veces las fotos son nuevas, pero los fotógrafos reutilizan el mismo vestuario. Los estudios fotográficos guardan su disfraz de los rodajes y los reutilizan con otros modelos y nuevos escenarios años después. La ropa que no le queda un claro indicador de que la escena es falsa, aunque fuera moderna. Como esta pobre chica de aquí. Los estudios fotográficos también intentarán usar ropa neutra que se pueda reutilizar años en el futuro que no tengan que comprar vestuario nuevo cada año Entonces verás esta ropa muy mezcla desprovista de cualquier personalidad Ese es otro indicador, también. Pero creo que esta foto tiene otra cola clara esa pantalla de computadora. En conjuntos bien diseñados como aquí, verás gente vistiendo ropa moderna y muchas veces bastante adecuada para sus personalidades. Parecen personas reales, no como una simulación por computadora. Presta atención a los objetos del set. Pregúntate si se ven realistas. Como esta lupa y dinero falso, nada dice falso mejor El dinero falso y aléjate de todo lo abstracto. Por ejemplo, bombillas. Dios, odio las bombillas. gente le encanta usar una maldita bombilla para representar cosas como la idea y la creatividad o el pensamiento Está sobreusado me da náuseas cuando lo veo. Una vez estaba trabajando en un sitio web muy premium, y como sugerencia, mi cliente me envió una bombilla para usarla como fondo para un sitio web. Casi ladro en la pantalla de la computadora. Los objetos abstractos son generalmente una mala idea. La mayoría de ellos se ven exactamente así. Abstractos, confusos y a menudo cliché ya que se utilizan en exceso Su diseño debe dar a la audiencia un sentido de comprensión y autenticidad. Cualquier cosa abstracta hará lo contrario de esto. Cliché piezas de rompecabezas y nubes sobre las cabezas de las personas. Ah. 39. Fotos: dónde encontrar fotos: Bien, entonces ¿dónde encontrar buenas fotos? Hay fuentes gratuitas y de pago. Mi sitio de stock gratuito favorito es unsplash.com. Ya has usado esto en las asignaciones. Hay muchos sitios que ofrecen fotos gratis, pero no son totalmente gratis. Vienen con algunas reglas de copyright como debes acreditar al autor o solo para uso personal, pero no para uso comercial. Unsplash es verdaderamente gratis. Puedes hacer lo que quieras con las fotos, y no tienes que acreditar al autor. Las fotos en unsplash.com son de aspecto muy realista. Muchas veces son enviados por fotógrafos individuales de todo el mundo y no por estudios fotográficos de stock. Por ello, se obtienen escenarios muy realistas y personas que se ven genuinas y reales. Bueno, al menos la mayor parte del tiempo. Otro sitio web gratuito decente que uso es packsals.com. Pack Sales también es totalmente gratuito , sin limitaciones. El concepto y los fotostas son muy similares a Osplash, pero aquí obtienes un poco más de diversidad Sin embargo, los sitios de fotos gratuitos tienen una desventaja. Todos los usan. Y una foto particularmente guapa será utilizada por mucha gente en todo el mundo. Así que las fotos que usas en tus diseños web pueden ser fácilmente utilizadas por muchos otros diseñadores web para sus sitios web. En algún momento, cuando pasas por muchas de estas fotos gratuitas de estas fotos gratuitas de onslash o Pack Seles y otros lugares, comienzas a reconocerlas en muchos Y si el público ve que esta foto se usa en otros sitios web, también, una especie de abarata el sitio web Ya no es tan único. Aunque lo mismo se aplica a los sitios de stock de pago, pero debido a que se les paga, significativamente menos cantidad de diseñadores estarán usando estas fotos para sus sitios web. Además, los sitios de stock tienen una selección de fotos mucho mayor que los sitios gratuitos. Entonces por esta razón en proyectos bien pagados, definitivamente te recomendaría usar fuentes pagas en lugar de fotos gratuitas. Mi favorito de los sitios de stock pagados es eStock. Tienen una de las fotos de mejor calidad con modelos y escenas de aspecto realista. Pero claro, aquí también obtienes fotos de aspecto falso. Es inevitable, mientras la gente esté comprando esa porquería. Realmente no se puede poner un número exacto sobre cuánto cuesta una foto en un lado de stock, porque todo depende de cuántos compres, planes de suscripción y a veces de la imagen misma. EyeStoc está un poco en el lado más caro. Una imagen aquí cuesta $9-24. Pero luego con paquetes y suscripción mensual, puedes obtener descuentos bastante buenos. Otra fuente bien pagada es el stock de Shutter, y es mucho más barato que ETOC Con los planes de prepago, obtienes una imagen por $10 tops. Prepago significa comprar un paquete como $50 por cinco imágenes. Para usuarios pesados, puede obtener una suscripción mensual. Obtendrás cierta cantidad de imágenes gratis por mes. Y bajar a $3 por imagen y menos. Una de las opciones más baratas pero decentes es bigstok.com. Aquí, el máximo debe ser unos $3 por imagen con paquetes de paquetes. A diferencia de otros, Big Stock tiene una prueba gratuita de siete días que te ofrece 35 imágenes gratis durante ese periodo de prueba. Sin embargo, ten en cuenta que piden los datos de la tarjeta de crédito y tienes que cancelarla antes del último día o te cobrarán. Toma toda esta información de precios con un grano de sal porque estos son sitios web independientes y sus precios pueden cambiar muy a menudo. Y además, dependerá del país de donde seas o de dónde estés comprobando los precios por los impuestos y el IVA. Pero en el estadio de béisbol, así es como funciona el precio para estos tres sitios web y muchos otros sitios de acciones pagas He puesto los enlaces a estos sitios web, tanto gratuitos como de pago y un poco más en la página de recursos, para que no dude en consultarlos. 40. Proyecto: encontrar fotos: Ahora hagamos un ejercicio divertido donde vayas y cazas algunas fotos de archivo. En este archivo Figma, he preparado tres marcos con titulares y descripciones de tres negocios De hecho, he tomado texto de negocios reales y sus sitios web Quiero que encuentres una foto apropiada para cada fotograma, imaginando que estás diseñando su página de inicio y necesitas una foto para la sección de héroes No estás diseñando en esta tarea, así que no te preocupes por el formato. No importa si la imagen va a ir al fondo como una pantalla dividida o de cualquier otra manera. El objetivo es sólo escoger una imagen pensativamente. Puedes elegir fotos de cualquiera de estos sitios de fotos gratuitos o de pago, ya sea splash, Paxl, I Stock, o cualquier otro sitio Encontrar la foto correcta para tu proyecto en realidad lleva tiempo, y a veces necesitas buscar en varios sitios para concretarlo realmente. A veces puedo pasar un par de horas buscando la foto correcta solo para una sección de héroes. También puedes usar sitios pagados y simplemente tomar muestras de allí sin pagar por ello. Puede capturar o descargar imagen con marca de agua. Big Stock, por ejemplo, tiene un enlace de vista previa de descarga y puedes usar esa imagen de muestra. te preocupes por el formato de calidad o el tamaño de la imagen, pero sí quiero que uses solo sitios de fotos de stock y no Google o cualquier otro lugar donde tengan estrictas reglas de copyright sobre sus imágenes como parpadear o tomar la foto de alguien de Facebook Y por cada foto que elijas, quiero que me expliques por qué elegiste la foto. Así es como te acostumbras al pensamiento de diseño. Harás mucho mejor trabajo y tendrás tus empleadores más felices cuando pongas pensamiento detrás de cada una de tus decisiones Voy a hacer un ejemplo aquí mismo. primer paso es entender de qué se trata el negocio y qué es lo que están ofreciendo. Entonces piensa en qué tipo de escena queremos establecer en el sitio web, dado el negocio y el texto. Entonces este negocio ayuda a otras empresas a medir la felicidad de sus empleados. Este tipo de me da una idea de que mostrar empleados felices funcionaría bien para este marco. Vamos a nuestros sitios y comencemos buscando literalmente empleados felices. Los tres arrojaron resultados bastante diversos. Y como puede ver, Shutterstock siendo el lado pagado ha devuelto significativamente más número de resultados que splash y píxeles Cuando haces el experimento de búsqueda con diferentes tipos de palabras clave. A veces, la frase clave literal como empleados felices funcionará, pero a menudo va a ser mejor usar y mezclar y combinar palabras clave individuales. Por ejemplo, en este caso, sí quiero que la escena esté ambientada en un entorno de oficina. Esa es una especie de palabra clave dura que necesita estar presente en la escena. Así que solo puedo usar office y luego algunas palabras clave secundarias con ella como sonreír, feliz, y así sucesivamente. Aquí hay un pro tepe. Cuando veas una foto que tenga la calidad que te gusta, pero aún no es exactamente la escena correcta o la modelo, encuentra quién es el colaborador y busca dentro de sus fotos. Bajo copyright, hay un enlace del colaborador, es decir, un fotógrafo o el estudio fotográfico que subió esta foto en el sitio. Si haces clic en este enlace, entonces verás todas las demás fotos de este colaborador. Todos los lados de stock tienen sus propias formas de mostrar las fotos de los colaboradores y dónde encontrar el enlace, pero la mayoría de ellos lo hacen. Y sus propias formas de buscar a través de las imágenes de un colaborador. Simplemente inserta tu palabra clave y esto refinará los resultados dentro de las fotos del colaborador. Sin este truco, tendría que pasar por miles de fotos terribles. Esta es una opción bastante buena para los empleados de Happy. Descarga la vista previa y luego simplemente colócala dentro del archivo Figma Puedes tomar una captura de pantalla o usar una opción de descarga que proporciona el sitio. Eso es todo. No hace falta diseñar nada. Déjalo como está. Muestra empleados felices, que es el objetivo de este negocio. La foto es moderna, el ambiente se siente relajado, sonrisas se ven genuinas y en general, las películas fotográficas cálidas y acogedoras. Y hecho. Esa es tu tarea. No hay diseño involucrado. Que se diviertan. 41. 6 trucos de diseño que cada diseñador debe saber: diseño es como espectáculo de magia. Hay trucos que hacen que una obra se vea hermosa y emocionante y algo por lo que la gente quiere pagar, igual que un truco de magia. Un buen diseño te puede hacer sentir asombrado. Pero una vez que se revela el truco, entiendes, lo entiendes,en realidad es bastante simple, y comienzas a darte cuenta de que los viejos diseñadores están usando los mismos trucos en los próximos videos. Te voy a enseñar varios trucos de diseño que te ayudarán a crear deseos hermosos y muy interesantes como la magia. 42. Truco de diseño: contraste: echar un vistazo a esta página. Este es un diseño muy sencillo, pero bastante efectivo. El truco de descenso que se usa con fuerza en esta composición se llama contraste. Es este contraste entre el gigantesco título y el texto de párrafo más pequeño. También Contras. Entre la pesadez, fuera del titular y la ligereza fuera del párrafo contraste entre parte negra fuera del titular con azul y contraste entre el fondo de la vida y el gran botón azul. Tengo que decir que es un poco descuidado en la alineación, aunque el contraste es muy utilizado truco de diseño. También nos ayuda a crear jerarquía visual entre los elementos, y se puede expresar principalmente de tres maneras. Contraste en contraste de color en el tamaño grande versus pequeño y luego contraste en peso como pesado vs ligero. Echemos un vistazo a otro sitio web. ¿ Te das cuenta del contraste en el color sobre Te haces ancha telefonada y reserva sobre un fondo rojo novia a él. Eso es uno Toros, en contraste, ven el contraste en tamaño y peso entre el titular y el texto. Arriba y abajo. Contraste en el diseño logra dos cosas, Usualmente primero, nos ayuda a establecer la jerarquía visual en la página y segundo crea interés. Poner dos cuadrados idénticos juntos, y no dice nada. Es aburrido, pero soplar uno de ellos a tamaño extremo en comparación, en este gran contraste entre ellos crea interés. Ahora parece que hay una historia detrás de ella o crear un contraste en cuello, y al instante se vuelve más interesante. contraste en el color se crea mediante el uso de colores complementarios. Morado y amarillo. Aquí te presentamos los colores complementarios, y por último pero no menos importante, puedes crear contraste usando peso. Entonces, ¿cómo crearías peso Contras entre estas cajas quitando la sensación en una ellas y viéndola con trazo de contorno La caja completa se siente más pesada y la caja vacía se ve más ligera. Veamos cómo funciona en la práctica. Digamos que estamos trabajando en una página web para bicicletas y estamos diseñando una de las secciones. El cliente nos dio un titular, un párrafo de texto y una foto para una de sus bicicletas. Digamos que no sabemos por dónde empezar, pero recordamos ese truco de contraste. Veamos cómo podemos usarlo. Empecemos con un contraste de peso. ¿ Qué podemos tener una mirada y qué podemos hacer la luz? ¿ Por qué no el titular versus párrafo. Vamos a crear un buen contraste entre ellos. Podemos hacer que el titular sea extra audaz y todo mayúscula. No tenemos que parar aquí. En realidad podemos agregar contraste de espera, incluso dentro del titular. Excelente. Esto lo ha hecho aún más interesante ya que aplicamos contraste a los elementos. El tuyo nota cómo la jerarquía visual comienza a tomar forma. De acuerdo, arriba a continuación. Hagamos el contraste de talla. Superdimensionemos la primera parte del titular y veamos qué pasa. Ve a lo grande o vete a casa bien. Alineó los elementos adecuadamente, Muy bien. Está empezando a tomar forma. Podemos usarlo cultivo extremo que ya hemos aprendido y recortar algunas partes de la bicicleta. Se ve bastante bien anoche, pero menos tenemos contraste de color. Ya hay un contraste de color, por supuesto, ya que el fondo es blanco, impuesto oscuro que la bicicleta oscura. Contraste muy bien con él, pero no tenemos que parar ahí. Podemos agregar un color extra en una parte del titular, algo que contrastará bien con el texto oscuro debilita simple. El naranja de la bicicleta se sienta de esta manera matará a dos pájaros de un tiro, uno de los grandes países de color entre el naranja y el oscuro titular. Y por supuesto, ya sabes que el muestreo del color de la bicicleta nos ayuda a atar el diseño . Eso es todo aplicando una tasa de contraste simple, más una técnica de apoyo fotográfico. Pasamos de esto a esto. Ni siquiera necesitas un software de diseño para esto lleva esto en Power Point. Esta es mi favorita. Acude a trucos en diseño. Si alguna vez stock en luchar con hacer que el diseño se vea interesante en algún contraste, estrella beat color tamaño Wade, y te garantizo que mejorará instantáneamente tus diseños. 43. Truco de diseño: espacio en blanco: Es un cartel de la campaña publicitaria de refacciones de BMW. Dice, BW en lugar de BMW. En la parte inferior, dice, usa piezas originales. Entiendes el chiste, ¿verdad? Es un anuncio muy inteligente. Pero esa no es la razón por la que te lo estoy mostrando. Quiero demostrar un enorme concepto de diseño llamado espacio en blanco El espacio en blanco es un espacio vacío alrededor de los elementos. En este caso, alrededor del BM, título de BW. Los espacios en blanco llaman la atención sobre el objeto. No sólo es más fácil ver el objeto, sino que se vuelve mucho más interesante e importante. Esa es la página de inicio de Yahoo. Aquí no hay mucho espacio en blanco. Es difícil decir lo que es importante en esta página. Esta, por otra parte, es una historia completamente diferente. La importancia del espacio en blanco no está solo en la atención y la simplicidad. También es tu diseño logrando su objetivo principal. Si el objetivo principal de tu sitio web es que las personas busquen, entonces es mejor que te asegures toda la atención esté dirigida hacia eso. Cuando llegamos a Google, al instante sabemos dónde hacer clic y dónde dirigir nuestra atención. Es mucho menos exigente buscar en Google que en Yahoo. Y es mucho más probable que logremos nuestro objetivo en Google que distraernos en Yahoo y olvidarnos de lo que vinimos en primer lugar El espacio en blanco no tiene que ser blanco. Puede ser de cualquier color. Es cualquier espacio no utilizado que se encuentre entre los elementos. La palabra blanco es un sobrante de la época en la diseño gráfico solía realizarse solo en forma impresa y sobre una hoja de papel blanca Echemos un vistazo a este ejemplo. Digamos que estás trabajando en el sitio web de una aplicación de taxi, podrías poner una foto como fondo y no tiene nada de malo en ello. O puedes usar espacios en blanco para llamar más la atención sobre el mensaje y el botón. Por cierto, recuerda teñir con superposiciones de imagen, a veces no tienes que hacer la foto en blanco y negro Puedes mantener la imagen colorida y aún así agregarle tinte de color, como en este caso. Ya sabes, hace mucho tiempo, antes que yo supiera algo de diseño gráfico, trabajé como gerente de marketing, y como comercializadora, necesitas crear muchos materiales gráficos, materiales de diseño como volantes, folletos, revistas o carteles, anuncios en Facebook o Google Adwords o portadas de Facebook o demás Y solía trabajar con este excelente diseñador gráfico que luego se convirtió en mi mentor de diseño, básicamente. Y cuando nos sentábamos y miraba sus iteraciones de diseño, siempre tuve este comentario de que miraría su cualquier composición que estuviéramos haciendo A veces sería como un folleto para nuestra empresa. Y yo diría, Oh, ya sabes, ¿por qué no llenas este espacio? Hay, como, demasiado espacio vacío, y siempre a mí nunca me gustó el espacio vacío cuando él hacía los diseños, y siempre lo empujaba para que intentara llenar ese espacio vacío con algo porque sentía que estaba vacío. Oh, hombre, entonces no tenía idea. Esta es una reacción bastante común con diseñadores principiantes o clientes que no tienen ninguna formación de diseño, pero están mirando el trabajo desde una especie de llevar un sombrero de diseñador o desde la perspectiva de un diseñador. Tienen esta inseguridad sobre el espacio vacío, y siempre tratan de llenarlo de algo. Para ellos, se siente como si es espacio vacío y no está suficientemente diseñado. Ten esto en cuenta, ningún usuario se quejará jamás de demasiado espacio vacío. No obstante, se molestarán con demasiado desorden en la página Mi sitio de portafolio personal usa mucho espacio en blanco. Yo quería traerme toda la atención primero, una persona detrás de la obra. Entonces eliminé todas las distracciones y apunté todo el foco hacia mí. Apple siempre hace esto magistralmente. Usar mucho espacio en blanco es un diseño muy abultado. Ese MacBook se ve súper importante y mucho más valioso cuando se muestra así. espacio en blanco mejora casi todo, incluso en los párrafos. ¿Recuerdas lo que aprendimos sobre el interlineado? Aumentar el espaciado entre líneas es básicamente agregar más espacio en blanco entre las líneas. Y adivina qué? Diseñar con mucho espacio en blanco es realmente más fácil que diseñar sin. Dier Rams es este diseñador industrial, mejor conocido por su trabajo para Brown Ha acuñado estos diez principios populares para un buen diseño. El décimo principio de cierre es que este buen diseño es el menor diseño posible. Así que no tengas miedo de los espacios en blanco y haciendo menos. Eso es solo un buen diseño. Hay una excepción con el espacio en blanco para los elementos que están relacionados y forman parte del mismo contexto deben estar más cerca unos de otros. Poner espacio en blanco entre ellos los desconectará y se sentirá como objetos no relacionados separados, tal como aprendimos en la lección sobre proximidad Por ejemplo, el titular y el párrafo de esta página, espacios en blanco los desconectarán entre sí Esto sí agrega más enfoque en el párrafo, pero ahora es un objeto independiente, agregando a la cantidad de elementos que el espectador tiene que procesar. En la versión original, el titular y el párrafo se ven conectados por la proximidad y serán percibidos como un solo grupo. Algo así como esos enlaces en la barra de navegación, por su proximidad y agrupación, serán identificados como un solo grupo instantáneamente. Este tipo de agrupación facilita que un espectador procese los elementos de la página, y es más organizado y significativo. 44. Truco de diseño: Repetición: Este es el trabajo de Andy Warhol porque en realidad no es un diseñador Web, pero es un artista pop muy influyente. En estos Warrick. Utiliza un popular truco de diseño llamado Repetición. Es cuando tomas un artículo que podría no ser interesante por sí mismo, pero repetido varias veces. Y ahora tenemos algo que es más interesante. Se trata de una página de la página web de Zendesk. Aquí puedes ver cómo la repetición fuera de los perfiles cuadrados en el mismo estilo ha creado un diseño muy interesante. El truco de repetición no sólo se aplica a artículos idénticos. Se puede aplicar a casi todo, como el diseño de espaciado de estilo de color. Su petición fuera de color es una que se usa con bastante frecuencia y realmente puede atar el diseño entre sí. Ya ves cómo se repiten los colores del titular como colores de fondo de las imágenes de perfil . Si nos movemos por debajo de las imágenes, verás que esos colores se repiten también en ese párrafo. This page se vería mucho menos atractiva e interesante si esa ropa no se repitiera en ningún otro lugar. ¿ Sabes que es una repetición más la que está sucediendo en esta página? Está en el diseño. Disparos fuera de perfil, la posición de una persona, cómo están ribete hacia el paseo y sus nombres se colocan en la esquina superior izquierda. Esa es una repetición de maquetación. En realidad estoy un poco decepcionado de que esta y la ceniza profunda no sean corruptos en el lado derecho . Al igual que el resto, están glitch ing la repetición un poco Debido a ese detalle, echemos un vistazo a otro layout. Repetición. Esto es muy común en Web, y lo verás en tantos sitios web. Ya ves cómo se está repitiendo el diseño. Una ilustración de un lado tenía línea y párrafo la línea del otro lado adentro como exactamente fuera. Eso es exactamente a la repetición. Apliquemos la repetición en la práctica. Digamos, tenemos este contenido de nuestro cliente. Son los beneficios de sus servicios porque cada párrafo, con sus titulares, forman parte de los mismos contactos. Podemos crear una repetición en su diseño. Podemos utilizar un diseño de pantalla dividida dividiendo la pantalla y la mitad exacta. Por lo que en el 1/2 colocando la copia y por el otro, colocando una imagen completa en algunas imágenes y repitiendo colores y puede parecer bastante guapo así han repetido varios artículos aquí trazan, obviamente, el repetición de collares. Estoy tomando muestras de colores de las fotos y repitiendo sobre cómo a titulares y final la repetición fuera del estilo fotógrafo. Las fotos antiguas están en el mismo estilo, el disparo desde la parte superior de algún artículo que está tendido plano sobre un fondo de color. ¿ Qué tal otros conceptos de diseño? ¿ Puedes notarlas? El contraste. ¿ Aposté en contraste aquí? Definitivamente. Verás el contraste entre el titular y el párrafo en su tamaño, peso y color. Obviamente una enorme contras entre cuadros de izquierda y derecha, una siendo blanca, otra de color brillante. ¿ Qué tal el espacio en blanco? Hay espacio en blanco por todas partes, cada bloque blanco donde la copia Seitz tiene una cantidad saludable de espacio en blanco alrededor de él para traer su tensión y al contenido. Incluso hay espacio en blanco dentro de esas fotos. El que se haya tomado esas fotos, allí hicieron un gran trabajo. Puedo sate buena fuente vinculando los recursos. Pero la razón por la que la repetición es tan poderosa en el diseño es porque la forma en que miramos mundo como humanos, al mundo como humanos, tratamos de reconocer patrones en todo lo que miramos, y cuando reconocemos un patrón, nuestro cerebro va un poco emocionado. Luke Luke. Es la misma gripe que vi antes. Sí, lo soy. El diseño inteligente está fuertemente vinculado a la psicología humana. No es que haya algunas leyes de la física que gobiernan el diseño. Es completamente centrado en el ser humano en la realidad, siempre nuestros diseñadores. Nosotros somos los que demandamos esta repetición y espacio en blanco y contraste y todos esos enfoques de diseño porque ya nos gustan. Ya sabes qué se ve bien y qué se ve. Es una especie de comida. Ya sabes qué sabe bien y qué mal. No tienes que ir a una escuela culinaria, Teoh. ¿ Aprender qué? Qué sabe bien y qué no. Y si aprendes por tus recetas y las practicas cuando cocinas algo bueno, lo vas a notar, y también lo harán todos los demás. 45. Truco de diseño: consistencia: Cuál es la forma más fácil de distinguir el buen diseño del malo. Es a través de la consistencia. Mirar el sitio web y notar cuán consistente es el diseño, tipografía, los colores y todo lo La inconsistencia es muy fácil de decir. Estamos conectados para reconocer patrones en todo lo que miramos, y notar rupturas en esos patrones es muy fácil para nosotros decirlo Romper el patrón es como una falla en la matriz. A veces es difícil saber exactamente qué está rompiendo el patrón, pero siempre se nota fácilmente. A menudo es mejor usar un diseño deficiente y ser consistente con él, que tener un diseño agradable y no ser consistente. La consistencia no es realmente un truco, sino más bien un principio de diseño. Entonces estoy haciendo trampa aquí un poco al incluir esto como uno de los trucos de diseño. La consistencia se aplica a todo, pero la he desglosado en varias categorías para facilitar su comprensión. El primero y más obvio es la consistencia del diseño. Esto es exactamente un propósito de la grilla. La cuadrícula es una excelente manera de crear consistencia en el diseño. Cuando la alineación se repite en la página, los usuarios la notan y comienzan a esperar que las cosas se establezcan de cierta manera. Cuando se cumple esta expectativa, los usuarios tienen una experiencia alegre del sitio y confían en el sitio en más Una forma en que veo a los diseñadores web a menudo rompen las consistencias de diseño al mezclar diferentes alineaciones de texto juntas. Los tres elementos de este marco están alineados en el centro entre sí, o al menos están conteniendo cajas sí, pero el texto del párrafo queda alineado a la izquierda. Esto está rompiendo la consistencia del diseño y haciendo que el diseño se vea descuidado Tenemos que elegir un estilo de alineación y pegarnos con él, ya sea alineamos al centro todo o alineamos a la izquierda. Cualquiera de estas opciones está bien siempre y cuando nos quedemos con una alineación. Este es un ejemplo evidente. Un ejemplo más sutil y no evidente es cuando tenemos inconsistencia entre diferentes secciones de la página Por ejemplo, la sección media tiene el contenido alineado a la izquierda, pero otras secciones tienen su centro alineado. Esto estaría completamente bien si este fuera un tipo de texto diferente, un titular secundario u otro, pero es el mismo titular, pero con una alineación diferente. Esto es bastante sutil ya que se extendió entre diferentes secciones. medida que nos desplazamos por una página, solo vemos una sección a la vez, por lo que una inconsistencia tan sutil no es un crimen demasiado grande Pero es un buen hábito ceñirse a un estilo en diferentes secciones e incluso a través diferentes páginas de un sitio web. Crear consistencia en la tipografía es bastante simple. Solo necesitamos crear estilos de fuente específicos para cada ocasión y luego quedarnos con él. Un sitio web tiene varios tipos diferentes de textos. Hay titulares principales. Esas suelen ser de la talla más grande. Entonces tienes titulares de menor nivel como títulos y subtítulos. Obviamente tienes un texto de párrafo, y tienes botones. Puedes tener más, por ejemplo, subtítulos diminutos y textos de notas al pie, menú Enlaces, y así sucesivamente La clave es definir un estilo único para cada ocasión y seguir con él. Por ejemplo, tener un estilo de párrafo y mantener con él a través de secciones, páginas y en todas partes en el lateral. En Fig Mine y Webflow, este estilo de texto es en realidad uno de los futuros, por lo que practicaremos la creación estilos de texto en nuestros proyectos reales La consistencia del color casi no necesita ninguna explicación. Es lo más evidente y sencillo de ver. La mayoría de las veces estamos trabajando con la marca existente y un logotipo. Esto significa que se han definido colores para la compañía, y estos colores tienen que ser consistentes no solo dentro del sitio web, sino en toda su representación, volantes, tarjetas de visita, PDF, front office, etc. En tiempos en los que no tenemos colores definidos de marca, entonces lo hacemos nosotros mismos. Generalmente elegimos uno o dos colores primarios como el azul y el verde en este ejemplo, y el resto de los colores son monótonos, negros, gracia y blancos De una manera podríamos romper consistencias mezclando diferentes formas en la página En una página como esta que tiene este borde ondulado redondeado liso, introducir una forma angular como esta rompería la consistencia, haciéndola parecer muy extraña, pero mantener las mismas formas lisas crearía la consistencia a lo largo de la página. No tiene que ser la misma forma exacta siempre y cuando la forma tenga características similares. Esta inconsistencia con las formas puede ocurrir en realidad en lugares muy inesperados Por ejemplo, cuando usamos recortes como este, crean bordes lisos en la página No son evidentes, pero están ahí. Cuando colocamos una foto de caja regular no recortada en la siguiente sección, estamos introduciendo una nueva forma conflictiva De repente a partir de bordes naturales lisos, pasó a líneas duras rectas muy estrictas, e incluso creó esta nueva forma que antes no estaba ahí. Al igual que mencioné en la lección de ilusión óptica, colocar objetos y formas sobre un lienzo negro afectará ese lienzo y creará nuevas Esto es especialmente cierto para las líneas rectas y rectángulos. Pero si volvemos a usar cut out, entonces esas líneas duras y formas extrañas desaparecen y la sección se vuelve consistente con la sección de héroe anterior. Cuando se trata de fotos, tenemos que ser consistentes con también tenemos que ser consistentes con el estilo de las fotos. Por estilo, me refiero a un estilo fotográfico, como colores, filtros, la forma en que los modelos, se ven, etc. En este ejemplo, por ejemplo, no hice un buen trabajo al elegir fotos del mismo estilo. El izquierdo tiene aspecto más pulido, mientras que el segundo es más natural. El trabajo de la cámara también parece bastante diferente. No soy fotógrafo, pero puedo notar que esto no es tomado en el mismo estudio ni por el mismo fotógrafo. La mayoría de estas fotos tendrán un estilo muy diferente entre ellas porque son tomadas por diferentes fotógrafos y en diferentes escenarios. Puede ser bastante complicado mantener la consistencia, pero hay una manera. Una forma es elegir imágenes del mismo colaborador. Ya lo he mencionado antes. Muchos sitios de stock tendrán esta opción para ver fotos del mismo colaborador, es decir, del mismo estudio fotográfico, fotógrafo. Si elegimos fotos del mismo colaborador, entonces obtendremos más o menos los mismos resultados porque el mismo fotógrafo tendrá el mismo estilo, misma cámara y los mismos hábitos de tomar fotos. Aunque no al 100%, es lo mismo porque a veces solo tendrán diferentes rodajes y diferentes formas de disparar en diferentes escenarios. También sus estilos pueden cambiar de año en año. Esta es una manera muy simple y excelente de hacer que tu diseño sea consistente y demostrar que es un diseño de alta calidad. Sé que esto suena como un detalle demente al que prestar atención, pero cuando se trata de diseño, diablo está en los detalles atención a estos pequeños detalles es lo que diferencia a un diseñador mediocre de uno de primera categoría Un último lugar en el que quiero discutir la consistencia son los iconos y las ilustraciones. La web está llena de iconos e ilustraciones. Son una excelente manera de mostrar diferentes acciones demostrando algún concepto complicado o simplemente para darle a un diseño un aspecto único. Al igual que la fotografía, combinar íconos con diferentes estilos creará un aspecto muy inconsistente y sin pulir No es divertido. De hecho, los iconos y las ilustraciones son aún más impasibles que las fotos normales En este ejemplo, el tercer icono es de un estilo diferente al de los dos primeros. Es la misma paleta de colores, similar alrededor de los tonos, pero aun así se ve fuera de lugar. La diferencia es sólo en un pequeño detalle de hecho. Los dos primeros iconos tienen trazo de contorno sobre ellos. Es esa línea negra la que delinea cada objeto en el dibujo. Pero el tercero no lo tiene, y crea un aspecto completamente diferente. En este ejemplo, los tres iconos son del mismo paquete y tienen el mismo estilo exacto. Aunque del mismo tamaño, el primero en tener líneas más delgadas cuando la última es un poco más gruesa. El tercer icono me está asomando los ojos. El cliente que no es diseñador no notará exactamente lo que tiene de malo. Tal vez no puedan ponerle un dedo encima, pero van a recoger tales inconsistencias y no sentirán que el diseño es muy bueno Para evitar tales inconsistencias en iconos e ilustraciones al igual que con las fotos de stock, escoja de la misma fuente Mi lugar favorito para conseguir iconos es flat icon.com. Los iconos aquí y en otros lugares suelen estar organizados por paquetes. Todos los iconos dentro del mismo paquete van a tener el mismo estilo, tamaños, grosor de líneas, y todo eso. Al elegir iconos para tus proyectos, busca packs en lugar de iconos individuales de diferentes packs. Esto te dará un aspecto consistente y pulido y te hará diseñar como un profesional. 46. Truco de diseño: superpone: aquí hay un truco de diseño un poco avanzado pero muy cool. Este truco en realidad hará que tus diseños se vean muy sólidos. Diseñadores principiantes que usualmente lo asustan y muy, muy verás trabajo amateur usando este truco. Entonces si utilizas eso, tu trabajo sin duda aparecerá como un pro design, el truco es tomar diferentes elementos y solaparlos. ¿ Ves cómo la mano de la estatua se superpone título de National Geographic y también el marco amarillo? Hace que el diseño sea más interesante y agrega una dimensión extra a la composición. La ejecución de este truco es bastante simple. Se toman dos elementos separados y se superponen. Se vincula a elementos de otra manera desconectados juntos, y también crea drama en el diseño. Algo interesante está pasando en nuestros ojos ahora interesados en resolver el rompecabezas, haciendo un viejo diseño y atado juntos en lugar de simplemente colocado en la página al azar. El truco es muy común. En diseño penitenciario. Verás titulares solapados con personas, imágenes entre sí, ataques con etiquetas, lo nombras en diseño Web. Es un poco más medido y menos extremo como lo ves en impresión. Como puedes ver solapamientos en Estos ejemplos son más sutiles en el paseo. Tienes imágenes que se superponen entre sí, pero no crean ninguna superposición compleja con bloques de texto y en la izquierda se solapa texto para la imagen de fondo. Bastante sencillo. Una de las razones por las que me encanta esta técnica es porque se puede agregar a un diseño por lo demás bland y agradable estilo de emoción estuvo trabajando recientemente en su sección de precios. Por lo general, los productos tienen varias plantas de precios correctas, y eso tiene algo de meneo con el que jugar y crear un diseño interesante. Pero éste sólo tenía uno. Mi diseño inicial era algo así como thes, que se veía muy soso y aburrido. Hoy no hubo emoción. Enviar sintió como si solo se pusiera al azar ahí. He creado una nueva forma y la he solapado detrás de la caja. Mejoramiento instantáneo. Ahora esta es una forma no tradicional. Si introduce algo como esto en la página, hay que repetirlo de nuevo. Recuerda la técnica de repetición. Entonces usé la misma forma y truco de superposición en los otros lugares de la página, lo que hizo un resultado bastante bueno. Veamos cómo podemos aplicar esto en la práctica. Digamos que tenemos una sección en la página donde queremos mostrar algunas imágenes. Podríamos arreglar estas imágenes a algo así, lo cual es razonable pero un poco aburrido. O podemos solaparlos y crear amore. Interesante visual. Ya has visto este enfermizo 1,000,000 a auto veces con collages de fotos. Bueno, está bien, sí tenemos algo de dedo superpuesto aquí sobre qué hacer cuando queremos usar solo una foto. Simple. Dibujemos caja y solapemos con la imagen. Y ahora tenemos un diseño interesante. Además la foto no parece que solo colgando ahí al azar, sino que se siente como si estuviera colocada donde pertenece. El color de la caja es importante. En este caso. Tengo simplemente simple el color de la imagen. Pero en otros casos, esta una buena oportunidad para utilizar la técnica de colorista de marca o repetición para repetir los colores a lo largo de la página. Una cosa a tener en cuenta. Truco de superposición. Muchas veces rompe la grilla. Ese cuadro de fondo no está alineado a la gran superposición y el crear nuestra espada son conceptos opuestos. Truco de superposición está tratando intencionalmente de romper el alineamiento y traer algo de financiamiento. La composición Romper lo grande intencionalmente no es un delito, como ya he mencionado lo intencional es el teclado. Toda decisión de diseño tiene que ser intencional, y si entonces está rompiendo y doblando las reglas, un poco es bienvenido. En este caso, realidad no estamos jugando con lo acordado tanto. Las cajas en el fondo. Es una especie de parte del fondo sondear el impuesto de imagen y otros elementos se sientan en ese lienzo, que en sí mismo no tiene un gran Son los elementos que están en él los que salen en la cuadrícula. Lo mismo vale para lleno con imágenes de fondo. Son parte de las cámaras y se sientan en la capa de fondo para que no necesiten estar alineados con lo grande. Hagamos un ejercicio para que puedas practicar esta técnica de superposición. 47. Assignment: superposición: En esta tarea, practicarás tanto la superposición como un poco de repetición. En el archivo Figma, he preparado un marco con tres bloques de texto en su interior Estarás diseñando una sección de beneficios para una aplicación de viajes. En base a la forma en que he trazado el texto, creo que puedes adivinar que quiero que crees este layout alternante. Texto en un lado e imagen en el otro lado. Pero en lugar de ilustraciones usando fotografía regular, y quiero que encuentres fotos para cada bloque de texto. De esta manera, también practicarás encontrar fotos. Para el estilo superpuesto, quiero que elijas un estilo y lo uses con los tres bloques. Se puede utilizar un tipo de colage fotográfico de superposición. Esto requerirá que encuentres varias fotos para cada bloque. O puedes usar una foto y usar una caja de fondo detrás de la foto. Como es habitual, usa otros conceptos que ya hayas aprendido, usa la grilla, elige los teléfonos , crea jerarquía, etc. No voy a hacer una demostración de ejemplo esta vez porque ya sabes cómo hacer todo esto. Que se diviertan. 48. Truco de diseño: tensión: diseño comparte muchas similitudes con la música. Al igual que los diseñadores. Los músicos también usan truco de contraste, que puede ser contraste entre notas altas y notas bajas entre ir rápido y ir lento. También usan la repetición, que es el ritmo fuera del hundido. Incluso usan el espacio en blanco, que son pausas y partes silenciosas fuera de la música. Una técnica más. Estas dos acciones de campo se llama Tensión en Música. Ahí es cuando la melodía comienza a retomar. Ah, y es como que se suma al impulso y luego se vuelve un poco más dramático y en algún momento explota en esta nación me mata en, por ejemplo, y la música techno. Es una especie de ir a este ritmo muy pesado. La atención es algo que hace interesante cualquier trabajo creativo, y se utiliza en otros campos además del diseño y la música. Por ejemplo, en la ficción, la tensión se llama suspenso. Entonces, ¿cómo se crea la tensión en el diseño? Este un cuadrado tendido plano en la superficie, en total equilibrio y en alineación central? Aquí no hay tensión para nada. No está pasando nada. No hay drama. Es sólido y con tierra. ¿ Qué tal ahora? Esta es una historia diferente, ¿no? El cuadrado ya no está tendido plano. está parado en su esquina, lo cual parece que o se va a inclinar o a fullback en el lado plano con una simple inclinación, hemos creado mucha tensión. Los elementos basculantes es una forma de crear atención. Ahí hay más. Se pueden mover elementos al borde del marco o mover elementos fuera de equilibrio o partes altas del objeto. Esto es algo con lo que ya hemos jugado como parte del cultivo extremo. El tensor es una de las razones por las que el cultivo extremo es un truco tan interesante de usar . Y si el cultivo extremo es desigual, como este cartel de película , aumenta aún más la tensión. Recuerda la regla de los tercios La tensión es exactamente por qué esta regla funciona realmente bien. Cuando los objetos en el centro de la deuda se sienten estables y un poco aburridos. La colocación fuera de equilibrio puede crear un aspecto más visualmente interesante. La superposición es otra forma de crear tensión. La superposición sí tiene otros méritos, como agregar dimensión extra porque los objetos están en capas uno encima del otro o porque los elementos entrelazados unen el diseño. Pero también agrega tensión porque ahora dos objetos están interactuando entre sí de una manera muy interesante. Una forma de crear tensión y movimiento en el diseño es mediante el uso de formas diagonales o anguladas. Este tipo de tensión es muy útil cuando se quiere retratar la velocidad y el movimiento en su diseño. ¿ Por qué las formas diagonales crean tensión y el movimiento es muy fácil de demostrar? Esto sigue siendo imagen, pero podemos sentir ese círculo a punto de rodar hacia abajo. Así es como los ángulos en el sentimiento fuera del movimiento en el diseño. 49. Indicación: tensión: En esta tarea, vas a practicar la tensión. Clavar el método de tensión requiere algo de práctica. Quiero que te relajes y solo juegues. No te preocupes si no estás muy contento con el resultado, solo diviértete con él. Así es como suele funcionar la tensión. Te equivocas por un tiempo y en algún momento, una de las versiones se ve bastante bien. Hay un fotograma en este archivo figma. Quiero que diseñes la sección de una manera que crees algo de tensión en el diseño. Como ya comentamos, hay varias formas de crear tensión, ejemplo, mediante el uso de ángulos. ¿Cómo se usan los ángulos? Bueno, recuerda ese clásico diseño de pantalla dividida que solemos usar para tales secciones. En lugar de tenerlo recto y ángulos erectos, podemos hacerlos inclinados Para editar cualquier forma dentro de Figma, simplemente haga doble clic en ella o haga clic en editar objeto en la barra de herramientas Ahora obtendrás este tipo de vistas. Los puntos en las esquinas del rectángulo se pueden arrastrar alrededor Arrástralos a tu gusto para hacer un rectángulo inclinado. Cuando tu dunk heat entre, no olvides esto porque la pantalla ahora está bloqueada en este modo de edición de la forma, y en realidad no podrás hacer clic en ningún otro elemento y hacer nada más en la página. A veces accidentalmente hago doble clic en formas como esta, lo que luego me pone en el modo de edición y en realidad no puedo hacer clic en otra cosa, y me pregunto qué diablos está pasando, y no es muy evidente en Vikma que estás en el modo de edición Ten en cuenta que si no eres capaz de seleccionar algún elemento, eso significa que probablemente estés en el modo dit de una de las formas. Ahora podemos usar la forma para recortar nuestra imagen. Podemos o bien rellenar la forma con una imagen, la manera habitual simplemente colocando la imagen dentro de ella como relleno. O como ya tenemos la imagen en la página, podemos simplemente editar la forma de esa imagen. Recuerda, la imagen en Figma es solo una forma regular con relleno de imagen en su interior Cualquier cosa que puedas hacer con un rectángulo o cualquier otra forma, puedes hacerlo con la imagen dos. Simplemente podemos seleccionar la imagen, hacer clic en Editar objeto y cambiar los puntos de la forma para crear una forma en ángulo. Si necesitas cambiar la posición de la imagen en el interior o cambiar el tamaño, puedes hacerlo usando la herramienta de recorte. Por cierto, el uso de tales formas para recortar imágenes creativamente en el diseño se llama enmascaramiento Esa forma que acabamos de crear se llama máscara. Ahora agrandar posiciona la imagen dentro de la máscara de la manera que quieras. Y ahí con unos pocos clics, ya tenemos un layout con mucha tensión. Luego puedes cambiar el color del fondo si quieres. O cambia el ángulo y la posición de tu máscara. Otra forma de crear tensión es alinear un objeto en el borde. Esto, sólo se puede hacer con ciertos objetos. Por ejemplo, podrías hacer esto con un titular o algún texto si es lo suficientemente grande. Hacer esto con un texto de párrafo hará que parezca un error. A veces uso este tipo de alineación de bordes cuando estoy numerando pasos o algo así. Además, puede crear tensión usando el diseño fuera de balance o superponiendo algunos elementos. Por ejemplo, superponer titular con esa foto o poner algunos elementos de equilibrio. Todo bien. Ahora es tu turno, ya tienes suficientes ideas de cómo crear tensión y no olvides darle estilo al titular y al texto y al botón. Lo más importante, diviértete en este ejercicio porque cuando se trata de tensión y trucos superpuestos, mejor funciona si te estás divirtiendo y jugando con él. Así que diviértete y juega y mira si funciona. Si no lo hace, no se sienta muy mal al respecto. Vendrá con un poco de práctica. 50. PARTE 2: diseño de práctica como un PRO: has terminado la primera parte de este curso, date una palmadita en la bolsa. Esa parte fue un puñado. Gran trabajo. Has aprendido los secretos del buen diseño y cómo hacer que tu trabajo luzca hermoso en esta parte. Nos vamos a poner un poco más serios. Ain designer home page de principio a fin, Vamos. 51. El método de imitar: Yo quiero compartir contigo un sucio secretito de toda la gente creativa. Cada diseñador, cada artista, cada inventor. Todo músico que alguna vez ha vivido ha utilizado este método para lograr dominar su habilidad. Este método se llama el método mímico. Se ven los pasos de inicio. Aprender cualquier oficio nuevo es imitar a los expertos en ese campo. Entonces si quieres aprender a cocinar, agarras a Gordon Ramses o el libro de cocina de John Oliver, y comienzas a practicar algunas recetas. No empiezas inventando comida desde cero. Empiezas a imitar esas recetas y luego practicarlas. Y una vez que ganas un poco de experiencia y un poco más de confianza en cualquier receta que se haya estado cocinando, entonces comienzas a retocar un poco. Y luego en algún momento, comienzas a volver a inventar y crear tus nuevas recetas. Si estás aprendiendo a tocar la guitarra, no comienzas por escribir nuevas canciones, Ni empiezas por imitar a otros músicos, lo que significa que comienzas a tocar sus canciones. Y como cualquier otro guitarrista principiante, comienzas por aprender maravilloso. Muchos diseñadores principiantes se quedan atrapados porque piensan en el momento en que empiezan diseñar, a diseñar, necesitan empezar a crear obra nueva o original, y se desaniman cuando esto no sucede. Piensan que no tienen talento para ello, pero se saltan la puñalada más importante, imitando a los expertos imitando a los expertos. No sólo obtienes experiencia y confianza, sino que también practicas muy buenos hábitos porque todo buen trabajo de diseño está lleno. Con todos los buenos hábitos de diseño que discutimos en este ah curso, ser tipografía y consistencia de maquetación y todos los trucos del espacio en blanco y la tensión y superposición todo eso está en bien. Yo buen trabajo de diseño, y básicamente estás practicando todo eso mientras estás imitando a alguien en especie de copiar y replicar su trabajo e inspirar usar su trabajo es una inspiración. Y una vez que comienzas a crear tu propio trabajo original, ya tienes muy buenos hábitos de diseño arraigados en ti. Mimicking tiene tres etapas. La etapa uno es hacer frente. Se está llevando el trabajo de alguien más, sólo copiando. Obtén pixel a pixel se ordena como tocar la canción de otra persona o cocinar lasaña usando una receta. Esto se hace para la práctica más que para proyectos reales. Cuando estás aprendiendo copiando tu aprendizaje muchas decisiones de diseño humano que fueron tomadas por un profesional. Aquí es donde comienza toda persona creativa. Ser tirado McCartney o Picasso En la etapa dos, estás remezclando. Se está llevando el trabajo de alguien más en darle tu propio giro. Al igual que las recetas de comida. Empiezas a retocar los ingredientes. Poco a poco. Cambias esos teléfonos, usas tus colores, alteras un poco las formas. Ahora has creado algo diferente. No obstante, si juntas dos obras, la inspiración es claramente visible. En esta etapa, ya se puede practicar trabajar con proyectos reales en la etapa final tres. Ahora te estás inspirando no de una obra en particular, sino más como varias obras diferentes o estilos diferentes y tal vez incluso como tendencias. Y aquí le agregas un toque aún más personal. Por lo que el resultado final ya no se asemeja a ningún trabajo en particular. Y quieres no se podría decir que es un remix fuera de este sitio en particular o de este diseño en particular , aunque a veces se podría decir que claramente existe una influencia o algún estilo específico o alguna tendencia específica en el diseño, no hay nivel más allá. Hay algo así como un trabajo verdaderamente original, porque si las cosas no están realmente basadas en la realidad y la influencia de la realidad y los estilos existentes , entonces simplemente se vuelve irrelevante y bastante confuso para el público regular. Algo así como los extraños artículos de moda de gama alta. Demasiada originalidad conducirá a productos que la gente no entiende y no quiere usar. Eso no significa que a la gente no le gusten las cosas nuevas. Ellos dio. La gente hace poco disfrutando de tus sitios web que se ven frescos y tu estilista de moda choque técnico . Pero disfrutan de estas cosas porque la mayoría de las veces se han parecido a algo del pasado y a algo existente, pero mirándolo desde una perspectiva muy nueva y nueva perspectiva. Por lo que es look refrescado de algo familiar. Por lo que el gusto del público realmente importa para que una obra en particular sea apreciada o rechazada. Este extraño look chaquetas, suéter o lapos de bola de esponja es y familiar para ti y para mí. Pero podría estar inspirándose en algún otro Warrick y público particular fuera. Ese espectáculo podría estar familiarizado con esa inspiración, por lo que podrían comprenderlo fácilmente y apreciarlo. Tú hoy empiezas a decir eso con cara recta. Además, las etapas son como una perilla de volumen, no una transición de corte claro de una a otra, pero más como un aumento suave de la intensidad de apagado, con diferentes niveles dentro de cada etapa. Vamos a practicar todas estas tres etapas. Pero antes de hacer eso primero necesitamos aprender a encontrar la inspiración adecuada y basar nuestro trabajo en eso. Y hacer eso en lugar de Trecia una vez. Entonces hagámoslo a continuación. 52. El secreto más grande de los diseñadores: inspiración: Pablo Picasso buscaba una inspiración para su próxima obra. Quedó fascinado por el arte africano. Usó la máscara de la Tribu Dogon como su inspiración y se lanzó al estilo Kubi por el que más se celebra Como puedes ver, el parecido es increíble. Su trabajo era en realidad bastante diferente antes de este periodo. Una buena inspiración puede ser igualmente transformadora para tu trabajo Digamos que estás trabajando en un proyecto para diseñar un sitio web para una compañía financiera. Tu primer instinto podría ser ir a Google y buscar algunos ejemplos para otros sitios web de finanzas Pero lo que obtienes aquí son plantillas de datos que se ven igual, y eso no tiene nada de inspirador ¿Por qué Google es un mal lugar para buscar inspiración de diseño? Porque Google no es un sitio web que comisaria un buen trabajo de diseño Tiene un propósito muy diferente y busca y clasifica los sitios web de una manera para mostrar contenido que ha estado ahí que tiene autoridad que ha estado ahí desde años y ha sido visitado por mucha gente. Y eso es exactamente lo contrario de lo que quieres en inspiración de diseño. Una búsqueda de palabras clave para inspiración de sitios web de Finanzas, me llevó a un artículo que presentaba sitios web como este, y el artículo lo llamó diseños de sitios web innovadores e inspiradores No es de extrañar que cuente con tales diseños de datos cuando el artículo es de 2016. Eso es demasiado viejo para inspirarse en el diseño web. Agregue al hecho de que los sitios web mencionados probablemente se hayan construido un par de años antes del artículo. También el hecho de que el autor podría no ser diseñador en absoluto, y obtienes terribles ejemplos de sitios web. Así que muchos diseñadores principiantes cometen este error, buscan inspiración de diseño web en lugares equivocados, y empiezan a imitar diseño web muy anticuados o feos Usar inspiración de calidad para tus proyectos te va a configurar para obtener excelentes resultados de diseño. Y te voy a enseñar mis lugares favoritos para encontrar diseño web genial y hermoso u otra inspiración de diseño. Uno de ellos es dribble.com, eso es Dribble con Hagamos esa misma búsqueda en el sitio web de finanzas aquí. Estos son algunos de los resultados de cerca. Esto está millas por delante de lo que vimos en Google. El diseño de estilo de diseño y Carls se ven frescos y modernos aquí, no los 90 Dribble es básicamente show and tell de diseñador. Para contribuir, hay que ser invitado por un miembro existente, lo que crea un nivel de punto de control para mantener el mal trabajo fuera. El algoritmo de búsqueda es diferente al de Google dos. Aquí, uno de los parámetros de clasificación es el número de me gusta, es decir, a cuántos diseñadores les ha gustado la obra. Esa es una mejor manera de contar un buen trabajo que un blogger de finanzas al azar escoge sitios en función de su gusto. Muchos de estos trabajos son solo diseñadores jugando. Eso significa que aún no se han convertido en sitios web reales. Esa es una inspiración que se adelanta a su tiempo. Después de un tiempo, comienzas a seguir diseñadores que te gusten y construyes una muy buena inspiración personalizada para ti mismo. Escoges diseñadores que tienen un estilo de tallo que te gusta y cuentan con diseño. También utilizo estos dos sitios web para encontrar mi inspiración. Estos sitios curan sitios web en vivo y páginas de destino. Si no sabes lo que es una landing page, es una página en un sitio web donde aterriza un visitante. Esta puede ser una página de inicio de nuestro sitio web o páginas dedicadas especiales utilizadas para la comercialización. Me gustan mucho estos sitios porque están muy bien curados. Las capturas de pantalla están bien mostradas, y puedo ver el sitio web en vivo y consultarlo con más detalle. Ahí incluso puedo ver teléfonos que usan tamaños animaciones e interacciones, e incluso ver otras páginas del sitio. Realmente un excelente lugar para encontrar inspiración. Mi tercer lugar favorito para buscar inspiración es en realidad Pinterest. Aunque en Pinters, hay que ser un poco más cauteloso, no es contenido comisariado por diseñadores Así que al igual que Google, puedes obtener bastantes manzanas podridas. Pero busco inspiración en Pinterest por una razón. Tienen algún algoritmo de búsqueda increíble donde sea cual sea la imagen que estés buscando, pueden encontrar estilos similares con una precisión increíble. Por ejemplo, si encuentras un estilo de diseño que te guste, da click en este icono. Y mira eso. Sin siquiera yo especificando nada, diseños de superficie que son muy similares en estilo. Ya ves como los ejemplos de la derecha tienen formas y bordes ondulados lisos, redondeados, especialmente en este diseño en particular. Es tan similar en estilo, es extraño. Aquí, otro ejemplo para un estilo totalmente diferente. Esta vez, no hay colores vibrantes ni formas redondeadas, sino más diseños pesados de fotografía. Esta es una herramienta muy poderosa para un diseñador. Muchas veces, voy a encontrar un estilo específico que quiero, pero no puedo ver otros ejemplos del mismo estilo porque no puedo ponerlos en palabras correctamente. Al venir a las pinras, puedo encontrar muchos ejemplos del mismo estilo y recopilar varios ejemplos diferentes para mi inspiración Al igual que porque una forma genial pero un poco avanzada de buscar inspiración es buscarla fuera del campo del diseño web. Por ejemplo, estaba trabajando en este proyecto que era un sitio web de caridad, y quería construir algo y diseñar algo premium y un poco diferente y no parecerse a otros sitios web de caridad. En cualquier lugar donde busqué inspiración, todo lo que obtendría es este tema muy común de niños africanos tristes. Eso sólo se ve muy cliché. Lo siento, niños. En cambio, fui y busqué carteles de películas, porque los carteles de películas están diseñados de manera increíble Ellos representaban mucho drama y tensión. Encontré este póster de sicario, y me gustó mucho el estilo Estaba haciendo esto en Pinters, lo que me dio más sugerencias que se parecen, y luego boom, apareció este cartel. Esto me dio ideas más concretas de que podría fusionar una foto de una persona con otra cosa, igual que la cara de Peter Dinklag fusionándose con la Esto me llevó a crear una sección de héroes que no se parece en nada a una plantilla de sitio benéfico. 53. Assignment: tabla de estado de ánimo: Cuando los diseñadores reúnen diferentes trabajos para su inspiración, organizan lo que se llama un moodboard Básicamente se trata de armar cualquier inspiración que creas que será útil para tu proyecto. Esto, por ejemplo, es un moodboard de uno de mis proyectos clientes Hay pantallas de diferentes páginas de inicio que encontré en los lados que mencioné antes. Incluso puedes inspirarte tu propio trabajo personal. Por ejemplo, una de estas tomas que pongo aquí es mi propio trabajo. La inspiración no tiene que ser un diseño de sitio web. Podrías reunir ilustraciones que te gusten, pantallas de aplicaciones, arte, arquitectura, fotografía, carteles de películas, o ya sabes, Hacer máscara de tribu de armas al igual que Picasso. No hay reglas. Básicamente es crear el ambiente para tu proyecto, tal como lo dice su nombre. En este ejercicio, vamos a practicar la creación de un moodboard Tu objetivo es ir a esos sitios web de inspiración que mencioné anteriormente y reunir inspiración para un sitio web para una aplicación para compartir Uber kin R. La app en sí no es tu proyecto. El proyecto es básicamente un sitio web, como una página de inicio para la aplicación Right sharing. Permítanme demostrar un ejemplo. Voy a moodboard para un sitio web de colaboración en equipo o una página de destino Ya sabes, como Slack y Trello, si estás familiarizado con él Tengo mis sitios de inspiración abiertos aquí. Pero primero, voy a empezar a buscar sitios web, ya lo sé. Voy a comprobar que Slack Asana es otra que conozco en Trello y ver qué están haciendo Cuando te guste un sitio web o una sección o cualquier parte de la página, solo toma una captura de pantalla. Organizaremos todas las capturas de pantalla e imágenes más adelante. Bien. Veamos ahora otros sitios web de inspiración. Driblar búsqueda con palabras clave, no es tan bueno, así que intenta usar la menor cantidad de palabras clave posible y s en diferentes palabras Esta no está mal. A menudo en driblar los diseñadores publican la pantalla de la página completa, que puedes ver en el archivo adjunto aquí mismo De esta manera, podrás ver la página completa con más detalle. Sólo voy a guardar toda la página. Aquí, me gustan estos elementos de interfaz superpuestos. Esto es agradable porque da más idea del producto. Comprobemos que se sienta otra inspiración. Normalmente paso alrededor de una hora recogiendo inspiración. Es una parte importante del proceso de diseño, y si hago esta parte diligentemente, me resulta más fácil diseñar Yo no, muchas veces necesito regresar y encontrar más inspiración. A. Pinterest es en realidad donde guardo inspiraciones aleatorias fuera de los proyectos Como si estoy navegando aleatoriamente por la web y me encuentro con algún diseño interesante, lo guardaré en Pinterest para futuro en referencia. Es un gran lugar para tener tu propia colección personal. Puedes crear tu tablero personal en Pinterest luego instalar la extensión del navegador y guardar capturas de pantalla e imágenes de la web en tu colección privada. Entonces podrás volver a las pintas más tarde cuando estés buscando algo de inspiración para tu proyecto Ahora voy a mirar fuera de tema, no necesariamente para sitios web de colaboración en equipo. Esto no está mal. Esta sección es muy encantadora. Me gusta la foto superpuesta con esos gráficos. La Paninja, o Landbook son excelentes porque podemos ver sitios en vivo, lo que nos puede dar ideas sobre animaciones e interacciones y todo eso Creo que tenemos suficiente, y ahora vamos a crear un moodboard en Figma y colocar todas esas tomas Dibuja un marco básico en Figma y tira todas tus capturas de pantalla en él. Yo uso fondo oscuro porque la mayoría de los sitios web están en blanco, por lo que tendrán mejor visibilidad en un marco oscuro. Realmente no importa cómo los organices aquí. Puedes dispersarlos como quieras. I. Y eso es todo lo que hay para ello. Ese es nuestro moodboard. Más adelante aprenderemos a inspirarnos realmente en todas estas cosas que recolectamos y cómo usarlas en proyectos mientras lo diseñamos. Ahora es tu turno. Sigue adelante y recoge inspiración para nuestro sitio web que es para R sharing app. 54. Proyecto: diseño de página de inicio de Figma: Conoce cómo reunir inspiración para nuestros proyectos, y ahora vamos a aprender a usar esa inspiración para nuestros diseños. Como mencioné antes, hay tres etapas para el método mímico, que es copiar, remezclar y crear la etapa final En esta lección, vamos a practicar primero, el copiado. Vas a crear una de las páginas de productos de Apple. Tu objetivo es hacer coincidir su diseño lo cerca posible, píxel a píxel. Al hacerlo, obtendrás una valiosa experiencia práctica. Practicarás diseñando elementos muy comunes del sitio web como barras de navegación y diferentes componentes y calzado y todo eso, y haz todo eso mientras no tienes preocuparte por los colores y tipos de letra y las fuentes y los diseños y todas las cosas de diseño porque solo estás copiando lo que ya está ahí Un pequeño paso a la vez, igual que aprender a cocinar o tocar la guitarra. Abre el archivo Figma, vinculado a este video. Aquí encontrarás la captura de pantalla de la página. No es la página completa. He eliminado algunas de las secciones para mantener las cosas simples, y puede que no sea la versión actual, pero está bien. Eso no nos importa. Es un diseño bastante simple y atemporal, por lo que es perfecto para esta tarea. la derecha hay un marco en blanco donde crearás esta página exacta. Cuando trabajes en esta tarea, quiero que notes todos esos principios de diseño que has aprendido hasta ahora. ¿Cómo usan la jerarquía visual? ¿ Qué métodos de contraste emplean? Cómo alinean los elementos y así sucesivamente. Con lo que tienes práctica ya en Figma, sabes lo suficiente como para completar esta tarea, aunque voy a poner las cosas en marcha y demostrar algunas de las partes En este marco, he incluido la captura de pantalla de la página principal. Ahora está oculto. Si lo habilitas, verás la versión débil de la captura de pantalla He disminuido la opacidad, que es seleccionar este 30% aquí mismo Entonces no está en el camino, así que puedes trabajar en el diseño y ponerle cosas sin que la captura de pantalla se interponga en el camino. Primero, agreguemos la cuadrícula al marco para ayudarnos con la alineación. Selecciona tu marco y debajo de la guía de diseño, agrega una nueva cuadrícula, no este tipo de cuadrícula a cuadros, sino lo que queremos son columnas, 12 como de costumbre Y usando esta sección de aquí mismo, esta sección de tres columnas, podemos calibrar la cuadrícula porque esto revelará los márgenes, la cuneta que están Entonces por ejemplo, comenzando por los márgenes, solo empieza a aumentar hasta que golpees el borde de esta pequeña tarjeta blanca si eres capaz de verla realmente, porque la grabación de video comprime el archivo y tal vez no puedas hacerlo, pero puedes verlo aquí mismo, ¿verdad? Y la canaleta en realidad parece que es de 20 píxeles, así que simplemente está funcionando bien Poner esta grilla en esta página nos revela cómo Apple maneja el diseño y distribución de los elementos. Esta es una información muy valiosa en tu proceso de aprendizaje. Se llega a mirar en el funcionamiento de otros diseños. Por ejemplo, podemos ver que para la navegación aquí, la barra de navegación, en el pie de página, aquí mismo, realidad no están siguiendo los bordes de la cuadrícula o bordes del contenido principal El contenido principal en un lugar diferente. La práctica de la industria es mantener todo alineado con el contenedor principal de borde a borde. Se ve más consistente y ordenada, pero Apple tendrá sus razones para ello. Tal vez consistencia con su sitio de compras, o su pila de códigos o algo más. Así que no esperes una coincidencia estricta con nuestra cuadrícula de 12 puntos. Sí, aunque es un estándar de la industria con diseñadores para usar cuadrícula de 12 puntos, es más una guía suelta en lugar de una regla estricta. Además, utilizamos rejillas Figma porque nos ayuda durante la exploración del diseño Pero en los sitios de producción, ya no seguimos la cuadrícula porque construimos sitios receptivos que se encogen y se estiran como acordeón, y usamos reglas de dimensionamiento muy diferentes para lograr tal capacidad de respuesta, que verá durante la sección Webflow Insertemos la imagen del héroe. He guardado todos los recursos de imagen en este archivo para que puedas insertarlos fácilmente en tu diseño. Están dentro de esta savia de activos bajo esta biblioteca de componentes, que puedes acceder desde aquí. Los componentes en Figma son elementos que podemos crear y reutilizar posteriormente Esta es una característica genial, y hablaremos de ello más detalle en una última lección. Pero por ahora, todo lo que necesitas los componentes es para agarrar los activos de imagen. También puedes encontrar estas imágenes en la página de componentes que tenemos aquí mismo. Este es en realidad el lugar donde Figma está agarrando todo, todos estos componentes Si borras algo de aquí, también desaparecerá de la página de activos. Así que encuentra al héroe disparado en el panel Activos y luego arrástralo al lienzo así como así. Y luego solo alinearlo para que coincida con el diseño, así como así. Esta sección de héroes, como puedes ver, tiene un fondo degradado. Ya trabajaste con gradiente, así que no voy a hacer una demostración de eso aquí. Está bien si te quedas atascado. Así es como aprendes. Puedes ver el video de ejercicios de Crop suave una vez más para refrescar tu memoria si es necesario. Pero te voy a dar un rápido resumen de pasos. Entonces, para crear este gradiente, necesitas un rectángulo. ¿Correcto? En lugar del campo sólido, que actualmente está seleccionado, necesita el relleno degradado. Y el gradiente tiene paradas aquí. primera parada es esta, segunda parada está aquí, y de ahí es de donde se degrada Obviamente, la dirección no es lo que quieres aquí. Quieres la dirección vertical, que solo puedes cambiarla girando esta. Así. Entonces todo lo que necesitas hacer ahora, que es muestrear el color de este azul superior, y luego el final tiene que ser blanco porque como puedes ver, se conecta y se desvanece y conecta con el resto de la página, que es blanca Esto es exactamente lo que hicimos con un ejercicio de cultivos blandos. Entonces ya sabes cómo hacerlo. Quizá te quedes atascado, pero está bien. Te refrescaré la memoria, pero no quiero demostrar todos los detalles. Entonces una vez que hagas eso, obviamente, tendrás que colocar este rectángulo detrás de la imagen Euro, lo que puedes hacer arreglando las capas, justo, ahora mismo, esto está en la parte superior. Y para arreglarlo detrás, solo puedes arrastrar la capa hacia abajo y eso hará que el rectángulo detrás de tu imagen de ella, derecha y también hay atajos que puedes usar, por ejemplo, llevar al frente, y esto traerá el rectángulo formado. También se envía hacia atrás. Y como puedes ver, tiene un atajo junto a él, el cual puedes usar. Esto va a ser muy útil para ti en general. Así que tipo de memorizar esta idea porque Figma, todo funciona en capas y las cosas van delante de algo y detrás de algo, y así es como se arregla el panel de capas, ¿ Así que envía hacia atrás, y hacia atrás, lo enviaremos una capa a la vez. Enviar para atrás, lo enviaremos todo el camino atrás. Entonces, si lo hago enviar para atrás, no necesitamos eso porque va a ir todo el camino detrás de la captura de pantalla. Lo queremos uno por uno, que puedes volver a usar, control, soporte de comando en Mac, e ir arriba y abajo. La fuente que están usando es Apple's Default, fuente San Francisco Pro, partir de P. Si estás en una Mac, estará ahí por defecto, lo que podrás seleccionarla dentro de Figma. Pero si estás en Windows, no va a estar ahí por defecto. Tienes la posibilidad de descargarla. Apple tiene recursos. Voy a vincular que puedes descargarlo e instalarlo en tu computadora. Pero en realidad, no tienes que hacerlo porque Inter es más o menos una copia del teléfono de San Francisco, así que solo puedes usar el Inter y solo vas a estar muy cerca del teléfono. No tienes que usar San Francisco. Pero si estás en un Mc, hazlo, usas el teléfono de San Francisco, que es SF Pro y luego comienzas a tratar de igualar los tamaños, los pesos. Puedes jugar con tamaños y pesos de fuente para obtener la coincidencia precisa. Aquí no hay que ser súper preciso. Está bien si las letras no se alinean exactamente, pero si haces un esfuerzo adicional e intentas encontrar la coincidencia exacta, será un buen momento de aprendizaje. Te revelará cómo los diseñadores de Apple establecen ese tipo aquí. Cuán pesado hicieron el texto, si ajustan el espaciado entre letras, qué diferencias de tamaño de fuente buscaron para crear una jerarquía visual. Dicha información será recogida por tu cerebro y se instalará ahí la próxima vez que estés trabajando en un proyecto. Están usando un relleno degradado en su texto aquí, que funciona igual que cualquier otro degradado. Está justo debajo del relleno, y en lugar del color sólido, solo vas a elegir el color degradado. Y nuevamente, se detiene aquí, que es el principio, inicio, el final, y solo que probar un color de aquí, otro color de aquí, por ejemplo, y muestrear el final o el principio. Sí, ese es el final. Y entonces lo que sea que sea el comienzo y eso es todo. Una cosa que aún no hemos cubierto es el derrame cerebral. Por ejemplo, para hacer este botón, puedes dibujar un rectángulo, aumentar el radio de la esquina a un valor súper alto, así que esté completamente redondeado, y puedes agregar trazo desde aquí más, y luego puedes quitar el relleno o hacerlo blanco, y así es como obtienes el trazo. Este valor aquí controla el peso del trazo. tipo de líneas aquí, son solo la línea dos, que puedes seleccionar desde aquí o presionar L. Y mientras dibujas esta línea, solo mantén presionado shift, y esto bloqueará el eje, supongo, y tendrás una línea perfectamente vertical. Pero si no lo sostienes, entonces va a ser así. Te permitirá moverte y es posible que no obtengas una línea precisa y se verá algo así. Entonces, para obtener una línea perfecta, mantén el turno, y será perfectamente vertical. El peso se controla así, al igual que el trazo, Line también está usando la propiedad de trazo. Y para probar el color, en realidad hay un bonito atajo que puedes usar. Simplemente puedes presionar I. Se abrirá una muestra de color, como puedes ver, y cualquiera que sea el elemento que hayas seleccionado, llenará el color primario de ese elemento Entonces para la línea, va a ser un trazo, para otra cosa, va a ser un relleno. Para cambiar el color aquí, no recuerden que ya cubrimos esto hecho con 55%. Ahora, vamos a disminuir un poco el teléfono. Reciclar llamado material por peso, para poder simplemente estilizar de manera diferente parte del texto, solo necesitas arrastrar y seleccionar así. Entonces abres esto y muestres el color. Eso es. Y si necesitas incluso cambiar diferente peso de fuente o cualquier cosa, esto es factible así desde aquí Y eso es más o menos lo que necesitas aquí. Todo lo demás que ves aquí, son sólo rectángulos. Y es decir, por ejemplo, si necesitas una sección, este pie de página y la sección inferior tiene un color diferente, que es solo un rectángulo. De nuevo, solo pon el rectángulo, muestrea el color que necesitas y simplemente envía el rectángulo hasta la parte de atrás a alguna parte, bien. Bueno, esta es una fuente, así que en algún lugar de aquí, bien. Eso es todo lo que necesitas hacer con eso. Estos también son rectángulos. Y una última cosa, que es el contenido aquí, he incluido porque parte del texto, aquí hay mucho texto, así no tienes que escribir todo eso. Pongo texto para esos bloques, así que solo puedes copiarlos desde aquí. Y eso es todo. Que se diviertan. 55. Diseño de la página de inicio de la aplicación de chat: parte 1: Estos y los próximos videos practicarán la remezcla, y este va a ser nuestro primer tipo de proyecto completo desde el diseño hasta el desarrollo Primero, diseñaremos una página de inicio, y luego tomaremos esa página de inicio y construiremos y desarrollaremos dentro de Webflow Vamos a tomar una inspiración, y en lugar de copiarlo tal como hicimos con Figma'shmePage, vamos a remezclarlo, y vamos a usar nuestro propio contenido, nuestras propias fotos, y nuestros propios colores y cambiar algunas cosas si queremos y si podemos Encontré este diseño muy bonito de Philip stich y Balcom Brothers en Triple Vamos a usar los diseños de Philip como nuestra inspiración, remezclarlos un poco y diseñar una nueva página de inicio basada Esta vez, voy a demostrar el proceso completo para poder mostrarte cosas nuevas que necesitarás aprender en Figma. Va a ser interesante. Esta demostración es larga y está dividida en cuatro partes. Lo mejor es seguirlo, así que encienda su Figma. Como siempre, el archivo Figma está en los recursos. Primero, vamos a configurar nuestro marco. Verás que el ancho de la captura de pantalla es de 14 y 40 píxeles. Este es del mismo tamaño que un marco de escritorio en Figma. Ahora, agreguemos nuestra cuadrícula al marco. No estoy seguro de qué cuadrícula exacta están usando en ella, pero vamos a usar nuestra propia cuadrícula de 12 puntos con nuestra configuración habitual, aunque vamos a hacer coincidir sus márgenes en los bordes. No el margen en la barra de navegación superior, sino el del contenido Para medir cualquier cosa en Figma, simplemente dibuja un rectángulo y luego revisa las dimensiones de ese rectángulo Tiene 140 píxeles de ancho, así que usaremos esto como nuestro margen para la cuadrícula. Ahí. Ahora es una coincidencia cercana con su diseño. Hay algunas diferencias en su diseño, como la barra nab se encuentra fuera de la cuadrícula, y algunos otros elementos parecen tener una lógica diferente también. Pero para nosotros, vamos a apegarnos a nuestra grilla tanto como sea posible. Bueno. Vamos a empezar a diseñar al héroe, primero, el fondo. Tirar de nuestros propios colores personalizados es una excelente manera de remezclar el trabajo Encontremos algo de inspiración de color en el regate. Para tus diseños, quiero que obtengas tus propios colores tal como estoy a punto de hacer. Voy a agarrar un par de opciones. Simplemente haz una captura de pantalla de tu inspiración o guarda las imágenes haciendo clic derecho y guárdalas como. Los colocaremos en Figma más tarde. Esto me gusta mucho. Las combinaciones de azul, amarillo o azul naranja son pares de colores emocionantes. Ahora, solo coloca tus capturas de pantalla en Figma para que podamos probar colores a partir de ahí Lo que me gusta hacer es poner un color como fondo y otro como botón sobre él, y luego ver cómo funciona el combo en conjunto. Algunos colores pueden funcionar bien uno al lado del otro, pero si pones uno encima del otro, posible que tengan un contraste muy bajo. A a Ambos son bastante agradables, pero voy a ir con la opción azul. Puede bloquear la capa de fondo desde el panel de capas para que no se interponga en el camino al diseñar otros objetos encima de ella. Ahora agreguemos el contenido. Primero, tenemos que elegir nuestras fuentes. Las fuentes como los colores son un buen lugar para hacer un remix fácil Pero a veces nos puede gustar mucho la tipografía que están usando y es posible que queramos usar las mismas fuentes o similares Si conocemos la fuente que están usando, genial, pero si no lo hacemos o si es teléfono de pago y no queremos pagar, entonces tenemos que encontrar una alternativa similar. Eso es lo que voy a hacer aquí para que aprendas a buscar alternativas de fuentes. No sé exactamente qué están usando en sus diseños, pero vamos a ir a Google Fonts y ver si podemos encontrar algo similar buscando. Entonces voy a acotar los resultados. Claramente es una fuente seri de sonidos. Voy a usar el mismo texto como muestra porque eso va a facilitar la búsqueda de fuentes similares. Observe cuán simétricas son las letras. La letra O es un círculo perfecto en lugar de un óvalo habitual, y ese es un buen indicio. El mayor decir es la letra A. No es esa A habitual la que obtienes en la mayoría de las fuentes. Es una especie de estilo escrito a mano. Esas son suficientes sugerencias para encontrar fuentes similares. Mira, Montserrat es bastante similar. La O también es círculo, pero las A son distintas. Puedo usar esto si no encuentro algo más cerca. Pero hay pop ins es un partido muy cercano. La O es un círculo, y la A es el mismo estilo también. Hay algunas diferencias, pero esto es lo suficientemente bueno. En tu caso, puedes usar el mismo teléfono, elegir el tuyo propio o obtener el teléfono desde otra inspiración hasta ti. Vamos a combinar con el estilo. Parece que el peso es algo así como semi negrita. La altura de línea es más ajustada que un valor predeterminado, y esa es una gran decisión de diseño En grandes titulares como este, se necesita una altura de línea más ajustada Recuerda lo que aprendimos sobre la gravedad de los pesos de las fuentes. Además, si miras más de cerca, verás que las letras se paran más cerca unas de otras. Este podría ser el valor predeterminado para su tipo de letra particular, pero es muy probable que disminuyan el espaciado entre letras Esto nuevamente es una buena idea. Tener una fuente grande como esta se ve mejor con un espacio más ajustado Podemos disminuir el espaciado entre letras a partir de aquí. En cuanto al texto del cuerpo, si acercas, verás que no están usando el mismo tipo de letra que el titular, y probablemente sea una buena idea porque el mismo teléfono podría no ser mejor opción para el texto del párrafo Es demasiado simétrico. El texto del párrafo se ve más neutral y genérico, algo así como Roboto podría incluso ser el mismo, así que podemos usar eso 56. Diseño de la página de inicio de la aplicación de chat: parte 2: Y estamos de vuelta. También voy a usar botones redondeados. Puedes sentirte libre de remezclar aquí si quieres y usar botones rectangulares Para hacer que los botones sean redondos, solo se incrementó radio de las esquinas hasta que estén completamente redondeados. Para la fuente, parece que están usando texto de párrafo más pequeño, pero un estilo más grueso. Bien, eso se ve bien. El segundo botón es lo que se llama un botón fantasma. Este tipo de combinación de botones es un gran enfoque porque recuerda de lo que hablamos en jerarquía visual, quieres guiar a tu audiencia visualmente de un elemento a otro. Si tienes dos botones uno al lado otro y usas el mismo estilo en ellos, el público no podrá decir cuál es el botón principal que lleva a la acción primaria de este sitio. Para crear este botón Fantasma, necesitamos quitar el relleno de color y agregar un trazo a la forma. Después cambia el color del trazo. Comprobemos la grilla. Los botones no están alineados con la cuadrícula, pero eso no es gran cosa. Los botones y los elementos fiscales son flexibles y se contraen y crecen en base al impuesto interno, por lo que no tenemos que meterlos en una cuadrícula. Y a veces es mejor no hacerlo. Pero en este caso, está bastante cerca y los botones que se encogen poco no van a doler, así que voy a chasquear a esos chicos malos a una grilla Pasemos a nuestro tiro de héroe. Es un collage bastante interesante. ¿Te das cuenta de uno de los trucos de diseño donde cubriste el truco superpuesto? Vamos a crear un arte similar. Necesitamos encontrar y agregar un par de fotos similares como esas Bien, esto debería servir. Algunas de estas imágenes funcionan, pero otras no combinas imágenes, recuerda siempre la lección sobre la consistencia. Así que combina imágenes que son muy similares en estilo. Al igual que, estos dos son similares. No están frente a la cámara ni miran y son proporcionales entre sí, es decir, las fotos fueron tomadas desde una distancia similar. No quieres emparejar a estos dos juntos. Parece que no tienen nada que ver el uno con el otro. La correcta está mirando a la cámara, mirando hacia la recta, y ella está mucho más cerca de la cámara, haciendo que su cara sea más grande en tamaño. Bien, estos dos se ven bien. Las opciones de fotos gratuitas son bastante limitadas en general, y encontrar el estilo a juego es un poco más desafiante, así que tenlo en cuenta. A Ahora, vamos a crear esa forma de fondo punteado. Simplemente dibuja un círculo, elige elipse de las formas o simplemente presiona O. Cuando dibujas elipse mantén el eje para dibujar un círculo perfecto Entonces solo empieza a duplicar los círculos horizontal y verticalmente para crear ese tipo de cuadrícula punteada A Selecciónalos todos. Haga clic derecho y seleccione grupos o use un atajo Control o Comando G. Cuando coloque sus puntos detrás de la imagen, asegúrese de no tener una superposición impar con una imagen. Vea cómo los puntos están perfectamente sentados alrededor la imagen e intente usar el mismo espaciado. No se quiere crear una tensión innecesaria haciendo algo como esto. Ahora encontremos algunas pantallas de mockup para nuestro producto, tal como lo tienen aquí y también algo que luego podremos usar abajo aquí mismo Lo que vamos a hacer es encontrar algún diseño gratuito en Figmas Community Puedes hacerlo desde HignashMePage, el tablero, y hay un enlace, una pestaña una Y estoy pensando en usar una especie de chat o una aplicación de colaboración en equipo como nuestro producto. Realmente no importa. Cualquier cosa que se ajuste a nuestros diseños servirá. Puedes buscar palabras clave como chat o una aplicación de chat. Gracias. También puede ser chat en equipo o panel de chat o webchat o chat de escritorio, algo para obtener más resultados relacionados con la web y no solo aplicaciones móviles Y luego solo puedes pasar por las diferentes opciones, diferentes archivos de la comunidad aquí. Son de uso gratuito. Puedes usarlos para ver lo que hay dentro del archivo real. Puedes desplazarte hacia abajo hasta la vista previa, y tienen estas páginas aquí mismo y puedes cambiar a Esto realidad está mostrando la página real en el archivo FicMas, y puedes cambiar a, digamos, una página de diseño en este caso, entonces puedes verificar la vista correcta real del diseño Encontré este anteriormente, que es lo que voy a usar. Se puede utilizar el mismo o diferente. He incluido esto realmente dentro del archivo de asignación en una página de pantalla de Hat App aquí mismo. Para que puedas agarrarlo desde ahí si quieres usar el mismo. Para utilizar archivos de la comunidad, sólo tiene que hacer clic en este botón de apertura Figma Esto duplicará el archivo en su cuenta Figma, y es su archivo Puedes editarlo como desees. Para incluir esta maqueta en el diseño de nuestro sitio web, necesitamos adoptar la paleta de colores No tendría sentido que la marca del sitio web fuera azul, sino que el producto en sí fuera verde. Dado que se trata de un archivo editable, es sencillo cambiar de color. Simplemente tome el código de color de su diseño, seleccione el marco padre. Después expanda esta sección que dice colores de selección. Lo que esto hace es que revela cada color único que está presente en este diseño. Encuentra ese verde y pega tu código de color sobre él. Pulsa Enter, y eso actualizará cada lugar donde se utilizó ese verde. Este encabezado de aquí mismo está usando un tono más oscuro de ese verde, lo que significa que necesitamos crear un tono más oscuro de nuestro azul, cual es algo sencillo de hacer. Podemos volver a pegar color aquí. Y desde el modelo de color HSB, solo podemos disminuir el brillo Y como puedes ver, es el mismo tono, pero es más oscuro, y parece ese efecto que buscaba el diseño original. Ahora podemos copiar todo este marco en nuestro archivo de proyecto y tomarlo de ahí. Puede copiar fácilmente diseños entre diferentes archivos, seleccionar el marco y usar un atajo de copiar y pegar muy estándar de Control C, Control V para pegar. Ve a tu archivo, y luego pega el diseño. Creo que estas burbujas de chat serán agradables de usar en nuestro tiro de héroe. Vamos a copiarlo en nuestro documento y ver cómo los vamos a utilizar. Creo que voy a agarrar un par de pequeños y rociarlos alrededor para crear una especie de experiencia de chat entre estas chicas. Voy a usar el amarillo aquí porque lo voy a poner directamente sobre el fondo azul, así que el azul no funcionaría. Y también cambiar las fotos de perfil a las chicas. A Salí bastante agradable, en realidad. Voy a agregar esa línea discontinua. Ya es suficiente así. Demasiados elementos pueden agregar al ruido. Una cosa que no me gusta, sin embargo, es el botón amarillo. Antes era agradable y prominente, pero ahora que el arte héroe tiene amarillo en él, el botón está luchando por la atención y trata de conectar visualmente con el arte. La forma tampoco ayuda. El botón es redondeado, y esos cuadros de mensaje son redondeados, también, así que demasiada similitud. Cambiar el color a blanco debería solucionar este problema. Eso es mucho mejor. Ahora bien, el arte se ve separado y el contenido de la izquierda parece algo propio. Antes era una especie de fusión. 57. Diseño de página de inicio de aplicaciones de chat: parte 3: Estamos de vuelta. Por último, agreguemos el Na Bar, y terminamos con la acción de nuestros héroes. Vamos a crear un logotipo para nuestra aplicación de chat falsa, y vamos a darle algún nombre original, algo así como aplicación de chat. Podemos usar Poppins como nuestra cara de conversación y crear ese contraste similar de delgado y grueso, tal como lo tienen en su logotipo Recuerda este truco de la lección de contraste, combinado grueso y delgado y bam. Tienes un elemento interesante. Agreguemos algunos enlaces de navegación y el botón al final. Aquí hay otro viaje genial a Pigma. Seleccione todos los enlaces y en el panel de alineación, haga clic en ordenar. Esto generalmente distribuirá los objetos por igual entre ellos. Pero podemos ir un paso más allá y establecer margen exacto entre los elementos justo desde aquí. Usemos 30 píxeles porque ese es nuestro margen predeterminado de la cuadrícula. Necesitamos un botón. Vamos a crear un botón a partir de uno de estos enlaces. Cuando ponemos un botón en la barra Navbar, suele ser mejor usar el mismo mosaico que el enlace nag. Se ve mejor. Usemos el mismo margen de 30 píxeles desde la parte superior. Estoy presionando hacia fuera o tecla de opción aquí para ver las distancias entre los objetos. Y vamos a alinear todo en la barra de navegación horizontalmente en el centro. Siempre revisa tus diseños en 100% vista porque esos son los tamaños y dimensiones reales que van a ir en el lado real. Ahora para la sección media, lo voy a hacer un poco más simple, solo con un párrafo titular y solo una pantalla de nuestra app de chat que ya tenemos. Voy a usar exactamente su color de fuente. Es lo que llamarías de negro, negro, pero no tan saturado y agudo como un negro habitual. Voy a añadir ese negro a nuestra paleta. También es una buena opción para nuestra paleta porque tiene algo de azul en su interior como un tono azul. Se puede ver eso dentro del mapa a color. Eliminemos el espaciado entre letras porque este titular ya no es tan grande y pesado, así que no necesitamos tanto espacio reducido. Hagamos lo mismo para el texto del párrafo. Creo que aquí están usando la versión ligera, pero no soy fanático de los teléfonos con párrafos más delgados porque a veces son más difíciles de leer en pantallas de menor definición. En los teléfonos, tabletas y laptops con pantalla retina, está bien, pero en las pantallas de escritorio con menos densidad de píxeles, no van a ser tan nítidas. ¿Te das cuenta de la jerarquía visual que han creado aquí? El párrafo es de menor tamaño, más delgado y de color más claro. Yo haré lo mismo con el color. Simplemente podemos disminuir la opacidad de nuestro te. Y eso es suficiente. El 70% es bueno. No me molestaré en llenar este con texto real. Vamos a ir a Google y generar algún texto ficticio. Hay sitios web que pueden hacer eso por nosotros. Este es un sitio web, por ejemplo. Podemos especificar la cantidad de texto que queramos y puede generarlo para nosotros y luego copiar el texto y pegarlo en nuestros diseños. Centrar y vamos a ajustarlo a nuestra cuadrícula. Es un poco de t. Vamos a darle un poco más de interlineado. Eso es lo correcto. Me saltaré el botón y agregaré la maqueta de nuestra aplicación de chat imaginaria aquí Ahora en lugar de copiar todo esto en nuestro documento, realidad voy a exportarlo como una imagen y colocar esa imagen en su lugar. Haremos que sea más fácil trabajar con ellos y no sobrecargaremos nuestra página con elementos innecesarios. Para exportar cualquier cosa desde Figma, selecciónela y en el panel de propiedades, vaya a Exportar y haga clic en más Puedes escoger diferente archivo por mucho JPG es bueno para nosotros. Este año que dice una x, te permite cambiar el tamaño de la exportación. Si dice una x, entonces exportará en sus dimensiones exactas. Si son dos x, entonces se duplicará. Si tus diseños son de 200 píxeles por 300 píxeles, la exportación va a ser de 400 por 600 píxeles. Para qué sirve esto es hacer que nuestros activos vean agradables y nítidos en las pantallas HD. Más sobre esto más adelante, no nos adelantemos a nuestras celdas, por ahora una x va a funcionar bien. Coloquemos nuestra maqueta en nuestros diseños. Como puedes ver aquí, están usando esta barra del navegador en ella y también una sombra detrás de la. Pasemos la barra del navegador, pero agreguemos una sombra similar a nuestra imagen. Las sombras están bajo efecto. Haga clic en el icono más. Lo primero suele ser la sombra. Añadió esta pequeña sombra. Esto no se ve muy bien. Haga clic en el icono para editar las propiedades de sombra. Usemos nuestro negro como base de nuestra sombra y tiene este pequeño azul en ella lo que hará que se vea más como parte de nuestros diseños. Cuando agregas color con 100% de opacidad, obtienes esta extraña sombra Nunca hagas esto. Esto no es realmente una sombra. Higos por defecto 25% es generalmente la opacidad máxima que querrías usar para tus sombras El desenfoque es básicamente cómo se extiende la sombra, cómo se agota. Juega con él para que entiendas cómo funciona. Están usando un fuerte desenfoque y baja opacidad en su sombra Eso me gusta bastante y vamos a hacer algo parecido. X e y es el desplazamiento de la sombra, es decir, en qué dirección cae la sombra. X para desplazamiento horizontal e y para vertical. Cuando están en cero, cae por igual en los cuatro lados. Si agregamos desplazamiento horizontal, observe cómo la sombra se mueve hacia la derecha. Si agregamos un desplazamiento vertical, se mueve hacia abajo. O si vas valores negativos, entonces se mueve hacia arriba. Una buena práctica de diseño es agregar un desplazamiento positivo vertical y porque la luz la mayor parte del tiempo viene de la parte superior, sea al aire libre al sol o en interiores las luces del techo, y si la luz viene de la parte superior, entonces proyectará sombra apuntando hacia abajo. Esto simplemente se ve raro. Ni siquiera parece una sombra. A menudo veo que los sitios web no usan ningún offset, y eso no es muy natural. Eso significa que la fuente de luz viene directamente del frente, como si alguien estuviera apuntando con una luz de flash a un objeto, no un escenario muy común. Agregar desplazamiento horizontal no es muy común. Algunos diseñadores lo hacen, pero no es lo mío, y no creo que sea algo malo hacerlo, sino para elementos que forman parte de la interfaz, como esta imagen, los botones, tarjetas, etc. La sombra con solo el desplazamiento vertical se ve mejor. Mantenga x a cero y agregue un poco de desplazamiento vertical solamente. Eso se ve bien. Estoy mirando aquí, no usando ninguna pauta en particular con sombras, solo mirando lo que se ve mejor, más natural y casi Eso suele ser lo mejor para las sombras, que no sienta que está ahí. De lo contrario, crea formas extra que nuestros ojos necesitan digerir. Están usando formas redondeadas en su maqueta. Es bastante agradable. Las formas redondeadas suelen ser el mejor diseño web sin. Se sienten como objeto terminado en lugar de inacabado. Por supuesto, los bordes estrictos también tienen sus beneficios. Nuevamente, no hay reglas con el redondeo de las esquinas, pero si lo emparejamos con la redondez de las formas dentro de la maqueta misma, lograremos una mirada más consistente Y eso es bastante agradable. Agreguemos esos patrones punteados detrás de él. Usar formas como estos puntos u otras formas es una buena idea. Agregan un nivel extra de dimensión. Todos esos otros beneficios que hemos aprendido en el truco superpuesto porque eso es lo que esto se superpone. No tienen que ser los puntos. Pueden ser círculos, rectángulos, triángulos o cualquier otro de Pero obviamente, tiene que tener sentido. Entonces cuando repetimos estos puntos en nuestras páginas, obtenemos los beneficios del truco de repetición. Crea este ritmo del diseño al igual que un ritmo en una canción y une todo el diseño. R: Bien, aquí voy a pasar las cajas. No voy a hacerlas y pasar enseguida a la siguiente sección. 58. Diseño de la página de inicio de la aplicación de chat: parte 4: Y estamos de vuelta con la cuarta parte final. Esta aquí es una sección de llamado a la acción. Es donde le dices directamente a la audiencia que tome alguna acción, algo así como resumiendo toda la página Por lo general, tiene botones en él o directamente el formulario de registro. Están usando el mismo morado, pero con opacidad disminuida, hagamos lo mismo con nuestro azul. Es bastante agradable. El 10% se ve bastante bien. Bloquea la capa para que no se interponga en el camino. De hecho voy a reducir este titular aquí, así que la palabra pequeño salta a la siguiente línea. Se verá mejor. Están usando un botón blanco aquí, pero me voy a pegar al botón fantasma. Estoy presionando una tecla de salida o opción aquí para ver las distancias entre los objetos. Me gusta su calificación de estrellas y un pequeño ejemplar aquí. A esto se le llama prueba social. Gran idea incluir algo como esto en las secciones de llamada a la acción. Facilita la decisión a los usuarios. Bien, necesitamos un icono de estrella. Vayamos a flaticon.com y busquemos un ícono de estrella. Podemos descargarla de forma gratuita desde ahí. iconos aquí son gratuitos para uso personal, pero si lo vas a usar en algún lugar, entonces debes acreditar al autor o comprar su suscripción. Necesitamos formato SVG, que es editable en Figma. Vamos a poder cambiar de color si queremos. En sitios como Flat ICN, normalmente tenemos dos formatos de archivo en los que podemos descargar un icono, PNG y SVG Siempre que sea posible, debe usar el formato de archivo SVG para elementos como iconos e ilustraciones. ¿Por qué? Por dos razones. Primero, SVG es una imagen basada en vectores. Esto esencialmente significa que puedes escalar la imagen infinitamente Se puede agrandar mil veces y no perderá su calidad. Permanecerá perfectamente crujiente. El tamaño del archivo tampoco aumentará con una imagen más grande. Por lo que es el formato de archivo ideal para el diseño web, tanto para la carga de imágenes como para la calidad. PNG, por otro lado, es un formato basado en píxeles por lo que no puedes escalarlo. Sea cual sea el tamaño de la imagen original , eso es lo que te queda atascado. Es por eso que la opción de descarga PNG aquí ofrece diferentes tamaños, mientras que SVG no necesita hacerlo. La segunda razón por la que SVG es bateador se debe a sus capacidades de edición Un icono SBG se puede editar dentro de Figma como una forma regular Esto es útil porque a menudo queremos cambiar los colores para usar nuestra paleta de colores personalizada para el proyecto. PNG no es editable, así que estás atascado con el color con el que venía En este caso, quiero cambiar el color de la estrella y usar el color amarillo de nuestro proyecto. Desafortunadamente, SviGI Download es una característica premium en el icono plano Este suele ser el caso con sitios de proveedores de iconos grandes como este. Sin embargo, sí tenemos la opción de editar el color directamente en el sitio y descargarlo en PNG con nuestro color personalizado. Solo necesitas registrarte para obtener una cuenta gratuita. Una vez que inicies sesión, podrás editar el color, pegar el código hexadecimal de nuestro color personalizado. Y descarga gratis el icono en PNG. Además de flat Con, tenemos otras opciones desde las que podemos descargar iconos gratis. A veces incluso los formatos SPG gratuitos están disponibles. He vinculado dichos sitios en la página de recursos para que los pueda encontrar allí. Una de esas opciones son los iconos de Material de Google. Busca la estrella. Activa esta alternancia para que se llene. Cambia el estilo a redondeado y descarga en SVG. Podemos cambiar el tamaño y el color y Figma, no hay necesidad de hacerlo aquí También puedes simplemente copiarlo desde aquí y luego pegarlo en Figma usando Control V en PC y Comando V en Mac ¿Recuerdas ese truco de ordenar? No, puedo ajustar ese espaciado desde aquí. Muy bien, luciendo agudo. En lugar de un escritorio con computadoras, en realidad voy a usar una foto aquí. Tal vez foto de un equipo, oficina o dueño de una pequeña empresa para representar lo que dice el titular. Esta foto se ve bastante bien, algo así como una startup con un equipo que trabaja en diferentes lugares, por lo que necesitan una buena plataforma de comunicación. Sólo estoy jugando por aquí para ver qué funciona. Podríamos poner esta imagen como un fondo de sección dividida como lo hemos hecho en otras asignaciones, pero también puedo seguir con el mismo estilo porque la consistencia será recompensada y hacer algo como esto y en esos puntos detrás de la imagen A Eso se ve bastante bien, en realidad. El pie de página y eso es todo. Estamos cerca de la línea de meta. Vamos a copiar el logo y darle un collar azul. Hay alguna microcopia debajo del logotipo. Nosotros podemos hacer lo mismo. Su pie de página está dividido en cuatro columnas. Podemos organizar fácilmente un diseño similar para nosotros usando nuestra propia cuadrícula de diseño. Tenemos 12 columnas en nuestra cuadrícula. Si lo dividimos en cuatro, vamos a conseguir tres bloques de puntos. Dados los pequeños enlaces, tres columnas podrían ser demasiado, así que usemos dos columnas para cada bloque. Dividirlo en seis bloques incluso cabrá más en una línea. Esa es la belleza de usar cuadrícula de 12 puntos. Se divide en muchas variaciones flexibles. Voy a dejar estas dos columnas vacías, tener esta brecha entre enlaces de pie de página y el logotipo a menudo se ve muy bien. Crea esta separación visual entre los dos, lo cual tiene sentido porque el logotipo es diferente a los enlaces de pie de página. Bien, ahora llenemos estos enlaces con algún texto aleatorio. En lugares como este, siempre es mejor usar ejemplo realista en lugar de texto ficticio de Loren Epsom, porque dependiendo de la longitud del texto, podría terminar necesitando reorganizar un poco el diseño Además, repetir el mismo texto simplemente se ve feo. Consigamos los íconos sociales y otros enlaces en el pie de página. Ya hemos hecho mucho. Solo agreguemos el impuesto de derechos de autor, y eso es todo. H. Ahí, ahora, vamos a arreglar esos vacíos vacíos. Estoy usando 180 píxeles como margen. No hay regla con esto, realmente, se basa en cómo se ve, pero lo importante es ser consistente cuando se pueda. Por ejemplo, uso el margen de 90 píxeles en la sección media, así que voy a intentar reutilizar el mismo valor con otros márgenes. Pero a veces es demasiado o no suficiente. En tales casos, intentaré usar múltiplos del mismo valor, ya sea la mitad o el doble, ahí los 180 píxeles. Si eso no es correcto, entonces usaré un nuevo margen. A veces podríamos necesitar ser un poco inconsistentes siempre y cuando se sienta bien. Ahora, recortemos el exceso de espacio en la parte inferior. No olvides mantener el control o comando mientras haces esto, o podría distorsionar el contenido que hay dentro Una vez que hayas terminado, selecciona el marco y presiona el icono de reproducción. Ya podemos ver la presentación de nuestro diseño. Luce genial. Una nota rápida sobre el modo de vista previa, a veces es posible que tengas tu vista previa con este aspecto, que es que no estás viendo todo el fotograma. Si esto te sucede, eso significa que tu pantalla en tu computadora no es tan ancha como el marco, y nuestro tamaño de fotograma es de 144 píxeles, ¿verdad? Entonces, si tu pantalla es más corta, más pequeña que eso, por lo general eso sucede con las computadoras portátiles. Entonces no va a mostrar todo en la pantalla. Pero hay una solución a esto solo pasa el cursor sobre la parte superior aquí, la barra aparecerá e irá a las opciones y luego cambia de aquí, que es 100% ahora, cámbiala para que encaje con Y una vez que lo hagas, entonces se ajustará al marco se ajustará a tu pantalla, sin importar el tamaño de tu pantalla. Ahora bien, en raras ocasiones, puede suceder otro tema, esto podría no ayudar. Y eso es si has seleccionado algo diferente de la configuración del prototipo. Entonces, para ir a la configuración del prototipo, no tengas ningún fotograma ni ninguna capa seleccionada. Da click en el lienzo para que todo quede deseleccionado y luego ir al prototipo Y desde el prototipo, asegúrese de que no se seleccione ninguno del menú desplegable del dispositivo. Si hay como iPhone o un ajuste personalizado o algo así, tendrá una pantalla extraña del iPhone o algo raro se mostrará aquí en el modo de vista previa. Así que asegúrate de que no se seleccione ninguno. Y a la hora de ir a la vista previa, y si tienes algunas otras capas aquí, tengo algunas otras capas y marcos en la página. Por lo tanto, podría intentar obtener una vista previa de algún otro marco, asegúrese de seleccionar el marco de su escritorio y luego haga clic en la vista previa, y luego se previsualizará el marco correcto. Y eso es todo. Al elegir una excelente inspiración, hemos diseñado y creado una página de inicio de aspecto fabuloso. Este es el poder de la buena inspiración. Espero que hayas disfrutado del proceso. Estoy muy interesado en ver su sumisión. En la próxima parte de este curso, vamos a construir esta página exacta en Webflow. Quédate alrededor. 59. PARTE 3: DESARROLLO web (WEBFLOW): nos vamos a tomar un descanso de diseñado. Por ahora. Se acercan más lecciones sobre diseño y un proyecto de cliente completo de principio a fin. Pero llegaremos a eso. Ahora. Vamos a divertirnos aprendiendo a construir realmente sitios web en esta parte del curso. Vas a aprender a desarrollar sitios web usando flujo de naufragio, y lo vamos a hacer tomando la página principal que acabamos de diseñar y construirla dentro del flujo húmedo, Así que vamos. 60. Conceptos básicos de la web: diseñador de Webflow: Ya lo has visto antes, pero hagamos un resumen rápido de lo que es qué en iFlow Si esto está en tu pantalla inicial, podrías estar en otras páginas. Así que simplemente haz clic de nuevo en el tablero. También estaré trabajando en la cuenta gratuita para asegurarme de que obtengas la misma experiencia. Hay un montón de plantillas gratuitas y de pago, pero no estamos en el negocio de esas, así que vamos a seleccionar un sitio en blanco. A esto se le llama el diseñador. Aquí es donde ocurre toda la magia en Webflow. Nuestra página a medida que diseñamos, va a ir sobre este lienzo blanco, y podremos interactuar con elementos directamente en este lienzo. En la barra de herramientas izquierda tenemos nuestros controles para volver al dashboard, a la configuración del proyecto o al editor. Debajo de eso, tenemos tres paneles importantes. El primero es el panel de elementos. Así es como agregamos nuevos elementos en la página. Entonces tenemos el panel de páginas. Eso va a mostrar todas las páginas dentro de nuestro sitio web. Desde aquí, podemos agregar nuevas páginas y administrar su configuración y así sucesivamente. En un plan gratuito, solo obtenemos dos páginas estáticas, pero sí obtenemos un poco más páginas CMS. Y luego tenemos el panel de navegadores, que es algo así como el panel de capas en Figma, pero no exactamente lo mismo porque la web funciona un poco diferente a las herramientas de interfaz de diseño como No necesitas preocuparte por otras cosas en la barra de herramientas de la izquierda por ahora. Llegaremos a ellos cuando lo necesitemos. En el centro, tienes estas diferentes vistas del dispositivo. Aquí es donde hacemos que nuestro sitio web receptivo y lo optimizamos para que diferentes dispositivos tengan un sitio web moderno que se vea genial en cualquier pantalla y cualquier dispositivo. También podemos cambiar el tamaño de la pantalla para cada dispositivo como móvil, por ejemplo, y optimizarla para asegurarnos de que se vea genial en todo tipo de dispositivos móviles, no solo en uno A medida que lo cambias de tamaño, puedes ver que en diferentes anchos, muestra qué dispositivos populares están usando ese ancho en particular Y para publicar el sitio en Webflow, podemos hacerlo desde aquí De forma gratuita, puedes publicarlo en el dominio de Webflow. Para un dominio personalizado, necesitaremos agregar un plan de alojamiento. Y en el lado derecho, tenemos nuestro panel de estilos. Aquí es donde manipulamos y diseñamos cada elemento de la página. Esto se puede reconocer. Es algo similar al panel FigmAspperties en Al igual que Figma, es adit lo que sea que esté seleccionado actualmente Hay muchas propiedades similares como tamaño, topografía, nombre de fuente, tamaños, etc. y efectos como desenfoque y sombras Hay más pestañas en el sitio, pero no tenemos que preocuparnos por ellas por ahora. Lo repasaremos cuando realmente lo necesitemos. Y eso es todo. Esa es una breve introducción del diseño de Webflow 61. Conceptos básicos de la web: HTML y CSS: A cuando la primera página web se puso en marcha en 1991, así era como se veía. Sigue en vivo, si quieres echarle un vistazo. Esta primera página web fue realizada por el inventor de Worldwide Web, Tim Berners Lee en Cern que es un laboratorio de investigación nuclear en Suiza, sorprendentemente no relacionado realmente con las computadoras De hecho he estado en el CERN. Estaba en este viaje de negocios de mi trabajo a la vez, y me llevaron a esta habitación exacta donde la web mundial mundial Tim Berners Lee creó la web mundial mundial, y la habitación es completamente sencilla De verdad no pensarías que algo creativo salió de ello. Simplemente parece una química regular o, como, un laboratorio de física de una escuela secundaria regular. Y me contaron esta historia. Al parecer, cuando Tim presentó su ponencia sobre Worldwide Web, su supervisor que anotó en el periódico cuando estaba revisando diciendo vago pero interesante Estoy seguro en su momento, ninguno de ellos tenía idea de lo que terminarían buscando los sitios web e Internet. Hoy en día, la primera página web se hizo usando HTML, y hasta hoy, sigue siendo de lo que están hechos todos los sitios web. A medida que aprendemos Webflow, en realidad necesitamos aprender cómo funcionan HTML y CSS No vamos a aprender a codificar, sino que aprenderemos la lógica detrás porque todo en Webflow se basa en esa lógica HTML es simplemente el contenido de la página web, como un título, párrafo de texto o imagen. Y cada pieza de este contenido tiene una etiqueta, que le dice al navegador si este es el titular, un párrafo, un enlace o algo más. A esto lo llaman una etiqueta. HTML por sí solo, no es muy bonito. Tiene una disposición vertical. Todo está apilado uno tras otro. Realmente no se pueden superponer elementos ni crear cuadrículas y diseños de columnas Es como un documento de texto donde todo el contenido fluye en dirección vertical uno tras otro. El diseño web en ese entonces no existía realmente. No hubo mucho diseño involucrado, pero luego vino CSS, y el sitio web comenzó a tener completamente diferente. CSS es el estilo del sitio web. Es donde definimos cómo debería verse cada uno de esos elementos HTM. Qué tamaño deberían ser, qué tipo de letra, qué color, cómo se deben colocar en la página, si deben tener alguna interacción hover y así sucesivamente Una página web con solo HTML parece un esqueleto, y después de aplicarle CSS, es como una persona completa. En Webflow, agregamos elementos HTM desde el panel de elementos. Y si echamos un vistazo al tablero del códice, veremos que allí también se han agregado dos elementos HTML , una etiqueta H para el titular y la etiqueta P para el párrafo Estos son elementos HTML predeterminados sin estilo. Si revisas la pestaña CSS, verás que está vacía. Aún no hemos agregado ningún estilo a nuestros elementos. El estilo se agrega desde la derecha en el panel Estilos. No hemos escrito ningún código ni escribimos ningún CSS nosotros mismos, pero Webflow lo ha hecho por nosotros. Ahora, la pestaña CSS tiene alguna información de estilo en ella. Básicamente es una instrucción que dice, Si un elemento tiene un encabezado de nombre, hágalo de color rojo y 58 píxeles de tamaño. Eso es simple. 62. Conceptos básicos de la web: modelo de Box: Antes de continuar con la construcción de nuestra página, primero quiero explicar la estructura de una página web. Cada página web está estructurada en un llamado modelo de caja para la HTM, cada elemento es en realidad una caja. No importa su forma y contenido finales, todos comienzan como una caja. Y todas esas cajas realmente se sientan dentro de otras cajas grandes, todo el camino hasta la caja grande final donde se asienta todo lo demás. Y esa es nuestra página web. Cuando estábamos diseñando nuestra barra de navegación en Figma, simplemente arrastramos nuestros enlaces exactamente donde queríamos que se colocaran Pero Figma y otras herramientas de diseño utilizan un modelo diferente. El modelo de capas, puedes pensarlo como estantes de papel en Figma. Cada nuevo objeto se sienta encima del objeto existente, no encima de él, sino justo encima de él. Básicamente crea una nueva capa de espacio y es el rey y único ciudadano de ese espacio. Si hay algo más directamente debajo de él, el tipo inferior no será visible en absoluto hasta que realmente lo empujemos hacia arriba en el panel de capas. Exactamente lo que sucede cuando colocas papeles uno encima del otro. Ahora, las páginas web son más como organizadores de cajones. Cuando un cajón se divide en cajas, que por sí solas se pueden dividir en cajas aún más pequeñas en cajones, las cosas no suelen ir una encima de la otra. Van ya sea por debajo o al lado del otro. Cuando construimos nuestra barra de siesta usando HTML, primero vamos a tomar una caja vacía y poner nuestro logo y cuadros de enlace en ella. La caja más grande se llama padre y las cajas más pequeñas dentro se llaman niños. Y esas cajas de niños son los hermanos del otro, tal como lo esperarías. Por defecto, van a venir uno tras otro porque así es como funciona cada animal sin CSS. Entonces vamos a aplicar un estilo CSS. Por lo que todas estas cajas están dispuestas horizontalmente. Después usando otras propiedades CSS y un par de cajas más, podemos distribuirlas exactamente de la manera que queramos. No te preocupes, te acostumbrarás a esto en un abrir y cerrar de ojos. Si alguna vez te quedas atascado tratando averiguar cómo hacer que algo funcione, más probable es que la solución sea otra caja. Webflow tiene la amabilidad de mostrarnos los límites de nuestras cajas Al hacer clic en cualquier elemento , te mostrará el cuadro completo que ocupa este elemento. Como puedes ver, aunque nuestro titular sea corto, la caja se extiende por toda la página. Ese es el comportamiento predeterminado de la mayoría de las cajas HTML sin que se le aplique ningún CSS. Y por defecto, todas estas cajas vienen una tras otra a menos que las pongas dentro de otra caja. 63. Flujo de web: jerarquía de elementos: Cuando construimos nuestra página en Webflow, vamos a tener muchas cajas Muchas de las cajas más pequeñas se sentarán dentro de otras cajas más grandes, y esas cajas más grandes estarán en cajas aún más grandes. No te pierdas en esta jungla de cajas. Webflow tiene un panel Navigator, que puedes encontrar aquí Este Navigator es similar al panel Capas de Figma. Todo lo que añadimos a nuestra página, lo podemos encontrar aquí. Incluso los objetos invisibles, los elementos de este panel están dispuestos con la lógica del modelo de caja. La primera caja de nivel superior que contiene todo dentro se llama el cuerpo. Nada va al lado o fuera de él, todo va dentro. Es el gran, bisabuelo, bisabuelo de todas las cajas infantiles. Por eso se obtiene esta ligera sangría para representar la jerarquía de elementos y para mostrar lo que se encuentra dentro de qué caja llamamos a este El encabezamiento y el párrafo se anidan dentro del cuerpo. Reflujo nos muestra esta jerarquía con líneas dos. Si tomamos una caja vacía y ponemos nuestro rumbo dentro, aparecerá la línea. Esta línea es una guía útil para identificar fácilmente la jerarquía de elementos. La jerarquía es algo grande aquí, muchas de las propiedades pasan del padre a los hijos. Esto se llama herencia. El niño heredará las propiedades del padre, al igual que en la vida real. Por ejemplo, si cambio el color de fuente a rojo en el padre, cualquier elemento de texto que deje caer dentro del padre también se leerá , todos ellos. Independientemente del tipo de texto lo dejo caer, titular y párrafo, viñeta o demás Eso es hasta que lo anule. No tenemos que ser copias exactas de nuestros padres. Derecha. Si decidimos ser diferentes, entonces podemos, podemos cambiar directamente el estilo de texto en el elemento hijo. Eso se llama anular. No todas las propiedades se pueden heredar. Principalmente, esto se aplica a los textiles. Webflow puede mostrarnos si hay alguna herencia sucediendo en algún elemento ¿Ves como algunos de los estilos están resaltados en naranja? Significa que el estilo está siendo heredado y si haces clic en él, te mostrará desde dónde se está heredando. Por ejemplo, en el color, es como de block, refiriéndose a ese cuadro padre que acabamos de editar. Después explico lo que es un desbloque. El estilo se resalta en color azul en su lugar. Eso significa que hemos diseñado directamente esa propiedad y anulará cualquier estilo del padre No hace falta que entiendas esto completamente por ahora. Lo entenderás mientras practicamos y construirás nuestra página. La segunda representación visual de la jerarquía de elementos es visible en la barra del navegador inferior. Muestra que el rumbo está dentro del bloque, que está dentro del cuerpo. Estos son clicables y puedes seleccionar cualquiera de los padres Pero no muestra a los hijos ni a los hermanos, solo a los padres todo el camino hasta el cuerpo. Para una imagen completa, el panel del navegador es un mejor uso. Lo mismo, por supuesto, se aplica al panel del navegador. Si seleccionamos un elemento en el panel igual que Figma, estaremos editando el elemento exacto en Figma Cuando movemos elementos arriba y abajo en el panel de capas, la posición del elemento no cambia, simplemente va detrás o delante de algún otro elemento. Si se superponen, si no se superponen, entonces nada sucede realmente visualmente. Pero en Webflow, la posición cambia. Mover el elemento de párrafo en el navegador cambia el orden de los pesos altos que se muestran en el lienzo. También podemos hacer esto moviéndonos a la derecha en el lienzo, notarás que el panel Navigator se actualiza en consecuencia. También podemos arrastrar elementos dentro de cajas en el panel Navegador y mover las cajas enteras que moverán todos los elementos trinle hijos con él Bien, esta estructura web puede parecer un poco confusa al principio, pero no te preocupes rápidamente, te acostumbrarás a ella. 64. Webflow: sección, contenedor, bloque Div: Bien, en esta sección, vamos a aprender haciendo en lugar de aprender Webflow característica por característica, hecho vamos a aprenderlo construyendo nuestra página de inicio que ya hemos diseñado, y poco a poco, un paso a la vez, paso a paso ferozmente Recuerda, vamos a aprender todos los entreses de Webflow solo cuando lo necesitemos No voy a cubrir ninguna característica hasta que lleguemos a un punto en el que realmente la necesitamos para usarla mientras estamos haciendo y construyendo nuestra página de inicio. Entonces lo que vamos a hacer es tomar ese diseño que hemos hecho, y luego cada sección por sección, vamos a repasarlo y recrearlo y reconstruirlo dentro de Webflow Y comencemos simple con nuestro contenido en el lado izquierdo en la sección de héroes. Antes de comenzar a construir algo en Webflow, primero, tienes que planear en tu cabeza qué tipo de diseño se va a necesitar Entonces, ¿qué tenemos aquí? Tenemos un fondo azul. En figma, usamos un rectángulo para eso. En Webflow, no tenemos cosas como rectángulo. Tenemos cajas en su lugar. Hay tres tipos de cajas vacías en Webflow. Los puedes encontrar aquí mismo en el panel Elementos. El panel Elementos es donde Webflow guarda todos los nuevos elementos que necesitamos Se divide en categorías de necesidad como tipografía, donde tienes un encabezado, párrafo y todos los elementos relacionados con el texto Así que tenemos tres cajas vacías para nuestra sección de uso general, contenedor y un bloque de buceo. Una sección es exactamente lo que dice. Es una caja vacía donde podemos organizar una sección de nuestra página, que es exactamente como tenemos organizados nuestros diseños, ¿ no? Tenemos una sección de héroes, luego varias secciones a continuación. Por último, la sección de pie de página. Esas son todas las secciones, y así es como nos vamos a organizar dentro de Webflow también Contenedor es donde ponemos el contenido de nuestra página. En nuestros diseños, es todo lo que hemos puesto en los límites de nuestra grilla. El cuadro más popular en HTML es un bloque DV, abreviatura de bloque de división. Es una caja vacía y los bloques de construcción más básicos más útiles de una página web. Está bajo categoría básica. ¿Cuál de estos necesitamos primero? Obviamente, una sección. Así que agreguemos una nueva sección a nuestra página. La sección y el bloque DE son elementos idénticos. Funcionan exactamente de la misma manera. Entonces todo lo que describo para una sección ahora mismo aplica al bloque DL también. Entonces una sección o un bloque D es una caja vacía. No hay nada en ella. Esta caja en realidad no tiene una altura hasta que le damos algo de altura. Webflow nos está mostrando un poco de altura temporalmente para que podamos notarlo y no volvernos locos buscándolo También es una caja para esparcir. Cuando colocas otros elementos dentro de él, crecerá para que coincida con la altura de su elemento hijo. Vamos a darle un color para que podamos entender mejor lo que le sucede. Eso lo podemos hacer desde el fondo. Las cosas básicas por dentro, el panel Snile es muy similar al panel de propiedades de Figmas, por lo que muy fácilmente se puede trabajar con él Ahora, si entramos en la vista previa, la sección desaparece. ¿Por qué es eso? Porque está vacío y tiene cero píxeles de altura. Es invisible. Webflow solo le da una altura temporal justo dentro del diseñador de redes, así que para ayudarnos a verlo Si arrastramos un elemento de imagen dentro, se va a estirar de cero píxeles a la altura exacta de ese elemento de imagen que acabamos de poner dentro. Ahora todo es visible también en el modo de vista previa porque ya no tiene cero píxeles de altura. Si pones algo más pequeño dentro como una pequeña etiqueta, entonces se va a encoger. Pero en realidad no se encogía. Era cero píxeles. Simplemente se encoge solo dentro del diseñador porque tenía esta altura temporal. Espero que lo estés entendiendo. Recuerdo que este extraño comportamiento me fue un poco confuso al principio. Entonces quise aclarar desde el principio para que entiendas y también entiendas la lógica básica de cómo se forma la estructura en el sitio web. Dale una oportunidad ahora mismo, y luego seguiremos estilizando nuestra sección. 65. Webflow: ajustes de tamaño: Estamos de vuelta. Ahora, vamos a darle a este bloque div el mismo color azul de nuestros diseños. Para obtener el color azul exacto de Figma, seleccione la caja de color o un rectángulo de fondo y luego copie el código del color del campo Si no puedes seleccionar el rectángulo de fondo, no olvides verificarlo. A lo mejor has bloqueado la capa porque sé que esto es lo que he hecho dentro del tutorial, así que podrías haberla bloqueado también. Este es un código hexadecimal, que podemos copiar y usarlo en Webflow, y va a traer exactamente el mismo color idéntico allí también Dentro de Webflow, vaya al panel Estilos y desplácese hacia abajo para encontrar una propiedad llamada fondos Hay el mismo campo para el código hexadecimal así que solo pega tu código ahí. Ahora necesitamos darle a nuestro bloque div un tamaño similar al de nuestro rectángulo Figma, y aquí es donde las cosas funcionan un poco diferente en comparación con Figma La razón es que los sitios web son receptivos. Pueden crecer y encogerse según los tamaños de pantalla. En Figma, todo tiene una posición fija y un tamaño fijo independientemente de la pantalla o el contenido Para empezar, sí tenemos controles similares como lo hacemos en Figma. Tienes ancho y alto donde puedes poner valores exactos como lo pondrías en Figma. No podemos arrastrar y cambiar el tamaño un rectángulo del lienzo como lo hacemos en Figma. Tenemos que introducir valores en estos recuadros. Podemos poner valores exactos de píxeles agarrándolos directamente de Figma. Para algunos elementos, esto podría ser una buena cosa para hacer, pero para el cuadro de fondo, no es porque no responde. Si mi pantalla es más ancha que ese valor, entonces obtengo este hueco blanco porque he hecho que el cuadro azul solo tenga 1,400 píxeles de ancho, mientras que mi pantalla es más ancha que eso Y si la pantalla es más pequeña, todavía no sirve porque entonces la caja se desborda Ves esas líneas azules, esos son los límites de la caja azul, y se van fuera de la página. Muy a menudo los valores exactos de píxeles no son buenos en el flujo de trabajo. Bien, entonces ¿cuál es una buena opción? Si presionas este valor de Px aquí, te mostrará todas las unidades que puedes ingresar en estos campos. Después de píxeles, tenemos un porcentaje. Con porcentajes, ahora ingresamos web responsive. Es un valor receptivo y respuesta al tamaño del padre. Si ponemos el 50% de ancho de nuestra caja, va a tomar el 50% de su elemento padre. Y ¿cuál es el padre de este elemento? Si verificamos eso en el navegador, podemos ver que el cuerpo es el padre. El cuerpo de cualquier sitio web es responsive y su tamaño por el ancho del navegador. Esto significa que el 50% del cuerpo es el 50% del navegador. Entonces si reducimos el ancho del navegador, y podemos hacerlo desde aquí arrastrando Podemos ver que nuestra caja azul se encoge automáticamente a medida el cuerpo se encoge y no hay desplazamiento horizontal VH y VW son unidades importantes y muy útiles. Representan altura de ventana y ancho de ventana. Viewport es el mismo que el tamaño del navegador. Por ejemplo, a medida que arrastramos este manejador aquí, podemos ver el cambio en el ventana gráfica o el ancho del navegador se muestra directamente en píxeles Entonces ese sería el ancho de la ventana. De igual manera, esta es la altura de la ventana. Estas unidades funcionan en porcentaje, por lo que 100 VW es 100% del ancho de ventana gráfica, y 50 VH es 50% de la altura de la ventana gráfica Dejemos caer otra caja dentro, para que podamos ver esto en la práctica mejor. Yo caja amarilla está sentada dentro de la caja azul. Si usamos valores porcentuales, el cuadro amarillo cambiará el tamaño relativo al cuadro azul porque es el padre Así que 50% y 100%. Por lo que el 100% de altura cubre el 100% de la altura de la caja azul, que tiene su propio valor de 600 píxeles. Ahora mira qué pasa si ponemos 100 VH en su lugar. Cubre toda la pantalla visible. Incluso va fuera de las fronteras de los padres. Lo mismo se aplica a VW. 100% hace que se estire hasta los bordes del elemento padre. Pero 100 VW hace que se estire todo el camino para llenar todo el ancho de la pantalla visible. A tener en cuenta, usualmente usamos estos valores a su campo correspondiente, por lo que VW en el campo ancho y VH para el campo de altura. Aunque eso no significa que no puedas cambiarlos. Por lo general, no hay necesidad, pero hay algunos casos raros en los que quizás quieras hacer eso. La última unidad es auto, es decir, auto dimensionamiento. Este es el valor predeterminado y la anchura y la altura. Cuando el lado se establece en auto en la altura, el tamaño del elemento cambiará en función de la cantidad de contenido que hay dentro. Por ejemplo, fijemos la altura en auto en nuestra caja azul. Desapareció porque está vacía y cuando está vacía y es automática, eso significa que tiene cero píxeles de altura. Pongamos algunos elementos dentro. Para agregar algo nuevo dentro de un elemento existente, tenga ese elemento seleccionado y Webflow lo dejará caer dentro cuando haga clic en algo del panel de nuevos elementos Si tengo una sección seleccionada, caerá dentro, pero si no la quieres dentro de ningún otro elemento, entonces selecciona body, así caerá afuera en el lienzo general. Si también puedes arrastrar elementos directamente sobre el lienzo desde el panel de capas, no del panel de capas, sino del panel de elementos. Pero eso no suele ser lo que hago. A mí me gusta al revés, pero depende de ti cuál quieres preferir si quieres arrastrar, arrastras , si quieres simplemente hacer clic, haz clic. Y así a medida que agregues más elementos dentro del bloque div, se estirará. Si establecemos una altura de píxel específica, entonces el bloque div cumplirá esa altura sin importar la cantidad de cosas que rellenes dentro Los elementos simplemente se desbordarán de él al igual que tu cubo de basura cuando eres demasiado vago para sacarlo. cuanto al do en el ancho, la caja se estirará hasta los bordes de su padre. En este caso, la página completa porque el elemento padre es el cuerpo. Por último, tenemos mínimos y máximos. Estas reglas funcionan en conjunto con la anchura y altura regulares. Es una regla extra establecer pisos y techos en nuestros elementos. Por ejemplo, si establecemos la altura en auto, el cuadro azul se estirará en función del contenido interior. Pero si establecemos una altura máxima, entonces se estirará sólo hasta ese punto. Los mínimos y máximos son súper útiles en muchos escenarios diferentes Por ejemplo, si tenemos un elemento de tarjeta como este donde queremos poner algún contenido, puede ser información, forma, precios, lo que sea. Podríamos establecer una altura exacta en él para que coincida con nuestro contenido, igual que la forma en que lo haríamos en Figma. Pero debido a que la web responde, el tamaño del contenido puede cambiar de una pantalla a otra, y luego vamos a conseguir algo como esto. Una mejor manera es usar la altura mínima en lugar de la altura exacta en este caso. Si ponemos un mínimo de 400 píxeles, nos aseguraremos de que la caja no encoja porque no hay suficiente contenido dentro, y también nos aseguraremos crezca cuando el contenido crezca con ella. Lo mismo va para el ancho. ajuste de 400 píxeles se ve bien aquí, pero si lo reducimos, obtenemos el desbordamiento y se va a mantener obstinadamente como 400 Una mejor opción es establecer 400 ancho máximo. Esto significa que no estirará más de 400 píxeles pase lo que pase, pero se encogerá por debajo de eso si hay una necesidad. Entonces veamos ahora ¿qué valor y unidades necesitamos ingresar para que esa caja se vea como nuestro diseño? Por el ancho, es obvio, ¿verdad? Vamos a ir con Auto porque queremos que se estire de borde a borde. El ancho del cien por ciento nos traería el mismo resultado en este caso. A menudo en el diseño web, hay múltiples formas de lograr los resultados deseados. A veces son igualmente buenos, pero a veces uno puede ser un poco más superior. Con la práctica y algunas fallas, pronto aprenderás cuál es mejor. En este caso, Auto es mejor porque es por defecto y significa que no hay código extra. Aquí hay un consejo de Webflow para devolver cualquier propiedad a su valor predeterminado, mantener o clave de opción, y haga clic en la propiedad Borrará todos los cambios que haya realizado y volverá a los valores predeterminados. Es un atajo muy práctico. Otro consejo, si la propiedad está en azul, significa que la has cambiado. Cuando te enfrentas a algún tipo de gran tamaño, tratando de entender por qué algo no está actuando de una manera que debería, puedes escanear esto fácilmente para identificar qué propiedades se aplican y qué podría estar contribuyendo al problema. Cuando es naranja así, significa que hemos cambiado los valores de desarrollo, aunque no en este elemento directamente, sino en uno de los padres. En este caso, sobre el elemento del cuerpo. En otras palabras, se está heredando del elemento cuerpo. Nuevamente, esta es una excelente manera identificar de dónde vienen algunos estilos. Bien, ahora para la altura, en base a lo que hemos aprendido, sabemos que no podemos usar un valor exacto como Figma porque cuando la pantalla se expande o se encoge sobre el móvil, no va Entonces, ¿cómo podemos hacerlo adaptable? Tenemos dos opciones sólidas. Primero, podemos mantenerlo automático y dejar que el contenido defina su tamaño. Y segundo, podemos usar VH, la altura de la ventana. Como aún no pusimos nuestro contenido, probemos la segunda opción, 100 VH, que significa 100% de una pantalla visible. Esto significa que no importa cuánto encojamos o expandamos nuestro navegador, la caja se adaptará instantáneamente para que coincida con la pantalla visible. Pero si nuestro navegador es demasiado pequeño, entonces a veces la caja azul podría no ser suficiente para nuestro contenido, y el contenido se desbordará de la caja. Entonces, ¿por qué sucede esto? Porque la caja azul tiene una altura definida. No se estira con el contenido, y esa altura definida es tan alta como la ventana del navegador. Entonces, ¿cómo podemos arreglar esto? Sabemos que para tener la caja padre estirada para acomodar su contenido, necesitamos usar dimensionamiento automático, ¿verdad? De esta manera, nos aseguramos de que la caja azul crezca con contenido, y el valor 100 VH podemos poner como altura mínima. Ahora, el cuadro azul tendrá al menos la misma altura que el navegador, pero no menor que su contenido. Ese es un arreglo perfecto para nosotros. Entonces, para recapitular, tenemos valores de píxel para ingresar dimensiones fijas exactas Tenemos valores porcentuales al tamaño y elemento relativo a su padre. Tenemos VH y VW para dimensionar elementos en relación con el tamaño del navegador, y tenemos mínimos y máximos para establecer pisos y techos en 66. Webflow: relleno y márgenes: Continuemos con nuestro diseño y agreguemos el contenido a la sección de héroes. Necesitamos un encabezado, un párrafo y botones. Todos estos los podemos agregar desde el panel Elementos. Asegúrate de que estén dentro de esa sección azul. Recuerdas por qué los pusimos dentro, ¿verdad? Porque la web funciona en el modelo de caja. Todo va a ir dentro de algo. Bien, ahora pongamos nuestra copia dentro de estos elementos de texto. Simplemente haga doble clic en el elemento en el lienzo y comience a escribir o copiar y pegar desde el archivo de diseño. Voy a explicar en un poco por qué hay este nuevo hueco blanco encima de la caja azul. Los nuevos elementos en Webflow suelen estar atascados uno tras otro y pegados a los bordes de su aparente Así es como se comporta HTML por defecto. Pero no es así como queremos las cosas. Queremos moverlos y crear espacios entre ellos. Entonces, ¿cómo hacemos eso? En Figma, eso es fácil. Sólo tienes que arrastrar el elemento donde lo quieras. Pero en las páginas web, eso no es posible. Estos elementos en realidad se pueden mover o arrastrar por donde quiera en la página Pero CSS tiene un truco especial para esto. Se llama relleno y márgenes. Podemos encontrar eso bajo categoría de espaciado en el panel de propiedades. El relleno agrega espacio dentro del elemento y el margen agrega espacio fuera de él. Tomemos nuestro botón, por ejemplo. Por defecto, Webflow ha aplicado un poco de relleno al pasar el cursor sobre la propiedad padding, resalta el espacio en la parte inferior para que pueda verlo visualmente Los valores en este caso se establecen en píxeles, nueve píxeles en la parte superior e inferior y 15 en los lados. Puede aumentar o disminuir arrastrando los manejadores o ingresando directamente el valor como 100 píxeles Aquí hay una proteína. Si mantiene pulsada o tecla de opción mientras arrastra el asa, automáticamente aplicará el mismo valor en el otro lado. Así arriba e abajo juntas o izquierda y derecha juntas. Y si mantienes turno, entonces aplicará el mismo valor a los cuatro lados al mismo tiempo. De igual manera en el margen, única diferencia es que el espacio está aplicando en el exterior, para que podamos tirar de nuestros elementos donde queramos que lo hagan. Y así de esta manera, podemos agregar espacio extra en cualquiera de los cuatro lados de ese elemento, que luego los empujará de su lugar original. Al igual que en tamaños, tenemos todas las demás unidades además de píxeles, aunque rara vez usaríamos otras unidades para relleno y margen. Las unidades de píxeles suelen ser el camino a seguir. Entonces ese espacio en blanco en la parte superior de la caja azul es en realidad el margen de nuestro rumbo. Al igual que en la parte inferior, Webflow agrega márgenes predeterminados en muchos de los elementos Si algo está actuando de manera extraña, verifique los valores predeterminados en el panel de estilos Suelen contener las pistas. En nuestro caso, apliquemos márgenes y rellenos para que coincidan con nuestros diseños. Ya conocemos estos valores. Dentro de Fig se debe seleccionar el objeto y sostener hacia fuera o tecla de opción y mover el ratón alrededor para ver las distancias entre el selectano y otros objetos Por ejemplo, podemos ver que el contenido está 140 píxeles del borde izquierdo del fotograma, y tenemos 209 píxeles en la parte superior. ¿Cómo se utiliza esta información? Podemos aplicar el mismo relleno a nuestra caja azul. Ahora, dependiendo de la altura del navegador o de la pantalla, es posible que este 290 píxeles no funcione en absoluto. En una altura de navegador más pequeña, estos 290 píxeles son demasiado. La web no es estática como Figma, y necesitamos pensar en valores que respondan Entonces, ¿qué queremos lograr aquí? Queremos que este contenido aparezca más o menos en el centro, ¿no? Independientemente del tamaño de la pantalla, igual que hicimos en nuestros diseños. Si usamos valores de píxel exactos, va a verse muy diferente de una pantalla a otra. En navegadores más cortos, el contenido va a parecer que se está sincronizando en la parte inferior, pero en los navegadores más altos, puede ser muy poco y el contenido podría parecer demasiado en la parte superior Entonces, en su lugar, podemos usar la unidad de altura de ventana de visualización VH. Esto calculará automáticamente el relleno, y si el tamaño de la pantalla se encoge o crece, el relleno se encogerá y crecerá con él A veces necesitará 20 VH, pero a veces algo más. Depende del contenido que tengamos, pero en este caso, algo así. Ahora bien, si encogimos demasiado la pantalla, se puede ver que el contenido se está apretando en la parte inferior. Eso es porque no hemos agregado el acolchado inferior. Cuando la pantalla es grande, está flotando en la parte superior, y hay espacio en la parte inferior porque le dimos a nuestra caja azul un valor de 100 VH, estirándola para llenar toda la pantalla visible. Pero cuando esa pantalla visible es realmente corta, entonces no queda espacio en la parte inferior. Lo mismo que podemos hacer aquí, así podemos agregar el mismo valor exacto de VH al relleno inferior. Esto asegurará que tengamos un buen espaciado tanto en la parte superior como en la inferior, sin importar cómo encojamos o hagamos crecer el navegador. Bien, ahora agreguemos márgenes entre los objetos. Y eliminemos ese margen extra de 20 píxeles que está en la parte superior del encabezado porque se está agregando al relleno ya existente que está en la sección de héroe. Esta disposición de diseño parece que estamos en el camino correcto. Comprobamos la capacidad de respuesta vertical, pero ¿qué pasa si verificamos esto en diferentes anchuras Este relleno izquierdo de 140 píxeles ya no parece una buena idea. Está empujando demasiado el contenido a la derecha. Podríamos arreglar esto y establecer almohadillas individuales para cada tamaño de pantalla o tal vez incluso usar una unidad de respuesta para el acolchado como VW para el ancho de la ventana Pero la forma más común y la mejor manera y la mejor solución para que esto use un contenedor. En nuestros diseños, la mayoría de los elementos se encuentran dentro de los límites de nuestra cuadrícula. Esto nos da un contenedor invisible el cual está centrado en el medio y todos esos elementos están sentados en su interior. Así es como también se presentan la mayoría de los sitios web. Tiene un diseño central y colocan todo dentro este diseño a menos que se trate de imágenes de fondo o algunos elementos únicos. Podemos lograr esto fácilmente agregando un contenedor desde el panel de elementos. Vamos a colocar el contenedor dentro la sección y moveremos el resto de los elementos dentro de ese contenedor. Esto lo hacemos arrastrándolos dentro uno por uno. Esto se puede hacer ya sea en el panel del navegador o en el lienzo. Mismo resultado, ambos funcionan. Mi preferencia habitual es hacerlo en el navegador porque puedo ver mejor lo que está pasando. no necesitamos el relleno izquierdo de Ya no necesitamos el relleno izquierdo de la sección, así podemos deshacernos de eso. Si revisas esto en diferentes pantallas, verás que nuestro contenido está perfectamente centrado justo en el medio. Incluso en pantallas más grandes, y todo eso se debe al contenedor. Déjame darte una idea de lo que pasa sin el contenedor. Sólo voy a darle al contenedor un fondo de colores diferentes para que puedas ver claramente sus límites. Si colocas un montón de párrafos fuera del contenedor, verás que se están estirando de borde a borde. Incluso en las pantallas más grandes, esto no hace un buen diseño. El texto se estira demasiado ancho y eso lo convierte en una mala experiencia de lectura. Pero a medida que mueve los párrafos dentro del contenedor, los obtiene cuidadosamente centrados. Ese es el poder de un contenedor y es el bloque de construcción más básico de cualquier sitio web. El contenedor predeterminado de Weblos es de hecho un buen desbloqueador antiguo al igual que una sección, pero tiene dos estilos predefinidos que lo hacen funcionar como un Primero, márgenes de auto en los laterales. Todo lo que hace es que centra el contenedor en la mitad de la página. Los márgenes de auto funcionan como un resorte que empuja el elemento desde los lados para mantenerlo centrado. Desde un punto de vista técnico, calcula la cantidad de espacio vacío que deja el elemento y llena ese espacio vacío con márgenes. Si eliminas alguno de estos márgenes de auto, entonces el contenedor perderá ese poder de centrado y abrazará uno de los bordes dependiendo del margen automático que elimines Este truco para aplicar márgenes de auto es un buen método para usar cuando necesitas centrar algo. Webflow incluso tiene un pequeño atajo aquí para centrar, lo que hace precisamente eso aplica márgenes de auto en Pero los márgenes de auto no son suficientes para centrar algo. El elemento necesita tener un ancho, y esa es la segunda propiedad que tiene el contenedor. Ancho máximo en este caso. Esto le dice al candado Dv que no se estire más allá de este ancho, pero permite encogerse haciéndolo agradable y receptivo. Sin este ancho, perdemos instantáneamente la calidad de ese contenedor y ahora este elemento se estira de borde a borde al igual que la mayoría de los demás elementos. Todavía tiene márgenes auto en los lados, pero ahora son inútiles porque los márgenes auto llenan el espacio vacío que queda del elemento. Si no hay espacio vacío, entonces no hay espacio que puedan ocupar. Este ancho de contenedor es editable. Dependiendo de un sitio web, posible que lo queramos más estrecho o más ancho Por cierto, el truco Figma de incrementar valores en incrementos de diez funciona en Webflow Mantenga pulsada la tecla Mayús mientras presiona las flechas hacia arriba o hacia abajo para aumentar o disminuir estos valores en incrementos de diez En nuestro caso, el ancho de nuestro contenedor es realmente diferente porque nuestro contenedor es nuestra cuadrícula, que tiene un ancho establecido dentro de Figma y podemos medir el ancho exacto de nuestra cuadrícula dibujando un rectángulo sobre él y verificando el ancho final de ese rectángulo Son 1,160 pixeles. Podemos aplicar este ancho al contenedor dentro de Webflow. Dependiendo de la pantalla que estemos viendo esto, el contenedor estará centrado o abrazando los bordes En mi caso, es este último. ¿Por qué? Porque 1,160 es más que el ancho actual del lienzo, que es de 992 píxeles No hay espacio sobrante para que los márgenes entren en juego. Aunque en pantallas más anchas, el diseño central está ahí. Solucionar el problema en las pantallas que son más estrechas que nuestro contenedor, necesitamos agregar manualmente algo de espacio en los lados Ahora, debido a que ya estamos usando márgenes de auto para nuestra caja contenedora, no podemos agregar valores de margen adicionales ya no podemos agregar valores de margen adicionales, pero podemos hacer otra cosa. Podemos agregar relleno ya sea en el contenedor o en la sección padres. Esto alejará el contenido de los bordes. Ya sea que agregues relleno al contenedor o a la sección padres no importa tanto. Ambas opciones están igualmente bien. Yo personalmente tengo la costumbre de agregar relleno al padre, así que hagámoslo. Esto nos da un diseño centrado que responde y se ajusta muy bien a todas las pantallas. Excepto tal vez en la pantalla más pequeña del móvil, el valor de relleno que establecemos es demasiado alto, así que ajustaríamos y usaríamos algo más pequeño aquí. Pero no vamos a hacer eso ahora mismo. Tengo una sección completa sobre diseño responsive, y vamos a arreglar nuestra página web en todas estas pantallas y dispositivos más pequeños. Déjalos como están por ahora, aunque parezcan rotos. Simplemente trabaje en el punto de interrupción del escritorio base. Es el que tiene el icono de estrella en él. De hecho, tampoco toques estos puntos de interrupción más grandes. No lo necesitamos y si lo agregas, no podrás deshacerte de él después. Hemos cubierto el espaciado en la web. Tenemos relleno que agrega espaciado dentro del elemento, margen que agrega espaciado fuera del elemento, y hemos cubierto un contenedor, que es un bloque de construcción básico de una página web. Centra ordenadamente el contenido de nuestra página en pantallas más grandes. 67. Webflow: tipografía web: Ahora vamos a darle estilo al texto. Los estilos de fuente se aplican desde aquí, lo que está bastante familiarizado. Lo primero que tenemos que hacer es elegir la fuente. Pero a diferencia de Figma aquí, tenemos una selección limitada de fuentes Nuestros tipos de letra, pop ins y Roboto no aparecen en la lista. Esto significa que necesitamos agregar estas fuentes desde la configuración del proyecto. La configuración del proyecto es un lugar diferente al del diseñador, y podemos acceder a configuración de fuentes de este proyecto desde este enlace. O desde el menú Hamburguesa, vaya a la configuración del proyecto y luego vaya debajo de la pestaña de fuentes Webflow nos da tres opciones para agregar fones. Primero, Google Phones, que enumera todos los teléfonos de Google y para agregarlos, tenemos que seleccionarlos y luego agregarlos uno por uno. No podemos agregarlos todos al mismo tiempo. También, teléfonos Adobe o typekit de manera similar. Esto, como mencioné en la lección de tipografía necesita una suscripción a Creative Cloud de Adobe Una vez que tengas esa suscripción, entonces puedes conectarla con tu cuenta en Webflow, y luego puedes sacar fuentes desde allí Como podemos agregar manualmente teléfonos personalizados con solo subirlos. En nuestro caso, necesitamos teléfonos de Google, así que solo vamos a encontrar pop ins. Y una vez que los encuentres, lo seleccionas, y se te preguntará qué variantes quieres incluir. Estos números son pesos de fuente. CSS utiliza valores numéricos para representar diferentes pesos de fuente en lugar de nombrar. Y así es como se mapea comúnmente. Vas a tener que hacer coincidir manualmente cada peso de fuente con uno de estos números. Para encontrar este gráfico, solo puede Google CSS pesos de fuente. O también puedes verificar tu fuente específica dentro de las fuentes de Google y ver cómo los números y nombres se mapean entre sí. Vamos a comprobar qué otros pesos telefónicos estamos usando. Entonces tenemos 600, 500 y normal para pop ins, y tenemos normal y 500 para Roboto Podríamos, por supuesto, agregar toda la variación de peso, pero es una buena práctica no agregarlos para agregarlos porque Webflow tiene que luego cargarlos y algo así subir estas fuentes al sitio web, y esto va a agregar tiempo extra a la carga de la página cursivas son versiones separadas para cada peso, como puedes ver, no hemos usado ninguna cursiva en nuestro diseño, pero aún debemos editar para pesos regulares y negrita Y luego, muestra aquí qué fuentes y estilos de fuente hemos agregado a nuestro proyecto. Ahora, lo mismo para Roboto. Incluyamos también negrita 700. Es un peso importante para el texto del párrafo, aunque aún no lo hayamos usado. En caso de que aún tuvieras al diseñador abierto, no va a mostrar los nuevos teléfonos de inmediato, así que actualice al diseñador. Y ahí ahora tenemos pop ins y Roboto adentro. Verás que los pesos que hemos agregado están dentro y habilitan, pero los que no hemos agregado están deshabilitados. Bien, así que vamos a darle estilo a nuestro texto. Sema build era nuestro rumbo, regular para el párrafo y medio para el botón Ahora para los tamaños y alturas de línea. El tamaño del teléfono para nuestro encabezado es de 75 píxeles. Webflow no ajusta automáticamente altura de línea a los valores predeterminados Hereda valores de los elementos padre, así que tenemos que terminarlo manualmente Y ahora podemos hacer lo mismo para el párrafo y el texto del botón. Cuando la altura de línea se establece en auto, puede encontrar el valor de píxel real haciendo clic dentro del campo, y eso revelará la altura de línea actual. O simplemente puedes editar ligeramente el valor presionando hacia arriba o hacia abajo con tu tecla de flecha y eso lo cambiará a los valores de píxel. Cambiemos los colores. Esto es bastante sencillo. Solo asegúrate de no confundir estos dos colores. Uno es el color del teléfono y abajo hay un color de fondo. Queremos cambiar el color en la sección de tipografía, pero el color de fondo para el botón Webflow no toma unidad porcentual para el espaciado entre letras, pero ¿adivina qué? Sólo podemos hacer los cálculos. El porcentaje es relativo al tamaño de la fuente. Por lo que es negativo al porcentaje del tamaño de fuente que es de 75 píxeles, hace que el espaciado entre letras sea negativo de 1.5 píxeles. Por cierto, lo mismo va para la altura de la línea. El valor porcentual es relativo al tamaño de fuente. 100% de altura de línea sería exactamente el mismo que el tamaño de fuente, y el 200% sería el doble del tamaño de fuente También puedes hacer las matemáticas inversas y convertir la altura de línea de píxeles a porcentaje. Espero que hayas prestado atención en tu clase de matemáticas. Y esos son nuestros controles tipográficos. Hay otras cosas que podemos hacer con la tipografía, pero las dejaremos para después Entonces, para recapitular, agregar fuentes a proyectos de Webflow ocurre desde la configuración del proyecto Podemos agregar fácilmente teléfonos de Google directamente desde el menú desplegable. Tenemos que elegir los pesos de fuente específicos que necesitamos. Estos pesos de fuente están representados en números que podemos buscar en línea o encontrar dentro de Figma bajo el código Tab Entonces tenemos alturas de línea que podemos tomar el valor exacto de las alturas de línea nuevamente desde la pestaña de código. 68. Webflow: botones y enlaces: Este video, vamos a cubrir botones y enlaces. Encontrarás dos tipos de botones en el panel Elementos. Y también encontrarás dos tipos de enlaces. Esta dualidad me confundió un poco al principio y me costó entender cuál usar y dónde, aclaremos por qué hay dos enlaces y dos botones Empecemos con enlaces. Link Block es un bloque diario regular excepto que se puede vincular. Puedes poner cualquier cosa dentro del bloque de enlaces y se podrá hacer clic en todo el asunto El enlace de texto por otro lado es solo que un enlace de texto. No se puede poner nada dentro de él. Para vincular los enlaces, seleccionamos el enlace y damos clic en la puñalada de ajuste Aquí es donde podemos actualizar la configuración de los enlaces. El primero es URL, donde podemos escribir el destino exacto. A continuación, tenemos páginas. Aquí es donde podemos enlazar a otras páginas de nuestro sitio web, y esta es exactamente la opción que usaríamos si estos enlaces no fueran falsos y en realidad tuviéramos otras páginas. Ahora mismo, sólo muestra una página, home, ahí es donde estamos. A continuación, tenemos una sección de página. Esto es cuando enlaza a una sección específica en la misma página o incluso en otra página. Ahora mismo está vacío. una cosa extra que tenemos que hacer para poder vincularnos a una sección. Llegaremos a eso en algún momento. Y los dos últimos son enlaces de correo electrónico y teléfono para direcciones de correo electrónico y números de teléfono. enlace de correo electrónico abrirá un cliente de correo electrónico predeterminado que el usuario haya configurado en su computadora, por ejemplo, como Outlook o Gmail, y abrirá la nueva ventana de correo con dirección de correo electrónico y línea de asunto rellenada previamente con los valores que hemos puesto ahí En mi caso, abrió una ventana GML porque eso es lo que he configurado como mi cliente de correo electrónico predeterminado en mi computadora El número de teléfono es para dispositivos móviles, por lo que la persona que mira el sitio en su dispositivo móvil puede hacer clic un enlace directamente para llamar en un enlace directamente para llamar sin necesidad de copiar y escribir los dígitos. En una computadora, esto es en su mayoría inútil. Recibirás el mensaje de error a veces. Ahora para los botones, tenemos dos tipos, un botón regular y un botón Formulario. El botón de formulario puede ser de estilo igual que un botón normal, pero está vinculado solo al formulario y envía el formulario cuando se hace clic El botón regular por otro lado funciona igual que un enlace de texto. Tiene la misma configuración de enlace, y al igual que un enlace de texto, no podemos colocar otros elementos dentro. Esto significa que puedes crear botones a partir de enlaces de texto. También puedes crear botones a partir de Bloques de enlace, y si quieres crear un botón que tenga un icono dentro o una línea extra de texto, entonces los bloques de enlace son exactamente lo que necesitarás usar. Si alguna vez te encuentras perdido lo que hace cada elemento, usa una ventana emergente de más información del panel de elementos. Cada elemento tiene un pequeño signo de interrogación en la parte superior. Haga clic en él para obtener una explicación rápida de lo que hace este elemento. Así que volvamos a nuestro botón, editemos la forma del botón. Nuestro botón en Figma tiene un tamaño específico. Tiene 168 píxeles de ancho y 50 píxeles de alto. Podemos usar estos valores exactos, pero verás que usar el ancho exacto no es una buena idea. Primero, intentemos centrar el texto dentro de nuestro botón. ¿Cómo lo hacemos? La alineación vertical es bastante simple. Simplemente podemos usar la opción de alineación de texto y centrarlo. Pero para la alineación horizontal, tenemos que usar relleno para poder empujar el texto hasta que se vea centrado. Ahora bien, aquí hay una razón por la que establecer un ancho exacto es una mala idea. Si en algún momento decidimos cambiar el texto y es algo más largo, ese botón no se ajusta y el texto tiene que desbordarse. Una mejor manera es volver a utilizar el valor de pedaleo. Podemos tomar ese valor de relleno directamente de nuestros diseños. El espaciado a la izquierda y a la derecha es de 48 píxeles. Podemos usar estos valores para nuestro pedaleo de botones. Retira el ancho y agrega relleno de 48 píxeles en ambos lados. Esto hará que nuestro botón no sea fijo y se adaptará al tamaño del texto Y por último, las esquinas redondeadas. Esto se puede cambiar dentro la sección fronteriza bajo la opción de radios. Al igual que hicimos en Figma, solo podemos aumentar esto hasta que botón se redondea por completo Entonces, para recapitular, tenemos dos botones, regular y botón Formulario botón Formulario solo se puede usar dentro de un formulario, y el botón regular se usa para enlazar a otras páginas, acciones en la página, correo electrónico, enlaces, enlaces telefónicos, etcétera Tenemos dos tipos de enlaces, enlaces de texto y bloques de enlaces. Los bloques de enlace son como bloques DIV, cajas vacías que pueden anidar muchos otros elementos en su interior, incluso otros DVBlogs, pero pueden actuar como un enlace normal En cuanto a los enlaces de texto, no pueden anidar nada dentro y funcionan igual que el texto normal. 69. Webflow: clases de CSS: Ahora agreguemos nuestro segundo botón. Para ahorrar tiempo en el estilo, podemos duplicar nuestro botón blanco existente. Puede hacer clic derecho y luego duplicar o usar un Control C, Control V, atajo regular o Comando C, Comando V para Mac. Cuando hagas esto, pasarán dos cosas graciosas que no esperas. Primero, en lugar de pegarlo debajo como se comportan la mayoría de los demás elementos, se coloca junto a él. Este comportamiento ocurre debido a un estilo de visualización predeterminado que se aplica a los botones. Cubriremos esto en la próxima lección. En esta lección, vamos a cubrir el segundo comportamiento gracioso. Cuando tratamos de hacer alguna edición a nuestro segundo botón, todo se está aplicando al botón original. Esto no es un bicho. Por el contrario, es probablemente la característica más poderosa de CSS y una de las razones por las CSS se creó en primer lugar. Esta entidad se llama clase. Podemos tener este botón en 100 lugares diferentes en nuestro sitio web, y cambiando una instancia, podemos cambiar cada botón con la misma clase. Dentro de Webflow, esta clase se gestiona desde aquí, un lugar llamado selector Selector significa lo que dice. Selecciona una clase específica. Hay otras cosas que podemos seleccionar además de clases como una etiqueta, pero más sobre eso más adelante cuando lo necesitemos. Cuadrado azul diciendo botón es nuestra clase. Si seleccionas el botón original, verás que tiene la misma clase. Es por ello que las mismas propiedades CSS se aplican a ambas. Pero si eliminamos esta clase del botón, entonces vamos a perder todos los cambios que le hicimos y volver a la configuración predeterminada o propiedades predeterminadas. Pero no te preocupes, podemos volver a seleccionar la clase, e instantáneamente, todas las propiedades volverán. Cuando esté buscando una clase existente, simplemente comience a escribir y Webflow filtrará los resultados de búsqueda Si la clase ya existe, entonces la verás aquí y podrás seleccionarla. Si no existe, entonces puedes crear una nueva clase tú mismo y nombrarla como quieras. Aplicar la clase recién creada no le hará nada a nuestro botón porque esa clase no tiene propiedades CSS aplicadas a ellos. En una clase recién creada, podemos aplicar nuevos estilos, y no afectará al botón original. Las clases son removibles y se pueden aplicar a cualquier cosa. Por ejemplo, tomamos mi clase de botón bonito y aplicamos al botón original. Las clases también pueden ser duplicadas o renombradas. Eso se puede hacer desde este minúsculo desplegable. Simplemente renombrar y presionar Enter. Duplicar una clase es una buena manera de ahorrar tiempo. Nuestro botón Ghost tiene muchas propiedades iguales que nuestro botón principal, por lo que podemos duplicar esas propiedades y crear una nueva clase a partir de él. Y ahora podemos nombrarlo como queramos. Tenemos dos botones con las mismas propiedades, pero diferentes clases. Entonces cuando editamos uno, los cambios no afectarán al otro. O cualquier cambio que tengamos que hacer al elemento, tenemos que darle una clase. No hemos estado haciendo esto hasta ahora porque Webflow realmente lo hace automáticamente por nosotros. Si seleccionas algún elemento que ya hayamos editado, verás que tiene algún tipo de clase aplicada a él. Si dejas caer un nuevo elemento, ellos no lo hacen. El selector está vacío. En el momento en que le des estilo a un elemento, Webflow generará automáticamente un nombre de clase para nosotros. No se puede aplicar estilo a un elemento sin tener una clase aplicada a él. Cuando mires el navegador, verás que los elementos se nombran acuerdo a sus clases. Cambiemos el nombre de nuestro bloque div que contiene todo nuestro contenido. Nuestra caja azul en realidad es una sección de héroe que guarda todo dentro de esta sección. Entonces, vamos a darle un poco de respeto y nombrarle un nombre más apropiado como sección de héroe. Bien, volvamos a nuestro botón Fantasma. Ahora que tenemos una clase diferente, podemos estilizarla como queramos. El botón Ghost está hecho del mismo material, pero el relleno de fondo es transparente y en su lugar tiene bordes. También puedes hacer esto disminuyendo el deslizador de opacidad, mismo resultado Ha sido completamente fantasma fuera de la página, pero el texto sigue ahí Es invisible porque es del mismo color que nuestro fondo. Cambiemos el texto a blanco. Y ahora agreguemos fronteras. Esto lo podemos hacer directamente bajo sección fronteriza. Dice cero píxeles. Si lo aumentamos a un píxel, el borde se mostrará, y luego podemos cambiar de color a blanco. Parece complicado al principio, pero es bastante sencillo. El estilo muestra qué tipo de borde queremos usar, línea continua, guiones o puntos Y esas plazas muestran de qué lado estamos agregando el borde. este momento, se selecciona el cuadrado medio, lo que significa que estamos sumando los cuatro lados. Si seleccionamos el cuadrado superior, solo podremos editar el borde superior. Por último, necesitamos agregar algo de espacio entre dos botones. ¿Qué opinas que deberíamos usar márgenes o relleno? Pregunta engañosa. No podemos usar relleno. El relleno solo agrega espacio dentro de la caja. Mida el espacio en Figma. Usamos un espacio de 30 píxeles, por lo que necesitamos agregar el margen izquierdo de 30 píxeles en el botón Fantasma o el margen derecho de 30 píxeles en el primer botón. Bien, las cosas se ven limpias. Entonces, para recapitular en esta lección, aprendimos a usar clases CSS, que en Webflow se administra a través del panel Estilos Aprendemos a crear nuevas clases, cómo Webflow crea automáticamente clases para nosotros y cómo duplicar clases, que podamos reutilizar los elementos existentes en nuestra página 70. Webflow: imágenes: Este video, vamos a agregar nuestra imagen de héroe a nuestra página. Aprenderemos a exportar imágenes de Figma a importarlas dentro de Webflow y a trabajar con imágenes en Primero, exportemos nuestro tiro de héroe de Figma. En Figma, hicimos este héroe gráfico con varios elementos diferentes Podríamos exportarlos como imágenes independientes, pero eso sería un trabajo innecesario y bastante tedioso de recrear en Webflow En cambio, vamos a exportarlo como una sola imagen. De esta manera se ahorrará tiempo y se asegurará de que se vea exactamente como lo diseñamos. Para exportar cualquier cosa de Figma, seleccione el elemento, y en el panel de propiedades, haga clic en el icono más bajo la sección Exportar Y para exportar varios elementos diferentes como una sola imagen, hay que agruparlos primero. Seleccione todo, haga clic con el botón derecho y presione selección de grupo o use el atajo. Luego seleccione ese grupo recién creado y presione ese ícono más en la configuración de exportación. Repasemos por estos diferentes ajustes de exportación. Las resoluciones de pantalla han mejorado significativamente a lo largo de los años. Tablets, smartphones, laptops premium más recientes como MacBook, utilizan pantallas de alto DPI, también conocido como pantalla retina. DPI alto significa puntos altos por pulgada, y generalmente tienen el doble de densidad de píxeles que las pantallas comunes de computadoras portátiles y de escritorio. Esto hace que las cosas se vean mucho más nítidas y nítidas, lo que no tienes esos bordes pixelados en texto más pequeño o en los bordes de la Para optimizar nuestras imágenes para este tipo de pantallas, esto se denomina comúnmente optimización de retina. Necesitamos duplicar nuestro tamaño real de imagen. Entonces de esta opción desplegable, seleccionaríamos dos X. Y tenemos varios formatos de archivo. formato de imagen ideal para la web es SVG porque están basados en vectores, tienen tamaños de archivo más pequeños y pueden ampliarse infinitamente sin perder calidad Pero desafortunadamente, no trabajan en imágenes que tengan fotografía en su interior. Básicamente, cualquier cosa que esté basada en píxeles. No voy a entrar en la explicación de cuál es la diferencia entre las imágenes basadas en píxeles y las basadas en vectores. En resumen, los formatos de archivo PNG y JPG están basados en píxeles y los SVG están basados en vectores Ya que estamos usando fotografía, tenemos que exportar ya sea PNG o JPG. PNG y JPG o JPAC tienen dos diferencias principales entre ellos. Primero está el tamaño. Las imágenes JPEG suelen ser más pequeñas que las imágenes PNG o debido a la mayor compresión, pero las imágenes JAC pueden tener fondos transparentes. Los PNGs pueden Entonces en nuestro caso, o tenemos que exportar un PNG o un JPAC e incluir el fondo azul en él Si no incluimos ese fondo azul, automáticamente llenará el espacio con blanco, y eso no va a funcionar para nuestra imagen. Idealmente, iríamos con el JPAC porque el tamaño del archivo es más pequeño y eso realmente importa ¿Por qué? Porque a nadie le gusta un sitio web lento. Y las imágenes con grandes tamaños de archivo son una forma de ralentizar el tiempo de carga de un sitio web. Pero si vamos con el CCPC entonces tenemos que incluir un fondo azul, y eso puede tener algunos temas A veces los colores de las imágenes exportadas no coinciden con los colores web al 100%. Y necesitamos ese fondo azul para que coincida al 100% con el azul de la sección en Webflow Si no van a tener una transición suave, y los bordes de la imagen serán visibles. Ya he probado esto en esta imagen, y tristemente, no coincidió. Los colores blanco y negro son fáciles. Siempre coinciden, pero otros colores no tanto. Entonces nos quedamos con una sola opción, que es PNG. Exportemos. Bien, importemos nuestro PNG a Webflow. Al igual que con cualquier cosa en Webflow, agregamos nuevos elementos desde el panel Elementos Deja caer la imagen en cualquier lugar por ahora. Vamos a estructurar la maquetación más adelante. Para subir una imagen, haga doble clic en la imagen o haga clic en el engranaje de configuración aquí. Se abrirá el panel Activos. El panel de activos es donde Webflow guarda todas las imágenes y documentos que subes a tu sitio web ¿Recuerdas cómo exportamos esta imagen como dos X el tamaño? Podemos decirle a Webflow que esta imagen es el doble del tamaño y está hecha para DPI altos Esto lo encogerá a la mitad del tamaño, tal como lo tenemos en nuestros diseños. Siempre que subas un archivo de imagen muy grande, Webflow te dará una señal de advertencia aquí porque los archivos de imagen grandes hacen que tu sitio cargue lentamente El archivo de imagen en este momento es de más de 1 megabyte, y eso es bastante grande Para los usuarios con Internet más lento, incluso podría tomar unos segundos para que la imagen se cargue, y hasta entonces estarán mirando una pantalla vacía Por suerte, podemos hacer que este tamaño de archivo sea mucho más pequeño usando la herramienta de compresión Simage de WebFlow Ve al Panel de Acceso, coloca el cursor sobre la imagen y haz clic en el menú desplegable Más opciones Luego haz clic en Comprimir. Obtén un par de formatos de archivo a los que puedes convertir. AVF hará un trabajo bastante bueno en la mayoría de los casos, y puedes dejarlo así Reduce el tamaño del archivo mejor que la web P. Sin embargo, dependiendo de la imagen en raras ocasiones, AVF podría dañar la calidad Entonces, si notas que la calidad está bastante apagada, entonces prueba con la opción web P. Pero vas a tener que rehacer el proceso, eliminar la imagen, subirla nuevamente y luego elegir el nuevo formato de archivo. Vuelva a hacer clic en Comprimir. Tomará algún tiempo y recibirás esta notificación de que la imagen ha sido comprimida y convertida a un nuevo formato de archivo. Se puede ver cuánto se ha reducido el tamaño del archivo. Pasó de más de 1 megabyte a menos de 70 kilobytes. Este proceso de compresión, lo vas a hacer con cada imagen a menos que ya sean muy pequeñas, como menos de 100 kilobytes Pero no tienes que hacerlo una por una, una vez que tengas todas tus imágenes ahí dentro, entonces puedes expandir el panel Activos y seleccionar varias imágenes para comprimirlas todas de una sola vez. Entonces, para otras imágenes, solo esperaremos hasta que terminemos con el sitio y las comprimiremos todas antes de publicar el sitio. Eso es todo por ahora. Vamos a arreglar la imagen en la siguiente lección. Así que vamos a recapitular. Para agregar imágenes a Webflow, primero tenemos que exportarlas desde Figma usando la configuración de exportación Las imágenes que se hacen a partir de varios objetos diferentes deben agruparse primero. Agregar imágenes en Webflow ocurre agregando primero el elemento de imagen al lienzo y luego cargando una imagen a través del panel Assets Para mantener nuestro sitio web rápido, debemos ser conscientes del tamaño de nuestro archivo de imagen 71. Webflow: mostrar propiedades: Bien, entonces, ¿cómo traemos esa imagen del lado derecho? No podemos simplemente arrastrarlo como lo hacemos en Figma. Tampoco podemos alinearlo a la derecha. Recuerda lo que te dije antes, si estás atascado y tratando de averiguar cómo hacer que las cosas funcionen en Webflow, la pista es probablemente otra caja Echemos un vistazo a nuestro diseño. Tenemos una sección de héroes. En el interior, tenemos un contenedor que contiene todo el contenido. En este contenedor, tenemos elementos que queremos exponer a la izquierda y una imagen que queremos exponer a la derecha. Entonces tenemos que dividir de alguna manera este contenedor en dos mitades, mitad izquierda y la mitad derecha y hacer que se sienten uno al lado del otro. Podemos hacer eso usando div block. Podemos poner dos bloques div dentro este contenedor y luego poner el contenido en consecuencia. Tenga cuidado con Webflow dejará nuevos elementos dentro de su selección. Después de agregar un nuevo bloque div, seleccionó ese nuevo, y el segundo bloque div se dejó caer dentro de él. Simplemente arrástralo desde este panel del navegador. Ahora, arrastre la imagen en un bloque div y todo lo demás en el otro bloque div. Y vamos a nombrar estos bloques de día en consecuencia, izquierda y derecha. Ahí. Ahora, la estructura va por buen camino. Ahora tenemos que averiguar cómo hacer que se sientan uno al lado del otro en lugar de uno encima del otro. Hay varias formas en las que podemos hacer esto de la mejor manera. La mejor y más aceptada forma de organizar esto sería la característica CSS llamada flexbox, que puede aplicar en la configuración de visualización Repasemos cada una de estas configuraciones de pantalla y veamos cómo se comportan. Por defecto, la mayoría de los elementos vienen con ajustes de pantalla establecidos para bloquear. Elementos de bloque, se estiran de borde a borde, y no se puede colocar nada junto a ellos. Empujarán el siguiente elemento a la segunda línea. Lo harán aunque fijemos un ancho menor y haya espacio para otros elementos en esa misma línea. A continuación, tenemos bloque inline. Los elementos de bloque en línea son tan amplios como el contenido interior. Liberan espacio sobrante, que puede ser ocupado por otros elementos Recuerde que el comportamiento cuando duplicamos el botón en una lección pasada, botones en Webflow por defecto se configuran en bloque en línea Sólo ocupan espacio de su contenido. Entonces, si pones dos bloques en línea juntos y hay espacio, ellos se sentarán uno al lado del otro. Aquí, si configuramos display a inline block, no pasa nada porque el contenido en este caso, es un texto de flujo libre que hará que el cuadro sea lo más ancho posible. Pero si borramos algunos de estos textos, entonces veremos que ese cuadro delimitador se encoge con él Sin embargo, en un elemento de bloque uno debajo de él, eso no sucede. Incluso si eliminamos el texto, el cuadro delimitador todavía ocupa todo el ancho de su padre Ahora, dije que los elementos de bloque inline liberan un espacio para otros elementos junto a él. Entonces, ¿cómo es que el segundo párrafo no saltó arriba? Porque el segundo párrafo está configurado para bloquear, y los elementos de bloque son codiciosos y quieren ocupar un piso entero solo para ellos mismos Pero si establecemos el segundo párrafo en bloque en línea también, todavía no sube. ¿Por qué? Ellos quieren, pero no hay suficiente espacio para ambos. Si cortamos el texto corto en uno de ellos, entonces va a haber suficiente espacio, y el segundo bloque se moverá al piso de arriba. Además, esto sucederá si encoge manualmente el ancho de uno de ellos aplicando un ancho fijo. La tercera configuración de la pantalla está en línea, sin bloque. Inline es cómo se comporta el texto dentro de cualquier elemento. Fluye igual que textos, uno al lado del otro. No tiene valores de ancho y tamaño. Los ignorará aunque lo pongas. No hay mucho uso para visualización en línea fuera del texto, así que eso es en línea. Entonces tenemos display none, que oculta el elemento. No solo es invisible, sino que tampoco afecta el diseño. No es transparente. Sólo le estamos diciendo al navegador que no lo renderice y lo ignore por completo. Aunque no desaparece completamente de nuestro sitio web, sigue en el panel de navegación. Si fuera transparente, seguiría ocupando el espacio. Quizás te preguntes de qué utilidad podría haber para exhibir ninguno, pero hay muchos y llegaremos a ellos. Eso es mostrar ninguno. Entonces tenemos display grid. CSS grid hace algo que antes no era posible. Tener un arreglo similar a una mesa donde puedas mover elementos a tu gusto con mucha flexibilidad con la capacidad tener un layout completamente diferente entre diferentes dispositivos. No vamos a estar pasando por entresijos de grid en este momento porque no lo vamos a necesitar tanto. En su lugar, usaremos el diseño flexible, que cubriremos en el siguiente video. 72. Webflow: caja flexible: Continuando donde lo dejamos en este video, discutiremos flexbox y cómo aplicarlo a nuestro diseño de sección héroe Flexbox es una forma de organizar y distribuir contenido dentro de esa caja. Los ajustes de flex afectan solo a los hijos de ese Bloque D y no al propio desbloqueo Entonces en nuestro caso, esos párrafos, el contenedor en sí no se ve afectado En el momento en que seleccione el diseño flexible, se mostrarán las nuevas opciones. Es así como distribuimos a los niños dentro del flexbox. Permítanme demostrar cómo flexbox puede distribuir su elemento hijos Podemos alinear los elementos dentro del flexbox usando esta caja de alineación. Los controles son bastante intuitivos. Es una cuadrícula de tres por tres que representa el flexbox. Tenemos tres opciones para la alineación superior, izquierda, centro y derecha. Tenemos tres opciones para la alineación inferior, izquierda, centro y derecha, y tenemos tres opciones para la alineación central. Las alineaciones básicas son súper simples porque son intuitivas El cuadro de líneas te da una representación visual de lo que sucederá. Las opciones no tan intuitivas se esconden debajo de estos dos menús desplegables. Para la alineación del eje Y, tenemos dos opciones más, stretch y baseline. El estiramiento es exactamente lo que dice. Estira los niños flexibles para llenar todo el espacio vertical del flexbox Si aumentas o disminuyes la altura del flexbox, las cajas se encogerán y crecerán con él. Esta es en realidad la configuración de alineación predeterminada de flexbox. Puedes ver esto cuando restablezco los ajustes alineados desde aquí. Está configurado a la izquierda y se estira y al hacer clic en cualquier lugar ese cuadro de alineación se eliminará el ajuste de estiramiento y le permitirá alinear elementos sin el estiramiento. La alineación de línea base tiene que ver con un texto. Es una línea invisible en la que se alinean los personajes. No creo que alguna vez haya tenido necesidad de esta alineación, así que puedes ignorarla en su mayor parte. Debajo del desplegable del eje X, tenemos dos opciones más, espacio entre y espacio alrededor. Estas son opciones de distribución en Figma. Distribuye a los niños de manera uniforme. Primera opción, el espacio entre hace que el primer y último hijo alinee con los bordes del flexbox Bueno, en mi caso, no es exactamente al ras porque tengo relleno y margen aplicado a los elementos. Si me deshago de esos, entonces será al ras. El espacio de la segunda opción alrededor es ligeramente diferente. Todavía distribuye a los niños de manera uniforme, pero lo hace agregando espaciado uniforme en los lados de cada niño, incluso en el primer y último hijo. La primera opción es mucho más útil y práctica. Éste, no tanto. Rara vez necesito usarlo, así que solo puedes enfocarte en entender el espacio entre opción. Por cierto, estos desplegables X e Y son los controles reales del flexbox El cuadro de línea es solo una guía visual. menú desplegable X le permite controlar cómo desea alinear y distribuir hijos en el eje X. Eso es un eje horizontal y lo mismo para el eje Y, que es el eje vertical. El cuadro de alineación se bloquea a un modo diferente si selecciona estirar o espacio entre opciones como ahora mismo porque tengo espacio alrededor seleccionado. La caja de alineación solo me permite cambiar la alineación en el eje Y. Para volver a la normalidad, simplemente puede devolver la alineación X a una de las alineaciones estándar Lo mismo va para el tramo. Solo te deja con opciones de alineación horizontal en este caso. Simplemente retire el estiramiento cambiando de nuevo a alguna otra alineación estándar y la caja de alineación volverá a actuar de manera normal. Por defecto, los hijos se distribuyen en una dirección horizontal, de izquierda a derecha, pero tenemos la opción de cambiar la dirección a vertical como cabría esperar, funcionan de la misma manera, solo dirección diferente. Pero una cosa notarás que la alineación no cambia en el eje Y. Arriba, centro e inferior nos dan el mismo resultado. Eso es porque no hay espacio extra dentro del flexbox. Los niños están llenando toda la altura disponible. La altura mínima que le di al flexbox no deja espacio extra Las alturas de los niños juntas es más que eso. El flexbox en realidad termina estirándose con los niños Pero si aumento la altura del flexbox a algo que deja más espacio vacío, entonces verás que la caja de alineación funciona tal como se esperaba Lo que me encanta del diseño web es que es como un rompecabezas. Las cosas suelen actuar de manera desordenada y estás tratando averiguar por qué y encontrar una solución a tu problema Bastante satisfactorio cuando resuelves el rompecabezas, pero un rascador de cabeza grande cuando estás mirando la pantalla, tratando de averiguar qué demonios está pasando Bien, presta atención a una cosa. Con una dirección vertical, el espacio entre y las opciones de estiramiento ahora han cambiado de lugar. El estiramiento ahora está bajo alineación X, y el espacio entre ellos está bajo alineación Y. Por cierto, si alguna vez estás confundido sobre lo que significan cada una de estas opciones, simplemente pasa el cursor sobre ella y lee el texto explicativo debajo Eso te dará alguna idea. Además, otra opción es encontrar explicaciones en la documentación de Webflows Lo que suelo hacer es que Google Webflow ayude en nombre de una configuración Por lo general, el resultado superior va a ser la página sobre esa configuración o una página que contiene una explicación sobre esa configuración en algún lugar en el fondo, que solo puedes encontrar buscando dentro de la página por Control F. Por defecto, los hijos de lino intentarán encajar en una sola línea desbordando el padre flexible si es necesario Por suerte, flexbox tiene otra configuración que nos ayuda a gestionar este tipo de escenarios Se llama wrap y lo puedes encontrar debajo de este desplegable. Envolver básicamente les dice a los niños que salten a la siguiente línea si no hay suficiente espacio. Tenemos muchas opciones diferentes aquí, pero generalmente solo hay una que vas a necesitar en función de tu dirección. Como estamos usando una dirección horizontal y los ítems se distribuyen de izquierda a derecha, entonces tendríamos que elegir una de las opciones del grupo de izquierda a derecha. Y la mejor manera de saber cuál necesitas es realidad mirar el ícono en lugar del nombre. El icono de flecha te da una mejor representación de lo que va a pasar con los niños. En el caso del primero, los niños comenzarán desde arriba, izquierda, y seguirán un patrón Z distribuyendo hacia abajo y hacia la derecha. Puedes ver esta acción a medida que le agrego más elementos. En el caso de la segunda opción, comenzarán desde abajo y distribuirán hacia arriba y hacia la derecha, como una Z inversa. Obviamente, la primera opción va a ser más utilizada, pero en casos específicos, es va a ser más utilizada, pero en casos específicos, posible que deba invertir la dirección Ahora bien, si tenemos una dirección vertical, entonces estaremos mirando el envoltorio de arriba a abajo. Pero no pasa nada. ¿Por qué es eso? Porque no hay necesidad de envolver. envoltorio solo funciona si hay una necesidad empujar elementos a la siguiente columna o a la siguiente fila. Como nuestro flexbox no tiene una altura fija, entonces simplemente sigue expandiéndose en altura, por lo que la necesidad de envolver nunca surge Pero si le damos alguna altura más allá de la cual no se le permite crecer, entonces los niños comenzarán a envolverse. Sin envolver, esto sucedería. Simplemente se desbordarán fuera de la caja flexible. Para ser honesto, estas opciones de envoltorio pueden ser muy confusas, así que no te sientas mal si no puedes envolverlo. La mejor manera de encontrar el resultado que necesitas es solo jugar, seleccionarlos todos, y una de las opciones debería ser. Eso es lo que suelo hacer. Dentro del menú desplegable de dirección, con todas las opciones de envoltura, verás dos opciones que no dicen wrap, una sola fila y una sola columna Estas dos opciones simplemente invierten la dirección de nuestros niños flex. En lugar de dirección de izquierda a derecha, podemos cambiar de derecha a izquierda. Y la segunda opción nos da la posibilidad de invertir dirección verticalmente. Si haces clic en una de las casillas, verás en el panel Propiedades opciones especiales para el Flex Child. Esto nos da aún más control de grano fino sobre artículos individuales dentro de la caja flexible Pero no nos preocupemos por las opciones flexhild por ahora. Flexbox puede ser un puñado de entender de una sola vez. Así que no te preocupes si te sientes un poco confundido o no entendiendo exactamente o no siguiendo todas las opciones de diseño que he cubierto en este momento. Una vez que empieces a construir y a jugar con él, lo dominarás . En una de las tareas, después de esto, he puesto un juego flexbox, que es una especie de juego de rompecabezas construido dentro de Webflow por el equipo de Webflow, y es un gran ejercicio de flexbox y una excelente manera de practicar flexbox y diferentes flexbox Volvamos a nuestra sección de héroes y veamos cómo podemos usar flexbox En nuestro caso, es bastante sencillo, en realidad. Apenas tenemos dos cuadras, izquierda y derecha. Podemos aplicar el diseño flexible al contenedor. Pero recuerda, hacemos que este contenedor sea un contenedor estándar a lo largo de nuestra página, incluso para artículos no flexibles, así que no queremos meternos con él. Simplemente podemos agregar, Sí, lo adivinaste, otra caja Suelta esos bloques izquierdo y derecho dentro y aplica un diseño flexible a eso. Está en sentido contrario. Por supuesto, podemos revertir esto usando la opción flexbox, pero en su lugar debemos organizarlos correctamente dentro del navegador Sólo tienes que arrastrar uno encima del otro. Ahora tenemos nuestra opción flex para que podamos alinear estos bloques como queramos. La dirección horizontal es exactamente lo queremos, así que la mantenemos ahí, y luego centrar la alineación y empujarlos hacia los bordes va a verse justo en el lugar. En Figma, tenemos contenido sentándonos un poco más alto. Podemos lograr esto agregando un margen inferior en el bloque izquierdo. Esto empujará el contenido hacia arriba. Comprobemos esto en una pantalla más pequeña. Hay dos cosas que necesitan un poco de estilo. Primero, el contenido de la izquierda es un poco desordenado. Los botones se jodieron todos. Eso es porque no hay suficiente espacio en una línea y el segundo botón salta por debajo. Podemos arreglar esto fácilmente dando el ancho mínimo del bloque izquierdo. Entonces no va a encogerse hasta un punto en el que esto tenga que suceder. 400 píxeles parece una buena idea. Ahora bien, el bloque izquierdo no se encoge más allá de ese punto. Y si no hay suficiente espacio, la imagen va a recibir el golpe. segundo bit es que están un poco demasiado cerca el uno del otro. Podemos agregar un margen extra al bloque izquierdo para que empuje la imagen lejos. Eso se ve bastante bien. Las pantallas de tablets y móviles son un poco más desordenadas, pero nosotros nos encargaremos de las de las lecciones de optimización móvil Bien, esto parece justo como queremos que sea. Sí, la imagen tiene dimensiones un poco diferentes en comparación con el diseño Figma, pero eso se espera Estamos haciendo que las cosas respondan para que se encoja y se ajuste a los tamaños de pantalla. Entonces, para recapitular, flexbox es lo que dice, caja flexible. Puede distribuir elementos hijos ya sea en dirección vertical u horizontal. Una vez que establece la flexión de visualización en un elemento, aparecen las opciones de alineación y justificación. Aclar las opciones correctas desde aquí es cuestión de prueba y error Simplemente juegue con todas las opciones hasta que encuentre el diseño adecuado para usted. 73. Webflow vs. Figma Sizes: Muchos estudiantes tenían preguntas sobre las diferencias entre tamaños en Webflow versus Figma y cómo se tamaño del lienzo en Webflow relaciona el tamaño del lienzo en Webflow con el tamaño del marco Este es en realidad un tema muy bueno y decidí hacer una lección completa al respecto. Aquí hay varios matices que necesitas para envolver tu cabeza al transición de Figma a Empecemos con un concepto llamado diseño receptivo. Una sección más adelante en este curso dedicada al diseño responsive, y profundizaremos en ese tema. Pero vamos a repasarlo un poco porque sin él, puede sentirse un poco confundido a la hora de construir su sitio web. Cualquier sitio web que construyamos será visto por los usuarios en muchos dispositivos y pantallas diferentes. Así que visitará su sitio web en una MacBook air, algunas en Lenovo ThinkPad, algunas en una PC de escritorio personalizada, algunas en un iPhone y en cientos de otros dispositivos diferentes. Todos estos dispositivos tienen sus propios tamaños de pantalla y resoluciones. Un buen sitio web deberá considerar el dispositivo del usuario y ajustar y responder a ese dispositivo y su respectivo tamaño de pantalla para entregar la mejor versión posible del sitio web. Esto se llama diseño responsive, y así es exactamente como vamos a construir nuestro sitio web. Webflow lo hace fácil porque tiene tecnología de diseño receptivo integrada en él. Pero el diseño que creamos en Figma no responde en absoluto Antes de diseñar nuestra página y Figma, elegimos un tamaño de marco particular con 1,440 píxeles y ancho Ese marco es representativo de una sola resolución de pantalla, una pantalla con exactamente ese tamaño, estimada en alrededor del 6% de todas las resoluciones de pantalla de escritorio utilizadas en todo el mundo. La altura es irrelevante aquí porque a diferencia del ancho la altura no es fija, aumentamos a medida que crece el contenido de la página web y en un sitio web real que se representa como un scroll de página Es posible que tengas dos preguntas válidas. ¿Cómo podemos elegir ese tamaño de marco en particular, que ni siquiera es tan popular? Segunda pregunta, podrías preguntar, ¿cómo es que no creamos un diseño responsive en FIGMA Permítanme responder primero a la segunda pregunta. Figma tiene alguna etiqueta receptiva como el diseño automático, pero esta etiqueta no está ni cerca de los poderes de respuesta reales que ofrece la web Dado que somos los desarrolladores de nuestro lado, también podríamos usar todo el poder del diseño receptivo y encargarnos de esa parte directamente dentro de Webflow Todavía tendríamos que hacer esto en Webflow independientemente de si hicimos Figma o no, bien podríamos ahorrar tiempo Ahora, vamos a responder a la primera pregunta, por qué 1,440 píxeles. Las resoluciones de escritorio y portátiles varían entre 1000 y 4 mil píxeles de ancho en cualquier lugar Esa es una gama bastante grande. Se puede ver en esta imagen cómo los tamaños de pantalla en realidad se compararon entre sí. Literalmente puede caber nueve pantallas HD dentro de una resolución de cuatro K. Por ejemplo, si estás trabajando en una pantalla de dos k y decides usar un Figma de tamaño de fotograma k coincidente, tendrás mucho espacio de pantalla donde podrás construir tu diseño Puede colocar muchas más cosas en su pantalla que alguien en una minúscula netbook c. Una pequeña netbook básicamente cubre una pequeña porción de su marco de dos k Fácilmente termina poniendo demasiados elementos o detalles en tu diseño que simplemente no caben en una pantalla más pequeña. Esto creará un dolor de cabeza para usted el futuro al ajustar la capacidad de respuesta en Webflow ¿Cuál es el buen tamaño de marco entonces? La mayoría de las pantallas superan a los portátiles o escritorio caen en algún lugar entre este rango. Dos pantallas K y cuatro K son bastante raras y los usuarios en esas pantallas no suelen usar el navegador en modo de pantalla completa porque ese sería el propósito de tener una pantalla muy grande donde puedas colocar muchas cosas en tu pantalla. Entonces estamos diseñando para un rango de aproximadamente 1,000 a 2000 píxeles, elegir una pantalla en el medio de este rango es el mejor enfoque porque el tamaño promedio será el más fácil de ajustar para las pantallas más grandes y ajustar hacia abajo para pantallas más pequeñas. Figma 1,400 píxeles de tamaño de fotograma es un buen candidato para este propósito porque está bastante en el medio Tu comodidad como diseñador también importa. Por lo tanto, es posible que desee elegir un tamaño de fotograma que coincida con la resolución de su pantalla. De esa manera, al trabajar Figma, podrás previsualizar tu sitio web como se vería en tu pantalla Entonces, si la resolución de su pantalla es un buen representante de un promedio en cualquier lugar 1280-1600, entonces no dude en usarlo para el tamaño de fotograma en su próximo Puedes averiguar la resolución de tu pantalla solo buscando en Google cuál es mi resolución de pantalla y revisando uno de los primeros O también puedes ver el ancho de tu pantalla ingresando el modo de vista previa en Webflow y verificando este número aquí Este es un ancho del lienzo visible. Cuando su navegador está en ancho completo, entonces será la misma que su resolución de pantalla real. Mi pantalla, por ejemplo, es de hecho 14 40 pixeles de ancho. Esto es solo una Suerte coincidencia. Pero no hay una gran necesidad de igualar tamaño del marco en Figma con el tamaño de lienzo Webflow Lo que hicimos en Figma es una maqueta de una sola pantalla. En Webflow, estamos construyendo un sitio web receptivo fluido que se encogerá y crecerá con diferentes tamaños de pantalla. Junto con esa versión 14 40 Pixel, también estamos construyendo 12 80, 1920, 320 píxeles versión, y todo lo demás. Es un sitio web que se encoge y crece como un acordeón No intentes igualar tu maqueta Figma con una precisión del 100%. Solo el tamaño idéntico del lienzo puede parecerse al 100% a tus diseños. Todo fuera de eso, tendremos ajustarnos a la realidad de una pantalla en particular. Como puede notar el lienzo o el ancho de la pantalla visible cambia entre el modo de vista previa y el diseñador. Dentro del diseñador, mi 14 40 es de solo 992 pixeles ahora. Eso es natural porque el modo diseñador tiene paneles laterales por lo que ocupan el espacio de pantalla disponible. Webflow da la capacidad de cambiar este ancho, incluso convertirlo en mi ancho de pantalla original si quiero tener en cuenta que aumentar el ancho del lienzo no proporciona una vista completamente realista, Webflow no puede agregar más píxeles a mi En cambio, está alejando el zoom y cambiando la escala para crear una impresión de una pantalla más grande Eso hace que cada elemento no sea fiel a su tamaño real. Aunque sigue siendo una vista previa útil porque puedes ver cómo los elementos interactúan entre sí y detectar y diseñar problemas. Es como si estuvieras mirando una pantalla de 1.400 píxeles pero de pie un poco lejos de ella, todo además de eso básicamente coincide con la realidad El encogimiento, por otro lado, proporciona tamaños verdaderos porque la escala se mantiene al 100% Estos iconos aquí representan lo que se llama puntos de interrupción del dispositivo En realidad no son solo para mostrar. Pueden tomar reglas personalizadas, reglas que son específicas para cada punto de interrupción del dispositivo Pero no hay que preocuparse por eso por ahora. Profundizaremos en esos más adelante en la sección de respuesta. Por ahora, todo lo que necesitas saber es que estás trabajando en el punto de interrupción del escritorio base, el que tiene un icono de estrella en él Aquí es donde necesitas quedarte durante esta etapa y verificar tus diseños dentro del rango de punto de interrupción del escritorio, que es de 992 píxeles en adelante. Mientras está en modo de vista previa, puede cambiar el tamaño del lienzo hasta 992 píxeles y hasta 1,900 píxeles para ver cómo se ve dentro de ese rango y asegurarse de que no haya problemas de diseño inesperados Todo eso es nuestro punto de interrupción de escritorio único y cada cambio que hacemos a 992 o 1,900 se aplica a ambos simultáneamente Nuestro diseño necesita funcionar bien para ambos. No es necesario que revises el lateral los dispositivos más pequeños porque lo haremos en la siguiente sección. Primero, construiremos todo en el punto de interrupción del escritorio y haremos que se vea bien para todos los diferentes tamaños de pantalla de escritorio En la sección de diseño responsive, repasaremos nuestra página una vez más y haremos cambios y ajustes para que todo se vea bien para todos los tamaños de pantalla más pequeños. Además, no agregue estos puntos de interrupción más grandes. Realmente no los necesitamos. El diseño que creamos utiliza un contenedor con un ancho máximo de 1,160 píxeles, ninguno de nuestros contenidos va más allá de ese límite excepto los colores de fondo en las secciones Los tamaños reales de los elementos entre Figma y Webflow deben coincidir Siempre y cuando estés viendo el estado 100% Zoom en Figma, aplicar ese mismo tamaño en Webflow debería darte más o menos el mismo Por ejemplo, un tamaño de teléfono de 75 píxeles en Figma debería tener el mismo aspecto cuando se aplica en Webflow Nuevamente, al mirar el estado 100% Zoom, y eso es independientemente del tamaño de fotograma en Figma o Webflow, siempre y cuando la escala sea del 100% en ambos El Webflow es el tamaño del lienzo alterará todas las demás cosas. No esperes que la imagen de héroe tenga el mismo tamaño en la pantalla de 992 píxeles comparación con Figma porque este lienzo no da suficiente espacio para encajar la imagen en sus dimensiones originales La imagen suena porque la imagen tiene una propiedad especial aplicada que la hace encoger cuando no hay suficiente espacio. El tamaño de fuente, por ejemplo, ganó el encogimiento, pero la longitud del texto se encogerá en su lugar cuando no haya espacio. Eso es. Esos son los matices importantes de los tamaños de pantalla entre Figma y Webflow Si aún tienes dudas, avísame en las preguntas y respuestas. 74. Webflow: barra de navegación (aplicación de chat): En este video, vamos a agregar la barra de navegación a nuestra página. Webflow tiene un elemento de barra de navegación por defecto llamado navbar, que podemos agregar desde el panel de elementos, arrastrarlo a la parte superior para llevarlo encima de la sección de héroe Navbar ya viene con elementos en su interior. Echemos un vistazo exactamente de qué está hecha esta barra de navegación. Entonces dentro del elemento navbar padre, tenemos un contenedor. Este contenedor es similar a lo que hicimos con nuestro contenido de héroe centrado en el medio con un ancho máximo, por lo que los elementos están muy bien envueltos dentro de él. Entonces dentro de eso, tenemos otros tres elementos, que de nuevo, son cajas. Primero, la marca se sienta a la izquierda. Ahí es donde ponemos el logo. La navegación es donde están sentadas estas tres fugas de navegación. Como la mayoría de las otras cosas, es solo un bloque div regular, pero con algunos estilos predeterminados ya aplicados a él. Podemos cambiar estos dils si queremos. Y tercero, tenemos botón de menú, pero es invisible. Puedes ver aquí que hay una pantalla ninguna aplicada a este ítem, por lo que se esconde. El botón de menú es invisible solo en el escritorio. En otros dispositivos, es visible, y puedes ver por qué. Es un ícono de Hamburguesa que despliega los enlaces de navegación ocultos, con los que probablemente estés familiarizado porque eso es lo que tienen la mayoría de los sitios web Es difícil instalar enlaces de navegación en dispositivos móviles. Utilizamos este menú de navegación oculto y el icono de Hamburguesa que contiene esos enlaces Navbar actúa como cualquier otro elemento HTML en Webflow, pero también tiene algunas opciones adicionales dentro Hay una opción para abrir y cerrar el menú. El menú es básicamente lo que está oculto en los dispositivos móviles. En la versión de escritorio, esto no hace nada porque el menú está visible en todo momento. Aquí hay tres tipos de menús, desplegable, que es el menú predeterminado, del lado derecho y del lado izquierdo. Principalmente utilizo la opción desplegable predeterminada. Debajo, hay opciones para flexibilizar. Esto se relaciona con la animación. La flexibilización es una animación que comienza lenta y luego se acelera. Así es como se configuran la mayoría de las animaciones en la web. Pero más sobre esto más adelante en toda la sección dedicada a las interacciones y animaciones. Dejo todos estos ajustes por defecto. Lo único que uso aquí es el menú abierto y cerrado, así puedo darle estilo visual al menú. Otra configuración útil aquí pueden ser las opciones de visualización para el menú. Con este deslizador, podemos establecer en qué dispositivos debería haber un menú desplegable y en qué dispositivos dejar enlaces de navegación regulares al igual que la versión de escritorio. Por ejemplo, si mueve el control deslizante hacia la derecha, esto lo deshabilitará de las tabletas. Es decir, en las tabletas, veremos los enlaces regulares, y en cualquier cosa más pequeña, veremos el menú Hamburguesa Ahora, vamos a dar la barra de navegación para que coincida con nuestro diseño. En primer lugar, los antecedentes. Eso es bastante sencillo. Simplemente configúrelo en azul desde la propiedad de fondo. Una cosa que notarás es que el contenido dentro la barra de navegación se extiende solo hasta cierto punto Eso es porque el contenido está sentado dentro del contenedor, y este no es el contenedor que hicimos. Es un contenedor predeterminado de Webflow que no es tan ancho como el nuestro. No queremos ese contenedor. En cambio, queremos usar el contenedor que ya hicimos, como aquel en el que nuestro contenido de héroe está sentado dentro. Entonces, ¿cómo podemos usar nuestro contenedor en su lugar? Al igual que la forma en que reutilizamos cualquier otro elemento aplicando la misma clase. Y verás cómo el contenedor cambia instantáneamente el ancho. Esta es la clase que creamos y se la dimos a este contenedor que antes diseñamos Y si aplicamos esto a este contenedor navbar, todos esos estilos y propiedades se llevarán a este contenedor navbar Al igual que lo que hicimos con los botones, si decidimos cambiar el ancho de nuestro contenedor predeterminado en un solo lugar, se actualizará instantáneamente en se actualizará instantáneamente en todos los demás lugares como por arte de magia. A continuación, necesitamos insertar nuestro logo. Al igual que hicimos con la imagen de héroe, vamos a exportar el logo y soltarlo como un elemento de imagen. A diferencia de nuestra imagen de héroe, esta vez, vamos a seleccionar SVG. ¿Por qué? Porque nosotros mismos creamos nuestro logo en Figma. Ahora mismo es un impuesto regular. Si lo exportamos en SPG, mantendremos sus cualidades basadas en vectores Estará optimizado para retina de inmediato. Se estirará infinitamente sin perder calidad, y el tamaño del archivo va a ser muy pequeño En la mayoría de los casos, los SVG serán más pequeños que los PNGs y los JPEG. Bien, una vez que tengas la imagen exportada, agrega un nuevo elemento de imagen y sube el logo como hicimos la última vez. Tengo elementos de marca seleccionados, así que cuando haga clic en la imagen, automáticamente caerá dentro de esa caja de marca. Pero el logo está pegado a la parte superior. ¿Cómo solucionamos esto? muchas maneras de convertirlo en una línea en el centro. Probablemente lo más simple es agregar un margen superior a la propia imagen. Ahora diseñemos los enlaces de navegación. Vamos a hacer eso como cualquier otra cosa. Pero primero, lo que vamos a hacer es eliminar todos los demás enlaces nab y simplemente conservar uno aplicaremos algo de estilo, por lo que Webflow crea automáticamente una clase Ahora podemos duplicar este enlace nab tantas veces como queramos Y cuando hagamos un cambio a uno de ellos, todos ellos se actualizarán instantáneamente. Larga vida a CSS. Entonces vamos a aplicar los textiles apropiados, bastante sencillos. Y aplica espaciado para que coincida con nuestros diseños. Podemos medir el espaciado Figma y plisar los espacios exactos aquí también. El espacio en la parte superior Figma es de 42 píxeles, y en el lateral es de 30 En Webflow, usaremos relleno para esto. Podríamos usar bargins pero por defecto, ya tiene relleno y es bastante agradable de esta manera En el lateral, usaremos 15 píxeles para cada lado. De esta manera, el relleno de dos enlaces vecinos sumará un total de 30 píxeles. Al usar relleno, todo el enlace crecerá por lo que los usuarios podrán hacer clic no solo con el texto, sino con toda la caja. Verás que se puede hacer clic en ese enlace incluso en el espacio vacío porque no es un espacio vacío, todo es el enlace en sí Por último, agreguemos ese botón. Aunque en lugar de usar un elemento de botón, solo voy a crear un botón a partir de uno de estos enlaces de navegación. Duplicar la clase para que podamos hacer nuevos cambios sin afectar a otros enlaces de navegación. Ahora, veamos qué propiedades tiene nuestro botón en Figma. El textil es lo mismo que los enlaces de navegación. El fondo es blanco, pero con 20% de opacidad y el relleno alrededor de los impuestos, 12 píxeles en la parte superior e inferior y 24 en los lados Vamos a recrear todo eso en Webflow. Dentro del Selector de Color Webflow, puede aplicar 20% de opacidad a partir de esta caja llamada A para No estoy seguro de por qué Alpha y por qué no O por opacidad. Tiene algo que ver con nuestro sistema de color RGBA, pero ¿a quién le importa Tenemos diferentes acolchados que nuestros enlaces Nav. Y tenemos esquinas redondeadas que podemos establecer en sección de borde. Aquí no hay valor exacto, aumentarlo hasta que deje de redondear No hay problema si lo repasas. Todo bien. Dentro de Figma, podemos ver que tiene un margen de 30 píxeles en la parte superior Y para el margen izquierdo, vamos a usar 15 porque sumará con un margen existente de 15 desde ese enlace de navegación al lado de él. Debido al nuevo espaciado, el logotipo está fuera de línea, como puede ver. Vamos a tener que alinear el logo en el centro con el menú de navegación. Vamos a tener que alinearlo a ojo. Por último, comprobemos la fluidez y capacidad de respuesta de nuestra barra de navegación Como puedes ver, están siendo apretados hasta los bordes, pero eso es porque no tenemos ningún espaciado extra. La sección de héroe está bien porque tiene acolchado aplicado en los laterales. Entonces, cuando la ventana del navegador se encoge y el contenedor se encoge con ella, el relleno impedirá que se exprima hasta los bordes También podemos aplicar el acolchado similar a nuestra barra de navegación. Y ahí ahora se ve bien. Ya casi está hecho. una cosa pequeña pero importante que le faltan los efectos de hover Ninguno de los enlaces o botones reacciona cuando muevo el mouse sobre ellos. Vamos a aprender a agregar efectos de hover en la siguiente lección Bien, así que para recapitular, aprendemos a agregar una barra de navegación, la anatomía de la barra de navegación, y de qué está hecha, la configuración de una barra de salida y cómo funciona en dispositivos más pequeños Aprendemos a agregar un logotipo dentro de una barra de salida y a darle estilo a los enlaces dentro del menú de navegación. 75. Webflow: lista de verificación de depuración: Bien, entonces, ¿qué pasa si te enfrentas a algún problema en Webflow De esto se trata este video. En realidad no tienes que ver bien este video. Ahora, es un tutorial en caso de que estés enfrentando un problema. A veces te estaré enviando a este video. Cuando publiques tus problemas en preguntas y respuestas, te enviaré este video o te voy a decir que vuelvas a esta lista de verificación de depuración de Webflow para seguir los pasos porque ayuda a resolver muchos de los problemas que podrías estar enfrentando cuando estás construyendo No, no tienes que verlo. Puedes verlo ahora mismo si quieres o puedes volver a él más tarde cuando en realidad estés enfrentando algún problema que no eres capaz de resolverlo. Entonces tengo aquí esta lista de verificación. Tiene unos pocos pasos, y he creado aquí algunos temas, que son temas comunes que mis alumnos enfrentan aquí y allá, y no son cuestiones maquilladas. Son muy comunes. Sucede. Entonces voy a repasarlos y mostrarte cómo trabajar esta lista de verificación de depuración y cómo seguir diferentes pasos y cómo en realidad es muy, muy útil Entonces aquí está este extraño párrafo espacial que es realmente, muy grande espacio en no poder entender, como ¿qué está pasando? ¿De dónde viene este espacio? Damos click en él, ahí no pasa nada. Entonces, ¿qué hacemos en este caso? Veamos qué nos dice nuestra lista de verificación. Paso uno, retire la clase del sospechoso para ver si el problema desaparece. Si lo hace, entonces salta al paso cinco. Bien. Entonces sospechoso en este caso es probablemente un párrafo. Es con un párrafo. Probablemente esté pasando algo en el párrafo. Y tenemos una clase aquí. Ahora, podemos eliminar este retroceso en tu teclado, quitar la clase de él, y Hmm, el problema sí desapareció, bien Ahora deshacer para devolver el párrafo de nuevo al elemento. Control Z en PC, Comando C en Mac. Eso es deshacer. Entonces la clase está de vuelta. Y ahora paso cinco, salta al paso cinco. Veamos qué nos dice el paso cinco. Una vez que identifiques la clase que está causando el problema, vuelve a poner la clase en el elemento. Ya lo hicimos y empezamos a resetear cada estilo que está en color azul Deberías poder encontrar un estilo particular que esté causando el problema. Bien, vamos a ver Seleccionamos el párrafo correcto, la clase correcta, y luego comenzamos a restablecer las clases que están resaltadas en azul Ahora bien, la forma en que funcionan HTML, CSS y solo páginas web y sitios web es que todo vive bajo una clase. Todos los cambios que hacemos vidas bajo una clase. Por eso tenemos una clase aquí. Una vez que lo borras y eliminas esa clase de este párrafo, todos esos cambios se han ido. Es por eso que eliminar una clase es una buena manera de probar si algo está causando un problema. Entonces podemos comenzar reiniciando reset hay un atajo aquí Opción click en mi caso, voy a hacer click en el PC. Eso no lo hizo. Eso no lo hizo. Cuando las cosas no lo hacen, yo lo deshago, así no me meto y devuelvo las cosas a la normalidad. A ver, haga clic en No, eso no lo hizo. Opción click, No eso no lo hizo. Bing. Mira eso. Bingo. Eso es lo que tenemos. Entonces, ¿qué tenemos aquí? Altura. Esto es tipografía, entonces eso significa altura de línea 160 píxeles. Oh, sé que nos referimos al 160%. Ahí vas. Problema solucionado. Mira eso. Mi lista de verificación está funcionando. Ahora tenemos otro tema aquí. Esto se alinea a la izquierda. Esto es F align. Los botones están alineados al centro. Ese no es un buen diseño. Quieres consistencia en la alineación. O todo está alineado al centro o todo queda alineado a la izquierda. Entonces queremos que estos botones vayan alineados a la izquierda. Pero esto no es Figma. Podemos arrastrar esto aquí a la izquierda. ¿Qué hacemos? Nuevamente, comenzamos con el paso uno, que es botón es sospechoso. Eliminemos de ella a la clase que no hizo nada. Bien. Veamos qué dice nuestra lista de verificación al respecto. Retire la clase del sospechoso para ver si el problema desaparece. No, no desapareció. Bien, pasemos al paso dos. Ya que quitar la clase en el elemento sospechoso no ayudó, eso significa que el problema viene de algún otro elemento. Comience por eliminar clases del padre directo, luego padres padre todo el camino hacia arriba, incluyendo el elemento body hasta que elimine la clase que hace desaparecer el problema. Bien, veamos. Entonces, ¿cuál es el padre del botón? Podemos comprobarlo y encontrarlo desde el navegador. Tenemos un botón y el padre se deja en bloque copia. Bien, ese es nuestro padre. Otra forma en la que puedes atajo para encontrar padres es la tecla de flecha hacia arriba. Haga clic en O. Eso va a seleccionar enseguida el elemento padre. Ya podemos eliminar la clase. No, eso no lo hizo. Así que lo voy a devolver. De nuevo, clave, y ahora vamos a seleccionar un abuelo, el padre de los padres. Entonces este es el padre de familia. El siguiente padre es Zero lino, ¿verdad? Arriba, yo arriba. Ahí vas. Eso es seleccionado. Ahora lo quitamos de él. No, eso no lo hizo. Un fastidio. Uno más. A lo mejor este lo hará. A ver. Bam. Yo lo hice. ¿Qué pasa con este tipo? Bien. Si encuentras la clase de buggy, lo hicimos luego saltamos al paso cinco. El paso cinco fue exactamente lo mismo, lo que ya hicimos empezó a restablecer y eliminar estilos azules No, eso no hizo nada. Oh, lo hice. ¿Qué pasó? A ver. Un centro de línea. Entonces padre, en este caso, configuración de alineación del texto de alineación del padre en realidad está afectando a los hijos. Tiene sentido. Una línea a la izquierda. Bien, ese es el tema Grande. Fresco. Esos son fáciles. Ahora vamos a ir a uno un poco más difícil. Otro tema común que veo con mis alumnos, tenemos la imagen de héroe, y es simplemente diminuta, diminuta, diminuta. Está apretada a muy, muy esquina. Entonces, ¿qué hacemos en este caso? Nuevamente, pasamos por el paso uno, quitamos la clase del sospechoso. Esta ni siquiera tiene clase, así que no podemos quitarla. Entonces probablemente no viene de la imagen. Entonces íbamos del padre, lo quitaríamos, del padre, lo retiraríamos, y así sucesivamente. Y una vez que pasemos por eso, vamos a averiguar que en este caso, tampoco está funcionando. Entonces pasamos por el paso dos, no pasa nada. Después vamos al paso tres. Si el tema no viene de ninguno de los padres, entonces podría estar viniendo de hijos o hermanos. Entonces vamos a tener que repetir el proceso desde el paso dos, pero vamos a tener que hacerlo en los niños o con los elementos hermanos Ahora bien, la forma en que funciona la web, y esto es raro. No es intuitivo, pero así es como funciona. La web funciona como documento. ¿Alguna vez ha trabajado con el documento de Word? Ya sabes, cuando mueves algo en el documento de Word, como, solo trata de agrandar la imagen un poco, y todo como 20 páginas de tu documento simplemente, como, se estropean por completo Sí. Esto es lo que son las páginas web. El tipo original en Suiza que inventó sitios web, ese tipo usó un documento, creó una página web a partir de él. Entonces funciona fundamentalmente. HTML funciona como un documento. Todo está ocupando espacio. Todo lo está empujando. No es como Figma. Figma es pacífico Funciona en capas. Todo el mundo se lleva bien. Nadie se está metiendo el uno con el otro. Pero los documentos documentos son codiciosos y todo se está empujando entre sí. Son como países que luchan por el territorio. Entonces aquí dentro, tendríamos que comprobar qué está pasando con los hermanos. Entonces, para conocer a los hermanos, ahora no tenemos un pequeño atajo agradable por el que pasar, así que tenemos que pasar por la navegación. Para que podamos colapsar todo esto aquí, haga clic de nuevo en la imagen del héroe. Una imagen de héroe no tiene hermano, bien. Si la imagen del héroe no tiene un hermano, entonces movemos a los padres hacia arriba, y comenzamos con el hermano de los padres Entonces tíos, tías, eso es con lo que estamos trabajando. Si esto no funciona, entonces vamos con un abuelo, abuelos y hermanos, y así sucesivamente. Simplemente seguimos haciendo. Y si el hermano padre no trabaja y nosotros lo hacemos en el ingle de los padres y nada cambia, entonces tenemos que hacerlo en los niños Entonces sobrinas y sobrinos, no, primos. Lo hacemos en los primos. Entonces, ¿qué nos dice el paso? Entonces repita este proceso en los hijos y hermanos. Así mismo proceso de eliminación de clases. Entonces este es el hermano del elemento padre. Bloque izquierdo. Lo quitamos. Bam, solucionó el problema. Entonces como solucionó el problema, deshacer, sabemos que algo del bloque izquierdo viene y apretando a este tipo a la esquina Ahora comenzamos con nuestro proceso habitual de restablecer todos los estilos azules. Reset, ese tipo de lo hizo, pero no realmente. Reiniciar, no. Restablecer. Bam, ese es el indicado. Bien. Ancho mínimo 800 píxeles. Oh, guau. Nuestro lienzo es de 992 pixeles, y este tipo quiere ocupar 800 de él. Eso es casi el 90% de ella. Eso es súper codicioso. Entonces, si reducimos esto a 400, ahora la imagen tiene el espacio para crecer. Bonito. Y una última opción, que es que ninguno de estos pasos va a funcionar. Ahí está este extraño espacio viniendo de arriba. Esta cosa ni siquiera tiene sospechoso porque estoy dando clic en ella y no se selecciona nada. No es ninguno de los elementos que están ahí. Entonces si tengo algo seleccionado aquí, estoy dando click en él, no pasa nada. ¿De dónde viene esto? Así que de nuevo, piensa en el documento de Word, ¿verdad? En un documento de Word, todo se está empujando entre sí y configurando unos de otros. Se están metiendo entre sí. Así es como funciona. No, no es culpa de Webflow, culpa de HTML. Eso es lo que Webflow tiene que lidiar. Figma, pelucas, enmarcadoras, todas esas cosas. Son capas de abstracción. Están creando encima de este HTML y CSS, ignorando eso, y están construyendo una nueva capa de abstracción para que la entienda intuitivamente para que no tenga que lidiar con las partes desordenadas del HTML y CSS reales Entonces sí, en Webflow, tienes que pasar por este extraño bordillo de aprendizaje, pero es una tecnología fundamental inmutable HTML y CSS nunca van a ninguna parte. Las páginas web siempre estarán en la estructura del documento que nunca va a cambiar Entonces, si alguna vez vas a aprender a codificar o a estar codificando, lo que sea, tus conocimientos de Webflow serán llevados a otras plataformas En lugares como Wix, Framer, Figma, todo ese conocimiento es solo parte de No estás llevando ese conocimiento a ningún lado. Todo bien. Entonces, ¿qué está pasando aquí? Cuando no sabemos lo que está pasando, entonces empezamos a eliminar y pasamos por los pasos de los elementos adyacentes porque es un documento, ¿verdad? Todo está afectando, y por lo general va a ser algo adyacente. Entonces, por ejemplo, ¿cuál es el elemento cercano de este espacio en blanco? Será esta sección, la sección demo. Quitar la clase. Bueno, acabo de quitar el fondo, pero como pueden ver, en base a esta pequeña frontera, nada ha cambiado. Este espacio en blanco sigue siendo independiente. Entonces eso no hizo el trabajo. Bien, vuelve a poner eso. Ahora, ¿qué es otro elemento adyacente? Es este rubro. Vamos a tener en el encabezado, quitar. Bueno, eso tampoco lo hizo. Hmm. Entonces nos estamos quedando sin todos los elementos adyacentes. ¿Qué hacemos ahora? A ver. Entonces, cuando pasamos por todos los pasos, no pasa nada. Si eliminar clases o restablecer estilos azules no ayudó o incluso si no hay clases o estilos azules entonces comience a restablecer los estilos en color naranja. Uh, eh. Entonces hacemos, de nuevo, elementos adyacentes. Pasamos por demosección. ¿Tenemos algún color naranja? ¿No vamos al rubro? ¿Tienes algún color naranja? Nosotros lo hacemos. Y mira esto. Ahora bien, si quito la clase de aquí, la configuración naranja no está desapareciendo porque no es parte de la clase Lo que sea azul, azul, azul, están conectados. Son parte de la misma clase. Pero los escenarios y estilos anaranjados, vienen de algún otro lugar que es estilos heredados, tema que cubriremos en las próximas conferencias. Cuando haces clic en él, te va a decir que el valor viene de bla, bla, bla Te dirá realmente de dónde viene. Y este valor no se puede restablecer. No se puede hacer clic en él. No hay opción de reinicio porque no forma parte de esta clase. No es parte de este elemento ni de esta clase. No podemos restablecerlo desde aquí. Tendríamos que restablecerla únicamente desde el elemento original del que viene. Pero lo que podemos hacer, y dice, empezar a reajustar los estilos, que en estos términos, también significa ponerlos de nuevo a sus valores predeterminados Entonces, ¿cuál es el valor predeterminado de un margen superior? Webflow en realidad nos dice que lo que sea que esté grabado, estos son valores predeterminados Ancho, el valor predeterminado es automático, alto, el valor predeterminado es automático. Y puedes dar click sobre esto y lo verás seleccionado Auto. Pero el ancho mínimo es cero píxeles, pero el ancho máximo no es ninguno. Este es el valor predeterminado de estos elementos o comportamiento predeterminado como display, default es block. Entonces en este caso, sabemos que por defecto es cero para márgenes y relleno. Entonces podemos hacer cero aquí. Manualmente, podemos restablecer. Y, señora, funcionó. Entonces esto fue lo que estaba causando el problema. Eso es. Estos son todos los pasos de depuración. El 80% del tiempo, esto va a ser muy, muy útil. Otras veces, me pegó en preguntas y respuestas, házmelo saber. Yo te ayudaré. 76. Webflow: estado sobre el cursor: Nuestra sección de héroes se ve genial en este momento, pero no es muy emocionante para interactuar con ella. Cuando movemos el mouse sobre los elementos, realmente no reaccionan ante él. Estos se denominan efectos de mouse sobre o hover. En diseño web, recuerda esta ley. Se llama Ley de Jacob de la experiencia del usuario. La ley dice que los usuarios pasan la mayor parte de su tiempo en otros sitios. ¿Qué significa eso? Esto significa que esperan que tu lado funcione de la misma manera todos los demás sitios que ya conocen. Si intentas ser muy original y hacer que tu sitio funcione de una manera diferente a la que están acostumbrados los usuarios, vas a terminar con un sitio web fantasma muy original que todos quieren dejar al instante. Entonces la gente tiene expectativas de que los enlaces y botones reaccionen cuando mueven el mouse sobre él. Agregar efectos de hover y Webflow es bastante simple y muy divertido Esto se maneja bajo este desplegable llamado estados. Después de seleccionar el estado de desplazamiento en el menú desplegable, cualquier cambio que realice en los estilos se aplicará al estado de desplazamiento de esa clase Y así, el botón cambia la opacidad al flotar Los estados muestran ahora un punto azul para indicar que se ha realizado un cambio en el estado de flotación Hay otros estados como prensa y enfoque, pero no voy a entrar en esos hasta que lo necesitemos. No hemos diseñado estados de flotación en Figma. Yo tampoco hago esto en proyectos de clientes reales. Es demasiado trabajo extra que no es realmente necesario. me ocurre el efecto hover sobre la marcha durante el proceso de construcción de Webflow De esta manera, también puedo visualizar cómo se está comportando. Podemos cambiar casi todas las propiedades al flotar. A partir de esto se pueden crear muchas animaciones divertidas. Aunque Webflow sí tiene otra forma crear animaciones e interacciones, y es súper increíble Pero más sobre eso después. Para los botones, cambiar el fiel de fondo es una forma buena y sencilla de agregar algún efecto de desplazamiento simple, y cambiar la opacidad de la sensación de fondo es una manera fácil de hacerlo Puedes usar eso como tu técnica de ir a la técnica para un efecto rápido y sencillo. Es más fácil que poner un color diferente. Otra forma sencilla sería agregar una sombra al flotar. Esa es una animación común y divertida, agrega una capa extra de dimensión. Ahora, con nuestro botón fantasma aquí, no podemos disminuir la opacidad Ya es transparente. Pero lo que podemos hacer es agregar fina capa de blanco transparente. Algo así como ese botón en la barra de navegación, agregando fondo blanco con diez, 20% de opacidad Con el botón en la barra de navegación, o podemos volver a jugar con opacidad o rellenarlo con 100% blanco Cuando lo llenas de blanco, también tenemos que cambiar el color del impuesto, porque el texto es blanco y no se muestra. Por suerte, podemos cambiar cualquier estilo al pasar el cursor, así que sin problema, podemos convertir el texto en azul En cuanto a los enlaces de navegación, podemos hacer algo similar como disminuir la opacidad, cambiar el color a otra cosa, o podemos hacer algo aún más interesante Podemos agregar un borde debajo. No me refiero a subrayar, eso es cojo. Me refiero a un borde debajo de todo el cuadro de enlace. Podemos hacerlo bajo ajustes fronterizos. Selecciona la casilla que indica el borde inferior. Esto debería seleccionar automáticamente una línea continua como estilo si no se asegura de que la hayas seleccionado y no esté establecida en X y cambie el color a blanco. Este es un bonito efecto sobre y adecuado para nosotros porque estamos usando un enlace como una caja completa, no solo un texto. Entonces demuestra que todo esto es clicable. Podríamos acercar este borde al texto disminuyendo el relleno del botón, pero en realidad me gusta que esté espaciado así. Hay una cosa extraña que está pasando al flotar. Preste atención a cómo el contenido debajo cambia ligeramente cada vez que pasamos el cursor sobre los enlaces Eso desde luego no es agradable. La razón por la que esto está sucediendo es porque Tupixel border suma al espacio disponible dedicado a los enlaces Nav Entonces empuja todo el contenido hacia abajo. Entonces, ¿cómo arreglamos este comportamiento? Tenemos que asegurarnos de alguna manera que la altura del enlace Nab no cambie flotar debido a la frontera Y una forma de hacerlo es agregar frontera Tupixel también en el estado regular Podemos hacerlo transparente para que no se muestre. De esta manera nav link box tiene un borde de dos píxeles de cualquier manera, por lo que no cambia de tamaño al pasar el cursor Lo único que cambia es el color. Esa es una buena solución. Los efectos hover este momento transitan de manera bastante abrupta de una estancia a Es un salto de cecina muy instantáneo. Este salto instantáneo puede que no sea mucho, pero es demasiado rápido para que registremos el cambio, por lo que no se siente muy natural y suave. Los diseñadores web en tales casos, agregan un poco de efecto de transición, por lo que hay un ligero retraso de tiempo en la transición. Podemos agregar el estilo de transición desde aquí. Bajo un menú desplegable, ves que hay muchos tipos de transición Se trata de enumerar todo lo que puede tener un efecto de transición como una opacidad de un elemento o un color de fondo No todos los estilos pueden hacer la transición. Por ejemplo, verá, el nombre de fuente no aparece en la lista porque el cambio de fuente no puede animarse, pero muchos otros ajustes de tipografía En nuestro caso, queremos hacer la transición de un color de borde, que es una opción disponible. Hay dos valores más duración y flexibilización. La duración es lo que dice exactamente. Cuánto tiempo tarda la transición en milisegundos. El valor predeterminado de 200 milisegundos es bastante bueno para la mayoría de los efectos de desplazamiento, así que puedes dejarlo así En cuanto a la flexibilización, puede parecer un poco complicada, pero son bastante simples En realidad, estas son una especie de fórmulas diferentes sobre qué tan rápido van o aceleran y qué tan rápido o lento se desaceleran cuando termina la transición Dejemos esto a la facilidad predeterminada. La mayoría de las veces, funciona perfectamente bien. Ahora bien, si superas los enlaces nulos, notarás que el borde aparece y desaparece sin problemas, y eso es mucho más agradable que esa transición desigual que era Una cosa más a tener en cuenta, el efecto de transición tiene que aplicarse en el estado regular, no en el estado flotante Así es como funciona CSS. Lo mismo que podemos hacer con los botones y sus transiciones de fondo. A menudo, en lugar de seleccionar un tipo de transición específico, en realidad me gusta seleccionar todas las propiedades. Esto aplicará la misma configuración de transición a cualquier efecto de desplazamiento Es simplemente una forma más sencilla de hacerlo. En lugar de buscar un tipo de transición, cada vez que queremos aplicar algún tipo de cambio de vuelo flotante diferente Si un elemento tiene varias propiedades que cambian al pasar el cursor como color de fuente, color de fondo, sombras, en lugar de agregar tres tipos de transición diferentes, solo puede agregar uno que tipo de aplique a todos a menos que queramos hacer transición de diferentes efectos a diferentes velocidades, pero esas serán ocasiones muy raras El mismo efecto de transición en los otros botones, y ahí lo tenemos. Todos los botones y enlaces transitan agradable y sin problemas. Bien, así que recapitulemos lo que hicimos en este video. Hemos agregado efectos de desplazamiento a los enlaces y botones de nuestra sección de héroes Los estados de desplazamiento se cambian de los estados en el panel Estilos Podemos cambiar casi cualquier estilo dentro del estado de flotación. Y para que los cambios de estado de regular a hover se vean agradables y suaves, podemos agregar transiciones desde la configuración del efecto 77. Webflow: sección media (aplicación de chat): La versión de escritorio de la sección héroe está completamente hecha. Aún no lo hemos optimizado para dispositivos móviles y tabletas. Pero lo que vamos a hacer es en realidad primero vamos a terminar toda la página, y luego vamos a hacer la capacidad de respuesta y optimización móvil Esta es una especie de costumbre de hacerlo. Algunos diseñadores web, lo que van a hacer es que van a hacer cada sección por sección, cada bloque individual que están construyendo, también están haciendo optimización móvil al mismo tiempo. Me gusta terminar primero toda la página y luego ir a la optimización móvil y capacidad de respuesta ¿Por qué? Porque lo que a menudo me pasa es que envío versiones de escritorio o cualquiera que sea la página que básicamente estoy diseñando, la envío al cliente para la revisión y ellos regresan con revisiones. Entonces que pasa, van a ser como, aunque estuvimos de acuerdo en el diseño, a veces, ya sabes, hay animaciones involucradas, ¿verdad? Hay interacciones involucradas, algunos efectos de terror. Así que están involucradas cosas diferentes que no han sido parte de la fase de diseño, o simplemente podrían cambiar opinión cuando ven la página en realidad. Entonces, lo que pasa es que podrían regresar con algunos cambios diferentes que tengo que hacer, y podría eliminar por completo parte de la sección o cambiar completamente la forma en que se presenta y así sucesivamente. Y ahora toda esa capacidad de respuesta y optimización móvil que he puesto dentro se pierde todo el tiempo Y de esta manera, sé que no tengo que dedicar más tiempo a las versiones móviles hasta que estemos seguros y hasta que mi cliente haya firmado los diseños y sepamos que esto está listo para funcionar. Después en la etapa final, arreglaré el móvil y luego crearé la capacidad de respuesta de la página Y usaremos ese proceso, terminaremos primero la página, y luego la repasaremos y revisaremos las versiones de tablets y móviles y todo eso. Ahora es el momento de construir esta sección media. Sólo vamos a ser mucho más simples. Entonces, ¿qué necesitamos primero? Podemos echar un vistazo a nuestra estructura de héroes para obtener una pista. Entonces parece que tenemos dos bloques div, uno llamado sección héroe y otro contenedor que se encuentra dentro de esa sección de héroe. Si recuerdas, hicimos un contenedor como bloque genérico para centrar nuestro contenido. Incluso reutilizamos esto dentro de la barra de navegación. Es una gran idea volver a reutilizar este contenedor en todas partes de nuestro sitio web. De esta manera, tenemos un diseño uniforme. Y si alguna vez decidimos cambiar el ancho máximo, hacerlo más ancho o más estrecho, podemos hacerlo en un sitio web completo en un par de clics Para la sección de héroes, no hemos hecho nada estandarizado así. De lo contrario, la reutilizaríamos aquí también, pero está bien. Podemos crear una sección genérica ahora, que podremos reutilizar después como hicimos con contenedor. Entonces vamos a agregar una nueva sección. Pondremos otro contenedor en su interior. Aplicaremos clase de contenedor a ese contenedor. Y vamos a crear una nueva clase llamada sección para ese bloque de sección. Y ahora agreguemos algo de estilo a esta clase de sección recién creada. Una cosa que podemos tomar prestada de la sección de héroe es el acolchado lateral. Recuerda este acolchado lateral, aplicamos a la sección de héroe, para que el contenido no vaya a los bordes. Sabemos que esto va a ser uniforme en nuestro sitio web y entre páginas, igual que nuestro contenedor genérico. Entonces vamos a aplicar el mismo relleno a nuestra sección genérica. Posteriormente, si alguna vez decidimos cambiar ese relleno, podemos hacerlo en todo el sitio web simplemente cambiando una instancia de esa sección. También podemos agregar pedaleo superior e inferior. Esta información la podemos encontrar en Figma. Hemos utilizado una Figma de espaciado de 19 píxeles para distanciar este titular de la sección de héroe anterior, así podemos reutilizar ese mismo valor aquí, y podemos aplicarlo como pedales tanto superior como inferior Ahí, ahora tenemos un diseño de sección genérico con un contenedor genérico en su interior. Reutilizaremos exactamente esta misma estructura en otras secciones similares en nuestra página. Ahora podemos poner nuestros elementos en su interior y empezar peinarlos para que se vea como nuestros diseños. Eso lo haremos en el siguiente video. 78. Webflow: etiquetas HTML: Empecemos por estilizar nuestro titular. Cualquier nuevo texto que agreguemos a nuestra página por defecto se establece en fuente Aerial. No sería bueno si de alguna manera pudieras darles un estilo predeterminado como hacer que todos los titulares aparezcan en pop ins y todos los textos de párrafo roboto, así que no tenemos que estilizarlos cada vez que agregamos un nuevo titular En una pequeña página como esta, está bien. No mucho trabajo. Pero lo que sucede en un sitio web grande con 20 páginas diferentes e incluso más entradas de blog. Por supuesto, podríamos usar clases CSS, pero hay una manera aún mejor de hacerlo. Recuerda el campo selector, ya estás familiarizado con esto. A partir de aquí, aplicamos clases CSS a nuestros elementos. Al aplicar una clase a un objeto, básicamente estamos guardando la información sobre estilos y propiedades. Posteriormente, podemos aplicar la misma clase a otro objeto similar. En el campo selector, el OC, dice, selecciona una clase o etiqueta. Esta etiqueta es lo que nos permitirá establecer estilos predeterminados en nuestro texto. Entonces, ¿qué demonios es una etiqueta? Una etiqueta es parte de HTML, mientras que la clase es parte de CSS. Las etiquetas son exactamente lo que hemos estado agregando a nuestra página. Bloque div es una etiqueta llamada DIV y un encabezado es una etiqueta llamada H uno, y un párrafo es una etiqueta llamada P. Dentro de HTML, así es como se agregan nuevos elementos, etiquetas. Comienza diciendo el tipo del elemento que es DV, H uno, P, etcétera, y justo después de él, si hay alguna clase CSS aplicada a él, entonces el nombre de esa clase CSS Ya ves como dice clase es igual a sección de héroe. Esa es exactamente la clase que hemos creado manualmente y nombra así. Entonces, ¿cómo nos ayudan las etiquetas a establecer estilos predeterminados? Bueno, así como definimos un conjunto de propiedades y estilos de una clase, podemos hacer exactamente lo mismo para una etiqueta HTML genérica. Por ejemplo, para el encabezado, en lugar de aplicarle una clase y luego estilizarlo, podemos seleccionar todo H un encabezado de aquí y luego darle estilo como solemos hacer. Ahora, cada vez que agreguemos un nuevo encabezado, se le aplicará el estilo predeterminado sin necesidad de usar clases. Y al igual que las clases, podemos hacer un cambio en cada instancia a la vez. Además de H one, tenemos más etiquetas de rumbo. Simplemente haz clic en la configuración del encabezado y verás. Tenemos todo el camino hasta H seis. El uso de estas etiquetas de encabezado diferentes es básicamente el nivel. H uno debe ser nuestro estilo de encabezado de más alto nivel. Para una partida secundaria, podemos usar H dos y así sucesivamente. Si nos fijamos en nuestros diseños y Figma, definitivamente podríamos definir diferentes niveles de encabezados a partir de El rubro en la sección de héroes es el más grande, así que ese puede ser el H uno. El titular en la sección posterior puede ser H dos y tal vez esos encabezados de pie de página pueden ser H tres o H cuatro Entonces, si quisiéramos definir una etiqueta H dos, seleccionaríamos de aquí y otra vez, ir al selector. Esta vez, selector nos mostrará todos H dos encabezados en lugar de H uno porque eso es lo que hemos seleccionado Y podemos diseñar todas las etiquetas H dos en nuestro sitio web. Ahora, cuando seleccionamos la etiqueta H dos en un titular, esta estrella se aplicará automáticamente. Como nota al margen, a diferencia de las clases, las etiquetas no siguen siendo seleccionadas. Entonces, en el momento en que termines de editar y sales del elemento, este selector de etiquetas desaparecerá. Entonces, si haces esto y vuelves al encabezado para editar un poco más, ahora cualquier nueva edición creará una nueva clase y no se aplicará a la etiqueta Así que cada vez que hagas un nuevo dit a la etiqueta, asegúrate de seleccionarlo cada vez. Hasta hoy, sigo olvidándome de esto. Para poder seleccionar la etiqueta, el campo de clase debe estar vacío. De lo contrario, como puedes ver, ya no muestra la opción de editar la etiqueta H dos. Pero hay otra manera de seleccionar y editar la etiqueta en sí, incluso si tienes una clase aplicada al elemento. Eso se puede hacer desde aquí. Este menú desplegable muestra todas las clases y etiquetas de nivel superior que puedes seleccionar y editar directamente. El azul es para la clase y el rosa es para las etiquetas. Por ejemplo, tomemos nuestro rumbo y hagámoslo rojo, pero no la etiqueta, sino solo esta instancia particular del encabezado. Como puedes ver, el encabezado predeterminado H one no cambia porque aplicamos el color rojo usando una clase, no usando una etiqueta. Ahora bien, si queremos editar nuestro estilo predeterminado H one, claro, podemos hacerlo en el titular de abajo, pero también podemos hacerlo en el rojo seleccionando una etiqueta de nivel superior en el selector. Cualquier cambio que hagamos ahora se va a aplicar al estilo predeterminado H one también, y se puede ver que esto sucede en vivo. Otra cosa a señalar, notarás que el estilo de color está rayado. ¿Por qué está rayado Básicamente es Webflow diciéndonos que la propiedad de color está siendo anulada por un selector más específico Entonces las clases son más específicas, algo así como elementos hijos, y las etiquetas son más como elementos padres. Así que las clases anulan etiquetas, similares a los hijos heredando estilos del padre hasta que establecemos un estilo específico en el elemento hijo. Lo mismo va aquí. H una etiqueta es un selector de nivel superior, y actuará como un estilo predeterminado hasta que una clase más específica anule ese estilo Un buen ejemplo de esta jerarquía es una etiqueta de cuerpo. Si miras dentro del navegador, puedes ver que el cuerpo es la caja más grande donde todo lo demás entra. Nada va al lado del cuerpo ni encima del mismo. Mientras tengas el cuerpo seleccionado, ve al selector y da clic en las páginas Cuerpo O. Ahora puedes establecer algunos estilos determinados en esta etiqueta corporal que se transmitirán a todos los elementos hijos. Sin embargo, solo para las propiedades heredables como textiles, otras propiedades como tamaños, visualización, bordes no se heredarán Puedes ver que Webflow ya ha aplicado algunos estilos de fuente predeterminados Eso lo podemos ver porque está resaltado en azul. ¿Qué estilos predeterminados podemos establecer aquí? Por ejemplo, sabemos que roboto es nuestra fuente principal en párrafos y todo lo demás además de encabezamientos Entonces, ¿por qué no poner Roboto aquí? Además, podemos establecer un tamaño de fuente, color y altura de línea predeterminados . De esta manera, cada nuevo texto que agreguemos a nuestro sitio web comenzará con estos ajustes y tendrá mucho menos estilo que hacer. Por supuesto, no estamos atascados con estos valores. Las etiquetas H uno y párrafo son selectores más específicos, por lo que anularán estos ajustes Por eso el párrafo cambió cuando estábamos editando, pero el encabezado no lo hizo, y las clases son selectores aún más específicos, que anularán todos los demás textos, ya sea encabezado o etiqueta corporal Ahora cada nuevo elemento de texto que agreguemos a la página estará en roboto y en color gris menos que tenga estilos más específicos Hay otras etiquetas que podemos diseñar, pero los encabezados y body tag los más comunes y más útiles Entonces, en nuestro caso, tenemos H una etiqueta que diseñamos igual que nuestros diseños, y tenemos estilo de la etiqueta del cuerpo acuerdo con nuestros diseños de párrafo. Después de peinar la etiqueta corporal, notarás que a veces algunas etiquetas cambiarán donde no esperas. Por ejemplo, nuestros enlaces de navegación, acuerdan el tamaño para que coincida con los 18 píxeles que configuramos para la etiqueta body. Y si hacemos clic en el estilo de fuente, podemos ver que este valor se está heredando del cuerpo. A pesar de que tenemos una clase habilitadora aplicada a ella. ¿Por qué sucede esto? Porque originalmente cuando diseñamos enlaces de navegación, no tuvimos que cambiar el tamaño del teléfono y la altura de la línea. Lo que estaba configurado en el cuerpo por defecto era del mismo tamaño de teléfono que necesitábamos en ese momento. Pero ahora porque hemos cambiado el tamaño del teléfono en la etiqueta del cuerpo, obtenemos esto. Vamos a diseñar estos enlaces de navegación a cualquier tamaño que se supone que son 14 píxeles para el tamaño del teléfono y 16 píxeles para la altura de línea. Y eso es mucho mejor. Entonces, para recapitular, tenemos clases CSS y textos HTML. Las etiquetas HTML son elementos en sí mismos como párrafos, encabezados, imágenes, etcétera. Al igual que las clases, muchas etiquetas HTML pueden ser de estilo para crear un estilo general predeterminado para esos tipos de elementos como todos los titulares H uno o todos los párrafos. La etiqueta de estilo es un hábito profesional. Ahorra mucho tiempo en la línea, y es eficiente y crea un código más limpio. La etiqueta de nivel más alto que podemos diseñar es la etiqueta del cuerpo. Si establecemos un estilo de fuente en la etiqueta body, entonces cualquier otro elemento fiscal en el sitio web, no solo una página heredará esa fuente de la etiqueta body hasta que la anulemos con otras etiquetas o clases más específicas 79. Webflow: clases de combinación: Entonces la sección media solo tiene tres elementos, encabezado, párrafo y una imagen. Entonces necesitamos los elementos de cordón en Webflow. Ahora, pongamos nuestro contenido dentro y veamos a dónde nos lleva eso. A continuación, vamos a exportar la imagen. Esta vez, podemos exportar JPEG en lugar de PNG porque el fondo es blanco, por lo que no obtendremos ningún desajuste de color Vamos a hacer dos Xs para mantener la optimización. Dado que exportamos dos X, necesitamos habilitar la opción de DPI alto. Bien, casi se parece a nuestro diseño. Tenemos que centrarlo todo de alguna manera. Podríamos establecer el texto align para centre en el bloque div del contenedor, que se centre en el bloque div del contenedor, pero no podemos hacerlo en nuestro contenedor genérico porque va a centrar los elementos en todas partes y estropear nuestro contenido en otro lugar, como en nuestra sección de héroes. Podríamos, por supuesto, duplicar esta clase de contenedor y crear una nueva con un diseño central, pero eso supera el propósito de tener este contenedor genérico predeterminado que vamos a usar en todo el sitio web. Por suerte, CSS tiene una solución súper inteligente para esto, las clases combo. Déjenme demostrarlo. Aquí tenemos un botón genérico. Apliquemos nuestra clase de botón existente desde la sección héroe. Una vez que lleguemos a esta sección desde el diseño, en lugar de blanco, necesitaremos usar la versión azul. Pero en lugar de duplicar la clase button, vamos a mantener la misma clase base y agregarle una clase combo Ahora hay dos clases en el botón selector, que es la clase base y azul, que es la clase combo. Cualquier cambio que hagamos a este nuevo botón a partir de este punto no afectará al botón blanco original. Pero la belleza de la clase combo es que todas las demás propiedades que no tocamos siguen siendo heredadas de la clase de botón base. Esto significa que si en algún momento decidimos cambiar el estilo de nuestros botones como hacerlos cuadrados o disminuir el relleno o cambiar el estilo de fuente. Todos esos cambios se reflejarán también en el botón azul. Y Sin embargo, todas esas propiedades que hemos aplicado a la clase combo Blue no se verán afectadas en absoluto. En este caso, los colores de fondo y texto. No es realmente un delito si no usas clases combinadas. Las personas habituales que visitan tu sitio web no van a saber la diferencia si estás usando clases combinadas o no. Y francamente, en realidad no les importa. Pero esto es lo que hacen los profesionales para ahorrar tiempo, producir un código más limpio y tener un mejor control sobre el sitio web. Y claro, quiero que te conviertas en un profesional, crees sitios web de manera eficiente y ganes más dinero ahorrando tiempo durante el desarrollo. Estas clases combinadas se ajustan al árbol de herencia en la parte inferior de la jerarquía. Heredan estilos de la clase base que a su vez heredan estilos de la etiqueta relacionada Relacionado es una palabra importante aquí porque un párrafo no heredará ninguna estrella de H una etiqueta o etiqueta de encabezado, solo de la etiqueta de párrafo Y todas esas etiquetas heredan algunos estilos de la etiqueta body Y cuando anulamos estilos, estamos anulando desde abajo Gana un estilo más específico. Así que la clase combo puede anular todo lo que está por encima , la clase base, la etiqueta relacionada y la etiqueta body. De manera similar, una clase base puede anular todo lo que esté por encima de ella, pero no afectará a la clase combo si esa clase combo está a cargo de ese tipo específico de estilo, como el color del teléfono o el color de fondo, y así sucesivamente. Eso es exactamente lo que significa CSN, hojas de estilo en cascada, si te mueres por Entonces los estilos en cascada de arriba a abajo, algo así como una cascada. Se puede ver cómo se ha agregado la clase combo al menú de herencia. Y este menú nos da la posibilidad de seleccionar cualquier etapa de esta jerarquía y agregarla exactamente esa etapa, por ejemplo, la clase base Por cierto, este menú de herencia también puede mostrar qué etiqueta específica puede controlar tu elemento. El segundo boox rosa dice enlaces. ¿Por qué? Porque los botones son enlaces regulares. Simplemente los colocamos para que se vean como botones. Entonces, si establecemos algunos estilos en la etiqueta de enlaces, entonces notarás esos estilos en tus botones hasta que los sobrescribas. Bien, volvamos a nuestro contenedor. Podemos agregar una clase combo llamada center y luego cambiar la alineación del texto de la fuente. Esto debería centrar todo nuestro contenido como lo queramos. A partir de este punto, si alguna vez necesitamos otro contenedor con alineación central, podemos aplicar esta clase combo igual que aplicaría una clase base regular. Webflow incluso muestra clases combinadas que están vinculadas a esa clase base, por lo que puede elegir una clase combo existente En Voila, obtenemos un contenedor centrado. Un par de cosas que necesitamos estilizar en nuestra sección, el ancho del párrafo y el espaciado. Podemos agarrar el espaciado de nuestro diseño 30 píxeles en la parte superior y 60 en la parte inferior. Y claro, podemos agarrar el ancho del párrafo dos, que es de 566 píxeles. Pero vaya, esto sucede. Sé que podrías estar pensando aquí, ¿cómo es que no se centra? ¿No establecimos la alineación central en nuestro contenedor pero lo miramos más de cerca El texto en sí está centrado dentro de la caja, pero la caja no es ¿por qué no está la caja en el medio? Debido a que el texto del párrafo está configurado para mostrar bloque, y la opción de alineación de texto no afecta a los elementos de nivel de bloque. Solo afecta al texto real, bloque en línea y a los elementos en línea. Entonces, una forma de centrar todo ese bloque de párrafo es cambiar la pantalla a bloque en línea. Esto puede parecer un poco extraño. Funciona en bloque en línea, pero no funciona en un bloque normal, pero eso está bien. Vas a conseguir la caída de ella. Otra forma de centrarlo es estableciendo márgenes de auto como hicimos con el contenedor. Recuerda lo que hacen los márgenes de auto, actúan como resortes que llenan cualquier espacio restante y empujan la caja en el medio. Ambas son soluciones válidas, margen automático o bloque en línea, pero me estoy inclinando hacia usar margen automático porque si me enfrento a algún tipo de error y estoy tratando de arreglar algo y me olvido de lo que he hecho aquí, más probable que asuma que el párrafo está configurado bloque predeterminado en lugar de en bloque en línea. Y eso es todo. Nos vemos bien. Entonces, para recapitular, aprendimos sobre las clases combinadas y cómo pueden ahorrarnos mucho tiempo Las clases combinadas están en la parte inferior del árbol jerárquico, por lo que heredan estilos de todo lo que está por encima de ellas, pero pueden anular cualquiera de esos estilos heredados, y sus cambios no afectarán nada por encima de su nivel 80. Webflow: sección CTA (aplicación de chat): Todo bien. Vamos a construir nuestra sección de llamada a la acción en este video. ¿Qué necesitamos aquí? Hagamos una planificación rápida en nuestra cabeza. Entonces obtuvimos imagen a la izquierda, contenido en el lateral, más o menos igual que nuestra sección de héroes. Empecemos por lo básico. Vamos a agregar una nueva sección y darle una sección de clase que creamos. Entonces vamos a poner un contenedor dentro y darle un contenedor de clase y luego lo llevaremos de ahí. Necesitamos un color de fondo para esta sección. En realidad es el mismo azul, pero lo tenemos al 10% de opacidad Haremos lo mismo en weblo, pero la pregunta es, ¿cómo vamos a editar fondo de nuestras secciones sin alterar las mismas secciones en nuestra página Bueno, si le prestaste atención a la lección anterior, entonces sabrás que podemos aplicar una clase combo a la sección sin necesidad de duplicar. Ahí. Ahora el cambio sólo se refleja en esta nueva sección. Ya que tenemos el diseño similar a la sección héroe, tal vez podamos hacer lo mismo. Echemos un vistazo. Tenemos un flexbox dentro de un contenedor, y este flexbox tiene dos bloques izquierda y a la derecha que se sientan uno al lado Construyamos esto de manera similar. Así que le hemos agregado un bloque div y aplicado la clase flexbox y le hemos puesto otras cajas dentro que están pegadas a los bordes. ¿Por qué? Porque si revisas las propiedades del flexbox, verás que tiene espacio entre aplicado Esto empuja a esas cajas de niños a un lado. Entonces, lo que sea que pongamos dentro de ellos también será empujado. Bien, a la izquierda, pongamos la imagen. Tenemos que exportarlo primero. Vamos a necesitar encontrar la manera de hacer que esta imagen se pegue en el borde izquierdo como la tenemos en nuestros diseños. Pero primero pongamos algo de contenido dentro del bloque correcto. Bien, entonces, ¿qué está pasando aquí? Las cajas izquierda y derecha son niños flexibles, por lo que tienen una flexibilidad para encogerse y crecer para hacer espacio el uno para el otro. Entonces en este caso, el párrafo está empujando las cosas y haciendo que el bloque izquierdo se encoja. Lo que podemos hacer aquí es aplicar un ancho máximo al bloque derecho para que no se vuelva salvaje. Podemos verificar el ancho Figma y ponerlo como ancho máximo, que es 467 pixeles Ahora bien, ¿te preguntas por qué no ancho fijo en lugar del ancho máximo? Porque en pantallas más pequeñas, queremos que se encoja. Queremos diseñar responsivamente. Es que una palabra ahí es sensible. Bueno, ambos queremos diseñar manera responsable y responsiva Entonces, sobre todo, considere usar tamaños máximos y medios en lugar de tamaños exactos. Tengo que señalar aquí porque este bloque es un flex child, todavía se encogería aunque le diéramos un ancho exacto. Esto sucede porque eso es lo que hace flexbox. Él gobierna a sus hijos como quiera. No tienen mucho que decir. Vamos a darle a este bloque algún margen a la izquierda para que no esté tan cerca de la imagen. Bien, ¿ahora qué hacer con nuestra imagen? ¿Cómo lo empujamos hacia un lado? Sé que podemos agregar un margen negativo al bloque parentif Sí, esa es la cosa. Márgenes negativos. Y ahí tienes. Pero esto tiene un pequeño problema. En una pantalla más amplia, el margen negativo que hemos agregado no va a ser suficiente. Para solucionar este problema, podemos hacer dos cosas. Primero, podemos usar unidades VW en lugar de unidades de píxeles. ¿Recuerdas lo que significa VW? Así es. Volkswagen, pero también significa ancho de ventana gráfica. Entonces cuando ponemos algo así como diez VW, significa que el margen será del 10% del ancho del navegador. Entonces a medida que aumente el navegador, esto también aumentará. Todavía no es suficiente. Podríamos agregar algunos puntos extra y recortar la imagen en pantallas más pequeñas. Pero hay una cosa más que podemos hacer es que podemos ensanchar la imagen misma, lo que significa que podemos exportar más de la imagen Cuando hicimos este gráfico, en realidad hemos recortado la imagen Para que podamos revelar más de ello y exportar la versión más amplia. De esta manera tendremos más flexibilidad. Mueve la imagen en el medio, para que todo esté visible y el marco lo esté invadiendo De lo contrario, si lo exportas, entonces va a recortar el contenido basado en el marco. Y agrandar la imagen o básicamente revelar más de ella. Entonces otra vez, pasamos por la misma exportación. Verifique y vuelva a verificar esta opción de DPI alto. De lo contrario, el antiguo valor de ancho se va a mantener y no va a actualizar el ancho de tu imagen. Y ahora tenemos más flexibilidad en cuanto la cantidad de imagen que podemos recortar de la página. Por cierto, esto no es un hack. Esta es una forma válida de hacer las cosas en el diseño web. Lo que importa al final del día no es el método, sino el resultado. Bien, terminemos el contenido. Recuerda lo que hicimos con un botón al jugar con las clases combo. Le daremos a este botón una clase combo de azul y le daremos estilo. Lo mismo que podemos hacer con un botón fantasma. A Usemos nuestro párrafo para agregar espaciado. 30 píxeles en la parte superior y 60 píxeles en la parte inferior. Y en realidad, no importa donde agregues tu espaciado. Incluso podrías usar titular y botones, pero eso me necesitaría para editar dos elementos. Al usar un tipo medio, puedo agregar espacio en la parte superior e inferior. Es menos trabajo y menos cantidad de clases. Entonces, ¿qué tenemos aquí? Hay una línea, y luego hay imagen de estrellas y texto junto a ella. En base a este diseño lado a lado, sabemos que vamos a necesitar un bloque div extra solo para esos dos. Esta vez, vamos a exportar estrellas en formato SVG porque no tienen ninguna fotografía en su interior. Están basados en vectores, por lo que son perfectos para SVG. Como mencioné antes, los SVG generalmente no necesitan ser comprimidos Ya son bastante pequeños. Además, las espigas no necesitan tener la opción de DPI alto activada porque exportan desde Figma en una talla, por lo que no hay necesidad de encogerlas Se verán perfectamente locos en su talla única original. Y aunque los agrades tanto como quieras. A Bien, entonces, ¿cómo ponemos las estrellas y las etiquetas una al lado de la otra? Cada vez que quieras poner algo lado a lado, empieza con flexbox También hay otras opciones, pero flexbox te dará la mayor flexibilidad la mayor parte del tiempo Este flexbox que creamos en la sección hero tiene una alineación central En nuestro caso, queremos que tenga una alineación superior como nuestro diseño, pero no podemos cambiarlo aquí porque eso va a estropear el flexbox original, y va a estropear todas las demás instancias del mismo flexbox Bien, así podemos crear una clase combo y nombrarla como quieras, y luego cambiar la alineación a la parte superior. Todavía hay que arreglar dos cosas, el espaciamiento entre ellas y además todavía no está muy bien alineada en la parte superior. El texto se sienta un poco demasiado bajo, así que tomemos el párrafo y le demos un poco estilo. Margen de 20 píxeles en el lateral, igual que lo tenemos en el diseño y algún margen negativo en la parte superior para moverlo hacia arriba y alinearlo muy bien con las estrellas. Y también vamos a darle un ancho máximo para que el texto salte y corte donde queramos. Vaya, ¿qué pasó aquí? Marque el flexbox. Por supuesto, ha justificado una situación difícil que los empuja al tamaño Simplemente cámbielo a la línea izquierda, y eso es todo. Bien, ahora agreguemos ese divisor horizontal. Oh, espera, no existe tal cosa como una línea Webflow. Las líneas en web están hechas de bloques div como de costumbre. La línea es solo un div que tiene una altura de un píxel o algo así pequeño. Agrega un fondo negro con 15% de opacidad. Dale un ancho. Y agreguemos márgenes superiores inferiores para espaciar el contenido. Fácil peasy. Una cosa te habrás dado cuenta de que a veces nombro clases yo mismo y a veces simplemente dejo que Webflow cree automáticamente una clase para mí. El caso es que siempre debemos nombrar nuestras propias clases. Pero al principio, está bien. Ahora mismo, solo estamos practicando y estamos aprendiendo Webflow, así que no queremos torturarnos nuevas decisiones extra que tenemos que tomar sobre cómo nombrar clases y todo eso Por ahora, solo vamos a nombrar clases importantes como flexbox o container o section, algo que definitivamente vamos a usar, y necesitamos saber a qué les estamos nombrando Y todo lo demás como estos pequeños párrafos o lo que sea, podemos dejar que Webflow decida automáticamente por nosotros. Bien, entonces para recapitular, en realidad, no hay nada que recapitular, ya que no hemos aprendido nuevo concepto en este video, pero hemos aprendido a usar lo que ya conocemos de diferentes maneras, como agregar un margen negativo en como agregar un margen negativo la imagen para empujarla hacia un lado o usar un bloque div de altura de un píxel para crear una línea y un poco más de práctica con 81. Webflow: pie de página (aplicación de chat): En la última sección de esta página, el pie de página, el diseño es bastante simple. Usamos nuestra cuadrícula de 12 puntos para dividir el pie de página en seis bloques iguales. Cada bloque está formado por dos columnas y un bloque está reservado para el espacio entre el logotipo y los enlaces de pie de página. La opción más obvia aquí es usar flexbox. Como es habitual, agreguemos la sección y un contenedor en su interior. Agrega otro bloque y aplica nuestra clase flexbox habitual a él. Ahora vamos a agregar otro bloque div dentro, que nombraremos como columna Pie de página. Voy a darle un fondo temporal y una altura solo para ver lo que estamos haciendo. Y al igual que en nuestros diseños, vamos a usar seis columnas. Estas van a ser columnas de igual ancho, por lo que todo el flexbox se dividirá en seis partes iguales Podemos hacer eso usando puntos porcentuales, 100% divididos por seis, nos da 16.666, y así sucesivamente En lugar de hacer las matemáticas por nuestra cuenta, en realidad podemos hacer que Webflow haga los cálculos por nosotros, al igual que Figma. Dentro del relleno ancho, tipo 100% dividido por seis. Si duplicamos esto seis veces, se puede ver cómo llena todo el espacio. Vamos a agregar los márgenes en el lateral, igual que tenemos en nuestros diseños. Están separados por un espacio de 30 píxeles. Entonces aquí debemos agregar la mitad de eso en cada lado, 15 píxeles margen izquierdo y derecho. De esta manera, los márgenes de las columnas adyacentes sumarán hasta 30 píxeles. Sin embargo, no deberíamos tener márgenes en la primera y última columna porque estos márgenes agregarán espacio adicional al relleno ya existente que es parte de la sección div. Esto podría no ser un gran problema, pero es un gran hábito ser consistente. Podemos hacer esto fácilmente usando clases combo. Simplemente crea una clase combo primero y quita el margen izquierdo y lo mismo en la última columna. Todo bien. Ahora, pongamos el contenido en las columnas correspondientes. Oh, en lugar de usar párrafo para texto normal, tenemos otra opción para texto llamada textblock, que es lo que vamos a usar para esta línea de etiqueta debajo del logotipo Bloque de texto es básicamente un div regular con texto dentro de él. Funciona de la misma manera que un elemento de párrafo, pero tienen diferentes propósitos. Debe usar el párrafo para el texto más largo de varias líneas y el contenido principal de la página y los bloques de texto para todo lo demás que no sea un encabezado, párrafo o un enlace. Puedes usar estos dos indistintamente. El resultado es el mismo, pero es un buen hábito usarlos a propósito porque los motores de búsqueda y lectores de pantalla pueden identificar cómo se estructura tu contenido en la página Otra forma de crear un bloque de texto es simplemente haciendo doble clic dentro de un bloque div normal y comenzar a escribir. Lo convertirá en un bloque de texto. Para los enlaces de pie de página, vamos a agregar elementos de enlace regulares. Marquemos el enlace antes de duplicar de esa manera los duplicados llevarán la clase El color de la espuma ya muestra el color gris, pero por alguna razón, sigue siendo azul en la lona. Este es un comportamiento un poco extraño que parece un error en el lado de Webflow Es correcto que sea azul porque el color gris de la etiqueta body está siendo anulado por etiqueta de enlace más específica, que tiene un color azul por defecto Entonces, en realidad, el panel de propiedades debería estar mostrando azul, no gris, pero podría haber una razón por la que eso no esté sucediendo, que no voy a entrar en este momento porque realmente no está agregando valor a esta lección. Entonces para arreglar esto, solo tienes que seleccionar algún otro color y seleccionar de nuevo el gris. No necesitamos que quede subrayado que podemos eliminar seleccionando no debajo de la decoración del texto. Necesitamos algún efecto hover para este enlace, lo contrario, no van a parecerse a enlaces Simplemente podemos convertirlo en cuello azul en el estado hover Esa es una opción simple y efectiva. Podríamos agregar un efecto de transición dura aquí tal como lo hicimos con los botones, pero no es realmente necesario. No es mucho cambio, así que mantengámoslo sin una transición. Ahora vamos a duplicar. Pero vaya, los pone uno al lado del otro ¿Por qué es eso? ¿Puedes adivinar? Porque la visualización de los enlaces se establece en línea. Eso quiere decir que fluye como texto, que es. Entonces van a ir uno al lado del otro. Si aplicamos el bloque de visualización en su lugar, sabemos lo que va a pasar. Ocupará todo un ancho y se apilará uno encima del otro. Pero este método tiene un pequeño problema, no realmente un problema, más como no una experiencia de usuario ideal. Ya que es un enlace y es un ancho completo, eso significa que es un clic incluso en el espacio vacío A diferencia de nuestra barra de navegación, donde sucede algo similar, los enlaces interactúan incluso en el espacio vacío Pero aquí, la frontera en la parte inferior es una buena representación de que todo es un eslabón. Si solo estuviéramos resaltando el texto, entonces también sería extraño en la barra de navegación Entonces, ¿cómo podemos hacer que se apilen uno encima del otro sin que se estiren de borde a borde? Mediante el uso de flexbox. Podemos darle el diseño de flex padre y darle la dirección vertical en lugar de horizontal. Después línea izquierda, asegúrese de dar esta línea izquierda. De lo contrario, estirará de borde a borde por defecto al igual que un bloque. Y ahí ahora está pila una encima de la otra y el espacio vacío no forma parte del enlace. Bien, vamos a darle estilo a nuestro titular. En lugar de aplicar una clase a estos titulares de pie de página, diseñemos una de las etiquetas de encabezado, S H tres, tal vez. Podría ser el nivel correcto, H dos, podríamos usar para algo más grande. Un titular de nivel medio. ¿Recuerdas cómo darle estilo a las etiquetas? Necesitamos seleccionar una etiqueta del selector, y ahora podemos diseñar todas las etiquetas H tres. Eliminemos el margen superior y agreguemos un margen inferior de 20 píxeles tal como lo tenemos en los diseños. Y ahí vamos. Ahora todas las etiquetas H tres serán de estilo así por defecto. Una cosa notarás que las columnas no se alinean en la parte superior como lo tenemos en el diseño, echemos un vistazo a nuestros encabezados de flexbox Ves que dice una línea central. Lo que queremos es una línea superior en su lugar o estiramiento. Como de costumbre, agreguemos una clase combo a este flexbox antes de hacer cambios para no estropear otras instancias Estirar es mejor porque las columnas vacías también se estirarán y serán visibles. Terminemos los enlaces. Quitar el fondo. Y eso es todo. En este proyecto de práctica, no vamos a vincular estas páginas porque no tenemos otras páginas, pero podríamos conectar el enlace de contactos, por ejemplo, para vincular la dirección de correo electrónico, así que abre una nueva ventana de correo electrónico y el usuario hace clic en él. Solo necesitamos poner la dirección de correo electrónico dentro de este campo. Podemos saltarnos la línea de asunto. Y podemos hacer lo similar para el enlace telefónico. Y también para la dirección de la oficina, podríamos vincular una URL de Google Maps. Revisa abrir nueva ventana para que Google Maps no se abra justo dentro de esta ventana obligando a los usuarios a abandonar el sitio. Y finalmente, agreguemos el texto de copyright en la parte inferior. Vamos a usar bloque de texto nuevo en lugar del elemento de párrafo. I He agregado el bloque de texto dentro del contenedor pero fuera del flexbox Y podemos agregar un margen de 180 píxeles en la parte superior, igual que nuestros diseños. En nuestros diseños, el texto de copyright está bastante cerca de la parte inferior de la página, 30 píxeles de la parte inferior. Pero en Webflow, es mucho mayor porque nuestro bloque de sección tiene un relleno de 90 píxeles. Necesitamos cambiar el relleno 90 a los 30 píxeles. Pero antes de hacer eso, tenemos que agregar una clase combo. Y ahí tienes. Terminamos con nuestra versión de escritorio de nuestra página. Pasemos al modo de vista previa y comprobemos cómo se ve todo. Entonces, para recapitular, hemos construido el pie de página usando un diseño flexbox Hemos dado columnas de pie de página de ancho porcentual para que se encojan y se expandan por igual, y hemos dejado una de las columnas vacía para crear espacio entre el logotipo y los enlaces de pie de página. Hemos aprendido sobre un nuevo bloque de texto de elemento, cómo se usa para texto que no es párrafo en un uso más general. Con esto concluye la sección actual. En la próxima sección, aprenderemos cómo hacer que nuestra página sea receptiva, por lo que se ve hermosa y fácil de usar en cualquier dispositivo. 82. Introducción al diseño web responsivo: Los tiempos del diseño responsive, los sitios web se encogieron en los dispositivos móviles. Muchos sitios web todavía se hacen así hasta hoy. Hace muy poco, estaba buscando alguna información sobre el sistema de pago de Piers y llegué a su artículo de ayuda 0R la página del artículo de soporte, que se ve así Es una versión reducida de su sitio de escritorio. Usar este tipo de sitio web en un teléfono móvil es simplemente súper molesto. Tienes que acercar y moverte y conoces el taladro. Afortunadamente, con Webflow, podemos usar el poder del diseño receptivo y servir a nuestros usuarios diferentes diseños y diseños responsivos muy específicos para sus teléfonos específicos y dispositivos específicos que están viendo De esta manera, todo el mundo va a tener una experiencia óptima con nuestro sitio web. En esta sección, vamos a hacer exactamente eso, hacer que nuestra página de inicio sea receptiva y optimizarla para diferentes tamaños de pantalla. Primero, entendamos cómo funciona Webflow con capacidad de respuesta Dentro del diseñador, podemos ver los interruptores para diferentes dispositivos. El primero es de escritorio. Ahí es donde estamos. Después es tablet, paisaje móvil y retrato móvil. En palabras técnicas, llamamos a estos puntos de interrupción o consultas de medios Funcionan como puntos de control instruyendo al navegador para cambiar estilos de elementos si ancho de un navegador es de cierto tamaño y píxeles Por ejemplo, si hacemos un cambio de estilo en una vista de tablet, entonces este cambio no se verá afectado en un escritorio. Esto es básicamente agregar una regla CSS adicional que dice, yo ventanas del navegador es de cierto tamaño, luego mostrar fondo negro en su lugar. Y si decidimos cambiar el color de fondo en la versión de escritorio, este cambio no se llevará a cabo en la vista de tableta porque estamos anulando el color de fondo Esto usa la misma regla de herencia que todo lo demás. Recuerda cómo las clases combo llevan toda la información de estilo de la clase base. Pero en el momento en que cambiamos un estilo particular en la clase combo, entonces lo estamos anulando permanentemente Por lo que ningún cambio futuro en la clase base afectará para el estilo particular. Digo estilo particular porque esa es una palabra clave importante aquí. Al igual que las clases, lo mismo con los puntos de interrupción, no hemos tocado ningún otro estilo además del color de fondo Entonces todo lo demás se heredará de la versión de escritorio cada vez que hagamos el cambio, como este borde, por ejemplo. Los cambios que hacemos a diferentes vistas solo se aplican a los estilos. Si cambias la estructura de la página o agregas nuevos elementos, eso se reflejará en todas partes. ¿Por qué? Porque estos puntos de interrupción son característica CSS, no parte de HTML En CSS, le damos estilo a las cosas. No podemos cambiar el esqueleto de la página. Solo podemos cambiar los looks, aunque tenemos la capacidad de ocultar y mostrar elementos usando CSS. Entonces, si queremos algo en tableta pero no lo queremos en el escritorio, solo podemos ocultarlo. Esta imagen está oculta en la versión de escritorio, pero sigue siendo parte del HTML y aún dentro del navegador, como puedes ver. Otra cosa a tener en cuenta sobre los cambios de estilo, cuando haces un cambio en una tableta, todos los cambios bajarán en cascada a la pantalla más pequeña. En otras palabras, el paisaje móvil y retrato móvil heredarán los cambios de la tableta y el retrato móvil heredará los cambios del paisaje móvil Puedes sobrescribir estilos en dispositivos más pequeños, pero cualquier cambio en dispositivos más pequeños no afectará a dispositivos más grandes Esto usa la misma jerarquía de herencia como clases. retrato móvil hereda estilos del paisaje móvil, que a su vez hereda sus estilos de tableta, que hereda estilos Cada punto de interrupción del dispositivo tiene un alcance para él. Podemos ver esta gama usando este recisor Canvas. La tableta se expande al máximo de 991 píxeles y se encoge a 768 píxeles Esto significa que 992 píxeles es donde comienza el escritorio, y 767 es donde se convierte en móvil Los cambios que hagamos a cada punto de interrupción se aplican al rango Por eso tenemos que verificar redimensionando el lienzo cada vista para asegurarnos de que responda bien. Por defecto, Webflow muestra los tamaños más comunes en cada vista Cuando cambies el tamaño de ese control deslizante, verás que Webflow muestra dispositivos comunes para ese ancho de píxel específico Esta es una buena manera de ver cuántos dispositivos están siendo afectados por nuestros cambios y asegurarnos de que logramos diseños óptimos y versiones óptimas para los dispositivos más populares. Una cosa a tener en cuenta, no podemos aplicar un estilo específico o dispositivos independientes. Cuando aplicamos estilos en el retrato móvil, entonces ese estilo se establece para todo el rango de todos los anchos y dispositivos cuya resolución de pantalla cae en ese rango Hay una cosa más que quiero mostrarles antes de pasar a la optimización. Podemos restablecer cualquier cambio de estilo que hagamos haciendo clic en el estilo azul y haciendo clic en Restablecer, tal como haríamos con las clases. El restablecimiento eliminará las anulaciones y heredará el valor del primer tamaño de nivel superior Incluso dice aquí, ¿dónde se heredará el estilo después de reiniciarlo En este caso, clase de sección héroe para una versión tablet. El icono al frente muestra que es una versión para tablet. Como atajo, mantenga fuera u opción al hacer clic y se restablecerá de inmediato. Y para la tableta, muestra que volverá a versión de escritorio y se puede ver eso con un pequeño icono de laptop Entonces, para recapitular, podemos cambiar los estilos de nuestros elementos para cuatro tamaños diferentes: escritorio, tableta, paisaje móvil y retrato móvil Para cada uno de estos tipos de dispositivos, también tenemos la capacidad de reducir y expandir el navegador dentro. Por lo que podemos ver claramente cómo quedará nuestra página web para cualquier número de dispositivos, por ejemplo, iPhone seis o siete. Los estilos se heredan de arriba a abajo, de dispositivos más grandes a los más pequeños, y no en direcciones opuestas. Por lo que los cambios en el móvil no van a afectar a la tableta o al escritorio. Pero el cambio en la tableta afectará al móvil. Bien, a continuación, bajaremos y optimizaremos nuestra página para estos dispositivos, a partir de la sección héroe. 83. Receptivo: sección principal - Tablet: Bien, así que comencemos con la sección de héroes. Iremos uno por uno por cada dispositivo y optimizaremos el estilo. Primero, la tableta para ti. ¿Qué temas podemos identificar aquí? Tenemos la imagen que se está encogiendo demasiado por no tener suficiente espacio El contenido de la izquierda tiene un ancho mínimo, si recuerdas, así que eso significa que las imágenes están tomando el hit. Entonces tenemos una barra de navegación que necesita ser arreglada. Tendremos que ver si realmente podemos encajar nuestros enlaces regulares aquí. Si no, nos quedaremos con el menú Hamburguesa y le daremos estilo. La sección de héroes está demasiado estirada por dos razones. Primero, por 100 VH hemos aplicado a esa sección, y segundo, por ese acolchado similar de 20 VH. Veamos si podemos encajar los enlaces de navegación. Entonces, ¿cómo deshabilitamos ese icono de hamburguesa y mostramos los enlaces de navegación Podemos hacerlo desde la configuración de la barra de navegación. Da click en cualquier parte de la barra de navegación y ve a SETI. Como puedes ver, dice ícono de menú para tablet y abajo. Si movemos el control deslizante hacia los teléfonos inteligentes, eso deshabilitará esto desde la vista de la tableta. Como regla general, para la experiencia del usuario, mostrar enlaces es un enfoque mucho mejor que no mostrarlos. Por razones obvias, es más fácil de encontrar y navegar. bienes raíces en tabletas y dispositivos móviles son muy importantes. El espaciado en estos dispositivos tiene que ser mucho menor que lo que haríamos en un escritorio. Así que vamos a eliminar ese relleno grande que se aplica a la sección. En lugar de VH, esta vez, vamos a usar píxeles regulares porque nos va a dar un aspecto más predecible, digamos nueve píxeles. Bien, el espaciado general para el héroe es bastante bueno y no tenemos espaciado hinchado Eso es bueno. Entonces, ¿qué hacer con una imagen de héroe? Todavía es bastante pequeño en comparación. El contenido de la izquierda es demasiado grande y está empujando la imagen. En escritorio, teníamos suficientes bienes raíces para poder usar un titular tan grande, pero aquí no lo hacemos podemos empezar a reducir los tamaños en el bloque izquierdo A Así que sí encogimos el contenido, pero la imagen no está creciendo. ¿Por qué es eso? Debido a que tenemos ajustes de ancho mínimo aplicados al bloque izquierdo, y aunque el contenido se está reduciendo, la caja en sí no lo es Entonces cambiemos este ancho mínimo. Bien, eso se ve bastante bien. Probemos la fluidez de este diseño redimensionando nuestro lienzo Genial. Fluye muy bien en toda la página. Así que el diseño de la tableta para la sección héroe está hecho. Todos los cambios que hicimos no se han reflejado de nuevo en nuestro escritorio. Sigue siendo la forma en que lo dejamos. Ahora pasemos a las vistas móviles. 84. Receptivo: sección principal - Móvil 1: Como mencioné en un video anterior, el estilo cambia en cascada a pantallas más pequeñas. Por lo que todos los cambios que hicimos la tableta también se reflejan en las vistas móviles. Por lo general, este es un buen comienzo y a veces incluso podría proporcionar buenos resultados para los móviles Pero muchas veces no es suficiente, y tenemos que agregar ajustes adicionales en los móviles, Me gusta usar el mismo diseño para el paisaje móvil y el retrato móvil. Utilizo el retrato móvil como mi guía cuando planeo en mi cabeza y trato usar soluciones para la vista del paisaje que también van a funcionar en la vista vertical. Es solo una buena manera de ahorrar tiempo y mantener las cosas más eficientes. Entonces, basado en la vista vertical en el móvil, sé que casi todo va a estar en disposición vertical. No hay mucho espacio para columnas y diseños lado a lado. No hay manera de que estemos encajando imagen de héroe y contenido uno al lado del otro. Tendremos que encontrar una solución de alineación vertical. Por suerte, tenemos flexbox para ayudarnos con esto. La dirección predeterminada de flexbox es horizontal, pero podemos cambiar esa dirección en cualquier momento a la vertical Y las opciones de alineación también se actualizan cuando cambiamos la dirección. Y este cambio de dirección no va a aplicarse a la versión de escritorio. Ahí, todavía está ajustado a la horizontal. Así de increíble es el flexbox. Podemos cambiar el diseño sin alterar la estructura HTML y establecer los estilos en dispositivos específicos. Pero antes de hacer estos cambios, vamos a darle a nuestro flexbox una clase combo porque estamos usando este flexbox predeterminado en otro lugar, por ejemplo, en Footer, y no queremos hacer todos estos cambios en todas las instancias de flexbox Y alineemos al centro el contenido. La vista real del paisaje no es realmente tan alta. Piénsalo cuando sostengas tu teléfono en modo horizontal. No vas a conseguir que la pantalla visible sea tan alta. Va a ser más así. Significa que los bienes raíces verticales son muy importantes para nosotros. Así que intentemos reducir los espacios e intentemos encajar lo más posible. Por ejemplo, este relleno para esta sección. Ya encogimos esto en la vista de tableta, pero deberíamos encogerlo un poco más. Lo mismo aquí para el margen del párrafo. 40 píxeles se ven decentes. foto es un poco demasiado alta y la mayor parte no será visible en una sola pantalla, y el usuario tendrá que desplazarse por ella. Así que vamos a establecer el ancho máximo en esa imagen. Estoy configurando ancho máximo y no alto porque si haces valor de altura, entonces esto sucederá. Cambiar la altura no preserva la relación de aspecto, pero el valor de ancho sí. Así que en las imágenes es mejor usar el ancho para cambiar el tamaño de ellas. Bien, aquí ha pasado algo interesante. La imagen ya no se encoge en una pantalla más pequeña, y se sale de la página. Esto se llama desbordamiento cuando los elementos salen de su caja principal. A menudo te encontrarás con objetos de desbordamiento, especialmente en pantallas más pequeñas. Este desbordamiento puede ocurrir por muchas razones y afecta a toda la página Por alguna razón, la imagen se niega a encogerse, por lo que crea un espacio extra en toda la página. Entonces, ¿cómo es que la imagen ya no se encoge? Porque cuando le dimos a una imagen un ancho máximo de 500 píxeles, le dimos el permiso para crecer hasta los 500 píxeles, así lo hace, ignorando las dimensiones de su elemento padre Este tipo de comportamiento es común con las imágenes. Algunos otros elementos, por ejemplo, un párrafo no va a hacer esto, sino las imágenes lo hacen porque tienen un ancho exacto como parte del archivo. O tiene un ancho especificado en los ajustes. Entonces, por defecto, la imagen siempre intentará crecer hasta su tamaño de archivo original. Y cuando establecemos el ancho máximo en 500, se detiene en 500, pero no se encoge más allá de eso siempre y cuando esté permitido. Para evitar este tipo de comportamiento, Webflow tiene un valor agregado predeterminado para cada imagen que se caiga en un ancho máximo del 100% Esto significa que la imagen ocupará como máximo el 100% de su elemento padre. Por ello, lo mejor es dejar intacto este valor. Esta cosa siempre me dio mucha confusión y errores despistados en mi pantalla Entonces ahora en lugar de estilizar la imagen en sí, prefiero estilizar el padre de la imagen. De esta manera, podemos evitar muchos comportamientos extraños en el final de la línea. Bien, así que vamos a darle un ancho máximo de 500 píxeles al elemento padre en su lugar. Ahora esto se comporta exactamente como queríamos. No crece más allá de 500 y se encoge cuando es necesario Bien, aquí podemos concluir la vista del paisaje. Todavía tenemos este desbordamiento horizontal, pero esto es de otra parte de la página, y nosotros nos encargaremos de ello cuando lleguemos a él. Necesitamos darle estilo al menú de Hamburguesas, pero lo haremos al final una vez que hayamos terminado con todas las vistas de la sección de héroes A continuación, haremos la vista de retrato móvil. Quédate alrededor. 85. Responsivo: sección principal - Móvil 2: Terminemos con la vista de retrato. Aquí casi todo se desborda, pero podemos arreglar todos estos con una medida similar que usamos en vistas anteriores Primero, hagamos más espacio reduciendo el relleno aún más a 30 píxeles. Lo mismo en la barra de navegación En la barra de navegación, el bloque de marca tiene un relleno predeterminado aplicado al mismo. Escritorio y tablet no tienen esto, pero los móviles sí, así que vamos a quitar ese relleno. De hecho me olvidé de notar esto en la vista del paisaje. También está ahí, así que vamos a quitar eso de ahí. Ahora solo necesitamos reducir el tamaño del contenido. Primero, si miras el bloque izquierdo, verás que tiene un ancho mínimo de 300 píxeles sobre él, por lo que se niega a encogerse más allá de ese punto. Eliminemos ese mínimo y lo pongamos en auto. Y vamos a disminuir el tamaño de la fuente del titular. Lo que pasa con el titular es que en la pantalla más estrecha, tenemos que hacerla muy pequeña De lo contrario, obtenemos una palabra por línea, lo cual no es idea. Esta pantalla súper estrecha es para teléfonos antiguos. El uso web de estos tamaños de pantalla es muy pequeño. He comprobado las estadísticas, y ni siquiera parecen ganar el 1%. Así que la mayoría de las veces no salgo de mi camino para que sea perfecto para estos tamaños de pantalla y sacrifico tamaños de pantalla más comunes. Pero hay una manera de hacerlo cercano a perfecto para toda esta gama. En lugar de píxeles, podemos usar unidades receptivas para la fuente. En este caso, VW para el ancho de la ventana gráfica. Si le damos al aficionado unos 14 VW, eso debería encogerse y crecer muy bien con anchos de pantalla Ahora para los botones. Con botones, podemos cambiar la configuración de la pantalla. Entonces, en lugar de que se sientan uno al lado del otro, pueden ir uno encima del otro. Recuerde qué configuración de visualización hace ese bloque de visualización, que los va a estirar de borde a borde. Luego quita ese margen izquierdo y agrega un margen superior para crear una separación, y eso es todo. Nuestra sección de héroes está algo hecha. Nos quedaremos la barra de navegación en el siguiente video. 86. Responsivo: menú de navegación (aplicación de chat): Hasta ahora, estamos balanceando nuestras versiones responsive. En este video, vamos a darle estilo al botón de menú de la barra de navegación o como lo llaman los escolares, el menú de hamburguesas, ya sabes, porque el ícono parece una Ahora mismo, se ve bastante horrible, para no preocuparse. Estilizar esto no es gran cosa. Primero, diseñemos el botón en sí. El icono de menú que está dentro se puede cambiar. No estamos atascados con eso. Si queremos obtener nuestro propio icono y agregarlo en su lugar, podemos, simplemente podemos eliminar el icono y agregar un elemento de imagen dentro del botón de menú, que es un div simple y subir tu propio icono en formato SVG o PNG. Aunque hay un beneficio de simplemente mantener este icono predeterminado porque el color es editable desde la configuración de fuente, y esto facilita el cambio de colores También podríamos construir nuestro propio icono de menú a partir del bloque div. A veces hago esto si estoy construyendo una animación súper elegante para mi cliente Por ahora, sigamos con un icono predeterminado. Primero el color. Vamos a necesitar esto en blanco. Podemos cambiar el color del teléfono a blanco, y eso va a hacer el trabajo. Al aplicar estilo a este elemento, apégate al estilo del elemento del botón de menú en lugar del icono. A continuación, aumentemos el tamaño. Es demasiado pequeño. Podemos hacer esto nuevamente desde la configuración del teléfono, y 30 píxeles deberían ser buenos. Y vamos a reducir un poco el relleno. El relleno es lo que controla cuánto de esto es clicable y visible en el menú desplegable. Y por último, alinémoslo con el logo. Queremos que esté centrado, no flotando en el aire como lo es ahora. ¿Podemos centrarlo? Podríamos continuar y cambiar la pantalla de la barra de navegación a flexbox y hacer todo eso Pero una opción más simple es simplemente agregar un margen superior en el botón y luego tirarlo hacia abajo. Llegamos a dimensionar esto a ojo. Se puede ver mejor en la vista de retrato, y 27 o algo así parece una buena opción. No necesitamos agregar una animación Hover aquí porque solo se muestra en móviles donde no usamos un mouse, así que hover no así que hover Ahora vamos a darle estilo al interior del menú. Estilizar a ciegas no es agradable, así que podemos abrir el menú y darle estilo mientras está abierto Podemos hacerlo desde la configuración, seleccionar cualquier elemento de la barra de navegación e ir a configuración y luego hacer clic en Mostrar junto a la opción de menú Esto mantendrá el menú abierto hasta que le demos estilo. Hay otras dos opciones de tipo menú, pero no soy un gran fan de esas. Me gusta esta versión desplegable predeterminada. Es más fácil trabajar y necesita menos estilo. Ahora entendamos la estructura de todo el menú. Este bloque de menú de perilla es exactamente el mismo bloque que contiene todos nuestros enlaces en la vista de escritorio. En escritorio, no tiene ningún fondo y está dispuesto horizontalmente. Pero si le hacemos algún cambio en el escritorio, esos cambios también se llevarán a la vista móvil. Lo mismo ocurre con cualquier cambio de diseño. Entonces, si algún día ves enlaces móviles, arreglados extrañamente comprueba si has realizado algún cambio en la versión de escritorio Y dentro de este bloque de menú Knob, tenemos todos los enlaces incluyendo el botón. Entonces, para darle estilo a todo el menú primero, vamos a darle estilo al menú de navegación, y luego vamos a darle estilo a los enlaces dentro. Vamos a darle a esto un color de fondo diferente. Nuestro color negro del diseño se ve bastante bien. Agreguemos el mismo acolchado en los lados como nuestra sección de héroes. De esa manera seremos consistentes con nuestra grilla. Ahora mismo, los enlaces están entallados un poco por dentro porque tienen su propio relleno, que vamos a eliminar una vez que le demos estilo a los enlaces También agreguemos relleno superior e inferior, pero conviértalo en 30 píxeles en lugar de 60. Ahora mismo, tenemos estrellas que se están heredando del escritorio, como el subrayado en el hover y los acolchados Primero arreglemos ese relleno. No necesitamos acolchados laterales. Y escojamos una parte superior e inferior iguales para mantener la agradable separación entre los eslabones. 20 píxeles se ven bien. No necesitamos un efecto hover porque es para dispositivos móviles ¿Cómo eliminamos eso del estado estacionario, que podemos encontrar aquí bajo estados Haga clic en X debajo del estilo de borde para deshabilitar el borde butto Cuando pruebes esto, verás que aún aparece esa frontera. Eso es porque tenemos esta frontera habilitada no solo sin flotar, sino también en un estado regular Por lo que necesitamos sacarlo de un estado regular también para evitar este comportamiento gracioso. Y ahí ahora no tenemos flotar. Bien, ahora el botón, primero, vamos a deshacernos del margen izquierdo. A continuación, cambiemos la pantalla a bloque en línea. En este momento está configurado para bloquear. Por eso se estira así. Por alguna razón, el botón se alinea en el medio. Eso significa que algún tipo de propiedad en el elemento padre está haciendo esto. Hay dos propiedades que podrían alinearlo al centro. Primero, el diseño flexbox, pero nuestro menú near no es flexbox, así que eso no es Y segundo, es una alineación de texto regular, y eso tendría sentido porque los elementos de bloque en línea se pueden alinear usando alineación de texto. Pero si comprobamos la alineación del texto del menú Nav, está configurado a la izquierda. Y esto es engañoso porque en realidad, no está puesto a la izquierda Si cambias la propiedad a otra cosa y luego vuelves a poner a la alineación izquierda, esta vez hará lo que dice. Esto parece un problema de Webflow. Podría estar equivocado, pero parece que hay una alineación central predeterminada en el bloque Menú de navegación, y Webflow, por alguna razón, no refleja esto en los estilos Siempre que te encuentres con algo como esto, solo sigue tu lógica, y si lo que ves no tiene sentido, entonces juega con los estilos, y a veces notarás que solo son fingir. Una cosa a tener en cuenta, hay que aplicar la alineación al padre, no al botón en sí. alineación del texto del botón solo alineará el texto dentro del botón. Bien, vamos a disminuir el margen de este botón para que coincida con el resto El espaciado que usamos entre enlaces es de 20 píxeles arriba más 20 inferiores, total de 40. Así que vamos a sumar esto a 40 aquí. 20 desde el último enlace y 20 para el margen superior. Y lo mismo para el margen inferior. El espacio real en la parte superior es de 30 píxeles del relleno del menú y 20 píxeles del relleno del enlace Nav para que coincida con este total de 50 píxeles, agreguemos el 20 inferior en el botón. Ahí dentro, eso se ve bien. Podemos mantener el efecto hover aquí. No lo necesitamos, pero tampoco está haciendo ningún daño. Y a veces en los botones, es bastante agradable cuando lo presionas y algo así cambia el estado. Por último, agreguemos el mismo color de fondo en la hamburguesa Ahora, para esto, es importante que agreguemos ese color de fondo en el estado abierto, porque si agregamos un fondo en un estado genérico, entonces obtendremos el fondo cuando el menú esté incluso cerrado. Cambiar estilos para el estado abierto es algo así como cambiar estilos para el estado estacionario Tiene que mostrar esta etiqueta verde, pero el estado abierto no aparece en la lista desplegable del estado En cambio, el estado abierto debe habilitarse desde la configuración abriendo nuestro menú. Simplemente abrir el menú no es suficiente. Asegúrate de que esta etiqueta verde esté ahí. Puede que tengas abierto el menú de navegación, pero esta etiqueta de estado abierto no aparece, que significa lo que sea que vayas a editar, no va a editar en el estado abierto. Debe hacer clic en el botón de menú una vez más para que se actualice la insignia. Ahora puedes ver que aparece la etiqueta abierta. Esto significa que las ediciones que hagamos ahora se verán reflejadas únicamente en el estado abierto Ahora podemos cambiar el color de fondo, y también vamos a redondear la esquina superior para que se vea más pulida. Pero en lugar de redondear las cuatro esquinas, solo vamos a redondear los dos primeros y tener los dos inferiores planos De esta manera, se conectarán con el menú. Para ello, vamos a necesitar seleccionar la opción de esquinas individuales dentro los bordes y luego seleccionar los dos primeros y luego ponerlos algo así como seis píxeles. Probemos nuestros resultados en la vista previa. Y ahí, todo se ve genial. También se ve genial en la vista de retrato. No necesitamos cambiar nada excepto por un pequeño detalle. En retrato, tenemos diferente relleno de página. En paisaje, tenemos 60, pero en retrato, usamos 30. Ni siquiera necesitamos abrir el menú para esto, seleccionar el menú Nab del navegador y cambiar el relleno 60-30 y listo Por lo que hemos estilizado con éxito el menú Hamburger para dispositivos móviles Cambiamos el color y tamaño del icono usando simplemente los estilos de fuente. Hemos jugado con los acolchados y los márgenes del botón de menú para alinearlo muy bien en la barra de navegación Luego desde la configuración, abrimos el menú y le damos estilo al elemento del menú, le dimos el fondo que queríamos y ajustamos el relleno. También hemos realizado pequeños cambios en los enlaces de Nav y en un botón de navegación, eliminamos el cursor estacionario de los enlaces y modificamos los acolchados eliminamos el cursor estacionario de los enlaces y modificamos los Y hemos aprendido a cambiar el estilo del menú sólo cuando está abierto. La sección Hero se hace aquí para todas las vistas del dispositivo. En los siguientes videos, continuaremos con el resto de la página. 87. Capacidad de respuesta: sobrecarga: Ahora vamos a bajar y optimizar la siguiente sección de esta página. Y mientras hacemos eso, vamos a aprender un nuevo concepto llamado desbordamiento. Esta sección se ve bastante bien en tablet y no necesita mucha edición. Sólo una cosa que voy a cambiar aquí es el relleno superior e inferior de la sección. Como mencioné antes, necesitamos un espaciado un poco más ajustado en dispositivos más pequeños, por lo que 60 píxeles deberían ser buenos En el paisaje, tenemos un desbordamiento. Cuando obtengas este tipo de desbordamiento en la página, encuentra el elemento que va más allá de sus márgenes padre, esa va a ser la causa del problema. Aquí es obvio que el párrafo está causando esto porque está fuera de los límites del contenedor e incluso de la sección. La razón por la que no se está encogiendo es porque tiene un ancho fijo Cometimos un error en el escritorio, y en lugar de establecer un valor de respuesta como ancho máximo, le dimos un ancho fijo. Ahora bien, debido a que esta no es una configuración óptima ni en el escritorio, vamos a darle estilo a esto en la versión de escritorio y dejar que los estilos luego en cascada todo el camino hacia abajo. Y antes de seguir adelante, ¿ entendamos realmente qué es desbordamiento? ¿Es un error o es una característica? En realidad, el desbordamiento es una característica muy útil. Tiene su propio entorno dedicado en los estilos. Permítanme demostrar cómo funciona esto. Tenemos un bloque div aquí. He agregado a este div ancho y alto exactos. Es de 900 píxeles por 300 píxeles. Si ponemos más contenido en este bloque div, el contenido se desbordará. ¿Por qué? Porque tiene una altura definida, 300. Entonces no va a crecer más allá de ese tamaño. Si eliminamos ese valor de altura, verás que la caja crecerá con un contenido. Pero a veces eso no es lo que queremos, y queremos mantener la caja en dimensiones exactas. Si revisas la configuración de desbordamiento de este bloque div, verás que está configurado como visible. Esto significa que aún se mostrará el contenido rebosante. Si lo configuramos en oculto, el contenido será recortado, y no se va a mostrar sin importar lo que hagamos, aunque intentemos desplazarnos dentro de él Pero para tales casos, tenemos otra opción para hacer que el contenido dentro se desplace. Pero esta opción no es muy buena porque siempre muestra una barra de desplazamiento horizontal y vertical, aunque no haya suficiente contenido para desplazarse. Para ello, tenemos una mejor opción, el último auto. Esto muestra la barra de desplazamiento solo si hay algo para desplazarse. La barra horizontal se ha ido, y si hay contenido que se desborda verticalmente, entonces mostrará la barra de desplazamiento Esta es siempre una mejor opción si estás creando un contenido desplazable Solo para anotar en tu computadora, puedes o no ver esta diferencia. Esto depende de la configuración que hayas elegido dentro de tu sistema operativo, dentro de Mac o Windows. Otra cosa a tener en cuenta, los ajustes de desbordamiento se establecen en el elemento padre, no en los hijos. Entonces en este caso, lo colocamos en este bloque div blanco. Si lo ponemos en el párrafo, eso no va a hacer nada. Además de desplazarse por el contenido, otro uso común para configuración de desbordamiento es cuando queremos clip de contenido, y eso suele hacerse con imágenes Nunca queremos recortar texto probablemente. Por ejemplo, si tenemos una sección con una imagen y queremos acortar ese exceso de esa imagen, podemos establecer el desbordamiento oculto en el elemento padre, y eso va a acortar la imagen. Bien, terminemos nuestras vistas móviles. Todavía tenemos esta brecha en la página, pero eso es causado por algún otro elemento en una sección diferente. Entonces nos encargaremos de ello una vez que lleguemos allí. Ahora, hagamos algo con este aspecto muy estrecho. En la sección héroe, hemos cambiado el relleno a 30 píxeles, pero nunca lo hicimos para esta sección. Entonces hagámoslo. Y vamos a disminuir el acolchado vertical también para ser más económicos en el espaciado. En realidad voy a disminuir esto también en el paisaje porque el espacio vertical es aún más importante en el paisaje. Y restablece el valor en retrato, si los has cambiado en algún momento, es mejor reheritar valores que repetir los estilos porque solo agrega código extra, que no necesitamos Y finalmente, hagamos algo con los titulares, demasiado grandes para el móvil. Ahora, recuerden, el rumbo no es una clase. Le damos estilo a la etiqueta. Entonces así es como vamos a darle estilo a esto. Seleccione todos los encabezados H one en el menú desplegable del selector y luego cambie los estilos Eso cambiará todos los encabezados H one para retratos móviles, pero no afectará a otros dispositivos Bien, 35 pixeles funcionan bastante bien. Por último, qué hacer con esa imagen. Es demasiado pequeño para ser cualquier cosa. Hay una cosa que podemos hacer. Podemos hacer que la imagen salga del costado y recorte el desbordamiento usando lo que acabamos de aprender. Primero, tenemos que aumentar el tamaño de la imagen. Cuando se trata de cambiar los tamaños de imagen en las entrevistas de respuesta, nunca use estos ajustes. Esto cambia la configuración HTML de la imagen, y eso va a cambiar el tamaño en todas partes en todos los dispositivos. También podrías arrastrar la imagen para cambiar el tamaño, pero tampoco uses eso Cambia ese mismo ancho que está dentro de los ajustes. Lo que queremos cambiar en cambio es el estilo CSS de la imagen porque estilo CSS nos da flexibilidad para tener diferentes tamaños en diferentes dispositivos. Para ello, selecciona la imagen. Ves este ancho máximo del 100%. Eso le dice a la imagen que no crezca más grande que su contenedor padre. Entonces por eso se está encogiendo. Dado que este es un escenario raro en el que queremos que la imagen crezca realmente más allá del contenedor e incluso más allá de la página, vamos a editar esa configuración exacta y establecerla en algo así como 170% Y ahora se sale de la página y se sienta más grande, ahora podemos ver un poco más de detalle de la imagen. Pero tenemos imagen desbordante así. Entonces, ¿qué hacemos? Necesitamos establecer desbordamiento oculto en el elemento padre para recortar la imagen. Pero no podemos establecer eso en el padre directo, que es el contenedor porque el contenedor no va hasta el borde. La sección sí. Entonces necesitamos poner esa estrella de desbordamiento en la sección, pero vamos a agregarle la clase combo para que no afecte a todas las secciones. Y ahí vamos ahora, la imagen está recortando justo en el borde de la sección Así que hemos aprendido importante concepto de desbordamiento y cómo usarlo para nuestro beneficio. Desbordamiento visible es una configuración predeterminada, por lo que mostrará cualquier contenido que salga de los bordes del elemento padre. Oflow hidden va a eclip el contenido tal como lo hicimos aquí, overflow scroll y Auto dejará que el contenido se desplace dentro del contenedor Pero la opción de desplazamiento mostrará la barra de desplazamiento persistente incluso cuando no haya nada para desplazarse. 88. Responsivo: sección CTA (aplicación de chat): A la sección de acción no se ve mal desde el principio. Podemos hacer un par de ramitas para aumentar un poco el tamaño de la imagen Primero, creo que el titular es un poco demasiado grande. No fue un problema en la sección anterior donde había más espacio y etiquetas más pequeñas. Pero aquí, se hace difícil encajar más de una palabra por línea. Esta es una buena regla general para usar. Si puede caber al menos dos palabras por línea, entonces el tamaño de la fuente podría ser demasiado grande. Si estamos haciendo un sitio web completo, alcanzaríamos más limitaciones de este tamaño de titular, así que prefiero cortarlo en un trasero. Recuerda, este titular no es una clase. Es una etiqueta predeterminada H one, así que eso es lo que vamos a darle estilo. Por defecto, la etiqueta no está seleccionada. Tenemos que hacer eso cada vez que estamos estilizando. Así que solo voy a ir con el tamaño del teléfono de 35 Pixel que usamos en la pantalla del móvil y solo hacer que por defecto sea un tamaño H para todas las pantallas receptivas desde la tableta hasta el móvil. No obstante, el titular aún termina envuelto exactamente de la misma manera en tres líneas. El caso es que, a medida que reducimos el tamaño del teléfono, la imagen empuja el bloque de contenido y reduce el espacio que está disponible para el titular Esto mata nuestro esfuerzo por encajar el titular en dos líneas. Entonces voy a dar un ancho mínimo. 340 parece bueno. Comprobemos la fluidez. Bonito. Avanzando. Aquí vamos a hacer lo que hicimos con una sección de héroes. Cambia la dirección del flexbox a vertical y la línea a la izquierda No olvides crear primero una nueva clase combo, o va a alterar todos los flexbox a lo largo de la página El bloque de contenido no se alineó porque tiene un margen establecido a la izquierda. Eliminemos ese margen. A ver. La imagen es demasiado grande en la versión más amplia. Vamos a establecer el ancho máximo en la imagen, pero mejor aún en el propio bloque izquierdo, como mencioné anteriormente, en cualquier momento que pueda, trato de darle estilo al contenedor de la imagen en lugar de a la imagen en sí, excepción del caso en el video anterior donde directamente tuvimos que darle estilo a la imagen. No te preocupes. No necesitas memorizar cada regla y recomendación que te doy Aprendes cometiendo estos errores y adoptando tus propias reglas y hábitos, y Webflow es de gran ayuda con este procedimiento de aprendizaje Puedes ver todo visualmente y puedes ver los estilos que están habilitados y que podrían estar causando el problema sin necesidad de leer las líneas de código. Incluso para aquellas personas que quieran aprender a codificar, seguiría recomendando aprender primero con Webflow porque simplemente es una ayuda y guía increíbles, y todo en Webflow funciona precisamente de la misma manera que lo hace el código normal Este diseño alineado a la izquierda ya no funciona en esta página porque, como puede ver, hemos hecho bastante alineación central en la mayor parte de la página, y de repente tener esta alineación izquierda, y destruye el diseño consistente de esta página Entonces un mejor enfoque sería tener este un diseño central, también. Y especialmente en los dispositivos móviles, diseño del centro es una forma bastante familiar y bastante común de hacer estos diseños. Ahora, la imagen en sí puede dejarse como está en la línea izquierda porque la forma en que hemos diseñado esta imagen, simplemente no va a funcionar bien y no va a quedar bien si solo la abofetamos en medio de la página, pero al menos podemos hacer que el contenido sea línea central Y eso va a hacer que se vea mucho más consistente con el resto de la página, aunque la imagen todavía se quede una línea porque esa es imagen, entonces esa es la idea de la imagen que es una especie de clips y se va fuera de la página. Entonces, ¿cómo podemos hacer esto? ¿Cómo podemos hacer una alineación central? Ahora, tenemos un par de pocas opciones, pero una forma de hacerlo es porque la razón por la que este es un bloque div y es un nivel de bloque. Por lo general vamos a estirar de borde a borde. Y la razón por la que no se estira todo el camino es porque tiene un ancho máximo aplicado a él. Entonces lo que podemos hacer es simplemente eliminar este ancho máximo aquí, y se estirará todo el camino borde a borde. Y entonces lo que podemos hacer también es darle alineación de texto al centro. Y cualquier cosa que sea texto y cualquier cosa que esté en bloque de línea como estos botones, todos se alinearán en el centro de la misma. Para este divisor, lo que podemos cambiar es ahora este divisor no es bloque inline. Por eso no se centra porque es a nivel de bloque. Y en realidad, el navegador y el HTML ven este bloque div ya que ya está de borde a borde. No hay nada que alinear en el medio porque es un nivel de bloque. Así se comporta el nivel de bloque. Pero la opción que tenemos aquí es que podemos hacer esta opción de centrado Lo que esto hará es aplicar márgenes de auto en los laterales. Y estos márgenes de auto llenarán cualquier espacio vacío restante que sea, se llenará de márgenes. Y lo mismo aquí, el mismo margen aquí, mismo margen aquí obviamente empujará esto en medio del bloque. Así es exactamente como funcionan nuestros contenedores. Tienen márgenes de auto en los laterales, y por eso se mantienen en el medio, pesar de que no están en bloque de línea. Este tipo de aquí, esto ya se está estirando de borde a borde, pero es un flexbox Lo que podemos hacer es simplemente cambiarlo a una alineación vertical, y solo asegurarnos de que tengas algún tipo de clase de combate o una clase única aplicada a esto, y no es esta clase flexbox genérica que estamos usando en todas partes Y luego cambiar a vertical, y luego simplemente cambiar la alineación en el centro. Y aquí podemos crear un hueco. Podemos usar esta característica de brecha, que crea que también podemos agregar obviamente un margen en la parte superior o margen en la parte inferior de las estrellas, eso también funciona bien, pero esta es una pequeña característica muy útil. Podemos usarlo y darle cierta brecha en el medio, y eso se ve bien. Potencialmente podemos reducir un poco este espacio. Algo así como 60. Y luego aumentar un poco el espaciamiento aquí entre este contenido, y es muy ajustado. Entonces vamos a darle este 30 en la parte superior, 30 en la parte inferior. Entonces se ve un poco mejor y espaciado. Bien, creo que esto ahora se ve mucho mejor. Probemos la capacidad de respuesta. Bastante bien. Y una cosa que podemos hacer ahora es, como pueden ver, nuestra imagen en realidad va cortando demasiado afuera. Lo cual no necesitamos hacer. Tuvimos que hacer esto cuando estábamos haciendo en este escritorio porque estamos tratando de agarrar tratando de hacerlo también para las pantallas muy grandes. Pero aquí tenemos más margen de maniobra. Yo creo, para que podamos ver que es lo máximo. Ese es el máximo que irá. Entonces podemos basándonos en este tamaño, podemos reducir este margen negativo. Hasta aquí. Entonces hay más de la imagen visible, y ese tipo de llena un poco más de espacio y se ve un poco mejor con el diseño general. Por último, la versión retrato. Bien, aquí tenemos que quitar el ancho mínimo que se establece en el bloque derecho. Bueno. El impuesto a los titulares es bastante grande para el retrato, así que vamos a reducir eso también. 27 píxeles se ven a la derecha. Eso es. Todo luciendo elegante. Acabamos de quedar pie de página, y ya terminamos. 89. Responsivo: pie de página (aplicación de chat): Entonces, ¿qué tenemos aquí? Se trata de un flexbox que tiene columnas en su interior. A las columnas se les aplica este ancho porcentual. Vamos a tener en cuenta las vistas móviles al crear una solución aquí. Vamos a necesitar algún tipo de alineación vertical. Podríamos ir por opción vertical desde el flexbox, pero eso establece todo vertical, incluso cuando hay espacio en los lados Una mejor opción es usar una función de envoltura. Hemos discutido esta opción en video flexbox, pero déjame refrescar tu memoria Por defecto, flexbox intenta encajar a todos los niños en una sola línea, ya sea línea horizontal o línea vertical Pero cuando habilitamos la opción wrap, entonces los niños saltarán a la siguiente línea o envolverán a la siguiente línea uno por uno según sea necesario. Cambiemos la configuración de justify a la hay esta columna vacía, que era agradable en el escritorio, pero no necesaria para las vistas de tablet y móvil. Nos gustaría que las columnas se alinearan a la izquierda sin espaciado adicional. Podemos eliminar esta columna vacía porque también va a eliminar del escritorio. Pero lo que podemos hacer es escondernos usando estilos. Vamos a darle una clase combo para que no nos metamos con otras columnas y luego desde las opciones de visualización, seleccione Ocultar. La exhibición en no propiedad oculta el elemento y libera el espacio que ocupaba ¿Qué más? Las columnas tienen los márgenes izquierdo y derecho. Entonces, cuando salten a la siguiente línea, va a crear este espacio extra. Eliminemos ese margen izquierdo y solo utilicemos derecho, pero asegúrate de editar la columna que solo tiene una clase global. La primera y última columna tienen una clase combo aplicada a ellas. Lo usamos para fijar algunos márgenes en el escritorio. Eso es bastante bueno. Y agreguemos un margen inferior para que las columnas de la segunda línea no se atasquen en la primera línea. En tamaños más pequeños, verás que realmente no se envuelven correctamente, y en su lugar, las columnas se aprietan muy apretadas. Eso es porque tienen el ancho porcentual aplicado a ellos, lo cual está bien en el escritorio, pero se vuelve innecesario en este tipo de diseño. Entonces, deshagámonos de él. Ahora que el ancho de columna es automático, crece con el contenido dentro, y eso hace que la primera columna sea demasiado ancha. Tenemos que darle un ancho máximo para que no crezca tanto. Y eso es mejor. Y todo el asunto envuelve muy bien a través de todas las vistas. Una última cosa que debemos ajustar es el espaciamiento entre los derechos de autor y los enlaces Creo que 60 pixeles serán mucho mejores. Echemos el último vistazo a todo el asunto. A Y eso concluye todo el desarrollo de nuestra página. En la siguiente sección, vamos a repasar la finalización de nuestra página, cosas como la publicación, SEO, etc. Esto no significa que hayamos terminado completamente con diseñador de Webflow y el proceso de desarrollo Todavía hay más por aprender cosas como CMS y formas e interacciones y animaciones que pueden hacer que cualquier sitio web se vea tan increíble y tan fresco y tan moderno y tan profesional. Pero todos esos conceptos los vamos a aprender en otras partes de este curso. Una parte, los vamos a aprender dentro este gran proyecto de cliente que vamos a hacer de principio a fin para que tengas experiencia práctica sobre cómo comenzar todo con un cliente con cosas como brief de proyecto y wireframing y diseños y luego pasar a Webflow y desarrollar CMS y blog dentro de Webflow y luego interacciones y luego finalmente entregarlo todo, publicando con un dominio personalizado, todas esas cosas. Y también algunas partes voy a poner dentro la parte avanzada de este curso porque no necesitas de todo. No hace falta que aprendas todo de una sola vez. Entonces pongo todo lo que no es habilidad esencial y conocimientos esenciales para que comiences freelance dentro de la parte avanzada. Entonces, una vez que llegas a esa parte final de este curso que está avanzado, ya sabes todo lo que es esencial y que te puede hacer comenzar con el freelancing Y mientras eres freelance mientras buscas empleo, también puedes continuar con partes avanzadas y perfeccionar tus habilidades y mejorar 90. En vivo: SEO (aplicación de chat): El diseño y la construcción de la página web están completamente terminados. Ahora tenemos los últimos bits para terminar y luego publicar. Primero, necesitamos establecer los ajustes de SEO. SEO significa optimización de motores de búsqueda y su conjunto de prácticas sobre cómo hacer que una página más atractiva para los motores de búsqueda como Google, pink, y do dot go. El SEO es un campo completamente separado, y no vamos a sumergirnos en los detalles en este curso. No obstante, hay algunas cosas que absolutamente tenemos que encargarnos. Para Estrellas, estos son título y meta descripción de la página. Estos son los que suelen aparecer cuando tu página aparece en Google. Este es el título, y esta es la meta descripción. Si no configuras esto, Google buscará un texto aleatorio de tu página Bueno, no del todo al azar. Tiene sus propias reglas, pero queremos tener el control de esto y elegir qué es exactamente lo que nos gusta mostrar. Estos los podemos cambiar bajo la configuración de la página, que podemos encontrar dentro del panel Páginas. Ve a la página que quieres editar. En este caso, la página principal. Todas las demás páginas que tenemos para nuestro lado aparecerán aquí, y cada una de estas páginas tiene su propia configuración individual, que se puede acceder desde este ícono de engranaje. Déjame colapsar estos ajustes para que podamos revisarlos. Bajo general o grupo, solo tenemos un nombre de página. El nombre de esta página es lo que aparece en Webflow. Es un nombre interno, así que puedes nombrar lo que quieras aquí. Bajo control de acceso, podemos gestionar quién puede ingresar a esta página y quién no. Esto es útil cuando necesitas proteger tu página con contraseña. Por ejemplo, si se trata de una página interna de la empresa con datos sensibles y solo ciertas personas tienen acceso a ella. En la configuración de SEO, tenemos dos valores de etiqueta de título y meta descripción. Si dejamos este título en blanco, entonces Webflow utilizará el nombre de la página por defecto A medida que escriba estos campos, verá una vista previa de resultados de búsqueda, que es una buena manera de concretar ese título y descripción increíbles. Hay muchas formas diferentes de nombrar tus páginas. En las páginas de inicio, es una práctica común poner primero el nombre de su empresa o un producto, luego seguido de algún tipo de línea de etiqueta Por ejemplo, Chat App, sencilla aplicación de chat en equipo. Y dentro del relleno de descripción, vamos a describir la página. Entonces como esta es una página de inicio, describiremos el producto en sí. Google y otros motores de búsqueda truncarán la descripción más allá de cierto recuento de caracteres, generalmente hasta 155 caracteres Los ajustes de gráficos abiertos son similares a los del SEO, pero esta es información que aparece al compartir contenido en redes sociales como Facebook, Twitter, Link DIN y Pinterest. Por ejemplo, cuando compartes un enlace a un auto que acabas de comprar, Facebook puede sacar la descripción del título e incluso una foto de la configuración de gráfico abierto de esa página. Si estos ajustes están vacíos, entonces Facebook extraerá información aleatoria o, a veces, ninguna información en absoluto. Podemos poner título y descripción personalizados, pero también podemos verificar estas opciones para hacerlas mismas que SEO. En cuanto a la imagen de gráfico abierto, para eso, necesitamos insertar un enlace a la imagen, lo que significa que tenemos que subir la imagen en algún lugar y luego obtener el enlace. Podemos subir la imagen directamente en Webflow en nuestros activos y luego obtener la URL desde allí, o simplemente usar la imagen ya cargada y obtener el enlace para ello Esta es una URL de esta imagen la cual se carga en servidores Webflow Copia esta URL y pégala en el campo de imagen. Ahora, puedes ver una vista previa de cómo podría quedar cuando el enlace a esta página se comparte en redes sociales. Otros dos ajustes no están relacionados con el SEO. La configuración de búsqueda del sitio, que puede parecer que están relacionados con SEO y búsqueda de Google, pero no lo son. En realidad, se trata de la funcionalidad de búsqueda dentro de nuestro sitio web. Verás que podemos agregar componente de búsqueda en nuestro sitio web. Donde los usuarios pueden buscar los contenidos de nuestro sitio web. Esto es útil si tenemos un sitio web basado en contenido como Blog, ecommerce, algo donde la búsqueda tiene sentido. En sitios web pequeños como el sitio web de una empresa o un lado de cartera, realmente no es necesario. La última opción es el código personalizado. No va a mostrar nada en este momento porque necesitarás agregar un plan de hosting para desbloquear esta función. Se ve algo así. El código personalizado nos da la posibilidad agregar nuestro propio código externo a la página. Por lo general, es para aplicaciones de terceros a las que queremos conectar a nuestra página web o algún tipo de plugins de JavaScript o cualquier cosa que suele ser externa, cosas como trackers, analytics, y todo ese tipo de cosas, cualquier cosa que esté fuera de Webflow, generalmente, y podremos simplemente insertar el código personalizado aquí Bien, entonces hay una cosa más que tenemos que hacer antes de publicar el letrero. Necesitamos comprimir todas nuestras imágenes. Así que ve al panel Activos, expande el panel, luego selecciona todas las imágenes y haz clic en Comprimir. Y haz la compresión de todas las imágenes de una sola vez. Va a llevar algún tiempo, sobre todo porque hay múltiples imágenes. Entonces vas a tener que esperar antes publicar o puedes publicarlo ahora, y una vez realizada la compresión, luego volver a publicar el sitio una vez más Bien, todas nuestras imágenes ahora han sido comprimidas y convertidas a formato AV. Se puede verificar dos veces. Se puede ver en la configuración del archivo de una imagen, cómo se ha convertido a formato AV y cómo se ha reducido el tamaño del archivo. Y solo asegúrate de revisar tus imágenes. Y solo para verificar que no haya ningún problema con la compresión. Ya mencioné anteriormente, AVV hace una compresión bastante grande El tamaño del archivo se reduce realmente en gran medida a un tamaño realmente pequeño, lo cual es genial, pero a veces puede producir algún tipo de artefactos y un poco de problemas con las imágenes. Realmente depende de la imagen, de qué tipo de imagen es. Sólo para asegurarse de que no hay ninguna de esas cosas. Y si notas en algunas de las imágenes que hay algunos problemas con una imagen, entonces puedes probar una conversión web P y luego hacer la conversión una vez más para esa imagen específica en web P. Y eso es todo. Ahora nuestro sitio web está listo para su publicación, lo que vamos a hacer en la siguiente lección. Entonces, para recapitular, cada página nuestro sitio tiene SEO y otras configuraciones Utilizamos el título y la meta descripción para controlar cómo muestra nuestra página en los resultados de búsqueda en sitios como Google. Además de esto, podemos establecer ajustes de gráficos abiertos, que es una especie de SEO, pero las redes sociales como Facebook, Twitter, etc. 91. Publicación (aplicación de chat): Así que por fin publiquemos nuestra página. Esta es una tarea bastante sencilla. Vaya a la publicación y haga clic en Publicar para seleccionar un dominio. Dale un momento. Y ahí. Nuestra página web Pixel Perfect está activa y operativa como un daño. Toda la optimización responsive que hemos hecho se puede probar redimensionando y reduciendo la ventana del navegador Los botones y enlaces no están operativos este momento porque no los hemos vinculado a nada. No vamos a hacer esto en este proyecto de práctica, pero lo haremos con este gran proyecto de cliente en el que vamos a trabajar. Inicialmente, su sitio web será publicado en el subdominio Webflow Para poder publicar nuestro sitio web en un dominio personalizado, necesitamos agregar un plan de hosting de pago, y luego vamos a poder publicar nuestro sitio web en nuestro propio dominio. Los planes de Webflow'shsting tienen un precio muy decentemente. Este sitio web solo necesitaría el plan básico. sitio web basado en CMS es el que tiene un blog u otro tipo de contenido dinámico que necesita ser administrado a través de CMS, que es el sistema de gestión de contenidos. Construiremos un sitio web basado en CMS en el próximo proyecto. No voy a demostrar cómo publicar esto en un dominio personalizado para este proyecto, pero lo voy a mostrar para el siguiente. En un plan gratuito, somos capaces de cambiar el subdominio de nuestro sitio web, ir a publicar y editar este campo a lo que quieras, siempre y cuando no se tome Piensa haz clic en Guardar. Y como puedes ver en el botón publicado, esta es ahora tu nueva URL. Una última cosa que tenemos que cambiar es este pequeño icono. A esto se le llama un fabrico. este momento está mostrando un Webflow, favicu predeterminado, pero podemos cambiar esto desde Aquí hay dos iconos. Primero está esta fabrique que se muestra en una pestaña de navegador y la segunda es Web Clip. El clip web es un icono que aparece en el iPhone cuando guardas tu sitio web en una pantalla de inicio Si no sabes de lo que estoy hablando, Safari tiene esta función para marcar una especie de sitio web como marcador. Puedes agregarlo a una pantalla de inicio y se guardará junto a todas tus aplicaciones, luciendo como cualquier otra aplicación. Nunca uso esta función, pero como tenemos una opción, deberíamos cambiar este icono aquí. Tendremos que crear un icono en Figma, que es solo un archivo de imagen normal, y necesitamos crear algún tipo de icono a partir de nuestro logotipo Simplemente agregue un nuevo marco con el tamaño de 256 por 256. Pintado de azul y tal vez darle esquinas redondeadas. Después copia el logo, elimina todo menos la letra C. Agrandarlo exportó en PNG, y ese va a ser nuestro clip web. En cuanto al Fabricant, solo necesitamos escalar esto a 32 por 32 Un redimensionamiento regular no va a hacer el trabajo. No va a escalar tanto el rectángulo como el texto proporcionalmente En cambio, necesitamos usar la herramienta de escala, que podemos encontrar debajo de la herramienta de movimiento. La herramienta Escala cambia el tamaño de los objetos agrupados proporcionalmente. Entonces, si hay imágenes de texto rectángulo, va a bloquear las proporciones de todas las capas dentro y luego redimensionarlas todas juntas Es una pequeña herramienta muy práctica. Y volver a exportar PNG. Y luego subir cada uno a su lugar dedicado. Las dimensiones de estos iconos tienen que ser exactamente esas 32 por 32 y 256 por 256. Wepplo no te permitirá subir ningún otro tamaño. Ahora vuelve a publicar para ver que los cambios surtan efecto. Solo una pequeña nota al margen para los usuarios de safari, Safari no actualiza el favicon de inmediato, incluso cuando lo refrescas varias veces, va a mantener el viejo Hace esto porque guarda el favicon en caché y lo extrae de ahí en lugar de recargarlo y agarrarlo de la fuente todo el Entonces si necesitas actualizar el fabrico y ver en Safari, la última versión, lo que necesitas hacer es que necesites borrar el historial de navegación o vaciar el caché, y puedes hacerlo desde aquí desde el historial, borrar el historial o me gusta usar si tienes esta pestaña desarrollada entonces es más fácil porque solo borrará el caché en lugar del historial de navegación, que tiene algunas otras cosas ahí dentro. Vaciar la caché, y ahora cuando la vuelvas a cargar debería actualizarse, ahí vas al último favican Eso es todo lo que nuestra página web está en vivo. Se ve genial y es nítido y funciona bien, es rápido y es receptivo y simplemente increíble. Observe lo rápido y sin esfuerzo que se carga la página. Eso es Webflow es uno de los increíbles beneficios porque sus servidores son increíblemente rápidos y simplemente están muy bien organizados y optimizados para las páginas y optimizados para las páginas sitios web que están integrados en Y también hemos hecho un buen trabajo porque lo construimos con un código limpio muy agradable, y el sitio web simplemente está funcionando bien y se carga bastante rápido. Tan buen trabajo para nosotros. A continuación, vamos a aprender sobre Webflows o característica llamada Editor. Quédate alrededor. 92. Publicación: Edición: ¿Alguna vez he mencionado lo increíble que es Webflow? Esto es lo increíble que es. Además del diseñador, tiene otra vista llamada el editor, que puedes acceder desde aquí. Editor es un lugar para que los clientes y colaboradores editen el contenido del sitio web, y pueden hacerlo bien en el sitio en vivo, literalmente en el lado vivo. No es feo el manejo de contenido y los editores de texto. Simplemente puede hacer clic en el contenido y comenzar a editar. Esto es tan increíblemente útil para los clientes que ni siquiera puedo poner en palabras. Sus clientes no suelen ser expertos en tecnología, y lo último que quieren hacer es averiguar el trabajo de los sistemas de administración de contenido Y lo último que quieres es tu cliente te envíe un correo electrónico cada vez que necesite algún tipo de pequeño cambio en el titular para eliminar un coma o agregarle una nueva palabra Este tipo de solicitudes se te arrastrarán después de hayas finalizado y enviado tu proyecto a los clientes Bueno, si te pagan por hora, está bien, pero si te pagan por proyecto, entonces estás trabajando gratis. No podemos cambiar ningún estilo o maquetación desde el editor que esté dentro del diseñador. Aquí solo se trata de contenido, ya sea texto, imágenes o enlaces. Puedes cambiar una imagen simplemente haciendo clic en ella y subiendo una diferente También puede cambiar una URL de destino de enlaces o el texto. Los cambios no se reflejarán en el sitio en vivo hasta que haga clic en el botón Publicar. Después de eso, todos los cambios se pondrán en marcha instantáneamente y es así de simple. Y obviamente, estos cambios se verán reflejados también en el diseñador, que podemos cambiar desde aquí. En caso de que queramos restringir el acceso a algunas partes del contenido desde el editor, dentro del diseñador, podemos ir al panel de configuración de elementos y verificar que los colaboradores puedan editar este elemento. Y ahora el titular no será editable dentro del editor. Dentro de la configuración del proyecto, podemos agregar colaboradores adicionales. Esto es independiente de la cuenta principal, y va a dar acceso a la gestión de contenido del sitio. Esto le da acceso al editor para enviar formularios, ajustes de página, crear nuevos elementos de CMS como publicaciones de blog, etc. Entonces ese es el editor bastante simple, pero poderoso. No hay nada que realmente tengamos que hacer al respecto. Solo quería mostrarte los alrededores porque no suelo trabajar con un editor porque trabajo a través del diseñador, pero esto suele ser algo que les enseñas a tus clientes y les dices, Bien, entonces esta es la opción y así es como lo haces. Así es como editas las páginas y así sucesivamente. Webflow en realidad tiene tutoriales sobre el editor, así que a veces puedes simplemente enviar el video tutorial así, o puedes grabar tu propio video tutorial, depende de ti Y con eso concluye la tercera y gran parte de este curso, que fue sobre Webflow y desarrollo En la siguiente parte, vamos a hacer un proyecto de clan completo, quedarnos. 93. Parte 44: proyecto de CLIENTE desde el inicio hasta terminado: en esta parte del curso, vamos a diseñar y construir un proyecto completo como lo estábamos haciendo para el cliente. Te llevaré exactamente por el mismo proceso que yo mismo voy. Ahora tenemos un nuevo proyecto. Practicarás exactamente lo que está involucrado en el proyecto rial y darás cada paso desde Project Brave remolque, encuadre alambre, reuniendo inspiración, diseñando y luego construyendo y entregando la enchilada completa al cliente. Vamos a usar todo lo que hemos aprendido hasta ahora. Además, vamos a aprender mucho más concepto que aún no hemos cubierto, sobre todo en flujo húmedo. Por ejemplo, CMS, que es sinónimo de sistema de gestión de contenidos en su básicamente lloró, fluye powerhouse sobre cómo hacer sitio web dinámico y contenido dinámico. Por ejemplo, blawg, donde podemos sacar información de la base de datos en lugar de simplemente construir una página estática para cada artículo. Simplemente podemos tener la base de datos con contenido dentro de esta base de datos como un titular, el sub ella, el nombre off, el autor y todo y luego solo diseñar y construir una plantilla para la página del artículo y luego tener el base de datos tirar el contenido para diferentes páginas a medida que nosotros como carga la página pobre y como el usuario interactúa con un sitio Web, el segundo gran tema que vamos a cubrir sus interacciones. Es así como construyes elementos y objetos interactivos dentro del flujo de trabajo que pueden animar, moverse, desaparecer cosas como formas de arte pop, soltar los botones animados de Tom o animaciones de desplazamiento que algo sucede, esconde, revela o simplemente cambia la forma en un pergamino y mucha marca. Muy bien, así que vamos a sumergirnos enseguida. 94. Proyecto de cliente: buen diseño de diseño: Por lo general mi proyecto de sitio web comienza por el cliente enviándome un correo electrónico un párrafo de descripción de lo que quieren. Y por lo general va como, Oh, hey, Vacco. Nos gustaría sitio web para nuestra app on, pero no tenemos pantallas ni contenido ni nada más. No obstante, es muy difícil crear un sitio web entero fuera. Sin contenido, sin resumen del proyecto y sin pantallas de aplicaciones ni brio, información valiosa que puedo usar para el sitio web que está realinear. Así funcionan las cosas normalmente, y no obtienes un proyecto perfecto con todo el contenido y fotos y pantallas de aplicaciones o lo que sea listo para que empieces a diseñar. En un principio, no tenía ah, proceso en mi plan era solo alearlo y simplemente ponerme en marcha con el proyecto y ver a dónde va . Esta fue una idea terrible por tres razones. Primero me quedaría atascado. Estaría mirando la pantalla sin tener idea de qué hacer y qué diseñar y pensar. Acabo de tener un bloque creativo o algo así. Pero no es de extrañar. ¿ Cómo se puede diseñar algo cuando no hay nada que diseñar? El segundo problema era grande para mí porque pasaría mucho tiempo diseñando algo y creando y al menos llegando a gustarle una página o tal vez tener una página. Y enviaría este resultado a mi cliente para una especie de acuerdo en la dirección creativa y mirar y sentir que iba hacia. Y entonces muchas veces obtendría un rechazo completo y que hubiera como, ya sabes, no, no nos gusta este estilo. Queremos algo más como esto. Esto fue muy frustrante para mí al principio, porque me pongo un poco agitado Ted y me voy a empezar a decir Todos estos tipos no saben de qué están hablando. No tienen un buen gusto de diseño y simplemente tirándome a mí mismo. Sólo di que está bien, bien. Y sólo vuelve a trabajar. Y Crumpley Bork en un nuevo look. El tercer problema fue éste. Empieza mi trabajo y llega a algún tipo de resultados finales con, ya sabes, pasando por diferentes iteraciones y finalmente acordando el diseño. Pero a menudo el maniquí. El contenido era contenido ficticio dentro, por lo que ese impuesto era contenido ficticio. No había fotos a veces realmente, porque tal vez necesitaba foto. Hasta el momento, los usuarios para testimonios o reseñas o foto auto miembros del equipo o algo así. Y no son para darle a mi cliente la tarea del dedo del pie, también , ya sabes, proporcionarme y escribir y reunir todo ese contenido que lo necesito. Pero muchas veces el cliente regresaría con una estructura diferente para su contenido. Entonces, por ejemplo, si diseñara una sección con tres columnas, el cliente regresaría con una copia para dos o tal vez cinco columnas. Pero este tipo de contenido es óptimo. Si tenemos tres o cuatro columnas para dos, simplemente no es muy bonito. Y para cinco, es simplemente demasiado contenido para caber en una fila. Esto no fue absolutamente culpa de mi cliente. Era mío porque voy a tener un proceso. No tenía un diseño adecuado ni un proceso de proyecto por recorrer ahora, lo que está volando. Pero en el momento en que descubrí este y creé un proceso de diseño adecuado y en proceso de proyecto para mí, las cosas han cambiado drásticamente. Es el proyecto que se acaba de mover más suave y agradable. Ah, más rápido, últimas situaciones por las que pasar y esto es gracioso. Pero diseñar en realidad se hizo más fácil en el pasado. Yo sólo estaba tratando de tomar todo el proyecto en una sola entrada, igual que llenarme con un Brito completo de una sola vez, y era demasiado para manejar. Yo estaba en guiar a mis clientes a través de diferentes pasos por los que teníamos que pasar en mi plan era sólo, ya sabes, ir a la habitación, me encerré y luego una semana después surgió con este sitio web brillantemente bien diseñado y luego sólo esperar y orar para que a los clientes les encantara. Entonces, aquí hay un proceso de tres pasos por el que pasan los grandes diseñadores antes de que incluso duelen el primer píxel. El primer paso es definir un resumen de proyecto. Se trata de una breve descripción de metas y detalles del proyecto. El proyecto Brave hace preguntas importantes como ¿Cuál es el objetivo de la página web y para quién sirve ? Una respuesta a estas preguntas alineará tanto a ti como a tu cliente en la misma página, asegurándose de que todos lo hayan tenido hacia la misma dirección. El segundo paso es crear un tablero de humor y obtener comentarios de tus clientes al respecto. Esto es algo que ya sabemos hacer, y lo hemos hecho para reunir inspiración para nosotros mismos. Pero si compartimos esta bota aburrida con nuestros clientes de lo que podemos obtener más beneficio de ella Al compartir una pizarra de humor con tu cliente, puedes clavar un gusto y una mirada y sentirte fuera de tu proyecto porque hay muchos estilos diferentes que puedes ir con, cierto, puedes ir un poco más fotografía teniendo para tu página web puedes comprar pero ir un poco más. Ilustración pesada, un poco más colorido, menos color para la derecha. Por lo que hay muchas avenidas diferentes que puedes tomar con tu proyecto y tus diseños. Y muchas veces los clientes tienen gustos muy específicos. Por lo que no quieres enterarte de alguna información porque sí les cuesta explicarse y no saben que eres el diseñador y tienes acceso a toda la inspiración del mundo. Ya sabes, estos sitios web como lisian nuestros intereses y regazo le presto libro y tú vas ahí y encuentras inspiración. Reúnes esto y trabajas esto para que tengas acceso a este tipo de inspiración. Pero no hacen que los sitios web que no ven que podría no ser tanto. Están ocupados con hacer otras cosas bien, y al compartir esta información con ellos, puedes clavar y especie de carne en la misma página fuera de la mirada y sentir, porque si no lo haces que lo que estás haciendo es que tienes que pasar por reiteraciones hasta llegar a su tipo de gusto y que sólo tanto trabajo por hacer, ¿ verdad? ¿ Por qué pasaría por diferentes iteraciones para finalmente clavar el sabor en Just general , mirar y sentir fuera del sitio donde podemos simplemente agarrar ejemplos de otros sitios web y otra inspiración y mostrarles OK, ¿cuál te gusta esto para esto? El tercer paso de este proceso es crear marcos de alambre. Los marcos de alambre son una especie de boceto áspero fuera del sitio. Un esqueleto. No nos preocupamos por colorista o tipografía o cualquier necesidad de un codicioso de diseño. Esto es, por ejemplo, o marco de alambre fuera de YouTube. Muestra qué va a dónde y cuál es el contenido. Muy sencillo. No pasa mucho diseño que parezca que escribió un niño, pero el encuadre del vino tiene un gran beneficio porque eres capaz de discutir con tu cliente. Una parte muy importante de ese sitio web quiere el contenido porque el diseño siempre tiene que acomodar el contenido porque el diseño fuera de nuestro párrafo pequeño a línea va a ser muy diferente de un diseño fuera de un documento de 5000 pupilo, ¿no? Por lo que hay que clavar el contenido. Qué ordena las fotos para el software hace que los botones vayan y todo, Y hacer esto durante el proceso de diseño pasando por las situaciones durante el proceso de diseño es solo mucho más trabajo y más derrochador porque tienes que preocuparte por cada píxel único en la persona que llama y sombrea diferentes colores y sombras y todas esas cosas, lo cual es absolutamente poco importante a la hora de discutir el contenido y cuando cambia el contenido y una estructura, entonces hay que volcar todo lo que que diseñaste ya pierdes tu tiempo y luego empiezas de nuevo desde cero. Pero durante el encuadre de alambre, es muy sencillo porque no hay mucho que diseñar. No tienes que preocuparte por hacer todo alineado o píxel perfecto, correcto, y no te frustras si Climb decide que quieren reestructurar todo el contenido fuera de la página mantiene a todos felices y en el mismo dirección a la meta final. Por lo que las tres etapas del buen proceso de diseño nuestro resumen del proyecto abordaría y estamos enmarcando al final de cada etapa. Tienes que compartir los resultados con tu cliente y estar de acuerdo con ellos y firmar eso, causa si no haces eso, entonces especie de bits el propósito que necesitas para obtener la retroalimentación del cliente para asegurarte de que no vas a un mal dirección cuando mantienes a tus clientes en el loo. En primer lugar, sienten que están en control del proyecto y les encanta esa idea. Quieren saber cómo van las cosas. En segundo siempre te muestra que eres un profesional, que tienes un proceso de proyecto en marcha, y ellos saben que entienden que lo son. Están en los grandes sombreros. Y una vez que finalices todos esos tres pasos, es cuando te mueves al proceso de diseño y los resultados de diseño que produzcas van a ser mucho más apreciados y como por nuestros clientes porque eran parte del proceso. Y esto es exactamente lo que vamos a hacer en las próximas lecciones. Se pegan alrededor 95. Proyecto del cliente: resumen del proyecto: El proyecto debe comenzar con un resumen del proyecto, pero a menudo no lo hace. Un resumen de proyecto o un resumen de diseño es una especie de plan del proyecto. Es una especie de guía y acuerdo entre dos partes que vas a moverte en cierta dirección y vas a obtener el resultado determinado. Hay diferentes formas de pasar y crear resúmenes de proyectos, pero tengo algo así como a mi manera porque no encuentro una manera oficial y tipo de industria adoptada para ser muy útil porque son muy grandes, demasiada información en ella y muy no muy relevante para los negocios cotidianos y escenarios cotidianos de la vida real como trabajar por cuenta propia en up trabajar y enviar alguna información a alguien de todo el continente y no muy útil para pequeños proyectos. Quizás sea útil para corporaciones descomunales, y así es como definen el resumen del proyecto porque tiene que pasar por comités y juntas directivas en ese tipo de Pero cuando estoy trabajando principalmente con pequeñas startups e interpreneurs y pequeñas empresas, no necesitan nada Su principal preocupación es el tiempo y el dinero y llegar a ese proyecto y superarlo lo más rápido posible. Entonces, para mí, el resumen del proyecto es básicamente respuestas a ciertas preguntas que necesito saber. Y estas son preguntas que hago en la reunión inicial, así que tengo una reunión inicial con mis clientes, y ahí discutimos algo, y tengo algunas preguntas preparadas Para ellos, les hago estas preguntas, y me dan respuestas, y luego al final de la reunión, que dibujo un breve proyecto de esta reunión, básicamente respondiendo las mismas preguntas en el papel, enviárselas para que estén de acuerdo en que no malinterpreté algo, o tal vez tuvimos una falta Las dos preguntas más importantes que hago son, ¿cuál es el objetivo del sitio web y para quién es? Realmente no se puede diseñar una solución a un problema antes de saber cuál es el problema que está tratando de resolver. Necesito conocer al público objetivo y quién va a estar usando este sitio web. Un sitio web para una multitud joven en sus 20 años va a verse un poco diferente a un sitio web para gerentes corporativos en sus 40 y 50 años. Para nuestro proyecto, ya he preparado un resumen de diseño, y es una plantilla que creé a partir de mi propio brief de diseño que uso, y puedes usarla para tus proyectos. Tómalo y guárdalo. Esto es lo que puedes hacer con él. Cuando llegues a una reunión, un chat o a una conversación por correo electrónico con tu cliente o un empleador, mantén este documento a tu lado y hazles estas preguntas. Posteriormente refinarás estas preguntas y agregarás más o eliminarás algunas para que funcione para ti. Una vez que hayas terminado con una reunión, llénalo, puedes hacerlo durante la reunión o más tarde sin diferencia. Después exportarlo como PDF. Y envíelo a tu cliente para que verifique dos veces si están de acuerdo. Esto hará dos cosas. Primero, esto va a ser gran ayuda en realidad para tu cliente, porque lo que sucede a menudo es que mis clientes no saben lo que quieren. Y esto es algo que no esperarías, pero sí saben que quieren un sitio web. Pero a menudo no saben por qué exactamente quieren el sitio web, qué tipo de sitio web quieren, y tienen muchas ideas diferentes, y esto es muy común con los terpreners, porque muchos terpreners, están en su cabeza, y solo hay millones de ideas diferentes simplemente zumbando en su cabeza, y están Y tienen problemas para estructurar su idea y estructurar su mente de manera adecuada. Al revisar estas preguntas y respuestas y luego leerlas esto más tarde en el formato de breve diseño, les das la capacidad de crear claridad en sus tenidos. Entonces ambos son de la misma página. Lo segundo que va a pasar es que aparecerás más profesional. Esto demuestra que sabes lo que estás haciendo y tengo un sistema específico en su lugar. Debido a esto, los clientes confiarán más en ti y en tus diseños. Tendrán una mejor experiencia al final del día porque obtendrán lo que realmente querían porque ahora confían en tus diseños. Y estarán más felices con los resultados, es decir, lo compartirán con sus amigos que a menudo son ellos mismos interprenurs, trayendo más clientes y más trabajo Bien, así que ya he llenado este breve. Imaginemos que ya tuvimos una reunión con nuestro cliente, y hemos acordado este breve. Nuestro cliente es una startup que está construyendo una plataforma de colaboración en equipo. El objetivo del lado es inscribir a los usuarios para el acceso anticipado. Esto significa que la plataforma aún no está lista, pero la compañía ya quiere comercializar y generar interés. Esta es una práctica común con startups para tener un sitio web durante su proceso de desarrollo o cada vez que están construyendo su producto, ya que de esa manera pueden generar cierto interés porque van por ahí buscando inversionistas o intentan obtener publicidad en relaciones públicas y medios, por lo que siempre necesitan un sitio web a menudo antes incluso de tener un producto. El público objetivo de este sitio web son otras startups y equipos que tienen empleados trabajando desde diferentes ubicaciones. cliente quiere un sitio web moderno usando fotografía en lugar de ilustraciones y con un aspecto limpio y minimalista El sitio web va a tener un blog. Esto significa que vamos a construir un CMS, y va a necesitar recopilar envíos de formularios. Eso es. Así de sencillo debería ser el resumen del proyecto. Se llama breve, no es así, así que hazlo corto y dulce. 96. Proyecto de cliente: Moodboard: El tablero es algo que siempre hice, pero no lo compartiría con un cliente. Lo mantuve como proceso de diseño semi interno. Al principio, pensé en el diseño como un proceso artístico donde te encierras en la habitación y semana después se te ocurren la habitación y semana después se te ocurren diseños increíbles que sorprenden por completo a tus clientes Pero eso está lejos de la realidad. A menudo tus clientes tienen ciertos sitios web y estilo en su mente. Y si simplemente vas sin estar de acuerdo en este terreno común y te encuentras con algo de la nada, más probable es que vayas a perder sus expectativas Y tal vez se te ocurra algo mejor. Pero si estás perdiendo sus expectativas, entonces los estás decepcionando. Si estás de acuerdo en un moodboard, entonces los diseños que creas, las posibilidades van a parecerse a lo que tus clientes Manteniéndolos felices y viniendo por más. Ya has practicado la creación de un moodboard, así que vamos a saltarnos esa parte donde recojas En cambio, usaremos un moodboard que ya he creado para el producto de colaboración en equipo Acabo de quitar y agregar un par de tiros más. En el archivo Figma, encontrarás este moodboard Si quieres un poco más de desafío, puedes usar el moodboard que has creado en la misma asignación, aunque te recomendaría usar este y seguir adelante Imaginemos que ya acordamos este moodboard con el cliente Echemos un vistazo a estos ejemplos y podremos empezar a notar secciones y elementos que nos gusten Esto, vamos a usar como sección de héroes. Me gusta cómo el verde contrasta con la imagen en el fondo También me gustan estos diseños de tarjetas, similares a este. Desde aquí, me gusta mucho esta sección, similar a lo que ya hicimos en el ejercicio de remix También me gustan bastante estas tarjetas testimoniales, y me encanta ese color azul, así que quizá usemos esa Es un azul bonito y vibrante y se ve muy bien en una foto. Además, realmente encaja con el tema de la colaboración en equipo. Empresas, especialmente las más grandes como Blue. El azul es un color excelente porque demuestra limpieza, transparencia y conducta adecuada Pero claro, tienen que ser buenos blues porque hay algunos que apestan. Aquí, me gustan las secciones divididas, y también me gusta cómo se incorporan elementos de interfaz con la fotografía le da más vida a las fotos. También he agregado esta toma de pie de página. A mí me gusta este estilo oscuro, así que voy a hacer un pie de página oscuro como este. Compartir un Moodboard, usar Figma es muy fácil. Figma es una gran herramienta para colaborar, a diferencia de otras herramientas como sketch o photoshop que requieren el uso de aplicaciones de terceros La colaboración Figma está integrada en su interior. Aquí está cómo. En la esquina superior derecha, tienes el botón de compartir. Asegúrese de habilitar el acceso a enlaces públicos, lo contrario no podrán ver el archivo y luego haga clic en copiar. Entonces solo comparte este archivo con tus clientes. No podrán editar ni hacer nada con él excepto comentar. Pero esta es una buena manera de compartir el moodboard que querías mostrarles Puedes pedirles que comenten ciertas cosas que les gustan y ciertas cosas que no. Aquí hay un pequeño truco. Abre una ventana de incógnito del navegador y pega ahí tus enlaces, podrás asegurarte de que puedan acceder al archivo y ver qué pueden hacer con él Odio cuando comparto algo con alguien y me dicen que no lo ven. Eso es simplemente mala experiencia de usuario y me hace sentir avergonzado cuando eso sucede Como diseñadores web, una buena experiencia de usuario tiene que convertirse en el camino de nuestras vidas. Deberíamos hacer nuestro mejor esfuerzo para asegurarnos de que los clientes, compañeros y obviamente los usuarios tengan una buena experiencia con todo lo que compartimos o creamos Porque si no se le pregunta entonces ¿quién? Al verificarlo dentro del navegador de incógnito, puedes verlo exactamente de la manera en que ellos lo verían Porque si solo lo pegas dentro tu navegador normal donde estás conectado dentro de Figma, entonces solo estás viendo tu propia vista personal Bien, pueden ver el tablero, y desde este menú, pueden acceder a otras páginas del archivo. No obstante, no pueden comentar a menos que se registren o se registren. Y si están firmados, obtendrán este tipo de visión. Esto se ve como una vista regular. Pueden ver todas las páginas y capas a la izquierda. La función de comentarios es muy útil cuando trabajas con proyectos Para comentar, tenemos que dar click en esta opción de anuncio mostrar comentario. Verás que el cursor del ratón cambia a este pequeño globo. Podemos dejar un comentario en cualquier parte de una página. Entonces, cuando compartes un moodboard con tus clientes, indícalos sobre cómo hacer comentarios y obtener sus comentarios sobre los ejemplos Te pueden decir qué estrellas les gustan. Comentando partes específicas en lugar de las capturas de pantalla completas Dentro de tu vista, verás que estos comentarios se reflejan instantáneamente. Simplemente habilite la opción de comentario, incluso se mostrarán en el lado derecho. No hay ninguna tarea después de este video ya que estarás usando exactamente el mismo moodboard Esto se puede encontrar en el mismo archivo donde se encontraba el brief del proyecto. Es solo en una página diferente. A continuación, vamos a crear marcos de alambre. Quédate alrededor. 97. Proyecto de cliente: por qué el encuadre del cable de alambre: antes de tener mi proceso de diseño puede tener abajo. A menudo luchaba con llegar a diseños. El problema era que no tenía contenido para diseñar. Realmente no se puede elegir una tipografía correcta. Si no conoces el impuesto con el que va a ir, puedes diseñar una sección de beneficios. Si no sabes cuáles son los beneficios, puedes elegir la foto adecuada. Si no sabes cuál es el impuesto al lado. Puedes diseñar una página de equipo si no sabes cuántos miembros del equipo hay. Una página del equipo con 55 integrantes del equipo va a verse muy diferente a una página que solo tiene tres integrantes del equipo con una biografía realmente larga. Es en un momento en que empecé a trabajar con esta increíble agencia de Australia. A diferencia de mí, tenían un proceso de diseño adecuado. El primer app fue anotar el contenido fuera de una página antes de hacer cualquier diseño. Trabajar con ellos me metió en el hábito de escribir el contenido primero, y me di cuenta de lo mucho que me estaba torturando al tratar de diseñar un pedazo de página en blanco. Una vez que tienes el contenido, las decisiones de diseño se vuelven obvias y te llegan fácilmente. Ahora. Obtener contenido del cliente no es muy sencillo. La mayoría de las veces, no tienen experiencia en escribir el ejemplar fuera de la página justo ahí. No redactores. No son diseñadores. No tuvieron mucha experiencia con esto, por lo que no saben cómo hacerlo correctamente. Y cuál es la mejor manera de estructurar una página o un sitio web, y necesitan nuestra ayuda para esto. Muchos diseñadores no hacen esto, y le pasan la papa caliente al cliente, y obviamente vendrá el cliente. Quién va a volver con un contenido que no es muy óptimo para una página, y resultado final fuera del diseño no va a ser tan bueno, es decir. El cliente no va a obtener los mejores resultados, y no van a regresar por más negocios al diseñador. perder situación para ambos lados. Entonces, ¿estoy sugiriendo que debamos escribir contenido para nuestros clientes? Bueno, una especie de. Pero en realidad no. Aquí es donde entran los marcos de alambre. Generar contenido para mí es parte de la etapa de encuadre de alambre. Esto es lo que hago es empezar a crear marcos de alambre. Empiezo a pensar en la estructura del contenido y tratando de desarraigar la página de la mejor manera posible, basado en el objetivo fuera de esa página en particular beat home page o alguna otra página de préstamos o lo que sea ahora es que poner texto bloques en la página, empiezo a llenar esos bloques fiscales con texto de ejemplo con algo que creo que podría ser útil para esta sección en particular. En realidad no soy cooperador, y el inglés ni siquiera es mi primer idioma, pero todavía escribo contenido tanto como sea posible. Si eres inglés no es muy bueno, no te preocupes por eso. Eso no es un problema porque no fuiste duro para tus habilidades de inglés. Te contratan para el diseño. Tan solo estar al frente con tu cliente y explícalos. Sea lo que sea que estés poniendo, ahí está tu ejemplo y sugerencias para ayudarlos, y deben escribir su propio contenido. Y lo que también puede hacer es que no tengas que escribir esa copia. Puedes tomarlos prestados y copiarlos de otros sitios web. Por lo que durante tu fase de inspiración, probablemente pasaste por diferentes sitios web y encontraste algunos ejemplos que son de un starups similares o negocios similares, justo para que puedas agarrar el impuesto desde ahí y copiarlos y pegarlos eso. Pero siempre asegúrate de explicar que no estás escribiendo contenido para ellos para que no te estés juzgando por ese contenido en que recoges este ejemplo de otros sitios y tal vez incluso competidores. Y si estás un poco en lo correcto y consideras tomar un copyright en curso, por lo que puedes agregar eso a tus servicios. los clientes les encantará por quitarle esa parte de las manos. Ganarás más dinero, ganarás ganar. Y después de que termine con el encuadre de alambre, compartí con mi cliente y les pido que reescriban el contenido y quiten cualquier cosa si quieren y lo llenaron en sus propios pupilos. Tener un layout ya con contenido de pre campo hace que sea más fácil para ellos. Teoh, derecha esa copia. Porque de lo contrario entonces es muy difícil para él entender lo que quise decir ahí y cuál sería el propósito de la destrucción, tal vez, y estas columnas y lo que deberían escribir en eso. Pero si les doy ejemplos, entonces ellos consiguen la idea y fácilmente pueden salir con algo fuera de su cuenta. Evito usar Lauren Gibson y texto ficticio así tanto como sea posible Pero a veces tenemos que hacerlo, y no podemos evitarlo, porque a veces tengo que crear una página para o un sitio web para un complicado servicios financieros que no tengo ni idea de cómo describir. Entonces en ese caso es que voy a usar el impuesto ficticio o tal vez las biografías o testimonios de alguien o algo así. No tiene sentido que me llene de nada y pierda mi tiempo a su derecha. Usaremos texto ficticio. Otra gran razón por la que usar marco de alambre es por provisiones, porque las revisiones forman parte de cualquier proceso de diseño. Y si las revisiones están sucediendo justo en el durante la cara de diseño, entonces vas a tomar mucho más tiempo, porque entonces estás pensando en los colores y hacer que todo pixel sea perfecto y perdiendo mucho tiempo en algo que tu especie de ya diseñado y especie de apegado tu ah, ego a ella. Porque tesis lo que sucede a menudo con los diseñadores porque cualquiera que sea el trabajo que producimos, nos sentimos apegados a ese trabajo. Pero cuando estás haciendo marcos de alambre, no estás apegado a él. Son sólo, ya sabes, feo esqueleto con aspecto garabatos, y podemos cambiarlo de batería fácilmente. Las revisiones son más fáciles está ahí y sabes que los sentimientos de nadie salen heridos. Este es un marco de alambre fuera de uno de mis proyectos de cliente. Como puedes ver, está desprovisto de cuellos de diseño y es muy rugoso. No tiene imágenes ni iconos. Yo estaba haciendo estos sitio web para una aplicación de compartir scooter. Repasemos esto rápidamente para que entiendan por qué lo he hecho. Y cuál fue mi proceso de pensamiento. El bar de navegación es bastante sencillo. Ni siquiera puse un bajo yendo ahí. Tan sólo un gravamen. Es un logotipo. En lugar de una imagen de héroe, hay un marcador de posición de imagen, y eso es todo. En esa etapa. No he decidido cuál sería el héroe, y tampoco es relevante para esto. A pesar de que he decidido el diseño, quería tener un héroe a la derecha y contenido a la izquierda. Si quisiera un hero's un fondo que lo pondría como fondo estirando borde para eclosionar en la siguiente sección, elegí tener contenido de tres columnas para describir cómo funciona el producto en tres pasos no mucho diseñado, pero el diseño es claro, y también tomé la decisión de que cómo funciona era una sección importante para tener justo después del héroe. Yo mismo he llenado el contenido, a veces reutilizando impuestos de los lados competidores. Parte importante es dar ejemplo de impuesto al cliente, lo que hacen clic y empiezan a escribir de inmediato sin mucha investigación para arriba. Siguiente arriba creó una sección con una pequeña demostración fuera de la APP con algún beneficio. Pero vamos a un lado en esta sección de realmente ya tenía una bastante buena idea de cómo diseñaría la sección. Quería mostrar la app y mostrarles la app en acción. Por lo que planeo tener una animación de video de regalo fuera de la app siendo utilizada un poco más exhibiendo y beneficios del producto, como seguro de estacionamiento gratuito y así sucesivamente. Después tuve un precio y secciones testimoniales bastante sencillo, y finalmente tenemos llamado a la Sección de Acción, y la comida o las páginas de cierre, especialmente las páginas de inicio con sección de frío a acción, es una buena idea. Quieres pedir a los usuarios que hagan algo después de que hayan terminado conociendo un producto o servicio que no quieres dejarlos colgando. Su pista es no saber qué hacer a continuación. Podrían perderlos así Después de que terminé con sus marcos de fuego, lo compartí con un cliente y les di explicación de cada sección y el proceso de pensamiento detrás de mis decisiones. Y así es como terminó luciendo el diseño final. Se puede ver cómo el diseño y el contenido es el mismo, pero es algo así como que se ha coloreado en. Por lo que esas son las razones detrás del uso de marcos de alambre en su proceso de diseño. Úsalos antes de llegar a diseñar Gracias después. 98. Estilos de Figma: Creamos wireframes, te voy a enseñar dos características de Figma que aún no hemos cubierto Los vamos a necesitar para crear nuestros wireframes. Estos son estilos y componentes. En este video, vamos a cubrir estilos. Ya sabes cómo en WPL, podemos diseñar clases y etiquetas. Podemos hacer algo similar en Figma también. Por ejemplo, vamos a tomar un encabezado y darle estilo. Bajo estos puntos, tenemos opción para textiles. Si hacemos clic en ese icono más, esto creará un nuevo textil a partir del texto seleccionado actualmente. Podemos llamarlo H one, similar a lo que hacemos en el flujo web al estilizar O H uno textos. Ahora podemos tomar cualquier otro texto y aplicarle H un estilo. En el desanel de propiedad, verás que muchas opciones de edición de te están deshabilitadas, como el tamaño del teléfono, la altura de la línea y otras se han ido Pero todavía tenemos cosas como color de relleno y la alineación del texto. No pasan a formar parte del textil, por lo que siempre se pueden editar. No va a afectar al textil en sí. Se aplicará sólo a esa instancia. Si esto fuera Webflow, no podríamos hacerlo. Todo sería editable y reflejado en todas las instancias con la misma etiqueta o clase Dentro de los diseñadores de interfaces como Figma, este comportamiento tiene más sentido Para editar un estilo, haga clic en él y luego vaya al estilo de edición. Tenemos la opción de editar el estilo desde aquí. Puedes cambiar lo que quieras y verás cambios en el estilo, reflexionando instantáneamente sobre todas las instancias. Esto no parece mucho, pero cuando tienes varias páginas con múltiples titulares en cada página, entonces te darás cuenta de lo grande que es esto. También tenemos una opción para desacoplar el estilo. Eso te va a permitir editar todas las propiedades del texto y cualquier cambio futuro en el textil original. No va a afectar al segundo titular porque ahora está separado de ese textil. Si quieres eliminar el estilo, esto no es muy evidente, pero haz clic derecho sobre él y obtendrás una opción de eliminar. Los textiles no son lo único que tenemos en el FicMA. Casi todas las demás propiedades en el panel pueden tener estos estilos globales. Relleno, trazo, efectos, incluso la cuadrícula. El segundo más útil son siempre los estilos de color. Desde el mismo lugar, puedes agregar un nuevo estilo de color. Al igual que los textiles, se puede aplicar a todos los demás elementos que tienen propiedad de color. No importa si es texto o rectángulo. Al igual que los textiles, los estilos de color son grandes. A menudo termino cambiando de color varias veces mientras diseño un sitio web. Soy muy exigente con los colores y puedo cambiar de opinión fácilmente. Dios bendiga los estilos de color. Esos son los estilos en Figma. Se aplica a casi todo, f, co, texto, maquetación, g. A continuación, vamos a cubrir componentes. Quédate alrededor. 99. Componentes de Figma: L et's crean un botón. Ahora, si seleccionamos este botón y clic en este componente en la barra de herramientas, esto convertirá este botón en un componente. Que podemos reutilizar a través de nuestro archivo y arrastrarlos en cualquier momento desde la pestaña de activos. Los componentes en Figma son el grupo de elementos. Con estilos, creamos esta conexión global para un estilo en particular. Pero con componentes, podemos crear una conexión global para varios estilos y para cada objeto dentro de ese componente. El botón original se llama el componente maestro, y el que acabamos de arrastrar se llama instancia Los cambios que hagamos al maestro se verán reflejados en cada instancia. Pero cada instancia individualmente puede anular los estilos por sí mismos. No obstante, los cambios no van a reflejarse de nuevo en el maestro ni en ninguna otra instancia. Conoces las clases combo en weblo. Al igual que las clases combinadas, los nuevos cambios en el maestro afectarán solo a los estilos que no hayan sido anulados La primera instancia sí cambió el color al verde igual que lo hizo el maestro, pero las otras dos de abajo no lo hicieron. ¿Por qué? Porque en los dos de abajo, hemos anulado el relleno de fondo del botón, pero en el primero, no lo tocamos Todavía hereda del componente maestro hasta que lo anulamos En exactamente como las clases combo en we low, otros estilos que no tocamos y que no anulamos seguirán siendo heredados del maestro. Por ejemplo, si redondeamos las esquinas del botón. Una gran diferencia entre las clases en waffle y los componentes en Figma es que las clases no tienen otros elementos dentro Por ejemplo, si creas una clase para una sección de héroe y pones titulares, botones e imágenes en su interior, esos elementos no forman parte de la clase. Pero en los componentes Figma, lo son. Si elimino un objeto del componente maestro, se eliminará de todas partes. Si tuviera un nuevo objeto dentro del maestro, eso reflejará cada otra instancia. Hay cosas que no puedes anular en la instancia. Por ejemplo, cualquiera que sea el componente hecho. Puede eliminar o agregar nuevas capas dentro de la instancia. Puedo arrastrar este rectángulo dentro de la instancia, eso no me deja. O bien puedo eliminar una capa existente del componente. Cuando presiono eliminar en cualquiera de los ingredientes, sí desaparece, pero en realidad solo está oculto, y se puede ver eso en el panel de capas. La capa sigue ahí, simplemente está oculta. Si quiero, puedo mostrarlo desde aquí. Otra cosa que no podemos anular son los cambios estructurales como los tamaños o la posición de las capas dentro del componente. Como puede ver, cuando selecciono el rectángulo, no hay manijas de redimensionamiento. No puedo cambiar eso. Sin embargo, somos capaces cambiar el tamaño de todo el componente. El redimensionamiento del rectángulo no es posible, pero redimensionando todo el componente, podemos hacerlo. Si cambio el tamaño del componente maestro, no va a caer en cascada al botón azul porque lo está anulando Pero eso es sólo para el tamaño completo del componente. Si cambio el tamaño del rectángulo mismo, ese botón azul está ahora indefenso y tenemos que obedecer Tampoco puedo cambiar la posición del texto dentro de la instancia. No hay manera de que lo mueva. Ahora bien, en cuanto a las cosas que podemos anular, podemos anular los estilos de cada elemento, sean cuales sean. Podemos anular el tamaño de todo el componente, como mencioné anteriormente, y podemos anular el contenido. Nuevamente, si lo anulamos, entonces cualesquiera que sean los cambios que hagamos al componente maestro, no se va a reflejar. Como puedes ver, los otros dos botones actualizaron instantáneamente su texto, pero el botón azul no lo hizo. También podemos separar instancias de su componente. Eso se puede hacer desde aquí. Una vez separado, deja de ser un componente y son capas completamente libres e independientes. Otra cosa que podemos hacer con las instancias es restablecer los cambios que les hemos hecho. Esta opción aquí restablecerá cada cambio que hayamos hecho a la instancia y heredará todo del maestro También tenemos la opción de restablecer solo propiedades particulares. Si seleccionamos el rectángulo y volvemos a la opción de reinicio, el desplegable resalta todos los estilos que se han anulado y podemos restablecerlos Por ejemplo, podemos restablecer en el relleno de fondo, o podemos restablecer toda la anulación en el rectángulo sin tocar ningún cambio que se haya realizado en el texto dentro del botón. Si miras más de cerca el panel del jugador, verás que el componente maestro tiene este icono de diamante con cuatro cuadrados, y la instancia tiene este icono de diamante único. Para ubicar el componente maestro, puede seleccionar cualquier instancia y hacer clic en ir al componente principal desde el panel de propiedades. Esto funcionará aunque el componente esté en una página diferente, pero no funcionará si está en un archivo diferente. Los componentes A son parte de archivos individuales. Para agregar un componente, puede arrastrarlos desde un panel de activos o simplemente copiar pegar ya sea un maestro o una instancia. Si desea crear un nuevo componente, por ejemplo, como un botón primario y un botón secundario. Primero, desactive la instancia y luego haga clic en crear nuevo componente Si en su lugar haces clic en crear componente en una instancia en vivo, entonces eso solo va a crear un nuevo componente dentro de la instancia como parte de ella. Esto se pone raro, así que asegúrate de separarlo primero. Eso es todo por ahora, obtendrás un hang off componentes con práctica, y vamos a comenzar esa práctica mediante el encuadre de alambre en los próximos videos 100. Kit de Wireframe: Varias formas en las que podemos crear wireframes. Hay como aplicaciones de terceros que crean wireframes como maquetas balsámicas y caprichosas que he Algunos diseñadores solo usan lápiz y papel y bosquejan así los wireframes Yo hago eso, pero solo por mi proceso de lluvia de ideas, no lo comparto con mis clientes La mejor herramienta para nosotros sigue siendo Figma. Eso es lo que uso en estos días. Simplemente es más fácil crear marcos de alambre allí y compartirlos con el cliente, la parte de colaboración de la misma y el comentario les facilita dar comentarios, y también pueden compartir el acceso al archivo con nuestros clientes, y pueden completar el contenido justo dentro de Figma La mejor manera de crear wireframes dentro Figma es usando kits de wireframe, que están prefabricados, listos para usar bibliotecas de componentes, y podemos arrastrarlos directamente desde componente spanel y luego ponerlos en la página y comenzar a construir toda la página como Hay muchos kits de estructura alámbrica disponibles en línea a menudo de forma gratuita Pero no estaba muy contento con lo que encontré. Entonces decidí crear uno para ti, un kit sencillo y fácil de usar basado en lo que yo mismo uso. Y puedes hacer tuyo este kit de estructura alámbrica y usarlo en tus futuros proyectos por ti mismo Así es como funciona este kit. Desde el panel de activos, vamos a arrastrar los componentes prefabricados que necesitamos. Están organizados así dentro del panel de activos. Tenemos botones. Tenemos entradas como diferentes tipos de campos de formulario, y tenemos marcadores de posición como un avatar, y construiremos nuestro marco de alambre usando estos componentes Además de estos elementos, también he añadido iconos. Estos son iconos de material design gratuitos de Google. También son componentes Figma. Puedes arrastrarlos, cambiar colores, y así sucesivamente. El panel de activos tiene la opción de búsqueda, que es muy útil. Esto buscará a través de todos los componentes que están en el archivo, incluidos los iconos, ya que también son componentes regulares. También he creado estilos de texto y color. Por ejemplo, cuando necesitamos un titular para nuestra sección de héroes, agregaremos un nuevo, la forma habitual en que agregamos texto, y de los textiles, seleccionaremos encabezado uno o cualquier otro estilo de encabezado. Cuando necesitamos un párrafo, volveremos a agregar un nuevo texto y elegir un estilo de párrafo en su lugar. También he agregado estilo de color, para que al instante podamos darle un color a algo sin nosotros, ya sabes, preocupándonos y probándolo y viniendo con diferentes versiones de color. Principalmente, usaremos esta frase negra s y. Esta es una bonita paleta de colores neutros que es ideal para wireframes Me gustan los marcos de alambre que se ven descoloridos, que deliberadamente parecen faltantes de color, como un libro para colorear Para que los clientes entiendan que esto no es un diseño. Hablando de cuando compartes wireframes con tus clientes, asegúrate de explicar tu proceso y explicar qué son los marcos de alambre Muchas veces no van a saber qué son los marcos de alambre. He tenido una vez al momento en que uno de mis clientes pensaba que estos marcos de alambre eran diseños finales, y no estaba muy contento con ello, si se imaginan. Los componentes maestros y estilos que he creado, los puedes ver en la página del kit wireframe Si desea realizar alguna edición y cambio, puede agregar estas instancias maestras desde aquí También puedes construir y agregar más componentes si te gusta. Haz tuyo este kit de estructura alámbrica y tenlo como tu plantilla para tus futuros proyectos Hará que su etapa de enmarcado de alambre sea suave y rápida. Una nota sobre los iconos. Si la búsqueda desde el panel de activos no te da ningún resultado, echa un vistazo aquí para ver qué hay disponible. Los nombres de estos iconos podrían no ser tan intuitivos. Por ejemplo, este icono de papelera se llama eliminar, y la búsqueda de basura no traerá ningún resultado Abra ese archivo de kit de estructura alámbrica y asegúrese de tener la copia de un archivo en su cuenta Ahora ya estamos listos para comenzar a trabajar con el wireframing. Lo llegaremos en el próximo video. Quédate alrededor. 101. Wireframes: página de inicio parte 1: En este video, vamos a comenzar a crear wireframes para nuestra página de inicio de colaboración Tam Dentro del archivo del kit de estructura alámbrica, cree una nueva página haciendo clic en el icono más y asígnele el nombre wireframes Vamos a agregar un marco y la grilla, la forma habitual que lo hacemos. Marco de escritorio y nuestra rejilla habitual de 12 puntos. Ahora que sabemos cómo crear estilos, guardemos este gran estilo para su posterior uso en este proyecto porque podemos, así que por qué ahora nos ahorraremos tiempo después. Para que se nos ocurran algunas ideas sobre qué contenido y maquetación deberíamos tener. Echemos un vistazo a nuestro resumen del proyecto y al Moodboard. Be project brief es donde está la meta y detalles de alto nivel del proyecto, y yo Moodboard, tenemos un look and feel, que ya coincidimos con nuestro cliente imaginario Entonces el sitio web va a ser presa estándar, pero el objetivo principal es obtener registros de acceso anticipado Ese va a ser nuestro llamado a la acción. Sabemos que va a tener un bloqueo, y también necesitaremos un lugar para gente se suscriba a un boletín. Ahora echemos un vistazo al Moodboard. S. A partir del brief, sabemos que el cliente quiere un sitio web que se base más en la fotografía que en las ilustraciones. Entonces creo que este enfoque de fotografía de fondo es algo que les va a gustar y un buen acercamiento para nuestro público objetivo. Podríamos encontrar una foto con la que el público se relacione, para que puedan verse en ella y eso nos va a ayudar a conectar con el público. En base a eso, hagamos una estructura alámbrica a la sección de héroes. Necesitamos una foto de fondo, no una foto real, sino solo un marcador Encuentra un elemento de imagen y arrástralo al lienzo. Y luego cambiar el tamaño para ajustarlo a la pantalla completa. Llévala alrededor de 800 píxeles de altura, ese suele ser un tamaño decente para la sección de héroes. Ahora necesitamos una barra de navegación, un logotipo a la izquierda y los enlaces a la derecha. Bastante sencillo. Usemos el estilo de encabezado cuatro para el logotipo. El estilo de enlace para los enlaces y botón secundario para la llamada a la acción en la barra na. Voy a cambiar el tamaño del botón para hacerlo más pequeño porque usaremos un tamaño regular para los botones normales Mm. Hasta el momento tan bueno. Ahora para el titular y el subtítulo Vamos a elegir un estilo de encabezado uno y elegir el color negro del kit de estructura alámbrica Es una buena idea apegarse a esta paleta de colores grises neutros a la hora de crear wireframes Me gusta mucho esta paleta, en realidad, robé de una herramienta de marco de alambre que usé en el pasado. Además de los negros y grises, apégate a un color primario de esas opciones, o elige tu propio color primario si lo deseas, pero apégate a uno Si quieres cambiar el color primario de los botones, cambiar el color del campo en todo el componente no funcionará porque tiene contenido mixto. El rectángulo es azul, pero el texto es blanco, así que solo tendrás que cambiar el rectángulo. Pero la opción de bateador es cambiar el maestro. Por eso utilizamos componentes. Seleccione una instancia, luego haga clic para ir al componente principal y allí solo elija un color diferente para el fondo de ese rectángulo. Lo mismo ocurre con el botón secundario, cambia dos colores, uno para el borde y otro para el texto. En mi caso, me voy a quedar con este color primario original. Bien, ya tengo contenido en mi mente. Voy a robarle el titular a este, colaboración instantánea para equipos remotos. Como mencioné antes, no somos redactores, así que no necesitamos ser perfectos con el contenido Cualquier cosa que pensemos que funciona y dará una idea a nuestros clientes con el menor texto ficticio posible O simplemente pídele a Cad GPT que escriba contenido por ti. Eso es algo válido para hacer en estos días. No me preocupan demasiado las distancias aquí, pero sigo asegurándome de que sean línea aérea. Ahora necesitamos instar a los usuarios a hacer algo, que es nuestro objetivo principal para obtener sus correos electrónicos para el acceso temprano. Esto se conoce comúnmente como llamado a la acción o CTA corto CTA es un formulario o simplemente un botón. Veamos qué están haciendo nuestras inspiraciones en este caso. Muchos de ellos están usando un formulario con un solo campo de correo electrónico. Creo que eso es lo que deberíamos hacer también. Podríamos tener una forma emergente, pero cuando es forma pequeña, especial con un solo campo, es una mejor práctica porque es menos amenazante. Está ahí mismo, ningún trigo muy transparente, le pide al usuario solo un correo electrónico y ven lo que está pasando Ahí vas de manera muy simple y rápida, tenemos un wireframe para nuestra sección de héroes Gracias a esta llave wireframe, no requirimos tanto esfuerzo, y no tuvimos que perder el tiempo eligiendo teléfonos y colores Así es como debes trabajar con wireframes, pensando en el diseño y el contenido y no preocuparte por la apariencia En tus proyectos reales, cuando compartes el wireframe con tus clientes, puedes agregar comentarios a diferentes secciones y diferentes elementos en tu página para mostrarles tu proceso de pensamiento Para ello, cambia al modo de comentarios, y al hacer clic en cualquier parte del marco, puedes agregar nuevos comentarios A los clientes les encanta ver el proceso de pensamiento que pones detrás de tus diseños. Porque cuando construyes un sitio web y diseñas un sitio web para un negocio, no solo les estás dando algo bonito con lo que jugar, les estás dando una solución a su problema. A menudo, estás dando soluciones a varios problemas como generar ventas o tráfico, crear presencia online y buena marca y cierta reputación. Un sitio web que luce elegante y moderno, que va a crear una imagen y reputación muy específica para esa empresa. Y necesitas demostrar que tienes un profundo conocimiento de sus problemas, y has llegado a algunas soluciones potenciales. En otras palabras, necesitas venderlos en tus diseños. Hiciste la primera venta al convencerlos de que te contrataran para tus servicios Ahora estás haciendo otra venta. Ahí no terminaste. Estás haciendo otra venta para mostrarles que estos diseños que creaste son grandes soluciones a los problemas que enfrentan como negocio. No quiero usar algún tipo de discurso de venta sórdido o técnicas cuando explicas tus diseños Simplemente explícate como diseñador y cómo pensabas sobre estos elementos que creaste. Por ejemplo, ese único campo de correo electrónico que he puesto en los wireframes, le explicaría esto al cliente, algo así Mi sugerencia es usar un solo campo de correo electrónico para la llamada a la acción y la suscripción lugar de preguntar nombre, en lugar de preguntar nombre, apellido, etc., porque un solo campo de correo electrónico es Bajo compromiso del lado del usuario , es menos amenazante, y porque también es visible, podemos encajarlo porque si estamos pidiendo varias cosas diferentes, entonces tendríamos que poner probablemente una forma pop up porque entonces ocuparíamos demasiado espacio. Pero al mostrar el campo, se ve un campo de correo electrónico, estamos demostrando que somos transparentes. Esto es lo único que estamos pidiendo en este paso ahora mismo, y este intercambio de bajo compromiso aumentará la tasa general de suscripción. Y eso es todo. Ahora bien, si no hicimos eso, y si no explicamos nuestro proceso de pensamiento, lo más probable es que simplemente no vayan a conocer el razonamiento detrás de un relleno, porque no son diseñadores. No han estado construyendo sitios web, y piensan desde la perspectiva del dueño del negocio y no desde la perspectiva del usuario, ¿verdad? Entonces van a pensar, espera, me gustaría tener más información sobre los usuarios. Me gustaría saber su dirección de correo electrónico, número de teléfono, número Seguro Social, datos de la tarjeta de crédito, etc. Ahora, porque no has puesto todos estos campos ahí, y solo pones la dirección de correo electrónico, sienten que estás siendo descuidado, o tal vez simplemente no entendiste sus desafíos comerciales y lo que quieren del negocio lo que quieren del Entonces van a sentir que simplemente no los estás obteniendo y no ofreciendo buenas soluciones para su negocio. Por lo que es nuestro trabajo como diseñadores educar a nuestros clientes sobre temas como este. Pero no puedes educar a tus clientes si no te educas primero. Entonces, como lectura externa, te recomendaría que te suscribas a blogs y newsletters que compartan te recomendaría que te suscribas a blogs y newsletters que compartan información y últimas investigaciones y cualquier cosa nueva básicamente sobre temas de diseño o experiencia de usuario y cosas como ese ejemplo, Nielsen Norman Group es uno de esos lugares al que podrías suscribirte, a menudo publican artículos e investigan sobre usuario temas de experiencia. Además, prototyper dot IO, que cuenta con este boletín que incluye no es que su enfoque principal, sino que también incluye las publicaciones principales, entradas de blog, generalmente sobre temas de diseño y experiencia de usuario y todo tipo de relacionados con la web Si te gustan los libros, te recomendaría leer No me hagas pensar por Steve Crook, que es un gran libro sobre experiencias de usuario web y móviles y usabilidad Y otro, el diseño de las cosas cotidianas de Don Norman. Ese es el mismo tipo normando del Grupo Nielsen Norman. Y no se trata realmente de diseño web, sino que se trata más de artículos y cosas cotidianas que usamos en la vida real. Pero es una buena introducción al viaje de la experiencia del usuario y la comprensión. Lo que hay que buscar y básicamente una especie de filosofía detrás del diseño de cosas y objetos y elementos, que incluye web porque la gente interactúa con ella, y sobre todo web porque generalmente es un poco más complicado y un poco más difícil interactuar con la gente que artículos normales que usamos en el mundo real como Fork. Bien. Así que volvamos a nuestros wireframes, pero vamos a continuar eso en el siguiente video 102. Wireframes: página de inicio parte 2: Estamos de vuelta continuando con nuestro wireframe debajo del pliegue. Veamos cuál de las inspiraciones podría funcionar para nuestra siguiente sección Sería una buena idea demostrar el producto mostrando algunas pantallas. Una sección como esta podría funcionar, tener las pantallas en un lado y el texto al lado. Podríamos robarle algo de contenido a Slack. Usar contenido de los competidores es una opción válida. Así es como tus clientes intentarán obtener ideas de todos modos. Pero asegúrate de ponerle un comentario y decirle de dónde sacaste el contenido No quieres que piensen que se te ocurrió este contenido y luego en algún momento, averiguarlo, ya sabes, se lo agarró al competidor porque solo van a pensar que simplemente se lo robaste, ¿ Aquí, podemos agregar el enlace de aprender más a las otras páginas potenciales que explicarán las características específicas con más detalle, como lo han hecho aquí. Es una buena manera de dirigir a los visitantes en diferentes páginas del sitio web, y además aporta un poco más de detalle al bloque de texto. Ya tenemos un link en estilo. Simplemente cambia el color a tu color primario. También podemos agregar una pequeña flecha a este enlace. Dentro de los componentes, podemos buscar un icono y agarrarlo y ponerlo junto a él. Eso es todo por la sección. Ahora, vamos a crear el resto de las secciones en el cuerpo. Estaba pensando en dividir la sección así. contenido es el mismo estilo que a lo que acabamos de hacer, así que podemos simplemente copiar eso. Para el gráfico, por ahora sólo vamos a poner el titular de la imagen. Ach para nuestros clientes, vamos a explicar nuestra visión sobre estas imágenes que vamos a crear una vista de realidad aumentada, agregando ws desde la plataforma a fotos reales L et's dicen algo de contenido para la administración simple de tareas. Voy a escribir esto por mi cuenta. No me juzgues. Mm. Tengamos uno más del mismo diseño con la foto. Simplemente dupliquemos esto. Estoy aguantando la tecla de opción aquí, así que se duplica cuando arrastre todo el asunto, pero ya deberías saberlo Quiero ver una fi métrica para revertir el layout de esta sección. Agrupe primero el contenido. Entonces selecciona todo, y estos dos círculos rosados deberían aparecer en el medio. Simplemente sosténgalo y mueva el contenido del otro lado. Tan simple, un bebé podría hacerlo. Ahora agreguemos una sección testimonial. A mí me gusta mucho este de aquí. Voy a recrearlo casi como está. Desde el punto de vista del marketing, tener testimonios en sitios web de productos o servicios es una gran idea Aumenta la confianza en la marca y el público obtiene una mejor idea del producto al leer experiencias de personas reales. Una excelente manera de diseñar testimonios es agregando cinco estrellas tal como lo han hecho aquí. A la gente le encanta ver cómo alguien ha calificado el producto. Es más poderoso y simplemente decir cinco estrellas en la página instantáneamente trae a la gente sentimientos positivos sobre el producto porque hay una fuerte asociación en cerebro de las personas vinculada a esos cinco íconos. Es un poco de técnica psicológica. Ustedes empleadores apreciarán su comprensión de tales cosas. Y. Así que acabo de tratar de emparejarlo aproximadamente con la inspiración, sin usar ningún color específico ni nada. En diseños reales, usaremos estrellas doradas y el auto blanco, pero aquí tenemos que mantener el auto gris, así que no queremos preocuparnos por las sombras para hacer visible el auto blanco sobre un fondo blanco. Ahora solo agrupa todo y duplicarlo de manera similar a nuestra inspiración. Y el último en salir del marco. Una cosa a tener en cuenta aquí, no queremos que toda esta tarjeta sea visible. Queremos que se recorte como si estuviera en la inspiración. Entonces, ¿cómo hacemos eso? La razón por la que no es recorte es porque ya no forma parte del marco. Eso se puede ver en el panel de capas. Cuando mueves un poco algo fuera del marco, Figma mira tu cursor y decide si lo quieres en el fotograma o fuera del fotograma en base a eso Ves cómo ese grupo se recorta cuando el cursor se mueve dentro del marco o se vuelve completamente visible cuando se mueve fuera del marco Para moverlo hacia atrás, solo asegúrate de que tu cursor esté dentro del marco. Después, coloca con las teclas de flecha o una manera que no mueva el cursor afuera. Fantástico. Podemos mantener el impuesto a la presa dentro de los testimonios. es algo que nuestros clientes necesitarían preguntar a sus usuarios y producirlo de esa manera. Agreguemos esas flechas más pequeñas al igual que en el diseño. F. Por último, agreguemos pie de página y terminemos con él. Como suele hacer en mis proyectos, voy a copiar el contenido de Footer de nuestro ejercicio anterior, ya que usamos la misma cuadrícula de 12 puntos y las columnas encajan perfectamente. Esta reutilización de diferentes componentes entre diferentes proyectos proviene de un poco de la pereza, pero funciona muy bien al final del día Empiezas a dominar estos elementos comunes medida que los usas en diferentes proyectos y comienzas a entender los beneficios y limitaciones del layout, y en algún momento lo perfeccionas hasta tener una plantilla personal casi perfecta. Ahora, actualicemos los colores y los textiles. M. M. Más tarde en una etapa de diseño, estoy pensando en usar un pie de página oscuro como este. Como sabemos por nuestro resumen de proyecto que necesitamos un formulario de suscripción al boletín, podemos agregar un formulario de correo electrónico similar aquí mismo en el pie de página. Mm hmm. Mm hm. Mm. Mm hm. M. M. M. M. M. M. M. Y ahí está nuestro pie de página. Todo bien. Marcos de alambre para las páginas de inicio hechas. A continuación, vamos a enmarcar con alambre la página del artículo para el blog. 103. Wireframes: página de publicaciones: Este video, vamos a llegar a marcos de alambre para la página de publicación de bloque. En realidad, una vez terminada la página de inicio, marcos de alambre para la publicación de bloque son mucho más simples porque la barra de navegación ya está hecha, el pie de página está hecho, solo necesitamos salir con el medio. No hemos hecho ninguna investigación para la inspiración para el bloque y el poste del bloque. Busquemos algunos ejemplos y veamos qué podemos hacer. No necesitamos crear un moodboard para esto. Veamos rápidamente algunos ejemplos. Verás que la mayor parte es de diseño bastante estándar de todos modos Como puedes ver, la mayoría de los ejemplos modernos tienen una estructura similar, los detalles del titular y post en la parte superior, luego la imagen de portada y el texto del cuerpo. También podemos hacer el mismo diseño. Primero, copiemos el Na Bar. Nabar en la mayoría de los casos, desea tener lo mismo en todo el sitio Ahora, el titular, es una práctica común usar ancho estrecho para el contenido de las publicaciones. Hemos tocado esto en la parte del buen diseño. El caso es que los párrafos que son demasiado anchos son muy difíciles de leer porque empiezas a perder los frenos de línea. Un ancho máximo común es aproximadamente 700 a 800 píxeles para el texto principal. Entonces hagamos que el contenido enmarcado sea 700. Esto incluye el titular. No ese titular tiene un problema con la habilidad de raza, pero desde que estamos creando este contenido, para mantener las cosas. Incluyamos también el titular en él. Debajo del titular, pongamos al autor del post y la fecha, igual que otros ejemplos. En muchos de estos ejemplos, me gusta cómo la imagen de portada va más allá del contenido, más allá de este marco que creamos. Entonces podemos hacer lo mismo y crear tal vez 900 píxeles para la imagen de portada. Para el cuerpo, basta con insertar algún texto ficticio. Es agradable terminar el post con el autor y los detalles. Ya lo tenemos en la parte superior, pero es una práctica común poner al autor en la parte inferior también y un poco más grande en este tiempo. M. M. M. Después del sitio web de la página de publicación, generalmente tienen una función de comentarios al final La mayoría de estos sitios web, utilizan enchufes de terceros para administrar los comentarios, como Facebook y discutir Usar plug ins comentando de terceros es una gran idea. La mayoría de los usuarios ya tienen Facebook o discuten, y pueden comenzar a comentar sin registrarse y todas esas cosas. Eso es lo que hago en los sitios web también. Yo uso discuss plug in, que es un poco mejor que Facebook porque le da al administrador del sitio más control sobre comentar y moderar También aprenderemos a instalar este plug in de discusión, que va a estar dentro la parte avanzada de este curso, pero por ahora, solo necesitamos poner un marco de alambre que se vea como una característica de comentario Mm hmm. Mm. Por último, copiemos el. M Eso es todo. Echemos un vistazo al marco de alambre desde el modo de presentación. Seleccione un marco y haga clic en el botón de reproducción. Luciendo genial, ahora podemos compartir esto con un cliente, y eso es todo. Ellos también podrán ingresar al modo de presentación ellos mismos a partir de la presentación que hayas compartido con ellos. Pero como otra opción, también puedes compartir el prototipo directamente. Cuando compartes los enlaces de Figma con tus clientes, es una buena idea explicar cómo funcionan las cosas, cómo ver los comentarios Has incluido cómo agregar sus propios comentarios, cómo ingresar al modo de presentación, y así sucesivamente. Siempre que compartes algo con los clientes, ya sean enlaces de Figma o flujo web o cualquier cosa, guiarlos siempre a través del proceso y explicarles y decirles cómo hacer que las cosas funcionen No esperes que descubran todo por su cuenta, todos estos marcos de alambre. Figma y los paneles de estado de ánimo y los flujos web y los prototipos pueden ser abrumadores para ellos Y si no se les ha tratado tratando con ese proceso de diseño, entonces todo va a ser nuevo, todas estas nuevas herramientas, y tal vez les resulte difícil resolverlo por su cuenta Así que guíalos a través de cada paso del proceso, dales pequeñas explicaciones de cómo hacer algo, tal vez capturas de pantalla, a veces incluso pequeños tutoriales en video que podrías hacer. Y te van a encantar por esto. 104. Wireframes - cuadrícula de blog: Cada blog necesita una página donde los usuarios puedan navegar por todas las publicaciones de bloqueo en un solo lugar. Eso es lo que vamos a hacer en este video. Cree marcos de alambre para la página de inicio de bloques. Mi diseño favorito para el blog es un diseño de grado, algo así como en este ejemplo, pero en nuestro caso, lo vamos a hacer un poco más simple. No necesitamos buscar inspiración. De hecho tenemos algo en nuestro moodboard que podamos usar Este tipo de diseño de tarjeta sería perfecto para nuestra página de bloque. Cada tarjeta de bloque tendría una foto de portada, un titular, algunas líneas de la publicación y detalles del autor. Entonces primero, preparemos la página. Duplicemos la página del post y trabajemos desde ahí. Podemos mantener la barra de navegación y el pie de página. El resto nos podemos deshacer. Y habilitemos la grilla. Primero, podemos poner un titular en un subtítulo. Podemos llamarlo un blog o últimas publicaciones o algo así. Ahora vamos a crear una postal de bloque. Tres cartas en una fila así que sé el mejor diseño, creo. Mm hmm. Vamos a darle un color de nuestra paleta de colores de marco de alambre. A continuación, necesitamos una imagen en miniatura que podamos arrastrar desde la pestaña assets Después un titular y unas líneas de la propia publicación de bloque. El estilo de encabezado tres debería ser bueno para el titular. M. Y para el texto, voy a ir con pie de foto. El párrafo parece ser demasiado grande. Un consejo, manténgase con los estilos de kit de estructura alámbrica, desea limitar sus decisiones de diseño en esta etapa tanto como sea posible El objetivo es concentrarse en la estructura y el contenido. Eso se ve bastante decente. Ahora agreguemos el autor y fecha en igual que en la página de correos. M. M. M. Bueno, bien. Sólo una última cosa. Vamos a redondear las esquinas como hicimos con tarjetas testimoniales. En realidad, no deberíamos preocuparnos por redondear las esquinas Eso debería dejarse para la fase de diseño. Pero lo que tienen, ya lo hemos hecho en tarjetas testimoniales, así que bien podríamos hacerlo aquí Eso es redondear el rectángulo de fondo. Ahora bien, ¿cómo redondeamos el portacuchillas de imagen? Si lo hacemos de la manera regular, entonces eso va a redondear las cuatro esquinas, pero no queremos que se redondeen las esquinas inferiores . Se ve raro. Aquí tenemos la opción de redondear esquinas independientes. Ocho en las esquinas superiores y cero en las inferiores. Ahora vamos a agrupar todo el asunto y luego duplicarlo para crear una grilla. Y ahí vamos. No estoy poniendo ejemplos de contenido individual para cada tarjeta, no realmente necesarios en esta etapa. Sin embargo, en los diseños, haremos, porque a la hora de presentar diseños, es importante hacer que el trabajo se vea impresionante y lo más cercano posible a la realidad para que los clientes puedan vislumbrar mucho mejor el resultado final Una última cosa que debemos agregar es la paginación. Conoces esos números de página al final de la cuadrícula, para que los usuarios puedan ir a la página siguiente. Con Webflow, la mejor manera de crear paginación es tener los botones siguiente y anterior Entonces vamos a arrastrar uno de los botones de la tachueta de activos Cambia el color a algo más sutil. Tenga en cuenta, cambiando el color en todo el componente en sí, no va a funcionar. Tienes que seleccionar el rectángulo de fondo y cambiar el color ahí. Mm hm. Encoge la altura del botón, y eso es todo. Sube el pie de página y corta el espacio extra del marco. Mm. Por cierto, al encoger todo el marco, a veces podría cambiar el tamaño del contenido Eso tiene que ver con ajustes restringidos de cada elemento en el marco. Quiero entrar en detalles ahora mismo, pero si eso sucede, solo mantén el control o el comando mientras redimensionamos el fotograma, y no va a hacer eso. Todo bien. Todos los marcos de alambre están hechos. Podemos compartirlo con nuestro cliente de dos maneras. O podemos compartirlo desde un modo de presentación, que abrirá cada página individualmente, y para pasar por páginas, simplemente podemos hacer clic en la flecha izquierda y derecha. Otra forma de compartir es compartir el archivo en sí. Con wireframes, prefiero compartir el archivo porque son wireframes, bocetos de progreso de trabajo, bocetos de progreso de trabajo, así que se siente más adecuado así Los diseños me gusta compartir en un modo de presentación, por lo que está más cerca de la experiencia final de un sitio web. Eso es todo para wireframes. A continuación, vamos a empezar con los diseños. Quédate alrededor. 105. Diseño de la página de inicio de TeamApp: parte 1: El moodboard, tenemos el wireframe. Estamos listos para diseñar nuestra página de inicio. Vamos a crear una nueva página y ponerle un nombre diseño y copiar el wireframe aquí porque va a ser más fácil para nosotros seguir el wireframe en lugar de ir y venir entre Junto a él, agreguemos un nuevo marco y nuestra habitual cuadrícula de 12 puntos. Bien, encontremos la foto de fondo para nuestra sección de héroes. Me gusta bastante esta foto porque parece no stock, un poco más realista, demuestra que está trabajando de forma remota, y está contenta porque nuestra plataforma de colaboración en equipo es tan buena. El único problema es que está centrada, y queremos tener un layout donde podamos poner contenido a la izquierda, y no se superponga con su cara. Si la foto es de buena calidad, entonces somos capaces de moverla y posicionarla del lado derecho. He incluido todas las fotos y activos en el archivo del proyecto. Entonces, si quieres reutilizar las mismas fotos, puedes hacerlo, y puedes encontrarlas en la página de activos. Pero si quieres ir por tu propia interpretación, y definitivamente te recomendaré que hagas eso, busca tus propias fotos y usa esa en su lugar. Mm. Mm. Se ve bastante bien. Hay una buena cantidad de espacio, así podemos poner nuestro contenido a la izquierda. Ahora, escojamos la tipografía. Esta vez, intentemos encontrar un tipo de letra que pueda funcionar tanto en los titulares como en el párrafo, no por ningún motivo específico, sino solo para practicar Para ello, necesitamos encontrar algo que sea neutral porque lo vamos a usar para un párrafo y algo que tenga muchas variaciones de peso. Podemos acotar eso en Google usando el número de estilos. Seis estilos en realidad, significan tres pesos diferentes porque cada peso tiene una versión itálica con él. Entonces eso no es suficiente en realidad. Voy a ir con al menos ocho estilos. Este en realidad se llama trabajo Sans podría ser una buena opción. La cabaña tampoco está mal. Solo una rápida doble comprobación del manual de tipografía. Recuerda, siempre leemos el manual de fuentes o evitamos elecciones embarazosas Excelente. Todo a salvo en esa descripción. Y ahora vamos a aplicar esa fuente a nuestra página. En lugar de crearlo desde cero, voy a copiarlo desde el wireframe aquí dentro No hace falta reinventar la rueda cada vez. Solo estoy jugando por aquí sin pensar, para ver qué funciona mejor. Creo que esto servirá. Como no estamos usando un peso más pesado, entonces la altura de la línea no necesita acercarse. Última masa significa menos gravitación al completo. Espero que hayas estado prestando atención a tu clase de física en la escuela y al texto del párrafo. Necesitamos agregar una superposición oscura en la imagen, lo contrario, el contenido no será mucho visible. Ahora, para el formulario de llamado a la acción. Voy a usar el azul de este diseño. Pero en realidad voy a alegrarlo un poco para que sea aún más vibrante También tienen este amarillo en su página, así que copiemos eso también. A lo mejor encontraremos un uso para ello. Eres libre de elegir diferentes colores si quieres, depende de ti, qué tan de cerca quieres seguir conmigo, píxel a píxel o tal vez remezclar un poco Está bien de cualquier manera. un valor de aprendizaje en ambos enfoques. Uh , eh. Yo sólo estoy mirando los márgenes y distancias aquí, no yendo realmente por la grilla, como pueden ver Confíe siempre en sus ojos sobre las pautas y reglas de diseño. Seguirlos ciegamente a veces rinde lejos de obtener resultados óptimos Mm. También estoy tratando evitar ese rincón de los muebles. Los objetos de la foto y nuestros elementos de interfaz a veces pueden interactuar entre sí. Esto puede ser una buena interacción, pero a veces puede crear tensiones innecesarias. Bien, hasta ahora se ve dulce. Pongamos una barra de navegación. A U h. hagamos márgenes 12 en la parte superior e inferior y 20 en los lados. Si quieres hacer un botón fantasma aquí, puedes o incluso hacer que esto fluya también. Siéntete libre de remezclar A, agreguemos un logo también. Aquí hay otra manera simple y rápida de hacer un logotipo. Simplemente escribe el nombre en minúsculas y agrega un punto al final con algún color contrastante. Y ahí tienes un logotipo completamente nuevo. Mm hm. Hasta ahora se ve bien. Una cosa que quiero arreglar, sin embargo, es esa superposición oscura en la imagen. este momento estamos usando una superposición completa, pero la modelo en realidad no tiene que estar sentada bajo una superposición oscura porque no tenemos ningún contenido frente a ella. Ahora bien, ¿cómo la iluminamos, pero mantenemos oscuras otras partes Usaremos un relleno degradado en lugar de un relleno sólido, iremos al relleno que creamos y cambiaremos a un degradado radial. Esta vez no lineal. ¿Por qué? Porque con la radio, podemos crear una especie de foco en ella. Ahora podemos posicionar ese foco exactamente donde queremos que esté. Este mango de la izquierda disminuye el radio de ese círculo. También puedes jugar con otras manillas para lograr el resultado exacto que quieras. Bien, ahora volvemos al 40% de opacidad. Y ahí tienes. Su rostro ya no está oscuro y se ve mejor en general. Esta es una excelente manera de utilizar imágenes que tienen demasiados detalles y demasiado sucediendo en ellas. Puedes crear focos en tus puntos focales y luego oscurecer el resto de la imagen Bien, hagamos una pausa aquí y continuemos con el resto en el siguiente video. 106. Diseño de la página de inicio de TeamApp: parte 2: Y estamos de vuelta. Ahora vamos a diseñar esta sección. Vamos a necesitar encontrar algunas maquetas para el producto para que podamos mostrarlo. Al igual que la última vez, voy a buscar recursos y luego importarlos dentro de Figma. Voy a probar diferentes palabras clave como project o task o dashboard. Ya encontré esta maqueta, que voy a importar dentro de Figma y luego usarla Si quieres usar lo mismo, puedes consultar la página de activos. Lo he puesto ahí. Pero también si quieres encontrar algo propio, puedes hacerlo, y puedes ir a la página de Recursos donde puedes encontrar diferentes maquetas y plantillas gratuitas o cualquier cosa por el estilo que puedas incluir como escaparate del producto Esta pantalla de reuniones parece bastante buena. Podemos traer eso y usemos nuestro propio azul. A Para seleccionar el contenido de un grupo, mantenga presionado Control o comando y seleccione con el mouse, hará una selección profunda similar a que hace haciendo clic y manteniendo presionada la misma tecla. En press shift en caso de que quieras deseleccionar alguno de los elementos Uh, ya que esta pantalla es bastante amplia, podemos moverla fuera del borde. Ese también es un truco bastante bueno. Voy a agregarle una sombra para que sea más visible. Aquí hay una cinta de sus sombras. Hazlos sutiles como si no le llamara la atención. Si llama la atención, entonces es demasiado. Los bordes de la pantalla no tienen un buen contraste con el fondo blanco. Hay una buena racha que los diseñadores usan en este caso. Podemos usar fondo blanquecino en lugar de uno puramente blanco. Algo así como lo que están usando aquí. Podemos agarrar este exo color blanquecino y aplicarlo en todo el marco como relleno de fondo. Ahí, eso es una mejora enorme. Los bordes de la pantalla son mucho más claros ahora. A h. Uh, eh. Vamos a redondear las esquinas ahora. Siempre es una mejor idea redondear la esquina en elementos de interfaz como ese. Se siente más terminado. Las esquinas puntiagudas se sienten como si alguien se rindiera a mitad de camino Ya sabes, sería bueno hacer algo como esto, sacar algunos elementos de la maqueta. Va a agregar más dimensión y hará que todo sea mucho más interesante. Mm Aquí hay una Figma genial. Puede copiar propiedades que se mueven de un objeto a otro. Al igual que la sombra que acabamos de crear, seleccione una propiedad dentro del panel, haga clic en el borde aquí para seleccionarla correctamente. Después Control C para copiarlo y luego pegarlo en el elemento deseado. O también puedes crear el estilo a partir de él y guardar ese estilo y luego reutilizarlo en otros elementos. A Se ve bien hasta ahora. Vamos a agregar el contenido. Y todos luciendo bien. Ahora vamos a crear una sección como esta. Por lo general, la forma en que lo hemos hecho en otro ejercicio, tenemos la foto al borde, pero estos chicos, la tienen un poco diferente. Tienen un hueco en el borde y también entre las secciones, por lo que podemos hacer de manera similar. Queremos encontrar fotos que tengan un poco de espacio libre en ella para que coloquemos los elementos de la interfaz como en la inspiración. Una foto ocupada no va a funcionar. Además, lo que a menudo me gusta hacer es buscar fotos del mismo autor. Cuando usas fotos con estilo diferente, crea un aspecto inconsistente. Es una tele obvia que las fotos están en stock y no fueron hechas como parte de una sesión de fotos para ese sitio web. Las fotos del mismo colaborador suelen tener un aspecto muy similar. Tendrá el mismo estilo, mismo filtrado y relleno similar en general al mismo. El uso de tales fotos crea una consistencia increíble en la página. En nuestro caso, estamos de suerte, el colaborador de nuestra foto de héroe sí tiene otras fotos que potencialmente podríamos usar. Estoy pensando en usar estos dos porque están tomados en la misma escena en ese sofá de cuero. Entonces esta es una consistencia aún mayor. Va a parecer que hicimos nuestra propia sesión de fotos para este sitio web. Y voy a tomar algunos elementos de la maqueta misma del producto y colocarlos igual que dentro de la inspiración Simplemente colóquelos sobre la foto en algún lugar. H. Se ve bastante ordenada. Hemos tenido suerte en estas fotos. No solo son el mismo estilo y escena, sino que también ambas modelos sonríen y se miran la dirección del otro. 107. Diseño de página de inicio de TeamApp: parte 3: Ahora, para la sección testimonial, copiemos la tarjeta de la estructura alámbrica y hagamos ediciones Eso teóricamente debería ahorrarnos tiempo. Busquemos algunas fotos de perfil para testimonios. Mm. Una cosa que nunca debes hacer es compartir diseños con tu cliente que haya repetido fotos ficticias como esta Esto no se ve muy bien y arruina el impacto que tu diseño puede tener al compartirlo con un cliente. Incluso con los nombres, realmente no lleva mucho tiempo llegar a algunos nombres aleatorios, pero el f w visual impresionante, se ve real y se puede apreciar mejor. M. M. Hay algunos plugins que podrías usar para Figma que pueden crear contenido ficticio Este que estoy probando actualmente se llama Content real, y en realidad puede hacer un trabajo bastante bueno al crear nombres ficticios Dentro de esa página de recursos, he puesto un enlace donde puedes encontrar todos los plugins de figma disponibles. Puedes pasar por eso y encontrar algunos enchufes diferentes que te ayudarán a acelerar tu flujo de trabajo. Del mismo modo, lo que me gusta hacer con los párrafos ficticios es usar texto diferente en lugar de simplemente tener exactamente lo mismo repetido Ya ves los wireframes no nos molestamos en eso porque son wireframes Se supone que deben verse mezcladas. Pero diseña, queremos que las cosas se vean lo más reales posible. Mm hm. M. Muy bien, con aspecto de oleaje. Voy a hacer lo mismo con una copia del marco de alambre y darle estilo ahí mismo. Mm hmm. Mm. Como mencioné antes, quiero usar este estilo oscuro. Intentemos usar nuestro azul oscuro. Está bien, pero voy a desaturarlo un poco, así que tiene menos azul en él Me gustaría que fuera un poco más sutil, más hacia el negro o el gris. Por suerte, sabemos afinar los colores, ¿no? Puedes refrescar tu memoria viendo la lección de afinación fina en la sección de color una vez más. Te he estado enseñando muchos conceptos en este curso, así que es natural que se te salgan de la mente. Volver a esas lecciones cuando lo necesitas es una excelente manera de solidificar tus conocimientos Podemos eliminar parte del azul del color disminuyendo la saturación. Cambia ese rack a H S B, que es tonalidad, saturación y brillo, eso hace que la segunda caja sea saturación, y en el valor porcentual, simplemente disminuirla. Sigue siendo el mismo tono y este nuevo color aún encaja bien dentro de nuestra paleta. Simplemente jugando con colores y tamaños aquí. Me gusta que los enlaces de pie de página sean difuminados y pequeños. Y eso es todo. Echémosle un vistazo en el modo de presentación. Entonces nuestra página de inicio está hecha y luciendo bastante resbaladiza. Nos quedan dos páginas más, la cuadrícula de bloques y la página de entrada del blog, y llegaremos a eso en los próximos videos. 108. Diseño de publicación de blog: Nuestro diseño de página de inicio está abajo. Ahora vamos a hacer la página de entrada del blog. Esto es lo que tenemos de los wireframes. Vamos a copiar este marco en la página de diseño para que podamos seguirlo fácilmente. Nuestra página de inicio tiene un fondo blanquecino, pero en el blog, prefiero tenerlo blanco. Es mejor para la legibilidad del texto, lo cual es muy importante cuando se trata de publicaciones de blog Así que vamos a copiar paste y navbar directamente desde el diseño de la página principal Todo lo que tenemos que hacer es simplemente cambiar los colores. Para los enlaces, el azul oscuro es bueno, y para el botón, podemos mantener el mismo estilo que este. Pero en lugar de colores blancos para el texto y el fondo, podemos usar nuestro color azul primario. Para el blog del autor, aún no tenemos el estilo especial como caption. Solo podemos aplicar el estilo de párrafo primero el desconectarlo y luego editarlo 15 píxeles se ven bien y no olvides el color. Aquí estaría bien el gris, el de los estilos locales. Deberíamos crear un textil a partir de esto. Debería haber creado esto ya en la página principal. Había algunos pequeños elementos de texto como este, y si lo hubiera hecho ahí, tendríamos menos decisión de diseño que tomar aquí y todos ellos estarían enlazados y fácilmente editables y manejables en el futuro Imagina que si el cliente regresa y dice que no le gusta el estilo del teléfono, entonces verás el verdadero beneficio de usar estilos. Ahí tenemos el estilo de subtítulos ahora, y apliquemos eso también a los datos. A Para la imagen, tomemos alguna foto de splash o pexels Ahí está este círculo en su interior, así que lo que podemos hacer es poner esa imagen como relleno de ese círculo. A acaba de quitarle ese icono de la cara. Para la foto de portada, busquemos algo y luego al igual que la imagen aor, editemos como relleno de imagen Excelente. Para el cuerpo, vamos a seleccionar el estilo de párrafo y darle un color azul oscuro. No voy por el color gris como la página principal porque el gris no sería tan bueno en legibilidad En la página de inicio, estuvo bien porque el texto no era tanto. Pero aquí, es una entrada de blog, y la gente tiene que tener una experiencia muy buena y agradable a la hora de leerla. Y si están entrecerrando los ojos o si la pantalla parpadea o si no están viendo la fuente del texto correctamente, entonces simplemente no van a leer una cantidad tan grande Y para este blog de autor, lo mismo, reemplace la imagen, luego cambie los estilos de fuente y los colores. H. Mm hm. Un cuadro de comentarios, déjalo como está. No hace falta darle estilo a esto porque vamos a estar usando un plugin, que tiene su propio estilo. Además, no tiene sentido recrear ese estilo aquí, pero a veces tomo una captura de pantalla de un plugin e inserto eso en su lugar Si es importante mi cliente ya sepa cómo se ve. Y pie de página es PZ. Podemos copiar y pegar, pero hay una mejor opción. Podemos crear un componente a partir de él, porque vamos a tener este pie de página en tres páginas diferentes. Y de esta manera, si decidimos que necesitamos cambiar algunos diseños, podremos cambiar fácilmente una instancia, y luego los tres se actualizarán al mismo tiempo. Eso es. Nuestra página de entrada de blog está hecha. Nos queda una página más, que es la tasa de bloqueo, y lo vamos a hacer en el siguiente video. Quédate alrededor. 109. Diseño de cuadrícula de blog: En este video, vamos a diseñar la página principal de los blogs. Va a ser bastante fácil ya que mucho de ello está hecho. Ya tenemos wireframes y página BlogPost. Podemos reutilizar elementos de estas dos páginas. Empecemos duplicando la página de entrada del blog. Elimina todo lo que al lado del titular y habilitemos la grilla. Ahora, solo arregla el titular y el subtítulo. Ahora para las tarjetas, voy a copiar uno de los wireframes y tomarlo de ahí Si recuerdas en nuestra inspiración, las tarjetas son blancas sobre un fondo gris. De esa manera, la tarjeta es visible. Eso es lo que quiero hacer aquí, también, así que vamos a pintar el fondo gris igual que nuestra página de inicio. Ahora podemos cambiar el color de la tarjeta a blanco. A continuación, pongamos nuestra imagen de post como miniatura. Todo lo que tenemos que hacer es poner la imagen como relleno de un rectángulo. El icono del marcador de posición de la imagen podemos simplemente ocultar o eliminar No vamos a engañarlo otra vez. Necesitamos otro nivel de estilo de titular que podamos usar en esta tarjeta. 22 de tamaño y semi negrita, creo que se ve bien. También, podemos habilitar la capitalización del texto. Esto hará que el titular sea más título como. Tengamos esto como titular tres estilo en caso de que necesitemos modificarlo en el futuro Ahora para el texto del párrafo. Para el autor y bloque de fecha. Me gustaría que fuera más pequeño de lo que es ahora mismo. Es una información secundaria y no debería tener la misma importancia que el párrafo. Entonces voy a separar el textil y cambiarlo a 12 pixeles A Para ese pequeño separador, voy a usar una tumba ligera. Tales divisores, prefiero siempre ser más ligero que el texto al lado de él. Sevamos a separar avatar del autor del componente. Y hagámoslo diez píxeles más pequeño. A Podemos ordenar estos elementos usando la función de alineación de Figma, seleccionarlos y luego centrar horizontalmente O como lo llama Figma alinear centros verticales. Solo asegúrate de no tener el grupo de capas o no va a funcionar. También podemos usar esta función de ordenar o distribuir para distribuirlos de manera uniforme. Y una vez que hagas eso, se abrirá el nuevo campo. Esa es una distancia entre los objetos. Podemos cambiarlo a algo como diez y Figma distribuirá los objetos con diez píxeles de distancia. Es muy práctico. Estoy dejando este espacio vacío entre el párrafo y el bloque del autor por un motivo. Estoy tomando en cuenta las ocasiones en que un titular se extiende sobre tres líneas. De esa manera, nos aseguraremos de que la tarjeta no necesite estirarse y todas tengan la misma altura. Genial. La tarjeta de bloque está lista. Ahora podemos duplicarlos para crear la cuadrícula. Deberíamos poner contenido ficticio individual en estas tarjetas. Presentarlo así al cliente no es genial. Lo que podemos hacer para ahorrarnos tiempo es ir a algún blog y sacar contenido de ahí con imágenes, párrafos, y todo eso. Por ejemplo, podemos ir a medium.com y encontrar contenido ahí Para descargar imágenes, puedes capturarlas o usar este enlace de extensión de Chrome en los recursos. Escanea la página en busca imágenes y te permite descargarlas fácilmente. Bien Con sus nombres, voy a usar el plugin de contenido real. Puedo seleccionar todas las capas de nombre. Y al hacer clic en la opción de nombres, automáticamente se rellenará con nombres aleatorios. Bien, hagamos algo similar con aors. Vamos a asegurarnos de que el género de los nombres coincide correctamente con las fotos. No queremos a una chica llamada Arthur. M Ahí. Todo está mucho mejor ahora. Se ve real y mucho más impresionante que solo contenido repetido. Pero necesitamos fijar el espaciado en los blogs de aor. Ahora, los nombres han creado diferentes brechas. Muy último paso, el siguiente botón, que solo podemos duplicar de wireframes y cambiar el color U. Al igual que hacemos con los botones secundarios, podemos tomar el color gris y disminuir la opacidad Ese es un truco sencillo para crear colores a partir de una misma paleta. No hicimos esto en wireframes, pero sería bueno agregar flecha a este botón para representar la siguiente acción Voy a arrastrar el icono directamente del kit de estructura metálica. H. Ahí. Eso se ve bien. Mueve el pie de página hacia arriba y todo listo con una página de blog. A Todos los diseños para tres páginas ya están listos. Compartiríamos esto con el cliente y obtendríamos sus comentarios y realizaríamos las revisiones necesarias. Diseños, me gusta compartir desde el modo presentación, haz clic en Compartir prototipo y enviar ese enlace al cliente. Se abrirá justo en el modo de presentación, explicarles cómo navegar entre las páginas. Algo que puede ser evidente para nosotros a menudo no es muy evidente para los clientes. Y con esto concluye la sección. Hemos hecho mucho. Aprendimos una habilidad muy crucial, que es el proceso de diseño. Pasamos de brief de proyecto luego a moodboard y luego Y luego finalmente, hicimos los diseños, lo cual no fue muy difícil por todos los pequeños pasos que dimos antes que él. Sin esos pasos, diseñar habría sido mucho más difícil. Tus clientes no van a saber cómo funciona el proceso de diseño web, y pueden esperar y a menudo lo hacen simplemente te sientas y comienzas a construir el sitio web de inmediato. Y muchas veces incluso prefieren eso porque van a ahorrar tiempo y dinero, y tendrán un sitio web en funcionamiento lo antes posible. Pero construir sitios web sin diseños, va a traer resultados terribles, y por lo general va a costar más tiempo y dinero porque las revisiones en el sitio web en vivo son solo toman mucho más tiempo del que harías revisiones en los diseños o incluso revisiones en comparación con wireframes, cual es tan fácil de hacer, ¿verdad Solo mueves las cosas por ahí. No piensas en nada. Ahora imagina todo lo que hacemos dentro de Webflow, construimos todo, todas las estructuras, y luego, de repente, necesitamos rediseñar algo por completo y crear una nueva interacción o un nuevo Y lo mismo se aplica a la propia fase de diseño, porque cuando estás diseñando, obviamente, puedes diseñar sin wireframes y sin contenido Pero cuando tienes wireframes, cuando tienes ese esqueleto y cuando tienes contenido que estás diseñando, las cosas son simplemente mucho más simples Y cualquier iteración que tengas que hacer durante la fase de estructurar tu página y estructurar el sitio web, mucho más fácil en los wireframes ¿Por qué hacer eso en la fase de diseño? Así que asegúrate de educar a tus clientes sobre tu proceso de diseño. Te amarán por tu profesionalismo y por tu confianza en tu proceso, aunque se resistieran al principio Bien, la siguiente sección se trata de construir todo esto en Webflow. Quédate alrededor. 110. Desarrollo de Webflow 2: bien, Esta es mi parte favorita diseños de construcción dentro de Wetklo en esta sección. Vamos a construir ese diseño de página principal, y lo vamos a hacer ya usando todo lo que hemos aprendido en weap Low, pero también algunos conceptos nuevos que aún no hemos cubierto. En la siguiente sección, vamos a aprender interacciones, Herramienta dentro de flujo llorado, y la vamos a utilizar para crear algunas interacciones y animaciones para dar vida a toda la página interacciones. Hacer Sitio web más emocionante e impresionante va a ser divertido. Y en la sección después de eso vamos a construir registro donde vamos a aprender sistema de gestión de contenidos CMS por flujo húmedo y cómo convertir cualquier página en una página dinámica para sacar información de la base de datos y cómo realmente construir una base de datos dentro, ah lloró flujo y cómo estructurarlo para que podamos crear el bonito blawg con diferentes campos dinámicos como nombre del autor, titulares, fotos para cubrir fotos y todo eso. Entonces, sin más preámbulos, vamos a sumergirnos, quedarnos 111. Webflow 2: estilos de fondo: Yo en este video, vamos a construir una pequeña parte de la sección de héroes, solo la imagen de fondo. Y para ello vamos a aprender un concepto que aún no hemos tocado en profundidad, los estilos de fondo. Para empezar, vamos a crear un nuevo proyecto. plan Webflow solo permite dos proyectos no hospedados, y si ya llegaste a tu límite, que probablemente hiciste, puedes eliminar uno de esos proyectos anteriores prefiero el primero, el simple Vamos a nombrar esta App de Equipo y elegir una plantilla en blanco. A como de costumbre, comenzamos con la sección. Ya usamos estilos de fondo para establecer un relleno de fondo de color sólido a nuestros DVBlocks Pero eso es sólo una pequeña parte de lo que podemos hacer con los estilos de fondo. Al igual que Figma, también podemos dar rellenos de fondo degradado, rellenos imagen y superposiciones de color Todo lo que es accesible haciendo clic en este icono más debajo de los fondos. Primero está la imagen de fondo. Eso es lo que vamos a estar usando en este caso. Volveremos a esto más tarde. El siguiente, tenemos gradiente lineal, que funciona de manera similar a FigmasGradient Para cambiar los colores inicial y final, haga doble clic en estos marcadores. También puedes establecer el ángulo del degradado. En Figma, utilizamos este palo que se puede mover manualmente Pero aquí tenemos que establecer el ángulo girando este dial o simplemente haciendo clic en estos controles de rotación o poniendo el grado exacto en este campo. El siguiente tenemos gradiente radial. En Figma, somos capaces de mover el posicionamiento manualmente arrastrando el mango de ese stick, pero en Webflow, podemos hacerlo cambiando el posicionamiento en este De manera similar, podemos cambiar el tamaño del degradado a partir de estos botones. Tienen explicación sobre cómo se determina el tamaño, pero ¿a quién le importa? Simplemente cámbialos para ver qué funciona para ti. La última opción es la superposición de colores. Esto se utiliza principalmente para poner un color semitransparente encima de las imágenes, como lo que hicimos en Figma, pero en lugar de un degradado, solo un relleno sólido Para que esto funcione, tenemos que agregar una imagen como capa extra y colocarla debajo de la superposición. Funciona igual que cabría esperar. Ocultar espectáculo, arrastrarlos alrededor, eliminar. Bien, en nuestro caso, necesitamos agregar una imagen de fondo. Necesitamos exportar la imagen de nuestro archivo Figma y luego subirla aquí Oh Tenemos tres opciones de tamaño. El primero es personalizado que nos permite dar a nuestra imagen valores personalizados. El ordenamiento en teselas está habilitado de forma predeterminada. Tenemos que quitar eso de aquí. Queremos que la imagen se extienda y llene todo el espacio de la caja. Para eso, necesitamos seleccionar cobertura. Con portada, la imagen cambiará el tamaño y recortará para que pueda caber en todo el espacio Es decir, cubrirá todo el espacio. Con un contenido, la imagen cambiará el tamaño para asegurarse de que todas las partes de la imagen sean visibles Entonces, no importa cómo cambies las dimensiones de la pantalla o el tamaño del bloque div, toda la imagen siempre estará visible. Esto significa que a menudo habrá vacíos vacíos. Así que la cobertura es lo mejor en nuestro caso. Ahora, como puede ver, el ajuste de la cubierta es muy fluido. Ajusta tanto el tamaño el recorte para que la imagen cubra todo el objeto Si es necesario, estirará toda la imagen más allá de su tamaño original. Cuando se trata de cultivos, tenemos un control sobre qué lado se cultiva que un control sobre qué lado se cultiva que es el control bajo opciones de posicionamiento Este mapa de posicionamiento es una gran manera visual ajustar y ver cuál funciona mejor. El posicionamiento por defecto, que está arriba a la izquierda, no es muy bueno. El portátil que está viendo es realmente importante para la historia. Sin la laptop en el marco, no sabemos lo que está haciendo. La imagen se vuelve confusa. Entonces, dado este hecho, tenemos que elegir una posición donde la laptop se muestre en todo momento. El centrado podría ser mejor. Esto anclará la imagen por el centro y recortará cualquier exceso en los cuatro lados. Por ahora, es bueno. Cuando ponemos el contenido, es posible que tengamos que ajustarnos. Pero nos estamos olvidando una talla más, la más ancha. También tenemos que verificar ahí. Esto podría no ser visible para ti, pero la foto es un poco borrosa aquí. ¿Por qué? Porque la imagen que hemos exportado es de 1,440 píxeles. Ese es el tamaño de nuestro marco de diseño en Figma. Entonces, en tamaños de pantalla más grandes, se estirará, y la foto perderá calidad. este momento, la vista previa de ancho completo que estoy viendo es de 1,920 píxeles Esto es significativamente más grande que los 1,440, por lo que la foto se extiende más allá de su tamaño original Para solucionar este problema, necesitamos exportar una imagen más grande de Figma, y necesitamos exportar algo que va a ser lo suficientemente grande como para cubrir la mayoría de los tamaños de pantalla. Y eso suele ser de 1.920 píxeles. Obviamente son resoluciones más grandes que eso, pero no tenemos que volvernos demasiado locos porque esa es una minoría muy pequeña. E incluso en esos casos, las personas que usan tamaños de pantalla muy grandes, no usan su navegador ancho completo en su tamaño de pantalla. Tan a menudo todavía lo encogerán y es posible que todavía lo vean en el tamaño de 1920 píxeles. Bien, para exportar un tamaño más grande para nuestra imagen, simplemente podemos ingresar el ancho que queremos en esta configuración de tamaño. Poner 1920 seguido de W para ancho. Y de esa manera exportaremos la foto en 1,920 píxeles Y. Cuando hagas esto, asegúrate que la imagen original que pones aquí tenga al menos 1,920 píxeles De lo contrario, solo estás estirando la imagen como Spandex, y eso es lo mismo que sucede en Webflow, así que no tiene sentido La imagen original que coloqué en Figma era grande. Simplemente lo reduje para posicionarlo perfectamente en el marco Ahora podemos volver atrás y subirlo para nuestra sección de héroes. Y eso es todo. Hemos aprendido a usar estilos de fondo dentro de Webflow, principalmente la configuración de imagen y cómo posicionarla perfectamente para asegurarnos se estira y se encoge muy bien en muchos tamaños de pantalla diferentes Me he saltado un par de otras configuraciones que rara vez se usan dentro de los estilos de fondo, pero a estas alturas, ya conoces mi estilo de enseñanza No me gusta abarrotar tu cerebro con cosas hasta que realmente las necesitemos. Vamos a continuar con nuestra sección de héroes en el siguiente video, así que quédate. 112. Webflow 2: barra de navegación (aplicación de equipo): En este video, vamos a construir la barra de navegación. Si recuerdas, la barra de navegación es un componente prefabricado en Webflow, que podemos arrastrar justo sobre los cavas desde aquí, y podemos estilizarlo como queramos Aquí hay un truco oculto de Webflow. Presiona Comando o Control E. Obtendrás esta barra de búsqueda rápida. Aquí podemos buscar todos los elementos y encontrar activos y mucho más. Puedes buscar en la barra de navegación y arrastrarla directamente a la página o simplemente presionar Enter e insertaremos automáticamente Bien, entonces, ¿qué tenemos que hacer con una barra de navegación? Lo primero que noté es el tamaño del contenedor. Navbar está usando un ancho de contenedor predeterminado de 950 píxeles o algo así Si recuerdas la última vez, hemos usado un contenedor diferente, pero ¿cuál es el tamaño del contenedor que queremos usar? Eso es bastante sencillo de averiguar. Solo necesitamos medir el contenedor Figma, que es exactamente el ancho completo de nuestra cuadrícula Dibuja un rectángulo sobre él y mira cuál es el ancho de ese rectángulo. Eso son 1,160 píxeles. Ahora, ¿qué tenemos que hacer en Webflow? Solo necesitamos tomar el contenedor y darle un nuevo tamaño de ancho máximo. ¿Por qué le estamos dando ancho máximo y no el ancho regular? Porque el ancho regular no responde. Queremos que se encoja cuando la pantalla se encoge, y un ancho regular la mantendrá en 1,160 píxeles, sin importar el tamaño de la pantalla La barra de navegación está pegada a los bordes cuando encojimos la pantalla, por lo que necesitamos agregarle un poco de relleno. Y ahí lo tenemos. A continuación, tenemos que cambiar el fondo. Nuestra barra de navegación en el diseño es transparente. Eso es fácil de cambiar. Selecciona toda la barra de navegación, no solo el contenedor y cambia el color a transparente Bien, ahora agreguemos el logo. Tenemos que exportarlo primero de Figma. Vamos a exportarlo como archivo SVG porque para imágenes basadas en vectores, es el mejor formato de archivo. Es un tamaño de archivo pequeño, y nunca pierde calidad por mucho que lo estires. Para insertar el logo dentro de la caja de la marca, primero necesitamos soltar el elemento de imagen. ¿Viste lo que hice aquí? Rápido bien, luego busca imagen. Y debido a que tenía elemento de marca seleccionado, se me cayó justo dentro cuando golpeé Enter. A continuación, diseñemos los enlaces. Pero primero, necesitamos agregar la fuente a nuestro proyecto. Estamos usando un teléfono de Google llamado Kavin. No está dentro de la lista de fuentes aquí, así que tenemos que agregar la fuente desde la configuración del proyecto. Podemos acceder a esa página desde este enlace aquí. Te llevaré exactamente al lugar correcto. Creo que estamos usando la mayor parte del estilo de teléfono, así que vamos a agregarlo todo. Y hecho, ahora podemos volver al diseñador y comenzar a construir o diseñar. Si mantuvo abierta la pestaña del diseñador, asegúrese de refrescarla después de agregar la fuente, para que la fuente aparezca en el menú desplegable. Ahora bien, la forma obvia de aplicar un teléfono a algo es seleccionando el elemento y cambiando la fuente. Pero esto no es utilizar todo el poder de HTML y CSS. Si aplicamos un estilo de fuente en algo de alto nivel, entonces será heredado por todos los hijos. El elemento más alto de la jerarquía es el cuerpo. Podemos acceder a cuerpo desde el navegador. Una vez que haya seleccionado el cuerpo, vaya al campo selector y desde el menú desplegable, seleccione el cuerpo Cuando selecciones la etiqueta corporal, verás que algunos de los estilos de teléfono están en azul. Eso significa que ya se le han aplicado algunos estilos por defecto. Podemos cambiar el teléfono a cabina aquí. Ahora, cada nuevo elemento, etiquetas de párrafo de encabezado serán todas archivadas por defecto hasta que las sobrescribamos ¿Por qué este enfoque es superior a cambiar las fuentes directamente en cada elemento? Bueno, primero ahorra tiempo. Pero, segundo, solo cambiar la etiqueta corporal, podemos editar la fuente en todo el sitio web con un par de clics. Eso es. Ahora los Navinks están heredando la fuente de la etiqueta body. Incluso puedes hacer clic en este enlace naranja, y te dirá que está heredando el estilo de la etiqueta del cuerpo Ahora vamos a diseñar el resto de las propiedades en los enlaces. Cambia el color a blanco desde aquí. Los otros enlaces estaban de moda, ¿por qué es eso? Porque no tenemos una clase de estilo aplicada a ellos por defecto. Al cambiar el auto en el primero, Webflow creó automáticamente una nueva clase de estilo y la llamó enlace de navegación Ahora podemos tomar esa clase y aplicarla sobre otras dos, así que todos los cambios se aplican a todas ellas. Tenemos cinco enlaces Nab en el diseño y uno de ellos es un botón Cambiemos los tamaños de los enlaces para que coincidan con el tamaño del botón. Si seleccionamos uno de ellos y verificamos las propiedades de espaciado, verás que sus tamaños están determinados por el relleno. Si cambiamos estos valores de relleno para que coincidan con el botón en nuestros diseños, entonces obtendremos el tamaño correspondiente. El relleno del botón en los diseños es 12 verticalmente y 20 horizontalmente. Vamos a darle estilo al último enlace para convertirlo en un botón. Solo necesitamos agregar un fondo y redondear las esquinas. Pero no podemos simplemente diseñarlo desde el principio, ¿o sí? Tiene la misma clase que otras, así que va a editar todos los enlaces. ¿Qué hacemos? Esa clase combo, claro. Vaya al campo selector y escriba un nuevo nombre junto al enlace Nab Eso le va a dar una clase combo. CSS distingue entre mayúsculas y minúsculas, por lo que no importa si usas mayúsculas o minúsculas Prefiero usar minúsculas para ahorrar tiempo. Webflow capitaliza automáticamente . Sugiero usar minúsculas. Es más rápido de escribir, y además verás la diferencia entre los estilos que fueron creados automáticamente por Webflow y los que creaste manualmente Bien, entonces, ¿cuáles son las propiedades de nuestro botón? Tenía un fondo blanco con 20% de opacidad y cuatro esquinas redondeadas de píxeles Esta A para Alpha es como puedes establecer la transparencia en el color. Pon 20, y ahí tienes. Las esquinas redondeadas tienen que ser aplicadas desde aquí bajo el radio del borde. Excelente, arreglemos el espaciado ahora. Los enlaces en nuestros diseños están a 30 píxeles de ese borde superior. Podemos crear esto en Webflow de dos maneras, ya sea agregando un margen de 30 píxeles en la parte superior del contenedor o agregando un relleno de 30 píxeles a la propia barra de navegación El resultado es lo mismo, pero el segundo es mejor, ¿por qué? Porque el contenedor es una clase que vamos a reutilizar en otro lugar, así que lo mejor es mantenerlo intacto. La clase Navbar, por otro lado, va a ser utilizada solo en la barra de navegación para que podamos diseñarla de manera segura como queramos Como puedes ver, el logo no está centrado. Apenas se nota si no se ven los límites del contenedor, pero no podemos ignorar esos detalles. Queremos que nuestro sitio web se vea prístino, una obra de arte. Entonces, ¿cómo centramos el logo en el medio? En cualquier momento que necesites mover o posicionar algo, empieza siempre pensando en los márgenes y el relleno. Estas propiedades cubrirán la mayoría de los casos. Podemos simplemente agregar un margen superior en la parte superior del logotipo, y eso es todo. Aquí sólo estoy midiendo con un ojo. Nuestros enlaces de navegación no tienen ningún efecto de desplazamiento sobre ellos en este momento Esto hace que la barra de navegación esté muerta y no sea muy divertida para interactuar con ella La última vez agregamos un borde subyacente a los enlaces. Esta vez podemos hacer algo diferente, algo más sencillo como cambio de color. Este es uno de los efectos de desplazamiento más simples, rápidos pero efectivos que puedes usar en muchos elementos interactivos diferentes Cambiar la opacidad al pasar el cursor. Cómo aplicamos el efecto hover a elementos del estado hover, que se puede acceder aquí mismo Cambiemos la opacidad a 80%. Y ahí este simple efecto también funciona en el fondo. Agreguemos un efecto de transición para que el cambio de desplazamiento sea agradable y suave Esto debe agregarse en un estado regular, no en el estado flotante, sino que afectará al hover esperaría que sea editable dentro del efecto hover, pero no lo es. Así es como funciona CSS en este caso. Probablemente hay lógica detrás de ello. Probemos la capacidad de respuesta del escritorio, no los móviles. Eso lo haremos al final. Y eso es todo. Navbar se ve bien. Terminaremos la sección de héroes en el siguiente video. Quédate alrededor. 113. Webflow 2: contenido principal: Y volvemos a construir el contenido de la sección de héroes. Para Stars, necesitamos un contenedor, ¿verdad? Y darle una clase de contenedor que ya creamos la última vez dentro del Napbar Muy bien, pongamos nuestro contenido dentro del contenedor. Tenemos un encabezado, un párrafo y un formulario. Vamos a darle estilo al encabezado y al párrafo en este video, pero haremos el formulario en el siguiente para que podamos cubrir formularios con más profundidad ya que aún no los hemos tocado. Necesitamos algo de espacio en los costados, igual que hicimos con la barra de la napbar Podemos agregar el relleno a la caja del héroe. Pero espera un segundo. Esto no se ve bien. El bar Nab ahora se ha movido aún más apretado por dentro. Eso es porque tenemos un acolchado en la barra Nab. Y la barra de navegación está sentada dentro del bloque héroe, por lo que hay el doble de relleno, haciendo un total de 120 píxeles. Así que vamos a quitar el relleno de la barra de navegación porque ya no lo necesitamos. El del héroe se encargará de ello. Puedes restablecer fácilmente cualquiera de las estrellas haciendo clic aquí. Yo suelo usar atajo, que es Opción más clic. Creo que debería ser Aclick para Windows. Vamos a darle estilo al encabezado. El tamaño es 55 y el peso es regular. Esto es lo mismo con otras instancias de un titular en todas partes de nuestro diseño. Entonces va a ser una buena idea darle estilo a este titular como una etiqueta H one y no solo una clase. ¿Recuerdas cuál es la diferencia entre una clase y una etiqueta? La etiqueta es un elemento HTML básico. Es como le dices al navegador que algo es un titular, un párrafo o un bloque DO. Si diseñamos una etiqueta H one directamente, podremos controlar todas las etiquetas H one en nuestro sitio web sin aplicar ninguna clase a. Tecnología de estilo, asegúrese de que no se seleccione ninguna clase. Entonces el campo selector necesita estar vacío. A veces te olvidarás y nosotros diseñaremos un titular directamente. Eso creará automáticamente una nueva clase. Por lo que cualquier cambio se aplicará sólo a esa clase. Para arreglar esto, solo quita la clase y empieza de nuevo. Y seleccione todos los encabezados H one del menú desplegable. Ahora estás estilizando la etiqueta H one. Eso es exactamente lo que queremos. Necesitamos el valor de altura de línea. Y como nunca cambiamos la altura de línea predeterminada de este titular, el campo ahora mismo dice Auto. WAP no toma eso como un valor, así que no va a funcionar para nosotros. Pero si haces clic en el campo, las etiquetas de marcador de posición te mostrarán esa altura de línea predeterminada en píxeles, que es de aproximadamente 67 píxeles Si quieres apegarte al uso de unidades de porcentaje en lugar de unidades de píxeles para la altura de la línea, entonces solo puedes hacer los cálculos. El valor porcentual es relativo al tamaño del teléfono. Por ejemplo, 100% de altura de línea significa lo mismo que el tamaño del teléfono. Para un teléfono de 50 píxeles, eso es una altura de línea de 50 píxeles 200% la altura de la línea sería de 100 píxeles, básicamente el doble del tamaño del En nuestro caso, podemos tomar 67 y dividirlo por 55 o tamaño del teléfono, multiplicar por 100, para que podamos obtener el valor porcentual y eso es alrededor del 122% Generalmente prefiero usar porcentajes porque tiene un gran beneficio. Cuando cambias el tamaño de tu teléfono en pantallas más pequeñas, no necesitas cambiar la altura de la línea porque es valor porcentual y lo calculará en función del nuevo tamaño del teléfono. Mientras que la unidad de píxeles va a mantener esa altura a medida que cambie el tamaño del teléfono. Entonces terminarás con algunas situaciones extrañas de altura de línea. Observe cómo el cuadro delimitador permanece sin cambios. Eso se debe a que la altura de línea es un valor de píxel fijo. Mientras que durante la altura porcentual, el cuadro delimitador crece y se encoge de manera consistente con el tamaño del teléfono Bien, no voy a poner esto en color blanco, ¿sabes por qué? Porque la mayoría de nuestros titulares no van a ser blancos. Van a ser de ese color azul oscuro. Entonces, en cambio, pongamos ese color azul oscuro aquí, y luego encontraremos otra manera de cambiar este particular a blanco. Voy a ingresar al modo de edición de estilos de color para poder copiar el código de color. De lo contrario, no se nota de inmediato, ya que hemos establecido este color como un estilo. También me gustaría guardar este color azul de alguna manera, así que no tengo que buscar el código hexadecimal cada vez que lo necesito. Ingresa variables. Probablemente notes este pequeño punto morado que aparece cada vez que pasas el cursor sobre algunos estilos Esta cosa te permite guardar diferentes valores que puedes reutilizarlos y controlarlos desde un solo lugar. Por ejemplo, haga clic en ese punto, luego haga clic en el icono más para crear una nueva variable y nombra esa variable, azul oscuro o azul marino o lo que quiera. Este color ahora se ha convertido en una variable que podemos reutilizar en otro lugar, por ejemplo, en un botón. Solo necesitas volver a hacer clic en ese punto, y ahora puedes ver que la variable azul oscuro está disponible en el desplegable, cual podemos aplicar al fondo de este botón Si crees que esto funciona igual que los estilos infigma, tienes razón Es exactamente el mismo concepto con un nombre diferente y algunas otras pequeñas diferencias, pero la idea detrás de él es la misma. Por ejemplo, cuando editas tu variable, actualizará todas las instancias de tu lado. Ese es el mismo comportamiento que Figma. También puede desvincular el valor de la variable y luego editar el color de forma independiente Figma muestra todos sus estilos en el panel aquí cuando no se selecciona ningún elemento, pero Webflow tiene un panel dedicado para variables, donde se pueden administrar todas las variables en un solo Edítelos, elimínelos, agregue otros nuevos. Esto muestra todos los diferentes tipos de variables que puedes agregar. Cuando borres una variable en los lugares donde se usó, recibirás este mensaje. A partir de aquí, puedes restaurar la variable o desvincularla. Y eso es todo. Es una característica simple pero útil. Muy bien, seguir adelante. La etiqueta H one está lista. Si agregamos un nuevo titular, ahora llevaremos los estilos de titular. Entonces, ¿qué tal ese color blanco para el titular del héroe? Ese simplemente podemos agregarle una nueva clase y luego darle estilo a blanco. Me gusta agregar un nombre de clase blanco, en este caso, si el color es lo único que estoy cambiando. De esa manera, la clase tiene claro lo que hace, y puedo reutilizar esta clase cada vez que necesite un titular blanco o cualquier otro texto blanco para el caso. Siempre que intentes aplicar un nuevo color a algo que ya tiene una variable aplicada, primero debes desvincular el color de la variable y luego podrás poner el color personalizado Esta opción aparece al hacer clic en ella, no desde este icono de lápiz. Por cierto, muchos nombres de colores comunes funcionan dentro de este relleno, por lo que solo puedes escribirlos como blanco o negro, rosa, etc. Una cosa más que me gustaría cambiar es el margen superior. Hay un margen superior predeterminado de 20 píxeles en las etiquetas H one. Eso va a agregar espacio extra a nuestro espaciado entre secciones. Así que vamos a deshacernos de él. Si alguna vez lo necesitamos, siempre podemos agregarlo al titular particular. En cuanto al párrafo, no vamos a darle estilo a la etiqueta. vamos a darle estilo a la clase En cambio, vamos a darle estilo a la clase porque el párrafo en la sección de héroe es diferente en comparación con cualquiera de los párrafos o en otra parte de la página. Astly, coloquemos el contenido del héroe correctamente en el medio Eso es tan simple como agregar un margen en la parte superior, pero no queremos agregar un margen en el contenedor. Vamos a reutilizar esa clase de contenedor a través de nuestra página, y ya la tenemos en la Navbar Por lo que agregar un margen en la parte superior alterará todas las instancias de este contenedor. Hay dos formas en las que podemos hacer esto. Podríamos agregar una clase combo al contenedor y luego al margen. De esta manera, nuestro contenedor base estará intacto, pero una opción un poco mejor es agregar una caja extra y poner el contenido dentro. Entonces podemos darle estilo a esa caja como queramos. Prefiero esta opción porque es un poco limpia y ofrece más flexibilidad en el fondo de la línea. Agrega un nuevo bloque D y simplemente arrastra los elementos dentro. Tal vez te resulte más fácil hacerlo desde el navegador. Nombremos a este dip block algo así como contenido héroe y agreguemos un margen similar que tenemos en los diseños. Vamos a darle un ancho máximo para que quede muy bien contenido en nuestros diseños. Ver, usar el Dibblock separado ya nos dio más flexibilidad de lo que podemos hacer con él Excelente. Vamos a comprobar la capacidad de respuesta. Perfecto. Ahora todo se ve agudo. Sólo nos queda una forma, que vamos a hacer a continuación. 114. Webflow 2: formas: Y estamos de vuelta en este video, vamos a aprender los fundamentos de las formas dentro del weblog Dentro del panel Elementos, hay una sección especial dedicada a las formas y elementos de forma. primer paso es siempre agregar un bloque de formulario, que viene con algunos elementos ya. Podemos eliminar cualquiera de esto como queramos, y podemos agregar más elementos dentro del bloque de formulario. Echemos un vistazo. ¿De qué está hecho este bloque de formulario? Hay tres grupos dentro de forma, que contiene todo lo que vemos actualmente. Al igual que el campo y el botón enviar, entonces tenemos un mensaje de éxito que se oculta al principio y solo aparece una vez que el formulario se envía correctamente. Y el mensaje de error que solo aparece cuando hubo algún tipo de errores cuando el usuario intentaba enviar el formulario. Si queremos agregar nuevos elementos al formulario, podemos arrastrar cosas como desplegables y chatbox dentro del Cada campo de formulario tiene su propia configuración. Si hace clic en este icono de engranaje o hace doble clic en el campo del formulario, se mostrará la configuración para este campo de entrada. El primer elemento en la configuración es el nombre del campo. Este nombre es interno. Es justo lo que vemos dentro de la base de datos. Los usuarios no van a ver el nombre. La etiqueta del campo está afuera. No está en la configuración. Es solo un bloque de texto regular que está sentado encima del campo mismo, que podemos editar y diseñar como lo haríamos con cualquier bloque de texto. Pero si queremos un look más minimalista donde la etiqueta está dentro del campo y no fuera de él, como la tenemos en nuestros diseños, entonces podemos agregar esto bajo un campo de marcador Y entonces podremos deshacernos de la etiqueta. El siguiente ajuste es el tipo de texto. Esto significa qué tipo de texto se acepta dentro de este campo. este momento está configurado para correo electrónico, por lo que solo permitirá correos electrónicos y cualquier otra cosa dará un error. Si quieres recopilar nombres y texto regular, entonces configuraremos esto en plano, entonces aceptará cualquier tipo de información. También tienes opciones de contraseña, teléfono y número. Debajo, tenemos una opción para hacer que el campo requerido y tal vez el enfoque automático enfoque automático significa que el campo se seleccionará de inmediato a medida que se cargue la página Para un campo de selección desplegable, haga clic en Configuración para editar la lista de opciones que se encuentra dentro del menú desplegable Puedes editar las elecciones, eliminarlas, agregar más, reordenarlas, básicamente todo lo que esperarías No necesitamos un desplegable para nuestro formulario, así podemos deshacernos de él. Bien, vamos a darle estilo a nuestra forma. En nuestros diseños, hicimos que la forma fuera horizontal, el campo y el botón uno al lado del otro. Aquí están alineados uno encima del otro. Entonces, ¿cómo podemos alinearlos uno al lado del otro? Bueno, el bloque de formulario no es diferente a todos los demás elementos de esta página. Podemos darle clases y estilizarlas desde el panel Estilos. El flexbox es una opción obvia cuando se trata de alineación horizontal Asegúrese de seleccionar el elemento de formulario en lugar de un elemento de bloque de formulario porque estamos tratando de alinear el campo y el botón. El bloque de formulario contiene mensajes de forma, éxito y error en su interior. Entonces va a alinear estos tres elementos. Esto es lo que va a pasar. Entonces, una vez más, selecciona el elemento llamado form y luego dale un flex de visualización. Ahora podemos darle estilo al campo y al botón de forma independiente. Nuestro campo tiene 56 píxeles de altura, tiene esquinas redondeadas y tiene un texto en su interior que es de 16 píxeles con un color gris. Y ahora, para hacer que ese texto marcador dentro del campo sea de diferente color, verás que cambiar el color no le hace nada Eso es porque este color de texto cambia el color del texto que el usuario realmente escribe dentro. Puedes comprobarlo dentro del modo de vista previa. Pero eso no es lo que queremos cambiar. Eso estuvo bien como estaba. Para aplicar estilo al campo marcador de posición, vaya a los estados del campo y seleccione marcador Ahora podemos cambiar el color del texto del marcador de posición. Excelente. Ahora para el botón. Vamos a darle un botón de nombre de clase. El texto dentro del botón Formulario se puede editar desde la configuración al igual que otros elementos del formulario. Esto es un poco diferente de otros botones donde podemos editar texto directamente haciendo clic a través de él. A Quiero que le pongas atención a algo aquí. Ya ves como el botón es un poco más alto que un campo. Pero el botón en realidad no tiene una altura y tiene un relleno que es de sólo nueve píxeles. Entonces, ¿por qué es tan alto? Eso se debe a los ajustes que se le dan a la caja flexible padre. Ves aquí dice estiramiento. Eso significa que los niños flex sentirán la altura del flexbox hasta que se indique lo contrario Si cambias eso, entonces la altura cambiará con él. Pero quizás te preguntes cómo es que el campo tiene una altura diferente. Eso tiene que ver con un margen predeterminado que se aplica al campo. Ese margen extra de diez píxeles está estirando el flexbox. Entonces el botón tiene ahora más espacio para llenar. Si eliminamos ese margen del campo, entonces el botón se encogerá y coincidirá con el tamaño del campo. Pero mantengamos ese margen por ahora. A veces cuando tenemos múltiples campos, necesitamos ese margen. Podemos solucionar este problema simplemente dándole al botón una altura fija. Quiero que mires más de cerca este comportamiento porque a menudo te encontrarás con tales irregularidades dentro de Webflow o generalmente cuando estás diseñando y desarrollando un sitio web, porque todos los elementos y todo el entorno interactúan entre sí y cambian la estructura del sitio web Entonces un margen aquí podría estar cambiando algún otro comportamiento en un elemento muy diferente, derecho, igual que lo que sucedió en este ejemplo. Alguna vez algo así me pasaría al principio, siempre pensaría como, Oh, ¿esto es un bicho? ¿Por qué no funciona así? Siempre pensé que era algo con weblo. Entonces iría por el foro buscando este error con un botón o un formulario o algo así. Y luego en algún momento, llego a la respuesta, y luego la respuesta sería bastante simple. Por eso quiero que aprendas a buscar las pistas cuando te quedes atascado en algo y lo pienses como un rompecabezas Siempre piensas que hay una solución. La respuesta está ahí en algún lugar. No es que la herramienta esté rota o sea un error o algo no esté funcionando correctamente, sino que hay algún tipo de rompecabezas que hay que resolver. Como recuerdo, y siempre suele ser frustrante si estás con una herramienta y estás tratando de construir algo y simplemente no vas a tu manera y no está funcionando, y es sientas frustración y podrías desanimarte y quizás ya no disfrutes del proceso Entonces quiero que tomes un respiro y lo mires de una manera que es un rompecabezas y hay una pista, y solo necesitas llegar a la respuesta. Así que revisa cada elemento y mira qué estilo se puede interactuar con otra cosa. Y llegarás a la respuesta, y te vas a sentir muy bien al respecto. Bien, echemos un vistazo al formulario en el modo de vista previa Todo se ve bien, pero el botón podría usar un efecto hover. No estoy seguro de por qué este texto es tan ligero aquí. Podría ser porque jugamos con el texto del marcador de posición e hicimos que la opacidad fuera un poco más clara Independientemente, solo vuelve a aplicar este color gris aquí y voy a solucionar el problema A simple su estado hará un pequeño cambio de color. Y eso es todo. Otra cosa que podemos cambiar son los mensajes de éxito y error. Para ello, primero, necesitamos mostrar los estados, lo que podemos hacer desde la configuración del formulario. Seleccione el bloque de formulario y vaya al panel de configuración. Aquí podemos cambiar entre estados normales de éxito y de error. Una vez que tengas habilitado el estado de éxito, entonces podrás interactuar con él y cambiarlos a tu gusto. Incluso podemos arrastrar otros elementos dentro o cambiar el fondo, darle estilo al texto, o cualquier otra cosa. En lugar de este mensaje de éxito, también podemos redirigir a los usuarios a una página de agradecimiento diferente, lo que podemos hacer agregando una URL de redirección en este campo. Pero en nuestro caso, vamos a mantener el mensaje de éxito. Lo mismo para el mensaje de error, cambia el estado para mostrarlo y luego estilízalo como quieras. Estoy bastante bien con este mensaje de error predeterminado y su estilo, así que mantengámoslo como está. Y eso es todo por el formulario por ahora. Una vez que publiquemos nuestro sitio, probaremos el formulario en el sitio web en vivo y veremos cómo podemos administrar los envíos de formularios. 115. Webflow 2: sección 1 de maqueta: Y estamos de vuelta en este video, vamos a hacer una pequeña parte de la siguiente sección, solo el contenido. Recuerda lo que hicimos en el sitio web anterior, hemos creado un bloque de sección genérico. Le dimos algunos acolchados por defecto, y eso fue todo. Al igual que hicimos con el elemento contenedor, tener una sección tan genérica nos da un buen control sobre el diseño del sitio web. Entonces dejemos caer una nueva sección, dale una clase. Dale un poco de relleno tanto vertical como horizontalmente. Necesitamos 60 píxeles en los lados de la barra Ahora, así que vamos a repetirlo. Para el relleno vertical, usemos 80 porque en nuestros diseños, a menudo estamos usando un espaciado de 160 píxeles entre secciones y 80 píxeles en superior e inferior sumarán hasta 160. No tengo una regla estricta sobre qué tipo de relleno usar. Dependiendo del sitio web, esto puede cambiar, y la mayoría de las veces, solo estoy mirando la cosa Y ahora dejemos caer otro contenedor dentro y apliquemos el contenedor de clase existente. En los diseños, tenemos blanco hueso, un poco azul, tipo grisáceo color de fondo en la página hemos hecho para que pudiéramos tener mejor contraste en las tarjetas blancas que pusimos en la página. Apliquemos ese fondo a la sección genérica. El titular ya está en el estilo correcto porque ya hemos diseñado la etiqueta H one anteriormente No lo hemos hecho para el párrafo, así que hagamos lo mismo, es decir, vamos a darle estilo a una etiqueta de párrafo. Entonces, todos nuestros textos genéricos de párrafo son de estilo sin agregarle ninguna clase. Para ello, primero seleccione el párrafo, luego vaya al campo selector y seleccione todos los párrafos. Bien, ahora vamos a darle como de costumbre, 18 píxeles de tamaño, 26 píxeles en altura de línea, y agarrar el código de color de ahí. Excelente. Ahora para el enlace Más información, aquí hay dos elementos, texto y el icono de flecha. Hay una manera de insertar realmente una flecha como un texto como un símbolo, pero estoy planeando animar esta flecha en el futuro, y en ese caso, necesitaremos una flecha para ser un objeto separado Entonces tenemos un texto y un elemento de imagen. Vamos a un enlace de texto. Al igual que con el encabezado y el párrafo, también podemos darle estilo a la etiqueta Links. Entonces en lugar de este azul genérico, vamos a cambiarlo por nuestro propio azul. Y todos los enlaces ahora tendrán ese color en particular. Ahora bien, si hipervinculamos texto en cualquier otro lugar, heredará el color de esa etiqueta de enlace Pero no podemos cambiar demasiado en la etiqueta Links, como el tamaño del texto, por ejemplo, porque los enlaces viven en otros lugares como párrafos, botones, etc. Entonces, si le damos estilo y si le damos a todos los enlaces que sean de 16 píxeles, entonces si enlazamos algo dentro del titular o dentro de un pie de foto o un tipo diferente de texto, entonces todos ellos van a convertirse en 16, por ejemplo así. Entonces todo lo demás que necesitamos para estilizar con un link, vamos a darle estilo a la clase y no a la etiqueta. Para eliminar el subrayado del enlace, sólo tiene que ir a la declaración de texto y pulsar sobre ninguno Bien, ahora necesitamos una flecha, que es sólo un elemento de imagen. Exportemos la imagen de flecha de Figma e insértela aquí Exportar como SVG, eso es lo mejor para este tipo de imágenes. En ocasiones las exportaciones de Figma van a terminar en una carpeta comprimida zip Vas a tener que extraerlo primero. En mi Mac, sólo voy a hacer doble clic y eso va a extraerlo. Creo que en Windows, es clic derecho y luego extraer aquí. Hay un espacio de cuatro píxeles antes de la flecha. No se alinea exactamente con el impuesto, así que agreguemos un margen negativo en la parte superior. Menos dos píxeles parece suficiente. Bien, eso está todo bien, pero hay un tema. Si revisas la vista previa, verás que el texto es un enlace. Se puede ver este cursor cambiando de una flecha de puntero a una mano, pero el icono de flecha no forma parte de ese enlace. Es un objeto separado. Este no es el mejor arreglo. Idealmente, queremos que se pueda hacer clic en la flecha y formar parte del enlace dos Hay una solución muy sencilla para esto. Solo necesitamos colocar ambos elementos dentro de un bloque de enlace. Para refrescar tu memoria, tenemos dos elementos de enlace dentro del panel. Uno es un enlace de texto normal, y otro es un bloque de enlaces. Un bloque de enlace es como un bloque div, pero es un enlace. Entonces cualquier cosa que pongamos dentro será parte de ese enlace. Entonces agregamos el bloque de enlace y luego arrastramos esos elementos dentro de ese bloque. Pero en realidad podemos arrastrar el elemento link dentro porque eso no está permitido. En cambio, necesitamos agregar un bloque de texto normal. Como puedes ver, en el momento en que ponemos texto dentro del bloque de enlace, se vuelve azul. Eso es porque ese bloque de enlaces es parte de esa vieja etiqueta de enlaces que acabamos de diseñar. Agreguemos esa clase a ese texto. Se supone que el subrayado va a desaparecer, pero no lo hace. Tenemos que quitar el subrayado del propio bloque de enlace Tomé una ruta muy extraña para demostrar esta implementación del enlace. Pero la razón por la que lo hice de esta manera es porque hubiera sido una forma natural de que pensaras, y va a ser una forma natural de que por este proceso porque cuando quieras agregar un nuevo enlace, vas a ir, Bien, déjame agregar un enlace de texto, ¿verdad? Y entonces vas a tener que agregar tal vez un ícono al botón o lo que sea, y vas a pensar, A, ¿cómo hago eso? Ahora no se puede hacer clic en este icono. Y tal vez te quedes atascado porque sabes que necesitas resolverlo. Entonces por eso quería tomar ese tipo de ruta equivocada entonces podamos entender exactamente cómo volver y rehacer todo de una manera que realmente queremos porque te encontrarás con este tipo de escenarios cuando quieres construir algo, vas con la forma natural que asumes que va a funcionar y luego no y tú asumes que va a funcionar y te quedas atascado, y como que vuelves y luego reduzcas un poco algunas cosas. Este tipo de prueba y error y pasando por los caminos accidentados de aprender esto va a ser la mejor manera para que entiendas este concepto Siempre que estés haciendo esto tu cuenta y construyendo un sitio web por tu cuenta, hay un lugar al que siempre puedes ir y encontrar respuestas, y ese es WebLoFum en Son una excelente comunidad, la gente responde ahí. Incluso weblo tiene gente que trabaja para esa comunidad y para el foro, y ahí también dan respuestas Pero también otros diseñadores de Webflow como yo y todos los demás, están contribuyendo y respondiendo preguntas Entonces, si estás atascado en alguna parte, búscalo en Google y busca en los formularios de Webflow porque muchas veces otras personas y otros diseñadores web tenían la misma pregunta que tú, por lo que es posible que ya encuentres respuestas ahí Si no, pregúntate y definitivamente conseguirás que alguien te ayude y te guíe y te dé respuestas. Y encontrarás el enlace al foro de Webflow dentro de la página de recursos Así que ve a comprobarlo. Todo bien. Por último, necesitamos colocar estos dos elementos uno al lado del otro. Tenemos dos opciones. Una es usar un flexbox, pero la segunda y más fácil opción es cambiar la propiedad de visualización del texto este momento es bloqueo. Bloquear significa que se estirará y ocupará toda la línea del padre. Por eso ARR se ve obligado a saltar a la segunda línea. Pero si lo cambiamos a bloque inline o inline, entonces la flecha volverá a subir. La flecha es un elemento de imagen, y los elementos de imagen por defecto ya están establecidos en bloque inline, así que por eso no necesitamos cambiarlo. Agreguemos el espacio en la parte superior de este enlace Más información. Todo ahora mismo, si comprobamos el modo privado, la flecha va a ser parte del Enlace dos Y eso es exactamente lo que necesitamos. Por último, necesitamos darle a este contenido un ancho máximo para que no se estire a través de todo el contenedor. No vamos a tocar el contenedor, claro, dejaremos caer otro bloque div y moveremos todo el contenido dentro de ese. Vamos a darle un ancho máximo de 464 píxeles, que es igual que en nuestros diseños. Y ahí tienes. Eso es mucho mejor. Eso es todo por ahora. Añadiremos la imagen en el siguiente video. Quédate alrededor. 116. Webflow 2: sección 2 de maqueta: Y estamos de vuelta. En este video, vamos a agregar la imagen a esta sección. Como es habitual, necesitamos exportar la imagen, agrupar primero todo el asunto y darle un nombre. No podemos exportar directamente estos ensayos. Si hacemos Figma exportaremos la imagen recortada. Eso se puede ver en la vista previa, pero no queremos una imagen ya recortada Queremos que sea recortada por los propios límites de la página, más como parte oculta. Arrastre una copia de todo este grupo a otro lugar de la página. Esto revelará todo el gráfico. Y ahora podemos exportarlo. Necesitamos PNG y dos X para resoluciones tina. Agreguemos un elemento de imagen dentro este contenedor y luego subamos nuestra imagen. A Seleccionar PPP alto ya que estamos usando dos x. Muy bien. Ahora, ¿qué hacemos? Ya hicimos algo muy parecido en el sitio web anterior, así que muchas cosas van a ser bastante iguales. Necesitamos la imagen para ir a la derecha. Como es habitual, Flexbox es una gran opción para ello. Eso es lo que también usamos la última vez. Para crear un Flexbox, necesitamos un bloque Dao extra donde vamos a colocar contenido e imagen dentro Vamos a crear una nueva clase. Y cambia la pantalla a flex. Vamos a establecer la alineación al centro. Y mientras estamos en ello, pongamos lo justificado al espacio entre. ¿Por qué? Porque queremos que el contenido esté pegado a la izquierda y que la imagen se pegue en el borde derecho. No va a cambiar nada en esta etapa porque realmente no hay espacio dentro del flexbox Y la forma en que el espacio entre las obras de fraguado es como un resorte. Inserta un resorte en el medio que empuja los elementos hacia los lados. Pero con cero espacio, no hay nada que empujar. Si hacemos que la imagen sea pequeña, entonces va a funcionar. Se va a presionar contra el borde del flexbox. Si recuerdas la última vez, usamos un truco especial para mover la imagen al borde y más allá de ella, usamos margen negativo. Entonces aquí vamos a hacer lo mismo. Ahora, verás que al principio, el margen negativo no mueve la imagen, pero luego en algún momento, empieza a moverse. Para ser honesto, no estoy 100% seguro de por qué sucede esto. Definitivamente tiene que ver con el hecho de que la imagen es tan grande y va más allá los límites del padre. Es por ello que siempre aconsejo que nunca se estile las imágenes directamente. Déjalos dentro de un blog div y estilízalos en su lugar. Vas a tener un comportamiento más predecible y adecuado porque Flaxbox hace cosas raras a las imágenes, y lo mejor es tenerlas dentro su propio Dvlock dedicado y luego se va a comportar correctamente y entenderás lo que está sucediendo y no vas a tener que lidiar con algún comportamiento extraño cuando el margen no se mueve, y luego en algún momento, comienza a moverse , y así sucesivamente. Pero esta vez, solo he usado la imagen para que podamos aprender de nuestros errores. Una última cosa que tenemos que arreglar aquí es este problema desbordante Para solucionar esto, necesitamos decirle a la sección elementos si se desbordan más allá de las fronteras. Es simple. Solo necesitamos establecer desbordamiento a oculto. No lo olvides, la configuración de desbordamiento se establece en el padre, no en la imagen misma. Vamos a crear una clase combo llamada overflow hidden. No queremos meternos con nuestra sección predeterminada y luego aplicar esta configuración de desbordamiento. Excelente. Verifiquemos dos veces la vista previa y la capacidad de respuesta. ¿Y terminamos con esta sección? 117. Webflow 2: secciones de fotos: En este video, vamos a construir esta sección. El layout es muy similar a la sección anterior que ya hicimos, así que ¿por qué no simplemente duplicarlo y tomarlo de ahí Selecciona toda la sección y solo haz la copia y pega Control C, Control V. Voy a soltar uno tras otro. Se invierte el orden del contenido. Podemos cambiar eso arrastrando el elemento image en la parte superior, y esto colocará primero la imagen Esta imagen tiene un margen negativo aplicado a ella, pero esta vez no la necesitamos. Para eliminar eso, necesitamos eliminar la clase porque no podemos hacer ninguna edición al margen en sí, eso va a afectar a la imagen anterior. Y ahora vamos a reemplazarlo por nuestra propia imagen. Esta vez, vamos a explorar el JPAG porque no tenemos fondo transparente, y JPAG siempre es mejor opción que PNG en términos de tamaño de archivo Pero aún así, vamos a comprimirlo en nuestro compresor de imagen. Sustituyamos el contenido. Oh ahí vamos. Elimine la clase combo overflow de la sección. Ya no necesitamos eso . Bien, necesitamos un poco de espaciamiento entre los dos. Agreguemos el margen a la imagen. Bien, entonces, ¿qué está pasando aquí? El contenido fue empujado hacia la derecha y fuera de la página. Se supone que la imagen se encoge, pero no es otra razón por la que es mejor dejar caer imágenes dentro de un Dibblog, especialmente cuando se trata de un flexbox Creo que ya hemos aprendido nuestra lección, así que vamos a envolverla dentro de Dibblock Cuando digo envolver algo dentro del DivLog, básicamente significa colocarlo dentro de un Diblog Crea una nueva clase y dale un margen de 60 píxeles ahí. Esta vez, la imagen se está encogiendo correctamente. En realidad, no es la imagen sino que el envoltorio de imagen se está encogiendo correctamente, y el elemento de imagen obedece a los límites de su padre El siguiente apartado es muy sencillo. Duplicar esta nueva sección, cambiar el orden dentro de la caja de bandera. Aunque, en este caso, necesitamos el margen del otro lado, crear una clase compa para el elemento envoltorio de imagen Aplicar cero a la derecha y 60 a la izquierda, y reemplazar el contenido. Excelente. Estas secciones se ven geniales. En el siguiente video, vamos a construir la sección testimonial. Eso va a ser divertido. Quédate alrededor. 118. Webflow 2: componente de deslizador: Bien, entonces ahora necesitamos construir la sección testimonial. Hemos decidido usar este tipo de deslizador, a veces llamado carrusel o deslizador o deslizador de carrusel Para construir eso en Webflow, necesitamos usar un componente muy útil llamado lógicamente un En este video, vamos a conocer el componente slider, y luego terminaremos la sección testimonial en video posterior Empecemos con la sección habitual, contenedor, así sucesivamente. Después a un encabezamiento. Ahora agreguemos un control deslizante, el cual podremos encontrar simplemente buscando dentro de un buscador rápido O en el panel Elementos en la sección Avanzadas. Se trata de un slider, un componente prefabricado que tiene mucha libertad para ser personalizado, pero a veces tiene sus limitaciones Como casi con todo en Webflow, los componentes prefabricados no son la única forma de crear tales diseños o Podríamos construir nuestro propio control deslizante desde cero, pero es un poco más de trabajo, y este control deslizante prefabricado hace un trabajo muy bueno la mayor parte del tiempo Slider ocupa todo el ancho de su contenedor padre. Entonces, si lo movemos justo sobre el cuerpo fuera de nuestro contenedor y la sección, entonces se estirará de borde a borde. Veamos de qué está hecho. Hay cuatro elementos en su interior. Primero es la máscara. Aquí es donde van nuestras diapositivas. En este momento, hay dos diapositivas predeterminadas en su interior. Por supuesto, no nos limitamos a dos. Entonces tenemos flechas izquierda y derecha, que son bloques de enlace con iconos de flecha en su interior. Y el último tenemos el deslizador de navegación. Estos son los puntos blancos que ves en el medio. Son cliqueables y te llevarán a la diapositiva correspondiente El tobogán en sí es solo un buen Dvbloc viejo. Nada particularmente especial en ellos. Se pueden diseñar como cualquier otro develoc y podemos dejar caer cualquier otro elemento dentro Cambiemos el fondo de cada diapositiva para que podamos ver mejor lo que está pasando. Comprobemos eso en el modo de vista previa. Dos diapositivas, flechas rojas y azules y los puntos de navegación cambian entre estas diapositivas. Básicamente, lo que está sucediendo es que hay dos bloques DV sentados uno al lado del otro, horizontalmente y los controles se mueven entre estos bloques de buceo con alguna animación. Eso es todo. Hay múltiples formas en las que podemos cambiar entre las diapositivas dentro del diseñador mediante el uso de Controles. O desde la configuración del deslizador, que tiene sus propias flechas o desde este desplegable donde podemos seleccionar exactamente la diapositiva que queramos. Así es como cambiamos entre las diapositivas para poder editarlas individualmente. Tenemos dos opciones para agregar diapositivas. Primero, podemos agregar una nueva diapositiva desde el panel de ajustes presionando Ed slide. Para poder ver la configuración del deslizador, hay que tener seleccionado algún elemento del deslizador. Como pueden ver, ahora tenemos tres diapositivas. Esto también ha agregado una nueva diapositiva DV Block dentro del navegador. La segunda opción es duplicar el elemento de diapositiva, ya sea por clic derecho y duplicado o el habitual Control C Control V. eliminación de diapositivas ocurre de manera similar. Seleccione una diapositiva ya sea en el lienzo o en el navegador y presione la tecla Eliminar. Dado que la diapositiva es solo un DVLock normal, podemos agregar otros elementos dentro como texto, imágenes, botones, etc. Acabamos de agregar esto a la primera diapositiva. El segundo tobogán azul va a estar vacío. podemos agregar contenido similar o diferente También podemos agregar contenido similar o diferente en la diapositiva azul. Entonces ese es el deslizador. En el siguiente video, vamos a convertir ese feo deslizador en bonito carusel hecho de tarjetas testimoniales 119. Webflow 2: deslizador de testimonio: Entonces ese es el componente slider, pero ese deslizador de flujo se ve muy diferente a nuestros diseños. Las flechas son diferentes, su colocación es diferente. No hay puntos de navegación, y estamos viendo múltiples tarjetas a la vez. W en este elemento deslizador, solo vemos una diapositiva a la vez. Pero no se preocupe, en realidad podemos diseñar el control deslizante de una manera para que se vea exactamente como nuestros diseños. Primero, agreguemos un espacio entre el deslizador y el titular. Como cualquier otra cosa, podemos darle estilo a todo el elemento slider, que de nuevo es un buen bloque dV antiguo con un montón de otros elementos en su interior. Selecciona el elemento deslizador, dale una clase, y el margen superior de 120 píxeles. Vamos a deshacernos de este fondo gris. También es parte del elemento slider. Ve a la configuración de fondo y cámbiala a transparente. Y cambiemos el color de la flecha para que podamos verlas. Los iconos aquí son base de texto. Entonces, si cambiamos el color del texto, se va a actualizar el color de los iconos. Y no necesitamos esos puntos de navegación, así que vamos a deshacernos de ellos. Pero borrar no funciona. Webello piensa que no necesitamos el control deslizante y borra todo con él Entonces hay otra manera de eliminar algo. Seleccione mostrar ninguno y se ha ido del continuo espacio-tiempo Flotando en algún lugar en una dimensión diferente. A continuación, necesitamos construir una tarjeta testimonial. Esto debería ser bastante sencillo. Vamos a dejar caer un nuevo bloque DV dentro de una de las diapositivas y construir todas las piezas necesarias. Dale una clase de tarjeta testimonial, un fondo blanco y las mismas dimensiones que en nuestros diseños Y redondear las esquinas. Ahora vamos a agregar una sombra de caja igual que en Figma. Para ver los ajustes de la sombra, asegúrate de seleccionar un objeto correcto que tenga una sombra aplicada a ella. Si estás usando un estilo de sombra como yo estoy aquí, puedes desvincularlo del estilo que puedas ver exactamente lo que está pasando dentro Estos son todos los valores. Necesitamos recrear la sombra dentro de Webflow Hay un valor extra dentro weblo el tamaño, pero puedes ignorar ese Como puedes ver, la tarjeta no es completamente visible, el deslizador la está recortando. Eso se debe a que el deslizador tiene cierta altura predeterminada. Sí, sí dice height auto, lo que significa que debería expandirse en función de su contenido, pero no hace otro caso de que los valores predeterminados no sean verdaderos, escriba a mano auto una vez más y presione Enter. Eso Bien, ahora para el contenido dentro de la tarjeta, tenemos estrellas y el párrafo. Tendremos que exportar los iconos estrella de Figma, exportar las cinco estrellas como una sola, agruparlas si no es un solo grupo para ti y exportar como SVG Tenemos que aplicar relleno a la tarjeta. Tenemos 40 píxeles en todos los lados, excepto la parte superior, que tiene 60 píxeles. Necesitamos distancia de las estrellas, que es de 30 píxeles. Un poco de margen negativo para alinear mejor las estrellas. Y necesitamos el bloque autor. Exporta estos avatares como dos X P y G. Agreguemos un nuevo bloque de buceo y organicemos los detalles del autor en su interior. Primero la imagen, luego los dos bloques de texto. Givech bloque de texto alguna clase y estilo, la misma manera que Figma Ahora necesitamos mover el texto del lado del avatar. ¿Cómo podemos hacer eso? Por supuesto, podríamos tomar el camino habitual de usar un flexbox, pero necesitaríamos una caja extra para eso, y se necesitan más clics Una opción más sencilla es usar flotación. Bajo posición, tenemos desplegable para flotar y claro. Abre eso. Hay tres opciones, ninguna, flotación izquierda y derecha. Los íconos muestran lo que hace. Seleccione flotador izquierdo. Esto colocará la imagen a la izquierda del texto. Y eso es todo. Necesitamos ajustar algo espaciado ahora al lado de la imagen. Después entre la imagen y el párrafo, que es de 70 píxeles. Y finalmente, necesitamos agregar un pequeño margen encima del nombre del autor para centrar el texto con el avatar. Ahora vamos a duplicar esta primera diapositiva y ver dónde estamos parados. Yo como pueden ver, solo estamos viendo una diapositiva a la vez, pero queremos que se muestren todas una al lado de la otra a medida que encajan y se deslizan entre partes visibles e invisibles. La razón por la que vemos una diapositiva a la vez es por la configuración de ancho del elemento deslizante. Está configurado en auto, lo que significa que va a estirar el 100% de su contenedor padre. Si le damos un ancho fijo, entonces se encogerá en consecuencia. Así que vamos a darle el mismo ancho que nuestra tarjeta testimonial. Si notas que la caja deslizante se ha encogido ahora, es tan ancha como la tarjeta. Y ahora vamos a duplicarlo. Elimine los demás y duplique el que tenga un ancho correcto. Y ahí tienes. Ahora se están alineando tal como queremos. Agreguemos margen a la derecha para crear la separación. Bien, vamos a revisar el modo de vista previa para ver dónde estamos parados. Tienen cuatro diapositivas y se deslizan exactamente la manera que queremos que lo hagan, excepto por una cosa. En nuestro diseño, la página muestra tantas tarjetas como sea posible y el resto se sale de la página. Pero aquí, no lo hacen. Solo se muestran dentro del componente deslizador. Entonces, ¿cómo podemos cambiar eso? Si seleccionas un elemento de máscara, otro bloque D donde están anidadas todas las diapositivas, notarás que dentro de la configuración de desbordamiento, está configurado como oculto Esto significa que todas las diapositivas que salen los límites de la máscara, están recortadas En realidad, todo lo que va más allá queda recortado. Incluso las sombras en las cartas, si miras más de cerca. Para mostrarlos, simplemente necesitamos cambiar esto a visible, y ahí tienes. Ahora todas las tarjetas son visibles. Pero hay un tema. No se recortan cuando termina la página, amplían los límites de la página. Pero ya sabemos cómo arreglar esto, ¿no? Solo necesitamos aplicar el mismo estilo de desbordamiento oculto a la sección, igual que hicimos con la imagen del dashboard. Incluso tenemos una clase para esto. No necesitamos cambiar nada, aplicar la misma clase que ya aplicamos en una de las secciones. Excelente. Vamos a poblar las cartas con nuestro contenido, y luego solo tendremos que encargarnos de las flechas, y eso es todo A Solo hay una cosa que tenemos que arreglar con las tarjetas. Ahora mismo, tenemos contenido que es todo igual altura. Pero, ¿y si tenemos testimonios con diferentes longitudes? La tarjeta no se expande porque tiene una altura fija. Entonces cambiemos la altura de nuevo a auto. Por lo que se expande en base al contenido. En un proyecto real, debes tratar de controlar la duración de los testimonios. Este está bien, pero cuando la diferencia entre long y short cut es realmente grande, entonces no se ve muy bien. Los testimonios se pueden truncar, lo que significa que puedes acortarlos. Pero si tu cliente no quiere que se corten, entonces tal vez se necesite un diseño diferente. Algo que se apila verticalmente. Una de esas opciones podría ser la rejilla de mampostería. Una cosa que no me gusta es cómo se mueven las diapositivas. Varios de ellos se deslizan con cada clic, pero prefiero deslizamiento se mueva una diapositiva a la vez. Esto es sencillo de arreglar. La cantidad de deslizamiento se controla por el ancho del elemento de máscara. Si cambiamos el ancho de la máscara para que coincida con el ancho de cada diapositiva, entonces obtendremos un movimiento que es una diapositiva a la vez. Bien, siempre luciendo bien. Lo último que tenemos que cuidar son las flechas. Para ello, necesitamos aprender un nuevo concepto, lo que vamos a hacer en el siguiente video. Quédate alrededor. 120. Webflow 2: posicionamiento: Bienvenido de nuevo. En este video, vamos a encargarnos de las flechas de nuestro deslizador. Para ponerlos en la esquina inferior derecha de nuestro slider, como tenemos en los diseños, necesitamos aprender un nuevo concepto. A este concepto se le llama posición. Position es un estilo CSS que nos da una tremenda cantidad de control sobre nuestros objetos. Este estilo se puede cambiar a partir de aquí. Tenemos cinco valores de posición diferentes, estático, relativo, absoluto, fijo y pegajoso. Pasemos por cada uno. He organizado cinco cartas aquí, y una por una, les aplicaremos diferentes ajustes de posición para ver qué les sucede. Estática o también llamada auto es una posición predeterminada de casi todos los objetos. elementos que son estáticos se comportan de la manera que ya estamos familiarizados con él, como un documento de Word que fluye de uno tras otro. Las cosas se ponen un poco más interesantes de pariente. El objeto relativo es la posición relativa a sí mismo. Sé que esto no te dice nada. Déjenme demostrarlo. Voy a aplicar relativo a esta caja, y no pasa nada. Muy sin incidentes Pero una cosa sí sucedió, los ajustes de posición ahora tienen algunos controles más. Obtenemos estos controles similares como los que tenemos con espaciado. Podemos ajustar esos valores y la caja se va a mover. Básicamente estamos dando el margen superior de la caja de 100 píxeles. Funciona de manera bastante similar con una excepción, y verás esta excepción cuando te muestre lo que sucede cuando editas margen en lugar de este posicionamiento relativo. Se ve que el margen ha alterado el flujo de la página. La altura del contenedor padre se incrementó porque ese margen necesita encajar en ese espacio. Pero cuando se utiliza el posicionamiento relativo, el flujo del documento no se toca en absoluto. Puedes mover el objeto a donde quieras, pero en el flujo del documento, sólo va a ocupar esa ranura original. Este es un poder de posición relativa. hemos sacado completamente de su propio lugar, pero las tarjetas que están anidadas dentro un flexbox no se han movido en absoluto Actúan como si la tarjeta siguiera ahí. Ahora, en cuanto a la posición absoluta, Absolutamente posición objeto se elimina del flujo del documento, y se asienta sobre una nueva capa, algo así como objetos dentro de Figma. En Figma, todos los elementos están absolutamente posicionados. Todos ellos existen en su propia capa. El posicionamiento absoluto suele ser lo que usamos cuando necesitamos superponer elementos o ponerlos uno encima del otro. Ahora, un importante envío para el posicionamiento absoluto está aquí Nos dice en qué se posiciona este objeto relativo a que tenemos el mismo campo para el elemento relativo, pero ese siempre se dice a sí mismo porque eso es lo que hace relativo. Siempre es posición relativa a sí misma y eso puede ser alterado. Pero el elemento absoluto, puede ser relativo a cualquiera de sus elementos padre. Al principio, verás que suele ser relativo al elemento body, lo que significa relativo a toda la página. Por ejemplo, si establecemos el valor de posición izquierda en cero, va a ser la posición cero píxeles del borde izquierdo del cuerpo. Ahora mismo, no está exactamente en el borde porque esto tiene margen en los lados. Si le damos 100 píxeles a la izquierda, va a mover 100 píxeles desde el borde. Y si le damos un margen superior de cero píxeles, entonces se va a mover hasta la parte superior de la página. Y ese contenedor rosa va a parecer que la caja no está realmente ahí. Pero si revisamos el navegador, veremos que la casilla absoluta sigue siendo parte del contenedor. Como dije, el elemento upsold puede ser relativo a cualquiera de sus padres si optamos por hacerlo Ahora, para elegir al padre, hay un pequeño truco que tenemos que hacer. Tenemos que cambiar la posición de ese padre a cualquier cosa menos estática. Por ejemplo, si queremos que la R se posicione con relación al contenedor rosa, entonces tenemos que cambiar la posición del contenedor a algo pero estático. Normalmente lo cambiamos a relativo porque esa es la forma más fácil que no altera el flujo del documento. En el instante en que cambias la posición de los elementos padre, la caja de posición obsoleta salta de nuevo al contenedor rosa y se posiciona alrededor de ese contenedor Si revisas la configuración ahora, verás que dice relativo al contenedor padre. Como tenemos cero píxeles desde la parte superior, se posiciona en la esquina superior izquierda. Y a medida que cambiemos este valor, se moverá relativo al contenedor padre. Ahora bien, si en cambio queremos que se posicione en relación con algún otro contenedor padre, por ejemplo, el contenedor abuelo, tendremos que cambiar la posición de estática a otra cosa en ese contenedor abuelo Pero hay una regla importante. Se va a posicionar en relación con el primer elemento padre que no tiene una posición estática. Entonces ahora mismo, no pasó nada cuando cambiamos la posición del contenedor abuelo porque el contenedor padre rosa todavía tiene una posición no estática, por lo que la caja seguirá siendo relativa a esa en Y si cambiamos la posición de los contenedores padre a estática, entonces esto sucederá. Ahora como se muestra aquí, esto es relativo al contenedor para abuelos Webflow tiene algunos ajustes preestablecidos de posición útiles aquí para un elemento absoluto Esta es una forma rápida muy práctica de cambiar las posiciones. Esquina superior izquierda, esquina superior derecha, cuatro superiores, cuatro inferiores, y así sucesivamente. Puedes ver que a medida que cambias los valores por debajo de la actualización con él, es más fácil alinear las cosas visualmente así en lugar de necesitar calcular cuántos píxeles debes poner en los cuatro lados. A continuación se encuentra la posición fija. Los elementos fijos se posicionan con relación a la ventana gráfica, es decir, a la parte visible de la página en cualquier punto dado Si elegimos uno de los presets, se fijará en consecuencia Como puedes ver, el elemento fijo es exactamente eso, fijo. Es como un objeto absoluto tirado fuera del flujo de documentos, sin afectar a otros elementos, sentado en una capa completamente nueva, y a diferencia del objeto absoluto, se fija en relación con la pantalla visible No importa donde lo desplace, permanecerá fijo. Esta posición se utiliza a menudo para las barras de navegación. Sabes cuántos sitios web tienen Navbar que siempre se fija en la parte superior de la página a medida que te desplazas Eso es usar posición fija. Por último, tenemos una posición pegajosa, lo cual es un poco complicado. Lo que hace sticky es que actúa como un elemento fijo, pero sólo dentro de su contenedor padre, más fácil de mostrar que de explicar. Entonces ahora mismo, no pasa nada. Simplemente actúa como un elemento estático regular porque se necesitan cumplir dos condiciones para que funcione. Primero, el padre necesita ser lo suficientemente alto para que haya espacio para que se desplace dentro. De lo contrario, no tiene sentido. Entonces hagamos el contenedor un poco más alto. Segunda condición, necesitamos poner algún valor personalizado generalmente en la posición superior. Por ejemplo, podemos poner cero. Y ahora verás que funciona. Lo que sucede es que se fija en la pantalla mientras nos desplazamos por el contenedor padre Una vez que el elemento pegajoso golpea la parte inferior del contenedor padre, no se desplaza más allá de él. Lo que hace el valor máximo es que dice desde qué punto pegarse. En este caso, se pega el momento elemento pegajoso es cero píxeles de la ventana gráfica Si ponemos algo así como 30 píxeles, entonces se va a pegar en el momento en que estén 30 píxeles del borde superior de la pantalla. Para las cosas que crecen horizontalmente y necesitan pegarse horizontalmente, entonces en lugar de la posición superior, usaríamos valor de posición izquierda o derecha. No voy a demostrar éste porque necesitaríamos eso muy, muy raramente. Estas son todas las posiciones, estáticas, que es la predeterminada para casi todos los elementos, y fluye naturalmente con un documento, relativo, que es algo así como estático, pero se puede mover de su lugar sin alterar el flujo del documento y mover cualquier elemento cercano, absoluto, que es el posicionamiento salvaje del grupo, se saca del flujo de documentos y es colocado en relación con el primer padre que no tiene una posición estática. Corregido, que es igual que el absoluto, pero es relativo a la ventana gráfica, quedando fijado a la pantalla visible, utilizado principalmente para barras de navegación y sticky, que es algo así como fijo, pero en stero se está arreglando solo dentro de los límites de su contenedor padre Muy bien, esa es la idea general del posicionamiento. En el siguiente video, tomaremos este conocimiento y lo aplicaremos a las flechas de nuestro deslizador testimonial. Quédate alrededor. 121. Webflow 2: flechas deslizantes: Todo bien. Bienvenido de nuevo. En este video, por fin nos encargaremos de esas flechas en el deslizador. En el video anterior, hemos aprendido una técnica importante que será útil para posicionar correctamente estas flechas. Para empezar, vamos a reemplazar los iconos de flecha por nuestros propios íconos. Podemos hacerlo simplemente eliminando el icono existente e insertando el elemento de imagen en su lugar. Simplemente arrastre un elemento de imagen dentro del bloque de flecha e inserte la imagen de flecha que vamos a exportar desde Pigma Y lo mismo va para la flecha derecha. A ahora vamos a necesitar la función de posición para colocar estas flechas en la parte inferior. Si echas un vistazo a los ajustes de posición, ya está configurado para obsoleto por defecto, a diferencia de la posición estática habitual, y eso explica por qué las flechas están sentadas en la parte superior del control deslizante Eso es lo que hace el posicionamiento obsoleto. Arranca el elemento del flujo de página. Viven en una dimensión diferente como capas y figma. Esto es exactamente lo que necesitamos Posición obsoleta con una colocación inferior derecha Una vez que presione en la posición inferior derecha, la flecha se colocará en la esquina inferior derecha del elemento deslizante. Ahora bien, ¿por qué el elemento slider? Porque es el primer padre que no tiene una posición estática. Recuerde que el elemento absoluto truco es relativo al primer padre no estático. Si no existe tal padre, entonces será relativo al cuerpo. En ese caso, saltaría en la parte inferior de la página. Entonces, si ves que no funciona de la manera que lo esperas, verifica al padre y asegúrate de que esté establecido en relativo. Comprobemos el diseño para ver las distancias. Las flechas están 60 píxeles por debajo del control deslizante. Ahora, aquí hay una parte interesante. Necesitamos agregar 60 píxeles en uno de estos valores de posición, pero ¿cuál? Vamos a probarlos todos y a ver qué pasa. Ninguno de los realmente funciona. ¿Por qué? La flecha se posiciona así en la parte inferior derecha. Esto significa que cero píxeles desde la derecha y cero píxeles desde la parte inferior. Los valores de posición nos dicen exactamente así. Si agregamos 60 píxeles en la parte inferior, entonces va a mover 60 píxeles hacia arriba desde el borde inferior. Para que se mueva fuera del deslizador, entonces tenemos que ir valores negativos. En realidad, funciona más así. Calcula la distancia entre parte inferior del deslizador y la parte inferior del bloque de flechas. Tan a menudo tenemos que compensar la altura del elemento. Por cierto, asegúrate de escribir PX junto a 60. Por defecto, como puedes ver, dice porcentaje. Entonces el campo se establece en valor porcentual. Y si solo escribes 60, pensará que significas 60%. Ahora vamos a aplicar la misma clase a la segunda flecha, así no tenemos que volver a hacer todos estos cambios. Vamos a mover la flecha izquierda hacia la izquierda. Podemos hacerlo poniendo algo valor en la posición correcta. Pero antes de hacer eso, vamos a darle a la flecha izquierda una clase combo. De lo contrario, los cambios se aplicarán a ambos. Nuevamente, estamos poniendo valor la derecha porque te estamos diciendo que alejes esta cantidad del borde derecho. Excelente. Comprobemos la vista previa y veamos cómo funciona. Sólo hay un problema. miras más de cerca los bloques de flechas, verás que se superponen una especie de superposición. Las cajas son un poco demasiado anchas, y en la vista previa, se puede hacer clic en toda la caja Así que el usuario también es capaz de interactuar con el espacio vacío. Un poco de interacción con el espacio vacío es buena, por lo que el usuario no tiene que ser tan preciso al apuntar la flecha, pero demasiado la hace extraña. Además, la superposición provocará algunos problemas ya que estos son enlaces. Para solucionar esto, necesitamos cambiar el ancho de los bloques de flecha. Vamos a darle alguna talla. Creo que 40 pixeles es bueno. He labrado la flecha derecha, que tiene la clase base De esa manera, ambas flechas se actualizaron al mismo tiempo debido a la clase base vinculada. Hay una cosa más que podemos hacer con las flechas. Podemos esconderlos en cada extremo. Podemos hacerlo desde la configuración del deslizador. Esta es en realidad una mejor experiencia de usuario. De esa manera el usuario sabe en qué dirección puede deslizarse y ver cuándo los testimonios han llegado al final. Y sólo nos queda una última sección. El pie de página. Lo haremos hasta el próximo. Quédate alrededor. 122. Webflow 2: pie de página (aplicación de equipo): En la parte posterior. En este video, vamos a construir la sección final de la página principal, que es el pie de página. No lo vamos a construir desde cero. Vamos a utilizar la increíble función de copiar y pegar de weblo. Básicamente, vamos a copiar todo el pie de página de nuestro proyecto anterior de la aplicación de chat y pegarlo en el proyecto actual. Esta es una característica útil. Te permite reutilizar componentes en tus proyectos, y también te permite copiar diferentes elementos o componentes de los proyectos Webflow de otras personas Por ejemplo, Webflow tiene una biblioteca de proyectos de escaparate donde otros diseñadores de weblo pueden mostrar los proyectos que han realizado A menudo, si el autor lo permite, puedes clonar el proyecto y copiar cualquier componente desde allí. Puedes copiar toda la página o copiar bits y piezas. Aquí encontrarás gente compartiendo cosas como kits de interfaz de usuario o kits de estructura metálica Ya sabes, ese kit de wireframe que usamos en Figma, sí, interfaces como esa se pueden encontrar aquí también Tendrás que hacer tus propios kits y luego copiar y pegar cualquier elemento y componente a tu gusto. Bien, así que veamos cómo funciona esta copia y pega. Una vez que tengas un proyecto dentro de tu cuenta, abre ambos proyectos en el diseñador, selecciona el elemento que deseas copiar. En nuestro caso, sección de pie con todo lo que hay dentro, golpeamos Control C o Comando C, y luego ve al proyecto actual y selecciona donde quieras pegarlo. En nuestro caso, tenemos que seleccionar cuerpo, que pegue ahí mismo y no dentro de alguna otra sección. Después golpea el Control B, y ahí tienes. Ahora todo el pie de página se ha duplicado en nuestro proyecto actual. Podemos editar todo sobre este pie de página sin afectar al proyecto original anterior. Los estilos se han llevado con él, y se han creado nuevas clases. Cuando copias clases que tienen el mismo nombre, entonces weblo va a renombrar esta clase conflictiva, tal como dice en este mensaje Por ejemplo, la sección de nombre de clase que ya tenemos en nuestro proyecto actual. Entonces Webflow le dio un nombre diferente a nuestra sección de duplicados Otra cosa, notarás que una vez que pegues el pie de página, no se ve igual el original porque algunos de los estilos están siendo heredados. Por ejemplo, no se llevaba el teléfono de texto. Está mostrando la fuente de nuestro sitio web para este proyecto, que es la cabina. El teléfono no fue llevado porque está heredando del cuerpo En realidad, esto es exactamente lo que queremos. No queremos el frente de ese proyecto. Queremos que la fuente sea lo que hay dentro de nuestro proyecto. Bien, ahora vamos a darle estilo a este pie de página y hacer que se vea como nuestros diseños. Comencemos con las clases duplicadas, sección y contenedor, y cambiemos a nuestras clases existentes. Cualquier clase extra que no necesitemos, en realidad podemos deshacernos y limpiar dentro de nuestro sitio web. Eso lo podemos hacer desde aquí. Haga clic en limpiar y Webflow nos mostrará todas las clases que no estamos usando actualmente en nuestra página y simplemente las eliminará todas Y si no estamos usando, eso significa que no los necesitamos. A continuación, vamos a crear una clase combo para la sección de pie de página y cambiar el color de fondo. Además, cambiemos el espaciado en la sección de pie de página porque es un poco diferente de la sección habitual. Yo Ahora, editemos los enlaces de Potter. El color es blanco con 60% de opacidad. Y también tenemos que cambiar el color Her a otro azul diferente. Y Excelente. Ahora el logo, que es bastante sencillo. Siguiente pie de página titulares. Este es un poco más interesante. No tiene una clase como los enlaces de pie de página. Eso es porque en el proyecto anterior, no teníamos una clase para estos titulares de pie de página. Nosotros diseñamos en la etiqueta H tres en su lugar. Entonces, cuando copiamos el pie de página, Webflow acaba de aplicar la etiqueta H three del proyecto actual Vamos a hacer lo mismo en estilo que la etiqueta H tres. Podemos, por supuesto, crear una nueva clase o cambiar la tacha a algo como h2h4 o lo que sea, pero estilizar H three parece Hay un espacio extra en parte superior del titular, como puedes ver. Vamos a deshacernos de ese espacio. Muy bien, hasta ahora tan bien. Tenemos que fijar el margen en la sección testimonial. Ya ves como la flecha está demasiado cerca del pie de página. Eso es porque la flecha es elemento absoluto. Ignoró el margen Atypil que está en la sección y va encima de él. No olvides crear una nueva clase combo, o también cambiarás todas las demás secciones. Ya tiene una clase combo, pero está bien. Podemos tener múltiples clases combo. Vamos a compensar ese acolchado extra. Y por último, solo actualice el contenido. Eso está todo hecho, y tenemos una cosa que nos dejó el formulario de correo electrónico. Eso lo vamos a hacer en el siguiente video. 123. Webflow 2: pie de página: En este video, tenemos una última cosa que hacer para terminar el pie de página es el formulario de correo electrónico. Este título aquí que está suscrito a nuestro boletín no es un enlace, es solo un titular, sino mismo estilo que otros pies o enlaces Tenemos que cambiar esto a un texto regular y eliminar ese efecto Hor. Así es como vamos a hacer eso. Agrega un bloque de texto normal y dale la misma clase de pie o enlace. Ahora, ya no es un vínculo, pero el efecto Hover sigue ahí Para deshacernos de eso, duplicaremos una clase y la nombraremos algo así como suscribir texto. Ahora podemos ir al efecto Hover y deshacernos de él. Excelente. Ahora vamos a crear el formulario de newsletter. Empecemos copiando el formulario de correo electrónico que ya tenemos arriba y vamos de ahí. Y naturalmente espaciado va a ser un problema aquí, especialmente cuando nos encojamos, así que vamos a tener que hacer algunos ajustes de diseño. El contenido aquí es flex box organizado en columnas. Para empezar, podemos deshacernos del ancho que hemos aplicado a las columnas de pie de página. Eso es hacerlos de igual ancho, independientemente del contenido en su interior, que en este caso realmente no va a funcionar. También hay una columna extra vacía que anteriormente solíamos tener un espacio igual entre el logotipo y los enlaces. Esta vez vamos a tener que perderla. Y eso es una mejora extra. Ahora, cambiemos el ancho de la primera columna con el logo en su interior. Se está estirando demasiado. Excelente. Eso podría ser suficiente. Ahora marquemos el formulario. Ahora bien, este formulario está usando clases de lo anterior, formulario de sección de héroe, así que necesitamos duplicar cada vez que estamos cambiando algo por dentro, así que no lo olvides. Empecemos por el color de fondo del campo. Parece que hay algún estilo predeterminado en el borde del campo, así que cambiemos el borde a píxeles transparentes o cero. Recuerde, el texto dentro del campo es el texto marcador de posición, que puede ser estilo desde el menú desplegable del estado Yo ahora el botón es un poco más divertido. Hemos decidido tener un botón que sea flecha y esté en la parte superior del campo, no fuera de él, así que tenemos que pagar por nuestra creatividad. Por suerte, ya hemos aprendido a usar la posición, por lo que podemos hacer tal arreglo. Tendremos que hacer algunas cosas para que esto funcione. Primero, convertiremos nuestro botón en una flecha. Esto es bastante sencillo. Vamos a poner la flecha como imagen de fondo del botón. En botones regulares, podríamos insertar directamente la flecha en su interior, pero cuando se trata de formar botones, funcionan un poco diferente. Esto es lo que tenemos que hacer. Deshazte del texto y del mensaje de ponderación que está dentro de la configuración del botón, pero pon algo así como una sola letra No se puede dejar completamente vacío porque Webflow insertará algún texto predeterminado de lo contrario Ahora, elimina la clase existente y crea una nueva clase, algo así como botón de flecha. Podemos hacer desaparecer fácilmente la letra girando el texto a color transparente. Eso es todo. Ahora no va a ser visible. Problema resuelto. A continuación, exporte la flecha desde FcMa y agréguela como imagen de fondo del botón Tenemos que cambiar algunos ajustes aquí. Retire el alicatado y coloque la imagen justo en el centro. A continuación, quita el fondo azul cambiándolo a transparente. Tenemos que hacer coincidir la altura del botón con la altura del campo. No coincide en este momento porque el campo tiene un margen extra en la parte inferior por defecto. Cambia eso a cero, y el botón debe coincidir exactamente con la altura. Si no lo hace, entonces revisa la configuración del formulario. Es una caja flexible y algo podría estar ahí arriba, o simplemente cambiar la altura del botón manualmente al igual que el campo que debería hacer el trabajo. A continuación, vamos a establecer el botón a la posición absoluta. Y alinéelo a la derecha. En el momento en que hagas esto, el botón podría desaparecer. Ahora, ¿por qué es eso? Porque la posición es relativa al cuerpo. Necesitamos que la posición sea relativa a su elemento padre directo, que es la forma. Recuerda el truco, si cambiamos la posición del padre a relativo o algo más, entonces el botón se posicionará relativo al padre. Y eso arreglará nuestro problema. Ahora, vamos a darle una prueba en la vista previa. Siempre funcionando bien excepto una cosa por un correo muy largo, el texto se va a mezclar con la flecha. Arreglar esto es muy fácil. Solo necesitamos agregar relleno extra al elemento field. De esa manera, el texto dejará de ir por debajo de la flecha. No, es perfecto. Y también necesitamos cambiar el mensaje de éxito para habilitar el estado de éxito, seleccionar Bloque de formulario y en la configuración, haga clic en la pestaña Éxito. Asegúrate de haber seleccionado el bloque de formulario y no el campo. Al seleccionar solo el campo se mostrarán diferentes opciones en la configuración. Ahora, la caja se ensancha en comparación con el campo de formulario y altera toda la estructura del pie de No es una buena idea. Para solucionar esto, podemos darle a todo nuestro bloque de formulario un ancho fijo, del mismo tamaño que tenemos en los diseños, que es de 267 píxeles. Esto mantendrá el campo, los mensajes de éxito y error todos del mismo tamaño. Ahora marquemos el resto. El tamaño del texto es demasiado grande en comparación con otro contenido de pie de página. Deberíamos coincidir con el tamaño de la fuente. Y tal vez el último acolchado. Y también necesitamos actualizar el contenido. En cuanto al mensaje de error, parece bien como este. Bien, comprueba la capacidad de respuesta y cómo se ve todo dentro del modo de vista previa Nuestra página de inicio está hecha, y en la siguiente sección, vamos a aprender a usar la herramienta de interacción WFlows, que podamos crear algunas animaciones para nuestra página y darle vida. Quédate alrededor. 124. Dar vida a tu sitio web: En el lado derecho, donde están todos los paneles, hay uno dedicado a las interacciones. Entonces, ¿qué son las interacciones? En pocas palabras, es cuando el usuario interactúa con algún objeto en nuestra página, y al hacerlo, algo más le sucede a este u otro objeto Mediante el uso de interacciones, podemos hacer que el ratón interactúe con un elemento. Esto se llama disparador y anima a otro objeto aunque no esté completamente relacionado Esto se llama una acción. Cada interacción comienza con el gatillo. Primero, tenemos que seleccionar un elemento con el que queremos interactuar y luego seleccionar el tipo de disparador. Por ejemplo, la interacción puede desencadenarse al hacer clic del mouse o pasar el mouse y otras opciones También hay activadores de página, lo que significa que no tenemos que interactuar con ningún elemento en particular, pero una animación puede ser activada por acciones relacionadas con la página. Por ejemplo, cuando se carga la página, cada tipo de disparador tiene su propio conjunto de opciones. Por ejemplo, el desplazamiento del mouse puede activarse al pasar el mouse o al pasar el mouse hacia afuera Una es cuando el ratón se mueve sobre el objeto y otra cuando se aleja de él. Y por último, tienes acciones o en otras palabras, animación. En el menú desplegable, verás que hay varios ajustes preestablecidos como fade, light, etc. Y la primera opción es la animación de disfraces, y aquí es donde ocurre la magia. Aquí, podemos especificar qué elemento se anima y podemos crear un conjunto completo de acciones que están cronometradas. Y obtenemos esta línea de tiempo de animación con un control granular sobre cada acción. Entonces esa es una visión general rápida y aproximada de las interacciones. No se alarme si no cogiste todo. Aprenderemos esto lentamente haciendo, y en el siguiente video, comenzaremos con algunas interacciones simples. Quédate alrededor. 125. Interacciones: interacción con tarjetas 1: En este video, vamos a animar estas tarjetas aquí mismo Se vería realmente genial si estas tarjetas en lugar de solo ser estáticas y simplemente arregladas en la foto, si las animamos. Estoy pensando en algo así como deslizarme desde abajo. Para animar estas tarjetas, necesitamos cambiar un poco nuestro diseño existente Las tarjetas son parte de la imagen de fondo en este momento, y como es actualmente la que se puede animar. Vamos a necesitar estas tarjetas como imágenes independientes, así que vayamos a Figma y las exportemos Estas tarjetas tienen una sombra sobre ellas. En realidad no están haciendo mucho, así que vamos a deshacernos de él. Si realmente queremos una sombra, siempre podemos editar dentro de Webflow Los vamos a exportar en PNG. He probado esto con SVG Export, pero salió a ser un archivo más grande que PNG. A veces eso puede suceder, así que podrías terminar con un SVG que es de gran tamaño, así que solo presta atención a él. Además, necesitamos exportar la foto de fondo de forma independiente. A Entonces veamos qué tipo de diseño tenemos y cómo podemos cambiar este layout. Entonces ahí está nuestro flexbox, que tiene dos bloques div dentro, image y content wrapper Dentro del envoltorio de imagen, tenemos nuestra imagen actual. Esto es lo que podríamos hacer. Podemos poner las tres imágenes dentro del envoltorio de imágenes o usar posicionamiento obsoluto para las tarjetas De esa manera se apilarán encima de la imagen de fondo. I Sustituyamos la foto actual. Todo bien. Ahora, vamos a darle una misma clase a esta imagen y luego aplicar el posicionamiento absoluto e ir de ahí. Recuerda el ajuste importante con elementos absolutos, necesitan un padre con una posición relativa. Como puedes ver aquí, ahora mismo, dice que es relativo al cuerpo. Tenemos que ser relativos al envoltorio de imagen. De esa manera, los posicionaremos exactamente donde queramos. Entonces cambiemos la posición de las envolturas de imagen a relativa. Por cierto, la segunda tarjeta no ha desaparecido. Está debajo de la primera. Están exactamente en la misma posición porque estamos usando la misma clase. Ahora podemos posicionar las cartas en la esquina superior derecha y luego moverlas desde ahí. Simplemente podemos buscar los valores dentro de Figma. Cuánto están separados de los bordes y usan exactamente esos valores. Al ingresar estos valores, no olvides agregar PX al final De lo contrario, va a usar el valor porcentual, y eso va a enviar tarjetas a otro lugar. Pero por alguna razón, nuestros valores de Figma simplemente no funcionan en Webflow. ¿Por qué es eso? La diferencia viene del hecho de que en Webflow, estoy trabajando en un tamaño de lienzo más pequeño, que tiene 992 píxeles de ancho, mientras que mi tamaño de fotograma en Figma es de 1,440 Para resolver este problema de capacidad de respuesta, necesitamos usar unidades receptivas como porcentaje, algo así como 10% en ambos lados Posicionemos la segunda tarjeta en su lugar dedicado para que podamos ver mejor con qué estamos trabajando. Para hacerlo primero, agregue una clase combo y luego cambie solo el valor de la posición superior. El valor de posición correcto es mejor para ser manejado por la clase base, ya que ambas cartas siempre estarán a la misma distancia de la derecha. Ahora bien, la posición para la segunda carta no es muy consistente entre las pantallas. ¿Por qué es eso? Porque las tarjetas no tienen un tamaño responsive. Tienen un tamaño fijo independientemente de la pantalla. En una pantalla más pequeña, la tarjeta superior cubre casi la mitad completa de la imagen de fondo, pero en la pantalla más grande, cubre solo una fracción de esa. Así que necesitamos que los tamaños de las tarjetas respondan también. Podemos hacer esto fácilmente dando a las tarjetas un ancho porcentual. Los tamaños porcentuales son relativos al elemento padre, que en este caso es la columna de imagen. El tamaño de la imagen principal es relativo a la columna de imagen dos. Entonces, cuando la columna de imagen se encoja, todas las imágenes dentro se encogerán con ella. Para que coincidan estrechamente con nuestros diseños, solo voy a cambiar temporalmente la imagen principal a la que teníamos antes con tarjetas, y la usaré como guía para dimensionar las cartas y sus posiciones con precisión. No tienes que hacer esto, pero es simplemente conveniente para mí ahora mismo. Comprobemos la capacidad de respuesta. Bonito. Ahora, todas las tarjetas suenen proporcionalmente con la imagen principal Y ahora hagamos lo mismo con el segundo gráfico. Un duplicado de la clase de cartas en lugar de crear otra clase combo, va a tener una posición diferente todos modos va a tener una posición diferente a la izquierda Esta vez, no necesitamos cambiar la posición relativa porque el envoltorio de imagen es la misma clase que la anterior, y está heredando el mismo posicionamiento relativo Excelente. Los diseños están listos. Ahora vamos a crear interacciones. 126. Interacciones: interacción con tarjetas 2: Bien, nuestras tarjetas están listas para ser animadas Empecemos con éste, en realidad. La tarjeta del calendario podría ser más fácil. Entonces, primer paso, vas a seleccionar primero la tarjeta de calendario y luego ir al panel de interacciones. Asegúrate de tener esto seleccionado. De lo contrario, no vamos a estar configurando las interacciones en la tarjeta, y es posible que estés configurando en otra cosa. Aquí, Webflow tiene dos versiones del panel de interacción. Hay uno con GSAP y uno es interacciones clásicas. En este caso, desea seleccionar interacciones SAP. Desde los disparadores, ahora tenemos clic en hover, scroll, y así sucesivamente En este caso, lo que vamos a hacer es que vamos a animar esta tarjeta que cuando el usuario se desplaza en la página, esta tarjeta anima y tipo de diapositivas en y Eso es un disparador de pergamino. Seleccionemos scroll, nombra esta diapositiva en. Y lo que podemos hacer por esta tarjeta es deslizarnos por la izquierda. Entonces llamemos a esta diapositiva a la izquierda. Entonces esto es lo que tenemos ahora. Tenemos gatillo y tenemos acciones. Muestra exactamente lo que está sucediendo. Tarjeta de calendario de desplazamiento para activar. Este es nuestro detonante. Y ahora tenemos acción. En este desplegable, vamos a tener un montón de diferentes presets que acaba de crear Webflow que acaba de crear Webflow que tiene algunos valores ya aplicados a él, algunas animaciones diferentes con Lotti Y una, que es la primera, una animación personalizada, que va a poner en blanco la animación desde cero, y esto es lo que vamos a seleccionar, que podamos aprender fácilmente a crear animaciones. Así que selecciona el primero. Y ahora vamos a llegar a esta vista de animación con una línea de tiempo aquí y algunas propiedades que podemos cambiar. Lo primero que queremos repasar son las propiedades. Entonces en nuestro caso, queremos que esto esté a la izquierda y entre de izquierda a derecha. Esto se define por estas dos columnas diferentes y dos. Toda animación siempre tiene un lugar desde donde comienza. ¿Cuál es su estado original? Y entonces, ¿ dónde termina? ¿Crece? Comienza invisible, luego aparece a partir de dos. Esto es lo que esto representa. Ahora, en nuestro caso, queremos que esto termine aquí exactamente como lo diseñamos. Así que en realidad no queremos cambiar nada en los dos. Queremos cambiar algo en el de. Así que selecciona y haz clic en esto nuevamente y esto desactivará dos. Cuando no cambias nada en los dos, Webflow asume que lo que estás terminando es tu estado inicial en el que lo diseñaste Entonces, ¿qué queremos cambiar aquí? Tenemos algunas opciones que ya están aquí. Podemos agregar más propiedades que podemos cambiar y animar. En este caso, lo que queremos cambiar es opacidad porque queremos que esto aparezca Queremos que esto sea invisible y luego aparezca. Otra propiedad que queremos cambiar es su posición sobre el eje X. Queremos que se mueva de izquierda a derecha, y ese es el eje X. No necesitamos Y, y no necesitamos escala. Por lo que los valores positivos nos da movernos desde la derecha. Necesitamos básicamente valores negativos. Negativo digamos 50 píxeles. No lo quieres demasiado lejos, comenzará desde los 50 píxeles negativos y luego volverá a su posición original de cero píxeles. Y por la opacidad, queremos que empiece 0% invisible y que vaya al 100%, que obviamente es lo que va a hacer por su cuenta No tenemos que precisar esto. Ahora bien, esta es una interacción de desplazamiento que no vamos a realizar porque se trata de desplazarse sobre el movimiento, y no es como aparecer de una sola vez Y como puedes ver, esta posición de la línea de tiempo también se está moviendo. La interacción Be scroll tiene dos tipos de interacciones. Una es que desencadena. Una vez que te desplazas hacia algo, se activa y juega otro que frota. Y lo que tenemos que hacer es volver a nuestro gatillo. Este es nuestro detonante. Estábamos aquí ahora mismo. Esto fue acciones. Aquí es donde estuvimos animación personalizada. Y vamos a volver al disparador de desplazamiento, hacer clic en él, y vamos a obtener algunas opciones aquí para cambiar la configuración del disparador. Cada disparador tendrá diferentes conjuntos de opciones que podremos cambiar, por ejemplo, click tendrá sus propias opciones, Mouse over, hover tendrá sus propias opciones, y así sucesivamente Scroll tiene diferentes opciones aquí. Dos tipos de controles que tiene el scroll. Uno es scrub on scroll, y esto es lo que se selecciona por defecto. Esto es matorral en pergamino. Scrub significa fregar la línea de tiempo. Este es un lenguaje jerga que es de la animación. Entonces la línea de tiempo es fregar. Esta cosa que es como pasar por la línea de tiempo, eso se llama fregar Por eso se llama scrub on Scroll. Entonces esto es lo que está pasando. Entonces es anima es desplazamiento. Eso no es lo que queremos. Lo que queremos es el segundo, que es acciones desencadenantes. Y lo que esto hace es que una vez que se cumple el gatillo, reproduce la animación de una sola vez. Y una vez que cambies esto al gatillo, vas a obtener este botón de reproducción aquí. Y como pueden ver, esta es exactamente la animación que queremos. Ahora, otra opción, volvamos a la configuración del disparador. Otra opción que necesitamos cambiar es ¿dónde empieza realmente? Este es el comienzo. ¿Dónde se activa el desplazamiento? ¿Se activa cuando esta tarjeta aparece aquí? ¿Se activa cuando aparece en el medio? ¿Se activa cuando aparece por aquí? Y aquí es donde podemos definir dónde sucede exactamente el detonante. Aquí tenemos dos opciones, que son elemento y viewport Y cuando estos dos se alinean, ahí es cuando ocurre el gatillo. Entonces en este caso, lo que tenemos es parte superior del elemento aquí mismo, se encuentra con la parte inferior de la ventana gráfica ventana gráfica es la misma que la pantalla, pantalla visible de la página, la parte inferior de la ventana gráfica Una vez que estos dos se encuentran, ahí es cuando activas la animación de desplazamiento. Como puedes ver, hemos cerrado usando estos marcadores. Normalmente tengo deshabilitado, pero para este video, en realidad es bastante agradable. Puedo mostrar exactamente dónde sucede este disparador. Y este disparador va a pasar aquí mismo en el mismo, muy, muy comienzo de cuando en realidad podemos ir y dejarme mostrártelo en la página real. Estamos desplazándonos hacia adentro, a la derecha, y prestamos atención ahora mismo, es invisible Y en el momento en que emiten, aparece. No es así como lo queremos, ¿verdad? Queremos que aparezca en alguna parte cuando estemos a mitad de camino por la pantalla Entonces lo que vamos a cambiar aquí es, por ejemplo, si cambias de arriba a abajo, como puedes ver, el disparador ahora cambia al fondo, cámbialo al centro. Voy a cambiar al centro, pero mantengamos esta cima. Y ahora cambiaremos la ventana gráfica. Si lo cambiamos a la cima, se activará aquí. Entonces cuando esto se reúna aquí, eso es demasiado lejos, un buen lugar sería el centro. Entonces aquí mismo, cuando tarjeta está en algún lugar justo aquí en la página, aquí es cuando se va a activar. Estos campos también pueden tomar valores como 20% 80% de la pantalla, y estas palabras simples como top center, bottom. Bien, esta es una ubicación perfecta. Vamos a darle una prueba. Cuando estés probando, tus animaciones de desplazamiento, desplázate fuera del lugar y luego entra en la vista previa, y luego comienza de nuevo. Se puede prestar atención. Aquí está el comienzo, aquí está el inicio del scroller Una vez que estos dos se van a encontrar, ahí es cuando ocurre el gatillo. Eso es bastante bueno. Ahora, si quieres volver a jugar esto, necesitas restablecer el modo de vista previa una vez más, volver y volveremos a jugar. Bien, eso es bastante bueno. En realidad, voy a desactivar estos marcadores. Es una distracción Ahora, otra cosa, no es muy suave la animación. Y para cambiar cualquier cosa de la animación, volvemos a las acciones, y esta es nuestra animación, animación personalizada, vamos aquí. Ahora bien, ¿cómo cambiamos y hacemos que esta animación sea un poco más suave? Y eso sucede a través de la flexibilización y la duración. Ahora mismo, la flexibilización está puesta a lineal, y tenemos pocas opciones diferentes aquí, pero lo que voy a hacer es que vamos a dar click en esta, y voy a mostrarte aquí mejor cómo funciona esta animación de flexibilización Cada animación tiene tiempo y progreso. Este es el momento. Esto es progreso. Tiempo por qué progresar. Lineal significa que a medida que pasa el tiempo, transcurre la misma cantidad de progreso en la animación Entonces Bam Bam bum, bum, bum, bum, bum bum al mismo ritmo. Por eso lineal no hace una animación muy agradable e interesante. Puedes previsualizar esto desde aquí la caja se mueve a una velocidad constante. Eso no es lo que queremos. otra opción que es flexibilizar La flexibilización significa que comienza lento. Cambiemos esto a extremo para que lo veas mejor. Comienza muy lento. Entonces, este es el momento, ¿verdad? Al principio se avanza muy poco. Es no, no, no hay progreso, y luego a mitad de camino, se voltea y luego acelera, y todo el progreso se hace después Puede previsualizar esto. Ver, despacio y luego acelera. Eso es flexibilizar. Entonces tenemos facilidad de salida. Cambiemos al extremo para que sea un poco más prominente. Lo que pasa con facilidad es que empieza súper rápido. Así que muchos avances pasan muy, muy rápido, y luego se ralentiza y tiene un aterrizaje muy suave. A ver. Así que empieza muy rápido y luego tiene un aterrizaje suave muy agradable. Para las animaciones que aparecen y se quedan y simplemente aterrizan en un solo lugar, por lo general la facilidad es lo que queremos. Así que vamos a mantener esto a gusto y extremo o cualquier otra opción que hagamos también. cual también se puede seleccionar de este desplegable está fuera, potente Placa. Ahora, es un poco demasiado rápido. Así que la duración predeterminada que tiene Webflow, lo hace un poco demasiado rápido. Esto es en segundos, se puede cambiar a milisegundos, 1 segundo, dos segundos, o medio segundo o cualquiera de los puntos decimales que pueda hacer Probemos 1 segundo. Ahí vas. Ahora eso es suave. Excelente. Vamos a darle una oportunidad. Perfecto. Eso es lo que queremos. Todo bien. Ahora, lo mismo para las tarjetas del evento. Vamos a salir de esto de aquí. Nuevamente, vamos a seleccionar una de las tarjetas de eventos, y volveremos a hacer clic, desencadenador de desplazamiento. Y esta vez, hagamos esto deslizarse desde abajo. Desencadenar carro de eventos de desplazamiento. Esto es lo que queremos. Cambiemos la configuración de los ajustes de desplazamiento. Ahora, aquí hay una parte importante y una cosa quiero que te asegures de que tienes lo mismo que yo, que es un objetivo de cada objetivo cada objetivo de la interacción dentro Webflow tendrá diferentes formas de dirigirlo Puedes apuntar a la clase, puedes apuntar al elemento directamente. Puedes apuntar a una página y algunas otras opciones. Entonces en este caso, automáticamente porque nuestra tarjeta tiene una clase aplicada a ella, está apuntando automáticamente por defecto, va a seleccionar una clase. Y aquí, somos capaces de seleccionar qué clase queremos. Y si deshabilitas esto, puedes ver, podrás seleccionar cualquiera de las clases que ya hayas creado dentro de tu sitio. Y ahora, una vez que cambio esto a flecha, por ejemplo, este ser seleccionado no importa. Ahora estamos animando flecha. Ya no estamos animando la tarjeta. Ahora bien, a lo que hay que prestar atención aquí, vez que tengas una tarjeta de evento, que necesitas asegurarte de que esta clase y esta clase son ellos comparten la clase base porque si pones el disparador en este tipo, veamos, desplázate. Verás que Webflow agregó tanto la clase base como la clase combo, lo que significa que solo esta carta se animará Queremos que esta animación e interacción se aplique en ambos. Entonces aquí es donde tienes que asegurarte. Clases, si tus cartas tienen diferentes clases aplicadas a ellas o si tienen una clase combo, entonces asegúrate de que estás seleccionando la clase base. Y si accidentalmente seleccionaste una de las cartas que tiene una clase combo aplicada, simplemente quítalo de. Y pulsa entrar o simplemente salir de él. Y eso es ahora el disparador correcto seleccionado. Pero déjeme volver porque meto las cosas aquí arriba. Todo bien. Entonces tenemos correcto trigger, scroll, event car. Esto es lo que quieres. Si tienes algunas otras clases base para ello, tienes que quitar eso. Desde la configuración, nuevamente, queremos que la parte superior del elemento se encuentre con el centro de la ventana gráfica, y ahí es cuando se activa, y no queremos fregar en scroll Queremos acciones desencadenantes. Cerrar, y ahora vamos a agregar una acción. Animar. De hecho voy a desactivar estos marcadores. Sé que solo se meten en el. Y en este caso, ¿qué queremos animar, verdad? Queremos nuevamente animar la opacidad. No queremos desactivar, así que selecciono de desactivar dos. Dos ya está definido. Esta es la posición final. Queremos animar la opacidad, y ya no queremos animar el eje X. Queremos animar YxS. No necesitamos escala. Entonces queremos que se mueva verticalmente. Eso es lo que hace YxS. Entonces desde abajo, y veamos que son valores positivos o valores negativos. Entonces son valores positivos. Entonces 50 píxeles desde abajo, 0% de opacidad, lo que significa que es invisible, y luego aparece Esto es exactamente lo que queremos. Ahora, duración, 1 segundo, trata de igualar tus duraciones y flexibilización Es más agradable cuando el mismo tipo de animaciones animan al mismo ritmo Y tuvimos facilidad de salida de energía para seleccionados. Vamos a darle una prueba. Bonito. Eso es trabajar todo bien. A veces solo una cosa a tener en cuenta, a veces lo que sucederá es que tu animación comenzará en algún lugar en medio de la misma. Si estás jugando con animador con un panel de interacción, podría comenzar desde como 0.5 segundos o algo así, y comenzará en el medio o en algún lugar más tarde Eso no quieres. Entonces por si acaso tienes algún valor aquí, solo restablecerlo o ponlo a cero. Y justo, vamos al interior del modo de vista previa y le demos una prueba. Perfecto. Una vez más. Excelente. Excelente. Y esas son nuestras animaciones. Estas interacciones fueron muy sencillas de configurar, pero aportaron mucha vida a la página. Ahora la página se siente un poco más viva, un poco más amigable e interactiva. 127. Interacciones: interacción con flechas: En este video, vamos a animar este icono de flecha en el hover Así que cada vez que colocamos el cursor sobre el bloque de enlaces, el icono de flecha se mueve ligeramente hacia la derecha Animación muy sencilla. Lo primero es lo primero, necesitamos clases correctas. Así que cambiemos el nombre de esto a algo un poco más memorable como el icono de flecha. Ese es nuestro icono de flecha, y el padre es nuestro bloque de tinta. Podemos dejar eso como bloque de enlace. Eso funciona para nosotros. Entonces, ¿cuál es nuestro elemento desencadenante? Nuestro elemento desencadenante es todo el bloque de enlace. Así que cada vez que me ciernen aquí o aquí, la flecha necesita animarse Entonces todo es el detonante. Entonces, mientras tengas seleccionado Bloque de enlace, ve al panel de interacciones, y seleccionaremos trigger on what hover Vamos a nombrar este enlace hover. Y por defecto, seleccionará el disparador correcto, que es Link block, la clase. Es seleccionar uno correcto porque teníamos el bloque de tinta seleccionado antes de agregar un nuevo disparador Pero si no haces esto, entonces obviamente puedes simplemente cambiar el objetivo a partir de aquí. Si tienes un elemento o algo más seleccionado, cámbialo a la clase, y desde aquí, solo puedes encontrar tu clase Link block y aplicarlo a él. Ahora, cuando hagas esto, asegúrate tener un bloque de enlace de clase como clase base, y que sea la misma clase aplicada a todos los demás bloques de enlace porque queremos reutilizar esta interacción en todas partes. Entonces, si tienes una clase base o alguna otra clase duplicada aquí o algo más, solo verifica eso, asegúrate de que otros elementos, otros bloques de enlace tengan lo mismo. Y si accidentalmente seleccionaste una con esas clases combo, simplemente elimina esa clase combo extra. Todo bien. Entonces, ¿cuál es el tipo aquí? El tipo es mouse, Enter. Todo bien. Esto es lo que queremos en este caso. Y ahora necesitamos establecer una acción. Me gusta el primero, la animación personalizada. Aquí estamos definiendo cuál es nuestro objetivo de nuestra animación. Teníamos un blanco de un disparador, con lo que se interactúa Ahora, lo que se ve afectado y lo que se anima. Ahora mismo, dice que el objetivo es el elemento desencadenante. En este caso, Link block. Eso no es lo que queremos animar. Queremos animar el icono de flecha. Así que selecciona sobre esto y ve al desplegable para que podamos cambiar el objetivo de nuestra animación Tenemos varias opciones diferentes y dos opciones principales que generalmente vamos a usar para apuntar a elementos específicos. Una es apuntar al elemento. Elemento significa que estás apuntando a un elemento específico muy, muy único. En este caso, solo esta flecha y no las otras flechas de abajo. Dado que queremos reutilizar esta interacción, un mejor enfoque está dirigido usando una clase porque también tienen clase de icono de flecha compartida. Y de esta manera, podemos tener una interacción controlando todos los bloques de enlace. Entonces seleccionaremos clase. Ahora, en este caso, no queremos esto. No queremos el bloque de enlace. No estamos apuntando a eso, así que quítalo y aplica el icono de flecha o cualquier clase que hayas llamado tu icono. Eso es bueno. Así que solo marca doble objetivo, icono de flecha. Siempre que precede con un.in front, eso significa que es una clase CSS Así es como escribes clases CSS dentro del código. Punto algo. Bien. Ahora bien, ¿qué animamos? Queremos que se mueva en el hover, ¿no? Entonces en este caso, no queremos que se defina de porque de es como está. Queremos definir dos. Esto es lo que sucede en la animación. Entonces, si tienes de seleccionado, simplemente haz clic en él para Deseleccionarlo para que algo paste y no lo estamos tocando Y si tienes dos deseleccionados, puedes aplicarlo así Ahora podemos editar algunas de las propiedades. Para que podamos animar la flecha. Opacidad, no necesitamos eso, mover Y, no necesitamos eso, escala, no necesitamos eso Lo que necesitamos es movernos sobre el eje X. Entonces digamos algo así como ocho píxeles. Mueve ocho píxeles, y valores positivos significa que se mueven hacia la derecha. Los valores negativos significarían que se mueven hacia la izquierda. Necesitamos positivo en este caso. Veamos, como puedes ver, sí se mueve y anima. Ahora vamos a probar esto dentro de la vista previa. Bastante bien. Se anima un poco demasiado lento, cuando podemos cambiar que tienen duración. Probemos 0.2. Eso es bastante bueno. Pero obviamente, como pueden ver, se atasca, ¿verdad? Se queda en un solo lugar. Queremos que esto se mueva justo en el hover y en el hover out cuando el ratón se vaya para que regrese a su lugar original Así que volvamos. Ahora vamos a configurar un nuevo disparador. Este disparador estaba sobre básicamente el mouse encendido, y podemos establecer un nuevo disparador, otro hover, nuevamente en el bloque de enlaces Si en tu caso, tuviste algo seleccionado accidentalmente en el lienzo y cambia tu clase, solo tienes que seleccionar tu clase correcta. Y en este caso, cambiaremos el tipo de mouse enter a mouse leave. Activa cada hoja del ratón. Esto es exactamente lo que queremos. Y desde el control, en realidad podemos cambiar esto y decirle que se invierta, lo que coloca la animación hacia atrás desde su posición actual. Y reversa significa reversa de estas acciones. Sea lo que sea que armemos, obviamente tenemos una sola acción aquí. Por lo que esta acción simplemente se revertirá hacia atrás. Vamos a darle una prueba. Bonito. Todo funcionando bien. Ahora veamos otros. Y como puedes ver, instantáneamente, los otros están funcionando también, y están trabajando y no tuvimos que aplicar la interacción a los otros porque estamos usando clases. Solo para pasar por alguna solución de problemas en su lugar en caso de que tenga algunos errores y no esté funcionando para usted en caso de que los otros enlaces no estén funcionando para usted, verifique esto antes que nada, habilite su panel de stylus, y verifique que tenga icono de flecha aquí, flecha puedo aquí aplicado, ¿verdad? Esto es SAM Esto es lo mismo. Y esto es lo mismo aquí. Este pequeño icono de perno sí te muestra que esta cosa es parte de algún tipo de interacción, ya sea un disparador o bien se ve afectado por una interacción. Además, nuestro panel sí nos lo demuestra. Entonces, si te desplazas un poco, muestra todos los elementos que están siendo activados o forman parte de algún tipo de interacción. Además, tenemos un panel aquí que te mostrará todas las interacciones que tenemos en esta página. Así que asegúrate de que este sea un icono de flecha. Todos ellos comparten la misma clase, y todos los enlaces Link Block comparten la misma clase. Es Link block para mí, también. Link block aquí también. Por eso está funcionando. Y luego dentro de las interacciones, hay que asegurarse de que hover muestra que se están seleccionando las clases, Link blog, class, Link blog, hover leave, class, Link block Y dentro de la animación, nuevamente, objetivo, clase flecha Icono. Esto es lo que queremos. Ahora, hay un pequeño problema que necesitamos arreglar porque en pantallas más pequeñas, no podrás verlo. Si prestas atención, cuando vuelo el cursor sobre éste, el otro también anima. Eso es porque estamos apuntando a una clase. Entonces estamos diciendo que cada vez que estoy rondando aquí en el aprender más, animar la clase llamada oicon y esta es una clase llamada Este es un ícono de héroe de nombre de clase, y este también. Entonces los tres están animando. Pero eso no es lo que queremos. Lo que queremos es sólo animar el que está dentro del elemento trigger Y tenemos esta opción. Entonces está dentro de las acciones. Nos dentro del gatillo porque esto es un problema con el arocon Entonces es lo que sea que se esté animando. Entonces dentro de las acciones. Icono de flecha. Aquí tenemos una opción para filtrar. Y tenemos pocas opciones aquí dentro de vitrocerámica directa, cualquiera de estas funcionaría dentro. Y desde este desplegable, queremos dentro del elemento trigger Podría tener por defecto clase seleccionada o algo más, pero necesitamos dentro del elemento trigger. Entonces ahora, esto nos está diciendo ese icono de flecha animado que está dentro del elemento disparador, no todos los iconos de flecha Ahora, volvamos a jugar esto, ampliar la pantalla para que podamos ver un par de ellos juntos. Y como pueden ver ahora cuando me ciernen sobre éste, el otro no anima Y todo hecho. Bien, entonces esos son los fundamentos de las interacciones. Hay infinitas posibilidades de lo que se puede hacer con las interacciones en Webflow Puedes ir y te aconsejo hacerlo para ir al escaparate y verás a algunas personas hacer animaciones e interacciones muy locas, y te daremos buenas ideas sobre lo que se puede hacer dentro de Webflow y te daremos algún tipo de inspiración para futuros proyectos Las interacciones al principio pueden parecer un poco desalentadoras, pero en realidad, una vez que superes ese pequeño obstáculo, verás lo simples que pueden ser y qué tan divertidas y cuántas opciones diferentes tienes para crear algo muy interactivo, algo muy hermoso y Y podrás crear interacciones complejas con solo unas pocas camarillas, algo que probablemente te llevaría meses de práctica de Javascript para lograrlo sin Web más videos sobre interacciones en la parte avanzada de este curso, algo para que sobre interacciones en la parte avanzada de este curso, profundices tus conocimientos y algo así ganes un poco más de Si bien lo que ya aprendimos es suficiente para que empieces a trabajar en proyectos reales. En la siguiente sección, vamos a encargarnos de la versión móvil de la página principal de nuestro sitio web en este caso. Y luego en la sección posterior a eso, vamos a aprender todo sobre CMS y cómo agregar blog a nuestro sitio web. 128. Adaptable: Navbar (aplicación de equipo): Todo bien. En este video, vamos a empezar a optimizar la versión móvil de nuestra página de inicio, empezando por la barra de navegación. En el proyecto anterior, hicimos la barra de siesta completamente visible en la tableta. Veamos si podemos hacer lo mismo aquí. Para mostrar los nablns en la tableta, seleccione Barra Nab y vaya al panel de Aquí encontrarás opciones para el icono de menú. Cuando el punto deslizante está en la tableta, significa que el menú de hamburguesas se mostrará en la tableta y en todos los dispositivos más pequeños Si lo movemos hacia abajo, entonces se desactivará la tableta. Eso es excelente. No hace falta cambiar nada. Todo encaja muy bien. Me encanta cuando las cosas simplemente funcionan así fácilmente. Veamos qué hay que hacer para el bar Na en el paisaje móvil. Es solo colores y algo de espaciado. En el proyecto anterior, el desplegable se extendía de borde a borde, pero aquí no lo es. Eso es porque tenemos un arreglo un poco diferente para la barra N. Está sentado dentro de esa sección de héroe, que tiene acolchado, y el menú desplegable solo se extiende hasta la propia barra Nap. Potencialmente podríamos hacer un estiramiento si quisiéramos tal vez usando márgenes negativos. Pero personalmente, estoy bastante bien con que no se estire de borde a borde. Entonces dejémoslo como está. Para cambiar el color del botón de menú, solo necesitamos cambiar el color del texto del bloque. Se trata de iconos de pasta de fuente, por lo que el color de la fuente lo cambiará. Lo mismo va para el tamaño. Solo necesitamos aumentar el tamaño de la fuente y va a crecer. Creo que antes usamos 30 pixeles. Y ajustemos el relleno para todo el botón en el que se puede hacer clic Es un poco demasiado grande, idealmente lo haría del mismo tamaño que los botones y enlaces en la barra, que son 44 píxeles de altura, creo, así que si el texto es como 30 píxeles, entonces el relleno de siete píxeles debería convertirlo en 44. Ahora, vamos a darle estilo al estado abierto del menú para mostrar el menú mientras estamos estilizando, seleccione cualquier elemento en la barra NAB, y luego en la configuración apuñalada haga clic en Abrir Ahora se puede hacer clic en los elementos del menú y podemos seleccionarlos y estilizarlos. El color de fondo viene de este bloque de menú NAV. Así que vamos a seleccionarlo y cambiar el fondo a yo diría que nuestro color azul oscuro que usamos en el pie de página. Y lo mismo para el fondo en el botón de menú. Cuando realice cambios en el estado abierto del botón de menú, asegúrese de que el campo selector muestre esta clase abierta verde. Así es como le damos estilo al estado abierto. A veces el menú puede estar abierto, pero esta clase de estado abierto no está ahí, por lo que ningún cambio se reflejará como tú lo deseas. Sólo tienes que refrescar el lienzo y volver a abrir el menú. Vamos a darle un poco de acolchado adecuado. ¿Puedes notar por qué el botón se estira hasta los bordes? Es porque la pantalla está establecida para bloquear, y los elementos del bloque ocupan todo el ancho disponible. Necesitamos cambiarlo para mostrar el bloque en línea, igual que los botones predeterminados. Ahora eso es lo correcto. Pero necesitamos alinearlo a la izquierda. Hemos tenido este reto similar en el proyecto anterior. Los bloques en línea actúan como texto. Entonces, si el contenedor padre tiene alineación izquierda central o derecha, va a abod esa alineación En este caso, padre no es menú, sino que dice que está alineado a la izquierda en la realidad, no lo es. Esto sucede a veces. Así que solo tienes que ir y venir y solo aplicar la alineación izquierda manualmente para que se refleje el cambio. Y también, agreguemos algunos márgenes izquierdo y superior para alinear el botón correctamente. Bien, eso es mejor. Por último, voy a hacer esquinas de los fondos redondeadas. Dará un aspecto un poco más agradable. No lo necesitamos en los cuatro lados. Para el botón de menú, lo necesitamos en las esquinas superiores. Haga clic en esta opción para agregarle esquinas individuales. Para el menú de NaF, queremos que todos los rincones además de la esquina superior derecha De esa manera el botón y el menú se conectarán muy bien, como un solo objeto. Eso es perfecto. Ahora, vamos a ver cómo se ve en el modo de vista previa. Una última cosa, ya ves que el logo aquí tiene un poco de relleno. Este relleno no está ahí en las versiones de tablet y escritorio. Webflow lo está insertando en versiones móviles. No necesitamos ese relleno porque tenemos el nuestro propio, así que solo deshazte de él. Todo bien. Pasando a la versión retrato. En realidad no hay nada que deba ajustarse para la barra. Los acolchados necesitan ser arreglados, pero eso es parte de la sección de héroes Entonces vamos a hacer eso en el siguiente video. 129. Adaptable: sección del héroe: Y estamos de vuelta en este video, vamos a adaptar la sección de héroes a los diferentes dispositivos. No hay mucho que hacer , así que debería ser rápido. Vamos a reducir la altura de la sección de héroe en la tableta. Es demasiado alto en este caso. Algo así como 680 píxeles debería ser bueno. Y necesitamos ajustar el margen del contenido para que vuelva a estar centrado. Ciento 30 píxeles se ven bien. Pasando al paisaje móvil. Al principio, parece que aquí no hay nada que necesite arreglar, pero podemos olvidar que aquí no estamos viendo el verdadero panorama móvil. Esto es demasiado alto. Para visualizar esto correctamente, mejor es verificarlo en un móvil real, pero podemos reducir la altura del navegador para darnos una idea aproximada de con qué estamos trabajando. Esto es algo como se verá . Aquí no hay nada visible. El espaciado vertical es crucial en el paisaje móvil, por lo que necesitamos hacer que nuestro contenido sea más ajustado y ajustado Primero, vamos a reducir el acolchado de la sección. Y quita la altura fija de la sección de héroe. Queremos que sea automático en este caso, así que sea tan alto como el contenido. Bien. Del mismo modo, vamos a reducir el acolchado horizontal. En dispositivos más pequeños, el espacio es escaso. Yo diría que relleno de 30 píxeles en los lados en lugar de 60. A continuación, debemos reducir un poco el tamaño del teléfono o por defecto H un tamaño es 55. Eso puede ser un poco demasiado grande para los móviles. Yo iría con 35 o 40. Recuerda que el estilo de encabezado viene de la etiqueta H one. Para agregar H una etiqueta en todo el paisaje móvil, primero, elimine cualquier clase que se aplique, y luego en el menú desplegable, seleccione todos los encabezados H one Deberías obtener ese mismo icono de paisaje a la izquierda. Eso es importante. De esta manera, sabemos que estamos afectando a todos los H uno para el paisaje móvil y hacia abajo y no tablet o escritorio. Una vez abajo, podemos volver a poner esa clase blanca. Una última cosa para la vista del paisaje. El contenido y la imagen de fondo están interactuando ahora mucho más. En las versiones anteriores, contenido está en un área de plano borrosa, pero aquí está cubriendo la cara de la modelo Esto hace que el texto sea difícil de leer. Primero, pasemos esa palabra a la siguiente línea. Pero eso no es suficiente. Entonces vamos a agregar una superposición oscura en la imagen de fondo. El 30% parece suficiente. Y eso se hace para una vista del paisaje. Entonces el retrato necesita un par de cosas más. Primero, cambiemos la dirección de la forma a vertical para que el campo quede encima del botón. Esto es bastante fácil porque hemos establecido esta forma como una caja flexible. Entonces todo lo que tenemos que hacer es simplemente cambiar la dirección. Asegúrate de seleccionar el elemento correcto. Hay forma y bloque de forma. Segundo, tenemos que arreglar el fondo del héroe. Aquí es donde ese posicionamiento personalizado resulta útil porque ninguna de las alineaciones preestablecidas funciona para nosotros. Creo que el 55% hace un mejor trabajo. Bien, vamos a comprobar la fluidez. Vaya, el campo no se está estirando todo el camino porque tiene un ancho máximo. Así que vamos a eliminarlo en este caso y ponerlo en ninguno. Eso lo hará tan amplio como el padre. Ten en cuenta que cualquier cambio de estilo que hagamos en estas versiones solo afecta hacia abajo y no hacia arriba en la jerarquía. Por lo que este campo solo se va a reflejar en el retrato móvil y no en el paisaje, la tableta o el escritorio. Todo hecho para la sección héroe, vamos a darle una oportunidad en el modo de vista previa, asegurándonos de que todo se vea bien y funcione correctamente. Excelente. Continuaremos con las siguientes secciones en los próximos videos. 130. Adaptable: sección de maqueta: Y seguir adelante con la siguiente sección. Para la tableta, es bastante fácil. Sólo tenemos que mover esa imagen más hacia la izquierda. Cuando hagas clic en él, verás que tiene un margen negativo. Eso es lo que hace que salga tanto de la página. Disminuyamos el margen negativo. Creo que esto se ve bastante bien. -350 píxeles. Comprueba la fluidez, y eso es todo. Ahora para el paisaje móvil, comencemos por el relleno de sección. Hemos hecho que el acolchado horizontal sea más pequeño en la sección de héroe. Son 30 pixeles. Nunca hemos igualado eso con el resto de las secciones. No podemos hacer el cambio en esta sección directamente porque tiene una coboclase aplicada a Si reducimos el espacio, sólo va a aplicarse a esta clase compo y a ninguna de las otras secciones Entonces lo que podemos hacer es seleccionar otra sección que no tenga una clase compo como la siguiente, por ejemplo, o podemos deshacernos de la clase compo por un momento Dale estilo a esa sección y luego vuelve a poner la clase de coo. Pero eso es más complicado. Así que vamos a darle estilo a esta sección a continuación. Y claro, eso también ha aplicado el relleno en la sección anterior. De igual manera, podemos cambiar el valor que sea más apropiado y disminuirlo a algo así como -260 píxeles Nuevamente, comprobar la fluidez. Una cosa más que me gustaría arreglar aquí es el relleno vertical en la sección. En modo horizontal, el espacio vertical es muy limitado. Si puedes imaginar que estás viendo esto en un panorama móvil real, entenderás que tendrás algunas brechas donde realmente no estás viendo mucho contenido. Una cosa a tener en cuenta sobre la vista horizontal móvil, no es solo paisaje móvil, sino también algunas tabletas en flets o como se llamen porque verás en el visor, muestra diferentes tamaños para diferentes dispositivos Entonces no es solo el panorama móvil en la realidad, sino que lo llamamos paisaje móvil solo para facilitar las cosas. Bien, entonces tenemos relleno vertical de 80 píxeles en nuestras secciones predeterminadas. Voy a reducir esto para que le gusten 60 píxeles, tal como lo hicimos anteriormente seleccionamos una sección que no tiene una clase de convo y estilo esa Bien, pasando al retrato móvil. La imagen de esta sección ni siquiera es visible. Entonces lo que vamos a hacer es cambiar la dirección de la caja flex a vertical. Hay otra dirección que podemos cambiar. Podemos invertir el orden dentro de la caja flexible, y tener imagen primero tiene más sentido. Y ahora podemos darle estilo a la imagen. Un problema es que la imagen es demasiado pequeña, por lo que debemos aumentar el tamaño. Aumentar el tamaño de la imagen tiene algunas cosas que hacer y qué no hacer. No podemos cambiar el ancho desde la configuración de la imagen. Estos son ajustes globales de imagen. Entonces, si cambiamos el tamaño aquí, va a afectar en cada tamaño de pantalla individual. Ver ahora la imagen se ha ido del escritorio. Entonces el lugar ideal es darle estilo desde el panel de estilos. Aquí, hay otro no. No estile la altura. Cuando estilizas la altura, no conserva la relación de aspecto y obtienes una imagen de espagueti. Los valores de ancho son la mejor opción, pero aquí también, algunas cosas se comportarán extrañamente Dependiendo de la situación, ya sea ancho fijo o ancho mínimo funciona mejor. Por ejemplo, el valor de ancho regular no cambia el tamaño. Pero el ancho mínimo hace un trabajo bastante bueno. No es que esto sea un error o algún tipo de falla, generalmente hay una respuesta a comportamientos tan misteriosos En este caso, el ancho no hace mucho porque hay un ancho máximo del 100%, lo que le dice que sea tan ancho como el contenedor padre. Básicamente está anulando el ancho, pero el ancho mínimo ignora eso porque viene antes que el ancho máximo No te preocupes si no estás cogiendo todo esto. No suelo preocuparme demasiado por el razonamiento. Yo sólo juego con valores y veo cuál funciona. Todo bien. Yo diría que 380 píxeles se ve bien. Ahora necesitamos fijar el margen negativo, tal vez alinear el borde de la imagen con el contenido. Bien. Algo así como -90 píxeles Y agreguemos algo de margen en la parte inferior. Perfecto. Vamos a comprobar la fluidez, y estamos bien para irnos No me preocupan demasiado los tamaños de pantalla, menos de 320 píxeles de ancho. Eso es un occearnce tan raro especialmente para nuestro público objetivo que son No creo que ninguno de ellos sea dueño de Nokia en el 95. Además de eso, la fluidez se ve genial. Seguiremos con el resto en el siguiente video. Quédate alrededor. 131. 124 Cuerpo receptivo NUEVA interfaz de usuario: Retomando donde lo dejamos, vamos a abordar las versiones responsivas de estas dos secciones desde el cuerpo. Tenemos que hacer algo de espacio en esta sección. No hay suficiente espacio para que todo encaje. Para empezar, podemos reducir el espacio entre la imagen y el contenido, digamos 60-30 píxeles A continuación, podemos dejar que estas imágenes salgan de la página. En realidad, al igual que el simulacro de arriba. No hay razón para que no podamos hacer eso. Sólo tenemos que establecer un margen negativo. Eso en realidad se ve bastante genial. Bien, eso todavía no es suficiente. La imagen es demasiado pequeña, y eso es porque el contenido está ocupando demasiado espacio y empujando la imagen para que se encoja. Lo que podemos hacer aquí es establecer ancho máximo del contenido para que no crezca más allá de cierto punto. Primero, cambiemos el nombre de esta clase a un contenedor de contenido para que sepamos con qué estamos trabajando. Esta clase se comparte entre los tres bloques de contenido. Ahora podemos darle al envoltorio de contenido un ancho máximo de algo así como 50% Eso debería crear un aspecto más equilibrado. En realidad, en la versión de escritorio, el contenido también está creciendo un poco. No me había dado cuenta de esto antes, pero esta imagen es un poco demasiado pequeña en las estrechas pantallas de escritorio. Está bien en las pantallas más grandes, pero estaría bien si aumentáramos en las pantallas de escritorio más estrechas, como mi lienzo de 992 píxeles aquí Ahora podemos establecer 50% de ancho máximo en el escritorio porque para pantallas más grandes eso será más ancho que lo que tenemos actualmente. Simplemente aumentaré el ancho máximo actual en píxeles a algo así como 410 píxeles. Eso ahora le da a la imagen un poco más de espacio para crecer. 50% max con, en este caso claramente no es suficiente. Vamos a aumentarlo un poco para que podamos encajar correctamente el contenido. Simplemente movería la imagen un poco hacia la derecha para que más se vea la chica. Ahora, pasando al retrato móvil. El diseño aquí ya es vertical. ¿Por qué? Porque estamos usando el mismo contenedor de caja flexible que el anterior. Y cuando lo diseñamos arriba, se le aplicó el mismo diseño vertical. Sólo tenemos que revertir el orden. También necesitamos deshacernos del ancho máximo en envoltorios de contenido Como queremos que el contenido llene el ancho completo, esta vez, no seleccionamos ninguno del menú desplegable, solo necesitamos ajustar la imagen Aquí, disminuiré el margen negativo a algo así como -30 píxeles y agregaré un poco de espacio debajo para que no esté pegado al titular y cero píxeles en el lado derecho del mismo Eso es todo lo que es la fluidez, luciendo bastante bien. Ahora apliquemos ajustes similares a la segunda sección, partir de la tableta, ya que no hemos tocado ninguno de ellos. Primero, el envoltorio de imagen, necesitamos los mismos márgenes que arriba, pero direcciones opuestas. Como puedes ver, hay este desbordamiento por la imagen que va fuera de la página. Entonces necesitamos aplicar esa clase combo que ya tenemos para la sección de desbordamiento. Eso es todo el panorama móvil lo está haciendo muy bien por sí solo. Ahora para el retrato móvil, necesitamos exactamente el mismo espaciado que la imagen de arriba. El mismo estilo no se llevó en este porque este envoltorio de imágenes tiene una clase combo aplicada a él. Y los márgenes izquierdos derechos son anulados por esa clase combo Pero no el margen inferior, ese fue llevado a este elemento también. Ahí vas. El retrato móvil se ve genial. Compruebe la capacidad de respuesta. Consulta el modo de vista previa para ver las animaciones y todo eso. Asegúrate de que todo se vea bien y funcione bien. En el siguiente video, pasaremos a la sección testimonial. 132. Responsivo: testimonio y pie de página: La sección testimonial es relativamente sencilla. Para la tableta, está bien tal como está. Sólo bebe ese espacio entre el titular y la diapositiva. La mitad de eso debería ser bueno. El paisaje móvil también es bastante bueno. Ahora en modo retrato, necesitamos cambiar el ancho de las tarjetas testimoniales. Obviamente, solo podremos colocar una tarjeta a la vez. El ancho está siendo establecido por el elemento deslizante. Si cambiamos eso de valor de píxel a 100%, entonces será tan ancho como el contenedor padre. Así que básicamente se extiende de borde a borde. Pero lo que estaría bien es mostrarle al usuario que hay más testimonios, y no es solo un testimonio solitario el que está sentado aquí Entonces, si cambiamos el ancho al 90%, entonces eso debería traer una pequeña parte de la siguiente carta en la pantalla visible. Eso es genial, pero el contenido es un poco demasiado estrecho, así que hagamos un poco más de espacio para ello reduciendo los márgenes y los acolchados Primero, podemos la mitad del margen a la derecha, así que más de la tarjeta se muestra a partir de la siguiente, lo que significa que podemos aumentar el ancho de la diapositiva más de 90% a tal vez 95%. Ahora para el acolchado, a Y eso es todo. A continuación, el pie de página. El pie de página, si recuerdas, no creamos desde cero. Lo copiamos de nuestro proyecto anterior. La mejor parte de reutilizar sus componentes en diferentes proyectos es esta Ya están optimizados. Todos esos cambios responsivos que hemos hecho al primer proyecto, van a ser llevados con el componente cuando los copies a un proyecto diferente. No hace falta volver a hacerlo. Tal ahorro de tiempo. Aunque sí tenemos que hacer un par de ajustes porque sí cambiamos el diseño del pie de página. Al igual que este tema de espaciado, por ejemplo, probablemente en proyecto anterior, teníamos un plan un poco diferente para esto, pero aquí, si revisas la versión de escritorio, las columnas se distribuyen por igual de borde a borde. Este es un diseño bastante bueno para la tableta también. Así que restablecemos el estilo para que esté heredando de la versión de escritorio Ahora en el panorama móvil, quizá podríamos cambiar la justificación de nuevo a izquierda. Las columnas están un poco demasiado dispersas. Podemos dar un paso extra e intentar alinear la columna de la compañía con la columna de suscripción a continuación. Solo necesitamos reducir el ancho de la columna del logotipo. Y esa alineación hace que se vea mejor. Dentro del retrato móvil, devolvamos ese primer ancho de columna al tamaño original porque hay espacio y esa línea de etiqueta se ve mejor en dos líneas. La columna de suscripción ahora está enterrada en la parte inferior del pie de página. Ese no es realmente el mejor arreglo. Sería mejor que lo lleváramos a la cima porque nadie va a molestarse desplazarse hasta abajo por ello Ahora, así es lo increíble que es Flexbox. Flexhil tiene su propio conjunto de ajustes. Hay algunas configuraciones de tamaño que cada niño puede anular la configuración general de tamaño de flexbox, y también podemos anular la alineación y el orden Entonces, si cambiamos el orden de nuestra última columna, en realidad podemos hacerla primero. Pero no lo queremos exactamente primero. Preferiríamos que viniera después de la columna del logotipo. Pero no se preocupe, también podemos hacer eso. Solo necesitamos darle a la columna del logotipo el mismo estilo de pedido, y volverá a aparecer en la parte superior. Cuando hagas esto, asegúrate de tener aplicada una clase combo. De lo contrario, este cambio se aplicará a cada pie o columna, y eso no dará resultados esperados. No he aplicado nada porque ya teníamos clases combo en estas dos columnas primera y última. Bien, vamos a comprobar la capacidad de respuesta. Bien, tenemos este problema de desbordamiento con el campo de correo electrónico. El ancho fijo de 267 píxeles es demasiado en esa pequeña pantalla. Entonces en lugar de fijo, podemos cambiar a ancho máximo de 267 y cambiar el valor fijo al 100%, por lo que se estira cuando tiene espacio. A Excelente. Oh, ahora se ve bien. Eso es. La página de inicio está hecha, y va a quedar genial, sin importar el dispositivo o el tamaño de la pantalla. En la siguiente sección, vamos a construir un blog, cual es hecho por una web súper potente CMS baja, y vamos a aprender todo al respecto. Va a ser divertido. Quédate alrededor. 133. 126 CMS: Hasta ahora, hemos estado construyendo un sitio web estático en lugar de un sitio web dinámico. Esto probablemente no te diga mucho. Déjame explicarte. Digamos que tenemos una página de artículo para nuestro blog. Cuando necesitamos una nueva entrada de blog, simplemente podemos duplicar esta página y cambiar el contenido, no hay problema. Ahora bien, ¿y si en algún momento decidimos que queremos hacer algunos cambios de diseño a esta plantilla de página de artículo? Bueno, no hay problema. Podemos copiar esos cambios a la segunda página del artículo. Y cuando tengas 100 páginas de artículos, entonces estás listo para renunciar a tu carrera de diseño web. Se trata de contenido estático. Cada página es independiente entre sí y el contenido de esa entrada de blog existe solo en esa página en particular. Ingresa contenido dinámico. Esta vez, el contenido no vive dentro de cada página, ahora viven en la base de datos, bien organizados, algo así como en una hoja de cálculo Y luego en cualquier parte del sitio web, podemos hacer referencia a cualquiera de estos elementos de la base de datos y extraerlos para mostrarlos en la página. Esta base de datos se llama CMS, abreviatura de Content Management System. Conozco nombre muy sexy con contenido dinámico. Tenemos solo una plantilla de página de artículo, una página maestra. Dentro de esta página maestra, podemos hacer referencia a esos elementos de la base cada vez que se carga cualquier página de artículo. Webflow extraerá el contenido apropiado para cada elemento. Ahora bien, si hacemos algún cambio a esta página maestra, se reflejará instantáneamente en cada otra página, incluso si tenemos 5,000 de esas. Ese es el poder de Webflow, CMS y contenido dinámico Vamos a aprender todo al respecto en esta sección. Cómo crear elementos CMS, Cómo crear páginas maestras, cómo hacer referencia al CMS y así sucesivamente. Quédate alrededor. 134. Blog y CMS: Webflow CMS: Antes de comenzar a diseñar y construir nuestra página de entrada del Blog Maestro, primero tenemos que crear una base de datos para nuestro blog. Eso sucede desde Webflow CMS, que podemos acceder aquí mismo Hay un enlace a los tutoriales en video de Webflow. Tienen este lugar en el sitio web llamado Webflow University Allí hay un gran contenido, y cubren todos los aspectos de Webflow Definitivamente lo recomendaré para familiarizarme con él. Tienen tanto videos como artículos escritos. Entonces el CMS o la base de datos de contenido de nuestro sitio web se desglosa en lo que se llama colecciones. Imagina una colección como una hoja de cálculo independiente. Digamos que si tuviéramos un sitio web muy grande como EU Demi, tendríamos una hoja de cálculo para todos los cursos, una hoja de cálculo para todas las publicaciones del blog, una hoja de cálculo para todas las páginas de ayuda y soporte, y así Vamos a crear nuestra primera colección y ver qué pasa. En nuestro proyecto, necesitamos una colección para entradas de blog. Ahí es donde guardaremos nuestras entradas de blog con los titulares, imágenes, etiquetas, etcétera Aquí tenemos algunas opciones para nombrar la colección, algunos ajustes, una parte importante creando campos que formarán parte de esta colección. De nuevo, piensa en esto como una hoja de cálculo. Cuando creas una nueva, está vacía, así que tienes que agregar nuevas columnas, ¿verdad? Y titularás estas columnas como titular, etiquetas corporales, Ral a la imagen, etcétera Eso es básicamente lo que es esto, y cada fila es parte de un grupo que hace una entrada de blog en particular. Webflow aquí tiene plantillas de colección. Es para ayudarnos a comenzar algunas colecciones comunes que podríamos crear. Ni que decir tiene, primero es Blog post, probablemente la colección más común para todos Una vez que hagas clic en él, Webflow creará una nueva colección con algunos artículos necesarios para comenzar. Repasemos cada uno y editémoslos como necesitemos para nuestro blog. Primero, tenemos nombre de colección. Esto no es gran cosa, como se llama. Es interno y no visible para el público. Webflow lo llamó publicación de blog, que podemos mantener. Lo siguiente es la URL de colección. Es así como se estructurará la URL de cada publicación de bloque, igual que se muestra en el siguiente ejemplo, es la palabra que viene justo después del dominio. Aquí prefiero usar la palabra blog. Es mucho más específico que la palabra post. Es un poco más común usar blog en lugar de una publicación. Y ahora las cosas importantes. De esto está hecha cada una de nuestras entradas de blog. Cada campo es un tipo de contenido. Hay muchos tipos diferentes de contenido. Por ejemplo, hay texto plano, hay texto enriquecido, preocúpate de eso más adelante. Hay imagen, hay un color, hay un interruptor para encender o apagar algo. Echemos un vistazo a nuestra entrada de blog y veamos qué tipo de rellenos necesitamos Entonces primero, tenemos un titular, ¿no? Eso en Webflow es lo mismo que el nombre de la entrada del blog. Bueno, no es exactamente lo mismo, pero podemos convertirlo en titular y hacer que el nombre y el titular sean lo mismo. texto de ayuda debajo es para nosotros y para los miembros del equipo que van a crear nuevas publicaciones de bloque. No hay necesidad de poner aquí nada. El titular del título lo dice todo. Entonces tenemos un autor y una fecha. Después nos preocuparemos por el autor. Para la fecha, en realidad no necesitamos agregar ningún campo extra. Cada nueva publicación de bloque que creamos va a venir con una fecha de creación. Por eso no se incluye dentro de esta lista de campos. Pasando al siguiente, tenemos una imagen principal de una publicación de bloque. Webflow ya ha incluido dicho campo. Podemos moverlo arriba después del titular para seguir el orden. El orden en realidad no importa. Es sólo para nosotros. A continuación en nuestro blog, tenemos cuerpo del post. Grablo también ha incluido un campo para eso. Este campo tiene verdaderas opciones extra, caracteres mínimos y máximos. Eso es si necesitamos agregar algún tipo de limitación al contenido de nuestro blog. Yo diría que no hace falta. Y finalmente, nuevamente, tenemos un autor que esta vez tiene un poco más de información al respecto. Después nos preocuparemos por el autor. Vamos a crear una colección separada para autores. resumen de publicaciones no está realmente en nuestra página de blog, pero lo necesitaremos en la página de inicio de nuestro blog donde mostramos todas las publicaciones de nuestro blog en tarjetas. En resumen post, es una buena idea limitar el número de caracteres. Las tarjetas tienen un diseño muy estricto, por lo que no queremos que un resumen sea demasiado largo. En nuestros diseños, hemos utilizado un resumen que es máximo de tres líneas. Eso es de unos 140 caracteres de largo. Ahora en cuanto a la imagen en miniatura, eso es algo que va en la tarjeta de bloque Podemos tener eso como un campo independiente o simplemente podemos reutilizar la misma imagen principal. Haremos que sea más fácil crear nuevas entradas de blog, menos cosas para subir. Característica y color, realmente no los necesitamos en este caso, así que deshagámonos de ellos. Y ahí tienes. Tenemos cuatro campos que va a conformar cada uno de nuestros puestos de bloque. En el lado derecho, tenemos vista previa del editor que muestra todos estos cuatro campos que tenemos en nuestra colección. Este formulario es lo que rellenaremos cada vez que queramos crear una nueva entrada de blog. Bien, haz clic en Crear colección para terminar este paso. Y eso es todo. Nuestra base de datos de publicaciones de blog ya está lista. Entonces, para recapitular, tenemos esta capacidad agregar una base de datos a nuestro sitio web Es decir, un CMS, un sistema de gestión de contenidos. Dentro de esta base de datos, tenemos la capacidad de crear muchas colecciones diferentes. Las colecciones son una especie de hojas de cálculo que contendrán todo el contenido que forma parte de ella. Por ejemplo, entrada de blog. Esa es una colección y todas las entradas de blog van a una sola hoja de cálculo Cada entrada de blog está hecha de cierto contenido como titular, imagen principal y cuerpo de la publicación. Estos se llaman campos de recolección, y tenemos control total sobre esto, lo que agregamos y lo que eliminamos. En el siguiente video, vamos a agregar nuevas publicaciones de bloque a nuestro CMS. Garrapar alrededor. 135. Blog y CMS: elementos de CMS: Nuestra base de datos para Block post está lista. Ahora podemos comenzar a construir y agregar nuevas entradas de blog. Para volver a la colección Block Post, haz clic en el CMS y luego Block Post. Asegúrate de no hacer clic en el icono de engranaje, eso te va a llevar al lugar para editar los ajustes. Este es un lugar para agregar nuevas publicaciones de blog, pero esto también se puede hacer desde el editor Podemos agregar nuevas publicaciones de bloque desde este botón azul. Webflow en realidad tiene esta opción para generar algún contenido ficticio para nosotros Dale unos segundos y obtendrás esto. Si haces clic en uno de estos, abrirás la entrada del blog. Aquí podemos ver todos esos campos que creamos anteriormente. Esta vez, todo lleno algún contenido ficticio que Webflow generó para nosotros Hay un titular y hay una imagen principal. Tenemos un cuerpo de post y el resumen post. Todo eso es editable incluso después de que publiquemos y hagamos nuestro post en vivo Vamos a crear una nueva entrada de blog desde cero para que podamos entender cómo funcionan cada uno de estos campos Podemos usar contenido de nuestros diseños. Entonces sigamos adelante y llenemos cada uno de estos campos. Cuando ingreses el titular, automáticamente se utilizará como URL. Si quieres tener algo diferente para la URL, no hay problema. Puedes editar esta URL aquí mismo. Mantuvo titulares y URLs siempre iguales. Simplemente tiene más sentido de esa manera. Entonces tenemos la imagen principal. Y voy a subir esta imagen aquí mismo. Ahora bien, el cuerpo del poste es un tipo especial de película. Se llama texto enriquecido. Podemos poner titulares en el texto, subtítulos, imágenes, videos, citas, balas, y ese tipo de cosas. Tenemos diferentes tipos de titulares. Tenemos imágenes. No necesitamos fils individuales para todas estas cosas. Un fild de texto enriquecido puede encargarse de todo el contenido así Y dentro de este campo de texto enriquecido, tenemos mucha libertad para darle estilo al texto de diferentes maneras o agregar videos de YouTube justo entre el texto. Este evento tiene algunos controles de diseño para mostrar el video en muchas posiciones diferentes. Aunque no es así realmente como se verá el resultado final, el resultado final depende de cómo le demos estilo a este bloque y más sobre eso más adelante. Por último, tenemos un campo de resumen de post, que es este. Haga clic en Crear y se agregará a la base de datos. El estado tiene este mensaje escenificado para su publicación. Significa que la próxima vez que publiquemos nuestro sitio web, todas esas publicaciones de blog que estén pendientes se pondrán en marcha. Pero en nuestro caso, en realidad no van a ir a ningún lado porque solo hemos creado una base de datos. No hemos creado una página de blog que vaya a sacar este contenido de la base de datos. Eso lo haremos en el siguiente video. 136. Blog y CMS: página de colecciones: Así que hemos creado una base de datos para nuestro blog, y eso es genial. Pero, ¿en qué parte de nuestro sitio web es eso visible? ¿Dónde están esas publicaciones de blog además estar escondidas en algún lugar dentro de Webflow? Bueno, ahora mismo, en ninguna parte, pero en los próximos videos, los vamos a sacar a la luz. En el momento en que creamos una nueva colección dentro de CMS, se crea automáticamente una nueva página bajo el Panel de Páginas. En la parte superior, hay páginas estáticas. Ahí es donde nuestras páginas de inicio y cualquier otra página que creamos que no sea parte del CMS En la parte inferior, tenemos esta página llamada páginas de colección CMS. Estas son páginas maestras que pueden ser pobladas por contenido dinámico de la base de datos. Ahora mismo, tenemos una página, plantilla de entrada de blog. Yo lo llamo MasterPage Webflow lo llama plantilla. De alguna manera prefiero Master Page tipo de tiene más sentido. Cada colección CMS obtiene una de esas páginas. este momento está completamente en blanco, igual que cualquier otra página nueva que creamos. Pero esta página se va a convertir en nuestra página de entrada de blog a partir de nuestros diseños. Funciona de la misma manera que cualquier otra página estática con una sola diferencia. Podemos enlazar elementos a los elementos de la base de datos. Déjenme demostrarlo. Por ejemplo, tenemos un titular en nuestra entrada de blog, ¿ verdad? Agreguemos un titular. Si escribimos texto nosotros mismos dentro de este titular, entonces este contenido va a ser estático, igual que cualquier otra página. Pero debido a que esta es una página CMS, tenemos una opción extra bajo la configuración de este titular, un punto púrpura junto al campo de texto. Cuando hagas clic en él, verás algo familiar. Algunos de los campos de la configuración de la colección. Encabezado post verano en algunas fechas. Dado que se trata de un titular, podemos seleccionar el titular. Voila. Ahora bien, este elemento de título ya no es estático, es dinámico y está extrayendo contenido de la base de datos. Permítanme agregar los otros dos campos, la imagen y el cuerpo del poste. Al igual que hicimos para el titular, para la imagen, tenemos que agregar un elemento de imagen. No podemos poblar un elemento de titular con una imagen o un DVBlog con un Los tipos de campo y los tipos de elementos tienen que coincidir. Bueno, no coinciden exactamente, sino que sean compatibles. Por ejemplo, el campo de título dentro de nuestro CMS es texto plano, que es compatible con cualquier tipo de elemento de texto, ya sea titular, bloque de texto o párrafo. Bien, así que lo mismo que vamos a hacer con la imagen, haz clic en Configuración de imagen, luego ese punto morado. Aquí solo tenemos una opción, imagen principal porque ese es el único campo en nuestra base de datos que es compatible con el elemento image, lo cual tiene sentido. Momento selecciono el campo de imagen principal, enlazará y extraerá el contenido de la base de datos. Déjame reducir esto un poco. Agreguemos el último elemento CMS, el cuerpo de la publicación. Este campo en CMS es un campo de texto enriquecido. Nunca tuvimos que usar elementos de texto enriquecido hasta ahora, y ahora puedo enlazar este elemento de texto enriquecido al campo post body en nuestra base de datos. Y ahí tienes. Al instante se llena con el contenido que se encuentra dentro del CMS. Ahora, esta imagen de titular y texto es parte de la misma entrada de blog. Cuál muestra aquí realmente no importa. Una vez que publiquemos esta página, todas esas entradas de registro se publicarán y cada una de ellas sacará su propio titular, su propia imagen y su propio texto En la barra de herramientas superior, tenemos esta opción para pasar por diferentes blogposts y ver cómo se ven Ahora mismo, todo es bastante feo, pero vamos a darle estilo y construir nuestra página como solemos hacer. contenido dinámico no afecta la forma en que hacemos el diseño de la página. Entonces, para recapitular, para cada colección que creamos dentro de la base de datos CMS, Webflow crea automáticamente una página para Esta página, a diferencia de otras páginas, es una página dinámica. Tiene la capacidad de enlazar con campos en la base de datos y sacar contenido de ahí. Solo los filds y elementos compatibles se pueden unir, por ejemplo, campos de imagen con elementos de imagen o campos de texto plano con cualquier tipo de elemento de texto como titular, blog de texto, enlace, etcétera En el siguiente video, vamos a empezar a construir y diseñar esta página de entrada de blog. 137. Blog y CMS: barra de navegación y título: A en este video, vamos a empezar a construir nuestra página de entrada de blog. Para acceder a esta página, vas al panel de páginas, y en la parte inferior, tienes esta página con un icono morado. Ese es el indicado. Anteriormente he agregado todo este contenido aquí, pero voy a deshacerme completamente de él y empezar de cero. Entonces, en base a nuestros diseños, lo primero que necesitamos es una barra de navegación. No lo vamos a construir desde cero, obviamente. Lo copiaremos de nuestra página de inicio y lo tomaremos de ahí. Así que vuelve a la página de inicio, selecciona todo el elemento Navbar Asegúrate de seleccionar todo y no solo el contenedor, haz clic en Control C, luego vuelve a la página de bloques y pega ahí. Yo cuando pegas un objeto, primero da clic en el lienzo o recibirás este mensaje de error. Webflow necesita saber dónde exactamente estás pegando tu elemento. Ahí vamos. Bueno, ahora no hay nada visible porque nuestra barra de navegación es blanca Así que vamos a diseñar los elementos dentro de nuestro Navbar igual que en nuestros diseños. Empezando por enlaces, ahora mismo, son blancos, así que necesitamos tenerlos oscuros. Para ello, primero necesitamos aplicar una clase combo y luego darle estilo. De lo contrario, va a cambiar los dos originales en la página principal. Y luego aplicar la clase combo al resto de los enlaces. Lo mismo para el botón Nav, necesitamos una clase combo extra. El fondo del botón es nuestro azul primario con 15% de opacidad Por último, el logo, que necesitamos exportar desde FIGMA. Está pegado a los bordes. En nuestra página de inicio, Navbar está sentada dentro de la sección de héroes, que tiene relleno. Por eso ahí no está pegada a los bordes. Pero aquí está fuera de esa sección. Podríamos ponerlo dentro de la sección aquí, también, pero una mejor opción es simplemente crear una clase combo para el Nabbar y agregar relleno directamente sobre él Y eso es todo, la barra de navegación está lista. Pasando al resto de la página del bloque, tenemos un titular, una imagen, el contenido. Como es habitual, vamos a comenzar con una sección y un contenedor. La sección es gris. Eso es lo que estamos usando en la página principal. Pero para el poste de la cuadra, hemos decidido ir con blanco liso. Lo que pasa con el poste de bloque es que quieres la máxima legibilidad Es un contenido largo, y si el contraste no es suficiente o hay algún tipo de legibilidad disminuida por alguna otra razón realmente nos va a lastimar. Hacer una sección blanca es simple, solo una nueva clase de combate, y eso es todo. Asegúrate de usar algún otro nombre, preferentemente algo específico para la clase base como sección blanca. Eso dice mucho más que solo blanco, y nos aseguramos de que no entre en conflicto con ninguna otra clase. Yo Bien. Ahora, agreguemos un titular. Ya sabemos qué hacer con este titular, ¿no? Vamos a vincularlo al ítem CMS. Excelente. Los límites de nuestro poste de bloque en los diseños son un poco diferentes. Estamos usando un diseño más estrecho con un ancho máximo de 700 píxeles. Y el ancho máximo de nuestro contenedor genérico aquí es de 1160 píxeles Eso significa que necesitamos crear un contenedor diferente para nuestra entrada de blog. Así que vamos a darle una clase combo o tal vez incluso duplicar la clase y darle un ancho máximo de 700 píxeles. Bien, eso se ve bien. A continuación, tenemos autor y segmento de fecha, pero lo vamos a hacer en el siguiente video. 138. Blog y CMS: bloqueo de autores: En este video, vamos a construir esa fila de autor y fecha debajo del titular. Creo que el enfoque más sencillo sería usar un flexbox para esto Agreguemos un nuevo bloque MTD y le demos un autor de clase y fecha Entonces agreguemos una imagen. A continuación, necesitamos un nombre para el autor. Agregar un blog de texto regular. Dale una nueva clase. Dale estilo igual que Figma. I Necesitamos cambiar la propiedad de alineación flexbox a algo así como centro A continuación, tenemos este divisor. Podríamos usar un corchete de línea para esto o simplemente diseñar un dibloque con ancho y un color de fondo Pero creo que el corchete de línea es más fácil. Creo que eso es lo que estamos haciendo en Side fix M de todos modos. Solo necesitamos un color diferente para ello. Y luego la fecha, solo reutilicemos el mismo blog de texto de autor e incluso mantengamos la misma clase La fecha es la fecha de publicación de esta entrada de blog en particular. Ya podemos vincular esto al CMS. No tuvimos que crear el campo de fecha porque cada elemento CMS viene con él. Incluso tenemos tres opciones de fecha diferentes aquí. En este caso, publicado el es lo que necesitamos, pero como pueden ver, desaparece. Eso es porque aún no hemos publicado nuestro sitio web ni ninguna de las publicaciones del blog, por lo que ese campo de fecha está vacío. Usemos un campo de fecha diferente, tal vez creado o actualizado el, y luego podremos volver a cambiarlo para publicarlo. O mantenlo así. La actualización también es un indicador de fecha bastante decente. Con fechas, incluso tenemos la capacidad de cambiar el formato de fecha. Esto importará en función dónde vive nuestro público objetivo. Y por último, agreguemos un margen encima de todo para separarlo del titular. Bien, todo eso se ve genial. Ahora, aquí está la cosa. Este autor que acabamos de crear, este es un contenido estático. Cuando publiquemos nuestras entradas de blog, todas ellas tendrán el mismo autor, pero eso no está bien, ¿verdad? Para un blogger independiente, seguro, siempre es el mismo autor, pero para el sitio web de una empresa, siempre va a haber más de una persona creando blogs para el sitio web. Necesitamos que esta información de autor también sea dinámica, pero no hemos creado campos CMS para esto, lo que aún no podemos vincularla a la base de datos. Eso lo vamos a hacer en el siguiente video. 139. Blog y CMS: campo de referencia: Como discutimos anteriormente, los elementos del autor en este momento son estáticos, misma imagen de autor y nombre para cada entrada de blog, incluso si hubiera 5,000 publicaciones de bloque. Necesitamos convertir a los autores en contenido dinámico. De esa manera tendremos múltiples autores y elegiremos uno para cada publicación de bloque. Hay dos formas en las que podemos convertir al autor en contenido dinámico. Una es agregar un avatar y un nombre de autor como campos a nuestra colección de publicaciones de blog existente , algo así. Luego, cada vez que creamos una nueva entrada de blog, tendríamos la capacidad de subir la imagen del autor, nombre o cualquier otra información relacionada con el autor. Entonces vincularíamos esos campos en nuestra página y terminaríamos. Pero esto significa que para las nuevas entradas de blog, tendremos que ingresar información del autor, subir una imagen, poner su nombre. Si quieres su biografía u otra información, entonces todo eso también, y repite el mismo proceso para el siguiente post, aunque el autor sea el mismo. Por suerte, hay otra opción. Podemos crear una colección separada para aors. Al igual que hicimos con la entrada del blog, podemos crear una base de datos CMS para ars donde guardaríamos todos los aors con su perfil, fotos, nombres, biografias, información de contacto, cualquier otra información Y luego podemos sacar toda esa información de la base de datos a las entradas de nuestro blog. Bien, así que vamos a crear una nueva colección para los autores Haga clic aquí para crear una nueva colección. Webflow en realidad también tiene una plantilla para autores, pero esta vez no vamos a usar la plantilla, y agregaremos campos desde cero para que puedas entender mejor cómo funciona esto Entonces, para empezar, necesitamos un nombre. Aquí todo funciona, esto es interno. Aunque automáticamente rellenará previamente la URL con el mismo nombre, pero podemos cambiar esto La URL es pública, y sí importa lo que pongamos ahí. Me gusta usar una forma singular para la URL porque entonces iría algo así como los autores John Smith, y eso tiene más sentido que los autores en plural. Para los campos, ¿qué necesitamos? Obviamente el nombre que ya está ahí. Entonces tenemos un avatar o en otras palabras, foto de perfil. Y también en la parte inferior de nuestra entrada de blog, el segmento de autor también tiene alguna pequeña biografía Vamos a agregar estos campos. Cuando agregamos nuevo campo, tenemos que elegir qué tipo de campo es, el campo y la información se verán afectados por esto. En este caso, vamos a crear un campo para el avatar, así que obviamente ese va a ser un tipo de imagen. Podemos hacer que este campo sea requerido. Así que cada vez que estamos agregando un nuevo autor, nos aseguramos de que siempre haya una foto de perfil cargada. Siguiente, biografía del autor, bastante sencillo. Nuevamente, un texto plano. Tenemos una opción para campo de línea única o múltiple. Se puede ver cómo cambia el campo en el modo de vista previa con múltiples líneas, y esto depende de la compañía, pero podríamos poner el máximo recuento de caracteres para la biografía. Es una buena idea. De esta manera, no vamos a tener un autor con una biografía dos páginas de largo y otra que sea una frase. Y crear colección. Eso es. Si necesitamos editar o agregar más campos a esta colección, no hay problema. Siempre podemos hacerlo después. Por último, hagamos que Webflow agregue algunos artículos ficticios a esta colección Puede que necesite un poco de refresco a veces para aparecer. I Bien, nuestra colección está lista. Vamos a conectarlo a nuestros elementos en nuestra página. Salvo que podemos hacer eso ahora mismo. No hay opción para Avatar y nombre del autor. ¿Por qué? Porque esta es una colección completamente independiente que aún no tiene nada que ver con las publicaciones de bloqueo. Entonces necesitamos crear algún tipo de vínculo entre estas dos colecciones, y eso sucede a través de campos de referencia. Es sólo otro tipo de campo dentro de la colección. Volvamos a la colección de publicaciones del blog. Haga clic en el icono de configuración y vamos a agregar un nuevo campo. Y elige un tipo de referencia. Ahora bien, lo que hace este tipo de elemento es que podemos sacar información de una base de datos diferente, en nuestro caso, la colección del autor. Y de un desplegable, seleccione una colección apropiada, que es autores Hazlo requerido y guarda y guarda la colección también. Ahora, vamos a entrar en una de las entradas del blog, y verás que tenemos un nuevo campo que es un menú desplegable de autor Y este desplegable está buscando en la base de datos de aors y sacando información de esa base de Así que no necesitamos subir información del autor cada vez que creamos una nueva entrada de blog. Repasemos todas las entradas del blog y escojamos un autor para cada una. Ahora cuando volvamos a nuestra página Master para la entrada del blog, tendremos más opciones en la configuración de enlace. Hay una sección completamente nueva con filds de la colección del autor Nuevamente, estos campos se muestran únicamente para elementos compatibles. Avatar no está aquí, pero Avatar definitivamente está disponible para el elemento imagen. Selecciona aquí el nombre del autor y el avatar para la imagen. Ahora, a medida que cambiamos entre diferentes publicaciones de blog, los autores se actualizan en consecuencia. Sin embargo, hay un problema con el avatar, pero vamos a encargarnos de eso en el siguiente video. 140. Blog y CMS: objeto calco: Nos quedamos aquí donde el avatar no está mirando lo mejor posible. Eso es porque no hemos estilizado la imagen de una manera que se vea igual sin importar qué tipo de foto subamos Ahora mismo, cambia la forma con base en la propia imagen. La imagen que teníamos antes de Figma ya era ovalada y de tamaño correcto Por eso no se requería ningún estilo. Sin un estilo adecuado, entonces tendríamos que subir imágenes ya recortadas y ovaladas Y dejar eso en manos de creadores de contenido y clientes es una mala idea. Primero, agrega trabajo extra. Segundo, tendríamos que enseñarles a hacer un cultivo ovalado y simplemente deja mucho margen de error. Lo mejor es darle estilo a nuestro marcador de posición de imagen de una manera que quede genial, sin importar la imagen en la que se inserte Primero, hagámoslo ovalado. Esto lo hacemos redondeando esquinas de la frontera. Entonces necesitamos que sea del mismo ancho y alto. Podemos aplicar este valor dentro ajustes de imagen o en el panel Estilos. Bien, la forma es buena, pero si notas que la imagen en el interior está estirada, y es el caso de todas las imágenes que no tienen las mismas dimensiones. Es decir, si el ancho y alto del archivo de imagen original no es del mismo tamaño. Entonces, ¿cómo solucionamos esto? CSS y Webflow tienen una propiedad útil para esto llamado ajuste a objetos. En Webflow se acorta para que encaje simplemente. Todo lo que tenemos que hacer aquí es aplicar cobertura bajo esta propiedad fit. Estos ajustes son bastante similares a lo que ves dentro de los estilos de fondo. Portada aquí funciona exactamente como funciona dentro de las imágenes de fondo. La imagen cubre todo el espacio de este elemento y la cantidad sobrante simplemente se recorta Esto incluso tiene los mismos ajustes de posición al igual que los estilos de fondo en caso que necesite cambiar la posición. Pero en nuestro caso, lo necesitamos centrado. Ahora tenemos la mejor solución, que va a funcionar con todas las formas y formas de imagen. Los creadores de contenido son libres de subir lo que deseen. Y eso está todo hecho con un encabezado de nuestra entrada de blog. Quédate por el resto. 141. Blog y CMS: imagen principal: En este video, vamos a agregar la imagen principal y nuevamente, vincularla con un campo CMS. Aunque esta imagen es más amplia en nuestros diseños, es más ancha que el contenedor para el contenido. Son 900 píxeles en lugar de 700. Esto significa que no podemos poner esta imagen dentro del mismo contenedor que un titular. Necesitamos un contenedor diferente para ello. Entonces vamos a agregar un nuevo contenedor, darle una nueva clase, y mover la imagen ahí dentro. Yo ahí ahora eso es lo correcto. En nuestros diseños, hay cierta altura a la imagen, que hace que se vea más agradable. Y en este momento solo está creciendo y encogiéndose en base a la imagen original Eso va a crear un layout que no sea uniforme y en algunos casos, de aspecto muy extraño. Por ejemplo, si subimos una imagen vertical grande, eso va a llenar demasiado de la página empujando el texto hacia abajo. Este es, nuevamente, el mismo problema que enfrentamos con el avatar del autor. Al igual que la última vez, podemos resolver este problema usando la propiedad object fit. Primero, necesitamos darle a esta imagen el ancho y alto que deseamos. Para la altura, es de 450 pixeles. A pero ¿qué hacemos por el ancho? No podemos darle 900 pixeles porque no siempre son 900. Cuando la pantalla se encoge, necesitamos que se encoja. Ahora, técnicamente, podemos hacer eso porque la imagen ya tiene un ajuste predeterminado del 100% de ancho máximo, por lo que aún se encogerá. Pero prefiero usar un valor relativo y darle 100% de ancho. Esto hará que la imagen sea tan amplia como el padre, que en este caso, es nuestro contenedor de bloques modificado. Como sucedió con los avatares, obtendremos esta imagen deformada porque estamos cambiando la relación de aspecto de la imagen original, que vamos a arreglar fácilmente cambiando el ajuste a la cubierta. Perfecto. Esto ahora es uniforme para cualquier tipo de que sea la forma o forma de la imagen o el tamaño, y va a ser la misma posición y dimensiones, y simplemente va a quedar genial. Por último, solo agrega un margen superior a la imagen para que coincida con el diseño. Eso es. A continuación, trabajaremos en el cuerpo. Quédate alrededor. 142. Blog y CMS: texto enriquecido: A continuación, necesitamos agregar el cuerpo del poste. Agregar esto es relativamente sencillo. Solo necesitamos arrastrar un elemento de texto enriquecido. ¿Por qué texto enriquecido? Porque ese es el tipo de campo dentro de CMS. Necesitamos agregar esto dentro de un contenedor diferente. El contenedor de imágenes es más ancho que el resto, por lo que necesitamos el mismo contenedor que creamos anteriormente para el encabezado y colocar texto enriquecido dentro de ese. Bien, eso es mejor. Y agreguemos un margen inferior al elemento image para crear una separación. Enlaza el campo CMS como lo haces con cualquier otra cosa. Ahora, aquí hay una parte divertida. Necesitamos hacer algunos cambios de estilo en nuestro elemento de texto enriquecido. Por ejemplo, emparejar el color del texto con lo que tenemos en los diseños. Decidimos ir con un color más oscuro en el diseño, y también necesitamos un cierto espaciado entre diferentes párrafos y diferentes textiles. Empecemos por el color. La forma obvia sería darle una clase y cambiar el color de la fuente. Esto sí estiliza parte del texto, pero no todo, sobre todo no el principal , el párrafo. El párrafo tiene su propio estilo, y está siendo anulado por la etiqueta HTML de párrafos, algo que diseñamos temprano en nuestra página Dado que el texto enriquecido es solo un elemento padre, un párrafo, que es un elemento hijo, puede sobrescribir cualquiera de los estilos del texto enriquecido Esto significa que necesitamos darle estilo al párrafo directamente, pero ahora mismo no tenemos acceso a él. Una vez conectado al CMS, podemos seleccionar elementos individuales en su interior. Podemos desconectarlo de CMS desde aquí, pero esto luego elimina todo el contenido ficticio que tenía dentro de él Así que solo vamos a mantener este conectado y agregar otro texto enriquecido estático para que podamos darle estilo a nuestro gusto. Lo primero que tenemos que hacer al estilizar un texto enriquecido es que necesitamos aplicarle una clase. Esto es importante y verás por qué en un momento. Empecemos con un párrafo. Si diseñamos un párrafo como solemos hacer, verás que esto solo aplicará el color rojo a este párrafo en particular. Y ningún otro párrafo dentro de este bloque de texto puente. Para que podamos darle estilo a todos los párrafos dentro del bloque de texto de cresta, necesitamos hacer esto como solemos hacer cuando necesitamos aplicar estilo a todos los párrafos al otro lado usando texto. Haga clic fuera del campo para que pueda seleccionar elementos individuales nuevamente. Después selecciona uno de los párrafos, elimina cualquier clase si la hay y dentro del selector, selecciona todos los párrafos etiquetados. Debajo del selector, recibirás este pequeño mensaje con el ícono más, selector de red dentro de y el nombre de tu clase de texto enriquecido, como sea que la hayas llamado. Si no estás recibiendo este mensaje, entonces significa que no tenías una clase aplicada al propio bloque de texto enriquecido. Sin la clase en el blog padre de texto enriquecido, recibirás este mensaje en su lugar. Así que asegúrate de dar primero la clase de suma de texto enriquecido, cualquier clase única no importa cómo la nombras. Una vez que la clase esté ahí, seleccionar una etiqueta te dará opción de anidar la etiqueta dentro de tu clase de texto enriquecido. Esto se aplica no solo a los párrafos, sino a cada tipo de elemento dentro del bit de texto enriquecido, encabezados, citas, elementos de lista, etc. Puedes hacer una nota en este video en este punto si quieres volver a él más tarde. Entonces aquí están los pasos. Primero, asegúrate de que el texto enriquecido tenga una clase. Segundo, selecciona párrafo dentro de tu texto enriquecido. Puedes seleccionar un párrafo mientras estás dentro del campo así. Haga clic en el texto enriquecido y luego seleccione un párrafo como este o simplemente selecciónelo del navegador. Cualquier párrafo servirá. Tercero, desde el selector, seleccione la etiqueta rosa de todos los párrafos. Sin seleccionar esto, solo estarás muriendo un párrafo individual. Por último, haga clic en este icono más para anidar esta etiqueta dentro de la clase de texto enriquecido principal. Así es como debería verse. Con una flecha diciendo cuando se anida dentro de en el nombre de tu clase, sin anidar, en lugar de todos los párrafos dentro del texto enriquecido, estarás estilizando todos los párrafos al otro lado. Eso no es lo que queremos. Este paso es fácil de olvidar. A mí me pasa hasta el día de hoy. Y ahora puedes estilizar lejos. Ahora cada tipo de párrafo se puede diseñar de una sola vez. Incluso otro tipo de textos heredarán el estilo de párrafo a menos que se les aplique algún estilo más específico Sé que los textos enriquecidos son un poco confusos, pero lo entenderás después de algunas veces. Si eliminas la clase del texto enriquecido, podrás ver que todos los nuevos estilos desaparecen. Entonces, esencialmente, esto funciona como un estilo de clase regular, pero con un control granular adicional para tipos individuales de contenido dentro de él. El color rojo restante para otros textos viene de la clase principal sobre el texto enriquecido, por lo que podemos editarlo ahí. Se puede ver ahora que todos estos cambios también se están aplicando a nuestro texto enriquecido dinámico, porque tiene la misma clase en él. Si no tuviera la misma clase, entonces no se vería afectada Entonces, en caso de que tu texto enriquecido conectado no se actualice con los nuevos estilos, check tal vez no tenga una clase o tenga una clase diferente aplicada a ella. Hay más tipos de contenido de texto en su interior que necesitamos estilo. Para estilizarlos, necesitamos repetir el mismo proceso. Por ejemplo, este es un tipo de texto de cita. Es un elemento bonito dentro de los bloques cuando quieres citar a alguien. Así podemos estilizarlos de manera diferente, hacerla cursiva que sea más adecuada para las cotizaciones. Mayor altura de línea, un poco más de espacio alrededor. Ni siquiera podemos darle estilo a la frontera. También podemos darle estilo a las imágenes. Por ejemplo, el espaciado es un poco demasiado estrecho alrededor de las imágenes. Solo ten una cosa en mente. La imagen está dentro de otra cosa llamada figura. Mejor agregar espaciado en esa. Incluye leyenda en su interior también. También podemos darle estilo a viñetas. En estos momentos son realmente pequeños. Lo voy a mantener del mismo tamaño que el texto del párrafo. A Llegamos a estilizar H tres encabezados porque en estos momentos son blancos Supongo que tenemos estilo ellos blancos en algún lugar de la página principal. Bien, no tenemos que cambiarlo todo. Veamos cómo se ve el contenido real. Tal vez agregue un poco más de espaciado para g dos encabezados. ¿Vio lo que he hecho aquí? Cometí un error y olvidé anidar la etiqueta dentro de la clase de texto enriquecido. Entonces, cuando hice los cambios de estilo, en realidad he diseñado todos los encabezados H dos al otro lado. Eso no es lo que quiero. Entonces voy a restablecer el estilo, anidar la etiqueta haciendo clic en este icono más y luego estilizar desde cero. Deshazte del texto enriquecido estático, y eso es todo. Si necesitas regresar y cambiar el estilo, solo agrega un nuevo texto enriquecido y aplica tu clase a él. Entonces ese es texto enriquecido. A lo mejor un poco complicado de entender al principio, pero con un poco de práctica, te acostumbrarás a ello. A diferencia de párrafos regulares o titulares o libros de texto, el texto enriquecido puede llevar muchos tipos de contenido dentro, obviamente, todos los diferentes titulares que tenemos, podemos ponerlos dentro. Podemos poner imágenes, tenemos videos. Podemos citar, podemos poner viñetas y números y todas esas cosas. Y dentro de Webflow, los elementos de texto enriquecido de estilo tienen sus propias instrucciones específicas por las que acabamos de pasar Básicamente, la forma en que va es el primer paso es que hay que darle una clase al texto Rich. Entonces tiene una clase muy específica, ¿verdad? Tienes que darle estilo a ese texto enriquecido en particular primero, ¿verdad? Así que básicamente no eres capaz de decir que cada texto enriquecido en esta página en párrafo dentro de todos esos bloques de relleno de texto enriquecido va a tener este tipo de estilo específico. En cambio, lo que estás haciendo es que estás diciendo que un texto rico que tiene este estilo particular, digamos, texto rico súper agradable. Los párrafos en esas clases siempre serán así. Eso es lo que estás haciendo en la realidad. Y en el segundo paso, se selecciona la etiqueta apropiada. Entonces, cuando estás, por ejemplo, quieres darle estilo a párrafo, seleccionas todos los párrafos, ¿verdad? Y luego en el paso tres, seleccionas esta opción de anidamiento Básicamente, estás diciendo que no estoy estilizando todos los párrafos del sitio web. Estoy estilizando párrafos que están anidados dentro de esta clase, ¿verdad? Estás diciendo: Bien, esta es la clase. Y si estoy aplicando esta clase a un texto enriquecido, entonces cada vez que eso suceda, todos los párrafos dentro serán así. Así que esos son los campos de texto enriquecido, cómo aplicar estilo y cómo trabajar con ellos. El ejemplo que di fue dentro del CMS y dentro de la entrada del blog. Por lo general, el este es un lugar donde usamos texto enriquecido en su interior como un blog o artículo. Así que la mayoría de las veces lo estamos usando dentro del CMS. Sin embargo, eso no significa que no podamos usarlo en otras páginas estáticas regulares. Todo el estilo, todo funciona exactamente igual, y puedes agregarlo a una página normal y estilizarlos con exactamente la misma instrucción. Entonces, las instrucciones sobre cómo darle estilo a ich text no tienen nada que ver con un CMS. Es solo la forma en que funciona Rich Text. 143. Blog y CMS: bloque de autor en la parte inferior: Y continuando donde lo dejamos, ahora necesitamos agregar el bloque autor inferior. Eso es bastante simple. Empecemos por el nuevo Bloque DV, cual vamos a convertir en flexbox y añadir algo de espaciado en la parte superior Ahora para la imagen de perfil del autor, vamos a copiar la de arriba para que tengamos menos cambios que hacer. Ahora necesitamos algunos bloques de texto, pero los vamos a poner dentro de otro bloque de día para que estén bien agrupados en el lado derecho de la foto. Conecte el texto a CMS. Y luego solo estiliza cada uno individualmente. Y vamos a combinar todos los estilos tal como lo tenemos dentro de los diseños. Y ahí lo tienes todo bonito y estilo. Podemos comprobar cómo se ve para diferentes postes de bloque cambiando el poste de bloque en la parte superior. Y eso es todo para este blog. 144. Componentes de Webflow: En este video, vamos a agregar un pie de página a la página. Nada es más fácil que eso. Podemos copiar el pie de página de inicio y pegarlo aquí mismo. Está listo, nada que cambiar y ya responde. Pero incluso hay una mejor manera de hacerlo. Ahora imagina que tenemos un sitio web y tiene muchas páginas, sobre todo muchas páginas estáticas. En cada una de estas páginas, vamos a tener misma barra de navegación y el mismo pie de página, generalmente, ¿verdad? Y a veces tendremos algunas secciones como una sección de llamada a la acción tal vez repetida también. Entonces tendremos, digamos, 20 o diez páginas en todas estas páginas, el mismo componente como el pie de página se repite una y otra vez. Ahora, cuando queremos editar esto, ¿verdad? Queremos editar el pie de página, tendríamos que ir a editar uno de los pies de página, derecho, luego tomar ese pie de página, copiarlo, y luego reemplazarlo en cada otra página Ahora bien, cuando se trata de estilos, podemos encargarnos fácilmente de eso, ¿verdad? Ya aprendimos tenemos estilos CSS, tenemos etiquetas HTML. Podemos ir en un solo lugar y cambiar una instancia, y a través de todo el lado, todo se actualizará. Pero ¿qué tal el contenido? ¿Qué tal todo el esqueleto y la estructura del pie de página? Digamos que decidimos que una columna tiene que ir, o tenemos que reemplazar el texto de tal vez solo un pequeño titular que está arreglando y cambiando algo. En figma, tenemos algo que resuelve ese problema, los componentes Podemos crear un componente, y luego cualquier otra instancia de ese componente se puede actualizar en todas partes, bien, hasta que sea anulado, obviamente También tenemos algo similar en Webflow. Junto a la pestaña Elementos, hay una pestaña para componentes. Los componentes de flujo web funcionan como componentes en FigMA. ¿Recuerdas esos? Cómo hacer cualquier cambio en el componente maestro, incluso en el contenido va a actualizar cada otra instancia de ese componente. Los componentes en Webflow funcionan de manera similar. Podemos crear un componente a partir de cualquier cosa y luego reutilizarlo en todo el sitio web. Vamos a crear un componente desde el pie de página. Voy a eliminar este y crear un componente a partir del que está en la página de inicio. Para crear un componente, basta con hacer clic derecho sobre el elemento. En este caso, toda la sección que contiene todas las cosas del pie de página y haga clic en Crear componente. Dale un nombre y crea. Se va a poner verde. Esto significa que ahora es un componente. verás un indicador diferente dentro También verás un indicador diferente dentro del navegador con el nombre de ese componente. Ahora volvamos al poste del bloque. Si vas al panel Componentes, verás que ahora hay un componente de pie de página ahí. Puedes rastrear este componente en la página o en el navegador, asegúrate de colocarlo dentro del elemento body. Y ahí, todo el pie de página está aquí. Tenemos dos formas de hacer cambios en los componentes. Primero, podemos editar el componente maestro. Eso significa que cualquier cambio se aplicará a todas las instancias de ese componente en todo el sitio. Permítanme arrastrar otra instancia aquí para que podamos ver los cambios en tiempo real. Para editar el componente maestro seleccionado y haga clic en Editar componente. También puedes hacer clic derecho y hacer lo mismo. Cualquier cambio que hagas aquí se aplicará en todas partes. No importa en qué página estés editando el componente. Si haces clic en el componente dit, entonces siempre está afectando al componente maestro. Puedes mover elementos y prestar atención a lo que le sucede al anterior, ya que puedes ver que los interruptores también se han hecho ahí, o puedes cambiar el texto. Todos los cambios también se han actualizado a través de otras instancias. No importa en qué página estés editando el componente. Si haces clic en dit component, entonces siempre está afectando al maestro. Para salir del modo de edición, haga clic de nuevo en la parte superior. O haz clic en cualquier otro lugar del Lienzo o presiona Escape. Ahora veamos la página principal. Ahí. El cambio también se reflejó instantáneamente en esta instancia. Para volver a editarlo, solo repita el proceso. Ahora, digamos que en ciertas páginas queremos contenido diferente, pero no queremos cambiar el componente maestro, solo contenido diferente en la página de bloque. Podemos realizar tales cambios usando las propiedades de los componentes. Ingrese al modo de edición del componente, luego seleccione el elemento que desea editar de esta manera agregando. Y en el panel de configuración junto al texto, haz clic en este pequeño icono y crea propiedad. Yo Ahora, eso nos permite sobrescribir el texto por defecto de este encabezamiento Para anular el texto, primero, debe salir del modo de edición de componentes. Recuerda, siempre que estés en el modo de edición, estás editando el componente maestro. Cuando haces clic de nuevo a instancia y normalmente seleccionas el componente, entonces estás trabajando con la instancia. ¿Es confuso? Sí, pero lo vas a poner la cabeza alrededor después de alguna práctica. Como puede ver, el elemento de texto ahora es seleccionable. Y si hacemos doble clic sobre él, podemos editar el texto. Asegúrate de que estás haciendo doble clic en ese encabezado del elemento de texto y no accidentalmente haciendo doble clic en el propio componente porque entonces vas a entrar en el modo de edición, así que haz doble clic en este elemento. Ahora podemos reescribir y sobrescribir el texto predeterminado. Esto no tocará el componente maestro. Sólo va a cambiar esta instancia en particular. Se puede repetir el mismo proceso para cualquier otro texto. Editar componente, propiedad de cabeza. Volver a la instancia y empezar a escribir. O tal vez quieras ocultar este formulario de correo electrónico en ciertas páginas. Pulsar la tecla de eliminación no va a funcionar. Lo que hay que hacer es seleccionar el elemento, toda la columna de pie de página en este caso, luego ir a la configuración de ese elemento. Aquí verás una opción de visibilidad. Haga clic en Crear. Esto abrirá una opción para ocultar o mostrar este elemento en esta instancia en particular. Si seleccionamos oculto, verás que se ha ido de esta instancia, pero sigue ahí en la otra. Estas se llaman propiedades de componentes, y dependiendo de un elemento que seleccione, obtendrá diferentes opciones. Pero digamos que queremos que estos elementos vuelvan a la forma original y reanuden extrayendo valores del componente maestro. Podemos hacer esto restableciendo esas propiedades desde este panel Cuando tienes una instancia de componente seleccionada y no estás en el modo de edición, este panel mostrará todas las propiedades que forman parte de este componente, y las propiedades que estamos usando y anulando estarán en azul, algo así como en el panel de estrellas Haga clic en el texto azul y obtendrá una opción para restablecerlo al valor predeterminado de la propiedad. Y restablecer la visibilidad del formulario de correo electrónico traerá de vuelta esa columna oculta Una cosa que notarás en el panel de ajustes es que todas esas propiedades que creamos siguen ahí. Y si intentas editar texto en tu componente maestro, verás que no te permite hacerlo. Eso es porque las propiedades que creamos aún existen y siguen conectadas. Mientras la propiedad existe, edición de la propiedad ocurre desde la configuración de la propiedad, el mismo lugar donde creó la propiedad. Entonces, si necesitas cambiar el contenido la propiedad predeterminada, puedes hacerlo aquí. Te deshaces de estas propiedades mientras estás en el modo de edición, vas a la configuración de la propiedad y haces clic en Desconectar. Ahora, ya no tenemos ninguna propiedad, y todas las instancias serán ineditables e idénticas al componente maestro A veces queremos hacer grandes cambios en una de las instancias como cambiar el orden de las columnas. En ese caso, necesitamos desvincular completamente la instancia del componente Esto se puede hacer con el botón derecho, hacer clic en la instancia y luego desvincular instancia Esto ahora es completamente independiente del componente. Entonces, para recapitular, los componentes son reutilizables y conectados, súper útiles para secciones y bloques repetidos, como barras de navegación y pies Puedes crear un componente a partir de cualquier cosa. Tienes la capacidad de realizar ciertos cambios en instancias como actualizar el texto u ocultar ciertos elementos. Y para nuestra página, está casi terminada. Solo necesitamos optimizar las versiones responsive, pero esta vez es bastante simple. La mayor parte está lista. Quédate alrededor. 145. Blog y CMS: publicación responsiva: Y estamos de vuelta para un poco de diseño receptivo. Hay muy poco que hay que hacer, así que podemos encargarnos de ello en un solo video. La barra de navegación necesita algo de edición para el modo horizontal. Primero, arreglemos los márgenes. Nuestra sección predeterminada tiene relleno lateral de 30 píxeles, pero la barra de navegación, en este caso, tiene una de 60 píxeles Eso es porque esta es una barra de navegación un poco diferente de nuestra página de inicio Así que solo disminuye el relleno a 30 píxeles y estás bien. El icono del menú necesita un color diferente. Es blanco, así que no podemos verlo ahora mismo. Antes de cambiar el color, tenemos que asegurarnos de aplicar una clase combo al botón de menú, o va a afectar a la que está en la página de inicio. Eso se ve bien. Vamos a comprobar el modo de vista previa. Entonces aquí tenemos un pequeño conflicto entre el fondo y los colores del enlace y el color del botón de menú. Los enlaces están aquí. No han desaparecido. Simplemente son de color oscuro por la misma razón que el botón de menú. Acabamos de cambiarlos anteriormente cuando estábamos diseñando nuestra barra de navegación. Y como tienen que mantenerse para estar oscuros, entonces en este caso, sólo podemos cambiar el fondo de este menú desplegable. Por lo que cambiarlo a un gris muy claro, va a estar bien. Bien, NABA se ve bien en todas las pantallas. Ahora vamos a revisar el encabezado con la imagen principal. La tableta es bastante fina. El modo paisaje se ve bien a primera vista, pero piénsalo de nuevo, esto va a ser estrecho. Entonces la imagen que es tan alta va a ocupar demasiada pantalla visible. Esta imagen va a funcionar mejor cuando también es modo horizontal, sobre todo porque eso es lo que subirán los creadores de contenido. Algo así como 250 píxeles de altura debería llevarlo a las dimensiones adecuadas. De igual manera, para el modo retrato, tendremos que encogerlo un poco más. 150 píxeles se ven bien. También reduciré el espaciado alrededor de la imagen, tanto en horizontal como en retrato. Hay algo divertido que podemos hacer con la imagen principal. En el escritorio, tenemos este diseño no tradicional donde la imagen principal está sobresaliendo del contenedor principal, pero en pantallas más pequeñas, eso no está sucediendo porque el relleno de sección está empujando todo en un solo lugar. Pero hay una forma de evitarlo. Si le damos a la imagen principal cierta cantidad de margen negativo, cancelará el relleno de la sección. Por lo que la sección de tableta tiene un relleno de 60 píxeles. Entonces podemos darle a la imagen un margen negativo de 60 píxeles, y eso va a cancelar el relleno e ir borde a borde, haciéndola parecer más interesante. Pero en lugar de aplicar el margen negativo directamente sobre la imagen principal, envolveremos la imagen en un bloque div y aplicaremos márgenes negativos a eso. Esto también bajará en cascada al móvil, pero tenemos que ajustarnos. En la sección móvil, el relleno es de 30 píxeles, por lo que necesitamos ajustarlo a negativos 30 píxeles también. Y y eso será exactamente borde a borde. Ahora, vamos a revisar el resto de la página. El texto enriquecido no necesita ningún ajuste. Ya responde y se ve bien en todas las pantallas. En el retrato, incluso podemos recortar un poco de espacio a la derecha y acercar el contenido a él. Eso es todo pie de página no necesita nada. Es el mismo pie de página de inicio y ya está optimizado. Esta página ahora está completamente lista y se ve impresionante. En los próximos videos, vamos a crear la página principal del blog. 146. Blog y CMS: página de inicio del blog: Ahora, una última página que nuestro blog necesita es esta página de inicio del blog esa cuadrícula que hemos diseñado. Blog Homepage va a ser una combinación de página estática con contenido dinámico, a diferencia de la página de entrada del blog, que es una página totalmente dinámica. Lo que vamos a hacer es crear una página estática regular y luego insertar elementos CMS dentro. Entonces, para empezar, crea una nueva página. Lo nombraremos blog y nos aseguraremos de que la URL slug sea blog. Empezando por navbar, es exactamente lo mismo que el de nuestra página de entrada de blog, así que podemos copiar esa Pero en lugar de copiar, es mejor crear un componente a partir de él. Derecha, haz clic en la barra de navegación y selecciona Crear componente. Ponle el nombre navbar y nosotros bien. Ahora podemos arrastrar eso justo en nuestra página de bloque. A continuación, necesitamos la sección y contenedor habituales. Tenemos un pequeño problema con color de fondo navbar aquí porque necesitamos que sea gris Podríamos arrastrarlo dentro de una sección, pero luego necesitaríamos cambiar los rellenos y todas esas cosas. Podríamos crear una clase combo y darle un fondo gris, pero eso significa que tendremos desvincularla del componente, cual no es un problema, pero es bueno que esté vinculado La mejor opción es envolver la barra de navegación dentro de otro bloque div y darle a ese bloque div un color de fondo Todas estas opciones son apropiadas y válidas, pero esta fue la mejor porque no tuve que alterar ninguno de los elementos predeterminados ni los símbolos. Ahora, agreguemos un titular y un subtítulo, bastante sencillo Y nada necesita ser ajustado en este caso. Ahora para la parte divertida, primero, vamos a diseñar una tarjeta estática, luego la resolveremos cómo convertirla en un elemento dinámico que extrae contenido de CMS. Agreguemos un nuevo bloque DO y le demos una clase de cuadrícula de bloques. Ahí es donde guardaremos todas las tarjetas de bloque con un margen superior de 60 píxeles. A continuación, necesitamos una nueva tarjeta de bloque llamada deblock. Et's hacen este fondo blanco. Dale las esquinas redondeadas y algo de ancho. Por ahora, vamos a darle a esta tarjeta un ancho fijo. No vamos a usar un ancho fijo al final porque vamos a organizar esto en un diseño de tres columnas. Pero por ahora, hagámoslo para que podamos ver correctamente lo que estamos diseñando. Desaparece cuando le damos un ancho, está vacío. Por eso. No se preocupe. A continuación, necesitamos una miniatura. Esto necesita una altura. La altura exacta de los diseños servirá. Podemos agregar alguna imagen aleatoria por ahora para que podamos ver lo que está pasando. Y vamos a cambiar la configuración de ajuste para cubrir para que la imagen no se vea distorsionada. Solo hay una cosa que la tarjeta de bloque tiene esquinas redondeadas, pero esta miniatura no Va por fuera de las esquinas con sus bordes puntiagudos. Esto sucede porque por defecto, desbordamiento es visible en cualquier bloque div. Pero si cambiamos desbordamiento a oculto en la tarjeta de bloque, entonces eso recortará cualquier cosa que vaya fuera de los límites, ahí redondeando las esquinas en la miniatura A continuación, necesitamos contenido, que vamos a envolver en un bloque div. Dale un relleno de 20 píxeles. El estilo de Et el encabezado en párrafo. Para el encabezado, podemos crear una de las etiquetas, tal vez H dos o H tres. Recuerda cómo aplicar estilo a las etiquetas de encabezado, cambiar la etiqueta desde la configuración, luego ir al selector, y en el wrap down, obtendrás la posibilidad de seleccionar esa etiqueta en particular y aplicar todos los estilos de grabación de los diseños, 22 píxeles y semi negrita y así sucesivamente. Y una última cosa le quita el margen superior. Ahora para el autor y el bloque de fecha, necesitaremos un nuevo bloque do para esto. Ya tenemos exactamente el mismo bloque en la página de post, así que voy a intentar reutilizar la misma clase aquí. Sin embargo, necesitará ajustes. Comprobemos las clases que hemos usado ahí. Si aplicamos estas clases, deberíamos obtener los mismos resultados. Copiar sería una opción más fácil, pero no funciona con elementos dinámicos ya que están vinculados. Bien, ahora vamos a ajustar esto usando clases combo Avatar tiene un tamaño de 30 píxeles en lugar de 40. El texto es de 12 píxeles. Y tiene diferente espaciado en el lateral, así que vamos a ajustar eso también. Y por último, el margen superior. Una cosa que me gustaría agregar a esta tarjeta es un efecto hover. Una cosa que podemos hacer es agregar una sombra de fondo sobre ella en el hover Esa sería una buena interacción. Ya sabemos cómo crear la sombra, ¿verdad? En las cartas, lo hemos hecho en las tarjetas testimoniales, y podemos hacer exactamente lo mismo aquí y simplemente podemos reutilizar los mismos valores para la sombra Agreguemos un efecto de transición, para que no sea tan abrupto y entrecortado Hay un efecto hover más que podemos agregar. Podríamos hacer que la tarjeta se mueva un poco. Esto con una sombra creará un efecto de carta siendo levantada en el aire. Muy sencillo de hacer en el estado hover, y un efecto de transformación Y en el eje vertical, muévase alrededor de dos píxeles. Necesitamos dos píxeles negativos para levantarlo. Los valores positivos lo moverán hacia abajo. No tenemos que agregar el efecto de transición porque hemos agregado uno para todas las propiedades, así que eso también se encarga de la transición para la mudanza. Por eso me gusta usar todas las propiedades de transición en lugar de una individual para cada atributo. Excelente. La tarjeta está lista, pero todavía no la vamos a conectar al CMS. Eso lo haremos en el siguiente video. Ahora mismo, acabemos la página. Necesitamos agregar el pie de página, lo cual es fácil ya que solo necesitamos arrastrar un componente de pie de página en la página. Y hecho, súper fácil. Ahora vamos a enlazar a esta página de bloque para que la gente pueda acceder a esta página de bloqueo a través la barra de navegación o a través del pie Después selecciona el enlace y ve a la configuración de Spanel. Conectado a la página de bloques, que ahora aparece en un menú desplegable. Y lo mismo en el pie de página. Y no olvidemos la barra de navegación de la página de inicio porque la barra de navegación no está conectada al componente Y eso es todo. Ahora, se puede acceder a la página de bloqueo desde cualquier lugar del sitio. Bien, Unext conectaremos la grilla al CMS. Quédate alrededor. 147. Lista de colecciones: Hay dos formas de sacar artículos de CMS. Una es mediante el uso de páginas de colección. Eso es lo que hemos hecho con la entrada del blog. Cada nueva colección que creamos va a tener una página de colección creada automáticamente para ellos, que podemos acceder desde aquí. Pero, ¿y si queremos sacar contenido CMS a otra parte? Por ejemplo, en páginas estáticas como la página de inicio o en la página del blog donde tenemos todas esas tarjetas de bloque. Ingresa la lista de colecciones. La lista de colecciones es un elemento que se puede arrastrar desde el panel de elementos en cualquier página y en cualquier lugar de la página Cuando arrastras una lista de colección a la página, obtienes un montón de cajas moradas vacías. Nada que ver aquí todavía. Primero, necesitamos conectarlo a una colección en particular. En nuestro caso, entradas de blog. Ahora lo conseguimos. Las casillas siguen vacías, pero cada casilla corresponde a la publicación de bloque en nuestra base de datos. La lista de colecciones muestra por defecto todos los elementos de esa base de datos en particular. Tenemos un control sobre cuántos mostrar a la vez, pero lo discutiremos más adelante. También obtenemos estos controles de diseño. Nuestra rejilla de bloques tiene tres columnas, por lo que podemos cambiarla fácilmente a eso. Ahora nuestras tarjetas de bloque se mostrarán en una cuadrícula de tres columnas tal como pretendíamos. Bueno, todavía no. Siguen vacíos. revisas el modo de vista previa, desaparecen. Para comenzar a vincular elementos al CMS, primero, necesitamos arrastrar elementos dentro de una de estas cajas moradas. Una vez que hagamos eso, entonces cada elemento dentro ganará cualidades dinámicas y tendremos opción de conectarnos a un campo CMS específico. En este caso, necesitamos arrastrar toda la blockcard en una de las cajas No importa cuál. No hay forma seleccionar toda la blockcard del lienzo, así que asegúrate de seleccionarla desde el navegador Después mientras está seleccionado, haga clic y arrástrelo en una de las casillas moradas. Si eso es complicado, puedes hacerlo desde el panel del navegador por completo y arrastrarlo dentro del elemento de la colección. Bien, estoy seguro que tienes preguntas sobre lo que acaba de pasar, por qué se han multiplicado las tarjetas de bloque La cosa es que la lista de colección funciona como una página de colección. Uno significa que todos actúan como un solo organismo como una especie de mente colmena Una vez que vinculamos los elementos con los campos CMS, entonces se extraerá el contenido apropiado. Entonces conectemos elementos a sus campos apropiados. Vea el momento en que se conectó al campo CMS, el titular de cada tarjeta se actualiza instantáneamente en función de a qué publicación de bloque en particular están conectadas. Hasta que hagamos estas conexiones, entonces todos los elementos son normales, elementos estáticos, y cada elemento será exactamente lo mismo. Hasta el momento, tan bien. Y cambiemos la fecha a un formato más corto. Necesitamos hacer algunos cambios en el espaciado. Primero, eliminemos ese ancho fijo de la tarjeta de bloque. Se va a poner en el camino y estropear las cosas. No queremos una tarjeta fija, queremos que sea fluida para estirarse y encogerse según el ancho de la página. Ya hay algún espaciado aplicado en el elemento de la colección por defecto. Podemos agregarlo allí en lugar de agregar nuevas propiedades de espaciado a la tarjeta de bloques. Cuenta con relleno de diez píxeles en los laterales. En nuestros diseños, la brecha entre cada tarjeta es de 30 píxeles, por lo que es de 15 píxeles en los lados. Y también el margen inferior o relleno. Realmente no importa, cualquiera funciona. Ahora, vamos a encargarnos de esa extraña distribución de las tarjetas. Esto sucede cuando las alturas de cada artículo son diferentes, por lo que están dispuestas desordenadamente, rompiendo nuestra ordenada cuadrícula. Podemos arreglar esto fácilmente con un flexbox. Por lo que necesitamos aplicar flexbox al primer padre que contiene esos elementos de colección Esta es la lista de colección. Asegúrese de no seleccionar el envoltorio de lista de recolección. Eso es un abuelo con todas esas cosas adentro. Primero, obtendrás todos los artículos exprimidos en una sola fila. Todo lo que tenemos que hacer aquí es habilitar el envoltorio. Entonces obtenemos exactamente el diseño al que estamos apuntando. Sólo hay una cosa. Estas tarjetas no son realmente cliqueables. ¿Cómo accedemos realmente a las páginas de bloque que representan? Para ello, necesitamos un elemento link que se va a conectar a la página de bloque. este momento, ninguno de los elementos son enlaces, por lo que ninguna de las configuraciones tiene una opción para enlazar URL al enlace CMS. Entonces necesitamos convertir uno de estos en un elemento link. Esto puede ser un titular, por ejemplo, que puede ser un enlace o una imagen en miniatura o ambos o podemos convertir toda la tarjeta en un enlace ¿Cómo lo hacemos usando el elemento Link Block? Así que tendríamos que poner toda la tarjeta dentro del bloque Link. Todas estas son opciones muy válidas. Diferentes sitios web tratan esto de manera diferente. En este layout actual que tenemos, me gusta tener toda la tarjeta cliqueable Si tuviéramos diferentes enlaces a liderar diferentes lugares, por ejemplo, el nombre del autor que lleva a la página de un autor, o si hubiera un enlace a una categoría, entonces no podríamos poner todo el asunto dentro del bloque Enlace porque no puedes anidar enlaces dentro de otros enlaces. Pero en este caso, podemos. Así que vamos con él. Simplemente agregue un elemento de bloque de enlace dentro del elemento de colección. Cuando obtengas la configuración, tendrás este icono de página púrpura. Esto permite enlazar a una página de colección. Escoge eso y selecciona la entrada actual del blog. Ahora ese enlace irá a esa página de Post de bloque. Por último, movamos toda la tarjeta dentro de este bloque de tinta. En realidad no necesitamos ese Diveblog extra. Podemos aplicar la clase de tarjeta de bloque al bloque de enlace en sí y deshacernos del bloque div adicional. Debido a que esto es ahora un bloque de enlace, todo el texto dentro de la tarjeta está subrayado. Eso es solo un comportamiento regular de los enlaces. Podemos deshacernos de ese subrayado desde los ajustes de decoración de texto No seleccione ninguno. Echemos un vistazo en vista previa y probemos el enlace. Hay una cosa que me molesta un poco diferentes alturas de las cartas. Para ser honestos, está bien así, pero alturas iguales harían que se vea mejor. Eso es lo que tenemos en los diseños, ¿no? Todas las cartas tienen la misma altura independientemente de su contenido, y eso hace que la grilla sea un poco más ordenada. Para hacer lo mismo, solo necesitamos estirar las tarjetas para llenar el espacio vacío. El artículo de colección, ya que es un niño flex, ya se está estirando, pero la carta de bloque no lo es si le damos una blockcard 100% de altura, eso va a llenar el espacio vacío Recuerda, solo necesitas darle estilo a una de las blockcards y todas ellas tendrán el mismo estilo Todo eso se ve bien, excepto una cosa. El autor y el bloque de fecha están en diferentes posiciones en todas partes. En nuestros diseños, los tenemos pegados al fondo, lo que crea un diseño mucho más agradable ¿Cómo podemos hacer que eso suceda? Primero, si echas un vistazo al elemento padre, que es el contenido de la tarjeta, entonces verás que no extiende hasta el fondo. Entonces primero, definitivamente necesitamos hacer ese estiramiento. Esta vez, el 100% de altura no va a funcionar porque eso significa el 100% de la altura de los padres. tarjeta de bloque es el padre, que es más alto porque también está la imagen en el interior. Entonces, si le damos el 100%, no sólo va a llenar el espacio vacío, sino que va a ir más allá de las fronteras. Entonces, ¿de qué otra manera podemos hacer que llene el espacio? Aquí hay una forma en que podemos hacer que el padre sea la tarjeta de bloque, un flexbox con una alineación vertical Y luego bajo la configuración de flex child, podemos cambiar el tamaño para estirar para el contenido de la tarjeta. Ahora, para el segundo paso, necesitamos pegar de alguna manera el bloque de autor en la parte inferior. Una opción obvia es volver a convertir el bloque de contenido en un flexbox con alineación vertical Y el cambio justifica los ajustes al espacio entre ellos. Eso va a empujar los objetos a los bordes. Ahora, el bloque de autor está pegado a la parte inferior de cada tarjeta, lo cual es encantador, pero eso hace que resumen de publicaciones también esté espaciado de manera uniforme. Eso no queremos. Queremos que resumen de la publicación se agrupe junto con un titular. Esto es fácil de arreglar. Solo necesitamos envolver el titular y el resumen del post dentro de un bloque div, y eso es todo. Cuando digo envolver algo, significa agregar un nuevo bloque div y poner los elementos dentro. Envuelve como una caja de regalo. Y eso es todo. Comprobemos la vista previa. Todo funcionando muy bien. Hay otra cosa que tenemos que hacer. Necesitamos agregar una paginación. Paginación significa distribuir estas tarjetas de bloque en diferentes páginas No queremos que todas las tarjetas se carguen en esta página. Cuando tengamos más de 20, 30 tarjetas de bloque, entonces va a ralentizar la página. Por eso necesitamos la paginación. Eso lo haremos en la siguiente lección. Quédate alrededor. 148. Blog y CMS: paginación: En este video, vamos a agregar la paginación. Sin dividir blockcards en diferentes páginas, cada blockcard se cargaría Y cuando tenemos mucho arriba log post, eso haría que la página se cargara muy lentamente y no sería óptima. Para 20 tarjetas, así es. Pero para 50, 60, y más, eso va a ralentizar considerablemente la página. Crear una paginación en la lista de colecciones es tan fácil como marcar una casilla en la configuración spanel Entonces aquí decidimos ¿cuántos artículos se deben mostrar por página? Queremos un número que sea adecuado para nuestra cuadrícula de tres columnas, algo que sea divisible por tres, como nueve, 12, etcétera Diez no es bueno porque entonces tendrás ranuras vacías. El número ideal es algo que se puede dividir tanto en diseños de tres y dos columnas. 12 es la mejor opción. Entonces además de la paginación, hay algunos otros ajustes para las listas de recolección Vamos a echarles un vistazo rápidamente. Los filtros son geniales y muy prácticos. Por ejemplo, podríamos filtrar post por autor o post creado este mes. O podríamos agregar campos adicionales para dicho filtrado en nuestros campos de colección. Entonces esos campos van a aparecer aquí y podríamos filtrar elementos basados en ellos. Entonces, por ejemplo, una forma de hacerlo es filtro de categoría. Así que cada vez que creamos una entrada de blog, elegiríamos una categoría del blog, ¿verdad? Entonces diríamos, a lo mejor se trata de cocinar, lo mejor esto es cocina española, cocina italiana, cocina francesa, lo que sea. Y entonces tendríamos páginas dedicadas para cada categoría, ¿verdad? Entonces todas las entradas de blog sobre cocina francesa, todas las entradas de blog sobre comida china. Y en cada una de estas páginas, entonces crearíamos este filtro. Así que muestra solo aquellos que están categorizados y tienen una categoría de francés y los que tienen una categoría de comida china y así sucesivamente. Opciones similares se aplican a la clasificación. Podemos ordenar el orden de las publicaciones por muchos criterios y reglas diferentes. Y nuevamente, podemos crear páginas separadas para diferentes órdenes de clasificación y luego incluir esos enlaces en parte superior para que los usuarios puedan navegar por allí. Hay una última configuración, limitando el número de elementos mostrados. Esto es similar a la paginación, aunque limita el número de elementos por completo y no agrega páginas adicionales para mostrar otros elementos Un ejemplo práctico de esto serían sugerencias similares de publicación de bloque debajo de una publicación de bloque real. Para ello, añadiríamos otra lista dinámica debajo. Lo poblaríamos con publicaciones de blog y luego limitaríamos los ítems a dos o tres Por lo que solo muestra algunas sugerencias de publicaciones. Así de simples y potentes pueden ser estas configuraciones de listas de colecciones. Una vez que habilitas la paginación, obtienes estos botones siguiente y anterior para moverte entre las páginas Así que estilizar es bastante fácil. Sólo tienes que seleccionar el botón. Dale un color de fondo. Cambiar el color del impuesto. Agrega un poco más de espaciado. Agrega un poco de efecto hover. Siempre agregue efectos de desplazamiento a botones y enlaces. Es importante que los usuarios entiendan qué es un objeto interactivo y qué no, y el efecto de desplazamiento es la mejor manera de hacerlo Hace poco estaba leyendo una biografía de Steve Jobs, y leí esta línea cuando decía que Tecnología tiene que hacerte sentir que puedes dominarlos. Y esto es tan malditamente cierto. Es por eso que la tecnología y los productos simples minimalistas siempre son mejores que los productos complicados que tienen un montón de botones y diales en ellos. Así que siempre que construyas tus sitios web y diseñes tus sitios web, nunca olvides la usabilidad y nunca olvides cómo el usuario va a interactuar con él. Así que asegúrate de que hay un botón, asegúrate de que el botón tenga un efecto de hover o algún tipo de interacción con él para que podamos entender que esta cosa es clicable ¿Verdad? O si hay un enlace, ¿el enlace cambia el color? ¿Hay algún tipo de indicador de que este es el enlace y puedes hacer click en este y nos va a llevar a algún lado y así sucesivamente No es tan difícil, pero sí se necesita algo de prestar atención y no ser perezosos porque muchos diseñadores web son bastante perezosos porque si no lo fueran no tendrían tantos sitios web malos que a veces nos vuelven locos. En fin, volvamos a la paginación. Así que volvamos a darle estilo a nuestro botón. Podemos aplicar la misma clase al botón anterior. El nombre de la clase no tiene sentido. A lo mejor debería usar el botón de paginación. Eso es un poco mejor. selecciones algún elemento de la paginación, obtendrás esta opción extra en la configuración Esto mostrará el recuento de páginas, que a veces es algo útil de mostrar. Podríamos estilizar esto también si lo quieres, pero creo que esto es suficiente. Eso es. Nuestro anuncio de bloque está hecho. Solo tenemos que hacerlo receptivo y lo haremos en el siguiente video. Quédate alrededor. 149. Blog y CMS: página de blog responsiva: Ahora hagamos que nuestra página de bloqueo sea receptiva. Al escritorio le va bien. Las tarjetas se encogen a un tamaño razonable, por lo que aún podemos mantener tres columnas. En las tabletas, es una historia diferente. Es demasiado para tres, así que tenemos que ir con dos columnas. Podemos cambiar el diseño desde estos ajustes. Eso va a afectar a la versión de escritorio dos. Es global, no específico del dispositivo. Pero es bastante sencillo. Estos artículos están dentro de una caja flexible con envoltura habilitada Esto significa que las cartas saltarán a la siguiente línea cuando no haya espacio. Si le damos al artículo de colección un 50% de ancho, eso organizará instantáneamente todo en dos columnas. Así de fácil, se estirarán y encogerán para ocupar según el espacio. Ahora, para el paisaje, es un poco complicado. En tamaños más anchos, es perfecto. Pero cuando se encoge al tamaño más pequeño, entonces dos columnas es demasiado. Una opción es crear un diseño de columna única, por lo que tendríamos que establecer el ancho al 100%. Una sola columna no está mal en este caso, pero ¿sabes cuál sería el diseño perfecto? Si pudiéramos tener dos diseños de columnas y luego algún ancho específico para que se convierta en una sola columna. Por ejemplo, si establecemos el ancho mínimo del elemento de colección en 300 píxeles, de esta manera, las tarjetas se encogerán hasta 300 píxeles, y luego se ajustarán a la segunda línea, creando un diseño de columna. Pero esto es una idea. En la pantalla grande, obtenemos esta brecha. Idealmente, queremos que cambie al 100% de ancho en el momento en que vayan de una sola columna. Por suerte, hay un truco avanzado para esto. Podemos establecer tales reglas específicas bajo configuración de flex child debajo de las opciones más. Elimine los ajustes de ancho mínimo antes de comenzar a editar esta pieza. Hay tres campos con crecimiento, contracción y valor base. La combinación de estos tres valores da resultados diferentes. No voy a adentrarme en la lógica de cómo funcionan todos, pero voy a explicar la única variante que necesitamos ahora mismo. Dentro de la base, podemos establecer un valor como 300 píxeles. Luego en el campo de contracción, podemos especificar que no se encoja más allá de este valor. El valor para esto tiene que ser cero. Si es uno y superior, entonces significa que puede encogerse más allá de ese valor. Entonces, con el encogimiento establecido en cero, no se encoge más allá de eso, y las tarjetas se envuelven a la siguiente línea. Es como establecer un mínimo. Ahora, debido a que el crecimiento se establece en cero, no crece más allá de los 300 píxeles ni se encoge. 00 básicamente significa no crecer, no encogerse. Tan solo manténgalo a 300 píxeles. Pero si establecemos crecer a uno, entonces permitiremos que crezca más allá 300 píxeles para ocupar cualquier espacio disponible. Y esto nos da un diseño absolutamente perfecto donde son dos columnas completas, y cuando se vuelve demasiado pequeña, entonces se convierte en una sola columna de ancho completo. Si no envolviste la cabeza alrededor de esto completamente, no te preocupes. Es un concepto complicado. Solo debes saber que dicho control granular es una opción cuando lo necesitas. Después al azar, puedes jugar con diferentes valores hasta obtener el resultado deseado. Eso es lo que hago la mayor parte del tiempo de todos modos. Por último, veamos el modo retrato. Debido a la configuración de flex child que hemos establecido en el modo horizontal, retrato se encuentra automáticamente en modo de una sola columna, aunque con un problema. Como no permitimos que se encoja por debajo de los 300 píxeles, va más allá de los bordes de la página. Ahora, debido a que estamos usando la configuración de flex child, no podemos editar con la configuración aquí porque la configuración de flex child ignora estos valores Entonces volvemos al flex child de nuevo a su valor predeterminado, que es el shrink si es necesario, y luego podremos cambiar el ancho al 100%. Hay una última cosa que podemos arreglar. Tener relleno en los lados crea esta pequeña desalineación desde los bordes de nuestra página Ya sabes dónde está alineado todo nuestro contenido. Esto está siendo un poco quisquilloso, pero me gustan las cosas lo más exactas posible Deberías hacer tu mejor esfuerzo para desarrollar este hábito, también. Obsesionarse con los detalles es una buena calidad para un diseñador web Entonces, ¿cómo solucionamos esta pequeña desalineación? No podemos tener una clase especial de combo para esas cartas que están en los bordes. Ellos son uno, recuerden, Hive Mind. Pero es bastante sencillo. Podemos agregar un margen negativo al padre que contiene todos esos elementos. -15 píxeles en ambos lados y listo. Obtienes las tarjetas alineadas ahora exactamente en los bordes. Y eso es todo. En serio, eso es todo. Nuestro sitio web está completamente hecho. Es receptivo. Se ve hermosa. Es rápido y potente. La gente paga buenos dólares por esto. En la siguiente sección, daremos toques finales y publicaremos el sitio web. 150. Lanzamiento al vivo: SEO y publicación: Empecemos por SCO y algunos otros toques finales. Necesitamos completar los detalles de SEO para todas nuestras páginas, comenzando por la página principal. Ya hemos hecho esto antes, así que debería ser bastante sencillo, excepción de la página dinámica de entrada de blog. Eso es un poco diferente. No olvides los ajustes de gráfico abierto. Eso es para todas esas redes sociales, Facebook, Twitter, y esas cosas. O la imagen, necesita una URL. Podemos elegir una imagen del panel Activos y obtener una URL de ella. Voy a ir con esta imagen. Entonces solo toma la URL y luego péguela en el campo. Lo mismo para la página del blog. No tengo reglas específicas sobre lo que debes poner en el SEO siempre y cuando no esté vacío. El resto depende del negocio y qué mensaje quieren enviar los clientes. Ahora una parte divertida, SEO para la página dinámica. Notarás un enlace adicional en una página dinámica, estos enlaces morados para agregar un campo. Entonces el nombre de la entrada del blog puede ser estático, ¿verdad? El nombre tiene que ser el mismo que el titular de la página de entrada del blog. Podemos agregar ese titular así. Ahí lo tienes. El nombre de la página del blog. Y si haces clic en estas flechas, podrás pasar fácilmente por diferentes posts. Podemos agregar cualquier otra cosa al frente o después de este campo dinámico. Y dentro de la meta descripción, podemos agregar un texto de resumen de post. Esa es otra razón por publicar resumen es un campo tan práctico de tener. Y para la imagen de gráfico abierto, podemos seleccionar directamente la imagen desde el CMS. ¿Qué tan grande es eso? Por lo que cada post contará con su propia imagen principal. Eso es todo por el SEO. Hay algunos enlaces que necesitamos para conectar en la barra de navegación y pie Por ejemplo, el logo, es una buena práctica vincularlo a la página principal. Es lo que la gente espera. En cuanto a otros enlaces, no tenemos páginas para ellos, así que tenemos que dejarlos como están, a excepción del blog que ya hemos conectado. No olvidemos el pie de página. También necesitamos vincular ese logotipo a la página principal. Si no ves la configuración del enlace, tal vez solo tengas un logotipo sin un bloque de enlace. Solo los elementos de enlace se pueden conectar a otras páginas. Entonces, si te lo estás perdiendo, solo agrega un nuevo blog de enlace y solo deja caer tu imagen dentro. Ni siquiera tienes que agregar una clase al enlace, edita los ajustes directamente. Excelente. Este es un buen momento para revisar todos los enlaces en modo de vista previa y ver cómo se ve todo eso en diferentes pantallas. Me encanta el resultado. Es un sitio web guapo, rápido y sólido. Ahora vamos a encargarnos de la compresión de la imagen. Este es un paso importante porque todas nuestras imágenes son bastante grandes en tamaño de archivo, y eso hará que los sitios sean más bajos. Vaya a activos, expanda el panel, seleccione todos los activos y presione comprimir. Algunas de las imágenes no serán seleccionadas para compresión, y eso está bien porque algunas de ellas están en formato SVG y no necesitan compresión. Queremos mantenerlos en SIG. Dale algo de tiempo y recibirás una notificación cuando todas las imágenes hayan sido comprimidas. Ahora bien, estas eran imágenes en nuestras páginas estáticas, pero también tenemos un montón de imágenes dentro del CMS. Hay imágenes tanto dentro los autores como en la colección de publicaciones de blog. Podemos hacer la compresión desde aquí, y esto comprimirá todas las imágenes de una sola vez dentro de todo el CMS en ambas colecciones. Esto llevará un poco más de tiempo ya que hay muchas más imágenes, pero no tenemos que esperar aquí. Simplemente podemos continuar con los pasos restantes. Bien, antes de presionar publicar, vayamos a la configuración del proyecto Tenemos que subir un favican tal como lo hicimos la última vez Recuerda cómo lo hicimos, tuvimos que crear un favican y un clip web iconos en El favicon y el clip web deben crearse en tamaños precisos, 32 por 32 para el favicon y 256 por 256 Así que vamos a dibujar un marco que sea exactamente 256 por 256. Entonces dale algo de color. Entonces radio de esquina. Crea un pequeño icono a partir del logo, y eso servirá. O para las fabricas necesitamos exactamente 32 por 32, pero no podemos simplemente cambiar el tamaño del marco ya que es porque el texto interior no va a escalar correctamente Sin embargo, la herramienta de escala está hecha exactamente para tales propósitos de cambio de tamaño. Podemos ingresar nuestras dimensiones deseadas y todo se escalará proporcionalmente. Eso es. Ahora expórtelos en PNG en una X y cárgalos debajo de ajustes laterales. Asegúrese de que las dimensiones sean correctas, o arrojará un error. Y eso está todo hecho. Ahora podemos golpear publicar en el dominio Webflow Y ese es nuestro pequeño y elegante sitio web. Echemos un vistazo a todo, asegurémonos de que funcione correctamente. A continuación, vamos a probar formularios y ver cómo se gestionan los envíos de formularios en weblo. Quédate alrededor. 151. Publicación: Presentación de formularios: Y. Ahora vamos a hacer una prueba a nuestros formularios. hemos hecho una forma bastante simple Esta vez hemos hecho una forma bastante simple, solo una dirección de correo electrónico. Podemos volvernos bastante locos con los formularios en Webflow, pero ya sea un formulario rellenado simple o un formulario rellenado en múltiples pasos, todos funcionan igual La sumisión fue bastante bien. Este es un comportamiento predeterminado. El envío ocurre justo en la página. Al actualizar la página, entonces este mensaje se ha ido y podemos enviar el formulario nuevamente. No nos limitamos a esta versión. También podemos redirigir a los usuarios a una página diferente después del envío, como a una página de agradecimiento o una página de confirmación, lo que sea. Todo lo que tenemos que hacer para eso es construir esa página en Webflow y agregar la URL en la configuración del formulario Podemos enviar envíos automáticamente por correo electrónico. Podemos proporcionar una dirección de correo electrónico de una persona que va a recibir envíos. Por lo general, la dirección de correo electrónico de tu cliente, y ellos recibirán un correo como este. Me encanta que Webflow también se encargue de esto, y no tengo que conseguir un plugin o instalar alguna aplicación de terceros para administrar las notificaciones y todas esas cosas. También podemos personalizar estas notificaciones por correo electrónico cuando nuestro sitio tiene un plan de alojamiento. Bien, ahora, veamos qué pasó con nuestro envío de formularios. Vaya a la configuración del proyecto y haga clic en el Formulario Puñalada. Ahí es donde verás la presentación. Hay mucho que podemos hacer con estas presentaciones. Podemos eliminar. Podemos exportarlo a CSV. Otra cosa que podemos hacer es integrar los envíos de formularios con otras aplicaciones. Por ejemplo, a herramientas de marketing por correo electrónico como Mailchimp, se pueden enviar nuevas presentaciones a estas plataformas de marketing por correo electrónico donde tus clientes pueden hacer lo suyo con él y lanzar nuevos boletines de correo electrónico y material promocional y todo eso Y eso es todo lo que hay para formar envíos. 152. Introducción al freelance: Han pasado por algunos aprendizajes pesados hasta ahora. Gran trabajo. A estas alturas, tienes una experiencia práctica bastante buena con Figma y Webflow Puedes asumir un proyecto real e ir desde el encuadre de alambre hasta el diseño y luego construir toda la enchilata Eso no quiere decir que sepas hacer todo. Tampoco sé cómo hacer todo, especialmente cuando las tecnologías web cambian constantemente. Sigues aprendiendo. Cuando un cliente me pide que haga algo que nunca he hecho, me pongo en línea y suelo buscar videotutoriales si tal existe. Si no, entonces pregunto en foros. Y a veces, la mayoría de las veces, en realidad, alguien ya me ha preguntado algo similar y ya puedo encontrar una respuesta en algún otro foro o en el WebFlowsFM en realidad, que es una Ya mencioné esto, sí regístrate y ve a Webflos y cada vez que tengas una duda, siempre acude a la Comunidad Webflos y encuentra respuestas ahí porque hay cada vez que te quedas atascado, Voy y construyo una solución para el cliente. Ese es un flujo de trabajo diario de diseñadores web. Nunca dejas de aprender. Pero lo importante es que tienes la base suficiente para asumir proyectos reales. Y eso es lo que vamos a enfocar en esta parte del curso. Conseguir trabajo. Los conceptos que aprendas también pueden aplicarse al trabajo a tiempo completo, pero principalmente nos centraremos en el trabajo freelance Vas a aprender sobre estrategias de precios, propuestas, plataformas independientes y otros lugares y otras formas de encontrar trabajo Y te vamos a conectar con un increíble sitio web de portafolio. Así que vamos a ir. 153. Sitio web de portafolio: Tener una compañía con dos de mis amigos, e hicimos mucha contratación allá por los días. Y lo que la mayoría de los candidatos harían es que se subvenderían a sí mismos Ellos venían y decían, ¿sabes qué? Oh, sólo soy un principiante. No tengo mucha experiencia, ya dah dah, pero, ya sabes, soy un aprendiz rápido Pero mi conclusión como tu potencial empleador es que apestas. ¿Cómo lo sé? Eso me lo dijiste. Empezar en cualquier profesión nueva es difícil, porque la gente sí quiere contratar profesionales. No quieren principiantes, quieren profesionales. Esa es la verdad. Pero aquí hay un gran error que comete mucha gente. Piensan que ser un profesional es alguien con años de experiencia, para nada. Un profesional es alguien que se toma en serio su trabajo, alguien que parece que puede hacerse **** y alguien que quiere brindar un puede hacerse **** y alguien que quiere brindar gran servicio a sus clientes o empleadores. Entonces, ¿cómo te haces ver como un profesional? Para empezar, tienes que mostrar lo que puedes hacer. Y en el diseño web, eso se hace con un portafolio. Ya has diseñado y construido dos proyectos en este curso, y eso ya es algo para mostrar. Pero mi recomendación sería hacer un proyecto más desde el diseño hasta la construcción fuera de este curso. Eso te va a dar tres piezas de portafolio, y eso es suficiente para que salgas ahí fuera y empieces a solicitar puestos de trabajo. Y lo más importante, hacer otro proyecto independiente te va a dar práctica y experiencia fuera de este curso guiado. Pero las piezas de cartera no son suficientes para parecer un verdadero profesional. Necesitamos un sitio web de portafolio porque ¿qué opinas? Un diseñador web profesional no tendría su propio sitio web personal? Pero te sorprendería una gran parte de diseñadores web, realidad no tienen su cartera en plataformas como manos B o driblar, y eso es lo que comparten con sus clientes potenciales, enviando el enlace a su perfil con todo el trabajo de cartera subido. Yo nunca hago eso. Primero, eso no me hace parecer un profesional. Como diseñador web independiente, eres esencialmente un negocio que brinda un servicio a tus clientes, ¿verdad? Y ningún buen negocio haría alguna vez algo así. Es como ser un fotógrafo profesional con portafolio solo en Instagram. Quiero ser un fotógrafo profesional que tenga su propio estudio fotográfico, no solo perfil de Instagram. Y segundo, los estoy enviando a un lugar con otros buenos diseñadores. Eso es sólo una mala idea. Yo les estoy ayudando a encontrar a alguien más. Estoy mostrando mi trabajo junto al mejor trabajo de diseño del mundo. Y aunque yo fuera el mejor candidato disponible para ellos, ya no me veo tan bien. Mi obra no se ve tan impresionante junto a la mejor obra del mundo. Y tercero, estoy perdiendo la oportunidad de hacerles un lanzamiento persuasivo con mi sitio web, Puedo mostrarles mi proceso de diseño. Puedo escribir un contenido muy persuasivo y convincente y un derecho de copia para convencerlos de que, ya sabes, deberían contratarme Podría impresionarlos con mi propio sitio web, y puedo incitarlos a tomar medidas para que puedan ponerse en contacto o, ya sabes, enviar un formulario o. No diciendo que no deberías tener perfiles en esas plataformas. A veces incluso puedes encontrar trabajo por ahí, pero no es un lugar para dirigir a tus clientes potenciales también. Además, eres diseñador web. Nunca pensaste en hacer un sitio web para ti mismo. Eso simplemente no parece serio. Es como ser un mecánico de autos que nunca tuvo un auto. sitio web de la cartera puede hacer muchas ventas y lanzamientos por usted Y tuve clientes que me contrataran solo porque les gusta mi sitio web. Ni siquiera pensar o mirar la cartera mis piezas de cartera, simplemente les gusta mucho el sitio web en sí. Entonces, sabiendo por la experiencia personal cuánto puede ayudar un buen sitio web de portafolio, he diseñado y construido un sitio web de portafolio increíble para ti. Esta plantilla para portafolio viene con una advertencia. Hoy en día, hay muchos de mis alumnos que trabajan independientemente en plataformas como Upwork y fibra Muchos de estos estudiantes estarán usando el mismo sitio de portafolio en los proyectos del curso. Si planeas trabajar independientemente en tales plataformas, también, entonces no recomendaría usar esta plantilla de portafolio. Existe una alta probabilidad de que el mismo cliente reciba ofertas de dos de mis alumnos que están usando el mismo trabajo en su perfil. Esto se aplica también a los proyectos del curso. Fuera de los mercados independientes, está bien. El mundo es grande, pero los mercados son más como pequeños pueblos En ese caso, un mejor enfoque sería crear su propio sitio de cartera y un par de proyectos conceptuales independientes. Esa también va a ser una buena práctica para ti. O puede comprar una plantilla de sitio de cartera paga en Webflos También hay plantillas gratuitas, pero claro, las pagas tienen mejores diseños, más opciones y menos oportunidades que muchos otros freelancers en el mercado que usan la misma plantilla Bien, entonces si estas condiciones te funcionan, entonces en el siguiente video, te voy a mostrar cómo instalar este sitio web por ti mismo, cómo agregar tu propio contenido y cómo hacer algunas personalizaciones para que sea más personal 154. Recorrido por el sitio web del portafolio: Te muestro cómo instalar un sitio web y moverlo a tu cuenta de Webflow, déjame darte un recorrido por el sitio web y mostrarte qué es y mostrarte cuál es el diseño pensando detrás de todo eso Parte del contenido que verás en una página es un texto de marcador de posición como este título Y en el siguiente video donde te muestro cómo instalar este sitio en tu ícono de Webflow, vas a reemplazar el contenido genérico con tu información personal El sitio web es bastante simple, la forma en que se supone que son los sitios web de cartera. Tenemos solo dos páginas, una página principal y páginas CMS para cada proyecto. El contenido del sitio web está en una narrativa en primera persona. Esta es una especie de estilo que me encanta para los sitios web de cartera. Si estoy mirando el portafolio de alguien, me interesa la persona detrás de él, así que quiero ver una interacción amistosa poder sentir la personalidad de la persona. También quieres ver una información clara de lo que haces, ¿cuál es tu especialidad ¿De qué trata este sitio web? Lenguaje directo claro. ¿Puedo trabajar contigo? ¿Estás disponible para trabajar? ¿Cómo puedo trabajar contigo? ¿Cuáles son los pasos y demás? También, escaparate muy directo de la cartera. Algunos sitios web de cartera lo tienen en una página separada, y eso es demasiado trabajo. Tengo que encontrar un enlace, hacer clic en ese enlace, esperar a que la página se cargue de nuevo para finalmente ver su trabajo. Entonces me gusta mostrar piezas de portafolio en la página de inicio instantáneamente después de la sección de héroes. No te mires bien a la cara. La forma en que exhibas tus piezas de portafolio también es importante. Muchos sitios de cartera que he visto tienen una forma creativa muy confusa pero a menudo confusa de mostrar el trabajo pasado A menudo usan solo miniaturas, sin títulos, sin descripción Tienes que llegar a una conclusión por tu cuenta. No genial, haciéndome trabajar. Aquí, como puedes ver, todo está súper claro. Tenemos un título. Si no estamos seguros de qué es esto, hay un título más pequeño que dice último trabajo, no hay manera de confundirnos al respecto. Una descripción del proyecto, que es súper importante porque muchos diseñadores no hacen eso en la página principal. Es posible que los clientes ni siquiera visiten la página del proyecto. Quieren obtener información desde aquí. Y es importante decirles qué tipo de proyecto es este. ¿Lo diseñaste? ¿Fue un trabajo individual, trabajo en equipo? ¿Cuál era tu papel? ¿Para qué sirve el sitio web y así sucesivamente? Quieren conocer esta información esencial para entender qué carajo están mirando he agregado algunas etiquetas para dar información escaneable sobre el tipo de proyectos como desarrollo Webflow, proyecto conceptual, También he agregado algunas etiquetas para dar información escaneable sobre el tipo de proyectos como desarrollo Webflow, proyecto conceptual, decir que es un concepto en una etiqueta es una forma sutil de ser honesto sobre el hecho de que se trataba de un Proyecto conceptual significa que no fue proyecto real pagado lo que hiciste para algún negocio existente o un producto. Pero lo hiciste ya sea por práctica o por este curso o por cualquier otro motivo. Quieres evitar una decepción incómoda más tarde cuando tu cliente te pregunte algo sobre esa compañía de aplicaciones de chat para la que trabajaste Y, por supuesto, bonitas maquetas del proyecto. cómo se muestran las pantallas También es importante cómo se muestran las pantallas del proyecto. Lo que hago sección es exactamente lo que dice. Este es un lugar para dar una descripción más detallada de los servicios que brinda y lanzar un poco más. Aquí hay un consejo profesional de redacción publicitaria. Si quieres escribir copia persuasiva, hazlo sobre ellos. Habla sobre cómo vas a resolver sus problemas y mejorar sus vidas, no cuánto diseñas web y las ideas de maletas de pollo son tu pasión. Por último, sección muy obvia. Si quieren trabajar contigo, ¿cuál es su siguiente paso? Ahora echemos un vistazo a la página del proyecto. Las páginas del proyecto son bastante sencillas, alguna descripción del proyecto y una gran captura de pantalla. Hay muchas formas diferentes demostrar tu trabajo de portafolio, pero este es un estilo que uso en mi propia página web, y me gusta más. algunos diseñadores les gusta hacer un estudio de caso, por lo que tendrán una gran presentación del proyecto y bastante explicación del proceso, metas, desafíos. Básicamente un cuento corto sobre cómo el proyecto llegó a buen término. Este es un excelente enfoque y muestra todo el trabajo que has puesto en él y muestra a tus clientes potenciales el detrás de escena de tu proceso. La razón por la que no hago este estudio de caso es simple. Es mucho trabajo. La cantidad de ventaja no es tan grande, principalmente porque quién es nuestro público objetivo. Como diseñadores web freelance, nuestros clientes, 90% de las veces son emprendedores no diseñadores. Un buen portafolio de lado con capturas de pantalla simples de tu contraseña es suficiente información para ellos. no van a sumergirse profundamente todos modos no van a sumergirse profundamente en el estudio de caso Apreciarán que esté ahí y pensarán aún más de ti, pero la cantidad de trabajo que tenemos que poner en crear el estudio de caso para cada cartera es demasiado. A lo mejor al principio vamos a tener suficientes entusiastas, pero después no lo haremos, y simplemente no vamos a mantener nuestro sitio web actualizado por eso. Ahí es donde nos vamos a fastidiar en el futuro, porque actualizar la cartera va a ser tanto trabajo que simplemente no lo haremos y acabaremos con piezas viejas de cartera, y ese es el peor resultado. Tus diseños cambiarán en pro y generalmente las tendencias de diseño web, por lo que tus diseños más antiguos se verán anticuados y no modernos. Pero si es muy sencillo de actualizar, te animará más a mantenerlo fresco. Entonces la presa del proyecto solo necesita un párrafo de descripción y una captura de pantalla, que puedes exportar directamente desde Figma, es muy fácil El enlace al sitio web en vivo es opcional. Es muy útil para los clientes que buscan el proyecto. Pueden ver el sitio web en acción y jugar con él y ver todo el trabajo que has hecho, no solo capturas de pantalla, sino interacciones y todas esas cosas. A pesar de que tengo una regla sobre esto, solo enlazada a sitios web en vivo de los que estás orgulloso. Los sitios web de clientes reales son organismos vivos, y cuando terminas con un proyecto, el cliente podría cambiar las cosas en el sitio web. Podrían agregar nueva sección, cambiar las cosas por su cuenta, contratar a otra persona para cualquier nueva actualización y así sucesivamente. Entonces, en algún momento, tus preciosos diseños podrían terminar luciendo horrendos, y no quieres mostrar un sitio web que ha sido masacrado al un sitio web que ha sido masacrado Incluso si eres tú quien hace carnicería. Bueno, eso es. minimalista, hermoso Sitio web personal minimalista, hermoso y fuerte para demostrar su trabajo y mostrar a los clientes potenciales su profesionalismo y habilidades de diseño web 155. Instalación de un sitio web de portafolio: En este video, te voy a mostrar cómo instalar el sitio web de la cartera en tu propia cuenta de Webflow Para que puedas hacerlo tuyo, cambiar cosas, editar contenido, incluso personalizar el estilo y publicarlo como tu sitio web personal. He creado un escaparate de este proyecto aquí mismo. Este es un lugar donde los diseñadores de Webflow pueden compartir sus proyectos con otros. Vaya a este enlace para acceder a la página, los enlaces en los recursos de este video. Una vez que estés en esa página, verás este botón de clonar que te permite clonar todo el proyecto en tu propia cuenta. Haga clic en eso. Hay un mensaje de advertencia que dice que podemos crear un nuevo proyecto en nuestra cuenta porque llegamos al límite. Bajo el plan gratuito, solo puedes tener dos sitios no alojados en Webflow Entonces como ya has construido dos proyectos, la aplicación de chat y los sitios web de TeamMP, entonces enfrentarás este problema Tienes tres opciones. Actualice a un plan de pago, cree una cuenta separada o elimine uno de los proyectos existentes. Bien, una vez que resuelvas ese problema de límite, entonces podrás crear un nuevo sitio. Eso es. Ahora tienes tu versión de este sitio web. Ya sabes hacer todo lo que necesitas hacer aquí, pero déjame mostrarte cosas que debes editar. Primero, el nombre. El logo es solo la etiqueta, así que solo pon tu nombre ahí como quieras, si quieres nombre y apellido o simplemente nombre o simplemente apellido, lo que prefieras. También está el nombre en el titular. No te olvides de cambiar eso. Ahí está el nombre en el pie de página así como en el texto de copyright, pon ahí tu nombre y apellido. Por último, hay nombres en los campos de SEO. Página principal de dos lugares y la plantilla del proyecto. Después hay enlaces de correo electrónico en dos lugares. Hay uno en el Navbar y otro en el Pie de Página. Tanto Navbar como footer son componentes como cabría esperar, así que también está sincronizado en la página del proyecto Estos son enlaces de correo electrónico, por lo que debes poner tu dirección de correo electrónico dentro del enlace. Entonces, cuando la gente hace clic en él, se rellena previamente un nuevo correo electrónico con tu dirección. A No olvides cambiar tanto el texto como la configuración del enlace. Eso es todo por la información personal. El resto es contenido que puedes actualizar como desees. O no te sientas libre de mantenerlo como está, pero darle un giro más personal sería una mejor idea. Puedes darle a este sitio web tus propios colores personales si quieres. La actualización es muy fácil. Todos los colores son globales. Eso significa que puedes actualizar el color global, y todas las instancias de ese color se actualizarán instantáneamente. Da click en Editar y simplemente elige un color diferente en el mapa o pega el código de color. A Lo mismo que puedes hacer en el color de resaltado. Sea cual sea el color que uses para los fondos, no olvides actualizar las miniaturas del proyecto en consecuencia Son imágenes independientes, por lo que no se actualizan automáticamente con un color global. He preparado el archivo Figma para estas miniaturas para que puedas actualizar y exportar fácilmente otras nuevas más adelante Déjame mostrarte cómo hice este efecto de resaltado para que sepas cómo reutilizarlo si decides hacerlo. El texto resaltado se encuentra dentro de un bloque DV, que tiene elemento de encabezado dentro y un bloque DV regular como resaltado. Highlight tiene un posicionamiento absoluto. Por eso está apilado detrás del texto. Si tienes ganas de resaltar algún otro elemento de texto, simplemente copia todo este cuadro de resaltado y edita el texto dentro. Debido a estos aspectos destacados, este titular no es un texto fluido. Es un montón de elementos independientes en línea sentados uno al lado del otro. Entonces, para mover el orden, es necesario arrastrar elementos alrededor o cambiar el orden en el navegador. Tenga en cuenta que el texto resaltado puede abarcarse en dos líneas. Por lo tanto, intente resaltar máximo dos palabras consecutivas como diseñador web o tenga múltiples cuadros resaltados uno al lado del otro si realmente necesita resaltar más tiempo. El enlace destaca el trabajo un poco diferente. En realidad mucho más simple que los titulares. Es sólo una sombra de caja. Y si necesitas aplicar ese estilo en cualquier otro lugar, solo tienes que seleccionar una clase llamada link amarillo. Y el texto resaltado se agregará con su efecto hover Como probablemente notarás, la página tiene interacciones realmente geniales como esos aspectos destacados en la carga de la página, y esa línea de desplazamiento que se mueve como una serpiente hacia arriba y hacia abajo. Déjame mostrarte dónde están estas cosas. Si vas al panel Interacciones, verás que hay tres interacciones en la carga de la página. Hay interacciones bastante simples. El primero controla esos reflejos. segundo es para el deslizamiento del contenido, y el tercero es para la línea de desplazamiento en el bucle. Probablemente no necesitará editar nada de esto excepto un resaltado porque si agrega algún elemento de resaltado, también deberá agregarlo a la interacción. Por ejemplo, esta nueva caja resaltada no anima. Lo mejor es simplemente agregar texto dentro de los cuadros de resaltado existentes. Pero si realmente debes agregar otros nuevos, entonces esto es lo que tienes que hacer, así el nuevo texto también anima La animación de resaltado es muy sencilla. La caja apenas escala de 0% a 100%. Eso es todo. El estado inicial se establece en escala vertical cero. Y luego cambia a uno, lo que significa 100%. Así que solo crece 0-100% en su tamaño original. Y lo mismo se hace para cada resaltado de forma independiente. Por eso primero corre uno y después el segundo. Entonces, para animar el tercero, selecciónelo en el lienzo y bajo estados iniciales, cuando aparezca este icono más, haga clic en él y seleccione escala y ponga cero debajo del valor X. Pero antes de hacer eso, desactiva este bloqueo porque esto es preservar relación de aspecto y no queremos eso. Queremos que se encoja y crezca solo horizontalmente. Ahora necesitamos agregar un estado final, que es volverlo a crecer a uno, y vamos a agregar eso al final. ¿Por qué? Porque queremos que se anime uno tras otro, no al mismo tiempo Nuevamente, desactive el candado y ponga uno por debajo del valor X. Reproduce la animación para ver cómo funciona. Trabajando bien, solo necesitamos igualar la flexibilización con los demás. Estoy usando out quad y 0.6 segundos. Así que revisa la vista previa. Yo soy perfecto. En cuanto a otras interacciones, probablemente no necesitarás cambiar nada, pero si lo haces, todos los ajustes son visibles para que veas cómo se configuran y qué hay que cambiar. Para encontrar estas interacciones, es necesario seleccionar un elemento correcto. Entonces la interacción aparece en el panel. interacciones que se activan por la carga de la página aparecen todo el tiempo, sin importar qué elemento haya seleccionado, pero aquellas que tengan un elemento desencadenador, hay que seleccionar el elemento desencadenador exacto. Para encontrar estas interacciones, puedes verlas en el navegador. Todos los elementos desencadenantes tienen este icono de relámpago junto a él. Eso significa que hay una interacción sobre ese elemento. Por ejemplo, envoltorio de botones. Ahí es donde se configura esa interacción de hover para el botón. Bien, lo último importante que necesitarás saber es cómo gestionar los proyectos. Son artículos CMS, por lo que puedes administrarlos fácilmente dentro de CMS. Voy a añadir un nuevo proyecto para que veas qué es qué. Nombre, descripción, bastante sencillo. Hay dos imágenes que necesitarás generar para nuevos proyectos, una miniatura para la página principal y la pantalla completa del proyecto La pantalla completa es sencilla. En figma, ve al diseño de tu página y exporta todo el marco Entonces solo cárgalo al campo correspondiente, pero asegúrate de comprimir la imagen, o va a ser un archivo muy grande. En cuanto a la miniatura, ve a este archivo Figma que he compartido con ustedes, enlace en los recursos Hay una página llamada assets, y ahí es donde puedes crear tus miniaturas Por cierto, verás aquí hay un favican y un clip web Usa esto para que puedas generar los tuyos propios y actualizarlos en la configuración de tu proyecto. Arrastre la imagen dentro. Y colócala como quieras. Y lo mismo para el grupo de atrás. Después exporta la miniatura y cárgala en CMS. Entonces tienes una URL de sitio en vivo. Si dejas esto vacío, Link no aparecerá, así podrás dejarlo vacío sin problema. Asegúrese de activar esta alternancia. Esto es para que el proyecto aparezca en la página principal. He agregado esto para que tengas la opción de deshabilitar o habilitar cualquier proyecto en la página de inicio. Si te preguntas cómo he hecho esto, son filtros. Entonces creé este toggle y en la página principal, luego creé el filtro para la lista de colecciones diciendo que muestran aquellos que tienen activado toggle. Bastante fácil. Entonces tienes estas tres etiquetas que aparecen bajo el título. Y eso es todo. Una vez que guardes, ve a la página de inicio, podrás ver que el nuevo proyecto va a aparecer encima de los demás. Y enlaza con la página del proyecto, que también está lista. Eso es todo lo que necesitas hacer para agregar más proyectos. Por cierto, estos proyectos en la página de inicio son una lista de colecciones. ¿Recuerdas esos? El contenido está vinculado a los campos CMS. Además, la lista de colecciones tiene un orden de clasificación aplicado a la misma. Lo he configurado del más nuevo al más antiguo basado en la última vez que se actualizó el elemento CMS. Si quieres cambiar este orden de clasificación a otra cosa, puedes hacerlo aquí, como el más antiguo al más nuevo tal vez. Bueno, esas son todas las cosas importantes que debes saber sobre este sitio. Si te quedas atascado, avísame y te ayudaré. 156. Cómo encontrar trabajo en línea: Para trabajar y dónde encontrarlo. Hay muchas maneras para que un diseñador web independiente encuentre trabajo La primera y obvia opción, que son plataformas online como freelancer.com y obviamente org.com, o localmente en la ciudad donde vives y networking con gente de la industria, networking con las startups, ir a las conferencias tecnológicas, ir a las conferencias tecnológicas, hacer amistad con otros diseñadores web exitosos que pueden mandar trabajo a tu manera porque lo que sucede tu manera con los diseñadores web es que estén completamente reservados porque, ya sabes, un diseñador solo puede hacer un sitio web a la vez, ¿verdad? No se pueden hacer diez, 20 sitios web simultáneamente. Así que los buenos diseñadores obtienen libros muy fácilmente, y lo que sucede entonces envían trabajo a sus amigos o alguna otra gente que recomendarían a sus clientes y así sucesivamente. Además, LinkedIn y bolsas de trabajo regulares como Supercruter, hay formas más que suficientes de encontrar Y si buscas esto en Google, encontrarás cada vez más opciones. La pregunta es, ¿cuál de estas opciones es el lugar perfecto para que busques trabajo? Cosas como tu habilidad actual, tu personalidad, o tu experiencia, donde vives, la ciudad que vives. Todas esas cosas determinarán cuál de estas opciones va a ser la opción perfecta para ti en esta etapa. Te puedo decir cuál va a funcionar mejor para ti. Nadie puede, pero el mejor enfoque es simplemente elegir uno a la vez y simplemente pasar por la lista. En este video, voy a hablar sobre las plataformas online y encontrar trabajo en plataformas online. Te voy a dar una visión general de los más grandes. Hay muchos de estos. Hay Upwork, hay fibra, hay freelancer.com. Personas por hora, azulejo superior, y así sucesivamente. La lista es interminable. Y si lo buscas en Google, vas a encontrar cada vez más. Y cada año, obviamente, van a aparecer más y más de estas plataformas. La competencia cambia a medida que algunos de ellos caen de su primer lugar, y otro los reemplazará o surgirán otros nuevos. Primero, Upwork. Aquí es donde encontré mi éxito. Encontré suficiente trabajo en Upwork para estar ocupado a tiempo completo. Upwork es enorme. Es una empresa pública, es decir, cotiza en bolsa de valores. Creo que es la primera plataforma de freelancing que se hace pública. Aquí abundan los empleos, lo que significa que la competencia es Tengo un video dedicado sobre Upwork y cómo tener éxito en él, así que lo cubriremos con detalle ahí Te enseñaré algunas estrategias sobre cómo tener éxito y algunos errores comunes a evitar. Entonces tenemos Fiber, que es ligeramente diferente en Upwork clientes publican trabajos y freelancers pujan, pero en Fiber, los freelancers publican servicios y los clientes los compran directamente Por ejemplo, este freelancer aquí dice que diseñará un sitio web Webflow receptivo por $200 Y ofrece tres paquetes diferentes, básico, estándar y premium. Me gusta bastante este enfoque basado en servicio en fibra. De hecho, he hecho mi primer trabajo independiente en fibra. Esto fue hace un tiempo. Reanudé los diseños por cinco dólares. aquel entonces en fibra, ese es el precio que solo podías cobrar cinco dólares y ofrecer algunas mejoras. Pero como precio base por cada servicio que se listaba había cinco dólares, de ahí el nombre de fibra. Han cambiado su enfoque desde entonces y ahora puedes poner el precio de tus servicios a lo que quieras. A menudo he contratado freelancers en fibra para hacer trabajos rápidos y pequeños de traducción, edición de video y cosas así Como cliente, es genial simplemente comprar un servicio que sea como un producto terminado completo. Sin negociaciones y todo eso. Por, enviar detalles, esperar un par de días para obtener resultados, y listo. Incluso establece fechas de entrega específicas que debe cumplir después de tener toda la información y activos del cliente. Entonces, si tuviera que crear un servicio de diseño web aquí, esto es probablemente lo que haría personalmente. Yo diría, voy a construir un sitio web para un tipo específico de negocio. Por ejemplo, un sitio web para autónomos o un sitio web de cartera o contadores, etcétera. Voy a crear muchos de esos trabajos. Así es como se llama aquí, entonces crearé un par de plantillas o simplemente usaré plantillas de Webflow marketplace Hay muchas plantillas hermosas vendidas en Webflow, e incluso hay plantillas gratuitas bastante geniales Yo contaría el costo de la plantilla en el precio total, tal vez usaría plantillas gratuitas para precios básicos, y luego habría pagado plantillas bajo precios premium. Y entonces cuando la gente compraría mi trabajo, yo les haría elegir qué plantilla quieren y ofrecen color, tipo u otras personalizaciones basadas en su marca De esta manera, los clientes saben por adelantado lo que están obteniendo. No hay discusión sobre diseños, y no tengo que diseñar y construir un sitio web completo desde cero. Estoy simplificando groseramente el proceso aquí, por supuesto. Podría hacer un curso entero justo sobre esto. Ten en cuenta que estarías creando un servicio completo listo para tus clientes. Tendrás que pensar mucho en ello para crear un paquete realmente agradable, y tomaremos un poco de prueba y error hasta que lo hagas bien. De hecho, esto es exactamente lo que estaba haciendo con los diseños de currículum. Les estaba dando alrededor de cinco plantillas de currículum para elegir. Ellos lo elegirían, entonces yo llenaría sus datos y hecho. Nadie tuvo ninguna queja sobre el diseño porque sabían lo que estaban obteniendo por adelantado Entonces tenemos LinkedIn. Esta no es una plataforma típica de trabajo independiente como Upwork o fibra Funciona de manera bastante diferente. En LinkedIn, los clientes no suelen publicar pequeños trabajos independientes y esperan ofertas. En cambio, se trata más de posicionarse y ser descubierto o llegar a la gente directamente. Aquí hay algunas formas diferentes de trabajar. Primero, puedes usar la sección de empleo y buscar roles como diseñador web o hacer que el propio LinkedIn recomiende trabajos en función de tu perfil. Algunos de estos son roles freelance o contract, pero muchos son puestos de tiempo completo, lo que definitivamente es algo que recomendaría a los principiantes considerar. Como principiante, quieres abrir tus opciones tanto como sea posible y no limitarte al freelancing Si vives en una gran ciudad desarrollada, tus opciones van a ser mejores porque los empleos aquí se inclinan hacia las contrataciones locales Pero también hay opciones remotas , y puedes explorarlas país por país. Aunque tenga en cuenta que incluso los puestos remotos a menudo querrán una contratación local que tenga su sede en el mismo país. Entonces, si estás radicado en un país desarrollado, entonces esto limitará un poco tus opciones. Pero aún así no está por descontarse. Muchos de mis alumnos encontraron trabajos remotos fuera de sus países. La ventaja de buscar una posición más permanente en comparación con el trabajo independiente es que solo necesitas tener suerte una vez Por lo que hasta la estrategia de aguja en el pajar vale la pena probar. Si estás basado en U, entonces este gasto en todo el país limita un poco para ti Para las empresas europeas, la contratación en toda la UE es una práctica fácil y común. Tantos puestos permitirán aspirantes de toda la UE. Pero esta no es la principal ventaja de LinkedTI. La verdadera oportunidad viene de la divulgación. Muchos freelancers en LinkedTin buscan dueños de negocios, fundadores, startups o nichos específicos como dentistas, salones o agencias, y acercan a ellos O pescan publicaciones de otros que buscan un diseñador web o un desarrollo de sitios web, y luego envían mensajes a esas personas directamente. Muchos de mis alumnos mencionan LinkedIn como su fuente de trabajo, por lo que definitivamente vale la pena explorarlo. Si comenzara hoy, definitivamente usaría LinkedIn junto a al menos una plataforma de trabajo independiente Estos tres definitivamente ofrecen la mayor cantidad de oportunidades y deberían ser la primera línea de enfoque para ti, pero hay algunas otras plataformas que vale la pena mencionar. Personas por hora es una especie de mezcla entre fibra y Upwork Los clientes pueden encontrar freelancers directamente buscando habilidades específicas y luego revisando perfiles de freelancers y poniéndose en contacto Además, pueden publicar proyectos al igual que Upwork y freelancer y obtener propuestas de freelancers Y al igual que Fiber, puedes publicar servicios aquí. Lo llaman ofertas en Fibra se llama el gig. He usado PeoplePerHour tanto como freelancer como cliente Yo hice algunos diseños de currículum aquí en aquellos días, y he contratado a diseñadores web y desarrolladores web varias veces aquí. Top tell es un sitio independiente que tiene un enfoque bastante diferente al de otros. Este sitio va a ser un poco temprano para ti en tu carrera, pero todavía voy a tirar aquí para que sepas lo que hay ahí fuera. Top tell tiene un proceso de selección muy riguroso para los freelancers Hacen entrevistas, retos, revisiones de cartera antes de que te acepten en la plataforma. Quieren un talento superior ahí dentro, ahí el nombre top ten. Según afirman, sólo se selecciona el 3% de los aspirantes. Así que considera Toptal una vez que hayas sobresalido en tus habilidades. Esto, por supuesto, significa que los clientes que buscan freelancers en este sitio buscan un servicio premium y no tienen miedo de pagar en consecuencia Entonces, como puedes ver, incluso en plataformas en línea, hay lugares para encontrar trabajo bien remunerado. En general, las posibilidades son infinitas en línea, pero la competencia también es feroz, porque hay muchos diseñadores web por ahí. Es el mundo entero compitiendo por los servicios. Pero no te desanimes. En realidad, la mayoría de los diseñadores web y la mayor parte del talento que está solicitando trabajos que están en estas plataformas, son terribles. Ni siquiera son mediocres. Están por debajo de mediocres. Los clientes también tienen dificultades para encontrar un buen talento. A menudo mis clientes, cuando vienen a mí y estoy ocupado y tal vez estoy completamente reservado y no tengo ninguna capacidad para tomar nuevos proyectos, me preguntan, Bien, entonces ¿conoces a alguien más que puedas recomendar porque fuimos a este sitio y no pudimos encontrar a nadie porque solo hay tanta competencia y hay tanto tipo de ruido pasando por ahí. Que encontrar el talento para ellos es un poco difícil. Y lo que pasa con esta plataforma es que debido a que cualquiera puede unirse y está abierto al mundo y el mundo es jodidamente grande, hay mucha gente que se une sin siquiera tener ninguna habilidad en absoluto Al igual que, la gente va a afirmar que son diseñadores web y que van a hacer cualquier cosa incluso antes tomar un curso de diseño web, ¿verdad? Si te puedes imaginar, cualquier chico o alguien viene aquí y piensan, ya sabes, voy a ganar mucho dinero en línea, y empiezan como, Bueno, hacen diseño web. Acabo de instalar un sitio de espacio cuadrado para alguien o simplemente aprendí a instalar un tema de WordPress. Y ahora soy diseñador web o desarrollador web, ¿verdad? Y para alguien como tú que ha puesto tanto trabajo en ello, y seamos honestos, este curso fue bastante enorme. Entonces, si pones trabajo y si estás trabajando en ello si te lo estás tomando en serio, entonces serás imparable Y si das un buen servicio y entregas un buen servicio y con pulido y proceso que ya has establecido, teniendo una gran página web, mostrando portafolios, y algunos otros consejos y trucos que te voy a enseñar más adelante en esta parte del curso, vas a estar millas por delante de la competencia que solo están metiendo por ahí y con pulido y proceso que ya has establecido, teniendo una gran página web, mostrando portafolios, y algunos otros consejos y trucos que te voy a enseñar más adelante en esta parte del curso, vas a estar millas por delante de la competencia que solo están metiendo por ahí, no sabiendo lo que están haciendo en la realidad, y solo son personas aleatorias en todo el mundo. 157. 151 Búsqueda de estudios de trabajo: Encontrar trabajo en línea no es el único lugar. También tenemos muchos trabajos disponibles localmente. En uno de esos lugares estarían los estudios. Entonces esto serían agencias de marketing, agencias digitales, agencias creativas, estudios de diseño. No lo sé. Hay muchos nombres diferentes que tienen. Básicamente, se trata de empresas que hacen diseño web y trabajo digital para sus clientes. Quienes puedan ser clientes individuales o de la empresa, ¿verdad? Entonces, si son agencias de publicidad, por ejemplo , las agencias de marketing, están siendo contratadas por alguna gran compañía que necesitan una landing page o sitio web. Entonces este tipo de estudios luego contratan, tienen personal interno, ¿verdad? Obviamente, sí tienen diseñadores internos y desarrolladores internos y todo eso. Pero lo que sucede son muchas agencias medianas, medianas, medianas como esa y estudios. Tienen una pequeña cantidad de personal interno y tienen como un ejército de autónomos de Florida Hacen la mayor parte de su trabajo. Entonces así es como funcionan. Mi mayor compromiso laboral fue en realidad con ese estudio y trabajamos durante mucho tiempo y se les envía un montón de trabajo para mí y he aprendido mucho de ellos. Y eso no quiere decir que tengan que ser estudios locales que puedan ser de diferentes países, diferentes ciudades, e incluso continentes diferentes. Yo mismo trabajo con el estudio que estaba en Australia y realmente, muy lejos de donde vivo, que es en Europa y Portugal. Ahora cómo puedes acercarte los estudios dependerá caso por caso, pero aquí tienes algunas estrategias sobre cómo abordarlos Tengo un amigo que es ilustrador y tiene este enfoque. Mientras que una vez le pregunté, ya sabes, ¿cómo consigues tus clientes? Porque no trabaja en plataformas independientes de Florida. Y me dijo que simplemente los spams. Por lo que tiene esta lista de correo electrónico de diferentes clientes potenciales como agencias, empresas, agencias de publicidad están publicando libros o revistas porque esos son el tipo de clientes con los que trabaja. Y cada vez que necesita trabajo, vez en cuando volará correo electrónico usando algún software de correo electrónico. Y básicamente, preguntará por trabajo diciendo como, Oh, ¿ustedes necesitan un ilustrador o algo así? Y no estoy seguro exactamente qué son los usuarios fiscales y cómo se acerca, pero sé que pregunta y pregunta si necesitan un ilustrador Y lo que sucede es más de a veces a la hora exacta, una de estas empresas necesitará un ilustrador para en ese momento exacto. Entonces vuelven a él diciendo que, oh sí, en realidad necesitamos un ilustrador. Lo contratan. Y es un gran enfoque porque esto le ahorra tiempo al otro, al otro tipo. que no tengan que publicar un trabajo en plataformas independientes o donde sea, pasar por diferentes carteras de personas y entrevistarlas más alto que Es muy fácil cuando alguien ya vino a ti en el momento exacto. Cada estudio de diseño tendrá su propio estilo de diseño que hacen en sitios web allí mismo tendremos enfoques específicos con los diseños. Podrían ser un poco más diseños basados en la ilustración podrían ser más fotografía, podría ser más base de tipo y diseño basado en el diseño. Entonces, cuando te acerques a esto, donde decides acercarte a este estudio de diseño, pasa por ahí ejemplos de trabajo y la mayoría de ellos obviamente tendrán su trabajo de portafolio en su página web, los recorrerá y comprenderá y un poco clavado qué tipo de estilo usan en su enfoque, aquellos que coincidan con el estilo o refinen su cartera de una manera están cerrando esa brecha entre su trabajo y su cartera para que coincida lo más posible Porque sabíamos que se aplican a los estudios. Van a ver si tienen menos de lo que son decenas y cientos de candidatos diferentes que buscan. Obviamente van a estar inclinándose hacia y escogiendo a alguien que realmente coincida con su estilo Porque saben que lo harán, fácilmente te conectarás a su diseño, a su flujo de trabajo. Entonces no tienen que entrenarte si eres como un ilustrador y les gustan más los sitios web basados en fotografía, ahora, tendrían que volver a entrenarte sobre cómo hacer fotografía o podrían, necesitarán cambiar completamente y alterar tu estilo de diseño Así que cierra esa brecha entre ahí y tu cartera y aumentarás tus posibilidades de ser contratado por ellos. Cuando dirigía la empresa, teníamos esto de vuelta y vemos publicado en línea y obviamente teníamos un montón de candidatos que lo solicitaban. Pero uno de estos tipos, uno de los candidatos se presentó en nuestras puertas. Acaba de aparecer en nuestra oficina y tenía un currículum impreso y un CV suyo. Y él acaba de entregar esto. Dijo que me va a gustar Ohio. Estaba solicitando este anuncio de trabajo y solo quería entregarlo personalmente a mi CV. Y yo estaba como, me sorprendió mucho pero también muy impresionado al ver a estos chicos un poco de confianza y audacia para aparecer un poco y venir y solicitar el trabajo Y cuando tuve que pasar por 200 solicitudes de empleo diferentes, una persona realmente se destacó obviamente porque te presentaste. Nadie más lo hizo y nadie más hizo nada diferente. Y bastante gracioso, probablemente volcaría su solicitud si no hubiera aparecido porque es CV y su aplicación no era lo suficientemente fuerte y tiene experiencia no fue lo suficientemente buena para lo que estamos buscando. Pero como te presentaste, tu amino memorable y me gusta un poco esa confianza y él es una especie de actitud proactiva y consiguió la entrevista, en realidad se saltó la parte de la entrevista y llegó a la fase final, fase selección final para los otros tres finalistas Y lo consiguió sólo porque se presentó. A veces todo lo que se necesita es simplemente presentarse y entregar su portafolio impreso porque no mucha gente está haciendo eso. Las personas que contratan, están ocupadas y aprecian cualquier paso extra que dé el candidato. Nadie puede acercarte a la oportunidad laboral. Las personas dentro de esos estudios usando LinkedIn y Facebook, definitivamente puedes encontrar personas que trabajan dentro de esos estudios y luego conectarte con ellos directamente o usando otros sitios de redes sociales, probablemente como Facebook, Instagram, Twitter, y enviarles mensajes directos. Yo, yo nunca he hecho esto, pero conozco a muchos freelancers, hacen cosas así Se conectan con personas dentro de ti, incluso aquellas que en realidad están contratando los gerentes o a los fundadores de los estudios. Si eres ese tipo de persona y si puedes conectarte fácilmente con extraños, dale una oportunidad. No soy ese tipo de persona y no me funciona, pero quizá sea bueno para ti. Así que solo tirarlo por ahí como idea 158. Cómo encontrar trabajo: redes: Otra opción obvia pero a menudo pasada por alto de encontrar trabajo es la creación de redes En cada gran ciudad, hay enjambres de emprendedores y startups que se están esforzando y tratando de hacer su negocio funcione y todos necesitan Estás en un muy buen mercado. Cada negocio sea pequeño o grande o internacional o local, incluso profesionales individuales como tú y yo, fotógrafos, entrenadores, organizadores de Cmi, todos necesitan un sitio web ¿Dónde haces la red? Empieza con meet up. Met up, si nunca lo has usado, es un lugar donde la gente organiza diferentes eventos en torno a un tema específico o un tema. Por ejemplo, este grupo, Lisbon UX organiza diferentes encuentros y eventos relacionados con el diseño en mi ciudad. Intérpretes, startups, otros diseñadores, son conexiones bastante valiosas para ti, y a menudo van a meetups como este porque llevan a cabo su propio tipo de meetups y organizan sus propias charlas y talleres y diferentes tipos de eventos que atraen a la multitud adecuada que podrían ser útiles para ti Una vez conseguí un trabajo de un evento como ese. Una vez asistí a un taller sobre cómo estructurar mi sitio web De verdad, en realidad asistí a un taller sobre eso. No es que tuviera que aprender, pero pensé, ¿sabes qué? Va a ser divertido. ¿Y tú qué sabes? Conseguí un trabajo de ello. Incluso si conoces a la multitud Right en mitaps, te darás cuenta de que muchos de ellos no tienen un presupuesto lo suficientemente bueno para pagarte bien por los proyectos de sitios web Es bueno cuando empiezas y estás sacrificando algo de pago por la experiencia y la red, pero en una etapa posterior, no es la mejor opción Un mejor lugar para encontrar peces más grandes son las conferencias, tecnología u otras conferencias relacionadas con startups. Las startups suelen ir a lugares como este para exhibir su producto o encontrar inversores o encontrar clientes para su empresa. De estas conferencias son de pago, por lo que es más adecuado en una etapa posterior una vez que empieces a trabajar como autónomo y puedas permitirte un poco para el marketing Muchas ciudades contarán con incubadoras de startups y puedes comprobar que si tu ciudad tiene tales incubadoras, porque estos lugares como que juntan muchas startups, y luego siempre están organizando diferentes eventos y demostraciones y cosas así, y muchos trabajos y trabajo freelance se pueden encontrar dentro de este ecosistema Y mucha gente que son diseñadores web, diseñadores o desarrolladores, estos son multitud y buenas conexiones para que te desarrolles y crezcas. Y si odias el networking, entonces no lo hagas. Pon tu tiempo y esfuerzo en algo más adecuado para ti y tu personalidad. Yo mismo, no me gusta el networking. Prefiero masticar vidrio que ir a hablar con la gente. Siempre es mejor poner tus esfuerzos en algo que haga clic contigo. Tengo una regla para ti. No hagas nada que te haga odiar el diseño web. Que te guste y disfrutes del diseño web es crucial para tu éxito. Un mejor factor para hacerte rentable y exitoso que cualquier talento o educación universitaria elegante. Y tu disfrute del diseño web depende de muchas cosas a su alrededor, porque al igual que cualquier otro trabajo, hay mucho más involucrado que simplemente sentarse y diseñar, ¿verdad? Ahí está buscando clientes y negociando, enviando propuestas, y todas las reuniones y todas esas cosas. Así que haz que tantas de esas cosas sean agradables, también. 159. 153 Encontrar conclusión de trabajo: Estas son algunas de las muchas opciones que tienes a tu disposición para encontrar trabajo freelance. Quería mostrarte todas estas opciones porque a veces los freelancers olvidan que hay más lugares para encontrar trabajo que solo Upwork No los he cubierto a todos y no podría hacer eso. Los trabajos suelen venir de lugares inesperados, pero esto es lo que debes hacer. Exponete a tantas oportunidades como sea posible. Toca tantas puertas como sea posible, como cualquier otra cosa en la vida, tienes que probar suerte tantas veces como sea posible como lo puso Wayne Gretzky, echas de menos el 100% de los tiros que no tomas Muy bien, a continuación nos sumergimos profundamente en Upwork, nos quedaremos profundamente en Upwork, 160. Información general de Upwork: Los años de trabajar en Upwork como freelancer y contratar a otros freelancers, he acumulado algunos consejos y trucos interesantes que usé para tener éxito en Upwork, y quiero compartir estos consejos contigo para no tengas que perder años de prueba y error y tratando de averiguar cómo hacer que las cosas funcionen en Upwork Así que he puesto todos estos consejos en diferentes videos y los he compilado en diferentes temas. Pero antes de llegar a esos consejos, déjame darte un rápido recorrido por Upwork Así es como funciona upwork. Un cliente publica un trabajo que quiere hacer, como un diseño y construcción de un sitio web para una startup. Dan detalles, a veces un presupuesto predefinido y otras veces sin un presupuesto definido como tarifa por hora. Los freelancers ofertan por el trabajo, enviando propuestas con precios, luego el cliente responde a las propuestas e inicia una conversación con freelancers que les A menudo pueden hacer entrevistas a través de la llamada. Por último, hacen su elección y otorgan el trabajo a una sola persona. El contrato y la facturación se gestionan a través de la plataforma. Si estás trabajando en una tarifa por hora, entonces vas a rastrear el tiempo a través de su aplicación. Todo el tiempo se registra automáticamente y al cliente se factura automáticamente y se cobra automáticamente el método de pago del cliente Esto es genial porque no tienes que preocuparte por la facturación, transferencias de dinero y todo eso. Upwork es de uso gratuito, pero toma comisiones de lo que haces Por ejemplo, digamos que le factura a un cliente un total de $5,000. Upwork se mantendrá 10%. Buscar empleos es bastante sencillo. Puedes buscar trabajos por palabras clave, habilidades o algún otro filtro. Buscar correctamente va a ser importante para encontrar los trabajos adecuados. palabras clave para usted van a ser diseño de sitios web, diseño web, flujo web, página de préstamos, página web, sitio web receptivo, y así sucesivamente. No te olvides de las páginas de préstamo. Esos tienen una gran demanda, y son más simples que los sitios web. En términos de diseño y desarrollo, las páginas de préstamo son todas las mismas páginas web que hemos estado haciendo hasta ahora. Es solo una página en lugar de un sitio web completo. Las palabras clave no son la única forma de buscar. A menudo, no son la mejor manera porque devuelve todo lo que menciona tu palabra clave en cualquier lugar de la publicación de trabajo. La búsqueda de habilidades puede ser un poco más específica en tales casos. Puedes hacerlo desde Búsqueda avanzada. Selecciona una habilidad del menú desplegable y busca, pero una habilidad a la vez, lo contrario, va a buscar trabajos que coincidan con todas las habilidades que has seleccionado. Estas son habilidades que gravan seleccionaron cuando estaban creando el trabajo, por lo que puede ser un poco más preciso que solo palabras clave en la descripción Así es como se ve la publicación de trabajo habitual. Este es un proyecto de tarifa por hora. Se nota aquí mismo. Las descripciones de trabajo en Upwork son la mayoría de las veces bastante malas A menudo no se proporciona mucha información detallada sobre el proyecto. los empleados les vendría bien cierta capacitación sobre cómo publicar descripciones de trabajo adecuadas para atraer a la multitud adecuada. Para postularse al puesto, hay que presentar una propuesta. Así es como se ve el formulario de envío de propuestas. Selecciona las tarifas que te propongas para este empleo. El tipo de facturación lo establece el propio cliente. Entonces, si es facturación por hora, entonces solo puedes proponer tarifas por hora. Para tarifas planas, entonces solo tienes que proponer tarifa plana. Carta de presentación es un mensaje que le escribes al cliente. Aquí es donde intentas hacer ese lanzamiento y convencerlos de que te contraten, básicamente. El resto, como tu portafolio, tus reseñas y todo eso, pueden consultar directamente en tu perfil. Tengo experiencia publicando anuncios de empleo en Upwork, y eso me dio una ventaja que otros freelancers no tenían Yo sabía algo que ellos no sabían. Y así lo harás. Esto es lo que dice un cliente después de publicar un trabajo. Una lista de propuestas de freelancers. Esta es la página más importante donde ocurre la toma de decisiones por parte del cliente. Aquí es donde filtran a los freelancers con los que no quieren trabajar y eligen los que sí Tengo varios consejos geniales sobre cómo tener éxito en esta página y destacar entre la multitud, pero más adelante. El cliente puede ver tu tarifa propuesta aquí, en este caso, por hora, ya que eso es lo que establecí como la facturación del proyecto. Pueden ver sus ganancias de por vida en upwork, sus títulos de trabajo e insignias, que discutiremos con más detalle, y algunas líneas de la carta de presentación Cuando el cliente hace clic en uno de estos, llega a una vista de propuesta, que es básicamente lo mismo que el perfil de los freelancers más la carta de presentación Ahora, todos los demás detalles de tu perfil y la carta de presentación importarán. cliente puede verificar reseñas y calificaciones del trabajo anterior, cuánto ganaste en esos trabajos. Ellos pueden ver su cartera. Estas son capturas de pantalla que puedes subir bajo tu sección de portafolio. Ellos pueden ver tus habilidades. Mantenga estas habilidades genuinas y concéntrese en su dominio. No pongas cosas como Microsoft Word. No te hace parecer un mejor diseñador web, y ellos pueden ver tu historial laboral fuera del upwork si agregas alguno Si tienes historial laboral, es una buena idea agregarlos aquí. La experiencia previa también cuenta y puede ayudar a construir tu credibilidad. Aunque, sea lo que sea que pongas, tiene que quedar bien. Tu trabajo de verano en KFC no va a agregar nada. Y eso es todo. Esa es una visión general de Upwork. 161. Consejos 1 y 3: conseguir que se apruebe tu perfil: Puedes conseguir trabajo en Upwork, primero, tienes que conseguir la aprobación Esto es una especie de mala noticia al principio, pero una vez que te aprueban, entonces es una buena noticia porque eso significa que Upwork está tratando de mantener el mercado agradable y apretado Entonces no está abarrotado, abarrotado de freelancers, porque entonces si hay demasiados freelancers, la competencia es demasiado, y los precios serán Y básicamente, no va a ser un gran beneficio para los freelancers que están trabajando en upwork ni para los clientes porque entonces solo tienen que pasar por tantos freelancers diferentes y demasiada competencia Cuando abres una cuenta como freelance en Upwork, envías tu solicitud, y ellos tienen que revisarla dentro de unos días, y bien aprueban o rechazan Si te rechazan, no te asustes porque puedes volver a aplicar y no hay límite en cuántas veces puedes volver a aplicar a Upwork, y solo mejorarás tu perfil y tu perfil y Y si no funciona y entonces una y otra vez experiencia con este proceso de solicitud no es mucho de lo que hablar. Yo lo hice. Fue aceptado, fin de historia. Pero hay este artículo que voy a enlazar en los recursos, y quiero que leas ese artículo porque hay buenos consejos, y quiero que leas ese artículo antes de aplicar a Apwork Y aquí hay algunos consejos que estoy robando descaradamente de ese artículo Upwork quiere crear un equilibrio en el mercado entre el número de empleos publicados y luego los autónomos que pujan Entonces, cuando este equilibrio algo perturba, y digamos que alguien publica un diseño de logotipo y tienes 1,000 freelancers pujando por ese trabajo, entonces las cosas se van de las manos Entonces, cada vez que se altera ese equilibrio, el upwork cierra la puerta a nuevas aplicaciones Están solicitando esa habilidad en particular. Entonces, por ejemplo, si es digamos diseñadores de logotipos, cierto, y Pork tiene demasiados diseñadores de logotipos, pero no hay suficientes trabajos que se están publicando en esa categoría, entonces van a cerrar temporalmente la puerta a nuevas aplicaciones y nuevos freelancers que vienen dentro de esa categoría Entonces hasta que ese tipo de saldo vuelva a subir. Una forma de evitar que esto le suceda durante su proceso de solicitud es demostrar que sus habilidades se extienden entre muchas categorías diferentes Como diseñador web, automáticamente caes dentro de múltiples categorías. Primero, bajo familia de desarrollo, tienes diseño web y móvil más desarrollo web, y bajo la familia de diseño y creatividad, tienes categoría gráfica y diseño. Y tal vez incluso otros para cosas como experiencia de usuario y el diseño de la interfaz ya que no están listados allí. En caso de que tengas otras habilidades y planeas hacer otros trabajos, tal vez como diseño de logotipo o marca, entonces también puedes incluir eso. Pero no te estires artificialmente porque upwork de vez en cuando, comprueban el nivel de habilidad, por lo que podrían hacer algunas entrevistas donde puedan verificar si sabes y si eres capaz en estas Además de elegir categorías, upwork también te pide habilidades específicas que tengas Enumere tantas habilidades como sea posible, y Upwork tiene esta enorme base de datos de habilidades donde buscas y luego se rellena automáticamente y te da la opción que tienes que seleccionar Por ejemplo, en términos de diseño web, estas son habilidades a las que podrías ir fácilmente. Cosas como diseño web, obviamente, diseño responsive, Figma, flujo web, páginas de préstamo, etc. Solo elijo habilidades genuinas que sean relevantes para el trabajo. No pongas Microsoft Word porque eso no es relevante para tu categoría de trabajo. Te dejaré leer el resto de las cintas de este artículo en sí. Hay cuatro, así que échales un vistazo. Bien, volvamos a mi propio contenido y no robar los consejos de otras personas. No subas trabajos de cartera de este curso. He aquí por qué. Dado que hay muchos alumnos en este curso, y muchos de ustedes probablemente irán a Upwork para postularse, terminarán aplicando con las mismas piezas de portafolio si usan las que ya hemos construido en este y diseñan en este curso Y por casualidad donde es la misma persona que revisa tu solicitud en Upwork, luego para que vean a dos aspirantes diferentes postulando con la misma cartera exacta, eso va a levantar banderas rojas para ambos. 162. Consejos 1 y 3: conseguir que se apruebe tu perfil: ¿Qué es lo primero que dice tu cliente en tu perfil o en tu propuesta? Tu foto de perfil. Tomarán una gran decisión con solo mirar tu foto de perfil. Todos hacemos eso. Juguemos un juego. Rad 1-10 qué competente se ve este tipo. No hace falta analizar solo un primer sentimiento 1-10, qué tan probable es que haga el trabajo. Definitivamente le estoy dando un diez. Está sonriendo, está bien vestido, el fondo es agradable. La foto se ve profesional. Ahora, ¿qué tal este tipo? Diré tres. No he comprobado nada más en su perfil, pero la sangre ya parece que quiere escanearme de mi dinero. Así de poderosas pueden ser las fotos. No tienes que verte guapo o bonito porque no es un concurso de belleza, sino que tienes que lucir confiable y competente. Consigue un tiro en la cabeza realmente agradable y no trates de ahorrar tiempo y entra en el perfil de Facebook y agárralo algo de ahí porque lo más probable es que en tu perfil de Facebook, tengas fotos en las que o te ves genial , guapa o guapa. Y ese no es el criterio a utilizar a la hora de conseguir una buena foto de sombrero, una linda foto de perfil en upwork porque los clientes no buscan que seas, ya sabes, guapo o guapa o que te veas como un chico genial Eso no es lo que buscan. Buscan a una persona competente. Entonces tienes que encontrar una foto donde te veas confiable y competente, así que algo donde estés mirando directamente a la cámara, donde estés sonriendo y preferentemente sobre un fondo liso. Ahora bien, no tiene que ponerse al día en el estudio, obviamente, puedes estar en un fondo de cielo, ¿verdad? Puedes estar en un fondo de algo llano, algo que no está atrayendo la atención y restando atención a tu cara Si solo tuviste 1 hora para preparar tu perfil en Apwork, dedica 45 minutos en la foto de perfil y 15 minutos en el resto Así de importante es la foto de perfil. Y, vamos, es tan fácil. Tenemos teléfonos hoy. Sí, probablemente tengas un smartphone realmente bueno que toma fotos increíbles. Solo encuentra un lugar realmente agradable, vístete bien, cortarte el pelo, tal vez cortarte la barba y obtener un bonito disparo en la cabeza Upwork tiene un proceso de verificación de identidad. Es simple. Necesitas subir tu identificación de gobierno y completar una videollamada con ellos. Una vez verificado, obtendrás esta insignia azul. Esta es una excelente manera de aumentar la confianza en tu perfil con muy poco esfuerzo. Título es lo que se muestra bajo tu nombre. Diseñador web es un título disidente, pero es un poco aburrido Eso es lo que hace la mayoría de la gente, así que nada con lo que te vas a dejar de lado. Agregar un poco de ponche extra va a recorrer un largo camino, por ejemplo, diseñador web experto o diseño web P, diseñador web rápido y eficiente. Cuenta un poco más de ti, pesar de que es un título autoproclamado, aún así destaca. Imagínese que hay dos propuestas. Uno dice diseñador web, y el otro dice diseñador web experto. Serías atraído un poco más hacia el experto. Aún mejor enfoque es mencionar los resultados finales, por ejemplo, impresionante diseño y construcción de sitios web, sitios web de primer nivel, diseño web sin complicaciones. Para ir un paso más allá, incluso podrías mezclar y combinar estos estilos como diseñador web experto, impresionantes sitios web poderosos o diseño web pro, servicio de primera categoría. Estas son propuestas para uno de los trabajos que publiqué, y fue un trabajo de página de préstamo. Ahora bien, ¿cuántos de estos títulos de trabajo coinciden con lo que publiqué? Sólo uno. E incluso tiene la palabra clave más importante escondida en lo profundo del título. Busco a alguien que cree páginas de préstamo. ¿Cómo puedo saber si eres la persona adecuada si no hay mención de páginas de préstamo en tu título? Sí, los desarrolladores web, Wordpress y PHP pueden crear páginas de préstamos. Pero, ¿cómo lo sé? Pedí una página de préstamo. Me das Wordpress como respuesta. ¿Qué demonios es Wordpress de todos modos? No soy desarrollador ni diseñador web. Si lo fuera, construiría mi propia página de préstamos. No estoy familiarizado con tu tecnología y tu lenguaje. Probablemente soy un intérprete que necesita una página para algo. E incluso si estuviera familiarizado con la tecnología y conociera toda la jerga, seguiría queriendo encontrar a alguien que se especialice exactamente en lo que estoy pidiendo Entonces, si estoy preguntando que necesito hacer la página de préstamos, entonces definitivamente me gustaría ir por alguien que esté en la página de préstamos experto o se especialice solo en páginas de préstamo. Si quiero marketing en Facebook, cierto, tal vez anuncios de Facebook, quiero a alguien que sea un comercializador de anuncios de Facebook, no un comercializador digital general. Se trata de plátanos. ¿En qué están pensando? Es muy fácil competir con la mayoría de los freelance Samson upwar Puedes ser el mejor maldito diseñador web que hay, pero si es venta de socket, nunca llegaré a tu cartera. Upwork tiene esta característica llamada perfiles especializados. Entonces tienes un perfil general como un diseñador web, y luego puedes tener un perfil especializado como Webflow o diseñador LandiPage Cuando solicites trabajos que buscan diseñadores de Webflow, entonces puedes usar ese perfil especializado y postularte con él Eso es mucho más efectivo que simplemente postularse como diseñador web y luego necesitar explicar en la carta de presentación que trabajas en Webflow Puede que nunca lleguen a leer tu carta de presentación. Otra información que realmente sobresale de los perfiles es la insignia de puntaje de éxito laboral. Para obtener esta insignia en Upwork, tienes que trabajar con al menos tres clientes diferentes Entonces no hay mucho que puedas hacer al respecto. Sólo hay que esperar. Pero hay algo que podrías hacer. Podrías traer proyectos externos a Upwork para obtener esos requisitos mínimos lo más rápido posible Puedes encontrar personas o negocios en tu red que necesiten un sitio web y hacer un proyecto para ellos. Y podrías darles un gran descuento o tal vez incluso hacer el sitio web por ellos por un precio simbólico muy pequeño cambio de hacerlo en Upwork, hacer todo el proceso en Upwork, y luego darte retroalimentación al final Tipo de situación de ganar ganar para ambos en el principio funciona para ti. Obtendrás algo de tracción y obtendrás estos requisitos mínimos en Upwork, y además, obtendrán un sitio web por un precio muy económico Batch puede mejorar significativamente tu tasa de contratación, por lo que puede valer la pena pasar todo este proceso si estás luchando por conseguir clientes al principio. En caso de que consideres pasar por todo este proceso, he vinculado en los recursos una página de Upwork sobre cómo calculan este puntaje de éxito laboral Lee eso primero para que puedas entender cómo funciona. La fórmula no se comparte del todo porque es secreto de strag, así que no está garantizada cuándo la vas a conseguir Pero dan una buena pauta sobre cómo funciona, para que puedas entender cuándo esperar conseguir esa insignia. 163. Consejos 10 y 12: obtén la insignia de "mejor combinación": Cada puesto de trabajo puede obtener una gran cantidad de propuestas. Aquí hay 15. Eso ya es mucho, ¿verdad? Pero en realidad está en un lado más pequeño. Los clientes pueden obtener más que eso, generalmente de 20 a 50 y a veces incluso más de 50 propuestas. ¿El cliente va a pasar por cada uno? En realidad no. Mantendrán sus ojos puestos en la parte superior. ¿Qué significa eso? ¿Tienes que encontrar la manera de terminar en la cima? trabajo pone los mejores partidos en la parte superior e incluso agrega esta brillante insignia de mejor partido en su propuesta. Eso pone a esos freelancers millas por delante sobre todos los que están abajo Como freelancer, no ves si tienes esta insignia o no, pero los clientes potenciales sí, y siempre debes apuntar a ella. Entonces, ¿cómo consigues esa placa? Nadie sabe realmente cuál es el algoritmo detrás de esto. Upwork realmente no comparte esa información, pero después de analizar las propuestas que suelo recibir, he clavado varios ingredientes clave Cuando crees tu perfil, upwork te pedirá que elijas tu nivel de experiencia Esta misma pregunta se hace a los clientes cuando publican el trabajo. Se puede ver fácilmente ese nivel de experiencia que el cliente ha elegido para el trabajo en particular. Aplicar a nivel de experiencia coincidente. Este es probablemente el factor más importante para determinar este lote. El trabajo que había publicado, estaba pidiendo nivel experto, y la mayoría de las propuestas eran de freelancers de nivel intermedio y de entrada ¿En qué están pensando? Es una pérdida de tiempo para todos. Hay suficientes trabajos en cada nivel, así que aplica a los coincidentes. Si no te gustan los trabajos en tu nivel de experiencia, entonces cambia tu nivel en el perfil. Tan fácil como eso. El segundo criterio más importante parece ser las habilidades. Cuando los clientes publican el trabajo, se les pide que seleccionen las habilidades específicas que buscan en un freelancer. Se les da la misma base de datos de habilidades que has usado en tu perfil, y también puedes ver esta información en el puesto de trabajo. Postúlate a empleos con habilidades de emparejamiento. Por ejemplo, no tengo ninguna de estas habilidades seleccionadas en mi perfil. Entonces, si me postulo a este trabajo, no obtendría un buen puntaje de partido. Así que siempre revisa las habilidades que el cliente ha seleccionado para el trabajo y asegúrate de que también tengas esas habilidades en tu perfil, y coincidan porque eso definitivamente aumentará tus posibilidades de ser el mejor partido. Ahora, upwork solo te permite seleccionar un máximo de diez habilidades Entonces habrá algunas habilidades relacionadas que tal vez tengas que dejar fuera. Pero a veces verás un trabajo que usa exactamente esas habilidades que tuviste que dejar fuera. Lo que podrías hacer en este caso es eliminar algunas y agregar esas habilidades faltantes del trabajo y crear una coincidencia. Esto podría ser un pequeño hack que Upwork podría estar al tanto, por lo que el algoritmo podría ignorar los cambios de perfil de última hora Pero aún así vale la pena intentarlo. Al menos el cliente verá que tienes las habilidades que buscaba. Cuando el cliente está seleccionando el nivel de experiencia deseado de un freelancer, muestra el rango de precios aproximado que se espera. Quieres hacer coincidir tu puja con el rango sugerido por upwork. Si el cliente seleccionó experto y estuvo bien al pagar más de $50 la hora, Upwork no le va a gustar si pujas 30/hora Estás haciendo que tanto tú como upwork pierdan con mayores ingresos. Para saber cuál es el rango de precios actual para tu nivel, casi puedes publicar un anuncio de trabajo para llegar al escalón y verás los rangos de precios más recientes. No se necesita nada para hacer esto. Al final no tienes que publicar el trabajo. Es solo uno de los pasos en el asistente de publicación de empleo. Y puedes hacerlo de vez en cuando para tener los valores más recientes. 164. Consejos 13 y 14: Propón el precio adecuado: Aquí hay algunos consejos sobre precios. Muchos freelancers piensan que los clientes eligen precios más bajos Y si ofertan bajo, piensan que van a verse más atractivos para los clientes, algo así como una ganga. Los autónomos que tienen este tipo de mentalidad, tienen este tipo de gusto y actitud negativos hacia el upwork y estas plataformas independientes, pensando porque ahora todos compiten por el precio, y hay muchos precios, mucha gente compitiendo con el precio, así que todo el mundo está bajando los Pero no podían equivocarse. Si eso fuera cierto, entonces no tendrías a algunos freelancers que se les pagara $500 por hora en Upwork Los sitios web son productos de alto valor. No son como papel higiénico que el más barato obtiene más ventas. Las empresas van a usar el sitio web para su propio negocio para que puedan obtener más ventas, ¿verdad? Va a representar a su empresa, representar a su negocio, y a su marca, por lo que no quieren barato. Quieren estándar, quieren calidad. Y muchas veces están más que felices de pagarlo. Al igual que muchos de nosotros que estamos felices de pagar mil dólares por iPhone, en lugar de pagar 100 dólares por Alcatel. Al pujar bajo, no sólo ganas menos dinero, sino que también ganas menos empleos Suena contradictorio, pero los clientes en realidad prefieren precios más altos ¿Por qué? Porque el precio es una forma de saber si algo es de calidad o no. Sabemos que no siempre es cierto, y nos damos cuenta de eso, pero muchas veces podemos ayudarnos a nosotros mismos, ¿verdad? Entonces usamos los precios como uno de los indicadores para juzgar si algo va a ser de alta calidad o no. Al hacer una oferta baja, estás susurrando silenciosamente a tus clientes que eres de menor calidad Mira esta lista de propuestas. Baja te desplazas más deprimente la situación se ve. Personas menos calificadas, sin calificación, sin empleos anteriores, peor presentación, y también obtienes precios más bajos en la parte inferior. Entonces, estar en el fondo no se ve atractivo para nada. El talento menos experimentado se ordena en la parte inferior. Por lo que los precios más bajos se asocian con una menor calidad con solo mirar esta lista. Esta lista es un claro indicador para el cliente de que debe tener cuidado con los precios bajos. En este caso, los precios más bajos parecen una señal de advertencia, no una ganga. Como cliente, cuando estoy contratando freelancers, odio la pregunta, cuál es tu presupuesto, porque la mayoría de las veces, no sé cuál es mi presupuesto Sé que quiero que se haga algo, pero muchas veces no sé cuánto va a costar. No sé cuál es el buen valor para que pague. Entonces, hacer esa pregunta me pone en este estado confuso donde no sé cómo responder. Pero cuando publicas un trabajo en Upwork, como cliente, y si eliges una tarifa plana, Upwork te va a preguntar ¿cuál es tu presupuesto? Y para alguien como yo que no sabe exactamente cuál es su presupuesto y no le gusta responder a la pregunta, lo que hacemos es intentar escoger el número más bajo que se nos viene a la mente. Lo último que quieres hacer es pagar de más por algo. Entonces, si no sé lo que cuesta algo, iré camino, mucho más bajo en mis estimaciones de lo que realmente va a costar porque realmente no quiero pagar Entonces no quiero decir, ¿sabes qué? Pagaré 2000 por este trabajo. ¿Y si cuesta solo 300 dólares? Entonces voy a asumir que los freelancers van a abusar de mí por mi tipo de poner este alto presupuesto Entonces ahora todo el mundo va a tratar de aprovechar eso, y van a decir, Oh, lo haremos para el 2000, lo haremos tal vez 1,500, y así sucesivamente, donde en realidad, el trabajo apenas cuesta 300 dólares. Entonces, para evitar pagar de más, verás que los clientes a menudo pagarán un presupuesto mucho más bajo que lo que realmente están dispuestos a pagar Y al final del día, estarán bien pagando 203 veces más de lo que proponen como presupuesto. Entonces cuando veas un número en el presupuesto, no lo tomes como 100% verdad, que esa es exactamente la cantidad de dinero disponible que tienen. A veces es verdad, ¿verdad? Entonces los negocios tendrán exactamente esa cantidad de dinero disponible para ese proyecto. Pero muchas veces no es cierto. Son solo clientes sacando números de sus cabezas. Y cuando veas este presupuesto, simplemente ignóralos y proponte ¿cuál es el valor del proyecto para ti? A menos que si ves dentro de la descripción del trabajo que explícitamente significan que ese es su presupuesto superior y eso es lo que van a pagar. 165. Consejos 15 y 16: sé el freelancer que no puedan resistirse: El centro freelance exitoso a menudo no se trata de las habilidades, sino más del servicio que brindas a tus clientes. Puedes ser el mejor entonces diseñador web, pero si a los clientes no les gusta trabajar contigo, si no estás entregando un servicio de alta calidad, no van a volver por más. Porque lo que sucede con los clientes que están contentos es que no solo regresan por más y traen más trabajo hacia ti, sino que también traen a otras personas. Se refieren a sus amigos que suelen ser, empresarios e intérpretes Sus amigos suelen ser otros empresarios y otro intérprete Por lo que sí tienen un acceso realmente bueno para traer más trabajo hacia ti. Gran parte de mis clientes, en realidad son referencias. Al igual que, trabajo con un cliente. Están súper satisfechos porque entrego un servicio de muy alta calidad, y luego están felices de recomendarme a sus amigos. Pero si no entregué un buen servicio, aunque construyera un buen sitio web, pero ellos eran, ya sabes, tal vez fui negligente, tal vez no lo sabía, básicamente pienso en un servicio al cliente A lo mejor yo solo no fui muy amable. Tal vez solo fui grosero o tal vez no respondí a sus correos electrónicos o sus llamadas o algo así. Entonces no van a estar seguros recomendarme a sus amigos porque cada vez que le recomiendes algo a tu amigo, quieres asegurarte de que no vas a, ya sabes, joderlos, bien, que sea lo que sea que les vayas a recomendar, va a ser bueno y beneficioso para ellos Por lo que necesitan estar 100% seguros de que lo que estén obteniendo, lo que sea que recomienden es bueno para sus amigos Entonces aquí hay algunos consejos sobre cómo ser ese freelancer a quien esos clientes siguen regresando por más. ¿Sabes cuál es el único criterio que los clientes nunca pasarán por alto Pueden pasar por alto cosas como tu cartera, tu experiencia previa, tal vez incluso las revisiones de empleo, pero hay una cosa que nunca, nunca ignorarán , y es la confianza ¿Confío en esta persona? Si la respuesta no es 100% diablos sí, entonces no vas a conseguir el trabajo. No importa lo increíble que se vea todo lo demás en tu perfil. Si no confío en ti, entonces todo puede ser mentira. Todo lo que digas puede ser mentira. Todo lo que veo en el perfil puede ser mentira. Todo lo que prometes puede ser mentira, y nunca te confiaré mi dinero y mi negocio. La mejor manera de perder mi confianza como cliente, intenta venderme algo. Si estás tratando de venderme algo, entonces tienes una agenda, ¿verdad? Tienes la agenda secreta que quieres hacer la venta. Y si reconozco que tienes esa agenda, entonces ¿cómo sé que todo lo que dices es verdad, cómo sé que todo lo que estás tratando de hacer es para ayudarme pero no solo para beneficiarte? La solución es muy sencilla. Cambia tu agenda personal de vender a ayudar. Podrías irte, espera un segundo, pero mi agenda es vender mis servicios, ¿verdad? Estoy haciendo negocios. Estoy tratando de ganar dinero. No estoy aquí para hacer obras de caridad o voluntariado. ¿Cómo cambio mi agenda para simplemente ayudar cuando necesito vender? Sé que eso es cierto, pero nada cambia en la realidad. Nada cambia en la superficie. Aún te van a pagar. Aún vas a ganar dinero. Pero todo cambia en el fondo. La forma en que hablas, la forma en que te acercas a tus clientes, la forma en que te conectas con ellos, todos esos pequeños miles de micro decisiones y micro interacciones cambian cuando tu agenda cambia de vender a ayudar. Y no va a pasar desapercibido. Tus clientes confiarán en ti al instante, y eso a menudo importa más que tu cartera. Una cosa increíble y útil que puede proporcionar a sus clientes es aliviar el dolor que están experimentando en este campo. Imagina por un minuto que eres dueño de un negocio que necesita un sitio web y fuiste a estudios de diseño y descubrí que, ya sabes, no puedes pagar sus precios astronómicos para proyectos de diseño web. Entonces, lo que haces, vas a plataformas independientes como Upwork para, ya sabes, freelancer individual que va a cobrar un poco menos Ahora, piensa en cuánta confusión e incertidumbre tienes que lidiar si no eres intérprete que es este campo de este tipo de industria del diseño web o lo que sea. Si solo estás haciendo negocios regulares, entonces probablemente no conozcas ninguna de esta tecnología. No sabes dónde construirlo. No sabes qué es Wordpress o qué es Webflow o HTML o CMS No sabes muy bien cómo juzgar quién es un buen freelancer, quién es un buen diseñador web y quién es un mal diseñador web. Entonces estás lidiando con mucha incertidumbre, y a medida que investigues más, descubrirás en lugar de obtener claridad, en realidad, te estás confundiendo un poco más. Entonces, como puedes ver, los clientes tienen que preocuparse por tantos detalles extraños y poner en riesgo su dinero. Entonces, ¿cómo puedes ayudarlos? Hay varias formas en las que podemos ayudarlos, y una forma es definitivamente decirles y mostrarles que tenemos el proceso, ¿verdad? Todas las cosas que vamos a cuidar de ellos y no tienen que preocuparse por cosas como la tecnología, ¿verdad? ¿Dónde vamos a construir esta cosa? ¿Dónde vamos a lanzar esta cosa como Webflow, verdad No tienen que preocuparse por eso nos encargaron de eso. También podemos explicarles el proceso al igual que nuestro proceso de diseño que tenemos que vamos a pasar del brief del proyecto y luego al wireframing y luego al diseño y luego finalmente construyendo todo en Webflow Entonces podemos explicar que, ya sabes, van a estar involucrados y tener control sobre cada paso del proceso para que sepan lo que está pasando, y no tienen que simplemente comprometer una enorme cantidad de dinero y luego esperar que todo vaya a salir bien porque van a estar involucrados en todo el proceso y tendrán capacidad de tipo de retocar el retocar el camino en curso para asegurarnos de que vamos en la dirección correcta Y de esta manera, ahora pueden relajarse en nuestra asociación porque ven que la tenemos atendida y conocemos el proceso, y podemos guiar este proceso. Y de esa manera, ahora pueden relajarse y no tienen que arriesgarse mucho al trabajar con nosotros. Haz eso y vas a tener que comerse tus manos porque otros freelancers, muy probablemente, no están haciendo esto, ¿verdad No los están llevando a este proceso guiado, pero tú sí. Otros freelancers están ahí para llevarse su dinero, pero tú no. Te dieron la espalda. 166. Consejos 17 al 22: escribe cartas de portada muy buenas: Trabajos, por lo general tienes que enviar cartas de presentación con tus propuestas. Estos son solo un pequeño correo electrónico o un mensaje que le envías a un cliente cuando le estás enviando una propuesta. En las plataformas de apwork y freelance, suele haber un campo que rellenas y lo envías En fuera de las plataformas, ese suele ser un correo electrónico que les enviaste con tu propuesta. Eso es. El trabajo independiente no me enseñó a escribir buenas cartas de presentación Contratar freelancers sí. He tenido como cliente, he tenido experiencia en recibir cartas de presentación que fueron geniales porque me estaban trabajando bien como cliente, y había un montón de porquería que estaba recibiendo que hacía que muchos freelances fueran completamente inhirables Aquí hay algunos consejos sobre cómo escribir cartas de presentación muy buenas. Una carta de presentación que me pone a dormir instantáneamente es donde el freelancer está hablando de sí mismo. Yo publico el trabajo, describo mi problema y la solución que estoy buscando, y tú respondes con lo increíble que eres. Casi todos estos freelancers están hablando de sí mismos Yo soy esto y tengo aquello. Tengo esta cantidad de experiencia, y lo he hecho en el pasado. Francamente, querida, no me importa. Dime cómo vas a resolver mi problema. Háblame del proyecto. ¿Cómo me puedes ayudar? Demuéstrame que eres increíble. No se presuma de ello. Bien, si puedes hablar de ti mismo, entonces ¿qué dices? Muy fácil. Empieza a dar ideas. Imagina que ya te contrataron y empieza a hacer una lluvia de ideas sobre su proyecto. ¿Cómo lo vas a diseñar? ¿Cuáles serían algunas cosas divertidas de hacer? Envía enlaces a sitios web de ejemplo y di que podrías hacer este tipo de interacciones o este tipo de sección de héroes. Nadie hace esto. Si viera una propuesta con ideas y ejemplos, estaría como, Gracias. Esas son grandes ideas. Tú me entiendes. Eso es lo que quiero. Hecho, estás contratado. ¿Qué ejemplos reales? Aquí hay una carta de presentación real que le envié a Appwor que me consiguió un trabajo inmediato sin una entrevista Empiezo enlazando páginas de ejemplo. Tomé plantillas de páginas de préstamo, ni siquiera mi trabajo y le mostré como ejemplos. Le mostré lo que iba a hacer. Ahora puede ver con sus propios ojos y yo le hice la vida más fácil. Entonces le doy un rápido resumen del proceso, cómo iba a hacer todo eso, le dije que se verá bien y se convertirá de manera efectiva Ese es su objetivo, ¿no? Ahora sabe que entiendo su objetivo. Entonces hago algunas preguntas significativas que demuestran que no estoy pintando el cuadro de color rosa, y he considerado los detalles del proyecto Observe cómo solo empiezo a hablar de mí mismo después de todo eso en el mismísimo y donde dice de mí. Hay un poco más, bla, bla, bla, de mí, pero lo he recortado porque hoy ni siquiera haría eso Yo sólo lo mantendría sin ese párrafo. Aquí hay otro ejemplo de una buena carta de presentación que recibí en uno de mis anuncios de empleo. Esta persona tiene más de 50 K ganancias en Upwork, y muestra por qué Va directo al grano. Él es servicial. Incluso me va a mostrar cómo conseguir visitantes para mi página. Entiende mis metas y me hace preguntas significativas. El mensaje es corto y dulce, no perder el tiempo con manojo de pelusa enlatada No intentes ahorrar tiempo enviando de plantilla y cartas de cobertura de lata. Odio las cartas de lata. Al diablo con ellos y a la gente que me los manda. ¿Ahorrándote tiempo, pero desperdiciando el mío? No, gracias. Los buenos clientes notan pueden cartas a kilómetros de distancia, y ni siquiera van a molestarse en leerlas. A veces dentro de cartas de presentación, quieres dar ejemplos de tu trabajo pasado, ¿verdad? Así que muchos freelancers, lo que van a hacer es que van a hacer referencia y vincular su trabajo de cartera dentro del Apwork Pero lo que puedes hacer y porque tienes sitio web, puedes enviarles enlaces a tu sitio web. Ser piezas de cartera en AP Work no se muestran de la manera más favorecedora No obstante, en el sitio web, se ven muy atractivos porque es tu sitio web, son tus cosas, ¿verdad? Todo es un poco organizado agradable. Y tienes un poco más de contenido, y es tu oportunidad de usarlo, ya sabes, para demostrar que en realidad no solo estás trabajando sino que eres un poco muy profesional, tienes tu propio sitio web y tipo de impresionarlos con toda la presentación que tienes Pero solo si vas a publicar ese sitio web en tu dominio personalizado personal, porque mi portfolio slash 123 dot webflo dot IO, no se ve muy profesional, se ve amateur, y no tomo en serio a nadie a ningún freelancer, que me mande su portafolio, que esta on punto Webflow o algo o dot wiggly o wix.com, porque eso no se algo o dot wiggly o wix.com, ese sitio web en tu dominio personalizado personal, porque mi portfolio slash 123 dot webflo dot IO, no se ve muy profesional, se ve amateur, y no tomo en serio a nadie a ningún freelancer, que me mande su portafolio, que esta on punto Webflow o algo o dot wiggly o wix.com, porque eso no se parece te estás tomando en serio tu profesión. Así que Cf sube 15 dólares al mes por el primer mes de suscripción de weblo, y vas a mirar millas por delante de otros freelancers que están en Y solo tienes que pagar el primer mes. Una vez que empieces a ganar dinero, solo se va a pagar por sí mismo. En la página donde un cliente recibe todas las propuestas, ya pueden ver algunas líneas iniciales de una carta de presentación del freelancer. Muchos freelancers empiezan por algo así como querido señor señora. ¿Así se conecta la gente? ¿Querido señor Madame? Suena tan impersonal y simplemente raro. A menudo digo éste. Estimado gerente de contratación. ¿Qué demonios? Gerente de contratación, ¿a quién? Oye, ¿por qué me llamas nombres aleatorios? ¿Y quién habla así? Este es en realidad culpa de Upwork porque en una de sus entradas de blog, aconsejan usar ese gerente de contratación de ciervos, que probablemente fue escrito por uno de sus empleados que nunca ha sido freelancer o cliente porque ese es el consejo más tonto que he escuchado Así que ten cuidado al leer consejos del propio Upwork. Entonces, si puedes decir eso, ¿ entonces qué dices? Bueno, déjame resolver un gran misterio. ¿Qué dices cuando saluda a alguien en tu ambiente de trabajo? Dices querida señora ser o dices: Hola. Hola. Buenos días. Hola ahí. Tan simple como eso. ¿Por qué complicar esto Todos ellos son profesionales y educados, también. No seas raro. Solo sé natural y amable. Eso es todo. Ahora bien, algunos de ustedes probablemente vienen de los países y culturas donde el uso de las palabras, señor está algo obligado a ser educado Esto es, por ejemplo, un caso en la India. Y cuando yo cuando trabajo con freelancers de la India, siempre me llaman, señor. Van, Hola, señor, sí, señor. Gracias, señor. Me sale un poco raro cuando hacen eso No use señor con todos alrededor del mundo porque no es parte de la cultura de todos. Por ejemplo, en Norteamérica, Gran Bretaña y Australia, la palabra señor se emplea en situaciones muy impersonales Por ejemplo, cuando quiere captar la atención de un extraño, como, Oh, discúlpeme, señor, se le cayó algo. Pero el ambiente de trabajo en estos países es más amigable. No hay distancia de estatus honorífico entre las personas por su edad o puesto de trabajo Así que nunca un empleado llamaría a su jefe. Señor, aunque ese jefe fuera Bill Gates, probablemente dirían algo como Bill o el señor Gates, pero no, señor. Entonces te vas a encontrar un poco extraño e impersonal si usas esto con gente que no está acostumbrada a este tipo de cortesía Comprueba de dónde son y úsalo, señor, sólo si se espera en ese país. 167. Consejos 23-25: No te suspendas: Veces que los freelancers son suspendidos o prohibidos de ap work por hacer algo que va en contra de sus términos y condiciones Te voy a dar algunos consejos para asegurarte de que no te encuentres en una situación muy complicada con ellos. Intentar que le paguen fuera de AppoG va en contra de sus términos y condiciones Y si sospechan que has estado tratando de hacer eso, lo más probable es que doblen tu cuenta. Esta razón es simple y llanamente. APOC gana dinero en transacciones y transacciones pago que ocurren entre usted y el cliente Y si intentas sacar esos pagos fuera de la plataforma, entonces ellos no ganan dinero, y los haces enojar. Puedes encontrar más información respecto en sus términos y condiciones, y la cláusula se llama elusión, no circuncisión, y puedes enterarte Esto aplica no solo a los proyectos actuales que obtienes del cliente, sino también a todos los proyectos posteriores que provienen del mismo cliente. Tienen ese periodo de no elusión de 24 meses. Entonces, en el momento en que comienzas a trabajar con los clientes, hay un periodo de 24 horas en el que tienes que mantener la relación en Upwork de ese cliente y recibir el pago en Upwork Entonces hay una especie de disparadores en tu comunicación que pueden levantar esa bandera roja. Entonces porque la mensajería ocurre usando la plataforma de mensajería Aforce, ¿verdad? Entonces en este mensaje, se discuten cosas como pioneras. Estas serían las palabras desencadenantes de bandera roja que instantáneamente disparan esta suspensión automáticamente. Si mencionaste cosas como Payoneer, PayPal, transferencias bancarias, IBAN, cualquier cosa que sea un poco puede estar algo asociada que estás tratando de que te paguen Y no importa aunque el cliente esté iniciando la discusión y quieren que te paguen afuera si lo aceptaste o si eres tú el indicado, si mencionas algo como si o lo que sea, entonces te suspenderán aunque te lo pidan. Así que asegúrate de que si el cliente te lo pide, ya sabes, tomemos esto afuera, di que no, quieres mantener las cosas en Upwork Ahora, la mayoría de las suspensiones ocurren automáticamente. Es solo que si mencionas algo, entonces la IA se activa, ya sabes, y todas esas cosas. Pero a veces tal vez mencionas PayPal no porque quisieras que te pagaran afuera, pero tal vez estés dando un ejemplo del sitio web de PayPal. A lo mejor estás tratando de diseñar un sitio web que sea para la banca o tal vez estés diseñando alguna billetera E o algo que esté relacionado con el financiamiento. Pero entonces está bien porque si te suspenden automáticamente, entonces puedes apelar, y entonces un ser humano echará un vistazo a tu comunicación. Y si están convencidos de que no estabas tratando de que te pagaran afuera, pero estabas discutiendo algo así que era parte del proyecto, entonces va a estar bien. Y levantarán la prohibición. Ahora, naturalmente, si estás discutiendo esto en llamada de Skype o una videollamada que no es parte de Upwork, ¿verdad Sabes, es imposible que Upwork se entere, pero tengo algunas buenas razones para que te quedes realmente en Upwork Al final del día, el trabajo es algo bueno. Permite a tantos freelancers encontrar trabajo. Todos queremos que Upwork gane dinero y no salga del negocio. Y si la mayoría de nosotros sacamos la relación de upwork, algún día, ellos simplemente van a salir del negocio Upwork, el 10% no es tan grande. UDumi, por ejemplo, toma al menos el 50% de lo que hago aquí Entonces el trabajo no es tan malo. Por último, no tener que lidiar con la facturación es increíble. A tus clientes se les cobra automáticamente. Nunca hay que lidiar con facturación y perseguir los pagos Eso ahorra mucho tiempo y molestias. Como freelancer, a veces hay casos en los que sí tienes que perseguir a los clientes para que te paguen a tiempo. Pero con Upwork, es agradable porque su tarjeta de crédito se cobra automáticamente Y si su tarjeta de crédito no funciona bien, entonces el cliente queda suspendido en Upwork, así que tú también lo sabes Eso ahorra mucho tiempo y molestias. No pongas en tu perfil ninguna habilidad que no tengas. Upwork a veces hace una verificación aleatoria de habilidades de los autónomos, y hacen el tipo de pruebas orales y hacen una entrevista con un freelancer para asegurarse que lo que ponen bajo sus habilidades sea Una vez que en realidad mi cuenta se congeló debido a esta verificación de habilidades, iniciaron la verificación de habilidades en mi cuenta, y tuve una entrevista con una persona de servicio al cliente, y me estaban cuestionando en HTML y CSS Y fue extraño porque nunca puse HTML y CSS como mis habilidades, pero supongo que porque estaba bajo la categoría de diseño web, asumen que, ya sabes, se supone que tengo que saber HTML y CSS, aunque nunca aseveré que sabía eso. Por suerte, pude apelar y explicarles que no necesito HTML y CSS para hacer mi trabajo que nunca dije que lo sabía, y ellos entendieron, y descongelaron mi Pero si los tuviera en mis habilidades, entonces me habrían jodido totalmente. La cosa es porque Upwork es una plataforma tan grande y hay tanta gente y tanto dinero se mueve allí, como que también atrae a malos actores, que están tratando de jugar con el sistema y abriendo cuentas fraudulentas y haciendo participar en algunas actividades diferentes de estafa Entonces Upwork es muy diligente al respecto y reprime en muchas cuentas diferentes para asegurarse de que las personas que están ahí, afirman quiénes son, y afirman o que conocen habilidades y puedan realizar lo que tipo de prometen a los clientes Así que asegúrate de que todo lo que pongas en Aork todo sea verdadero y auténtico y no estés tratando de jugar con el sistema porque no tienen una gran tolerancia Entonces aunque algo sea como, ya sabes, tembloroso, solo quita cualquier cosa que no sea 100% verdad 168. Consejos 26-28: No te dejes engañar: El trabajo es grande, muy grande, y hay mucho dinero que se mueve y mucho dinero que se puede hacer. Entonces cuando hay dinero, siempre hay malos actores que están tratando de estafar a la gente. Aquí hay algunos consejos para no ser estafado en Upwork. Nunca hagas trabajos gratuitos o de prueba en Upwork. Ahí está esta estafa dando vueltas donde algunos ********* te piden que hagas trabajos de prueba que tienes que realizar algún trabajo gratis antes de que puedan premiarte un trabajo, así que tienen que ponerte a prueba en tu habilidad o algo así Y lo que hacen es que piden a muchos freelancers diferentes que hagan ese trabajo gratuito, y luego tipo de reunir este trabajo gratuito, y luego usan ese trabajo gratuito para algún otro cliente y tipo de que se les pague por ello, luego sin que ellos mismos hagan ningún trabajo Aquí hay un video de uno de los freelancers upwork que ha grabado una de esas estafas El enlace está en los recursos si estás interesado. Este es un consejo repetido, pero esta vez por otra razón porque no solo porque puedes ser prohibido por upwork, sino que también podrías ser estafado si tomas cosas fuera del Si un nuevo cliente que aún no te ha pagado y no has tenido ninguna relación laboral te pide que lleves cosas fuera de la plataforma para ahorrar dinero o, ya sabes, como que te deshagas de la comisión, entonces las campanas de advertencia deberían ir en tu cabeza al instante. Obviamente, para los clientes, es más seguro mantener las cosas en funcionamiento porque tienen algunas garantías del upwork, Si las cosas salen mal, entonces al menos el trabajo puede intervenir y mediar en la situación Entonces, cuando te piden que tomes cosas de afuera, podría ser de mala calidad, y si algo se ve de mala calidad, entonces probablemente lo sea 169. Precios: ¿cuánto cobras?: Bienvenido al tema aterrador para la mayoría de los freelancers. Precios. ¿Cuánto cobran? Estar confundido acerca de los precios al principio es correcto. Yo también estaba bastante confundido cuando empecé. Recuerdo mi primer proyecto de página de préstamos que hice, cobré $200. Y fue bastante trabajo, en realidad. Estaba prestando diseño y construcción de páginas. Escribí la copia y el contenido de la página de préstamos. Se trataba de comercializar el Proyecto dos. Yo hice anuncios de Facebook, y construí también diseñé banners y anuncios de Facebook banners y anuncios de Facebook e hice todo por $200. Entonces me actualicé a tarifa por hora, y era de $20 por hora, y eso ya era una mejora decente para mí porque a ese ritmo, pude mantenerme completamente por trabajo independiente básicamente a tiempo completo Después me actualicé a $30 por hora, que fue mi tarifa desde hace bastante tiempo. Entonces dupliqué a 60 dólares la hora. Y ahora cobro principalmente tarifa plana y aproximadamente en promedio, $5,000 por un diseño y construcción de un sitio web Actualizar $30-60 por hora fue una de las cosas más desafiantes emocionalmente para hacer por mí Me sentí tan culpable, sobre todo cuando tuve que decirles a mis clientes existentes que iba a duplicar la tarifa que ya estaban trabajando conmigo por algún tiempo. Racionalmente, sabía que tenía sentido, pero emocionalmente estaba sudando de ansiedad Más tarde, entonces me di cuenta de que estaba corriendo dos falsas creencias en mi cabeza. Primero, estaba proyectando mis propios problemas de dinero en los clientes. En lugar de verlo desde su perspectiva, estaba mirando desde la mía, comparándolo con mis propios hábitos de gasto de dinero, sintiéndome culpable porque a mí mismo me resultaría difícil pagar 60 dólares por hora por alguna Segundo, pensar que el precio que cobro está en correlación directa con el nivel de mi habilidad. Entonces, si cobro el doble de la cantidad, ahora debería ser el doble de hábil. Y podrías pensar, pero ¿no es eso cierto? ¿No debería significar mayor precio una mejor habilidad? En realidad, para nada. Aquí está la verdad más importante sobre los precios. La cantidad que cobras depende de quién esté comprando. Ahí está este increíble coach de negocios para personas creativas. Su nombre es Chris Doug, y una vez estuve viendo su conferencia sobre precios, y simplemente me voló la cabeza Me di cuenta de lo mucho que no sabía sobre mis propios precios. Imagina un escenario que dos clientes potenciales se acercan a ti. Ambos quieren un sitio web muy similar, misma cantidad de páginas, misma funcionalidad, algo que va a tomar la misma cantidad de tiempo para que diseñes y desarrolles. Entonces, obviamente, les das la misma tarifa, pero estos clientes no podrían ser más diferentes. El primero es un contador independiente, un tipo pequeño. El segundo es un gran bufete de abogados que gana millones de dólares al año. ¿Qué opinas? ¿Un sitio web vale lo mismo para ellos? Absolutamente no. Un nuevo sitio web podría traer más negocios para ambos clientes, pero más negocios para el contabilizado podría significar 100 dólares adicionales por mes, y para el bufete de abogados, eso podría significar 100,000 adicionales por mes. Mismo sitio web, misma cantidad de esfuerzo de tu parte, pero gran diferencia de valor basado en el cliente. Entonces, sea cual sea la tarifa que le des a estos dos clientes, probablemente sea demasiado cara para el contador y ridículamente barata para el bufete de abogados Terminarás perdiendo los dos prospectos. Se podría pensar, Bueno, al menos el bufete de abogados se entusiasmará por conseguir un precio tan barato, pero no lo serán. Pagar $5,000 por un sitio web que podría traerles 1 millón extra al año, parece poco realista Es demasiado pequeño de un número. No van a confiar en tu trabajo. Pero si ajustaste tus precios en base a quién baja, digamos, hipotéticamente ofreciendo 2000 para el contador y 20 K para el bufete de abogados, podrías terminar prestando ambos trabajos porque los precios sonarían razonables para cualquiera de ellos porque los precios sonarían razonables para cualquiera Steve Jobs pagó 100 mil por el siguiente logotipo. ¿Los logotipos valen 100 K? Para él, lo fue. Para una pequeña startup, no sería así cuánto cuesta un sitio web depende de dos cosas. Primero, ¿quién paga? Y segundo, ¿cuál es el valor que esperan obtener de ello? El valor esperado es un factor importante a considerar también. Imagina el mismo escenario con un gran bufete de abogados, pero esta vez, no necesitan un sitio web para generar nuevos negocios por sí mismos. Solo necesitan un sitio web con un par de páginas y una información de contacto. Esa es una historia diferente. No planean ganar mucho valor de ello, por lo que 20 K puede sonar demasiado para pagar. Probablemente van a pagar más que el contador independiente, pero no tanto como los 20 K. Entonces, para determinar el precio correcto a cobrar por el sitio web, primero hay que entender quién es su cliente y luego entender cuál es el valor que planean obtener de él El valor dependerá de cada proyecto, y puedes averiguarlo haciendo varias preguntas como, ¿cuál es el objetivo del sitio web y qué esperan obtener de ella? En cuanto a los clientes, podemos dividirlos en cuatro categorías. Un cliente privado es alguien que está pagando el proyecto de su propio bolsillo. Entonces esto puede ser profesionales independientes como nosotros, freelancers, consultores o startups que no tienen financiamiento Estos tipos, yo diría, alcanzan un máximo de $2,000, pero si hay mucho valor que ganar de la página web, entonces pueden ir más alto Cuando se trata de tarifas por hora, es un poco más confuso para los clientes entender si algo es barato o caro porque si no sabes cuánto va a tomar algo, no sabes si, por ejemplo, $50 por hora es caro o barato. Tarda dos, 3 horas, bastante barato, pero si lleva 100 y 200 horas, bastante caro. Lo que sucede con las tarifas por hora es que los clientes suelen utilizar su propia experiencia e ideas prehensivas sobre si algo es barato o caro en función de cuánto cuesta por Y utilizan su propio tipo de referencia cultural dondequiera que vivan, cuánto servicios diferentes pagan y lo comparan con ellos. Y mi regla con las tarifas por hora es que nunca vayan por debajo de los 20 dólares por hora porque la mayoría de sus clientes, vendrán de países desarrollados y en países desarrollados, cualquier cosa por debajo de los 20 dólares por hora se acerca muy al salario mínimo. Y el salario mínimo es algo que, ya sabes, se le va a pagar a un conserje Estás ofreciendo servicios altamente calificados y no te deberían pagar con un salario mínimo. Y si te pones el precio como un conserje, entonces vas a parecer un conserje, y vas a ahuyentar a cualquier cliente decente porque nadie quiere que su sitio web sea construido por un Tener estudios y agencias como estudios creativos, agencias de diseño, empresas de TI, y todo eso. Estas suelen ser agencias y estudios pequeños y medianos , porque los grandes, mayoría de las veces tienen su propio personal a tiempo completo y no se involucran y no tienen la necesidad de involucrar a freelancers Cuando se trabaja con agencias, por lo general la tarifa por hora es la mejor manera de ir por dos razones. Primero, es simplemente más simple. No hay que renegociar cada vez en cada nuevo proyecto Y segundo, debido a que las revisiones y proyectos van un poco de alcance de los proyectos básicamente cada vez más grandes, y necesitas hacer un poco más de trabajo porque lo que sucede es cuando diseñas algo y construyes algo, vas a tener personal dentro de la agencia que te dé retroalimentación. Entonces tendrías que hacer las revisiones, y ellos lo van a enviar al cliente, y luego los clientes tendrán sus propios comentarios y sus propios cambios que quieran hacer, y luego vas a tener hacer otra ronda de revisiones. En una tarifa fija, el estudio sí no tiene que preocuparse por estas revisiones, así que van a acumularlo todo si te están pagando por hora, ahora van a tener que ser un poco más conscientes y un poco más cautelosos de la cantidad de revisiones que estás haciendo porque eso está saliendo del pago que obtienen de su cliente final Y por lo general cuando trabajan con los clientes finales, no trabajan por hora. Las empresas no suelen trabajar por base de tarifas por hora, sino que trabajan por proyecto. Así que van a cobrar una tarifa plana al cliente final, y necesitan asegurarse de que lo que cueste no se salga de control demasiado. Y cuando te están pagando tarifa plana, entonces no les importa, y puedes simplemente, ya sabes, trabajar en ello tanto como quieran. En cuanto a la tarifa por hora, realmente depende del tipo de clientes con los que ellos mismos trabajen. Normalmente, yo diría que van entre 20 y 17 dólares por hora Nunca van a ir, creo, por encima de los 17 dólares por hora, entonces en ese caso, para ellos, va a tener sentido contratar a un empleado de tiempo completo y exprimirle lo más posible, ¿verdad Y también depende del país en el que se encuentren, o tal vez la ciudad incluso en la que se encuentren y si están trabajando con los clientes locales o los propios clientes en línea. Porque si están trabajando con los clientes locales, y probablemente puedas averiguarlo fácilmente, entonces eso significa que vas a estar cobrando más, ¿verdad? Porque con los clientes locales, los precios suelen ser más altos porque tienes un número muy limitado de agencias y estudios en la ciudad y estás conociendo a tus clientes, y las cosas van un poco más un nivel superior que en línea porque, ya sabes, grandes corporaciones, no van a contratar una agencia en línea. Van a contratar a alguien que sea local, alguien que puedan conocer, y alguien a quien puedan demandar si las cosas demandan si las cosas salen mal. Si estás negociando con estudios, no tengas miedo de ir por debajo tu tarifa habitual porque el flujo constante de trabajo y la reducción horas no facturables justifica totalmente el descuento que les vas a dar Cuando se trabaja con clientes finales directos, en realidad hay que hacer propuestas, ¿verdad? Hay que enviar propuestas o contratos y negociar y entrevistas y cosas así. Pero cuando trabajas con estudio, solo haces eso una vez, ¿verdad? Y luego cada nuevo proyecto que se te presente, no tienes que pasar por todo este proceso de negociación y entrevista o todas esas cosas porque la agencia en el estudio está haciendo eso con el cliente final ellos mismos Entonces obtienes el proyecto que ya está listo para funcionar y listo para construir. Entonces tienes pequeñas y medianas empresas. Por lo general, se trata de empresas medianas que están ganando dinero o startups que tienen financiamiento. Estos tipos suelen ir probablemente desde 2000 y hasta llegar al máximo tal vez un 1015000 Y por último, tienes grandes empresas con muchos empleados que ganan mucho dinero, y estos tipos probablemente empiezan a los 15 K y más. Pero no tienes que preocuparte por estos tipos porque en realidad no trabajan con freelancers Les gusta contratar empresas y estudios, especialmente los locales. Entonces ahora no hay necesidad de preocuparse por ellos porque nunca he trabajado con ellos, y no conozco freelancers que terminen trabajando con grandes empresas. Vamos a recapitular Así que valoramos en base a quién es nuestro cliente, más valioso el sitio web para ellos, más cobramos por ello. Para entender quiénes son nuestros clientes, necesitamos saber más sobre ellos. ¿Dónde se les paga? ¿Qué esperan obtener del sitio web? ¿Necesitan un sitio web para ellos mismos o son una agencia? Y luego proponer el precio en consecuencia. 170. Fijación de precios: por hora vs. tarifa fija: Comparemos las tarifas por hora frente a las fijas. Ambos tienen sus propios beneficios e inconvenientes. Lo bueno de cobrar tarifa por hora es que es muy sencillo. Realmente no tienes que torcer tu cerebro al calcular cuánto debes poner el precio a un determinado proyecto. Tan solo dale una tarifa y termina con ella. No es necesario negociar cada vez que tengas más trabajo del mismo cliente. No hay que preocuparse de que las revisiones se salgan de control. Más revisiones significa más dinero. Las reuniones y la comunicación pueden llevar mucho tiempo. Algunos clientes pueden querer reuniones de Skype regularmente, pero si también les facturas eso, y deberías, entonces se asegurarán de que no pierdas tu tiempo. Y si lo hacen, al menos te pagarán por ello. Los inconvenientes de la tarifa por hora es que no dice nada para la mayoría de los clientes. Por ejemplo, $100 por hora. ¿Eso es caro o es barato? ¿Quién sabe? Si terminas en 3 horas, entonces es barato, pero si necesitas 80 horas, entonces es caro. También los clientes tendrán una reacción emocional ante ciertas tarifas por hora. Encontrarán ciertas tarifas demasiado caras, aunque el precio final sea el mismo. Podrían estar bien pagando cinco k por el sitio web, pero si les dices 100 dólares por hora, podrían enloquecer. Es más difícil para los clientes decidir porque tarifa por hora hace que sea incierto cuánto será la factura final. A medida que te vuelves más eficiente y rápido en tu trabajo, ganas menos por proyecto. Beneficios de tasa fija es que es más fácil de vender. Los clientes ven un número claro y se sienten más seguros con él. A medida que te vuelves más eficiente, ganas más dinero. Por lo que te da la oportunidad de ganar mucho más dinero por hora sin parecer demasiado caro. No hay límite en lo alto que se puede cobrar, mientras que una tarifa por hora, hay límites mentales. Por ejemplo, 300 dólares por hora va a ser un límite mental para la mayoría de los clientes. Lo malo de la tasa fija es que las revisiones pueden salirse de control si no están claramente definidas. Por ejemplo, dos revisiones gratuitas, y después de eso, aplicando una cierta tarifa por hora. Y cuando tu cliente te pida una tercera revisión, entonces empezarás a cobrarle. Esto a veces puede ser incómodo de hablar. Es bastante incómodo para mí, pero aprendí mi lección cuando terminé ganando un salario mínimo en uno de los proyectos debido a interminables revisiones. Otro inconveniente, calcular es un dolor. Tendrás que poner trabajo extra en cálculo para definir claramente exactamente cuánto tiempo te llevará terminar el proyecto y asegurarte de ponerle un precio rentable. Implica muchas conjeturas, y hasta que aprendes todas tus lecciones por las malas, terminas perdiendo algo Entonces, ¿cuál debes elegir? Al igual que con las cantidades, es una buena idea ir caso por caso y cliente por cline Por ejemplo, con estudios y agencias, su mejor enfoque probablemente sería ir con tarifas por hora. Y cuando se trata de gravámenes finales, entonces probablemente va con tarifas fijas y tarifas planas Debido a que las tarifas fijas son un poco más difíciles de navegar al principio, está bien optar por tarifas por hora para todos Yo mismo tengo una bolsa mixta de burritos. Empecé con tarifa plana, pero luego poco después me di cuenta de que estaba perdiendo dinero porque no estaba estableciendo estimaciones correctamente, y estaba perdiendo dinero en revisiones. Entonces cambié a tarifa por hora, lo cual fue genial, y me quedé mucho tiempo con tarifa por hora porque era simple para mí. Me encanta la sencillez de y entonces ahora mismo tengo algo así como ambas. Con mis clientes a largo plazo, hago tarifa por hora, y luego con otros nuevos, hago tarifa fija. Pero con clientes a largo plazo, hago cada hora porque hago muchos tipos de trabajo diferentes como el diseño de UI, por ejemplo, para aplicaciones móviles, y esos proyectos deportivos pueden llegar a ser monstruosamente grandes y son raros y es imposible y son raros y es imposible de alguna manera ponerle una tarifa plana Entonces yo solo, ya sabes, uso cada hora porque lo hace simple y facilita que uno de los criterios finales a considerar es elegir lo que sea con lo que te sientas cómodo. Porque al final del día, es tu trabajo y tienes que hacerlo todos los días, y es importante que todos los aspectos de tu trabajo sean agradables como sea posible. Y si algo te da ansiedad como lo hizo para mí, entonces está bien sacrificar algo de dinero por tranquilidad y comodidad. 171. Plantilla de propuesta: tarifa fija: Lado de las plataformas independientes, cómo envías propuestas, todo depende de ti Puedes enviarles un correo electrónico, enviarles un mensaje, avisarles por teléfono o enviarles un Cuervo Todo depende de ti. Tú eres el jefe. Algunas opciones son mejores que las otras. Si quieres lucir serio e impresionar a tus clientes, entonces enviar un documento de propuesta adecuado y bien diseñado es el enfoque correcto. Esto es lo que hacen los freelancers profesionales. Para ayudarte a sellar más ofertas, he creado una plantilla de propuesta muy sólida para ti. Se trata de un archivo Figma, el enlace que puedes encontrar en los recursos Como puedes notar, está diseñado en el mismo tema que el sitio web de la cartera. Te va a ayudar a establecer tu marca personal, hacerte lucir más profesional, como alguien que ha pensado en los detalles más pequeños. Al instante te destacarás de la competencia, y destacarte es lo que necesitas si tus clientes tienen múltiples freelancers para elegir Déjame llevarte a través del contenido y explicarte por qué pongo lo que pongo y cuáles son las cosas que necesitarás editar a la hora de generar una propuesta. Encabezado es bastante sencillo. Edita el logo, pon lo que quieras en el titular. Incluso puedes mencionar el nombre de su compañía como propuesta de sitio web de Google. Es un bonito toque personalizado y tus datos y los detalles de tu cliente. Overview es un lugar donde muestras tu comprensión del proyecto que sabes lo que vas a estar haciendo. Les dices tu objetivo y explicas cuál es el entregable final Insertó un pequeño derrame sobre cómo se alojará su sitio web en increíbles servidores Webflow, haciéndolo seguro y súper rápido Este es un buen lugar para lanzar un poco sobre lo bueno que va a ser el resultado final para crear una emoción. No no vendes lo increíble que eres. Quieren un sitio web, no para tener una cita contigo. Entonces tenemos un desglose de precios. Este es un precio de tarifa plana. También he creado una plantilla para proyectos de tarifas por hora. Tiene tabla de precios diferente y algún otro contenido es diferente, también, lo que explicaré después de esto. El desglose de precios muestra diferentes partes de tu trabajo. Si tienes más artículos, puedes simplemente duplicar las filas y agregar más o eliminar como desees. Me gusta desglosar el diseño y el desarrollo en artículos separados. Hay dos fases distintas, y con algunos proyectos, incluso puedes hacer solo una de ellas. Por ejemplo, si ya tienen diseños, entonces solo puedes hacer el desarrollo de Webflow También he añadido algunas cosas extra que están incluidas en el precio. Aumenta el valor que están sacando del precio, como el desarrollo receptivo y la sesión de capacitación. De esa manera, la lista de precios se ve mucho más valiosa y llena de beneficios que un solo valor de $2,500 Se siente como que hay mucho más de lo que están recibiendo. Acerca de estos valores particulares, solo estoy lanzando números aquí, no significa que eso sea lo que debas cobrar. Se puede cobrar menos o muy por encima de este valor. Todo depende de la categoría de clientes con los que trabajarás como discutimos en la clase de precios. Sólo te voy a dar un consejo sobre valores. Utilice valores redondos. No hagas 999. Eso sólo va a parecer estúpido. Tus clientes son conscientes del hecho de que tú eres el que pone estos precios, que no hay ninguna ecuación de precios compleja que estés usando, así que redondea o te vas a quedar tonto. Debajo de la tabla de precios, hay una línea que dice que alojamiento Webflow no está incluido. La transparencia es clave en tales relaciones. No olvides entre comillas mencionar cosas importantes, sobre todo los costos. A continuación, tenemos una línea de tiempo. Esto es algo que los clientes realmente quieren saber. Así que al desglosar tanto como puedas, los clientes están haciendo un gran riesgo con su dinero y tiempo. Ellos quieren tener el control de su proyecto. Entonces quieren saber exactamente cómo van a progresar las cosas, los hace sentir en paz, y confiarán más en ti. Se trata de estimaciones aproximadas. Los proyectos nunca van exactamente con la línea de tiempo prevista. No solo depende de ti, qué tan rápido los clientes te dan sus comentarios sobre cada fase, cuántas iteraciones atraviesas y qué tan rápido proporcionan el contenido necesario va a impactar significativamente la cronología del proyecto A menudo algunas otras tareas se arrastrarán durante el proyecto. Podrían pedirte cosas pequeñas que sumarán al final. Si estás trabajando en una tarifa por hora, entonces eso no es un problema. Pero en el proyecto de tarifa plana, pronto terminarás perdiendo dinero si no dejas las cosas claras sobre lo que va a pasar si hay trabajo extra que está fuera del alcance principal, incluso si son solo reuniones adicionales que te están tomando tiempo. Yo mismo tuve que aprender esto por las malas. Tenía un cliente que quería reunirse casi todos los días. Creo que sólo estaba recibiendo una patada de hablar y de lluvia de ideas Pero para mí, solo estaba tomando demasiado tiempo y no me estaban pagando por ello. Si estableces una tarifa por hora para cualquier trabajo extra, entonces todos serán claros. La última parte son términos. He enumerado algunos puntos importantes para tener claridad sobre la manera en que funcionarán las cosas y evitar posibles desacuerdos futuros Estos términos no son probablemente términos jurídicamente vinculantes. Su propósito es la claridad, así que todos están en la misma página. Por ejemplo, tiene una estructura de pago. Cuando trabaje con extraños fuera de la plataforma, debe tomar algún pago por adelantado Al 25% por lo general es una buena idea. Esta es mi estructura, pero puedes sentirte libre de cambiarla como desees. Y obviamente, puedes cambiar cualquiera de estos términos o agregar los tuyos propios. El formato final puede ser en PDF o incluso puedes compartir un enlace a la vista del prototipo, como lo estoy mostrando ahora mismo, pero creo que PDF es una mejor opción. Ya sabes exportar. Solo tienes que ir al panel Propiedades, Exportar, elegir PDF, y eso es todo. Quiero darte una regla a la hora de enviar propuestas fuera de plataformas. No los sorprenda. Entonces cuando mandas una propuesta y ellos obtienen el valor, y ese valor, si eso tal vez es demasiado para ellos o es caro, les va a sorprender y sorprenderlos un poco y, ya sabes, un poco decepcionarlos Y porque lo pones dentro del documento y como que lo mandaste ya como algo escrito y algo definitivo, entonces no tienen forma oponerse o negociar y tú mismo no tienes forma de dar argumentos y beneficios del precio y decirles y explicarles por qué es bueno vayan contigo y así sucesivamente, ¿verdad? Tampoco tienes capacidad para tal vez negociar y tal vez darles un descuento porque a lo mejor a veces tienes que poner dentro del precio como buffer, ¿verdad? Entonces pones un poco como búfer para asegurarte de que puedes negociarlo si quieren si te piden el descuento, o a veces incluso puedes bajar el precio tal vez quitando número de revisiones o haciendo algo un poco menos o, ya sabes, hay muchas maneras diferentes en las que puedes mover las cosas para disminuir el precio si no pueden permitirse ese valor que les diste. Por lo que el enfoque correcto es hacer la discusión del precio durante la reunión. Al igual que, por fin no tienes que estar de acuerdo en ello, pero lo que puedes hacer, algo importante es darle algún tipo de rango de estadio de béisbol Así que no se sorprenden cuando les das un valor final. Y lo que puedes hacer durante la reunión es esto es, por ejemplo, lo que hago yo. Tengo una reunión como si fuera una reunión por skype o una reunión cara a cara. Y cuando vamos a la reunión, hago muchas preguntas sobre el proyecto, y ya tengo algún tipo de pre valor en mi cabeza con el que estoy dispuesto a ir. que tengo esta gama, que es como un mínimo por el que estoy dispuesto a trabajar y como un precio ideal que quiero sacar de él. Una vez que hago las preguntas, entiendo que si el sitio web es como una o dos páginas o si el sitio web es quizás un sitio web grande con, ya sabes, 25 páginas diferentes o un blog o algo así. Y como que se me ocurre un rango que tal vez sea algo así como mínimo $4000-6 mil, y luego les doy ese Y si tienen algún tipo de objeciones a ello, lo discutiremos, y yo soy capaz de dar beneficios y decirles, ya sabes, por qué esta es una buena opción para ellos y por qué el precio realmente vale la pena Y si no lo hacen, por ejemplo, a veces puede ser que les dé un valor, y esperaban algo menos de mil. Ahora sé que solo fuimos un mal partido y, ya sabes, no voy a hacer un trabajo de sitio web para un sitio web grande, menos de 1,000. Entonces no tengo que molestarme en crear la propuesta y enviar correos electrónicos, todo. Entendemos instantáneamente que estamos realmente en un juego diferente aquí, y no somos un buen partido, así que ahorro mucho tiempo. Pero si todavía estamos en esta fase correcta, entonces podemos negociar si es necesario. Pero si el precio también suena bien, entonces una vez que termine con la reunión, entonces preparo la propuesta, y probablemente pondría algo así como $5,000 para el sitio web, y ahora están esperando ese precio y no se sorprenden, y tenemos un trato 172. Plantilla de propuesta: tarifa fija: En cuanto a la propuesta de tarifa por hora, Mismos diez jugaron en su mayor parte. La primera diferencia está en la tabla de precios, por supuesto, mucho más simple, solo una tarifa. A veces es posible que desee tener diferentes tarifas para diferentes tareas. Entonces puedes agregar una prima extra y poner una tarifa diferente para ese servicio. Una vez lo hice con mi primer cliente Webflow. En su momento, no tenía mucha experiencia en desarrollo y Webflow Yo acababa de hacer dos proyectos de práctica, pero tenía una sólida experiencia en diseño, y sabía que no sería muy rápido en Webflow Por lo que di una tarifa con descuento para la fase de desarrollo para que fuera justa con mi cliente. He agregado un párrafo aquí para explicar cómo funcionarán las cosas, por ejemplo, diciendo que les facturará cada dos semanas por el tiempo registrado durante ese periodo. Eso depende de ti y de tu cliente cómo lo arreglas. Si quieres, puedes facturar una vez a la semana o una vez al mes. También he realizado algunos cambios en términos, como la estructura de pago y la política de cancelación. No utilice estos términos como asesoría legal. No soy abogado, y tampoco he creado estos términos con base en cualquier marco legal. Es para usted y su cliente tener una comprensión clara de algunas cosas importantes. Hablaremos de contratos en el video posterior. Al trabajar con tarifas por hora y fuera de plataformas, tendrás que usar una herramienta de seguimiento de tiempo. El que uso es Top Tracker. He probado muchos, y este parece ser el mejor, sobre todo porque es completamente gratis. Al menos por ahora lo es. Cuenta con una aplicación de escritorio. Una vez que lo abro, todos mis proyectos en curso están ahí, luego selecciono el proyecto y empiezo a rastrear. Tan simple como eso. Rastreo todo lo relacionado con el proyecto. No tiene que ser solo diseño y desarrollo, reuniones, comunicaciones, etc. Eso es todo parte del proyecto. Pongo el enlace a Top tracker en la sección de recursos bajo productividad, más herramientas freelancing que se encuentran ahí Por ejemplo, WAV, eso es lo que utilizo para facturar, de nuevo, también son herramientas de propuestas en línea Por ejemplo, el Bonsai aquí tiene una característica de propuesta. No utilizo estas herramientas de propuesta online porque Figma, puedo diseñar mi propuesta como quiera, haciéndola encajar en mi marca y en general tener más flexibilidad Pero con estas herramientas, tengo que apegarme a sus plantillas. En caso de que quieras darles una oportunidad, aquí están. Y esa es tu plantilla de propuesta. Úsalo, adáptalo como quieras. He puesto aquí cosas que uso yo mismo y lo que he aprendido a lo largo los años de cometer algunos errores con los clientes y meterse en algunos malentendidos Puedes usar mi experiencia como tu ronda de partida. 173. Contrato de freelance: Sorpréndete, pero en realidad no hago contratos con mis clientes. No puedo molestarme con eso. Hace que las cosas sean demasiado serias. Y aunque las cosas salgan mal, probablemente nunca voy a buscar ninguna acción legal. Entonces realmente no tiene sentido para mí. Por eso, me aseguro de que las cosas no salgan mal. Aquí hay algunas precauciones que tomo para asegurarme de que el proyecto vaya sin problemas, y me acaban pagando. Esto se aplica principalmente al trabajo fuera de la plataforma. En las plataformas como Upwork, ahí se atiende el contrato Es en su interés que te paguen. Y si algo sale mal, entonces van a mediar y decidir quién está bien o mal Independientemente de si estás trabajando con un contrato o no trabajando con un contrato, aquí tienes algunas precauciones que debes tomar para asegurarte de que las cosas no salgan mal. Primero, tienes que asegurarte de tener claro con tu cliente y luego no surjan sorpresas en ningún momento del proyecto. Para ello, utilizo mi documento de propuesta y me aseguro de que ahí se afirma todo lo que potencialmente podría surgir en el futuro. Y si surge algún desacuerdo, entonces siempre podemos volver a la propuesta y ver qué dice ahí Cuando se trabaja con clientes en todo el continente, a menudo es más fácil romper un contrato, pero no tan fácil romper y fastidiar una relación humana a humana. Entonces, cuando trabajo con clientes y normalmente trabajo con clientes en el extranjero y en todos los continentes, trato de tener cara a cara en Skype principalmente porque tener una interacción cara a cara con las personas y tener establecida esta relación cara a cara crea un tipo diferente de vínculo entre los clientes y yo. Y romper esta relación es mucho más difícil si ya me han visto y si tuvimos alguna interacción a través de la llamada versus si solo fuera un tipo con una foto de perfil y un usuario o solo una dirección de correo electrónico. Además, puedo obtener mucha información sobre mis clientes viéndolos y hablando con ellos. Yo uso mis sensores de tonterías que la madre naturaleza me lo dio, y puedo sentir si hay algo dudoso y sospechoso Con nuevos clientes, siempre los facturo paso a paso durante todo el proyecto. No espero a que se haga todo el proyecto y luego finalmente mande todo el valor y luego, espero que vayan a pagar. Si estoy trabajando con completos desconocidos con los que no he trabajado y está fuera de la plataforma, entonces voy a pedir el pago anticipado del 25% De esta manera, puedo equilibrar el riesgo entre el cliente y yo porque si les pido el pago 100% por adelantado, entonces están tomando el riesgo completo Y no quiero poner a mis clientes en esa situación, ni ellos estarán dispuestos a hacerlo, o si estoy cobrando al final del proyecto, 100%, entonces estoy tomando todo el riesgo. Al preguntar solo el 25% por adelantado, sí, están tomando un pequeño riesgo en realidad ellos mismos, pero al menos me quedan 75% de pagos para motivarme a hacer el resto del trabajo Con clientes existentes con los que ya he trabajado y confío y ya me han pagado por proyectos anteriores y siempre he pagado a tiempo, entonces puedo relajarme y puedo facturarlos fácilmente al final del proyecto, al 100%. Pero eso es lo que hago. Eso no quiere decir que eso es lo que debes hacer, también, juzgar por ti mismo y ver la relación que tienes con tus clientes. También a menudo me gusta confiar en mis clientes, y como que cuando veo que tenemos una buena relación, sí me gusta demostrarles que confío en ellos y que no sospecho de ellos, porque ese tipo si confío en ellos, entonces saben que pueden confiar en mí Algo así como que es una cosa mutua. Si confías en ellos, entonces sienten esta obligación que tienen de volver a confiar en ti y simplemente crea una muy buena relación. Pero si siempre sospecho de ellos, entonces, ya sabes, relación va a ser un poco más fría. Cuando tengas una mala experiencia, ajusta tu estrategia. Cuando alguien viola tu confianza y no te paga a tiempo, entonces asegúrate de cambiar tu estrategia, sin excusas ni segundas oportunidades y pide pagos por adelantado Solo tuve un problema de pago una vez. Estaba trabajando con la startup. Yo hice el sitio web por ellos, y ellos estaban esperando que entrara una inversión y no me podían pagar a tiempo, y tuve que perseguirlos, y no estaba claro cuándo me van a pagar. Tuve que llamarlos y enviarles por correo electrónico todas esas cosas. Al final terminaron pagándome y demora no fue tan grande pero después de ese momento, una vez que violaron mi confianza, eso es todo para mí. Y luego después del momento, todo lo que tenía que hacer con respecto al sitio web, solo les estaba facturando por adelantado Decían, ya sabes, Oh, ¿puedes editar esto? Yo estaba como, Claro, aquí está el pago por adelantado. Tú me pagas, yo hago el trabajo. Si no me pagas, no lo toco para nada. Si alguien te demuestra que no es digno de confianza, créelo y toma las medidas de acuerdo. Si te sentirías más seguro al firmar contratos o tal vez tu cliente te está pidiendo uno directamente, entonces puedes generar un contrato en Bonsai Bonsai es esta solución freelancer que tiene propuestas de facturación y cosas así, y también tienen este contrato que puedes generar para trabajos específicos de diseño o diseño web Es un contrato muy agradable y personalizable. Todas las partes resaltadas son lo que editas y colocas tu información. Descanso se puede mantener intacto porque ha sido generado por sus abogados. Editar partes resaltadas es muy fácil y te dan una opción y te hacen preguntas sencillas. Para que pueda responder esas preguntas, y fácilmente se rellenará automáticamente en un idioma que sea adecuado para los contratos Han hecho un gran trabajo. Entonces, si lo necesitas, solo regístrate con Bonsai y genera ahí un contrato 174. Cómo vender Webflow a clientes: Tus clientes tendrán una experiencia con Webflow, y querrán que el sitio web se construya directamente dentro de él y buscarán diseñadores de Webflow específicamente Pero para otros, tal vez ni siquiera estén familiarizados con Webflow, así que tendrás que convencerlos de que usen Webflow como plataforma Estos clientes se pueden dividir en dos tipos. Aquellos que no tienen ningún requisito donde vas a construir el sitio web. Y segundo, aquellos que tienen algún tipo de preferencia hacia una plataforma particular, generalmente esa siendo WordPress. Vender Webflow a aquellos que no tienen un requisito o preferencia particular donde vas a construirlo realmente no necesita tanto convincente La mayoría de mis clientes son así, y por lo general solo confían mi experiencia sobre dónde voy a construir el sitio web. Lo único que podría necesitar un poco de convencimiento son los costos de alojamiento de Webflow Pero una cosa que es importante tener en cuenta es que alojamiento también cuesta dinero en otras opciones. Incluso si es Board press, WordPress en sí es gratuito, pero el hosting es de pago. Entonces el sitio web tiene que vivir en algún lugar. Por lo general rondará por lo menos $5 al mes. Ahora, donde en realidad el precio del alojamiento privado realmente baja y lo hace realmente barato por sitio web es cuando estás alojando varios sitios web porque los proveedores regulares de alojamiento privado, también te dan el precio que te di ahora mismo era solo por un alojamiento de sitios web, pero con un tipo muy pequeño de aumento de precio, creo, dos, $3 por mes aumentar, ahora te dan un plan diferente que te permite alojar una cantidad ilimitada de sitios web. Y ahí es donde realmente bajan los precios por sitio web. Pero el problema es que los clientes habituales realmente no pueden usar este beneficio porque los clientes habituales suelen tener un negocio y necesitan un sitio web, ¿verdad? Así que nunca se van a beneficiar de alojar 100 sitios web diferentes en un solo plan porque no necesitan 100 sitios web diferentes. Ellos solo tienen un sitio web, ¿verdad? Y me refiero a sitio web porque, claro, podemos tener incluso en Webflow, podemos tener un sitio web Pagaremos solo un plan, pero tenemos, puede tener mil páginas. Esa es una historia diferente. Estoy hablando de diferentes sitios web en diferentes direcciones web y cosas así, ¿verdad? Entonces ese es el gran tipo de ahorro de dinero en hosting privado. Ahora, por ejemplo, si fuera desarrollador de Wordpress, lo que podría hacer es tener mi propia cuenta, justo en un plan de hosting, y luego cada sitio web que construyo para todos mis clientes, los alojaría ahí, ¿verdad? Entonces por sitio web ahora, ya sabes, el precio bajaría muy, muy barato, cierto, porque solo tengo una cuenta, un plan de hosting, y luego cada sitio web va ahí. Y entonces lo que puedo hacer es cobrar a mis clientes costos anuales de hosting o tarifas de administración por cada sitio web, y luego me embolsaría la diferencia. Y eso es lo que obviamente hacen muchos desarrolladores web. Pero eso luego termina como un precio similar al del cliente al final del día. Entonces para el cliente, realmente no tienen muchas opciones porque ningún desarrollador web va a dejar pasar esa muy buena oportunidad ganar dinero extra y ofrecer hosting completamente gratuito, bien, porque todavía tendrían que pagar por ello y todas esas cosas. Entonces, ¿por qué lo ofrecerían gratis? Ahora, para otros beneficios importantes en Webflow, obtienes lo que se llama un hosting administrado hosting administrado significa que hacen El hosting administrado significa que hacen mucho en segundo plano por ti, cosas de las que tú o tu cliente nunca tienen que preocuparte como copias de seguridad automatizadas, seguridad, escaneo y eliminación de malware , sitio del servidor, actualizaciones de software , mejoras de rendimiento y mucho más que no entiendo y no me importa siempre y cuando esté atendido. El mantenimiento de la seguridad es un gran problema con los servidores. Una vez tuve un sitio Wordpress, que yo mismo alojé en un servidor de chips. Un día, un poco de malware entró y puso mi sitio patas arriba. El sitio estaba encendiendo y apagando constantemente. El malware estaba usando todo el ancho de banda de mi servidor. No pude entender cómo quitar la maldita cosa. Era mi sitio personal, así que decidí tomar todo el asunto y cancelar el hosting. Y si eso no es suficiente para la diferencia, entonces esto es. Un típico planes de alojamiento más baratos generalmente te dan un espacio de servidor en una sola ubicación, una computadora llamada servidor donde vive tu sitio web. Si estoy en Australia y el servidor está en Estados Unidos, entonces el contenido de un sitio web necesita viajar a través de cables desde Estados Unidos hasta Australia. Esto hace que una carga lateral sea como un caracol, pero el alojamiento Webflow viene con lo que se llama CDN Content Con Webflow, tu sitio se carga desde el servidor más cercano al usuario Entonces, si un usuario se encuentra en Japón, el sitio web se cargará desde un servidor cercano en Tokio, no desde California. Por supuesto, Webflow no es el único alojamiento que ofrece eso, sino que en el momento en que agrega la función CDN en los servidores regulares, los precios comienzan a subir y se acercan bastante a los precios de Webflow Y por si eso no es suficiente, Webflow tiene un truco más bajo la manga Este es un beneficio que los servidores administrados regulares no tienen. Verás, los servidores regulares necesitan estar listos para cualquier cosa. Los usuarios pueden instalar WordPress, Juma, Drupal o incluso los tres sistemas y ejecutarlos todos a Esto no plantea problemas para el servidor, pero sí significa que no se puede optimizar completamente para ejecutar realmente bien solo un sistema en particular. Los servidores Webflow necesitan ejecutar solo un sistema, Webflow. Por lo tanto, está muy afinado para ejecutar solo Webflow. Ahora, por supuesto, hay proveedores de hosting comparables que coinciden con todos los beneficios de Webflow que se especializan en una sola plataforma son administrados e incluyen características de Cdian, pero terminan siendo más caros que Por ejemplo, WP Engine, un proveedor popular de alojamiento especializado de WordPress que tiene todas las mismas características similares que ofrece Webflow comienza en 35 dólares mensuales Entonces ahí lo tienes. Cuando se compara con un sitio web versus un alojamiento de sitios web, los precios vienen muy similares o a veces incluso más caros por el otro lado. Si está utilizando las mismas características que ofrece ese tipo de Webflow Y al final del día, si un sitio web no puede aportar más valor a tu cliente que 20 dólares mensuales, entonces ¿cuál es el punto de ese sitio web de todos modos Segundo tipo de clientes tendrán preferencias a plataforma específica, generalmente Wordpress. Ahora, antes de hacer el caso y tratar de convencerlos de que usen Webflow, hay que entender cuál es el razonamiento detrás de ellos. ¿Cómo llegaron a la conclusión de que necesitan usar WordPress como plataforma? Porque a veces hay una característica específica o un requisito que tienen sus clientes podría tener que Webflow no es capaz de cumplir Por ejemplo, si el equipo ha estado usando algún complemento de WordPress en el pasado sitio web probablemente porque tenían un sitio web en el Wordpress, y estaban usando algún complemento específico. Digamos, estás trabajando con una clínica dental, y ellos están usando un plugin específico de Wordpress para sus citas, como, ya sabes, reservar citas, ya sabes, como calendarios y luego, ya sabes, los usuarios van al sitio web. Hay un calendario, y luego hacen una cita, algo así, ¿verdad? Y han estado usando este plugin en particular, y tal vez realmente quieren ese plugin porque tal vez el personal está acostumbrado o tal vez está enchufado de alguna manera en su tipo de proceso de negocio o alguna integración con otras aplicaciones que están usando ellos mismos, tal vez algún otro CRM o algo así En ese caso, bien, realmente necesitan, ya sabes, 100% de propina con ese plugin. No eres capaz de hacerlo porque si ese plugin es Webflow, específico de wordpress, entonces no hay nada que puedas hacer al respecto Ahora, obviamente, hay muchas alternativas y aplicaciones de reserva de citas y aplicaciones terceros que no son específicas de la plataforma. Y la mayoría de las realmente buenas y la mayoría de las grandes aplicaciones de terceros son así. No son específicos de la plataforma. Son una especie de códigos que puedes instalar en cualquier sitio web. Y podrías encontrar la alternativa, pero si realmente quieren apegarse exactamente a ese plugin porque por alguna razón, entonces no hay nada que puedas hacer al respecto. Y la única opción es ir con la plataforma WordPress, y eso es todo. Entonces hay que averiguar si hay algún requisito que deba cumplirse, que ellos deben cumplir, y si no puede cumplirlo con Webflow, entonces tiene que pasar a ese cliente Y si no encontraste ningún requisito que Webflow no pueda cumplir, entonces diles que tienes una mejor solución para ellos que WordPress y dales tres grandes beneficios de Webflow Primero, el alojamiento Webflow indoloro y de alto rendimiento. Todos esos puntos que mencioné antes, el CDN, mejor seguridad, más rápido, menos molestia, más barato En segundo lugar, qué tan rápido puede construir, iterar y entregar su sitio web El diseñador de Webflow, la codificación de un sitio web desde cero lleva mucho más tiempo Y tercer beneficio, editor de Webflow. Ese es uno grande para los clientes. Wordpress y otros CMS son confusos para la mayoría de las personas. Son feos, son torpes y lentos, no son muy agradables de usar Tienes que ir al back office y editar contenido desde ahí. Pero Webflow'se ditor está justo en el sitio en vivo. Los clientes pueden simplemente ir al sitio web en vivo y comenzar a editar contenido allí y luego. Y así es como realmente haces el caso de Webflow con tus clientes No hay mucho que vender realmente. Es bastante simple y directo. Yo mismo en realidad rara vez necesito hacer un caso para esto porque la mayoría de mis clientes confían en mi experiencia. No les preocupa mucho dónde voy a construir, porque empresarios y empresarios Y muchas veces incluso trabajo con equipos que son una especie de techie, equipos de desarrollo, e incluso a ellos no les preocupa mucho dónde lo construyo siempre y cuando sea eficiente para mí, y lo produzco y puedo iterarlo muy bien porque soy yo el que en realidad está construyendo un sitio web y yo soy el que va a estar editando ese sitio web y todas Entonces tiene que ser rápido y eficiente para ellos, que pueda hacerlo realmente fácil, y me preguntan, cuánto va a costar y decirles el precio, y dicen: Bien, bien. Pero en esos casos, donde definitivamente Webflow parece la mejor opción para ellos y no hay limitación y pero por alguna razón, tal vez todavía te enfrentas a la resistencia de tus clientes, tal vez sobre el precio o algo más Entonces todos estos beneficios que describí son suficientes para sellar el trato. 175. Introducción a nivel avanzado: Enhorabuena. Pasaste por la parte principal de este curso. Todos los próximos videos están avanzados que no necesitas de inmediato para comenzar tu carrera de diseño web freelance. Realmente espero que hayas disfrutado del viaje. Me di cuenta de que este curso era un puñado, y has aprendido de todo, desde un buen diseño hasta el desarrollo de Webflow y un trabajo independiente exitoso Siéntase libre de volver a visitar algunas de las lecciones de vez en cuando Se pegarán mejor y obtendrás aún más práctica. Mi recomendación para sus próximos pasos sería poner en alguna práctica independiente fuera de este curso. Puedes elegir un tema o un producto que te inspire y construir un sitio web para ello. O incluso una mejor opción sería asumir proyectos reales. Puedes buscar proyectos dentro tu red entre tus amigos, familiares, compañeros de trabajo, etc., y puedes asumir proyectos pagados o gratuitos. O puedes de inmediato, empezar a buscar proyectos reales y trabajos reales en Upwork y otras plataformas freelance Los tutoriales de esta sección son tanto de diseño como de Webflow relacionados Por ejemplo, ese tutorial de Photoshop sobre cómo cortar un objeto del fondo, algo que discutimos en la parte de diseño de este curso, pero en realidad nunca lo pasamos como práctica porque era un tutorial de Photoshop y un poco más avanzado. Por eso lo puse dentro de esta parte avanzada de la sección o código personalizado embed, que es para Webflow, derecho a incrustar algunas aplicaciones de terceros como el plugin de comentarios, que vamos a hacer esos y algunos más videotutoriales en sección avanzada que se diviertan 176. Webflow: modo personalizado (ventana emergente): En este video, te voy a mostrar cómo construir un modelo personalizado o en otras palabras, un pop up, algo así. Cuando el usuario hace clic en el botón, se abre un modelo con un formulario. Los modelos son ampliamente utilizados y muy prácticos. Poner formas dentro es un uso. Una opción muy odiada es usarla como pop up. ¿ Sabes de lo que estoy hablando? Cuando estás navegando por una página y algún mensaje de marketing molesto aparece de la nada cuando no hicimos clic en nada. Este, vamos a ir con opción menos polémica, un formulario que se abre cuando el usuario hace clic en este botón Obtener acceso en nuestro sitio web de TeamApp Construir esto dentro de Webflow no es tan sencillo como pensaría No hay ningún componente modal listo para que solo podamos agregar a la página. Hay uno que se llama Lightbox, pero es principalmente para imágenes y videos Pero formas o algo así, no hay ninguna. Esto fue algo que me sorprendió al principio, y cuando vi el tutorial sobre cómo construir este modelo con una forma en su interior. Fue entonces cuando entendí qué tipo de plataforma de diseño web Webflow era una herramienta profesional donde construyes cosas desde cero como un desarrollador, no solo dejando caer componentes listos para usar Así que también puede ser sorprendente para ti, pero eso es lo que hace que Webflow sea increíble Entonces comencemos. ¿Qué sucede cuando se abre modal? Hay un color de fondo que se superpone en la parte superior de toda la página, y hay esta forma dentro de ella, ¿verdad? Entonces en un cierre, todo desaparece. Primero, construyamos eso, y luego nos encargaremos de las interacciones. Voy a agregar un bloque div y ponerlo en la parte superior de la página. Y nombra envoltorio modal. Ahí va a ir todo. Ahora necesitamos superponer esto en toda la pantalla. Podemos hacer eso por posición fija y seleccionando completo. Vamos a darle un color para que podamos ver qué está pasando. Entonces está superponiendo al héroe pero no a la sección posterior. Y también está detrás de la barra de navegación, pero queremos que vaya encima de todo Para superponerla encima de todo, necesitamos usar una característica que aún no hemos discutido, índice Z. Que podemos encontrar bajo ajustes de posición. Aparece en todas las posiciones además de auto o estática. Z significa eje Z, la profundidad. Básicamente, nos permite controlar el apilamiento de elementos uno encima del otro. Por defecto, la mayoría de los elementos se establecen en valor cero. Si tenemos dos elementos superpuestos entre sí, uno que tenga mayor valor Z se va a apilar en la parte superior. También he vinculado el video tutorial de Webflow sobre el índice Z en caso de que quieras aprender un poco más al respecto Entonces, si cambio el índice Z a uno, se va a apilar encima de todos los valores cero. Genial, pero sigue detrás de la barra de navegación. ¿Cómo es que? La barra de navegación no muestra que tenga un valor Z en su interior, pero como navbar es un componente listo para usar, probablemente tenga algún índice Z predeterminado de Webflow, lo cual tiene sentido porque la barra de navegación en vistas móviles tiene un menú desplegable, que necesita apilar encima de todo si estamos abriendo el menú en dispositivos móviles Si le damos a nuestro modelo un valor de índice Z más alto, entonces se apilará en la parte superior. Podemos ver cuál es el valor para la barra de navegación, pero te diré directamente, son mil Entonces, si establecemos el modelo en 1001, entonces va a hacer el truco. Si no es para ti, tal vez el valor sea diferente. Sólo tienes que ir más y más alto hasta que funcione. No hay límite de cómo puedes ir. Pon 10,000 si quieres. Bien, finalmente, hagamos que el envoltorio modal sea un poco transparente, algo así como 80%. A continuación, necesitamos un modelo en el centro. Antes de agregar eso, vamos a convertir el wrapper en flexbox para que podamos alinear el contenido en el centro El nuevo bloque div irá justo en el medio. Nombrarlo modal y darle estilo. Cuello, solo agrega un contenido, un titular, un párrafo y un bloque de formulario. No tenemos diseños para esto. Sólo lo estoy haciendo para demostración. Ya tenemos clases para el elemento form, así que vamos a reutilizar las como button y filled. Voy a dar el ancho máximo modal, así que el contenido encaja muy bien por dentro. Los campos tienen ancho máximo. Por eso se están acortando así. Excelente. Necesitamos una cosa más en el modelo, un botón cerrado. De lo contrario, ¿cómo saben los usuarios dónde hacer clic para cerrar el modelo? Podemos poner algo como Cancelar o cerrar debajo de un botón o un icono de X en la esquina del modelo Vamos con un icono cerrado porque es un poco más difícil, así aprenderás más. En realidad, ya sabes todo lo que necesitas para construir esto. Solo necesitamos un icono cerrado, que podemos obtenerlo a partir de icono plano. Y luego colóquelo en la esquina superior derecha mediante el uso de posicionamiento absoluto. Pero cuando haces eso, va a saltar a la esquina superior de la página, no al modelo. ¿Recuerdas lo que tenemos que hacer? Necesitamos establecer el modal a la posición relativa para que el icono se posicione en relación con el modelo. Ahí. Ahora podemos posicionar el icono muy bien dando algunos márgenes. Solo para que lo sepas, los colores SVG son editables en Figma. Si quisiéramos, podríamos abrir este SPG en Figma y cambiar el color para que coincida con nuestra paleta del proyecto, pero no tenemos que hacerlo ahora mismo En cambio, podemos disminuir la opacidad a algo así como 30% para hacerla gris Bien, vamos a ver la vista previa. El cursor no cambia a una mano. Debería haber usado un bloque de enlace en lugar de un bloque div regular, pero eso está bien. Podemos cambiar manualmente el tipo de cursor desde el panel Estilos. Yo Es así de fácil. Y podemos aumentar el espacio en el que se puede hacer clic para que los usuarios no tengan que ser tan precisos al señalarlo sobre el icono Puedes hacerlo con solo aumentar el relleno en la imagen. Pero ahora deberíamos disminuir los márgenes o está demasiado lejos del borde, tal vez incluso quitar los márgenes. Un efecto hover estaría bien. Simplemente podemos aumentar la opacidad al flotar y, por supuesto, darle un efecto de transición para que sea agradable y suave Y eso es todo. El modelo está hecho. ¿Y ahora qué? Necesitamos interacciones, interacciones cercanas y abiertas. Empecemos por cerrar ya que ya está abierto. Nuestro elemento gatillo, obviamente es el icono de cerrar seleccionado. Ir al panel Interacciones. Asegúrese de que la versión de interacciones con GSAP esté seleccionada aquí y no las interacciones clásicas y seleccione el disparador que es clic Y agrega una nueva acción. Animar. Entonces, ¿qué animamos aquí Queremos animar toda la forma, todo el modelo, incluyendo el fondo, todo, ¿verdad? este momento, el objetivo es el elemento, que es el gatillo de clic. Eso no queremos. Queremos cambiar el objetivo. Seleccione clase, elimine esta y seleccione envoltorio de modelo. Ese es el nombre, el nombre de la clase de nuestro envoltorio modelo aquí. Por eso aparece el envoltorio modelo. Bajo el filtro de inmediato por defecto, va a filtrar dentro del elemento disparador, pero el envoltorio del modelo no está dentro del icono cerrado, así que no queremos eso. No queremos ese tipo de filtrado, así que solo restablece esto. Entonces está establecido en ninguno. Entonces, ¿ahora qué queremos animar Queremos que solo vaya al 0%, 100% visible para desaparecer al 0% de opacidad Tócala, y desaparece. Puede hacerlo más rápido. El cambio flexibilizando a algo un poco más poderoso. Mm hmm. Eso es mejor. Ahora bien, si pasas el cursor sobre el lienzo, vas a ver que todos estos elementos son seleccionables en el lienzo Y eso va a pasar también en la previa. Desaparece, pero ninguno de estos elementos aquí, no soy capaz de seleccionar. No puedo hacer clic en el relleno. No puedo hacer clic en el botón, ninguno de los de aquí, y como pueden ver, mi cursor cambia porque están flotando sobre los campos y el botón aquí Así que el envoltorio modal sigue abierto. Yo solo se disminuye la opacidad. Entonces es simplemente transparente, pero sigue ahí. Para cambiar eso, necesitamos eliminarlo por completo, y necesitamos cambiar la visibilidad a ninguno, mostrar a ninguno. No. No tenemos la propiedad de display aquí bajo visibilidad porque no es algo que pueda animar. Estas son propiedades que se animan y esa es la acción porque seleccionamos animate action Entonces no conseguimos esa propiedad. Tenemos otra opción. GSP tiene esta opción, que es Alpha, y Alpha sí controla tanto la opacidad como la visibilidad al mismo tiempo, pero no la vamos a usar esta vez porque realmente queremos ocultar esto completamente en el lienzo en el estado original también Así que esta vez vamos a saltarnos esta versión. Ahora, volvamos a nuestra interacción. Y agreguemos una nueva acción. Y esta vez, vamos a seleccionar conjunto. Lo que hace este tipo de acción es que no tiene propiedades que animen, y no van a animar, pero puedes establecerlas, que las va a establecer de inmediato, cambiar instantáneamente a un nuevo estilo de esa Agrega una nueva visibilidad y selecciona la pantalla. Desde la pantalla, abra el menú desplegable, y como puede ver, tenemos el bloque de configuración de pantalla familiar, en línea, grado de lino Vamos a seleccionar N. Esto no necesitamos. No necesitamos clase. Esa es otra propiedad que se puede establecer. Una clase específica se puede aplicar o eliminar de un elemento. Y como puedes ver, esta acción se ha agregado justo después de la animación, la primera animación, que es que en realidad podemos nombrar a esta animación modal. Fácilmente reconocí. Entonces, como puedes ver, reproduce la animación modal, que en este caso, no es más que un cambio de opacidad Podría ser también otras cosas como la escala, por ejemplo, es pequeña o disminuye de tamaño o movimiento, que va un poco por debajo una vez que se hace esa animación, luego se muestra establecida en ninguna. Y sí tenemos que asegurarnos de que suceda aquí y no suceda en algún lugar en el medio. Entonces, si actualizas la duración de tu animación, ten en cuenta que esta acción no va a seguir a esa. Una vez que ya lo tengas establecido, y una vez que ya estás en esta, solo ten en cuenta que esta acción de conjunto necesita comenzar al final de la misma, que está justo aquí, y demuestra que comienza en 0.2, exactamente la duración que habíamos establecido para la animación original. Se puede cambiar a 0.5, por ejemplo, e irá a algún lado por aquí en caso de que tengas una animación más larga. Ahora. Ahora mismo, el objetivo, nuevo, se pone como disparador, que es el icono cerrado. Eso no es lo que queremos. Queremos, nuevo, que el envoltorio modal sea el objetivo. Entonces cambia eso para eliminar este envoltorio modelo. Una vez más. No lo olvides, filtra N. Bien, así que vuelve a verificar todo. Establecer acción. Podemos nombrar a esta pantalla ninguno. Mostrar ninguno, envoltorio de modelo de destino. Eso es correcto. Comienza justo al final de la primera animación. Asegúrate de que no esté en algún lugar en el principio o en el medio. Voy a interrumpir esa animación. Y la propiedad es esa exhibición a ninguno. Eso es exactamente lo que queremos. Y déjame regresar. Y cuando juegas esto ahora, en la lona, como puedes ver los elementos ya no son seleccionables. Podemos probar esto aquí también. Cerrar y el texto es seleccionable, campo el selectablele. Todo esto ahora está funcionando porque todo el envoltorio del modelo ha desaparecido. Genial. Además, sería bueno si pudiéramos activar el cierre haciendo clic en el área fuera del modelo. Entonces básicamente, cerrando cuando el usuario hace clic en el espacio de fondo. Ahora tu primer instinto podría ser agregar eso al envoltorio del modelo, pero eso no va a cortar Porque aunque funcione, también se activa cuando haces clic en cualquier lugar de los dos modales, incluso dentro de los campos porque todo eso está anidado dentro del envoltorio modal Por lo que al hacer clic en el formulario se considera lo mismo que hacer clic en el envoltorio modal. Entonces necesitamos un nuevo elemento que se superponga detrás del modal, y vamos a establecer el disparador en ese elemento Dale estilo similar como el envoltorio modal, posición fija y lleno, sin necesidad del color de fondo, mantenlo transparente. Ahora bien, si agregas esta área cerrada después del modelo, entonces se va a apilar encima del modelo. Pero si lo mueves antes del modelo, entonces modal se apilará en la parte superior. Por lo general ese orden cambia lo suficiente, pero si por alguna razón no lo es, entonces puedes usar valores del índice Z. Dar modelo contratar índice Z, por ejemplo, dos, y uno para el área cerrada, y eso hará el trabajo. A Agrega la misma interacción cercana a esa área cerrada, y eso es todo. Ahora cuando hacemos clic en el modal en sí, no pasa nada, pero cuando hacemos clic en el fondo, se va a cerrar. Ahora necesitamos crear animación de modelo abierto. Vamos a empezar ocultando todo el envoltorio del modelo en nuestro lienzo porque está en el camino, y si queremos diseñar, va a estar en el camino, así que solo podemos seleccionar Model wrapper. Y desde el ajuste de pantalla, seleccione ninguno. Ahora se ha ido por completo. Somos capaces de seleccionar todo lo demás en el lienzo. Y si quieres volver a él y si quieres editar y cambiar el diseño a él, ve a seleccionar el envoltorio de modelo y selecciona display flex porque era flex layout. Y los ajustes de flex se guardarán para que no tengas que editarlo cada vez. Bien, ahora, nuestro gatillo en este caso es el botón. Seleccione el botón Obtener acceso, vaya al panel de interacciones, seleccione haga clic en Desencadenar y llame a este modelo Abierto. Y asegúrate de hacer clic en Trigger, este botón ahora lamer y agrega una nueva acción. Entonces primero, acción aquí, no vamos a hacer animar. ¿Por qué? Porque la visualización para el envoltorio del modelo se establece en oculto. Entonces, lo primero que tiene que pasar es que necesitamos habilitar la visualización. De lo contrario, no está ahí. Y si animamos la opacidad, sólo va a animar opacidad mientras sigue siendo invisible. Entonces no va a funcionar. Entonces primero, vamos a establecer display y cambiar el objetivo. Clase. ¿Y en qué estamos configurando la pantalla en el envoltorio del modelo? Asegúrate de quitar este filtro. No necesitamos filtrar porque el envoltorio del modelo no está dentro del botón. ¿Cuál es la configuración de pantalla que queremos cambiar? Vamos a agregar nueva propiedad, seleccionar pantalla. Y desde el menú desplegable, vamos a seleccionar flex porque esa es la configuración de visualización que queremos en el envoltorio del modelo. Estas cosas no necesitamos. Ahora, como puede ver, dice comenzar en 0.2 segundos. Eso no queremos. Y entonces esto es una cosa que debes asegurarte. Aquí en la línea de tiempo, como pueden ver, diré, comienza desde 001 y 0.2 segundos. No queremos eso, así que o puedes simplemente arrastrarlo todo el camino hasta el principio en el lienzo en la línea de tiempo o simplemente restablecerlo y todo ir a cero. Eso es lo que queremos. Así que revisa dos veces. Cambiemos esto para mostrar flex. Entonces tenemos target. objetivo es el envoltorio del modelo, a la derecha, comienza en cero segundos, y muestra los cambios al lino. Eso es lo que queremos aquí. Ahora necesitamos la animación. Necesitamos aparecer en una nueva propiedad, nueva acción, y seleccionar animar esta vez, cambiar el disparador a envoltorio de modelo nuevamente Sin filtrado. Vamos a nombrar este modelo aparece. Y de las propiedades animadas, ¿ qué queremos? Queremos la opacidad Eso es. Y queremos que pase de 0% a 100%. Y esta vez, en realidad vamos a establecer 0% al principio porque por defecto en el lienzo, no cambiamos la configuración predeterminada a 0%. Entonces cuando la página se carga en el envoltorio del modelo va a estar al 100%, sí, es invisible porque establecemos lo oculto pero la opacidad en sí está al 100% Entonces en este caso, necesitamos especificar aquí ya sea aquí en la animación o en el lienzo bajo estilos. Pero es mejor hacerlo aquí. Entonces en el lienzo cuando estamos trabajando con él, no tenemos que cambiar la opacidad también, y solo cambiar a flex hará que aparezca de inmediato. Así que establece la opacidad aquí a cero porque ahí es donde queremos que se anime del 0%, y queremos que se anime al 100%, Como puedes ver, ahora, aparece, y es lento, vamos a hacer coincidir la flexibilización y duración con lo que ya teníamos Poder tres. Y vamos a ver. Verifica todo. Entonces tenemos target, model wrapper, duración, 0.2 segundos, flexibilización, tipo de dos 0% a 100% de opacidad Eso es todo bueno. Y ahora vamos a darle una prueba. Aparece, desaparece haciendo clic de distancia. Aparece desaparece, bueno. Aparece, desaparece en el icono cerrado. Bueno. Aparece. Vamos a probarlo. No aparece cuando hacemos clic dentro de los campos. Bueno. Todo bien. Todo está funcionando bien. Perfecto. Y así es como creas un modelo personalizado en Webflow No se esperaría que una cosa tan utilizada necesite tantos pasos, pero así es como se construyen todos ellos. Los desarrolladores incluso tienen que codificar todo a mano. 177. Google Analytics: Yo después de que envíes tu sitio web para el cliente, lo primero que normalmente querrás configurar o el cliente querrá que configures es algún tipo de herramienta de análisis. Ahora bien, este no es exactamente un dominio de diseñadores web para analizar los datos del sitio web. Por lo general, son los comercializadores quienes lo hacen o el propio dueño del negocio si lo entienden Pero la configuración del mismo generalmente requiere instalar algún tipo de script de código personalizado o una etiqueta que se instale en el lado de Webflow Y esa parte a menudo caerá tu lado como tu responsabilidad. Entonces, como diseñador web, es un conocimiento muy bueno para ti tenerlo de inmediato. Y en este video, te voy a mostrar cómo instalar la herramienta de Analytics más popular, que es Google Analytics. Ir a analytics.google.com. Si nunca lo has configurado, y si has iniciado sesión, probablemente llegues a esta página. Si no has iniciado sesión, Google te pedirá que sesión en tu cuenta de Google. En esta página, simplemente haga clic en Iniciar medición. Pero si lo configuraste en el pasado, vas a llegar probablemente inmediato al tablero, algo así. Desde aquí, solo puedes ir a crear y hacer clic en Crear nueva cuenta o simplemente cuenta. Y entonces vas a llegar a esta página en ambos casos. Nombra algo tu cuenta, digamos, Team App en nuestro caso, y configuraremos esto para TeamApp. Haga clic en Siguiente. Para el nombre de la propiedad, nombra algo así como sitio web de TeamApp Entonces sabemos, selecciona tu zona horaria, moneda, selecciona tu industria. No es realmente tan relevante también. No va a cambiar mucho sobre los análisis. Aquí también, seleccionar objetivos. Nuevamente, puedes seleccionar un par de ellos, entender el tráfico web o app. Y de nuevo, en realidad no cambia mucho acerca de la analítica. Yo solo Google te va a recomendar diferentes cosas que hacer. Haga clic en crear y luego acepte los términos y condiciones. Y a partir de aquí, ahora vamos a seleccionar la plataforma. ¿De dónde estamos recopilando los datos? Ya sabes, bien, es una web, así que selecciona web. Y aquí, proporcione la dirección, que es la URL principal de su sitio web. Para obtener esa URL, puedes volver a tu proyecto. Ah, y esta va a ser tu URL principal del sitio web si se publica en el dominio de puesta en escena en el subdominio Webflow Pero para el cliente, cuando estás publicando en el dominio personalizado real del cliente, entonces vas a proporcionar lo que sea el dominio personalizado. Pero obviamente, vamos a hacer esto con un subdominio porque el dominio personalizado necesita un plan de alojamiento Entonces solo tienes que seleccionar y copiar este dominio y la página esta aquí dentro, no necesitas agregar el HTTPS ya está aquí, así que no vuelvas a agregar HTPS y el nombre del stream, solo llámalo sitio web Por lo que ya se seleccionarán las mediciones , la lectura puede continuar. Hecho. Ahora tenemos cuenta de Google Analytics, pero necesitamos algunas cosas más para configurar en el lado de Webflow Entonces, lo que necesitamos para Webflow es esta ID de medición. Entonces, si haces clic en esta salida accidentalmente, si estás aquí, puedes simplemente hacer clic en esto nuevamente, llegarás al ID de medición. Desde aquí, simplemente haga clic en esto y encontrará el ID de medición aquí mismo. Copie este ID de medición y luego vuelva a Webflow y Webflow, vaya a la configuración de sit Y dentro de los ajustes van a la integración ausente. Y aquí rastreamos diferentes ideas que nos da Google. Esto puede ser Google Analytics o también puede ser Google Tag Manager. En este caso, se trata de Google Analytics. Vamos a necesitar este Google Analytics. Y como puedes ver, Webflow te dice que tiene que empezar con G algo, ¿verdad Pegue su etiqueta aquí, asegúrese de que comience con G, y asegúrese de que coincida exactamente aquí y copie correctamente esta identificación. Una vez que tenga esto lleno, haga clic en guardar y luego asegúrese de publicar. Porque hasta que no publiques, esta etiqueta no se va a instalar en tu sitio en vivo. Es justo ahora mismo en la configuración para que sea empujado al sitio en vivo, va a necesitar ser publicado. Una vez que esté ahí, puedes visitar tu sitio. Y luego podemos volver al Analytics y podemos salir de esto e ir a siguiente y luego continuar a casa. Se va a decir en este momento, no se han recibido datos de tu sitio web. En ocasiones suele tardar algún tiempo en reflejar los datos y darte toda la información. Pero a menudo al menos hay tipo de datos que llegan completamente en vivo de inmediato. Y como pueden ver, hay usuario activo porque ya he abierto esto en este navegador, y ya se ha detectado que hay un usuario activo. Y a partir de los reportes, podemos seleccionar resumen en tiempo real, y veremos más información aquí sobre los usuarios. Y no voy a entrar en detalles. Google Analytics es solo otro gran tema y requiere de todo un curso propio. Pero así es como lo configuras si tu cliente lo necesita, y muchas veces lo hacen, y te pedirán que lo configures, y una vez que lo configuras para ellos, entonces analizar la analítica depende del cliente y su equipo de marketing. 178. Instalación del consentimiento de cookies: En este y en pocos videos próximos, te voy a enseñar cómo expandir la funcionalidad de tu sitio usando código personalizado. Esta es una habilidad súper importante cualquier diseñador web necesitará en su carrera porque la mayoría de los sitios web no terminan en el desarrollo de Webflow Por lo general, hay herramientas externas que el propietario de un negocio necesitará, por ejemplo, widgets de chat, herramientas de reserva de citas, herramientas de marketing y muchas más. La mayoría de las veces eso sucede a través implementación de código personalizado. Pero no te preocupes. No hay codificación real involucrada en ello. Es sólo una copia pegando código de un lugar a otro. Y solo necesita un poco de alfabetización para navegar por este código. Solo esta comprensión ampliará su conjunto de habilidades de diseño web y le permitirá sentirse cómodo implementando herramientas y soluciones adicionales en sus sitios. Ahora, se pagan las funciones de código personalizado en Webflow. Entonces, para poder seguir este tutorial, necesitarás ya sea un plan de espacio de trabajo de Webflow o un sitio alojado Si no tienes eso y no quieres invertir en él en este momento, entonces puedes saltarte estos tutoriales de código personalizado por ahora y volver a ellos cuando tengas un plan pago o trabajes en un proyecto cliente. Ahora, justo después de instalar herramienta Analytics en un sitio web, por lo general, vas a tener que instalar un banner de cookies como este. Si vives en la Unión Europea, probablemente estés muy familiarizado con esto en algunos estados, Estados Unidos, Canadá, Australia, Reino Unido, estarás familiarizado con esto porque recibimos estos banners constantemente pidiéndonos que aceptemos o rechacemos las cookies de estos sitios web. Si no vives en uno de estos países regulados, entonces tal vez no estés familiarizado con estas pancartas. Sin embargo, para cualquier sitio web, si vas a servir al mercado, si estás haciendo un sitio web para un cliente y vas a servir a los usuarios ya sea en Estados Unidos, lugares específicos en Estados Unidos. Si estás sirviendo a usuarios en la Unión Europea, Canadá y muchos de estos lugares donde tienen estrictas leyes de privacidad, vas a tener que instalar un banner de consentimiento de cookies y pedir permiso a los usuarios para que puedas rastrearlos e instalar cookies en su dispositivo. entonces cuando, por ejemplo, lo que hicimos en la última lección, que fue instalamos una herramienta de análisis, que era Google Analytics. Esto es lo que instalamos. Y por ejemplo, este es mi sitio web, sitio web personal, y verás que estoy recibiendo aquí algunas estadísticas de usuarios en países desde los que la gente la visita, y esto sucede a través de las cookies. Ahora bien, cuando haces esto y desde estos países, sí tienes que obtener el consentimiento. De lo contrario, no puede hacerlo instalando cookies. Entonces, si haces rastreo, entonces tiene que estar en un modo de rastreo muy diferente. Hasta que realmente instales el rastreo, no tienes que hacer esto en absoluto. No es necesario instalar un banner de cookies o un consentimiento si acaba de lanzar el sitio web. Entonces, hasta que hicimos este análisis, no tenías que hacer esto porque a veces mis alumnos me preguntan, ¿necesito instalar un banner de cookies en mi sitio web? ¿Cómo hago eso? Bueno, ¿en realidad los estás rastreando? ¿Está utilizando herramientas como Google Analytics, y estas herramientas utilizan cookies específicamente o procesan datos personales del usuario para rastrear a los usuarios y comprender el comportamiento del usuario En ese caso, entonces sí, tenemos que instalar esto. Si no estás haciendo esto, entonces no hay absolutamente ninguna necesidad de hacerlo. Su sitio web no va a utilizar ningún tipo de cookies de marketing o analíticas que sea requerido por la ley. Su sitio web estará utilizando, por ejemplo, solo una cookie de sesión, que es una cookie necesaria para la página se cargue y entienda la sesión, y eso es algo que realmente no forma parte de esta ley, y esto no es lo que esta Unión Europea y estas legislaciones en realidad están reguladas Ahora, para este tutorial, vamos a necesitar usar una herramienta de terceros, que es una aplicación de consentimiento de cookies, un banner, una plataforma de gestión de consentimiento , a veces se llama. Y esto tiene que hacerse a través de una de estas plataformas. No se puede hacer esto solo a través de un banner personalizado que aparece en weblo Potencialmente podrías hacerlo, pero hay mucha más lógica pasando. Ahí, debido a que los banners de consentimiento de cookies que recibimos y para que cumplan con la normativa significa que necesitan bloquear cualquier script que ejecute cookies e instale cookies y solo ejecute esas cookies e instale esas cookies después de que el usuario haga clic excepto ellas. Y si el usuario hace clic en Rechazar todo, entonces esas cookies y scripts necesitan ser bloqueados. Es por eso que casi todos los sitios web utilizan algún tipo de solución de terceros como Cookie Hub. Hay otro como Cookie boot, y hay otro llamado Consent Pro, que se puede instalar directamente desde el mercado de Webflow Y la razón por la que estoy eligiendo Cookie Hub en este caso, porque sale a ser la mejor oferta porque Constant Pro se paga de inmediato. Si lo deseas en el dominio personalizado. Es gratis en el subdominio Webflow, pero se paga de inmediato. Tienes que pagarlo de inmediato. Y estoy usando este Cookie Hub porque he probado muchos diferentes, y encontré que esta tiene una de las implementaciones más fáciles. El precio es bueno, y su nivel gratuito es realmente utilizable. Y sí, tiene una limitación. Sobre lo que puedes hacer y cuántas sesiones al mes puedes tener y cuántos visitantes puedes tener, pero sigue siendo utilizable. Entonces, el primer paso aquí es registrarse en Cookie Hub, ir a cookie hub.com e inscribirse. Dice que la prueba de 14 días, pero la prueba de 14 días te dará estas características premium. No requiere tarjeta de crédito, y después de la prueba de 14 días, solo va a volver al nivel gratuito, y eso es gratis, y también se puede usar En el dominio aquí, voy a proporcionar mi dominio de sitio personal porque ahí es donde tengo el plan de pago. En tu caso, si tienes un plan de Workflow Webflow, y si puedes usar un código personalizado, entonces puedes proporcionar, por ejemplo, la aplicación chat tap y su dominio y cualquiera que sea el dominio que usaste para ello, que va a estar aquí mismo Ese es el dominio, y ese es el que puedes aplicar aquí. Y llegas a esta página, algo como esto que muestra tu dominio que acabas de agregar, y muestra básico como 30 K visitantes al mes, pero va a entonces esta es la prueba, y luego va a volver a lo menos, creo que son mil visitantes al mes que permite bajo el plan gratuito. Ahora necesitamos configurar las cosas y hacer clic en los detalles y entrar en la instalación de configuración. Y en estas páginas en la pestaña de descripción general general, tenemos pocas formas de configurar, elegir código de inserción manual. Y vas a conseguir este código. Este es un método muy común y exactamente cómo ocurre casi todas las aplicaciones de terceros o la implementación de una herramienta. Te dan un código. Hay una guía de implementación, instalación en alguna parte. Te dan este código, y te dicen, pégalo en algún lugar de tu sitio web. Y te dirán, en este caso, nos dice, pega esto en la sección head por encima de todos los demás guiones. Entonces tiene que ser el primer script que se ejecute, y luego todo lo demás tiene que cada otro script tiene que ejecutarse después de esto. En Webflow tenemos tres lugares diferentes donde podemos pegar o instalar código personalizado El primero dentro del diseñador es el código embed. Una vez que lo agregues al lienzo, va a abrir este campo, y este es un campo HTML, y el código puede entrar. Tiene que ser un código HTML. Y esta cosa, esto se mostrará en línea, y puedes pegar esto entre contenido. Puedes tener un encabezado aquí, un código personalizado aquí, y luego otro contenido aquí, y luego se ejecutará el código personalizado. Y si es algo que muestra, entonces se mostrará aquí mismo en la página. Y por lo general es posible que no se muestren con precisión en la página, pero se mostrará dentro del modo de vista previa. Y es por eso que existe este código personalizado habilitado Toggle aquí. Y luego el código personalizado se ejecutará en la vista previa. A veces, si es solo un HTML simple HTML y CSS y no hay Javascript, se mostrará justo dentro también se mostrará justo dentro del diseñador. Entonces ese es un solo lugar. Otro lugar donde instalamos y podemos pegar el código personalizado está en la configuración de una página. Y cuando te desplazas por el camino abajo, tienes estos dos campos, obviamente, lo siento, no este, este campo. Ahora bien, esto es obviamente que ya estoy en el plano del lado pagado, y por eso están habilitados. Si estás en el plan gratuito, obviamente, van a estar encerrados. Y aquí hay dos campos. Uno dice dentro de la etiqueta de la cabeza, otro dice antes de la etiqueta del cuerpo. Y esto es, no voy a adentrarme en ello. Cuál es la diferencia entre los dos. Y cada solución de código personalizado, generalmente te dirán si los pones dentro la etiqueta de la cabeza o deberías ponerlos al final antes de la etiqueta corporal. Y esto generalmente significa antes que el body tech significa justo antes de lo último que aparece en la página. La etiqueta corporal es, esta es la etiqueta corporal. Así que poner cualquier cosa antes la etiqueta del cuerpo significa que todo lo que tenemos en la página en entonces en la parte inferior. Entonces en este caso, sólo una cosa. Después del rumbo, se pegará justo aquí y correrá por la parte inferior Por lo general, eso significa que no se está renderizando. Es sólo una vez que no queremos que interrumpa nada en la página. Por eso lo ponemos al final. Entonces estos son dos lugares, y esta es la página. Entonces solo En esta página, sea cual sea esta página, página de consentimiento de cookies, aquí es donde se instalará esta, y no se va a ejecutar en ninguna otra página de nuestro sitio web. Y el tercer lugar es el sitio blanco. Entonces, si vamos a la configuración del sitio, tenemos esta pestaña de código personalizado aquí, y aquí, tenemos estos dos campos exactamente similares etiqueta de cabeza en la etiqueta body antes de la etiqueta body, también a veces referido como código de pie de página. Y esto ahora se aplicará en todo el sitio. Cada página de tu sitio web ejecutará este código. En nuestro caso, para el consentimiento de cookies y muchas aplicaciones de este tipo, por ejemplo, un widget de chat o cualquier herramienta de marketing, generalmente queremos que este st white porque queremos que se ejecute en cada página de nuestro sitio web. Y aquí es donde vamos a pegar nuestro código de consentimiento de cookies. Y ese es nuestro código, y luego solo lo guardas. Una vez que pegas tu código y lo guardas, el siguiente paso es publicarlo porque hasta que no lo publiques, este código no está en vivo. Simplemente se guarda aquí justo en el panel de configuración, y una vez que lo publiques, entonces será empujado al sitio en vivo. Una vez finalizada la publicación, entonces podemos ir a nuestra página y refrescarnos, y deberíamos obtener el aviso de cookies que aparece ahora de nuestro lado. Este aviso de cookies ahora se puede personalizar, y lo vamos a hacer desde la configuración del portal Cookie Hub. No obstante, hay algunos pasos más que hay que hacer para esto esté realmente finalizado por completo y funcione. Ahora, si estás aquí, si estás aquí en el tablero, puedes volver a los detalles o simplemente dar click aquí. Ir a personalizar. Y ahora somos capaces cambiar algunas cosas sobre cómo se está exhibiendo. Al igual que una de las cosas en este momento como sucedió, como pueden ver, no soy capaz de hacer click de distancia. No puedo moverme. Esta es una política de cookies muy intrusiva y banner de consentimiento de cookies No me deja ir a ningún lado. Esto es lo que por defecto está sucediendo aquí. Así que queremos desmarcar bloquear la interfaz de usuario. Este bloqueo ocurre en sitios que son como Facebook o Google o sitios de noticias como New York Times, Tribune, lo que sea Que realmente quieren que definas primero, vas a aceptar las cookies o no estás y decidir y a veces ni siquiera te permiten ir a un sitio si no aceptas ninguna cookie y usas su sitio web. Y a veces te van a permitir, pero quieren la decisión inmediato y no la permiten, y realmente quieren obtener la confirmación. Porque por lo general, si no fuerzas la confirmación, gente solo va a desplazarse y disfrutar del sitio sin hacer clic en el banner. Entonces en este caso, voy a quitarlo. Y otra cosa que podemos hacer es cambiar donde se muestra. Por ejemplo, un estilo muy tipo de com para ponerlo es una barra que puede ir, por ejemplo, en la parte inferior. Y hay una forma común no intrusiva que aún permites que las personas usen tu sitio web, y simplemente no las estás obligando a aceptar o negar las cookies porque quizás no eres tan importante para que las rastreas o uses sus datos A partir de aquí, también podemos cambiar la paleta de colores. Por ejemplo, en mi caso, tal vez iría con el blanco y negro. Y luego se pueden reorganizar los botones , las cookies, las cookies de denegación Y esto suele ser bastante bueno configurando como es. Pero dependiendo de dónde estés, tal vez necesites cambiar la ubicación de los botones en función de lo que la gente esté acostumbrada en tu región, tal vez. Otro centro de preferencias que tenemos aquí es esto es cuando hacen clic en Configuración de cookies. Esto se abre, y se puede cambiar lo que es visible aquí, lo que no es visible. Por lo general, no es necesario meterse con esto. Este es el icono que queda en la página. No es algo que me guste en general. Existe una regulación de que sí necesitas tener un lugar en alguna parte que puedan negar el consentimiento para que los usuarios puedan eliminar el consentimiento, y que podría ponerse como un enlace en algún lugar del pie de página para la configuración de cookies. En lugar de este tipo de pancarta, siempre puedo simplemente flotar en el sitio web. Así que sólo voy a salvar todo esto. Y para cualquier costumbre personalice los teléfonos o lo que sea, para cualquier sitio web que necesite un aspecto realmente personalizado para estos botones, entonces se puede usar el CSS personalizado. Una vez que hayas terminado, guarda y cierra, y luego tienes que publicar los cambios pendientes. Y luego puedes volver al sitio y refrescarte, darle algo de tiempo. Y me tomó un par de intentos, y luego finalmente funcionó. Y ahora se puede ver que el banner es diferente. Ahora, el banner está funcionando, aparece, sin embargo, todavía no cumple. En realidad no es hacer lo que se supone que debe hacer. Para que haga lo que se supone que debe hacer, y en realidad Cookie Hop puede ayudarnos con esto, necesita escanear en busca de cookies y necesita comenzar a bloquear esas cookies. Entonces desde la página de escaneos, ya me hizo un escaneo, y si no lo hizo por ti, puedes solicitar un escaneo, y va a pasar por tus páginas, y va a escanear en busca cualquier script y código personalizado que tengas que estés ejecutando en tu sitio web y averigua qué hay bloquear y si es capaz de bloquearlo. Ahora, la forma en que hemos configurado el código de Google Analytics, veamos si ya ha hecho este Centro de Acción. Dentro de los centros de acción, normalmente vamos a tener problemas. Y entonces podemos pasar por estos diferentes temas y abordarlos tal como son. Entonces uno de los problemas que vas a tener y si hiciste la implementación de Google Analytics, a partir de aquí, vas a obtener un problema en Cookie Hub porque Cookie Hub no es capaz de bloquear realmente el script porque Webflow inyecta este código y el script de Google Analytics mucho antes, entonces este script Entonces, lo que tenemos que hacer aquí es que realmente necesitamos eliminar esto de aquí eliminando no permite eliminar de inmediato. Tenía una nueva etiqueta y delete save, y vamos a hacer una instalación manual desde un código personalizado sin la instalación un código personalizado sin Webflow desde ese campo Para eso, tenemos que ir a Analytics. Analytics.google.com, una vez más. Desde aquí, te pedirá que inicies sesión en la cuenta de Google correcta una vez que inicies sesión, entonces podrás desde aquí. Si solo tienes una cuenta y una propiedad, va a seleccionar de inmediato, pero si tienes múltiples, entonces tienes que seleccionar de aquí. Una vez que estés aquí, busca flujos de datos. Eso es lo que configuramos la última vez. Y si recuerdas, esto es lo que hemos hecho para mi sitio web, para el sitio web de TeamApp y tengo similares aquí, da click sobre esto Y la última vez acabamos de tomar este ID de medición, pero esta vez vamos a pasar por agarrar todo el guión, que podemos encontrar en Ver etiqueta Instrucciones. Y seleccionamos instalar manualmente, y vamos a obtener este código, y vamos a usar este código. Este es un código similar que Webflow está inyectando. Es solo que se está inyectando mucho antes. Y podemos agarrar este código desde aquí. Ya tiene nuestra identificación dentro de un lugar aquí mismo, otro lugar aquí mismo. Ahí es cuando necesita. Si en realidad no puedes encontrar este código en tu panel de Google Analytics, puedes preguntarle a Gemini o a cualquier otro LLM y decir, dame el último script de Google Analytics Y va a proporcionar exactamente el mismo guión. Simplemente tendrá este Gxxxx y aquí es donde necesitas reemplazar ese ID de medición, y luego el script es exactamente el mismo Y el ID de medición ya estaba justo aquí cuando lo eliminamos. Ahora, una vez que tengas ese código y tengas esos ID de medición correctamente, entonces vas a pegar este Google Analytics después del script Cookie b aquí mismo. Problema, todo el problema era que todo este script Webflow está inyectando antes y luego ejecuta el Cookie Hub, y ahora CookieHub no es capaz de atrapar realmente este script y bloquearlo antes de que el usuario pueda darle permiso Entonces, para cualquier otra herramienta que sean aplicaciones de terceros o herramientas que instalarás en tu sitio web, los rastreadores o tal vez un chat bot o una cita de reserva, cualquier cosa que vaya a usar Cookies, siempre las instalarás debajo del código Cookie Hubs Entonces Cookie Hub es capaz de controlar esos scripts. Una vez que lo tengas correctamente, haz clic en Guardar. Y luego otra vez, publica para seleccionar los dominios, dale algo de tiempo. Y una vez que se publique, ahora podemos volver a Cookie Hub y pedirle que vuelva a explorar Y esta vez, una vez escaneada, debería poder coger las cookies correctamente, y no debería darnos ningún problema aquí, y esto suele tardar unos minutos, así que puedes alejarte, tomarte un descanso y volver más tarde. Una vez que hayas terminado, vas a obtener estos no se encuentran problemas, y eso significa que es correcto todo está configurado correctamente en la descripción general, obtendrás esto todo bien sin problemas detectados. Luego, por un lado, cuando los usuarios realmente hacen clic en Permitir cookies, es entonces cuando se cargarán las cookies y Google Analytics, y es cuando cualquier otro script que es entonces cuando se cargarán las cookies y Google Analytics, y es cuando cualquier otro script que requiera cookies se cargará y finalizará. Hay otras configuraciones y personalizaciones que uno podría necesitar hacer, pero eso depende de un sitio real, scripts de seguimiento particulares utilizados, y la audiencia, está sirviendo, así que no voy a hacer eso aquí Pero si tienes un proyecto real y necesitas ayuda, solo tienes que publicar en el Q&A y yo pot 179. Incorporación de código + IA: En este video, lo que vamos a hacer es que vamos a hacer otro tutorial de código personalizado en la práctica. Nuevamente, es una función de pago en Webflow, por lo que esto requerirá tengas una cuenta de Webflow pagada, una cuenta espacio de trabajo o un plan de alojamiento en uno de los La última vez hicimos esta instalación de código personalizado a través de la configuración del sitio, y esta vez, vamos a usar este elemento de inserción de código. En este escenario, vamos a repasar la instalación algunos componentes de código de fuentes externas dentro de Webflow, y esto le mostrará cuánto puede expandir su habilidad y su capacidad para diseñar y Webflow y no solo confiar en la funcionalidad nativa de Webflow, sino poder traer funcionalidad y diseño de Y también vamos a utilizar IA. Te voy a mostrar lo poderosa puede ser la IA en este caso, para ayudarte a modificar el código y hacerlo útil para la implementación de Webflow En la naturaleza, hay muchos sitios web y lugares que comparten componentes de interfaz de usuario de código abierto. Uno de los más populares es CodePen. Aquí es donde los desarrolladores crean algo. Comparten su implementación de código, y otros desarrolladores pueden tomar el código y utilizarlos e implementarlos en sus diseños y en sus sitios web. Otra opción que es UIRs también es similar a CodePen no exactamente igual, pero es un poco más simple, y vamos a empezar con UIWors y voy a explicar cómo Primero, déjame darte una pequeña guía de cómo funciona el verso de UI. Así que ve a ivers dot IO. Voy a poner el enlace en los recursos también. Y lo que tenemos aquí es un poco de componentes que se crean, como botones que animan, cosas que son como componentes simples independientes que se construyen, y suelen tener algunos divertidos, no graciosos, pero divertidos animaciones e interacciones ellos ese diseñador o desarrollador que fueron creados, pensaron que eran creativos Y puedes ir a elementos, hacer clic en todos y aquí veremos que hay cosas que están animadas, gradientes, flujos e interacciones con las que podrás interactuar de inmediato. Y cuando pasas el cursor sobre él, te van a desplazar para obtener código Y luego ofrece HTML un CSS, que puedes agarrar e implementar donde quieras. Y la forma de usar el verso de UI es, te voy a dar un poco de propina aquí. Verás esto como viento de cola y CSS. El viento de cola es un framework y una biblioteca que se basa en CSS, y para usarlo en Webflow, un poco complicado porque eso significa que necesitamos extraer la base de datos o biblioteca web tailwind e importarla a la base de datos o biblioteca web tailwind nuestro sitio web, y complica las cosas, y puede entrar en y complica las cosas, y conflicto con cualquier clase CSS y la biblioteca que tenemos dentro de la web que no queremos tales dependencias. Queremos CSS más limpio. Eso es solo que llaman a esto CSS vainilla. Y si repasas esto sin seleccionar este filtro, verás que algunos de ellos tendrán este ícono de viento de cola en él. Si no lo tiene, eso significa que no está basado en viento de cola, y puedes usarlo así usando la implementación vainilla de CSS Entonces, cuando estés mirando a través de esto, a veces asegúrate de seleccionar CSS, y eso te dará solo una implementación simple de vainilla sin dependencia de una biblioteca externa como healin Entonces encontré estas tarjetas aquí. Esta cosa de aquí, y me gusta mucho este efecto, sin embargo efecto. Y obviamente, potencialmente podríamos construir esto dentro de Webflow nosotros mismos usando interacciones Webflow Pero a veces no quieres intentar resolverlo todo y ves muy útil componente fácil, solo puedes agarrar y copiar y pegar dentro de Webflow Cuando encuentres algo que te guste, das clic aquí, Obtener código. Y aquí, vamos a conseguir HTML y CSS. Entonces nada complicado aquí. Así es exactamente como estamos trabajando dentro de Webflow también. Tenemos elementos HTML o etiquetas, y esto es exactamente lo que estamos agregando aquí. Por ejemplo, Bloque DIV. Ese es el Bloque DO. Así es como se escribe el Bloque D. Y cuando dice clase es igual a pila de cartas, esto es exactamente lo que agregamos aquí. Si solo nombramos esta pila de cartas, Esto es exactamente sería la misma implementación en Webflow, que ves aquí mismo, clase DV, pila de cartas Eso es. Y luego sean cuales sean los estilos que cambiemos, los estilos que cambien aquí, obtienen línea por línea, agregaron bajo esta clase de stack de cartas. Esto es lo que está pasando aquí. Estamos bastante familiarizados con esto. Y esta es una muy buena introducción para ti y buena manera de ensuciarte las manos o tu gran mojado en un poco de código. Es una muy buena idea que no rehuyas implementar un poco de código aquí y allá, porque eso amplía tu habilidad en lo que puedes hacer con Webflow o simplemente con el diseño web en general, incluso si estás usando cualquier otra herramienta, incluso si no es Webflow Entonces, lo que tenemos que hacer aquí es simplemente copiar este primer HML, y en realidad vamos a construir alguna sección simple, contenedor, párrafo de encabezado Llamemos a este código personalizado. Tutorial. Vamos a darle a esto un poco de relleno. C centrarlo. Bien. Y en el interior, ahora podemos agregar código embed. En el momento en que hagas clic en él, va a aparecer este campo para que peguemos el código dentro. Entonces aquí vamos a pegar lo que sea que copiemos, y va a mantener este comentario actualizado. Puedes eliminar este comentario o no. Así es como escribes comentarios dentro de HTML. Y este campo es un campo HTML. Solo HTML entra. No puedes poner tu CSS o JavaScript puro dentro. Tienes que encerrarlos dentro de etiquetas HTML. Entonces por ejemplo, y luego lo segundo que tenemos que copiar de aquí es este CSS. Pero esto es CSS puro. Entonces, si solo lo pegamos así, vas a conseguir este texto blanco. Esto quiere decir que no es reconocer el lenguaje, cómo está escrito. Es HTML y todo esto escrito de la manera en que escribió el CSS, no reconoce por eso se aclara. Entonces no vamos a hacer eso. Y para pegar CSS dentro de HTML, necesitas encerrarlos dentro de la etiqueta de estilo Y así es como se ve cuando encerras algo en una etiqueta dentro de HTML Estilo con corchetes alrededor, estilo con corchetes alrededor, pero la etiqueta final tiene que tener una barra Por ejemplo, algo que muy a menudo hacemos es H una etiqueta, ¿verdad? Y luego los encierras a H uno, y esto es un titular Así es como se ve poner en un encabezado dentro del weblog Siempre que ponemos un encabezado, esta es la realidad en el fondo, esto es lo que está pasando. Solo una etiqueta H una, etiqueta de apertura se ve así, etiqueta de cierre se ve así. Todo dentro de HTML tiene que ser cerrado con una etiqueta de cierre. Si no lo haces, entonces va a dar un error a menudo y causar problemas para asegurarse de que está cerrado. Así lo mismo con CSS. Una vez que tengamos este encerramiento, entonces podremos poner CSS puro dentro de él y simplemente pegar tu CSS aquí mismo y puedes asegurarte una vez que todo esté codificado por colores, eso significa que ahora lo está leyendo Empezó a entender que estamos contando aquí el navegador de aquí en adelante, lee esto como CSS porque lo llamamos estilo. Y luego va como, Oh, lo conseguimos. Y luego vuelve a comentar aquí. Estos son comentarios. Puedes eliminarlos si los quieres, pero es una buena guía para ti o si no quieres ninguna mención de quien lo hizo, no creo que tengas que referenciarlos en base a la licencia que proporcionan. Creo que es gratis, y no hay que hacer referencia y acreditar al autor de esos componentes. Entonces aquí, así es como escribes comentarios dentro de CSS. Así es como escribes comentarios dentro de HTO. Una vez hecho esto, haz clic en Guardar y Cerrar. Y cuando es CSS HTML puro, Webflow generalmente lo ejecutará de inmediato dentro del diseño Si también incluye JavaScript, entonces no lo va a hacer de inmediato dentro, y o bien solo funcionará dentro de la vista previa, y cuando esté en la vista previa, asegúrese de habilitar el código personalizado. Y luego generalmente también, si tienes JavaScript dentro, también ejecutarás JavaScript aquí. Y luego en casos raros, a veces ni siquiera se va a ejecutar en la vista previa, y solo se ejecutará en una página publicada dependiendo del código que estés implementando. Muchos y la mayoría de ellos, van a correr aquí, pero algunos que necesita importar diferentes dependencias, entonces no van a correr aquí porque probablemente entrarán en conflicto con la experiencia de los flujos Como pueden ver, esto ya está funcionando bastante bien. Podemos hacerle algunos ajustes, por ejemplo, vamos a darle un poco de espaciado aquí. Y ahora mismo, digamos que queremos que se centre, ¿verdad? Entonces esto es código y Bd, y esto es solo un bloque div genérico regular, y lo tratas como un bloque div. Entonces, debido a que es un bloque div por defecto, display set to block, lo que significa que va a estirar de borde a borde. Entonces, una forma de hacer que no estire de borde a borde es o bien podemos darle un ancho fijo y luego centrarlo usando esto o simplemente podemos darle un bloque en línea. Y el ancho de la misma se definirá por cualquier contenido que esté dentro. Y en bloque ancho, pone esto justo en el medio. Bien, todo eso está funcionando bien, pero ¿qué es esto, verdad Aquí no hay contenido. ¿Cómo trabajamos con esto? ¿Cómo cambiamos el texto? ¿Cómo modificamos? ¿Cómo cambiamos el tamaño o los colores de esto? Ahora, todo aquí ahora, porque esto es un código y malo, todos los estilos, cada contenido dentro, esto sucede sólo a través del código interior. Todo lo que hay que cambiar tiene que cambiarse a partir de aquí. Sólo somos capaces de controlar el exterior. Wrapper, que es este código y malo, y podemos hacerle diferentes cambios como una ubicación o un tamaño, pero todo lo demás necesita cambiarse a través del código. Entonces, por ejemplo, digamos que queremos hacer estas imágenes como un photosck ¿Cómo lo hacemos? Bueno, de aquí es de donde viene la personalización de la IA. Podemos pedirle a la IA que haga esto. Para que podamos tomar este código. Podemos ir a una de las limosnas. Los tres de ellos CloudGemni HachBT. Todos van a hacer esto bastante bien. Estoy usando Cloud en este caso porque generalmente la nube es mejor con código, pero este es un código muy simple, y los tres, van a hacer un gran trabajo en esto. Entonces lo que podemos hacer es actualizar este código para hacer que la carta superior se llene con la imagen. Shift Enter, para que pueda agregar una nueva línea sin enviar el prompt. Entonces pegas el código aquí, y ahora vamos a pin jgiptClotimage Para darle una imagen, sube tus imágenes dentro de Webflow desde el panel Activos desde aquí, encuentra una imagen en splash o paxels.com o donde solemos encontrar Y una vez que los subas, y ya tengo algunas imágenes aquí, y sobre esto, consigue copiar Enlace. Y este link va a ser link listo para producción en nuestro sitio Webflow, y este es un buen lugar para cargar tus imágenes y podemos controlar nuestras imágenes desde aquí Somos capaces de comprimirlos, y esta es una buena manera, y sabemos que nuestras imágenes no van a desaparecer. Así que no uses una URL que no sea parte de nuestro sitio web. Si es como splash URL pexels.com, URL o alguna otra URL, podría desaparecer en algún momento, y no tenemos control Pero si son nuestras imágenes, tenemos control sobre ella, y sabemos que si está aquí, entonces URL estará funcionando y siempre estará en vivo. Así que una vez que tienes la URL, entonces pegar también está en alguna parte. Entonces ahora tenemos instrucciones, ponemos todo ese código que ya tenemos dentro de él, y le dimos una imagen, y va entender que esta es la imagen a la que nos referimos, y ese es el código que hay que actualizar. Y veamos cómo le va. Esto se puede ignorar. Estoy entendiendo esto. Hoy, no lo sé. Hay algún tipo de problema tal vez con la nube, pero sigue funcionando. Es alguna herramienta llamada que está haciendo que no es capaz de acceder. Todo bien. Entonces ahora te voy a explicar lo que está pasando aquí y lo que hizo Clot Cada LLM muestra el código resultante de diferentes maneras, y así es como lo hace Cloud Por lo general, se abrirá una vista previa aquí. Si está cerrado y si solo te dio código así, se puede descargar, pero no tenemos que descargarlo. Sólo tienes que hacer clic en esto. Todavía abriré este modo de vista previa. Y esto es una vista previa, pero normalmente podría no funcionar, y en este caso, no funciona. No muestra las cosas correctamente. Entonces puedes ignorar esa parte y puedes cambiar al código, y este es el código que podemos copiar. Lo tenemos. Y te voy a mostrar en Géminis. Ya lo he hecho con Gemini y HaHPT, así que puedo mostrarte si vas a usar eso y si potencialmente tienes suscripción en Gemini o HAHPT y quieres No hay problema también. Así es como funciona en Géminis. Gemini, en este caso, no da una vista previa, sino que actualiza el código y toma el código de aquí, cópialo. Eso funciona. Y dentro de HAGPT un poco similar a tipo de entre tanto GPT mezcla de coágulo como Gemini, obtiene el código, que se puede copiar Y desde este switcher, podrás previsualizar, y te dará la vista previa En este caso, está trabajando enseguida en JajUPT. Pero misma implementación. Ahora, una vez que tengas ese código, vuelves al embed, borras todo lo que tenías, pegas este nuevo código, y verás que la mayoría de las cosas son exactamente iguales. El estilo sigue aquí. Puede hacer clic en Pretty FIT, ajustar el formato. Y verás que una de las tarjetas tarjeta principal se ha actualizado y la imagen de fondo ahora tiene una URL, que es URL o fuente de nuestra imagen. Y estas cosas aquí, tarjeta es una clase y principal junto a ella es una clase combo. Esto es con lo que solemos hacer, ¿verdad? Tenemos una tarjeta, que es la clase base. Entonces este es un estilo común que es compartido por todos los demás. Y luego con las clases combo, tarjeta uno, carta dos, tarjeta principal, se hacen las modificaciones a otras, ahorran de cerca, y ahí tienes. La imagen se ha llenado, y olvidó de previsualizar, así que todo funciona bien. Y ahora potencialmente podemos darle más imágenes y reemplazar las otras por más imágenes. Digamos, copiar enlace, volver a la nube sobre eso, actualizar otras dos tarjetas con estas imágenes. Esa es una. Y eso también. Y luego hicimos el trabajo, da clic en él para que podamos copiar. Otra vez, aquí no está funcionando. Cambiar al código, copiar, abrir esto, borrar todo de nuevo, pegar nuevo código. Puedes verificar aquí como puedes ver, tarjeta uno tiene ahora fondo de imagen, fondo imagen, fondo de imagen en los tres, guardar y cerrar y todo lo que se ha actualizado. Y ahora tenemos imágenes en los tres. Y si queremos cambiar cualquier otra cosa, por ejemplo, si quieres cambiar tallas, ahora tenemos que hacer el cambio de tallas. Nuevamente, a través del código también, pídele a la IA que cambie algo al respecto. Pero los tamaños en realidad son bastante fáciles de cambiar porque verás aquí siendo aplicado en alguna parte. Se puede ver que el stack de cartas tiene un tamaño, y eso es lo que está controlando los tamaños de cada carta porque entonces el resto de las cartas son de ancho 100%, alto 100%, por lo que están dimensionando en función del elemento padre, que tiene el tamaño aquí. Entonces, si hacemos esto más grande, va a ser más grande. Hecho. Si queremos que salgan un poco más para poder ver más imágenes, hacer otra cosa, nuevamente, con IA, explicarle, traerla. Voy a trabajar bien. Y eso es todo. Método muy poderoso para expandir tu habilidad y tus conocimientos sobre cómo trabajar con Webflow y cómo expandir tus habilidades de diseño web En el siguiente video, vamos a hacer una implementación un poco más compleja de algo similar desde CodePen 180. CodePen + IA: A en este video, vamos a hacer otra implementación de código personalizado. Esa es una algo más complicada y más compleja. Y también usaremos IA, y obtendremos una ayuda de IA para modificar el código que vamos a obtener. Así que encontré este componente de acordeón realmente genial. En CodePen, se ve muy bien. Me encanta la animación, y esto sería un componente realmente bueno en probablemente cualquier tipo de sitio web. Por ejemplo, podrían usarse como testimonios, ¿verdad? Esto podría ser avatar de una persona, su nombre, su título y testimonio, que potencialmente agregamos como cita aquí o esta podría ser la cita Y luego tienes otras fotos de personas, y el fondo puede ser otra cosa reemplazada. Esa es una manera de hacerlo. Esto también puede ser como características, ya sabes, característica uno, característica dos, descripción, así sucesivamente. De muchas maneras diferentes esto se puede utilizar categorías. Es simplemente un componente muy agradable, y se puede usar en cualquier sitio. No, definitivamente podemos reconstruir esto dentro de Webflow también Pero obviamente, tomaremos un poco más de tiempo para ver esto, mirarlo, reconstruirlo y encontrar la manera de hacerlo Mientras que cuando estamos haciendo una especie de prototipado rápido, estamos probando ideas tal vez con un cliente A veces vamos a estar como, Bien, déjame ver. Déjame dejar esto. Estás trabajando con un cliente, y vas a estar como, ¿Qué tal esto? ¿ Esto va a funcionar? Así que no tienes que perder mucho tiempo construyendo todo y una especie de Frankenstein la construcción de un sitio web también es una forma realmente válida de hacerlo Agarras diferentes componentes de diferentes sitios web. Encuentra componentes de código abierto en lugares como CodePen, y luego los implementas poco a poco Esa es una forma de hacerlo, también. Entonces te voy a mostrar cómo encontré esto en CodePen, para que entiendas el proceso de cómo funciona esto Así que ve a codepen punto IO. Y ya estoy conectado a CodePen para hacer una búsqueda, va a pedirte que inicies sesión Y una vez que inicies sesión, podrás realizar búsquedas. Busqué tarjetas. Y la diferencia entre CodePen y UIers es que el verso de la interfaz de usuario tiene elementos un poco más generalmente más simples que son solo Eso es. La gran parte de los UIV es que son fáciles de implementar porque están limpios Son Javascript puro, lo siento, HTML puro, CSS puro, y van a estar funcionando de inmediato cuando implementemos esto y lo dejemos caer dentro del código incrustado en Webflow CodePen funciona de manera un poco diferente. CodePen tiene HTML, CSS, JavaScript, y además pueden tener diferentes bibliotecas y frameworks y dependencias Para que puedan ser más poderosos. Por eso se puede ver un poco más. Algunas personas incluso simplemente dejan caer aquí todos los diseños de páginas de préstamos y diseños de sitios web. Como puedes ver, son páginas enteras aquí las que se comparten. Obviamente, eso no es lo que queremos. No queremos que se implemente toda la página. A veces los juegos, las cosas raras tienen, ya sabes, interesantes animaciones y componentes. Para que puedas obtener buenas ideas que obviamente no implementaríamos toda la landing page. Encontraríamos algunos componentes pequeños, cosas realmente útiles como esta, las tarjetas, esto también que tienen buena animación. Entonces, una vez que encuentras algo que te guste, entras y obtienes esta vista con HTML, CSS y JavaScript. Y así es como se verá cada lápiz de código. Se puede cambiar el tamaño de esto, y este es el código, y este es el patio de recreo, no el patio de recreo, sino en realidad la vista del componente en sí Y a veces tendrás tal vez solo HTML y CSS y no Javascript y a veces tendrás los tres idiomas depende del propio lápiz. Otra cosa a considerar aquí es que el código dentro CodePen podría no ser CSS puro o JavaScript y no está en este ejemplo Este está usando preprocesador llamado SCSS, y este está usando la biblioteca jQuery, que no es Javascript puro, y es una dependencia que se está extrayendo Ahora, la IA va a entender esto porque van a entender cómo está escrito y van a entender que está usando estas dependencias, pero podemos decirle que no lo use Entonces lo que vamos a hacer es, como siempre, simplemente agarrar este código y luego iremos a uno de los LLM, y te diremos que lo adaptes a nuestras necesidades Entonces esta vez, voy a usar Gemini porque me topé con los límites en Cloud, y es una buena demostración para ver cómo funciona en un LLM diferente Entonces aquí está y el proceso va a ser el mismo en los tres LLM Ahora bien, lo que vamos a hacer aquí, vamos a decir que reutilice este componente, y voy a usar algunas palabras clave que necesitarías usar en esos casos Y la palabra clave es, en este caso, del lápiz de código. Porque CodePen tendrá algunos matices, y es un buen contexto para alimentar al chatbot Entonces entienden que, bien, estamos agarrando este código de CodePen, y si ahí hay algunos matices, va a incluir eso y lo sabrá por Y luego otra cosa la vamos a contar para Webflow, código y malo Y ese es otro matiz que sí necesitamos contar porque si es un código Webflow y malo, potencial, ojalá entienda queremos que este sea uno para salida HTML que podamos pegar dentro, y no estamos construyendo realmente un entorno independiente cuando tenemos diferentes archivos comunicándose entre sí Y luego le vamos a dar cuenta para que sea una implementación vainilla. Y esa es otra copalabra. Este es básicamente un término técnico para decir implementación vainilla o vainilla. Lo que significa que no hay consulta J, no reacciona , no CSS, queremos que sea puro regular bueno viejo JavaScript y CSS. De esa manera, funcionará en cualquier navegador de inmediato, y funcionará dentro de Webflow, y no tenemos que extraer ninguna dependencia que potencialmente podría entrar en conflicto con el entorno Webflow Entonces no queremos eso. Solo queremos JavaScript y CSS puros. Entonces funciona fuera de la caja. Otra palabra clave que queremos contarle. Es otro contexto que necesitamos alimentar a la IA es que estamos haciendo esto en un sitio web existente. Así que tenemos que asegurarnos de que entienda ese contexto, que esto es solo un poco de un componente que vamos a pegar dentro de nuestro sitio web existente. Entonces se lo diremos. Necesita trabajar en un sitio web existente. Y aquí tiene estas referencias. Hay un enlace al autor. hay algo del Aquí también hay algo del autor, así que podemos deshacernos de esto. No necesitamos acreditar. Esto es de código abierto, y podemos usarlo. No necesitamos acreditar a los autores del código pent, así que solo podemos deshacernos de él Así que eliminar cualquier se refiere a autores. Y ahora empezamos a pegar el código, agarrar HTML, pegarlo, shift enter, agarra CSS, Shift Enter, wrap, JavaScript Turno. Bueno, ya está ahí. Enfrentarlo. Y si tienes planes pagados, esto es un poco más complejo. Entonces es por eso que los planes pagados y los modelos pagados de nivel superior van a hacer un trabajo mucho mejor aquí. Y los tres modelos usualmente te permitirán incluso en el plan libre jugar con modelos más inteligentes, como pensar y P. Y en este caso, probablemente intentaré pensar porque P llegará al límite muy rápido y en caso de que queramos comunicarnos con él. Um, pensar ya podría hacer un trabajo decente. Entonces voy a usar el pensamiento. No quieres hacerlo rápido. Probablemente también harás el buen trabajo, pero quiero dárselo a pensar, así que empieza a considerar cosas de las que le dije que es un código Webflow embed, que lo queremos vainilla, lo queremos en el sitio web existente, así que simplemente no escupe de inmediato. Probablemente también harás el buen trabajo, pero quiero dárselo a pensar, así pero quiero dárselo a pensar, que empieza a considerar cosas de las que le dije que es un código Webflow embed, que lo queremos vainilla, lo queremos en el sitio web existente, así que simplemente no escupe de inmediato Entonces considera esas cosas. Entonces eso es en Gemini on Cloud seleccionarías como modelos superiores de Opus, y lo mismo con Chacha PT, modelos de pensamiento superior Y veamos esta vez, va a tomar un poco más de tiempo ya que también le decimos que piense un poco más de ello y le demos algo de tiempo, y veamos cuál va a ser el resultado. Todo bien. Entonces lo terminó. Entonces veamos qué es. Este es el plug and play. Bueno. Nosotros sí queremos que se conecte y juegue. He convertido S CSS a Vena. Ahí vas. lo entendí. Se reemplazó el jQuery con vanila javascript. Genial, genial, genial. Eso es lo que queremos. Y se eliminaron todos los créditos de Autor. Para usar el Webflow. En Webflow, simplemente pega todo el bloque a continuación en un elemento de inserción de código Genial. Bien. Entonces nos dio un código completo de una sola vez. No nos dio como HTML separado, CSS separado, solo nos dio todo de una vez. Eso es exactamente lo que queremos. Y podemos simplemente copiar todo desde aquí y veamos cómo va a funcionar. Y en Webflow, de nuevo, vamos a agregar código y malo y pegar todo aquí Y vamos a darle un vistazo rápido. A ver. Entonces el guión está aquí, bien. Eso es HTML, todo eso. Eso es CSS envuelto muy bien en las etiquetas de estilo. Y es jalar, lo que es impresionante de la fuente. Bien, entonces está usando una dependencia que este código ya incluyó, que son los iconos. Y ahora potencialmente no podríamos usar esta dependencia, deshacernos de esto desde arriba y alimentar al LLM con íconos propios Entonces podemos dar que subiríamos, como hicimos con imágenes, subiríamos íconos SPG y te lo diríamos también, reemplazamos íconos con esto y esto y este iconos SPG de estos enlaces Pero esto está bien ahora mismo. Definitivamente podemos usar esto. Es una fuente gratuita Awesome es como un conjunto de iconos gratis, que funciona como una fuente, por lo que no tienes que aplicar todos los iconos usando una imagen, lo cual es una herramienta muy útil donde sacas toda la fuente aquí, y luego puedes hacer referencia a ellos dentro del código. Guarda y cierra, y veamos cómo funciona. Bien, creo que se ve bastante bien. Vamos a darle una prueba. Trabajando muy bien. Bonito. Aquí hay algunos temas, como pueden ver, el texto está un poco tambaleante y se alinea al centro, pero aparte de eso, todo está funcionando Ahora bien, si haces esto tu cuenta y tienes algunos otros problemas, y podrías encontrarte con esto porque la IA no es predecible. Hay que orientarlos correctamente. Y dependiendo del modelo que uses, si es rápido, podrías cometer algunos errores. Si es un modelo mejor pensante, generalmente hará el mejor trabajo. Entonces, si tienes problemas, una captura de pantalla. Entonces básicamente tomarías una captura de pantalla como esta y le dirías, Bien, esto está desalineado o algo así, ¿y cómo lo arreglo Y entonces usualmente te darás una respuesta, y luego podrás aplicarla. Siempre y cuando el tema no esté dentro de Webflow o algo que venga del Webflow, que en este caso, esto en realidad lo es, y ahora voy a mostrarles de dónde viene eso Ahora, debido a que tenemos este centro alineado, se aplica sobre el contenedor, como puedes ver la línea central, que caerá en cascada hacia abajo, y todos los elementos dentro heredarán esto Entonces, como puede ver, el código y el elemento bed está heredando esto del contenedor seis ¿Bien? Entonces es center align, lo que significa que si el código embed está heredando, significará que todo dentro, los estilos de fuente dentro heredarán esto a cambio del código y la cama a menos que se dejen explícitamente alineados dentro, lo cual no lo son dejen explícitamente alineados dentro, lo cual Entonces, lo que vamos a hacer aquí es que solo vamos a seleccionar código y cama y simplemente cambiar esto para alinear a la izquierda, y eso es todo, y eso debería funcionar. Y ahí tienes, eso ha funcionado. Y otra parte que podemos probar aquí es que como pueden ver, esto es un poco hueco aquí, mientras que donde está nuestro original original no tenía esa brecha. Está muy bien centrado. Entonces lo que podemos hacer aquí es que podemos yo podría capturarlo, pero creo que va a entender si lo digo. Por lo general, sería bueno si sabes decirlo. Si no, también podrías hojear el código C, y podrías ser capaz de entenderlo realmente en función de lo que se quiere porque se trata de clases con nombre humano, o humano llamado esas clases Entonces entenderás sombra, lo llamaron opción activa. Entiendes eso, ¿verdad? Opción etiqueta activa, probablemente una de esas etiquetas debajo, info, ¿bien? Y si etiquetamos icono. Bien, entendemos. Entonces ese es el ícono de la etiqueta. Sabemos dónde está el icono y etiquetamos info en color blanco. Entonces eso es probablemente texto, info main bold, Ifosab y también más fácil ver porque solo puedes buscar esquí para el texto, texto real que se estaba incluyendo aquí en Entonces esta rubia key sis, no sé qué es eso, pero como pueden ver, podemos encontrar ese texto dentro del código. Y entonces podemos ver que, bien, la clase es clases principales sub aquí, entonces es info main y sub. Así que podemos hacer referencia a eso y decirle a la etiqueta text info main y sub tener un poco de un hueco blanco que. No son tan ajustados como lo fueron en el componente Mginal Y bien, veamos qué nos dice. La brecha es probablemente causada por el espacio en blanco pre propiedad preservando los saltos de línea, bla, bla, bla. Reemplace la información de la etiqueta. Bien, entonces no actualizo todo el asunto. Te podemos decir que actualices o podemos ver si podemos reemplazar fácilmente infosección de etiquetas en tu CSA con esta versión titán, información de etiqueta, todo eso, ¿verdad Para que podamos encontrar esta cosa exacta. También lo podría decir simplemente regenérelo otra vez para mí. Google lo ha entrenado para que no regenere todo el código desde cero porque les va a costar más potencia de cómputo Entonces es ser perezoso y nos está diciendo que solo lo hagamos tú mismo, lo cual podemos hacer y podemos decir, Bien, nos está diciendo que reemplacemos infosección de etiqueta en tu CSS con esta versión titán Bien, encontraremos información de etiqueta, info info main info sap. Información de la etiqueta. Encontramos información de etiqueta, info significa aquí, e info sub aquí. Entonces eso significa que vamos a tener que ellos no van de una sola vez, así que vamos a tener que reemplazarlo aquí. Y entonces ahora infomin ya tenemos eso. Así que vamos a quitar esto de aquí. Y info sub, es redundante. Esta es la versión antigua. Esta es la nueva versión que pegamos, así que la quitamos Y veamos, cruzamos los dedos. Nunca se sabe con la IA. No está mal. Funcionando bien. Espaciado más estrecho Bastante bien. Otra modificación y corrección que podríamos necesitar hacer es responsive. Veamos cómo se ven en diferentes tamaños. Esto se ve bien aquí, y aquí ya se pone un poco apretada. Podría funcionar aquí. A ver si va a funcionar en el móvil. Y en el móvil, solo tenemos uno, y ni siquiera sabemos lo que está pasando aquí. Todo bien. Entonces volveremos a Géminis y le diremos que lo haga receptivo. Y ojalá se te ocurra una idea de qué hacer con el responsive. Potencialmente, podría hacer un apilamiento vertical en lugar de horizontal. Obviamente, en el móvil, no se puede hacer horizontal, ¿verdad? Entonces no hay espacio. Entonces veamos si él ella, quien sea el Gemini, va a entender cómo hacer esto receptivo para hacer esta respuesta cambiaremos el layout de pila horizontal a vertical. Bonito. También he mantenido bien el espacio titán, reemplace el bloque en su Webflow y embebido pero realmente perezoso en estos días No me está dando todo. Ahora me está diciendo que solo reemplace el estilo. Bien podría darme todo el HTML, hombre. ¿Qué te pasa? Bien. Volvamos. Entonces ahora nos está diciendo que reemplacemos el estilo, ¿verdad? Nos dijo que reemplazáramos el bloque de etiquetas de estilo en su incrustación de Webflow con esto Entonces esta es nuestra tecnología de estilo. Aquí es donde comienza, y eso va a lo tenemos seleccionado, a lo mejor destacamos donde termina. No resalta. Entonces aquí es donde termina, como pueden ver, cerrando estilo. Entonces lo que vamos a hacer es seleccionar todo eso eliminar eso y pegarlo. Si no quieres hacer eso, solo pídele que regenere todo el asunto y me dé el HTML completo una vez más Y veamos. Guardar y cerrar. A ver si no se rompió nada. No es bueno. Y ahí tienes. Está trabajando en vertical. Aquí, tiene sentido. Se ajusta. Aquí ya no cabe, y es bueno. Entendí que aquí no necesitamos cambiar, pero en el móvil, sí necesitamos cambiar y podemos cambiarlo. Y obviamente, esta es ahora mi página no es estilo. Necesito el relleno aquí. Por eso no es que podamos hacer eso, por ejemplo, dar la sección sobre encabezamiento, que no esté siendo apretada aquí. Y ahora no están en cuclillas con el filo, y eso está funcionando bien. Es bastante bueno. En cualquier otra modificación que quisieras, le dirías que lo haga. Reemplazando imágenes, le pedirías que reemplace imágenes, o también puedes hacerlo a través del código. Puedes encontrar fácilmente la URL de la imagen. HTPS esta cosa y lo copiarías de aquí. Una de las imágenes, copiarías eso, copiarías enlace, y luego simplemente reemplazarías eso dentro del código o pedirías a AI que lo hiciera. Eso es todo y espero que esto haya sido divertido y no demasiado complicado. Y si golpeas algunos temas, solo avísame en las preguntas y respuestas y te ayudaré. Definitivamente no es algo que el 100% del tiempo vaya a resolver. Cada bolígrafo de código tiene sus propias peculiares. Están usando diferentes dependencias. Están usando diferentes propiedades que podrían ser compatibles en todas partes. Y cada LLM e IA también lo procesarán de manera un poco diferente Y a veces mismo LLM e IA el martes, va a hacer esto, y el miércoles, va a decidir darte una solución completamente diferente, ¿verdad No se garantiza al 100% que cada solución va a ser la misma. Pero aún vale la pena intentarlo, vale pena experimentar con esto, sobre todo hoy en día La IA hace que sea mucho más fácil expandir tus habilidades y expandir tus habilidades de diseño web y Webflow Esta también es habilidad transferible. No importa si estás haciendo esto en Webflow o en cualquier otra herramienta de diseño web, o si lo estás codificando a mano, esto es decir que esto no tiene que ver con el weblog código que estamos obteniendo aquí es código HTML y CSS que cada constructor, cada constructor de IA o constructor no AI, lo que WordPress todo el mundo usa exactamente lo mismo. Así que HTML y CSS en todas partes. Entonces es algo bueno aprender para ti. Y si tienes tiempo, recomendaría encarecidamente que tomes un curso de HTML muy fundamental, básico desde CSS y JavaScript, súper, súper fundacional, nada complicado para que solo obtengas alfabetización sobre cómo estas cosas están conectadas entre sí No es que necesites entender cada propiedad y todo, cómo hacer sino entender el texto, entender cómo se comunica HTML con CSS y cómo se comunica CSS con HTML y cómo se juega JavaScript en todo esto y cómo se hace dentro de un archivo HTML versus tres archivos diferentes de HTML, archivos separados, CSS, archivo separado, JavaScript, archivo separado, que suele ser como compilan y construyen los sitios web. Por lo que sería un muy buen conocimiento fundamental para ti, y definitivamente te ayudará y aumentará tus habilidades y te hará usuario más avanzado tanto de Webflow como de cualquier otra herramienta de diseño web 181. Photoshop: cómo crear un recorte elástico: Muy bien, es hora de un poco de Photoshop. Tutorial para la mayor parte del diseño, Figma es suficiente, pero en algunos escenarios no podemos prescindir de Photoshop. Esta es una de ellas. Si aún no tienes Photoshop, puedes obtener una prueba gratuita de siete días. Y si quieres comprarlo, cuesta alrededor de $10 mensuales, lo que incluye Photoshop, light room, y todos los teléfonos de Adobe y un 20 gigabyte de su espacio de almacenamiento en la nube. Puedes descargar la versión de prueba de Adobe.com slash downloads o simplemente descargar Google Photoshop en caso de que ya hayas usado tu prueba de Photoshop de siete días en el pasado, entonces puedes probar affinity photo Es una muy buena alternativa a Photoshop y la mayor parte de la interfaz y cómo funciona todo es bastante similar a Photoshop. He incluido los recursos de enlace, tiene una prueba gratuita de diez días, aunque no voy a estar demostrando esto cómo hacerlo en afinidad, pero como hay dos muy similares, probablemente descubrirás probablemente descubrirás cómo hacer que funcione dentro de la afinidad también. Bien, volvamos a Photoshop. Después de pasar por el proceso de instalación, esta será su pantalla inicial. Haga clic en Abrir y seleccione el archivo de foto. He incluido esta imagen en los recursos de esta lección, para que puedas trabajar en la misma foto si quieres una cinta rápida para salvar vidas en Photoshop Cuando empecé a usar Photoshop, terminaba perdiendo algunas herramientas y opciones. Frecuentemente, veía tutorial de Youtube para aprender algo, pero entonces no podría encontrar una herramienta que estuvieran usando en el video. Photoshop tiene muchos atajos y pocas opciones donde puedes cerrar fácilmente alguna pestaña o eliminar una herramienta y así sucesivamente. Terminaría con pistola de caja de herramientas, sin panel de capas, y sin idea de cómo volver a ponerlas. Así que ya no podría seguir un tutorial porque la herramienta no está ahí, pesadilla para cualquier principiante cuando intentas poner tu mano alrededor este nuevo software y de este nuevo software y aprender muchas cosas al mismo tiempo, perdería mucho tiempo averiguando cómo volver a ponerlo Aquí está el truco de cómo devolver todo a la normalidad. En caso de que estropees algo, ve a este ícono aquí mismo y selecciona Esenciales. Si eso es lo que ya has seleccionado, haz clic en restablecer Essentials. Y esto devolverá el espacio de trabajo al valor predeterminado tal como estaba fuera de la caja la primera vez que lo instalaste. Esto incluirá dos pestañas adicionales. Este aquí es el tutorial de la guía de Photoshops de algunas cosas esenciales. Te recomendaré que lo revises más tarde si es tu primera vez con Photoshop. Bien, no necesito estas dos pestañas aquí mismo, así que voy a cerrarlas. Si este método aún no devuelve todo a la normalidad, entonces eso significa que has cambiado algo en las preferencias, en ese caso, ve a Preferencias en Windows, esto está en Menú Editar, y selecciona General. Y haz clic en Restablecer preferencias en Salir, Reiniciar Photoshop y todo volverá a la normalidad. Ten en cuenta cualquier preferencia que hayas cambiado intencionalmente en el pasado y que se vaya a ir a. Bien, volvamos a nuestra foto. A menudo encuentras la imagen correcta de tu proyecto, pero no es del tamaño adecuado. Esta imagen, por ejemplo, hará una gran foto de fondo. Está limpio, es sencillo. Tiene un gran contraste de color, pero tiene un problema. La separación entre la playa y el agua corta justo a través de la mitad de la imagen. Ninguno de los lados es lo suficientemente amplio como para alojar nuestro contenido, pero si pudiéramos estirar un poco más uno de los lados, entonces tendríamos un arreglo perfecto. Por suerte, podemos hacer eso en Photoshop. Dentro del panel de capas, verás este bloqueo en la capa. Esto significa que la capa está parcialmente bloqueada y muchas maneras no será editable como cabría esperar Simplemente haz clic en este candado para desbloquear la capa. Ahora selecciona esta herramienta de recorte. Tendrás estos manejadores alrededor de la imagen, arrastra el lado en el que quieras crear el recorte elástico. Esto solo extiende los límites de nuestra mesa de trabajo. Haga clic en la marca de verificación Una vez hecho esto, por lo que compromete el cambio. Ahora selecciona esta herramienta de marquesina rectangular en caso de que veas algo más aquí, haz clic derecho sobre ella Esto abrirá todas las demás herramientas que forman parte de este grupo. Ahora arrastra y selecciona la parte que deseas estirar. Asegúrate de seleccionar piezas que no tengan ningún detalle en él, algo que ya esté borroso o uniforme No se puede hacer esto con personas u objetos. Esto se puede hacer solo en fondos y partes borrosas y así sucesivamente Selecciono Extra en el lado izquierdo solo para asegurarme de que todo el borde esté seleccionado. Una vez seleccionado, vaya a Editar y transforme libremente. También puedes presionar control o comando, tal como se muestra aquí mismo. Ahora solo arrastra el mango izquierdo y estira la imagen tanto como creas que es correcto. Y luego haz clic de nuevo en la marca de verificación, esto compromete el cambio que estás haciendo a la selección. Si tienes espacio extra aquí, selecciona Kroptolgain y recorta Ahora tenemos una imagen que tiene una buena cantidad de espacio, así podemos poner nuestro contenido para guardar esa imagen. Simplemente haga clic en Archivo, Guardar como y seleccione J. Eso es todo. 182. Photoshop: tutorial de recorte de recorte: contar un objeto de su fondo es mejor hacia abajo en show fotográfico o foto afinidad. ¿ Hay algún otro software similar, que es para manipulación de fotos? Empecemos. La parte más importante de cortar con éxito un tema es en realidad escoger la foto adecuada a las cosas a las que debemos prestar atención. ¿ Están fuera del tema los antecedentes y la posición? Idealmente, queremos un fondo que sea llano y contraste realmente bien con el tema. Recortar temas de antecedentes difíciles puede ser un trabajo tedioso, y lo último que quieres es gastar medio Knauer para recortar una situación modelo en tus deseos y darte cuenta de que el modelo no es un buen ajuste. buen diseño suele ser un resultado fuera de muchas direcciones. Imagina Iterando entre tres recortados de sujetos, enviando la versión final a tu cliente para su revisión y luego subir vuelve, diciendo que la modelo no es realmente su público objetivo, y quieren a alguien un poco mayor y vestir un poco más fantasioso. Eso te va a volver loco. Si recortar tema no es un trabajo rápido y directo. El segundo importante, hecho, es la posición fuera del tema en la foto, recortando a una modelo que está de humor sentado y tiene mucho sentido. Tendríamos que recrear la misma posición que estás diseñado, así que tendríamos que, ya sabes, hacer que el modelo se siente en algo que es muy similar tamaño y forma en nuestros diseños también , y que es demasiado. Necesitan menos trabajo. Las posiciones de frente de pie son las mejores para recortes y todos los ángulos de cámara como estos solo están pidiendo muchos problemas durante el proceso de diseño. Porque la cámara la está mirando desde los lados desde la parte superior delgada. El espacio en el que la pondrás tiene que reflejar eso también. Es realizable, pero te tropezarás con obstáculos y limitaciones para tus diseños. Estas foto, pesar de que en un fondo llano sigue siendo una mala opción, ignorando la parte cuando está, ya sabes, mirando hacia fuera de la cámara porque lleva un top blanco y frente a un blanco tienda de fotos de fondo tendrá dificultades para detectar los bordes entre el fondo y el jersey en Splash por lo general no es el gran lugar para encontrar este tipo de fotos. La mayoría de las fotos aquí se toman en escenarios de la vida real fuera del estudio, cual no es malo. Ofrece una buena selección de fotos de stock que no parecen stock. Pero para imágenes aisladas, el mejor lugar se pagan lados de acciones, Por ejemplo, big stock dot com. Si añades una palabra clave, remolque aislado lo que estés buscando, te dará principalmente tomas de estudio sobre fondos llanos. Estas fotos funcionarán lo mejor para recortar el proceso de presentación fotográfica será súper sencillo , y el ángulo y posición de la cámara del sujeto serán excelentes para tu trabajo. Este es otro lado de acciones pagadas fotos dot icon ST dot com. Ofrecen una selección de fotos, principalmente sobre fondos llanos. Es gratis para uso personal, así que voy a escoger una foto de aquí. Este es un excelente trabajo fotográfico con para recortes completos de materia. El fondo está jugando en un solo color, y hay una clara separación entre el sujeto y el fondo. Es un trabajo fácil. Puedes escoger esta foto exacta para seguir o elegir otra cosa. Vincularé la imagen y los recursos. No voy a demostrar eliminación de antecedentes en fotos difíciles. Ni siquiera quiero que aprendas a trabajar con antecedentes difíciles. De esta forma nos aseguraremos de que te metas en el hábito de buscar las fotos adecuadas. Cuando se trata de aislar el tema para fotos difíciles, hago otra cosa. Yo sólo corté una pequeña parte de la imagen. Esto lo demostraré más adelante. De acuerdo, entonces vamos a abrir nuestra imagen. Desbloquea la capa haciendo clic en este icono de candado desde la caja de herramientas en los zapatos de la izquierda. Puntera de selección rápida que se cierne sobre una herramienta te dirá qué días es esto. El recorrido utilizará para seleccionar la modelo y aislarla del fondo. Ahora selecciona las opciones de pincel a través del tamaño que no es demasiado grande o no demasiado pequeño, para que podamos seleccionar fácilmente el tomate y ajustar la dureza al 100%. Ahora empieza a seleccionar la modelo desde el centro y lentamente cubre toda su forma. Asegúrate de que esas líneas animadas estén rodeando sus bordes y nada más que seleccionar con mayor precisión, haciendo zoom muy de cerca pellizcando tu toque gordo o aguanta o tecla de opción mientras usas rueda del ratón. Para obtener un mejor control sobre tu selección, aumenta o disminuye el tamaño de tu pincel. Hay un atajo a esto para que no tengas que ir al panel de ajustes del pincel todo el tiempo . Simplemente haga clic entre corchetes. Tecla izquierda. Uno disminuye el tamaño del pincel y el correcto lo aumenta. Si te apetece algo extra, aguanta o tecla de opción y verás que tu herramienta de selección ahora tiene un menos en ella. Cuando sueltas, vuelve al plus por lo que más se suma a la selección y menos resta. Aguanta y empieza a quitar áreas que más selecciónalo si cometes un error y quieres volver bajo subasta y photoshop realmente funciona un poco raro. Recuerdo que fue muy molesto para mí al principio. Sigue siendo porque no funciona como lo esperarías. Por lo que el control regular Z o comanda un Mac joven va de ida y vuelta en tu última acción. Entonces si quieres bajo la última acción que funcione como esperabas. Pero si vuelves a presionarlo, rehará la última acción. Por lo que presionarlo mucho tiempo sólo va de ida y vuelta, me condujo no la primera vez que estaba metiendo en la tienda de fotos. El real en Do see aquí en las opciones Editar se llama Step Back Board y tiene un atajo con una opción out en él. Este es tu habitual bajo y se comporta como esperarías que se comporte en ventanas, que probablemente debería ser control. Ya veré, pero por si acaso, doble cheques y simplemente entra en la edición y luego ve a dar un paso atrás y ver cuál es el atajo al lado. Consulta tu dirección y asegúrate de no perderte ningún spot. No te preocupes demasiado por el cabello suelto. Simplemente selecciona la línea principal y luego arreglaremos el cabello más tarde, después de que hayas terminado de seleccionar click, Seleccionar y enmascarar aquí mismo. Esto en realidad está disponible en los lanzamientos más recientes de Photoshopped. Si tu versión no tiene esto, entonces busca refinar ach! Funciona casi de la misma manera, pero este nuevo futuro selecto y máscara es más superior aquí. Vamos a limpiar nuestra selección para que podamos obtener el resultado perfecto. Aquí te dejamos otra punta importante de Photoshopped. Asegúrate de tener seleccionada una capa correcta. Este es el panel de capas, igual que fig MMA. Si tienes más de una capa. Asegúrate de citar el que tiene la foto en él. De acuerdo, entonces aquí dentro, por defecto, esa transparencia se reduce. Es una transparencia fuera de nuestro fondo y todo lo que no hemos seleccionado deslizándose. Esto no afecta cómo se verá nuestro corte como si fuera una guía para nosotros. 0% muestra la imagen original y alturas completas y 100%. Todo lo que no hemos seleccionado. Es útil recibir con Mr cualquier detalle. Aumentémoslo al 100%. Como puedes ver, hay algunas imperfecciones en su cabello. El fondo rosado está pasando por su cabello. Pongámosla sobre un fondo blanco desde aquí para ver mejor que comer casa cambiar su paso al 100%. Aquí está bien, esta vez dice rapacidad en lugar de transparencia porque el fondo blanco está encima del fondo original, Así que 100% opacidad significa que es 100% visible. No te preocupes demasiado por esto. El cabello necesita algo de fijación. Además, si acercamos de cerca su piel, los bordes son dentados y antinaturales. No hay un buen estándar para usar en cualquier diseño. El buen diseño se ve perfecto cuando se trata de pequeños detalles como este conoce todas las decoloraciones , y el gato fuera debe verse liso y natural, como si ese fuera exactamente el fondo en el que se le tomó. El fealdad fuera la mayoría de los recortes sale de los bordes cuando un justo no están bien refinados. Se nota, parece como si alguien realmente tomara una revista de papel de verdad y luego con tijeras cortadas. El modelo de su tienda de fotos por suerte es absolutamente increíble. Y arreglar esto para arreglar los bordes se cortan. Tenemos que seleccionar una herramienta de refinar y pincel a partir de aquí. Es el 2do 1 Mantén tu boca encima de él por un segundo, y te dirá cuál es ISS porque estos tres lucen bastante similares, igual que hicimos con el otro tamaño de pincel, el pincel del panel de opciones o mediante el uso de cuadrado soportes y poco a poco comienzan a cepillarse sobre los bordes de su cabello. Y mira esto. Lo que realmente está pasando aquí es que le estamos diciendo a Photoshopped que mire más allá de los bordes de nuestra selección original y vea si hay alguna parte que parezca que pertenecen a nuestra selección y al mismo tiempo que elimine píxeles que se parecen a ellos son parte de los antecedentes. Por eso ese Ping ha desaparecido. Usando el deslizador de opacidad, revisa otras piezas que se han perdido en caso de quitar un poco extra, igual que otro precio de herramienta on out u opción. Ya verás que es un signo menos. Esto restaurará el borde original y luego se cepillará de nuevo mientras sigues sosteniendo la llave hacia fuera. No te preocupes, no va a restar de la selección original. Básicamente es deshacer lo que acabamos de agregar. Su cabello se ve decente, pero todavía hay algo de cuello rosa cayendo sobre sus bordes Lo quitará más tarde. Vamos a revisar el resto de sus bordes ahora. Podemos, por supuesto, vuelta en todo su cuerpo con esta herramienta de afinar ach. Pero hay una forma más rápida de hacerlo en piel y partes que son bastante simples y uniformes. A diferencia del cabello que se hace por aquí. Detección de bordes. Es el mismo concepto que el dedo del pie refinado. Con esto, podemos decirle a Photoshopped que mire más allá de nuestra selección y vea si nos hemos perdido alguna pieza. Está en píxel, por lo que un píxel significa mirar un píxel después de la selección y agregar cualquier parte que falte. Preste atención a cómo se desplaza los bordes a medida que aumentamos dos píxeles. Misma disentimiento en este caso, radios inteligentes significa en lugar de usar un uniforme a pixeles radios en todas partes, usará valor personalizado dependiendo del borde. Es útil si estás usando valores grandes, pero me gusta arreglar impar. Ajuste manualmente con la herramienta refinar arista. En ocasiones notarás que tienes algunos parches extra como este cuando estabas haciendo la selección, o en realidad te has perdido algunos spots volviendo atrás y arreglar la selección después de poner tanto trabajo va a ser desgarrador . Por suerte, podemos agregar o quitar las manchas aquí mismo con una puntera de pincel. Como de costumbre signo plus agregará en cualquier pixel C click en sentirás que esto funciona un poco diferente a las herramientas anteriores que usamos otras dos herramientas. Hacen cálculos en lugares donde presionas este no te basas en lo que presionas, y un último paso que tenemos que hacer es quitarle ese resplandor rosado de su cabello que se puede hacer automáticamente desde aquí. Seleccionar collares de descontaminar. Dale un momento y Walla. Ahora la mayor parte del ping de su cabello se ha ido. Qué trabajo increíble hizo. Este paso es muy último porque si tienes el seleccionado después de cada click que hagas, esto volverá a recalcular una y otra vez hará que las cosas sean mucho más bajas. A pesar de que algo gracioso sucedió aquí, vamos a ver si podemos arreglarlo con herramienta refinar borde. De acuerdo, Dios, en realidad todavía escogió una foto poco complicada. Idealmente, elija una foto que tenga un fondo liso blanco o gris. fondos fríos sí terminan mezclándose con los bordes. Está bien, ahora, vamos a cortar la salida. Tenemos algunas opciones aquí, los bastardos para elegir nueva capa con una máscara de capa. Pero esto sí. En lugar de cortar todo, copiará la foto original y le aplicará una máscara. Esta misa ocultará el fondo y todo lo que hicimos. Esta es la mejor opción porque si notamos algo más y queremos hacer algún cambio, podremos. Con la nueva opción de capa que queremos, el fondo se irá para siempre. Dentro de las capas verás. Además, la foto original sigue ahí en su abajo, pero deshabilitada, por lo que no es visible. Molesta nuestra copia con la máscara. Aplica a ella ese negro y blanco Sylar Es la máscara o se pone El paso final es guardar nuestro archivo. En primer lugar, vamos a guardar Este es un archivo de la tienda de fotos para cualquier adicto futuro. El resto del diseño estará haciendo en fig MMA. El archivo Photoshopped no puede ser importante en Sigma, por lo que tenemos que usar archivo PNG. PNG es el que mantendrá fuera la transparencia de nuestro gato. J pack no va a funcionar porque va a llenar el fondo de cuello blanco. Cuando exportemos esto a PNG, cualquier capa que sea él no será incluida en la exportación. Para que no tengas que eliminar estas capas. Sólo escóndelo. También, me gustaría recortar el espacio extra, seleccionar el cultivo a y arrastrar la dirección, ir al archivo de exportación y exportadores rápidos. PNG. Ahora podemos colocar esta imagen en fig ma y recoger cualquier fondo que queramos. Y así es como haces recortes en tienda de fotos 183. Photoshop: tutorial de palanca: Ahora voy a demostrar cómo cortar solamente una pequeña parte de una imagen es siempre la parte importante es elegir la imagen correcta. Puedes hacer esto con cualquier foto que puedas sobresalir, termina fuera del objeto como esquinas de mesa. Manos, piernas tenían ramas. Y así cualquier objeto que tenga una punta prominente primero arriba en este proceso para definir el contenedor de la imagen. El marco en el que se sienta porque estás sacando algo de ese marco. Si vas a usar la foto como una foto de fondo completa que dirección fuera de tu marco, en realidad no son visibles. No se puede sobresalir nada. Voy a trabajar en esta imagen. En este tutorial. Yo he vinculado la misma imagen para que puedas seguir adelante. Podemos sobresalir fácilmente ese año fuera del muelle. Eso significa que nuestro marco tiene que tener un borde superior si se estira de arriba a abajo fuera de la pantalla de lo que esta imagen no funcionará en absoluto. Pero si uso un marco como un círculo, por ejemplo, entonces puedo aguantar el año sin problema. Entonces enmarquemos primero la foto, igual que estamos haciendo fig Ahora vamos a crear una máscara. Vamos a usar la misma pregunta que antes en el método de recorte. Pero esta vez, en lugar de seleccionar la oscuridad de fondo, vamos a seleccionar una parte círculo de ese perro en el mercado. Muy bien, Haga clic en él y seleccione el salón del mercado elíptico. Esta es otra palabra. Seleccionar. Ah, ni siquiera sé qué significa Marqués. No arrastrando. Seleccione la cara fuera del muelle. Sostén el turno mientras haces esto para que puedas dibujar un círculo perfecto para conseguir un mejor mango. Puede presionar en la barra espaciadora para mover la selección alrededor. No necesitas conseguir esto perfectamente ahora mismo. Siempre podemos redimensionar y reposicionar la imagen fuera del perro. Posteriormente, como lo hicimos la última vez. Haga clic, seleccione y enmascara aquí arriba. Ya estás familiarizado con este editor de máscaras, pero no vamos a añadir un oír nada. En realidad, porque necesitamos una máscara de círculo perfecta. Por lo que de inmediato ir a las opciones de salida y seleccionar nueva capa con una máscara de capa como hicimos la última vez Allí. Ahora tenemos el mismo arreglo que en el método de recorte. Si necesita reposicionar o volver a escalar la imagen en su interior. Podemos hacer eso de manera similar, como lo hacemos en la Fig MMA. Seleccione primero la herramienta de movimiento. De forma predeterminada, grupo Mass está bloqueado para que pueda mover la imagen por separado. Es mover un grupo entero para mover sólo la imagen o simplemente una masa rápida en este enlace. Puedo escuchar que lo hará, a diferencia de la imagen de la máscara, y ahora puedes moverlas por separado seleccionando ya sea la imagen o la máscara de la lista de capas. Te darás cuenta de que la máscara en Photoshop es un espacio definido, como se definió originalmente. Por eso tenemos estos bits extra mostrando aquí. Si terminas con estos bits extra después de mover tu imagen alrededor, solo puedes recortar esto con un dedo del pie de corte. Por cierto, Photoshopped tiene este dedo del pie muy mandado llamado Panel de Historia. En lugar de deshacer una y otra vez, puedes ir directamente al personal al que quieras someterse. Me encanta esta herramienta de historia, y Photoshopped hace mucho más fácil deshacer. De acuerdo, entonces reposicionar la imagen en el interior es fácil. Basta con rastrear el daño alrededor pero para volver a escalar la imagen así como la capa de imagen y luego ir a adit y transformar libre. Ahora puedes agarrar las asas y redimensionarla como quieras. Aguanta, cambio, dedo del pie bloquea la relación aquí en mi cabeza. Me estoy imaginando en qué parte voy a sobresalir para poder posicionar correctamente la imagen. Ahora que hemos preparado nuestro mainframe en el que se sienta nuestra imagen, ahora podemos sacar ese año de ella. Para ello, básicamente vamos a cortar una pieza de los perros aquí como una capa separada y colocarla encima de esta capa existente. Por lo que el clic derecho en este grupo de masas y duplicar la capa. Ahora a la derecha, haga clic en la propia máscara. No toda la capa, sino solo una máscara y haga clic en dilatar la máscara de capa. Ahora tenemos la imagen completa encima de ella. Si cortamos un trozo del año a partir de esta imagen completa y quitamos el resto, obtendremos el efecto de palo out exacto que desearía. Entonces para hacerlo, hacemos el método de corte habitual, igual que hicimos en la lección anterior. Agarra una herramienta de selección rápida. Establece el pincel correcto de las opciones desde aquí, asegúrate de haber seleccionado el pincel con el signo más, no el menos. Ajuste la dureza al 100% y ajuste el lado derecho para que pueda seleccionar ese año gire fácilmente. Lo pasarán abajo para ver el borde del marco y seleccionarán en consecuencia. Puedes seleccionar más de la imagen en la parte inferior porque no nos va a hacer daño. Simplemente va a estar sentado encima de la foto existente. De todos modos. Eso se ve bien. Ahora haga clic, seleccione y enmascare. Estamos viendo las dos capas. Aquí te dejamos la capa de marco, y apenas un año después, cambiemos el dedo del fondo blanco por ahora para que podamos refinar el borde del año. Recuerda cómo refinar insignias, Selecciona la arista refinada a y pasa por encima de la dirección. O agrega, en cualquier pelo faltante o cualquier otro píxel que falte. Como mencioné antes con esta historia, le estamos diciendo a Photoshopped que mire más allá de nuestra selección y detecte cualquier píxel que falte. No tienes que refinar la base fuera del año. Se fusionará perfectamente con la imagen de fondo, Ahora ve a la configuración de salida y selecciona nueva capa con una máscara de capa y pulsa OK, ahí. Ese es nuestro año sobresaliendo. Pongamos un fondo blanco en esto para que podamos ver mejor los resultados. Crea nueva capa y haz clic en la nueva sensación. Puedo escuchar seleccionar color sólido y elegir blanco. Ahora arrastra esa capa por debajo de todo. Si vas a usar un collar diferente en tus diseños reales, puedes duplicar rápido en el campo y cambiar la persona que llama para que puedas visualizar esto aquí mismo en un show fotográfico antes de exportar el resultado final. Por ejemplo, cuando pongo esto en un color oscuro, podemos notar que hay algún resplandor extra detrás de la oreja. Lástima que no revisé este refinando la selección, pero aún podemos hacer algún trabajo en esto. Incluso después de que se haya aplicado la máscara, la máscara sigue siendo editar herbal. Si hacemos zoom en la guarida de Máscara, verás que tenemos partes en blanco y negro. Las partes blancas son parte visible de la máscara, y las negras son parte oculta. Por eso la parte blanca tiene una forma fuera del aire. Si pintamos de ancho en esta masa, mostraremos más fuera de la imagen. Permítanme demostrar si selecciono una herramienta de pincel regular y dibujar sobre ella con pintura blanca. Se va a mostrar más de la imagen, y si conduje con una pintura negra sobre ella, ocultará lo que ya sea visible para cambiar entre pincel blanco y negro. Haga clic en este icono de flecha en la parte superior de estas cajas en blanco y negro. Lo que esté encima es el color actual del pincel. También hay un atajo. Puedes pulsar X en tu teclado, y luego cambiaremos entre los dos. De acuerdo, ahora podemos quitar el resplandor extra de detrás de la oreja. Voy a ajustar el pincel para que sea suave y emplumado, así que no creo ningún borde duro. En este caso, voy a disminuir la dureza por completo e incluso disminuir su paso al 50%. De esta manera cepillaré sobre las partes y de una manera suave y controlada, y ese es un mejor resultado. Puede que no sea ideal sobre un fondo negro, pero funciona bastante bien rápido para refinar esto durante la cara enmascarada. Y que no se olvide de revisar la vista sobre el fondo negro. Si planeas usarlo en fondos oscuros, el último paso es exportar daño vamos a exportar en PNG con el fondo transparente que donde tienes más libertad para elegir fondos directamente en fig mongering real proceso de diseño. Ocultar el fondo, recortar cualquier espacio extra y en exportación de archivos, haga clic en exportadores rápidos PNG. Y ahí lo tienes. Esto puede ser ahora importante dentro de Sigma y usar en diferentes fondos.