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

1. Descripción de la clase: Dos tipos de diseñadores web freelance. Primero, están crónicamente sobrecargados de trabajo y mal pagados, enviando todos los días propuestas en plataformas como Upwork y no consiguiendo suficientes trabajos Pero también tienes diseñadores web que tienen un flujo constante de clientes, generalmente clientes que los buscan en lugar de al revés. Incluso pueden despedir clientes con los que no es tan divertido trabajar y trabajar tantas horas al día como deseen. Y tienen libertad para trabajar desde cualquier parte del mundo. Lo sé, porque me acabo de describir. El diseño web freelance me dio libertad para elegir mi propio horario de trabajo, que es de aproximadamente 4 horas al día. Aún impactante para mis amigos sobrecargados de trabajo. Puedo tomarme días libres y vacaciones sin necesitar el permiso de nadie, que es mi parte favorita. Y puedo tomarme todo un año dedicándome a un proyecto personal, que es exactamente lo que hice para construir este curso Y si estás dispuesto a poner algo de trabajo, te enseñaré a hacer que esa descripción sea cierta para ti también, o la oportunidad de crear tu propia descripción personal. La mayoría de las personas que prueban suerte con 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 son tres y uno. Tres cursos para hacer frente a tres grandes obstáculos. El gran obstáculo número uno. Aprender a codificar solo les lleva demasiado tiempo. Cientos de miles de estudiantes inscriben en cursos de diseño web, pero solo el 10%, apenas el 10% lo logran hasta el final. Lo sé porque eso es lo que me pasó a mí. 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 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 JavaScript y todo eso. Ahora, como ya he trabajado en proyectos reales y sé lo que mis 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 investigué eso como 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. Y pensé que me quedaba tanto por hacer. 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 lo 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. Me quedé impresionado, amor a primera vista. Empecé a ofrecer a mis clientes el diseño y desarrollo de paquetes completos. Al instante estaba ganando tres o cuatro veces más dinero del que solía hacer. 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. Muy pronto, estaba cobrando $5,000 por un sitio web sin saber codificar Webflow se deshace del mayor obstáculo que jamás haya enfrentado , tiempo y dedicación para aprender a codificar un sitio web 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. Y Webflow no es uno de esos cojos constructores de gotas de dragón como Wix Webflow es una herramienta profesional hecha para diseñadores web profesionales y no para personas normales Aún necesitas aprenderlo porque aún necesitas aprender cómo funciona HDML CSS Aún terminas generando código, pero Webflow lo escribe por ti 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 teoría del color, tipografía, 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. ¿Correcto? 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 lateral, y luego desarrollarlo. 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 tropiezan 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. Te voy a enseñar consejos y trucos secretos de un trabajo independiente exitoso Te mostraremos los errores que cometen muchos freelancers. Obtendrás una poderosa plantilla de propuesta que he creado para ti. Aprendes los consejos secretos de Apwork la mayor plataforma de freelancing, donde comencé mi carrera de diseño web Por último, te voy a dejar ir con un regalo. Impresionante sitio web de portafolio que diseñé y construí para ti. 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 Estoy acoshwll y seré tu guía en este viaje. Ahora todo lo que tienes que hacer es inscribirte. 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 comenzar por el encuadre blanco 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 ya 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 weblow.com e inscríbase. Usa Google Chrome. El diseñador de Webflow trabaja mejor ahí dentro Después de registrarte, llegarás a alguna versión de esta página. O si estás en un tablero, haz clic en el botón Nuevo proyecto y elige sitio en blanco. Aquí es donde ocurre la magia. El sitio web está construido aquí mismo. 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. Como usuario por primera vez, obtendrás esta ventana emergente de incorporación. No necesitas atravesarlo, pero puedes si quieres. Además, agreguemos un encabezado y un párrafo dentro. Y escribir algo en él. Et es centrar 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 a Exportar código en la parte superior de la barra de herramientas, vas a ver el código real que Weblo escribió para nosotros. HTML muestra los objetos que hemos agregado como el contenedor, encabezado y un párrafo. Y dentro de CSS, verás los cambios de estilo que hemos realizado el relleno superior y la alineación central. Podríamos exportar este código y alojarlo en cualquier otro lugar. La página también funcionaría perfectamente fuera de weblo. 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. A 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. 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, que podamos hacer que la magia suceda y diseñar y construir un sitio web hermoso 6. 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 . 8. Assignment: 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. 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 se llama encabezado o por encima del pliegue. No vamos a hacer nada elegante, ni imágenes, ni texto, solo manojo de rac técnico como un garabato ¿Qué es lo primero que insertamos cuando iniciamos algún diseño? Marco derecho. Como he mostrado esto en el ttorial de Figma, podemos agregar un marco seleccionando una 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 nuestros sitios 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 fotograma en pequeños cuadrados que son de diez píxeles de tamaño Pero esta no es la grilla 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, y, 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. Las calificaciones 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. Es muy limitante. Para aplicar grado de 12 puntos del menú desplegable seleccione columnas, y en el condado 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 gustaría 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 gustaría crear un poco más de separación sep entre los objetos alrededor de 30 o 40 píxeles. Todo 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 muestra para Mac, que es Control G. En Windows, probablemente sea otra cosa, pero podrás verla si estás en Windows. Y 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 agregarlo, primero tienes que seleccionar ese objeto. La propiedad spanel se actualiza instantáneamente a medida que la 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 tu color de fondo y la cuadrícula no tienen un buen contraste, siempre puedes ajustar el color de la cuadrícula. Ver. 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 que va a ser nuestro bar. A veces me oirás usar barra de barrio como una barra de navegación corta. A mí me gusta ser preciso, así que voy a cambiar la altura de este rectángulo a siete píxeles 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í. Si mantienes shift 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. 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 marcador de posición 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 tuvimos que decidir entre dos tamaños en lugar de decidir entre cientos de tamaños de píxeles diferentes. A medida que recibas objetos, verás las guías inteligentes que aparecen cuando tu objeto se alinea con el borde de la columna de la cuadrícula Eso te ayudará a dimensionarlos con precisión. 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 este diez píxeles más pequeños y encajémoslo 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. Rojo Las guías rápidas te ayudan con la alineación. Sin embargo, Figma también puede hacer eso alineándose por ti. Primero, necesitamos seleccionar los objetos para alinear. 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. Ese es nuestro bar n. Ahora para el resto del contenido. ¿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. 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 la acción de nuestros héroes. Veamos cómo se ve sin la grilla. Ese es un ejercicio muy sencillo para que comiences y te sientes cómodo con Figma y practicar los pasos iniciales del diseño web No creamos nada útil, pero dimos un paso muy importante. A Jeff Pazos, el director general de Amazon, le encanta este dicho latino Paso a paso ferozmente. Así es como vamos a abordar este curso. Vamos a dar un paso a la vez, llevándonos ferozmente al gol final 9. 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. 10. Assignment: jerarquía visual: 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 vinculados 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 se duplicó. Tendrás que crear una copia del archivo antes de poder editarlo. 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. Recuerda cómo agregar eso. Tenemos que seleccionar primero el marco y luego la opción de cuadrícula aparecerá la opción de cuadrícula de diseño en la propiedad spanel Al igual que la última vez, Columnas 12 Canal de 30 píxeles, pero 60 píxeles de margen esta vez porque estamos usando un marco de libro mac más pequeño en lugar del escritorio La barra n encaja perfectamente en los bordes de esta rejilla porque esto es exactamente lo que estaba usando al diseñar la barra n. Por esa razón, podemos dejar la barra de navegación en esta 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 y 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. ¿Cómo lo hacemos? La última vez, utilizo 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. Esta foto está encubriendo la barra de navegación. Recuerda el panel de 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 de 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 a B. Esto enviará la foto hasta la parte posterior. Ahora el Navbar está en la cima. Pero debido a que el impuesto a Na Bar 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 Nabbar. Bueno. Hagamos algo similar con el botón. No es muy visible. Por supuesto, podría 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 o uno anarente Cambiar el fondo a whe y disminuir la opacidad del a aproximadamente diez a 20 a 20% Me gustan mucho los 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 descomposición. Ahora organicemos mejor nuestro contenido y creemos una jerarquía visual entre ellos. Primero, alinémoslos a la izquierda y encajémoslos en a. ahora tenemos que decidir cuál va a ser nuestro mensaje principal. 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, de estos dos datos, su nombre y abogado de divorcio de Boston, que 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. En ese 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 el titular aficionado, he elegido una fuente play for display y uso el estilo Black, 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 aprenderás 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 del teléfono se puede seleccionar desde aquí. ¿Cuántas opciones obtienes aquí depende la familia de teléfonos y con cuántos pesos viene? 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 teléfono 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 centro de atención, 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 el tamaño un más y eso es todo. El botón viviré como es, solo lo haré más pequeño, y eso va a ser suficiente para disminuir su importancia. Eso es todo, se ve bastante pulcro. ¿Qué tal la jerarquía? ¿Tenemos un punto focal? ¿Apuesto a que lo hacemos? ¿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. Eso es. 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. Configúrelo a ti si quieres usar diferentes colores, no hay problema, diferentes teléfonos, diferente disposición, o puedes recrear mi virgen 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 11. 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. 12. 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. 13. 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? 14. 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. Asignación: personalidad de tipo de letra: 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 teléfonos que estén instalados en tu computadora o teléfonos Google que vienen con Figma. Google Fonts es un gran repositorio de muchos teléfonos gratuitos pero bellamente diseñados. Al hacer clic en el selector de teléfono en Figma, le dará opciones tanto de los teléfonos que están instalados en su computadora como también de los teléfonos de Google Elegir fondos directamente de este menú desplegable no es muy útil Lo que podemos hacer en cambio es ir al sitio web de Google Funds y encontrar allí el tipo de letra adecuado Pero antes de hacer eso, primero, necesitamos entender lo que realmente estamos buscando. Imagina que estamos construyendo un sitio web para cada uno de estos negocios. Tenemos que elegir tipos de letra adecuados. Necesitamos hacernos 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. Voy a usar el entrenador de fitness para la demostración. Voy a tomar los teclados importantes de aquí, eso sería fitness o fitness coach e imágenes de Google para que pueda encontrar ejemplos de qué teléfonos se están utilizando para el tema fitness Pero solo entrenador de fitness o fitness no es suficiente. Eso no nos 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 Typace, y eso es todo. Para el entrenador físico, estoy buscando una fase tipo que sea simétrica y de aspecto voluminoso, algo que se vea bien en mayúsculas 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 el teléfono adecuado 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. Sensorial, minimalista neutral moderno trabajará con el fitness porque funciona con cualquier cosa. pantalla puede tener cualquier personalidad dependiendo la fuente, puede o no funcionar con la aptitud física. La categoría de escritura a mano es la misma categoría de guión que he explicado en la lección anterior Es sólo una forma diferente de llamar a lo mismo. Las fuentes manuscritas son lúdicas, tontas, infantiles y casuales A menos que sea un guión de estilo antiguo, entonces sería clásico y tradicional. Tenemos esta categoría extra llamada monoespacio. Las fuentes monoespaciadas son aquellas en las que cada letra ocupa la misma cantidad de espacio horizontal. Eso hace que cada letra sea más fácil de leer. Es por eso que las fuentes monoespaciadas se utilizan generalmente para escribir código de computadora. Como puedes imaginar en la programación, un carácter equivocado puede romper el código. No le sirve mucho en el diseño, hay algunos usos potenciales como si diseñar una página relacionada con la programación, computadoras vintage o máquina de escribir ya que fuentes monoespaciadas se usaban originalmente en máquinas De estas categorías para el tema fitness, Sans Serif o display son el mejor lugar para elegir Lamentablemente, no puedo ver las versiones en negrita de estos fondos directamente desde aquí. Eso hubiera sido idea. En cambio, voy a tener que comprobar la versión en negrita individualmente en la página de fuentes. Monsat 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, necesitamos leer el manual. Asegurémonos de que el diseñador no pretendiera este typase para algo que no es adecuado para el fitness Dice que se inspiró en la 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. Una cosa a tener en cuenta, los archivos de asignación que comparto 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, como 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 falla aún en crear una copia, entonces ve a mi archivo y duplícalo de esta pequeña drap hacia abajo. 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 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á una mayúscula, y puede eliminar la percse haciendo clic en Aquí también es donde tienes opción subyacente si la necesitas. En este cuadro, quiero que expliques tu proceso de pensamiento sobre por qué elegiste la fuente. 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 un diseñador para tener una comprensión más profunda de cada paso y decisión de diseño que tomes. Yo en realidad, clientes, sus clientes definitivamente apreciarán esto. Recuerdo que siempre lo hicieron. Enviaría este correo electrónico con paso a paso de las principales decisiones de diseño que tomaría. Sobre tipografías o teléfonos y cosas así. Y al principio, me gustaba hacerlo. Pero entonces me volví flojo. Y cuando no escribí estas descripciones de mi proceso de pensamiento detrás de esto, las revisiones aumentaron porque ahora no confiaban en lo que había hecho una elección, y querían revisar y cambiar de teléfono o cambiar colores o cosas así porque pensaban que los había elegido 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. 17. 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í. 18. 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. 19. 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. 20. 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 defondt 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 campo más único 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 texto principal, donde necesitas muchos pesos diferentes como barcos y botes adicionales y todas esas cosas, entonces puedes usar 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 los teléfonos en general es que los teléfonos 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. El arte del color: Este es uno de mi proyecto de sitio web. Se trata de un sitio web para un scooter compartiendo rap. Cuando estaba diseñando este sitio web de Picked un color verde muy vibrante. El nombre de la app es go green. Los scooters son eléctricos y respetuosos con el medio ambiente, por lo que este verde en particular se ajusta realmente bien al concepto. Es el tono correcto de verde. Pero mis clientes tenían un plan diferente y me hicieron cambiar a este verde. Esto es verde bosque, no un buen partido para este producto. Forest Green funcionará bien con negocios relacionados al aire libre camping, senderismo, ropa al aire libre, pesca y así sucesivamente, pero no algo que sea eléctrico y moderna tecnología verde. Este cólera ha hecho que el sitio web vea los grandes noventa, pero, ya sabes, a veces hay que hacer lo que dice tu cliente. La ropa puede hacer o romperse en diseño, se sintieron atraídos por los colores que nos gustan y bastante repelidos. Bio aquellos que no ganamos diseño Web u otros productos como autos, cerrando botellas de ketchup, lo que sea. 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 escoger y trabajar con colores como un profesional para que tus diseños se vean geniales. Se pegan alrededor 23. 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 24. Indicación: colores de muestreo: 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 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 cuentan con una amplia variedad de fotos diferentes. No son muy no se ven como stock, así que son bastante naturales y de aspecto agradable, aunque debido a que son gratis en diseños, se usan mucho. Pero más sobre la fotografía posterior. Bien, entonces me encantan las montañas. Voy a escoger una linda foto con una vista a la montaña. Esta es una buena opción. Tiene muchos colores en ella, así que será divertido trabajar con nosotros. 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. Ahora voy a hacer el rectángulo la mitad de ese tamaño. Aquí tienes un truco de figma. Voy a escribir 1152/2, y después él entraría. Figma hará las cuentas por mí. 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 de colocar imagen de la herramienta de forma Aquí hay algunas cosas a tener en cuenta al trabajar con imágenes en Figma. Las fotos que obtengas de Splash u otros sitios de stock serán de tamaño bastante grande. 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 su dimensión original. 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 capa de foto, la opción obvia es seleccionarla en el panel de capas, pero la mejor manera es hacer clic en la imagen mientras se mantiene presionada una tecla de 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 una 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 marco, puede colocarse accidentalmente en otros marcos 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 esperabas, 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 está comportando de la manera que se supone que debe hacerlo Si es actuar, echaríamos un vistazo al panel de jugadores y nos aseguraríamos de que esté en tu marco. Para arrastrarlo sobre el marco, tu cursor, el ratón tiene que estar en el marco, superponiendo el marco, luego lo va a arrastrar dentro, y si 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 ángulo ect, haga clic en la configuración de relleno de color, y de estas opciones, seleccione la imagen. Obtendrás esta imagen de marcador de posición a cuadros. Después haz clic, elige 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 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 sobre el Lienzo, Figma solo crea un rectángulo y pone la imagen como relleno En este caso particular, mi método preferido es subir la imagen directamente en nuestro relleno de rectángulos porque es la forma más controlada en el 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 ello 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 de posición 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 mediante opción de recorte selectivo 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 criptografía, 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 relación de aspecto mientras cambias el tamaño, terminas con unas proporciones originales y no alguna versión de panqueque de la misma Excelente, nuestra imagen está lista. Ahora voy a darle estilo a mi texto un poco. Puedes colocar tu propio texto en el titular cuando elijas tu imagen. No tienes que preocuparte por el párrafo. He usado el texto ficticio, el infame Lorem Ya tengo en mente los teléfonos. No los voy a elegir en base a imágenes, pero puedes si quieres. La pantalla es una hermosa cara tipo en estilo de servicio moderno. Da mucha clase a la página. Y Latto 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 un 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 descop, entonces nuestros márgenes serán comparados si estuviéramos diseñando para el teléfono Para este tamaño de cuadro, 60 píxeles es bastante bueno. Una cosa que podrías notar es que mi orden de lugar de imagen no se alinea con la cuadrícula. El que podría pensar, espera un segundo. ¿No es importante esa grilla y no alineamos nuestros elementos en base a nuestra grilla? Sí, eso es cierto, pero en este caso, nuestra imagen es parte del cannabis. Nuestro Cavas es el color de fondo y las imágenes de fondo de la página Tienen su propio tejido de espacio y no bajan 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. Una cosa que no me gusta en el texto es lo que se llama pupilos huérfanos Ves esa sola palabra en la última línea, eso se llama un pupilo huérfano En el diseño, tratamos de evitar a esos huérfanos. Hacen que el párrafo se vea 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 una 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 parrilla a favor de arreglar una sala de huérfanos Solo hay que reducir el cuadro de texto hasta que al menos una o más palabras salten en la última línea para dar esa palabra de corteza Este párrafo ahora parece más equilibrado. Eso es lo que quieres ir por regla general, y más abarrotado y bloque de texto 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 desdibujar nuestra imagen. Lo que esto hace es que promedia los píxeles adyacentes y te da una paleta de colores más precisa. Cerca de 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 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 afecta. 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 una señal exacta. A veces necesitarás mucho menos desenfoque, a veces más, sobre todo si quieres probar un color de algo pequeño, como ojos azules, lápiz labial rojo, entonces necesitarás un valor de desenfoque más pequeño. De lo contrario, el color se mezclará demasiado. Observe como la paleta de colores es muy notoria. Tenemos el azul, los 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 haz clic en este campo para cambiar el color del ángulo ct. A continuación, seleccione la herramienta cuentagotas. Al pasar el cursor sobre la imagen, elegirá el color de ese píxel exacto y pintará el ángulo recto en ese 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 fondo f. Recuerda por qué es esto cubriendo nuestros elementos porque la capa es más alta en la lista. Simplemente muévelo abajo para que quede dispuesto como fondo. También puedes escribir click y seleccionar Enviar al Atrás, que enviará todo el camino a la parte posterior. Ahora probemos algunos colores de fondo. Escribamos estos colores neutros. Y veamos el color que va mejor con este marrón oscuro. Vaya, olvidé quitar el relleno de imagen del texto cuando estaba jugando con él. El azul contrasta muy bien y puede ser útil para algún diseño emocionante. Este color de envío brillante tampoco está mal. Ahí, creo que esta es la mejor. Muy mal en los nombres de color, así que normalmente lo busco en lados de color. Este se llama Tumblid. En cuanto al 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 del 80% 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 ese mismo peso de volteo en el impuesto, lo que no es un mal resultado en absoluto. Aunque nunca haría algo así. Eso solo crea una masa 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 amateurish. 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 placa con la opacidad Ni siquiera tienes que probar ninguna de estas opciones de los colores que muestreaste Es un poco arriesgado para un principiante. Es fácil equivocarse. Esta opción de ingenio de caída 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. Este me parece lo más orgánico y vamos a destacar realmente la belleza del paisaje. Además el color es bastante adecuado para el tema al aire libre. Todo 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á un enlace a un archivo que tiene una solución al mismo. No se preocupe si la solución no es exactamente la misma que. No hay una sola solución para este ejercicio. 25. 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 26. 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é 27. 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. 28. 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. 29. 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 . 30. Fotos: superposiciones de imagen: una gran foto puede hacer maravillas para un diseño. Me encanta esta foto. Es hermoso. Los colores son increíbles. Es sencillo, sin embargo se parece a nuestro cuento de hadas. Pero sí tenemos un tema en esta composición. No hay suficiente contraste entre el fondo y todos estos objetos encima de ellos. El contraste es tan bajo que la mayoría de los impuestos es completamente ilegible. Producir un diseño como este es el resultado final es un trabajo terrible, pesar de que todo lo demás es puntual e imágenes tan magníficas. ¿ Cómo solucionamos esto mediante el uso de superposiciones? Básicamente, el color de Putin falla en la parte superior de la imagen. El más común es ponerle una superposición oscura en fig ma. Esto significa agregar un cólera negro cayó encima de la imagen y agregar transparencia a esa sensación hasta que obtienes un buen contraste. Pero antes de que se oscurezca demasiado, otro método se llama tintado. Es tomar la foto y darle una carpa de diferente color. Para ello, tomas la imagen y disach aireada para convertirla en una foto en blanco y negro, y luego nuevamente agregamos un campo de color. Pero esta vez, en lugar de negro, escoges un color diferente. Esto le dará a la imagen atender ese color, pero esto es especialmente útil si quieres usar colores de marca en el diseño. Es un truco muy mandado. También puedes aplicar la corrección a lugares específicos en lugar de toda la página. Por ejemplo, En aquí he puesto la caja oscura, transparente detrás de su contenido, y también he añadido la oscura, transparente Grady detrás de la barra de navegación. ¿ Te das cuenta encendido y apagado y encendido de nuevo ahí, aunque justo como nota al margen, no soy un gran fan de esos rectángulos negros simplemente al azar detrás del contenido, así que evito usarlos si realmente sé usar fondo grande, y simplemente es un diseño muy fácil. No hay mucho diseño realmente involucrado, como Airbnb es la página principal. Encuentras una foto impresionante y pones tu contenido sobre ella en blanco Color crea un diseño de aspecto muy atractivo sin mucho esfuerzo, y en mi experiencia, los clientes les encanta 31. 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 32. 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. 33. 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. 34. 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. 35. 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. 36. 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. 37. Fotos: elige fotos como un profesional: todas 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 escoger fotos como un profesional. A las fotos que vas a estar usando para tus proyectos se les llama fotos de stock, cuales descargas desde sitios libres de stock como vírgenes, cenizas y pagas como yo stock. Ahora el gran trozo fuera de stock fotos. Avión Terrible. Seguro que has visitado sitios web que usan fotos como esta. ¿ Cuál es exactamente el problema con esta foto? Los modelos se ven bien. Están bien vestidos. Están sonriendo. Las fotos, buena calidad y tomadas en ambiente profesional. Todo en el papel parece correcto, pero las fotos siguen cogidas. ¿ Por qué es eso? Porque claramente es falso. Está claro que no se trata de personas de negocios reales. Son modelos haciendo una pose tonta con falsas sonrisas sobre ellos. Ahora todas las fotos profesionales se hacen así, y modelo que está actuando un papel específico en la foto usando ropa es eso no es de ellos , retratando una emoción específica y se les paga por ello. Eso está bien, pero si la foto se hace bien, no deberíamos poder contar lo que está pasando En realidad, lo pienso como películas. Sabemos que se trata de actores. Sabemos que en realidad no están parados en un barco en 1912 llevan disfraces y actúan una escena. Pero cuando las películas se hicieron bien, no lo podemos decir. Olvidamos que en realidad es falso y que estas personas simplemente están fingiendo lo mismo está pasando aquí. Están vistiendo trajes y fingiendo. Pero a diferencia de los buenos actores, este tipo la chupa. ¿ Sabes qué pasa cuando usas una foto que luce falsa? Estás enviando un muy mal mensaje a tu público. Si la foto es falsa y fingiendo, entonces el sitio web se va a sentir falso y fingiendo No hay gente real detrás de este sitio web. Si los llamo o correo electrónico, no voy a obtener una respuesta de gente real ni peor. Podría incluso ser un sitio web de estafa. Se necesita un poco de práctica para contar buenas fotos de acciones de las malas, pero aquí hay tres preguntas que hacerte cuando estás mirando fotos. Él es la escena. Río. ¿ Algo así sucedería un escenario de la vida real? También las personas que trabajan en la oficina se pararían frente a una cámara y se tomarían de la mano así . Si alguna vez has trabajado en la oficina corporativa, sabes que lo último que quieres hacer son las manos enteras con tus compañeros trabajadores y pararte frente a una cámara. Por lo que la respuesta claramente no es falsa para estas foto. Por ejemplo, ¿qué opinas? ¿ Esto se ve real? Obviamente no. Para empezar, el garabato en el vaso es un galimatías completo. Es carga aleatoria y flechas. No tiene sentido. ¿ Y qué pasa con ese reporte? ¿ Es? Es una forma tan cliché de describir una oficina vista este pie, otro lado, es una historia diferente. Parece una reunión realista, y la gente está usando ropa que en realidad habías visto oficinas modernas. hoy. Están hablando entre sí, que es lo que sucede en las reuniones, no tomados de la mano y mirando a un tablero de cristal con tonterías garabatos sobre ellos. Falsa segunda forma de contar unas malas fotos de acciones por emociones falsas cursi. Esto no parece una auténtica emoción humana de emoción. Tampoco la escena en ningún lugar se acerca al mundo real. En esta foto, ¿ alguna vez has tenido dinero falso en una mano y una lupa en otra? Oh, este tipo estaba tan emocionado por algunas buenas noticias falsas en su falso salto hacia arriba. Buen intento, amigo, actuando emociones humanas genuinas frente a una cámara en un estudio fotográfico. Es algo difícil. Es por eso que tantas de estas modelos están haciendo un terrible trabajo en ello. No recompenséis a su pobre pupilo usando sus fotos en tu proyecto. Y además no arruines tus diseños. Pero esas fotos No es difícil decir si actuar parece genuino. Así es como se ve una emoción genuina. No esta ni siquiera emociones sutiles, como una sonrisa regular, pueden parecer muy antinaturales. Y el destino como esta foto, y cuando se hace bien, se ve genuino y acogedor. Pregúntate si las emociones se llenaron, de verdad, probablemente serás capaz de decir 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 set por set, me refiero a todo. Además de la modelo donde se tomó la foto, los objetos en la toma, incluso cerrando la modelo está vistiendo mucho stock. Las fotos suelen ser bastante antiguas. Se han tomado hace siglos pero todavía se están vendiendo y utilizando 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 fashionistas para esto. Usa tu sentido común. No es difícil decir que ninguna chica de su edad usaría algo como esto hoy. Esto en realidad no quiere decir que la foto fue tomada hace mucho tiempo. En ocasiones las fotos son nuevas, pero los fotógrafos han reutilizado mismo estudio fotográfico de vestuario, guardan su precaución de los paracaídas, y las reutilizan con otros modelos. Y nuevos escenarios años después, Cierra que Don't Fit son un claro indicador de que la escena es fe, aunque fuera moderna, como estas pobre chica de aquí, estudios fotográficos también tratarán de usar un cierre neutro que puede ser reutilizaron dos años por el camino para que no tengan que comprar nuevo orden de cada año. Entonces verás que esta misma mezcla se cierra, desprovista de personalidad alguna, y ese es otro indicador a. Pero creo que estas fotos tienen otra clara decir esa pantalla de computadora en conjuntos bien diseñados como aquí, verás a gente vistiendo ropa moderna y muchas veces bastante adecuada para su personalidad. Parecen personas reales. Id como una simulación computarizada. Preste atención a los objetos en el conjunto. Pregúntate si se ven realistas, como esta lupa y dinero falso. Nada dice falso mejor que dinero falso y mantente alejado de todo. Resumen, por ejemplo, Bombillas. Dios, odio las bombillas. gente le encanta usar una bombilla freakin para representar cosas como Dion. Creatividad o pensar que es a lo largo de los años me da nauseas cuando lo veo. Una vez, estaba trabajando en un sitio web muy premium, y como sugerencia, mi cliente me mandó una bombilla para usarla como fondo para un sitio web y casi barfed en la pantalla de la computadora. Los objetos abstractos son generalmente una mala idea. La mayoría de ellos lucen exactamente ese abstracto, confuso y a menudo cliché es que están sobreutilizados. su diseño le debe dar al público sentido de comprensión inautenticidad. Cualquier cosa abstracta hará lo contrario. Fuera de este cliché. Piezas de rompecabezas y nubes sobre sombreros de personas 38. Fotos: dónde encontrar fotos: Está bien, Entonces, ¿dónde encontrar buenas fotos? Hay fuentes gratuitas y pagadas. Mi lado favorito de acciones gratis es en splash dot com. Ya has utilizado esto en las asignaciones. Hay muchos tamaños que ofrecen fotos gratis, pero no son totalmente gratis. Vienen con algunas reglas de copyright, como debes acreditar al autor o solo por uso personal, pero para uso comercial sobre salpicaduras verdaderamente gratis. Puedes hacer lo que quieras con las fotos, y no tienes que acreditar a ese autor. Fotos en Splash que vienen son de aspecto muy realista. Muchas veces los someten fotógrafos individuales de todo el mundo y no compran estudios fotográficos de stock. Por esta razón, obtienes escenarios muy realistas y personas que se ven genuinas y reales bien, al menos la mayor parte del tiempo. Otra página web gratuita decente que utiliza pack cells dot com pack cells es totalmente gratis también. Nuevas limitaciones, su concepto y estilos fotográficos son muy similares a en Splash, pero aquí se obtiene un poco más de diversidad. Todos los lados de las fotos tienen un inconveniente, aunque todos los usan, y una foto particularmente bonita será utilizada por mucha gente en todo el mundo. Por lo que las fotos que usando 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 congeladas de on splash o pack cells y otros lugares, comienzas a reconocerlas en muchos sitios web diferentes. Si el público ve que esta foto se utiliza en otros sitios web para, especie de baratura el sitio web. Ya no es tan único, aunque lo mismo se aplica a los sitios de acciones pagadas, sino porque se les paga significativamente menos cantidad de diseñadores estará usando por usar estas fotos para el sitio web. Además, los sitios bursátiles tienen una selección mucho más grande de fotos que los sitios libres. Entonces por esta razón, en proyectos bien pagados fuera definitivamente te recomiendo usar fuentes pagadas en lugar de fotos gratis . Mi favorito de tallas de stock pagadas, tengo stock ellos tienen una de las fotos de mejor calidad con modelos y escenas de aspecto realista. Pero, por supuesto, aquí también obtienes fotos de aspecto falso . Es inevitable. En tanto la gente esté comprando esa gráfica, realmente puedo poner un número exacto en cuanto una costa de fotos en un lado de acciones porque todo depende de cuántos tú por planes de suscripción y a veces otro en la imagen misma. Todavía doy un poco en el precio, tu lado y en mucho año costa entre 9 a 24 dólares. Pero entonces, con paquetes y suscripción mensual, puedes conseguir unos descuentos bastante buenos. Otra buena fuentes pagadas obturan stock, y es mucho más barato de lo que yo stock. Con sus planes de prepago, obtienes una imagen por $10 tops. Prepago significa comprar un pack como $50 por cinco imágenes. Para usuarios pesados, puedes obtener una suscripción mensual. Obtendrás cierta cantidad de imágenes gratis al mes que pueden bajar a 3 dólares por imagen y menos uno de los troopers pero opciones decentes. Él es big stock dot com aquí. El máximo debe ser de alrededor de $3 por imagen con paquetes. A diferencia de otros, big stock tiene una prueba gratuita de siete días que te da 35 imágenes gratis durante ese periodo de prueba . Ten en cuenta, sin embargo, piden detalles de una 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 se trata de sitios web independientes y su precio puede cambiar muy a menudo. Y también dependerá del país de donde vienes o de donde estés revisando los precios debido a los impuestos y será de 80. Pero en el ballpark, así es como funciona la fijación de precios para estos tres sitios web y muchos otros sitios de acciones pagadas. 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 puedas sentir miedo de revisarlos. 39. Assignment: encuentra 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 textos de negocios reales y sus sitios web Quiero que encuentres una foto apropiada para cada marco, 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, Paxil, Stock, o cualquier otro lado Encontrar la foto correcta para tu proyecto en realidad lleva tiempo y a veces, necesitas buscar en varios sitios para concretarlo realmente. A veces puede pasar un par de horas buscando la foto correcta solo para una sección de héroe. También puedes usar sitios de almohadillas y simplemente tomar muestras de allí sin pagar por ello. Puede capturar o descargar la imagen con marca de agua. Big Stock, por ejemplo, tiene una vista previa de descarga, y puedes usar esa imagen de muestra No te preocupes por el formato de calidad o el tamaño del daño. Pero sí quiero que uses solo sitios de fotos de stock y no Google o cualquier otro lugar donde tengan estrictas reglas de derechos de autor en 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. Este negocio ayuda a otras empresas medir la felicidad de sus empleados. Esto me da una idea de que mostrar empleados felices funcionaría bien para este marco. Vamos a nuestro lado y comencemos buscando literalmente empleados felices. Los tres devolvieron resultados bastante diversos, y como se puede ver, BigStok, siendo el lado pagado ha devuelto significativamente más número de resultados que unsplash y Además, los resultados son bastante diferentes. Bigsto, aunque tener muchos resultados tiene muchas fotos de basura como esta gente de negocios de aquí Unsplash en realidad no tiene un buen mapeo de palabras clave y s Como se puede ver, ha devuelto un montón de cosas irrelevantes. Pixel parece haber hecho un trabajo decente. Cuando hagas la búsqueda, experimenta con diferentes 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 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, y así sucesivamente. Aquí hay un protap. Cuando veas una foto que tenga una calidad que te guste, pero aún no es exactamente la escena correcta o la modelo, encuentra quién es el colaborador y busca dentro de sus fotos. Por ejemplo, me gusta bastante la calidad de esta foto. 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 y ahora mirarás esto. Resultados mucho mejores que una búsqueda genérica. Todos los sitios de stock tienen sus propias formas de mostrar fotos de los colaboradores y dónde encontrar el enlace, pero la mayoría de ellos lo hacen. Sus propias formas de buscar a través las imágenes de un colaborador. En Big stock, solo inserta tu palabra clave frente a este código corto que insertó automáticamente. Esto refinará los resultados dentro de las fotos de los colaboradores. Sin este truco, tendría que pasar por miles de fotos terribles. Esta es una opción bastante buena para empleados felices. Haga clic en descargar vista previa y luego simplemente colóquelo dentro del archivo Figma 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. Las sonrisas se ven genuinas y en general las películas fotográficas son cálidas y acogedoras. Y hecho. Esa es tu tarea. No hay diseño involucrado. Que se diviertan. 40. 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. 41. 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. 42. Truco de diseño: espacio blanco: Se trata de un cartel de la campaña de anuncios de piezas de repuesto BMW. Dice B W am en lugar de BMW en la parte inferior, dice, usa piezas originales. Obtienes el crimen de broma. Es muy inteligente en, pero esa no es la razón por la que te lo estoy mostrando. Quiero demostrar un concepto de diseño enorme llamado Espacio blanco Espacios blancos, Espacio vacío alrededor de elementos en este caso alrededor hay Emma no ser W am título Whitespace llama la atención sobre el objeto. No solo 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 otro lado, es una historia completamente diferente. La importancia del espacio en blanco no sólo está en la atención y la simplicidad. También es tu diseño logrando su objetivo principal. Si tus sitios web objetivo principal es que las personas busquen, entonces mejor asegúrate de que toda la atención esté dirigida hacia eso. Cuando llegamos a Google, al instante sabemos dónde Clegg sobre dónde dirigir nuestra atención. Es mucho menos exigente buscar en Google que en Yahoo, y mucho más probable que las relaciones vayan a Google que distraerse en Yahoo y olvidarse de lo que vinimos a buscar en primer lugar. Por qué el espacio no tiene que ser blanco. Puede ser de cualquier color. Es cualquier espacio no utilizado que esté entre los elementos. El mundial es una izquierda o de la época en que el diseño gráfico solía tener lugar en Lee en impresión y en una hoja de papel blanca. Echemos un vistazo a este ejemplo digamos que estás trabajando en el sitio web de la APP del taxi. Se podría poner una foto es un fondo, y no hay nada malo en ello en absoluto. O puedes usar el espacio en blanco para llamar más atención al mensaje y al botón. Por cierto, recuerda teñir con superposiciones de imagen. En ocasiones no tienes que hacer la foto en blanco y negro. Puedes mantener la imagen colorida y aún así agregar color alcanzado sobre ella. Al igual que en este caso, Ya sabes, hace mucho tiempo, antes de saber algo de un diseño gráfico, trabajé como gerente de marketing y como mercado aquí, sí necesitas crear mucho fuera de materiales gráficos materiales de diseño como libro de volantes. Las últimas revistas fueron carteles, anuncios en Facebook o Google Edwards o portadas de Facebook o demás. Y solía trabajar con este diseñador gráfico Exxon que más tarde 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 en su, uh, cualquier composición que estuviera haciendo. A veces sería como un folleto para nuestra empresa, y yo diría: Oh, Oh, ya sabes, ¿por qué no sientes el espacio que es como demasiado, demasiado espacio vacío? Y siempre y nunca me gustó el espacio vacío cuando él hacía los diseños, y siempre lo empujaba a tratar de sentir ese espacio vacío con algo porque sentía que estaba vacío. Oh, hombre, no tenía ni idea en aquel entonces. Esta es una reacción bastante común con diseñadores principiantes o clientes que no tienen ninguna formación en diseño pero están mirando el trabajo desde una especie de vestir que tenían los diseñadores , o desde la perspectiva de un diseñador, ellos tienen esta inseguridad sobre el espacio vacío, y siempre tratan de llenarlo de algo para ellos. Se siente como si se trata de espacio vacío y no está lo suficientemente diseñado, ten esto en cuenta, ningún usuario se quejará nunca de demasiado espacio vacío. No obstante, les molestará con demasiado desorden en la página. Mi lado personal de cartera utiliza mucho espacio en blanco. Yo quería llamar toda la atención en primer lugar, una persona detrás del trabajo. Por lo que eliminé todas las distracciones y apunté todo el foco hacia mayo. EP siempre hace esto magistralmente, utilizando muchos espacios en blanco de muy toros, un diseño que Mac book luce súper importante y mucho más valioso cuando se muestra. esta manera, amplio espacio mejora casi todo, incluso en párrafos. ¿ Recuerdas lo que aprendimos sobre el espaciado de líneas? 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 en realidad más fácil que diseñar sin él. Deter Rams ¿Este diseñador industrial es más conocido por su trabajo para Brown? Ha acuñado estas populares 10 personas posan para un buen diseño. El principio 10 de cierre es éste. buen diseño es lo más poco de diseño posible, así que no te asustes del espacio en blanco y haciendo menos. Eso es sólo un buen diseño. Existe 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 uno del otro, poniendo espacio en blanco entre ellos. Los desconectaremos y nos sentiremos como objetos separados no relacionados, igual que aprendemos la lección sobre la proximidad. Por ejemplo, el titular en el párrafo de esta página espacio en blanco los desconectará entre sí . Esto sí y más enfocarse en el párrafo. Pero ahora es un objeto independiente, agregando a la cantidad de elementos en los que el espectador tiene que procesar. La versión original que tenía línea en el párrafo luce conectada debido a la proximidad y se percibirá como un solo grupo, algo así como esos enlaces en la barra de navegación. Por su proximidad y agrupación, se identificará como un solo grupo. Al instante. Ellos especie de agrupación hace que sea fácil para un espectador procesar los elementos de la página, y es más organizado y significativo. 43. 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. 44. 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. 45. 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. 46. 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. 47. 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. 48. 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. 49. 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. 50. 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. 51. 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. 52. 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. 53. Assignment: 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 recrear completamente la página principal de Figma. El 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 footar y todo eso Y haz todo eso mientras no tengas que preocuparte por los colores y los tipos de letra y las fuentes y los diseños y todas esas 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 una guitarra. Bien, así que abre el enlace del archivo Figma a este video. Aquí encontrarás la captura de pantalla de la página de inicio de Figmas. No es una página de inicio completa. He quitado algunas de las secciones para que las cosas sean sencillas. Y puede que no sea la versión actual de su página de inicio real, pero eso 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 recrearás esta página de inicio exacta Cuando trabajes en esta tarea, quiero que notes todos esos principios de diseño que has aprendido hasta ahora. Observa cómo están usando jerarquía y contraste, cómo se hacen las alineaciones, observa cosas que crees que han hecho bien, y aquellas que crees que podrían mejorarse Con lo que ya has practicado en Figma, ya sabes lo suficiente como para completar esta tarea, aunque voy a poner las cosas en marcha y demostrar algunas de las partes Primero, preparemos algunas guías para que sepamos dónde alinear nuestros objetos. No parece que estén usando una grilla estricta aquí en su sitio web o al menos no lo pude entender, pero no creo que lo sean. Vamos a tener que dibujar guías manualmente. Esto es bastante sencillo en Figma. En el menú buscas la regla, que puedas habilitarla. Una vez que hagas clic en él, obtendrás esta regla vertical y horizontal en la página. Para dibujar una guía horizontal, haga clic y dag desde la regla horizontal, y obtendrá esta guía horizontal, que puede colocar en cualquier lugar de la página o en el marco. Lo mismo va para la guía vertical. Ahora bien, ¿dónde dibujamos estas guías? En este marco, he incluido la captura de pantalla de la página de inicio. Ahora está oculto. Si lo habilitas, puedes usar esto como tu ayudante al comparar tu diseño con el original. Si bien tienes esto habilitado, dibuja las guías en los bordes de algunos de sus elementos para que puedas definir el contenedor donde tienen todo su contenido armado. Eso debería ser suficiente por ahora para eliminar a un chico, solo selecciónalo y presiona eliminar. Ya puedes ocultar la captura de pantalla. A continuación, pintemos el fondo. L et's inserta la imagen de héroe, hecho he guardado todos los recursos de imagen en este archivo, para que puedas insertarlos fácilmente en tu diseño. Están dentro de la pestaña de estos componentes. Componentes en Figma elementos que podremos crear y reutilizar posteriormente Esta es una característica genial, y hablaremos ello con más detalle en una lección posterior. 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. Aquí es en realidad de donde Figma está agarrando los componentes Si borras algo aquí, va a desaparecer del también va a desaparecer del panel de componentes. Así que encuentra al héroe disparado y arrástralo a la página. Lo mismo que puedes hacer con cualquier otra imagen, incluido el logo. Ahora, insertemos el texto. El tipo de letra que están usando es un teléfono de pago. En cambio, encontré una alternativa gratuita en Google Phones que se ve similar. Se llama Carla. No es una coincidencia exacta, sino un sustituto bastante decente. Están usando un estilo atrevido para el titular. Agreguemos el párrafo de abajo. Parece que tiene un tamaño de 18 píxeles. He incluido estos textos en la página aquí para que no tengas que escribirlos manualmente. S. Ahora, agreguemos el botón. Los botones son solo ángulos rectos con texto en él, así que dibujamos un ángulo y simplemente muestrea ese color del botón Sus botones tienen esquinas redondeadas. Para hacer lo mismo, podemos cambiar el radio de esquina de nuestro rectángulo desde el panel de propiedades. No estoy seguro de cuántas grandes ventas están usando, así que vamos a tener que hacerlo a simple vista. Cuatro parece un buen partido. Por último, tenemos que añadir el botón. Parece que el tamaño del texto es el mismo que el párrafo. Sólo tenemos que centrar alinear las etiquetas con el rectángulo de este panel de alineación. Sólo hay una cosa más que voy a mostrarte cómo hacer, y el resto depende de ti. Aún no hemos tenido la oportunidad de diseñar un campo como este con un borde. Como es habitual, esto es solo un rectángulo sin un color de relleno, pero con un borde. En Figma, eso se llama trazo, que puede agregar a cualquier rectángulo desde la configuración de trazo en el panel de propiedades Retire el relleno del rectángulo haciendo clic en menos en el relleno o simplemente cámbielo a blanco. Cambiar el color del trazo sucede como cualquier otra cosa. Y puedes cambiar el grosor de aquí si es necesario. Eso es todo ahora sabes todo lo que necesitas. Una última cosa, esta sección de aquí tiene un texto más largo. He incluido estos textos en la página aquí para que no tengas que escribirlos manualmente. Eso es. 54. Diseño de página de inicio de aplicaciones de chat: parte 1: Estos y los próximos videos vamos a practicar la remezcla, y este va a ser tu primer 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 copiar git tal como hicimos con la página de inicio de Figma, 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 realmente agradable de Philip Oustich y Balcomb Brothers Vamos a usar Phillips Designs como nuestra inspiración, remezclarlo un poco y diseñar una nueva página de inicio basada en 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 1,440 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 hagamos coincidir sus márgenes en los bordes. No el margen en la barra de arriba ahora, sino el del contenido. Para medir cualquier cosa en ma, simplemente dibuja un rectángulo y luego revisa las dimensiones de ese rectángulo. Son 140 píxeles, así que usaremos esto como nuestro margen para la cuadrícula. Ahí, ahora coincide estrechamente con su diseño. Hay algunas diferencias en su diseño como la barra 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 una obra Encontremos algo de inspiración de color en tonalidades. 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 captura de pantalla tu inspiración o guarda las imágenes haciendo click derecho y guarda S. Las 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. Ambos son bastante agradables, pero voy a ir con la opción de golpe. 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 Colors 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 Sansari. Voy a usar el mismo impuesto 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. La tele más grande es la letra A. No es tan habitual A que se obtiene en la mayoría de los teléfonos, es un estilo manuscrito Esas son suficientes pistas para encontrar fones similares. Mira, Monsat es bastante similar. La O también es círculo, pero las As son diferentes. Puedo usar esto si no encuentro algo más cerca. Pero ahí, Poppins es un partido muy reñido. La O es un círculo y la A es del 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, o obtener el teléfono de otra inspiración hasta ti. L et coinciden con el estilo. Parece que el peso es algo así como semi calvo. 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 fase estrecha particular, pero es muy probable que decentren el espaciado. 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 cara que el titular, y probablemente sea una buena idea porque el mismo teléfono podría no ser la 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, como Roboto podría incluso ser el mismo, así que podemos usar eso 55. Diseño de página de inicio de aplicaciones 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 aumente el radio de las esquinas hasta que estén completamente redondeados. Para el teléfono, parece que están usando texto de párrafo más pequeño, pero un estilo más grueso. Eso se ve bien. El segundo botón es lo que se llama un botón fantasma. Esta 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, eso lleva a la acción primaria del 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, por lo que no tenemos que meterlos en una cuadrícula. A veces es mejor. Pero en este caso, se trata de botones bastante cercanos y encogidos. Voy a meter 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. Esto debería hacer. Algunas de estas imágenes funcionan, pero otras no. Cuando combinas imágenes, recuerda siempre la lección sobre la consistencia. Imágenes combinadas 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 de la derecha está mirando a la cámara, mirando hacia la recta, y ella está más cerca de la cámara, haciendo que su cara sea más grande en tamaño. Todo 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 mente. Ahora vamos a crear esa forma de fondo punteado. Simplemente dibuja un círculo, elige elipse de las formas o simplemente calienta Cuando dibujas en ábside mantén el turno para dibujar un círculo perfecto. Entonces solo empieza a duplicar los círculos horizontal y verticalmente para crear ese punteado Selecciónalos todos. Haga clic con el botón derecho y seleccione grupos o use un control o comando de acceso directo. Cuando coloques tus puntos detrás de la imagen, asegúrate de no tener una superposición extraña 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 simuladas para nuestro producto imaginario, tal como lo tienen aquí, y también algo que luego podamos usar abajo. Lo que vamos a hacer es encontrar alguna maqueta gratuita. Una buena manera es encontrar esos recursos para el boceto, que luego se pueden importar a Figma. Por supuesto, podríamos buscar recursos de Figma directamente, pero como esta es una herramienta relativamente nueva, los recursos no son tan abundantes Sketch p sources.com es uno de esos lugares, y también sketch es un buen Estoy pensando en usar algún tipo de aplicación de chat o colaboración en equipo como nuestro producto. Realmente no importa nada que se ajuste a nuestros diseños servirá. Encontré este anteriormente, lo cual es bastante bueno. Descarga y zip. Ahora, ve al tablero de Vikmas. Y haga clic en este archivo de importación y una vez que no sea importante, simplemente abra el archivo. Antes de importar tu archivo, asegúrate de no intentar importar un archivo Zip, porque así es como normalmente la mayoría de los recursos que descargues de Internet entrarán como un archivo Zip. Si intentas importar eso, y esto va a suceder porque los únicos archivos que puedes importar en Figma son archivos de boceto y archivos Figma. Entonces, si no es ninguno de esos, entonces no va a funcionar. Entonces lo que hay que hacer, primero es necesario extraer el archivo del archivo Z en MAC. Esto es bastante fácil. Simplemente haz doble clic en él, y extraerás de inmediato y obtendrás este archivo aquí. En windows, creo que eres tú clic derecho y luego hay una opción de extraer aquí o extraer todos, algo así. Después haces doble clic en él y se importará y transformará en un archivo Figma, aquí mismo, y después simplemente haces doble clic sobre él y lo abrirás Y así es como puedes importar cualquiera de los recursos de boceto dentro del FICMA Y para ser honestos, en este momento, estoy haciendo una actualización de este video y en realidad, muchos recursos de Figma han ido aumentando últimamente, así que quizás ya no necesites obtener archivos de boceto y exploras recursos de Figma, que puedes encontrar en mi sitio web que compartí una página, que es vacas filly.com slash resources, y comparto que cuentan con recursos de Figma directamente, para que puedas encontrar diferentes sitios web que te proporcionan gratis, completamente gratis, hacen lo que quieras Figma recursos que puedes importar enseguida con un link Entonces, cuando abres este archivo, también hay una cosa que puede suceder. Vas a conseguir algo como esto. Vas a conseguir esta pancarta, y dirá teléfonos faltantes, y luego te quedarás en blanco aquí mismo. Si no estás recibiendo este pop up, posible que estés debajo aquí mismo, tal vez hiciste clic lejos, faltando fonds Lo que hay que hacer aquí es simplemente reemplazar estos teléfonos faltantes por algo. Simplemente selecciona lo que falta, selecciona algún teléfono de F M de inmediato, por ejemplo, roboto, solo haz eso y solo continúas haciendo eso para todos ellos, y luego haces clic en Reemplazar fuentes Y todos los puntos fiscales serán reemplazados a roboto en este caso Eso es. Así es como importas un archivo de boceto a Figma. Voy a guardar esta pantalla en el archivo Figma en una de las páginas Si vas a reutilizar la misma pantalla de chat, entonces puedes simplemente agarrarla desde ahí, que no tengas que pasar por el proceso. Creo que este chat burbujas será agradable 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 va a funcionar. Y también cambiar las fotos de perfil a las chicas. M. M. M. M Mm hm. Salí bastante bien, en realidad. No voy a añadir esa línea discontinua. Ya es suficiente así. A muchos elementos se puede sumar al ruido. Sin embargo, una cosa que no me gusta 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 está redondeado, y esos cuadros de mensaje también se redondean, 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 lo suyo. Antes era una especie de fusión. 56. 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. 57. Diseño de página de inicio de aplicaciones 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 la audiencia que tome alguna acción. Algo así como resumir 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 hacia fuera o tecla de opción aquí para ver las distancias entre los objetos. Me gusta la 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. Ms de revestimiento más fácil para los usuarios. Necesitamos un icono de estrella. Vamos a flat icons.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 acreditas al autor o compras su suscripción. Necesitamos formato SVG, que es editable en Figma. Vamos a poder cambiar de color si queremos. En sitios como icono plano, normalmente tenemos dos formatos de archivo en los que podemos descargar un icono, PNG y SPG Siempre que sea posible, debe usar el formato de archivo SPG para elementos como iconos e ilustraciones ¿Por qué? Por dos razones. Primero, SPG 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 se puede escalar hacia arriba. 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 de P&G aquí ofrece diferentes tamaños, mientras que SPG no necesita hacerlo La segunda razón por la que SPG es bateador se debe a sus capacidades de edición Un SPG C 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, la descarga de SP G 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, tenemos la opción de editar el color directamente en el sitio y descargarlo en P&G 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 icono plano, 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 puedas encontrar ahí. Una de esas opciones son los iconos de material de Google. Busca la estrella, activa el toggle para que se llene. Cambia el estilo a redondeado y descárgalo en SPG. Podemos cambiar el tamaño y el color en Figma. No hace falta hacerlo aquí. También puedes simplemente copiarlo desde aquí y luego pegarlo en Figma usando Control V en PC y comando V en Mac Ahora, aquí está la belleza de usar el formato de archivo SPG. Quiero usar nuestro propio amarillo para poder simplemente cambiar el color como con cualquier otra forma en Figma. Recuerda ese truco ordenado. Puedo ajustar ese espaciado desde aquí. M. H. M. A Muy bien, luciendo agudo. En lugar de un escritorio con computadoras, en realidad voy a usar una foto aquí. Tal vez foto de una oficina de equipo 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 puesta en marcha 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 tareas. Pero también, puedo seguir con el mismo estilo porque la consistencia será recompensada y hacer algo así y agregar esos puntos detrás de la imagen Mm hm. Mm hm. Eso se ve bastante bien, en realidad. El pie de página y eso es todo estaban cerca de la línea de meta. Vamos a copiar el logo y darle un color 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, dividiéndolo en seis bloques. Incluso encajaremos 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, teniendo esta brecha entre enlaces de pie de página y el logotipo y 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. Todo 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 Lorem Ipsum Porque dependiendo del carril de texto, podrías terminar necesitando volver a organizar un poco el diseño. También repetir el mismo texto simplemente se ve feo. Mantengamos los íconos sociales y otros enlaces en el pie de página. Ya lo hemos hecho en. Solo agreguemos el impuesto de derechos de autor, y eso es todo. H Ahí, ahora, vamos a arreglar esos huecos vacíos. Mm. Mm. 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 puedas. 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 fotograma y presiona la reproducción. Ya podemos ver la presentación de nuestro diseño. Mirando a la derecha. Una nota rápida sobre el modo de vista previa. A veces es posible que tu vista previa se vea así, 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 1,400 para 50 píxeles 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í, aparecerá la barra e irá a las opciones y luego cambia de aquí, que es 100% ahora, cámbiala para que se ajuste al ancho Una vez que hagas eso, entonces se ajustará al marco se ajustará a tu pantalla sin importar el tamaño de tu pantalla. Ahora, Esto, en raras ocasiones, puede ocurrir otro problema, lo que esto podría no ayudar, y es decir si se ha seleccionado algo diferente de la configuración del prototipo. Para ir a la configuración del prototipo, no tengas ningún marco ni ninguna capa seleccionada, haz clic en el lienzo. Todo está seleccionado, para 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í. Voy a tener extraña pantalla de iPhone o algo raro se va a mostrar aquí en el modo de vista previa. Asegúrese de que no se haya seleccionado 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. Podría intentar obtener una vista previa de otro marco, asegúrese de seleccionar el marco de su escritorio y luego hacer 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 interesada 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. 58. 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. 59. 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 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 redimensionas, 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 del lado derecho, tenemos nuestro estilo spanel. Aquí es donde manipulamos y diseñamos cada elemento de la página. Esto se puede reconocer. Es algo similar al panel de propiedades Figma en el mismo lado Al igual que Figma, edita lo 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 lateral, 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ñador de Webflow 60. 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 Realmente 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 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, realmente 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. HTMO 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é sitio 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. 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 título 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. Este es el increíble poder de Webflow. Estamos construyendo nuestro sitio web completamente desde cero, sin plantillas estúpidas y temas feos. Tenemos el control total sobre construcción de un sitio web completamente único, y no tenemos que codificar ninguno de ellos. Webflow escribe el código para nosotros. 61. 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. 62. 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. 63. 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. 64. Webflow: configuración de tamaño: Y estamos de vuelta. Ahora, vamos a darle a este diblock 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. Entonces 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 Side Webflow, vaya al panel Estilos y desplácese hacia abajo para encontrar una propiedad llamada fondos Hay el mismo campo para el HC, así que solo pega tu código ahí. Siempre empieza con un signo hash, pero no tienes que copiar eso. Si lo haces, asegúrate de reemplazar también el signo hash existente. Ahora necesitamos darle a nuestro bloque d un tamaño similar a nuestro rectángulo en 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 PX aquí, te mostrará todas las unidades que puedes ingresar en estos campos. Después de píxeles, tenemos un porcentaje. Con porcentajes, ahora entramos en web responsive. Es un valor receptivo y responde 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 inferior, 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 medida que el cuerpo se encoge y no hay desplazamiento horizontal La siguiente unidad es EM. Vamos a omitir esta porque es una unidad que se basa en el tamaño del teléfono y nunca encontré ningún uso para ello en el contexto de anchos y alturas, así que voy a hacer muy bien sin él VH y VW, por otro lado, son unidades importantes y muy útiles. Representan la altura de la ventana y el ancho de la 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 la 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. La 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 lo que 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 quiere decir que no puedas cambiarlos. Por lo general, no hay necesidad, pero hay algunos casos raros en los que quizás quieras hacer eso. Aquí hay otra demostración genial de comparar porcentajes con unidades de ventana gráfica Tenemos cajas idénticas. En el ejemplo anterior, vamos a dar una caja amarilla de 50% de ancho. Y en la caja amarilla de abajo, vamos a darle 50 VW. Ahora mismo son idénticos. ¿Por qué? Porque las cajas azules principales extienden de borde a borde. Pero vamos a darle a una caja azul superior un ancho de 900 píxeles. Como era de esperar la caja amarilla se encogió con ella para hacer el 50% del ancho de las cajas azules Pero mira lo que sucede en la versión inferior cuando le damos al cuadro azul 900 píxeles de ancho. El cuadro amarillo inferior no cambió forma porque es relativo al tamaño del navegador. Y a medida que cambias de pantalla y encoge el navegador, el cuadro amarillo inferior se encoge con él porque necesita mantener el 50% de la ventana gráfica pase lo que pase 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 de él. 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 en su interior. 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í que caerá afuera en el lienzo general. Si lo desea, también puede 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 dip se mantendrá a 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 la 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. En otro tip, si la propiedad está en azul, significa que la has cambiado. Te enfrentas a algún tipo de error, 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 del 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 infigma 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 el Bluebx crezca con contenido. Y el valor 100 VH lo 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 65. 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. Recuerda por qué los metemos dentro, porque 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 en la parte superior de la caja azul. Los nuevos elementos en Webflow suelen estar atascados uno tras otro y pegados a los bordes de su aparente Así 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 FcMa eso es fácil. Simplemente arrastra 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 algún relleno. Cuando pasa el cursor sobre la propiedad padding, resalta el espacio en la parte inferior para que puedas 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 los 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 la FIG se debe seleccionar el objeto y mantener fuera o tecla de opción y mover el mouse 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 VicMA 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á hundiendo en la parte inferior, pero en los navegadores más altos, puede ser muy poco y el contenido podría parecer que está 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. 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 de 140 píxeles a la izquierda 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, ¿verdad? Tiene un diseño central, y colocan todo dentro de 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í que 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 pulcramente centrados. Ese es el poder de un contenedor y es el bloque de construcción más básico de cualquier sitio web. Y el contenedor predeterminado de weblos es de hecho un buen bloque d antiguo al igual que una sección, pero tiene dos estilos predefinidos que lo hacen funcionar como un contenedor 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 de qué margen automático elimines Este truco para aplicar márgenes de auto es un buen método para usar cuando necesitas centrar algo. Webelo 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. I este ancho de contenedor es editable. Dependiendo del 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, hagámoslo. Esto nos da un diseño centrado que es receptivo y muy bien ajustado a todas las pantallas. Excepto tal vez en la pantalla móvil más pequeña, el valor de relleno que establecemos es demasiado alto, 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éjelos como están por ahora, aunque parezcan rotos, 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 editas, 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. 66. 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 IgMA aquí, tenemos una selección limitada de fuentes Nuestros tipos de letra, pop ins y Roboto están alistados 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 bien 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, los teléfonos de Google, 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 tipo kit 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 fuentes personalizadas con solo subirlas. En nuestro caso, necesitamos teléfonos de Google, así que solo vamos a encontrar pop ins y una vez que lo encuentres, lo seleccionas, y te preguntarán 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 de fuente 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 las nuevas fuentes de inmediato, así que actualiza al diseñador. Y ahí ahora tenemos a Poppins y robados dentro. 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 de fuente y abajo es un color de fondo. Queremos cambiar el color en la sección de tipografía, pero el color de fondo para el botón Webelo 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 la fuente. 100% de altura de línea sería exactamente el mismo que el tamaño de fuente, y al 100% 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. 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 en la pestaña Código 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. 67. Webflow: buttons 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. El bloque de enlaces 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 un enlace de texto. No se puede poner nada dentro de él. Para vincular los enlaces, seleccionamos el enlace y damos clic en el toque de configuración. 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 realmente 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. tinta de correo electrónico abrirá un cliente de correo electrónico predeterminado que el usuario haya configurado en su computadora, por ejemplo, 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 se desfije 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 DVBlocks, pero pueden actuar como un enlace normal En cuanto a los enlaces de texto, no pueden anidar nada dentro y funcionan igual que un texto normal. 68. Flujo de web: clases de CSS: Ahora agreguemos nuestro segundo botón para ahorrar tiempo en estilizar. Podemos duplicar nuestro botón blanco existente. Puede escribir, hacer clic y, a continuación duplicar o usar un control C, control V, un 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 una próxima lección. En esta lección, vamos a cubrir el segundo comportamiento de hallazgo. 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 administra 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. El 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 y al instante 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 original. Botón. 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 fantasma tiene muchas propiedades iguales que nuestro botón principal. Podemos duplicar esas propiedades y crear una nueva clase a partir de ellas. Ahora podemos nombrarlo como queramos. Tenemos dos botones con las mismas propiedades pero diferentes clases. Cuando le sumamos uno, los cambios no afectarán al otro. Dentro de CSS, podemos ver cómo se presentan estas clases. Comienza con un periodo seguido de un nombre que escribimos. Webflow generará código en minúsculas, independientemente de la forma en que lo escribas Dentro del diseñador, puedes usar mayúsculas si quieres. No se aceptan espacios en una nomenclatura de clase CSS real, pero dentro de Webflow puedes usarlos Webflow cambiará entonces ese espacio en guiones. Para 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 alguna clase aplicada. Si sueltas un nuevo elemento, 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 de acuerdo a sus clases. Cambiemos el nombre de nuestro bloque 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. Vamos a darle un poco de respeto y ponerle un nombre más apropiado, como la sección Héroe. De vuelta 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 la sensación de fondo es transparente y en cambio tiene bordes. También puedes hacer esto disminuyendo el control deslizante de opacidad. El 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. Ahora agreguemos bordes. Esto lo podemos hacer directamente debajo de la sección fronteriza, dice cero píxeles. Si lo aumentamos a una celda pick, se mostrará el borde y luego podremos cambiar de color a blanco. Parece complicado al principio, pero es bastante sencillo. El estilo muestra qué borde queremos usar guiones o puntos de línea continua Esas plazas muestran. ¿De qué lado estamos sumando la frontera? este momento, se selecciona el cuadrado medio, lo que significa que estamos sumando los cuatro lados. Si seleccionamos el cuadrado superior, podemos agregar solo el borde superior Por último, necesitamos agregar algo de espacio entre dos botones. ¿Qué crees que deberíamos usar, Márgenes o relleno? Pregunta, no podemos usar relleno. El relleno solo agrega espacio dentro de una caja. Mida el espacio. En Figma utilizamos un espacio de 30 píxeles. Entonces 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. Para recapitular En esta lección, aprendimos a usar clases CSS, que en Webflow se administra a través del estilo spanel Aprendemos a crear nuevas clases, cómo Webflow crea automáticamente clases para nosotros y cómo duplicar clases Podemos reutilizar elementos existentes en nuestra página. 69. Webflow vs. tamaños de Figma: 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 responsive. 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 responsivo. Así es exactamente como vamos a construir nuestro sitio web. Weblow 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 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 Podría tener 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 infigma 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 dos k de tamaño de fotograma coincidente, tendrás mucho espacio de pantalla donde podrás construir tu diseño Puedes colocar muchas más cosas en tu pantalla que alguien en una minúscula netbook 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 y 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. A K y cuatro K las pantallas son bastante raras, y los usuarios en esas pantallas no suelen usar el navegador en modo de pantalla completa porque eso superaría el propósito de tener una pantalla muy grande donde puedas colocar muchas cosas en tu pantalla. Dado que 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. tamaño de fotograma FICMAS de 1,400 píxeles es un buen candidato para este propósito porque está bastante en el medio Tu comodidad como diseñador también importa. Es posible que desee elegir un tamaño de fotograma que coincida con la resolución de su pantalla. De esa manera, al trabajar en Figma, podrás previsualizar tu sitio web como se vería en tu pantalla Si su resolución de 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 con solo buscar en Google. Cuál es mi resolución de pantalla y comprobando uno de los primeros sitios web. 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 sólo una coincidencia en bloque. Pero no hay una gran necesidad de igualar tamaño del marco en Figma con el tamaño de lienzo weblos 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 de 14 a 40 píxeles, también estamos construyendo 12 versiones de 80, 1920 , 320 píxeles 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 agregues 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 tamaño del lienzo weblos 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, eso 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 tamaños de pantalla entre Figma y Webflow Si aún tienes dudas, avísame en las preguntas y respuestas. 71. Webflow: flotación y visualización: 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 DVBlocks. Podemos poner dos DVBlocks 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 que agregué un nuevo blog de Dip, seleccionó ese nuevo, y el segundo Dibblog se dejó caer dentro de Simplemente arrástralo desde este panel del navegador. Ahora, arrastra la imagen en un bloque Div y todo lo demás en el otro blog div. Y vamos a nombrar estos bloques de datos 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. Y una mejor manera. Pasemos por cada uno. Primero, la forma más rápida hacerlo es mediante el uso de la propiedad float Podemos encontrar esto en la sección de posición. Está escondido dentro del menú desplegable. Float es una propiedad CSS que le dice al elemento que se posicione ya sea a la izquierda o a la derecha de otros elementos circundantes. En nuestro caso, queremos que la imagen se posicione a la derecha, así que colocamos float justo en nuestro bloque derecho. Y tenga en cuenta aquí, he puesto el flotador en el bloque derecho, no solo la imagen. Si estableces flotar solo en la imagen, entonces esto sucederá. Esta es una imagen flotante dentro de ese bloque derecho, no afectando el contenido del bloque izquierdo porque el bloque derecho sigue sentado en la parte superior del bloque izquierdo. Aunque esta es una forma rápida de hacer que estos elementos se sientan uno al lado otro, no es la mejor manera. Hay una cosa que float hace el mejor ajuste del contenido de texto alrededor del elemento. Si tenemos una sección como esta y queremos que el texto envuelva alrededor de la imagen tal como sucedería en un documento de texto, podemos darle a la imagen estilo float e incluso agregar márgenes en el lateral, así que el texto se envuelve pulcramente. Estas y un par de otras cosas son lo que float hace mejor. La segunda opción es mediante el uso de columnas. GOA flow tiene este elemento de diseño prefabricado para columnas. Dentro de los ajustes de columna, podemos elegir muchos arreglos diferentes y cuántas columnas queremos usar. Está usando el mismo diseño de cuadrícula de 12 puntos como lo hicimos en Figma y se puede dividir diseño diferente al igual que nuestra cuadrícula en dos, tres, cuatro, etc. Dentro del navegador, se puede ver cómo están dispuestas estas columnas. Podemos soltar el bloque izquierdo en la columna uno y el bloque derecho en la columna dos. Esto ya es una mejora a la carroza porque el contenido bebe muy bien. Pero aquí está la verdad. Odio las columnas. No son tan flexibles como se podría pensar, y a veces le suceden cosas extrañas. Se ve potente y flexible, pero tantas veces voy a golpear limitaciones con columnas que dejo de usarlas y comencé a hacer las mías propias. Este enfoque en realidad me ayudó a entender mejor el desarrollo web y a mejorar mis habilidades. Yo aconsejaría hacer lo mismo. Al final del día, estas columnas están hechas de DVBlocks una vez más y tienen propiedades CSS específicas aplicadas a ellas. Así que vamos con la mejor opción. 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 en línea. Los elementos de bloque en línea son tan amplios como el contenido en su 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 en línea 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 encoges 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 los 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 por completo de nuestro sitio web, todavía está 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 rejilla de visualización. CSS grid hace algo que antes no era posible tener una mesa como arreglo donde puedes mover elementos como quieras con mucha flexibilidad. Con la capacidad de tener un diseño 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. Entonces, para recapitular esta lección, tenemos varias opciones diferentes para hacer que los elementos se sientan uno al lado del otro Tenemos float, uno de los métodos más antiguos y simples. Float puede hacer que un elemento se asiente ya sea a la izquierda o a la derecha del contenido y los elementos circundantes se envolverán alrededor de él. Entonces tenemos columnas, que ya sabes, odio el final de la lección. Y te aconsejaría usarlo manera moderada y principalmente si quieres ahorrar algo de tiempo Y finalmente, pasamos por todos los ajustes de visualización desde el bloque hasta la cuadrícula CSS, y cubriremos esos ajustes de visualización individuales una vez que los necesitemos. 72. Flujo de web: Flexbox: 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 y no al bloque D en sí. 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. Así distribuimos a los niños dentro de la caja flexible. Permítanme demostrar cómo Flexbox puede distribuir su elemento hijos Podemos alinear los artículos dentro la caja de lino usando esta caja de alineación Los controles son bastante intuitivos. Es una cuadrícula de tres por tres que representa la caja de lino. 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 están ocultas debajo de estos dos menús desplegables Para la alineación del eje y, tenemos dos opciones más, estiramiento y línea base. El estiramiento es exactamente lo que dice. Estira a los niños de lino para llenar todo el espacio vertical de la caja de lino Si aumentas o disminuyes la altura de la caja de lino, las cajas se encogerán y crecerán con ella Esta es en realidad la configuración de alineación predeterminada de la caja flexible. Puedes ver esto cuando restablezco esa configuración de alineación desde aquí. Está configurado a la izquierda y se estira, y al hacer clic en cualquier lugar de 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. Bien. Debajo de la x x es desplegable, tenemos dos opciones más, espacio entre y espacio alrededor. Estas son como 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 niño alinee con los bordes de la caja de lino 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, los desplegables x e y son los controles reales de la caja de lino 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 Ese es un eje horizontal. Lo mismo para el eje y, que es el eje vertical. El cuadro de alineación se bloquea a un modo diferente si seleccionas estirar o espacio entre opciones, ahora mismo, debido a que tengo espacio alrededor seleccionado, el cuadro 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 ocurre con el estiramiento, solo te deja con las 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 cambiar la dirección a vertical. Y como era de esperar, funcionan de la misma manera solo en dirección diferente. Pero una cosa notarás que la alineación no cambia en el eje y. Arriba, centro e inferior, todos nos dan el mismo resultado. Eso es porque no hay espacio extra dentro del flexbox. Los niños están llenando toda la estatura viable. 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 flex box en realidad termina estirándose con los niños. Pero si aumento la altura del flexbox a algo que deja 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 extraña y estás tratando de averiguar por qué y encontrar una solución a tu problema, bastante satisfactoria cuando resuelves el rompecabezas, pero un rascador de cabeza grande cuando estás mirando la pantalla, tratando de averiguar qué demonios está pasando 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 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 Webflos Lo que suelo hacer es Google Webflow University y el nombre de una configuración Por lo general, el resultado superior después del anuncio 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 puede encontrar buscando dentro de la página por Control F. Por defecto, los niños 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 rap y lo puedes encontrar debajo de este desplegable. El rapeo 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 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 la parte superior 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. La primera opción obviamente 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. El rapeo solo funciona si es necesario empujar elementos a la siguiente columna o a la siguiente fila Dado que nuestra caja flexible 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ían fuera de la caja de lino. Para ser honesto, estas opciones de envoltura 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 de propiedades opciones especiales para el Flex Child. Esto nos da aún más control de grano fino sobre artículos individuales dentro del Flexbox Pero no nos preocupemos por las opciones para niños Flex por ahora. Flex Box 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 cada uno de ellos. Opción de maquetación que ya he cubierto. Una vez que empieces a construir y a jugar con él, lo dominarás . En una de las tareas posteriores a 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 las flexbox y Así que volvamos a nuestra sección de héroes y veamos cómo podemos usar flexbox En nuestro caso, es bastante sencillo, en realidad. Sólo tenemos dos cuadras izquierda y derecha. Podemos aplicar diseño flex al contenedor, pero recuerda, Hicimos 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, ya 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 nuestras opciones de flex para que podamos alinear estos bloques como queramos. La dirección horizontal es exactamente lo queremos, así que la mantenemos ahí, y luego la alineación del centro y empujándolos hacia los bordes va a verse bien. En Figma, tenemos contenido sentándonos un poco más alto. Podemos lograr esto agregando un margen de botón 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 abajo. 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. Todo bien. Esto parece justo como queremos que sea. Sí, la imagen tiene dimensiones un poco diferentes en comparación con el diseño de fi Ma, 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, flex box 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. Flor web: lista de verificación de Debugging: Entonces, ¿qué haces cuando ahora experimentas una especie de ganga Web Flow? Usar algo es simplemente no se parece a la forma en que esperas que haga. En la mayoría de los casos, estos problemas no son realmente bugs dentro de los diseñadores de flujo web a veces el podría parecer un error porque intentas usar cosas como si todo estuviera funcionando correctamente y hay como todo, ya sabes, hay algo con ley web o hay un problema con un flujo web o tal vez algo con un navegador. Pero la mayoría de las veces esos son solo estilos que estás aplicando dentro del flujo web. Y simplemente no se están comportando de la manera en que esperas que se comporten. Y como que tengo mi propia lista de comprobación que pasaría cuando lo intente, llamemos a esto add debug, cómo saber qué está causando el problema y tener mayor esta lista de comprobación. Voy a enlazar esta lista de comprobación para que puedas tener, y es algo así como unos pasos por los que pasas cuando estás experimentando algún problema ahí dentro, te ayudaremos. Yo diría que alrededor del 80% del tiempo. Y te pondrán en dirección directa para saber qué está causando un problema y cómo solucionarlo. Pero obviamente hay algunos de los casos que no van a encajar esta plantilla y tendrás que cavar un poco más profundo. Pero la mayoría de los casos estos track los va a cubrir. Entonces tengo algunos problemas aquí en esta página que he creado y vamos con un MIT sin pista cómo funciona esto en realidad y esto, mayoría de los temas que probabilidad, todos los temas que actualizaron aquí, son algo que a menudo veo de mis alumnos cuando están haciendo las preguntas como lo que está pasando. Y de alguna manera estoy tratando de arreglar algo y no está funcionando y son temas muy comunes que vienen de los estudiantes. Por lo que acabo de agarrar tiendas, temas comunes, arena aplicada esta lista de chequeo, hazlo para mostrarte cómo va a funcionar. Ahora y la cosa número uno, paso wining la lista de comprobación que tengo si es un tema de espaciado, esto está en el tema del espaciado fronterizo. El paso uno habilita el modo de rayos X y pasa el cursor sobre diferentes elementos para encontrarlo. El espacio viene de algunos elementos, margen o relleno. Entonces en este caso tenemos un tema de espaciado aquí, justo ahí está este espacio en blanco extra. No sabemos de qué viene y de qué estamos tratando de averiguar y aquí como yEntonces hay este modo extremo aquí en la configuración de Canvas. Puede activar el modo de rayos X. Y en el modo de rayos X, tú, al pasar el cursor sobre los elementos, te mostrará relleno y margen de ese elemento en particular cuando esté verde. Eso es relleno, o cuando es azul. Veamos que uno de ahí mismo, esas líneas discontinuas en ángulo en el costado de la parte inferior de la misma, eso significa que tiene un relleno. Entonces en este caso, un encabezado tiene el relleno inferior justo aquí. Y en este caso, una sección de héroes tiene relleno. Perdón. Entonces se dirigen. encabezamiento tiene el margen y la acción de los héroes tiene el relleno. Y lo que me gustaría hacer es en realidad pasar el rato sobre el interior del navegador. Porque en el navegador podrás cubrir todos los elementos. En tanto que en el lienzo a veces te perderás como un padre porque están muy bien envueltos alrededor de algún elemento analógico. Entonces lo que puedes hacer dentro del navegador es hacer clic en este icono para expandirlo todo. Si presionas el laboratorio de gran escala seis, si estás presionando y va a expandir todos tus elementos. Y entonces donde quiera que estés, no tienes que ir hasta el final Barnum, ¿verdad? Entonces, dondequiera que estés, encuentra ese elemento, luego empieza a rondar y a ver dónde recoge y dónde se resalta ese espacio. Entonces en este caso, encabezamiento dos tiene un margen en la parte superior, y eso está causando ese problema de espacios en blanco. Entonces ahora puedes ir a esa cosa y puedes ver que es correcto. Hay un margen de dos píxeles en la parte superior. Y aunque la sección en sí no tiene ese margen, tiene 0 margen de alguna manera, la forma en que funciona HTML en este caso, el encabezado está provocando estos margen extra. En lugar de añadir el espacio en el interior. Entonces es por eso que este modo de rayos X es realmente bonito y ordenado y te mostraremos de dónde viene ese espacio. Si viene de margen nuestro panel. Entonces obviamente si cambias esto a 0, se van a ir. Lo mismo ahora con la parte inferior derecha, este pequeño hueco aquí. Entonces vamos a continuar. Y ahí tienes. Tenemos un párrafo que tiene este relleno inferior, que ella lamenta, de nuevo, margen inferior. Y es un valor por defecto que todos los párrafos tienen en mi caso aquí, probablemente en todos los casos porque es atacado. Cámbialo a 0, y ahí tienes. Ahora todo ese espacio se ha ido. Entonces ahora ese era un tema donde el paso uno funciona porque es cuestión de espaciado. Ahora. A veces es un tema de espaciado, pero no va a funcionar. Entonces por ejemplo aquí, nuevo, es un tema de espaciado. Tenemos este párrafo. Esto es algo que en realidad sucede con frecuencia con mis alumnos. Me envían su versión del sitio en el que están trabajando y van a tener extraños espaciados pasados párrafos y etiquetas y no entienden de dónde diablos viene esto. Entonces si haces la radiografía aquí, no vas a conseguir nada. Por lo que ni siquiera me voy a molestar en pasar por el pasillo. No vas a llenar este espacio como un margen o un relleno. Entonces el paso uno no funciona. Tenemos que ir al paso dos. Ahora en el paso dos, hemos eliminado la clase de esta especificaciones para ver si el problema desaparece. Si lo hace entonces salta al paso seis. Entonces en nuestro caso, creo que es bastante fácil identificar cuál es el que es el sospechoso punto este tema que sería el párrafo a veces. Entonces parece que sí, pero no lo son. Tenemos pasos para eso también. Entonces párrafo es este aspecto. Entonces lo que vamos a hacer es no vamos a tratar de averiguar qué hay aquí, ¿qué es la nube? ¿ Cuál es esa estrella que puede estar causando esto. Entonces no vamos a hacer eso. Vamos a quitar esa clase, temporalmente, quitar clase, y soportarlo fue arreglado. Por lo que ahora sabemos un 100% que esta clase está causando este problema. Entonces solo voy a golpear deshacer con Control Z o Command Z o haciendo esto aquí y hacer. Y así sabemos que es esta clase, lo que significa que es uno de los estilos dentro de este panel, ya sea estilos azules o azulejos naranjas suele ir a los que se resaltan azul porque son los que están siendo directamente en, afectando directamente a este elemento. Entonces en mi paso dice, si lo hace entonces salta al paso seis, y vamos al paso seis. ¿Qué dice el? Una vez que identifiques la clase que está causando el problema, vuelve a poner la clase en el elemento. Hicimos eso y empezamos a restablecer cada estilo que está en color azul. No deberías poder encontrar un estilo en particular que esté causando el problema. Y se puso así lo que haremos ahora es que no sabemos qué es. Ni siquiera entiendo cómo, digamos ley web o HTML y CSS, más absorbidos. Yo sólo voy a ir ciegamente a quitar todas estas que ni siquiera tengo que entender. Sin siquiera entender esto me dirá qué estilo está causando el tema. Entonces iré a reinicializar. Iré a reinicializar. Nada. No está arreglando. Y solo voy a usar ese atajo aquí, que es opción click en mi caso, probablemente en última instancia en computadoras con Windows. Y sólo seguiré haciendo esto. Está bien, todavía nada. Aquí hay otro azul. Bam. Está bien. Entonces ahora sabemos que vamos a hacer. Ahora sabemos que es exactamente tener el estilo que está causando el problema. Y veamos altura 160 pixels. Entonces aunque no entiendas por qué esto está causando, y parece que es algo correcto. Puedes jugar con un valor r con mayor frecuencia te darás a por qué esto lo está causando. Pero si no, simplemente cámbialo, cuando hagas el reinicio, también te dirá la pista de cuál es el valor correcto que no causa este problema. Entonces si reinicio esto, ahora vemos, vale, dice 161%. ¿ De acuerdo? Entonces en mi caso, en este caso es de 160 píxeles. Entonces parece que este píxel, siendo píxel causando ese problema, lo cual es cierto en este caso porque se calcula porcentaje de una altura de línea, un 160% significa un 160 del tamaño de fuente de altura es relativo al tamaño de fuente, pero un 160 píxeles no es un valor relativo y absoluto, lo que significa. Ese espacio aquí, ese espacio tiene que ser de 160 píxeles. Por eso es así, para que sólo puedas cambiarlo al 160%, ¿verdad? Y eso está arreglado. Saber, a veces deja ir a otro tema. Entonces tenemos este tema donde este realmente fue presentado por uno de mis alumnos. Recuerdo el tema aquí es que estos botones no están alineados a la izquierda. Y pasamos por todos estos métodos y vemos cómo el modo de rayos X, nada va a salir. Y si vamos con, está bien, entonces por ejemplo, este es el botón que estamos sospechando que es un botón está causando esto. Entonces hacemos este método desde el paso dos, que se retira nuestra clase. Entonces quitamos esas dos cláusulas aquí, una clase combo, ¿verdad? Por lo que quitamos uno de ellos. ¿ De acuerdo? Nada quitará otro. Acero nada. Ok. Entonces cuando hago esto, normalmente los devuelvo. Entonces sabemos que no es el botón en sí. Entonces, ¿qué dice el paso tres? Parece que quitar una clase sobre el elemento sospechoso no ayudó. Eso significa que el tema viene de algunos otros elementos. Empieza por eliminar las clases del padre directo, luego los padres, padre todo el camino, incluyendo el elemento corporal hasta que elimines la clase que hace que estos desaparezcan. Si encuentras un cúmulo de buggy, entonces salta el sexo de dos pasos. Entonces de nuevo, estamos haciendo lo mismo, que es que necesitamos encontrar la clase sobre uno de los padres o lo que sea el elemento que está causando esto, y eliminarlo. Y una vez que lo eliminemos, veremos que lo va a arreglar. Y luego incluso dentro de esa clase, encontraremos el estilo que está causando el problema. Entonces sabemos que no es ese elemento en sí. Entonces tenemos que ir con el padre de familia. Una manera tan fácil de pasar por ese padre de algo es mirar aquí la barra de navegación lateral. ¿ Tienes un botón? Botón está seleccionado y ahora te dice o te muestra la jerarquía de dónde está sentado el botón en esa jerarquía de disminuida. Entonces es como un árbol genealógico. Entonces el primer padre es el blog que un abuelo es flexbox, contenedor bisabuelo y así sucesivamente hasta el cuerpo. Entonces comenzamos con el primer padre que es diblock. Muy bien, y trataremos de quitar clase. De acuerdo, nada. Definitivamente no es esta clase diblock. Entonces sí deshago para que podamos devolverlo. Entonces ahora vamos a este siguiente padre que es flexbox. Entonces intentamos y la caja de flujo, tenemos dos clases aquí. Quitar uno nada, quitar otro. A ver, todavía nada. Entonces vamos a deshacer esto hacia atrás. Ahora siguiente contenedor padre. A ver. Quitar. Ahí vas. Por lo que es la clase de contenedor la que está causando el problema. Entonces cualquiera que fuera el paso que estuviera aquí, correcto, saltó un paso seis e ir a los pasos, toma Paso seis, que es restablecer todas las clases que están en azul, empezar a ganar opción. Y temblores. Nada, nada. Ah, ahí tienes. Por lo que sólo regresaré todas esas otras clases. Y ahora veamos. Entonces una línea cuando estamos tristes, va a Irlanda a la izquierda y necesitamos en el centro. Entonces por alguna razón, y no tienes que entender esto en este momento. Todos ustedes, en algún momento entienden la mayoría de los problemas por qué están causando y pero a menudo verán, vale, así que solo necesito establecer esto en la alineación izquierda y el problema está solucionado. Y la razón por la que esto está sucediendo, solo para darte una idea, si tienes curiosidad, es porque el contenedor tiene centro de alineación de texto, que significa que cualquier elemento gravado esté dentro del contenedor y no tiene que ser directamente, ¿verdad? No tiene que ser directamente. Puede ser cualquiera de los nietos dentro, y heredará este valor. Y eso significa que todos los textos de inicio fiscal, elementos que son textos como se centrarán. Sí, Robbie, centro. Ahora, ¿por qué eso se aplica al botón? Porque los botones son bloque en línea. bloque en línea se comporta como una especie de texto, que significa que no es un nivel de bloque que se extiende de un borde a otro. Cumple bloque en línea el cual tiene el borde, es borde apagado. Se define ya sea por el ancho o por el contenido interior. En el doble se comporta una especie de gravado. Y es por eso que eres capaz de poner a talento inline-block de elementos como botón y compartir el botón uno al lado del otro porque sí se comporta una especie de pruebas y se les permite ir en la misma línea en Ilustrar significa en la misma luz. Y así los problemas es arreglar aquí naranjas a la derecha, a la izquierda solas. Y estábamos estudiando esto en contenedor de cilindro diblock y reiniciarlo. Deberías arreglarlo. Entonces eso es y creo que solo me queda un último número que cubrirá otras instancias. Entonces hemos recuperado pasos tres y tema no es el tema no viene de ninguno de los padres de lo que podría convertirse en niños o hermanos hacinados. Y este es el caso, por ejemplo, con este elemento. Entonces tenemos esto, imagina que no está creciendo, es muy pequeño. Queríamos llenar la mayor parte de este espacio, pero no está pasando. Ahora empezamos con una imagen con ellos, bien, imágenes, un muy pequeño problema de probabilidad de la imagen y comenzamos con el mismo proceso y quitando la clase. Esta imagen ni siquiera tiene clase, por lo que puedes ser esa imagen. En este caso, a veces hay una instancia y esto puede ser desde la configuración. Entonces a diferencia de la mayoría de cosas otros elementos, él imagina elementos a ellos tienen un lugar extra donde puedes meterte con cómo se muestran. Entonces tienes esta configuración de ancho y altura dentro de los ajustes de imagen. Entonces eso es una cosa que se puede editar sin que edites ninguna de sus estadísticas. Entonces en nuestro caso, no es que no sea la clase. Después vamos a ver a nuestro padre. Y no voy a pasar por todo eso porque no es tarifa tan bien, vamos a hacer, es vamos a revisar como estos muestra niños o hermanos. Entonces imagen esto no nos va a mostrar yo, ni hijos ni hermanos. Por lo que tenemos que usar su Navigator para ver lo que los niños o hermanos tras elemento. En nuestro caso la imagen no tiene muchos hijos. A no tiene hermanos. El único hijo soltero solitario de una cuadra derecha. Entonces seeings imagen no tiene, sí, no tiene hijos ni hermanos. Lo que vas a hacer es que vas a ir con el padre y luego chequear a los hermanos de sus padres. Por lo que parodias bloque derecho y el hermano es bloque izquierdo. Y entonces lo que haces aquí es que te quitan todas las clases del bloque negro porque ese es el hermano fuera del padre. Entonces veremos si eso soluciona el problema, cosa que sí. Entonces sabemos ahora que es una clase que está causando un problema. Cuando pases por esta clase de coma, verás que no hay ninguno de los estilos están en azul. Entonces, ¿qué dice nuestra lista de verificación sobre eso? Una vez que identifiques la clase que está causando el problema, vuelve a poner el vaso en el elemento son empezar con, de acuerdo. Entonces lo hicimos sin ninguna ventaja azul. Entonces lo que tenemos que hacer si restablecemos los estilos de blues, vamos a los pasos suceden. Si restablecer los estilos de boost no ayudó o no hay estilos azules, entonces comienza a restablecer los estilos en color naranja. Porque el color naranja, los estilos que están en día naranja también están cambiando algo sobre el elemento. A pesar de que no se pueden restablecer directamente, porque se están heredando en algún lugar de la clase combo, en algún lugar del padre y así sucesivamente. A menudo este es el caso cuando se trabaja con versiones responsive aquí, mayoría de las cosas están en naranja porque se están heredando del escritorio. Entonces este es el método que normalmente querrás hacer un año en el responsive donde no ves nada del azul, así que tienes que empezar a restablecer. El naranja empieza ahora a reiniciarse aquí, hay una opción para reiniciar. Entonces lo que tienes que hacerlo, averigua cuál sería el valor por defecto y simplemente cámbialo manualmente a ese valor por defecto. Entonces con los márgenes y los paddocks, es más fácil. Ya sabes, siempre es 0, solo lo cambias a 0. Y ves que esto no va a hacer nada. Después vas a esa configuración de ancho, ajustes laterales. Aquí es un poco diferente. Cada uno tiene un tipo diferente de valor por defecto. Ya verás esa semana. Y altura tienen auto como sus valores predeterminados. Pero mínimo. Tiene, y se puede comprobar ya que esto se llena y no se sabe cuál es el valor predeterminado para un mínimo. Esto se puede comprobar en base a la altura mínima. Tiene 0 pixel. Por lo que 0 pixel es el valor predeterminado de altura y ancho mínimos, o puede cambiar a 0. Y ahora ese es el tema. Ahora sabemos que ese tema venía de ancho mínimo Vale, ahora vamos a entender, así que tiene un ancho mínimo de 800 píxeles, lo que significa que se está estirando persistentemente. Más allá de eso lo necesita, y está empujando la imagen Imagine no tiene ningún espacio para que crezca. A pesar de que por eso para solucionar este problema, entonces empiezas a encogerlo de un mejor tamaño. Entonces la imagen tiene espacio a Roma y eso es todo. Entonces estos son los temas de moho que estoy demostrando aquí y muestra la mayoría de los temas. Hay un paso más que no cubrí y esto suele ser cuando estás tratando con algo como una barra de navegación o algunos componentes que vienen del panel de elementos de cláusula where. Y si pasas por todos los pasos y lo hiciste y él hizo el reinicio naranja, lo hiciste todo, sigue sin funcionar. Entonces hay un último paso que querrás hacer y en el que está, agregas ese elemento o un componente desde cero. Por ejemplo, si estás experimentando un tema donde el ahora enterrado lo hiciste todo, todos los pasos que hemos hecho y aún nada. Entonces lo que harás es agregar un completamente nuevo. En tanto que el navbar nav bar. Y como que lo posicionas en el mismo lugar donde se supone que está ese número, y empiezas a revisar. Este sustantivo es completamente nuevo. Navbar tiene los mismos temas no lo son. Por lo que verás si el nuevo número completamente estéril tiene los mismos temas, entonces el tema no puede ser ancho que r bar. Eso significa que es algún otro elemento padre de poder o algo sobre los cuerpos a veces, sí. Los estilos se pueden cambiar en el elemento del cuerpo aquí o desde allí. Etiqueta de elementos de Buddy. Y eso va a causar algunos problemas por debajo de la línea o algún padre y ya sabes, o si ves que el problema no está sucediendo con la barra de navegación y luego comienzas a recrear esa barra de navegación paso a paso, revisas cada vez para asegurarte de que identificaste el momento en que haces algún cambio aquí para que coincida con tu nuevo, aunque viejo, no te molestes con estilo ahora bar. Y tú identificas cuál de las clases cometió el error y causando el tema. Y muchas veces verás que no va a ser de los estilos y puede ser de cosas como configuración o cosas como el navegador donde falta algo, tal vez falta un ícono y tal vez uno de estos elementos falta de ahí. Pero al menos podremos, aunque no identifiques qué es exactamente lo que está causando el problema, podrás desatascarte. Entonces no estás perdiendo el tiempo. Podrás estar bien. Ya sabes, y yo sólo voy a empezar de cero. Tengo este viejo aquí y empezaré a aplicar el mismo contenido que el mismo estilo y nuestro recreado y solo revisa paso a paso para asegurarme de que no vaya demasiado lejos antes de cometer un error. Eso es todo. Eso es todo lo que hay diciendo estos, te ayudaremos con muchos de tus problemas y te ahorraremos mucho tiempo y dolor de cabeza. Por lo que pasaré por la lista de cheques. Esperemos que la mayoría de sus problemas se identifiquen usando la lista de comprobación. 74. Webflow: Navbar (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 predeterminado llamado Navbar Este es uno de los elementos prefabricados de Webflow sí me gusta usar, que podemos agregar desde el panel de elementos, arrastrarlo hasta arriba 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á hecho este Navbar. Entonces dentro del elemento Navbar padre, tenemos un contenedor. Este contenedor es similar a lo que hicimos con nuestro contenido 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. Nav Menu es donde se encuentran estas tres fugas de navegación. Como la mayoría de las otras cosas, es solo un dibloque regular pero con algunos estilos predeterminados ya aplicados a él Podemos cambiar estas sales si queremos. 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, marquemos 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 Navbar 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 weblo 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 de barra de perilla, todos esos estilos y propiedades se llevarán a este contenedor de barra de pomos. 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 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 SVG, 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 en Figma y aplicar 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 márgenes, 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 de weblos Selector de Color, puedes 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 de navegación. 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 logo está fuera de línea, como puedes ver, vamos a tener que alinear el logo en el medio con el menú NAV. Vamos a tener que alinearlo a ojo. Por último, comprobemos la fluidez y capacidad de respuesta de nuestra 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. Hay 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 desplazamiento en la siguiente lección Bien, así que para recapitular, aprendemos a agregar una barra de navegación, la anatomía de una barra, y de qué está hecha, la configuración de un abr y cómo funciona en dispositivos más pequeños, aprendemos a agregar un logotipo dentro de una barra y a diseñar enlaces dentro del menú de navegación 75. 70 Hover State NUEVA interfaz de usuario: 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 el diseño web. ¿Recuerdas esta ley llamada Ley de Jacob de Experiencia de 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 su sitio 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. 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 gestiona bajo el 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 Así como así, el botón cambia. Los estados de opacidad en hover ahora muestran un punto azul para indicar que se ha realizado un cambio al 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. 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 de construir animaciones e interacciones y es súper increíble, pero más sobre eso para los botones Cambiar la sensación de fondo es una manera buena y sencilla de agregar un efecto simple de hover 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 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 cota. 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 como ese botón en la barra de navegación, Añadiendo fondo blanco con 20% de opacidad para el botón en la O podemos volver a jugar con opacidad o rellenarla con 100% blanco Cuando lo llenas de blanco, tenemos que cambiar el color del impuesto a porque el texto es blanco y no se muestra. Por suerte, podemos cambiar cualquier estilo al flotar 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 debajo de la línea, eso es cojo, me refiero a un borde debajo de todo el cuadro de enlace Podemos hacerlo bajo configuración de borde, Seleccione una casilla que indique el botón borde este espectáculo. Automáticamente. Seleccione una línea sólida como estilo. Si no lo hace, asegúrate de que lo tienes seleccionado y que no está configurado en X y cambia el color a blanco. Este es un bonito efecto hover y adecuado para nosotros porque estamos usando un enlace como una caja completa, no solo un texto 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. Presta atención a cómo el contenido debajo cambia ligeramente cada vez que colocamos el cursor sobre los enlaces Eso ciertamente no es agradable. La razón por la que esto está sucediendo es porque el borde de dos píxeles suma al espacio disponible dedicado a los enlaces de navegación. Empuja todo el contenido hacia abajo. ¿Cómo solucionamos este comportamiento? Tenemos que asegurarnos de alguna manera que la altura del enlace de navegación no cambie el cursor por el borde Una forma de hacerlo es agregar tema el border también en el estado regular. Podemos hacerlo transparente para que no se muestre de esta manera. Nav que pone la caja tiene un tema El borde de cualquier manera. Por lo que no cambia de tamaño al flotar. Lo único que cambia es el color. Esa es una buena solución. Los efectos hover en este momento, transición de manera bastante abrupta de un estado a otro Es un salto de cecina muy instantáneo. Este salto instantáneo podría no ser mucho, pero es demasiado rápido para que registremos el cambio. No se siente muy natural y suave. Los diseñadores web en tales casos agregan un poco de efecto de transición. Hay un ligero retraso de tiempo en la transición. Podemos agregar el estilo de transición desde aquí debajo de un menú desplegable, verás 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 Cada estilo puede hacer una transición. Por ejemplo, ves que el nombre del teléfono no aparece en la lista porque el cambio de teléfono no puede animarse. Pero muchos otros ajustes tipográficos pueden. 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 duración de flexibilización es lo que dice exactamente ¿Cuánto dura la transición en milisegundos? El valor predeterminado de 200 milisegundos es bastante bueno para la mayoría de los efectos de desplazamiento Se puede dejar como. En cuanto a la flexibilización, puede parecer un poco complicada, pero son bastante simples En realidad, estas son fórmulas diferentes sobre qué tan rápido van o aceleran y qué tan rápido o lento desaceleran cuando termina la transición Dejemos esto por defecto, la mayoría de las veces funciona perfectamente bien. Ahora bien, si pasas el cursor sobre los enlaces nove, notarás que el borde aparece y desaparece Y eso es mucho más agradable que esa transición entrecortada que era Una pequeña cosa a tener en cuenta. El efecto de transición tiene que ser aplicado en el estado regular, no en el estado flotante Así es como ella evalúa funciona. Bien. 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 Simplemente una forma más sencilla de hacerlo, en lugar de buscar un tipo de transición cada vez que queremos aplicar algún cambio diferente de hover Si un elemento tiene varias propiedades que cambian en la fuente hover, color, fondo, sombras de color En lugar de agregar tres tipos de transición diferentes, podemos simplemente agregar uno que se aplique a todos. A menos que queramos hacer la transición de diferentes efectos a diferentes velocidades, pero esas serán muy raras ocasiones, el mismo efecto de transición en los otros botones. Y que tenemos todos los botones y enlaces de transición agradable y sin problemas. Bien, recapitulemos lo que hicimos en este video. Hemos agregado efectos de desplazamiento a los enlaces y botones de nuestra sección Héroe Los estados de desplazamiento se cambian de los estados en el panel de estilos Podemos cambiar casi cualquier estilo dentro del estado flotante para que los cambios de estado de regular a hover se vean agradables y suaves Podemos agregar transiciones desde la configuración del efecto. 76. Webflow: sección intermedia (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 regresan con revisiones. Entonces, ¿qué pasa? Habrá como, pesar de que 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 DO, 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 este contenedor 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 toda la página web 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 90 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érica 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. 77. Webflow: etiquetas HTML: Empecemos por estilizar nuestro titular. Cualquier nuevo texto que agreguemos a nuestra página por defecto se establece en fuente Arial. ¿No sería bueno que de alguna manera les pudieras dar un estilo predeterminado como hacer que todos los titulares aparezcan en pop ins y todo el texto de párrafo roboto, así que no tenemos que estilizarlos cada vez que añadimos 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 verás que 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. DV Block 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. K. 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 en 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 darle estilo a todas las etiquetas H dos en nuestro sitio web. Ahora, cuando seleccionamos la etiqueta H dos en un titular, este estilo 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 complemento a la etiqueta, asegúrate de seleccionarla 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 también se va a aplicar al estilo predeterminado H one, y se puede ver que esto sucede en la vida. 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 haya seleccionado el cuerpo, vaya al selector y haga clic en las páginas Cuerpo A. 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 serán heredados 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 la configuración 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 dtyle 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 etiquetas 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 se pueden diseñar para crear un estilo general predeterminado para esos tipos de elementos como todos los titulares H o todos los párrafos El estilo del texto es un hábito profesional. Ahorra mucho tiempo en el transcurso de la línea. Y es eficiente y crea un código más limpio. La etiqueta de nivel más alto que podemos estilizar 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 la página heredará esa fuente de la etiqueta body hasta que la anulemos con otras etiquetas o clases más específicas 78. Webflow: clases combinadas: Entonces la sección media solo tiene tres elementos, encabezado, párrafo y una imagen. Entonces necesitamos los elementos de cordón en weblo. 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 X para la optimización de rutina. Por supuesto, ejecute la imagen a través optimizada para comprimir el archivo. PNGs y JPEG que siempre debes comprimir. Los SVG también se pueden comprimir, pero la mayoría de las veces no es necesario. Son lo suficientemente pequeños. A 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 la alineación de texto para centre en el bloque D del contenedor, que se centre en el bloque D 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 otros lugares, 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 selector, button, que es la clase base y blue, 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. Sin embargo, todas esas propiedades que hemos aplicado a la clase combo azul 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, quienes a su vez heredan estilos de la etiqueta relacionada Relacionado es una palabra importante aquí porque un párrafo no heredará ningún estilo 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 sobrescribimos 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 igual manera, una clase base puede anular todo lo que esté por encima de ella, pero no afectará a la clase de combate si esa clase combo está a cargo de ese tipo específico de estilo como color del teléfono o el color de fondo, y así sucesivamente. Eso es exactamente lo que CSN significa 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 dit 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. La segunda caja rosa dice todos los enlaces. ¿Por qué? Porque los botones son enlaces regulares. Simplemente los dile para que se vean como botones. Entonces, si establecemos algunos estilos en todas las etiquetas 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 la, obtenemos un contenedor centrado. Un par de cosas que necesitamos diseñar en nuestra sección, el ancho del párrafo y el espaciado. Podemos tomar el espaciado de nuestro diseño. 30 píxeles en la parte superior y 16 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 lo está. Entonces, ¿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 Tereca, aprendimos sobre las clases combo y cómo nos pueden ahorrar 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. Flujo de web: pie de página (aplicación de chat): I. En la última sección de esta página, el pie de página. El diseño es bastante sencillo. 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. Por supuesto, hay una opción de usar el elemento columnas de Webflow Encajaría nuestro diseño justo porque se basa en la cuadrícula de 12 puntos dos. Pero ya sabes lo mucho que me encantan esas columnas, así que no las vamos a usar. En cambio, haremos nuestras propias columnas usando flexbox. Como es habitual, agreguemos la sección y un contenedor en su interior. Agrega otro bloque y aplica nuestra clase de caja flexible habitual. Ahora, agreguemos otro bloque d dentro del cual nombraremos como columna de pie de página. Voy a darle un trasfondo temporal y esconderme solo para ver lo que estamos haciendo. Al igual que en nuestros diseños, vamos a usar seis columnas. Estas van a ser columnas de igual ancho. Toda la caja flexible se dividirá en seis partes iguales. Podemos hacerlo usando puntos porcentuales. 100% dividido por seis, nos da 16.666, y así sucesivamente En lugar de hacer las matemáticas por nuestra cuenta, en realidad podemos tener flujo web a las matemáticas para nosotros al igual que Figma. Dentro del ancho tipo de relleno 100% dividido por seis. Si duplicamos estas 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. 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 primero una coboclass y quita el margen izquierdo y lo mismo en la última columna Bien. Ahora, pongamos el contenido en las columnas correspondientes. En lugar de usar párrafo para texto normal, tenemos otra opción para un texto llamado bloque de texto, que es lo que vamos a usar para esta línea de etiqueta debajo del logotipo. El bloque de texto es básicamente una inmersión 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 bloques de texto para todo lo demás que no sea un párrafo de encabezado 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 d 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 del flujo web. 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 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. 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. De lo contrario, no van a parecer enlaces. Simplemente podemos convertirlo en color azul en el estado hover. Esa es una opción simple y efectiva. Podríamos agregar un efecto de transición hover aquí igual que 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. Los pone uno al lado del otro. ¿Por qué es eso, puedes adivinar? Porque la visualización de los vínculos se establece en línea. Eso significa que fluye como texto, que es. 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. Realmente no es 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 nab 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 sería extraño en la barra de NAB para Entonces, ¿cómo podemos hacer que se apilen uno encima del otro sin que se estiren de borde a borde? Mediante el uso de caja flexible. Podemos darle el diseño de flex padre y darle la dirección vertical en lugar de horizontal. Después dejó una línea, Asegúrese de darle a esta izquierda una línea. 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, diseñemos nuestro titular. En lugar de aplicar una clase a los titulares de este 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 que podríamos usar para algo más grande, un titular de nivel medio. ¿Recuerdas cómo diseñar 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, toda la t se rellenará 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 nuestra configuración de caja flexible. Verás dice una línea central. Lo que queremos es una línea superior en su lugar o estiramiento. Como de costumbre, agreguemos una clase comp a esta caja flexible antes de realizar cualquier cambio. No estropees otras instancias. Estirar es mejor porque las columnas vacías se estirarán dos 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 contacto como enlace. Por ejemplo, para vincular la dirección de correo electrónico, así se abre una nueva ventana de correo electrónico cuando el usuario hace clic en ella. 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, Rico Linka Google Maps URL Revisa abrir nuevas ventanas 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. He agregado el bloque de texto dentro del contenedor pero fuera de la caja flexible. Y podemos agregar un margen de 180 píxeles en la parte superior al 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 distancia de la parte inferior. Pero en el flujo web, es mucho mayor porque nuestro bloque de sección tiene un relleno de 90 píxeles. Tenemos que cambiar ese relleno de 90 a estos 30 píxeles. Pero antes de hacer eso, tenemos que agregar una clase combo. Y ahí tienes. Estamos abajo con nuestra versión de escritorio de nuestra página. Pasemos al modo de vista previa y comprobemos cómo se ve todo. Para recapitular, hemos construido el pie de página usando un diseño de caja flexible Hemos dado columnas de pie de página de ancho porcentual, por lo que se contraen y se expanden 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 que se vea hermosa y fácil de usar en cualquier dispositivo. 81. Introducción al diseño web responsivo: Para 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ía 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. Por suerte, 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 el 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. Di 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 la 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 se puede ver en la regla a continuación. 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 En la parte inferior, 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 como fondo rosa en el iPhone six. 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 están heredando 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 el escritorio. Pero el cambio en la tableta afectará al móvil. Todo bien. A continuación, bajaremos y optimizaremos nuestra página para estos dispositivos, a partir de la sección héroe. 82. 77 Tableta NUEVA interfaz de usuario: Bien, así que comencemos con una sección de héroes. Iremos uno por uno por cada dispositivo y optimizaremos el estilo. En primer lugar, la vista de la tableta. ¿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 peso mínimo. Si recuerdas, eso significa que la imagen está tomando el golpe. Entonces tenemos una barra Nab que necesita ser arreglada. Tendremos que ver si realmente podemos encajar nuestros enlaces regulares aquí. Si no, nos quedaremos con el menú de hamburguesas 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. ¿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. Haga clic en cualquier parte de la barra de navegación y vaya a Configuración. 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 una mesa. Eliminemos ese relleno grande que se aplica a esa 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. ¿Qué hacer con una imagen de héroe? Todavía es bastante pequeña. En comparación, el contenido de la izquierda es demasiado grande y está empujando la imagen en el escritorio, Teníamos suficientes bienes raíces para poder usar titular tan grande, pero aquí no lo hacemos. Así podemos empezar a reducir los tamaños en el bloque izquierdo. Entonces sí encogimos el contenido, pero la imagen no está creciendo. ¿Por qué es eso? Porque tenemos ajustes de ancho mínimo aplicados al bloque izquierdo. A pesar de que el contenido se está reduciendo, la caja en sí no lo es. 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. 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. 83. Adaptable: sección de héroe - móvil 1: Como mencioné en un video anterior, el estilo cambia en cascada a pantallas más pequeñas. Todos los cambios que hicimos en esa 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 añadir 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á puesta a la horizontal. Así de increíble es la caja flexible. Podemos cambiar el diseño sin alterar la estructura HTML y configurar estos estilos en un dispositivo específico Pero antes de hacer estos cambios, vamos a darle a nuestro flex box una clase cobo porque estamos usando este cuadro flex 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 un mod de paisaje. 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 la sección. Ya encogimos esto en la vista de tableta, pero así lo encogimos un poco más. Lo mismo aquí para el margen del párrafo. Cuatro de píxeles se ven distantes. La 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 ocultas valor, entonces esto va a pasar. 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 para volver a ellas. Yo 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. Te encontrarás con objetos de desbordamiento a menudo, 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 permiso para crecer hasta los 500 píxeles, lo hace, ignorando las dimensiones de su elemento padre Este 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. Por defecto, la imagen siempre intentará crecer a 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 escaleras despistadas 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 futuro. Bien, así que vamos a darle un ancho máximo de 500 píxeles al elemento padre en su lugar. Ahora bien, esto se comporta exactamente como queremos que lo haga. 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. Sí 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. 84. Adaptable: sección de héroe - Mobile 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 una barra, 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 pequeña y estrecha, tenemos que hacerla muy pequeña De lo contrario, obtenemos una palabra por línea, lo cual no es idea. Pero si revisas la pantalla súper estrecha es para teléfonos Android 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 parte del tiempo, no me sale de mi camino para que sea perfecto para los 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 celdas, podemos usar unidades receptivas para la fuente. En este caso, VW para el ancho de la ventana gráfica. Si le damos al teléfono 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. ¿Recuerdas qué configuración de pantalla hace eso? 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á hecha. Vamos a darle estilo a la barra de navegación en el siguiente video. 85. 80 Nav Menu NUEVA interfaz de usuario: Hasta ahora estamos balanceando nuestras versiones responsive. En este video, vamos a darle estilo al botón de menú de la barra Nab, o como los niños de la escuela lo llaman el menú de hamburguesas, porque el ícono parece una Ahora mismo, se ve bastante horrible. No se preocupe, estilizar, esto no es gran cosa. Primero, vamos a darle estilo al botón en sí, se el icono de menú que hay dentro puede cambiar el icono de menú que hay dentro. 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 una simple inmersión y subir tu propio icono en formato SPG o PNG Aunque hay un beneficio de simplemente mantener este icono predeterminado, porque el color es editable desde la configuración del teléfono y esto facilita el cambio de colores También podríamos construir nuestro propio icono de menú a partir de bloques de buceo. A veces hago esto si estoy construyendo una animación súper elegante para mi cliente Casi cualquier cosa es posible en Webflow. Por ahora, sigamos primero con el icono predeterminado. El color, vamos a necesitar esto en blanco. Podemos cambiar el color del teléfono a blanco. Y eso va a hacer el trabajo a la hora de estilizar este elemento. Apégate a aplicar estilo al 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. Vamos a encoger el relleno. Un poco de relleno es lo que controla cuánto de esto es clicable y visible en el menú desplegable. 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 Nab a flex box 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 Tenemos una talla, esto por, se puede ver mejor en la vista de retrato. Y 27 o algo así parece una buena elección. No necesitamos agregar una animación hover aquí, porque solo se muestra en móviles donde no necesitamos usar un mouse, 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 hacer eso desde la configuración. Simplemente seleccione cualquier elemento de barra de mando y vaya a Configuración, y luego haga 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 se llevarán hacia abajo en la vista móvil a lo mismo ocurre con cualquier cambio de diseño. Si algún día ves enlaces móviles arregla o pon verifica si has realizado algún cambio en la versión de escritorio. Dentro de este bloque de menú de navegación, tenemos todos los enlaces incluyendo el botón para iniciar todo el menú. Primero vamos a iniciar el 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 será congruente con nuestra grilla en estos momentos. Los enlaces se notan dentro un poco 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. este momento tenemos estilos que se están heredando del escritorio, como el subrayado en el hover y los acolchados Primero arreglemos ese relleno. No necesitamos acolchados laterales. 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 dial fronterizo para deshabilitar el borde del botón Cuando pruebes esto, verás que aún aparece esa frontera. Eso es porque tenemos habilitada esta frontera, no sólo en puerto, sino también en un estado regular. Tenemos que sacarlo de un estado regular también para evitar este comportamiento gracioso ahí. Ahora no tenemos puerto. 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á listo para bloquear, por eso se está estirando así. Por alguna razón el botón se alinea en el medio. Eso significa que alguna propiedad en el elemento padre está haciendo esto. Hay dos propiedades que podrían alinearlo con el centro. Primero, la caja flex se presenta pero nuestro menú N no es flex box. Eso no es. La segunda es una alineación de texto regular que tendría sentido porque los elementos de bloque en línea se pueden alinear usando la alineación de texto. Pero si comprobamos la alineación del texto del menú de navegación, está configurado a la izquierda. 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 del menú de navegación. 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 te darás cuenta de que sólo están fingiendo. Una cosa a tener en cuenta, es necesario aplicar la alineación al menú de navegación principal, no al botón en sí. No pasará nada si lo aplicas al 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 pixeles arriba más 20 Inferior, total de 40. Vamos a sumar este 240 aquí. 20 desde el último enlace y 20 para el margen superior. 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. Para que coincida con este total de 50 píxeles. Vamos a agregar el fondo 20 en el botón ahí. 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 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 sobre un estado genérico, entonces obtendremos el fondo cuando el menú esté incluso cerrado. Cambiar estilos para el estado abierto es como cambiar estilos para el estado estacionario, tiene que mostrar esta etiqueta verde Pero el estado abierto no figura en la lista desplegable del estado. En cambio, el estado abierto debe habilitarse desde la configuración abriendo nuestro menú. Ten en cuenta que show height switcher no actualiza instantáneamente el lote de estado abierto Es necesario volver a hacer clic en el botón de menú y luego el estado se actualizará. 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 la vayas a agregar, no la va a agregar en el estado abierto. 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 menos alrededor de 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 de los bordes. Y luego selecciona los dos primeros. Y luego poner algo así como seis píxeles. Probemos nuestros resultados en la previsualización 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. Simplemente selecciona el menú de navegación del Navegador y cambia el relleno 60-30 Y hecho así, hemos peinado con éxito el menú de hamburguesas para 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 dimos estilo al elemento del menú, le dimos el fondo que queríamos y ajustamos el relleno. También hemos hecho pequeños cambios en los enlaces nab y en el botón de navegación, hemos eliminado el cursor estacionario de los enlaces y modificamos los acolchados eliminado 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 el siguiente video, continuaremos con el resto de la página. 86. 81 Overflow NUEVA interfaz de usuario: 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 la palmadita superior e inferior de la sección Como mencioné antes, necesitamos un espaciado un poco más ajustado en dispositivos más pequeños Entonces 60 píxeles deberían ser buen paisaje, tenemos un desbordamiento. Cuando obtengas el 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 tema. Aquí, es obvio que el párrafo está causando esto porque está fuera de los límites del contenedor e incluso 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 caigan en cascada hasta el final. 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 de inmersión aquí. He agregado a este dip, ancho y alto exactos, Son 900 pixeles por 300 pixeles. Si ponemos más contenido en este bloque dip, el contenido se desbordará. ¿Por qué? Debido a que tiene una altura definida, 300, 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. Queremos mantener la caja en dimensiones exactas. Si revisas la configuración de desbordamiento de este bloque, verás que está configurado como visible. Esto significa que aún se mostrará el contenido desbordante. 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 esta barra de desplazamiento de visualización, sólo 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 de nivel de desplazamiento solo para anotarlo en tu computadora, es posible que veas o no 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. En este caso, lo colocamos en este bloque blanco. Si lo colocamos en el párrafo, eso no va a hacer nada más desplazarse por el contenido Otro uso común para la configuración de desbordamiento es cuando queremos recortar contenido que generalmente se hace con imágenes. Nunca queremos recortar texto. Probablemente 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. Nosotros nos encargaremos de ello una vez que lleguemos allí. Ahora hagamos algo sobre esta mirada muy estrecha en la sección de Iro. Hemos cambiado el relleno a 30 píxeles, pero nunca lo hicimos para esta sección. Hagámoslo. Disminuyamos el acolchado vertical también para que sea más económico Y 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. Restablecer el valor en retrato. Si los has cambiado en algún momento, es mejor heredar valores que repetir los estilos porque solo agrega código extra que no necesitamos Por último, hagamos algo sobre los titulares demasiado grandes para el móvil. Ahora recuerda que el rumbo no es una clase. Nosotros le damos estilo a la T. Así es como vamos a darle estilo a esto. Seleccione todos los encabezados H one del menú desplegable del selector y luego cambie los estilos que cambiarán todos los encabezados H one para retratos móviles, pero no afectarán a otros Todos los 35 píxeles 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 tener image co fuera del sitio y recortar el desbordamiento usando lo que acabamos de aprender. Primero, tenemos que aumentar el tamaño de la imagen a la hora de cambiar los tamaños de imagen en las vistas responsivas. 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 arrastra la imagen para cambiar el tamaño, pero tampoco la uses Cambia ese mismo ancho que está dentro de los ajustes. Lo que queremos cambiar en cambio es el estilo CSS de la imagen, porque el 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% que le dice a la imagen que no crezca más grande que su contenedor padre. 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 agregar esa configuración exacta y establecerla en algo así como 170% Ahora se sale de la página y se sienta Ahora podemos ver un poco más de detalle de la imagen, pero tenemos imagen desbordando así ¿Qué hacemos? Necesitamos establecer desbordamiento oculto en el elemento padre para recortar la imagen. Pero no podemos poner eso en el padre directo, que es el contenedor. Debido a que el contenedor no va hasta el borde, la sección sí, 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. Ahí vamos. Ahora la imagen está recortando justo en el borde de la sección Hemos aprendido importante concepto de desbordamiento y cómo usarlo para nuestro beneficio. Overflow Visible es una configuración predeterminada. Mostrará cualquier contenido que vaya fuera de los bordes del elemento padre. Desbordamiento oculto va a recortar el contenido tal como lo hicimos aquí. Un desplazamiento de desbordamiento y auto permitirán que el contenido se desplace dentro del contenedor. Pero la opción de desplazamiento mostrará una barra de desplazamiento persistente incluso cuando no haya nada para desplazarse. 87. Adaptable: sección de CTA (aplicación de Chat): La sección de acción de culto no se ve mal desde el principio. Podemos hacer un par de ajustes 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 pone 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 del teléfono podría ser demasiado grande. Si estamos haciendo un sitio web completo, alcanzaríamos más limitaciones de este tamaño de titular. 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. Yo solo voy a ir con el tamaño de teléfono de 35 Pixel que usamos en la pantalla del móvil y solo hacer que por defecto sea H un tamaño para todas las pantallas receptivas desde la mesa 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 darle al bloque izquierdo un ancho mínimo. Tres 40 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 de la caja flexible a vertical y la alineación a la izquierda. No olvides crear primero una nueva clase combo, o va a alterar todas las cajas de lino a lo largo de la página Estoy lamentando el uso de la clase compartida para todos estos flexbox Debería haberlos estilizado individualmente Bueno, así es como aprendes. El bloque de contenido no se alineó porque tiene un margen establecido a la izquierda. Eliminemos ese margen. Veamos, la imagen es demasiado grande en versión más amplia. Digamos el ancho máximo en la imagen, pero mejor aún en el propio bloque izquierdo. Como mencioné anteriormente, en cualquier momento que puedo, 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 regular De todos modos, volviendo a nuestra sección, 580 píxeles de ancho máximo se ve bien aquí. No me gusta el tablero huérfano en el titular, así que vamos a patinar el bloque derecho, así que la palabra pequeño salta a la siguiente línea Además, vamos a trincar ese espaciado entre los botones y las estrellas Es parte de esa línea gris. Aumentemos un poco el espaciado alrededor del contenido. Está demasiado cerca de la imagen y del pie de página. Por último, la versión retrato. Bien. Aquí, necesitamos eliminar 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. En las estrellas, arreglemos el diseño para que sea vertical en lugar de horizontal. Este es un diseño flexbox, por lo que podemos cambiar eso con un solo clic Asegúrate de tener una clase cobo aplicada. Eso es todo luciendo elegante. Acabamos de quedar pie de página y ya terminamos. 88. Responsive: pie de página (aplicación de chat): Entonces, ¿qué tenemos aquí? Se trata de una caja flexible 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. Ya hemos discutido esta opción en el video de 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 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 los ajustes justificados a la izquierda. Ahí está 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. El display non property oculta el elemento y libera el espacio que ocupaba. ¿Qué más? Las columnas tienen los márgenes izquierdo y derecho, así que 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 una columna que solo tenga 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 cambio las columnas se aprietan muy apretadas. Eso es porque tienen el porcentaje con aplicado a ellos, lo cual está bien en el escritorio, pero se vuelve innecesario en este tipo de maquetación. Entonces, deshagámonos de él. Ahora esa columna con es automática, 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 modificamos es el espaciado entre los derechos de autor y los enlaces Creo que 60 pixeles serán mucho mejores. Echemos el último vistazo a todo el asunto. 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, el 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 formularios e interacciones y animaciones que pueden hacer que cualquier sitio web se vea tan increíble y tan fresco y tan moderno y de aspecto 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. Entonces obtienes esta experiencia práctica sobre cómo comenzar todo con el 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 entregando todo, publicando con un dominio personalizado y 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 empieces a trabajar como freelance, dentro de la parte avanzada Entonces, una vez que llegas a esa parte final de este curso, que es avanzado, ya sabes todo lo que es esencial, y eso puede hacerte comenzar con el freelance Y mientras trabajas como freelance mientras buscas empleo, también puedes continuar con partes avanzadas y perfeccionar tus habilidades y mejorar 90. 85 Publicación de nueva interfaz de usuario: Por fin publiquemos nuestra página. Esta es una prueba bastante simple. Vaya a Publicar y haga clic en Publicar en Dominios seleccionados. Dale un momento. Ahí. Nuestra página web pixel perfect está en vivo y operativa como un char. 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 entonces vamos a poder publicar nuestro sitio web en nuestro propio dominio. Los planes de alojamiento de Webflow 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 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, podemos cambiar el subdominio de nuestro sitio web Ve a publicar y edita este campo a lo que quieras. Siempre y cuando no se tome, haga clic en Guardar. 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. Esto se llama Favicon. En este momento está mostrando un Favicu por defecto de Web Flows. Pero podemos cambiar esto desde la configuración del proyecto, Aquí hay dos iconos. Primero está este Favicon que se muestra en una pestaña del navegador, y el segundo es un clip web Web clip 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 agregar un 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 usé esta característica, 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 icono a partir de nuestro logo. 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. Eliminar todo menos la letra C, agrandarla exportada en PNG y ese va a ser nuestro clip web. En cuanto al Favican, sólo tenemos que escalar esto a 32 por 32 El redimensionamiento regular no va a hacer el trabajo. No va a escalar tanto rectángulo como el impuesto 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. Si hay imágenes fiscales rectángulo, va a bloquear las proporciones de todas las capas su interior y luego redimensionarlas por completo. Es una pequeña herramienta muy útil y vuelve a exportar en PNG. Y luego subir cada uno a su lugar dedicado. Las dimensiones de estos iconos tienen que ser exactamente esas. 32 por 32.2 56 por 256. Webflow no te permitirá subir ningún otro tamaño. Ahora vuelve a publicar para ver que los cambios surtan efecto. Solo un pequeño nodo lateral para los usuarios de Safari. Safari no actualiza el Favicon de inmediato. Incluso cuando lo refrescas varias veces, va a mantener la tela vieja. Hace esto porque guarda el Favicon en caché y lo extrae de ahí, lugar de recargarlo y agarrarlo de la fuente todo el Si necesitas actualizar el Favicon y ver en Safari la última versión, lo que necesitas hacer, necesitas borrar el historial de navegación o vaciar la Y puedes hacerlo desde aquí. De historial, historial claro, o me gustaría usar, si tienes esto desarrollado, entonces es más fácil porque solo va a borrar el caché en lugar del historial de navegación que tiene algunas otras cosas ahí dentro, caché vacía. Y ahora cuando vuelvas a cargarlo debería actualizarlo. Ahí vas a lo último de Vavican. Eso es todo lo que nuestra página web está en vivo. Se ve genial y es agudo 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. Ese 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. Otra característica llamada el editor, quédate. 91. 86 Editor de flujo de web NUEVA interfaz de usuario: ¿Alguna vez he mencionado lo increíble que es el flujo web? Así de increíble 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 lado de la vida, literalmente. En el lado de la vida, sin administración de contenido feo y editores de texto, simplemente puedes hacer clic en su contenido y comenzar a editar. Esto es tan increíblemente útil para los clientes que ni siquiera puedo poner en palabras. Tus clientes no suelen ser expertos en tecnología y lo último que quieren hacer es averiguar cómo funcionan los sistemas de gestión de contenidos Lo último que quieres es tu cliente te envíe un correo electrónico cada vez que necesite algún pequeño cambio en el titular para eliminar un coma o agregarle una nueva sala. Las solicitudes se arrastrarán sobre usted después de que haya finalizado y enviado su 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 diseño del editor que está dentro del diseñador aquí. Es solo contenido, texto, imágenes o enlaces. Puedes cambiar una imagen simplemente haciendo clic en ella y subiendo una diferente También puedes cambiar una URL de destino de enlace o el texto. Los cambios no se reflejarán en lado de la vida hasta que hagas clic en el botón publicado. Después de eso, todos los cambios se pondrán en marcha al instante. Y así de simple. Obviamente, estos cambios se verán reflejados en el diseñador al que podemos cambiar desde aquí en caso 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 desmarcar Los colaboradores pueden editar este elemento. 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. Ese es el editor, bastante simple pero potente. 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, 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 hasta ti 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 cliente completo. Quédate alrededor. 92. 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. 93. 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 94. 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. 95. 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. 96. 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. 97. 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. 98. 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 99. 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. 100. 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 101. 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. 102. 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. 103. 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. 104. Diseño de página de inicio de TeamApp: parte 1: El moodboard, tenemos el marco de alambre, 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 marco de alambre aquí porque va a ser más fácil para nosotros seguir el marco de alambre en lugar de ir y venir entre páginas. Junto a él, agreguemos un nuevo marco en 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 ella está centrada, y queremos tener un layout donde podamos poner el 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. Se ve bastante bien. Hay una buena cantidad de espacio, así podemos poner nuestro contenido a la izquierda. Ahora vamos a elegir 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 alguna razón específica, 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 reducir eso en Google usando el número de estilos. Seis estilos en realidad significan tres pesos diferentes porque cada peso tiene una versión cursiva con él. Eso no es realmente suficiente. Voy a ir con a ocho estilos. Este en realidad se llama Work 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. Evitaremos elecciones embarazosas. Ex y todo seguro en esa descripción, y ahora vamos a aplicar ese teléfono a nuestra página. En lugar de crearlo desde cero, voy a copiarlo desde el marco de alambre de aquí. No hace falta reinventar la rueda cada vez. Sólo 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. Menos masa significa menos gravitación y tracción. 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 esa imagen, lo contrario el contenido no será mucho visible. Ahora, para el formulario de llamado a la acción. Mm hm. 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 decidir qué tan cerca quieres seguir junto con píxel a píxel o tal vez un poco. Está bien de cualquier manera. un valor de aprendizaje en ambos enfoques. Oh. Yo sólo estoy mirando los márgenes y distancias aquí, no yendo realmente por el grado como se puede ver Siempre confíe en sus ojos sobre las pautas y reglas de diseño. Seguirlos ciegamente a veces rinde lejos de obtener resultados óptimos También estoy tratando de 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. Muy bien, hasta ahora se ve dulce. Pongamos una barra de navegación. L et's hacen 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 Agreguemos un logotipo a. 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, tienes un logotipo completamente nuevo. Lejos luciendo bien. Sin embargo, una cosa que quiero arreglar 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. Ve al relleno que creamos y cámbialo a un gradiente radial. Esta vez, no lineal. Porque con la radio, podemos crear un 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. Puedes jugar con otras manillas para lograr el resultado exacto que quieras. Ahora volvemos a 40% de opacidad. Ahí vas. Su rostro ya no está oscuro y se ve mejor en general. Esta es una gran manera de utilizar imágenes que tienen demasiado detalle y demasiado pasando en ellas. Puedes crear focos en tus puntos focales y luego den el resto de la imagen Todo bien. Pasemos aquí y continuemos con el resto en el siguiente video. 105. Diseño de 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, que podamos mostrarlo. Al igual que la última vez, voy a buscar recursos de sketch 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. Yo la he puesto ahí. Pero también, si quieres encontrar algo propio, puedes hacerlo, y puedes ir a la página de recursos como una para boceto o una para Figma que he incluido en la página de recursos donde puedes encontrar diferentes masillas y plantillas gratuitas o cualquier cosa por el estilo que podrías incluir como escaparate del producto En la importación, me dice que no tenemos teléfonos que formen parte de este documento. Lo que vamos a hacer es sustituir por otra cosa. Usemos roboto en su lugar. En el lado izquierdo, te dice el teléfono y a la derecha, te dice el peso que se utilizó. Automáticamente seleccionará el peso correcto para ti, pero si tu teléfono de reemplazo no tiene el mismo peso exacto, entonces selecciona algo manualmente. Esta pantalla de reuniones parece bastante buena. Podemos traer eso y usemos nuestro propio azul. M. Para seleccionar el contenido de un grupo, mantenga pulsado el control o comando y seleccione con el mouse, hará una selección profunda similar que hace haciendo clic y manteniendo presionada la misma tecla. En press shift, en caso de que quiera dieleccionar alguno de los elementos M. M. M. Como esta pantalla es bastante amplia, podemos moverla fuera del borde. Ese también es un truco bastante bueno. Y voy a agregarle una sombra para que sea más visible. Aquí hay una punta de las 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. Tipo de vuelo lo que están usando aquí. Podemos agarrar este color blanquecino exacto 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. Vamos a dar la vuelta a las esquinas ahora. Siempre es una mejor idea redondear la esquina en elementos de interfaz como ese. Se siente más terminado. Señalar las esquinas se siente como alguien se rindió a mitad de camino Sabes, sería bueno hacer algo como esto para sacar algunos elementos de la maqueta. Va a agregar más dimensión y hará que todo sea mucho más interesante. Aquí hay una matriz de higos. Puede copiar propiedades más de un objeto a otro. Al igual que la sombra que acabamos de crear, seleccione la propiedad dentro del panel, haga clic en el borde aquí para seleccionarla correctamente. Después controla 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. Mm Mm hm. Mirando con hasta ahora, agreguemos el contenido. M M. M. 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, teníamos la foto al borde, pero ds 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 obvio decir que las fotos están en stock y no se hicieron como parte de una sesión de fotos para ese sitio web Pero las fotos del mismo colaborador suelen tener un aspecto muy similar. Tendrá el mismo estilo, mismo filtrado, y en general similar filtrarlo. El uso de tales fotos crea una consistencia increíble en la página. Nuestro caso, somos Lock, 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, así que esto es aún mayor consistencia. Va a sentir que hicimos nuestra propia sesión de fotos para este sitio web M. M. M. M. M. M. Y ahora voy a tomar algunos elementos del simulacro mismo 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 pulcro. Hemos bloqueado estas fotos. No son solo la misma estancia y escena, sino que también ambas modelos sonríen y se miran la dirección del otro. 106. 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. 107. Diseño de publicaciones 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 pegar y Na bar directamente desde el diseño de la página de inicio. 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 de fuente, 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. Pero Mmm. 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 una película 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 hmm. 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 voy a tomar una captura de pantalla de un plug in e insertarlo en su lugar Si es importante que mi cliente ya sepa cómo se ve. Y Pie de Página es Fácil Ps. 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. Mm. 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. 108. 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 dispongo 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 bota, 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 texto 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. Podemos ordenar estos elementos usando la función de alineación de Figma, seleccionarlos y luego centrarlos horizontalmente O como lo llama Figma alinear centros verticales. Solo asegúrate de no tener las capas agrupadas 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 así 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 esta extensión de chrome llamada Gallery Fi ink en los recursos. Escanea la página en busca imágenes y te permite descargarlas fácilmente. H Con sus nombres, voy a usar el contenido de plugin. 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 los autores. Vamos a asegurarnos de que el género de los nombres coincide correctamente con las fotos. No queremos a una chica llamada Arthur. Mm ahí, todo está mucho mejor ahora, se ve real y mucho más impresionante que solo contenido repetido. Pero necesitamos fijar el espaciado en bloques 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 Uh 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 alámbrica. Uh, eh. 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 de 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 del brief del proyecto, luego al mood boarding y luego al encuadre de alambre 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 muchas veces 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 que 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, 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, no 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. 109. 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. 105 Navbar NUEVA interfaz de usuario: En este video, vamos a construir la barra Nab. Si recuerdas, la barra de navegación es un componente pre hecho en Webflow, que podemos arrastrar justo en el lienzo desde aquí Y podemos darle estilo como lo queramos. Aquí tienes un truco oculto de webflow, presiona comando o control, obtendrás esta barra de búsqueda rápida aquí, podemos buscar todos los elementos y encontrar activos y mucho más Puedes buscar ahora barra y arrastrarla directamente a la página. O simplemente pulsa Enter e insertaremos automáticamente. Bien, ¿qué tenemos que hacer con el bar Nab? Lo primero que noté es que el tamaño del contenedor napbar es usar 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 en 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 bien, ¿qué tenemos que hacer en Webflow? Solo necesitamos tomar el contenedor y darle un tamaño de ancho. ¿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 el ancho regular lo mantendrá en 1,160 píxeles, sin importar el tamaño de la pantalla La barra de siesta se pega a los bordes cuando encogimos la pantalla. Entonces necesitamos agregarle un poco de relleno. Ahí lo tenemos. A continuación tenemos que cambiar el fondo. Nuestra barra Nab en el diseño es transparente. Eso es fácil de cambiar. Selecciona toda la barra Nab, no solo el contenedor, y cambia el color a transparente Bien, ahora agreguemos el logo. Tenemos que exportarlo de Figma. Primero, vamos a exportarlo como archivo Fig, 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. Inserte el logo dentro de la caja de la marca. Tenemos que dejar caer primero el elemento image. ¿Viste lo que hice aquí? Búsqueda rápida, luego busca imagen. Y debido a que tenía elemento de marca seleccionado, se me cayó justo dentro cuando golpeé Enter. A continuación, vamos a darle estilo a los enlaces. Pero primero tenemos que añadir la fuente a nuestro proyecto. Estamos usando un teléfono de Google llamado cabina. No está dentro de la lista de fuentes. Aquí, tenemos que agregar el teléfono 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ía de los teléfonos alles. Así que agreguemos todo hecho ahora podemos volver al diseñador y comenzar a construir o diseñar. Si mantuviste abierta la pestaña del diseñador, asegúrate de refrescarla. Después de agregar teléfonos, el teléfono aparece en el menú desplegable. También es posible que deba solicitar control de diseño si tiene webflow abierto en dos ventanas separadas Ahora 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 cabina por defecto hasta que las sobrescribamos ¿Por qué este enfoque es superior a cambiar fondos directamente en cada elemento? Bueno, primero ahorra tiempo, pero segundo, solo cambiar la etiqueta del cuerpo, podemos editar la fuente en todo el sitio web con un par de clics. Eso es. Ahora los enlaces de navegación están heredando el teléfono de la etiqueta corporal 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 eslabones estaban de moda. ¿Por qué es eso? Porque no tenemos una clase de estilo aplicada a ellos por defecto. Al cambiar el color en el primero. Webflow creó automáticamente nuevos estilos y lo llamó un enlace de navegación Ahora podemos tomar esa clase y aplicarla en otras dos. Todos los cambios se aplican a todos ellos. Tenemos cinco enlaces de navegación 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 los valores de relleno para que coincidan con el botón en nuestros diseños, entonces obtendremos el tamaño coincidente. 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 los demás, así que la va a sumar. Todos los enlaces, qué hacemos esa clase combo por supuesto, van al campo selector y tecleamos un nuevo nombre junto al enlace Nabb Eso le va a dar una clase combo. Css es sensible a mayúsculas y minúsculas, así 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 también verás diferencia entre los estilos que fueron creados automáticamente por Webflow y los que creaste manualmente Muy 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 Este un alfa de cuatro es como se puede establecer la transparencia en un color a 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 del 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 barra no misma. El resultado es lo mismo, pero el segundo es mejor. ¿Por qué? Porque el contenedor es una clase que vamos a re, usar en otra parte. Lo mejor es mantenerlo intacto. La clase Navbar, por otro lado, va a ser utilizada solo en la barra de navegación, por lo que podemos diseñarla de manera segura como queramos Como puedes ver, el logo no está centrado, apenas se nota si no ves los límites del contenedor, Pero no podemos ignorar esos detalles. Queremos que nuestro sitio web se vea prístino, una obra de arte. ¿Cómo centramos el logo en el medio? En cualquier momento que necesites mover o posicionar algo, empieza siempre pensando en márgenes y relleno. Estas propiedades cubrirán la mayoría de los casos. Solo podemos 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 siesta 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, más rápidas y efectivos que puedes usar en muchos elementos interactivos diferentes Simplemente cambie la opacidad al pasar el cursor. ¿Cómo aplicamos el efecto hover a elementos del estado hover, que se puede acceder aquí mismo Cambiemos ahí la opacidad al 80% Este simple efecto funciona en el botón. Agreguemos un efecto de transición. Entonces el cambio de hover es 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 haya lógica detrás de ello. Probemos la capacidad de respuesta del escritorio, no los móviles. Eso lo haremos al final. Eso es. Napper se ve bien. Terminaremos la sección de héroes en el siguiente video. Quédate alrededor. 112. Webflow 2: contenido para héroes: Y volvemos a construir el contenido de la sección de héroes. Para las estrellas, necesitamos un contenedor, y darle una clase de contenedor que ya creamos la última vez dentro de la barra de siesta. Todo 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 a los lados, igual que hicimos con la barra Nap. Podemos agregar el relleno a la caja del héroe. Pero espera un segundo. Esto no se ve bien. La barra de nab ahora se ha movido aún más apretada por dentro. Eso es porque tenemos un relleno en la barra nab, y la barra de navegación está sentada dentro del bloque héroe, así que hay el doble de relleno, haciendo un total de 120 píxeles Eliminemos ese relleno de la barra de navegación porque ya no lo necesitamos. El del héroe se encargará de ello. Puedes recitar fácilmente cualquiera de los estilos haciendo clic aquí. Normalmente uso un atajo que es opción más clic. Creo que debería ser clic para las ventanas. 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. Recuerda, ¿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 de trato. Si diseñamos una etiqueta H one directamente, podremos controlar todas las etiquetas H one en nuestro sitio web sin aplicarles ninguna clase. Para aplicar estilo a una etiqueta, asegúrese de que no se haya seleccionado ninguna clase, por lo que el campo selector debe estar vacío. A veces te olvidarás y nosotros diseñaremos un título directamente, eso creará automáticamente una nueva clase, cualquier cambio se aplicará solo a esa clase. Para arreglar esto, solo quita esa clase y empieza de nuevo. A continuación, 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. Como nunca cambiamos la altura de línea predeterminada de este titular, el campo ahora mismo dice auto. WFO no toma eso como un valor, así que no va a funcionar para nosotros. Pero si haces clic en el campo, el impuesto de marcador de posición te mostrará la altura de línea predeterminada y los píxeles, que es de aproximadamente 67 píxeles Si quieres apegarte al uso 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, esa es una altura de línea de 50 píxeles. 200% de altura de línea sería de 100 pixeles, básicamente, el doble del tamaño del teléfono En nuestro caso, podemos tomar 67 y dividirlo por 55, tamaño de nuestro 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 un 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 de fuente Todo 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 del color azul oscuro. Entonces, en cambio, pongamos ese color azul oscuro aquí, y luego encontraremos otra manera 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í no tengo que buscar el código heax 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 simplemente 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 en Figma, tienes razón. Es exactamente el mismo concepto con un nombre diferente y algunas otras pequeñas diferencias. Pero la idea detrás de esto es la misma. Por ejemplo, cuando editas tu variable, actualizará todas las instancias de tu lado. Ese es el mismo comportamiento que en Figma. También puede desvincular el valor de la variable y luego editar el color de forma independiente GMA muestra todos sus estilos en el panel aquí cuando no se selecciona ningún elemento, pero Webflow tiene un panel dedicado para las variables Donde se pueden administrar todas las variables en un solo lugar. Editarlas elimínalas, agrega otras nuevas. Esto muestra todos los diferentes tipos de variables que puedes agregar. Yo personalmente solo uso el color. Cuando borres la variable en los lugares donde se utilizó, recibirás este mensaje. A partir de aquí, puedes restaurar la variable o desvincularla. Y eso es todo. Es un futuro sencillo pero útil. Muy bien, seguir adelante. La etiqueta H one está lista. Si agregamos una nueva línea de cabeza, ahora, llevaríamos esos 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 gustaría 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 campo, 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 en 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 héroe es diferente en comparación con otro párrafo o en otra parte de la página. M. M. Por último, 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 en toda nuestra página, y ya la tenemos en la barra de siesta. 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 compo al contenedor y luego agregar el margen De esta manera, nuestro contenedor base será inta. 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 limpiador y ofrece más flexibilidad en el fondo de la línea. Agrega un nuevo de block y simplemente arrastra los elementos dentro. Tal vez te resulte más fácil hacerlo desde el navegador. Nombremos a este de block algo así como contenido héroe y agreguemos un margen similar que tenemos en los diseños. Y vamos a darle un ancho máximo para que quede muy bien contenido en nuestros diseños. C, usar el bloque dip 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. 113. Webflow 2: formularios: Y estamos de vuelta en este video, vamos a aprender los fundamentos de los formularios dentro de weblow 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 de 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 sólo 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 marcar la casilla dentro del formulario 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 Bien. 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 como 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 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 bajar para nuestro formulario, para que podamos deshacernos de él. Todo 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 de estilos. La caja flexible 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 los mensajes de éxito del formulario y de error en su interior. Entonces va a alinear estos tres elementos. Esto es lo que va a pasar. 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 impuesto en su interior que es de 16 píxeles con un color gris. Ahora, para hacer que ese texto marcador dentro del relleno sea diferente de 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 ingresa dentro. Puedes comprobarlo dentro del modo de previsualización. 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. En nuestros diseños, estamos usando el color gris, pero lo tenemos ajustado a 70% de opacidad, así que no olvides eso H. Excelente ahora para el botón. Vamos a darle un botón de nombre de clase. El texto dentro del botón de 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. Bien. 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 así? Eso se debe a los ajustes que se le dan al flexbox padre Ya ves aquí, dice estiramiento. Eso significa que los niños flex sentirán la altura de la caja flexible 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 el margen predeterminado que se aplica al campo. Ese margen extra de diez píxeles está estirando la caja flexible. 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 veas 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 ese 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, ¿verdad? Al igual que lo que pasó en este ejemplo. Siempre que algo así me sucediera al principio, siempre pensaría como, Oh, ¿esto es un bicho? ¿Por qué no funciona así? Siempre pensé que era algo con flujo web. 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, tengo que llegar a la respuesta, y la respuesta sería bastante sencilla. 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 pantano o algo no esté funcionando correctamente, pero hay algún tipo de rompecabezas que hay que resolver porque lo recuerdo y a menudo es frustrante si estás tratando con una herramienta y estás tratando de construir algo, simplemente no va a tu manera y no está funcionando y es posible que sientas frustración y sea un pantano o algo no esté funcionando correctamente, pero hay algún tipo de rompecabezas que hay que resolver porque lo recuerdo y a menudo es frustrante si estás tratando con una herramienta y estás tratando de construir algo, simplemente no va a tu manera y no está funcionando y es posible que sientas frustración y tal vez te desanimes y quizás ya no disfrutes del proceso. Entonces quiero que amablemente respires y lo mires de una Mirarlo de una manera que completo accidente. Míralo de una manera que es un rompecabezas y hay una pista y solo necesitas llegar a la respuesta, revisar cada elemento y ver qué estilo se puede interactuar con otra cosa y llegarás a la respuesta y te vas a sentir muy bien al respecto. Bien. 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 marcador de posición y le hicimos la opacidad un poco más ligera Independientemente, vuelve a aplicar este color gris aquí y voy a solucionar el problema Bien. Un simple Su estado hará solo un pequeño cambio de color. Y eso es todo. Bien. 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. Mm hmm. 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 tal 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. 114. Webflow 2: sección de maqueta 1: 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. 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, así que vamos a repetir eso. Para el relleno vertical, usemos 80 porque en nuestros diseños, a menudo usamos 160 píxeles orientados entre secciones, y 80 píxeles en la parte 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 lado del contenedor y apliquemos el contenedor de clase existente. En los diseños, tenemos un color de fondo de lata grisáceo azul 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 hemos labrado previamente la etiqueta H one 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. Por lo que todos nuestros textos genéricos de párrafo están estilizados sin agregarle ninguna clase. Para ello primero selecciona el párrafo, luego ve al campo selector y selecciona todos los párrafos. Todo bien. Ahora, vamos a darle estilo como de costumbre, 18 píxeles de tamaño, 26 píxeles de altura de línea, y tomar 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. Digamos un enlace de texto. Al igual que con el encabezado y el párrafo, también podemos darle estilo a la antigua etiqueta de enlace. Entonces, en lugar del 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 la etiqueta en cualquier otro lugar, heredará el color de esa etiqueta de enlace Pero no podemos cambiar demasiado en la etiqueta de enlace 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 todos los enlaces para que sean como 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, basta con ir a la declaración de texto y presionar de 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í Exporta este SPG que sea 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. Mm. No es exactamente una línea con un impuesto, así que agreguemos un margen negativo en la parte superior. Menos dos sims de píxeles suficientes. El espaciado entre letras en fo no se puede establecer en unidades porcentuales. Necesitamos usar un valor de píxel. Tenemos dos opciones. Uno, lo podemos obtener de un modo muerte en Figma, pero esa es una característica de pago La segunda opción es gratuita. Sólo podemos hacer las cuentas. Todos los porcentajes en los ajustes de fuente, sean altura de línea, espaciado de escalera o demás Todos son relativos al tamaño de la fuente. 2% entre letras significa 2% del tamaño real de la fuente, que en nuestro caso es de 16 píxeles. 2% de eso es 0.32 pixeles. Bien, eso está todo bien, pero hay un tema. Si revisas la vista previa, verás que el texto es un enlace. Esto se puede ver cambiando el cursor 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 dip, pero es un link. Todo lo que pongamos dentro será parte de ese enlace. 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 regular. Como puedes ver en el momento en que ponemos texto dentro del bloque de enlace, se vuelve azul. Eso es porque ese bloque de enlace es parte de esa etiqueta de enlace 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 para que por este proceso porque cuando quieras agregar un nuevo enlace, vas a ir, 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, Oh, ¿cómo lo hago ahora? No se puede hacer clic en este icono. Y tal vez te quedes atascado porque 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 el tipo de escenarios cuando quieres construir algo, vas con la forma natural que asumes que va a funcionar, y luego no y obtienes atascado y vuelves y luego reduces 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 Ahora, siempre que estés haciendo esto tu cuenta y construyendo sitios web por tu cuenta, hay un lugar al que siempre puedes ir y encontrar respuestas, y ese es el foro de Webflow en su comunidad Son una excelente comunidad, la gente responde ahí. Incluso Webflow tiene gente que trabaja para esa comunidad y para el foro, y allí 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 foros de Webflow, porque muchas veces, Otras personas y otros diseñadores web tenían la misma pregunta que tú, así que quizás 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 flujo web dentro de la página de recursos. Así que ve a comprobarlo. Todo bien. Por último, necesitamos colocar los dos elementos uno al lado del otro. Tenemos dos opciones. Una es usar el cuadro flexible, pero la segunda y más fácil opción es cambiar la propiedad de visualización del texto. Ahora mismo, es bloqueo. Bloquear significa que se estirará y ocupará toda la línea del padre. Por eso flecha se ve obligada 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 encima de este enlace para aprender más. Bien. Bien, ahora, si comprobamos el modo privado, la flecha va a ser parte del enlace a 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. Dejaremos caer otro bloque d 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. 117. Componente de slider NUEVA interfaz de usuario: Bien, entonces ahora necesitamos construir la sección testimonial. Hemos decidido usar el control deslizante, a veces llamado Carrusel o simplemente deslizador o deslizador 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 el video posterior Empecemos con la sección habitual, contenedor, así sucesivamente. Después a un encabezamiento. Ahora agreguemos un deslizador que podemos encontrar simplemente buscando dentro un buscador rápido o en el panel de elementos bajo la sección Avanzadas. Se trata de un slider, un componente prefabricado, que tiene mucha libertad para ser personalizado Pero sí tiene sus limitaciones a veces, ya que casi con todo en flujo húmedo, los componentes prefabricados no son la única forma de crear tales diseños o componentes 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. 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 que no nos limitamos a dos. Entonces tenemos flechas izquierda y derecha, que son bloques enlazados con una flecha. Iconos dentro del, 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 dibloque viejo. Nada particularmente especial en ellos. Se pueden diseñar como cualquier otro bloque div y podemos soltar cualquier otro elemento dentro de ellos. Cambiemos el fondo de cada diapositiva para que podamos ver mejor lo que está pasando. Comprobemos que 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 sucede es que hay dos bloques P sentados uno al lado del otro horizontalmente. Y los controles se movieron entre estos bloques dip con alguna animación. Eso es todo. Hay múltiples formas en las que podemos cambiar entre las diapositivas dentro del diseñador mediante uso de controles o desde la configuración del deslizador, que tiene sus propias flechas de este menú desplegable donde podemos seleccionar exactamente la diapositiva que queramos. Así es como cambiamos entre las diapositivas, para que podamos editarlas individualmente. Tenemos dos opciones para agregar diapositivas. Primero, podemos agregar una nueva diapositiva desde la configuración spanel presionando Agregar diapositiva 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 ha agregado un nuevo bloque deslizante dentro del Navegador a. La segunda opción es duplicar el elemento de diapositiva ya sea haciendo clic derecho y duplicado o el control habitual C control borrar 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 bloque normal, podemos agregar otros elementos dentro como etiquetas, 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 También podemos agregar contenido similar o diferente en la diapositiva azul. Ese es el control deslizante. En el siguiente video, vamos a convertir ese feo deslizador en bonito carrusel hecho de tarjetas testimoniales. 118. Webflow 2: deslizador de testimonios: Entonces ese es el componente slider, pero ese slider weblow se ve muy diferente de 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. Al igual que cualquier otra cosa, podemos darle estilo a todo el elemento deslizador. Que de nuevo, es un buen bloque d viejo con un montón de otros elementos en su interior. Selecciona el elemento deslizador, dale una clase y un margen superior de 120 píxeles. Y vamos a deshacernos de este fondo gris. Es parte del elemento deslizador dos. Ve a la configuración de fondo y cámbiala a transparente. Y cambiemos el color de las flechas 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. No necesitamos esos puntos de navegación, así que vamos a deshacernos de ellos. Pero borrar no funciona. Weblos no necesitamos el slider y eliminamos todo con él. Hay otra manera de eliminar algo. Seleccione mostrar ninguno, y se ha ido de este 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 de inmersión 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. En mi caso, la sombra está en todo el grupo, no en la propia tarjeta blanca. Si estás usando un estilo de sombra como yo estoy aquí, puedes desatarlo del estilo para que puedas ver exactamente lo que está pasando por dentro Estos son todos los valores que necesitamos para recrear la sombra dentro de Webflow I Hay un valor extra dentro de Webflow, 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 altura automática, lo que significa que debería expandirse en función de su contenido, pero no lo hace. Ese es otro caso de valor por defecto no está siendo cierto. Entonces escribe a mano auto, una vez más, y él entraría. Ahí. Bien, ahora para el contenido dentro de la tarjeta, tenemos estrellas en 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. Explora los avatares como dos PNG. Vamos a establecer un nuevo bloque D y organizar los detalles del autor en su interior. Primero, la imagen, luego los dos bloques de texto. Darle bloque de texto algo de clase y estilo, la misma manera que en 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 una caja flexible, pero necesitaríamos una caja extra para eso, y se necesitan más clics. Una opción más sencilla es usar flotación. Recuerda flotar, bajo posición, hemos caído para flotar y despejar. Abre eso. Hay tres opciones, sin flotación izquierda y derecha. El consorte muestra lo que hace. Seleccione flotador izquierdo. Esto colocará la imagen a la izquierda del texto. Y eso es todo. Necesitamos ajustar algo espaciado ahora primero junto a 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, dupliquemos esta primera diapositiva y veamos dónde nos encontramos. Como puede 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 las 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. Vamos a darle el mismo ancho que nuestra tarjeta testimonial. Si notas que la caja de diapositivas se ha encogido ahora, es tan ancha como la tarjeta, y ahora vamos a duplicarla. 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. Tenemos 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 la mayor cantidad de tarjetas que haya 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. Amplian los límites de la página. Pero ya sabemos cómo arreglar esto, ¿no? Solo necesitamos aplicar el mismo estilo de calefacción de desbordamiento a la sección, igual que hicimos con la imagen del tablero. Incluso tenemos una clase para esto. No necesitamos cambiar nada. Simplemente aplica 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 No creamos contenido para más de cuatro testimonios, así que vamos a holgarnos un poco esta vez y simplemente dupliquemos el contenido existente. 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 albañil. 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, todo se ve 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. 119. 113 Posicionamiento de la nueva interfaz de usuario: Bienvenida de nuevo. En este video, vamos a cuidar las flechas de nuestro slider para ponerlas 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áticos, relativos, absolutos, fijos y pegajosos. Pasemos por cada uno. He organizado cinco tarjetas aquí, y una por una vamos a aplicarles diferentes ajustes de posición para ver qué sucede con 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 ya estamos familiarizados con él, como un documento 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 casilla. No pasa nada muy sin incidentes, pero una cosa sí sucedió Los ajustes de posición ahora tienen algunos controles más. Obtenemos los 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 una manera bastante similar, con una excepción. Verás esta excepción cuando te muestre lo que sucede cuando agregas margen En lugar de este posicionamiento relativo, ves 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 eso, su 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 de una caja flexible no se han movido en absoluto Actúan como si su tarjeta siguiera ahí. Ahora, en cuanto a la posición absoluta, objeto absolutamente posicionado se elimina del flujo del documento y se asienta sobre una nueva capa. Ordenar como objetos dentro de Figma. En Figma, todos los elementos son 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 escenario importante para el posicionamiento absoluto está aquí. ¿Nos dice en qué se posiciona este objeto con relación? Tenemos el mismo campo para el elemento relativo, pero ese siempre se dice a sí mismo, porque eso es lo que hace relativo. Siempre se posiciona relativo a sí mismo. Y eso puede ser alterado. Pero el elemento absoluto puede, 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, se va a colocar a cero píxeles desde el 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. Si le damos un margen superior de cero píxeles, entonces se va a mover hasta la parte superior de la página. Ese contenedor rosa va a parecer que la caja no está realmente ahí. Pero si comprobamos el Navigator, veremos que la casilla absoluta sigue siendo parte del contenedor. Como dije, elemento obsoleto 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 el carro se posicione con relación al contenedor rosa, entonces tenemos que cambiar la posición del contenedor a algo pero estático generalmente 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. A medida que cambiemos este valor, se moverá relativo al contenedor padre. Ahora bien, si en cambio quisiéramos que se posicionara en relación con algún otro contenedor padre, por ejemplo , el contenedor abuelo, necesitaremos 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. Ahora mismo, no pasó nada cuando cambiamos la posición del contenedor para abuelos Debido a que el contenedor padre rosa todavía tiene una posición no estática, la caja seguirá siendo relativa a esa cosa. Si cambiamos la posición de los contenedores padre a estática, entonces esto sucederá. Ahora como se muestra aquí, es relativo al contenedor para abuelos Tiene algunos ajustes preestablecidos de posición útiles aquí mismo para un elemento absoluto, esta es una forma rápida muy práctica de cambiar las posiciones Esquina superior izquierda, esquina superior derecha, arriba completa, inferior cuatro, y así sucesivamente. Se puede ver que a medida que cambia los valores a continuación actualice 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, elija uno de los presets Se fijará en consecuencia. Como puedes ver, el elemento fijo es exactamente así de fijo. Es como un objeto absoluto tirado fuera del flujo de documentos, sin afectar a otros elementos sentados en toda una capa neal. Y a diferencia del objeto obsoluto, es fijo relativo a 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 barra de navegación que siempre está 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 explicar, ahora mismo, no pasa nada. Simplemente actúa como un elemento estático regular porque se necesitan cumplir dos condiciones para que funcione. Primero, los padres deben ser lo suficientemente altos para que haya espacio para que se desplace dentro. De lo contrario, no tiene sentido. Hagamos que el contenedor sea 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. Ahora ya 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 elemento pegajoso momento 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 a 30 píxeles del borde superior de la pantalla. Para las cosas que se desplazan 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 que muy, muy raramente estas son todas las posiciones estáticas, que es la predeterminada para casi todos los elementos. Y fluye naturalmente con el documento relativo, que es como estático, pero se puede mover de su lugar sin alterar el flujo del documento y mover ningún elemento cercano. Absoluto, que es el posicionamiento salvaje del grupo. Se saca del flujo de documentos y su posición relativa al primer padre que no tiene una posición estática fija, que es igual que la absoluta, pero es relativa a la ventana gráfica fija a la pantalla visible Se utiliza principalmente para barras de navegación y pegajoso, que es como fijo, pero en esteroides se está fijando 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. 120. FLECHAS DESLIZANTES NUEVA interfaz de usuario: 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. 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 como obsoleto por defecto, A diferencia de la posición estática habitual. 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 de la página. Viven en una dimensión diferente como capas en Figma. Esto es exactamente lo que necesitamos. Posición obsoleta, con una colocación inferior derecha, presiona 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. Si ves que no funciona de la manera que esperabas. Verifique al padre y asegúrese de que esté establecido en relativo. Comprobemos el diseño para ver las distancias. Las flechas son 60 pic el debajo del deslizador. 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. Nada de esto realmente funciona. ¿Por qué? La flecha está en posición 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. Muchas veces tenemos que compensar la altura del elemento. Por cierto, asegúrate de escribir px junto a 60 por defecto. Como se puede ver, dice porcentaje. El campo se establece en el valor porcentual. Si solo tecleas 60, pensará que significas 60% Ahora vamos a aplicar la misma clase a la segunda flecha para que no tengamos que volver a hacer todos estos cambios. Vamos a mover la flecha izquierda hacia la izquierda. Podemos hacerlo poniendo algo de 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 le estamos diciendo que se aleje esta cantidad del borde derecho. Excelente, vamos a revisar la vista previa y ver cómo funciona. Sólo hay un problema. miras más de cerca los bloques de flechas, verás que se superponen. Las cajas son un poco demasiado anchas. Y en la vista previa, se puede hacer clic en toda la caja. El usuario es capaz de interactuar con el espacio vacío. Dos, un poco de interacción con el espacio vacío es buena. usuario no tiene que ser tan preciso al apuntar la flecha, pero demasiado la hace extraña más superposición causará 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 estilizado 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 pueden deslizarse y ver cuándo los testimonios han llegado al final. Nos queda apenas una última sección. El pie de página, lo haremos a continuación. Quédate alrededor. 121. NUEVA interfaz de usuario: Bienvenido de nuevo. En este video vamos a construir la sección final de la página de inicio que es el pie de página. No lo vamos a construir desde cero, vamos a usar Web Flows, Amazing copy paste future. 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. Este es un futuro práctico. Te permite reutilizar componentes en tus proyectos y también te permite copiar diferentes elementos o componentes de proyectos de flujo web de otras personas Por ejemplo, Webflow tiene una biblioteca de proyectos de escaparate donde otros diseñadores de webflow pueden mostrar los proyectos que han realizado A menudo, si el autor lo permite, puedes clonar el proyecto y copiar cualquier componente. A partir de ahí. Puedes copiar toda la página o copiar bits y piezas Encontrarás gente compartiendo aquí cosas como interfaz de usuario o kits de wireframe como ese Kit de estructura metálica 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 de página con todo lo que esté dentro del control de calor C o comando C. Y luego ve al proyecto actual y selecciona donde quieres pegarlo. En nuestro caso tenemos que seleccionar cuerpo pasado justo ahí y no dentro alguna otra sección, luego control de calor. Y ahí tienes. Ahora se ha duplicado todo el pie de página. En nuestro proyecto actual, podemos editar todo sobre este pie de página sin afectar al otro proyecto anterior, original. Todos los estilos se han llevado con él y se han creado nuevas clases. Cuando copias clases que tienen el mismo nombre, entonces Webflow 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 flujo web de proyecto actual dio un nombre diferente a nuestra sección duplicada 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 Cabin. La fuente no se llevaba 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 la sección de clases duplicadas 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í, Click Clean Up y Webflow nos mostrará todas las clases que actualmente no estamos usando en nuestra página Y solo quítelos todos. 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 de la sección de fotos porque es un poco diferente de la sección habitual. Ahora agreguemos los enlaces de fotos. El color es blanco con 60% de opacidad. Y también tenemos que cambiar el color del hover a otro azul diferente 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 enlaces de pie de página. Eso es porque en el proyecto anterior no teníamos una clase para los titulares de pie de página que diseñamos en etiqueta H tres En cambio, cuando copiamos el flujo web del pie de página, solo aplicamos la etiqueta H three del proyecto actual Vamos a hacer lo mismo y estilo que H tres. Podemos por supuesto, crear una nueva clase o cambiar la etiqueta a algo como H2h4 o Pero estilizar H tres parece bastante bueno. Hay un espacio extra en la parte superior del titular. Como se puede ver, vamos a deshacernos de ese espacio. Todo bien. Hasta el momento tan bueno. Tenemos que fijar el margen. En la sección testimonial, se ve como la flecha está demasiado cerca del pie de página Eso es porque la flecha es elemento absoluto. Ignora el margen de la celda AT pic que está en la sección y va encima de ella. No olvides crear una nueva clase combo o cambiarás todas las demás secciones a, Ya tiene una clase combo a ella, pero está bien. Podemos tener múltiples clases combo. Por lo general no se recomienda porque puede llegar a ser un poco confuso, Pero en este caso, no es que gran cosa. Vamos a compensar ese acolchado extra. Por último, solo actualicemos el contenido. Ya está todo hecho y nos queda una cosa, el formulario de correo electrónico. Eso lo vamos a hacer en el siguiente video. 122. Webflow 2: forma del 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 dicen suscrito a nuestro boletín no es un enlace, es solo un titular, sino mismo estilo que otros enlaces de pie Tenemos que cambiar esto en un texto regular y eliminar ese efecto de horror. Así es como vamos a hacer eso. Agrega un bloque de texto normal y dale la misma clase de enlace de pie de página. 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 texto suscrito 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í. Naturalmente, el 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, es decir, haciéndolas iguales de ancho independientemente del contenido dentro, 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. Comprobemos cuál es el ancho en el diseño y apliquemos eso. Excelente, eso podría ser suficiente. Ahora vamos a dile la forma. Ahora bien, este formulario está usando clases del formulario de sección héroe anterior, así que necesitamos duplicar cada vez que estamos cambiando algo 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 de estados 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 las posiciones para poder 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 botones foráneos, funcionan un poco diferente. Esto es lo que tenemos que hacer, deshacernos del texto y el mensaje de ponderación que está dentro de la configuración del botón, pero poner algo así como una sola letra No se puede dejar completamente vacío porque Webflow insertará algún texto predeterminado de lo contrario Ahora quita 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 cambia la altura del botón manualmente al igual que el campo que debería hacer el trabajo. A continuación, vamos a configurar el botón a la posición obsoluta. 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. Para un correo electrónico muy largo, el texto va a mezclarse 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. Y eso. 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 página, no es una buena idea Para solucionar esto, podemos darle 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, debemos coincidir con el tamaño de fuente. Y tal vez menos 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 de flujos, que podamos crear algunas animaciones para nuestra página y darle vida. Quédate alrededor. 123. 117 interacciones introducción NUEVA interfaz de usuario: En el lado derecho donde están todos los paneles, hay uno dedicado a las interacciones. ¿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. A esto se le llama un disparador. Y animar otro objeto, aunque sea completamente ajeno A esto se le llama una acción. Cada interacción comienza con el gatillo. Primero, tenemos que seleccionar un elemento con el que queremos interactuar, luego seleccionar el tipo del disparador. Por ejemplo, la interacción puede desencadenarse al hacer clic del mouse o pasar el mouse, y otras opciones También hay disparadores de página, lo que significa que no tenemos que interactuar con ningún elemento en particular. Pero una animación puede ser desencadenada 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. Cuando construimos nuestra interacción, tenemos que especificar ambas. Qué sucede en el hover y lo que sucede en el hover out Por último, tienes acciones, o en otras palabras, animación. En el menú desplegable, verás que hay varios ajustes preestablecidos como desvanecimientos, diapositivas, etc. La primera opción es la animación personalizada, 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. Obtenemos esta línea de tiempo de animación con un control granular sobre cada acción. Esa es una visión general rápida y aproximada de las interacciones. No se alarme si no cogiste todo. Aprenderemos esto lentamente haciendo. En el siguiente video, comenzaremos con algunas interacciones simples, quédate. 125. 119 Interacción con las flechas 1 NUEVA interfaz de usuario: La herramienta de interacción no es la única forma crear interacciones en una página. Por ejemplo, un botón que cambia el color de fondo el ratón es una herramienta de interacción Al hacer algo simple como eso, no necesitamos usar la herramienta de interacción en absoluto. Esto se puede hacer desde el panel de estilos porque CSS solo puede manejar tales cosas. Cualquier cosa que podamos cambiar en el estado de flotación del elemento va a convertirse en interacción hover Esto puede ser el color de fondo, tamaño, las sombras de posición y demás. Transición de un estado a otro. Como mencioné antes, una de las interacciones que vamos a construir es la animación de flecha. Quiero que esta flecha se mueva un poco hacia la derecha. Cuando movemos el mouse sobre este enlace, podemos mover elementos desde el panel de estilo. Y te voy a enseñar cómo hacer eso. No tienes que seguir esto porque verás que vamos a chocar contra una pared con esta opción. Pero todavía quiero mostrar esta opción para que pueda entender cuándo es mejor usar estilos y cuándo es mejor usar herramienta de interacción panel de estilo tiene la propiedad llamada transformaciones. Bajo la sección de efectos, tenemos varias opciones, Mover, escalar, rotar y sesgar Todos hacen lo que dicen. Esta vez solo vamos a tocar el movimiento ya que no necesitamos que el movimiento de resto moverá un elemento en el eje x, y, o z. X e Y son ejes horizontales y verticales, pero el eje z lo es, para ser honesto, realmente no sé cómo explicar el eje. No creo que alguna vez lo haya necesitado. Es básicamente para mover un objeto en un espacio de tres D. Si x e y son ancho y alto, entonces z debería ser algo así como profundidad. La mayoría de las veces usaremos x e y. De todos modos, como puedes ver, es simplemente mover el objeto horizontal o verticalmente desde su posición original Es lo que ya hemos hecho con los objetos relativos y absolutos. Lo que tenía en mente con esta flecha es moverla horizontalmente durante unos ocho píxeles. Pero pasar a un estado regular no va a funcionar, porque aparecerá así permanentemente. Tenemos que moverlo en un hover, lo cual es bastante sencillo. Hacemos exactamente lo mismo en el estado hover, pero dejamos intacto el estado regular Ahí tenemos un poco de interacción. La transición de un estado a otro es muy entrecortada en estos momentos Para que sea suave como una animación real, necesitamos agregar algo en la propiedad de transiciones. He aquí por qué no podemos usar esta interacción básica de hover. Porque las interacciones de desplazamiento del panel de estilos solo animan el objeto en sí, en nuestro caso, la flecha Pero si nos movemos el ratón sobre el impuesto, no pasa nada. El estado de desplazamiento afecta solo al elemento objetivo y nada más. Pero en nuestro caso, queremos que la flecha se mueva cuando el mouse se mueva sobre todo el bloque de enlace. Aquí es donde entra en juego la herramienta de interacciones. Hover state es solo una propiedad CSS, pero la herramienta de interacción agrega un poco de Jovscript a la mezcla, lo que nos da una increíble cantidad Eso es lo que vamos a hacer en el siguiente video. 126. Interacción con las flechas 2 NUEVA interfaz de usuario: En este video, vamos a construir la interacción de flecha. Va así. Cuando el mouse se desplaza sobre todo el bloque de enlace, la flecha se moverá unos ocho píxeles hacia la derecha Cuando el ratón está fuera, la flecha vuelve a su posición original. Primero tenemos que elegir el gatillo. Selecciona el bloque de enlace, todo el asunto, no solo el texto o la flecha. Después vaya a Interacción spanel y haga clic en más, elija mouse hover Llegaremos a la pantalla y el bloque de enlace tendrá este icono en la parte superior para representar que hay algún disparador aplicado a este bloque o a este elemento. El mismo icono también se mostrará dentro del Navegador. Es una buena manera de hacer un seguimiento de los elementos que tienen interacción aplicada a ellos. Tenga en cuenta una cosa, este icono aparece en el gatillo, no lo que en realidad se está animando. Bien, debajo de Howard vamos a seleccionar acción, que es comenzar la animación para crear una animación personalizada. Haz clic en este ícono más y nombremos esta animación como algo así como movimiento de flecha. ¿Correcto? Esta animación va a hacer precisamente eso. Para que vuelva a su posición original, vamos a construir una animación diferente. Este lugar aquí es una línea de tiempo. Aquí podemos crear una secuencia de diferentes cosas que suceden. Eso juntado crea una animación completa. Esta vez. Como se trata de una animación sencilla, aquí solo vamos a tener dos elementos. Ves este mensaje en la parte inferior. Cuando estamos dentro del modo de animación, somos capaces de seleccionar diferentes elementos en el lienzo que queremos animar Vamos a seleccionar la flecha y crear una nueva acción para esa flecha. Bajo esto, tenemos varias opciones diferentes a lo que podemos hacer con este objeto y cómo podemos animarlo En nuestro caso, ya lo hemos hecho. Y tenemos que movernos, conseguir esta nueva línea de tiempo un poco más intimidante Pero no te preocupes, es bastante sencillo. Primero, necesitamos aplicar algún valor en el campo de movimiento bajo el eje x. Podemos moverlo horizontalmente. Los valores positivos lo moverán hacia la derecha, y los valores negativos lo moverán hacia la izquierda. Poner ocho pixeles. En caso de que no hayas seleccionado la flecha propiamente dicha, no hay problema. Por ejemplo, si el bloque de enlaces aparece aquí, puedes cambiarlo. Simplemente haga clic derecho en el elemento y elija Cambiar objetivo. Una vez que recibas este nuevo mensaje rosa en la parte inferior, puedes seleccionar el nuevo elemento. El elemento target para esta animación cambiará. Si aún no te funciona, simplemente elimina este elemento y selecciona la flecha desde el inicio, presiona el icono de reproducción para ver tu animación en acción. Las interacciones dentro del diseñador solo funcionan presionando este botón de reproducción para verlas en acción. O hay que verificar el modo de vista previa o el sitio publicado en vivo. El tiempo y la transición se pueden editar desde aquí. este momento tenemos una animación de 500 milisegundos, que es demasiado lenta. Y la flexibilización lineal, que no es ninguna flexibilización en absoluto. La línea se moverá desde el punto de inicio hasta el punto final con velocidad constante, esto no crea una transición agradable y suave. Vamos a elegir los valores que ya jugamos con facilidad, Y 200 milisegundos, 0.2 es igual que 200 milisegundos Hay 1,000 milisegundos en 1 segundo. Vuelva a reproducir la animación allí. Ahora es más rápido y más suave. Bien, podemos salir del modo de animación y comprobarlo en el modo de vista previa. Excelente, esa flecha se mueve muy bien al flotar, pero se queda ahí, no retrocede. Eso es porque con las interacciones, necesitamos especificar qué sucede al pasar el vuelo estacionario. Bien, ahora ¿cómo volvemos a nuestra interacción? Necesitamos seleccionar el elemento disparador porque ahí es donde se vincula la interacción, no la flecha. Si seleccionas flecha, no verás nada. Seleccionas el bloque de enlaces, ahora verás todas las interacciones que se establecen en él. Esto demuestra que se pueden establecer múltiples interacciones en cada elemento. Haga clic en la interacción para entrar a editar. Ahora bajo hover, muestra la animación seleccionada que creamos Pero debajo de la libración hacia fuera, está vacía. Entonces necesitamos crear una animación para eso también. De la misma manera que la última vez. Seleccione iniciar una animación. La lista ahora mostrará la animación que ya hemos creado. Necesitamos crear otra animación y nombrarla algo así como arrow return al igual que la última vez. Seleccione la flecha y haga clic en el icono más para agregar una nueva acción. La última animación fue flecha móvil, ocho píxeles en el eje X. ¿Cuál crees que debería ser esta vez para volver a su posición original? Cero píxeles. Porque cero píxeles en el eje X es la posición original. Si tocas esta animación, nada va a pasar ahora mismo porque ya está en su posición original. No olvidemos cambiar los ajustes de sincronización. Vamos a usar los mismos 200 milisegundos y facilitar con la transición Ahora puedes ver que tenemos dos animaciones, una para el hover, otra para el hover out Vamos a comprobar el modo de vista previa. Si eso está funcionando como se esperaba, está funcionando perfectamente. Ahora, ¿qué tal el resto de las flechas? ¿Tenemos que ir y hacer esto de nuevo por cada flecha? Por suerte no lo hacemos. Ves estas configuraciones de desencadenador, la que dice elemento y clase, Esa es una opción para activar esta interacción solo en el elemento seleccionado o en todos los elementos que tienen la misma clase aplicada a ellos. Vamos a elegir la clase y veamos qué pasa en el modo de vista previa, lo increíble que se aplicó a todos los enlaces. No tenemos que crearlo para cada uno. Y si en el futuro queremos hacer ediciones, solo tenemos que cambiarlo en un solo lugar Bien, 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 que hagas eso, que vayas al escaparate y verás 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 algo 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 unos pocos clics. Algo que probablemente te llevaría meses de práctica de Javascript para lograrlo. Sin Webflow, hay más videos sobre interacciones en la parte avanzada de este curso Algo para que profundices tus conocimientos y ganes un poco más de práctica 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 blog y cómo agregar blog a nuestro sitio web, Quédate. 127. 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. 128. 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. 129. 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. 130. 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. 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. 133. Blog y CMS: CMS de Webflow: 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 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 particular Webflow aquí tiene plantillas de colección. Es para ayudarnos a comenzar algunas colecciones comunes que podríamos crear. No hace falta decir que la primera es la entrada de blog, 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, lo que usted nombre. Es interno y no visible para el público. Webflow lo llamó publicación de blog, que podemos mantener. El siguiente es 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 por eso más tarde. Hay imagen, hay un color, hay un interruptor para encender o apagar algo. Echemos un vistazo a nuestra publicación de bloque y veamos qué tipo de campos 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 blog 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. Weblotambién ha incluido un campo para eso. Este campo tiene dos opciones adicionales, mínimo y máximo de caracteres. Eso es si necesitamos agregar algún tipo de limitación al contenido de nuestro blog. Diré 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 publicaciones de bloque, 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 Block Post 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, bloquear post, eso es una colección y todas las entradas de blog van a una hoja de cálculo Cada publicación de bloque 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 blog a nuestro CMS Tick around 134. 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, 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 texto enriquecido lleno 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. 135. Blog y CMS: página de colección: Así que hemos creado una base de datos para nuestro blog, y eso es genial, pero ¿en qué parte de nuestro sitio web es tan 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 BlogPost. 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, derecho. 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. Ya que se trata de un titular, podemos seleccionar el titular y voilá. 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 título con una imagen o un bloque div con un título 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 publicaciones 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 entradas de blog y ver cómo se ven. Recuerda este, es el que creé manualmente. 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. Solo los campos 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. En el siguiente video, vamos a empezar a construir y diseñar esta página de entrada de blog. 136. Navbar y titular NUEVA interfaz de usuario: En este video, vamos a comenzar a construir nuestra página de publicación de bloques. 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 que he agregado anteriormente todo este contenido aquí. Pero voy a deshacerme completamente de él y empezar de cero 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í. Vuelve a la página principal. Seleccione todo el elemento de la barra de navegación. Asegúrate de seleccionar todo y no solo el contenedor. Glad control C. Luego vuelve a la página del bloque y pegarlo ahí. Cuando pegas un objeto, primero haz 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 Simplemente diseñemos los elementos dentro de nuestra barra de navegación, igual que en nuestros diseños, empezando por enlaces este momento son blancos, así que necesitamos tenerlos oscuros para hacerlo. Necesitamos aplicar primero 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 Siesta. Necesitamos una clase extra de Compa. Sé que suelo recomendar no tener más de uno, pero está bien de vez en cuando. Desde el punto de vista tecnológico, no tiene nada de malo. Es solo para nosotros para que las cosas no se vuelvan confusas y abarrotadas El fondo de los botones es nuestro azul primario con 15% de opacidad Por último, el logo que necesitamos exportar de Figma, está pegado a los bordes en nuestra página de inicio Nab bar está sentado dentro la sección de héroe, que tiene acolchado. 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 la barra Nab y agregar relleno directamente sobre ella Eso es todo. La barra de navegación está lista. Pasando al resto de la página de bloque, tenemos una imagen de titular, 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 alguna legibilidad disminuida por alguna otra razón, realmente nos va a doler. Hacer una sección blanca es simple, solo una nueva clase combo, y eso es todo. Asegúrate de usar algún otro nombre. Preferiblemente algo específico de la clase base, como sección blanca que dice mucho más que solo blanco. Y nos aseguramos de que no entre en conflicto con ninguna otra clase. 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 el ancho máximo de 700 píxeles. 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. Vamos a darle una clase compo, 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 vamos a hacer eso en el siguiente video. 137. Blog y CMS: bloque 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 una caja flexible para esto. Agreguemos un nuevo bloque D vacío y le demos un autor de clase y fecha. Entonces agreguemos una imagen. A continuación, necesitamos el nombre del autor. Agrega un bloque de texto normal. Dale una nueva clase. Dale estilo igual que Figma. Tenemos que cambiar la propiedad justificada a algo así como centro. A continuación, tenemos este divisor. Podríamos usar un corchete de línea para esto o simplemente un bloque 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 de maneras. Solo necesitamos un color diferente para ello. Y luego la fecha, vamos a reutilizar el mismo bloque de texto de autor e incluso mantener la misma clase. La fecha es la fecha de publicación de esta publicación en bloque 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 puedes ver desaparece. Eso es porque aún no hemos publicado nuestro sitio web ni ninguna de las publicaciones de bloque por lo que ese campo de fecha está vacío. Vamos a usar un campo de fecha diferente, puede ser creado o actualizado el, y luego podemos cambiarlo de nuevo para publicar. 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. Todo bien. La distancia entre divisor y el bloque de texto es de 30 píxeles. Podemos ajustar eso en el propio divisor. En realidad, en el lado derecho, solo necesitamos 15 píxeles porque ya hay un margen de 15 píxeles a la izquierda de la fecha. Y por último, agreguemos un margen encima de todo para separarlo del titular. Todo 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 nuestro post de blog, todos ellos tendrán el mismo autor. Pero eso no está bien, ¿verdad? ¿Para un blogger independiente? Claro, 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. 138. 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 publicación de bloque, 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 nuevas entradas de blog, tendremos que ingresar aor información, 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 autores. Al igual que hicimos con la entrada del blog, podemos crear una base de datos CMS para aors donde guardaríamos todos los aors con sus fotos de perfil, 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 pre llenará 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 el autor slash John Smith, y ese tipo de 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. A continuación, 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 como cambia el campo en el modo de previsualización con múltiples líneas, y esto depende de la compañía, pero podríamos poner el recuento máximo 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 hacer eso más tarde. Por último, vamos a tener weblo agregar algunos artículos ficticios a esta colección Puede que necesite un poco de refresco a veces para aparecer. 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 en bloque, 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 menú desplegable, seleccione una colección apropiada, que son los autores. Hazlo requerido y ahorra. 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 Por lo tanto, 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 filds se muestran solo para elementos compatibles Avatar no está aquí, pero avatar definitivamente está disponible para el elemento image. Selecciona el nombre del autor aquí y 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. 139. Blog y CMS: estilos dinámicos: 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 en este momento, cambia la forma en función de 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 que se inserte en su interior Primero, hagámoslo ovalado. Esto lo hacemos redondeando esquinas del borde, entonces necesitamos que sea del mismo ancho y alto Podemos aplicar este valor dentro ajustes de imagen o en el panel de estilos. Bien, la forma es buena, pero si notas 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. ¿ Cómo solucionamos esto? Css y wefflow tienen una propiedad útil para este llamado ajuste de objetos en flujos de trama acortados a sim Todo lo que tenemos que hacer aquí es aplicar cobertura bajo esta propiedad fit. Los ajustes son bastante similares a lo que ves dentro de los estilos de fondo. Portada aquí funciona exactamente como funciona dentro de imágenes de fondo. La imagen cubre todo el espacio de este elemento y la cantidad sobrante es simplemente corrupta. Esto incluso tiene los mismos ajustes de posición, igual que los estilos de fondo, en caso de que necesites 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. Eso está todo hecho con un encabezado de nuestro poste de bloque, quédate por el resto. 140. Blog y CMS: imagen principal: En este video, vamos a agregar la imagen principal y luego nuevamente vincularla con el 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 Dale una nueva clase compo Y mueve la imagen ahí dentro. Ahí, ahora eso es lo correcto. En nuestros diseños, hay cierta altura a la imagen, lo 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 autor Avatar. 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 450 pixeles. 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 la 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. 141. 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, y 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. Todo 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 reach text es solo un elemento padre, un párrafo, que es un elemento hijo puede sobrescribir cualquiera de los estilos del ach text Esto significa que necesitamos darle estilo al párrafo directamente. Pero ahora mismo no tenemos acceso a él. Una vez que está conectado al CMS, no podemos seleccionar elementos individuales dentro. 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 el 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 enriquecido. Para que podamos darle estilo a todos los párrafos dentro del bloque de texto enriquecido, necesitamos hacer esto como solemos hacer cuando necesitamos darle 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 seleccione uno de los párrafos. Elimine cualquier clase si la hay. Y dentro del selector, seleccione la etiqueta de todos los párrafos. Debajo del selector, recibirás este pequeño mensaje con el ícono más, selector 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 bloque de texto enriquecido en sí. Sin la clase en el bloque de texto enriquecido padre, recibirás este mensaje en su lugar. Así que asegúrate de darle primero alguna clase al texto enriquecido. Una 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 texto enriquecido, sean encabezados, elementos de lista, etc. Puedes hacer una nota sobre 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 el 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. Un párrafo servirá. Tercero, desde el selector, seleccione la etiqueta rosa de todos los párrafos. Sin seleccionar esto, solo estarás atando 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 que dice cuando anida dentro de en el nombre de tu clase Sin anidar, en lugar de todos los párrafos dentro del impuesto de alcance, 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 impuesto heredará el estilo de párrafo a menos que tenga algún estilo más específico aplicado a ellos. Sé que los textos de alcance son un poco confusos, pero lo entenderás después de algunas veces. Si quitas la clase del impuesto ach, puedes ver que todos los nuevos estilos desaparecieron. 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 otro texto viene de la clase principal en el texto de alcance, por lo que podemos editarlo ahí. Se puede ver ahora que todos estos cambios se están aplicando a nuestro texto enriquecido dinámico también porque tiene la misma clase en él. Si no tuvieras la misma clase, entonces no te afectarías Entonces, en caso de que tu texto enriquecido conectado no se actualice con los nuevos estilos. Check tal vez no tiene una clase o tiene 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 agradable dentro los bloques cuando quieres citar a alguien, así que podemos darle estilo diferente como hacerlo cursiva, eso es más adecuado para cotizaciones. Línea más grande ocultar, 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 subtitulado dentro de dos. También podemos darle estilo a viñetas. En estos momentos son realmente pequeños. Voy a mantener su mismo tamaño que el texto del párrafo. I Llegamos a estilizar H tres encabezamientos porque en estos momentos son blancos Supongo que los tenemos estilo 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 H dos encabezados. ¿Vio lo que he hecho aquí? Cometí un error y olvidé etiqueta de la NSA dentro de la clase de impuestos ricos 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. Na etiqueta haciendo clic en este icono más y luego estilo 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 bloques de texto, el texto de Rach puede llevar muchos tipos de contenido dentro, como , obviamente, todos los diferentes titulares que tenemos, podemos ponerlos dentro, podemos poner imágenes, tenemos videos Podemos 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, ya sabes, 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 enriquecido. 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 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 en particular, digamos texto rico súper agradable. Los párrafos en esas clases siempre serán así, ¿verdad? Eso es lo que estás haciendo en la realidad. Y en el segundo paso, se selecciona la etiqueta apropiada. Entonces cuando, 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 eso 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 las mismas instrucciones. Entonces, estas instrucciones sobre cómo aplicar estilo al texto enriquecido no tienen nada que ver con un CMS. Es solo la forma en que funciona el texto enriquecido. 142. Blog y CMS: parte inferior del bloque de autor: Y continuando donde lo dejamos, ahora necesitamos agregar el bloque autor inferior. Eso es bastante simple. Empecemos por nuevo diblock, que vamos a convertir en flexbox Y agrega 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. Yo 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. A a 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. 143. 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 la 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, bien, queremos editar el pie de página, tendríamos que ir a editar uno de los pies de página, derecha, 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 en todo el sitio, 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 necesita arreglar y cambiar 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 tipo de 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. Entonces 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í. Puede arrastrar este componente en la página o el navegador, asegúrese de soltarlo 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. Déjame arrastrar otra instancia aquí para que podamos ver los cambios en tiempo real. Para editar el componente maestro, selecciónelo 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 hace clic en Editar componente, 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 otras instancias. No importa en qué página estés editando el componente. Si hizo clic en el componente dit, entonces siempre está afectando al maestro Para salir del modo de edición, haga clic de nuevo en la parte superior o haga clic en cualquier otro lugar del Lienzo o presione 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. Ingresa al modo de edición del componente, luego selecciona el elemento que quieres editar como este encabezado. Y en el ajuste span on al lado del texto, haga clic en este pequeño icono y cree propiedad. Ahora, eso nos permite sobrescribir el texto predeterminado de este encabezado 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 en la propiedad. 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. Tasa de clics. 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í. Para deshacerte de estas propiedades, mientras estás en el modo de edición, ve a la pestaña Props Ahí es donde tendrás todas las propiedades listadas en un solo lugar. Simplemente puedes eliminarlos de aquí uno por uno. 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 haciendo clic derecho en la instancia y luego desvinculando la instancia Esto ahora es completamente independiente del componente. 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 hacer ciertos cambios en instancias como actualizar el texto u ocultar ciertos elementos para nuestra página, ya casi está hecho. Solo necesitamos optimizar las versiones responsive, pero esta vez es bastante simple. La mayor parte está lista. Quédate alrededor. 144. Blog y CMS: publicación receptiva: Estamos de vuelta para un poco de diseño receptivo. Hay muy poco que hay que hacer para que podamos encargarnos de ello en un solo video. La barra Nab necesita algo de edición para el modo horizontal. Primero, arreglemos los márgenes o sección predeterminada tiene relleno lateral de 30 píxeles, pero la barra Nab en este caso tiene una de 60 píxeles Eso es porque esto es un poco diferente, no hay barra de nuestra página de inicio. Simplemente 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 al que está en la página de inicio que se ve bien. Vamos a comprobar el modo de vista previa. 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. Ya que tienen que mantenerse para ser oscuros. Entonces en este caso solo podemos cambiar el fondo del menú desplegable. Entonces, cambiarlo a una gracia muy ligera va a estar bien. Bien, ahora bar 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 otra vez. Esto va a ser estrecho. La imagen que es tan alta va a ocupar demasiada pantalla visible. Esta imagen va a funcionar mejor cuando es modo horizontal también. Sobre todo porque eso es lo subirán los creadores de contenido. Algo así como 250 píxeles de altura debería llevarlo a las dimensiones adecuadas. De manera similar para el modo retrato, tendremos que encogerlo un poco más, 150 píxeles se ven bien. También reduciría el espaciado alrededor 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 la sección está empujando todo en un solo lugar, pero hay una forma de evitarlo. Si le damos a la imagen principal cantidad de margen negativo, cancelará el relleno de la sección. La sección de tableta tiene un relleno de 60 píxeles. Podemos darle a la imagen un margen negativo de 60 píxeles. Y eso va a cancelar el acolchado e ir de borde a borde, haciendo que se vea 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 bajará en cascada a los móviles a, pero tenemos que ajustarnos a la sección móvil pendiente es de 30 píxeles Por lo que necesitamos ajustarlo a negativos 30 píxeles también. Y eso será exactamente borde a borde. Modo retrato. Autor y segmento de fecha necesitan algún ajuste. El espacio intermedio es demasiado, por eso se está apretando así. Vamos a encogerlo. Estamos controlando el espaciado en el divisor, ahí es donde tenemos que agregarlo. 15 píxeles menos va a ser bueno a la izquierda 15, pero a la derecha cero porque hay margen a partir de la fecha. Además, podríamos ir con un formato de fecha más corto desde aquí. Ahora vamos a revisar el resto de la página. El texto enriquecido no necesita ningún ajuste. Ya es responsable y se ve bien en todas las pantallas del retrato. Incluso podemos recortar un poco de espacio la derecha y acercar el contenido a él. Eso son todas las necesidades de pie de página. Nada. Es el mismo pie de página de la 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 de inicio del bloque. Quédate alrededor. 145. Blog y CMS: página de inicio del blog: Ahora una última página que nuestro blog necesita es esta página de inicio de bloque esa cuadrícula que hemos diseñado. La página de inicio del blog 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 completamente dinámica, lo que vamos a hacer es crear una página estática regular y luego insertar elementos CMS dentro. Para comenzar, crea una nueva página. Lo nombraremos blog y nos aseguraremos de que la URL slug sea blog. Empezando por ahora bar. Es exactamente lo mismo que el de nuestra página de publicación de bloque, así que podemos copiar esa. Pero en lugar de copiar, es mejor crear un componente a partir de él. Haga clic derecho en la barra ahora y seleccione Crear componente. Nombralo ahora bar. Y nosotros, bien. Ahora podemos rastrear eso justo en nuestra página de bloqueo. A continuación necesitamos la sección habitual y contenedor. Tenemos un pequeño problema con el color de fondo de las barras navbars aquí Porque necesitamos que sea gris. Podríamos hacerlo dentro de una sección, pero entonces tendríamos que cambiar los paños 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 dibloque y darle a ese dibloque 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. Nada necesita ser ajustado en este caso. Ahora para la parte divertida, primero vamos a diseñar un auto estático. Entonces lo resolveremos cómo convertirlo en un elemento dinámico que extrae contenido de CMS. Agreguemos un nuevo bloque de acuerdo 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 un nuevo bloque llamado block card. Hagamos este fondo blanco, demos las esquinas redondeadas y el ancho. 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 que va a hacer. Podemos agregar alguna imagen aleatoria por ahora para que podamos ver lo que está pasando. Vamos a cambiar la configuración de ajuste para cubrir que la imagen no se vea distorsionada. Sólo hay una cosa, 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 el desbordamiento es visible en cualquier bloque de trato. Pero si cambiamos desbordamiento a oculto en la tarjeta de bloque, entonces eso recortará cualquier cosa que vaya fuera de los límites. Manos redondeando las esquinas de la miniatura. A continuación, necesitamos contenido que vamos a envolver en un bloque deb Dale un relleno de 20 píxeles. Marquemos el encabezado y el párrafo. Para el encabezado, podemos crear una de las etiquetas, tal vez dos o H tres. Recuerda cómo aplicar estilo a las etiquetas de encabezado. Cambia la etiqueta desde la configuración y luego ve 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 bola y así sucesivamente. Y una última cosa, quitarle el margen superior, se puede desvincular el estilo de texto para que se revelen los ajustes Ahora para el autor y el bloque de fecha, necesitaremos un nuevo bloque para esto. Ya tenemos exactamente el mismo bloque en la página de correos. Voy a tratar de re, usar 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 este estilo 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 diferentes espacios en el sitio. Así que vamos a ajustar eso también. Y finalmente el margen superior. Una cosa que me gustaría agregar a esta tarjeta es un efecto hover. Una cosa que podemos hacer es agregarle una sombra de fondo. En el hover, esa será una buena interacción. Ya sabemos cómo crear la sombra justo en las cartas. Lo hemos hecho en las tarjetas testimoniales. Y podemos hacer exactamente lo mismo aquí y podemos simplemente reutilizar los mismos valores para la sombra. Agreguemos un efecto de transición 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 que la carta se levante en el aire. Muy sencillo de hacer en el estado hover, agregar un efecto de transformación en el eje vertical, Mover 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 que 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, El auto está listo, pero aún no lo 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 en la página. Hecho. Súper eso. Ahora vamos a enlazar a esta página de bloque. gente pueda acceder a esta página de bloqueo a través de la barra de navegación o a través del pie de página Después selecciona el enlace y ve a configurar Spanel conectado a la página de bloque, que ahora aparece en un menú desplegable Y lo mismo en el pie de página. No olvidemos la barra de siesta de la página de inicio porque la barra de navegación no está conectada al componente que es ahora la página de bloqueo se puede acceder desde cualquier lugar del sitio. Bien, a continuación, conectaremos la grilla al CMS Stick around. 146. Listas de colección: 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 el poste de bloqueo. 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 otra parte, Por ejemplo, en páginas estáticas como la página de inicio o en la página de bloque, donde tenemos todas esas tarjetas de bloque entrar en una lista de colección. 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. Todavía no hay nada que ver aquí. Primero necesitamos conectarlo a una colección en particular en nuestras publicaciones de bloque de casos. Ahora lo conseguimos. Las cajas siguen vacías, pero esta vez se pueden ver títulos familiares. Cada casilla corresponde al poste de bloque en nuestra base de datos. Lista de colecciones, por defecto muestra 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. Si 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 tarjeta de bloque en una de las cajas. No importa cuál. No hay forma de seleccionar toda la tarjeta de bloque directamente desde el lienzo. Así que asegúrate de seleccionarlo 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 Navegador por completo y arrastrarlo dentro del elemento de la colección. Todo bien. Seguro que tienes dudas sobre lo que acaba de pasar, por qué se han multiplicado las tarjetas de bloque. La cosa es que la lista de colecciones funciona como una página de colección. Uno significa que todos actúan como un solo organismo, como alguna mente colmena Una vez que vinculamos los elementos con los campos CMS, entonces se extraerá el contenido apropiado. Conectemos elementos a sus campos apropiados. Vea el momento en que lo conecta al campo CMS, luego 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 elementos estáticos normales y cada elemento será exactamente lo mismo. Hasta el momento, tan bien. Y cambiemos la fecha a un formato más corto. Tenemos que hacer algunos cambios en el espaciado. Primero, eliminemos ese ancho fijo de la tarjeta de bloque. Se va a interponer en el camino y estropear las cosas. No queremos un auto fijo, queremos que sea fluido para estirarse y encogerse según el ancho de la página. Ya hay cierto espaciado aplicado en el artículo de la colección. Por defecto, podemos agregarlo ahí. En lugar de agregar nuevas propiedades de espaciado a la tarjeta de bloques, tiene diez píxeles de relleno en los sitios. En nuestros diseños, la brecha entre cada tarjeta es de 30 píxeles, por lo que es de 15 píxeles en los sitios. Y también el margen inferior o relleno realmente no importa. Cualquiera de los dos funciona. Ahora vamos a encargarnos de esa extraña distribución de las tarjetas. Esto sucede cuando las alturas de cada ítem son diferentes, por lo que están dispuestas desordenadamente. Rompiendo nuestra rejilla ordenada, podemos arreglarlo fácilmente con una caja flexible. Necesitamos aplicar flex box al primer padre que contenga esos artículos de colección. Esta es la lista de colecciones, asegúrate de no seleccionar envoltorio de lista de colección que sea un abuelo con todas esas cosas dentro Primero obtendrás todos los artículos exprimidos en una sola fila. Todo lo que tenemos que hacer aquí es habilitar envoltorio y obtenemos exactamente el diseño que buscamos. Solo hay una cosa, en realidad no se puede hacer clic en estas tarjetas realidad no se puede hacer clic en ¿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. Ahora mismo, ninguno de los elementos son enlaces. Ninguna de las configuraciones tiene una opción para vincular URL al enlace CMS. Tenemos que convertir uno de estos en un elemento de enlace. Esto puede ser un titular, por ejemplo, Eso 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, tendríamos que poner toda la tarjeta dentro de un bloque de enlace. Todas estas son opciones muy válidas, diferentes sitios web tratan esto de manera diferente. En este diseño actual que tenemos, me gustaría tener toda la tarjeta clicable 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 dentro de un bloque de enlaces. Porque no puedes anidar enlaces dentro de otros enlaces. Pero en este caso podemos. Vamos con él. Simplemente agregue un elemento de bloque de enlace dentro del elemento de colección. Cuando obtengas la configuración, tendrás esta página morada encendida. Esto permite enlazar a una página de colección. Elija eso y seleccione la publicación de bloque actual. Ahora ese enlace irá a esa página de publicación de bloque. Por último, movamos toda la tarjeta dentro de este bloque de enlaces. En realidad no necesitamos ese bloque extra. Podemos aplicar la clase de tarjeta de bloque al propio bloque de enlace y mover la miniatura y el contenido dentro él y deshacernos del bloque A 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 eso subrayado desde ajustes de decoración de texto, seleccionar ninguno. Bien, echemos un vistazo en vista previa y probemos el enlace. Hay una cosa que me fastidia un poco diferentes alturas de las cartas, para ser honesto, está bien así. Pero alturas iguales harían que se viera mejor. Eso es lo que tenemos en los diseños, ¿no? Todas las tarjetas 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 chile flex, ya se está estirando, pero la carta de bloque no lo es. Si le damos una carta de bloque al 100% de altura, eso va a llenar el espacio vacío. Recuerda, solo necesitas darle estilo a una de las tarjetas de bloque 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 de nuestros diseños. Los tenemos pegados al fondo, lo que crea un diseño mucho más agradable Ahora, ¿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 primero. Definitivamente necesitamos hacer ese tramo esta vez, 100% de altura no va a funcionar porque eso significa que el 100% de la tarjeta de bloque de altura de los padres es el padre que es más alto porque hay la imagen dentro de dos. 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. ¿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, una caja flexible 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 una caja flexible con alineación vertical y justificar ajustes al espacio entre 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 el resumen de publicaciones también se espacie 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 Be y poner los elementos dentro del envoltorio como una caja de regalo. Eso es todo. Comprobemos la vista previa. Todo funcionando genial? Hay otra cosa que tenemos que hacer. Tenemos que añadir 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 2030 tarjetas de bloqueo, entonces va a ralentizar la página. Por eso necesitamos la paginación. Eso lo haremos en la siguiente lección. Quédate alrededor. 147. Blog y CMS: paginación: En este video vamos a agregar la paginación sin dividir las tarjetas de bloque en diferentes páginas Cada tarjeta de bloque se cargaría. Cuando tenemos muchos postes de bloqueo que harían que la página se cargara muy lentamente y no serían óptimas 20 tarjetas, está bien. 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 Aquí decidimos cuántos artículos deben mostrarse por página. Queremos un número que sea adecuado para nuestra cuadrícula de tres columnas. Algo que es divisible por tres como 912, 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 3.2 columnas. ¿Por qué? Porque en pantallas más pequeñas, más probable es que tengamos que cambiar esto en un diseño de dos columnas todavía. Nuevamente, 12 es la mejor opción además de la paginación Hay algunos otros ajustes para las listas de recolección. Rápidamente vamos a echarles un vistazo. Los filtros son geniales y muy prácticos. Por ejemplo, podríamos filtrar publicaciones por autor o publicaciones creadas 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 seríamos capaces de filtrar elementos en base a eso. Por ejemplo, una forma de hacerlo es filtro de categoría. Cada vez que creamos una publicación de bloque, elegiríamos una categoría del bloque, ¿verdad? Entonces diríamos, a lo mejor se trata de cocinar, lo mejor esto es cocina española, italiana, cocina francesa, lo que sea. Entonces tendríamos páginas dedicadas para cada categoría, ¿verdad? Todas las publicaciones de bloque sobre cocina francesa, todas las publicaciones de bloque sobre comida china. En cada una de esta página. Entonces crearíamos este filtro. Mostrar sólo 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. Se aplican opciones similares para ordenar. Podemos ordenar el orden de las publicaciones por muchos criterios y reglas diferentes. 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 allí. Un último ajuste, 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 postes de bloque y luego limitaríamos los ítems a dos o tres Solo muestra algunas sugerencias de publicaciones. Así de simple y potente puede ser esta configuración de lista de colecciones. Las posibilidades son inmensas. Una vez que habilitas la paginación, obtienes estos botones siguiente y anterior para moverte entre las páginas Estilizar es bastante sencillo. Simplemente selecciona el botón, dale un color de fondo, cambia el color del impuesto, agrega un poco más de espaciado, agrega algo de puerto de hecho. Siempre agregue efectos de desplazamiento a botones y enlaces. Es importante que los usuarios entiendan qué es un objeto interactivo y qué no. El efecto Hover 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 la tecnología tiene hacerte sentir que puedes dominarlos. Esto es tan jodidamente cierto. Es por eso que la tecnología y los productos simples y minimalistas siempre son mejores que los productos complicados que tienen un montón de botones y diales en ellos. 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. Asegúrate de que hay un botón, asegúrate de que el botón tenga un efecto de desplazamiento o algún tipo de interacción con él Entonces podemos entender que esta cosa es clicable, ¿verdad? O si hay un enlace, ¿ el enlace cambia el color? ¿Hay algún indicador de que se trata de un enlace? Y puedes hacer click en esto 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 perezoso, porque muchos diseñadores web son bastante flojos. Porque si no tuviéramos tantos sitios web malos, eso nos vuelve locos a veces. De todas formas, volvemos a la paginación, nuevo al estilo de nuestro botón, podemos aplicar la misma clase al botón anterior El nombre de la clase no tiene sentido, pero no se me ocurre nada que sea mejor. A lo mejor debería usar el botón de paginación, eso es un poco mejor Cuando 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. Ese es nuestro bloque es, ¿solo necesitamos hacerlo receptivo? Y eso lo haremos en el siguiente video. Quédate alrededor. 148. Blog y CMS: página de blog receptivo: Ahora hagamos que nuestra página de bloqueo sea receptiva. Al escritorio le va bien. La cuerda del auto a un tamaño razonable así que aún podemos mantener tres columnas en las tabletas. Es una historia diferente. Es demasiado para tres, 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 simple. 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 como eso. También 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 encoges al tamaño más pequeño, entonces dos columnas son demasiado. Una opción es crear un diseño de columna única. Así que tendríamos que establecer el ancho 100% Una sola columna no está mal en este caso, pero ¿sabes cuál sería el diseño perfecto si pudiéramos tener un diseño de dos 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. Después se ajustarán a la segunda línea, creando un diseño de columna. Pero esta 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 la configuración de Flex child. Debajo de las opciones Más, elimine los ajustes de ancho mínimo antes de comenzar a editar esta parte. Hay tres campos con crecimiento, contracción y valor base. La combinación de estos tres valores da resultados diferentes. Es bastante poderosa. No voy a profundizar en la lógica de cómo van a funcionar. No me entiendo completamente, 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. 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. 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 que no crezcas, no te encojas, solo manténgalo en 300 pixeles. Pero si establecemos crecer a uno, entonces permitiremos que crezca más allá 300 píxeles para ocupar cualquier espacio disponible. 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 esto completamente la cabeza, 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 un modo de columna única. Aunque con un problema, ya que 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 Volvemos al flex child de nuevo a su valor predeterminado, que es el shrink si es necesario, y luego podremos cambiar el ancho del 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, donde todo nuestro contenido está alineado Esto es ser un poco quisquilloso. Pero me gustan las cosas lo más exactamente posible. Deberías hacer tu mejor esfuerzo para desarrollar este hábito. Obsesionarse con los detalles es una buena calidad para un diseñador web Entonces, ¿cómo solucionamos esta pequeña desalineación? Podemos tener una clase combo especial para aquellos autos que están en bordes ahí. Uno recuerda la mente colmena. Pero es bastante sencillo. Podemos agregar un margen negativo al padre que contiene todos esos elementos -15 píxeles en ambos lados. Y hecho, ahora se alinean los autos exactamente en los bordes. Eso es, de veras. Eso es. Nuestro sitio web está completamente hecho. Es receptivo, se ve hermoso, 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. Primero, lo vamos a publicar en el subdominio Webflow, pero luego lo vamos a publicar en un dominio personalizado, porque esa es una parte importante También hay que aprender eso. Entonces puedes tomar el sitio web que estás construyendo para el cliente y luego ponerlo realmente en su dominio, pero más sobre eso luego quedarse. 150. Transmisión en vivo: envíos de formularios: Ahora vamos a hacer una prueba a nuestros formularios. Hemos hecho una forma bastante simple, esta vez, solo una dirección de correo electrónico. Podemos volvernos bastante locos con los formularios en Webflow, pero ya sea un solo campo o formulario de diez campos de 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 y webflow y agregar la URL En la configuración del formulario, puedes agregar una URL completa sin dominio y HTTPS y todas esas cosas, o simplemente puedes usar la barra diagonal y el slug final Slug es básicamente este final que obtenemos dentro de la URL. Como por ejemplo en los blogs, en el blog teníamos blog, eso es una babosa Puedes crear una página y luego crear ese slog que es gracias, algo así Y luego agrega eso dentro de URL, dentro de la URL de redireccionamiento. Y el navegador entiende que eso significa en nuestro propio sitio web y no en algún otro sitio web. Bien, ahora veamos qué pasó con nuestro envío de formularios. Vaya a Configuración del proyecto y haga clic en la pestaña Formulario. Si te desplazas hasta la parte inferior, ahí es donde verás el envío. Hay mucho que podemos hacer con estas presentaciones. Podemos eliminar, podemos exportarlo a CSV. 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 presentaciones, generalmente la dirección de correo electrónico de su cliente. Y van a recibir un correo electrónico como este. Eso me encanta. Webflow también se encarga de esto, y no tengo que conectarme ni instalar alguna aplicación de terceros para administrar las notificaciones y todas esas cosas. También podemos personalizar estas notificaciones de correo electrónico cuando nuestro sitio tiene un plan de alojamiento. 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 mail chimp Las nuevas presentaciones se pueden enviar a las plataformas de marketing por correo electrónico donde sus clientes pueden hacer lo suyo con boletines masivos de correo electrónico y material promocional y todas esas cosas. Y eso es todo lo que hay para formar envíos. 151. Ir en directo: dominio personalizado: Muy bien, Entonces en este video, te voy a mostrar cómo conectar tu sitio web a un dominio personalizado. Para eso, vamos a necesitar agregar un plan de hosting a nuestro proyecto de armas. Entonces eso requiere pagos. que no tengas que pasar por este tutorial para tipo de publicar tu sitio web en un dominio personalizado . Ya lo has publicado en nuestro dominio de ropa de trabajo, y ya basta. Pero con clientes reales y proyectos realmente, obviamente tienes que hacer eso cuando tendrías que publicar tu proyecto y tu página web en un dominio real, y voy a demostrar cómo hacerlo aquí. Estoy pagando por el plan de hosting y por la compra del dominio, correcto, Pero no tienes que hacerlo. Y una vez que ya haces los proyectos de rial y quieres publicarlos, entonces sabes por dónde venir y dónde ver el tutorial sobre cómo se hace. Es bastante sencillo y directo, y te voy a mostrar cómo no está justo aquí. Entonces lo primero que tenemos que hacer es ir a la configuración del proyecto dentro de la configuración, dispuestos a pasar por el grifo de hosting, y aquí vamos a y plan de hosting. Aquí están los dominios personalizados, como puedes ver, pero no están habilitados hasta que nosotros en el hosting. Y tenemos que añadir el hosting CMS porque se puede ver ya El plan básico está deshabilitado porque el proyecto que este equipo en proyecto de página web tiene un CMS justo el bloque sobre él. Entonces por eso tenemos que elegir el hosting CMS que, uh, uh, él es de $16 al mes y te vas a ir pagado anualmente y es, ah, $20 al mes Has pagado por mes, que lo que voy a hacer en este caso, voy a elegir el rescate de Monterey. También está esta notificación sobre la facturación del cliente, que el futuro muy fresco en flujo Web. Significa que puedes enviar directamente una factura a tu cliente. Tu cliente proporcionará sus propios detalles de tarjeta de crédito que rezarán por pagar por este hosting, No tú, y estás teniendo una opción de realmente hacer un poco de dinero en él, y puedes cobrar extra y poner como extra por mes. Por ejemplo, si ofreces a tus clientes de servicio para que les guste una cuota de mantenimiento o algo así, digamos que quieres que Teoh cobre tal vez $50 al mes y puedes quedarte con los $30 en. Después cobra a tus clientes El precio completo. $50 luego se fue flujo se llevará su cuna en su planta de hospedaje. Más sobre esto más adelante en la parte. ¿ Qué pasa con el trabajo freelance? Hablo del futuro y te explicaré beneficios de él y de todas esas cosas. Por ahora, sólo vamos a saltar ese paso. Sólo paga. Al menos me voy a pagar aquí. Una vez pasado el pago, llegamos a esta página. Ahora dice que el hosting CMS es el plan actual, y luego se puede ver bajo dominio personalizado, y tenemos una opción de realmente en nuevos dominates, que necesitamos comprar. Todavía no tenemos dominio, así que vamos a ir, papi dot com. Ve, papi, es donde compro mi dominio. Por lo general es sencillo. Es sencillo. Probablemente sea uno de los más grandes por ahí. Sostén los maniquíes que son dot com Están disponibles ahí, pero dominios específicos de país como digamos punto de para Alemania. O que pidió por España. No está en Go Daddy. Por lo general no creo que haya vigilado, pero puede que me equivoque, por lo general, están en sitios web específicos de un país. Ah, que venden dominios específicos de país, así que tendrías que comprarlos ahí. Pero el tutorial que les voy a mostrar y cómo conectarlos funcionan exactamente de la misma manera más o menos en cualquiera fuera de esos sitios web de dominio. Parece que estoy recibiendo un muy buen descuento. 85 centavos para el primer año. No mejor. Todos van. Eso es muy bueno con descuentos off. Esa es una de las razones por las que es un buen lugar para comprarlos porque sí tienen estos descuentos locos cuando te dan, como, primer año por, como, como, 30 cabeza de chip sucio a tarjeta. Continúa al carrito aquí mismo. Oh, vamos Que va a tratar de Upsell hacer algunas cosas diferentes como protección de privacidad, que no necesitamos. No, gracias. Um, algún diseñador de sitios web. Eso tampoco lo necesitamos. Gracias, e correos siguen a la tarjeta. Y aquí vamos. Eso va a probar Teoh instantáneamente Upsell y vender tu contrato de cinco años de inmediato. Yo suelo cambiar a un año ahora el precio volvió a la normalidad y voy a elegir una opción papal para el pago y ellos son el dominio está hecho. Ahora tenemos que volver. Teoh Web flow de nuevo bajo hosting tap y tenía nuestro nuevo dominio personalizado donde va Flo, va a detectar que estamos usando Go Daddy para nuestro dominio en lo que aquí ofrecen es que tienen esta capacidad de conectar dominio automáticamente, que es un futuro fresco. Hace las cosas mucho más fáciles. Entonces si tu dominio está encendido, ve, papi. Esa es una de las razones por las que suelo usar Go Daddy, porque Whipple tiene esta conexión automática, y también creo que la única otra conexión automática que usan con quizá dominios de Google . Pero los dominios de Google no están disponibles en todos los países, por lo que y puedes conectarte automáticamente cuando tengas acceso al dominio e ir a la cuenta de Daddy porque te va a pedir que inicies sesión en tu cuenta. Y si estás firmando eso va a hacer la conexión y cada cambio de configuración que necesita cambiarse para el dominio automáticamente, no tienes que preocuparte por ello. Pero en este caso, lo voy a hacer manualmente. Eso Aiken demuestra cómo funciona realmente porque va a ser similar, Teoh cada otro sitio web donde vas. Teoh cambió la configuración para conectar el dominio personalizado. Entonces vamos a ir con la conexión manualmente. Sí, este es un mensaje diciendo que porque estamos agregando un nuevo dominio. Se ha deshabilitado la indexación del subdominio. Eso significa que básicamente es algo que ver con el CEO. Entonces no tenemos un sitio web conectado a dos dominios muy diferentes y porque eso es algo que no está permitido por Google, y es por eso que automáticamente d estable. Manténgase indexando para ese dominio temporal que hemos utilizado de Wetklo. Así que solo click, OK, está bien, Ahora llegamos esto a tipo de instrucciones sobre lo que necesitamos hacer una vez que llegue a nuestro dominio, tenemos este flow course dot com que es el dominio desnudo y luego uno perseguimos con el www Lifelock curso que calma y Web slow nos da estos valores que tenemos que añadir dentro configuración de DNS hasta ahora proveedor de dominio. Entonces lo que tenemos que hacer es que tenemos que volver para ir, papi adentro Go, papi, Está bajo productos, mis productos y aquí nos va a mostrar todos los sitios web que tenemos todos los dominios que tenemos no tenemos sitios web, ¿verdad? Entonces si el curso no viene aquí y entonces tenemos que elegir DNS. Y suele ser lo mismo en todos los demás sitios web. Proveedores de dominio. Siempre se llama ya sea DNS solo en su gestión o algo basado en editor DNS. Sea lo que sea, básicamente el teclado son DNS. Ahí es donde quieres ir. Y se llega a estos ordenar hoja extraña de diferentes registros en nuestro registro DNS que parecen complicados. Pero son bastante simples. Y lo que tenemos que hacer aquí se agrega este un registro y un registro de nombre C. Como puedes ver, tenemos que elegir esto un tipo, ¿no? El nombre está en y luego valor es esta dirección p que es proporcionada por go Daddy. Entonces tenemos que copiar esa dirección p y luego vamos a editar una que tenga una red. Si eres el tipo de disco unis, ella no tiene anuncio. Tienes que simplemente crear a cualquiera, y eso es todo. Pero si ya tiene thes X record con un símbolo at, que es un derecho de registro A y ambos tienen que coincidir, así que si está en un registro y tiene un anuncio porque, como puedes ver, hay algunos otros registros con una red como un s o S O a. Así que no te preocupes por esos. Pero si hay un disco y dice a su lado en ese entonces hay que editar ese. Si no ves nada como eso, solo necesitas agregar uno nuevo. En este caso, ve que nos estaba mostrando que tenemos uno. Entonces sólo voy a editarlo. Entonces hostess at and points to the I p address by wet flow Todo lo demás simplemente puedes dejar mismo. Entonces ese es un registro necesitamos el segundo un registro porque no tenemos opción que tú al 2do 1 ahí. Entonces agrega desde aquí y bajo el tipo vamos a elegir un A type host de nuevo en y apunta a esta vez una segunda dirección i p de flujo Web y lo señala aquí TL Puedes creer que es esta segura lo que se hace que se hagan unos registros Ahora tenemos que agregarla. El registro de nombre del mar para un www así que copia el valor de Web lento y agregado, si no lo tienes. Tan solo necesitas agregar el nuevo. Eso es todo. Al igual que hicimos la última vez que tuve algún registro y para ver nombre en lugar de un disco. Está bien, eso es todo. Ahora se han editado los ajustes de DNS para el dominio. Ahora podemos comprobar el estado justo en piso húmedo y donde florales comprueban si todo está conectado. Bueno, como se puede ver, es para el primer dominio. Deja comprobar el estado para el 2do 1 Ahí tienes. 2do 1 está conectado también. Este en realidad fue súper rápido. No suele suceder tan rápido, supongo, porque era un dominio nuevo. También oro. Es bastante rápido actualizando esto. DNS registra algunos otros sitios web. Son bastante lentos, y por lo general podrían tardar hasta 48 horas en actualizar los registros. Entonces no te asustes. Y no te preocupes si no funciona de inmediato, solo espera 48 horas, 24 horas o 48 horas realmente depende del proveedor de la Deanna que está brindando esto porque ,ya , sabes, algunos de mis clientes se utilizan unos proveedores DNS oscuros muy locales, y se actualizan como cada vez en un día. Ella no trabaja ningún 15. O si un día pasa dos días pasan, sigue sin funcionar. Entonces tendría que ponerse en contacto con el proveedor de DNS ellos mismos. Porque a veces lo que pasa es que el sitio web podría estar en go Daddy s o.La persona podría comprar el dominio en un solo lugar, pero luego mover la gestión DNS. Entonces esos registros que acabamos de agregar, podrían trasladarlo a otro lugar con alguna empresa diferente o un servicio diferente o algo así. Por lo que sabíamos platicar con el cliente. Sólo asegúrate de preguntarles, Ya sabes, normalmente ni siquiera hago esto. A veces les doy estos detalles a mis clientes porque si tienen un dominio y si tienen el editor DNS o lo que sea, eso significa que ya saben hacer esto o han estado haciendo donde de alguna manera están. Lo que sea. Pero si no lo tienen, entonces podría hacer todo por ellos. Ahora tenemos que elegir un defecto. Podemos usar una de estas versiones. O uno con la www o uno sin. Se trata de una versión por defecto de nuestro sitio web. Entonces si alguien solo escribe en curso de flujo húmedo dot com serán redirigidos a www Web flow. Por supuesto, eso vienen. Esta suele ser la versión que me gusta hacer, que es mantener la www s la versión predeterminada y principal. Por lo que todo no puede venir y redirige a estos principales se puede hacer invierte. Bueno, no sé si alguna vez hay alguna preferencia específica. Creo que Www siempre es la mejor opción para simplemente mantenerlo como el dominio predeterminado. Y un último paso. Tenemos que publicarlo. Sí, esto Ahora no es editor. Si lo revisas. No olvides este último medio uso siempre hay que publicar desde aquí, y luego va a estar disponible. Por lo que vamos a hacer seleccionar este subdominio de flujo de trabajo y seleccionar nuestro nuevo dominio y publicado para seleccionar los dominios. Y no lo hagas Let's Chuck. Ah sitio web ahora se publica en un dominio personalizado donde flo course dot com Dentro de la configuración general , a veces hay piso húmedo mantiene la marca derecha. El distintivo se retiraba automáticamente en este momento, pero a veces podría estar ahí. Y también está este otro Brendan con insight HTML Así que puedes cambiar este tipo de deshabilitado este workflow branding desde aquí tanto en HTML como en el sitio web y de nuevo publicado una vez más. Y también podemos en realidad inédita esta segunda arma o que septum la. no necesitamos eso, ya que ya lo tenemos en nuestro dominio principal y eso es todo. Es así como publicas un sitio web en piso mojado sobre una costumbre. No lo hagas fácil peasy. 152. Sitio web de portafolio: Yo solía tener una empresa con dos de mis amigos y hacíamos muchas contrataciones atrás en los días. Y lo que harían muchos candidatos es que se venderían por debajo de sí mismos. Vendrían y dirían, ya sabes, en absoluto, sólo soy un principiante. No tengo mucha experiencia. Yada, da amigo. No, soy un aprendiz rápido. Pero mi conclusión como tu potencial empleador es que apestas. ¿ Cómo sé que me acabas de decir? Por lo que empezar en cualquier nueva profesión es duro porque la gente sí quiere contratar profesionales. No quieren principiantes, no van a producir. Esa es la verdad. Por aquí hay un gran error. Mucha gente hace. Piensan que ser un profesional es alguien con años de experiencia. No en absoluto. Un profesional, alguien que se toma en serio su trabajo, alguien que parece que se puede hacer cago, y alguien que quiera entregar un gran servicio a sus clientes o empleadores. Entonces, ¿cómo te haces parecer un profesional? Para empezar, hay que mostrar lo que puedes hacer en su diseño web. Eso se hace con el 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 un edificio fuera de este curso. Eso te va a dar tres piezas de cartera. Y eso es suficiente para que salgas por ahí y empieces a solicitar empleos. Y lo que es 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 problema. Necesitamos una página web de portafolio porque ¿qué crees que estamos en un alboroto? Diseñador web tiene su propio sitio web personal, pero te sorprendería que un gran trozo de diseñadores web, en realidad no lo hagan. Tienen su portafolio en plataformas como Behance o dribble, y eso es lo que comparten con sus clientes potenciales, enviando ese enlace a su perfil con todo ese portafolio o subido ahí. Pero nunca hago eso primero. Eso no me hace parecer un profesional. Como diseñador web freelance, eres esencialmente un negocio que brinda un servicio a tus clientes, ¿verdad? En ningún buen negocio haría alguna vez algo así. Es como ser un fotógrafo profesional con portafolio solo en Instagram. Yo quiero ser un fotógrafo pro que tenga su propio estudio fotográfico y yo solo perfil de Instagram. Y segundo, los estoy enviando a un lugar con otros buenos diseñadores. Eso 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 fuera el mejor candidato disponible para ellos, ya no me veo tan bien. Mi trabajo no se ve tan impresionante al lado del mejor Bork del mundo. En tercer lugar, estoy perdiendo la oportunidad de hacerles un pitch persuasivo con mi página web. Está bien, puedo mostrarlos, podría proceso de diseño. Puedo escribir un contenido muy persuasivo y convincente y una copia por convencerlos de que me deben contratar. Podría impresionarlos con mi propia página web en. Yo puedo incitarles a tomar medidas para que puedan ponerse en contacto o enviar un formulario o lo que sea. Ahora no digo que no debas tener perfiles en esas plataformas. En ocasiones incluso puedes encontrar trabajo para la fila ahí, pero no es un lugar al que dirigir a tus clientes potenciales. Además, eres diseñador web. Nunca pensaste en hacer un sitio web para ti. Eso simplemente no se ve serio. Es como ser un mecánico de autos nunca poseerá un sitio web de portafolio de autos, puede hacer mucha venta y pitcheo por ti. Y tenía clientes que me contrataran sólo porque les gustaba mi sitio web. Ahora incluso pensando o mirando el sitio web del portafolio, mis piezas de cartera, simplemente les gusta realmente el sitio web en sí. Entonces sabiendo desde la experiencia personal cuánto puede ayudar un buen portafolio sitios web. He diseñado y construido una cartera impresionante al revés para ti. He pensado mucho en este diseño. Mi objetivo era darte algo que se vería serie muy elegante, pero con un toque de diversión. He rociado algunas interacciones sutiles para demostrar que eres capaz de hacer tales cosas. Y ya he añadido dos piezas de cartera que has hecho en este curso. Para que ni siquiera tengas que preocuparte por ponerlos arriba. Y escribí una copia persuasiva que te hará mucho pitcheo. Todo eso para demostrarte que eres un profesional fuerte, sólido que puede hacer las cosas. En el siguiente video, te voy a mostrar cómo instalar este sitio web para ti, cómo agregar contenido, tu propio contenido, y cómo hacer algunas personalizaciones. Entonces, para que puedas hacerlo un poco más personal. 153. Visita de portafolio: antes de mostrarte cómo instalar un sitio web y una película a tu cuenta de flujo de trabajo. Déjame darte un recorrido por la página web y mostrarte qué es qué 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 impuesto de marcador de posición como este titular. Y en el siguiente video, donde te muestro cómo instalar, decide en tu ícono de Weppler vas a reemplazar el contenido genérico genérico por tu información personal. El sitio web es bastante sencillo. Se supone que el camino puesto para tus sitios web es. Tenemos sólo dos páginas en Página principal y páginas CMS para cada proyecto. El contenido fuera de la página web está en la narrativa en primera persona. Este es el estilo de ordenar que me encanta para los sitios web de portafolio. Si estoy mirando el portafolio de alguien, me interesa la persona detrás de él. Por lo que quiero ver una interacción amistosa para que pueda sentir la personalidad de la persona. También quiero ver una información clara de lo que haces. ¿ Cuál es tu especialidad de lo que es este sitio web sobre el lenguaje directo claro, sabes? ¿ Puedo trabajar contigo? ¿ Estás disponible para trabajar. ¿ Cómo puedo trabajar contigo? ¿ Cuáles son las puñaladas y demás? También caso muy direccional fuera de la cartera. Algunos reveses intérpretes lo tienen en una página separada, y eso es demasiado para ello. Tengo que encontrar un carril. Haga clic en ese idioma para que la página vuelva a cargar para finalmente ver su trabajo. Por lo que me gusta mostrar para tus piezas en la página principal al instante después de la sección de héroes. No te ves bien a la cara. Cómo exhibes o imprimes para tu negocio es importante para mucho trabajo para tus lados que he visto. Tienen forma muy confusa, creativa pero a menudo confusa de mostrar pasaporte. A menudo usan sólo 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 Última Guerra. No hay forma de confundirse sobre eso. Una descripción del proyecto, que es súper importante porque muchos diseñadores no hacen eso en la página de inicio. Es posible que los clientes ni siquiera visiten la página del proyecto que querrán obtener información directamente desde aquí, y es importante decirles qué tipo de proyecto es este. ¿ Lo diseñaste? Wasit. Una obra individual? ¿ Trabajo en equipo? ¿ Cuál fue su papel? ¿ Para qué sirve la página web? ¿ Y así sucesivamente? Quieren conocer esta información esencial para entender. ¿ Qué carajo están mirando? He agregado algún impuesto también para darnos información escaneable sobre tipo de proyectos como Proyecto de Concepto de Desarrollo de Suelo Mojado . Decir que es un concepto en una etiqueta es una manera sutil de ser honesto sobre el hecho de que se trataba un concepto proyecto concepto concepto significa que realmente no se pagó proyecto que hiciste por algún negocio existente o un producto, pero lo hiciste ya sea para la práctica o para este curso o por alguna otra razón. Quieres evitar una decepción incómoda más tarde, cuando tu cliente te pregunta algo sobre esa empresa de aplicaciones de chat para la que trabajaste y por supuesto , bastante más policías fuera del proyecto. Cómo mostrar las pantallas del proyecto es importante a nota muy importante a la hora de crear tus cuentas en plataformas de freelancing como up worker y freelancer, derribar este portafolio piezas y generar algo más. ¿ Por qué? Debido a que los sitios tienen proceso de revisión para nuevos freelancers. Muchos estudiantes están tomando este curso, y si todos ustedes aplican con el mismo trabajo de cartera, eso va a levantar banderas rojas al tratar con clientes, eso no es un problema. Puedes usar ese trabajo, pero para el proceso de solicitud de plataformas, ocultarlas temporalmente una vez aprobadas, entonces deberías estar seguro para volver a ponerlo arriba. Lo que hago sección es exactamente lo que dice. Tesis un lugar para dar una descripción más detallada de los servicios que brinda y pitch un poco más. Aquí tienes un consejo pro copyright. Si quieres escribir copia persuasiva, hazlo sobre ellos. Habla sobre cómo vas a resolver sus problemas y mejorar sus vidas, no cuánto te gusta el diseño Web y el caso de pollo de DSR. Tu pasión. Por último, sección muy obvia. Si quieren trabajar contigo, ¿ cuál es su siguiente paso? Ahora vamos a echar un vistazo a la página del Proyecto. Las páginas del proyecto son bastante sencillas. Alguna descripción del proyecto y una captura de pantalla grande. Hay muchas maneras diferentes de demostrar su trabajo de cartera, pero este es un estilo que uso en mi propia página web y que más me gusta. algunos diseñadores les gusta hacer un estudio de caso por lo que tendrán una gran presentación fuera del proyecto y bastante explicación fuera del proceso. Objetivos retos Básicamente un cuento corto sobre cómo llegó a refrescarse el proyecto. Este es un excelente enfoque y muestra todo el trabajo que has puesto en él y muestra a tus clientes potenciales que detrás de los santos fuera de tu proceso la razón por la que no hago este estudio de caso es simple. Es mucho trabajo y cantidad de ventaja. ¿ No es grande? Principalmente porque la guerra se dirige a audiencias como diseñadores web freelance, Nuestros clientes el 90% de las veces son no diseñadores y emprendedores. Un bueno para tu lado con capturas de pantalla simples fuera de tu pasaporte es suficiente información para ellos. todas formas no van a bucear profundamente dentro del estudio de caso. Ahí apreciarán que está ahí y pensarán aún más alto de ti. Pero la cantidad de trabajo que tenemos que poner para crear el estudio de caso para cada cartera es demasiado . A lo mejor en un principio tendrá suficiente entusiasmo. Pero después queremos, y simplemente no vamos a mantener nuestra página web actualizada por eso, y ahí es donde vamos a jodernos en el futuro porque actualizar el cuatro año perfecto va a ser tanto trabajo que va a ser simplemente no hacerlo. Y terminaremos con un viejo portafolio piezas y ese es el peor resultado que tus diseños mejorarán y generalmente Diseño web Trans cambia por lo que eres diseños más antiguos se verán anticuados y no modernos. Pero si es muy sencillo de actualizar, irás o te animarás a mantenerlo fresco. Por lo que el proyecto reza solo necesita un párrafo fuera de una descripción y una captura de pantalla, que puedes exportar directamente desde Sigma. Y así es la vinculación con la vida alcista es opcional. Es muy útil para los clientes que miran el proyecto. Pueden ver el sitio web en acción y jugar con él y ver todo el trabajo que has hecho, no solo green shot sino interacciones y todo eso. A pesar de que tengo una regla sobre este Onley vinculado a sitios web en vivo de los que estás orgulloso, realmente, sitios web de los clientes están viviendo organizarse, y cuando termines con un proyecto, ese cliente podría cambiar las cosas en el sitio web. Podrían agregar nueva sección y cambiar las cosas por su cuenta, contratar a alguien más para cualquier nueva actualización y así sucesivamente. Entonces en algún momento son presiones. Los diseños podrían terminar buscándonos a ella y a nosotros, y no quieres exhibir un sitio web que se ha puesto tu lo a lo largo del tiempo. Aunque tú seas el que está haciendo bien la carnicería, eso es todo. minimalista, Página personalminimalista, hermosa y fuerte para demostrar tu trabajo y mostrar clientes potenciales o profesionalismo y habilidades de diseño web. 154. 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 hacer tus propias cosas de cambio, editar contenido, personalizar el estilo y publicar 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 Como ya has construido dos proyectos, la aplicación de chat y los sitios web de mapas de equipos, entonces te enfrentarás a este problema. Tienes tres opciones. Actualice a un plan de pago, cree una cuenta separada o elimine uno de los proyectos existentes. Todo bien. Una vez que resuelvas ese problema de límite, 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 agregarle. Nombre, el logo es solo el impuesto. Sólo pon tu nombre ahí como quieras. Si quieres nombre y apellido o solo nombre o simplemente apellido, lo que prefieras. También está el nombre en el titular. No te olvides de cambiar eso. También 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, dos lugares, página de inicio y la plantilla del proyecto. Después hay enlaces de correo electrónico en dos lugares. Hay uno en el bar Nab y uno en el. Tanto la barra Nab como el pie de página son componentes como cabría esperar. Entonces está sincronizado en la página dos del proyecto. Estos son enlaces de correo electrónico, por lo que debes poner tu dirección de correo electrónico dentro del enlace, así que cuando la gente haga clic en él, se llena un nuevo correo electrónico con tu dirección. 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 quieras o no te sientas libre de mantenerlo como, pero darle giros más personales 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. Lo mismo que puedes hacer en el color de resaltado, sea cual sea el color que utilices 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 el color global. He preparado el archivo Figma para estas miniaturas para que puedas actualizar y exportar fácilmente las más adelante Déjame mostrarte cómo hice estos efectos de resaltado para que sepas cómo reutilizarlo. Si decides hacerlo, el texto resaltado se encuentra dentro de un bloque que tiene elemento de encabezado dentro. Y un bloque regular como resaltado destacado 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 de luces altas. Este titular no es un texto fluido. Es un montón de elementos independientes en línea sentados uno al lado del otro. Para mover el orden, es necesario arrastrar elementos alrededor o cambiar el orden en el Navegador. Tenga en cuenta que los textos resaltados pueden gastarse en dos líneas. Intente resaltar como máximo dos palabras consecutivas, como diseñador web o tener múltiples cuadros resaltados uno al lado del otro. Si realmente necesitas más tiempo resalte los aspectos destacados del enlace funcionan un poco diferente. En realidad, mucho más simple que los titulares es solo una sombra de caja. Si necesitas aplicar ese estilo en cualquier otro lugar, solo tienes que seleccionar una clase llamada enlace amarillo. 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 es una línea crecida que se mueve como una serpiente arriba y abajo. Déjame mostrarte dónde están estas cosas. Si vas al panel de interacciones, verás que hay tres interacciones en carga de la página, 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ás añadir nada de esto excepto un punto culminante Porque si agregas algún elemento resaltado, necesitarás agregarlo a la interacción dos. Por ejemplo, esta nueva caja resaltada no anima. Lo mejor es simplemente agregar un texto dentro de los cuadros de resaltado existentes. Pero si realmente debes agregar otros nuevos, entonces esto es lo que debes hacer. 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. Entonces cambia a uno, lo que significa 100% Simplemente crece 0-100% en su tamaño original Lo mismo se hace para cada resaltado de forma independiente. Por eso el primero corre. Y luego el segundo para animar el tercero, seleccionarlo en el lienzo y bajo estados iniciales, cuando aparezca este icono más, haga clic en él y seleccione Escala Y poner cero bajo el 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 horizontalmente. Sólo ahora necesitamos agregar un estado final, que es volverlo a crecer a uno. Y vamos a añadir eso al final. ¿Por qué? Porque queremos que se anime uno tras otro Al mismo tiempo, nuevamente, desactiva el candado y pon 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. Consulta la vista previa. 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 el elemento correcto. La interacción aparece en el panel. Las interacciones que se activan por la carga de la página aparecen todo el tiempo sin importar qué elemento haya seleccionado. Pero aquellos que tienen un elemento disparador, hay que seleccionar el elemento activador exacto para encontrar estas interacciones. Los puedes ver en el Navegador. Todos los elementos desencadenantes tienen este icono de relámpago junto a él, eso significa que hay una interacción en ese elemento. Por ejemplo, envoltura de botones, ahí es donde se configura esa interacción de desplazamiento 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 puedas ver cuál es qué nombre descripción. Bastante sencillo. dos imágenes que necesitarás generar para nuevos proyectos. Una miniatura para la página de inicio y la pantalla completa del proyecto La pantalla completa es sencilla en Figma. Ve al diseño de tu página y explora todo el marco. Después solo subirlo al campo correspondiente. Pero asegúrate de comprimir primero la imagen, o va a ser un archivo muy grande para la miniatura Ve a este archivo figma que he compartido contigo. Enlace en los recursos, hay una página llamada Assets, y ahí es donde puedes crear tus miniaturas Por cierto, verás aquí hay una fabrica y un clip web. Usa esto para que puedas generar los tuyos propios y actualizarlos en la configuración de tu proyecto. Arrastra la imagen dentro la misma cosa para el grupo posterior, y colócala como quieras. Después exporte la miniatura, comprima y cárguela en CMS Entonces tienes una URL de sitio de vida. Si dejas esto vacío, aparece el enlace uno. Para que puedas dejarlo vacío sin problema. Asegúrese de activar esta palanca. 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. Creé este toggle en la página de inicio. Entonces creé el filtro para la lista de colecciones diciendo que muestran los que tienen activado toggle bastante fácil. Entonces tienes los tres textos que aparecen bajo el título. Eso es. Una vez que digas ir a la página de inicio, podrás ver que el nuevo proyecto va a aparecer. Encima de los demás, 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 principal son una lista de colección. Recuerde, ese contenido está vinculado a los campos CMS. No podrás editar artículos individuales directamente en el lienzo. Solo puedes editarlos dentro de CMS. Además, la lista de colecciones tiene un orden de clasificación aplicado a la misma. Lo configuraré 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é. 155. 150 Búsqueda de trabajo en línea NUEVO: Hablemos de trabajo y dónde encontrarlo. Hay muchas maneras para un diseñador web freelance encuentre trabajo. La primera y obvia opción, que son plataformas en línea como freelancer.com y obviamente upwork.com, o localmente en la ciudad donde vives y networking con gente la industria o networking con startups pasando por las conferencias tecnológicas, haciendo amistad con otros diseñadores web exitosos que pueden enviar Porque lo que sucede a menudo con los diseñadores web es que se reservan por completo porque un diseñador solo puede hacer un sitio web a la vez, ¿verdad? No se pueden hacer 1020 sitios web simultáneamente. Así que los buenos diseñadores obtienen muy fácilmente libro. Y lo que pasa es que entonces envían el trabajo a sus amigos o alguna otra gente que recomendarías a sus clientes y así sucesivamente. También LinkedIn y bolsas de trabajo regulares como ZipRecruiter, 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 veas cosas como tu escala actual, tu personalidad o tu experiencia, dónde 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 hacia arriba, hay fibra, hay freelancer.com, personas por hora, toalla superior, y así sucesivamente La lista es interminable y si la buscas en Google, vas a encontrar cada vez más. Y cada año, obviamente cada vez más de estas plataformas surgirán a medida que cambie la competencia, ya que algunas de ellas caen de su primer lugar y otras reemplazarán o surgirán nuevas. Primero hacia arriba. Aquí es donde encontré mi éxito. Encontré suficiente trabajo hacia arriba para estar ocupado a tiempo completo. Upwork es enorme Es una empresa pública, es decir, cotiza en bolsa. Creo que es la primera plataforma independiente que se hace pública. Fue creado a partir de la fusión de Elance y Odesk. Aquí abundan los empleos, lo que significa que la competencia es Tengo un video dedicado sobre Upwork y cómo tener éxito en él. Entonces lo cubriremos en detalle que te enseñaré algunas estrategias sobre cómo tener éxito en algunos errores comunes a evitar. En otro gran lugar donde trabajos freelance es freelancer.com No he trabajado en freelancer, pero lo he usado para contratar freelancers Tengo la sensación de que los clientes al alza pagan un poco más que los clientes independientes. Y eso podría deberse a la forma en estas dos plataformas apuntan a sus clientes. Como puedes ver en la página principal, tienen estos ejemplos de diseño de aplicaciones móviles y diseño de sitios web y sus precios. Esos son precios muy bajos. Entonces parece que quieren entusiasmar a los clientes lo barato que pueden conseguir algo, cual es una mala noticia para los freelancers Pero no te preocupes por esto como dice el refrán, si pagas cacahuetes, te dan monos pronto, los clientes aprenderán esto y elegirán intencionalmente precios más altos porque precio bajo los obtendrá resultado de baja calidad Las listas se actualizan constantemente Muestra empleos abiertos. Estos son trabajos que aún se pueden hacer. Esto ya es bastante bueno, pero verás que es menor número que Upwork, que en este momento tiene más de 70 mil empleos abiertos Para buscar trabajos de diseño web, puedes buscar con palabras clave que creo que busca a través del título y la descripción del empleo. Pero una mejor manera de buscar es seleccionar una escala de los filtros. Eso es mucho mejor. Por supuesto que no todos estos van a ser aptos para ti. Estas palabras clave y escalas son seleccionadas por los clientes. Lo que consideran un diseño de sitio web no siempre va a ser correcto. Entonces ese es un breve resumen de freelancer. Entonces tenemos fibra que es ligeramente diferente a las dos primeras en Upwork, los clientes Freelancer publican trabajos y los freelancers pujan comprados en fibra freelancers publican servicios y los clientes los compran directamente ejemplo, este freelancer aquí dice que diseñará un sitio web de flujo web receptivo por $200. Y ofrece tres paquetes diferentes, básico, estándar y premium. Me gusta bastante este enfoque basado en el servicio en Fiverr. De hecho, he hecho mi primer trabajo independiente en fibra. Esto fue hace un tiempo. Reanudé los diseños por cinco dólares. En aquel entonces en Fiverr, ese es el precio. Solo podrí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 Fiverr 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 Fiverr 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, espere un par de días para obtener resultados y listo. Para tener éxito en Fiverr, hay que ganar dinero en volumen Todo está arreglado para eso. No hay muchas reuniones con clientes o negociaciones. Obtienes los detalles, entregas un resultado hecho siguiente trabajo Eventos que fechas de entrega específicas que tienes que cumplir después de tener todos los insumos 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 que 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. Crearía muchos de esos trabajos Así se llama aquí, el trabajo. Entonces crearé un par de plantillas o simplemente usaré plantillas del mercado de flujos de trabajo, hay muchas plantillas hermosas vendidas en Webflow y ya han sido plantillas gratuitas bastante geniales Yo contaría el costo de la plantilla y el precio total puede ser usar plantillas gratuitas para precios básicos y luego tener plantillas pagadas bajo precios premium. Y luego, cuando la gente compraba mi trabajo, yo los haría elegir qué plantilla quieren, un tipo de color de oferta 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 algún ensayo 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. Yo lo elegiría entonces llenaría sus datos y hecho. Nunca nadie tuvo ninguna queja sobre el diseño porque sabían lo que estaban recibiendo por adelantado Personas por hora es una especie de mezcla entre Fiverr y Los clientes pueden encontrar freelancers directamente buscando habilidades específicas y luego revisando perfiles o freelancers y poniéndose en contacto Además, pueden publicar proyectos al igual que Upwork Freelancer y obtener propuestas de freelancers Y al igual que Fiverr, puedes publicar servicios aquí. Lo llaman ofertas en Fiverr se llama el gig. He usado personas por hora tanto como freelancer como cliente. He hecho algunos diseños de currículum aquí. En esos días, he contratado a diseñadores web y desarrolladores web varias veces aquí. Top towel es un lado freelance que tiene un enfoque bastante diferente al de otros. Este lado va a ser un poco temprano para ti en tu carrera, pero todavía voy a tirar aquí. Entonces ya sabes lo que hay ahí afuera. Top-down tiene un proceso de selección muy riguroso para los freelancers Hacen entrevistas, retos, reseñas de cartera antes de que te acepten en la plataforma, quieren un talento superior ahí dentro, ahí el nombre top tau es que afirman que solo se selecciona el 3% de los aspirantes. Así que considera de arriba hacia abajo una vez que hayas sobresalido en tus habilidades, esto por supuesto significa que los clientes buscarán freelancers de este lado, están buscando un servicio premium y no tienen miedo de pagar Entonces, como puedes ver, incluso en plataformas en línea, hay lugares para encontrar trabajo bien remunerado. Si quieres más lados, Forbes ha listado 79 sitios para conseguir trabajos freelance. Ve a dar vueltas a tu cabeza, enlace en los recursos. Sobre todas las posibilidades son infinitas en línea. Pero la competencia también es feroz porque hay muchos diseñadores web por ahí. Es todo un mundo 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 puestos de trabajo y que están en estas plataformas. Son terribles. Ni siquiera son mediocres ahí por debajo de mediocres, los clientes en realidad también lucharon para encontrar un buen talento A menudo mis clientes, cuando vienen a mí y estoy ocupado y tal vez no estoy completamente reservado y no tengo ninguna capacidad para tomar nuevos proyectos. Me preguntaron bien. Entonces ¿conoces a alguien más que puedas recomendar? Porque fuimos de este lado y no pudimos encontrar a nadie porque solo hay tanta competencia y hay tanto ruido pasando por ahí que encontrar, encontrar el talento para ellos, es un poco difícil. Y lo que pasa con esta plataforma es que porque cualquiera puede unirse y está abierta al mundo y el mundo es jodidamente grande Tienes tanta gente que se une sin siquiera tener ninguna habilidad en absoluto. Al igual que la gente va a afirmar que sus diseñadores web y ellos harán cualquier cosa incluso antes de tomar un curso de diseño web. Pero si te puedes imaginar como cualquier chico o alguien viene aquí y ellos piensan, voy a ganar mucho dinero en línea. Y empezaron como, Bien hacer diseño web. Acabo de instalar un sitio de Squarespace para alguien o simplemente aprendí a instalar nuestro tema de WordPress Y ahora soy diseñador web o desarrollador web. Y para alguien como tú que ha puesto tanto trabajo en ello. Y seamos honestos, este curso fue bastante enorme. Si pones trabajo y si estás trabajando en ello, si te lo estás tomando en serio, entonces serás imparable Y si proporcionas encuestas de bienes y entregas encuestas de bienes y con el polaco y proceso que ya has dicho. Tener un gran, gran sitio web mostrando portafolios en algunos otros consejos y trucos que te voy a enseñar más adelante en esta parte del Vas a estar millas por delante de la competencia que solo están metiendo por ahí, sin saber lo que están haciendo en realidad, y solo son personas aleatorias en todo el mundo 156. 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 157. 152 Búsqueda de redes de trabajo NUEVO: Y 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 están corriendo y tratando de hacer del amino, su negocio Y todos necesitan un sitio web. Estás en un muy buen mercado. Cada negocio es pequeño o grande o internacional o local, incluso profesionales individuales como tú y yo, fotógrafos, entrenadores, organizadores de kahn Murray, todos necesitan un sitio web Entonces, ¿dónde haces la red? Comienza con meetup. Meetup si nunca lo has usado, es un lugar donde la gente organiza diferentes eventos en torno tema específico o un tema, por ejemplo, este grupo realmente gastando tu AKS, organiza diferentes reuniones y eventos relacionados con el diseño en mi ciudad, intrapreneurs, startups, diferentes eventos en torno a un tema específico o un tema, por ejemplo, este grupo realmente gastando tu AKS, organiza diferentes reuniones y eventos relacionados con el diseño en mi ciudad, intrapreneurs, startups, 0 otros diseñadores que son conexiones bastante valiosas para ti. Y a menudo van a Meetups así 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 Eso podría ser útil para ti como conexiones. Todo el mundo tiene un trabajo de un evento como ese. Una vez asistí a un taller sobre qué, cómo cablear mi sitio web De verdad, en realidad asistí en un taller sobre eso. No es que tuviera que aprender, pero pensé, ¿sabes qué? Va a ser divertido. ¿Y tú qué sabes? Tengo que salir de ella. Incluso si conoces a la multitud adecuada en pestañas medias, 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 bien sacrificando algo de pago por la experiencia y la red, pero en un estado 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 la puesta en marcha. Las startups suelen ir a lugares como estos para exhibir su producto o encontrar inversores o encontrar clientes para su empresa. La mayoría 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 tendrán incubadoras de startups y puedes comprobar que si eres una ciudad tiene tales incubadoras porque estos lugares, un poco juntan muchas startups y luego siempre están organizando diferentes eventos y demostraciones y cosas así Y dentro de este ecosistema y entorno se pueden encontrar muchos trabajos y tablero freelance dentro de este ecosistema y entorno se pueden encontrar muchos trabajos y En mucha gente tiene alambre, diseñadores web, diseñadores o desarrolladores. Estas son multitud y buenas conexiones para que te desarrolles y crezcas. Y si odias el networking, entonces no lo hagas. Pon tu tiempo y por lo tanto en algo más adecuado para ti y tu personalidad. Yo mismo, no me gusta el networking. Prefiero masticar vidrio y luego ir a hablar con la gente. Siempre es mejor poner tus esfuerzos en algo que haga clic contigo. Tengo una fila 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. Es un mejor factor para hacer tu 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 ahí mismo es buscar clientes y negociar, enviar propuestas y todas las reuniones y todas esas cosas. Entonces, ¿también hacer que tantas de esas cosas sean agradables? 158. 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, 159. 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. 160. Consejos 1-3: Obtener la aprobación de tu perfil: Antes de que puedas trabajar en Upwork, primero, tienes que obtener 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 y tampoco 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 tienen que revisarla dentro de unos días, y ellos o bien un gran beneficio para los freelancers que están trabajando en upwork y tampoco 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 tienen que revisarla dentro de unos días, y ellos o bien aprobar o rechazar. 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 solo mejorarás tu perfil y Y si no funciona y luego una y otra vez, mi experiencia con este proceso de solicitud no es mucho de lo que hablar. Yo lo hice. Fue aceptado, fin de historia. Pero está este tipo, y en su blog, ha escrito este artículo el cual voy a vincular en los recursos, y quiero que leas ese artículo porque hay grandes 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 nuevas aplicaciones que están solicitando esa habilidad en particular Entonces, por ejemplo, si es digamos, diseñadores de logotipos, correcto, y Work 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 la categoría de gráficos y diseño, y tal vez incluso otra para cosas como experiencia de usuario y el diseño de la interfaz de usuario 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, lista tantas habilidades como sea posible 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. Pero solo elige 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 los consejos de este artículo en sí. Hay más, así que échales un vistazo. Bien, volvamos a mi propio contenido y no robar los consejos de otras personas. Entonces, cuando envías tu solicitud por primera vez, no tienes la opción de enviar una cartera. Pero si te rechazan y vuelves a aplicar, entonces esta opción de cartera se abre y puedes enviar una cartera y mostrar tu contraseña para apoyar tu solicitud En caso de que estés pasando por este proceso de solicitud segunda vez y estés subiendo tu portafolio, no subas trabajos de portafolio de este curso He aquí por qué. Dado que hay muchos estudiantes en este curso, y muchos de ustedes probablemente irán trabajando 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. 161. Consejos 4-9: Crea un perfil que atraiga clientes: ¿Qué es lo primero que dice tu cliente en tu perfil o en tu propuesta? Tu foto de perfil. 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, cuán 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 estafarme 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. Así que consigue un muy buen tiro en la cabeza. Y no trates de ahorrar tiempo e ir al perfil de Facebook y agarrarlo algo de ahí, porque lo más probable es que en tu perfil de Facebook, tengas fotos que o bien estás, ya sabes, luciendo genial, luciendo guapo, o luciendo guapa. Y ese no es el criterio a utilizar a la hora de conseguir una buena foto de sombrero, y 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, o 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 ser hatchop en el estudio, obviamente, puedes estar sobre 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, 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, 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 su tecnología y jerga. 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 lingo, seguiría queriendo encontrar a alguien que se especialice exactamente en lo que estoy pidiendo Entonces, si estoy preguntando que necesito bajar la página de préstamos, entonces definitivamente me gustaría ir por alguien que sea experto en páginas de préstamos o que se especialice en páginas de préstamos en línea. O si quiero marketing en Facebook, ¿verdad? A lo mejor los anuncios de Facebook, quiero a alguien que sea un comercializador de anuncios de Facebook y no un comercializador digital general Se trata de plátanos. ¿En qué están pensando? Es muy fácil competir con mayoría de los ss freelance en 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. Sólo cuatro freelancers tienen esa insignia de todas las propuestas, y uno la tiene al 88%, lo cual no es muy tranquilizador Entonces al instante, estas tres personas se paran sobre la multitud. A pesar de que hay 15 propuestas, muy fácilmente pude filtrar la mayoría de ellas con solo verificar esta insignia. Para obtener esta insignia en Upwork, tienes que trabajar con al menos tres clientes diferentes Entonces no hay mucho que puedas hacer respecto, solo tienes 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 por 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, haciendo todo el proceso en Upwork, y luego darle retroalimentación al final Tipo de situación de ganar ganar para ambos al 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 barato 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 completamente porque es secretos directos, por lo 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. 162. Consejos 10-12: Consigue la insignia de "mejor partida": 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 aplicara 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 Por lo que 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 del que el trabajo 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. Descubre 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. 163. 158 Precio correcto: 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. Freelancers que tienen este tipo de mentalidad. Tienen este tipo de gustos y actitudes negativas hacia Upwork y merecen plataformas independientes. Pensando porque ahora todo el mundo está compitiendo por el precio y hay muchos precios, mucha gente compitiendo con el precio. Así que todo el mundo está bajando los precios, pero no podrían estar más equivocados 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 su negocio en su marca. Entonces no quieren barato, no van a destacar, no van a ser de calidad. Y muchas veces están más que felices de pagar por ello. Al igual que muchos de nosotros que estamos felices de pagar 1,000 dólares por iPhone en lugar de pagar 100 dólares por Alcatel pujando bajo, no solo ganas menos dinero, sino que también cuando menos trabajos 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 ofertar abogado susurrándole silenciosamente a sus clientes que usted es Mira esta lista de propuestas. Inferior, te desplazas más deprimente. La situación parece menos calificada. La gente sabe calificar no hay empleos anteriores para esta 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 están asociados con una menor calidad. solo mirar esta lista, esta lista es un claro indicador para el cliente 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 parte del tiempo, 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, al hacer esa pregunta, me va a poner en este estado confuso donde no sé cómo responder. Pero cuando publicas un trabajo en Upwork es cliente, y si eliges una tarifa plana, Upwork te va a preguntar, cuál es tu presupuesto para alguien como yo que no sabe exactamente qué hay ahí, cuál es su presupuesto, y no le gusta responder a la pregunta Lo que hacemos es tratar de 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, voy a ir camino, mucho más bajo en mis estimaciones entonces en realidad va a costar porque realmente no quiero pagar de más, Así que no quiero decir N1 Voy a pagar 2000 por este trabajo. ¿Y si cuesta tan solo 300 dólares? Entonces voy a asumir que los freelancers van a abusar de mí por mí un poco poniendo este alto presupuesto Entonces ahora todo el mundo va a tratar de aprovechar eso. Y van a decir, Oh, lo haremos para el 2000 y 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á que los clientes a menudo pagarán un presupuesto mucho más bajo, entonces lo que realmente están dispuestos a pagar Y al final del día habrá multa pagando dos o tres veces más de lo que proponen es el 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 cierto que algunos negocios tendrán exactamente esa cantidad de dinero disponible para ese proyecto. Pero muchas veces no es cierto. Es solo clientes sacando números de su cabeza. Y cuando veas este presupuesto, solo ignora eso y propuso, ¿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 164. 159 desórdenes de Freelance resisten NUEVO: Ser exitoso centro freelance a menudo no se trata de las escalas, sino más del servicio que brindas a tus clientes. Puedes ser el mejor diseñador web ****. Pero si a los clientes no les gusta trabajar contigo, si no estás entregando dos encuestas 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. Refieren a sus amigos que suelen ser de negocios, empresarios e intrapreneurs Sus amigos suelen ser otros empresarios y otro intérprete Así que sí tienen un acceso muy bueno para traer más trabajo hacia tu gran parte de mis clientes En realidad son referencias como si hubiera trabajado con un cliente. Están súper satisfechos porque trato con encuestas de muy alta calidad. Y entonces están felices de recomendarme a sus amigos. Pero si no entregué un buen servicio, aunque construyera un buen sitio web. Pero fueron tal vez yo fui negligente o tal vez no lo fui. Básicamente pienso en un servicio al cliente. A lo mejor yo no estaba, no era muy amable. A lo mejor fue solo 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 siempre que le estés recomendando algo a tu amigo, quieres asegurarte de que no los vas a joder por ahí, lo que sea que le vayas a recomendar, va a ser bueno y beneficioso para ellos. Por lo que necesitan estar cien por ciento seguros de que lo que sea que obtengan, lo que sea, 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. Ya sabes, cuál es el único criterio los clientes nunca pasarán por alto Pueden pasar por alto cosas como tu portafolio, tu experiencia previa, tal vez incluso las revisiones de empleo Pero hay una cosa que nunca, nunca ignorará y es la confianza. ¿Confío en esta persona? Si la respuesta no es 100% ****, 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 lo intento, entonces todo puede estar vivo. Todo lo que digas puede estar vivo. Todo lo que veo en el perfil puede ser aliado. Todo lo que prometes puede ser mucho, 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. Tienes esta agenda secreta que quieres hacer la celda. Si reconozco que tienes esa agenda, entonces cómo sé que todo lo que dices es cierto, que cómo sé que todo lo que estás tratando de hacer es para ayudarme, pero no sólo para beneficiarte a ti mismo. 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. 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, todavía 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 microinteracciones cambian cuando tu agenda cambia de vender a ayudar al rosa, y no va a pasar desapercibida Tus clientes confiarán en ti al instante. Y eso a menudo importa más que tu cartera. Una cosa increíble 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 no puedes pagar sus precios astronómicos para proyectos de diseño web. Entonces qué haces, vas a plataformas independientes como Upwork para contratar, contratar freelancer individual Quién va a cobrar un poco menos Ahora pensando en cuánta confusión e incertidumbre tienes que lidiar si no eres el intérprete que es de este campo, de este tipo de industria del diseño web o lo que sea. Si solo estás haciendo el negocio regular, entonces probablemente no conozcas ninguna de esta tecnología. No sabes dónde construirlo. No sabes qué es WordPress o qué es deshielo web o HTML o CMS No sabes muy bien cómo juzgar quién es un buen artículo freelance, es un buen diseñador web y quién es un mal diseñador web? Estás lidiando con mucha incertidumbre. Y a medida que investigues más, descubrirás que tú, 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 podemos ayudarlos? Hay varias formas en las que podemos ayudarlos de una manera, definitivamente es para decirles que en mostrarles que tenemos el proceso, 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 Ride No tienen que preocuparse por eso. Eso lo conseguimos atendido. 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 finalmente construyendo todo en Webflow Entonces podemos explicar que 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 habrá involucrados en todo el proceso y van a tener capacidad de retocar un poco el Estoy ajustando el camino y curso para asegurarnos de que vamos en la dirección correcta Ahora, pueden relajarse en nuestra asociación porque ven que tenemos atendida y conocemos el proceso. Y podemos guiar este proceso y de esa manera ellos pueden relajarse y no tienen que arriesgar mucho al trabajar con nosotros. Hazlo y tendrás que comérselos de las manos. Porque otros freelancers, más probable es que no estén haciendo esto No los están llevando a este proceso guiado. Pero tú sí, otros freelancers están ahí para tomar su dinero, pero no lo estás, tienes la espalda 165. Consejos 17-22: Escribe cartas de presentación muy buenas: Trabajos, normalmente 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 aw 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 estaban trabajando bien en mí como cliente, y había un montón de basura 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 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 uppwor 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 un montón 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 referirse y vincular su trabajo de cartera dentro del pw Pero lo que puedes hacer y porque tienes sitio web, puedes enviarles enlaces a tu sitio web. Ser piezas de portafolio en Atwor 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 está un poco organizado muy bien, y tienes un poco más de contenido. 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 ningún freelancer que me mande su portafolio, que esta en punto weblo o algo o dot wibly o wix.com, porque eso no se algo o dot wibly o wix.com, parece te estás tomando en serio tu profesión. Así que tose 15 dólares al mes por weblos primer mes de suscripción, 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 va a pagarse solo. Casi la mitad de las propuestas que envíes tendrán un campo extra llamado preguntas adicionales. El primer campo es carta de presentación. Ahí es donde escribes tu mensaje principal al cliente. Entonces, si el cliente agregó preguntas adicionales al trabajo, obtendrá esos campos a continuación. Cuando publiqué el trabajo en aphorg y recibí propuestas, noté algo muy extraño Por el lado del cliente, se invirtió el orden de estos campos. Yo estaba viendo respuestas a la pregunta primero y luego respuestas a la carta de presentación en segundo lugar. La mayoría de los freelancers no tenían idea de esto, así que estaban escribiendo cosas como, como mencioné anteriormente en mi carta de presentación ¿Qué hay arriba? Vergonzoso. Yo estaba como, Oh, Dios mío, eso es lo que he estado haciendo también, escribiendo primero carta de presentación, y luego preguntas. Entonces aquí hay un consejo oculto que la mayoría de los freelancers no conocen cuando hay un campo para preguntas adicionales, y a veces no las hay, ¿verdad A veces es sólo una carta de presentación, pero a veces las hay. Entonces siempre que haya campos de preguntas adicionales, escríbelos boca abajo porque eso es lo que la persona que es lo que el cliente va a ver primero. Las preguntas adicionales, contéstelo primero, y luego carta de presentación después. 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 slash 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 Deer, 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 ser Señora 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, es algo que se requiere para 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 posición laboral 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. 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. 166. 161 Suspensión: A veces los freelancers son suspendidos o expulsados de Upwork por hacer algo que va en contra de sus términos y condiciones Entonces te voy a dar algunos consejos para que te asegures de que no te encuentres en una situación muy complicada con ellos. Tratar de que le paguen fuera de Upwork 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. Upwork gana dinero en transacciones y transacciones pago que ocurren entre usted y el cliente En si intentas tomar esos pagos fuera de la plataforma, entonces ellos no ganan dinero y los jodes. Puedes encontrar más información al respecto en sus términos y condiciones. Y a la cláusula se le llama centro de convención que la circuncisión Y puedes enterarte más al respecto. Esto aplica no solo al proyecto actual que obtienes del cliente, sino también a todos los proyectos posteriores del club que provienen del mismo cliente. Ahí. 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 que tienes que mantener la relación en Upwork de ese cliente y recibir el pago en Upwork Entonces, hay disparadores en tu comunicación que pueden levantar la bandera roja porque la mensajería ocurre usándola para su plataforma de mensajería, ¿verdad? Entonces, aunque en este mensaje discutas cosas como pioneras, estas son, serían las palabras desencadenantes de bandera roja que instantáneamente disparan un poco esta suspensión automáticamente Si mencionaste cosas como pagar cerca de PayPal, transferencias bancarias, bandas cualquier cosa que sea un poco puede estar algo asociada que estás tratando de que te paguen afuera 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 mencionaste algo como sí o lo que sea, entonces te suspenderán aunque te lo pidieran Así que asegúrate de que si el cliente te lo pide, llevemos 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 mencionaste algo que la IA se activa y todas esas cosas. Pero a veces tal vez mencionaste PayPal, no porque quieras que te paguen afuera, pero a lo mejor estás dando un ejemplo. Como sitio web de PayPal, tal vez esté tratando de tratar sitio web de diseñador que sea para la banca, o tal vez esté diseñando alguna billetera electrónica o algo que esté relacionado con el financiamiento Pero entonces, entonces está bien. Porque si te suspenden automáticamente, entonces puedes apelar. Y entonces un ser humano va a tomar, echar un vistazo a tu comunicación y si están convencidos de que no estás tratando de que te paguen afuera, pero estás discutiendo que esto era parte del proyecto, entonces va a estar bien. Y levantarán la banda. Ahora, naturalmente, si estás discutiendo esto en una llamada de Skype o una videollamada, eso no es parte de nuestro cerdo, ¿verdad? Es imposible que hacia arriba lo averiguarlo, pero sí tengo algunas buenas razones para que te quedes realmente en nuestro parque al final del día, Upwork es algo bueno Permite a tantos freelancers encontrar trabajo. Todos queremos hacia arriba para ganar dinero y no salir del negocio. Y si la mayoría de nosotros sacamos la relación de Upwork algún día, ellos simplemente van a cerrar porque es disminuir la tasa de comisión hace que valga la pena después de $500 recortes de comisiones en la mitad 20-10%, 10% no es tan grande No quisiste decir por ejemplo, se necesita al menos el 50% de lo que hago aquí. Entonces Upwork no es tan malo. Después de diez K ganando, vuelve a recortar a una tarifa del cinco por ciento Eso no es nada realmente. Si te han pagado a través de PayPal o tarjetas de crédito, sigues perdiendo 23 por ciento en comisiones de transacción. Y si además de eso tendrías que lidiar con la conversión de divisas, entonces definitivamente terminarás perdiendo hasta un 5% de todos modos 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 la facturación y la persecución de pagos Eso ahorra mucho tiempo y molestias. Porque 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 Entonces tú también lo sabes. Eso ahorra mucho tiempo y molestias. Ahora, segunda razón por la que son los freelancers se suspenden de nuestra parte la mirada si están enviando muchas propuestas pero no se les adjudican muchos trabajos Básicamente, esto sucede cuando estás enviando spam y enviando demasiadas propuestas sin realmente pasarlas y pensar deliberadamente dónde estás aplicando y aplicándote exactamente a donde quieras Nadie sabe realmente exactamente cuál es el porcentaje de tasa de éxito que tienes para que te contraten. Pero hay este rumor de que hay que ser contratado cada 20 propuestas que enviaste, creo, pero es una habitación o podrían, tal vez no sean reales, podrían ser menos, podrían ser más. Pero si aplicaste los consejos que has aprendido en esta sección, entonces eso nunca debería suceder. No pongas en tu perfil ninguna habilidad que no tengas. Upwork a veces hace una escala aleatoria marca a los freelancers y hacen este tipo de pruebas orales y hacen una entrevista con un freelancer para asegurarse de que lo que ponen bajo sus habilidades sea ponen bajo sus habilidades sea Una es que en realidad mi cuenta estaba congelada debido a esta verificación de habilidades. De alguna manera iniciaron el chequeo de báscula 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, esas son mis habilidades. Pero supongo que porque estaba bajo la categoría de diseño web, asuma que se supone que tengo que saber HTML, CSS, aunque nunca afirmé que sabía eso. Por suerte pude apelar y explicarles que no necesito HTML y CSS para hacer mi trabajo. Que nunca afirmé que lo sabía. Y entendieron y congelaron mi cuenta. Pero si los tuviera en mis habilidades entonces me habrían jodido totalmente. El caso es porque Upwork es una plataforma tan grande y hay tanta gente y tanto dinero se mueve allí, como que atrae a malos actores también por intentar jugar con el sistema y abrir cuentas fraudulentas y abrir cuentas fraudulentas y hacer participar en algunas actividades diferentes de estafa Entonces Upwork es muy diligente al respecto y está rebajando en muchas cuentas diferentes para asegurarse de que las personas que están ahí, afirman quiénes son, y afirman que conocen escalas y pueden realizar lo que prometieron al cliente Así que asegúrate de que sea lo que sea que pongas en Upwork, todo sea verdadero y auténtico y no estés tratando de jugar con el sistema porque sí lo tienen, no tienen una gran tolerancia Así que aunque algo sea como temblar, solo quita cualquier cosa que no sea 100% verdad 167. 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 168. 163 Precios: Bienvenido al tema aterrador para la mayoría de los freelancers, precios. ¿Cuánto cobran? ¿Estar confundido acerca de los precios? Y el comienzo está bien. Yo también estaba bastante confundido cuando empecé. Recuerdo mi primer proyecto de página de préstamos que hice. Cobro $200. Y fue que en realidad era bastante trabajo. Fue diseño y construcción de landing page. Escribí la copia y el contenido de la página de préstamos. Era el proyecto de marketing dos, hice anuncios de Facebook y construí diseños, banners de Facebook y anuncios también, e hice todo por $200. Después me actualicé a tarifa por hora y era de $20 por hora. Y eso ya era un ascenso de descenso para mí porque a ese ritmo, pude mantenerme completamente por freelance Freelancing básicamente a tiempo completo. Después me actualicé a terceros dólares por hora, que fue mi tarifa desde hace bastante tiempo. Entonces dupliqué a 60 dólares la hora. Y ahora cobré principalmente tarifa plana y aproximadamente en promedio $5,000 por un diseño y construir 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 ahora teníamos 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 de lo que me di cuenta de que estaba corriendo hacia falsas creencias en mi cabeza Primero, estaba proyectando mis propios problemas de dinero en los clientes en lugar de verlo desde su perspectiva, siempre mirándolo 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 $6 por hora por cualquier cosa Segundo, pensar que el precio que cobro está en correlación directa con el nivel de mi escala. Entonces, si le cobro el doble de boca, ahora debería ser el doble de hábil. Y podrías pensar, pero ¿no es eso cierto? ¿No debería significar un precio más alto una mejor escala? En realidad, para nada. Aquí está lo más importante en verdad 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 Crystal 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 para que los clientes potenciales se acerquen a ti. Ambos ganaron 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 como chico pequeño. El segundo es un gran bufete de abogados que gana millones de dólares al año. ¿Qué opinas que vale lo mismo para ellos un sitio web? Absolutamente no. nuevo sitio web podría traer más negocios para ambos clientes, pero más negocios para el contador podría significar miles de dólares adicionales al mes Y para el bufete de abogados, eso podría significar 100 mil adicionales mensuales. Mismo sitio web, misma cantidad de esfuerzo de tu parte, pero gran diferencia de valor basado en el cliente. Entonces, sea cual sea la tasa que le des esto a los clientes, probablemente sea demasiado caro para el contador y ridículamente barato para el bufete de abogados, terminarás perdiendo ambos prospectos Se podría pensar, bueno, al menos el bufete de abogados se entusiasmará por conseguir un precio tan barato. Pero no van a estar pagando 5.000 dólares por un sitio web que podría traerles 1 millón extra por oreja Parece poco realista. Es demasiado pequeño de un número. No van a confiar en tu trabajo. Pero si ajustaste tu precio se basa en quién es el cliente, Digamos hipotéticamente ofreciendo 2000 para el contador y 20 K para el bufete de abogados, podrías terminar mezclando ambos trabajos porque los precios sonarían razonables para cualquiera de ellos los precios sonarían razonables para cualquiera Steve Jobs pagó 100 mil por el siguiente logotipo. Nuestros logos valen 100 K. Para él. Fue para una pequeña startup. No lo sería. Entonces, 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. Ahora esa es una historia diferente. No planean sacar mucho valor de ello. Entonces 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? ¿En qué esperan ganar de ello? 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 que tienen un máximo de 2.000 dólares. Pero si hay mucho valor que ganar del sitio 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. Si tardas dos o 3 h, bastante barato, pero si lleva 100.200 h y bastante caro, lo que sucede con las tarifas por hora es que los clientes suelen utilizar su propia experiencia e ideas preconcebidas sobre si algo es barato o caro en función de cuánto cuesta por Y usan su propio referente cultural dondequiera que vivan, cuánto servicios diferentes pagan y lo comparan con eso. Y mi regla con las tarifas por hora es que nunca vayan por debajo 20 dólares por hora porque la mayoría de sus clientes que vendrán de países desarrollados. Y en los países desarrollados, cualquier cosa por debajo de los 20 dólares por hora se acerca mucho a un salario mínimo. En salario mínimo es algo que se va a pagar a un conserje Estás ofreciendo servicios altamente calificados y no deberías ser pagado como 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 generador Entonces tienes 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 de tiempo completo y no se involucran, y no tienen la necesidad de involucrar a freelancers cuando trabajan con agencias, generalmente la tarifa por hora es la mejor manera de hacerlo por dos razones Primero, 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 al alcance de los proyectos básicamente, se está haciendo cada vez más grande y necesitabas hacer un poco más de trabajo Porque lo que pasa es que cuando diseñas algo y construyes algo, ¿verdad? Vas a tener personal dentro de la agencia que te dé retroalimentación. Entonces tendrías que hacer las revisiones y van a enviársela al cliente. Y luego los clientes tendrán sus propios comentarios y hay cambios propios que son sus propios cambios que quieren hacer. Y entonces vas a tener que hacer entonces otra ronda de revisiones a una tasa fija. El estudio en sí no tiene que preocuparse por estas revisiones. Entonces van a amontonarlo todo sobre ti. Pero 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 de su 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 en base a tarifas de pago por hora, sino que trabajan por proyecto. Entonces van a cobrar una tarifa plana al cliente final. Y la necesidad de asegurarse de que lo que sea que les cueste no se les vaya demasiado de las manos. Y cuando te están pagando tarifa plana, entonces no les importa. Y puedes simplemente trabajar en ello tanto como quieran en cuanto a tarifa por hora, realmente depende del tipo de clientes con los que ellos mismos trabajen. Normalmente, yo diría que van entre 20 y 70 dólares por hora Nunca van a ir, creo que por encima de los 70 dólares por hora Entonces, en ese caso para ellos, tiene sentido contratar a un empleado de tiempo completo y exprimirle lo más posible. Y también depende del país en el que se encuentren, en, tal vez ciudad incluso en la que se encuentren. Y si están trabajando con clientes locales o clientes en línea ellos mismos. 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 nosotros, 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 son un poco más altas que en línea, porque las 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 pueden demandar, si las cosas salen mal. Si estás negociando con estudios, no tengas miedo de ir por debajo de tu tarifa habitual porque el flujo constante de trabajo en reducción de horas no facturables justifica totalmente el descuento que les vas a dar al trabajar con clientes finales directos, en realidad tienes que hacer propuestas, ¿ que enviar propuestas son contratos y negociar y Han entrevistas y cosas así. Pero cuando trabajas con un estudio, solo haces eso una vez, ¿verdad? Y luego ellos cada nuevo proyecto que viene a tu manera. No tienes que pasar por todo este proceso de negociación y entrevista o cosas más antiguas porque la agencia y el Estudio lo están haciendo con el cliente final ellos mismos Entonces llegarás a, 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 normalmente irían probablemente desde 2000 y hasta llegar al máximo tal vez a las 10:15 Y por último, tienes grandes empresas con muchos empleados que ganan mucho dinero. Y este tipo probablemente se inicia 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. Así que ahora no hay que preocuparse por ellos porque yo 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 proponen el precio en consecuencia 169. 164 por hora vs fijo: 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. Solo dale una tarifa y termina con ella. No es necesario negociar cada vez que tenga más trabajo del mismo cliente señalado para preocuparse de que las revisiones se salgan de control. Más revisiones significa más dinero para ti. Las reuniones y la comunicación pueden llevar mucho tiempo. Algunos clientes pueden querer reuniones de Skype regularmente, pero si las construyes para eso también, 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 h, entonces es barato. Pero si necesitas 80 h que es caro. Además, los clientes tendrán una reacción emocional ante ciertas tarifas por hora. Encontrarán que ciertas tarifas son demasiado caras, aunque el precio final sea el mismo, podría 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 de decidir para los clientes porque la tarifa por hora hace que sea incierto cuánto será la factura final es que te vuelvas 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. Entonces te da la oportunidad de ganar mucho más dinero por hora sin parecer demasiado caro. Sin límite en cuanto a lo alto que puedes 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 tarifa fija es que las revisiones pueden salirse de control, si no están claramente definidas, por ejemplo, a revisiones gratuitas y después de eso, aplicar 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 calculador es el 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 de dinero. Entonces, ¿cuál debes elegir? Al igual que con los montos, Es una buena idea ir caso por caso y cliente por cliente, por ejemplo con los estudios y agencias, su mejor enfoque probablemente sería ir con tarifas por hora en cuando se trata de clientes finales que probablemente ir 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 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 sencillo para mí. Me encanta la sencillez de la misma. Y entonces ahora mismo, tengo ambos con mis clientes de largo plazo, hago tarifa por hora y luego con otros nuevos, hago grado fijo. Pero con clientes más a largo plazo, hago cada hora porque hago muchos tipos diferentes de trabajo como el diseño de UI, por ejemplo, para aplicaciones móviles. Y esos proyectos pueden llegar a ser monstruosamente grandes y extraños y es imposible ponerle una tarifa plana Así que solo uso cada hora porque lo hace simple y hace que sea fácil de construir. Un criterio final a considerar es elegir lo que sea con lo que se sienta cómodo. Porque al final del día, es tu trabajo y tienes que hacer esto todos los días. Y es importante que todos los aspectos, tantos 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. 170. Plantilla de propuesta: Tasa 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. Eso 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. El 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 He insertado 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 quieres un sitio web, no 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 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 estoy mostrando ahora mismo, pero creo que PDF es una mejor opción. Ya sabes exportar. Solo tienes que ir a la propiedad spanel, 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 manera 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 ese puesto dentro del precio como buffer, ¿verdad? Entonces pones un poco como búfer para asegurarte de que puedas negociarlo si quieren si te piden el descuento. O a veces incluso puedes bajar el precio tal vez eliminando el número de revisiones o haciendo algo un poco menos o, ya sabes, hay muchas formas diferentes en las que puedes mover las cosas para disminuir el precio si realmente no pueden pagar 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 rango, y si tienen algún tipo de objeciones al mismo, 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 Y si no lo hacen. Y si, por ejemplo, a veces puede ser que les doy un valor y ellos 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 ya sabes, ahorra 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 171. Plantilla de propuesta: Tarifa por hora: 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 hecho 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 en 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. 172. 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 transcurra sin problemas y me acaban pagando. Esto se aplica principalmente al trabajo fuera de la plataforma. En las plataformas como Apwork el contrato se atiende ahí 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 esta relación cara a cara establecida esta relación cara a cara crea un vínculo diferente 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, tampoco van a estar 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 significa que eso sea lo que debas 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 algo 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í, 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 retraso no fue eso 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 pones tu información el resto que puedes mantener intacta porque ha sido generada 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 autocompletará en un idioma que sea adecuado para los contratos Han hecho un gran trabajo. Entonces, si lo necesitas, solo tienes que registrarte con Bonsai y generar ahí un contrato 173. Venta de Webflow a los 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 en 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 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 alguna parte. Y esto es algo que tendrás que explicar a algunos de los clientes. Por ejemplo, yo mismo cuando dirigía un negocio, no sabía mucho sobre diseño o desarrollo web, y pensé que el sitio web de nuestra compañía simplemente vivía mágicamente en la nube Entonces tal vez tengas que explicarle un poco cómo va a funcionar esto, que el sitio web tiene que estar alojado en algún lugar, y tenemos que pagarle a esa compañía aloje el sitio web por nosotros en sus servidores. 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 de aumento. 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 pueden usar este beneficio porque los Crens regulares 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 podemos tener ya sabes, puede tener mil páginas. Esa es una historia diferente. Estoy hablando 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 comisiones de administración por cada sitio web, y luego me embolso 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 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 una carga lateral como un caracol. Pero el hosting weblos viene con lo que se llama CDN Content Delivery Network 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 servidores regulares, los precios comienzan a subir y se acercan bastante a los precios de Webflow Y por si eso no es suficiente, WebLohsting 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. Pero los servidores Webflow necesitan ejecutar solo un sistema, Webflow. Así que 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 citan, pero terminan siendo más caros que Webflow 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. Al compararlo con un sitio web versus un alojamiento de sitios web, los precios vienen muy similares o a veces incluso más caros del otro lado, si estás 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 para su sitio web anterior, 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 están usando un complemento 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 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 enchufe 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 MDL, mejor seguridad, más rápido, menos molestia, más barato Segundo, 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 el editor de Webflows 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 weblo 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 están muy preocupados donde voy a construir porque los empresarios y emprendedores muchas veces incluso trabajo con equipos que son techie, equipos de desarrollo e incluso ellos no están muy preocupados donde lo construyo siempre y cuando sea eficiente para mí y lo produzca y pueda iterarlo muy bien porque soy yo quien en realidad está construyendo un quien en realidad está Yo soy el que va a estar editando ese sitio web y todas esas cosas. Entonces tiene que ser rápido y eficiente para ellos, que pueda hacerlo muy fácil y me preguntan, cuánto va a costar y decirles el precio, y ellos dicen: Bien, bien. Pero en esos casos 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. 174. Introducción a 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 de la derecha. Me doy cuenta de que este curso fue 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 ese sitio web para ello O incluso una mejor opción sería asumir proyectos reales. Puedes buscar proyectos dentro de tu red entre tus amigos, familiares, compañeros de trabajo, etc. Y puedes encargarte de proyectos pagados o gratuitos. O puedes comenzar de inmediato a buscar proyectos reales y trabajos reales en upwork y otras plataformas freelance Y mientras haces eso, puedes pasar por estas lecciones avanzadas tu propio ritmo para seguir mejorando tus habilidades y seguir alimentando tu entusiasmo Los tutoriales de esta sección están relacionados tanto con el diseño como el flujo web 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 una práctica porque era un tutorial de Photoshop y un poco más avanzado. Por eso lo ponemos dentro de esta parte avanzada de esta sección o código personalizado embed, que es para webflow, ¿verdad Para incrustar algunas aplicaciones de terceros como el plug in de comentarios, lo que vamos a hacer para ese sitio web que ya tenemos para el último proyecto que construimos Y en el bloque donde vamos a insertar el código personalizado para comentar esos y algunos más videotutoriales en sección avanzada. Que se diviertan. 175. Flujo de web: modal personalizado (pop-up): 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 en el interior es de un solo 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. Esta vez 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 T Map. Construir esto dentro del flujo web 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 caja de luz, pero es principalmente para imágenes y videos, pero formas o algo por el estilo, no hay ninguno. Esto fue algo que me sorprendió al principio y cuando vi el tutorial sobre cómo construir este modelo con una forma en vi el tutorial sobre cómo construir su interior, cuando entendí qué tipo de flujo de plataforma de diseño web era una herramienta profesional donde construyes cosas desde cero como un desarrollador, no solo dejando caer componentes listos para usar. También puede ser sorprendente para ti, pero eso es lo que hace que el flujo web sea increíble Empecemos. ¿Qué sucede cuando se abre el modelo? Hay un color de fondo que se superpone en la parte superior de toda la página y hay esta forma dentro de ella, justo entonces al cierre, todo desaparece Primero, construyamos eso, y luego nos encargaremos de las interacciones. Voy a agregar un bloque profundo y ponerlo en la parte superior de la página y nombrarlo 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. Se está superponiendo al héroe, pero no a la sección posterior. Además, está detrás de la barra de navegación, pero queremos que vaya encima de todo. Para superponerla, encima de todo, necesitamos usar una función que aún no hayamos discutido. Índice Z, que podemos encontrar en los ajustes de posición. Se muestra en todas las posiciones además automático o estático 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 tuviéramos dos elementos superpuestos entre sí, uno que tenga mayor valor se va a apilar en la parte superior. También he vinculado el video tutorial de Web Flows sobre el índice Z en caso de que quieras aprender un poco más al respecto. Si cambio el índice z a uno, se va a apilar encima de todos los valores cero grado. Pero sigue detrás de la barra de siesta. ¿Cómo es que la barra de siesta no demuestra que tiene un lado de valor z? Pero como navbar es un componente listo para usar, probablemente tenga algún índice Z predeterminado de Webflow Lo cual tiene sentido porque nawbar en vistas móviles tiene un menú desplegable que necesita apilar encima Si estamos abriendo el menú en dispositivos móviles o tabletas, 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é enseguida son 1,000 Si ponemos modelo en 1001, entonces va a hacer el truco. Si no es para ti, tal vez el valor sea diferente, solo ve más y más alto hasta que funcione. No hay límite a lo alto que puedes llegar. Pon 10,000 si quieres. Por último, hagamos que el envoltorio del modelo 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 flex box para que podamos alinear el contenido en el centro. Nuevo Bloque Do irá justo en el medio. Nombrarlo modelo y estilizarlo ne solo un contenido, un titular, un párrafo y un bloque de formulario. No tenemos diseños para esto, solo lo estoy haciendo volar para demostración Ya tenemos clases para los elementos del formulario, vamos a reutilizar los como botón y campo. Voy a darle al modelo el ancho máximo para que el contenido se ajuste muy bien dentro de los Campos tienen ancho máximo, por eso se están cortando así. Excelente, necesitamos una cosa más en el modelo, Un botón de cerrar, de lo contrario ¿cómo saben los usuarios dónde hacer clic para cerrar el modelo? Podemos poner algo como cancelar o cerrar enlace debajo un botón o un icono de X en la esquina del modelo. Vamos con un icono de cierre porque es un poco más difícil. Entonces aprenderás más en la realidad. Ya sabes todo lo que necesitas para construir esto. Solo necesitamos un icono de cierre, cual podemos obtenerlo del icono y luego colocarlo 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 modelo en posición relativa para que el icono se posicione en relación con el modelo allí. Ahora podemos posicionar el icono muy bien dando algunos márgenes. Sólo para que lo sepas, los colores esfgicos son editables en Figma. Si quisiéramos, podríamos abrir este Spgi en Figma y cambiar el color para que coincida con nuestra paleta del proyecto Pero no tenemos que hacer eso 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 normal, pero está bien. Podemos cambiar manualmente el tipo de cursor desde el panel de estilos 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 flotar y por supuesto, darle un efecto de transición, así que es agradable y suave Eso es todo lo que el modelo está hecho. Ahora lo que necesitamos, interacciones cercanas y abiertas interacciones. Empecemos por cerrar. Como ya está abierto, nuestro gatillo es obviamente el icono de cerrar. Seleccione y agregue un nuevo disparador de clic en el icono de cerrar. Nueva animación y sin modelo. ¿Qué estamos animando? Todo el envoltorio del modelo queremos que desaparezca. Seleccione un envoltorio de modelo en el lienzo y agregue una nueva acción. Simplemente podemos cambiar la opacidad al 0% para que se desvanezca. Cambiemos la flexibilización y hagamos la transición más rápida, Algo así como 200 milisegundos Eso está todo bien, pero si mueves mouse sobre el lienzo, verás que los elementos modales y de forma siguen ahí. Eso es porque simplemente lo hicimos transparente, no iban a ningún lado. En realidad esconderlos de la página. Necesitamos cambiar la pantalla a no. Justo después de que se haga esa animación de desvanecimiento, podemos agregar una nueva acción que es ocultar y mostrar acción dentro de los centros de visualización Vamos a cambiarlo a no u oculto. Consulta la vista previa, cómo funciona todo. Perfecto, Cerrar está bien. Además, sería bueno si pudiéramos activar el cierre haciendo clic en el área fuera del modelo. Básicamente cerrando cuando el usuario hace clic en el espacio de fondo. Tu primer instinto podría ser agregar eso al envoltorio del modelo Pero eso no va a cortarlo cortarlo porque aunque funcione, también se activa cuando haces clic en cualquier parte del modelo dos, incluso dentro de los campos, porque todo eso está anidado dentro del envoltorio del modelo Al hacer clic en el formulario se considera lo mismo que hacer clic en el envoltorio del modelo. Necesitamos un nuevo elemento que se superponga detrás del modelo y vamos a poner el gatillo en ese elemento Dale un estilo similar como la posición de fijación del envoltorio modal y completa 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 el modelo se apilará en la parte superior. Por lo general ese cambio de orden es suficiente, pero si por alguna razón no lo es, entonces puedes usar valores de índice z, dar al modelo un índice Z más alto. Por ejemplo, 2.1 para la zona cerrada. Y eso hará el trabajo. Agrega la misma interacción cercana a esa área cercana, y eso es todo. Ahora cuando hacemos clic en el modelo en sí, no pasa nada, pero cuando hacemos clic en el fondo, se va a cerrar. Por último, necesitamos agregar la interacción abierta. Antes de hacer eso, primero vamos a ocultar el envoltorio del modelo en un estado predeterminado que podemos hacer desde la visualización del cambio de llave de estilo a ninguno para todo el envoltorio del modelo Nuestro disparador es el botón de acceso en la barra. Vamos a agregar una nueva interacción a ese botón, una nueva animación. Y vamos a llamarlo modelo abierto. Ahora necesitamos seleccionar el envoltorio de modelo para agregarle animaciones. Pero ya no podemos hacer eso desde las Canvavas ya que está oculto. Entonces tenemos que seleccionarlo del Navegador. Una vez seleccionado, agrega una nueva acción ya que el modelo está oculto. Primero tenemos que mostrarlo, elegir ocultar, mostrar desde el menú desplegable. Y luego cambiar la pantalla a flex. ¿Por qué Lino Porque esa es nuestra configuración de visualización original para el envoltorio del modelo. Bien, bien. Pero eso solo muestra todo al instante. No se decolora. Para agregar desvanecimiento, necesitamos iniciarlo desde 0% de opacidad y luego terminarlo a 100% Vamos a agregar 0% primero, que vamos a establecerlo estado inicial desde este toggle, porque si no lo hacemos, entonces va a mostrar 100% por la configuración de visualización. Entonces salta al 0% y luego vuelve a pasar al 100%, lo cual es una animación terrible. 0% tiene que venir antes de la acción de ocultar y mostrar. Ahora podemos agregar 100% de opacidad ya que el estado final cambia la flexibilización y duración a valores similares como lo hicimos con close. Y eso es todo. Probemos todo en modo de vista previa. Perfecto. Todo está funcionando bien y así es como creas un modelo personalizado en webflow No esperarías que una cosa tan utilizada necesite tantos pasos, pero así es como se construyen todos , los desarrolladores incluso tienen que todo a mano. 176. Webflow: Inserción de código personalizado – Plugin de comentarios (requiere un plan de pago): Antes de comenzar, solo avisa que este tutorial necesita un plan pago en Webflow En este video, vamos a aprender a incrustar código personalizado dentro de un sitio web de Webflow Por lo general, esto se utiliza para insertar un complemento de terceros en cualquier parte de nuestra página. Por ejemplo, cosas como componentes de calendario, reserva de citas, temporizadores y mucho más. Esta vez instalaremos un plugin de comentarios en la página de entrada del blog Después de esto, prácticamente sabrás cómo instalar cualquier otro complemento, aunque cada complemento tiene sus propias especificaciones durante la instalación, pero esas especificaciones son explicadas por los propios proveedores de complementos, generalmente proporcionando tutoriales en video. Entonces, una vez que sabes lo que sucede en el lado de Webflow, no debería ser difícil sortear los otros complementos El plugin de comentarios que usaremos se llama discuss Para empezar, necesitamos crear una cuenta en Discutir y obtener instrucciones a partir de ahí sobre cómo instalarla en nuestro sitio web. Así que ve a discuss.com. Eso es dqs.com y haz clic en Comenzar. Entonces inscríbase. A continuación, llegarás a esta puerta preguntándote si quieres instalarla en el sitio web. Entonces sí, elige eso. A continuación, algunos datos básicos del sitio como nombre y categoría. Discs tiene una versión gratuita con anuncios y packs pagados sin anuncios. Para cualquier sitio web al principio, versión gratuita está absolutamente bien. Eso es lo que siempre empiezo para mis clientes hasta que haya un tráfico lo suficientemente grande como para cambiar a la versión paga, que de todos modos no cuesta mucho Obviamente, eso es para que jueguen los clientes, no nosotros. A continuación, obtendrás la pantalla para elegir una plataforma. Estas plataformas ofrecen integraciones directas, pero Webflow no está en la lista Webflow no suele tener integraciones directas plug and play con otras plataformas y complementos, donde solo puedes hacer clic en algunos botones y comenzar a usar el Eso se espera porque Webflow es un poco diferente a los demás. Es más como codificar un sitio web desde cero, y podemos instalar manualmente el enchufe con facilidad. Así que desplácese hacia abajo en la parte inferior de esta lista y seleccione la instalación manual. Obtendremos este código personalizado que debe insertarse directamente en nuestra página de entrada de blog. Ahora, copiemos este código y diríjase a Webflow. Vamos a agregar un nuevo desbloqueador dentro de nuestro contenedor. Y desde el panel de elementos, agregue un nuevo elemento llamado Embed. Al instante abrirás el editor de código, así que pega tu código aquí. Para muchos plugins, eso es todo. Aquí es donde termina, pero no para discutirlo. Hay un par de ediciones que tenemos que hacer al propio código Primero, veamos cómo se ve todo. Tenga en cuenta que el código personalizado Embds generalmente no se puede ver dentro del editor o el modo de vista previa solo en el sitio web publicado Webloa no ejecuta el código para asegurarse de que no choca con el diseñador En el lado vivo, es visible todo bien. Ese cuadro de mensaje en la parte superior solo es visible para nosotros porque somos administradores del sitio Es preguntarnos si queremos permitir reacciones de nuestro lado, tal vez más tarde. Entonces así es como va a quedar, pero aún no completamente funcional. este momento es estático, por lo que sólo va a funcionar en esta página en particular. Y cada otro comentario que haremos en otras páginas, va a ser lo mismo porque realmente no hemos conectado esto a nuestro CMS. Volvamos al código y veamos qué necesitamos cambiar. Si haces doble clic en el elemento incrustado, se abrirá el editor de código. Este es un código JavaScript, y dentro del código, hay comentarios que nos dicen exactamente lo que necesitamos cambiar. El primer comentario dice que necesitamos reemplazar URL de la página y el segundo nos dice que reemplacemos el identificador de página. Sólo tenemos que hacer esos dos cambios y luego descomentar esa sección Javascript, estos símbolos, que es barra en la estrella o dos barras, crean comentarios Pero esa sección es parte del código, así que tenemos que descomentarlo lo contrario no va a funcionar. Es bastante sencillo. Actualmente hay envolventes dentro de estos símbolos, uno al principio, uno después de eso. Si eliminamos ambos, se convertirá en código funcional. Notarás esto por cambio de color. A continuación, necesitamos reemplazar la URL de la página. El PageRl necesita ser dinámico. Es la URL de la entrada particular del blog. Ya que estamos haciendo esto en una página dinámica, encima de este editor de código, tenemos este botón para agregar un campo, similar al que teníamos dentro de la configuración de SEO, si recuerdas. Una de las opciones es una babosa. Esto es lo que viene después de la barra final en la URL. En nuestro caso, después de la barra de blog. Podemos usar eso para crear un valor de URL. Solo necesitamos insertar manualmente todo lo que viene delante de esa babosa Y luego está justo al lado. Por lo que Webflow insertará el resto de la URL automáticamente. Solo asegúrate de poner esto dentro de comillas simples, así es como funciona JavaScript en este caso. El identificador de página debe ser algún valor único que se le asigne a cada publicación de bloque. Podemos volver a usar slug para esto porque la babosa siempre va a ser única para cada publicación de bloque En este caso, solo la babosa es suficiente y no olvides envolverla dentro de comillas simples Justo lo último para asegurarse dentro de la sección a continuación, verifique si la URL de su sitio de discusión es correcta. A veces dependiendo de dónde copiaste este código, en lugar del nombre de tu sitio, podría decir example.discuss.com Si ese es el caso, deberá reemplazarlo con un nombre corto de su sitio, que puede encontrar aquí dentro discutir Admin. En la pestaña General. Simplemente copie esto y reemplace la palabra ejemplo con él para crear una URL adecuada. Eso es todo. Publica los cambios y prueba los comentarios en diferentes entradas de blog Funciona solo en el sitio en vivo, modo de vista previa no lo va a mostrar. Esta fue probablemente la instalación enchufable más complicada. Otros plugins suelen ser más simples que esto. Ahora que ya sabes cómo hacer esto, todos los demás complementos deberían ser lo suficientemente simples. Si alguna vez te atascas, pide ayuda en los foros de Webflow. Comunidad allí es muy útil. 177. 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. 178. 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 179. 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.