 Maylen Arcía es diseñador especializada en WordPress y Elementor. Artista en constante crecimiento, le encanta compartir y ayudar en comunidades. Forma parte del equipo de Work on Madrid y de organizadores Elementor España. Aprovecha cada oportunidad para aprender de los demás y es muy fan de los gatos grandes. En esta charla, veremos distintas propuestas de diseño para potenciar la apariencia de nuestro contenido. Desde entradas de blog, archivos, secciones de la página de inicio o incluso el microcopy de pop-ups. Genial Maylen, adelante. Muchas gracias. Bueno, primero de todo, bienvenidos y bienvenidas a esta charla. Efectivamente, vamos a hablar de diseño. Obviamente, enfocamos toda esta work on the content, pero el diseño también es muy importante. Entonces, vamos a ver cómo podemos lucir nuestro contenido a través del diseño. Vamos a ponerlo en situación. Supongamos que tenemos ya nuestro contenido, ya sea en imagen, es texto. El contenido lo tenemos. Vamos a ver cómo podemos potenciarlo. Vamos con el primer ejemplo. En este ejemplo, tenemos un montón de imágenes. Son buenas imágenes, puede ser hechas por un fotógrafo o de un porfolio, o que vamos a hacer una sección en nuestra web en la que vamos a hacer una galería. El contenido está guay, son imágenes de alta calidad y se ven muy pro. ¿Qué pasa? ¿Qué se nos ocurre hacer? Pues un grid como estos, que en muchísimas webs utilizan este grid sencillo, porque es lo primero que se nos viene a la mente. Entonces, vamos a ver cómo le podemos dar una vuelta a ese tipo de grid de imágenes para que nos sea tan común. Una cosa que podemos hacer es utilizar las imágenes, la distribución de las imágenes. En este caso, estamos utilizando, digamos, dos tipos de grid, uno en el que la imagen, que están más apaisadas, aprovechamos el espacio horizontal, para cambiar un poquito y hacer que sea más dinámico y que no todas las imágenes tengan el mismo tamaño. Podemos utilizar este mismo recurso para hacerlo en vertical y destacar aquellas imágenes que verticalmente lucen mejor, o incluso mezclarlos y hacer un grid a medida con diferentes distribuciones de las imágenes. Aquí ya vemos que, en comparación con el primer ejemplo, nos queda algo mucho más distinto. Si queremos hacer algo un poquito más alternativo, algo que podemos hacer en la primera imagen, como veis, creado en este caso en Figma, pero lo podéis hacer en cualquier herramienta de diseño, básicamente un grid en el que tenemos columnas y píxeles en las que simplemente posicionamos esas imágenes para que juguemos un poco, digamos, con el espacio negativo que hay entre cada imagen. Tampoco tiene bien porque, como hemos visto en los ejemplos de antes, un grid súper apretadito. Aquí, por ejemplo, en la segunda imagen he quitado el grid para que veamos cómo queda y esto, efectivamente, si nos llevamos al tema de diseño web, podemos incluso sumarle efectos de interacción de que tengan unas pequeñas microanimaciones o que aparezcan poco a poco y jugamos y nos queda un tipo de diseño alternativo y un poco diferente. ¿Por qué? Porque, al final, si tú haces tu propio grid, también es muy difícil que la web de tu vecino tenga exactamente el mismo diseño que has creado tú. Para resumir, hemos jugado con la distribución, hemos utilizado el espacio negativo y siempre podemos crear un grid diferente. Vamos con el segundo ejemplo. Aquí, aunque está un poquito fexelado, tenemos básicamente un artículo de un blog. Suponemos que tenemos un blog que está súper bien, nos estamos currando los contenidos, estamos haciendo posts que tienen muchísimo valor, pero ¿qué pasa? Que a la hora de meternos en esa web, cuesta un poquito, el usuario le cuesta leer nuestro contenido. ¿Por qué? Para empezar, vemos que hay muchísimos, muchísimos parafos y que están, sobre todo, en muy largos, ¿vale? Aquí lo primero que vamos a hacer como primer tip es reducir el tamaño de las cajas de texto. Esto es importante. ¿Por qué? Porque nosotros estamos acostumbrados, la lectura tiene que ser como en pases, ¿no? Haces como pasos, por así decirlo, y si la persona está leyendo algo que es muy largo y encima son muchísimos parafos, pues dificultamos muchísimo la legibilidad. Entonces, simplemente reduciendo la caja, podéis tener la duda de ¿y qué tamaño de caja utilizo? Pues no hay un tamaño definido. Yo un tip que os recomiendo es, que es muy útil, a mí me lo enseñaron, es que contéis hasta la palabra número 12, sin contar las preposiciones, para que más o menos hasta la palabra 12 ya es como un buen tamaño para que no sea un contenido excesivamente largo de leer. Y así, pues, facilitamos mejor la lectura de ese podcast que tiene muy buen contenido. Aquí una segunda cosa que estamos haciendo, que es aplicable a un artículo de post o incluso a cualquier landing, es que cuando nos viene un montón de contenido que son como, por ejemplo, pasos o módulos de un curso, o algo que es como 1, 2 y 3, recordemos que podemos utilizar siempre cualquier elemento como, por ejemplo, las pestañas, los acordiones, en el caso de unas preguntas frecuentes, o con mutadores para incluso ocultar un poco de contenido, en el caso de que tengamos muchísima cantidad de contenido. Aquí el cambio que estáis viendo, que si vemos ahí arriba en la parte del título, es algo que tenemos que tener en cuenta, que se nos olvida mucho, que es la jerarquía. Para que tenga una buena observabilidad también es súper importante que la jerarquía esté bien diferenciada. ¿A qué me refiero? ¿A qué? Si, por ejemplo, ponemos una fecha o algún dato, que sea menos irrelevante, pues no puede tener un tamaño que no se acorde a lo que queremos resaltar en ese tipo de contenido. En cambio, aquí hemos simplemente hecho un poquito más grande el título y los datos que son menos irrelevantes los dejamos más pequeños. Bueno, aquí me he olvidado de un paso, pero vuelvo, es que también aquí lo que hemos hecho, aparte de resumir el contenido, en este caso hemos creado unos tabs para que sea más fácil, sobre todo acordaros en móvil, que en móvil se hacen muchísimos colpes, todavía queda muy largo todo. Hemos posicionado los elementos de una manera que tenga un poquito más de sentido. En este caso aún se nos queda la fecha y la categoría del post por ahí perdidos y los ponemos en una disposición que puede venir después del título, antes del título, pero que tenga como sentido la estructura de los elementos. Entonces, este sería el primer ejemplo que he puesto y el segundo es la imagen de cómo nos quedaría el post. Para resumir, hemos reducido el tamaño de las cajas de texto, podemos estructurar bien los elementos y sobre todo que la jerarquía esté bien diferenciada. Vamos con otro ejemplo, en este caso tenemos tres cosas. Una imagen de producto, que en este caso son unas zapatillas verde-lima, hay que crear un formulario para pedir el e-mail del usuario y un 20% de descuento, hay que añadirlo. En este caso vamos a hacer un tipo de contenido que es un CTA, un pop-up. Hacemos este diseño, que no está nada mal, pero podemos mejorarlo y vamos a ver cómo. Aquí como veis, lo primero que he hecho es cargarme esa segunda columna. ¿Por qué? Porque realmente pop-ups como este hay 8000, entonces si queremos que los ojos del usuario vayan a un junto de foco tenemos que empezar a jugar con los elementos que estamos implementando y no simplemente decirnos han dado una zapatía, pues pongo la zapatía, nos anda un descuento, pongo el descuento y un formulario, porque al final queda muy igual que cualquier otras webs y la clave es diferenciarse. Empezamos con los cambios. El 20% de descuento tiene que llamar muchísimo la atención, entonces lo pongo muchísimo más grande, bastante de hecho. Como ya ahora estamos trabajando en negro, pues tenemos que poner el texto en vez de negro, porque negro solo viene y no se lee, tiene que ser blanco y en este caso la parte de la nueva colección la dejamos en verde. Aquí podemos seguir avanzando y haciendo más cambios para mejorar. Aquí vamos a ver esto, y vamos a ir viendo qué hemos cambiado aquí. Tema de la imagen de producto. Oye, nos han dado un peneje, se puede aprovechar. Además, suponemos que la imagen tiene buena calidad. Oye, aprovechamos este recurso para hacer la imagen mucho más grande. Si nos da una imagen grande, vamos a ponerla un poquito más grande. En este caso la hemos girado un poquito para darle dinamismo, incluso sobresale de popa, pero no pasa nada. No es que quede raro, a veces podemos incluso hacer cosas que parece que iban a quedar estañas, pero oye, ya veremos que va a quedar muy bien. El formulario también lo hemos cambiado, ahí vemos que hemos hecho un diseño un poquito más moderno. Incluso le hemos quitado la palabra de enviar y la hemos sustituido por un simple icono que se entiende que ya vas a enviar el formulario simplemente para que vaya un poquito con el estilo. Y la X, en vez de que esté ahí tan diminuta, que esto ya también es tema de usabilidad, pues oye, hazla un poquito más grande porque total, si una persona va a hacer el popa lo va a hacer al igual. Tenga X, no tenga X o la pongas más pequeñita. Aquí sí podemos pensar una cosa que es que, por ejemplo, se nos quede en general el diseño, al mejor, desproporcionado a nivel de colores. Vale, aquí una cosa que me gusta mucho utilizar es la regla de 60, 30, 10, que básicamente en lo que consiste es el 60% del diseño tiene nuestro color dominante, nuestro color principal, el 30% tiene el color secundario y el 10% utilizamos el color de énfasis o acento, que bueno, en este caso podríamos decir que es el blanco. Por último, ya para ponerle como la guindal pastel, hemos puesto la marca del zapato, pues en vez de que esté ahí arriba a la izquierda en solitario, la ponemos un poco más abajo en grande para hacer esta compensación que he dicho antes del color de seguimos la regla de 60, 30, 10 y he añadido dos simples esobajes de desello que, bueno, hacen que focalicen un poquito más la zapatilla y, pues, jugamos un poquito con esto también. Aquí vemos el resultado, el pop-up con el que hemos empezado y el pop-up con el que hemos terminado. Para resumir, creamos un poco de foco, aquí me salta una cosilla, súper importante, al hacer estos cambios que hemos realizado aquí, qué pasa, que claro, tus ojos ahora mismo hacen tres cosas, que es zapatilla, descuento y formulario. Nosotros, a través del diseño hemos conseguido guiar al usuario sin tener que simplemente hacer, o sea, perdón, solamente teniendo que hacer estos cambios entendemos que nosotros podemos controlar esa visualización que queremos y lo que queremos destacar, por supuesto. Y por último, la regla de 60, 30, 10 y por último, me gusta mucho esta frase que es Think Outside the Box, que básicamente a lo que nos referimos es, aquí lo que hemos hecho es sacar la zapatilla fuera, que tú puedes decir, bueno, pues, es que yo me gusta que esto esté en las cajas o no se me había ocurrido que puedo sacar cosas de las cajas. A veces nos pasa, incluso también nos ha pasado el primer ejemplo de las imágenes, que superponemos las imágenes y se nos olvida que podemos jugar en la web, sobre todo, con el Z-Index, que vendría a ser el Z-Index el que juega con ese ejemplo. Y por último, vamos a hacer otro tipo de contenido que es este grid de servicios. Es un grid de servicios muy típico, de hecho, yo en mi web lo tengo así, pero lo voy a cambiar, voy a rediseñar mi web, de hecho. Entonces, ¿qué pasa? Que no destacamos nada en relación a otras web, ¿no? Si imaginemos, estamos vendiendo nuestros servicios y somos fríos, somos agencias, pero la parte de nuestros servicios en esta web es igual que en todos los sitios, porque tiene este tipo de diseño, ¿no? Eicono, texto, bueno, o sea, el título principal, y una breve descripción del diseño. Vamos a darle una vuelta y algo que podríamos hacer es jugar con la alineación. En vez de estar centrando todo el centro, porque es poco texto por lo centro en el medio, pues oye, lo llevamos a la izquierda, hacemos que sea más fácil leer y aparte, jugamos un poco con la alineación. No toda la izquierda, el icono, por ejemplo, lo dejamos a la derecha, y aquí, además, hemos añadido un botón, o sea, un botón de una flecha, que lo que nos indica es que es clicable, es decir, o sea, que cada caja de servicio te va a llevar a su página interna. Seguimos haciendo cambios. Podemos incluir, obviamente, el color de nuestra marca, nuestro branding, lo que necesitamos utilizar. En este caso, yo he puesto este color morado para los iconos y, además, he utilizado un recurso de énfasis para que no me quedas en todas las cajas muy blancas, además. Y, por último, también he añadido una pequeña sombra del mismo color morado para darle ese efecto 3D a las cajitas y que no queden ahí como un poco pobres. Por último, algo que podemos adicional es hacer que el último servicio sea diferente o, incluso, el ejemplo que he puesto aquí, que sea el efecto on-hover. Siempre tenemos que tener en cuenta los efectos de interacción. Y, bueno, aquí nos quedaría un antes y un después, incluso utilizando una línea gráfica del servicio, de una línea gráfica por cada servicio. Y, para resumir, hemos jugado por la lineación, he utilizado recursos de énfasis y efectos de interacción. Básicamente, con lo que quería que os quedarais es que el diseño es fundamental y que es un recurso que, obviamente, nos da para mucho y, sobre todo, para diferenciarnos de nuestra competencia, para hacer cosas diseños interesantes, diseños que llaman la atención al usuario. Y, nada, para que os acordáis de mí un poquito mejor, soy Maelyn García, diseñadora web freelance. Soy embajadora de Rayola Networks y podéis encontrarme en mis redes de Arroba Mail in Design. En prácticamente todas las redes en el link de Maelyn García y en mi web mailin.design. Y muchas gracias.