 Bueno, muchas gracias por venir a la charla, con todos nosotros, Hernández Lujano, diseñadora visual y iteración. Seguramente, si habéis seguido sus pasos, sabéis que es una experta en tipografía muy conocida en la Comunidad World presentó a España. Hace un año se recorrió toda la voluntad de España dando una charla, lo cual tiene una experiencia muy amplia. Y además es una persona que colabora mucho con la comunidad, no solamente comparte el conocimiento, recientemente ha publicado con el equipo de Movomo un plugin en el Repositorio Oficial de Warpés, que está disponible para todos nosotros sobre su espejeridad, precisamente, de hipografías y fuentes variables, en este caso. Sino que además, decía, lidera la mitad de Torrelojones, y colabora además en la mitad de Collado de Iamba con Fernando Tellado, con lo cual, además de compartir conocimiento, comparte precisamente esa actividad y esa difusión de la palabra de Warpés, así que vamos a recibirle con un fuerte aplauso, a la final. Bueno, Pablo, muchísimas gracias. Para mí ha sido un honor que me presentaras y que me resumieras ya la primera diapositiva de la charla, que no sé por qué se me ha quedado ahí marcado. Sí, bueno, más que nada, esta diapositiva, efectivamente, es para presumir de chapitas y animaros a vosotros a que también las consigáis, contribuyendo al proyecto Warpés, pues, os van apareciendo en vuestro perfil de Warpés.drg, y es una experiencia muy gratificante y os invito a que lo hagáis. Y nada, vamos a hablar de diseño, como es tarde y estamos todos muy cansados, os voy a pedir colaboración, si me queréis interrumpir y preguntar, nos cortéis. También esta charla la he elaborado mediante, bueno, he hecho una investigación con amigos de la comunidad, con developers, y les he preguntado qué era lo más difícil, o sea, que me contaran anécdotas, de cosas difíciles que habían tenido que pasar cuando recibían diseños de diseñadores, ¿vale? Entonces, vosotros, alguno de vosotros es desarrollador, podéis levantar la mano? Bastantes diseñadores, levanta la mano, por favor, también bastantes, un poquito menos. Implementadores de Warpés, usuarios de Warpés, el resto, vale, fenomenal. De los que habéis levantado la mano, que eráis usuarios o implementadores, y no diseñadores, hacéis página web, creáis página web, pero no os habéis atrevido a decir que sos diseñadores, vale. Bien, bien, bueno, es algo interesante, porque hacemos esa diferencia, entre un implementador o alguien que ha hecho una web, pero que no se considera diseñador, aunque probablemente en ese proceso haya diseñado, ¿no? Vale, a la hora de crear una web, en ese proceso de creación de una web puede haber distintos caminos, función de lo que estamos haciendo realmente y cuáles son nuestros objetivos, cuando yo hago una web para mis clientes, yo tengo un estudio y diseño y me dedico, entre otras cosas, a hacer webs para clientes, yo concretamente suelo seguir este camino, a veces lo hago algunas de las partes de este camino, las hago sola y otras las hago acompañada, por ejemplo, la fase de maquetación y desarrollo, la mayoría de las veces, sobre todo desarrollo, cuento con colaboradores para hacerlo, pero siempre superviso todo el proceso, incluso hasta el final en el mantenimiento, ¿no? Vamos a ver un poco todas las partes del proceso de creación de la web, ¿no? Digo que muchas veces se sigue todo este gait general y otras no, porque a veces, por ejemplo, diseñamos un tema para WordPress y no tenemos contenidos, por ejemplo, diseñamos un tema, ya sea un y-propósito o un multipropósito, pero sin contenidos, ¿no? Y muchas veces usamos, pues, Loren Ipsun, a mí no me gusta nada usar Loren Ipsun, si no tengo el contenido, pues, al menos escribo alguna frase que podría encajar, para poder diseñar con casos reales, porque el diseño siempre es contexto, no podemos diseñarse en un contexto. Si no tenemos el contexto, pues, por lo menos tenemos que intentar adivinar cuál es, ¿no? Entonces, en la fase de planificación es una fase en la que el cliente nos tiene que responder a un montón de preguntas, ¿no? O las preguntas se las hacemos al cliente directamente o investigamos, ¿no? Investigamos el mercado, investigamos las tendencias, investigamos qué han hecho otros. Cuando nos dedicamos a hacer webs, hay que ver muchas webs. No vale ponernos a hacer una web, intentar ser creativos, sin haber visto todas las webs que podamos de la competencia, del mercado, webs que se parezcan, que se puedan parecer, webs que no les gusten a nuestros clientes, webs que les gusten a nuestros clientes. Toda esto es una fase de planificación y de investigación que yo siempre hago, ¿no? Después, la fase de contenidos. Voy a ir un poco primero rápido y luego voy a ir pasando más despacio, ¿vale? Y si tenés alguna duda, como decía, me podéis interrumpir. En la fase de contenidos, podemos tener el contenido que nos lo den o tenemos que pedirle a nuestro usuario el contenido, ¿no? Dependiendo del nivel que tenga el propio cliente, nos va a entregar el contenido más o menos elaborado. Nosotros podemos hacer como diseñadores un diseño del contenido también, ¿no? Y proponerle al cliente que lo haga, ¿no? Por ejemplo, cuando yo digo, o sea, por ejemplo, voy a detenerme un poco más en esta parte, ¿no? En la parte de investigación. Cuando ya tenemos la investigación y nos ponemos a planificar, lo que tenemos que ir elaborando es una guía, ¿no? Tenemos que ir aterrizando todos los conceptos que tengamos claros y ir elaborando guías y referencias, ¿no? Que los van a servir para luego en la fase de diseño, ¿no? Entonces, como decía, recopilamos los contenidos si los hay. En ocasión, eso se habrá pasado, que el cliente no tiene los contenidos. Tenemos que ayudarle a que los elabore. Y muchas veces, pues... Perdóname porque se me desaltó a cielo. No sé qué iba a decir. Voy a pasar. Bueno, vamos a empezar ya la parte más en la que no os dormís, ¿vale? Por ejemplo, la fase de las metáforas, ¿no? Hay veces en las que yo he visto que hay compañeros que empiezan a hacer una web sin haber hecho un boceto previo. Bueno, es que lo de los bocetos es para cuando tienes un maquetador o un desarrollador que te va a hacer la web. Tú primero haces el boceto del diseño y cuando se lo vas a entregar es cuando haces el boceto, pero ahora que voy a hacer yo misma la web con Divi o con Elementor o con cualquier otro maquetador o la voy a maquetar. Como lo voy a hacer yo mismo, pues directamente me pongo aquí a construir, cojo el slider, le pongo imágenes, le pongo otra, apruebo, es ayuda y error, no me funciona. Voy por la mitad de la landing page y cuando llego al final empiezo a cambiar la cabecera porque el diseño ha ido por otro lado. Por eso yo digo que siempre hay que bocetar, aunque nosotros vayamos a hacer la web, porque bocetar es como hacer la lista de la compra. Nosotros cuando vamos al supermercado, cuando no llevamos lista, pues vamos pasando por los pasillos y vamos cogiendo, sobre todo si tenemos hambre, pues vamos cogiendo, cogiendo, cogiendo cosas. Que luego a lo mejor llegamos a la caja y dimos, ¿yo para qué cogido esto? Porque hoy no tenemos que devolver porque no llevamos la lista. Si nos teníamos a la lista de la compra, vamos a hacer una compra mucho mejor, no nos vamos a gastar tanto dinero y vamos a comprar algo que responde a las necesidades que teníamos. No responde a impulsos o deseos que luego nos van a ser y no van a responder con lo que queremos. Con lo cual, recordad que siempre hay que bocetar. Incluso bocetar primero a lápiz sin encender el ordenador y tener claro luego, cada vez que vayamos haciendo algo, no diseñamos, o sea, en el momento que ya vamos a utilizar el programa de diseño, no diseñamos, hemos diseñado antes en la fase de boceto con papel y cada vez que vamos pasando a bocetos de mayor fidelidad, ya no estamos inventando, no estamos imaginando, sino que estamos simplemente siguiendo la lista de la compra que nos hemos hecho antes, el boceto de menor fidelidad. Cuando he preguntado, como os comentaba a estos compañeros, desarrolladores especializados en WordPress, qué era lo más complicado, los problemas más grandes que habían tenido, cuando habían desarrollado una web, todos coincidían en que el diseñador muchas veces no le daban todos los tamaños que tenían que desarrollar la web, le daban a lo mejor simplemente una versión escritorio o una versión móvil. Bueno, yo te doy esta versión y luego tuve el responsive, lo desarrollas, lo colocas en columna, lo colocas una cosa debajo de la otra, y ya está. Claro, esto no es así y tenemos que tenerlo siempre en mente, que tenemos que saber que la web siempre se va a ver en muchos tamaños de pantalla diferentes y que tenemos que enseñarlos todos. Incluso muchas veces hay situaciones en las que nosotros planteamos a lo mejor sólo tres diseños y tenemos que pensar que la web puede ser muy, muy, muy grande, puede ser mucho más grande que 1.600 píxeles o algo así. Y siempre tenemos que decir al desarrollador cómo se va a ir comportando en un tamaño infinitamente grande, que es algo que tampoco, que no sé, pero se tiene en cuenta. Y también por otro lado, saber que la web es fluida y que no podemos hacer muchas veces, a veces en algunos casos sí, pero en la mayoría a veces no se puede hacer píxeles perfectos. Y tenemos que hacerlo todo, o sea, hacemos más apuestas en ciertas, que certezas. Porque muchas veces todo tiene que ser proporcional. No sabemos exactamente cuánto van a medir las cosas, sino que van a ser en proporción con otros elementos. Domine las herramientas de tu profesión. Aquí ya no solo las herramientas, sino cómo funciona internet en general. Tenemos que saberlo, si cuando diseñamos para web, pues tenemos que saber cómo funciona. Cuando me refiere a las herramientas, sobre todo, me acuerdo mucho de Photoshop. Photoshop es un programa para retoque fotográfico. Es más un software para fotógrafos que para diseñadores. Sobre todo, a día de hoy. A día de hoy, sólo abrimos Photoshop para hacer montajes fotográficos o cosas así más complicadas de luz, color, etcétera. Pero no hacemos para diseñar un boceto. Porque para eso tenemos otras herramientas mucho más especializadas en diseño web, Figma, Adobe XD, Sketch, todo esto, ¿no? ¿Alguno de vosotros utiliza todavía fotosos para diseñar? Os va a dar vergüenza, le vas a levantar la mano. Muy bien, valiente. Pues, cuando empiezas a usar, no eres la única, lo más que tú te has atrevido. Cuando empiezas a diseñar con Figma, por ejemplo, que es la que utilizo yo, verás que tiene muchísimas más posibilidades y la vas a poder sacar muchísimo más partido. Comparte un lenguaje común. Cuando estamos trabajando en Internet y cada uno tenemos nuestro perfil, tenemos que tener claro cómo se llaman las cosas, tenemos que conocer los patrones de diseño. Todos tenemos que saber qué es un acordeón, qué es un menú desplegable, qué es un botón, qué es un enlace, qué es un slider, en qué se diferencia de un carrusel, qué es una miniatura, en qué casos tenemos que usarlo dependiendo del contexto. En fin, todo esto para que cuando hablemos con otra persona, con el desarrollador, sepamos exactamente a lo que nos referimos, incluso educar a los clientes. Cuando dicen, hazme una nueva pestaña en la que ponga quiénes somos, le tenemos que explicar que no se llama pestaña, que se llama página, y que poco a poco podamos ir entendiendo que nos caga el mejor. Modularización, esto es importante y es algo que tenemos que también tener muy en cuenta como diseñadores. Los programadores lo tienen muy claro y nosotros a veces no lo tenemos tan claro. Ocurre muchas veces, me cuentan, mis compañeros developers, que hay diseñadores que les entregan diseños que tienen elementos o componentes que son muy parecidos, pero cambia solo una pequeña cosa. Ellos imaginan o piensan que no deberían ser distintos, que en realidad es el mismo componente, pero que el diseñador no ha sido consistente. Al modularizar y herramientas como Figma te lo permiten al poder hacer un máster y hacer instancias de ese máster. Te permiten no cometer ese tipo de errores. Cuando son elementos que realmente son el mismo y que tú podrías reutilizar componentes reutilizables, pero que si utilizas Photoshop, pues ahí se te hace todo un lío y hay cambios en paddings, en margins, incluso en colores, también me han dicho que pasa, que entregan 18 tipos de rojo y la realidad podría ser el mismo rojo corporativo o santi, te rías, te ha pasado. Pues esto se minimiza cuando utilizamos ese tipo de herramientas específicas para ello. No hagas diseñar al desarrollador. Las webs, estas con webs podrían ser mucho más bonitas si no las tuviera que diseñar el programador. Es verdad que diseñar no es hacer las cosas bonitas, no me malinterpretéis o no solo, pero todo es verdad que el desarrollador no tiene por qué saber diseñar, aunque sí que creo que el diseñador, cuando diseña para web, sí que tiene que saber cómo funciona la web, HTML, CSS, incluso no viene mal, nunca, saber un poco de JavaScript. Tenemos que diseñar todo. Aparte de diseñar los tamaños responsive, tenemos que diseñar los correos que llegan si estamos haciendo un correo electrónico, cómo son esos correos, los estados de los botones. Tenemos que diseñar los formularios. Nada se diseña solo. Si al maquetador no le decimos cómo lo tiene que diseñar, pues se lo va a inventar y probablemente no lo haga pensando en lo que pensamos los diseñadores, que es un sistema de diseño, una guía de estilo y todo ese trabajo de investigación que hemos hecho previamente. Sobre todo conoce WordPress. Muchas veces decimos diseñador, pero luego el desarrollador nos pilla. Todo WordPress no sabe mucho. Sabrás de Internet, habrás hecho muchas webs, pero es que WordPress es especial, tiene muchas particularidades, si le puedes sacar mucho partido, si conocemos cómo es WordPress. Por ejemplo, la jerarquía de plantillas. Nosotros podemos diseñar, hacer un diseño para una plantilla diferente según el tipo de autor que todas las plantillas o todos los posts de este autor tengan este diseño diferente. Si no conocemos WordPress no le vamos a sacar ese partido. La jerarquía de plantillas. Yo soy diseñador, no tengo que saber cómo funcionan las plantillas de WordPress, porque eso es PHP. No tienes que saber cómo sucede la magia probablemente, aunque es muy interesante conocerlo, pero sí tienes que saberte de memoria todas las soluciones que te ofrece todas las plantillas. ¿Qué plantillas hay? Eso no es programación, eso es WordPress. Y tenemos que darle estilos a todo eso, o podemos aprovecharlo para cada etiqueta diferente, para cada categoría diferente conocer WordPress. También, sobre todo hoy más que nunca, conocer el editor de bloques. Cuando el usuario se pone a escribir, el editor se pone a escribir un artículo en la hoja de estilos le hemos tenido que dar nuestra identidad a la entidad de la web. Y tenemos que diseñar cómo va a ser todas las etiquetas que va a utilizar el usuario con Gutenberg. Ahora de repente, el editor de bloques es mejor dicho, el usuario puede haber, ya tenemos la web lanzada en producción y de repente el usuario allá de un botón y le aparece un óvalo gris y eso no va con la marca. Este diseñador no me ha dicho cómo tienen que ser los botones, que añado con el editor. Esto tenemos que saber muy bien cómo funciona Gutenberg y qué posibilidades nos da. También para diseñar plantillas que con Gutenberg el usuario pueda hacer fácilmente. Cuanto más lo conozcamos, más partido le podremos sacar la herramienta. Están muy callados. Sé que muy bien, pero quiero decir que por ejemplo a ti, Santi, que estás tan cerca y tan participativo se te ocurren algunas cosas que es que he hecho una investigación. Se te ocurra un caso en el que ocurra esto, que de repente se ve el plumero. Pasa también, estoy hablando del caso diseñador, maquetador, desarrollador pero también pasa por ejemplo cuando estamos diseñando con Divi. Todos sabemos cómo son los estilos estándar de Divi entonces cuando lo ves en una web es que poco profesional. No porque no se lo haya currado no haya trabajado en cambiarle ese color sino porque qué casualidad que el color corporativo de tu cliente sea el mismo azul que el predeterminado de Divi me parece que no has aplicado el color corporativo de tu cliente. Por eso hay que diseñar todo para sacar partida las herramientas que utilizamos y también por ser coherentes al diseñar una de las cosas más importantes es ser consistente entonces de repente que aparezca ese color azul en el botón tenemos que ser más profesionales y esto es igual, si usamos Wopper es conocer Wopper, si usamos Divi conocer Divi. A veces puede decir bueno me vale con el estándar pero la mayoría de las veces no es que imprimirle el carácter de la marca de nuestro cliente y creo que todo esto puede ser más fácil aparte de que tengamos que pues que aprendernos todo esto estudiar los patrones de diseño ver cómo se utilizan, estudiar Wopper estudiar cada actualización del editor de bloques estudiar todo esto estudiar responsive saber lo que es un REM aunque no tengamos que declararlo porque nosotros podemos diseñar pixels porque sabemos que el maquetador nunca va a declarar en pixels siempre va a declarar en unidades relativas tengamos que aprender todo esto pero sobre todo si no llegamos hasta ahí o porque todavía no nos hemos puesto o porque simplemente pues no tenemos ese conocimiento sobre todo lo que tenemos que hacer es hacer así, hablar más y mejor porque como el muñeco porque los seres humanos somos seres sociales estamos en relación con los demás y esto es muy importante la mayoría de los problemas que tenemos tanto personales como profesionales ocurren por una mala comunicación si supiéramos comunicarnos mejor no tendríamos la mayoría de los problemas por no decir ningún problema y muchas veces cuando como desarrolladores nos entregan un diseño y vemos que tenemos que desarrollar diseñar nosotros porque el diseñador no lo ha hecho por muchas veces nos ponemos a hacerlo sin coger el teléfono y preguntar sin contestar al correo esto de que coro lo quieres me has dado los estilos del H1 y de los párrafos pero me falta que me des toda la etiqueta de cómo hago una frase célebre cómo hago una plantilla de correo antes de quejarte pregúntalo y al revés cuando entrenas un diseño explícale al desarrollador esta caja de texto no puede superar los 65 caracteres entonces cuando hagas la versión escritorio yo te paso la versión móvil pero cuando hagas la versión escritorio que sepas que esto es un ancho máximo no te fijes en los márgenes fíjate en el ancho de la columna ese tipo de cosas a lo mejor tú no las puedes escribir en el boceto porque el boceto no habla pero tú si puedes redactarlo que cuando hagas esta versión le pones un ancho máximo tenemos que hablar más y comunicarnos más y explicar más las cosas que hacemos quiero terminar no sé cuánto tiempo llevo pero creo que tenemos tiempo, pues vamos a pasar a las preguntas pero quiero terminar, me vais a permitir que lea esto y lees vosotros conmigo si queréis es una cita de Carlos Longarela compañero de la comunidad vamos palabra por palabra el mito de que los diseñadores y programadores nunca nos entenderemos es eso, un mito para entendernos tenemos los sistemas de diseño, las herramientas disponibles hoy en día para convertir de Photoshop HTML y CSS y multitud de utilidades simplemente nosotros tendremos que dejar de contrarle al diseñador que tenemos que hacer un rollback sobre la branch de develop y después un push al repositorio git y que el diseñador no nos cuente el diseño necesita respirar que debemos ajustar el kernel de la fuente y que el fondo debería ser un pantón y 16 guión 1546 living coral intenso y a la vez suave y llegaremos a entendernos con un lenguaje que estará en clave para el resto de los mortales pero será común a ambos gremios me parece que resume fenomenal un saludo a Carlos no te preocupes Alba porque todas las ponencias tanto el vídeo como las presentaciones para las redes sociales fenomenal vale, vale, fenomenal esto era muchísimas gracias