 Buenas tardes, seguimos el track. Y tenemos desde Madrid a Maylen García, que es una diseñadora web y especialista en WordPress y Elementor. Y bueno, hay muchas cosas que decir de Maylen. Es una chica que tiene mucho potencial dentro de la comunidad WordPress. Hace unos días estuvo con el tema de voluntarios en Madrid y hoy nos viene a visitar a dar una charla acá, así que con un fuerte abrazo la recibimos. Adelante, Maylen. Bueno, voy a arrancar contando, compartiendo una anécdota que me pasó a mí trabajando en la agencia antes de empezar las enfilas. Teníamos que hacer, bueno, vino un cliente que nos pedía una web, pero este cliente iba a tener dos servicios adicionales y teníamos que montar tres webs. En esta agencia éramos en el departamento de web tres personas. Entonces, al jefe se lo ocurrió, pues cada uno hacéis una. Y así tardamos menos. ¿Qué pasó? Que salió cada web de su madre y de su padre. No se parecían en nada, porque al final si no tenemos un sistema de diseño, no se ha trabajado nada al principio, ni siquiera para, aunque sea bocetar, pues claro, cada uno metía ahí sus paddings, un magazine, yo meto aquí, me gusta esto, estos colores, un desastre, ¿no? Y bueno, vamos con el primer punto, el primer por qué, que a mí me hubiera gustado saber de hecho cuando empecé, ¿no? El tema de los white frames. Para quien no lo sepa, los white frames son básicamente como un esqueleto, que normalmente está en escala de grises, no hablamos de colores, ni nos estamos ni siquiera peleando con tipografías, ni nada, es el primer momento que ahí os dejo un par de imágenes de lo que puede ser un white frame. También mucha gente me dice, pero es que el presupuesto que tengo para hacer la web, si yo la diseño antes, es que es un gasto, no sé qué, gasto de lápiz y papel. O sea, tampoco hay grandes gastos. Ahí tenéis, pues como os explico, unos ejemplos, podemos hacer unos pequeños bocetos que incluso luego podemos, si queremos, mostrarlo al cliente también, como para compartir ese proceso, porque aquí realmente también necesitaremos tener muy en cuenta el siguiente punto, que es la estructura del contenido. Es muy importante antes de que empecemos ni siquiera saber qué colores vamos a usar, qué tipografía ni nada de a nivel visual, tengamos en cuenta, pues el orden de las secciones, esto nos ayuda muchísimo a hacer una jerarquía de la información, que queremos mostrar primero y que queremos darle menos importancia, porque al final nosotros, haciendo estos white frames, tenemos, por así decirlo, una completa, casi completa manera de poder guiar al usuario cómo queramos nosotros, es muy importante. Y también otro melón, que no voy a abrirlo, pero que es muy importante el tema de los funnels, también de venta, los podemos tener muy en cuenta aquí. Y ya, empezando por estos dos, bueno, apartados que he comentado, ya podemos dividir el proyecto por fases. Si nos viene una web que es sencillita o una web que no tiene muchas páginas, puede que no sea un problema, pero si nos viene una web, por ejemplo, que es de un hotel, que tiene 8000 cosas y un montón de custom post-haves, si no sé qué, o una web de un hospital, que también tiene ahí sus movidas, pues no nos parecerá haciéndolo de este modo. Ya masticamos un poquito en pequeñas tareas el proceso entero de la web, en vez de que el cliente nos viene y nos pide un presupuesto hasta que entregamos la web desarrollada, vamos, pues eso, masticando un poquito el proceso para que sea más o menos y que no nos parezca, aunque nos dé una web muy grande, que no sea como una mososidad y no lo veamos desde ese punto. También muy importante dividir el proceso porque así, normalmente, tú tienes que cumplir con unos plazos de entrega que normalmente comenta en las clasulas o el presupuesto, hay unos plazos, si hacemos todo sin una ruta, sin ningún tipo de proceso, probablemente los plazos de entrega no se cumplen del proyecto. Y cuando ya hablamos de temas Wi-Fames, temas que tenemos en el esqueleto de nuestra web, ya vamos a hacer la interacción de la identidad visual, que aquí pueden pasarnos dos cosas, nos viene típico cliente que ya tiene una identidad visual, tiene un branding, no algo, no te viene también con un logo, yo tengo este logo como me lo ha hecho mi sobrino, se también pasa, o tengo un par de colores que me gustan, ya pon esto, ¿sabes?, también pasa eso. Pero si nosotros hacemos el diseño, bueno, no lo he comentado, pero hablamos de Figma, podemos hacerlo en Figma, en PetPos, en Invisión, en lo que nosotros queramos, pero el tema es controlar el tema de diseño antes del desarrollo. Porque, por ejemplo, en esta primera parte, el tema de las combinaciones tipográficas, poner y hacer esto, ya dentro de golpes, primero que va a ser bastante de jaleo, y segundo que en este tipo de herramientas, pues siempre podemos comparar las tipografías, incluso ver la que nos han dado, si realmente está funcionando, por ejemplo, cuando ya empiezan a ser tamaño muy pequeño, el H1 y el H2, el H3, tenerlo en cuenta también para toda la jerarquía que va a tener nuestra web. Y aquí hablamos de tipografía y también vamos con los colores, el tema de los colores es súper importante. Aquí, como veis, opongo dos ejemplos de, por ejemplo, me dan esta paleta de colores, de yo tengo este branding, y puedo hacer, esto serían como dos giros de la web, que es como la pantalla principal, lo que vemos, al entrar en una web, te puede quedar como el primero o te puede quedar como el segundo, pero no vamos probando directamente esto en la web desarrollada, sino que tú coges encima, o cualquier herramienta, duplicas y vas probando, vas viendo cómo quedan esos colores, y aquí os recomiendo, si queréis saber por qué funciona el segundo y el primero no está funcionando, es porque estamos aplicando una red de diseño que ya la comente en la charla de Pontevedra, que es la de 60, 30, 10, 60% el uso del color dominante, 30% los secundarios, y el 10, el de énfasis o el de acento. Vale, así os va a funcionar bastante guay. Y esto pues, por ejemplo, lo que comentaba, esto nos va a costar mucho más hacerlo en desarrollo que haciéndolo en Figma, ¿no? Diseño de Wissilimites, lo quería llamar así porque lo podía haber dicho en muchas formas, pero bueno, para que nos entendamos, cuando pasamos por un proceso creativo, a veces, y bueno, a veces no, muchas veces pasa que si empezamos ya utilizando X herramienta o si yo, por ejemplo, no tengo X conocimientos de CSS, por por ejemplo, puede que nos limite un poco eso a hacer luego el diseño de nuestras webs. Ya sea que nos pase que hacemos webs y nos quedan todas muy igualitas o no tienen personalidad o no estamos acalzando eso que queremos conseguir, ¿no? Y aquí, por ejemplo, bueno, aquí os enseño un sistema de diseño que hice para un proyecto de Santi, está por ahí. Muy chulo, que bueno, hicimos pues, empezamos con el tema de las tipografías, ¿no? Trabajamos el browning, los colores, también los conceptos, ¿no? Porque aquí queríamos lograr algo futurista, dar mode, que fuera como más de velo, pero más ese estilo, ¿no? Y por ejemplo, aquí hay unos botones que bueno, no sé si se ve lo veis muy bien, pero que tienen un bordecito ahí un poco como comido. Yo no tenía del todo claro cómo hacer eso en CSS. Luego vi que era un clip pad, investigando un poquito lo podemos ver. Pero si yo directamente no me planteo, no hago unas creatividades o no busco referencias, no hago un research que es algo superpotente que podemos también hacer en Figma, ¿no? O sea, hacemos capturas, busco referencias, esto me gusta total. Y luego vamos como alimentando esa creatividad también, ¿no? Por eso, el diseño de Wishing Limites. Y aquí ya estamos hablando de sistema de diseño que nos lleva al siguiente punto, que es visualizar el diseño en un único golpe de vista. Esto es superimportante porque aquí ya empezamos a trabajar pues con componentes, con todo el sistema de diseño que hemos creado, que luego tendremos que utilizar. Si luego, por ejemplo, yo veo todo esto, aquí una cosa muy importante es que ya puedo empezar a identificar problemas. De si por ejemplo, en alguna página me dice el cliente no quiero que quede muy oscura, oscura en el sentido de que quiero que haya más sesiones claras, que oscuras en este caso el azul, ¿no? O por ejemplo, hay poco contraste, no que Vicente seguramente también mira, hay algo, de que el tema del footer, dice no, pero si ponemos estas bolas también en el footer, estos degradados, es como, también nos sirve enseñar y que podamos ver y que el cliente también puede mostrarle cómo queda, porque así nos sirve para defender esta propuesta, las propuestas que nosotros hacemos al cliente, porque puede que nos pase porque le enseñemos una y le encante, pero puede que no sea el caso, ya que realizar cambios, incluso defender algún término, como por ejemplo el tema del footer, pues con footer oscuro, con letra blanca, pues se va a contestar mucho mejor, que es el que tiene bolitas y cosas así. El feedback preventivo, ahí veis algunos comentarios que nos pueden decir los clientes, ¿no? Hace luego más grande, que sea como Facebook, Amazon y elegante como Apple, no sé, pero que a nadie le hayan pedido eso, o por ejemplo que nos digan, podemos ver cómo queda este diseño en Light Mode y Dark Mode, claro, aquí veis el ejemplo en Light Mode y Dark Mode, ese es el mismo proyecto de antes, y aquí viéndolo, pues podemos igualar, iniciar problemas, hacer comparaciones, no las propuestas incluso, ya sea porque a nosotros no se ocurre, como comentado antes, hacemos una primera propuesta y le encanta el cliente y te coge eso, es como, vale, no he tenido que trabajar mucho, lo primero que he hecho lo ha molado, lo ha gustado, super guay, pero puede que no, puede que la primera propuesta que tú le desacriente, te diga, oye, pues esto lo me convence, ahora vamos a cambiar esto, vamos a hacer lo otro, también tenemos un control sobre los revisiones que hemos ido haciendo, cuántas versiones le hemos hecho a partir de la primera que nosotros hemos entregado, para tener esto en cuenta y no trabajar gratis, como quien dice, vale, super importante, y aquí claro, bueno, vuelvo un momentito para atrás, si nosotros tuvieramos que hacer esto, desarrollándolo, pues una edos, se me ocurre, o hacemos, duplicamos la página en WordPress y cambiamos todo ahí, dentro de los colores y demás, o ya nos montamos otro WordPress y hacemos esto en otra web, pero esto ya sería una locura, y una muy mala práctica, aquí lo comento en este punto, optimizamos y ahorramos tiempo y esfuerzo, yo creo que todo el mundo quiere, cuando hace cualquier proyecto, pues ahorrarse tiempo y ahorrarse esfuerzo, ¿no? Imaginemos que tenemos este proyecto, que es así, bueno, muy creativo, ¿no? Tenemos, por ejemplo, una imagen, el tema de las imágenes, vamos a empezar por partes, si nosotros ya sabemos qué lugar van a ocupar esas imágenes, el tío de qué ancho, qué tamaño van a tener, qué ancho van a tener, yo las meteré en WordPress con ese ancho, con esa, según lo que necesite, ¿no? En este caso, por ejemplo, tenemos pues una imagen más grande, que está como en la parte principal, imágenes medianas, imágenes más pequeñitas, esto sería también todo un jaleo, si tuvieramos que hacer directamente, porque ya solo, por ejemplo, para crear ese grid, para crear ese grid ahí, tendríamos que tener entradas de WordPress, entonces ya estamos hablando de, haces una entrada, aunque sea falsa, pero le metes lo en Ipsun, o le dices, luego el cliente mete el contenido, y al mejor nunca lo mete, y luego te quedan ahí, entradas subidas con lo en Ipsun, cosas que, bueno, yo creo, el mapa es a mí, le habrá pasado cualquiera, y es bastante tedioso, ¿no? El tema de duplicar contenido, que es lo que estoy diciendo, o sea, entradas, o duplicar páginas, no es la primera vez que he visto, por ejemplo, Home 2, que me meto en un WordPress, y veo Home 1, bueno, la principal, Home 2, ¿quiénes somos? ¿quiénes somos versión 2? Contacto, con tanto de, o sea, no sé por qué hay tantas páginas, hay metidas, pero es un poco rollo, ¿no? Porque aparte, luego te vendrá el tipo de SEO, te irá, oye, ¿que hay indexada una Home 2? ¿Qué es esto? Porque claro, a Google la ha gustado, a lo mejor si te ha olvidado a ti, darle encima, no indieses, es que hay solo un montón de cosas que tienes que tener en cuenta, y es como, no, no usas Wordpress para, para hacer pruebas y cosas. Usa Wordpress ya cuando tengas el, el diseño definitivo, y vayas ahí a hacer el desarrollo de una, ¿no? Y lo mismo pasa con las tipografías, que de hecho esa captura es de hace poquísimo, de Xavi, que me está viendo en streaming, me subió el pobre, siete tipografías y de siete pues utilizó una. Seguimos alimentando los Wordpress de archivos que luego no vamos a utilizar, que luego lo podemos borrar y toda la historia, pero no es buena práctica. Lo mismo pasa con los plugins o, o desarrollos a medida, porque a lo mejor no usamos plugins, yo es que no programo, pero también nos puede pasar una web de eventos, por ejemplo, pues voy a meterle, ay, mira, he visto este plugin que me gusta de eventos, lo meto. Ay, no, en realidad es que también necesito eventos y conciertos, pues no, entonces lo hago con ACF, y meto otro plugin, y luego creo más cpt, es una locura. No hay que hacer esto, esto olvidaros, ¿vale? Y bueno, de aquí vamos a algo que es diferente, pero que también es muy, muy importante, el tema del, del diseño Mobile First. Aquí yo por ejemplo, en este proyecto, tenía en cuenta primero, que para quien no lo sepa, lo explico, Mobile First es un sistema de desarrollo y diseño web, en el que se prioriza, cómo se ven en dispositivos móviles, antes que en escritorio. Y esto es, se estaba moviendo mucho, porque básicamente el, entre el 60 y el 70% de las webs, creo que a nivel mundial estadística, están en versión, o sea, se navegan en versión mobile. Entonces, por ejemplo, para hacer este diseño en concreto, yo tenía muy en cuenta, porque yo ya empezaba a ver un montón de cosas, de qué añadir esto y el título, y luego voy a poner dos botones, si no sé qué, lo quiero amarillo, no, con todo el feedback que me da el cliente, y luego, pues claro, yo tenía muy en cuenta cómo se ve esto en mobile, porque ya estaba viendo que había muchas cosas, no podemos añadir más cosas. Entonces, aquí lo hacemos al revés. Tenemos en cuenta, primero, cómo se ve en mobile, cómo se va a ver esto en tablet, y luego, así es como lo dejamos en escritorio. Igual, este formulario, por ejemplo, tema de cambios y modificaciones, ágiles, tratamos mucho menos en cualquier herramienta de diseño, mover un borde de un lado a otro lado, cambiar los componentes, ¿no?, o se mueven los de sitio, que hacerlo eso, depende de cómo agarramos la web, si lo hacemos con un maquetador, lo hacemos a pelo en CSS, o HTML, cambiar eso sería una locura. Porque, por ejemplo, en este caso, esta fue como una idea también de Santi, un poco loca, que era un formulario tipo carta. Hola, mi nombre es Pepito, necesito como ayudes con mí tal, y era como así para rellenar, ¿no? Un poquito más creativo. Pero luego el formulario queda así. O sea, como veis, hay un cambio bastante grande, si yo no tengo todo esto en cuenta, y me pongo a hacerlo directamente, sin saber, por ejemplo, cómo se modifica el texto, ¿no?, el texto se han añadido más cosas, hay que meterle el checkbox, para ser legalfín, ¿no?, y luego también, por ejemplo, quién es dueño del reposal de los datos. Una serie de cosas que se pueden dar después en desarrollo, pero todo lo que es la parte del diseño, si yo tengo que maquetar eso, directamente, en CSS, es una locura, porque ya tengo que estar pensando en el ancho de los impuls, jugando con el flashbox, es una locura. Y, bueno, claro, cuando nos piden cosas así, es como funcionalidades, pero pueden que nos pidan en las web funcionalidades en el diseño, que son más avanzadas. Aquí hablamos también de que podemos presentar funcionalidades rápidamente, sin que estén desarrolladas. Como, por ejemplo, en esta imagen que veis, tengo, por ejemplo, una web, que tiene un grid de lo que sea, en este caso, este cursos, que tengo unos filtros ahí. Podemos tener, pues, no filtros, los cursos por precio, por categoría, imagínate que el cliente te dice, el etiqueta y el buscador, me lo voy a cargar, no lo quiero. Pues, hacemos cuando tengamos que desarrollar la web, vamos a hacer la web con solamente la funcionalidades que nos hayan aprobado. No vamos a hacer el trabajo doble, para que luego no lo tire nada bajo lo que sea, y pues no lo echen para atrás, ¿no? Y también de la mano de esto, pues, todo lo que son las pruebas y el teste UX. Aquí, por ejemplo, si nos pasa en el que nosotros no somos los diseñadores y el diseño nos lo dan, ya sea porque nos lo da otro diseñador, alguien que está involucrado en el proyecto, o el cliente que te da, a veces, te dice, toma, hazme este diseño. Pues lo vemos, lo analizamos, y aquí, por ejemplo, esto es una web de viajes, pero yo no veo el botón de reservar viaje, que sería como la parte más importante, ¿no? El CTA de este single viaje. O, por ejemplo, aquí, el tema del van de las cookies, también instalamos un plugin para el tema de las cookies y luego gestionarlas. Pero, si nosotros podemos modificar el estilo, porque, a lo mejor, nos interesa que, teniendo en cuenta la chala que hemos visto de Marina, el botón de aceptar no tenemos por que darle énfasis. Aparte, el blanco yo no lo leo muy bien, por encima de ese azulcián, ¿no? Se lee muy mal. Y aparte, el orden tampoco tiene sentido. Yo creo que tendría que tener sentido, pues, ver preferencias de negar y aceptar el último para que así la gente, cuando leemos de izquierda a derecha, pues, vamos leyendo y te quedas, así que te quedan aceptas y, si no, pues, ya cambia lo que sea. Pero todo lo que es el tema de VX, lo podemos saber con la enteración, ¿no? Tema de prototipo interactivo. Aquí me va a tocar hacer un poco así, para que lo veáis. Sí, porque era un poderice, pero bueno, entonces lo he hecho de estático. Pero para que os imaginéis, esto era una animación igual de la web de esa amarilla que teníamos que hacer antes. Y, claro, si, por ejemplo, te piden cosas como, necesito meter aquí una animación, necesito, no sé, una funcionalidad, en FIC malo podemos presentar. Si no lo estás visualizando con el cliente, o si el cliente no ve que va a pasar ahí, o peor aún, si la animación no la vas a hacer tú, que si lo haces tú en todo y llevas todo el proyecto, genial, pero puede que le necesites explicar a otra persona, o, mira, esta pieza va a bajar aquí, deja la estique arriba, tal. Y entonces, pues, ¿cómo se lo muestras? El tema de prototipado e interactivo también nos viene bien. Y, sobre todo, el último y más importante punto, yo creo, el tema de facilitar al trabajo colaborativo. Aquí ya hablábamos de que puede que haya más de una persona involucrada en el proyecto. Si nosotros, por ejemplo, en este proyecto, tenemos que hablar con varias personas, lo ideal sería que haya una comunicación efectiva entre todos, ya sea entre tú y el cliente, entre tú y las personas que están involucradas en el proyecto, o los mismos miembros que pertenecen a un departamento de una agencia, el Departamento Oseo, con el Departamento de Web, con todos los que estéis involucrados. Y aquí, por ejemplo, os voy a comentar también un caso real que me pasó, donde voy a hablar de un punto que es súper importante, que es el tema del feedback gradual. Hemos hablado del feedback preventivo, que es como, vale, me das tu feedback al principio del proceso de las bases del proyecto, ¿no? Para yo tenerlo en cuenta y realizando cambios. Pero, por ejemplo, aquí me pasó que vino un cliente y, pues, se le hizo un diseño web, en base a qué, en base a su identidad corporativa. Luego se hizo un segundo diseño, o sea, como una segunda propuesta, porque la primera no le gustó, y luego el desarrollo que le puse ahí tampoco se llegó a hacer. ¿Y qué pasó aquí? Pues os cuento. El cliente, básicamente, lo que le había pasado es que la identidad corporativa, en el último momento, cuando ya íbamos prácticamente a instalar golpes y todo, a montar este y demás, pues, me dice que no le gusta su identidad corporativa. La que la odiaba, de hecho, o sea, no le gustaba los colores, nada. El logo, que no se sentía identificado con el logo, me decía. Y yo, vale, yo me quedo así, ¿sabes? Vale, no te gusta, pero entonces, ¿qué hacemos? O sea, la voy, pero claro, ahora ya entendí. Si veis el ejemplo, claro, le quito los colores corporativos, y ya le gustó el diseño, no le gustó bastante más. Y yo me quedé con eso. Y fue como, pff, qué desastre, y ahora yo qué hago? Me he quedado con esto a medias, con un proyecto que va a hacer. Pues, realmente, nada. No pasó nada. ¿Por qué? Porque aquí, bueno, era fue de un proyecto hace tiempo, pero aquí ya estaba trabajando con aprobados parciales. Aquí os comento, bueno, os sugiero y os aconsejo humilde, que tanto en las cláusulas, como lo hagáis, en las cláusulas del presupuesto, en el contrato que hagáis con el cliente, o lo que sea, o que este, aunque quede por escrito, pero que os hagan aprobados parciales. Esto es súper importante. Aquí, como ya hablábamos de dividir el proceso por fases, pues hacemos un WIFE, lo vemos con el cliente, tenemos en cuenta la jerarquía del contenido, todo, lo aprueban. Vamos con el prototipo, hacemos una primera versión, no le gusta, hacemos una segunda, la prueba, perfecto. Y el desarrollo, pues, si no se llega a hacer, pues nos quedamos ahí, nos curamos en salud, como quien dice, ¿no? Y también pues que no lo dejé pagado el cliente hasta ahí, que no trabajamos gratis, por nadie nos ha aprobados parciales. Entonces, bueno, pues no hubo problema. Yo dije, bueno, pues hasta aquí ha llegado nuestra relación profesional y ya no, ya está, ¿no? La web pues ya, si te la quieres hacer el año que viene, pues ya me dices. Y nada, simplemente para resumir, puntos importantes que estoy yo. Me gusta mi recalcar para que os quedéis con la información que tiene valor. Crear Wiframes, hemos hablado de hacer diseños, bueno, que no tenemos límite en los diseños y con más personalidad, la estructura del contenido estratégica, podemos optimizar y ahorrar no mucho tiempo y esfuerzo. Garantizamos una web responsibte del principio, porque tenemos en cuenta todo lo que hemos dicho sobre el Mobile First, presentamos funcionalidades rápidamente sin tener que matarnos ahí a desarrollarlo. Y lo súper importante, hay una comunicación efectiva entre todos y te aprueban los proyectos por fases. Así que bueno, concluyendo, con todos estos puntos que he dicho, vamos a tener un trabajo pues más profesional y por ende vamos a brindar un mejor servicio. Y esto nos va a venir genial, porque tanto nosotros vamos a aumentar, va a aumentar nuestro valor como profesionales, pero también pueden aumentar nuestros presupuestos. Así que me presento yo, que soy Maelyn García, soy diseñadora webfilas y embajadora de marca de Rayola Negos, a quienes agradezco muchísimo el apoyo para venir aquí, que yo soy de Madrid como hubiera dicho Gustavo. Y ahí tenéis un cuervo donde he hecho una paginilla con todos mis links y todas mis cosas para no explayarme mucho. Y muchísimas gracias a la organización de Valencia. Y bueno, sé si queda tiempo para dudas, preguntas. A ver, Agua, que me quedo así con la boca así. Hola, yo tengo muchas preguntas. Yo soy Taísa, soy diseñadora web y el tema de firma no lo he tocado aún y es una cosa que me llama mucho la atención. Entonces la primera pregunta, ¿cómo empiezo con firma si quiero empezar a trastear por tu cuenta? Hace un curso que recomiendas así para... Yo te recomiendo, mira, hay un curso con el que yo creo que fue con el que empecé, que es que no me acuerdo, me lo preguntaron ayer. Y tampoco me acuerdo. No me acuerdo que tenías un youtuber que lo hacía, pero es aprende firma en 20 minutos. Es un curso de, se quiere decir, es como muy, ¿sabes? 20 minutos para aprender, se me janté herramienta, pero va a venir muy bien porque en vez de empezar desde cero, sin saber nada y saber cómo montarlo, dura 20 minutos y te enseña como un poquito de todo, pero para hacerte familia y hacerte con la interfaz y tal, buscálo en YouTube, creo que el primero que sale si buscas aprender firma en 20 minutos y te va a venir muy bien. Luego ya me metería a hacer un curso más avanzado, pero empezaría por ahí. Vale, el wireframe que has mostrado al principio es también con firma, ¿entiendo? O sea, ¿lo armas con firma? O sea, el perate que lo pongo. Sí, eso me ha llamado... El wireframe, esto, ¿no? No, ese no, el otro, el otro. Ah, este, sí, eso está hecho en firma. O sea, eso ya lo haces en firma y ya sobre eso ya sigues metiéndole diseño, entiendo, capas de... No, incluso yo, por ejemplo, algo que me hago también que me gusta es dejarme el wireframe para ver cómo era el original y me lo duplico, o sea, le das a copiar, pegarlo, pegarlo y te lo tienes... Obviamente, esto se hace con los textos. Es un imprescindible que está en los textos, porque esa es una de las peleas muy habituales que se pretendan que se hagan los diseños, o incluso cuando tienen diseñador gráfico aparte del desarrollador web o diseñador web, quieren el diseño sin tener los textos, no imprescindible tener los textos para hacer esto. Sí, sí, sí. Y luego, creo que lo que no hay es forma de luego, cuando ya tienes todo montadito, no hay forma de hacer traspasos directos. Todavía no, todavía no, todavía no, pero... A ver, no, no, a ver, te voy a contar. Por ejemplo, hacia Elementor, que yo es una herramienta con la mayoría de mis sabajos, hay una herramienta, un plugin o sea, o que era, que se llama de Figma, o Figma Elementor, pero yo no lo recomiendo. Quiere decir, o sea, ya que estamos hablando de... Oye, aportamos valor, nuestro flojo de trabajo es muy guay, aumentamos el presupuesto, yo creo que dedicar ese tiempo que para eso lo hacemos, ¿no? Para hacer la web bien y tal, porque sabes qué pasa, que con esas implementaciones rápidas, primero, que no llegan del todo a como es el diseño, luego hay un montón de cosas que dependen, pues eso de funcionalidades o CSS que tienes que meter adicionalmente o cosas así, y segundo, que no queda en responsive, luego eso queda, que a saber cómo queda eso. ¿Tiene algún tipo, por ejemplo, de ayuda? Por ejemplo, lo que has dicho antes de la cajita, que le quieres quitar un borde y tal, para luego eso decirte como... Sí, a ver, luego uno de Figma, que es lo que digo, yo uso Figma porque es la herramienta que uso en mi día a día, pero hay un millón más, pero la mayoría de herramientas de estas que te ayudan a hacer diseños web antes que el desarrollo, la mayoría tienen una parte de CSS que puedes ver, claro, que puedes ver como lo que tú has hecho a nivel editor visual, pero luego ves cómo se traduciría eso a CSS. Entonces, ahí te ayuda, es una mano. ¿Alguna pregunta más? Hola. Nada, es básicamente, bueno, es una pregunta más técnica de Figma, y es si tú estableces, por ejemplo, el tamaño de los textos, las jerarquías, los píxeles de, por ejemplo, entre una imagen y un texto, ¿qué espacio debía haber? Porque normalmente, si te pasan un PDF, no... ¿Estás como para implementarlo? Tienes que estar como a ojo. Sí, como adivinando un poco. Se me ha dado el caso, o sea, a mí me han llegado a entregar proyectos en, no sé, cosas que dices, me ha dado un PDF que no lo puedo exportar, no lo puedo ver, no lo puedo analizar, pero siempre que trabajo con herramientas de diseño que se manipula para decirlo un montón de tipografías y tal, yo lo hago a manera global, para que si lo cambien en un sitio o si edito este color, se cambie ahí donde lo cambio y se cambien todos los componentes de Figma que básicamente son lo que hacen esa parte, ¿no? Modificas un cambio y lo haces en el resto. Cuando me dan un diseño, pues eso, que está en un PDF o tal, es que depende, porque lo que no voy a hacer es transparar ese PDF que he mandado para hacerlo yo en Figma, para luego hacerlo en el desarrollo. Ahí me salto un poco, sí que ves un bastante más tedioso, pasar luego, por ejemplo, ese PDF a Wordpress, pues tienes que estar mirando. Creo que lo que he llegado a hacer es abrir ese PDF con Illustrator, que por lo menos, si te lo abre y te lo hace como mediodita, le puedes llegar a analizar alguna tipografía de qué tamaño tiene. Y si no lo que he hecho también, que en algún momento lo he necesitado, ese PDF se lo exporto, me lo pongo a 1440, que es como el diseño que se establece en Figma, cuando te dan cualquier diseño web, deberían dártelo en ese tamaño. Entonces, me lo escalo y entonces voy viendo, si por ejemplo hay una tipografía que ni sé qué tamaño tiene o algo que me cuesta mucho sacar, lo mido desde ahí con Figma. Vale, pues, voy a aprovechar yo también y te voy a hacer la última pregunta, ¿vale? Y es porque yo personalmente lo hago en Adobe XD y es por saber cuál es tu experiencia si recomiendas más Figma y por qué, exactamente porque yo lo he probado y yo no me hayado tanto puede que sea, para mí me parecía más complicado Figma, no sé, no sé si es opinión personal o crees que tiene más o menos el mismo tipo de funcionalidades. Yo principalmente lo recomiendo porque es gratuito, o sea, tiene una versión gratuita, tiene su versión de pago y tal, pero sobre todo por el tema de que es gratuito, que ya en tema de XD concretamente es que o lo pagas o lo pagas para usarlo, no hay como un punto medio. También está como comentaba PaintPod, que es totalmente gratuito, pero yo utilizo Figma porque a mí me he pasado al revés que a ti, o sea, yo la curva de aprendizaje, porque también he manejado aquí durante bastante tiempo, pero cuando conocí Figma, es que aprendí bastante rápido, igual no sé si fue por ver los tutoriales que como le recomiendes a ella y demás, que también puede ser, depende de lo que se forme cada uno, pero yo en mi caso la curva de aprendizaje fue muy rápida, entonces yo creo que también depende un poco de gustos, también porque a veces aunque manejes una herramienta, puedes usar, el tema es, yo creo que lo más importante era el concepto de hacer el diseño antes de hacer el desarrollo, y luego la herramienta de diseño que usas cada uno que utilice la que se sienta más cómodo. Vale, perfecto, pues muchísimas gracias y muchas gracias por parte de la organización, ha sido una charla súper interesante y te queríamos dar un regalito, así que alguien lo tienes, esto es para ti. Y muchas gracias. Muchas gracias.